Id do

Spis treci
Przykadowy rozdzia
Katalog ksiek
Katalog online
Zamw drukowany
katalog
Twj koszyk
Dodaj do koszyka
Cennik i informacje
Zamw informacje
o nowociach
Zamw cennik
Czytelnia
Fragmenty ksiek
online

Kontakt
Helion SA
ul. Kociuszki 1c
44-100 Gliwice
tel. 32 230 98 63
e-mail: helion@helion.pl
Helion 19912010

Wzorce wyszukiwania.
Projektowanie
nowoczesnych wyszukiwarek
Autorzy: Peter Morville, Jeffery Callender
Tumaczenie: Mikoaj Szczepaniak
ISBN: 978-83-246-2798-1
Tytu oryginau: Search Patterns: Design for Discovery
Format: 168237, stron: 216
W wiecie wyszukiwarek innowacyjno jest koniecznoci. Nawet z pozoru doskonay
Google stale si rozwija i szuka nowych rozwiza. Nieskuteczne mechanizmy
wyszukiwania wci stanowi najwikszy problem w zakresie uytecznoci serwisw,
wic na caym wiecie rzesze programistw bezustannie pracuj nad popraw
efektywnoci, precyzji i jakoci zwracanych wynikw. Wrzucenie zapytania w okno
wyszukiwarki jest zwykle pierwszym etapem realizacji zada dla wielu uytkownikw,
w duej mierze definiuje ich doznania i poziom satysfakcji z pobytu na danej stronie.
Optymalizowanie mechanizmw wyszukiwania to najszybciej zwracajca si inwestycja
w kategorii uzyskiwanie przewagi konkurencyjnej w internecie. Od skutecznoci
znajdowania konkretnych informacji uzalenione s dzi dochody wszelkich e-biznesw,
rozmaitych portali czy serwisw firmowych.
Ta ksika pozwoli Ci wieym okiem spojrze na problemy wyszukiwania zarwno
od strony uytkownika, jak i funkcjonowania wyszukiwarki. Poznasz anatomi i jzyk
wzorcw wyszukiwania, psychologiczne i behawioralne podoe dziaa uytkownikw,
sprawdzone wzorce projektowe i skuteczne rozwizania typowych problemw.
Uytkownikom swojej strony zapewnisz moliwo wykonywania zada i szybkiego
odnajdowania tego, czego potrzebuj. Opanujesz narzdzia uatwiajce zadawanie pyta,
przegldanie i dzielenie si informacjami. Przed Tob niezwykle ciekawe, a przy tym
bezcenne rdo wiedzy na temat innowacyjnych technik projektowania i usprawniania
wspczesnych wyszukiwarek, napisane z myl o ambitnych twrcach stron,
architektach informacji i studentach informatyki.
Jakie zagadnienia na pewno znajdziesz w tej ksice?
Rozpoznawanie wzorcw wyszukiwania
Anatomia wyszukiwania
Wzorce zachowa uytkownikw
Elementy projektowania interakcji
Zasady projektowania wyszukiwarek
Wzorce projektowe
Nawigacja fasetowa
Wyszukiwanie stowarzyszone
Wyszukiwanie zaawansowane
Wyniki strukturalne i praktyczne
Innowacyjne narzdzia: sieci semantyczne, wyszukiwanie spoecznociowe,
personalizacja
Futurystyczne scenariusze wyszukiwania
Poznaj wszystkie aspekty projektowania i usprawniania nowoczesnych wyszukiwarek!

Spis treci
Przedmowa ..................................................................7
Rozdzia 1. Rozpoznawanie wzorcw ...........................................9
Zrozumie wyszukiwanie
Pole wyszukiwania
Cel
Silnik
Odkrywanie barw
Sonik na stole kuchennym
Manifest kartografa
Apofenia wtrna

11
12
15
20
23
27
30
31

Rozdzia 2. Anatomia wyszukiwania ...........................................37

Uytkownicy
Interfejs
Silnik
Tre
Twrcy
Kontekst
Portal
Wyszukiwanie
Obiekty
Wszystko w jednym miejscu

37
42
45
50
53
54
59
60
61
63

Rozdzia 3. Zachowanie ................................................................67

Wzorce zachowa
Elementy interakcji
Zasady projektowania
Konstrukcja przyrostowa
Postpujce ujawnianie tajemnic
Natychmiastowa odpowied
Widoki alternatywne
Przewidywalno

68
78
83
85
86
88
89
91

Spis treci

Rozpoznawanie ponad przypominanie

Minimum zakce
Bezporednia manipulacja
Kontekst uycia

93
94
96
97

Rozdzia 4. Wzorce projektowe ................................................... 99

Automatyczne uzupenianie
Najpierw najlepszy
Wyszukiwanie stowarzyszone
Nawigacja fasetowa
Wyszukiwanie zaawansowane
Personalizacja
Podzia na strony
Wyniki strukturalne
Praktyczne wyniki
Poczone odkrywanie
Koniec pocztku

101
106
111
115
123
126
132
139
141
146
151

Rozdzia 5. Lokomotywy odkry ...............................................153

Kategoria
Temat
Format
Odbiorcy
Platforma
Tryb

154
160
163
166
169
173

Rozdzia 6. Namacalna przyszo ............................................. 179

Metody i cele
Scenariusze wyszukiwania
Orodek zmysw
Szczeglno semantyczna
Walencja wyszukiwania
Skupisko
Odkrywanie dozna

180
182
182
185
190
192
194

Polecane materiay ................................................. 199

Skorowidz ................................................................201

Zachowanie
Jeeli musisz pyta, czym jest jazz, nigdy nie bdziesz tego wiedzie.
Louis Armstrong

W muzyce improwizacja jest sztuk tworzenia utworu w trakcie jego wykonywania w czasie gry i w odpowiedzi na interakcj. Obok blue notes, polirytmw
i synkop improwizacja naley do najbardziej charakterystycznych elementw
jazzu. Wolno i spontaniczno solwek na saksofonie, fortepianie czy trbek
wykonywanych wedug wzorca zawoania i odpowiedzi (ang. call-and-response)
z oryginalnych afrykasko-amerykaskich pieni niewolnikw (ang. field hollers) przy
akompaniamencie perkusji i basu razem tworz konwersacyjny rytm. Dobry
jazz angauje suchacza. Trudno przej obojtnie obok tak grajcego muzyka jazzowego. Szybko, bezwiednie popadamy w stan, w ktrym nie sposb odrni sztuki
od aktora. Henri Matisse zauway kiedy: Prawdziwy jazz jest wspaniay z kilku
powodw: talentu do improwizacji, wawoci i poczucia jednoci ze suchaczami.
Podczas projektowania warstwy interakcji mechanizmu wyszukiwania warto pamita o jazzie, poniewa zachowanie uytkownikw wyszukiwarek take jest konwersacj (patrz rysunek 3.1). Kiedy wyszukujemy, nasze czynnoci i reakcje s jak
bodce dla informacji i interfejsu. Pole wyszukiwania i odpowiednie kontrolki wpywaj na sposb wyszukiwania, a to, co odnajdujemy, zmienia obiekt poszukiwa.
Zachowania zacieraj wic granic pomidzy uytkownikiem a systemem. Praca
z wyszukiwark jest typowym przykadem czynnoci nabierajcej pynnoci.
W najlepszym razie wyszukiwanie cakowicie pochania uwag uytkownika, zaburzajc jego poczucie czasu. Jestemy zagubieni w najlepszym znaczeniu tego sowa.
Nasze zaangaowanie oczywicie nie jest dzieem przypadku. Jak zauway Mihaly
Csikszentmihalyi, takie czynnoci jak wykonywanie utworw muzycznych, taczenie, eglowanie czy gra w szachy s wyjtkowo wcigajce, poniewa zaprojektowano je z myl o zapewnianiu optymalnych dozna1. Oferuj wyzwanie, zapewniaj kontrol, wspomagaj uczenie si, nagradzaj umiejtnoci i umoliwiaj
obserwacj osigni. Co ciekawe, moemy zarwno projektowa z myl o wciganiu uczestnikw, jak i sami dawa si wciga w proces projektowania, poniewa
opisywany proces jest sporym wyzwaniem i jednoczenie nagradza utalentowanych
projektantw gotowych woy serce w swoje dzieo.

Mihaly Csikszentmihalyi, Flow: The Psychology of Optimal Experience, Harper.

68

Rozdzia 3. Zachowanie

Rysunek 3.1. Zachowanie jest konwersacj

Oczywicie adna muzyka nie jest pisana w prni, bez adnego dowiadczenia czy
inspiracji. Jak powiedzia Wynton Marsalis: Improwizacja to nie kwestia tworzenia
czego od zera. Jazz, jak kady jzyk, ma swoj gramatyk i sownictwo. Nic nie
jest prawidowe lub bdne pewne wybory s po prostu lepsze od innych. Podobnie, istniej wzorce zachowa, elementy interakcji i zasady projektowania stanowice wartociowe elementy skadowe mechanizmu wyszukiwania. Wymienione
elementy stale s w ruchu. Nowe rozwizania technologiczne powoduj, e tradycyjna
interakcja za pomoc myszy i klawiatury traci popularno na rzecz ekranw dotykowych lub wrcz dowolnych gestw wykonywanych w powietrzu. A co z naszymi
wzorcami i zasadami? Te s ponadczasowe podlegaj ograniczeniom i inspiracjom wynikajcym z charakteru informacji i naturalnych moliwoci naszych
zmysw.

WZORCE ZACHOWA
Wyszukiwanie koczy si wyjciem. Uytkownicy zawsze opuszczaj witryn. Pytanie brzmi: dlaczego to robi? Czy znaleli to, czego szukali, czy zniechceni zrezygnowali z dalszych prb? Czy znaleli zbyt mao, czy za duo? A moe wyszukiwarka dziaaa za wolno? Opuszczenie wyszukiwarki to wzorzec wymagajcy
gbszej analityki (patrz rysunek 3.2). Musimy zna powd opuszczania witryny
przez uytkownikw.
Czy na przykad zniechcamy uytkownikw stron pozbawion jakichkolwiek
wynikw? Jeli tak, by moe wystarczy poprawi interfejs. Na rysunku 3.3 pokazano przykad witryny internetowej Uniwersytetu Yale, ktrej wyszukiwarka internetowa nie okrela wprost stanu wyszukiwania (na przykad w formie komuni-

Wzorce zachowa

Rysunek 3.2. Wyjcie jest najbardziej popularnym wzorcem

Rysunek 3.3. Brak wynikw wyszukiwarki witryny Uniwersytetu Yale

katu Nie znaleziono wynikw.), tylko oferuje atrakcyjn kombinacj oceny zapytania i proponowanych nastpnych krokw. Warto te rozway sugerowanie
popularnych stron i zapyta.
Jeszcze lepszym rozwizaniem jest pomoc uytkownikom w cakowitym unikaniu
stron pozbawionych wynikw wyszukiwania. Na rysunku 3.4 pokazano przykad

69

70

Rozdzia 3. Zachowanie

Rysunek 3.4. Sklep Amazon robi wszystko, aby unikn koniecznoci wywietlenia strony
bez wynikw wyszukiwania

dziaania mechanizmu automatycznego rozszerzania czciowych dopasowa polegajcego na usuwaniu z acucha zapytania nierozpoznanych sw kluczowych
takie rozwizanie znacznie ogranicza ryzyko trafienia w lepy zauek w wyszukiwarce
sklepu Amazon. Nawet dopasowanie do czci wyszukiwanych sw moe by
lepsze od braku dopasowa.
Uytkownicy, ktrzy nie opuszczaj wyszukiwarki, poprawiaj swoje zapytania.
Zawanie jest drugim najbardziej popularnym wzorcem wyszukiwania (patrz
rysunek 3.5). Nasze pocztkowe zapytanie jest jak zarzucanie szerokiej sieci. Po
zapoznaniu si z wynikami moemy zmodyfikowa oryginalne zapytanie. W pewnych przypadkach mona unikn tego pocztkowego braku precyzji. Szersze pole
wyszukiwania zachca do wpisania wikszej liczby sw. Ten sam efekt mona osign, prezentujc due (i coraz wiksze) fragmenty treci. W praktyce rednia liczba
sw kluczowych na zapytanie wpisywane w wyszukiwarce zwikszya si w ostatnich
latach z 1 2 do 2 3.
Wstpne wyszukiwanie ma jednak swoje ograniczenia. Konstruowanie zapytania
z wyprzedzeniem jest o tyle trudne, e nie znamy wielkoci ani struktury przeszukiwanego indeksu. Kiedy wyszukujemy bez planu, nawet tradycyjna strona z wynikami
wyszukiwania moe by bezcennym rdem informacji. Charakter fragmentw
i liczba wynikw pozwala okreli, jak (i do jakiego stopnia) naley zawzi wyniki.
W szczeglnoci algorytmy odpowiedzialne za zapewnianie rnorodnoci eliminuj

Wzorce zachowa

Rysunek 3.5. Doskonalenie zapytania

z wynikw synonimy. Po zapoznaniu si z przykadowymi wynikami dla kadego

znaczenia (na przykad po odrnieniu deski do prasowania od deski surfingowej)
moemy tak poprawi zapytanie, aby byo jednoznaczne.
Co wicej, nawigacja fasetowa uzupenia t map o metadane. Na rysunku 3.6 pokazano witryn Artist Rising, ktra oferuje moliwo sprecyzowania, jakiego rodzaju
zdjcia lub grafiki nas interesuj. Moemy te doskonali nasze zapytania poprzez
wyszukiwanie w ramach ju wygenerowanych wynikw. Nawet funkcja sortowania
moe by z powodzeniem wykorzystywana do ograniczania liczby prezentowanych
pozycji. Witryna Artist Rising oferuje wiele sposobw zawania wynikw.

Rysunek 3.6. Nawigacja fasetowa umieszcza na mapie dodatkowe metadane

71

72

Rozdzia 3. Zachowanie

Przeciwny wzorzec wystpuje do rzadko. Rozszerzanie wynikw jest mao popularne, po czci dlatego, e zdecydowana wikszo uytkownikw rozpoczyna
wyszukiwanie od zarzucania szerokiej sieci, a po czci dlatego, e funkcja rozszerzania jest trudniejsza w implementacji. Oczywicie uytkownicy zawsze mog
prbowa wpisywa bardziej oglne zapytania (patrz rysunek 3.7). Kiedy dla zapytania niskotuszczowe ciasto cytrynowe nie otrzymamy adnych wynikw, moemy zrezygnowa ze sowa niskotuszczowe i sprbowa ponownie. Moemy te
rezygnowa z ogranicze na przykad na witrynie Artist Rising moemy wycofywa wybrane wczeniej wartoci faset lub usuwa sowa kluczowe, aby rozszerza
zapytanie. Zawsze moemy wykona krok wstecz.

Rysunek 3.7. Zarzucanie szerszej sieci

Okazuje si jednak, e bezporednia obsuga rozszerzania jest zjawiskiem do

rzadkim. Odpowiednia funkcja najczciej wystpuje w tezaurusach baz danych
bibliotek (patrz rysunek 3.8), gdzie sownictwo o okrelonej strukturze i do ryzykowne oczekiwania dotyczce wiedzy uytkownikw daj projektantom poczucie
swobody w odsanianiu hierarchii (a czasem polihierarchii) czcej szersze terminy.
Zamiast formalnej hierarchii aplikacje wyszukiwarek czsto oferuj uytkownikom
moliwo rozszerzania (lub przynajmniej badania) poprzez prezentowanie wyrae
pokrewnych w ramach dopasowanych kategorii (patrz rysunek 3.9).
Niezalenie od interfejsu najbardziej dowiadczeni uytkownicy wyszukiwarek stosuj unikatow strategi rozszerzania znan jako wzrost pery (ang. pearl growing).
Wystarczy znale dobry dokument i uwanie przejrze jego tre i metadane
w poszukiwaniu sw do kolejnych zapyta i ewentualnych innych wskazwek
(patrz rysunek 3.10). Moemy szuka w ten sposb dalszych artykuw na dany
temat, wedug autora lub z tego samego rda. Wzrost pery to stara sztuczka doskonale znana bibliotekarzom.
Okazuje si, e strategi wzrostu pery mona te zaimplementowa w ramach
udostpnianego interfejsu. Bodaj najbardziej znanym przykadem jest mechanizm
podobnych czy w wyszukiwarce Google. Mimo e algorytmy odpowiedzialne za
dziaanie tego mechanizmu mog by bardzo skomplikowane, zadaniem uytkownika jest tylko kliknicie cza (patrz rysunek 3.11).

Wzorce zachowa

Rysunek 3.8. Przegldarka tezaurusa witryny CSA Illumina

Rysunek 3.9. Dopasowywanie kategorii i terminw pokrewnych

73

74

Rozdzia 3. Zachowanie

Rysunek 3.10. Strategia odnajdywania podobnych wynikw

Rysunek 3.11. Odnajdywanie podobnych wynikw

Podobnie, systemy dobierania muzyki uatwiaj odnajdywanie piosenek poprzez

porwnywanie atrybutw, ocen i filtry uwzgldniajce utwory, ktre ju znamy.
Wyszukiwarki serwisw Last.fm i Pandora uwzgldniaj przede wszystkim pozytywne
i negatywne oceny poszczeglnych piosenek (patrz rysunek 3.12).

Rysunek 3.12. Podobne kontrolki serwisw Last.fm i Pandora

Usuga iTunes Genius (patrz rysunek 3.13) w wikszym stopniu uwzgldnia utwory
ju znajdujce si w osobistej kolekcji uytkownika. We wszystkich trzech przypadkach metoda wzrostu pery jest przyjemna i atwa w uyciu. Dla pojedynczej
piosenki moemy znale wiele podobnych utworw, ktre moemy nastpnie
kupi i umieci w swoim odtwarzaczu.
Omwione do tej pory wzorce zachowa, czyli wychodzenia, zawania, rozszerzania i wzrostu pery, s ponadczasowe. W wiecie wyszukiwania s czym zupenie
naturalnym. Pozostae wzorce (i tzw. antywzorce) powstay w wyniku bdnych
projektw. Na przykad powtarzalne przechodzenie pomidzy stron z wynikami
a poszczeglnymi wynikami okrela si mianem przeskakiwania (ang. pogosticking).
Odrobina takiego przeskakiwania oznacza, e uytkownicy prbkuj wyniki (patrz
rysunek 3.14). Naley si z tym liczy. Jeli jednak przeskakiwanie jest zbyt czste
i intensywne, przestaje by oznak prbkowania staje si symptomem bdu.

Wzorce zachowa

Rysunek 3.13. Usuga Genius firmy Apple

Rysunek 3.14. Przeskakiwanie jest antywzorcem

75

76

Rozdzia 3. Zachowanie

By moe nasze fragmenty treci i metadane na tyle nieskutecznie ilustruj zawarto poszczeglnych wynikw, e zmuszaj uytkownikw do odwiedzania poszczeglnych stron. Jeli odwiedzanie kolejnych stron wskazanych w wynikach wyszukiwania jest podanym wzorcem, potrzebujemy rozwiza obsugujcych to
zachowanie. Serwis Cooliris (patrz rysunek 3.15) wykorzystuje ekran dotykowy telefonu iPhone do umoliwiania uytkownikom liniowego kartkowania obrazw.

Rysunek 3.15. Serwis Cooliris nie wymaga przeskakiwania

Witryna Lands End (patrz rysunek 3.16) gwarantuje, e wszelkie metadane i funkcje
potrzebne uytkownikom s dostpne na poziomie galerii wynikw wyszukiwania.
Pojedyncza strona nie zawiera, co prawda, zbyt wiele wynikw, ale przynajmniej
oferuje bogate podsumowania. Czytelne zdjcie produktu z widoczn podeszw
(po przeniesieniu kursora myszy nad zdjcie), kolorem, nazw i cen to kombinacja
satysfakcjonujca zdecydowan wikszo uytkownikw.

Rysunek 3.16. Galeria wynikw wyszukiwania na witrynie Lands End (patrz kolorowa wkadka)

Wzorce zachowa

Innym popularnym antywzorcem jest tzw. szamotanie (ang. thrashing). W tym

wzorcu sabe punkty projektu kryj si w gowach uytkownikw i przybieraj
form nieuzasadnionego przywizania do pocztkowego zapytania. Uytkownik
wpisuje pierwsze zapytanie, po czym mimo kiepskich wynikw decyduje si na
wprowadzanie drobnych zmian, zamiast podejmowa prby poszukiwania nowych
rozwiza (patrz rysunek 3.17).

Rysunek 3.17. Szamotanie jest wynikiem nadmiernego przywizania do oryginalnego zapytania

Na przykad uytkownik szukajcy informacji o koncercie moe prbowa wpisywa wiele zapyta rozpoczynajcych si od pseudonimu muzyka (w tym przypadku
zapisanego z bdem), zamiast wpisa pene nazwisko artysty:
sachmo
sachmo koncert
sachmo koncert jazzowy
sachmo festiwal jazzowy
sachmo festiwal muzyczny
sachmo letnia impreza
Na rysunku 3.18 pokazano stron wyszukiwarki Yahoo! ilustrujc dwa sposoby
radzenia sobie z tym niepodanym wzorcem. Po pierwsze, mechanizm automatycznego uzupeniania pomaga uytkownikom unika literwek i konstruowa prawidowe zapytania od samego pocztku. Po drugie, mechanizm automatycznych
sugestii moe proponowa zapytania pokrewne, ktre nie obejmuj oryginalnego
wyraenia. Funkcja automatycznych sugestii wykorzystuje zgromadzone dane
o wczeniejszych zapytaniach wyraenia wpisywane przez uytkownikw po
nieudanych prbach wyszukiwania. Takie rozwizanie pozwala tworzy zwizki
semantyczne i uatwia uytkownikom, ktrzy rozpoczynaj prac od nieprawidowych zapyta, rezygnacj ze zej drogi i dalsze, ju prawidowe korzystanie z wyszukiwarki.
W praktyce identyfikacja pokrewnych zagadnie przez mechanizm automatycznych
sugestii uatwia uytkownikom ruch w przd (doskonalenie zapyta), ruch wstecz
(rozszerzanie zapyta) oraz ruch w bok (odnajdywanie pokrewnych materiaw).

77

78

Rozdzia 3. Zachowanie

Rysunek 3.18. Mechanizmy automatycznego uzupeniania i automatycznego sugerowania

w wyszukiwarce Yahoo!

Jak wiele dobrych wzorcw projektowych, automatyczne sugestie realizuj kilka

zada jednoczenie. To tymczasowe rozwizanie ponadczasowego problemu.
W kocu zarwno automatyczne uzupenianie, jak i automatyczne sugerowanie
zapyta stosuje si w internecie od niedawna, poniewa ich implementacja jest
moliwa dziki postpowi technologicznemu. Nawet wtedy, gdy podstawowe wzorce
zachowa pozostaj niezmienione, wzorce projektowe musz by dostosowywane
do nowych moliwoci wanie dlatego powinnimy stale obserwowa innowacje
w wiecie elementw interakcji.

ELEMENTY INTERAKCJI
W dziedzinie projektowania interakcji mamy obecnie do czynienia z wyjtkowym
okresem. Pojawiajce si technologie zmieniaj nasz ocen tego, co moliwe,
nowe platformy kwestionuj stare metafory, nowe czujniki angauj dodatkowe
zmysy, a wszystkie te innowacje burz nasze dotychczasowe wzorce. Ta rzadka
seria ewolucyjnych zmian cakowicie zmienia nasze oczekiwania wzgldem interfejsw. Mimo e komputery biurkowe wci dzier palm pierwszestwa, gwatowny rozwj urzdze mobilnych wymaga naszej uwagi. Nowe czujniki i metody
wprowadzania danych (jak ekrany wielodotykowe czy interakcja gestami) wymagaj
staej obserwacji. Bogate interfejsy uytkownika zacieraj granice dzielce strony
internetowe, aplikacje biurkowe i aplikacje mobilne. Wzorce projektowe s przenoszone pomidzy platformami na rozmaite, czsto nieprzewidywalne sposoby.
W tych gwatownych czasach warto szczegowo przeanalizowa elementy interakcji, ktre wi nas z poszczeglnymi platformami.
Komputery biurkowe s obecnie najbardziej popularn platform i jednoczenie
gwn bram do wyszukiwania. Wszyscy znamy standardow konfiguracj: mysz,
klawiatur, monitor, goniki, a czasem take kamer i mikrofon do wprowadzania
danych audiowizualnych. Od czasu do czasu uywamy te kombinacji Ctrl+C z tradycyjnego interfejsu wiersza polece (CLI), jednak w wikszoci przypadkw ogra-

Elementy interakcji

niczamy si do klikania i podwjnego klikania kontrolek graficznego interfejsu

uytkownika (GUI) oraz przecigania i upuszczania plikw i folderw. Granica dzielca aplikacje biurkowe i aplikacje internetowe jest do cienka witryny i strony
z adresami URL naley traktowa jako nowe miejsca dla starych rozwiza. Ograniczymy si wic do wspomnienia o tych rnicach. Przeniesienie wskanika myszy, kliknicie czy nacinicie klawiszy nale do podstawowych zdarze, natomiast
menu, przyciski, pola formularzy i cza stanowi podstawowe idiomy interfejsw.
W wiecie wyszukiwania bogate elementy obejmuj zachcajce widgety, kalendarze
technologii AJAX, suwaki DHTML-a, gwiedziste menu, dynamiczne przejcia,
pprzezroczyste warstwy, wyniki z moliwoci przecigania i upuszczania oraz
zaawansowane kreatory zapyta (patrz rysunek 3.19). Moemy wic mwi o ogromnej swobodzie, co samo w sobie stanowi cz problemu. W warunkach braku solidnego procesu projektowania i przemylanych regu wymienione elementy bogatego
interfejsu mog stanowi puapk, w ktr bd wpadali nasi uytkownicy. Zbyt
czsto powicamy uyteczno i dostpno dla atrakcyjnego wygldu i sposobu
obsugi. Odnalezienie waciwej rwnowagi nie jest atwe. Bogactwo palety, ktr
dysponujemy, prowadzi do paradoksu wyboru. Co wicej, wci jestemy na etapie
uczenia si, jak skutecznie projektowa wyniki.

Rysunek 3.19. Suwaki do filtrowania wynikw

Oczywicie nie moemy ogranicza si do komputerw biurkowych. Obecnie obserwujemy bezprecedensowy rozwj nowej platformy urzdze mobilnych. Dla
wielu projektantw wanie internet mobilny stanowi najbardziej kuszcy ksek.
O ile niewielkie ekrany i niezbyt rozbudowane klawiatury stanowi nowe ograniczenia, o tyle internet mobilny otwiera te bajeczne moliwoci w zakresie interakcji
(patrz rysunek 3.20). Ekrany wielodotykowe umoliwiaj pukanie w celu otwierania, rozciganie w celu przybliania oraz przesuwanie w celu przewijania. Kamera,
mikrofon i goniki oferuj moliwo wykonywania wielozmysowych operacji
wejcia-wyjcia, a nasze urzdzenia mobilne wiedz, gdzie si znajduj. Pooenie, wysoko, kierunek i szybko to nowe dane wejciowe dla zapyta, ktrych
nie moemy ignorowa. Nowe czujniki zapowiadaj er interakcji gestami przy
uyciu urzdze mobilnych nowej generacji.

79

80

Rozdzia 3. Zachowanie

Rysunek 3.20. Interakcja z wyszukiwark mobiln

Chocia istniej ju przestarzae urzdzenia, jak Clapper, i popularne urzdzenie

sterujce konsoli Wii, swobodna interakcja gestami wci nie osigna dojrzaoci.
Nasza obecno wystarczy do otwierania drzwi, a nasze donie powoduj pynicie
wody i uruchamianie suszarek do rk. Okazuje si jednak, e nasze sownictwo gestw jest do ograniczone i wyjtkowo rzadko uywane do wyszukiwania. Skoro
wspomnielimy ju o podstawowych zjawiskach, warto podkreli, e wcale nie
jest zbyt wczenie na tworzenie interfejsw zapyta sterowanych gestami i idiomw
na potrzeby swobodnego odkrywania. W praktyce wanie teraz powinnimy myle o tym, jak chcemy wyszukiwa informacje (zanim nastpna fala gonych innowacji przesoni nam perspektyw).
Warto rozpocz od obserwacji wasnych zmysw. Widzimy, syszymy, dotykamy,
czujemy i smakujemy. Moemy odczuwa przyspieszenie, rwnowag, strach
i wzgldn pozycj naszych czci ciaa. Odczuwamy te wibracje. Jak mona wykorzysta te kanay do wprowadzania i odbierania informacji? Ju teraz moemy
wyszukiwa, piewajc. Co dalej? Oczywicie nie powinnimy ogranicza si do
swoich zmysw, poniewa rozmaite inne czujniki mog by rdem nieporwnanie bogatszych informacji. Pooenie to dopiero pocztek. Czujniki mog wykrywa i mierzy wszystko, od pl magnetycznych i zanieczyszczenia powietrza po
ttno i poziom glukozy. Wspczesne urzdzenia przeksztacaj codzienne obiekty
w bezprzewodowe przyrzdy informacyjne (patrz rysunek 3.21). Rczka parasola
wibruje przed deszczem, a kula wieci rnymi kolorami, ilustrujc w czasie rzeczywistym trendy na rynku kapitaowym, natenie ruchu ulicznego, stenie pykw itp.
Czujniki umoliwiaj nam wyszukiwanie dalej, ni sigaj nasze zmysy, a w poczeniu z nowymi urzdzeniami i bogatymi interfejsami cakowicie zmieniaj to, jak,
co, gdzie, kiedy i dlaczego odkrywamy.

Elementy interakcji

Rysunek 3.21. Informacje widoczne ju na pierwszy rzut oka dziki wieccej kuli

Do wyszukiwania uywamy te rnych kanaw. W przypadku wielu aplikacji

ograniczanie lub przewidywanie kontekstu stosowania jest po prostu niemoliwe.
W tej sytuacji doznania uytkownika wymykaj si spod kontroli projektantw.
Proces wyszukiwania moe rozpocz si w domu, przy uyciu tradycyjnego komputera, by kontynuowany kolejno za porednictwem urzdzenia mobilnego w autobusie i terminalu w sklepie, by wreszcie zakoczy si obejrzeniem produktu na
pce sklepowej. Co wicej, uytkownik moe zosta sprowokowany do wyszukiwania przez reklam telewizyjn lub radiow bd przez billboard ustawiony przy
autostradzie.
Wanie dlatego najlepiej zarzdzane organizacje powicaj swj czas na analiz
punktw stycznoci za porednictwem rozmaitych mediw i kanaw. Badania
dozna uytkownikw oraz stosowanie zasad projektowania usug w celu identyfikacji, optymalizacji i dostosowania wszystkich wanych interfejsw i interakcji do
produktw, usug i marek pozwala organizacjom na podnoszenie satysfakcji klienta
i tym samym popraw wasnych wynikw finansowych. Bodaj najbardziej
znanym przykadem takiego dziaania jest firma Apple. Odrbne funkcje i relacje
czce odtwarzacz iPod w doni uytkownika, aplikacj biurkow iTunes i serwis
internetowy iTunes Store stanowi jeden spjny model. O sukcesie firmy Apple
zdecydowao umieszczenie najwaniejszych funkcji na waciwych platformach.
Jak pokazano na rysunku 3.22, odtwarzamy muzyk, korzystajc z jednego urzdzenia, zarzdzamy caoci za porednictwem komputera i dokonujemy zakupu
w sklepie. Oczywicie wszystkie te funkcje oferuj moliwo wyszukiwania. Wczesne
wersje iPodw i iPhonew nie udostpniay wyszukiwarek. Na pewnym etapie
takie wyszukiwarki nie byy konieczne. Obecnie wyszukiwarka jest jednoczenie
funkcj i wielokanaow okazj, poniewa firma Apple potrzebuje lepszego projektu
i rozwiza integrujcych wiele platform. Aplikacje wyszukujce wreszcie s dostpne,
jednak ich dziaanie jest dalekie od ideau!

81

82

Rozdzia 3. Zachowanie

Rysunek 3.22. Liczne interfejsy firmy Apple

Istnieje wiele mniej znanych przykadw. Na przykad serwis Ann Arbor Library
zapewnia przemylane doznania uytkownikw wyszukiwarek korzystajcych
z wielu kanaw. Zapytanie na katalogu wpisane za porednictwem komputera
biurkowego lub urzdzenia mobilnego oferuje moliwo zamwienia danego
tytuu dla kadego wyniku (patrz rysunek 3.23). Stali klienci mog liczy na dostarczanie ksiek i innych towarw do lokalnych filii oraz na otrzymywanie poczt
elektroniczn powiadomie o dostarczonych produktach. Stali klienci mog te
ukada ksiki na zarezerwowanych pkach lub w wygodnych szafkach (dostpnych take po godzinach pracy biblioteki). Co ciekawe, wiele da powoduje, e
biblioteka kupuje wicej kopii mamy wic do czynienia z ptl zwrotn doskonalenia wynikw.
Istniej te rozwizania, ktre powinny prowokowa nas do mylenia. Na przykad
na rysunku 3.24 pokazano inteligentny stojak na wina autorstwa firmy ThingM,
w ktrym do ledzenia poszczeglnych butelek wykorzystano mechanizm identy-

Zasady projektowania

Rysunek 3.23. Projekt wielokanaowy serwisu Ann Arbor District Library

Rysunek 3.24. Interfejs wyszukiwania fasetowego serwisu WineM (patrz kolorowa wkadka)

fikacji radiowej (RFID). Urzdzenie mobilne umoliwia uytkownikom odnajdywanie kolekcji win wedug lat, regionw, typw i cen. Kolorowe diody LED przeksztacaj stojak i butelki w fizyczny interfejs wynikw wyszukiwania fasetowego.
W wiecie interakcji wyszukiwarek din dawno zosta uwolniony z butelki. Moemy
zrobi tak wiele w ramach pola wyszukiwania i poza tym polem, e nie ma ju
odwrotu. Moemy jednak ulec pokusie poprzestania na dawnych ograniczeniach.
Swoboda w wynajdywaniu idiomw i zmianie kanaw powoduje, co prawda, e
projektowanie jest ciekawsze, ale te stanowi spore utrudnienie w naszej pracy.
Tworzenie rozbudowanych, trudnych do opanowania interfejsw jest najkrtsz
drog do zniechcenia uytkownikw. Wanie dlatego musimy konsekwentnie
trzyma si swoich zasad.

ZASADY PROJEKTOWANIA
Ludzie zaczli stosowa pigmenty, jak ochry czy tlenki elaza, do zdobienia cia okoo 400 tys. lat przed Chrystusem. Wynalezienie jzyka pisanego zajo nam troch
wicej czasu (nastpio to zaledwie 5500 lat temu). Od tamtego czasu nieustannie
tworzymy i czymy obrazy, symbole i sowa do komunikowania idei i znacze.
Mielimy wic sporo czasu na sprawdzenie rozmaitych projektw w praktyce.

83

84

Rozdzia 3. Zachowanie

Czas to oczywicie ostatni zasb, ktrym dysponujemy, kiedy uytkownicy odwiedzaj nasz interfejs wyszukiwania. Ju w pierwszych 250 milisekundach swoje
magiczne zadania wykonuj zmienne reprezentujce wielko, ksztat, pozycj,
wyrwnanie, orientacj, kolor i tekstur (patrz rysunek 3.25). Prawidowo opracowany interfejs ujawnia swoje podstawowe funkcje i ukad przed nasz wiadomoci,
zanim zdymy pomyle.

Rysunek 3.25. Zmienne witryny stacji BBC (patrz kolorowa wkadka)

Wspomniana magia nie jest zjawiskiem naturalnym. Najlepsze interfejsy s dzieem utalentowanych projektantw, ktrzy wiedz, jak uywa wizualnej hierarchii
do organizowania informacji i sugerowania czynnoci, oraz ktrzy doceniaj znaczenie szczegw. Na przykad wczesne wersje funkcji sprawdzania pisowni w ramach
wyszukiwarki Google proponoway na pocztku strony: Jeli nie znalaze tego, czego
szukae, po czym nastpowaa sugerowana pisownia. Nikt nie zwraca uwagi na
ten komunikat, zatem firma Google przetestowaa krtsze wersje, na przykad Czy
chodzio Ci o:, prezentowane nad i pod wynikami okazao si, e nowy komunikat
i sposb prezentacji spowodoway ogromny wzrost zainteresowania t funkcj.
Projektanci musz te wykazywa wraliwo na kontekst. Na przykad w wiecie
muzyki animowany, trjwymiarowy interfejs serwisu Cover Flow ma sens. Przegldanie kolorowych okadek w trakcie suchania muzyki i szukania ulubionych
piosenek czy albumw moe sprawia uytkownikowi sporo radoci. Projekt w tej
formie nie sprawdziby si jednak w innych kategoriach. Z pewnoci nie powinien
by stosowany w wyszukiwarce internetowej, ktrej uytkownicy oczekuj przede
wszystkim prostoty i szybkoci. Dyrektor ds. dozna uytkownika wyszukiwarki
Google Irene Au wyjania to w nastpujcy sposb:

Zasady projektowania

Wielu projektantw chce zwiksza grubo linii lub dopenienia, aby ich
interfejsy sprawiay wraenie bardziej ywych. wiadomie zrezygnowalimy z podobnych zabiegw. Chcemy umieci moliwie wiele informacji w grnej czci strony. Odkrylimy, e gsto informacji jest jednym
z czynnikw decydujcych o efektywnoci dozna uytkownika. Naszym
celem jest obsugiwanie i kierowanie dalej uytkownikw naprawd
szybko. Wszystkie nasze decyzje projektowe maj realizowa wanie t
strategi2.
Przytoczona wypowied ujawnia pewien wany wymiar projektowania. Nie moemy
koncentrowa si wycznie na wygldzie interfejsu. Jak powiedzia kiedy Steve
Jobs, projekt to sposb dziaania. Projekt wizualny decyduje o pierwszym wraeniu, ma trway wpyw na ocen systemu, jednak efekt aureoli nie trwa bez koca.
Projekt interakcji jest brakujcym ogniwem pozwalajcym dopasowa nierwne
krawdzie pomidzy uytkownikiem a systemem. Wanie ten aspekt ma zasadnicze znaczenie dla pynnej interakcji. Co wicej, opisywana praktyka jest stosunkowo nowa mimo e tworzymy rozmaite narzdzia od ponad miliona lat, prace
nad interaktywnym oprogramowaniem nie trwaj nawet 100 lat. Skoro dysponujemy ju podstawow wiedz, moemy przystpi do definiowania pierwszych zasad,
z ktrych znaczna cz znajduje bezporednie zastosowanie w wiecie wyszukiwania.

KONSTRUKCJA PRZYROSTOWA
Moemy osiga wprost niewiarygodne rezultaty, jeli tylko przezwyciymy pocztkowy strach i opr. Czsto jednak w ogle nie potrafimy zacz. Nierzadko paraliuje nas liczba zada, a zoono interfejsu wielu projektantw wprawia w zakopotanie. Wymienione zjawiska s tak popularne, e mona si pokusi o zebranie
kolekcji inspirujcych idiomw. Czas przystpi do dziaania. Nie od razu Rzym
zbudowano. Nawet tysicmilowa podr musi rozpocz si od pojedynczego
kroku. Nie wolno zmusza uytkownikw do mylenia! Projektanci powinni wzi
sobie te sowa do serca, poniewa wanie wyszukiwarki bardzo czsto s rdem
zniechcenia. Skomplikowany interfejs jest jak cega w murze. Nie do, e zmusza
uytkownikw do mylenia, to jeszcze sprawia, e czuj si gupi, co jak nietrudno odgadn jest niewybaczalnym bdem. Musimy wic stale mie na
uwadze paradoks aktywnego uytkownika i oferowa moliwo rozpoczynania
wyszukiwania od jednego dwch sw kluczowych. Wskazwki lub zachty
w ssiedztwie pola wyszukiwania lub w samym polu powinny pokazywa, co i jak
mona wyszukiwa, a pole powinno oferowa mechanizm automatycznego uzupeniania i elastyczny, tolerancyjny format zapyta (patrz rysunek 3.26). Dlaczego
uytkownicy mieliby si martwi o pisowni lub skadni, skoro to nasze zadanie?
2

Googles Irene Au: On Design Challenges, Business Week (18 marca 2009), www.
businessweek.com/innovate/content/mar2009/id20090318_786470.htm.

85

86

Rozdzia 3. Zachowanie

Rysunek 3.26. Przykad tolerancyjnego formatu wyszukiwarki serwisu Amazon

Zacznijmy od dobrych rozwiza standardowych, po czym sprbujmy je wzbogaci o fasety, filtry i inne intrygujce elementy. Musimy te zadba o obsug bezpiecznego przegldania poprzez udostpnienie funkcji wycofywania zmian, aby
uytkownicy mogli atwo modyfikowa parametry, cofa si lub rozpoczyna procedury wyszukiwania od pocztku. Musimy robi, co w naszej mocy, aby obnia
koszty wyszukiwania i ogranicza bariery wejcia, poniewa trudno mwi o iteracyjnoci i interaktywnoci procesu wyszukiwania, jeli uytkownicy rezygnuj,
zanim dobrze zaczn. Ludzie bd budowali doskonae zapytania stopniowo, po
kolejnych klikniciach wystarczy przeprowadzi ich przez pocztek i stale oferowa przynajmniej po jednym nastpnym kroku.

POSTPUJCE UJAWNIANIE TAJEMNIC

Zdobywane dowiadczenie w pracy z narzdziem lub zadaniem zwykle zmienia
punkt optymalnej rwnowagi pomidzy potencjaem a prostot. Pocztkowo uytkownicy nie chc by zarzucani nadmiern liczb funkcji. Z czasem jednak bardziej
zaawansowane opcje mog by podane. Metoda postpujcego (progresywnego)
ujawniania tajemnic (ang. progressive disclosure) pozwala odoy odkrywanie tych
rozbudowanych lub wyspecjalizowanych funkcji na przykad do drugiego ekranu,
aby uatwi korzystanie z oprogramowania i przyspieszy proces jego poznawania.
Musimy projektowa aplikacje wymagajce moliwie niewielkiego wysiku fizycznego
i umysowego, na przykad przy uyciu narzdzi kontekstowych (jak wywietlanie
wskazwek w reakcji na przeniesienie kursora myszy, aby nie zakca interfejsu).
Dobrym przykadem praktycznego zastosowania metody postpujcego ujawniania tajemnic jest serwis Google Maps (patrz rysunek 3.27), gdzie wprost perfekcyjnie

Zasady projektowania

Rysunek 3.27. Postpujce ujawnianie tajemnic w serwisie Google Maps (patrz kolorowa wkadka)

zastosowano zasad, by prezentowa uytkownikowi tylko to, czego naprawd chce.

Pocztkowy interfejs ma posta prostej mapy z nakadk dla tak popularnych zada
jak strzaki kierunkw. Kliknicie powoduje wywietlenie kolorowej warstwy natenia ruchu, a umieszczenie kursora myszy nad obiektem powoduje wywietlenie
dodatkowych opcji. Firmie Google udao si zaprojektowa mechanizm ujawniania
tajemnic reagujcy na czynnoci uytkownikw.
Podobnym progresywnym wzorcem projektowym jest nawigacja fasetowa. Uytkownicy mog rozpocz prac od kilku sw kluczowych, aby zakoczy wyszukiwanie po otrzymaniu kilku wynikw. Jeli chc, mog ignorowa fasety, jednak
stale maj wiadomo dostpnoci mechanizmu przyrostowego doskonalenia zapyta (patrz rysunek 3.28). Co wicej, sama liczba i charakter pl metadanych czsto
stanowi cenne wskazwki. Fasety umoliwiaj uytkownikom opanowywanie
sztuki wyszukiwania metod maych krokw, zamiast od razu zmusza ich do przechodzenia od pagrkw podstawowego interfejsu w Himalaje zaawansowanego
wyszukiwania.
Oglnie, mimo e metoda postpujcego ujawniania tajemnic moe sugerowa
konieczno stosowania trybw zapobiegajcych zamiecaniu podstawowego interfejsu przez wyspecjalizowane funkcje, naley bardzo ostronie wprowadza odrbne
stany systemu (w tym tryb zaawansowanego wyszukiwania). Odrbne tryby czsto
prowadz do bdw polegajcych na zapominaniu przez uytkownikw biecego
stanu, na podejmowaniu prb czynnoci waciwych innym trybom lub otrzymywaniu nieoczekiwanych wynikw. Wymienione problemy nie s nie do przezwycienia, jednak zwykle najprostszym rozwizaniem dla wszystkich jest zastosowanie interfejsu pozbawionego trybw. Podobnie, najlepszym rozwizaniem jest
zapewnienie elastycznoci polegajcej na moliwym odkadaniu pewnych wyborw.

87

88

Rozdzia 3. Zachowanie

Rysunek 3.28. Nawigacja fasetowa serwisu Triangle Research Libraries

Pozwlmy uytkownikowi od razu skorzysta z wyszukiwarki, aby mg zalogowa

si dopiero z poziomu strony z wynikami wyszukiwania (oczywicie bez utraty
tych wynikw). Oferowanie wielu cieek do tego samego celu pozwala jednoczenie
zaimplementowa wzorce konstruowania przyrostowego i postpujcego ujawniania tajemnic. Oznacza to, e za cen jednego wzorca realizujemy a dwie zasady.

NATYCHMIASTOWA ODPOWIED
Saba wydajno potrafi zepsu wraenie wywierane przez kady interfejs. Pynna
praca wymaga widocznej reakcji, najlepiej moliwie szybkiej i czstej. Jeszcze kilka
lat temu odpowied wyszukiwarki obejmowaa tylko wyniki wyszukiwania. Naszym
celem byo generowanie i dostarczanie tej odpowiedzi w czasie krtszym ni sekunda.
Stosowane obecnie mechanizmy automatycznego uzupeniania i automatycznych
sugestii powoduj, e wyniki mog nawet poprzedza waciwe zapytanie. Jak
w takim rodowisku miaoby wyglda punktualne odpowiadanie na zapytania?
Nasze systemy oczywicie nie zawsze mog generowa wyniki w uamku sekundy
std tak popularne animacje, efekty graficzne i inne wizualne przejcia ilustrujce

Zasady projektowania

postp i przycigajce uwag. Mimo e takie przejcia podnosz wiadomo funkcjonowania systemu, w adnym razie nie mog stanowi substytutu szybkoci,
ktr mona znacznie poprawi nawet w nieprzemylanych systemach, umoliwiajc iteracyjne i interaktywne doskonalenie zapyta w odpowiedzi na wyniki.
Na witrynie brytyjskiego oddziau Volkswagena zastosowano wyjtkowo subteln
form reagowania (patrz rysunek 3.29). W czasie korzystania z suwaka opcje wyczone z potencjalnych wynikw szarzej. Po zwolnieniu przycisku myszy odpowiednie opcje cakowicie znikaj, a pozostae samochody pynnie zajmuj nowe pozycje w mniejszym zbiorku wynikw. Zaadowanie tej bogatej aplikacji internetowej
zajmuje troch czasu, ale ju po uruchomieniu serwis dziaa pynnie i zapewnia
krtkie czasy odpowiedzi.

Rysunek 3.29. Natychmiastowa odpowied witryny brytyjskiego oddziau Volkswagena

WIDOKI ALTERNATYWNE
W przypadku wielu aplikacji optymalny widok rni si w zalenoci od uytkownika i zadania. Jeden rozmiar nigdy nie pasuje na wszystkich. Taka sytuacja
z pewnoci ma miejsce w wiecie wyszukiwania, gdzie idealna kombinacja metadanych zaley od intencji uytkownika. Liniowa lista wynikw wywietlonych
w formie tekstowych opisw moe wystarczy do szybkiego wyszukiwania, jednak
ju porwnanie produktw oferowanych w sklepie internetowym wymaga prezentacji
w formie tabelarycznej (najlepiej z obrazami). I odwrotnie, wyszukiwanie zjawisk
na danym obszarze zachca do stosowania mapy geograficznej z naniesionymi

89

90

Rozdzia 3. Zachowanie

danymi symbolicznymi. Poniewa nie kade zapytanie wystarczy do precyzyjnej

interpretacji intencji uytkownika, bardzo wane jest zapewnienie uytkownikowi
moliwoci wyboru.
Twrcy serwisu Viewzi zastosowali radykalne rozwizanie w tym obszarze (patrz
rysunek 3.30). Ta intrygujca aplikacja oferuje podstawowy wybr pomidzy maymi
i duymi obrazami, jednak na tym nie koczy si nietypowe dziaanie tego systemu.
Viewzi oferuje ponad 18 rnych sposobw przegldania wynikw wyszukiwania.
Mamy do dyspozycji midzy innymi prosty tekst, siatk obrazw, wykres w czasie,
tzw. chmur tagw i modny interfejs przewijania okadek. Z pewnoci nie jest to
model, ktry wszyscy powinni naladowa, jednak zastosowane rozwizania skaniaj
do przemylenia ukadw i perspektyw, ktre moemy sami zaoferowa naszym
uytkownikom.

Rysunek 3.30. Wiele widokw serwisu Viewzi

Take kolejno sortowania daje uytkownikom wybr alternatywnych widokw

(patrz rysunek 3.31). Poniewa uytkownicy rzadko przegldaj wicej ni jedn
stron z wynikami wyszukiwania, mechanizmy sortowania peni funkcj zblion
do filtrw. Kiedy sortujemy wedug popularnoci lub ocen, w praktyce ograniczamy
nasz widok wedug tych kryteriw. Zdarza si te, e sortujemy wedug daty lub
tytuu, aby byskawicznie przejrze list w poszukiwaniu znanego nam elementu.
Porzdek sortowania jest stosunkowo prostym sposobem przekazywania uytkownikom elastycznoci i kontroli.
Innym alternatywnym widokiem, o ktrym warto wspomnie, jest wersja dla uytkownikw niewidzcych. Jak pozostae funkcje aplikacji, wyszukiwanie powinno
by dostpne dla wszystkich. Interfejsy wyszukiwania i wynikw naley projektowa
z myl o moliwie prostej nawigacji przy uyciu syntezatorw mowy lub czytni-

Zasady projektowania

Rysunek 3.31. Kontrolki odpowiedzialne za porzdek sortowania

kw generujcych dane wynikowe w alfabecie Braillea. Warto te przeanalizowa

pod tym ktem sam tre witryny. Na przykad narzdzie Accessible Search firmy
Google analizuje kod jzyka HTML i na tej podstawie podnosi oceny stron atwiejszych do odczytania dla osb niewidomych i niedowidzcych. Jako projektanci
musimy dba o dostpno naszej treci i funkcji, konsekwentnie stosujc warstwow strategi postpujcego ulepszania (czyli przeciwiestwa zasady tzw. wdzicznej degradacji). To do nas naley udostpnienie wielu cieek do tych samych
informacji, tak aby wszystkim uytkownikom zapewni odpowiedni swobod
i waciwie obsuy t cz odbiorcw, ktra nie miaa tyle szczcia co my.

PRZEWIDYWALNO
W wikszoci aplikacji przewidywalno jest warunkiem uytecznoci. O skutecznoci, efektywnoci i satysfakcji zwykle moemy mwi wtedy, gdy uytkownicy
mog precyzyjnie przewidywa, co stanie si dalej. W wiecie wyszukiwania uytkownicy potrzebuj przewidywalnych funkcji i wynikw. Kontrolki musz by
atwe do odnalezienia i zrozumienia. Na przykad w serwisie The Gap zastosowano
prosty mechanizm wywietlania tzw. wiszcego zaproszenia (ang. hover invitation)
po przeniesieniu kursora myszy nad pole Quick Look uytkownik nie musi wic
przechodzi na odrbn stron produktu (patrz rysunek 3.32). Poniewa pole Quick
Look jest naturalnym elementem wynikw wyszukiwania, nie sposb go przegapi.
Z zupenie inn sytuacj mamy do czynienia w przypadku witryny agencji Bloomberg, ktrej funkcja obr, aby wywietli (ang. rotate-to-view) jest mniej widoczna,
ale raz odkryta dziaa znakomicie dziki swojej prostocie i spjnoci (patrz rysunek 3.33). Kiedy sterowanie gestami dziaa tak samo w caej aplikacji, efektywno
ronie wraz z nawykami wyrabianymi u uytkownika. Z czasem uytkownicy przyzwyczajaj si do niezbdnych gestw i wiedz, czego mog oczekiwa.
Rwnie wana jest spjno ukadu. Kiedy ludzie korzystaj z kontrolek, odnajduj je i rozpoznaj przede wszystkim wedug pooenia. Oznacza to, e podczas
projektowania interfejsw wyszukiwania i wynikw musimy mie na uwadze potg
pamici przestrzennej i zachowywa daleko idc konsekwencj w rozmieszczaniu
kontrolek i widgetw.

91

92

Rozdzia 3. Zachowanie

Rysunek 3.32. Wiszce zaproszenie na witrynie The Gap

Rysunek 3.33. Funkcja obr, aby wywietli witryny agencji Bloomberg

Wyszukiwanie dziaa prawidowo tylko wtedy, gdy wyniki s przewidywalne. Po

pierwsze, pole wyszukiwania powinno dziaa zgodnie z oczekiwaniami, czyli odpowiada generowaniem waciwych wynikw w odpowiedniej kolejnoci. Po dru-

Zasady projektowania

gie, kady wynik musi skutecznie zachca do kliknicia, prezentujc odpowiedni

kombinacj metadanych, aby uytkownicy mogli bez trudu oceni jego faktyczne
znaczenie. Nie moemy zmusza ludzi do zastanawiania si, co zostao ukryte ju
za pierwszymi drzwiami.

ROZPOZNAWANIE PONAD PRZYPOMINANIE

Warunkiem rozpoznawania jest znajomo kontekstu. Radzimy sobie z tym zadaniem wyjtkowo dobrze. Przy wczonym radiu zwykle potrafimy zapiewa teksty
tysicy piosenek. Przypominanie to przywoywanie z pamici bez kontekstu. Z tym
radzimy sobie zadziwiajco sabo. Kiedy wyczymy radio, nasza pami zanika
niemal do zera. Ta nierwnowaga wystpuje w przypadku wszystkich zmysw
i jako taka musi by brana pod uwag jako jeden z najwaniejszych aspektw w procesie projektowania. To jeden z powodw odejcia od interfejsu CLI na rzecz GUI.
Uytkownicy mieli problemy z przypominaniem sobie polece, ale bez trudu rozpoznaj przyciski i cza. W wiecie wyszukiwania powinnimy od pocztku zadba
o widoczno najcenniejszych opcji. W przeciwnym razie uytkownicy szybko
zapomn, co mog robi. Musimy wic znale rwnowag pomidzy tym celem
a deniem do postpujcego ujawniania tajemnic. Powinnimy zrwnoway
wywietlanie i ukrywanie. Musimy te oferowa narzdzia ograniczajce obcienie
krtkotrwaej pamici uytkownikw. Wyjtkowo dobrze radzi sobie z tym zadaniem firma Amazon. W czasie wyszukiwania uytkownicy stale maj dostp do
swoich koszykw, list zakupw i list ycze zapisanych w formie osobistych menederw pamici (patrz rysunek 3.34).
Okazuje si jednak, e Amazon wzmacnia nasz pami take poza waciw wyszukiwark. Uytkownik moe przecign uniwersalny przycisk listy ycze na
pasek narzdzi przegldarki, po czym dodawa elementy do tej listy przy okazji
przegldania oferty dowolnego sklepu internetowego. Co wicej, nawet po wyjciu
z domu czy biura uytkownicy mog skorzysta z funkcji Remembers mobilnej
aplikacji sklepu Amazon, aby zapisa zdjcie czego, co chc zapamita. Jeli zapisywany obiekt jest produktem, firma Amazon sprbuje ten produkt odnale
i wysa do uytkownika wiadomo e-mail z odpowiednim czem oraz umieci
to cze na stronie domowej prezentowanej przy okazji kolejnych odwiedzin tego
uytkownika. Ta niesamowita funkcja praktycznie eliminuje problem zapominania o tym, co chcielimy kupi.
W pewnych przypadkach ciek do lepszego rozpoznawania jest przegldanie.
Wyszukiwanie wymaga znajomoci tego, czego chcemy, i dysponowania sownictwem niezbdnym do opisania naszych potrzeb. Nieco inaczej przebiega przegldanie,
ktre pozwala odkrywa to, co jest dostpne, prezentuje sownictwo i przypomina
uytkownikom o rzeczach, ktrych mog potrzebowa. Szczeglnie skuteczne jest

93

94

Rozdzia 3. Zachowanie

Rysunek 3.34. Menedery pamici w sklepie Amazon

przegldanie w wiecie mobilnym, gdzie wpisywanie zapyta jest szczeglnie czasochonne i gdzie zwykle nie jestemy pewni, czego szukamy. Takie aplikacje jak
Where czy AroundMe nie wymagaj od uytkownikw pamitania rodzajw poszukiwanych obiektw (patrz rysunek 3.35). Moemy przeglda map lub tradycyjny
podzia na kategorie. Nie zawsze potrafimy przypomnie sobie, czego chcemy, ale
czsto rozpoznajemy te same rzeczy, kiedy je tylko widzimy.

MINIMUM ZAKCE
W wietle naszej kiepskiej pamici (nie wspominajc o oglnej niecierpliwoci
i niechci do zmian) czsto najlepszym rozwizaniem jest realizacja jak najwikszej czci zada na jednej stronie (jeli to tylko moliwe). Wspczesne aplikacje
zwykle oferuj takie rozwizania jak komunikaty o bdach wywietlane w ramach
strony, moliwo edycji na miejscu czy pomoc kontekstowa. Nakadki, wkady,
zakadki, wirtualne przewijanie i przesuwanie oraz wbudowany podzia na strony
to wybrane techniki umieszczania dodatkowej treci i kontrolek w obszarze wywietlania bez koniecznoci zmiany strony.
Twrcy witryny Netflix poszli jeszcze krok dalej. Oprcz nakadek ze szczegami
serwis Netflix oferuje moliwo dodawania elementw do kolejki Instant Queue
lub przejcia do odtwarzania filmu bez koniecznoci opuszczania strony z wynikami
wyszukiwania (patrz rysunek 3.36). Skoro to kontrolki i funkcje s dynamiczne, sami
nie musimy wykonywa zbdnych ruchw.

Zasady projektowania

Rysunek 3.35. Przegldanie serwisw Where i AroundMe za porednictwem urzdzenia

mobilnego

Rysunek 3.36. Nakadka ze szczegami i wyniki z dostpnymi funkcjami serwisu Netflix

95

96

Rozdzia 3. Zachowanie

BEZPOREDNIA MANIPULACJA
Jeszcze innym czynnikiem decydujcym o sukcesie interfejsu GUI jest zasada bezporedniej manipulacji (ang. direct manipulation). Interfejsy umoliwiajce uytkownikom bezporedni interakcj z widocznymi obiektami s atwiejsze do opanowania i prostsze w uyciu. Zdarza si, e posugujemy si metaforami zaczerpnitymi
ze wiata rzeczywistego. Sortujemy pliki na pulpicie i przenosimy je do kosza na
mieci. W innych przypadkach nasze idiomy nie znajduj analogii w rzeczywistym
wiecie, a mimo to metoda bezporedniej manipulacji pozwala utrwala te powtarzalne zachowania w naszej pamici miniowej. Nasze ciaa czsto zapamituj
co, co zapominaj nasze umysy.
Na pierwszy rzut oka wydaje si, e wyszukiwanie nie stwarza zbyt wielu okazji do
bezporedniej manipulacji. Czy nie jest to proste pole wskazujce na triumfalny
powrt niesawnego wiersza polece? Wystarczy jednak krtka analiza, by odkry
okazj do osignicia namacalnych rezultatw. Na przykad serwis Searchme umoliwia uytkownikom przeciganie wynikw na niestandardowy stos wyszukiwania
z myl o przejrzeniu wynikw w przyszoci lub udostpnieniu ich przyjacioom
(patrz rysunek 3.37). Uytkownicy maj te do dyspozycji cze Add to Stack (dodaj
na stos), jednak na stronie brakuje wizualnych lub namacalnych wskazwek dotyczcych przecigania i upuszczania.

Rysunek 3.37. Przeciganie wynikw na stos w serwisie Searchme

Wspomniana wada opisanego cza jest jednoczenie jego zalet jest wolne od
problemw zwizanych z przeciganiem i upuszczaniem. Z jednej strony znaczenie
tego cza z perspektywy uytkownika jest jasne. Przewidywalno jest wic dua,
a zasada rozpoznawania nad przypominaniem jest zachowana. Z drugiej strony
brakuje czytelnych wskazwek sugerujcych, e wyniki mona przeciga. Serwis

Zasady projektowania

Searchme nie prezentuje widocznego uchwytu przecigania. Nieporwnanie lepiej

prezentuj si przejcia i strefa upuszczania. Po zaznaczeniu wyniku obszar stosu
jest podwietlany, a zaznaczony wynik jest animowany do momentu upuszczenia.
Takie rozwizanie wprowadza jednak zupenie nowe wyzwanie. Stosowanie metody
przecigania i upuszczania przywodzi na myl prawo Fittsa: czas przyswajania jest
funkcj odlegoci od obiektu przyswajania i wielkoci tego obiektu. Oznacza to,
e musimy dokadnie przemyle wielko i rozmieszczenie strefy upuszczania.
Dla wielu uytkownikw opanowanie sztuki umieszczania kursora myszy w okrelonym miejscu jest do trudne tym trudniejsze jest przeciganie obiektw, kiedy
trzeba dodatkowo trzyma wcinity klawisz myszy.
Interesujc alternatyw jest menu koowe (znane te jako menu gwiedziste).
Zalety tego rozwizania dobrze wida na przykadzie wyszukiwarki muzyki Songza
(patrz rysunek 3.38). Pierwsz zalet jest automatyczne wywietlanie. Kiedy uytkownik klika wynik, menu pojawia si na ekranie. Drug zalet jest zgodno z prawem
Fittsa. Wszystkie opcje, w tym te dostpne w zagniedonych menu, znajduj si
blisko oryginalnego punktu interakcji. Trzeci zalet jest interfejs sterowany gestami,
ktry skupia w sobie wszystkie cechy bezporedniej manipulacji. Dowiadczeni
uytkownicy mog korzysta z pamici miniowej, aby wybiera opcje bez koniecznoci choby zerkania na menu.

Rysunek 3.38. Automatycznie wywietlane menu koowe serwisu Songza

Musimy oczywicie przemyle reguy czenia tych zasad projektowania. Na przykad nadmierne denie do bezporedniej manipulacji moe mie negatywny wpyw
na dostpno, a podstawowe kontrolki mog zniechca zaawansowanych uytkownikw. To nieustanne poszukiwanie rwnowagi musi uwzgldnia okrelony
kontekst.

KONTEKST UYCIA
W wiecie projektowania kontekst to omioliterowe sowo oznaczajce praktycznie
wszystko. To, e nasza aplikacja dziaa bez najmniejszych problemw w laboratorium,
z pewnoci nie wystarczy warunkiem powodzenia jest sukces w rzeczywistym
wiecie. Musimy mie na uwadze uytkownikw, cele, tre, funkcje, wydajno
i rodowisko. Starszy uytkownik z grubymi palcami moe mie powane problemy

97

98

Rozdzia 3. Zachowanie

z trafianiem w mae przyciski na ekranie dotykowym, szczeglnie jeli szuka pobliskiej restauracji w trzscym si autobusie. Wanie dlatego projektanci telefonu
iPhone stosuj metody wierzchoka gry lodowej i obiektw adaptacyjnych uatwiajcych wprowadzanie tekstu (patrz rysunek 3.39). Z tego samego powodu serwis
Google Mobile oferuje histori wyszukiwania, automatyczne sugestie i wyszukiwanie gosowe, aby ograniczy ilo wpisywanego tekstu.

Rysunek 3.39. Rozwizania adaptacyjne oferowane przez telefon iPhone

Oczywicie wszyscy staramy si wprowadza wasne rozwizania dostosowane do

kontekstu. Nie istnieje jeden, uniwersalny schemat postpowania, poniewa kady
kontekst wymaga nowych koncepcji. Elementy interakcji i zasady projektowania
naley traktowa co najwyej jako podstawow gramatyk i sownictwo. Mona
nawet czy pewne elementy rnych wzorcw projektowych. Ostatecznie jednak
innowacyjno wymaga odrobiny improwizacji. Nie moemy liczy na sukces, na
opracowanie projektw rozwizujcych problemy zachowa bez podejmowania
jakiegokolwiek ryzyka. Jak powiedzia kiedy Louis Armstrong, nigdy nie graj dwa
razy tak samo. Najwyszy czas wprowadzi odrobin fantazji do naszych projektw.