User Interface (UI) Design

User Experience (UX) topic overview/definition

87 shares
53
27
7

What is User Interface (UI) Design?

User interface (UI) design is the design of user interfaces for software or machines, such as the look of a mobile app, with a focus on ease of use and pleasurability for the user. UI design usually refers to the design of graphical user interfaces—but can also refer to others, such as natural and voice user interfaces.

Since software is intangible, the only way a user can control or interact with it is through a designed user interface. A well-designed user interface creates a user experience that the designer intended and/or a user experience that the user appreciates.

Many user interfaces are designed with a focus on usability and efficiency. Users should be able to achieve their goals as efficiently as possible, without focusing too much on the user interface itself. In that sense, a well-designed user interface becomes effectively invisible to those using it. In other words, they interact directly with the ‘reality’ the design portrays without reckoning on the point that, for example, thumbing button icons through the glass screens of their handheld devices is responsible for producing changes in what they see. However, usability and efficiency might not be the only measure of a well-designed user interface; a user interface might be designed to create a fun and pleasurable experience for users instead (e.g., in games).

At the other end of the spectrum, designers can—unethically—deliberately design user interfaces that are confusing—in order to trick users into purchasing or signing up for things they might not be interested in. These user interfaces are known as dark patterns. Examples of dark patterns include add-ons that are included by default (e.g., additional luggage allowance when booking air tickets), and intentionally complicated processes meant to deter users (e.g., long and confusing pages to unsubscribe from email newsletters).

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

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

Show full article Show collapsed article

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

10 Great Sites for UI Design Patterns

10 Great Sites for UI Design Patterns

You don’t want to spend your whole life redesigning the wheel do you? No, neither do we. If you are looking for a design that solves a problem that has been solved inside a different application before; then the template for your wheel is probably already out there. That’s a design pattern to you and me. We’ve put together a list of some of the...

  • 134 shares
  • 1 week ago
Shneiderman’s Eight Golden Rules Will Help You Design Better Interfaces

Shneiderman’s Eight Golden Rules Will Help You Design Better Interfaces

Follow Ben Shneiderman’s 'Eight Golden Rules of Interface Design' if you want to design great, productive and frustration-free user interfaces. Apple, Google and Microsoft are among some of the highly successful companies whose well-designed products reflect Shneiderman’s rules. The characteristics derived from Shneiderman’s golden rules can be ...

  • 461 shares
  • 3 months ago
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 incorpo...

  • 308 shares
  • 1 month ago
Adaptive vs. Responsive Design

Adaptive vs. Responsive Design

The differences between responsive and adaptive design approaches spotlight important options for us as web and app designers. Choosing with insight can empower you to plan and execute your designs with better aim, purpose and results.With the pervasiveness and diversity of mobile devices, as designers we need to cater to the variety of screen s...

  • 136 shares
  • 1 month ago
Principle of Consistency and Standards in User Interface Design

Principle of Consistency and Standards in User Interface Design

Learn to design with consistency and standards in mind and understand the reasons why they’re important to incorporate them into your work. Derived from Jakob Nielsen and Rolf Molich’s Ten User Interface (UI) Guidelines, ‘Consistency and Standards’ are evident in many of the widely-used products created by some of the most successful companies. ...

  • 214 shares
  • 2 days ago
Recalling Color Theory Keywords: a way to refresh your memories!

Recalling Color Theory Keywords: a way to refresh your memories!

Choosing the best combination of colors for an interactive design layout is not, as it may appear, a guessing game. Knowing which ones to use will save you time (and headaches). Getting it right will also keep your users connected.Since the early days of art and design, the use of color has followed many rules and guidelines, which are collectiv...

  • 358 shares
  • 1 month ago
9 Free to Use Wireframing Tools

9 Free to Use Wireframing Tools

We all know that wireframing is a great way to test ideas in our UX projects but we also know that there are a ton of wireframing tools available to do it with. It can be hard to choose the right tool but one of the easiest ways to get an idea – is to get hands on with the tool and have a play with it. The wireframing tools in this article are ...

  • 136 shares
  • 1 month ago
The Grid System: Building a Solid Design Layout

The Grid System: Building a Solid Design Layout

Now that we’ve seen some grids at work in the Rule of Thirds article, let’s examine them a little more deeply. As a concept that deals so fundamentally with the fabric and background of our work as designers, it’s easy to overlook the power of grids and think more about the elements we want to create. Many traditional artists still paint their m...

  • 178 shares
  • 2 days ago
Skeuomorphism is dead, long live skeuomorphism

Skeuomorphism is dead, long live skeuomorphism

Skeuomorphism has been a very useful concept in design, then it became the most hated concept in design, and then it came back from the dead. Understanding skeuomorphism lets designers help users through learning curves and make decisions as to whether skeuomorphism still serves a purpose today.Skeuomorphism is where an object in software mimics...

  • 358 shares
  • 7 months ago
Repetition, Pattern, and Rhythm

Repetition, Pattern, and Rhythm

Let’s look at three subjects that, at first glance, may strike you as being incredibly basic and self-explanatory. However, although they may seem like they should need no introduction, we should study them. By understanding these concepts, you’ll be able to apply them more effectively to captivate your users’ attention while making your designs...

  • 217 shares
  • 1 month ago
Google’s Material Design - Android Design Language

Google’s Material Design - Android Design Language

Material Design (originally referred to as and codenamed “Quantum Paper”) was developed by Google and is a design language used for Android devices. The idea, according to Matias Duarte Vice President of Design for Google, is to provide a design language which mimics the feel of pen and paper. Material design offers the user physical edges and s...

  • 286 shares
  • 2 months ago
Don’t Make Me Think – Key Learning Points for UX Design for the Web

Don’t Make Me Think – Key Learning Points for UX Design for the Web

Don’t Make Me Think is the title of a book by the HCI and Usability engineer Steve Krug. It teaches UX designers how to deliver great user experiences in a very simple and accessible way. Since its release in the year 2000 it has become one of the defining texts in the industry and an invaluable guide to UX professionals around the world. Don’t...

  • 331 shares
  • 1 month ago
Do I Need a Degree to Work In User Experience?

Do I Need a Degree to Work In User Experience?

This is a question that, in slightly different forms, gets asked a lot by those considering a UX design career. The question is a simple one but the answer..? Well, that’s a bit more complicated. A lot depends on you and your approach to life and your career. So let’s take a look at the benefits of a degree and the alternative paths you might pr...

  • 241 shares
  • 2 months ago
Needs Before Wants in User Experiences – Maslow and the Hierarchy of Needs

Needs Before Wants in User Experiences – Maslow and the Hierarchy of Needs

It has been established that users are more likely to choose products that meet their needs than ones that meet their wants. Abraham Maslow developed a deep understanding of human needs and how they could be met. You can use Maslow’s Hierarchy of Needs in a design context to deliver more powerful user experiences that meet user needs rather than...

  • 555 shares
  • 1 year ago
The power of white space

The power of white space

We want to show you a tool so vital that it may amaze you as a designer. It’s as underrated as silence between musical notes. However, it’s powerful enough to mean keeping people on your page – survival, in other words. Many elements form the layout and structure of an interactive design. Often neglected, one of the most vital is white space (o...

  • 175 shares
  • 3 weeks ago
Flat Design – An Introduction

Flat Design – An Introduction

With the dawn of personal computing skeuomorphic design became important to introduce users, unfamiliar with technology, to new concepts. Skeuomorphism takes a simple approach – it creates lifelike affordances in user interfaces (UI) that the user can relate to from their real lives. Thus when you delete a file – it goes in the trash can on scre...

  • 183 shares
  • 3 months ago
The Golden Ratio - Principles of form and layout

The Golden Ratio - Principles of form and layout

Now, we’re going to look at a subject that comes directly from mathematics and that we can also find all around us – the golden ratio. Don’t worry; we’re not going back into the classroom for long. We will examine what this concept is and exactly how much it is a fundamental part of making designs pleasing to the user’s eye. The golden ratio’...

  • 339 shares
  • 3 months ago
Design iteration brings powerful results. So, do it again designer!

Design iteration brings powerful results. So, do it again designer!

The iterative design process is a simple concept. Once, through user research, you have identified a user need and have generated ideas to meet that need, you develop a prototype. Then you test the prototype to see whether it meets the need in the best possible way. Then you take what you learned from testing and amend the design. Following that...

  • 296 shares
  • 4 weeks ago
Visual Hierarchy: Organizing content to follow natural eye movement patterns

Visual Hierarchy: Organizing content to follow natural eye movement patterns

Let’s look at a topic that deals with, oddly enough, how we look at designs. Once you understand how the human eye processes these, you’ll find yourself better able to arrange your elements more effectively. Content in any digital page layout will follow a specific hierarchy. Headers appear above body text. Menus go at the top, bottom, left, or...

  • 416 shares
  • 1 month ago
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