Usability w e-biznesie.

Co kieruje Twoim klientem?

Autor: Tomasz Karwatka
ISBN: 978-83-246-2414-0
Format: 158258, stron: 144

Wygodny jak Twoja strona!

Ergonomia w sieci, czyli konstruowanie serwisw intuicyjnych i prostych
w obsudze
Zwikszanie rentownoci witryn przez poprawianie ich uytecznoci nawet
od 100 do 400%
Rozwizania zaprojektowane z myl o wacicielach sklepw internetowych,
menederach produktw, projektantach i grafikach, a take specjalistach od PR-u
Sposoby na wyduenie pobytu uytkownikw na stronie
Wszdzie dobrze, ale najlepiej na Twojej stronie!
W sieci robi si toczno. Nowe serwisy i usugi internetowe pojawiaj si jak grzyby
po deszczu. Uytkownik moe nieskrpowanie surfowa z jednego adresu na kolejny,
przeskakujc po drodze jeszcze tu i tam. I tylko Twoja kreatywno, intuicja i troska
o jego komfort mog sprawi, e zostanie duej wanie na Twojej stronie. Jeli si
nim nie zajmiesz, przeklika si dalej
Czowiek jest istot wygodn. Zwaszcza, gdy wydaje w sieci swoje wasne pienidze!
W tym przypadku komfort i ergonomia przejawiaj si w intuicyjnej nawigacji, szybkim
dostpie do szukanych informacji, przyjaznym interfejsie, szybkoci dziaania serwisu
i jego merytorycznej zawartoci. Nie mona zapomnie take o zestawie pewnych
konwencji, ktrych przestrzeganie jest w Internecie niepisanym prawem.
Wykorzystaj wszystkie te elementy i stwrz przyjazn, wygodn oraz logiczn witryn
a potem ciesz si jej popularnoci i wysok rentownoci!
Sztuka uytkowa w Internecie:
Co daje dobre usability?
Jakie s gwne elementy konwencji i czym si kierowa, umieszczajc
standardowe elementy na stronie, wybierajc typografi oraz tworzc przyciski
graficzne?
Dlaczego ramki i Flash mog okaza si strzaem w kolano?
Jak zwiksza efektywno systemw e-commerce?
Czym charakteryzuj si dobre strony korporacyjne, urzdowe
i sklepy internetowe?
Co to s testy user-experience i jak je prowadzi?
Dlaczego mapa strony jest tak istotna?
Jak tworzy skuteczne i niedugie teksty na strony internetowe (od ogu
do szczegu)?

Spis treci
Wstp .............................................................................................. 7
Rozdzia 1. Co to jest usability? ......................................................................... 9
Uytecznoci, funkcjonalno , usability? ............................................................................ 10
Polecane rda wiedzy .................................................................................................. 10
Okrelenie kluczowych celw usability .......................................................................... 11
Dlaczego usability jest wane? ....................................................................................... 11
Usability, budety i biznes .............................................................................................. 12
Jakie strony optymalizowa ? .......................................................................................... 13
Ile firmy wydaj na usability? ........................................................................................ 14
Czy tanie usability to dobre usability? ............................................................................ 14
Podsumowanie ................................................................................................................ 15

Rozdzia 2. Najwaniejsze wytyczne usability .................................................... 17

Jacy s uytkownicy? ..................................................................................................... 17
Niepisane standardy internetu ......................................................................................... 18
Podsumowanie ................................................................................................................ 18

Rozdzia 3. Budowa strony WWW ..................................................................... 21

Podstawy nawigacji ........................................................................................................ 21
Projektowanie nawigacji ................................................................................................. 22
Staa nawigacja ......................................................................................................... 23
Menu narzdziowe ................................................................................................... 23
Punkty startowe ........................................................................................................ 24
Jeste tutaj ................................................................................................................ 24
Problemy z rozwijanym menu .................................................................................. 26

cieka nawigacyjna (cieka powrotu, cieka okruszkw) ................................... 28

Projektowanie wyszukiwarki .......................................................................................... 29
Podsumowanie ................................................................................................................ 30

Rozdzia 4. Teksty w serwisie WWW ................................................................ 31

Efektywne linki .............................................................................................................. 31
Konstruktywne komunikaty ............................................................................................ 32
Strona 404 ...................................................................................................................... 33
Efektywne pisanie dla internetu ...................................................................................... 35
Budowanie zaufania do serwisu ..................................................................................... 36
Podsumowanie ................................................................................................................ 38

Usability w e-biznesie. Co kieruje Twoim klientem?

Rozdzia 5. Firmowy serwis WWW .................................................................... 39

Czego chc uytkownicy serwisw korporacyjnych? ..................................................... 39
Nie przegap okazji .......................................................................................................... 40
Formularze ...................................................................................................................... 40
Projektowanie strony gwnej serwisu korporacyjnego .................................................. 42
Co musi znale si na stronie gwnej? .................................................................. 42
Jakie problemy napotkasz, projektujc stron gwn? ............................................ 43
Zwikszanie iloci informacji ................................................................................... 44
Efekty najazdu .......................................................................................................... 44
Szybko adowania si stron ......................................................................................... 46
Podsumowanie ................................................................................................................ 46

Rozdzia 6. E-commerce ................................................................................... 47

Co nie jest sklepem i czy to le? ..................................................................................... 48
Zanim zaczniesz mierzy e-commerce skuteczno i efektywno ........................... 50
Wspczynnik porzuce koszyka i inne mierniki ........................................................... 51
Jak zarabia , gdy towar jest niedostpny? ...................................................................... 53
Zaufanie uytkownikw do sklepu ................................................................................. 53
Emocje jeszcze nie klienta .............................................................................................. 54
Innowacje ....................................................................................................................... 61
Kreatywno nie jest przeznaczona dla nielicznych! ................................................ 63
Wysoka inteligencja nie jest wyznacznikiem kreatywnoci ..................................... 63
Wiek nie gra roli ....................................................................................................... 63
Da si zwikszy poziom kreatywnoci ................................................................... 64
Presja czasu zabija kreatywno , ale nie zawsze .................................................. 64
Pienidze nie zmuszaj do twrczego mylenia ....................................................... 64
Kreatywno to pochodna optymizmu ..................................................................... 64
Warto zaszale ! ........................................................................................................ 65
Wyrana struktura sprzyja kreatywnoci .................................................................. 65
Wsppraca w zespole dziaa lepiej ni wspzawodnictwo ..................................... 65
Jak pracuj kreatywne firmy? ................................................................................... 66
Innowacje w e-biznesie .................................................................................................. 67
Systemowe podejcie do rozwoju ................................................................................... 71
Podsumowanie ................................................................................................................ 72

Rozdzia 7. Reklama internetowa ..................................................................... 73

Reklama, ktra nie irytuje .............................................................................................. 73
Mw wtedy, gdy chc sucha ........................................................................................ 74
Wicej czy mniej? .......................................................................................................... 74
Banner blindness i inne plagi .......................................................................................... 79
Landing pages ................................................................................................................. 80
Wypalanie si bannera .................................................................................................... 81
Reklama z zewntrz ........................................................................................................ 81
Public relations i word of mouth ..................................................................................... 82
Co jeszcze? ..................................................................................................................... 89
Podsumowanie ................................................................................................................ 89

Rozdzia 8. User-centered design ...................................................................... 91

Podsumowanie ................................................................................................................ 96

Rozdzia 9. Badanie usability ............................................................................ 97

Dlaczego naley bada i testowa ? ................................................................................. 97
Testy uytecznoci a testy grupowe ................................................................................ 97
Ocena heurystyczna ........................................................................................................ 98
Lista kontrolna ................................................................................................................ 98

Spis treci

5
Badania eye-tracking ...................................................................................................... 98
Statystyki ruchu w serwisie .......................................................................................... 100
Badania z uytkownikami (testy z uytkownikami) ..................................................... 101
Harmonogram testw z uytkownikami ................................................................. 102
Testowanie (prawie) gotowego serwisu ........................................................................ 103
Podsumowanie .............................................................................................................. 104

Rozdzia 10. Prototypowanie ............................................................................ 105

Jak stworzy dobry prototyp? ....................................................................................... 105
Analiza kontekstu uytkowania .............................................................................. 105
Sortowanie kart ...................................................................................................... 106
Persony ................................................................................................................... 106
Scenariusze uycia i diagramy przej ......................................................................... 106
Struktura serwisu .......................................................................................................... 108
Architektura informacji ................................................................................................ 110
Makiety funkcjonalne ................................................................................................... 110
Test Kruga .............................................................................................................. 110
Dokumentacja produkcyjna .......................................................................................... 112
Podsumowanie .............................................................................................................. 113

Rozdzia 11. Jako serwisw WWW ................................................................ 115

Zgodno kodu ze standardami .................................................................................... 116
Czas adowania ............................................................................................................. 116
Dostpno serwisu ................................................................................................ 117
Czytelno i przejrzysto ............................................................................................ 118
Niezaleno od przegldarki ....................................................................................... 118
Zepsute linki ................................................................................................................. 119
Podsumowanie .............................................................................................................. 120

Rozdzia 12. Prawdziwe problemy, z ktrymi si zmierzysz ................................. 123

Less is more .................................................................................................................. 123
Zdradliwa Captcha ........................................................................................................ 125
Zaangaowanie uytkownikw .................................................................................... 126
Flash to zo ................................................................................................................... 128
Jak pogodzi multimedia i Flash z wytycznymi usability? ..................................... 131
Dobre rady zawsze w cenie .......................................................................................... 132
Podsumowanie .............................................................................................................. 133

Rozdzia 13. Zakoczenie ................................................................................ 135

Skorowidz .................................................................................... 137

Rozdzia 3.

Budowa strony WWW

Podstawy nawigacji
Wikszo naszych dziaa w internecie oparta jest na poszukiwaniu informacji. Zalenie
od charakteru pytamy lub nawigujemy samodzielnie. Problemy z nawigacj dobrze wida podczas wakacyjnych wyjazdw autem. Zazwyczaj mczyzna usiuje za pomoc
mapy odnale tras samodzielnie, a kobieta raczej pyta o drog. Tak, oczywicie dzi
wszyscy mamy GPS, ale kiedy tak byo!
W internecie nie ma chyba jeszcze czego takiego jak GPS, wic uytkownicy w zalenoci od typu wyszukuj lub przegldaj (rysunek 3.1). Niekiedy odpowiednio konstruujc serwis, moemy zachci uytkownikw do jednej z metod nawigacji. Jeli
pokaemy due pole wyszukiwania w centralnym miejscu i mnstwo kategorii sugerujcych, e mamy naprawd duo informacji wikszo z uytkownikw bdzie uywa wyszukiwarki.
W sieci nawiguje si trudniej, bo trudniej uchwyci skal. Nie wiadomo, jak dua jest
witryna i ile moe nam zaj przejrzenie jej stron. W wiecie realnym nie jestemy
obeznani z koncepcj teleportacji, ktra jest w sieci realizowana przez linki jeden
klik moe nas zaprowadzi bardzo blisko albo bardzo daleko.
Jakob Nielsen podaje, e a 30% wszystkich klikni w internecie to kliknicia przycisku Wstecz. To take kolejny argument, by unika ramek i nawigacji opartej na Flash
te elementy mog utrudnia nawigowanie za pomoc przycisku Wstecz.
Gwne zadania nawigacji.
Nawigacja umoliwia odnajdywanie dokumentw w serwisie.
Nawigacja informuje nas, gdzie jestemy w strukturze serwisu

(odpowiednie oznaczenie w menu).

Nawigacja daje nam poczucie stabilnoci (element stay).

22

Usability w e-biznesie. Co kieruje Twoim klientem?

Rysunek 3.1. Schemat nawigacji po serwisie. Na podstawie ksiki Stevea Kruga1.

Mwi o tym, co w danym miejscu si znajduje (pojcie menu).
Mwi, jak moemy z tego skorzysta .
Buduje zaufanie do autorw serwisu.

Projektowanie nawigacji
Omwi tutaj narzdzia suce nawigacji (menu, wyszukiwanie). Niezalenie zostan
omwione tematy zwizane z projektowaniem struktury serwisu (czyli co ma si w menu
znale ). Poczenie struktury serwisu z narzdziami nawigacyjnymi pozwala uytkownikom porusza si po serwisie WWW.
Pamitaj, e celem uytkownikw Twojego serwisu nie jest nawigowanie (przytaczajc
sowa Andrzeja Sienkiewicza). Ich celem jest wykonanie zada, po ktre przyszli do
serwisu. Nikt nie bdzie sa listw z wyrazami szacunku za doskonale stworzony system
nawigacji. Dobry system nawigacji to taki, o ktrym nikt z uytkownikw nie musi myle .
1

S. Krug, Dont Make Me Think: A Common Sense Approach to Web Usability, New Riders, Berkley 2006.

Rozdzia 3. i Budowa strony WWW

23

Staa nawigacja
Staa nawigacja to zbir elementw nawigacyjnych pojawiajcych si na wszystkich
stronach serwisu. S to najczciej:
identyfikator strony,
cze do strony startowej,
wyszukiwarka,
menu narzdziowe,
menu gwne.

Staa nawigacja moe by zmieniona bd nieobecna na stronie gwnej oraz na stronach skierowanych na wykonanie kluczowych akcji. Staej nawigacji nie ma niekiedy
na stronach skadania zamwienia w sklepach internetowych (raczej w USA i raczej
w okolicach kroku patnoci) oraz na stronach kampanii reklamowych (landing page
omwi je dalej).

Menu narzdziowe
Zawiera od 3 do 7 elementw, ktre uznajemy za szczeglnie przydatne.
Zazwyczaj s to:
strona gwna,
kontakt,
mapa serwisu.

Czsto wystpuj tutaj take cza takie jak:

Archiwum.
Wyloguj si.
Obsuga klienta.
Forum dyskusyjne.
Pliki do pobrania.
FAQ.
Pomoc.
Jak zacz ?
Wiadomoci prasowe.
Polityka prywatnoci.
Rejestracja.

24

Usability w e-biznesie. Co kieruje Twoim klientem?

Wyszukiwarka.
Koszyk.
Zapisz si do nas.
Adresy placwek.
Twoje konto.

Punkty startowe
Punkty startowe s elementami strony gwnej, ktre prowadz w gb struktury serwisu. Dziki temu uytkownikom atwiej odnale najczciej poszukiwane elementy
serwisu. Punkty startowe pokazuj te, co na stronie mona znale i zrobi . Dziki
temu pozwalaj na szybkie zapoznanie si z najwaniejszymi elementami caego serwisu (rysunki 3.2 i 3.3).

Rysunek 3.2. Punkty startowe w serwisie www.ingbank.pl uatwiaj dostp do opisu najwaniejszych
produktw banku. rdo: www.ingbank.pl

Punkty startowe szybko stay si obowizkowym elementem wikszoci serwisw WWW.
Warto pamita o tym, e dziaaj dobrze wtedy, gdy ich ilo jest rozsdna.

Jeste tutaj
Element jeste tutaj (rysunek 3.4) dziaa podobnie jak adekwatne oznaczenie na mapach rozstawionych przed szlakami turystycznymi czy na kampusach. Zdarza si, e
oznaczenia tego brakuje na mapie, wtedy jej zrozumienie staje si duo trudniejsze. Podobnie jest z nawigacj na WWW. Rysunek 3.5 i rysunek 3.6 przedstawiaj problemy,
na ktre naley zwrci uwag przy projektowaniu.

Rozdzia 3. i Budowa strony WWW

Rysunek 3.3. W serwisie www.mbank.pl z 2006 roku punkty startowe nawet nazywaj si Start.
rdo: www.mbank.pl
Rysunek 3.4.
Bardzo dobrze
wyrniony
element menu

Rysunek 3.5.
Jest nie le, ale lepiej
byoby wyrni
tylko ostatni element.
rdo: http://orlen.pl

25

26

Usability w e-biznesie. Co kieruje Twoim klientem?

Rysunek 3.6. Mocno wyrniony pierwszy poziom, ale zupeny brak wyrnienia drugiego poziomu.
rdo: http://merlin.pl

Problemy z rozwijanym menu

Dla oszczdzenia miejsca czsto stosuje si menu rozwijane. Generuje to jednak sporo
problemw i z tego powodu zalecam bardzo ostrone uywanie rozwijanych menu.
W menu rozwijanym przede wszystkim nie mona obejrze zawartoci caego menu
przed wykonaniem akcji (wskazanie, kliknicie). Zazwyczaj takie menu s trudne do
przegldania, zwaszcza jeli maj kilka poziomw (rysunek 3.7). Mniej zaawansowani
uytkownicy czsto klikaj elementy omykowo.

Rysunek 3.7. Autorzy tej witryny nawet wyszukiwark umiecili w rozwijanym menu.
rdo: http://software.xfx.net

Czsto wystpuj te problemy techniczne zwizane z dostpnoci takiego menu oraz
cho by tym, e wyszukiwarka w przegldarce (Ctrl+F) czsto nie przeszukuje treci
zwinitego menu.
Menu rozwijane doskonale sprawdzaj si w listach, np. z wyborem kraju (rysunek 3.8
kontra rysunek 3.9).
Niegdy w sklepie internetowym na www.hp.pl zastosowano element nawigacyjny nieco
podobny ale znacznie gorszy od rozwijanego menu (rysunki 3.10 i 3.11). Aby obejrze cae menu promocji, naley nawigowa strzaeczkami. Prawdopodobnie dua cz
uytkownikw nawet nie zauway, e strona oferuje nie 6 grup promocji (widocznych
po zaadowaniu serwisu), ale a 13. Ponad poowa zawartoci stron nie zostanie dobrze
poznana z powodu le skonstruowanego menu.

Rozdzia 3. i Budowa strony WWW

Rysunek 3.8. Menu rozwijane pozwala na wygodny wybr kraju. rdo: http://hp.com.pl

Rysunek 3.9. HP zmienio niedawno przedstawiony wczeniej element wyboru jzyka na rozwijane menu.
Obecne rozwizanie jest duo bardziej skomplikowane. W szczeglnoci wymaga od internauty
przeliterowania w mylach alfabetu, aby odnale  sekcj, w ktrej znajduje si jego kraj. rdo:
http://hp.com

27

28

Usability w e-biznesie. Co kieruje Twoim klientem?

Rysunek 3.10. Strzaka przewijajca menu z promocjami jest sabo widoczna, a cay mechanizm jest
bardzo nieintuicyjny. rdo: http://sklep.hp.com.pl

Rysunek 3.11. Po klikniciu strzaki menu Promocje pokazuje swoje nastpne skadniki.
rdo: http://sklep.hp.com.pl

cieka nawigacyjna
(cieka powrotu, cieka okruszkw)
Wiele jest nazw na ten niepozorny element nazywany chyba jednak najczciej ciek
okruszkw (rysunek 3.12). Element ten pokazuje aktualn pozycj i pozwala na cofanie si w strukturze serwisu. Ma pozytywny wpyw na zrozumienie struktury przez
uytkownika.

Rysunek 3.12.
cieki nawigacyjne w bzwbk.pl oraz na About.com. rdo: http://bzwbk.pl, http://about.com

Wydaje si, e najlepszym separatorem kolejnych poziomw jest znak >. Inne znaki
(I, -) wywouj u internautw skojarzenia z rwnolegymi opcjami menu. Aby jednoznacznie okreli funkcj cieki okruszkw, mona uy sowa jeste tutaj na pocztku cieki.

Rozdzia 3. i Budowa strony WWW

29

Projektowanie wyszukiwarki
W wielu serwisach wyszukiwarka jest kluczowym narzdziem nawigacji. Od skutecznoci jej dziaania zaley czsto skuteczno caej witryny. Dla uytkownika wyszukiwark jest forma: pole formularza do wpisania tekstu, przycisk z wyrazem Szukaj.
Odstpstwa od tej konwencji mog spowodowa , e uytkownicy bd mieli trudnoci z odnalezieniem wyszukiwarki.
Najczstszym problemem, jaki napotykaem w badaniu wyszukiwarek, byo ze okrelenie lub nieokrelenie zakresu wyszukiwania, w ktrym dziaa wyszukiwarka. Uytkownicy oczekuj, e wyszukiwarka domylnie przeszuka ca witryn. Niekiedy jednak twrcy serwisu zawaj obszar wyszukiwania do dziau, w ktrym znajduje si
aktualnie uytkownik. Takie dziaanie mija si z celem i moe jedynie wprowadzi wiele
zamieszania.
W chwili obecnej mamy ju 6. wersj wyszukiwarki, opart o 3. technologi. Mona wic powiedzie, e raz na 3 lata zmieniamy cakowicie technologi do wyszukiwania, a raz na ptora
roku s wprowadzane gruntowne poprawki. Wyszukiwarka to serce kadego serwisu z du
iloci czy to treci, czy to towarw, dlatego zawsze powinna by wydajna, a jej indeks aktualizowany jak najczciej.
Baej Stachowiak, Dyrektor ds. Wdroe Informatycznych, Merlin.pl SA

Klienci czsto pytaj o zaawansowane wyszukiwanie. Kiedy powinno by widoczne

i ile powinno mie opcji. Zasadniczo dobra wyszukiwarka to wyszukiwarka prosta (rysunek 3.13). Wszelkie zaawansowane opcje sugeruj umieszcza ju w wynikach wyszukiwania. Przedstawienie zbyt wielu zaawansowanych opcji sprawia, e po pierwsze
uytkownicy boj si wyszukiwarki, po drugie mog jej nie rozpozna , a po trzecie mog
zada tak precyzyjne zapytanie, e nie zostanie nic odnalezione. Tymczasem lepiej pokaza wicej wynikw wyszukiwania i pozwoli uytkownikowi filtrowa wedug zadanych kryteriw.

Rysunek 3.13. Zasoby Allegro s olbrzymie, ale wyszukiwarka jest prosta i przejrzysta. Dopiero link
zaawansowane prowadzi do rozbudowanych mechanizmw wyszukiwania. rdo: http://allegro.pl
Wikszo sklepw internetowych ma zwyk, prost wyszukiwark. Wpisuje si wtedy jaki
wyraz lub fraz, a sklep przeszukuje, biorc pod uwag nazw i opis produktu. Zwykle wystarcza to, aby znale poszukiwany przedmiot.
Czsto przy prostej wyszukiwarce jest link do wyszukiwania zaawansowanego, gdzie dodatkowo moemy zdefiniowa zakres cenowy czy ograniczy wyszukiwanie do wybranej kategorii.
Nigdy nie sprawdzaem tego w badaniach, ale zawsze wydawao mi si, e z wyszukiwania
zaawansowanego korzysta niewielka liczba osb. Dlatego gdy w Kadoro zrobilimy wyszukiwanie zaawansowane, postawiem sobie za cel analiz, jak czsto uytkownicy korzystaj
z dodatkowych opcji wyszukiwania.

30

Usability w e-biznesie. Co kieruje Twoim klientem?

Tutaj naley si jednak drobna uwaga zamiast odnonika do wyszukiwania zaawansowanego w naszym sklepie opcje te s zawsze widoczne na ekranie, po prawej stronie. Z zaoenia miay by niejako pod rk, co na pewno ma jaki wpyw na czstotliwo korzystania
z tej funkcji. Dodatkowe opcje wyszukiwania w Kadoro to rozmiar, ksztat, kategoria i kolor.
Poniewa prezentacja samych wartoci procentowych nic zwykle nie mwi, a mona w ten
sposb zafaszowa rzeczywisto, publikuj rwnie dane liczbowe.
Analiza obejmowaa okres od 2008.09.08 do 2008.10.29. W tym czasie:
wyszukiwarka zostaa uyta 13622 razy (ok. 267 razy dziennie);
liczba wyszukiwa kolorw wyniosa 3153;
liczba wyszukiwa w wybranej kategorii wyniosa 2354;
liczba wyszukiwa ksztatu wyniosa 1787;
liczba wyszukiwa rozmiaru wyniosa 897.

Biorc pod uwag wartoci procentowe, wychodzi na to, e:

kolor zosta wybrany w 23% przypadkw;
kategoria zostaa wybrana w 17% przypadkw;
ksztat zosta wybrany w 13% przypadkw;
rozmiar zosta wybrany w 6% przypadkw.

Jak wida, liczba osb korzystajca z dodatkowych opcji nie jest wcale znikoma. Warto wic
poszerzy wyszukiwark sklepow o dodatkowe opcje.
Grzegorz Skaruz, waciciel Kadoro.pl, Mydlandia.pl i Dantemo.pl

Podsumowanie
Uytkownicy Twojego serwisu chc na nim realizowa swoje potrzeby. Nawigacja jest
najwaniejszym narzdziem, ktre ma im w tym pomc.
Dobra nawigacja umoliwia dotarcie do celu uytkownikom z rnymi potrzebami i przyzwyczajeniami.
Dobra wyszukiwarka jest podstaw wielu e-biznesw.