What is UX and UI Design?: A Quick Guide

What is UX and UI Design?: A Quick Guide

User experience (UX) design and User interface (UI) design are elements crucial to a product and work closely together. Although UX and UI design are relatively new terms, they are vitally important to the legions of apps, websites, and everyday tech functions that dominate our world. These terms are rarely used outside of tech, however. This means their sparseness, as well as their newness, lends itself to confusion for the general public and many tech experts. UX and UI are often seen paired together, which means they’re often considered interchangeable, or simply one and the same. This is incorrect. While UX and UI are related and equally important when it comes to designing processes or applications, they are not the same thing.

This inability to understand the difference can cause many problems for you and your business. This can mean hiring a UI expert who is unsuitable for the UX expertise you’re looking for can mean your business is wasting money, time, and effort into a product that won’t properly deliver on the specific look or functionality you’re seeking.

If you’re confused about the two terms, don’t worry. UX and UI are some of the most misused and misunderstood terms in tech. We’ll help break down the difference to help you and your business better understand their distinctions:


UX and UI Are Not Interchangeable

Considering UX and UI are often uttered in the same breath or typed without spaces (ie. UX/UI Design), it’s no wonder many within and outside of the tech industry believe them to be the same thing. It doesn’t help when the terms are often used interchangeably by people who don’t fully understand how they work.

UX and UI are absolutely related. They are both important for customer experience (and thus, customer revenue and loyalty) and can frequently overlap. However, they encompass two wildly different fields.

Broadly, UX focuses on how a user interacts with your product, while UI focuses on how your product looks and feels. 


UX or “User Experience Design”

UX focuses on the overall experience a user has with a product through its structure, layout, and navigation. While it can technically apply to anything a person interacts with (such as IKEA instruction manuals, grocery store layouts, and appliances) it’s generally exclusive to the tech fields. As such, it involves designing wireframes and prototypes, task flows, scenarios, and conducting user research to decide how best to direct the flow of information and the steps involved in the user experience.

Is your product easy to interact with or frustrating to use? Does each subsequent action taken by a user happen smoothly and intuitively? Or is your customer constantly hunting around to find the one important piece of information they’re looking for? These are all aspects of UX. A good user experience design is easy to use, flows well, makes intuitive sense, and guides a user seamlessly towards what they want to do. This can include buying a product, finding help for an issue, or signing up for a service. An example of good UX can be seen on Amazon’s Prime Membership page. On it sits an easily viewable, clickable button that will send you an email before your membership renews. That gives customers an easy, intuitive, in-website way to remind themselves if they want to stop their Prime membership. An example of bad UX, however, can be seen in Netflix’s often frustrating auto-play video feature. Users are immediately bombarded with trailer audio while scrolling over image tiles, or when clicking on a title in search of a text synopsis or more information about a movie or show. There’s no way to stop a video from playing while scrolling through Netflix unless you avoid hovering over any tile whatsoever. This may disincentivize people from exploring Netflix’s catalogue for the sake of avoiding trailer auto-play, defeating the purpose of the entire website.

Whether good or bad, once the technical aspects of UX have been completed, a product is then ready for visuals. This is where UI comes in, and why the two fields are so often seen as companions to one another.


UI or “User Interface Design”

While UX deals with functionality, UI focuses on its form; on the look and visual layout of your product. Essentially, it’s what your users see when they open your app, visit your website, or otherwise use your interactive tech product. UI designers focus on aspects such as visual design, colour palettes, animation, widgets, diagrams, themes, typography, spacing, and much more. UI is concerned with any visual element a person interacts with, like buttons, text, and images. They also ensure the visual brand of a company (and the internal branding of the product) is consistent throughout and pleasing to the eye.

An example of good UI is Medium, a digital publishing site that makes ample use of spacing, easy-to-read typography, and a simple, minimalist colour scheme. On the other hand, an example of bad UI could be seen in Amazon Prime Video which, until recently, made no distinction between its free-to-watch titles and pay-to-watch titles. This made it impossible for users to quickly visually pinpoint which movies or tv shows they could watch with their Prime membership without any additional cost. Amazon has since solved this UI issue with the inclusion of bright blue and orange tabs on each show tile to quickly distinguish between the two. While initially bad, this addition is a great example of how a quick visual change can vastly improve a user’s experience.

Considering how important visuals are to UI, it should be no surprise that UI designers also have the key role of figuring out how to deal with customer accessibility. They have to make sure a product is viewable and operable to everyone, regardless of accessibility issues. This can include choosing high contrast colours to benefit those with colour blindness. It can also include making sure the font they choose is scalable or compatible with screen readers for those with other vision problems.

Essentially, UX is how a product works, while UI is how it looks. These two terms both have separate and distinctive parts and functions. While they’re not the same thing, one follows the other, and both are needed to operate hand-in-hand for a truly functional, intuitive, visually pleasing tech product. Hopefully, you and your business can now go forward with a proper understanding between the two. This will help ensure you’re saving time and money while looking for someone to design your next website or product.

Speaking of website and product design – are you looking for fully customized software, a new website, or a mobile app? Calibre Consulting boasts an experienced developer team and ongoing support. We’re ready and willing to serve Canada and the world. Contact us for a free consultation!

Share this article