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:

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.

Content structuring

Perhaps the most obvious and recognizable design patterns are those that organize site content and make it more accessible.

Social sharing

Or patterns that enable the user to promote or share the site on social media.

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 Product Development Frameworks

Connected Agile Frameworks

AIOps

aiops
AIOps is the application of artificial intelligence to IT operations. It has become particularly useful for modern IT management in hybridized, distributed, and dynamic environments. AIOps has become a key operational component of modern digital-based organizations, built around software and algorithms.

AgileSHIFT

AgileSHIFT
AgileSHIFT is a framework that prepares individuals for transformational change by creating a culture of agility.

Agile Methodology

agile-methodology
Agile started as a lightweight development method compared to heavyweight software development, which is the core paradigm of the previous decades of software development. By 2001 the Manifesto for Agile Software Development was born as a set of principles that defined the new paradigm for software development as a continuous iteration. This would also influence the way of doing business.

Agile Program Management

agile-program-management
Agile Program Management is a means of managing, planning, and coordinating interrelated work in such a way that value delivery is emphasized for all key stakeholders. Agile Program Management (AgilePgM) is a disciplined yet flexible agile approach to managing transformational change within an organization.

Agile Project Management

agile-project-management
Agile project management (APM) is a strategy that breaks large projects into smaller, more manageable tasks. In the APM methodology, each project is completed in small sections – often referred to as iterations. Each iteration is completed according to its project life cycle, beginning with the initial design and progressing to testing and then quality assurance.

Agile Modeling

agile-modeling
Agile Modeling (AM) is a methodology for modeling and documenting software-based systems. Agile Modeling is critical to the rapid and continuous delivery of software. It is a collection of values, principles, and practices that guide effective, lightweight software modeling.

Agile Business Analysis

agile-business-analysis
Agile Business Analysis (AgileBA) is certification in the form of guidance and training for business analysts seeking to work in agile environments. To support this shift, AgileBA also helps the business analyst relate Agile projects to a wider organizational mission or strategy. To ensure that analysts have the necessary skills and expertise, AgileBA certification was developed.

Agile Leadership

agile-leadership
Agile leadership is the embodiment of agile manifesto principles by a manager or management team. Agile leadership impacts two important levels of a business. The structural level defines the roles, responsibilities, and key performance indicators. The behavioral level describes the actions leaders exhibit to others based on agile principles. 

Bimodal Portfolio Management

bimodal-portfolio-management
Bimodal Portfolio Management (BimodalPfM) helps an organization manage both agile and traditional portfolios concurrently. Bimodal Portfolio Management – sometimes referred to as bimodal development – was coined by research and advisory company Gartner. The firm argued that many agile organizations still needed to run some aspects of their operations using traditional delivery models.

Business Innovation Matrix

business-innovation
Business innovation is about creating new opportunities for an organization to reinvent its core offerings, revenue streams, and enhance the value proposition for existing or new customers, thus renewing its whole business model. Business innovation springs by understanding the structure of the market, thus adapting or anticipating those changes.

Business Model Innovation

business-model-innovation
Business model innovation is about increasing the success of an organization with existing products and technologies by crafting a compelling value proposition able to propel a new business model to scale up customers and create a lasting competitive advantage. And it all starts by mastering the key customers.

Constructive Disruption

constructive-disruption
A consumer brand company like Procter & Gamble (P&G) defines “Constructive Disruption” as: a willingness to change, adapt, and create new trends and technologies that will shape our industry for the future. According to P&G, it moves around four pillars: lean innovation, brand building, supply chain, and digitalization & data analytics.

Continuous Innovation

continuous-innovation
That is a process that requires a continuous feedback loop to develop a valuable product and build a viable business model. Continuous innovation is a mindset where products and services are designed and delivered to tune them around the customers’ problem and not the technical solution of its founders.

Design Sprint

design-sprint
A design sprint is a proven five-day process where critical business questions are answered through speedy design and prototyping, focusing on the end-user. A design sprint starts with a weekly challenge that should finish with a prototype, test at the end, and therefore a lesson learned to be iterated.

Design Thinking

design-thinking
Tim Brown, Executive Chair of IDEO, defined design thinking as “a human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.” Therefore, desirability, feasibility, and viability are balanced to solve critical problems.

DevOps

devops-engineering
DevOps refers to a series of practices performed to perform automated software development processes. It is a conjugation of the term “development” and “operations” to emphasize how functions integrate across IT teams. DevOps strategies promote seamless building, testing, and deployment of products. It aims to bridge a gap between development and operations teams to streamline the development altogether.

Dual Track Agile

dual-track-agile
Product discovery is a critical part of agile methodologies, as its aim is to ensure that products customers love are built. Product discovery involves learning through a raft of methods, including design thinking, lean start-up, and A/B testing to name a few. Dual Track Agile is an agile methodology containing two separate tracks: the “discovery” track and the “delivery” track.

Feature-Driven Development

feature-driven-development
Feature-Driven Development is a pragmatic software process that is client and architecture-centric. Feature-Driven Development (FDD) is an agile software development model that organizes workflow according to which features need to be developed next.

eXtreme Programming

extreme-programming
eXtreme Programming was developed in the late 1990s by Ken Beck, Ron Jeffries, and Ward Cunningham. During this time, the trio was working on the Chrysler Comprehensive Compensation System (C3) to help manage the company payroll system. eXtreme Programming (XP) is a software development methodology. It is designed to improve software quality and the ability of software to adapt to changing customer needs.

ICE Scoring

ice-scoring-model
The ICE Scoring Model is an agile methodology that prioritizes features using data according to three components: impact, confidence, and ease of implementation. The ICE Scoring Model was initially created by author and growth expert Sean Ellis to help companies expand. Today, the model is broadly used to prioritize projects, features, initiatives, and rollouts. It is ideally suited for early-stage product development where there is a continuous flow of ideas and momentum must be maintained.

Innovation Funnel

innovation-funnel
An innovation funnel is a tool or process ensuring only the best ideas are executed. In a metaphorical sense, the funnel screens innovative ideas for viability so that only the best products, processes, or business models are launched to the market. An innovation funnel provides a framework for the screening and testing of innovative ideas for viability.

Innovation Matrix

types-of-innovation
According to how well defined is the problem and how well defined the domain, we have four main types of innovations: basic research (problem and domain or not well defined); breakthrough innovation (domain is not well defined, the problem is well defined); sustaining innovation (both problem and domain are well defined); and disruptive innovation (domain is well defined, the problem is not well defined).

Innovation Theory

innovation-theory
The innovation loop is a methodology/framework derived from the Bell Labs, which produced innovation at scale throughout the 20th century. They learned how to leverage a hybrid innovation management model based on science, invention, engineering, and manufacturing at scale. By leveraging individual genius, creativity, and small/large groups.

Lean vs. Agile

lean-methodology-vs-agile
The Agile methodology has been primarily thought of for software development (and other business disciplines have also adopted it). Lean thinking is a process improvement technique where teams prioritize the value streams to improve it continuously. Both methodologies look at the customer as the key driver to improvement and waste reduction. Both methodologies look at improvement as something continuous.

Lean Startup

startup-company
A startup company is a high-tech business that tries to build a scalable business model in tech-driven industries. A startup company usually follows a lean methodology, where continuous innovation, driven by built-in viral loops is the rule. Thus, driving growth and building network effects as a consequence of this strategy.

Kanban

kanban
Kanban is a lean manufacturing framework first developed by Toyota in the late 1940s. The Kanban framework is a means of visualizing work as it moves through identifying potential bottlenecks. It does that through a process called just-in-time (JIT) manufacturing to optimize engineering processes, speed up manufacturing products, and improve the go-to-market strategy.

Rapid Application Development

rapid-application-development
RAD was first introduced by author and consultant James Martin in 1991. Martin recognized and then took advantage of the endless malleability of software in designing development models. Rapid Application Development (RAD) is a methodology focusing on delivering rapidly through continuous feedback and frequent iterations.

Scaled Agile

scaled-agile-lean-development
Scaled Agile Lean Development (ScALeD) helps businesses discover a balanced approach to agile transition and scaling questions. The ScALed approach helps businesses successfully respond to change. Inspired by a combination of lean and agile values, ScALed is practitioner-based and can be completed through various agile frameworks and practices.

Spotify Model

spotify-model
The Spotify Model is an autonomous approach to scaling agile, focusing on culture communication, accountability, and quality. The Spotify model was first recognized in 2012 after Henrik Kniberg, and Anders Ivarsson released a white paper detailing how streaming company Spotify approached agility. Therefore, the Spotify model represents an evolution of agile.

Test-Driven Development

test-driven-development
As the name suggests, TDD is a test-driven technique for delivering high-quality software rapidly and sustainably. It is an iterative approach based on the idea that a failing test should be written before any code for a feature or function is written. Test-Driven Development (TDD) is an approach to software development that relies on very short development cycles.

Timeboxing

timeboxing
Timeboxing is a simple yet powerful time-management technique for improving productivity. Timeboxing describes the process of proactively scheduling a block of time to spend on a task in the future. It was first described by author James Martin in a book about agile software development.

Scrum

what-is-scrum
Scrum is a methodology co-created by Ken Schwaber and Jeff Sutherland for effective team collaboration on complex products. Scrum was primarily thought for software development projects to deliver new software capability every 2-4 weeks. It is a sub-group of agile also used in project management to improve startups’ productivity.

Scrumban

scrumban
Scrumban is a project management framework that is a hybrid of two popular agile methodologies: Scrum and Kanban. Scrumban is a popular approach to helping businesses focus on the right strategic tasks while simultaneously strengthening their processes.

Scrum Anti-Patterns

scrum-anti-patterns
Scrum anti-patterns describe any attractive, easy-to-implement solution that ultimately makes a problem worse. Therefore, these are the practice not to follow to prevent issues from emerging. Some classic examples of scrum anti-patterns comprise absent product owners, pre-assigned tickets (making individuals work in isolation), and discounting retrospectives (where review meetings are not useful to really make improvements).

Scrum At Scale

scrum-at-scale
Scrum at Scale (Scrum@Scale) is a framework that Scrum teams use to address complex problems and deliver high-value products. Scrum at Scale was created through a joint venture between the Scrum Alliance and Scrum Inc. The joint venture was overseen by Jeff Sutherland, a co-creator of Scrum and one of the principal authors of the Agile Manifesto.

Stretch Objectives

stretch-objectives
Stretch objectives describe any task an agile team plans to complete without expressly committing to do so. Teams incorporate stretch objectives during a Sprint or Program Increment (PI) as part of Scaled Agile. They are used when the agile team is unsure of its capacity to attain an objective. Therefore, stretch objectives are instead outcomes that, while extremely desirable, are not the difference between the success or failure of each sprint.

Waterfall

waterfall-model
The waterfall model was first described by Herbert D. Benington in 1956 during a presentation about the software used in radar imaging during the Cold War. Since there were no knowledge-based, creative software development strategies at the time, the waterfall method became standard practice. The waterfall model is a linear and sequential project management framework. 

Main Guides:

About The Author

Scroll to Top
FourWeekMBA