User Interface (UI) Design Patterns

User Experience (UX) topic overview/definition

77 shares
47
24
6

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

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...

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

  • 487 shares
  • 8 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 ...

  • 394 shares
  • 3 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...

  • 436 shares
  • 6 months ago
Split the Contents of a Website with the Pagination Design Pattern

Split the Contents of a Website with the Pagination Design Pattern

The pagination design pattern is widely used in websites that open up a lot of content to users. From search engines such as Google and Firefox, to e-commerce sites such as Amazon and Asos—the use of pagination is very, very broad. And although it seems straightforward, implementing pagination in the right way has some very specific points that ...

  • 458 shares
  • 6 months ago
Implement Global Navigation to Improve Website Usability

Implement Global Navigation to Improve Website Usability

When you’re designing a new website, application, or other product, you always start with the global idea and structure before addressing more detailed issues. Designing the navigation on a website is no different. Getting the global navigation right is the first step in designing a great user experience. Get to know all about the Global Navigat...

  • 316 shares
  • 2 months ago
Using Color to Confuse and to Prevent Unwanted Actions

Using Color to Confuse and to Prevent Unwanted Actions

Color can be used to guide someone in the right direction to accomplish a task effectively and efficiently. Just think about a bright red “Read More” button on a white background, one that directs you to a full article on your favorite design guru. Even so, used by designers who focus more on the needs of the company than on those of the target ...

  • 403 shares
  • 6 months ago
Design Patterns for Fluid Navigation – How to Use Inline Linking

Design Patterns for Fluid Navigation – How to Use Inline Linking

When you’re designing a website for an online newspaper, your users will probably want to read some background information relating to a new government policy, a new whistle-blower, or any other word or phrase they don’t have all of the information on yet. When you’re designing something completely different, such as a complex online tax return ...

  • 377 shares
  • 6 months ago
Search for Items with Scrolling Lists, Archive Lists or List Inlays

Search for Items with Scrolling Lists, Archive Lists or List Inlays

Even if you’re not the to-do list maniac like some of us, lists are a great way to deliver content to your users. A list allows them to navigate quickly to the section of content that is most relevant to them, while maintaining an overview of the entire body of information that is accessible. It also helps them understand the logic of the conten...

  • 488 shares
  • 9 months ago
Display Achievements to Encourage Website Usage

Display Achievements to Encourage Website Usage

You are doing so great; you’re top of the class! Don’t you just love to hear a compliment like this? We’re all human, and this is the way we are wired. We thrive on accomplishment. Whether you want to be better than everyone else or simply be better than your former self, knowing your achievements is essential for keeping on doing whatever you a...

  • 273 shares
  • 6 months ago
Giving Your Users Freedom with Editable Input Fields

Giving Your Users Freedom with Editable Input Fields

When you want to purchase something on the internet, no matter what it is, or which e-commerce service you use, you don’t want to encounter any restrictions. Just imagine what your user experience would be like if a web shop presented you with a limited set of options to choose from when asking for your contact details. And what would you say if...

  • 267 shares
  • 1 month ago
Increase the User’s Sense of Control with the Refined Search Design Pattern

Increase the User’s Sense of Control with the Refined Search Design Pattern

Searching for a particular piece of content online can be just as challenging as going to a supermarket and looking for a specific type of food coloring for a rainbow cake you’re planning to bake for your nephew’s birthday. Imagine the time it would save when you could narrow the search actions down to a single category. In this example, it woul...

  • 462 shares
  • 6 months ago
How to Implement Sitemap Footers to Keep Users Going

How to Implement Sitemap Footers to Keep Users Going

In your attempts to minimize the effort your users need for performing actions on the website you’re designing, you just might be overlooking one major opportunity: sitemap footers. You might think about footers as a page section where you can dump any links or contact information you couldn’t fit anywhere else. Allow us to convince you of a mor...

  • 303 shares
  • 3 months ago
Embrace the Mental Models of Users by Implementing Tabs

Embrace the Mental Models of Users by Implementing Tabs

Users of all ages will still remember the tabbed file folders people used to bring order into a vast amount of information and make it super simple to find what they were looking for. If you’re trying to design a good way to prevent your users from having to search for a needle in a haystack every time, the tabbed user interface is just what you...

  • 338 shares
  • 9 months ago
Display Contents the Classic Way with Dropdown Menus

Display Contents the Classic Way with Dropdown Menus

The dropdown menu goes all the way back to the Start menu of the most classic Microsoft Windows versions. Now, you can find it nearly everywhere: from newspaper websites to online shops, and from graphic design applications to text-editing software. It has helped users time and time again to access sections of content, and if you’re looking for ...

  • 316 shares
  • 10 months ago
Increase Competitiveness in Users with Leader Boards

Increase Competitiveness in Users with Leader Boards

We humans are competitive creatures, and creators of successful online games and sports applications use this knowledge to egg us on with leader boards. However, as a designer, you can apply leader boards in so many other situations to encourage users to engage more, or produce better output. Trust that no-one wants to finish last, however fun o...

  • 273 shares
  • 1 month ago
How to Apply Search Boxes to Increase Efficiency

How to Apply Search Boxes to Increase Efficiency

Have you ever felt overwhelmed with information while you were searching for something specific? Have you ever been lost in the haystack, looking for that one tiny needle? If your users are anything like you, they will sometimes feel overwhelmed or lost, too, unless you minimize their efforts by providing them with a search box. These may be sma...

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

  • 347 shares
  • 10 months ago
Two-Panel Selectors for Easy Access of Content

Two-Panel Selectors for Easy Access of Content

Some design patterns improve your life on a daily basis. But do you even notice these patterns? Two-panel selectors are used in nearly every email application and should therefore be very familiar to you. And their usefulness goes far beyond using email. It’s time to step back and revisit these with a designer’s eye. Here, we’ll take a look at w...

  • 361 shares
  • 7 months ago