340 lines
19 KiB
HTML
340 lines
19 KiB
HTML
<!doctype html>
|
||
<html class="no-js">
|
||
<head><meta charset="utf-8"/>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
||
<meta name="color-scheme" content="light dark"><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
|
||
<link rel="index" title="Index" href="../../genindex.html" /><link rel="search" title="Search" href="../../search.html" /><link rel="next" title="Toasts" href="toasts.html" /><link rel="prev" title="Feedback" href="../feedback.html" />
|
||
|
||
<meta name="generator" content="sphinx-4.3.0, furo 2021.07.05.beta38"/>
|
||
<title>Notifications - GNOME Human Interface Guidelines documentation</title>
|
||
<link rel="stylesheet" type="text/css" href="../../_static/pygments.css" />
|
||
<link rel="stylesheet" type="text/css" href="../../_static/styles/furo.css" />
|
||
<link rel="stylesheet" type="text/css" href="../../_static/styles/furo-extensions.css" />
|
||
<link rel="stylesheet" type="text/css" href="../../_static/gnome.css" />
|
||
|
||
|
||
|
||
<style>
|
||
:root {
|
||
--color-code-background: #f8f8f8;
|
||
--color-code-foreground: black;
|
||
--color-brand-primary: #4a86cf;
|
||
--color-brand-content: #4a86cf;
|
||
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--color-code-background: #202020;
|
||
--color-code-foreground: #d0d0d0;
|
||
|
||
}
|
||
}
|
||
|
||
/* For allowing end-user-specific overrides */
|
||
.override-light {
|
||
--color-code-background: #f8f8f8;
|
||
--color-code-foreground: black;
|
||
--color-brand-primary: #4a86cf;
|
||
--color-brand-content: #4a86cf;
|
||
|
||
}
|
||
.override-dark {
|
||
--color-code-background: #202020;
|
||
--color-code-foreground: #d0d0d0;
|
||
|
||
}
|
||
</style><link media="(prefers-color-scheme: dark)" rel="stylesheet" href="../../_static/pygments_dark.css"></head>
|
||
<body dir="">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||
<symbol id="svg-toc" viewBox="0 0 24 24">
|
||
<title>Contents</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
stroke-width="1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||
<line x1="4" y1="6" x2="20" y2="6" />
|
||
<line x1="10" y1="12" x2="20" y2="12" />
|
||
<line x1="6" y1="18" x2="20" y2="18" />
|
||
</svg>
|
||
</symbol>
|
||
<symbol id="svg-menu" viewBox="0 0 24 24">
|
||
<title>Menu</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||
class="feather feather-menu">
|
||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||
</svg>
|
||
</symbol>
|
||
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
|
||
<title>Expand</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||
class="feather feather-chevron-right">
|
||
<polyline points="9 18 15 12 9 6"></polyline>
|
||
</svg>
|
||
</symbol>
|
||
</svg>
|
||
|
||
<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation">
|
||
<input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc">
|
||
<label class="overlay sidebar-overlay" for="__navigation"></label>
|
||
<label class="overlay toc-overlay" for="__toc"></label>
|
||
|
||
|
||
|
||
<div class="page">
|
||
<header class="mobile-header">
|
||
<div class="header-left">
|
||
<label class="nav-overlay-icon" for="__navigation">
|
||
<i class="icon"><svg><use href="#svg-menu"></use></svg></i>
|
||
</label>
|
||
</div>
|
||
<div class="header-center">
|
||
<a href="../../index.html"><div class="brand">GNOME Human Interface Guidelines</div></a>
|
||
</div>
|
||
<div class="header-right">
|
||
<label class="toc-overlay-icon toc-header-icon" for="__toc">
|
||
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
||
</label>
|
||
</div>
|
||
</header>
|
||
<aside class="sidebar-drawer">
|
||
<div class="sidebar-container">
|
||
|
||
<div class="sidebar-sticky"><a class="sidebar-brand centered" href="../../index.html">
|
||
|
||
<div class="sidebar-logo-container">
|
||
<img class="sidebar-logo" src="../../_static/logo.svg" alt="Logo"/>
|
||
</div>
|
||
|
||
<span class="sidebar-brand-text">GNOME Human Interface Guidelines</span>
|
||
|
||
</a><form class="sidebar-search-container" method="get" action="../../search.html">
|
||
<input class="sidebar-search" placeholder=Search name="q">
|
||
<input type="hidden" name="check_keywords" value="yes">
|
||
<input type="hidden" name="area" value="default">
|
||
</form><div class="sidebar-scroll"><div class="sidebar-tree">
|
||
<ul class="current">
|
||
<li class="toctree-l1"><a class="reference internal" href="../../principles.html">Design Principles</a></li>
|
||
<li class="toctree-l1"><a class="reference internal" href="../../resources.html">Tools & Resources</a></li>
|
||
<li class="toctree-l1 has-children"><a class="reference internal" href="../../guidelines.html">Guidelines</a><input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox"/><label for="toctree-checkbox-1"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/app-naming.html">App Naming</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/app-icons.html">App Icons</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/pointer-touch.html">Pointer & Touch</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/keyboard.html">Keyboard</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/ui-icons.html">UI Icons</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/ui-styling.html">UI Styling</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/writing-style.html">Writing Style</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/typography.html">Typography</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/navigation.html">Navigation</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/adaptive.html">Scaling & Adaptiveness</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/accessibility.html">Accessibility</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l1 current has-children"><a class="reference internal" href="../../patterns.html">Patterns</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" type="checkbox"/><label for="toctree-checkbox-2"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
|
||
<li class="toctree-l2 has-children"><a class="reference internal" href="../containers.html">Containers</a><input class="toctree-checkbox" id="toctree-checkbox-3" name="toctree-checkbox-3" type="checkbox"/><label for="toctree-checkbox-3"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l3"><a class="reference internal" href="../containers/windows.html">Windows</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../containers/header-bars.html">Header Bars</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../containers/popovers.html">Popovers</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../containers/utility-panes.html">Utility Panes</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../containers/boxed-lists.html">Boxed Lists</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../containers/grid-views.html">Grid Views</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../containers/list-column-views.html">List & Column Views</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../containers/selection-mode.html">Selection & Edit Modes</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l2 has-children"><a class="reference internal" href="../nav.html">Navigation</a><input class="toctree-checkbox" id="toctree-checkbox-4" name="toctree-checkbox-4" type="checkbox"/><label for="toctree-checkbox-4"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l3"><a class="reference internal" href="../nav/browsing.html">Browsing</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../nav/view-switchers.html">View Switchers</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../nav/tabs.html">Tabs</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../nav/sidebars.html">Sidebars</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../nav/search.html">Search</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l2 has-children"><a class="reference internal" href="../controls.html">Controls</a><input class="toctree-checkbox" id="toctree-checkbox-5" name="toctree-checkbox-5" type="checkbox"/><label for="toctree-checkbox-5"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/buttons.html">Buttons</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/menus.html">Menus</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/switches.html">Switches</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/text-fields.html">Text Fields</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/checkboxes.html">Checkboxes</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/radio-buttons.html">Radio Buttons</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/drop-downs.html">Drop-Down Lists</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/sliders.html">Sliders</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/spin-buttons.html">Spin Buttons</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/overlaid.html">Overlaid Controls</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l2 current has-children"><a class="reference internal" href="../feedback.html">Feedback</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-6" name="toctree-checkbox-6" type="checkbox"/><label for="toctree-checkbox-6"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
|
||
<li class="toctree-l3 current current-page"><a class="current reference internal" href="#">Notifications</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="toasts.html">Toasts</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="info-bars.html">Info Bars</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="progress-bars.html">Progress Bars</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="spinners.html">Spinners</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="dialogs.html">Dialogs</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="placeholders.html">Placeholder Pages</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="tooltips.html">Tooltips</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l1 has-children"><a class="reference internal" href="../../reference.html">Reference</a><input class="toctree-checkbox" id="toctree-checkbox-7" name="toctree-checkbox-7" type="checkbox"/><label for="toctree-checkbox-7"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l2"><a class="reference internal" href="../../reference/keyboard.html">Standard Keyboard Shortcuts</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../../reference/palette.html">Palette</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../../reference/backgrounds.html">Backgrounds</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</aside>
|
||
<main class="main">
|
||
<div class="content">
|
||
<article role="main">
|
||
<label class="toc-overlay-icon toc-content-icon" for="__toc">
|
||
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
||
</label>
|
||
<section id="notifications">
|
||
<h1>Notifications<a class="headerlink" href="#notifications" title="Permalink to this headline">¶</a></h1>
|
||
<img alt="../../_images/notification.png" src="../../_images/notification.png"/>
|
||
<p>Notifications are used to inform users about events that are relevant to them. Examples include:</p>
|
||
<ul class="simple">
|
||
<li><p>when a download or other long-running operation has finished</p></li>
|
||
<li><p>when new content is available</p></li>
|
||
<li><p>when a message has been received</p></li>
|
||
</ul>
|
||
<p>Because they are shown by the system, notifications are a useful way of communicating with users while they are using other applications. If a message is only relevant while the sender app is being used, <a class="reference internal" href="toasts.html"><span class="doc">toasts</span></a> are a better option.</p>
|
||
<section id="general-guidelines">
|
||
<h2>General Guidelines<a class="headerlink" href="#general-guidelines" title="Permalink to this headline">¶</a></h2>
|
||
<ul class="simple">
|
||
<li><p>Be careful not to needlessly distract users with notifications, and question whether users really need to be informed about the events you want to communicate.</p></li>
|
||
<li><dl class="simple">
|
||
<dt>Applications that deal with lots of events, such as email or social media messages, run a particular risk of distracting users with too many notifications. In these situations:</dt><dd><ul>
|
||
<li><p>It is often desirable to place restrictions on how frequently notifications are shown. For example, instead of showing a notification for each new message, periodic notifications can show a summary of messages that have been received.</p></li>
|
||
<li><p>Provide an option for users to disable and/or reduce the number of notifications.</p></li>
|
||
</ul>
|
||
</dd>
|
||
</dl>
|
||
</li>
|
||
<li><p>Ensure that your app removes notifications that are no longer valid. For example, a notification for a weather warning that has been revoked, or for emails that have been read.</p></li>
|
||
<li><p>Don’t rely solely on notifications for communicating something, as they might not always be seen. The application window should independently communicate all the information contained in notifications.</p></li>
|
||
</ul>
|
||
</section>
|
||
<section id="notification-elements">
|
||
<h2>Notification Elements<a class="headerlink" href="#notification-elements" title="Permalink to this headline">¶</a></h2>
|
||
<p>Notifications in GNOME have a number of standard elements:</p>
|
||
<div class="table-wrapper"><table class="colwidths-given docutils align-default">
|
||
<colgroup>
|
||
<col style="width: 20%"/>
|
||
<col style="width: 80%"/>
|
||
</colgroup>
|
||
<thead>
|
||
<tr class="row-odd"><th class="head"><p>Element</p></th>
|
||
<th class="head"><p>Description</p></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="row-even"><td><p>Application Icon</p></td>
|
||
<td><p>Indicates which application sent the notification.</p></td>
|
||
</tr>
|
||
<tr class="row-odd"><td><p>Title</p></td>
|
||
<td><p>A short and concise summary of the event that triggered the notification, written in <a class="reference internal" href="../../guidelines/writing-style.html#header-capitalization"><span class="std std-ref">header capitalization</span></a>. The notification should be understandable from the title alone.</p></td>
|
||
</tr>
|
||
<tr class="row-even"><td><p>Body</p></td>
|
||
<td><p>An optional sentence which gives extra detail about the notification, written in <a class="reference internal" href="../../guidelines/writing-style.html#sentence-capitalization"><span class="std std-ref">sentence capitalization</span></a>.</p></td>
|
||
</tr>
|
||
<tr class="row-odd"><td><p>Default Action</p></td>
|
||
<td><p>The action that is triggered when the notification body is clicked. This should dismiss the notification and show the relevant part of the source app window.</p></td>
|
||
</tr>
|
||
<tr class="row-even"><td><p>Actions</p></td>
|
||
<td><p>Each notification can include up to three buttons.</p></td>
|
||
</tr>
|
||
</tbody>
|
||
</table></div>
|
||
</section>
|
||
<section id="notification-actions">
|
||
<h2>Notification Actions<a class="headerlink" href="#notification-actions" title="Permalink to this headline">¶</a></h2>
|
||
<p>It is possible to add buttons to notifications, to allow users to quickly respond to them. Guidelines for these:</p>
|
||
<ul class="simple">
|
||
<li><p>Only use notification actions when the functionality that they provide is often required.</p></li>
|
||
<li><p>Notification actions should be related to the content of the notification.</p></li>
|
||
<li><p>Actions should not replace user interface controls elsewhere — it should be possible to take the same actions from your application’s windows.</p></li>
|
||
<li><p>Notification actions should not duplicate the default action. For example, a new email notification does not need to include an Open button, since the default action should already perform this action.</p></li>
|
||
</ul>
|
||
</section>
|
||
<section id="api-reference">
|
||
<h2>API Reference<a class="headerlink" href="#api-reference" title="Permalink to this headline">¶</a></h2>
|
||
<ul class="simple">
|
||
<li><p><a class="reference external" href="https://developer.gnome.org/gio/stable/GNotification.html">GIO: GNotification</a></p></li>
|
||
</ul>
|
||
</section>
|
||
</section>
|
||
|
||
</article>
|
||
<footer>
|
||
|
||
<div class="related-pages">
|
||
<a class="next-page" href="toasts.html">
|
||
<div class="page-info">
|
||
<div class="context">
|
||
<span>Next</span>
|
||
</div>
|
||
<div class="title">Toasts</div>
|
||
</div>
|
||
<svg><use href="#svg-arrow-right"></use></svg>
|
||
</a>
|
||
<a class="prev-page" href="../feedback.html">
|
||
<svg><use href="#svg-arrow-right"></use></svg>
|
||
<div class="page-info">
|
||
<div class="context">
|
||
<span>Previous</span>
|
||
</div>
|
||
|
||
<div class="title">Feedback</div>
|
||
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
</footer>
|
||
</div>
|
||
<aside class="toc-drawer">
|
||
|
||
|
||
<div class="toc-sticky toc-scroll">
|
||
<div class="toc-title-container">
|
||
<span class="toc-title">
|
||
Contents
|
||
</span>
|
||
</div>
|
||
<div class="toc-tree-container">
|
||
<div class="toc-tree">
|
||
<ul>
|
||
<li><a class="reference internal" href="#">Notifications</a><ul>
|
||
<li><a class="reference internal" href="#general-guidelines">General Guidelines</a></li>
|
||
<li><a class="reference internal" href="#notification-elements">Notification Elements</a></li>
|
||
<li><a class="reference internal" href="#notification-actions">Notification Actions</a></li>
|
||
<li><a class="reference internal" href="#api-reference">API Reference</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</aside>
|
||
</main>
|
||
</div><script data-url_root="../../" id="documentation_options" src="../../_static/documentation_options.js"></script>
|
||
<script src="../../_static/jquery.js"></script>
|
||
<script src="../../_static/underscore.js"></script>
|
||
<script src="../../_static/doctools.js"></script>
|
||
<script src="../../_static/scripts/main.js"></script>
|
||
</body>
|
||
</html> |