Projects/Usability/HIG/GroupBox: Difference between revisions
No edit summary |
|||
| (4 intermediate revisions by 2 users not shown) | |||
| Line 2: | Line 2: | ||
== Purpose == | == Purpose == | ||
A ''group box'' is a labeled rectangular | 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 == | == Example == | ||
== Guidelines == | == Guidelines == | ||
=== Is this the right control === | === Is this the right control === | ||
* Always use a group box to arrange related controls. | * 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 === | === Behavior === | ||
| Line 17: | 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. | ||
* 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.