
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><style type="text/css">.felamimail-body-blockquote {margin: 5px 10px 0 3px;padding-left: 10px;border-left: 2px solid #000088;} </style></head><body>I merged the old dialogs page with the tabs page (http://techbase.kde.org/Projects/Usability/HIG/Tabs_Pages) and added some ideas. Probably there is a lot more to say about dialogs.<br><br>Viewing and Navigation > Access functions<br>* Follow the guidelines for dialogs for secondary windows. <br>http://techbase.kde.org/Projects/Usability/HIG/Dialogs<br><br>== Purpose ==<br>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.<br><br>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.<br>== Guidelines ==<br><br>=== Is this the right control? ===<br>* Use a dialog to structure the work flow. For instance, the functions Open, Save, Find need user input or confirmation. In particular, dialogs are expected by users for configuration.<br>* Do not use dialogs if the flow must not get interrupted. In this case prefer inline controls.<br>* Consider to use alternative ways for communication with users like [[Projects/Usability/HIG/Tooltip| tool-tip]] or [[Projects/Usability/HIG/MessageWidget| message panel]].<br>* Always use standard dialogs, if available.<br>=== Behavior ===<br>* Do not apply dialog boxes that require the use of a scroll bar.<br>* Do not include a menu bar or status bar in dialogs.<br>* Do not display more than one owned choice dialog at a time from an owner choice dialog. <br>* Always keep dialogs on top of their parent.<br>::{|<br>| [[Image:DialogPositionParentBad.png]]<br>| {{BadUsability}}<br>|-<br>| [[Image:DialogsPositioningParentGood.png]]<br>| {{GoodUsability}}<br>|}<br>::<br>* 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.<br>* Do not nest dialogs more than two levels deep. For example 'Configuration dialog > Advanced dialog' is ok, 'Configuration dialog > Advanced dialog > Further settings dialog' is too deep.<br>* Avoid dialogs that contain only one or two options. If possible, use direct selection or inline-editing instead. <br>* 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]].<br>* 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. <br>* Provide a clear way of leaving the modal dialog, such as a Cancel button.<br>* When the dialog is used to inform about an unexpected condition that needs interaction, follow the guidelines for [[Projects/Usability/HIG/Messages|message dialogs]].<br><br>=== Appearance ===<br>* 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. <br>::{|<br>| [[Image:Tabs_bad.png]]<br>| {{BadUsability}}<br>|-<br>| [[Image:Tabs_good.png]]<br>| {{GoodUsability}}<br>|}<br>::<br>* 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.<br>::{|<br>| [[Image:Paged_dialog.png]]<br>| {{GoodUsability}}<br>|}<br>::<br>* Dialogs should not be bigger than 800x600 pixels and should always be resizable<br>* Make sure there is at least one third white space, do not overload the panel.<br>* Consider the common reading direction from left to right and top to bottom.<br>* Dialogs are grouped in meaningful sections. The actions are grouped along their context of use, not along technical relations.<br>* Provide a title to each section.<br>* Follow the guidelines for [[Projects/Usability/HIG/Alignment| alignment]].<br><br>== Implementation ==<br>* [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKPageDialog.html KPageDialog].<br>* [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKConfigDialog.html KConfigDialog]<br>* [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKDialog.html KDialog]<br><br></body></html>