Optymalizacja

funkcjonalnoci
serwisw internetowych
Autorzy: Jakob Nielsen, Hoa Loranger
Tumaczenie: Zbigniew Smogur
ISBN: 83-246-0845-1
Tytu oryginau: Prioritizing Web Usability
Format: B5, stron: 432
Stwrz funkcjonalne witryny i zdobd przewag w internecie!
Uniknij standardowych bdw
Zrozum potrzeby uytkownikw
Udostpnij przydatne informacje w czytelny sposb
W cigu ostatnich kilkunastu lat internet sta si wszechobecny. Nawet mae firmy
maj wasne strony, a rozmaite produkty i informacje mona znale na niezliczonych
konkurencyjnych witrynach. Jak w takiej sytuacji sprawi, eby uytkownik skorzysta
z Twoich usug? Coraz wiksze znaczenie w sieci odgrywa funkcjonalno, a klienci
wybieraj te witryny, na ktrych mog szybko i atwo znale to, czego szukaj.
W ksice Optymalizacja funkcjonalnoci serwisw internetowych guru w zakresie
funkcjonalnoci w internecie, Jakob Nielsen, przedstawia oparte na wszechstronnych
badaniach wskazwki dotyczce projektowania wygodnych witryn. Dziki nim dowiesz
si, jak utworzy idealn stron startow oraz unikn najczciej popenianych
bdw. Zrozumiesz, jak uatwi uytkownikom wyszukiwanie informacji oraz
nawigowanie po serwisie. Poznasz zasady pisania poprawnych tekstw dla witryn
internetowych i stosowania odpowiednich czcionek, a take nauczysz si waciwie
korzysta z rnorodnych technologii, ktre mog wzbogaci Twj serwis. To kolejna
doskonaa ksika autora bestsellera Projektowanie funkcjonalnych serwisw
internetowych, ktr kady webmaster powinien mie w swej biblioteczce.
W ksice poruszono nastpujce zagadnienia:

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Projektowanie strony startowej

Wyszukiwanie informacji
Nawigowanie po witrynie
Sposb pisania tekstw
Udostpnianie odpowiednich informacji
Uywanie odpowiednich czcionek
Zastosowania technologii
Rozwizania najczciej popenianych bdw
Testowanie funkcjonalnoci witryn
Naucz si tworzy atrakcyjne witryny, z ktrych uytkownicy bd chtnie korzysta

Spis treci
Wstp
Czym jest funkcjonalno?
Gdzie szuka szczegowych bada uytkownikw?

17
18
20

Funkcjonalno wczoraj i dzi

21

Kto powinien przeczyta t ksik?

23

1 Wprowadzenie. Nic do ukrycia

29

Gdzie zdobywamy nasze dane

Jak wykonane zostay badania do ksiki
Strony przetestowane
Co, jeli na stronie wprowadzone zostay zmiany?

30
31
33
40

Jeszcze raz: dlaczego testowanie przy wykorzystaniu

uytkownikw jest wane?
Testowanie z wykorzystaniem uytkownikw w trzy dni
Wyjtki

43
43
43

2 Dowiadczenie uytkownikw sieci

Jak dobrze ludzie uywaj sieci?
Mierzenie skali sukcesu
Wskaniki powodzenia w internecie
Powodzenie a wskanik dowiadczenia

48
49
50
51

Satysfakcja uytkownikw w pracy ze stronami internetowymi

52

W jaki sposb uytkownicy uywaj stron internetowych

Trzy wskazwki dotyczce wspierania
dociekliwych uytkownikw
Strona startowa tak wiele do powiedzenia,
tak niewiele czasu
Cztery cele w trzydzieci sekund
Sposoby pracy na wewntrznych stronach
Wskazwka optymalizacja odnonikw
na wewntrznych stronach

53

Strategia dominujcego wyszukiwania

Rozwj wyszukiwarek dajcych odpowiedzi
Cztery sposoby, aby zyska uznanie
w oczach uytkownikw wyszukiwarek
Odnoniki zwyke kontra sponsorowane
W jaki sposb ludzie korzystaj ze strony
z wynikami wyszukiwania
Pierwsze zalecenie dotyczce optymalizacji
pod ktem wyszukiwarek

47

53
56
56
59
61
62
62
64
65
65
66

Spis treci

Korzystanie ze sw kluczowych
do oszacowania usprawnie funkcjonalnoci
Jak okreli optymaln cen dla reklamy sowa kluczowego
Ile warta jest poprawiona funkcjonalno?
Trzy powody, dla ktrych warto usprawni wasn stron
Przewijanie
Wskazwka projekt z krtkim przewijaniem
Spenianie regu projektowych oraz zalece
dotyczcych funkcjonalnoci
Definicja standardw i konwencji
Siedem powodw przemawiajcych
za standaryzacj elementw projektu
Poszukiwanie informacji
Zalecana lektura
lad informacji przewidywanie powodzenia ladu
Wybr poywienia jakie strony odwiedzi
Trzy sposoby na wyrnienie ladu informacji
Porzucenie ladu kiedy zmieni obszar poszukiwa
Nowe strategie projektowania,
aby zainteresowa poszukujcych informacji
Wicej informacji
Sposoby nawigacji osb pochaniajcych informacje
3 Ponowne spojrzenie na wczesne wyniki
bada nad funkcjonalnoci
W trakcie budowy
Osiem problemw, ktre nie ulegy zmianie
Odnoniki, ktre nie zmieniaj koloru po klikniciu
Dlaczego projektanci nam nie wierz?
Ucieczka od przycisku Wstecz
Prawo Fittsa dotyczce czasu klikania
Otwieranie nowych okien przegldarki internetowej
Kltwa maksymalizacji
Jak mona uywa okien, skoro si ich nie rozumie?
Wyskakujce okienka
Najbardziej znienawidzone techniki reklamowe
Projekty elementw, ktre wygldaj jak reklamy
Naruszanie konwencji obowizujcych w sieci
Unikanie podczas testw wpywowych uytkownikw
Mglista tre oraz pusta reklama
Zwarta tre oraz nieprzeszukiwalny tekst

Spis treci

67
68
69
70
71
71
73
73
74
78
78
78
78
79
79
80
81
81

83
85
86
86
88
89
91
93
95
97
98
101
102
104
104
106
107

Zmiana technologiczna i jej wpyw na funkcjonalno

Wskazwki si lotniczych z 1986 roku przeszy prb czasu
Dugi czas pobierania
Trzy poziomy emocjonalnego projektowania Dona Normana
Ramki
Technologia Flash
Technologia Flash dobra, za i funkcjonalna
Wyniki wyszukiwania o niskiej zgodnoci
Materiay multimedialne i dugie wideoklipy
Zamroone ukady graficzne
Nastolatki mistrzowie technologii?
Brak kompatybilnoci na rnych platformach
Smutny Mac
Urzdzenia przenone nowy argument
przemawiajcy za projektami na rne platformy?
Adaptacja w jaki sposb uytkownicy
wpynli na funkcjonalno
Niepewna moliwo klikania
Odnoniki, ktre nie s niebieskie
Przewijanie
Rejestracja
Skomplikowane adresy URL
Wysuwane i kaskadowe menu

10

110
111
112
112
113
114
116
117
117
118
118
120
120
122
122
123
126
126
128
129
129

Powcigliwo w jaki sposb projektanci

zmniejszyli problemy z funkcjonalnoci
Wtyczki oraz technologia najnowszego stanu kodu
Trjwymiarowy interfejs uytkownika
Rozdty projekt
Strony wprowadzajce
Ruchoma grafika oraz przewijany tekst
Wasne elementy interfejsu uytkownika
Brak informacji o tym, kto jest twrc strony
Elementy O nas nie przekazuj dostatecznej
iloci informacji
Wymylone sowa
Nieaktualna tre
Niespjno w ramach tej samej strony
Pochopne dania o dane osobowe
Powielone strony
Osamotnione strony

141
142
142
144
144
145
145

Ocena losu wczesnych odkry

Wicej informacji

145
147

130
134
135
137
137
139
139
141

Spis treci

4 Nadawanie priorytetu problemom z funkcjonalnoci

Jak powany jest problem?

149
150

Co czyni problemy powanymi

Ocenianie powagi problemu
Funkcjonalno w szpitalu przypadki krytyczne

151
151
154

Skala nieszczcia
Wskazwka pierwsze prawo handlu elektronicznego

155
157

Dlaczego uytkownicy nie osigaj celu

Pi najwaniejszych przyczyn tego,
e uytkownicy nie osigaj celu

158
159

Czy wystarczy skupi si na najwikszych problemach?

160

5 Wyszukiwanie

163

Stan wyszukiwania
Wskazwka jak rozpozna, czy potrzebne
jest wyszukiwanie
Trzy proste kroki do lepszego wyszukiwania

164

Jak powinno dziaa wyszukiwanie

Trzy rzeczy, ktrych uytkownicy
oczekuj od wyszukiwarek
Wskazwka kiedy wyszukiwanie
nie jest wyszukiwaniem?

166

164
165

166
166

Interfejs wyszukiwania
Wskazwka nie staraj si by wyszukiwark
Dugo pytania a szeroko pola wyszukiwarki
Wskazwka dotyczca pola wyszukiwania
musi by szerokie
Zaawansowane wyszukiwanie

168
169
174

Strony z wynikami wyszukiwania

Zalecenia dotyczce odnonikw docelowych
Wskazwka konwencja datowania stron
z wynikami wyszukiwania
Wskazwka pomoc osobom majcym
kopoty z pisowni
Najlepszy strza
Cztery sposoby na tworzenie najlepszych strzaw
Utrzymywanie najlepszych strzaw
Sortowanie stron z wynikami wyszukiwania
Nie znaleziono wynikw
Znaleziono jeden wynik

177
177

Optymalizacja pod ktem wyszukiwarek

Sztuczki oszustw uywane do pozycjonowania stron
Nadawanie nazwy

186
187
189

Spis treci

174
176

178
180
180
181
182
183
185
185

11

Wskazwka pikno uywania reklam tylko tekstowych

Wskazwka ledzenie wartoci reklam
w wyszukiwarkach
Lingwistyczne pozycjonowanie stron w wyszukiwarkach
Najwaniejsza wskazwka lingwistyczna
dotyczca pozycjonowania stron w wyszukiwarkach
Wskazwka naduywanie sw kluczowych
przynosi odwrotny efekt
Wskazwka myl frazami, nie sowami kluczowymi
Architektoniczne pozycjonowanie stron w wyszukiwarkach
Pozycjonowanie stron w wyszukiwarkach
na podstawie reputacji
W jaki sposb wyszukiwarki okrelaj reputacj strony
6 Nawigacja i architektura informacji

191
191
191
192
193
193
195
195
197

Czy ju osignem cel?

198

Dopasowanie struktury strony do oczekiwa uytkownikw

Zalecana lektura dotyczca architektury informacji
Architektura informacji w intranecie

199
199
200

Nawigacja musi by jednolita

204

Nawigacja strze si mody

Dzieciaki lubi gr w sapera

210
210

Ograniczanie nieadu oraz unikanie powtrze

Nie da si nabra na duplikaty

215
215

Nazwy odnonikw i etykiet liczy si dokadno

218

Pionowo rozwijane menu krtkie jest pikne

228

Menu wielopoziomowe mniej oznacza wicej

228

Czy mog to klikn?

Przystpno

231
232

Bezporedni dostp ze strony gwnej

Wicej informacji

236
237

7 Typografia czytelno i przejrzysto

Wskazwka minus imitacji tekstu
Cztery najwaniejsze wskazwki dotyczce kroju pisma
Tekst podstawowy regua dziesiciu punktw
Wskazwka unikanie antyaliasingu
Wiek nie jest problemem
Wskazwka kiedy ten sam rozmiar wyglda na mniejszy
Planowanie pod ktem rnic w sprzcie
Powszechne rozdzielczoci ekranu
Dostpno dotyczy nas wszystkich

12

190

239
240
241
247
248
249
250
251
251
252

Spis treci

Relatywne specyfikacje
253
Regua relatywnego rozmiaru
253
Projektowanie z myl o uytkownikach z wadami wzroku 253
Wybieranie czcionek
W przypadku wtpliwoci naley korzysta
z czcionki Verdana
Kiedy z ekranu bdzie mona czyta
tak dobrze, jak z kartki?

258

Mieszanie czcionek i kolorw

Wojna przeciwko wersalikom
Kontrast midzy tekstem i tem
Powszechny daltonizm
Dwa sposoby, by spowodowa, e kolor bdzie widoczny

261
264
266
271
271

Obrazki z tekstem

273

Poruszajcy si tekst
Wicej informacji

275
275

8 Pisanie na potrzeby internetu

Jak saby sposb pisania powoduje
niepowodzenie strony internetowej

259
260

279
280

Zrozumie, jak czytaj uytkownicy sieci

Wskazwka zatrudni pisarza specjalizujcego si
w pisaniu na potrzeby sieci
Dlaczego uytkownicy przegldaj

284

Pisa dla swoich czytelnikw

Wskazwka pozna swoich odbiorcw
Uywa prostego jzyka
Trzy wskazwki dotyczce lepszego pisania w sieci
Wychodzenie naprzeciw niskim potrzebom literackim
Stonowa krzykliwe reklamy
Wskazwka kiedy i gdzie uywa krzykliwego stylu
Prbki pisania przed i po
Punkty podsumowujce i skracanie
Wskazwka test dwch zda
Utrzymywanie tekstu w krtkiej i miej formie
Wskazwka tworzenie opisowych etykiet

285
285
288
288
291
291
293
293
295
295
295
297

Jak formatowa tekst, by by czytelny

Szybka poprawa funkcjonalnoci
Wyrnianie sw kluczowych
Uywanie zwizych i opisowych tytuw oraz nagwkw
Trzy wskazwki na temat hierarchii nagwkw
Uywanie list wypunktowanych i numerowanych

301
301
301
302
303
305

Spis treci

284
285

13

Siedem najwaniejszych wskazwek

dotyczcych list wypunktowanych
Wskazwka podobne formuowanie jest wane
Uywanie krtkich paragrafw
Wicej informacji

306
307
308
308

9 Zapewnienie dobrej informacji o produkcie

Poka mi pienidze
Wskazwka kiedy wywietla ceny
Bez wymwek
Wskazwka ceny przyblione s lepsze od adnych
Pokazywa dodatkowe opaty

313
313
316
317
318

Wygra zaufanie klientw

Opisywanie produktu
Zapewnienie rysunkw i ilustracji produktw
Jazda prbna strony motoryzacyjnej
Pi duych bdw dotyczcych obrazw produktw
Warstwowe ukadanie stron produktw
Pokazywanie wiarygodnoci

321
321
324
324
325
330
336

Wspiera zakupy oparte na porwnywaniu

Udoskonalanie i sortowanie

337
340

Wspiera zakupy towarw dobrej jakoci

Cztery powody stosowania artykuw informacyjnych
Oni nie maj produktw, prawda?
Wicej informacji

343
343
344
345

10 Prezentowanie elementw strony

Kiedy regua trzech klikni sieje spustoszenie

14

311

347
348

Czy powinno si projektowa z myl o przewijaniu?

Cztery reguy przewijania

348
350

Instruowanie uytkownikw. Krok po kroku

Wskazwka strze si magicznych numerw

355
355

Trzyma podobne elementy obok siebie

Niedbae formatowanie formularzy

359
364

Spenia oczekiwania uytkownikw

Patrz na mnie!

370
370

Wykorzystanie pustej przestrzeni

373

Spis treci

11 Balansowanie midzy technologi

i potrzebami uytkownikw
Powrt do roku 2000. Uwaga od Jakoba Nielsena
Uywa materiaw multimedialnych,
gdy s one waciwe dla naszych odbiorcw
Pokonywanie barier zwizanych z materiaami multimedialnymi
Uwzgldnianie uytkownikw o niskich
moliwociach technicznych
Wskazwka zapewnianie alternatywnej dostpnoci
Strony dla dzieci musz by realne
Projektowanie pod ktem prdkoci cza odbiorcw
Zapewnienie prostych i waciwych wskanikw
adowania i statusu strony
Nie docenia wiedzy technicznej wasnych uytkownikw
Zwracanie uwagi na jzyk
Wykrywanie przepustowoci cza uytkownikw

377
378
379
385
385
385
386
387
387
390
390
392

Przyklei si do znanych konwencji

zwizanych z interfejsami
394
Wskazwka wyskakujce okienka zazwyczaj si mszcz 395
Wskazwka paski przewijania powinny
by elementami standardowymi
397
Unika nadmiaru materiaw multimedialnych
Wskazwka media rozbudowane kontra skromne
Zmniejszanie gonoci
Jak si to wycza?

401
401
403
403

Tworzenie materiaw wideo na potrzeby sieci

Wskazwka kiedy zrobi przerw na reklam

404
404

Praktykowanie prostoty
Doskonalenie swojej strony prdzej czy pniej?
Trzy wskazwki prostota, prostota i jeszcze raz prostota

406
409
410

W stron jeszcze bardziej eleganckich projektw

Wicej informacji

416
416

12 Podsumowanie projekt, ktry spenia swoje zadanie

419

Testowanie wasnych przypuszcze

421

Skorowidz

422

Spis treci

15

6 Nawigacja
iarchitekturainformacji

Chaotyczny projekt prowadzi do poraki

i zmarnowania wysikw. Tworzone
w popiechu strony, ktre nie zawieraj
skutecznych schematw informacji,
uniemoliwiaj uytkownikom dotarcie
do poszukiwanych przez nich danych.
Kiedy do tego dojdzie, mog si podda
lub, co gorsza, przej na inn stron.
Dobrze zorganizowana struktura serwisu
dostarcza uytkownikom to, czego chc,
wtedy, kiedy chc. W rozdziale tym
przyjrzymy si niektrym najpopularniejszym
przeszkodom projektowym, ktre stoj
midzy uytkownikami i ich celami, oraz
dostarczymy wskazwek, jak przeszkd
tych unika.

Raz za razem z naszych bada wynika, e ludzie walcz o to, by

zdoby informacje, ktrych potrzebuj, przeklinajc i narzekajc przy tym przez cay czas. W rzeczywistoci kopoty z odnalezieniem szukanych treci to najwikszy problem zgaszany
przez naszych uytkownikw testowych. Pomimo e wyszukiwanie samo w sobie sprawiao najmniej problemw, cztery
inne obszary, ktre zaliczamy do elementw umoliwiajcych
odnalezienie danych, powodoway znacznie wiksze problemy.
Te cztery elementy, do ktrych zalicza si nawigacj i menu, nazwy kategorii, odnoniki oraz architektur informacji, determinuj atwo, z jak mona odnale rzeczy, poruszajc si po
serwisie, zamiast od razu udawa si do wyszukiwarki. (Wiele
osb traktuje nazwy kategorii jako problem zaleny od architektury informacji ze wzgldu na to, e nazywanie czsto idzie
w parze ze strukturyzowaniem. Jednak biorc pod uwag fakt,
i angauj one rne decyzje projektowe, wydaje nam si, e
warto rozway je osobno).

Czy ju osignem cel?

Jednym z najwikszych
komplementw, jaki strona
moe uzyska, jest brak
komentarzy uytkownikw,
dotyczcych jej struktury.
Mylenie i analizowanie
struktury serwisu to
zadanie dla jego
projektanta, a nie
uytkownika.

Sabo zaprojektowane strony internetowe czyni wicej za ni

tylko spowalnianie pracy uytkownikw mog ich zniechci do korzystania z danego serwisu. Kiedy kto nie moe znale tego, czego szuka, czsto zakada, e informacja nie jest dostpna. Pod wpywem frustracji moe uda si gdzie indziej.
Systematycznie zorganizowany projekt gwarantuje, e ludzie
odnajduj informacje przy mniejszym nakadzie si dziki czytelnie reprezentowanym etykietom, ukadowi strony i relacjom
midzy poszczeglnymi stronami serwisu. Dobry projekt nawigacji pokazuje uytkownikom, gdzie s, gdzie znajduj si poszczeglne rzeczy i jak metodycznie dotrze do tego, czego potrzebuj. Waciwie wykonana architektura informacji daje
uytkownikom poczucie wygody i pewnoci, e mog wrci
na wczeniej odwiedzane strony.
Jednym z najwikszych komplementw, jaki strona moe uzyska, jest brak komentarzy uytkownikw, dotyczcych jej
struktury. Na dobrze zorganizowanych stronach mog oni porusza si swobodnie, koncentrujc si jedynie na zadaniu, a nie
na strukturze strony. Mylenie i analizowanie struktury serwisu
to zadanie dla jego projektanta, a nie uytkownika.

198

Optymalizacja funkcjonalnoci serwisw internetowych

Zalecana lektura
dotyczca architektury
informacji
Jeli kto jest zainteresowany
poznaniem metod planowania
i strukturyzowania zawartoci
stron internetowych,
to polecamy publikacj
Architektura informacji
w serwisach internetowych
napisan przez Louisa
Rosenfelda oraz Petera
Morvillea (wydawnictwo
Helion, 2003). Czasem
zwana jest ona ksik
niedwiedzia polarnego
ze wzgldu na obrazek
przedstawiajcy duego
niedwiedzia polarnego,
umieszczony na okadce.
Jest to klasyka architektury
informacji. Kto, kto chce
zaoszczdzi pienidze,
moe za darmo pobra
z internetu pierwsze wydanie,
ktre zawiera wicej
uytecznych informacji
ni niejedna nowa publikacja
na rynku. Jednake kupno
najnowszego wydania to
inwestycja warta swojej ceny.

Prba zaprojektowania
struktury strony bez
wkadu wniesionego przez
jej uytkownikw jest
olbrzymim bdem, ktry
moe kosztowa tysice,
a nawet miliony dolarw.
Projektowa naley dla
wygody ich, nie naszej.

Dopasowanie struktury strony

do oczekiwa uytkownikw
Najbardziej efektywnymi stronami w kierowaniu uytkownikw do waciwej lokalizacji s te, ktre speniaj ich oczekiwania. Wiemy, e uytkownicy nie bd marnowa czasu na zapamitywanie lub uczenie si sposobu nawigacji po rnych
serwisach. Warto wic zaangaowa odpowiednie rodki, aby
zaprojektowa najlepsz architektur informacji strony, ktra
zagwarantuje klientom odpowiedzi, jakich potrzebuj w miejscach, gdzie si ich spodziewaj. Im bardziej naturalna wydaje
si ta architektura, tym wiksze prawdopodobiestwo, e uytkownicy wrc na tak stron.
Ludzie nie lubi przeciska si przez gszcz dwuznacznych odnonikw do treci. Oczekuj, e strona internetowa posiada
tak zorganizowan zawarto, e jest ona klarowna dla nich.
Naley wic korzysta z takiej struktury nawigacyjnej, ktra
odzwierciedla ich pogld na stron i oferowane przez ni informacje oraz usugi. Nie wolno zapomina, e podmiotem s
oni, a nie my.
Kady moe myle, e struktura jego strony jest zorganizowana
w sposb intuicyjny. Jednym z najwikszych popenianych
przez firmy bdw jest uywanie schematw, ktre s intuicyjne dla nich. Przykadem moe by pogrupowanie produktw
wzgldem marek lub takie tworzenie treci serwisu, by odzwierciedlaa struktur organizacji. W efekcie uzyskuje si witryny,
ktre s cakowicie logiczne dla ich twrcw, ale zupenie niezrozumiae dla odwiedzajcych.
Dlaczego? Dlatego e to, w jaki sposb my i nasza firma dokonamy strukturyzacji informacji, moe rni si diametralnie
od tego, jak wyobraaj to sobie uytkownicy. Jeeli na przykad handlujemy latarkami, lepiej jest je zorganizowa wedug
atrybutw oczekiwanych przez uytkownikw, na przykad
wedug rozmiaru, a nie nazw marek, takich jak Xeon. Chocia
Xeon moe by oglnie znan lini produktw dla osb z naszej firmy, to jednoczenie moe by zupenie obcy naszym
klientom.
Prba zaprojektowania struktury strony bez wkadu wniesionego przez jej uytkownikw jest olbrzymim bdem, ktry moe
kosztowa tysice, a nawet miliony dolarw. Niewane, jak dobrze i nowoczenie wyglda strona, gdy jest bezuyteczna, jeli grupa docelowa klientw uzna j za bezsensown. Projektowa naley dla wygody ich, nie naszej.

6. Nawigacja i architektura informacji

199

(Na ssiedniej stronie u gry)

Ta strona zbytnio koncentruje si
na marce. Osoby nieznajce
marek musz klikn kad
z trzech dostpnych opcji
Mizerak, Murrey oraz Mosconi
aby zobaczy, ktry ze stow
bilardowych najlepiej pasuje do
ich potrzeb. To strata ich czasu.
Ponadto opisy marketingowe
kadej z marek nie dostarczaj
informacji, ktre byyby
pomocne w ustaleniu, jaki model
jest potrzebny danej osobie.

(Na ssiedniej stronie na dole)

Mimo e strona firmy Escalade
dostarcza informacji o rnych
typach i stylach wyposaenia,
uytkownicy j przegapiaj,
gdy due znaki towarowe
zaciemniaj odnoniki do tych
danych:
Wedug mnie to byo trudne.
Zaraz po tym, jak dotarem do
producenta, droga si skoczya.
Nie mona byo przeglda
indywidualnych produktw
Nie podobao mi si to.
Kada indywidualna etykieta
produktu sprzedaje firm,
zamiast produkt.
Nie mog tego znale.
Wolabym przej na inn stron
albo skorzysta z wyszukiwarki
Google.

200

W jaki sposb strona powinna zosta zorganizowana? Mimo e

zalecamy, by struktura projektu odwzorowywaa sposb mylenia i cele uytkownikw, nie jestemy w stanie dostarczy jednej, uniwersalnej odpowiedzi na to pytanie. To, czego ludzie
potrzebuj, jest zmienne i zaley od rodzaju strony, tak wic
optymalna architektura informacji dla kadej strony wynika
z unikatowych zamiarw i celw zarwno organizacji, jak i jej
klientw. Tematyka powicona tworzeniu funkcjonalnych
struktur architektury nie tylko moe, ale i wypenia cae ksiki.
Poruszamy j w tej publikacji po to, by zaznaczy, jak due ma
znaczenie. Jeeli uytkownicy bd w stanie robi na stronie to,
co chc, bdziemy czerpa z tego korzyci.

Architektura informacji w intranecie

Zalecenie, by unika odwzorowywania na stronie struktury
firmy, dotyczy jedynie stron internetowych przeznaczonych
dla uytkownikw zewntrznych. Gdy projektuje si serwis
dla pracownikw, obowizuj inne reguy.
Personel firmy zazwyczaj wie, w jaki sposb jest ona
zorganizowana. Ponadto wiele zada realizowanych przez
czonkw zaogi powizanych jest w jaki sposb ze struktur
przedsibiorstwa. Bardzo czsto pracownicy musz przeglda
schematy organizacyjne firmy, aby zobaczy, kto jest szefem
jakiego departamentu lub w jaki sposb rne departamenty
s ze sob powizane.
Dobrym pomysem jest posiadanie w intranecie wyranej
reprezentacji struktury firmy. Niemniej jednak, nawet
w przypadku intranetu, nie jest dobrze by budowa architektur
informacji opierajc si na schemacie organizacyjnym
przedsibiorstwa. Wikszo z najlepszych stron intranetowych,
jakie mielimy okazj studiowa, uywa organizacji pracy,
sposobu przepywu zada oraz najczstszych czynnoci
pracownikw jako podstawy do budowy wasnej architektury
informacji.

Optymalizacja funkcjonalnoci serwisw internetowych

www.escaladesports.com

www.escaladesports.com

6. Nawigacja i architektura informacji

201

www.blackmountainbicycles.com

Pokazana na rysunku strona prbuje speni oczekiwania szerokiej

grupy odbiorcw poprzez pogrupowanie rowerw zarwno wzgldem
marki, jak i typu. Te z osb, ktre s zaznajomione z markami,
mog dotrze do nich dziki odpowiednim nazwom, a ci, ktrzy
przeszukuj zasoby pod ktem funkcji lub innych cech, mog
wyszukiwa wedug typu roweru. Niestety firma nie zadbaa,
by ta druga opcja bya atwo dostpna. Uytkownicy musz
najpierw wybra mark, zanim zaoferuje si im przeszukiwanie
produktw wedug takich cech, jak typ i cena.

(Na ssiedniej stronie u gry) Waciwa kategoryzacja.

Osoby korzystajce ze strony miasta San Diego w czasie naszych
testw nie miay nic przeciwko ogromnej liczbie odnonikw
umieszczonych na stronie gwnej, gdy odnoniki te s
zorganizowane i opisane krtkimi, jasnymi nagwkami. Ludzie
preferuj krtkie, zwize odnoniki ni dugie, szczegowe opisy.
Warto zwrci uwag, e podkategorie pozwalaj okreli wiksze
kategorie poprzez dostarczenie informacji o tym, co mona znale
w kadej z nich. Na przykad nie zawsze jest oczywiste, co bdzie
obejmowaa kategoria taka jak Community (spoeczno), przez co
zazwyczaj odradzalibymy jej stosowanie. Jednake na omawianej
stronie jest jasne, co znajduje si wewntrz, poniewa sze
dostarczonych podkategorii to opisuje. Niemniej jednak niniejsza
strona dodatkowo uywa oglnych podkategorii more (wicej),
co wedug nas nie jest waciwe, bo nie zapewniaj
samoczynnego objanienia.

202

Optymalizacja funkcjonalnoci serwisw internetowych

www.sandiego.gov

www.cummins.com

Niewaciwa kategoryzacja. Uytkownicy,

ktrzy przetestowali t stron, oczekiwali,
e informacje dotyczce technologii ogniw
paliwowych znajd w menu Products (produkty),
a nie w Who We Are (kim jestemy), gdzie
znajduje si to na ostatniej pozycji. Ten bd
w sposobie zorganizowania powodowa,
e ludzie trudzili si lub uznawali, e informacja
ta nie zostaa w ogle zamieszczona:

Teraz si zgubiem Nie mam adnej pomocy.

I nie czuj, bym mia do dyspozycji jakiekolwiek
opcje. Musz przeglda ca stron. Nieatwo
jest znale te informacje w grnych kolumnach
(elementach globalnej nawigacji).
Szukam kategorii dotyczcej ogniw paliwowych.
Nie widz jej w pozycji Products.
To zajo zbyt duo czasu!.

6. Nawigacja i architektura informacji

203

W momencie, gdy
nawigacja ulega
diametralnej zmianie przy
przejciu z jednej strony
na drug, uytkownicy
musz przenie sw
uwag z uywania strony
na rozeznanie, jak dziaa
nawigacja. Serwisy, ktre
nie s wyposaone
w jednolit nawigacj,
powoduj, e uytkownik
czuje si niepewnie.

Nawigacja musi by jednolita

Konsekwencja to podstawowe zaoenie nawigacji. Utrzymanie
jednolitej struktury nawigacji pomaga ludziom wizualizowa
ich biec lokalizacj oraz opcje i zminimalizowa zgadywanie. Elementy nawigacyjne peni funkcj szczebli, ktre umoliwiaj ludziom przejcie z jednego obszaru na drugi.
Zmiana sposobu nawigacji to jak usuwanie tyche szczebli
w momencie, kiedy uytkownicy wci s w powietrzu. Kiedy
wylduj, to w miejscu, ktrego si nie spodziewali. Nawigacja,
ktra wczeniej znajdowaa si z lewej strony, teraz moe by
porodku, a kategorie ulegy zmianie. Przycisk Wstecz nie dziaa
i nie ma atwej drogi, aby wrci na wczeniejsze strony.
W momencie, gdy nawigacja ulega diametralnej zmianie przy
przejciu z jednej strony na drug, uytkownicy musz przenie sw uwag z uywania strony na rozeznanie, jak dziaa
nawigacja. Serwisy, ktre nie s wyposaone w jednolit nawigacj, powoduj, e uytkownik czuje si niepewnie.
Due serwisy internetowe, ktre zawieraj wiele podstron lub
przejmuj wiele witryn, cechuj si tym, e regularnie popeniaj wspomniany bd. Kada z podrzdnych witryn jest stworzona zazwyczaj przez inn grup osb oraz ma swoj wasn
organizacj, wygld i postrzeganie. Jeeli takie witryny poczone s ze sob na chybi trafi, odczucia uytkownikw s
okropne. Czsto musz oni wielokrotnie da tego samego, poniewa kada ze stron dziaa niezalenie. Na przykad serwisy
korporacyjne s rozczone, gdy sekcje dla inwestorw, prasy
oraz produktw posiadaj wasny schemat nawigacji i na dodatek wygldaj zupenie inaczej.
Dobrze zorganizowana nawigacja jest przewidywalna, dziki
czemu uytkownicy czuj si komfortowo podczas przegldania strony. Nie wymaga od nich nauki lub zapamitywania czegokolwiek, gdy oddaje ich wyobraenia o tym, jak informacja
powinna by reprezentowana w internecie. Jest sensowna, uporzdkowana i nie cechuje j adna lub prawie adna dwuznaczno. Uytkownicy mog przechodzi na kolejne strony, cofa
si, eksplorowa stron i czu pewno, e to, co robi, nie spowoduje, i zgubi drog.

204

Optymalizacja funkcjonalnoci serwisw internetowych

www.pixar.com

Prosty w formie, globalny obszar nawigacji w grnej czci witryny

wytwrni Pixar pozostaje widoczny i jednolity na wszystkich
stronach. Gdziekolwiek by by uytkownik, wie, gdzie szuka
rnych opcji nawigacyjnych. Nasi testerzy czuli si na tej stronie
pewnie i mieli pewno, e zawsze mog wrci do miejsca,
z ktrego rozpoczli:
Wszystko jest po prostu wywietlone na grze. Nie trzeba si
rozglda wok. Ustawienie i rozoenie byo bardzo dobre,
gdy oczy nie musz wdrowa po caym ekranie.
Cokolwiek si klika, wydaje si, e jest wzajemnie ze sob
powizane. Strona sprawia wraenie atwej w obsudze.

6. Nawigacja i architektura informacji

205

www.ssa.gov

206

Optymalizacja funkcjonalnoci serwisw internetowych

(Na ssiedniej stronie) Czciowo

pokrywajce si obszary treci i niespjna
nawigacja na stronie U.S. Social Security
(amerykaski urzd ds. socjalnych) s powodem
bdw. Wybieranie rnych, cho brzmicych
podobnie, cieek wywouje rne rezultaty. Na
przykad odszukanie swojego wieku
emerytalnego jest atwe, gdy na stronie gwnej
wybierze si opcj Plan Your Retirement (zaplanuj
swoj emerytur). Niemniej jednak, gdy kto
wybierze inn drog i kliknie Retirement Planner
(planista emerytury), trudniej bdzie mu znale
granic wieku emerytalnego. Odnonik Find my
retirement age (znajd mj wiek emerytalny)
dostpny jest w pierwszej z przytoczonych opcji,
ale nie w drugiej, mimo e obie wygldaj jak
miejsca, w ktrych mona planowa swoj

emerytur. Porwnajmy oba ekrany i zwrmy

uwag na czciowo pokrywajce si moliwoci
wyboru. Tak nieuporzdkowana architektura
informacji powoduje, e ludzie zapominaj, co
kliknli i jakie maj jeszcze moliwoci wyboru, co
prowadzi do nastpujcych komentarzy:
Wydawao mi si, e odnalezienie granicy wieku
emerytalnego to co atwego, ale nie udao mi si
jej zlokalizowa. Poczuem si gupio.
Serwis mgby by bardziej przyjazny dla
uytkownika. Musi myle, jakby by nowym
uytkownikiem.

www.ssa.gov

Kiedy odwiedzajcy t stron klikn Learn About Factors that

Affect Your Retirement Benefis (dowiedz si wicej o czynnikach,
ktre maj wpyw na twoj emerytur), opcje wyboru z poprzedniego
ekranu znikn i zostan zastpione przez inne, cho zwizane
z poprzednimi. To byo przyczyn zamtu wrd naszych
uytkownikw, ktrzy brali udzia w tecie. Na przykad nie mieli
pewnoci, czy Calculate My Benefits (oblicz moje zyski) znaczy
to samo co Benefits Calculators (kalkulatory zyskw). Cay ciar
okrelenia tego, czy odnoniki kryj za sob tak sam, czy now
informacj, spoczywa na uytkownikach, ktrzy musz usi
i klikajc przejrze wszystkie strony.

6. Nawigacja i architektura informacji

207

www.bathandbodyworks.com

Tematy pod gwnymi kategoriami na tej stronie rozszerzaj si

i kurcz w zalenoci od tego, ktra z nich zostaa wybrana przez
uytkownika. Kady z trzech dostpnych paneli posiada inny tytu
oraz styl nawigacji. Te ekstremalne zmiany w systemie nawigacji
dezorientoway naszych uytkownikw:
Gubi si. Nie wiem, gdzie byem w danym momencie.
Strona ma trzy paski. atwiej byoby, gdyby istniaa jedna strona
gwna zamiast koniecznoci klikania w trzy miejsca, by dotrze
do wikszej iloci informacji.
To frustrujce, bo nie mona odnale tego, czego si szuka.
Nie pamitam nawet, gdzie kliknem. Gdzie ja w ogle jestem?.
To, gdzie znajduj si poszczeglne rzeczy, nie byo oczywiste.
Trzeba byo wyszukiwa i walczy o informacj bardziej ni na
innych stronach.

(Na ssiedniej stronie) Niespjny schemat

nawigacji na stronach firmy Nestl spowodowa,
e nasi uytkownicy mieli trudnoci, by odnale
swoj drog. Globalna nawigacja ulega zmianie
w rnych sekcjach witryny. Na przykad
nawigacja gwna na stronie All About Nestl
(wszystko o Nestl) pojawia si u gry i z boku.
Ale ju na stronie Nutrition (odywianie) znajduje

208

si jedynie na grze, lecz rozdzielona na dwa

poziomy. Oto opinie uytkownikw o tej stronie:
Nie jest to strona, na ktr wrc, gdy nawigacja
na niej jest dziwna i trudna. Podoba mi si inny
styl witryny, szczeglnie boczny panel, w ktrym
mona oglda rne rzeczy. Tutaj znajduje si
kilka grnych paskw i inne rzeczy maj miejsce
na kadym z nich. Trzeba by wszdzie.

Optymalizacja funkcjonalnoci serwisw internetowych

www.nestle.com

Na stronie nie mog znale tego, po co

przyszedem. Jeeli szukabym przekski,
opucibym witryn, bo nie widz jej tu.
Zmarnowaem duo czasu, szukajc tego,
czego potrzebowaem.

Jest tu tak duo informacji. Ukoczenie zadania

zajo mi nieco wicej czasu, ni pierwotnie
przypuszczaem. Mona ulec dezorientacji,
prbujc znale kilka prostych rzeczy.

6. Nawigacja i architektura informacji

209

Naley unika miych

i wymylnych systemw
nawigacji. Ludzie nimi
gardz. Warto wic
oszczdza kreatywno
i wykorzystywa j
w miejscach,
na ktrych uytkownikom
naprawd zaley.

Nawigacja strze si mody

Nawigacja to droga do celu, jej jedyn funkcj jest da szybko
ludziom to, czego szukaj. Im bardziej bdzie efektywna, tym
wiksze prawdopodobiestwo, e uytkownicy pozostan zainteresowani stron.
Gwne tematy powinny by niezmienne i pojawia si jednoczenie, dziki czemu odwiedzajcy mog atwo i szybko je
przejrze. Czekanie, a nawigacja si zaaduje lub zmieni, to dla
nich strata czasu. Jakakolwiek forma nawigacji dynamicznej
koniecznie musi by atwa w uywaniu. Elementy menu, ktre
s zbyt czue i zmieniaj si przy najmniejszym poruszeniu myszy, mog by bardziej nieporczne ni przydatne. A dodatkowo
pogrzebi szans zrobienia interesu z osobami starszymi, niepenosprawnymi i nowymi uytkownikami sieci.
Ludzie nie szukaj gry w chowanego, wic nie wolno ukrywa
przed nimi elementw menu nawigacyjnego. Pogo za celem
do kliknicia lub konieczno poruszania kursorem po caym
ekranie po to, by znale co do kliknicia (gra w sapera), nie
jest czym, co sprawia rado. Jeszcze wicej trudnoci sprawi
osobom z ograniczon sprawnoci ruchow lub upoledzon
rk, dla ktrych kontrolowanie myszy to due wyzwanie. Kady duo szybciej uywa opcji, jeeli s atwo zauwaalne.
Podsumowujc: naley unika miych i wymylnych systemw
nawigacji. Ludzie nimi gardz. Warto wic oszczdza kreatywno i wykorzystywa j w miejscach, na ktrych uytkownikom naprawd zaley.

Dzieciaki lubi gr w sapera

Z naszych bada wynika, e dzieci w wieku
od 6 do 12 roku ycia lubi gr w sapera,
tak wic jest to jedyny przypadek, w ktrym
rozmieszczanie elementw nawigacyjnych po
caym ekranie jest uzasadnione. Dzieci czsto
traktuj rodowisko internetu jak gr i doceniaj
moliwo odkrywania go i jego sekretw. Co
wane, nie maj nic przeciw przemieszczaniu
kursora myszy po caym dobrze przygotowanym
rysunku, aby zobaczy, co si znajduje pod nim.
Jednake gdy wchodz w wiek dorastania,
trac ju swoje zainteresowanie tego typu
form nawigacji. Nastolatki cechuj si du

210

niecierpliwoci i oczekuj szybkich rezultatw

podczas swojej pracy ze stronami internetowymi.
Oglnie mwic, wskazwki dotyczce
funkcjonalnoci, ktre odnosz si do osb
w wieku kilkunastu lat, rni si nieco od tych
przeznaczonych dla dorosych, a te dla dzieci
rni si diametralnie. Oczywicie, mona znale
wiele podobiestw, ale jeli grup odbiorcw
maj by najmodsi uytkownicy, zalecamy
przeprowadzenie osobnych bada funkcjonalnoci
z uyciem grupy osb wanie w tym modym
wieku. Jeeli nie jest zaznaczone inaczej, wszystkie
reguy opisane w tej ksice dotycz dorosych.

Optymalizacja funkcjonalnoci serwisw internetowych

www.wynnlasvegas.com

Menu gwne na tej stronie przemieszcza si automatycznie

w poprzek strony w sposb wolny i jednostajny. Jeeli kto chce
na przykad dokona rezerwacji, musi poczeka, a waciwa
pozycja si pojawi. Mona przyspieszy ten proces, przesuwajc
wskanik myszy na jedn z dwch strzaek, ale kto tak naprawd
chce sobie tym zawraca gow? Strony internetowe powinny
osiga elegancki wygld, ale nie kosztem czasu uytkownikw.

6. Nawigacja i architektura informacji

211

www.bathandbodyworks.com

Stary projekt. Nasi uytkownicy byli sfrustrowani faktem, e

oferowane produkty zmieniay swoje pooenie wraz z tym, jak oni
zmieniali pooenie myszy na ekranie. Niektrzy z nich nie mieli
pojcia o tym, e to oni kontroluj ten ruch! Oglnie rzecz ujmujc,
uytkownicy nie byli zadowoleni, e musz manewrowa mysz
wok poza jeden obszar, by zdoby informacje. Niektrzy z nich
nie mieli do cierpliwoci, by dotrze w taki sposb do produktw,
i mwili, e w normalnych okolicznociach by si poddali:
Produkt przemieszcza si zbyt mocno. Kiedy prbujesz najecha
na dany element, on zmienia swoje pooenie. To sprawia,
e czujesz si zdezorientowany. Nie podoba mi si to.
Frustrujce jest to, e produkt ucieka, kiedy prbujesz si
do niego zbliy.

212

Optymalizacja funkcjonalnoci serwisw internetowych

www.bathandbodyworks.com

Nowy projekt. Firma Bath & Body Works przeprojektowaa swj

serwis, wyeliminowaa kilka problemw z funkcjonalnoci
znalezionych przez nas podczas testw, dziki czemu jest on
lepszy. Strony statyczne zastpiy wymylny dynamiczny model
interaktywny. Ludzie nie musz wic duej przemieszcza
wskanika myszy nad rne rysunki, by otrzyma opis produktu.
Zamiecilimy zrzuty ekranu pokazujce poprzedni projekt,
poniewa jego skazy wci mona zauway na innych stronach.
Kady, podobnie jak firma Bath & Body Works, moe odrobi
swoj lekcj i zmieni je. I w przeciwiestwie do nich by moe
obejdzie si bez utraty czci klientw!

6. Nawigacja i architektura informacji

213

www.dimewill.com

www.atlantis.com

214

Optymalizacja funkcjonalnoci serwisw internetowych

(Na ssiedniej stronie u gry)

Ukryte etykiety nawigacyjne
zbijay uytkownikw z tropu.
Na stronie na przykad nie wida,
by mona byo w cokolwiek
klikn, dopki uytkownicy
nie przesun swoich wskanikw
na pokazujce si etykiety
tekstowe. Niektre z osb
biorcych udzia w tecie nie
zdaway sobie z tego sprawy
i zastanawiay si, co waciwie
maj zrobi na tej stronie.
Ludzie preferuj widoczne opcje
wyboru, dziki czemu mog je
przejrze za jednym zamachem.
(Na ssiedniej stronie na dole)
Panel nawigacyjny tego serwisu
pojawia si jedynie wwczas,
gdy uytkownicy przemieszcz
wskanik myszy na graficzny
fragment umieszczony na
rodku. Nasi testerzy wzdragali
si na sam myl, e bd
musieli wywoa menu za
kadym razem, gdy bd
go potrzebowa.

Ograniczanie nieadu
oraz unikanie powtrze
Nie naley umieszcza wielu obszarw nawigacji dla tego samego typu odnonikw. Zduplikowane lub trudne do rozrnienia kategorie powoduj, e uytkownicy musz woy sporo wysiku, by zachowa kolejno. Musz oni angaowa czas
w to, by znale rnice w podobnie brzmicych nazwach. Co
wicej, przedobrzenie z liczb odnonikw poprzez rozmieszczenie tych samych elementw w wielu miejscach strony
zmniejszy prawdopodobiestwo tego, e uytkownicy je zauwa. Prawda jest taka, e im mniej obiektw na stronie, tym
wiksza szansa, e zostan one zauwaone. Jeli w serwisie
umieci si zbyt wiele rywalizujcych ze sob elementw, kady
z nich straci na wanoci.
Najlepiej jest jasno okreli pewn cech w jednym miejscu.
Ograniczenie powtrze minimalizuje niead, przez co atwiej
jest znale podane informacje.

Nie da si nabra na duplikaty

Klienci czsto mwi nam, e chcieliby
zatrzyma powielone odnoniki zarwno
na swoich stronach gwnych, jak i w innych
miejscach, gdy kady odnonik generuje
znaczcy ruch. Czasami pokazuj nam statystki
mwice, e ruch do strony ronie, gdy
odnoniki na niej s zduplikowane.
Chocia dane takie mog wydawa si nie do
podwaenia, w rzeczywistoci wprowadzaj
w bd. Oczywicie, kady z tych odnonikw
otrzymuje kliknicia, ale to wcale nie znaczy,
e jeli odnonik nie byby powielony, to
uytkownicy nie odnaleliby szukanego celu.
Powiedzmy, e te same odnoniki znajduj si
na grze i dole witryny. Uytkownicy czsto
rozwaaj kliknicie grnego odnonika, ale
postanawiaj przed tym sprawdzi, co znajduje
si w niszej czci witryny. Kiedy dojd na sam
d witryny, mog klikn w znajdujcy si
tam odnonik, ale gdyby go tam nie byo,
przewinliby stron do gry i kliknli w odnonik
znajdujcy si u gry.

Prawd jest to, e duplikowanie odnonikw

moe zwikszy oglny ruch do elementu
docelowego, ale dzieje si tak dlatego, e dajc
odnonikowi wicej miejsca, bardziej promuje
si dany element ni pozostae. Uczynienie
takiego odnonika wikszym lub umieszczenie
go w bardziej widocznym miejscu przyniosoby
dokadnie taki sam skutek bez jednoczesnego
wywoywania dezorientacji. Co wicej, kiedy
promuje si jeden z elementw, skutkuje to
mniejszym ruchem do pozostaych. Kady
uytkownik ma stay zakres uwagi, jak
powica stronom internetowym, i jeeli wicej
uwagi przycigniemy do jednego z elementw,
ucierpi na tym pozostae.
Tak wic powielane odnoniki wywouj wicej
szkody ni poytku. Jeeli nawet zwikszy si
ruch do okrelonej witryny, ucierpie mog
pozostae strony ze wzgldu na to, e
uytkownicy ulegli dezorientacji i nie mogli
znale tego, czego szukali.

6. Nawigacja i architektura informacji

215

www.usps.com

www.sandiego.gov

216

Optymalizacja funkcjonalnoci serwisw internetowych

(Na ssiedniej stronie u gry) Zduplikowane odnoniki

niepotrzebnie skomplikoway strony United States Postal Service
(Urzd pocztowy Stanw Zjednoczonych). Opcje dostpne
w rodkowej czci witryny s takie same jak te dostpne u gry.
(Na ssiedniej stronie na dole) Strona San Diego w grnej
czci powtarza zakadki, ktre dostpne s w gwnym obszarze
treci. Lepiej byoby pokaza nawigacj w jednym, oczywistym
miejscu, i zarezerwowa pozosta przestrze na jak wan
tre lub pozostawi j pust.

www.escaladesports.com

Strona firmy Escalade Sports oferuje podwjny sposb nawigacji

za pomoc listy odnonikw tekstowych oraz grafiki (z wybieraniem
za pomoc pokrta). Wikszo naszych uytkownikw wybierao
metod tekstow, poniewa odnoniki byy atwiejsze do
przegldania. Pozostali w ostatecznoci sigali do narzdzia
graficznego, ale byli zawiedzeni, gdy odkrywali, e obie metody
prowadz do tych samych informacji. Co za strata czasu!

6. Nawigacja i architektura informacji

217

Naley pomaga
uytkownikom atwo
rozrni odnoniki
poprzez nadawanie im
bardziej informujcych
nazw. Zamiast nazywa
odnonik na przykad
Wicej, lepiej jest
powiedzie uytkownikom,
co wicej otrzymaj
po jego klikniciu.

Nazwy odnonikw i etykiet

liczy si dokadno
Naley upewni si, e odwiedzajcy mog atwo zrozumie
etykiety nawigacyjne. Kiedy osoba nawiguje pomidzy stronami zazwyczaj ignoruje due bloki z treci i celuje w odnoniki,
by ustali znaczenie strony. eby maksymalizowa przejrzysto, nazwy odnonikw powinny by moliwie krtkie i jednoznaczne. Mdrze sformuowane sowa lub nazwy kategorii s
problematyczne, gdy ludzie ich nie rozumiej. Jeeli na stronie
musz znale si pomysowe nazwy, zawsze trzeba wyjani
ich znaczenie, gdy uytkownicy maj tendencj do niezwracania uwagi na sowa, ktre nie maj dla nich sensu.
Warto zawa swoje odnoniki, rozpoczynajc ich nazw od
sowa kluczowego lub informacyjnego. Naley usun zbdne
wyrazy, takie jak powtarzajca si w kadym odnoniku nazwa
firmy. Taka forma reklamy niepotrzebnie komplikuje interfejs.
Odnoniki, ktre rozpoczynaj si od identycznych lub powtarzalnych sw, zmuszaj ludzi do uwanego czytania caej ich
nazwy po to, by mogli wychwyci rnice.
Naley unika rwnie w nazwach odnonikw instrukcji oglnych, takich jak Kliknij tu. Zamiast tego lepiej jest pomaga
uytkownikom atwo rozrni odnoniki poprzez nadawanie
im bardziej informujcych nazw. Zamiast nazywa odnonik na
przykad Wicej, lepiej jest powiedzie uytkownikom, czego
wicej otrzymaj po jego klikniciu.
(Na ssiedniej stronie u gry) Stary projekt. Mao
precyzyjne sowa oraz etykiety kategorii w stylu discover
(odkryj), learn (poznaj) lub live (yj) irytoway naszych testerw.
Niektrzy zastanawiali si, co oznacza live: with our products
(yj: z naszymi produktami). Haso to, nawet z opisem, jest
wywiechtane i nieczytelne. Haso w stylu jak zdrowo y
dostarczyoby znacznie wicej uytecznej informacji.
Chwytliwe hasa s bezuyteczne, jeli nie pozwalaj
uytkownikom przewidzie, co si pod nimi kryje:
Tytuy nie s tak naprawd tym, co sdziem. Na przykad Head to
Toe Solutions (rozwizania od gowy do palcw) powinno w moim
mniemaniu dotyczy mycia ciaa, lub czego w tym rodzaju.
Uwaam, e ciko jest to zrobi. Na stronie nie ma dostatecznej
liczby kategorii, aby szybko odnale to, czego si szuka.
(Na ssiedniej stronie na dole) Nowy projekt. Po zakoczeniu
przez nas testu, o ktrym mwilimy przy okazji poprzedniego
rysunku, firma Bath & Body Works przebudowaa swoj stron.
Teraz strona domowa zamiast mao zrozumiaych nazw kategorii
takich jak learn (poznaj) lub live (yj) posiada nazwy duo bardziej
bezporednie, takie jak Face (twarz), Hair (wosy) oraz Articles
& Advice (artykuu i porady). Dobry ruch.

218

Optymalizacja funkcjonalnoci serwisw internetowych

www.bathandbodyworks.com

www.bathandbodyworks.com

6. Nawigacja i architektura informacji

219

www.bathandbodyworks.com

Firma Bath & Body Works nie moe przesta. W czasie, kiedy
koczylimy pisa ten rozdzia, firma wypucia kolejn wersj
projektu strony, tym razem z jeszcze bardziej opisowymi etykietami
elementw nawigacyjnych. Chocia uwaamy, e wygld opisw
byby zbyt nieokrelony dla wikszoci witryn, w tym przypadku
wydaje nam si, e jest akceptowalny. Dodatkowo, nowa i bardziej
wyrazista etykieta Facial Skincare (pielgnacja skry twarzy) niesie
wicej informacji, przez co dziaa lepiej, kierujc uytkownikw
do produktw, ktre chc kupi.

220

Optymalizacja funkcjonalnoci serwisw internetowych

www.hmce.gov.uk

Stara strona gwna. Brytyjskie ministerstwo ds. podatkw i ce

na swojej stronie gwnej umieszcza informacje o zwrocie podatku
VAT i inne wane dla podrujcych dane, ktre znajduj si
za opisowymi odnonikami, takimi jak Your customs allowance
(dozwolone wwoenie dbr) oraz VAT refunds for visitors (zwroty
podatku VAT dla turystw). Odnoniki te dokadnie informuj
o tym, co zawieraj. Witryna w sprytny sposb umieszcza
najczciej uywane odnoniki w centralnym obszarze strony,
z dala od innych rozpraszajcych uwag elementw.

6. Nawigacja i architektura informacji

221

www.hmce.gov.uk

Nowa strona gwna. Niestety, przeprojektowany wygld strony

gwnej definitywnie obnia jej funkcjonalno, gdy nagwki,
odnoniki i nawigacja nie mwi dokadnie, co tak naprawd
oznaczaj. Czym na przykad s eVAT Services (usugi eVAT)?
Gdzie ma klikn turysta, ktry przyjecha do Wielkiej Brytanii na
wakacje i chce dowiedzie si, jak moe otrzyma zwrot swojego
podatku VAT? Na stronie mona znale wiele miejsc, gdzie
widnieje skrtowiec VAT, ale ktre z nich jest najlepsze w danym
przypadku? Na poprzedniej stronie istnia odnonik VAT refunds
for visitors (zwroty podatku VAT dla turystw), ale ju go nie ma.
Ze posunicie.
Oglnie rzecz ujmujc, jeeli zaczynamy posugiwa si nazwami,
ktre rozpoczynaj si od e lub internet, powinna wczy si
lampka ostrzegawcza. Uytkownicy wchodzcy na stron wiedz,
e s w trybie online, i nie ma potrzeby zwraca im na to wikszej
uwagi poprzez sztuczne zelektronizowanie nazw usug.

222

Optymalizacja funkcjonalnoci serwisw internetowych

www.americanheart.org

Oglny odnonik Learn more (dowiedz si wicej) rozrzucony

po caej stronie American Heart Association (Amerykaskie
Stowarzyszenie Kardiologiczne) nie pomaga w naprowadzaniu
uytkownikw na obszary ich zainteresowa. Nie mog oni szybko
przejrze wszystkich odnonikw i wychwyci sedna ich znaczenia.
Zamiast tego musz przeczyta wstp, co niepotrzebnie ich
spowalnia. Lepiej jest wyranie powiedzie uytkownikom, czego
wicej si dowiedz, zamiast denerwowa ich odnonikami, ktre
nie zawieraj adnych konkretnych informacji.

6. Nawigacja i architektura informacji

223

www.dimewill.com

Ludzie uwaaj, e trudno jest znale rnice

pomidzy nic niemwicymi nazwami kategorii
takimi jak Club (klub) lub Passbook (ksieczka
oszczdnociowa). Praktycznie nie jest moliwe

spojrzenie na opcje i rozszyfrowanie ich znaczenia

bez koniecznoci kliknicia ich. Ten typ nawigacji
wymaga od odwiedzajcego zbyt duo pracy.

(Na ssiedniej stronie u gry) Stary projekt. Pokazywana

strona spowalnia uytkownikw, poniewa pojazdy zorganizowane
s wzgldem nazw modeli. Takie rozwizanie sprawdza si jedynie
w przypadku, gdy kto jest zaznajomiony z samochodami firmy
Honda. Nasi testerzy zastanawiali si, jakie rodzaje pojazdw
reprezentoway poszczeglne modele; jaka na przykad jest
rnica midzy modelami Odyssey i S2000. Mimo e na dole
listy znajduje si odnonik All Models (wszystkie modele), ludzie
czsto go nie zauwaali.
(Na ssiedniej stronie na dole) Nowy projekt. Firma Honda
ulepszya nieco swoje kategorie nawigacji. Warto zauway, e
odnonik, ktry poprzednio nosi nazw Odyssey, teraz nazywa si
Odyssey Minivan, a S2000 zmieni si na S2000 Roadster.
Zmiany te dziaaj jak plaster. Zakrywaj ran, nie leczc choroby.
Zamiast wci wymusza na uytkownikach nawigacj opart na
modelach, lepiej byoby przebudowa cay system nawigacji tak,
by jasno przedstawia rnice pomidzy poszczeglnymi modelami.

224

Optymalizacja funkcjonalnoci serwisw internetowych

www.automobiles.honda.com

www.automobiles.honda.com

6. Nawigacja i architektura informacji

225

www.automobiles.honda.com

Witryna pokazana na tym rysunku lepiej spenia

swoje zadanie, pokazujc poszczeglne modele
wraz z cen i ich zdjciami. Rysunki pomagaj
rozpozna typ pojazdu. Niemniej jednak obrazki

s wzgldnie mae, a wiele modeli wyglda

podobnie, przez co trudno jest okreli, czy
na przykad Civic Si jest minivanem.

(Na ssiedniej stronie u gry) Ta strona poprawnie klasyfikuje

samochody, bo uywa terminologii znanej uytkownikom.
Zamiast zakada, e ludzie znaj modele samochodw firmy
Ford, uywane s proste i zrozumiae terminy, takie jak Pickup
Trucks (pciarwki) i Minivans/Vans (minivany/samochody
rodzinne), ktre znacznie lepiej speniaj swoje zadanie.
(Na ssiedniej stronie na dole) Typy podg dostpne na tej
witrynie posegregowane s wedug linii produktu, a nie jego cech.
Taka struktura moe wydawa si logiczna dla pracownikw firmy
Anderson, ale nie dla jej potencjalnych klientw, ktrzy szukaj
produktw, posugujc si ich atrybutami. Nazwy typu Appalachian
lub Biltmore mog by dla ludzi zupenie niezrozumiae. Kiedy
projektanci uwaaj, e konieczne jest dostarczenie instrukcji,
w jaki sposb nawigowa po stronie, to jest to znak, i interakcja
na niej nie dziaa poprawnie. Lepiej jest wychodzi naprzeciw
oczekiwaniom uytkownikw, ni oczekiwa, e oni wyjd
naprzeciw naszym oczekiwaniom.

226

Optymalizacja funkcjonalnoci serwisw internetowych

www.ford.com

www.andersonfloors.com

6. Nawigacja i architektura informacji

227

Im dusza lista menu,

tym trudniej j kontrolowa.
Im dalej uytkownik musi
schodzi w menu, tym
wiksza szansa, e zgubi
swoj pozycj.

Pionowo rozwijane menu

krtkie jest pikne
Rozwijane pionowo menu stay si bardzo popularnym narzdziem, gwnie dlatego, e pozwalaj zaoszczdzi miejsce na
ekranach z ograniczon powierzchni nieruchom. Przez lata
uytkownicy uczyli si ich uywa. Chocia rozwijane pionowo
menu ma wiele zalet, to nie znaczy, e nie powoduje problemw, szczeglnie wwczas, gdy jest za dugie. Im dusza lista
menu, tym trudniej j kontrolowa. Im dalej uytkownik musi
schodzi w menu, tym wiksza szansa, e zgubi swoj pozycj.
Czsto lepiej jest prezentowa dugie listy w standardowym formacie tekstowym, ktry zapewnia wicej miejsca na opisy, co
z kolei pomaga uytkownikom rozpoznawa rnice midzy
poszczeglnymi opcjami. Pionowo rozwijane menu maj tendencj do bycia wskimi, przez co zapewniaj mao miejsca dla
opisowych nazw kategorii. Zamiast ryzykowa i uywa dugiej
listy elementw, ktrych znaczenia mog si czciowo pokrywa
lub by niejasne, lepiej pozwoli uytkownikom klikn na gwny nagwek i nastpnie przenie ich na inn stron, gdzie znajduje si czytelna lista moliwych opcji z waciwym opisem.

Menu wielopoziomowe
mniej oznacza wicej
(Na ssiedniej stronie u gry)
Wielopoziomowe menu na tej
stronie irytowao uytkownikw,
poniewa sprawiao problemy
z kontrol. Przypadkowe
przesunicie wskanika myszy
tu poza obszar kategorii
produktu powodowao, e
niespodziewanie pojawiao si
kolejne, inne menu.
(Na ssiedniej stronie na dole)
Pokazana tutaj strona uywa
rozwijanych menu w sposb
rozsdny, gdy s one ograniczone
jedynie do dwch poziomw.
Dodatkowo witryna wykorzystuje
nawyki uytkownikw do
przecigania wskanika w linii
prostej przy wykonywaniu
wyboru opcji. Menu nie znika
take w sytuacji, gdy kto
wyjedzie kursorem nieznacznie
poza obszar menu.

228

Wielopoziomowego menu trzeba uywa oszczdnie i nigdy nie

naley uywa wicej jak dwch poziomw. Wiksza liczba poziomw zakrywa ekran i jest trudna w obsudze. Poziom trzeci
zazwyczaj jest oznak kopotw, a czwarty praktycznie zawsze
koczy si tym, e nie mona go uywa. W menu, ktre maj
zbyt wiele poziomw, problemem staje si to, e ze wzgldu na
cigle rozwijane i ukrywane podmenu trudno jest zlokalizowa
poszukiwan opcj.
Ludzie zazwyczaj pracuj z zaoeniem, e najkrtsz drog
midzy dwoma punktami jest linia prosta. Tak wic w przypadku wielopoziomowych menu maj w zwyczaju przeciga
wskanik myszy na skos, bezporednio do menu podrzdnego.
W tym momencie zazwyczaj gubi oni swoj pozycj i doznaj
frustracji, gdy musz ponownie wybiera swoje opcje. Problem
ten jest jeszcze bardziej uciliwy na laptopach, poniewa manipulowanie wskanikiem i wykonywanie operacji przecignij
i upu za pomoc panelu dotykowego jest jeszcze bardziej
nieporczne.
Naley upewni si, e dynamiczne menu znajduje si dostatecznie dugo na stronie, by ludzie mogli dokonywa swoich
wyborw. Kapryne rozwizania, ktre wymagaj precyzji oraz
otwieraj si i zamykaj przy najmniejszym poruszeniem
mysz, s trudne do kontrolowania. Zaawansowani i dowiad-

Optymalizacja funkcjonalnoci serwisw internetowych

czeni uytkownicy prawdopodobnie poradz sobie z kontrolowaniem dynamicznych menu bez wikszych problemw, ale
przecitny uytkownik bdzie si bardzo mczy.

www.escaladesports.com

www.americanheart.org

6. Nawigacja i architektura informacji

229

www.blackmountainbicycles.com

www.blackmountainbicycles.com

230

Optymalizacja funkcjonalnoci serwisw internetowych

(Na ssiedniej stronie u gry)

Stary projekt. Tu pokazany
jest przykad nadgorliwego
wykorzystania wielopoziomowego
menu. Cztery poziomy
rozwijanych paneli zakrywaj
wikszo obszaru strony,
utrudniajc w ten sposb
uytkownikowi kontrolowanie
ruchw. Bardziej prawdopodobne
jest pojawienie si bdw,
gdy projekt wymaga od
odwiedzajcych koncentracji
i zrcznoci manualnej.
Osoby, ktre opuszcz pozycj
lub wyjad poza menu, musz
za kadym razem rozpoczyna
od nowa.
(Na ssiedniej stronie na dole)
Nowy projekt. Nowy projekt
firmy Black Mountain ulepszy
stron ze wzgldu na mniejsz
liczb poziomw z czterech do
trzech. Mimo e jest to pewna
poprawa, dua liczba menu
nadal zakrywa znaczn cz
witryny i wymaga od
uytkownika znaczcego
manewrowania wskanikiem.

Naley upewni si, e

kada osoba jest w stanie
atwo okreli, ktre
elementy mona klika,
a ktrych nie. Nie wolno
zmusza ich do tego,
by musieli klikn kady
element na ekranie,
by sprawdzi, ktre z nich
s odnonikami.

Czy mog to klikn?

Kiedy ludzie nie wiedz, ktre elementy mona klikn, musz
wykonywa wicej pracy i zgadywa. atwo mog pomin to,
czego szukaj, porzuci stron przedwczenie lub zaoy, e
odkryli ju wszystkie opcje, gdy w rzeczywistoci tak nie jest.
Standardowy paradygmat podkrelania odnonikw i pisania
ich na niebiesko zapewnia widoczne oznakowanie ich funkcji.
Nie naley wic uywa koloru niebieskiego do kolorowania
zwykego tekstu, gdy wci kojarzy si on gwnie z elementem, ktry mona klika.
Mimo to niebieski nie zawsze jest najlepszym kolorem do kolorowania odnonikw. W niektrych sytuacjach moe on nie pasowa do kolorystyki marki lub by nieodpowiedni ze wzgldw czysto estetycznych. Rwnie elementy pogrubione
wskazuj, e mona je klikn. Ponadto, jeli chodzi o sposoby
wskazywania elementw, ktre mona klika, dobr praktyk
jest podwietlanie tekstu, kiedy przesunie si na niego wskanik myszy. Jednake nie powinien to by jedyny z dostpnych
sposobw na wskazanie miejsc do klikania, gdy uytkownicy
musieliby wwczas przeszukiwa ca stron, aby znale odnoniki.
Podobn funkcj peni elementy graficzne, ktre w jakikolwiek sposb si wyrniaj. Uytkownicy zazwyczaj zauwaaj
standardowe ksztaty przyciskw, podobnie jak inne elementy,
ktre zazwyczaj uywane s w interfejsach, i zakadaj, e mona je klika.
Podsumowujc, naley upewni si, e kada osoba jest w stanie atwo okreli, ktre elementy mona klika, a ktrych nie.
Nie wolno zmusza uytkownikw do tego, by musieli klikn
kady element na ekranie, by sprawdzi, ktre z nich s odnonikami. Tak wic odnoniki na stronie powinny by obrobione
wizualnie tak, by wywoyway skojarzenie, i mona je klikn
mona uy na przykad kolorowej czcionki lub podkrelenia. Nie wolno cakowicie ufa kursorowi w ksztacie doni
jako elementowi wskazujcemu odnonik. Nawet dowiadczeni uytkownicy nie zawsze zauwa, kiedy standardowy kursor
zmieni si w do, a dla nowicjuszy oba oznaczaj dokadnie
to samo.

6. Nawigacja i architektura informacji

231

Przystpno
Przystpno bya pierwotnie terminem
psychologicznym uywanym do okrelenia akcji
moliwych do zaistnienia midzy ludmi lub
zwierztami i wiatem. Nasz kolega, Donald A.
Norman, w swojej ksice The Design Of
Everyday Things zastosowa ten termin do
zdefiniowania odczu ludzi wzgldem wiata.
Mwic oglnie, termin przystpno dotyczy
wszystkiego, co mona zrobi z obiektem.
Na przykad krzeso nadaje si do siedzenia na
nim, przycisk umoliwia wcinicie, a rczka
umoliwia przekrcenie lub pocignicie
w zalenoci od tego, jak jest zaprojektowana.
Najwaniejsz rzecz, jak w kontekcie
funkcjonalnoci zauway Donald, jest to,
e dostrzeona przystpno jest nawet
waniejsza ni prawdziwa. Jego najsynniejszym
przykadem s drzwi drzwi umoliwiaj
pchnicie lub pocignicie, w zalenoci od
tego, w ktr stron si otwieraj. Kiedy osoba
od razu wie, czy drzwi naley pocign lub
pchn, to jest to dobry projekt interfejsu
uytkownika. Innymi sowy, uytkownik moe
zauway przystpno drzwi, po prostu
patrzc na nie. Nie musi z nimi walczy, aby
odkry, w jaki sposb ich uywa. (I na pewno
nie musi czyta instrukcji obsugi, aby je
otworzy. Kade drzwi, ktre dostarczane
s z wyran instrukcj mwic pchnij
lub pocignij, s sabo zaprojektowane).
W interfejsie uytkownika opartym na ekranie
musimy nieco odwrci koncepcj przystpnoci.

(Na ssiedniej stronie u gry) Podczas naszych

testw uytkownicy tej strony narzekali, e nie byo
sposobu na zoenie przez internet wniosku
o zaoenie konta; myleli, e naley skontaktowa si
z przedstawicielem banku. Nie zdawali sobie sprawy,
e przyciskiem by may pomaraczowy prostokcik.
Poniewa jest on paski, ludzie zakadali, e jest to
zwyka grafika statyczna, ktrej zadaniem jest
przyku uwag do znajdujcego si obok odnonika.
Porwnujc oba odnoniki, dochodzi si do wniosku,
e podkrelony i pokolorowany tekst sprawia silne
wraenie, i dany element mona klikn, podczas
gdy paskie pole nie. To ostatnie wyglda jak element
czysto dekoracyjny. Jednake gdy prostokt zostanie
poczony z czym, co gwarantuje silne wraenie
przystpnoci, cao prawie na pewno zawsze
bdzie przykuwa uwag uytkownikw.

232

W pewnym sensie kada kropka na ekranie

umoliwia kliknicie, poniewa mona j
wskaza kursorem i klikn przyciskiem myszy.
W praktyce jednak mwimy, e co umoliwia
kliknicie, jeli po tej czynnoci wykonywana
jest jaka akcja. Tak wic kwesti kluczow jest
to, czy element, ktry mona klikn, sprawia
wraenie przystpnoci. Innymi sowy, czy jest
moliwe, by uytkownik po prostu patrzc na
element, przewidzia, e jego kliknicie
spowoduje jak akcj? Jeli tak, projekt ma
zazwyczaj znacznie wiksz funkcjonalno,
ni ten, ktry wymaga zgadywania, ktre
elementy mona klikn.
Omawianie tej idei zazwyczaj sprowadza si
do tego, czy element, ktry mona klikn,
dostatecznie mocno przekonuje uytkownika
o swojej funkcji. To determinuje, czy osoba
moe na kadym ekranie atwo rozpozna
dostpne moliwoci. Ale istnieje rwnie drugi
aspekt. Czy strona, na ktrej nie ma elementw,
ktre mona klikn, pokazuje uytkownikowi
elementy, ktre mona klikn? Jeli tak, bdzie
on wierzy, e ma wybr, ktrego tak naprawd
nie ma, co prowadzi bdzie do jego
dezorientacji w momencie, kiedy co kliknie,
a kliknicie nie bdzie wywoywa adnej akcji.
Aby unikn tego problemu, nie wolno korzysta
z elementw grafiki przypominajcych przyciski,
jeeli nie mona ich klikn. I nie naley
kolorowa tekstu na niebiesko ani go
podkrela, chyba e jest on odnonikiem.

(Na ssiedniej stronie na dole)

Wypunktowana na niebiesko lista wyglda
jak odnoniki, przez co uytkownicy testowi,
ktrzy na ni klikali, byli zakopotani tym, i nie
byli przenoszeni na now stron. Brak reakcji
powodowa, e cz osb zacza uwaa,
i strona w ogle nie dziaa. Niebieski kolor
wywouje silne postrzeganie przystpnoci
elementu. Nie wolno go uywa do oznaczania
elementw, ktrych nie mona klikn.

Optymalizacja funkcjonalnoci serwisw internetowych

www.bankone.com

www.san-diego-vision.com

6. Nawigacja i architektura informacji

233

www.bk.com

Nasi testerzy nie wiedzieli, e nagwki na tej stronie byy aktywne,

poniewa nie miay one dostatecznie silnych cech oznaczajcych
moliwo kliknicia. Nie byy podkrelone, wic uytkownicy
zakadali, e s po prostu pogrubionymi nagwkami. Instrukcja
na stronie mwi, e aby wywietli oferty pracy, naley klikn
Search (wyszukaj). Byli zakopotani, kiedy nie mogli odnale
przycisku, ktry aktywowaby danie.
(Na ssiedniej stronie u gry) To przykad naduycia wizualnej
przenoni. Chocia prostoktne i wypuke pola wygldaj jak
przyciski, to nie s nimi. Instrukcje mwi, by klika w innym miejscu.

234

Optymalizacja funkcjonalnoci serwisw internetowych

www.bk.com

Czy da si okreli, ktre

z elementw na tej stronie mona
klikn? Jeeli kto zaoy,
e takie elementy to dowolny
fragment wytuszczonego tekstu
lub grafika, to by w bdzie.
Jedynym polem aktywnym jest
tekst Read more (wicej).
Dobrze jest, e element moliwy
do kliknicia ma kolor niebieski,
ale co z innymi niebieskimi
i pogrubionymi elementami?
Wane jest, by uywa kolorw
i oznacze graficznych w sposb
zachowujcy spjno, ktra
pozwala jednoznacznie
wskazywa rne rzeczy.

www.hmce.gov.uk

6. Nawigacja i architektura informacji

235

Bezporedni dostp
ze strony gwnej

Duga lista odnonikw

bezporednich niszczy inne
funkcje, jakie ma peni strona
gwna. Naley zarezerwowa
je dla najwaniejszych zada
uytkownika.

W tygodniu, w ktrym Mozilla

wypucia now wersj swojej
przegldarki Firefox, bezpiecznie byo
zaoy, e wikszo uytkownikw,
ktrzy odwiedzali stron domow,
chciaa przej do pobierania nowego
oprogramowania. Z tego powodu
Mozilla postpia mdrze, zaopatrujc
bezporedni odnonik realizujcy to
zadanie w najbardziej rzucajcy si
w oczy wygld. Niestety, strzaka,
ktra sprawia wraenie odnonika
rozpoczynajcego pobieranie, nie
umoliwia kliknicia. Jest to jednak
niewielki problem z funkcjonalnoci,
gdy wikszo uytkownikw
kliknaby odnonik tekstowy poniej.
Strona zapewnia rwnie bezporednie
odnoniki do innych zada o wysokim
priorytecie, ktre zwizane s
z trzema podstawowymi produktami.
Innym dobrym elementem tej strony
jest to, e zawiera cytat wypowied
Walta Mossberga, znanego recenzenta
oprogramowania. Duo bardziej
wiarygodne jest, gdy produkt jest
chwalony przez kogo, kto nie jest
zwizany z nasz organizacj,
i oczywicie jest jeszcze bardziej
wiarygodne, gdy ten kto negatywnie
wypowiada si o naszej konkurencji,
tak jak w tym przypadku.
Sprytnym posuniciem byo rwnie
zamieszczenie odnonika do
penego artykuu Walta Mossberga,
opublikowanego na stronie
internetowej Wall Street Journal.
Pokazuje to, e Mozilla nie obawia si
pokaza uytkownikom penej
recenzji. Zastosowana strategia jest
skuteczna bez wzgldu na to,
czy poszczeglne osoby bd klika
na doczony odnonik, czy te nie.

236

Jedna z najlepszych strategii projektowych, jakie spotkalimy podczas naszych testw, polega na umieszczaniu bezporednich odnonikw na stronie gwnej, ktre prowadz do bardzo maej liczby najwaniejszych operacji.
Bez wzgldu na to, jak dobrze zorganizowana zostanie
struktura informacji lub jak przejrzysty bdzie system nawigacji, uytkownicy mog si zgubi lub straci cierpliwo, jeeli bd zmuszeni przechodzi przez zbyt wiele
poziomw. Odnoniki bezporednie skracaj i upraszczaj
projekt.
Niestety, nie mona zaprezentowa bezporednich odnonikw do znacznej liczby elementw, ktre oferuje strona. Jeeli nie zachowa si tej zasady, zniszczona zostanie
idea odnonikw bezporednich, gdy zaistnieje wiksze
prawdopodobiestwo, e uytkownicy klikn niewaciwy
odnonik. Dodatkowo duga lista odnonikw bezporednich niszczy inne funkcje, jakie ma peni strona gwna,
na przykad jej podatno na pozycjonowanie czy informowanie uytkownikw o penym zakresie czynnoci, jakie mog na niej wykona. Szczegy nakrelaj obszerny
obraz moliwoci, ale niestety jest on nieprzejrzysty.

www.mozilla.org

Optymalizacja funkcjonalnoci serwisw internetowych

Wicej informacji
Bardziej szczegowe
informacje o badaniach
omawianych w tym rozdziale
mona znale na stronie
www.nngroup.com/reports.
Szukaj hase intranet, children
oraz teenagers.

Odnoniki bezporednie naley zarezerwowa dla niewielkiej

liczby najwaniejszych zada, jakie uytkownik moe na stronie wykona. Dla kadego z niezalenych obszarw strony
liczba tych odnonikw powinna by ograniczona do trzech,
maksymalnie piciu. Trzy lub mniej to liczba najwaciwsza
w przypadkw serwisw o wielu niezalenych obszarach, z ktrych kady wspiera wasne odnoniki bezporednie.

www.mozilla.com

Przy kolejnej odsonie przegldarki Firefox, Mozilla uprocia

stron domow jeszcze bardziej i lepiej wyrnia cel wizyty
wikszoci uytkownikw moliwo pobrania najnowszej
wersji. Przeniesienie odnonika Other Systems and Languages
(inne systemy i jzyki) poza obszar duego przycisku sucego
do pobierania byo kolejnym usprawnieniem. W poprzednim
projekcie odnonik ten dostpny by wewntrz duego cieniowanego
obszaru, ktry by bezdyskusyjnie pomylany ze wzgldu na
uytkownikw systemu Windows. Kady, kto potrzebowa innej
wersji, prawdopodobnie szuka gdzie indziej.

6. Nawigacja i architektura informacji

237

 Wskazwka minus

imitacji tekstu
Cztery najwaniejsze
wskazwki dotyczce
kroju pisma
247 Tekst podstawowy
regua
dziesiciu punktw
Wskazwka
unikanie
antyaliasingu
Wiek nie jest
problemem
Wskazwka
kiedy ten sam
rozmiar wyglda
na mniejszy
Planowanie pod ktem
rnic w sprzcie

238

Powszechne

rozdzielczoci ekranu
Dostpno dotyczy
nas wszystkich
253 Relatywne
specyfikacje
Regua relatywnego
rozmiaru
Projektowanie z myl
o uytkownikach
z wadami wzroku
258 Wybieranie czcionek
W przypadku
wtpliwoci
naley korzysta
z czcionki Verdana
Kiedy z ekranu bdzie
mona czyta tak
dobrze, jak z kartki?

261 Mieszanie
czcionek i kolorw
Wojna przeciwko
wersalikom
Kontrast midzy
tekstem i tem
Powszechny daltonizm
Dwa sposoby,
by spowodowa, e
kolor bdzie widoczny
273 Obrazki z tekstem
275 Poruszajcy si tekst
Wicej informacji

Optymalizacja funkcjonalnoci serwisw internetowych