Articles Comments

GUI Journal » Controls, GUI Design, Mistakes » GUI Design: More vs. Less

GUI Design: More vs. Less

GUI designers have long wanted to spare users from the pain of sifting through extensive, advanced options when only a limited set of basic options were needed. This article takes a look at various methods for handling this situation.

 

MORE/LESS DIALOG OPTIONS

Figure 1. Microsoft® Word® 2002 Customize Outline Numbered Dialog with "More"

Figure 2. Microsoft® Word® 2002 Customize Outline Numbered Dialog with "Less"

It was not unusual in the 1990s for dialogs with many controls to use “More” and “Less” buttons to hide complexity from most users that would never need some of the available controls. Figure 1 is a screen shot of the MS® Word® 2002 Customize Outline Numbered List dialog with a More button near the upper right. When More is selected, the dialog expands to layout shown in Figure 2. There are extra options at the bottom of the dialog and the More button has changed to Less. It’s a common idea, but this is not the best design example for a couple of reasons. First, the button itself is easily lost because it is listed as if it is an action button; and second, the More and Less buttons are so far removed from the area of the dialog that is actually being changed.

Figure 3. Microsoft Word 2010 Define new Multilevel list with "More"

Figure 4. Microsoft Word 2010 Define new Multilevel list with "Less"

Figure 3 is a screen shot of the MS Word 2010 Define new Multilevel list dialog, which replaces the MS Word 2002 options shown in Figures 1 and 2. The options in Figure 3 are basically the same as in Figure 1, but with the location of the More, OK, and Cancel buttons moved from the upper right to the bottom of the dialog.

Figure 4 is a screen shot of the Define new Multilevel list dialog after it has been expanded by selecting More. The OK and Cancel buttons have moved to the right and a new group of controls has been inserted above them.

As long as the dialog was being reorganized, this would have been an excellent time to put the More and Less buttons nearer to the area of the dialog that is expanded and collapsed. But that is not what the designers chose to do. Instead, the button area and the expanded area were essentially swapped between the two versions. The Less button at the bottom left of the dialog in Figure 4 is still about as far away as possible from the area of the dialog that collapses. The further apart a control is from the area of the window it affects, the more difficult it is for the user to see the correlation between the two. The one improvement here is that the More and Less buttons are separated from the other buttons, making the unique functionality more easily identifiable.

Figure 5. Corel® Quattro Pro® Toolbars Dialog

Figure 5 is a screen shot of the Corel® Quattro Pro® (version 9) Toolbars dialog which is used for customizing toolbars. This dialog does not use the terms “More” or “Less.” Instead, there is an Options button along the right side that is somewhat removed from all the other buttons at the top right and from the buttons along the bottom of the dialog. This placement makes the button stand out. The Options button also includes the “>>” characters, which have become common for this type of control, no matter the terms that are used. This is a much better design than the two versions of the Microsoft dialogs shown in Figures 1-4.

Figure 6. Quattro Pro Toolbars Dialog Expanded

Figure 6 is a screen shot of the Quattro Pro Toolbars dialog after it has been expanded by selecting the Options button. Similar to the MS Word example in Figure 4, the buttons along the bottom of the dialog have moved to the right underneath the area where the dialog expands to display new controls. (This maintains the application’s standard of always displaying the main dialog buttons at the lower right.) The checklist at the left side expands down to fill the area vacated by the buttons. The only other change in the controls is that the last two characters on the Options button are changed from  ”>>” to “<<” to indicate the direction of contraction. I really like how the “>>” and “<<” characters in Figures 5 and 6 are right next to the area of the dialog that will be expanded or collapsed in the direction indicated by the characters. It feels much more connected and clear than the layout of the previous examples.

 

HIDDEN MENU OPTIONS

Figure 7. MS Word 2010 View Menu

Figure 7 is a portion of a screen shot from Microsoft Word 2002. The View menu is expanded, but some of the menu options are hidden. The idea is that options that are not used very often can be hidden from the user to reduce clutter on the menu. Hovering for several seconds causes these options to reappear. The user also has the option of selecting the double down arrow at the bottom of the menu to cause the menu to immediately display all available options.

I was not very familiar with Word when this feature was first introduced. Personally, I found it quite frustrating when I was looking for a particular option. Mostly, I think, because the concept of hiding less-common options was new to me and I moved through the menus too quickly to allow the delayed hover to automatically expand the menus for me. I know others who have found this feature frustrating. I  believe part of what makes this difficult is the fact that options are removed from various locations throughout the menu. It’s quite a different feel from the way the dialogs in Figures 1-6 expand and collapse entire sections. When seeking a specific option among related options, it takes longer to determine that a single item is missing.

 

ADVANCED BUTTON

An “Advanced” button is a common way to hide complexity, but to provide quick access to more controls for those who need more functionality. The Adobe® Reader® X Print dialog has an Advanced button at the top next to the Properties button. Figure 8 is a portion of a screen shot of the Adobe Reader Print dialog after the Advanced button is selected, invoking the “Advanced Print Setup” dialog over the top.

Figure 8. Adobe® Reader® Advanced Print Setup Dialog

This is a classic implementation of “Advanced.” It would be better if the button label included an ellipsis to give the impression that another dialog will be invoked, but all in all this is well done.

Figure 9 is a combination of portions of screen shots from the Skype® Call settings panel on Windows 7.

Figure 9. Skype® Call settings Panel

The panel initially provides a button labeled Show advanced options as shown in the upper right of Figure 9. When this button is selected, the panel redraws as shown in the lower left portion of the dialog. These buttons would have benefited from a design that included arrows. They look more like they might invoke a dialog as with the Advanced button in Figure 8.

The strangest part of the Skype implementation is the fact that the radio button controls in the basic layout are redrawn and laid out completely differently in the advanced layout. Why would you want to do that to a user? It’s not nice to force a user to re-read and interpret both layouts for the same data. If the Allow calls from… section remained unchanged between the two layouts, then the functionality of the button would be much more obvious as the lower portion of the panel simply expanded downward and back up. Animating the expand/collapse would be even more beneficial, as Skype has done with the left navigation.

Figure 10. Adobe® Photoshop® Smart Sharpen Dialog

Adobe Photoshop® CS2 v9.0.2 has another version of basic and advanced options. Figure 10 is a combination of portions of screen shots from the   Smart Sharpen dialog. The image at the top right shows the default layout. It includes radio buttons for Basic and Advanced with the former selected by default. When the Advanced option is selected, the dialog displays as shown in the lower left portion of the figure.

Note how three tabs are now visible between the Settings and the Amount controls. The list of controls from Amount down to More Accurate have not changed, but the advanced layout makes them part of the new Sharpen tab, with other options available on the new Shadow and Highlight tabs. Unless the user is watching very carefully as the Advanced control is selected, it might be difficult to detect what change actually occurred. They may have done better to follow the previous Adobe example (Figure 8), simply using an “Advanced” button. Or, better yet, would it really have hurt to simply have the Sharpen, Shadow, and Highlight tabs present at all times? In fact the number of controls would have been identical. If the Shadow and Highlight tabs were always visible, then the Basic and Advanced radio buttons would not even be needed.

Also, the designers obviously categorized these controls in the default display as “Sharpening” tools. I think it would be helpful to have that label present at all times, not just when the “Shadowing” and “Highlighting” options are also available.

Tabs, by their very design, are a great way to hide complexity from the user. In general, I would think that very little (if anything) is gained by hiding the tab labels and providing the basic/advanced controls.

 

MORE/FEWER LINK OPTIONS

Figure 11. Chase® Bank Bill Payment Links

Chase® bank (found at chase.com) has a bill pay feature with a list of links along the right side. Figure 11 contains portions of two screen shots, showing both the default list of links and the expanded list. The default list contains three action links plus the See more choices link at the bottom. After See more choices is selected the list expands to eight action links plus the See fewer choices link at the bottom. (Incidentally, I also appreciate the correct grammar of the word “fewer” instead of “less” since this is a list of items.)

In both lists, the last item is shown in a different color from the rest of the links. This helps to make it clear that this link is different from the others in the list.  I usually mention that using color alone to make a distinction may not be the best, but in this case I believe it is appropriate for the situation. Certainly up/down arrows could enhance the display of the last item, but the current design works well enough for me. Another good thing about this implementation is the fact that the expand/collapse options are located directly at the point in the list where the expand or collapse will occur. Nice.

 

KEY DESIGN POINTS

  1. Less/More buttons should be located near the expanding/collapsing area.
  2. Make sure your method for hiding/showing complexity is clear enough that it doesn’t frustrate the user who cannot find the desired controls.
  3. Follow standards when using an “Advanced” button: launch a dialog or change tabs, but don’t implement it as a More/Less control.

Written by

Carl Andersen currently works for NetIQ and Novell (divisions of Attachmate) as a Software Engineering Consultant and User Experience Architect. Carl has led teams and been the principal designer of multiple GUIs which have received analyst acclaim. He also consults on multiple other products within Novell and NetIQ.

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

Leave a Reply

*


8 − = five

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>