When it comes to digital design—whether it’s for a website, an app, or new type of software product—there are two key terms you need to be familiar with: User Experience (UX) and User Interface (UI).
While UX and UI sound similar, there are more differences between them than just an “X” and an “I.” But before we start defining all the differences, let’s first go over what these two terms do have in common. (Spoiler alert: It’s the user.)
Focusing On “U”
In order for any digital design to be successful, it must start and end with the user. You want to make sure the end user is at the very center of any strategy, concept, and/or delivered design. In many cases, your users can range from prospects to loyal customers so you’ll need to have a crystal clear picture of who they are before you begin.
This can be done via market research, surveys, focus groups, etc. You should also define your users’ basic demographics as well as their tastes, styles, preferences, needs, problems, and desires. Once you thoroughly understand and are able to fully define your users, then your UX and UI team can do what they do best: design a product that is sure to be a hit.
The Key Differences Between UX And UI
Building any sort of digital design is not unlike building a house. The rough concept of the home starts with the end-user in mind—aka, the future home owner. Based on the home owner’s preferences, floor plans are drawn up by the architect and put to life by the builder. When the basic structure of the house is complete, it’s time to add in the finishing touches. This is where an interior designer brings the spaces and rooms within the home’s basic structure to life.
Related: Top Practices in UI & UX Design
If we apply this example to website design, your UX team would fill the architect and builder roles. This is the team that is making sure the framework of the “house” makes sense. They create a solid foundation, build out rooms, and ensure all the systems—like plumbing, electricity, heating, ventilation, and air conditioning—work. Using this analogy, the goal of the UX team is to ensure the structure of the digital design is in excellent working condition for the end user.
The UI team is then similar to an interior designer. These designers can often work in tandem with the UX team as the structure is getting built—similar to the way an interior designer might work with a builder during construction—but the goal of this team is to put the final touches into place.
This, however, is a very simplistic analogy when compared to what UX and UI teams do. In order to truly understand the differences between UX and UI, let’s a take a closer look at the roles and responsibilities of these two teams.
User Experience (UX) Design
The primary goal of the UX design team is to ensure the user has a positive experience with the website, app, or product. This team is more concerned about whether the final product makes sense from a logical perspective than they are about how it looks (but this isn’t to say they don’t care about looks!).
If we jump back to the house analogy, the UX team would consider things like why it wouldn’t make sense to put a kitchen on the third floor of a house or a garage right off the master bedroom. The form or structure needs to be logical so it creates a positive experience for the user.
The UX team can ensure a positive experience by observing a potential user’s behavior and anticipating pitfalls. When a UX team is successful, the user feels positive about the product—they believe it was easy to use and relevant information was delivered when and where they needed it.
A UX designer’s responsibilities might include:
- Conduct extensive user research in order to understand goals and desires
- Create and monitor usability tests
- Develop user personas and use cases
- Incorporate user feedback throughout the development process
- Build wireframes, storyboards, sitemaps, etc.
- Understand code and programming languages
- Create mockups or prototypes of the final product (on a macro level)
- Work closely with all aspects of the development team to create final product
These individuals would have an excellent understanding of both graphic design and tech concepts. They know that function and form are dependent on the programming language. A UX designer should also have experience using software tools like Illustrator, Photoshop, Sketch, InVision, and Fireworks.
Related: Why I Trust Psychology Over “Common Sense” in Web Design
Again, the focus here is on the user. A good UX team will get the structure built, but an excellent UX team will consider ways to surprise and delight the user throughout the journey. For example, if a user is spending more than five minutes in the self-help section, an excellent UX designer might set a rule that auto-generates a live chat option to pop up.
Anticipation of needs is vital.
User Interface Design
While we mentioned in the house-building example above that the interior design (or UI team) comes in after the builder (or UX team) has built the structure, it’s not that cut and dry in the digital design realm. In fact, the UX and UI teams often work together simultaneously to ensure that the final product is both functionally useful and aesthetically pleasing.
So, what is the goal of the UI team? They design every interface or user touchpoint in a way that is visually appealing and flowing in the right sequence. The look and feel of the product rests in the capable UI designer’s hands—from the prototypes to the final deliverable.
A UI designer will check to see if call to action buttons are prominent on the page and that links are placed where a user is most likely to spot them. This team employs an almost “feng shui” method to the flow of the design, ensuring that the path from point A to point B is easy and clear for users to move through.
A UI designer’s responsibilities might include:
- Create wireframes, user flows, and mockups (on a micro level)
- Be able to present (and defend when necessary) design decisions
- Understand basic front-end languages (HTML5, Javascript, etc)
- Offer creative solutions to structural design challenges
- Be open to constructive criticism of design and incorporate revisions when needed
- Work closely with all aspects of the development team to create final product
- Demonstrate and test design concepts
You’ll note there is some overlap between the responsibilities of the UX and UI teams. The key difference is how these teams are approaching these responsibilities. While a UX team member may create a wireframe for the overall design, the UI team will create a more detailed wireframe that focuses more on the specific interfaces and touchpoints.
UI And UX Symbiosis
Now that we have a better understanding of the differences of UX and UI, and the complete description of each of these roles, it’s time to bring them together. While these two types of designers may seem like the Odd Couple at times, they are meant to work in harmony to create a seamless product for the user.
Related: What to Look for In a Web Design Agency
As such, you’ll want your UX and UI teams working together in close proximity. They need to both be involved in the development of the website, app, or product and must cooperate in a way that is not contentious or competitive. Egos need to be removed from this process, and an environment that is dedicated to transparent communication is a must.
If problems do arise, remind the UX and UI teams about the goal: the end user. If you take the teams back to the beginning and base any challenges on what the user would prefer, it often clears up complications.
Wrapping Up
There’s a scientific term used in the culinary arts called “dynamic sensory contrast.” It’s the pleasing sensation a person experiences when two contrasting elements work together to form something delicious—like chocolate and peanut butter. These two different tastes and textures work together to form an irresistible combination.
While UX and UI have their differences, when these two teams work together, the result should be an irresistible product for your user.