UI Patterns and Techniques

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.