You are on page 1of 13

Magia interfejsu.

Praktyczne
metody projektowania
aplikacji internetowych
Autor: Robert Hoekman jr
Tumaczenie: Pawe Szajkowski
ISBN: 978-83-246-1943-6
Tytu oryginau: Designing the Moment: Web Interface
Design Concepts in Action (Voices That Matter)
Format: A5, stron: 264

Poznaj metody i reguy tworzenia najbardziej funkcjonalnych stron WWW


Jak stworzy doskonay projekt interfejsu uytkownika?
Jak sprawi, aby uytkownik nie mia adnych trudnoci podczas pracy
z aplikacj?
Jak budowa aplikacje czce w spjn cao nawet wykluczajce si elementy?
Doskonaa strona internetowa to taka, ktra angauje i wciga uytkownika, a poruszanie
si po niej jest atwe, wrcz intuicyjne. Jak wszdzie, tak i tutaj liczy si dobre pierwsze
wraenie! Atrakcyjny wygld, szybki dostp do interesujcych informacji i ciekawe usugi
jak to wszystko osign, aby pozyska i przywiza uytkownikw do swojej strony?
Ksika Magia interfejsu. Praktyczne metody projektowania aplikacji internetowych
zawiera krytyczn ocen wszystkich elementw strony z punktu widzenia jej uytkownika.
Jednoczenie za oferuje gotowy zestaw praktycznych rad i niezbdnych wskazwek.
Kada czynno, ktr uytkownik chce wykona na stronie internetowej, zostaa tu
potraktowana i rozpatrzona jako chwila. Twoim zadaniem jest sprawi, aby kada
z tych chwil bya przyjemna, a ponadto w peni wykorzystana i efektowna. Dziki temu
podrcznikowi nauczysz si, jak krok po kroku tworzy perfekcyjne projekty oraz
przyjazne w obsudze i intuicyjne strony WWW -- bez wzgldu na stopie ich
skomplikowania.
Projektowanie elementw strony
Sowa-klucze i frazy zachcajce do dziaania
Klipy wideo
Przegldanie wynikw wyszukiwania
Usprawnianie wyszukiwania
Standaryzacja interfejsw odtwarzaczy wideo
Projektowanie formularzy
Poka-yoke w edycji
Zarzdzanie informacjami
Organizacja zawartoci metod "przecignij i upu"
Trzy filary dobrego bloga
Nie lekcewa potgi chwili! Twrz przyjazne uytkownikom strony internetowe!

Spis treci
Podzikowania 11
Wstp 13
cz I O co chodzi? 19
Rozdzia 1. Projektowanie pierwszego wraenia 21
Odkrywanie ukadu elementw strony 22
Skok w Automattic 26
Wodzenie wzroku 30
Wykorzystanie diagramu Gutenberga 30
Uywaj kolorw do przykuwania uwagi obserwatorw 34

Rozdzia 2. Poka swoj osobowo 36


Ujednolicanie projektu a dobre wraenie 38
Symbole 40

Rozdzia 3. Zen i sztuka nawigacji 45


Mwienie aplikacji, co ma zrobi 46
Kady chce wydawa polecenia 48
Syndrom login 51
Mw, co robisz, i rb to, co Ci powiem 53

Rozdzia 4. Nie wszystkie odnoniki s sobie rwne 54


Znaki z otoczenia jako pomoc w nawigacji po stronie WWW 56
Znaki czasu w sieci WWW 57

Rozdzia 5. Z gow w chmurach 60


Innowacje naley wprowadza z umiarem 62
Kiedy przesta? 63
Jeli nie jeste czci rozwizania 65

 spis treci

cz II Uczenie innych 67
Rozdzia 6. Sowa klucze 69
Dlaczego teksty powitalne s bezuyteczne 69
Tworzenie stron do przegldania 71
Frazy zachcajce do dziaania 72

Rozdzia 7. Opisywanie elementw interfejsu 75


Nie opisuj swoich zaoe 76

Rozdzia 8. Poza sowami wideo 79


Ruchome obrazki bywaj cenniejsze ni 10 000 sw 80
Klipy wideo a omawianie rozmaitych problemw 81
Klipy wideo a przedstawianie idei 82
miesznie prosta sztuka tworzenia protocastw 83

cz III Wyszukiwanie 85
Rozdzia 9. Podpowiedzi 87
Autouzupenianie jako poka-yoke 88
Puapki 90
Odpowiednie rozwizania na odpowiednie okazje 93

Rozdzia 10. Przegldanie wynikw wyszukiwania 94


Naley ufa sprawdzonym standardom 95
Droga powrotna do ju obejrzanej zawartoci 97

Rozdzia 11. Usprawnianie wyszukiwania 100


Zaawansowane powinno by proste 102
Stopniowe wywietlanie opcji 103
Zachcanie do interakcji 104

spis treci 
cz IV Dalsze kroki 107
Rozdzia 12. Standaryzowanie interfejsw odtwarzaczy wideo 109
Tajemnice programowania odtwarzacza 109
Poczekaj chwil! Istnieje lepsze rozwizanie 114
Bierzemy, co najlepsze, i poprawiamy reszt 116

Rozdzia 13. Ukad elementw formularza 119


Projektowanie zgrabnych formularzy 120
Idealne Zatwierd i Anuluj 123
Dziaania podstawowe i drugoplanowe 124
Szczegy maj znaczenie 126

Rozdzia 14. Walka z kreatorem 127


Ustalanie jasnych wymaga 127
Okrelanie granic 130

Rozdzia 15. Jeden krok dalej, czyli walidacja 133


Informowanie o bdach i nieodbieranie internautom godnoci 134
Przetwarzanie informacji na bieco 139

Rozdzia 16. Upraszczanie dugich formularzy 142


Jasne oczekiwania 143

Rozdzia 17. mudny proces logowania 149


I znw poprawiamy standardy 150
Rozpoznajmy uytkownika 150
Pjdmy jeszcze krok dalej 151

Rozdzia 18. Liczenie znakw 154


Osign kres 155
Poka-yoke w edycji 157
I jeszcze dodatkowe ostrzeenie 159

 spis treci

cz V Uczestnictwo w yciu spoecznoci 161


Rozdzia 19. Profil uytkownika 163
Stopniowe rozwijanie profilu 164
Od zwykego spisu informacji do panelu kontrolnego 165
Pusta tabliczka 167

Rozdzia 20. Edycja 168


Waciwe narzdzia w odpowiedniej chwili 170
Ukrywanie opcji zaawansowanych 173
Sprztanie 174

Rozdzia 21. Tworzenie wizi 175


Przyjaciele czy obserwatorzy 176
Nieobecny na zdjciu 179

Rozdzia 22. Oczywiste spostrzeenia na temat dobrego bloga 180


Trzy filary dobrego bloga 181
Rozwizania 182
Nie powielaj cudzych bdw 187

Rozdzia 23. Otwarta dyskusja 188


Pozwl swoim klientom mwi 189
Istotna kwestia zaufania 190
Pomocni otaku 191
Flagowanie napastliwych uytkownikw serwisu 193
Nie przeszkadzaj ludziom mwi 193

Rozdzia 24. Grunt to dobra ocena 194


Stawiaj przejrzysto ponad wydajno 195
Zasuone podzikowania 197

spis treci 
cz VI Zarzdzanie informacjami 199
Rozdzia 25. Nadaj znaczenie skrtowi RSS 201
Ujawnienie opcji 203

Rozdzia 26. Dodawanie tagw 207


Taksonomia, folksonomia i anomalia 209
Usuwanie bariery jzykowej 209
Wyjanianie nowych pomysw 210
Sugestie 210
Szukanie, szukanie, szukanie 211
Przyszo tagw 212

Rozdzia 27. Organizacja zawartoci metod przecignij i upu 213


Trzy stadia interakcji 213
Zaproszenie 213
Zmiany 214
Ukoczenie 216
Poczucie spenienia 218
Waciwy dobr funkcji 218

Rozdzia 28. Informuj klientw o zmianach 220


Projektowanie zmian 222
Obszary powiadomie 224
Ponowne uycie elementw interfejsu 224

cz VII Poegnania 227


Rozdzia 29. Wyloguj si 229
Jak utrudni to, co proste? 229
Zach uytkownika do powrotu 231

10 spis treci

Ponowne wykorzystanie przestrzeni 232


Powiedz, co masz do przekazania 233

Rozdzia 30. Odkurzanie starych kont 234


Jak przeksztaci nieaktywnego uytkownika w dusz serwisu? 235
Promocja bardziej osobista 236
Ankiety 238
Moliwo odpowiedzenia 238
Tylko bez przesady 239

Rozdzia 31. Pozwl im odej 241


Przegrywaj z honorem 242
Pozwl mu zgasi wiato 242
Odszed, ale (moe) nie na zawsze 244

Podstawy dobrego projektowania 247


Dobra komunikacja ponad wszystko 248
atwiej jest robi co dobrze ni le 250
Uwagi kocowe 252

SKOROWIDZ 253

26.
Dodawanie tagw

Zanim zaczn rozpisywa si na temat trudnoci zwizanych z dodawaniem tagw,


musz wyjani pewn spraw.
Sama idea uywania tagw wydaje mi si wspaniaa. Dodawanie kolejnych oznacze
do konkretnej publikacji sprawia, e atwiej wyszuka j w sieci. Do tego pniejsze
katalogowanie tak oznaczonej zawartoci jest znacznie bardziej elastyczne ni oferowane w nowoczesnych systemach operacyjnych rozwizanie bazujce na strukturze
katalogowej.
Tagi pozwalaj przypisa jedn wiadomo e-mail do rnych tematw, na przykad:
praca, do-zrobienia, ten_tydzie czy projekty. Dziki nim moesz umieci
wyniki bada w tematach biblioteka lub badania, a potem zawzi jeszcze obszar
poszukiwa, dodajc opisy uyteczno i dowiadczenia_uytkownika. Moliwoci s nieograniczone.
Elastyczno oznaczania treci za pomoc tagw sprawia, e moesz przeszukiwa
zawarto serwisu i katalogowa j na niezliczone sposoby.
Uwielbiam to.
Niestety metody zastosowania tagw nie s doskonae. Udostpnienie tego narzdzia spoecznoci internautw sprawia, e szybko traci ono swoje zalety. Moesz spodziewa si kilku typowych problemw.
Po pierwsze, idea oznaczania zawartoci strony za pomoc tagw jest obca ludzkiemu sposobowi mylenia, a tylko nieliczne serwisy postaray si sprawi, by proces
przypisywania tych specyficznych opisw by sam z siebie prosty i niepozostawiajcy
wtpliwoci. Po drugie, aden z jzykw ziemi nie przewiduje oddzielania sw podkreleniami, wic argon stosowany w czasie nadawania tagw i ich skadnia mog
rodzi niepotrzebne zamieszanie. Po trzecie, pamitajmy, e ludzie to nie maszyny i na
pewno stworz kilka wersji jednego tagu. I wreszcie, silniki wyszukiwania pojawiajce
si na niektrych stronach zdaj si przedkada wyszukiwanie tagw nad bardziej
naturalne dla ludzi sposoby konstruowania myli.

208 magiainterfejsu

Oto przykad. Gdy chciaem odnale w serwisie Flickr.com zdjcia z konferencji Voices That Matter, wpisaem w wyszukiwark fraz Voices That Matter Web
Design Conference. Takim sformuowaniem posuybym si, korzystajc z przegldarkiGoogle,wicuyemgorwniewserwisieFlickr.
Otrzymaemczterywyniki.
ZmieniemfrazwyszukiwanianaVoices That Matter.Tymrazemserwiswywietli
przeszo700zdj,zktrychprzynajmniejjednatrzecianiebyazwizanazkonferencj.Znwumieciemwacuchuwyszukiwaniasowoconferenceitymrazem
dostaem58wynikw.Wiedziaem,ecojestnietak,gdyjedenzkoordynatorw
konferencjichwalisi,eumieciwserwisieprzeszodwieciefotografii.
Poniewauycietrzechnajbardziejoczywistychwersjifrazywyszukiwanianieprzynioso zadowalajcych efektw, postanowiem skorzysta z wyszukiwarki tagw.
WpisaemwpoluwyszukiwaniaVTMWDc(dokadnanazwakonferencjitoVoices
That Matter: Web Design Conference). Tym razem otrzymaem 249 wynikw
ikadezwywietlonychzdjpochodziozinteresujcegomniespotkania.Wreszcie
znalazemodpowiednifraz.
Oczywiciewcaleniemiaempewnoci,estworzonyprzezemnietagprzypisanodo
kadegozdjciazrobionegonaimprezie.Niemamtepojcia,skdwoglemiaem
wiedzie,epowinienemuytakiegowanieskrtu.
Gdybym nie wpad na pomys wyszukiwania skrtw, bybym w kropce. Dlaczego
twrcyserwisuFlickrzaoyli,ebdwiedzia,iwyszukiwanietagwjestbardziej
skuteczne ni szukanie tytuw zdj? I skd miaem wiedzie, jakim tagiem mam
siposuy,szukajcfotografiizrobionychpodczaskonkretnejokazji?(Sprawdziem
tewynikiwyszukiwaniataguVTMiznalazemjeszczekilkazdjzinteresujcego
mniespotkania).
Jeelistosowanietagwwserwisiemamiesens,musibywaciwieopisane,acay
mechanizm musi by tak skonstruowany, by tworzenie i korzystanie z tagw byo
atweibezbolesne.

dodawanietagw 209

Taksonomia, folksonomia i anomalia


Tworzcsystemzarzdzaniazawartocistrony,maszdowyborujednzdwchdrg.
Pierwszaznichtostworzenietaksonomii,czylisystemuklasyfikacjiuoonegoprzez
jednosob,stosowanegopotemprzezinnych.Drugadrogapozwalanapowstanie
folksonomii,czyliwersjisystematykitworzonejprzezwieleosb.Zakadaona,e
uytkownicyserwisubdmoglistalezmieniaklasyfikacjwsposbodpowiadajcy
ichpotrzebom.
Gdydecydujeszsinauyciefolksonomii,czylipozwalaszoznaczazawartoserwisutagami,odrazumusiszliczysizewszystkimikomplikacjami,oktrychwanie
napisaem.Musiszkonieczniezadbaoto,bysystemnadawaniatagwbyprzyjazny
uytkownikowiikojarzysimuzeznanymijupojciami.
Piszcmjpierwszysystemnadawaniatagw,staraemsiwaniewziwszystkoto
poduwag,byznalerozwizanialepszenite,ktreznalazemwsieci.

Usuwanie bariery jzykowej


Na pocztek postanowiem przybliy ca ide dodawania tagw przecitnemu
uytkownikowi,usunemwicargonoweokrelenietagizastpiemjeswojsko
brzmicymsowemetykieta.Tosztuczkaznanazaplikacjiobsugikontpocztowych
Google,Gmail.

Nadawanie etykiet nie jest nam obce, poniewa robimy to na co dzie w prawdziwym wiecie. Wikszo ludzi bez trudu zrozumie, co miaem na myli. Nadajemy
etykietycayczasmoetobynazwiskozapisanenazamwieniuprzygotowanym
nawynos,alerwniedobrzeetykietkaprzyklejonanasoikuzcukrem,dzikiczemu
atwiejgoodnalewrdinnychskadnikwspoywczych.
Natomiastprzypisywanietagwniekojarzysiwcalezcodziennymyciem.Tozupenienowaidea.Wspominaemjuwpoprzednimrozdziale,powiconymstosowaniu
skrtuRSS,eswojskobrzmiceokreleniaobniajpoziomkrzywejuczeniasi.
Chciaem, by przypisywanie tagw byo jeszcze bardziej przyjemne i nieskomplikowane, wic zdecydowaem si nie wywietla podkrele czcych poszczeglne
sowaznacznika(naprzykadmj_dom),anajlepiejwogleznichzrezygnowa.

210 magia interfejsu

Uznaem, e cho system wymaga tagw zawierajcych podkrelenia (pojawiay si


one w dynamicznie tworzonych adresach URL, ktre nie mog zawiera spacji), uytkownik wcale nie musi ich widzie. Tagi powinny by zapisane zgodnie z zasadami
wszystkich jzykw bez podkrele.

Wyjanianie nowych pomysw


Teraz musiaem si upewni, e uytkownik bez trudu zrozumie mj zamys i bdzie
wiedzia, jak posugiwa si stworzonym przeze mnie narzdziem. Poradziem sobie,
umieszczajc na stronie kilka sw wyjanienia, innymi sowy, staraem si opisywa
nie swoje zaoenia dotyczce tego, co uytkownik moe wiedzie na temat dodawania tagw, a raczej zaoferowa mu krtkie i treciwe wyjanienie caego procesu
(pisaem o tym w rozdziale 7.).
Opis pojawia si w formie krtkiej notki mwicej mniej wicej tyle:

Opisz to!
Spraw, by znalezienie Twoich zdj stao si prostsze nadaj im etykiety
(na przykad mj dom). Dodaj tyle etykiet, ile chcesz. My zamienimy je na odnoniki,
wic wystarczy, e klikniesz nazw etykiety, by zobaczy wszystkie opisane ni zdjcia.

Sugestie
Wiadomo, e rni ludzie mog niewiadomie tworzy rne etykiety opisujce to
samo zdarzenie i bd to robi. Dlatego musielimy stworzy mechanizm wykrywania podobnych oznacze i pozwoli uytkownikowi zdecydowa, czy chce uy istniejcego ju tagu, czy woli posuy si wasnym.
Oto przykad. Pewien czowiek wysya zdjcia z przyjcia urodzinowego na serwer
pozwalajcy udostpnia obrazy. Nadaje im etykiet urodziny. Inna osoba biorca
udzia w tym samym przyjciu wysya swoje zdjcia i opisuje je przyjcie_urodzinowe. Obydwa tagi s jak najbardziej odpowiednie, ale opisana sytuacja sprawia, e
jednemu rodzajowi zdarze przypisano dwie etykiety. Przerost liczby etykiet nad
liczb zdarze spowoduje, e inni uczestnicy zabawy nie zdoaj odnale wszystkich
fotografii w czasie jednej operacji wyszukiwania.

dodawanie tagw 211


(Nawiasem mwic, serwis Yahoo! przy podobnej okazji stworzy cakiem tradycyjne
rozwizanie prewencyjne opisywanego przeze mnie problemu. W czasie oficjalnego
przyjcia na majcej miejsce w 2006 roku konferencji South by Southwest Interactive
poproszono uytkownikw, konkretnie: w caym barze rozwieszono odpowiednie
tablice o opisywanie swoich zdj umieszczanych w serwisie Flickr tagiem Yahoo!_
bar_tab. Prob uzasadniono wanie prb uatwienia pniejszego wyszukiwania
zdj. To rozwizanie nie przyjo si jeszcze na caym wiecie, ale idea umieszczania
takich tabliczek w salach, w ktrych organizowane s uroczyste kolacje, przyjcia,
konferencje czy inne tego typu spotkania, wydaje si by interesujca).
Ja jednak zdecydowaem si na inne rozwizanie.
Przede wszystkim postanowiem skorzysta z funkcji autouzupeniania znanej z serwisu Google Suggest. W chwili, gdy uytkownik zaczyna wpisywa sowa znacznika,
odpowiedni program sprawdza baz danych w poszukiwaniu podobnych tagw, ktre
s natychmiast wywietlane w postaci listy, z ktrej uytkownik moe wybra najbardziej odpowiadajc mu opcj.
Istniej oczywicie minusy tego rozwizania, o czym wspominaem ju w rozdziale 9.
Uytkownik moe stwierdzi, e propozycje podawane w podpowiedziach s lepsze
ni jego wasne pomysy, nawet jeli to nieprawda.
Drugi pomys zakada pokazywanie uytkownikowi propozycji tagw po tym, jak
wprowadzi swoje. Przeszukiwanie bazy odbdzie si po wprowadzeniu tagw przez
uytkownika, a wyniki zostan mu zaprezentowane na nowej stronie. Licie moe
towarzyszy wyjanienie informujce uytkownika, e do swoich tagw moe doczy rwnie te stworzone przez innych ludzi.
Dziki temu udao mi si zmniejszy szanse tworzenia wielu wersji jednego tagu,
przez co odnajdywanie zdj staje si prostsze.

Szukanie, szukanie, szukanie


Najwaniejsze jednak jest stworzenie takiego systemu wyszukiwania, ktry bdzie
zwraca poprawne wyniki po wpisaniu bardziej naturalnych wyrae ni tagi (przypomn tu opisywan na pocztku rozdziau wyszukiwark Flickr).
Nie twierdz, e stworzenie takiego systemu jest proste, ale wyszukiwanie to jeden
z najwaniejszych elementw wikszoci stron, wic naley zadba o jego waciwe
dziaanie. Jeeli uytkownik nie bdzie mg odnale interesujcych go treci, posugujc si intuicyjnymi frazami sprawdzajcymi si w wyszukiwarce Google, szukanie
informacji na Twojej stronie bdzie dla niego prawdziw mk.

212 magia interfejsu

Przyszo tagw
Powtrz to ponownie: obce naszej naturze rozwizania musz by przedstawione
w atwej do przyswojenia formie. Wikszoci stron korzystajcych z opcji nadawania
tagw pomogoby ju samo usunicie technicznego argonu, ale problem wykracza
zdecydowanie poza sprawy natury lingwistycznej.
Nadawanie tagw nie jest zajciem, z ktrym mamy do czynienia na co dzie, wic
naley przedstawi cay proces w taki sposb, by uytkownik dokadnie go zrozumia
i zdoa odnale interesujc go zawarto niewielkim nakadem pracy. Porzdkowanie
wasnych plikw umieszczanych w serwisie powinno by rwnie nieskomplikowane.