User Interface (UI) Design Patterns

User Experience (UX) topic overview/definition

83 shares
50
26
7

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

Center Stage – Help the User Focus on What’s Important

Center Stage – Help the User Focus on What’s Important

An important task for you as a designer is to help the user carry out tasks as efficiently as possible. Software companies such as Adobe and Microsoft are experts at this. They frequently use a design pattern called ‘center stage’ to help the user focus on what’s important. Center stage is one of the design elements involved in establishing visu...

  • 354 shares
  • 1 year ago
Support Users with Small Clues in the Input Hints Design Pattern

Support Users with Small Clues in the Input Hints Design Pattern

Online forms with input fields should not make you feel like you’re back in the fifth grade, taking a pop quiz and being totally unready for it. Rather than ‘grilling’ your users and leaving them feeling inadequate when they don’t know the correct answer, you will want to implement designs that whisper helpful hints softly in their ears. Perhaps...

  • 461 shares
  • 8 months ago
Help Users Retrace Their Steps with Breadcrumbs

Help Users Retrace Their Steps with Breadcrumbs

Do you remember the fairy tale about Hansel and Gretel, a small boy and girl trying to retrace their steps in the forest? They only wanted to find their way back home, and so do your users. They should feel free to explore all the options and information on your website, without losing track of where they are and how to return to where they came...

  • 318 shares
  • 1 year ago
Use Sign-in Reminders to Support Extended Functionalities

Use Sign-in Reminders to Support Extended Functionalities

Online services such as LinkedIn and Craigslist want to show users all of the functionalities they offer. It helps in getting first-time visitors interested and convincing them to engage and contribute. Still, in order for most of these functionalities to work, a user needs to create an account and log in. This allows the service to become more ...

  • 400 shares
  • 4 months ago
Speed up the User’s Process by Adding an Event Calendar

Speed up the User’s Process by Adding an Event Calendar

Users are impatient creatures: anything that may seem like an inefficient course of action to achieve the goals they have they will regard as suboptimal and take a dim view of. Booking.com and other large companies offering flights or accommodations know the importance of getting this small section of a complex user interface just right. Stand o...

  • 439 shares
  • 1 year ago
How to Use Responsive Enabling to Simplify Tasks

How to Use Responsive Enabling to Simplify Tasks

Have you ever felt overwhelmed when performing a task such as registering an account or completing an online purchase? Ever felt puzzled when it wasn’t clear which steps to take? Nearly every website and application supports tasks that have different stages to go through. From adjusting your MAC OS X system preferences, to registering an online ...

  • 315 shares
  • 9 months ago
Attract Users’ Attention with Update Alerts

Attract Users’ Attention with Update Alerts

Updates can take many different forms. The updates on the activities of your favorite contacts in a social media application are very different from the updates that the same company behind the social platform implements in its terms and conditions. The first are updates that you want—or even crave—and will search for far more actively than the ...

  • 260 shares
  • 10 months ago
How to Use Movable Pieces to Support Multitasking

How to Use Movable Pieces to Support Multitasking

Now, our guess is that you’re quite an experienced computer user. Perhaps Linux is a bridge too far, but using Windows or Mac OS X will not have many secrets anymore. We can imagine you’re multitasking right now, reading this article, and keeping an eye on your incoming email at the same time. From a design perspective, you’re an expert user, ad...

  • 322 shares
  • 10 months ago
Help Users Skim Contents with Titled Sections

Help Users Skim Contents with Titled Sections

Text-heavy websites, such as those of all the major newspapers that have embraced the web as an essential medium for the future, know the importance of using titled sections to reel the readers in. There’s a perfect art to the craft, and it stems from an exact science concerning how human beings process information. So, learn from The New York T...

  • 292 shares
  • 7 months ago
How to Implement a Forgiving Format to Accommodate Users’ Mistakes

How to Implement a Forgiving Format to Accommodate Users’ Mistakes

Users are only human, and, consequently, they make mistakes. For their errors not to lead to poor experiences, it’s your job as a designer to help them. Discover the two roads that lead to error-resistant user interfaces: correcting mistakes and providing multiple approaches to a problem. Together, these options form a highly useful design patte...

  • 429 shares
  • 9 months ago
Create a Quick Overview of Opinions by Implementing Starred Reviews

Create a Quick Overview of Opinions by Implementing Starred Reviews

Online shops have the advantage of giving you access to all types of products or services, without the restrictions of your location or local shop’s assortment. The downside of online shopping can be that you drown in the vastness of available choices. What you need so as to make confident decisions is an opinion you can rely on. That said, reme...

  • 399 shares
  • 10 months ago
Getting Users’ Long-Term Commitment with a Monthly Charge

Getting Users’ Long-Term Commitment with a Monthly Charge

There’s a trend which takes the use of products from companies such as Adobe and Microsoft from single-purchase goods owned by the consumer to monthly subscriptions. Unlike most dark patterns, this one does not necessarily trick users into agreeing with a system of recurring payments, but simply coerces or manipulates them instead. If they don’t...

  • 371 shares
  • 9 months ago
Harvest Users’ Information with Forced Registration

Harvest Users’ Information with Forced Registration

If a company knows you really well, they have more of an opportunity to make money. The second you register with any website, whether it is an online shop or a social platform, they can send you advertisements or even sell your information to other companies. If you’re truly interested in a long-term relationship with the offered services, that’...

  • 342 shares
  • 9 months ago
Increase Efficiency with the Imported Connections Design Pattern

Increase Efficiency with the Imported Connections Design Pattern

The times when telephone numbers were made up of five digits are long gone, and remembering your best friend’s number if she changes it has become almost impossible. And would you know your mom’s address by heart if she moved out of your childhood home a couple of years ago? Our world is super-connected, and we don’t have the mental capacities t...

  • 417 shares
  • 10 months ago
Sneaking Products into Users’ Shopping Baskets

Sneaking Products into Users’ Shopping Baskets

Like a naughty kid who wants the Oreo cookies you just told him he couldn’t have, dark pattern designers are masters at slipping things into your shopping basket without your knowledge. Here, we will show you how they do that, and get away with it. We will give you some examples that behave in ways you’ll instantly recognize from many of the pur...

  • 387 shares
  • 1 year ago
Reduce the Likelihood of Rejection with Implied Consent

Reduce the Likelihood of Rejection with Implied Consent

Implied consent is something you can use with the best intentions possible whenever you don’t want to disturb the users’ flow when they’re accomplishing a task. However, it’s still a little bit suspicious when you deliberately hide information, hoping your users will overlook it. Get some striking examples of both well-intended and darker design...

  • 419 shares
  • 10 months ago
Increase Revenues by Prioritizing Advertisements

Increase Revenues by Prioritizing Advertisements

Ever had an annoying pop-up offering you embarrassing physical-ability enhancers that you simply had no use, or stomach, for? With the prioritizing advertisements design pattern, this problem belongs to the past. Large companies such as Google and Facebook are experts at showing the right advertisements to the right people. And while, at first g...

  • 326 shares
  • 11 months ago