[gnome-devel-docs] add guidance for progress spinners. update the advice for progress bars
- From: Allan Day <allanday src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs] add guidance for progress spinners. update the advice for progress bars
- Date: Tue, 19 Aug 2014 11:06:46 +0000 (UTC)
commit e841953ce88177c0af2745dac039add8903e2b6a
Author: Allan Day <allanpday gmail com>
Date: Tue Aug 19 12:06:21 2014 +0100
add guidance for progress spinners. update the advice for progress bars
hig3/C/figures/progress-bars.png | Bin 3491 -> 4820 bytes
hig3/C/figures/progress-spinner.png | Bin 0 -> 2081 bytes
hig3/C/figures/src/figures.svg | 300 ++++++++++++++++++++++++++---------
hig3/C/progress-bars.page | 47 ++----
hig3/C/progress-spinners.page | 44 +++++
hig3/C/ui-elements.page | 14 +-
6 files changed, 294 insertions(+), 111 deletions(-)
---
diff --git a/hig3/C/figures/progress-bars.png b/hig3/C/figures/progress-bars.png
index 3881973..c40d2e3 100644
Binary files a/hig3/C/figures/progress-bars.png and b/hig3/C/figures/progress-bars.png differ
diff --git a/hig3/C/figures/progress-spinner.png b/hig3/C/figures/progress-spinner.png
new file mode 100644
index 0000000..9811341
Binary files /dev/null and b/hig3/C/figures/progress-spinner.png differ
diff --git a/hig3/C/figures/src/figures.svg b/hig3/C/figures/src/figures.svg
index c710dae..7d84e89 100644
--- a/hig3/C/figures/src/figures.svg
+++ b/hig3/C/figures/src/figures.svg
@@ -204,6 +204,20 @@
id="rect51616"
style="fill:#729fcf;fill-opacity:1;stroke:none" />
</clipPath>
+ <inkscape:path-effect
+ vertical_pattern="false"
+ tang_offset="0"
+ spacing="0"
+ scale_y_rel="false"
+ prop_units="false"
+ prop_scale="1"
+ pattern="m 217.02793,310.67147 0,3.32853 -16.01322,0 11.98549,-0.1422 -11.98549,-0.13869
11.98549,-0.13868 -11.98549,-0.13869 11.98549,-0.13869 -11.98549,-0.13869 11.98549,-0.13869
-11.98549,-0.13869 11.98549,-0.13868 -11.98549,-0.13869 11.98549,-0.1387 -11.98549,-0.13868 11.98549,-0.13869
-11.98549,-0.13869 11.98549,-0.13868 -11.98549,-0.1387 11.98549,-0.13869 -11.98549,-0.13869 11.98549,-0.13868
-11.98549,-0.13869 11.98549,-0.1387 -11.98549,-0.13867 11.98549,-0.1387 -11.98549,-0.13869 z"
+ normal_offset="0"
+ is_visible="true"
+ id="path-effect14384"
+ fuse_tolerance="0"
+ effect="skeletal"
+ copytype="single_stretched" />
</defs>
<sodipodi:namedview
id="base"
@@ -212,11 +226,11 @@
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
- inkscape:zoom="0.5"
- inkscape:cx="5737.735"
- inkscape:cy="3608.7057"
+ inkscape:zoom="1"
+ inkscape:cx="3889.6999"
+ inkscape:cy="2941.1626"
inkscape:document-units="px"
- inkscape:current-layer="layer1"
+ inkscape:current-layer="g33504"
showgrid="false"
inkscape:snap-bbox="true"
inkscape:snap-nodes="false"
@@ -225,7 +239,7 @@
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
- showguides="true"
+ showguides="false"
inkscape:guide-bbox="true"
showborder="true"
inkscape:showpageshadow="false">
@@ -20036,75 +20050,6 @@
id="rect15371"
style="fill:#ffffff;fill-opacity:0;stroke:#ffffff;stroke-width:1.99999952;stroke-linecap:square;stroke-miterlimit:4;stroke-opacity:0;stroke-dasharray:none;display:inline"
/>
<g
- id="g23376"
- transform="translate(0,-36)"
- inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/progress-bars.png"
- inkscape:export-xdpi="90"
- inkscape:export-ydpi="90">
- <rect
- ry="3"
- rx="3.0000002"
- y="-1694.7477"
- x="3681.7283"
- height="6.1098633"
- width="4.2717285"
- id="rect23357"
-
style="color:#000000;fill:#ce5c00;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
/>
- <rect
- inkscape:export-ydpi="90"
- inkscape:export-xdpi="90"
- inkscape:export-filename="/home/lapo.fedora/SparkleShare/gnome-mockups/content
selection/content-selection.png"
- ry="1.9999999"
- rx="1.9999999"
- y="-1694.1378"
- x="3658.5"
- height="5"
- width="239"
- id="rect23361"
-
style="color:#000000;fill:#d2d2d2;fill-opacity:1;fill-rule:nonzero;stroke:#a1a1a1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
/>
- <rect
- inkscape:export-ydpi="90"
- inkscape:export-xdpi="90"
- inkscape:export-filename="/home/lapo.fedora/SparkleShare/gnome-mockups/content
selection/content-selection.png"
- ry="1"
- rx="1"
- y="-1694.1378"
- x="3780.5"
- height="5"
- width="59"
- id="rect23363"
-
style="color:#000000;fill:#5094da;fill-opacity:1;fill-rule:nonzero;stroke:#184472;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
/>
- <rect
- inkscape:export-ydpi="90"
- inkscape:export-xdpi="90"
- inkscape:export-filename="/home/lapo.fedora/SparkleShare/gnome-mockups/content
selection/content-selection.png"
- ry="1.9999999"
- rx="1.9999999"
- y="-1732.1378"
- x="3658.5"
- height="5"
- width="239"
- id="rect23368"
-
style="color:#000000;fill:#d2d2d2;fill-opacity:1;fill-rule:nonzero;stroke:#a1a1a1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
/>
- <path
-
style="color:#000000;fill:#5094da;fill-opacity:1;fill-rule:nonzero;stroke:#184472;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
- d="m 3660.5,-1732.1378 93,0 c 0.483,0 1,0.5014 1,1 l 0,3 c 0,0.5198 -0.5014,1 -1,1 l -93,0 c
-1.108,0 -2,-0.892 -2,-2 l 0,-1 c 0,-1.108 0.892,-2 2,-2 z"
- id="path23370"
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="sssssssss" />
- <text
- sodipodi:linespacing="125%"
- id="text23372"
- y="-1742.6378"
- x="3778.1257"
-
style="font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#888a85;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell"
- xml:space="preserve"><tspan
- y="-1742.6378"
- x="3778.1257"
- id="tspan23374"
- sodipodi:role="line">About 4 minutes left</tspan></text>
- </g>
- <g
id="g23515"
transform="translate(10.942627,14.199338)"
inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/sliders.png"
@@ -20902,7 +20847,7 @@
inkscape:connector-curvature="0"
id="path32247"
d="m 5788.5,-2384.1377 94,0 14,-12 14,12 98,0 c 3.324,0 6,2.676 6,6 l 0,113 c 0,3.324 -2.676,6 -6,6 l
-220,0 c -3.324,0 -6,-2.676 -6,-6 l 0,-113 c 0,-3.324 2.676,-6 6,-6 z"
-
style="fill:#eeeeec;fill-opacity:1;stroke:#babdb6;stroke-width:1;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1"
+
style="fill:#eeeeec;fill-opacity:1;stroke:#b9bdb6;stroke-width:1;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1"
inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/drop-down-list.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
@@ -21639,5 +21584,210 @@
id="tspan32526"
sodipodi:role="line">Cancel</tspan></text>
</g>
+ <rect
+
style="fill:#ffffff;fill-opacity:0;stroke:#ffffff;stroke-width:1.99999952;stroke-linecap:square;stroke-miterlimit:4;stroke-opacity:0;stroke-dasharray:none;display:inline"
+ id="rect32721"
+ width="278"
+ height="278"
+ x="4379"
+ y="-1891.6377"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/progress-spinner.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90" />
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/progress-spinner.png"
+ y="-1891.6377"
+ x="4379"
+ height="278"
+ width="278"
+ id="rect32723"
+
style="fill:#ffffff;fill-opacity:0;stroke:#ffffff;stroke-width:1.99999952;stroke-linecap:square;stroke-miterlimit:4;stroke-opacity:0;stroke-dasharray:none;display:inline"
/>
+ <g
+ id="g33477"
+ transform="matrix(2,0,0,2,-4562,2124.6379)"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/progress-spinner.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
+ <rect
+ y="-1946.6378"
+ x="4532"
+ height="16.000017"
+ width="16"
+ id="rect33475"
+
style="color:#000000;fill:#919494;fill-opacity:0;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
/>
+ <g
+ transform="matrix(1.0167629,0,0,1.0167629,4531.8859,-1946.7093)"
+ id="g33463">
+ <g
+ id="layer9-503"
+ inkscape:label="status"
+ style="display:inline"
+ transform="translate(-201,-317)">
+ <path
+ sodipodi:cx="-11.667262"
+ sodipodi:cy="107.74711"
+ d="m -11.667264,99.897414 10e-7,3.328526 c -0.78263,-0.001 -1.583491,0.21322 -2.260581,0.60573
-10e-7,0 -10e-7,0 -10e-7,0 -1.981399,1.02795 -2.856825,4.29509 -1.65486,6.17602 1.027954,1.9814
4.29509,2.85683 6.1760243,1.65486 3e-7,0 6e-7,0 9e-7,0 1.9813991,-1.02795 2.8568259,-4.29509
1.6548608,-6.17602 1.2184186,1.87143 0.3737493,5.16072 -1.6263624,6.22538 -10e-8,0 -2e-7,0 -3e-7,0
-1.9030833,1.23272 -5.2183223,0.3811 -6.3032443,-1.64722 0,0 0,0 -10e-7,0 -0.617121,-0.95745
-0.718579,-2.25935 -0.414374,-3.46423 -0.322119,1.20022 -0.241835,2.51004 0.366123,3.49209 0,0 0,0 0,0
1.072223,2.07466 4.420345,3.00758 6.4356475,1.76512 2e-7,0 5e-7,0 7e-7,0 2.102182,-1.09198 3.041878,-4.46542
1.7854687,-6.51159 1.288503,2.02764 0.4088013,5.44428 -1.7298807,6.60787 -10e-8,0 -3e-7,0 -4e-7,0
-2.0585068,1.30245 -5.5004568,0.41597 -6.6837978,-1.75023 0,0 -10e-7,0 -10e-7,0 -0.651454,-1.03398
-0.761759,-2.4054 -0.441107,-3.67287 -0.338341,1.26287 -0.248945,2.64211 0.39346,3.70038 0,
0 0,0 10e-7,0 1.170801,2.21196 4.645221,3.17871 6.8145414,1.86665 3e-7,0 6e-7,0 8e-7,0 2.2394734,-1.19056
3.2130108,-4.6903 1.8869932,-6.89048 1.3581125,2.18165 0.4445715,5.72459 -1.8314032,6.98676 -1e-7,0 -3e-7,0
-4e-7,0 -2.2125258,1.37206 -5.7807768,0.45174 -7.0627018,-1.85175 0,0 0,0 0,0 -0.685903,-1.1102
-0.805321,-2.55106 -0.468447,-3.88117 -0.354565,1.32551 -0.256055,2.77419 0.420798,3.90868 0,0 0,0 0,0
1.269384,2.34925 4.870107,3.34985 7.1934504,1.96818 3e-7,0 6e-7,-1e-5 9e-7,-1e-5 2.3767695,-1.28914
3.3841497,-4.91517 1.9885212,-7.26938 1.4277234,2.33568 0.4803397,6.00492 -1.9329313,7.36567 -10e-8,0 -3e-7,0
-4e-7,0 -2.3665488,1.44167 -6.0611028,0.48751 -7.4416098,-1.95328 0,0 0,0 0,0 -0.720352,-1.18642
-0.848883,-2.69671 -0.495786,-4.08947 -0.370787,1.38816 -0.263165,2.90627 0.448137,4.11698 0,0 0,0 0,0
1.367967,2.48655 5.094992,3.52099 7.5723583,2.0697 3e-7,0 6e-7,0 1e-6,0 2.5140658,-1.38772 3.5552887,-5.14006
2.0900493,-7.64829 1.4973331,2.4897 0.5161045,6.28524 -2
.0344614,7.74457 -10e-8,0 -3e-7,0 -4e-7,0 -2.5205698,1.51129 -6.3414238,0.52328 -7.8205088,-2.0548 0,0 0,0
0,0 -0.754799,-1.26264 -0.892442,-2.84237 -0.523122,-4.29777 -0.38701,1.4508 -0.270275,3.03835
0.475474,4.32528 1e-6,0 1e-6,0 1e-6,0 1.466545,2.62384 5.319869,3.69212 7.9512523,2.17122 3e-7,0 6e-7,0
10e-7,0 2.6513571,-1.4863 3.7264215,-5.36494 2.1915738,-8.02719 1.5669437,2.64372 0.551878,6.56557
-2.1359819,8.12348 -1e-7,0 -3e-7,0 -5e-7,0 -2.6745907,1.5809 -6.6217487,0.55905 -8.1994207,-2.15633 0,0
-10e-7,0 -10e-7,0 -0.789249,-1.33886 -0.936006,-2.98802 -0.550464,-4.50607 -0.403233,1.51345
-0.277384,3.17043 0.502815,4.53358 10e-7,0 10e-7,0 10e-7,0 1.565132,2.76114 5.544761,3.86326
8.3301692,2.27275 4e-7,0 7e-7,0 1.1e-6,0 2.7886547,-1.58488 3.8975596,-5.58982 2.2930999,-8.4061
1.6365535,2.79775 0.5876428,6.84589 -2.237512,8.50239 -1e-7,0 -3e-7,0 -5e-7,0 -2.8286117,1.6505
-6.9020697,0.59481 -8.5783197,-2.25786 -1e-6,0 -1e-6,0 -1e-6,0 -0.823697,-1.41509 -0.979565,-3.13368
-0.577799,-4.71437 -0.419457,1.57609 -0.284497,3.3025 0.53015,4.74188 0,0 1e-6,0 1e-6,0 1.66371,2.89843
5.769639,4.0344 8.7090682,2.37428 3e-7,0 7e-7,0 1.1e-6,0 2.9259497,-1.68347 4.0686995,-5.81471
2.39463,-8.78501 1.7061632,2.95177 0.6234077,7.12622 -2.3390421,8.88129 -1e-7,0 -3e-7,0 -5e-7,0
-2.9826337,1.72011 -7.1823907,0.63058 -8.9572187,-2.35939 -1e-6,0 -1e-6,0 -1e-6,0 -0.858144,-1.4913
-1.023124,-3.27932 -0.605135,-4.92266 -0.43568,1.63874 -0.291608,3.43458 0.557486,4.95017 0,0 0,0 10e-7,0
1.762288,3.03573 5.994516,4.20554 9.0879671,2.47581 4e-7,0 8e-7,0 1.2e-6,0 3.0632446,-1.78204
4.2398393,-6.03959 2.4961601,-9.16391 1.7757752,3.10579 0.6591792,7.40654 -2.4405681,9.2602 -2e-7,0 -4e-7,0
-6e-7,0 -3.1366577,1.78973 -7.4627207,0.66635 -9.3361367,-2.46091 0,0 0,0 0,0 -0.892594,-1.56753
-1.066688,-3.42499 -0.632476,-5.13097 -0.451903,1.70138 -0.298717,3.56666 0.584827,5.15848 0,0 0,0 1e-6,0
1.860874,3.17302 6.219409,4.37667 9.4668841,2.57734 4e-7,0 8e-7,-10e-6 1.2e-6,-10e-
6 3.2005422,-1.88063 4.4109774,-6.26448 2.5976862,-9.54282 1.8453849,3.25982 0.694944,7.68687
-2.5420982,9.63911 -2e-7,0 -4e-7,0 -7e-7,0 -3.2906796,1.85933 -7.7430416,0.70211 -9.7150356,-2.56245 0,0 0,0
0,0 -0.927041,-1.64375 -1.110247,-3.57063 -0.659812,-5.33926 -0.468125,1.76402 -0.305827,3.69873
0.612164,5.36677 10e-7,0 10e-7,0 10e-7,0 1.959454,3.31032 6.444286,4.54781 9.845779,2.67886 5e-7,0 9e-7,0
1.3e-6,0 3.3378336,-1.97921 4.5821102,-6.48935 2.6992107,-9.92171 1.9149956,3.41383 0.7307175,7.96718
-2.6436187,10.018 -2e-7,0 -5e-7,0 -7e-7,0 -3.4446996,1.92895 -8.0233666,0.73789 -10.0939476,-2.66396 0,0 0,0
-1e-6,-1e-5 -0.961491,-1.71997 -1.153812,-3.71629 -0.687154,-5.54756 -0.484348,1.82667 -0.312935,3.83081
0.639507,5.57507 0,0 1e-6,0 1e-6,1e-5 2.05804,3.44761 6.669178,4.71894 10.224691,2.78038 4e-7,0 9e-7,0
1.3e-6,0 3.4751275,-2.07779 4.7532413,-6.71424 2.8007312,-10.30062 1.9846039,3.56785 0.7664843,8.2475
-2.7451432,10.3969 -2e-7,0 -5e-7,0 -7e-7,0 -3.5987176,1.99856
-8.3036826,0.77366 -10.4728416,-2.76549 -1e-6,0 -1e-6,0 -1e-6,0 -0.995939,-1.79619 -1.197372,-3.86194
-0.714492,-5.75586 -0.500571,1.88931 -0.320048,3.96289 0.666841,5.78337 1e-6,0 1e-6,0 1e-6,0 2.156618,3.58491
6.894056,4.89009 10.6035949,2.88192 5e-7,0 1e-6,0 1.4e-6,0 3.6124261,-2.17637 4.9243882,-6.93913
2.902267,-10.67953 2.0378646,3.73131 0.7553325,8.51526 -2.8749985,10.72676 -3e-7,0 -6e-7,0 -9e-7,0
-3.7307329,2.0376 -8.5141979,0.7552 -10.7253259,-2.87461 -2.037335,-3.73015 -0.755061,-8.51314
2.874226,-10.72389 1e-6,0 1e-6,0 2e-6,0 1.192864,-0.68698 2.548542,-1.050101 3.925021,-1.051356 z"
+ sodipodi:end="10.995574"
+ id="path14339"
+ sodipodi:open="true"
+ inkscape:path-effect="#path-effect14384"
+ sodipodi:rx="6.1871843"
+ sodipodi:ry="6.1871843"
+ sodipodi:start="5.7595865"
+
style="color:#000000;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:3.38507128;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ transform="matrix(0.88624425,0,0,0.88624425,219.31943,229.52028)"
+ sodipodi:type="arc" />
+ </g>
+ <g
+ id="layer10-40"
+ inkscape:label="devices"
+ style="display:inline"
+ transform="translate(-201,-317)" />
+ <g
+ id="layer11-18"
+ inkscape:label="apps"
+ transform="translate(-201,-317)" />
+ <g
+ id="layer13-54"
+ inkscape:label="places"
+ style="display:inline"
+ transform="translate(-201,-317)" />
+ <g
+ id="layer14-77"
+ inkscape:label="mimetypes"
+ transform="translate(-201,-317)" />
+ <g
+ id="layer15-03"
+ inkscape:label="emblems"
+ style="display:inline"
+ transform="translate(-201,-317)" />
+ <g
+ id="g71291-82"
+ inkscape:label="emotes"
+ style="display:inline"
+ transform="translate(-201,-317)" />
+ <g
+ id="g4953-11"
+ inkscape:label="categories"
+ style="display:inline"
+ transform="translate(-201,-317)" />
+ <g
+ id="layer12-99"
+ inkscape:label="actions"
+ style="display:inline"
+ transform="translate(-201,-317)" />
+ </g>
+ </g>
+ <g
+ transform="translate(0,-48)"
+ id="g33504">
+ <g
+ id="g33528"
+ transform="translate(0,23.000017)"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/progress-bars.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
+ <rect
+ ry="3"
+ rx="3.0000002"
+ y="-1722.7477"
+ x="3681.7283"
+ height="6.1098633"
+ width="4.2717285"
+ id="rect23357"
+
style="color:#000000;fill:#ce5c00;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ transform="translate(0,48)" />
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/lapo.fedora/SparkleShare/gnome-mockups/content
selection/content-selection.png"
+ ry="1.9999999"
+ rx="1.9999999"
+ y="-1722.1378"
+ x="3658.5"
+ height="5"
+ width="239"
+ id="rect23361"
+
style="color:#000000;fill:#d2d2d2;fill-opacity:1;fill-rule:nonzero;stroke:#a1a1a1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+ transform="translate(0,48)" />
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/lapo.fedora/SparkleShare/gnome-mockups/content
selection/content-selection.png"
+ ry="1"
+ rx="1"
+ y="-1722.1378"
+ x="3780.5"
+ height="5"
+ width="59"
+ id="rect23363"
+
style="color:#000000;fill:#5094da;fill-opacity:1;fill-rule:nonzero;stroke:#184472;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+ transform="translate(0,48)" />
+ <g
+ transform="translate(0,47)"
+ id="g33498">
+ <rect
+
style="color:#000000;fill:#d2d2d2;fill-opacity:1;fill-rule:nonzero;stroke:#a1a1a1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+ id="rect23368"
+ width="239"
+ height="5"
+ x="3658.5"
+ y="-1768.1378"
+ rx="1.9999999"
+ ry="1.9999999"
+ inkscape:export-filename="/home/lapo.fedora/SparkleShare/gnome-mockups/content
selection/content-selection.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90" />
+ <path
+ sodipodi:nodetypes="sssssssss"
+ inkscape:connector-curvature="0"
+ id="path23370"
+ d="m 3660.5,-1768.1378 93,0 c 0.483,0 1,0.5014 1,1 l 0,3 c 0,0.5198 -0.5014,1 -1,1 l -93,0 c
-1.108,0 -2,-0.892 -2,-2 l 0,-1 c 0,-1.108 0.892,-2 2,-2 z"
+
style="color:#000000;fill:#5094da;fill-opacity:1;fill-rule:nonzero;stroke:#184472;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
/>
+ <text
+ xml:space="preserve"
+
style="font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#888a85;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell"
+ x="3778.1257"
+ y="-1778.6378"
+ id="text23372"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan23374"
+ x="3778.1257"
+ y="-1778.6378">About 4 minutes left</tspan></text>
+ </g>
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/lapo.fedora/SparkleShare/gnome-mockups/content
selection/content-selection.png"
+ ry="1.9999999"
+ rx="1.9999999"
+ y="-1768.1378"
+ x="3658.5"
+ height="5"
+ width="239"
+ id="rect33506"
+
style="color:#000000;fill:#d2d2d2;fill-opacity:1;fill-rule:nonzero;stroke:#a1a1a1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
/>
+ <path
+
style="color:#000000;fill:#5094da;fill-opacity:1;fill-rule:nonzero;stroke:#184472;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+ d="m 3660.5,-1768.1378 93,0 c 0.483,0 1,0.5014 1,1 l 0,3 c 0,0.5198 -0.5014,1 -1,1 l -93,0 c
-1.108,0 -2,-0.892 -2,-2 l 0,-1 c 0,-1.108 0.892,-2 2,-2 z"
+ id="path33508"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="sssssssss" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text33510"
+ y="-1778.6378"
+ x="3778.1257"
+
style="font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#888a85;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell"
+ xml:space="preserve"><tspan
+ y="-1778.6378"
+ x="3778.1257"
+ id="tspan33512"
+ sodipodi:role="line">4 minutes left</tspan></text>
+ </g>
+ </g>
</g>
</svg>
diff --git a/hig3/C/progress-bars.page b/hig3/C/progress-bars.page
index fa0b779..ab18256 100644
--- a/hig3/C/progress-bars.page
+++ b/hig3/C/progress-bars.page
@@ -24,47 +24,34 @@
<title>Progress bars</title>
-<p>Progress bars are visual indicators of the progress of a task being carried out by the application.</p>
-
-<p>There are three main types of progress bar: time-remaining, typical-time, and indeterminate.</p>
-
-<media type="image" mime="image/png" src="figures/progress-bars.png"/>
-
-<section id="guidelines">
-<title>Guidelines</title>
+<p>Progress bars are visual indicators of the progress of a task being carried out. There are three main
types of progress bar:</p>
<list>
-<item><p>Accuracy is preferable for progress bars. Where possible, use a time-remaining progress bar,
followed by typical-time. Try to avoid using indeterminate progress bars.</p></item>
-<item><p>Ensure that time-remaining and typical-time progress bars measure an operation's total time or
total work, not just that of a single step.</p></item>
+<item><p>Time-remaining: indicate how much time remains in an operation.</p></item>
+<item><p>Typical-time: indicate how much time remains, based on an estimate of the expected
duration.</p></item>
+<item><p>Indeterminate: only indicate that an operation is ongoing, not how long it will take.</p></item>
</list>
-</section>
-
-<section id="time-remaining-progress-bar">
-<title>Time-remaining progress bar</title>
-
-<p>Time-remaining progress bars indicate how much time remains in an operation. They also include text which
states how much time remains before the operation will be complete. Time-remaining bars are the most useful
type of progress bar.</p>
-
-<p>Use a time-remaining bar if you can display an initial estimate of an operation's remaining time and then
periodically display updated estimates. Each updated estimate should be based on changes that have occurred
and that will cause the operation to finish more quickly or more slowly. If the operation will finish more
slowly, your application can display an updated estimate that is greater than the estimate previously
displayed.</p>
-
-</section>
+<media type="image" mime="image/png" src="figures/progress-bars.png"/>
-<section id="typical-time-progress-bar">
-<title>Typical-time progress bar</title>
+<section id="when-to-use">
+<title>When to use</title>
-<p>Typical-time progress bars indicate how much time remains if an operation takes, based on how long that
operation typically takes. They are more useful than indeterminate-progress bars, but not as effective as
time-remaining progress bars.</p>
+<p>The primary advantage of a progress bar over other methods of indicating progress is that a progress bar
graphically indicates the proportion of a task that has been completed. This also results in progress bars
taking more space and having a higher visual footprint. Therefore, they are are best used to indicate
progress on tasks that can take a relatively long time.</p>
-<p>If your application overestimates the completed amount of work, the length of the bar can indicate
"almost complete" until the operation is complete. If your application underestimates how much work is
complete, the application can fill the remaining portion of the bar when the operation is complete.</p>
+<p>As a rule of thumb, only use a progress bar for tasks that take over 30 seconds. For tasks that have
shorter periods, <link xref="progress-spinners">progress spinners</link> are often a better choice.</p>
</section>
-<section id="indeterminate-progress-bar">
-<title>Indeterminate progress bar</title>
-
-<p>Indeterminate progress bars only indicate that an operation is ongoing, not how long it will take.</p>
+<section id="guidelines">
+<title>Guidelines</title>
-<p>Use an indeterminate-progress bar to provide feedback only for operations whose duration you cannot
estimate at all.</p>
+<list>
+<item><p>Accuracy is preferable for progress bars. Where possible, use a time-remaining progress bar,
followed by typical-time. Try to avoid using indeterminate progress bars.</p></item>
+<item><p>Ensure that time-remaining and typical-time progress bars measure an operation's total time or
total work, not just that of a single step.</p></item>
+<item><p>For time-remaining progress bars, update time-remaining progress bars when changes occurr that will
cause the operation to finish more quickly or more slowly.</p></item>
+<item><p>For typical-time progress bars, if your application overestimates the completed amount of work, the
length of the bar can indicate "almost complete" until the operation is complete. If your application
underestimates how much work is complete, fill the remaining portion of the bar when the operation is
complete.</p></item>
+</list>
</section>
-
</page>
diff --git a/hig3/C/progress-spinners.page b/hig3/C/progress-spinners.page
new file mode 100644
index 0000000..de9bc9b
--- /dev/null
+++ b/hig3/C/progress-spinners.page
@@ -0,0 +1,44 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="progress-spinners">
+
+ <info>
+ <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>Progress spinners</title>
+
+<p>Progress spinners are a common user interface element for indicating progress in a task. In contrast to
progress bars, they only indicate that progress is taking place, and do not display the proportion of the
task that has been completed.</p>
+
+<media type="image" mime="image/png" src="figures/progress-spinner.png"/>
+
+<section id="when-to-use">
+<title>When to use</title>
+
+<p>A progress indication is generally needed whenever an operation takes more than around three seconds, and
is necessary to indicate that an operation is really taking place. Otherwise, a user will be left in doubt
whether an error has occurred.</p>
+
+<p>At the same time, progress indications are a potential source of distraction, especially when displayed
for short periods of time. If an operation takes less that 3 seconds, it is better to avoid using a progress
spinner, since animated elements that are shown for a very short amount of time can detract from the overall
user experience.</p>
+
+<p>Spinners do not graphically show the degree of progress through a task, and are often better-suited for
shorter operations. If the task is likely to take more than a minute, a <link xref="progress-bars">progress
bar</link> might be a better choice.</p>
+
+<p>The shape of progress spinners also affects their appropriateness for different situations. Since they
are effective at small sizes, spinners can be easily embedded in small user interface elements, like lists or
header bars. Likewise, their shape means that they can be effective when embedded within square or
rectangular containers. On the other hand, if vertical space is limited, a progress bar can be a better
fit.</p>
+
+</section>
+
+<section id="general-guidelines">
+<title>General guidelines</title>
+
+<list>
+<item><p>If an operation can vary in how long it takes, use a timeout to only show a progress spinner after
three seconds have elapsed. A progress indication is not needed for lengths of time below this.</p></item>
+<item><p>Place progress spinners close to or within the user interface elements they relate to. If a button
triggers a long-running operation, the spinner can be placed next to that button, for example. When loading
content, the spinner should be placed within the area where that content will appear.</p></item>
+<item><p>Generally, only one progress spinner should be displayed at once. Avoid showing a large number of
spinners simulatenously - this will often be visually overwhelming.</p></item>
+<item><p>A label can be shown next to a spinner if it is helpful to clarify the task which a spinner relates
to.</p></item>
+<item><p>If a spinner is displayed for a long time, a label can indicate both the identity of the task and
progress through it. This can take the form of a percentage, an indication of the time remaining or, or
progress through sub-components of the task (eg. modules downloaded, or pages exported).</p></item>
+</list>
+
+</section>
+</page>
diff --git a/hig3/C/ui-elements.page b/hig3/C/ui-elements.page
index e547576..c10b2e2 100644
--- a/hig3/C/ui-elements.page
+++ b/hig3/C/ui-elements.page
@@ -35,22 +35,24 @@
<tr>
<td><p><link xref="progress-bars">Progress bars</link></p></td>
<td><media type="image" mime="image/png" src="figures/progress-bars.png"/></td>
-<td><p><link xref="sliders">Sliders</link></p></td>
-<td><media type="image" mime="image/png" src="figures/sliders.png"/></td>
+<td><p><link xref="progress-spinners">Progress spinners</link></p></td>
+<td><media type="image" mime="image/png" src="figures/progress-spinner.png"/></td>
</tr>
<tr>
+<td><p><link xref="sliders">Sliders</link></p></td>
+<td><media type="image" mime="image/png" src="figures/sliders.png"/></td>
<td><p><link xref="switches">Switches</link></p></td>
<td><media type="image" mime="image/png" src="figures/switches.png"/></td>
-<td><p><link xref="radio-buttons">Radio buttons</link></p></td>
-<td><media type="image" mime="image/png" src="figures/radio-buttons.png"/></td>
</tr>
<tr>
+<td><p><link xref="radio-buttons">Radio buttons</link></p></td>
+<td><media type="image" mime="image/png" src="figures/radio-buttons.png"/></td>
<td><p><link xref="tabs">Tabs</link></p></td>
<td><media type="image" mime="image/png" src="figures/tabs.png"/></td>
-<td><p><link xref="text-fields">Text fields</link></p></td>
-<td><media type="image" mime="image/png" src="figures/text-fields.png"/></td>
</tr>
<tr>
+<td><p><link xref="text-fields">Text fields</link></p></td>
+<td><media type="image" mime="image/png" src="figures/text-fields.png"/></td>
<td><p><link xref="toolbars">Toolbars</link></p></td>
<td><media type="image" mime="image/png" src="figures/toolbar.png"/></td>
</tr>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
