Chapter 25: User Experience / User Interface

Explore the difference between User Interface, User Experience, and the characteristics of each.

What you will learn

  • The difference between User Experience (UX) and User Interface (UI)
  • The role and use of UX/UI in your application.

What exactly is UX / UI?

Before we begin, we'll need to have a clear understanding of UX / UI, and the differences between each.

UX - User Experience

User experience, put frankly, is the personality of your application. Think about your best friend for a moment. What characteristics make them your best friend? Are they loyal? Easy to talk to? Fun? Inspiring? These types of adjectives are generally used to describe the user experience of an application.

Consider the following example (Figure 4.1.1):

Figure 4.1.1

4.1.1 - Annoying_Friend.png

These interactions are pretty standard for most applications, however they are poorly presented. Try to imagine every interaction in your application as a conversation. Imagine if this application was a person, and before you even knew anything about them, they were asking for your email and wanted to know where you are at all times. I'd bet they wouldn't make it to your top 10 friends on speed dial.

Now consider this interaction (Figure 4.1.2):

Figure 4.1.2

4.1.2 - Best_Friend.png

We can ask for user location and to enable push notifications later in the application. For now, your best friend is just really happy you stopped by in their world. This communication is something you might experience when talking to a real person. It's warm, inviting, and re-assuring your data won't be compromised.

UI - User Interface

So if User Experience is your personality, what is the User Interface? User Interface is the way your application looks. This should always match your application personality.
For example - If you were building a professional business application, it might have more muted colors, and less whimsical fonts to portray a sense of authority.
Let's think about your best friend again. The way they dress & present themselves is most likely a reflection of their personality. The combination of the two (UI: how they look & UX: their personality) is what makes them unique.

Consider this application to help you locate the best coffee shops around you (Figure 4.1.3):

Figure 4.1.3

4.1.3 - Boring_Coffee.png

Although the functionality is there, it doesn't speak much for the applications personality. Let's say our application has a light, friendly, modern personality. Here's how we might spice up our UI to really let the User Experience shine through (Figure 4.1.4):

Figure 4.1.4

4.1.4 - Exciting_Coffee.png

So is User Interface or User Experience more important?

User Experience. Why?

A great experience & functionality will always surpass the looks of an application. Remember, your applications personality will always express itself through design, but never in reverse. Check out for a moment. I bet there wasn't more than 5 minutes of thought put into the design, but it executes flawlessly, and is easy to use.

Key Takeaways:

  • User Experience is your applications personality
  • User Interface is the way your application looks
  • Let your designs reflect your applications personality
  • Interactions should mimic an actual human conversation