Nie ka¿ mi myœleæ! O ¿yciowym

podejœciu do funkcjonalnoœ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, jeœ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 myœleæ! O ¿yciowym podejœciu do

funkcjonalnoœci stron internetowych” znajdziesz wskazówki, dziêki którym projektowane

przez Ciebie witryny WWW bêd¹ spe³nia³y podstawowe wymaganie wiêkszoœ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 treœ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 funkcjonalnoœci i dzia³ania witryny

• Zastosowanie stylów CSS

Chcesz, aby Twoje witryny zagoœci³y w folderze Ulubione u setek u¿ytkowników sieci?

Nic prostszego – wykorzystaj znajduj¹ce siê w tej ksi¹¿ce porady.

[

4

]

Spis treci

Przedmowa do drugiego wydania

6

Wstp

12

Wprowadzenie

Kilka uwag na pocztek

14

ROZDZIA 1.

Nie ka mi myle!
O yciowym podejciu do funkcjonalnoci stron internetowych

Pierwsze prawo funkcjonalnoci Kruga

22

ROZDZIA 2.

Jak naprawd korzystamy z internetu?

Przegldanie stron, zadowalanie si znalezionymi witrynami
i dawanie sobie jako rady z witrynami

32

ROZDZIA 3.

Wstp do projektowania billboardu

Projektowanie stron do przegldania, a nie czytania

42

ROZDZIA 4.

Zwierz, rolina czy rzecz?

Dlaczego uytkownicy lubi podejmowa wybory niewymagajce mylenia?

52

ROZDZIA 5.

Usu zbdne sowa

Sztuka pisania tekstów w internecie

56

ROZDZIA 6.

Znaki drogowe i cieki powrotu

Projektowanie nawigacji

62

[

5

]

ROZDZIA 7.

Co

robi, gdy strona gówna wymyka si spod kontroli

Projektowanie strony gównej

106

ROZDZIA 8.

„Farmer i pastuch powinni by przyjaciómi”

Dlaczego wikszo argumentów osób projektujcych strony internetowe
na temat ich funkcjonalnoci jest nieprawdziwa i jak samemu unikn
wyraania takich opinii

134

ROZDZIA 9.

Testowanie funkcjonalnoci za 50 groszy dziennie

Upraszczanie testów — po to, aby zrobi ich odpowiednio wiele

142

ROZDZIA 10.

Funkcjonalno jako wzajemne zaufanie

Dlaczego Twoja witryna powinna by spolegliwa

172

ROZDZIA 11.

Dostpno witryny, kaskadowe arkusze stylów i Ty

Gdy tylko pomylisz, e skoczye, oto pojawia si uniesiony w powietrzu
kot z przywizanym do grzbietu tostem

180

ROZDZIA 12.

Pomocy! Mój szef chce, abym…

Gdy dobrzy ludzie podejmuj ze decyzje

192

Podzikowania

…i wszystko, co dostaem, to ten okropnie brzydki podkoszulek…

198

Skorowidz

204

W P R O W A D Z E N I E

[

22

]

PIERWSZE PRAWO FUNKCJONALNOCI KRUGA

Zwierz,
rolina czy rzecz?

R O Z D Z I A 

Nie ka mi myle!
O yciowym podejciu
do funkcjonalnoci
stron internetowych

N I E K A  M I M Y  L E  ! O  Y C I O W Y M P O D E J  C I U D O F U N K C J O N A L N O  C I …

[

23

]

udzie czsto pytaj mnie:

„Na co powinienem zwróci uwag, aby mie pewno ,
e moja witryna bdzie atwa w uyciu?”.

Odpowied jest prosta. Nie jest to: „Najwaniejsze rzeczy nie powinny by dalej ni
o dwa kliknicia” lub: „Uywaj jzyka odbiorcy”, ani te: „Bd konsekwentny”.

To po prostu…

Nie ka mi myle!

Od lat mówi ludziom, e jest to moje pierwsze prawo funkcjonalnoci. Im wicej
stron internetowych ogldam, tym bardziej jestem przekonany o jego susznoci.

Zasada ta jest waniejsza od innych i stanowi kluczowy argument podczas
podejmowania decyzji, czy co jest przydatne, czy nie w projekcie strony WWW.
Jeli potrafisz zapamita tylko jedn regu, niech to bdzie wanie ta

1

.

Oznacza to, e ogldana przeze mnie strona WWW powinna by , na ile jest to tylko
moliwe, zrozumiaa, oczywista i niewymagajca dodatkowych objanie.

Powinienem bez adnego zastanowienia „zaapa j” — zrozumie , w jakim celu
powstaa i jak z niej korzysta .

Do jakiego stopnia strona WWW powinna by zrozumiaa?

No có, do takiego, aby np. ssiadka z mieszkania obok, której tematyka Twojej witryny
w ogóle nie interesuje i która raczej nie wie, do czego suy w przegldarce przycisk
Wstecz, moga po obejrzeniu strony startowej witryny powiedzie : „Tak, to jest…”
(przy odrobinie szczcia moe nawet: „Tak, to jest… Fajnie wyglda”, ale to ju
inna sprawa).

1

Tak naprawd istnieje jeszcze jedna podobna do niej zasada: „Wyrzu poow wyrazów z kadej

strony, potem poow z tego, co zostao”. Omówi j w osobnym rozdziale w dalszej czci ksiki.

L

Michael, czemu okna s odsonite?

— K A Y C O R L E O N E W O J C U C H R Z E S T N Y M

R O Z D Z I A  1

[

24

]

Gdy patrz na stron internetow, która nie zmusza mnie do zastanawiania si nad jej
zawartoci czy ukadem, myl mniej wicej tak: „OK, tu jest… A tutaj widz… A tu
jest to, czego szukam”.

N I E K A  M I M Y  L E  ! O  Y C I O W Y M P O D E J  C I U D O F U N K C J O N A L N O  C I …

[

25

]

Gdy natomiast ogldam stron, która zmusza mnie do mylenia, wówczas kadej
myli towarzyszy znak zapytania.

Gdy tworzysz witryn internetow, Twoim zadaniem jest usunicie znaków zapytania
z myli przyszego odbiorcy.

R O Z D Z I A  1

[

26

]

Elementy, które ka nam myle

Praktycznie wszystko, co znajduje si na stronie internetowej, moe zmusi nas
do niepotrzebnego zatrzymania si i zastanowienia. Takimi elementami s np. nazwy
wasne produktów, nazwy powstae na potrzeby marketingu, nazwy charakterystyczne
dla danych firm czy specjalistyczne wyraenia techniczne.

Przypu my, e znajomy wspomnia Ci o firmie XYZ, która planuje zatrudni
kogo z kwalifikacjami dokadnie takimi jak Twoje. W tym celu odwiedzasz stron
internetow XYZ i przegldasz j, próbujc znale odnonik do ofert pracy. Nazwa
nadana przyciskowi, który prowadzi do listy wakatów, ma istotne znaczenie dla
waciwego zrozumienia jego znaczenia.

Uyte wyraenia zawsze znajduj si gdzie pomidzy kategori „oczywiste dla kadego”
a „absolutnie niezrozumiae”, przy czym za kadym razem o wybraniu danego zwrotu
przez projektanta decyduje jaki kompromis.

Przykadowo, „Praca” moe brzmie zbyt nieoficjalnie dla XYZ, natomiast „wiat pracy”
moe wynika z jakiej skomplikowanej polityki wewntrznej lub tego, e takiego zwrotu
uywaj od zawsze w ich wewntrznej gazetce. Zastosowane kompromisy powinny
jednak zawsze by bliej grupy wyrae oczywistych dla kadego ni tej, która zmusza
do niepotrzebnego mylenia.

Innym przykadem róda niekoczcych si znaków zapytania dla osób odwiedzajcych
strony internetowe s odnoniki i przyciski, które nie wygldaj jak te, które mona
klikn . Uytkownik nigdy nie powinien mie cienia wtpliwoci, czy dany element
suy do kliknicia, czy nie.

N I E K A  M I M Y  L E  ! O  Y C I O W Y M P O D E J  C I U D O F U N K C J O N A L N O  C I …

[

27

]

Pomylisz pewnie: „No tak, ale przecie nietrudno pozna , czy co da
si klikn . Po najechaniu kursorem powinien przyj on ksztat doni.
W czym problem?”.

Problem w tym, e przy korzystaniu z internetu kady kolejny znak
zapytania zwiksza nasz wysiek i rozprasza uwag. Tego typu
niedogodnoci mog by niewielkie, jednak z czasem sumuj si i w kocu mog
wyprowadzi z równowagi.

Naley przyj , e ludzie nie lubi gowi si nad tym, jak co zrobi . Fakt, e projektanci
nie przejmuj si wystarczajco, aby tworzona przez nich strona bya przejrzysta
i nieskomplikowana, moe zniszczy nasze zaufanie do witryny i jej wacicieli.

R O Z D Z I A  1

[

28

]

Inny przykad: zanim rozpoczn wyszukiwanie ksiek w wikszoci ksigarni
internetowych, musz pomyle , jak to szukanie przeprowadzi

2

.

Zgoda, ten dedukcyjny cig mylowy trwa uamek sekundy, mimo to moe by mczcy.
Nawet co tak banalnego jak zmiana opisu przycisku z Search (szukaj) na Quick Search
(szybkie wyszukiwanie) moe spowodowa pojawienie si kolejnego znaku zapytania.

2

Gdy rok temu sprawdzaem, czy to wci prawda, odkryem, e niestety tak. Dopiero w tym roku

wikszo ksigar poprawia interfejsy swoich wyszukiwarek.

N I E K A  M I M Y  L E  ! O  Y C I O W Y M P O D E J  C I U D O F U N K C J O N A L N O  C I …

[

29

]

W interfejsie ksigarni Amazon.com nie ma nawet rozrónienia Title-Author-Keyword
(tytu-autor-sowo kluczowe). Mechanizm wyszukiwania analizuje po prostu to, co
wpisae i próbuje zwróci jak najbardziej sensowne wyniki.

Dlaczego miabym myle nad tym, w jaki sposób chc przeszuka baz ksiek, lub
zastanawia si, czego oczekuje po moim wpisie mechanizm wyszukujcy ksiki?
Takie interfejsy przypominaj mi kótliwego trolla stojcego na stray mostu
(„Zapomniae spyta si, czy Ci wolno!”).

Mógbym zrobi list kilkudziesiciu innych pyta, które nie powinny pojawia si
w gowach odwiedzajcych stron, np.:

>

Gdzie si znajduj?

>

Od czego powinienem zacz ?

>

Gdzie oni umiecili…?

>

Co jest na tej stronie najwaniejsze?

>

Dlaczego oni to tak nazwali?

Oczywicie najmniej potrzebn rzecz w tej chwili jest kolejna lista zakazów
i nakazów, któr naleaoby doczy do pokanego ju stosu innych list zwizanych
z projektowaniem stron internetowych. Najwaniejsze jest to, aby zapamita kilka
podstawowych metod eliminacji pojawiajcych si wtpliwoci. Jeli tak si stanie,
wówczas zaczniesz zauwaa na odwiedzanych stronach WWW wszystkie elementy
zmuszajce do niepotrzebnego mylenia, a w rezultacie — nauczysz si je rozpoznawa
i unika ich w tworzonych projektach.

R O Z D Z I A  1

[

30

]

Nie wszystko mo e by idealne

Twoim celem powinno by takie zaprojektowanie stron, aby kada z nich bya cakowicie
zrozumiaa i atwa w obsudze dla zwykego uytkownika

3

.

Czasami jednak — zwaszcza w sytuacjach, kiedy tworzysz co oryginalnego, zwalajcego
z nóg lub bardzo skomplikowanego — nie ma moliwoci wykreowania idealnej
strony WWW. Rozeznanie si w prawidowo zaprojektowanej stronie zajmuje chwil
— i tylko chwil. Wygld elementów i ich prawidowe opisy, ukad strony i niewielka
ilo starannie dobranego tekstu — to wszystko powinno pozwoli na prawie
natychmiastowe zrozumienie zawartoci strony.

Jeli nie ma moliwoci, aby strona bya intuicyjna, powiniene zrobi wszystko,
aby przynajmniej staa si zrozumiaa.

Dlaczego jest to tak wa ne?

Zadziwiajce, ale nie dlatego, e — jak myli wiele osób:

Czasami to prawda, ale zaskakujce jest, jak dugo niektórzy ludzie potrafi wytrzyma
na stronach, które sprawiaj im same problemy. Wiele osób po napotkaniu przeszkód
w czasie przegldania witryn internetowych próbuje za zaistnia sytuacj oskara siebie,
a nie odwiedzane strony.

3

Naprawd wzór Zwykego Uytkownika umieszczony jest w hermetycznie zamknitej piwnicy

w budynku Midzynarodowego Biura Standaryzacyjnego w Genewie. Do tego, jak wyobraa
sobie „zwykego uytkownika”, powrócimy jeszcze w dalszej czci ksiki.

N I E K A  M I M Y  L E  ! O  Y C I O W Y M P O D E J  C I U D O F U N K C J O N A L N O  C I …

[

31

]

Moe by jednak i tak, e Twoja strona nie jest atwa do odnalezienia, a odwiedzajcy
nic nie wie o konkurencji. W takim przypadku perspektywa rozpoczynania
poszukiwa od nowa nie zawsze jest pocieszajca.

Istnieje jeszcze zjawisko: „Czekaem na autobus ju 10 minut, mog wic wytrzyma
jeszcze chwil”. Poza tym, kto mówi, e strona konkurencji bdzie mniej uciliwa?

Po co wic to wszystko?

Tworzenie stron zrozumiaych i przejrzystych jest jak dobre owietlenie w sklepie
— sprawia, e wszystko wyglda lepiej. Korzystanie ze strony, która nie zmusza
do mylenia o rzeczach nieistotnych, nie wymaga adnego wysiku, podczas gdy
konieczno zaprztania sobie gowy niepotrzebnymi szczegóami wyczerpuje
energi oraz zmniejsza entuzjazm — nie wspominam ju o stracie czasu.

Jak jednak zobaczysz w nastpnym rozdziale, analiza sposobu, w jaki naprawd
korzystamy z internetu, pokazuje, e gównym powodem, dla którego naley tworzy
strony niewymagajce mylenia, jest fakt, e wikszo ludzi ma zamiar powici
ogldaniu strony o wiele mniej czasu, ni nam si wydaje.

Jeli wic strony internetowe maj by efektywne, musz w mgnieniu oka spenia
swoje zadanie. A najlepsz metod, aby to osign , jest tworzenie stron cakowicie
intuicyjnych lub chocia w peni zrozumiaych.