Other pattern details

These tend to be used to elaborate on the three main components—solution, problem, and context. Particularly—and importantly—it is common to suggest alternative, related patterns of interest in the context part of a pattern to clarify when not to use the pattern. I note these here so you may recognize them when you see them elsewhere and can consider them for yourself if you find yourself writing a pattern.

A specific collection of patterns for a project is often called a pattern library . Pattern libraries give teams a common language to improve their design processes. We’ll discuss pattern libraries further in Chapter 4.

Design efficiently

Knowing patterns can help you design efficiently by quickly recognizing the best tool for the job, understanding the value of different solutions, and solving the largest number of problems at once. For example, an autocomplete search box might help your site visitors navigate your site content, recognize the term they’re looking for without knowing the exact name or spelling, and select a result after only typing a few characters without needing to waste energy typing in the full search term. By learning about the autocomplete UI pattern, you’ll more quickly recognize when you need to use it, and likewise with all UI patterns. For example, if you need to redesign the navigation for a catalog of products by expanding the existing horizontal dropdown menu into a multilevel one, you can see how an autocomplete search box might solve the problem better. We’ll look at autocomplete again in Chapter 3.

You can even recognize patterns across evolving technology. Compare the hated “Clippy” ( www.theatlantic.com/technology/archive/2015/06/clippy-the-microsoft-office-assistant-is-the-patriarchys-fault/396653/ ) Microsoft Office assistant to Slack’s chatbot called Slackbot, shown in Figure 1-8.

As conversational UIs have developed, we’ve seen some drastic changes in how we interact with technology; however, we’ve also noticed some similarities. You can see some familiar patterns, including identity and profile information, private chat, and feed updates. Increasing your familiarity with diverse patterns will help you efficiently solve design problems you face in new user interfaces, especially if you understand the underlying usability principles and can adapt patterns to new contexts.

Consistency and familiarity

Using familiar patterns lets you foster predictability. The familiar idea of drag and drop lets you directly manipulate an object by dragging and dropping it. A common use of drag and drop is to upload an image by dragging it from your computer’s local file system to a target drop area in the interface. Most to-do apps let you drag and drop to-do items to reorder them or move them to different lists. The more pervasive drag and drop interfaces become across the Web, the more likely people will understand how to interact with them. GitHub, for example, makes it clear that you can attach a file to a comment and that you can do this using several methods (drag and drop, select, paste). In Figure 1-9, you can see GitHub’s rich text editor for comments that lets you drag and drop images.

A text description is provided that hints at the drag behavior. Once you start dragging a file to the comment area, it is highlighted in green to reveal the drop target area, as shown in Figure 1-10.

Consistent use of patterns within a web site will help visitors build a mental model of how stuff works. If you can drag and drop files to this comment, maybe you can do that elsewhere. Sure enough, you can attach files to Pull Requests and Reviews as well, as shown in Figure 1-11.

You can use consistency to set your visitors’ expectations about how your web site works, so they may quickly learn a new area or more advanced tool by building on what they’ve learned already about your site.

Consistency and reuse

By their recurring nature, patterns let you reuse design solutions both visually and within code. Visual repetition lets you build consistency and predictability into your interfaces, creating a learnable experience for your users. Reusability in code also saves time, letting you refactor and improve existing features instead of rebuilding new features every time (even when something similar exists already). A pattern incorporates many design decisions to solve a problem, while programming encodes those decisions; patterns ensure you Don’t Repeat Yourself (DRY), making each design decision only once. If the 548 unique colors and 261 declarations of Facebook blue ( www.lukew.com/ff/entry.asp?1469 ) have taught us anything, it’s to maximize reuse by minimizing inconsistency.

Communicating decisions

As a communication tool, patterns let designers persuade stakeholders and colleagues of the value of a solution. You can describe why your solution is the best for a given context. You know the purpose of a pattern, how it meets the users’ needs, the similar alternatives available, and how to implement it for your brand.

Design patterns let you reference existing proven solutions, which means you have support for your decisions. Agency designers working with skeptical clients and in-house designers facing internal deadlocks sometimes need to defend specific approaches or resolve roadblocks. In these scenarios it might be useful to show how Apple use this pattern to help customers connect with customer support or Amazon used that pattern to improve conversions. This shows a concrete, tangible example of the pattern executed in the real world and helps stakeholders and colleagues visualize the desired result.

Even better than competitive contrasts, patterns can be backed by user research. Use analytics, A/B testing, user testing, customer support feedback, and survey info to show evidence for decisions. For example, “we tested this with a sample of our most engaged customers and the research shows that given the age and expertise of our visitors, the dashboard pattern works better than table filters for directing attention to desired metrics.”

Further, a well-documented pattern clearly describes the user needs it meets and how it achieves that, giving you ready-made reasons to share with your stakeholders. Referring to the strengths of a pattern and consistently using patterns can relieve some of the pain points of design by committee ( www.w3.org/People/Bos/DesignGuide/committee.html ) where many people provide design input without a cohesive vision or process to resolve details, producing lower-quality work. Figure 1-12 shows a well-documented Alerts pattern.

Communicating within teams and tools

There’s the joke that there are only two hard problems in computer science ( https://martinfowler.com/bliki/TwoHardThings.html ): cache invalidation and naming things. The joke exists because clarity through language is challenging. Evocative names speed up discussion, increase clarity, avoid mistakes, and make the underlying ideas easier to talk about. Using standard names for patterns helps designers and developers especially with talking to each other. “We might use an ‘accordion menu’.” “Let’s test ‘infinite scrolling’ instead of ‘pagination’.” For developers, it might help to consider that CSS classes are patterns. Your BEM (Block, Element, Modifier) names (if you follow that convention) should describe your patterns, how they’re used, and how variants are used. Similarly, increasing the use of CSS or Sass variables ( https://css-tricks.com/sass-style-guide/#article-header-id-17 ) in your code should clarify the intent, making it easier to understand the relationships between objects ( https://thoughtbot.com/blog/sass-variables ). Figure 1-13 shows a “badge” pattern visually and in code.

Evidence-based solutions

As patterns are recurring solutions, they are only developed through repeated, successful use: if it didn’t work, we shouldn’t repeat it. Patterns gather up best practices and principles refined by previous designers but can also be compared with other solutions and tested with users. Patterns are also framed in terms of how they solve a problem. In contrast, a design principle like “give users control” is vague about how this solves problems for users. Extending our earlier thumbnail example, you can see how a collection of tiny, compressed images would be faster to download than all the high-resolution resources, so the preview collection could be perused in less time. If your images download faster, your users might stay longer. You could review your site analytics to see if their time spent on site is longer when you use thumbnails. This kind of evidence validates the success of the solution. With evidence, more people end up using the solution. This is how solutions become patterns.

You can use patterns to fast-track improvements by exploring how designers have used them before. We’ll look at resources for patterns in Chapter 2.

Context-specific, tailored solutions

Patterns are context-specific. Essentially they are tailored to the precise problem. This makes them more useful than design principles ( www.interaction-design.org/literature/topics/design-principles ), which are excellent theories to fall back on if you need to develop a solution from scratch but are far less practical than patterns.

Content contributors without a web design background

Relying on patterns lets content contributors who are unfamiliar with the practice of web design use smart defaults. You don’t always need to understand the details under the hood to get value out of existing patterns and can skip the pain of finding out the hard way that rolling your own from scratch means a lot of hard work. You can continue to specialize in your own area without sinking too much time into details.

Additionally, patterns formed by diverse contributors may be more effective and robust than, say, patterns only made by developers. More on that in Chapter 4.

Learning from the experts

Patterns let you leave the details of UI solutions to the experts in some cases and provide excellent learning material in others.

For example, by using a search filter pattern, you might be reminded to include a cancellation option to clear the filters to return to an unfiltered search, whereas designing and building search filters without reference to the pattern might leave you slowly figuring out these kinds of details one by one. Patterns let you accelerate design and development processes.

In each of these cases, you can either incorporate the expert’s approach into your own or dig into it further. This helps if you trust that the pattern has been executed well, but there are anti-patterns to look out for, which we’ll see in Chapter 5.

Learning how to improve experiences from patterns

Patterns are a fantastic learning tool. They demonstrate reusable components that have been proven and battle-tested—you can find real examples on live sites. Patterns describe the user need that prompted its existence in the first place, for example: “Our customers are nervous about financial decisions because money is a massive stressor, so let’s use reassuring words in our inline help hints, as well as live previews and confirmation patterns to improve their confidence.”

They document the decisions that have been made by other designers before you. They show you the forces or factors you need to consider in your design decisions—how many size variants do we need? Contextual colors? Should alert messages be dismissable? What’s the difference between a link with a button style and a button with a link style?

We’ll look more at learning through patterns in Chapter 2.