User Interface (UI) Design Patterns User Experience (UX) topic overview/definition

What are User Interface (UI) Design Patterns?

User interface design patterns are descriptions of best practices within user interface design. They are general, reusable solutions to commonly occurring problems. As such, they form the backbone of “technical support.” However, as design patterns can be applied to a wide variety of instances, designers should adapt them to the specific context of use within each design project.

A UI design pattern usually consists of these elements:

  • Problem: The usability problem faced by the user when using the system.
  • Context of use: The situation (in terms of the tasks, users, and context of use) giving rise to the usability problem.
  • Principle: A pattern is usually based on one or more design principles, such as error management or the consistency of user guidance.
  • Solution: A proven solution to the problem. A solution describes only the core of the problem, and the designer has the freedom to implement it in many ways.
  • Why: How and why the pattern actually works, including an analysis of how it may affect certain attributes of usability.
  • Examples: Each example shows how the pattern has been successfully applied in a real-life system. This is often accompanied by a screenshot and short description.
  • Implementation: Some patterns provide implementation details.

A specific category of design patterns is termed “dark patterns.” These are patterns that suggest how a designer can persuade users to perform certain actions. Such patterns are called “dark” because they typically feature in e-commerce in situations where designers seek to trick people into spending more money or providing personal information. responsible application of these patterns requires designers to have an ethical and empathetic awareness of user concerns. This is particularly because user trust and feedback can make or break an organization’s reputation overnight

Literature on User Interface (UI) Design Patterns

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

Featured article

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 and allow them to keep focus on solving problems instead.

A design pattern is simply a reusable idea, design or code structure that has already been optimized for the purpose it is intended for. It is a very common approach in software design and development (though the approach for a software design pattern must be language agnostic and thus implementable on any development project) and in more visual design approaches too (such as UI design or help screen design).

What is a Design Pattern?

Petrula Vrontikis, the leading designer and design educator says; “Practice safe design: use a concept.” Design patterns are concepts which have been fully fleshed out and are applicable to more than one project.


Author/Copyright holder: Aaron Rotenberg. Copyright terms and licence: Public Domain.

An example of the use of design patterns in software engineering.

What Goes Into a Design Pattern?

How long is a piece of string? It’s one of those questions. Design patterns can be used for so many different applications that there’s no standard for developing a design pattern. In general, the best design patterns act as guides to implementation in any circumstance that the concept may be needed in. That means that software patterns should not be based on code but rather on principles which can be implemented in any language. Graphic design patterns should be detailed enough that they can be quickly adapted to another project but not so detailed that they constrain rapid adaption. Learning design patterns should be high-level enough that they can be moved from a course on software development to a course on leadership without endless reiteration and so on….


Author/Copyright holder: Unknown. Copyright terms and licence: Unknown

There are no hard and fast rules for design patterns but to be useful they are often compiled into pattern libraries like this one.

Creating Design Patterns

While there are no hard and fast rules for what goes into a design pattern – if you are going to create design patterns within your business you should:

  • Define what the design pattern is to be used for and clearly label that use on the pattern
  • Ensure that you version control design patterns so that latest revisions of a pattern are always preferred to earlier versions
  • Store design patterns somewhere that they can easily be accessed by all relevant parties – that means either in a physical location which can be accessed by all or in a server location that can be accessed by everyone – design patterns are of no value if they cannot be gotten to when they are needed
  • Regularly review design patterns for their utility – are they still a solution to a regularly occurring problem or can they be ditched? For example if you’ve made the move to social media logins for apps and websites – old school registration forms might need to be removed from your design pattern library.


Author/Copyright holder: Giacomo Ritucci. Copyright terms and licence: CC BY-SA 3.0

Design patterns can have many uses. Here’s an abstract of a factory’s design pattern.

The Advantages of Design Patterns

Design patterns are useful in terms of:

  • Saving time – a pre-built solution to a regularly occurring problem means that there’s no need to reinvent the wheel, you can pull the solution off the shelf and implement it
  • Saving money – when you save time, you also save money in a corporate environment

You may also find that you can source design patterns (for free or at a small cost) from other organizations or online. This can reduce the effort required to create the patterns themselves.

The Disadvantages of Design Patterns

Design patterns may also cause issues when their use is not carefully considered including:

  • They prevent proper consideration of a problem. Sometimes a problem is not what it appears to be – reaching for a pre-built solution to the wrong problem can add time and cost more money to design and development lifecycles.
  • They may be irrelevant in certain circumstances. Software design patterns, in particular, may be irrelevant if the style of programming language is different to the previous style that the pattern was developed for. There are many different ways of handling things in different software languages and even when a language agnostic approach is employed; it can be difficult to capture these differences meaningfully in a pattern.
  • They may introduce inefficiency into the final product or solution. What was the best solution last year is not guaranteed to be the best solution this year. Even if the pattern still solves the problem – it may not solve it in the best way possible.
  • They require management. In order to be useful design patterns need to be created carefully (which costs time and money) and stored in a way so that they are accessible to everyone who needs them. In addition you may need to educate people on the use and creation of these patterns.


Author/Copyright holder: RegisFrey. Copyright terms and licence: Public Domain.

An example of a simple UI design pattern – these can rapidly become much more complex and valuable as needed.

The Take Away

Design patterns offer an “off the shelf” approach to solving recurring problems in design. They can be very effective in terms of saving time and money on design projects. On the flip side, if their use is not carefully considered they can actually impede the delivery of high quality design projects. It is important that if patterns are to be used that they are created carefully for reuse and that they can be accessed by anyone who needs them easily.

Resources

Wanting to create some software design patterns? Here’s a good walkthrough for you - http://code.tutsplus.com/articles/a-beginners-guide-to-design-patterns--net-12752

You can find some excellent examples of UI design patterns here - https://www.smashingmagazine.com/2009/06/10-ui-design-patterns-you-should-be-paying-attention-to/
Show full article Show collapsed article

Learn more about User Interface (UI) Design Patterns

Take a deep dive into User Interface (UI) Design Patterns 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

Interaction Design Patterns

Ch 41: Interaction Design Patterns

An interaction design (ID) pattern is a general repeatable solution to a commonly-occurring usability problem in interface design or interaction design. An ID pattern usually consists of the following elements: Problem: Problems are related to the usage of the system and are relevant to the user or any other stakeholder that is interested i...

Book chapter