UX and UI - there's a difference?!

July 21, 2015

Two acronyms have gained prominence with the rise of technology and designing for devices - UX and UI. So what are UX and UI?

Given how these two terms are used interchangeably in almost every job posting and LinkedIn profile, it can come as a surprise that they are not the same thing.

UI (or User Interface) defines the overall look and feel of the product and is important for first impressions. From time-to-time, you may see related terms in the context of UI with labels such as visual design, or even front-end design.
UX (or User Experience) defines the interaction and communication between the product and the users. While both are important, users’ happiness is mostly tied to UX design. You may also see UX related in job titles with terms such as interaction design, information architecture, and even product design.

Steve Jobs may have said it best, “Some people think design means how it looks (UI) but of course, if you dig deeper, it’s really how it works (UX).” In his definition UI is the gloss, UX is the meat. If a product is all gloss and no meat, it dies.

The design of Google’s search engine is a perfect example. It is unlikely that when you log in to Google you sit back and think to yourself: “Wow! I’m in awe of how incredible and original Google’s design is!” But you know without having to invest half of a day training on Google how to use it. That’s an extreme focus on UX. On the flip side, we’ve all been to websites that have an incredible color palette and are essentially beautiful. Yet, by the time we leave we’re frustrated how difficult it was to accomplish a simple task. That’s an example of an extreme focus on UI without considering the UX component.

The abstract relationship between UX and UI becomes more clear when applied to the real world. Since MTC does a lot of work in healthcare (including Mass General, Newton-Wellesley, and Brigham and Women’s), let’s use a hospital emergency room experience as an example.

User Experience (UX) design for a patient in a hospital would encompass everything that makes your experience as efficient (or inefficient!) and easy as possible. An example of a great (UX) for a hospital emergency room would be things like a dedicated parking lot just for emergency room patients, online registration prior to your arrival at the hospital, a dedicated nurse waiting for you at check-in. All of these features streamline the process and simplify an otherwise difficult experience.

User Interface (UI) design, in contrast, involves the aesthetics. Perhaps the hospital that you are visiting has beautiful landscaping outside, the floors are gleaming and clean and the room that you are put in has a private bathroom, a new flat screen tv and fresh flowers on the table in the corner. All of these features add perceived value from a consumer’s perspective and can make their visit more pleasant. They make the hospital seem well kept, and can add to the overall brand image. However, too much focus on the niceties (UI) over the efficiency of the check-in and waiting room process (UX) can ruin a client’s experience. While all of these things are very important, if you just broke your femur, odds are better than not that you don’t care about the fresh flowers in the corner nearly as much as you care about seeing a doctor and being treated quickly.

The most important component with UX and UI is that the two have to work hand-in-hand to be successful. Too much UX and not enough UI can be a deterrent from a first impressions standpoint. After all, if you showed up to a run-down hospital with dead flowers, an old big box tv in your room and dirty bathrooms, you probably wouldn’t attribute a short ER wait to speed and efficiency as much as you would assume no one wants to go to that hospital.

At MTC, we understand the importance of finding the right balance for your consumers, and our methodology for executing UX and UI work has been working for us for the past 15 years. Our step-by-step process includes: