UI Patterns and Techniques

Introduction

This web site is moving! The patterns have been updated to match the book, and you can find them at the following URL:

http://designinginterfaces.com

This site will stay up through part of 2006, but it will eventually be retired. Please change your links. Thanks!

"Designing Interfaces: Patterns for Effective Interaction Design" can now be ordered from Amazon. The book contains 90+ patterns (including updated versions of the ones you see here), over 300 full-color illustrations, and additional reference material and design advice.

There's nothing new here.

If you've done any Web or UI design, or even thought about it much, you should say, "Oh, right, I know what that is" to most of these patterns. But a few of them might be new to you, and some of the familiar ones may not be part of your usual design repertoire.

Each of these patterns (which are more general) and techniques (more specific) are intended to help you solve design problems. They're common problems, and there's no point in reinventing the wheel every time you need, say, a sortable table -- plenty of folks have already done it, and learned how to do it well. Some of that knowledge is written up here, in an easily-digestible format.

By the way, when I say "UI," I mean Web sites, desktop applications, and everything in between (Web forms, Flash, applets, etc.). I believe that over the next few years, Web applications will become more richly interactive than they are now, and the smartest Web designers will use the desktop world's hard-won knowledge of how to design good interactive software. Likewise, desktop applications will gradually look more like Web sites, with better graphic design and more Web-style navigation. I will make no assumptions about how or when they will converge -- they may not, ultimately -- but stylistically, there is some common ground already. Thus, you will see examples from both worlds in here.

These patterns are intended to be read by people who have some knowledge of UI design concepts and terminology: dialogs, selection, combo boxes, navigation bars, whitespace, branding, and so on. It does not identify many widely-accepted techniques such as copy-and-paste, as you probably already know what they are. But, at the risk of belaboring the obvious, some common techniques are described here to encourage their use in other contexts -- for instance, desktop apps could make better use of Toplevel Navigation -- or to discuss them alongside alternative solutions.

(Many of these patterns were originally written by other people in the field. Where appropriate, authors are credited in the pattern descriptions.)

If you're running short on ideas, or hung up on a difficult design quandary, read over these and see if any of them are applicable. And don't take them as the gospel truth, either -- what matters is whether your design works for your users.

If these are useful to you, please tell me. If not, or if you have anything to add, tell me that too.

Jenifer Tidwell
jtidwell @ alum.mit.edu
http://jtidwell.net