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

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(Behavior)
(HIG moved to community)
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
__NOTOC__
+
{{ Moved To Community | KDE_Visual_Design_Group/HIG/Dialogs }}
 
+
== Purpose ==
+
A ''dialog'' is a secondary window that allows users to perform a command, asks users a question, or provides users with information or progress feedback.
+
 
+
Dialogs can be modal and require users to complete and close before continuing with the owner window, or modeless, i.e. users can switch between dialogs and parent window.
+
== Guidelines ==
+
 
+
=== Is this the right control? ===
+
* Use a dialog to structure the work flow. For instance, the functions Open, Save, Advanced Search need user input or confirmation. In particular, dialogs are expected by users for configuration.
+
* Do not use dialogs if the flow must not get interrupted. In this case prefer inline controls.
+
* Consider to use alternative ways for communication with users like [[Projects/Usability/HIG/Tooltip| tool-tip]] or [[Projects/Usability/HIG/MessageWidget| message panel]].
+
* Always use standard dialogs, if available.
+
 
+
=== Behavior ===
+
* Do not apply dialog boxes that require the use of a scroll bar.
+
* Do not include a menu bar or status bar in dialogs.
+
* Do not display more than one owned choice dialog at a time from an owner choice dialog.
+
* Always keep dialogs on top of their parent.
+
::{|
+
| [[Image:DialogPositionParentBad.png]]
+
| {{BadUsability}}
+
|-
+
| [[Image:DialogsPositioningParentGood.png]]
+
| {{GoodUsability}}
+
|}
+
::
+
* Set input focus on confirmation button by default. But set focus on disruptive button (Cancel, Don't apply or the like) if the dialog comprises of critical confirmation.
+
* Avoid to nest dialogs, especially in case of modal dialogs.
+
* Avoid dialogs that contain only one or two options. If possible, use direct selection or inline-editing instead.
+
* Do not use dialogs to display non-critical messages which do not require any further user interaction (typically dialogs with a single "OK" or "Close" button). Consider to use [[Projects/Usability/HIG/Tooltip| tool-tips]] or a [[Projects/Usability/HIG/MessageWidget|message panel]].
+
* Use modal dialogs only if allowing interaction with other parts of the application while the window is opened could cause data loss or some other serious problem.
+
* Provide a clear way of leaving the modal dialog, such as a Cancel button.
+
* When the dialog is used to inform about an unexpected condition that needs interaction, follow the guidelines for [[Projects/Usability/HIG/Messages|message dialogs]].
+
 
+
=== Appearance ===
+
* 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.
+
::{|
+
| [[Image:Tabs_bad.png]]
+
| {{BadUsability}}
+
|-
+
| [[Image:Tabs_good.png]]
+
| {{GoodUsability}}
+
|}
+
::
+
* 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.
+
::{|
+
| [[Image:Paged_dialog.png]]
+
| {{GoodUsability}}
+
|}
+
::
+
* Dialogs should not be bigger than two thirds of the screen size and should always be resizable. Take care about high resolution displays (i.e. QXGA and more).
+
* Save and restore user adjustments of dialog size.
+
* Make sure there is at least one third white space, do not overload the panel.
+
* Consider the common reading direction from left to right and top to bottom.
+
* Dialogs are grouped in meaningful sections. The actions are grouped along their context of use, not along technical relations.
+
* Provide a title to each section.
+
* Follow the guidelines for [[Projects/Usability/HIG/Alignment| alignment]].
+
 
+
== 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]
+
* [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKDialog.html KDialog]
+

Latest revision as of 11:26, 4 August 2016

This page is now on the community wiki.


This page was last modified on 4 August 2016, at 11:26. Content is available under Creative Commons License SA 3.0 as well as the GNU Free Documentation License 1.2 unless otherwise noted.