UI, UX, MVP, CX, SaaS…IDK!
UI and UX are acronyms that are often batted about in the world of web design. For those outside, it can be confusing and difficult to know where UI ends and UX begins. In this post, we’re going to explain in layman’s terms what the difference is.
What does UI and UX stand for?
UI stands for User Interface.
This is the visual elements (like pages, buttons and icons) that a person uses to interact with a product or service
UX stands for User Experience.
UX is the overall experience of a person as they interact with every aspect of a product or service such as a website or app.
There are several elements that make a good user experience. Your product should be useful, learnable, memorable, effective, efficient, desirable, delightful and accessible – you can learn much more about the ins and outs of user experience design in our blog ‘The 7 key elements of good user experience (UX) design’
Here are some examples of both:
Can you have UI without UX?
The key to success is making your user interface design and your user experience design work together, seamlessly. Essentially to make a product that both looks and feels great.
A good example of this is the humble ketchup bottle.
The iconic Heinz glass ketchup bottle as we know it has been around since 1890! At the time, the design was both functional and aesthetically pleasing. Glass was a durable, sturdy material and the ability to see the product through the packaging was extremely useful (you need to know when it’s time to buy another bottle). The see-through packaging was not just practical, it was also a design statement: purity through transparency, tying in with the Heinz’s quest to produce preservative-free ketchup.
However, as time passed, the bottle became less practical. With the introduction of plastic, glass no longer seemed like the best option. Users struggled with getting the last bit of ketchup out of the glass bottles and control the amount of sauce on their plates.
Enter the upside-down squeezy ketchup bottle! This design was introduced in 2001 and it retains all of the charm of the original (see-through packaging, iconic Heinz label) but it addresses all of the usability issues of the glass bottle. As the bottle is upside down, you no longer have the struggles of getting the last of the sauce out and as it’s now ‘squeezy’ the user has much more control (great if you are fussy about your chip to ketchup ratio). It’s a great example of both UI and UX working together.
Key takeaways
We hope this goes some way to explain the difference between UX and UI and what both terms mean. If you’re interested in finding out more, look out for a blog we’ve got coming up in the next couple of weeks where we’ve compiled ultimate glossary of user experience jargon.
Focus7’s UX experts are always happy to advise you on the best UX practice and latest trends. Give us a call on 01462 262362 or email us at hello@focus7int.com to start a conversation.
