Chapter 8. Builders and Editors

This chapter covers ideas and patterns used in various "editor" idioms. Many users are familiar with them through common applications like Word and PowerPoint, but the ideas usually are much older or more widespread than these applications. The patterns in this chapter are drawn mostly from these idioms:

Page layout and formatted text editors

For example, Word, Quark, and InDesign

Image editors

Photoshop, the GIMP, Paint Shop Pro, Fireworks, and MacPaint

Vector-graphics editors

Powerpoint, Illustrator, CorelDraw, Visio, and OmniGraffle

Web site builders

Dreamweaver and GoLive

GUI builders and code editors

Visual Studio, Eclipse, and Interface Builder

Generic text editors

Notepad, Emacs, email composers, and millions of web pages

Despite the different media they edit, these idioms have a lot in common. They are, first and foremost, canvasesthey offer the user an empty shell she can creatively fill, plus the tools to fill it with. Most of them are naturally structured around the Canvas Plus Palette pattern, from Chapter 2, which prescribes a blank canvas area next to an iconic toolbox.

Going back further, into Chapter 1, you might recall the Incremental Construction pattern and the concept of "flow." They are especially important for builder-style software. People who create things don't work linearlythey create a little bit, see how it looks (or works), change it, add more, delete some of it, and step back to take another look. When the tools are responsive and designed appropriately for the task, they fade from the user's awareness, and the user becomes fully absorbed in the creative activity.

To get there, a user has to be able to use the tools with skill and efficiency. Fortunately for users, most editors within a given idiom have evolved to become very similar, so skills and habits learned in one editor are "transferable" to others. There's no need to make your editor identical to anotherthere's still plenty of room for innovation in editor design. However, it's best not to reinvent too many wheels at once.

Then there's efficiency. Nothing disrupts flow like a needlessly long series of dialog boxes, wasteful and tiring mouse movements, or having to wait for software to think before it responds. In builders and editors, strive for immediacy: common actions are executed with minimal keystrokes or pointer motions, and gestures have instant results.

Many interaction-design decisions you make for any builder or editor will deal with WYSIWYG editing, direct manipulation, modes, or selection. Getting these concepts right is critical for efficient, skilled use.