What is the difference User Experience (UX) and User Interface (UI)?

Author
Beth French

What is User Experience?

It is important that I start by telling you that there is not just one common definition of user experience! The buzzword has many dimensions, and includes a bunch of disciplines, such as interface design, usability research, and information architecture. The water is a little cloudy as to what user experience is, so right now, all I can do is give you my definition, alongside industry leading experts for you to make your own judgement.

So let’s kick off with what I think; user experience is the thinking behind getting the user to their end goal, identifying users feeling & pain points before entering the design phase.

This leads me nicely onto a picture that seems to be circulating the world of UX. Now, we all know how lazy users are becoming. What do you expect? We want parcels delivered to our chosen place within 24 hours, and we don’t even type in our pins now that our cards are contactless? As a nation we are always hunting for shortcuts to take that are the most logical and easy to take! So unless we are taking our users into consideration when designing, we need to ask ourselves who are we actually designing for?

 

Ux vs Design

 

Here are a few views from industry leading experts within the field.

“Something that looks great but is difficult to use is exemplary of great UI and poor UX. While Something very usable that looks terrible is exemplary of great UX and poor UI.”

Helga Moreno

“UX is focused on the user’s journey to solve a problem, UI is focused on how a product’s surfaces look and function.”

Ken Norton Partner at Google Ventures, Ex-Product Manager at Google

“UX is the overall experience a user has with the product, and UI is the things the user will actually interact with and see.”
Clayton Yan – User Experience Designer at UserTesting

“It’s important to distinguish the total user experience from the user interface (UI), even though the UI is obviously an extremely important part of the design.

As an example, consider a website with movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for a user who wants information about a small independent release if the underlying database only contains movies from the major studios.”

Don Norman and Jakob Nielsen

What is User Interface?

User interface is essentially the design and structure (wireframe and positioning) of the website. How pages are created to aid the user to achieve their goal, and leaving their journey satisfied. You may think that asthetics are not a key part, and that no matter what it looks like users will convert, however, according to adobe “Given 15 minutes to consume content, two-thirds of people would rather read something beautifully designed than something plain” and that “38% of people will stop engaging with a website if the content/layout is unattractive.” So ensure your content looks the part, and portrays your brand in the best way possible.

 

Good UX and UI

Google is a great example of the simplicity that can be found on the web. With barely anything to the UI, a few buttons and a logo, but perfectly fitting the needs of users who are aiming to search the web for what they need. Once the user starts typing, they have opened themselves up to a variety of results to choose from in less than one second.

Another great example would be the new feature that has been added to the asos app recently. So you’re browsing the web, and want to take a picture of an item you love, to share and compare with your friends? This could not get any easier with the recent functionality changes which allows you to share easily without visiting your camera roll & manually sending the file. By clicking send screenshot, the image will be delivered to your buddy with a link to visit the product.

 

Good usability example

How they work together

Both user experience and user interface are crucial to any product. Although these two dimensions fit hand in hand, they are completely different, and refer to two very different parts of any UX project. Essentially UX is the foundation of any user interface design, combining both of these and usability will allow us to create a strong product for the user as demonstrated in the pyramid below.

 

UX Pyramid
“If we’re talking about delicious cake (and why wouldn’t we be?), UI is the icing, the plates, the flavour, the utensils, and the presentation. UX is the reason we’re serving cake in the first place, and why people would rather eat it than hamburgers.”

Craig Morrison – Head of Product at RecordSetter, Founder of Usability Hour

 

“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.”

As  Rahul Varshney, Co-creator of Foster.fm

UX vs Ui

In Summary, user experience and user interface have two completely different roles within a project and they are both crucial parts to ensure a user is engaging with your product correctly, allowing them to reach their end goal.

 

About Beth French

Good things come in small packages. Well meet Beth (B1) the youngest & shortest member of the team. Don’t let that deceive you though, this Yorkshire lass has a giant heart and dares to dream big.