Flex Article

Designing for Flex – Part 5: Designing content displays

Merging content with feedback

An all-too-common idiom that has plagued applications since some of the earliest GUIs is the pop-up dialog box. Designers and developers use pop-up dialog boxes for a variety of purposes, including providing feedback on an operation, warning users of destructive operations, notifying them of errors, or even explaining the purpose of a feature (sometimes with the ever-popular "Don't show me again" checkbox). They are probably common because they are easy to design and program. Sadly, they provide a terrible experience for users.

Figure 7. Pop-up dialog boxes like the one above are rampant in traditionally designed applications, yet they are one of the rudest and most intrusive ways of providing users with feedback and other information.

To the user, pop-up dialog boxes aren't much better than pop-up advertisements on the web. They interrupt and demand immediate attention. However, they often don't contain interesting information, and as a result users often close them without even looking at them. They are a rude and intrusive way of providing feedback and should be employed as rarely as possible.

But if you shouldn't use pop-up dialog boxes, what should you do when you need to provide information, warn users, or notify them of errors?

The answer is in designing these messages into information displays using modeless feedback. Modeless feedback allows you to integrate information into the user's flow without breaking her flow. For example, if you have a list of photo thumbnails and it's important to users to know their real dimensions, consider placing the dimensions below the thumbnail instead of making the user bring up a dialog box with this information. If you need to warn the user of an operation's consequences, consider attaching a callout to the operation's button or control.

Figure 8a. Adobe Photoshop Lightroom uses modeless feedback to inform users that their commands were properly executed. After performing the "undo" command, the modeless message above appears over the content then unobtrusively fades out on its own.

Figure 8b. Microsoft Outlook employs modeless feedback when alerting users that they have received new e-mail messages. The notification box above appears in the bottom-right corner of the screen even when Outlook is minimized or hidden. Notice that Outlook's modeless notifier also includes relevant details about the e-mail message: the sender, the subject, and a snippet of the message text.

Figure 8c. OmniGraffle offers a different kind of modeless feedback directly on the document canvas. As users drag shapes around, a tooltip pops up displaying the x and y location and guides appear giving alignment and spacing hints. Unlike Outlook and Lightroom, OmniGraffle's modeless feedback doesn't display a textual message, but it does unobtrusively display helpful information. For each of these examples, imagine how much worse the user experience would be if the designers had chosen to employ pop-up dialog boxes instead of modeless feedback!

Flex's validators offer a solid implementation of a modeless feedback idiom that is built into the framework. Instead of popping up a dialog box when a user makes an error entering values into a form field, validators display a red callout box next to the form field with a message explaining what is wrong and what the proper format should be. This has three advantages over a pop-up dialog box: it is far less annoying; it is more contextual, making it clearer which form field contains the erroneous entry; and it doesn't interrupt the user's flow in case she would prefer to return and correct the error later.

Figure 9. Flex's built-in validators are a convenient way to provide modeless feedback for form validation errors. Validators highlight fields that contain invalid input and provide modeless callouts to explain what's wrong. They are far less intrusive than the traditional method of displaying a modal dialog box when the user exits a field or attempts to submit the form.

When designing or developing an application, ask yourself how many of the pop-up dialog boxes you employ are really necessary, and whether they could be better executed as modeless feedback.

Page 4 of 6

Previous Page

Next Page