UI Design and UX Design Overview

At UI UX Training we recognize that it’s easy to confuse user interface (UI) design with user experience (UX) design. Despite this risk, we’ve chosen to name the company UI UX Training for two reasons:

  1. In well-planned design projects, UI and UX design overlap and inform each other.
  2. In cases where UI design is driven by product requirements and the demand from coders to give them something to build, our goal is to show how integrating UX into the design process actually increases efficiency and results in a more intuitive and engaging user experience.

Job titles or even informal roles are far less important than the actual design activities. UX design and UI design are equally important stages within the overall design process and the focus of this article.

UX Design

Why bother with UX design?

Ever tried to find a product in a new online store only to be stymied? Ever tried to sign up for a service on your phone only to learn that you can start on the phone but must shift to a laptop to finish the process? Was either a positive experience?

This is where UX designers step in. When it’s clear that users are struggling to complete an important task, UX designers are charged with ensuring that users understand how to start and finish the task. It might be a simple purchase, a registration, or something more involved such as diagnosing a complex technical problem or learning how to use a high-tech medical device.

The key to imparting this understanding is a logical task flow based on the user’s needs as identified during the UX research phase. Rather than start with a high-end prototype, UX designers begin with task flows. What does the user need to accomplish? What are the basic stages in the process? What is the best way to divide those stages into steps, and what is the logical sequence?

For example, we recently worked on a design in the training space. The issue was how to accommodate domestic and international users. After a few iterations, we identified a simple path to country-specific pages.

ux design task flow

This work is essential but far from glamorous. Indeed, slick UIs with polished graphics look great and are fun to create. Who wants to sit around and draw flow charts like the one above? Well, UX designers do because they recognize the risk of overlooking this critical design phase. After defining a task flow like the chart shown above, UX designers sketch low- to mid-fidelity wireframes for each step in the flow. Often, UX designers conduct a user experience test to identify gaps. Based on these test findings UX designers revise the flow and wireframes and often run a second test to determine if these revisions have met the users’ needs.

Throughout this early stage work, UX designers draw heavily on the psychology that drives user behavior from how people make decisions to a user’s emotions, perceptions, and attitudes about the app, site, or service.

In summary, a usable and engaging experience begins with a focus on site organization (information architecture), task flows, page flows, and interaction design in the form of wireframes leaving the critically important UI design to visual designers.

UI Design

User interface (UI) typically refers to the product’s visual presentation. UI design is more than aesthetics. It’s the mechanism UI designers use to create the experience. This experience includes how users interact with the UI and their perceptions, impression, and reactions.

Leaders with a customer-centric mindset recognize that UI design should follow the foundational UX design work described above. When this occurs, the results are often favorable because talented UI designers can focus on a compelling interface based on a creative but also unified visual concept that is engaging, aesthetically pleasing, and easy to scan, absorb, and use as shown below.

UI design

The message and call-to-action on box.com are clear. The composition is balanced and leads the user’s eye with gradients and an image pointing forward. This image conveys action and progress. The image also demonstrates the site’s responsive design by literally showing how it looks on various devices.

The box.com example reflects author Alan Smith’s explanation of UI design: “UI design has an artistic component as it relates to the design and interface with the product. It affects what the end-user sees, hears, and feels” (https://usabilitygeek.com/big-differences-UX-UI-design/).

UI and UX Design

As Smith explains in his excellent article, there is ample debate about whether UI design and UX design are similar, separate, overlap, or whether one subsumes the other. In our view, the two overlap but are certainly not identical. In addition, neither UI design nor UX design should dominate. The most productive approach is to begin with the structure best addressed by UX such as site organization (information architecture in UX geek speak), task flow, and, in some cases, interaction design. The latter refers to how users make things happen such as filling out a form, buying a book, or learning how to use the UI on a complex medical device.

With a well-defined structure in place and some interaction design issues resolved, it’s time for UI design to shine. Interaction design is where UX design and UI design intersect. UX designers approach interaction design by focusing on how users think and how they are likely to react in specific situations.

UI designers play an equally important role with respect to interaction. First, some UI designers are well versed in cognitive psychology and human factors. Second, UI designers with deep background in art and composition know how to apply these skills to an interface to make it more engaging, usable, and aesthetically appealing. Without this important work, even well defined task flows and wireframes won’t be enough to achieve a top-notch design that users find appealing and intuitive.

In summary, UX design refers to the early stage work including user research, information architecture, task flows, and interaction design as warranted. UI design comes next, usually with a deeper dive into interaction design and focus on a compelling visual concept and look and feel that will engage users.