layout | title | category | status | tags | |||||
---|---|---|---|---|---|---|---|---|---|
page |
Dialogs |
elements |
ready |
|
This section provides information on layout specifications for dialogs. Dialogs typically contain the following areas:
- Title
- Content area for instructional text
- Footer for providing commit buttons
The content area of a single page dialog should have uniform padding of 20px.
Single page dialog example
For multiple page dialogs, the top and left padding should stay consistent at 20px. The right and bottom padding will vary between pages but the page with the largest content area should have 20px padding. The dialog should not change size between pages.
The tabs within a tabbed dialog will be flush against the window frame but the content of each tab should use the standard padding. The dialog should be as large as the tab with the most content. The dialog should not change size between tabs.
Text is measured from the baseline of one line to the top of the capital letter on the next line.
XAML code snippet
This is a snippet of code for creating a footer in a dialog.
{% highlight xml %} <Grid.RowDefinitions> </Grid.RowDefinitions> <!—This is the main content section—>
<!—End main content section—>
<!--This is the footer section-->
<Border Background="{StaticResource NIBackgroundBrush}" BorderBrush="{StaticResource NIGrayNeutral68Brush}" BorderThickness="0,1,0,0" Height="45" VerticalAlignment="Bottom" Grid.Row="1">
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch" Margin="20,0,10,0" HorizontalAlignment="Right">
<StackPanel.Resources>
<Style TargetType="{x:Type shell:ShellButton}">
<Setter Property="Margin" Value="0,0,10,0"/>
</Style>
</StackPanel.Resources>
<shell:ShellButton Content="Fake button" Height="24" MinWidth="70" Padding="10,0,10,1" />
<shell:ShellButton Content="Close" Height="24" MinWidth="70" IsCancel="True" Padding="10,0,10,1" />
</StackPanel>
</Border>
Don't show this (item) again
Provide this option to allow the user to ignore a recurring dialog box when it is the only option. Try to eliminate the need for the dialog, if possible.
Set the value to false
by default.
Label | When to use |
---|---|
OK | Applies the changes or commits the task and closes the dialog. Don't use for error messages (errors are never OK). Instead, use Close. If a dialog performs a specific task, use a specific label convention [Do it / Don't do it] instead. Don't use to respond to questions. |
Apply | Applies the pending changes but leaves the dialog open. |
Yes / No | Response to Yes⁄No questions. Must always be in a pair. If phrasing a specific response is long or awkward. Don't use if the meaning of No is unclear. |
[Do it] ⁄ [Don't do it] | When you can provide specific button labels. |
Cancel | Discards all changes, reverts to the previous state with no side effect, and closes the window. When all pending changes or actions can be discarded and side effects undone. Don't use if the meaning on Cancel is unclear. |
Close | Closes the window without discarding changes and side effects. When users can’t make changes, such as informational dialogs. |
Stop | Stops a currently running task and closes the window. When work in progress can't be discarded. Typically used with progress bars. |
For Windows OS, the order of the commit buttons are:
- OK ⁄ [Do it] ⁄ Yes
- [Don't do it] ⁄ No
- Cancel ⁄ Close
- Apply (if present)
Do not use generic Help buttons, if possible. Strive to give user contextual content when/where they need it instead of using a generic Help button. Put the Help button last if it is unavoidable.
Generally, commit confirmations are unnecessary and annoying. But confirming a commit may be appropriate if the action is potentially catastrophic and/or might result in a significant loss of user data, time, or effort.
Close button on the title bar must have the same effect as clicking Cancel or Close. Don't include instructions in the text, such as “Press OK to continue”, or “Cancel to stay on the current page”. Instead, use specific commit button labels or change the text.