First, let’s get the basics out of the way. UX stands for “user experience”, while UI stands for “user interface”.
These two concepts might seem indistinguishable. They also might seem like fancy words that describe not a whole lot. The truth, however, is that they are independent practices serving very different — and important — end user needs.
I like to think of UX as the map of the user’s journey and UI as the actual road the user walks on. Let me explain…
UX is a high-level understanding of who the user is and what they need. We perform exercises such as building user personas to get a clearer understanding of the user’s demographics, goals, physical environment, and pain points. Based on these findings, we construct the overall architecture of the digital solution we’re building. This includes asking questions such as: What is the problem the application is helping to solve? How is the user finding the application? Is the user more prone to a mobile device or a desktop computer? Does the user want to use the application, or do they need to use the application?
Let’s say we establish that the users are employees at a large corporate enterprise being tasked with using our application by their boss. Their interaction with our app is something they have to do (most likely while sitting at their desk in their gray cubicles), or they run the risk of not meeting compliance. This information tells us that the users’ experience needs to be as enjoyable and painless as possible. Some examples of how this can be accomplished:
- The onboarding portion should be welcoming, but not overly cute or saccharine. Language or graphics that are twee wouldn’t be age-appropriate and might be off-putting for someone who isn’t willingly there in the first place
- Highlighting the users’ progress through the application will maintain momentum and give them an on-going sense of “I’m almost done”
- Providing subtle encouragements and directional next steps supports the users through the application, hopefully minimizing frustration with work they’re not choosing to do themselves
Another key concept we all need to remember is that good UX is completely invisible to the end user. If we’ve planned the user experience well, there is no moment of confusion…which leads me to UI.
UI refers to the actual building blocks of the application. Meaning, how does each view of the application look and function? Once we’ve figured out where the user needs to go and how they should get there (the UX “map”), we then need to figure out the rules of the UI road. How big does the road need to be? What colors make sense on the road? How many steps on the road before the user has completed task X? You get the idea.
Going back to our example end users who are being tasked to use the application by their boss, here are some UI elements we can use to help reinforce the overall experience already sketched out for them:
- Personalization: If we implement a user profile, we can leverage first names and avatars throughout the application — allowing for specific messaging and a subtle sense of ownership
- Typography: you’d be surprised the impact the right typeface and font have on the overall application. If your user needs to move through the application quickly, consider using a clean, large font that allows for a easy to see calls-to-action and navigation
- Color: Knowing that the users are not voluntarily using the application, what color scheme makes sense to show failure, success and so on? A bright red signifying a wrong answer is probably too off-putting for the user. A more pastel palette might better serve the user — and the application
- Hierarchy: How you lay the information out on the page should always honor the most important tasks and information for the user. Remember, keeping the user’s experience as frictionless as possible is key to an application’s success
- Simplicity: Don’t make the user struggle to figure out where things live or what’s next. Obvious touches like clearly labeled elements or universal icons may seem like boring design decisions, but it’s wise to err on the side of “understandable” — as opposed to the “cool”.
When we are in the process of sketching or designing out an application — essentially planning out the UI of the application — it’s always best to go back to the UX you’ve established. Considering what the user will appreciate when determining the placement or title of a button may seem silly to some, but it’s these subtle touches that can help your application rise above the competition.
There is so much more to both of these concepts, but I hope I’ve at least helped you understand the basic differences between UX and UI.