Browse Settings

Browse Settings

Summary

To present the main settings navigation put two panels next to each other - ideally in a horizontal layout. One of them contains the labels of the main settings navigation. The other one displays the content of the selected entry.

Context

You want to provide an interface to adjust the settings like appearance, behaviour and overall layout of your application. You already gathered the single settings you want to provide your users with in groups? and pages?. Now you are looking for a way to best present these settings pages and make browsing them easy.

Illustration

Main Navigation

Problems

Depending on the complexity of your application the number of settings can be quite overwhelming to your users. To ensure they find the settings they are looking for present the settings in a way that gives them both easy access and a good overview at the same time.

For users to be able to browse settings, the single settings first have to be combined into larger meaningful groups. Groups that can be combined under a similar topic form a settings page?. Settings pages can also be combined, together they form a main settings entry.

The main settings entries can be outlined in several ways - horizontally, vertically, all in one list, with or without icons, or even as a drop down. However depending on the number of the main settings entries only one of these representations is proven to work best.

Examples

Thunderbird Settings

Kile Settings

Skype Settings

Solution

• Layout the main settings entries horizontally, so the settings pages can grow in height vertically.
• Give each main entry an icon and a short label. Keep in mind that your labels translated into different languages may become significantly longer.
• Within the main settings layout the settings pages as horizontal tabs.
• The main settings entries as well as the settings pages should not count more than six to seven items each.

Rationale

Settings interaction architecture generally follows a hierarchical layout. From a general settings entry like "Appearance" through the subset "Fonts" and the group box "Minimum Font size" to the widget level that manipulates a settings value, settings could be thought of as a tree structure.

Displaying the settings hierarchies top to bottom eases scanning and browsing. It successively leads the user from the main settings to the widget level, reducing mouse ways to a minimum.

Code Snippets

Show Code Example

Related Patterns

Search Settings Group Settings

Literature

Categories: Settings