What is a Design Pattern? A design pattern is a formal way of documenting a solution to a design problem, with the documentation helping to contextualise the solution to a particular field.
An Architect, Christopher Alexander came up with the idea of “design patterns”. He put forward the idea that many design problems followed a similar path (or pattern) and that it would be possible to create a “language” to describe them. This meant that, in theory, anyone could solve a design problem by simply using the same “language”.
How does this effect us? Software engineers and HCI researchers both took on the idea of design patterns to help them describe how to approach certain problems when designing solutions to problems. In software engineering, the process started from a book called “Design Patterns: Elements of Reusable Object-Oriented Software” by Gamma, Helm, Johnson and Vlissides. This was then repurposed into the structure used for HCI. So, what are Design Patterns in User Interface/User Experience (UI/UX) design?
Common Elements in Design Patterns for HCI. Most design patterns in this area share the following elements: Pattern Name/Pattern Description. Problem Statement: what the user wants to achieve or what the challenge is to the user. Use When: when the design pattern applies. Solution: explanation of how to solve the problem. Rationale: provides reasons “why” the pattern works. Examples/Comments.
Pattern Name and Description Statement Use When... Solution (Not Shown) Rationale
Name: News Stream Statement: Show time-sensitive items in a reverse chronological list, with the latest items at the top. Use When: Your site/app uses one or more communication channels (e.g. blog, email, Twitter, Facebook). Solution: List incoming items in reverse chronological order. If the technology permits, “push” new items onto the top of the list
Name: Grid of Equals Statement: Arrange content items in a grid or matrix. Use When: The page contains many content items that have a similar style or importance. Solution : Figure out how to lay out each item in the grid. Do they have thumbnail images or graphics?
Name: Password Strength Meter Statement: Give the user immediate feedback on the validity and strength of a new password while it is being typed. Use When: The UI asks the user to choose a new password. Solution: While the user types his new password, or after keyboard focus leaves the text field, show an estimate of the password strength beside the text field.
10 UI Design Patterns You Should Be Paying Attention To