GNOME.org
 

[gnome-devel-docs] hig: Update guidance for menus

commit 6a7803db69c2d576c991680bc32ff78e26fe477e
Author: Allan Day <allanpday gmail com>
Date:   Tue Mar 26 11:59:16 2019 +0000

    hig: Update guidance for menus
    
    Application menus were retired in GNOME 3.32. This commit updates
    our guidelines to provide more accurate information on how
    menus should be designed.

 hig/C/application-menus.page            | 58 +--------------------------------
 hig/C/figures/patterns/primary-menu.svg | 46 ++++++++++++--------------
 hig/C/primary-menus.page                | 48 +++++++++++++++++++++++----
 hig/C/secondary-menus.page              |  4 +--
 4 files changed, 64 insertions(+), 92 deletions(-)
---
diff --git a/hig/C/application-menus.page b/hig/C/application-menus.page
index 9f286a3f..c6f26c86 100644
--- a/hig/C/application-menus.page
+++ b/hig/C/application-menus.page
@@ -16,62 +16,6 @@
 
 <media type="image" mime="image/svg" src="figures/patterns/application-menu.svg"/>
 
-<p><em>Application menus are no longer recommended, and will not be displayed in GNOME 3's top bar from 
GNOME 3.32. <link xref="primary-menus">Primary</link> and <link xref="secondary-menus">secondary menus</link> 
should be used as alternatives.</em></p>
+<p><em>Application menus are no longer recommended, and their contents will not be included in GNOME 3's top 
bar from GNOME 3.32. <link xref="primary-menus">Primary</link> and <link xref="secondary-menus">secondary 
menus</link> should be used as alternatives.</em></p>
 
-<p>Application menus provide access to global, top level actions and options for your application. These 
include standard items for accessing documentation and information about the application.</p>
-
-<section id="when-to-use">
-<title>When to use</title>
-
-<p>Application menus are a standard part of GNOME 3, and every application that runs under GNOME 3 should 
have one.</p>
-
-</section>
-
-<section id="general-guidelines">
-<title>General guidelines</title>
-
-<list>
-<item><p>Follow the standard <link xref="menus">guidance for menus</link>.</p></item>
-<item><p>Only include menu items that relate to the application as a whole, such as application preferences. 
Items that are specific to a particular window or view, or which act on content within an application window, 
should not be included.</p></item>
-<item><p>If an item from the application menu is frequently used, consider moving it to a more accessible 
location.</p></item>
-</list>
-
-</section>
-
-<section id="standard-menu-items">
-<title>Standard menu items</title>
-
-<p>Common application menu items include <gui>New Window</gui>, <gui>Preferences</gui>, <gui>Help</gui>, 
<gui>About</gui> and <gui>Quit</gui>. <gui>Help</gui>, <gui>About</gui> and <gui>Quit</gui> should be 
contained within their own group at the bottom of the menu.</p>
-
-<table>
-<tr>
-<td><p><gui>New Window</gui></p></td>
-<td><p>Opens a new window. Only <link xref="primary-windows#application-types">multiple instance 
applications</link> should include this menu item. If the new window contains a specific type of content 
item, or simultaneously performs an action, rename it to be less generic. For example: <gui>New 
Connection</gui> or <gui>New Document</gui>.</p></td>
-</tr>
-<tr>
-<td><p><gui>Preferences</gui></p></td>
-<td><p>Opens the application's preferences dialog. Only show this menu item if your application has a 
preferences dialog.</p></td>
-</tr>
-<tr>
-<td><p><gui>Help</gui></p></td>
-<td><p>Opens your application's user documentation in the <app>Help</app> application. Only show this menu 
item if your application has user documentation.</p></td>
-</tr>
-<tr>
-<td><p><gui>About</gui></p></td>
-<td><p>Opens the application's about dialog. Every application menu should include this item.</p></td>
-</tr>
-<tr>
-<td><p><gui>Quit</gui></p></td>
-<td><p>Closes the application, including all application windows. Every application menu should include this 
item.</p></td>
-</tr>
-</table>
-
-</section>
-
-<section id="api-reference">
-<title>API reference</title>
-<list>
-<item><p><link 
href="https://developer.gnome.org/gtk3/stable/GtkApplication.html";>GtkApplication</link></p></item>
-</list>
-</section>
 </page>
diff --git a/hig/C/figures/patterns/primary-menu.svg b/hig/C/figures/patterns/primary-menu.svg
index 7de0207c..897b9c23 100644
--- a/hig/C/figures/patterns/primary-menu.svg
+++ b/hig/C/figures/patterns/primary-menu.svg
@@ -13,7 +13,7 @@
    height="540"
    id="svg6276"
    version="1.1"
-   inkscape:version="0.92.2 2405546, 2018-03-11"
+   inkscape:version="0.92.4 (unknown)"
    sodipodi:docname="primary-menu.svg">
   <defs
      id="defs6278" />
@@ -25,14 +25,14 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="1"
-     inkscape:cx="504.68651"
-     inkscape:cy="252.01575"
+     inkscape:cx="663.68651"
+     inkscape:cy="277.01575"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
      inkscape:showpageshadow="false"
      inkscape:window-width="1920"
-     inkscape:window-height="953"
+     inkscape:window-height="1073"
      inkscape:window-x="0"
      inkscape:window-y="27"
      inkscape:window-maximized="1"
@@ -417,7 +417,7 @@
          style="font-size:14px;line-height:1.25">New</tspan></text>
     <path
        
style="fill:#f2f2f2;fill-opacity:1;stroke:#babdb6;stroke-width:1;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1"
-       d="M 550.5,624.8621 H 735 l 14,-12 14,12 h 7.5 c 0,0 6,2.676 6,6 v 285 c 0,3.324 -2.676,6 -6,6 h -220 
c -3.324,0 -6,-2.676 -6,-6 v -285 c 0,-3.324 2.6768,-6.0707 6,-6 z"
+       d="M 550.5,624.8621 H 735 l 14,-12 14,12 h 7.5 c 0,0 6,2.676 6,6 v 297 c 0,3.324 -2.676,6 -6,6 h -220 
c -3.324,0 -6,-2.676 -6,-6 v -297 c 0,-3.324 2.6768,-6.0707 6,-6 z"
        id="path9277"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="scccssssssss" />
@@ -557,42 +557,36 @@
         </g>
       </g>
     </g>
-    <text
-       id="text1743"
-       y="816.36218"
-       x="563"
-       
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:0%;font-family:Cantarell;-inkscape-font-specification:Cantarell;letter-spacing:0px;word-spacing:0px;fill:#2e3436;fill-opacity:1;stroke:none"
-       xml:space="preserve"><tspan
-         id="tspan1741"
-         style="font-size:14px;line-height:2.20000005"
-         y="816.36218"
-         x="563"
-         sodipodi:role="line">Preferences</tspan></text>
     <text
        xml:space="preserve"
        
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:0%;font-family:Cantarell;-inkscape-font-specification:Cantarell;letter-spacing:0px;word-spacing:0px;fill:#2e3436;fill-opacity:1;stroke:none"
        x="563"
-       y="864.36218"
+       y="816.36218"
        id="text1752"><tspan
          sodipodi:role="line"
          x="563"
-         y="864.36218"
+         y="816.36218"
          style="font-size:14px;line-height:2.20000005"
-         id="tspan1750">Help</tspan><tspan
+         id="tspan1750">Preferences</tspan><tspan
          sodipodi:role="line"
          x="563"
-         y="895.16217"
+         y="847.16217"
          style="font-size:14px;line-height:2.20000005"
-         id="tspan1754">About</tspan></text>
+         id="tspan901">Keyboard Shortcuts</tspan><tspan
+         sodipodi:role="line"
+         x="563"
+         y="877.96216"
+         style="font-size:14px;line-height:2.20000005"
+         id="tspan899">Help</tspan><tspan
+         sodipodi:role="line"
+         x="563"
+         y="908.76221"
+         style="font-size:14px;line-height:2.20000005"
+         id="tspan1754">About Application</tspan></text>
     <path
        
style="fill:none;stroke:#dbdbdb;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        d="M 557,785.86218 H 763.00001"
        id="path1756"
        inkscape:connector-curvature="0" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path1758"
-       d="M 557,835.86218 H 763.00001"
-       
style="fill:none;stroke:#dbdbdb;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" 
/>
   </g>
 </svg>
diff --git a/hig/C/primary-menus.page b/hig/C/primary-menus.page
index 5bb01417..1a848292 100644
--- a/hig/C/primary-menus.page
+++ b/hig/C/primary-menus.page
@@ -17,30 +17,64 @@
 
 <media type="image" mime="image/svg" src="figures/patterns/primary-menu.svg"/>
 
-<p>Primary menus are a standard design pattern that is found in most applications. They are labelled with 
the menu icon (named <code>menu-open</code>) and contain the top-level menu items for the application. This 
can include standard items like <gui>Preferences</gui>, <gui>Help</gui> and <gui>About</gui>, as well as 
other application-specific items.</p>
+<p>Primary menus are a standard design pattern that is found in most applications. They are labelled with 
the menu icon (named <code>menu-open</code>) and contain the top-level menu items for the application. This 
can include standard items like <gui>Preferences</gui>, <gui>Help</gui> and <gui>About Application</gui>, as 
well as other application-specific items.</p>
 
-<p>Primary menus are typically located on the right side of the header bar. When used in combination with a 
<link xref="sidebar-lists">sidebar list</link>, the primary menu should be placed above the sidebar list.</p>
 
 <section id="when-to-use">
 <title>When to use</title>
 
-<p>Most applications have primary menus, since they are the standard location for <gui>About</gui>, which 
every application is expected to have.</p>
+<p>Most applications have primary menus, since they are the standard location for <gui>About 
Application</gui>, which every application is expected to have.</p>
 
 </section>
 
 <section id="guidance">
 <title>Guidance</title>
 
+<p>Primary menus are typically placed on the right side of the header bar. However, there are two variations 
on this rule:</p>
+
+<list>
+<item><p>If the application incorporates in-window navigation, with a top-level location and sub-pages, the 
primary menu should only be placed on the top level: sub-pages can include a <link 
xref="secondary-menu">secondary menu</link>, if a menu is required.</p></item>
+<item><p>When used in combination with a <link xref="sidebar-lists">sidebar list</link>, the primary menu 
should be placed above the sidebar list on the right. If a menu is required for items shown in the content 
side of the window, a <link xref="secondary-menu">secondary menu</link> can be used.</p></item>
+</list>
+
+<p>Other guidelines:</p>
+
 <list>
 <item><p>Primary menus can contain items for both the current window or view, as well as the application as 
a whole. This differentiates them from <link xref="secondary-menus">secondary menus</link>, which only 
contain menu items that relate to a specific view or item.</p></item>
-<item><p>Applications which use in-window navigation should only show the primary menu on the top-level view 
(typically the main view that is shown when the app is launched). Child views, such as those that show 
individual items of content, should use <link xref="secondary-menus">secondary</link> rather than primary 
menus.</p></item>
 <item><p>Follow the <link xref="menus">standard guidelines for menus</link> when deciding on primary menu 
content and arrangement.</p></item>
-<item><p>A primary menu is contained within a <link xref="popovers">popover</link>. As such, a header bar 
menu can include a variety of controls, such as groups of buttons.</p></item>
-<item><p>Primary menus shouldn’t include menu items for close or quit: windows can already be closed using 
the close button in the header bar, and it can be ambiguous as to what a close menu item refers to. Users 
don't readily differentiate between quit and close, and it can therefore be misleading.</p></item>
+<item><p>A primary menu is contained within a <link xref="popovers">popover</link>. As such, a primary menu 
can include a variety of controls, such as groups of buttons.</p></item>
 </list>
 
 </section>
 
+<section id="standard-menu-items">
+<title>Standard menu items</title>
+
+<p>The following are standard primary menu items, and should be placed in a group at the end of the menu:</p>
+
+<table>
+<tr>
+<td><p><gui>Preferences</gui></p></td>
+<td><p>Opens the application's preferences dialog, if it has one.</p></td>
+</tr>
+<tr>
+<td><p><gui>Keyboard Shortcuts</gui></p></td>
+<td><p>Opens the application's keyboard shortcuts window, if it has one.</p></td>
+</tr>
+<tr>
+<td><p><gui>Help</gui></p></td>
+<td><p>Opens the application's user documentation in the <app>Help</app> application.</p></td>
+</tr>
+<tr>
+<td><p><gui>About Application</gui></p></td>
+<td><p>Opens the application's about dialog. This item should include the application's name, such as 
<gui>About Photos</gui> or <gui>About Calculator</gui>. Every primary menu should include this item.</p></td>
+</tr>
+</table>
+
+<p>Primary menus shouldn’t include menu items for close or quit: windows can already be closed using the 
close button in the header bar, and it can be ambiguous as to what a close menu item refers to. Users don't 
readily differentiate between quit and close, and it can therefore be misleading.</p>
+
+</section>
+
 <section id="api-reference">
 <title>API reference</title>
 
@@ -51,4 +85,4 @@
 
 </section>
 
-</page>
\ No newline at end of file
+</page>
diff --git a/hig/C/secondary-menus.page b/hig/C/secondary-menus.page
index d809e212..2f105944 100644
--- a/hig/C/secondary-menus.page
+++ b/hig/C/secondary-menus.page
@@ -17,7 +17,7 @@
 
 <media type="image" mime="image/svg" src="figures/patterns/secondary-menu.svg"/>
 
-<p>Secondary menus are located in the header bar and include menu items for the current view or content 
item. This differentiates them from <link xref="primary-menus">primary menus</link>, which include menu items 
that relate to an entire application (such as <gui>Preferences</gui> and <gui>About</gui>).</p>
+<p>Secondary menus are located in the header bar and include menu items for the current view or content 
item. This differentiates them from <link xref="primary-menus">primary menus</link>, which include menu items 
that relate to an entire application (such as <gui>Preferences</gui> and <gui>About "Name"</gui>).</p>
 
 <section id="when-to-use">
 <title>When to use</title>
@@ -50,4 +50,4 @@
 
 </section>
 
-</page>
\ No newline at end of file
+</page>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]