|
|
| (8 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| == Guidelines ==
| | {{ Moved To Community | KDE_Visual_Design_Group/HIG/Dialogs }} |
| === Positioning ===
| |
| * Always keep dialogs on top of their parent.
| |
| ::{|
| |
| | [[Image:DialogPositionParentBad.png]]
| |
| | <font color="red">'''Bad'''</font>
| |
| |-
| |
| | [[Image:DialogsPositioningParentGood.png]]
| |
| | <font color="green">'''Good'''</font>
| |
| |}
| |
| ::This is usually taken care of by the window manager. But in composed applications, focus problems may occur. Check carefully in this case.
| |
| * If reference in the parent window is required, make sure your dialog does not cover relevant parts. <br><small>For example a find dialog should neither be centered, nor cover a search result.</small>
| |
| | |
| === Interaction ===
| |
| * Set input focus on confirmation button.
| |
| | |
| === Reduce the dialog flood ===
| |
| * Do not nest dialogs more than two levels deep. <br><small>For example "Configuration dialog > Advanced dialog" is ok, "Configuration dialog > Advanced dialog > Further settings dialog" is too deep.</small>
| |
| * Avoid dialogs that contain only one or two options. If possible, use [[Design_and_Layout:Interaction:Input#Inline Editing|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). Use [[Guidelines:Info Panel|info panels]] instead.
| |
| | |
| === Modal dialogs ===
| |
| * 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.
| |
| | |
| === Dialog Layout ===
| |
| | |
| * Dialogs should not be bigger than 800x600 pixels and should always be resizable
| |
| * Make sure there is at least one third white space, do not overload the panel.
| |
| * The reading direction in dialogs is left to right, top to bottom.
| |
| * Dialogs are grouped in meaningful sections. The actions are grouped along their context of use, not along technical relations.
| |
| * Each section has a title.
| |
| * Labels are right-aligned, input widgets are left aligned.
| |
| * Provide one or two major vertical axis in your dialog that guide the user's attention.<br>The vertical line where the right aligned labels and the left aligned input widgets meet is one such example.
| |
| * Widgets which are subordinate to another widget are indented. If their enabled state depends on the parent widget, create an appropriate slot.
| |
| | |
| Otherwise, follow the guidelines described in [[Projects/Usability/HIG/Form_Label_Alignment|Form: Label Alignment]]
| |
| | |
| == Implementation ==
| |
| * [http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKDialog.html KDialog]
| |
| | |
| == See Also ==
| |
| * [[Projects/Usability/HIG/Tabs_Pages|Tabs and Pages in Dialogs]]
| |
| * [[Projects/Usability/HIG/Form_Label_Alignment|Form: Label Alignment]]
| |
