1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Buttons</title><meta name="generator" content="DocBook XSL Stylesheets V1.65.1"><link rel="home" href="index.html" title="GNOME Human Interface Guidelines 2.0"><link rel="up" href="controls.html" title="Chapter6.Controls"><link rel="previous" href="controls-sliders.html" title="Sliders"><link rel="next" href="controls-check-boxes.html" title="Check Boxes"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Buttons</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="controls-sliders.html">Prev</a></td><th width="60%" align="center">Chapter6.Controls</th><td width="20%" align="right"><a accesskey="n" href="controls-check-boxes.html">Next</a></td></tr></table><hr></div><div class="sect1" lang="en"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="controls-buttons"></a>Buttons</h2></div></div><div></div></div><p>A button initiates an action when the user clicks it.</p><div class="figure"><a name="id2540641"></a><p class="title"><b>Figure6.9.Typical buttons in a modal dialog</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="190"><tr style="height: 36px"><td><img src="images/controls-buttons.png" height="36" alt="OK and Cancel buttons as found in a modal dialog"></td></tr></table></div></div><div class="itemizedlist"><p class="title"><b>Guidelines</b></p><ul type="disc"><li><p>Label all buttons with imperative verbs, using <a href="design-text-labels.html#layout-capitalization" title="Capitalization">header capitalization</a>. For
example, <span class="guilabel">Save</span>, <span class="guilabel">Sort</span> or
<span class="guilabel">Update Now</span>. Provide an access key in the label
that allows the user to directly activate the button from the
keyboard.</p></li><li><p>After pressing a button, the user should expect to see the
result of their action within 1 second. For example, closing the
window or opening another. See <a href="feedback.html" title="Chapter7.Feedback">Chapter7, <i>Feedback</i></a> for
guidance on what to do if your application cannot respond this
quickly.</p></li><li><p>Use an ellipsis (...) at the end of the label if the action
requires further input from the user before it can be carried out. For
example, <span class="guilabel">Save As...</span> or <span class="guilabel">Find...</span>.
Do not add an ellipsis to commands like <span class="guilabel">Properties</span>,
<span class="guilabel">Preferences</span>, or <span class="guilabel">Settings</span>, as
these open windows that do not <span class="emphasis"><em>require</em></span> further
input.</p></li><li><p>Once a dialog is displayed, do not change its default button
from one button to another. You may add or remove default status from
the same button if it helps prevent user error, however. Changing the
default from one button to another can be confusing and inefficent,
especially for users relying on assistive technologies.</p></li><li><p>If your button can display text, an icon, or both, choose which
label to display at runtime according to the user's preference in
the GNOME Menus and Toolbars Preferences dialog. However, you may
over-ride this preference when there is no suitable icon to describe
the button's action graphically, for example.</p></li><li><p>Do not use more than one or two different widths of button in
the same window, and make all of them the same height. This will help
give a pleasing uniform visual appearance to your window that makes it
easier to use.</p></li><li><p>Do not assign actions to double-clicking or right-clicking a
button. Users are unlikely to discover these actions, and if they do,
it will distort their expectations of other buttons on the desktop.</p></li><li><p>Make invalid buttons insensitive, rather than popping up an
error message when the user clicks them.</p></li></ul></div><p>In a dialog, one button may be made the default button, which is
shown with a different border and is activated by pressing
<span><b class="keycap">Return</b></span>. Often this will be the <span class="guibutton">OK</span>
or equivalent button. However, if pressing this button by mistake could
cause a loss of data, do not set a default button for the window. Do not
make <span class="guibutton">Cancel</span> the default button instead. See <a href="windows-utility.html#default-buttons" title="Default Buttons">the section called “Default Buttons”</a> for more information.</p><p>If it does not make sense to have a default button until several
fields in the dialog have been correctly completed—for example, both the
<span class="guilabel">Username</span> and <span class="guilabel">Password</span> fields in
a login dialog—do not set the default button until they have both been
completed.</p></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="controls-sliders.html">Prev</a></td><td width="20%" align="center"><a accesskey="u" href="controls.html">Up</a></td><td width="40%" align="right"><a accesskey="n" href="controls-check-boxes.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">Sliders</td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top">Check Boxes</td></tr></table></div></body></html>
|
