Busting the UI=UX myth

Identifying user goals and helping them accomplish those goals through your product – that’s the key objective of all organizations that build digital products. There are various elements that influence the usability, desirability and reliability of a digital product. The most common ones that we hear today are UI & UX. These fields, even though significantly different in nature, sometimes tend to misguide people down a path which says “UI=UX“. But, we as designers know that it’s not true. So, let’s try to bust this myth today.

UI=UX

Job seekers and professionals all over the globe are facing quite a lot of problems as a result of this myth. Job listings for UI design positions have been found to be asking for “user research” skills, and job listings for UX design positions have been found to be asking for skills like visual design, iconography, etc. It is taken for granted that a UI designer should possess skills like user research, information architecture, etc, and likewise, a UX designer should possess skills like visual design, iconography, etc. Yes, there is an overlap of skill-sets, but the interface is not the ultimate solution to a UX problem.

UX has a much broader scope. If we were to define both in one line, UX could be defined as the feeling that the user gets by using a product, and UI could be defined as a tool which lets the user interact with the product. Metaphorically speaking, let’s consider the case of a grilled cheese sandwich. The feeling that we get when we dig into it can be considered to be UX, whereas, the ingredients that go into the sandwich (the bread, mayonnaise, cheese, butter, etc.) can be considered to be a part of the UI.

The feeling that we get when we dig into it can be considered to be UX the ingredients that go into the sandwich UI=UX can be considered to be a part of the UI
The feeling that we get when we eat a sandwich can be considered to be UX, the ingredients can be considered to be the UI.

A sandwich made with white bread, high fat cheese and mayonnaise would taste almost the same (read: equally delicious) as the one made with whole wheat bread, low fat cheese and eggless mayonnaise, but people who have a tiny bit fear of putting on weight, will by no means go for it. We have good UI in both cases, but due to lack of user research (which again is a part of UX), we are not aware of the kind of users who will use our product, and as a result, our target audience reduces by a massive amount.

The UX design process encompasses user research, information architecture, interaction design, UI DESIGN, interactive prototyping, and usability testing. UI designers need to possess skills like visual design, iconography, typography, etc, but not necessarily user research or information architecture. UX designers on the other hand need to possess skills such as user research, information architecture, interaction design, etc. However, it certainly does help to be competent enough to possess a larger skill-set, and be a bit of a hybrid.

The differences between UI and UX lead us to the conclusion that it is better to strive for UX rather than just UI. Making our product look pretty does not really solve the problem. We should try to make it look less rude. That solves the problem. It was very recently, and in fact very rightly tweeted by @Useagility that – “Your website may be beautiful but people will leave if they are unable to figure out how to navigate your site quickly.” Making the content on our website/digital product navigable/locatable is an essential part of establishing good UX. The user should find value in our product.

There are many live examples of products with good UI and bad UX all over the internet. The most common ones are those long online forms. Some forms look really good. They follow all the current UI trends – proper padding, top aligned labels, beautiful use of the whitespace, aesthetic fonts, etc, but what’s the problem with them? They are insanely long.
When we ask a user to fill out a form, we’re actually starting a conversation with them. Let’s face it, when we personally start a conversation with someone, we don’t expect them to go on giving their personal details, contact details, address, educational details, etc all at once. That just does not happen. Then why do we, as designers who are supposedly capable of empathy, give the user the agony of filling such forms?

Instead we should group related fields together under one heading, and make life easier for the user, so that the reaction of the user goes from “OMG! That’s a long form.” to “Ok, so first my personal details, then my contact details…” I mean isn’t that the reason why we were introduced in the first place? Making life easier for the user. There are examples of good UX and bad UI as well, and you already know what I’m talking about – ATMs. Yes, they top my list in this category.

UI=UX You put your card into an ATM type in your pin and choose your task accomplish your goal A decent UX altogether
You put your card into an ATM, type in your pin, and choose your task, accomplish your goal. A decent UX altogether.

Their interactions are simple, and pretty much similar everywhere. You put your card in, type in your pin, and choose your task (say cash withdrawal), accomplish your goal (get your cash in this case), and walk out satisfied, a decent UX altogether. But when it comes to their UI, need I say any further? The point I’m trying to make over here is that a product that has a good UX and bad UI always trumps a product that has a good UI and bad UX. Here are few examples demonstrating the fact that there can be products that can have bad UI & good UX and vice versa:

Bad UI & Good UX Examples:

Ironically, some websites that provide valuable information/literature on UX & UI have the worst UI I have ever seen. They do not follow the current UI & Visual Design trends, and to be honest, do not please the eye (read: are a bit rough on the eye). By the looks of it, they seem to be stuck in the dark ages. But, can you find exactly what you’re looking for? Is the website navigable? Is the website usable? The answer to all those questions – YES. They follow every known principle/theory of UX. If that hadn’t been the case, people like us would have given up educating ourselves ages ago. UX Matters stands out as a winner here.

example of Bad UI and Good UX UXmatters

If a non-designer wants a firsthand experience on what bad-UI-good-UX looks like, I would advise them to go visit a bank’s website. Any bank. People who code these websites do not seem to be aware of CSS (Cascading Style Sheets). These websites lack proper padding all over, have images as buttons, do not have use typography properly (even after Google gave us a gift called Google Fonts), content is not aligned properly in grids, and worst of all, have a bizarre choice of colors (and I mean bizarre), etc. The list could go on and on for these guys. But yes they most certainly are usable and have a pretty straightforward user interaction; otherwise, no online transaction would have been possible through these websites. Check out Bank Of India‘s website. You’ll know what I mean.

example of Bad UI and Good UX Bank Of India

Good UI & Bad UX Examples:

There are certain websites/apps that give a glimpse of their content (e.g. journal/article) and then ask the user to create an account in order to view the complete content. Why? I mean, is a short glimpse (5-6 lines of an article) enough for a user to know whether the content you are providing is useful to them? Some of these sites/apps indeed have an uber cool user interface. They follow all the current trends of visual and interface design, but the experience that they provide is a bummer. It’s like forcing the user to do something. Would you not rather have the user read/view your content, and then happily register at their free will? Glassdoor is a perfect example. You never get to know what salaries are on and after the 2nd page under the salary tab, etc without logging in.

example of Bad UI and Good UX Glassdoor

Then there’s my favorite. E-commerce sites that have you glued onto your computer screen with their stunning interfaces (and products obviously), and then, ask you to click on certain products to view their prices. No, I don’t want to navigate to a different page to view the price of the product. Show them on the same page just like the others. Check out American Golf‘s page. You are required to click on “Buy Now” to view the price of certain products.

example of Bad UI and Good UX American Golf

Guide To Establishing Good UI & UX

Well, it certainly does make our product stand out if it has both, a good UX and a good UI as well. Here’s a short and sweet guide to how we can establish both (and not just good UI or good UX):

  • Present information according to its measure of importance, i.e. showcase your content in a way that the primary and more important information stands out.
    For Example: Use pop-ups to display a success message (say ‘Deleted’ or ‘Liked’) instead of shoving it up somewhere in the main body of the content.
  • Use visually engaging graphics. Use motion graphics and subtle animations. Users respond very nicely to that.
    For Example: Make the sliding menu in your mobile application more appealing by giving it easing/transition effects.
  • Reduce effort required from the user’s end. Use design elements that the user is familiar with.
    For Example: Use the three bar icon (which is in fact the standard menu icon) as a trigger for the menu of your application. Users are familiar with that. They have seen the same kind of icon as a trigger for the menu for countless mobile applications.
  • Make use of the whitespace. It’s all about eliminating the unnecessary, so that the necessary may speak.
    For Example: Always display information that is relevant, rather than putting up clusters of irrelevant information all over the place just to show that yes, we know a lot of stuff. And, didn’t our teachers insist on us being neat and clean right from the days of kindergarten?
  • Reduce the number of clicks/taps to the target function to as low as possible. Remember: The user is using your product to get their job done quickly and with ease.
    For Example: Well, reduce the number of clicks/taps to the target function to as low as possible.
  • Make the content on your product navigable and locatable.
    For Example: Use internal links within your page if you want to provide more information on a particular topic. Organize and manage the information architecture of your website. Card-Sorting is the name of the game.
  • Keep in mind the words of Thomas Mann – “People’s behavior makes sense if you think about it in terms of their goals, needs, and motives”. Design accordingly.
    For Example: Match the needs of users with technical feasibility and economic viability, and not the other way round. Design for the user. Conduct usability tests, see how users behave and react to every aspect of your product and implement what you observe to the best possible extent.

Concluding

In the end, I’d like to conclude by saying that people should see UI and UX the way they actually are, and get rid of the myth “UI=UX“, because, UX is a problem that designers/architects need to solve, and like I said earlier, the interface is not the ultimate solution.

(1 Posts)

Arijit Banerjee is a UI & UX Enthusiast. Although a power systems engineer by education, he has always found himself to be inclined towards the world of UX. He has been associated with several firms as a UI/UX Design Intern and has helped define experiences across a wide range of products. Apart from that, he's an avid user of American Crew products, a dog lover, and an out and out foodie with decent culinary skills. You can visit his website or get in touch with him on LinkedIn.

Comments

  • sumit

    Nice work arijit..

  • Hi Arijit,

    Thanks for this really relevant article. I like your analogy with the sandwich.

    I myself faced this problem quite a few times, having to explain to clients or even developers the differences between UI and UX (I’m a UI Designer flirting a lot with UX in my current job).

    Also I would like to clarify something about the ‘three bar icon’ you mentioned in your article. It is officially called hamburger menu and has been recently found reducing user engagement. See this great article about the subject: http://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/

    Cheers,

    Laura

  • Arijit Banerjee

    Hi Laura,
    Thanks for the clarification. True, but as of today, we see the hamburger menu across various applications as a trigger for the application’s menu. I’m not going into whether it is a correct choice or not. What I’m saying is that when most users see it they know what it will do (i.e. bring out the application’s menu). We can reduce the user’s effort to a great extent if we let the user use their memory. Regarding the fact that it is reducing user engagement, well that is probably why design principles today are not the same as they used to be 10 years ago. Change is inevitable. People will always find flaws with the current system and try to make it better.

    Cheers,
    Arijit

  • My current cash machine process:

    1. Insert card
    2. Enter pin
    3. What service would I like? -> cash only
    4. Would I like to check my balance? -> no
    5. What amount would I like? -> £30
    6. Would I like a receipt? -> no
    7. Withdraw cash.

    If 90% of users want cash, no receipt, no balance check then for 90% of people steps 3,4 and 6 are unnecessary.

    My ideal cash machine process:

    1. Insert card
    2. Enter pin
    3. Enter an amount (You want cash only, no receipt right?) -> £30
    4. Withdraw

    At point 3 there could be an option to select other services (e.g. check balance, add receipt etc.).

  • Arijit Banerjee

    Thanks!!

  • Arijit Banerjee

    Hi,
    Actually, here in India, we don’t have the 4th step that you mentioned. Check balance, cash withdrawal, etc. are included in the 3rd step: “What service would you like?”. “Would you like a receipt?” comes immediately after that, followed by “What amount would you like?”. I believe that’s a pretty decent UX.

    Cheers,
    Arijit

  • Benjamin Perry

    Interesting article, however i think that you need to clarify what you mean by UI.

    User Interface or User Interaction… Assume you’re talking about the latter.

  • Ashish

    A nice clarification on UI & UX.

  • Yes it does vary significantly between ATMs. I have one near me in London that also asks what language I want (English or Cockney) which is funny the first time but annoying after the 100th!

    Relating to ATMs’ UI/UX; there was an interesting study done a few years ago. It showed that people actually assume a good UX because of a good UI (even when presented with what could be considered a poor UX). They feel “what is beautiful is usable”: http://www.sciencedirect.com/science/article/pii/S095354380000031X

  • Dean Birkett

    Agree with Laura here. We see it on small screen devices, but that doesn’t mean that it should fit onto desktop. An older user who was of a feature phone generation said that he had no idea what this icon was for, and would just “ignore it”. The icon alone is currently not strong enough on desktop to live alone, there’s a number of articles by LukeW, and this one here – http://exisweb.net/mobile-menu-abtest – I’ve no doubt that a menu icon will eventually be able to live on it’s own but I think it still needs supporting text. Check out Slate.com and Uber.com for their implementations, which is easier to understand for *every* user?

  • Arijit Banerjee

    Hi Dean,

    I actually was referring to mobile devices. The hamburger menu has been in use for a long time. Initially it was called the drawer. Designing for *every* user is practically impossible. That is why we have our target audience. Every user is unique. If we start designing for every user, we would end up with products that won’t please anyone. And yes, I do agree that it would be better to have supporting text with the icon.

    Cheers,
    Arijit

  • Arijit Banerjee

    Thanks!!

  • Dean Birkett

    Thanks for clarifying Arjit, I was referring specifically to this comment:

    “Use the three bar icon (which is in fact the standard menu icon) as a trigger for the menu of your application. Users are familiar with that. They have seen the same kind of icon as a trigger for the menu for countless mobile applications.”

    I read that as though you’re advocating using the three bar icon on desktop sites, and not that you were only talking about small screens.

    Best
    Dean

  • Tristan

    I am seeing a lot about discussion pulling apart UI and UX these days, and it’s all great conversation. But at the end of the day, I don’t think it’s so easy to parse these two. You use the UX Matters website as an example of “Bad UI, Good UX” – while at the same time saying that you feel like it’s from the dark ages. How is that good UX? Good UX isn’t just about navigation and usability – as you said so yourself, it’s about how a product makes you feel. Just because something is usable does not necessarily equal good UX. Good UI is almost certainly a requirement for good UX – if a product doesn’t feel polished, it impacts the UX, sometimes quite dramatically.

  • Arijit Banerjee

    I also said that having both a good UI and a good UX does make your
    product stand out. UI is most certainly a part of UX, but it definitely
    isn’t the only thing. You have a beautifully designed UI, but your users
    do not understand how to find content or navigate, what good would your
    beautiful UI do? The UI of UX Matters is from the dark ages. People
    will agree to that. But, can you find what you’re looking for? Can you
    navigate easily? Yes, you can. The website might not look good, but its
    usable. To provide a good UX, you need to have a product that is not
    only good looking but usable, useful, accessible, etc. And just because
    something doesn’t have have a good UI does not necessarily mean that it
    has a bad UX.