Funkcjonalność Stron Internetowych

IDZ DO
PRZYKADOWY ROZDZIA
SPIS TRECI
KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG
TWJ KOSZYK
DODAJ DO KOSZYKA
CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK
CZYTELNIA
FRAGMENTY KSIEK ONLINE
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
Funkcjonalno stron
internetowych
Autor: Mark Perrow
Tumaczenie: Micha Szolc
ISBN: 83-7197-731-X
Tytu oryginau: Web Site Usability Handbook
Format: B5, stron: 256
Zawiera CD-ROM
Dobra strona internetowa to strona funkcjonalna. Wrd zagadnie zwizanych
z funkcjonalnoci stron internetowych zwykle wymienia si dwa podstawowe: edukacj
ludzi pod ktem tworzenia bardziej funkcjonalnych stron oraz rozwijanie umiejtnoci
oceny ich funkcjonalnoci.
Zadaniem tej ksiki jest zebranie i uporzdkowanie podstaw teoretycznych
dotyczcych funkcjonalnoci stron internetowych. Dotychczas osoba zainteresowana
tym tematem musiaa czerpa wiedz z rnych artykuw i podrcznikw do
testowania funkcjonalnoci, doczonych do oprogramowania. Celem tej ksiki jest
okrelenie metodologii, ktra umoliwi stosowanie zasad funkcjonalnoci podczas
projektowania stron internetowych.
Mam nadziej, e nauka o funkcjonalnoci stron internetowych wyda Ci si interesujca
i bdzie dla Ciebie wyzwaniem.
O ksice ........................................................................................ 9
Przedmowa .................................................................................... 11
Rozdzia 1.
Wprowadzenie ............................................................................... 13
Czym jest funkcjonalno? .............................................................................................13
Czym nie jest funkcjonalno.........................................................................................17
Troch historii.................................................................................................................19
Troch argonu ...............................................................................................................20
Czynniki ludzkie .............................................................................................................20
Dlaczego funkcjonalno? ..............................................................................................22
Jak co staje si bezuyteczne?.......................................................................................23
To, czego potrzebujesz, by rozpocz swoj przygod
z funkcjonalnoci stron internetowych ......................................................................25
Przekazywanie innym wiedzy o funkcjonalnoci...........................................................28
Podsumowanie................................................................................................................30
wiczenia praktyczne .....................................................................................................31
Tematy do dyskusji.........................................................................................................31
Rozdzia 2.
Projektowanie zorientowane na uytkownika................................... 33

Czym jest projektowanie zorientowane na uytkownika?..............................................33
Uytkownicy nie zawsze wiedz, czego chc ................................................................36
Cykliczno prac nad funkcjonalnoci..........................................................................37
Populacja a prba............................................................................................................39
Poznawanie uytkownikw ............................................................................................43
Cige modyfikowanie....................................................................................................48
Podsumowanie................................................................................................................51
Rozdzia 3.
Przybornik funkcjonalnoci ............................................................. 53

Do zapewnienia funkcjonalnoci potrzeba wielu narzdzi.............................................53
Przybornik.......................................................................................................................56
Podsumowanie rozdziau ................................................................................................73
Rozdzia 4.
Czynniki ludzkie ............................................................................. 75

Od kuchni........................................................................................................................75
Czym jest psychologia czynnikw ludzkich?.................................................................76
Funkcjonalno stron internetowych

Troch o historii psychologii czynnikw ludzkich.........................................................76
Czym zajmuj si specjalici ds. czynnikw ludzkich? .................................................76
Czego ucz si specjalici ds. czynnikw ludzkich? ......................................................77
Gdzie pracuj specjalici ds. czynnikw ludzkich?........................................................77
Zudzenia optyczne .........................................................................................................83
Such ...............................................................................................................................85
Czucie i postrzeganie ......................................................................................................85
Ludzka pami a Sie .....................................................................................................87
Strony pene tekstu .........................................................................................................94
Przyspieszacze w Sieci ...................................................................................................96
Podsumowanie rozdziau ................................................................................................97
Rozdzia 5.
Wskazwki dla projektantw .......................................................... 99

Fakty ...............................................................................................................................99
Nawigacja .....................................................................................................................105
Inne uyteczne wskazwki ...........................................................................................108
Podsumowanie rozdziau ..............................................................................................125
wiczenia praktyczne ...................................................................................................125
Tematy do dyskusji.......................................................................................................126
Rozdzia 6.
Ocena heurystyczna ..................................................................... 127

Czym jest heurystyka?..................................................................................................127
Dziesi zasad heurystyki funkcjonalnoci ..................................................................128
Dodatkowe zasady dotyczce Sieci ..............................................................................137
Metodologia oceny heurystycznej ................................................................................142
Rozdzia 7.
Tworzenie laboratorium funkcjonalnoci........................................ 149

Zakadanie laboratorium ...............................................................................................149
Wskazwki oglne........................................................................................................150
Ukad prosty..................................................................................................................151
Prosty ukad laboratorium wyposaonego w sprzt wideo...........................................152
Laboratorium z pokojem obserwacyjnym ....................................................................156
Pomieszczenie grupy fokusowej...................................................................................156
Przegld wyposaenia laboratorium .............................................................................157
Wynagradzanie uczestnikw ........................................................................................164
adnych zegarw w laboratorium! ...............................................................................165
Rozdzia 8.
Testowanie funkcjonalnoci ......................................................... 167

Co wicej ni tylko kolejne narzdzie w przyborniku ................................................167
Projekt klasycznego badania eksperymentalnego ........................................................168
Projektowanie zada testowych....................................................................................175
Potencjalne trudnoci....................................................................................................176
Wykonywanie planu .....................................................................................................178
Spis treci
Rozdzia 9.
Dostpno w Sieci ..................................................................... 187

Funkcjonalno a dostpno .......................................................................................187
Wskazwki W3C dotyczce dostpnoci w Sieci ........................................................188
XML a dostpno w Sieci ...........................................................................................200
CSS2 i nie tylko ............................................................................................................204
Rozdzia 10. czenie wszystkich elementw ................................................... 207

Tworzenie oglnego planu ...........................................................................................207
Firma i jej strona ...........................................................................................................207
Zesp ...........................................................................................................................208
Wdroenie planu ...........................................................................................................209
Wskazwki kocowe ....................................................................................................214
Rozdzia 11. Przeksztacanie danych w informacje............................................ 217

Po co uczy si statystyki? ...........................................................................................217
Dane przede wszystkim ................................................................................................218
Wszystko w swoim czasie ............................................................................................219
Miary koncentracji........................................................................................................221
Koncepcje projektowania bada...................................................................................225
Wnioski.........................................................................................................................227
Analiza pliku logowania serwera..................................................................................228
Dodatek A
Test funkcjonalnoci strony firmowej korporacji Xolax................... 233

Wstp ............................................................................................................................233
Cel.................................................................................................................................233
Zagadnienia problemowe..............................................................................................234
Profile uytkownika......................................................................................................234
Metodologia ..................................................................................................................237
rodowisko testowe i wymagania sprztowe ...............................................................238
Sposoby oceny ..............................................................................................................239
Lista zada ....................................................................................................................239
Raport kocowy............................................................................................................241
Cz A.........................................................................................................................244
Cz B .........................................................................................................................246
Cz C .........................................................................................................................247
Cz D.........................................................................................................................248
Dodatek B
O CD-ROM-ie................................................................................ 251
Skorowidz.................................................................................... 253
Rozdzia 5.
Decydent: osoba odpowiedzialna za podejmowanie decyzji kluczowych

z punktu widzenia firmy i jej pracownikw.
Fakty
Najzabawniejsz czci ksiek takich jak ta s rozdziay powicone tajnikom projektowania, ktre uczyni Twoj stron lepsz. Pozostaa cz ksiki powicona
bdzie sposobom analizowania ju zaprojektowanych stron. Natomiast w tym rozdziale poka Ci, jak tworzy nowe projekty. Mimo i projektowanie nie jest gwnym tematem tej ksiki, to dobry projekt jest jednym z warunkw wysokiego poziomu funkcjonalnoci. W tym rozdziale znajdziesz wiele wskazwek zwikszajcych
funkcjonalno strony internetowej. S to bardzo racjonalne wskazwki, niestety ludzie
wci je ignoruj.
Musisz pamita, e nie znajdziesz tu rozwizania wszystkich problemw zwizanych z funkcjonalnoci stron internetowych. Przetestowanie Twojej strony pod ktem opisanych tu zasad nie wystarczy, by mg zrezygnowa z innych dziaa. To s
tylko wskazwki. Dobra strona internetowa to wynik wiadomych decyzji podejmowanych przez grup osb, opartych na ich wsplnych dowiadczeniach. Podejcie do
badania funkcjonalnoci stron internetowych jak do gotowania z ksik kucharsk
w rce jest rwnie rozsdne jak takie samo podejcie do operacji mzgu.
Lista podanych zasad nie jest w adnym wypadku zamknita i powinna by dla Ciebie
podstaw do opracowania wasnego zestawu wskazwek. Gdy znalazem stron bdc
przykadem omawianych zasad, zamieciem jej zrzut ekranowy. Jak ju zaznaczyem
na samym pocztku ksiki, fakt zaczenia jakiejkolwiek ze stron nie ma na celu ani
jej wychwalania ani te pitnowania. Strony te dostpne s dla wszystkich.
100
Nie twrz uliczek bez powrotu

Staraj si nie tworzy stron, z ktrych mona si wydosta jedynie za pomoc przycisku Cofnij przegldarki. Upewnij si, e kada strona, ktr stworzye, pozwoli na
przejcie do strony gwnej oraz jeden poziom wyej.
Nazewnictwo kategorii
Tworzc linki lub nagwki, pamitaj o nazwach zwizanych z czynnociami wykonywanymi przez uytkownika, unikaj za nazw pochodzcych od procesw zachodzcych wewntrz strony. Na przykad zamiast linku przetwarzanie uyj wyraenia
opu stron, poniewa uytkownik szybciej zrozumie znaczenie takiej etykiety.
Wskazwka ta odnosi si do zasady heurystyki brzmicej: Uywaj naturalnego jzyka
uytkownika (zobacz rysunki 5.1 i 5.2).
Rysunek 5.1.
Oto przykad strony
opisanej jzykiem
uytkownika. Po co
odwiedzamy strony
z akcesoriami
dla zwierzt?
Najpewniej po to,
by je zakupi
i dlatego te
projektanci opisali
poruszanie si po
stronie, uywajc
nazw czynnoci,
ktre uytkownik
chciaby wykona
Spjno elementw
Upewnij si, e wszystkie elementy Twojej strony maj pewne cechy wsplne,
umoliwiajce uytkownikowi rozpoznanie, na jakiej stronie si znajduje. Rwnie
sposb poruszania si po stronie powinien by spjny. Przejcie od nagwkw z lewej
czci strony do hiperczy w postaci dziwnych obrazkw na samym rodku ekranu
wprowadza zamieszanie i jest raczej nieestetyczne.
Rozdzia 5. Wskazwki dla projektantw
101
Rysunek 5.2.
Poniewa firma
FedEx ma nadziej
na obnienie kosztw
i na wiadczenie
wartociowych usug
dla swoich klientw,
zdecydowaa si
na umieszczenie
najpopularniejszej
usugi ledzenia
przesyki od razu
na pierwszej stronie
Wskazwka ta moe by trudna do zastosowania podczas koordynowania zawartoci

stron rnych dziaw firmy. Bardzo atwo utraci spjno, powiniene wic uzgodni
z przedstawicielami innych dziaw to, jak bdzie wyglda szablon strony (zobacz
rysunki 5.3, 5.4, 5.5).
Rysunek 5.3.
Oto powszechnie
rozpoznawana strona
gwna Amazon.com
Testuj stron przy uyciu rnych przegldarek

i w rnych warunkach
Czy pamitasz histori z rozdziau 2. o studentach, ktrym nie chciao si sprawdzi,
jak wyglda strona w przegldarce innej ni przez nich uywana? Stracili przez to duo
czasu i energii. Powtrz jeszcze raz: przetestowanie strony w kilku przegldarkach,
na kilku platformach, w rnych rozdzielczociach i rozmiarach monitora jest absolutn koniecznoci. Najwygodniej jest, gdy w Twojej firmie istnieje laboratorium z rnymi komputerami tylko do Twoich testw.
102
Rysunek 5.4.
Oto kolejna
strona naleca
do Amazon.com
znajdujca si
jednak w innej
sekcji. Zauwa,
e projektanci
zachowali spjno,
co oznacza,
e uytkownicy
nie musz co chwil
poznawa nowego
interfejsu
Rysunek 5.5.
Niektre firmy
zaczy wzorowa
si na szablonach
innych firm po to,
by wykorzysta
schematy istniejce
w pamici
uytkownikw.
Wyobra sobie,
jak skomplikowany
byby wiat,
gdyby producent
samochodw musia
wymyla zupenie
nowy ukad
kierowniczy
tylko dlatego,
e konkurencyjna
firma opatentowaa
kierownic
Testuj stron przy rnych rodzajach pocze. Jeli okae si, e aduje si ona skandalicznie wolno przy poczeniu modemowym, bdziesz musia j zmodyfikowa (patrz
rysunek 5.6).
Umieszczanie najwaniejszych informacji

Wikszo uytkownikw ogranicza si tylko do tych informacji, ktre widoczne s
na ekranie w momencie otwarcia strony, i nie ma w zwyczaju sprawdzania, co znajduje
si poniej.
103
Rysunek 5.6.
Jeli Twoja
strona wymaga
umieszczenia takiego
owiadczenia,
oznacza to,
e powiniene
powanie zastanowi
si nad swoim
projektem. Nie staraj
si naladowa
Prokrusta
i dopasowywa
uytkownika
do strony
Musisz wic upewni si, e wszystkie wane informacje bd widoczne na 15-calowym

monitorze, w rozdzielczoci 640480 (wielkoci te bd si zmienia wraz z popularyzacj coraz wikszych monitorw). Co wicej, bdziesz musia rozwiza problem
liczby kolorw, gdy wiele osb nie posiada 24-bitowych kart graficznych lub te nie
wie, e moe zmieni ustawienia z 8 na 24 bity (zobacz rysunki 5.7 i 5.8).
Rysunek 5.7.
Na tym rysunku
wida, e projektanci
umiecili wiele
najwaniejszych
funkcji u gry
ekranu, jednake
system poruszania si
po stronie znajduje
si na samym dole,
co moe nieco
utrudni korzystanie
z niej
Przesuwanie poziome zabronione

O ile mona zaakceptowa przesuwanie ekranu w pionie, to konieczno przesuwania
go w poziomie musi by absolutnie wyeliminowana. Nie twrz nigdy stron zbyt szerokich, lecz takie, ktre zmieszcz si na ekranie w rozdzielczoci 640 pikseli.
104
Rysunek 5.8.
Oto cz strony
przedstawiona na
rysunku 5.7, ktra
znajduje si na
samym dole
Jeszcze trudniej jest uytkownikom WebTV, gdy ich ekrany umoliwiaj wywietlanie stron jedynie w rozdzielczoci 544372 piksele. Strony o szerokoci wikszej
ni 544 piksele s dzielone, a to zazwyczaj wyglda mao zachcajco.
Myl globalnie
Ju samo okrelenie World Wide Web wiadczy o midzynarodowym charakterze
Sieci. Oznacza to, e powiniene umoliwi korzystanie ze strony uytkownikom
mwicym innym jzykiem ni Ty. Porusz ten temat jeszcze w dalszej czci ksiki:
programy do automatycznego tumaczenia nie nadaj si do zastosowania na firmowych stronach internetowych. S one zabawne i mog pomc w poruszaniu si po
stronie stworzonej w zupenie nieznanym jzyku, ale nie s wystarczajco inteligentne,
by obyo si bez prawdziwego tumaczenia (zobacz rysunek 5.9).
Unikaj uywania flag pastwowych do oznaczania jzykw. Niejednokrotnie w jednym
pastwie uywa si trzech lub czterech jzykw i jeszcze wicej dialektw. W wikszoci
przypadkw moesz okreli, jakie s preferencje uytkownika co do uywanego jzyka.
Za kadym razem, gdy uytkownik pobiera dokument ze strony, moesz za pomoc CGI
uzyska informacje o jzyku uytkownika lub domylnym jzyku jego przegldarki.
Ostrzeganie o rozmiarze plikw

Jeli umieszczasz na stronie link do pliku wideo, PDF czy te jakiegokolwiek innego
pliku, ktrego rozmiar jest wikszy ni rozmiar strony (powiedzmy ponad 45 kB),
powiniene poda jego wielko. Dziki temu uytkownik bdzie mia moliwo
zrezygnowania ze cigania pliku, jeli nie ma ochoty na dugie oczekiwanie. Dobrym
zwyczajem jest umieszczanie przewidywanego czasu cigania pliku przy okrelonej
szybkoci poczenia, np. 28,8 k lub 56 k.
105
Rysunek 5.9.
Strona internetowa
firmy
Hewlett-Packard
miaa kiedy bardzo
frustrujc cech.
Gdy poszukiwae
na niej sterownika
do drukarki Laser Jet,
kada wersja
sterownika, w kadej
wersji jzykowej
zwracana bya przez
wyszukiwark jako
osobne trafienie.
Nie mwi po
niemiecku, wic opis
oprogramowania
w tym jzyku raczej
na nic mi si
nie przyda. Teraz
HP umoliwia
przynajmniej wybr
jzyka
Nawigacja
Wykorzystanie grnej i lewej czci ekranu
Niektrzy projektanci staraj si tworzy bardziej oryginalne witryny poprzez umieszczenie elementw nawigacyjnych w innych czciach strony ni zazwyczaj. Nie rb
tego! Takie dziaanie zmniejsza funkcjonalno strony. Grna oraz lewa cz strony
to miejsca, w ktrych uytkownicy najczciej szukaj informacji o poruszaniu si po
stronie.
W jednym z najgorszych projektw, jakie ostatnio widziaem, twrca umieci elementy nawigacyjne z prawej czci stron i do tego ukry je pod animowanymi rysunkami w formacie GIF. aden z uczestnikw testw nie potrafi porusza si po stronie,
traktujc jej elementy nawigacyjne jak reklamy (pamitaj: animacja + prawa cz
strony = szum).
106
Unikaj zbdnych elementw nawigacyjnych

Czasami dobrze jest umieci na stronie dodatkowe elementy nawigacyjne. Na przykad, jeli podstawowym elementem nawigacyjnym strony jest znajdujca si w jej
grnej czci mapa, dobrym rozwizaniem jest umieszczenie na dole strony linkw
tekstowych.
Z drugiej jednak strony, umieszczenie dwch zestaww elementw nawigacyjnych
w polu widzenia uytkownika rwnoczenie moe by mylce. Na rysunkach 5.10 i 5.11
przedstawiono strony zawierajce co najmniej trzy zestawy elementw nawigacyjnych jednoczenie. Czym rni si te zestawy? Jak rozumie fakt, e wystpuj niezalenie od siebie? Ktrego z nich naley uy?
Rysunek 5.10.
System nawigacyjny
na przedstawionej
stronie jest odrobin
chaotyczny. Caa
strona jest niespjna,
a uycie nietypowych
nazw dla linkw
w lewej czci ekranu
wprowadza jedynie
w bd
Rysunek 5.11.
Oto przykad strony,
ktrej system
nawigacyjny moe
wprowadza w bd.
Jaka jest np. rnica
midzy dwoma
linkami Home?
107
Dodatkowe elementy nawigacyjne

Kady z uytkownikw moe preferowa wasny sposb poruszania si po stronach
internetowych. Dlatego te powiniene rozway umieszczenie na stronie elementw
skadajcych si na trzy rne systemy nawigacyjne: linki na kadej stronie, plan
strony oraz wyszukiwark (patrz rysunki 5.12 i 5.13).
Rysunek 5.12.
Zwr uwag na to,
e pomimo
wystpowania wielu
wad z punktu
widzenia
funkcjonalnoci
na tej stronie,
projektanci
umoliwili
uytkownikom
skorzystanie
z czterech rnych
systemw nawigacji:
planu strony,
klasycznych
elementw
nawigacyjnych, spisu
alfabetycznego
oraz wyszukiwarki.
Niestety, plan strony
i spis alfabetyczny
s dostpne jedynie
na stronie gwnej
Jasne i zrozumiae linki

Bd ostrony podczas tworzenia tekstowych hiperczy. Postaraj si, aby byy jak najbardziej zrozumiae. Nie pozostawiaj uytkownikom miejsca na domylanie si, gdzie
dane cze prowadzi.
Nie ukrywaj linkw

Kiedy autorzy stron internetowych twierdzili, e hipercza powinny by czci
zwykego tekstu. Niestety, w praktyce rozwizanie to si nie sprawdza. Unikaj ukrywania linkw w tekcie. Liczba uytkownikw reagujcych jedynie na polecenie
Klikaj tutaj jest wci przeraajco wysoka.
108
Rysunek 5.13.
Oto kolejny przykad
dodatkowego
systemu
nawigacyjnego:
plan strony
Inne uyteczne wskazwki

Uycie WebTV
Wszystkie japoskie i pnocnoamerykaskie systemy WebTV (korzystajce ze standardu NTSC) wywietlaj strony internetowe w okrelonej czci ekranu o wymiarach 544 na 372 piksele. Oznacza to, e jeli chcesz, by Twoje strony mogy by
przegldane przez osoby korzystajce z takich urzdze, musisz wzi to pod uwag
podczas projektowania. Wicej informacji na temat projektowania pod ktem WebTV
znajdziesz pod adresem http://developer.msntv.com/Designing/Default.asp (patrz rysunek 5.14).
Doczenie opcji Jeste tutaj

Opcja ta umoliwia uytkownikowi okrelenie, w ktrym miejscu strony w danym
momencie si znajduje (patrz rysunek 5.15).

Rysunek 5.14.
Emulator WebTV
to tylko jedno
z narzdzi, z jakich
deweloperzy bd
musieli korzysta
w najbliszej
przyszoci, aby ich
aplikacje docieray
do jak najwikszej
iloci odbiorcw
Rysunek 5.15.
Zauwa,
e twrcy stron
przedstawionych
na tym rysunku oraz
na rysunku 5.16
stworzyli system
poruszania si
po stronie
umoliwiajcy
uytkownikom
stwierdzenie,
w ktrym jej miejscu
aktualnie si
znajduj. W tym
przypadku moliwe
jest to dziki
znajdujcemu si
na dole strony
listingowi
109
110
Rysunek 5.16.
Strona ta uatwia
uytkownikowi
poruszanie si
po niej poprzez
znajdujcy si
z lewej strony
zestaw ikon
Ogranicz uycie kolorw w tabelach

Jeli planujesz utworzy tabel z danymi, a rne typy danych oznaczy rnymi kolorami, powiniene ograniczy ich liczb do czterech, a w skrajnych przypadkach do
szeciu. Uycie w tabeli zbyt wielu kolorw utrudni jej odczytywanie nie tylko osobom z wad wzroku, ale wszystkim uytkownikom.
Tak naprawd im wicej kolorw uyjesz, tym atwiej bdzie je pomyli. Duo skuteczniejsze jest uywanie kolorw oszczdnie, do podkrelenia jednego lub dwch
najwaniejszych punktw lub do wyrnienia jednego z wielu elementw.
Nie przesadzaj
Moe Ci si wydawa, e umieszczenie elementw marynistycznych na stronie powiconej eglarstwie jest jak najbardziej uzasadnione. Jednake nazywanie typowych
elementw strony takich, jak plan strony, pomoc uytkownika czy informacje o zamwieniu Sekstans, Kotwica oraz Skarb piratw wywoa, oprcz rozbawienia,
duo zamieszania. Proponuj, by pozosta przy typowych, powszechnie znanych nazwach, a zabawne pomysy pozostawi na inne okazje (patrz rysunki 5.17 i 5.18).
Zadbaj o zastpcz zawarto

Pamitaj, by zawsze umieszcza tekstow wersj swojej strony, z ktrej bd mogli
skorzysta ci uytkownicy, ktrzy z rnych przyczyn nie s w stanie korzysta z elementw graficznych (osoby z wadami wzroku, uytkownicy palmtopw, ktrzy nie
mog wyczy wywietlania elementw graficznych itd.).
111
Rysunek 5.17.
Twrca tej strony
musi dobrze
posugiwa si
programem Kais
Power Tools.
Poruszanie si
po tej stronie jest
do utrudnione,
poniewa elementy
nawigacyjne
aktywuj si dopiero
po najechaniu na nie
kursorem
Rysunek 5.18.
Oto kolejny przykad
strony, na ktrej
projektant posun
si o krok za daleko.
Niewyrane elementy
nabieraj ostroci
po najechaniu
na nie kursorem.
Gdy wyczysz
w przegldarce
obsug Java Script
lub jeli w ogle
jej nie posiadasz,
bdziesz musia
bardzo si namczy,
by porusza si
po tej stronie
Kolejnym argumentem przemawiajcym za wykorzystaniem tekstu na stronie jest to,

e wyszukiwarki nie bd indeksowa Twojej strony, jeli bdzie si ona skada wycznie z obrazkw (patrz rysunek 5.19).
Rysunek 5.19.
Oto strona
firmy Oracle.
Bez komentarza
112
Uywaj atrybutu ALT w opisach rysunkw

Gdy umieszczasz na stronie rysunek, moesz postara si, by bya ona bardziej dostpna dla wszystkich uytkownikw. Wystarczy, e w opisie rysunku uyjesz atrybutu ALT, by osoby niekorzystajce z wywietlania elementw graficznych mogy
przynajmniej przeczyta ich opis.
Pamitaj, by na kocu opisu, w ktrym wykorzystujesz atrybut ALT, umieszcza kropk.
Dziki temu osoby korzystajce z syntezatorw mowy nie bd zmuszone wysuchiwa bardzo dugich zda.
Korzystaj z tych samych obrazkw

Aby skrci czas adowania strony, staraj si jak najczciej korzysta z tych samych
obrazkw. Gdy obrazek zosta ju raz zaadowany i znajduje si na dysku twardym
uytkownika, przez pewien czas zostaje w cacheu przegldarki. Czynno t moesz
jeszcze przyspieszy, dzielc due obrazki na kilka mniejszych. Dziki temu, zmieniajc jedn cz systemu nawigacyjnego, by wskaza uytkownikowi, w jakim
miejscu strony si znajduje, moesz zaktualizowa jedynie t ma cz, a reszta pozostanie niezmieniona.
Istnieje kilka narzdzi, ktre Ci w tym pomog, na przykad Macromedia Fireworks
oraz Adobe Photoshop (opcja ta bya dostpna w innym produkcie firmy Adobe Image
Ready, ktry zosta zastpiony przez Photoshopa).
cz kategorie midzy sob

Czy kiedykolwiek zdarzyo Ci si zmarnowa mas czasu w poszukiwanie latarki,
gdy Twj wsplokator lub brat posprzta Twj pokj? Tak? To pewnie wiesz, e nie
wszyscy szukaj przedmiotw w tych samych miejscach. Najwikszym problemem
w poszukiwaniu rzeczy w Sieci jest to, e projektantom wydaje si, e s absolutnymi
autorytetami w tworzeniu kategorii. Pamitaj, by podczas projektowania strony wykorzysta technik ukadania kart. Uytkownicy poka Ci w ten sposb, gdzie powinny
znajdowa si poszczeglne elementy. Jeli istniej obiekty, ktre wci klasyfikowane s do kilku rnych kategorii, powiniene czy je midzy sob.
Unikaj animacji
Jednym z najwikszych przeklestw wspczesnych stron internetowych s wszechobecne animowane rysunki w formacie GIF. Im wicej projektantw uywa animacji
do tworzenia irytujcych reklam, tym mniej uytkownikw zwraca na nie uwag.
Jeli koniecznie musisz umieszcza animacje na swojej stronie, rb to z umiarem.
Wykorzystanie animacji zawierajcych uyteczne informacje jest moliwe (zobacz
rysunek 5.21).
113
Rysunek 5.20.
Jedna ze stron
internetowych MIT
wyglda jak
niezorganizowany
zbir informacji
dlatego, e projektant
umieci je na stronie
w kolejnoci
alfabetycznej.
Zauwa, e niektre
z elementw
poczone s midzy
sob, tak by uatwi
uytkownikom
poruszanie si
po stronie
Rysunek 5.21.
Na tym rysunku nie
zauwaysz animacji,
jakie umieszczono na
stronie internetowej,
ale zapewniam Ci,
e jest ich na niej
wiele. Minie jednak
troch czasu, zanim
projektanci
zrozumiej,
e upodabnianie
stron internetowych
do telewizji
za wszelk cen,
nie musi wyj im
na dobre. Animacje
w nadmiarze to
nie jest najlepsze
rozwizanie
Nie uywaj rysunkw przypominajcych reklamy

Podstawowe elementy nawigacyjne strony powinny wyglda dokadnie tak jak elementy nawigacyjne. Wydaje si to dosy logiczne, jednake istnieje wiele stron amicych t zasad. Spjrz na rysunki 5.22 i 5.23 i zwr uwag na znajdujc si po lewej
stronie ikon z napisem Call me now. W rzeczywistoci jest to bardzo wany link,
114
ale z racji jego dwuznacznej etykiety oraz wygldu przypominajcego przycisk, istnieje
due prawdopodobiestwo, e uytkownicy nie bd wiedzieli, jak z niego korzysta.
Przypomina on reklam, a wielu uytkownikw unika ich jak ognia.
Rysunek 5.22.
Dziki popularnoci
animowanych plikw
graficznych typu GIF
uytkownicy mog
pomija elementy
przypominajce
reklam, jak obrazek
call me now
Rysunek 5.23.
Jeszcze raz przyjrzyj
si wszystkim
elementom
nawigacyjnym.
Podczas kilku
przeprowadzonych
testw co najmniej
70% uytkownikw
nie dostrzego ikon
znajdujcych si
po prawej stronie
ekranu
Unikaj niedziaajcych linkw

Proces sprawdzania poprawnoci linkw na stronie celem wyeliminowania tych niesprawnych mona bardzo atwo zautomatyzowa. Su do tego specjalne programy
oraz skrypty w jzyku PERL. Mimo tego w Sieci peno jest stron z niedziaajcymi
linkami. Dotyczy to nawet stron z listy Fortune 500.
115
Monitoruj sowa poszukiwane przez uytkownikw

Jeli uytkownicy czsto szukaj na Twojej stronie tych samych sw lub zagadnie,
moe to oznacza, e powiniene te informacje bardziej wyeksponowa.
Umie opcje wyszukiwania na kadej stronie

Narzdzia do wyszukiwania niezbdne s praktycznie na wszystkich stronach internetowych. O ile wyszukiwarka nie powinna by nigdy podstaw poruszania si po
Twojej stronie, dobrze jest mie do niej dostp w kadej chwili.
Naley jednoczenie pamita, e umieszczenie na stronie dwch rnych mechanizmw wyszukiwania moe wprowadza w bd.
Nie umieszczaj na stronie mechanizmw

przeszukujcych ca Sie
Umieszczenie na stronie wyszukiwarki jest bardzo przydatne, dopki dziaa ona w obrbie
tej strony, a nie caej Sieci. Uytkownicy wiedz doskonale, gdzie mog znale takie
wyszukiwarki. Umieszczenie na stronie mechanizmw przeszukujcych wszystkie zasoby internetowe jest bardzo frustrujce i mylce z punktu widzenia uytkownika poszukujcego informacji znajdujcych si na tej konkretnej stronie.
Nie przesad z metaforami

Mimo i uycie przenoni moe pomc uytkownikowi w lepszym zrozumieniu strony,
ich nieprawidowe zastosowanie potrafi by o wiele bardziej szkodliwe ni konstruktywne. Najczciej spotykane bdy w zastosowaniu przenoni to:
t nadmiar metafor powodujcy zamieszanie;
t czenie metafor, ktre jest nie tylko naganne ze stylistycznego punktu
widzenia, ale przede wszystkim wprowadza w bd uytkownika;

t przenonie, ktre nie maj sensu z punktu widzenia uytkownika, s
bezuyteczne. Przenonia, ktra jest zrozumiaa z Twojego punktu widzenia,

wcale nie musi by taka dla uytkownika. Nie kady jest programist i dla
pewnych osb przenonia moe po prostu nie mie sensu. Co gorsza, moe
te znaczy co zupenie innego!
t jeli decydujesz si na uycie metafory, rb to tylko wtedy, gdy jeste pewien,
e jest to odpowiedni czas i miejsce.
116
Wykonuj testy funkcjonalnoci

na stronach konkurencji
Poznawanie swojego uytkownika oznacza rwnie poznawanie swojej konkurencji.
Wykonywanie oceny funkcjonalnoci stron swoich konkurentw moe da Ci nad
nimi przewag.
Nie naduywaj wyrnie

Przypominasz sobie paragraf napisany duymi literami z rozdziau 4.? Wyrnienia
takie, jak pogrubienie, pochylenie i inne przycigajce uwag uytkownika techniki
zachowaj na naprawd wane okazje. W ten sposb bdziesz mia pewno, e gdy
zechcesz zwrci na co uwag uytkownikw, uda Ci si to.
Nie naduywaj najnowszych zdobyczy techniki

To, e na pkach sklepowych pojawia si najnowsza wersja technologii Zap, nie oznacza, e koniecznie musisz j od razu stosowa. Tak naprawd dobrze jest pozostawa
odrobin w tyle. Wtedy masz pewno, e wikszo bdw nowej technologii zostanie
usunita, zanim zastosujesz j w swoim projekcie (zobacz rysunki 5.24 5.26).
Rysunek 5.24.
Ta strona
z pewnoci
zasuguje
na nagrod.
By uczyni j
jeszcze bardziej
atrakcyjn wizualnie,
wykorzystano w niej
DHTML. A oto jak
wygldaa w mojej
przegldarce
Zrozumiae URL-e
Niestety najlepsze nazwy domen s ju teraz zajte. Zdobycie atwej do zapamitania
nazwy moe by wic bardzo trudne.
Nie zmienia to faktu, e moesz kontrolowa nazewnictwo folderw i stron wewntrz
Twojej domeny. Stworzenie katalogw o nazwach powizanych z poszczeglnymi czciami strony uatwi uytkownikom poruszanie si po niej. Na przykad, by uzyska
najnowsze informacje na temat systemu operacyjnego Macintosh, wystarczy przej
na stron www.apple.com/macos.
117
Rysunek 5.25.
Zanim zastosujesz
now technologi,
upewnij si,
e dokadnie j
przetestowae.
Lepiej stworzy
stron mniej
efektown,
lecz bardziej
pewn
Rysunek 5.26.
Ta strona rwnie
wykorzystuje
DHTML w systemie
rozwijanych menu.
Wszystko jest
w porzdku,
pod warunkiem
e upewnie si,
i uytkownicy
nieuywajcy
DHTML rwnie
bd mogli porusza
si po tej stronie.
Dodatkowo na tej
stronie popeniono
jeden z podstawowych
bdw: mae,
niebieskie literki
na niebieskim tle
ograniczajce
dostpno do tej
strony uytkownikom
Pamitaj, e nazewnictwo, ktre zastosujesz, nie moe by podstawow systemu nawigacji Twojej strony. Niezalenie od przyjtej konwencji powiniene stworzy jasny
i pomocny system nawigacyjny.
118
Tekst czy ikony

Ktry system nawigacyjny jest lepszy: oparty na tekcie czy na ikonach (zobacz rysunek
5.27)? To zaley. Tekst zwycia w sytuacji, gdy mamy do czynienia z uytkownikiem, ktry po raz pierwszy odwiedza dan stron. Ikony natomiast s szybciej rozpoznawalne, gdy uytkownik zna ju ich znaczenie. Dlatego te powiniene uywa
obu tych systemw jednoczenie tekstu dla pocztkujcych uytkownikw oraz
ikon dla uytkownikw dowiadczonych.
Rysunek 5.27.
Spjrz na ten zrzut
ekranowy i sprbuj
znale link
prowadzcy
do podstrony,
na ktrej mona
zarezerwowa pokj
w hotelu. Gdy ju
Ci si to uda,
zastanw si,
w jaki sposb
go odnalaze.
Czy pomoga Ci
w tym ikona? A moe
tekst? Czy znalazby
ten link bez jednego
z tych elementw?
W jakich warunkach
lepiej sprawdzaj si
ikony, a w jakich
tekst?
Szeroko czy gboko

Istnieje obiegowa opinia, e lepiej jest tworzy strony szerokie (czyli takie, ktre zawieraj wiele linkw na kadej stronie, zmniejszajc tym samym ilo klikni, jakie naley
wykona, by dotrze do danych informacji) ni wskie (mniej linkw na stronie, lecz
wicej klikni, by dosta si do informacji). Moje dowiadczenie to potwierdza.
Pamitaj, e tworzc szerok stron, musisz jednoczenie zastosowa wiele technik
uatwiajcych uytkownikowi korzystanie z niej. Moe Ci w tym pomc na przykad
dzielenie informacji oraz sygnay przestrzenne.
Pamitaj o domylnej czcionce

Czy nie byoby przyjemnie, gdyby do stworzenia strony mg uy dowolnej czcionki?
Czy nie byoby wspaniale, gdyby kada osoba przegldajca Twoj stron widziaa
j w ten sam sposb? Niestety, rzeczywisto jest troch inna.
119
Sprawd, czy Twoja strona wyglda dobrze przy uyciu domylnych czcionek kadego
systemu operacyjnego i uyj CSS, by upewni si, e jeli dana czcionka jest niedostpna, zostanie zastpiona inn.
Wygoda drukowania
Jeli na stronie umiecie duo tekstu (gdy na przykad jest go na tyle duo, e musiae podzieli go na kilka stron), pamitaj o zamieszczeniu na stronie wersji tekstu
przeznaczonej do wydrukowania w formacie PDF lub HTML (zobacz rysunek 5.28).
Rysunek 5.28.
Po obejrzeniu
programu
telewizyjnego
postanowiem
poszuka w Sieci
przepisu na sushi.
Na szczcie kto
rozsdny umieci
na tej stronie link
do wersji
przygotowanej
1
do druku
Optymalizuj obrazki
Co prawda optymalizacja obrazkw nie mieci si w zakresie tematycznym tej ksiki
(wicej informacji znajdziesz w ksikach Lyndy Weinman na stronie www.lynda.com),
ale jest tematem do istotnym. Ograniczenie rozmiaru plikw graficznych jest bardzo wane dla poprawnoci funkcjonowania strony. Koniecznie powiniene zoptymalizowa obrazki na swojej stronie, o ile jeszcze tego nie zrobie. Bdziesz zaskoczony, ile miejsca moesz zaoszczdzi (zobacz rysunki 5.29 i 5.30).
1
Link Printer Firendly Version u gry ekranu przyp. tum.
120
Rysunek 5.29.
Oto olbrzymi
obrazek na stronie
Torent Systems
(patrz wskazwka
Rwnowaga na
kocu rozdziau).
Obrazek ten
przedstawia
internetow
autostrad. Jest to
plik formatu JPEG
o wielkoci 386 kB
Rysunek 5.30.
Otworzyem
ten rysunek
w programie
Photoshop 5.5
i wybraem opcj
Save for Web,
co umoliwio
optymalizacj
obrazka
i zmniejszenie jego
rozmiaru do 80 kB
Korzystaj z CSS
Wykorzystujc system CSS do zarzdzania czcionkami na stronie, moesz unikn
umieszczania na niej zbdnych plikw graficznych. Oczywicie ograniczy to nieco
moliwo wyboru fantazyjnych czcionek, ale umieszczenie zwykego tekstu i zastosowanie na nim stylu zaoszczdzi czas Twoich uytkownikw. Zapoznaj si z pakietem HTML/CSS na doczonym do ksiki CD-ROM-ie.
121
Pamitaj o swoich namiarach

W kadej sekcji strony powiniene umieci informacj o tym, jak mona si z Tob
skontaktowa, a co najmniej link do takiej informacji. Czsto zdarza si, e ludzie
odwiedzajcy Twoj stron robi to tylko po to, by si z Tob skontaktowa.
Zrozumiae jest, e niektre firmy chc trzyma uytkownika na dystans w celu ograniczania kosztw funkcjonowania. Duo bardziej kosztowne jest z punktu widzenia
firmy przyjcie zamwienia przez telefon ni poprzez formularz na stronie internetowej.
To samo dotyczy obsugi technicznej. Jeli uytkownik moe znale odpowiednie informacje na stronie internetowej, firma nie musi paci za poczenia telefoniczne ani
zmusza do tego swoich klientw.
Mechanizm ten dziaa wietnie, jeli strona internetowa jest w stanie szybko i wydajnie rozwizywa wikszo problemw, z jakimi borykaj si uytkownicy. W przeciwnym jednak wypadku powiniene umieszcza na niej informacje o moliwociach
skontaktowania si z Tob.
Rozwijaj sekcj FAQ

Koncepcja FAQ (Frequently Asked Questions z ang. czsto zadawane pytania)
polega na umieszczaniu na stronie najczciej zadawanych przez uytkownikw pyta
wraz z odpowiedziami. Dziki temu uytkownicy nie musz si przez cay czas z Tob
kontaktowa. Niestety, w wikszoci przypadkw sekcja FAQ nie wykracza poza kilka
podstawowych pyta, jakie przyszy do gowy projektantom podczas tworzenia strony.
Pamitaj o aktualizowaniu tej czci strony. Uytkownicy bd nieustannie dostarcza Ci materiau do jej poszerzania (zobacz rysunek 5.31).
Rysunek 5.31.
W sekcji FAQ
odnalazem
informacje o jednoi dwutorowych
modemach, jednake
interesujce mnie
pytanie brzmiao:
Ktry z nich
otrzymam,
zamawiajc
okrelon usug?.
Niestety, brak
odpowiedzi
122
Projektowanie nieliniowe
Nie wolno Ci zaoy, e uytkownicy zawsze bd wchodzi na Twoje strony poprzez
stron gwn lub e bd si po niej porusza w przewidywalny sposb. Ludzie korzystaj z Sieci w bardzo nieliniowy sposb. Jeeli umiecisz najwaniejsze informacje o poruszaniu si po stronie jedynie na stronie gwnej, moesz sprawi, e bdzie
ona bezuyteczna dla osb, ktre dostay si na ni poprzez wyszukiwark. W ten
sposb rozwiesz rwnie problem mao skutecznego tunelu wejciowego (zobacz
rysunek 5.32).
Rysunek 5.32.
Czy nie zamano
tu ktrej z zasad
projektowania?
Ta strona to tunel
wejciowy.
Zoptymalizowano
j do przegldania
w rozdzielczoci
800600. Staraj si
nie umieszcza tego
typu ogranicze na
swoich stronach
Nie wyrzucaj uytkownikw ze swojej strony

Jeli umieszczasz na swojej stronie link do innych stron w Sieci, powiadom uytkownikw o tym, e wanie opuszczaj Twoj stron.
Jeli przewidujesz, e uytkownik opuci Twoj stron i bdzie chcia potem na ni
powrci, zaprojektuj mechanizm, ktry to umoliwi. Przykadowo, jeli umieszczasz
na stronie plik w formacie Adobe PDF, dla uytkownika moe to oznacza konieczno pobrania darmowej przegldarki, zanim bdzie mg go odczyta. Upewnij si,
e zastosowany mechanizm umoliwi mu powrt na Twoj stron po zakoczeniu
pobierania programu.
Unikaj jaskrawych barw

Owszem, uycie jaskrawych i jasnych kolorw przyciga wzrok, jednake po duszym czasie jest bardzo mczce dla oczu. Jeli koniecznie chcesz, by to strony byo
w kolorze czerwonym, postaraj si, by by to kolor stonowany.
Na wielu dobrych stronach uyto mniej jaskrawych kolorw (na przykad pasteli). Kolory
te s zdecydowanie mniej mczce podczas korzystania ze strony przez duszy czas.
123
Nie przesadzaj z uyciem czcionek

To, e wiesz ju, jak korzysta z waciwoci CSS czcionek, nie oznacza, e na stronie musisz uy kadej dostpnej czcionki. Tak naprawd strony, na ktrych uywa
si wielu rnych rodzajw fontw, trc amatorszczyzn. Czsto stosowan i dobr
zasad jest stosowanie jednego rodzaju czcionki dla nagwkw i innego dla reszty
tekstu (w obu przypadkach powinna to by czcionka bezszeryfowa). Pamitaj, by poprzez
uycie CSS umoliwi zastpienie wybranej przez Ciebie czcionki inn, w przypadku
gdy ta podstawowa nie jest zainstalowana na komputerze uytkownika. Powiniene
rwnie sprawi, by Twoja strona dziaaa poprawnie przy braku wybranych przez
Ciebie czcionek wycznie przy uyciu domylnych czcionek systemowych.
Nie ignoruj preferencji kolorystycznych

uytkownikw
By moe przyjdzie Ci do gowy zmiana domylnego koloru linkw pomidzy poszczeglnymi czciami Twojej strony. Pamitaj, e moe to wprowadza uytkownikw
w bd. Wikszo z nich przyzwyczajona jest do tego, e kolor niebieski oznacza hipercze (co, jak ju wspomniaem, jest do nieszczliwym wyborem, gdy mae niebieskie
elementy s wraz z wiekiem coraz trudniejsze do rozrnienia). Jeli dopuszczasz moliwo zmiany kolorw tych elementw, nie uywaj polecenia CSS important, lekcewac preferencje uytkownikw.
Unikaj ramek
Generalnie przegldarki coraz lepiej radz sobie z obsug ramek, jednake wci
mog by one mylce dla uytkownikw. Jeeli moesz unikn uycia ramek, zrb
to. Unikaj otwierania nowych okien. Zazwyczaj otwieranie nowego okna przegldarki
bardzo irytuje uytkownikw, szczeglnie jeli dzieje si to tak szybko, e nie zd
zauway, i nagle znaleli si w zupenie innym miejscu. Moe to wpywa na znaczne
ograniczenie funkcjonalnoci, poniewa nowe okno nie zawiera historii poprzedniego
(zobacz rysunek 5.33).
Uywaj tytuw stron niezalenych od kontekstu

Czy kiedykolwiek widziae taki tytu strony?
6KVNG 0CU\CUVTQPCIYPC6KVNG
Oto przykad niewaciwego tytuu, poniewa wyjty z kontekstu nie posiada on absolutnie adnej wartoci. Jeli wyszukiwarka indeksuje t stron, ten bezuyteczny tytu
najprawdopodobniej pojawi si w wynikach wyszukiwania. Co wicej, tytu strony
jest rwnie domylna etykiet w Ulubionych. Upewnij si, e nadawane przez Ciebie
tytuy maj sens.
124
Rysunek 5.33.
Zwr uwag
na dodatkowe okno.
Te mae cudeka
Java Script mog by
naprawd irytujce
Przekazuj informacj zwrotn

Jak ju wczeniej wspomniaem, powiniene dostarcza uytkownikowi informacji
zwrotnej, aby wiedzia, co dzieje si, gdy porusza si po stronie. Badania wykazay,
e jeli uytkownik w cigu jednej sekundy nie stwierdzi, e strona lub jej element nie
zostay zaktualizowane, bdzie uwaa, e to system ma opnienie.
Zrzuty ekranowe
Jakie jest prawdopodobiestwo, e klinkby jeden ze znajdujcych si w tej ksice
zrzut ekranowy? Niezbyt due, bo moesz bez wahania powiedzie, e nie s one
prawdziwymi interfejsami. Nie jest to takie oczywiste, gdy masz do czynienia ze
zrzutem ekranowym bdcym czci strony internetowej. Widziaem ju wielu uytkownikw uparcie kilkajcych zrzuty ekranowe, poniewa wyglday tak jak kada
inna cz ekranu.
Jak rozwiza ten problem? Zmodyfikuj zrzut ekranowy w taki sposb, aby od razu
byo wida, e nie jest prawdziwym interfejsem. Jedn ze sztuczek, ktre moesz wykorzysta, jest umieszczenie pprzeroczystego tekstu z napisem zrzut ekranowy w poprzek obrazka. Innym sposobem jest zmiana jego wygldu w programie Photoshop.
Suchaj uytkownikw
Pamitaj, aby umoliwia uytkownikom przesyanie ich komentarzy oraz krytycznych uwag i zawsze zwracaj uwag na to, co maj do powiedzenia. W niektrych sytuacjach mao zaawansowane technicznie rozwizania s akceptowalne. Nie musisz
wydawa duych pienidzy, aby stworzy zoony system rejestracji skarg. Wystarczy,
e uytkownicy bd znali adres e-mailowy, na ktry bd mogli wysa informacje
i skd otrzymaj odpowied w stosunkowo krtkim czasie.
125
W przypadku takich adresw czsto stosuje si automatyczne e-maile, ktre powiadamiaj uytkownika o tym, e ich mail zosta odebrany. Jednake wikszo osb
jest wiadoma, e to jedynie automatyczna odpowied, co znacznie pomniejsza jej
warto. Zyskasz szacunek uytkownikw, osobicie odpowiadajc na ich listy.
Rwnowaga
Rwnowaga jest to stan, w ktrym nie mona doda ani zabra adnego elementu
dziea bez zmiany jego znaczenia. Powiniene utrzymywa taki stan w swoich projektach. Jeli dodanie do strony jakiego elementu nie przyniesie adnych korzyci,
nie dodawaj go. Kady obrazek, tekst i animacja musz walczy ze sob o ograniczon uwag uytkownika. Co wicej, obrazki wyduaj czas oczekiwania.
Podsumowanie rozdziau
t Mimo i czytanie wskazwek jest przyjemne, prosta funkcjonalno w stylu
ksiki kucharskiej nie moe zastpi prawdziwego testowania z udziaem

uytkownikw.
t Poczenie wskazwek, technik, narzdzi oraz testw umoliwia tworzenie
najbardziej funkcjonalnych stron internetowych.

t Charakter wskazwek dotyczcych projektowania bdzie si zmienia wraz
z szybkim postpem technologii wykorzystywanych do tworzenia stron

internetowych.
t Wiele poytecznych wskazwek opartych jest na projektowaniu
zorientowanym na uytkownika.
wiczenia praktyczne
1. Dokonaj pobienego przegldu Twojej strony internetowej. Ile z opisanych
w tym rozdziale wskazwek uye podczas jej tworzenia? Ile z nich pomine?
2. Pobierz przegldark WebTV i uyj jej do przegldania swojej strony. Zapisz,
ktre elementy wygldaj dziwnie lub nie dziaaj. Jak rozwiza te

problemy?
3. Oblicz rozmiar poszczeglnych czci Twojej strony. Mona tego dokona na
dwa sposoby. Rcznie (jest to do mozolne w przypadku wikszoci stron)

lub przy uyciu odpowiednich programw.
126
Tematy do dyskusji
1. Czy znasz jakie wskazwki, ktre pominito w tym rozdziale?
2. Czy znalaze tu wskazwki, z ktrymi si nie zgadzasz? Dlaczego?
3. Czy po zastosowaniu wszystkich wskazwek z tego rozdziau udaoby
si stworzy doskona stron internetow?

Funkcjonalność Stron Internetowych

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Funkcjonalność Stron Internetowych

Uploaded by

Copyright:

Available Formats

IDZ DO

Projektowanie zorientowane na uytkownika................................... 33

Przybornik funkcjonalnoci ............................................................. 53

Czynniki ludzkie ............................................................................. 75

Funkcjonalno stron internetowych

Wskazwki dla projektantw .......................................................... 99

Ocena heurystyczna ..................................................................... 127

Tworzenie laboratorium funkcjonalnoci........................................ 149

Testowanie funkcjonalnoci ......................................................... 167

Dostpno w Sieci ..................................................................... 187

Rozdzia 10. czenie wszystkich elementw ................................................... 207

Rozdzia 11. Przeksztacanie danych w informacje............................................ 217

Test funkcjonalnoci strony firmowej korporacji Xolax................... 233

Decydent: osoba odpowiedzialna za podejmowanie decyzji kluczowych

Funkcjonalno stron internetowych

Nie twrz uliczek bez powrotu

Rozdzia 5. Wskazwki dla projektantw

Wskazwka ta moe by trudna do zastosowania podczas koordynowania zawartoci

Testuj stron przy uyciu rnych przegldarek

Funkcjonalno stron internetowych

Umieszczanie najwaniejszych informacji

Rozdzia 5. Wskazwki dla projektantw

Musisz wic upewni si, e wszystkie wane informacje bd widoczne na 15-calowym

Przesuwanie poziome zabronione

Funkcjonalno stron internetowych

Ostrzeganie o rozmiarze plikw

Rozdzia 5. Wskazwki dla projektantw

Funkcjonalno stron internetowych

Unikaj zbdnych elementw nawigacyjnych

Rozdzia 5. Wskazwki dla projektantw

Dodatkowe elementy nawigacyjne

Jasne i zrozumiae linki

Nie ukrywaj linkw

Funkcjonalno stron internetowych

Inne uyteczne wskazwki

Doczenie opcji Jeste tutaj

Rozdzia 5. Wskazwki dla projektantw

Funkcjonalno stron internetowych

Ogranicz uycie kolorw w tabelach

Zadbaj o zastpcz zawarto

Rozdzia 5. Wskazwki dla projektantw

Kolejnym argumentem przemawiajcym za wykorzystaniem tekstu na stronie jest to,

Funkcjonalno stron internetowych

Uywaj atrybutu ALT w opisach rysunkw

Korzystaj z tych samych obrazkw

cz kategorie midzy sob

Rozdzia 5. Wskazwki dla projektantw

Nie uywaj rysunkw przypominajcych reklamy

Funkcjonalno stron internetowych

Unikaj niedziaajcych linkw

Rozdzia 5. Wskazwki dla projektantw

Monitoruj sowa poszukiwane przez uytkownikw

Umie opcje wyszukiwania na kadej stronie

Nie umieszczaj na stronie mechanizmw

Nie przesad z metaforami

widzenia, ale przede wszystkim wprowadza w bd uytkownika;

bezuyteczne. Przenonia, ktra jest zrozumiaa z Twojego punktu widzenia,

e jest to odpowiedni czas i miejsce.

Funkcjonalno stron internetowych

Wykonuj testy funkcjonalnoci

Nie naduywaj wyrnie

Nie naduywaj najnowszych zdobyczy techniki

Rozdzia 5. Wskazwki dla projektantw