User Interface (UI) Design

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

655 shares
400
203
52

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:

Featured article

User Interface Design Guidelines: 10 Rules of Thumb

User Interface Design Guidelines: 10 Rules of Thumb

Learn to design with your user’s needs and expectations in mind by applying Jakob Nielsen and Rolf Molich’s Ten User Interface Guidelines. These heuristics have been reflected in many of the products designed by some of the most successful companies in the world such as Apple, Google, and Adobe. Further evidence of how their design teams incorporate these rules into their design process is reflected in the user interface guidelines published and shared by these companies. This article will teach you how to follow the ten rules of thumb in your design work so you can further improve the usability, utility, and desirability of your designs.

Jakob Nielsen, a renowned web usability consultant and partner in the Nielsen Norman Group, and Rolf Molich, another prominent usability expert, established a list of ten user interface design guidelines in the 1990s. Note that there is considerable overlap between Nielsen and Molich's heuristics and Ben Shneiderman’s 'eight golden rules'. These 10 rules of thumb further iterate upon Shneiderman’s eight golden rules 4 years after Shneiderman’s initial publication.

Nielsen and Molich's 10 User Interface Design Guidelines

  • Visibility of system status. Users should always be informed of system operations with easy to understand and highly visible status displayed on the screen within a reasonable amount of time.
  • Match between system and the real world. Designers should endeavor to mirror the language and concepts users would find in the real world based on who their target users are. Presenting information in logical order and piggybacking on user’s expectations derived from their real-world experiences will reduce cognitive strain and make systems easier to use.
  • User control and freedom. Offer users a digital space where backward steps are possible, including undoing and redoing previous actions.
  • Consistency and standards. Interface designers should ensure that both the graphic elements and terminology are maintained across similar platforms. For example, an icon that represents one category or concept should not represent a different concept when used on a different screen.
  • Error prevention. Whenever possible, design systems so that potential errors are kept to a minimum. Users do not like being called upon to detect and remedy problems, which may on occasion be beyond their level of expertise. Eliminating or flagging actions that may result in errors are two possible means of achieving error prevention.
  • Recognition rather than recall. Minimize cognitive load by maintaining task-relevant information within the display while users explore the interface. Human attention is limited and we are only capable of maintaining around five items in our short-term memory at one time. Due to the limitations of short-term memory, designers should ensure users can simply employ recognition instead of recalling information across parts of the dialogue. Recognizing something is always easier than recall because recognition involves perceiving cues that help us reach into our vast memory and allowing relevant information to surface. For example, we often find the format of multiple choice questions easier than short answer questions on a test because it only requires us to recognize the answer rather than recall it from our memory.
  • Flexibility and efficiency of use. With increased use comes the demand for less interactions that allow faster navigation. This can be achieved by using abbreviations, function keys, hidden commands and macro facilities. Users should be able to customize or tailor the interface to suit their needs so that frequent actions can be achieved through more convenient means.
  • Aesthetic and minimalist design. Keep clutter to a minimum. All unnecessary information competes for the user's limited attentional resources, which could inhibit user’s memory retrieval of relevant information. Therefore, the display must be reduced to only the necessary components for the current tasks, whilst providing clearly visible and unambiguous means of navigating to other content.
  • Help users recognize, diagnose and recover from errors. Designers should assume users are unable to understand technical terminology, therefore, error messages should almost always be expressed in plain language to ensure nothing gets lost in translation.
  • Help and documentation. Ideally, we want users to navigate the system without having to resort to documentation. However, depending on the type of solution, documentation may be necessary. When users require help, ensure it is easily located, specific to the task at hand and worded in a way that will guide them through the necessary steps towards a solution to the issue they are facing.

Google Inc., the multibillion-dollar technology company, certainly produces designs that reflect the above heuristics. Jon Wiley, the head designer of Google Search in 2012 once said:

“When I think of design and creating great user experiences, I generally think of it in terms of three things: usability, utility and desirability.”

Nielsen and Molich’s 10 user interface guidelines cover these three key components of user experience quite nicely, which means you can likely improve the user experience of your designs by following these guidelines!

Learn How Adobe Integrates Nielsen and Molich's Ten User Interface Design Guidelines

Adobe Systems Incorporated, the large North American computer software company, is a great example of how designs reflecting Nielsen and Molich’s ten user interface guidelines can lead to success for a company. One of their most popular products, Adobe Photoshop, which is a raster graphics editor exhibits the characteristics of a well designed user interface that reflects these guidelines.

We will take a closer look at how Adobe Photoshop reflects each of these guidelines in order to inspire you to improve the usability, utility, and desirability of your own designs by incorporating the 10 rules of thumb into your own work.

1. Visibility of System Status

Photoshop does a great job of letting the user know what’s happening with the program by visually showing the user what their actions have led to whenever possible. For example, when users move layers around in the Layers palette, they can visually see the layer being represented as physically dragged within the space.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

The cursor graphic goes from representing an open-hand to a gripped hand when the user drags a layer around within the Layers palette. This makes it’s easy to instantly understand the system status. Additionally, Adobe’s choice of using a ‘hand’ is a great example of the second guideline where the system matches the real world.

2. System Match to the Real World

An example of Photoshop mimicking the real world in terms and representations that their target users would understand, is where they design the information structure and terminology to mirror the same wording we would use in the world of photography or print media. Familiar concepts and terms like RGB, Hue/Saturation/Brightness and CMYK are used to represent color, while various tools like the dodge tool and the burn tool mimics a traditional darkroom technique for photographs.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Photoshop’s Dodge Tool and Burn Tool mimics a traditional darkroom technique for photographs

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Photoshop utilizes the term, “Exposure”, as commonly used in the world of photography.

3. User Control and Freedom

Photoshop is very good at providing users with control every step of the way. As the user makes changes to an image or adds various artistic effects, they are able to quickly and easily take a step backwards if they make an error, for instance.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

The users are in control as they can take a Step Backward or Step Forward under the Edit menu, or alternatively they can use Photoshop’s keyboard shortcuts like Alt+Ctrl+Z, for example.

4. Consistency and Standards

Photoshop maintains a standard layout and look & feel when it comes to the menu bar. They also utilize commonly known terminology such as “New…”, “Open…”, “Save As…”, etc.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

The File menu in Photoshop displays a variety of highly familiar options.

5. Error Prevention

To prevent users from making errors, Photoshop provides a brief description or label of the tools when a user hovers over it to help make sure users are using the proper tool for the task at hand.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

The user hovers over the eraser icon and Photoshop displays the “Eraser Tool” label.

6. Recognition rather than Recall

Whether it be making a selection from the artistic filters menu, or opening a new image file, Photoshop provides a sample view for users to make the right choice. This allows for the user to visually recognize what they’re looking for instead of having to recall the name or typing it in to search for it. Perhaps you have encountered other photo editing programs which ask you to recall and type the name of the file you want to work on. This can indeed be really difficult to recall as it is often something to the effect of: 29412_09342.JPG.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

The user is able to visually recognize the sunset image by its thumbnail and select it.

7. Flexibility and Efficiency of Use

One of the many reasons for frequent users to love Photoshop is for its flexibility and efficiency. Users are able to utilize its flexibility by organizing and adding to their Workspace, as well as making things more efficient by saving it for future use.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Photoshop gives frequent users the ability to save their preferred workspace-setup.

8. Aesthetic and Minimalist Design

The toolbar in Photoshop only displays the icons and is neatly tucked to the side to help keep clutter to a minimum, and maintain a minimalist aesthetic.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

The Photoshop toolbar is minimalist and avoids clutter by representing the tools with icons only.

9. Help Users Recognize, Diagnose and Recover from Errors

Whenever there is an error, Photoshop provides dialogue that lets the user know what went wrong and how to fix it.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

In this error message for the user’s misuse of the clone stamp, Photoshop explains what went wrong, the reason why and how the user should proceed from there.

10. Help and documentation

Help and documentation can be accessed easily via the main menu bar. From there, you can find a wide variety of help topics and tutorials on how to make full use of the program.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

The window displays information on how to create rollovers in the context of web graphics. The user is also able to see a list of topics on the side menu.

10 Steps to Improve Usability, Utility, and Desirability by Implementing Nielsen and Molich’s User Interface Design Guidelines

As a designer, you should have the ability to critique the designs of your own as well as the work of others with well supported reasoning. Applying Nielsen and Molich’s 10 rules of thumb in evaluating interface design will help you recognize any potential issues as well as guide you and your team in creating better experiences for your users. Here’s a worksheet for you to practice with as you learn the skill of recognizing whether or not these rules have been applied and when these rules have been violated. Finally, it’s time to improve the website or app by further implementing the 10 guidelines.

Download PDF here.

The Take Away

When you follow Nielsen and Molich’s 10 user interface guidelines you will design with usability, utility and desirability in mind. Just as the designers of successful companies like Apple, Google, and Adobe, you’ll be able to support your design decisions with well researched heuristics and be confident in creating designs that are both usable and beautiful. To practice recognizing these 10 rules of thumb, go ahead and work through the exercise outlined in the attached file from the above section.

Where To Learn More

To view ‘A Usability Study of Adobe Photoshop’ please see:

http://courses.cs.washington.edu/courses/cse595/98...

To find more information on Jakob Nielsen’s ‘Enhancing the Explanatory Power of Usability Heuristics’ please see:

https://static.aminer.org/pdf/PDF/000/089/679/enha...

To view more information on Jon Wiley’s design thinking please see:

http://www.fastcodesign.com/1671425/how-googles-de...

References & Where to Learn More

Hero Image: Author/Copyright holder: Barry Schwartz. Flickr. Copyright terms and license: CC BY-NC 2.0

Course: UI Design Patterns for Successful Software:
https://www.interaction-design.org/courses/ui-design-patterns-for-successful-software

Show full article Show collapsed article

Learn more about User Interface (UI) Design

All literature

User Interface Design Adaptation

Ch 39: User Interface Design Adaptation

This chapter aims to help user interface designers and developers understand the issues involved in multi-device interactive applications, which can be accessed through mobile and stationary devices, even exploiting different interaction modalities (graphical, vocal, etc.). The chapter provides a discussion of the possible solutions in terms of ...

Book chapter
10 Simple Ideas to Get Your Creative Juices Flowing

10 Simple Ideas to Get Your Creative Juices Flowing

Writers deal with writer’s block and designer’s often find that they get stuck for ideas too. There’s no shame in it but learning to smash through the block is a necessary professional skill. Time waits for no-one and when there’s a deadline looming… you’ve got to pull something out of the bag. There are better techniques for getting creative t...

  • 208 shares
  • 3 weeks ago
A Very Useful Work of Fiction – Mental Models in Design

A Very Useful Work of Fiction – Mental Models in Design

Mental models play an important role in Human-Computer Interaction (HCI) and interaction design. They relate to the way that a user perceives the world around them and are based in belief as opposed to being a factual concept. However, if you can understand your users' mental models, you can simulate these models within your designs to make them...

  • 191 shares
  • 1 week ago
Show Me the Way to Go Anywhere – Navigation for Mobile Applications

Show Me the Way to Go Anywhere – Navigation for Mobile Applications

It doesn’t matter how great the functions and content, that your mobile apps serve, are – if your user can’t find them, they aren’t going to contribute to a great user experience. Navigation on the mobile web comes with challenges thanks to the reduced screen real estate available on smartphones. However, there are some good best practice guidel...

  • 439 shares
  • 3 months ago
Horror Vacui: The Fear of Emptiness

Horror Vacui: The Fear of Emptiness

Our next article is all about a scary-looking subject in that its title may look ominous. Fear not! It covers a concept that will seem familiarvery quickly. Of course, having a better understanding of it will let you work its antidote into your designs with confidence. Horror Vacui — the fear of not filling upHorror Vacui (a Latin-derived term)...

  • 189 shares
  • 1 month ago
Dressing Up Your UI with Colors That Fit

Dressing Up Your UI with Colors That Fit

As designers, we have a powerful ally in color. It can let us work towards a number of different goals. You can use it to reinforce or highlight an idea, to provoke an emotional response from the user or to draw attention to a specific part of your website. This is, of course, in addition to making your website aesthetically pleasing to the eye....

  • 183 shares
  • 1 month ago
We Think Therefore It Is – Conceptual Modelling for Mobile Applications

We Think Therefore It Is – Conceptual Modelling for Mobile Applications

A conceptual model is the mental model that people carry of how something should be done. Conceptual modelling can be carried out at a very early point in the design cycle so that there is a basic understanding of how users conceive tasks and this can then be brought to bear on UI design. The ability to sketch conceptual models quickly and easil...

  • 481 shares
  • 3 months ago
Make it Easy on the User: Designing for Discoverability within Mobile Apps

Make it Easy on the User: Designing for Discoverability within Mobile Apps

Discoverability sometimes also referred to as “learnability” is the ease at which users can find new features or functions with an app and learn to use the things that they find. While this has always been an important part of user experience design – it becomes even more important in the mobile design environment where limitations on screen rea...

  • 508 shares
  • 1 year ago
Tell Me About Me – User Profiles for Mobile Applications

Tell Me About Me – User Profiles for Mobile Applications

With the move away from websites to applications on mobile devices; there’s a need for many apps to create, maintain and manage user profiles so that users can effectively interact with the app and so that the app’s creators can collect and analyse data useful to their businesses. There is no “one size fits all” method of building user profile i...

  • 387 shares
  • 3 months ago
The Self-Generation Effect: How to Create More Memorable User Interfaces

The Self-Generation Effect: How to Create More Memorable User Interfaces

Learn how to improve user experience by incorporating the self-generation effect in your user interface design. The self-generation effect is prompted in many of the customization tools built into some of the most widely-used products out there. This phenomenon provides users with a sense of control as they customize their own tools and function...

  • 507 shares
  • 7 months ago
My Head Hurts! Cognitive Friction in the Age of Mobile

My Head Hurts! Cognitive Friction in the Age of Mobile

There’s nothing more annoying than when things don’t function the way we expect them to. When we develop user interfaces (UI), we try to relate it to the “real world” – think the floppy disk for “save” in most applications. Why? Because we take our cues in the digital world from ones we’ve already developed in our ordinary lives. Cognitive frict...

  • 332 shares
  • 3 months ago
Emphasis: Setting up the focal point of your design

Emphasis: Setting up the focal point of your design

Now that we’ve seen, understood, and appreciated the value of the Gestalt principles, let’s build on our grasp of those and explore something else. It’s important to have a good grounding in the Gestalt laws before moving on, because, from knowing how to apply those, we can improve our designs even further, using emphasis. [check the Where to Le...

  • 360 shares
  • 2 years ago
Fitts’ Law: Tracking users’ clicks

Fitts’ Law: Tracking users’ clicks

We’re now going to look at a subject that’s especially relevant to web design. Specifically, we’ll see how the user’s eye makes sense of web pages according to where it expects to find elements comfortably. Understanding Fitts’ Law (sometimes called Fitts’s Law) will give you a key to unlock another dimension in designing.It can be very helpful ...

  • 235 shares
  • 6 months ago
Help! I need some help! Not just any help… Help in mobile applications

Help! I need some help! Not just any help… Help in mobile applications

When users start getting to grips with your mobile app they’re going to need a little help from time-to-time. The good news is that there are standard design patterns which can be employed to reduce design time for help in mobile apps. There are also some useful guidelines that can be employed to improve the UX of help in general. Familiarizing ...

  • 438 shares
  • 7 months ago
Using Design Patterns - Doing It Again Without The Hard Work

Using Design Patterns - Doing It Again Without The Hard Work

Design is hard work and focusing on solving user and customer problems is the crux of that work. If you can find a tool that keeps that focus whilst eliminating some of the hard work then it’s clearly advantageous to use that tool. That’s where design patterns come in. They save designers from having to reinvent the wheel in their design efforts...

  • 462 shares
  • 10 months ago
5 Steps to Creating Your Freelance Design Brand

5 Steps to Creating Your Freelance Design Brand

This might sound like teaching your grandmother to suck eggs but in our experience a lot of incredibly talented designers don’t spend very much time building their personal brand. Instead they focus all their efforts on proactive marketing when they need new clients. The biggest advantage of building a brand is that it helps new clients find you...

  • 300 shares
  • 2 years ago
Navigating the Maze of Mobile Apps – Design for Mobile App Search

Navigating the Maze of Mobile Apps – Design for Mobile App Search

In the digital age, people have come to rely on search as one of, if not THE, foremost tools for navigation in applications and online. Integrating search into mobile applications can be straightforward and users will thank you for it. The mobile user experience relies just as much on effective search as the desktop one.Thanks to the efficiency ...

  • 459 shares
  • 9 months ago
What Skills Does a Newly Qualified Designer Need?

What Skills Does a Newly Qualified Designer Need?

If you’re going to graduate this year or if you’re in your first job; you’ll be wondering what you can do to improve your chances of progressing on to or up the career ladder. So what skills do you need? And is the job all about your design skills?Become a Problem SolverUX designers should know this by now but many other design professionals wil...

  • 455 shares
  • 2 years ago
Getting Lost and Found – Maps and the Mobile User Experience

Getting Lost and Found – Maps and the Mobile User Experience

The ability to harness GPS data and map data on smartphone platforms offers designers a chance to enhance the user experience of their products. However, in order for maps to deliver better experiences for users – it’s important to integrate these features with UX in mind. There are some sensible rules that can be used to increase your chances o...

  • 380 shares
  • 7 months ago
UX Tips for Better Textual Navigation

UX Tips for Better Textual Navigation

Helping your users find their way around your website is a vital part of delivering a strong user experience. It can be somewhat challenging to get this right. Well formulated labels, the textual element of navigation, can make navigation very easy and badly formulated labels can send your users elsewhere. Where to Begin?The easiest place to be...

  • 365 shares
  • 2 years ago