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

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
Line 1: Line 1:
 
== Dialogs ==
 
== 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>  
'''Reduce the dialog flood'''  
+
* Avoid dialogs that contain only one or two options. If possible, use [[Design_and_Layout:Interaction:Input#Inline Editing|inline-editing]] instead.  
* Do not nest dialogs more than two levels deep.  
+
* 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.
<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 inline-editing instead.  
+
<small> For example, to rename a list item, do not show a dialog but allow the user to change the label inside the list</small>
+
 
+
* 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 info panels instead.
+
<small>See [[Projects/Usability/HIG/Messages|Messages]]) </small>
+
  
  
 
'''Position of dialogs'''
 
'''Position of dialogs'''
* Always keep dialogs on top of their parent.  
+
* 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>
<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>
 
+
* If reference in the parent window is required, make sure your dialog does not cover relevant parts.  
+
<small>For example a find dialog should neither be centered, nor cover a search result. </small>  
+
  
  
Line 28: Line 18:
 
* 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.  
 
* 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.
 
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.
 +
* Make sure there is at least one third white space, do not overload the panel.
 +
 +
Otherwise, follow the guidelines described in [[Projects/Usability/HIG/Form_Label_Alignment|Form: Label Alignment]]
 +
  
  
 
=== See Also ===
 
=== See Also ===
 
* [[Projects/Usability/HIG/Tabs_Pages|Tabs and Pages in Dialogs]]
 
* [[Projects/Usability/HIG/Tabs_Pages|Tabs and Pages in Dialogs]]
 +
* [[Projects/Usability/HIG/Form_Label_Alignment|Form: Label Alignment]]

Revision as of 13:59, 12 August 2008

Dialogs

Reduce the dialog flood

  • 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.
  • Avoid dialogs that contain only one or two options. If possible, use 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 info panels instead.


Position of dialogs

  • Always keep dialogs on top of their parent.
    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.
    For example a find dialog should neither be centered, nor cover a search result.


Interaction

  • 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.
  • Make sure there is at least one third white space, do not overload the panel.

Otherwise, follow the guidelines described in Form: Label Alignment


See Also


KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal