But which part is the UX and which is the UI? The process of making the brownies is the UX and the process plating them and serving them is the UI.
What about eating them? Now that’s UX; except when it’s not. Might the consumer have a different experience if the brownies were served straight from the pan or beautifully plated? I would argue yes, the latter would be preferable.
In this article I’ll share with you 5 differences between UX and UI design. Hopefully, by the end, you’ll have a better understanding of each discipline. Be forewarned though, as you note the defining characteristics of each, you may also be struck by their congruencies.
With that caveat, let’s take a look at a few of the differences between the two.
UX Is Not UI
UX design or user experience design, is the process by which a pain point or need is identified. Then a rough prototype is drawn which is later validated (or invalidated) through testing. When both the business model and the value proposition have been validated the product is built.
You can think of UI design or user interface design like this:
User Interface Design = Visual Design + Interaction Design.
Visual design is the look and feel of the site, the personality if you will; the brand. Interaction design is the way people interact with your site. When someone clicks a button on your site, does the button change in a noticeable way so they know they’ve been successful?
Although both UX and UI designers design interactions, you can think of UX designers as the architects of macro-interactions while UI designers, as the makers of micro-interactions, attend to the details.
According to designer Nick Babich:
“The best products do two things well: features and details. Features are what draw people to your product. Details are what keep them there.”
A UX designer will likely design the user flows, the steps that a user would take to sign up for your newsletter, for example. What are the steps they will follow and how will they know if they’ve been successful?
The design is then passed off to the UI designer. The UI designer will refine those interactions adding color and emphasis to the original design giving users the clues they need to successfully navigate the newsletter sign up process.
UX Makes Interfaces Useful
UI Makes Interfaces Beautiful
A useful product meets a need that is not already being met in the market. The research process of a UX designer involves doing a competitive analysis, developing personas, and then developing a minimum viable product or more apropos, minimum valuable product; a product that will be valuable to your targeted customer niche. This is validated through testing throughout the life-cycle of the product.
Once the user flows and wireframes are prototyped and tested, it’s the UI designer’s role to make them aesthetically pleasing. This includes choosing a color scheme and typography that will be both attractive and simple to use. However, color choices, typography and interactions are not based on the designer’s personal preference but rather on clearly articulated reasons specific to the personas developed by the UX designers. With these, UI designers implement a visual hierarchy that will serve as a guide to users, letting them know what to do and when to do it, in order to meet their objectives.
A well-designed hierarchy will highlight one main objective per page making it clear to the user where they are on the site and what they can accomplish in any given moment. She will do this by using conventions or patterns that users are already familiar with. These patterns will act as clues to the user as to how to get where they are going.
UX Helps Users Accomplish Goals
UI Makes Emotional Connections
People come to your site to do stuff. Whether it’s researching the best kind of doggie companion for small apartment living or paying their taxes (ouch!). The former may be more fun, however in either case they come to your site with a goal in mind.
The UX side of things might look at people like dog lovers and try to figure out what’s important to them. What is it that they value or need when looking for assistance in choosing their next furry friend? So, they get to work to figure it out. They ask questions, they observe people, they interview people, they may make prototypes and do a bit of guerrilla testing to see if they can validate their business and product value propositions.
Once you have the basic usability right, according to Aarron Walter author of Designing for Emotion, it’s really the personality of your interface that will elicit loyalty in your users. People may be drawn to your site because of its striking design, they may stick around for a while if it allows them to do stuff. However, once they make a personal connection, then they’re hooked. Does your interface make them laugh? Does it “get” them? Is it cheeky? Aaron says, “People will forgive your shortcomings, follow your lead, and sing your praises if your reward them with positive emotion.” That’s where the expertise of the UI designer comes in.
UX Design Is Done First
UI Design Is Done Second…(Sometimes)
Within the process of design how do UX and UI designers work together?
Normally, UX design and research is the first step when deciding whether to build a product or application. UX designers handle much of the research that will validate or invalidate initial product ideas and guide the development of the product.
Once the prototype has gone through several iterations and is largely finalized (for now) the UI designer steps in and begins to work on the visual design and micro-interactions.
However, this may not always be a linear path. It depends on many factors. For example:
- Who handles the UX and UI?
- Is it the same person or a different person or team?
UX Is Employed Across Products, Interfaces And Services
UI Only Pertains To Interfaces
User experience design is a broad field and becoming more popular by the day. Now, not only companies with a web presence but many others that develop products or provide services are catching-on to the value of understanding their users and validating their hypotheses before they build.
User Interface design is, well, only for user interfaces. This doesn’t mean it is limited to the graphical user interfaces of computers, tablets and mobile devices. We are also seeing interfaces on many other products these days like watches, washing machines, car dashboards, vending machines, ticket kiosks and many more.
I recently read about an application on the iPhone that unlocks your car door. It turns out that this set of interactions takes many more steps than simply using your key to unlock the car door. Whether designing for interfaces or experiences, we should take care to (once again) keep our users at the heart of our design process.
It’s almost impossible to extricate the UX from UI or the UI from the UX.
However, if we were to try, we might conclude that:
- UX design helps users accomplish meaningful tasks across platforms and services.
- UI design makes compelling and aesthetically pleasing interfaces that connect with humans.
You now know a few of the differences between UX and UI.
Now about those brownies…
How would you like them to be baked and served?
I like mine baked to perfection (crispy on the outside and chocolatey and gooey on the inside) served on a stylish plate with powdered sugar, a bright green mint leaf and a single raspberry.
…because one is not nearly as good without the other.
Principles of User Interface Design by Joshua Porter
The Psychologist’s View of UX Design by Dr. Susan Weinschenk
The Difference Between UX and UI Design-A Layman’s Guide by CareerFoundry’s Emil Lamprecht
10 Usability Lessons from Steve Krug’s Don’t Make Me Think by Redd Horrocks