Getting Back to Basics: What’s the Difference Between UX and UI?

April 18, 2017

If you’re new to the mobile app industry, chances are you’re hearing the terms “UX” and “UI” flung around at an incontestable rate. While these phrases are deeply ingrained in the tech pockets of the world, newbies may struggle with deciphering this seemingly foreign language.

Don’t stress: you needn’t dance around these terms any longer. I’m unpicking the concepts of UI and UX design to thereby equip you with the necessary tools to walk into your next meeting with your developer coolly clued up on all the mobile app lingo.

First things first: what do these acronyms mean?

Simply put, UX refers to ‘user experience’ while UI is ‘user interface’. Both elements form the foundational pillars for any tech product. While they indeed work closely together, even overlapping in some instances, it’s important to remember that they exist as two separate pillars.

Sound confusing? Let’s take a step away from the tech industry for a moment. As an avid baker, I like to paint a bit of an analogy to depict the distinct nuances differentiating UX design from UI design. If you consider the process of making a cake, there are two major factors: the preparation process (i.e. measuring the ingredients, mixing them together, popping them all in a pan and into the oven) and the decoration process. Sure, you can bake a delicious cake, but it will struggle to appeal to hungry diners if it’s lopsided or falling apart. Similarly, you can create the most aesthetically-pleasing cake in the world, but it won’t win any hearts if it’s hard, dry or burnt.

Mobile apps function in much the same way. Herein, UX design is the idea of making the actual cake, while UI design is the concept of creating a polished finished product. Both are essential towards achieving a positive response from your audience.

How are the two similar?

As previously mentioned, UX and UI design do harbour some similarities. Perhaps most prominently, both elements focus on creating interactions with a user. Yet just because they share the same goal doesn’t mean they function in the same way.

So, what kinds of characteristics define each of these concepts?

To fully gauge UX design and UI design, let’s start off by unpacking the two concepts and considering the theory and processes of each.

UX encompasses:

  • Strategy and content
  • Wireframing and prototyping
  • Execution and analysis

Meanwhile, UI is made up of:

  • Look and feel
  • Responsiveness and interactivity

While these elements may serve as the basic building blocks, I’m going to take things one step further by drawing four distinct lines that separate user experience from user interface.

1. UX focuses on usability; UI focuses on aesthetic appeal.

I’ve already largely touched on this differentiation with my cake-making analogy, but it’s important to understand what is considered ‘usability’ versus ‘aesthetic appeal’ when it comes to mobile applications. UX designers look at user work flows – the different steps an individual takes to navigate an app and effectively engage with it. A UI designer, on the other hand, will refine and encourage that user interaction by adding colour, emphasis and physical attraction to the original design.

2. UX is generally completed first; UI is done second.

Following on from the previous point, you can see that it’s important to work out the UX design before jumping into the UI side of things. UX designers will architect the layout, then UI designers will take that layout and effectively bring it to life. For instance, the placement of a button within your app is determined by UX, while the colour it changes to indicate to the user that he/she has clicked on it is determined by UI.

3. UX designs macro-interactions; UI designs micro-interactions.

UX design is a bit more comprehensive than UI. In this regard, UI only pertains to interfaces, while UX covers all products, interfaces and services. Yes, both elements design interactions, but UI designers focus on the details while UX designers essentially orchestrate the inner workings, thereby creating the nuts-and-bolts user experience (as indicated by the name).

4. UX helps users reach goals; UI draws emotional connections.

Driving effective usability in your UX design ensures users can achieve their goals when they interact with your app. You are fulfilling a need of theirs, satisfying a want or providing value to enrich their lives. As such, UX leans a bit more towards the pragmatic side of things. However, a well-functioning app that delivers on its promises is only half the work; you need to inject some personality if you want to really encourage users to stick around. This is where UI design comes in – it’s about crafting a personal connection with your users and channelling their emotions to build a sense of loyalty.

So, in summary…

Yes, UX and UI design are inextricably linked, but they ultimately cover different bases of the overall design of your app to elicit user interaction. UX design is about enabling the user to accomplish tasks while UI design focuses on crafting visually-friendly interfaces that connect with humans. At the crux of the matter is the fact the two must co-exist harmoniously in order to create a truly successful mobile app.