[gnome-devel-docs] HIG: add a page on empty placeholders
- From: Allan Day <allanday src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs] HIG: add a page on empty placeholders
- Date: Tue, 21 Jul 2015 15:20:07 +0000 (UTC)
commit 701fbaa3996dec872374315b76450a3c8de48fc2
Author: Allan Day <allanpday gmail com>
Date: Tue Jul 21 16:19:52 2015 +0100
HIG: add a page on empty placeholders
hig/C/empty-placeholders.page | 43 ++++
hig/C/figures/patterns/empty-placeholder.svg | 287 ++++++++++++++++++++++++++
hig/C/patterns.page | 2 +-
3 files changed, 331 insertions(+), 1 deletions(-)
---
diff --git a/hig/C/empty-placeholders.page b/hig/C/empty-placeholders.page
new file mode 100644
index 0000000..c9c5644
--- /dev/null
+++ b/hig/C/empty-placeholders.page
@@ -0,0 +1,43 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="empty-placeholder">
+
+ <info>
+ <link type="guide" xref="patterns" group="empty-placeholder"/>
+ <credit type="author">
+ <name>Allan Day</name>
+ <email>aday gnome org</email>
+ </credit>
+ <include href="legal.xml" xmlns="http://www.w3.org/2001/XInclude"/>
+ </info>
+
+<title>Empty placeholders</title>
+
+<media type="image" mime="image/svg" src="figures/patterns/empty-placeholder.svg"/>
+
+<p>An empty placeholder is an image, accompanied by text, which fills the space in an empty list or grid.</p>
+
+<section id="when-to-use">
+<title>When to use</title>
+
+<p>Empty placeholders perform a number of important functions: they prevent confusion and guide the user,
and they make your interface look better and more cohesive. They are also one of those nice touches which
helps to communicate an attention to detail.</p>
+
+<p>An empty placeholder should be displayed whenever a list or grid is empty.</p>
+
+<p>Empty placeholders should not be displayed when an application is being run for the first time. In these
situations empty states are often to be expected, and it is more appropriate to provide a richer, more
characterful and upbeat experience.</p>
+
+</section>
+
+<section id="guidelines">
+<title>Guidelines</title>
+
+<list>
+<item><p>Follow the standard layout for the size and placement of the image and labels, so that your
application is consistent with other GNOME 3 applications.</p></item>
+<item><p>For the image, use a <link xref="icons-and-artwork#color-vs-symbolic">symbolic icon</link> that
either represents your application, or the type of content that would ordinarily appear in the grid or
list.</p></item>
+<item><p>An empty placeholder should always include a label which communicates the empty state. It is often
appropriate to include a smaller subtext which provides additional guidance (such as how to add items).
However, this should only be included if there is additional information that it is useful to
provide.</p></item>
+<item><p>If there are controls that allow items to be added, it can be appropriate to highlight them using a
<link xref="buttons#suggested-and-destructive">suggested style</link> while the list/grid is empty.</p></item>
+</list>
+
+</section>
+
+</page>
diff --git a/hig/C/figures/patterns/empty-placeholder.svg b/hig/C/figures/patterns/empty-placeholder.svg
new file mode 100644
index 0000000..1173803
--- /dev/null
+++ b/hig/C/figures/patterns/empty-placeholder.svg
@@ -0,0 +1,287 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ width="940"
+ height="540"
+ id="svg6276"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="empty-placeholder.svg">
+ <defs
+ id="defs6278" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1"
+ inkscape:cx="381.17399"
+ inkscape:cy="266.15071"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ inkscape:showpageshadow="false"
+ inkscape:window-width="1920"
+ inkscape:window-height="1136"
+ inkscape:window-x="0"
+ inkscape:window-y="27"
+ inkscape:window-maximized="1"
+ inkscape:snap-nodes="false"
+ inkscape:snap-bbox="true"
+ inkscape:bbox-paths="true"
+ inkscape:bbox-nodes="true"
+ showguides="false">
+ <inkscape:grid
+ type="xygrid"
+ id="grid6749"
+ empspacing="5"
+ visible="true"
+ enabled="true"
+ snapvisiblegridlinesonly="true" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata6281">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(0,-512.36218)">
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/action-bars.png"
+ ry="9"
+ rx="9"
+ y="568.86218"
+ x="127.5"
+ height="106"
+ width="685"
+ id="rect8907"
+ style="fill:#f3f3f3;fill-opacity:1;stroke:#a7aba7;stroke-width:0.99999994;stroke-opacity:1" />
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/action-bars.png"
+ mask="none"
+
style="fill:#f3f3f3;fill-opacity:1;stroke:#a7a7a7;stroke-width:0.99999994;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ id="rect8909"
+ width="685"
+ height="386"
+ x="127.5"
+ y="609.86218" />
+ <g
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/action-bars.png"
+ id="g8911"
+ transform="translate(784.0016,581.36218)"
+ style="display:inline;fill:#888a85">
+ <g
+ style="display:inline;fill:#888a85"
+ id="g8913"
+ transform="translate(-60,-518)" />
+ <g
+ id="g8915"
+ transform="translate(-60,-518)"
+ style="fill:#888a85" />
+ <g
+ id="g8917"
+ transform="translate(-60,-518)"
+ style="fill:#888a85" />
+ <g
+ id="g8919"
+ transform="translate(-60,-518)"
+ style="fill:#888a85">
+ <g
+ style="display:inline;fill:#888a85"
+ id="g8921"
+ transform="translate(19,-242)">
+ <path
+
style="color:#bebebe;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Andale
Mono';-inkscape-font-specification:'Andale
Mono';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#888a85;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;enable-background:new"
+ id="path8923"
+ d="m 45,764 1,0 c 0.01037,-1.2e-4 0.02079,-4.6e-4 0.03125,0 0.254951,0.0112 0.50987,0.12858
0.6875,0.3125 L 49,766.59375 51.3125,764.3125 C 51.578125,764.082 51.759172,764.007 52,764 l 1,0 0,1 c
0,0.28647 -0.03434,0.55065 -0.25,0.75 l -2.28125,2.28125 2.25,2.25 C 52.906938,770.46942 52.999992,770.7347
53,771 l 0,1 -1,0 c -0.265301,-10e-6 -0.530586,-0.0931 -0.71875,-0.28125 L 49,769.4375 46.71875,771.71875 C
46.530586,771.90694 46.26529,772 46,772 l -1,0 0,-1 c -3e-6,-0.26529 0.09306,-0.53058 0.28125,-0.71875 l
2.28125,-2.25 L 45.28125,765.75 C 45.070508,765.55537 44.97809,765.28075 45,765 l 0,-1 z"
+ inkscape:connector-curvature="0" />
+ </g>
+ </g>
+ <g
+ id="g8925"
+ transform="translate(-60,-518)"
+ style="fill:#888a85" />
+ <g
+ id="g8927"
+ transform="translate(-60,-518)"
+ style="fill:#888a85" />
+ <g
+ id="g8929"
+ transform="translate(-60,-518)"
+ style="fill:#888a85" />
+ </g>
+ <path
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/action-bars.png"
+ inkscape:connector-curvature="0"
+ id="path8931"
+ d="m 771.5,580.85688 0,17.0103"
+
style="display:inline;fill:none;stroke:#a7a7a7;stroke-width:0.99999988px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
/>
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar-menu.png"
+ ry="3"
+ rx="3.0000002"
+ y="573.86206"
+ x="133.5"
+ height="31"
+ width="69"
+ id="rect4208"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#4a90d9;fill-opacity:1;fill-rule:nonzero;stroke:#1c5288;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
/>
+ <text
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar-menu.png"
+ sodipodi:linespacing="125%"
+ id="text4210"
+ y="594.1991"
+ x="167.59766"
+
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14px;line-height:125%;font-family:Cantarell;-inkscape-font-specification:Cantarell;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none"
+ xml:space="preserve"><tspan
+ y="594.1991"
+ x="167.59766"
+ id="tspan4212"
+ sodipodi:role="line">Import</tspan></text>
+ <g
+ style="display:inline"
+ id="g4717"
+ transform="matrix(1.7375798,0,0,1.7375798,-2435.53,5374.0206)">
+ <g
+ transform="translate(1619.999,1)"
+ id="g4719">
+ <path
+
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:Sans;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;display:inline;overflow:visible;visibility:visible;opacity:0.5;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.99999988;marker:none;enable-background:accumulate"
+ d="m 31.25078,-2692.625 a 4.0003996,4.0003996 0 0 0 -3.25,4 l 0,52 a 4.0003996,4.0003996 0 0 0
4,4 l 40,0 a 4.0003996,4.0003996 0 0 0 4,-4 l 0,-37.75 a 4.0003996,4.0003996 0 0 0 -1.125,-2.875 l
-14.25,-14.25 a 4.0003996,4.0003996 0 0 0 -2.875,-1.125 l -25.75,0 a 4.0003996,4.0003996 0 0 0 -0.3748,0
4.0003996,4.0003996 0 0 0 -0.3748,0 z m 4.75,8 20,0 0,12 12,0 0,32 -32,0 0,-44 z"
+ id="path4721"
+ inkscape:connector-curvature="0" />
+ <circle
+ r="1.2656249"
+ cy="89.734375"
+ cx="385.57812"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:0.5;fill:none;stroke:#ffffff;stroke-width:1.18468678;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="circle4723"
+ transform="matrix(3.37642,0,0,3.37642,-1256.1462,-2973.3331)" />
+ <rect
+ y="-2664.6255"
+ x="56.000793"
+ height="4"
+ width="8"
+ id="rect4725"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:0.5;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:accumulate"
/>
+ <rect
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:0.5;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:accumulate"
+ id="rect4727"
+ width="24.000055"
+ height="4"
+ x="40.000847"
+ y="-2656.6255" />
+ <rect
+ y="-2648.6255"
+ x="40.000847"
+ height="4"
+ width="24.000055"
+ id="rect4729"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:0.5;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:accumulate"
/>
+ </g>
+ <g
+ transform="translate(879.99899,0)"
+ id="g4731">
+ <path
+ inkscape:connector-curvature="0"
+ id="path4733"
+ d="m 771.25078,-2692.625 a 4.0003996,4.0003996 0 0 0 -3.25,4 l 0,52 a 4.0003996,4.0003996 0 0 0
4,4 l 40,0 a 4.0003996,4.0003996 0 0 0 4,-4 l 0,-37.75 a 4.0003996,4.0003996 0 0 0 -1.125,-2.875 l
-14.25,-14.25 a 4.0003996,4.0003996 0 0 0 -2.875,-1.125 l -25.75,0 a 4.0003996,4.0003996 0 0 0 -0.3748,0
4.0003996,4.0003996 0 0 0 -0.3748,0 z m 4.75,8 20,0 0,12 12,0 0,32 -32,0 0,-44 z"
+
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:Sans;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#daddda;fill-opacity:1;stroke:none;stroke-width:1.99999988;marker:none;enable-background:accumulate"
/>
+ <circle
+ r="1.2656249"
+ cy="89.734375"
+ cx="385.57812"
+ transform="matrix(3.37642,0,0,3.37642,-516.14616,-2973.3331)"
+ id="circle4735"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:#daddda;stroke-width:1.18468678;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
/>
+ <rect
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#daddda;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:accumulate"
+ id="rect4737"
+ width="8"
+ height="4"
+ x="796.00079"
+ y="-2664.6255" />
+ <rect
+ y="-2656.6255"
+ x="780.00085"
+ height="4"
+ width="24.000055"
+ id="rect4739"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#daddda;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:accumulate"
/>
+ <rect
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#daddda;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:accumulate"
+ id="rect4741"
+ width="24.000055"
+ height="4"
+ x="780.00085"
+ y="-2648.6255" />
+ </g>
+ </g>
+ <flowRoot
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+
inkscape:export-filename="/home/andreasn/SparkleShare/gnome-mockups/initial-app-states/layout-proposal.png"
+ transform="translate(-713.12908,541.04244)"
+
style="font-style:normal;font-weight:normal;font-size:13.75px;line-height:139.99999762%;font-family:Sans;letter-spacing:0px;word-spacing:0px;display:inline;fill:#888a85;fill-opacity:1;stroke:none"
+ id="flowRoot4693"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4695"><rect
+ style="font-size:13.75px;line-height:139.99999762%;fill:#888a85;fill-opacity:1"
+ y="321.78152"
+ x="669.63013"
+ height="138.07822"
+ width="1027.1392"
+ id="rect4697" /></flowRegion><flowPara
+ id="flowPara4699"
+
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.75px;line-height:139.99999762%;font-family:Cantarell;-inkscape-font-specification:Cantarell;text-align:center;text-anchor:middle;fill:#888a85;fill-opacity:1">Use
the <flowSpan
+ id="flowSpan4220"
+ style="font-weight:bold;font-size:13.75px">Import</flowSpan> buton to add.</flowPara></flowRoot>
<flowRoot
+ xml:space="preserve"
+ id="flowRoot4709"
+
style="font-style:normal;font-weight:normal;font-size:22.5px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;display:inline;fill:#888a85;fill-opacity:1;stroke:none"
+ transform="translate(-318.43135,493.53084)"
+
inkscape:export-filename="/home/andreasn/SparkleShare/gnome-mockups/initial-app-states/layout-proposal.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90"><flowRegion
+ id="flowRegion4711"><rect
+ id="rect4713"
+ width="237.13916"
+ height="42.078217"
+ x="669.63013"
+ y="321.78152"
+ style="font-size:22.5px;fill:#888a85;fill-opacity:1" /></flowRegion><flowPara
+
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5px;line-height:200%;font-family:Cantarell;-inkscape-font-specification:'Cantarell
Bold';text-align:center;text-anchor:middle;fill:#888a85;fill-opacity:1"
+ id="flowPara4715">No documents found</flowPara></flowRoot> </g>
+</svg>
diff --git a/hig/C/patterns.page b/hig/C/patterns.page
index f74d8d5..9c0439b 100644
--- a/hig/C/patterns.page
+++ b/hig/C/patterns.page
@@ -16,7 +16,7 @@
<p>Once you have decided which patterns to use, the <link xref="ui-elements">user interface elements
pages</link> provide details of individual elements that you can use to fill out your design.</p>
-<links type="topic" style="2column" groups="application-menus primary-windows header-bars header-bar-menus
grids lists selection-mode search view-switchers sidebar-lists dialogs notifications action-bars
overlaid-controls"/>
+<links type="topic" style="2column" groups="application-menus primary-windows header-bars header-bar-menus
grids lists selection-mode search view-switchers sidebar-lists dialogs notifications action-bars
overlaid-controls empty-placeholders"/>
<media type="image" mime="image/svg" src="figures/patterns/patterns.svg"/>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
