Skip to main content

User Interface Questions

Questions & Answers to UI questions. Pull requests for suggestions and corrections are welcome!

Table of contents​

What is UI design?*​

User interface design focuses on designing intuitive environments, points of interaction, that increase a user’s ability to effortlessly experience and interact with a product. As UI designers, they must advocate on behalf of the user, ensuring that the interfaces truly assist and guide the user from task to task, enable work to be done, and ultimately improve quality of life.

In computation, an interface is a boundary in which two components of a system exchange information. In this case, the UI is the boundary between the user and the computer. This includes any number of modalities of interaction where data is transferred between the user and the computer system.

The difference between UI & interaction design is "what" and "how". UI Design is designing what the user interacts with. Interaction design is designing how the user interacts with the system. These two fields have a lot of overlap.

References​

What are some common components in UI design?​

Interface elements generally fall into the following categories.

  • Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field
  • Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
  • Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
  • Containers: accordion
References​

What are important design topics to know that enable good UI design?​

For a standardized definition of UI Requirements, reference ISO 9241 which describes:

  • Dialogue
  • Usability, including presentation of information such as clarity, discriminability, conciseness, consistency, detectability, legibility, and comprehensibility.
  • User Guidance

Additionally, some other topics to be aware of are:

  • Accessibility
  • Aesthetics
  • Alignment
  • Color Theory
  • Consistency
  • Contrast
  • Feedback
  • Gestalt Principles
  • Grid
  • Heuristics
  • Lighting & Shadows
  • Motion
  • Organization
  • Spacing & Vertical Rhythm
  • State
  • Transitions
  • Typography
  • Visual Hierarchy

What’s the difference between UX and UI?*​

While UI is certainly an important part of UX, UI is only an aspect of UX. UX is a broad, general umbrella term for several related topics including research, prototyping, information architecture, interaction design, visual design, and UI design.

What’s a design system? What experiences do you have working with them?​

A design system is a collection of assets, guidelines, components, and resources as it relates to the user interface. Design systems promote consistency in digital products by serving as the universal truth in which their UI components and patterns are created.

A design system can also be thought of as a system of systems. A design system often contains many subsystems that describe the user interface such as:

  • Design tokens
  • Typography system
  • Color system
  • Layout/Grid system
  • Icon system

Brad Frost notes an important distinction to make is that design systems only relate to UI, not digital products in general. This is because it puts an undue burden on the design system to account for every aspect of creating a digital product and leads to a lot of confusion across an organization.

References​

What are UI heuristics? Can you give some examples?​

Heuristics are broad rules of thumb and not specific usability guidelines. The following heuristics were developed by Molich & Nielsen.

1: Visibility of system status​

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

2: Match between system and the real world​

The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.

3: User control and freedom​

Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.

4: Consistency and standards​

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.

5: Error prevention​

Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.

6: Recognition rather than recall​

Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.

7: Flexibility and efficiency of use​

Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

8: Aesthetic and minimalist design​

Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.

9: Help users recognize, diagnose, and recover from errors​

Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.

10: Help and documentation​

It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.

References​

What is the difference between atom, token, component, and pattern​

Atoms were defined in Atomic Design by Brad Frost. He defines it as the smallest reusable building blocks used to create UI components. Some examples are buttons, links, or input field boxes.

Design tokens are standardized style values of UI elements such as color, typography, spacing, shadows, etc. Design tokens are used to ensure designers and developers choose consistent values

A component is a UI element that can be thought of as a singular element and reused as a building block for the rest of the UI. Components may contain other components or be used within other components. There is no standardized list of components and it is up to the designer or developers to classify their UI elements. For example, Material Design defines components as "interactive building blocks for creating a user interface."

Patterns are recurring, best practice solutions to common design problems. Patterns are usually combinations of components, may be dynamic, and should have guidelines for their usage.

References​

[↑] Back to top