Section 8.1. THE BASICS OF EDITOR DESIGN

8.1. THE BASICS OF EDITOR DESIGN

Four elements are essential in most editors: the ability to do WYSIWYG editing; the ability to manipulate the interface and data elements directly; a variety of operational modes; and a wide range of options for selecting text or objects.

8.1.1. WYSIWYG EDITING

WYSIWYG is an acronym for "what you see is what you get" (but you probably knew that already). It makes some interfaces easier to use because the user doesn't have to do any complicated mental transformations at design time to figure out what the end result will look like.

WYSIWYG is best suited for images, vector graphics, video and animation, some GUI builders, and "hard" formatted textthe end products look the same to everyone, regardless of the context in which they are viewed.

But now think about HTML. When you design a web page, you may not have full control over the final product. Depending on how you've written it, your page may be subject to many end-user manipulationsstyle sheets, text sizes, window sizes, browser varieties, display devices, layout preferences, and even customized content. What does WYSIWYG mean when every viewer sees a different end result? That's an open question.

Also, if you design a text editor that produces formatted text, consider this: Almost everyone with a Windows computer has a copy of Microsoft Word, and that sets up some powerful expectations for how a text editor should work. On the other hand, every computer user has email, and most email editors produce plain text (and so they should, since email is fundamentally a plain-text medium). Then there are millions of web pages that edit message boards or blogsmostly plain text, though some include simple tag-based formatting. Instant messaging also uses plain text.

On any given day, how many of the world's words are typed into Word, and how many into plain-text editors? Again, it's an open question. Don't underestimate the usability benefits of plain-text, non-WYSIWYG editorsthey're simple to design and easy to use.

8.1.2. DIRECT MANIPULATION

"Direct manipulation" means that an interface lets the user grab, push, drag, drop, reshape, stack, paint, open, close, or otherwise handle the objects in the interface. A sense of physicality is keyeven though the objects are virtual, and handling is done via mice or other devices, the user is under the illusion of direct physical engagement with those objects.

And a strong illusion it is! The next time you sit down at a windowed computer, put a paper sticky note on the screen. Try to ignore it for a while. At some point, your conscious mind probably will forget that it's not a window, and you'll try to grab it and move it with the mouse.

When designed well, direct manipulation is immediateactions take place with no apparent wait time, which in practice means that the system responds in less than one-tenth of a second. And it is preciseusers need to have fine control over the location of that pointer and the objects attached to it, as though it were a fingertip in real space.

Direct manipulation also should follow conventions. As mentioned earlier, people assume they can transfer common skills from one piece of software to another: for example, copy and paste, drag and drop, resizing via handles, and multiple selection via rubber-band selection.

8.1.3. MODES

An interface mode is a state in which input gestures do things other than what they normally do. For example, click-and-drag in a drawing program normally means "rubber-band select these objects." But in line-drawing mode, click-and-drag means "draw a line from here to here."

Some say that modes in an interface are bad, because they make it too easy for users to get into trouble. That's not always true. People who use graphic editors are used to them. In fact, I don't know how to design a complex graphics editor without them, if I have only a mouse and keyboard to work withthose input devices have to be functionally overloaded if you're going to implement a lot of different drawing features.

However, modes can go bad if:

• It's not made clear to a user that the interface is in a particular mode.

• The modes cause unnecessary work by being obnoxious to turn on and off.

You can easily solve the first problem with sufficient interface feedback. The mouse cursor should always represent the current mode, for instance. The user's attention will focus wherever the cursor is, so that cue is hard to miss. If you use buttons to turn modes on and off, render the "on" button differently from the others (e.g., show it as pressed in, not popped out).

Two mode-related patterns in this chapter try to solve the second problem: One-Off Mode and Spring-Loaded Mode. Both make it easy to turn a mode off; Spring-Loaded Mode makes it easy to turn a mode on, too. Contrast these patterns to a situation in which the user has to move the mouse pointer all the way to a palette in the screen corner, locate a tiny palette button, click it to turn a mode on, move the mouse back to the canvas, draw something, go back to the palette to turn another mode on, and go back to the canvas…ad infinitum. That's a lot of mouse motion. It's also a repetitive strain inury waiting to happen.

8.1.4. SELECTION

On its surface, selection seems simple to design. Long ago, conventions were established for many kinds of selection, such as text, list items, and graphic objects; people grew accustomed to them. The following table describes the most common conventions for object selection, within three groups of interface idioms:

• Text editors, including both plain and formatted text

• Vector-based graphics, most drawing programs, and GUI builders

• Lists, tables, and trees (which are covered in Chapter 6, but they're in this table so you can compare selection gestures)

The following table summarizes the most frequently encountered actions for common selection-related gestures. (Not all gestures affect the selection; the ones that don't are shown in gray.) These are the conventions your users most likely will assume your application will follow.

Table 8-1.

	Text editors	Vector graphics editors, GUI builders	Lists, tables, trees
Single click	Move text insertion cursor here	Select just this item	Select just this item
Double click	Select this word	Open or edit this item	Open or edit this item
Triple click	Select this line, or select this paragraph	N/A	N/A
Click, drag, release	Start selection here, end it there; select all text between them	Select everything inside the bounding box (known as "rubberband", "marquee" or "marching ants" selection)	Drag this item from here to there
Shift-click	Start selection at the text insertion cursor, end it at the click point, and select all text between them	Add this item to the selection set	Add this item to the selection set, plus all intervening items ("contiguous selection")
Control-click	Varies from application to application	Varies from application to application	Add this item to the selection set ("discontiguous selection")

Now the fun begins. If you implement only these conventions, have you solved all the selection-related problems your users will encounter? Probably not. Think about the higher-level tasks that users might want to perform. For example, suppose:

• The user selects several items on a graphic editor, intending to align their left edges. But which shape's left edge? The first selected item? The last? How can the user tell? Some applications mark the first selected item as the "dominant" item. It looks different from the others, such as one that is drawn with green selection handles instead of blue (see Figure 8-1). When an alignment completes, the dominant item stays put, and the others are moved into alignment with it.

  Figure 8-1. Dominant selection in Visio

  

• Now let's say that a user wants to select a red region of an image. That region is many hundreds of pixels large, and it has a ragged edge, making it very difficult to select all the red pixels cleanly. The Smart Selection pattern helps with that scenario. If an application can anticipate the "chunks" of content that users want to select, it can help by selecting that chunk automatically. The chunk could also be a paragraph of text, or a grouped set of shapes.

In any case, get to know your users' common tasks. Anticipate the difficulties they may have with traditional selection, and augment your selection design to help with those difficulties.