IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

Funkcjonalno stron www.

50 witryn bez sekretw
Autorzy: Jakob Nielsen, Marie Tahir
Tumaczenie: Sawomir Dzieniszewski
ISBN: 83-246-0126-0
Tytu oryginau: Homepage Usability:
50 Websites Deconstructed
Format: B5, stron: 430

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

W pocztkowej fazie rozwoju internetu strony WWW byy niezwykle ascetyczne.

Dynamiczny rozwj technologii sprawi, e dzi na witrynach WWW mona znale
ju nie tylko statyczne elementy graficzne, ale rwnie animacje, filmy, muzyk i wiele
innych, nie zawsze potrzebnych, komponentw. Takie bogactwo ma czasem swoje
uzasadnienie, ale w przypadku witryn korporacyjnych zwykle odstrasza osoby, ktre je
odwiedzaj. Korporacyjna strona WWW powinna wyglda zupenie inaczej ma by
wizytwk firmy i umoliwia znalezienie wszystkich najwaniejszych informacji na jej
temat. Podczas projektowania takich witryn naley kierowa si przede wszystkim
zasadami ergonomii i zwraca szczegln uwag na funkcjonalno i czytelno.
W ksice Funkcjonalno stron www. 50 witryn bez sekretw, znany specjalista
w zakresie funkcjonalnoci aplikacji i witryn WWW dr Jacob Nielsen przedstawia
zasady projektowania gwnych stron serwisw internetowych, ktre przycign
uytkownikw, sprawi, e bd odwiedza je regularnie i znajd na nich informacje,
ktrych szukaj. Wykorzystujc zawarte tu wiadomoci odpowiednio skomponujesz
ukad strony gwnej, umiecisz na niej odpowiednie treci i zaprojektujesz logiczne
mechanizmy nawigacyjne. Zobaczysz te 50 ronych witryn WWW i dowiesz si,
jakie uwagi do ich funkcjonalnoci ma dr Nielsen.
W ksice znajdziesz midzy innymi:
Najwaniejsze zadania strony gwnej
Sposb przekazywania informacji
Projektowanie grafiki i elementw interfejsu
Nawigacja w witrynie
Zasady doboru czcionek i ich kolorw
Wybr ukadu strony

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Zadbaj, aby Twoja witryna WWW zdaa test uytecznoci

Spis treci
Przedmowa
Rola strony gwnej w witrynie
Organizacja ksiki
Aktywne korzystanie z ksiki
Towarzyszce materiay na stronach WWW

Zalecenia dla strony gwnej

Czego w tych zaleceniach nie ma
Okrelanie zawartoci strony gwnej
Oglne zasady projektowania stron WWW
Specjalistyczne zalecenia dla rnych bran
Dostpno stron WWW
Strony dla dzieci
Strony dla uytkownikw z zagranicy
Strony gwne w intranecie
Zalecenia
Informowanie o celu witryny
Przekazywanie informacji o firmie
Tworzenie zawartoci
Wykorzystywanie przykadw do prezentowania zawartoci
Archiwa i siganie do wczeniejszych materiaw
cza
Nawigowanie
Przeszukiwanie
Narzdzia i skrty zada
Grafika i animacje
Projekt graficzny strony
Elementy interfejsu uytkownika
Tytuy okien
Adresy URL
Wiadomoci i artykuy prasowe
Wyskakujce okienka i strony porednie
Reklama
Komunikaty powitalne
Komunikowanie problemw technicznych i radzenie sobie
z sytuacjami kryzysowymi
Podzikowania i nagrody
Ponowne adowanie i odwieanie strony
Dostosowywanie strony gwnej do indywidualnych potrzeb klienta
Zbieranie informacji o kliencie
Tworzenie spoecznoci

iv

Funkcjonalno stron WWW

1
2
5
6
7

9
10
10
10
10
11
11
11
11
11
12
15
17
20
21
22
23
25
26
27
28
30
31
32
33
35
36
36
37
38
38
40
41
41

Nielsen & Tahir

Daty i terminy
Notowania giedowe i wywietlanie liczb
Rne konwencje projektowania stron gwnych

Statystyki projektowania stron WWW

Czas adowania
Podstawowy ukad strony
Szeroko strony
Konsekwencje wyboru pynnego i sztywnego ukadu strony
Dugo strony
Ramki
Podstawowe elementy projektowania strony
Logo
Przeszukiwanie
Nawigowanie
Pasek nawigacyjny u dou
Mapa witryny
Strony przekierowujce
Ekrany powitalne
Najczciej uywane funkcje
Logowanie si w witrynie
Informacje kontaktowe
Polityka prywatnoci
Oferty pracy
Pomoc
Obrazy
Tekst alternatywny
Muzyka
Animacje
Reklamy
Typografia
Tekst i kolory ta
Formatowanie czy
Zalecany projekt strony gwnej

42
43
43

45
47
48
48
48
48
48
49
49
49
52
52
53
53
53
54
54
55
56
56
57
58
58
58
58
59
60
60
60
61

Spis treci

Statystyki
projektowania
stron WWW
Prawo Jakoba na temat dowiadcze uytkownikw internetu gosi, e uytkownicy spdzaj wikszo swego czasu w witrynach
innych ni dana strona gwna. Prawo to bdzie prawd niezalenie od wielkoci witryny, poniewa adna witryna nie jest w stanie
zaabsorbowa wicej ni 50% czasu uytkownika. Prawd powiedziawszy, wikszo witryn WWW ogldana jest tylko przez niewielki
procent tego czasu, ktry uytkownik spdza w sieci. Prawo to si
rzeczy wymusza na witrynach WWW, aby byy atwe w uyciu i dostosowyway si do okrelonych konwencji projektowania dlatego uytkownicy mog czu siln presj, by w czasie midzy wizyt
wjednej a drugiej witrynie zapamitywa wszystkie specjalne triki
umoliwiajce wygodn interakcj z kad z witryn. W tym rozdziale
zmierzymy, w jakim stopniu konwencje te stosowane s obecnie
wsieci WWW. Zapewne pniej powstan rwnie inne, nowe konwencje projektowania. Gdy ju tak si stanie, zalecamy wykorzystanie tych nowych konwencji podczas kolejnego przeprojektowywania
witryny WWW lub nawet przed przystpieniem do tego.
Projektowanie stron gwnych witryn WWW wykracza jednak poza
zakres wyznaczany przez prawo Jakoba ze wzgldu na rol, jak dla
uytkownika ma pierwsze wraenie na temat witryny. W momencie
gdy uytkownik trafi po raz pierwszy na dan stron gwn, bdzie
ju nis ze sob spory baga dowiadcze wyniesionych zodwiedzin tysicy innych stron gwnych. Jedynym wyjtkiem od tej reguy
s usugi, takie jak AOL czy MSN, ktre czsto s pierwszymi przystankami dla pocztkujcych uytkownikw internetu. Tylko kilka
znajwaniejszych witryn, takich jak Amazon czy Yahoo, ma ten przywilej, e znajduje si w pierwszej dziesitce lub dwudziestce witryn
odwiedzanych na samym pocztku przez nowych uytkownikw.
Nawet jednak te wielkie witryny musz liczy si z tym, e uytkownicy nie odkryj ich, nim nie odwiedz wczeniej bardzo wielu innych
witryn WWW.
Zasadniczo jednak faktem pozostaje, e uytkownicy, zanim dotr do
danej witryny, obejrz wczeniej wiele innych stron gwnych. A do
tego czasu uytkownicy w oparciu o swoje wczeniejsze dowiadczenia wyniesione z innych witryn zbuduj sobie oglny model
tego, w jaki sposb witryny powinny dziaa.

Z faktu, e na powstanie w umyle tego modelu waciwej witryny WWW dominujcy wpyw bd miay rne witryny wynikaj dwa wnioski.
Po pierwsze, znakomita wikszo innych witryn jest przeraliwie niefunkcjonalna i nie jest nawet
warta uywania odwiedzajcy zazwyczaj szybko to odkrywaj i opuszczaj je. Oczekiwania przecitnego uytkownika, gdy trafia do witryny po raz pierwszy, bd takie, e witryna najprawdopodobniej go rozczaruje. Uytkownicy inwestuj bardzo mao czasu (bardzo czsto nie pozostaj tam
duej ni 10 sekund), przygldajc si nowej witrynie z nadziej, e akurat ta bdzie jedn ztych
lepszych. Jeli jednak witryna wyglda zbyt dziwnie lub jest zbyt zoona lub te uytkownik nie
bdzie w stanie stwierdzi, w jaki sposb witryna ta moe rozwiza jego biece problemy,
to umknie std tak szybko, jak tylko uda mu si klikn myszk.
Poniewa decyzja, by porzuci lub odej z witryny podejmowana jest zazwyczaj po przyjrzeniu si
zaledwie jednej lub moe dwm stronom, z ktrymi czy si strona domowa, strona taka musi
komunikowa swoj natychmiastow warto i umoliwia uytkownikom odnajdywanie w cigu
kilku sekund dobrych i waciwych rzeczy. Oba z tych wymaga sugeruj, e strona domowa powinna stosowa si do standardowych konwencji projektowania interfejsu uytkownika, poniewa
uytkownicy inaczej nie bd mieli czasu, by nauczy si niczego nowego. Zamiast tego zuyj ca
moc swego umysu na bezskuteczne prby oceny wartoci wyznaczanej przez cel. Jeli odcignie
si uwag uytkownikw chociaby nawet czym najmniejszym od tego, co jest ich gwnym
motywem eksplorowania witryny (np. moliwo odnalezienia czego nowego lub nauczenia si
czego poytecznego) przegra si.
Kolejna konkluzja jest taka, e zwyky uytkownik, ktry pojawia si w danej witrynie po raz pierwszy, nie bdzie prawdziwym nowicjuszem w penym znaczeniu tego sowa. Uytkownicy maj
zazwyczaj cakiem spore dowiadczenia wyniesione z wczeniej odwiedzonych stron domowych
idlatego wanie strona przyciga ich bdzie sposobem typowym dla tego, w jaki sposb dziaaj
prawie wszystkie strony. Aby podobnie poszerzy stron gwn, gocie powinni czu si mile witani i winni od razu pojmowa, w jaki sposb dziaaj konwencje projektowania.
Wrogowie uytecznoci czasami skar si, e konwencje projektowania ograniczaj kreatywno i e
byoby nudno, gdyby wszystkie strony gwne wyglday dokadnie w ten sam sposb. Obie te skargi
s skierowane pod zupenie niewaciwym adresem. Po pierwsze, podstawow ide projektowania jest
rozwizywanie problemw w ramach przyjtych ogranicze. Kreatywne projektowanie nie oznacza,
e na stronie naley umieszcza wszystko, co popadnie, oznacza po prostu, e naley tworzy rzeczy, ktre bd dziaa w naszym wiecie. Projektantom zawsze niestety przychodzi liczy si z takimi
ograniczeniami, jak na przykad ograniczona rozdzielczo czcionki wiadomoci lub te rozmiar strony
po wydrukowaniu. Przyjmujemy zaoenie, e projektowanie stron WWW jest projektowaniem interaktywnym i dlatego akomodowanie ludzkich zachowa jest po prostu jeszcze jednym ograniczeniem
projektowym, ktre nie powinno jednak ogranicza ludzkiej kreatywnoci, a wrcz przeciwnie pobudza
j. Po drugie, standardowe konwencje projektowania nie oznaczaj, e wszystkie strony gwne maj
wyglda jednakowo. Prawie wszystkie magazyny stosuj si do tej samej konwencji umieszczania numerw stron w rogach, wywietlajc nagwki czcionk wiksz ni w tekcie gwnym i umieszczajc
na pocztku spis treci oraz stosujc wiele, wiele innych konwencji, ktre uatwiaj czytanie tekstu.
Nie oznacza to oczywicie, e magazyn Vogue ma by taki sam jak Sports Illustrated czy te Far Eastern
Economic Review. Podobnie strony gwne, ktre przystosowane s do rnych odbiorcw lub reprezentuj rne firmy, wyglda bd zupenie inaczej, nawet jeli stosowa si bd do standardowych
konwencji uatwiajcych korzystanie z witryny.

46

Funkcjonalno stron WWW

Nielsen & Tahir

Rozdzia ten prezentuje nasz ocen konwencji projektowania witryn internetowych, opierajc si na
analizie 50 stron gwnych przedstawionych w tej ksice. Bardzo czsto bdziemy tutaj demonstrowa
dane statystyczne prezentujce przecitn lub najbardziej powszechn warto projektowanego elementu. W niektrych przypadkach warto rwnie przyjrze si zakresowi wykorzystywanych wartoci,
co bardzo czsto robimy, podajc po prostu trzy rne liczby: pierwszy kwartyl, median i trzeci kwartyl.
Pierwszy kwartyl (Q1) jest to warto, poniej ktrej znajdzie si 25% wszystkich witryn, ktre ocenione
zostay poniej tej wartoci, a powyej pozostae 75% witryn WWW. Na podobnej zasadzie trzeci kwartyl (Q3) to warto, poniej ktrej znajdzie si 75% witryn o niszych ocenach, a powyej 25% witryn
owyszych ocenach. Oczywicie, naturaln kolej rzeczy poowa witryn znajdzie si pomidzy wartociami wyznaczajcymi pierwszy i trzeci kwartyl. Mediana wskazuje z kolei punkt rodkowy, poniej ktrego znajdzie si druga poowa wszystkich witryn oceniona wyszymi notami.

Czas adowania
Gdy korzystamy ze zwykych, analogowych modemw, podobnych do tych, ktre wykorzystywane s
przez wikszo zwykych uytkownikw, zaadowanie opisywanych przez nas stron gwnych zajmuje
przecitnie 26 sekund prawie trzy razy tyle, ile zalecany czas opnienia wynoszcy 10 sekund. Tylko
28% witryn spenia ten wymg, co jest do sabym wynikiem. Aby uzyska naprawd optymaln uyteczno, konieczne jest, by strony adoway si w przecigu mniej ni jednej sekundy, a tego warunku nie
speniaa tak naprawd adna z opisywanych tu stron gwnych. Nawet jeli wykorzystamy model kablowy lub cze DSL, wikszo z opisywanych witryn bdzie adowaa si w czasie duszym ni 10 sekund.
Niestety 26% z omawianych stron gwnych aduje si w czasie duszym ni p minuty. Przy tak dugim
czasie adowania wikszo uytkownikw opuci dan stron domow chyba e zbieraj zrzuty ekranw do swojej wasnej ksiki na temat projektowania stron domowych. W wielu przypadkach takie niewiarygodnie powolne witryny WWW mog zosta uszkodzone w wyniku opnie wynikajcych ze zbyt
powolnego adowania ich stron gwnych. Serwery te w kocu mog dziaa powoli, tak samo jak cay
internet i nikt nie ma nad tym kontroli. Z perspektywy uytkownika waniejsze jest jednak, czy witryna
reaguje aktywnie, czy te moe raczej ociale. Wszystkie wspomniane tu prawidowoci, odnoszce si
do korzystania z sieci WWW, s jeszcze jednym powodem, by moliwie ogranicza rozmiary strony.
Jeli dana strona gwna dziaa zbyt powoli, to uytkownicy cakiem susznie zao, e rwnie z pozostaej czci witryny korzysta si bdzie w sposb do powolny i bolesny, wic bez alu j opuszcz.

Statystyki projektowania stron WWW

47

Podstawowy ukad strony

Teraz przyjrzymy si, jaki rozmiar bdzie miaa strona gwna na ekranie oraz w jakim stopniu bdzie si
ona dostosowywa do rnych rozmiarw okien i w jaki sposb bdzie dzielona na ramki.

Szeroko strony
Wikszo stron gwnych w prbce przystosowana jest do 800-pikselowego okna przegldarki odpowiadajcemu monitorowi o rozdzielczoci 800
na 600 pikseli w momencie pisania tej ksiki (czyli
w roku 2001), wci jeszcze w miar popularnemu
wrd uytkownikw domowych komputerw.
Prezentowane tu liczby odnosz si do szerokoci
strony, nie wczajc w to adnych dodatkowych
elementw dodawanych automatycznie przez
przegldarki, takich jak paski przewijania.
Warto

Szeroko strony

Q1

778 pikseli

Mediana

770 pikseli

Q3

774 pikseli

Zalecamy jednak, aby strony byy projektowane

wtaki sposb, by optymalnie wywietlay si dla
rozdzielczoci okoo 770 pikseli, poniewa taki wanie obszar bdzie dostpny dla strony w standardowym oknie o szerokoci 800 pikseli. Tak zostanie to
omwione w nastpnej czci. Zalecamy rwnie,
by ukad strony gwnej by pynny, tak by moga
dostosowywa si do tak wielu rnych rozmiarw
okien, jak to moliwe ito zarwno tych wszych,
jak i tych szerszych od standardowego okna.

Konsekwencje wyboru
pynnego i sztywnego
ukadu strony
Z opisywanych przez nas 50 witryn WWW okoo
18% posiada pynny ukad zawartoci, ktry bdzie si automatycznie dopasowywa do rozmiaru
okna przegldarki uytkownika. Wikszo witryn
uywa jednak sztywnego ukadu strony, gdzie
witryna ma takie same rozmiary zarwno dla maych, jak i dla duych okien. Strony o sztywnym
(zamroonym) ukadzie mog zosta, niestety,
czciowo obcite w maych oknach lub te pozostawia z boku spore obszary biaej przestrzeni.

48

Funkcjonalno stron WWW

Mimo i sztywny ukad strony jest norm w przypadku stron WWW, osobicie jednak zalecalibymy
korzystanie z pynnego ukadu. Uytkownicy zaopatrzeni w wiksze monitory bd wtedy mogli
wpeni doceni zawarto witryny, powikszajc
okna do takich rozmiarw, jakich chc nie wspominajc o tym, e zwrc im si pienidze, ktre
wydali na wikszy monitor. Z kolei uytkownicy
korzystajcy z mniejszych monitorw rwnie skorzystaj na pynnym ukadzie strony, ktra zmniejszy si odpowiednio do rozmiarw ich mniejszych
przecie okien. Na koniec wreszcie, pynne ukady
strony bd drukowa si rwnie dobrze na kartkach formatu 8,5 na 11 oraz formatu A4.

Dugo strony
Dugo strony potrafi si bardzo zmienia w zalenoci od witryny, aczkolwiek wikszo stron gwnych w momencie pisania tej ksiki miecia si
dobrze na ekranach 800 na 600. Zalecamy unika
zbyt dugich stron gwnych przewijanych wd.
Jeli strona gwna jest dusza ni cztery ekrany,
lepiej byoby prawdopodobnie uproci stron
gwn i przenie cz funkcji na inne strony.
Wkocu nie ma potrzeby zbierania wszystkiego
na jednym ekranie, jeli wszystkie wane funkcje s
widoczne ponad lini zanurzenia strony.
Warto

Dugo strony

Q1

634 piksele lub jeden peny ekran

Mediana

1018 pikseli lub mniej wicej

dwa pene ekrany

Q3

1334 piksele, czyli mniej wicej

trzy pene ekrany

Ramki
Tylko okoo 4% witryn WWW korzysta z ramek.
Poniewa ramki mog powodowa pewne problemy zwizane z funkcjonalnoci witryny, lepiej
podczas projektowania unika ich. Wikszo projektantw stron WWW dokonuje prawidowego
wyboru i nie uywa ramek.

Nielsen & Tahir

Podstawowe elementy projektowania strony

Dwie rzeczy, ktrych uytkownicy przede wszystkim szukaj wzrokiem na stronie gwnej, to logo i funkcja przeszukiwania. Ludzie musz wiedzie, gdzie si znajduj i bardzo czsto chc t witryn przeszuka.
Dlatego te wspomniane wczeniej elementy powinny by umieszczone w takim miejscu, aby byo je szczeglnie atwo znale. Na pewno jednak nikt nie powinien by zmuszony do szukania funkcji przeszukiwania.

Logo

Przeszukiwanie

Z reguy wszystkie witryny posiadaj w takiej czy

innej formie jakie logo. Oto tabela pokazujca,
wktrym miejscu strony mona je znale:

Nie do wiary, ale 14% stron gwnych nie posiada

w ogle funkcji przeszukiwania i dlatego zostan
usunite z tej analizy. Przedstawione tu informacje
procentowe odnosz si do tych ze stron gwnych, ktre nie posiadaj funkcji przeszukiwania.

Pooenie logo

Warto

lewy grny rg

84%

prawy grny rg

6%

u gry porodku strony

6%

w innym miejscu

4%

Osobicie zalecamy, aby witryny umieszczay logo

w lewym grnym rogu strony gwnej. Na wszystkich pozostaych stronach logo powinno by natomiast czem do strony gwnej.
Rozmiary logo rni si w zalenoci od tego,
jakie to jest logo. Poniewa logo s obrazami
dwuwymiarowymi, definiujemy tutaj ich rozmiary
jako cakowit liczb pikseli, ktre zajmuje logo,
oraz podajc wymiary kwadratowego obrazka
zajmujcego t sam liczb pikseli. Wikszo
logo jest prostoktna, dlatego te zazwyczaj maj
wiksz szeroko i mniejsz wysoko ni rozmiar
podany tutaj.
Warto

Rozmiar logo

Q1

3,365 pikseli (kwadrat

o rozmiarach 58 na 58 pikseli)

Mediana

5,485 pikseli (kwadrat 74

na 74 piksele)

Q3

12, 268 pikseli (kwadrat 111

na 111 pikseli)

W 81% witryn funkcja przeszukiwania pojawia si

jako pole tekstowe, w ktrym uytkownicy mog
wpisa zapytanie. Poniewa jest to rwnie rozwizanie, ktre najlepiej si sprawdza, jak mielimy
okazj przekona si, wykonujc testy na uytkownikach, badajc ich reakcje na wiele rnych witryn, w funkcji wyszukiwania zalecamy korzystanie
wanie z pola tekstowego. Tylko 20% witryn wykorzystuje mniej praktyczny projekt przeszukiwania,
wktrym uytkownicy musz klika cze przenoszce ich do osobnej strony przeszukiwania. (Warto
zauway, e te wartoci sumuj si do ponad
100%, poniewa jedna zwitryn oferuje funkcj
przeszukiwania w dwch miejscach).
Oto statystyki umiejscowienia funkcji przeszukiwania (zarwno traktowanej jako pole, jak i jako
cze) na stronach gwnych:
Umiejscowienie funkcji przeszukiwania

Warto

grny rg

35%

dolny rg

30%

u gry porodku

14%

w rodku po lewej

12%

w innym miejscu

12%

Statystyki projektowania stron WWW

49

Osobicie zalecamy umieci funkcj przeszukiwania w grnej czci strony, tak aby atwo j byo
zauway. Chocia dokadne pooenie funkcji
przeszukiwania zalee bdzie od lokalizacji innych elementw znajdujcych si na stronie, my
sugerujemy umieszczenie jej w jednym z dwch
gwnych rogw strony gwnej. Naley pamita, e prawy grny rg moe by odrobin lepszy
od lewego grnego rogu. Jednak rnica midzy
obiema lokalizacjami jest na tyle niewielka, e
rwnie dobrze mona umieci funkcj przeszukiwania w lewym grnym rogu, jeeli bdzie ona
lepiej przystawa do oglnego wygldu strony.
Co wicej, jako etykiety na przycisku wyszukiwania
umieszcza si zazwyczaj kilka rnych tekstw.
Najbardziej typowe etykiety to:
Etykieta

Warto

Search (szukaj)

42%

Go (wykonaj)

40%

Find (znajd)

9%

Find it (znajd to)

5%

Prezentowane tu statystyki sugeruj rwn czstotliwo korzystania z nazw Search i Go,

z punktu widzenia funkcjonalnoci preferowana
jest jednak nazwa Search, poniewa wydaje si,
e lepiej definiuje ona zasady dziaania funkcji
ipozwala korzysta z mniejszej liczby sw, poniewa sprawdza si dwukrotnie lepiej jako etykieta
przeszukiwania.
Jeli natomiast chodzi o kolorystyk, to funkcja
przeszukiwania w 97% ma kolor biay i, jak wida,
jest to dominujca charakterystyka tego pola.
Dlatego te zalecamy korzystnie w polu wyszukiwania z koloru biaego.

50

Funkcjonalno stron WWW

Oto tabela zestawiajca dominujce charakterystyki pl wyszukiwania:

Warto

Szeroko pola przeszukiwania

Q1

85 pikseli lub 14 znakw

Mediana

110 pikseli lub 18 znakw

Q3

171 pikseli lub 28 znakw

Aby efektywno przeszukiwania bya jak najlepsza, uytkownicy powinni mc wpisywa stosunkowo dugie zapytania i widzie wpisywany tekst
bez koniecznoci przewijania pola przeszukiwania.
Przecitne rozmiary pola przeszukiwania w polach
WWW s jednak na tyle krtkie, e pozwalaj na
wpisywanie tylko i wycznie najkrtszych zapyta. Nawet najdusze pole przeszukiwania wykorzystywane w naszym przykadzie bdzie zbyt
krtkie, by zmieci zapytanie wyszukaj zalecenia
uytkowania, ktre ma tylko 29 znakw dugoci,
wczajc w to cudzysowy.
Zalecamy, aby pole wyszukiwania miao przynajmniej 25 znakw szerokoci dla najbardziej popularnej czcionki stosowanej przez uytkownikw,
aczkolwiek lepsze s dusze pola o szerokoci
30znakw.
Proste funkcje przeszukiwania pojawiaj si na
70% z funkcji wyszukiwania dostpnych w naszym przykadzie, co oznacza, e w poszukiwaniu
zapytania wprowadzonego przez uytkownika
mechanizm wyszukiwania przeglda bdzie
wszystkie strony WWW w witrynie. Mechanizmy
zawonego przeszukiwania pojawiaj si w 30%
funkcji wyszukiwania, co oznacza, e wyszukiwarka przeglda tylko cz witryny (czyli tak zwany
zakres przeszukiwania). Funkcjonalno bdzie
prawie zawsze najwiksza w przypadku prostego
wyszukiwania, poniewa zawone wyszukiwanie
daje uytkownikom zbyt wielkie pole do popeniania bdw i wyboru niewaciwego zakresu
przeszukiwania.

Nielsen & Tahir

cza do zaawansowanych funkcji przeszukiwania pojawiaj si w 21% z ogu witryn. To, czy
udostpnianie zaawansowanych funkcji wyszukiwania jest konieczne, zalee bdzie od stopnia
zoonoci witryny, niemniej zdecydowanie lepiej
jest umieszcza wszelkie bardziej zoone opcje
przeszukiwania na osobnej stronie WWW. Chroni
to uytkownikw przed koniecznoci zaznajamiania si ze specjalistycznymi szczegami,
natomiast uytkownikom, ktrzy chcieliby wpisa
jakie szczeglne kryteria wyszukiwania, udostpnia miejsce, gdzie mog to zrobi. W wikszoci
przypadkw strona zaawansowanych funkcji
wyszukiwania bdzie rwnie jedynym miejscem,
w ktrym oferowana bdzie funkcja zawonego
przeszukiwania. Uytkownicy, ktrzy wejd na
stron z zaawansowanymi opcjami wyszukiwania,
robi to bd na swoje wasne ryzyko i dlatego
wielu nowicjuszy woli pozosta na bezpieczniejszym gruncie prostszego wyszukiwania, gdzie
trudniej im bdzie wpakowa si w kopoty.

Peny zestaw przykadowych pl wyszukiwania mona znale w dodatku

na kocu ksiki

Statystyki projektowania stron WWW

51

Nawigowanie
Oto zestawienie rnych schematw nawigacyjnych dominujcych na stronach. (Warto zauway, e
liczby sumuj si do ponad 100%, poniewa kilka z nich oferuje rwnolegle dwa rwnie wane systemy
nawigacyjne).
Schemat nawigacyjny

Procent witryn

pasek nawigacyjny po lewej

30%

zakadki

30%

cza u gry strony

18%

kategorie porodku strony

12%

rozwijane menu

10%

inne (menu po prawej, u dou, w rodku u gry)

6%

Jak wida, nie ma tu jednego zdecydowanego zwycizcy, niemniej mamy cztery podstawowe systemy
nawigacyjne, ktre wydaj si oferowa cakiem dobr funkcjonalno i mona je spotka w sieci WWW
na tyle czsto, i moemy przyj, e wikszoci uytkownikw powinny by dobrze znane.
< Pasek nawigacyjny po lewej stronie. Pasek ten zosta oryginalnie rozpowszechniony przez CNET jako tak
zwany projekt ta febra (ang. yellow fever, wyrany ty pasek biegncy po lewej stronie wszystkich
stron CNET-u). Po przebudowie w 1999 roku CNET zarzuci ten projekt, niemniej jak pokazuje powysze
zestawienie projekt ten nadal mona znale w wielu witrynach, wczajc w to witryn BBC Online.
< Zakadki. Obecnie z takiego rozwizania korzysta wiele witryn, wczajc w to np. witryn Wal-Mart.
Pierwotnie zostay spopularyzowane przez ksigarni internetow Amazon.com, aczkolwiek obecnie
Amazon nie wykorzystuje ich ju jako swego gwnego schematu nawigacyjnego.
< cza u gry strony. Styl uywany w momencie pisania tej ksiki przez witryn Accenture.
< Kategorie porodku strony. Styl spopularyzowany (i nadal wykorzystywany) przez Yahoo!
Mimo i rozwijane menu s rwnie obecnie w miar czsto uywane, nie zalecamy wykorzystywania
ich jako gwnego schematu nawigacyjnego, poniewa przez wikszo czasu dostpne w nich opcje s
ukryte przed okiem uytkownika.

Pasek nawigacyjny u dou

mona waciwie nazwa stopk strony, takich jak

informacje o autorach i informacje kontaktowe.

Spord stron gwnych, widocznych w naszym

przykadzie, 80% zacza dodatkowo list czy
nawigacyjnych u dou strony. Jak wida po tej
liczbie, jest to konwencja bardzo czsto wykorzystywana w projektach witryn, pozwalajca na
zaprezentowanie wybranych opcji nawigacyjnych
u dou strony. Niestety, nie ma zgodnego stanowiska co do tego, jakie opcje naleaoby umieszcza w takiej licie nawigacyjnej. Niektre witryny
powtarzaj tam gwne menu strony, chcc
przedstawi je uytkownikom, ktrzy przegapi
je lub nie mog z niego korzysta u gry strony.
Inne witryny z kolei przyjmuj odmienne podejcie
i rezerwuj dolny obszar strony dla czy, ktre

Z uwagi na brak standardw uytkownicy nie wiedz, czego mog si spodziewa w takiej stopce,
co czyni ten obszar znacznie mniej uytecznym,
ni mgby by, gdyby jakie standardy istniay.
Poniewa umieszczanie opcji nawigacyjnych udou
strony jest w zasadzie rozwizaniem opcjonalnym,
zalecamy eby nie wykorzystywa go do umieszczania podstawowych opcji nawigacyjnych. Dodatkowo
jedna z waniejszych regu projektowania mwi,
by unika duplikowania elementw. Jeli ta sama
opcja pojawi si dwukrotnie, uytkownicy bd si
zastanawia, czy wspomniane dwa cza s rne,
czy moe jednak identyczne. Na koniec, oczywicie,
naley pamita rwnie, e kady piksel strony

52

Funkcjonalno stron WWW

Nielsen & Tahir

gwnej jest cenny, tak wic lepiej nie marnowa

przestrzeni na dwukrotne prezentowanie tej samej
funkcji, niezalenie jak byaby ona wana.

Osobicie zalecamy nazwanie cza do mapy witryny map witryny Site Map.

Jako podsumowanie zalecamy, aby uywa stopki tylko do elementw nawigacyjnych waciwych zwyczajowo dla stopki i nie powtarza tam podstawowych
segmentw struktury informacyjnej danej witryny.

Strony przekierowujce

Mediana liczby czy obecnych w stopce wynosi

7,5, co odpowiada mniej wicej liczbie czy zalecanej dla menu i podobnych list, ktra wynosi
7czy plus minus 2.
Zalecalibymy, aby lista czy znajdujcych si w stopce strony bya jak najkrtsza. Liczba czy nie powinna raczej przekracza siedmiu, a wybrane sowa
powinny by wystarczajco krtkie, by lista zmiecia
si w pojedynczym wierszu tekstu dla strony wywietlanej w oknie o standardowych rozmiarach.

Mapa witryny
Chocia w wikszoci naszych przegldw stron
nie komentujemy tego elementu witryny, 48%
stron gwnych oferuje cze do mapy witryny.
Poniewa nie ma obecnie jasnych ustale, czy
mapy witryn rzeczywicie pomagaj uytkownikom nawigowa po witrynie, zalecamy zaczanie
takiej mapy tylko wtedy, gdy dysponujemy odpowiednimi rodkami, by przygotowa j naprawd
porzdnie i gdy jej konstrukcja zostaa przetestowana na grupie prawdziwych uytkownikw obserwowanych podczas nawigowania po witrynie.
Przygotowalimy osobny raport, ktry zawiera wskazwki, jak projektowa map nawigacyjn witryny
(http://www.NNgroup.com/reports/sitemaps). W tym
miejscu omwimy tylko, jak i kiedy uytkownicy bd
nawigowa midzy stron gwn a map witryny.
Na tych stronach gwnych, ktre zawieraj cze
do mapy witryny, cze to zostao nazwane wnastpujcy sposb:
Etykieta mapy witryny

Procent ogu witryn

Site Map (mapa witryny)

63%

Site Index (indeks witryny)

13%

Site Guide (przewodnik

po witrynie)

8%

Strona przekierowujca to taka strona WWW, ktra

wywietlana jest uytkownikom, zanim trafi na
waciw stron gwn. Tego rodzaju strony podobne s do stron powitalnych (ktre zostan omwione
za chwil) w tym sensie, e s dodatkow przeszkod, ktr uytkownicy musz usun, by dotrze do
strony gwnej. Jednak w odrnieniu od stron
powitalnych strony przekierowujce peni uyteczn funkcj w konstrukcji witryny, umoliwiajc
uytkownikom podjcie jakiej sensownej akcji,
zamiast po prostu bezczynnie oczekiwa na zaadowanie si strony gwnej. Typowym zadaniem strony
przekierowujcej jest kierowanie uytkownikw do
odpowiednich stron docelowych w przypadku firm,
ktre oferuj kilka stron gwnych dla rnych celw.
Dwa najbardziej powszechne zastosowania stron
przekierowujcych to ostrzeganie uytkownikw
niepenoletnich, e strony zawieraj zawarto przeznaczon dla dorosych, lub przekierowywanie uytkownikw do strony gwnej waciwej dla ich kraju.
Poniewa w przykadach, ktre wybralimy dla potrzeb
tej ksiki, nie ma stron zawierajcych treci pornograficzne, nie trafilimy na strony przekierowujce,
ktre blokowayby dostp do witryny osobom niepenoletnim. Strony przekierowujce dla uytkownikw
zinnych krajw stanowi natomiast 2% naszej prbki.
Zasadniczo zalecamy rezygnacj ze stron przekierowujcych, za wyjtkiem witryn, ktre zawieraj
na stronie gwnej treci pornograficzne lub inn
zawarto mogc urazi czyje uczucia. Mimo i
strona przekierowujc nie gwarantuje, e osoby
niepenoletnie nie dotr do treci pornograficznych, moe jednak chroni ludzi przed trafieniem
do witryn pornograficznych przez pomyk.

Ekrany powitalne
Ekrany powitalne s przeklestwem sieci WWW
idlatego zdecydowanie naley si ich pozby. Nie
tylko irytuj one uytkownikw, ale rwnie przez
to, e coraz rzadziej pojawiaj si w internecie,
zaskakuj odwiedzajcych. Naley wic umoliwi
uytkownikom natychmiastowy dostp do strony
gwnej i upewni si, e ta strona jest wystarczajcym wprowadzeniem do danej witryny WWW.

Inne wykorzystywane nazwy to Map (mapa), See

All Categories (wszystkie kategorie), Site Contents
(zawarto witryny) i Sitemap (plan witryny).

Tylko 6% z witryn w naszej prbce prezentuje strony powitalne. Innymi sowy, 94% witryn otwiera
przed uytkownikami od razu stron gwn.

Statystyki projektowania stron WWW

53

Najczciej uywane funkcje

Pewne funkcje pojawiaj si w znacznym procencie lub nawet w wikszoci witryn WWW. Czasami
zsamej koncepcji witryny wynika, i strona gwna powinna zawiera okrelone funkcje, takie jak informacje o firmie lub instytucji, ktra zaoya stron, lub jak skontaktowa si z firm. W czasie istnienia
internetu ewoluoway rwnie inne czsto wykorzystywane elementy. Na przykad wikszo stron
WWW firm oferuje rwnie informacje dla osb poszukujcych pracy. Poniewa wiele witryn zbiera
take informacje na temat klientw, bardzo popularne s strony okrelajce polityk prywatnoci, jeli
chodzi o przechowywanie zbieranych informacji.
W miar rozwoju sieci WWW prawdopodobnie pojawia si bd pewne standardowe funkcje, szczeglnie
w ramach witryn przynalecych do pewnych szczeglnych kategorii, takich jak witryny korporacji czy witryny
rzdowe. Osobicie zalecamy, aby przyglda si innym wiodcym witrynom w ramach danej kategorii i, wrazie potrzeby, dodawa funkcje, ktre upowszechni si na tyle, e uytkownicy uwaa je bd za standard.
Czsto uywane funkcje powinny mie rwnie rozpoznawalne nazwy. W ten sposb uytkownikom
atwiej bdzie je odnajdywa, a co za tym idzie szybciej zorientuj si, ktre z funkcji s unikatowe
iwaciwe tylko dla danej witryny. Im mniej bd si zastanawia nad znaczeniem powszechnie znanych
funkcji, tym wicej uwagi powic nowym.

Logowanie si w witrynie
Jak si przekonalimy, 52% witryn WWW, czyli troch ponad poowa oferuje na stronie gwnej zarejestrowanym uytkownikom moliwo logowania
si w witrynie przed skorzystaniem z podstawowych funkcji. Mimo i zalecamy udostpnianie opcji logowania na stronie gwnej, jeli pozwalamy
uytkownikom zalogowa si w danej witrynie, to
jednak odradzamy prezentowanie uytkownikom
osobnego ekranu logowania, ktry uniemoliwi im
przejcie ze strony gwnej dalej. Witryna powinna
traktowa uytkownikw na tyle przyjanie, by
chcieli zarejestrowa si w niej tak szybko, jak to
tylko moliwe. Jeli jednak uytkownicy nie chc si
logowa, wymaganie tego od nich jest wysoce niepraktyczne i dlatego naley da zalogowania si
tylko w ostatecznoci, gdy uytkownicy postanowi
zajrze do informacji na temat swojego konta.
Nie ma jednak adnych regu, jeli chodzi o to, dla
jakich funkcji na stronie gwnej naley wymaga
od uytkownikw zalogowania si. Oto przykady
stosowanych etykiet funkcji logowania:
Etykiet logowania

Statystycznie 46% witryn WWW uywa gdzie

na etykiecie funkcji logowania sowa account
(konto), wliczajc w to rwnie ma grup (3%)
witryn, ktre uywaj zwrotu customer account
(konto klienta).
Stosowane nazewnictwo jest wic, jak wida,
nadal zbyt rnorodne, by mc zaprezentowa jakie wyrane zalecenia w tym wzgldzie. Niestety,
sposoby logowania w witrynie s nadal jeszcze
w pocztkowej fazie rozwoju i trudno tu wskazywa jakie naprawd uniwersalne konwencje.
Osobicie zalecamy wybranie etykiet najlepszych
z punktu widzenia danej witryny, sugerujcych
nazw, jakie korzyci uytkownik moe wynie
z zarejestrowania si i zalogowania w witrynie.
Bardzo czsto waciwym sowem bdzie konto,
jest jednak wiele sytuacji, gdzie uycie tego sowa,
ktre sugeruje dostosowanie funkcji do osobistych
potrzeb uytkownika, nie bdzie dobrym rozwizaniem. Poniewa nie ma tutaj adnej standardowej terminologii, zalecalibymy sprawdzenie, ktre z etykiet najlepiej bd si sprawdza w testach
z udziaem potencjalnych uytkownikw.

Procent witryn

Your Account (Twoje konto)

19%

Login (logowanie)

19% (wczajc te witryny, ktre uywaj sowa logon)

Sign In (zaloguj si)

15%

My Account (moje konto)

12%

Account (konto)

12%

54

Funkcjonalno stron WWW

Nielsen & Tahir

O firmie
W nasze prbce stron gwnych 84% witryn zawierao cze udostpniajce informacje na temat firmy.
My rwnie szczerze polecamy doczenie takiej
funkcji. Mimo i mogoby si wydawa, e uytkownikw interesuje tylko to, co firma ma im do zaoferowania, a nie zaley im na wiedzy o samej firmie,
dowiadczenie wykazuje, e dostarczenie informacji
na temat firmy jest jednym z elementw najsilniej
wpywajcych na budow zaufania do firmy.
W sieci WWW wszystkie firmy s rwne reprezentuje je tylko i wycznie zawarto okna na ekranie
monitora. Ta rwno jest jednym ze wspaniaych
aspektw demokratyzacji, wymuszanych przez internet. Prawd powiedziawszy, sie WWW oferuje
nowym firmom nieograniczone moliwoci zdobywania klientw na caym wiecie i umoliwia im promowanie innowacyjnych usug i wyspecjalizowanych
produktw, ktre w tradycyjnym wiecie nie miayby
szans zmieci si na pkach sklepowych czy zdoby
telewizyjnego czasu reklamowego. Z drugiej strony,
ta otwarto internetu czyni go wspaniaym polem
do zabawy dla artystw i spammerw (ludzi rozsyajcych poczt mieci). Wikszo uytkownikw internetu otrzymuje kadego dnia po kilka lub kilkanacie
listw zawierajcych reklamy serwisw erotycznych
lub przepisy na to, jak szybko sta si bogatym. Nic
dziwnego, e w takim rodowisku uytkownicy szybko wyrabiaj sobie odpowiedni pancerz ostronoci
i zdrowy sceptycyzm jeli nie, szybko pozbd si
swoich pienidzy i nie trafi do bazy klientw.
Aby zbudowa sobie reputacj firmy dziaajcej
wdobrej wierze, trzeba uytkownikom udostpni
jaki prosty sposb zdobycia informacji na temat
danej firmy ju na stronie gwnej. Oczywicie,
dostarczanie informacji o firmie, organizacji
lub instytucji nie jest gwnym celem witryny.
Informacje te nie bd zapewne najczciej sprawdzanymi lub najbardziej uytecznymi informacjami
w witrynie, niemniej powinny tam by.
W badanych witrynach cze do informacji na temat firmy wystpuje pod nastpujcymi nazwami:
Etykieta informacji o firmie

Procentowy udzia

About <nazwa-firmy>
(o Waszej firmie)

55%

About Us (o nas)

21%

Company Information, Company

Info (informacje o firmie)

7%

Who We Are (kim jestemy)

5%

Inne moliwoci to Inside the Company (poznaj

nasz firm od rodka), Learn About Us (wicej
ofirmie), Our company (nasza firma), Our Story
(nasza historia) czy po prostu About (o nas).
Zalecamy, aby umieci nazw firmy lub skrtow wersj nazwy, jeli jest ona zbyt duga, w czu About.
Na przykad w witrynie firmy Acme Products powinno
znajdowa si cze About Acme (o Acme).

Informacje kontaktowe
W naszej prbce 90% witryn oferowao jak
metod skontaktowania si z firm zazwyczaj
adres pocztowy, numer telefonu i adres e-mail.
Oto zestawienie oferowanych przez witryny sposobw kontaktowania si z firm:
Lokalizacja informacji kontaktowych

Procent witryn

podane bezporednio
na stronie gwnej

4%

osobne cze Contact Us (kontakt)

60%

za porednictwem cza About Us

(o firmie)

22%

dostpne za porednictwem innych

czy, takich jak Help (pomoc) czy
Customer Service (obsuga klienta)

14%

Wrd stron gwnych, ktre korzystaj z cza

Contact Us, by za jego porednictwem udostpni informacje kontaktowe, rozkad nazw nadawanych temu czu by nastpujcy:
Etykieta dla informacji kontaktowych Procent witryn
Contact Us (kontakt)

89%

Contact <nazwa-firmy>
(kontakt z firm)

4%

Contact Numbers
(informacje kontaktowe)

4%

Contact (napisz do nas)

4%

Osobicie zalecamy umieszczanie na stronie gwnej cza Contact Us.

W przypadku firm, ktre staraj si zniechci klientw do bezporedniego kontaktowania si z nimi,
warto unika bezporedniego cza umoliwiaj-

Statystyki projektowania stron WWW

55

cego kontakt z firm, jeli informacje kontaktowe

pojawiaj si jako pierwszy element na stronie
zinformacjami o firmie. Dziki temu nadal daje si
klientom moliwo skontaktowania si z firm,
jeli s naprawd mocno zdeterminowani, niemniej
zachca si ich, eby najpierw poszukali innych
sposobw rozwizania drczcych ich problemw.
Niezalenie od wybranego rozwizania polecamy,
aby zawsze udostpnia cze z informacjami kontaktowymi na stronie O firmie. Bardzo istotne
jest bowiem, aby ludzie, ktrych naprawd dana
firma interesuje, byli w stanie znale lokalizacj
jej siedziby i waciwy numer telefonu, pod ktrym
mona zasta ywego czowieka.

Pojawiaj si jednak rwnie i inne nazwy wrodzaju Privacy Guarantee (gwarancja prywatnoci) Security & Privacy (bezpieczestwo i prywatno), jak rwnie bardziej tajemnicze terminy,
takie jak Safe Harbor (bezpieczna przysta),
Site Policies (polityka witryny) czy Terms and
Conditions (warunki i zasady).

Polityka prywatnoci

W przykadowej prbce stron gwnych 74%

zawierao odpowiednie cze dla osb poszukujcych pracy. Kolejne 8% udostpniao moliwoci
zatrudnienia w sekcji About Us (o firmie).

Spord omawianych stron gwnych 86% zawierao cze do strony podsumowujcej polityk
prywatnoci stosowan przez witryn. Mimo i
wielu uytkownikw nie czyta zasad tej polityki,
udostpnienie jej w atwym do odnalezienia miejscu jest wanym elementem podbudowujcym
zaufanie do witryny jasne sformuowanie zasad
polityki informuje ich, e traktujemy ich prywatno powanie. Zdecydowanie zalecamy, aby
kada witryna, ktra zbiera informacje na temat
klientw, zamieszczaa na swojej stronie gwnej
cze do stosowanych zasad polityki prywatnoci.
Jeli witryna pozwala na anonimowe korzystanie
z niej, to mona zrezygnowa z udostpniania
na stronie gwnej cza do polityki prywatnoci,
niemniej powinno si umieci je tam, gdzie prosi
si uytkownikw o podanie jakich prywatnych
informacji (na przykad tam, gdzie zbiera si ich
adresy email, by rozsya biuletyn).
Na stronach gwnych, ktre posiaday cze do
strony z opisem polityki prywatnoci, cze to
nazywane byo w nastpujcy sposb:
Etykieta cza do polityki prywatnoci

Procent witryn

Privacy Policy (polityka prywatnoci)

47%

Privacy (prywatno)

19%

Privacy Statement
(deklaracja prywatnoci)

12%

Privacy Notice (zasady prywatnoci)

5%

Privacy & Security (prywatno

i bezpieczestwo)

5%

56

Funkcjonalno stron WWW

Osobicie zalecamy nazwanie tego cza Privacy

Policy. Jeli uywana jest ju inna nazwa, to zalecalibymy, aby na pocztku cza pojawio si
sowo Privacy (prywatno).

Oferty pracy

Jeli dana firma nie ma obecnie do zaoferowania

adnych posad lub rekrutacja personelu nie jest jej
wysokim priorytetem, wtedy dobrze jest przenie
informacje na temat rekrutacji na stron O firmie,
gdzie zwyczajowo zaglda wikszo osb poszukujcych pracy, jeli nie uda im si znale bezporedniego cza do ofert pracy na stronie gwnej.
Przeniesienie cza do ofert pracy ze strony gwnej
w inne miejsce zmniejsza efektywno wysikw
rekrutacyjnych, poniewa ludzie szukajcy pracy
musz powici wicej wysiku, by sprawdzi,
kogo firma chce zatrudni.
Oto zestawienie, jak w rnych witrynach nazywane s cza do stron z ofertami pracy:
Etykieta skrywajca oferty pracy

Warto

Careers (kariera)

18%

Jobs at <nazwa-firmy>
(oferty pracy w firmie)

16%

Jobs (oferty pracy)

13%

<nazwa-firmy> jobs (firma zatrudni)

13%

Employment (zatrudnimy)

11%

Employment Opportunities
(moliwoci zatrudnienia)

5%

Jobs & Careers (praca i zatrudnienie)

5%

Join Our Staff (docz do nas)

5%

Nielsen & Tahir

Inne uywane w takich przypadkach terminy to

midzy innymi Careers <nazwa-firmy> (kariera
w firmie), Career Opportunities (moliwoci
kariery), Job Opportunites (moliwoci pracy),
Job Search (poszukujesz pracy) lub Work at
<nazwa-firmy> (praca w firmie).
A oto statystyki wykorzystania rnych elementw:
Etykiety rnych ofert pracy

Procentowy udzia

Jobs, Job (praca)

53%

<nazwa-firmy>

34%

Careers, Career (kariera)

28%

Employment (zatrudnienie)

16%

Opportunities (moliwoci)

11%

d j w witrynie. Naley rwnie pamita, e

uytkownicy czsto unikaj korzystania z pomocy
z powodu wczeniejszych zych dowiadcze
zbezuytecznymi funkcjami pomocy w innych
witrynach. Dlatego nie zalecamy doczania do witryny funkcji pomocy tylko po to, aby mc si ni
pochwali. Pomoc naley oferowa tylko wtedy,
jeli dana witryna zawiera wiele zaawansowanych
i zoonych opcji, ktrych nie da si uproci do
tego stopnia, aby zasady korzystania z nich byy
zrozumiae same przez si. Ponadto pomoc naley
oferowa tylko wtedy, gdy ma si wystarczajc
dokumentacj techniczn, by zaoferowa uytkownikom naprawd dobr i pomocn zawarto.
Oto zestawienie lokalizacji funkcji pomocy w witrynach, ktre oferoway tak opcj:

Uwzgldniwszy wyniki naszych analiz, zalecamy

uycie w etykiecie opcji wiodcej do ofert pracy
sowa jobs. Jest to bowiem nie tylko najczciej
uywane ze sw, ale rwnie najkrtsze i najatwiej zrozumiae. Sowo praca mona rwnie
poczy z nazw firmy, niemniej nie wydaje si to
niezbdne, bowiem w przypadku wikszoci stron
gwnych oczywistym bdzie, e oferty pracy
dotyczy bd wanie tej firmy. Przykadem wyjtku od tej reguy moe by witryna gazety, gdzie
cze praca prowadzi bdzie do gwnej sekcji
powiconej ogoszeniom o pracy zamieszczanym
w gazecie przez inne firmy, najprawdopodobniej
wykupywanym jako reklamy. Dlatego te gazeta
powinna mie jeszcze osobne cze zatytuowane
na przykad Praca w <nazwa-gazety>. Jeli
nazwa cza ma by dusza, to sowo praca
zdecydowanie powinno znale si w nim na
pierwszym miejscu.

Pomoc
Zaledwie niewiele ponad poowa, dokadniej
54% z badanych stron gwnych oferuje funkcj
pomocy, wic jak wida funkcja ta nie jest
wystarczajco powszechna, by uytkownicy sieci
WWW mogli mie absolutn pewno, e znaj-

Pooenie funkcji pomocy

Procent witryn

u gry po prawej

41%

u gry porodku

11%

u gry po lewej

4%

porodku lewej strony

11%

u dou po prawej

7%

u dou porodku

11%

u dou po lewej
Jak wida, nie ma penej zgody, gdzie naley
umieszcza funkcj pomocy i wanie dlatego tak
trudno jest przekona uytkownikw do korzystania z niej. Poniewa nie wiedz oni gdzie jej szuka, istnieje spora szansa, e po prostu przeocz
funkcj pomocy i nawet jej nie klikn.
Chocia lokalizacja ta nie ma zdecydowanej przewagi, to jednak umieszczanie opcji pomocy wprawym grnym rogu strony jest najczstszym wyborem projektantw. Dlatego te radzimy stosowa
si do wyboru wikszoci i umieszcza pomoc
wanie u gry po prawej stronie. Wanie w tym
miejscu opcja pomocy pojawia si w wikszoci
aplikacji komputerowych i okien dialogowych.

Statystyki projektowania stron WWW

57

Grafika i multimedia
Podstaw wszystkich stron WWW jest tekst, zwaszcza na stronach gwnych zdominowanych przez
elementy nawigacyjne oraz najnowsze wiadomoci, ktre jak wiadomo oparte s gwnie na tekcie. Inne typy mediw uywane s tam w poczeniu z zawartoci tekstow, niemniej rwnie maj
swe miejsce na stronie gwnej.

Obrazy

Muzyka

Mediana mierzca przecitn liczb ilustracji na

stronie wynosi 3. Co wicej, obecnie czasy przeadowanych obrazem stron gwnych zdaj si
odchodzi w przeszo, poniewa redni obszar
przeznaczony na stronie gwnej (rwnie mierzony median) nie przekracza 8% powierzchni strony.

Tylko 4% z ogu witryn odtwarza muzyk od

razu, gdy uytkownik wchodzi na stron gwn. Uwzgldniajc fakt, e 96% witryn zupenie
rezygnuje z dwiku, my rwnie zalecalibymy
rezygnacj z efektw dwikowych. W przyszoci
prawdopodobnie moliwe bdzie wykorzystanie
takich efektw, by zwikszy funkcjonalno witryny
i poprawi jej komunikacj z uytkownikami. Jednak
nawet gdy dostpne bd lepsze techniki odtwarzania materiaw audio, witryny powinny stara
si unika automatycznego odtwarzania dwiku
na stronie gwnej i wykorzystywa efekty dwikowe tylko tam, gdzie bdzie je mona wykorzysta
wsposb bardziej sensowny i gdzie nie bd straszy uytkownikw.

Zasadniczo polecamy przeznaczanie pod obrazy

mniej wicej od 5 do 15% powierzchni strony
gwnej. Niektre z witryn mog potrzebowa
wicej miejsca, jeli ich zawarto jest bardziej
wizualna. Z kolei inne mog zupenie oby si
bez grafiki. Odpowiedzi na to pytanie nie mona
generalizowa, bowiem zaley to kadorazowo
od konkretnej witryny i jej zawartoci. Jeli jednak
dana strona gwna przeznaczy na grafik ponad
15% powierzchni, bdzie to ostrzeenie, e strona
jest, by moe, odrobin przeadowana obrazami.
W takich przypadkach warto jeszcze raz sprawdzi, ktry z obrazw jest naprawd przydatny,
aktry w niczym uytkownikom nie pomaga.

Tekst alternatywny
W przypadku stron gwnych, ktre udostpniaj
grafik, alternatywny tekst dodawany za pomoc atrybutu ALT jest szczeglnie nieoceniony dla
osb niewidomych. Niestety, tylko 42% stron
gwnych dba o przygotowywanie takiego tekstu.
Doczanie do obrazw alternatywnego tekstu za
pomoc znacznika ALT jest jednym z najstarszych
i najprostszych sposobw uczynienia witryny bardziej dostpn dla uytkownikw niepenosprawnych, dlatego te jestemy szczerze rozczarowani,
e wikszo witryn o tym nie pamita.
Nie ocenialimy, czy alternatywny tekst jest pomocny
ani czy jest dobrze napisany, a tylko czy jest obecny.
Poniewa rozwaania, jak uczyni witryny bardziej
dostpnymi dla osb niepenosprawnych, nie s
przedmiotem tej ksiki, Czytelnikw zainteresowanych tym problemem odsyamy do przygotowanych
przez nas materiaw na temat dostpnoci stron
WWW, ktre mona znale w internecie pod adresem http://www.nngroup.com/reports/accessibility).

58

Funkcjonalno stron WWW

Animacje
Spord badanych witryn 30% zawierao na stronie
gwnej animacj w jakiej formie. Jest to do
wysoki procent ogu badanych stron, co wskazuje,
e animacja na stronach WWW nie powinna by
ju dla uytkownikw zaskoczeniem ani te ich nie
przestraszy. Niemniej nadal rzadko si widzi animacj uywan w naprawd przemylany sposb.
Bardzo czsto rzeczy poruszaj si na stronie tylko
dlatego, e projektanci posiedli wiedz, jak przygotowa animacj a nie dlatego, by animacja
ta wpywaa jako pozytywnie na dowiadczenia,
ktre uytkownik wyniesie ze strony. W naszych
badaniach przeprowadzonych na testowych grupach uytkownikw bardzo czsto odkrywalimy,
e animacja jest zbyt agresywna i sprawia wraenie
zbyt inwazyjnej. W ten sposb nie tylko irytuje
uytkownikw, ale rwnie odciga ich od zada,
ktre chcieliby zrealizowa w witrynie. Z tego wanie powodu, jak rwnie dlatego e 70% badanych
witryn unika umieszczania animacji na stronie
gwnej, zalecamy powanym witrynom rwnie
unika animowanych elementw na swoich stronach gwnych. Za wyjtkiem tych przypadkw,
kiedy rzeczywicie mamy dobry powd, by animowa okrelony element.

Nielsen & Tahir

Reklamy
Prawie poowa, dokadniej 46% ze stron gwnych zawiera reklamy w tradycyjnym tego sowa znaczeniu, czyli materiay promujce inne firmy i ich produkty. Dla witryn, ktre prezentuj na swojej stronie
gwnej reklamy, mediana mierzca redni liczb reklam na stronie wynosia 3, co jest absolutnie grn akceptowaln granic liczby reklam, jeli chce si zachowa funkcjonalno. Troch wicej reklam
iuytkownicy przestan zwraca uwag na indywidualne reklamy i zaczn postrzega stron WWW
jako przeadowan i niespjn.
Osobicie sdzimy, e reklamy nie graj istotnej roli w modelu biznesowym witryn WWW i konsekwentnie powtarzamy t opini ju od 1997 roku (wicej informacji na ten temat mona znale w naszych
materiaach pod adresem www.useit.com/alertbox/9709a.html). Mimo to wiele witryn WWW nadal
zamieszcza reklamy zewntrznych firm, traktujc je jako istotne rdo swoich dochodw i z tego powodu nie odwaylibymy si zaleci tym witrynom usunicia reklam, cho niewtpliwie wpywaj one
negatywnie na ogln funkcjonalno.
Z reguy 84% spord badanych stron gwnych prezentuje wewntrzne, firmowe reklamy, ktre definiujemy jako wyrnione obszary majce wizualn form typow dla reklamy, promujce wasne produkty lub usugi oferowane witrynie. Oczywicie, granica midzy opcj nawigacyjn umoliwiajc przeniesienie si do produktu czy prezentowaniem towaru jako przykadu caej linii produktw a rzeczywist
reklam tego produktu jest bardzo cienka. Niemniej promocyjny charakter tekstu i oprawa graficzna
jednoznacznie wskazujca na reklam, sprawia, e uytkownik zazwyczaj nie ma problemw z odrnieniem reklamy od innej zawartoci. Zasadniczo jeli tekst bardziej koncentruje si na sprzeday ni na
opisie produktu, to zapewne mamy do czynienia z wewntrzn reklam. Dla witryn, ktre prezentoway
na swoich stronach gwnych wewntrzne reklamy, mediana definiujca redni liczb takich reklam
wynosia 4,5.
Innymi sowy, witryny czciej bombarduj uytkownikw wewntrznymi reklamami ni reklamami zewntrznych produktw, mimo e te ostatnie s zazwyczaj rdem dodatkowych dochodw. Osobicie
zalecalibymy prezentowanie na stronach witryny mniejszej liczby reklam wewntrznych, ni to byo
w naszej prbce dwie lub trzy reklamy s w porzdku, natomiast cztery lub pi to ju za duo.
Zazwyczaj przestrze zajmowan przez wewntrzne reklamy da si wykorzysta znacznie efektywniej,
na przykad poprawiajc inne elementy strony gwnej. Mimo i prawd jest, e produkty promowane
na stronie gwnej sprzedaj si znacznie lepiej, niemniej naley pamita, e wzrost sprzeday kilku
wybranych produktw moe pocign za sob spadek sprzeday wszystkich pozostaych, poniewa
uytkownicy bd mieli problemy ze zrozumieniem podstawowej funkcji strony gwnej. A co za tym
idzie uytkownicy, ktrzy przybd na stron gwn, wynios gorsze dowiadczenia, jeli chodzi
omoliwo realizacji tych celw, ktre skoniy ich do odwiedzenia danej witryny.

Statystyki projektowania stron WWW

59

Typografia
Kluczow spraw podczas projektowania tekstu na stronach WWW jest zadbanie o jego czytelno, poniewa uytkownicy bd ogldali ten tekst wywietlony na ekranie komputera, ktrego rozdzielczo moe
by lepsza lub gorsza. Z punktu widzenia typografii wszystkie ekrany komputerowe s zym medium i nie
zmieni si to jeszcze przez par lat, poniewa ekrany o wysokiej rozdzielczoci s zbyt kosztowne.

Tekst i kolory ta

Formatowanie czy

Spord przebadanej prbki 72% stron gwnych stosowao tekst w kolorze czarnym. Prawie
wszystkie z tych witryn korzystay rwnie z biaego ta, osigajc w ten sposb maksymalny moliwy kontrast midzy tekstem a tem i, co za tym
idzie, najwiksz czytelno tekstu.

Oprcz oznaczania tekstu cza innym kolorem

kolejn istotn wskazwk, e dany fragment
tekstu mona klikn, by przenie si gdzie indziej, jest podkrelenie. W naszej prbce a 80%
witryn uywa podkrelonego tekstu. My rwnie
zalecamy, aby podkrela tekst czy, moe za wyjtkiem paskw nawigacyjnych, gdzie oczywistym
jest, e tekst tam znajdujcy si mona klika.

Skromne 8% witryn uywao tekstu w kolorze niebieskim (przewanie na biaym tle), a 8% tekstu
wkolorze szarym (zawsze na szarym tle). Poniewa
takie schematy kolorw oferuj mniejsz czytelno
ni czarny tekst na biaym tle, nie zalecamy korzystania z nich. Jeli jednak ju si je stosuje, naley
pamita, aby tekst by ciemniejszy od ta.
Tylko 4% z badanych witryn stosowao biay tekst
na czarnym tle. Mimo i takie rozwizanie rwnie gwarantuje maksymalny moliwy kontrast,
jednak wikszo ludzi uwaa, e taki tekst czyta
si gorzej ni czarny tekst na biaym tle, ktry jest
bardziej rozpowszechniony i bardziej przypomina
tekst drukowany.
Jeli chodzi o to, to 84% badanych stron gwnych uywa koloru biaego. To rozwizanie jest
najprostsze i zazwyczaj rwnie najlepsze, zwaszcza jeli biaemu tu towarzyszy czarny lub bardzo
ciemny tekst.
Mediana okrelajca redni rozmiar czcionki tekstu
na badanych stronach wynosi 12 punktw. Z reguy tekst pisany jest czcionk bezszeryfow (sans
serif), aczkolwiek 4% witryn korzystao z czcionki
z szeryfami (czyli z krtkimi prostopadymi liniami
na kocach kresek tworzcych litery). Mimo i
czcionk z szeryfami atwiej jest czyta w tekcie
drukowanym, niemniej szeryfy nie renderuj si
tak dobrze na monitorach o niszej rozdzielczoci,
dlatego te na komputerze czyta si lepiej tekst pisany czcionk bezszeryfow, tak jak np. Verdana
czy Arial. Na obecn chwil zalecamy uywanie w
tekcie stron czcionki bezszeryfowej, jednak wraz
z upowszechnieniem si ekranw o wyszej rozdzielczoci zalecenie to moe si zmieni.

60

Funkcjonalno stron WWW

Spord stron gwnych w naszej prbce 60%

uywao standardowego koloru czy, czyli niebieskiego. Nie jest to zdecydowana wikszo, niemniej wystarczajco znaczca, aby zaleca oznaczanie nieodwiedzonych czy kolorem niebieskim.
Jeli cza bd miay kolor niebieski, uytkownicy
nie bd zastanawia si, z czym maj do czynienia. To wszystko.
Tylko 12% witryn uywa czarnych czy.
Rozwizanie to nie jest zalecane poza sytuacjami,
gdy zaley nam na obnieniu znaczenia czy.
Zreguy ludzie odwiedzajcy stron, zastanawiajc si, gdzie mog si przenie, bd szuka
kolorowego tekstu.
W naszym badaniu 74% stron gwnych zmieniao
kolor czy prowadzcych do stron, ktre uytkownik ju odwiedzi. Gorco polecamy zmienianie kolorw odwiedzonych czy, poniewa jest to
jedna z podstawowych wskazwek dla uytkownikw, ktre z miejsc ju odwiedzili, i wygodny sposb uchronienia ich przed ogldaniem kilka razy
przez pomyk tej samej strony.
Spord witryn, ktre zmieniay kolor odwiedzanych czy, 54% zmieniao kolor czy na fioletowy
(ang. purple). Kolor jasnoniebieski i szary byy
mniej popularne, wystpujc odpowiednio w 16%
i 11% witryn. Wikszo witryn uywaa dla czy
ju odwiedzanych janiejszej lub mniej nasyconej
wersji koloru wykorzystywanego w czach jeszcze
nie odwiedzonych przez uytkownika.

Nielsen & Tahir

Zalecany projekt strony gwnej

Przedstawiona tutaj tabela prezentuje nasze rekomendacje co do wartoci kadego z kryteriw
omawianych w tym rozdziale. Nasze rekomendacje oparte s na dwch fundamentach:

Kade z naszych zalece oznaczone jest gwiazdkami, ktre informuj, jak istotne jest przestrzeganie
tego zalecenia, by mie gwarancj satysfakcji uytkownika.

1. Wynikach testw na uytkownikach, pokazujcych, jak ludzie zachowuj si w sieci.

Absolutnie podstawowe: to zalecenie

powinno by przestrzegane waciwie we
wszystkich projektach. Mona je ama
tylko wtedy, jeli wyniki bada wyka, e
w danych warunkach lepiej sprawdza si
bdzie inne rozwizanie.

2. Prezentowanych w tym rozdziale statystykach,

ilustrujcych, ktre z rozwiza projektowych
zostay wybrane przez wikszo witryn WWW.
Jednym z licznych wnioskw wynikajcych z naszych licznych studiw na temat funkcjonalnoci jest
konkluzja, e najlepiej sprawdzaj si witryny, ktre
stosuj si do konwencji znanych ju uytkownikom
z innych witryn WWW. Dlatego im wicej witryn
rozwizuje pewien problem w ten sam sposb, tym
bardziej stosowanie si do tej konwencji poprawia
uyteczno witryny. Nawet jeli dana konwencja nie
jest najoptymalniejsza z punktu widzenia teoretycznego, w praktyce bdzie si sprawdza, poniewa
uytkownicy bd rozumie, jak ona dziaa.
Problem

Stopie
wanoci

Zdecydowanie zalecane: zalecenia tego

naley przestrzega w wikszoci projektw. Mona od niego odej tylko pod warunkiem, e mamy uzasadnione powody,
by uwaa, e w danej witrynie sprawdzi
si inne rozwizanie.

Zalecane domylnie: standardowe rozwizanie, ktrego lepiej si trzyma dla wygody i bezpieczestwa, chyba e uwaamy,
i inne rozwizanie bdzie lepsze.

Zalecany sposb projektowania

czas adowania

najwyej 10 sekund dla typowej prdkoci poczenia

internetowego uywanego przez klientw; w przypadku
uytkownikw modemw oznacza to rozmiar pliku nie wikszy
ni 50 kB; im krtszy czas adowania, tym lepiej

szeroko strony

optymalnie okoo 770 pikseli, najlepiej jednak z pynnym ukadem

sprawdzajcym si dla szerokoci od 620 do 1024 pikseli

pynny a stay ukad strony

pynny

dugo strony

najlepiej jeden lub dwa ekrany, jednak nie wicej ni trzy pene
ekrany (w momencie pisania tej ksiki od 1000 do 1600 pikseli)

ramki

nie

lokalizacja logo

lewy grny rg

80 na 68 pikseli

rozmiar logo

przeszukiwanie

Naley udostpnia funkcj przeszukiwania. Na stronie gwnej.

W postaci pola tekstowego.

lokalizacja przeszukiwania

w grnej czci strony, najlepiej blisko prawego lub lewego rogu

kolor pola przeszukiwania

biay

Statystyki projektowania stron WWW

61

Problem

Stopie
wanoci

Zalecany sposb projektowania

przycisk przeszukiwania

najlepiej nazwa Szukaj (mona rwnie Znajd)

szeroko pola przeszukiwania

przynajmniej 25 znakw dugoci, lepiej jednak okoo 30

typ przeszukiwania

proste przeszukiwanie (zaawansowane lub zawone

przeszukiwanie powinno by przeniesione na inn
stron nie powinno pojawia si na stronie gwnej)

nawigowanie

najlepiej jedno z czterech podstawowych rozwiza: pasek

nawigacyjny po lewej, zakadki, cza u gry strony lub kategorie
porodku strony

dolne cza nawigacyjne

naley korzysta ze stylu stopki dla czy takich jak informacje

o autorach czy informacje kontaktowe, jednak nie powinno to by
wicej ni 7 czy; najlepiej by mieciy si w jednym wierszu dla
standardowej szerokoci okna

cze do mapy witryny

jeli jest w ofercie, najlepiej nazwa Mapa witryny

strona przekierowujca

nie

nie

strona powitalna

logowanie

jeli ma dawa dostp do chronionej zawartoci, to najlepiej uy

w nazwie tej funkcji sowa konto lub nazwa j Logowanie

informacje o firmie

zawsze naley umieszcza te informacje

najlepiej nazwa je O <nazwa-firmy>

cze do strony o firmie

informacje kontaktowe

naley udostpni cze do informacji kontaktowych

i nazwa je Kontakt

polityka prywatnoci

w przypadku zbierania informacji o uytkownikach powinna

pojawi si w witrynie, za cze do niej naley umieszcza
na stronie gwnej

nazwa cza polityki prywatnoci

najlepiej nazwa je Polityka prywatnoci

oferty pracy

naley umieci cze na stronie gwnej, jeli proces rekrutacji

ma znaczenie dla firmy (w innym przypadku lepiej umieci cze
do ofert pracy na stronie O firmie); najlepiej nazwa je
Oferty pracy

pomoc

lepiej nie udostpnia pomocy, o ile firma nie moe si

bez niej obej

lokalizacja pomocy

prawy grny rg strony

automatyczne odgrywanie
muzyki
animacje
grafika i ilustracje
reklamy

62

nie

nie

powinny zajmowa od 5 do 15% powierzchni strony gwnej

najwyej 3 reklamy (niezalenie czy wewntrzne, czy zewntrzne)

Funkcjonalno stron WWW

Nielsen & Tahir

Problem

kolor tekstu podstawowego
rozmiar tekstu podstawowego

Stopie
wanoci

Zalecany sposb projektowania

czarny
12 punktw

pynny czy stay rozmiar tekstu

nigdy stay zawsze naley korzysta z rozmiarw relatywnych,

ktre umoliwiaj uytkownikom zmienianie rozmiaru czcionki
w zalenoci do swoich potrzeb

czcionka tekstu

najlepiej bezszeryfowa

kolor ta

biay

kolor czy nieodwiedzonych

niebieski

fioletowy

kolor czy odwiedzonych

czy kolory odwiedzonych

i nieodwiedzonych czy
powinny by rne

tak nieodwiedzone cza powinny mie bardziej nasycony kolor

ni cza odwiedzone i na odwrt; naley jednak unika koloru
jasnoszarego

podkrelenie cza

tak moe za wyjtkiem czy w paskach nawigacyjnych

Statystyki projektowania stron WWW

63