Ubuntu Wiki

Todo:

• Develop specifications for each part of a theme, from windows down to a per widget level.
• List what each widget needs to get across about itself. Continue with the how.
• Describe relationships between widgets (example: a group of radio buttons and a combo-box both stand for a selection of one item out of a list)

Panels

• Panels need to be clearly separated from the background and windows. However, they are related to menu and tool bars and this can be shown.
• For a top panel, it must be clearly distinct from a window titlebar.

Windows

• Clearly separate the window area from the surrounding and other windows
• Show the availability or unavailability of means of manipulation, for closing, minimizing, maximizing, moving and resizing.
• Indicate which window has focus
• Indicate if a window can be resized or not

Non-Interactive Widgets

Non-interactive widgets have to make it clear that they are not click- or drag-able. Especially progressbars have to be clearly distinct from scrollbars and sliders.

• Labels
• Frames
• Separators
• Progress bars

Interactive Widgets

• Offer a target area.
• Give a hint at possible interaction. Can the widget be clicked on and/or dragged? This possibilities should always be shown in the same or similar fashion.
• Ideally indicate if the pointer is in the target area before an action is taken (prelight).
• Visually respond to an action like clicking or dragging.
• Indicate whether the widget has input focus (note the separated keyboard and enter-key focus in dialogs).
• Command Buttons. There is a special case of focus-handling in dialogs: The Default button of the dialog (for example "Open" in the "Open File" dialog) will receive Enter-key events, even if the general keyboard focus is on another widget that doesn't react to Enter itself.
• Toggle Buttons
• Check Boxes
• Radio Buttons
• Menubars
• Toolbars

Notebook

A notebook needs to communicate that it allows to make one of several areas visible, while all of these areas and the options offered on them persist.

• Expanders
• Scrollbars

Comboboxes

A combobox allows to select always one item from a list and is therein like a group of radio buttons.

• Combobox Entries
• Text Entries
• Spin Buttons
• Sliders
• List Views
• Icon Views
• Tree Views