• #UsabilityTesting
  • #UserExperience

UX, UI, and Usability - What They Are & How They Differ

Difference between UI, UX, & Usability

If you’re familiar with Maslow’s hierarchy of needs, you know that ascension can come in stages or layers. Maslow’s psychological theory posits certain needs must be met, in a certain order, before humans can reach their full potential. Similarly, for any digital experience to achieve the highest “delightful” descriptor, it must be built upon different fundamentals.

First and foremost, a website or app has to be useful and meet the needs of users. Most businesses offer a way to learn more about or order products and services. Great start! But to truly excel as a digital all-star, a business must also excel in usability, user interface (UI), and user experience (UX).

Often these terms are used interchangeably, but they are managed and measured differently. Once you master these three areas, you can take your website or app from functional to aspirational.

Let’s Start Defining

A quick overview of the three fundamentals:

  1. Usability: Making a website or app easy to use. 
  2. UI: Making a website or app attractive and effective according to users’ preferences.
  3. UX: Making users feel positive about a website or app.

Usability is a core part of user experience, but user experience is significantly broader in scope. A developer must consider both of these things when fine-tuning and optimizing their product.

So, a website or software maybe super easy and functional, but doesn’t leave an emotional effect on the user. This would be an experience that has been optimized for usability, but not the user experience. In the image shared for this article, the boy is experiencing benefits of both usability and user experience.

What is Usability?

Usability is the ability for users to complete their tasks within a website or app.

As a task-based assessment, improving upon usability generally relates to simplifying and streamlining the website or app, while making it more obvious to the user which interactions they need to complete.

Examples of Good Usability:
Why? How Many People Would Leave a Website if Content: 
Fast loading times
Took too long to load - 51%
Well-written, succinct content
Is too long - 51%
Product is designed for different devices, like mobile
Is not displaying well on current device - 45%

1. Measuring Usability

In general, usability is empirically easy to test and report. Usability.gov offers a number of report templates and tips.

When developing an app, the number of clicks a user has to perform in order to complete a task might be counted. High usability would only require a few clicks to complete any task. Low usability could lead to the user having to go through dozens of clicks or lead to the user not finding the options they needed at all.

If users report that a website or app is confusing or difficult to use, the usability needs to be improved. When it’s too complicated, users will find other ways to meet their needs, as our client the University of Chicago Booth School of Business discovered.

Best Example

2: Best Example: Airbnb

Airbnb is, first and foremost, a place to book travel lodging. It’s landing page is designed around the primary call to action — search for a place to stay.

Their other products and services, like discovering experiences at your travel destination, are easily accessible features that do not take away from the site’s primary function.

The search tool itself draws on established standards, like a magnifying glass for searches, date picker calendars, and filters. First-time users could easily figure out what to do.

The text is short and the font color has a high contrast on the image, making it quick to scan and easy to read. Their website is responsive and anything you can do on the website, you can also do in their app. This makes it accessible across a number of devices, so users aren’t limited by them.

What makes Airbnb a true master of UX is how they make their users feel. In this screenshot example, the call to action is alluding to travel restrictions during the coronavirus pandemic. In less than 25 characters, Airbnb is allaying fears around safety and the appropriateness of travel.

In other screens, they’ve established protocols to help build trust among community members, like photos, testimonies, ratings, maps, confirmations of listed amenities, and more.

What is a User Interface?

The UI is the collection of icons, buttons, pages, and all the visual elements that allow a user to interact with your website or app. It’s everything that a user sees and signals to them what to do and where to go; its importance can’t be overstated!

A great UI is like a smart layout. It draws the user in, encourages them to stay, and makes it easy to find everything they’re looking for and more. UI is how you direct users to make choices that match their needs as well as business goals.

Examples of Good UI:
Why? Eye-opening Website Statistics:
A visual hierarchy free of unnecessary distractions, like secondary links or buttons
It takes just 2.6 seconds for users to form an impression of your website.
A minimalistic, clean design that complements content
2/3 of people prefer to read something beautifully designed than something plain
Consistent application of fonts, colors, icons, layouts, etc
46% of people assess a company’s credibility based on a website’s visual appeal
Source: SWEOR

1: Measuring UI 

For UI design to have a positive impact, it constantly needs to be reevaluated. Site analytics are an easy, passive way to monitor user behavior. Check for conversion rates, latency and task completion times, bounce rates, and errors.

To understand user attitudes and how they feel about using your website or app, it’s best to ask them! You can measure Net Promoter Score, System Usability Scale, or do a short survey.

2: Best Example: Code Academy

The UI for Code Academy, the online education company that trains people how to code, has a strong visual hierarchy and contemporary aesthetic.

Immediately, visitors know what Code Academy is, the cost, and how to get started. Using principles like social proof, the site establishes credibility by citing millions of other users.

Offering a quiz draws users in and helps reduce decision fatigue. By outlining the Code Academy process, from what to learn to landing a “dream job,” the page shows visitors what they can expect (feedforward) and plays on the fresh start effect, in which users are persuaded by the prospect of a new beginning.

Overall, the modern look and feel of the branding, value statements around usefulness, and guidance on how to be successful make the UI something to model after.

What is User Experience?

UX is the sum total of the experience that users have. It’s the emotional result after having used your website or app.

UX is focused primarily on digital interactions, but it must have a consistent branding and feeling as all other touchpoints, like letters, calls with customer service, product delivery, and so forth.

Digital products and services are often impacted by invisible-to-the-user business rules or processes. UX practitioners have a responsibility to customers to challenge any that negatively impact their experience. UX design is customer advocacy that originates from attempts to solve digital problems.

The essential user research that goes into designing a delightful user experience then has the unique possibility to influence other areas of business. Which could, in a way, turn you into an all-star employee!

Good user experience includes:
Why? Key topics from UX Trend Report 2020:
Consideration of human feelings, like trust, joy, or frustration
Human desire for emotional connection will always be there
Research to understand and iterate toward the best possible design
UX done properly is the most scientific approach to product development 
Seamless integration of business requirements, technology, and user needs
Invisible UX for seamless experiences

Measuring User Experience

Compared to usability and UI, UX can be more difficult to quantify because it’s driven by emotions. UX outlines how the user feels when completing that task. Are they annoyed? Do they feel confused and adrift?

Understandably, this means that UX is far more difficult to analyze and optimize. You need to be able to connect with your customers on a deep level and build relationships with customers to improve the overall user experience.

And a bad experience can be costly. It's estimated that 88% of users never return to a website if they have a bad experience. 

2: Best Example: Google Search

Google, in all its simplicity and minimalism, is a UX gold standard. People trust Google’s products. More than 90% of all worldwide searches are made with Google — with the search engine receiving more than 63,000 search requests per second.

Why? Accuracy. Quality. Ease of use. Anticipates users’ needs. Knows the user.

Like Airbnb (but really, preceding Airbnb), Google knows its primary feature is its search capabilities. The landing page has never wavered — search has always been front and center.

Its discoverability, or how easy it is to use without guidance, remains high. And behind the scenes, Google is constantly programming to better learn and provide for their users. In 2004, Google launched the first iteration of predictive search, and has since expanded this to other features, like predictive text in emails. In 2017, Google got rid of its advanced search feature because no one needed it. The search tool was smart enough to understand if your “cats near me” search meant adoption shelters, or Broadway’s Andrew Lloyd Weber.

Google shows us that delightful user experience is not just what the user sees. It’s what they get: value, personalization, and needs met. And a lot of that work takes place beyond usability and behind the UI.

As to Objective

So if we were to distill the purpose of these three fundamentals into three words: ease, functionality, and delight. 

UI Aims for Functionality

  • User interface aims to provide user-friendliness design in how a product (website or app) functions or how its elements all come together in aiding the user’s journey or make it easy to use
  • Its focus is on the interaction points between the user and the product

The goal of UI design is to move the user from point A to point B with ease and confidence. It’s the UI’s job to help users achieve their goals, while also meeting business goals.

Through immediate feedback and interactive elements, clear labeling and calls to action, UI is meant to signal next steps, confirmations, and successes. Ultimately, it’s meant to encourage visitors to engage and eventually become customers.

Usability Aims for Ease of Use

  • Pertains to the ease with which how efficiently, effectively, and satisfactorily a particular goal can be achieved within a product’s (app or website) particular environment, therefore it’s a narrower concept than UX
  • Goal is to minimize road blocks

The goal of usability is to make sure a website or app is useful and usable. Useful according to the goals of your customers — can they complete the tasks they want to complete? Usable in terms of operational — does everything work, and does it fit your users’ way of working?

Whitney Quesenbery, now Director of the Center for Civic Design, expanded the ISO 9241 standard definition beyond ease of use to the 5 E's of usability: effective, efficient, engaging, error tolerant, and easy to learn.

An ideal website or app makes it possible for a user to look at it and immediately know how to complete the tasks that they’re interested in completing. After all, users only read about 20% of text on a page. The less a user has to think about it, the better.

UX Aims to Delight

  • User experience focuses on creating a design that visitors perceive their interaction as, overall, a delightful experience before, during, and after using a product (app or website)
  • Goal is to make an emotional connection

The goal of user experience is to build trust with your customer. You want to show them you’re an expert who cares for their needs — and actually make them feel that way.

The holy grail of user experience is to be “delightful.” Not just easy or effortless — but pleasurable. It sounds daunting, especially if you’re a utility company collecting monthly payments or a health insurance company showing denied claims. But it’s not impossible!

Showing you’re considerate of your users’ situations (late on payment, for example) and creating new processes to help them get on track are user experience strategies to delight users in even difficult circumstances. If you do it kindly, in a way that your customers easily understand, you’ll begin building trust and a long relationship.

 Using Metaphors 

Imagine for a moment that we are users on a road trip through a website. Let’s call the website “Utah.” Here’s how these three fundamentals would factor:

UI: The Freeway’s Signages and Lights

  • UI comprises the tools which allow functionality to the road

Utah covers a lot of ground, with gas stations scarily far apart for people used to more densely populated areas. We’re confident though, thanks to progress indicators like highway signs that let us know the next fuel stop is only 57 miles away.

We cruise through, looking for our turn off. Our eyes are tracking for information scent, like clear menus and instructions to cue us on how to navigate. Clear calls to action make sure we go exactly where we need to.

Just like on a freeway, a website’s interface should provide stress-free assistance with quick-to-recognize markings and language so we can easily get to our destination or navigate unfamiliar terrain.

Usability is the Ability To Commute With Ease

Usability pertains to how well the road fixtures work to provide information and convenience to the commuter.

Utah’s roadways have high usability thanks to open roads, little traffic, and fast speed limits. Zoom zoom.

As users, we can’t easily get from point A to point B if fixtures aren’t working or are difficult to use. Potholes or detours created by broken links, slow loading times, and confusing labels are likely to create traffic jams or add unnecessary miles when every second and mile counts.

Usability that forces us to take the long way to our destination can be a good way to get us to stay home or go somewhere else, like Wyoming.

User Experience is the Entire Journey

User experience encompasses the entire journey, a combination of well-integrated and functioning design to create a delightful (meaningful and valuable) experience.

Once we’ve finished our trip through Utah, we can reflect on our time spent there. It wasn’t perfect. We spent $4.79 a gallon at Papa Joe’s Stop & Go. A couple times we drove so long it felt like we might have scrolled, er rolled, past our exit.

But, it was a memorably scenic drive, with views (compelling images and useful content), that we couldn’t get anywhere else. It was low-pressure with lots of space to explore without being pushed into a decision. It made us feel connected to ideals like freedom and adventure.

User experience, then, is how the user feels after the trip has ended. Was it worth it? Did we enjoy it? Would we recommend it?

If the experience is meaningful and valuable, then the answers are likely to be “yes, it was delightful.”

Importance of Working Together

So, we’ve talked about the fundamentals as separate areas of focus. For designing the most delightful, kind experiences, we should consider them interdependent.

After all, you can deliver a lot of value that considers your users’ needs. But if the website or app doesn’t work or is calculating things wrong on the back end, it’s useless. Or you can create a beautiful user interface that garners oooos and ahhhhs. But, if the navigation is too basic with little options for users to have control, it may not support business goals like sales.

This is why when you’re building a new website or app, you should include diverse perspectives. Developers who can deliver beautifully complicated and elegant code and maximum usability; customer advocates (in all forms — researchers, account reps, etc.) who can guide early prototypes and the design; users who can validate or reject hypotheses; stakeholders who can influence business process for the betterment of customers, and more. It takes all three fundamentals, and a truly cross-disciplinary team, to deliver delightful user experiences.

Should They Be Compared?

To answer this question, imagine your favorite restaurant. What are some of the reasons that it’s your favorite? Close to home? Friendly staff? Quality of the food?

Comparing usability to UI to UX is like comparing “walking distance” (usability feature) to “authentic Brazilian cuisine” (user interface feature) to “favorite” (user experience result).

Usability and UI are very different features that contribute to an experience. They are all intrinsically linked and influential to one another, but using them interchangeably makes as much sense as replacing a dirty spoon with fresh basil. Not useful at all!

5 Ways UX Affects AR, VR & Profitability whitepaper banner
Get Latest Whitepaper

Get The Latest UI/UX Trends and Best Practices

GET WHITEPAPER
Abdul SuleimanAbdul SuleimanChief Experience Officer

As founder and CEO, Abdul has helped over 40 Fortune 500 companies make informed user-centered design decisions through evidence-based user research and UX best practices. As an Adjunct Professor, Abdul has taught in DePaul University’s graduate UX programs and for nine other universities.

smiley-good
Let's Chat

Ready to learn more about how our award-winning UX agency can help you?

GET IN TOUCH