Mainstreethost Web Design & Development Mainstreethost Web Design & Development

UX is not UI: The Differences And Why They Matter

User interface (UI) design is only one element of user experience (UX), though the two are commonly misconceived as the same thing.

Reading Time:7 mins May 22, 2015

Wikipedia defines a logical fallacy as an “argument whose stated premises may fail to adequately support its proposed conclusion.”

These types of misconceptions are, unfortunately, all over the place in our society’s cultural and conversational output, across many fields. They present an obstacle to productive discourse and make progress harder to achieve. Therefore, it’s important to call one out when you see it.

The field of web design is no exception, so misconceptions are prevalent and discussing them makes for interesting and productive conversation. Which brings us to one of our more common and bothersome misconceptions: the idea that UX (User Experience) and UI (User Interface) are one and the same thing. This particular type of logical fallacy is known as a false equivalence, and pretty much means exactly what it sounds like: describing two things –that are not the same – as the same. In this case, while UI is an element of UX, it tells only one small fraction of the story. It’s an unfortunate mistake to make because it often prevents someone from excelling at all the aspects of UX that don’t involve UI. So let’s go into a little more detail on the wider world of UX and the small, but important, role UI plays within it.

A One Pronged Umbrella

In most cases (we’ll look at some exceptions in a moment), having an attractive interface is an important element of your website. However, it comprises only one single prong in the umbrella of UX. The way a user (and, it’s important to remember, potential customer) experiences your site involves many different elements, all coming together to support one general goal: a positive experience. Much in the way a one-pronged umbrella would do very little in the way of keeping you dry, focusing only on the attractiveness of your website’s interface will do very little in the way of keeping the user’s experience consistently positive.

Try, for a moment, to think of your website as though it were a brick-and-mortar location that your customers were entering in the physical realm. Imagine, now, that in the lead-up to the construction of said building, almost your entire building budget went towards creating an attractive décor. Functional building elements – heating, plumbing, lighting, sensible paths of navigation – were almost completely ignored. If this were the case, the actual experience of shopping at your location would be a perilous gauntlet of leaky pipes, mislabeled inventory, and escalators leading nowhere. Likewise, an attractive website interface with no proper functionality does not lead to a positive user experience on the whole.

Thoughts on the Word ‘Attractive’

Much has been – and will continue to be – said about making sure that your website has an ‘attractive’ interface. But haven’t we always been told that beauty is in the eye of the beholder? Well, there’s a couple of different ways to approach this question. While yes, beauty and attractiveness have a subjective element to them, there are aesthetic and visual trends that leave an immediate impression on the person viewing your site.

Large scale, cinematic images, for example, are currently en vogue for web designers – this is both for aesthetic reasons and functional ones, though, as home screens spaced out by large images are easier to code for mobile devices.

Keeping up with these trends does a lot to impact the first impression your site leaves. Also, depending on your demographic, maintaining a ‘trendy’ brand image may be a key component of your entire marketing strategy. If that is the case, the visual aesthetic of your website is paramount.

However, for some brands, a complete disregard of visual aesthetic trends has proven extremely successful. Brands like Google, eBay, and Craigslist, have openly ignored the visual aesthetic trends that keep entire marketing departments of other companies busy for weeks at a time. How do they do it?

Well, in this case, I wouldn’t suggest basing strategy off of their examples. At least not entirely. These are companies and websites that have quite literally changed the world and the way we exist in it. The experience of navigating those sites specifically has become an important thread in our everyday existence. That is why they can get away with aesthetic stagnation: their brand doesn’t rely on visual maintenance.

For the rest of us though, it’s important to at least make an attempt to keep up with the trends.

The Full Umbrella

The idea of the “UX umbrella” was introduced by Dan Willis of In his illuminating SlideShare and accompanying presentation, he discusses the different prongs that make up an entire user experience.

Most tellingly, he describes UI as a combination of the visual design of the site and the functionality of that design (what he terms the ‘interaction design’). In other words, how your site looks and feels is only a small piece of what helps support the experience of using it. That ‘interaction design’ piece of the puzzle comes into play when the user is past the point of first visual impressions and on to the nuts and bolts of actually using the site. The interactional prong of your UX umbrella is at its strongest when the functionality is running smoothest. This makes sense from a user’s perspective as well as a developer’s. Our modern existence is made up of interactions with interfaces just as much as it is of interactions with other humans. So if those interactions feel jumpy and disjointed (or even worse – stuck in the mud and full of 404 error pages), your experience with a given website will be far from rewarding.

Once the customer (hopefully) has begun the stages of experiencing how the site actually functions, there are certain responsibilities on the developer’s end. These represent the next two prongs of the UX umbrella, usability and user research. Usability represents studying the way your site’s visitors interact with the platforms it consists of. This means A/B testing different site elements, studying at what stage users are bouncing from your website, and any other measurements designed to see specific info about how users are interacting with your site’s platforms.

As for user research, it is the next logical step in this process of measurement. It represents the “why” aspect of users’ behavior on your site. This is where developers are looking at more general knowledge about how humans interact and what types of stimuli cause certain behaviors. Color scheme, for example, can be a major influencer for site behavior. So if a web designer is noticing a negative trend in the bounce rate of a particular page, and that information reflects common, research-based knowledge about how certain color schemes affect behavior, he/she has a good idea of what might be causing the problem.

While these behavior-based research methods make up a huge part of UX, they don’t directly involve UI. These are examples of how encompassing the idea of UX really is. So, when you are deciding how to divest funds and energy across your marketing needs, remember not to lump UI and UX together. They represent distinct entities, one far more encompassing than the other. Remembering this and putting it into practice will ensure that your funds aren’t wasted on redundant tasks, while ensuring that important aspects of user experience – like user research and usability – don’t get ignored in the process.

Topics In This Post: