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

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.

Dropdown Menu Control

Specification

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

Side Bar

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.


CategoryUsability

Design/HIG/Planning/MultiviewSidebarExamplePattern (last edited 2014-06-19 17:11:12 by AllanDay)