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

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(Appearance)
 
(4 intermediate revisions by 2 users not shown)
Line 2: Line 2:
  
 
== Purpose ==
 
== Purpose ==
A ''group box'' is a labeled rectangular frame that surrounds a set of related controls. A group box is a way to show relationships visually; it provides no additional functionality.
+
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]]

Latest revision as of 16:14, 2 June 2014


[edit] 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.

[edit] Example

[edit] Guidelines

[edit] 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.

[edit] 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.

[edit] 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.

[edit] Implementation


This page was last modified on 2 June 2014, at 16:14. This page has been accessed 1,596 times. Content is available under Creative Commons License SA 3.0 as well as the GNU Free Documentation License 1.2.
KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal