blog lepszy Internet

W październiku 2006 roku Rogier Bikker na blogu NotUsable (który to blog zakończył swojego żywota w kwietniu 2007 roku) napisał artykuł o tytule „The ultimate webdesign usability checklist” (stąd tytuł niniejszego artykułu), w którym opublikował własną listę kontrolną, dzięki której w szybki sposób można sprawdzić w jakim stopniu użyteczna (i nie tylko) jest nasza strona. Po krótkiej wymianie e-maili Rogier udzielił mi „błogosławieństwa” na tłumaczenie owej listy… Oto popełnione dzieło:

Techniczne

1. Czy sprawdzasz poprawność kodu HTML używając walidatora HTML?
2. Czy sprawdzasz poprawność stylów CSS używając walidatora CSS?
3. Czy sprawdzasz swoją stronę przynajmniej w przeglądarkach IE, Firefoksie, Operze i Safari?

Obrazki

4. Czy dodajesz atrybuty ALT i TITLE do wszystkich ważnych obrazków?
5. Czy dodajesz atrybutu LONGDESC do wszystkich obrazków, które potrzebują opisu?
6. Czy piszesz efektywne teksty w atrybucie ALT?
7. Czy tworzysz strony o rozmiarach mniejszych niż 50 kilobajtów?
8. Czy wybrałeś poprawny typ plików do grafiki?
9. Czy dodajesz opis do obrazków, które są ważne dla treści?
10. Czy używasz tekstu zamiast obrazka do przedstawienia ważnej treści?

Treść

11. Czy używasz fontów bezszeryfowych (sans-serif) w odpowiednim rozmiarze do głównego tekstu?
12. Czy ustawiłeś odpowiednio interlinię i odstępy między znakami, aby poprawić czytelność tekstu?
13. Czy wyrównałeś tekst do lewej strony? (zależy od języka)
14. Czy używasz jednostek EM albo procentów zamiast PX?
15. Czy upewniłeś się, że nie ma całych zdań pisanych wersalikami (dużymi literami)?
16. Czy używasz mniej niż 78 znaków (włączając spacje) na linię?
17. Czy tworzysz krótkie i precyzyjne akapity z wyjaśniającymi tytułami?
18. Czy używasz list do podsumowań?
19. Czy najpierw piszesz wniosek, a dopiero potem jego wytłumaczenie?
20. Czy tworzysz odpowiedni kontrast pomiędzy tekstem a tłem?
21. Czy strona dostępna jest także dla przeglądarek tekstowych?
22. Czy upewniłeś się, że nie ma żadnych stron „w trakcie tworzenia”?
23. Czy uwzględniłeś funkcję drukowania dużych ilości tekstu?
24. Czy stworzyłeś arkusz stylów do druku?
25. Czy zamieniłeś wszystkie specjalne znaki na odpowiednie kody ISO-Latin?
26. Czy sprawdziłeś, czy tekst nie posiada żadnych błędów gramatycznych i innych?

Nawigacja

27. Czy upewniłeś się, że wszystkie linki działają?
28. Czy umieściłeś linki do wszystkich podstron na stronie głównej?
29. Czy umieściłeś główną nawigację na każdej podstronie?
30. Czy użyłeś nie więcej jak 8 elementów w głównej nawigacji?
31. Czy utworzyłeś rozróżnienie strony aktywny od nieaktywnej w menu?
32. Czy używasz wyjaśniającego tekstu w linkach zamiast „kliknij tutaj”?
33. Czy używasz wyjaśniającego tekstu w linkach zamiast terminów biznesowych?
34. Czy utworzyłeś rozróżnienie linków już odwiedzonych od tych jeszcze nie odwiedzonych?
35. Czy utworzyłeś rozróżnienie linków od zwykłego tekstu?
36. Czy dodałeś atrybut TITLE do wszystkich linków?
37. Czy używasz ścieżki dostępu, gdy liczba podstron jest duża?
38. Czy uwzględniasz opcję szukania, gdy liczba podstron jest duża?
39. Czy logo jest linkiem do strony głównej?
40. Czy utworzyłeś link „przejdź do treści” na górze strony?
41. Czy utworzyłeś link „przejdź do menu” na górze strony?
42. Czy umożliwiłeś przeglądanie strony za pomocą klawiszy SHIFT-TAB i RETURN?
43. Czy upewniłeś się, że nie używasz żadnych linków JavaScript?

Struktura

44. Czy stworzyłeś spójną strukturę strony?
45. Czy umieściłeś logo w lewym górnym rogu?
46. Czy umieściłeś wyjaśniającą sentencję (slogan) w pobliżu loga?
47. Czy umieściłeś okienko wyszukiwania w prawym górnym rogu?
48. Czy umieściłeś ważną treść w obszarze above the fold?
49. Czy design strony oparty jest na systemie siatki?
50. Czy stworzyłeś płynny design używając wartości procentowych?
51. Czy stworzyłeś stronę dającą obejrzeć się również w niskich rozdzielczościach?
52. Czy stworzyłeś odpowiednie tytuły (w tagu TITLE) do wszystkich podstron?

Formularze

53. Czy upewniłeś się, że użytkownicy nie powracają do zmienionego formularza po błędzie?
54. Czy stworzyłeś przyjazną i informującą stronę błędu?
55. Czy stworzyłeś przyjazną stronę z podziękowaniem z e-mailem potwierdzającym?
56. Czy dodałeś tylko przycisk „wyślij” bez przycisku „resetuj”?
57. Czy poinformowałeś użytkownika, czego może oczekiwać po kliknięciu przycisku „wyślij”?
58. Czy podzieliłeś długi formularz na wiele stron?
59. Czy dałeś użytkownikowi odpowiednią ilość miejsca do pisania?
60. Czy umieściłeś gwiazdkę (*) przy obowiązującym polu?
61. Czy zachowałeś standardowy wygląd pól formularza jakie generuje przeglądarka?
62. Czy stworzyłeś logiczny porządek zapytań?
63. Czy użyłeś podwójnego pola dla hasła?
64. Czy pozwoliłeś by komputer, nie użytkownik zajął się formatowaniem informacji?
65. Czy upewniłeś się, że użytkownicy mogą wypełnić cały formularz używając klawisza TAB?
66. Czy wyjaśniłeś użytkownikowi po co pytałeś o określone informacje?
67. Czy wyjaśniłeś użytkownikowi co zamierzasz zrobić z tymi informacjami?
68. Czy użyłeś AJAXowej (po stronie klienta) walidacji formularza?
69. Czy użyłeś tagu LABEL w formularzu?
70. Czy umieściłeś LABEL nad polem INPUT, a nie za nim?
71. Czy wybrałeś właściwy typ pól INPUT dla różnych danych?
72. Czy sprawiłeś, że pierwsze pole INPUT jest automatycznie aktywne?
73. Czy rozróżniłeś aktywne pole od pola nieaktywnego używając input:focus?
74. Czy użyłeś tagów FIELDSET i LEGEND we właściwy sposób?

(o ile jest to wymagane)

75. Czy sprawdziłeś, czy formularz działa również z wyłączoną obsługą JavaScript?

Multimedia

76. Czy upewniłeś się, że ważne informacje lub nawigacja nie są wykonane we Flashu?
77. Czy upewniłeś się, że muzyka i klipy wideo nie starują automatycznie?
78. Czy upewniłeś się, że muzyka i klipy wideo mogą być w każdej chwili wyłączone?
79. Czy poinformowałeś użytkownika o rozmiarze i długości muzyki i klipów wideo?

Ekstra dodatki

80. Czy stworzyłeś stronę błędu 404?
81. Czy stworzyłeś mapę strony?
82. Czy stworzyłeś kanał RSS? (jeżeli dodajesz treść regularnie)
83. Czy stworzyłeś wersję strony o wysokim kontraście?
84. Czy stworzyłeś dobrze wyglądające adresy URL (jak ten)?
85. Czy upewniłeś się, że twoja strona nie korzysta z ramek (FRAMES)?
86. Czy upewniłeś się, że nie ma żadnych okienek pop-up na stronie?
87. Czy stworzyłeś formularz kontaktowy zamiast zwykłego linka do e-maila?

Tłumaczenie jest oczywiście dosyć swobodne, ale mam nadzieję, że udało mi się zachować sens pytań z oryginalnej listy… Oczywiście wszelkie sugestie, komentarze i/lub poprawki mile widziane…