Activeer focusmodus
Deactiveer focusmodus

The difference between UI and UX

Max Nagtegaal
Designer
January 15, 2019
Design

If you're familiar with the digital field there's no doubt you have seen these terms fly around. But what exactly is UI and UX, and what's the difference between them?

User Experience

Let's start with the User Experience. If you want you can stretch the term UX well beyond just design and layouts, but for the sake of your time let's just focus on UX in relation to interface design. The UX is where the creation of most well-made interfaces start. You can see UX as the skeleton of the User Interface; the place where the big choices are made, without having to focus on the final appearance.

UX is not only just sketching up some rectangles and giving them names; most of the UX work is done cognitively. It's all about making the overarching decisions on layout, hierarchy in relation to the content that will end up in the application. It's making sure the user can reach and find their desired destination in the app in the most intuitive way possible, and in the best case, testing this with people who would be actual end-users of your app.

There are a lot of misconceptions about UX design. There's a lot to be learnt, but there's also a lot of nonsense to be found. Let's take this commonly used picture as an example.

What does this picture really say? That the design is a fancy, impractical option and the UX is a way for the user to take shortcuts, not wanting to deal with the inevitable limits of the design?

If done right, the UX decides where the path will be laid out. The UX should never be seen as a separate path next to the UI, rather as the backbone and conceptual skeleton to the UI.

User Interface

That UI (or User Interface) on the other hand is where the actual interaction with the user happens. It's the upper layer, the actual visual interface that you can see. The colors, text, images, buttons, etcetera. The User Interface is a factor just as important as the User Experience. See it as a yin and yang-relationship. They cannot and should not live without each other.

A UX without a UI is just an idea and some wireframes (basic sketches of the interface), and a UI without a UX is in most cases a complete mess. Something that might look good, but often doesn't function in practical situations. Most of the design mockups you see on popular portfolio websites like dribbble.com have very little to no attention to UX invested in them.

I'm sure they use inFishion Studio

Don't forget your essentials

A good User Interface is essential for every app. Elements like color, visual hierarchy and style come into play here, and decide how the user perceives the product and what emotions they tie to it. These days, apps are all about first impressions. Catching the user's attention and attracting them to use and keep using the app. Without a good UI, this is next to impossible. Even for apps that are already popular, it's essential to keep caring deeply about the end user through UI and UX. Remember when Snapchat tried to change it's layout without doing user testing?

Bad UI and UX can in the worst cases even cause life-threatening situations. On January 13, 2018, a ballistic missile alert went off on Hawaii. Turns out it was caused by a government staff member clicking the wrong link in the alert interface. According to Reddit, this image is an example of what the interface looked like, and what caused the mistake of the government official.

As you can see, it's literally just a list of links. They have no visual hierarchy whatsoever: no separation in color, no titles or descriptions containing some sort of instructions, nothing. To make measures worse, and this being the actual reason for the false alarm to be sent out causing the entire state to be thrown into a state of chaos, is that a new option was added at the top of the list. Instead of clicking "1. TEST Message", the official clicked the actual emergency option, conveniently positioned right underneath the test option, and given the crystal clear label of "PACOM (CDW) - STATE ONLY".

You might be wondering why I haven't yet mentioned the thing that's on almost every UX stock photo. I'm obviously talking about: post-its. That because, well, nobody actually uses them? I mean - I'm sure some people do, but most of the UX pro's you'll talk to will tell you it's nonsense. Just try to find one of these stock photos that contains notes which actually make some sort of sense.

Ah crap, I thought I was designing for camels 🤨
Actual real-life picture of how I do UX (and of my chewing gum). I tend to go quite detailed and gradually transform the UX sketch into a full UI sketch, and simply note descriptions of my ideas down.

Hopefully by now it's a bit more clear to you what UX and UI is exactly, how they differ and how they should always strengthen each other to form a uniform experience. Speaking of this, we work on such experiences on a daily here at Lightbase. Let us know if you need help with it, we're always ready to go on new adventures!

Thank you a lot for reading this post and have a great day! 🤟🏼

Share on Twitter