Design Patterns

Build designs that are scalable, usable, and communicative.

Framework to Define the Scalable Design Patterns

Design patterns define how users should perceive, interact with, and react to information. Users visit a new application, scan and interact with the product, and try to accomplish their goal. When users look at common interactions or elements, they immediately know how to act on them because they remember the pattern’s behavior. The user’s cognitive strain is reduced with the use of standard design patterns. Design patterns also increase the usability and scalability of the product, while also enabling effective communication for a larger group of people like engineers and designers to work with.

These are the steps to be followed to select the right design pattern for problems:

1. Understand the product and its users.
2. Detect the problems to be solved.
3. Look for inspirations in the same domain, in different domains, or outside the digital world, and understand the context of the usage.
4. Identify the design patterns that will solve the problem in your product.
5. Analyze each solution in the context of your product and select the one that works best. Usability testing is one of the ways that will help you to finalize the solution.

Free & Discounted Udemy Courses — Explore Now

Every design pattern has three (3) features:

1. Information
   Information consists of the content you want to display and the actions you want the users to take.
   Example: Labels, size of affordance, order of affordance, colors, layout.
2. Interaction
   Interaction is how users perceive and react to the information.
   Example: Behavior (whether the design is okay or not), prompting, buttons, helping/joy (motion design).
3. Feedback
   Feedback is the response that the system gives to every user’s interaction.
   Example: Help text, error text, error prevention, educate users, minimize stress.

There are a few design patterns that are commonly used across multiple interfaces. These are:

1. Data input/output

These patterns are used to take data input and provide feedback to the users. The examples below explain different types of patterns used to take date range from users based on the context.

Context: The user wants to select dates for a flight/hotel booking.
Problem: How might we reduce the number of clicks used to pick the date range?

Here are the two different patterns to solve the problem:

Source: RubyGarage

On “Airbnb”, users can pick the range of dates easily with just 3 clicks, and the selected date range is clearly highlighted.

Source: RubyGarage

The illustration above is the date picker used in “Bookings.com”. It takes more clicks to select the range of dates than the one used in Airbnb.

Solution: Pick the right data entry elements that best suit your website. In this case, the Airbnb date picker works efficiently as it takes just 3 clicks to select the date range.

2. Navigation

Almost every website requires navigation to function efficiently. Clear navigation ensures the usability of the product.
Context: It is a small application that has fewer navigation elements.
Problem: How might we make the navigation evident and easy to access for the user?
Solution: If there are fewer navigation elements, then it’s better to use top navigation where all the navigation elements are visible to the user who can switch quickly to pages. Hamburger navigation is not preferred in this type of case because the navigation elements will be hidden inside the hamburger. Furthermore, avoid left navigation as it takes more real estate.

Source: Mockplus

Stripe website uses top navigation as there are fewer navigation elements in the website and it’s easier to navigate.

3. Content structuring

‘Content structuring’ design patterns are used to ensure the overall accessibility of all page elements. They provide effective content structurings like dashboards and galleries and simplify common procedures like social logins and auto-complete.
Context: You are a Sales Manager for the “Shopify” application and you will be monitoring the total number of sales, number of users who visited the application, the top products sold, etc.
Problem: How might we help users to take important actions quickly from the dashboard?
Solution: Users can easily take quick actions from the dashboard, as it shows the important tasks upfront to the user. It also offers insights into influencing factors like top product sales, total sales, etc.

Source: RubyGarage

These are a few of the applications of design patterns. Follow a similar process to pick patterns when you are solving other design problems/issues by analyzing them thoroughly.

Tips / Best Practices

1. Always understand the context of the product and the problem that the design pattern is going to be used for.
2. Wherever possible, use the patterns that have been successfully used in similar contexts.
3. If you must design a new pattern, test for usability and understandability.

Checklist

1. Understand the context of the product or the website.
2. Understand the product goals and requirements.
3. Identify the problems that need to be addressed.
4. Understand the context behind the usage of the design pattern.
5. Ideate on the design pattern to improve it and align it with the product goal and context.

Related Topics

1. Ideation Fundamentals
2. 6 Ups (Quick Ideation)

Quick Question

What is the minimum required information for choosing the best design pattern from the list below?

1. Identify the problems.
2. Knowledge of existing design patterns.
3. Knowledge of prototyping tool.
4. Understand the product and users.

Leave your answer in the comments section below!

Free & Discounted Udemy Courses — Explore Now