/usr/share/help/sl/hig-book/index.docbook is in gnome-devel-docs 3.8.1-1.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112 2113 2114 2115 2116 2117 2118 2119 2120 2121 2122 2123 2124 2125 2126 2127 2128 2129 2130 2131 2132 2133 2134 2135 2136 2137 2138 2139 2140 2141 2142 2143 2144 2145 2146 2147 2148 2149 2150 2151 2152 2153 2154 2155 2156 2157 2158 2159 2160 2161 2162 2163 2164 2165 2166 2167 2168 2169 2170 2171 2172 2173 2174 2175 2176 2177 2178 2179 2180 2181 2182 2183 2184 2185 2186 2187 2188 2189 2190 2191 2192 2193 2194 2195 2196 2197 2198 2199 2200 2201 2202 2203 2204 2205 2206 2207 2208 2209 2210 2211 2212 2213 2214 2215 2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232 2233 2234 2235 2236 2237 2238 2239 2240 2241 2242 2243 2244 2245 2246 2247 2248 2249 2250 2251 2252 2253 2254 2255 2256 2257 2258 2259 2260 2261 2262 2263 2264 2265 2266 2267 2268 2269 2270 2271 2272 2273 2274 2275 2276 2277 2278 2279 2280 2281 2282 2283 2284 2285 2286 2287 2288 2289 2290 2291 2292 2293 2294 2295 2296 2297 2298 2299 2300 2301 2302 2303 2304 2305 2306 2307 2308 2309 2310 2311 2312 2313 2314 2315 2316 2317 2318 2319 2320 2321 2322 2323 2324 2325 2326 2327 2328 2329 2330 2331 2332 2333 2334 2335 2336 2337 2338 2339 2340 2341 2342 2343 2344 2345 2346 2347 2348 2349 2350 2351 2352 2353 2354 2355 2356 2357 2358 2359 2360 2361 2362 2363 2364 2365 2366 2367 2368 2369 2370 2371 2372 2373 2374 2375 2376 2377 2378 2379 2380 2381 2382 2383 2384 2385 2386 2387 2388 2389 2390 2391 2392 2393 2394 2395 2396 2397 2398 2399 2400 2401 2402 2403 2404 2405 2406 2407 2408 2409 2410 2411 2412 2413 2414 2415 2416 2417 2418 2419 2420 2421 2422 2423 2424 2425 2426 2427 2428 2429 2430 2431 2432 2433 2434 2435 2436 2437 2438 2439 2440 2441 2442 2443 2444 2445 2446 2447 2448 2449 2450 2451 2452 2453 2454 2455 2456 2457 2458 2459 2460 2461 2462 2463 2464 2465 2466 2467 2468 2469 2470 2471 2472 2473 2474 2475 2476 2477 2478 2479 2480 2481 2482 2483 2484 2485 2486 2487 2488 2489 2490 2491 2492 2493 2494 2495 2496 2497 2498 2499 2500 2501 2502 2503 2504 2505 2506 2507 2508 2509 2510 2511 2512 2513 2514 2515 2516 2517 2518 2519 2520 2521 2522 2523 2524 2525 2526 2527 2528 2529 2530 2531 2532 2533 2534 2535 2536 2537 2538 2539 2540 2541 2542 2543 2544 2545 2546 2547 2548 2549 2550 2551 2552 2553 2554 2555 2556 2557 2558 2559 2560 2561 2562 2563 2564 2565 2566 2567 2568 2569 2570 2571 2572 2573 2574 2575 2576 2577 2578 2579 2580 2581 2582 2583 2584 2585 2586 2587 2588 2589 2590 2591 2592 2593 2594 2595 2596 2597 2598 2599 2600 2601 2602 2603 2604 2605 2606 2607 2608 2609 2610 2611 2612 2613 2614 2615 2616 2617 2618 2619 2620 2621 2622 2623 2624 2625 2626 2627 2628 2629 2630 2631 2632 2633 2634 2635 2636 2637 2638 2639 2640 2641 2642 2643 2644 2645 2646 2647 2648 2649 2650 2651 2652 2653 2654 2655 2656 2657 2658 2659 2660 2661 2662 2663 2664 2665 2666 2667 2668 2669 2670 2671 2672 2673 2674 2675 2676 2677 2678 2679 2680 2681 2682 2683 2684 2685 2686 2687 2688 2689 2690 2691 2692 2693 2694 2695 2696 2697 2698 2699 2700 2701 2702 2703 2704 2705 2706 2707 2708 2709 2710 2711 2712 2713 2714 2715 2716 2717 2718 2719 2720 2721 2722 2723 2724 2725 2726 2727 2728 2729 2730 2731 2732 2733 2734 2735 2736 2737 2738 2739 2740 2741 2742 2743 2744 2745 2746 2747 2748 2749 2750 2751 2752 2753 2754 2755 2756 2757 2758 2759 2760 2761 2762 2763 2764 2765 2766 2767 2768 2769 2770 2771 2772 2773 2774 2775 2776 2777 2778 2779 2780 2781 2782 2783 2784 2785 2786 2787 2788 2789 2790 2791 2792 2793 2794 2795 2796 2797 2798 2799 2800 2801 2802 2803 2804 2805 2806 2807 2808 2809 2810 2811 2812 2813 2814 2815 2816 2817 2818 2819 2820 2821 2822 2823 2824 2825 2826 2827 2828 2829 2830 2831 2832 2833 2834 2835 2836 2837 2838 2839 2840 2841 2842 2843 2844 2845 2846 2847 2848 2849 2850 2851 2852 2853 2854 2855 2856 2857 2858 2859 2860 2861 2862 2863 2864 2865 2866 2867 2868 2869 2870 2871 2872 2873 2874 2875 2876 2877 2878 2879 2880 2881 2882 2883 2884 2885 2886 2887 2888 2889 2890 2891 2892 2893 2894 2895 2896 2897 2898 2899 2900 2901 2902 2903 2904 2905 2906 2907 2908 2909 2910 2911 2912 2913 2914 2915 2916 2917 2918 2919 2920 2921 2922 2923 2924 2925 2926 2927 2928 2929 2930 2931 2932 2933 2934 2935 2936 2937 2938 2939 2940 2941 2942 2943 2944 2945 2946 2947 2948 2949 2950 2951 2952 2953 2954 2955 2956 2957 2958 2959 2960 2961 2962 2963 2964 2965 2966 2967 2968 2969 2970 2971 2972 2973 2974 2975 2976 2977 2978 2979 2980 2981 2982 2983 2984 2985 2986 2987 2988 2989 2990 2991 2992 2993 2994 2995 2996 2997 2998 2999 3000 3001 3002 3003 3004 3005 3006 3007 3008 3009 3010 3011 3012 3013 3014 3015 3016 3017 3018 3019 3020 3021 3022 3023 3024 3025 3026 3027 3028 3029 3030 3031 3032 3033 3034 3035 3036 3037 3038 3039 3040 3041 3042 3043 3044 3045 3046 3047 3048 3049 3050 3051 3052 3053 3054 3055 3056 3057 3058 3059 3060 3061 3062 3063 3064 3065 3066 3067 3068 3069 3070 3071 3072 3073 3074 3075 3076 3077 3078 3079 3080 3081 3082 3083 3084 3085 3086 3087 3088 3089 3090 3091 3092 3093 3094 3095 3096 3097 3098 3099 3100 3101 3102 3103 3104 3105 3106 3107 3108 3109 3110 3111 3112 3113 3114 3115 3116 3117 3118 3119 3120 3121 3122 3123 3124 3125 3126 3127 3128 3129 3130 3131 3132 3133 3134 3135 3136 3137 3138 3139 3140 3141 3142 3143 3144 3145 3146 3147 3148 3149 3150 3151 3152 3153 3154 3155 3156 3157 3158 3159 3160 3161 3162 3163 3164 3165 3166 3167 3168 3169 3170 3171 3172 3173 3174 3175 3176 3177 3178 3179 3180 3181 3182 3183 3184 3185 3186 3187 3188 3189 3190 3191 3192 3193 3194 3195 3196 3197 3198 3199 3200 3201 3202 3203 3204 3205 3206 3207 3208 3209 3210 3211 3212 3213 3214 3215 3216 3217 3218 3219 3220 3221 3222 3223 3224 3225 3226 3227 3228 3229 3230 3231 3232 3233 3234 3235 3236 3237 3238 3239 3240 3241 3242 3243 3244 3245 3246 3247 3248 3249 3250 3251 3252 3253 3254 3255 3256 3257 3258 3259 3260 3261 3262 3263 3264 3265 3266 3267 3268 3269 3270 3271 3272 3273 3274 3275 3276 3277 3278 3279 3280 3281 3282 3283 3284 3285 3286 3287 3288 3289 3290 3291 3292 3293 3294 3295 3296 3297 3298 3299 3300 3301 3302 3303 3304 3305 3306 3307 3308 3309 3310 3311 3312 3313 3314 3315 3316 3317 3318 3319 3320 3321 3322 3323 3324 3325 3326 3327 3328 3329 3330 3331 3332 3333 3334 3335 3336 3337 3338 3339 3340 3341 3342 3343 3344 3345 3346 3347 3348 3349 3350 3351 3352 3353 3354 3355 3356 3357 3358 3359 3360 3361 3362 3363 3364 3365 3366 3367 3368 3369 3370 3371 3372 3373 3374 3375 3376 3377 3378 3379 3380 3381 3382 3383 3384 3385 3386 3387 3388 3389 3390 3391 3392 3393 3394 3395 3396 3397 3398 3399 3400 3401 3402 3403 3404 3405 3406 3407 3408 3409 3410 3411 3412 3413 3414 3415 3416 3417 3418 3419 3420 3421 3422 3423 3424 3425 3426 3427 3428 3429 3430 3431 3432 3433 3434 3435 3436 3437 3438 3439 3440 3441 3442 3443 3444 3445 3446 3447 3448 3449 3450 3451 3452 3453 3454 3455 3456 3457 3458 3459 3460 3461 3462 3463 3464 3465 3466 3467 3468 3469 3470 3471 3472 3473 3474 3475 3476 3477 3478 3479 3480 3481 3482 3483 3484 3485 3486 3487 3488 3489 3490 3491 3492 3493 3494 3495 3496 3497 3498 3499 3500 3501 3502 3503 3504 3505 3506 3507 3508 3509 3510 3511 3512 3513 3514 3515 3516 3517 3518 3519 3520 3521 3522 3523 3524 3525 3526 3527 3528 3529 3530 3531 3532 3533 3534 3535 3536 3537 3538 3539 3540 3541 3542 3543 3544 3545 3546 3547 3548 3549 3550 3551 3552 3553 3554 3555 3556 3557 3558 3559 3560 3561 3562 3563 3564 3565 3566 3567 3568 3569 3570 3571 3572 3573 3574 3575 3576 3577 3578 3579 3580 3581 3582 3583 3584 3585 3586 3587 3588 3589 3590 3591 3592 3593 3594 3595 3596 3597 3598 3599 3600 3601 3602 3603 3604 3605 3606 3607 3608 3609 3610 3611 3612 3613 3614 3615 3616 3617 3618 3619 3620 3621 3622 3623 3624 3625 3626 3627 3628 3629 3630 3631 3632 3633 3634 3635 3636 3637 3638 3639 3640 3641 3642 3643 3644 3645 3646 3647 3648 3649 3650 3651 3652 3653 3654 3655 3656 3657 3658 3659 3660 3661 3662 3663 3664 3665 3666 3667 3668 3669 3670 3671 3672 3673 3674 3675 3676 3677 3678 3679 3680 3681 3682 3683 3684 3685 3686 3687 3688 3689 3690 3691 3692 3693 3694 3695 3696 3697 3698 3699 3700 3701 3702 3703 3704 3705 3706 3707 3708 3709 3710 3711 3712 3713 3714 3715 3716 3717 3718 3719 3720 3721 3722 3723 3724 3725 3726 3727 3728 3729 3730 3731 3732 3733 3734 3735 3736 3737 3738 3739 3740 3741 3742 3743 3744 3745 3746 3747 3748 3749 3750 3751 3752 3753 3754 3755 3756 3757 3758 3759 3760 3761 3762 3763 3764 3765 3766 3767 3768 3769 3770 3771 3772 3773 3774 3775 3776 3777 3778 3779 3780 3781 3782 3783 3784 3785 3786 3787 3788 3789 3790 3791 3792 3793 3794 3795 3796 3797 3798 3799 3800 3801 3802 3803 3804 3805 3806 3807 3808 3809 3810 3811 3812 3813 3814 3815 3816 3817 3818 3819 3820 3821 3822 3823 3824 3825 3826 3827 3828 3829 3830 3831 3832 3833 3834 3835 3836 3837 3838 3839 3840 3841 3842 3843 3844 3845 3846 3847 3848 3849 3850 3851 3852 3853 3854 3855 3856 3857 3858 3859 3860 3861 3862 3863 3864 3865 3866 3867 3868 3869 3870 3871 3872 3873 3874 3875 3876 3877 3878 3879 3880 3881 3882 3883 3884 3885 3886 3887 3888 3889 3890 3891 3892 3893 3894 3895 3896 3897 3898 3899 3900 3901 3902 3903 3904 3905 3906 3907 3908 3909 3910 3911 3912 3913 3914 3915 3916 3917 3918 3919 3920 3921 3922 3923 3924 3925 3926 3927 3928 3929 3930 3931 3932 3933 3934 3935 3936 3937 3938 3939 3940 3941 3942 3943 3944 3945 3946 3947 3948 3949 3950 3951 3952 3953 3954 3955 3956 3957 3958 3959 3960 3961 3962 3963 3964 3965 3966 3967 3968 3969 3970 3971 3972 3973 3974 3975 3976 3977 3978 3979 3980 3981 3982 3983 3984 3985 3986 3987 3988 3989 3990 3991 3992 3993 3994 3995 3996 3997 3998 3999 4000 4001 4002 4003 4004 4005 4006 4007 4008 4009 4010 4011 4012 4013 4014 4015 4016 4017 4018 4019 4020 4021 4022 4023 4024 4025 4026 4027 4028 4029 4030 4031 4032 4033 4034 4035 4036 4037 4038 4039 4040 4041 4042 4043 4044 4045 4046 4047 4048 4049 4050 4051 4052 4053 4054 4055 4056 4057 4058 4059 4060 4061 4062 4063 4064 4065 4066 4067 4068 4069 4070 4071 4072 4073 4074 4075 4076 4077 4078 4079 4080 4081 4082 4083 4084 4085 4086 4087 4088 4089 4090 4091 4092 4093 4094 4095 4096 4097 4098 4099 4100 4101 4102 4103 4104 4105 4106 4107 4108 4109 4110 4111 4112 4113 4114 4115 4116 4117 4118 4119 4120 4121 4122 4123 4124 4125 4126 4127 4128 4129 4130 4131 4132 4133 4134 4135 4136 4137 4138 4139 4140 4141 4142 4143 4144 4145 4146 4147 4148 4149 4150 4151 4152 4153 4154 4155 4156 4157 4158 4159 4160 4161 4162 4163 4164 4165 4166 4167 4168 4169 4170 4171 4172 4173 4174 4175 4176 4177 4178 4179 4180 4181 4182 4183 4184 4185 4186 4187 4188 4189 4190 4191 4192 4193 4194 4195 4196 4197 4198 4199 4200 4201 4202 4203 4204 4205 4206 4207 4208 4209 4210 4211 4212 4213 4214 4215 4216 4217 4218 4219 4220 4221 4222 4223 4224 4225 4226 4227 4228 4229 4230 4231 4232 4233 4234 4235 4236 4237 4238 4239 4240 4241 4242 4243 4244 4245 4246 4247 4248 4249 4250 4251 4252 4253 4254 4255 4256 4257 4258 4259 4260 4261 4262 4263 4264 4265 4266 4267 4268 4269 4270 4271 4272 4273 4274 4275 4276 4277 4278 4279 4280 4281 4282 4283 4284 4285 4286 4287 4288 4289 4290 4291 4292 4293 4294 4295 4296 4297 4298 4299 4300 4301 4302 4303 4304 4305 4306 4307 4308 4309 4310 4311 4312 4313 4314 4315 4316 4317 4318 4319 4320 4321 4322 4323 4324 4325 4326 4327 4328 4329 4330 4331 4332 4333 4334 4335 4336 4337 4338 4339 4340 4341 4342 4343 4344 4345 4346 4347 4348 4349 4350 4351 4352 4353 4354 4355 4356 4357 4358 4359 4360 4361 4362 4363 4364 4365 4366 4367 4368 4369 4370 4371 4372 4373 4374 4375 4376 4377 4378 4379 4380 4381 4382 4383 4384 4385 4386 4387 4388 4389 4390 4391 4392 4393 4394 4395 4396 4397 4398 4399 4400 4401 4402 4403 4404 4405 4406 4407 4408 4409 4410 4411 4412 4413 4414 4415 4416 4417 4418 4419 4420 4421 4422 4423 4424 4425 4426 4427 4428 4429 4430 4431 4432 4433 4434 4435 4436 4437 4438 4439 4440 4441 4442 4443 4444 4445 4446 4447 4448 4449 4450 4451 4452 4453 4454 4455 4456 4457 4458 4459 4460 4461 4462 4463 4464 4465 4466 4467 4468 4469 4470 4471 4472 4473 4474 4475 4476 4477 4478 4479 4480 4481 4482 4483 4484 4485 4486 4487 4488 4489 4490 4491 4492 4493 4494 4495 4496 4497 4498 4499 4500 4501 4502 4503 4504 4505 4506 4507 4508 4509 4510 4511 4512 4513 4514 4515 4516 4517 4518 4519 4520 4521 4522 4523 4524 4525 4526 4527 4528 4529 4530 4531 4532 4533 4534 4535 4536 4537 4538 4539 4540 4541 4542 4543 4544 4545 4546 4547 4548 4549 4550 4551 4552 4553 4554 4555 4556 4557 4558 4559 4560 4561 4562 4563 4564 4565 4566 4567 4568 4569 4570 4571 4572 4573 4574 4575 4576 4577 4578 4579 4580 4581 4582 4583 4584 4585 4586 4587 4588 4589 4590 4591 4592 4593 4594 4595 4596 4597 4598 4599 4600 4601 4602 4603 4604 4605 4606 4607 4608 4609 4610 4611 4612 4613 4614 4615 4616 4617 4618 4619 4620 4621 4622 4623 4624 4625 4626 4627 4628 4629 4630 4631 4632 4633 4634 4635 4636 4637 4638 4639 4640 4641 4642 4643 4644 4645 4646 4647 4648 4649 4650 4651 4652 4653 4654 4655 4656 4657 4658 4659 4660 4661 4662 4663 4664 4665 4666 4667 4668 4669 4670 4671 4672 4673 4674 4675 4676 4677 4678 4679 4680 4681 4682 4683 4684 4685 4686 4687 4688 4689 4690 4691 4692 4693 4694 4695 4696 4697 4698 4699 4700 4701 4702 4703 4704 4705 4706 4707 4708 4709 4710 4711 4712 4713 4714 4715 4716 4717 4718 4719 4720 4721 4722 4723 4724 4725 4726 4727 4728 4729 4730 4731 4732 4733 4734 4735 4736 4737 4738 4739 4740 4741 4742 4743 4744 4745 4746 4747 4748 4749 4750 4751 4752 4753 4754 4755 4756 4757 4758 4759 4760 4761 4762 4763 4764 4765 4766 4767 4768 4769 4770 4771 4772 4773 4774 4775 4776 4777 4778 4779 4780 4781 4782 4783 4784 4785 4786 4787 4788 4789 4790 4791 4792 4793 4794 4795 4796 4797 4798 4799 4800 4801 4802 4803 4804 4805 4806 4807 4808 4809 4810 4811 4812 4813 4814 4815 4816 4817 4818 4819 4820 4821 4822 4823 4824 4825 4826 4827 4828 4829 4830 4831 4832 4833 4834 4835 4836 4837 4838 4839 4840 4841 4842 4843 4844 4845 4846 4847 4848 4849 4850 4851 4852 4853 4854 4855 4856 4857 4858 4859 4860 4861 4862 4863 4864 4865 4866 4867 4868 4869 4870 4871 4872 4873 4874 4875 4876 4877 4878 4879 4880 4881 4882 4883 4884 4885 4886 4887 4888 4889 4890 4891 4892 4893 4894 4895 4896 4897 4898 4899 4900 4901 4902 4903 4904 4905 4906 4907 4908 4909 4910 4911 4912 4913 4914 4915 4916 4917 4918 4919 4920 4921 4922 4923 4924 4925 4926 4927 4928 4929 4930 4931 4932 4933 4934 4935 4936 4937 4938 4939 4940 4941 4942 4943 4944 4945 4946 4947 4948 4949 4950 4951 4952 4953 4954 4955 4956 4957 4958 4959 4960 4961 4962 4963 4964 4965 4966 4967 4968 4969 4970 4971 4972 4973 4974 4975 4976 4977 4978 4979 4980 4981 4982 4983 4984 4985 4986 4987 4988 4989 4990 4991 4992 4993 4994 4995 4996 4997 4998 4999 5000 5001 5002 5003 5004 5005 5006 5007 5008 5009 5010 5011 5012 5013 5014 5015 5016 5017 5018 5019 5020 5021 5022 5023 5024 5025 5026 5027 5028 5029 5030 5031 5032 5033 5034 5035 5036 5037 5038 5039 5040 5041 5042 5043 5044 5045 5046 5047 5048 5049 5050 5051 5052 5053 5054 5055 5056 5057 5058 5059 5060 5061 5062 5063 5064 5065 5066 5067 5068 5069 5070 5071 5072 5073 5074 5075 5076 5077 5078 5079 5080 5081 5082 5083 5084 5085 5086 5087 5088 5089 5090 5091 5092 5093 5094 5095 5096 5097 5098 5099 5100 5101 5102 5103 5104 5105 5106 5107 5108 5109 5110 5111 5112 5113 5114 5115 5116 5117 5118 5119 5120 5121 5122 5123 5124 5125 5126 5127 5128 5129 5130 5131 5132 5133 5134 5135 5136 5137 5138 5139 5140 5141 5142 5143 5144 5145 5146 5147 5148 5149 5150 5151 5152 5153 5154 5155 5156 5157 5158 5159 5160 5161 5162 5163 5164 5165 5166 5167 5168 5169 5170 5171 5172 5173 5174 5175 5176 5177 5178 5179 5180 5181 5182 5183 5184 5185 5186 5187 5188 5189 5190 5191 5192 5193 5194 5195 5196 5197 5198 5199 5200 5201 5202 5203 5204 5205 5206 5207 5208 5209 5210 5211 5212 5213 5214 5215 5216 5217 5218 5219 5220 5221 5222 5223 5224 5225 5226 5227 5228 5229 5230 5231 5232 5233 5234 5235 5236 5237 5238 5239 5240 5241 5242 5243 5244 5245 5246 5247 5248 5249 5250 5251 5252 5253 5254 5255 5256 5257 5258 5259 5260 5261 5262 5263 5264 5265 5266 5267 5268 5269 5270 5271 5272 5273 5274 5275 5276 5277 5278 5279 5280 5281 5282 5283 5284 5285 5286 5287 5288 5289 5290 5291 5292 5293 5294 5295 5296 5297 5298 5299 5300 5301 5302 5303 5304 5305 5306 5307 5308 5309 5310 5311 5312 5313 5314 5315 5316 5317 5318 5319 5320 5321 5322 5323 5324 5325 5326 5327 5328 5329 5330 5331 5332 5333 5334 5335 5336 5337 5338 5339 5340 5341 5342 5343 5344 5345 5346 5347 5348 5349 5350 5351 5352 5353 5354 5355 5356 5357 5358 5359 5360 5361 5362 5363 5364 5365 5366 5367 5368 5369 5370 5371 5372 5373 5374 5375 5376 5377 5378 5379 5380 5381 5382 5383 5384 5385 5386 5387 5388 5389 5390 5391 5392 5393 5394 5395 5396 5397 5398 5399 5400 5401 5402 5403 5404 5405 5406 5407 5408 5409 5410 5411 5412 5413 5414 5415 5416 5417 5418 5419 5420 5421 5422 5423 5424 5425 5426 5427 5428 5429 5430 5431 5432 5433 5434 5435 5436 5437 5438 5439 5440 5441 5442 5443 5444 5445 5446 5447 5448 5449 5450 5451 5452 5453 5454 5455 5456 5457 5458 5459 5460 5461 5462 5463 5464 5465 5466 5467 5468 5469 5470 5471 5472 5473 5474 5475 5476 5477 5478 5479 5480 5481 5482 5483 5484 5485 5486 5487 5488 5489 5490 5491 5492 5493 5494 5495 5496 5497 5498 5499 5500 5501 5502 5503 5504 5505 5506 5507 5508 5509 5510 5511 5512 5513 5514 5515 5516 5517 5518 5519 5520 5521 5522 5523 5524 5525 5526 5527 5528 5529 5530 5531 5532 5533 5534 5535 5536 5537 5538 5539 5540 5541 5542 5543 5544 5545 5546 5547 5548 5549 5550 5551 5552 5553 5554 5555 5556 5557 5558 5559 5560 5561 5562 5563 5564 5565 5566 5567 5568 5569 5570 5571 5572 5573 5574 5575 5576 5577 5578 5579 5580 5581 5582 5583 5584 5585 5586 5587 5588 5589 5590 5591 5592 5593 5594 5595 5596 5597 5598 5599 5600 5601 5602 5603 5604 5605 5606 5607 5608 5609 5610 5611 5612 5613 5614 5615 5616 5617 5618 5619 5620 5621 5622 5623 5624 5625 5626 5627 5628 5629 5630 5631 5632 5633 5634 5635 5636 5637 5638 5639 5640 5641 5642 5643 5644 5645 5646 5647 5648 5649 5650 5651 5652 5653 5654 5655 5656 5657 5658 5659 5660 5661 5662 5663 5664 5665 5666 5667 5668 5669 5670 5671 5672 5673 5674 5675 5676 5677 5678 5679 5680 5681 5682 5683 5684 5685 5686 5687 5688 5689 5690 5691 5692 5693 5694 5695 5696 5697 5698 5699 5700 5701 5702 5703 5704 5705 5706 5707 5708 5709 5710 5711 5712 5713 5714 5715 5716 5717 5718 5719 5720 5721 5722 5723 5724 5725 5726 5727 5728 5729 5730 5731 5732 5733 5734 5735 5736 5737 5738 5739 5740 5741 5742 5743 5744 5745 5746 5747 5748 5749 5750 5751 5752 5753 5754 5755 5756 5757 5758 5759 5760 5761 5762 5763 5764 5765 5766 5767 5768 5769 5770 5771 5772 5773 5774 5775 5776 5777 5778 5779 5780 5781 5782 5783 5784 5785 5786 5787 5788 5789 5790 5791 5792 5793 5794 5795 5796 5797 5798 5799 5800 5801 5802 5803 5804 5805 5806 5807 5808 5809 5810 5811 5812 5813 5814 5815 5816 5817 5818 5819 5820 5821 5822 5823 5824 5825 5826 5827 5828 5829 5830 5831 5832 5833 5834 5835 5836 5837 5838 5839 5840 5841 5842 5843 5844 5845 5846 5847 5848 5849 5850 5851 5852 5853 5854 5855 5856 5857 5858 5859 5860 5861 5862 5863 5864 5865 5866 5867 5868 5869 5870 5871 5872 5873 5874 5875 5876 5877 5878 5879 5880 5881 5882 5883 5884 5885 5886 5887 5888 5889 5890 5891 5892 5893 5894 5895 5896 5897 5898 5899 5900 5901 5902 5903 5904 5905 5906 5907 5908 5909 5910 5911 5912 5913 5914 5915 5916 5917 5918 5919 5920 5921 5922 5923 5924 5925 5926 5927 5928 5929 5930 5931 5932 5933 5934 5935 5936 5937 5938 5939 5940 5941 5942 5943 5944 5945 5946 5947 5948 5949 5950 5951 5952 5953 5954 5955 5956 5957 5958 5959 5960 5961 5962 5963 5964 5965 5966 5967 5968 5969 5970 5971 5972 5973 5974 5975 5976 5977 5978 5979 5980 5981 5982 5983 5984 5985 5986 5987 5988 5989 5990 5991 5992 5993 5994 5995 5996 5997 5998 5999 6000 6001 6002 6003 6004 6005 6006 6007 6008 6009 6010 6011 6012 6013 6014 6015 6016 6017 6018 6019 6020 6021 6022 6023 6024 6025 6026 6027 6028 6029 6030 6031 6032 6033 6034 6035 6036 6037 6038 6039 6040 6041 6042 6043 6044 6045 6046 6047 6048 6049 6050 6051 6052 6053 6054 6055 6056 6057 6058 6059 6060 6061 6062 6063 6064 6065 6066 6067 6068 6069 6070 6071 6072 6073 6074 6075 6076 6077 6078 6079 6080 6081 6082 6083 6084 6085 6086 6087 6088 6089 6090 6091 6092 6093 6094 6095 6096 6097 6098 6099 6100 6101 6102 6103 6104 6105 6106 6107 6108 6109 6110 6111 6112 6113 6114 6115 6116 6117 6118 6119 6120 6121 6122 6123 6124 6125 6126 6127 6128 6129 6130 6131 6132 6133 6134 6135 6136 6137 6138 6139 6140 6141 6142 6143 6144 6145 6146 6147 6148 6149 6150 6151 6152 6153 6154 6155 6156 6157 6158 6159 6160 6161 6162 6163 6164 6165 6166 6167 6168 6169 6170 6171 6172 6173 6174 6175 6176 6177 6178 6179 6180 6181 6182 6183 6184 6185 6186 6187 6188 6189 6190 6191 6192 6193 6194 6195 6196 6197 6198 6199 6200 6201 6202 6203 6204 6205 6206 6207 6208 6209 6210 6211 6212 6213 6214 6215 6216 6217 6218 6219 6220 6221 6222 6223 6224 6225 6226 6227 6228 6229 6230 6231 6232 6233 6234 6235 6236 6237 6238 6239 6240 6241 6242 6243 6244 6245 6246 6247 6248 6249 6250 6251 6252 6253 6254 6255 6256 6257 6258 6259 6260 6261 6262 6263 6264 6265 6266 6267 6268 6269 6270 6271 6272 6273 6274 6275 6276 6277 6278 6279 6280 6281 6282 6283 6284 6285 6286 6287 6288 6289 6290 6291 6292 6293 6294 6295 6296 6297 6298 6299 6300 6301 6302 6303 6304 6305 6306 6307 6308 6309 6310 6311 6312 6313 6314 6315 6316 6317 6318 6319 6320 6321 6322 6323 6324 6325 6326 6327 6328 6329 6330 6331 6332 6333 6334 6335 6336 6337 6338 6339 6340 6341 6342 6343 6344 6345 6346 6347 6348 6349 6350 6351 6352 6353 6354 6355 6356 6357 6358 6359 6360 6361 6362 6363 6364 6365 6366 6367 6368 6369 6370 6371 6372 6373 6374 6375 6376 6377 6378 6379 6380 6381 6382 6383 6384 6385 6386 6387 6388 6389 6390 6391 6392 6393 6394 6395 6396 6397 6398 6399 6400 6401 6402 6403 6404 6405 6406 6407 6408 6409 6410 6411 6412 6413 6414 6415 6416 6417 6418 6419 6420 6421 6422 6423 6424 6425 6426 6427 6428 6429 6430 6431 6432 6433 6434 6435 6436 6437 6438 6439 6440 6441 6442 6443 6444 6445 6446 6447 6448 6449 6450 6451 6452 6453 6454 6455 6456 6457 6458 6459 6460 6461 6462 6463 6464 6465 6466 6467 6468 6469 6470 6471 6472 6473 6474 6475 6476 6477 6478 6479 6480 6481 6482 6483 6484 6485 6486 6487 6488 6489 6490 6491 6492 6493 6494 6495 6496 6497 6498 6499 6500 6501 6502 6503 6504 6505 6506 6507 6508 6509 6510 6511 6512 6513 6514 6515 6516 6517 6518 6519 6520 6521 6522 6523 6524 6525 6526 6527 6528 6529 6530 6531 6532 6533 6534 6535 6536 6537 6538 6539 6540 6541 6542 6543 6544 6545 6546 6547 6548 6549 6550 6551 6552 6553 6554 6555 6556 6557 6558 6559 6560 6561 6562 6563 6564 6565 6566 6567 6568 6569 6570 6571 6572 6573 6574 6575 6576 6577 6578 6579 6580 6581 6582 6583 6584 6585 6586 6587 6588 6589 6590 6591 6592 6593 6594 6595 6596 6597 6598 6599 6600 6601 6602 6603 6604 6605 6606 6607 6608 6609 6610 6611 6612 6613 6614 6615 6616 6617 6618 6619 6620 6621 6622 6623 6624 6625 6626 6627 6628 6629 6630 6631 6632 6633 6634 6635 6636 6637 6638 6639 6640 6641 6642 6643 6644 6645 6646 6647 6648 6649 6650 6651 6652 6653 6654 6655 6656 6657 6658 6659 6660 6661 6662 6663 6664 6665 6666 6667 6668 6669 6670 6671 6672 6673 6674 6675 6676 6677 6678 6679 6680 6681 6682 6683 6684 6685 6686 6687 6688 6689 6690 6691 6692 6693 6694 6695 6696 6697 6698 6699 6700 6701 6702 6703 6704 6705 6706 6707 6708 6709 6710 6711 6712 6713 6714 6715 6716 6717 6718 6719 6720 6721 6722 6723 6724 6725 6726 6727 6728 6729 6730 6731 6732 6733 6734 6735 6736 6737 6738 6739 6740 6741 6742 6743 6744 6745 6746 6747 6748 6749 6750 6751 6752 6753 6754 6755 6756 6757 6758 6759 6760 6761 6762 6763 6764 6765 6766 6767 6768 6769 6770 6771 6772 6773 6774 6775 6776 6777 6778 6779 6780 6781 6782 6783 6784 6785 6786 6787 6788 6789 6790 6791 6792 6793 6794 6795 6796 6797 6798 6799 6800 6801 6802 6803 6804 6805 6806 6807 6808 6809 6810 6811 6812 6813 6814 6815 6816 6817 6818 6819 6820 6821 6822 6823 6824 6825 6826 6827 6828 6829 6830 6831 6832 6833 6834 6835 6836 6837 6838 6839 6840 6841 6842 6843 6844 6845 6846 6847 6848 6849 6850 6851 6852 6853 6854 6855 6856 6857 6858 6859 6860 6861 6862 6863 6864 6865 6866 6867 6868 6869 6870 6871 6872 6873 6874 6875 6876 6877 6878 6879 6880 6881 6882 6883 6884 6885 6886 6887 6888 6889 6890 6891 6892 6893 6894 6895 6896 6897 6898 6899 6900 6901 6902 6903 6904 6905 6906 6907 6908 6909 6910 6911 6912 6913 6914 6915 6916 6917 6918 6919 6920 6921 6922 6923 6924 6925 6926 6927 6928 6929 6930 6931 6932 6933 6934 6935 6936 6937 6938 6939 6940 6941 6942 6943 6944 6945 6946 6947 6948 6949 6950 6951 6952 6953 6954 6955 6956 6957 6958 6959 6960 6961 6962 6963 6964 6965 6966 6967 6968 6969 6970 6971 6972 6973 6974 6975 6976 6977 6978 6979 6980 6981 6982 6983 6984 6985 6986 6987 6988 6989 6990 6991 6992 6993 6994 6995 6996 6997 6998 6999 7000 7001 7002 7003 7004 7005 7006 7007 7008 7009 7010 7011 7012 7013 7014 7015 7016 7017 7018 7019 7020 7021 7022 7023 7024 7025 7026 7027 7028 7029 7030 7031 7032 7033 7034 7035 7036 7037 7038 7039 7040 7041 7042 7043 7044 7045 7046 7047 7048 7049 7050 7051 7052 7053 7054 7055 7056 7057 7058 7059 7060 7061 7062 7063 7064 7065 7066 7067 7068 7069 7070 7071 7072 7073 7074 7075 7076 7077 7078 7079 7080 7081 7082 7083 7084 7085 7086 7087 7088 7089 7090 7091 7092 7093 7094 7095 7096 7097 7098 7099 7100 7101 7102 7103 7104 7105 7106 7107 7108 7109 7110 7111 7112 7113 7114 7115 7116 7117 7118 7119 7120 7121 7122 7123 7124 7125 7126 7127 7128 7129 7130 7131 7132 7133 7134 7135 7136 7137 7138 7139 7140 7141 7142 7143 7144 7145 7146 7147 7148 7149 7150 7151 7152 7153 7154 7155 7156 7157 7158 7159 7160 7161 7162 7163 7164 7165 7166 7167 7168 7169 7170 7171 7172 7173 7174 7175 7176 7177 7178 7179 7180 7181 7182 7183 7184 7185 7186 7187 7188 7189 7190 7191 7192 7193 7194 7195 7196 7197 7198 7199 7200 7201 7202 7203 7204 7205 7206 7207 7208 7209 7210 7211 7212 7213 7214 7215 7216 7217 7218 7219 7220 7221 7222 7223 7224 7225 7226 7227 7228 7229 7230 7231 7232 7233 7234 7235 7236 7237 7238 7239 7240 7241 7242 7243 7244 7245 7246 7247 7248 7249 7250 7251 7252 7253 7254 7255 7256 7257 7258 7259 7260 7261 7262 7263 7264 7265 7266 7267 7268 7269 7270 7271 7272 7273 7274 7275 7276 7277 7278 7279 7280 7281 7282 7283 7284 7285 7286 7287 7288 7289 7290 7291 7292 7293 7294 7295 7296 7297 7298 7299 7300 7301 7302 7303 7304 7305 7306 7307 7308 7309 7310 7311 7312 7313 7314 7315 7316 7317 7318 7319 7320 7321 7322 7323 7324 7325 7326 7327 7328 7329 7330 7331 7332 7333 7334 7335 7336 7337 7338 7339 7340 7341 7342 7343 7344 7345 7346 7347 7348 7349 7350 7351 7352 7353 7354 7355 7356 7357 7358 7359 7360 7361 7362 7363 7364 7365 7366 7367 7368 7369 7370 7371 7372 7373 7374 7375 7376 7377 7378 7379 7380 7381 7382 7383 7384 7385 7386 7387 7388 7389 7390 7391 7392 7393 7394 7395 7396 7397 7398 7399 7400 7401 7402 7403 7404 7405 7406 7407 7408 7409 7410 7411 7412 7413 7414 7415 7416 7417 7418 7419 7420 7421 7422 7423 7424 7425 7426 7427 7428 7429 7430 7431 7432 7433 7434 7435 7436 7437 7438 7439 7440 7441 7442 7443 7444 7445 7446 7447 7448 7449 7450 7451 7452 7453 7454 7455 7456 7457 7458 7459 7460 7461 7462 7463 7464 7465 7466 7467 7468 7469 7470 7471 7472 7473 7474 7475 7476 7477 7478 7479 7480 7481 7482 7483 7484 7485 7486 7487 7488 7489 7490 7491 7492 7493 7494 7495 7496 7497 7498 7499 7500 7501 7502 7503 7504 7505 7506 7507 7508 7509 7510 7511 7512 7513 7514 7515 7516 7517 7518 7519 7520 7521 7522 7523 7524 7525 7526 7527 7528 7529 7530 7531 7532 7533 7534 7535 7536 7537 7538 7539 7540 7541 7542 7543 7544 7545 7546 7547 7548 7549 7550 7551 7552 7553 7554 7555 7556 7557 7558 7559 7560 7561 7562 7563 7564 7565 7566 7567 7568 7569 7570 7571 7572 7573 7574 7575 7576 7577 7578 7579 7580 7581 7582 7583 7584 7585 7586 7587 7588 7589 7590 7591 7592 7593 7594 7595 7596 7597 7598 7599 7600 7601 7602 7603 7604 7605 7606 7607 7608 7609 7610 7611 7612 7613 7614 7615 7616 7617 7618 7619 7620 7621 7622 7623 7624 7625 7626 7627 7628 7629 7630 7631 7632 7633 7634 7635 7636 7637 7638 7639 7640 7641 7642 7643 7644 7645 7646 7647 7648 7649 7650 7651 7652 7653 7654 7655 7656 7657 7658 7659 7660 7661 7662 7663 7664 7665 7666 7667 7668 7669 7670 7671 7672 7673 7674 7675 7676 7677 7678 7679 7680 7681 7682 7683 7684 7685 7686 7687 7688 7689 7690 7691 7692 7693 7694 7695 7696 7697 7698 7699 7700 7701 7702 7703 7704 7705 7706 7707 7708 7709 7710 7711 7712 7713 7714 7715 7716 7717 7718 7719 7720 7721 7722 7723 7724 7725 7726 7727 7728 7729 7730 7731 7732 7733 7734 7735 7736 7737 7738 7739 7740 7741 7742 7743 7744 7745 7746 7747 7748 7749 7750 7751 7752 7753 7754 7755 7756 7757 7758 7759 7760 7761 7762 7763 7764 7765 7766 7767 7768 7769 7770 7771 7772 7773 7774 7775 7776 7777 7778 7779 7780 7781 7782 7783 7784 7785 7786 7787 7788 7789 7790 7791 7792 7793 7794 7795 7796 7797 7798 7799 7800 7801 7802 7803 7804 7805 7806 7807 7808 7809 7810 7811 7812 7813 7814 7815 7816 7817 7818 7819 7820 7821 7822 7823 7824 7825 7826 7827 7828 7829 7830 7831 7832 7833 7834 7835 7836 7837 7838 7839 7840 7841 7842 7843 7844 7845 7846 7847 7848 7849 7850 7851 7852 7853 7854 7855 7856 7857 7858 7859 7860 7861 7862 7863 7864 7865 7866 7867 7868 7869 7870 7871 7872 7873 7874 7875 7876 7877 7878 7879 7880 7881 7882 7883 7884 7885 7886 7887 7888 7889 7890 7891 7892 7893 7894 7895 7896 7897 7898 7899 7900 7901 7902 7903 7904 7905 7906 7907 7908 7909 7910 7911 7912 7913 7914 7915 7916 7917 7918 7919 7920 7921 7922 7923 7924 7925 7926 7927 7928 7929 7930 7931 7932 7933 7934 7935 7936 7937 7938 7939 7940 7941 7942 7943 7944 7945 7946 7947 7948 7949 7950 7951 7952 7953 7954 7955 7956 7957 7958 7959 7960 7961 7962 7963 7964 7965 7966 7967 7968 7969 7970 7971 7972 7973 7974 7975 7976 7977 7978 7979 7980 7981 7982 7983 7984 7985 7986 7987 7988 7989 7990 7991 7992 7993 7994 7995 7996 7997 7998 7999 8000 8001 8002 8003 8004 8005 8006 8007 8008 8009 8010 8011 8012 8013 8014 8015 8016 8017 8018 8019 8020 8021 8022 8023 8024 8025 8026 8027 8028 8029 8030 8031 8032 8033 8034 8035 8036 8037 8038 8039 8040 8041 8042 8043 8044 8045 8046 8047 8048 8049 8050 8051 8052 8053 8054 8055 8056 8057 8058 8059 8060 8061 8062 8063 8064 8065 8066 8067 8068 8069 8070 8071 8072 8073 8074 8075 8076 8077 8078 8079 8080 8081 8082 8083 8084 8085 8086 8087 8088 8089 8090 8091 8092 8093 8094 8095 8096 8097 8098 8099 8100 8101 8102 8103 8104 8105 8106 8107 8108 8109 8110 8111 8112 8113 8114 8115 8116 8117 8118 8119 8120 8121 8122 8123 8124 8125 8126 8127 8128 8129 8130 8131 8132 8133 8134 8135 8136 8137 8138 8139 8140 8141 8142 8143 8144 8145 8146 8147 8148 8149 8150 8151 8152 8153 8154 8155 8156 8157 8158 8159 8160 8161 8162 8163 8164 8165 8166 8167 8168 8169 8170 8171 8172 8173 8174 8175 8176 8177 8178 8179 8180 8181 8182 8183 8184 8185 8186 8187 8188 8189 8190 8191 8192 8193 8194 8195 8196 8197 8198 8199 8200 8201 8202 8203 8204 8205 8206 8207 8208 8209 8210 8211 8212 8213 8214 8215 8216 8217 8218 8219 8220 8221 8222 8223 8224 8225 8226 8227 8228 8229 8230 8231 8232 8233 8234 8235 8236 8237 8238 8239 8240 8241 8242 8243 8244 8245 8246 8247 8248 8249 8250 8251 8252 8253 8254 8255 8256 8257 8258 8259 8260 8261 8262 8263 8264 8265 8266 8267 8268 8269 8270 8271 8272 8273 8274 8275 8276 8277 8278 8279 8280 8281 8282 8283 8284 8285 8286 8287 8288 8289 8290 8291 8292 8293 8294 8295 8296 8297 8298 8299 8300 8301 8302 8303 8304 8305 8306 8307 8308 8309 8310 8311 8312 8313 8314 8315 8316 8317 8318 8319 8320 8321 8322 8323 8324 8325 8326 8327 8328 8329 8330 8331 8332 8333 8334 8335 8336 8337 8338 8339 8340 8341 8342 8343 8344 8345 8346 8347 8348 8349 8350 8351 8352 8353 8354 8355 8356 8357 8358 8359 8360 8361 8362 8363 8364 8365 8366 8367 8368 8369 8370 8371 8372 8373 8374 8375 8376 8377 8378 8379 8380 8381 8382 8383 8384 8385 8386 8387 8388 8389 8390 8391 8392 8393 8394 8395 8396 8397 8398 8399 8400 8401 8402 8403 8404 8405 8406 8407 8408 8409 8410 8411 8412 8413 8414 8415 8416 8417 8418 8419 8420 8421 8422 8423 8424 8425 8426 8427 8428 8429 8430 8431 8432 8433 8434 8435 8436 8437 8438 8439 8440 8441 8442 8443 8444 8445 8446 8447 8448 8449 8450 8451 8452 8453 8454 8455 8456 8457 8458 8459 8460 8461 8462 8463 8464 8465 8466 8467 8468 8469 8470 8471 8472 8473 8474 8475 8476 8477 8478 8479 8480 8481 8482 8483 8484 8485 8486 8487 8488 8489 8490 8491 8492 8493 8494 8495 8496 8497 8498 8499 8500 8501 8502 8503 8504 8505 8506 8507 8508 8509 8510 8511 8512 8513 8514 8515 8516 8517 8518 8519 8520 8521 8522 8523 8524 8525 8526 8527 8528 8529 8530 8531 8532 8533 8534 8535 8536 8537 8538 8539 8540 8541 8542 8543 8544 8545 8546 8547 8548 8549 8550 8551 8552 8553 8554 8555 8556 8557 8558 8559 8560 8561 8562 8563 8564 8565 8566 8567 8568 8569 8570 8571 8572 8573 8574 8575 8576 8577 8578 8579 8580 8581 8582 8583 8584 8585 8586 8587 8588 8589 8590 8591 8592 8593 8594 8595 8596 8597 8598 8599 8600 8601 8602 8603 8604 8605 8606 8607 8608 8609 8610 8611 8612 8613 8614 8615 8616 8617 8618 8619 8620 8621 8622 8623 8624 8625 8626 8627 8628 8629 8630 8631 8632 8633 8634 8635 8636 8637 8638 8639 8640 8641 8642 8643 8644 8645 8646 8647 8648 8649 8650 8651 8652 8653 8654 8655 8656 8657 8658 8659 8660 8661 8662 8663 8664 8665 8666 8667 8668 8669 8670 8671 8672 8673 8674 8675 8676 8677 8678 8679 8680 8681 8682 8683 8684 8685 8686 8687 8688 8689 8690 8691 8692 8693 8694 8695 8696 8697 8698 8699 8700 8701 8702 8703 8704 8705 8706 8707 8708 8709 8710 8711 8712 8713 8714 8715 8716 8717 8718 8719 8720 8721 8722 8723 8724 8725 8726 8727 8728 8729 8730 8731 8732 8733 8734 8735 8736 8737 8738 8739 8740 8741 8742 8743 8744 8745 8746 8747 8748 8749 8750 8751 8752 8753 8754 8755 8756 8757 8758 8759 8760 8761 8762 8763 8764 8765 8766 8767 8768 8769 8770 8771 8772 8773 8774 8775 8776 8777 8778 8779 8780 8781 8782 8783 8784 8785 8786 8787 8788 8789 8790 8791 8792 8793 8794 8795 8796 8797 8798 8799 8800 8801 8802 8803 8804 8805 8806 8807 8808 8809 8810 8811 8812 8813 8814 8815 8816 8817 8818 8819 8820 8821 8822 8823 8824 8825 8826 8827 8828 8829 8830 8831 8832 8833 8834 8835 8836 8837 8838 8839 8840 8841 8842 8843 8844 8845 8846 8847 8848 8849 8850 8851 8852 8853 8854 8855 8856 8857 8858 8859 8860 8861 8862 8863 8864 8865 8866 8867 8868 8869 8870 8871 8872 8873 8874 8875 8876 8877 8878 8879 8880 8881 8882 8883 8884 8885 8886 8887 8888 8889 8890 8891 8892 8893 8894 8895 8896 8897 8898 8899 8900 8901 8902 8903 8904 8905 8906 8907 8908 8909 8910 8911 8912 8913 8914 8915 8916 8917 8918 8919 8920 8921 8922 8923 8924 8925 8926 8927 8928 8929 8930 8931 8932 8933 8934 8935 8936 8937 8938 8939 8940 8941 8942 8943 8944 8945 8946 8947 8948 8949 8950 8951 8952 8953 8954 8955 8956 8957 8958 8959 8960 8961 8962 8963 8964 8965 8966 8967 8968 8969 8970 8971 8972 8973 8974 8975 8976 8977 8978 8979 8980 8981 8982 8983 8984 8985 8986 8987 8988 8989 8990 8991 8992 8993 8994 8995 8996 8997 8998 8999 9000 9001 9002 9003 9004 9005 9006 9007 9008 9009 9010 9011 9012 9013 9014 9015 9016 9017 9018 9019 9020 9021 9022 9023 9024 9025 9026 9027 9028 9029 9030 9031 9032 9033 9034 9035 9036 9037 9038 9039 9040 9041 9042 9043 9044 9045 9046 9047 9048 9049 9050 9051 9052 9053 9054 9055 9056 9057 9058 9059 9060 9061 9062 9063 9064 9065 9066 9067 9068 9069 9070 9071 9072 9073 9074 9075 9076 9077 9078 9079 9080 9081 9082 9083 9084 9085 9086 9087 9088 9089 9090 9091 9092 9093 9094 9095 9096 9097 9098 9099 9100 9101 9102 9103 9104 9105 9106 9107 9108 9109 9110 9111 9112 9113 9114 9115 9116 9117 9118 9119 9120 9121 9122 9123 9124 9125 9126 9127 9128 9129 9130 9131 9132 9133 9134 9135 9136 9137 9138 9139 9140 9141 9142 9143 9144 9145 9146 9147 9148 9149 9150 9151 9152 9153 9154 9155 9156 9157 9158 9159 9160 9161 9162 9163 9164 9165 9166 9167 9168 9169 9170 9171 9172 9173 9174 9175 9176 9177 9178 9179 9180 9181 9182 9183 9184 9185 9186 9187 9188 9189 9190 9191 9192 9193 9194 9195 9196 9197 9198 9199 9200 9201 9202 9203 9204 9205 9206 9207 9208 9209 9210 9211 9212 9213 9214 9215 9216 9217 9218 9219 9220 9221 9222 9223 9224 9225 9226 9227 9228 9229 9230 9231 9232 9233 9234 9235 9236 9237 9238 9239 9240 9241 9242 9243 9244 9245 9246 9247 9248 9249 9250 9251 9252 9253 9254 9255 9256 9257 9258 9259 9260 9261 9262 9263 9264 9265 9266 9267 9268 9269 9270 9271 9272 9273 9274 9275 9276 9277 9278 9279 9280 9281 9282 9283 9284 9285 9286 9287 9288 9289 9290 9291 9292 9293 9294 9295 9296 9297 9298 9299 9300 9301 9302 9303 9304 9305 9306 9307 9308 9309 9310 9311 9312 9313 9314 9315 9316 9317 9318 9319 9320 9321 9322 9323 9324 9325 9326 9327 9328 9329 9330 9331 9332 9333 9334 9335 9336 9337 9338 9339 9340 9341 9342 9343 9344 9345 9346 9347 9348 9349 9350 9351 9352 9353 9354 9355 9356 9357 9358 9359 9360 9361 9362 9363 9364 9365 9366 9367 9368 9369 9370 9371 9372 9373 9374 9375 9376 9377 9378 9379 9380 9381 9382 9383 9384 9385 9386 9387 9388 9389 9390 9391 9392 9393 9394 9395 9396 9397 9398 9399 9400 9401 9402 9403 9404 9405 9406 9407 9408 9409 9410 9411 9412 9413 9414 9415 9416 9417 9418 9419 9420 9421 9422 9423 9424 9425 9426 9427 9428 9429 9430 9431 9432 9433 9434 9435 9436 9437 9438 9439 9440 9441 9442 9443 9444 9445 9446 9447 9448 9449 9450 9451 9452 9453 9454 9455 9456 9457 9458 9459 9460 9461 9462 9463 9464 9465 9466 9467 9468 9469 9470 9471 9472 9473 9474 9475 9476 9477 9478 9479 9480 9481 9482 9483 9484 9485 9486 9487 9488 9489 9490 9491 9492 9493 9494 9495 9496 9497 9498 9499 9500 9501 9502 9503 9504 9505 9506 9507 9508 9509 9510 9511 9512 9513 9514 9515 9516 9517 9518 9519 9520 9521 9522 9523 9524 9525 9526 9527 9528 9529 9530 9531 9532 9533 9534 9535 9536 9537 9538 9539 9540 9541 9542 9543 9544 9545 9546 9547 9548 9549 9550 9551 9552 9553 9554 9555 9556 9557 9558 9559 9560 9561 9562 9563 9564 9565 9566 9567 9568 9569 9570 9571 9572 9573 9574 9575 9576 9577 9578 9579 9580 9581 9582 9583 9584 9585 9586 9587 9588 9589 9590 9591 9592 9593 9594 9595 9596 9597 9598 9599 9600 9601 9602 9603 9604 9605 9606 9607 9608 9609 9610 9611 9612 9613 9614 9615 9616 9617 9618 9619 9620 9621 9622 9623 9624 9625 9626 9627 9628 9629 9630 9631 9632 9633 9634 9635 9636 9637 9638 9639 9640 9641 9642 9643 9644 9645 9646 9647 9648 9649 9650 9651 9652 9653 9654 9655 9656 9657 9658 9659 9660 9661 9662 9663 9664 9665 9666 9667 9668 9669 9670 9671 9672 9673 9674 9675 9676 9677 9678 9679 9680 9681 9682 9683 9684 9685 9686 9687 9688 9689 9690 9691 9692 9693 9694 9695 9696 9697 9698 9699 9700 9701 9702 9703 9704 9705 9706 9707 9708 9709 9710 9711 9712 9713 9714 9715 9716 9717 9718 9719 9720 9721 9722 9723 9724 9725 9726 9727 9728 9729 9730 9731 9732 9733 9734 9735 9736 9737 9738 9739 9740 9741 9742 9743 9744 9745 9746 9747 9748 9749 9750 9751 9752 9753 9754 9755 9756 9757 9758 9759 9760 9761 9762 9763 9764 9765 9766 9767 9768 9769 9770 9771 9772 9773 9774 9775 9776 9777 9778 9779 9780 9781 9782 9783 9784 9785 9786 9787 9788 9789 9790 9791 9792 9793 9794 9795 9796 9797 9798 9799 9800 9801 9802 9803 9804 9805 9806 9807 9808 9809 9810 9811 9812 9813 9814 9815 9816 9817 9818 9819 9820 9821 9822 9823 9824 9825 9826 9827 9828 9829 9830 9831 9832 9833 9834 9835 9836 9837 9838 9839 9840 9841 9842 9843 9844 9845 9846 9847 9848 9849 9850 9851 9852 9853 9854 9855 9856 9857 9858 9859 9860 9861 9862 9863 9864 9865 9866 9867 9868 9869 9870 9871 9872 9873 9874 9875 9876 9877 9878 9879 9880 9881 9882 9883 9884 9885 9886 9887 9888 9889 9890 9891 9892 9893 9894 9895 9896 9897 9898 9899 9900 9901 9902 9903 9904 9905 9906 9907 9908 9909 9910 9911 9912 9913 9914 9915 9916 9917 9918 9919 9920 9921 9922 9923 9924 9925 9926 9927 9928 9929 9930 9931 9932 9933 9934 9935 9936 9937 9938 9939 9940 9941 9942 9943 9944 9945 9946 9947 9948 9949 9950 9951 9952 9953 9954 9955 9956 9957 9958 9959 9960 9961 9962 9963 9964 9965 9966 9967 9968 9969 9970 9971 9972 9973 9974 9975 9976 9977 9978 9979 9980 9981 9982 9983 9984 9985 9986 9987 9988 9989 9990 9991 9992 9993 9994 9995 9996 9997 9998 9999 10000 10001 10002 10003 10004 10005 10006 10007 10008 10009 10010 10011 10012 10013 10014 10015 10016 10017 10018 10019 10020 10021 10022 10023 10024 10025 10026 10027 10028 10029 10030 10031 10032 10033 10034 10035 10036 10037 10038 10039 10040 10041 10042 10043 10044 10045 10046 10047 10048 10049 10050 10051 10052 10053 10054 10055 10056 10057 10058 10059 10060 10061 10062 10063 10064 10065 10066 10067 10068 10069 10070 10071 10072 10073 10074 10075 10076 10077 10078 10079 10080 10081 10082 10083 10084 10085 10086 10087 10088 10089 10090 10091 10092 10093 10094 10095 10096 10097 10098 10099 10100 10101 10102 10103 10104 10105 10106 10107 10108 10109 10110 10111 10112 10113 10114 10115 10116 10117 10118 10119 10120 10121 10122 10123 10124 10125 10126 10127 10128 10129 10130 10131 10132 10133 10134 10135 10136 10137 10138 10139 10140 10141 10142 10143 10144 10145 10146 10147 10148 10149 10150 10151 10152 10153 10154 10155 10156 10157 10158 10159 10160 10161 10162 10163 10164 10165 10166 10167 10168 10169 10170 10171 10172 10173 10174 10175 10176 10177 10178 10179 10180 10181 10182 10183 10184 10185 10186 10187 10188 10189 10190 10191 10192 10193 10194 10195 10196 10197 10198 10199 10200 10201 10202 10203 10204 10205 10206 10207 10208 10209 10210 10211 10212 10213 10214 10215 10216 10217 10218 10219 10220 10221 10222 10223 10224 10225 10226 10227 10228 10229 10230 10231 10232 10233 10234 10235 10236 10237 10238 10239 10240 10241 10242 10243 10244 10245 10246 10247 10248 10249 10250 10251 10252 10253 10254 10255 10256 10257 10258 10259 10260 10261 10262 10263 10264 10265 10266 10267 10268 10269 10270 10271 10272 10273 10274 10275 10276 10277 10278 10279 10280 10281 10282 10283 10284 10285 10286 10287 10288 10289 10290 10291 10292 10293 10294 10295 10296 10297 10298 10299 10300 10301 10302 10303 10304 10305 10306 10307 10308 10309 10310 10311 10312 10313 10314 10315 10316 10317 10318 10319 10320 10321 10322 10323 10324 10325 10326 10327 10328 10329 10330 10331 10332 10333 10334 10335 10336 10337 10338 10339 10340 10341 10342 10343 10344 10345 10346 10347 10348 10349 10350 10351 10352 10353 10354 10355 10356 10357 10358 10359 10360 10361 10362 10363 10364 10365 10366 10367 10368 10369 10370 10371 10372 10373 10374 10375 10376 10377 10378 10379 10380 10381 10382 10383 10384 10385 10386 10387 10388 10389 10390 10391 10392 10393 10394 10395 10396 10397 10398 10399 10400 10401 10402 10403 10404 10405 10406 10407 10408 10409 10410 10411 10412 10413 10414 10415 10416 10417 10418 10419 10420 10421 10422 10423 10424 10425 10426 10427 10428 10429 10430 10431 10432 10433 10434 10435 10436 10437 10438 10439 10440 10441 10442 10443 10444 10445 10446 10447 10448 10449 10450 10451 10452 10453 10454 10455 10456 10457 10458 10459 10460 10461 10462 10463 10464 10465 10466 10467 10468 10469 10470 10471 10472 10473 10474 10475 10476 10477 10478 10479 10480 10481 10482 10483 10484 10485 10486 10487 10488 10489 10490 10491 10492 10493 10494 10495 10496 10497 10498 10499 10500 10501 10502 10503 10504 10505 10506 10507 10508 10509 10510 10511 10512 10513 10514 10515 10516 10517 10518 10519 10520 10521 10522 10523 10524 10525 10526 10527 10528 10529 10530 10531 10532 10533 10534 10535 10536 10537 10538 10539 10540 10541 10542 10543 10544 10545 10546 10547 10548 10549 10550 10551 10552 10553 10554 10555 10556 10557 10558 10559 10560 10561 10562 10563 10564 10565 10566 10567 10568 10569 10570 10571 10572 10573 10574 10575 10576 10577 10578 10579 10580 10581 10582 10583 10584 10585 10586 10587 10588 10589 10590 10591 10592 10593 10594 10595 10596 10597 10598 10599 10600 10601 10602 10603 10604 10605 10606 10607 10608 10609 10610 10611 10612 10613 10614 10615 10616 10617 10618 10619 10620 10621 10622 10623 10624 10625 10626 10627 10628 10629 10630 10631 10632 10633 10634 10635 10636 10637 10638 10639 10640 10641 10642 10643 10644 10645 10646 10647 10648 10649 10650 10651 10652 10653 10654 10655 10656 10657 10658 10659 10660 10661 10662 10663 10664 10665 10666 10667 10668 10669 10670 10671 10672 10673 10674 10675 10676 10677 10678 10679 10680 10681 10682 10683 10684 10685 10686 10687 10688 10689 10690 10691 10692 10693 10694 10695 10696 10697 10698 10699 10700 10701 10702 10703 10704 10705 10706 10707 10708 10709 10710 10711 10712 10713 10714 10715 10716 10717 10718 10719 10720 10721 10722 10723 10724 10725 10726 10727 10728 10729 10730 10731 10732 10733 10734 10735 10736 10737 10738 10739 10740 10741 10742 10743 10744 10745 10746 10747 10748 10749 10750 10751 10752 10753 10754 10755 10756 10757 10758 10759 10760 10761 10762 10763 10764 10765 10766 10767 10768 10769 10770 10771 10772 10773 10774 10775 10776 10777 10778 10779 10780 10781 10782 10783 10784 10785 10786 10787 10788 10789 10790 10791 10792 10793 10794 10795 10796 10797 10798 10799 10800 10801 10802 10803 10804 10805 10806 10807 10808 10809 10810 10811 10812 10813 10814 10815 10816 10817 10818 10819 10820 10821 10822 10823 10824 10825 10826 10827 10828 10829 10830 10831 10832 10833 10834 10835 10836 10837 10838 10839 10840 10841 10842 10843 10844 10845 10846 10847 10848 10849 10850 10851 10852 10853 10854 10855 10856 10857 10858 10859 10860 10861 10862 10863 10864 10865 10866 10867 10868 10869 10870 10871 10872 10873 10874 10875 10876 10877 10878 10879 10880 10881 10882 10883 10884 10885 10886 10887 10888 10889 10890 10891 10892 10893 10894 10895 10896 10897 10898 10899 10900 10901 10902 10903 10904 10905 10906 10907 10908 10909 10910 10911 10912 10913 10914 10915 10916 10917 10918 10919 10920 10921 10922 10923 10924 10925 10926 10927 10928 10929 10930 10931 10932 10933 10934 10935 10936 10937 10938 10939 10940 10941 10942 10943 10944 10945 10946 10947 10948 10949 10950 10951 10952 10953 10954 10955 10956 10957 10958 10959 10960 10961 10962 10963 10964 10965 10966 10967 10968 10969 10970 10971 10972 10973 10974 10975 10976 10977 10978 10979 10980 10981 10982 10983 10984 10985 10986 10987 10988 10989 10990 10991 10992 10993 10994 10995 10996 10997 10998 10999 11000 11001 11002 11003 11004 11005 11006 11007 11008 11009 11010 11011 11012 11013 11014 11015 11016 11017 11018 11019 11020 11021 11022 11023 11024 11025 11026 11027 11028 11029 11030 11031 11032 11033 11034 11035 11036 11037 11038 11039 11040 11041 11042 11043 11044 11045 11046 11047 11048 11049 11050 11051 11052 11053 11054 11055 11056 11057 11058 11059 11060 11061 11062 11063 11064 11065 11066 11067 11068 11069 11070 11071 11072 11073 11074 11075 11076 11077 11078 11079 11080 11081 11082 11083 11084 11085 11086 11087 11088 11089 11090 11091 11092 11093 11094 11095 11096 11097 11098 11099 11100 11101 11102 11103 11104 11105 11106 11107 11108 11109 11110 11111 11112 11113 11114 11115 11116 11117 11118 11119 11120 11121 11122 11123 11124 11125 11126 11127 11128 11129 11130 11131 11132 11133 11134 11135 11136 11137 11138 11139 11140 11141 11142 11143 11144 11145 11146 11147 11148 11149 11150 11151 11152 11153 11154 11155 11156 11157 11158 11159 11160 11161 11162 11163 11164 11165 11166 11167 11168 11169 11170 11171 11172 11173 11174 11175 11176 11177 11178 11179 11180 11181 11182 11183 11184 11185 11186 11187 11188 11189 11190 11191 11192 11193 11194 11195 11196 11197 11198 11199 11200 11201 11202 11203 11204 11205 11206 11207 11208 11209 11210 11211 11212 11213 11214 11215 11216 11217 11218 11219 11220 11221 11222 11223 11224 11225 11226 11227 11228 | <?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">
<!ENTITY desktop SYSTEM "hig-ch-desktop.xml">
<!--ENTITY dialogs-old SYSTEM "hig-ch-dialogs-old.xml"--><!ENTITY feedback SYSTEM "hig-ch-feedback.xml">
<!ENTITY gnome3 SYSTEM "hig-ch-gnome3.xml">
<!ENTITY icons SYSTEM "hig-ch-icons.xml">
<!--ENTITY icons-new SYSTEM "hig-ch-icons-new.xml"--><!ENTITY input SYSTEM "hig-ch-input.xml">
<!ENTITY intro SYSTEM "hig-ch-intro.xml">
<!ENTITY language SYSTEM "hig-ch-language.xml">
<!ENTITY layout SYSTEM "hig-ch-layout.xml">
<!ENTITY menus SYSTEM "hig-ch-menus.xml">
<!ENTITY principles SYSTEM "hig-ch-principles.xml">
<!ENTITY toolbars SYSTEM "hig-ch-toolbars.xml">
<!ENTITY windows SYSTEM "hig-ch-windows.xml">
<!ENTITY bibliography SYSTEM "hig-ch-bibliography.xml">
]>
<book id="index" lang="sl">
<bookinfo>
<author role="maintainer"><firstname>The GNOME Usability Project</firstname></author>
<copyright>
<year>2002-2012</year>
<holder>Calum Benson, Adam Elman, Seth Nickell, colin z robertson</holder>
</copyright>
<pubdate>2012-10-03</pubdate>
<edition>2.2.3</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>
<legalnotice>
<para>
Permission is granted to copy, distribute and/or modify this
document under the terms of the <citetitle>GNU Free Documentation
License</citetitle>, Version 1.1 or any later version published
by the Free Software Foundation with no Invariant Sections, no
Front-Cover Texts, and no Back-Cover Texts. You may obtain a copy
of the <citetitle>GNU Free Documentation License</citetitle> from
the Free Software Foundation by visiting <ulink type="http" url="http://www.fsf.org">their Web site</ulink> or by writing to:
Free Software Foundation, Inc., 59 Temple Place - Suite 330,
Boston, MA 02111-1307, USA.
</para>
<para>
Many of the names used by companies to distinguish their products and
services are claimed as trademarks. Where those names appear in any
GNOME documentation, and those trademarks are made aware to the members
of the GNOME Documentation Project, the names have been printed in caps
or initial caps.
</para>
</legalnotice>
<title>GNOME Human Interface Guidelines 2.2.3</title>
</bookinfo>
<!-- :xml.root=hig-book.xml: -->
<preface id="whatsnew">
<title>What's new?</title>
<para>This section highlights recent changes to the HIG that may affect your application.</para>
<para>The following changes were made in HIG v2.2.3:</para>
<itemizedlist>
<listitem><para>Freshen links to accessibility, documentation and freedesktop projects.</para></listitem>
</itemizedlist>
<para>The following changes were made in HIG v2.2.2:</para>
<itemizedlist>
<listitem><para>Addition of <xref linkend="note-on-gnome3"/> regarding relevance of this guide to GNOME 3.</para></listitem>
</itemizedlist>
<para>The following changes were made in HIG v2.2.1:</para>
<itemizedlist>
<listitem><para>Mention in <xref linkend="windows-progress"/> that in-place progress
indicators are preferred to modal progress dialogs windows.
</para></listitem>
<listitem><para>
Replace guidance in <xref linkend="windows-progress"/> about progress windows having
same title as their primary text, which lead to unnecessary redundancy. Advice is now
that progress window title should summarize the overall operation.
</para></listitem>
</itemizedlist>
<para>The following sections were added in HIG v2.0:</para>
<itemizedlist>
<listitem><para>
<xref linkend="gconf-keys"/>
</para></listitem>
<listitem><para>
<xref linkend="windows-show-hide"/>
</para></listitem>
<listitem><para>
<xref linkend="desktop-notification-area"/>
</para></listitem>
<listitem><para>
<xref linkend="windows-progress"/>
</para></listitem>
<listitem><para>
<xref linkend="toolbars-media"/>
</para></listitem>
<listitem><para>
<xref linkend="controls-scrollbars"/>
</para></listitem>
<listitem><para>
<xref linkend="controls-lists-sortable"/>
</para></listitem>
<listitem><para>
<xref linkend="controls-trees-sortable"/>
</para></listitem>
<listitem><para>
<xref linkend="controls-tab-status"/>
</para></listitem>
<listitem><para>
<xref linkend="controls-progress-bars"/>
</para></listitem>
<listitem><para>
<xref linkend="icons-design-accessible"/>
</para></listitem>
<listitem><para>
<xref linkend="bibliography"/>
</para></listitem>
</itemizedlist>
<para>New or revised guidelines were added to these sections in HIG v2.0:</para>
<itemizedlist>
<listitem><para>
<xref linkend="internationalization"/>
</para></listitem>
<listitem><para>
<xref linkend="desktop-integration"/>
</para></listitem>
<listitem><para>
<xref linkend="windows-primary"/>
</para></listitem>
<listitem><para>
<xref linkend="windows-utility"/>
</para></listitem>
<listitem><para>
<xref linkend="alerts-confirmation"/>
</para></listitem>
<listitem><para>
<xref linkend="windows-assistant"/>
</para></listitem>
<listitem><para>
<xref linkend="menus-menubar"/>
</para></listitem>
<listitem><para>
<xref linkend="the-file-menu"/>
</para></listitem>
<listitem><para>
<xref linkend="menu-standard-view"/>
</para></listitem>
<listitem><para>
<xref linkend="menu-standard-bookmarks"/>
</para></listitem>
<listitem><para>
<xref linkend="menu-standard-go"/>
</para></listitem>
<listitem><para>
<xref linkend="application-windows-menu"/>
</para></listitem>
<listitem><para>
<xref linkend="controls-status-bars"/>
</para></listitem>
<listitem><para>
<xref linkend="controls-entry"/>
</para></listitem>
<listitem><para>
<xref linkend="controls-frames"/>
</para></listitem>
<listitem><para>
<xref linkend="feedback-choosing"/>
</para></listitem>
<listitem><para>
<xref linkend="feedback-interrupting"/>
</para></listitem>
<listitem><para>
<xref linkend="layout-capitalization"/>
</para></listitem>
<listitem><para>
<xref linkend="mouse-buttons"/>
</para></listitem>
<listitem><para>
<xref linkend="selection"/>
</para></listitem>
<listitem><para>
<xref linkend="drag-drop"/>
</para></listitem>
<listitem><para>
<xref linkend="choosing-access-keys"/>
</para></listitem>
<listitem><para>
<xref linkend="shortcuts"/>
</para></listitem>
<listitem><para>
<xref linkend="standard-shortcuts"/>
</para></listitem>
</itemizedlist>
<para>The following terminology changes were introduced in HIG v2.0:</para>
<itemizedlist>
<listitem><para>"Option menus" are now called "Drop-down lists" </para></listitem>
<listitem><para>"Combo boxes" are now called "Drop-down combination boxes"</para></listitem>
</itemizedlist>
</preface>
<preface id="intro">
<title>Uvod</title>
<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>
<para>
These guidelines are meant to help you design and write applications
that are
easy to use and consistent with the GNOME desktop. Following these
guidelines will have many benefits:
<itemizedlist>
<listitem><para>Users will learn to use your
program faster, because interface elements will look and
behave the way they are used to.</para></listitem>
<listitem><para>Novice and advanced users alike will be able
accomplish tasks quickly and easily, because the interface
won't be confusing or make things difficult.</para></listitem>
<listitem><para>Your application will have an attractive look
that fits in with the rest of the desktop.</para></listitem>
<listitem><para>Your application will continue to look
good when users change desktop themes, fonts and
colors.</para></listitem>
<listitem><para>Your application will be accessible to all
users, including those with disabilities or special
needs.</para></listitem>
</itemizedlist>
</para>
<para>
To help you achieve these goals, these guidelines will cover basic
interface elements, how to use them and put them together effectively,
and how to make your application integrate well with the desktop.
</para>
<para>
The recommendations here build on design aspects that have
worked well in other systems, including Mac OS, Windows, Java
and KDE. At the same time they retain a uniquely GNOME flavor.
</para>
<tip><title>Remember...</title>
<para>Following the guidelines will make your job easier,
not harder!</para>
</tip>
</preface>
<preface id="note-on-gnome3">
<title>Applicability to GNOME 3</title>
<para>This version of the Human Interface Guidelines was written for designers and developers of GNOME 2 applications. This focus is reflected in the advice
offered, and in the accompanying illustrations.</para>
<para>Since many of them apply equally to GNOME 3, however, you can and
should continue to follow the majority of these usability principles and
guidelines in your GNOME 3 application.</para>
<para>An updated Human Interface Guidelines document focusing on GNOME 3
will be released in due course. In the meantime, you can find some specific
GNOME 3 guidelines on the <ulink url="http://live.gnome.org/GnomeShell/Design/Guidelines">GNOME Shell Guidelines</ulink> wiki page.</para>
<para>The GNOME Usability Project, March 2011</para>
</preface>
<chapter id="principles">
<title>Usability Principles</title>
<para>This section explains some of the basic principles behind the more specific technical guidelines recommended in this document. We believe that these principles are important for all application development.</para>
<sect1 id="principles-people">
<title>Design for People</title>
<para>Remember that the purpose of any software application is to enable some group of people to accomplish a specific set of tasks. So, the first things to establish when designing your application are:</para>
<orderedlist>
<listitem><para>who your users are</para></listitem>
<listitem><para>what you want to enable them to do</para></listitem>
</orderedlist>
<para>For example, you may be designing an application that will enable engineers (software, electrical, or mechanical) to create diagrams. You may be designing an application that will enable system administrators to configure and monitor a web server. You may be designing an application that will help elementary school students to learn math.</para>
<para>The important thing is that you know your audience, and you understand both their goals and the tasks necessary to achieve those goals. There are a large number of professional interaction designers who write books and teach courses on design methods that can help with this process, many of which are extremely useful— see the <xref linkend="bibliography"/> for a selection. Most of these methods, however, boil down to specific ways of understanding your users, understanding the tasks you want to help them accomplish, and finding ways to support those tasks in your application.</para>
</sect1>
<sect1 id="principles-broad-userbase">
<title>Don't Limit Your User Base</title>
<para>If you are designing an application for use by engineers, or by children, or by system administrators, be sure to create an application that can be used by <emphasis>all</emphasis> engineers, children, or system administrators, including those with disabilities or those who are native speakers of a language different from yours. Be aware of accessibility issues and internationalization and localization issues, many of which are addressed by the guidelines in this document.</para>
<sect2 id="accessibility">
<title>Accessibility</title>
<para>Accessibility (sometimes called <emphasis>a11y</emphasis>) means enabling people with disabilities of some kind to participate in life's activities: in this case, specifically to use your software. For example:</para>
<itemizedlist>
<listitem><para>Color-blind users may not be able to use your application if you rely only on color-coding to distinguish different types of information</para></listitem>
<listitem><para>Users with hearing impairments may not be able to use your application if you rely on sounds to indicate critical information</para></listitem>
<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://projects.gnome.org/orca/">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://projects.gnome.org/accessibility">GNOME Accessibility Project</ulink>.</para>
</sect2>
<sect2 id="internationalization">
<title>Internationalization and Localization</title>
<para>Internationalization means designing software so that it can function in different language environments. Localization is the process of actually translating the messages, labels, and other interface elements of an application into another language.</para>
<para>GNOME has excellent support for both internationalization (also referred to as i18n) and localization (also referred to as l10n). In most cases, simply using standard GNOME APIs for displaying text and messages will allow you or others to localize your application for other locales. For more information on how to make your application localizable, see the <ulink url="http://www.pango.org">Pango project home page</ulink> (Pango is the GNOME library for rendering internationalized text), the <ulink url="http://www.gnome.org/i18n/">GNOME Translations page</ulink>, and the <ulink url="http://developer.gnome.org/projects/gtp/">GNOME Translation Project page</ulink>.</para>
<para>Sensitivity to cultural and political issues is also an important consideration. Designing icons and sounds, and even choosing colors requires some understanding of the connotations they might have to a user from a different part of the world.</para>
<para>Examples of elements it is best to avoid for these reasons include:</para>
<itemizedlist>
<listitem><para>Pictures of flags or money</para></listitem>
<listitem><para>Maps showing political boundaries or contentious location names</para></listitem>
<listitem><para>Lists of countries or cities in non-alphabetical order (unless specifically requested or required by the context)</para></listitem>
<listitem><para>Icons depicting animals</para></listitem>
<listitem><para>Icons depicting only hands or feet</para></listitem>
</itemizedlist>
</sect2>
</sect1>
<sect1 id="principles-match">
<title>Create a Match Between Your Application and the Real World</title>
<para id="use-users-language">Always use words, phrases, and concepts that are familiar to the user rather than terms from the underlying system. Use terms that relate to the user's knowledge of the tasks your application supports. For example, in medicine, the paper folder that contains all information about a specific patient is called a "chart." Hence, a medical application might refer to a patient record that contains the same information as a paper chart as a "patient chart" rather than as a "patient database record."</para>
<para>You can often take advantage of your users' knowledge of the real world by using metaphor— that is, a familiar concept from the outside world— to represent elements within your application. For example:</para>
<itemizedlist>
<listitem><para>an image of a file folder suggests a container into which documents can be placed</para></listitem>
<listitem><para>a waste basket suggests a container into which items can be placed when they are no longer needed</para></listitem>
</itemizedlist>
<para>When using metaphors, however, it is important to neither take the metaphor too literally, nor to extend the metaphor beyond its reasonable use. For example, the capacity of a file folder should not be limited to the capacity of a physical file folder, which presumably could contain only a few documents before becoming unwieldy. On the other hand, a waste basket should not be used for anything other than holding discarded files. It should not be used, for example, to eject a removable disk such as a floppy or CD.</para>
</sect1>
<sect1 id="principles-consistency">
<title>Make Your Application Consistent</title>
<para>Make your application consistent with itself and with other applications, in both its appearance and its behavior. This is one of the most important design principles, and probably the most famous, but it is also frequently ignored. While this document serves as the basis for consistency between GNOME applications, you are encouraged to look at and follow other application's conventions where this document provides no guidelines.</para>
<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>
</sect1>
<sect1 id="principles-feedback">
<title>Keep the User Informed</title>
<para>Always let the user know what is happening in your application by using appropriate feedback at an appropriate time. The user should never have to guess about the status of the system or of your application. When the user performs an action, provide feedback to indicate that the system has received the input and is operating on it. Feedback can be visual, audio, or both. If the system will take a long time to process the request, provide as much feedback as possible about how lengthy the operation will be. Types of helpful feedback include but are not limited to: cursor changes, animated "throbbers", progress indicators, audio feedback such as a beep, and error messages. Error messages should use simple language, clearly state the problem, and provide solutions or tell the user how to get out of the current situation if possible.</para>
<para>It is critical that feedback be <emphasis>accurate</emphasis> and <emphasis>precise</emphasis>. If you display a determinate progress indicator to display the state of completion of a task and it is inaccurate, the user will lose faith in progress indicators, and they will find the environment less usable. If you display a generic error message that indicates that there is a problem but fails to provide enough information to diagnose or solve the problem, your users will be unable to continue with their task.</para>
<para>See <xref linkend="feedback"/> and <xref linkend="windows-alert"/> for more information on feedback.</para>
</sect1>
<sect1 id="principles-simplicity">
<title>Keep It Simple and Pretty</title>
<para>Your application should enable the user to concentrate on the task at hand. So, design your application to show only useful and relevant information and interface elements. Every extra piece of information or interface control competes with the truly relevant bits of information and distracts the user from important information. Hence, don't clutter your interface, and don't overload the user with buttons, menu options, icons, or irrelevant information. Instead, use progressive disclosure and other techniques to limit what the user sees at any given moment.</para>
<para>Finally, present your information and interface elements in an aesthetically pleasing manner. A disorganized, cluttered-looking interface with a few elements can be just as distracting as an organized interface with too much information. Make sure that dialog elements are cleanly-aligned, and do not overuse or misuse color or graphics. If you know a graphic designer, seek their advice if possible— the guidelines in this document will help you with the basics, but there is no substitute for a trained eye.</para>
<para>See <xref linkend="design"/> and <xref linkend="icons"/> for more information on designing the visual appearance of your application.</para>
</sect1>
<sect1 id="principles-user-control">
<title>Put the User in Control</title>
<para>Remember that computers exist to serve humans. A user should always feel in control, able to do what they want when they want. This means you should generally avoid modes; users should be able to switch between different tasks (and specifically, different windows) at any time. See <xref linkend="window-props-modality"/> for more information on modes.</para>
<para>The user should also be able to tailor aspects of their environment to fit personal preferences. It is very important, however, to avoid the trap of allowing too much configuration, or allowing the configuration of parameters that most users will not understand or find useful to modify. Wherever possible, inherit visual and behavioral parameters from global preferences and settings such as the current GTK+ theme.</para>
</sect1>
<sect1 id="principles-forgiveness">
<title>Forgive the User</title>
<para>We all make mistakes. Whether we're exploring and learning how to use the system, or we're experts who just hit the wrong key, we are only human. Your application should therefore allow users to quickly undo the results of their actions.</para>
<para>If an action is very dangerous, and there is no way to undo the result, warn the user and ask for confirmation. Only do this in extreme cases, though; if frequently faced with such confirmation messages, users begin to ignore them, making them worse than useless.</para>
<para>In all cases, the user's work is sacrosanct. Nothing your application does should lose or destroy user's work without explicit user action. Among other techniques, this can be achieved by auto-saving backups of documents, and allowing multiple levels of undo.</para>
</sect1>
<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>See <xref linkend="input"/> for more information on direct manipulation.</para>
</sect1>
</chapter>
<chapter id="desktop-integration">
<title>Desktop Integration</title>
<para>There are two elements to basic integration with the user environment of the GNOME Desktop.
<orderedlist>
<listitem><para>Place an entry for your application in the <guimenu>Applications</guimenu> menu. This is the primary mechanism by which users discover and run applications.</para></listitem>
<listitem><para>If your application can open and save files, place entries for those file types in the application database and the document type (MIME) database. This allows the file manager and other applications to automatically launch your application when they encounter files your application can handle.</para></listitem>
</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>
<figure><title>The Applications menu</title>
<mediaobject>
<imageobject><imagedata fileref="images/desktop-applications-menu.png" format="PNG" width="160" depth="365"/></imageobject>
<imageobject><imagedata fileref="images/desktop-applications-menu.eps" format="EPS"/></imageobject>
<textobject><phrase>Screenshot of the open Applications menu on the GNOME menu panel</phrase></textobject>
</mediaobject>
</figure>
<para>The <guimenu>Applications</guimenu> menu, which appears on the panel at the top of the screen by default, is the primary mechanism by which users discover and run applications. You place entries in this menu by installing an appropriate <filename>.desktop</filename> file.</para>
<para>The menu is arranged into a set of categories, such as Accessories and Games. Applications are placed in particular categories by the set of keywords they include in their <filename>.desktop</filename> file. </para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Assign your application to only one category on the <guimenu>Applications</guimenu> menu</para></listitem>
<listitem><para>For application suites that wrap a number of smaller sub-applications into a single window, such as Evolution or OpenOffice.org, add a menu item for each sub-application. For example, the mail, calendar, and tasklist in Evolution should each have their own menu item.</para></listitem>
</itemizedlist>
<para>Technical details can be found in the freedesktop.org <ulink url="http://freedesktop.org/Standards/menu-spec">menu</ulink> and <ulink url="http://www.freedesktop.org/Standards/desktop-entry-spec">desktop entry</ulink> specifications.</para>
<sect2 id="menu-item-names">
<title>Menu Item Names</title>
<sect3 id="menu-item-functional-description">
<title>Include a functional description in the menu name</title>
<para>In the menu item name, include a description of functionality in addition to the proper name of the application. This is especially useful novice users, and to users of systems where numerous applications are installed by default. Users are more likely to find your application if the name that appears in the menu includes a description of its functionality.</para>
<para>For example, <ulink url="http://ist.mit.edu/services/consulting/usability">user testing of MIT's Athena system</ulink> revealed that users had difficulty finding the file manager because they were unfamiliar with the name "Nautilus". Because users did not associate the word "Nautilus" with the concept "file manager" the menu item did not help them. This is an example of not using the user's language. See <xref linkend="principles-match"/> for more on this topic.</para>
<example>
<title>Including functional description in menu names</title>
<informaltable frame="all">
<tgroup cols="2" align="left">
<thead>
<row>
<entry>Original menu item</entry>
<entry>Revised menu item</entry>
</row>
</thead>
<tbody>
<row>
<entry>Epiphany</entry>
<entry>Epiphany Web Browser</entry>
</row>
</tbody>
</tgroup>
</informaltable>
</example>
</sect3>
<sect3>
<title>Only put useful information in the menu name</title>
<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">
<tgroup cols="2" align="left">
<thead>
<row>
<entry>Original menu item</entry>
<entry>Revised menu item</entry>
</row>
</thead>
<tbody>
<row>
<entry>GNOME Image Viewer</entry>
<entry>Image Viewer</entry>
</row>
<row>
<entry>GTK Blog Editor</entry>
<entry>Blog Editor</entry>
</row>
</tbody>
</tgroup>
</informaltable>
</example>
<para>Do not include technical details when the user does not need to know them, or can infer them from context. Avoid technical jargon unless the application is to be used only by a technical audience.</para>
<para>For example, when both a client and a server for something are listed in the menus, remove the word "Client" from the menu name for the client.</para>
<example>
<title>Removing technical jargon from menu names</title>
<informaltable frame="all">
<tgroup cols="2" align="left">
<thead>
<row>
<entry>Original menu item</entry>
<entry>Revised menu item</entry>
</row>
</thead>
<tbody>
<row>
<entry>Gnome Batalla Naval Client</entry>
<entry>Batalla Naval</entry>
</row>
<row>
<entry>Gnome Batalla Naval Server</entry>
<entry>Batalla Naval Multiplayer Server</entry>
</row>
<row>
<entry>Gnome VideoLAN Client</entry>
<entry>VideoLAN Movie Player</entry>
</row>
</tbody>
</tgroup>
</informaltable>
</example>
<tip><title>Providing the right information</title>
<para>Try to imagine what words users will be looking for when they select your application from the <guimenu>Applications</guimenu> menu. That is the information that should be in the menu name. For example, a user wanting to play a movie will probably not be looking for the word "Client". On the other hand, a user wanting to transmit movies from their computer may well look for the word "Server". Avoid thinking of the applications menu as an ontology!</para></tip>
</sect3>
<sect3>
<title>Menu name formats</title>
<orderedlist>
<listitem>
<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">
<tgroup cols="2" align="left">
<thead>
<row>
<entry>Ime programa</entry>
<entry>Menu name</entry>
</row>
</thead>
<tbody>
<row>
<entry>Dictionary</entry>
<entry>Dictionary</entry>
</row>
<row>
<entry>Search Tool</entry>
<entry>Search Tool</entry>
</row>
</tbody>
</tgroup>
</informaltable>
</example>
</listitem>
<listitem>
<para>If there is a succinct functional description of your application, use the format: <replaceable>ApplicationName FunctionalDescription</replaceable></para>
<example>
<title>Using functional description in menu names</title>
<informaltable frame="all">
<tgroup cols="2" align="left">
<thead>
<row>
<entry>Ime programa</entry>
<entry>Menu item name</entry>
</row>
</thead>
<tbody>
<row>
<entry>The GIMP</entry>
<entry>GIMP Image Editor</entry>
</row>
<row>
<entry>Evolution email sub-application</entry>
<entry>Evolution Email</entry>
</row>
<row>
<entry>AbiWord</entry>
<entry>AbiWord Word Processor</entry>
</row>
<row>
<entry>Galeon</entry>
<entry>Galeon Web Browser</entry>
</row>
<row>
<entry>Gramps</entry>
<entry>Gramps Genealogy</entry>
</row>
<row>
<entry>AisleRiot</entry>
<entry>AisleRiot Solitaire</entry>
</row>
</tbody>
</tgroup>
</informaltable>
</example>
</listitem>
<listitem>
<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 application's name as menu name where no functional description exists</title>
<informaltable frame="all">
<tgroup cols="2" align="left">
<thead>
<row>
<entry>Ime programa</entry>
<entry>Menu item name</entry>
</row>
</thead>
<tbody>
<row>
<entry>Bomber Maze</entry>
<entry>Bomber Maze</entry>
</row>
</tbody>
</tgroup>
</informaltable>
</example>
</listitem>
</orderedlist>
</sect3>
<!--
<sect3>
<title>Generic Name and Name</title>
<para>There are two name types required for a menu item, a generic name and a proper name. The menu item requires these two names to distinguish the applications when there are more than one of the same application type present and to simplify the item name when there is only one present. If only one application of a generic name exists in the menu the application assumes the generic name, otherwise the proper name is displayed.</para>
<example>
<title>X-Chat .desktop file</title>
<programlisting>
Name=X-Chat IRC
GenericName=IRC
</programlisting>
</example>
<para>
The generic name or GenericName, is a name describing only the applications functionality without the applications proper name. This is the name to be displayed when there are no other applications of the same generic name present and should simply describe the pure functionality of the application without its actual name.
</para>
<para>
A proper name or Name, is the displayed name of the application when there are more than one applications present with the same generic name. This distinguishes the multiple generic names with the applications proper name.
</para>
<example>
<title>GenericName and Name</title>
<informaltable frame="all">
<tgroup cols="2" align="left">
<thead>
<row>
<entry>GenericName</entry>
<entry>Name</entry>
</row>
</thead>
<tbody>
<row>
<entry>Web Browser</entry>
<entry>Epiphany Web Browser</entry>
</row>
<row>
<entry>Web Browser</entry>
<entry>Mozilla Web Browser</entry>
</row>
<row>
<entry>Word Processor</entry>
<entry>AbiWord Word Processor</entry>
</row>
<row>
<entry>Word Processor</entry>
<entry>OpenOffice.org Word Processor</entry>
</row>
</tbody>
</tgroup>
</informaltable>
</example>
</sect3>
-->
</sect2>
<sect2 id="menu-item-tooltips">
<title>Menu Item Tooltips</title>
<para>Tooltips help provide users with enough information to run the right application. Many users use tooltips to explore a new environment.</para>
<para>Provide a tooltip for each <guimenu>Application</guimenu> menu item you add, following these guidelines:</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Phrase the tooltip as an imperative verb, for example "design", "write" or "check".</para></listitem>
<listitem><para>Describe the most important tasks users can accomplish with your application.</para></listitem>
<listitem><para>While tooltips should not be verbose, they should be longer and more descriptive than the item's name.</para></listitem>
</itemizedlist>
<example>
<title>Example tooltips for GNOME applications</title>
<informaltable frame="all">
<tgroup cols="2" align="left">
<thead>
<row>
<entry>Application</entry>
<entry>Menu item tooltip</entry>
</row>
</thead>
<tbody>
<row>
<entry>Character Map</entry>
<entry>Insert special characters into documents</entry>
</row>
<row>
<entry>Memprof</entry>
<entry>Check your applications for memory leaks</entry>
</row>
<row>
<entry>Same Gnome</entry>
<entry>Arrange long chains of similarly-colored balls to eliminate them</entry>
</row>
<row>
<entry>Gnome Batalla Naval Client</entry>
<entry>Find and sink enemy ships in this networked version of Battleship</entry>
</row>
</tbody>
</tgroup>
</informaltable>
</example>
</sect2>
</sect1>
<sect1 id="gconf-keys">
<title>GConf Keys</title>
<para>GConf keys are required to have long and short descriptions for each key. Many keys have no interface through the application, so for someone administering the key values from another application each description field will be the only interface available to them.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Short Descriptions should be short, less than 8 words, describing the purpose of the key</para></listitem>
<listitem><para>Long Description should be complete in describing the possible values of the key and the effects that those values have on the application</para></listitem>
</itemizedlist>
<example>
<title>Example descriptions for GConf Keys from gnome-terminal</title>
<informaltable frame="all">
<tgroup cols="3" align="left">
<thead>
<row>
<entry>Key</entry>
<entry>Short Description</entry>
<entry>Long Description</entry>
</row>
</thead>
<tbody>
<row>
<entry>background_type</entry>
<entry>Background type</entry>
<entry>Type of terminal background. May be "solid" for a solid color, "image" for an image, or "transparent" for pseudo-transparency. </entry>
</row>
<row>
<entry>delete_binding</entry>
<entry>Effect of the Delete key</entry>
<entry>Sets what code the delete key generates. Possible values are "ascii-del" for the ASCII DEL character, "control-h" for Control-H (AKA the ASCII BS character), "escape-sequence" for the escape sequence typically bound to backspace or delete. "escape-sequence" is normally considered the correct setting for the Delete key. </entry>
</row>
</tbody>
</tgroup>
</informaltable>
</example>
</sect1>
<sect1 id="desktop-mimedatabase">
<title>Mapping Document Types to Applications</title>
<para>The document type (MIME) database allows users to specify their preferred applications for opening different types of documents. 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 Freedesktop <ulink url="http://www.freedesktop.org/wiki/Specifications/shared-mime-info-spec"><citetitle>Shared MIME Info Specification</citetitle></ulink> and <ulink url="http://standards.freedesktop.org/desktop-entry-spec/desktop-entry-spec-latest.html"><citetitle>Desktop Entry Specification</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-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>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>
</itemizedlist>
<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>
</itemizedlist>
</sect2>
<sect2 id="notification-area-animation">
<title>Animation</title>
<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
occurs regularly or 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>
</itemizedlist>
</sect2>
<sect2 id="notification-icon-interaction">
<title>Interaction</title>
<para>Icons should respond to these user actions.
(Keypresses apply only when the icon has focus, of course)</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:
<itemizedlist>
<listitem><para>the printer queue for a printing-in-progress icon.</para></listitem>
<listitem><para>the inbox for an incoming email icon</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>Icons should obey normal tooltip conventions.</para></listitem>
</itemizedlist>
</sect2>
</sect1>
</chapter>
<chapter id="windows">
<title>Windows</title>
<sect1 id="windows-properties">
<title>Parts of Windows and System Interaction</title>
<sect2 id="window-props-titles">
<title>Titles</title>
<para>Give every window a title (with the exception of <link linkend="windows-alert">alerts</link> and <link linkend="toolbox-windows">toolboxes</link>). A good window title
contains information that is relevant to the user, and distinguishes a
particular window from other open windows. Omit information that does
not assist in this selection, for example the application's version
number or vendor name.</para>
<figure>
<title>Example of a window title</title>
<mediaobject>
<imageobject>
<imagedata depth="28" fileref="images/windows-titlebar.png" format="PNG" width="379"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-titlebar.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Screenshot showing a window title bar with title
"Parts of Windows and System Interaction - Mozilla Firefox"</phrase>
</textobject>
</mediaobject>
</figure>
<para>See the description of each particular window type for title
formats.</para>
</sect2>
<sect2 id="window-props-borders">
<title>Borders and Window Commands</title>
<para>Most windows have borders, except certain shaped windows and some
torn-off windows. Do not attempt to draw your own window borders, but
instead provide hints to the window manager for the desired border type.</para>
<para>Different window commands are appropriate to different types of
window. See the description of each particular window type for a list of
appropriate window commands. These are the possible window commands:</para>
<itemizedlist>
<listitem>
<formalpara>
<title>Close</title>
<para>Closes the window. <emphasis>Always</emphasis> draw this as
a button on the window border when relevant to the window type.</para>
</formalpara>
</listitem>
<listitem>
<formalpara>
<title>Maximize</title>
<para>Causes the window to use all unused screen space.</para>
</formalpara>
</listitem>
<listitem>
<formalpara>
<title>Minimize</title>
<para>Causes the window to be temporarily hidden. It will continue
to appear on the desktop window list.</para>
</formalpara>
</listitem>
<listitem>
<formalpara>
<title>Roll-up/Unroll</title>
<para>Shows only the title bar of the window, as if it has been
"rolled up".</para>
</formalpara>
</listitem>
</itemizedlist>
</sect2>
<sect2 id="window-props-modality">
<title>Modality</title>
<para>A <emphasis role="bold">non-modal</emphasis> window does not
restrict the user's interaction with other open windows on the
desktop in any way. Using non-modal windows gives the user maximum
flexibility to perform tasks within your application in any order and by
whichever means they choose.</para>
<para>An <emphasis role="bold">application modal</emphasis> window,
while it is open, prevents the user from interacting with other windows
in the same application.</para>
<para>A <emphasis role="bold">system modal</emphasis> window, while it
is open, prevents the user from interacting with any other window in any
application, including the desktop itself.</para>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Use an application modal window only if allowing interaction
with other parts of the application while the window is open could
cause data loss or some other serious problem. Provide a clear way
of leaving the modal window, such as a <guibutton>Cancel</guibutton>
button in an alert.</para>
</listitem>
<listitem>
<para>Do not use system modal windows.</para>
</listitem>
</itemizedlist>
</sect2>
<sect2 id="window-props-focus">
<title>Focus</title>
<para>Focus is the means by which the user designates which window
should receive data from the keyboard, mouse or other input device. If
using a screen reader or similar assistive technology, focus may also
designate the window that the user wants to receive information about.
The focused window is considered the window the user is currently
"working with".</para>
<para>Ensure your application functions properly with the three
different mechanisms by which windows can receive focus in GNOME:</para>
<itemizedlist>
<listitem>
<formalpara>
<title>Click-to-focus</title>
<para>A window is focused by clicking in it.</para>
</formalpara>
</listitem>
<listitem>
<formalpara>
<title>Point-to-focus</title>
<para>A window is focused by moving the mouse pointer into it.
Sometimes known as "sloppy focus".</para>
</formalpara>
</listitem>
<listitem>
<formalpara>
<title>Keyboard focus</title>
<para>A window is focused by using a keyboard shortcut such as
<keycombo><keycap>Alt</keycap><keycap>Tab</keycap></keycombo>.</para>
</formalpara>
</listitem>
</itemizedlist>
<note>
<title>Special restrictions for point to focus</title>
<para>Note that point-to-focus places a number of restrictions on
GNOME applications that are not present in environments such as MacOS
or Windows. For example, utility windows shared between multiple
document windows, like the toolbox in the GIMP Image Editor, cannot be
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
document window, thus changing the focus and possibly saving the wrong
document.</para>
</note>
</sect2>
<sect2 id="windows-show-hide">
<title>Showing and Hiding Windows</title>
<para>How your application shows and hides windows can greatly affect the user's perception of your application, particularly its performance.</para>
<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>
<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
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>
</sect2>
</sect1>
<sect1 id="windows-primary">
<title>Primary Windows</title>
<para>A primary window usually presents a view of the user's data,
such as a text document in a word processor application, an image in a
drawing program, or calculations in a calculator or spreadsheet
application. It may also be a view of something more abstract, like a
game. A single instance of an application may have more than one primary
window, and more than one kind of primary window.</para>
<para>A primary window is always shown on the panel window list.</para>
<figure>
<title>A typical primary window (gedit)</title>
<mediaobject>
<imageobject>
<imagedata depth="372" fileref="images/windows-primary.png" format="PNG" width="397"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-primary.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A typical primary window: the gedit document view</phrase>
</textobject>
</mediaobject>
</figure>
<para>A primary application window normally has a border, a menubar and a
statusbar, and may also contain one or more toolbars.</para>
<sect2 id="primary-window-titles">
<title>Title</title>
<para>The most important element of a document-based application's
window title is the name of the open document. For other
applications, it is usually the name of the application.
</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Use <replaceable>Filename</replaceable>
as the window title for document-based applications.
Do not use the full pathname, as
the filename alone is easier to distinguish amongst
other open window titles, for example on the window list.</para>
<example>
<title>Using document names as window titles</title>
<informaltable frame="all">
<tgroup align="left" cols="2">
<thead>
<row>
<entry>Application</entry>
<entry>Example window title</entry>
</row>
</thead>
<tbody>
<row>
<entry>AbiWord</entry>
<entry>My Report.abw</entry>
</row>
<row>
<entry>Evolution</entry>
<entry>Inbox</entry>
</row>
<row>
<entry>Music player</entry>
<entry>U2 - Better Than the Real Thing</entry>
</row>
</tbody>
</tgroup>
</informaltable>
</example>
<para>If the
pathname is important, for example the user has opened two documents
with the same name from different directories in the same application,
show the full pathname in the statusbar.</para>
</listitem>
<listitem><para>Before a new document has been saved for the first time, set
the window title to <replaceable>Unsaved <document type></replaceable>.
For example,
<replaceable>Unsaved Drawing</replaceable>,
<replaceable>Unsaved Spreadsheet</replaceable>, or the more
generic <replaceable>Unsaved Document</replaceable>.</para>
</listitem>
<listitem><para>When a document has pending changes, insert an asterisk
(*) at the beginning of the window title.
For example, <replaceable>*Unsaved Drawing</replaceable>,
<replaceable>*AnnualReport</replaceable>.</para></listitem>
<listitem><para>For non-document-based applications, use
<replaceable>Application Name</replaceable>
as the window title.</para>
<example>
<title>Using application names as window titles</title>
<informaltable frame="all">
<tgroup align="left" cols="2">
<thead>
<row>
<entry>Application</entry>
<entry>Window title</entry>
</row>
</thead>
<tbody>
<row>
<entry>Dictionary</entry>
<entry>Dictionary</entry>
</row>
<row>
<entry>Calculator</entry>
<entry>Calculator</entry>
</row>
</tbody>
</tgroup>
</informaltable>
</example>
</listitem>
<listitem><para>Do not place version numbers, company names, or other information
that is of no immediate use to the user in the window title. These
consume space, making titles in limited spaces such as the system window
list less useful, and add more text the user has to scan to find useful
information. In a "beta" product, where version numbers are
critical for bug information, placing version numbers can be useful, but
remove them from stable releases. Place version information in the about
box instead.</para></listitem>
</itemizedlist>
<para>While document names are most pertinent to users, we understand
that application developers may want to increase recognition of their
application. If you plan to include your application's name in the
title of a primary window, use the following format:
<replaceable>Document Name</replaceable> - <replaceable>Application Name</replaceable>.
This will ensure that the document name appears in limited space
situations such as the system window list.</para>
<warning><para>Including the application name in the title of a document-based application is <emphasis role="bold">not</emphasis> recommended.</para></warning>
<tip><para>Think about naming windows in the context of the panel window list. On a typical screen with a relatively small number of windows open, a window will have 20-30 characters of text and an icon. Consider which text will provide the most immediately obvious clues to a user looking for a particular window.</para></tip>
</sect2>
<sect2 id="primary-window-commands">
<title>Window Commands</title>
<para>Close, Maximize/Restore, Minimize, Roll-up/Unroll</para>
</sect2>
<sect2 id="document-interface-types">
<title>Relation between Documents and Windows</title>
<sect3 id="sdi">
<title>Single Document Interface (SDI)</title>
<para>A single document interface places each document in its own
primary window. Toolboxes and other utility windows may be shared
between multiple SDI documents, but closing them should have no effect
on the document windows. Use SDI for your GNOME application unless
there is a compelling reason not to.</para>
<figure>
<title>A typical SDI application (Eye of GNOME)</title>
<mediaobject>
<imageobject>
<imagedata depth="226" fileref="images/windows-sdi.png" format="PNG" width="268"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-sdi.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A typical SDI application: Eye of GNOME being used to
inspect an icon</phrase>
</textobject>
</mediaobject>
</figure>
</sect3>
<sect3 id="mdi">
<title>Multiple Document Interface (MDI)</title>
<para>A multiple document interface presents a paned, tabbed or
similar presentation of two documents<!--, or two views of the same document-->
within a single window.</para>
<figure>
<title>A typical MDI application (gedit) showing three open
documents on tabbed pages</title>
<mediaobject>
<imageobject>
<imagedata depth="349" fileref="images/windows-mdi.png" format="PNG" width="372"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-mdi.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A typical MDI application: gedit with three open
documents in the same window</phrase>
</textobject>
</mediaobject>
</figure>
<para>MDI has several inherent usability problems, so its use is
discouraged in applications. It is better to open each document in a
new primary window, with its own menubar, toolbars and statusbar, or
allow multiple instances of your application to be run simultaneously.
In either case, this leaves it for the window manager (acting on the
user's preferences) rather than your application to decide how to
group and present document windows from the same application.</para>
</sect3>
<sect3 id="csdi">
<title>Controlled Single Document Interface (CSDI)</title>
<para>In a typical SDI application, document windows are treated as
primary. For example, when all document windows have been closed, the
application (including utility windows) exits as well. In CSDI a utility
window is treated as the primary window. For example, closing this
utility window will close all document windows and exit the application.</para>
<warning><para>Using CSDI is <emphasis role="bold">not</emphasis> recommended</para></warning>
<para>CSDI is sometimes used because document windows might be too
small to have menu bars. Typically this is not the normal use case for the
application, but does represent a significant minority use case. For
example, an image editor being used to edit small web page elements will
often result in very small document windows that cannot accomodate
a title bar.</para>
<remark>We should really have a way of doing overflow automatically
in GTK+.</remark>
<para>A better way to address this problem is to allow menu bars to "collapse"
into an overflow button, in much the same way toolbars operate when the window
shrinks to below the toolbar width. This allows for small windows, but also
provides an opportunity for people to figure out where their menus have gone.</para>
<tip><para>Note that if very small documents are the <emphasis>primary</emphasis> use
case for your application, you should consider finding a means to avoid windows
altogether. Windows are not an effective interface for dealing with large
numbers of small items. Consider looking for a fixed/automated layout system
for presenting the "documents". Also consider if the "documents" will be primarily
used in a higher level grouping, in which case that grouping could become the
document instead.</para></tip>
</sect3>
</sect2>
</sect1>
<sect1 id="windows-utility">
<title>Utility Windows</title>
<para>Utility windows, such as palettes and toolboxes, normally have
borders. They do not contain a menu bar, a toolbar, or a statusbar.</para>
<para>
A utility window should not appear in the panel window list unless
it is, or may be, the only window shown by an application.
<!-- Can't think of an example just now! CFB
For example, a BLAH window may be shown after
the main BLAH application window has been closed.
</para>
<para> -->
Otherwise, the utility window should be raised above the application when
the application window itself is selected from the window list.
</para>
<sect2 id="windows-instant-apply">
<title>Instant apply windows</title>
<para>For windows that allow the user to change values or settings, such
as property and preference windows, update those values or settings
immediately to reflect the changes made in the window. This is known as
"instant apply". Do not make the user press an
<guibutton>OK</guibutton> or <guibutton>Apply</guibutton> button to make
the changes happen, unless either:</para>
<itemizedlist>
<listitem>
<para>the change will take more than about one second to apply, in
which case applying the change immediately could make the system
feel slow or unresponsive, or</para>
</listitem>
<listitem>
<para>the changes in the window have to be applied simultaneously to
prevent the system entering a potentially unstable state. For
example, the hostname and proxy fields in a network properties
window.</para>
</listitem>
</itemizedlist>
<para>If either of these conditions affect only a few of the controls in
your window, arrange those controls together into one or more groups,
each with its own <guibutton>Apply</guibutton> button. Leave the rest of
the controls as instant apply.</para>
<remark>FIXME: screenshot of such a window here</remark>
<itemizedlist>
<title>Guidelines</title>
<listitem><para>Do not attempt to validate or apply changes caused by editing a
text field control until the user has moved focus to a different
control in the window, or the window is closed.
Validating after each keypress is usually
annoying and unnecessary. 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>
<listitem><para>When the user moves focus to a different control, do not indicate an invalid entry by displaying an alert or undoing the change the user made. Both of these methods are particularly disruptive for focus-follows-mouse users, for whom focus may leave the control more often than it does for a click-to-focus user.</para></listitem>
</itemizedlist>
<remark>We need to suggest what to do here, instead of just saying what not to do.</remark>
</sect2>
<sect2 id="windows-explicit-apply">
<title>Explicit apply windows</title>
<para>If most of the controls in your window are not suitable for
instant apply, consider making the whole window "explicit
apply". An explicit apply window has these three buttons in its
button box, plus an optional <guibutton>Help</guibutton> button:</para>
<itemizedlist>
<listitem>
<formalpara>
<title>Apply</title>
<para>Applies all the settings in the window, but does not close
the window in case the user wishes to change their mind.</para>
</formalpara>
</listitem>
<listitem>
<formalpara>
<title>Cancel</title>
<para>Resets all settings in the window to those that were in
force when the window was opened. Note: this must undo the effects
of all applications of the <guibutton>Apply</guibutton> since the
window was opened, not just the most recent one.</para>
</formalpara>
</listitem>
<listitem>
<formalpara>
<title>OK</title>
<para>Applies all settings in the window, and closes the window.</para>
</formalpara>
</listitem>
</itemizedlist>
<figure id="explicit-apply-figure">
<title>Buttons in an explicit apply window</title>
<mediaobject>
<imageobject>
<imagedata depth="55" fileref="images/windows-explicit-apply.png" format="PNG" width="387"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-explicit-apply.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Screenshot showing correct positions for Help, Apply,
Cancel and OK buttons in a dialog</phrase>
</textobject>
</mediaobject>
</figure>
<remark>FIXME: better example of such a window here</remark>
</sect2>
<sect2 id="default-buttons">
<title>Default Buttons</title>
<para>When designing a dialog or utility window, you can assign the
<keycap>Return</keycap> key to activate a particular button in the
window. GNOME indicates this button to the user by drawing a different
border around it. For example, the <guibutton>Help</guibutton> button in
<xref linkend="explicit-apply-figure"/>.</para>
<para>Choose the default button to be the most likely action, such as a
confirmation action or an action that applies changes in a utility
window. Do not make a button the default if its action is irreversible,
destructive or otherwise inconvenient to the user. If there is no
appropriate button in your window, to designate as the default button,
do not set one.</para>
<para>In particular, it is currently <emphasis>not</emphasis>
recommended to make the <guibutton>Close</guibutton> button the default
in an <link linkend="windows-instant-apply">instant apply</link> window, as this
can lead to users closing the window accidentally before they have
finished using it.</para>
</sect2>
<sect2 id="property-windows">
<title>Property Windows</title>
<para>Property windows allow the user to view and change the
characteristics of an object such as a document, file, drawing, or
application launcher.</para>
<figure>
<title>Example of a property window</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-properties.png" format="PNG" width="302" depth="335"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-properties.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Screenshot showing the "file properties" window
from Nautilus</phrase>
</textobject>
</mediaobject>
</figure>
<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>
<formalpara>
<title>Buttons:</title>
<para>Place a <guibutton>Close</guibutton> button in the lower right
corner. A <guibutton>Help</guibutton> may be placed in the lower left
corner.</para>
</formalpara>
</sect2>
<sect2 id="preference-windows">
<title>Preferences Windows</title>
<para>Preferences windows allow the user to change the way an
application looks or behaves.</para>
<remark>Much more information needed here!</remark>
<figure>
<title>Example of a preferences window</title>
<mediaobject>
<imageobject>
<imagedata depth="249" fileref="images/windows-preferences.png" format="PNG" width="354"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-preferences.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Screenshot showing the Gnibbles preferences window</phrase>
</textobject>
</mediaobject>
</figure>
<formalpara>
<title>Title Format:</title>
<para><replaceable>Application Name</replaceable> Preferences</para>
</formalpara>
<formalpara>
<title>Window Commands:</title>
<para>Close, Minimize, Roll-up/Unroll</para>
</formalpara>
<formalpara>
<title>Buttons:</title>
<para>Place a <guibutton>Close</guibutton> button in the lower right
corner. A <guibutton>Help</guibutton> may be placed in the lower left
corner.</para>
</formalpara>
<sect3 id="preference-windows-overriding-colors">
<title>Customizing Fonts and Colors</title>
<para>If your preferences window allows the user to customize fonts or colors, use the following wording and layout as a guide for these controls:</para>
<example>
<title>Recommended wording for overriding theme elements- replace with screenshot</title>
<programlisting>
(o) Use font from theme
(o) Use this font: [ Font selector ]
(o) Use colors from theme
(o) Use these colors:
Background: [ color selector ]
Foreground: [ color selector ]
</programlisting>
</example>
<para>The wording of the radio buttons may be more specific where required, for example, "Use monospace font from theme", or "Use background color from theme".</para>
</sect3>
</sect2>
<sect2 id="toolbox-windows">
<title>Toolboxes</title>
<para>A toolbox provides convenient access to a set of actions and
toggles through a set of small toolbar-like buttons. Toolboxes can be
used to provide a specialized group of tools to augment a toolbar
containing more universal items such as <guibutton>Save</guibutton> and
<guibutton>open</guibutton>. A single toolbox can be shared between
multiple documents to save screen space.</para>
<figure id="toolbox-figure">
<title>An example of a toolbox</title>
<mediaobject>
<imageobject>
<imagedata depth="89" fileref="images/windows-toolbox-small.png" format="PNG" width="136"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-toolbox-small.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A screenshot of a toolbox with eight buttons arranged into
two rows</phrase>
</textobject>
</mediaobject>
</figure>
<formalpara>
<title>Title Format:</title>
<para>Toolboxes have no title</para>
</formalpara>
<remark>How then does a screenreader user differentiate between
toolboxes? --Calum.</remark>
<remark>ATK hints? How does Windows do this (or does it) ? There's
not room for a title bar. Maybe we can have apps set the title bar but
teach the WM to not draw it or something. In any case, for sighted users
there's not even *room* for a titlebar in a toolbox. -Seth</remark>
<remark>A toolbox still needs to have an appropriate accessible
description, so a screenreader user hears some information about its
content when they focus it. -Calum</remark>
<remark>I think having the title set but having the WM ignore it might
be the best way to do this? I'll talk to Havoc. -Seth</remark>
<formalpara>
<title>Window Commands:</title>
<para>Close, Roll-up/Unroll</para>
</formalpara>
<formalpara>
<title>Buttons:</title>
<para>Toolboxes have no buttons</para>
</formalpara>
<formalpara>
<title>Resizing:</title>
<para>Make toolboxes resizable, but only resize by discrete toolbox
item widths. In other words, the user can resize the toolbox to be one
item wide, two items wide, three items wide, etc. but not one and a
half items wide.</para>
</formalpara>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Only place buttons in a toolbox that do not open another
window.</para>
</listitem>
<listitem>
<para>Toolboxes are best used for modal toggle buttons that affect
the operation of the mouse on the document, such as a set of buttons
for choosing between paintbrush, eraser, and fill modes in a drawing
application. Buttons that initiate actions upon clicking (such as a
save button) are better placed in toolbars.</para>
</listitem>
<listitem>
<para>Ensure that closing a toolbox does not close or otherwise
alter any primary window with which it is associated.</para>
</listitem>
<listitem>
<para>Do not place toolboxes in the system window list. Toolboxes
should always remain above all primary windows with
which they are associated.</para>
</listitem>
<listitem>
<para>If all primary windows associated with a toolbox are closed or
minimized, hide the toolbox as well. Show the toolbox again when one
of the primary windows is opened or restored.</para>
</listitem>
<listitem>
<para>Make a toolbox two items wide by default, unless it is broken
into <link linkend="toolbox_windows_categories">categories</link>.
Make categorized toolboxes four items wide by default.</para>
</listitem>
</itemizedlist>
<sect3 id="toolbox_windows_categories">
<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
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>
<figure id="example-toolbox-figure">
<title>A large toolbox broken into categories</title>
<mediaobject>
<imageobject>
<imagedata depth="156" fileref="images/windows-toolbox-large.png" format="PNG" width="136"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-toolbox-large.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase/>
</textobject>
</mediaobject>
</figure>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Break toolboxes with more than sixteen items into
categories. The best size for a category is between four and ten
items.</para>
</listitem>
<listitem>
<para>Give each category a label (in title caps) and a collapsing
arrow. Clicking the label or the arrow toggles the category
between a collapsed and uncollapsed state.</para>
</listitem>
</itemizedlist>
</sect3>
</sect2>
<!-- FIXME - should eventually give general guidelines for other sorts of utility window
<sect2 id="other-windows">
<title>Other</title>
<para>FIXME</para>
</sect2>
-->
</sect1>
<sect1 id="windows-alert">
<title>Alerts</title>
<para>An alert provides information about the state of the application
system, or asks for essential information about how to proceed with a
particular task. It is distinct from other types of window in that it is
not directly requested by the user, and usually contains a message or a
question rather than editable controls. Since alerts are an unwelcome
intrusion into the user's work, do not use them except where necessary
to avoid potential data loss or other serious problems.</para>
<para>
An alert has a border similar to that of a dialog, and is object modal.
</para>
<para>
An alert should not appear in the panel window list unless
it is, or may be, the only window shown by an application. For
example, an appointment reminder alert may be shown after
the main calendar application window has been closed.
</para>
<para>
Otherwise, an alert should be raised above the application when
the application window itself is selected from the window list.
</para>
<figure id="example-alert-figure">
<title>An example of an alert</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-alert-information.png" width="251" depth="123" format="PNG"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-alert-information.eps" format="EPS"/>
</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>
</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>Title Format</title>
<para>Alert windows have no titles, as the title would usually
unnecessarily duplicate the alert's primary text. This way, users
can read and respond to alerts more quickly as there is less visual
noise and confounding text.</para>
</formalpara>
<remark>Without a title, how does a screenreader user identify an alert
window? -Calum</remark>
<remark>The screen-reader finds out its an alert (do we need a WM
mechanism for this?) and reads the primary text to identify the alert. The
whole point for removing the title is that its redundant with the primary
text, and puts more crap on the screen to be read. This problem applies
double to users with screenreaders (i.e. reducing extra crap helps them
even more). -Seth</remark>
<remark>An alert still needs to have an appropriate accessible description
(perhaps the primary text of the alert itself?), so a screenreader user
hears some information about its content when they focus it. -Calum</remark>
<remark>I'll talk to Havoc about this. -Seth</remark>
<formalpara>
<title>Resizing</title>
<para>Alert windows are not resizable. If the user needs to resize your
alert, the text is probably not concise enough.</para>
</formalpara>
<formalpara>
<title>Window Commands:</title>
<para>None</para>
</formalpara>
<caution>
<title>Alerts must stay above their parent</title>
<para>Alerts do not appear in the system window list. Consequently, take
care to ensure that alerts stay above their parent window. Otherwise,
users will be likely to lose the alert and find your application
unresponsive for no apparent reason. Modal windows should always stay
above the window(s) they block.</para>
</caution>
<!--
<para role="library-problem">Buttons in GTK dialogues end up the same size (sized to the button with the longest text label). This is wrong, and looks bad.</para>
<para role="library-problem">Automatic wrapping of labels happens at funny places and ends up looking wrong. Labels should wrap before the last whole word that does not fit in the allotted space.</para>
-->
<!--
<para>FIXME - reduced or no frame; one or two buttons: <guibutton>OK</guibutton> for informing alerts, and effectively <guibutton>Cancel</guibutton> and <guibutton>OK</guibutton> for confirmation. No other controls: especially not the "Do not show this again" checkbutton. Perhaps locally modal, rarely globally modal.</para>
-->
<sect2 id="alert-text">
<title>Alert Text</title>
<para>An alert may contain both primary and secondary text. The primary
text briefly summarizes the situation. The secondary text provides
additional information.</para>
<para>Make both the primary and secondary text selectable. This
makes it easy for the user to copy and paste the text to another
window, such as an email message.
</para>
<figure id="alert-text-figure">
<title>Primary and Secondary Text Placement</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-alert-text.png" width="446" depth="178" format="PNG"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-alert-text.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Screenshot of an alert showing example of primary text in
bold, and secondary text in a smaller font underneath.</phrase>
</textobject>
</mediaobject>
</figure>
<formalpara>
<title>Primary Text</title>
<para>The primary text provides the user with a one sentence summary
of the information or suggested action. This summary should concisely
contain the essential details of the problem or suggestion. Every
alert has primary text, displayed in a bold font slightly larger than
the default. The primary text is punctuated in 'newspaper headline'
style, that is, it has no terminating period, but it may have a
terminating question mark.</para>
</formalpara>
<para role="technical-note">Denote primary text with the pango markup:
<programlisting><span weight="bold"
size="larger"><replaceable>Primary Text</replaceable></span></programlisting></para>
<formalpara>
<title>Secondary Text</title>
<para>Secondary text provides a more in-depth description of the
problem and suggested action, including possible side effects.
Secondary text can also provide information that may be helpful in
allowing the user to make an informed decision. In most situations the
user should only need the primary text to make a quick decision, but
they may read the secondary text if they are unsure of the proper
course of action, or require extra details. Secondary text is
optional, but if used, place it one text line height beneath the
primary text using the default font size and weight.</para>
</formalpara>
</sect2>
<sect2 id="alert-button-order">
<title>Alert Buttons</title>
<para>Give all alerts an affirmative button that dismisses the alert and
performs the action suggested in the primary text. Provide a
<guibutton>Cancel</guibutton> button for all alerts displayed in
response to a user actions, such as <guimenuitem>Quit</guimenuitem>. If
the alert warns of a technical problem or other situation that could
result in data loss, provide a <guibutton>Help</guibutton> button that
provides more information on the particular situation and explains the
user's options. You may also provide buttons to perform alternate
actions that provide another possible solution, fix potential problems,
or launch related dialogs or programs.</para>
<figure id="alert-buttons-figure">
<title>Button ordering and placement for alerts</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-alert-buttons.png" format="PNG" width="425" depth="62"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-alert-buttons.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
<formalpara>
<title>Button Phrasing</title>
<para>Write button labels as imperative verbs, for example
<guibutton>Save</guibutton>, <guibutton>Print</guibutton>. This allows
users to select an action with less hesitation. An active phrase also
fits best with the button's role in initiating actions, as
contrasted with a more passive phrase. For example
<guibutton>Find</guibutton> and <guibutton>Log In</guibutton> are
better buttons than <guibutton>Yes</guibutton> and
<guibutton>OK</guibutton>.</para>
</formalpara>
<itemizedlist>
<listitem>
<formalpara>
<title>Affirmative Button</title>
<para>Place the affirmative button in the lower right corner of
the alert. The affirmative button accepts the action proposed by
the alert, or simply dismisses the alert if no action is suggested
(as is the case with an <link linkend="alerts-information">information
alert</link>).</para>
</formalpara>
</listitem>
<listitem>
<formalpara>
<title>Cancel Button</title>
<para>If the alert was produced in response to a user's action,
place a <guibutton>Cancel</guibutton> button immediately to the
left of the affirmative button. This provides an escape route for
users to stop an action in response to new information, or just if
they clicked accidentally. Clicking the <guibutton>Cancel</guibutton>
button reverts the application to its state prior to the user
action.</para>
</formalpara>
</listitem>
<listitem>
<formalpara>
<title>Help Button</title>
<para>A <guibutton>Help</guibutton> button may be used to clarify
alerts that present potentially destructive options. Place the
<guibutton>Help</guibutton> button in the lower left corner of the
alert. When clicked, launch a help window clarifying the
situation, detailing the actions performed by the other buttons,
and explaining any side-effects that each action may have.</para>
</formalpara>
</listitem>
<listitem>
<formalpara>
<title>Alternate Buttons</title>
<para>Extra buttons may be used to provide alternates to the
primary action proposed by the alert text. Place these buttons to
the left of the <guibutton>Cancel</guibutton> button, or the
affirmative button if <guibutton>Cancel</guibutton> is not
present. An example of a common alternate action would be a
<guibutton>Quit without Saving</guibutton> button in a save
confirmation alert. This is an alternative to the primary
suggested action <guibutton>Save</guibutton> and the
<guibutton>Cancel</guibutton> button.</para>
</formalpara>
</listitem>
</itemizedlist>
</sect2>
<sect2 id="alert-spacing">
<title>Spacing and Positioning Inside Alerts</title>
<para>Using clear, consistent spacing in alerts makes the message easier
to digest and the available responses more obvious.</para>
<figure id="alert-spacing-figure">
<title>Spacing inside an alert</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-alert-spacing.png" format="PNG" width="530" depth="250"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-alert-spacing.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>The border around all edges of the alert, and the space
between the icon and the text, is 12 pixels.</para>
</listitem>
<listitem>
<para>The horizontal spacing between the buttons is 6 pixels.</para>
</listitem>
<listitem>
<para>Add one line break at the standard font size below both the
primary and secondary text, or 24 pixels if you are using Glade.</para>
</listitem>
<listitem>
<para>Align the top of the icon with the top of the primary text.</para>
</listitem>
<listitem>
<para>Left-align the message text, for western locales.</para>
</listitem>
</itemizedlist>
<tip>
<title>Technical Details for Proper Layout</title>
<para>Create a new GtkDialog window specifying the number of buttons
you wish the alert to contain (and a help button if appropriate). The
GtkDialog will contain a GtkVBox with an empty upper row, and a lower
row containing a GtkButtonBox with buttons in it. In the empty upper
row, place a new GtkHBox. In the left column of the GtkHBox place a
GtkImage. In the right column of the GtkHBox place a GtkLabel. Inside
the GtkLabel place <replaceable>Primary Text</replaceable> first
(using the appropriate Pango markup, see <xref linkend="alert-text"/>),
then put two linebreaks (return), then place
<replaceable>Secondary Text</replaceable>. Now change the properties
for each control according to these tables:</para>
<table frame="topbot" pgwide="0">
<title>Properties for the GtkDialog</title>
<tgroup align="left" cols="2" colsep="0" rowsep="0">
<thead>
<row valign="top">
<entry>Property</entry>
<entry>Value</entry>
</row>
</thead>
<tbody>
<row>
<entry>Title</entry>
<entry>(none)</entry>
</row>
<row>
<entry>Border Width</entry>
<entry>6</entry>
</row>
<row>
<entry>Type</entry>
<entry>Top Level</entry>
</row>
<row>
<entry>Resizable</entry>
<entry>No</entry>
</row>
<row>
<entry>Has Separator</entry>
<entry>No</entry>
</row>
</tbody>
</tgroup>
</table>
<table frame="topbot" pgwide="0">
<title>Properties for the GtkVBox (included in the dialog by
default)</title>
<tgroup align="left" cols="2" colsep="0" rowsep="0">
<thead>
<row valign="top">
<entry>Property</entry>
<entry>Value</entry>
</row>
</thead>
<tbody>
<row>
<entry>Spacing</entry>
<entry>12</entry>
</row>
</tbody>
</tgroup>
</table>
<table frame="topbot" pgwide="0">
<title>Properties for the GtkHBox</title>
<tgroup align="left" cols="2" colsep="0" rowsep="0">
<thead>
<row valign="top">
<entry>Property</entry>
<entry>Value</entry>
</row>
</thead>
<tbody>
<row>
<entry>Spacing</entry>
<entry>12</entry>
</row>
<row>
<entry>Border Width</entry>
<entry>6</entry>
</row>
</tbody>
</tgroup>
</table>
<table frame="topbot" pgwide="0">
<title>Properties for the GtkImage</title>
<tgroup align="left" cols="2" colsep="0" rowsep="0">
<thead>
<row valign="top">
<entry>Property</entry>
<entry>Value</entry>
</row>
</thead>
<tbody>
<row>
<entry>Y Align</entry>
<entry>0.00</entry>
</row>
<row>
<entry>Icon Size</entry>
<entry>Dialog</entry>
</row>
</tbody>
</tgroup>
</table>
<table frame="topbot" pgwide="0">
<title>Properties for the GtkLabel</title>
<tgroup align="left" cols="2" colsep="0" rowsep="0">
<thead>
<row valign="top">
<entry>Property</entry>
<entry>Value</entry>
</row>
</thead>
<tbody>
<row>
<entry>Use Markup</entry>
<entry>Yes</entry>
</row>
<row>
<entry>Wrap Text</entry>
<entry>Yes</entry>
</row>
<row>
<entry>Y Align</entry>
<entry>0.00</entry>
</row>
</tbody>
</tgroup>
</table>
</tip>
</sect2>
<sect2 id="alerts-information">
<title>Information Alerts</title>
<para>Use an information alert when the user must know the information
presented before continuing, or has specifically requested the
information. Present less important information by other means such as a
statusbar message.</para>
<figure id="information-alert-figure">
<title>An information alert</title>
<mediaobject>
<imageobject>
<imagedata depth="123" fileref="images/windows-alert-information.png" format="PNG" width="251"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-alert-information.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase/>
</textobject>
</mediaobject>
</figure>
<itemizedlist>
<title>An information alert...</title>
<listitem>
<para>uses the stock information icon.</para>
</listitem>
<listitem>
<para>presents a selectable message and an <guibutton>OK</guibutton>
button. The button is placed in the bottom right corner of the
alert. Pressing <keysym>Enter</keysym> or <keysym>Escape</keysym>
dismisses the alert.</para>
</listitem>
<listitem>
<para>may present a convenience button to give access to a relevant
object. For example, a <guibutton>Details</guibutton> button in an
appointment reminder alert that opens the appointment's property
window. Place this button to the left of the affirmative button.</para>
<!-- FIXME: Reword -->
</listitem>
</itemizedlist>
<formalpara>
<title>Window Commands:</title>
<para>Roll-up/Unroll, Minimize (if the alert has no parent window),
Close</para>
</formalpara>
</sect2>
<sect2 id="alerts-error">
<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
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
present an error alert. However, an error encountered in an automated
periodic email check would more appropriately report failure with a
statusbar message.</para>
<figure id="error-alert-figure">
<title>An error alert</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-alert-error.png" width="287" depth="156" format="PNG"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-alert-error.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase/>
</textobject>
</mediaobject>
</figure>
<itemizedlist>
<title>An error alert...</title>
<listitem>
<para>uses the stock error icon.</para>
</listitem>
<listitem>
<para>presents a selectable message and an <guibutton>OK</guibutton>
button. The button is placed in the bottom-right corner of the
alert. Pressing <keysym>Enter</keysym> may dismiss the error alert.</para>
</listitem>
<listitem>
<para>may present a convenience button to allow immediate handling
of the error. For example, a <guibutton>Format...</guibutton> button
in a "This disk is not formatted" alert. Place this button
to the left of the affirmative button.</para>
</listitem>
</itemizedlist>
<formalpara>
<title>Window Commands:</title>
<para><!-- Minimize, ??? -->Roll-up/Unroll</para>
</formalpara>
</sect2>
<sect2 id="alerts-confirmation">
<title>Confirmation Alerts</title>
<para>Present a confirmation alert when the user's command may
destroy their data, create a security risk, or take more than 30 seconds
of user effort to recover from if it was selected in error.</para>
<figure id="confirmation-alert-figure">
<title>A confirmation alert</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-alert-confirmation.png" contentwidth="450" contentdepth="162" format="PNG"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-alert-confirmation.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase/>
</textobject>
</mediaobject>
</figure>
<itemizedlist>
<title>A confirmation alert...</title>
<listitem>
<para>uses the stock warning icon.</para>
</listitem>
<listitem>
<para>presents a selectable message and a button labelled with
a verb or verb phrase
describing the action to be confirmed, or labelled
<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>
</listitem>
<listitem>
<para>presents a <guibutton>Cancel</guibutton> button that will
prevent execution of the user's command. This button is placed
to the immediate left of the <guibutton>OK</guibutton> or equivalent
button.</para>
</listitem>
<listitem>
<para>may present an alternate action button or a convenience
button. Place this button to the left of the <guibutton>Cancel</guibutton>
button.</para>
</listitem>
</itemizedlist>
<formalpara>
<title>Window Commands:</title>
<para><!-- Minimize, ??? -->Roll-up/Unroll</para>
</formalpara>
<sect3 id="save-confirmation-alerts">
<title>Save Confirmation Alerts</title>
<para>Save confirmation alerts help ensure that users do not lose
document changes when they close applications. This makes closing
applications a less dangerous operation.</para>
<figure id="save-alert-figure">
<title>A save confirmation alert</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-alert-save.png" width="500" depth="194" format="PNG"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-alert-save.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Save confirmation alert: "[ Close without Saving] [
Cancel ] [[ Save ]] "</phrase>
</textobject>
</mediaobject>
</figure>
<formalpara>
<title>Primary Text</title>
<para>Save changes to document <replaceable>Document Name</replaceable>
before closing?</para>
</formalpara>
<para>You may replace <quote>document</quote> with a more appropriate
description, for example <quote>image</quote> or <quote>diagram</quote>
if the document in question is not primarily text.</para>
<formalpara>
<title>Secondary Text</title>
<para>If you close without saving, changes from the last
<replaceable>Time Period</replaceable> will be discarded</para>
</formalpara>
<para role="explanation">The secondary text provides the user with
some context about the number of changes that might be unsaved.</para>
<formalpara>
<title>Buttons</title>
<para><guibutton>Close without Saving</guibutton>,
<guibutton>Cancel</guibutton>, <guibutton>Save</guibutton></para>
</formalpara>
<para>
When a confirmation alert is needed,
present it immediately. If the user confirms closing without saving,
hide the alert and the document or application window immediately,
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.
</para>
</sect3>
</sect2>
<sect2 id="alerts-authentication">
<title>Authentication Alerts</title>
<para>Authentication alerts prompt the user for information necessary to
gain access to protected resources, such as their username or password.
Authentication alerts are a special kind of alert because they are both
routine and largely unavoidable. Every attempt should be made to retain
information entered into an authentication alert as long as is possible
within security constraints.</para>
<figure id="authentication-alert-figure">
<title>An authentication alert</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-alert-authentication.png" width="460" depth="279" format="PNG"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-alert-authentication.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase/>
</textobject>
</mediaobject>
</figure>
<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
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
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
right corner of the alert.</para></listitem><listitem><para>Do not
enable the <guibutton>OK</guibutton> or equivalent button until all
fields that require input have been attended to by the user. Remember
that not all fields may require input however, for example an empty
password may be acceptable in some applications.</para></listitem><listitem><para>Show
a <guibutton>Cancel</guibutton> button that will prevent authentication
and close the alert. Place this button to the immediate left of the
<guibutton>OK</guibutton> or equivalent button.</para></listitem><listitem><para>Place
any alternative action or convenience button to the left of the
<guibutton>Cancel</guibutton> button.</para></listitem><listitem><para>When
the user presses <keycap>Return</keycap> in the last field, activate the
default button. When the user presses <keycap>Return</keycap> in any
other field, move focus to the next field.</para></listitem></itemizedlist></para>
<formalpara>
<title>Window Commands:</title>
<para><!-- Minimize, ??? -->Roll-up/Unroll</para>
</formalpara>
</sect2>
</sect1>
<sect1 id="windows-progress">
<title>Progress Windows</title>
<para>A progress window can be used to provide <link linkend="feedback">feedback</link>
during an operation that takes more than a few seconds. See <xref linkend="controls-progress-bars"/> for more details about proper use of
progress bars.</para>
<para>A progress window should always appear as an independent window in a window list.
If progress of a task makes a window temporarily unusable, do not present a modal dialog-like progress window in front of it.
Instead, present progress somewhere in the original window, making all its other elements temporarily insensitive.
This helps reduce visual clutter.</para>
<figure id="example-progress-figure">
<title>An example of a progress window</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-progress.png" width="425" depth="159" format="PNG"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-progress.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>An example of a progress window</phrase>
</textobject>
</mediaobject>
</figure>
<formalpara>
<title>Title Format</title>
<para>Progress windows should have a title representing the overall
operation: for example <guilabel>Copying Files</guilabel>, <guilabel>Installing</guilabel>, or <guilabel>Calling</guilabel>.
As with other window titles, do not end progress window titles with an ellipsis.</para>
</formalpara>
<formalpara>
<title>Resizing</title>
<para>Progress windows should be resizable if they contain non-static
information the user may want to copy (for example, the source URL in a
download progress window). Otherwise they should not be resizable.</para>
</formalpara>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>It is often better to use the progress bar contained in many
primary windows' statusbar rather than a progress window. See
<xref linkend="progress-windows-vs-status-bar"/> for details on
choosing between the two.</para>
</listitem>
<listitem>
<para>Progress windows should use primary and secondary text like an
alert. See <xref linkend="alert-text"/></para>
</listitem>
<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
rotated" or "12.1 of 30 MB downloaded" rather than
"13% complete".</para>
</listitem>
<listitem>
<para>If possible, an estimate of the time left until the operation is
complete should also be included in the progress bar text. Indicate
that the "time left" is an estimate using the word
"about".</para>
</listitem>
<listitem>
<para>Immediately beneath the progress bar, place italicized text
indicating the current sub-operation being performed. This might be a
step in a sequence, "Contacting control tower for permission to
land", or it could be the current object being operated on in a
bulk operation, "Rotating MonaLisa.png", "Rotating
StarryNight.png".</para>
</listitem>
<listitem>
<para>If the operation in progress is potentially hazardous
(destructive, costly, etc) or heavily taxes a limited resource for
more than ten seconds (network bandwidth, hard disk, CPU, etc),
consider placing a <guibutton>Pause</guibutton> <link linkend="controls-toggle-buttons">toggle button</link> to the right of
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>
</listitem>
</itemizedlist>
<figure id="example-complex-progress-figure">
<title>A progress window for a file copy operation</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-progress-copy-file.png" width="408" depth="227" format="PNG"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-progress-copy-file.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A progress window for a copy operation</phrase>
</textobject>
</mediaobject>
</figure>
<sect2 id="progress-window-checklists">
<title>Checklist Windows</title>
<para>Occasionally a procedure is comprised of a series of user
performable actions. In these cases, particularly when it is desirable
that the user acquire some familiarity with the actions involved in a
procedure, checklist windows may be used.</para>
<example>
<title>Firewall Setup Wizard</title>
<para>A personal firewall setup wizard might install the firewall
package, add entries for the firewall to /etc/xinetd.conf, restart the
internet super-daemon, and configure the user's web browser to
operate through the firewall. It may be desirable that the user is
exposed to the series of actions involved in setting up the firewall to
increase the chances that they will be sucessful in making
modifications later, if they so desire.</para>
</example>
<figure id="example-checklist-start-figure">
<title>An example checklist window (Ready to Start)</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-progress-checklist-start.png" width="422" depth="249" format="PNG"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-progress-checklist-start.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A checklist window</phrase>
</textobject>
</mediaobject>
</figure>
<figure id="example-checklist-in-progress-figure">
<title>An example checklist window (In Progress)</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-progress-checklist.png" width="336" depth="220" format="PNG"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-progress-checklist.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A checklist window</phrase>
</textobject>
</mediaobject>
</figure>
<figure id="example-checklist-done-figure">
<title>An example checklist window (Completed)</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-progress-checklist-done.png" width="356" depth="223" format="PNG"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-progress-checklist-done.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A checklist window</phrase>
</textobject>
</mediaobject>
</figure>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>If knowing the series of steps in an operation isn't that
useful to the user, just use a regular progress window. Remember
that you are probably more interested in the information than most
users, many of whom will find the technical steps confusing rather
than helpful.</para>
</listitem>
<listitem>
<para>Unlike regular progress windows, checklist windows should not
close automatically when the operation is complete and should
require explicit user input before they begin. This is because one
of their purposes is to inform the user concerning an
operation's contingent steps.</para>
</listitem>
<listitem>
<para>The progress bar indicates progress in the overall operation,
not each step. While this is more difficult to program, it is the
information most useful to the user. Just estimate how long each of
the steps takes relative to each other and assign each step a fixed
ratio of the progress bar's progress accordingly.</para>
</listitem>
<listitem>
<para>Do <emphasis>not</emphasis> use a checklist window for a
series of internal programmatic steps, use a regular progress
window. For example "Connect to mail server",
"Authenticate with mail server", "Download
messages", "Disconnect" would <emphasis>not</emphasis>
be an appropriate series of steps for a checklist window, but would
be appropriate sub-operation steps for a regular progress window.</para>
</listitem>
</itemizedlist>
</sect2>
</sect1>
<sect1 id="windows-dialog">
<title>Dialogs</title>
<para>A dialog provides an exchange of information, or dialog, between the
user and the application. Use a dialog to obtain additional information
from the user that is needed to carry out a particular command or task.</para>
<para>A dialog should not appear in the panel window list.
Any open dialogs should be raised above the application when
the application window itself is selected from the window list.</para>
<figure>
<title>An example of a dialog</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-dialog-tabbed.png" width="357" depth="322" format="PNG"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-dialog-tabbed.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>An example of a tabbed dialog: the GNOME print dialog</phrase>
</textobject>
</mediaobject>
</figure>
<formalpara>
<title>Title Format:</title>
<para><replaceable>Name of command that opened the dialog</replaceable>
(without any trailing ellipsis)</para>
</formalpara>
<formalpara>
<title>Window Commands:</title>
<para>Minimize, Roll-up/Unroll</para>
</formalpara>
<formalpara>
<title>Buttons:</title>
<para>Follow the guidelines for Alert buttons, see <xref linkend="alert-button-order"/>.</para>
</formalpara>
<para>Your dialog may specify a default button, that is activated when the
user presses the <keycap>Return</keycap> key. See <xref linkend="default-buttons"/> for guidance on choosing an appropriate
default button.</para>
<sect2 id="dialog-buttons">
<title>Additional Buttons</title>
<para>You can include other buttons in a dialog's main button area
in addition to the affirmative button and <guibutton>Cancel</guibutton>,
but any more than one or two such buttons will make the dialog appear
complicated and difficult to use. As with any other button, keep the
labels as concise as possible to minimize this effect.</para>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Place buttons that apply to the dialog as a whole in the main
button area row at the bottom of the dialog, to the left of the
<guibutton>Cancel</guibutton> button.</para>
</listitem>
<listitem>
<para>Place buttons that apply to one or a few controls next to
their associated controls. For instance, place a
<guibutton>Browse...</guibutton> button at the trailing edge of the
text field it fills in.</para>
</listitem>
</itemizedlist>
</sect2>
<sect2 id="dialog-layout">
<title>Layout</title>
<para>A clean, logical dialog layout helps the user to quickly
understand what information is required from them.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>
Arrange controls in your dialog in the direction that people read.
In western locales, this is generally left-to-right, top-to-bottom.
Position the main controls with which the user will interact as close to
the upper left corner as possible. Follow similar guidelines for
arranging controls within groups in the dialog, and for specifying the
order in which controls are traversed using the <keycap>Tab</keycap>
key.</para></listitem>
<listitem><para>
When opening a dialog, provide initial keyboard focus to the
component that you expect users to operate first. This focus is
especially important for users who must use a keyboard to navigate your
application.</para></listitem>
<listitem><para>Provide and show sensible default values for as many of the
controls in your dialog as possible when it is opened, so the user does
not have to generate the information from scratch. These defaults may
come from system settings (for example, hostname or IP address), or from
information that the user has previously entered in this or another
application (for example, email address or network proxy).</para></listitem>
</itemizedlist>
<para>See <xref linkend="design"/> for more detailed information on
arranging controls in dialogs.</para>
<para>See <xref linkend="controls-notebooks"/> for information on using
tabbed notebook controls in dialogs.</para>
</sect2>
<sect2 id="common-dialogs">
<title>Common Dialogs</title>
<para>The gtk and GNOME libraries provide standard dialogs for many
common tasks, including opening and saving files, choosing fonts and
colors, and printing. Always use these when the user is performing one
of these tasks. You may modify the dialogs to reflect the needs of your
particular application (for example, adding preview
<guibutton>Play</guibutton> and <guibutton>Stop</guibutton> buttons to
the Open File dialog in an audio application), but do not change or
remove features so much as to make them unrecognizable.</para>
</sect2>
</sect1>
<sect1 id="windows-assistant">
<title>Assistants</title>
<!--<remark>FIXME: need to finish this section</remark>-->
<para>An assistant is a secondary window that guides the user through an
operation by breaking it into sequential steps. Assistants are useful for
making complex operations less intimidating, as they restrict the
information visible to the user at any given moment.</para>
<para>Because assistants provide a relatively small number of controls on
the screen at any given time, they have sufficient space for inline
documentation. Therefore, do not include a <guibutton>Help</guibutton>
button in an assistant window. If you cannot make an operation
sufficiently clear in an assistant without resorting to a
<guibutton>Help</guibutton> button, you need to simplify it further.</para>
<para>Assistants do have major downsides. After using an assistant
it is often hard to figure out where the individual settings aggregated
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>
</para>
<warning><para>Assistants are often used in situations where a better
solution would be to simplify, or even better automate, the process.
Before using an assistant to step people through a complex operation,
consider if the operation can be fundamentally simplified so an
assistant is unnecessary.</para></warning>
<formalpara>
<title>Window Commands:</title>
<para>Close, Minimize/Unminimize, Roll-up/Unroll</para>
</formalpara>
<sect2 id="assistant-first-page">
<title>Introductory Page</title>
<para>The first page provides the user with the "big picture".
Place the title of the assistant in the window's title bar and the
assistant's title area, along with an optional picture. Beneath
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>
<formalpara>
<title>Title Format:</title>
<para><replaceable>Assistant Title</replaceable></para>
</formalpara>
<formalpara>
<title>Buttons:</title>
<para><guibutton>Cancel</guibutton>, <guibutton>Forward</guibutton></para>
</formalpara>
<figure>
<title>Example of the first page of an assistant</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/windows-assistant-first-page.png" format="PNG" width="502" depth="318"/>
</imageobject>
<imageobject>
<imagedata fileref="images/windows-assistant-first-page.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Screenshot showing the first page of an assistant for
creating a new email account</phrase>
</textobject>
</mediaobject>
</figure>
</sect2>
<sect2 id="assistant-middle-page">
<title>Content Pages</title>
<para>Content pages contain the actual settings of the assistant.
Summarize the type of setting present on each content page in its title
area. For example, <guilabel>Mail Server</guilabel>.</para>
<formalpara>
<title>Title Format:</title>
<para><replaceable>Assistant Title</replaceable> - (<replaceable>Current
Page </replaceable> of <replaceable>Total Pages</replaceable>)</para>
</formalpara>
<formalpara>
<title>Buttons:</title>
<para><guibutton>Cancel</guibutton>, <guibutton>Back</guibutton>,
<guibutton>Forward</guibutton></para>
</formalpara>
<!--
<figure>
<title>Example of a middle page of an assistant</title>
<mediaobject>
<imageobject>
<imagedata depth="341" fileref="images/windows-assistant-middle-page.png"
format="PNG" width="452" />
</imageobject>
<imageobject>
<imagedata fileref="images/windows-assistant-middle-page.eps" format="EPS" />
</imageobject>
<textobject>
<phrase>Screenshot showing the third page of an email account
assistant, asking for mail server information</phrase>
</textobject>
</mediaobject>
</figure>
-->
</sect2>
<sect2 id="assistant-last-page">
<title>Last Page</title>
<para>The last page should summarize the settings that will be changed
by the assistant, and how the user can modify them later.</para>
<formalpara>
<title>Title Format:</title>
<para>Finish <replaceable>Assistant Title</replaceable></para>
</formalpara>
<formalpara>
<title>Buttons:</title>
<para><guibutton>Cancel</guibutton>, <guibutton>Back</guibutton>,
<guibutton>Finish</guibutton></para>
</formalpara>
</sect2>
</sect1>
</chapter>
<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>
<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" 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 id="menus-types">
<title>Types of Menu</title>
<sect2 id="menu-type-drop-down">
<title>Drop-down Menus</title>
<figure id="drop-down-menu">
<title>A typical drop-down menu</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-dropdown.png" format="PNG" width="166" depth="300"/></imageobject>
<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>
<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>
<itemizedlist><title>Guidelines</title>
<listitem><para>Only place items on a menu that relate to that menu's title.</para></listitem>
<listitem><para>Organize menu items in the standard order— see <xref linkend="menus-standard"/>. For application-specific items where there is no standard order, arrange in numerical or other logical order (for example, <guimenuitem>50%</guimenuitem>, <guimenuitem>100%</guimenuitem>, <guimenuitem>200%</guimenuitem>), task order (for example, <guimenuitem>Compile</guimenuitem> followed by <guimenuitem>Debug</guimenuitem>) or by expected frequency of use.</para></listitem>
<listitem><para>Limit top-level menus to a maximum of about 15 items. If you have any more items than this, consider moving a functionally-related subset of the items into a submenu or a new top-level menu.</para></listitem>
<listitem><para>Do not add or remove individual menu items while the application is running, make them insensitive instead. Entire menus may be added or removed from the menubar at runtime, however, for example in component-based applications.</para></listitem>
<listitem><para>Immediately update menu items that are edited directly or indirectly by the user, such as those on the <guisubmenu>Open Recent</guisubmenu> submenu and the <guimenu>Bookmarks</guimenu> menu.</para></listitem>
</itemizedlist>
<remark> CB-Ed: As in JLFDG AT p. 33, perhaps provide a table of common access keys, or "mnemonics." </remark>
<remark> CFB: the keyboard navigation chapter already does so </remark>
</sect2>
<sect2 id="menu-type-submenu">
<title>Submenus</title>
<figure id="submenu">
<title>A drop-down menu with a submenu</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-submenu.png" format="PNG" width="352" depth="264"/></imageobject>
<imageobject><imagedata fileref="images/menus-submenu.eps" format="EPS"/></imageobject>
<textobject><phrase>Screenshot of a drop-down menu with a submenu</phrase></textobject>
</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>
<itemizedlist><title>Guidelines</title>
<listitem><para>Use submenus sparingly, as they are physically difficult to navigate and make it harder to find and reach the items they contain.</para></listitem>
<listitem><para>Do not create submenus with fewer than three items, unless the items are added dynamically (for example the <menuchoice><guimenu>File</guimenu><guimenuitem>New Tab</guimenuitem></menuchoice> submenu in <application>gnome-terminal</application>).</para></listitem>
<listitem><para>Do not nest submenus within submenus. More than two levels of hierarchy are difficult to memorize and navigate.</para></listitem>
</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>
</sect2>
<sect2 id="menu-type-popup">
<title>Popup Menus</title>
<figure id="popup-menu">
<title>A popup menu for a mail folder</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-popup.png" format="PNG" width="251" depth="233"/></imageobject>
<imageobject><imagedata fileref="images/menus-popup.eps" format="EPS"/></imageobject>
<textobject><phrase>Screenshot of a popup menu for a mail folder, listing the actions that can be performed on that folder</phrase></textobject>
</mediaobject>
</figure>
<para>Popup menus provide shortcuts to those menu items that are applicable only to the currently selected object. As such, they are sometimes known as "context menus" or "shortcut menus". A popup menu is shown when the user right-clicks on an object, or selects the object and presses <keycombo><keycap>Shift</keycap><keycap>F10</keycap></keycombo>.</para>
<para>Be aware that popup menus are used primarily by intermediate and advanced users. Even some users who have used graphical desktops for many years do not know about popup menus until somebody shows them.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Provide a popup menu for every object, selectable part, and text input target such as entry fields.</para></listitem>
<listitem><para>Provide an access key for each item. However, to enhance their spatial efficiency and readability, do not show keyboard shortcuts in popup menus.</para></listitem>
<listitem><para>Since the user may not be aware of their presence, do not provide functions that are only accessible from popup menus unless you are confident that your target users will know how to use popup menus.</para>
<remark>But see http://bugzilla.mozilla.org/show_bug.cgi?id=34357</remark>
</listitem>
<listitem><para>Order items on a popup menu as follows:</para>
<itemizedlist>
<listitem><para>the double-click action for object, when it exists</para></listitem>
<listitem><para>other commands and settings in expected frequency-of-use order</para></listitem>
<listitem><para>transfer commands such as <command>Cut</command>, <command>Copy</command>, and <command>Paste</command></para></listitem>
<listitem><para><guimenuitem>Input Methods</guimenuitem>, where applicable. <guimenuitem>Input Methods</guimenuitem> is provided by GTK+ for supporting alternatives to the keyboard for input (such as used for Japanese, Chinese, and some accessibility technologies).</para></listitem>
</itemizedlist>
</listitem>
<listitem><para>Popup menus need to be as simple as possible to maximize their efficiency. Do not place more than about ten items on a popup menu, and do avoid submenus.</para></listitem>
</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>
</sect2>
</sect1>
<sect1 id="menus-design">
<title>Designing a Menu</title>
<sect2 id="menu-grouping">
<title>Grouping Menu Items</title>
<figure id="menu-separators">
<title>Items grouped on a menu with separators</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-dropdown.png" format="PNG" width="166" depth="300"/></imageobject>
<imageobject><imagedata fileref="images/menus-dropdown.eps" format="EPS"/></imageobject>
<textobject><phrase>Screenshot of a menu divided into five logical groups with menu separators</phrase></textobject>
</mediaobject>
</figure>
<para>Menu separators are the horizontal dividing lines that visually separate groups of related items on a drop-down menu, submenu, or popup menu. For example, the separators in <xref linkend="menu-separators"/> divide the menu into five functionally-related groups. Good use of separators helps to "chunk" the information on a menu and make it easier to scan and memorize.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>The best size for a group is around 2-5 items. Single-item groups are best placed at the top or bottom of a menu, otherwise try to group them with other single items of the same type on the same menu.</para></listitem>
<listitem><para>Order items within a group logically, numerically, in task order or by expected frequency of use, as appropriate.</para></listitem>
<listitem><para>Only place one type of menu item in each group— <link linkend="menu-item-type-command">command</link>, <link linkend="menu-item-type-mutable">mutable</link>, <link linkend="menu-item-type-check">check box</link> or <link linkend="menu-item-type-radio">radio button</link>. For example, do not place commands (such as <menuchoice><guimenu>View</guimenu><guimenuitem>Reload</guimenuitem></menuchoice>) and settings (such as. <menuchoice><guimenu>View</guimenu><guimenuitem>Toolbar</guimenuitem></menuchoice>) in the same group.</para></listitem>
</itemizedlist>
</sect2>
<sect2 id="menu-item-types">
<title>Types of menu item</title>
<sect3 id="menu-item-type-command">
<title>Command Items</title>
<figure id="command-items-figure"><title>A group of command items on a menu</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-command-group.png" format="PNG" width="253" depth="105"/></imageobject>
<imageobject><imagedata fileref="images/menus-command-group.eps" format="EPS"/></imageobject>
<textobject><phrase>Screenshot of a group on a menu containing only command items: Save, Save As, and Revert</phrase></textobject>
</mediaobject>
</figure>
<para>Command items are menu items that initiate a command or perform an action, such as <guimenuitem>Save</guimenuitem>, <guimenuitem>Print</guimenuitem> or <guimenuitem>Quit</guimenuitem>. They may act on the currently active document in a document based application, or on the application itself.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Provide a keyboard shortcut for standard or frequently used command items. See <xref linkend="shortcuts"/> for more information on choosing shortcut keys.</para></listitem>
<!-- <para>Shortcuts consist of the <keysym>Control</keysym> key and an alphanumeric key, or of one of the keys <keysym>F1</keysym>-<keysym>F12</keysym>, <keysym>Insert</keysym>, <keysym>Delete</keysym>, <keysym>Home</keysym>, <keysym>End</keysym>, <keysym>Page Up</keysym> or <keysym>Page Down</keysym>. The <keysym>Shift</keysym> key may be used as an additional modifier for commands which are related to or the opposite of the command accessed without the <keysym>Shift</keysym> key. See <xref linkend="shortcuts"/> for more information.</para> -->
<listitem><para>Do not remove command items from the menu when they are unavailable, make them insensitive instead. This allows the user to infer what functionality the application provides even if it is not currently available, and keeping the menu structure static makes it easier to memorize.</para></listitem>
<listitem><para>Label the menu item with a trailing ellipsis ("...") only if the command requires further input from the user before it can be performed. Do not add an ellipsis to items that only present a confirmation dialog (such as <guimenuitem>Delete</guimenuitem>), or that do not <emphasis>require</emphasis> further input (such as <guimenuitem>Properties</guimenuitem>, <guimenuitem>Preferences</guimenuitem> or <guimenuitem>About</guimenuitem>).</para></listitem>
</itemizedlist>
<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>
</sect3>
<sect3 id="menu-item-type-mutable">
<title>Mutable Command Items</title>
<para>A mutable command item changes its label when selected. For example, <menuchoice><guimenu>View</guimenu><guimenuitem>Reload</guimenuitem></menuchoice> in a browser may change to <guimenuitem>Stop</guimenuitem> to allow the user to interrupt the operation if it is taking a long time.</para>
<para>Note that mutable menu items can be problematic because the user never sees the menu item changing, so it is not obvious that a different function has become available. </para>
<itemizedlist><title>Guidelines</title>
<listitem><para>If your mutable menu items are <link linkend="menu-item-type-command">command items</link>, and you have sufficient space on your menu, consider providing two adjacent menu items for the commands instead. Then make the items sensitive or insensitive as the situation demands. This also makes it easier for the user to tell when different shortcuts are available for each of the commands, for example <keycombo><keycap>Ctrl</keycap><keycap>R</keycap></keycombo> for <guimenuitem>Reload</guimenuitem>, and <keycap>Esc</keycap> for <guimenuitem>Stop</guimenuitem>.</para></listitem>
<listitem><para>Do not use mutable menu items to toggle a two-state setting (for example, <guimenuitem>Show Toolbar</guimenuitem> and <guimenuitem>Hide Toolbar</guimenuitem>). Present such items as a single <link linkend="menu-item-type-check">check box item</link> instead.</para></listitem>
</itemizedlist>
</sect3>
<sect3 id="menu-item-type-check">
<title>Checkbox Items</title>
<figure id="checkbox-items-figure"><title>A group of check box items on a menu</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-checkbox-group.png" format="PNG" width="231" depth="112"/></imageobject>
<imageobject><imagedata fileref="images/menus-checkbox-group.eps" format="EPS"/></imageobject>
<textobject><phrase>Screenshot of group on a View menu containing four check box items: Main Toolbar, Side Pane, Location Bar and Status Bar</phrase></textobject>
</mediaobject>
</figure>
<para>A check box menu item shows the current state of a two-state setting, and allows the user to toggle it by selecting the menu item.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Use a check box menu item only when it is obvious from the label what the set and unset states mean. This usually means that the two states are logical or natural opposites, such as "on" and "off". If this is not the case, use two <link linkend="menu-item-type-radio">radio button items</link> instead.</para></listitem>
<listitem><para>Never change the label of a check box menu item in response to the user selecting the item.</para></listitem>
</itemizedlist>
</sect3>
<sect3 id="menu-item-type-radio">
<title>Radio Button Items</title>
<figure id="radiobutton-items-figure"><title>A group of radiobutton items on a menu</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-radiobutton-group.png" format="PNG" width="167" depth="117"/></imageobject>
<imageobject><imagedata fileref="images/menus-radiobutton-group.eps" format="EPS"/></imageobject>
<textobject><phrase>Screenshot of group on a menu containing three radiobutton items: view as icons, view as list and view details</phrase></textobject>
</mediaobject>
</figure>
<para>Radio button menu items show which of two or more mutually-exclusive settings are currently selected, and allow the user to choose a different setting by selecting its menu item.</para>
<itemizedlist>
<listitem><para>If you need to offer a choice of two mutually-exclusive settings to the user, use a group of two radio button items instead of a single check box menu item if the settings are not clearly opposites. For example, represent <guimenuitem>View as Icons</guimenuitem> and <guimenu>View as List</guimenu> as two radio button items.</para></listitem>
<listitem><para>Never change the label of a radio button menu item in response to the user selecting or deselecting the item.</para></listitem>
</itemizedlist>
<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.
We also need to make recommendations to avoid some common mistakes,
including:
* Confusing menu items acting as radio buttons in a group with menu
items acting as check boxes.
* 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>What is the best way to present menus given the known variants? Multiple shots? Segments?</remark>
<figure id="generic-menu-bar">
<title>A menubar showing all the standard menu titles in their correct order</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>
<simplelist type="horiz" columns="9">
<member><guimenu><accel>F</accel>ile</guimenu></member>
<member><guimenu><accel>E</accel>dit</guimenu></member>
<member><guimenu><accel>V</accel>iew</guimenu></member>
<member><guimenu><accel>I</accel>nsert</guimenu></member>
<member><guimenu>For<accel>m</accel>at</guimenu></member>
<member><guimenu><accel>G</accel>o</guimenu></member>
<member><guimenu><accel>B</accel>ookmarks</guimenu></member>
<!--<member><guimenu><accel>T</accel>ools</guimenu></member>-->
<member><guimenu><accel>W</accel>indows</guimenu></member>
<member><guimenu><accel>H</accel>elp</guimenu></member>
</simplelist>
</textobject>
</mediaobject>
</figure>
<sect2 id="the-file-menu">
<title>File</title>
<para>The <guimenu>File</guimenu> menu contains commands that operate on the current document. It is the left-most item in the menubar because of its importance and frequency of use, and because it is a relevant menu in many applications. Historically, because most applications already had this menu, and because the distinction between closing documents and closing windows became blurred over time, the <guimenu>File</guimenu> menu has also become the standard location for <guimenuitem>Quit</guimenuitem>.</para>
<para>The items on the <guimenu>File</guimenu> menu are generally ordered by locality, closest first. That is, items to save or load from file, followed by printing, followed by sending to a remote user. Try to maintain this ordering if you have to add new items to the menu.</para>
<para>If your application does not operate on documents, name this item for the type of object it displays. For example, many games should have a <guimenu>Game</guimenu> instead of a <guimenu>File</guimenu> menu. However, place the <guimenuitem>Quit</guimenuitem> menu item last on this menu nonetheless.</para>
<remark>GJM: Quit should be deprecated. Close is often sufficient; especially when
the application saves state as it should.</remark>
<figure id="generic-file-menu"><title>A generic File menu</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-file.png" width="290" depth="454" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/menus-file.eps" format="EPS"/></imageobject>
<textobject>
<literallayout>
<guimenu>File</guimenu>
<guimenuitem><accel>N</accel>ew Ctrl+N</guimenuitem>
<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>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>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.
<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>
</entry>
</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.
<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.
<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 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 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.
<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.
<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>
<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>
<row>
<entry><guimenuitem><accel>Q</accel>uit</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>Q</keycap></keycombo></entry>
<entry><para>Closes the application. If there are unsaved changes in any open documents, present the user with a <link linkend="alerts-confirmation">confirmation alert</link> for each affected document, giving the option to save the changes, discard them, or cancel. If there are no unsaved changes, close the application immediately without presenting any further messages or dialogs.</para>
<!-- This para in response to bug #73618--><para>In particular, non-document based applications, for example a game or a calculator, should save their state and exit immediately. This state should be restored the next time the application is started.</para>
<remark>Kathy had suggested not providing a shortcut key to Quit. I can find no discussion of this. (And I think it should go away.)</remark>
</entry>
</row>
</tbody>
</tgroup>
</table>
</sect3>
</sect2>
<sect2 id="menu-standard-edit">
<title>Edit</title>
<para>The <guimenu>Edit</guimenu> menu contains items relating to editing both the document (clipboard handling, search and replace, and inserting special objects) and the user's preferences. Preferences are edited here rather than on a <guimenu>Settings</guimenu> menu, because:</para>
<itemizedlist>
<listitem><para>most applications' preferences windows are accessed via a single menu item, and single-item menus offer poor usability</para></listitem>
<listitem><para>most applications already contain a suitable <guimenu>Edit</guimenu> menu.</para></listitem>
</itemizedlist>
<remark>I think we should move to a MacOS/X concept of having an "AppName" menu that contains things like preferences, about, quit, etc. -Seth</remark>
<figure id="generic-edit-menu">
<title>A generic Edit menu</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-edit.png" width="226" depth="417" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/menus-edit.eps" format="EPS"/></imageobject>
<textobject>
<literallayout class="monospaced">
<guimenu><accel>E</accel>dit</guimenu>
<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><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.
<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.
<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.
<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.
<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.
<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>
</table>
</sect3>
<sect3>
<title>Inserting Special Objects</title>
<para>Where applicable, provide items on the <guimenu>Edit</guimenu> menu that insert special objects such as images, links, GUI controls or the current date and time. </para>
<para>If you have up to three types of object that can be inserted, add them as individual items to this menu, for example <guimenuitem>Insert Image</guimenuitem>, or <guimenuitem>Insert External Link</guimenuitem>. If you have between three and six types, place them on an <menuchoice><guimenu>Edit</guimenu><guimenuitem>Insert</guimenuitem></menuchoice> submenu. If you have more than six, add a separate <link linkend="menu-standard-insert"><guimenu>Insert</guimenu> menu</link> to the menubar.</para>
</sect3>
<sect3>
<title>User Preferences</title>
<table>
<title>User Preferences 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>Pr<accel>e</accel>ferences</guimenuitem></entry>
<entry>None</entry>
<entry>Opens a <link linkend="preference-windows">preferences window</link> allowing the user to change preferences for the whole application. Changes will apply to all running and subsequent instances of the application.</entry>
</row>
</tbody>
</tgroup>
</table>
</sect3>
</sect2>
<sect2 id="menu-standard-view">
<title>View</title>
<para>The <guimenu>View</guimenu> menu contains only items that affect the user's view of the current document. Do not place any items on the <guimenu>View</guimenu> menu that affect the content of the current document. (Exception: <menuchoice><guimenu>View</guimenu><guimenuitem>Reload</guimenuitem></menuchoice> may change the current contents if, for example, the document is a webpage that has been recently updated on the server).</para>
<figure id="generic-view-menu">
<title>A generic View menu</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-view.png" width="166" depth="300" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/menus-view.eps" format="EPS"/></imageobject>
<textobject>
<literallayout class="monospaced">
<guimenu><accel>V</accel>iew</guimenu>
<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>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>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 #????
<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>.
<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 a 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.
<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>
</tbody>
</tgroup>
</table>
</sect3>
</sect2>
<sect2 id="menu-standard-insert">
<title>Insert</title>
<para>The <guimenuitem>Insert</guimenuitem> menu lists the type of special objects that can be inserted into the document at the current caret position, for example images, links, page breaks or GUI objects. Only provide this menu if you have more than about six types of object that can be inserted, otherwise place individual items for each type on the <link linkend="menu-standard-edit"><guimenu>Edit</guimenu> menu</link>.</para>
<figure id="generic-insert-menu">
<title>A generic Insert menu</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-insert.png" width="118" depth="245" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/menus-insert.eps" format="EPS"/></imageobject>
<textobject>
<literallayout class="monospaced">
<guimenu><accel>P</accel>age Break</guimenu>
<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>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>
</literallayout>
</textobject>
</mediaobject>
</figure>
<para>The types of object will vary between applications, but the table below shows some common types that may be applicable.</para>
<table>
<title>Insert 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>P</accel>age Break</guimenuitem></entry>
<entry>None</entry>
<entry>Inserts a page break at the caret position. Show the page break visually, for example as a dotted line across the page, unless the user has specifically requested not to see them.</entry>
</row>
<row>
<entry><guimenuitem><accel>D</accel>ate and Time...</guimenuitem></entry>
<entry>None</entry>
<entry>Inserts the current date and/or time at the caret position. Open a dialog giving a choice of date and time formats. If applicable, also offer the choice to insert either as plain text, so the specified date and time will always appear in the document, or as a special field that will updated every time the document is opened, refreshed or printed.</entry>
</row>
<row>
<entry><guimenuitem>Sy<accel>m</accel>bol...</guimenuitem></entry>
<entry>None</entry>
<entry>Inserts a special symbol, such as a mathematical symbol or foreign character, at the caret position. Open a dialog showing all the available symbols as a table, from which the user can choose. The user must be able to add multiple symbols to the document at one time without having to close and re-open the dialog.</entry>
</row>
<row>
<entry><guimenuitem><accel>S</accel>heet...</guimenuitem></entry>
<entry>None</entry>
<entry>Adds a new sheet to the current workbook. Do not prompt for a name, but choose a sensible default (such as <guilabel>Sheet-2</guilabel>) and allow the user to change it later.</entry>
</row>
<row>
<entry><guimenuitem><accel>R</accel>ows...</guimenuitem></entry>
<entry>None</entry>
<entry>Adds new rows to a table in which one or more rows or cells are currently selected. Open a dialog asking whether to insert rows above or below the current selection, and for any other required information. Copy the row format from the last or first row of the current selection respectively, unless the user specifies otherwise.</entry>
</row>
<row>
<entry><guimenuitem><accel>C</accel>olumns...</guimenuitem></entry>
<entry>None</entry>
<entry>Adds new columns to a table in which one or more columns or cells are currently selected. Open a dialog asking whether to insert columns to the left or right of the current selection, and for any other required information. Copy the column format from the right- or left-most column of the current selection respectively, unless the user specifies otherwise.</entry>
</row>
<row>
<entry><guimenuitem><accel>I</accel>mage...</guimenuitem></entry>
<entry>None</entry>
<entry>Inserts an image into the document from a file. Present a standard Open File dialog filtered on acceptable file types, from which the user can choose an image file to insert.</entry>
</row>
<row>
<entry><guimenuitem><accel>G</accel>raph...</guimenuitem></entry>
<entry>None</entry>
<entry>Inserts a graph into the document. Open a dialog or assistant that allows the user to build (or open from a file) a graph of their choice, using the current selection as an indication of which values, axis labels and data labels to use.</entry>
</row>
<row>
<entry><guimenuitem><accel>F</accel>rom FIle...</guimenuitem></entry>
<entry>None</entry>
<entry>Inserts an object from any acceptable file type, for example plain text, formatted text, or an image. Present a standard Open File dialog filtered on acceptable file types, from which the user can choose a file to insert.</entry>
</row>
<row>
<entry><guimenuitem>E<accel>x</accel>ternal Link...</guimenuitem></entry>
<entry>None</entry>
<entry>Inserts a link to an object stored in a different file, or on a remote system. The object is not embedded in or saved with the document, only a link to it. Open a dialog in which the user can type or choose the name of the object, for example a filename or a webpage URL. Show the link in the document in as informative way as possible. For example, show a link to an image as a thumbnail of that image, unless the user specifies otherwise.</entry>
</row>
</tbody>
</tgroup>
</table>
</sect2>
<sect2 id="menu-standard-format">
<title>Format</title>
<para>A <guimenu>Format</guimenu> menu contains commands to change the visual appearance of the document. For example, changing the font, color, or line spacing of a text selection.</para>
<para>The difference between these commands and those on the <link linkend="menu-standard-view"><guimenuitem>View</guimenuitem> menu</link> is that changes made with Format commands are persistent and saved as part of the document, for example as HTML or RTF tags.</para>
<figure id="generic-format-menu">
<title>A generic Format menu</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-format.png" width="163" depth="265" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/menus-format.eps" format="EPS"/></imageobject>
<textobject>
<literallayout class="monospaced">
<guimenu><accel>S</accel>tyle...</guimenu>
---
<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>C</accel>ells...</guimenuitem>
<guimenuitem><accel>L</accel>ist...</guimenuitem>
---
<guimenuitem>L<accel>ayer</accel>...</guimenuitem>
<guimenuitem>P<accel>a</accel>ge...</guimenuitem>
</literallayout>
</textobject>
</mediaobject>
</figure>
<para>Items found on the <guimenu>Format</guimenu> will be very application-specific, but some common items are listed in the table below.</para>
<table>
<title>Format 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>tyle...</guimenuitem></entry>
<entry>None</entry>
<entry>Sets the style attributes of the selected text or objects either individually or to a named, predefined style. Open a dialog allowing the user to set attributes such as bold, italic, size and spacing individually, and to create their own named styles where applicable.</entry>
</row>
<row>
<entry><guimenuitem><accel>F</accel>ont...</guimenuitem></entry>
<entry>None</entry>
<entry>Sets the font properties of the selected text or objects. Open a dialog allowing the user to choose font, size, style, color, or whatever other attributes are applicable.</entry>
</row>
<row>
<entry><guimenuitem><accel>P</accel>aragraph...</guimenuitem></entry>
<entry>None</entry>
<entry>Sets the properties of the selected paragraph. Open a dialog allowing the user to choose style, line spacing, tabulation, or whatever other attributes are applicable.</entry>
</row>
<row>
<entry><guimenuitem><accel>B</accel>old</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>B</keycap></keycombo></entry>
<entry>Toggles the boldness of the current text selection on or off. If some of the selection is currently bold and some is not, this command should bolden the selected text.</entry>
</row>
<row>
<entry><guimenuitem><accel>I</accel>talic</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>I</keycap></keycombo></entry>
<entry>Toggles the italicisation of the current text selection on or off. If some of the selection is currently italicised and some is not, this command should italicise the selected text.</entry>
</row>
<row>
<entry><guimenuitem><accel>U</accel>nderline</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>U</keycap></keycombo></entry>
<entry>Toggles underlining of the current text selection. If some of the selection is currently underlined and some is not, this command should underline the selected text.</entry>
</row>
<row>
<entry><guimenuitem><accel>C</accel>ells...</guimenuitem></entry>
<entry>None</entry>
<entry>Sets the properties of the selected table cells. Open a dialog allowing the user to choose alignment, borders, shading, text style, number format, or whatever other attributes are applicable.</entry>
</row>
<row>
<entry><guimenuitem><accel>L</accel>ist...</guimenuitem></entry>
<entry>None</entry>
<entry>Sets the properties of the selected list, or turns the selected paragraphs into a list if they are not already formatted as such. Open a dialog allowing the user to choose number or bullet style, spacing, tabulation, or whatever other attributes are applicable.</entry>
</row>
<row>
<entry><guimenuitem>Laye<accel>r</accel>...</guimenuitem></entry>
<entry>None</entry>
<entry>Sets the properties of all or selected layers of a multi-layered document. Open a dialog allowing the user to choose name, size, visibility, opacity, z-ordering, or whatever other attributes are applicable.</entry>
</row>
<row>
<entry><guimenuitem>P<accel>a</accel>ge...</guimenuitem></entry>
<entry>None</entry>
<entry>Sets the properties of all or selected pages of the document. Open a dialog allowing the user to choose paper size, orientation, columns, margins, or whatever other attributes are applicable.</entry>
</row>
</tbody>
</tgroup>
</table>
</sect2>
<sect2 id="menu-standard-bookmarks">
<title>Bookmarks</title>
<para>Provide a <guimenu>Bookmarks</guimenu> menu in any application that allows the user to browse files and folders, help documents, web pages or any other large information space.</para>
<note><title>Icons</title><para>Show icons for bookmark entries on the Bookmarks menu that indicate the type of the bookmark, even if the user has globally turned off icons for other menu items on the desktop.</para></note>
<figure id="generic-bookmarks-menu">
<title>A generic Bookmarks menu</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-bookmarks.png" width="190" depth="49" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/menus-bookmarks.eps" format="EPS"/></imageobject>
<textobject>
<literallayout class="monospaced">
<guimenu><accel>B</accel>ookmarks</guimenu>
<guimenuitem><accel>A</accel>dd Bookmark </guimenuitem><keycombo><keycap>Ctrl</keycap><keycap>D</keycap></keycombo>
<guimenuitem><accel>E</accel>dit Bookmarks </guimenuitem><keycombo><keycap>Ctrl</keycap><keycap>B</keycap></keycombo>
</literallayout>
</textobject>
</mediaobject>
</figure>
<table>
<title>Bookmark 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>A</accel>dd Bookmark</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>D</keycap></keycombo></entry>
<entry>Adds a bookmark for the current document to the default bookmark list. Do not pop up a dialog asking for a title or location for the bookmark, instead choose sensible defaults (such as the document's title or filename as the bookmark name) and allow the user to change them later using the <guimenuitem>Edit Bookmarks</guimenuitem> feature.</entry>
</row>
<row>
<entry><guimenuitem><accel>E</accel>dit Bookmarks</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>B</keycap></keycombo></entry>
<entry>Allows the user to edit the application's bookmark list. Open a window in which the user can arrange bookmarks into a hierarchy, move, copy, and delete bookmarks, and change their properties.</entry>
</row>
<row>
<entry><emphasis>Bookmark List</emphasis></entry>
<entry>None</entry>
<entry>The user's current list of bookmarks for the application.</entry>
</row>
</tbody>
</tgroup>
</table>
</sect2>
<sect2 id="menu-standard-go">
<title>Go</title>
<para>A <guimenu>Go</guimenu> menu provides commands for quickly navigating around a document or collection of documents, or an information space such as a directory structure or the web.</para>
<para>The contents of the menu will vary depending on the type of application. Different standard menus are presented here for browser-based and document-based applications , but your application may require a combination of both.</para>
<figure id="generic-browser-go-menu">
<title>A generic Go menu for a browser application</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-go-browser.png" width="178" depth="127" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/menus-go-browser.eps" format="EPS"/></imageobject>
<textobject>
<literallayout class="monospaced">
<guimenu><accel>G</accel>o</guimenu>
<guimenuitem><accel>B</accel>ack Alt+Left</guimenuitem>
<guimenuitem><accel>F</accel>orward Alt+Right </guimenuitem>
<guimenuitem><accel>U</accel>p Alt+Up </guimenuitem>
---
<guimenuitem><accel>H</accel>ome Alt+Home </guimenuitem>
<guimenuitem><accel>L</accel>ocation... Ctrl+L</guimenuitem>
</literallayout>
</textobject>
</mediaobject>
</figure>
<table>
<title>Go menu items for a browser 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>B</accel>ack</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keycap>Left</keycap></keycombo></entry>
<entry>Navigates to the previous document in the browser's history list.</entry>
</row>
<row>
<entry><guimenuitem><accel>F</accel>orward</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keycap>Right</keycap></keycombo></entry>
<entry>Navigates to the next document in the browser's history list.</entry>
</row>
<row>
<entry><guimenuitem><accel>U</accel>p</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keycap>Up</keycap></keycombo></entry>
<entry>Navigates to the current document's (or folder's) parent document (or folder). For a document browser, such as an online help viewer, this usually means navigating to the enclosing sub-section, section, chapter or contents page.</entry>
</row>
<row>
<entry><guimenuitem><accel>H</accel>ome</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keycap>Home</keycap></keycombo></entry>
<entry>Navigates to a starting page defined by the user or the application.</entry>
</row>
<row>
<entry><guimenuitem><accel>L</accel>ocation...</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>L</keycap></keycombo></entry>
<entry>Navigates to a user-specified URI. Open a dialog into which the user can type a suitable URI, or select one from a list where applicable (for example, a file selection dialog for applications that can handle file:// URIs).</entry>
</row>
</tbody>
</tgroup>
</table>
<figure id="generic-document-go-menu">
<title>A generic Go menu for document-based applications</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-go-document.png" width="206" depth="127" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/menus-go-document.eps" width="210" depth="121" format="EPS"/></imageobject>
<textobject>
<literallayout class="monospaced">
<guimenu><accel>G</accel>o</guimenu>
<guimenuitem><accel>P</accel>revious Page PgUp </guimenuitem>
<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>
<!-- CFB Commenting out until we have anything to go on it :/
<sect2 id="menu-standard-tools">
<title>Tools</title>
<figure id="generic-tools-menu">
<title>A generic Tools menu</title>
<mediaobject>
<imageobject><imagedata fileref="images/generic-tools-menu.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/generic-tools-menu.eps" format="EPS"/></imageobject>
<textobject>
<literallayout class="monospaced">
<guimenu><accel>T</accel>ools</guimenu>
</literallayout>
</textobject>
</mediaobject>
</figure>
<para>FIXME</para>
</sect2>
-->
<sect2 id="application-windows-menu">
<title>Windows</title>
<para>The Windows menu contains commands that apply to all of the application's open windows. Only use a Windows menu in <link linkend="mdi">multiple document interface</link> (MDI) applications.</para>
<note><title>MDI Applications</title><para>The use of MDI is discouraged, as they have a number of inherent usability problems.</para></note>
<para>You may also label this menu <guimenu><accel>D</accel>ocuments</guimenu>, <guimenu><accel>B</accel>uffers</guimenu>, or similar according to the type of document handled by your application.</para>
<para>The last items on this menu are a numbered list of the application's primary windows, for example <guimenuitem><accel>1</accel>shoppinglist.abw</guimenuitem>. Selecting one of these items raises the corresponding window.</para>
<figure id="generic-windows-menu">
<title>A generic Windows menu</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-windows.png" width="151" depth="172" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/menus-windows.eps" format="EPS"/></imageobject>
<textobject>
<literallayout class="monospaced">
<guimenu><accel>W</accel>indows</guimenu>
<guimenuitem><accel>S</accel>ave All</guimenuitem>
<guimenuitem><accel>C</accel>lose All</guimenuitem>
</literallayout>
</textobject>
</mediaobject>
</figure>
<table>
<title>Windows 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 All</guimenuitem></entry>
<entry>None</entry>
<entry>Saves all open documents. If any documents have no current filename, prompt for a filename for each one in turn using the standard Save dialog.</entry>
</row>
<row>
<entry><guimenuitem><accel>C</accel>lose All</guimenuitem></entry>
<entry>None</entry>
<entry>Closes all open documents. If there are any unsaved changes in any documents, post a <link linkend="alerts-confirmation">confirmation alert</link> for each one in turn.</entry>
</row>
<row>
<entry><guimenuitem><accel>1</accel>. <replaceable>first open window title</replaceable></guimenuitem>
<para><guimenuitem><accel>2</accel>. <replaceable>second open window title</replaceable></guimenuitem></para>
<para>etc.</para></entry>
<entry>None</entry>
<entry>Raises the corresponding window to the top of the window stack.</entry>
</row>
</tbody>
</tgroup>
</table>
</sect2>
<sect2 id="menu-standard-help">
<title>Help</title>
<para>The <guimenu>Help</guimenu> menu provides access to all online documentation for your application. This includes both the user guide, and the <guimenuitem>About</guimenuitem> window which includes a brief description of your application's functionality.</para>
<figure id="generic-help-menu">
<title>A generic Help menu</title>
<mediaobject>
<imageobject><imagedata fileref="images/menus-help.png" width="118" depth="45" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/menus-help.eps" format="EPS"/></imageobject>
<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>
<chapter id="toolbars">
<title>Toolbars</title>
<para>A toolbar is a strip of controls that allows convenient access to commonly-used functions. Most toolbars only contain graphical buttons, but in more complex applications, other types of controls such as drop-down lists, can also be useful.</para>
<!-- This bit more relevant to the utility windows section
<note><para>Although the latter is just a side-effect of the fact that palettes can't be created with the standard toolbar widgets— it would be rather nice if they could, especially as they would then automatically feature in the toolbar keyboard navigation order.</para></note>
-->
<figure id="mail-toolbar-example">
<title>Example toolbar from a simple mail application</title>
<mediaobject>
<imageobject><imagedata fileref="images/toolbars-mail.png" format="PNG" width="428" depth="48"/></imageobject>
<imageobject><imagedata fileref="images/toolbars-mail.eps" format="EPS"/></imageobject>
<textobject><phrase>Example mail application toolbar</phrase></textobject>
</mediaobject>
</figure>
<!-- Notes from GJM:
Text-on-the-side toolbars are now part of Gtk+.
Stock items have mnemonics/access keys. I don't think they should.
-->
<!-- CFB: Assuming for now therefore that we ought to be recommending Gtk toolbars, but trying to keep the text as widget-neutral as possible
<note>
<title>For discussion</title>
<para>A few people only want to recommend one type of toolbar. Which should it be? We can't really recommend the GAL one because it's not part of core GNOME. On the other hand, the Gtk one is somewhat clunky, and projects like Evo, AbiWord etc. are unlikely to switch to it anyime soon.</para>
</note>
-->
<para>Careful and consistent toolbar design speeds up the user's task by giving direct access to functions that would otherwise be hidden on a menu. Use them only for the most important functions, however. Having too many toolbar controls reduces their efficiency by making them harder to find, and too many rows of toolbars reduces the amount of screen space available to the rest of the application.</para>
<sect1 id="toolbars-appearance">
<title>Appearance and Content</title>
<para>The effectiveness of toolbars is increased by maintaining a level of consistency between different applications. The toolbar is one of the first parts of your application that a user will see the first time they run it, so by providing a toolbar that looks familiar to them, you can immediately make them feel comfortable about using your application.</para>
<para>As well as following the recommendations and examples given in this section, look at the toolbars in other well-designed GNOME 2.0 applications for guidance when deciding what— and what not— to put on your application's toolbar.</para>
<para>However many toolbars or <link linkend="toolbox-windows">toolbox windows</link> your application offers, provide one main toolbar by default that contains a representative subset of the application's overall functionality. Many of the buttons on this toolbar will be the same regardless of the type of application.</para>
<para>For example, the main toolbar in an office application will nearly always have <guilabel>New</guilabel>, <guilabel>Open</guilabel> and <guilabel>Save</guilabel> as its first three toolbar buttons. Similarly, the first few buttons in a browser application should always include <guilabel>Back</guilabel>, <guilabel>Forward</guilabel>, <guilabel>Stop</guilabel> and <guilabel>Reload</guilabel>, in that order.</para>
<!-- CB-Fig: A composite figure for all the listitems might be useful. -->
<itemizedlist><title>Guidelines</title>
<listitem><para>Place only the most commonly-used application functions on your toolbars. Don't just add buttons for every menu item.</para></listitem>
<listitem><para>By default, have your toolbars appear directly below the main menu bar.</para></listitem>
<listitem><para>Allow toolbars to be turned on and off in your application's <guilabel>Preferences</guilabel> dialog and by using the <menuchoice><guimenu>View</guimenu><guimenuitem>Toolbar</guimenuitem></menuchoice> menu item. If there is more than one toolbar, they are turned on and off by individual entries in the <menuchoice><guimenu>View</guimenu><guimenuitem>Toolbar</guimenuitem></menuchoice> submenu.</para></listitem>
<listitem><para>All functions that appear on your toolbars must also accessible via the main menu bar, either directly (i.e. an equivalent menu item) or indirectly (e.g. in the <menuchoice><guimenu>Options</guimenu><guimenuitem>Settings</guimenuitem></menuchoice> dialog).</para></listitem>
<listitem><para>Arrange toolbar buttons in the same order and groupings as their equivalents on the main menu bar. In particular, always group sets of mutually-exclusive toolbar buttons.</para></listitem>
<listitem><para>Don't add buttons for <guilabel>Help</guilabel>, <guilabel>Close</guilabel> or <guilabel>Quit</guilabel> to your toolbar by default, as these are rarely used and the space is better used for more useful controls. Similarly, only provide buttons for <guilabel>Undo</guilabel>, <guilabel>Redo</guilabel> and the standard clipboard functions if there is space on the toolbar to do so without sacrificing more useful, application-specific controls.</para></listitem>
<listitem><para>Provide options to show toolbar buttons as text, graphics or both— see <xref linkend="view-toolbar"/> for the menus to use for controlling toolbar display. Also provide an option to return all toolbars in your application to the control center default for this setting.</para></listitem>
<listitem><para>Allow users to configure toolbars to contain their own selection of commands, in whatever order they choose. Provide an option in the configuration dialog to return the toolbars to their default configuration.</para></listitem>
<listitem><para>Save your application's toolbar position and contents as part of the application configuration, and restore them when the application is restarted.</para></listitem>
</itemizedlist>
<sect2 id="vertical-toolbars">
<title>Vertical Toolbars</title>
<para>In general, don't use vertical toolbars. The eye does not scan vertically as well as it does horizontally, groups of mutually exclusive buttons are less obvious when arranged vertically, and showing button labels is more awkward and less space-efficient. Also, some toolbar controls just cannot be used vertically, such as drop-down lists.</para>
<para>Only consider using a vertical toolbar if:</para>
<itemizedlist>
<listitem><para>the configuration of the application window means there would be a lot of wasted space if a horizontal toolbar was used instead, or</para></listitem>
<listitem><para>your application would otherwise require three or more rows of toolbars to appear below the main menu bar by default. Note however that in this situation, the better alternative is usually to display fewer toolbars by default.</para></listitem>
</itemizedlist>
<para>If you must use a vertical toolbar, ensure the user can configure it to appear horizontally if they prefer.</para>
</sect2>
<sect2 id="toolbars-media">
<title>Media Player Toolbars</title>
<para>Many applications are able to play sound or video clips. For consistency, always present the buttons that control playback in the same order and with the same stock icons.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Show separate Stop and Pause buttons. Do not change Play to Pause while the clip is playing.</para></listitem>
</itemizedlist>
<para><remark>Suggested order: prev,rew,rec,play,stop,pause,fwd,next,eject.</remark></para>
<para><remark>gtk still doesn't have stock media icons, but CD player, sound recorder etc. all register icons with media-* IDs, should mention that here.</remark></para>
<para><remark>Should maybe also suggest here how to show volume and timeline controls.</remark></para>
</sect2>
</sect1>
<sect1 id="toolbars-controlling-display">
<title>Controlling Display and Appearance</title>
<para>For each toolbar in your application, the user should be able to choose whether or not to show that toolbar, and whether to show its contents as icons only, text only or both.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Allow the user to override the control center toolbar defaults for your particular application in the application's <guilabel>Preferences</guilabel> dialog. In particular, ensure that the user can:</para>
<itemizedlist>
<listitem><para>separately choose to show each toolbar in your application as icons only, text only, or both</para></listitem>
<listitem><para>return the icon/text/both status for all toolbars in your application to the system default</para></listitem>
<listitem><para>choose to show text labels either to the side of some or below all toolbar icons, and to return this setting to the system default</para></listitem>
<listitem><para>return the layout and ordering of all toolbars in your application to the application default</para></listitem>
</itemizedlist>
</listitem>
<listitem><para>If your application has a single toolbar, allow the user to turn it on or off with a <menuchoice><guimenu>View</guimenu><guimenuitem>Toolbar</guimenuitem></menuchoice> check box menu item.</para></listitem>
<listitem><para>If your application has two or three toolbars, allow the user to turn them on or off individually by placing a menu item for each one on the application's <guimenu>View</guimenu> menu. For example, <guimenuitem>Main Toolbar</guimenuitem>, <guimenuitem>Drawing Toolbar</guimenuitem>, <guimenuitem>Formatting Toolbar</guimenuitem>. Place the items together in a single group on the menu, with <guimenuitem>Main Toolbar</guimenuitem> first (if your application has one), followed by the others in alphabetical order.</para></listitem>
<listitem><para>If your application has more than three toolbars, allow the user to turn them on or off individually by placing a menu item for each one in a <guisubmenu>Toolbars</guisubmenu> sub-menu on the application's <guimenu>View</guimenu> menu. Place the <guimenuitem>Main Toolbar</guimenuitem> item first (if your application has one), followed by the others in alphabetical order.</para>
<figure id="view-toolbar">
<title>Example View menu fragments for applications with one toolbar (left), two or three toolbars (middle), or four or more toolbars (right)</title>
<mediaobject>
<imageobject><imagedata fileref="images/toolbars-configure-menu.png" format="PNG" width="488" depth="135"/></imageobject>
<imageobject><imagedata fileref="images/toolbars-congfigure-menu.eps" format="EPS"/></imageobject>
<textobject><phrase>Example View menu for application with single toolbar</phrase></textobject>
</mediaobject>
</figure>
</listitem>
</itemizedlist>
</sect1>
<sect1 id="toolbars-labels-tooltips">
<title>Labels and Tooltips</title>
<para>Most controls that appear on your toolbar will require a text label that appears on, below or beside it. Keep this description as short as possible, preferably a single verb. For example, <guibutton>Open</guibutton> or <guibutton>Undo</guibutton>.</para>
<para>Every control that appears on your toolbar should have a tooltip, whether or not that control has an associated text label. The tooltip should be a concise description of the control, but should provide more information than its text label where possible. For example, <guilabel>Open an existing document</guilabel>, or <guilabel>Undo last operation</guilabel>.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>For buttons that correspond directly to menu items, make the text label the same as the menu item, but without any trailing ellipsis. For example, <guibutton>Open</guibutton>, <guibutton>Save</guibutton>.</para></listitem>
<listitem><para>Do not provide access keys for toolbar buttons. Since toolbars are in the same keyboard focus context as the menubar, it would be too difficult to provide unique access keys for every menu title and toolbar control. Toolbars are primarily intended as a shortcut for mouse users, although they are keyboard-navigable for accessibility reasons.</para></listitem>
<listitem><para>If your toolbar is configured to show labels below button icons, show a label for every control on the toolbar. For example:</para>
<figure>
<title>Toolbar with labels under all buttons</title>
<mediaobject>
<imageobject><imagedata fileref="images/toolbars-labels-below.png" format="PNG" width="381" depth="56"/></imageobject>
<imageobject><imagedata fileref="images/toolbars-labels-below.eps" format="EPS"/></imageobject>
<textobject><phrase>Toolbar showing labels under all controls</phrase></textobject>
</mediaobject>
</figure>
</listitem>
<listitem><para>If your toolbar is configured to show labels beside button icons rather than below them (using the "priority text" setting), do not show labels for every button. Show labels only for the buttons that will be most-frequently used. Choose no more than four such icons on any one toolbar, otherwise the effect will be diluted and the toolbar will become very wide. For example:</para>
<figure>
<title>Toolbar with "priority text" labels beside the first few buttons only</title>
<mediaobject>
<imageobject><imagedata fileref="images/toolbars-labels-beside.png" format="PNG" width="459" depth="35"/></imageobject>
<imageobject><imagedata fileref="images/toolbars-labels-beside.eps" format="EPS"/></imageobject>
<textobject><phrase>Toolbar with "priority text" labels beside the first few items only</phrase></textobject>
</mediaobject>
</figure>
<para>If you are unsure which buttons will be most frequently used, choose the first few buttons on your toolbar and provide labels for those only.</para>
</listitem>
<listitem><para>Ensure all toolbar controls have tooltips. The tooltip should be more descriptive than the corresponding menu item, if it has one, but still concise. For example, <guilabel>Create new document</guilabel> for the <guibutton>Open</guibutton> toolbar button. Use sentence capitalization for tooltips—see <xref linkend="layout-capitalization"/> for more information.</para></listitem>
</itemizedlist>
</sect1>
<!-- Removed for now until we decide how much/little specific guidance to give for application types
<sect2>
<title>Default Toolbar Layout— Office Application</title>
<para>However many toolbars or palette windows your application provides, by default there should be one main toolbar that provides a subset of the application's overall functionality. Many of the buttons on this toolbar will be the same regardless of the type of application.</para>
<para>The following operations should be included on the main toolbar in the following order, if your application supports them. Application-specific functions should be slotted onto the toolbar according to the position on which they appear on the main menu bar. For functions that don't appear on the <guimenu>File</guimenu>, <guimenu>Edit</guimenu> or <guimenu>Help</guimenu> menus, this means they will normally appear between the <guibutton>Replace</guibutton> and <guibutton>Help</guibutton> buttons.</para>
<figure>
<title>Buttons that should appear on the main toolbar of an office application.</title>
<mediaobject>
<imageobject><imagedata fileref="images/GtkToolbar_productivitydefault.png" format="PNG" width="720" depth="54"/></imageobject>
<imageobject><imagedata fileref="images/GtkToolbar_productivitydefault.eps" format="EPS"/></imageobject>
<textobject>
<phrase>New-Open-Save|Print|Undo-Redo|Find-Replace|Cut-Copy-Paste-Delete</phrase>
</textobject>
</mediaobject>
</figure>
<para>If your application supports all of these functions and you want to simplify your toolbar, consider leaving off the <guibutton>Undo</guibutton> and <guibutton>Redo</guibutton> buttons, or the <guibutton>Cut</guibutton>, <guibutton>Copy</guibutton>, <guibutton>Paste</guibutton> and <guibutton>Delete</guibutton> buttons, as most users prefer to use keyboard or menu for these functions. However, you should include an option to re-add these buttons in your <menuchoice><guimenu>Toolbars</guimenu><guimenuitem>Customize</guimenuitem></menuchoice>... menu.</para>
<para>If you wish to add a <guibutton>Help</guibutton> toolbar button, it should be placed last (rightmost, in western locales) on the main toolbar. However, adding a <guibutton>Help</guibutton> button to the toolbar is not generally recommended, as usability studies suggest that it will be rarely used. (N.B. This finding applies only to toolbars, not <guibutton>Help</guibutton> buttons in dialogs).</para>
</sect2>
<sect2>
<title>Default Toolbar Layout— Browser Applications</title>
<para>Applications for browsing documents or other objects, such as web, file, help or documentation browsers, should use the following layout for their main toolbar:</para>
<para>Back Forward [Other Navigation] Stop Reload | Home | [Other App-Specific]</para>
<para>Application-specific buttons (other than navigation buttons) should be placed in the button group following <guibutton>Home</guibutton>, in the order that they appear on the main menu bar.</para>
<para>Following this model, some current GNOME browser apps would have their toolbars re-ordered as follows:</para>
<figure>
<title>Nautilus 1.0 toolbar rearranged to follow recommended standard toolbar layout for browser applications</title>
<mediaobject>
<imageobject><imagedata fileref="images/GtkToolbar_browserdefault.png" format="PNG" width="486" depth="58"/></imageobject>
<imageobject><imagedata fileref="images/GtkToolbar_browserdefault.eps" format="EPS"/></imageobject>
<textobject>
<phrase>Back Forward Up Stop Reload | Home | WebSearch Services</phrase>
</textobject>
</mediaobject>
</figure>
<table>
<title>Proposed toolbar re-ordering for Nautilus</title>
<tgroup cols='2' align='left'>
<tbody>
<row>
<entry>Nautilus (1.0.x)</entry>
<entry>Back Forward Up Refresh Home WebSearch Services Stop</entry>
</row>
<row>
<entry>Nautilus (proposed)</entry>
<entry>Back Forward Up Stop Reload | Home | WebSearch Services </entry>
</row>
</tbody>
</tgroup>
</table>
<table>
<title>Proposed toolbar re-ordering for Galeon</title>
<tgroup cols='2' align='left'>
<tbody>
<row>
<entry>Galeon (0.12.x)</entry>
<entry>Back Forward Reload Home Stop Zoom [URL] Go</entry>
</row>
<row>
<entry>Galeon (proposed)</entry>
<entry>Back Forward Stop Reload | Home | Zoom [URL] Go </entry>
</row>
</tbody>
</tgroup>
</table>
<table>
<title>Proposed toolbar re-ordering for GNOME Help (deprecated, for illustration purposes only)</title>
<tgroup cols='2' align='left'>
<tbody>
<row>
<entry>GNOME Help (0.4)</entry>
<entry>Back Forward Refresh Index History Bookmarks Help</entry>
</row>
<row>
<entry>GNOME Help (proposed)</entry>
<entry>Back Forward Stop Reload | Index History Bookmarks</entry>
</row>
</tbody>
</tgroup>
</table>
<para>Note: In browser applications, use <guilabel>Reload</guilabel> rather than <guilabel>Refresh</guilabel> when the data will be actually re-read from its original source, rather than just re-painted on the screen.</para>
</sect2>
-->
</chapter>
<!-- Note from GJM: I think palettes should go with toolboxes/utility windows. -->
<!--
<sect1 id="toolbars-palettes">
<title>TODO : Palettes</title>
<para>A palette is much like a floating toolbar. However, its size and shape is usually more customizable, and it typically has a titlebar of its own and appears in the GNOME task list.</para>
</sect1>
</chapter>
-->
<chapter id="controls">
<title>Controls</title>
<sect1 id="controls-usage">
<title>Using Controls Effectively</title>
<para>GNOME provides a set of controls, also known as widgets, which allow
users to interact with your applications. Using these controls
appropriately and not altering their standard behavior is important. This
allows users to predict the effects of their actions, and thus learn to
use your application more quickly and efficiently. Controls that behave in
non-standard ways break the user's mental model of how your
application works, and dilute the meaning of the interface's visual
language.</para>
</sect1>
<sect1 id="controls-terminology">
<title>Terminology</title>
<para>Although they are known as "widgets" in the GNOME APIs and
developer documentation, do not use this term in your user interface or
user documentation. Refer to them by their specific names (for example,
"buttons" or "menus"), or by the generic name
"controls".</para>
</sect1>
<sect1 id="controls-sensitivity">
<title>Sensitivity</title>
<!-- <remark>Do we really want to include GTK calls here? -Seth</remark> -->
<!-- CFB have removed the GTK calls for the basic stuff, although left it in for the
more obscure things that hackers currently aren't doing -->
<para>Sometimes it does not make sense to allow the user to interact with
a control in the current context, for example, to press a
<guilabel>Paste</guilabel> button when the clipboard is empty. At these
times, make the control insensitive <!--(for example, using the <ulink url="http://developer.gnome.org/doc/API/2.0/gtk/gtkwidget.html#GTK-WIDGET-SET-SENSITIVE"><function>gtk_widget_set_sensitive()</function></ulink> function, for GTK controls)-->
to minimize the risk of user error. While a control is insensitive, it
will appear dimmed and will not be able to receive the focus, although
assistive technologies like screenreaders will still be able to detect and
report it.</para>
<para>It is usually better to make a control insensitive than to hide it
altogether. This way, the user can learn about functionality they may be
able to use later, even if it is not available right now.</para>
<figure>
<title>Two check boxes: sensitive (top) and insensitive (bottom)</title>
<mediaobject>
<imageobject>
<imagedata depth="76" fileref="images/controls-sensitivity.png" format="PNG" width="258"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-sensitivity.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Screenshot showing the visual appearance of sensitive and
insensitive check box controls</phrase>
</textobject>
</mediaobject>
</figure>
<!--
<para>Sometimes, however, a large group of controls always become insensitive or sensitive simultaneously as the direct result of user action, such as checking a box or pressing a button. In this case it is sometimes better to hide or show the controls (for example, using the <ulink url="http://developer.gnome.org/doc/API/2.0/gtk/gtkwidget.html#GTK-WIDGET-SHOW"><function>gtk_widget_show()</function></ulink> and <ulink url="http://developer.gnome.org/doc/API/2.0/gtk/gtkwidget.html#GTK-WIDGET-HIDE"><function> gtk_widget_hide()</function></ulink> functions, for GTK controls) rather than making them sensitive or insensitive. For example, if all the controls on a <link linkend="controls-notebooks">notebook tab</link> are insensitive, it is usually better to hide the tab altogether.</para>
-->
<!-- CB-Ed: Hmm. Not sure about the preceding paragraph and the suggestion it makes. Usually you don't want to change an interface as drastically as removing an entire tab when a user clicks a button - it's jarring, first of all, and secondly, you want to keep the UI as consistent as possible: one of the reasons for disabling, say, a menu item, and not just making it disappear when it is unavailable, is to train the user's eye and behavior to know where certain things are located. You may want to back this up or verify the suggestion's strength before finalizing the HIG. -->
<sect2 id="controls-locked">
<title>Locked Controls</title>
<para>In a network-managed environment, like a computer lab, system
administrators usually want to "lock down" the values of certain
settings, or remove them from the user interface altogether. This makes
it easier for them to troubleshoot any problems that their users may
encounter. In GNOME, the correct way for the system administrator to do
this is by restricting write access to the GConf keys corresponding to
those settings.</para>
<para>When you are designing your application, consider which settings a
system administrator might want to make unavailable to users. These may
typically include:</para>
<itemizedlist>
<listitem>
<para>Settings that, if set wrongly, could prevent the application
from functioning at all. For example, proxy settings in a network
application.</para>
</listitem>
<listitem>
<para>Settings that could refer to networked resources. For example,
the Templates directory in an office application, where shared
stationery such as fax cover sheets might be stored.</para>
</listitem>
<listitem>
<para>Settings that customize the user interface, other than those
required for accessibility. For example, certain menu, keyboard or
toolbar customization options.</para>
</listitem>
</itemizedlist>
<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
simplest case, your code for each control could look like that in the
example below.</para>
<!-- CB-Ed: Again, reconsider who your readers are. Some may not be comfortable with terms such as "runtime." Use language that is more inclusive; you may reword the first sentence to say "...decide when you start up your machine whether..." or something along those lines. -->
<example>
<title>Sample code fragment showing how to make a GConf-locked control
insensitive</title>
<programlisting>if (!gconf_key_is_writable (http_proxy))
gtk_widget_set_sensitive (http_proxy_field, FALSE);</programlisting>
</example>
<para>Include a section for system administrators in your user guide,
explaining which settings they can lock, and their corresponding GConf
keys.</para>
<para>Explain to the user why these controls cannot be edited at this
time. You can do this with static text, tooltips or online help,
depending on the situation. For example:</para>
<figure>
<title>Example of a dialog with locked controls</title>
<mediaobject>
<imageobject>
<imagedata depth="216" fileref="images/controls-locked.png" format="PNG" width="475"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-locked.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
<!-- CB-Fig: Figure is good, add callouts, taking some text from the caption, and make caption more succinct: "Dialog with locked settings/controls." When referring to figures, use the figure number, preferably with the following format: chapter_no - figure_no so that figures can be referred to from outside its housing chapter. -->
<para>Note that although they cannot be edited, the settings are still
visible and selectable, and may be copied to the clipboard.<!--In some cases, it may be better to hide the affected controls altogether, for example if a whole notebook page or dialog is affected. Be aware of the possible documentation issues if you do this, however. If users see controls in user guides and screenshots that they don't see on their screen, at best they will lose faith in the user guide, and at worst they may give up trying to use your application altogether.--></para>
<!-- CB-Ed: Second sentence in above paragraph: "In some cases?" Please provide solid examples and reasons for why you suggest such a thing as hiding "affected controls." -->
</sect2>
</sect1>
<sect1 id="controls-entry">
<title>Text Entry Fields</title>
<para>Text entry fields are used for entering one or more lines of plain
text. In GTK 2, the <ulink url="http://developer.gnome.org/doc/API/2.0/gtk/gtkentry.html">GtkEntry</ulink>
control is used for single-line text entry, and <ulink url="http://developer.gnome.org/doc/API/2.0/gtk/gtktextview.html">GtkTextView</ulink>
for multiple-line text entry.<!--Although GtkTextView can also be used for formatted, multi-lingual text editing and display, when used in dialogs for simple text entry its behavior should be kept as close as possible to that of a GtkEntry control.--></para>
<!-- CB-Ed: The second and third sentences are baffling. It seems to be just directed at the developer; it is not inclusive to readers who are not coders. This probably isn't what you want to get people like visual/UI designers to read and use this guide. -->
<figure>
<title>Single and multi-line entry fields</title>
<mediaobject>
<imageobject>
<imagedata depth="153" fileref="images/controls-text.png" format="PNG" width="545"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-text.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Screenshot of part of a dialog, containing both single and
multi-line entry fields</phrase>
</textobject>
</mediaobject>
</figure>
<!-- CB-Fig: Dialog "fragment?" Use callouts. Succinct caption: "Text fields." or "Single and Multi-line Entry Fields"-->
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Label the entry field with a text label above it or to its left,
using <link linkend="layout-capitalization">sentence capitalization</link>.
Provide an access key in the label that allows the user to give focus
directly to the entry field.</para>
</listitem>
<listitem>
<para>Right-justify the contents of entry fields that are used only
for numeric entry, unless the convention in the user's locale
demands otherwise. This is useful in windows where the user might want
to compare two numerical values in the same column of controls. In
this case, ensure the right edges of the relevant controls are also
aligned.</para>
</listitem>
<listitem>
<para>When the user gives focus to an entry field using the keyboard,
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
operations performed on entry fields.</para>
</listitem>
<listitem>
<para>Size text entry fields according to the likely size of the
input. This gives a useful visual cue to the amount of input expected,
and breaks up the dialog making it easier to scan. Don't make all
the fields in the dialog the same width just to make everything line
up nicely.</para>
</listitem>
<!-- CB-Ed: Try to cluster input text fields so that fields of similar "types" end up together, and end up having uniform sizes. Usually you want to size text entry fields to the width of the largest input expected in each clustering. A clean and orderly visual flow is indeed important for the user; that is, line things up so that "everything line[s] up nicely" where possible. The figure (3) actually shows this well. -->
<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.
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>
<listitem>
<para>Provide a static text prompt for text boxes that require input
in a particular format or in a particular unit of measurement. For
example:</para>
<figure>
<title>Text entry field with static text prompt</title>
<mediaobject>
<imageobject>
<imagedata depth="31" fileref="images/controls-text-prompt.png" format="PNG" width="130"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-text-prompt.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
<!-- CB-Fig: Good fig, provide callouts to "static text prompt," shorten caption and fix fig no. -->
</listitem>
<listitem>
<para>Where possible, provide an additional or alternative control
that limits the required input to the valid range. For example,
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>
control if the user has to enter a valid date:</para>
<figure>
<title>Text entry field requiring a date as input, with a button
beside it to pop up a GtkCalendar control to simplify the task</title>
<mediaobject>
<imageobject>
<imagedata depth="41" fileref="images/controls-text-choose.png" format="PNG" width="298"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-text-choose.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
<!-- CB-Fig: Provide a larger image including examples of "spinbox" or "slider." Same comments apply here as to all figuers in the HIG: callouts, shorter caption, figure number. -->
<para>This is less error-prone than expecting the user to format their
text input in some arbitrary format. You may still want to provide the
entry field control as well, however, for expert users who are
familiar with the required format.</para>
</listitem>
<listitem>
<para>If you implement an entry field that accepts only keystrokes
valid in the task context, such as digits, play the system warning
beep when the user tries to type an invalid character. If the user
types three invalid characters in a row, display an <link linkend="windows-alert">alert</link> that explains the valid inputs
for that textfield.</para>
</listitem>
<listitem>
<para>The cursor blink rate is globally defined by the XSettings
"gtk-cursor-blink" and "gtk-cursor-blink-time".
Standard toolkit controls use these and they must <!-- a11y, right? -->
not be altered in applications by any means. New controls with text
cursors must respect these global values.</para>
</listitem>
</itemizedlist>
<sect2 id="controls-text-return">
<title>Behavior of Return key</title>
<para>Normally, pressing <keycap>Return</keycap> in a dialog should
activate the dialog's default button, unless the focused control
uses <keycap>Return</keycap> for its own purposes. You should therefore
set the <ulink url="http://developer.gnome.org/doc/API/2.0/gtk/gtkentry.html#GTK-ENTRY-SET-ACTIVATES-DEFAULT"><function>activates-default</function></ulink>
property of most entry fields to TRUE. (Note that GtkTextView does not
have such a setting— pressing <keycap>Return</keycap> always inserts a
new line.).</para>
<para>However, if your dialog contains several entry fields that are
usually filled out in order, for example <guilabel>Name</guilabel>,
<guilabel>Address</guilabel> and <guilabel>Telephone Number</guilabel>,
consider setting the <function>activates-default</function> property on
those entry fields to FALSE. Pressing <keycap>Return</keycap> should
then move focus on to the next control instead. <!-- CB-Ed: Do you have data to back up the previous suggestion? My first instinct would be to press TAB to go to the next entry field, not RETURN. -->
<!-- CFB: yes, we had numerous emails while discussing this on the mailing lists to suggest that novice users in particular tend to press Return rather than Tab while form-filling -->
Doing this will help prevent the user from accidentally closing the
window before they have entered all the information they wanted to.</para>
<para>As a further safeguard, remember not to set the default button in
a dialog until the minimum amount of required information has been
entered, for example, both a username and a password in a login dialog.
Again, in this case you should move focus to the next control when the
user presses <keycap>Return</keycap>, rather than just ignoring the
keypress.</para>
<para>If you need to provide a keyboard shortcut that activates the
default button while a GtkTextView control has focus, use
<keycombo><keycap>Ctrl</keycap><keycap>Return</keycap></keycombo>.</para>
<note>
<title>Note</title>
<para>Gtk does not currently move focus to the next control when
<keycap>Return</keycap> is pressed and either <function>activates-default=FALSE</function>,
or there is no default button in the window. For now,
<keycap>Return</keycap> does nothing in these situations, so remember
to implement the focus change behavior yourself.</para>
</note>
</sect2>
<sect2 id="controls-text-tab">
<title>Behavior of Tab key</title>
<para>Normally, pressing <keycap>Tab</keycap> in a single-line entry
field should move focus to the next control, and in a multi-line entry
field it should insert a tab character. Pressing <keycombo><keycap>Ctrl</keycap><keycap>Tab</keycap></keycombo>
in a multi-line entry field should move focus to the next control.</para>
<para>If you need to provide a keyboard shortcut that inserts a tab
character into a single line entry field, use <keycombo><keycap>Ctrl</keycap><keycap>Tab</keycap></keycombo>.
You are unlikely to find many situations where this is useful, however.</para>
<remark>There is a patch in bugzilla (bugid=<ulink url="http://bugzilla.gnome.org/show_bug.cgi?id=53763">53763</ulink>)
that adds an <function>allow_tab_characters</function> function to
GtkEntry controls. This allows you to specify on a per-control basis
whether <keycap>Tab</keycap> should insert a tab character or not. It is
currently not known whether this patch is likely to make it into a
future version of gtk.</remark>
</sect2>
</sect1>
<sect1 id="controls-spin-boxes">
<title>Spin Boxes</title>
<para>A spin box is a text box that accepts a range of values. It
incorporates two arrow buttons that allow the user to increase or decrease
the current value by a fixed amount.</para>
<figure>
<title>Example of a spin box</title>
<mediaobject>
<imageobject>
<imagedata depth="32" fileref="images/controls-spin-box.png" format="PNG" width="204"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-spin-box.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A simple spin box used to specify the spacing between
applets on a panel</phrase>
</textobject>
</mediaobject>
</figure>
<!-- CB-Fig: Callout, shorten caption, fig no -->
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Use spin boxes for numerical input only. Use a list or option
menu when you need the user to select from fixed data sets of other
types.</para>
</listitem>
<listitem>
<para>Use a spin box if the numerical value is meaningful or useful
for the user to know, and the valid input range is unlimited or fixed
at one end only. For example, a control for specifying the number of
iterations of some action, or a timeout value. If the range is fixed
at both ends, or the numerical values are arbitrary (for example, a
volume control), use a slider control instead.</para>
</listitem>
<listitem>
<para>Label the spin box with a text label above it or to its left,
using <link linkend="layout-capitalization">sentence capitalization</link>.
Provide an access key in the label that allows the user to give focus
directly to the spin box.</para>
</listitem>
<listitem>
<para>Right-justify the contents of spin boxes, unless the convention
in the user's locale demands otherwise. This is useful in windows
where the user might want to compare two numerical values in the same
column of controls. In this case, ensure the right edges of the
relevant controls are also aligned.</para>
</listitem>
</itemizedlist>
</sect1>
<sect1 id="controls-sliders">
<title>Sliders</title>
<para>A slider allows the user to quickly select a value from a fixed,
ordered range, or to increase or decrease the current value. The control
looks like the type of slider that you might find on an audio mixing desk
or a hi-fi's graphic equalizer. In gtk, you implement a slider using
the GtkHScale or GtkVScale controls, for horizontal or vertical sliders
respectively.</para>
<figure id="controls-slider-figure">
<title>A simple slider control</title>
<mediaobject>
<imageobject>
<imagedata depth="27" fileref="images/controls-slider.png" format="PNG" width="208"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-slider.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A slider control used to change the stereo audio balance
between left and right speakers</phrase>
</textobject>
</mediaobject>
</figure>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Use a slider when:</para>
<itemizedlist>
<listitem>
<para>adjusting the value relative to its current value is more
important than choosing an absolute value. For example, a volume
control: the average user will usually think about turning the
volume up or down to make a sound louder or quieter, rather than
setting the peak output to a specific decibel value.</para>
</listitem>
<listitem>
<para>it is useful for the user to control the rate of change of
the value in real time. For example, to monitor the effects of a
color change in a live preview window as they drag the RGB
sliders.</para>
</listitem>
</itemizedlist>
</listitem>
<listitem>
<para>Label the slider with a text label above it or to its left,
using <link linkend="layout-capitalization">sentence capitalization</link>.
Provide an access key in the label that allows the user to give focus
directly to the slider.</para>
</listitem>
<listitem>
<para>Mark significant values along the length of the slider with text
or tick marks. For example the left, right and center points on an
audio balance control in <xref linkend="controls-slider-figure"/>.</para>
</listitem>
<listitem>
<para>For large ranges of integers (more than about 20), and for
ranges of floating point numbers, consider providing a text box or
spin box that is linked to the slider's value. This allows the
user to quickly set or fine-tune the setting more easily than they
could with the slider control alone.</para>
<figure>
<title>Slider controls with linked spin boxes</title>
<mediaobject>
<imageobject>
<imagedata depth="85" fileref="images/controls-slider-spinbox.png" format="PNG" width="356"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-slider-spinbox.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Three slider controls used to change RGB values, each
with a spinbox beside them to facilitate direct numeric entry</phrase>
</textobject>
</mediaobject>
</figure>
</listitem>
</itemizedlist>
</sect1>
<sect1 id="controls-buttons">
<title>Buttons</title>
<para>A button initiates an action when the user clicks it.</para>
<figure>
<title>Typical buttons in a modal dialog</title>
<mediaobject>
<imageobject>
<imagedata depth="47" fileref="images/controls-buttons.png" format="PNG" width="190"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-buttons.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>OK and Cancel buttons as found in a modal dialog</phrase>
</textobject>
</mediaobject>
</figure>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Label all buttons with imperative verbs, using <link linkend="layout-capitalization">header capitalization</link>. For
example, <guilabel>Save</guilabel>, <guilabel>Sort</guilabel> or
<guilabel>Update Now</guilabel>. Provide an access key in the label
that allows the user to directly activate the button from the
keyboard.</para>
</listitem>
<listitem>
<para>After pressing a button, the user should expect to see the
result of their action within 1 second. For example, closing the
window or opening another. See <xref linkend="feedback"/> for
guidance on what to do if your application cannot respond this
quickly.</para>
</listitem>
<!-- CB-Ed: Do you use ms in other parts of the HIG? Might want to just use ms and not s as a measure, to keep things consistent and in case you need to finer granualarity than this later -->
<listitem>
<para>Use an ellipsis (...) at the end of the label if the action
requires further input from the user before it can be carried out. For
example, <guilabel>Save As...</guilabel> or <guilabel>Find...</guilabel>.
Do not add an ellipsis to commands like <guilabel>Properties</guilabel>,
<guilabel>Preferences</guilabel>, or <guilabel>Settings</guilabel>, as
these open windows that do not <emphasis>require</emphasis> further
input.</para>
</listitem>
<listitem>
<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 inefficient,
especially for users relying on assistive technologies.</para>
</listitem>
<listitem>
<para>If your button can display text, an icon, or both, choose which
label to display at runtime according to the user's preference in
the GNOME Menus and Toolbars Preferences dialog. However, you may
over-ride this preference when there is no suitable icon to describe
the button's action graphically, for example.</para>
</listitem>
<listitem>
<para>Do not use more than one or two different widths of button in
the same window, and make all of them the same height. This will help
give a pleasing uniform visual appearance to your window that makes it
easier to use.</para>
</listitem>
<listitem>
<para>Do not assign actions to double-clicking or right-clicking a
button. Users are unlikely to discover these actions, and if they do,
it will distort their expectations of other buttons on the desktop.</para>
</listitem>
<listitem>
<para>Make invalid buttons insensitive, rather than popping up an
error message when the user clicks them.</para>
</listitem>
</itemizedlist>
<para>In a dialog, one button may be made the default button, which is
shown with a different border and is activated by pressing
<keycap>Return</keycap>. Often this will be the <guibutton>OK</guibutton>
or equivalent button. However, if pressing this button by mistake could
cause a loss of data, do not set a default button for the window. Do not
make <guibutton>Cancel</guibutton> the default button instead. See <xref linkend="default-buttons"/> for more information.</para>
<!-- CB-Fig: Add a figure here to illustrate a default button. -->
<para>If it does not make sense to have a default button until several
fields in the dialog have been correctly completed—for example, both the
<guilabel>Username</guilabel> and <guilabel>Password</guilabel> fields in
a login dialog—do not set the default button until they have both been
completed.</para>
</sect1>
<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>
<figure>
<title>A typical group of check boxes</title>
<mediaobject>
<imageobject>
<imagedata depth="140" fileref="images/controls-check-boxes.png" format="PNG" width="143"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-check-boxes.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A typical group of five check boxes in a dialog</phrase>
</textobject>
</mediaobject>
</figure>
<!-- CB-Fig: callouts. -->
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Do not initiate an action when the user clicks a check box.
However, if used in an instant-apply <link linkend="windows-utility">property
or preference window</link>, update the setting represented by the
check box immediately.</para>
</listitem>
<listitem>
<para>Clicking a check box should not affect the values of any other
controls. It may sensitize, insensitize, hide or show other controls,
however.</para>
</listitem>
<listitem>
<para>If toggling a check box affects the sensitivity of other
controls, place the check box immediately above or to the left of the
controls that it affects. This helps to indicate that the controls are
dependent on the state of the check box.<!--FIXME: pic required)--></para>
</listitem>
<listitem>
<para>Use <link linkend="layout-capitalization">sentence
capitalization</link> for check box labels, for example
<guilabel>Use custom font</guilabel>.</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
radio buttons instead so both states can be given labels. For example:</para>
<figure>
<title>Ambiguous check box (top), radio buttons work better in this
case (bottom)</title>
<mediaobject>
<imageobject>
<imagedata depth="70" fileref="images/controls-check-box-ambiguous.png" format="PNG" width="279"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-check-box-ambiguous.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
<para>The single check box in this example is ambiguous, as it is not
clear where the "progress indicator" will go if the box is
unchecked. Two radio buttons are better in this case, as they make the
options clear.</para>
</listitem>
<!-- CB-Fig: Again, callouts, shorten caption. The callouts should include other bullet points as well (e.g., access keys). The referring bullet item is badly phrased. Perhaps make this the one check box images for the bullets, with different callouts for different bullet points. -->
<listitem>
<para>Provide an access key in all check box labels that allows the
user to set or unset the check box directly from the keyboard.</para>
</listitem>
<listitem>
<para>If the check box represents a setting in a multiple selection
that is set for some objects in the selection and unset for others,
show the check box in its mixed state. For example:</para>
<figure>
<title>Check boxes (right) showing properties for a multiple
selection of files in Nautilus (left)</title>
<mediaobject>
<imageobject>
<imagedata depth="170" fileref="images/controls-check-boxes-mixed.png" format="PNG" width="223"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-check-boxes-mixed.eps" format="EPS"/>
</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>
</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
<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>
<para>When a check box is in its mixed state:</para>
<itemizedlist>
<listitem>
<para>clicking the box once should check the box, applying that
setting (when confirmed) to all the selected objects</para>
</listitem>
<listitem>
<para>clicking the box a second time should uncheck the box,
removing that setting (when confirmed) to all the selected objects</para>
</listitem>
<listitem>
<para>clicking the box a third time should return the box to its
mixed state, restoring each selected object's original value
for that setting (when confirmed)</para>
</listitem>
</itemizedlist>
<!-- CB-Ed: Mixed state check boxes are a polemic-ridden issue. Data to back this up? -->
</listitem>
<listitem>
<para>Label a group of check boxes with a descriptive heading above or
to the left of the group.</para>
</listitem>
<listitem>
<para>Use a frame around the group if necessary, but remember that
blank space often works just as well and results in a less
visually-cluttered dialog.</para>
</listitem>
<listitem>
<para>Do not place more than about eight check boxes under the same
group heading. If you need more than eight, try to use blank space,
heading labels or frames to divide them into smaller groups.
Otherwise, consider using a check box list instead— but you probably
also need to think about how to simplify your user interface.</para>
</listitem>
<listitem>
<para>Try to align groups of check boxes vertically rather than
horizontally, as this makes them easier to scan visually. Use
horizontal or rectangular alignments only if they greatly improve the
layout of the window.</para>
</listitem>
</itemizedlist>
</sect1>
<sect1 id="controls-radio-buttons">
<title>Radio Buttons</title>
<para>Radio buttons are used in groups to select from a mutually exclusive
set of options. Only one radio button within a group may be set at any one
time. As with check boxes, do not use radio buttons to initiate actions.</para>
<figure>
<title>A typical group of radio buttons</title>
<mediaobject>
<imageobject>
<imagedata depth="105" fileref="images/controls-radio-buttons.png" format="PNG" width="352"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-radio-buttons.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A typical group of three radio buttons in a dialog</phrase>
</textobject>
</mediaobject>
</figure>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Only use radio buttons in groups of at least two, never use a
single radio button on its own. To represent a single setting, use a
check box or two radio buttons, one for each state.</para>
</listitem>
<listitem>
<para>Exactly one radio button should be set in the group at all
times. The only exception is when the group is showing the properties
of a multiple selection, when one or more of the buttons may be in
their mixed state.</para>
</listitem>
<listitem>
<para>Do not initiate an action when the user clicks a radio button.
However, if used in an instant-apply <link linkend="windows-utility">property
or preference window</link>, update the setting represented by the
radio button immediately.</para>
</listitem>
<listitem>
<para>Clicking a radio button should not affect the values of any
other controls. It may sensitize, insensitize, hide or show other
controls, however.</para>
</listitem>
<listitem>
<para>If toggling a radio button affects the sensitivity of other
controls, place the radio button immediately to the left of the
controls that it affects. This helps to indicate that the controls are
dependent on the state of the radio button.<!--FIXME: pic required--></para>
</listitem>
<listitem>
<para>Use <link linkend="layout-capitalization">sentence
capitalization</link> for radio button labels, for example
<guilabel>Switched movement</guilabel>. Provide an access key in the
label that allows the user to set the radio button directly from the
keyboard.</para>
</listitem>
<!-- CB-Fig: "guilabel" may need to be more generic, like: Button Label, so that people don't get confused when scanning text about literals, particularly because you guys are using a lot of code references and lingo. -->
<listitem>
<para>If the radio button represents a setting in a multiple selection
that is set for some objects in the selection and unset for others,
show the radio button in its mixed state. For example:</para>
<figure>
<title>Radio buttons (right) showing properties for a multiple
selection of shapes in a drawing application (left)</title>
<mediaobject>
<imageobject>
<imagedata depth="105" fileref="images/controls-radio-button-mixed.png" format="PNG" width="314"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-radio-button-mixed.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
<!-- 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
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>
</listitem>
<listitem>
<para>Label a group of radio buttons with a descriptive heading above
or to the left of the group.</para>
</listitem>
<listitem>
<para>Use a frame around the group if necessary, but remember that
blank space often works just as well and results in a less
visually-cluttered dialog.</para>
</listitem>
<listitem>
<para>Do not place more than about eight radio buttons under the same
group heading. If you need more than eight, consider using a
single-selection <link linkend="controls-lists">list</link> instead—
but you probably also need to think about how to simplify your user
interface.</para>
</listitem>
<listitem>
<para>Try to align groups of radio buttons vertically rather than
horizontally, as this makes them easier to scan visually. Use
horizontal or rectangular alignments only if they greatly improve the
layout of the window.</para>
</listitem>
</itemizedlist>
</sect1>
<sect1 id="controls-toggle-buttons">
<title>Toggle Buttons</title>
<para>Toggle buttons look similar to regular <link linkend="controls-buttons">Buttons</link>, but are used to show or change
a state rather than initiate an action. A toggle button's two states,
set and unset, are shown by its appearing "pushed in" or
"popped out" respectively.</para>
<figure>
<title>A typical group of toggle buttons</title>
<mediaobject>
<imageobject>
<imagedata depth="46" fileref="images/controls-toggle-buttons.png" format="PNG" width="137"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-toggle-buttons.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A group of four toggle buttons representing a choice of
measurement units: inches, centimeters, feet and meters</phrase>
</textobject>
</mediaobject>
</figure>
<!-- CB-Fig: callouts -->
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Do not use groups of toggle buttons in dialogs unless space
constraints force you to do so, or you need to provide consistency
with a toolbar in your application. <link linkend="controls-check-boxes">Check boxes</link> or <link linkend="controls-radio-buttons">radio buttons</link> are usually
preferable, as they allow more descriptive labels and are less
easily-confused with other types of control.</para>
</listitem>
<listitem>
<para>Only use toggle buttons in groups, so they are not mistaken for
regular buttons. Make the group behave like either a group of check
boxes or a group of radio buttons, as required.</para>
</listitem>
<listitem>
<para>Provide an access key in the label of all toggle buttons that
allows the user to set or unset the button directly from the keyboard.</para>
</listitem>
<listitem>
<para>Label a group of toggle buttons with a descriptive heading above
or to the left of the group, as you would with a group of check boxes
or radio buttons.</para>
</listitem>
<listitem>
<para>Use a frame around the group of buttons if necessary, but
remember that blank space often works just as well and results in a
less visually-cluttered dialog.</para>
</listitem>
<listitem>
<para>Try to align groups of toggle buttons horizontally rather than
vertically. This is how toggle buttons normally appear on a toolbar,
so the user will be more familiar with this arrangement.</para>
</listitem>
<listitem>
<para>Do not leave any space between toggle buttons in a group,
otherwise they may look unrelated or may be mistaken for regular
buttons.</para>
</listitem>
<listitem>
<para>Use <link linkend="layout-capitalization">header capitalization</link>
for toggle button labels, for example <guibutton>No Wallpaper</guibutton>,
<guibutton>Embossed Logo</guibutton>.</para>
</listitem>
<listitem>
<para>If your toggle button can display text, an icon, or both, choose
which to display at runtime according to the user's setting in the
GNOME Menus and Toolbars preference dialog.</para>
</listitem>
<listitem>
<para>Use the same text or graphical label for a toggle button whether
it is set or unset.</para>
</listitem>
<listitem>
<para>If the toggle button represents a setting in a multiple
selection that is set for some objects in the selection and unset for
others, show the button in its mixed state. For example:</para>
<figure>
<title>Toggle buttons (right) showing properties for a multiple
selection of shapes in a drawing application (left)</title>
<mediaobject>
<imageobject>
<imagedata depth="108" fileref="images/controls-toggle-button-mixed.png" format="PNG" width="467"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-toggle-button-mixed.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
<!-- CB-Fig: There's probably a better figure for fig 16 than this one. Also, my 2 cents on the mixed state visual issue: mixed state MUST be visually DISTINCT from "set." What I see here isn't enough (I know this isn't set yet.) -->
<remark>At time of writing, the exact visual appearance of mixed state
toggle buttons was undecided. A mixed state toggle button should
behave exactly as a mixed state check box or radio button, depending
on whether the toggle button choices are independent or mutually
exclusive, respectively.</remark>
</listitem>
</itemizedlist>
</sect1>
<sect1 id="controls-option-menus">
<title>Drop-down Lists</title>
<para>Drop-down lists 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>
<figure>
<title>A drop-down list showing current selection (left) and the list of
available choices when clicked on (right)</title>
<mediaobject>
<imageobject>
<imagedata depth="178" fileref="images/controls-option-menu.png" format="PNG" width="377"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-option-menu.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
<!-- CB-Fig: Callouts, shortened caption. This can probably be collapsed into one snapshot. -->
<para>Recommendations:</para>
<itemizedlist>
<listitem>
<para>Do not use drop-down lists with fewer than three items, or more
than about ten. To offer a choice of two options, use <link linkend="controls-radio-buttons">radio buttons</link> or <link linkend="controls-toggle-buttons">toggle buttons</link>. To offer a
choice of more than ten options, use a <link linkend="controls-lists">list</link>.</para>
</listitem>
<listitem>
<para>Do not initiate an action when the user selects an item from an
drop-down list. However, if used in an instant-apply <link linkend="windows-utility">property or preference window</link>, update
the setting that the menu represents immediately.</para>
</listitem>
<listitem>
<para>Selecting an item from a drop-down list should not affect the
values of any other controls. It may sensitize, insensitize, hide or
show other controls, however.</para>
</listitem>
<listitem>
<para>Label the drop-down list with a text label above it or to its left,
using <link linkend="layout-capitalization">sentence capitalization</link>.
Provide an access key in the label that allows the user to give focus
directly to the drop-down list.</para>
</listitem>
<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>
</listitem>
<listitem>
<para>Do not use a drop-down list in a situation where it may have to
show a property of a multiple selection, as drop-down lists have no
concept of mixed state. Use a group of radio or toggle buttons
instead, as these can show set, unset or mixed states.</para>
</listitem>
<!-- CB-Fig: The bullet points probably could be illustrated in a main drop-down lists figure (17 would work) -->
<listitem>
<para>Do not use submenus on a drop-down list.</para>
</listitem>
</itemizedlist>
<para>You should normally use <link linkend="controls-radio-buttons">radio
buttons</link> or a <link linkend="controls-lists">list</link> instead of
drop-down lists, as those controls present all the available options at once
without any further interaction. However, drop-down lists may be preferable
in a window where:</para>
<itemizedlist>
<listitem>
<para>there is little available space</para>
</listitem>
<listitem>
<para>the list of options may change over time</para>
</listitem>
<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"
selected, the user might reasonably infer that the menu contains the
12 months of the year without having to look.</para>
</listitem>
</itemizedlist>
<para>Drop-down lists can also be useful on toolbars, to replace a group of
several mutually-exclusive toggle buttons.</para>
</sect1>
<sect1 id="controls-combo-boxes">
<title>Drop-down Combination Boxes</title>
<!-- CB-Fig: Be aware that some people may not distinguish between drop-down lists and combo boxes; that is, they are taken as two types of combo boxes, editable and uneditable (see JLF DG). -->
<!-- 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 drop-down list of
pre-defined values. Selecting one of the pre-defined values sets the entry
field to that value.</para>
<figure>
<title>A drop-down combination box before and after its drop-down list is displayed</title>
<mediaobject>
<imageobject>
<imagedata depth="200" fileref="images/controls-combo.png" format="PNG" width="304"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-combo.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Two images, one of a drop-down combination box entry field displaying its
current selection, and the other showing its drop-down list of
available choices when clicked on</phrase>
</textobject>
</mediaobject>
</figure>
<!-- CB-Fig: callouts, shorten caption. -->
<itemizedlist>
<title>Guidelines</title>
<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>
</listitem>
<listitem>
<para>Do not initiate an action when the user selects an item from the
list in a drop-down combination box. If used in an instant-apply <link linkend="windows-utility">property or preference window</link>, update
the setting represented by the drop-down combination box immediately if possible. If
this isn't possible due to the contents of the entry field being
invalid while the user is still typing into it, update the related
setting when the drop-down combination box loses focus instead.</para>
</listitem>
<listitem>
<para>If the user types a value into the drop-down combination box that is not already
in the drop-down list, add it to the list when the drop-down combination box loses
focus so they can select it next time.</para>
</listitem>
<listitem>
<para>Interpret user input into a drop-down combination box in a case-insensitive way.
For example, if the user types <userinput>blue</userinput>,
<userinput>Blue</userinput> and <userinput>BLUE</userinput> into the
same drop-down combination box on different occasions, only store one of these in the
combo's drop-down list, unless your application makes a distinction
between the different forms (which is usually a bad idea).</para>
</listitem>
<listitem>
<para>Label the drop-down combination box with a text label above it or to its left,
using <link linkend="layout-capitalization">sentence capitalization</link>.
Provide an access key in the label that allows the user to give focus
directly to the drop-down combination box.</para>
</listitem>
<listitem>
<para>Use <link linkend="layout-capitalization">sentence
capitalization</link> for the drop-down list items, for example
<guilabel>Switched movement</guilabel>.</para>
</listitem>
<!-- CB-Ed: Make guilabel less literal: "List item." -->
</itemizedlist>
</sect1>
<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>
<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>
</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>
</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>
<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>
</listitem>
</itemizedlist>
</sect1>
<sect1 id="controls-lists">
<title>Lists</title>
<para>A list control allows the user to inspect, manipulate or select from
a list of items. Lists may have one or more columns, and contain text,
graphics, simple controls, or a combination of all three.</para>
<!-- CB-Fig: Looks like a table, to me, complete with table row striping and column headers. Lists are usually one column, scrollable... lists! Of text or, rarely, graphics which can be selected in order to be manipulated. Sorting also happens in tables, not lists, from my experience. -->
<!-- CFB: It's not a table because there is no way to select or manipulate individual cells, only complete rows. -->
<figure>
<title>A simple two column list</title>
<mediaobject>
<imageobject>
<imagedata depth="149" fileref="images/controls-list.png" format="PNG" width="179"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-list.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Picture of list control containing two unsorted columns of
text</phrase>
</textobject>
</mediaobject>
</figure>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Always give list controls a label, positioned above or to the
left of the list, in <link linkend="layout-capitalization">sentence
capitalization</link>. Provide an access key in the label that allows
the user to give focus directly to the list.</para>
</listitem>
<listitem>
<para>Make the list control large enough that it can show at least
four items at a time without scrolling. For lists of ten or more
items, increase this minimum size as appropriate.</para>
</listitem>
<listitem>
<para>If the list appears in a dialog or utility window, consider
making the window and the list within it resizable so that the user
can choose how many list items are visible at a time without
scrolling. Each time the user opens this dialog, set its dimensions to
those that the user last resized it to.</para>
</listitem>
<listitem>
<para>Do not use lists with less than about five items, unless the
number of items may increase over time. Use <link linkend="controls-check-boxes">check boxes</link>, <link linkend="controls-radio-buttons">radio buttons</link> or an <link linkend="controls-option-menus">drop-down list</link> if there are fewer
items.</para>
</listitem>
<listitem>
<para>Only use column headers when:</para>
<itemizedlist>
<listitem>
<para>the list has more than one column, or</para>
</listitem>
<listitem>
<para>the list has only one column, but the user may wish to
re-order the list. (This is rarely useful with single column
lists).</para>
</listitem>
</itemizedlist>
<para>In most other situations, column headers take up unnecessary
space, and the extra label adds visual clutter.</para>
</listitem>
<listitem>
<para>Always label column headers when used. If the column is too
narrow for a sensible label, provide a tooltip for the column instead.
Apart from its obvious use, this will help ensure that assistive
technologies can describe the use of the column to visually impaired
users.</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>
<figure>
<title>A simple check box list</title>
<mediaobject>
<imageobject>
<imagedata depth="133" fileref="images/controls-list-checkbox.png" format="PNG" width="160"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-list-checkbox.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
<para>If you do this, you should normally set the list control itself
to be single-selection, but this depends on the particular task for
which it will be used.</para>
</listitem>
<listitem>
<para>For multiple selection lists, show the number of items currently
selected in a static text label below the list, for example,
<guilabel>Names selected: 3</guilabel>. Such a label also makes it
more obvious that multiple selection is possible.</para>
</listitem>
<listitem>
<para>Consider providing <guibutton>Select All</guibutton> and
<guibutton>Deselect All</guibutton> buttons beside multiple selection
lists, if appropriate.</para>
</listitem>
</itemizedlist>
<sect2 id="controls-lists-sortable">
<title>Sortable Lists</title>
<para>Users often prefer to sort long lists, either alphabetically or
numerically, to make it easier to find items. Allow users
to sort long or multi-column lists by clicking on the column
header they want to sort.
</para>
<itemizedlist><title>Guidelines</title>
<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">
<thead>
<row>
<entry>Sort Order</entry>
<entry>Arrow Direction</entry>
<entry>Example</entry>
</row>
</thead>
<tbody>
<row>
<entry>Natural</entry>
<entry>Down</entry>
<entry>Alphabetical; smallest number first;
earliest date first; checked items first</entry>
</row>
<row>
<entry>Reverse</entry>
<entry>Up</entry>
<entry>Reverse alphabetical; largest number first;
most recent date first; unchecked items first)</entry>
</row>
</tbody>
</tgroup>
</informaltable>
</listitem>
<listitem><para>Clicking an unsorted column header sorts the
column in natural order, indicated by showing a
down arrow in its header.</para></listitem>
<listitem><para>Clicking a column header sorted in natural order
re-sorts it in reverse order, indicated by
showing an up arrow in its header.</para>
<note><title>Un-sorting lists</title>
<para> Occasionally,
an unsorted state may be useful, for example to
show items in the order in which the user added
them to the list.
In such cases, clicking a column sorted in reverse
order should un-sort it, indicated by removing the
arrow from the column header.</para>
<para>Usually, however,
this is better achieved by adding an extra column
that the user can sort in the usual way, such as a
sequence
number column in this example.
</para></note>
</listitem>
</itemizedlist>
</sect2>
</sect1>
<sect1 id="controls-trees">
<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
contain text, graphics, simple controls, or a combination of all three.</para>
<tip>
<title>Use trees with care!</title>
<para>Because of their complexity compared to other controls, novice and
some intermediate users often have problems using and understanding tree
controls. If your application is designed for that type of user, you
might want to consider alternative ways of presenting the information,
such as the Nautilus list or icon view, or the hierarchical browser
lists found in <ulink url="http://www.gnustep.it/enrico/gworkspace/viewer.html">GNUstep's
File Viewer</ulink>.</para>
</tip>
<figure>
<title>A simple tree control with one level of hierarchy</title>
<mediaobject>
<imageobject>
<imagedata depth="277" fileref="images/controls-tree.png" format="PNG" width="343"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-tree.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
<!-- CB-Fig: Trees are usually used for navigation, so it's probably best to illustrate a tree in that context (GnomeCC, for example). -->
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Always give tree controls a label, positioned above or to the
left of the tree, in <link linkend="layout-capitalization">sentence
capitalization</link>. Provide an access key in the label that allows
the user to give focus directly to the tree.</para>
</listitem>
<listitem>
<para>Use column headers when:</para>
<itemizedlist>
<listitem>
<para>the tree has more than one column</para>
</listitem>
<listitem>
<para>the tree has only one column, but the user may wish to
re-order the tree. This should rarely be true of single column
trees.</para>
</listitem>
</itemizedlist>
<para>In most other situations, column headers take up unnecessary
space, and the extra label adds visual clutter.</para>
</listitem>
<listitem>
<para>Always label column headers when used. If the column is too
narrow for a sensible label, provide a tooltip for the column instead.
Apart from its obvious use, this will help ensure that assistive
technologies can describe the use of the column to visually impaired
users.</para>
</listitem>
<listitem>
<para>Consider using a check box tree for multiple-selection trees, as
these make it more obvious that multiple selection is possible:</para>
<figure>
<title>A simple check box tree</title>
<mediaobject>
<imageobject>
<imagedata depth="297" fileref="images/controls-tree-checkbox.png" format="PNG" width="349"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-tree-checkbox.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
<para>If you do this, you should normally set the tree control itself
to be single-selection, but this depends on the particular task for
which it will be used.</para>
</listitem>
<listitem>
<para>For multiple selection trees, show the number of items currently
selected in a static text label below the tree, for example,
<guilabel>Names selected: 3</guilabel>. Such a label also makes it
more obvious that multiple selection is possible.</para>
</listitem>
<listitem>
<para>Consider providing <guibutton>Select All</guibutton> and
<guibutton>Deselect All</guibutton> buttons beside multiple selection
trees, if appropriate to the task.</para>
</listitem>
</itemizedlist>
<sect2 id="controls-trees-sortable">
<title>Sortable Trees</title>
<para>As with lists, the user may find it useful to sort long or
multi-column trees. See the guidelines in
<xref linkend="controls-lists-sortable"/> for
more information.</para>
</sect2>
</sect1>
<sect1 id="controls-notebooks">
<title>Tabbed Notebooks</title>
<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 analogous to the divider tabs in a ring binder or a file
cabinet.</para>
<figure>
<title>A typical notebook control with three tabs</title>
<mediaobject>
<imageobject>
<imagedata depth="270" fileref="images/controls-notebook.png" format="PNG" width="341"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-notebook.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Picture of notebook control with three tabs</phrase>
</textobject>
</mediaobject>
</figure>
<!-- CB-Fig: Maybe I'm off, so if I am, then just ignore, but I'm concerned with terminology in the HIG at this point; maybe it's just one of those wizard/druid issues that are just here to stay because GNOME is GNOME, but I think people are more familiar with the term "Tabs" instead of the term "Pages," and "Tabbed pane" instead of "notebooks." That's what they are called in JLF, anyway. Callouts would also be nice here. -->
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Do not put too many pages in the same notebook. If you cannot
see all the tabs without scrolling or splitting them into multiple
rows, you are probably using too many and should use a list control
instead. See the <link linkend="controls-too-many-tabs">example below</link>.</para>
</listitem>
<listitem>
<para>Label tabs with <link linkend="layout-capitalization">header
capitalization</link>, and use nouns rather than verbs, for example
<guilabel>Font</guilabel> or <guilabel>Alignment</guilabel>. Try to
keep all labels in a notebook the same general length.</para>
</listitem>
<listitem>
<para>Do not assign access keys to tab labels, as this means you
cannot use those access keys for any other control on
<emphasis>any</emphasis> of the notebook pages without conflict. Even
if you are able to assign access keys that would not conflict, it is
better not to as it may be impossible to avoid the conflict when your
application is translated to other languages. Assign an access key to
every other control on each page, however.</para>
</listitem>
<listitem>
<para>Do not design a notebook such that changing controls on one page
affects the controls on any other page. Users are unlikely to discover
such dependencies.</para>
</listitem>
<listitem>
<para>If a control affects only one notebook page, place it on that
notebook page. If it affects every page in the notebook, place it
outside the notebook control, for example beside the window's
<guibutton>OK</guibutton> and <guibutton>Cancel</guibutton> buttons.</para>
</listitem>
<listitem>
<para>Use tabs that are proportional to the width of their labels.
Don't just set all the tabs to the same width, as this makes them
harder to scan visually, and limits the number of tabs you can fit
into the notebook without scrolling. For example:</para>
<figure>
<title>Fixed- and proportional-width tabs (preferred)</title>
<mediaobject>
<imageobject>
<imagedata depth="92" fileref="images/controls-notebook-tabs.png" format="PNG" width="475"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-notebook-tabs.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
</listitem>
<!-- CB-Fig: callouts, shorter caption -->
<listitem>
<para>Although the contents of each page in a notebook will take up a
different amount of space, do not use larger than normal spacing
around the controls in the "emptier" pages, and do not center
the controls on the page.</para>
</listitem>
<listitem>
<para>If your tab labels include icons, choose whether or not to show
the icons at runtime based on the user's preference in the GNOME
Menus and Toolbars desktop preferences dialog. Always show the text
part of the label, however.</para>
</listitem>
</itemizedlist>
<para>If you have more than about six tabs in a notebook, use a list
control instead of tabs to switch between the pages of controls. For
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>
<mediaobject>
<imageobject>
<imagedata depth="200" fileref="images/controls-notebook-list.png" format="PNG" width="370"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-notebook-list.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
<para>As in this example, place the list control on the left-hand side of
the window, with the dynamic portion of the window immediately to its
right. <remark>Should this be reversed for right-to-left locales?</remark></para>
<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 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>
<sect1 id="controls-progress-bars">
<title>Progress Bars</title>
<para>Progress bars are visual indicators of the progress of a task being
carried out by the application, and provide important <link linkend="feedback-types">feedback</link>. For information on using a
progress bar within a progress window, see <xref linkend="windows-progress"/>.</para>
<para>You can use two main types of progress bars in your application—
measured-progress bars and indeterminate-progress bars (the kind that
bounce back and forth). In addition there are three types of measured
progress bars.</para>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Always use a measured progress bar when the length of a task can
be precisely or approximately predicted. Otherwise, use an <link linkend="indeterminate-progress">indeterminate progress indicator</link>
or a <link linkend="progress-checklists">checklist window</link>.</para>
</listitem>
<listitem>
<para>Ensure that a measured-progress bar measures an operation's
total time or total work, not just that of a single step. An exception
is a progress bar that measures the total time or work of the current
step in a progress checklist.</para>
</listitem>
</itemizedlist>
<sect2 id="time-remaining">
<title>Time-remaining Progress Indicator</title>
<para>An animation consisting of a bar whose changing length indicates
how much time remains in an operation, and text stating how much time
remains before the operation will be complete. Time-remaining bars are
the most useful type of progress bar.</para>
<figure>
<title>A simple 'time remaining' progress bar</title>
<mediaobject>
<imageobject>
<imagedata width="386" fileref="images/controls-progress-time.png" format="PNG" depth="38"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-progress-time.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A simple time-remaining progress dialog</phrase>
</textobject>
</mediaobject>
</figure>
<para>Use a time-remaining bar if your application will 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.</para>
</sect2>
<sect2 id="typical-time">
<title>Typical-time Progress Indicator</title>
<para>A bar whose changing length indicates how much time remains if an
operation takes as long as it typically does. Typical-time bars are the
least precise type of measured-progress bar, but they are more useful
than indeterminate-progress bars.</para>
<figure>
<title>A simple 'typical time remaining' progress bar</title>
<mediaobject>
<imageobject>
<imagedata depth="32" fileref="images/controls-progress-typical.png" format="PNG" width="385"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-progress-typical.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A simple 'typical time remaining' progress dialog</phrase>
</textobject>
</mediaobject>
</figure>
<para>For some operations, you cannot estimate the time remaining or the
proportion of work completed. However, if you can estimate the typical
time for that operation, you can provide feedback with a typical-time
bar.</para>
<para>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.</para>
</sect2>
<sect2 id="indeterminate-progress">
<title>Indeterminate-progress indicator</title>
<para>An animated bar indicating only that an operation is ongoing, not
how long it will take. One example is the "throbber" in a web
browser. Indeterminate-progress bars are the least precise type of
progress bar.</para>
<figure>
<title>A simple 'indeterminate time' progress bar; the slider
moves from left-to-right and back again until the operation is
complete</title>
<mediaobject>
<imageobject>
<imagedata depth="210" fileref="images/controls-progress-indeterminate.png" format="PNG" width="409"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-progress-indeterminate.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>A simple 'indeterminate time' progress dialog,
showing a slider moving back and forth until the operation is
complete</phrase>
</textobject>
</mediaobject>
</figure>
<!-- CB-Fig: Above figure may benefit from showing the slider away from the right or left edge; otherwise it looks like the other progress bars, slightly modified. -->
<para>Use an indeterminate-progress bar to provide feedback only for
operations whose duration you cannot estimate at all.</para>
</sect2>
</sect1>
<sect1 id="controls-status-bars">
<title>Statusbars</title>
<para>A statusbar is an area at the bottom of a window that can be used
to display brief information about the status of the application.</para>
<figure>
<title>A simple statusbar</title>
<mediaobject>
<imageobject>
<imagedata depth="53" fileref="images/controls-status-bar.png" format="PNG" width="244"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-status-bar.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
<!-- CB-Fig: callouts -->
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Use statusbars only in application or document windows. Do not
use them in dialogs, alerts or other secondary windows.</para>
</listitem>
<listitem>
<para>Only place a statusbar along the bottom of a window.</para>
</listitem>
<listitem>
<para>Only use statusbars to display non-critical information. This
might include:</para>
<itemizedlist>
<listitem>
<para>general information about the document or application. For
example, current connection status in a network application, or
the size of the current document in a text editor.</para>
</listitem>
<listitem>
<para>information about the task the user is currently performing.
For example, while using the selection tool in a drawing
application, "Hold Shift to extend the selection"</para>
</listitem>
<listitem>
<para>progress of a background operation. For example,
"Sending to printer", "Printing page 10 of 20",
"Printing Complete".</para>
</listitem>
<listitem>
<para>a description of the control or area of the window under the
mouse pointer. For example, "Drop files here to upload
them"</para>
</listitem>
</itemizedlist>
<para>Remember that statusbars are normally in the user's
peripheral vision, and can even be turned off altogether using the
application's <menuchoice><guimenu>View</guimenu><guimenuitem>Status
Bar</guimenuitem></menuchoice> menu item. The user may therefore never
see anything you display there, unless they know when and where to
look for it.</para>
</listitem>
<listitem>
<para>When there is no interesting status to report, leave a status
bar panel blank rather than displaying something uninformative like
"Ready". This way, when something interesting does appear in
the statusbar, the user is more likely to notice it.</para>
</listitem>
<listitem>
<para>If you want to make all or part of your statusbar interactive,
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>Inlaid appearance for areas that respond to a double click</para>
</listitem>
<listitem>
<para>Flat appearance for areas that are not interactive</para>
</listitem>
</itemizedlist>
<!-- CB-Ed: I have never seen a button in a statusbar area before. I'll bet this is deprecated, or should be. Do you have data to back this up? And doesn't this conflict with one of the previous bullet points: Only use statusbars to display non-critical information? A cancel button is certainly not trivial. -->
<!-- CFB: removed this recommendation for now -->
<para>In <xref linkend="status-bar-figure"/>, the appearance
indicates that the left area would respond to a double click (perhaps
by saving the document), and the progress indicator on the right is
non-interactive.</para>
<figure id="status-bar-figure">
<title>An interactive statusbar</title>
<mediaobject>
<imageobject>
<imagedata depth="58" fileref="images/controls-status-bar-interactive.png" format="PNG" width="461"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-status-bar-interactive.eps" format="EPS"/>
</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>
</textobject>
</mediaobject>
</figure>
<para>Ensure that double-clicking in the status area does not provide
any functionality that is not also available in the main application
menu bar, or by some other accessible means.</para>
</listitem>
<listitem>
<para>Provide a drag handle in the bottom right corner of the status
bar of resizeable 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>
</listitem>
</itemizedlist>
</sect1>
<sect1 id="controls-frames">
<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
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 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>
<para>Rather than using bordered frames, use frames without borders, bold
labels to make the categories stand out, and indented contents. This,
combined with good layout and spacing, is usually a better alternative to
bordered frames.</para>
<figure>
<title>Preferred frame style, using bold labels, spacing and indentation</title>
<mediaobject>
<imageobject>
<imagedata depth="256" fileref="images/controls-frames.png" format="PNG" width="288"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-frames.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Frame showing the preferred style described above</phrase>
</textobject>
</mediaobject>
</figure>
<figure>
<title>Traditional frame style, using borders (deprecated)</title>
<mediaobject>
<imageobject>
<imagedata depth="275" fileref="images/controls-old-frames.png" format="PNG" width="296"/>
</imageobject>
<imageobject>
<imagedata fileref="images/controls-old-frames.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Frame showing the traditional style described above</phrase>
</textobject>
</mediaobject>
</figure>
<!-- <para>See <xref linkend="window-layout-spacing"/> for technical details on implementing the preferred frame style in gtk.</para> -->
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Before you add a frame with a visible border or separator to any
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
alignment.</para>
</listitem>
<listitem>
<para>Do not mix framed and unframed groups in the same window.</para>
</listitem>
<listitem>
<para>Do not nest one frame inside another. This results in visual
clutter.</para>
</listitem>
<listitem>
<para>If all the items in a group are disabled, disable the group title too.</para>
</listitem>
</itemizedlist>
</sect1>
</chapter>
<chapter id="feedback">
<title>Feedback</title>
<sect1 id="feedback-responsiveness">
<title>Characteristics of Responsive Applications</title>
<para>Although highly responsive applications can differ widely from one
another, they share the following characteristics:</para>
<itemizedlist>
<listitem>
<para>They give immediate feedback to users, even when they cannot
fulfill their requests immediately.</para>
</listitem>
<listitem>
<para>They handle queued requests as users would expect, discarding
requests that are no longer relevant and reordering requests according
to users' probable priorities.</para>
</listitem>
<listitem>
<para>They let users do other work while long operations proceed to
completion— especially operations not requested by users— such as
reclaiming unused memory or other "housekeeping" operations.</para>
</listitem>
<listitem>
<para>They provide enough feedback for users to understand what they
are doing, and organize feedback according to users' abilities to
comprehend and react to it.</para>
</listitem>
<listitem>
<para>They let users know when processing is in progress.</para>
</listitem>
<listitem>
<para>They let users know or estimate how long lengthy operations will
take.</para>
</listitem>
<listitem>
<para>They let users set the pace of work, when possible, and they let
users stop requested tasks that have started but not finished.</para>
</listitem>
</itemizedlist>
<!-- CB-Ed: Collapse some of the items in the list above, they are similar or have lots of overlap. -->
<para>Highly responsive applications put users in control by quickly
acknowledging each user request, by providing continuous feedback about
progress toward fulfilling each request, and by letting users complete
tasks without unacceptable delays.</para>
<para>Even applications with attractive, intuitive user interfaces can
lack responsiveness. Typically, unresponsive applications have at least
one of the following problems:</para>
<itemizedlist>
<listitem>
<para>They provide late feedback— or no feedback— for users'
requests, leaving users wondering what the application has done or is
doing.</para>
</listitem>
<listitem>
<para>When performing extended operations, they prevent users from
doing other work or cancelling the extended operation.</para>
</listitem>
<listitem>
<para>They fail to display estimates of how long extended operations
will last, forcing users to wait for unpredictable periods.</para>
</listitem>
<listitem>
<para>They ignore users' requests while doing unrequested
"housekeeping", forcing users to wait at unpredictable times—
often without feedback.</para>
</listitem>
</itemizedlist>
<para>You can sometimes possible to improve an application's
responsiveness without speeding up the application's code. For tips on
how to make such improvements, see <xref linkend="feedback-responding-to-user"/>.</para>
</sect1>
<sect1 id="feedback-response-times">
<title>Acceptable Response Times</title>
<para>Some user interface events require shorter response delays than
others. For example, an application's response to a user's mouse
click or key press needs to be much faster than its response to a request
to save a file. The table below shows the maximum acceptable response
delay for typical interface events.</para>
<table frame="all">
<title>Maximum acceptable response times for typical events</title>
<tgroup align="left" cols="2">
<thead>
<row>
<entry>UI Event</entry>
<entry>Maximum Acceptable Response Time</entry>
</row>
</thead>
<tbody>
<row>
<entry>Mouse click, pointer movement, window movement or resizing,
keypress, button press, drawing gesture, other UI input event
involving hand-eye co-ordination</entry>
<entry>0.1 second</entry>
</row>
<row>
<entry>Displaying progress indicators, completing ordinary user
commands (e.g. closing a window), completing background tasks
(e.g. reformatting a table)</entry>
<entry>1.0 second</entry>
</row>
<row>
<entry>Displaying a graph or anything else a typical user would
expect to take time (e.g. displaying a new list of all a
company's financial transactions for an accounting period)</entry>
<entry>10.0 seconds</entry>
</row>
<row>
<entry>Accepting and processing all user input to any task</entry>
<entry>10.0 seconds</entry>
</row>
</tbody>
</tgroup>
</table>
<para>Make each response delay in your application as short as possible,
unless users need time to see the displayed information before it is
erased. The acceptable response delay for each event is based on a typical
user's sense that the event is a logical point at which to stop or
pause. The greater that sense is, the more willingly the user will wait
for a response. Verify that your application responds to users'
requests within the limits listed in the table above. If your application
cannot respond within those limits, it probably has one or more general
problems caused by a particular algorithm or module.</para>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Verify that your application provides feedback within 100
milliseconds (0.1 second) after each key press, movement of the mouse,
or other physical input from the user.</para>
</listitem>
<listitem>
<para>Verify that your application provides feedback within 100
milliseconds (0.1 second) after each change in the state of controls
that react to input from the user— for example, displaying menus or
indicating drop targets.</para>
</listitem>
<listitem>
<para>Verify that your application takes no longer than 1 second to
display each progress indicator, complete each ordinary user command,
or complete each background task.</para>
</listitem>
<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>
</listitem>
</itemizedlist>
</sect1>
<sect1 id="feedback-responding-to-user">
<title>Responding to User Requests</title>
<para>If your application takes too long to respond, users will become
frustrated. Use these techniques to improve the responsiveness of your
application.</para>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Display feedback as soon as possible.</para>
</listitem>
<listitem>
<para>If you cannot display all the information that a user has
requested, display the most important information first.</para>
</listitem>
<listitem>
<para>Save time by displaying approximate results while calculating
finished results.</para>
</listitem>
<listitem>
<para>If users are likely to repeat a time-consuming command in rapid
succession, save time by faking the command's effects instead of
repeatedly processing the command. For example, if a user adds several
rows to a table stored in a database, you might display each new row
immediately but delay actually creating each new row in the database
until the user finished adding all the rows.</para>
</listitem>
<listitem>
<para>Work ahead. Prepare to perform the command that is most likely
to follow the current command. That is, use idle time to anticipate
users' probable next requests. For example, as the user of an
email application reads the currently displayed new message, the
application might prepare to display the next new message.</para>
</listitem>
<listitem>
<para>Use background processing. Perform less important tasks —such as
housekeeping— in the background, enabling users to continue working.</para>
</listitem>
<listitem>
<para>Delay work that is not urgent. Perform it later, when more time
is available.</para>
</listitem>
<listitem>
<para>Discard unnecessary operations. For example, to move back
several pages in a web browser, a user might click the browser's
<guibutton>Back</guibutton> button several times in rapid succession.
To display the final requested page more quickly, the browser might
not display the pages visited between the current page and that final
page.</para>
</listitem>
<listitem>
<para>Use dynamic time management. At run time, change how your
application prioritizes user input and other processing, based on the
application's current state. For example, if a user is typing text
in one word-processing document while printing another, the
word-processing application might delay the printing task if the user
shifts to an editing task (such as cutting and pasting text) that
requires greater resources.</para>
</listitem>
<listitem>
<para>In your application, display an estimate of how long each
lengthy operation will take.</para>
<itemizedlist>
<listitem>
<para>If a command might take longer than 5 seconds to complete
its work on an object, allow users to interact with any parts of
the object and parts of the application that are not directly
affected by the command.</para>
</listitem>
<listitem>
<para>If a command provides lengthy output, show partial results
as they become available. Scroll the results (if necessary) until
the user moves input focus to a component (e.g. a scrollbar or
text area) involved in the scrolling.</para>
</listitem>
</itemizedlist>
</listitem>
</itemizedlist>
</sect1>
<sect1 id="feedback-types">
<title>Types of Visual Feedback</title>
<para>You can use two types of visual feedback for operations in your
application— pointer feedback and progress animations.</para>
<sect2 id="pointer-feedback">
<title>Pointer Feedback</title>
<para>Pointer feedback changes the shape of the pointer. For example, a
busy pointer indicates that an operation is in progress and that the
user cannot do other tasks. A busy-interactive pointer indicates that an
operation is in progress but the window is still interactive.</para>
<figure>
<title>Busy pointer (left) and Busy-Interactive pointer (right)</title>
<mediaobject>
<imageobject>
<imagedata depth="28" fileref="images/feedback-pointers-busy.png" format="PNG" width="58"/>
</imageobject>
<imageobject>
<imagedata fileref="images/feedback-pointers-busy.eps" format="EPS"/>
</imageobject>
<textobject>
<phrase>Busy pointer (left) and busy-interactive pointer (right)</phrase>
</textobject>
</mediaobject>
</figure>
<!-- CB-Fig: Replace above figure with one that is cleaned up. -->
</sect2>
<sect2 id="progress-animations">
<title>Progress Animations</title>
<para>Progress animations show either how much of an operation is
complete, or only that an operation is ongoing. Normally, these take the
form of either a progress bar or a progress checklist.</para>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>When displaying a progress animation, open it as soon as
possible after you know it is required, and close it automatically
as soon as the associated operation is complete.</para>
</listitem>
<listitem>
<para>Use a measured-progress bar if your application can estimate
either how long the operation will take, or what proportion of the
operation is complete.</para>
</listitem>
<listitem>
<para>If your application can make neither estimate, and the
operation only has one step, use an <link linkend="indeterminate-progress">indeterminate-progress bar</link>.
For operations with two or more steps, use a <link linkend="progress-checklists">progress checklist</link> that
dynamically displays a check mark for each completed step.</para>
</listitem>
</itemizedlist>
<sect3 id="progress-bars">
<title>Progress Bars</title>
<para>For information on different types of progress bars and when to use
them see <xref linkend="controls-progress-bars"/>.</para>
<sect4 id="progress-windows-vs-status-bar">
<title>Progress Windows vs. the Statusbar</title>
<para>In an application where the <link linkend="windows-primary">primary
windows</link> contain a <link linkend="controls-status-bars">status
bar</link> (which in turn contains a progress bar), it will often be
the case that an operation's feedback could be presented in
either the statusbar or a <link linkend="windows-progress">progress
window</link>. A rule of thumb is to use the statusbar when an
operation is expected to take fewer than ten seconds, otherwise use
a progress window. However, do consider the following when choosing
between the two:</para>
<itemizedlist>
<listitem>
<para>Opening a new window, particularly when an operation is
short, can needlessly disrupt the user's workflow.</para>
</listitem>
<listitem>
<para>Progress windows can convey more information.</para>
</listitem>
<listitem>
<para>Multiple progress windows can be open at once, whereas
only a single operation can be presented in a statusbar.</para>
</listitem>
<listitem>
<para>Progress windows provide a <guibutton>Cancel</guibutton>
button.</para>
</listitem>
</itemizedlist>
</sect4>
</sect3>
<sect3 id="progress-checklists">
<title>Checklist Windows</title>
<para>A checklist window shows the sequence of stages in an operation.
See <xref linkend="progress-window-checklists"/>.
<figure><title>A Checklist Window</title>
<mediaobject>
<imageobject><imagedata fileref="images/feedback-checklist-running.png" format="PNG" width="336" depth="220"/></imageobject>
<textobject><phrase>A
checklist window showing a sequence of steps</phrase></textobject>
<imageobject>
<imagedata fileref="images/feedback-checklist-running.eps" format="EPS"/>
</imageobject>
</mediaobject>
</figure></para>
</sect3>
</sect2>
</sect1>
<sect1 id="feedback-choosing">
<title>Choosing Appropriate Feedback</title>
<para>To determine which type of visual feedback to provide for a
particular operation, consider these factors:</para>
<itemizedlist>
<listitem>
<para>Whether your application can provide an estimate of the
operation's progress.</para>
</listitem>
<listitem>
<para>Whether the operation blocks the user from issuing further
commands in your application.</para>
</listitem>
<listitem>
<para>Whether your application has a dedicated space, such as a status
bar, for indicating the status of operations.</para>
</listitem>
</itemizedlist>
<para>The table below shows which type of feedback to provide for
operations that usually take at least 1 second to finish. In the
"Appropriate Feedback" column, "Internal progress
animations" means progress animations displayed in an
application's dedicated status area, and "External progress
animations" means progress animations displayed somewhere other than
in a dedicated status area— typically, in an alert box.</para>
<table frame="all">
<title>Visual feedback types for operations that take at least 1 second</title>
<tgroup align="left" cols="4">
<thead>
<row>
<entry>Typical Duration > 5 seconds?</entry>
<entry>User blocked from issuing further commands?</entry>
<entry>Application has dedicated status area?</entry>
<entry>Appropriate feedback</entry>
</row>
</thead>
<tbody>
<row>
<entry>Yes</entry>
<entry>Yes</entry>
<entry>Yes</entry>
<entry>Internal animation plus pointer feedback</entry>
</row>
<row>
<entry>Yes</entry>
<entry>Yes</entry>
<entry>No</entry>
<entry>Pointer feedback</entry>
</row>
<row>
<entry>Yes</entry>
<entry>No</entry>
<entry>Yes</entry>
<entry>Internal animation</entry>
</row>
<row>
<entry>No</entry>
<entry>Yes</entry>
<entry>Yes</entry>
<entry>Internal animation plus pointer feedback</entry>
</row>
<row>
<entry>No</entry>
<entry>Yes</entry>
<entry>No</entry>
<entry>External animation plus pointer feedback</entry>
</row>
<row>
<entry>No</entry>
<entry>No</entry>
<entry>Yes</entry>
<entry>Internal animation</entry>
</row>
<row>
<entry>No</entry>
<entry>No</entry>
<entry>No</entry>
<entry>External animation</entry>
</row>
</tbody>
</tgroup>
</table>
<itemizedlist>
<title>Guidelines</title>
<listitem>
<para>Use a busy pointer whenever users are blocked from interaction
with your application for 1 second or longer. Display the busy pointer
less than 1 second after the operation begins.</para>
</listitem>
<listitem>
<para>If a command will likely take 10 seconds or longer to finish,
provide a <guibutton>Stop</guibutton> or <guibutton>Cancel</guibutton>
button, which can also be activated by pressing <keycap>Esc</keycap>,
that lets users terminate the command's processing even if your
application cannot undo the command's effects. See <xref linkend="feedback-interrupting"/>.</para>
</listitem>
<listitem>
<para>When using an external animation, leave the window containing
the animation on-screen for at least 1 second after the operation has
completed, with a successful completion message. Change the
<guibutton>Stop</guibutton> or <guibutton>Cancel</guibutton> button to
an <guibutton>OK</guibutton> button during this period— pressing this
button should close the window immediately.</para>
</listitem>
</itemizedlist>
</sect1>
<sect1 id="feedback-interrupting">
<title>Allowing Interruptions</title>
<para>Users sometimes need to stop a command— for example, because it is
taking too long. Your application should let users stop commands in
progress, even if stopping a command cannot undo or "roll back"
all the command's effects.</para>
<itemizedlist>
<title>Guidelines</title>
<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>
</listitem>
<listitem>
<para>Label the button <guibutton>Cancel</guibutton> if the whole
operation can be cleanly abandoned with no side effects, leaving the
system in the state it was in prior to the operation beginning.
Terminate the command immediately when the user presses this button.</para>
</listitem>
<listitem>
<para>Label the button <guibutton>Stop</guibutton> if the command can
be interrupted, but its effects up to that point cannot (or should
not) be reversed. When the user presses this button, open an alert box
that warns of the potential side effects of stopping the command. The
alert box should have only two buttons: one for continuing the
command's processing, and one for immediately terminating it.</para>
</listitem>
<!-- CB-Fig: Figure here showing example alertbox in context (overlaying the progress animation in a dialog, etc.) with sample alerbox text. JLFDG AT p. 107 shows this. (Fig 66) -->
</itemizedlist>
<para>Alternatively, you can place the <guibutton>Stop</guibutton> or
<guibutton>Cancel</guibutton> button near the control with which the user
issued the command that needs to be stopped. Place the button here only
if:</para>
<itemizedlist>
<listitem>
<para>There is no progress animation for the command, or</para>
</listitem>
<listitem>
<para>The progress animation is in a window's status area or in
another location that lacks space for a <guibutton>Stop</guibutton> or
<guibutton>Cancel</guibutton> button.</para>
</listitem>
</itemizedlist>
<para>In the alert box that appears after pressing a
<guibutton>Stop</guibutton> button, ensure the message and button labels
in the alert box are specific and precise. Ambiguous button labels can
cause users to terminate or continue a command unintentionally. For
example, use:</para>
<para><screen>Continue deleting files? <guibutton>[Continue Deleting]</guibutton>
<guibutton>[Stop Deleting]</guibutton></screen></para>
<para>rather than</para>
<para><screen>Operation interrupted, continue? <guibutton>[Yes]</guibutton>
<guibutton>[No]</guibutton></screen></para>
<para>since in the latter example, it is not clear whether pressing
<guibutton>Yes</guibutton> would continue the operation or continue the
interruption (i.e. cancel the operation).</para>
</sect1>
</chapter>
<chapter id="design">
<title>Visual Design</title>
<para>Visual design is not just about making your application look pretty. Good visual design is about communication. A well-designed application will make it easy for the user to understand the information that is being presented, and show them clearly how they can interact with that information. If you can achieve all that, your application <emphasis>will</emphasis> look good to the user, even if it doesn't have any fancy graphics or spinning logos!</para>
<!-- GJM: This kind of folksy remark really is not appropriate at all. -->
<!-- TODO:
- More than any other section this needs to be liberally sprinkled with examples
-->
<!-- Color section based on Coleen's HTML draft -->
<sect1 id="design-color">
<title>Color</title>
<para>Color is a good tool for communicating information in a user interface. For example, it can be used to:</para>
<itemizedlist>
<listitem><para>strengthen a desktop's look and feel by enhancing a theme</para></listitem>
<listitem><para>accent a dynamic alert in a system management application</para></listitem>
<listitem><para>emphasize an element in a long list to expedite scanning</para></listitem>
<listitem><para>add aesthetically pleasing details to an icon</para></listitem>
</itemizedlist>
<para>However, color should always be regarded as a useful addition to your design, not as a necessity. Never depend upon colors alone to display important information, and keep in mind that if colors cannot be perceived correctly (for example, the user has an 8-bit system, or is color-blind), your application should still be usable. </para>
<sect2 id="Palette">
<title>Palette</title>
<!-- primary contributor to the href="http://primates.ximian.com/~tigert/new_stock_project/" GNOME stock icon repository -->
<para>A 32-color palette has been developed for the GNOME desktop. The palette may be downloaded from <ulink url="http://developer.gnome.org/projects/gup/images/ximian-palette">http://developer.gnome.org/projects/gup/images/ximian-palette</ulink>. To use it in The GIMP, save it to your <filename>~/.gimp_1.2/palettes</filename> folder, and restart The GIMP. A single, consistently-used palette helps give a unified look and feel to the desktop while minimizing visual distractions. If you need a color that is darker or lighter than the colors in this basic palette (e.g., for anti-aliasing), choose a color that is closest to the hue you need, then darken or lighten as required.</para>
<figure><title>The basic GNOME 32-color palette</title>
<mediaobject>
<imageobject><imagedata fileref="images/visdes-palette.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette.eps" format="EPS"/></imageobject>
<textobject><phrase>The basic GNOME 32-color palette</phrase></textobject>
</mediaobject>
</figure>
<table frame="none">
<title>RGB and hexadecimal values for the basic palette</title>
<tgroup cols="8" colsep="1" rowsep="0" align="left">
<thead>
<row rowsep="1" valign="top">
<entry>Color</entry>
<entry>Description</entry>
<entry>RGB</entry>
<entry>Hex</entry>
<entry>Color</entry>
<entry>Description</entry>
<entry>RGB</entry>
<entry>Hex</entry>
</row>
</thead>
<tbody valign="middle">
<row>
<entry><mediaobject>
<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>234 232 227</entry>
<entry>#EAE8E3 </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-2.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-2.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Basic 3D Medium</entry>
<entry>186 181 171</entry>
<entry>#BAB5AB</entry>
</row>
<row>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-3.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-3.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Basic 3D Dark</entry>
<entry>128 125 116</entry>
<entry>#807D74 </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-4.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-4.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>3D Shadow</entry>
<entry>86 82 72</entry>
<entry>#565248 </entry>
</row>
<row>
<entry><mediaobject>
<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>197 210 200</entry>
<entry>#C5D2C8 </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-6.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-6.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Green Medium</entry>
<entry>131 166 127</entry>
<entry>#83A67F </entry>
</row>
<row>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-7.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-7.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Green Dark</entry>
<entry>93 117 85</entry>
<entry>#5D7555 </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-8.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-8.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Green Shadow</entry>
<entry>68 86 50</entry>
<entry>#445632 </entry>
</row>
<row>
<entry><mediaobject>
<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>224 182 175</entry>
<entry>#E0B6AF </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-10.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-10.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Red Medium</entry>
<entry>193 102 90</entry>
<entry>#C1665A </entry>
</row>
<row>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-11.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-11.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Red Dark</entry>
<entry>136 70 49</entry>
<entry>#884631 </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-12.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-12.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Red Shadow</entry>
<entry>102 56 34</entry>
<entry>#663822 </entry>
</row>
<row>
<entry><mediaobject>
<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>173 167 200</entry>
<entry>#ADA7C8 </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-14.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-14.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Purple Medium</entry>
<entry>136 127 163</entry>
<entry>#887FA3 </entry>
</row>
<row>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-15.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-15.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Purple Dark</entry>
<entry>98 91 129</entry>
<entry>#625B81 </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-16.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-16.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Purple Shadow</entry>
<entry>73 64 102</entry>
<entry>#494066 </entry>
</row>
<row>
<entry><mediaobject>
<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>157 184 210</entry>
<entry>#9DB8D2 </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-18.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-18.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Blue Medium</entry>
<entry>117 144 174</entry>
<entry>#7590AE </entry>
</row>
<row>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-19.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-19.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Blue Dark</entry>
<entry>75 105 131</entry>
<entry>#4B6983 </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-20.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-20.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Blue Shadow</entry>
<entry>49 78 108</entry>
<entry>#314E6C </entry>
</row>
<row>
<entry><mediaobject>
<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>239 224 205</entry>
<entry>#EFE0CD </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-22.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-22.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Face Skin Medium</entry>
<entry>224 195 158</entry>
<entry>#E0C39E </entry>
</row>
<row>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-23.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-23.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Face Skin Dark</entry>
<entry>179 145 105</entry>
<entry>#B39169 </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-24.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-24.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Face Skin Shadow</entry>
<entry>130 102 71</entry>
<entry>#826647 </entry>
</row>
<row>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-25.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-25.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Accent Red</entry>
<entry>223 66 30</entry>
<entry>#DF421E </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-26.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-26.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Accent Red Dark</entry>
<entry>153 0 0</entry>
<entry>#990000 </entry>
</row>
<row>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-27.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-27.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Accent Yellow</entry>
<entry>238 214 128</entry>
<entry>#EED680 </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-28.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-28.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Accent Yellow Dark</entry>
<entry>209 148 12</entry>
<entry>#D1940C </entry>
</row>
<row>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-29.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-29.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Accent Green </entry>
<entry>70 160 70</entry>
<entry>#46A046 </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-30.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-30.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Accent Green Dark</entry>
<entry>38 199 38</entry>
<entry>#267726 </entry>
</row>
<row>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-31.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-31.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>White</entry>
<entry>255 255 255</entry>
<entry>#ffffff </entry>
<entry><mediaobject>
<imageobject><imagedata fileref="images/visdes-palette-32.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-palette-32.eps" format="EPS"/></imageobject>
</mediaobject></entry>
<entry>Black</entry>
<entry>0 0 0</entry>
<entry>#000000 </entry>
</row>
</tbody>
</tgroup>
</table>
</sect2>
<sect2 id="hsv">
<title>Hue, Brightness, Contrast</title>
<para>Users with vision disorders, such as color-blindness or low vision, require alternatives to default settings. A good user interface anticipates these needs by providing customizable preferences and support for accessible themes. Even better is an application that is already configured with carefully-chosen color and contrast defaults.</para>
<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>
<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">
<tbody valign="top">
<row>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/visdes-colorblind-normal.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-colorblind-normal.eps" format="EPS"/></imageobject>
<textobject><phrase>Photo of earth as a normally-sighted user would see it</phrase></textobject>
</mediaobject>
</entry>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/visdes-colorblind-deutan.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-colorblind-deutan.eps" format="EPS"/></imageobject>
<textobject><phrase>Photo of earth as a user with red-green color-blindness would see it</phrase></textobject>
</mediaobject>
</entry>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/visdes-colorblind-tritan.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-colorblind-tritan.eps" format="EPS"/></imageobject>
<textobject><phrase>Photo of earth as a user with blue-yellow color-blindness would see it</phrase></textobject>
</mediaobject>
</entry>
</row>
</tbody>
</tgroup>
</informaltable>
</figure>
<para>Other users have more problems with contrast levels rather than hue on their screen. Some users require a high level of contrast between background and foreground colors, such as black on white, white on black, or some other high-contrast combination. Others can experience discomfort unless they use low-contrast settings, such as gray text on a lighter gray background.</para>
<para>You can meet these needs by ensuring your application supports the accessible GNOME themes (found in the gnome-themes module in cvs), which include high and low contrast themes, and large print themes. This means you must supply default and large sizes of high-, low- and regular-contrast icon sets with your application. <!--See <xref linkend=""/> for information on how to design these icons.--></para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Use the GNOME color palette. If you need a darker or lighter shade, start from one of the colors from the palette and darken or lighten as needed.</para></listitem>
<listitem><para>Do not use color as the only means to distinguish items of information. All such information should be provided by at least one other method, such as shape, position or textual description.</para></listitem>
<listitem><para>Ensure your application is not dependent on a particular theme. Test it with different themes, especially high and low contrast accessibility themes, which use fewer colors, to ensure your application respects the settings. For example, all text should appear in the foreground color against the background color specified in the chosen theme.</para></listitem>
<listitem><para>Select colors carefully. When they need to be recognizably different, select the light colors from orange, yellow, green or blue-green, and darker colors from blue, violet, purple or red, as most people affected by color-blindness already see blue, violet, purple and red as darker than normal.</para></listitem>
</itemizedlist>
</sect2>
</sect1>
<sect1 id="design-window">
<title>Window Layout</title>
<sect2>
<title>General</title>
<para>Placement of visual components in an application is important because relationships between elements are indicated by their positions. This is called "layout" in interface design.</para>
<para>A clean layout is crucial to creating a smooth visual flow of information for the user. This section describes the proper component placement and spacing to use in GNOME applications. The major components discussed will be labels, icons, radio buttons and check boxes, text fields, command buttons, and drop-down menus.</para>
</sect2>
<sect2 id="layout-dialogs">
<title>Dialogs</title>
<para>When a user is scanning a complex preferences dialog consisting of many labels and corresponding check boxes, text fields, and drop-down combination boxes, it is easy to see how she can quickly become hindered by poor layout in the visual design. For information on laying out Alerts, see <xref linkend="alert-spacing"/></para>
<figure id="improved-layout-figure"><title>Improved window layout</title>
<informaltable frame="none">
<tgroup cols="2" align="center">
<tbody valign="top">
<row>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/visdes-layout-poor.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-layout-poor.eps" format="EPS"/></imageobject>
<textobject><phrase>Initial layout with poor alignment and limited use of white space</phrase></textobject>
</mediaobject>
</entry>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/visdes-layout-good.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-layout-good.eps" format="EPS"/></imageobject>
<textobject><phrase>Improved layout with fewer alignment points, frames removed to relieve clutter, and clearer grouping with use of white space</phrase></textobject>
</mediaobject>
</entry>
</row>
</tbody>
</tgroup>
</informaltable>
</figure>
<!-- picture here of a complex preferences dialog, badly designed: right-aligned similar length labels, very little spacing between elements (vertically), varying spaces between elements (horizontally) -->
<para>In <xref linkend="improved-layout-figure"/>, the dialog on the left presents labels which are not left-aligned. The user's eye is not given a proper anchor to scan the dialog quickly.</para>
<para>As the labels are all similar in length, they should be left-aligned. Now the user has a firm left margin to anchor the eye and scan the list of items vertically more easily. If most of the labels in a group greatly differ in length, right-align them instead, so that the controls do not end up too far away from their corresponding labels.</para>
<para>Using frames with visible borders to separate groups within a window is deprecated. Use spacing and bold headers instead. This is more effective because there are fewer gratuitous lines to distract the user from the main content in the window. See <xref linkend="controls-frames"/> for more details.</para>
<para>Try to keep components consonant with each other in terms of size and alignment. This is particularly important within a group of controls, so that the user's ability to quickly scan information is not sacrificed. Minimize as much as possible the need for the user's eye to jump around when scanning a layout.</para>
<figure id="layout-callouts-figure"><title>Layout specifications</title>
<mediaobject>
<imageobject><imagedata fileref="images/visdes-layout-annotated.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-layout-annotated.eps" format="EPS"/></imageobject>
<textobject><phrase>Improved layout with fewer alignment points, frames removed to relieve clutter, and clearer grouping with use of white space</phrase></textobject>
</mediaobject>
</figure>
<!-- Figure here of the above paragraph, giving examples -->
<itemizedlist> <title>Guidelines</title>
<listitem><para>Leave a 12-pixel border between the edge of the window and the nearest controls.</para></listitem>
<listitem><para>Leave a 12-pixel horizontal gap between a control and its label. (The gap may be bigger for other controls in the same group, due to differences in the lengths of the labels.)</para></listitem>
<listitem><para>Labels must be concise and make sense when taken out of context. Otherwise, users relying on screenreaders or similar assistive technologies will not always be able to immediately understand the relationship between a control and those surrounding it.</para></listitem>
<!-- <listitem><para>Assign access keys to all editable controls. Ensure that labels immediately precede their associated control in the tab order, so that the access key will focus to or activate the correct control when pressed.</para></listitem>
<remark>GJM: I almost missed this instance of this error which is repeated below; except that it says mnemonic instead of access key. This entire section is a repeat, it seems. Adding restated listitem.</remark>
-->
<listitem><para>Assign access keys to all editable controls. Ensure that using the access key focuses its associated control.</para></listitem>
</itemizedlist>
</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>
<remark>This section taken from Alan's draft in bug #111772, still needs some work</remark>
<para>GNOME is used on by many different people on a wide variety of
different hardware. This includes people with older hardware and
small displays. Laptop users and users of other portable devices also
need to be able to work on smaller screens. Users who require large fonts, or assistive technologies that take over part of the screen, also have a correspondingly smaller area in which to display application windows and dialogs.</para>
<para>While these space restrictions are intended primarily to allow people
with smaller displays to use Gnome it is also good discipline to keep
windows and dialogs clear with not to many concepts all at once.
<remark>The sentiment of this
paragraph might be useful although it would need to be massively
rephrased-AH.</remark></para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Try to ensure that the size of a window is no larger than 480 pixels
wide and 640 pixels hight in the default theme (including window
decorations). Ideally your application should be usable at 600 by 400
pixels which leaves enough room for both top and bottom Panels.</para></listitem>
<listitem><para>The Ratio of the screen width to height is 2:3 and things will look
aesthetically pleasing if we can keep (near to) this proportion. <remark>This ratio isn't always the case these days, with widescreen monitors and PDA-type devices becoming more common-CB</remark>.
<remark> The
space take by window decorations largely spoils this idealism-AH.</remark>
Dialogs [like a properties dialog] should [probably] be 300 by 400.
Message Dialogs should be 600 by 200.<remark> I'm not sure specifying pixel dimensions for anything we don't really have to is such a good plan- perhaps just stick to the 'golden ratio' guideline that currently lives in next section?- CB.</remark></para></listitem>
</itemizedlist>
</sect2>
-->
<sect2 id="window-layout-spacing">
<title>Spacing and Alignment</title>
<para>Provide adequate space between controls and groups of controls. This white space will make it easier for the user to find the information they need.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>As a basic rule of thumb, leave space between user interface components in increments of 6 pixels, going up as the relationship between related elements becomes more distant. For example, between icon labels and associated graphics within an icon, 6 pixels are adequate. Between labels and associated components, leave 12 horizontal pixels. For vertical spacing between groups of components, 18 pixels is adequate. A general padding of 12 pixels is recommended between the contents of a dialog window and the window borders.</para></listitem>
<listitem><para>Break long lists of choices into smaller groups. For lists of less than about eight items, use radio buttons or check boxes. For longer lists, use a list control or drop-down list.</para></listitem>
<listitem><para>Try to keep elements of the same type left-aligned with each other. For instance, in <xref linkend="layout-callouts-figure"/>, the group titles (<guilabel>General</guilabel> and <guilabel>Actions</guilabel>) are left-aligned and justified with each other.</para></listitem>
<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>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>
<listitem><para>Using "white" or blank spacing and indentation to delineate groups is cleaner and preferable to using graphical separators such as frames.
</para></listitem>
<listitem><para>Align controls in your layout <emphasis>exactly</emphasis>. The eye is very sensitive to aligned and unaligned objects. If nothing lines up with anything else in a window, it will be very hard for the user to scan the contents and find the information he wants. Two things that almost line up, but not quite, are equally distracting.</para></listitem>
<listitem><para>Be consistent. Use the same spacing, alignment, and component sizes in all dialogs appearing in your application. The <guibutton>OK</guibutton> and <guibutton>Cancel</guibutton> buttons, for example, should all appear exactly 12 vertical and horizontal pixels from the lower right corner of every dialog window.</para></listitem>
<listitem><para>Ensure that light and dark areas as well as spacing are equally distributed around the window. Keep in mind that every control or group of controls in your window has a visual "weight," depending on its overall size, color, and how much white space it includes. Darker, larger areas are "heavier," while paler, smaller areas are "lighter."</para></listitem>
<listitem><para>Do not design windows that are more than 50% longer in one dimension than in the other. People are more comfortable looking at windows and dialogs whose dimensions stay within the golden ratio (about 1.6 to 1), a ratio that artists and architects have used to create aesthetically-pleasing paintings and buildings for thousands of years.</para></listitem>
<!-- <para><listitem>Do not resize components to fit arbitrary or uncommon layout needs. Make it a practice to use GtkTables, GtkVBox and GtkHBox container widgets at their default /* Calum, is there such a thing? */ row, column and border sizes. This will help ensure that a lot of layout and alignment work is done for you automatically.</para></listitem>-->
</itemizedlist>
<!--
<note id="frame-layout-tech"><title>Technical Details for Proper Layout</title>
<para>Set <property>Border Width</property> for the GtkDialog to <userinput>12</userinput>. Place a GtkVBox containing as many rows as you wish to have categories inside the control area of the GtkDialog, and set the <property>Spacing</property> for the GtkVBox to <userinput>18</userinput>.</para>
<para>In turn, each category should be composed of a GtkVBox with two rows. Set the <property>Spacing</property> to <userinput>6</userinput>.
<itemizedlist>
<listitem><para>In the top row, place a label for the category header. Make the label bold using the Pango markup <programlisting><span weight="bold"><replaceable>Category Header</replaceable></span></programlisting> Set the label property <property>Use Markup</property> to <userinput>Yes</userinput>, and <property>X Align</property> to <userinput>0.0</userinput> to left align the label.</para></listitem>
<listitem><para>Place a 2-columned GtkHBox in the lower row of the top-level GtkVBox.
<itemizedlist>
<listitem><para>In the left column, place a label containing four space characters. This will serve to indent the category contents.</para></listitem>
<listitem><para>In the right column, place a GtkVBox containing a row per control you wish to place in the category. Set the <property>Spacing</property> to <userinput>6</userinput>.
<itemizedlist>
<listitem><para>For left-side labelled controls such as text boxes, drop-down lists, and many others, place a 2 columned GtkHBox inside the row with a label in the left column and the corresponding control in the right. Set the <property>Spacing</property> on the GtkHBox to <userinput>6</userinput>. Place all labels such as this (for the whole window) in the same GtkSizeGroup (there is currently no way to do this using only Glade, you will have to use code as well). This will align the controls to their right, even between categories, which is important for allowing quick visual scans.</para></listitem>
<listitem><para>For right-side labelled controls such as check boxes and radio buttons, simply place them directly in the row.</para></listitem>
</itemizedlist>
</para></listitem>
</itemizedlist>
</para></listitem>
</itemizedlist>
</para>
</note>
-->
</sect2>
</sect1>
<sect1 id="design-text-labels">
<title>Text Labels</title>
<para>To a user with normal vision, textual output provides the majority of the information and feedback in most applications. To a visually-impaired user who may not be able to see or understand any additional graphical output, clear textual output is critical. You must therefore choose and position text carefully on the screen, and leave the choice of fonts and sizes to the user, to ensure that all users are able to use your application effectively.</para>
<sect2 id="layout-label-position">
<title>Spacing and Alignment</title>
<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">
<title>Alignment and spacing for different Text elements</title>
<tgroup cols="3" align="left">
<thead>
<row>
<entry>Element</entry>
<entry>Placement</entry>
<entry>Example</entry>
</row>
</thead>
<tbody>
<row>
<entry>Large Icons (file browser)</entry>
<entry>Horizontally centered with and (6 pixels, if specification necessary)below large icon</entry>
<entry align="center" valign="middle">
<mediaobject>
<imageobject><imagedata fileref="images/visdes-large-icon-label.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-large-icon-label.eps" format="EPS"/></imageobject>
<textobject><phrase>Large icon with text label centered below</phrase></textobject>
</mediaobject>
</entry>
</row>
<row>
<entry>Small icons (toolbar)</entry>
<entry>Vertically centered with 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>
<imageobject><imagedata fileref="images/visdes-small-icon-label.eps" format="EPS"/></imageobject>
<textobject><phrase>Small icon with text label to the right</phrase></textobject>
</mediaobject>
</entry>
</row>
<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 align="center" valign="middle">
<mediaobject>
<imageobject><imagedata fileref="images/visdes-list-label.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-list-label.eps" format="EPS"/></imageobject>
<textobject><phrase>List control with text label horizontally aligned above</phrase></textobject>
</mediaobject>
</entry>
</row>
<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 align="center" valign="middle">
<mediaobject>
<imageobject><imagedata fileref="images/visdes-radiobutton-label.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-radiobutton-label.eps" format="EPS"/></imageobject>
<textobject><phrase>Radio button with text label to its right</phrase></textobject>
</mediaobject>
</entry>
</row>
<row>
<entry>Text field labels</entry>
<entry>6 pixels to the left of and vertically center aligned with textfield control</entry>
<entry align="center" valign="middle">
<mediaobject>
<imageobject><imagedata fileref="images/visdes-textbox-label.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-textbox-label.eps" format="EPS"/></imageobject>
<textobject><phrase>Textbox with text label to its left</phrase></textobject>
</mediaobject>
</entry>
</row>
<row>
<entry>Button labels</entry>
<entry>12 pixels of padding to either side of centered text (and any accompanying graphic). If appearing in a group of buttons, longest button label sets button size, center all other button labels and accompanying graphics in same-sized buttons</entry>
<entry align="center" valign="middle">
<mediaobject>
<imageobject><imagedata fileref="images/visdes-button-label.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-button-label.eps" format="EPS"/></imageobject>
<textobject><phrase>Buttons with centered text</phrase></textobject>
</mediaobject>
</entry>
</row>
<row>
<entry>Other component labels (e.g., spin boxes, text fields </entry>
<entry>12 pixels between the longest text label and its associated component, all other text labels in component grouping left aligned with the longest label. All labels vertically center aligned with associated components</entry>
<entry align="center" valign="middle">
<mediaobject>
<imageobject><imagedata fileref="images/visdes-other-labels.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/visdes-other-labels.eps" format="EPS"/></imageobject>
<textobject><phrase>Drop-down list with label to its left</phrase></textobject>
</mediaobject>
</entry>
</row>
</tbody>
</tgroup>
</table>
<itemizedlist><title>Guidelines</title>
<listitem><para>If the label precedes the control it is labelling, end the label with a colon. For example, <guilabel>Email:</guilabel> to label a text field into which the user should type their email address. This helps identify it as a control's label rather than an independent item of text. Some assistive technology screen review utilities may also use the presence of a colon to identify text as a control label.</para></listitem>
<!-- <listitem><para>When you use static text to label a control, ensure that the label immediately precedes that control in the Tab order. This will ensure that the access key (underlined character) you assign to the label will move focus to or activate the correct control when pressed.</para></listitem>
<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>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>
<listitem><para>Choose label names carefully. Label objects with names that make sense when taken out of context. Users relying on screenreaders or similar assistive technologies will not always be able to immediately understand the relationship between a control and those surrounding it.</para></listitem>
<listitem><para>Be consistent with label usage and semantics. For example, if you use the same label in different windows, it will help if it means the same thing in both windows. Equally, don't use labels that are spelled differently but sound the same, e.g., "Read" and "Red", as this could be confusing for users relying on screenreaders.</para></listitem>
<listitem><para>Don't use the same label more than once in the same window. This makes life difficult for users relying on tools like magnifiers or screen readers, which cannot always convey surrounding context to the user.</para></listitem>
<listitem><para>Do not hard-code font styles and sizes. The user should be able to adjust all sizes and typefaces.</para></listitem>
<listitem><para>Do not use more than two or three different fonts and sizes in your application, and choose visually distinct rather than similar-looking fonts in one window. Too many font sizes and styles will make the interface look cluttered and unprofessional, and be harder to read. In general, always use fonts from the current theme, and specify relative rather than absolute sizes.</para></listitem>
<listitem><para>Do not use graphical backdrops or "watermarks" behind text, other than those specified by the user's chosen theme. These interfere with the contrast between the text and its background. This can cause difficulty for users with visual impairments, who will therefore normally choose themes that always use plain backdrops.</para></listitem>
</itemizedlist>
</sect2>
<sect2 id="layout-capitalization">
<title>Capitalization</title>
<para>Two styles of capitalization are used in GNOME user interface elements:
<variablelist>
<varlistentry>
<term>Header capitalization</term>
<listitem>
<para>Capitalize all words in the element, with the following exceptions:
<itemizedlist>
<listitem>
<para>Articles: <emphasis>a</emphasis>, <emphasis>an</emphasis>, <emphasis>the</emphasis>.</para>
</listitem>
<listitem>
<para>
Conjunctions: <emphasis>and</emphasis>,
<emphasis>but</emphasis>, <emphasis>for</emphasis>, <emphasis>not</emphasis>,
<emphasis>so</emphasis>, <emphasis>yet</emphasis> ...
</para>
</listitem>
<listitem>
<para>
Prepositions of three or fewer letters:
<emphasis>at</emphasis>, <emphasis>for</emphasis>, <emphasis>by</emphasis>,
<emphasis>in</emphasis>, <emphasis>to</emphasis> ...
</para>
</listitem>
</itemizedlist>
</para>
</listitem>
</varlistentry>
<varlistentry>
<term>Sentence capitalization</term>
<listitem>
<para>
Capitalize the first letter of the first word, and any other words
normally capitalized in sentences, such as application names.
</para>
</listitem>
</varlistentry>
</variablelist>
</para>
<para>
The following table indicates the capitalization style to use for each type
of user interface element.
</para>
<table frame="topbot">
<title>Capitalization Style Guidelines for User Interface
Elements</title>
<tgroup cols="2" colsep="0" rowsep="0" align="left">
<thead>
<row rowsep="1" valign="top">
<entry colname="col1" align="left" valign="top">
Element
</entry>
<entry colname="col2" valign="top" align="left">
Style
</entry>
</row>
</thead>
<tbody>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Check box labels
</entry>
<entry colname="col2" valign="top">
Sentence
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Command button labels
</entry>
<entry colname="col2" valign="top">
Header
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Column heading labels
</entry>
<entry colname="col2" valign="top">
Header
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Desktop background object labels
</entry>
<entry colname="col2" valign="top">
Header
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Dialog messages
</entry>
<entry colname="col2" valign="top">
Sentence
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Drop-down combination box labels
</entry>
<entry colname="col2" valign="top">
Sentence
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Drop-down list box labels
</entry>
<entry colname="col2" valign="top">
Sentence
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Field labels
</entry>
<entry colname="col2" valign="top">
Sentence
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Filenames
</entry>
<entry colname="col2" valign="top">
Sentence
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Graphic equivalent text: for example, Alt text on web pages
</entry>
<entry colname="col2" valign="top">
Sentence
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Group box or frame labels
</entry>
<entry colname="col2" valign="top">
Header
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Items in drop-down combination boxes, drop-down list boxes, and
list boxes
</entry>
<entry colname="col2" valign="top">
Sentence
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
List box labels
</entry>
<entry colname="col2" valign="top">
Sentence
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Menu items
</entry>
<entry colname="col2" valign="top">
Header
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Menu items in applications
</entry>
<entry colname="col2" valign="top">
Header
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Menu titles in applications
</entry>
<entry colname="col2" valign="top">
Header
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Radio button labels
</entry>
<entry colname="col2" valign="top">
Sentence
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Slider labels
</entry>
<entry colname="col2" valign="top">
Sentence
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Spin box labels
</entry>
<entry colname="col2" valign="top">
Sentence
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Tabbed section titles
</entry>
<entry colname="col2" valign="top">
Header
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Text box labels
</entry>
<entry colname="col2" valign="top">
Sentence
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Titlebar labels
</entry>
<entry colname="col2" valign="top">
Header
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Toolbar button labels
</entry>
<entry colname="col2" valign="top">
Header
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Tooltips
</entry>
<entry colname="col2" valign="top">
Sentence
</entry>
</row>
<row valign="top">
<entry colname="col1" align="left" valign="top">
Webpage titles and navigational elements
</entry>
<entry colname="col2" valign="top">
Header
</entry>
</row>
</tbody>
</tgroup>
</table>
<note><title>Capitalization guidelines for other languages</title>
<para>Languages other than English may have different rules about capitalization. For example, Swedish has no concept of Header capitalization. Contact the <ulink url="http://developer.gnome.org/projects/gtp/contact.html">GNOME Translation Project</ulink> if you are in doubt about how to capitalize labels in a particular language.</para>
</note>
</sect2>
</sect1>
<sect1 id="design-fonts">
<title>Fonts</title>
<para>Only use the fonts that the user has specified in their theme, and in sizes relative to the default size specified in their theme. This will ensure maximum legibility and accessibility for all users.</para>
<para>Do not mix more than two or three font sizes and styles (underlined, bold, italicized) in one window, as this will look unprofessional and distract the user from the information being conveyed.</para>
<para>Provide alternatives to WYSIWYG where applicable. Some users may need to print text in a small font but edit in a larger screen font, for example. Possible alternatives include displaying all text in the same font and size (both of which are chosen by the user); a "wrap-to-window" option that allows you to read all the text in a window without scrolling horizontally; a single column view that shows the window's contents in a single column even if they will be printed in multiple columns; and a text-only view, where graphics are shown as placeholders or text descriptions.</para>
</sect1>
</chapter>
<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 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>
</para>
<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">
<title>A globe in different icon styles</title>
<tgroup cols="3" colsep="0" rowsep="0" align="center">
<thead>
<row valign="top">
<entry>Java Metal</entry>
<entry>MacOS/X Aqua</entry>
<entry>GNOME</entry>
</row>
</thead>
<tbody>
<row valign="middle">
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/icons-style-java.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-style-java.eps" format="EPS"/></imageobject>
<textobject><phrase>Java globe</phrase></textobject>
</mediaobject>
</entry>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/icons-style-aqua.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-style-aqua.eps" format="EPS"/></imageobject>
<textobject><phrase>Aqua globe</phrase></textobject>
</mediaobject>
</entry>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/icons-style-gnome.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-style-gnome.eps" format="EPS"/></imageobject>
<textobject><phrase>GNOME globe</phrase></textobject>
</mediaobject>
</entry>
</row>
</tbody>
</tgroup>
</table>
<sect2 id="icon_style_perspective">
<title>Perspective</title>
<remark>FIXME: need to flesh out a little</remark>
<formalpara>
<title>Table perspective</title>
<para>Presents objects as if they were sitting on a table or desk in front of the user.</para>
</formalpara>
<figure>
<title>Illustration of the table perspective</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-perspective-table.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-perspective-table.eps" format="EPS"/></imageobject>
<textobject><phrase>illustration of the table perspective</phrase></textobject>
</mediaobject>
</figure>
<formalpara>
<title>Shelf perspective</title>
<para>Presents objects as if they were propped up on a shelf at eye level. Make it look like a police line-up.</para>
</formalpara>
<figure>
<title>Illustration of the shelf perspective</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-perspective-shelf.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-perspective-shelf.eps" format="EPS"/></imageobject>
<textobject><phrase>illustration of the shelf perspective</phrase></textobject>
</mediaobject>
</figure>
</sect2>
<sect2 id="icon_style_lighting">
<title>Lighting</title>
<remark>FIXME: need to flesh out a little</remark>
<formalpara>
<title>Upper left</title>
<para>Design as if there is lighting coming from the upper left corner, with a soft drop-shadow cast within the icon's 48x48 (original design size) borders (120 degrees, 4 pixel distance, 4 pixel blur).</para>
</formalpara>
<formalpara>
<title>Overhead</title>
<para>Design as if there is a light source placed above the "camera", casting a shadow down. <!-- FIXME: need to make this more detailed --> </para>
</formalpara>
</sect2>
<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>
</sect2>
</sect1>
<sect1 id="icons-types">
<title>Kinds of Icons</title>
<table frame="all" 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">
<thead>
<row>
<entry>Icon Type</entry>
<entry>Sizes (pixels)</entry>
<entry>Perspective</entry>
<entry>Light Source</entry>
<entry>Examples</entry>
</row>
</thead>
<tbody>
<row>
<entry>Object / Document Icons</entry>
<entry>24x24, 48x48*, 96x96</entry>
<entry>Table</entry>
<entry>Upper Left</entry>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/icons-objects.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-objects.eps" format="EPS"/></imageobject>
<textobject><phrase>variety of object icons</phrase></textobject>
</mediaobject>
</entry>
</row>
<row>
<entry>Application Icons</entry>
<entry>24x24, 48x48*</entry>
<entry>Table</entry>
<entry>Upper Left</entry>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/icons-applications.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-applications.eps" format="EPS"/></imageobject>
<textobject><phrase>variety of application icons</phrase></textobject>
</mediaobject>
</entry>
</row>
<row>
<entry>Toolbar Icons</entry>
<entry>24x24*, 48x48</entry>
<entry>Shelf</entry>
<entry>Overhead</entry>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/icons-toolbar.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-toolbar.eps" format="EPS"/></imageobject>
<textobject><phrase>variety of toolbar icons</phrase></textobject>
</mediaobject>
</entry>
</row>
<row>
<entry>Menu Icons</entry>
<entry>16x16</entry>
<entry>Shelf</entry>
<entry>Overhead</entry>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/icons-menu.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-menu.eps" format="EPS"/></imageobject>
<textobject><phrase>variety of menu icons</phrase></textobject>
</mediaobject>
</entry>
</row>
</tbody>
</tgroup>
</table>
<para>(* denotes the primary size for this kind of icon)</para>
<sect2 id="document_icons">
<title>Document Icons</title>
<para>If possible, document icons should convey the type of the file using a physical object. For example a good icon for MPEG video would be a movie reel. Failing the existence of an appropriate object, when a document type corresponds to a specific application, another option is to use a piece of paper with the corresponding application's icon overlayed it as the document icon. This may be appropriate for a document type such as an application's settings files.</para>
<itemizedlist>
<listitem><para>Do <emphasis>not</emphasis> display a piece of paper behind a document icon unless the document type has a use correspondence with physical paper (or a suitable object was not found and you are using the application icon). For example, the final state of most word processing documents is a piece of paper, so it is appropriate to use a piece of paper in the icon. On the other hand, a movie on the computer has little association with a piece of paper, so a piece of paper behind the movie reel primarily introduces <link linkend="icon_problems_extraneous_information">visual noise</link>. The use of a piece of paper in most or all document types creates an additional problem: it is harder to scan large numbers of icons because they do not possess <link linkend="icon_design_silhouettes">distinct outlines</link>. A useful technique for creating a subtle difference between document types with similar roles (for example, between "JPEG", "PNG", "GIF", etc) is to use different colours. Expert users who need to make this distinction frequently will become accustomed to these differences.</para></listitem>
<listitem><para>Do <emphasis>not</emphasis> include a file extension in the icon. The document icon's job is not to convey such precise information but to allow for rapid visual distinction between documents. Additionally, this text will not be displayed in the user's preferred font and size. Because many document types are associated with multiple file extensions, a file extension embedded in the icon will also frequently be wrong. In a context where the file extension is actually useful, the application should composite the information onto the icon at runtime (thereby using the correct font and size, as well as getting the extension right).</para></listitem>
<listitem><para>Do <emphasis>not</emphasis> customize document icons to a particular Nautilus theme. Document icons are likely to be used in conjunction with a variety of different icon themes, and should work well with all of them.</para></listitem>
</itemizedlist>
</sect2>
<sect2 id="application_icons">
<title>Application Icons</title>
<!-- FIXME: we could give a lot more useful guidance here -->
<para>Application's that handle documents should reflect the kind of document they handle in the icon. If an application's predominant purpose is to edit a particular kind of document, it should use this document's icon as its icon.</para>
</sect2>
<sect2 id="toolbar_icons">
<title>Toolbar Icons</title>
<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>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 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>
<sect2 id="menu_icons">
<title>Menu Icons</title>
<para>Principles of toolbar icon design should be followed with menu icons, just at a smaller size. Where a corresponding toolbar icon exists, a menu icon should mirror its design.</para>
</sect2>
</sect1>
<sect1 id="icons-design">
<title>Designing Effective Icons</title>
<para>
<tip><title>Rule of Thumb for Icon Metaphors</title><para>"If you have to think about an icon to 'get it', the metaphor is too complex"</para></tip>
</para>
<itemizedlist>
<listitem>
<formalpara>
<title>Design Functionally Suggestive Icons</title>
<para>Icons should be suggestive of the functionality with which they are associated. The best icon will suggest to the user the primary purpose of the program or operation without having to read accompanying text. Users recognize functionally suggestive icons more rapidly than other forms because they directly associate with a physical object or action.</para>
</formalpara>
<figure>
<title>A functionally suggestive icon for a word processor</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-word-processor.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-word-processor.eps" format="EPS"/></imageobject>
<textobject><phrase>A document with a pencil writing on it</phrase></textobject>
</mediaobject>
</figure>
<figure>
<title>A functionally suggestive icon for underline</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-underline-text.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-underline-text.eps" format="EPS"/></imageobject>
<textobject><phrase>An underlined character</phrase></textobject>
</mediaobject>
</figure>
</listitem>
<listitem id="icon_design_silhouettes">
<formalpara>
<title>Make Icon Silhouettes Distinct</title>
<para>It is important to make it easy to visually distinguish icons that will be used together, for example toolbar icons and document icons. The human visual system is excellent at making rapid distinctions between items based on shape, thus a good way to help your users sort through a large number of icons is to use different shapes. You can see the shape of an icon most clearly by turning it into a silhouette: blacken all areas of the icon which are not transparent.</para>
</formalpara>
<example>
<title>Distinct silhouettes from the GNOME icon theme</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-silhouette.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-silhouette.eps" format="EPS"/></imageobject>
<textobject><phrase>Silhouettes of various toolbar icons</phrase></textobject>
</mediaobject>
</example>
</listitem>
</itemizedlist>
<!-- CB-Ed: Much of this section has good substance, but is communicated poorly. There seem to be a lot of blanket statements, and the tone is subjective (e.g., text describing figure 12, the Gnumeric icon. Stick just to the facts, or try to stay closely to objective language, and language that will not be presenting things in a way that can be argued with or questioned. -->
<!-- Seth: Objective language does not present the entire picture. While its better for laying down hard and fast guidelines, it does not assist designers in understanding the motivation behind various decisions. This document covers the design *philosophy* as well as providing specific guidelines. This is in fact one of my major complaints about the Java guidelines relative to the MacOS guidelines. Java guidelines attempt to maintain a facade of scientific objectivity and in doing so fail to educate designers as well as failing to communicate the real dynamics of good design. Dealing with more subjective issues is particularly important because many of the readers of the GNOME guidelines will not be professional icon artists, or even graphic designers. -->
<!-- FIXME: we need a short section that talks about finding useful metaphors and images for icons -->
<sect2 id="icon_design_process">
<title>Suggested Design Process For Toolbar and Menu Icons</title>
<para>For accessibility reasons, you should create high contrast versions of all icons, in addition to the regular contrast icon. A suggested process for conveniently integrating this into your icon design is as follows:</para>
<orderedlist>
<listitem>
<para>Draw the basic outline as close to 48x48 pixels as possible:</para>
<mediaobject>
<imageobject><imagedata fileref="images/icon-design-process-1.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icon-design-process-1.eps" format="EPS"/></imageobject>
</mediaobject>
</listitem>
<listitem>
<para>Fill in with black and white to create detail. Do not add gratuities such as drop shadows or anti-aliasing:</para>
<mediaobject>
<imageobject><imagedata fileref="images/icon-design-process-2.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icon-design-process-2.eps" format="EPS"/></imageobject>
</mediaobject>
</listitem>
<listitem>
<para>Use the finished image as the large print high contrast icon:</para>
<mediaobject>
<imageobject><imagedata fileref="images/icon-design-process-3.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icon-design-process-3.eps" format="EPS"/></imageobject>
</mediaobject>
</listitem>
<listitem>
<para>GNOME will automatically scale it down to create the 24x24 high contrast icon:</para>
<mediaobject>
<imageobject><imagedata fileref="images/icon-design-process-4.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icon-design-process-4.eps" format="EPS"/></imageobject>
</mediaobject>
</listitem>
<listitem>
<para>Or you may hand-create a 24x24 version, which will be superior in contrast and sharpness:</para>
<mediaobject>
<imageobject><imagedata fileref="images/icon-design-process-5.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icon-design-process-5.eps" format="EPS"/></imageobject>
</mediaobject>
</listitem>
<listitem>
<para>Add color and anti-aliasing to the large print high contrast icon:</para>
<mediaobject>
<imageobject><imagedata fileref="images/icon-design-process-6.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icon-design-process-6.eps" format="EPS"/></imageobject>
</mediaobject>
</listitem>
<listitem>
<para>Add gradients for a smooth, realistic effect:</para>
<mediaobject>
<imageobject><imagedata fileref="images/icon-design-process-7.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icon-design-process-7.eps" format="EPS"/></imageobject>
</mediaobject>
</listitem>
<listitem>
<para>Add a drop shadow (120 degree global angle, 4 pixel distance, 4 pixel blur, 40% opacity), and use the finished image as the large print regular contrast icon:</para>
<mediaobject>
<imageobject><imagedata fileref="images/icon-design-process-8.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icon-design-process-8.eps" format="EPS"/></imageobject>
</mediaobject>
</listitem>
<listitem>
<para>Now you should hand-create a version of this icon at 24x24. Do <emphasis>not</emphasis> simply scale the larger icon, as this icon will be seen by the majority of users and the result of scaling would be less distinct:</para>
<mediaobject>
<imageobject><imagedata fileref="images/icon-design-process-9.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icon-design-process-9.eps" format="EPS"/></imageobject>
</mediaobject>
</listitem>
<listitem>
<para>Create a layer with the large print regular contrast icon's same outline and size then overlay that on the color icon. Give the overlay layer 40% opacity, and use the finished image as the large print low contrast icon:</para>
<mediaobject>
<imageobject><imagedata fileref="images/icon-design-process-10.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icon-design-process-10.eps" format="EPS"/></imageobject>
</mediaobject>
</listitem>
<listitem>
<para>GNOME will automatically scale it down to create the 24x24 low contrast icon:</para>
<mediaobject>
<imageobject><imagedata fileref="images/icon-design-process-11.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icon-design-process-11.eps" format="EPS"/></imageobject>
</mediaobject>
</listitem>
<listitem>
<para>Or you may hand-create a 24x24 version, which will be superior in contrast and sharpness:</para>
<mediaobject>
<imageobject><imagedata fileref="images/icon-design-process-12.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icon-design-process-12.eps" format="EPS"/></imageobject>
</mediaobject>
</listitem>
</orderedlist>
</sect2>
<sect2 id="icon_problems">
<title>Problems to Avoid</title>
<itemizedlist>
<listitem>
<formalpara>
<title>Avoid name suggestive icons</title>
<para>Some icons, such as the original Nautilus file manager icon, do not suggest the program's purpose, but instead suggest the program's name. This is less desirable than a functionally suggestive icon, because an extra layer of abstraction is added (rather than associating file management with an icon representing files, they have to associate file management with nautilus with an image of a nautilus shell). Additionally it makes it difficult for new users who may not know what "Nautilus" is, and hence will not recognize a shell icon as the file manager.</para>
</formalpara>
<figure>
<title>The original, name suggestive icon for Nautilus</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-nautilus.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-nautilus.eps" format="EPS"/></imageobject>
<textobject><phrase>A picture of a nautilus shell</phrase></textobject>
</mediaobject>
</figure>
</listitem>
<listitem>
<formalpara>
<title>Do <emphasis>not</emphasis> include meaningful text in icons</title>
<para>Icons that contain the text of the program name in the icon. They effectively contain no metaphor or picture for the user to identify with, and are probably harder to read than the accompanying caption. Since icons draw the eyes, an icon that is harder to identify than text is potentially worse than no icon at all. Hence "text icons" should not be used. Moreover, text should be avoided in icons because it makes the icons difficult to translate. If there is text in icons it should not form words in your native language, a good metric for ensuring that the particular text is not lending to the meaning of the icon.</para>
</formalpara>
<figure>
<title>Text in the original GEdit icon</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-gedit.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-gedit.eps" format="EPS"/></imageobject>
<textobject><phrase>The original GEdit icon, a rectangle containing the word "GEdit".</phrase></textobject>
</mediaobject>
</figure>
</listitem>
<listitem>
<formalpara>
<title>Do <emphasis>not</emphasis> rely on information your users will not have</title>
<para>Random icons appear to have no association with the application (except perhaps some odd connection in the mind of the developer). These icons should <emphasis>never</emphasis> be used and will likely serve to confuse the user more than help them. The icon's purpose should not be to "look pretty"; this is merely a very desirable side effect.</para>
</formalpara>
<para>The SodiPodi project logo is a squirrel, which is used as the application icon. However, because the logo has no obvious connection <emphasis>to a user</emphasis>, it is a poor icon. Make sure that you are not relying on information that users won't necessarily possess.</para>
<figure>
<title>A seemingly random icon for SodiPodi</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-sodipodi.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-sodipodi.eps" format="EPS"/></imageobject>
<textobject><phrase>A squirrel</phrase></textobject>
</mediaobject>
</figure>
</listitem>
<listitem id="icon_problems_extraneous_information">
<formalpara>
<title>Do <emphasis>not</emphasis> include extraneous information</title>
<para>Remember that icons will often be viewed in a smaller form. Too much information may render the icon unintelligible when it is shrunk in size (e.g. to be placed on a panel, or in the tasklist). Too much information also makes it easier for users confuse the purpose of the application. For example, in user testing many users thought an older version of the Evolution icon (below) would launch a word processor. They were misled by the pencil and the paper, which could be seen as extraneous information: it is implicit that the mail program will allow you to write messages as well as receive them. A better icon might have been a simple envelope. Foremost in the icon designer's mind should be a consideration of the minimal visual elements necessary to express the purpose of the program.</para>
</formalpara>
<figure>
<title>Extraneous information - the Evolution icon</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-evolution.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-evolution.eps" format="EPS"/></imageobject>
<textobject><phrase>The Evolution icon</phrase></textobject>
</mediaobject>
</figure>
<para>
This Gnumeric icon (below) is a great icon except for the introduction of extra visual noise. The extra sheet of paper with the 'g' on it behind the spreadsheet and chart adds no significant value to the icon and provides extra visual distraction. In this case the contribution of the extraneous element to the appearance of the icon is negative. Simple, well-balanced icons look more attractive than cluttered icons. An improved icon might contain only the spreadsheet and chart; larger because they can use all of the space in the icon, and hence more visually distinct.
</para>
<figure>
<title>Extraneous information - the old Gnumeric icon</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-gnumeric.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-gnumeric.eps" format="EPS"/></imageobject>
<textobject><phrase>The Gnumeric icon</phrase></textobject>
</mediaobject>
</figure>
</listitem>
<listitem>
<formalpara>
<title>Do <emphasis>not</emphasis> include body parts in the icon</title>
<para> Because GNOME aims to be an international desktop, it needs to avoid imagery that is potentially offensive or crass to other cultures. A prime source of offensive imagery is various body parts in a number of different configurations. Aside from offensive gestures with the hands, arms or fingers; body parts that are considered "clean" in one culture (such as eyes), will be considered tasteless or gross to another (such as a nose). Based on a survey of icons in GNOME, body parts frequently appear in the least communicative icons (often "pointing" at some element in the icon); they are being used as an ineffective crutch for poor metaphor. In these situations body parts should <emphasis>not</emphasis> be used. Even in situations where the metaphor is appropriate (for example an eye representing the sawfish appearance capplet) it is better to avoid using a body part. Often body parts have been used in GNOME to suggest a human "choosing" or "using" something. This is normally an unnecessary point for the icon designer to make. People naturally attempt to understand objects in reference to themselves (show someone a bat and they will think of hitting something with the bat, show someone a tool and they will think of using it, etc). For example, the font selector shows a finger pointing to an "F" suggesting the user choosing between a series of fonts. A better icon would be the text "Aa" presented in an ornate font (calling attention to the font rather than the text). The user doesn't need to be told that they are "choosing" the font, they can infer that easily.</para>
</formalpara>
<figure>
<title>Using body parts - the font selector icon</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-font-selection-poor.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-font-selection-poor.eps" format="EPS"/></imageobject>
<textobject><phrase>The original Font Selector Icon</phrase></textobject>
</mediaobject>
</figure>
<figure>
<title>A better icon for the Font Selector</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-font-selection-good.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-font-selection-good.eps" format="EPS"/></imageobject>
<textobject><phrase>A simple replacement icon showing an ornate "Aa"</phrase></textobject>
</mediaobject>
</figure>
</listitem>
<listitem>
<formalpara>
<title>Do <emphasis>not</emphasis> base icons off word puns</title>
<para>This should be avoided for a couple reasons, the most obvious of which is that puns do not translate well. For example, representing the "system log monitor" as a log will likely be uncommunicative in languages other than English. Additionally, most users do not comprehend the word play until it is too late for the icon to assist them. Even after being familiar with the "system log monitor" being represented as a log, users do not form the association fast enough for the icon to assist through in scanning through menu entries. A popular instance of this problem was the proliferation of icons representing the "World Wide Web" as a spider web in the mid 1990s. Part of the value of icons is that they bypass linguistic comprehension and hence are complementary to captions, allowing users to utilize more areas of the mind than linguistic recognition (already used in scanning for captions) when they hunt for items.</para>
</formalpara>
<figure>
<title>Word play - System Log Monitor icon</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-system-log.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-system-log.eps" format="EPS"/></imageobject>
<textobject><phrase>A tree log</phrase></textobject>
</mediaobject>
</figure>
</listitem>
<listitem>
<formalpara>
<title>Do <emphasis>not</emphasis> employ violent imagery</title>
<para>Just as words like "kill" and "slay" are inappropriate in interfaces, violent or destructive icons should be avoided. The "shut down" icon uses the image of an explosive detonation switch, presumably trying to convey the idea of ending something abruptly. However, this icon is likely to intimidate some users of the computer who will not want to click on the icon for fear of breaking something.</para>
</formalpara>
<figure>
<title>Destructive-looking Shutdown icon</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-shut-down.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-shut-down.eps" format="EPS"/></imageobject>
<textobject><phrase>An explosive detonation button</phrase></textobject>
</mediaobject>
</figure>
</listitem>
</itemizedlist>
</sect2>
</sect1>
<sect1 id="icons-design-accessible">
<title>Designing Accessible Icons</title>
<para>
The GNOME desktop includes a high contrast theme that make the desktop and the applications running on it accessible to users with a range of visual impairments.To be considered fully accessible, all icons in your application
must be replaced by a suitable alternative when this
themes is used.</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>
<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">
<title>Simulation of low vision user viewing high contrast icons</title>
<tgroup cols="3" colsep="0" rowsep="0" align="center">
<thead>
<row valign="top">
<entry>Description</entry>
<entry>High Contrast Icon</entry>
<entry>Simulated Appearance</entry>
</row>
</thead>
<tbody>
<row valign="top">
<entry>Book</entry>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/icons-hc-book.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-hc-book.eps" format="EPS"/></imageobject>
<textobject><phrase>Book icon</phrase></textobject>
</mediaobject>
</entry>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/icons-hc-book-blur.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-hc-book-blur.eps" format="EPS"/></imageobject>
<textobject><phrase>Blurred Book icon</phrase></textobject>
</mediaobject>
</entry>
</row>
<row valign="top">
<entry>CD-ROM</entry>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/icons-hc-cdrom.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-hc-cdrom.eps" format="EPS"/></imageobject>
<textobject><phrase>CD-ROM icon</phrase></textobject>
</mediaobject>
</entry>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/icons-hc-cdrom-blur.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-hc-cdrom-blur.eps" format="EPS"/></imageobject>
<textobject><phrase>Blurred CD-ROM icon</phrase></textobject>
</mediaobject>
</entry>
</row>
<row valign="top">
<entry>Copy</entry>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/icons-hc-copy.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-hc-copy.eps" format="EPS"/></imageobject>
<textobject><phrase>Copy icon</phrase></textobject>
</mediaobject>
</entry>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/icons-hc-copy-blur.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-hc-copy-blur.eps" format="EPS"/></imageobject>
<textobject><phrase>Blurred Copy icon</phrase></textobject>
</mediaobject>
</entry>
</row>
</tbody>
</tgroup>
</table>
<para>
If a regular icon uses a simple, straightforward metaphor the corresponding high contrast icon can often use the same metaphor. In many cases the same metaphor will need to be drawn differently to create a simplified high contrast icon.
</para>
<figure>
<title>Simplified representation of metaphors for high contrast icons</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-hc-metaphors.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-hc-metaphors.eps" format="EPS"/></imageobject>
<textobject><phrase>Comparison of photorealistic style of regular icons with the simpler, line-art style of high contrast icons</phrase></textobject>
</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>
<figure>
<title>Layered technique for high contrast icons</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-floppy-dissected.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-floppy-dissected.eps" format="EPS"/></imageobject>
<textobject><phrase>Exploded view of layers used in high contrast floppy disk icon</phrase></textobject>
</mediaobject>
</figure>
<tip><title>Reuse existing shapes</title>
<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>
</sect2>
<sect2 id="icons-design-lowcontrast">
<title>Low Contrast Icons</title>
<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>
<figure>
<title>Levels dialog in GIMP showing correct levels for generating low contrast icons</title>
<mediaobject>
<imageobject><imagedata fileref="images/icons-lowcontrast-levels.png" format="PNG"/></imageobject>
<imageobject><imagedata fileref="images/icons-lowcontrast-levels.eps" format="EPS"/></imageobject>
<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>
</sect2>
</sect1>
</chapter>
<!-- Keep this comment at the end of the file
Local variables:
mode: xml
sgml-omittag:nil
sgml-shorttag:nil
sgml-namecase-general:nil
sgml-general-insert-case:lower
sgml-minimize-attributes:nil
sgml-always-quote-attributes:t
sgml-indent-step:2
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:("/usr/lib/sgml/catalog")
sgml-local-ecat-files:("ECAT" "~/sgml/ECAT" "/usr/lib/sgml/ECAT" "/usr/local/lib/sgml/ECAT")
End:
-->
<chapter id="input">
<title>User Input</title>
<sect1 id="input-mouse">
<title>Mouse Interaction</title>
<sect2 id="mouse-buttons">
<title>Buttons</title>
<figure> <title>A plethora of pointing devices: mouse, trackball, foot-operated mouse, joystick, trackpad, and a finger-mounted pointing device.</title>
<mediaobject>
<imageobject><imagedata fileref="images/input-pointing-devices.png" format="PNG" width="480" depth="80"/></imageobject>
<imageobject><imagedata fileref="images/input-pointing-devices.eps" format="EPS"/></imageobject>
<textobject><phrase>Pictures of different types of pointing device, including mouse, trackball, foot-operated mouse and joystick.</phrase></textobject>
</mediaobject>
</figure>
<!-- CB-Ed: The following paragraphs are VERY GOOD because they lay out terms and definitions for the reader clearly and unequivocally. -->
<para>For most users, the mouse provides the main way of interacting with graphical user interfaces. The term "mouse" is used in this chapter to include other pointing devices that can be used to move the pointer around the screen, such as trackballs, trackpads, spaceballs, graphics tablets, or assistive technology devices that emulate a mouse.</para>
<para>For right-handed users, the left button on a conventional mouse is used for the majority of mouse actions. We therefore call it the <mousebutton>left button</mousebutton> here, even though that may not physically be the case. For this reason, you may sometimes see this button referred to in code or documentation as "Button 1" or the "Selection Button".</para>
<para>Similarly for right-handed users, the right button on a conventional mouse is used for operations involving pop-up menus. We therefore call it the <mousebutton>right button</mousebutton> in this chapter. You may sometimes see this button referred to in code or documentation as "Button 3" or the "Menu Button".</para>
<para>A conventional mouse with three buttons normally has its third button (or a scrollwheel that acts as a button when pushed) between the left and right buttons. We therefore call it the <mousebutton>middle button</mousebutton>, but you may sometimes see this referred to in code or documentation as "Button 2" or the "Transfer Button".</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Your application uses left button gestures for selecting, activating components, dragging, and the display of drop-down menus.</para></listitem>
<listitem><para>Your application uses right button gestures to display and select actions from a popup menu.</para></listitem>
<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">
<title>Effect of modifier keys on a <mousebutton>middle button</mousebutton> transfer operation</title>
<tgroup cols="2" align="left">
<thead>
<row>
<entry>Modifier</entry>
<entry>Function</entry>
</row>
</thead>
<tbody>
<row>
<entry>Unmodified</entry>
<entry>Copy selection</entry>
</row>
<row>
<entry><keycap>Ctrl</keycap></entry>
<entry>Copy selection</entry>
</row>
<row>
<entry><keycap>Shift</keycap></entry>
<entry>Move selection</entry>
</row>
<row>
<entry><keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap></keycombo></entry>
<entry>Create link, shortcut or alias to selection</entry>
</row>
</tbody>
</tgroup>
</table>
<para>Do not over-ride this functionality in any part of your user interface where the transfer action is likely to be useful. If you do intend to use the middle button for a different purpose somewhere, only do so as a shortcut for experienced users, and only for operations that can also be performed without using the <mousebutton>right button</mousebutton> or <mousebutton>middle button</mousebutton>.</para></listitem>
<listitem><para>If present on the mouse, the scrollwheel should scroll the window or control under the pointer, if it supports scrolling. Initiating scrolling in this way should not move keyboard focus to the window or control being scrolled. <remark>If it supports both horizontal and vertical scrolling, perhaps suggest unmodified scrollwheel should scroll vertically, and <keycombo><keycap>Shift</keycap><mousebutton>scrollwheel</mousebutton></keycombo> should scroll horizontally.</remark></para></listitem>
<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 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>
<listitem><para>Do not warp the mouse pointer, or restrict mouse movement to part of the screen. This can interfere with assistive technologies, and is usually confusing even for users who do not rely on assistive technologies.</para></listitem>
<listitem><para>Do not require the use of chording (pressing multiple mouse buttons simultaneously) for any operations.</para></listitem>
<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>Do not assign any actions exclusively to the middle button of a three-button mouse, as not all mice have one.</para></listitem>
<listitem><para>Do not hard-code mouse target sizes, or make them too small. Define any mouse targets to be at least as large as the arrow button in a GtkSpinBox in the current gtk theme. Bear in mind that a user with impaired dexterity or vision may be using a theme that results in considerably larger widgets than the default theme.</para></listitem>
<listitem><para>Do not refer to particular mouse buttons in your interface unless absolutely necessary. Not everybody will be using a conventional mouse with left, middle and right buttons, so any text or diagrams that refer to those may be confusing.</para></listitem>
</itemizedlist>
</sect2>
<sect2 id="selection">
<title>Selecting Objects</title>
<sect3 id="mouse-keyboard-equivalents">
<title>Mouse and keyboard equivalents</title>
<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">
<title>Standard mouse and keyboard selection mechanisms</title>
<tgroup cols="3" align="left">
<thead>
<row>
<entry/>
<entry>Mouse</entry>
<entry>Keyboard</entry>
</row>
</thead>
<tbody>
<row>
<entry>Select item, deselect all others</entry>
<entry>Click</entry>
<entry><keysym>Space</keysym></entry>
</row>
<row>
<entry>Add/remove item from selection</entry>
<entry><keycap>Ctrl</keycap> click (toggles item's selected state)</entry>
<entry><keycombo><keycap>Ctrl</keycap><keysym>Space</keysym></keycombo> (toggles focused item's selected state)</entry>
</row>
<row>
<entry>Extend selection</entry>
<entry><keycap>Shift</keycap> click</entry>
<entry><keycombo><keycap>Shift</keycap><keysym>Space</keysym></keycombo>, <keycombo><keycap>Shift</keycap><keycap>Home</keycap></keycombo>, <keycombo><keycap>Shift</keycap><keycap>End</keycap></keycombo>, <keycombo><keycap>Shift</keycap><keycap>PageUp</keycap></keycombo>, or <keycombo><keycap>Shift</keycap><keycap>PageDown</keycap></keycombo></entry>
</row>
<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.
<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>
<entry>Select All</entry>
<entry>Click first item, then <keycap>Shift</keycap> click last item</entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>A</keycap></keycombo></entry>
</row>
<row>
<entry>Deselect All</entry>
<entry>Click container background</entry>
<entry><keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>A</keycap></keycombo></entry>
</row>
<row>
<entry>Activate selection</entry>
<entry>Double-click to activate a single selection. <keycap>Shift</keycap> or <keycap>Ctrl</keycap> double-clicking extends or adds item to selection first before activating the entire selection.</entry>
<entry><keysym>Return</keysym> activates entire selection. If nothing is currently selected, selects currently-focused item first.</entry>
</row>
<row>
<entry>Invert Selection</entry>
<entry>No mouse equivalent</entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>I</keycap></keycombo></entry>
</row>
</tbody>
</tgroup>
</table>
</sect3>
<sect3 id="bounding-box-selection">
<title>Bounding Box Selection</title>
<para>For a container whose objects may be arranged in two dimensions, for example the icon view in a file manager, allow multiple selection by dragging a bounding box (sometimes called a "rubber band") around one or more objects. <keycombo action="other" otheraction="drag"><keycap>Shift </keycap><mousebutton>left button</mousebutton></keycombo> <action>drag</action> should add all the objects within the bounding box to the existing selection. <keycombo action="other" otheraction="drag"><keycap>Ctrl </keycap><mousebutton>left button</mousebutton></keycombo> <action>drag</action> should toggle the selected state of all the objects within the bounding box.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para><remark>This guideline needs to be so much better worded :) </remark>Allow a bounding box selection to begin only if the initial mouse button press is made:</para>
<itemizedlist>
<listitem><para>Within the bounds of the container's background, and</para></listitem>
<listitem><para>outside the bounds of any another object in the same container that can be dragged.</para></listitem>
</itemizedlist>
<para>In a drawing application, for example, this means that a bounding box click and drag could start on a blank area of the canvas, or within a shape that had been locked down to prevent accidental editing, but not in an active shape which would itself be dragged instead.</para></listitem>
<listitem><para>Select any objects that lie wholly or partly within the bounding box when the mouse button is released. <remark>This is different from 1.0 advice, need to update figure 10.2 accordingly.</remark></para></listitem>
<listitem><para>Use dynamic highlighting during the drag to show which objects will be selected. Do not wait until the mouse button is released. This avoids any uncertainty about which objects will be selected by the bounding box.</para></listitem>
<listitem><para>When a bounding box is being dragged out within a scrollable window, support automatic scrolling of that window when the box is dragged near the window's edges.</para></listitem>
</itemizedlist>
<figure> <title>Examples illustrating dynamic selection highlighting during bounding box selection. In the first example, the folder color and label highlighting changes to indicate selection. In the second, selection is indicated by the addition of resizing handles to selected objects.</title>
<mediaobject>
<imageobject><imagedata fileref="images/input-drag-select-files.png" format="PNG" width="509" depth="166"/></imageobject>
<imageobject><imagedata fileref="images/input-drag-select-files.eps" format="EPS"/></imageobject>
<textobject><phrase>Example illustrating dynamic selection highlighting during bounding box selection</phrase></textobject>
</mediaobject>
<mediaobject>
<imageobject><imagedata fileref="images/input-drag-select-graphics.png" format="PNG" width="598" depth="147"/></imageobject>
<imageobject><imagedata fileref="images/input-drag-select-graphics.eps" format="EPS"/></imageobject>
<textobject><phrase>Example illustrating dynamic selection highlighting during bounding box selection</phrase></textobject>
</mediaobject>
</figure>
</sect3>
</sect2>
<sect2 id="drag-drop">
<title>Drag and Drop</title>
<para>Drag and drop is a direct manipulation technique, where you perform actions on selected objects by moving them around the screen with the mouse. You "drag" an object by clicking it, then holding the button while you move the pointer to the object's target location. The object is "dropped" at that location by releasing the mouse button.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Use drag and drop only where the user can reasonably guess what the effect might be. The most common uses are:</para>
<itemizedlist>
<listitem><para>to move or copy objects from one place to another</para></listitem>
<listitem><para>to link one object to another</para></listitem>
<listitem><para>to perform an action on the objects by dropping them onto an icon representing that action, such as a trash can or printer icon.</para></listitem>
</itemizedlist>
</listitem>
<listitem><para>Provide visual feedback throughout a drag and drop operation. Highlight valid targets and change the mouse pointer as it passes over them. Use the "no drop" mouse pointer when passing over invalid drop targets. See also <xref linkend="drag-drop-pointers"/>.</para></listitem>
<listitem><para>Augment the mouse pointer with a representation of the objects being dragged. Keep this representation small or make it translucent, so as not to obscure possible drop targets underneath it. See also <xref linkend="drag-drop-pointers"/>.</para>
<figure>
<title>Example of copy pointer augmented by an icon representing the file being copied</title>
<mediaobject>
<imageobject><imagedata fileref="images/input-drag-cursor.png" format="PNG" width="101" depth="129"/></imageobject>
<imageobject><imagedata fileref="images/input-drag-cursor.eps" format="EPS"/></imageobject>
<textobject><phrase>Copy pointer superimposed on icon representing a file being copied, to form a "copy file" pointer</phrase></textobject>
</mediaobject>
</figure>
<remark>The pointer shapes shown here aren't actually the current GTK defaults, they're the current KDE (and Windows) defaults. Should we try and persuade GTK to change?</remark>
</listitem>
<listitem><para>Only allow objects to be copied between applications, not moved. This avoids any confusion about which application's <guimenuitem>Undo</guimenuitem> function reverses the operation.</para></listitem>
<listitem><para>Allow the user to cancel a drag and drop operation by all of these methods:</para>
<itemizedlist>
<listitem><para>pressing <keycap>Esc</keycap> before releasing the mouse button</para></listitem>
<listitem><para>dropping the object back on its original location</para></listitem>
<listitem><para>performing a <action>query drag</action> and selecting <guimenuitem>Cancel</guimenuitem> on the pop-up menu (see <xref linkend="drag-drop-query"/>)</para></listitem>
<listitem><para>dropping the object on an invalid drop target.</para></listitem>
</itemizedlist>
</listitem>
<listitem><para>Allow the user to undo the effects a drag and drop operation by selecting <menuchoice><guimenu>Edit</guimenu><guimenuitem>Undo</guimenuitem></menuchoice>.</para></listitem>
<listitem><para>Allow multiple objects to be dragged by <keycap>Shift</keycap> or <keycap>Ctrl</keycap> selecting them, then dragging any one of the selected objects.</para></listitem>
<listitem><para>Ensure that keyboard users can replicate all drag and drop actions using only menu items or keyboard shortcuts, such as <guimenuitem>Copy</guimenuitem> (<keycombo><keycap>Ctrl</keycap><keycap>C</keycap></keycombo>) and <guimenuitem>Paste</guimenuitem> (<keycombo><keycap>Ctrl</keycap><keycap>V</keycap></keycombo>).</para></listitem>
<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>
<!-- 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
<listitem><para>Move selected objects when the user drags them within a container. Copy or link to selected objects when the user drags them between containers. A "container" may be a boundary imposed by the user interface (e.g. a top-level application window), or a user interface representation of a physical container (e.g. a mail server or disk partition).</para>
<para><remark>The whole "dragging between containers" thing concerns me, as it's not always obvious to users what constitues a "container", especially when it gets down to physical details that the user may not even know or care about (e.g. different disk partitions). This is why the right mouse drag menu we're now discrediting came into existence in the first place. There are also exceptions to the rule, e.g. dragging anything into Trash should presumably move it rather than copy it.</remark></para></listitem>
-->
</itemizedlist>
<sect3 id="drag-drop-override"><title>Overriding drag and drop behavior</title>
<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">
<title>Effect of modifier keys during a drag and drop operation</title>
<tgroup cols="2" align="left">
<thead>
<row>
<entry>Modifier</entry>
<entry>Function</entry>
</row>
</thead>
<tbody>
<row>
<entry><keycap>Ctrl</keycap></entry>
<entry>Copy</entry>
</row>
<row>
<entry><keycap>Shift</keycap></entry>
<entry>Move</entry>
</row>
<row>
<entry><keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap></keycombo></entry>
<entry>Create link, shortcut or alias</entry>
</row>
</tbody>
</tgroup>
</table>
</sect4>
<sect4 id="drag-drop-query"><title>Query Drag</title>
<para>Allow the user to drag objects with the <mousebutton>middle button </mousebutton>, or with <keycap>Alt</keycap><mousebutton> left button</mousebutton>. Pop up a menu when the mouse button is released, offering the choice of <guimenuitem>Copy</guimenuitem>, <guimenuitem>Move</guimenuitem> and <guimenuitem>Link</guimenuitem> (or whichever subset of those actions is available), and <guimenuitem>Cancel</guimenuitem>. Dragging in this way is known as <action>query drag</action> because it prompts the user before changing anything.</para>
</sect4>
</sect3>
<sect3 id="drag-drop-pointers">
<title>Mouse Pointers to Use for Drag and Drop</title>
<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">
<title>Mouse Pointers for Drag and Drop</title>
<tgroup cols="2" align="left">
<thead>
<row>
<entry>Pointer Shape</entry>
<entry>Meaning</entry>
</row>
</thead>
<tbody>
<row>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/input-drag-cursor-move.png" format="PNG" width="31" depth="32"/></imageobject>
<imageobject><imagedata fileref="images/input-drag-cursor-move.eps" format="EPS"/></imageobject>
<textobject><phrase>"Move" pointer</phrase></textobject>
</mediaobject>
</entry>
<entry>Move selection. The dragged selection will be moved to the drop location, removing it from its previous location.</entry>
</row>
<row>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/input-drag-cursor-copy.png" format="PNG" width="33" depth="30"/></imageobject>
<imageobject><imagedata fileref="images/input-drag-cursor-copy.eps" format="EPS"/></imageobject>
<textobject><phrase>"Copy" pointer</phrase></textobject>
</mediaobject>
</entry>
<entry>Copy selection. The dragged selection will be copied to the drop location, leaving the original intact.</entry>
</row>
<row>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/input-drag-cursor-link.png" format="PNG" width="37" depth="33"/></imageobject>
<imageobject><imagedata fileref="images/input-drag-cursor-link.eps" format="EPS"/></imageobject>
<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 original selection, for example.</entry>
</row>
<row>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/input-drag-cursor-query.png" format="PNG" width="28" depth="32"/></imageobject>
<imageobject><imagedata fileref="images/input-drag-cursor-query.eps" format="EPS"/></imageobject>
<textobject><phrase>"Query drop" pointer</phrase></textobject>
</mediaobject>
</entry>
<entry>Middle button or Alt-left button drag. A pop-up menu will be posted at the drop location to ask whether the user wants to Move, Copy, or Link the selection, or Cancel the operation.</entry>
</row>
<row>
<entry>
<mediaobject>
<imageobject><imagedata fileref="images/input-drag-cursor-nodrop.png" format="PNG" width="28" depth="32"/></imageobject>
<imageobject><imagedata fileref="images/input-drag-cursor-nodrop.eps" format="EPS"/></imageobject>
<textobject><phrase>"Can't drop here" pointer</phrase></textobject>
</mediaobject>
</entry>
<entry>Can't drop here. Show this pointer while the mouse is over an area where the selection cannot be dropped.</entry>
</row>
</tbody>
</tgroup>
</table>
</sect3>
</sect2>
<sect2 id="mouse-interaction-applets">
<title>Mouse Interaction with Panel Applications (Applets)</title>
<para>All objects on the desktop must behave consistently. Despite their specialized nature, applets are no exception.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>The unmodified left mouse button must be sufficient to operate all your applet's controls. Applets are meant to be simple enough that modified clicking, or clicking with other mouse buttons (except to pop up the applet's menu) is never required.</para>
<remark>Suggestion: Clicking and dragging anywhere within the applet window whilst holding down the <keycap>Ctrl</keycap> and/or <keycap>Shift</keycap> keys could reposition the applet as if dragging with the middle mouse button (<keycombo action="other" otheraction="drag"><keycap>Ctrl</keycap><mousebutton>left</mousebutton></keycombo> <action>drag</action>=copy, if moving to another panel; <keycombo action="other" otheraction="drag"><keycap>Shift</keycap><mousebutton>left</mousebutton></keycombo> <action>drag</action>=move, if moving to another panel).</remark></listitem>
<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>
</itemizedlist>
</sect2>
</sect1>
<sect1 id="input-keyboard">
<title>Keyboard Interaction</title>
<sect2 id="keyboard-navigation">
<title>Keyboard Navigation</title>
<para>A well-designed keyboard user interface plays a key role when you are designing applications. Many power-users prefer to perform most operations with the keyboard rather than the mouse. Visually-impaired users can navigate software more effectively using the keyboard, because using the mouse depends on visual feedback of the mouse pointer location. And mobility impairments can prevent a user from successfully navigating using the mouse, because of the fine motor control skills required.</para>
<para>Make all mouse actions available from the keyboard, and include keyboard access to all toolbars, menus, links and buttons. Every function your application provides must be available using the keyboard alone. Hiding your mouse while you test your application is a great way to test this!</para>
<figure>
<title>Dialog and menu, with some of their access and shortcut keys indicated</title>
<mediaobject>
<imageobject><imagedata fileref="images/input-accesskeys-shortcuts.png" format="PNG" width="497" depth="399"/></imageobject>
<imageobject><imagedata fileref="images/input-accesskeys-shortcuts.eps" format="EPS"/></imageobject>
<textobject><phrase>Screenshot of a dialog and a menu with some of their access keys and shortcut keys highlighted</phrase></textobject>
</mediaobject>
</figure>
<para>Most functionality is easy to make available from the keyboard, by using access keys and shortcut keys, and the toolkit's built-in keyboard navigation features. All controls with labels should have access keys, and frequently-used menu items should be assigned shortcut keys. However, operations that rely on drag-and-drop, for example, may require more thought to make them keyboard accessible.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Provide efficient keyboard access to all application features. In particular, ensure every control on menus and in dialogs are directly focusable using access keys or shortcut keys.</para></listitem>
<listitem><para>Use a logical keyboard navigation order. When navigating around a window with the Tab key, keyboard focus should move between controls in a predictable order. In Western locales, this is normally left to right and top to bottom.</para></listitem>
<listitem><para>Ensure correct tab order for controls whose enabled state is dependent on check box, radio button or toggle button state. When such a button is selected, all its dependent controls should be enabled, and all the dependent controls of any other button in the group should be disabled. When the user selects a check box, radio button or toggle button that has dependent controls, do not automatically give focus to the first dependent control, but instead leave the focus on the button.
<!-- See <xref linkend="keynav-examples"/>.--></para></listitem>
<listitem><para>Do not over-ride existing system-level accessibility features. For example, the MouseKeys feature in the GNOME <guilabel>Keyboard Accessibility</guilabel> preferences dialog allows mouse movement and button clicks to be simulated using the keypad. Therefore you cannot add features to your application that can only be accessed by pressing keys on the keypad, as users relying on the MouseKeys feature will not be able to use them.</para></listitem>
<listitem><para>Ensure that any text that can be selected with the mouse can also be selected with the keyboard. This is a convenience for all users, but especially for those for whom fine control of the mouse is difficult.</para></listitem>
<listitem><para>Ensure that objects that can be resized or moved by drag and drop can also be resized or moved with the keyboard. For example, icons and windows on the desktop. Where precision sizing and placement is potentially important, e.g. shapes in a diagram, also consider providing a dialog into which you can type co-ordinates, or a means of snapping objects to a user-definable grid.</para></listitem>
<listitem><para>Do not use general navigation functions to trigger operations. For example, do not use basic <keycap>Tab</keycap> keyboard navigation in a dialog to activate any actions associated with a control.</para></listitem>
<listitem><para>Show keyboard-invoked menus, windows and tooltips near the object they relate to, but without hiding or obscuring the object to which the menu or tooltip refers,. In GNOME, popup menus are activated with <keycombo><keycap>Shift</keycap><keycap>F10</keycap></keycombo>, and tooltips with <keycombo><keycap>Ctrl</keycap><keycap>F1</keycap></keycombo>.</para></listitem>
<listitem><para>Provide more than one method to perform keyboard tasks where possible. Users may find some keys and key combinations easier to use than others.</para></listitem>
<listitem><para>Do not assign awkward reaches to frequently performed keyboard operations. Some people may only be able to use one hand on the keyboard, so shortcuts that can be easily used with one hand are preferable for common operations. In any case, having to frequently perform long or difficult reaches on the keyboard can increase muscle strain for all users, increasing the risk of pain or injury.</para></listitem>
<listitem><para>Do not require repetitive use of simultaneous keypresses. Some users are only able to press and hold one key at a time. Assistive technologies such as the GNOME <guilabel>Keyboard Accessibility</guilabel> preferences dialog do allow users to press the keys sequentially rather than simultaneously, but this of course means the operation will take longer for them.</para></listitem>
</itemizedlist>
<remark>The point about not having Tab initiate any actions effectively rules out tab completion in dialogs, should we consider/recommend a "hands-free" auto-completion method instead, as offered by OpenOffice.org, Explorer etc.? What does our new 2.0 file selection dialog do?</remark>
</sect2>
<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>
<!-- Consensus was against giving OK and Cancel additional access keys, but they have them anyway and Owen refuses to remove them...
<note>
<title>For discussion</title>
<para>It's been suggested that even OK and Cancel should have access keys, as this is more obvious to newer users. (KDE does this). What do we think? Advantages: means you do not always have to have an Enter-operated default button in dialogs where this might lead you to close the dialog by mistake. Disadvantages: Adds an extra way for people to do things, potentially adding the "dither" factor; uses up O and C access keys, which could be awkward in larger/tabbed dialogs.</para>
</note>
-->
<para>Choose access keys to be as easy to remember as possible. Normally, this means using the first letter of the label. However, in complex windows, the choice can become more difficult. Here are some simple rules:</para>
<orderedlist>
<listitem><para>Assign access keys to the most frequently-used controls first. If it's not clear which controls will be the most frequently used, assign access keys from left to right, top to bottom (for Western locales).</para></listitem>
<listitem><para>Use the first letter of the label, or of one of its other words if it has more than one. If another letter provides a better association (e.g. "x" in <guilabel>Extra Large</guilabel>) however, consider using that letter instead.</para></listitem>
<listitem><para>If the first letter is not available, choose an easy to remember consonant from the label, for example, "p" in <guilabel>Replace</guilabel>.</para></listitem>
<listitem><para>If no such consonants are available, choose any available vowel from the label.</para></listitem>
</orderedlist>
<para>If duplication of access keys in a window is unavoidable, you should still refrain from duplicating the access keys for any of these buttons that appear in the same window: <guibutton>OK</guibutton>, <guibutton>Cancel</guibutton>, <guibutton>Close</guibutton>, <guibutton>Apply</guibutton> or <guibutton>Help</guibutton>.</para>
<para>Also, it is better not to assign access keys to "thin" letters (such as lowercase i or l), or letters with descenders (such as lowercase g or y) unless it is unavoidable. The underline does not show up very well on those characters in some fonts.</para>
<para>Applications using a non-Roman writing system in conjunction with a standard keyboard can have control labels prefixed with Roman characters as access keys.</para>
</sect2>
<sect2 id="shortcuts">
<title>Choosing Shortcut Keys</title>
<para>The tables in <xref linkend="standard-shortcuts"/> summarize the standard shortcut keys to use when your application supports those functions. Your application will not necessarily support all of these functions, see <xref linkend="menus-standard"/> for more information. However, use the recommended shortcut keys for those functions you do support.</para>
<para>You will probably want to add your own shortcut keys for functions specific to your application. If so, as well as following the guidelines below, look at any other existing similar applications to see which shortcut keys they have defined. Your users may already be using those or similar applications, so being consistent where it is possible and sensible to do so will provide a better user experience for them when they begin to use yours.</para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Use <keycombo><keycap>Ctrl</keycap><keysym>letter</keysym></keycombo> in preference to other combinations when choosing new shortcut keys.</para></listitem>
<listitem><para><keycap>Insert</keycap>, <keycap>Delete</keycap>, <keycap>Home</keycap>, <keycap>End</keycap>, <keycap>Page Up</keycap> and <keycap>Page Down</keycap> are acceptable shortcut keys for functions that are closely related to those keys' normal system-defined uses. Do not assign them to unrelated functions just because you've run out of other shortcut key combinations, however.</para></listitem>
<listitem><para>Only assign shortcut keys to the most commonly-used actions in your application. Do not try to assign a shortcut key to everything.</para></listitem>
<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>
</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>Alt</keycap><keycap>key</keycap></keycombo> combinations for shortcut keys, as these may conflict with window manager or menu access keys.</para></listitem>
<listitem><para>Do not use symbols that require <keycap>Shift</keycap> or other modifiers as part of a shortcut, for example <keycombo><keycap>Ctrl</keycap><keycap>%</keycap></keycombo>. Remember that symbols that can be accessed without a modifier key on your keyboard may be more difficult to access on different international keyboards.</para></listitem>
<listitem><para>Do not assign shortcut keys to menu items that change over time, for example a list of open windows on the <guimenu>Window</guimenu> menu, or a recently-used file list on the <guimenu>File</guimenu> menu. Do assign access keys to these items, however.</para></listitem>
<listitem><para>Do not use any of the standard shortcut keys listed in <xref linkend="standard-shortcuts"/> for your own purposes, even if your application doesn't support those functions. This helps reinforce consistency between all GNOME applications.</para></listitem>
</itemizedlist>
</sect2>
<sect2 id="standard-shortcuts">
<title>Standard Application Shortcut Keys</title>
<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">
<title>Standard GNOME application shortcut keys and access keys - File menu</title>
<tgroup cols="3" align="left">
<thead>
<row>
<entry>Function</entry>
<entry>Shortcut</entry>
<entry>Description</entry>
</row>
</thead>
<tbody>
<row>
<entry><guimenuitem><accel>N</accel>ew</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>N</keycap></keycombo></entry>
<entry>Create a new document</entry>
</row>
<row>
<entry><guimenuitem><accel>O</accel>pen</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>O</keycap></keycombo></entry>
<entry>Open a document</entry>
</row>
<row>
<entry><guimenuitem><accel>S</accel>ave</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>S</keycap></keycombo></entry>
<entry>Save the current document</entry>
</row>
<row>
<entry><guimenuitem><accel>P</accel>rint</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>P</keycap></keycombo></entry>
<entry>Print the current document</entry>
</row>
<row>
<entry><guimenuitem><accel>C</accel>lose</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>W</keycap></keycombo></entry>
<entry>Close the current document</entry>
</row>
<row>
<entry><guimenuitem><accel>Q</accel>uit</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>Q</keycap></keycombo></entry>
<entry>Quit the application</entry>
</row>
</tbody>
</tgroup>
</table>
<table frame="all" pgwide="1">
<title>Standard GNOME application shortcut keys and access keys - Edit menu</title>
<tgroup cols="3" align="left">
<thead>
<row>
<entry>Function</entry>
<entry>Shortcut</entry>
<entry>Description</entry>
</row>
</thead>
<tbody>
<row>
<entry><guimenuitem><accel>U</accel>ndo</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>Z</keycap></keycombo></entry>
<entry>Undo the last operation</entry>
</row>
<row>
<entry><guimenuitem><accel>R</accel>edo</guimenuitem></entry>
<entry><keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>Z</keycap></keycombo></entry>
<entry>Redo the last operation</entry>
</row>
<row>
<entry><guimenuitem>Cu<accel>t</accel></guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>X</keycap></keycombo></entry>
<entry>Cut the selected area and store it in the clipboard</entry>
</row>
<row>
<entry><guimenuitem><accel>C</accel>opy</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>C</keycap></keycombo></entry>
<entry>Copy the selected area into the clipboard</entry>
</row>
<row>
<entry><guimenuitem><accel>P</accel>aste</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>V</keycap></keycombo></entry>
<entry>Paste contents of clipboard at mouse/cursor position</entry>
</row>
<row>
<entry><guimenuitem><accel>D</accel>uplicate</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>U</keycap></keycombo></entry>
<entry>Duplicate the currently-selected items and add them to the same window, without affecting the clipboard</entry>
</row>
<row>
<entry><guimenuitem>Select <accel>A</accel>ll</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>A</keycap></keycombo></entry>
<entry>Select everything in focused control or window</entry>
</row>
<!-- <row>
<entry><guimenuitem>Deselect All</guimenuitem></entry>
<entry><keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>A</keycap></keycombo></entry>
<entry>Deselect everything in focused control or window</entry>
</row>-->
<row>
<entry><guimenuitem>In<accel>v</accel>ert Selection</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>I</keycap></keycombo></entry>
<entry>Select everything in focused control or window that was previously unselected, and deselect everything that was previously selected</entry>
</row>
<row>
<entry><guimenuitem><accel>D</accel>elete</guimenuitem></entry>
<entry><keycap>Del</keycap></entry>
<entry>Delete selection</entry>
</row>
<row>
<entry><guimenuitem><accel>F</accel>ind...</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>F</keycap></keycombo></entry>
<entry>Find matches in the current document, highlighting them in-place</entry>
</row>
<row>
<entry><guimenuitem><accel>S</accel>earch...</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>F</keycap></keycombo> (see note below)</entry>
<entry>Search for matches in multiple documents, files or other external sources</entry>
</row>
<row>
<entry><guimenuitem>Find Ne<accel>x</accel>t</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>G</keycap></keycombo></entry>
<entry>Find the next match</entry>
</row>
<!-- Replace may go depending on response to mpt's comment that Replace should be part of standard Find dialog functionality-->
<row>
<entry><guimenuitem><accel>R</accel>eplace...</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>H</keycap></keycombo></entry>
<entry>Find and replace matches</entry>
</row>
<row>
<entry><guimenuitem>R<accel>e</accel>name</guimenuitem></entry>
<entry><keycap>F2</keycap></entry>
<entry>Switch the selected item's label into edit mode, allowing user to type in a new name.</entry>
</row>
</tbody>
</tgroup>
</table>
<note><title>Find and Search</title>
<para>If your application requires both <menuchoice><guimenu>Edit</guimenu><guimenuitem>Find</guimenuitem></menuchoice> and <menuchoice><guimenu>Edit</guimenu><guimenuitem>Search</guimenuitem></menuchoice> menu items, use <keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>F</keycap></keycombo> as the shortcut for <guimenuitem>Search</guimenuitem>.</para>
</note>
<!--
<note><title>For discussion</title> -->
<!-- Consensus was for "Deselect All" -->
<!-- <para>czr currently proposing "Select None" rather than "Deselect All", which is better? I prefer the latter because it's more visually distinct on a menu, in English at least.</para> -->
<!-- Um, consensus was to be rid of the item, iirc. (GJM) -->
<!--<para>Should we call it "Find Next" or "Find Again"?</para> -->
<!--<para>czr currently proposing Ctrl+R for "Replace", but this clashes with "Reload" in most browser applications... not a problem until somebody writes a graphical HTML editor that you can also do search/replace in :o) Ctrl+H is another common shortcut for "Replace", should we use this instead? (It's not as easy to access with one hand, though, so maybe not).</para> -->
<!--<para>mpt suggesting that Replace should be part of Find dialog, so shortcut for Replace may not be required at all.</para>-->
<!-- Consensus is to keep Letter-based shortcut keys
<para>Kenneth suggests a more F-key-based system, e.g. F5 for Refresh rather than Ctrl+R, as "Ctrl+R" is only memorable if you happen to speak English... what's our view on this?</para>-->
<!--
</note>-->
<table frame="all" pgwide="1">
<title>Standard GNOME application shortcut keys and access keys - View menu</title>
<tgroup cols="3" align="left">
<thead>
<row>
<entry>Function</entry>
<entry>Shortcut</entry>
<entry>Description</entry>
</row>
</thead>
<tbody>
<row>
<entry><guimenuitem>Zoom <accel>I</accel>n</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keysym>Plus</keysym></keycombo></entry>
<entry>Zoom in on the document <remark>Should probably recommend that Ctrl-Equals work too</remark></entry>
</row>
<row>
<entry><guimenuitem>Zoom <accel>O</accel>ut</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keysym>Minus</keysym></keycombo></entry>
<entry>Zoom out of the document</entry>
</row>
<row>
<entry><guimenuitem><accel>N</accel>ormal Size</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keysym>0</keysym></keycombo></entry>
<entry>Restore to zoom level to normal size (generally 100%)</entry>
</row>
<row>
<entry><guimenuitem><accel>R</accel>efresh</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>R</keycap></keycombo></entry>
<entry>Redraw current view of document, without checking if content has changed</entry>
</row>
<row>
<entry><guimenuitem><accel>R</accel>eload</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>R</keycap></keycombo> (see note below)</entry>
<entry>Reload the current document, updating content from source if necessary</entry>
</row>
<row>
<entry><guimenuitem>Pr<accel>o</accel>perties</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keycap>Enter</keycap></keycombo></entry>
<entry>Display the selected object's Properties window. May alternatively appear on the <guimenu>File</guimenu> menu if the document itself is the only object in the application whose properties can be inspected.</entry>
</row>
</tbody>
</tgroup>
</table>
<note><title>Reload and Refresh</title>
<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">
<title>Standard GNOME application shortcut keys and access keys - Bookmarks menu</title>
<tgroup cols="3" align="left">
<thead>
<row>
<entry>Function</entry>
<entry>Shortcut</entry>
<entry>Description</entry>
</row>
</thead>
<tbody>
<row>
<entry><guimenuitem>Add <accel>B</accel>ookmark</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>D</keycap></keycombo></entry>
<entry>Add a bookmark for the current location</entry>
</row>
<row>
<entry><guimenuitem><accel>E</accel>dit Bookmarks...</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>B</keycap></keycombo> (see note below)</entry>
<entry>Open a window in which the user can edit and organise saved bookmarks</entry>
</row>
</tbody>
</tgroup>
</table>
<note><title>Bold and Edit Bookmarks</title>
<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">
<title>Standard GNOME application shortcut keys and access keys - Go menu</title>
<tgroup cols="3" align="left">
<thead>
<row>
<entry>Function</entry>
<entry>Shortcut</entry>
<entry>Description</entry>
</row>
</thead>
<tbody>
<row>
<entry><guimenuitem><accel>B</accel>ack</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keysym>Left</keysym></keycombo></entry>
<entry>Go to the previous location in the navigation chain</entry>
</row>
<row>
<entry><guimenuitem>Ne<accel>x</accel>t</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keysym>Right</keysym></keycombo></entry>
<entry>Go to the next location in the navigation chain</entry>
</row>
<row>
<entry><guimenuitem><accel>U</accel>p</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keysym>Up</keysym></keycombo></entry>
<entry>Go up one level in the navigation hierarchy</entry>
</row>
<row>
<entry><guimenuitem><accel>H</accel>ome</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keysym>Home</keysym></keycombo></entry>
<entry>Go to the starting page defined by the user or application</entry>
</row>
<row>
<entry><guimenuitem><accel>L</accel>ocation...</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keysym>L</keysym></keycombo></entry>
<entry>Present or focus an entry field into which the user can type a new address or location to view</entry>
</row>
</tbody>
</tgroup>
</table>
<table frame="all" pgwide="1">
<title>Standard GNOME application shortcut keys and access keys - Format menu</title>
<tgroup cols="3" align="left">
<thead>
<row>
<entry>Function</entry>
<entry>Shortcut</entry>
<entry>Description</entry>
</row>
</thead>
<tbody>
<row>
<entry><guimenuitem><accel>B</accel>old</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>B</keycap></keycombo></entry>
<entry>Make selected text bold/regular</entry>
</row>
<row>
<entry><guimenuitem><accel>U</accel>nderline</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>U</keycap></keycombo></entry>
<entry>Underline/remove underline from selected text</entry>
</row>
<row>
<entry><guimenuitem><accel>I</accel>talic</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>I</keycap></keycombo></entry>
<entry>Make selected text italic/regular</entry>
</row>
</tbody>
</tgroup>
</table>
<!-- <note><title>For discussion</title>
<para>Is it acceptable to specify the same shortcut for <menuchoice><guimenu>Format</guimenu><guimenuitem>Bold</guimenuitem></menuchoice> and <menuchoice><guimenu>Bookmarks</guimenu><guimenuitem>Edit Bookmarks</guimenuitem></menuchoice>, given that the two aren't likely to occur in the same application? Or could/should we provide a second choice for one of them on the off-chance that they do coincide?</para>
</note>
-->
<table frame="all" pgwide="1">
<title>Standard GNOME application shortcut keys and access keys - Help menu</title>
<tgroup cols="3" align="left">
<thead>
<row>
<entry>Function</entry>
<entry>Shortcut</entry>
<entry>Description</entry>
</row>
</thead>
<tbody>
<row>
<entry><guimenuitem><accel>C</accel>ontents</guimenuitem></entry>
<entry><keycap>F1</keycap></entry>
<entry>Show help contents page for the current application</entry>
</row>
<!-- Doesn't appear on menus so probably doesn't belong in this table
<row>
<entry><guimenuitem>(Context Help)</guimenuitem></entry>
<entry><keycombo><keycap>Shift</keycap><keycap>F1</keycap></keycombo></entry>
<entry>Show online help for the currently focused control or window</entry>
</row>-->
</tbody>
</tgroup>
</table>
<!--
<note>
<title>For Discussion</title>
<para>Greg suggested Ctrl+H for Search Help... this doesn't seem to me to be an important enough function to tie up Ctrl+H with, though, anyone got any other views/alternative suggestions?</para>
</note>
-->
<sect3 id="window-manager-navigation">
<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">
<title>Standard window manager shortcut keys and access keys</title>
<tgroup cols="3" align="left">
<thead>
<row>
<entry>Function</entry>
<entry>Shortcut</entry>
<entry>Description</entry>
</row>
</thead>
<tbody>
<row>
<entry>Switch primary windows</entry>
<entry><keycombo><keycap>Alt</keycap><keycap>Tab</keycap></keycombo>, <keycombo><keycap>Shift</keycap><keycap>Alt</keycap><keycap>Tab</keycap></keycombo></entry>
<entry>Switch focus to the next or previous top level window on the desktop</entry>
</row>
<row>
<entry>Switch panels</entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>Alt</keycap><keycap>Tab</keycap></keycombo>, <keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>Alt</keycap><keycap>Tab</keycap></keycombo></entry>
<entry>Switch focus to the next or previous panel on the desktop</entry>
</row>
<row>
<entry>Log out</entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>Alt</keycap><keycap>Del</keycap></keycombo></entry>
<entry>Open the session logout confirmation dialog</entry>
</row>
<row>
<entry>Window menu</entry>
<entry><keycombo><keycap>Alt</keycap><keycap>Space</keycap></keycombo></entry>
<entry>Open the window menu</entry>
</row>
<row>
<entry><guimenuitem><accel>C</accel>lose</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keycap>F4</keycap></keycombo></entry>
<entry>Close the focused window</entry>
</row>
<row>
<entry><guimenuitem><accel>R</accel>estore</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keycap>F5</keycap></keycombo></entry>
<entry>Restore the focused to its previous size</entry>
</row>
<row>
<entry><guimenuitem><accel>S</accel>witch secondary windows</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keycap>F6</keycap></keycombo>, <keycombo><keycap>Shift</keycap><keycap>Alt</keycap><keycap>F6</keycap></keycombo></entry>
<entry>Switch focus to the next or previous secondary window associated with the application (<remark>precise functionality for metacity TBD, see bug 94682</remark>)</entry>
</row>
<row>
<entry><guimenuitem><accel>M</accel>ove</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keycap>F7</keycap></keycombo></entry>
<entry>Move the focused window</entry>
</row>
<row>
<entry><guimenuitem>Re<accel>s</accel>ize</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keycap>F8</keycap></keycombo></entry>
<entry>Resize the focused window</entry>
</row>
<row>
<entry><guimenuitem>Mi<accel>n</accel>imize</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keycap>F9</keycap></keycombo></entry>
<entry>Minimze the focused window</entry>
</row>
<row>
<entry><guimenuitem>Ma<accel>x</accel>imize</guimenuitem></entry>
<entry><keycombo><keycap>Alt</keycap><keycap>F10</keycap></keycombo></entry>
<entry>Maximize the focused window</entry>
</row>
<row>
<entry><guimenuitem><accel>F</accel>ull Screen</guimenuitem></entry>
<entry><keycombo><keycap>Ctrl</keycap><keycap>F11</keycap></keycombo></entry>
<entry>Show the window in full screen mode, with no border, menubar, toolbar or statusbar</entry>
</row>
</tbody>
</tgroup>
</table>
</sect3>
<sect3 id="widget-navigation">
<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">
<title>Standard GNOME keyboard navigation keys for widgets</title>
<tgroup cols="2" align="left">
<thead>
<row>
<entry>Key</entry>
<entry>Function</entry>
</row>
</thead>
<tbody>
<row>
<entry><keycap>Tab</keycap>, <keycombo><keycap>Shift</keycap><keycap>Tab</keycap></keycombo></entry>
<entry>Moves keyboard focus to next/previous control</entry>
</row>
<row>
<entry><keycombo><keycap>Ctrl</keycap><keycap>Tab</keycap></keycombo>, <keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>Tab</keycap></keycombo></entry>
<entry>Moves keyboard focus out of enclosing widget to next/previous control, in those situations where Tab alone has another function (e.g. GtkTextView)</entry>
</row>
<row>
<entry><keycombo><keycap>Ctrl</keycap><keycap>F1</keycap></keycombo></entry>
<entry>Pop up tooltip for currently-focused control</entry>
</row>
<row>
<entry><keycombo><keycap>Shift</keycap><keycap>F1</keycap></keycombo></entry>
<entry>Show context-sensitive help for currently-focused window or control</entry>
</row>
<row>
<entry><keycap>F6</keycap>, <keycombo><keycap>Shift</keycap><keycap>F6</keycap></keycombo></entry>
<entry>Give focus to next/previous pane in a GtkPaned window</entry>
</row>
<row>
<entry><keycap>F8</keycap></entry>
<entry>Give focus to splitter bar in paned window</entry>
</row>
<row>
<entry><keycap>F10</keycap></entry>
<entry>Give focus to window's menu bar</entry>
</row>
<row>
<entry><keycombo><keycap>Shift</keycap><keycap>F10</keycap></keycombo></entry>
<entry>Pop up contextual menu for currently-selected objects</entry>
</row>
<row>
<entry><keysym>Space</keysym></entry>
<entry>Toggle selected state of focused check box, radio button, or toggle button</entry>
</row>
<row>
<entry><keysym>Return</keysym></entry>
<entry>Activate focused button, menu item etc.</entry>
</row>
<row>
<entry><keycap>Home</keycap>, <keycap>End</keycap></entry>
<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>
</row>
</tbody>
</tgroup>
</table>
</sect3>
<sect3 id="additional-widget-navigation">
<title>Additional Widget Navigation Shortcut Keys</title>
<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">
<title>Emacs-style navigation keys for widgets</title>
<tgroup cols="2" align="left">
<thead>
<row>
<entry>Key</entry>
<entry>Function</entry>
</row>
</thead>
<tbody>
<row>
<entry><keycombo><keycap>Ctrl</keycap><keycap>A</keycap></keycombo></entry>
<entry>Move cursor to beginning of line</entry>
</row>
<row>
<entry><keycombo><keycap>Ctrl</keycap><keycap>D</keycap></keycombo></entry>
<entry>Delete character following/under cursor</entry>
</row>
<row>
<entry><keycombo><keycap>Ctrl</keycap><keycap>E</keycap></keycombo></entry>
<entry>Move cursor to end of line</entry>
</row>
<row>
<entry><keycombo><keycap>Ctrl</keycap><keycap>K</keycap></keycombo></entry>
<entry>Delete from cursor to end of line</entry>
</row>
<row>
<entry><keycombo><keycap>Ctrl</keycap><keycap>U</keycap></keycombo></entry>
<entry>Delete current line</entry>
</row>
<row>
<entry><keycombo><keycap>Ctrl</keycap><keycap>W</keycap></keycombo></entry>
<entry>Cut to clipboard</entry>
</row>
<row>
<entry><keycombo><keycap>Ctrl</keycap><keycap>Y</keycap></keycombo></entry>
<entry>Paste from clipboard</entry>
</row>
<row>
<entry><keycombo><keycap>Ctrl</keycap><keysym>Space</keysym></keycombo></entry>
<entry>Set mark</entry>
</row>
<row>
<entry><keycombo><keycap>Ctrl</keycap><keycap>Del</keycap></keycombo>, <keycombo><keycap>Alt</keycap><keycap>D</keycap></keycombo></entry>
<entry>Delete from cursor to end of word</entry>
</row>
<row>
<entry><keycombo><keycap>Ctrl</keycap><keysym>Backspace</keysym></keycombo></entry>
<entry>Delete from cursor to start of word</entry>
</row>
<row>
<entry><keycombo><keycap>Alt</keycap><keysym>Space</keysym></keycombo></entry>
<entry>Delete all whitespace around cursor, reinsert single space</entry>
</row>
<row>
<entry><keycombo><keycap>Alt</keycap><keycap>\</keycap></keycombo></entry>
<entry>Delete all whitespace around cursor</entry>
</row>
</tbody>
</tgroup>
</table>
</sect3>
</sect2>
<sect2 id="keynav-applets">
<title>Keyboard Interaction with Panel Applications (Applets)</title>
<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>
<itemizedlist>
<listitem><para>Do <emphasis>not</emphasis> use 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 detrimental to the user experience.</para>
</sect2>
</sect1>
</chapter>
<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>
<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>
<itemizedlist><title>Guidelines</title>
<listitem><para>Keep labels short. This:
<itemizedlist>
<listitem><para>Reduces the expansion of text when translated, and thus minimizes the effort required to localize the UI. Translated English text can expand up to 30% in some languages.</para></listitem>
<listitem><para>Facilitates the use of translation engines.</para></listitem>
<listitem><para>Improves speed of comprehension for the user.</para></listitem>
</itemizedlist>
</para>
<para>Do not shorten your labels to the point of losing meaning, however. A three-word label that provides clear information is better than a one-word label that is ambiguous or vague. Try to find the fewest possible words to satisfactorily convey the meaning of your label.</para></listitem>
<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/gdp-style-guide/stable/wordlist.html.en">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>
</sect2>
<sect2>
<title>Tooltips</title>
<sect3>
<title>Toolbar Tooltips</title>
<para>A toolbar tooltip is the short description of a toolbar control's functionality that the user sees when they mouse over it.</para>
<itemizedlist> <title>Guidelines</title>
<listitem><para>Concisely state the purpose of the control. The tooltip should be more descriptive than the corresponding menu item name, if there is one, but not verbose. For example, <guilabel>Undo last action</guilabel> for the <guibutton>Undo</guibutton> button.</para></listitem>
<listitem><para>Use sentence capitalization rules. See <xref linkend="layout-capitalization"/>.</para></listitem>
</itemizedlist>
</sect3>
<sect3>
<title>Application Tooltips</title>
<para>An application tooltip is the short description of your application that the user sees when they mouse over the launcher or menu item for your application. It is stored in the <structfield>comment</structfield> field of your application's <filename>desktop</filename> file. See <xref linkend="menu-item-tooltips"/></para>
<itemizedlist><title>Guidelines</title>
<listitem><para>Create short tooltips. Aim to accurately communicate the functionality of an element with the fewest words possible.</para></listitem>
<listitem><para>Use sentence capitalization rules. See <xref linkend="layout-capitalization"/>.</para></listitem>
<listitem><para>Use standard punctuation rules, with the exception that you do not use a period to end the tooltip.</para></listitem>
</itemizedlist>
</sect3>
</sect2>
<sect2>
<title>Menus</title>
<itemizedlist> <title>Guidelines</title>
<listitem><para>Use the recommended standard labels for menu items and titles, where they exist. Do not use synonyms such as <guimenuitem>Exit</guimenuitem> instead of <guimenuitem>Quit</guimenuitem>. See <xref linkend="menus-standard"/> for a list and descriptions of standard menu items and titles.</para></listitem>
<listitem><para>Use header capitalization rules for all menu items and titles. See <xref linkend="layout-capitalization"/> for more information.</para></listitem>
</itemizedlist>
</sect2>
</sect1>
<sect1 id="language-errors">
<title>Warning and Error Messages</title>
<para>A good warning or error message contains two elements:</para>
<orderedlist>
<listitem><para>A brief description of the problem.</para></listitem>
<listitem><para>A list of ways the user can remedy the problem.</para></listitem>
</orderedlist>
<para>Both of these elements should be presented in non-technical, jargon-free language, unless your target audience is particularly technically-minded.</para>
<para>If your application knows enough about the problem to be able to give all this information to the user, it will often be capable of rectifying the problem itself when the user has decided which course of action they want to take. For example, if the problem is insufficient memory, tell the user which currently-running application is taking up the most memory, and provide a button to close it for them. (Do not offer to launch a graphical process manager, however, which is something most users should never see!)</para>
<para>See <xref linkend="windows-alert"/> for more detailed information on writing and presenting errors, warnings and information alerts.</para>
</sect1>
<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/gdp-style-guide/stable/">GNOME Documentation Styleguide</ulink> for guidance on writing clear, consistent and helpful documentation for your application.</para>
</sect1>
</chapter>
<!-- we can change the title as soon as the content is written
I want the document to be as usable and correct as possible
this week -seth
<chapter id="checklists">
<title>Checklists</title>
-->
<chapter id="reality-checks">
<title>Checklists</title>
<sect1 id="checks-yourself">
<title>Things You Can Do Yourself</title>
<sect2>
<title>Before You Start</title>
<para>Write down the type of people you expect to use your application. Then write some "scenarios" for each type of user— a little story that describes the typical tasks those users will use your application for. These tasks should be along the lines of:</para>
<blockquote><para>Fred needs to find an email about widgets that he received last week</para></blockquote>
<!-- CB: Flow chart diagram. Boxes with arrows showing flow of user scenario
example. An transitional paragraph probably needs to be added after the "right" vs. "wrong" text examples shown, that basically says: You can use a flow chart, as shown below, to sketch out an expected user scenario. -->
<para>rather than </para>
<blockquote><para>Fred clicks on the <guibutton>Find</guibutton> button and types <userinput>widgets</userinput> into the dialog.</para></blockquote>
<para>This way, you can use the same scenarios to test and compare different interface designs, and to spot any missing functionality.</para>
<para>Include these user descriptions and scenarios with the documentation you commit to CVS. This way, other contributors will get to understand your users too, can help to develop the application with that knowledge, and can provide more scenarios of their own.</para>
</sect2>
<sect2>
<title> Keyboard Access and Focus</title>
<para>When you have started implementing your interface, hide your mouse, and make sure you can still use it to do everything using only the keyboard. Implement keyboard functionality at the same time as mouse functionality— don't leave it until the end.</para>
<!-- CB: This is a non-figure comment, I couldn't help myself. The first sentence in the paragraph directly above, is badly written. The word "it" is ambiguous in the sentence because it likely refers to the mouse! Please correct. -->
<para>Using only keyboard commands, move the focus through all menu bars and toolbars in the application. Also confirm that:</para>
<!-- CB-Ed: OK I'll just make all non-figures comments tagged with CB-Ed. The above paragraph should be part of the bulleted list below. -->
<!-- CB-Fig: All figures comments will be tagged with CB-Fig. A single figure showing an example GUI with callouts highlighting bulleted points would be great. Perhaps visually box bulleted elements and then "zoom" them out with callout text. -->
<itemizedlist>
<listitem><para>Context sensitive menus display correctly (<keycombo><keycap>Shift</keycap><keycap>F10</keycap></keycombo>).</para></listitem>
<listitem><para>Tooltips can be popped up and down for all controls that have them (<keycombo><keycap>Ctrl</keycap><keycap>F1</keycap></keycombo>, <keycap>Esc</keycap>).</para></listitem>
<listitem><para>All functions listed on the toolbar can be performed using the keyboard.</para></listitem>
<listitem><para>You can fully operate every control in the client area of the application and dialogs.</para></listitem>
<listitem><para>Text and objects within the client area can be selected.</para></listitem>
<listitem><para>Any keyboard enhancements or shortcut keys are working as designed.</para></listitem>
<listitem><para>Verify that when moving among objects, the visual focus indicator is easy to identify at all times.</para></listitem>
</itemizedlist>
</sect2>
<sect2>
<title>Theming, Colors and Contrast</title>
<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 grayscale) and make sure all the important information is still visible— this will approximate what a high contrast theme user will see.</para>
</sect2>
<sect2>
<title>Animation</title>
<para>Ensure you have implemented an option to turn off any animation in your application (for accessibility reasons), and that it is working as designed. Turn the animation off. Confirm that all information is still conveyed correctly.</para>
</sect2>
</sect1>
<sect1 id="checks-other-people">
<title>Things You Can Do With Other People</title>
<sect2>
<title>Get Early Feedback</title>
<para>It's always tempting, but don't start coding your interface straight away. Sketch out some ideas on paper first, or in Glade or HTML if you prefer. (But don't be tempted add any functionality at this point if you do it this way!)</para>
<para>Show these prototypes to other people— the GNOME mailing lists and IRC are ideal for finding likely candidates. Ask them to use these prototype interfaces to run through some of the scenarios you came up with earlier. You'll probably get questions like "how would I do X", "which menu is Y on"... these questions will help you think about the interface from the user's viewpoint. You'll probably also get a few suggestions about how to do things differently— these ideas may or may not turn out to better than yours, but any idea from a potential user is worth considering!</para>
<para>You should also consider seeking opinions from the <ulink url="http://developer.gnome.org/projects/gup/">GNOME Usability team</ulink>. They have designed many user interfaces before and may be able to spot potential problems at this early stage, before you take your design too far to change easily.</para>
<para>Once you've decided on the basic interface design and have started coding parts of it, find somebody to try it out again— it doesn't have to be the same person. You'll probably find some more problems that were hard to see on your static paper prototype. By finding these now, it's usually not too late to fix them without too much trouble.</para>
</sect2>
<sect2>
<title>Internationalization and Localization</title>
<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>
</sect2>
</sect1>
</chapter>
<chapter id="credits">
<title>Credit</title>
<para>(lists in alphabetical order, if you were accidentally omitted please email the authors or <ulink url="http://bugzilla.gnome.org/enter_bug.cgi?product=HIG">file a bug</ulink>)</para>
<sect1 id="credits-active-authors">
<title>Active Authors</title>
<para>
<itemizedlist>
<listitem><para>Calum Benson, <email>calum.benson@sun.com</email></para></listitem>
<listitem><para>Bryan Clark, <email>clarkbw@gnome.org</email></para></listitem>
<listitem><para>Seth Nickell, <email>seth@gnome.org</email></para></listitem>
</itemizedlist>
</para>
</sect1>
<sect1 id="credits-figures">
<title>Additional Illustrations</title>
<para>
<itemizedlist>
<listitem><para>Mihai Anca, <email>ropiku@gmail.com</email></para></listitem>
<listitem><para>Denis Anisimov, <email>genius@s146.net.ru</email></para></listitem>
<listitem><para>Wouter Bron, <email>wousser@gmail.com</email></para></listitem>
</itemizedlist>
</para>
</sect1>
<sect1 id="credits-inactive-authors">
<title>Retired/Inactive Authors</title>
<para>
<itemizedlist>
<listitem><para>Coleen Baik</para></listitem>
<listitem><para>Adam Elman</para></listitem>
<listitem><para>Colin Z. Robertson</para></listitem>
<listitem><para>Maciej Stachowiak</para></listitem>
</itemizedlist>
</para>
</sect1>
<sect1 id="credits-reviewers-contributors">
<title>Reviewers and Contributors</title>
<para>
<itemizedlist>
<listitem><para>Chip Alexander</para></listitem>
<listitem><para>Kathy Fernandes</para></listitem>
<listitem><para>John Fleck</para></listitem>
<listitem><para>Andrea Mankoski</para></listitem>
<listitem><para>Nils Pederson</para></listitem>
<listitem><para>Sebastian Rittau</para></listitem>
<listitem><para>Christian Rose</para></listitem>
<listitem><para>Sharon Snider</para></listitem>
<listitem><para>Suzanna Smith</para></listitem>
<listitem><para>Matthew Thomas</para></listitem>
</itemizedlist>
</para>
</sect1>
</chapter>
<bibliography id="bibliography">
<remark>Work in progress, more titles needed -David</remark>
<para>This bibliography lists books and other resources for software engineers, user interface designers, and human factors specialists, arranged by topic and without a particular ordering. The final section of the bibliography contains information about useful online resources and organizations.</para>
<bibliodiv>
<title>General Design</title>
<bibliomixed id="Dreyfus1967">
<bibliomset relation="book">
<surname>Dreyfuss</surname>, <firstname>Henry</firstname>
<title role="book">Designing for People</title>
<address><city>New York</city>, <state>NY</state></address>:
<publishername>allworth press</publishername>,
<pubdate>2003</pubdate>
<bibliomisc>A reprint of the 1960s design classic by the designer of everything from the modern airplane cabin to the Bell telephone. Perhaps the best book for introducing the general concerns and thought patterns of design (industrial, product, or interaction), as well as an entertaining read.</bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="Mandel1997">
<bibliomset relation="book">
<surname>Mandel</surname>, <firstname>Theo</firstname>.
<title role="book">The Elements of User Interface Design</title>.
<address><city>New York</city>, <state>NY</state></address>:
<publishername>Wiley Computer Publishing</publishername>,
<pubdate>1997</pubdate>.
<bibliomisc>A useful book covering all the basics and a wide scope of environments and new developments like interface agents, wizards, voice interaction, social user interfaces and web design.</bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="Norman1990">
<bibliomset relation="book">
<surname>Norman</surname>, <firstname>Donald A.</firstname>
<title role="book">The Design of Everyday Things</title>.
<address><city>New York</city>, <state>NY</state></address>:
<publishername>Doubleday</publishername>,
<pubdate>1990</pubdate>.
<bibliomisc>An exceptional and entertaining book about the design behind simple daily things.</bibliomisc>
</bibliomset>
</bibliomixed>
</bibliodiv>
<bibliodiv>
<title>Graphical Design</title>
<bibliomixed id="Horton1994">
<bibliomset relation="book">
<surname>Horton</surname>, <firstname>William</firstname>
<title role="book">The Icon Book: Visual Symbols for Computer Systems and Documentation</title>.
<address><city>New York</city>, <state>NY</state></address>:
<publishername>John Wiley & Sons</publishername>,
<pubdate>1994</pubdate>.
<bibliomisc><remark>Needs quote for this book -David</remark></bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="Misjksenaar1999">
<bibliomset relation="book">
<surname>Misjksenaar</surname>, <firstname>Paul</firstname> and
<firstname>Piet</firstname> <surname>Westendorpp</surname>.
<title role="book">Open Here: The Art of Instructional Design</title>.
<address><city>London</city>, <country>UK</country></address>:
<publishername>Thames & Hudson</publishername>,
<pubdate>1999</pubdate>
<bibliomisc><remark>Needs quote for this book -David</remark></bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="Mullet1995">
<bibliomset relation="book">
<surname>Mullet</surname>, <firstname>Kevin</firstname> and
<firstname>Darrell</firstname> <surname>Sano</surname>.
<title role="book">Designing Visual Interfaces: Communication Oriented Techniques</title>.
<address><city>Englewood Cliffs</city>, <state>NJ</state></address>:
<publishername>Prentice Hall</publishername>,
<pubdate>1995</pubdate>.
<bibliomisc><remark>Needs quote for this book -David</remark></bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="Rubin1994">
<bibliomset relation="book">
<surname>Rubin</surname>, <firstname>Jeffrey</firstname>.
<title role="book">Handbook of Usability Testing: How to Plan, Design and Conduct Effective Tests</title>.
<address><city>New York</city>, <state>NY</state></address>:
<publishername>John Wiley & Sons</publishername>,
<pubdate>1994</pubdate>.
<bibliomisc><remark>Needs quote for this book -David</remark></bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="Tufte1990">
<bibliomset relation="book">
<surname>Tufte</surname>, <firstname>Edward R.</firstname>
<title role="book">Envisioning Information</title>.
<address><city>Cheshire</city>, <state>CT</state></address>:
<publishername>Graphics Press</publishername>,
<pubdate>1990</pubdate>
<bibliomisc>The second classic work on envisioning information by Tufte.</bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="Tufte1992">
<bibliomset relation="book">
<surname>Tufte</surname>, <firstname>Edward R.</firstname>
<title role="book">The Visual Display of Quantitative Information</title>.
<edition>Reprint ed.</edition>,
<address><city>Cheshire</city>, <state>CT</state></address>:
<publishername>Graphics Press</publishername>,
<pubdate>1992</pubdate>
<bibliomisc>The first classic work on envisioning information by Tufte.</bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="Williams1994">
<bibliomset relation="book">
<surname>Williams</surname>, <firstname>Robin</firstname>.
<title role="book">The Non-Designer's Design Book: Design and Typographic Principles for the Visual Novice</title>.
<address><city>Berkeley</city>, <state>CA</state></address>:
<publishername>Peachpit Press</publishername>,
<pubdate>1994</pubdate>.
<bibliomisc><remark>Needs quote for this book -David</remark></bibliomisc>
</bibliomset>
</bibliomixed>
</bibliodiv>
<bibliodiv>
<title>Usability</title>
<bibliomixed id="Arlov1997">
<bibliomset role="book">
<surname>Arlov</surname>, <firstname>Laura</firstname>.
<title role="book">GUI Design for Dummies</title>.
<address><city>Foster City</city>, <state>CA</state></address>:
<publishername>IDG Books Worldwide</publishername>,
<pubdate>1997</pubdate>.
<bibliomisc><remark>Needs quote for this book -David</remark></bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="Cooper2003">
<bibliomset role="book">
<surname>Cooper</surname>, <firstname>Alan</firstname> and
<surname>Reimann</surname>, <firstname>Robert</firstname>.
<title role="book">About Face 2.0 : The Essentials of User Interface Design</title>.
<publishername>John Wiley & Sons</publishername>,
<pubdate>2003</pubdate>.
<bibliomisc><remark>Needs quote for this book</remark></bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="Cooper1999">
<bibliomset role="book">
<surname>Cooper</surname>, <firstname>Alan</firstname>.
<title role="book">The Inmates are Running the Asylum : Why High Tech Products Drive us Crazy and How to Restore the Sanity</title>.
<publishername>SAMS</publishername>,
<pubdate>1999</pubdate>.
<bibliomisc><remark>Needs quote for this book</remark></bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="Isaacs2001">
<bibliomset role="book">
<surname>Isaacs</surname>, <firstname>Ellen</firstname> and
<firstname>Alan</firstname> <surname>Walendowski</surname>.
<title role="book">Designing from Both Sides of the Screen</title>.
<address><city>Indianapolis</city>, <state>IN</state></address>:
<publishername>New Riders Publishing</publishername>,
<pubdate>2001</pubdate>.
<bibliomisc><remark>Needs quote for this book -David</remark></bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="Nielsen1993">
<bibliomset role="book">
<surname>Nielsen</surname>, <firstname>Jakob</firstname>.
<title role="book">Usability Engineering</title>.
<address><city>San Francisco</city>, <state>CA</state></address>:
<publishername>Morgan Kauffman</publishername>,
<pubdate>1993</pubdate>.
<bibliomisc><remark>Needs quote for this book -David</remark></bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="Tog1992">
<bibliomset role="book">
<surname>Tognazzini</surname>, <firstname>Bruce</firstname>.
<title role="book">Tog on Interface</title>.
<address><city>Reading</city>, <state>MA</state></address>:
<publishername>Addison-Wesley</publishername>,
<pubdate>1992</pubdate>.
<bibliomisc><remark>Needs quote for this book -David</remark></bibliomisc>
</bibliomset>
</bibliomixed>
</bibliodiv>
<!--
<bibliodiv><title>Other Style Guides</title>
<bibliomixed id="Aqua2002">
<bibliomset relation="book">
<corpauthor>Apple Computer, Inc</corpauthor>.
<title>Inside Mac OS X: Aqua Human Interface Guidelines</title>.
<address><city>Mountain View</city>, <state>CA</state></address>.
<publishername>Vervanté</publishername>,
<pubdate>2002</pubdate>.
<bibliomisc>[This is a print on demand book also available online from <ulink url="http://developer.apple.com/techpubs/macosx/Essentials/AquaHIGuidelines/">http://developer.apple.com/techpubs/macosx/Essentials/AquaHIGuidelines/</ulink> in HTML and PDF forms.] The style guide to everything Aqua, the Mac OS X user interface. Look here for information on a clean and coherent design.</bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="IRIX2001">
<bibliomset relation="book">
<corpauthor>Silicon Graphics, Inc</corpauthor>.
<title>IRIX Interactive Desktop User Interface Guidelines</title>.
<address><city>Lincoln</city>, <state>NE</state></address>.
<publishername>iUniverse</publishername>,
<pubdate>2001</pubdate>.
<bibliomisc>[This book is also available online from <ulink url="http://techpubs.sgi.com/library/tpl/cgi-bin/browse.cgi?cmd=toc&srch=&toccmd=FE&coll=0650&db=bks&pth=/SGI_Developer/UI_Glines">http://techpubs.sgi.com</ulink> in HTML and PDF forms.][This book may be found online at <ulink url="http://techpubs.sgi.com">http://techpubs.sgi.com</ulink> in HTML and PDF forms.] Style guide to the IRIX Interactive Desktop environment. It contains nice concepts, outstanding among them the varios chapters on 3D applications.
</bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="Mac1992">
<bibliomset relation="book">
<corpauthor>Apple Computer, Inc</corpauthor>.
<title>Inside Macintosh Human Interface Guidelines</title>.
<address><city>Reading</city>, <state>MA</state></address>.
<publishername>Addison-Wesley</publishername>,
<pubdate>1992</pubdate>.
<bibliomisc>[This book is also available online from <ulink url="http://developer.apple.com/techpubs/mac/HIGuidelines/HIGuidelines-2.html">http://developer.apple.com/techpubs/mac/HIGuidelines/HIGuidelines-2.html</ulink> in HTML and PDF forms.] The style guide to the classic Macintosh "look and feel".</bibliomisc>
</bibliomset>
</bibliomixed>
<bibliomixed id="Windows1999">
<bibliomset relation="book">
<corpauthor>Microsoft Corporation</corpauthor>.
<title>The Microsoft Windows User Experience</title>.
<address><city>Redmond</city>, <state>WA</state></address>.
<publishername>Microsoft Press</publishername>,
<pubdate>1999</pubdate>.
<bibliomisc>[This book is also available online from <ulink url="http://msdn.microsoft.com/UI/default.asp">http://msdn.microsoft.com/UI/default.asp</ulink> in HTML form.] The style guide to the Microsoft Windows user interface. Specially good is the chapter on text handling.</bibliomisc>
</bibliomset>
</bibliomixed>
</bibliodiv>
-->
</bibliography>
</book>
|