Does UX design have a good future?

Yes and no. The label “UX” may fall out of fashion or become permanently and unhappily glued to UI in “UX/UI”, but don’t worry about the label. Worry about the skill set. The skillset will still be needed a hundred years from now.

The label itself, “UX”, is so badly abused now that it’s practically meaningless. Depending on who’s writing the job description, it could mean any number of things:

  • Person who takes requirements and makes wireframes for the graphic designers.
  • “Hey, we need a button on this page, what color should it be?”
  • Web designer who also writes the front-end code.
  • Graphic designer.
  • Person who makes the mock-ups.
  • Person who breaks the tie when stakeholders and developers disagree on what’s more “intuitive”.
  • Person who slows down development by asking for things that are more difficult to code.

The full scope of user-experience design, however, is the — you guessed it — entire user experience. It’s not a little value-added widget stamped “UX” you just bolt on to the product to make it more “intuitive”.

As a UX designer, you need to be competent in usability and ergonomics but also the emotional effect of the design, primarily but not only aesthetic design. You must be a competent interaction designer and information architect, and you must know how to validate your design choices with usability or A/B testing and other real-world methods. You don’t necessarily need to be a graphic designer, but you do need to know how to evaluate a design aesthetically. You don’t necessarily need to be a writer, but you do need to know how to evaluate labels and copy. You don’t necessarily need to have a degree in business, but you do need to understand how to balance business objectives, resource constraints, and user needs.

If you have that competence, you are a valuable asset to any product regardless of your label. It means you can affect outcomes like customer satisfaction, sales, retention, error rates, customer-service calls, and brand perception. Importantly, that competence is not specific to any technology. It’s not “Web UX” as opposed to “mobile UX”. It’s a good design optimized for people, context, and goals.

Be a designer, not a label, and your future will be just fine.

What are the expectations of a UI architect?

First, you are designing the user experience (UE), not just a UI. You want to know your audience; expert, in-house, public, or a combination. For the public, you want to understand your target audience; perhaps some demographics like age and education. What is the goal of the site/app?

Second, designing a UI does not happen in a vacuum. It needs to interface not only with front end aspects like OS, browser, etc. but also with potential items like databases, external inputs(location, movement, etc) You need to be aware of those parameters so as to avoid creating a disaster for the team behind you. You are a member of a team!

Third, you need to understand what can be (reasonably) done within the architecture you are using. This is very much a balance issue, i.e. is it worth the development time vs the return or would something simpler fit the bill just as well.

Fourth, you need to interface with the client/ end users. You are both a translator and a communicator between the user and the programmers. To the third item above, the client may give you a list of things but they may not be willing to invest the money or potential launch delay to implement one or more of those items.

Unfortunately, I see more poorly thought out UI’s today than previously. For example, I critiqued a website recently that had fantastic programming with all the latest widgets. Very modern and geared toward twenty-somethings. The problem is their target audience was 45–65; a group that probably closed the tab within 15 seconds. Or seeing an expert POS system where the employee had about 50 mouse clicks to complete one screen. Had it been keyboard-driven, it would have taken about 1/3 the time.

Those were two bad user experiences where the architect just forgot the mission and didn’t consider the target and goal. Or maybe failed to ride herd on the team. Riding herd is a good skill; it isn’t so much that every member of the herd has to be in an exact position, but the herd needs to keep moving in the right direction and keep those strays closer.

Data Structures for Frontend Software Engineers

It’s more than just style…

Now, in addition to having an aesthetic understanding of HTML and CSS, Frontend Engineers are expected to master JavaScript as well. As datastores on the client become “replicas” of databases on the server, intimate knowledge of idiomatic data structures becomes pivotal. In fact, an engineer’s level of experience can be inferred from his or her ability to distinguish when and why to use a particular data structure.

Bad programmers worry about the code. Good programmers worry about data structures and their relationships. — Linus Torvalds, Creator of Linux and Git

At a high level, there are basically three types of data structures. Stacks and Queues are array-like structures that differ only in how items are inserted and removed. Linked ListsTrees, and Graphs are structures with nodes that keep references to other nodes. Hash Tables depend on hash functions to save and locate data.

In terms of complexity, Stacks and Queues are the simplest and can be constructed from Linked ListsTrees and Graphs are the most complex because they extend the concept of a linked list. Hash Tables need to utilize these data structures to perform reliably. In terms of efficiency, Linked Lists are most optimal for recording and storing data, while Hash Tables are most performant for searching and retrieving of data.

Why do backend developers have more confidence in their profession than frontend developers?

Because 99% of the time when someone identifies as a front-end developer they are saying that they have not been a developer for very long.

Think of it this way. On the web, Ajax was “invented” in 2004 (actually Outlook was doing it in 1999 but shh…we can’t give Microsoft any credit). It did not become a central part of most web developers’ lives till 2008/2009 or so. Even then, Javascript was avoided by many until frameworks started coming out in the early 2010s.

So what were people who were already established developers pre-2010 doing? Working largely on the back-end. So now that they do a lot of front-end work too, they face the choice, do they brand themselves as a “front-end” or a “full-stack” developer? I certainly choose the latter.

Which leaves most people who embrace the “front-end” moniker as people who have been coding professionally for less than six years. So yeah…they’re less sure of themselves.

For the record, I use the “front-end” and “back-end” terms above in the manner I see them used more often, with “back-end” meaning server-based languages, databases, etc; and “front-end” meaning HTML, CSS, and Javascript. Personally, I dislike those definitions and prefer “back-end developer” to indicate how good someone is at understanding architecture, performance, databases, and security; and “front-end developer” to indicate to what degree someone thinks about human-computer interaction, responsiveness, UI optimization and reusability, browsers, responsiveness, and accessibility. When you formulate definitions this way you start seeing these as two largely orthogonal dimensions of a square, rather than anything mutually exclusive.

Disclaimer: I use 99% rhetorically. It certainly is an overwhelming majority but I haven’t done any data gathering on the subject. That being said, I certainly don’t claim that front-end development is easy. There’s a huge amount of churn. There aren’t many other areas of development where people have to actually stay on top of language specs. 

Is Web Development Dead?

Personally, I’d give it about 5 to 7 more years, maximum 10. I’d even kill off web design alongside it. I am talking about website development, specifically where the developer is concentrating on writing code that manifests directly on a website, rendering HTML and Javascript.

Web development is a broad term though because API development that manifests as JSON data across HTTP requests could also be considered web development.

When web design was a top role for designers, about 12-15 years ago, it was because design demands were rooted in print design. This was before mobile phones were a viable browsing tool, so you could bank on having consistent screen sizes. This was also at the time when broadband for the home was common enough that the average person could view a complex website that was so abundant with a skeuomorphic design that the bandwidth requirements were high, but the quality was high as well. As a result of complex design, web development was also a dominant role, because it was a lot of work to develop alongside that complexity of the design.

But as mobile device usage has grown, and the separation of concerns from websites being king, to instead a combination of websites, apps, and other services, the website’s need for being gloriously designed decreased. Given that we continue to have an increase in device variety, this trend is not going to reverse itself. A simple, clean design is best suited to auto-adapt to the variety of screen sizes and types that will be available for decades: visually, this is all the way from a wristwatch to a billboard.

Based on that, the majority of website development has already shifted to more data-centric work, above design-centric. If I’m viewing website content on my computer, the design might matter to me. But when I switch to my phone, design (at least, heavy graphical design) is only going to get in my way. The design components that will matter on my phone are color, typography, readability, etc. There will still be a need for designers, but far less than what we needed a decade ago, and certainly less than we need now. Designers will need to branch into more cross-device creative direction than simply “website design.”

And developers are already heading that way, by avoiding design and focusing on API development, which is critical for driving website content while also driving the two other most important technologies needed right now:

  • Apps, which are currently manifesting primarily as mobile apps, but which also include voice-activated apps, and VR apps (through independent devices like what Google tried with Glass), and
  • Integration, which is the data-sharing aspect of API development that allows the data from one app to be integrated with the service of another app to provide suite-like features across disparate systems.

When a design is needed, most of the existing frameworks can already handle 95% of the design needs a company has. What we’ll be lacking though, unless the trend changes, is qualified business experts who can properly capture web application needs from business owners to develop solutions that fit company requirements. The demand will be on making custom applications at a fraction of the cost of what it used to be. The more APIs there are out there to perform the functions we need, with integration at their core, the more a website is just going to be a clean merger of technologies from a variety of sources, and design is going to remain minimal, because that same content needs to adapt to varying phone sizes, a watch, a lens over my face, an audio interface reading back to me, VR projections from a headset, and so forth.

So web design and development as we know it today, is going to be mostly gone within a decade. API development, app development (in many forms) and systems integration will be the primary focus.

Convert an image to a data URI with your browser

You probably know that you can use data URIs in just about any browser now, but how do you convert an image to a data URI? It turns out, most browsers can do it for you.

What is a data URI?

Data URIs are all the rage these days. They let you reduce HTTP requests by putting small images right in your HTML or CSS. For a full overview of what they are and how to use them, check out this post on CSS Tricks.

Here’s what they look like in case you need a refresher:

Now I’m going to show you how to generate these URLs using a tool that every web developer has: your browser.

Chrome & Opera

This trick works in Chrome and newer versions of Opera, since they use the same rendering engine.

1. Load the page that contains your image (loading the image directly won’t work) and right-click on it. Select Inspect Element.

2. You’ll see the console appear. Now click on the value of the src attribute.

3. The console will switch to the Resources tab and highlight the image. Right click on it and select Copy Image As Data URL.

4. Now just paste it into your HTML or CSS!


Firefox is the easiest because it works for images on a webpage as well as images loaded directly in the browser. There’s also one less step compared to Chrome/Opera.

1. Load the image or the page containing your image and right click on it. Select Inspect Element.

2. The image will appear highlighted in the DOM. Right click on it and select Copy Image Data-URL.

3. Paste it into your HTML or CSS.


Safari is similar to Chrome, but the UI is a bit different. It’s the same number of steps, and it won’t work if you load the image directly in the browser—it has to be on a page.

1. Load the page that contains your image and right-click on it. Select Inspect Element.

2. The console will appear with the image highlighted. Click on the value of its src attribute.

3. The image will be shown in the console. Right click on it and select Copy Image.

4. Paste it into your HTML or CSS.

Internet Explorer

Alas, I haven’t found a way to copy an image as a data URI using IE9, 10, or 11, but you can use a free online tool instead.

A free online tool

Another easy way to generate data URIs is to use a free service. lets you drag and drop an image and gives you the resulting code instantly. So if you don’t like the in-browser method (or if your browser doesn’t support it) you’re not out of luck.

My 10 principles of interaction design

I got my start as an interaction designer during the first internet bubble. Since then I’ve worked on interactive marketing and products for everything including finance, automotive, electronics, packaged consumer goods, pharmaceuticals and healthcare. In that time and experience I have come to know that there are a few key things that make good interaction designs and designers. Here are 10 of them.

01. Start with two

Interaction Design is like driving a car at night. You can only see as far as the headlights, but you can still get to your destination.” When a task seems too big, start by picking two things, like a page and a button. Establish their relationship and interaction. Once that is done, pick something else that relates and keep going. Everything will come together thanks to the brain’s natural ability to spatially model the world.

02. Prototype

Benjamin Franklin is famously quoted as saying, “Well done is better than well said.” I highly doubt he said this because Thomas Jefferson was long-winded and used too many buzzwords. The fact is, showing something working is always better than saying it will work. Wireframes speak to interactions while prototypes are interactive. Learn some code, Keynote or Powerpoint, Fireworks, or any of the many tools, like Axure RP, that allow you to prototype and start doing designs well.

03. Use patterns and prediction

Everything people do is based on a pattern they have previously experienced and the expectation they have is based on those patterns. Some interaction designers call those patterns ‘mental models’ and use them to build ‘scenarios’ to predict how users will interaction with their designs. Mental models and scenarios are esoteric ways of saying that you should predict what your users expect and plan your response accordingly.

04. Trick people

Technology tends to be very slow compared to our cognitive abilities. There are technical ways to speed up the response time of our designs, but sometimes it isn’t enough. This is when I design ways to trick people. Remember that while people are predicting an expected outcome, they can be easily distracted. Use this to your advantage when technology isn’t keeping up and design the unexpected. The distraction will trick them into thinking the technology is faster than it really is.

05. Tell stories

Stories include a setting, characters, dramatic tension and resolution. That’s all fine and good if you’re writing a novel, but thankfully interaction designers don’t have to be so structured.  Users need interaction designers to solve their problems, and the best way I’ve found is to frame the character and tension as the problem to resolve.

06. Use but don’t abuse metaphors

Metaphors are everywhere in interaction design. The desktop, like your desk, is where you keep your frequently accessed files, folders hold those files, so on and so forth. These are acceptable metaphors that are based on previously learned interactions. However, there are also metaphors like the page-curl. That 3D looking, dog-eared corner suggests a layer of content below: a terrible metaphor for pages in a book bound by a spine. It’s nothing more than a button and does nothing to improve interaction with technology today. Use metaphors to improve interaction, not for the sake of being cute.

07. Don’t be a dick

Ten years ago, Flash was at odds with accessibility experts because, as a plug-in, it didn’t expose its code to devices for impaired users. Today I’m shocked when I talk to young designers who don’t know that the ‘alt’ in HTML was created specifically for those devices. Now as HTML5 and CSS3 are taking the limelight away from Flash, it is our job as interaction designers to bring accessibility issues back to the forefront. Consider the elderly, those who rely on hearing devices and screen readers for the blind when designing interaction. Ignoring them as users is inexcusable. Don’t be a dick.

08. Make novices experts

No product is so simple that every user is automatically an expert. Make sure that by default your designs have a learnability that make novices into experts with every interaction.

09. Be a humble expert

People are impossibly complicated, and designing interactions for them is even more so. You have to be a student of the world if you want to be successful, and that success will make you an expert in where ever your designs end up. However, being that expert does not always make you right. Good ideas can come from anyone and anywhere. Being humble enough to accept other ideas is paramount to your success.

10. Seek your failures

You won’t learn as much from praise as you will from criticism. Criticism almost always comes from honesty. It’s a lot harder to know if that is the case with praise. The best things are always hard, and the hardest part of criticism is not taking it personally. When you find a good critic you’ll be able to defend yourself in lively debate with neither party taking it as an attack. You and your work will be better for it.

One last thing to remember is that rules should be broken as systems evolve but you first have to understand the rules inside and out in order to break them and come out ahead. Understanding comes with experience and experience comes with time and good mentors. If you don’t have access to mentors at your company, seek out communities online, like the and read as much as you can.

Remember, interaction design is the coming together of psychological behaviour and technical development. Personally, I like to alternate between books on business innovation and management like The Cluetrain Manifesto by Rick Levine and classic design books like About Face by Alan Cooper with the occasional cognitive science book, On Intelligence by Jeff Hawkins thrown in.

How to get the dominant colors of an image with JavaScript


You know how Dribbble shows a color palette for each shot users upload? They always look perfect right? Here’s a tool that can give you the same quality results using pure JavaScript.

I played with Color Thief a few months ago but surprisingly never posted about it. For me, something that’s easy to use and has consistently great results is pure gold. Here’s how it works.

Getting the dominant color of an image

Generating a color palette from an image

Learn more about how Color Thief works and try it out with your own photo. The project was created by Lokesh Dhakar and licensed under the Creative Commons Attribution 2.5 license.

What about a PHP version?

It’s amazing that JavaScript can do all these great things, but if you’re running PHP on the backend then you’re out of luck. In that case, there’s a PHP port of Color Thief that you can use for similar results.

External Popup Links Using jQuery

With the deprecation of the target attribute in XHTML Strict, opening links in new windows has become a bit trivial, if not annoying, to standardize. I always look for a consistent, unobtrusive approach that degrades gracefully; and since I use jQuery quite frequently, this is how I usually handle them.

The solution is a small piece of jQuery code in your $(document).ready()section:

Now, add rel="external" to all of the links that you want to open in a new window:

From here on out, users that have JavaScript enabled will receive external pages in new windows, while those without JavaScript will still be directed to the appropriate location.

I use rel="external" because it’s generally a good practice to limit popup links to external websites only. You could very well use rel="popup"instead, but I prefer the former for semantics.

Social sharing buttons are ineffective

I have often talked about why plastering social sharing buttons all over your website is completely ineffective. This morning, Smashing Magazine all but confirmed my theory.

In today’s Smashing Newsletter, they wrote:

Are social sharing buttons really that effective to be placed in the most visible areas of websites, sometimes even as “sticky” notes on the left or on the right side of the page? Are there any case studies which provide proof that these social icons are actually effective? Or are they indeed ineffective, barely used and really just annoying?

While their stance isn’t conclusive, the fact that they even raised the question says quite a bit. Are people are finally becoming desensitized to all the Facebook and Twitter logos everywhere? Maybe now that social media is commonplace, we can all get back to writing better content instead of designing trendy new share widgets.