Difference between revisions of "Projects/Usability/HIG/Tabs Pages"

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(New page: ==Tabs and Pages in Dialogs== '''General Guidelines''' If a control affects only one tab or page in the dialog, place it on that tab/page. If it affects every tab/page in the dialog, plac...)
 
(Added Implementation section)
 
(6 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
==Tabs and Pages in Dialogs==
 
==Tabs and Pages in Dialogs==
  
'''General Guidelines'''
 
 
If a control affects only one tab or page in the dialog, place it on that tab/page. If it affects every tab/page in the dialog, place it outside, for example beside the window's OK and Cancel buttons.
 
If a control affects only one tab or page in the dialog, place it on that tab/page. If it affects every tab/page in the dialog, place it outside, for example beside the window's OK and Cancel buttons.
  
 
Make sure changes on one tab will not change options on another tab.
 
Make sure changes on one tab will not change options on another tab.
 
  
 
===Tabbed Dialogs===
 
===Tabbed Dialogs===
  
 
'''When to Use'''
 
'''When to Use'''
 +
 
Use tabbed dialogs when you have a limited number of tabs (max. 6).
 
Use tabbed dialogs when you have a limited number of tabs (max. 6).
 
If you cannot see all the tabs without scrolling or splitting them into multiple rows, you are probably using too many and should use a paged dialog instead.
 
If you cannot see all the tabs without scrolling or splitting them into multiple rows, you are probably using too many and should use a paged dialog instead.
  
 +
[[File:Tabs_good.png]]
 +
GOOD
 +
 +
[[File:Tabs_bad.png]]
 +
BAD
  
 
===Paged Dialogs===
 
===Paged Dialogs===
  
 
'''When to Use'''
 
'''When to Use'''
 +
 
Always use paged dialogs for configuration dialogs - assuming that there is more than one section of options to be configured.
 
Always use paged dialogs for configuration dialogs - assuming that there is more than one section of options to be configured.
 
For other dialogs, use paged dialogs if there are too many tabs to put them into a tabbed dialog.
 
For other dialogs, use paged dialogs if there are too many tabs to put them into a tabbed dialog.
  
 +
[[File:Paged_dialog.png]]
  
 +
== Implementation ==
 +
* [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKPageDialog.html KPageDialog].
 +
*  [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKConfigDialog.html KConfigDialog]
  
===Accessibility===
+
== See Also ==
Do not assign accelerator keys to tab and paged dialog labels. Assign an access key to every other control on each page, however.
+
 
+
 
+
=== See Also ===
+
 
* [[Projects/Usability/HIG/Dialogs|Dialogs]]
 
* [[Projects/Usability/HIG/Dialogs|Dialogs]]

Latest revision as of 16:45, 27 June 2013

Contents

[edit] Tabs and Pages in Dialogs

If a control affects only one tab or page in the dialog, place it on that tab/page. If it affects every tab/page in the dialog, place it outside, for example beside the window's OK and Cancel buttons.

Make sure changes on one tab will not change options on another tab.

[edit] Tabbed Dialogs

When to Use

Use tabbed dialogs when you have a limited number of tabs (max. 6). If you cannot see all the tabs without scrolling or splitting them into multiple rows, you are probably using too many and should use a paged dialog instead.

Tabs good.png GOOD

Tabs bad.png BAD

[edit] Paged Dialogs

When to Use

Always use paged dialogs for configuration dialogs - assuming that there is more than one section of options to be configured. For other dialogs, use paged dialogs if there are too many tabs to put them into a tabbed dialog.

Paged dialog.png

[edit] Implementation

[edit] See Also


This page was last modified on 27 June 2013, at 16:45. This page has been accessed 3,455 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