Articles Comments

GUI Journal » Controls, GUI Design, Mistakes » GUI Design: Dialog Assault

GUI Design: Dialog Assault

We have all had the experience of using software that frequently pops up dialog after dialog telling us about this or that, or asking “important” questions—a situation I refer to as “Dialog Assault.” If it’s software we use often and the sequence is usually the same, most of us get into the habit of simply hitting [ENTER][ENTER] [TAB][ENTER] or whatever sequence is needed to get us the desired result.

As a software designer, it’s tempting to popup a dialog whenever a response is “required” from the user. Unfortunately, the term “required” can be subjective and is often applied to situations where it shouldn’t. This can result in a series of popup messages and or confirmation dialogs that become not only annoying, but often end up simply being ignored rather than being given the attention the designer thought they deserved.

I have used GIMP (the GNU Image Manipulation Program) on both Linux and Windows and overall I have found it to be a fairly capable application. It does demonstrate Dialog Assault on occasion, however. For example, I will save images in the native .xcf format, but then also save a copy as .png for use in documents and blogs.

When I select “Save As…” I get the dialog shown in Figure 1. I can change the file type by either replacing the “.xcf” extension with “.png” in the “Name:” field, or by selecting PNG under the “Select File Type (By Extension)” control at the bottom. Then I select [Save] or hit [ENTER].

Figure 1. GIMP "Save As" Dialog

Figure 2. GIMP "Export File" Dialog

Figure 2 shows the next dialog in the assault. Because PNG does not handle layers, GIMP needs to know what to do about it, so it presents me with the “Export File” dialog. Basically, there are three choices: 1) Ignore the layers, 2) Flatten the Image, or 3) Merge the Visible Layers. The difference is unimportant for this discussion. What is important is the fact that no matter which option is chosen, the user is presented with yet another dialog. Ugh.

Figure 3. GIMP "Save as PNG" Dialog

Figure 3 shows the third dialog in a row that is presented because I want to save my image in a new format.  The “Save as PNG” dialog gives several different options. (It does have a potentially nice feature of saving and loading defaults. I say “potentially” because if values are changed and [Save Defaults] is selected they are not actually used by default the next time this dialog appears. Instead, the user must select [Load Defaults] to get the saved options each time. Looks like the word Settings should have been used instead of Defaults, because if they really were defaults then they should show up by default…. So close!)

But the point of Figure 3 is that I have more choices to make before I actually get my image saved in the new format. The first couple of times I went through the steps it probably made sense to ask me so many questions about what I was trying to do. But once I had done it a dozen or so times, it became pretty frustrating.

POTENTIAL SOLUTION TO THIS DIALOG ASSAULT

Novell® GroupWise® is an example of an application that has solved this problem. Figure 4 shows the toolbar displayed with a received message. The user can click the large [Reply...] button and be prompted for important information, or, by clicking the dropdown arrow to the right of the button, the admin can immediately choose from the desired Reply options.

Figure 4. Novell® GroupWise® Reply Button with Options

Using the GroupWise model, Figure 5 shows a potential solution to the GIMP Dialog Assault. Selecting the regular [Save] button would take the user through the default sequence described above. However, the dropdown arrow to the right of the [Save] button could allow the experienced user to quickly bypass one or both the dialogs coming next.

Figure 5. Potential Solution to GIMP "Save As" Dialog Assault

IN-PLACE ERROR MESSAGES

Another aspect of the Dialog Assault is popping up a dialog to inform the user of an error on a form. Please don’t make me click “OK” to dismiss your silly error dialog when you could simply show me the error on the panel itself and let me continue. A great example is the login dialog in Figure 6. It not only tells you the problem, but even provides a way to get some help. Well done.

Figure 6. Login Dialog with Error Message

KEY DESIGN POINTS

  1. Just because you think information or confirmation is critical, that’s no excuse to require extra steps, clicks, etc.
  2. Provide options to set and use defaults and/or bypass options whenever possible
  3. Don’t popup an error dialog when in-place error messages will do

GUI Design

GUI Design Guidelines

Graphical User Interface

User Interface

Graphical User Interface Design

Graphical User Interface Design Guidelines

Written by

Carl Andersen currently works for Micro Focus International as a Senior Development Manager. Carl has led teams at NetIQ, Novell, and WordPerfect and been the principal designer of multiple GUIs which have received analyst acclaim.

Filed under: Controls, GUI Design, Mistakes · Tags: , , , , , , ,

Leave a Reply

*


six + 5 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>