1
|
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Labels and Tooltips</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="toolbars.html" title="Chapter5.Toolbars"><link rel="previous" href="toolbars-controlling-display.html" title="Controlling Display and Appearance"><link rel="next" href="controls.html" title="Chapter6.Controls"></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">Labels and Tooltips</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="toolbars-controlling-display.html">Prev</a></td><th width="60%" align="center">Chapter5.Toolbars</th><td width="20%" align="right"><a accesskey="n" href="controls.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="toolbars-labels-tooltips"></a>Labels and Tooltips</h2></div></div><div></div></div><p>Most controls that appear on your toolbar will require a text label that appears on, below or beside it. Keep this description as short as possible, preferably a single verb. For example, <span class="guibutton">Open</span> or <span class="guibutton">Undo</span>.</p><p>Every control that appears on your toolbar should have a tooltip, whether or not that control has an associated text label. The tooltip should be a concise description of the control, but should provide more information than its text label where possible. For example, <span class="guilabel">Open an existing document</span>, or <span class="guilabel">Undo last operation</span>.</p><div class="itemizedlist"><p class="title"><b>Guidelines</b></p><ul type="disc"><li><p>For buttons that correspond directly to menu items, make the text label the same as the menu item, but without any trailing ellipsis. For example, <span class="guibutton">Open</span>, <span class="guibutton">Save</span>.</p></li><li><p>Do not provide access keys for toolbar buttons. Since toolbars are in the same keyboard focus context as the menubar, it would be too difficult to provide unique access keys for every menu title and toolbar control. Toolbars are primarily intended as a shortcut for mouse users, although they are keyboard-navigable for accessibility reasons.</p></li><li><p>If your toolbar is configured to show labels below button icons, show a label for every control on the toolbar. For example:</p><div class="figure"><a name="id2539322"></a><p class="title"><b>Figure5.3.Toolbar with labels under all buttons</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="476"><tr style="height: 58px"><td><img src="images/GtkToolbar_gedit.png" height="58" alt="Toolbar showing labels under all controls"></td></tr></table></div></div></li><li><p>If your toolbar is configured to show labels beside button icons rather than below them (using the "priority text" setting), do not show labels for every button. Show labels only for the buttons that will be most-frequently used. Choose no more than four such icons on any one toolbar, otherwise the effect will be diluted and the toolbar will become very wide. For example:</p><div class="figure"><a name="id2539376"></a><p class="title"><b>Figure5.4.Toolbar with "priority text" labels beside the first few buttons only</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="577"><tr style="height: 36px"><td><img src="images/EvoToolbar.png" height="36" alt='Toolbar with "priority text" labels beside the first few items only'></td></tr></table></div></div><p>If you are unsure which buttons will be most frequently used, choose the first few buttons on your toolbar and provide labels for those only.</p></li><li><p>Ensure all toolbar controls have tooltips. The tooltip should be more descriptive than the corresponding menu item, if it has one, but still concise. For example, <span class="guilabel">Create new document</span> for the <span class="guibutton">Open</span> toolbar button. Use sentence capitalization for tooltips—see <a href="design-text-labels.html#layout-capitalization" title="Capitalization">the section called “Capitalization”</a> for more information.</p></li></ul></div></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="toolbars-controlling-display.html">Prev</a></td><td width="20%" align="center"><a accesskey="u" href="toolbars.html">Up</a></td><td width="40%" align="right"><a accesskey="n" href="controls.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">Controlling Display and Appearance</td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top">Chapter6.Controls</td></tr></table></div></body></html>
|
