Contents
Multi-View Side Bar
Allows switching between different information or navigation aids in the same side bar.
Note: This is a semi-fictional pattern, with an entirely fictional changelog and feedback, for discussion purposes.
Tags
navigation, sidebar, dropdown, combobox
Status
Stable : This pattern is approved for use in all new GNOME applications until further notice.
Description
HIG(2f)Planning(2f)MultiviewSidebarExamplePattern/multiview1.png "multiview1.png")
The Multiview Sidebar is a variant of a Sidebar that contains a dropdown menu for switching between two or more different types of content. For example, a Places View and a Filesystem View in a file manager application.
When to Use
When more than one type of information, or different views of the same information, are available to be shown in a window's sidebar.
Current Usage
Nautilus, Evolution, EOG.
Should we also mention applications that *ought* to use it, or would that be too cheeky?! Perhaps it would be okay to mention them in conjunction with a link to a bug report requesting the change...
User Guide
To change what is shown in the sidebar, click the dropdown menu to reveal the list of available views. Select the view you wish to display. The contents of the side bar are updated immediately.
Keyboard Navigation
The dropdown list is part of the regular Tab sequence for the window containing the sidebar.
Each entry in the dropdown menu has a mnemonic. Only the mnemonic of the currently-selected item can be activated. When activated, the dropdown menu is focused, and can be opened by pressing Space.
When the dropdown menu is focused or open, the Up, Down, Home and End keys change the selection, and the Space key opens and closes the menu.
Related Guidelines
Specification
HIG(2f)Planning(2f)MultiviewSidebarExamplePattern/multiview_spec.png "multiview_spec.png")
The dropdown menu is a GtkComboBox that is drawn on a rectangular area with a solid bg[NORMAL] background and a 1px fg[NORMAL] border. The GtkComboBox is separated from the top, left and right sidebar border by 1em.
Each entry in the dropdown menu is text-only and has a mnemonic.
Source Code
multiviewsidebar.ui multiviewsidebar.c multiviewsidebar.py
Terminology
The drop-down list should be referred to as the "the view selection drop-down list". This may be shortened to "the view selection list" after initial usage.
See Also
Co-Requirements
Related Patterns
Filesystem View Places View View Menu
Competitive Approaches
Interesting alternatives that have been implemented elsewhere.
Feedback
Usability Results and Feedback
On 2010-01-10 we tested two different designs for this component, one with a dropdown list (like Nautilus) and one with left/right arrow buttons for cycling through the views (like the sidebar in Thunderbird 3). Most users preferred the version with the dropdown list, as with a single click they could see how many other views were available, and what they were called.
On 2010-02-01 we removed the Close button as a result of bug 99999, in which several people complained that once they'd clicked it to hide the sidebar, they couldn't figure out how to show the sidebar again. Sidebar is now shown and hidden the same way, either by selecting View->Sidebar, pressing F9, or double-clicking the separator bar.
Discussion
JohnnyDev: Couldn't we just have both the dropdown list and the left/right arrows?
AnnieGlade: Sure we could, but I think that would look pretty cluttered.
Change Log
2010-01-01 |
Johnny Dev |
Initial design. |
2010-01-14 |
Annie Glade |
Replaced left/right buttons with dropdown list, as user testing found this made the different views more discoverable. |
2010-02-01 |
Johnny Dev |
Removed close button as result of bug 99999. |
Would be good if we could link to each previous version mentioned in the Change Log.