UX Designers are Pattern Thinkers

UX Designers are Pattern Thinkers

By Dorothy Shamonsky, Ph.D.

Even though user experience (UX) design must accommodate the needs of the user, which seem on the surface to be idiosyncratic, UX designs are built using user interface patterns, which are highly rule-based. It’s confusing and annoying to live in a world with no rules or inconsistent rules. Dreams are like that; you go through a door but are back in the same room or you run but you stay in the same place. The rules of physics define the behavior of the physical world. Virtual worlds, even lowly everyday apps, also need to build upon consistent rules or patterns of interaction, for people to find them usable.

When trying to create good UX design, user interface design patterns are used as a solution to recurring, design problems. Design patterns are standard reference points and a language of sorts, for the professional UX designer. For example, a solution for displaying content that is too large for the available space is to use tabs or a solution for modifying saved data is to use an input dialog. Think of patterns as building blocks to an interface, like Legos. Lego patterns can be multi-level or patterns can reside within another pattern. For example, a method for sending a notification email to colleagues (one pattern) could exist within a dialog where you are able to modify data (another pattern).

The specification for any given design pattern for a user interface eventually goes much deeper than a general pattern, to the exact look and feel of that pattern for a given user interface. This includes the color, the font and even the spacing down to the pixel level. Every design can be reduced down to a set of rules (tab border: 1 pix, tab border color: #089bcb, tab height:  25 pix, etc.). The challenge can occur when the rules, if written in English, are difficult to understand in the context of a design without referring to callouts on a mockup itself. It turns out a picture is worth 1000 words. Does tab height include the tab border or is the border height added on top of the tab height? Inevitably, the rules can be articulated perfectly in the code but doing that requires a detailed understanding of the visual mockup, or the desired resulting UX.

The profession of UX did not invent the notion of design patterns. It is an inherently natural way to design. The seminal 1970s text by the architect, Christopher Alexander, et al., A Pattern Language and its companion text, The Timeless Way of Building, describe a multi-layer pattern language richly interconnected and grounded in the human understanding of the constructed world. In the 1990s, the book, Design Patterns, by Gamma, Helms, Johnson and Vissides, described object-oriented “micro-architectures” and introduced many software engineers to the concept of design patterns.

Now you can find a plethora of books about design patterns for both software engineers and user interface/experience designers. Notably, early texts in the field of UI/UX are Martin van Welie’s Interaction Design Patterns, Jan Borcher’s, A Pattern Approach to Interaction Design, 2001 and Jenifer Tidwell’s, Designing Interfaces, 2005.