User Interface (UI) Design

Your constantly-updated definition of User Interface (UI) Design and collection of topical content and literature

What is User Interface (UI) Design?

User interface (UI) design is the process of making interfaces in software or computerized devices with a focus on looks or style. Designers aim to create designs users will find easy to use and pleasurable. UI design typically refers to graphical user interfaces but also includes others, such as voice-controlled ones.

Designing UIs for User Delight

User interfaces are the access points where users interact with designs. Graphical user interfaces (GUIs) are designs’ control panels and faces; voice-controlled interfaces involve oral-auditory interaction, while gesture-based interfaces witness users engaging with 3D design spaces via bodily motions. User interface design is a craft that involves building an essential part of the user experience; users are very swift to judge designs on usability and likeability. Designers focus on building interfaces users will find highly usable and efficient. Thus, a thorough understanding of the contexts users will find themselves in when making those judgments is crucial. You should create the illusion that users aren’t interacting with a device so much as they’re trying to attain goals directly and as effortlessly as possible. This is in line with the intangible nature of software – instead of depositing icons on a screen, you should aim to make the interface effectively invisible, offering users portals through which they can interact directly with the reality of their tasks. Focus on sustaining this “magic” by letting users find their way about the interface intuitively – the less they notice they must use controls, the more they’ll immerse themselves. This dynamic applies to another dimension of UI design: Your design should have as many enjoyable features as are appropriate.

Facebooks easy-to-use layout affords instant brand recognition.

UI vs. UX Design

Often confused with UX design, UI design is more concerned with the surface and overall feel of a design, whereas the latter covers the entire spectrum of the user experience. One analogy is to picture UX design as a vehicle with UI design as the driving console. In GUIs, you should create pleasing aesthetics and animations that convey your organization’s values and maximize usability.

“If we want users to like our software, we should design it to behave like a likeable person: respectful, generous and helpful.”

— Alan Cooper, software designer and programmer

How to make Great UIs

To deliver impressive GUIs, remember – users are humans, with needs such as comfort and low cognitive loads. Follow these guidelines:

  1. Make elements such as buttons and other common elements perform predictably (including responses such as pinch = zoom) so users can unconsciously use them everywhere. Form should follow function.
  2. Maintain high discoverability. Clearly label icons and include well-indicated affordances.
  3. Keep interfaces simple and create an “invisible” feel. Every element must serve a purpose.
  4. Respect the user’s eye and attention regarding layout; focus on hierarchy and readability:
    • Alignment – minimize your number of alignment lines (think justified text); typically choose edge (over center) alignment.
    • Draw attention to key features using:
      • Color, brightness and contrast. Avoid including colors or buttons excessively.
      • Text via font sizes, bold type/weighting, italics, capitals and distance between letters. Users should pick up meanings just by scanning.
  5. Minimize the number of actions for performing tasks but focus on one chief function per page; guide users by indicating preferred actions. Ease complex tasks by using progressive disclosure.
  6. Put controls near objects users want to control.
  7. Keep users informed vis-à-vis system responses/actions with feedback.
  8. Consider defaults to reduce user burdens (e.g., pre-fill forms).
  9. Use reusable design patterns to guide behavior regarding navigation and search functions.
  10. Concentrate on maintaining brand consistency.

On the course section of IDF’s webpage we use colors, brightness, and contrast to draw attention to key features.

Always provide next steps users can deduce naturally, whatever their context. Because the best interface is no interface, to offer users the most direct, accessible, comfortable control (and best experience) where they’ll forget they’re using your design, ask yourself, “Can I make things simpler?” Lastly, beware of dark patterns and add-ons.

Learn More about UI Design

The IDF’s course on UI Design: https://www.interaction-design.org/courses/ui-design-patterns-for-successful-software

An incisive, example-laden piece explicating UI–UX differences: https://premium.wpmudev.org/blog/ux-ui-wordpress/

Helpful advice on developing an approach to UI Design: https://www.smashingmagazine.com/2018/02/comprehensive-guide-ui-design/

See how to avoid common mistakes: https://hackernoon.com/6-bad-ui-design-examples-common-errors-of-ui-designers-e498e657b0c4


Literature on User Interface (UI) Design

Here’s the entire UX literature on User Interface (UI) Design by the Interaction Design Foundation, collated in one place:

Learn more about User Interface (UI) Design

Take a deep dive into User Interface (UI) Design with our course UI Design Patterns for Successful Software.

Have you ever found yourself spotting shapes in the clouds? That is because people are hard-wired to recognize patterns, even when there are none. It’s the same reason that we often think we know where to click when first experiencing a website—and get frustrated if things aren’t where we think they should be. Choosing the right user interface design pattern is crucial to taking advantage of this natural pattern-spotting, and this course will teach you how to do just that.

User interface design patterns are the means by which structure and order can gel together to make powerful user experiences. Structure and order are also a user’s best friends, and along with the fact that old habits die hard (especially on the web), it is essential that designers consider user interfaces very carefully before they set the final design in stone. Products should consist of such good interactions that users don’t even notice how they got from point A to point B. Failing to do so can lead to user interfaces that are difficult or confusing to navigate, requiring the user to spend an unreasonable amount of time decoding the display—and just a few seconds too many can be “unreasonable”—rather than fulfilling their original aims and objectives.

While the focus is on the practical application of user interface design patterns, by the end of the course you will also be familiar with current terminology used in the design of user interfaces, and many of the key concepts under discussion. This should help put you ahead of the pack and furnish you with the knowledge necessary to advance beyond your competitors.

So, if you are struggling to decide which user interface design pattern is best, and how you can achieve maximum usability through implementing it, then step no further. This course will equip you with the knowledge necessary to select the most appropriate display methods and solve common design problems affecting existing user interfaces.

All Literature

Please check the value and try again.