How are UX and UI design related and yet very different?

Tim

Tim
Written on 20th February 2020

It’s likely you’ve heard the terms UX (User eXperience) design and UI (User Interface) design, but what exactly do these terms mean?

What is a User Interface (UI)?

The best way to define a user interface is as the way a human interacts with a computer. So a user interface design is simply the visual appearance of the journey through a computer based task.

 

What is a User Experience (UX)?

The user experience on the other hand is less about how the journey looks, but more about the journey itself and emotions felt along way.

 

The UI

Command Line

In the 70s, the early days of the computer era this interaction was restricted to a computer operator inputting instructions via commands line interface.

Command line

GUI (Graphical User Interface)

In the 80s, the Graphical User Interface (GUI) appeared. Initially developed by Xerox but taken to the next level when Apple released the Macintosh in 1984. This milestone brought us the ideal of the ‘home computer’ as the user could interact with the computer without the need to input code.

 

Old Apple Mac Computer

Voice Based – the next generation

Whether you’ve thought of it as such the current trend for voice activated interaction is the next level of User Interface. If it’s Alexa, Siri, Cortana, “OK Google” or whoever by way of spoken instructions you are interacting with a computer.

 

A Steep Learning Curve

A user needs to learn how to interact with a computer, so in our command line example the computer operator had to learn what commands were needed to trigger certain tasks.

With a GUI the user needs to learn what icon does what and where to click.

And although you might not realise, but even when asking Alexa for tomorrows weather forecast you are still being a computer operator inputting an instruction. It’s just the instruction comes more naturally to a human so is easier for more people to comprehend – the learning curve isn’t so steep - but you still need to learn the correct phrase, there’s no point shouting “Hey Siri” at your Amazon Echo.

Voice control smart speaker

 

The UX

In the same way Apple can take credit for pushing forward the concept of a visual, user friendly interface we can also attribute the term “User Experience” to Apple. Don Norman, who worked for Apple in the 90s was documented as saying ‘‘User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.” From this point forward the concept of a User Experience was born and has very much been the focus of Apple ever since.

In terms of an ecommerce website for example the User Experience can be seen as more than just the process of buying something online. The complete journey can also encompass pre-sales; the marketing and advertising that drew the user to the website. The emotions felt whilst selecting the products and during the checkout experience. Right through to the aftersales communications, the order confirmation emails and delivery information, the delivery itself (often way outside of the ‘brands’ control, yet still an important factor) and if needed customer support and returns process.

Bad courier service

Hopefully now you can see how both UI and UX go hand in hand, yet they are quite different disciplines.

 

The UX design process

To design a user experience, it helps to first be a user! However, have you ever watched over someone’s shoulder as they browse a website? If they didn’t click where you would have done, I bet you just wanted to grab the mouse and take over.

A UX designer needs to not just be a user but be sympathetic to all users and understand how different people might interact. To be objective and take time to understand the audience. What is the ‘profile’ of the user and what are their needs?

As well as understanding the user the UX designer needs to understand the product inside and out and predict how users will interact with the product.

Following the journey from start to finish and mapping the steps will help identify any potential flaws. Wireframes and prototypes will give a tangible ‘product’ that can be reviewed and tested.

  • Understand the users
  • Develop a strategy
  • Map a journey
  • Create prototypes
  • Study the interactions of users through the journey  …

Learning from the above points and if necessary, repeating until perfected.

 

The UI design stage

So the UX is spot on; the journey mapped and the prototype approved.

Now comes the user interface design stage. This is a graphic design process to create a visually engaging design that will confirm the brand of the product and aid the user seamlessly along their path.

Good design is often the design you don’t notice, if the UI is right and enhances the UX the user will flow through their entire journey without even considering the effort that has gone in behind the scenes. 

But the most perfect UI will be let down by a poorly executed UX, and a badly designed UI will hinder a perfect UX.

 

If you think your application, website or ‘product’ could benefit from a User Experience review and / or a fresh User Interface design then please...

Get in touch

Join the conversation

 
  
 

Find out more about how your personal data is used in our privacy policy.


Let's contribute!

How about you help us a little and share this page with your friends? It’s just a click, we promise!

Want to get in touch?

Then why don't you? Just click the button below and secure your place in our office chair (before you ask... yes, spinning is allowed)!

Get in touch
Get in touch