User Experience (UX) and User Interface (UI) are two terms commonly used interchangeably, yet they mean two very different things. What exactly is the difference? Read more to find out!
People who are new to the world of design often struggle to understand the difference between UX and UI. They use the terms to refer to the same thing. In reality, UX and UI designers have different jobs and are responsible for different tasks. For instance, UX designers map the entire user journey to ensure the digital experience of a user is as smooth, simple and enjoyable as possible. Whereas, UI designers work specifically on the interaction between the user and the design elements of an app or a website. It should be noted that these are simplistic definitions which will now be expanded upon. User Experience (UX) Design - a deep dive:
Don Norman - a cognitive scientist - is credited with coining the term user experience back in the early 1990's and defined it as the following:
‘User experience’ encompasses all aspects of the end-user’s interaction with the company, its services, and its products.
This is a very broad definition and highlights how UX refers to the overall experience of both digital and non-digital products.
Good UX and bad UX are not tangible 'things', instead they are the result of an overall product or service being clear and easy to use vs. confusing, frustrating and clunky.
To understand what makes an experience with a product good, Peter Moreville created the UX honeycomb that highlights the various facets of UX design:
Credit: Ellen Macpherson
The definitions of each facet are as follows:
Useful = For a product to be viable it needs to fill a need. As such its usefulness needs to be evaluated. Sometimes, consumers are not explicitly aware of needs that have been identified during user research. Therefore, designers should make sure they provide plenty of relevant information to customers to enable them to see the true value in digital or physical products.
Findable = The features of any product should be easily found by consumers. There is nothing more frustrating than using an app or a website that has a poor and unclear layout. As such, navigation is key whereby dropdown menus are easily found and key menu items are bold and easily seen.
Credible = If customers do not trust the source of a website, app or product then they are unlikely to interact with it. Incorporating trust and consistency into a UX strategy will increase user engagement.
Valuable = It needs to be made clear to consumers why the product they are considering using is valuable. If this is not made explicitly clear, then the consumer is unlikely to engage. For instance, companies often clearly state on their website homepage what it is they do, enabling consumers to quickly know whether that company/product is worth their time.
Usable = This may seem obvious, but your product needs to be easy to use. As such the UX design needs to be simple and easily navigated. One company that does this particularly well is Duolingo, who have an app onboarding process that easily enables users to pick a language to learn.
Desirable = For a product to be successful it needs to stand out from fellow competitors, it needs to offer more or something different. If this is achieved then the product will likely be deemed desirable by consumers.
Accessible = When designing any product, inclusivity is key. Ensuring the product fulfils the need of a plethora of users will result in a greater variety of potential features. Every effort should be made to incorporate accessibility and simplicity into every UX design such as providing different input options for computer games.
What are good and bad examples of UX?
Good UX - Duolingo
Credit: Frederic Lardinois
As I am sure many of my readers are aware, Duolingo is a digital app that offers a fun language learning experience. Through the combination of advanced educational psychology and daily goal setting, the burden of language learning is eased and intended goals can be reached in a matter of months. Other language learning apps offer similar capabilities, but Duolingo is unique in its extremely effective approach to utilising gamification.
From the app store logo to the actual course screens, the app is filled with fun and playful design. This combined with daily tasks, points and trophies makes the user's more willing to participate which results in faster learning. As such, the user's return to the app regularly due to constant positive reinforcement and visual progress.
In relation to Peter Moreville's UX honeycomb, we can see that Duolingo addresses all of its facets. For instance, the app is extremely valuable as it consistently improves user's language learning capabilities.
Bad UX - Ryanair's Booking Platform
For those of you who have flown with Ryanair before, I am sure you have found yourself tearing your hair out at how frustrating the process can be. The website is often counter-intuitive with certain features being hard to locate. For instance, when selecting a country to fly to it can be tedious and laborsome when picking the correct one.
Evidently, Ryanair is an example of bad UX. Additionally, the website used to also utilise dark UX. This is the term used to describe sneaky UX design tactics that make the user experience complicated and confusing enough to trick users into spending more money than is necessary. In Ryanair's case, they used to have hidden add-ons within their booking process.
Credit: Simone Gobbo
As seen above, to not pay for insurance user's used to have to scroll through a list of countries to opt out. By incorporating this within a list of countries, the user would have been likely to miss this and would have likely chosen their country of residence instead. As such, the user unwittingly signs up for travel insurance, thus bumping up the price of their ticket. Thankfully, Ryanair have now changed this but it shows that even the bigger companies are capable of both bad UX and dark UX.
So, if UX design encapsulates the entire experience of the user - what is user interface design?
User Interface (UI) Design - a deep dive:
UI design compliments UX design by improving the look, feel, presentation and interactivity of the product. UI is focused on the product's look and function. Using a restaurant analogy, UI is the table, chair, plate, and utensils, whereas UX is everything from the food, to the service, parking, lighting and music. UI and the digital world:
Unlike UX, UI is a strictly digital term. Namely, UIs refer to the point of interaction between the user and digital product such as the touchscreen on your tablet or the touchpad you use to select your favourite candy from a vending machine.
In relation to websites and apps, UI design seeks to make the user interface of a product as intuitive as possible which means considering every visual, interactive element the user may come across.
Creating and Maintaining Brand Style
Credit: everviz
For modern businesses to thrive in such a competitive marketplace, they need to establish a defined visual brand style. As such, UI designers are routinely tasked with creating digital products that are consistent with an overarching brand.
The tasks involved with maintaining a brands style are as follows:
Ensuring the brand's style is consistent across digital products such as a companies website and its corresponding mobile app
Creating brand style guides so other UI designers can easily implement the brand's style
Designing for accessibility to ensure the branding is inclusive for as many potential users as possible
Visual Design:
As previously stated, UI designers build and optimise the individual elements of a digital entity, but what are these actual elements?
Designing buttons and other clickable elements
Colouring sections and elements of a website or service
Choosing appropriate fonts and sizing
Interactive Design:
Some UI designers are also responsible for developing and implementing interactive elements found across different websites and applications. These include:
The way content flows during the onboarding phase of mobile application
Producing interactive elements such as clickable photos and videos
Turning elements on a website into an animation
Responsive Design:
UI designers have to optimise digital products that work across different devices and products such as laptops, desktops, tablets and smartphones. Responsive design is a web development approach that creates dynamic changes to the appearance of a website, depending on the orientation and size of the devices that are being used to view it. Examples of responsive design tasks include:
Ensuring the mobile view of a website corresponds with the desktop view
Making vector elements easily resizable
Creating responsive design style guides to allow other UI designers to follow
Good UI - Spotify's colour gradient:
Credit: Jaye Hannah
In the world of UI design, colour gradients have become a game changer. They add texture to designs and create an often profound visual impact. Spotify effectively uses colour gradients to convey emotion that is commonly associated with specific genres of music. As seen above, Spotify have used the colour red (and different variations of it) when talking about music users love.
Bad UI - Boden dropdown menu:
Credit: Joseph Foley
People routinely complain about the use of dropdown boxes, yet many companies insist on using them when creating online accounts or paying for goods and services. It can be extremely cumbersome having to scroll through every potential option when instead the user could simply type in their answer. For example, in the image above the user is asked to select their title from a relatively long list. It is safe to assume that most people know their title, so why not ask them to type it in themselves?
Summary of UX and UI Design
To conclude UX and UI designers have different job roles that share some overlap. Whilst UI designers are responsible for optimising the visual aesthetic of a digital product, UX designers are responsible for ensuring the entire user experience of a user is as smooth and efficient as possible.
This blog is by no means a full guide on both UX and UI design but it serves as a general overview that may inspire you to explore both of these design fields in more depth. One author I highly recommend is Don Norman, who inspired me to pursue a career in UX design. A particular book that may ease you into all things design is 'The Design of Everyday Things' which can be purchased on Amazon.
Comments