kurs usability 2 ESDWGWAJC23RXEESIKJ5H2UCJ5ST6RYDE3TFRXY

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Efektywne i intuicyjne serwisy WWW

WERSJA ROZWOJOWA 2.0

Informacje o prawach autorskich:
Autorem dokumentu oraz wła

cicielem praw autorskich jest Tomasz Karwatka. Tre

ść

dokumentu nie mo

e by

wykorzystywana ani przetwarzana bez zgody autora.
Wszystkie wykorzystane ilustracje s

własno

ich autorów i zostały u

yte jedynie w celach edukacyjnych.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Spis tre

ci ...............................................................................................................................2

Wst

p.......................................................................................................................................5

Komu polecam kurs? ............................................................................................................5

Czytaj

c kurs nauczysz si

...................................................................................................5

Wprowadzenie do usability ...................................................................................................6

Usability jako budowanie ergonomicznych i intuicyjnych w obsłudze serwisów. ..................7

yteczno

ci, funkcjonalno

ść

, usability – jak to nazywa

?...............................................7

Guru usability i

ródła wiedzy. Najwa

niejsze ksi

ąż

ki i serwisy WWW. ...............................8

Okre

lenie kluczowych celów usability. ................................................................................8

Jak przeliczy

usability na gotówk

i pozyska

bud

et? ......................................................8

Usability a gotówka ...........................................................................................................8

Przykład...................................................................................................................................9

Ile mo

na zyska

?.............................................................................................................9

Ile firmy wydaj

na usability? ............................................................................................9

Najwa

niejsze wytyczne ......................................................................................................12

Jacy si

ytkownicy? ........................................................................................................13

Niepisane standardy Internetu............................................................................................13

Przykład ..........................................................................................................................13

Konwencje w Internecie. .................................................................................................13

Analiza i pisanie konstruktywnych komunikatów. ...............................................................14

Przykład ..........................................................................................................................15

Efektywne linki. ...................................................................................................................16

Podstawy nawigacji. ...........................................................................................................16

Dlaczego w Sieci nawiguje si

trudniej. ..........................................................................16

Główne zadania nawigacji...............................................................................................16

Projektowanie nawigacji. ...................................................................................................18

Stała nawigacja. ..............................................................................................................18

Menu narz

dziowe. .........................................................................................................18

Punkty startowe...............................................................................................................19

Strona główna. ................................................................................................................20

Jeste

tutaj. .....................................................................................................................20

Problemy z rozwijanym menu. ........................................................................................21

cie

ka nawigacyjna (

cie

ka powrotu,

cie

ka okruszków)..........................................22

Strona 404.......................................................................................................................23

Struktura serwisu. ...............................................................................................................25

Intuicyjna struktura serwisu.............................................................................................25

Przykład. .........................................................................................................................25

Projektowanie wyszukiwarki. ..............................................................................................26

Intuicyjna wyszukiwarka..................................................................................................26

Architektura informacji. .......................................................................................................27

Dobra architektura informacji. .........................................................................................27

Nazwa pod-strony: ..........................................................................................................27

Budowa typowej strony.......................................................................................................28

Test Kruga. .........................................................................................................................29

Przykład. .........................................................................................................................29

Efektywno

ść

serwisów korporacyjnych. ...........................................................................31

Czego chc

ytkownicy serwisów korporacyjnych? .........................................................32

Nie przegap okazji. .............................................................................................................32

Formularze..........................................................................................................................32

Analiza wybranych serwisów korporacyjnych, opracowanie propozycji ulepsze

. .............34

Przykład. .........................................................................................................................34

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Projektowanie i badanie strony głównej serwisu korporacyjnego. ......................................38

Przykład. .........................................................................................................................38

Co musi znale

źć

na stronie głównej? ........................................................................40

Jakie problemy napotkasz projektuj

c stron

główn

?...................................................40

Na jakie pytania musi odpowiada

strona główna? ........................................................41

Jak przekaza

cel witryny odwiedzaj

cemu?..................................................................41

Zwi

kszanie ilo

ci informacji. ..........................................................................................41

Efekty najazdu.................................................................................................................42

Projektowanie

cie

ek nawigacyjnych................................................................................43

Efektywne pisanie dla Internetu..........................................................................................44

Tekst skuteczny w Internecie. .........................................................................................44

Budowanie zaufania do serwisu. ........................................................................................44

Jak pogodzi

multimedia i Flash z wytycznymi usability?...................................................46

Efektywno

ść

w eCommerce ................................................................................................49

Usability w systemie eCommerce. ......................................................................................50

Czynniki sukcesu eCommerce. ..........................................................................................50

Metody pomiaru efektywno

ci eCommerce. Współczynnik porzuce

koszyka. .................51

Minimalizacja współczynnika porzuce

koszyka. ...............................................................52

Zwi

kszamy usability katalogu produktów, koszyka i procesu zamawiania. ......................52

Dobre przykłady ..............................................................................................................52

Jak zarabia

gdy towar jest niedost

pny? ..........................................................................57

Budujemy zaufanie u

ytkowników do sklepu......................................................................57

Symulacja wpływu usability na zyski sklepu internetowego. ..............................................58

Efektywno

ść

reklamy internetowej.....................................................................................59

Reklama, która nie irytuje ...................................................................................................60

cej czy mniej? ...............................................................................................................60

Przykład ..........................................................................................................................61

Banner blindness i inne plagi..............................................................................................63

Landing pages ....................................................................................................................64

Wypalanie si

bannera .......................................................................................................65

Reklama z zewn

trz ...........................................................................................................65

Co jeszcze? ........................................................................................................................67

Dost

pno

ść

...........................................................................................................................68

Kto i kiedy dyskryminuje klientów? .....................................................................................69

Grupy u

ytkowników oczekuj

ce pomocy.......................................................................69

Dost

pno

ść

jako inicjatywa .............................................................................................69

Podstawy prawne............................................................................................................69

Główne zasady................................................................................................................70

Jak z serwisu korzystaj

osoby niewidome? ......................................................................73

Poznajemy oprogramowanie typu screen-reader dla u

ytkowników niewidomych. ...........73

Przykład ..........................................................................................................................73

Przykład ..........................................................................................................................74

Kontrowersje wokół niektórych rozwi

..........................................................................75

Testujemy dost

pno

ść

serwisu dla niepełnosprawnych .....................................................76

Przykład ..........................................................................................................................76

Testujemy serwis WWW na ró

nych platformach ..............................................................77

Przykład ..........................................................................................................................77

Przykład ..........................................................................................................................78

Przykład ..........................................................................................................................79

Zdradliwa Captcha..............................................................................................................79

Kanały RSS jako nowy

rodek komunikacji........................................................................80

Badanie usability..................................................................................................................81

Dlaczego nale

y bada

i testowa

?....................................................................................82

Testy u

yteczno

ci a testy grupowe ...............................................................................82

Ocena heurystyczna ...........................................................................................................82

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Lista kontrolna ....................................................................................................................82

Badania eye-tracking ..........................................................................................................83

Badania z u

ytkownikami (user-experience) ......................................................................84

Ilu u

ytkowników powinno bra

udział w testach? ..........................................................84

Kogo i jak rekrutowa

do testów? ..................................................................................85

Typy testów user-experience ..........................................................................................85

Jak testowa

? .................................................................................................................85

rodki techniczne podczas badania user-experience.....................................................86

Projektowanie zgodne z usability .......................................................................................88

Etapy analizy usability w harmonogramie i bud

ecie projektu............................................89

Projektowanie zorientowane na u

ytkownika..................................................................89

Jak stworzy

dobry prototyp? .............................................................................................89

Analiza kontekstu u

ytkowania .......................................................................................89

Sortowanie kart ...............................................................................................................89

Scenariusze u

ycia (use cases)......................................................................................90

Persony ...........................................................................................................................90

Projektowanie struktury serwisu. ........................................................................................90

Przykład ..........................................................................................................................90

Projektowanie makiet funkcjonalnych strony głównej. ........................................................91

Przykład ..........................................................................................................................91

Projektowanie makiet funkcjonalnych kluczowych pod-stron. ............................................93

Przykład. .........................................................................................................................93

Testowanie (prawie) gotowego serwisu..............................................................................93

Poprawa jako

ci serwisów WWW. Formułowanie zasad QA. ............................................94

Automatyzacja testów QA...................................................................................................94

Przykład. .........................................................................................................................94

Współpraca z agencj

interaktywn

...................................................................................98

Jak formułowa

swoje oczekiwania? ..................................................................................99

Kliencie, czego masz prawo wymaga

od agencji interaktywnej........................................99

Komunikacja z u

ytkownikiem..........................................................................................101

Dobre praktyki i ciekawe przykłady...................................................................................102

Zał

czniki ............................................................................................................................105

Top Ten Web Design Mistakes of 2005 ...........................................................................106

Zako

czenie........................................................................................................................107

Literatura...........................................................................................................................108

Polecam............................................................................................................................108

Szczególn

pomoc w promowaniu i tworzeniu kursu odgrywaj

. .....................................109

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Wst

Witaj w drugiej wersji Kursu Usability. Wersj

te rozbudowałem

o kilkana

cie nowych podrozdziałów, bardziej szczegółowe opisy oraz

nowe przykłady.

Czy zastanawiali

cie si

co decyduje o powodzeniu serwisów WWW? Co sprawia,

ytkownicy ch

tniej przebywaj

na niektórych stronach? W głównej mierze decyduje o tym

usability, zwane te

yteczno

. W kursie pokazuj

jak budowa

intuicyjne w obsłudze

serwisy i udowadniam jak wielki wpływ ma u

yteczno

ść

na finalny sukces ka

dego

interaktywnego projektu.

Forma kursu ma ułatwi

szybkie zapoznanie si

z nim. Wi

kszo

ść

informacji została podana

w skondensowanej formie, dzi

ki czemu mo

esz zapozna

z tymi elementami, które

Ciebie najbardziej interesuj

, bez konieczno

ci czytania cało

ci. Nawet jednak przeczytanie

cało

ci nie zajmie Ci wi

cej ni

2 godziny.

Komu polecam kurs?

Osobom zwi

zanym z marketingiem, reklam

i PR, wszystkim, którzy wykorzystuj

Internet

do komunikacji ze swymi klientami, dziennikarzami i otoczeniem biznesowym. Kurs ten
szczególn

warto

ść

ma tak

e dla osób planuj

cych lub prowadz

cych działalno

ść

handlow

w Sieci.

Tomasz Karwatka jest autorem serwisu

http://www.webusability.pl

i pracownikiem agencji

interaktywnej Janmedia (

http://www.janmedia.pl

Czytaj

c kurs nauczysz si

•

Ile kosztuje dobre usability.

•

Ile mo

esz zyska

dzi

ki dobremu usability.

•

Co decyduje o efektywno

ci serwisu WWW.

•

Jak prowadzi

analiz

usability i ocenia

intuicyjno

ść

serwisu.

•

Jak skutecznie dociera

do klientów, mediów i otoczenia biznesowego poprzez

efektywny serwis korporacyjny.

•

Jak zwi

ksza

efektywno

ść

systemów eCommerce.

•

Co to jest współczynnik porzuce

koszyka i jak mo

na go zmniejsza

•

Czym s

testy user-experience i jak je prowadzi

•

Jak projektowa

yteczne serwisy WWW i współpracowa

z agencj

interaktywn

Kontakt i współpraca.

Serdecznie zapraszam ka

dego, kto chce pomóc w promowaniu, ulepszaniu, publikowaniu

kursu do kontaktu –

tkarwatka@webusability.pl

. Jestem otwarty na wszelkie pomysły na

współprac

w zakresie usability. Wi

cej materiałów edukacyjnych oraz najnowsz

wersj

kursu zawsze mo

na znale

źć

http://www.webusability.pl

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Wprowadzenie do usability

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Usability jako budowanie ergonomicznych i intuicyjnych w
obsłudze serwisów.

yteczno

ść

(ang.

usability,

web-usability)

nauka

zajmuj

ergonomi

i funkcjonalno

urz

dze

oraz aplikacji. W Polsce poj

cie u

yteczno

ci stosowane jest

zazwyczaj w odniesieniu do ergonomii serwisów WWW oraz aplikacji u

ytkowych.

yteczno

ść

w ich przypadku skupia si

na:

•

intuicyjnej nawigacji,

•

ułatwieniu skanowania w poszukiwaniu informacji,

•

zapewnieniu zrozumiałej dla u

ytkownika komunikacji.

Guru u

yteczno

ci Jakob Nielsen pisze o pi

ciu najwa

niejszych elementach usability:

•

Learnability – jak łatwo jest u

ytkownikom wykona

podstawowe zadanie podczas

pierwszego kontaktu z serwisem?

•

Efficiency – jak szybko zadania wykonuje u

ytkownik, który ju

zna serwis?

•

Memorability – jak szybko u

ytkownik mo

e osi

ąć

biegło

ść

w posługiwaniu si

serwisem po dłu

szej nieobecno

ci w serwisie?

•

Errors – jak wiele bł

dów popełniaj

ytkownicy, jak bł

dy te s

komunikowane oraz

w jakim czasie i jak u

ytkownicy mog

poradzi

sobie z nimi?

•

Satisfaction: czy u

ytkownicy lubi

ywa

serwisu?

Oczywi

cie takich elementów mo

na wypunktowa

wiele.

Nale

y pami

tak

e o odnalezieniu złotego

rodka pomi

dzy ilo

funkcji a łatwo

posługiwania si

. U

ytkownicy nie b

zadowoleni z bardzo ergonomicznej aplikacji, je

nie b

mogli wykona

w niej po

żą

danych działa

. Z drugiej strony nie usatysfakcjonuje ich

tak

e aplikacja daj

ca teoretyczn

liwo

ść

wykonania po

żą

danych zada

, ale w sposób

tak skomplikowany,

e w praktyce wr

cz niewykonalny.

yteczno

ci, funkcjonalno

ść

, usability – jak to nazywa

Słowniki j

zyka polskiego i wcze

niejsze opracowania u

ywaj

słowa "funkcjonalno

ść

Termin "u

yteczno

ść

" wynika z ch

ci upodobnienia terminów polskich do ich angielskich

odowiedników. Obecnie w

rodowisku informatyków i pokrewnych przyj

ło si

rozumie

"funkcjonalno

ść

" jako okre

lenie ilo

ci funkcji, opcji czy mo

liwo

ci danego programu/strony

WWW, a "u

yteczno

ść

" jako łatwo

ść

korzystania z tych

Najpełniejsz

definicj

usability znajdziesz zawsze na Wikipedia:

http://pl.wikipedia.org/wiki/U%C5%BCyteczno%C5%9B%C4%87_(web-usability)

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Guru usability i

ródła wiedzy. Najwa

niejsze ksi

ąż

ki i serwisy

WWW.

•

Designing Web Usability : The Practice of Simplicity, J. Nielsen

•

Don't Make Me Think : A Common Sense Approach to Web Usability, S. Krug

•

Homepage Usability : 50 websites deconstructed, J. Nielsen, M. Tahir

•

Strona domowa Jakoba Nielsena -

http://www.useit.com/

•

Katalog linków dotycz

cych usability -

http://www.usableweb.com/

•

Strona J. Zeldmana, or

downika standardów sieciowych -

http://www.zeldman.com/

•

Tematy zwi

zane z usability aplikacji WWW -

http://www.alistapart.com/

•

Polski serwisu o u

yteczno

ci o uznanej marce -

http://www.uzytecznosc.pl/

•

Serwis grupy osób dbaj

cej o dost

pno

ść

polskich WWW -

http://www.osiolki.net/

•

Mój serwis dotycz

cy usability -

http://www.webusability.pl

•

Kurs usability edytowany przez u

ytkowników –

http://www.kursusability.pl

Okre

lenie kluczowych celów usability.

Serwis korporacyjny lub
produktowy

Sklep internetowy

Portal

Ilo

ść

informacji

Mała –

rednia

Mała – bardzo du

Bardzo du

Ilo

ść

aktualizacji

Niska –

rednia

rednia - du

Bardzo du

Dla u

ytkownika

najwa

niejsze

Efektywny kontakt
Poznanie produktów,
firmy

Wygodne wyszukanie
produktu
Bezpiecze

stwo, zaufanie

Obsługa i wygoda

Dost

pno

ść

informacji

Szybko

ść

odnalezienia

ich.

Dla serwisu
najwa

niejsze

Zainteresowanie
u

ytkownika

Skłonienie do
kontaktu/zakupu/wizyty w
salonie

Sprzeda

Budowanie lojalno

Utrzymanie u

ytkownika

w obr

bie portalu.

Zainteresowanie jak
najwi

ksza ilo

informacji.

Podsumowanie

ść

łatwo budowa

yteczne serwisy

korporacyjne i
produktowe

Optymalizacja usability
wymaga zazwyczaj
bada

, tak

e bada

typu

user – experience

Konieczne
zaawansowane testy i
ostro

ne projektowanie

usability.

Jak przeliczy

usability na gotówk

i pozyska

bud

et?

Usability a gotówka

Przykład oparty na ksi

ąż

ce Jakoba Nielsena:

•

Firma zatrudnia 10 000 pracowników (np. który

z polskich banków).

•

Warto

ść

czasu pracy to około 200 zł za godzin

(utracony zysk).

•

Jedna informacja na stronie głównej jest nie- intuicyjna (np.

le napisany wst

aktualno

ci lub nic nie mówi

cy link).

•

dy z pracowników po

ca dodatkowo 5 sekund zastanawiaj

c si

co oznacza.

•

Około 15% osób kliknie na link niepotrzebnie gdy

nie zrozumiej

e nie zawiera

ytecznych dla nich informacji.

•

dy z tych 10% sp

dzi minimum 30 sekund czytaj

c tekst zanim zorientuje si

nie zawiera u

ytecznych dla niego informacji. Wej

cie i wyj

cie z artykułu zajmie im

minimum 5 sekund.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

•

Policzmy:

W pierwszym kroku tracimy 10 000 (pracownicy) * 5 s = 14 h,

co kosztuje 2800 zł

W drugim kroku tracimy 10 000 * 10% * 35 s = 10 h

co kosztuje nas 2000 zł

Zatem jedna nieoptymalna zmiana w serwisie kosztuje firm

jednorazowo

prawie 5000 zł.

Tabela 1 - Jednorazowy koszt jednej nie-intuicyjnej informacji

Firma

Ilo

ść

pracowników

10000

Koszt utraconej godziny pracy

200,00 zł

Informacja

Dodatkowy czas na zrozumienie nie-intuicyjnego
komunikatu [s]

Ilo

ść

bł

dnych decyzji

10%

Czas utracony na skutek bł

dnej decyzji [s]

Straty

czas stracony w kroku 1 [h]

koszt kroku 1

2 778 zł

czas stracony w kroku 2 [h]

koszt kroku 2

1 944 zł

Razem

4 722 zł

Przykład

esz otworzy

plik ww. wylicze

zapisany w formacie Excel i samodzielnie przeprowadzi

symulacj

dla zmiennych parametrów. Wszystkie materiały

wiczeniowe s

dost

pne na

http://www.webusability.pl

Ile mo

na zyska

W swoim Alertbox Jakob Nielsen opisuje badania na 42 przypadkach gdzie łatwo dało si

ustali

przeło

enia ulepszenia u

yteczno

ci na efekty. Dla ka

dego projektu ustalono

mierniki, które zbadano przed i po wprowadzeniu ulepsze

w usability.

Zało

one mierniki wzrosły

rednio o 135%.

Sprzeda

(konwersja) – 100%

Ilo

ść

odsłon / ilo

ść

UU – 150%

Efektywno

ść

(user performance) – 161%

Ile firmy wydaj

na usability?

Zazwyczaj porównuje si

koszt bada

usability do całego kosztu projektu.

Dysponuj

dwoma badaniami dotycz

cymi kosztów usability w projekcie. Oba badania

oparto na tych samych zało

eniach: porównujemy całkowity koszt działa

usability do

całkowitego kosztu projektu. W badaniu prowadzonym przez Norman/Nielsen na próbce 863
serwisów na usability wydawano około 10% bud

etu projektu. W analizach jakie

przeprowadziłem w firmie w której pracuj

(na znacznie mniejszej próbce bo tylko 5

przypadków) działania zwi

zane z usability skonsumowały około 14% bud

etu projektów.

Brałem pod uwag

jedynie te projekty gdzie prowadzili

my zarówno usability jak

i projektowanie. W wielu przypadkach pracujemy jedynie jako badacz/konsultant usability
i koszty całego projektu nie s

nam znane.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

na jest

wiadomo

ść

e w du

ych projektach udział bada

usability w kosztach całego

projektu b

dzie procentowo znacznie ni

szy.

Podsumowuj

c wydaj

c 10-14% bud

etu na usability zyskujemy o 135%

efektywniejszy produkt. Im wi

ksza skala działania, tym efekty mierzone w gotówce

bardziej spektakularne. Im mniejsza skala działania tym efekty mog

okaza

niejsze dla przedsi

biorstwa.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

r e k l a m a

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Najwa

niejsze wytyczne

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Jacy si

ytkownicy?

•

Internauci sp

dzaj

coraz wi

cej czasu online (12 godzin miesi

cznie w 2003,

22 godzin miesi

cznie w 2005)

•

coraz bardziej aktywni i szybciej znajduj

informacje (80 sekund na jedn

odsłon

strony w 2003, 57 sekund w 2005)

•

ytkownicy coraz wi

cej wymagaj

od twórców serwisów.

Niepisane standardy Internetu.

Przykład

Zastanów si

jakie konwencje stosowane s

w gazecie.

•

nagłówek

•

podpis pod fotografi

•

...

Konwencje w Internecie.

•

o konwencji pochodzi ze

wiata realnego, zwłaszcza z prasy.

•

Konwencje i niepisane standardy s

bardzo przydatne i zazwyczaj s

słuszne,

inaczej nie byłyby konwencjami :)

•

Projektanci maj

wrodzon

niech

ęć

do wykorzystania konwencji.

•

Umieszczenie elementów w pewnych standardowych miejscach ułatwia odnalezienie

ich.

•

Logo w lewym górnym naro

niku serwisu jest konwencj

•

Podkre

lenie elementu b

cego linkiem jest konwencj

•

Zmiana kolorów linków ju

odwiedzonych jest konwencj

•

Poj

cie koszyka w handlu internetowym jest konwencj

Rysunek 1 - serwis e-gotowka.pl jest bardzo czytelny ale mam jedno zastrze

enie. Po wej

ciu na pod-stron

chciałem wróci

na stron

główn

poprzez klikni

cie na logo serwisu. Po klikni

ciu na Cetelem zamiast wróci

stron

główn

serwisu, zostałem skierowany na strony banku Cetelem. Wielu u

ytkowników spodziewa si

tutaj

pewnej konwencji, która nie została zachowania – logo w lewym górnym logu, które jest linkiem na stron

główn

W serwisie nie ma logo w lewym górnym naro

niku a jedyne logo w nagłówku prowadzi do serwisu

zewn

trznego.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Analiza i pisanie konstruktywnych komunikatów.

Rysunek 2 - Komunikat "bł

d pracy z systemem" brzmi do

ść

enigmatycznie.

Nie tłumaczy co si

stało i co nale

y teraz zrobi

Rysunek 3 - Dobry komunikat w Merlin.pl.

Wiem co si

stało, co musz

robi

oraz gdzie mog

szuka

pomocy.

Rysunek 4 - Na stronach korporacje.pekao.com.pl wyszukiwarka po nie znalezieniu poszukiwanej frazy proponuje

skorzystanie z mapy strony lub skontaktowanie si

w celu uzyskania potrzebnych informacji.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Przykład

1. Wejd

na wybrany serwis WWW lub portal.

2. Odszukaj komunikaty o nast

puj

cych sytuacjach

a. Wyszukiwarka – brak wyników wyszukiwania
b. Newsletter – niepoprawny adres e-mail
c. Formularz kontaktowy – niepoprawne dane lub brak danych
d. Inny komunikat systemu

3. Czy komunikaty systemu s

poprawne?

a. Czy tłumacz

co si

stało?

b. Czy wskazuj

miejsce problemu?

c. Czy podaj

rozwi

zanie problemu?

d. Czy je

li prosz

o wpisanie danych, podaj

ich format?

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Efektywne linki.

•

Tekst odno

ników i opcji w menu nie powinien by

zbyt długi gdy

utrudnia to szybkie

zrozumienie znaczenia.

Dwa do czterech słów.

•

Unikaj „kliknij tutaj”!

•

Stosuj tytuły odno

ników.

•

Linki tekstowe – trzymaj si

konwencji.

Podkre

lenia.

Niebieski kolor (coraz cz

ęś

ciej uwa

a si

e to nie jest konieczne).

Oznaczenie ju

klikni

tych.

•

Nie otwieraj linków w nowym oknie.

•

Wyra

nie zaznacz elementy, które mo

na klikn

ąć

Podstawy nawigacji.

•

Działaj

c zazwyczaj czego

szukasz

•

Zale

nie od charakteru pytasz lub szukasz na własn

W Internecie pytanie to zadawanie pyta

wyszukiwarce.

Szukanie na własn

to korzystanie z menu nawigacyjnego.

•

Dwa typu u

ytkowników:

Nastawieni na wyszukiwanie – od razu id

do wyszukiwarki

Nastawieni na przegl

danie – wol

przegl

strony

Dlaczego w Sieci nawiguje si

trudniej.

•

Brak poj

cia skali, nie wiesz jak du

a jest witryna wi

c trudno okre

ile mo

e zaj

ąć

jej przeszukanie.

•

Nieintuicyjne okre

lanie pozycji i kierunku, nie przystaje do

wiata realnego

•

Surfowanie po Internecie z natury jest stanem pewnego zagubienia.

J. Nielsen podaje,

e a

30% wszystkich klikni

ęć

w Internecie to klikni

cie przycisku

Wstecz. To tak

e kolejny argument by unika

ramek i nawigacji opartej na Flash – te

elementy mog

utrudnia

nawigowanie za pomoc

przycisku Wstecz.

Główne zadania nawigacji

•

Nawigacja umo

liwia odnajdywanie dokumentów w serwisie.

•

Nawigacja informuje nas gdzie jeste

my w strukturze serwisu (odpowiednie

oznaczenie w menu).

•

Nawigacja daje nam poczucie stabilno

ci (element stały).

•

Mówi o tym co w danym miejscu si

znajduje (poj

cie menu).

•

Mówi jak mo

emy z tego skorzysta

•

Buduje zaufanie do autorów serwisu.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 5 - Schemat nawigacji po serwisie, na podstawie S.Krug

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Projektowanie nawigacji.

Stała nawigacja.

Zbiór elementów nawigacyjnych pojawiaj

cych si

na wszystkich stronach serwisu. S

najcz

ęś

ciej:

•

Identyfikator strony.

•

cze do strony startowej.

•

Wyszukiwarka.

•

Menu narz

dziowe.

•

Menu główne.

Stała nawigacja mo

e by

zmieniona b

nieobecna na stronie głównej oraz na stronach z

formularzami (np. w systemach płatno

ci).

Menu narz

dziowe.

Zawiera od 3 do 7 elementów, które uznajemy za szczególnie przydatne. Zazwyczaj s

to:

•

Strona główna.

•

Kontakt.

•

Mapa serwisu.

sto wyst

puj

tutaj tak

e ł

cza takie jak:

•

Archiwum.

•

Wyloguj si

•

Obsługa klienta.

•

Forum dyskusyjne.

•

Pliki do pobrania.

•

FAQ.

•

Pomoc.

•

Jak zacz

ąć

•

Wiadomo

ci prasowe.

•

Polityka prywatno

ci.

•

Rejestracja.

•

Wyszukiwarka.

•

Koszyk.

•

Zapisz si

do nas.

•

Adresy placówek.

•

Twoje konto.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Punkty startowe.

Punkty startowe s

elementami strony głównej, które prowadz

w gł

b struktury serwisu.

Dzi

ki temu u

ytkownikom łatwiej odnale

źć

najcz

ęś

ciej poszukiwane elementy serwisu.

Punkty startowe pokazuj

co na stronie mo

na znale

źć

i zrobi

. Dzi

ki temu pozwalaj

na szybkie zapoznanie si

z najwa

niejszymi elementami całego serwisu.

Rysunek 6 - Punkty startowe w serwisie www.ingbank.pl (zaznaczone

ółtym markerem) ułatwiaj

dost

p do opisu najwa

niejszych produktów banku.

Rysunek 7 - Na serwisie www.mbank.pl punkty startowe nawet nazywaj

Start.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Strona główna.

Ró

ni si

od innych stron serwisu. Mo

e na niej obowi

zywa

inny system nawigacyjny ni

na pod-stronach.

Jeste

tutaj.

•

Działa na zasadzie „jeste

tutaj” na mapie

•

Stosowane najcz

ęś

ciej w menu

Rysunek 8 - bardzo dobrze wyró

niony element

Rysunek 9 - lepiej byłoby wyró

tylko ostatni element

Rysunek 10 - Mocno wyró

niony pierwszy poziom ale zupełny brak wyró

nienia drugiego poziomu

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Problemy z rozwijanym menu.

Dla oszcz

dzenia miejsca cz

sto stosuje si

menu rozwijane. Generuje to jednak sporo

problemów:

•

Nie mo

na obejrze

zawarto

ci menu przed klikni

ciem.

•

Zazwyczaj s

trudne do przegl

dania, zwłaszcza je

li maj

kilka poziomów.

•

li jest

le skonstruowane to wyst

puj

problemy z dost

pno

•

Wyszukiwanie z poziomu przegl

darki nie b

dzie uwzgl

dnia

opcji menu

dost

pnych po rozwini

ciu.

Rysunek 11 - Autorzy tej witryny nawet wyszukiwark

umie

cili w rozwijalnym menu.

Menu rozwijanie doskonale sprawdzaj

w listach, np. z wyborem kraju.

Rysunek 12 - Menu rozwijane pozwala na wygodny wybór kraju.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

W sklepie internetowym na www.hp.pl zastosowano element nawigacyjny nieco podobny -
ale znacznie gorszy od rozwijanego menu. Aby obejrze

całe menu promocji nale

nawigowa

strzałeczkami. Prawdopodobnie du

a cz

ęść

ytkowników nawet nie zauwa

e strona oferuje nie 6 grup promocji (widocznych po załadowaniu serwisu) ale a

13.

Ponad połowa zawarto

ci stron nie zostanie dobrze poznana z powodu

le skonstruowanego

menu.

Rysunek 13 - Strzałka przewijaj

ca menu z promocjami jest słabo widoczna a cały mechanizm

jest bardzo nieintuicyjny.

Rysunek 14 - Po klikni

ciu strzałki menu Promocje pokazuje swoje nast

pne składniki.

cie

ka nawigacyjna (

cie

ka powrotu,

cie

ka okruszków).

•

Pokazuje aktualn

pozycj

•

Pozwala na cofanie si

w strukturze

•

Najlepszym separatorem kolejnych poziomów jest znak „>”

•

ywaj słowa „jeste

tutaj” aby u

ytkownik zrozumiał znaczenie

cie

Rysunek 15 -

cie

ki nawigacyjne w bzwbk.pl oraz na About.com

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Strona 404

Postaraj si

zaplanowa

sytuacje gdy u

ytkownik mo

e najbardziej potrzebowa

pomocy.

Z pewno

tak

sytuacj

jest klikni

cie lub wpisanie niepoprawnego linku.

Najcz

ęś

ciej u

ytkownik otrzymuje zwykł

stron

bł

du, niestety nie pomaga mu ona

odnale

źć

to czego szuka.

Rysunek 16 - Strony bł

dów takie jak wy

ej nie s

pomocne dla u

ytkownika. Nie zawieraj

sugestii co do

nast

pnych kroków.

Rysunek 17 - Serwis Microsoft.com w przypadku podania przez u

ytkownika strony, która nie istnieje pokazuje

ytkownikowi nie tylko obszerne wytłumaczenie sytuacji ale tak

e katalog linków i wyszukiwark

. Tutaj

naprawd

na uzyska

pomoc.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 18 - Serwis Apple.com tak

e doskonale rozwi

zuje problemy zagubionych internautów.

Rysunek 19 - Prosty trick polega na takim skonfigurowaniu domeny aby wpisanie o jednego "w" za du

o lub za

mało w adresie przekierowywało do dobrej strony. Trick ten z powodzeniem stosuje Amazon aby ułatwia

swoim

klientom

ycie

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Struktura serwisu.

Pracujesz w domu, chcesz kupi

drukark

. Jak

opcje wybierzesz w katalogu produktów

sklepu internetowego Home czy Office?

Intuicyjna struktura serwisu.

•

Struktura serwisu musi by

zorientowana na u

ytkownika:

•

ne s

wybory alternatywne. Gdy u

ytkownik widzi cało

ść

łatwiej jest mu

zadecydowa

•

ytkownicy nie wybieraj

optymalnie lecz zadowalaj

ytkownicy spiesz

Nie ma du

ej szkody je

li si

pomylimy.

Zamiast ocenia

wszystkie odno

niki wolimy ew. klikn

ąć

wstecz gdyby

wybrali.

•

Nale

y dba

o dobranie odpowiedniej gł

boko

ci i szeroko

ci menu.

•

By dobrze rozplanowa

nawigacj

nale

y zdoby

przykład tre

ci dla ka

dego

z poziomów serwisu.

Przykład.

1. Uruchom program FreeMind

(do pobrania z

http://freemind.sourceforge.net/wiki/index.php/Main_Page#Download

)

2. Uruchom wybrany serwis internetowy
3. Zapisz jego struktur

w programie FreeMind

a. Postaraj si

wyró

bloki struktury serwisu takie jak

menu główne

menu narz

dziowe / nagłówek

stopka

punkty startowe

4. Zaproponuj now

struktur

serwisu.

a. Now

map

serwisu mo

esz wykona

zgodnie z ni

ej zaprezentowanym

schematem.

b. Zaproponuj optymalny stosunek szeroko

ci do gł

boko

ci menu.

c. Zwró

uwag

na intuicyjne nazwy sekcji i dokumentów

d. Postaraj si

stworzy

dodatkowe elementy nawigacyjne w postaci punktów

startowych i innych poznanych mechanizmów.

Rysunek 20 - Stara i nowa struktura serwisu WWW.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Projektowanie wyszukiwarki.

Intuicyjna wyszukiwarka.

•

Wyszukiwarka dla u

ytkownika to:

pole tekstowe,

przycisk z wyrazem Szukaj

•

Kolejny raz trzymaj si

konwencji – wi

kszo

ść

osób poszukuje słowa „Szukaj”, nie

ywaj jego mniej popularnych synonimów:

Znajd

Szybkie wyszukiwanie

•

li jako etykiet

bloczka u

ywasz słowa „Szukaj” to na przycisku mo

esz umie

słowo „Start” . W USA jest to du

o popularniejsze rozwi

zanie ni

w Polsce.

•

Nie trzeba ju

edukowa

ytkowników tekstami typu „Wpisz słowo kluczowe”.

•

Upewnij si

e u

ytkownik zna zakres wyszukiwania.

Domy

lnie wyszukiwanie w całej witrynie.

•

de dodatkowe pole konfiguracji wyszukiwarki mo

e sprawia

ytkownikom

trudno

ci – dobra wyszukiwarka to prosta wyszukiwarka.

•

Im dłu

sze pole wyszukiwania tym dłu

sze zapytanie wpisuj

ytkownicy, dzi

temu otrzymuj

bardziej precyzyjne wyniki.

•

liwo

ść

filtrowania i wyszukiwania zaawansowanego dopiero na stronach

wyników.

Rysunek 21 - Zasoby Allegro s

olbrzymie ale wyszukiwarka jest prosta i przejrzysta.

Dopiero link zaawansowane prowadzi do rozbudowanych mechanizmów wyszukiwania.

Rysunek 22 - Wyszukiwarka w mBank.pl mimo,

e jest niewielka to mo

e sprawia

problemy. Mało kto od razu

zrozumie,

e pod ikon

kwiatka znajduje si

menu rozwijane umo

liwiaj

ce zaw

ęż

enie wyszukiwania.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Architektura informacji.

Prawidłowo zastosowana architektura informacji organizuje cały serwis tak,

e błyskawicznie

wiemy co jest wa

ne. Najbli

sze porównanie to odpowiedni skład gazety.

Dobra architektura informacji.

•

Podziel stron

na wyra

ne bloki funkcjonalne. Pozwala to u

ytkownikom skupi

tylko na tym co dla nich wa

ne.

•

Im co

niejsze, tym bardziej si

wyró

nia.

•

Elementy powi

zane ze sob

logicznie powinny by

powi

zane te

w sposób

wizualny.

•

Elementy powinny by

wizualnie zagnie

one.

Nazwa pod-strony:

•

Nazwa strony powinna dociera

do u

ytkownika jako:

Pod

wietlenie opcji w menu w jakiej jestem

Wyra

na nazwa strony w cz

ęś

ci contentowej (przeznaczonej na tre

ść

) serwisu

Nazwa strony jako tytuł – umieszczona w pasku przegl

darki

•

Nazwa musi by

zgodna z tym co klikn

łem lub jak najbardziej zbli

ona

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Budowa typowej strony.

Rysunek 23 - typowy layout serwisu WWW.

Rysunek 24 – makieta strony głównej serwisu.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Test Kruga.

Steve Krug proponuje nast

puj

cy test serwisu WWW:

Niezale

nie od tego na jakiej pod-stronie serwisu si

znajdziesz, powiniene

błyskawicznie

móc odpowiedzie

na pytania:

1. Co to jest za witryna (identyfikator witryny)?
2. Na jakiej jestem stronie (nazwa strony)?
3. Jakie s

główne kategorie?

4. Jakie mam opcje do wyboru na tym poziomie struktury?
5. Gdzie znajduj

w odniesieniu do całej struktury?

6. W jaki sposób mog

czego

poszuka

Przykład.

Wykonanie testu Kruga dla wybranej witryny.

1. Wybierz losowo dowoln

stron

internetow

i wydrukuj j

2. Kartk

z wydrukiem trzymaj przed sob

na odległo

ść

ki lub mocno zmru

oczy aby

nie mógł widzie

detali.

3. Tak szybko jak to mo

liwe, spróbuj odnale

źć

i zaznaczy

wszystkie ni

wymienione elementy.

Logo witryny

Nazwa strony

Kategorie i podkategorie

Nawigacja lokalna

Oznaczenie „tutaj jeste

”

Wyszukiwark

4. Nast

pnie odpowiedz na poni

sze pytania

Co to jest za witryna (identyfikator witryny)?

Na jakiej jestem stronie (nazwa strony)?

Jakie s

główne kategorie?

Jakie mam opcje do wyboru na tym poziomie struktury?

Gdzie znajduj

w odniesieniu do całej struktury?

W jaki sposób mog

czego

poszuka

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

r e k l a m a

MarcinGocha

com

otwórz oczy na nowe możliwości

wykorzystaj efektywnie moc nowych mediów

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Efektywno

ść

serwisów korporacyjnych.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Czego chc

ytkownicy serwisów korporacyjnych?

W 2005 roku Agencja Janmedia Interactive zapytała osoby zajmuj

ce si

serwisami

korporacyjnymi na co najcz

ęś

ciej narzekaj

ich u

ytkownicy.

Rysunek 25 - Na co najcz

ęś

ciej narzekaj

nasi u

ytkownicy - przedstawiciele korporacji o swoich

serwisach.

Nie przegap okazji.

Co kilka lat wi

kszo

ść

znanych mi firm zmienia swoje strony korporacyjne. W mojej opinii

zazwyczaj jest to efektem rozwoju działa

marketingowych lub wynika po prostu z ch

ulepszenia serwisu. Je

li chcesz zrobi

dobr

robot

, to doskonały moment dla Ciebie by

zaproponował przetestowanie obecnego serwisu. Nierozwa

ne byłoby wyrzucenie obecnego

serwisu do kosza i rozpocz

cie od pustej kartki gdy masz mo

liwo

ść

sprawdzi

co dobrego a

co złego jest w obecnym serwisie. Gor

co polecam przetestowa

z kilkoma u

ytkownikami

dy serwis, który ma zosta

poddany procesowi od

wie

enia.

Dobrym pomysłem mo

e by

zorganizowanie porównawczych testów z u

ytkownikami

dla serwisów Twojej konkurencji. B

dziesz miał okazj

zdoby

cenna wiedz

zachowaniach u

ytkowników na podobnych serwisach – to ułatwi decyzj

o kształcie

nowego serwisu.

Formularze.

Formularze s

elementem, który w serwisach korporacyjnych jest cz

sto odpowiedzialny za

obni

enie ogólnej efektywno

ci serwisu – wiele razy słyszałem od klienta,

e chce aby

poprzez jego serwis korporacyjny klienci mogli nawi

kontakt. To zadanie jest tym

trudniejsze im mniej u

yteczny formularz kontaktowy.

Co na pewno mo

na zrobi

aby było lepiej:

Oznaczaj pola obowi

zkowe.

Podawaj przykłady formatu informacji jaki oczekujesz lub przyjmuj ka

dy u

ywany

format.

Wyra

nie podawaj ograniczenia liczby znaków.

li to nie jest konieczne, nie twórz ogranicze

liczby znaków.

Nie pokazuj opcji, których klient nie mo

e wybra

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Wprowadzone dane sprawdzaj jak najszybciej.

Bezwzgl

dnie zrezygnuj z przycisku Wyczy

ść

Wył

czaj przycisk wysyłaj

cy formularz zaraz po jego klikni

ciu.

Rysunek 26 - Formularz kontaktowy na www.mBank.pl. Nie jest najlepiej: nie oznaczono pól

wymaganych (wymagane s

wszystkie) a przycisk WYCZY

ŚĆ

wygl

da du

o bardziej zach

caj

co do

klikni

cia ni

LIJ.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Analiza wybranych serwisów korporacyjnych, opracowanie
propozycji ulepsze

Przykład.

Przeanalizuj witryny, jakie problemy rzucaj

Ci si

w oczy w pierwszej kolejno

ci?

Rysunek 27 –

www.bzwbk.pl

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Moim zdaniem główne problemy z u

yteczno

serwisu to:

Menu „Usługi dla Ciebie” – trzeba przewija

okienko co uniemo

liwia szybkie

zapoznanie si

z list

usług.

Nazwa sekcji w menu głównym „Home: Dla Ciebie” brzmi co najmniej dziwnie

i dwuznacznie.

Dla wielu osób automatyczne przeł

czenie z głównej domeny

www.bzwbk.pl

www.dlaciebie.bzwbk.pl

nie b

dzie jasne i nie zrozumiej

e tak naprawd

znale

li si

w sekcji dla klientów indywidualnych. Klienci korporacyjny mog

mie

powa

ne problemy z zauwa

eniem,

e aby przej

ść

do swojej sekcji

serwisu musz

wybra

link tekstowy na górze serwisu.

Nazwy głównych sekcji niewiele mówi

, lepiej by tego typu sformułowania były

punktami startowymi a menu główne by pozostało w formie zbli

onej do

nawigacji znanej z innych banków.

Wyszukiwarka znajduje si

w do

ść

nietypowym dla niej miejscu. Zast

pienie

przycisku „Szukaj” linkiem jest do

ść

nietypowe i mo

e utrudnia

zrozumienie

wyszukiwarki.

Nie mo

na wróci

z pod-stron serwisu poprzez klikni

cie na logo.

Podawanie daty na stronie banku w strategicznym miejscu uwa

am za strat

cennej przestrzeni. Podobnie odbieram przeznaczenie praktycznie całego
widocznego obszaru ekranu w sekcji

rodkowej na gigantyczny banner

reklamowy.

Co gorsza banner ten cz

sto powtarza si

w innych sekcjach głównych.

Klikaj

c kolejne elementy menu głównego u

ytkownik mo

e nawet nie

zauwa

e zmienia si

dolna cz

ęść

strony (banner i menu produktowe

pozostaj

takie same).

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 28 -

www.bat.com.pl

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Moim zdaniem główne problemy z u

yteczno

serwisu to:

Menu główne pisane w pionie i w dodatku bardzo skomplikowane (długie

nazwy). Szalenie utrudnia korzystanie z serwisu. Na szcz

ęś

cie niedawno

menu to zostało zmienione na układ poziomy.

Bardzo nieczytelna czcionka w menu narz

dziowym na górze serwisu.

Wyszukiwarka jest dost

pna na stronie głównej, nie ma potrzeby w menu

głównym tworzy

osobnego odno

nika do wyszukiwarki.

Serwis zachowuje si

bardzo nietypowo po wybraniu z sekcji narz

dziowej

linku „Inne rynki”. Musimy dwa razy potwierdzi

e rzeczywi

cie chcemy

przej

ść

na inny serwis.

Rysunek 29 - Strona informuje nas,

e opuszczamy serwis www.bat.com.pl i od tego momentu

firma nie ponosi odpowiedzialno

ci za materiały zawarte na stronach.

Poł

czenie w jedynym bloczku wyszukiwarki i menu działa dezorientuj

co.

Zazwyczaj takie zestawienie listy rozwijanej i wyszukiwarki słu

y do

zaw

ęż

enia wyników wyszukiwania. Tutaj jednak ka

dy z elementów działa

niezale

nie.

Ponadto menu „Zobacz” zawiera przed ka

opcj

tajemnicze liczby.

Rysunek 30 - Tajemnicze liczby przed opcjami menu z pewno

nie pomagaj

w nawigacji.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Projektowanie i badanie strony głównej serwisu korporacyjnego.

10 sekund to maksymalny czas skupienia uwagi przez u

ytkownika. Powy

ej tego czasu

ytkownicy zaczynaj

zajmowa

swoimi sprawami. Czas przej

cia pomi

dzy

stronami nie powinien przekracza

tego czasu. Optymalny czas to 0,1 - 1 s, gdy

wtedy

przepływ my

li nie zostaje przerwany.

Bardzo wa

ne jest aby czas odpowiedzi był przewidywalny.

Pobieranie stron głównych najwi

kszych firm internetowych zabiera do 10 s.

Przykład.

Zbadaj szybko

ść

ładowania wybranych stron.

Podobne informacje znale

źć

na w panelu Info przegl

darki Opera oraz w pasku

narz

dziowym Web Developer dla Firefox. Pasek narz

dziowy dla Firefox pobierzesz z

adresu:

http://chrispederick.com/work/webdeveloper/

1. Je

li jeste

ytkownikiem Internet Explorer to pobierz z adresu

http://www.nils.org.au/ais/web/resources/toolbar/index.html

Web Accessibility

Toolbar i zainstaluj go.

2. Uruchom Internet Explorer
3. Wejd

na wybrany serwis internetowy

4. Kliknij „Doc info -> Page Weight/Speed”

5. Odczytaj ci

ęż

ar strony oraz czas pobierania

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

6. Z poziomu tego samego narz

dzia mo

esz wywoła

tak

e „Doc info -> Page speed

report”

7. Drugie narz

dzie generuje pełen raport, uwzgl

dniaj

c realny czas potrzebny na

załadowanie całego serwisu. Jest zatem bardziej wiarygodn

ale działaj

wolniej

metod

Rysunek 31 - Wygenerowany raport zawiera tak

e przydatne porady

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Co musi znale

źć

na stronie głównej?

•

samo

ść

witryny, koncepcja

•

Struktura witryny

Co ja tu mog

znale

źć

Co ja tu mog

zrobi

•

Autoreklama

Branding marki i firmy

Reklama zwarto

Reklama funkcjonalno

•

Oznaki aktualno

ci i

ycia

•

Linki do najcz

ęś

ciej odwiedzanych miejsc

•

Punkty startowe

•

Rejestracja, elementy budowania społeczno

ci itp.

•

Elementy buduj

ce zaufanie

Jakie problemy napotkasz projektuj

c stron

główn

•

dy chce by

na stronie głównej

•

dy chce by

widoczny bez przewijania ekranu

•

dy (o zgrozo, nawet Prezes!) ma swoje zdanie na temat strony głównej, buduje

ona wizerunek firmy

•

Musi odwoływa

do wszystkich odwiedzaj

cych serwis, czasem to bardzo

zró

nicowane grupy

Rysunek 32 - Tylko cz

ęść

witryny wida

bez konieczno

ci przewijania, jest to szczególnie cenny obszar.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Na jakie pytania musi odpowiada

strona główna?

•

Co to jest?

•

Co oni tutaj maj

•

Co mog

tu zrobi

•

Dlaczego powinienem by

tu, a nie gdzie indziej?

Jak przekaza

cel witryny odwiedzaj

cemu?

•

Slogan reklamowy

•

Tekst powitalny

Rysunek 33 - tekst wprowadzaj

cy wraz z rysunkiem pokazuj

cym jak w 3 krokach skorzysta

z usług serwisu

Rysunek 34 - W serwisie e-gotowka.pl mamy bardzo klarowny przekaz. Od razu wiadomo co mo

na tutaj zrobi

Zwi

kszanie ilo

ci informacji.

•

Sekwencyjne wy

wietlanie reklam

Z mo

liwo

ingerencji u

ytkownika w sekwencj

(poprzednia, nast

pna)

•

Rotuj

ce bannerki

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Efekty najazdu.

•

Dla zaoszcz

dzenia miejsca stosuje si

sto efekty polegaj

ce na wy

wietlaniu

opisu dopiero po wskazaniu elementu kursorem.

•

Generuje to mnóstwo problemów:

Sam musisz odszuka

i sprawdzi

wszystkie potencjalne elementy, które

mog

elementami menu.

W danej chwili mo

esz wy

wietli

tylko jeden opis, nie mo

na zatem

porówna

wszystkich opcji.

Nie zawsze pojawiaj

w bezpo

rednim s

siedztwie kursora, musimy

kierowa

wzrok raz na kursor, raz na opis.

Nie pozwalaj

na ocen

zawarto

ci strony bez wchodzenia w interakcj

Sugeruj

odwrócenie sytuacji – czytelne menu tekstowe, po wskazaniu

elementu menu uruchamia si

jaka

interakcja lub pojawia element graficzny.

Rysunek 35 - Całe menu ukryte jest pod niepozornymi kropeczkami po prawej na dole, dopiero po wskazaniu

kropeczki kursorem pokazuje si

jej opis.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 36 - Zadanie dla domy

lnych! Znajd

menu na tym zarzucie ekranu. Menu ukryte zostało pod

kwadracikami obok nutki. Nutka i kwadraciki sugeruj

e ten element słu

y do kontroli gło

ci. Niestety pod

tym niepozornym elementem znajduje si

całe menu serwisu.

Rysunek 37 - Serwis Casio tak

e wymaga od odwiedzaj

cych mnóstwa cierpliwo

Projektowanie

cie

ek nawigacyjnych.

•

Jak powinien zachowa

ytkownik w serwisie WWW

Po co przychodzi?

Na jakich stronach ko

czy nawigacj

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Efektywne pisanie dla Internetu.

Czytanie z ekranów komputera jest około 25% wolniejsze od czytania z papieru.

Tekst skuteczny w Internecie.

•

50% tekstu mniej ni

na papierze.

•

Stosuj zasad

odwróconej piramidy – od ogółu do szczegółu. O zasadzie odwróconej

piramidy przeczytasz na

http://www.useit.com/alertbox/9606.html

•

Mniej słów oznacza,

jest mniej chaosu na stronie,

tre

ci u

yteczne s

lepiej widoczne,

nie trzeba przewija

stron.

•

Kiepskie leady (zajawki, wprowadzenia do tekstu) to strata czasu i miejsca – je

tekst nie przekazuje przydatnych informacji nie jest dobrym leadem na stron

WWW.

•

Pisanie instrukcji obsługi do stron mija si

z celem, serwis powinien sam si

wyja

nia

. Oczywi

cie niekiedy instrukcja jest wymagana dla budowania zaufania lub

ze wzgl

du na zgodno

ść

z prawem ale skorzysta z niej bardzo mało u

ytkowników.

•

Wykorzystaj struktur

HTML

H1 … H7,

ALT,

TITLE.

•

pod uwag

SEO (Search Engine Optimization – Optymalizacja dla

wyszukiwarek).

Nasycenie słowami kluczowymi

Spójno

ść

tytułu, metatagów i tre

ci.

ytkownicy surfuj

cy po Sieci, gdy zatrzymuj

by czyta

, czuj

mniej produktywni.

Nie s

skłonni po

wieci

na czytanie tyle samo czasu co na czytanie wersji papierowej

tekstu.

Budowanie zaufania do serwisu.

•

Łatwa weryfikacja obiektywno

ci informacji – zamieszczaj linki do materiałów

ródłowych, przypisy, bibliografie. Powołuj si

na obiektywne badania i organizacje.

Nawet je

li u

ytkownik nie sprawdzi wszystkich linków to istnienie ich oraz to,

e nie

boisz si

weryfikacji danych zbuduje pozytywny obraz serwisu.

•

Firma z krwi i ko

ci – czasem nawet du

e organizacje mog

nie by

znane wszystkim

ytkownikom Sieci. Warto podkre

e serwis jest tylko odbiciem istniej

cej

organizacji. Elementy przydatne w tym procesie to podawania adresów biur oraz
osób kontaktowych (jeszcze lepiej je

li ze zdj

ciem).

•

Powi

zania rynkowe – firma, która działa poza rynkiem nie budzi zaufania, warto jest

napisa

jakich klientów si

obsługuje, do jakich organizacji nale

y. Wszystkie te

elementy umiejscowi

w oczach klienta Twoj

firm

gdzie

na mapie powi

biznesowych. Cz

sto tego typu informacje pozwalaj

błyskawicznie oceni

klientowi czy rozmiar biznesu jaki prowadzi Twoja firma jest odpowiedni do tego kogo
poszukuje.

•

Ludzie – podkre

lanie roli pracowników firmy, listowanie kluczowych osób wraz z

krótkim opisem i kontaktem oraz pokazywanie

wiatu profesjonalizmu swych

pracowników i ekspertów prawie zawsze buduje pozytywny obraz firmy. Warto
podkre

projekty zwi

zane z rozwojem pracowników oraz polityk

odpowiedzialno

ci społecznej. Dobrym pomysłem mo

e by

zach

cenie kluczowych

osób do budowania wizerunku firmy poprzez prowadzenie bloga. Blog

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Webusability.pl, przy całej obiektywno

ci jak

staram si

zachowa

, skierował kilka

osób do Janmedia. Po prostu ludzie Ci chcieli dowiedzie

gdzie pracuj

. Je

masz ludzi, którzy znaj

na rzeczy i lubi

pisa

, postaraj si

wykorzysta

ten

potencjał.

•

Łatwy kontakt – mo

liwo

ść

ró

norodnego i wygodnego kontaktu jest dla

ytkowników kolejnym sygnałem,

e firma jest otwarta na ich potrzeby. Szczególnie

tam gdzie klienci mog

oczekiwa

wsparcia szalenie istotne jest eksponowanie

łatwo

ci nawi

zania kontaktu.

•

Profesjonalny wygl

d – bardzo wielu u

ytkowników do wst

pnej selekcji znalezionych

w Sieci serwisów u

ywa kryterium estetycznego. Oczywi

cie to poniek

d sprawa

gustu jednak

e praktycznie ka

dy szybko odró

ni dobry, starannie i dokładnie

wykonany layout od nieprofesjonalnego projektu graficznego. Warto te

pami

layout o wyra

nie przestarzałym wygl

dzie b

dzie budował taki sam obraz firmy w

oczach klienta. Warto zatem raz na 2-3 lata od

wie

layout serwisu. Zwłaszcza,

obecnie dzi

ki oddzieleniu warstwy tre

ci od warstwy prezentacji zmiana szaty

graficznej nie wi

ąż

e si

z du

ymi wydatkami jak kiedy

•

Aktualno

ść

informacji – najprostsza i sprawiaj

ca klientom najwi

cej problemów

wytyczna. Tworz

c serwis WWW nale

y zastanowi

realnie ile czasu b

dzie

na po

na jego aktualizacj

. Dopiero po tym ustaleniu nale

y planowa

funkcjonalno

ci serwisu. Dzi

ki temu unikniecie stworzenia działów i funkcjonalno

wymagaj

cej zbyt wiele wysiłku w aktualizacji. W ofertach jakie tworz

dla klientów

ten element wpisuj

do sekcji analiza ryzyka

•

Ostro

nie z reklamami – zbyt du

a ilo

ść

reklam skutecznie utrudni budowanie

zaufania do serwisu. Mo

e by

bardzo trudno namówi

ytkowników do

prenumeraty newslettera je

li z ilo

ci reklam na stronie wywnioskuj

e firma zaleje

ich spamem.

•

Unikaj bł

dów – literówki, bł

dy ortograficzne i połamane linki mog

zniszczy

budowane tak starannie zaufanie do serwisu. Metodyczne podej

cie do problemu

powinno polega

na u

ywaniu oprogramowania CMS wspieraj

cego prac

grupow

gdzie ka

dy publikowany tekst mo

e zosta

sprawdzony przez korektora. Powinno

tworzy

repozytorium plików i linków aby nie trzeba było za ka

dym razem

wpisywa

ich r

cznie.

•

Adekwatna domena – oczywiste jest,

e im lepszy adres ma firma tym wi

kszym

zaufaniem si

cieszy. W Sieci prawo to nadal obowi

zuje. Nale

y wybra

prost

zapami

tania domen

i wzi

ąć

pod uwag

szereg dodatkowych czynników – ot

cho

by czy dyktowanie jej przez telefon nie b

dzie problematyczne. Jako niepisany

standard przyjmuje si

zakładanie domen bez my

lników ani podkre

. Wła

nie w

ten sposób Twoj

firm

dzie szukało najwi

cej internautów. Firmy o długiej nazwie

mog

rozwa

wykupienie domeny z pełn

nazw

oraz z nazw

skrócon

dla osób,

które s

bli

ej zwi

zane z firm

i zapami

taj

taki skrócony adres.

•

Dobre pozycje w wyszukiwarkach – tak

wiadcz

w oczach internautów o jako

serwisu. W gruncie rzeczy tak jest - tylko dobrze wykonane strony z ciekaw

tre

mog

znale

źć

wysoko w rankingach coraz inteligentniejszych wyszukiwarek.

Warto zadba

o to by strona była skonstruowana w sposób zapewniaj

cy dobr

współprac

z wyszukiwarkami.

•

Zgodno

ść

z prawem i standardami - jednym z kluczowych elementów budowania

zaufania do serwisu jest zgodno

ść

z prawem oraz standardami. W Polsce prawo

nakazuje mi

dzy innymi,

e je

li zbierasz dane o u

ytkownikach powiniene

zarejestrowa

w GIODO, je

li prowadzisz serwis administracji publicznej powinien

on by

dost

pny dla niepełnosprawnych.

•

ytkownicy doceniaj

zgodno

ść

ze standardami poprawno

ci kodu oraz

poprawne wy

wietlanie serwisu we wszystkich przegl

darkach. Warto po

chwil

na odpowiednie testy. Poprawno

ść

kodu sprawdzi

na narz

dziem

http://validator.w3.org

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 38 - Wpadki takie jak ta Ministerstwa Transportu i Budownictwa z pewno

nie buduj

zaufania do serwisu. W wyniku bł

du ka

dy u

ytkownik Internetu mógł uzyska

dost

p do bazy

danych z newslettera. Pami

taj by tego typu dane dobrze chroni

oraz rejestrowa

w GIODO.

Jak pogodzi

multimedia i Flash z wytycznymi usability?

•

Informowa

o wielko

ci plików i czasie ładowania

•

Informowa

o post

pie w pobieraniu

•

Zawsze udost

pniaj podgl

d danego pliku multimedialnego który zach

ytkownika do pobrania odpowiedniego dekodera, wtyczki, ..

•

Staropolskie przysłowie mówi o tym,

e najbezpieczniej jest u

ywa

wtyczek i

multimediów o jedn

wersj

starszych od najnowszych.

•

Zastanów si

nad dost

pno

tworzonych multimediów.

Dost

pno

ść

klipów video dla głuchoniemych - napisy

•

ytkownicy nienawidz

poruszaj

cego si

tekstu typu „ta

moci

g”. Generalnie

uwa

e nie niesie on nigdy wa

nej tre

ci i nie czytaj

go z zasady.

•

ytkownicy nienawidz

muzyki na stronach WWW. D

ki współgraj

ce z

interfejsem s

o lepiej odbierane.

•

Nawigacja 3D nie jest popularna (ilu z Was ma prawo-jazdy a ilu licencj

pilota?).

Prawie zawsze efektywniejsze s

mechanizmy nawigacyjne oparte na 2D.

Unikaj na

ladowania

wiata rzeczywistego, nawigacja internetowa jest

przecie

wygodniejsza (np. błyskawiczne „przenoszenie si

” dzi

ki linkom).

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 39 - SearchScapes, http://searchscapes.net, trójwymiarowa mapa informacyjna Manhattanu.

Bardzo ciekawy eksperyment ale codzienna nawigacja w takim serwisie byłaby udr

Rysunek 40 - etlumacz.pl, niestety hasło o szanowaniu klienta rozmija si

z.. nawigacj

która nie pozwala na dotarcie do informacji.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

r e k l a m a

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Efektywno

ść

w eCommerce

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Usability w systemie eCommerce.

Rysunek 41 - Przykład sklepu Trpros.com pokazuje jak dodanie

dodatkowych kanałów składania zamówie

zwi

ksza sprzeda

Czynniki sukcesu eCommerce.

Rysunek 42 - Wyniki sondy Dlaczego korzystasz z danego sklepu internetowego.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Metody pomiaru efektywno

ci eCommerce. Współczynnik porzuce

koszyka.

•

Jak oblicza

współczynnik porzuce

koszyka?

•

Dlaczego u

ytkownicy porzucaj

koszyki?

35% - dodatkowe koszty zamówienia, długi okres oczekiwania

35% - proces składania zamówienia wymaga podania zbyt wielu informacji

Rysunek 43 - Amazon.com nadal przez wielu uwa

any jest za sklep wytyczaj

cy standardy usability

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Minimalizacja współczynnika porzuce

koszyka.

•

Upraszczanie procesu sprzeda

owego

•

Budowania zaufania

•

Odpowiadanie na pytania u

ytkowników

Kiedy dostawa?

Ile kosztuje dostawa?

Czy mog

to zwróci

Jak działa gwarancja?

Czy s

jakie

dodatkowe koszty?

Rysunek 44 - Proces sprzeda

owy w sklepie www.e-lady.pl

Zwi

kszamy usability katalogu produktów, koszyka i procesu

zamawiania.

Dobre przykłady

Rysunek 45 - Pakowanie ozdobne gratis

Rysunek 46 - Darmowa dostawa ju

od ..

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

•

Nale

y utworzy

dobrze widoczny dział z informacjami administracyjnymi. Powinien

od odpowiada

na wszystkie pytania u

ytkowników oraz zawiera

wszelkie

informacje wymagane przez prawo.

Rysunek 47 - Rozbudowana stopka serwisu po

cona sprawom administracyjnym

•

na doda

mechanizm marketingu wirusowego (pole

znajomemu) odnosz

cy si

bezpo

rednio do produktu (wskazanie produktu w katalogu).

•

Zwrócenie uwagi na mo

liwo

ść

błyskawicznej dostawy.

Rysunek 48 - Szybka dostawa oraz mechanizm polecania produktu

•

Dodanie kategorii cenowych. Do zrobienia zakupów zach

caj

kategorie typu „do 100

zł”, „do 300 zł”

Rysunek 49 - Specjalne kategorie - cena do ..

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

•

Automatyczne wykrywanie wcze

niej zalogowanego u

ytkownika (np. cookies).

Rysunek 50 - Standardowe logowanie do sklepu

•

liwo

ść

zło

enia zamówienia faxem lub mailem.

Rysunek 51 - Złó

zamówienie mailem lub faxem

•

Stworzenie kategorii umo

liwiaj

cych kupowanie według kryteriów lu

niejszego typu.

Rysunek 52 - kupowanie "shop by style"

•

Bardzo prosta, umieszczona w standardowym miejscu wyszukiwarka

Rysunek 53 - Prosta wyszukiwarka

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

•

Doradzanie w zakupach – mo

liwo

ść

konsultacji podczas zakupów przez

telefon/skype/gg oraz mo

liwo

ść

zło

enia zamówienia tekstowego na wst

pne

wyszukanie produktów.

Rysunek 54 - Personal shopping - doradca klienta

•

Opinie, referencje klientów zadowolonych z zakupów znakomicie zwi

kszaj

efektywno

ść

budowania zaufania do serwisu.

Rysunek 55 - Pozytywne opinie klientów

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

•

Wszystkie elementy produktowe, tak

e bannery (w tym bannery na serwisach

zewn

trznych) powinny posiada

ceny. U

ytkownik jest zbyt leniwy aby klika

tylko

po to by sprawdzi

cen

Rysunek 56 - Ka

dy element produktowy wy

wietlany wraz z cen

•

Dodanie przechowalni produktów lub funkcjonalno

ci typu ”lista do porównania”

pozwoli swobodnie porusza

po sklepie ułatwiaj

c finalny wybór pomi

dzy

kilkoma wybranymi produktami.

•

Gwarancja zwrotu oraz informacje dotycz

ce warunków zamówienia umieszczone w

pierwszym kroku koszyka zach

caj

do kontynuowania zakupów.

Rysunek 57 - Gwarancja zwrotu w 1 kroku koszyka

•

Dodanie mo

liwo

ci wystawiania ocen i recenzji produktów mo

e znacz

co podnie

ść

poziom zaufania do całego sklepu oraz zach

niezdecydowanych do zakupu.

Istnieje wtedy mo

liwo

ść

utworzenia kategorii „Najlepiej ocenione”

Rysunek 58 - Komentarze do produktów

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

•

Gdzie jest moja paczka? Korzystaj

c z firm kurierskich mamy mo

liwo

ść

pobierania

od nich zwrotnych informacji dotycz

cych tego gdzie znajduje si

przesyłka.

Informacje takie mogliby

my wy

wietla

ytkownikowi po zalogowaniu. Byłby to

wyró

nik serwisu (jeszcze wiele sklepów nie korzysta z tej opcji) buduj

cy zaufanie

oraz zach

caj

cy do logowania si

w sklepie.

Jak zarabia

gdy towar jest niedost

pny?

•

Informuj z wyprzedzeniem,

e towar jest niedost

pny – przede wszystkim nie dopu

ść

do tego by klient dodał do koszyka produkt, którego nie b

dzie mógł kupi

. To bardzo

zniech

ca do kupowania w takim sklepie.

•

li produkt b

dzie dost

pny w pó

niejszym terminie, przyjmuj zamówienia z

wyprzedzeniem – informuj kiedy produkt b

dzie dost

pny.

•

Oferuj mo

liwo

ść

informowania e-mailem o pojawieniu si

towaru.

•

Informuj o podobnych produktach, które s

dost

pne.

•

li dostawa do klienta b

dzie wysłana dopiero za dłu

szy czas mo

esz mu od razu

wysła

kartk

pocztow

z podzi

kowaniem za zło

one zamówienie oraz informacj

e niebawem je otrzyma – klient b

dzie spokojniejszy.

Budujemy zaufanie u

ytkowników do sklepu.

•

Odpowiednia domena

Z WWW. i bez WWW.

Wielu u

ytkowników zgaduje adres

•

Profesjonalna grafika bez w

tpienia buduje zaufanie do serwisu.

•

Zbieranie danych:

Zgodno

ść

z prawem

Klarowne okre

lenie do jakich celów potrzebujemy danych

Rysunek 59 - Nie ka

dy sklep oferuje podstawowe metody

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Symulacja wpływu usability na zyski sklepu internetowego.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Efektywno

ść

reklamy internetowej

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Reklama, która nie irytuje

Reklamy w Internecie to temat nadal kontrowersyjny. Przyj

ło si

uwa

e u

ytkownicy

nie lubi

reklam. Szczególnie irytuj

ich wszelkie nachalne formy reklamy.

Pierwszy bannerek reklamowy pojawił si

na HotWired w 1994. Bannerek ten

reklamował usługi AT&T. Nie prezentował si

raczej zbyt okazale.

Archiwum bannerów znajdziesz na

http://adverlicio.us

Przy tworzeniu reklam nale

y zada

sobie pytanie: czego u

ytkownicy szukaj

na mojej

stronie WWW? Je

li oka

e si

e Twoje reklamy mog

cho

ęś

ciowo by

tym czego

szukaj

ytkownicy – masz du

żą

szans

na osi

gni

cie dobrej efektywno

ci. Tym tropem

pod

ąż

a wła

nie trend w reklamie internetowej, zwany reklam

kontekstow

. Reklama

kontekstowa dopasowuje si

w pewnym stopniu do zainteresowa

ytkownika.

Dopasowanie to mo

e przebiega

na przykład na podstawie tego co u

ytkownik wpisuje do

wyszukiwarki lub na podstawie tre

ci stron na które wchodzi. Oczywi

cie powinno to

pozytywnie wpłyn

ąć

na zainteresowanie u

ytkownika reklam

. Takie działanie doskonale

obrazuje system AdSense (wy

wietlanie reklam na podstawie tre

ci strony na której jest

ytkownik) oraz AdWord (wy

wietlanie reklam na podstawie zapyta

do wyszukiwarki). W

serwisach eCommerce mo

na doszukiwa

podobnej filozofii w funkcjach wy

wietlaj

cych

produkty komplementarne i substytucyjne w karcie produktu. W kilku sklepach widziałem te

reklamy w postaci bannerków, które odpowiadaj

grupie produktów któr

wła

nie ogl

ytkownik. Zasada działania jest prosta: je

li u

ytkownik zauwa

e reklamy pomagaj

mu odnale

źć

to czego szuka, zacznie si

im baczniej przygl

i ch

tniej w nie klika

Problem pojawia si

tam gdzie nie mo

emy liczy

na naturalne zainteresowanie

ytkowników a d

ąż

ymy do maksymalizacji klikni

ęć

w banner.

cej czy mniej?

Ile informacji powinno znale

źć

na bannerze? Tak, to pytanie nie jest banalne.

Pomijaj

c oczywiste zasady przejrzystego projektowania, zastanówmy si

co mo

e wpłyn

ąć

na zwi

kszenie efektywno

ci bannerków.

li sprzedajesz produkty to prost

i sprawdzon

metod

na zwi

kszenie klikalno

ci jest

umieszczanie na bannerze nie jednego a 2-3 produktów. Obserwacje wskazuj

zwi

kszenie ilo

ci produktów na bannerze z 1 do 3 mo

e prowadzi

do wzrostu klikalno

ci –

czasem wr

cz ponad-proporcjonalnego. By

e wynika to z faktu,

e u

ytkownicy lubi

mie

wybór i ch

tniej klikaj

w banner sugeruj

cy wi

ksz

ilo

ść

produktów.

Przeprowadzili

my sporo testów form reklamowych i zazwyczaj optymalnym wyborem jest

zaprojektowanie bannerka, który zawiera: zdj

cie produktu i cen

oraz je

li to mo

liwe

informacje o promocji.

Id

c tropem wychodzenia do u

ytkownika mo

esz spróbowa

zastosowa

strategi

„pomo

emy ci”. Strategia ta mo

e sprawdzi

tam gdzie Twoja reklama b

dzie tylko

jednym z wielu przekazów reklamowych adresowanych do u

ytkownika. Wykorzystali

my to

podej

cie z sukcesem podczas kampanii Janmedia Interactive na Google. Po wpisaniu

„agencja interaktywna” prezentowane s

ytkownikowi wyniki wyszukiwania oraz cała seria

płatnych reklam typu AdWord. Wi

kszo

ść

wyników (zarówno płatnych jak i organicznych)

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

zaczyna si

od słów „agencja interaktywna”. Z pewno

kszo

ść

ytkowników czuje si

przytłoczonych ilo

informacji. W wielu głowach pojawia si

pewnie pytanie „co wybra

, w

co klikn

ąć

”. Nasz boks reklamowy zatytułowali

my zatem „jak wybra

agencj

interaktywn

”.

Boks prowadzi na stron

opisuj

najwa

niejsze cechy agencji interaktywnej na które

powinien zwróci

uwag

klient. Efektywno

ść

boksa reklamowego wzrosła dwukrotnie po

przeprowadzeniu tej zmiany. Po pewnym czasie u

ytkownicy przyzwyczaili si

do naszego

boksa i jego efektywno

ść

nieco spadła.

Powtórzenie tego rozwi

zanie nie zawsze jest mo

liwe. Trzeba pami

e tego typu

reklama nie sugeruje bezpo

redniego rozwi

zania problemu. Sprawdzi si

zatem dobrze tam

gdzie sam wybór jest procesem skomplikowanym.

Przykład

Przygotowali

my dla jednego z naszych klientów – sklepu e-Lady.pl, komplet bannerków.

Bannerki były prezentowane na pasaz.onet.pl w kategorii bielizna. Nast

pnie porównali

efektywno

ść

poszczególnych bannerków.

Wykorzystali

my dobrze zauwa

alne bannerki typu JUMBO (w

rodku strony).

Bannerek, który osi

ł najwy

klikalno

ść

(12,74%), opiera si

na zasadzie: produkt +

cena. Nie jest te

tajemnic

e ludzie ch

tniej i cz

ęś

ciej klikaj

w bannerki z tanimi

produktami. Je

li, tak jak w tym wypadku, mo

emy uzupełni

najta

szy produkt kilkoma

komplementarnymi to przyci

ganie u

ytkowników najta

szym produktem mo

e okaza

opłacalne (

rednia warto

ść

koszyka w sklepie e-lady.pl to blisko 250 zł).

Mniejsz

kilkalno

ść

(8,36%, 6,03%) osi

ły bannerki prezentuj

ce produkty bez ceny:

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Bannerki, które wyró

niały si

prost

grafik

ale mówiły o ogólnych zaletach sklepu okazały

najmniej efektywne (2%, 1%):

Oczywi

cie z tego eksperymentu nie nale

y wyci

zbyt daleko id

cych wniosków. Nie

nale

y uogólnia

jego wyników. Nale

y natomiast zda

sobie spraw

z tego jakie s

oczekiwania u

ytkowników. Na pasaz.onet.pl przychodz

osoby chc

ce kupi

produkt,

zaprezentowanie im produktu wraz z cen

jest zatem tym czego szukaj

. Nawet

zastosowanie bardzo wyró

niaj

cych si

form reklamowych (ostatnie bannerki) nie było w

stanie zwi

kszy

ich klikalno

ci.

Ten krótki przykład pokazuje te

e nale

y nieustannie sprawdza

efektywno

ść

swoich form

reklamowych, nie ba

eksperymentowania i wyci

wnioski. W eksperymentowaniu

pomocny mo

e okaza

program w stylu Google AdWord – mo

emy tam tworzy

ró

nego

rodzaju boksy reklamowe i bada

ich skuteczno

ść

. Mamy do dyspozycji tylko tekst ale

przynajmniej mo

emy przekona

o sile przekonywania tekstów reklamowych jakie mamy

zamiar u

w kampanii. Przy du

ych kampaniach takie prototypowanie na Google AdWord

e zwi

kszy

efektywno

ść

bannerków.

Nale

y te

pami

e zdarzaj

formy reklamowe tak kreatywne,

e łami

c wszystkie

zasady s

jednocze

nie bardzo efektywne. Moim celem jest jednak przedstawienie pewnych

zasad, które sprawdzaj

w wi

kszo

ci kampanii.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 60 - Stary trick polega na tym,

e zdj

cia osób patrz

cych wprost na nas zawsze zwracaj

nasz

uwag

. Warto spróbowa

we własnych kreacjach.

Banner blindness i inne plagi

Banner blindness jest udr

wszystkich tych, którzy swoje zyski opieraj

przede wszystkim

na tradycyjnych formach reklamy. Zjawisko to polega na pod

wiadomym filtrowaniu przez

ytkowników wszystkich przekazów zbli

onych rozmiarem i zachowaniem do reklam.

Paradoksalnie im bardziej krzykliwy i ruchomy jest element graficzny, tym wi

ksza szansa,

e nie zostanie w ogóle

wiadomie zarejestrowany. Termin został u

yty po raz pierwszy w

roku 1998 w pracy Banner Blindness: Web Searchers Often Miss Obvious Links.

Dzi

banner blindness jest niejako wspomagany przez dziesi

tki programów typu Ad

Blocking. Programy te usuwaj

z ogl

danych przez u

ytkownika stron, elementy reklamowe

– głównie dla szybszego ładowania si

stron oraz ułatwienia pracy poprzez eliminacj

uci

ąż

liwych reklam zasłaniaj

cych ekran. Zdarza si

e zanim serwer reklam dostarczy

banner do ogl

danego serwisu, u

ytkownik opu

ci stron

i przejdzie dalej – u

ytkownicy

coraz szybciej poruszaj

po serwisach WWW i coraz mniej czasu sp

dzaj

pojedynczej stronie.

Jakby tego było mało podczas obserwacji u

ytkowników mo

na zauwa

jak niektóre osoby

radz

sobie z wyskakuj

cymi bannerkami – nie usiłuj

nawet szuka

„X” aby zamkn

ąć

reklam

tylko od razu w ni

klikaj

i zanim jeszcze zd

ąż

y załadowa

strona, zamykaj

nowo otwarte okno przegl

darki. Wiele osób czyni podobnie, kiedy nie mog

trafi

w „X”

zamykaj

cy banner. System bannerkowy zlicza zatem klikni

cie ale u

ytkownik nawet nie

jest w stanie odpowiedzie

na pytanie „w jak

reklam

klikn

łe

”. Jaka jest skala takich

fałszywych klikni

ęć

? Trudno powiedzie

, nasze obserwacje u

ytkowników maj

charakter

jako

ciowy. Niemniej wydaje si

to kolejnym problemem zmniejszaj

cym efektywno

ść

bannerków.

W swoim ostatnim badaniu eye-tracking o ilo

ciowym charakterze Jakob Nielsen wykazał,

•

reklamy bannerowe s

omijane wzrokiem przez przytłaczaj

kszo

ść

ytkowników,

•

grup

która nie jest

lepa na bannery s

dzieci do siódmego roku

ycia, które klikaj

na elementy wyró

niaj

ce si

ilo

kolorów i animacjami.

•

obrazki umieszczane w

rodku tekstu s

sto traktowane jako przeszkody i

omijane, wyj

tkiem s

grafiki

le zwi

zane z tekstem,

•

grafiki rozmyte, małe, nieczytelne s

automatycznie pomijane,

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

•

o wi

ksz

uwag

badanych zwracały grafiki zawieraj

ce jaki

informacje, ni

maj

ce jedynie walory estetyczne,

•

badani cz

sto patrzyli na fotografie, na których fotografowany patrzył prostu w

obiektyw,

•

animacje przyci

gaj

uwag

tylko wtedy, gdy s

nieskomplikowane oraz maj

zwi

zek z tekstem.

Nielsen podaje te

przykład strony jednego z producentów komputerów. Umie

cił on w

ramce na

rodku swojej strony informacje o najnowszym produkcie. Była ona omijana

wzrokiem przez u

ytkowników, bo prawdopodobnie została potraktowana jako reklama.

Spotykali

my podobne zachowania podczas testów z u

ytkownikami. W jednym z

testowanych serwisów z bran

y finansowej cz

ęść

menu kontekstowego, wyró

nionego

silnym kolorem została potraktowana przez u

ytkowników jako reklama. Mimo tego i

to zawierało poszukiwane przez nich informacje nawet nie wczytali si

w jego tre

ść

Ostatnie doniesienia na temat banner blindness zaczynaj

dotyczy

tak

e kontekstowy

reklam tekstowych. W pocz

tkowym okresie ich stosowania wykazywały si

o wy

efektywno

bannery, nadal s

efektywniejsze ale zauwa

a si

e u

ytkownicy tak

te formy zaczynaj

pod

wiadomie filtrowa

Czy z banner blindness da si

walczy

? Tak, je

li projektujesz formaty autopromocyjne dla

swojego serwisu WWW lub sklepu internetowego to postaraj si

by miały unikalne formy –

wtedy mniej osób automatycznie je pominie. Mo

esz eksperymentowa

tak

e z reklam

video czy interaktywnymi bannerami reklamowy – takimi jak np. przewijarka reklam –
u

ytkownik mo

e sterowa

pojawianiem si

kolejnych reklam.

Landing pages

Jako,

e coraz trudniej zmusi

ytkowników do klikni

cia, coraz wi

cej osób zastanawia si

co dzieje si

po kliku.

Stara zasada mówi,

e odno

niki reklamowe powinny prowadzi

na konkretne pod-strony

serwisu. A

20-30% u

ytkowników wciska Wstecz gdy po klikni

ciu bannerka dostaj

stron

główn

. Nie powinno Ci

zatem dziwi

e coraz cz

ęś

ciej tworzy si

specjalne „landing

pages” czyli strony stworzone z my

o konkretnej kampanii.

Oczywi

cie najwa

niejszy jest cel kampanii i to jemu w pełni podporz

dkowa

nale

y landing

page. Celem mo

e by

np. uczestnictwo w konkursie, prenumerata newsletter czy kupno

produktu. Skoro podporz

dkowujemy landing page celowi kampanii to mo

emy wr

zaprojektowa

dedykowan

dla landing page nawigacj

. Powinna ona by

naprawd

prosta

– nie powinna tworzy

zbyt wielu mo

liwo

ci, powinna kierowa

ytkowników tam gdzie

chcemy by poszli.

Jako,

e klikaj

c w banner u

ytkownik spodziewa si

kontynuowania akcji to strona

docelowa powinna by

utrzymana w podobnej kolorystyce a jej zawarto

ść

powinna

odpowiada

komunikatowi z reklamy. Ka

dy dodatkowy komunikat stwarza ryzyko i

ytkownik nie poczuje,

e strona na któr

trafił kontynuuje proces.

Ide

landing page powinno by

„call to action” – ju

na pierwszej stronie daj do zrozumienia,

e mo

na błyskawicznie zrealizowa

cel. Je

li wymaga

to b

dzie od u

ytkownika

kszego wysiłku (np. wypełnienie formularza zakładania konta) informuj ile czasu zajmie to

ytkownikowi i ile kroków musi wykona

. Mo

na tutaj stosowa

wszystkie taktyki

zapobiegaj

ce porzuceniu koszyka w sklepie internetowym.

Klasyczne sposoby na ulepszenie landing page to:

•

prezenty, czy mo

esz da

ytkownikowi?

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

•

ywanie „P.S.” czyli mniej formalnego komunikatu pod głównym komunikatem,

dy czyta „P.S.” – warto to wykorzysta

li tylko mo

esz,

•

gwarancje oraz ka

dy inny element szybko buduj

cy zaufanie, utrata zaufania mo

spowolni

lub przerwa

proces,

•

call to action – hasło sugeruj

ce nast

pny krok,

•

li mo

esz to personalizuje stron

(np. gdy przej

cie nast

puje z bannerka w

newsletterze mo

esz zwróci

do u

ytkownika po imieniu)

I jeszcze dwie ostatnie rady dotycz

ce landing pages:

•

te strony bezwzgl

dnie musz

szybko ładowa

•

powinny by

wył

czone ze struktury serwisu i nie powinny by

indeksowane przez

wyszukiwarki

Wypalanie si

bannera

Przy planowaniu wi

kszych kampanii pami

taj,

e wraz z trwaniem kampanii efektywno

ść

formy reklamowej b

dzie spada

. Zjawisko to, nazywane „wypaleniem si

bannera” mo

łatwo eliminowa

poprzez przygotowanie kilku bannerków na u

ytek dłu

szych kampanii.

Reklama z zewn

trz

ostro

ny gdy sprzedajesz w swoim serwisie reklam

zewn

trzn

instalujesz

skrypt zewn

trzny wy

wietlaj

cy reklamy. W przypadku wi

kszych sieci reklamowych mo

ustali

jakiego typu reklam nie chcesz na swojej stronie, niemniej nadal powiniene

zachowa

czujno

ść

by nie dopu

do sytuacji niekorzystnych dla Twojego serwisu (reklama

konkurencji, obni

anie wiarygodno

ci serwisu).

Rysunek 61 - Umieszczenie bloga powa

nej, publicznej postaci na darmowym systemie blogowym

e doprowadzi

do bardzo zabawnych zestawie

tre

ci reklamy z tre

serwisu. Prawdopodobnie

efektywno

ść

reklamy wzrasta, natomiast wiarygodno

ść

takiego serwisu niestety zmniejsza si

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 62 - Ten sam blog chwil

pó

niej :)

Rysunek 63 - Ilo

ść

reklam w obr

bie jednej witryny mo

e prowadzi

do komicznych powi

- "

Nowe, pyszne Pedigree, Wybierz smak swojego

ycia" :)

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Co jeszcze?

Nie poprzestawaj na reklamie bannerkowej. Je

li to mo

liwe, korzystaj jak najmocniej z SEO

oraz SEM. Pami

taj,

e wyszukiwarki to jedno z niewielu miejsc gdzie u

ytkownicy

przychodz

po to by jak najszybciej z nich wyj

ść

– wystarczy,

e dasz im to czego

szukaj

. Jako,

e wyszukiwarki odwracaj

sytuacj

– to u

ytkownik szuka Ciebie,

istnieje o wiele wi

ksza szansa,

e taki u

ytkownik stanie si

Twoim klientem.

Bannerki reklamowe w poł

czeniu z SEO i SEM s

dla wi

kszo

ci serwisów podstawowymi

narz

dziami generowania ruchu w serwisie.

rodek ci

ęż

ci z pewno

przesuwa si

powoli w stron

SEO i SEM. Niemniej jak wskazuje praktyka inteligentne projektowanie -

oparte na ustawicznym badaniu, pozwala tworzy

efektywne reklamy internetowe.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Dost

pno

ść

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Kto i kiedy dyskryminuje klientów?

Grupy u

ytkowników oczekuj

ce pomocy

•

Starsi

•

Niewidomi

•

Niedowidz

•

Daltoni

•

ytkownicy platform mobilnych

•

Mniej popularne przegl

darki

Wysoka dost

pno

ść

serwisu pozwala tak

•

dotrze

do wi

kszej ilo

ci u

ytkowników

•

dotrze

do wymagaj

cych u

ytkowników, u

ywaj

cych najnowocze

niejszych

platform mobilnych

•

uzyska

lepsze pozycje w wyszukiwarkach

(poruszaj

one po stronach podobnie jak niewidomi)

•

budowa

pozytywny wizerunek i presti

firmy

Dost

pno

ść

jako inicjatywa

•

WAI – Web Accessibility Initiative

•

Dyrektywa Unii Europejskiej eEurope 2002

•

Ustawa o Dost

pie do Informacji Publicznej

•

Wymagania Section 508 w USA

Podstawy prawne

Dost

pno

ść

serwisów jest wymagana przez prawo Polski oraz UE.

•

Wszystkie jednostki organizacyjne pa

stw UE s

zobowi

zane na mocy dyrektywy

eEurope 2002 zapewni

dost

p do swoich serwisów bez dyskryminowania

ytkowników.

•

Podobne zapisy zawiera inny europejski dokument - i2010 - Europejskie

społecze

stwo informacyjne na rzecz wzrostu i zatrudnienia.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

•

Obowi

zuj

ca w Polsce Ustawa o Dost

pie do Informacji Publicznej zawiera zapis o

dost

pno

ci informacji.

•

Dost

pno

ść

serwisów WWW dla wszystkich gwarantuje tak

e Konstytucja RP i Karta

Praw Osób Niepełnosprawnych.

Artykuły omawiaj

ce kwestie prawne znajdziesz w serwisie ISOC Polska

•

http://www.isoc.org.pl/wiki/index.php/Prawo%20Standardy

•

http://www.isoc.org.pl/wiki/index.php/WebAccessibility

•

http://www.isoc.org.pl/wiki/index.php/WebAccessibility/DlaPolski

Dost

pno

ść

dla stron administracji publicznej

•

Minimalne wymagania dla systemów teleinformatycznych administracji publicznej

zawiera rozporz

dzenie RM z 11 pa

dziernika 2005 roku. Tekst do przeczytania na

stronie

http://prawo.vagla.pl/node/5750

•

W Polsce zespół pod przewodnictwem Michała Bukowskiego

http://galeria.bukwa.com/imprezy/2006_02_18_uzyteczne_spotkanie/

opracowuje

nowe zało

enia dla stron administracji publicznej w Internecie:

http://meta.bip.gov.pl/

Główne zasady

•

Korzystaj z HTML tylko jako zapisu tre

ci.

•

Korzystaj z CSS do formatowania tre

ci.

•

Stosuj parametry ALT, TITLE

Rysunek 64 - Mój serwis

www.webusability.pl

w wersji graficznej

pozwala na powi

kszanie czcionek.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 65 - Tak wygl

da strona webusability.pl w trybie tekstowym w Opera

Rysunek 66 - Tak natomiast serwis wygl

da w tekstowej przegl

darce Lynx

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 67 - Serwis Koncernu Energetycznego ENERGA jest dost

pny dla niepełnosprawnych,

Koncern ten fakt postrzega tak

e jako element budowania presti

u firmy.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Jak z serwisu korzystaj

osoby niewidome?

esz zobaczy

jak z komputera korzystaj

osoby niewidome dzi

ki filmom:

•

Film BBC:

http://www.uwec.edu/webdev/access/access100.asx

•

Film opracowany przez Janmedia i Koncern Energetyczny ENERGA:

http://video.google.pl/videoplay?docid=1390144116562195983&q=dostepnosc

Rysunek 68 - Film przedstawia w jaki sposób z Sieci korzystaj

osoby niewidome.

Poznajemy oprogramowanie typu screen-reader dla u

ytkowników

niewidomych.

Najbardziej popularnym oprogramowaniem ud

kawiaj

cym jest JAWS. Mo

esz pobra

demo programu z

http://www.freedomscientific.com/fs_downloads/jaws.asp

Demo innej aplikacji ud

kawiaj

cej - IBM Home Page Reader mo

na pobra

ze stron

http://www-3.ibm.com/able/dwnlds/index.html

Przykład

1. Uruchom program IBM Homepage Reader
2. Wpisz adres serwisu
3. Nawiguj za pomoc

strzałek (przesuwanie po dokumencie) i spacji (wej

cie w link)

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 69 - W dolnym okienku widok tekstowy strony.

Na jego podstawie program ud

kawia serwis.

Przykład

1. Uruchom program JAWS
2. Uruchom przegl

dark

internetow

Rysunek 70 - JAWS ud

kawia wszystkie aplikacje systemu Windows

3. Program JAWS w odró

nieniu od IBM Homepage Reader ud

kawia cały system

operacyjny.

4. Mo

esz zainstalowa

polski syntezator mowy i ustawi

program JAWS tak aby czytał

po polsku (Language -> Change Synthesier).

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 71 - Instaluj

c polski syntezator mowy mo

na sprawi

by Jaws przemówił po polsku.

Kontrowersje wokół niektórych rozwi

Na rynku istniej

firmy tworz

ce oprogramowanie, które umo

liwia ud

kawianie serwisu

dopiero gdy u

ytkownik pobierze specjalny program. Dost

pno

ść

polega

powinna na

tworzeniu dost

pnych stron nie za

lokalnych standardów.

adna zewn

trzna aplikacja nie

sprawi,

e twój serwis b

dzie dost

pny dla osób u

ywaj

cych swoich sprawdzonych

screenreaderów.

Uwa

am,

e tego typu podej

cie mija si

z celem gdy

ytkownicy niewidomi maj

swoje oprogramowanie i nie b

chcie

uczy

nowego ani tym bardziej instalowa

programu specjalnie po to by czyta

kilka stron.

Oprogramowanie typu JAWS czy WindowsEYES jest rozwijane od lat i jest
standardem.

Takie działanie jest sprzeczne z wytycznymi W3C oraz dyrektyw

eEurope - serwis

nadal nie jest dost

pny. Tworzony jest po prostu dodatkowy kanał dystrybucji

informacji, kod serwisu nadal nie musi by

zgodny z wytycznymi.

Dost

pno

ść

jest tutaj rozumiana bardzo w

sko. Serwis nadal dyskryminuje

ytkowników sprz

tu i systemów w których nie działa program IWR. Z tego co mi

wiadomo nie ma wersji programu na takie platformy jak Linux, MAC OS, Pocet PC,
Palm czy inne urz

dzenia mobilne.

Osoby niewidome posługuj

oprogramowaniem ud

kawiaj

cym, które mimo wysokiej

ceny jest tym osobom refundowane. Nie ma zatem potrzeby zmusza

ytkowników tych do

instalacji dodatkowego oprogramowania.

Głównym

ródłem dofinansowania dla osób niewidomych jest realizowany co roku program

„Komputer dla Homera”. Zawiera on cztery kategorie dofinansowania:

sprz

t podstawowy,

sprz

t specjalistyczny i oprogramowanie,

sprz

t brajlowski,

sprz

t lektorski.

Zazwyczaj dofinansowanie pokrywa od 95 do 97% kosztów.
Istniej

programy dofinansowania organizowane przez Powiatowe Centra Pomocy

Rodzinie oraz programy przeznaczone dla studentów. Wi

cej informacji o programach

dofinansowania zakupu sprz

tu i oprogramowania mo

na przeczyta

na stronach

stwowego Funduszu Rehabilitacji Osób Niepełnosprawnych (http://www.pfron.org.pl)

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Testujemy dost

pno

ść

serwisu dla niepełnosprawnych

Automatyczne testy dost

pno

ci serwisu przeprowadzi

esz za pomoc

narz

dzia

http://www.contentquality.com

Przykład

1. Wejd

na serwis

http://www.contentquality.com

2. Wypełnij formularz, podaj

c adres serwisu do przetestowania.

Wybierz podstawowy stopie

dost

pno

ci (WCAG – Priority 1, inaczej pisz

c WAI-A)

Rysunek 72 - Podaj stron

, która ma zosta

przetestowana i dowiedz si

czy jest dost

pna.

3. Otrzymasz raport z wynikami testu. Walidator wyszczególni elementy, które nie s

zgodne z wymaganiami WCAG.

Rysunek 73 – Niestety serwis webusability.pl te

ma jeszcze drobne problemy z dost

pno

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Testujemy serwis WWW na ró

nych platformach

Symulator przegl

darki WWW telefonu komórkowego – Openwave, pobra

na z

adresu:

http://developer.openwave.com/dvl/tools_and_sdk/

Przykład

1. Uruchom program Openwave
2. Wpisz adres serwisu i nawiguj po nim sprawdzaj

c czy zachowuje si

poprawnie.

Rysunek 74 - Symulator Openwave.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Pod adresem

http://www.opera.com/products/mobile/operamini/demo.dml

znajdziesz

symulator przegl

darki Opera Mini, która jest cz

sto stosowana w urz

dzeniach

mobilnych.

Przykład

1. Otwórz adres

http://www.opera.com/products/mobile/operamini/demo.dml

2. Wpisz adres serwisu i nawiguj po nim sprawdzaj

c czy zachowuje si

poprawnie.

Rysunek 75 - Symulator przegl

darki OperaMini dost

pny z poziomu WWW

esz wykorzysta

symulatory dostarczane przez Noki

Nokia Mobile Internet Toolkit 4.1

http://www.forum.nokia.com/main/0,,034-13,00.html

oraz Series 60 Content Authoring SDK 2.0 for Symbian OS

http://www.forum.nokia.com/main/0,,034-461,00.html

Do testowania stron tworzonych na WAP mo

na u

ywa

WinWAP Smartphone Browser

Emulator

http://www.winwap.com/products_2_3.php

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Przykład

1. Uruchom przegl

dark

Opera (do pobrania z

http://www.opera.com/

)

2. Wpisz adres serwisu
3. U

yj opcji View-Style-User mode, a nast

pnie View-Style-Emulate text brower aby

zobaczy

jak serwis wygl

da w wersji tekstowej

Do przegl

dania stron WWW na emulacji tekstowej mo

na wykorzysta

wtyczk

Firefoxa - RightLynx Lynx Preview Tool. Wtyczk

na pobra

z adresu:

http://www.yellowpipe.com/yis/tools/lynx/rightlynx/

Zdradliwa Captcha

Captcha (Completely Automated Public Turing Test to Tell Computers and Humans Apart) -
rodzaj techniki stosowanej jako zabezpieczenie w formularzach na stronach WWW. Dla
przesłania danych konieczne jest przepisanie podanego na obrazku tekstu (zazwyczaj
losowo dobranych znaków, b

krótkiego wyrazu). Obrazek ten jest (teoretycznie) prosty do

przeczytania przez człowieka, jednak

e odczytanie go poprzez komputer jest, przynajmniej

w zało

eniu, bardzo trudne.

Technika ta chroni:

portale, przed zakładaniem kont przez automaty,

fora dyskusyjne i blogi, przed spamem,

Rysunek 76 - Captcha ma uniemo

liwi

wypełnianie formularzy przez programy spammerów.

Niestety techniki Captcha cz

sto utrudniaj

a nawet uniemo

liwiaj

odczytanie tre

obrazka tak

e ludziom. Szczególnie niebezpieczne jest stosowanie Captcha, które

prezentuj

g przypadkowych znaków. Wiele osób podkre

la,

e filozofia Captcha jest

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

bł

dna - w ko

cu to wła

ciciel serwisu ma problem ze SPAMEM, nie jego u

ytkownicy.

Dlaczego zatem to oni maj

cierpie

z tego powodu?

W przypadku u

ytkowników niewidomych Captcha potrafi całkowicie uniemo

liwi

korzystanie z serwisu. Musz

zawoła

osob

widz

ca by ta przeczytała im tre

ść

obrazka!

Problem ten mogłoby rozwi

uzupełnienie Captcha graficznego Captcha głosowym (s

pierwsze serwisy, które stosuj

takie rozwi

zania).

Z punktu widzenia dost

pno

ci lepiej zamiast Captcha zastosowa

testy i pytania na

zasadzie "Ile to jest 5 doda

6?" Nadal jest to jednak przerzucanie na u

ytkowników pracy

jak

powinien wykona

wła

ciciel serwisu. Obecnie istnieje sporo dobrych filtrów

antyspamowych (na ró

nych poziomach). Zdecydowanie lepiej korzysta

z nich.

Kanały RSS jako nowy

rodek komunikacji.

•

Kanał RSS jako pod-standard XML

•

RSS zapewnia szybk

dystrybucj

informacji

Rysunek 77 - Aplikacja RSS infoinfo firmy NetPR pozwala na efektywne

zarz

dzanie du

żą

ilo

kanałów RSS oraz archiwizacj

wybranych wpisów.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Badanie usability

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Dlaczego nale

y bada

i testowa

•

Projektant nie jest w stanie spojrze

na witryn

jak jej u

ytkownik.

•

Im cz

ęś

ciej testujesz tym mniejsze koszty, szybciej wykrywasz problemy

ytkowników.

•

Konieczno

ść

zatrudnienia reprezentatywnej grupy u

ytkowników nie jest tak istotna

jak mogłoby si

wydawa

. Wi

kszo

ść

osób w ten sam sposób postrzega serwisy

WWW i ma podobne problemy.

Testy u

yteczno

ci a testy grupowe

Testy grupowe

Testy u

yteczno

Niewielka grupa osób

Pojedynczy u

ytkownik

Uczestnicy

reaguj

koncepcje

projekty, które im si

przedstawia

Prosi si

ytkownika o okre

lenie co

to jest, do czego słu

y lub aby u

ył

danej rzeczy

Dobre do szybkiego uzyskania próbek
opinii i odczu

ytkowników. Nadaj

do sprawdzenia oczekiwa

odbiorców,

okre

lenia ich potrzeb. Pozwalaj

oceni

pomysł na bazie, którego powsta

witryna. Mo

na sprawdzi

wykorzystywane w witrynie słownictwo.

Sprawdzenie czy witryna funkcjonuje
poprawnie i okre

lenie na jakie

problemy napotyka u

ytkownik.

Wykonywane na pocz

tku procesu

tworzenia serwisu.

Wykonywane na ko

cu procesu

tworzenia serwisu.

Ocena heurystyczna

W tej metodzie ekspert lub grupa ekspertów ocenia zgodno

ść

poszczególnych elementów

serwisu z wytycznymi usability. Ka

dy znaleziony problem jest priorytetowany (zazwyczaj 3

poziomy) a nast

pnie opisywany (najcz

ęś

ciej z sugesti

jak go rozwi

Zalecane jest u

ycie przynajmniej 2 ekspertów (analityków). Wyniki ich pracy zostaj

scalone

do jednego raportu.

Lista kontrolna

Sprawdzamy w jakim stopniu serwis jest zgodny ze zdefiniowanymi wcze

niej wymaganiami

dotycz

cymi u

yteczno

ci. Dla zapewnienia obiektywno

ci oceny korzysta si

z listy

kontrolnej w postaci formularza oceny.

Lista kontrolna zawiera zazwyczaj kilkadziesi

t pyta

podzielonych na kilka sekcji,

odpowiadaj

cych poszczególnym wymaganiom.

ycie list kontrolnych pozwala na podanie liczbowych wyników badania, co za tym idzie

umo

liwia porównywanie podobnych systemów b

ledzenie rozwoju jednego systemu.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Badania eye-tracking

Eye-tracker - urz

dzenie badaj

ce ruch gałek ocznych u

ytkownika

W przypadku stron internetowych badanie eye-tracking pozwala na poznanie, które elementy
serwisu, w jakiej kolejno

ci i jak długo s

rejestrowane przez u

ytkownika. Zestawiaj

c dane

uzyskane z pomiaru eye-tracking z układem serwisu mo

na zyska

odpowiedzi na ró

pytania. Które elementy serwisu przyci

gaj

uwag

? Czy elementy reklamowe s

zauwa

ane? Czy elementy nawigacyjne s

dobrze rozmieszczone? Co utrudnia korzystanie

z serwisu? Znajomo

ść

takich informacji pozwala wykry

mocne i słabe strony serwisu,

zwłaszcza w poł

czeniu z szerszymi badaniami z udziałem u

ytkowników. Powinno to

przekłada

wprost na mo

liwo

ci tworzenia lepszych, bardziej ergonomicznych stron, a to

z kolei zapewnia

wzrost zadowolenia u

ytkowników i wi

ksz

efektywno

ść

samego serwisu.

Rzadko kiedy jednak jest to łatwe, dlatego badania eye-tracking stosowane s

jako

uzupełnienie pozostałych technik oceny u

yteczno

ci stron, nie za

ich zast

pstwo. Inne

metody, zwłaszcza oceny eksperckie i laboratoryjne testy z u

ytkownikami, s

sprawdzonymi

technikami, na podstawie których wyró

nia si

problemy zwi

zane z u

yteczno

i ergonomi

badanego serwisu.

Na bazie badania przygotowywane s

zazwyczaj nagrania wideo przedstawiaj

ce ekran,

klikni

cia, fiksacje (skupienia wzroku) i sakkady (skoki wzroku) u

ytkowników – materiały

dobre do pokazania, jak u

ytkownik przemieszcza si

po kolejnych stronach serwisu i na co

na poszczególnych stronach patrzy, ale trudne w interpretacji zbiorczej, innymi słowy
efektowne, ale mało skuteczne same w sobie.

Podstawowa technika zbiorczej analizy wyników badania wielu osób polega na definiowaniu
istotnych obszarów (area of interest). Skupienia wzroku zliczane s

dla ka

dego obszaru

niezale

nie. Typowe obszary w przypadku stron WWW to na przykład: menu, logotyp, pole

wyszukiwania, reklama, stopka. Na podstawie bada

kilku osób u

rednia si

wyniki i

generuje obraz ekranu (strony) z naniesionym rozkładem fiksacji w poszczególnych
obszarach: im wi

cej i cz

ęś

ciej u

ytkownicy spogl

dali na dany obszar czy element

interfejsu, tym cieplejszym kolorem jest on oznaczony. Mapy takie daj

dobry pogl

d na to,

gdzie u

ytkownicy rzeczywi

cie spogl

dali, a co nie przyci

gało ich wzroku. Je

li du

reklama na

rodku strony nie skupia wzroku, mo

na podejrzewa

e co

nale

y poprawi

chocia

w gr

wchodz

ró

ne niuanse, jak np. widzenie peryferyjne.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 78 - Kolejne zarejestrowane fiksacje

Rysunek 79 - Wizualizacja czasu po

conego na ogl

danie poszczególnych elementów serwisu

Badania z u

ytkownikami (user-experience)

Badanie z u

ytkownikami jest uznawane za podstawowe (najefektywniejsze) narz

dzie

bada

usability.

Ilu u

ytkowników powinno bra

udział w testach?

•

Pierwsi u

ytkownicy zazwyczaj odkrywaj

najwi

cej bł

dów.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

•

Jakob Nielsen i Tom Landauer wykazali,

e testowanie z 5 u

ytkownikami pozwala

na wykrycie 85% problemów dotycz

cych funkcjonalno

ci witryn. Zatrudnianie

kszej ilo

ci u

ytkowników nie gwarantuje liniowego wzrostu liczny wykrytych

bł

dów.

•

Zamiast jednego testu z 8 u

ytkownikami lepiej przeprowadzi

dwie tury testów z 3

ytkownikami. Najcz

ęś

ciej du

e bł

du zasłaniaj

te mniejsze i dopiero usuni

cie ich

i przeprowadzeni drugiej tury pozwala na odkrycie mniejszych bł

dów.

•

W te

cie bierze udział tak

e osoba przeprowadzaj

ca test i obserwator.

Rysunek 80 - Wykres przedstawia ilo

ść

znalezionych problemów usability w odniesieniu do ilo

badanych u

ytkowników. Wykres na podstawie bada

J. Nielsen i T. Landauer.

Kogo i jak rekrutowa

do testów?

•

Próbuj znale

źć

ytkowników zbli

onych do grupy docelowej.

•

Wynagrodzenie dla testowych u

ytkowników, 50-100 zł.

•

Nie rozmawiaj o zawarto

ci witryny z rekrutowanymi osobami.

Typy testów user-experience

•

Zrozumie

witryn

– pokazujesz witryn

ytkownikowi a nast

pnie sprawdzasz czy

zrozumieli sposób zorganizowania informacji, nawigacj

i koncepcj

witryny

•

Wykonanie czynno

ci – u

ytkownik pracuje z serwisem

Zadania zamkni

Zadania otwarte

Jak testowa

•

Najpierw spróbuj samemu wykona

zadania testowe.

•

uprzejmy i dbaj o poczucie własnej warto

ci u

ytkowników. Testujesz strony,

nie ludzi.

•

Zach

caj do gło

nego my

lenia.

•

li nie wiesz co my

li u

ytkownik – zapytaj o to.

•

Nie udzielaj wskazówek dotycz

cych tego jak maj

post

powa

•

Wydawaj proste i klarowne polecenia.

•

Bezpo

rednio po sesji rób notatki.

•

Uprzed

ytkownika,

dzie nagrywany

Nie b

dziesz w trakcie testu odpowiada

na jego pytania

Wynagrodzenie nie zale

y od wyniku testów

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

rodki techniczne podczas badania user-experience.

•

Kamera video

•

Program nagrywaj

cy to co dzieje si

na pulpicie lub druga kamera

Bardzo dobry artykuł o badaniach z u

ytkownikami znajdziesz pod adresem:

http://www.uzytecznosc.pl/publikacje/metody/testy

. Opisano tam przebieg

profesjonalnego badania z u

ytkownikami (wi

kszo

ść

bada

jest realizowanych

skromniejszymi

rodkami).

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

r e k l a m a

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Projektowanie zgodne z usability

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Etapy analizy usability w harmonogramie i bud

ecie projektu.

Istnieje wiele szkół dotycz

cych projektowania interaktywnego. Podej

cie cz

sto zale

tak

e od projektu (harmonogram, bud

et, skład zespołu). Z pewno

wł

czenie metod

yteczno

ci na wielu etapach powstawania projektu, przyczyni si

do uzyskania lepszej

jako

ci produktu finalnego.

Projektowanie zorientowane na u

ytkownika

Projektowanie zorientowane na u

ytkownika (ang. UCD – User-Centered Design) pozwala

na projektowanie produktów przyjaznych dla u

ytkowników poprzez ukierunkowanie procesu

projektowego na potrzeby finalnego u

ytkownika.

W UCD w kolejnych testuje si

(w sposób opisany wcze

niej jako testy z u

ytkownikami)

produkty otrzymywane w procesie kreacji serwisu, usuwa wykryte problemy i ponownie
poddaje testom.

Testowaniu podlegaj

makiety systemu,

projekty graficzne,

działaj

cy system.

Pod poj

ciem makiety rozumiem zarówno papierowe, proste makietki jak i interaktywne

makiety opracowane w PowerPoint lub HTML.

Jak stworzy

dobry prototyp?

Do opracowania pierwszego prototypu systemu mo

na u

metod ułatwiaj

cych uzyskania

dobrej u

yteczno

ci.

Analiza kontekstu u

ytkowania

Analiza ta ma na celu dokładne poznanie przyszłych u

ytkowników systemu. Ułatwi to

okre

lenie wymaga

co do systemu.

Musisz odpowiedzie

na pytania:

kim s

ytkownicy systemu,

do czego b

dzie słu

ył im system,

jakie s

umiej

tno

ci u

ytkowników,

czy system lub u

ytkownicy napotyka

na ograniczenia zewn

trzne,

By pozna

ytkowników oraz ich wymagania mo

esz posłu

spotkaniem z u

ytkownikami

ankietami

wywiadami indywidualnymi z u

ytkownikami

obserwacj

pracy u

ytkowników

Sortowanie kart

Metoda ta ułatwia zaprojektowanie struktury serwisu zgodnej z oczekiwaniami u

ytkowników.

Przygotowujesz kartoniki z nazwami elementów serwisu. Nast

pnie u

ytkownicy zgrupuj

podobne kartoniki w stosy. Tym samym w naturalny sposób tworz

kategorie dla

elementów serwisu. U

ytkownicy mog

tak

e za pomoc

uło

enia stosów na stole okre

ich wzajemne podobie

stwo. Mo

na poprosi

tak

e u

ytkownika o podanie nazw dla

utworzonych grup.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Po przeprowadzeniu kilku testów tego typu nale

y zastanowi

nad tym na ile

pogrupowania poczynione przez poszczególnych u

ytkowników s

do siebie zbli

one.

Szczególn

uwag

nale

y zwróci

na problematyczne elementy – te których u

ytkownicy nie

potrafili pogrupowa

te które były grupowane przez ka

dego u

ytkownika inaczej.

Scenariusze u

ycia (use cases)

Scenariusze u

ycia opisuj

jak u

ytkownicy wykonuj

zadania na podstawie typowych

zada

. S

tworzone zawsze z perspektywy u

ytkownika i jego potrzeb.

Scenariusze u

ycia najlepiej opracowa

wraz z finalnymi u

ytkownikami serwisu.

Persony

Persona to opracowany profil typowego u

ytkownika.

By stworzy

person

piszesz charakterystyk

finalnego u

ytkownika dla ka

dej grupy

docelowej serwisu. W opisie uwzgl

dniasz charakterystyk

osoby (np. stopie

znajomo

technologii) oraz typowe cele, zadania i potrzeby jakie ma na u

ytek persony realizowa

system.

Dla zwi

kszenia efektu mo

na dla wymy

lonej persony stworzy

nazwisko, zdj

cie i kilka

informacji, które „uwiarygodni

” (np. hobby).

Projektowanie struktury serwisu.

Na bazie wcze

niej omówionych metod, materiałów dostarczonych od klienta oraz Twojej

wiedzy powstanie projekt struktury serwisu oraz makiety funkcjonalne. Makiety funkcjonalne
mog

pełni

tak

e rol

interaktywnych prototypów (mo

na wykorzysta

je w testach z

ytkownikami). Makiety funkcjonalne mo

esz wykona

w programach prezentacyjnych lub

w HTML. To drugie podej

cie ułatwi testowanie makiet z u

ytkownikami. Do tworzenia

makiet w HTML mo

na wykorzysta

graficzny edytor HTML taki jak Dreamweaver.

Przykład

Korzystaj

c z programu FreeMind stwórz map

struktury serwisu korporacyjnego. Mo

esz

wzorowa

na zawarto

ci istniej

cego wybranego serwisu WWW.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 81 - Struktura serwisu przedstawia wzajemne powi

zanie dokumentów w serwisie. Punktem

wyj

cia jest dla nas strona główna.

Projektowanie makiet funkcjonalnych strony głównej.

Przykład

•

Korzystaj

c z pliku

wiczeniowego utwórz w programie Presentation lub PowerPoint

makiet

funkcjonaln

•

Makieta powinna odnosi

do wcze

niej zaprojektowanej struktury serwisu.

•

Pami

taj o zachowaniu kolorów zgodnych z legend

Rysunek 82 - U

ycie kolorów dla odró

nienia funkcjonalno

ci ułatwia ocenianie projektu serwisu

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 83 - Przykładowy projekt strony głównej serwisu korporacyjnego

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Projektowanie makiet funkcjonalnych kluczowych pod-stron.

Przykład.

•

Korzystaj

c z pliku

wiczeniowego utwórz w programie Presentation lub PowerPoint

makiet

funkcjonaln

pod-strony.

•

Makieta powinna odnosi

do wcze

niej zaprojektowanej struktury serwisu.

Rysunek 84 - Przykładowy projekt pod-strony serwisu korporacyjnego

Testowanie (prawie) gotowego serwisu

W poprzednich podrozdziałach pisałem o testowaniu u

yteczno

ci z u

ytkownikami oraz z

yciem innych narz

dzi. Pisałem tak

e o User Center Design i wł

czeniu testów we

wszystkie etapy powstawania serwisu. W tym podrozdziale chc

krótko omówi

ostatni

rodzaj testów jakie mo

esz przeprowadzi

, s

to publiczne beta testy serwisu.

Te testy nie poka

żą

Ci jak u

ytkownik korzysta z Twojego serwisu. Te testy nie s

najlepszym narz

dziem je

li chcesz przekona

co powiniene

poprawi

. Pozwol

jednak dowiedzie

czy w serwisie s

elementy, które zwracaj

uwag

ytkowników

(pozytywnie b

negatywnie). Z pewno

jest to bardzo wa

ny feedback od Twojego

odbiorcy.

Obecnie coraz cz

ęś

ciej publiczne prezentowane s

serwisy w pó

nej wersji testowej.

Takie podej

cie zakłada wspólne testowanie serwisu z u

ytkownikami. Ten trend wyst

puje

sto w serwisach typu Web 2.0 (opartych na społeczno

ci i informacji).

Zbieranie i analizowanie uwag od u

ytkowników zawsze ma pozytywny wpływ na

yteczno

ść

serwisu. Chc

tylko by

miał

wiadomo

ść

e publiczne beta testy to nie s

testy z u

ytkownikami i nigdy nie dadz

Ci takiej wiedzy o u

yteczno

ci serwisu jak testy z

ytkownikami.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Rysunek 85 - Na uruchomienie serwisu w wersji beta zdecydowała si

Interia. Serwis znajomi.interia.pl jest

serwisem społeczno

ciowym, bardzo rozs

dne jest zatem wczesne zbieranie opinii u

ytkowników.

Poprawa jako

ci serwisów WWW. Formułowanie zasad QA.

Dobr

praktyk

jest ustawiczne dbanie o u

yteczno

ść

i jako

ść

serwisów WWW. Istnieje

coraz wi

cej narz

dzi ułatwiaj

cych kontrolowanie jako

ci serwisów WWW.

QA to skrót pochodz

cy od Quality Assurance – zapewnienie jako

ci.

Automatyzacja testów QA.

•

Oprogramowanie automatyzuj

ce testy.

•

Sprawdzanie poprawno

ci linków.

Przykład.

Sprawdzanie poprawno

ci linków w serwisie WWW

•

Uruchom program Xenu (do pobrania z

http://home.snafu.de/tilman/xenulink.html

)

•

Wybierz opcj

File – Check URL

•

Wpisz adres serwisu do sprawdzenia

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

•

Wci

nij przycisk OK.

•

Program przyst

puje do sprawdzania linków

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

•

Po zako

czeniu prac program generuje raport

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Jak sprawdzi

jako

ść

projektu graficznego?

adresu

http://www.fabsoft.com/pages/Downloads/Downloads.htm

pobra

darmow

wersj

narz

dzia CoolRuler. Pozwala ono sprawdza

jako

ść

wykonania layoutu

za pomoc

wirtualnej miarki, któr

emy zmierzy

elementy na ekranie. Dzi

ki tej

miarce jeden z moich kolegów otrzymał ksywk

„One Pixel Man” :)

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Współpraca z agencj

interaktywn

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

Jak formułowa

swoje oczekiwania?

•

Z jakimi standardami ma by

zgodny serwis i dla jakich platform powinien by

dost

pny?

•

Czy agencja oferuje wł

czenie testów z u

ytkownikami w proces kreacji serwisu i je

tak to na jakich poziomach?

•

Czy agencja ma swoje wewn

trzne standardy precyzuj

ce proces kreacji serwisu?

•

Kto b

dzie zajmował si

projektowaniem interakcji?

•

Jaki jest skład temu projektowego?

Kliencie, czego masz prawo wymaga

od agencji interaktywnej.

Na podstawie archiwum listy

usabilty@janmedia.com

Tomek Janiszewski pisze:

Masz prawo wymaga

od webmastera czystego semantycznie XHTML.

Czystego semantycznie oznacza,

e wszystkie zastosowane w dokumencie znaczniki

XHTML musz

yte zgodnie z przeznaczeniem.

Pobie

nie mo

na sprawdzi

semantyk

zyka XHTML u

ywaj

c Validatora ze stron

W3C.

http://validator.w3.org

2. Masz prawo wymaga

, aby wygl

d Twojej strony był oparty *tylko i wył

cznie na

arkuszu styli CSS*.
Poprawno

ść

arkusza styli wzgl

dem semantyki j

zyka mo

na sprawdzi

na stronie

http://jigsaw.w3.org/css-validator

Masz prawo wymaga

, aby Twoja strona była poprawnie wy

wietlana we wszystkich

nowoczesnych przegl

darkach internetowych.

Wykaz najpopularniejszych przegl

darek na polskim rynku mo

esz znale

źć

pod

adresem

http://www.ranking.pl/rank.php?stat=browPL

4. Masz prawo wymaga

, aby Twoja strona była dost

pna dla wszystkich odbiorców.

Pami

taj,

e na Twoj

stron

wchodz

nie tylko w pełni sprawni u

ytkownicy Internet

Explorer 6.0, ale tak

e osoby niewidome, niedowidz

ce, z niedowładem ko

czyn itp.

Nie mo

esz o nich zapomina

, a lenistwo b

niekompetencja Twojego webmastera

nie mog

Ci przeszkodzi

w udost

pnieniu witryny całemu

wiatu.

Ciekawe informacje, które mog

stanowi

pomoc dla osób stawiaj

cych pierwsze

kroki w

wiecie dost

pno

ci i u

yteczno

ci mo

ecie znale

źć

pod adresem

http://www.dwww.pl

. Dost

pno

ść

swoich stron mo

ecie sprawdzi

ywaj

c systemu

Cynthia (

http://www.contentquality.com

) b

WebXACT

(

http://webxact.watchfire.com

)

Pami

taj jednak, ze

aden z tych testów nie daje Ci 100% pewno

ci, i

Twój serwis

jest wykonany poprawnie. Najlepiej przekona

o jako

ci własnego serwisu

samemu sprawdzaj

c go w ró

nych warunkach, pod ró

nymi systemami i w ró

nych

trybach przegl

dania.

Maciej Kostro pisze:

Czego powiniene

wymaga

Prawdopodobnie wystarczyłby jeden punkt: powinni

my wymaga

lenia!

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

100

Jak do tej pory skupili

my si

wył

cznie na standardach. I bardzo dobrze, bo jak

mówi definicja, standard to "norma", "wzorzec". I w agencji reprezentuj

cej pewien

poziom standard powinien by

standardem.

Z Waszych wypowiedzi wynika,

e standardy dotycz

ce u

yteczno

ci nie s

jeszcze

standardem (norm

) - punkty od 1 do 4.

Ale chciałbym zwróci

uwag

e same standardy to jeszcze za mało.

Standard jako taki powinien by

przezroczysty. Je

eli wyst

puj

jako klient agencji

interaktywnej, mam prawo oczekiwa

e standardy s

spełnione, a ja mog

skupi

na kwestiach istotnych dla serwisu jako cało

ci (kreacja, nawigacja, Content etc).

Fetyszyzowanie standardów prowadzi cz

sto do sytuacji absurdalnych, nie pami

tam

co to był za serwis - raczej niszowy ;) - ale zostałem powitany komunikatem mniej-

cej w tych słowach: niestety u

ywasz IE, w zwi

zku z tym nie mo

esz zobaczy

lub zrobi

czego

tam, twoja przegl

darka nie spełnia standardów. Nie mo

emy

obra

na rzeczywisto

ść

i musimy pami

o jeszcze innych standardach (czyli

normie): ponad 73% przegl

darek to IE.

Znakomita wi

kszo

ść

ytkowników Internetu nie ma bladego poj

cia o tym co to jest

standard W3C i po co to w ogóle jest (i lepiej,

eby tak zostało, bo przestaniemy by

potrzebni!).

A my

lenie realizatorów projektu pomaga w stworzeniu serwisu, który nie absorbuje

nas swoim serwisowym bytem, a słu

y wygodnemu podaniu tre

ci.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

101

Komunikacja z u

ytkownikiem

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

102

Dobre praktyki i ciekawe przykłady

Efektywna komunikacja z u

ytkownikiem mo

e by

postrzegana jako tworzenie takich

serwisów, których model biznesowy zakłada maksymalny nacisk na komunikacj

W tym momencie mo

emy powiedzie

o wielu ciekawych zjawiskach:

tworzenie tre

ci przez u

ytkowników,

personalizacja serwisu,

nawi

zywanie współpracy z u

ytkownikami poprzez działania marketingowe (cho

marketing wirusowy, programy partnerskie)

Rysunek 86 - Serwis Getionary.pl potrafi w zabawny sposób zareagowa

na "prowokacj

ytkownika" :)

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

103

Rysunek 87 - W Polsce pierwsze firmy postanowiły poprosi

o testy swoich urz

dze

znanych

i cenionych bloggerów. Przykład z bloga Pawła Tkaczyka pokazuje jak skrajnie ró

ne opinie potrafi

ytkownicy wyrazi

na temat takiej współpracy.

Rysunek 88 - Sklep internetowy www.e-lady.pl stworzył bloga jako warto

ść

dodan

dla swoich

klientów. Blog ułatwia kontakt z u

ytkownikami i słu

y do zbierania opinii.. nie tylko o sklepie.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

104

Rysunek 89 - Nowatorskie systemy eCommerce pozwalaj

na tworzenie wirtualnych sklepów gdzie

dy z klientów, mo

e sta

tak

e sprzedawc

. Tutaj przykład systemu MLM gdzie u

ytkownicy

samodzielnie tworz

swoj

sie

sprzeda

Rysunek 90 - Sklep Positivo.pl generuje promocje dla ka

dego u

ytkownika w sposób unikalny, na

podstawie jego historii zakupów. Je

li kupiłe

np. aparat cyfrowy dostaniesz zni

na obiektyw.

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

105

Zał

czniki

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

106

Top Ten Web Design Mistakes of 2005 .

Na podstawie “Jakob Nielsen's Alertbox”

1. Zbyt małe lub nieskalowalne czcionki

Rozwi

zanie:

http://www.useit.com/alertbox/20020819.html

2. Niestandardowe linki

Rozwi

zanie:

http://www.useit.com/alertbox/20040510.html

http://www.useit.com/alertbox/20040503.html

3. Nie-intuicyjne interfejsy we Flash

Rozwi

zanie:

http://www.useit.com/alertbox/20021125.html

4. Tre

ść

nieprzystosowana do Internetu

Rozwi

zanie:

http://www.useit.com/papers/webwriting/

5. Problemy z wyszukiwark

Rozwi

zanie:

http://www.useit.com/alertbox/20050509.html

6. Niekompatybilno

ść

z przegl

darkami

Rozwi

zanie:

http://www.w3c.org

7. Nadu

ywanie formularzy

Rozwi

zanie:

http://www.useit.com/alertbox/forms.html

8. Brak informacji kontaktowych i informacji o wła

cicielu serwisu

Rozwi

zanie:

http://www.useit.com/alertbox/20031027.html

9. Nieskalowalny layout serwisu

Rozwi

zanie:

http://www.useit.com/alertbox/20050711.html

10. Niepoprawne powi

kszanie obrazków i okienka pop-up

Rozwi

zanie:

http://www.useit.com/alertbox/20041206.html

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

107

Zako

czenie

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

108

Literatura.

1. Nielsen Norman Group, eCommerce. User Experience.
2. Janmedia Interactive, Raport z badania funkcjonalno

ci polskich sklepów

inernetowych.

3. J. Nielsen, Designing Web Usability : The Practice of Simplicity.
4. S. Krug, Don't Make Me Think : A Common Sense Approach to Web Usability.
5. J. Nielsen, M. Tahir, Homepage Usability : 50 websites deconstructed.
6. Jeffrey Zeldman, Projektowanie serwisów WWW. Standardy sieciowe.
7. Shane Bowman, Chris Willis, Designing Web Sites That Sell.
8. Verisign, Guide How to Create an E-Commerce Website.
9. Shari Thurow, Pozycjonowanie w wyszukiwarkach internetowych.
10. Ani Phyo, Web Design. Projektowanie atrakcyjnych stron WWW.

Polecam.

•

Kurs usability na Wiki:

http://www.kursusability.pl

•

Lista dyskusyjna o usabillity :

http://www.janmedia.pl/lista_usability.xml

•

Mój blog na temat efektywno

ci WWW – Webusability –

http://www.webusability.pl

•

Janmedia Interactive – agencja interaktywna w której pracuje

–

http://www.janmedia.pl

Rysunek 91 - Pod adresem http://www.frappr.com/webusabilitypl powstaje mapka osób zainteresowanych

usability - daj si

pozna

Efektywne i intuicyjne serwisy WWW | www.webusability.pl

109

Szczególn

pomoc w promowaniu i tworzeniu kursu odgrywaj

Serdecznie zapraszam ka

dego, kto chce pomóc w promowaniu, ulepszaniu, publikowaniu

kursu do kontaktu –

tkarwatka@webusability.pl

. Jestem otwarty na wszelkie pomysły na

współprac

w zakresie usability. Wi

cej materiałów edukacyjnych oraz najnowsz

wersj

kursu zawsze mo

na znale

źć

http://www.webusability.pl

Wyszukiwarka

Podobne podstrony:
Kurs usability
kurs usability (projektowanie i funkcjonalnosc stron internetowych, webmastering, www) IHXOV57HNINEF
kurs usability
kurs usability efektywne i intuicyne serwisy www ZKDTBEZK7XVMFTLW4QCYGTCYKVD5VZ524RGHYGQ
kurs usability efektywne i intuicyjne serwisy www poradnik ebook BA4SM4JNJN2TQ4N4UFU4VEAC55GG7D2BD
kurs usability (projektowanie, funkconalno stron internetowych, webmastering, webmaster) B32MHNDUFRT
Kurs usability
kurs usability (projektowanie i funkcjonalnosc stron internetowych, webmastering, www) IHXOV57HNINEF
Kurs usability
Kurs usability
KURS ETYKI
Choroba hemolityczna p odu na kurs
zapotrzebowanie ustroju na skladniki odzywcze 12 01 2009 kurs dla pielegniarek (2)
kurs
wady postawy kurs
ostre białaczki 24 11 2008 (kurs)

więcej podobnych podstron