What’s the Difference Between UX and UI Design?

You’ve seen the terms everywhere, in every permutation – UX designer, UI designer, interaction designer, visual designer… what are the differences and similarities between the roles, and why are they so often combined?

User experience (UX) design and user interface (UI) design are often used interchangeably when describing the processes involved in creating a product, but the UI design is only one part of the many disciplines that influence the user experience of a product.

The broader UX field is compromised of many disciplines, including UI, as well as interaction design, information architecture, visual design, content strategy and creation, user research and psychology, to name a few.

UX is concentrated on designing for the user’s needs and understanding necessary tasks involved in using a product/service to accomplish a goal. UI is more focused on the usability of an interface, determined by its ease, efficiency, and enjoyment of use.

Often designers can communicate decisions to stakeholders through a requirements document. There are interesting alternative approaches such as a task analysis grid, which aims to depict the entire scope of the project and the features of the first and future releases on the same page in a unique schematic description.

The image below is an example of a task analysis grid. Each column begins with a scenario and its description and the sub-tasks necessary to complete the task. The sub-tasks are color-coded and prioritized. Influencers and pain-points are highlighted for each task in order to complete the whole description.

Credit: Task Analysis, Service Design Tools

Focusing on UX within the early stages of a project can help remove some of the friction in using the product. To do so, UX research methodologies seek to uncover a user’s needs, desires, motivations, and behavior, by relying on cognitive psychology and observation of users in behavior labs.

Within projects, whether it’s building a web or mobile based application, the UX research is often done up front, in advance of designing the look and feel of an application to make sure the most useful features and application flows surface in the final application. UX designers will synthesize their research into a variety of artifacts that will be used by other designers in the process: personas of the users, wireframes demonstrating the application flow, and early-stage, low-fidelity prototypes tested by users.

Credit: Mobile wireframe patterns, Speckyboy

With an understanding of the user’s needs and how to structure a product to solve the user’s problems, a UI designer focuses on the details of the layout and how to arrange the interface. The UI designer would work with the UX role to refine the flow of the application, iterate on the prototyped designs to create mock-ups and layouts that are closer to production, and often times, design the colors and typography as a visual designer.

In practice, the roles are often blended and one designer will wear many hats. At Applico, the UX/UI/visual roles are combined, and the expectation of focusing on the user’s interaction with the product runs throughout product strategy and delivery. Small companies may even look for general “product designers” who end up involved with every step of the process, or hunt for the ever-desired “design unicorn” – the designer expected to not only have clarity of user research processes and delivering high quality wireframes and mock-ups, but also the visual refinement for delivering logo/brand work, and coding abilities to write production-ready HTML/CSS. Of course, designers well-versed in all aspects of design are few and fare between, and even when they are capable, there is only a limited amount of time to engage just one person.

Over time, companies with design needs have become more receptive to the T-shaped skill model, which encourages development of broad skills across many fields, with deep knowledge in a single skill. This helps balance the workload of your team’s existing designers and brings a wide variety of skills to the table.

For more information on how UX/UI roles are defined, check out this guide on Fast Company (originally posted on the Pixelapse blog).

Filed under: Product Engineering | Topics: mobile apps, UI Design, UX Design