web-devel-2 r4618 - trunk/content/projects/gup/hig
- From: calum svn gnome org
- To: svn-commits-list gnome org
- Subject: web-devel-2 r4618 - trunk/content/projects/gup/hig
- Date: Mon, 29 Sep 2008 23:32:29 +0000 (UTC)
Author: calum
Date: Mon Sep 29 23:32:29 2008
New Revision: 4618
URL: http://svn.gnome.org/viewvc/web-devel-2?rev=4618&view=rev
Log:
Commit the right versions of the XML files this time :S
Modified:
trunk/content/projects/gup/hig/ChangeLog
trunk/content/projects/gup/hig/hig-book.xml
trunk/content/projects/gup/hig/hig-ch-checks.xml
trunk/content/projects/gup/hig/hig-ch-controls.xml
trunk/content/projects/gup/hig/hig-ch-desktop.xml
trunk/content/projects/gup/hig/hig-ch-feedback.xml
trunk/content/projects/gup/hig/hig-ch-icons-new.xml
trunk/content/projects/gup/hig/hig-ch-icons.xml
trunk/content/projects/gup/hig/hig-ch-input.xml
trunk/content/projects/gup/hig/hig-ch-language.xml
trunk/content/projects/gup/hig/hig-ch-layout.xml
trunk/content/projects/gup/hig/hig-ch-menus.xml
trunk/content/projects/gup/hig/hig-ch-principles.xml
trunk/content/projects/gup/hig/hig-ch-toolbars.xml
trunk/content/projects/gup/hig/hig-ch-whatsnew.xml
trunk/content/projects/gup/hig/hig-ch-windows.xml
Modified: trunk/content/projects/gup/hig/hig-book.xml
==============================================================================
--- trunk/content/projects/gup/hig/hig-book.xml (original)
+++ trunk/content/projects/gup/hig/hig-book.xml Mon Sep 29 23:32:29 2008
@@ -1,6 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.2//EN" "http://www.oasis-open.org/docbook/xml/4.2/docbookx.dtd"; [
-<!ENTITY whatsnew SYSTEM "hig-ch-whatsnew.xml">
<!ENTITY checks SYSTEM "hig-ch-checks.xml">
<!ENTITY controls SYSTEM "hig-ch-controls.xml">
<!ENTITY credits SYSTEM "hig-ch-credits.xml">
@@ -18,25 +17,17 @@
<!ENTITY toolbars SYSTEM "hig-ch-toolbars.xml">
<!ENTITY windows SYSTEM "hig-ch-windows.xml">
<!ENTITY bibliography SYSTEM "hig-ch-bibliography.xml">
+<!ENTITY whatsnew SYSTEM "hig-ch-whatsnew.xml">
]>
<book id="index">
<bookinfo>
- <author role="maintainer"><firstname>The GNOME Usability Project</firstname></author>
+ <author><firstname>The GNOME Usability Project</firstname></author>
<copyright>
<year>2002-2008</year>
-<holder>Calum Benson, Adam Elman, Seth Nickell, colin z robertson</holder>
+<holder>Calum Benson, Bryan Clark, Adam Elman, Seth Nickell, colin z robertson</holder>
</copyright>
<pubdate>2008-09-25</pubdate>
-<edition>2.2</edition>
-
-<abstract role="description">
-<para>This document tells you how to create applications that look right, behave
-properly, and fit into the GNOME user interface as a whole. It is written for
-interface designers, graphic artists and software developers who will be creating
-software for the GNOME environment. Both specific advice on making effective use
-of interface elements, and the philosophy and general design principles behind
-the GNOME interface are covered.</para>
-</abstract>
+<edition>2.3</edition>
<legalnotice>
<para>
@@ -60,12 +51,12 @@
</para>
</legalnotice>
-<title>GNOME Human Interface Guidelines 2.2</title>
+<title>GNOME Human Interface Guidelines 2.3</title>
</bookinfo>
-&whatsnew;
&intro;
+&whatsnew;
&principles;
&desktop;
&windows;
Modified: trunk/content/projects/gup/hig/hig-ch-checks.xml
==============================================================================
--- trunk/content/projects/gup/hig/hig-ch-checks.xml (original)
+++ trunk/content/projects/gup/hig/hig-ch-checks.xml Mon Sep 29 23:32:29 2008
@@ -67,7 +67,7 @@
<para>Test various GNOME themes to ensure that your application respects all the available settings.</para>
- <para>Test your application with black and white, high contrast themes and confirm that all information is still conveyed correctly. If you don't have a suitable high contrast GNOME theme available to test, print off some screenshots in black and white (not greyscale) and make sure all the important information is still visibleâ this will approximate what a high contrast theme user will see.</para>
+ <para>Test your application with black and white, high contrast themes and confirm that all information is still conveyed correctly. If you don't have a suitable high contrast GNOME theme available to test, print off some screenshots in black and white (not gray-scale) and make sure all the important information is still visibleâ this will approximate what a high contrast theme user will see.</para>
</sect2>
<sect2>
@@ -97,7 +97,7 @@
<para>If you intend your application to be translated into different languages, show draft designs of your application to the <ulink url="http://developer.gnome.org/projects/gtp/contact.html";>GNOME Translation Team</ulink>. They'll help you find potential translation problems, such as not leaving enough space for translated labels, shortcut keys that cause problems on a different keyboard layout, or using new terms in your app that are hard to translate.</para>
- <para>If possible, try out your application with users from the locales you are targeting. This will help you determine whether users understand how to use the application, if they perceive the graphics and colors the way you intended, and if there are words or images in the application that may cause offence to users of that locale. </para>
+ <para>If possible, try out your application with users from the locales you are targeting. This will help you determine whether users understand how to use the application, if they perceive the graphics and colors the way you intended, and if there are words or images in the application that may cause offense to users of that locale. </para>
</sect2>
</sect1>
Modified: trunk/content/projects/gup/hig/hig-ch-controls.xml
==============================================================================
--- trunk/content/projects/gup/hig/hig-ch-controls.xml (original)
+++ trunk/content/projects/gup/hig/hig-ch-controls.xml Mon Sep 29 23:32:29 2008
@@ -60,8 +60,7 @@
</imageobject>
<textobject>
- <phrase>Screenshot showing the visual appearance of sensitive and
- insensitive check box controls</phrase>
+ <phrase>Screenshot showing the visual appearance of sensitive and insensitive check box controls</phrase>
</textobject>
</mediaobject>
</figure>
@@ -109,7 +108,7 @@
<para>Your application needs to decide every time these controls are
displayed whether or not they are available for editing, depending on
- the writeable state of the GConf key that holds its value. In the
+ the writable state of the GConf key that holds its value. In the
simplest case, your code for each control could look like that in the
example below.</para>
@@ -145,9 +144,7 @@
</imageobject>
<textobject>
- <phrase>Screenshot showing disabled proxy controls in a web
- browser's property dialog, under the caption "Only the
- system administrator can change these settings"</phrase>
+ <phrase>Screenshot showing disabled proxy controls in a web browser's property dialog, under the caption "Only the system administrator can change these settings"</phrase>
</textobject>
</mediaobject>
</figure>
@@ -187,8 +184,7 @@
</imageobject>
<textobject>
- <phrase>Screenshot of part of a dialog, containing both single and
- multi-line entry fields</phrase>
+ <phrase>Screenshot of part of a dialog, containing both single and multi-line entry fields</phrase>
</textobject>
</mediaobject>
</figure>
@@ -219,7 +215,7 @@
place the text cursor at the end of the existing text and highlight
its contents (but don't overwrite the existing PRIMARY clipboard
selection<!-- FIXME: is this currently possible?-->). This makes it
- easy to immediately overtype or append new text, the two most common
+ easy to immediately overwrite or append new text, the two most common
operations performed on entry fields.</para>
</listitem>
@@ -235,8 +231,8 @@
<listitem>
<para>In an instant-apply <link linkend="windows-utility">property or
- preference window</link>, validate the contents of the entry field
- when it loses focus or when the window is closed, not after each keypress.
+ preference window</link>, validate and apply the contents of the entry field
+ when it loses focus or when the window is closed, but not after each keypress.
Exception: if the field accepts only a fixed
number of characters, such as a hexadecimal color code, validate and
apply the change as soon as that number of characters have been entered.</para>
@@ -262,9 +258,7 @@
</imageobject>
<textobject>
- <phrase>A text entry field in which the user must input a time,
- with the label "hh:mm" beside it to indicate the
- required format</phrase>
+ <phrase>A text entry field in which the user must input a time, with the label "hh:mm" beside it to indicate the required format</phrase>
</textobject>
</mediaobject>
</figure>
@@ -278,7 +272,7 @@
provide a <link linkend="controls-spin-boxes">spinbox</link> or <link
linkend="controls-sliders">slider</link> if the required input is one
of a fixed range of integers, or provide access to a <ulink
- url="http://developer.gnome.org/doc/API/2.0/gtk/gtkcalendar.html";>GtkCalendar</ulink>
+ url="http://developer.gnome.org/doc/API/2.0/gtk/GtkCalendar.html";>GtkCalendar</ulink>
control if the user has to enter a valid date:</para>
<figure>
@@ -297,9 +291,7 @@
</imageobject>
<textobject>
- <phrase>A text entry field in which the user must input a date,
- with a button labelled "Choose" beside it that opens a
- GtkCalendar control to simplify the task</phrase>
+ <phrase>A text entry field in which the user must input a date, with a button labeled "Choose" beside it that opens a GtkCalendar control to simplify the task</phrase>
</textobject>
</mediaobject>
</figure>
@@ -417,8 +409,7 @@
</imageobject>
<textobject>
- <phrase>A simple spin box used to specify the spacing between
- applets on a panel</phrase>
+ <phrase>A simple spin box used to specify the spacing between applets on a panel</phrase>
</textobject>
</mediaobject>
</figure>
@@ -457,6 +448,14 @@
column of controls. In this case, ensure the right edges of the
relevant controls are also aligned.</para>
</listitem>
+ <listitem>
+ <para>In an instant-apply <link linkend="windows-utility">property or
+ preference window</link>, validate and apply the contents of a spin box
+ when a spin button is clicked, when it loses focus or when the window is closed, but not after each keypress.
+ Exception: if the field accepts only a fixed
+ number of characters, such as a hexadecimal color code, validate and
+ apply the change as soon as that number of characters have been entered.</para>
+ </listitem>
</itemizedlist>
</sect1>
@@ -484,8 +483,7 @@
</imageobject>
<textobject>
- <phrase>A slider control used to change the stereo audio balance
- between left and right speakers</phrase>
+ <phrase>A slider control used to change the stereo audio balance between left and right speakers</phrase>
</textobject>
</mediaobject>
</figure>
@@ -550,8 +548,7 @@
</imageobject>
<textobject>
- <phrase>Three slider controls used to change RGB values, each
- with a spinbox beside them to facilitate direct numeric entry</phrase>
+ <phrase>Three slider controls used to change RGB values, each with a spinbox beside them to facilitate direct numeric entry</phrase>
</textobject>
</mediaobject>
</figure>
@@ -619,7 +616,7 @@
<para>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,
+ default from one button to another can be confusing and inefficient,
especially for users relying on assistive technologies.</para>
</listitem>
@@ -670,9 +667,10 @@
<sect1 id="controls-check-boxes">
<title>Check Boxes</title>
- <para>Check boxes are used to show or change a setting. Its two states,
- set and unset, are shown by the presence or absence of a checkmark in the
- labelled box.</para>
+ <para>
+ A check box is a control used to turn something on and off.
+ Its state is shown by the presence or absence of a checkmark in the
+ labeled box.</para>
<figure>
<title>A typical group of check boxes</title>
@@ -725,6 +723,23 @@
</listitem>
<listitem>
+ <para>
+ A check box should express a positive and useful state or action.
+ For example, a checked check box
+ <guilabel>Warn me whenever a disk is nearly full</guilabel>
+ is more obviously useful than an unchecked check box
+ <guilabel>Ignore disk-full warnings</guilabel>.
+ Don’t implement a check box with a label beginning with
+ <guilabel>Don’t</guilabel>, <guilabel>Do not</guilabel>,
+ <guilabel>Hide</guilabel>, or similar;
+ instead, reverse its function so that the label can be positive.
+ And avoid beginning check box labels with words like
+ <guilabel>Enable</guilabel> or <guilabel>Use</guilabel>;
+ instead, reword them to express their usefulness.
+ </para>
+ </listitem>
+
+ <listitem>
<para>Label check boxes to clearly indicate the effects of both their
checked and unchecked states, for example, <guilabel>Show icons in
menus</guilabel>. Where this proves difficult, consider using two
@@ -747,11 +762,7 @@
</imageobject>
<textobject>
- <phrase>Two images: one showing a single check box ambiguously
- labelled "Progress bar in left of statusbar", the other
- making the choice explicit with radio buttons labelled
- "Left" and "Right" under the heading "Status
- bar progress indicator position:"</phrase>
+ <phrase>Two images: one showing a single check box ambiguously labeled "Progress bar in left of statusbar", the other making the choice explicit with radio buttons labeled "Left" and "Right" under the heading "Status bar progress indicator position:"</phrase>
</textobject>
</mediaobject>
</figure>
@@ -791,20 +802,17 @@
</imageobject>
<textobject>
- <phrase>Check boxes showing the Hidden, Readable and Writeable
- states of two selected files in Nautilus. Both files are hidden,
- neither are writeable, but one is readable. The Readable check
- box is therefore shown in its mixed state.</phrase>
+ <phrase>Check boxes showing the Hidden, Readable and Writable states of two selected files in Nautilus. Both files are hidden, neither are writable, but one is readable. The Readable check box is therefore shown in its mixed state.</phrase>
</textobject>
</mediaobject>
</figure>
<para>In this example, both selected files are hidden (since their
filenames start with "."), and the emblems on their icons show
- that neither file is writeable, but one is readable. The
+ that neither file is writable, but one is readable. The
<guilabel>Readable</guilabel> check box is therefore shown in its
mixed state. <remark>At time of writing, the exact visual appearance
- of a mixed state check box in gtk was undecided</remark>.</para>
+ of a mixed state check box in gtk was undecided.</remark></para>
<para>When a check box is in its mixed state:</para>
@@ -951,11 +959,7 @@
</imageobject>
<textobject>
- <phrase>Radio buttons showing the Thick, Thin and Dashed drawing
- styles of two selected shapes in a drawing application. One
- shape is drawn in the thick style, the other in the dashed
- style. The Thick and Dashed radio buttons are therefore shown in
- their mixed state, and the Thin radio button is unset.</phrase>
+ <phrase>Radio buttons showing the Thick, Thin and Dashed drawing styles of two selected shapes in a drawing application. One shape is drawn in the thick style, the other in the dashed style. The Thick and Dashed radio buttons are therefore shown in their mixed state, and the Thin radio button is unset.</phrase>
</textobject>
</mediaobject>
</figure>
@@ -963,14 +967,14 @@
<!-- CB-Fig: Show context for drawing application. -->
<para><remark>At time of writing, the exact visual appearance of a
- mixed state radio button in gtk was undecided</remark>. In this
+ mixed state radio button in gtk was undecided.</remark>In this
situation, clicking any radio button in the group should set the
clicked button, and unset all the others. Thereafter, the group should
behave like a normal radio button groupâ there is no way to reset a
radio button to its mixed state by clicking on it. Provide a
<guibutton>Reset</guibutton> button or equivalent in the window that
allows the previous mixed settings to be restored without closing the
- window or cancelling the dialog.</para>
+ window or canceling the dialog.</para>
</listitem>
<listitem>
@@ -1024,8 +1028,7 @@
</imageobject>
<textobject>
- <phrase>A group of four toggle buttons representing a choice of
- measurement units: inches, centimeters, feet and meters</phrase>
+ <phrase>A group of four toggle buttons representing a choice of measurement units: inches, centimeters, feet and meters</phrase>
</textobject>
</mediaobject>
</figure>
@@ -1119,11 +1122,7 @@
</imageobject>
<textobject>
- <phrase>Toggle buttons showing the Thick, Thin and Dashed
- drawing styles of two selected shapes in a drawing application.
- One shape is drawn in the thick style, the other in the dashed
- style. The Thick and Dashed toggle buttons are therefore shown
- in their mixed state, and the Thin toggle button is unset.</phrase>
+ <phrase>Toggle buttons showing the Thick, Thin and Dashed drawing styles of two selected shapes in a drawing application. One shape is drawn in the thick style, the other in the dashed style. The Thick and Dashed toggle buttons are therefore shown in their mixed state, and the Thin toggle button is unset.</phrase>
</textobject>
</mediaobject>
</figure>
@@ -1142,7 +1141,8 @@
<sect1 id="controls-option-menus">
<title>Drop-down Lists</title>
- <para>Drop-down lists are used to select from a mutually exclusive set of
+ <para>Drop-down lists (unfortunately called "combo boxes" in gtk+) are used
+ to select from a mutually exclusive set of
options. They can be useful when there is insufficient space in a window
to use a group of radio buttons or a single-selection list, with which
they are functionally equivalent.</para>
@@ -1162,9 +1162,7 @@
</imageobject>
<textobject>
- <phrase>Two images, one of a drop-down list displaying its current
- setting, and the other showing its popup menu of available choices
- when clicked on</phrase>
+ <phrase>Two images, one of a drop-down list displaying its current setting, and the other showing its popup menu of available choices when clicked on</phrase>
</textobject>
</mediaobject>
</figure>
@@ -1205,21 +1203,7 @@
<listitem>
<para>Use <link linkend="layout-capitalization">sentence
capitalization</link> for drop-down list items, for example
- <guilabel>Switched movement</guilabel></para>
- </listitem>
-
- <!-- CB-Ed: Change guilabel to something less literal-seeming: Menu item. -->
-
- <listitem>
- <para>Assign an access key to every drop-down list item. Ensure each
- access key is unique within the enclosing window or dialog, not just
- within the menu.</para>
- </listitem>
-
- <listitem>
- <para>Do not assign shortcut keys to drop-down list items by default. The
- user may assign their own shortcut keys in the usual way if they wish,
- however.</para>
+ <guimenuitem>Switched movement</guimenuitem></para>
</listitem>
<listitem>
@@ -1254,7 +1238,7 @@
<listitem>
<para>the contents of the hidden part of the menu are obvious from its
label and the one selected item. For example, if you have an option
- menu labelled "Month:" with the item "January"
+ menu labeled "Month:" with the item "January"
selected, the user might reasonably infer that the menu contains the
12 months of the year without having to look.</para>
</listitem>
@@ -1271,8 +1255,8 @@
<!-- How odd, the whole point of a combo box is that it's a combination of a text field and a list... as such, therefore there is no such thing as an 'uneditable combo box' :o) -->
- <para>Drop-down combination boxes combine a text entry field and a dropdown list of
- pre-defined values. Selecting one of the pre-defined values sets the entry
+ <para>Drop-down combination boxes (called "combo box entries" in gtk+) combine a text entry field and a dropdown list of
+ predefined values. Selecting one of the predefined values sets the entry
field to that value.</para>
<figure>
@@ -1289,9 +1273,7 @@
</imageobject>
<textobject>
- <phrase>Two images, one of a drop-down combination box entry field displaying its
- current selection, and the other showing its dropdown list of
- available choices when clicked on</phrase>
+ <phrase>Two images, one of a drop-down combination box entry field displaying its current selection, and the other showing its dropdown list of available choices when clicked on</phrase>
</textobject>
</mediaobject>
</figure>
@@ -1304,7 +1286,7 @@
<listitem>
<para>Only use a drop-down combination box instead of a list, drop-down list or radio
button group when it is important that the user be able to enter a new
- value that is not already amongst the list of pre-defined choices.</para>
+ value that is not already amongst the list of predefined choices.</para>
</listitem>
<listitem>
@@ -1352,53 +1334,38 @@
<sect1 id="controls-scrollbars">
<title>Scrollbars</title>
- <para>Often an object (such as a document or a list) will not be fit within
- the confines of its viewer control. In these cases a scrollbar can be affixed
- to the viewer control. The scrollbar alters which part of the object is
- currently visible inside the viewer control: it slides the view across the object
- in one axis (horizontal or vertical).</para>
+ <para>Often the visual representation of an object, such as a document
+ or a list, will not fit within
+ the space allocated to its viewer control. In these cases, scrollbars can be attached
+ to the viewer control. These allow the user to alter the horizontal or vertical
+ position of the viewport onto the object, and thus
+ the portion of the object that is visible.
+ </para>
<itemizedlist>
<title>Guidelines</title>
<listitem>
- <para>Only display scrollbars when they are required for sliding the view. If
- an object fits inside the viewer control, don't draw scrollbars. If you are
- using a GtkScrolledWindow, call <function>gtk_scrolled_window_set_policy</function>
- setting the appropriate axis (or axes) to GTK_POLICY_AUTOMATIC.</para>
- </listitem>
-
- <listitem>
- <para>Do <emphasis>not</emphasis> use scrollbars as a replacement for a
- <link linkend="controls-sliders">slider</link>. Scrollbars should only be
- used affixed to a view that they actively alter, not used as a generic
- continuous input control.</para>
- </listitem>
-
- <listitem>
- <para>Affix scrollbars to the right side of a viewer control (to slide the view
- vertically), or to the bottom side (to slide the view horizontally). Do <emphasis>not</emphasis>
- affix scrollbars on the top or left sides of a viewer control.</para>
+ <para>Only display scrollbars when they are required. If
+ an object fits entirely inside the viewer control, don't draw scrollbars. If you are
+ using a GtkScrolledWindow, use <function>gtk_scrolled_window_set_policy</function>
+ to set the scrollbar display policy to GTK_POLICY_AUTOMATIC.</para>
</listitem>
<listitem>
- <para>Scrollbars should be aligned in both directions with the view they are
- affixed to on the axis they control. In other words, horizontal scrollbars
- should span the full length of the viewer control, and vertical scrollbars
- should span the full height of the viewer control.</para>
+ <para>Affix scrollbars to the right or bottom edges only of a viewer control. Make the scrollbar the full height or width of the control.
+ </para>
</listitem>
<listitem>
- <para>If both horizontal and vertical scrollbars are acting upon a view,
- alignment will require that small rectangle in the lower right corner where
- the horizontal and vertical scrollbars meet will be blank. This is OK.</para>
- </listitem>
-
+ <para>Update the view in real time as the user drags a scrollbar.
+ Any delay will
+ negatively impact a user's ability to navigate the content.
+ </para></listitem>
<listitem>
- <para>Scrollbars should affect the view to which they are affixed in realtime:
- as the user drags or clicks the view should change. Time lag will be
- disconcerting and negatively impact a users ability to navigate content inside
- the view.</para>
+ <para>Don't use a scrollbar as a replacement for a
+ <link linkend="controls-sliders">slider</link>.
+ </para>
</listitem>
</itemizedlist>
</sect1>
@@ -1430,8 +1397,7 @@
</imageobject>
<textobject>
- <phrase>Picture of list control containing two unsorted columns of
- text</phrase>
+ <phrase>Picture of list control containing two unsorted columns of text</phrase>
</textobject>
</mediaobject>
</figure>
@@ -1497,6 +1463,11 @@
</listitem>
<listitem>
+ <para>Right align columns that contain only numbers, as this
+ makes them easier to compare.</para>
+ </listitem>
+
+ <listitem>
<para>Consider using a check box list for multiple-selection lists, as
these make it more obvious that multiple selection is possible:</para>
@@ -1516,10 +1487,7 @@
</imageobject>
<textobject>
- <phrase>Picture of list control with two columns. The first
- column consists of check boxes showing whether or not the
- corresponding item in the second column is selected for further
- action.</phrase>
+ <phrase>Picture of list control with two columns. The first column consists of check boxes showing whether or not the corresponding item in the second column is selected for further action.</phrase>
</textobject>
</mediaobject>
</figure>
@@ -1554,8 +1522,8 @@
<listitem><para>
Indicate which column is currently sorted by showing an
upward or downward facing arrow in its header:</para>
- <informaltable frame="all">
- <tgroup align="left" cols="2">
+ <informaltable frame="none">
+ <tgroup colsep="0" rowsep="0" align="left" cols="2">
<thead>
<row>
<entry>Sort Order</entry>
@@ -1613,7 +1581,7 @@
<title>Trees</title>
<para>A tree control allows the user to inspect, manipulate or select from
- a hierarchichal list of items. Trees may have one or more columns, and
+ a hierarchical list of items. Trees may have one or more columns, and
contain text, graphics, simple controls, or a combination of all three.</para>
<tip>
@@ -1643,8 +1611,7 @@
</imageobject>
<textobject>
- <phrase>Picture of tree control showing months of the year as top
- level nodes, and public holidays in those months as their children</phrase>
+ <phrase>Picture of tree control showing months of the year as top level nodes, and public holidays in those months as their children</phrase>
</textobject>
</mediaobject>
</figure>
@@ -1687,6 +1654,11 @@
technologies can describe the use of the column to visually impaired
users.</para>
</listitem>
+
+ <listitem>
+ <para>Right align columns that contain only numbers, as this
+ makes them easier to compare.</para>
+ </listitem>
<listitem>
<para>Consider using a check box tree for multiple-selection trees, as
@@ -1708,10 +1680,7 @@
</imageobject>
<textobject>
- <phrase>Picture of tree control with two columns. The first
- column consists of check boxes showing whether or not the
- corresponding item in the second column is selected for further
- action.</phrase>
+ <phrase>Picture of tree control with two columns. The first column consists of check boxes showing whether or not the corresponding item in the second column is selected for further action.</phrase>
</textobject>
</mediaobject>
</figure>
@@ -1749,7 +1718,7 @@
<para>A tabbed notebook control is a convenient way of presenting related
information in the same window, without having to display it all at the
- same time. It is analagous to the divider tabs in a ring binder or a file
+ same time. It is analogous to the divider tabs in a ring binder or a file
cabinet.</para>
<figure>
@@ -1835,10 +1804,7 @@
</imageobject>
<textobject>
- <phrase>Side-by-side comparison of one notebook whose tabs are
- all the same width, and one whose tabs are only wide enough to
- accommodate the tab labels. The latter takes up around 33% less
- screen space.</phrase>
+ <phrase>Side-by-side comparison of one notebook whose tabs are all the same width, and one whose tabs are only wide enough to accommodate the tab labels. The latter takes up around 33% less screen space.</phrase>
</textobject>
</mediaobject>
</figure>
@@ -1866,8 +1832,7 @@
example:</para>
<figure id="controls-too-many-tabs">
- <title>Use of list control where there would be too many tabs to fit
- comfortably in a notebook</title>
+ <title>Use of list control where there would be too many tabs to fit comfortably in a notebook</title>
<mediaobject>
<imageobject>
@@ -1880,11 +1845,7 @@
</imageobject>
<textobject>
- <phrase>Part of a window including a list control with 7 items, each
- item representing a category of settings such as
- "Appearance" and "Navigation". The controls in the
- rest of the window change depending on which item is selected in the
- list.</phrase>
+ <phrase>Part of a window including a list control with 7 items, each item representing a category of settings such as "Appearance" and "Navigation". The controls in the rest of the window change depending on which item is selected in the list.</phrase>
</textobject>
</mediaobject>
</figure>
@@ -1896,7 +1857,7 @@
<sect2 id="controls-tab-status">
<title>Status Indicators</title>
<remark>This section needs more concrete recommendations, it's currently (almost) taken verbatim from Sebastian's patch in bug #72101.</remark>
- <para>In some tabbed windows, such as preference windows, it might be desirable to indicate the status of a particular tab. This can be used to notify the user that a web page that is still loading or has been loaded, a new message is waiting in a particular instant messasing conversation, or that a document has not been saved. Such a status indicator should be an icon that is placed directly to the left of the tab label. Additionally, the tab label's color might be changed to indicate a certain status. Do not simply rely on a different coloring scheme for status indication.</para>
+ <para>In some tabbed windows, such as preference windows, it might be desirable to indicate the status of a particular tab. This can be used to notify the user that a web page that is still loading or has been loaded, a new message is waiting in a particular instant messaging conversation, or that a document has not been saved. Such a status indicator should be an icon that is placed directly to the left of the tab label. Additionally, the tab label's color might be changed to indicate a certain status. Do not simply rely on a different coloring scheme for status indication.</para>
</sect2>
</sect1>
@@ -2030,9 +1991,7 @@
</imageobject>
<textobject>
- <phrase>A simple 'indeterminate time' progress dialog,
- showing a slider moving back and forth until the operation is
- complete</phrase>
+ <phrase>A simple 'indeterminate time' progress dialog, showing a slider moving back and forth until the operation is complete</phrase>
</textobject>
</mediaobject>
</figure>
@@ -2064,9 +2023,7 @@
</imageobject>
<textobject>
- <phrase>A statusbar at the bottom of a document window, showing
- current zoom level and a status message indicating that the document
- has been modified since it was last saved</phrase>
+ <phrase>A statusbar at the bottom of a document window, showing current zoom level and a status message indicating that the document has been modified since it was last saved</phrase>
</textobject>
</mediaobject>
</figure>
@@ -2135,7 +2092,7 @@
use the following conventions:</para>
<itemizedlist>
- <!--<listitem><para>Raised or button-like appearance for areas that respond to a single click</para></listitem>-->
+ <!--<listitem><para>Raised or button-like appearance for areas that respond to a click</para></listitem>-->
<listitem>
<para>Inlaid appearance for areas that respond to a double click</para>
@@ -2171,9 +2128,7 @@
</imageobject>
<textobject>
- <phrase>A statusbar with a text panel that responds to a double
- click, a button that responds to a single click, and a
- non-interactive progress area</phrase>
+ <phrase>A statusbar with a text panel that responds to a double click, a button that responds to a click, and a non-interactive progress area</phrase>
</textobject>
</mediaobject>
</figure>
@@ -2185,7 +2140,7 @@
<listitem>
<para>Provide a drag handle in the bottom right corner of the status
- bar of resizeable windows. Subclasses of GtkStatusbar should use the
+ bar of resizable windows. Subclasses of GtkStatusbar should use the
drag handle provided by that class. A reimplementation of a status
bar, which is discouraged, should also reimplement the GtkStatusbar
drag handle in both appearance and function.</para>
@@ -2197,13 +2152,13 @@
<title>Frames and Separators</title>
<para>A frame is a box with a title that you can draw around controls to
- organise them into functional groups. A separator is a single horizontal
+ organize them into functional groups. A separator is a single horizontal
or vertical line that you can use to divide windows into functional
groups.</para>
<para>Frames with a border around their perimeter have traditionally been
used for denoting groups of related controls. This is advantageous because
- it physically seperates disimilar controls, and also avoids repitition of
+ it physically separates dissimilar controls, and also avoids repetition of
the frame's label in individual member control labels. Unfortunately,
they add visual noise that can both make a window appear more complex than
it really is, and reduce the ability to quickly scan window elements.</para>
@@ -2260,7 +2215,7 @@
window, consider carefully if you really need it. It is usually better
to do without, if the groups can be separated by space alone. Do not
use frames and separators to compensate for poor control layout or
- alignnment.</para>
+ alignment.</para>
</listitem>
<listitem>
@@ -2278,4 +2233,9 @@
</itemizedlist>
</sect1>
+
+ <sect1 id="controls-disclosure">
+ <title>Disclosure Triangles</title>
+ <para>TODO: Write some stuff about disclosure widgets.</para>
+ </sect1>
</chapter>
Modified: trunk/content/projects/gup/hig/hig-ch-desktop.xml
==============================================================================
--- trunk/content/projects/gup/hig/hig-ch-desktop.xml (original)
+++ trunk/content/projects/gup/hig/hig-ch-desktop.xml Mon Sep 29 23:32:29 2008
@@ -1,4 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
+<!-- :xml.root=hig-book.xml: -->
<chapter id="desktop-integration">
<title>Desktop Integration</title>
@@ -10,6 +11,7 @@
</orderedlist>
Do not add launchers or other icons to the desktop when your application is installed. The desktop is the user's space, and is reserved for icons that they explicitly request or add themselves.
</para>
+
<sect1 id="desktop-application-menu">
<title>Placing Entries in the Applications Menu</title>
@@ -49,9 +51,9 @@
<example>
<title>Including functional description in menu names</title>
- <informaltable frame="all">
+ <informaltable frame="none">
- <tgroup cols="2" align="left">
+ <tgroup colsep="0" rowsep="0" cols="2" align="left">
<thead>
<row>
<entry>Original menu item</entry>
@@ -75,9 +77,9 @@
<para>Do not include words like "GNOME", "X Window System", "GTK+" or other platform details in <guimenu>Application</guimenu> menu names. The user probably already knows what platform they are using, and if they don't, then application names are not the right place to inform them.</para>
<example>
<title>Removing non-essential information from menu names</title>
- <informaltable frame="all">
+ <informaltable frame="none">
- <tgroup cols="2" align="left">
+ <tgroup colsep="0" rowsep="0" cols="2" align="left">
<thead>
<row>
<entry>Original menu item</entry>
@@ -103,9 +105,9 @@
<example>
<title>Removing technical jargon from menu names</title>
- <informaltable frame="all">
+ <informaltable frame="none">
- <tgroup cols="2" align="left">
+ <tgroup colsep="0" rowsep="0" cols="2" align="left">
<thead>
<row>
<entry>Original menu item</entry>
@@ -142,9 +144,9 @@
<para>If your application's proper name is already descriptive of its functionality, and not just suggestive, use the format: <replaceable>Application Name</replaceable></para>
<example>
<title>Using application's name as menu name</title>
- <informaltable frame="all">
+ <informaltable frame="none">
- <tgroup cols="2" align="left">
+ <tgroup colsep="0" rowsep="0" cols="2" align="left">
<thead>
<row>
<entry>Application name</entry>
@@ -171,9 +173,9 @@
<example>
<title>Using functional description in menu names</title>
- <informaltable frame="all">
+ <informaltable frame="none">
- <tgroup cols="2" align="left">
+ <tgroup colsep="0" rowsep="0" cols="2" align="left">
<thead>
<row>
<entry>Application name</entry>
@@ -218,10 +220,10 @@
<para>A few applications, particularly games, do not have appropriate functional descriptions (but note that many games do). In this case, use <replaceable>Application Name</replaceable> as the menu name.</para>
<example>
- <title>Using applicaton's name as menu name where no functional description exists</title>
- <informaltable frame="all">
+ <title>Using application's name as menu name where no functional description exists</title>
+ <informaltable frame="none">
- <tgroup cols="2" align="left">
+ <tgroup colsep="0" rowsep="0" cols="2" align="left">
<thead>
<row>
<entry>Application name</entry>
@@ -266,9 +268,9 @@
<example>
<title>GenericName and Name</title>
- <informaltable frame="all">
+ <informaltable frame="none">
- <tgroup cols="2" align="left">
+ <tgroup colsep="0" rowsep="0" cols="2" align="left">
<thead>
<row>
<entry>GenericName</entry>
@@ -314,9 +316,9 @@
<example>
<title>Example tooltips for GNOME applications</title>
- <informaltable frame="all">
+ <informaltable frame="none">
- <tgroup cols="2" align="left">
+ <tgroup colsep="0" rowsep="0" cols="2" align="left">
<thead>
<row>
<entry>Application</entry>
@@ -361,9 +363,9 @@
<example>
<title>Example descriptions for GConf Keys from gnome-terminal</title>
- <informaltable frame="all">
+ <informaltable frame="none">
- <tgroup cols="3" align="left">
+ <tgroup colsep="0" rowsep="0" cols="3" align="left">
<thead>
<row>
<entry>Key</entry>
@@ -393,102 +395,134 @@
<para>The document type (MIME) database allows users to specify their preferred applications for opening different types of document. This is the mechanism by which Nautilus, Evolution and other applications decide which application to run when they encounter a document they cannot open themselves.</para>
- <para>It is important for users to be able to double-click on documents they see on the desktop, such as files and email messages, and have them launch in their favorite application. Therefore, your GNOME application should associate itself at install-time with all the document types it can handle. Technical details on doing this can be found in the <ulink url="http://developer.gnome.org/doc/API/gnome-vfs";><citetitle>GnomeVFS API reference</citetitle></ulink>.</para>
+ <para>It is important for users to be able to double click on documents they see on the desktop, such as files and email messages, and have them launch in their favorite application. Therefore, your GNOME application should associate itself at install-time with all the document types it can handle. Technical details on doing this can be found in the <ulink url="http://developer.gnome.org/doc/API/gnome-vfs";><citetitle>GnomeVFS API reference</citetitle></ulink>.</para>
<!-- FIXME: need to cover things like the preferred list and when an application should add itself to the preferred list -->
</sect1>
+ <sect1 id="desktop-application-startup">
+ <title>Application Startup</title>
+ <para><remark>Basically need to make these points in this section: If an application is going to take a few seconds to start up, chances are you want to get on with something else while it's starting. Even if it's a well-behaved splash screen, that usually still means having to move or dismiss a window that's popped up in the way of what you were doing, which is always annoying. And of course, if the app isn't going to take a few seconds to start up, you don't need a splash screen anyway :) Also, splash screens are usually quite colourful, which is poor for accessibility.</remark></para>
+
+ <itemizedlist><title>Guidelines</title>
+ <listitem><para>Do not show a splash screen, but instead make proper use of the GNOME startup notification library to provide startup feedback.</para></listitem>
+ <listitem><para>Show the main window of your application as early as possible, even if all its controls are disabled until the application is fully initialized. If further initialization is likely to take several seconds, consider showing some kind of progress indicator within the application window.</para></listitem>
+ </itemizedlist>
+ </sect1>
+
<sect1 id="desktop-notification-area">
<title>Using the Status Notification Area</title>
- <para>
- Using the status notification area applications can notify the user of non-critical events (for example, arrival of new email, or a chat 'buddy' having logged on), and expose the status of active system processes (for example, a printing document, or a laptop's battery charging).</para>
+
+ <para>The status notification area on the panel is used to notify the user of non-critical events, such as the arrival of new email, and to monitor the status of background activities, such as a laptop battery charging. Recent versions of the GNOME desktop (2.12 or newer) can also pop up a small transient "balloon" attached to a notification icon, to give additional information and interaction choices related to an event.</para>
+ <warning><para>The utility of the notification area decreases rapidly when more than four icons are displayed at the same time. Icons that appear only temporarily, in response to specific events, are therefore preferable.</para></warning>
+
<para>Following the guidelines in this section will help to clarify the difference in the user's mind between information presented in the notification area, and controls and information presented on other parts of the panel.</para>
- <warning><para>The utility of the notification area decreases rapidly when more than about four icons are always present. For this reason, icons that appear only temporarily in response to events are preferable.</para></warning>
-
- <sect2 id="desktop-notification-or-applet"><title>Notification Area or Panel Applet?</title>
- <para>
- You should probably write an applet instead of using the notification area if:</para>
- <itemizedlist>
- <listitem><para>clicking your notification area icon does anything other than opening a window directly associated with the icon (e.g. a mail folder window for a new mail icon, or a print queue window for printer notification icon), or </para></listitem>
- <listitem><para>there are icon-specific options on its context menu for doing anything other than that</para></listitem>
- <listitem><para>your application would ever need to display more than one notification icon at the same time</para></listitem>
- </itemizedlist>
- </sect2>
-
- <sect2><title>Icon Appearance</title>
- <itemizedlist><title>Guidelines</title>
- <listitem><para>Use table perspective for icons representing physical devices, with the light source above and to the left of the represented object. For example, a printer icon during printing. See <xref linkend="icon_style_perspective"/> for more about table perspective.</para></listitem>
- <listitem><para>Use shelf perspective, with overhead lighting, for all other icons. For example, an envelope shown when new mail arrives. See <xref linkend="icon_style_perspective"/> for more about shelf perspective.</para></listitem>
- <listitem><para>For monitors or progress bars that change over
-time, such as a battery charge monitor, clearly delimit the border of the area.</para></listitem>
-
+ <sect2 id="desktop-notification-appropriate-use">
+ <title>Appropriate Uses for the Notification Area</title>
+
+ <para>There are three acceptable uses for the notification area:</para>
+
+ <itemizedlist>
+
+ <listitem><para>Displaying a transient icon in response to an event (e.g. arrival of new mail in a monitored folder). Clicking the icon opens the most appropriate window to deal with the event (e.g. Inbox). The icon is removed when the state prior to the event is restored (e.g. no more unread mail in monitored folders).</para></listitem>
+
+ <listitem><para>Displaying an icon for the duration of a background activity (e.g. while a document is being printed). The icon is removed when the activity successfully completes, or replaced with a suitable error icon if the activity fails (optional tooltip or balloon to explain problem). Clicking the error icon (or balloon) opens the most appropriate window for the user to rectify the problem.</para></listitem>
+
+ <listitem><para>Displaying an ever-present icon to monitor a continuous background activity, such as a laptop battery being charged. Continous notification icon presence should always be controllable by a user preference. Only core GNOME applications may have this preference turned on by default; other applications should turn it off by default. <remark>Standard way of presenting this option would be nice.</remark></para></listitem>
+
</itemizedlist>
+
+ <para>In particular, you should probably use an applet instead of using a notification icon if:</para>
+
+ <itemizedlist>
+ <listitem><para>your notification icon would need to be shown all the time, or would benefit from being shown all the time</para></listitem>
+ </itemizedlist>
+
+ <para><emphasis>and:</emphasis></para>
+
+ <itemizedlist>
+ <listitem><para>clicking your notification icon would do anything other than opening a window or dialog box <emphasis>directly</emphasis> associated with the icon or the event that caused it to appear <remark>(example?)</remark>, or</para></listitem>
+ <listitem><para>multiple instances of the icon would either be required, or could be considered useful (for example, a clock-- a user might want to display a separate clock for each of multiple timezones)</para></listitem>
+ </itemizedlist>
+
+ <para>Because the notification area is itself a panel applet, remember that the user may not have it on their desktop at all. Above all, therefore, only use notification icons to provide redundant, non-critical information.</para>
+ </sect2>
+ <sect2 id="desktop-notification-appearance">
+ <title>Icon Appearance</title>
+
<itemizedlist><title>Guidelines</title>
- <listitem><para>Only core GNOME programs may perpetually display an icon in the status area.</para></listitem>
- <listitem><para>Non-core programs for which a perpetual icon may be useful must default to not perpetually showing the icon. Users may select to enable a perpetual icon for the application as a preference. <remark>Standard way of presenting this option would be nice.</remark></para></listitem>
+
+ <remark>Need some examples here. There have been suggestions in the past that notification icons should have a more muted colour scheme (possibly just B&W) than other objects on the panel-- good idea?</remark>
+
+ <listitem><para>Use table perspective for icons representing physical devices, for example a printer icon shown during printing, with the light source above and to the left of the represented object. See <xref linkend="icon_style_perspective"/> for more about table perspective.</para></listitem>
+
+ <listitem><para>Use a flat, unshaded image for status monitors that take the form of a chart or graph, such as a CPU usage monitor. Clearly delimit the borders of the chart area.</para></listitem>
+
+ <listitem><para>Use shelf perspective, with overhead lighting, for all other icons. For example, an envelope shown when new mail arrives. See <xref linkend="icon_style_perspective"/> for more about shelf perspective.</para></listitem>
+
</itemizedlist>
</sect2>
- <sect2 id="notification-area-animation">
- <title>Animation</title>
+ <sect2 id="desktop-notification-animation">
+ <title>Icon Animation</title>
+
+ <para>As with any part of the desktop, animation must be used sparingly to be effective, and redundantly to be accessible.</para>
<itemizedlist><title>Guidelines</title>
- <listitem><para>Icons should not usually appear animated. They may change to
-indicate a change of state, but should not do so when that change
-is occurs regularly rapidly. A battery status indicator would
-usually change slowly, therefore an icon is appropriate. By contrast,
-a load meter would always be changing, therefore it should use a flat
-image.</para></listitem>
-<!-- <listitem><para>Icons are permitted to blink under a few conditions.
- An icon may blink for n (=5?) seconds when first displayed
- if showing the icon is not caused by user action.
- A printing-in-progress icon would be shown because the user
- is printing a document, therefore it should not blink.
- An incoming email or personal message (IM) would be shown
- because something has changed absent the user, therefore it
- may blink.</para></listitem>
-
- <listitem><para>A icon may blink for n seconds if its conditions for initially
- blinking recur. For example, an incoming email icon which was
- shown and blinked when a message arrived and which has remained
- visible may blink again when another message arrives.</para></listitem>
--->
- <listitem><para>Any icon may blink to indicate an error in deference to showing
- an alert. For example, a printing-in-progress icon may blink when
- there is a paper jam, but not when the printer is on fire - that
- should show an alert.
- </para></listitem>
- <listitem><para>Do not rely on blinking or animation as a means of alerting the user to any particular event. <!-- commenting out until it exists... -Seth The notification area respects the global desktop "no animation" preference for accessibility reasons. <remark>Note: This doesn't exist yet but it's on the list...</remark> --></para></listitem>
+
+ <listitem><para>To avoid distracting the user, do not update notification icons that are monitoring a background activity any more than once per second by default. For any such icons that are perpetually shown, make the exact update frequency a user preference.</para></listitem>
+
+ <listitem><para>Do not animate notification icons that are not monitoring the status of a background activity.</para></listitem>
+
+ <!-- Methinks all situations where blinking might have been useful should be replaced by potentially-a11y-and-resource-friendlier libnotify balloons... have moved those potential guidelines down to that section, and reworded accordingly. CFB-->
+
+ <listitem><para>Do not rely on animation, or any other change of appearance within a notification icon, as a means of alerting the user to a particular event. <!-- commenting out until it exists... -Seth The notification area respects the global desktop "no animation" preference for accessibility reasons. <remark>Note: This doesn't exist yet but it's on the list...</remark> --></para></listitem>
</itemizedlist>
</sect2>
- <sect2 id="notification-icon-interaction">
+ <sect2 id="desktop-notification-interaction">
<title>Interaction</title>
- <para>Icons should respond to the these user actions.
-(Keypresses apply only when the icon has focus, of course)</para>
+ <para>All notification icons should respond to user interaction in a consistent way, similar to that for panel applets.</para>
+
<itemizedlist><title>Guidelines</title>
- <listitem><para>Double-click or <keysym>Space</keysym> key
- should perform the icon's default action. Normally this should open a window with relevant data, for example:
+ <listitem><para>Perform the icon's default action when the user clicks the icon, or presses the <keysym>Space</keysym> key when it is focused. In general, an icon's default action should be to open a relevant window or dialog box, or to raise and focus that window or dialog box if it is already open but not focused. Examples of such windows and dialogs include:
<itemizedlist>
- <listitem><para>the printer queue for a printing-in-progress icon.</para></listitem>
- <listitem><para>the inbox for an incoming email iconi</para></listitem>
- <listitem><para>the message for an incoming message</para></listitem>
- </itemizedlist></para></listitem>
- <listitem><para>Right-click or <keycombo><keycap>Shift</keycap><keycap>F10</keycap></keycombo>
- should present a menu for the icon containing at least
- the icon's default action.</para></listitem>
-
- <listitem><para>If the icon's properties may be altered, it should
- have a menu item <guimenuitem>Properties</guimenuitem> in its menu,
- nd show its property panel in response to Alt+Enter.</para></listitem>
+ <listitem><para>the printer queue window, for a "printing in progress" icon</para></listitem>
+ <listitem><para>the default mail application's Inbox window, for an incoming email icon</para></listitem>
+ <listitem><para>the message window, for an incoming instant message icon</para></listitem>
+ </itemizedlist></para>
+ <para>If the icon's associated window or dialog box is already raised and focused, close it when the user clicks the icon, or presses the <keysym>Space</keysym> key when the icon is focused. All windows associated with notification icons should be dismissable in this way, except for explicit apply dialog boxes. Those should always be dismissed by clicking their action or cancel buttons.</para></listitem>
+
+ <listitem><para>Present a context menu, containing at least the icon's default action, when the user right clicks the icon or presses <keycombo><keycap>Shift</keycap><keycap>F10</keycap></keycombo> when the icon is focused.</para></listitem>
+
+ <listitem><para>If the icon's properties, or the properties of its associated application or document may be altered, include a <guimenuitem>Properties</guimenuitem> menu item in its context menu, and show its property panel in response to <keycombo><keycap>Alt</keycap><keycap>Enter</keycap></keycombo> when the icon is focused.</para></listitem>
+
+ <!--<listitem><para>Follow normal tooltip conventions for notification icons.</para></listitem> Kind of meaningless... -->
+ </itemizedlist>
+ </sect2>
+
+ <sect2 id="desktop-notification-balloon">
+ <title>Notification Balloons</title>
+ <para><remark>FIXME: guidelines for appearance and interaction with libnotify-type balloons. All the guidelines shown here now are very early thoughts.</remark></para>
+
+ <itemizedlist><title>Random Thoughts</title>
+
+ <listitem><para><remark>If an icon has displayed a balloon that is no longer visible, subsequently mousing over the icon should perhaps cause the last message to appear as a tooltip?</remark></para></listitem>
+
+ <listitem><para><remark>Need to think about notifications in the context of accessibility. The notification spec allows for notifications to be shown in different ways, perhaps we need to do something different for users relying on screenreaders or desktop magnification?</remark></para></listitem>
+
+ <listitem><para><remark>An icon may show a balloon to indicate an error in deference to showing an alert. For example, a printing-in-progress icon may show a balloon when there is a paper jam, but not when the printer is on fire - that should show an alert.</remark></para></listitem>
+
+ <listitem><para><remark>A balloon may be show when the icon is first displayed, if the icon's appearance is not the direct result of a user action. For example, the icon for an incoming email or instant message may be accompanied by a balloon. However, the appearance of a printing-in-progress icon would not be accompanied by a balloon, because its appearance was caused by the user choosing to print a document.</remark></para></listitem>
- <listitem><para>Icons should obey normal tooltip conventions.</para></listitem>
+ <listitem><para><remark>An icon may show a balloon if it has previously shown a balloon, and the condition recurs. For example, an incoming email icon which has remained visible, and was originally accompanied by a transient balloon, may show another balloon when another message arrives.</remark></para></listitem>
+
</itemizedlist>
</sect2>
</sect1>
Modified: trunk/content/projects/gup/hig/hig-ch-feedback.xml
==============================================================================
--- trunk/content/projects/gup/hig/hig-ch-feedback.xml (original)
+++ trunk/content/projects/gup/hig/hig-ch-feedback.xml Mon Sep 29 23:32:29 2008
@@ -67,7 +67,7 @@
<listitem>
<para>When performing extended operations, they prevent users from
- doing other work or cancelling the extended operation.</para>
+ doing other work or canceling the extended operation.</para>
</listitem>
<listitem>
@@ -82,8 +82,8 @@
</listitem>
</itemizedlist>
- <para>You can sometimes possible to improve an application's
- responsiveness without speeding up the application's code. For tips on
+ <para>Sometimes you can improve the responsiveness of an application
+ without speeding up its code. For tips on
how to make such improvements, see <xref
linkend="feedback-responding-to-user" />.</para>
</sect1>
@@ -97,10 +97,10 @@
to save a file. The table below shows the maximum acceptable response
delay for typical interface events.</para>
- <table frame="all">
+ <table frame="none">
<title>Maximum acceptable response times for typical events</title>
- <tgroup align="left" cols="2">
+ <tgroup colsep="0" rowsep="0" align="left" cols="2">
<thead>
<row>
<entry>UI Event</entry>
@@ -178,7 +178,7 @@
<listitem>
<para>Verify that your application takes no longer than 10 seconds to
accept and process all user input to any taskâincluding user input to
- each step of a multistep task, such as a wizard.</para>
+ each step of a multi-step task, such as a wizard.</para>
</listitem>
</itemizedlist>
</sect1>
@@ -365,7 +365,7 @@
<itemizedlist>
<listitem>
<para>Opening a new window, particularly when an operation is
- short, can needlessly disrupt the user's workflow.</para>
+ short, can needlessly disrupt the user's work-flow.</para>
</listitem>
<listitem>
@@ -440,10 +440,10 @@
animations" means progress animations displayed somewhere other than
in a dedicated status areaâ typically, in an alert box.</para>
- <table frame="all">
+ <table frame="none">
<title>Visual feedback types for operations that take at least 1 second</title>
- <tgroup align="left" cols="4">
+ <tgroup colsep="0" rowsep="0" align="left" cols="4">
<thead>
<row>
<entry>Typical Duration > 5 seconds?</entry>
@@ -573,7 +573,7 @@
<listitem>
<para>Place a <guibutton>Stop</guibutton> or <guibutton>Cancel</guibutton>
button, which can also be activated by pressing <keycap>Esc</keycap>,
- near the progress animation for the interruptable command.</para>
+ near the progress animation for the interruptible command.</para>
</listitem>
<listitem>
Modified: trunk/content/projects/gup/hig/hig-ch-icons-new.xml
==============================================================================
--- trunk/content/projects/gup/hig/hig-ch-icons-new.xml (original)
+++ trunk/content/projects/gup/hig/hig-ch-icons-new.xml Mon Sep 29 23:32:29 2008
@@ -7,10 +7,10 @@
<para>Icons are small graphics that represent objects (applications, files) or actions ("Create new," "Save") in a user's desktop environment. They come in standard default sizes of 48x48, 32x32, 24x24 and 16x16. Icons are originally designed on a 48x48 canvas, then automatically scaled-down in GNOME to appear in context-dependent sizes.</para>
<para>Glyphs are graphics are usually, but not always, smaller than what are formally considered icons. They do not have default sizes. They don't initiate actions or represent objects, but usually represent the state or distinguishing attribute of an object in a larger set of objects. A sort indicator in a table component, a tree turner in a navigation tree, alarm badges on object icons and emblems in Nautilus are all glyphs.</para>
<para>The first graphic in each category is the original size in which it was designed. The object icon represents a jar file, The action icon represents a "save as" action in a toolbar or menu and the glyph represents one property ("important") of a directory object in Nautilus.</para>
- <table frame="topbot">
+ <table frame="none">
<title>Different Types of Icons</title>
- <tgroup cols="3" colsep="0" rowsep="0" align="left">
+ <tgroup colsep="0" rowsep="0" cols="3" colsep="0" rowsep="0" align="left">
<tbody>
<row valign="top">
<entry>Object Icon</entry>
@@ -34,9 +34,9 @@
<sect1 id="icons-style">
<title>Style</title>
- <para>All of these graphics should be designed with a global desktop look and feel in mind. GNOME uses a soft, three-dimentional look that is exemplified in the stock icons. This style is achieved by using antialiasing, shading and highlighting techniques. A simple icon design tutorial by Jakub Steiner of Ximian, focusing on gradient and alpha channel use in the GIMP (GNU Image Manipulation Tool), can be found here: http://www.ximian.com/devzone/tutorials/icon-design/</para>
- <para>Components of an icon style can be broken down into several categories such as perspective, dimentionality, lighting effects and palette. These components play an important part in giving a group of icons a collectively distinctive look. For instance, the Java Look and Feel, or "metal," is recognizable by its use of a primary eight-color palette, interior highlighting and diagonal gradients. The Macintosh Look and Feel, or "aqua," is recognizable by its use of a cool palette based on blue, lighting effects mimicking reflectivity and antialiasing. The GNOME look and feel currently being developed exhibits a thirty-two color palette, soft drop shadows and a mix between cartoonish and photorealistic graphics.</para>
- <table frame="topbot">
+ <para>All of these graphics should be designed with a global desktop look and feel in mind. GNOME uses a soft, three-dimensional look that is exemplified in the stock icons. This style is achieved by using antialiasing, shading and highlighting techniques. A simple icon design tutorial by Jakub Steiner of Ximian, focusing on gradient and alpha channel use in the GIMP (GNU Image Manipulation Tool), can be found here: http://www.ximian.com/devzone/tutorials/icon-design/</para>
+ <para>Components of an icon style can be broken down into several categories such as perspective, dimensionality, lighting effects and palette. These components play an important part in giving a group of icons a collectively distinctive look. For instance, the Java Look and Feel, or "metal," is recognizable by its use of a primary eight-color palette, interior highlighting and diagonal gradients. The Macintosh Look and Feel, or "aqua," is recognizable by its use of a cool palette based on blue, lighting effects mimicking reflectivity and antialiasing. The GNOME look and feel currently being developed exhibits a thirty-two color palette, soft drop shadows and a mix between cartoonish and photorealistic graphics.</para>
+ <table frame="none">
<title>Different icon styles</title>
<tgroup cols="3" colsep="0" rowsep="0" align="center">
@@ -59,8 +59,8 @@
<para>For the GNO ME Look and Feel, the following should be observed:</para>
<itemizedlist>
<listitem>
- <formalpara><title>Perspective</title><para>Flush perspective (as if you were looking at a three-dimentional object at eye-level) is useful for designing graphics representing actions because these usually appear in toolbar buttons and express a "shelved" metaphor. However, angled perspective can be used for variation, particularly for icons representing objects (such as application icons) or for central image components within a bounding component using the flush perspective.</para></formalpara>
- <table frame="topbot">
+ <formalpara><title>Perspective</title><para>Flush perspective (as if you were looking at a three-dimensional object at eye-level) is useful for designing graphics representing actions because these usually appear in toolbar buttons and express a "shelved" metaphor. However, angled perspective can be used for variation, particularly for icons representing objects (such as application icons) or for central image components within a bounding component using the flush perspective.</para></formalpara>
+ <table frame="none">
<title>Different perspectives</title>
<tgroup cols="3" colsep="0" rowsep="0" align="left">
<tbody>
@@ -94,7 +94,7 @@
</sect1>
<sect1 id="icons-context">
<title>Context</title>
- <table frame="topbot">
+ <table frame="none">
<title>Different perspectives</title>
<tgroup cols="5" colsep="0" rowsep="0" align="left">
<tbody>
@@ -122,21 +122,21 @@
</tbody>
</tgroup>
</table>
- <para>FIXME - I left a lot of these rows off the end. It seems pretty whacky to list all these. Not sure I agree with the way "contexts" are presented anyway. Its sort of confusing.</para>
- <para>FIXME - There's a whole accesibility section missing here</para>
+ <para>FIXME - I left a lot of these rows off the end. It seems pretty wacky to list all these. Not sure I agree with the way "contexts" are presented anyway. Its sort of confusing.</para>
+ <para>FIXME - There's a whole accessibility section missing here</para>
</sect1>
<sect1 id="icons-dos-and-donts">
<title>Do's and Don'ts</title>
<itemizedlist>
- <listitem><formalpara><title>DO make icons easily scannable</title><para>Toolbar and menu icons are downsized to exactly one-half of their original icon sizes and appear in groups; their small sizes and other shared charactics can make it difficult for users to scan for a particular icon quickly. Therefore, it's doubly necessary in this context to make sure that each icon is visually distinct from another. One way to achieve this is by giving icons distinct (e.g., irregular versus perfectly square) outlines.</para></formalpara></listitem>
+ <listitem><formalpara><title>DO make icons easily scannable</title><para>Toolbar and menu icons are downsized to exactly one-half of their original icon sizes and appear in groups; their small sizes and other shared characters can make it difficult for users to scan for a particular icon quickly. Therefore, it's doubly necessary in this context to make sure that each icon is visually distinct from another. One way to achieve this is by giving icons distinct (e.g., irregular versus perfectly square) outlines.</para></formalpara></listitem>
<listitem><formalpara><title>DO denote categories</title><para>I have some strong disagreements with this one. Specifically I think the sheet of paper thing for document icons is altogether unhelpful. It violates "DO make icons easily scannable" up the wazoo. The contexts in which documents appear in the file manager already categories them to a large extent. Its ok to have some sort of weak categorization/theme in the icon, but that sheet of paper gets old quick</para></formalpara></listitem>
- <listitem><formalpara><title>DO opt for simplictiy</title><para>Icons are often viewed in smaller sizes than ones they were originally created in; keep in mind that your icons need to be recognizable when reduced to 24x24 or even 16x16. If a user has to spend more than a second or two looking at the icon to recognize what it's representing, then the metaphor used in the icon is too complex.</para></formalpara></listitem>
+ <listitem><formalpara><title>DO opt for simplicity</title><para>Icons are often viewed in smaller sizes than ones they were originally created in; keep in mind that your icons need to be recognizable when reduced to 24x24 or even 16x16. If a user has to spend more than a second or two looking at the icon to recognize what it's representing, then the metaphor used in the icon is too complex.</para></formalpara></listitem>
<listitem><formalpara><title>DO use stock icons</title><para>GTK provides many stock icons, and you should use these whenever you provide a toolbar button for one of the functions they represent. This establishes consistent language across applications, and makes it easier for users to search for items on the toolbar. FIXME - provide info on viewing these</para></formalpara></listitem>
<listitem><formalpara><title>DO NOT use stock icons for anything other than their intended purpose.</title><para>This will make your application inconsistent with others, and could easily confuse your users, as well as weakening the effectiveness of the stock icon in other applications.</para></formalpara></listitem>
- <listitem><formalpara><title>DO NOT use text as the distinguishing feature of an icon</title><para>I disagree with how mildly this point is worded. The reason is not soley internationalization, and I entirely disagree with the use of file extensions such as "GIF" and "JPG" in the icons. If this information is really useful (I think it is not and should be discouraged) it should be automatically overlaid by the file manager based on the *actual* extension of the file. This is just more visual noise.</para></formalpara></listitem>
+ <listitem><formalpara><title>DO NOT use text as the distinguishing feature of an icon</title><para>I disagree with how mildly this point is worded. The reason is not solely internationalization, and I entirely disagree with the use of file extensions such as "GIF" and "JPG" in the icons. If this information is really useful (I think it is not and should be discouraged) it should be automatically overlaid by the file manager based on the *actual* extension of the file. This is just more visual noise.</para></formalpara></listitem>
<listitem><formalpara><title>DO NOT represent body parts in icons</title><para>these may be offensive to certain cultures, and in actual use frequently do not succeed in conveying meaning.</para></formalpara></listitem>
<listitem><formalpara><title>DO NOT base icon designs on idioms or product names</title><para>Instead, base designs on a product's functionality, which will pose less internationalization problems and be easier to recognize for new users. For example, the Nautilus icon is that of a nautilus shell, which does not make its functionality (file browsing) explicit.</para></formalpara></listitem>
- <listitem><formalpara><title>DO NOT use violent imagery</title><para>Just as words like "kill" and "slay" are inappropriate in interfaces, violent or destructive icons (such as an explosive detonation swtich) should be avoided.</para></formalpara></listitem>
+ <listitem><formalpara><title>DO NOT use violent imagery</title><para>Just as words like "kill" and "slay" are inappropriate in interfaces, violent or destructive icons (such as an explosive detonation switch) should be avoided.</para></formalpara></listitem>
</itemizedlist>
</sect1>
</chapter>
Modified: trunk/content/projects/gup/hig/hig-ch-icons.xml
==============================================================================
--- trunk/content/projects/gup/hig/hig-ch-icons.xml (original)
+++ trunk/content/projects/gup/hig/hig-ch-icons.xml Mon Sep 29 23:32:29 2008
@@ -1,11 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
+<!-- :xml.root=hig-book.xml: -->
<chapter id="icons">
<title>Icons</title>
<para>Icons are a graphical metaphor presenting a visual image that the user associates with a particular object, state or operation. When a user sees a good icon they are immediately reminded of the item it represents, whether that be an application in the panel menu or the "right aligned" state in a word processor toolbar.</para>
<para>
<itemizedlist>
- <listitem><para>Icons can assist the user in rapidly scanning a large number of objects to select the desired item. Particularly after a user is acustomed to an icon's appearance, they can identify it more rapidly than a text label.</para></listitem>
+ <listitem><para>Icons can assist the user in rapidly scanning a large number of objects to select the desired item. Particularly after a user is accustomed to an icon's appearance, they can identify it more rapidly than a text label.</para></listitem>
<listitem><para>Icons can augment text by providing visual suggestions to accompany the descriptive text. Some things are easier to communicate with a picture, even a very small one.</para></listitem>
<listitem><para>Icons can compactly represent a large number of objects when there is insufficient space to display textual descriptions (such as in a toolbar).</para></listitem>
</itemizedlist>
@@ -14,9 +15,9 @@
<sect1 id="icons-style">
<title>Style</title>
- <para>GNOME uses a soft, three-dimensional look. This style is achieved by using antialiasing, shading and highlighting techniques. The <ulink url="http://developer.ximian.com/articles/tutorials/icons/";><citetitle>Gnome Icons</citetitle></ulink> tutorial details how one of GNOME's leading artists creates some of these effects.</para>
- <para>Components of an icon style can be broken down into several categories such as perspective, dimentionality, lighting effects and palette. These components play an important part in giving a group of icons a collectively distinctive look. For instance, the Java Look and Feel is recognizable by its use of a primary eight-color palette, interior highlighting and diagonal gradients. The Macintosh Aqua style is recognizable by its use of a cool palette based on blue, lighting effects mimicking reflectivity and antialiasing. The GNOME style exhibits a subdued thirty-two color palette, soft drop shadows and a mix between cartoonish and photorealistic graphics.</para>
- <table frame="topbot" pgwide="1">
+ <para>GNOME uses a soft, three-dimensional look. This style is achieved by using antialiasing, shading and highlighting techniques. The <ulink url="http://www.gimp.org/tutorials/Creating_Icons/";><citetitle>Gnome Icons</citetitle></ulink> tutorial details how one of GNOME's leading artists creates some of these effects.</para>
+ <para>Components of an icon style can be broken down into several categories such as perspective, dimensionality, lighting effects and palette. These components play an important part in giving a group of icons a collectively distinctive look. For instance, the Java Look and Feel is recognizable by its use of a primary eight-color palette, interior highlighting and diagonal gradients. The Macintosh Aqua style is recognizable by its use of a cool palette based on blue, lighting effects mimicking reflectivity and antialiasing. The GNOME style exhibits a subdued thirty-two color palette, soft drop shadows and a mix between cartoonish and photorealistic graphics.</para>
+ <table frame="none" pgwide="1">
<title>A globe in different icon styles</title>
<tgroup cols="3" colsep="0" rowsep="0" align="center">
@@ -100,16 +101,16 @@
<sect2 id="icon_style_palette">
<title>Palette</title>
<remark>FIXME: need to flesh out a little?</remark>
- <para>Icons should use colors based on the basic thirty-two color palette, darkening or lightening the colours to achieve the desired look. See <xref linkend="Palette"/></para>
+ <para>Icons should use colors based on the basic thirty-two color palette, darkening or lightening the colors to achieve the desired look. See <xref linkend="Palette"/></para>
</sect2>
</sect1>
<sect1 id="icons-types">
<title>Kinds of Icons</title>
- <table frame="all" pgwide="1" id="icon_specifications">
+ <table frame="none" pgwide="1" id="icon_specifications">
<title>Specifications for different kinds of icons used within GNOME</title>
- <tgroup cols="4" colsep="1" rowsep="1" align="center">
+ <tgroup cols="4" colsep="0" rowsep="0" align="center">
<thead>
<row>
<entry>Icon Type</entry>
@@ -198,9 +199,9 @@
<para>The idea of a toolbar as a shelf filled with tools should be reflected in toolbar icons. Toolbar icons should have the perspective of being viewed head on, as if they were actually sitting on a shelf at eye-level. Some design guides refer to this perspective as "flush".</para>
<itemizedlist>
<listitem><para>Ensure that toolbar icons which will be used together are easy to visually distinguish. Try to <link linkend="icon_design_silhouettes">make the icons' silhouettes distinct</link> from one another.</para></listitem>
- <listitem><para>While most user's will view toolbar icons at 24x24 pixels, it is important to include a "large print" set of icons at 48x48 pixels for accesibility reasons.</para></listitem>
+ <listitem><para>While most user's will view toolbar icons at 24x24 pixels, it is important to include a "large print" set of icons at 48x48 pixels for accessibility reasons.</para></listitem>
<listitem><para>Often, you will not have to design any toolbar icons yourself as GTK provides a wide variety of stock icons. You should use these whenever representing one of their intended items. This establishes consistent language across applications, and makes it easier for users to search for items on the toolbar. Do not use stock toolbar icons for anything other than their intended purpose, however, as this will make your application inconsistent with others, and could easily confuse your users.</para>
- <para>To browse the available stock icons, install the development packages for GTK version 2.x and run <command>gtk-demo</command>. Double click on <guimenuitem>Stock Item and Icon Browser</guimenuitem> to activate the stock icon browser. Note that icons vary in available resolution, so the images presented in the icon browser should not be taken as indicative of the maximuum quality of an image. To view the images in PNG format, look in the GTK 2 source code under <filename class="directory">gtk/stock-icons</filename>.</para></listitem>
+ <para>To browse the available stock icons, install the development packages for GTK version 2.x and run <command>gtk-demo</command>. Double click on <guimenuitem>Stock Item and Icon Browser</guimenuitem> to activate the stock icon browser. Note that icons vary in available resolution, so the images presented in the icon browser should not be taken as indicative of the maximum quality of an image. To view the images in PNG format, look in the GTK 2 source code under <filename class="directory">gtk/stock-icons</filename>.</para></listitem>
</itemizedlist>
</sect2>
@@ -491,18 +492,38 @@
<listitem><para>a high contrast large print theme</para></listitem>
<listitem><para>an inverse high contrast large print theme</para></listitem>
<listitem><para>a low contrast theme</para></listitem>
- <listitem><para>a low contrast,large print theme</para></listitem>
+ <listitem><para>a low contrast, large print theme</para></listitem>
</itemizedlist>
<para>To be considered fully accessible, all icons in your application
must be replaced by a suitable alternative when one of these
- themes is used.</para>
+ themes is used.<remark>The HighContrastLargePrint, HighContrastLargePrintInverse and LowContrastLargePrint <emphasis>icon</emphasis> themes are deprecated as of GNOME 2.12. New icons need only be added to the HighContrast, HighContrastInverse and LowContrast themes.</remark></para>
<tip><title>Low Contrast Icons</title>
<para>Low contrast icon themes were deprecated in GNOME 2.22. It is no longer necessary to deliver low contrast icon equivalents. </para></tip>
+ <tip><title>Adding icons to accessible themes</title>
+ <para>When you have designed high and low contrast versions of all
+ your icons, submit them to the gnome-themes module maintainers for
+ inclusion in the appropriate themes.<remark>Pending discussion on XDG about possibility of applications being able to install HighContrast and HighContrastInverse icons themselves.</remark></para></tip>
+
<sect2 id="icons-design-highcontrast">
<title>High Contrast Icons</title>
<para>
- High contrast icons are greatly simplified versions of an application's existing regular icons. They are drawn with two colors, black and white, and thicker borders. This style allows high contrast icons to be distinguishable when viewed by a user with a visual impairment. Below is an approximation of what well-designed high contrast icons look like when viewed by someone with a visual impairment.</para>
- <table frame="topbot" pgwide="1">
+ High contrast icons, in conjunction with a high contrast theme, benefit users with reduced visual acuity. A high contrast icon has these characteristics:</para>
+ <itemizedlist>
+ <listitem><para>Drawn only in black and white, with an external white border (black for inverse high contrast icons). One additional color may be used, but only if it is essential to the meaning of the icon.</para></listitem>
+ <listitem><para>Simple visual style, typically comprising only a single symbol</para></listitem>
+ <listitem><para>All lines and borders at least 4 pixels wide (at 48x48 pixels)</para></listitem>
+ </itemizedlist>
+ <figure>
+ <title>Part of application window rendered in high contrast, large print theme</title>
+ <mediaobject>
+ <imageobject><imagedata fileref="images/icons-hc-theme.png" format="PNG"/></imageobject>
+ <imageobject><imagedata fileref="images/icons-hc-theme.eps" format="EPS"/></imageobject>
+ <textobject><phrase>Part of gedit window rendered in high contrast, large print theme</phrase></textobject>
+ </mediaobject>
+ </figure>
+
+ <para>This style allows high contrast icons to be distinguishable when viewed by a user with reduced visual acuity. Below is an approximation of what well-designed high contrast icons look like when viewed by such a user.</para>
+ <table frame="none" pgwide="0.5">
<title>Simulation of low vision user viewing high contrast icons</title>
<tgroup cols="3" colsep="0" rowsep="0" align="center">
@@ -581,7 +602,7 @@
</mediaobject>
</figure>
- <para>High contrast icons are created in a vector drawing program. Black and white shapes are layered to create a simplified icon. The process feels like layering black and white pieces of construction paper, as if you were assembling a collage.</para>
+ <para>High contrast icons are most easily created in a vector drawing application. Black and white shapes are layered to create a simplified icon. The process feels like layering black and white pieces of construction paper, as if you were assembling a collage.</para>
<figure>
<title>Layered technique for high contrast icons</title>
<mediaobject>
@@ -595,18 +616,47 @@
<para>Often shapes from existing high contrast icons can be resized and reused to more quickly build up a new icon.</para></tip>
<tip><title>Don't forget the border!</title>
- <para>It is useful to design high contrast icons over a temporary background color so you don't forget to draw the external white border.</para></tip>
+ <para>Design high contrast icons over a temporary background color so you don't forget to draw the external white border.</para></tip>
+
+
+
+ <sect3 id="icons-design-highcontrastinverse">
+ <title>High contrast inverse icons</title>
+ <para>High contrast inverse icons serve the same purpose as high contrast icons, but are easier to see for some users. Create a high contrast inverse icon simply by inverting the pixel values of the equivalent high contrast icon, for example in GIMP.</para>
+ <figure>
+ <title>Part of application window rendered in high contrast inverse, large print theme</title>
+ <mediaobject>
+ <imageobject><imagedata fileref="images/icons-hc-inverse-theme.png" format="PNG"/></imageobject>
+ <imageobject><imagedata fileref="images/icons-hc-inverse-theme.eps" format="EPS"/></imageobject>
+ <textobject><phrase>Part of gedit window rendered in high contrast inverse, large print theme</phrase></textobject>
+ </mediaobject>
+ </figure>
+
+ </sect3>
</sect2>
+
<sect2 id="icons-design-lowcontrast">
<title>Low Contrast Icons</title>
-
+<!--
+ <para>Low contrast icons and themes are useful to users who are particularly sensitive to light, to the extent that they find even a high contrast inverse theme uncomfortable to use. In low contrast icons, the colors are compressed towards the middle value range, so they do not contain any large luminance values (the 'V' in HSV). That is, dark colors are lightened, and light colors are darkened.</para>
+ <figure>
+ <title>Part of application window rendered in low contrast theme</title>
+ <mediaobject>
+ <imageobject><imagedata fileref="images/lowcontrast-theme.png" format="PNG"/></imageobject>
+ <imageobject><imagedata fileref="images/lowcontrast-theme.eps" format="EPS"/></imageobject>
+ <textobject><phrase>Part of gedit window rendered in low contrast theme</phrase></textobject>
+ </mediaobject>
+ </figure>
+-->
<tip><title>Low Contrast Icons</title>
<para>Low contrast icon themes were deprecated in GNOME 2.22. It is no longer necessary to deliver low contrast icon equivalents. </para></tip>
<para>
- The goal of low contrast themes is to eliminate, as much as possible, light values (e.g. a large 'V' value in HSV). To achieve this, the colors in low contrast icons are compressed toward the middle value range, i.e. dark colors are lightened and light colors are darkened.
- </para>
- <para>
- Low contrast icons are generated from the existing regular icons by adjusting the levels in GIMP. The Input Levels are set to 100, 1.25, 200 and the Output Levels are set to 100, 160, as shown in the Levels dialog below. Large numbers of regular icons can be quickly converted to low contrast by using GIMP's scripting facilities.</para>
+ Low contrast icons are generated from the existing regular icons by adjusting the levels. In GIMP, use these values in the Levels dialog:</para>
+ <itemizedlist>
+ <listitem><para>Input: 100, 1.25, 200</para></listitem>
+ <listitem><para>Output: 100, 160</para></listitem>
+ </itemizedlist>
+
<figure>
<title>Levels dialog in GIMP showing correct levels for generating low contrast icons</title>
<mediaobject>
@@ -615,6 +665,7 @@
<textobject><phrase>Levels dialog in GIMP showing input levels set to 100, 1.25, 200, and output levels set to 100 and 160.</phrase></textobject>
</mediaobject>
</figure>
+<tip><title>Batch conversion</title><para>Large numbers of regular icons can be quickly converted to low contrast by using GIMP's scripting facilities. A <ulink url="http://cvs.gnome.org/viewcvs/gnome-themes/low-contrast-preset.scm?view=markup";>script</ulink> to do this is provided in the gnome-themes module.<remark>There are some suggestions that it would be a better for a low contrast theme engine to do this on the fly.</remark></para></tip>
</sect2>
</sect1>
Modified: trunk/content/projects/gup/hig/hig-ch-input.xml
==============================================================================
--- trunk/content/projects/gup/hig/hig-ch-input.xml (original)
+++ trunk/content/projects/gup/hig/hig-ch-input.xml Mon Sep 29 23:32:29 2008
@@ -1,4 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
+<!-- :xml.root=hig-book.xml: -->
<chapter id="input">
<title>User Input</title>
@@ -34,9 +35,9 @@
<listitem><para>Your application uses the middle button to paste the current PRIMARY (usually the last-highlighted) selection at the pointer position, as follows:</para>
- <table frame='all'>
+ <table frame='none'>
<title>Effect of modifier keys on a <mousebutton>middle button</mousebutton> transfer operation</title>
- <tgroup cols='2' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='2' align='left'>
<thead>
<row>
<entry>Modifier</entry>
@@ -71,7 +72,7 @@
<listitem><para><keycombo><keycap>Ctrl</keycap><mousebutton>scrollwheel-up</mousebutton></keycombo> should zoom into the window or control under the mouse pointer, and <keycombo><keycap>Ctrl</keycap><mousebutton>scrollwheel-down</mousebutton></keycombo> should zoom out. Zooming in this way should not move keyboard focus to the window or control being zoomed.</para></listitem>
- <listitem><para>Do not depend on input from the middle or right mouse buttons. As well as being physically more difficult to click, some pointing devices and many assistive technology devices only support or emulate the left mouse button. Some assistive technologies may noteven emulate the mouse at all, but generate keyboard events instead.</para></listitem>
+ <listitem><para>Do not depend on input from the middle or right mouse buttons. As well as being physically more difficult to click, some pointing devices and many assistive technology devices only support or emulate the left mouse button. Some assistive technologies may not even emulate the mouse at all, but generate keyboard events instead.</para></listitem>
<listitem><para>Ensure that every operation in your application that can be done with the mouse can also be done with the keyboard. The only exceptions to this are actions where fine motor control is an essential part of the task. For example, controlling movement in some types of action games, or freehand painting in an image-editing application.</para></listitem>
@@ -81,7 +82,7 @@
<listitem><para>Do not require the use of multiple (triple- or quadruple-) clicking actions for any operations, unless you also provide an accessible alternative method of performing the same action.</para></listitem>
- <listitem><para>Allow all mouse operations to be cancelled before their completion. Pressing the Esc key should cancel any mouse operation in progress, such as dragging and dropping a file in a file manager, or drawing a shape in a drawing application.</para></listitem>
+ <listitem><para>Allow all mouse operations to be canceled before their completion. Pressing the Esc key should cancel any mouse operation in progress, such as dragging and dropping a file in a file manager, or drawing a shape in a drawing application.</para></listitem>
<listitem><para>Do not assign any actions exclusively to the middle button of a three-button mouse, as not all mice have one.</para></listitem>
@@ -101,9 +102,9 @@
<para>For controls or windows that contain a number of objects that the
user can select, either singly or multiply, ensure the following mechanisms are in place to allow selections to be made using either the mouse or the keyboard.</para>
- <table frame='all' pgwide='1'>
+ <table frame='none' pgwide='1'>
<title>Standard mouse and keyboard selection mechanisms</title>
- <tgroup cols='3' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='3' align='left'>
<thead>
<row>
<entry></entry>
@@ -130,7 +131,7 @@
<row>
<entry>Move focus</entry>
<entry>Click appropriate item to select it</entry>
- <entry>Cursor keys, <keycap>Home</keycap>, <keycap>End</keycap>, <keycap>PageUp</keycap>, and <keycap>PageDown</keycap> move focus and selection simultaneously.
+ <entry><para>Cursor keys, <keycap>Home</keycap>, <keycap>End</keycap>, <keycap>PageUp</keycap>, and <keycap>PageDown</keycap> move focus and selection simultaneously.</para>
<para><keycombo><keycap>Ctrl</keycap><keysym>cursor keys</keysym></keycombo>, <keycombo><keycap>Ctrl</keycap><keycap>Home</keycap></keycombo>,<keycombo><keycap>Ctrl</keycap><keycap>End</keycap></keycombo>, <keycombo><keycap>Ctrl</keycap><keycap>PageUp</keycap></keycombo>, and <keycombo><keycap>Ctrl</keycap><keycap>PageDown</keycap></keycombo> move focus without affecting current selection.</para></entry>
</row>
<row>
@@ -253,7 +254,7 @@
<listitem><para>When an item is being dragged within or into a scrollable window, support automatic scrolling of that window when the mouse is moved near its edges.</para></listitem>
- <listitem><para>Pop up a menu when the user attemps to drop multiple objects on a target that only accepts single objects. On the menu, list all the objects being dragged, and a <guimenuitem>Cancel</guimenuitem> item.</para></listitem>
+ <listitem><para>Pop up a menu when the user attempts to drop multiple objects on a target that only accepts single objects. On the menu, list all the objects being dragged, and a <guimenuitem>Cancel</guimenuitem> item.</para></listitem>
<!-- CFB commenting this one out for now because it doesn't mean much the way it's written, and we'd ideally like to aim for more consistency than this anyway
@@ -271,9 +272,9 @@
<sect4 id="drag-drop-modifiers"><title>Keyboard Modifiers</title>
<para>Allow the user to force the behavior of a drag and drop operation by holding the <keycap>Ctrl</keycap>, <keycap>Shift</keycap> or both keys throughout. If the user changes modifier keys after they have started the drag, change the mouse pointer immediately and perform the new action when the mouse button is released.</para>
- <table frame='all'>
+ <table frame='none'>
<title>Effect of modifier keys during a drag and drop operation</title>
- <tgroup cols='2' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='2' align='left'>
<thead>
<row>
<entry>Modifier</entry>
@@ -311,9 +312,9 @@
<para>Use the default GTK drag and drop pointers for the standard transfer operations listed below. This consistency helps ensure the user will know exactly what to expect when they release the mouse button. If you have to design a pointer for a non-standard transfer action not listed here, follow the style of the standard pointers.</para>
- <table frame='all'>
+ <table frame='none'>
<title>Mouse Pointers for Drag and Drop</title>
- <tgroup cols='2' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='2' align='left'>
<thead>
<row>
<entry>Pointer Shape</entry>
@@ -352,7 +353,7 @@
<textobject><phrase>"Link" pointer</phrase></textobject>
</mediaobject>
</entry>
- <entry>Link selection. A link to the selection will be inserted at the drop location. How the link appears will be application-dependent, it may be a hyperlink, an icon, or a duplicate of the orignal selection, for example.</entry>
+ <entry>Link selection. A link to the selection will be inserted at the drop location. How the link appears will be application-dependent, it may be a hyperlink, an icon, or a duplicate of the original selection, for example.</entry>
</row>
<row>
@@ -397,7 +398,7 @@
<listitem><para>Clicking the right button <emphasis>anywhere</emphasis> within the applet's enclosing window must display either the popup menu for the whole applet, or the popup menu for the control under the mouse pointer. Do not have "dead areas" in your applet that do not respond to a right click.</para></listitem>
<listitem><para>Do not use the middle button for anything except dragging the applet to a new location. Middle-clicking and dragging anywhere within the applet window must move the applet, do not require a drag bar or similar device.</para>
- <para><keycombo action="other" otheraction="drag"><keycap>Ctrl</keycap><mousebutton>left button</mousebutton></keycombo> <action>drag</action> should copy the applet, if moving to another panel; unmodified drag or <keycombo action="other" otheraction="drag"><keycap>Shift</keycap><mousebutton>left button</mousebutton></keycombo> <action>drag</action> should move the applet, if moving to another panel. If moving within same panel, <keycap>Ctrl</keycap>=switched movement, <keycap>Shift</keycap>=push movement, <keycap>Alt</keycap>=free movement.</para></listitem>
+ <para><keycombo action="other" otheraction="drag"><keycap>Ctrl</keycap><mousebutton> left button</mousebutton></keycombo> <action>drag</action> should copy the applet, if moving to another panel; unmodified drag or <keycombo action="other" otheraction="drag"><keycap>Shift</keycap><mousebutton> left button</mousebutton></keycombo> <action>drag</action> should move the applet, if moving to another panel. If moving within same panel, <keycap>Ctrl</keycap>=switched movement, <keycap>Shift</keycap>=push movement, <keycap>Alt</keycap>=free movement.</para></listitem>
</itemizedlist>
@@ -463,7 +464,7 @@
<sect2 id="choosing-access-keys">
<title>Choosing Access Keys</title>
- <para>Give all labelled components an access key (underlined letter), with the exception of toolbar controls which would use up too many access key combinations.</para>
+ <para>Give all labeled components an access key (underlined letter), with the exception of toolbar controls which would use up too many access key combinations.</para>
<!-- Consensus was against giving OK and Cancel additional access keys, but they have them anyway and Owen refuses to remove them...
@@ -513,10 +514,12 @@
<listitem><para>Choose new shortcut keys to be as mnemonic as possible, as these will be easier to learn and remember. For example, <keycombo><keycap>Ctrl</keycap><keycap>E</keycap></keycombo> would be a good shortcut for a menu item called <guimenuitem>Edit Page</guimenuitem>.</para></listitem>
<listitem><para>Use <keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>letter</keycap></keycombo> for functions that reverse or extend another function. For example, <keycombo><keycap>Ctrl</keycap><keycap>Z</keycap></keycombo> and <keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>Z</keycap></keycombo> for <guimenuitem>Undo</guimenuitem> and <guimenuitem>Redo</guimenuitem>.
- <note><title>Unicode entry shortcuts</title><para>Note that you cannot use <keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>A-thru-F</keycap></keycombo> or <keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>0-thru-9</keycap></keycombo> for your own purposes, as these combinations are used to enter unicode characters in text fields.</para></note>
+
+ <note><title>Unicode entry shortcut</title>
+ <para>Note that you cannot use <keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>U</keycap></keycombo> for your own purposes, as this shortcut is used to enter unicode characters in text fields. If you need compatability with releases prior to GNOME 2.16, you should not use <keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>A-thru-F</keycap></keycombo> or <keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>0-thru-9</keycap></keycombo> for the same reason.</para></note>
</para></listitem>
- <listitem><para>Do not use <keycombo><keycap>Ctrl</keycap><keycap>number</keycap></keycombo> or numbered function keys as shortcut keys, unless the number has some obvious relevance to the action. For example, <keycombo><keycap>Ctrl</keycap><keycap>2</keycap></keycombo> and <keycombo><keycap>Ctrl</keycap><keycap>3</keycap></keycombo> may be acceptable shortcut keys for <menuchoice><guimenu>View</guimenu><guimenuitem>2D View</guimenuitem></menuchoice> and <menuchoice><guimenu>View</guimenu><guimenuitem>3D View</guimenuitem></menuchoice> in a 3D modelling application.</para></listitem>
+ <listitem><para>Do not use <keycombo><keycap>Ctrl</keycap><keycap>number</keycap></keycombo> or numbered function keys as shortcut keys, unless the number has some obvious relevance to the action. For example, <keycombo><keycap>Ctrl</keycap><keycap>2</keycap></keycombo> and <keycombo><keycap>Ctrl</keycap><keycap>3</keycap></keycombo> may be acceptable shortcut keys for <menuchoice><guimenu>View</guimenu><guimenuitem>2D View</guimenuitem></menuchoice> and <menuchoice><guimenu>View</guimenu><guimenuitem>3D View</guimenuitem></menuchoice> in a 3D modeling application.</para></listitem>
<listitem><para>Do not use <keycombo><keycap>Alt</keycap><keycap>key</keycap></keycombo> combinations for shortcut keys, as these may conflict with window manager or menu access keys.</para></listitem>
@@ -533,9 +536,9 @@
<para>If your application uses any of the standard functions listed in the following tables, use the recommended standard keyboard shortcut for that function.</para>
- <table frame='all' pgwide='1'>
+ <table frame='none' pgwide='1'>
<title>Standard GNOME application shortcut keys and access keys - File menu</title>
- <tgroup cols='3' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='3' align='left'>
<thead>
<row>
<entry>Function</entry>
@@ -578,9 +581,9 @@
</tgroup>
</table>
- <table frame='all' pgwide='1'>
+ <table frame='none' pgwide='1'>
<title>Standard GNOME application shortcut keys and access keys - Edit menu</title>
- <tgroup cols='3' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='3' align='left'>
<thead>
<row>
<entry>Function</entry>
@@ -696,9 +699,9 @@
- <table frame='all' pgwide='1'>
+ <table frame='none' pgwide='1'>
<title>Standard GNOME application shortcut keys and access keys - View menu</title>
- <tgroup cols='3' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='3' align='left'>
<thead>
<row>
<entry>Function</entry>
@@ -745,9 +748,9 @@
<para>If your application requires both <menuchoice><guimenu>View</guimenu><guimenuitem>Reload</guimenuitem></menuchoice> and <menuchoice><guimenu>View</guimenu><guimenuitem>Refresh</guimenuitem></menuchoice> menu items, use <keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>R</keycap></keycombo> as the shortcut for <guimenuitem>Reload</guimenuitem>.</para>
</note>
- <table frame='all' pgwide='1'>
+ <table frame='none' pgwide='1'>
<title>Standard GNOME application shortcut keys and access keys - Bookmarks menu</title>
- <tgroup cols='3' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='3' align='left'>
<thead>
<row>
<entry>Function</entry>
@@ -774,9 +777,9 @@
<para>If your application requires both <menuchoice><guimenu>Format</guimenu><guimenuitem>Bold</guimenuitem></menuchoice> and <menuchoice><guimenu>Bookmarks</guimenu><guimenuitem>Edit Bookmarks...</guimenuitem></menuchoice> menu items, use <keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>D</keycap></keycombo> as the shortcut for <guimenuitem>Edit Bookmarks</guimenuitem>.</para>
</note>
- <table frame='all' pgwide='1'>
+ <table frame='none' pgwide='1'>
<title>Standard GNOME application shortcut keys and access keys - Go menu</title>
- <tgroup cols='3' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='3' align='left'>
<thead>
<row>
<entry>Function</entry>
@@ -816,9 +819,9 @@
</table>
- <table frame='all' pgwide='1'>
+ <table frame='none' pgwide='1'>
<title>Standard GNOME application shortcut keys and access keys - Format menu</title>
- <tgroup cols='3' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='3' align='left'>
<thead>
<row>
<entry>Function</entry>
@@ -851,9 +854,9 @@
</note>
-->
- <table frame='all' pgwide='1'>
+ <table frame='none' pgwide='1'>
<title>Standard GNOME application shortcut keys and access keys - Help menu</title>
- <tgroup cols='3' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='3' align='left'>
<thead>
<row>
<entry>Function</entry>
@@ -890,9 +893,9 @@
<title>Standard Window Manager Shortcut Keys</title>
<para>The following shortcut keys are used by many window managers, and should not normally be over-ridden by your application.</para>
-<table frame='all' pgwide='1'>
+<table frame='none' pgwide='1'>
<title>Standard window manager shortcut keys and access keys</title>
- <tgroup cols='3' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='3' align='left'>
<thead>
<row>
<entry>Function</entry>
@@ -975,9 +978,9 @@
<title>Standard Widget Navigation Shortcut Keys</title>
<para>The following shortcut keys are reserved for keyboard navigation use by the various widgets used in GNOME, and should not normally be over-ridden by your application.</para>
- <table frame='all' pgwide='1'>
+ <table frame='none' pgwide='1'>
<title>Standard GNOME keyboard navigation keys for widgets</title>
- <tgroup cols='2' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='2' align='left'>
<thead>
<row>
<entry>Key</entry>
@@ -1030,8 +1033,12 @@
<entry>Select/move to first item in selected widget</entry>
</row>
<row>
- <entry><keycap>PageUp</keycap>, <keycombo><keycap>Ctrl</keycap><keycap>PageUp</keycap></keycombo>, <keycap>PageDown</keycap>, <keycombo><keycap>Ctrl</keycap><keycap>PageDown</keycap></keycombo></entry>
- <entry>Scroll selected view by one page up/left/down/right</entry>
+ <entry><keycap>PageUp</keycap>, <keycap>PageDown</keycap></entry>
+ <entry>Scroll selected view by one page up/down</entry>
+ </row>
+ <row>
+ <entry><keycombo><keycap>Ctrl</keycap><keycap>PageUp</keycap></keycombo>, <keycombo><keycap>Ctrl</keycap><keycap>PageDown</keycap></keycombo></entry>
+ <entry>Scroll selected view by one page left/right</entry>
</row>
</tbody>
</tgroup>
@@ -1044,9 +1051,9 @@
<para>The following emacs-style navigation shortcut keys are still available in GNOME 2.0 text entry fields (by selecting the "emacs" scheme in the GNOME <guilabel>Keyboard Shortcuts</guilabel> preferences dialog), but are disabled by default. Since some users will still want to use them, do not over-ride them for your own purposes in any situations where a text entry control has focus.</para>
- <table frame='all' pgwide='1'>
+ <table frame='none' pgwide='1'>
<title>Emacs-style navigation keys for widgets</title>
- <tgroup cols='2' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='2' align='left'>
<thead>
<row>
<entry>Key</entry>
@@ -1115,13 +1122,13 @@
<para>Panels have been fully keyboard navigable since GNOME 2.0. Since your panel application can gain keyboard focus, you must ensure that it is also keyboard navigable.</para>
- <para>The rules for panel application keyboard navigation are mostly the same as those for any other window. However, there is one imporant difference:</para>
+ <para>The rules for panel application keyboard navigation are mostly the same as those for any other window. However, there is one important difference:</para>
<itemizedlist>
<listitem><para>Do <emphasis>not</emphasis> use the the <keycap>Tab</keycap> key as the means of moving focus between controls in a panel application. Use the arrow keys for this purpose instead.</para></listitem>
</itemizedlist>
- <para>When an object on a panel has focus, the <keycap>Tab</keycap> key normally moves focus to the next object on the panel. If your panel application also used <keycap>Tab</keycap> for its own internal navigation, the user would have to press <keycombo><keycap>Ctrl</keycap><keycap>Tab</keycap></keycombo> to move focus out of your panel application instead. This inconsistency would be detremental to the user experience.</para>
+ <para>When an object on a panel has focus, the <keycap>Tab</keycap> key normally moves focus to the next object on the panel. If your panel application also used <keycap>Tab</keycap> for its own internal navigation, the user would have to press <keycombo><keycap>Ctrl</keycap><keycap>Tab</keycap></keycombo> to move focus out of your panel application instead. This inconsistency would be detrimental to the user experience.</para>
</sect2>
Modified: trunk/content/projects/gup/hig/hig-ch-language.xml
==============================================================================
--- trunk/content/projects/gup/hig/hig-ch-language.xml (original)
+++ trunk/content/projects/gup/hig/hig-ch-language.xml Mon Sep 29 23:32:29 2008
@@ -4,14 +4,14 @@
<chapter id="language">
<title>Language</title>
- <para>Consistent labelling creates a familiar environment that the user can navigate comfortably. The more familiar the environment, the easier task of finding information.</para>
+ <para>Consistent labeling creates a familiar environment that the user can navigate comfortably. The more familiar the environment, the easier task of finding information.</para>
<sect1 id="language-labels">
<title>Labels</title>
<sect2 id="language-controls">
<title>Controls</title>
- <para>Clear, consistent and concise labelling of controls helps users to work out the purpose of a window or dialog they have never seen before. To a visually-impaired user, clear labels are even more important. A user who relies on a screenreader has no assistance from icons, layout, or spacing to work out what the controls do, so clear labelling is essential.</para>
+ <para>Clear, consistent and concise labeling of controls helps users to work out the purpose of a window or dialog they have never seen before. To a visually-impaired user, clear labels are even more important. A user who relies on a screenreader has no assistance from icons, layout, or spacing to work out what the controls do, so clear labeling is essential.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Keep labels short. This:
@@ -27,7 +27,7 @@
<listitem><para>Do not include text in windows that describes <emphasis>how</emphasis> to use the interface, for example <guilabel>You can install a new theme by dropping it here</guilabel>. As well as adding visual clutter, descriptive labels can also conflict with information provided in documentation.</para></listitem>
- <listitem><para>Use standard terms. You can find a list of standard user interface terms in the <ulink url="http://developer.gnome.org/documents/style-guide/wordlist.html";>GNOME Documentation Style Guide, Recommended Terminology</ulink>..</para></listitem>
+ <listitem><para>Use standard terms. You can find a list of standard user interface terms in the <ulink url="http://developer.gnome.org/documents/style-guide/wordlist.html";>GNOME Documentation Style Guide, Recommended Terminology</ulink>.</para></listitem>
<listitem><para>Apply standard capitalization rules. See <xref linkend="layout-capitalization"/> for guidelines about capitalization of user interface labels </para></listitem>
</itemizedlist>
@@ -98,8 +98,8 @@
<sect1 id="language-help">
- <title>Online Help</title>
- <para>Writing online help is a specialized task, and is therefore not covered in any depth here. Refer to the <ulink url="http://developer.gnome.org/documents/style-guide/index.html";>GNOME Documentation Styleguide</ulink> for guidance on writing clear, consistent and helpful documentation for your application.</para>
+ <title>On-line Help</title>
+ <para>Writing on-line help is a specialized task, and is therefore not covered in any depth here. Refer to the <ulink url="http://developer.gnome.org/documents/style-guide/index.html";>GNOME Documentation Styleguide</ulink> for guidance on writing clear, consistent and helpful documentation for your application.</para>
</sect1>
</chapter>
Modified: trunk/content/projects/gup/hig/hig-ch-layout.xml
==============================================================================
--- trunk/content/projects/gup/hig/hig-ch-layout.xml (original)
+++ trunk/content/projects/gup/hig/hig-ch-layout.xml Mon Sep 29 23:32:29 2008
@@ -43,7 +43,7 @@
<table frame="none">
<title>RGB and hexadecimal values for the basic palette</title>
- <tgroup cols="8" colsep="1" rowsep="0" align="left">
+ <tgroup cols="8" colsep="0" rowsep="0" align="left">
<thead>
<row rowsep="1" valign="top">
<entry>Color</entry>
@@ -62,7 +62,7 @@
<imageobject><imagedata fileref="images/visdes-palette-1.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-1.eps" format="EPS"/></imageobject>
</mediaobject></entry>
- <entry>Basic 3D Hilight</entry>
+ <entry>Basic 3D Highlight</entry>
<entry>234 232 227</entry>
<entry>#EAE8E3 </entry>
<entry><mediaobject>
@@ -94,7 +94,7 @@
<imageobject><imagedata fileref="images/visdes-palette-5.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-5.eps" format="EPS"/></imageobject>
</mediaobject></entry>
- <entry>Green Hilight</entry>
+ <entry>Green Highlight</entry>
<entry>197 210 200</entry>
<entry>#C5D2C8 </entry>
<entry><mediaobject>
@@ -126,7 +126,7 @@
<imageobject><imagedata fileref="images/visdes-palette-9.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-9.eps" format="EPS"/></imageobject>
</mediaobject></entry>
- <entry>Red Hilight</entry>
+ <entry>Red Highlight</entry>
<entry>224 182 175</entry>
<entry>#E0B6AF </entry>
<entry><mediaobject>
@@ -158,7 +158,7 @@
<imageobject><imagedata fileref="images/visdes-palette-13.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-13.eps" format="EPS"/></imageobject>
</mediaobject></entry>
- <entry>Purple Hilight</entry>
+ <entry>Purple Highlight</entry>
<entry>173 167 200</entry>
<entry>#ADA7C8 </entry>
<entry><mediaobject>
@@ -190,7 +190,7 @@
<imageobject><imagedata fileref="images/visdes-palette-17.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-17.eps" format="EPS"/></imageobject>
</mediaobject></entry>
- <entry>Blue Hilight</entry>
+ <entry>Blue Highlight</entry>
<entry>157 184 210</entry>
<entry>#9DB8D2 </entry>
<entry><mediaobject>
@@ -222,7 +222,7 @@
<imageobject><imagedata fileref="images/visdes-palette-21.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-21.eps" format="EPS"/></imageobject>
</mediaobject></entry>
- <entry>Face Skin Hilight</entry>
+ <entry>Face Skin Highlight</entry>
<entry>239 224 205</entry>
<entry>#EFE0CD </entry>
<entry><mediaobject>
@@ -326,12 +326,12 @@
<para>An estimated 11% of the world population has some sort of color-blindness. Those affected typically have trouble distinguishing between certain hues such as red and green (deuteranopia or protanopia), or blue and yellow (tritanopia). Therefore it is necessary to allow the user to customize colors in any part of your application that conveys important information. This means that your application must effectively convey information using just the colors from any theme that the user chooses<!--, and that attributes such as hue and brightness are adjustable in your application's preferences dialog -->.</para>
- <para>A useful tool for reviewing information about color-blindness and checking legibility of images for color-blind users is <ulink url="http://www.vischeck.com/";>Vischeck</ulink>, an online tool that simulates the way an image or a website might appear to a user who has deuteranopia, protanopia, or tritanopia. </para>
+ <para>A useful tool for reviewing information about color-blindness and checking legibility of images for color-blind users is <ulink url="http://www.vischeck.com/";>Vischeck</ulink>, an on-line tool that simulates the way an image or a website might appear to a user who has deuteranopia, protanopia, or tritanopia. </para>
<figure><title>How the earth looks to a user with normal color vision (left), deuteranopia (middle), and tritanopia (right). (Images from <ulink url="http://www.vischeck.com";>http://www.vischeck.com</ulink>).</title>
<informaltable frame="none">
- <tgroup cols="3" align="center">
+ <tgroup colsep="0" rowsep="0" cols="3" align="center">
<tbody valign="top">
<row>
<entry>
@@ -401,7 +401,7 @@
<figure id="improved-layout-figure"><title>Improved window layout</title>
<informaltable frame="none">
- <tgroup cols="2" align="center">
+ <tgroup colsep="0" rowsep="0" cols="2" align="center">
<tbody valign="top">
<row>
<entry>
@@ -458,8 +458,6 @@
</sect2>
-<!--
-I'm commenting out this section for the HIG 2.8 release pending "still needs more work" -Seth
<sect2 id="layout-window-size">
<title>Size</title>
@@ -493,7 +491,6 @@
</sect2>
--->
<sect2 id="window-layout-spacing">
<title>Spacing and Alignment</title>
@@ -511,7 +508,7 @@
<listitem><para>Indent group members 12 pixels to denote hierarchy and association.</para></listitem>
<listitem><para>Minimize the number of alignment points in your window. An alignment point is an imaginary vertical or horizontal line through your window that touches the edge of one or more labels or controls in the window.</para></listitem>
- <listitem><para>Right-justification within groups or the overall window (as indicated by the line labelled "justification" in <xref linkend="layout-callouts-figure"/> is pleasing to the eye, but not crucial.</para></listitem>
+ <listitem><para>Right-justification within groups or the overall window (as indicated by the line labeled "justification" in <xref linkend="layout-callouts-figure"/> is pleasing to the eye, but not crucial.</para></listitem>
<listitem><para>Lay out components left-to-right, top-to-bottom. Generally, the first element the user is meant to encounter should be in the top-left, and the last in the bottom right. Keep in mind that when localized for non-western locales, interfaces may be reversed so that they read from right to left.</para></listitem>
@@ -565,9 +562,9 @@
<para>Use spacing and alignment of text uniformly throughout your application. A basic rule of thumb is to put space between user interface components in increments of 6 pixels, going up as the relationship between related elements becomes more distant.</para>
- <table id="label-placement-example">
+ <table frame="none" id="label-placement-example">
<title>Alignment and spacing for different Text elements</title>
- <tgroup cols="3" align="left">
+ <tgroup colsep="0" rowsep="0" cols="3" align="left">
<thead>
<row>
<entry>Element</entry>
@@ -579,7 +576,7 @@
<tbody>
<row>
<entry>Large Icons (file browser)</entry>
- <entry>Horizontally centered with and (6 pixels, if specification necessary)below large icon</entry>
+ <entry>Horizontally centered and (6 pixels, if specification necessary) below large icons</entry>
<entry align="center" valign="middle">
<mediaobject>
<imageobject><imagedata fileref="images/visdes-large-icon-label.png" format="PNG"/></imageobject>
@@ -591,7 +588,7 @@
<row>
<entry>Small icons (toolbar)</entry>
- <entry>Vertically centered with and (6 pixels, if specification necessary) to the right of small icons</entry>
+ <entry>Vertically centered and (6 pixels, if specification necessary) to the right of small icons</entry>
<entry align="center" valign="middle">
<mediaobject>
<imageobject><imagedata fileref="images/visdes-small-icon-label.png" format="PNG"/></imageobject>
@@ -603,7 +600,7 @@
<row>
<entry>List control label</entry>
- <entry>6 pixels above and horizontally left aligned with list control or 12 pixels to the left of and horizontally top aligned with list control</entry>
+ <entry>6 pixels above and horizontally left aligned with the list control or 12 pixels to the left of and horizontally top aligned with list control</entry>
<entry align="center" valign="middle">
<mediaobject>
<imageobject><imagedata fileref="images/visdes-list-label.png" format="PNG"/></imageobject>
@@ -615,7 +612,7 @@
<row>
<entry>Radio button and check box labels</entry>
- <entry>6 pixels to the right of and vertically center aligned with radio button</entry>
+ <entry>6 pixels to the right of and vertically center aligned with the radio button</entry>
<entry align="center" valign="middle">
<mediaobject>
<imageobject><imagedata fileref="images/visdes-radiobutton-label.png" format="PNG"/></imageobject>
@@ -628,7 +625,7 @@
<row>
<entry>Text field labels</entry>
- <entry>6 pixels to the left of and vertically center aligned with textfield control</entry>
+ <entry>6 pixels to the left of and vertically center aligned with the textfield control</entry>
<entry align="center" valign="middle">
<mediaobject>
<imageobject><imagedata fileref="images/visdes-textbox-label.png" format="PNG"/></imageobject>
@@ -673,7 +670,7 @@
<remark>GJM: This is just wrong. Glade may have an "auto" target for labels with mnemonics that
works this way, but it isn't part of GTK+. Adding the next listitem, though it could be better written.</remark>
-->
- <listitem><para>Ensure that a label with a mnemonic is associated with the control it labels.</para></listitem>
+ <listitem><para>Ensure that a label with an access key is associated with the control it labels.</para></listitem>
<listitem><para>Left-align components and labels, unless all the labels in a group have very different lengths. If they do, right-align the labels instead, to ensure that no controls end up too far away from their corresponding labels.</para></listitem>
@@ -744,9 +741,8 @@
of user interface element.
</para>
- <table frame="topbot">
- <title>Capitalization Style Guidelines for User Interface
- Elements</title>
+ <table frame="none">
+ <title>Capitalization Style Guidelines for User Interface Elements</title>
<tgroup cols="2" colsep="0" rowsep="0" align="left">
<thead>
<row rowsep="1" valign="top">
Modified: trunk/content/projects/gup/hig/hig-ch-menus.xml
==============================================================================
--- trunk/content/projects/gup/hig/hig-ch-menus.xml (original)
+++ trunk/content/projects/gup/hig/hig-ch-menus.xml Mon Sep 29 23:32:29 2008
@@ -1,69 +1,91 @@
<?xml version="1.0" encoding="UTF-8"?>
- <chapter id="menus">
- <title>Menus</title>
-<remark> Tear| off menus? (These are controlled by gconf in 2.0, so nothing app developer needs to do?)</remark>
-<remark> Menu bar position </remark>
-<remark> Menu bar hiding </remark>
+<!-- :xml.root=hig-book.xml: -->
- <para>Menus present the whole range of an application's commands to the user, and often a subset of its preferences. When designing a new application, place common menu items in the same locations as they appear in other applications, as this makes it much easier for the user to learn.</para>
+<chapter id="menus">
+ <title>Menus</title>
- <para>In most applications, only primary windows should have a menubar. <link linkend="windows-utility">Utility windows</link> and <link linkend="windows-dialog">dialogs</link> should be simple enough that their functions can be provided by controls such as buttons placed within the window.</para>
-
- <para>Occasionally, however, a utility window or dialog is so complex that there would be too many such controls. In this case, you may use a menubar provided that:</para>
-
+ <remark> Tear-off menus? (These are controlled by gconf in 2.0, so nothing app developer needs to do?)</remark>
+ <remark> Menu bar position </remark>
+ <remark> Menu bar hiding </remark>
+
+ <para>Menus present the whole range of an application's commands to the user, and often a subset of its preferences. When designing a new application, place common menu items in the same locations as they appear in other applications, as this makes it much easier for the user to learn.</para>
+
+ <para>In most applications, only primary windows should have a menubar. <link linkend="windows-utility">Utility windows</link> and <link linkend="windows-dialog">dialogs</link> should be simple enough that their functions can be provided by controls such as buttons placed within the window.</para>
+
+ <para>Occasionally, however, a utility window or dialog is so complex that there would be too many such controls. In this case, you may use a menubar provided that:</para>
+ <itemizedlist>
+ <listitem>
+ <para>the menus follow the same standard layout as described in <xref linkend="menus-standard"/></para>
+ </listitem>
+ <listitem>
+ <para>the window does not include a dialog button area or any buttons that dismiss it, such as <guibutton>OK</guibutton>, <guibutton>Close</guibutton> or <guibutton>Cancel</guibutton>. Place these commands on the <guimenu>File</guimenu> menu or equivalent instead.</para>
+ </listitem>
+ </itemizedlist>
+ <itemizedlist>
+ <title>Guidelines</title>
+ <listitem>
+ <para>Label menu items with verbs for commands and adjectives for settings, according to the rules in <xref linkend="layout-capitalization"/>.</para>
+ </listitem>
+ <listitem>
+ <para>Make a menu item insensitive when its command is unavailable. For example, the <menuchoice><guimenu>Edit</guimenu><guimenuitem>Copy</guimenuitem></menuchoice> item, which issues the command to copy selected data to the clipboard, should not be active when there is no data selected.</para>
+ </listitem>
+ <listitem>
+ <para>Provide an access key for every menu item. You may use the same access key on different menus in your application, but avoid duplicating access keys on the same menu. Note that unlike other controls, once a menu is displayed, its access keys may be used by just typing the letter; it is not necessary to press the <keysym>Alt</keysym> key at the same time.</para>
+ </listitem>
+ <listitem>
+ <para>Design your menu structure to avoid more than one level of submenus. Deep menu hierarchies are harder to memorize and physically difficult to navigate.</para>
+ </listitem>
+ <listitem>
+ <para>Do not have menus with less than three items on them (except the standard <guimenu>Help</guimenu> menu, which has only two items by default). If you have a submenu with fewer than three items on it, move them into their parent menu. If you have a top-level menu with fewer than three items on it, find another suitable menu to add them to, or find suitable items from other menus to add to it.</para>
+ </listitem>
+ </itemizedlist>
+
+ <sect1 id="menus-menubar">
+ <title>The Menubar</title>
+ <figure id="example-menu-bar">
+ <title>A typical menubar</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/menus-application.png" format="PNG"/>
+ </imageobject>
+ <imageobject>
+ <imagedata fileref="images/menus-application.eps" format="EPS"/>
+ </imageobject>
+ <textobject>
+ <phrase>A typical application menubar, showing File, Edit, View, Insert, Format, Go, Bookmarks, Tools, Windows and Help menus</phrase>
+ </textobject>
+ </mediaobject>
+ </figure>
+
+ <para>The menubar provides a number of drop-down menus. Only the menu titles are displayed, until the user clicks on one of them.</para>
+ <para>The menubar is normally visible at all times and is always accessible from the keyboard, so make all the commands available in your application available on the menubar.</para>
+
+ <note>
+ <title>Full screen mode</title>
+ <para>When your application is running in full screen mode, hide the menubar by default. However, make its menus and items accessible from the keyboard as usual. Pressing <keycap>ESC</keycap> should cause the application to leave full screen mode. A <guibutton>Leave Fullscreen</guibutton> button should be placed in the upper right hand corner of the window. The button should disappear after the mouse is unused for 5 seconds, and should appear again when the moused is moved. Alternately, in applications where the mouse is used frequently in full screen mode, all but a two pixel row of the button may be slid off the top of the screen. The button should slide back on the screen when the mouse moves near it.</para>
+ </note>
+
<itemizedlist>
- <listitem><para>the menus follow the same standard layout as described in <xref linkend="menus-standard" /></para></listitem>
- <listitem><para>the window does not include a dialog button area or any buttons that dismiss it, such as <guibutton>OK</guibutton>, <guibutton>Close</guibutton> or <guibutton>Cancel</guibutton>. Place these commands on the <guimenu>File</guimenu> menu or equivalent instead.</para></listitem>
+ <title>Guidelines</title>
+ <listitem>
+ <para>Provide a menubar in each primary application window, containing at least a <guimenu>File</guimenu> and a <guimenu>Help</guimenu> menu.</para>
+ </listitem>
+ <listitem>
+ <para>Organize menu titles in the standard order--; see <xref linkend="menus-standard"/></para>
+ </listitem>
+ <listitem>
+ <para>Do not disable menu titles. Allow the user to explore the menu, even though there might be no available items on it at that time.</para>
+ </listitem>
+ <listitem>
+ <para>Menu titles on a menubar are single words with their first letter capitalized. Do not use spaces in menu titles, as this makes them easily-mistaken for two separate menu titles. Do not use compound words (such as <guimenu>WindowOptions</guimenu>) or hyphens (such as <guimenu>Window-Options</guimenu>) to circumvent this guideline.</para>
+ </listitem>
+ <listitem>
+ <para>Do not provide a mechanism for hiding the menubar, as this may be activated accidentally. Some users will not be able to figure out how to get the menu bar back in this case.</para>
+ </listitem>
</itemizedlist>
- <itemizedlist><title>Guidelines</title>
- <listitem><para>Label menu items with verbs for commands and adjectives for settings, according to the rules in <xref linkend="layout-capitalization"/>.</para></listitem>
-
- <listitem><para>Make a menu item insensitive when its command is unavailable. For example, the <menuchoice><guimenu>Edit</guimenu> <guimenuitem>Copy</guimenuitem></menuchoice> item, which issues the command to copy selected data to the clipboard, should not be active when there is no data selected.</para></listitem>
-
- <listitem><para>Provide an access key for every menu item. You may use the same access key on different menus in your application, but avoid duplicating access keys on the same menu. Note that unlike other controls, once a menu is displayed, its access keys may be used by just typing the letter; it is not necessary to press the <keysym>Alt</keysym> key at the same time.</para></listitem>
-
- <listitem><para>Design your menu structure to avoid more than one level of submenus. Deep menu hierarchies are harder to memorize and physically difficult to navigate.</para></listitem>
-
- <listitem><para>Do not have menus with less than three items on them (except the standard <guimenu>Help</guimenu> menu, which has only two items by default). If you have a submenu with fewer than three items on it, move them into their parent menu. If you have a top-level menu with fewer than three items on it, find another suitable menu to add them to, or find suitable items from other menus to add to it.</para></listitem>
-
- </itemizedlist>
-
-
- <sect1 id="menus-menubar">
- <title>The Menubar</title>
-
- <figure id="example-menu-bar">
- <title>A typical menubar</title>
- <mediaobject>
- <imageobject><imagedata fileref="images/menus-application.png" width="454" depth="27" format="PNG"/></imageobject>
- <imageobject><imagedata fileref="images/menus-application.eps" format="EPS"/></imageobject>
- <textobject><phrase>A typical application menubar, showing File, Edit, View, Insert, Format, Go, Bookmarks, Tools, Windows and Help menus</phrase></textobject>
- </mediaobject>
- </figure>
-
- <para>The menubar provides a number of drop-down menus. Only the menu titles are displayed, until the user clicks on one of them.</para>
-
- <para>The menubar is normally visible at all times and is always accessible from the keyboard, so make all the commands available in your application available on the menubar.</para>
-
- <note><title>Full screen mode</title><para>When your application is running in full screen mode, hide the menubar by default. However, make its menus and items accessible from the keyboard as usual. Pressing <keycap>ESC</keycap> should cause the application to leave full screen mode. A <guibutton>Leave Fullscreen</guibutton> button should be placed in the upper right hand corner of the window. The button should disappear after the mouse is unused for 5 seconds, and should appear again when the moused is moved. Alternately, in applications where the mouse is used frequently in full screen mode, all but a two pixel row of the button may be slid off the top of the screen. The button should slide back on the screen when the mouse moves near it.</para></note>
-
- <itemizedlist><title>Guidelines</title>
-
- <listitem><para>Provide a menubar in each primary application window, containing at least a <guimenu>File</guimenu> and a <guimenu>Help</guimenu> menu.</para></listitem>
-
- <listitem><para>Organize menu titles in the standard orderâ see <xref linkend="menus-standard"/></para></listitem>
-
- <listitem><para>Do not disable menu titles. Allow the user to explore the menu, even though there might be no available items on it at that time.</para></listitem>
-
- <listitem><para>Menu titles on a menubar are single words with their first letter capitalized. Do not use spaces in menu titles, as this makes them easily-mistaken for two separate menu titles. Do not use compound words (such as <guimenu>WindowOptions</guimenu>) or hyphens (such as <guimenu>Window-Options</guimenu>) to circumvent this guideline.</para></listitem>
-
- <listitem><para>Do not provide a mechanism for hiding the menubar, as this may be activated accidentally. Some users will not be able to figure out how to get the menu bar back in this case.</para></listitem>
-
- </itemizedlist>
-
- </sect1>
+ </sect1>
<sect1 id="menus-types">
<title>Types of Menu</title>
@@ -78,9 +100,10 @@
<imageobject><imagedata fileref="images/menus-dropdown.eps" format="EPS"/></imageobject>
<textobject><phrase>Screenshot of a typical drop-down menu</phrase></textobject>
</mediaobject>
+
</figure>
- <para>A drop-down menu appears when the user clicks on its title in a menubar, or focuses the title and presses <keycap>Return</keycap>.</para>
+ <para>A drop-down menu appears when the user clicks on its title in a menubar, or focuses the title and presses <keycap>Return</keycap>.</para>
<remark> CB-Ed/Fig: Define "post," as no-brainer-ish as it may seem, and also add a figure to show what it means. A simple menu being shown at the user clicking on a menu title on a menubar, or "posted," makes sense. </remark>
<remark> CFB: I've just reworded everything to avoid the use of "post" </remark>
@@ -117,7 +140,7 @@
</mediaobject>
</figure>
- <para>A submenu appears when the user clicks its title, which is indicated by a small arrow symbol beside its label. You can save space on long menus by grouping related commands onto a single submenu.</para>
+ <para>A submenu appears when the user clicks its title, which is indicated by a small arrow symbol beside its label. You can save space on long menus by grouping related commands onto a single submenu.</para>
<itemizedlist><title>Guidelines</title>
@@ -129,7 +152,7 @@
</itemizedlist>
-<remark> CB-Ed/Fig: In JLFDG AT, p. 41, the Most Recently Used (MRU) list is recommended to contain no more than 10 items. Add a figure here, with callouts to point out this rule, among others, if any are developed. </remark>
+ <remark> CB-Ed/Fig: In JLFDG AT, p. 41, the Most Recently Used (MRU) list is recommended to contain no more than 10 items. Add a figure here, with callouts to point out this rule, among others, if any are developed. </remark>
</sect2>
@@ -170,9 +193,9 @@
</itemizedlist>
-<remark> CB-Ed: In the previous note, define the Input Methods menu and why it is an exception, for scalability reasons (other items may fall into the same category). It also sounds like a pretty low-level command; should this be exposed to the user? </remark>
-<remark> SN-Ed: No, it should not be exposed to the user. I'm not really sure what possessed the GTK guys to put this in every right click menu for text boxes. I suppose in this case having it be a submenu is good (if they insist on it existing) because it makes it maximally invisible </remark>
-<remark> GJM: To make this worse, they've added "Insert Unicode control character".</remark>
+ <remark> CB-Ed: In the previous note, define the Input Methods menu and why it is an exception, for scalability reasons (other items may fall into the same category). It also sounds like a pretty low-level command; should this be exposed to the user? </remark>
+ <remark> SN-Ed: No, it should not be exposed to the user. I'm not really sure what possessed the GTK guys to put this in every right click menu for text boxes. I suppose in this case having it be a submenu is good (if they insist on it existing) because it makes it maximally invisible </remark>
+ <remark> GJM: To make this worse, they've added "Insert Unicode control character".</remark>
</sect2>
</sect1>
@@ -233,9 +256,7 @@
<remark>
Should we reserve <keysym>Alt</keysym> as a modifier for window manager operations? Should we state this here?
</remark>
-
-
-<remark> CB-Ed/Fig: Figure would be nice here. </remark>
+ <remark> CB-Ed/Fig: Figure would be nice here. </remark>
</sect3>
<sect3 id="menu-item-type-mutable">
@@ -293,7 +314,7 @@
</itemizedlist>
-<remark>
+ <remark>
Adam notes that this whole section can be a significant source of
nastiness in a UI. We need explicit recommendations here on how to
represent different states of a toggled menu item via icons in the UI.
@@ -305,28 +326,24 @@
* Ambiguous names for check box/toggle menu items which make it
difficult to establish the current system state by looking at
the menu.
-</remark>
-
- </sect3>
-
- </sect2>
-
- </sect1>
-
- <sect1 id="menus-standard">
- <title>Standard Menus</title>
- <para>Most applications have many functions in common, such as <guimenu>Cut</guimenu>, <guimenu>Copy</guimenu>, <guimenu>Paste</guimenu> and <guimenu>Quit</guimenu>. To aid learning and memorability, these menu items, and the menus on which they appear, must appear with the same labels and in the same order in every application. The same commands must also behave the same way in different applications, to avoid surprising the user.</para>
-
- <para>This section details the most common menus, menu items and their behaviors. You will not need all of these menus or menu items in every application you write, but do preserve the order of the menu titles and of the menu items that you do use.</para>
-
- <itemizedlist><title>Guidelines</title>
- <listitem><para>Place application-specific menus after the <guimenu>Format</guimenu> menu and before the <guimenu>Go</guimenu> menu</para></listitem>
-
- <listitem><para>Place application-specific menu items towards the middle of a standard menu, unless they logically fit with one of the standard groups already on the menu.</para></listitem>
-
- </itemizedlist>
-
-
+ </remark>
+ </sect3>
+ </sect2>
+ </sect1>
+
+ <sect1 id="menus-standard">
+ <title>Standard Menus</title>
+ <para>Most applications have many functions in common, such as <guimenu>Cut</guimenu>, <guimenu>Copy</guimenu>, <guimenu>Paste</guimenu> and <guimenu>Quit</guimenu>. To aid learning and memorability, these menu items, and the menus on which they appear, must appear with the same labels and in the same order in every application. The same commands must also behave the same way in different applications, to avoid surprising the user.</para>
+ <para>This section details the most common menus, menu items and their behaviors. You will not need all of these menus or menu items in every application you write, but do preserve the order of the menu titles and of the menu items that you do use.</para>
+ <itemizedlist>
+ <title>Guidelines</title>
+ <listitem>
+ <para>Place application-specific menus after the <guimenu>Format</guimenu> menu and before the <guimenu>Go</guimenu> menu</para>
+ </listitem>
+ <listitem>
+ <para>Place application-specific menu items towards the middle of a standard menu, unless they logically fit with one of the standard groups already on the menu.</para>
+ </listitem>
+ </itemizedlist>
<remark>What is the best way to present menus given the known variants? Multiple shots? Segments?</remark>
<figure id="generic-menu-bar">
@@ -373,241 +390,277 @@
<guimenuitem><accel>O</accel>pen... Ctrl+O</guimenuitem>
<!--<guimenuitem>Recent <accel>F</accel>iles > </guimenuitem>-->
---
-<guimenuitem><accel>S</accel>ave Ctrl+S</guimenuitem>
-<guimenuitem>Save <accel>A</accel>s... Shift+Ctrl+S</guimenuitem>
-<guimenuitem>Sa<accel>v</accel>e a Copy... </guimenuitem>
-<guimenuitem><accel>R</accel>evert </guimenuitem>
+<guimenuitem><accel>S</accel>ave Ctrl+S</guimenuitem><guimenuitem>Save <accel>A</accel>s... Shift+Ctrl+S</guimenuitem><guimenuitem>Sa<accel>v</accel>e a Copy... </guimenuitem><guimenuitem><accel>R</accel>evert </guimenuitem>
---
-<guimenuitem>Page Set<accel>u</accel>p </guimenuitem>
-<guimenuitem>Print Previe<accel>w</accel> Shift+Ctrl+P</guimenuitem>
-<guimenuitem><accel>P</accel>rint... Ctrl+P</guimenuitem>
-<guimenuitem><accel>S</accel>end To... Ctrl+M</guimenuitem>
+<guimenuitem>Page Set<accel>u</accel>p </guimenuitem><guimenuitem>Print Previe<accel>w</accel> Shift+Ctrl+P</guimenuitem><guimenuitem><accel>P</accel>rint... Ctrl+P</guimenuitem><guimenuitem><accel>S</accel>end To... Ctrl+M</guimenuitem>
---
<guimenuitem>Proper<accel>t</accel>ies </guimenuitem>
---
-<guimenuitem><accel>1</accel>. Recent Document </guimenuitem>
-<guimenuitem><accel>2</accel>. Recent Document </guimenuitem>
-<guimenuitem><accel>3</accel>. Recent Document </guimenuitem>
-<guimenuitem><accel>4</accel>. Recent Document </guimenuitem>
+<guimenuitem><accel>1</accel>. Recent Document </guimenuitem><guimenuitem><accel>2</accel>. Recent Document </guimenuitem><guimenuitem><accel>3</accel>. Recent Document </guimenuitem><guimenuitem><accel>4</accel>. Recent Document </guimenuitem>
---
-<guimenuitem><accel>C</accel>lose Ctrl+W</guimenuitem>
-<guimenuitem><accel>Q</accel>uit Ctrl+Q</guimenuitem>
-</literallayout>
- </textobject>
- </mediaobject>
- </figure>
-
-
- <sect3>
- <title>Creation and Opening Operations</title>
- <remark>Adam noted in the last review that we don't make any suggestions for applications that do not edit document/files. In an OOUI, the Game
+<guimenuitem><accel>C</accel>lose Ctrl+W</guimenuitem><guimenuitem><accel>Q</accel>uit Ctrl+Q</guimenuitem></literallayout>
+ </textobject>
+ </mediaobject>
+ </figure>
+ <sect3>
+ <title>Creation and Opening Operations</title>
+ <remark>Adam noted in the last review that we don't make any suggestions for applications that do not edit document/files. In an OOUI, the Game
menu would have items such as (modulo phraeseology) Open New Game, Open Game Settings, High Scores.</remark>
- <remark>>For non-game UI there would be at the very least, Open as ... and Open Settings.</remark>
-
- <table frame="all">
- <title>Creation and Opening operation menu items </title>
-
- <tgroup cols="3" align="left">
- <thead>
- <row>
- <entry>Label</entry>
- <entry>Shortcut</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody valign="top">
- <row>
- <entry><guimenuitem><accel>N</accel>ew</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>N</keycap></keycombo></entry>
- <entry>Creates a new document. Open a new primary window, with the title <replaceable>Document name</replaceable>, containing a blank document. How this window is displayed, e.g. as a tab or a separate window, is up to the window manager.
+ <remark>>For non-game UI there would be at the very least, Open as ... and Open Settings.</remark>
+ <table frame="none">
+ <title>Creation and Opening operation menu items </title>
+ <tgroup colsep="0" rowsep="0" cols="3" align="left">
+ <thead>
+ <row>
+ <entry>Label</entry>
+ <entry>Shortcut</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody valign="top">
+ <row>
+ <entry>
+ <guimenuitem><accel>N</accel>ew</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>N</keycap>
+ </keycombo>
+ </entry>
+ <entry>Creates a new document. Open a new primary window, with the title <replaceable>Document name</replaceable>, containing a blank document. How this window is displayed, e.g. as a tab or a separate window, is up to the window manager.
<para>If your application can create a number of different types of document, you can make the <guimenuitem><accel>N</accel>ew</guimenuitem> item a submenu, containing a menu item for each type. Label these items <guimenuitem>New <replaceable>document type</replaceable></guimenuitem>, make the first entry in the submenu the most commonly used document type, and give it the <keycombo><keycap>Ctrl</keycap><keycap>N</keycap></keycombo> shortcut.</para>
<para>Note: A blank document will not necessarily be completely blank. For example, a document created from a template may already contain some data.<!-- FIXME: More on templates --></para>
</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>O</accel>pen...</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>O</keycap></keycombo></entry>
- <entry>Opens an existing document in a new window. Present the user with a standard Open File dialog <!-- Ref this elsewhere --> from which they can choose an existing file. If the chosen file is already open in the application, raise that window instead of opening a new one. <!-- If the current window contains a blank untitled document then replace it with the selected file. Otherwise open the file in a new window. -->
- <remark>If your application provides more than two ways to open an object, place all the Open ... items in a submenu, including Recent Files. This keeps the menu less cluttered and in some ways presents a better inteface as the list of recent files is presented in the same menu, and near, the regular open commands. Users hate having to go to the bottom of the file menu to open recent files; the cause of this is that, in the workplace, it is far more common to sort out other peoples already written and saved crap than it is to have to write your own. Most of the users of office application, surveyed in both card sorts and online presentations of speculative menus, do not want or do not even notice when the New... items are absent.</remark>
- <remark>>Problem to be solved. It may be desirable to open a second read-only view of the same document. How should this be provided? Non-OOUI are particularly nasty in this regard, as in many others. A "Clone Window" command seems quite nasty.</remark>
- <remark>>As I noted in the first review, the blank window should be kept available; in an OOUI this is a more obvious a way of working.</remark>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>O</accel>pen...</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>O</keycap>
+ </keycombo>
+ </entry>
+ <entry>Opens an existing document in a new window. Present the user with a standard Open File dialog <!-- Ref this elsewhere --> from which they can choose an existing file. If the chosen file is already open in the application, raise that window instead of opening a new one. <!-- If the current window contains a blank untitled document then replace it with the selected file. Otherwise open the file in a new window. -->
+ <remark>If your application provides more than two ways to open an object, place all the Open ... items in a submenu, including Recent Files. This keeps the menu less cluttered and in some ways presents a better interface as the list of recent files is presented in the same menu, and near, the regular open commands. Users hate having to go to the bottom of the file menu to open recent files; the cause of this is that, in the workplace, it is far more common to sort out other peoples already written and saved crap than it is to have to write your own. Most of the users of office application, surveyed in both card sorts and on-line presentations of speculative menus, do not want or do not even notice when the New... items are absent.</remark>
+ <remark>>Problem to be solved. It may be desirable to open a second read-only view of the same document. How should this be provided? Non-OOUI are particularly nasty in this regard, as in many others. A "Clone Window" command seems quite nasty.</remark>
+ <remark>>As I noted in the first review, the blank window should be kept available; in an OOUI this is a more obvious a way of working.</remark>
</entry>
- </row>
-
- <!-- I think this is totally broken, I'm moving back to having recent files on the main menu itself. -Seth
- <row>
+ </row>
+ <!-- I think this is totally broken, I'm moving back to having recent files on the main menu itself. -Seth
+ <row>
<entry>Recent Files</entry>
<entry>none</entry>
<entry>Allows the user to open a recently used file. The application should maintain a history of recently opened documents and these should be accessible via a submenu. Selecting one of these files should open that file in the same way that <guimenuitem><accel>O</accel>pen</guimenuitem> does.
<para>Provide at least ten of the most recent files in the menu; fewer only according to user preferences or absence of recent files.</para>
</entry>
</row>
- -->
- </tbody>
- </tgroup>
- </table>
- </sect3>
-
-
- <sect3>
- <title>Saved State Operations</title>
- <remark>This section needs a review with an eye to what can actually be done programmatically.</remark>
-
- <table>
- <title>Saved State Operation menu items</title>
- <tgroup cols="3" align="left">
- <thead>
- <row>
- <entry>Label</entry>
- <entry>Shortcut</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody valign="top">
- <row>
- <entry><guimenuitem><accel>S</accel>ave</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>S</keycap></keycombo></entry>
- <entry>Saves the document with its current filename. If the document already has a filename associated with it, save the document immediately without any further interaction from the user. If there are any additional options involved in saving a file (eg. DOS or UNIX-style line endings in a text file), prompt for these first time the document is saved, but subsequently use the same values each time until the user changes them.
+ -->
+ </tbody>
+ </tgroup>
+ </table>
+ </sect3>
+ <sect3>
+ <title>Saved State Operations</title>
+ <remark>This section needs a review with an eye to what can actually be done programmatically.</remark>
+ <table frame="none">
+ <title>Saved State Operation menu items</title>
+ <tgroup colsep="0" rowsep="0" cols="3" align="left">
+ <thead>
+ <row>
+ <entry>Label</entry>
+ <entry>Shortcut</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody valign="top">
+ <row>
+ <entry>
+ <guimenuitem><accel>S</accel>ave</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>S</keycap>
+ </keycombo>
+ </entry>
+ <entry>Saves the document with its current filename. If the document already has a filename associated with it, save the document immediately without any further interaction from the user. If there are any additional options involved in saving a file (eg. DOS or UNIX-style line endings in a text file), prompt for these first time the document is saved, but subsequently use the same values each time until the user changes them.
<para>If the document has no current filename or is read-only, selecting this item should be the same as selecting <guimenuitem>Save As</guimenuitem>.</para>
</entry>
- </row>
-
- <row>
- <entry><guimenuitem>Save <accel>A</accel>s...</guimenuitem></entry>
- <entry><keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>S</keycap></keycombo></entry>
- <entry>Saves the document with a new filename. Present the user with the standard Save As dialog, and save the file with the chosen file name. <!-- FIXME: errors, additional information--></entry>
-
- </row>
- <row>
- <entry><guimenuitem>S<accel>a</accel>ve a Copy...</guimenuitem></entry>
- <entry>None</entry>
- <entry>Prompts the user to enter a filename, with which a copy of the document is then saved. Do not alter either the view or the filename of the original document. All subsequent changes are still made to the original document until the user specifies otherwise, for example by choosing the <guimenuitem>Save As</guimenuitem> command.
+ </row>
+ <row>
+ <entry>
+ <guimenuitem>Save <accel>A</accel>s...</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Shift</keycap>
+ <keycap>Ctrl</keycap>
+ <keycap>S</keycap>
+ </keycombo>
+ </entry>
+ <entry>Saves the document with a new filename. Present the user with the standard Save As dialog, and save the file with the chosen file name. <!-- FIXME: errors, additional information--></entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem>S<accel>a</accel>ve a Copy...</guimenuitem>
+ </entry>
+ <entry>None</entry>
+ <entry>Prompts the user to enter a filename, with which a copy of the document is then saved. Do not alter either the view or the filename of the original document. All subsequent changes are still made to the original document until the user specifies otherwise, for example by choosing the <guimenuitem>Save As</guimenuitem> command.
<para> Like the <guimenuitem>Save As</guimenuitem> dialog, the <guimenuitem>Save a Copy</guimenuitem> dialog may present different ways to save the data. For example, an image may be saved in a native format or as a PNG.</para></entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>R</accel>evert</guimenuitem></entry>
- <entry>None</entry>
- <entry>Reverts the document to the last saved state. Present the user with a warning that all changes will be lost, and offer the option of cancelling before reloading the file.</entry>
-
- </row>
-
- <row>
- <entry><guimenuitem>Save <accel>V</accel>ersion...</guimenuitem></entry>
- <entry>None</entry>
- <entry>An alternative to the <guimenuitem>Save a Copy</guimenuitem> command. Only use this item in conjunction with the <guimenuitem>Restore Version</guimenuitem>. <remark>Unless we can describe exactly what this ought to do, should we remove it for now?</remark>command.</entry>
- </row>
-
- <row>
- <entry><guimenuitem>R<accel>e</accel>store Version...</guimenuitem></entry>
- <entry>None</entry>
- <entry>Prompts the user for a version of the current document to be restored. Present the user with with a warning that all changes will be lost, and offer the option of cancelling before restoring the version. Only use this item in conjunction with the <guimenuitem>Save Version</guimenuitem> command.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>V</accel>ersions...</guimenuitem></entry>
- <entry>None</entry>
- <entry>An alternative to the <guimenuitem>Save Version</guimenuitem> and <guimenuitem>Restore Version</guimenuitem> commands. Use this when more utilities, such as a diff, are available.</entry>
- </row>
-
- </tbody>
- </tgroup>
-
- </table>
- </sect3>
-
- <sect3>
- <title>Export Operations</title>
-
- <table>
- <title>Export Operation menu items</title>
- <tgroup cols="3" align="left">
- <thead>
- <row>
- <entry>Label</entry>
- <entry>Shortcut</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody valign="top">
- <row>
- <entry><guimenuitem>Page Set<accel>u</accel>p</guimenuitem></entry>
- <entry>None</entry>
- <entry>Allows the user to control print-related settings. Present the user with a dialog allowing the user to set such options as portrait or landscape format, margins, and so on. <remark>We should have a standard dialog for this.</remark></entry>
- </row>
-
- <row>
- <entry><guimenuitem>Print Previe<accel>w</accel></guimenuitem></entry>
- <entry><keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>P</keycap></keycombo></entry>
- <entry>Shows the user what the printed document will look like. Present a new window containing an accruate represenation of the appearance of the document as it would be printed. The libgnomeprintui library provides a standard Print Preview window that you should use if possible.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>P</accel>rint...</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>P</keycap></keycombo></entry>
- <entry>Prints the current document. Present the user with a dialog allowing them to set options like the page range to be printed, the printer to be used, and so on. The dialog must contain a button labelled <guibutton>Print</guibutton> that starts printing and closes the dialog. The <filename>libgnomeprintui</filename> library provides a standard Print dialog that you should use if possible.</entry>
- </row>
-
- <row>
- <entry><guimenuitem>S<accel>e</accel>nd To...</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>M</keycap></keycombo></entry>
- <entry>Provides the user a means to attach or send the current document as an email or email attachment<!-- (launch $MAILER -a $ATTACHMENT)-->, depending on its format.
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>R</accel>evert</guimenuitem>
+ </entry>
+ <entry>None</entry>
+ <entry>Reverts the document to the last saved state. Present the user with a warning that all changes will be lost, and offer the option of canceling before reloading the file.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem>Save <accel>V</accel>ersion...</guimenuitem>
+ </entry>
+ <entry>None</entry>
+ <entry>An alternative to the <guimenuitem>Save a Copy</guimenuitem> command. Only use this item in conjunction with the <guimenuitem>Restore Version</guimenuitem>. <remark>Unless we can describe exactly what this ought to do, should we remove it for now?</remark>command.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem>R<accel>e</accel>store Version...</guimenuitem>
+ </entry>
+ <entry>None</entry>
+ <entry>Prompts the user for a version of the current document to be restored. Present the user with with a warning that all changes will be lost, and offer the option of cancelling before restoring the version. Only use this item in conjunction with the <guimenuitem>Save Version</guimenuitem> command.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>V</accel>ersions...</guimenuitem>
+ </entry>
+ <entry>None</entry>
+ <entry>An alternative to the <guimenuitem>Save Version</guimenuitem> and <guimenuitem>Restore Version</guimenuitem> commands. Use this when more utilities, such as a diff, are available.</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ </sect3>
+ <sect3>
+ <title>Export Operations</title>
+ <table frame="none">
+ <title>Export Operation menu items</title>
+ <tgroup colsep="0" rowsep="0" cols="3" align="left">
+ <thead>
+ <row>
+ <entry>Label</entry>
+ <entry>Shortcut</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody valign="top">
+ <row>
+ <entry>
+ <guimenuitem>Page Set<accel>u</accel>p...</guimenuitem>
+ </entry>
+ <entry>None</entry>
+ <entry>Allows the user to control print-related settings. Present the user with a dialog allowing the user to set such options as portrait or landscape format, margins, and so on. <remark>We should have a standard dialog for this.</remark></entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem>Print Previe<accel>w</accel></guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Shift</keycap>
+ <keycap>Ctrl</keycap>
+ <keycap>P</keycap>
+ </keycombo>
+ </entry>
+ <entry>Shows the user what the printed document will look like. Present a new window containing an accurate representation of the appearance of the document as it would be printed. The libgnomeprintui library provides a standard Print Preview window that you should use if possible.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>P</accel>rint...</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>P</keycap>
+ </keycombo>
+ </entry>
+ <entry>Prints the current document. Present the user with a dialog allowing them to set options like the page range to be printed, the printer to be used, and so on. The dialog must contain a button labeled <guibutton>Print</guibutton> that starts printing and closes the dialog. The <filename>libgnomeprintui</filename> library provides a standard Print dialog that you should use if possible.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem>S<accel>e</accel>nd To...</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>M</keycap>
+ </keycombo>
+ </entry>
+ <entry>Provides the user a means to attach or send the current document as an email or email attachment<!-- (launch $MAILER -a $ATTACHMENT)-->, depending on its format.
<para>You may provide more than one <guimenuitem>Send</guimenuitem> item depending on which options are available. If there are more than two such items, move them into a submenu. For example, if only <guimenuitem>Send by Email</guimenuitem> and <guimenuitem>Send by Fax</guimenuitem> are available, leave them on the top-level menu If there is a third option, such as <guimenuitem>Send by FTP</guimenuitem>, place all the options in a <guimenuitem>Send</guimenuitem> submenu.</para>
</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- </sect3>
-
- <sect3>
- <title>File Properties</title>
- <table>
- <title>Properties menu items</title>
- <tgroup cols="3" align="left">
- <thead>
- <row>
- <entry>Label</entry>
- <entry>Shortcut</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody valign="top">
- <row>
- <entry><guimenuitem>Proper<accel>t</accel>ies</guimenuitem></entry>
- <entry><keycombo><keycap>Alt</keycap><keycap>Return</keycap></keycombo></entry>
- <entry>Opens the document's <guilabel>Properties</guilabel> window. This may contain editable information, such as the document author's name, or read-only information, such as the number of words in the document, or a combination of both. The <keycombo><keycap>Alt</keycap><keycap>Return</keycap></keycombo> shortcut should not be provided where <keycap>Return</keycap> is most frequently used to insert a new line.</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- </sect3>
-
-
- <sect3>
- <title>Closing Operations</title>
- <table>
- <title>Closing Operation menu items</title>
- <tgroup cols="3" align="left">
- <thead>
- <row>
- <entry>Label</entry>
- <entry>Shortcut</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody valign="top">
- <row>
- <entry><guimenuitem><accel>C</accel>lose</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>W</keycap></keycombo></entry>
- <entry>Closes the current document. If it has unsaved changes, present the user with a <link linkend="alerts-confirmation">confirmation alert</link> giving the option to save changes, discard them, or cancel the action without closing or saving the document.
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ </sect3>
+ <sect3>
+ <title>File Properties</title>
+ <table frame="none">
+ <title>Properties menu items</title>
+ <tgroup colsep="0" rowsep="0" cols="3" align="left">
+ <thead>
+ <row>
+ <entry>Label</entry>
+ <entry>Shortcut</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody valign="top">
+ <row>
+ <entry>
+ <guimenuitem>Proper<accel>t</accel>ies</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Alt</keycap>
+ <keycap>Return</keycap>
+ </keycombo>
+ </entry>
+ <entry>Opens the document's <guilabel>Properties</guilabel> window. This may contain editable information, such as the document author's name, or read-only information, such as the number of words in the document, or a combination of both. The <keycombo><keycap>Alt</keycap><keycap>Return</keycap></keycombo> shortcut should not be provided where <keycap>Return</keycap> is most frequently used to insert a new line.</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ </sect3>
+ <sect3>
+ <title>Closing Operations</title>
+ <table frame="none">
+ <title>Closing Operation menu items</title>
+ <tgroup colsep="0" rowsep="0" cols="3" align="left">
+ <thead>
+ <row>
+ <entry>Label</entry>
+ <entry>Shortcut</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody valign="top">
+ <row>
+ <entry>
+ <guimenuitem><accel>C</accel>lose</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>W</keycap>
+ </keycombo>
+ </entry>
+ <entry>Closes the current document. If it has unsaved changes, present the user with a <link linkend="alerts-confirmation">confirmation alert</link> giving the option to save changes, discard them, or cancel the action without closing or saving the document.
<para>If the window you are closing is the last open document in the application, the correct action depends on your application type:</para>
- <itemizedlist>
- <listitem><para>Single document interface: close the application</para></listitem>
- <listitem><para>Controlled single document interface: leave only the control window open</para></listitem>
- <listitem><para>Multiple document interface: close the current document and create a new blank document</para></listitem>
- </itemizedlist>
+ <itemizedlist><listitem><para>Single document interface: close the application</para></listitem><listitem><para>Controlled single document interface: leave only the control window open</para></listitem><listitem><para>Multiple document interface: close the current document and create a new blank document</para></listitem></itemizedlist>
<remark>As mentioned on the usability list, Control+W is an Emacs shortcut for Cut. This has already proven deleterious for some users so we should consider dropping the shortcut. But see also <ulink url="http://bugzilla.gnome.org/show_bug.cgi?id=76761";>http://bugzilla.gnome.org/show_bug.cgi?id=76761</ulink></remark>
</entry>
</row>
@@ -649,178 +702,241 @@
<guimenuitem><accel>U</accel>ndo Ctrl+Z</guimenuitem>
<guimenuitem><accel>R</accel>edo Shift+Ctrl+Z</guimenuitem>
-
-<guimenuitem>Cu<accel>t</accel> Ctrl+X</guimenuitem>
-<guimenuitem><accel>C</accel>opy Ctrl+C</guimenuitem>
-<guimenuitem><accel>P</accel>aste Ctrl+V</guimenuitem>
-<guimenuitem>Paste <accel>S</accel>pecial... Shift+Ctrl+V</guimenuitem>
-<guimenuitem><accel>D</accel>elete Del</guimenuitem>
-<guimenuitem><accel>S</accel>elect All Ctrl+A</guimenuitem>
-<guimenuitem>Du<accel>p</accel>licate Ctrl+U</guimenuitem>
-<guimenuitem>Dese<accel>l</accel>ect All Shift+Ctrl+A</guimenuitem>
+<guimenuitem>Cu<accel>t</accel> Ctrl+X</guimenuitem><guimenuitem><accel>C</accel>opy Ctrl+C</guimenuitem><guimenuitem><accel>P</accel>aste Ctrl+V</guimenuitem><guimenuitem>Paste <accel>S</accel>pecial... Shift+Ctrl+V</guimenuitem><guimenuitem><accel>D</accel>elete Del</guimenuitem><guimenuitem><accel>S</accel>elect All Ctrl+A</guimenuitem><guimenuitem>Du<accel>p</accel>licate Ctrl+U</guimenuitem><guimenuitem>Dese<accel>l</accel>ect All Shift+Ctrl+A</guimenuitem>
-
-<guimenuitem><accel>F</accel>ind... Ctrl+F</guimenuitem>
-<guimenuitem>Find Ne<accel>x</accel>t Ctrl+G</guimenuitem>
-<guimenuitem>Find Pre<accel>v</accel>ious Shift+Ctrl+G</guimenuitem>
-<guimenuitem>R<accel>e</accel>place... Ctrl+R</guimenuitem>
+<guimenuitem><accel>F</accel>ind... Ctrl+F</guimenuitem><guimenuitem>Find Ne<accel>x</accel>t Ctrl+G</guimenuitem><guimenuitem>Find Pre<accel>v</accel>ious Shift+Ctrl+G</guimenuitem><guimenuitem>R<accel>e</accel>place... Ctrl+R</guimenuitem>
-
<guimenuitem><accel>I</accel>nsert... </guimenuitem>
-
-<guimenuitem>Pr<accel>e</accel>ferences</guimenuitem>
-</literallayout>
- </textobject>
- </mediaobject>
- </figure>
-
-
- <sect3>
- <title>Modification History</title>
- <para>Document-based applications should maintain a history of modifications to a document and the state of the document between each action. The <guimenuitem>Undo</guimenuitem> and <guimenuitem>Redo</guimenuitem> commands move backwards and forwards through this history.</para>
-
- <remark>We'd like to see the action name included on the Undo/Redo menu items, but this is currently not easy to do in gtk.</remark>
-
- <table frame="all">
- <title>Modification History menu items </title>
-
- <tgroup cols="3" align="left">
- <thead>
- <row>
- <entry>Label</entry>
- <entry>Shortcut</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody valign="top">
- <row>
- <entry><guimenuitem><accel>U</accel>ndo <replaceable>action</replaceable></guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>Z</keycap></keycombo></entry>
- <entry>Undoes the effect of the previous action in the undo history list. Revert the document to its state before the previous action was performed. If your application supports undo, and the user undoes all changes since it was last saved, treat the document as unmodified.
+<guimenuitem>Pr<accel>e</accel>ferences</guimenuitem></literallayout>
+ </textobject>
+ </mediaobject>
+ </figure>
+ <sect3>
+ <title>Modification History</title>
+ <para>Document-based applications should maintain a history of modifications to a document and the state of the document between each action. The <guimenuitem>Undo</guimenuitem> and <guimenuitem>Redo</guimenuitem> commands move backwards and forwards through this history.</para>
+ <remark>We'd like to see the action name included on the Undo/Redo menu items, but this is currently not easy to do in gtk.</remark>
+ <table frame="none">
+ <title>Modification History menu items </title>
+ <tgroup colsep="0" rowsep="0" cols="3" align="left">
+ <thead>
+ <row>
+ <entry>Label</entry>
+ <entry>Shortcut</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody valign="top">
+ <row>
+ <entry>
+ <guimenuitem><accel>U</accel>ndo <replaceable>action</replaceable></guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>Z</keycap>
+ </keycombo>
+ </entry>
+ <entry>Undoes the effect of the previous action in the undo history list. Revert the document to its state before the previous action was performed. If your application supports undo, and the user undoes all changes since it was last saved, treat the document as unmodified.
<para>Note: provide a separate <guimenuitem>Undo</guimenuitem> and <guimenuitem>Redo</guimenuitem> menu item even if your application only supports one level of undo.</para></entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>R</accel>edo <replaceable>action</replaceable></guimenuitem></entry>
- <entry><keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>Z</keycap></keycombo></entry>
- <entry>Performs the next action in the undo history list, after the user has moved backwards through the list with the <guimenuitem>Undo</guimenuitem> command. Move the user one step forwards again, restoring the document to the state it was in after that action was originally performed.
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>R</accel>edo <replaceable>action</replaceable></guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Shift</keycap>
+ <keycap>Ctrl</keycap>
+ <keycap>Z</keycap>
+ </keycombo>
+ </entry>
+ <entry>Performs the next action in the undo history list, after the user has moved backwards through the list with the <guimenuitem>Undo</guimenuitem> command. Move the user one step forwards again, restoring the document to the state it was in after that action was originally performed.
<para>Note: provide a separate <guimenuitem>Undo</guimenuitem> and <guimenuitem>Redo</guimenuitem> menu item even if your application only supports one level of undo.</para></entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- </sect3>
-
- <sect3>
- <title>Manipulating Selected Data</title>
-
- <table frame="all">
- <title>Selected Data Manipulation menu items </title>
-
- <tgroup cols="3" align="left">
- <thead>
- <row>
- <entry>Label</entry>
- <entry>Shortcut</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody valign="top">
- <row>
- <entry><guimenuitem>Cu<accel>t</accel></guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>X</keycap></keycombo></entry>
- <entry>Removes the selected content and places it onto the clipboard. Visually, remove the content from the document in the same manner as <guimenuitem><accel>D</accel>elete</guimenuitem>.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>C</accel>opy</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>C</keycap></keycombo></entry>
- <entry>Copies the selected content onto the clipboard.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>P</accel>aste</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>V</keycap></keycombo></entry>
- <entry>Inserts the contents of the clipboard into the document. If there is no current selection, use the caret as the insertion point. If there is a current selection, replace it with the clipboard contents.</entry>
- </row>
-
- <row>
- <entry><guimenuitem>Paste <accel>S</accel>pecial...</guimenuitem></entry>
- <entry><keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>V</keycap></keycombo></entry>
- <entry>Inserts a non-default representation of the clipboard contents into the document. Open a dialog presenting a list of the available formats from which the user can select. For example, if the clipboard contains a PNG file copied from a file manager, the image may be embedded in the document, or a link to the file inserted so that changes to the image on disk are always reflected in the document.</entry>
- </row>
-
- <row>
- <entry><guimenuitem>Du<accel>p</accel>licate</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>U</keycap></keycombo></entry>
- <entry>Creates a duplicate copy of the selected object. Do not prompt for a name for the duplicate object, but give it a sensible default (for example, <filename>Copy of ShoppingList.abw</filename>) and allow the user to change it later. Place the duplicate copy as near the original as possible without overlapping it, even if this means breaking the current sort order within the container, so the user sees it immediately.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>D</accel>elete</guimenuitem></entry>
- <entry><keycap>Delete</keycap></entry>
- <entry>Removes the selected content without placing it on the clipboard.
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ </sect3>
+ <sect3>
+ <title>Manipulating Selected Data</title>
+ <table frame="none">
+ <title>Selected Data Manipulation menu items </title>
+ <tgroup colsep="0" rowsep="0" cols="3" align="left">
+ <thead>
+ <row>
+ <entry>Label</entry>
+ <entry>Shortcut</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody valign="top">
+ <row>
+ <entry>
+ <guimenuitem>Cu<accel>t</accel></guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>X</keycap>
+ </keycombo>
+ </entry>
+ <entry>Removes the selected content and places it onto the clipboard. Visually, remove the content from the document in the same manner as <guimenuitem><accel>D</accel>elete</guimenuitem>.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>C</accel>opy</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>C</keycap>
+ </keycombo>
+ </entry>
+ <entry>Copies the selected content onto the clipboard.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>P</accel>aste</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>V</keycap>
+ </keycombo>
+ </entry>
+ <entry>Inserts the contents of the clipboard into the document. If there is no current selection, use the caret as the insertion point. If there is a current selection, replace it with the clipboard contents.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem>Paste <accel>S</accel>pecial...</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Shift</keycap>
+ <keycap>Ctrl</keycap>
+ <keycap>V</keycap>
+ </keycombo>
+ </entry>
+ <entry>Inserts a non-default representation of the clipboard contents into the document. Open a dialog presenting a list of the available formats from which the user can select. For example, if the clipboard contains a PNG file copied from a file manager, the image may be embedded in the document, or a link to the file inserted so that changes to the image on disk are always reflected in the document.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem>Du<accel>p</accel>licate</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>U</keycap>
+ </keycombo>
+ </entry>
+ <entry>Creates a duplicate copy of the selected object. Do not prompt for a name for the duplicate object, but give it a sensible default (for example, <filename>Copy of ShoppingList.abw</filename>) and allow the user to change it later. Place the duplicate copy as near the original as possible without overlapping it, even if this means breaking the current sort order within the container, so the user sees it immediately.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>D</accel>elete</guimenuitem>
+ </entry>
+ <entry>
+ <keycap>Delete</keycap>
+ </entry>
+ <entry>Removes the selected content without placing it on the clipboard.
<remark>Should Delete be provided on a menu? The command is as obvious as using the arrow keys to move about.</remark></entry>
- </row>
-
- <row>
- <entry><guimenuitem>Select <accel>A</accel>ll</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>A</keycap></keycombo></entry>
- <entry>Selects all content in the current document.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>D</accel>eselect All</guimenuitem></entry>
- <entry><keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>A</keycap></keycombo></entry>
- <entry>Deselects all content in the current document. Only provide this item in situations when no other method of undoing selection is possible or apparent to the user. For example, in complex graphics applications where selection and deselection is not usually possible simply by using the cursor keys.
- <para>Note: Do not provide <guimenuitem>Deselect All</guimenuitem> in text entry fields, as <keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keysym>hex digit</keysym></keycombo> is used to enter unicode characters so its shortcut will not work.</para></entry>
- </row>
-
- </tbody>
- </tgroup>
- </table>
- </sect3>
-
- <sect3>
- <title>Searching and Replacing</title>
-
- <table frame="all">
- <title>Search and Replace menu items </title>
-
- <tgroup cols="3" align="left">
- <thead>
- <row>
- <entry>Label</entry>
- <entry>Shortcut</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody valign="top">
- <row>
- <entry>Find...</entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>F</keycap></keycombo></entry>
- <entry>Opens a window or dialog allowing the user to search for specific content in the current document. Highlight each match in-place.
+ </row>
+ <row>
+ <entry>
+ <guimenuitem>Select <accel>A</accel>ll</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>A</keycap>
+ </keycombo>
+ </entry>
+ <entry>Selects all content in the current document.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>D</accel>eselect All</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Shift</keycap>
+ <keycap>Ctrl</keycap>
+ <keycap>A</keycap>
+ </keycombo>
+ </entry>
+ <entry>Deselects all content in the current document. Only provide this item in situations when no other method of undoing selection is possible or apparent to the user. For example, in complex graphics applications where selection and deselection is not usually possible simply by using the cursor keys.
+ <para>Note: Do not provide <guimenuitem>Deselect All</guimenuitem> in text entry fields, as <keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keysym>hex digit</keysym></keycombo> is used to enter Unicode characters so its shortcut will not work.</para></entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ </sect3>
+ <sect3>
+ <title>Searching and Replacing</title>
+ <table frame="none">
+ <title>Search and Replace menu items </title>
+ <tgroup colsep="0" rowsep="0" cols="3" align="left">
+ <thead>
+ <row>
+ <entry>Label</entry>
+ <entry>Shortcut</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody valign="top">
+ <row>
+ <entry>Find...</entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>F</keycap>
+ </keycombo>
+ </entry>
+ <entry>Opens a window or dialog allowing the user to search for specific content in the current document. Highlight each match in-place.
<para>If the command allows the user to search for content in places other than the current document, for example other open documents, other documents on disk, or a remote network location, label this item <guimenuitem>Search</guimenuitem> instead of <guimenuitem>Find</guimenuitem>.</para></entry>
- </row>
-
- <row>
- <entry><guimenuitem>Find Ne<accel>x</accel>t</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>G</keycap></keycombo></entry>
- <entry>Selects the next instance of the last Find term in the current document. <remark>What to do if there is no next instance? Disable the menu item, which could be confusing, or pop up an annoying alert saying 'no matches found'?</remark></entry>
- </row>
-
- <row>
- <entry><guimenuitem>Find Pre<accel>v</accel>ious</guimenuitem></entry>
- <entry><keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>G</keycap></keycombo></entry>
- <entry>Selects the previous instance of the last Find term in the current document.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>R</accel>eplace...</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>H</keycap></keycombo></entry>
- <entry>Opens a window or dialog allowing the user to search for specific content in the current document, and replace each occurrence with new content.
+ </row>
+ <row>
+ <entry>
+ <guimenuitem>Find Ne<accel>x</accel>t</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>G</keycap>
+ </keycombo>
+ </entry>
+ <entry>Selects the next instance of the last Find term in the current document. <remark>What to do if there is no next instance? Disable the menu item, which could be confusing, or pop up an annoying alert saying 'no matches found'?</remark></entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem>Find Pre<accel>v</accel>ious</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Shift</keycap>
+ <keycap>Ctrl</keycap>
+ <keycap>G</keycap>
+ </keycombo>
+ </entry>
+ <entry>Selects the previous instance of the last Find term in the current document.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>R</accel>eplace...</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>H</keycap>
+ </keycombo>
+ </entry>
+ <entry>Opens a window or dialog allowing the user to search for specific content in the current document, and replace each occurrence with new content.
<remark>Replace is not always descriptive of what the user may do with the utility window. Formatting a section is also a possibility. Ideally, these would all be merged into a simple utility window</remark>
</entry>
</row>
- </tbody>
- </tgroup>
+ </tbody>
+ </tgroup>
</table>
</sect3>
@@ -874,138 +990,162 @@
<guimenuitem><accel>T</accel>oolbar</guimenuitem>
<guimenuitem><accel>S</accel>tatusbar</guimenuitem>
---
-<guimenuitem><accel>I</accel>cons</guimenuitem>
-<guimenuitem><accel>L</accel>ist</guimenuitem>
-<guimenuitem><accel>D</accel>etails</guimenuitem>
+<guimenuitem><accel>I</accel>cons</guimenuitem><guimenuitem><accel>L</accel>ist</guimenuitem><guimenuitem><accel>D</accel>etails</guimenuitem>
---
-<guimenuitem><accel>S</accel>ort By...</guimenuitem>
-<guimenuitem><accel>F</accel>ilter...</guimenuitem>
+<guimenuitem><accel>S</accel>ort By...</guimenuitem><guimenuitem><accel>F</accel>ilter...</guimenuitem>
---
-<guimenuitem><accel>Z</accel>oom in Ctrl++</guimenuitem>
-<guimenuitem>Zoom <accel>O</accel>ut Ctrl+-</guimenuitem>
-<guimenuitem><accel>N</accel>ormal Size Ctrl+=</guimenuitem>
-<guimenuitem><accel>B</accel>est Fit </guimenuitem>
+<guimenuitem><accel>Z</accel>oom in Ctrl++</guimenuitem><guimenuitem>Zoom <accel>O</accel>ut Ctrl+-</guimenuitem><guimenuitem><accel>N</accel>ormal Size Ctrl+=</guimenuitem><guimenuitem><accel>B</accel>est Fit </guimenuitem>
---
-<guimenuitem><accel>R</accel>efresh Ctrl+R</guimenuitem>
-
- </literallayout>
- </textobject>
- </mediaobject>
- </figure>
-
-
- <sect3>
- <title>Toolbar and Statusbar</title>
- <table>
- <title>Toolbar and Statusbar menu items</title>
- <tgroup cols="3" align="left">
- <thead>
- <row>
- <entry>Label</entry>
- <entry>Shortcut</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody valign="top">
- <row>
- <entry><guimenuitem><accel>T</accel>oolbar</guimenuitem></entry>
- <entry>None</entry>
- <entry>Shows or hides the application's toolbar. This is a <link linkend="menu-item-type-check">check box menu item</link>. Include this item in every application that has a single toolbar. See <xref linkend="toolbars-controlling-display"/> for information on how to deal with multiple toolbars.</entry>
- </row>
-
- <!-- Suggest removing this for now, see bug #????
+<guimenuitem><accel>R</accel>efresh Ctrl+R</guimenuitem></literallayout>
+ </textobject>
+ </mediaobject>
+ </figure>
+ <sect3>
+ <title>Toolbar and Statusbar</title>
+ <table frame="none">
+ <title>Toolbar and Statusbar menu items</title>
+ <tgroup colsep="0" rowsep="0" cols="3" align="left">
+ <thead>
+ <row>
+ <entry>Label</entry>
+ <entry>Shortcut</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody valign="top">
+ <row>
+ <entry>
+ <guimenuitem><accel>T</accel>oolbar</guimenuitem>
+ </entry>
+ <entry>None</entry>
+ <entry>Shows or hides the application's toolbar. This is a <link linkend="menu-item-type-check">check box menu item</link>. Include this item in every application that has a single toolbar. See <xref linkend="toolbars-controlling-display"/> for information on how to deal with multiple toolbars.</entry>
+ </row>
+<!-- Suggest removing this for now, see bug #????
<row>
<entry><guimenuitem><accel>S</accel>tatusbar</guimenuitem></entry>
<entry>None</entry>
<entry>Shows or hides the application's statusbar. This is a <link linkend="menu-item-type-check">check box menu item</link>. Include this item in every application that has a statusbar.</entry>
</row>
-->
-
- </tbody>
- </tgroup>
- </table>
- </sect3>
-
- <sect3>
- <title>Content Presentation</title>
- <table>
- <title>Content Presentation menu items</title>
- <tgroup cols="3" align="left">
- <thead>
- <row>
- <entry>Label</entry>
- <entry>Shortcut</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody valign="top">
-
- <row>
- <entry><guimenuitem><accel>I</accel>cons</guimenuitem></entry>
- <entry>None</entry>
- <entry>Shows the contents of the selected container as rows and columns of large icons, each with its name underneath. This is a <link linkend="menu-item-type-radio">radio button menu item</link>.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>L</accel>ist</guimenuitem></entry>
- <entry>None</entry>
- <entry>Shows the contents of the selected container as a list of small icons, possibly in multiple columns, each with its name on its right-hand side. This is a <link linkend="menu-item-type-radio">radio button menu item</link>.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>D</accel>etails</guimenuitem></entry>
- <entry>None</entry>
- <entry>Shows the contents of the selected container as single column of small icons, each with its name on its right-hand side. Additional columns give extra information about the object each icon represents, for example the size and modification date of files in a file manager. This is a <link linkend="menu-item-type-radio">radio button menu item</link>.
+ </tbody>
+ </tgroup>
+ </table>
+ </sect3>
+ <sect3>
+ <title>Content Presentation</title>
+ <table frame="none">
+ <title>Content Presentation menu items</title>
+ <tgroup colsep="0" rowsep="0" cols="3" align="left">
+ <thead>
+ <row>
+ <entry>Label</entry>
+ <entry>Shortcut</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody valign="top">
+ <row>
+ <entry>
+ <guimenuitem><accel>I</accel>cons</guimenuitem>
+ </entry>
+ <entry>None</entry>
+ <entry>Shows the contents of the selected container as rows and columns of large icons, each with its name underneath. This is a <link linkend="menu-item-type-radio">radio button menu item</link>.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>L</accel>ist</guimenuitem>
+ </entry>
+ <entry>None</entry>
+ <entry>Shows the contents of the selected container as a list of small icons, possibly in multiple columns, each with its name on its right-hand side. This is a <link linkend="menu-item-type-radio">radio button menu item</link>.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>D</accel>etails</guimenuitem>
+ </entry>
+ <entry>None</entry>
+ <entry>Shows the contents of the selected container as single column of small icons, each with its name on its right-hand side. Additional columns give extra information about the object each icon represents, for example the size and modification date of files in a file manager. This is a <link linkend="menu-item-type-radio">radio button menu item</link>.
<para>If your application has no need for both <guimenu>List</guimenu> and <guimenu>Details</guimenu> modes, use the <guimenu>List</guimenu> item for whichever of the two modes you support.</para></entry>
- </row>
-
- <row>
- <entry><guimenuitem>S<accel>o</accel>rt By...</guimenuitem></entry>
- <entry>None</entry>
- <entry>Sorts the contents of an container by user-specified criteria. Open a dialog allowing the user to choose from pre-defined sort keys (for example, Name, Size, or Modification Date in a file manager), or to specify their own if applicable.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>F</accel>ilter...</guimenuitem></entry>
- <entry>None</entry>
- <entry>Hides objects that are not of interest to the user. Open a dialog allowing the user to choose from a list of types of object they want to display, or to enter their own criteria (for example, a regular expression matched against a particular property of the objects).</entry>
- </row>
-
-
- <row>
- <entry><guimenuitem><accel>Z</accel>oom In</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>+</keycap></keycombo></entry>
- <entry>Zooms into the document. Make the center of the new view the same as the center of the previous view. <remark>Should probably encourage apps to support Ctrl+= as well.</remark></entry>
- </row>
-
- <row>
- <entry><guimenuitem>Zoom <accel>O</accel>ut</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>-</keycap></keycombo></entry>
- <entry>Zooms out of the document. Make the center of the new view the same as the center of the previous view.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>N</accel>ormal Size</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>0</keycap></keycombo></entry>
- <entry>Resets the zoom level back to the default value, normally 100%. Make the center of the new view the same as the center of the previous view.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>B</accel>est Fit</guimenuitem></entry>
- <entry>None</entry>
- <entry>Makes the document fill the window. Show the document, or the current page of the document, at as high a zoom level as will fit in the window whilst allowing the whole document or page to be visible without scrolling.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>R</accel>efresh</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>R</keycap></keycombo></entry>
- <entry>Redraws the current view of the document from local storage. For example, in a web browser application, this would redraw the page from the browser page cache.</entry>
- </row>
- <row>
- <entry><guimenuitem><accel>R</accel>eload</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>R</keycap></keycombo></entry>
-
- <entry>Redraws the current view of the document, checking the data source for changes first. For example, checks the web server for updates to the page before redrawing it.
+ </row>
+ <row>
+ <entry>
+ <guimenuitem>S<accel>o</accel>rt By...</guimenuitem>
+ </entry>
+ <entry>None</entry>
+ <entry>Sorts the contents of an container by user-specified criteria. Open a dialog allowing the user to choose from predefined sort keys (for example, Name, Size, or Modification Date in a file manager), or to specify their own if applicable.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>F</accel>ilter...</guimenuitem>
+ </entry>
+ <entry>None</entry>
+ <entry>Hides objects that are not of interest to the user. Open a dialog allowing the user to choose from a list of types of object they want to display, or to enter their own criteria (for example, a regular expression matched against a particular property of the objects).</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>Z</accel>oom In</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>+</keycap>
+ </keycombo>
+ </entry>
+ <entry>Zooms into the document. Make the center of the new view the same as the center of the previous view. <remark>Should probably encourage apps to support Ctrl+= as well.</remark></entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem>Zoom <accel>O</accel>ut</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>-</keycap>
+ </keycombo>
+ </entry>
+ <entry>Zooms out of the document. Make the center of the new view the same as the center of the previous view.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>N</accel>ormal Size</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>0</keycap>
+ </keycombo>
+ </entry>
+ <entry>Resets the zoom level back to the default value, normally 100%. Make the center of the new view the same as the center of the previous view.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>B</accel>est Fit</guimenuitem>
+ </entry>
+ <entry>None</entry>
+ <entry>Makes the document fill the window. Show the document, or the current page of the document, at as high a zoom level as will fit in the window whilst allowing the whole document or page to be visible without scrolling.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>R</accel>efresh</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>R</keycap>
+ </keycombo>
+ </entry>
+ <entry>Redraws the current view of the document from local storage. For example, in a web browser application, this would redraw the page from the browser page cache.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>R</accel>eload</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>R</keycap>
+ </keycombo>
+ </entry>
+ <entry>Redraws the current view of the document, checking the data source for changes first. For example, checks the web server for updates to the page before redrawing it.
<para>If your application requires both <guimenuitem>Reload</guimenuitem> and <guimenuitem>Refresh</guimenuitem>, use <keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>R</keycap></keycombo> as the shortcut for <guimenuitem>Reload</guimenuitem>.</para></entry>
</row>
@@ -1030,12 +1170,9 @@
<guimenuitem><accel>D</accel>ate and Time...</guimenuitem>
<guimenuitem><accel>S</accel>ymbol...</guimenuitem>
---
-<guimenuitem><accel>S</accel>heet...</guimenuitem>
-<guimenuitem><accel>R</accel>ows...</guimenuitem>
-<guimenuitem><accel>C</accel>olumns...</guimenuitem>
+<guimenuitem><accel>S</accel>heet...</guimenuitem><guimenuitem><accel>R</accel>ows...</guimenuitem><guimenuitem><accel>C</accel>olumns...</guimenuitem>
---
-<guimenuitem><accel>I</accel>mage...</guimenuitem>
-<guimenuitem><accel>G</accel>raph...</guimenuitem>
+<guimenuitem><accel>I</accel>mage...</guimenuitem><guimenuitem><accel>G</accel>raph...</guimenuitem>
---
<guimenuitem><accel>F</accel>rom File...</guimenuitem>
<guimenuitem>E<accel>x</accel>ternal Link...</guimenuitem>
@@ -1142,15 +1279,11 @@
<literallayout class="monospaced">
<guimenu><accel>S</accel>tyle...</guimenu>
---
-<guimenuitem><accel>F</accel>ont...</guimenuitem>
-<guimenuitem><accel>P</accel>aragraph...</guimenuitem>
+<guimenuitem><accel>F</accel>ont...</guimenuitem><guimenuitem><accel>P</accel>aragraph...</guimenuitem>
---
-<guimenuitem><accel>B</accel>old Ctrl+B</guimenuitem>
-<guimenuitem><accel>I</accel>talic Ctrl+I</guimenuitem>
-<guimenuitem><accel>U</accel>nderline Ctrl+U</guimenuitem>
+<guimenuitem><accel>B</accel>old Ctrl+B</guimenuitem><guimenuitem><accel>I</accel>talic Ctrl+I</guimenuitem><guimenuitem><accel>U</accel>nderline Ctrl+U</guimenuitem>
---
-<guimenuitem><accel>C</accel>ells...</guimenuitem>
-<guimenuitem><accel>L</accel>ist...</guimenuitem>
+<guimenuitem><accel>C</accel>ells...</guimenuitem><guimenuitem><accel>L</accel>ist...</guimenuitem>
---
<guimenuitem>L<accel>ayer</accel>...</guimenuitem>
<guimenuitem>P<accel>a</accel>ge...</guimenuitem>
@@ -1389,63 +1522,75 @@
<guimenuitem><accel>N</accel>ext Page PgDn</guimenuitem>
<guimenuitem><accel>G</accel>o to Page...</guimenuitem>
-
-<guimenuitem><accel>F</accel>irst Page Ctrl+Home </guimenuitem>
-<guimenuitem><accel>L</accel>ast Page Ctrl+End</guimenuitem>
-</literallayout>
- </textobject>
- </mediaobject>
- </figure>
-
- <table>
- <title>Go menu items for a document-based application</title>
- <tgroup cols="3" align="left">
- <thead>
- <row>
- <entry>Label</entry>
- <entry>Shortcut</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody valign="top">
-
- <row>
- <entry><guimenuitem><accel>P</accel>revious Page</guimenuitem></entry>
- <entry><keycap>PageUp</keycap></entry>
- <entry>Navigates to the previous page in the document.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>N</accel>ext Page</guimenuitem></entry>
- <entry><keycap>PageDown</keycap></entry>
- <entry>Navigates to the next page in the document.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>G</accel>o to Page...</guimenuitem></entry>
- <entry>None</entry>
- <entry>Navigates to a user-specified page number. Open a dialog into which the user can type a page number.
- <para>Text-based applications may also include a <guimenuitem>Go to Line...</guimenuitem> menu item, which allows the user to jump to a specified line number.</para></entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>F</accel>irst Page</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>Home</keycap></keycombo></entry>
- <entry>Navigates to the first page in the document.</entry>
- </row>
-
-
- <row>
- <entry><guimenuitem><accel>L</accel>ast Page</guimenuitem></entry>
- <entry><keycombo><keycap>Ctrl</keycap><keycap>End</keycap></keycombo></entry>
- <entry>Navigates to the last page in the document.</entry>
- </row>
-
- </tbody>
- </tgroup>
- </table>
-
- </sect2>
-
+<guimenuitem><accel>F</accel>irst Page Ctrl+Home </guimenuitem><guimenuitem><accel>L</accel>ast Page Ctrl+End</guimenuitem></literallayout>
+ </textobject>
+ </mediaobject>
+ </figure>
+ <table frame="none">
+ <title>Go menu items for a document-based application</title>
+ <tgroup colsep="0" rowsep="0" cols="3" align="left">
+ <thead>
+ <row>
+ <entry>Label</entry>
+ <entry>Shortcut</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody valign="top">
+ <row>
+ <entry>
+ <guimenuitem><accel>P</accel>revious Page</guimenuitem>
+ </entry>
+ <entry>
+ <keycap>PageUp</keycap>
+ </entry>
+ <entry>Navigates to the previous page in the document.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>N</accel>ext Page</guimenuitem>
+ </entry>
+ <entry>
+ <keycap>PageDown</keycap>
+ </entry>
+ <entry>Navigates to the next page in the document.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>G</accel>o to Page...</guimenuitem>
+ </entry>
+ <entry>None</entry>
+ <entry>Navigates to a user-specified page number. Open a dialog into which the user can type a page number.
+ <para>Text-based applications may also include a <guimenuitem>Go to Line...</guimenuitem> menu item, which allows the user to jump to a specified line number.</para></entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>F</accel>irst Page</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>Home</keycap>
+ </keycombo>
+ </entry>
+ <entry>Navigates to the first page in the document.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>L</accel>ast Page</guimenuitem>
+ </entry>
+ <entry>
+ <keycombo>
+ <keycap>Ctrl</keycap>
+ <keycap>End</keycap>
+ </keycombo>
+ </entry>
+ <entry>Navigates to the last page in the document.</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ </sect2>
<!-- CFB Commenting out until we have anything to go on it :/
<sect2 id="menu-standard-tools">
<title>Tools</title>
@@ -1539,44 +1684,45 @@
<textobject>
<literallayout class="monospaced">
<guimenu><accel>H</accel>elp</guimenu>
-<!--<guimenuitem><accel>S</accel>earch</guimenuitem>-->
-<guimenuitem><accel>C</accel>ontents F1</guimenuitem>
-<guimenuitem><accel>A</accel>bout</guimenuitem>
- </literallayout>
- </textobject>
- </mediaobject>
- </figure>
- <table>
- <title>Help menu items</title>
- <tgroup cols="3" align="left">
- <thead>
- <row>
- <entry>Label</entry>
- <entry>Shortcut</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody valign="top">
-
- <row>
- <entry><guimenuitem><accel>C</accel>ontents</guimenuitem></entry>
- <entry><keycap>F1</keycap></entry>
- <entry>Opens the default help browser on the contents page for the application.</entry>
- </row>
-
- <row>
- <entry><guimenuitem><accel>A</accel>bout</guimenuitem></entry>
- <entry>None</entry>
- <entry>Opens the About dialog for the application. Use the standard dialog provided by the GNOME libraries, which contains the name and version number of the application, a short description of the application's functionality, author contact details, copyright message and a pointer to the licence under which the application is made available.</entry>
- </row>
-
- </tbody>
- </tgroup>
- </table>
-
- <remark>We originally wanted a Search item on here too, but it's not technically possible to implement it right now.</remark>
-
- </sect2>
- </sect1>
- </chapter>
+<!--<guimenuitem><accel>S</accel>earch</guimenuitem>-->
+ <guimenuitem><accel>C</accel>ontents F1</guimenuitem>
+ <guimenuitem><accel>A</accel>bout</guimenuitem>
+ </literallayout>
+ </textobject>
+ </mediaobject>
+ </figure>
+ <table frame="none">
+ <title>Help menu items</title>
+ <tgroup colsep="0" rowsep="0" cols="3" align="left">
+ <thead>
+ <row>
+ <entry>Label</entry>
+ <entry>Shortcut</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody valign="top">
+ <row>
+ <entry>
+ <guimenuitem><accel>C</accel>ontents</guimenuitem>
+ </entry>
+ <entry>
+ <keycap>F1</keycap>
+ </entry>
+ <entry>Opens the default help browser on the contents page for the application.</entry>
+ </row>
+ <row>
+ <entry>
+ <guimenuitem><accel>A</accel>bout</guimenuitem>
+ </entry>
+ <entry>None</entry>
+ <entry>Opens the About dialog for the application. Use the standard dialog provided by the GNOME libraries, which contains the name and version number of the application, a short description of the application's functionality, author contact details, copyright message and a pointer to the license under which the application is made available.</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <remark>We originally wanted a Search item on here too, but it's not technically possible to implement it right now.</remark>
+ </sect2>
+ </sect1>
+</chapter>
Modified: trunk/content/projects/gup/hig/hig-ch-principles.xml
==============================================================================
--- trunk/content/projects/gup/hig/hig-ch-principles.xml (original)
+++ trunk/content/projects/gup/hig/hig-ch-principles.xml Mon Sep 29 23:32:29 2008
@@ -37,7 +37,7 @@
<listitem><para>Users with limited movement may not be able to use your application if you don't provide keyboard equivalents for commands</para></listitem>
</itemizedlist>
- <para>Your software should also be usable with voice interfaces, screen readers such as <ulink url="http://developer.gnome.org/projects/gap/AT/Gnopernicus/index.html";>Gnopernicus</ulink>, alternate input devices, and other assistive technologies. The standard GNOME libraries do most of this work for you, but with a little extra effort you can make your application every bit as useful to users who rely on those technologies as to those who don't.</para>
+ <para>Your software should also be usable with voice interfaces, screen readers such as <ulink url="http://www.gnome.org/projects/orca/index.html";>Orca</ulink>, alternate input devices, and other assistive technologies. The standard GNOME libraries do most of this work for you, but with a little extra effort you can make your application every bit as useful to users who rely on those technologies as to those who don't.</para>
<para>GNOME has excellent inbuilt support for accessibility by means of the ATK and GAIL libraries, which in many cases can do most of the work for you. More information on accessibility in GNOME can be found at the <ulink url="http://developer.gnome.org/projects/gap/";>GNOME Accessibility Project</ulink>.</para>
@@ -85,7 +85,7 @@
<para>Consistency enables users to apply their existing knowledge of their computing environment and other applications to understanding a new application. This not only allows users to become familiar with new applications more quickly, but also helps create a sense of comfort and trust in the overall environment. Most of the recommendations in the GNOME HI Guidelines are designed to help you create applications that are consistent with the GNOME environment and other GNOME applications.</para>
- <para>A word of caution: a mis-applied or incomplete consistency is often worse than inconsistency. If your application includes an <guimenuitem>Undo</guimenuitem> menu item for consistency, but it is always disabled because your application does not actually support Undo, this will reduce the user's trust in the availability of Undo in other applications on their desktop. Either make your application support Undo, or eliminate the <guimenuitem>Undo</guimenuitem> menu item.</para>
+ <para>A word of caution: a misapplied or incomplete consistency is often worse than inconsistency. If your application includes an <guimenuitem>Undo</guimenuitem> menu item for consistency, but it is always disabled because your application does not actually support Undo, this will reduce the user's trust in the availability of Undo in other applications on their desktop. Either make your application support Undo, or eliminate the <guimenuitem>Undo</guimenuitem> menu item.</para>
</sect1>
@@ -131,7 +131,7 @@
<sect1 id="principles-direct-manipulation">
<title>Provide Direct Manipulation</title>
- <para>Wherever possible, allow users to act on objects and data directly, rather than through dialogs or explicit commands. For example, it is more intuitive to drag a circle object around in a diagram rather than selecting a "Move" command from a menu while the circle is selected. Simlarly, in an email application, allow the user to attach files by dragging them from the file manager and dropping them onto the message composition window if they wish.</para>
+ <para>Wherever possible, allow users to act on objects and data directly, rather than through dialogs or explicit commands. For example, it is more intuitive to drag a circle object around in a diagram rather than selecting a "Move" command from a menu while the circle is selected. Similarly, in an email application, allow the user to attach files by dragging them from the file manager and dropping them onto the message composition window if they wish.</para>
<para>See <xref linkend="input"/> for more information on direct manipulation.</para>
Modified: trunk/content/projects/gup/hig/hig-ch-toolbars.xml
==============================================================================
--- trunk/content/projects/gup/hig/hig-ch-toolbars.xml (original)
+++ trunk/content/projects/gup/hig/hig-ch-toolbars.xml Mon Sep 29 23:32:29 2008
@@ -235,9 +235,9 @@
</mediaobject>
</figure>
- <table>
+ <table frame="none">
<title>Proposed toolbar re-ordering for Nautilus</title>
- <tgroup cols='2' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='2' align='left'>
<tbody>
<row>
@@ -252,9 +252,9 @@
</tgroup>
</table>
- <table>
+ <table frame="none">
<title>Proposed toolbar re-ordering for Galeon</title>
- <tgroup cols='2' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='2' align='left'>
<tbody>
<row>
@@ -269,9 +269,9 @@
</tgroup>
</table>
- <table>
+ <table frame="none">
<title>Proposed toolbar re-ordering for GNOME Help (deprecated, for illustration purposes only)</title>
- <tgroup cols='2' align='left'>
+ <tgroup colsep="0" rowsep="0" cols='2' align='left'>
<tbody>
<row>
Modified: trunk/content/projects/gup/hig/hig-ch-whatsnew.xml
==============================================================================
--- trunk/content/projects/gup/hig/hig-ch-whatsnew.xml (original)
+++ trunk/content/projects/gup/hig/hig-ch-whatsnew.xml Mon Sep 29 23:32:29 2008
@@ -11,9 +11,9 @@
<listitem><para>
Updated illustrations throughout.
</para></listitem>
- </itemizedlist>
+ </itemizedlist>
- <para>The following sections were added in HIG v2.0:</para>
+ <para>The following sections were added in HIG v2.0:</para>
<itemizedlist>
<listitem><para>
<xref linkend="gconf-keys"/>
Modified: trunk/content/projects/gup/hig/hig-ch-windows.xml
==============================================================================
--- trunk/content/projects/gup/hig/hig-ch-windows.xml (original)
+++ trunk/content/projects/gup/hig/hig-ch-windows.xml Mon Sep 29 23:32:29 2008
@@ -40,6 +40,12 @@
formats.</para>
</sect2>
+ <sect2 id="window-props-icon">
+ <title>Icon</title>
+ <para>Every window has an icon, which normally appears on its menu button. If the window appears on the window list or in the <keycombo><keycap>Alt</keycap><keycap>Tab</keycap></keycombo> sequence, the icon will also appear there, alongside the window title.</para>
+ <para>Always provide your own icon for this purpose, as the default icon assigned by GNOME is unlikely to convey any useful information about the window to the user. In general, every window that is part of the same application should use the same icon. Ideally, this icon should be the same or similar to the icon used to launch the application. </para>
+ </sect2>
+
<sect2 id="window-props-borders">
<title>Borders and Window Commands</title>
@@ -174,7 +180,7 @@
context-sensitiveâ that is, they cannot initiate an action such as
<guibutton>Save</guibutton> on the current document. This is because
while moving the mouse from the current document to the utility
- window, the user could inadvertantly pass the pointer over a different
+ window, the user could inadvertently pass the pointer over a different
document window, thus changing the focus and possibly saving the wrong
document.</para>
</note>
@@ -186,10 +192,10 @@
<itemizedlist><title>Guidelines</title>
<listitem><para>Always show a window as soon as possible, but make sure your window is the correct size before displaying it. Resizing a window after it is visible is disorienting and gives an unpolished look to your application.</para></listitem>
<listitem><para>If a window contains information that takes a few seconds to compute or display, it is often better not to fill it in completely before displaying the window. For example, a window containing a large text area can be shown
-quickly, and then the text can be filled in afterwards (provided this does not result in the window resizing). This will make your application feel more responsive than if you had not shown the window until its content was complete.</para></listitem>
+quickly, and then the text can be filled in afterward (provided this does not result in the window resizing). This will make your application feel more responsive than if you had not shown the window until its content was complete.</para></listitem>
<listitem><para>Hide a window as soon as possible after it is
closed. Unless an alert might be shown, immediately hide a window that the user has closed by clicking the Close button in the window border--
-your application can still perform any internal clean-up operations afterwards. Besides making the
+your application can still perform any internal clean-up operations afterward. Besides making the
system appear slow, not doing this can cause the window manager to think the application is not responding, and display an unnecessary alert to the user.</para></listitem>
</itemizedlist>
@@ -249,8 +255,8 @@
<example>
<title>Using document names as window titles</title>
- <informaltable frame="all">
- <tgroup align="left" cols="2">
+ <informaltable frame="none">
+ <tgroup colsep="0" rowsep="0" align="left" cols="2">
<thead>
<row>
<entry>Application</entry>
@@ -309,8 +315,8 @@
<example>
<title>Using application names as window titles</title>
- <informaltable frame="all">
- <tgroup align="left" cols="2">
+ <informaltable frame="none">
+ <tgroup colsep="0" rowsep="0" align="left" cols="2">
<thead>
<row>
<entry>Application</entry>
@@ -394,8 +400,7 @@
</imageobject>
<textobject>
- <phrase>A typical SDI application: Eye of GNOME being used to
- inspect an icon</phrase>
+ <phrase>A typical SDI application: Eye of GNOME being used to inspect an icon</phrase>
</textobject>
</mediaobject>
</figure>
@@ -409,7 +414,7 @@
within a single window.</para>
<figure>
- <title>A typical MDI application (gedit) showing three open
+ <title>A typical MDI application (epiphany) showing three open
documents on tabbed pages</title>
<mediaobject>
@@ -423,8 +428,7 @@
</imageobject>
<textobject>
- <phrase>A typical MDI application: gedit with three open
- documents in the same window</phrase>
+ <phrase>A typical MDI application: epiphany with three open documents in the same window</phrase>
</textobject>
</mediaobject>
</figure>
@@ -591,8 +595,7 @@
</imageobject>
<textobject>
- <phrase>Screenshot showing correct positions for Help, Apply,
- Cancel and OK buttons in a dialog</phrase>
+ <phrase>Screenshot showing correct positions for Help, Apply, Cancel and OK buttons in a dialog</phrase>
</textobject>
</mediaobject>
</figure>
@@ -644,21 +647,23 @@
</imageobject>
<textobject>
- <phrase>Screenshot showing the "file properties" window
- from Nautilus</phrase>
+ <phrase>Screenshot showing the "file properties" window from Nautilus</phrase>
</textobject>
</mediaobject>
</figure>
+
+ <formalpara>
+ <title>Icon:</title>
+ <para>Same as application</para>
+ </formalpara>
<formalpara>
<title>Title Format:</title>
-
<para><replaceable>Object Name</replaceable> Properties</para>
</formalpara>
<formalpara>
<title>Window Commands:</title>
-
<para>Close, Minimize, Roll-up/Unroll</para>
</formalpara>
@@ -698,6 +703,11 @@
</figure>
<formalpara>
+ <title>Icon:</title>
+ <para>Same as application</para>
+ </formalpara>
+
+ <formalpara>
<title>Title Format:</title>
<para><replaceable>Application Name</replaceable> Preferences</para>
@@ -764,13 +774,17 @@
</imageobject>
<textobject>
- <phrase>A screenshot of a toolbox with eight buttons arranged into
- two rows</phrase>
+ <phrase>A screenshot of a toolbox with eight buttons arranged into two rows</phrase>
</textobject>
</mediaobject>
</figure>
<formalpara>
+ <title>Icon:</title>
+ <para>Same as application</para>
+ </formalpara>
+
+ <formalpara>
<title>Title Format:</title>
<para>Toolboxes have no title</para>
@@ -856,8 +870,8 @@
<title>Toolbox Categories</title>
<para>While categories may not be as visually appealing as a toolbox
- homogenously filled with beautiful icons, they make an unwieldy large
- toolbox more managable. Picking a small icon from more than fifteen
+ homogeneously filled with beautiful icons, they make an unwieldy large
+ toolbox more manageable. Picking a small icon from more than fifteen
other items is a difficult task. Additionally, categories allow users
to hide sets of tool items that are not relevant to their current
task.</para>
@@ -945,14 +959,17 @@
</imageobject>
<textobject>
- <phrase>An example of an alert, showing the text "You have an
- appointment with George Wells in 15 minutes", and with an OK
- button to dismiss the window.</phrase>
+ <phrase>An example of an alert, showing the text "You have an appointment with George Wells in 15 minutes", and with an OK button to dismiss the window.</phrase>
</textobject>
</mediaobject>
</figure>
<!--<remark>FIXME: need to redo the spacing and icons in the alert shots. I think I have a glade file for these somewhere. -Seth</remark>-->
+
+ <formalpara>
+ <title>Icon:</title>
+ <para>Same as application</para>
+ </formalpara>
<formalpara>
<title>Title Format</title>
@@ -1036,8 +1053,7 @@
</imageobject>
<textobject>
- <phrase>Screenshot of an alert showing example of primary text in
- bold, and secondary text in a smaller font underneath.</phrase>
+ <phrase>Screenshot of an alert showing example of primary text in bold, and secondary text in a smaller font underneath.</phrase>
</textobject>
</mediaobject>
</figure>
@@ -1101,9 +1117,7 @@
</imageobject>
<textobject>
- <phrase>Screenshot showing ordering and placement of alert
- buttons: Help button in bottom left, and Alternate, Cancel and
- Affirmative buttons in bottom right.</phrase>
+ <phrase>Screenshot showing ordering and placement of alert buttons: Help button in bottom left, and Alternate, Cancel and Affirmative buttons in bottom right.</phrase>
</textobject>
</mediaobject>
</figure>
@@ -1199,9 +1213,7 @@
</imageobject>
<textobject>
- <phrase>Diagram showing correct spacing to use between controls
- and buttons in an alert window. This is detailed in the guidelines
- below.</phrase>
+ <phrase>Diagram showing correct spacing to use between controls and buttons in an alert window. This is detailed in the guidelines below.</phrase>
</textobject>
</mediaobject>
</figure>
@@ -1247,10 +1259,10 @@
<replaceable>Secondary Text</replaceable>. Now change the properties
for each control according to these tables:</para>
- <table frame="topbot" pgwide="0">
+ <table frame="none" pgwide="0">
<title>Properties for the GtkDialog</title>
- <tgroup align="left" cols="2" colsep="0" rowsep="0">
+ <tgroup colsep="0" rowsep="0" align="left" cols="2">
<thead>
<row valign="top">
<entry>Property</entry>
@@ -1285,7 +1297,7 @@
</row>
<row>
- <entry>Has Seperator</entry>
+ <entry>Has Separator</entry>
<entry>No</entry>
</row>
@@ -1293,9 +1305,8 @@
</tgroup>
</table>
- <table frame="topbot" pgwide="0">
- <title>Properties for the GtkVBox (included in the dialog by
- default)</title>
+ <table frame="none" pgwide="0">
+ <title>Properties for the GtkVBox (included in the dialog by default)</title>
<tgroup align="left" cols="2" colsep="0" rowsep="0">
<thead>
@@ -1316,7 +1327,7 @@
</tgroup>
</table>
- <table frame="topbot" pgwide="0">
+ <table frame="none" pgwide="0">
<title>Properties for the GtkHBox</title>
<tgroup align="left" cols="2" colsep="0" rowsep="0">
@@ -1344,7 +1355,7 @@
</tgroup>
</table>
- <table frame="topbot" pgwide="0">
+ <table frame="none" pgwide="0">
<title>Properties for the GtkImage</title>
<tgroup align="left" cols="2" colsep="0" rowsep="0">
@@ -1372,7 +1383,7 @@
</tgroup>
</table>
- <table frame="topbot" pgwide="0">
+ <table frame="none" pgwide="0">
<title>Properties for the GtkLabel</title>
<tgroup align="left" cols="2" colsep="0" rowsep="0">
@@ -1471,7 +1482,7 @@
<title>Error Alerts</title>
<para>Display an error alert when a user-requested operation cannot be
- sucessfully completed. Present errors caused by operations not requested
+ successfully completed. Present errors caused by operations not requested
by the user by another means, unless the error could result in data loss
or other serious problems. For example, an error encountered during an
email check initiated by the user clicking a toolbar button should
@@ -1558,9 +1569,9 @@
</listitem>
<listitem>
- <para>presents a selectable message and a button labelled with
+ <para>presents a selectable message and a button labeled with
a verb or verb phrase
- describing the action to be confirmed, or labelled
+ describing the action to be confirmed, or labeled
<guilabel>OK</guilabel> if such a phrase would be longer than three
words. This button is placed in the bottom right corner of the
alert.</para>
@@ -1607,8 +1618,7 @@
</imageobject>
<textobject>
- <phrase>Save confirmation alert: "[ Close without Saving] [
- Cancel ] [[ Save ]] "</phrase>
+ <phrase>Save confirmation alert: "[ Close without Saving] [ Cancel ] [[ Save ]] "</phrase>
</textobject>
</mediaobject>
</figure>
@@ -1647,7 +1657,7 @@
before doing any necessary internal clean-up.
If the user chooses to save before
closing, hide the alert immediately but show the document window until the document is
-saved, in case an error occurs. Then hide the document window immediately after it has been saved successfuly.
+saved, in case an error occurs. Then hide the document window immediately after it has been saved successfully.
</para>
</sect3>
</sect2>
@@ -1682,12 +1692,12 @@
<para><itemizedlist><title>Guidelines</title><listitem><para>Use the
stock authentication icon.</para></listitem><listitem><para>Show
- a labelled field for each required item of information. Suggested fields
+ a labeled field for each required item of information. Suggested fields
are <guilabel>Username</guilabel> and <guilabel>Password</guilabel> (in
that order) where appropriate.</para></listitem><listitem><para>If it is
secure to retain the username longer than the password, pre-fill the
username field and give focus to the password field when the alert is
- displayed.</para></listitem><listitem><para>Show a button labelled with
+ displayed.</para></listitem><listitem><para>Show a button labeled with
a verb or verb phrase describing the authentication action, or
<guilabel>OK</guilabel> if there is no appropriate phrase or such a
phrase would be longer than three words. Place this button in the bottom
@@ -1746,6 +1756,11 @@
</mediaobject>
</figure>
+ <formalpara>
+ <title>Icon:</title>
+ <para>Same as application</para>
+ </formalpara>
+
<formalpara>
<title>Title Format</title>
@@ -1780,7 +1795,7 @@
<listitem>
<para>The progress bar text should provide an idea of how much work
has been completed. It is better to provide specific information
- rather than a unitless percentage. For example, "13 of 19 images
+ rather than a unit-less percentage. For example, "13 of 19 images
rotated" or "12.1 of 30 MB downloaded" rather than
"13% complete".</para>
</listitem>
@@ -1810,8 +1825,8 @@
the <guibutton>Cancel</guibutton> button. When paused, the italicized
current sub-operation text should have " (Paused)" appended.
This will allow users to perform important tasks requiring that
- resource, or give them time to think whether they want to procede with
- a dangerous operation they inadvertantly triggered.</para>
+ resource, or give them time to think whether they want to proceed with
+ a dangerous operation they inadvertently triggered.</para>
</listitem>
</itemizedlist>
@@ -1849,7 +1864,7 @@
internet super-daemon, and configure the user's web browser to
operate through the firewall. It may be desirable that the user is
exposed the series of actions involved in setting up the firewall to
- increase the chances that they will be sucessful in making
+ increase the chances that they will be successful in making
modifications later, if they so desire.</para>
</example>
@@ -1978,6 +1993,11 @@
</mediaobject>
</figure>
+ <formalpara>
+ <title>Icon:</title>
+ <para>Same as application</para>
+ </formalpara>
+
<formalpara>
<title>Title Format:</title>
@@ -2104,7 +2124,7 @@
into the assistant are stored. Often people will resort to re-running
the assistant, re-entering many settings that they don't want to change.
<remark>Why do they need to re-enter anything? The assistant should
- be populated with the exisiting settings whenever it is run.</remark>
+ be populated with the existing settings whenever it is run.</remark>
</para>
<warning><para>Assistants are often used in situations where a better
@@ -2129,6 +2149,27 @@
this, state the goal of the assistant, and, if it is not obvious, where
the user can find the information the assistant will be asking for.</para>
+ <remark>Might want to do/mention something about first-time setup
+ assistants, as there's some inconsistency about whether
+ pressing Cancel in such a beast should just cancel the
+ setup and start the application, or cancel out of the
+ application altogether. Possible options:
+ Just decide what Cancel should do--
+ in which case, I'd prefer it just to
+ cancel the druid and run the app; or
+ consider adding a "Skip Setup" button
+ to the front page of first-time
+ setup druids-- clearer, but would need
+ extra code if the druid was available
+ within the application too, which most
+ are. -Calum.
+ </remark>
+
+ <formalpara>
+ <title>Icon:</title>
+ <para>Same as application</para>
+ </formalpara>
+
<formalpara>
<title>Title Format:</title>
@@ -2155,8 +2196,7 @@
</imageobject>
<textobject>
- <phrase>Screenshot showing the first page of an assistant for
- creating a new email account</phrase>
+ <phrase>Screenshot showing the first page of an assistant for creating a new email account</phrase>
</textobject>
</mediaobject>
</figure>
@@ -2198,8 +2238,7 @@
</imageobject>
<textobject>
- <phrase>Screenshot showing the third page of an email account
- assistant, asking for mail server information</phrase>
+ <phrase>Screenshot showing the third page of an email account assistant, asking for mail server information</phrase>
</textobject>
</mediaobject>
</figure>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
