Difference between revisions of "Projects/Usability/HIG/GroupBox"

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(Appearance)
(One intermediate revision by the same user not shown)
Line 23: Line 23:
 
* Label the group box with a descriptive caption.
 
* Label the group box with a descriptive caption.
 
* Do not assign an access key to the group box’ caption.
 
* Do not assign an access key to the group box’ caption.
* Use a 'raised' shadow if the frame is used to convey relationship.  
+
* Set the group box or frame shadow to 'flat' to provide the consistent spacing required to convey relationship.
 +
 
 
== Implementation ==
 
== Implementation ==
  
 
[[Category:Usability]][[Category:Behavior]][[Category:Viewing_and_Navigation]][[Category:Grouping]]
 
[[Category:Usability]][[Category:Behavior]][[Category:Viewing_and_Navigation]][[Category:Grouping]]

Revision as of 16:14, 2 June 2014


Purpose

A group box is a labeled rectangular area that surrounds a set of related controls. A frame (also known as panel) is an unlabeled rectangular area that can be used to mark relationship as well.

Both, group box and frame are a way to show relationships visually; it provides no additional functionality.

Example

Guidelines

Is this the right control

  • Always try to use a group box to arrange related controls.
  • Use a frame to arrange related controls that cannot be labeled.
  • Do not group single controls.
  • Consider to communicate relationship by layout only.

Behavior

  • Do not nest grouping elements; use layout to show relationships within a group.
  • Do not place controls in group box’ caption.
  • Do not disable groups. To indicate that a group of controls doesn't currently apply, disable all the controls within the group, but not the group itself.
  • Put a splitter between aligned grouping controls.

Appearance

  • Label the group box with a descriptive caption.
  • Do not assign an access key to the group box’ caption.
  • Set the group box or frame shadow to 'flat' to provide the consistent spacing required to convey relationship.

Implementation


Content is available under Creative Commons License SA 4.0 unless otherwise noted.