User interface (UI) design is one of several overlapping disciplines responsible for creating the interfaces where users interact with digital products. UI design is found on a spectrum with user experience (UX) design, interaction design (ID), and visual or graphic design.

What Is UI Design?

In its broadest definition, the user interface is the space where people and machines interact. People give instructions to machines and machines start a process, respond with information, and provide feedback that informs human decisions and enables further interactions. The field of human-computer interaction (HCI) is more specifically concerned with digital interfaces, which have evolved from punch cards and command-line text entry to today’s sophisticated graphical user interfaces (GUIs).

UI design of the Xerox Star 8010 from 1981

Xerox 8010 Information System in 1981 (DigiBarn, used under CC BY; cropped from original)

User interface design for digital products is primarily concerned with the layout, the hierarchy of information, and the appearance of interface elements on individual screens for software programs, websites, and mobile apps, but can also include video games or TV interfaces.

By following the principles of user-centered design (UCD), UI designers create interfaces that are structured and oriented to meet user needs rather than simply facilitating technical solutions. This often requires an element of compromise, with the UI designer balancing functional requirements with user needs and aesthetics (dictated by branding and visual design).

Dashboard UI design

B2B dashboard UI design, by Miklos Philips

Good user interface design supports usability with clear, consistent visual layouts and content structuring as well as providing clues (signifiers) to help users complete tasks while minimizing interference caused by unnecessary content or design elements.

Well-designed digital user interfaces leverage common signifiers and visual metaphors that have real-world counterparts—for example, buttons, volume sliders, calculators, disc icons for “save” actions, etc.

User interfaces are made up of different types of elements, including:

  • Input controls, which are interactive components in a UI and range from checkboxes and radio buttons to dropdown lists and text fields: These enable users to make selections from one of the displayed options and enter text.
  • Navigation controls, where users choose a destination or change the data displayed on their screen. UI elements include dropdown menus, sliders and scrollbars, breadcrumbs, tabs, and pagination controls.
  • Information elements, which provide feedback to the user. UI elements can include icons, text and visual content, progress bars, and other notifications.

iOS app UI design

iOS app UI design, by Thrive

Effective UI designers follow best practices, conventions, standards, and basic usability principles to ensure that the user interfaces they create correspond with user needs. Among the most important principles are:

  • Consistency in the use and reuse of common interface elements, so that users are familiar and comfortable with the interface.
  • Page or screen structure with a clear hierarchy of elements, so that the highest priority items are most prominent for users.
  • Use of color and typography to emphasize higher priority elements, providing clarity to users.
  • Good communication and feedback to inform the user of state changes, errors, or confirmation of user actions, so that the user is able to see how the system reacts to input and make decisions more easily.
  • Understanding of user preferences and priorities, so that the most common tasks or goals are accomplished easily, with default behavior tailored to simplify common tasks.
  • Reduction of the cognitive load on users by designing interfaces that make effective use of whitespace and are as simple and intuitive as possible.

mobile application UI design

UI design for a plant watering advice mobile app, by Tubik

The Difference Between UI and UX

User interface design is often confused with user experience design. While there can be considerable overlap, they are distinct fields with different skills required for each role. A user experience designer is focused on the overall structure and function of a website or application and on how a product feels and works for the user.

UX designers work with (or as) information architects to organize content; they reference user research and perform detailed task and business analysis to determine the optimum workflow for complex operations such as an eCommerce checkout and account creation process. UX designers then create user flows, customer journey maps, lower-fidelity wireframe diagrams, and interactive prototypes to test, validate, and refine their concepts via user testing.

Apple Watch wireframe Framer animation UX design

Apple Watch wireframe animation (UX design by Alex Dovhyi)

UI vs. UX

The interface is not the solution. UI design generally plays an important role in the work of a UX designer, but it is not the only part. Think of it this way: UX design is the consumable and the UI is the tool (with which to consume it).

UX design is a multi-step strategic design process that aims to create a product or site that customers/users are drawn to, find easy to use, and quickly understand. And through the UX design process, we arrive at the right user interface solution.

UX is not UI, the difference between UI and UX

The difference between UI and UX (Illustration by Shane Rounce)

What Do UI Designers Do?

User interface designers build on the framework provided by UX design to bring digital products closer to their final form. They follow UX wireframes for the hierarchy and priority of elements on each screen, then apply visual design guidelines along with interaction design best practices to ensure consistency throughout the entire experience.

eCommerce UI design concept

eCommerce UI design store concept, by Remco Bakker

UI designers are responsible for the visual hierarchy, layout, spacing and alignment on the screen, visual weight of headers and typography, correct use of standardized interface elements such as buttons and form fields, and adherence to brand guidelines for color treatments and logos.

Given that modern user interfaces are not simply static screens but interactive experiences with dynamic behaviors and animated transitions, UI designers will also work with motion designers or interaction designers, refining the basic interaction concepts developed by UX designers.

User interface design can also include data visualization and information design work, which helps users make sense of highly complex data through simplified display of this information on the “presentation layer.”

eCommerce UI design concept

Jewelry store eCommerce UI design concept, by Tubik

User interface designers deliver the final visual mock-ups of each web page or application screen from which developers will produce the finished product. Just as UI design sometimes overlaps with UX design, so too can UI design overlap with the actual front-end development of a digital product, particularly when working with well-defined screen templates and component libraries.

In order to serve efficiency and the user experience, methods of interaction continue to become more and more sophisticated. In today’s world, user interface design takes on primary importance as the world around us becomes increasingly more digital. In the coming decades, UI design will progress toward moving off two-dimensional screens and into the 3D world of VR (virtual reality), AR (augmented reality), and MR (mixed reality).

Regardless of the technology, screens, spaces, or environments, UI design will continue to stay focused on facilitating the user’s interaction and experience between “man and machine” in the most efficient way possible.

About the author

Scott Anderson, Canada
member since July 31, 2017
Scott is a user experience architect, information architect, and interaction designer with over ten years of experience working on software, web, tablet, and mobile device sites and applications. He works most frequently in Axure, creating wireframe prototypes that incorporate dynamic interface behavior in the design process to illustrate both user interaction models and the underlying logic and flow of complex business applications. [click to continue...]
Hiring? Meet the Top 10 Freelance UI Developers for Hire in January 2018

Comments

TechJeny
Thanks Scott Anderson for the article! You have cleared my confusion between UI and UX.
comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great design posts.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Scott Anderson
Designer
Scott is a user experience architect, information architect, and interaction designer with over ten years of experience working on software, web, tablet, and mobile device sites and applications. He works most frequently in Axure, creating wireframe prototypes that incorporate dynamic interface behavior in the design process to illustrate both user interaction models and the underlying logic and flow of complex business applications.