Nie każ mi myS
leć! O życiowym
podejS
ciu do funkcjonalnoS
ci
stron internetowych. Wydanie II.
Edycja kolorowa
Autor: Steve Krug
Tłumaczenie: Krzysztof Jurczyk
ISBN: 978-83-246-2772-1
Tytuł oryginału: Don't Make Me Think: A Common
Sense Approach to Web Usability (2nd Edition)
Format: B5, stron: 216
W gąszczu milionów witryn WWW znajdujących się w sieci jest również i Twoja.
Co należy zrobić, aby użytkownicy sieci korzystali akurat z niej, a nie z innych?
Odpowiednie wypozycjonowanie strony w wyszukiwarkach jest niezwykle ważne,
ale nie stanowi jedynego rozwiązania. Równie ważne, jeS
li nie ważniejsze, jest takie
jej zaprojektowanie i przygotowanie witryny, aby odwiedzające ją osoby nie zostały
przytłoczone nadmiarem funkcji nawigacyjnych, dziesiątkami akapitów czy też
mnóstwem nie do końca potrzebnych elementów graficznych. Należy zaprojektować
witrynę tak, aby korzystanie z niej było intuicyjne i łatwe.
W kolejnym wydaniu doskonałej książki  Nie każ mi myS
leć! O życiowym podejS
ciu do
funkcjonalnoS
ci stron internetowych znajdziesz wskazówki, dzięki którym projektowane
przez Ciebie witryny WWW będą spełniały podstawowe wymaganie większoS
ci
użytkowników internetu  będą przejrzyste, czytelne i łatwe w nawigacji. Nauczysz
się projektować strukturę witryny, opracowywać logiczny schemat nawigacji
i przygotowywać elementy graficzne, które będą uatrakcyjniać stronę, a nie odwracać
uwagę użytkownika od jej treS
ci. Dowiesz się także, jak stosować kaskadowe arkusze
stylów i radzić sobie z często absurdalnymi zachciankami szefów i klientów.
" Specyfika przedstawiania informacji na stronach WWW
" Dzielenie strony na elementy funkcjonalne
" Projektowanie schematów i mechanizmów nawigacyjnych
" Planowanie odpowiedniego układu strony głównej
" Uwzględnianie grupy docelowej przy projektowaniu witryny
" Testowanie funkcjonalnoS
ci i działania witryny
" Zastosowanie stylów CSS
Chcesz, aby Twoje witryny zagoS
ciły w folderze Ulubione u setek użytkowników sieci?
Nic prostszego  wykorzystaj znajdujące się w tej książce porady.
Spis tre ci
Przedmowa do drugiego wydania 6
Wst p 12
Wprowadzenie 14
Kilka uwag na pocz tek
ROZDZIA 1. Nie ka mi my le ! 22
O yciowym podej ciu do funkcjonalno ci stron internetowych
Pierwsze prawo funkcjonalno ci Kruga
ROZDZIA 2. Jak naprawd korzystamy z internetu? 32
Przegl danie stron, zadowalanie si znalezionymi witrynami
i dawanie sobie jako rady z witrynami
ROZDZIA 3. Wst p do projektowania billboardu 42
Projektowanie stron do przegl dania, a nie czytania
ROZDZIA 4. Zwierz , ro lina czy rzecz? 52
Dlaczego u ytkownicy lubi podejmowa wybory niewymagaj ce my lenia?
ROZDZIA 5. Usu zb dne s owa 56
Sztuka pisania tekstów w internecie
ROZDZIA 6. Znaki drogowe i cie ki powrotu 62
Projektowanie nawigacji
[ 4 ]
ROZDZIA 7. Co robi , gdy strona g ówna wymyka si spod kontroli 106
Projektowanie strony g ównej
ROZDZIA 8.  Farmer i pastuch powinni by przyjació mi 134
Dlaczego wi kszo argumentów osób projektuj cych strony internetowe
na temat ich funkcjonalno ci jest nieprawdziwa i jak samemu unikn
wyra ania takich opinii
ROZDZIA 9. Testowanie funkcjonalno ci za 50 groszy dziennie 142
Upraszczanie testów  po to, aby zrobi ich odpowiednio wiele
ROZDZIA 10. Funkcjonalno jako wzajemne zaufanie 172
Dlaczego Twoja witryna powinna by spolegliwa
ROZDZIA 11. Dost pno witryny, kaskadowe arkusze stylów i Ty 180
Gdy tylko pomy lisz, e sko czy e , oto pojawia si uniesiony w powietrzu
kot z przywi zanym do grzbietu tostem
ROZDZIA 12. Pomocy! Mój szef chce, abym& 192
Gdy dobrzy ludzie podejmuj z e decyzje
Podzi kowania 198
& i wszystko, co dosta em, to ten okropnie brzydki podkoszulek&
Skorowidz 204
[ 5 ]
ROZDZIA
WPROWADZENIE
Zwierz ,
ro lina czy rzecz?
Nie ka mi my le !
O yciowym podej ciu
do funkcjonalno ci
stron internetowych
PIERWSZE PRAWO FUNKCJONALNO CI KRUGA
[ 22 ]
Michael, czemu okna s ods oni te?
NIE KA MI MY LE ! O YCIOWYM PODEJ CIU DO FUNKCJONALNO CI&
 KAY CORLEONE W OJ CU CHRZESTNYM
L udzie cz sto pytaj mnie:
 Na co powinienem zwróci uwag , aby mie pewno ,
e moja witryna b dzie atwa w u yciu? .
Odpowied jest prosta. Nie jest to:  Najwa niejsze rzeczy nie powinny by dalej ni
o dwa klikni cia lub:  U ywaj j zyka odbiorcy , ani te :  B d konsekwentny .
To po prostu&
Nie ka mi my le !
Od lat mówi ludziom, e jest to moje pierwsze prawo funkcjonalno ci. Im wi cej
stron internetowych ogl dam, tym bardziej jestem przekonany o jego s uszno ci.
Zasada ta jest wa niejsza od innych i stanowi kluczowy argument podczas
podejmowania decyzji, czy co jest przydatne, czy nie w projekcie strony WWW.
Je li potrafisz zapami ta tylko jedn regu , niech to b dzie w a nie ta1.
Oznacza to, e ogl dana przeze mnie strona WWW powinna by , na ile jest to tylko
mo liwe, zrozumia a, oczywista i niewymagaj ca dodatkowych obja nie .
Powinienem bez adnego zastanowienia  za apa j   zrozumie , w jakim celu
powsta a i jak z niej korzysta .
Do jakiego stopnia strona WWW powinna by zrozumia a?
No có , do takiego, aby np. s siadka z mieszkania obok, której tematyka Twojej witryny
w ogóle nie interesuje i która raczej nie wie, do czego s u y w przegl darce przycisk
Wstecz, mog a po obejrzeniu strony startowej witryny powiedzie :  Tak, to jest& 
(przy odrobinie szcz cia mo e nawet:  Tak, to jest& Fajnie wygl da , ale to ju
inna sprawa).
1
Tak naprawd istnieje jeszcze jedna podobna do niej zasada:  Wyrzu po ow wyrazów z ka dej
strony, potem po ow z tego, co zosta o . Omówi j w osobnym rozdziale w dalszej cz ci ksi ki.
[ 23 ]
ROZDZIA 1
Gdy patrz na stron internetow , która nie zmusza mnie do zastanawiania si nad jej
zawarto ci czy uk adem, my l mniej wi cej tak:  OK, tu jest& A tutaj widz & A tu
jest to, czego szukam .
[ 24 ]
NIE KA MI MY LE ! O YCIOWYM PODEJ CIU DO FUNKCJONALNO CI&
Gdy natomiast ogl dam stron , która zmusza mnie do my lenia, wówczas ka dej
my li towarzyszy znak zapytania.
Gdy tworzysz witryn internetow , Twoim zadaniem jest usuni cie znaków zapytania
z my li przysz ego odbiorcy.
[ 25 ]
ROZDZIA 1
Elementy, które ka nam my le
Praktycznie wszystko, co znajduje si na stronie internetowej, mo e zmusi nas
do niepotrzebnego zatrzymania si i zastanowienia. Takimi elementami s np. nazwy
w asne produktów, nazwy powsta e na potrzeby marketingu, nazwy charakterystyczne
dla danych firm czy specjalistyczne wyra enia techniczne.
Przypu my, e znajomy wspomnia Ci o firmie XYZ, która planuje zatrudni
kogo z kwalifikacjami dok adnie takimi jak Twoje. W tym celu odwiedzasz stron
internetow XYZ i przegl dasz j , próbuj c znale odno nik do ofert pracy. Nazwa
nadana przyciskowi, który prowadzi do listy wakatów, ma istotne znaczenie dla
w a ciwego zrozumienia jego znaczenia.
U yte wyra enia zawsze znajduj si gdzie pomi dzy kategori  oczywiste dla ka dego
a  absolutnie niezrozumia e , przy czym za ka dym razem o wybraniu danego zwrotu
przez projektanta decyduje jaki kompromis.
Przyk adowo,  Praca mo e brzmie zbyt nieoficjalnie dla XYZ, natomiast  wiat pracy
mo e wynika z jakiej skomplikowanej polityki wewn trznej lub tego, e takiego zwrotu
u ywaj od zawsze w ich wewn trznej gazetce. Zastosowane kompromisy powinny
jednak zawsze by bli ej grupy wyra e oczywistych dla ka dego ni tej, która zmusza
do niepotrzebnego my lenia.
Innym przyk adem ród a nieko cz cych si znaków zapytania dla osób odwiedzaj cych
strony internetowe s odno niki i przyciski, które nie wygl daj jak te, które mo na
klikn . U ytkownik nigdy nie powinien mie cienia w tpliwo ci, czy dany element
s u y do klikni cia, czy nie.
[ 26 ]
NIE KA MI MY LE ! O YCIOWYM PODEJ CIU DO FUNKCJONALNO CI&
Pomy lisz pewnie:  No tak, ale przecie nietrudno pozna , czy co da
si klikn . Po najechaniu kursorem powinien przyj on kszta t d oni.
W czym problem? .
Problem w tym, e przy korzystaniu z internetu ka dy kolejny znak
zapytania zwi ksza nasz wysi ek i rozprasza uwag . Tego typu
niedogodno ci mog by niewielkie, jednak z czasem sumuj si i w ko cu mog
wyprowadzi z równowagi.
Nale y przyj , e ludzie nie lubi g owi si nad tym, jak co zrobi . Fakt, e projektanci
nie przejmuj si wystarczaj co, aby tworzona przez nich strona by a przejrzysta
i nieskomplikowana, mo e zniszczy nasze zaufanie do witryny i jej w a cicieli.
[ 27 ]
ROZDZIA 1
Inny przyk ad: zanim rozpoczn wyszukiwanie ksi ek w wi kszo ci ksi garni
internetowych, musz pomy le , jak to szukanie przeprowadzi 2.
Zgoda, ten dedukcyjny ci g my lowy trwa u amek sekundy, mimo to mo e by m cz cy.
Nawet co tak banalnego jak zmiana opisu przycisku z Search (szukaj) na Quick Search
(szybkie wyszukiwanie) mo e spowodowa pojawienie si kolejnego znaku zapytania.
2
Gdy rok temu sprawdza em, czy to wci prawda, odkry em, e niestety tak. Dopiero w tym roku
wi kszo ksi gar poprawi a interfejsy swoich wyszukiwarek.
[ 28 ]
NIE KA MI MY LE ! O YCIOWYM PODEJ CIU DO FUNKCJONALNO CI&
W interfejsie ksi garni Amazon.com nie ma nawet rozró nienia Title-Author-Keyword
(tytu -autor-s owo kluczowe). Mechanizm wyszukiwania analizuje po prostu to, co
wpisa e i próbuje zwróci jak najbardziej sensowne wyniki.
Dlaczego mia bym my le nad tym, w jaki sposób chc przeszuka baz ksi ek, lub
zastanawia si , czego oczekuje po moim wpisie mechanizm wyszukuj cy ksi ki?
Takie interfejsy przypominaj mi k ótliwego trolla stoj cego na stra y mostu
( Zapomnia e spyta si , czy Ci wolno! ).
Móg bym zrobi list kilkudziesi ciu innych pyta , które nie powinny pojawia si
w g owach odwiedzaj cych stron , np.:
> Gdzie si znajduj ?
> Od czego powinienem zacz ?
> Gdzie oni umie cili& ?
> Co jest na tej stronie najwa niejsze?
> Dlaczego oni to tak nazwali?
Oczywi cie najmniej potrzebn rzecz w tej chwili jest kolejna lista zakazów
i nakazów, któr nale a oby do czy do poka nego ju stosu innych list zwi zanych
z projektowaniem stron internetowych. Najwa niejsze jest to, aby zapami ta kilka
podstawowych metod eliminacji pojawiaj cych si w tpliwo ci. Je li tak si stanie,
wówczas zaczniesz zauwa a na odwiedzanych stronach WWW wszystkie elementy
zmuszaj ce do niepotrzebnego my lenia, a w rezultacie  nauczysz si je rozpoznawa
i unika ich w tworzonych projektach.
[ 29 ]
ROZDZIA 1
Nie wszystko mo e by idealne
Twoim celem powinno by takie zaprojektowanie stron, aby ka da z nich by a ca kowicie
zrozumia a i atwa w obs udze dla zwyk ego u ytkownika3.
Czasami jednak  zw aszcza w sytuacjach, kiedy tworzysz co oryginalnego, zwalaj cego
z nóg lub bardzo skomplikowanego  nie ma mo liwo ci wykreowania idealnej
strony WWW. Rozeznanie si w prawid owo zaprojektowanej stronie zajmuje chwil
 i tylko chwil . Wygl d elementów i ich prawid owe opisy, uk ad strony i niewielka
ilo starannie dobranego tekstu  to wszystko powinno pozwoli na prawie
natychmiastowe zrozumienie zawarto ci strony.
Je li nie ma mo liwo ci, aby strona by a intuicyjna, powiniene zrobi wszystko,
aby przynajmniej sta a si zrozumia a.
Dlaczego jest to tak wa ne?
Zadziwiaj ce, ale nie dlatego, e  jak my li wiele osób:
Czasami to prawda, ale zaskakuj ce jest, jak d ugo niektórzy ludzie potrafi wytrzyma
na stronach, które sprawiaj im same problemy. Wiele osób po napotkaniu przeszkód
w czasie przegl dania witryn internetowych próbuje za zaistnia sytuacj oskar a siebie,
a nie odwiedzane strony.
3
Naprawd wzór Zwyk ego U ytkownika umieszczony jest w hermetycznie zamkni tej piwnicy
w budynku Mi dzynarodowego Biura Standaryzacyjnego w Genewie. Do tego, jak wyobra a
sobie  zwyk ego u ytkownika , powrócimy jeszcze w dalszej cz ci ksi ki.
[ 30 ]
NIE KA MI MY LE ! O YCIOWYM PODEJ CIU DO FUNKCJONALNO CI&
Mo e by jednak i tak, e Twoja strona nie jest atwa do odnalezienia, a odwiedzaj cy
nic nie wie o konkurencji. W takim przypadku perspektywa rozpoczynania
poszukiwa od nowa nie zawsze jest pocieszaj ca.
Istnieje jeszcze zjawisko:  Czeka em na autobus ju 10 minut, mog wi c wytrzyma
jeszcze chwil  . Poza tym, kto mówi, e strona konkurencji b dzie mniej uci liwa?
Po co wi c to wszystko?
Tworzenie stron zrozumia ych i przejrzystych jest jak dobre o wietlenie w sklepie
 sprawia, e wszystko wygl da lepiej. Korzystanie ze strony, która nie zmusza
do my lenia o rzeczach nieistotnych, nie wymaga adnego wysi ku, podczas gdy
konieczno zaprz tania sobie g owy niepotrzebnymi szczegó ami wyczerpuje
energi oraz zmniejsza entuzjazm  nie wspominam ju o stracie czasu.
Jak jednak zobaczysz w nast pnym rozdziale, analiza sposobu, w jaki naprawd
korzystamy z internetu, pokazuje, e g ównym powodem, dla którego nale y tworzy
strony niewymagaj ce my lenia, jest fakt, e wi kszo ludzi ma zamiar po wi ci
ogl daniu strony o wiele mniej czasu, ni nam si wydaje.
Je li wi c strony internetowe maj by efektywne, musz w mgnieniu oka spe nia
swoje zadanie. A najlepsz metod , aby to osi gn , jest tworzenie stron ca kowicie
intuicyjnych lub chocia w pe ni zrozumia ych.
[ 31 ]