Designing Interfaces, 2nd Edition

Introduction to the Second Edition

In the five years since the first edition of Designing Interfaces was published, many things have changed.

Most user interface designers—who might now play the roles of user experience (UX) designers, or interaction designers, or information architects, or any of several other titles—now do their work on the Web. Countless websites, web services, web-delivered software, blogs, and online stores need good design, and it’s becoming easier and easier to deliver these finished products in ridiculously short turnaround times. Many of these are highly interactive, but even traditional websites—static and straightforward in the past—now contain components that are dynamic and interactive, such as video players and social network content. There’s a lot of designing going on!

Compared to a few years ago, not as much of that designing is being done for desktop applications. Of course, all of us technology users depend upon the complex software installed on our laptops and desktops. Our email clients, browsers, document editors, domain-specific software, and operating systems are still important parts of our online lives. But many aspects of their interface designs have stabilized. As a result, since the early 2000s, the audience for design books has shifted away from desktop design toward web-based design.

Here’s another change: mobile design, which was still immature in 2005, has flourished. With iPhones and other complex mobile devices now spreading everywhere, putting the whole Web in our pockets, many designers have been forced to face the special problems inherent to mobile design. How should mobile concerns change interface design, especially for websites? That’s a question we’re still collectively trying to answer, but the design community has learned some approaches and techniques that work.

Also, designers cannot ignore the influence of online social networks. When I’m in the early phase of a design project, I need to think about its connections to blogs, Twitter, Facebook, comment areas, forums, and all the other ways that people talk to one another online. I would be remiss not to do so. Users spend a lot of their online time “doing” social interaction, and sophisticated users expect social-network support as a matter of course. It’s unusual now to find any website that doesn’t somehow connect to or from a social service (and usually several).

But wait, there’s more! Since this book was first published, the UX design world has discovered the value of patterns, and other UX-related pattern collections have appeared on the scene. Many of them are quite good. Some took patterns originally set forth here and elaborated upon them, changed them, renamed them according to emergent conventions, or presented new information about them. Others created new patterns in areas that this book didn’t cover well—especially social, mobile, gestural, search, and RIA-style interfaces. (I list the best of these other pattern collections in the preface, in the References section, and in the patterns themselves.)

So is the material written in 2005 still relevant?

To a large extent, yes. The human mind hasn’t changed—visual hierarchies still work, progressive disclosure still works, and moving things still attract the attention of our reptilian brains. Good patterns based on fundamental design principles are just as valid now as they were 5, 10, or 20 years ago. But other patterns weren’t as well grounded or have fallen out of favor. This second edition gave me the privilege of hindsight: I was granted the time to figure out how well these patterns have endured, and then report on them. And, indeed, a few have been removed from this book.

But most of them remain, because they still work. They’ve been updated with fresh examples, and in some cases with fresh research into their effectiveness. In addition, I’ve written (or borrowed) new patterns to reflect the changes of the last five years. The next section describes these changes in some detail.

Changes in the Second Edition

Here’s what you’re getting in this book:

A chapter about social media

Chapter 9, Using Social Media, lays out some tactics and patterns for integrating social media into a site or application. The chapter does not cover all aspects of social interfaces; it’s meant to be complementary to existing works on the subject, especially Designing Social Interfaces (O’Reilly, http://oreilly.com/catalog/9780596154936/).

A chapter about mobile design

Chapter 10, Going Mobile, contains some patterns that are specific to mobile devices. In particular, the patterns are aimed at the platforms most designers are likely to target: touch-screen devices with full connectivity, such as iPhones. Both apps and websites are covered. Again, this is not intended to cover all aspects of mobile design—simply the patterns and ideas that can help you create a graceful mobile interface even if you’re not a mobile UI specialist.

The existence of this chapter brings up an interesting point. A “good” pattern should be invariant across different platforms, perhaps including mobile ones. However, mobile design introduces so many new constraints on screen size, interactive gestures, social expectations, and latency that some patterns simply don’t work well for it. Conversely, most of the patterns written specifically for mobile contexts don’t work well (or aren’t particularly salient design solutions) for larger screens; those patterns have a home in Chapter 10.

Reorganized chapters and rewritten introductions

Because there were so many old and new patterns about how to present lists of items, I chose to “refactor” three chapters to account for that. Chapter 5 is now simply about lists. It pulled patterns from the first edition’s Chapter 2 (Two-Panel Selector, One-Window Drilldown) and Chapter 7 (Row Striping and Cascading Lists). I also added several new ones, such as List Inlay and Alphabet Scroller.

Furthermore, the introductions to the chapters on information architecture (Chapter 2), navigation (Chapter 3), and page layout (Chapter 4) have been rewritten to reflect recent design thinking and a new emphasis on web-based or web-like designs.

New patterns that capture popular new interactions

Some techniques have really caught on in the last five years, and the ones that seem to be “pattern-like”—they are abstractable and cross-genre, they’re common enough to be easy to find, and they can noticeably improve the user experience—are represented here. Examples include Fat Menus, Sitemap Footer, Hover Tools, Password Strength Meter, Data Spotlight, and Radial Table.

New patterns that aren’t really “new,” but that were not included in the first edition

These ideas have been kicking around for a while, but either I didn’t recognize them as being important back in 2005, or they weren’t especially salient back then. They are now. This list of patterns includes Dashboard, News Stream, Carousel, Grid of Equals, Microbreaks, Picture Manager, and Feature, Search, and Browse.

Renamed patterns, and patterns whose scope has changed

For instance, Card Stack was renamed to Module Tabs, and Closable Panels to Collapsible Panels; I made these changes to conform to current terminology and other pattern libraries. Similarly, Accordion was factored out from Collapsible Panels and made into its own pattern, since other designers, design writers, and pattern collections have converged on the term “accordion” for this particular technique. Meanwhile, One-Window Drilldown and Two-Panel Selector—both from the original book’s chapter on information architecture—have been narrowed down to deal specifically with lists of items.

New examples, new research, and new connections to other pattern libraries

Almost every pattern has at least one new pictorial example, and many of them have an “In other libraries” section that directs the reader to the same pattern (or patterns that closely resemble it) in other collections. These might provide you with new insights or examples. Also, some patterns in this book have been slightly rewritten to account for new thinking or research on the issue. Row Striping is one of these; some experiments were run to find out the value of the technique, and the pattern refers you to those results.

Some individual patterns have been removed

Many of these have passed into the realm of “blindingly obvious to everyone,” and while they’re still useful as design tools, their value as part of this book is diminished. This list includes Extras on Demand, Intriguing Branches, Global Navigation, and Illustrated Choices. Others are no longer used much in contemporary designs, such as Color-Coded Sections.

The “Builders and Editors” chapter is gone

Designers still work on these types of applications, of course, but I honestly couldn’t find much to change in that set of patterns in terms of new work and updated examples. I also discovered in a survey that readers found this to be one of the least valuable chapters. Because I wanted to keep the book size down to something reasonable, I chose to remove that chapter to make room for the new material.

Finally, I want to talk briefly about what you won’t find in this new edition. The following areas are so well covered by other published (or forthcoming) pattern collections that I saw little need to put them into this edition:

• Search

• General social interfaces

• Gestural interfaces

• More depth in mobile design

• Types of animated transitions

• Help techniques

I hope that in the next few years, we’ll see new sets of patterns for other areas of design: online games, geographic systems, online communities, and more. I see a rich and rewarding area of inquiry here, and that’s terrific. I encourage other design thinkers to jump in and write other patterns—or challenge us pattern writers to make the existing collections better!