ui-design-pattern

What Is A UI Design Pattern? UI Design Pattern In A Nutshell

Design patterns were originally used in architecture and programming to optimize solutions known to work within specific contexts. Solutions occurring frequently enough then morphed into formulas that could be reused as necessary. Some of the design patterns people encounter daily include apps with tab bars, websites with top navigation, and login screens with two input fields and a submit button.  User interface (UI) design patterns are proven and reusable solutions to commonly occurring user interface problems.

Understanding UI design patterns

As a cooking recipe provides the ingredients and method for making a recognizable dish, so too does a user design pattern in providing a predictable and identifiable solution to an interface design problem.

For users, the structural and behavioral features of a pattern are familiar. Rather than reinvent the wheel, teams can leverage this knowledge to develop better products. Design patterns should never take the place of informed product development. Instead, they should be used to guide design decisions by modifying them to suit the user and business needs. 

There are many ways to make a curry, but there are certain basic ingredients that make one recognizable. The same is also true for UI design patterns. Teams have a general model for how to create a recognizable pattern and can add or subtract ingredients to make their version unique.

The four main types of UI design pattern

There are four main types of UI design patterns. Each is based on specific design cases and usually target core site functions, including:

  1. Input and output – these design patterns relate to how the user interacts with the site by submitting information. It also deals with output, where the site responds by submitting feedback in return.
  2. Content structuring – perhaps the most obvious and recognizable design patterns are those that organize site content and make it more accessible.
  3. Social sharing – or patterns that enable the user to promote or share the site on social media.
  4. Navigation – which helps guide the user around the site and assists them if they become lost.

The three levels of UI design patterns

Product discovery coach Anders Toxboe further categorizes UI design patterns according to how they help a site. Many choose to visualize each category as a level in a pyramid. 

With that said, let’s start from the bottom and work upwards. 

1 – Implementation 

At the bottom of the pyramid are design patterns contextual to each design case that deliver a consistent if unremarkable experience. 

These patterns are the most strict, with governing rules tending to black and white. Examples include search boxes placed in the upper right corner and 100 x 100-pixel square thumbnail images.

2 – Flow  

On the second level are recurring solutions that solve common design problems in terms of functionality and flow. Designers must choose between alternatives that solve the same problem. However, both options affect the flow and composition of the user experience as opposed to the consistency of the experience at the implementation level. 

To determine the best way to gather input from users, designers may choose between the Lazy Registration and Account Registration design patterns.

3 – Context

At the highest level of the pyramid are design patterns that define what context the user is in. In other words, these are design patterns specific to the type or genre of the site in question.

A professional music artist, for example, will need design patterns appropriate for tour calendars, a biography page, and a checkout system for merchandise sales. 

Key takeaways:

  • UI design patterns (UI) design patterns are proven and reusable solutions to commonly occurring user interface problems.
  • UI design patterns can be categorized into four types: input and output, content structuring, social sharing, and navigation. Each is based on specific design cases and typically targets core website functions.
  • UI design patterns can also be categorized according to how they help a site. In this case, there are three types represented by the levels of a pyramid: implementation, flow, and context. At the bottom of the pyramid are design patterns that help sites provide a consistent user experience. As one moves up the pyramid, the user experience is defined by flow, composition, and context.

Connected business concepts to UI design patterns

business-architecture
Business architecture incorporates the structure of an organization and demonstrates how elements including processes, capabilities, and information fit together. The Federation of Enterprise Architecture Professional Organizations (FEAPO) defines business architecture as a discipline that “represents holistic, multidimensional business views of: capabilities, end-to-end value delivery, information, and organizational structure; and the relationships among these business views and strategies, products, policies, initiatives, and stakeholders.”
design-strategy
Design strategy is a framework applying the tactical thinking of a business strategy to the needs of the user to create the most effective products and services.
market-analysis
Psychosizing is a form of market analysis where the size of the market is guessed based on the targeted segments’ psychographics. In that respect, according to psychosizing analysis, we have five types of markets: microniches, niches, markets, vertical markets, and horizontal markets. Each will be shaped by the characteristics of the underlying main customer type.
customer-experience-map
Customer experience maps are visual representations of every encounter a customer has with a brand. On a customer experience map, interactions called touchpoints visually denote each interaction that a business has with its consumers. Typically, these include every interaction from the first contact to marketing, branding, sales, and customer support.
customer-journey
The customer journey – sometimes called the buyer or user journey – tells the customer experience with a business, brand, product, or service. A customer journey is an alternative approach to other linear models like the sales funnel which hypothesize that most customers follow the same path.
360-degree-feedback
360-degree feedback is a comprehensive performance feedback strategy for employees. Traditionally, performance feedback was solely given by the employee’s direct superior. In 360 degree feedback, however, anonymous feedback is given by a range of individuals that the employee has a working relationship with. These include managers, colleagues, and in some cases, customers.
switching-costs
Switching costs consist of the costs incurred by customers to change a product or service toward another similar product and service. In some cases, switching costs can be monetary (perhaps, improving a cheaper product), but in many other cases, those are based on the effort and perception that it takes to move from a brand to another.
customer-development
Customer development is a formal process of identifying potential customers and determining how to meet their needs using testable hypotheses. Entrepreneur and business professor Steve Blank highlighted the Customer Development Manifesto principles in The Startup Owner’s Manual as the core principles for modern startups.

Main Free Guides:

More Resources

Published by

Gennaro Cuofano

Gennaro is the creator of FourWeekMBA which reached over a million business students, executives, and aspiring entrepreneurs in 2020 alone | He is also Head of Business Development for a high-tech startup, which he helped grow at double-digit rate | Gennaro earned an International MBA with emphasis on Corporate Finance and Business Strategy | Visit The FourWeekMBA BizSchool | Or Get The FourWeekMBA Flagship Book "100+ Business Models"