From KDE-HIG_Wiki

Configuration Dialogs

Configuration dialogs allow the user to make permanent changes to the application setup.

Designing configuration dialogs

Guidelines

Options should be grouped in categories (pages) and groups of related actions (tabs, group boxes).

Selecting the right options

• Do not overload your configuration dialogs. Consider carefully if a configuration option is really required.

Dialog navigation

• Use a paged configuration dialog and tabs as second-level navigation.
• Avoid the usage of tree views in the paged dialog's sidebar.

How to group the options

• Create categories of related options and provide them as pages in a configuration dialog. Group the actions along their context of use, not along technical relations (e.g. "Appearance", "Behavior", "Notifications").
• Keep the number of categories between 3 and 6.
• Inside the categories, create meaningful groups. Put related groups on tabs.
• Keep the number of tabs between 2 and 4.
• Don't force the user to scroll. Keep the number of options on a tab in the visible space.
• Try to avoid "orphaned" options which are not related to any other ones.

Even if all widgets fit onto this 800x600 dialog, it looks bloated. Separate the options and make two tabs instead (Global Settings and Netscape Plugins)

Dialog layout

• Design configuration dialogs to be between 600x450 and 800x600 Pixels.
• Make sure there is at least one third of white space, do not overload the panel!
• Set the dialog's minimum size to fit the largest panel within the dialog - but don't make it bigger than 800x600 Pixels! Otherwise reduce the number of options on this tab.
• Make sure all dialog pages are sized equally, so the dialog does not resize.
• Provide vertical and horizontal scrollbars on each tab (hide them by default). This allows users who require big font sizes to reach all contents while they can see the tab titles and reach the OK/Cancel buttons.

Wording

• Page title in the left navigation bar and the title on the page should correspond.

Folded widget

Advanced button

Advanced page

Advanced sections

• Separate advanced preferences from frequently used ones. However make sure to present the advanced preferences in context:
  • If a group has only a few advanced settings, hide them under a folded widget.
  • If a group has more advanced options, hide them under a button.
• In case you have advanced options that don't fit into existing groups or categories, introduce a dedicated "Advanced" page in your configuration dialog.

Default options for the section Behavior.

Undoing Changes

• Provide an option to undo changes for each page and the overall dialog.
• As long as there is no sophisticated undo framework for configuration dialogs, offer the following options in a Menu Button:
  • Default [page title] e.g. "Default Fonts"
  • Default All Settings
• Horizontally align the Defaults button with the pages.

Standard sections

Fonts

Use the following widget to set up fonts:

Colors

Use the following widget to set up colors:

If multiple colors have to be set up, you can provide them in a list view.

Never use this widgets to specify multiple color roles:

Appearance

If you provide both, font and background color settings, create an "Appearance" page.

Use the following widget for simple font and background settings:

If multiple items can be configured, you can provide them in a list view.

Notifications

Apart from the default KDE notifications dialog, your application may offer other notification means like on-screen display or highlighting. Other than in KDE 3.x, move all notification-related settings into the settings dialog and create a "Notifications" page.

Plugins

Rationale

Implementation Suggestions

Accessibility Notes

See Also

Related To