Difference between revisions of "KDE Visual Design Group/HIG/Dialogs"

Jump to: navigation, search
(Move notice)
(14 intermediate revisions by 5 users not shown)
Line 1: Line 1:
== Dialogs ==
'''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.
{{Note|This page is now on [[https://hig.kde.org/components/navigation/dialog.html https://hig.kde.org/]]}}
'''Position of dialogs'''
* Always keep dialogs on top of their parent. <br><small>This is usually taken care of by the window manager. But in composed applications, focus problems may occur. Check carefully in this case.</small>
* 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>
* Set input focus on confirmation button.
'''Only use modal dialogs when''':
* Use modal dialogs only if allowing interaction with other parts of the application while the window is open could cause data loss or some other serious problem.
Provide a clear way of leaving the modal dialog, such as a Cancel button in an alert.
== Dialog Layout ==
* Design dialogs not to 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. <br><small>In a row, related options may be positioned next to each other, like "Access" and "Show time as" like in the example screenshot.</small>
* 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 [[KDE_Visual_Design_Group/HIG/Form_Label_Alignment|Form: Label Alignment]]
=== See Also ===
* [[KDE_Visual_Design_Group/HIG/Tabs_Pages|Tabs and Pages in Dialogs]]
* [[KDE_Visual_Design_Group/HIG/Form_Label_Alignment|Form: Label Alignment]]

Latest revision as of 17:00, 5 February 2019

This page is now on [https://hig.kde.org/]

This page was last edited on 5 February 2019, at 17:00. Content is available under Creative Commons License SA 4.0 unless otherwise noted.