UX and UI are two terms you will hear frequently around a digital start-up company or in reference to web design. The two terms are dovetailed together and, when done well, work seamlessly with one another.
To start wrapping your mind around the difference between UX and UI, check out the image below from this Medium blog:
The picture on the left (Designing the Product) is the UI. The ketchup bottle looks good, but that doesn't necessarily mean it's practical/functional. On the other hand, the image on the right (Designing the Experience) is the UX. The ketchup bottle looks weird because it is upside down, but this "upside-downness" is a lot more functional, not to mention pratical.
Nonetheless, just because you have good UI doesn't mean your UX will be bad. You can master both, and many companies do this very well. It can be difficult to differentiate the two because they are so closely related. Don’t fret. We will help you understand how they relate to each other. Let’s start by covering each term a little more in-depth.
What is UX?
UX is short for User Experience design. When considering UX, a designer will take a “human-first” approach. The focus of this individual is the experience that the end-user will have with the product. These designers are generally more interested in the psychological aspects of a service or product and problem-solving.
How easy is it to use? Is the experience seamless? These are a couple of questions that a UX designer will frequently ask themselves. UX can apply to both the digital and physical world. It’s focused on how the user is going to react, often emotionally. When done well, good UX will go undetected.
The starting point with UX is, typically, market research. Taking an audit of any competitors and how good the UX is within their product offerings. If you can capitalize on areas where your competition is struggling, it will give you a leg up to win over potential customers. It is also advantageous to consider what a competitor’s UX is doing well. You will want to make sure your UX will also be doing those things well.
After observing what the competition is doing, a UX designer will move on to product development. They will utilize tools such as Photoshop, Sketch, and Illustrator to start framing what the user experience will look like. Their deliverables frequently take shape in wireframes, sitemaps, and storyboards.
Finally, UX designers will give the product or service a high-level scan. This will focus on putting themselves in the user’s shoes. Does the flow make sense? It will also consider the emotive response of the user. How does it make them feel? This is by no means a concrete process, as each UX designer will have their own preferences on how they like to work. However, the ultimate goal is the same - enhancing customer satisfaction and loyalty.
What is UI?
UI, meanwhile, stands for User Interface design. The main area of focus for a UI designer will be the visual aspects of a digital offering. Whether it has to do with tapping buttons on a webpage or swiping through images on an app, the UI designer will be the one with control. These individuals typically are more interested in visual aesthetics, layouts, and design.
What makes the most sense in terms of this page layout? How can I visually communicate the path that a UX designer has laid out? As evidenced by the latter, UI will follow UX. These designers will also make sure that the design language is uniform and consistent across a page.
UI is a term specifically applied to the digital world. When the UI design is not quality, it is easy to see. Literally.
A frequent starting point for the UI designer will be the concept and work or the UX designer. They will communicate how they want things to flow and how they want the user to experience a product or service. This is vital information for the UI designer. They will bring the UX designer’s dream to life in the visual aesthetic of the offering.
The overlap in tools used is evident with UI and UX designers. These include Photoshop, Sketch, and Illustrator. Many companies try to combine these two roles because of the common processes and tools that both positions utilize. Mock-ups that come from the UI designer will highlight the visual elements of a website or application.
After understanding what must be included or excluded in an offering and the overall idea of how it will work, a UI designer will finalize their work. UX has provided the guideline and UI will implement the visual presentation. The main goal is to make sure that the user will enjoy the layout and look, while still understanding the product or offering.
It is obvious by this point that UX and UI design are deeply correlated. You can not have one without the other. As Rahul Varshney, the co-creator of Foster.fm, puts it, “A great product experience starts with UX followed by UI. Both are essential for the product’s success.” Companies that rise above the rest excel in each of these areas and invest time and resources into them.
A wonderful, easy-to-understand summation of the relationship between UX and UI comes from designer Helga Moreno below.
“Something that looks great but is difficult to use is exemplary of great UI and poor UX. While Something very usable that looks terrible is exemplary of great UX and poor UI.”