User interface (UI) design patterns are reusable/recurring components that designers use to solve common problems in user interface design. For example, the breadcrumbs design pattern lets users retrace their steps. Designers can apply them to a broad range of cases but must adapt each to the specific context of use.
For many, UI design patterns can be difficult to implement correctly since the concept is so simple: collections of patterns that are aesthetically pleasing and functional. But if you treat them as just patterns, your sites can start to feel cookie cutter.
We’ll explain the different classifications of UI patterns and describe how to choose the right ones based on your needs.
The 4 Main Types of UI Design Patterns
Patterns are not website features that can just be cut and pasted into your design. A more accurate definition would be visual strategies for solving common usability problems. Furthermore, patterns are not pieces you stitch together to create an interface; instead, they are closer to foundational pieces on which you can build your customized site. UI design patterns aren’t templates, so they shouldn’t be treated as such unless you want a sterile feel to your website.
- Input and Output — These patterns deal with how the user interacts, or submits input, to the site, and likewise of how the site responds or submits feedback.
- Navigation — This helps guides the user around the site, ensuring they are properly oriented and know how to find their way if lost.
- Content Structuring — Is your content accessible and easy to access? These patterns help you organize your content so that your user can fully enjoy your site.
- Social Sharing — These are the patterns that allow, promote, and facilitate the sharing of your site on any social media venue you prefer.
The 3 Levels of UI Design Patterns
Patterns can further be classified by how they help a site, as seen in the above pyramid. Anders Toxboe, the designer at Benjamin Interactive in Copenhagen, theorizes that patterns can aid a site in three ways: implementation, flow, and context.
At the bottom of the pyramid are the elemental components of patterns, categorized as implementation.
As you can see in the below example from the Yelp Style Guide, these are the most direct and strict patterns, and the rules tend to where it is instructing a grey box and option is written dragging my button and then if it turns true testing output comes out, this is how we implement the design.
As explained in the free e-book Web UI Best Practices, a step above implementation patterns are patterns that assist the flow of the user experience. At this level, patterns become more advanced and are concerned with how they help the user move through the site to achieve their goals. Would a Jump-To or Sticky Navigation work better to help users access additional content? Given your target user and site genre, what’s the best way to receive input? In essence, these patterns are more flexible and customize your site to your specific needs.
Let’s take a look at examples below from Spotify –
User Problem: I want quick access to additional options or actions on the site, but I don’t want to feel paralyzed by too many choices.
UI Pattern Solution: Hide additional options in an expandable menu so they don’t clutter the main interface.
Patterns of context are specific to the type or genre of the site you choose. For instance, let’s say you’re building a site for a professional entertainer: you’ll need to include patterns like an event calendar, biography, and portfolio. If you’re making an e-commerce site, you won’t need an event calendar, but you won’t get very far without a checkout system. Now let’s look at a real example. The red bus requires a UI pattern for its booking form an advanced user input pattern because it’s in the bus booking system, business. Something this complex isn’t needed for a social site like Pinterest or Twitter.
What can be the 4 Steps to Using the Right UI Design Patterns-
Before you lay out the fine details of your web interface — how users to input data, how the site provides feedback, etc. — first you need to determine the visual hierarchy of your site.
Knowing the look and feel of your site will help you realize which patterns will work for you. Once that’s established, you can start the process of selecting UI patterns.
The selection process can be simplified into four basic steps:
- Determine the problems that need to be solved.
- Explore how others have solved the same problem.
- Examine the solution’s use on other sites.
- Detail the patterns of proper usage so you can recreate it.
The above process is focused on finding patterns, but how do you decide what patterns are right for you? Let’s look at an example which is elaborated on the process of the post about the topic, where illustrates the points through the example of a “ratings” style pattern used by Zomato:
1. Define the UX pattern — First and foremost, you should understand what the pattern does. The main functions of the rating pattern are to give users quick feedback, allow the user’s voice to be heard, and collect qualitative and quantitative user data.
2. Find the pattern used well — Search the web until you find a site that uses the pattern particularly well, in this case, Rotten Tomatoes. This can be used as a reference guide later.
3. List the problems the pattern solves — Similar to defining the main functions of a pattern, it’s important to know which problems they target. The rating pattern satisfies feedback, improves interactivity, and it gives the users’ opinions more weight, which they appreciate.
4. Know when to use the pattern — This goes back to our earlier discussion of UI patterns for context. A rating pattern is used when your product requires additional feedback, or when you want to expand on existing feedback like a written review — but it wouldn’t make sense on a journalistic blog.
5. Know how to use the pattern — In this stage, you get into the technical details of a site. The rating pattern utilizes an aggregated average of the user ratings, an option to change the rating later, a display that lights up when you hover on it, a cue to let the user know their rating is accepted, etc.