UX and UI are two pretty cool terms you hear people throw around in all sorts of conversations. “Oh the UX of that ice-cream scoop is awful!” “Did you see the UI design in that new games admin area? Wow!”

What?…….

UX and UI are both concepts that have been around for hundreds of years, we just haven’t had the words to put to them. They have shaped how humans experience and interact with the world around them.

In this article, we will reference UX and UI in relation to digital experiences – with web and the internet being the predominant focus.

So what is UX?

UX is an acronym for User Experience. User Experience, in this context, refers to the hows, whys and processes we experience when interacting with an app, website or piece of software. It is the journey we take and the emotional experience we have throughout an interaction.

“User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”
— Don Norman and Jakob Nielsen

As an example, have you ever been to a new website or app and instantly known how to use it? Or perhaps it has seamlessly guided you through an operation or set of processes that ended with a positive affirmative? Thus you “feel” like you have experienced a positive interaction and that you have understood every step in the process. This would be considered a well thought out and positive User Experience.

Conversely, you may have experienced confusion, frustration or even anger when faced with a website or app that is hard to navigate, difficult to find what you are looking for or reacts in disjointed or unexpected ways. Thus making you feel uncomfortable, confused or mistrustful. This would be considered a bad User Experience.

User Experience takes into account the order of how a user interacts with your product, service, content and processes. UX also deals with all the possible combinations of interactions and the types of personalities and personas using a website or app and how they may interact with it. Think of it as a methodology that guides all your users along multilane highways to all possible safe destinations. If they experience good UX on the way they will arrive relaxed, refreshed and positive about their journey. On the other hand, if they experience bad UX they will arrive tense, frustrated and probably exhausted.

UX incorporates some of the following key elements relating to web, app and digital products and services,

  • Structure – including sitemaps, logical sections, pages, app steps
  • Content priority – A logical order within content to guide, inform and encourage action
  • Clarity – Clear paths of engagement and logical processes/steps
  • Exploration – Non-linear journeys, multiple pathways for multiple personas and knowledge enrichment
  • Calls to action – Clear, positive actions that instil positivity and wellbeing in a user’s actions

So what about UI?

UI is an acronym for User Interface and within this context, we will add design to the terminology. User Interface Design is the element that the user interacts with, feels, touches and sees. We often refer to UI design as the lipstick layer to UX design.

“User interfaces are the access points where users interact with designs. Graphical user interfaces (GUIs) are the control panel and faces of a design; voice-controlled interfaces involve oral-auditory interaction, while gesture-based interfaces witness users engaging with 3D design spaces via bodily motions.”
— Interaction Design Foundation

UI is the sensory element that users directly interact with to move through the crafted UX design we discussed above. UI is directly guided by UX. UI accounts for the look and feel of a website, app or digital product in this context that not only aligns with a companies brand aesthetic but also what is being achieved within the UX design.

A musician knows how to play music but requires the instrument to produce the crafted sound. So is UI design to UX design. They work together to produce finely crafted, positive experiences for users of products and services. UI design heavily influences the emotional experience users have with websites, apps, and digital products and services they come into contact with. The aesthetic feel and appropriateness for a given design situation will have a huge bearing on the user’s overall experience.

This includes some of the following elements:

  • Colour choice – aligns with the brand, encourages interaction, provides focus
  • Shapes – creates interest, defines soft to sharp elements, creates positive and negative space
  • Alignment of elements – creates signposts through the element journey
  • Imagery – reflects brand, aspirational for audience, harmonises content
  • Font styles – aligns to brand and audience, defines tone
  • Writing tone – reflects the brand, aligns to your audience

We hope this article has helped you gain a clearer understanding of UX and UI design. When executed well together they can produce a rich experience for your audience, ultimately lifting your digital products and services.

If you need help with a UX or UI project please don’t hesitate to reach out. We’d love to help!