Kurs Usability

Tomasz Karwatka
Efektywne i intuicyjne
serwisy WWW
Darmowa publikacja, dostarczona przez
Zote Myli Sp z o.o.
Copyright for Polish edition by Tomasz ar!at"a # ZloteMysli.pl
$ata% &'.().*(('
Tyt+% ,fe"ty!ne i int+icy-ne ser!isy ...
/+tor% Tomasz ar!at"a
S"ad% /nna Popis0.it"o!s"a
Niniejsza publikacja moe by kopiowana oraz dowolnie
rozprowadzana tylko i wycznie w formie dostarczonej przez
Wydawc. abronione s jakiekolwiek zmiany w zawarto!ci
publikacji bez pisemnej z"ody Wydawcy. abrania si jej
odsprzeday# z"odnie z re"ulaminem Wydawnictwa ote $y!li.
Tomasz ar!at"a
...% !!!.!eb+sability.pl
.szyst"ie !y"orzystane il+strac-e s1 !asnoci1 ich a+tor2! i zostay +3yte -edynie
! celach ed+"acy-nych.
Dystrybucja w %nternecie# za z"od &utora
4nterneto!e .yda!nict!o Zote Myli
Zote Myli s.c.
+l. Plebiscyto!a &
550&(( 6li!ice
...% !!!.ZloteMysli.pl
,M/47% "onta"t8zlotemysli.pl
Wszelkie prawa zastrzeone.
&ll ri"'ts reser(ed.
)&*+, -. /-N),N)0
W0)12...................................................................................................................3
.st9p : +rs polecam...................................................................................................;
.st9p : Czyta-1c "+rs na+czysz si9..............................................................................<
.st9p : onta"t i !sp2praca......................................................................................<
W24-W&D,N%,.................................................................................................5
.pro!adzenie : =sability -a"o b+do!anie ergonomicznych i int+icy-nych !
obs+dze ser!is2!........................................................................................................>
.pro!adzenie : 6+r+ +sability i ?r2da !iedzy. @a-!a3nie-sze "si13"i i ser!isy
.............................................................................................................................&(
.pro!adzenie : A"relenie "l+czo!ych cel2! +sability............................................&&
.pro!adzenie : Ba" przeliczyC +sability na got2!"9 i pozys"aC b+d3et na
z!i9"szanie +sability ser!is+......................................................................................&*
.pro!adzenie : Case..................................................................................................&)
N&6W&7N%,60, W8)8/N,.............................................................................9:
@a-!a3nie-sze !ytyczne : @iepisane standardy 4nternet+.........................................&5
@a-!a3nie-sze !ytyczne : Case..............................................................................&5
@a-!a3nie-sze !ytyczne : on!enc-e ! 4nternecie...............................................&5
@a-!a3nie-sze !ytyczne : /naliza i pisanie "onstr+"ty!nych "om+ni"at2!............&D
@a-!a3nie-sze !ytyczne : Case...............................................................................&D
@a-!a3nie-sze !ytyczne : ,fe"ty!ne lin"i.................................................................&'
@a-!a3nie-sze !ytyczne : Podsta!y na!igac-i...........................................................&'
@a-!a3nie-sze !ytyczne : $laczego ! Sieci na!ig+-e si9 tr+dnie-.........................&;
@a-!a3nie-sze !ytyczne : 62!ne zadania na!igac-i............................................&;
@a-!a3nie-sze !ytyczne : Pro-e"to!anie na!igac-i..................................................&>
@a-!a3nie-sze !ytyczne : Pro-e"to!anie na!igac-i : Staa na!igac-a..................&>
@a-!a3nie-sze !ytyczne : Pro-e"to!anie na!igac-i : Men+ narz9dzio!e............&>
@a-!a3nie-sze !ytyczne : Pro-e"to!anie na!igac-i : P+n"ty starto!e................*(
@a-!a3nie-sze !ytyczne : Pro-e"to!anie na!igac-i : Strona g2!na....................*&
@a-!a3nie-sze !ytyczne : Pro-e"to!anie na!igac-i : Beste t+ta-........................**
@a-!a3nie-sze !ytyczne : Pro-e"to!anie na!igac-i : Problemy z roz!i-anym
men+......................................................................................................................*)
@a-!a3nie-sze !ytyczne : Pro-e"to!anie na!igac-i : Ecie3"a na!igacy-na Fcie3"a
po!rot+, cie3"a o"r+sz"2!G.................................................................................*D
@a-!a3nie-sze !ytyczne : Str+"t+ra ser!is+.............................................................*'
@a-!a3nie-sze !ytyczne : Str+"t+ra ser!is+ : 4nt+icy-na str+"t+ra ser!is+.......*'
@a-!a3nie-sze !ytyczne : Str+"t+ra ser!is+ : Case..............................................*;
@a-!a3nie-sze !ytyczne : Pro-e"to!anie !ysz+"i!ar"i............................................*<
@a-!a3nie-sze !ytyczne : Pro-e"to!anie !ysz+"i!ar"i : 4nt+icy-na !ysz+"i!ar"a. . .*<
@a-!a3nie-sze !ytyczne : /rchite"t+ra informac-i....................................................*>
@a-!a3nie-sze !ytyczne : /rchite"t+ra informac-i : $obra archite"t+ra
informac-i...............................................................................................................)(
@a-!a3nie-sze !ytyczne : /rchite"t+ra informac-i : @az!a pod0strony%.............)(
@a-!a3nie-sze !ytyczne : H+do!a typo!e- strony....................................................)&
@a-!a3nie-sze !ytyczne : Test r+ga.........................................................................)*
@a-!a3nie-sze !ytyczne : Case..............................................................................)*
,.,;)8WN-<= 0,4W%0>W ;-42-4&/86N8/?.............................................@:
,fe"ty!noC ser!is2! "orporacy-nych : /naliza !ybranych ser!is2!
"orporacy-nych, opraco!anie propozyc-i +lepszeI....................................................)5
,fe"ty!noC ser!is2! "orporacy-nych : Case......................................................)5
,fe"ty!noC ser!is2! "orporacy-nych : Pro-e"to!anie i badanie strony g2!ne-
ser!is+ "orporacy-nego..............................................................................................)<
,fe"ty!noC ser!is2! "orporacy-nych : Case......................................................)>
,fe"ty!noC ser!is2! "orporacy-nych : Co m+si znale?C si9 na stronie g2!ne-.5&
,fe"ty!noC ser!is2! "orporacy-nych : Ba"ie problemy napot"asz pro-e"t+-1c
stron9 g2!n1.........................................................................................................5*
,fe"ty!noC ser!is2! "orporacy-nych : @a -a"ie pytania m+si odpo!iadaC
strona g2!na.........................................................................................................5)
,fe"ty!noC ser!is2! "orporacy-nych : Ba" prze"azaC cel !itryny
od!iedza-1cem+.....................................................................................................5)
,fe"ty!noC ser!is2! "orporacy-nych : Z!i9"szanie iloci informac-i...............55
,fe"ty!noC ser!is2! "orporacy-nych : ,fe"ty na-azd+......................................55
,fe"ty!noC ser!is2! "orporacy-nych : Pro-e"to!anie cie3e" na!igacy-nych......5'
,fe"ty!noC ser!is2! "orporacy-nych : ,fe"ty!ne pisanie dla 4nternet+...............5'
,fe"ty!noC ser!is2! "orporacy-nych : ,fe"ty!ne pisanie dla 4nternet+ :
S"+teczny ! 4nternecie te"st.................................................................................5'
,fe"ty!noC ser!is2! "orporacy-nych : H+do!anie za+fania do ser!is+................5;
,fe"ty!noC ser!is2! "orporacy-nych : Ba" pogodziC m+ltimedia i Jlash z
!ytycznymi +sabilityK.................................................................................................D&
,fe"ty!noC ser!is2! "orporacy-nych : Le"lama i mar"eting a +sability. Z-a!is"o
banner0blindness........................................................................................................D)
,.,;)8WN-<= ,/-$$,4/,............................................................................A:
,fe"ty!noC eCommerce : =sability ! systemie eCommerce...................................D5
,fe"ty!noC eCommerce : Co decyd+-e o s+"cesie eCommerce 0 Harnes#@oble MS
/mazon, ,mpi" MS Merlin.........................................................................................D5
,fe"ty!noC eCommerce : S+"ces /mazon..........................................................D5
,fe"ty!noC eCommerce : S+"ces Merlin.............................................................DD
,fe"ty!noC eCommerce : Czynni"i s+"ces+ e0commerce...................................DD
,fe"ty!noC eCommerce : Metody pomiar+ efe"ty!noci eCommerce.
.sp2czynni" porz+ceI "oszy"a................................................................................D'
,fe"ty!noC eCommerce : Minimalizac-a !sp2czynni"a porz+ceI "oszy"a............D;
,fe"ty!noC eCommerce : Z!i9"szamy +sability "atalog+ prod+"t2!, "oszy"a i
proces+ zama!iania....................................................................................................D<
,fe"ty!noC eCommerce : $obre przy"ady.........................................................D<
,fe"ty!noC eCommerce : H+d+-emy za+fanie +3yt"o!ni"2! do s"lep+................'5
,fe"ty!noC eCommerce : Sym+lac-a !py!+ +sability na zys"i s"lep+
interneto!ego.............................................................................................................''
D-0)12N-<= .....................................................................................................B3
$ost9pnoC : to i "iedy dys"rymin+-e "lient2!.......................................................';
$ost9pnoC : 6r+py +3yt"o!ni"2! ocze"+-1ce pomocy.......................................';
$ost9pnoC : $ost9pnoC -a"o inic-aty!a.............................................................'<
$ost9pnoC : 62!ne zasady.................................................................................'<
$ost9pnoC : Pozna-emy oprogramo!anie typ+ screen0reader dla +3yt"o!ni"2!
nie!idomych...............................................................................................................;&
$ost9pnoC : Case..................................................................................................;&
$ost9pnoC : Test+-emy dost9pnoC ser!is+ dla niepenospra!nych.......................;*
$ost9pnoC : Case..................................................................................................;*
$ost9pnoC : Test+-emy ser!is ... na r23nych platformach...............................;5
$ost9pnoC : Case..................................................................................................;5
$ost9pnoC : Case..................................................................................................;D
$ost9pnoC : Case..................................................................................................;'
$ost9pnoC : anay LSS -a"o no!y rode" "om+ni"ac-i.........................................;'
*&D&N%, C0&*%+%)8..........................................................................................3D
Hadanie +sability : Typy badaI +sability...................................................................;<
Hadanie +sability : Testy f+n"c-onalnoci a testy gr+po!e...................................;<
Hadanie +sability : Testo!anie..............................................................................;<
Hadanie +sability : @ie"t2re metody i narz9dzia bada!cze.......................................;>
Hadanie +sability : Acena he+rystyczna................................................................;>
Hadanie +sability : Sorto!anie "art.......................................................................;>
Hadanie +sability : /naliza 7M ..........................................................................;>
Hadanie +sability : Hadania eye0trac"ing..............................................................<(
Hadanie +sability : Hadania +ser0eNperience.........................................................<&
Hadanie +sability : Pro-e"to!anie badania
+ser0eNperience...........................................................................................................<&
Hadanie +sability : 4l+ +3yt"o!ni"2! po!inno braC +dzia ! testachK...............<&
Hadanie +sability : ogo i -a" re"r+to!aC do test2!K..........................................<*
Hadanie +sability : Typy test2! +ser0eNperience..................................................<*
Hadanie +sability : Ba" testo!aCK..........................................................................<*
Hadanie +sability : Erod"i techniczne podczas badania +ser0eNperience.............<)
24-6,;)-W&N%, E-DN, C0&*%+%)8..........................................................D:
Pro-e"to!anie zgodne z +sability : ,tapy analizy +sability ! harmonogramie i
b+d3ecie pro-e"t+.......................................................................................................<5
Pro-e"to!anie zgodne z +sability : Proces t!orzenia ser!is+..............................<D
Pro-e"to!anie zgodne z +sability : Zesp2............................................................<'
Pro-e"to!anie zgodne z +sability : Pro-e"to!anie str+"t+ry ser!is+.......................<;
Pro-e"to!anie zgodne z +sability : Case................................................................<;
Pro-e"to!anie zgodne z +sability : Pro-e"to!anie ma"iet f+n"c-onalnych strony
g2!ne-........................................................................................................................<;
Pro-e"to!anie zgodne z +sability : Case................................................................<;
Pro-e"to!anie zgodne z +sability : Pro-e"to!anie ma"iet f+n"c-onalnych
"l+czo!ych pod0stron.................................................................................................<<
Pro-e"to!anie zgodne z +sability : Case...............................................................<<
Pro-e"to!anie zgodne z +sability : Popra!a -a"oci ser!is2! .... Jorm+o!anie
zasad O/.....................................................................................................................<>
Pro-e"to!anie zgodne z +sability : /+tomatyzac-a test2! O/..................................>(
Pro-e"to!anie zgodne z +sability : Case...............................................................>(
Pro-e"to!anie zgodne z +sability : .sp2praca z agenc-1 intera"ty!n1. Ba"
form+o!aC s!o-e ocze"i!ania...................................................................................>)
&FG/N%;%........................................................................................................5:
Top Ten .eb $esign Mista"es of *((D .....................................................................>5
liencie, czego masz pra!o !ymagaC od agenc-i intera"ty!ne-................................>D
+%),4&)C4&.......................................................................................................55
2-+,/&$..........................................................................................................9HH
0/,E>+NG 2-$-/ W 24-$-W&N%C % )W-4,N%C ;C40C -DE48W&6G....9H9
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ;
Wstp Wstp
Czy zastana!ialicie si9, co decyd+-e o po!odzeni+ ser!is2! ...K
Co spra!ia, 3e +3yt"o!nicy ch9tnie- przeby!a-1 na nie"t2rych
stronachK . g2!ne- mierze decyd+-e o tym +sability, z!ane te3
+3ytecznoci1. . moich sz"oleniach po"az+-9, -a" b+do!aC
int+icy-ne ! obs+dze ser!isy i +do!adniam, -a" !iel"i !py! ma
+3ytecznoC na finalny s+"ces "a3dego intera"ty!nego pro-e"t+.
Jorma "+rs+ ma +at!iC szyb"ie zapoznanie si9 z nim. .i9"szoC
informac-i zostaa podana ! s"ondenso!ane- formie dzi9"i czem+
mo3esz zapoznaC si9 z tymi elementami, "t2re Ciebie na-bardzie-
interes+-1, bez "oniecznoci czytania caoci. @a!et przeczytanie
caoci nie za-mie Ci !i9ce- ni3 * godziny.
Wstp I ;urs polecam
Asobom z!i1zanym z mar"etingiem, re"lam1 i PL, !szyst"im,
"t2rzy !y"orzyst+-1 4nternet do "om+ni"ac-i ze s!ymi "lientami,
dzienni"arzami i otoczeniem bizneso!ym. +rs ten szczeg2ln1
!artoC ma ta"3e dla os2b plan+-1cych l+b pro!adz1cych
dziaalnoC handlo!1 ! Sieci.
Tomasz Karwatka jest autorem serwisu
http://www.webusability.pl i pracownikiem agencji interaktywnej
Janmedia (http://www.janmedia.pl).
Copyright by .yda!nict!o Zote Myli # Tomasz ar!at"a
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. <
Wstp I /zytajc kurs nauczysz si
Co decyd+-e o efe"ty!noci ser!is+ ...K
Ba" pro!adziC analiz9 +sability i oceniaC int+icy-noC ser!is+K
Ba" s"+tecznie docieraC do "lient2!, medi2! i otoczenia
bizneso!ego poprzez efe"ty!ny ser!is "orporacy-nyK
Ba" z!i9"szaC efe"ty!noC system2! eCommerceK
Co to -est !sp2czynni" porz+ceI "oszy"a i -a" mo3na go
zmnie-szaCK
Czym s1 testy +ser0eNperience i -a" -e pro!adziCK
Ba" pro-e"to!aC +3yteczne ser!isy ... i !sp2praco!aC
z agenc-1 intera"ty!n1K
Wstp I ;ontakt i wspJpraca
Serdecznie zapraszam "a3dego, "to chce pom2c ! promo!ani+,
+lepszani+, p+bli"o!ani+ "+rs+ do "onta"t+ Q
t"ar!at"a8-anmedia.com F!i9ce- danych "onta"to!ych na
http%::!!!.tomi".infoG. Bestem ot!arty na !szel"ie pomysy na
!sp2prac9 ! za"resie +sability. .i9ce- materia2! ed+"acy-nych
oraz na-no!sz1 !ers-9 "+rs+ za!sze mo3na znale?C na
http%::!!!.!eb+sability.pl.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. >
Wprowadzenie Wprowadzenie
Wprowadzenie I Csability jako budowanie
er"onomicznyc' i intuicyjnyc' w obsudze
serwisJw
=3ytecznoC Fang. +sability, !eb0+sabilityG 0 na+"a za-m+-1ca si9
ergonomi1 i f+n"c-onalnoci1 +rz1dzeI oraz apli"ac-i. . Polsce
po-9cie +3ytecznoci stoso!ane -est zaz!ycza- ! odniesieni+ do
ergonomii ser!is2! ... oraz apli"ac-i +3yt"o!ych.
=3ytecznoC ! ich przypad"+ s"+pia si9 na%
int+icy-ne- na!igac-i,
+at!ieni+ s"ano!ania ! posz+"i!ani+ informac-i,
zape!nieni+ zroz+miae- dla +3yt"o!ni"a "om+ni"ac-i.
ajpe!niejsz" de#inicj$ usability znajdziesz zawsze na %ikipedia:
http://pl.wikipedia.org/wiki/&'()'*(yteczno'()'+*
'(,'-./(web0usability)
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. &(
Wprowadzenie I Euru usability i KrJda wiedzy.
Najwaniejsze ksiki i serwisy WWW
$esigning .eb =sability % The Practice of Simplicity, B. @ielsen
$onRt Ma"e Me Thin" % / Common Sense /pproach to .eb
=sability, S. r+g
Somepage =sability % D( !ebsites deconstr+cted, B. @ielsen,
M. Tahir
Strona domo!a Ba"oba @ielsena 0 http%::!!!.+seit.com:
atalog lin"2! dotycz1cych +sability 0
http%::!!!.+sable!eb.com:
Stron B. Zeldmana, or9do!ni"a standard2! siecio!ych 0
http%::!!!.zeldman.com:
Pols"i ser!is+ o +3ytecznoci o +znane- marce 0
http%::!!!.+zytecznosc.pl:
Ser!is gr+py os2b dba-1ce- o dost9pnoC pols"ich ... 0
http%::!!!.osiol"i.net:
M2- ser!is dotycz1cy +sability 0 http%::!!!.!eb+sability.pl
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. &&
Wprowadzenie I -kre!lenie kluczowyc' celJw
usability
0erwis
korporacyjny
lub produktowy
0klep
internetowy
2ortal
%lo! informacji Maa Q rednia Maa Q bardzo
d+3a
Hardzo d+3a
%lo!
aktualizacji
@is"a Q rednia Erednia 0 d+3a Hardzo d+3a
Dla uytkownika
najwaniejsze
,fe"ty!ny "onta"t
Poznanie
prod+"t2!, firmy
.ygodne
!ysz+"anie
prod+"t+
HezpieczeIst!o,
za+fanie
Abs+ga i !ygoda
$ost9pnoC
informac-i
Szyb"oC
odnalezienia ich.
Dla serwisu
najwaniejsze
Zaintereso!anie
+3yt"o!ni"a
S"onienie do
"onta"t+:za"+p+:
!izyty ! salonie
Sprzeda3
H+do!anie
lo-alnoci
=trzymanie
+3yt"o!ni"a
! obr9bie portal+.
Zaintereso!anie
-a" na-!i9"sza
iloci1 informac-i.
2odsumowanie $oC at!o
b+do!aC +3yteczne
ser!isy
"orporacy-ne
i prod+"to!e
Aptymalizac-a
+sability !ymaga
zaz!ycza- badaI,
ta"3e badaI typ+
+ser Q eNperience
onieczne
zaa!anso!ane
testy i ostro3ne
pro-e"to!anie
+sability.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. &*
Wprowadzenie I 6ak przeliczy usability na
"otJwk i pozyska budet na zwikszanie usability
serwisu
Przy"ad oparty na "si13ce Ba"oba @ielsena%
Jirma zatr+dnia &( ((( praco!ni"2! Fnp. "t2ry z pols"ich
ban"2!G.
.artoC czas+ pracy to o"oo *(( z za godzin9 F+tracony zys"G.
Bedna informac-a na stronie g2!ne- -est nie0 int+icy-na Fnp. ?le
napisany !st9p a"t+alnoci l+b nic nie m2!i1cy lin"G.
a3dy z praco!ni"2! po!i9ca dodat"o!o D se"+nd
zastana!ia-1c si9 co oznacza.
A"oo &DT os2b "li"nie na lin" niepotrzebnie gdy3 nie zroz+mie-1,
3e nie za!iera +3ytecznych dla nich informac-i.
a3dy z tych &(T sp9dzi minim+m )( se"+nd czyta-1c te"st zanim
zorient+-e si9, 3e nie za!iera +3ytecznych dla niego informac-i.
.e-cie i !y-cie z arty"++ za-mie im minim+m D se"+nd.
2oliczmyL
&. . pier!szym "ro"+ tracimy &( ((( Fpraco!nicyG U D s V &5 h,
co "oszt+-e *<(( z
*. . dr+gim "ro"+ tracimy &( ((( U &(T U )D s V &( h
co "oszt+-e nas *((( z
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. &)
). Zatem -edna nieoptymalna zmiana ! ser!isie "oszt+-e firm9
-ednorazo!o pra!ie D((( z.
Jirma
4loC praco!ni"2! &((((
oszt +tracone- godziny pracy *((,(( z
4nformac-a
$odat"o!y czas na zroz+mienie nie0int+icy-nego "om+ni"at+
WsX D
4loC b9dnych decyz-i &(T
Czas +tracony na s"+te" b9dne- decyz-i WsX )D
Straty
czas stracony ! "ro"+ & WhX &5
"oszt "ro"+ & * ;;< z
czas stracony ! "ro"+ * WhX &(
"oszt "ro"+ * & >55 z
Lazem 5 ;** z
)abela 9 M 6ednorazowy koszt jednej nieMintuicyjnej informacji
Wprowadzenie I /ase
Mo3esz ot!orzyC pli" !!. !yliczeI zapisany ! formacie ,Ncel
i samodzielnie przepro!adziC sym+lac-9 dla zmiennych parametr2!.
.szyst"ie materiay C!iczenio!e s1 dost9pne na
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. &5
Najwaniejsze wytyczne Najwaniejsze wytyczne
Trzyma- si9 "on!enc-i.
@ie "a3 mi myleCY
Najwaniejsze wytyczne I Niepisane standardy
%nternetu
Najwaniejsze wytyczne I /ase
Zastan2! si9, -a"ie "on!enc-e stoso!ane s1 ! gazecie.
nag2!e"
podpis pod fotografi1
...
Najwaniejsze wytyczne I ;onwencje w %nternecie
$+3o "on!enc-i pochodzi ze !iata realnego, z!aszcza z prasy.
on!enc-e i niepisane standardy s1 bardzo przydatne i zaz!ycza-
s1 s+szne, inacze- nie byyby "on!enc-ami %G
Pro-e"tanci ma-1 !rodzon1 niech9C do !y"orzystania "on!enc-i.
=mieszczenie element2! ! pe!nych standardo!ych mie-scach
+at!ia odnalezienie ich.
7ogo ! le!ym g2rnym naro3ni"+ ser!is+ -est "on!enc-1.
Pod"relenie element+ b9d1cego lin"iem -est "on!enc-1.
Zmiana "olor2! lin"2! -+3 od!iedzonych -est "on!enc-1.
Po-9cie "oszy"a ! handl+ interneto!ym -est "on!enc-1.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. &D
Najwaniejsze wytyczne I &naliza i pisanie
konstruktywnyc' komunikatJw
4ysunek 9 M ;omunikat Nbd pracy z systememN brzmi do!
eni"matycznie. Nie tumaczy# co si stao i co naley teraz zrobi.
Najwaniejsze wytyczne I /ase
.e-d? na !ybrany ser!is ... l+b portal.
Adsz+"a- "om+ni"aty o nast9p+-1cych syt+ac-ach
.ysz+"i!ar"a Q bra" !yni"2! !ysz+"i!ania
@e!sletter Q niepopra!ny adres e0mail
Jorm+larz "onta"to!y Q niepopra!ne dane l+b bra" danych
4nny "om+ni"at system+
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. &'
Czy "om+ni"aty system+ s1 popra!neK
Czy t+macz1 co si9 staoK
Czy !s"az+-1 mie-sce problem+K
Czy poda-1 roz!i1zanie problem+K
Czy -eli prosz1 o !pisanie danych, poda-1 ich formatK
Najwaniejsze wytyczne I ,fektywne linki
Te"st odnoni"2! i opc-i ! men+ nie po!inien byC zbyt d+gi,
gdy3 +tr+dnia to szyb"ie zroz+mienie znaczenia.
$!a do czterech s2!.
=ni"a- Z"li"ni- t+ta-[Y
Stos+- tyt+y odnoni"2!.
7in"i te"sto!e Q trzyma- si9 "on!enc-i.
Pod"relenia.
@iebies"i "olor Fcoraz cz9cie- +!a3a si9, 3e to nie -est
"onieczneG.
Aznaczenie -+3 "li"ni9tych.
@ie ot!iera- lin"2! ! no!ym o"nie.
.yra?nie zaznacz elementy, "t2re mo3na "li"n1C.
Najwaniejsze wytyczne I 2odstawy nawi"acji
$ziaa-1c, zaz!ycza- czego sz+"asz
Zale3nie od chara"ter+ 0 pytasz l+b sz+"asz na !asn1 r9"9.
. 4nternecie pytanie to zada!anie pytaI !ysz+"i!arce.
Sz+"anie na !asn1 r9"9 to "orzystanie z men+ na!igacy-nego.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. &;
$!a typ+ +3yt"o!ni"2!%
@asta!ieni na !ysz+"i!anie Q od raz+ id1 do !ysz+"i!ar"i
@asta!ieni na przegl1danie Q !ol1 przegl1daC strony
Najwaniejsze wytyczne I Dlacze"o w 0ieci nawi"uje si
trudniej
Hra" po-9cia s"ali, nie !iesz, -a" d+3a -est !itryna, !i9c tr+dno
o"reliC, ile mo3e za-1C -e- przesz+"anie.
@ieint+icy-ne o"relanie pozyc-i i "ier+n"+, nie przysta-e do !iata
realnego
S+rfo!anie po 4nternecie z nat+ry -est stanem pe!nego
zag+bienia.
J. ielsen podaje1 2e a2 34' wszystkich klikni$5 w 6nternecie to
klikni$cie przycisku %stecz. To tak2e kolejny argument1 by unika5
ramek i nawigacji opartej na 7lash 8 te elementy mog" utrudnia5
nawigowanie za pomoc" przycisku %stecz.
Najwaniejsze wytyczne I EJwne zadania nawi"acji
@a!igac-a +mo3li!ia odna-dy!anie do"+ment2! ! ser!isie.
@a!igac-a inform+-e nas, gdzie -estemy ! str+"t+rze ser!is+
Fodpo!iednie oznaczenie ! men+G.
@a!igac-a da-e nam pocz+cie stabilnoci Felement stayG.
M2!i o tym, co ! danym mie-sc+ si9 zna-d+-e Fpo-9cie men+G.
M2!i, -a" mo3emy z tego s"orzystaC.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. &<
H+d+-e za+fanie do a+tor2! ser!is+.
4ysunek O M 0c'emat nawi"acji po serwisie# na podstawie 0.;ru".
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. &>
Najwaniejsze wytyczne I 2rojektowanie nawi"acji
Najwaniejsze wytyczne I 2rojektowanie nawi"acji I 0taa
nawi"acja
Zbi2r element2! na!igacy-nych po-a!ia-1cych si9 na !szyst"ich
stronach ser!is+. S1 to na-cz9cie-%
4dentyfi"ator strony
\1cze do strony starto!e-
.ysz+"i!ar"a
Men+ narz9dzio!e
Men+ g2!ne
Staa na!igac-a mo3e byC zmieniona b1d? nieobecna na stronie
g2!ne- oraz na stronach z form+larzami Fnp. ! systemach
patnociG.
Najwaniejsze wytyczne I 2rojektowanie nawi"acji I $enu
narzdziowe
Za!iera od ) do ; element2!, "t2re +zna-emy za szczeg2lnie
przydatne. Zaz!ycza- s1 to%
Strona g2!na.
onta"t.
Mapa ser!is+.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. *(
Cz9sto !yst9p+-1 t+ta- ta"3e 1cza ta"ie -a"%
/rchi!+m
.ylog+- si9
Abs+ga "lienta
Jor+m dys"+sy-ne
Pli"i do pobrania
J/O
Pomoc
Ba" zacz1CK
.iadomoci praso!e
Polity"a pry!atnoci
Le-estrac-a
.ysz+"i!ar"a
oszy"
Zapisz si9 do nas
/dresy plac2!e"
T!o-e "onto
Najwaniejsze wytyczne I 2rojektowanie nawi"acji I
2unkty startowe
P+n"ty starto!e s1 elementami strony g2!ne-, "t2re pro!adz1
! g1b str+"t+ry ser!is+. $zi9"i tem+ +3yt"o!ni"om at!ie-
odnale?C na-cz9cie- posz+"i!ane elementy ser!is+. P+n"ty
starto!e po"az+-1 te3, co na stronie mo3na znale?C i zrobiC. $zi9"i
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. *&
tem+ poz!ala-1 na szyb"ie zapoznanie si9 z na-!a3nie-szymi
elementami caego ser!is+.
4ysunek @ M 2unkty startowe w serwisie www.in"bank.pl
Pzaznaczone Jtym markeremQ uatwiaj dostp do opisu
najwaniejszyc' produktJw banku.
0trona "Jwna.
L23ni si9 od innych stron ser!is+. Mo3e na nie- obo!i1zy!aC inny
system na!igacy-ny ni3 na pod0stronach.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. **
Najwaniejsze wytyczne I 2rojektowanie nawi"acji I 6este!
tutaj.
$ziaa na zasadzie Z-este t+ta-[ na mapie
Stoso!ane na-cz9cie- ! men+
4ysunek : M *ardzo dobrze wyrJniony element.

4ysunek A M +epiej byoby wyrJni tylko ostatni element.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. *)
4ysunek B M $ocno wyrJniony pierwszy poziom# ale zupeny brak
wyrJnienia dru"ie"o poziomu.
2roblemy z rozwijanym menu
$la oszcz9dzenia mie-sca cz9sto stos+-e si9 te3 men+ roz!i-ane.
6ener+-e to -edna" sporo problem2!%
@ie mo3na obe-rzeC za!artoci men+ przed "li"ni9ciem.
Zaz!ycza- s1 tr+dne do przegl1dania, z!aszcza -eli ma-1 "il"a
poziom2!.
Beli -est ?le s"onstr+o!ane, to !yst9p+-1 problemy
z dost9pnoci1.
.ysz+"i!anie z poziom+ przegl1dar"i nie b9dzie +!zgl9dniaC
opc-i men+ dost9pnych po roz!ini9ci+.
4ysunek 3 M &utorzy tej witryny nawet wyszukiwark umie!cili
w rozwijalnym menu.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. *5
Men+ roz!i-anie dos"onale spra!dza-1 si9 ! listach, np. z !yborem
"ra-+.
4ysunek D M $enu rozwijane pozwala na wy"odny wybJr kraju.
. s"lepie interneto!ym na !!!.hp.pl zastoso!ano element
na!igacy-ny nieco podobny 0 ale znacznie gorszy od roz!i-anego
men+. /by obe-rzeC cae men+ promoc-i, nale3y na!igo!aC
strzaecz"ami. Pra!dopodobnie d+3a cz9C +3yt"o!ni"2! na!et nie
za+!a3y, 3e strona ofer+-e nie ' gr+p promoc-i F!idocznych po
zaado!ani+ ser!is+G, ale a3 &). Ponad poo!a za!artoci stron nie
zostanie dobrze poznana z po!od+ ?le s"onstr+o!anego men+.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. *D
4ysunek 5 M 0trzaka przewijajca menu z promocjami jest sabo
widoczna# a cay mec'anizm jest bardzo nieintuicyjny.
4ysunek 9H M 2o klikniciu strzaki menu 2romocje pokazuje swoje
nastpne skadniki.
<cieka nawi"acyjna P!cieka powrotu# !cieka okruszkJwQ
Po"az+-e a"t+aln1 pozyc-9
Poz!ala na cofanie si9 ! str+"t+rze
@a-lepszym separatorem "ole-nych poziom2! -est zna" Z][
=3y!a- so!a Z-este t+ta-[, aby +3yt"o!ni" zroz+mia znaczenie
cie3"i
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. *'
4ysunek 99 M <cieki nawi"acyjne w bzwbk.pl oraz na &bout.com.
Najwaniejsze wytyczne I 0truktura serwisu
Prac+-esz ! dom+, chcesz "+piC dr+"ar"9. Ba"1 opc-9 !ybierzesz
! "atalog+ prod+"t2! s"lep+ interneto!ego 0 Some czy AfficeK
Najwaniejsze wytyczne I 0truktura serwisu I %ntuicyjna
struktura serwisu.
Str+"t+ra ser!is+ m+si byC zoriento!ana na +3yt"o!ni"a%
.a3ne s1 !ybory alternaty!ne. 6dy +3yt"o!ni" !idzi caoC,
at!ie- -est m+ zadecydo!aC.
=3yt"o!nicy nie !ybiera-1 optymalnie, lecz zado!ala-1 si9.
=3yt"o!nicy spiesz1 si9.
@ie ma d+3e- sz"ody, -eli si9 pomylimy.
Zamiast oceniaC !szyst"ie odnoni"i, !olimy e!. "li"n1C
!stecz, gdybymy ?le !ybrali.
@ale3y dbaC o dobranie odpo!iednie- g9bo"oci i szero"oci
men+.
Hy dobrze rozplano!aC na!igac-9, nale3y zdobyC przy"ad treci
dla "a3dego z poziom2! ser!is+.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. *;
Najwaniejsze wytyczne I 0truktura serwisu I /ase
=r+chom program JreeMind Fdo pobrania
z http%::freemind.so+rceforge.net:!i"i:indeN.php:Main^Page_$
o!nloadG
=r+chom !ybrany ser!is interneto!y
Zapisz -ego str+"t+r9 ! programie JreeMind
Postara- si9 !yr23niC blo"i str+"t+ry ser!is+, ta"ie -a"
men+ g2!ne
men+ narz9dzio!e : nag2!e"
stop"a
p+n"ty starto!e
Zapropon+- no!1 str+"t+r9 ser!is+.
@o!1 map9 ser!is+ mo3esz !y"onaC zgodnie z ni3e-
zaprezento!anym schematem.
Zapropon+- optymalny stos+ne" szero"oci do g9bo"oci
men+.
Z!r2C +!ag9 na int+icy-ne naz!y se"c-i i do"+ment2!
Postara- si9 st!orzyC dodat"o!e elementy na!igacy-ne
! postaci p+n"t2! starto!ych i innych poznanych
mechanizm2!.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. *<
4ysunek 9O M 0tara i nowa struktura serwisu WWW.
Najwaniejsze wytyczne I 2rojektowanie
wyszukiwarki
Najwaniejsze wytyczne I 2rojektowanie wyszukiwarki I
%ntuicyjna wyszukiwarka
.ysz+"i!ar"a dla +3yt"o!ni"a to%
pole te"sto!e,
przycis" z !yrazem Sz+"a-
ole-ny raz trzyma- si9 "on!enc-i Q !i9"szoC os2b posz+"+-e
so!a ZSz+"a-[, nie +3y!a- -ego mnie- pop+larnych synonim2!%
Zna-d?
Szyb"ie !ysz+"i!anie
Beli -a"o ety"iet9 blocz"a +3y!asz so!a ZSz+"a-[, to na przycis"+
mo3esz +mieciC so!o ZStart[. . =S/ -est to d+3o pop+larnie-sze
roz!i1zanie ni3 ! Polsce.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. *>
@ie trzeba -+3 ed+"o!aC +3yt"o!ni"2! te"stami typ+ Z.pisz
so!o "l+czo!e[.
=pe!ni- si9, 3e +3yt"o!ni" zna za"res !ysz+"i!ania.
$omylnie !ysz+"i!anie ! cae- !itrynie.
a3de dodat"o!e pole "onfig+rac-i !ysz+"i!ar"i mo3e spra!iaC
+3yt"o!ni"om tr+dnoci Q dobra !ysz+"i!ar"a to prosta
!ysz+"i!ar"a.
4m d+3sze pole !ysz+"i!ania, tym d+3sze zapytanie !pis+-1
+3yt"o!nicy, dzi9"i tem+ otrzym+-1 bardzie- precyzy-ne !yni"i.
Mo3li!oC filtro!ania i !ysz+"i!ania zaa!anso!anego dopiero
na stronach !yni"2!.
4ysunek 9@ M asoby &lle"ro s olbrzymie# ale wyszukiwarka jest
prosta i przejrzysta. Dopiero link RzaawansowaneS prowadzi do
rozbudowanyc' mec'anizmJw wyszukiwania.
Najwaniejsze wytyczne I &rc'itektura informacji
Pra!ido!o zastoso!ana archite"t+ra informac-i organiz+-e cay
ser!is ta", 3e bys"a!icznie !iemy, co -est !a3ne. @a-bli3sze
por2!nanie to odpo!iedni s"ad gazety.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. )(
Najwaniejsze wytyczne I &rc'itektura informacji I Dobra
arc'itektura informacji
Podziel stron9 na !yra?ne blo"i f+n"c-onalne. Poz!ala to
+3yt"o!ni"om s"+piC si9 tyl"o na tym, co dla nich !a3ne.
4m co !a3nie-sze, tym bardzie- si9 !yr23nia.
,lementy po!i1zane ze sob1 logicznie po!inny byC po!i1zane te3
! spos2b !iz+alny.
,lementy po!inny byC !iz+alnie zagnie3d3one.
Najwaniejsze wytyczne I &rc'itektura informacji I Nazwa
podMstronyL
@az!a strony po!inna docieraC do +3yt"o!ni"a -a"o%
Pod!ietlenie opc-i ! men+, ! -a"ie- -estem
.yra?na naz!a strony ! cz9ci contento!e- Fprzeznaczone- na
treCG ser!is+
@az!a strony -a"o tyt+ Q +mieszczona ! pas"+ przegl1dar"i
@az!a m+si byC zgodna z tym, co "li"n1em l+b -a" na-bardzie-
zbli3ona
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. )&
Najwaniejsze wytyczne I *udowa typowej strony

4ysunek 9: M )ypowy layout serwisu WWW.
4ysunek 9A T $akieta strony "Jwnej serwisu.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. )*
Najwaniejsze wytyczne I )est ;ru"a
Steè r+g propon+-e nast9p+-1cy test ser!is+ ...%
@iezale3nie od tego, na -a"ie- pod0stronie ser!is+ si9 zna-dziesz,
po!iniene bys"a!icznie m2c odpo!iedzieC na pytania%
Co to -est za !itryna Fidentyfi"ator !itrynyGK
@a -a"ie- -estem stronie Fnaz!a stronyGK
Ba"ie s1 g2!ne "ategorieK
Ba"ie mam opc-e do !ybor+ na tym poziomie str+"t+ryK
6dzie zna-d+-9 si9 ! odniesieni+ do cae- str+"t+ryK
. -a"i spos2b mog9 czego posz+"aCK
Najwaniejsze wytyczne I /ase.
.y"onanie test+ r+ga dla !ybrane- !itryny.
.ybierz loso!o do!oln1 stron9 interneto!1 i !ydr+"+- -1.
art"9 z !ydr+"iem trzyma- przed sob1 na odlegoC r9"i l+b
mocno zmr+3 oczy, aby nie m2g !idzieC detali.
Ta" szyb"o, -a" to mo3li!e, spr2b+- odnale?C i zaznaczyC !szyst"ie
ni3e- !ymienione elementy.
7ogo !itryny
@az!a strony
ategorie i pod"ategorie
@a!igac-a lo"alna
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ))
Aznaczenie Zt+ta- -este[
.ysz+"i!ar"9
@ast9pnie odpo!iedz na poni3sze pytania
Co to -est za !itryna Fidentyfi"ator !itrynyGK
@a -a"ie- -estem stronie Fnaz!a stronyGK
Ba"ie s1 g2!ne "ategorieK
Ba"ie mam opc-e do !ybor+ na tym poziomie str+"t+ryK
6dzie zna-d+-9 si9 ! odniesieni+ do cae- str+"t+ryK
. -a"i spos2b mog9 czego posz+"aCK
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. )5
,fektywno! serwisJw korporacyjnyc' ,fektywno! serwisJw korporacyjnyc'
,fektywno! serwisJw korporacyjnyc' I &naliza
wybranyc' serwisJw korporacyjnyc'# opracowanie
propozycji ulepszeU
,fektywno! serwisJw korporacyjnyc' I /ase
Przeanaliz+- !itryny. Ba"ie problemy rz+ca-1 Ci si9 ! oczy
! pier!sze- "ole-nociK
4ysunek 9B T www.bzwbk.pl
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. )D
9oim zdaniem g!:wne problemy z u2yteczno;ci" serwisu to:
Men+ Z=s+gi dla Ciebie[ Q trzeba prze!i-aC o"ien"o, co
+niemo3li!ia szyb"ie zapoznanie si9 z list1 +s+g.
@az!a se"c-i ! men+ g2!nym ZSome% $la Ciebie[ brzmi co
na-mnie- dzi!nie i d!+znacznie.
$la !iel+ os2b a+tomatyczne prze1czenie z g2!ne- domeny
!!!.bz!b".pl na !!!.dlaciebie.bz!b".pl nie b9dzie -asne i nie
zroz+mie-1, 3e ta" napra!d9 znale?li si9 ! se"c-i dla "lient2!
indy!id+alnych. lienci "orporacy-ny mog1 mieC po!a3ne
problemy z za+!a3eniem, 3e aby prze-C do s!o-e- se"c-i ser!is+,
m+sz1 !ybraC lin" te"sto!y na g2rze ser!is+.
@az!y g2!nych se"c-i nie!iele m2!i1, lepie-, by tego typ+
sform+o!ania byy p+n"tami starto!ymi, a men+ g2!ne, by
pozostao ! formie zbli3one- do na!igac-i znane- z innych ban"2!.
.ysz+"i!ar"a zna-d+-e si9 ! doC nietypo!ym dla nie- mie-sc+.
Zast1pienie przycis"+ ZSz+"a-[ lin"iem -est doC nietypo!e i mo3e
+tr+dniaC zroz+mienie !ysz+"i!ar"i.
@ie mo3na !r2ciC z pod0stron ser!is+ poprzez "li"ni9cie na logo.
Poda!anie daty na stronie ban"+ ! strategicznym mie-sc+
+!a3am za strat9 cenne- przestrzeni. Podobnie odbieram
przeznaczenie pra"tycznie caego !idocznego obszar+ e"ran+
! se"c-i rod"o!e- na gigantyczny banner re"lamo!y. Co gorsza
banner ten cz9sto po!tarza si9 ! innych se"c-ach g2!nych.
li"a-1c "ole-ne elementy men+ g2!nego, +3yt"o!ni" mo3e
na!et nie za+!a3yC, 3e zmienia si9 dolna cz9C strony Fbanner i
men+ prod+"to!e pozosta-1 ta"ie sameG.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. )'
4ysunek 93 M www.bat.com.pl
$oim zdaniem "Jwne problemy z uyteczno!ci serwisu
toL
Men+ g2!ne pisane ! pionie i ! dodat"+ bardzo s"ompli"o!ane
Fd+gie naz!yG. Szalenie +tr+dnia "orzystanie z ser!is+. @a
szcz9cie nieda!no men+ to zostao zmienione na +"ad poziomy.
Hardzo nieczytelna czcion"a ! men+ narz9dzio!ym na g2rze
ser!is+.
.ysz+"i!ar"a -est dost9pna na stronie g2!ne-, nie ma potrzeby
! men+ g2!nym t!orzyC osobnego odnoni"a do !ysz+"i!ar"i.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. );
Ser!is zacho!+-e si9 bardzo nietypo!o po !ybrani+ z se"c-i
narz9dzio!e- lin"+ Z4nne ryn"i[. M+simy d!a razy pot!ierdziC, 3e
rzeczy!icie chcemy prze-C na inny ser!is.
Po1czenie ! -edynym blocz"+ !ysz+"i!ar"i i men+ dziaa
dezorient+-1co. Zaz!ycza- ta"ie zesta!ienie listy roz!i-ane-
i !ysz+"i!ar"i s+3y do za!93enia !yni"2! !ysz+"i!ania. T+ta-
-edna" "a3dy z element2! dziaa niezale3nie.
Ponadto men+ ZZobacz[ za!iera przed "a3d1 opc-1 ta-emnicze
liczby.
4ysunek 9D M 0trona informuje nas# e opuszczamy serwis
www.bat.com.pl i od te"o momentu firma nie ponosi
odpowiedzialno!ci za materiay zawarte na stronac'.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. )<
4ysunek 95 M )ajemnicze liczby przed opcjami menu z pewno!ci nie
poma"aj w nawi"acji.
,fektywno! serwisJw korporacyjnyc' I
2rojektowanie i badanie strony "Jwnej serwisu
korporacyjne"o
<4 sekund to maksymalny czas skupienia uwagi przez
u2ytkownika. =owy2ej tego czasu u2ytkownicy zaczynaj" si$
zajmowa5 swoimi sprawami. (zas przej;cia pomi$dzy stronami
nie powinien przekracza5 tego czasu. >ptymalny czas to 41< 0 < s1
gdy2 wtedy przep!yw my;li nie zostaje przerwany.
*ardzo wa2ne jest1 aby czas odpowiedzi by! przewidywalny.
=obieranie stron g!:wnych najwi$kszych #irm internetowych
zabiera do <4 s.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. )>
,fektywno! serwisJw korporacyjnyc' I /ase
Zbada- szyb"oC ado!ania !ybranych stron.
FPodobne informac-e znale?C mo3na ! panel+ 4nfo przegl1dar"i
AperaG
Pobierz z adres+
http%::!!!.nils.org.a+:ais:!eb:reso+rces:toolbar:indeN.html
.eb /ccessibility Toolbar i zainstal+- go.
=r+chom 4nternet,Nplorer
.e-d? na !ybrany ser!is interneto!y
li"ni- Z$oc info 0] Page .eight:Speed[
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. 5(
Adczyta- ci93ar strony oraz czas pobierania
Z poziom+ tego samego narz9dzia mo3esz !y!oaC ta"3e Z$oc info
0] Page speed report[
$r+gie narz9dzie gener+-e peen raport, +!zgl9dnia-1c realny czas
potrzebny na zaado!anie caego ser!is+. Best zatem bardzie-
!iarygodn1, ale dziaa-1c1 !olnie- metod1
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. 5&
4ysunek OH M Wy"enerowany raport zawiera take przydatne porady.
,fektywno! serwisJw korporacyjnyc' I /o musi znaleK
si na stronie "Jwnej
To3samoC !itryny, "oncepc-a
Str+"t+ra !itryny
Co -a t+ mog9 znale?C
Co -a t+ mog9 zrobiC
/+tore"lama
Hranding mar"i i firmy
Le"lama z!artoci
Le"lama f+n"c-onalnoci
Azna"i a"t+alnoci i 3ycia
7in"i do na-cz9cie- od!iedzanych mie-sc
P+n"ty starto!e
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. 5*
Le-estrac-a, elementy b+do!ania spoecznoci itp.
,lementy b+d+-1ce za+fanie
,fektywno! serwisJw korporacyjnyc' I 6akie problemy
napotkasz projektujc stron "Jwn
a3dy chce byC na stronie g2!ne-
a3dy chce byC !idoczny bez prze!i-ania e"ran+
a3dy Fo zgrozo, na!et PrezesYG ma s!o-e zdanie na temat strony
g2!ne-, b+d+-e ona !izer+ne" firmy
M+si od!oy!aC si9 do !szyst"ich od!iedza-1cych ser!is, czasem
to bardzo zr23nico!ane gr+py
4ysunek O9 M )ylko cz! witryny wida bez konieczno!ci
przewijania# jest to szcze"Jlnie cenny obszar.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. 5)
,fektywno! serwisJw korporacyjnyc' I Na jakie pytania
musi odpowiada strona "Jwna
Co to -estK
Co oni t+ta- ma-1K
Co mog9 t+ zrobiCK
$laczego po!inienem byC t+, a nie gdzie indzie-K
,fektywno! serwisJw korporacyjnyc' I 6ak przekaza cel
witryny odwiedzajcemu
Slogan re"lamo!y
Te"st po!italny
4ysunek OO M )ekst wprowadzajcy wraz z rysunkiem pokazujcym
jak w @ krokac' skorzysta z usu" serwisu
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. 55
,fektywno! serwisJw korporacyjnyc' I wikszanie ilo!ci
informacji
Se"!ency-ne !y!ietlanie re"lam
Z mo3li!oci1 ingerenc-i +3yt"o!ni"a ! se"!enc-9 Fpoprzednia,
nast9pnaG
Lot+-1ce banner"i
,fektywno! serwisJw korporacyjnyc' I ,fekty najazdu.
$la zaoszcz9dzenia mie-sca stos+-e si9 cz9sto efe"ty polega-1ce na
!y!ietlani+ opis+ dopiero po !s"azani+ element+ "+rsorem.
6ener+-e to mn2st!o problem2!%
Sam m+sisz odsz+"aC i spra!dziC !szyst"ie potenc-alne
elementy, "t2re mog1 byC elementami men+.
. dane- ch!ili mo3esz !y!ietliC tyl"o -eden opis, nie mo3na
zatem por2!naC !szyst"ich opc-i.
@ie za!sze po-a!ia-1 si9 ! bezporednim s1siedzt!ie "+rsora,
m+simy "iero!aC !zro" raz na "+rsor, raz na opis.
@ie poz!ala-1 na ocen9 za!artoci strony bez !chodzenia
! intera"c-9.
S+ger+-9 od!r2cenie syt+ac-i Q czytelne men+ te"sto!e, po
!s"azani+ element+ men+ +r+chamia si9 -a"a intera"c-a l+b
po-a!ia element graficzny.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. 5D
4ysunek O@ M /ae menu ukryte jest pod niepozornymi kropeczkami
po prawej na dole# dopiero po wskazaniu kropeczki kursorem
pokazuje si jej opis.
4ysunek O: M adanie dla domy!lnyc'V najdK menu na tym zarzucie
ekranu. $enu ukryte zostao pod kwadracikami obok nutki. Nutka
i kwadraciki su"eruj# e ten element suy do kontroli "o!no!ci.
Niestety pod tym niepozornym elementem znajduje si cae menu
serwisu.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. 5'
2rojektowanie !cieek nawi"acyjnyc'
Ba" po!inien zacho!aC si9 +3yt"o!ni" ! ser!isie ...
Po co przychodziK
@a -a"ich stronach "oIczy na!igac-9K
,fektywno! serwisJw korporacyjnyc' I ,fektywne
pisanie dla %nternetu
(zytanie z ekran:w komputera jest oko!o ?)' wolniejsze od
czytania z papieru.
,fektywno! serwisJw korporacyjnyc' I ,fektywne pisanie
dla %nternetu I 0kuteczny w %nternecie tekst
D(T te"st+ mnie- ni3 na papierze.
Stos+- zasad9 od!r2cone- piramidy Q od og2+ do szczeg2+.
A zasadzie od!r2cone- piramidy przeczytasz na
http%::!!!.+seit.com:alertboN:>'('.html .
Mnie- s2! oznacza, 3e
-est mnie- chaos+ na stronie,
treci +3yteczne s1 lepie- !idoczne,
nie trzeba prze!i-aC stron.
ieps"ie leady Fza-a!"i, !pro!adzenia do te"st+G to strata czas+
i mie-sca Q -eli te"st nie prze"az+-e przydatnych informac-i, nie
-est dobrym leadem na stron9 !!!.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. 5;
Pisanie instr+"c-i obs+gi do stron mi-a si9 z celem, ser!is
po!inien sam si9 !y-aniaC. Aczy!icie nie"iedy instr+"c-a -est
!ymagana dla b+do!ania za+fania l+b ze !zgl9d+ na zgodnoC
z pra!em, ale s"orzysta z nie- bardzo mao +3yt"o!ni"2!.
.y"orzysta- str+"t+r9 STM7
S& a S;,
/7T,
T4T7,.
.e? pod +!ag9 S,A FSearch ,ngine Aptimization Q
Aptymalizac-a dla !ysz+"i!are"G.
@asycenie so!ami "l+czo!ymi
Sp2-noC tyt++, metatatag2! i treci.
&2ytkownicy sur#uj"cy po @ieci1 gdy zatrzymuj" si$ by czyta51
czuj" si$ mniej produktywni. ie s" sk!onni po;wieci5 na czytanie
tyle samo czasu1 co na czytanie wersji papierowej tekstu.
*udowanie zaufania do serwisu.
\at!a !eryfi"ac-a obie"ty!noci informac-i Q zamieszcza- lin"i do
materia2! ?r2do!ych, przypisy, bibliografie. Po!o+- si9 na
obie"ty!ne badania i organizac-e. @a!et -eli +3yt"o!ni" nie
spra!dzi !szyst"ich lin"2!, to istnienie ich oraz to, 3e nie boisz
si9 !eryfi"ac-i danych zb+d+-e pozyty!ny obraz ser!is+.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. 5<
Jirma z "r!i i "oci Q czasem na!et d+3e organizac-e mog1 nie
byC znane !szyst"im +3yt"o!ni"om Sieci. .arto pod"relaC, 3e
ser!is -est tyl"o odbiciem istnie-1ce- organizac-i. ,lementy
przydatne ! tym procesie to poda!ania adres2! bi+r oraz os2b
"onta"to!ych F-eszcze lepie-, -eli ze zd-9ciemG.
Po!i1zania ryn"o!e Q firma, "t2ra dziaa poza ryn"iem, nie b+dzi
za+fania, !arto -est napisaC, -a"ich "lient2! si9 obs+g+-e, do
-a"ich organizac-i nale3y. .szyst"ie te elementy +mie-sco!i1
! oczach "lienta T!o-1 firm9 gdzie na mapie po!i1zaI
bizneso!ych. Cz9sto tego typ+ informac-e poz!ala-1 te3
bys"a!icznie oceniC "liento!i, czy rozmiar biznes+, -a"i pro!adzi
T!o-a firma, -est odpo!iedni do tego "ogo posz+"+-e.
7+dzie Q pod"relanie roli praco!ni"2! firmy, listo!anie
"l+czo!ych os2b !raz z "r2t"im opisem i "onta"tem oraz
po"azy!anie !iat+ profes-onalizm+ s!ych praco!ni"2!
i e"spert2! pra!ie za!sze b+d+-e pozyty!ny obraz firmy. .arto
pod"reliC pro-e"ty z!i1zane z roz!o-em praco!ni"2! oraz
polity"1 odpo!iedzialnoci spoeczne-. $obrym pomysem mo3e
byC zach9cenie "l+czo!ych os2b do b+do!ania !izer+n"+ firmy
poprzez pro!adzenie bloga. Hlog .eb+sability.pl, przy cae-
obie"ty!noci -a"1 staram si9 zacho!aC, s"iero!a "il"a os2b do
Banmedia. Po prost+ l+dzie ci chcieli do!iedzieC si9, gdzie prac+-9.
Beli masz l+dzi, "t2rzy zna-1 si9 na rzeczy i l+bi1 pisaC, postara-
si9 !y"orzystaC ten potenc-a.
\at!y "onta"t Q mo3li!oC r23norodnego i !ygodnego "onta"t+
-est dla +3yt"o!ni"2! "ole-nym sygnaem, 3e firma -est ot!arta
na ich potrzeby. Szczeg2lnie tam, gdzie "lienci mog1 ocze"i!aC
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. 5>
!sparcia, szalenie istotne -est e"spono!anie at!oci na!i1zania
"onta"t+.
Profes-onalny !ygl1d Q bardzo !iel+ +3yt"o!ni"2! do !st9pne-
sele"c-i znalezionych ! Sieci ser!is2! +3y!a "ryteri+m
estetycznego. Aczy!icie to ponie"1d spra!a g+st+, -edna"3e
pra"tycznie "a3dy szyb"o odr23ni dobry, starannie i do"adnie
!y"onany layo+t od nieprofes-onalnego pro-e"t+ graficznego.
.arto te3 pami9taC, 3e layo+t o !yra?nie przestarzaym !ygl1dzie
b9dzie b+do!a ta"i sam obraz firmy ! oczach "lienta. .arto
zatem raz na *0) lata od!ie3aC layo+t ser!is+. Z!aszcza 3e
obecnie dzi9"i oddzieleni+ !arst!y treci od !arst!y prezentac-i
zmiana szaty graficzne- nie !i13e si9 z ta" d+3ymi !ydat"ami -a"
"iedy.
/"t+alnoC informac-i Q na-prostsza i spra!ia-1ca "lientom
na-!i9ce- problem2! !ytyczna. T!orz1c ser!is ... nale3y
zastano!iC si9 realnie, ile czas+ b9dzie mo3na po!i9caC na -ego
a"t+alizac-9. $opiero po tym +staleni+ nale3y plano!aC
f+n"c-onalnoci ser!is+. $zi9"i tem+ +ni"niecie st!orzenia
dzia2! i f+n"c-onalnoci !ymaga-1ce- zbyt !iele !ysi"+
! a"t+alizac-i. . ofertach, -a"ie t!orz9 dla "lient2!, ten element
!pis+-9 do se"c-i banaliza ryzy"a[
Astro3nie z re"lamami Q zbyt d+3a iloC re"lam s"+tecznie +tr+dni
b+do!anie za+fania do ser!is+. Mo3e byC bardzo tr+dno nam2!iC
+3yt"o!ni"2! do pren+meraty ne!slettera, -eli z iloci re"lam na
stronie !y!nios"+-1, 3e firma zale-e ich spamem.
=ni"a- b9d2! Q liter2!"i, b9dy ortograficzne i poamane lin"i
mog1 zniszczyC b+do!ane ta" starannie za+fanie do ser!is+.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. D(
Metodyczne pode-cie do problem+ po!inno polegaC na +3y!ani+
oprogramo!ania CMS, !spiera-1cego prac9 gr+po!1, gdzie "a3dy
p+bli"o!any te"st mo3e zostaC spra!dzony przez "ore"tora.
Po!inno si9 t!orzyC te3 repozytori+m pli"2! i lin"2!, aby nie
trzeba byo za "a3dym razem !pisy!aC ich r9cznie.
/de"!atna domena Q oczy!iste -est, 3e im lepszy adres ma firma,
tym !i9"szym za+faniem si9 cieszy. . Sieci pra!o to nadal
obo!i1z+-e. @ale3y !ybraC prost1 do zapami9tania domen9
i !zi1C pod +!ag9 szereg dodat"o!ych czynni"2! Q ot choCby, czy
dy"to!anie -e- przez telefon nie b9dzie problematyczne. Ba"o
niepisany standard przy-m+-e si9 za"adanie domen bez
mylni"2! ani pod"releI. .anie ! ten spos2b T!o-1 firm9
b9dzie sz+"ao na-!i9ce- interan+t2!. Jirmy o d+gie- naz!ie
mog1 roz!a3yC !y"+pienie domeny z pen1 naz!1 oraz z naz!1
s"r2con1 dla os2b, "t2re s1 bli3e- z!i1zane z firm1 i zapami9ta-1
ta"i s"r2cony adres.
$obre pozyc-e ! !ysz+"i!ar"ach Q ta"3e !iadcz1 ! oczach
interan+t2! o -a"oci ser!is+. . gr+ncie rzeczy ta" -est 0 tyl"o
dobrze !y"onane strony z cie"a!1 treci1 mog1 znale?C si9
!yso"o ! ran"ingach coraz inteligentnie-szych !ysz+"i!are".
.arto zadbaC o to, by strona bya s"onstr+o!ana ! spos2b
zape!nia-1cy dobr1 !sp2prac9 z !ysz+"i!ar"ami.
ZgodnoC z pra!em i standardami 0 -ednym z "l+czo!ych
element2! b+do!ania za+fania do ser!is+ -est zgodnoC
z pra!em oraz standardami. . Polsce pra!o na"az+-e mi9dzy
innymi, 3e -eli zbierasz dane o +3yt"o!ni"ach, po!iniene
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. D&
zare-estro!aC si9 ! 64A$A, -eli pro!adzisz ser!is administrac-i
p+bliczne-, po!inien on byC dost9pny dla niepenospra!nych.
=3yt"o!nicy docenia-1 te3 zgodnoC ze standardami popra!noci
"od+ oraz popra!ne !y!ietlanie ser!is+ !e !szyst"ich
przegl1dar"ach. .arto po!i9ciC ch!il9 na odpo!iednie testy.
Popra!noC "od+ spra!dziC mo3na narz9dziem
http%::àlidator.!).org.
,fektywno! serwisJw korporacyjnyc' I 6ak
po"odzi multimedia i .las' z wytycznymi
usabilityW
4nformo!aC o !iel"oci pli"2! i czasie ado!ania
4nformo!aC o post9pie ! pobierani+
Za!sze +dost9pnia- podgl1d danego pli"+ m+ltimedialnego, "t2ry
zach9ci +3yt"o!ni"a do pobrania odpo!iedniego de"odera,
!tycz"i, ...
Staropols"ie przyso!ie m2!i o tym, 3e na-bezpiecznie- -est
+3y!aC !tycze" i m+ltimedi2! o -edn1 !ers-9 starszych od
na-no!szych.
Zastan2! si9 nad dost9pnoci1 t!orzonych m+ltimedi2!.
$ost9pnoC "lip2! ìdeo dla g+choniemych 0 napisy
=3yt"o!nicy niena!idz1 por+sza-1cego si9 te"st+ typ+
Ztamoci1g[. 6eneralnie +!a3a-1, 3e nie niesie on nigdy !a3ne-
treci i nie czyta-1 go z zasady.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. D*
=3yt"o!nicy niena!idz1 m+zy"i na stronach .... $?!i9"i
!sp2gra-1ce z interfe-sem s1 d+3o lepie- odbierane.
@a!igac-a )$ nie -est pop+larna Fil+ z .as ma pra!o -azdy, a il+
licenc-9 pilotaKG. Pra!ie za!sze efe"ty!nie-sze s1 mechanizmy
na!igacy-ne oparte na *$.
=ni"a- nalado!ania !iata rzeczy!istego, na!igac-a
interneto!a -est przecie3 !ygodnie-sza Fnp. bys"a!iczne
Zprzenoszenie si9[ dzi9"i lin"omG.
4ysunek OA M 0earc'0capes# 'ttpLIIsearc'scapes.net# trJjwymiarowa
mapa informacyjna $an'attanu.
*ardzo ciekawy eksperyment# ale codzienna nawi"acja w takim
serwisie byaby udrk.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. D)
4ysunek OB M etlumacz.pl# niestety 'aso o szanowaniu klienta
rozmija si z... nawi"acj# ktJra nie pozwala na dotarcie
do informacji.
,fektywno! serwisJw korporacyjnyc' I 4eklama
i marketin" a usability. jawisko bannerMblindness
Adnoni"i re"lamo!e po!inny pro!adziC na "on"retne pod0
strony. *(0)(T +3yt"o!ni"2! !cis"a .stecz, gdy po "li"ni9ci+
odnoni"a dosta-1 stron9 g2!n1.
Z-a!is"iem szczeg2lnie niebezpiecznym -est Zbanner blindness[ Q
+3yt"o!nicy pod!iadomie filtr+-1 !szyst"ie prze"azy zbli3one
rozmiarem i zacho!aniem do re"lam. Parado"salnie 0 im bardzie-
"rzy"li!y i r+chomy -est element graficzny, tym !i9"sza szansa, 3e
nie zostanie ! og2le !iadomie zare-estro!any.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. D5
,fektywno! e/ommerce ,fektywno! e/ommerce
,fektywno! e/ommerce I Csability w systemie
e/ommerce
4ysunek O3 M 2rzykad sklepu )rpros.com pokazuje# jak dodanie
dodatkowyc' kanaJw skadania zamJwieU zwiksza sprzeda.
,fektywno! e/ommerce I /o decyduje o sukcesie
e/ommerce M *arnesXNoble Y0 &mazon# ,mpik Y0
$erlin
,fektywno! e/ommerce I 0ukces &mazon
Start ! &>>5 ro"+ -a"o "si9garnia interneto!a. Zao3ycielem -est
Beff Hezos
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. DD
cadna "si9garnia rzeczy!ista nie pomieci ta"iego !ybor+
tyt+2! co s"lep interneto!y.
Lozpocz9cie sprzeda3y ! &>>D.
Technologia & clic"
.e-cie na gied9 ! &>>;.
Pier!szy zys" ! *((*.
,fektywno! e/ommerce I 0ukces $erlin
Lozpocz9cie sprzeda3y ! &>>< -a"o Zpols"i odpo!iedni" /mazon[
Pier!szy zys" ! *(()
,fektywno! e/ommerce I /zynniki sukcesu eMcommerce
4ysunek OD M Wyniki sondy Dlacze"o korzystasz z dane"o sklepu
internetowe"o.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. D'
,fektywno! e/ommerce I $etody pomiaru
efektywno!ci e/ommerce. WspJczynnik
porzuceU koszyka
Ba" obliczaC !sp2czynni" porz+ceI "oszy"aK
$laczego +3yt"o!nicy porz+ca-1 "oszy"iK
)DT 0 dodat"o!e "oszty zam2!ienia, d+gi o"res ocze"i!ania
)DT 0 proces s"adania zam2!ienia !ymaga podania zbyt !iel+
informac-i
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. D;
4ysunek O5 M &mazon.com nadal przez wielu uwaany jest za sklep
wytyczajcy standardy usability
,fektywno! e/ommerce I $inimalizacja
wspJczynnika porzuceU koszyka
=praszczanie proces+ sprzeda3o!ego
H+do!ania za+fania
Adpo!iadanie na pytania +3yt"o!ni"2!
iedy dosta!aK
4le "oszt+-e dosta!aK
Czy mog9 to z!r2ciCK
Ba" dziaa g!aranc-aK
Czy s1 -a"ie dodat"o!e "osztyK
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. D<
4ysunek @H M 2roces sprzedaowy w sklepie www.eMlady.pl
,fektywno! e/ommerce I wikszamy usability
katalo"u produktJw# koszyka i procesu zamawiania
,fektywno! e/ommerce I Dobre przykady
4ysunek @9 M 2akowanie ozdobne "ratis
4ysunek @O M Darmowa dostawa ju od ..
Za
konto
Id do kasy
dalej
Kupuj dalej
Dodaj do koszyka Zarejestrowani klienci
Niezarejestro
wani kliecni
Wylij zawienie
wstecz
wstecz
Identy!ikacja
uytkownika
"
e
j e
s
t r u
j
D
a
le
j
Dalej
#odzikowanie
$%ail
i &aso
'wj koszyk
(zcze)y
zawienia
#odsuowanie
*ista produktw
"ejestracja
uytkownika
$%ail
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. D>
@ale3y +t!orzyC dobrze !idoczny dzia z informac-ami
administracy-nymi. Po!inien on odpo!iadaC na !szyst"ie pytania
+3yt"o!ni"2! oraz za!ieraC !szel"ie informac-e !ymagane przez
pra!o.
4ysunek @@ M 4ozbudowana stopka serwisu po!wicona sprawom
administracyjnym
Mo3na dodaC mechanizm mar"eting+ !ir+so!ego FpoleC
zna-omem+G odnosz1cy si9 bezporednio do prod+"t+ F!s"azanie
prod+"t+ ! "atalog+G.
Z!r2cenie +!agi na mo3li!oC bys"a!iczne- dosta!y.
4ysunek @: M 0zybka dostawa oraz mec'anizm polecania produktu
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. '(
$odanie "ategorii ceno!ych. $o zrobienia za"+p2! zach9ca-1
"ategorie typ+ Zdo &(( z[, Zdo )(( z[

4ysunek @A M 0pecjalne kate"orie M cena do...
/+tomatyczne !y"ry!anie !czenie- zalogo!anego +3yt"o!ni"a
Fnp. coo"iesG.
4ysunek @B M 0tandardowe lo"owanie do sklepu
Mo3li!oC zo3enia zam2!ienia faNem l+b mailem.
4ysunek @3 M J zamJwienie mailem lub faZem
St!orzenie "ategorii +mo3li!ia-1cych "+po!anie !ed+g
"ryteri2! l+?nie-szego typ+.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. '&
4ysunek @D M ;upowanie Ns'op by styleN
Hardzo prosta, +mieszczona ! standardo!ym mie-sc+
!ysz+"i!ar"a
4ysunek @5 M 2rosta wyszukiwarka
$oradzanie ! za"+pach Q mo3li!oC "ons+ltac-i podczas za"+p2!
przez telefon:s"ype:gg oraz mo3li!oC zo3enia zam2!ienia
te"sto!ego na !st9pne !ysz+"anie prod+"t2!.
4ysunek :H M 2ersonal s'oppin" M doradca klienta
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. '*
Apinie, referenc-e "lient2! zado!olonych z za"+p2! zna"omicie
z!i9"sza-1 efe"ty!noC b+do!ania za+fania do ser!is+.
4ysunek :9 M 2ozytywne opinie klientJw
.szyst"ie elementy prod+"to!e, ta"3e bannery F! tym bannery
na ser!isach ze!n9trznychG po!inny posiadaC ceny. =3yt"o!ni"
-est zbyt leni!y, aby "li"aC tyl"o po to, by spra!dziC cen9.
4ysunek :O M ;ady element produktowy wy!wietlany wraz z cen
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ')
$odanie przecho!alni prod+"t2! l+b f+n"c-onalnoci typ+ [lista
do por2!nania[ poz!oli s!obodnie por+szaC si9 po s"lepie
+at!ia-1c finalny !yb2r pomi9dzy "il"oma !ybranymi
prod+"tami.
6!aranc-a z!rot+ oraz informac-e dotycz1ce !ar+n"2!
zam2!ienia +mieszczone ! pier!szym "ro"+ "oszy"a zach9ca-1
do "ontyn+o!ania za"+p2!.
4ysunek :@ M Ewarancja zwrotu w 9 kroku koszyka
$odanie mo3li!oci !ysta!iania ocen i recenz-i prod+"t2! mo3e
znacz1co podnieC poziom za+fania do caego s"lep+ oraz zach9ciC
niezdecydo!anych do za"+p+. 4stnie-e !tedy mo3li!oC
+t!orzenia "ategorii Z@a-lepie- ocenione[
4ysunek :: M ;omentarze do produktJw
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. '5
6dzie -est mo-a pacz"aK orzysta-1c z firm "+riers"ich mamy
mo3li!oC pobierania od nich z!rotnych informac-i dotycz1cych
tego, gdzie zna-d+-e si9 przesy"a. 4nformac-e ta"ie moglibymy
!y!ietlaC +3yt"o!ni"o!i po zalogo!ani+. Hyby to !yr23ni"
ser!is+ F-eszcze !iele s"lep2! nie "orzysta z te- opc-iG, b+d+-1cy
za+fanie oraz zach9ca-1cy do logo!ania si9 ! s"lepie.
,fektywno! e/ommerce I *udujemy zaufanie
uytkownikJw do sklepu
Adpo!iednia domena
Z !!!. i bez !!!.
.iel+ +3yt"o!ni"2! zgad+-e adres
Profes-onalna grafi"a bez !1tpienia b+d+-e za+fanie do ser!is+.
Zbieranie danych%
ZgodnoC z pra!em
laro!ne o"relenie, do -a"ich cel2! potrzeb+-emy danych
4ysunek :A M Nie kady sklep oferuje podstawowe metody
budowania zaufania# PcQ OHH: 6anmedia.pl
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. 'D
,fektywno! e/ommerce I 0ymulacja wpywu
usability na zyski sklepu internetowe"o
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ''
Dostpno! Dostpno!
Dostpno! I ;to i kiedy dyskryminuje klientJw
Dostpno! I Erupy uytkownikJw oczekujce pomocy
Starsi
@ie!idomi
@iedo!idz1cy
$altonici
=3yt"o!nicy platform mobilnych
Mnie- pop+larne przegl1dar"i
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ';
Dostpno! I Dostpno! jako inicjatywa
./4 Q .eb /ccessibility 4nitiatiè
$yre"ty!a =nii ,+rope-s"ie- e,+rope *((*
=sta!a o $ost9pie do 4nformac-i P+bliczne-
.ymagania Section D(< ! =S/
Dostpno! I EJwne zasady
orzysta- z STM7 -a"o zapis+ treci.
orzysta- z CSS do formato!ania treci.
Stos+- parametry /7T, T4T7,
4ysunek :B M $Jj serwis www.webusability.pl w wersji "raficznej
pozwala na powikszanie czcionek.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. '<
4ysunek :3 M )ak wy"lda strona webusability.pl w trybie tekstowym
w -pera
4ysunek :D M )ak natomiast serwis wy"lda w tekstowej
prze"ldarce +ynZ
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. '>
4ysunek :5 M 0erwis *%2 ;oncernu ,ner"a EdaUsk jest dostpny dla
niepenosprawnyc'# ;oncern ten fakt postrze"a take jako element
budowania prestiu firmy.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ;(
Dostpno! I 2oznajemy opro"ramowanie typu
screenMreader dla uytkownikJw niewidomyc'
Aemo aplikacji udBwi$kawiaj"cej 0 6*9 Come =age Deader mo2na
pobra5 ze stron
http://www03.ibm.com/able/dwnlds/indeE.html
Dostpno! I /ase
=r+chom program 4HM Somepage Leader
.pisz adres ser!is+
@a!ig+- za pomoc1 strzae" Fprzes+!anie po do"+mencieG i spac-i
F!e-cie ! lin"G
4ysunek AH M W dolnym okienku widok tekstowy strony.
Na je"o podstawie pro"ram udKwikawia serwis.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ;&
ie daj si$ nabra5F a rynku istniej" #irmy tworz"ce
oprogramowanie1 kt:re umo2liwia udBwi$kawianie serwisu
dopiero gdy u2ytkownik pobierze specjalny program. Aost$pno;5
polega5 powinna na tworzeniu dost$pnych stron nie za; lokalnych
standard:w. Gadna zewn$trzna aplikacja nie sprawi1 2e tw:j
serwis b$dzie dost$pny dla os:b u2ywaj"cych swoich
sprawdzonych screenreader:w.
Dostpno! I )estujemy dostpno! serwisu dla
niepenosprawnyc'
Hutomatyczne testy dost$pno;ci serwisu przeprowadzi5 mo2esz za
pomoc" narz$dzia
http://www.contentIuality.com .
Dostpno! I /ase
.e-d? na ser!is http%::!!!.contentd+ality.com
.ypeni- form+larz, poda-1c adres ser!is+ do przetesto!ania.
.ybierz podsta!o!y stopieI dost9pnoci F.C/6 Q Priority &,
inacze- pisz1c ./40/G
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ;*
4ysunek A9 M 2odaj stron# ktJra ma zosta przetestowana i
dowiedz si# czy jest dostpna.
Atrzymasz raport z !yni"ami test+. .alidator !yszczeg2lni
elementy, "t2re nie s1 zgodne z !ymaganiami .C/6.
4ysunek AO T Niestety serwis webusability.pl te ma jeszcze drobne
problemy z dostpno!ci.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ;)
Dostpno! I )estujemy serwis WWW na rJnyc'
platformac'
Sym+lator przegl1dar"i ... telefon+ "om2r"o!ego Q Apen!aè,
pobraC mo3na z adres+%
http%::deèloper.open!aè.com:d`l:toolsând^sd":
Dostpno! I /ase
=r+chom program Apen!aè
.pisz adres ser!is+ i na!ig+- po nim spra!dza-1c, czy zacho!+-e
si9 popra!nie.
4ysunek A@ M 0ymulator -penwa(e.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ;5
=od adresem
http://www.opera.com/products/mobile/operamini/demo.dml
znajdziesz symulator przegl"darki >pera 9ini1 kt:ra jest cz$sto
stosowana w urz"dzeniach mobilnych.
Dostpno! I /ase
At!2rz adres
http%::!!!.opera.com:prod+cts:mobile:operamini:demo.dml
.pisz adres ser!is+ i na!ig+- po nim spra!dza-1c, czy zacho!+-e
si9 popra!nie.
4ysunek A: M 0ymulator prze"ldarki -pera$ini dostpny
z poziomu WWW
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ;D
Dostpno! I /ase
=r+chom przegl1dar"9 Apera Fdo pobrania
z http%::!!!.opera.com:G
.pisz adres ser!is+
=3y- opc-i Mie!0Style0=ser mode, a nast9pnie Mie!0Style0,m+late
teNt bro!er aby zobaczyC -a" ser!is !ygl1da ! !ers-i te"sto!e-
Dostpno! I ;anay 400 jako nowy !rodek
komunikacji
ana LSS -a"o pod0standard eM7
LSS zape!nia szyb"1 dystryb+c-9 informac-i
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ;'
4ysunek AA M &plikacja 400 infoinfo firmy Net24 pozwala na
efektywne zarzdzanie du ilo!ci kanaJw 400 oraz arc'iwizacj
wybranyc' wpisJw.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ;;
*adanie usability *adanie usability
*adanie usability I )ypy badaU usability
*adanie usability I )esty funkcjonalno!ci a testy "rupowe
Testy gr+po!e Testy f+n"c-onalnoci
@ie!iel"a gr+pa os2b Po-edynczy +3yt"o!ni"
=czestnicy reag+-1 na "oncepc-e i pro-e"ty,
"t2re im si9 przedsta!ia
Prosi si9 +3yt"o!ni"a o o"relenie, co
to -est, do czego s+3y l+b aby +3y
dane- rzeczy
$obre do szyb"iego +zys"ania pr2be"
opinii i odcz+C +3yt"o!ni"2!. @ada-1 si9
do spra!dzenia ocze"i!aI odbiorc2!,
o"relenia ich potrzeb. Poz!ala-1 oceniC
pomys na bazie, "t2rego po!staC ma
!itryna. Mo3na spra!dziC te3
!y"orzysty!ane ! !itrynie so!nict!o.
Spra!dzenie czy !itryna f+n"c-on+-e
popra!nie i o"relenie, na -a"ie
problemy napoty"a +3yt"o!ni".
.y"ony!ane na pocz1t"+ proces+
t!orzenia ser!is+.
.y"ony!ane na "oIc+ proces+
t!orzenia ser!is+.
*adanie usability I )estowanie
Pro-e"tant nie -est ! stanie spo-rzeC na !itryn9 -a" -e- +3yt"o!ni".
4m cz9cie- test+-esz, tym mnie-sze "oszty, szybcie- !y"ry!asz
problemy +3yt"o!ni"2!.
oniecznoC zatr+dnienia reprezentaty!ne- gr+py +3yt"o!ni"2!
nie -est ta" istotna, -a" mogoby si9 !yda!aC. .i9"szoC os2b
! ten sam spos2b postrzega ser!isy ... i ma podobne
problemy.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ;<
*adanie usability I NiektJre metody i narzdzia
badawcze
*adanie usability I -cena 'eurystyczna
/nality" ocenia ser!is pod "1tem zgodnoci z !ytycznymi
+sability
/nality" ocenia int+icy-noC ser!is+
Po!sta-e raport
*adanie usability I 0ortowanie kart
Przydatne do "onstr+o!ania str+"t+ry ser!is+
=3yt"o!nicy gr+p+-1 "art"i z zapisanymi opc-ami
*adanie usability I &naliza ;+$
Szaco!anie !yda-noci interfe-s+
$e"ompozyc-a zadania na proste czynnoci
@acini9cie "la!isza
Przemieszczenie "+rsora
Przypomnienie sobie hasa
...
Abliczenie czas+ cae- operac-i +mo3li!ia por2!nanie -+3 na
etapie pro-e"to!ania ma"iet.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ;>
*adanie usability I *adania eyeMtrackin"
,ye0trac"er 0 +rz1dzenie bada-1ce r+ch gae" ocznych
+3yt"o!ni"a
4ysunek AB M ;olejne zarejestrowane fiksacje
4ysunek A3 M Wizualizacja czasu po!wicone"o na o"ldanie
poszcze"Jlnyc' elementJw serwisu
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. <(
*adanie usability I *adania userMeZperience
=3yt"o!ni" proszony -est o !y"onanie zadaI
Zapis+-emy -a" -e !y"on+-e i gdzie napoty"a problemy
*adanie usability I 2rojektowanie badania
userMeZperience
*adanie usability I %lu uytkownikJw powinno bra udzia
w testac'W
Pier!si +3yt"o!nicy zaz!ycza- od"ry!a-1 na-!i9ce- b9d2!.
Ba"ob @ielsen i Tom 7anda+er !y"azali, 3e testo!anie
z D +3yt"o!ni"ami poz!ala na !y"rycie <DT problem2!
dotycz1cych f+n"c-onalnoci !itryn. Zatr+dnianie !i9"sze- iloci
+3yt"o!ni"2! nie g!arant+-e linio!ego !zrost+ liczny !y"rytych
b9d2!.
Zamiast -ednego test+ z < +3yt"o!ni"ami lepie- przepro!adziC
d!ie t+ry test2! z ) +3yt"o!ni"ami. @a-cz9cie- d+3e b9d+
zasania-1 te mnie-sze i dopiero +s+ni9cie ich i przepro!adzeni
dr+gie- t+ry poz!ala na od"rycie mnie-szych b9d2!.
. tecie bierze +dzia ta"3e osoba przepro!adza-1ca test
i obser!ator.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. <&
*adanie usability I ;o"o i jak rekrutowa do testJwW
Pr2b+- znale?C +3yt"o!ni"2! zbli3onych do gr+py docelo!e-.
.ynagrodzenie dla testo!ych +3yt"o!ni"2!, D(0&(( z.
@ie rozma!ia- o za!artoci !itryny z re"r+to!anymi osobami.
*adanie usability I )ypy testJw userMeZperience
Zroz+mieC !itryn9 Q po"az+-esz !itryn9 +3yt"o!ni"o!i,
a nast9pnie spra!dzasz, czy zroz+mieli spos2b zorganizo!ania
informac-i, na!igac-9 i "oncepc-9 !itryny
.y"onanie czynnoci Q +3yt"o!ni" prac+-e z ser!isem
Zadania zam"ni9te
Zadania ot!arte
*adanie usability I 6ak testowaW
@a-pier! spr2b+- samodzielnie !y"onaC zadania testo!e.
H1d? +prze-my i dba- o pocz+cie !asne- !artoci +3yt"o!ni"2!.
Test+-esz strony, nie l+dzi.
Zach9ca- do gonego mylenia.
Beli nie !iesz, co myli +3yt"o!ni" Q zapyta- o to.
@ie +dziela- !s"az2!e" dotycz1cych tego, -a" ma-1 post9po!aC.
.yda!a- proste i "laro!ne polecenia.
Hezporednio po ses-i r2b notat"i.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. <*
=przed? +3yt"o!ni"a, 3e%
H9dzie nagry!any
@ie b9dziesz ! tra"cie test+ odpo!iadaC na -ego pytania
.ynagrodzenie nie zale3y od !yni"+ test2!
*adanie usability I <rodki tec'niczne podczas badania
userMeZperience
amera ìdeo
Program nagry!a-1cy to, co dzie-e si9 na p+lpicie l+b dr+ga
"amera
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. <)
2rojektowanie z"odne z usability 2rojektowanie z"odne z usability
2rojektowanie z"odne z usability I ,tapy analizy
usability w 'armono"ramie i budecie projektu
4ysunek AD M 2rojekty interaktywne czsto prowadzone s w sposJb
zbliony do metodyki 4C2 P'ttpLIIen.wikipedia.or"IwikiI4C2Q#
zakada ona testowanie kolejnyc' wersje serwisu i dziki temu
minimalizuje koszty zmian.# rys. %*$
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. <5
2rojektowanie z"odne z usability I 2roces tworzenia
serwisu
Pogr+biono !szyst"ie elementy proces+ gdzie ! pracach bior1 +dzia
analitycy +sability.
=stalenie !ymagaI sta!ianych ser!iso!i, model biznes+
-pracowanie i sporzdzanie scenariuszy postpowania
uytkownika# ustalenie "rup docelowyc' serwisu
2rojektowanie zawarto!ci
)worzenie struktury serwisu i opis funkcjonalno!ci
)worzenie makiet funkcjonalnyc' strony "Jwnej
i kluczowyc' podMstron
Weryfikacja dokumentu produkcyjne"o
Pro-e"to!anie graficzne
)estowanie projektJw "raficznyc'
Pro-e"to!anie graficzne
)estowanie projektJw "raficznyc'
.dro3enie & !ers-i ser!is+
)estowanie
.dro3enie * !ers-i ser!is+
)estowanie
=r+chomienie finalne- !ers-i ser!is+
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. <D
>becnie coraz cz$;ciej publiczne prezentowane s" ju2 serwisy
w p:Bnej wersji testowej. Takie podej;cie zak!ada wsp:lne
testowanie serwisu z u2ytkownikami. Ten trend wyst$puje cz$sto
w serwisach typu %eb ?.4 (opartych na spo!eczno;ci i in#ormacji).
=odej;cie to jest nastawione na zbieranie uwag od u2ytkownik:w
co powinno skutkowa5 lepszym usability #inalnego produktu.
4ysunek A5 M Na uruc'omienie serwisu w wersji beta
zdecydowaa si %nteria. 0erwis znajomi.interia.pl jest serwisem
spoeczno!ciowym# bardzo rozsdne jest zatem wczesne zbieranie
opinii uytkownikJw.
2rojektowanie z"odne z usability I espJ
Lola Za"res obo!i1z"2!
Pro-ect manager Adpo!iedzialny za "oordynac-9 prac, b+d3et i
harmonogram.
/nality" Pro-e"t+-e zao3enia ser!is+, str+"t+r9 i archite"t+r9
informac-i. T!orzy pro-e"ty f+n"c-onalne.
6rafi" Pro-e"t+-e grafi"9, !sp2prac+-e nad "oncepc-1
mar"etingo!1 ser!is+.
.ebmaster Prze"sztaca pro-e"ty graficzne do format+ STM7.
Programista .dra3a system zarz1dzania treci1, t!orzy dedy"o!ane
f+n"c-onalnoci.
Leda"tor Przygoto!+-e i !pro!adza treC do ser!is+.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. <'
2rojektowanie z"odne z usability I 2rojektowanie
struktury serwisu
2rojektowanie z"odne z usability I /ase
orzysta-1c z program+ JreeMind st!2rz map9 str+"t+ry ser!is+
"orporacy-nego. Mo3esz !zoro!aC si9 na za!artoci istnie-1cego
!ybranego ser!is+ ....
makiet funkcjonalnyc' strony "Jwnej
orzysta-1c z pli"+ C!iczenio!ego +t!2rz ! programie
Presentation l+b Po!erPoint ma"iet9 f+n"c-onaln1.
Ma"ieta po!inna odnosiC si9 do !czenie- zapro-e"to!ane-
str+"t+ry ser!is+.
Pami9ta- o zacho!ani+ "olor2! zgodnych z legend1.
4ysunek BH M Cycie kolorJw dla odrJnienia funkcjonalno!ci
uatwia ocenianie projektu serwisu
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. <;
4ysunek B9 M 2rzykadowy projekt strony "Jwnej serwisu
korporacyjne"o
makiet funkcjonalnyc' kluczowyc' podMstron
orzysta-1c z pli"+ C!iczenio!ego +t!2rz ! programie
Presentation l+b Po!erPoint ma"iet9 f+n"c-onaln1 pod0strony.
Ma"ieta po!inna odnosiC si9 do !czenie- zapro-e"to!ane-
str+"t+ry ser!is+.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. <<
4ysunek BO M 2rzykadowy projekt podMstrony serwisu
korporacyjne"o
2rojektowanie z"odne z usability I 2oprawa jako!ci
serwisJw WWW. .ormuowanie zasad [&
JH to skr:t pochodz"cy od Juality Hssurance 8 zapewnienie
jako;ci.
T!orzymy list9 "ontroln1 "t2ra zdefini+-e minimalne !ymagania
sta!iane !obec "a3dego naszego ser!is+.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. <>
K adresu
http://www.#abso#t.com/pages/Aownloads/Aownloads.htm
pobra5 mo2na darmow" wersj$ narz$dzia (oolDuler. =ozwala ono
sprawdza5 jako;5 wykonania layoutu za pomoc" wirtualnej
miarki1 kt:r" mo2emy zmierzy5 elementy na ekranie. Azi$ki tej
miarce jeden z moich koleg:w otrzyma! ksywk$ L>ne =iEel 9anM :)
2rojektowanie z"odne z usability I &utomatyzacja
testJw [&
Aprogramo!anie a+tomatyz+-1ce testy.
Spra!dzanie popra!noci lin"2!.
2rojektowanie z"odne z usability I /ase.
Spra!dzanie popra!noci lin"2! ! ser!isie ...
=r+chom program een+ Fdo pobrania
z http%::home.snaf+.de:tilman:Nen+lin".htmlG
.ybierz opc-9 Jile Q Chec" =L7
.pisz adres ser!is+ do spra!dzenia
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. >(
.cini- przycis" A.
Program przyst9p+-e do spra!dzania lin"2!

,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. >&
Po za"oIczeni+ prac program gener+-e raport
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. >*
2rojektowanie z"odne z usability I WspJpraca
z a"encj interaktywn. 6ak formuowa swoje
oczekiwania
@ale3y o"reliC%
Z -a"imi standardami ma byC zgodny ser!isK
$la -a"ich platform po!inien byC dost9pnyK
Czy chcemy testo!aC ser!is przed +r+chomieniemK
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. >)
aczniki. aczniki.
)op )en Web Desi"n $istakes of OHHA .
@a podsta!ie bBa"ob @ielsenRs /lertboN[
Zbyt mae l+b nies"alo!alne czcion"i.
Loz!i1zanie% http%::!!!.+seit.com:alertboN:*((*(<&>.html
@iestandardo!e lin"i%
Loz!i1zanie% http%::!!!.+seit.com:alertboN:*((5(D&(.html,
http%::!!!.+seit.com:alertboN:*((5(D().html
@ie0int+icy-ne interfe-sy !e Jlash
Loz!i1zanie% http%::!!!.+seit.com:alertboN:*((*&&*D.html
TreC nieprzystoso!ana do 4nternet+
Loz!i1zanie% http%::!!!.+seit.com:papers:!eb!riting:

Problemy z !ysz+"i!ar"1
Loz!i1zanie% http%::!!!.+seit.com:alertboN:*((D(D(>.html
@ie"ompatybilnoC z przegl1dar"ami
Loz!i1zanie% http%::!!!.!)c.org
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. >5
@ad+3y!anie form+larzy
Loz!i1zanie% http%::!!!.+seit.com:alertboN:forms.html
Hra" informac-i "onta"to!ych i informac-i o !aciciel+ ser!is+
Loz!i1zanie% http%::!!!.+seit.com:alertboN:*(()&(*;.html
@ies"alo!alny layo+t ser!is+
Loz!i1zanie% http%::!!!.+seit.com:alertboN:*((D(;&&.html
@iepopra!ne po!i9"szanie obraz"2! i o"ien"a pop0+p
Loz!i1zanie% http%::!!!.+seit.com:alertboN:*((5&*('.html
;liencie# cze"o masz prawo wyma"a od a"encji
interaktywnej
@a podsta!ie archi!+m listy +sabilty8-anmedia.com
Tomek Janiszewski pisze:
Masz pra!o !ymagaC od !ebmastera czystego semantycznie
eSTM7. Czystego semantycznie oznacza, 3e !szyst"ie
zastoso!ane ! do"+mencie znaczni"i eSTM7 m+sz1 byC +3yte
zgodnie z przeznaczeniem. Pobie3nie mo3na spra!dziC semanty"9
-9zy"a eSTM7 +3y!a-1c Malidatora ze stron .)C.
http%::àlidator.!).org
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. >D
Masz pra!o !ymagaC, aby !ygl1d T!o-e- strony by oparty Utyl"o
i !y1cznie na ar"+sz+ styli CSSU. Popra!noC ar"+sza styli
!zgl9dem semanty"i -9zy"a mo3na spra!dziC na stronie
http%::-igsa!.!).org:css0àlidator
Masz pra!o !ymagaC, aby T!o-a strona bya popra!nie
!y!ietlana !e !szyst"ich no!oczesnych przegl1dar"ach
interneto!ych. .y"az na-pop+larnie-szych przegl1dare" na
pols"im ryn"+ mo3esz znale?C pod adresem
http%::!!!.ran"ing.pl:ran".phpKstatVbro!P7
Masz pra!o !ymagaC, aby T!o-a strona bya dost9pna dla
!szyst"ich odbiorc2!. Pami9ta-, 3e na T!o-1 stron9 !chodz1 nie
tyl"o ! peni spra!ni +3yt"o!nicy 4nternet ,Nplorer '.(, ale ta"3e
osoby nie!idome, niedo!idz1ce, z niedo!adem "oIczyn itp.
@ie mo3esz o nich zapominaC, a lenist!o b1d? nie"ompetenc-a
T!o-ego !ebmastera nie mog1 Ci przesz"odziC ! +dost9pnieni+
!itryny caem+ !iat+.
Cie"a!e informac-e, "t2re mog1 stano!iC pomoc dla os2b
sta!ia-1cych pier!sze "ro"i ! !iecie dost9pnoci i +3ytecznoci,
mo3ecie znale?C pod adresem http%::!!!.d!!!.pl. $ost9pnoC
s!oich stron mo3ecie spra!dziC +3y!a-1c system+ Cynthia
Fhttp%::!!!.contentd+ality.comG b1d? .ebe/CT
Fhttp%::!ebNact.!atchfire.comG
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. >'
Pami9ta- -edna", ze 3aden z tych test2! nie da-e Ci &((T pe!noci,
i3 T!2- ser!is -est !y"onany popra!nie. @a-lepie- prze"onaC si9
o -a"oci !asnego ser!is+ samodzielnie, spra!dza-1c go ! r23nych
!ar+n"ach, pod r23nymi systemami i ! r23nych trybach
przegl1dania.
9aciej Kostro pisze:
Czego po!iniene !ymagaCK
Pra!dopodobnie !ystarczyby -eden p+n"t% po!innimy !ymagaC
myleniaY
Ba" do te- pory s"+pilimy si9 !y1cznie na standardach. 4 bardzo
dobrze, bo -a" m2!i definc-a, standard to fnormaf, f!zorzecf.
4 ! agenc-i reprezent+-1ce- pe!ien poziom standard po!inien byC
standardem.
Z .aszych !ypo!iedzi !yni"a, 3e standardy dotycz1ce +3ytecznoci
nie s1 -eszcze standardem Fnorm1G 0 p+n"ty od & do 5.
/le chciabym z!r2ciC +!ag9, 3e same standardy to -eszcze za mao.
Standard -a"o ta"i po!inien byC przezroczysty. Be3eli !yst9p+-9 -a"o
"lient agenc-i intera"ty!ne-, mam pra!o ocze"i!aC, 3e standardy s1
spenione, a -a mog9 s"+piC si9 na "!estiach istotnych dla ser!is+
-a"o caoci F"reac-a, na!igac-a, content etcG. Jetyszyzo!anie
standard2! pro!adzi cz9sto do syt+ac-i abs+rdalnych, nie pami9tam
-+3, co to by za ser!is 0 racze- niszo!y gG 0 ale zostaem po!itany
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. >;
"om+ni"atem mnie- !i9ce- ! tych so!ach% niestety +3y!asz 4,,
! z!i1z"+ z tym nie mo3esz zobaczyC l+b zrobiC czego tam, t!o-a
przegl1dar"a nie spenia standard2!. @ie mo3emy obra3aC si9 na
rzeczy!istoC i m+simy pami9taC o -eszcze innych standardach Fczyli
normieG% ponad ;)T przegl1dare" to 4,.
Zna"omita !i9"szoC +3yt"o!ni"2! 4nternet+ nie ma bladego
po-9cia o tym, co to -est standard .)C i po co to ! og2le -est Fi lepie-,
3eby ta" zostao, bo przestaniemy byC potrzebniYG.
/ mylenie realizator2! pro-e"t+ pomaga ! st!orzeni+ ser!is+,
"t2ry nie absorb+-e nas s!oim ser!iso!ym bytem, a s+3y
!ygodnem+ podani+ treci.
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. ><
+iteratura. +iteratura.
&. @ielsen @orman 6ro+p, eCommerce. =ser ,Nperience.
*. Banmedia 4nteractiè, Laport z badania f+n"c-onalnoci pols"ich
s"lep2! inerneto!ych.
). B. @ielsen, $esigning .eb =sability % The Practice of Simplicity.
5. S. r+g, $onRt Ma"e Me Thin" % / Common Sense /pproach to
.eb =sability.
D. B. @ielsen, M. Tahir, Somepage =sability % D( !ebsites
deconstr+cted.
'. Beffrey Zeldman, Pro-e"to!anie ser!is2! .... Standardy
siecio!e.
;. Shane Ho!man, Chris .illis, $esigning .eb Sites That Sell.
<. Merisign, 6+ide So! to Create an ,0Commerce .ebsite.
>. Shari Th+ro!, Pozyc-ono!anie ! !ysz+"i!ar"ach interneto!ych.
&(./ni Phyo, .eb $esign. Pro-e"to!anie atra"cy-nych stron ....
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str. >>
2olecam 2olecam
7ista dys"+sy-na o +sabillity %
http%::!!!.-anmedia.pl:lista^+sability.Nml
M2- blog na temat efe"ty!noci ... Q .eb+sability Q
http%::!!!.!eb+sability.pl
Hlogi praco!ni"2! Banmedia%
Sebastian !iecieI Fdyre"tor operacy-nyG Q .eb *.( Q
http%::!!!.!eb*(.pl
Ba"+b Petry"o!s"i Fspec-alista +sabilityG Q ,lsintera"c-a 0
http%::!!!.elsindel.!roc.pl:blog
Banmedia 4nteractiè Q agenc-a intera"ty!na ! "t2re- prac+-e Q
http%::!!!.-anmedia.pl
,.,;)8WN, % %N)C%/86N, 0,4W%08 WWW
Tomasz ar!at"a
P str.
&((
0zcze"Jln pomoc w promowaniu i 0zcze"Jln pomoc w promowaniu i
tworzeniu kursu od"rywaj tworzeniu kursu od"rywaj

Serdecznie zapraszam "a3dego, "to chce pom2c ! promo!ani+,
+lepszani+, p+bli"o!ani+ "+rs+ do "onta"t+ Q
t"ar!at"a8-anmedia.com F!i9ce- danych "onta"to!ych na
http%::!!!.tomi".infoG. Bestem ot!arty na !szel"ie pomysy na
!sp2prac9 ! za"resie +sability. .i9ce- materia2! ed+"acy-nych
oraz na-no!sz1 !ers-9 "+rs+ za!sze mo3na znale?C na

Kurs Usability

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Kurs Usability

Transféré par

Droits d'auteur :

Formats disponibles

Tomasz Karwatka

Vous aimerez peut-être aussi