UI vs UX. Know the difference

You always hear about UI and UX together. They both begin with the word “user” so you’d assume they refer to pretty much the same thing. Except they don’t - they actually refer to two separate parts of one thing, an app’s look and feel.

UI and UX go together to form what you see and feel when you use a piece of software. From small things like buttons, input fields, nav bars, to big things like an entire user journey. UI/UX covers a user’s experience using an app, both visually and psychologically.

Now, it’s not hard to mix these up or misunderstand what they mean. Or assume they have broader meanings than they actually do - UI/UX design is not graphic design. UI design doesn’t mean drawing things. UX isn’t a meaningless term.

And so, in this article we’re going to explain what UI and UX mean and help you understand why they’re different - and how they come together to form a user’s experience using software.

What is UI?

UI stands for user interface. It refers to the visual elements that comprise a piece of software - navigation bars, headers, menus, buttons, fields, tables, and so on. The controls you might see on a video game are also part of its UI. The icons and buttons you see on your phone screen are also part of its UI.

The UI is the core of an app’s look and feel, as it’s what you see first. Done well, an app’s UI helps you get around and figure out what you’re doing. A red button makes it clear you’re about to do something negative, a gray button is inactive so you must’ve not filled something in, or a dropdown arrow suggests there’s a menu you can open.

The role of an app’s UI is to help you fulfill goals through visuals. It helps guide you through the app and it gives you visual feedback as you do things - most commonly, red when there’s an error or green when you’ve done something successfully. Through the UI, you connect with the app and the app connects with you. Otherwise, you would’ve been looking at lines of code and typing in commands.

Example: Apple’s Weather app uses images to quickly show you what the current weather is like (above, it’s telling you there are clear skies). Through visual hierarchy, users will be inclined to notice important numbers first. The icons make it quicker to tell what each card is about. The page is split into cards going from commonly searched-for weather info to more specific.

Now, UI design is one very specific branch of design. Unlike graphic design, UI centers more around functionality than looks. Of course, UI can (and should!) be pretty, but its main goal is to help you use pieces of software, not to give you eye candy. And so, to think that UI design and graphic design are the same thing is completely wrong.

Graphic design can be involved in UI design - through illustrations used on presentation sites, on onboarding pages or on big error pages, through icons and logos - but it’s a different type of design. So when hiring someone who does UI design, just know they might not be able to create the type of logos or art that a graphic designer could.

Here are a few examples of important UI elements:

• Navigation & layout. You can’t really do anything in an app if there’s no way to navigate from a place to another. Through sidebar menus, header menus or toolbars, users can get around in order to fulfill their goals. By positioning elements in a logical way, you can quickly guide users - they’ll always expect, on desktop for instance, to see navigation at the top and content in the middle, divided into columns and containing headings to highlight important information.
• Visual branding, colors, and typography. The visuals and aesthetics are a key part of UI design. Through colors, you can communicate certain feelings - blue is calm, red is urgent, pink and purple are cute and funky. You can pair them up with fonts in order to better reach your target audience: for instance, black and white and serif fonts are serious and mature, and can be used in academics, journalistic or government platforms.
• Actionable items. Pretty UI is great, but it’s even greater when it’s functional. Since UI covers the way you interact with an app, a key part of an app’s UI is its interactive elements. That is, anything that is clickable. And highlighting that by adding hover effects, like a button turning a different color when you hover over it.
• User-guiding items. Info bubbles, helper text below input fields, icons, tutorials, and even alerts. These UI elements help guide users through apps, they give them key information and feedback. This helps them fulfill their goals and avoid making mistakes.

Thus, UI is the visual part of software, which is what sets it apart from UX.

What is UX?

UX, on the other hand, stands for user experience. It refers to the journeys a person takes when using a piece of software. From creating an account, logging in, editing their profile info, to complex tasks such as bulk editing items in a data table while abiding to specific restrictions.

UX represents what you can do on an app, the way you’re guided through it, kept from making mistakes and fulfilling your goals using software. It’s about the psychological side of things, supported by the visuals, which is the UI. The UI shows you what you can do, while the UX tells you how to do it.

Example: Apple’s Health app. The app features a list of health & wellness factors you can track. If you want to manage your sleep, you can select it from the full list and set up your desired sleep schedule.

If the UI is the heart, the UX is the brain. Through UX, people are guided from one step to another in order to fill in data, place orders, view and manage statuses, create content, track wellness data, order taxis, and so on.

UX also refers to how people feel when using a piece of software, given the name “experience”: apps compile a series of user journeys, which, if built correctly and with their key users in mind, can create a pleasant experience. Put simply, do people have trouble using a certain app? Do they find it easy to use and love going back to it? All of that is built up by the app’s UX.

Here are some major elements that make up an app’s UX:

• Onboarding. This is the process that introduces users to an app and it’s especially important if the app in question is very complex and requires a guide for people to know how to use it. This is where you can include progress bars to show users how long it takes to finish, you can include bits of text to guide them, and clearly state any conditions or restrictions so users don’t make mistakes like typing their email address wrong or writing an invalid address. 
• Feedback. This is a way to make it clear when things are happening within an app, like loading, saving or failure to save. Without this, users won’t be able to figure out what is happening as they complete tasks. Some of an app’s pages might take longer to load, but if you’re not notifying users they might think something is wrong and they’d go back and lose important information.
• Placement. Users will know to expect navigation at the top or left side of a page on desktop and at the bottom on mobile. Playing into what most users are used to is a big part of good UX. In this same direction, ensure that the most important elements are placed first and less important items are stacked but not placed away entirely. Sort options in logical categories, like settings, billing, subscriptions and such under “Your account”, for instance.
• Error prevention. Good UX shouldn’t allow you to make major mistakes. The key here is getting notified when you’re exiting a page without saving, that you’ll be logged out if you change your password, or getting asked if you’re absolutely sure you want to delete something. People make mistakes, but through UX you can anticipate common ones and help users not ruin their own day. 

Thus, UX is the operational part of software, which guides users through an app and helps them figure out what to do and how to use it.

What is the difference between UI and UX?

Yes, UI and UX go together: you need visual support when guiding users through an app. A progress bar shows you a series of steps one after the other and the ones you’ve been through are marked with checks or are filled in - this is a UI element which creates a UX that lets you know you’re going through a process and there are certain steps up ahead. It’s a matter of visuals using psychological cues to guide you through specific user flows.

UI and UX can get mistaken for each other due to the name similarity. After all, they both start with “user”. This is a good way to understand what sets them apart: they both address users but from different perspectives. One from the visual perspective and the other from the psychological.

A good way to understand their differences is looking at how they each get made, so next we’ll be discussing the steps you go through when doing an app’s UI vs its UX.

How an app’s UI gets made

UI often starts with a series of visual branding rules that the business building software already has. This speeds up the process and helps streamline the app’s aesthetic. Given that, of course, the business in question already has a visual branding and that it fits the app’s purpose: keep the branding if the company is a flower shop building an ecommerce app to sell flowers, don’t keep it if the company is a big conglomerate building a tool for just a sector of their key audience.

Commonly, the UI design process starts with setting up base elements such as colors, typography, iconography, overall style (is it modern? Is it minimalistic? Is it fun and funky?) and then more specific items like buttons, sidebar menus, shadows, border styles and so on.

UI will also rely on what the app’s UX will need, such as alert styles and messages, different states of the same elements (such as active buttons, fields with errors below them or empty states before data is filled in), and prototyping tools to simulate the app’s flows once it gets built.

How an app’s UX gets made

UX starts with user research, as you can’t really come up with an app’s user flows without knowing the users. When starting to build an app, the most important thing to do is to sit down with potential users and ask them about the problem you’re trying to solve. This, in turn, will help you figure out solutions, which will be part of the app’s UX. Knowing your audience will also help you figure out what your UI should look like.

This is done through user research, or in the case of apps which will be used by a company internally, you sit down with the app’s stakeholders and/or employees who will be using it. This is a key part of UX and without it you risk releasing an app that won’t be used by anyone.

Once you gather user info, software teams often gather and brainstorm user flows, usually centered around the main goals the app needs to fulfill. Asking questions like “what happens if you [thing]” helps figure out edge cases which are crucial is creating a good user experience.

When UI and UX come together

Once user flows have been figured out, it’s time to put all of it into something visible. This is where the UI part comes into play: based on the target audience and the company’s visual branding, the app’s UI will get built in such a way that it comprises what the decided user flows are supposed to do.

Thus, the role UI has in a software project is to create a visual base for the UX. It’s a bit of a chicken and egg-type situation where it’s not entirely clear which one comes first, as you can do UI without having all the UX and vice versa. But commonly, the UX should come first for maximum efficiency - otherwise you gotta return to the UI and modify it so it adapts to the UX you came up with.

In conclusion, as similar as UI and UX might be, they refer to different things which eventually come together. The UI handles the visuals while the UX handles the logical side of things. Together, they form an ecosystem which allows apps to be easy to use. You need a good UI to have good UX and vice versa.

Need some UI/UX yourself? Contact us and we can build something really cool together. Not sure yet? We also offer a free UI/UX assessment worth $3K.

If you liked this article subscribe and get an email when we publish new, juicy stuff. We hate spammers, so we don’t spam.