Projektowanie Interfejsów. Sprawdzone Wzorce Projektowe

Tytuł oryginału: Designing Interfaces

Tłumaczenie: Maksymilian Gutowski

ISBN: 978-83-246-3741-6

This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher.

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.

Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.

Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.

Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: [email protected] WWW: http://helion.pl (księgarnia internetowa, katalog książek)

Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/projin Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Printed in Poland.

• Kup książkę • Księgarnia internetowa • Poleć książkę • Lubię to! » Nasza społeczność • Oceń książkę Spis treci

Wprowadzenie do drugiego wydania ...... 9

Wprowadzenie ...... 13

1. Co robi uytkownik ...... 23 rodek do celu 24 Podstawy bada uytkowników 26 Motywacja uytkowników do nauki 28 Wzorce 30 Bezpieczna Eksploracja 31 Pragnienie Natychmiastowej Satysfakcji 32 Satisficing 32 Zmiany Na Bieco 33 Odwlekanie Decyzji 34 Stopniowa Konstrukcja 35 Przyzwyczajenie 36 Mikroprzerwy 37 Pami Przestrzenna 38 Pami Prospektywna 39 Wspomagane Powtarzanie 40 Mio Do Klawiatury 41 Porady Innych 42 Osobiste Rekomendacje 43

3 2. Organizacja treci: architektura informacji i struktura aplikacji ...... 45 Ogólny zarys 46 Wzorce 49 Ekspozycja, Wyszukiwanie I Przegldanie 50 Aktualnoci 54 Meneder Obrazów 59 Pulpit 64 Pótno I Paleta 69 Kreator 73 Edytor Ustawie 77 Róne Widoki 81 Wiele Obszarów Roboczych 85 Wielopoziomowy System Pomocy 88

3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si ...... 95 Jak si odnale 95 Koszt nawigacji 96 Modele nawigacji 98 Konwencje projektowania stron 103 Wzorce 104 Wskazane Punkty Startowe 104 Spis Treci 107 Piramida 110 Panel Modalny 114 Gbokie Linkowanie 117 Wyjcie Ewakuacyjne 121 Grube Menu 123 Mapka Strony W Stopce 127 Narzdzia Logowania 131 Mapa Sekwencji 134 Okruszki 136 Pasek Przewijania Z Adnotacj 139 Animowane Przejcie 142

4. Organizacja strony: ukad elementów ...... 145 Podstawy tworzenia layoutu strony 145 Hierarchia wizualna: wano i relacje 145 Przepyw wzroku: na co teraz spojrze 151 Wykorzystanie dynamicznych elementów 153 Wzorce 155 Ramy Graficzne 156 Obszar Centralny 159

4 Spis treci Siatka Równoprawnych Elementów 163 Zatytuowane Sekcje 166 Zakadki 169 Akordeon 173 Zwijane Panele 177 Ruchome Panele 180 Wyrównanie Do Lewej I Prawej 186 Wywaenie Po Przektnej 188 Ujawnianie Reakcyjne 191 Odblokowywanie Reakcyjne 194 Pynny Layout 198

5. Listy ...... 203 Scenariusze korzystania z list 203 Architektura informacji 204 Moliwe rozwizania 205 Wzorce 208 Wybór Dwupanelowy 209 Uszczegóowienie W Jednym Oknie 212 Wkadki 216 Siatka Miniaturek 220 Karuzela 224 Przemienne To 229 Paginacja 232 Bezporednie Przejcie Do Elementu 235 Przewijanie Alfabetyczne 237 Kaskadujce Listy 239 Tabela Drzewiasta 241 Pole Nowego Elementu 243

6. Jak to si robi: czynnoci i polecenia ...... 245 Poszerzanie horyzontów 248 Wzorce 250 Grupy Przycisków 251 Ukryte Narzdzia 254 Panel Polece 257 Wyszczególniony Przycisk „Zakocz” 261 Inteligentne Elementy Menu 264 Podgld 266 Wskanik Postpu 269 Odwoywalno 271

Spis treci 5 Wielopoziomowe Cofanie Czynnoci 273 Historia Polece 277 Makra 279

7. Prezentowanie danych: dendrogramy, wykresy i inne infografiki ...... 283 Podstawy infografik 283 Wzorce 296 Ogld Ze Szczegóami 297 Chmurki Informacyjne 300 Podwietlanie Danych 303 Dynamiczne Kwerendy 308 Rozrysowywanie Danych 312 Lokalne Przyblianie 316 Sortowalna Tabela 321 Wykres Promienisty 323 Równolege Wykresy 328 Wykres Panelowy 332 Treemapa 336

8. Dane wejciowe: formularze i kontrolki ...... 343 Podstawy projektowania formularzy 343 Wybór kontrolek 346 Wzorce 361 Format Pobaliwy 362 Format Strukturalny 364 Uzupenianie 366 Wskazówki 369 Zapytanie 372 Miernik Bezpieczestwa Hasa 374 Automatyczne Uzupenianie 377 Rozwijany Selektor 381 Kreator Listy 385 Poprawne Wartoci Domylne 387 Zlokalizowane Komunikaty O Bdach 389

9. Media spoecznociowe ...... 395 Czego nie znajdziesz w tym rozdziale 396 Media spoecznociowe od podstaw 396 Wzorce 399 Przegld Tematyczny 400 Osobiste Wypowiedzi 404 Wspódzielenie I Komentowanie 406

6 Spis treci Zagajenia 410 Odwrócona Mikropiramida 413 Harmonogram 416 Kanay Tematyczne 418 Linki Spoecznociowe 422 Widget Wspódzielenia 425 Newsbox 427 Ranking Treci 432 Najnowsza Aktywno 435

10. Urzdzenia przenone ...... 439 Wyzwania towarzyszce projektowaniu na urzdzenia mobilne 440 Wzorce 446 Pionowy Stos 447 Klisza 448 Narzdzia Dotykowe 451 Dolny Pasek Nawigacyjny 453 Miniaturki Z Tekstem 455 Nieskoczona Lista 458 Due Marginesy 460 Przycisk Kasowania Tekstu 462 Wskaniki Wczytywania 464 Poczone Aplikacje 465 Ujednolicony Branding 467

11. Estetyka ...... 473 Róne style, ta sama tre 475 Podstawy projektowania graficznego 483 Co to oznacza dla aplikacji komputerowych 492 Wzorce 493 Odlege To 494 Kilka Barw, Wiele Wartoci 498 Stylizowane Rogi 501 Obwódki Zgodne Z Tekstem 504 dziebeka 507 Kontrastujca Grubo Tekstu 509 Skórki I Motywy 512

Bibliografia ...... 515 Strony internetowe 515 Ksiki 516

Skorowidz ...... 519

Spis treci 7 8 Spis treci ROZDZIA 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si

Przedstawione w tym rozdziale wzorce odnosz si do problemu nawigacji — skd uytkownik wie, gdzie si znajduje, dokd ma si uda i w jaki sposób to zrobi. Nawigacj okreliam mianem „problemu”, poniewa poruszanie si po witrynie lub aplikacji przypomina dojedanie do pracy. Dojazdy s konieczne, eby znale si tam, gdzie trzeba, ale jednoczenie nudne, niekiedy wrcz irytujce, a czas i energia, które na nie powicamy, wydaj si zmarnowane. Czy tego czasu nie mona by wykorzysta lepiej, choby grajc w gr lub rzeczywicie pracujc? Najlepszy dojazd do pracy to brak dojazdu. Wygodnie mie pod rk wszystkie narzdzia pracy i nigdzie nie jedzi. Na tej samej zasadzie trzymanie elementów interfejsu „w zasigu rki” te jest wygodne, zwaszcza dla rednio zaawansowanych uytkowników, czyli takich, którzy ju wiedz, gdzie wszystko si znajduje. Rzadziej uywane narzdzia warto czasami umieci na osobnym ekranie, eby nie zawadzay. Opaca si te rozmieci grupy elemen- tów na osobnych stronach zwaszcza wtedy, kiedy spowoduje to, e rozkad interfejsu bdzie bardziej sensowny. S to zupenie poprawne rozwizania, o ile tylko „odlegoci”, które uytkownik musi przeby, pozostaj niewielkie. Zatem im mniej, tym lepiej. Zanim omówi to zagadnienie szerzej, porusz kwesti terminologii.

Jak si odnale Zaómy, e utworzye rozleg witryn lub aplikacj, któr musiae podzieli na sekcje, podsekcje, wyspecjalizowane narzdzia, strony, okna, kreatory i podobne fragmenty. Jak pomóc uytkownikowi w poruszaniu si po niej? Drogowskazy s elementami, które pozwalaj uytkownikowi na zorientowanie si w swoim bezporednim otoczeniu. Do powszechnie spotykanych znaków drogowych nale paski tytuowe okien, logo stron internetowych i inne znaki promocyjne, zakadki oraz wskaniki zaznaczenia. Wzorce i techniki w rodzaju dobrze sformatowanych zarówno globalnych, jak i lokalnych linków nawigacyjnych, Map Sekwencji, Okruszków czy Pasków Przewijania Z Ad- notacj (które w tym rozdziale omówi) wskazuj uytkownikowi, gdzie si znajduje i dokd moe si uda za pomoc jednego kliknicia. Pomagaj mu zatem orientowa si w otoczeniu i planowa swoje kolejne kroki.

95 Orientacja jest tym, co ludzie robi, aby dotrze do celu. Terminu raczej nie ma sensu obja- nia, ale to, co ludzie robi, jest samo w sobie bardzo wdzicznym tematem bada. Zagad- nienie to zostao zgbione przez specjalistów z dziedziny kognitywistyki, projektowania rodowiska i webdesignu. Ponisze elementy — patrzc zdroworozsdkowo — pomagaj uytkownikom w docieraniu do celu. Dobre oznaczenia Oznaczenia o jasnym sensie wychodz uytkownikowi naprzeciw i wskazuj, którdy si uda. Znajduj si tam, gdzie mona by ich oczekiwa, dziki czemu uytkownik, kiedy musi podj jak decyzj, zawsze ma pod rk wskazówki. Moesz skontrolowa swój interfejs pod tym ktem, wykonujc najwaniejsze czynnoci, których usprawnienie jest celem Twojego projektu. Dopilnuj, by w kadym punkcie, w którym uytkownik ma podj jak decyzj, dalsza droga bya odpowiednio oznaczona. Umie mocne „wezwania do dziaania” na pierwszych stronach, które uytkownik zobaczy. Wskazówki przestrzenne Toalety szuka si zwykle na tyach lokali gastronomicznych, a bramy tam, gdzie cieka krzyuje si z potem. W podobny sposób przycisku „X” do zamknicia okna mona si spodziewa w prawym górnym rogu, a logo strony w lewym górnym rogu. We pod uwag, e znajomo takich wskazówek czsto jest uwarunkowana kulturowo, wic kto zupenie niewtajemniczony (np. uytkownik, który nigdy nie mia stycznoci z systemem operacyjnym) moe ich nie zauway. Mapy Ludzie niekiedy chodz od oznaczenia do oznaczenia lub od linku do linku, nie analizu- jc swoich ruchów po interfejsie w odniesieniu do ogólnego porzdku rzeczy. (Na tym zwykle polega odnajdowanie waciwej drogi na obcym lotnisku). Niektórzy, zwaszcza kiedy czsto przebywaj w takiej przestrzeni, wol jednak wyobrazi j sobie w caoci. Ponadto mapa bywa niekiedy jedyn pomoc nawigacyjn w le oznaczonych lub gsto zabudowanych przestrzeniach, np. blokowiskach. Omówiony w tym rozdziale wzorzec Wskazane Punkty Startowe jest przykadem starannie przygotowanego oznaczania skrzyowanego ze wskazówk rodowiskow, co polega na tym, e linki jako takie wyróniaj si na stronie. Mapa Sekwencji, jak sama nazwa wskazuje, jest map. Z uyciem wzorca Ogld Ze Szczegóami (rozdzia 7.) prezentowa mona równie mapy przestrzeni wirtualnych. Panel Modalny mona poniekd uzna za wskazówk rodowiskow, poniewa uytkownik wyczajcy taki panel wie, e wróci tam, gdzie by wczeniej. Porównuj tutaj przestrze wirtualn z fizyczn, lecz wirtualna przestrze moe zaoferowa co, czego fizyczna przestrze (na razie) nie moe zapewni — jest to Wyjcie Ewakuacyjne. Gdziekolwiek jeste, moesz klikn link Wyjcia Ewakuacyjnego, aby powróci na znajom stro- n. To tak, jakby móg w kadej chwili przej przez magiczny portal prowadzcy do domu. Koszt nawigacji Kiedy wchodzisz do nieznanego pokoju, rozgldasz si dookoa. W uamku sekundy przy- swajasz sobie ksztat pokoju, jego umeblowanie, owietlenie, wyjcia oraz inne wskazówki. Momentalnie oceniasz, co to za pokój i jaki to ma zwizek z powodem, dla którego do niego wszede. W nastpnej kolejnoci wykonujesz zamierzon czynno. Gdzie? Jak? Na te pytania moesz znale odpowied od razu, cho nie zawsze, bo czasami w takim pokoju przycigaj Twoj uwag inne, ciekawe rzeczy.

96 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Podobnie wejcie na stron internetow lub otworzenie okna niesie z sob koszt poznawczy. Musisz rozpracowa now przestrze: przyswoi sobie jej ksztat, ukad, tre, wyjcia oraz to, w jaki sposób wykona czynno, któr zamierzae na tej stronie lub w tyme oknie wykona. Wymaga to wydatku czasu i energii. „Zmiana kontekstu” zmusza do zwrócenia uwagi na otoczenie i dopasowanie si do niego. Jeeli nawet okno (lub pomieszczenie) jest ju znane, styczno z nim i tak kosztuje. Nie jest to wprawdzie duy koszt, ale trzeba go uwzgldni — we pod uwag, ile trzeba czeka na wczytanie strony lub otworzenie okna. Jest to prawda w przypadku stron internetowych, okien aplikacji, okien dialogowych i ekra- nów urzdze przenonych. Rodzaje decyzji, które uytkownicy podejmuj w sprawie tego, dokd si uda, te s takie same. Oznaczenia zawsze trzeba czyta, a ikony rozszyfrowywa. Kliknicie linku lub przycisku, którego znaczenie nie jest jasne, zawsze jest dla uytkownika pewnym ryzykiem. Ponadto czas wczytywania treci wpywa na decyzje uytkowników. Kiedy strona wczytuje si zbyt dugo lub w ogóle nie wczytuje si, uytkownik moe si zniechci i wyj ze strony, nim znajdzie to, co go interesuje. (Ilu uytkowników tracisz przez ten odtwarzacz wideo na pasku bocznym?). Co wicej, jeli strony witryny niezmiennie wczytuj si zbyt wolno, uytkownicy trac ch do jej przegldania. Firmy typu Google dokadaj wszelkich stara, by strony wczytyway si tak szybko, jak to moliwe, wanie ze wzgldu na to, e kosztem opónie jest utrata odbiorców.

Niewielkie odlegoci Wiedzc, e przechodzenie ze strony na stron wie si z kosztem, rozumiesz ju, dlaczego ograniczanie liczebnoci takich przej jest nieodzowne. Kiedy wykonanie prostego zadania wymaga wielu takich przej, postaraj si ograniczy je do jednego lub dwóch. Rzeczywisty wzrost wydajnoci zaley jednak od samej struktury aplikacji. Jedn z najgorszych rzeczy, jak projektant moe zrobi, jest zmuszenie uytkownika do wchodzenia na wiele podstron czy otwierania wielu okien za kadym razem, kiedy musi wykona jak prost, codzienn czynno. (Jeszcze gorzej jest, gdy doprowadzisz uytkownika do takiego miejsca, po czym stwierdzisz, e nie speni stosownego warunku, eby wykona zadanie, i kaesz mu wróci do punktu wyjcia). Czy moesz zaprojektowa swoj aplikacj tak, by najczstsze czynnoci (czyli okoo 80% ogóu czynnoci) mona byo wykona na jednej stronie, bez jakichkolwiek zmian kontekstu lub najwyej z jedn? Jest to trudne przy niektórych aplikacjach. Czy jakie narzdzie jest zbyt rozbudowane, eby je umieci na stronie gównej? Spróbuj je ograniczy: usun kontrolki, skróci oznaczenia, zamie- ni sowa w obrazy albo wprowadzi wyspecjalizowane kontrolki, które pozwol zaoszczdzi miejsce. Czy narzdzie nie pasuje do reszty strony gównej? Spróbuj zatem je zmniejszy, oddzieli pust przestrzeni lub umieci gdzie, gdzie nie bdzie zawadza. Czy moesz zrobi tak, by tre strony bya sukcesywnie ujawniana? Czy moesz domylnie ukry cz treci z pomoc Zatytuowanych Sekcji lub Akordeonu? Czasami odpowiednim rozwizaniem jest obsugiwanie pewnych funkcji ze stron, do których trzeba przej kilkoma klikniciami — chodzi tu o te pozostae 20% funkcji, które nie musz by pod rk. Moe te si tak zdarzy, e zachowanie wizualnej prostoty aplikacji jest waniejsze

Koszt nawigacji 97 od zaoszczdzenia uytkownikowi jednego czy dwóch przej. Rzadko uywane funkcje moesz umieci za dodatkowymi „drzwiami” (zgodnie z zasad 80/20). Jak zawsze, jeli masz ja- kiekolwiek wtpliwoci, poeksperymentuj z rónymi projektami i przetestuj ich uywalno.

Modele nawigacji Jak wyglda model nawigacji Twojej strony lub aplikacji? Innymi sowy: jak ekrany, strony oraz przestrzenie s poczone i w jaki sposób uytkownicy poruszaj si midzy nimi? Wrómy jednak do terminologii. System nawigacji globalnej jest tym, co znajdziemy na kadej stronie gównej. Zwykle przyjmuje posta menu, zakadek i pasków bocznych, z których pomoc uytkownik porusza si po strukturze nawigacyjnej witryny. (W poprzedniej edycji tej ksiki nawigacj globaln uznaam za wzorzec. Dzi jest to jednak na tyle powszechna i dobrze zrozumiana koncepcja, e nie ma ju sensu nadawa jej takiej rangi). System nawigacji funkcyjnej, który równie mona znale na kadej stronie gównej, skada si z linków i narzdzi odnoszcych si do tych elementów strony lub aplikacji, które nie s waciw treci, czyli do rejestracji, pomocy, drukowania, Edytorów Ustawie (rozdzia 2.), ustawie jzykowych itp. Nawigacje asocjacyjna i wierszowa opieraj si na umieszczaniu linków w pobliu lub w obrbie samej treci strony lub aplikacji. Kiedy uytkownik czyta stron lub posuguje si ni, takie odnoniki oferuj mu moliwoci, które w danej sytuacji mog by przydatne. Wi w ten sposób tre pod wzgldem tematycznym. Przyjrzyjmy si teraz kilku modelom, na których opieraj si witryny i aplikacje. O i szprychy Architektura ta (rysunek 3.1), znajdowana najczciej na urzdzeniach mobilnych, polega na wylistowaniu wszystkich najwaniejszych obszarów strony lub aplikacji na stronie gównej, czyli „osi”. Uytkownik przechodzi do tych obszarów klikniciem lub nacini- ciem stosownego elementu, wykonuje odpowiednie zadanie, po czy wraca na ekran gówny, by uda si do innego obszaru. Ekrany „szprych” s skonstruowane tak, by cile odnosiy si do swoich funkcji; ich przestrze jest starannie rozplanowana i moe w niej nie by miejsca na list innych najwaniejszych ekranów. Dobrym przykadem tego modelu jest ekran gówny iPhona oraz Spis Treci, który pojawia si na stronach internetowych.

Rysunek 3.1. O i szprychy

98 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Pene poczenie Na tym modelu opiera si wiele stron internetowych. Tu te mamy do czynienia z ekra- nem gównym lub stron gówn, lecz zarówno na niej, jak i na wszystkich innych stronach znajduj si linki do pozostaych stron — na kadej znajduje si system nawigacji globalnej w rodzaju paska górnego menu. Globalna nawigacja moe by ograniczona do jednego poziomu (co wida na przykadzie na rysunku 3.2, gdzie widnieje tylko pi stron) albo gboka i rozbudowana, skadajca si z wielu poziomów i „zagrzebanych” gboko elementów. Jeli uytkownik moe z kadej strony za pomoc jednego kliknicia dotrze do dowolnej strony caej witryny, mamy wanie model penego poczenia.

Rysunek 3.2. Pene poczenie Wiele poziomów Ten model równie powszechnie wystpuje na stronach internetowych (rysunek 3.3). Najwaniejsze strony s ze sob w peni poczone, ale podstrony cz si jedynie midzy sob, cho zazwyczaj maj równie odnoniki do stron pierwszopoziomowych w ramach systemu globalnej nawigacji. Spotkae si z tym na witrynach, których podstrony byy wylistowane jedynie w paskach bocznych bd drugopoziomowych zakadkach — uytkownik widzi te elementy jedynie w tych menu, które pojawiaj si dopiero po klikniciu linku pierwszopoziomowej strony lub kategorii. Aby z dowolnej podstrony dotrze na inn, trzeba klikn dwa razy lub wicej. Wielopoziomow witryn mona przeksztaci w cakowicie poczon przy uyciu rozwijanych menu lub wzorców Grube Menu i Mapka Strony W Stopce. Takie rozwizanie jest zdecydowanie lepsze.

Rysunek 3.3. Wiele poziomów

Modele nawigacji 99 Krok po kroku Pokazy slajdów, wykresy procesów i Kreatory (rozdzia 2.) prowadz uytkownika krok po kroku przez kolejne ekrany w okrelonej kolejnoci (rysunek 3.4). Odnoniki Wstecz i Dalej s na stronie wyeksponowane.

Rysunek 3.4. Krok po kroku Piramida Piramida jest wariantem modelu „krok po kroku”, w jakim dodatkowo istnieje strona centralna bd menu, gdzie zawarta jest caa sekwencja elementów lub podstron (rysunek 3.5). Uytkownik moe wybra dowolny element, przej do niego, a nastpnie, korzystajc z odnoników Wstecz i Dalej, porusza si po elementach we waciwej kolejnoci. W kadej chwili moe te wróci do strony centralnej. Wicej na ten temat przeczytasz w tym rozdziale, w opisie wzorca Piramida.

Rysunek 3.5. Piramida Przeciganie i przyblianie S rzeczy, które najlepiej prezentuj si jako due, pojedyncze obszary, a nie wiele maych. Do tej kategorii nale mapy, due obrazy, due dokumenty tekstowe, infografiki i media uwzgldniajce upyw czasu (czyli dwik i film). W rozdziale 7. omówi je bardziej szczegóowo. Przeciganie i przyblianie to te sposób nawigacji, wic przy takim modelu naley udostpni uytkownikowi kontrolki suce do „przecigania” treci (po- ziomo lub pionowo), przybliania i oddalania oraz przywracania okrelonego stanu. Na rysunku 3.6 prezentuj przykad tego modelu.

Rysunek 3.6. Przeciganie i przyblianie Paska nawigacja W niektórych rodzajach aplikacji potrzebne s do minimalistyczne systemy nawigacji, a czasami nawet nie s w ogóle potrzebne. Zastanów si nad aplikacjami opartymi na wzorcu Pótno I Paleta, w rodzaju Photoshopa, albo nad innymi, rozbudowanymi aplikacjami, takimi jak Excel. Znajduje si w nich wiele narzdzi i funkcji, do których mona z atwoci

100 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si dotrze za porednictwem menu, pasków narzdzi i paneli. Z narzdzi, które nie oddzia- uj na prac w programie natychmiastowo, mona skorzysta za porednictwem Paneli Modalnych lub wieloetapowych sekwencji. Style nawigacyjne tych rodzajów aplikacji wydaj si charakteryzowa inn jakoci ni pozostae, które tu opisuj — uytkownik zawsze wie, gdzie si znajduje, ale moe mie problemy ze znalezieniem waciwego narzdzia, ze wzgldu na du ilo funkcji dostpnych w kadym momencie. Panel modalny Technika ta polega na wprowadzeniu uytkownika na ekran, którego jedyna opcja nawigacji polega na potwierdzeniu zapoznania si z jego treci, wypenieniu formularza lub wyczeniu okna (rysunek 3.7). Panele modalne czsto pojawiaj si na wierzchu ele- mentów na ekranie lub stronie i su do wykonywania drobnych konkretnych czynnoci, wymagajcych od uytkownika powicenia im caej swojej uwagi. Wicej na ten temat przeczytasz w opisie wzorca Panel Modalny.

Rysunek 3.7. Panel modalny Wyrane punkty wejcia Skd uytkownik wie, jak zacz korzysta ze skomplikowanej strony lub aplikacji? Mona mu wskaza odpowiednie czynnoci z pomoc wzorca Wskazane Punkty Startowe (rysunek 3.8). Nowi uytkownicy oraz tacy, którzy rzadko ze strony lub aplikacji korzystaj, nie musz dziki temu tak bardzo wysila si przy nauce obsugi.

Rysunek 3.8. Wyrane punkty wejcia Zakadki Zakadki (rysunek 3.9), permalinki, gbokie linki i wzorzec Gbokie Linkowanie pozwalaj uytkownikowi na wygodne dotarcie do wybranego przez siebie miejsca w dowolnej chwili, jeli nawet miejsce to jest zagrzebane gboko w strukturze nawigacyjnej. Daj mu sposób na uniknicie koniecznoci przedzierania si przez niezliczone odnoniki, by dotrze do upragnionej strony lub stanu.

Modele nawigacji 101 Rysunek 3.9. Zakadki Wyjcie ewakuacyjne Kiedy uytkownik beznadziejnie zapltuje si w aplikacji, staje przed bdem programu lub strony albo trafia za gbokim linkiem do strony, której tre jest niezrozumiaa ze wzgldu na brak kontekstu, potrzebne jest mu wyjcie ewakuacyjne (rysunek 3.10), czyli dobrze oznaczony link, który pozwala wróci do znajomego punktu. Wicej na ten temat przeczytasz w opisie wzorca Wyjcie Ewakuacyjne.

Rysunek 3.10. Wyjcie ewakuacyjne Naley zwróci uwag na trzy rzeczy, które cechuj te modele. Po pierwsze, mona je czy. W jednej aplikacji lub na jednej witrynie mona wykorzysta kilka z nich, zwaszcza Panel Modalny, Wane Punkty Wejcia, Zakadki oraz Wyjcie Ewakuacyjne, gdy s one silnie zlokalizowane i nie wpywaj na ogóln struktur nawigacyjn. Po drugie, niektóre z tych mechanizmów w istocie ograniczaj moliwoci nawigacyjne uytkownika. Otwarty dostp do elementów i moliwo szybkiego poruszania si midzy nimi to na ogó dobra rzecz, ale kiedy uytkownik oglda zajmujcy cay ekran pokaz slajdów, na pewno nie chce widzie skomplikowanego menu nawigacji globalnej! Woli skoncentrowa si na samym pokazie slajdów, wic wystarcz mu przyciski Wstecz i Dalej oraz Wyjcie Ewakuacyjne. Obecno penego wachlarza opcji nawigacyjnych pociga za sob koszt: zaj- muje miejsce, zamieca ekran, zwiksza obcienie poznawcze i sugeruje uytkownikowi, e strona, któr przeglda, nie ma wikszego znaczenia. Po trzecie, wszystkie te mechanizmy i wzorce mona urzeczywistni na ekranie na róne sposoby. Do przedstawiania systemu globalnej nawigacji na podstronach rozbudowanej witryny lub aplikacji mona wykorzysta zakadki, menu albo dendrogramy w pasku bocznym — nie musisz jednak podejmowa decyzji w sprawie jego dokadnej postaci, dopóki nie doj- dziesz do etapu tworzenia layoutu. Podobnie panel modalny mona przedstawi w postaci lightboksu lub okna dialogowego, ale decyzj dotyczc tego równie moesz odwlec do momentu, a stwierdzisz, co waciwie powinno by modalne, a co nie.

102 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Projektowaniem graficznym mona zaj si na dalszym etapie projektowania ogólnego, ju po ustaleniu architektury informacji i modeli nawigacyjnych.

Konwencje projektowania stron Opracowanie modelu nawigacyjnego warto oddzieli od tworzenia projektu graficznego. Dziki temu staje si atwiejsze mylenie o projektach samych stron w sposób elastyczny i wia- domy. Istniej jednak pewne konwencje okrelajce przestrzenne rozmieszczenie funkcji nawigacyjnych. Bdem byoby je zlekceway. System nawigacji globalnej umieszcza si zwykle na samej górze lub po lewej stronie — czasami i tu, i tu. Rzadziej pojawia si on po prawej, gdy moe to powodowa problemy z rozmiarem strony i przewijaniem poziomym, jeeli projektant nie zdecyduje si skorzysta z wzorca Pynny Layout (rozdzia 4.). Dwa stosunkowo nowe podejcia do nawigacji globalnej to wzorce Grube Menu i Mapka Strony W Stopce, które umoliwiaj uytkownikowi zobaczenie caej struktury hierarchicznej witryny, co odbywa si kosztem utraty wolnej przestrzeni w nagówku lub stopce. Jak ju wspomniaam, wzorce te pozwalaj na przeksztacenie wielopoziomowego modelu nawigacyjnego na model w peni poczony. Kiedy gocie na stronie s przewanie zarejestrowanymi uytkownikami, mona w jej prawym górnym rogu zamieci zestaw linków funkcyjnych. Zazwyczaj tam uytkownicy szukaj narzdzi zwizanych z ich pobytem na stronie, czyli ustawie konta, profili uytkownika, wylogowywania, pomocy itp. Wicej na ten temat przeczytasz w opisie wzorca Narzdzia Logowania. Nawigacja asocjacyjna — polegajca na umieszczaniu odnoników we waciwej treci lub w jej pobliu, w celu tematycznego zgrupowania zasobów — czsto przyjmuje form sekcji lub panelu „Podobne artykuy”. Mona si z tym czsto spotka na serwisach informacyjnych i blogach. Kiedy uytkownik czyta artyku, w stopce lub na pasku bocznym mona znale inne artykuy, dotyczce podobnych tematów lub napisanych przez tego samego autora. Tagi zarówno zdefiniowane przez uytkowników, jak i odgórnie narzucone wspomagaj nawigacj asocjacyjn oraz uatwiaj korzystanie ze spisów podobnych artykuów i linków. Chmury tagów uatwiaj znajdowanie tematów na niektórych stronach, zwaszcza takich, na których znajduje si bardzo duo artykuów o bardzo szczegóowo okrelonej tematyce. (Na mniejszych stronach i blogach nie dziaaj one równie dobrze). Czciej spotykana technika nawigacyjna polega na przedstawieniu listy tagów, którymi artyku zosta opatrzony, na samym kocu. Kady tag jest wtedy odnonikiem prowadzcym do caego zbioru artykuów, które zostay nim oznaczone. Kiedy strona wykorzystuje media spoecznociowe, naley uwzgldni jeszcze wicej opcji nawigacyjnych. Na stronie gównej mona umieci Newsbox, który odele uytkownika do ostatnio opublikowanych elementów. W Rankingach Treci pokazuje si najczciej wspó- dzielone lub komentowane elementy, podczas gdy Najnowsza Aktywno pokazuje uytkownikom biece dyskusje. Linki Spoecznociowe i Widgety Wspódzielenia cz uytkowników bezporednio z serwisami spoecznociowymi. O tych wzorcach przeczytasz w rozdziale 9.

Konwencje projektowania stron 103 Wzorce W tym rozdziale opowiadam o rónych aspektach nawigacji: o ogólnej strukturze lub modelu, wiadomoci tego, gdzie si jest, dokd naley si uda oraz zorientowaniu si, w jaki sposób. Pierwsza seria wzorców odnosi si do modelu nawigacyjnego i mona z nich korzysta niezalenie od ogólnego layoutu caego ekranu. Oto one: 1. Wskazane Punkty Startowe 2. Spis Treci 3. Piramida 4. Panel Modalny 5. Gbokie Linkowanie 6. Wyjcie Ewakuacyjne czc layouty z modelami na konwencjonalnych stronach, uzyskujemy nastpujce wzorce: 7. Grube Menu 8. Mapka Strony W Stopce 9. Narzdzia Logowania Nastpne wzorce sprawiaj si dobrze jako oznaczenia miejsc, w których uytkownik si znajduje, cho tak rol moe peni równie dobrze zaprojektowany system nawigacji globalnej. Mapa Sekwencji, Okruszki i Pasek Przewijania Z Adnotacj mog te suy jako inte- raktywne mapy treci. Paski Przewijania Z Adnotacj s przeznaczone raczej dla modeli nawigacyjnych typu „przeciganie i przyblianie”, a nie dla wytworów skadajcych si z wielu poczonych midzy sob stron. 10. Mapa Sekwencji 11. Okruszki 12. Pasek Przewijania Z Adnotacj Animowane Przejcie pomaga uytkownikowi w zachowaniu orientacji, kiedy porusza si po interfejsie. Jest to jedynie sztuczka, ale niezwykle dobrze przyczynia si do tego, e uytkownik wie, gdzie jest i co si dzieje. 13. Animowane Przejcie

Wskazane Punkty Startowe

Rysunek 3.11. Schemat Wskazanych Punktów Startowych

104 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Co zrobi

Przedstaw jedynie kilka gównych punktów rozpoczcia pracy z interfejsem. Powinny skania do wykonania jakiej czynnoci i by zrozumiae. Uywaj wyrazistych wezwa do dziaania.

Kiedy uywa

Projektujesz stron lub aplikacj, z której uytkownicy bd korzysta sporadycznie lub na której bd si zwykle zjawia nowi uytkownicy. Wikszo z takich uytkowników najlepiej obsuy, dajc im do przeczytania tekst wprowadzajcy, kac wykona jakie zadanie lub dokona wyboru sporód bardzo maej iloci najpopularniejszych opcji. Jednak nie musi to by najlepsze rozwizanie, jeeli funkcja tej aplikacji lub strony jest w peni oczywista i wprowadzenie zbdnego etapu nawigacyjnego miaoby zirytowa uytkownika (tak jak w aplikacjach przeznaczonych dla rednio zaawansowanych i ekspertów).

Dlaczego

Niektóre aplikacje i witryny po uruchomieniu lub otworzeniu pokazuj uytkownikowi istny mtlik: wiele paneli, nieznajome terminy i wyraenia, bezsensowne reklamy i nieaktywne paski narzdzi. Niezdecydowany uytkownik nie ma jasnego wskazania, co powinien zrobi najpierw. „Wczyem... I co dalej?”. Dla dobra tych uytkowników podaj na pocztku kilka moliwoci rozpoczcia pracy z pro- gramem. Kiedy te moliwoci bd odpowiednio dopasowane do oczekiwa uytkownika, bdzie móg z penym przekonaniem wybra któr z nich i zabra si do pracy — to z kolei oddziauje na pragnienie natychmiastowego zaspokojenia. W innym przypadku uytkownik przynajmniej bdzie wiedzia, do czego strona lub witryna su, skoro bdzie móg ju od progu zapozna si z najwaniejszymi zadaniami i kategoriami. W ten sposób sprawiasz, e aplikacja staje si zrozumiaa sama przez si.

W jaki sposób

Kiedy uytkownik wchodzi na stron lub uruchamia aplikacj, powinien zetkn si z punktami startowymi jako swego rodzaju „wrotami” do waciwej treci. Od tych punktów poprowad uytkownika przez aplikacj delikatnie, ale stanowczo, a uda mu si zaznajomi z rodowiskiem na tyle dobrze, by móg ju pody dalej samodzielnie. Te punkty startowe powinny odnosi si do wikszoci powodów, dla których uytkownicy korzystaj z aplikacji lub strony. Moe to by zatem jeden punkt, dwa albo o wiele wicej, w zalenoci od tego, co pasuje do projektu. Naley je jednak opisa jzykiem zrozumiaym dla wieo upieczonego uytkownika — to nie jest miejsce na techniczne okrelenia, które pojawiaj si wycznie w Twojej aplikacji. Pod wzgldem graficznym punkty startowe powinny by wyeksponowane zgodnie z ich wzgldn wanoci. Na stronach startowych wikszoci witryn zazwyczaj mona równie znale dodatkowe linki nawigacyjne: system nawigacji globalnej, funkcyjnej i inne. Powinny one by mniejsze i mniej wyeksponowane ni Wskazane Punkty Startowe. Te dodatkowe odnoniki peni bardziej wyspecjalizowan rol i nie zawsze prowadz uytkownika do samego serca strony, podobnie jak drzwi do garau nie prowadz bezporednio do salonu. Wskazane Punkty Startowe powinny peni rol „drzwi frontowych”.

Wzorce 105 Przykady

Gówna cz strony iPada firmy Apple (rysunek 3.12) musi speni zaledwie kilka zada: zwróci na siebie uwag, zachci do iPada i skierowa uytkownika tam, gdzie bdzie móg si dowiedzie wicej o produkcie albo go zakupi. Nawigacja globalna jest graficznie wy- tumiona w porównaniu z mocnymi, wyrazistymi punktami startowymi. Na pozostaym obszarze strony tekst i linki zagszczaj nieco tre, ale jest to waciwie jedyne, co uytkownik widzi nad zgiciem.

Rysunek 3.12. Strona iPada na serwisie firmy Apple W Fireworksie i innych aplikacjach tu po uruchomieniu otwiera si okno startowe (rysunek 3.13), które wskazuje nowemu lub sporadycznemu uytkownikowi moliwe czynnoci, z których najpopularniejsze to utworzenie czego nowego, otworzenie istniejcego dokumentu i prze- czytanie zasobów systemu pomocy. W tym oknie startowym znajduje si kratka, któr mona bardzo wygodnie zdezaktywowa wywietlanie ekranu startowego przy kolejnych urucho- mieniach. Okno to moe mczy zaawansowanych uytkowników, poniewa jest dodatkowym, a zbdnym krokiem na drodze do rozpoczcia pracy w programie.

106 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Rysunek 3.13. Okno startowe Fireworksa

W innych bibliotekach http://quince.infragistics.com/Patterns/Clear%20Entry%20Points.aspx

Spis Treci

Rysunek 3.14. Craigslist

Wzorce 107 Co zrobi

Umie na stronie list linków do bogatych w tre podstron witryny lub aplikacji. Przedstaw wystarczajco duo informacji na temat kadego linku, aby uytkownik móg podj waci- w decyzj. Nie zamieszczaj na stronie jakichkolwiek innych istotnych treci.

Kiedy uywa

Projektujesz stron domow, ekran powitalny albo jakikolwiek inny obszar, który ma peni rol „spisu treci” pokazujcego, dokd uytkownik moe si dalej uda. Moe Ci te brakowa miejsca na promowane treci (np. artyku, film lub reklam) albo chcesz, eby uytkownik móg si skoncentrowa na wybraniu odpowiadajcego mu odnonika. Szczególnie w aplikacjach i stronach na urzdzenia mobilne trzeba stosowa Spisy Treci, które najefektywniej wykorzystuj niewielki obszar ekranu. Jeeli musisz zatrzyma uytkowników na witrynie, lepszym rozwizaniem moe by umieszczenie gdzie na stronie materiaów promocyjnych lub innych interesujcych treci. W takim przypadku skorzystanie z wzorca Spis Treci to niekoniecznie najlepsze wyjcie. Kiedy nale- y objani uytkownikowi, na czym polega warto i rola witryny, wykorzystaj dostpn przestrze wanie w tym celu. Zaprojektowanie Spisu Treci wymaga odwagi, poniewa musisz mie pewno, e uytkownicy: bd wiedzieli, czego strona lub aplikacja dotyczy, bd wiedzieli, czego szukaj i jak to znale, nie bd zainteresowania wiadomociami, aktualizacjami i promowanymi treciami.

Dlaczego

Uytkownik moe bez adnych zakóce skoncentrowa si na dostpnych opcjach nawigacyjnych. Cay ekran (albo chocia wiksza jego cz) suy do organizowania, wyjanienia i zilu- strowania odnoników, a take kieruje uytkowników do stron, które najbardziej odpowiadaj ich potrzebom.

W jaki sposób

Kiedy tworzysz projekt na urzdzenia przenone, Spis Treci jest jednym z najwaniejszych narzdzi do projektowania witryn i aplikacji o wielu poziomach funkcjonalnoci. Lista ozna- cze powinna by krótka, same elementy powinny by na tyle due, by dao si je z atwoci nacisn (na ekranach dotykowych), a hierarchie nie powinny by zbyt rozbudowane. Ponisze akapity odnosz si ju do penorozmiarowych witryn i aplikacji. Po pierwsze, dobrze oznacz linki i dodaj wystarczajco duo informacji kontekstowych, aby uytkownik móg zdecydowa, dokd si uda. To nie musi by atwe. Odwiedzajcym uytkownikom bardzo moe si przyda opis lub podgld kadego linku, jednak takie treci zaj- muj duo miejsca na stronie. Podobnie zreszt jest z miniaturkami — moe i wygldaj wietnie, ale czy aby na pewno wnosz co dobrego do interfejsu? Przyjrzyj si rysunkom 3.15 i 3.16. Osobom odwiedzajcym serwis MIT nazwy linków s ju znane, poniewa to nazwy kierunków i jednostek akademickich. Wobec tego dodatkowe opisy byyby zbdne. Projektant móg zatem umieci wicej linków nad zgiciem. Wskutek tego strona jest pena treci i uyteczna.

108 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Rysunek 3.15. Spis Treci na serwisie MIT

Rysunek 3.16. Spis Treci na witrynie AIGA

Wzorce 109 Z drugiej strony, artykuy na serwisie AIGA jak najbardziej zyskuj na tym, e opisane s i tekstem, i obrazem. Same tytuy mogyby nie przekona uytkownika do kliknicia. Miej te na uwadze to, e uytkownik, który nie zobaczy strony, jakiej si spodziewa, moe si szybko zniechci. Dopilnuj, aby Twoje opisy byy konkretne i uczciwe. Po drugie, rozwa organizacj przestrzenn listy linków. Czy maj by przydzielone do ró- nych kategorii, czy rozmieszczone w dwu- lub trzypoziomowej hierarchii. Czy maj by po- szeregowane wedug dat? Niech lista wyraa obrany schemat organizacyjny. W rozdziale 5. przeczytasz wicej na ten temat. Po trzecie, nie zapomnij o polu wyszukiwania. Wreszcie zastanów si, czy masz co jeszcze do powiedzenia na stronie. Obszar strony gównej jest szczególnie cenny, jeli chodzi o przyciganie uwagi uytkowników. Czy moesz na nim umieci zwiastun ciekawego artykuu? Jak grafik? Newsbox (rozdzia 9.)? Jeeli takie elementy bardziej denerwowayby ni interesoway, skoncentruj si na tworzeniu Spisu Treci bez urozmaice.

Przykady

Na stronie „Education” („ksztacenie”) serwisu MIT (rysunek 3.15) nie ma zbyt wielu objanie — za to jest duo linków. Kiedy uytkownik dociera do tego miejsca, prawdopodobnie szuka konkretnej jednostki akademickiej lub zasobów, a nie — przykadowo — informacji o tym, czym jest MIT. Zadaniem tej strony jest przekierowanie uytkownika na inn stron, na której znajdzie odpowied na sprecyzowane wymagania. To samo mona powiedzie o serwisie Craigslist na rysunku 3.14. Na witrynie AIGA znajduje si wiele zasobów dla profesjonalnych designerów. Mona na niej zobaczy kilka wysokopoziomowych kategorii, tak jak w systemie nawigacji globalnej, ale strona docelowa kadej z tych kategorii jest ju Spisem Treci (rysunek 3.16). Artykuy opatrzone s miniaturkami i krótkimi opisami. Taki wzbogacony format daje uytkownikowi wystarczajco duo informacji, aby móg zdecydowa, czy chce powici czas na zapoznanie si z artykuem. W Spisie Treci witryny Museum of Modern Art mamy do czynienia z duymi obrazami i niewielk iloci tekstu (rysunek 3.17). Strona ta jest wystarczajco interesujca, by przyci- gn uytkownika, mimo e nie ma na niej adnej konkretnej treci.

W innych bibliotekach

Wzorzec Directory Navigation, do którego prowadzi poniszy adres URL, opisuje konkretny sposób wykorzystania Spisu Treci: http://welie.com/patterns/showPattern.php?patternID=directory

Piramida

Co zrobi

Pocz sekwencj stron odnonikami Wstecz i Dalej. Utwórz stron rodzica, na której umiecisz linki do wszystkich stron w sekwencji; pozwól uytkownikowi przeglda je albo we waciwej kolejnoci, albo zgodnie z wasnym uznaniem.

110 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Rysunek 3.17. Spis Treci witryny MoMA

Rysunek 3.18. Schemat Piramidy

Kiedy uywa

Na stronie lub w aplikacji znajduje si sekwencja elementów, które uytkownik zwykle oglda po kolei, tak jak dzieje si to w przypadku pokazu slajdów, kreatora, rozdziaów ksiki lub serii produktów. Niektórzy uytkownicy wol jednak przeglda je pojedynczo i w wybranej przez siebie kolejnoci — w tym celu musz jednak mie moliwo wyboru sporód caego zakresu elementów. Niemal wszystkie Menedery Obrazów (rozdzia 2.) opieraj si na modelu nawigacyjnym Piramidy. Uytkownik czasami musi przejrze obrazy pojedynczo, a czasami woli przeglda je zgodnie z sekwencj. Piramida pozwala mu zdecydowa, jak to zrobi.

Wzorce 111 Dlaczego

Wzorzec ten zmniejsza liczb klikni potrzebnych do poruszania si. Usprawnia nawigacj i ilustruje sekwencj, w jakiej elementy wystpuj. Linki lub przyciski Wstecz i Dalej (albo Poprzedni i Nastpny) s w peni uyteczne; ludzie wiedz, co z nimi robi. Uytkownik moe jednak nie yczy sobie narzuconej sekwencji, gdzie po przejciu przez siedem stron musiaby siedmiokrotnie klikn Wstecz, gdyby chcia wró- ci do punktu wyjcia. To nudne! Umieszczajc na kadym etapie sekwencji link prowadzcy z powrotem do nadrzdnej strony, dajesz mu wiksze moliwoci. Ma dziki temu trzy opcje nawigacji: Wstecz, Dalej i Z powrotem. Nie komplikujesz w ten sposób pracy, a swobodnie przegldajcy stron lub aplikacj uytkownik (który móg tymczasem zmieni zdanie dotyczce tego, co chce zrobi) nie bdzie musia tyle klika, eby dotrze tam, gdzie chce. Tak jest wygodniej. Podobnie poczenie szeregu w innym przypadku niepowizanych stron uatwia prac uytkownikom, którzy chcieliby wszystkie strony przejrze. Bez linków Wstecz i Dalej byliby zmuszeni cay czas powraca do strony rodzica — z czasem mogliby si podda i opuci witryn.

W jaki sposób

Podaj list wszystkich elementów lub stron we waciwej im kolejnoci na nadrzdnej stronie. Ujmij j w takiej formie, aby przystawaa do rodzaju elementów, które prezentujesz. Dla zdj byaby to Siatka Miniaturek, a dla artykuów — rozbudowana lista. Wicej na temat dopasowania formy do treci przeczytasz w rozdziale 5. Wystarczy, eby uytkownik klikn link lub element, aby dotrze do stosownej strony. Umie odnoniki Wstecz i Dalej na stronie kadego elementu. Na wielu stronach mona znale miniaturowe podgldy kolejnych elementów, np. w postaci tytuu lub miniaturki obrazu (tak jak na serwisie Flickr, co wida na rysunku 3.19). Dodatkowo utwórz te link prowadzcy uytkownika z powrotem do strony nadrzdnej. Oznacz go nazw w rodzaju „Powrót do...”.

Rysunek 3.19. Flickr Jeden z wariantów Piramidy polega na przeobraeniu linearnej sekwencji w ptl, gdzie ostatnia strona czy si z pierwsz, bez porednictwa strony rodzica. Takie rozwizanie bywa uyteczne, cho uytkownik moe nie by wiadom tego, e ma do czynienia z ptl. Czy

112 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si uytkownik rozpozna pierwsz stron sekwencji? Niekoniecznie. Jeeli kolejno sekwencji jest istotna, powiniene poczy ostatni stron ze stron nadrzdn, by uytkownik wiedzia, e zobaczy ju wszystko, co trzeba.

Przykady

Strony serwisu Flickr oparte s na klasycznej wersji Piramidy. Meneder Obrazów wywietla zdjcia z sekwencji zwanej photostream („fotostrumie”), któr mona zobaczy w caoci, klikajc link oznaczenia u góry widgetu (rysunek 3.19). Dwie miniaturki przedstawiaj po- przednie i kolejne zdjcie photostreamu. Interaktywna aplikacja w serwisie „New York Times” (rysunek 3.20) to kolejny przykad Menedera Obrazów. Na stronie rodzicu znajduje si nieregularna Siatka Miniaturek z klikalnymi obrazami; na stronach zdj (rysunek 3.21) widniej natomiast przyciski strzaek suce do poruszania si po elementach zbioru. Zauwa, e wida tu równie informacj o tym, który element sekwencji uytkownik w danej chwili oglda — w tym przypadku „121 z 176” — co jest miym dodatkiem. Nie ma przycisku „z powrotem”, ale jedyny przycisk poza wspomnianymi powyej — Close (zamknij) — przenosi uytkownika na stron nadrzdn. (Jest to zatem ciekawie wykorzystany Panel Modalny).

Rysunek 3.20. Interaktywna aplikacja „New York Timesa”; na rysunku przedstawiam stron nadrzdn, na której wywietlone s wszystkie zdjcia

Wzorce 113 Rysunek 3.21. Podstrona tej samej aplikacji, na której przy zdjciu widniej przyciski Back, Next i Close (wstecz, dalej i zamknij)

Panel Modalny

Rysunek 3.22. Schemat Panelu Modalnego

Co zrobi

Pokazuj jedn stron bez jakichkolwiek innych moliwoci nawigacyjnych, dopóki uytkownik nie wykona zadanej mu czynnoci.

Kiedy uywa

W aplikacji lub na stronie nic nie moe lub nie powinno si dzia bez udziau uytkownika. W aplikacji skoncentrowanej na dokumencie uytkownik przy zapisywaniu pliku moe by poproszony o podanie nazwy pliku, jeeli nie okreli jej wczeniej. W innych kontekstach uytkownik moe by zmuszony do zarejestrowania si lub potwierdzenia przeczytania wanej wiadomoci, nim zyska moliwo podjcia jakichkolwiek innych czynnoci. Jeeli uytkownik podejmuje si drobnej czynnoci, która moe póniej wymaga od niego dalszego wkadu, znajd sposób, by pobra dane od uytkownika bez uywania panelu modalnego. Przykadowo moesz umieci pole tekstowe tu pod nacinitym przyciskiem; takie

114 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si pole moe tam sobie „wisie”, a uytkownik je wypeni. Nie trzeba zatrzymywa dziaania strony lub aplikacji tylko dlatego, e jaki element czeka na dane. Pozwól uytkownikowi zaj si czym innym, a do pytania powróci póniej.

Dlaczego

Panel Modalny odcina uytkownika od wszystkich innych opcji nawigacyjnych. Nie moe on go zatem zignorowa i zaj si czym innym na stronie lub w aplikacji. Po wykonaniu przy- pisanej mu czynnoci uytkownik wraca tam, gdzie by wczeniej. atwo ten model zrozumie i projektowa na jego podstawie, cho w cigu ostatnich lat by naduywany. Panele modalne zakócaj prac. Kiedy uytkownik nie spodziewa si, e b- dzie zmuszony odpowiedzie na zapytanie Panelu Modalnego, musi on przerwa prac — by moe nawet w celu podjcia decyzji co do czego, co go w ogóle nie obchodzi. Odpo- wiednio uyty Panel Modalny zwraca natomiast uwag uytkownika na kolejn decyzj, któr ma podj. adne inne moliwoci nawigacyjne nie mog go wtedy od tego odwie.

W jaki sposób

W tym miejscu na ekranie, na którym skupiona jest uwaga uytkownika, umie panel, ram- k dialogow albo stron, w których znajdzie si zapytanie o wymagane dane. Element ten powinien tymczasowo uniemoliwi klientowi korzystanie z innych stron aplikacji. Panel powinien by w miar schludny, zgodnie z zaoeniem, i uytkownik ma mie moliwo penego skoncentrowania si na swoim nowym zadaniu. Pamitaj, e jest to wzorzec okrelajcy form nawigacji. Powiniene starannie oznaczy drogi wyjcia, których zreszt nie powinno by wiele — jedna, dwie, moe trzy. W wikszoci przypadków s to przyciski opatrzone krótkimi, „czasownikowymi” wyrazami w rodzaju „Zapisz” czy „Nie zapisuj”. Zwykle mona gdzie znale przycisk Zamknij lub „X” w prawym górnym rogu. Po klikniciu takiego przycisku uytkownik powinien wróci tam, gdzie by wczeniej. Panel Modalny mona uj graficznie w bardzo ciekawy sposób jako lightbox. Polega to na przyciemnieniu wikszoci obszaru ekranu i podwietleniu jasnego panelu modalnego, co sprawia, e uwaga zostaje skupiona na nim. (eby mogo to odnie skutek, Panel Modalny musi by wystarczajco duy, aby uytkownik móg go bez problemu znale. Widywaam tak mae i oddalone od rodka ekranu panele, e odnalezienie ich w duym oknie przegldarki byo do trudne). Na niektórych witrynach zamiast Paneli Modalnych stosuje si podstrony oferujce skrajnie ograniczone moliwoci nawigacyjne. Ekrany logowania i rejestracji zazwyczaj wanie tak dziaaj: nie ma na nich systemów nawigacji lokalnej i globalnej, lecz jedynie linki suce do wyczenia strony (Anuluj, Dalej itp.) oraz Wyjcie Ewakuacyjne. Systemy operacyjne i platformy GUI zazwyczaj udostpniaj modalne okna dialogowe z poziomu systemu. Te przydaj si najbardziej w tradycyjnych aplikacjach komputerowych. Naley unika umieszczania ich na stronach internetowych, a stosowa innego rodzaju panele, nad którymi projektant ma wiksz wadz, a które w mniejszym stopniu przeszka- dzaj uytkownikowi.

Wzorce 115 Przykady

Okno logowania na SlideShare oznaczone jest lightboksem, by przycigao uwag uytkownika. Kiedy uytkownik na SlideShare wykonuje czynno, która wymaga zarejestrowania, na ekranie pojawia si Panel Modalny z rysunku 3.23. Mona si go pozby jedynie na trzy sposoby: logujc si, rejestrujc lub klikajc znajomy przycisk „X” w prawym górnym rogu. Jest to typowe zachowanie dla Paneli Modalnych pojawiajcych si na stronach internetowych.

Rysunek 3.23. Panel Modalny logowania na SlideShare Na serwisie Kayak uytkownik ma styczno z podobnym lightboksem przy zaawansowanym wyszukiwaniu. W tym przypadku panel wskazuje link, którym go uruchomiono, dziki czemu uytkownik moe skojarzy czynno z rezultatem (rysunek 3.24). To ciekawe rozwizanie.

Jeden rodzaj modalnej ramki dialogowej na Macintoshu zwraca na siebie uwag, kiedy rozwija si z paska tytuowego okna. Takie i inne okna modalne aplikacji uniemoliwiaj uytkownikowi posugiwanie si pozostaymi elementami aplikacji, tote jest zmuszony dokoczy czynno lub porzuci j cakowicie, nim zabierze si za cokolwiek innego (rysunek 3.25).

W innych bibliotekach http://quince.infragistics.com/Patterns/Modal%20Panel.aspx http://patternry.com/p=overlay/ Zapoznaj si równie z wzorcem Dialog Overlay w ksice Designing Web Interfaces Billa Scotta i Theresy Neil. Znajdziesz tam równie opisy innych rodzajów okien.

116 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Rysunek 3.24. Panel Modalny modyfikacji waciwoci wyszukiwania na serwisie Kayak

Rysunek 3.25. Panel Modalny w aplikacji na Macintoshu

Gbokie Linkowanie

Rysunek 3.26. Schemat Gbokiego Linkowania

Wzorce 117 Co zrobi

Uchwy okrelony stan witryny lub aplikacji w adresie URL, który mona zapisa i przesa innym. Po wczytaniu takiej informacji aplikacja pojawi si w takiej formie, w jakiej widzia j pierwotny uytkownik.

Kiedy uywa

Witryna lub aplikacja zawieraj obszern i interaktywn tre w rodzaju mapy, ksiki, filmu lub infografiki. Podany punkt lub stan moe by trudny do znalezienia albo uzyskanie go moe by czasochonne. Aplikacja moe mie wiele parametrów lub stanów do wyboru: wi- doków, skal, warstw danych i innych, które mog utrudnia znalezienie danego punktu oraz spojrzenie na niego „prawidowo”.

Dlaczego

Gbokie Linkowanie umoliwia uytkownikowi bezporednie przeskoczenie do podanego punktu lub stanu aplikacji, pozwala zaoszczdzi czas i prac. Przypomina link prowadzcy bezporednio do danego fragmentu typowej strony (albo jak permalink do wpisu blogowe- go) w sposób taki, e uytkownik dostaje adres URL do wybranych treci. Taki element moe jednak przyj form bardziej zoon ni permalink, poniewa z zaoenia moe uchwyci zarówno stan aplikacji, jak i pooenie treci. Wzorzec ten przydaje si przy zapisywaniu stanu, który uytkownik mógby póniej odtwo- rzy, zwaszcza jeeli moe z niego zrobi „zakadk” z wykorzystaniem dobrze mu znanych mechanizmów (czyli zakadek w przegldarkach, serwisów w rodzaju Delicious itp.). Przy- daje si on równie do dzielenia si treci z innymi ludmi — wanie wtedy „byszczy” moliwociami. URL przekierowujcy uytkownika do okrelonego stanu mona wysa poczt elektroniczn, tweetem, opublikowa na serwisie spoecznociowym, przedstawi na forum, zamieci we wpisie blogowym albo przekaza na wiele innych sposobów. Taki g- boko zalinkowany stan mona potraktowa jak deklaracj; moe on sta si „zakanym” albo „zaporedniczonym spoecznie obiektem”.

W jaki sposób

Wykryj umiejscowienie uytkownika w treci i zamie dane o pozycji w adresie URL. Uwzgld- nij przy tym równie dane pomocnicze: komentarze, warstwy danych, znaczniki, podwietlenia itp., aby uytkownik take móg je odczyta po podaniu adresu URL. Rozwa, jakie jeszcze parametry lub stany interfejsu uytkownicy mog zachowywa; mog to by poziom zblienia, powikszenia, tryb widoku, rezultaty wyszukiwania itp. Nie trzeba koniecznie zapisywa ich wszystkich — zalinkowane stany nie powinny ingerowa we waciwoci, których uytkownik zmienia nie chce. Starannie przyjrzyj si kilku scenariuszom uytku, aby wypracowa najlepsz form. Adres URL to najlepszy format zapisu przy Gbokim Linkowaniu, gdy jest uniwersalnie uznawany, przenony, krótki i obsugiwany przez wiele narzdzi, m.in. przez serwisy obsu- gujce zakadki spoecznociowe. (Przy projektowaniu aplikacji niepoczonych internetem prawdopodobnie bdziesz musia wykaza si wiksz kreatywnoci w zakresie doboru formatu). Moesz jednak skorzysta z innych formatów, takich jak XML, przy czym format tekstowy jest atwiejszy w obsudze ni binarny.

118 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Spraw, aby wraz z kolejnymi krokami uytkownika przez tre i zmianami parametrów adres URL w pasku przegldarki aktualizowa si automatycznie, a uytkownik móg w kadej chwili go zobaczy i skopiowa. Nie kady wpadby na pomys, aby szuka gbokiego linku w pasku, wic moesz przygotowa równie funkcj typu „Link”, która da uytkownikowi do zrozumienia: „Tutaj utworzysz link do tego miejsca”. Na niektórych serwisach mona skorzysta z moliwoci wygenerowania kodu JavaScript, pozwalajcego nie tylko uchwyci stan treci i pozycj uytkownika, ale take osadzi wszystko na innej stronie.

Przykady

Google Books zachowuje wiele rónych informacji o stanie w adresach URL (rysunek 3.27): stron w ksice, tryb przegldania (jedna strona, dwie strony, miniatury), obecno pasków narzdzi, a nawet wyniki wyszukiwania. Serwis nie uwzgldnia przy tym poziomu zblienia i susznie, gdy jest to wysoce zindywidualizowane ustawienie. Generujca adres URL funkcja Link jest w istocie zbdna — jest to ten sam adres, który wida w przegldarce.

Rysunek 3.27. Gbokie Linkowanie w Google Books. Adres URL mona pobra z paska adresowego przegldarki lub ramki Link Many Eyes, narzdzie wizualizacyjne IBM, pozwala uytkownikowi na utworzenie wasnej infografiki w oparciu o gotowe rodzaje wykresów i zestawy danych (rysunek 3.28). Charaktery- zuj si one znaczn interaktywnoci i bogactwem zasobów. Opracowan na tym serwisie wizualizacj mona si podzieli albo z uyciem kodu JavaScript (do umieszczenia treci na stronie), albo poprzez utworzenie zrzutu ekranu.

Wzorce 119 Rysunek 3.28. Uchwycenie stanu wizualizacji na serwisie Many Eyes W adresie URL filmu z serwisu YouTube mona umieci sygnatur czasow, cho na pierwszy rzut oka ta moliwo nie jest jasna. Po wczytaniu takiego adresu widz zostaje przeniesiony od razu do okrelonego fragmentu filmu. Szczegóy podaje serwis http://youtubetime.com (rysunek 3.29): wystarczy doda na kocu adresu URL filmu fragment #t=XmYs, gdzie X oznacza minuty, a Y sekundy.

Rysunek 3.29. Serwis YouTubeTime tumaczy, jak z pomoc adresu URL wskaza wybrany fragment filmu

120 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Wyjcie Ewakuacyjne

Rysunek 3.30. Schemat Wyjcia Ewakuacyjnego

Co zrobi

Na kadym ekranie, gdzie opcje nawigacyjne s ograniczone, umie zrozumiale oznaczony przycisk lub link, który prowadzi uytkownika do znajomego punktu.

Kiedy uywa

Twoje strony skadaj si na jaki seryjny proces w rodzaju kreatora albo uytkownik ma styczno z elementami, które ograniczaj jego moliwoci nawigacyjne (np. z Panelem Modalnym). Mog to by strony, do których uytkownicy sigaj w oderwaniu od kontekstu, w jakim si znajduj, tak jak ma to miejsce podczas ogldania rezultatów wyszukiwania. (Wyjcia Ewakuacyjne nie s konieczne, jeeli na stronie znajduj si Mapa Sekwencji lub Okruszki. Uytkownicy rozumiejcy sposób ich funkcjonowania mog z nich skorzysta, by dotrze do znajomego miejsca).

Dlaczego

Ograniczona nawigacja to jedno, ale brak wyjcia to zupenie inna rzecz! Dajc uytkownikowi atwy i oczywisty sposób wyjcia ze strony, zmniejszasz ryzyko, e kiedykolwiek po- czuje si na niej uwiziony. Jest to funkcja z rodzaju takich, które zapewniaj uytkownika, e moe swobodnie zapo- znawa si ze stron lub aplikacj. Przypomina troch funkcj cofnicia zmian, gdy zachca ludzi do wykonywania rónych czynnoci bez obawy o to, e ich rezultaty oka si nieod- wracalne. Przypomnij sobie wzorzec Bezpieczna Eksploracja z rozdziau 1. Umieszczenie Wyj Ewakuacyjnych na stronach, do których uytkownicy docieraj podczas wyszukiwania, jest szczególnie istotne. Odwiedzajcy moe klikn taki link, aby dosta si na „normaln” stron, z której dowie si, dokd waciwie trafi.

W jaki sposób

Umie na stronie przycisk lub link, który skieruje uytkownika z powrotem do „bezpiecznego miejsca”. Takim miejscem moe by strona gówna, „o” w modelu osi i szprych albo dowolna strona z penym systemem nawigacyjnym i jakim wyjanieniem. To, do czego link konkretnie prowadzi, jest ju zalene od ogólnego projektu aplikacji.

Wzorce 121 Przykad

Na stronach internetowych czsto widzimy klikalne logo, penice rol linku do strony gównej. Zazwyczaj znale je mona w lewym górnym rogu strony i su jako Wyjcia Ewakuacyjne do znajomych punktów, a jednoczenie pomagaj w promowaniu „marki” witryny. W niektórych oknach funkcj t moe peni przycisk w rodzaju Anuluj. Uytkownik moe w ten sposób powiedzie: „Mam ju do; zapomnijmy, e si za to zabraem”. Czy zdarzyo Ci si kiedy zadzwoni np. do banku i wysucha serii pyta automatu zgosze- niowego? Tego rodzaju obsuga jest niejasna i czasochonna. Jeeli zdarzy Ci si popeni bd, musisz zadzwoni jeszcze raz i zacz od nowa. Tymczasem w wielu takich systemach telefo- nicznych istnieje Wyjcie Ewakuacyjne, o którym pewnie nie syszae: wystarczy w dowolnym momencie nacisn klawisz „0”, eby poczy si bezporednio z czowiekiem na drugim kocu linii. Na wielu witrynach mona znale strony, które ograniczaj moliwoci nawigacyjne, np. Panele Modalne i podstrony pozbawione systemu nawigacji globalnej. Ekran logowania na serwisie Netflix jest przykadem takiej strony. Kiedy uytkownik zdecyduje, e wcale nie chce si logowa, moe klikn logo Netflix, eby powróci na stron gówn (rysunek 3.31).

Rysunek 3.31. Strona logowania Netflix, której logo suy jako Wyjcie Ewakuacyjne Czasami mona sobie pozwoli na dosowno. Google Labs do niedawna oferowao uytkownikom funkcje, które nie byy jeszcze w peni gotowe do uycia i zawieray bdy. W przykadzie z rysunku 3.32 Google Maps daje uytkownikowi adres URL przedstawiony dosownie jako „wyjcie ewakuacyjne” na wypadek, gdyby co si zepsuo.

Rysunek 3.32. Wyjcie Ewakuacyjne Google Maps Labs

122 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si W innych bibliotekach

Te dwa wzorce nosz nazw „Home Link” („link domowy”) i s bardzo podobne do Wyjcia Ewakuacyjnego. http://ui-patterns.com/patterns/HomeLink http://welie.com/patterns/showPattern.php?patternID=home

Grube Menu

Rysunek 3.33. Menu Produkty na serwisie Microsoftu

Co zrobi

Przedstaw dug list opcji nawigacyjnych w rozwijanych menu. Uka w nich wszystkie podstrony poszczególnych sekcji witryny. Uporzdkuj je starannie, odpowiednio dobierajc kategorie lub kolejno sortowania, oraz rozó je w poziomie.

Kiedy uywa

Witryna lub aplikacja skadaj si z wielu stron w wielu kategoriach, by moe uporzdko- wanych wedug hierarchii o trzech lub wicej poziomach. Chcesz zaprezentowa wikszo z tych stron osobom, które bd niezobowizujco przeglda witryn, dajc im moliwo zapoznania si z jej zawartoci. Twoi uytkownicy czuj si swobodnie, korzystajc z menu, które rozwija si klikniciem lub najechaniem kursorem na jego nazw.

Dlaczego

Grube Menu uatwiaj zapoznawanie si ze zoonymi witrynami. Daj uytkownikom wicej moliwoci nawigacyjnych.

Wzorce 123 Udostpniajc tyle linków na kadej stronie, dajesz odwiedzajcym moliwo przechodze- nia bezporednio midzy (na ogó) dowolnymi podstronami. Tym samym przeobraasz wielopoziomow witryn, której podstrony z rónych sekcji nie s wzajemnie poczone, we w peni zintegrowan witryn. Grube Menu oparte s na zasadzie progresywnego ujawniania, wanej koncepcji z zakresu projektowania interfejsów uytkowników. Polega ona na tym, e rzeczywista zoono ele- mentów pozostaje ukryta, dopóki uytkownik sam nie podejmie stosownych czynnoci, by si z ni zapozna. Osoba odwiedzajca stron moe zapozna si z ogóln zawartoci witryny, ogldajc nagówki w menu ogólnym, a kiedy jest ju gotowa dowiedzie si wicej, wystarczy, e wykona jeden gest, eby otworzy Grube Menu. Uytkownik nie jest zatem trakto- wany dziesitkami podstron, kiedy tego nie chce. Jeeli w Twoim systemie nawigacji globalnej uye ju rozwijanych menu, moesz rozwa- y, czy nie warto byoby przeksztaci ich w Grube Menu. Ma to sens, jeeli przedstawienie wikszej liczby linków sprawi, e tre strony wyda si ciekawsza dla przypadkowego uytkownika. Dziki zastosowaniu tego systemu ludzie nie bd musieli zgbia kolejnych kategorii i podkategorii, eby trafi na ciekawe strony, gdy bd mogli je przejrze ju na samym pocztku.

W jaki sposób

W kadym menu umie odpowiednio uporzdkowan list linków. Rozmie je w Zatytu- owanych Sekcjach (rozdzia 4.), jeeli w ogóle przystaj do takiej struktury danych; jeeli nie, wybierz kolejno sortowania pasujc do charakteru treci, np. alfabetyczn lub chronolo- giczn. Zdecyduj o rozmieszczeniu przestrzennym linków przy uyciu nagówków, duej iloci pu- stej przestrzeni, skromnych elementów graficznych i dowolnych innych elementów. Wyko- rzystaj przestrze poziom — menu moesz rozoy na ca szeroko strony, jeeli tak trzeba. Na wielu witrynach kategorie przedstawione s przy uyciu kolumn. Zbyt wysokie menu moe wystawa poza doln krawd przegldarki. (To uytkownik okrela wysoko okna przegldarki, wic wysoko menu powiniene szacowa ostronie). Grube Menu na najlepszych stronach pasuj stylistycznie do reszty witryny. Zaprojektuj je tak, by przystaway do kolorystyki, ukadu i wszelkich innych elementów strony. Niektóre rodzaje menu nie dziaaj dobrze w poczeniu z technologiami asystujcymi, takimi jak czytniki ekranowe. Dopilnuj, by Grube Menu wspópracoway z nimi, a jeli to niemoliwe, rozwa skorzystanie z bardziej statycznej formy w rodzaju wzorca Mapka Strony W Stopce.

Przykady

Grube Menu na stronie Starbucks s bardzo dobrze rozplanowane (rysunek 3.34). Kade menu ma inn wysoko, ale tak sam szeroko, a wszystkie s oparte na siatce elementów o jed- nakowym ksztacie. Ich styl pasuje do ogóu witryny, a rozlege puste przestrzenie uatwiaj uytkownikowi czytanie. W menu wystpuj materiay promocyjne, które jednak nie kuj w oczy. Ksztat menu odbiegajcy nieco od regularnego prostokta dodaje pro- jektowi wieoci.

124 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Rysunek 3.34. Menu „Coffee” („Kawa”) na anglojzycznej stronie Starbucks Jak wida na rysunku 3.35, menu na stronie Slate s mniej czytelne i bardziej zagszczone, zgodnie z ogólnym stylem strony. Nie wykorzystuj równie naleycie poziomej przestrzeni. Doceni naley jednak pomys, by ich uy w prezentowaniu promowanych artykuów — majcy rozeznanie uytkownik moe przejrze wiele nagówków, przecigajc kursorem po kolejnych menu.

Rysunek 3.35. Menu „News & Politics” („Wiadomoci i polityka”) na serwisie Slate

Wzorce 125 Amerykaski Czerwony Krzy nie poprzestaje na rozwijaniu menu u góry strony (rysunek 3.36) — kiedy uytkownik najeda kursorem na dowolny, pierwszopoziomowy element menu, Grube Menu pojawia si w miejscu ruchomego, dziaajcego jak karuzela panelu z wiadomociami. Menu wyglda tak samo we wszystkich pierwszopoziomowych elementach, tote wszystkie podstrony z kadej kategorii s widoczne jednoczenie, niezalenie od tego, który element si wskae.

Rysunek 3.36. Wszystkie menu na stronie Amerykaskiego Czerwonego Krzya WebMD korzysta z alfabetycznej kolejnoci sortowania w swoich dugich, ahierarchicznych listach tematów zwizanych z problematyk zdrowotn (rysunek 3.37).

Rysunek 3.37. Menu „Health A-Z” („Zdrowie od A do Z”) na stronie WebMD

126 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Mapka Strony W Stopce

Rysunek 3.38. Stopka serwisu Whole Foods

Co zrobi

Umie map strony w stopce kadej wchodzcej w skad witryny podstrony. Potraktuj j jako cz systemu nawigacji globalnej, uzupeniajc elementy zawarte w nagówku. Skró j, jeeli nie mieci si w tej ograniczonej przestrzeni.

Kiedy uywa

Podstrony Twojej witryny s obszerne, a nie musisz znaczco ogranicza rozmiaru strony ani czasu jej wczytywania. Nie chcesz te, eby system nawigacji w nagówku lub pasku bocznym zajmowa za duo miejsca. Witryna skada si z niemaej liczby stron, ale nie zawiera wielkiej liczby kategorii i „wanych” stron (a s to rzeczy, których uytkownicy poszukuj). W miar wyczerpujc map strony — przynajmniej obejmujc podstrony, które pominito w nagówku — mona zmieci w pasku nie wyszym od poowy okna przegldarki. W nagówku strony moe si znajdowa menu nawigacji globalnej, które jednak nie pokazuje wszystkich poziomów hierarchii strony, lecz — by moe — jedynie kategorie najwyszego poziomu. Wolisz prost i schludn stopk od Grubych Menu ze wzgldu na atwo imple- mentacji i kwestie zwizane z atwoci uycia.

Dlaczego

Mapka Strony W Stopce uatwia zapoznawanie si ze struktur rozbudowanej witryny. Po- nadto taka mapka daje uytkownikowi dodatkowe moliwoci nawigacyjne. Umieszczajc tyle linków na kadej stronie, pozwalasz uytkownikowi przeskakiwa bezporednio z dowolnej strony na inn podstron (lub któr ze stron nadrzdnych). Wielopo- ziomow witryn, której podstrony nie s poczone z podstronami innych sekcji strony, przeobraasz zatem w stron charakteryzujc si pen integracj. Uytkownik zwraca uwag na stopk, kiedy doczytuje stron do koca. Umieszczajc w tym miejscu ciekawe linki, zachcasz go do pozostania na stronie. Wreszcie, pokazujc uytkownikowi ca mapk strony, pozwalasz mu dobrze pozna kon- strukcj witryny oraz zorientowa si, gdzie moe znale interesujce go zasoby. Jest to bardzo cenne na rozbudowanych stronach.

Wzorce 127 Moe si zdarzy, e bdziesz musia zdecydowa midzy zastosowaniem wzorców Mapka Strony W Stopce a Grube Menu. Mapk Strony W Stopce stosunkowo atwiej umieci i a- twiej ni zarzdza, kiedy ma si do czynienia z konwencjonaln internetow stron, jako e taka mapka nie zawiera dynamicznych elementów. Uytkownik nie musi rozwija menu poprzez najechanie kursorem, gdy Mapka Strony W Stopce jest po prostu zbiorem statycznych linków. Mapka taka jest równie bardziej przyjazna dla czytników ekranowych, tote ma przewag równie w zakresie atwoci dostpu. Z drugiej strony, stopka moe by zlekcewaona przez zajtych lub przypadkowych uyt- kowników, zainteresowanych gównie treci strony i nagówkami. Jeeli masz jakie wtpliwoci, przeprowad testy uywalnoci i sprawd statystyki strony, eby stwierdzi, czy ktokolwiek w ogóle ze stopki korzysta.

W jaki sposób

Zaprojektuj dla caej witryny stopk, w której umiecisz spis najwaniejszych sekcji oraz ich najwaniejszych podstron. Umie w niej równie linki suce do nawigacji funkcyjnej, narzdzia w rodzaju wyboru jzyka, oraz Linki Spoecznociowe (rozdzia 9.) i inne typowe dla stopki dane, takie jak informacje o prawach autorskich i zasadach prywatnoci. Moe to by pena mapa strony, chocia wcale nie musi. Celem jest przedstawienie uytkownikom wikszoci informacji, których poszukuj, bez nadmiernego przeadowywania systemu nawigacji w pasku bocznym lub nagówku. W praktyce opcje globalnej nawigacji u góry strony peni raczej funkcj zadaniow, odpo- wiadajc na pytania uytkownika dotyczce tego, co zawiera witryna i gdzie znale dan informacj. Tymczasem w Mapce Strony W Stopce mona uchwyci sam hierarchiczn struktur witryny. Wydaje si, e ten dwuczonowy ukad nawigacji sprawdza si. Jeeli wdrowanie po treciach znajdujcych si na witrynie jest samo w sobie skomplikowane, tak jak w bazie produktów, artykuów, utworów muzycznych, filmów, ksiek itp. elementów, obszar strony nad zgiciem moesz przeznaczy na narzdzia suce do poruszania si po treci, a stopk na niemal wszystkie pozostae elementy. Oto kilka przykadów treci, które mona umieci w stopce: Gówne kategorie zawartoci, Informacja o witrynie lub organizacji, Strony partnerskie, np. witryny i marki nalece do tego samego waciciela, Linki do zasobów spoecznociowych, np. forów, Pomoc, Informacje kontaktowe, Biece promocje, Informacje dla wolontariuszy i darczyców (w przypadku organizacji non profit).

128 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Przykady

Na przykadzie serwisu REI mona pozna rónice midzy zadaniowym systemem nawigacji globalnej u góry strony i efektywn Mapk Strony W Stopce (rysunek 3.39). W nagówku — cakowicie susznie — znajduj si narzdzia suce do robienia zakupów, poznawania nowych informacji i planowania podróy; w kocu po to uytkownicy wchodz na t stron. W stopce mona znale dodatkowe, lecz równie istotne zasoby: informacje „o stronie”, obsug klienta, zasady czonkostwa itp.

Rysunek 3.39. Nagówek i stopka REI W stopce serwisu „Los Angeles Times” znajduj si te same treci, co w zakadkach nagówka, lecz w formie ahierarchicznej i nieco inaczej rozplanowanej (rysunek 3.40). Serwis „Wall Street Journal” ma gigantyczn stopk (rysunek 3.41). Powiniene raczej tworzy mniejsz. Flickr, jak zawsze, cechuje si minimalizmem (rysunek 3.42). Zamiast kolumn, tak jak w wikszoci witryn, uyto w nim rzdów. W MapQuest skorzystano z kolumn, ale równie wietnie radzi sobie on na niewielkim obszarze (rysunek 3.43).

Wzorce 129 Rysunek 3.40. Nagówek i stopka serwisu „Los Angeles Times”

Rysunek 3.41. Stopka serwisu „Wall Street Journal”

130 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Rysunek 3.42. Stopka serwisu Flickr

Rysunek 3.43. Stopka serwisu MapQuest

W innych bibliotekach http://welie.com/patterns/showPattern.php?patternID=sitemap-footer http://ui-patterns.com/patterns/FatFooter Wzorzec ten, przy nieco rozbudowanej definicji, okrela si niekiedy mianem „Fat Footer”, czyli „gruba stopka”. Ciekawe przykady dziaania tego wzorca znajdziesz w artykule Infor- mative and Usable Footers in Web Design w „Smashing Magazine”: http://www.smashingmagazine.com/2009/06/17/informative-and-usable-footers-in-webdesign/

Narzdzia Logowania

Rysunek 3.44. Narzdzia logowania serwisu Flickr

Co zrobi

Umie narzdzia nawigacji funkcyjnej zalogowanego uytkownika w prawym górnym rogu strony. Uwzgldnij narzdzia w rodzaju koszyków z zakupami, ustawie profilu i konta, pomoc oraz kontrolk wylogowania.

Wzorce 131 Kiedy uywa

Narzdzia Logowania przydaj si na kadym serwisie, na którym uytkownicy czsto si loguj.

Dlaczego

Wzorzec jest ju w peni konwencjonalny. Ludzie oczekuj, e znajd wymienione powyej narzdzia w prawym górny rogu, wic zwykle tam najpierw patrz. Zadbaj o pozytywne wraenie uytkownika, umieszczajc te narzdzia tam, gdzie mona si ich spodziewa.

W jaki sposób

Zarezerwuj miejsce w prawym górnym rogu kadej strony na Narzdzia Logowania. W pierw- szej kolejnoci powinna tam si znajdowa nazwa uytkownika i ewentualnie miniaturka jego awatara, jeeli istnieje, chyba e te informacje ju si znajduj gdzie na stronie. Dopilnuj, aby kade narzdzie dziaao tak samo na kadej stronie witryny lub aplikacji. Zamie tam narzdzia, takie jak: przycisk lub link wylogowywania (to istotne, wic koniecznie musi si tam znale), ustawienia konta, ustawienia profilu, pomoc, obsuga klienta, koszyk z zakupami, wiadomoci prywatne i powiadomienia, link do osobistych zbiorów elementów (obrazów, ulubionych treci czy list ycze), powrót do strony gównej. Niech ten obszar nie bdzie za duy lub zbyt wyrazisty, gdy zdominuje ca stron, a nie powinien. S to narzdzia do nawigacji funkcyjnej, które musz by stale dostpne, gdyby uytkownik ich potrzebowa, ale poza tym powinny by „przezroczyste”. Niektóre elementy mona oznaczy ikonkami zamiast tekstem. Koszyki z zakupami, wiadomoci i linki do systemu pomocy opatruje si pewnymi standardowymi oznaczeniami graficznymi, z których te moesz skorzysta. Z przykadami zapoznasz si poniej. Pole wyszukiwania czsto umieszcza si obok Narzdzi Logowania. Musi si ono jednak znajdowa zawsze w jednym miejscu, niezalenie od tego, czy uytkownik jest zalogowany, czy nie. Kiedy uytkownik nie jest zalogowany, na tym obszarze mona umieci formularz logowania skadajcy si z pól przeznaczonych na nazw uytkownika i haso, z wezwania do dziaania oraz ewentualnie funkcji pozwalajcej na odzyskanie hasa.

Przykady

Na rysunku 3.45 widnieje przegld Narzdzi Logowania z serwisów Mint, Twitter, Amazon i Gmail. Nie rzucaj si od razu w oczy, ale mona je atwo znale, poniewa znajduj si we waciwym rogu strony lub okna.

132 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Rysunek 3.45. Od lewego górnego rogu zgodnie z ruchem wskazówek zegara: Mint, Twitter, Amazon i Gmail W serwisie Scribd uyto niemal wszystkich podanych w tym wzorcu narzdzi (rysunek 3.46). Jako e jest ich do duo, wykorzystanie rozwijanego menu pozwala unikn zabaaganienia caego tego obszaru. Na serwisie iTunes równie wykorzystano takie menu (rysunek 3.47).

Rysunek 3.46. Narzdzia logowania Scribd

Rysunek 3.47. Narzdzia logowania iTunes

Wzorce 133 Mapa Sekwencji

Rysunek 3.48. Mapa sekwencji skadania zamówienia na serwisie Hanna Anderson

Co zrobi

Na kadej stronie sekwencji umie map wszystkich jej stron we waciwej kolejnoci wraz ze wskanikiem okrelajcym, na jakim etapie uytkownik si znajduje.

Kiedy uywa

Tworzysz jak narracj, proces, Kreator lub cokolwiek innego, przez co uytkownik przechodzi po kolei. cieka, któr uytkownik poda, jest w znacznej mierze linearna. Jeeli topologia nawigacyjna jest rozlega i hierarchiczna (a zatem nielinearna), moesz roz- way skorzystanie z wzorca Okruszki zamiast mapy strony. Jeli etapów lub elementów jest wiele, a ich kolejno nie jest szczególnie wana, interfejs powinien raczej przybra form Wyboru Dwupanelowego (rozdzia 5.) lub Ogldu Ze Szczegóami (rozdzia 7.).

Dlaczego

Mapa Sekwencji pokazuje uytkownikowi, na jakim etapie sekwencji si znajduje oraz — co waniejsze — ile mu jeszcze zostao do koca. Ta wiedza pomaga mu podj decyzj, czy kontynuowa, oceni, ile to jeszcze potrwa i zachowa orientacj. Mapy Sekwencji su równie jako narzdzia nawigacyjne. Jeeli uytkownik chce wróci do wczeniejszego kroku, moe go w tym celu klikn na mapie.

W jaki sposób

Przy krawdzi strony umie niewielk map stron wchodzcych w skad sekwencji. Powin- na by rozoona w jednej linii lub kolumnie, aby przypadkiem nie konkurowaa o uwag z waciw treci strony. Wyrónij wskanik biecego kroku, rozjaniajc go lub przyciem- niajc wzgldem pozostaych. W podobny sposób oznacz równie kroki, które uytkownik ju przeszed. Dla wygody uytkownika moesz umieci map obok gównych kontrolek nawigacyjnych, czyli zazwyczaj przycisków Wstecz i Dalej. W jaki sposób oznaczy poszczególne kroki w mapie? Jeeli strony lub kroki s ponumerowane, uyj ich numerów, gdy te s krótkie i atwe do zrozumienia. Powiniene jednak równie umieci na mapie tytuy stron. Niech bd odpowiednio krótkie, by mona je byo zmieci na

134 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si mapie. Daje to uytkownikowi wystarczajco duo informacji, by wiedzie, do których stron moe wróci, i rozezna si, jakiego rodzaju informacje bdzie musia poda na kolejnych stronach.

Przykady

Pokaz slajdów widoczny na rysunku 3.49 opatrzony jest Map Sekwencji u dou. Pozwala to uytkownikom na poruszanie si po zdjciach nieco swobodniej, cho wikszo z nich prawdopodobnie wolaaby uy przycisków Prev i Next u góry.

Rysunek 3.49. Pokaz slajdów na serwisie „Boston Globe” z map sekwencji pod zdjciem Konfigurator produktu na stronie Mini Cooper (rysunek 3.50) jest skrzyowaniem Edytora Ustawie z Kreatorem, gdy pozwala uytkownikowi cakowicie dowolnie porusza si po stronach, które s jednak kolejno ponumerowane. Mapa sekwencji u góry jest narzdziem kluczo- wym dla „zabawy” aplikacj, poruszania si po stronach i poznawania rónych moliwoci. Kreatory instalacji zwykle prowadz uytkownika przez wiele etapów. W instalatorze Adobe (rysunek 3.51) po lewej stronie znajduje si typowa Mapa Sekwencji. Niektóre kroki instalatora s dezaktywowane, kiedy si je pomija lub kiedy nie maj zwizku z decyzjami uytkownika, tak jak w przypadku instalacji wersji demonstracyjnej, gdzie uytkownik nie móg poda numeru Adobe ID.

W innych bibliotekach http://ui-patterns.com/patterns/StepsLeft http://developer.yahoo.com/ypatterns/navigation/bar/progress.html

Wzorce 135 Rysunek 3.50. Konfigurator produktu Mini Cooper z map sekwencji w lewym górnym rogu

Rysunek 3.51. Instalator Adobe CS5 z map sekwencji z lewej strony

Okruszki

Rysunek 3.52. Okruszki na serwisie Target

136 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Co zrobi

Na kadej podstronie wielopoziomowej hierarchii nawigacyjnej umie list wszystkich stron nadrzdnych, cznie ze stron gówn.

Kiedy uywa

Twoja aplikacja lub strona s oparte na hierarchicznej strukturze o dwóch lub wicej poziomach. Uytkownicy poruszaj si z uyciem kontrolek nawigacyjnych, przegldajc, filtrujc, wyszukujc treci na stronie i docierajc do nich za pomoc gbokich linków zdobytych w innych miejscach. Same narzdzia nawigacji globalnej nie wystarcz, eby pokaza uytkownikowi, gdzie si znajduje, poniewa hierarchia katalogów jest w takiej sytuacji zbyt rozlega. Twoja witryna lub aplikacja mog z kolei mie zestaw narzdzi do przegldania i filtrowania duych baz danych, np. wystawionych na sprzeda artykuów. Artykuy s uporzdkowane wedug pewnej hierarchii, ale taka kategoryzacja niekoniecznie przystaje do sposobu, w jaki ludzie tych produktów poszukuj.

Dlaczego

Okruszki ukazuj wszystkie poziomy hierarchii midzy biec stron a stron gówn. W tym sensie Okruszki s linearnym wycinkiem ogólnej mapy witryny lub aplikacji. Podobnie jak Mapa Sekwencji, Okruszki pomagaj uytkownikowi okreli, gdzie si znajduje. Przydaje si to zwaszcza wtedy, kiedy uytkownik przeszed bezporednio do strony znajdu- jcej si na dalszym poziomie hierarchii, za porednictwem rezultatów wyszukiwania lub filtrowania wyników. W odrónieniu od Mapy Sekwencji, Okruszki nie informuj jednak uytkownika, dokd uda si dalej — dotycz jedynie chwili obecnej. Niektóre róda twierdz, e Okruszki (nazwane tak z powodu bani o Jasiu i Magosi, gdzie Ja rozrzuca okruszki chleba, by zaznaczy drog do domu) najbardziej si przydaj, eby wskaza uytkownikowi, po jakiej ciece dosta si do biecej strony z najwyszego poziomu witryny lub aplikacji. Jest to prawda wycznie w sytuacji, kiedy uytkownik rzeczywicie dotar do biecej strony ze strony gównej przez kolejne poziomy hierarchii, bez odchodzenia w bok, równolegego przegldania innych treci, trafiania w lepe zauki, wyszukiwania lub wchodzenia po bezporednich linkach z innych stron. Takie sytuacje zdarzaj si stosunkowo rzadko. Okruszki raczej wskazuj pooenie uytkownika wzgldem reszty aplikacji lub witryny. Nie chodzi o histori przegldania, lecz o kontekst. Przyjrzyj si przykadowi serwisu Target na rysunku 3.52. Przegldanie filtrowane, czyli wyszukiwanie elementów o okrelonych ce- chach, sprowadzio mnie na t stron, zagrzeban gboko w hierarchii serwisu. (Taki sam wynik mogabym te osign, prowadzc wyszukiwanie wedug sów kluczowych). Skoro jednak tu si znalazam, mog spojrze, gdzie jestem w hierarchii produktów, i wiem, dokd mog jeszcze trafi. Za porednictwem Okruszków mog si przyjrze wszystkim mikserom dostpnym w sklepie Target i porówna produkty. Wreszcie Okruszki zwykle s klikalnymi linkami lub przyciskami, wobec czego mona je uzna za narzdzia nawigacyjne same w sobie.

Wzorce 137 W jaki sposób

W górnej czci strony umie linijk tekstu lub rzd ikonek wskazujce pooenie biecej strony w hierarchii. Zacznij od najwyszego poziomu, a po jego prawej umieszczaj kolejne, a do biecej strony. Pomidzy poziomami zamie element graficzny lub tekstowy, eby ukaza midzy nimi relacj na linii rodzic–dziecko. Ów element przyjmuje zwykle form strzaki wskazujcej w prawo, trójkta, znaku wikszoci (>), ukonika (/) lub prawego cu- dzysowu ostroktnego (»). Kada strona powinna by oznaczona wasnym tytuem. Uytkownik powinien od razu rozpozna stron, na której ju by. Jeeli natomiast nie by na poprzednich stronach w hierarchii, powinien chocia domyli si, co si na nich znajduje. Same oznaczenia powinny by linkami do stron. Bieca strona bywa (cho nie zawsze) przedstawiana jako ostatni „okruszek”. Jeeli zdecydujesz si na takie rozwizanie, odrónij jej oznaczenie od pozostaych, gdy ono nie jest linkiem.

Przykady

Panel sterowania Windows 7 jest hierarchicznym Edytorem Ustawie, którego elementy rozmieszczone s na trzech poziomach. Na rysunku 3.53 widnieje okno ustawie Personalizacja z kategorii Wygld i personalizacja (która ma jeszcze sze innych podkategorii).

Rysunek 3.53. Panel sterowania Windows 7 Spoecznoci internetowe w rodzaju tej na rysunku 3.54 czsto opieraj si na gbokich hie- rarchiach: kategoriach forów, forach, podforach, dalszych jeszcze podkategoriach i wtkach. Okruszki pomagaj uytkownikom w zrozumieniu takich hierarchii i poruszaniu si po nich.

Rysunek 3.54. Fora serwisu Mothering.com

138 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Na rysunku 3.55 wida przykad wykorzystania Okruszków w innych warunkach ni na stronie. Narzdzia programistyczne Chrome, poród wielu innych tego rodzaju narzdzi, daj uytkownikom sposób na zarzdzanie bardzo rozbudowanymi strukturami hierarchicz- nymi; w tym przypadku s to tagi strukturalne osadzone w kodzie HTML. Okruszki s nie- ocenione w orientowaniu si we wasnym pooeniu w tej strukturze.

Rysunek 3.55. Narzdzia programistyczne Chrome

W innych bibliotekach http://developer.yahoo.com/ypatterns/navigation/breadcrumbs.html http://ui-patterns.com/patterns/Breadcrumbs http://www.welie.com/patterns/showPattern.php?patternID=crumbs http://patternry.com/p=breadcrumbs/ http://quince.infragistics.com/Patterns/Breadcrumbs.aspx http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

Pasek Przewijania Z Adnotacj

Rysunek 3.56. Pasek przewijania na serwisie MSNBC z informacjami o sekcjach

Wzorce 139 Co zrobi

Spraw, by pasek przewijania dodatkowo peni funkcj mapy treci bd wskanika pooenia uytkownika.

Kiedy uywa

Projektujesz aplikacj ukierunkowan na prac na dokumentach lub z interfejsem opartym na modelu nawigacji „przeciganie i przyblianie”, np. map lub du wizualizacj. Uyt- kownik bdzie przeglda dokument lub obraz w poszukiwaniu interesujcych go elemen- tów, np. wedug numerów stron lub punktów orientacyjnych. Uytkownicy mog mie problemy z orientowaniem si, gdzie s i co jeszcze zobacz w miar dalszego przewijania.

Dlaczego

Pomimo e uytkownik, kiedy przewija tre, pozostaje cay czas w obrbie jednego obszaru nawigacyjnego, drogowskazy s przydatne. Podczas szybkiego przewijania strony czytanie tekstu jest do trudne (albo i niemoliwe, jeli ekran nie nada z odwieaniem), wic po- trzebny jest inny wskanik pooenia. Czasami nawet nie wystarczy zatrzyma si na chwil, gdy w danym fragmencie moe brakowa elementów w rodzaju nagówków, po których mona by si byo zorientowa w swoim pooeniu. Dlaczego mielibymy si posuy akurat paskiem przewijania? Dlatego, e wanie na nim koncentruje si uwaga uytkownika. Jeeli doczysz do niego drogowskazy, uytkownik je dostrzee i skorzysta z nich przy przewijaniu, zamiast przyglda si jednoczenie dwóm rónym obszarom ekranu. Drogowskazy moesz te umieci w pobliu paska przewijania, eby osign taki sam efekt. Im bliej, tym lepiej. Kiedy wskaniki pooenia znajduj si na samym pasku, mamy do czynienia z niejako jed- nowymiarowym Ogldem Ze Szczegóami (rozdzia 7.). cieka paska jest ogldem, a przewijane okno szczegóem.

W jaki sposób

Umie wskanik pooenia na pasku przewijania lub w jego pobliu. Mog si tu przyda zarówno statyczne, jak i dynamiczne wskaniki. Statyczne to takie, które nie zmieniaj si z sekundy na sekund, czyli np. kolorowe segmenty paska przewijania (rysunek 3.57). Dopil- nuj jednak, eby ich funkcja bya zrozumiaa. Takie dodatki mog oniemieli uytkowników, którzy nie s przyzwyczajeni do graficznego urozmaicenia paska przewijania. Dynamiczne wskaniki zmieniaj si wraz z tym, jak uytkownik przewija stron, i czsto przyjmuj posta chmurek informacyjnych. W miar przewijania chmurka informacyjna wy- wietlana przy pasku zmienia si, by pokaza informacje o treciach w danym miejscu. Do- kadna zawarto takiej chmurki róni si, w zalenoci od charakteru aplikacji. W programie Microsoft Word widnieje w niej numer strony i nagówek. Niezalenie od charakteru wskanika, bdziesz musia okreli, czego uytkownik bdzie naj- prawdopodobniej szuka, a tym samym sprecyzowa, jakie treci znajd si w adnotacji. Struktura treci jest dobrym punktem wyjcia. Kiedy tre jest kodem, moesz zawrze we wskaniku funkcj lub metod; kiedy jest to arkusz kalkulacyjny, podaj numer rzdu i podobne dane. We te pod uwag sytuacje, kiedy uytkownik wyszukuje treci w dokumencie — adnotacja powinna wtedy wskaza, w których miejscach dokumentu znajduj si poszukiwane treci.

140 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Rysunek 3.57. Aplikacja tkdiff

Przykady

Widoczna na rysunku 3.57 aplikacja tkdiff podwietla rónice midzy dwiema wersjami pliku tekstowego. Dodane sekcje oznaczone s na zielono, zmodyfikowane na niebiesko, a usu- nite na czerwono. Pasek Przewijania Z Adnotacj peni funkcj ogólnej mapy, co uatwia uytkownikowi rozeznanie rónic midzy duymi plikami. Pasek przewijania Chrome opatrzony jest wskanikami rezultatów wyszukiwania (rysunek 3.58). Kiedy szukasz sowa na stronie internetowej, Chrome podwietla wyniki na samej stronie na óto, a w pasku przewijania zaznacza ich pooenie ótym wskanikiem. Dziki temu uytkownik moe przewin stron bezporednio do nich.

Rysunek 3.58. Rezultaty funkcji Znajd w Chrome

W innych bibliotekach http://quince.infragistics.com/Patterns/Annotated%20Scrollbar.aspx

Wzorce 141 Animowane Przejcie

Rysunek 3.59. Przejcie docka Mac OS

Co zrobi

„Wygad” zaskakujce lub znaczce przejcie animacj, która sprawi, by wygldao naturalniej.

Kiedy uywa

Uytkownik porusza si po duym obszarze wirtualnym w rodzaju obrazu, arkusza, wykresu lub dokumentu tekstowego. By moe ma moliwo przybliania obrazu w zrónicowanym stopniu, przecigania go, przewijania lub obracania. Jest to szczególnie przydatne w odniesieniu do grafik informacyjnych w rodzaju map i wykresów. (Wicej na temat wizualizacji danych przeczytasz w rozdziale 7.). W interfejsie mog te znajdowa si sekcje, które uytkownik lub sam system mog wielo- krotnie otwiera i zamyka — dendrogramy ze „zwijanymi” punktami rodzicami, samo- dzielne okna, które mona wcza i wycza, albo Rozwijane Panele (rozdzia 4.). Animo- wane przejcia mona wykorzysta równie w momentach, kiedy uytkownicy przeskakuj midzy stronami.

Dlaczego

Wszelkie zmiany widoku treci zakócaj orientacj uytkownika w wirtualnej przestrzeni. Natychmiastowe przyblienie lub oddalenie obrazu, podobnie jak obrócenie go albo wy- czenie elementów ekranu w sposób taki, e layout ekranu ulega zmianie, mog zupenie zmci zmys przestrzenny uytkownika. Nawet przeskoki przy przewijaniu dugiej strony tekstu mog spowolni czytelnika.

142 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Jest o wiele lepiej, kiedy przejcie z jednego stanu do drugiego odbywa si z zachowaniem cigoci wizualnej. Innymi sowy, przejcie ma by pynne, a nie niecige. Uatwia to uytkownikowi orientacj. Moemy si domyli, e wynika to z tego, i gadkie przejcia przy- pominaj zachowanie obiektów w wiecie rzeczywistym. Kiedy ostatnio udao Ci si podskoczy tak, by w mgnieniu oka znale si kilka metrów nad ziemi? Moemy to take uj mniej wymylnie: animowane przejcie pozwala oczom uytkownika ledzi zmian pooenia, dziki czemu po nagej zmianie nie musi si domyla, jak wróci do poprzedniej pozycji. Dobrze wykonane Animowane Przejcia zwikszaj atrakcyjno Twojej aplikacji. S po prostu fajne!

W jaki sposób

Dla kadego rodzaju zmiany interfejsu zaprojektuj krótk animacj „czc” stan poprzedzajcy z nastpujcym. W przypadku przybliania i obracania moesz ukaza porednie poziomy przyblienia i obrotu. Zamykany panel moe si zmniejsza, a pozostae panele powiksza, by zaj jego miejsce. Doó wszelkich stara, by w kadej chwili wygldao na to, e na ekranie zachodzi jakie rzeczywiste zjawisko. Ten wzorzec jest jednak obosiecznym mieczem. Uwaaj by nie wywoa u uytkownika cho- roby lokomocyjnej! Animacje musz by szybkie i dokadne; midzy gestem uytkownika a pocztkiem animacji nie powinno by adnego opónienia. Ogranicz przejcie do tej czci ekranu, której dana czynno dotyczy — nie animuj caego ekranu. Ponadto przejcie powinno by krótkie. Sugerowaabym, eby trwao krócej ni sekund, a badania wykazuj, e 300 milisekund to idealny czas pynnego przewijania. Przeprowad testy z udziaem uytkowni- ków, aby okreli ich granice tolerancji. Jeeli uytkownik wykonuje kilka czynnoci bardzo szybko, jedna po drugiej, tak jak wielo- krotne przewinicie ekranu klawiszem strzaki, pocz je w jedn animacj. Inaczej uytkownik bdzie musia przesiedzie kilka sekund animacji, jakby ukarano go za dziesiciokrotne nacinicie jednego klawisza. I znowu: przejcie ma by szybkie i nastpowa niezwocznie. Oto niektóre z rodzajów przej, które podano w bibliotece wzorców Yahoo! (http://developer. yahoo.com/ypatterns/richinteraction/transition/) i ksice Designing Web Interfaces: Rozjanienie i przyciemnienie, Rozcignicie i cignicie, Rozjanienie, wytumienie i przebitka, Zarastanie, Przesunicie, Podwietlenie.

W innych bibliotekach

Wicej omówie i wietnych przykadów Animowanych Przej przedstawionych w poprzedniej licie znajdziesz w zbiorze wzorców Transition w Yahoo! Design Pattern Library: http://developer.yahoo.com/ypatterns/richinteraction/transition/ Ponadto w Designing Web Interfaces znajdziesz cay rozdzia powicony przejciom. Wpraw- dzie opisano w nim to samo, co na stronie serwisu Yahoo!, ale warto go przeczyta.

Wzorce 143 144 Rozdzia 3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie si Skorowidz

A Freedom Trail, 467 GarageBand, 34, 248 adres URL, 118 GNOME, 492 afordancje, 250 IMDb, 461 agregacja treci, 54 Inxight TableLens, 319 agregator wiadomoci, 58 iPhoto, 61 Akordeon, 155, 173, 218 MacPaint, 70, 72 narzdzia programistyczne Chrome, 175, 176 Many Eyes, 119 panel formatowania w Wordzie, 173 MATLAB, 43, 185 Picasa, 175 Photoshop, 70, 185 Yahoo!, 177 Picasa, 61, 175 aktualizowany kana, 55 QuickBooks, 491 Aktualnoci, 49, 54 Raven, 70, 71 Czytnik Google, 59 RIA, 46 Digg, 57 San Francisco Crimespotting, 301 Facebook, 58 Sherpa, 228 projekty, 56 SumoPaint, 70, 71 prywatne, 56 tkdiff, 141 publiczne, 56 architektura informacji (AI), 45 strumie aktywnoci, 56 architektura strony, 47 tre aktualizacji, 55 arkusz stylu CSS, 157 Twitter, 54 Automatyczne Uzupenianie, 377 Wiadomoci Google, 57 Amazon, 377 alarm, 39 Chrome, 380 algorytm rysowania, 325 Dopplr, 381 algorytm sortowania, 322 Firefox, 380 analiza przyczyn ródowych, 24 Google, 380 Animowane Przejcie, 142 Kayak, 380 Designing Web Interfaces, 143 Mac Mail, 380 Mac OS, 142 Mac OS Spotlight, 380 rodzaje przej, 143 Safari, 380 wzorce Transition, 143 Visual Studio, 381 ankiety, 27 aplikacja B Adobe Bridge, 62 Adobe Flash Builder, 70 Bezpieczna Eksploracja, 31, 86 Epicurious, 400, 461 Bezporednie Przejcie Do Elementu, 235 Flash, 159 Emacs, 237 Flash Builder, 72 Mac OS, 235

519 biblioteka wzorców, 17 Dolny Pasek Nawigacyjny, 453 biblioteka wzorców Transition, 143 Amazon, 453 biblioteka wzorców Yahoo!, 143, 436 NPR, 454 biblioteki i kolekcje wzorców, 515 Obrazy Google, 455 Blank Slate Invitation, 49 drobne nierównoci, 187 blisko i dopenienie, 148 Drupal, 514 Blogger, 514 Due Marginesy, 460 branding, 474 Best Western, 460 Epicurious, 462 C IMDb, 462 dynamiczne formularze, 194 cechy interfejsów filtrowania, 294 Dynamiczne Kwerendy, 293, 308, 325 Chmurka Informacyjna, 66, 300, 317 Google Public Data Explorer, 308 aktualizowana mapa, 300 panel ustawie treemapy, 311 mapa dotacji, 303 San Francisco Crimespotting, 311 San Francisco Crimespotting, 302 dynamiczne Wskazówki, 371 Wykres Many Eyes, 302 dziel i rzd, 74 Cleveland William, 335 cookies, 83 E coplot, wspówykres, 335 CSS Zen Garden, 475 edytor tekstu Emacs, 36 Projekt 1, 476 Edytor Ustawie, 49, 50, 77 Projekt 2, 477 Amazon, 81 Projekt 3, 478 Facebook, 80 Projekt 4, 479 konfigurator produktu, 77 Projekt 5, 480 Mac OS, 77 Projekt 6, 481 ustawienia konta, 81 Projekt 7, 482 ustawienia profilowe, 80 Projekt 8, 483 wartoci ustawie, 78 Ctrl+A, 36 Windows 7, 79 Ctrl+P/Enter, 41 Yahoo!, 80 Ctrl+S, 36 Ekspozycja, Wyszukiwanie i Przegldanie, 49 Ctrl+X, 36 About.com, 53 Ctrl+Z, 276 Amazon, 53 czynno CNET, 52 dwukrotne klikanie, 247 EMS, 50 polecenia klawiszowe, 247 Emacs, 36 przecignij i upu, 248 Envisioning Information, 333 wpisywane polecenia, 248 czytnik e-ksiek, 452 F czytnik RSS, 55, 217 filtr Price, 310 D filtr treemapy, 310 filtrowanie, 293 dane wejciowe, 343 filtry Adobe Bridge, 62 dane wyjciowe w jzyku naturalnym, 367 Flex, 70 dendrogram, 283 Flickr, 62 Designing Web Interfaces, 143 Fling Brian, 441 diagram genetyczny, 327 Format Pobaliwy, 362 diagram prawidowoci, 326 Microsoft Outlook, 364 Digg, 56 New York Times, 363 dobre oznaczenia, 96 PayPal, 364 dodatkowy wymiar, 333 Weather.com, 362

520 Skorowidz Format Strukturalny, 364 Inteligentne Elementy Menu, 264 LiveJournal, 366 Illustrator, 265 Photoshop, 364 Mac Mail, 264 formularz, 343 Menu Gmail, 266 formularz filtrowania wyników wyszukiwania, 368 interaktywna mapa narciarska, 293 formularz zakupu, 373 interfejs Cover Flow, 227 G do zarzdzania zdjciami i filmami, 61 dynamiczny, 74 GarageBand MacPaint, 70 afordancje, 250 przegldania, 61 polecenia, 249 przegldarkowy, 64 gest, 450 interfejsy ghosting, 183 Menu kontekstowe, 246 gildia wzorców, 60 Odnoniki, 246 gildie wzorców niskopoziomowych, 49 Panele polece, 247 Gbokie Linkowanie, 43, 47 Paski menu, 246 Google Books, 119 Paski narzdzi, 246 schemat, 117 Przyciski, 246 URL, 118 Rozwijane menu, 246 gradienty, 495 Ukryte narzdzia, 247 Grube Menu, 123 interfejsy aplikacji produkcyjnych, 35 progresywne ujawnianie, 124 serwis Microsoftu, 123 K Slate, 125 Starbucks, 125 kana komunikacyjny, 54 WebMD, 126 Kana Tematyczy, 418 grupy fokusowe, 27 CNN, 420 Grupy Przycisków, 251 Google, 421 Adobe Flash Builder, 253 przegld tosamoci Microsoftu, 422 Google Dokumenty, 251 segmentacja grup, 419 iTunes, 254 Wired, 418, 421 Microsoft Word, 253 Karuzela, 82, 224, 225 Amazon, 226 H Apple, 227 Flickr, 227 Harmonogram, 416 Google Ksiki, 226 czstotliwo postowania, 418 iTunes, 227 E-maile, 417 Marriott, 224 Posty blogowe, 417 New York Times, 228 Posty twitterowe, 417 system Android, 228 Strony facebookowe, 417 Kaskadujca Lista, 82, 208, 239 hierarchia listy, 208 Album, 239 hierarchiczna struktura witryny, 128 File Viewer, 240 Historia Polece, 277 Finder, 240 MATLAB, 277 Kilka Barw, Wiele Wartoci, 498 Photoshop, 279 AdLucent.com, 501 Uniks, 278 Baby Name Wizard, 500 Mint, 498, 499 I Klisza, 448 ESPN, 451 infografika, 283, 294 Weather, 449 integracja Facebooka z aparatem, 467 kod czasowy, 55 Kolory i kroje, 492

Skorowidz 521 komunikat o bdzie, 391 Kreator, 49, 50, 73 koncepcje UI, 250 importu tekstu w Excelu, 76 konfigurator produktu Mini Cooper, 136 My Yahoo!, 73 Kontrastujca Grubo Tekstu, 509 serwisu Mint, 76 JonBrousseau.com, 512 Kreator Listy, 385 KaleidoscopeApp.com, 511 Flickr, 386 Waterlife.nfb.ca, 511 Microsoft Outlook, 385 kontrolka, 343, 346 kroje, 486 Dendrogram, 349 krój pisma, 485 Dendrogram pojedynczego wyboru, 351 ksiki, 516 Dwa pola tekstowe, 359 kwerenda, 294 Dwa przewijane pola, 359 Dwa suwaki, 358 L Edytor tekstu sformatowanego, 356 Jednowierszowe pole tekstowe, 354 layout, 82, 145, 187 Kalendarz, 360 elementy dynamiczne, 153 Kaskadujca Lista, 349 elementy spokrewnione, 149 Kaskadujca Lista z elementami przypisanymi gsto, 146 do kategorii, 351 kolor ta, 146 lista elementów, 347 listy elementów, 150 Lista pól wyboru, 351 otaczanie, 150 Nieuporzdkowana lista, 354 podpisy i komentarze, 150 Podwójny suwak, 358 rozmieszczenie i rozmiar, 147 Pokrto, 349, 357 rytm, 147 Pole tekstowe o Formacie Pobaliwym, 356, 359 wyrónianie drobnych elementów, 147 Pole tekstowe o Formacie Strukturalnym, 357, 360 zgrupowanie elementów, 148 Pole tekstowe z moliwoci wpisywania layout o luno rozmieszczonych elementach, 474 znaczników, 356 layouty asymetryczne, 189 Pole tekstowe z przyciskiem, 355 layouty symetryczne, 189 Pole tekstowe z wartoci sprawdzan leading, 486 po wprowadzeniu, 358 leniwe adowanie, 459 Pole wyboru, 347, 355 lightbox, 115 Przegldarka, 350, 352 linie przepywu wzroku, 151 Przecznik, 347 Linki Spoecznociowe, 128, 422 Przewijane pole, 357 Huffington Post, 422 Przyciski opcji, 347 wabiki, 424 Rozwijana lista z opcjami, 348 wady, 423 Rozwijany Selektor, 360 widgety, 424 Suwak, 357 lista Suwak z polem tekstowym, 358 filtrowanie, 204 Szereg pól wyboru, 350 przegldanie, 204 Szereg przeczników, 350 sortowanie, 204 tabela pojedynczego wyboru, 348, 349 wyszukiwanie, 204 tabela wielokrotnego wyboru, 351 lista dynamiczna, 54 tabela wykorzystujca wzorzec Pole Nowego lista elementów, 47 Elementu, 353 lista linków, 110 tabela z przyciskiem, 353 lista paska, 225 tabela, na któr mona przeciga elementy, 353 Lokalne Przyblianie, 301, 316 Tekst, 354 Dock Mac OS, 319 Wielowierszowe pole tekstowe, 355 Inxight TableLens, 318 Wzorzec Kreator Listy, 352 kalendarz DateLens, 316 zegar, 360 lupki map Cartifact, 320 koszt nawigacji, 96 obrazy Google, 320 niewielkie odlegoci, 97 znieksztacenie przestrzeni konceptualnej, 317

522 Skorowidz M iBird, 458 IMDb, 457 Makra, 279 Kobo, 457 Excel, 281 Mashable, 457 nagrywanie, 280 News, 457 odtwarzanie, 280 Yahoo!, 457 Photoshop, 279 YouTube, 457 tworzenie, 280 miniwykres, 333 Visual Basic, 281 model nawigacji, 98 makroodczyt, 297 model organizacyjny, 285 manipulacja, 145 geograficzny, 285 Mapa Sekwencji, 75 hierarchiczny, 285 Boston Globe, 135 liniowy, 285 Hanna Anderson, 134 sie powiza, 285 instalator Adobe CS5, 136 tabelowy, 285 Mini Cooper, 136 tekstowy, 285 Mapka Strony W Stopce, 127 Mullet Kevina, 189 Flickr, 131 My Yahoo!, 75 Los Angeles Times, 130 MapQuest, 131 N REI, 129 Wall Street Journal, 130 nagówek i stopka, 130 Whole Foods, 127 nagówek i stopka REI, 129 mapy, 96 Najnowsza Aktywno, 435 media spoecznociowe, 395, 399 Boing Boing, 435 memy, 44 Kitchen Table Math, 435 Meneder Obrazów, 49, 59, 113 MyStarbucksIdea, 437 Adobe Bridge, 63 Technology Review, 437 filtry, 62 Yahoo! News, 437 Flickr, 63 Yelp, 437 interfejs przegldania, 61 napicie i dynamika projektu, 508 iPhoto, 59 narzdzia dla inynierów oprogramowania, 48 kolekcje publiczne, 62 narzdzia dla projektantów, 48 miniaturka, 59 Narzdzia Dotykowe, 451 Picasa, 62 przegldarka zdj na iPhone, 451 Siatka Miniaturek, 60 Stanza, 452 TED, 64 Narzdzia Logowania, 131 widok pojedynczego elementu, 61 Amazon, 133 wzorce i komponenty, 60 Flickr, 131 YouTube, 63 Gmail, 133 Miernik Bezpieczestwa Hasa, 374 iTunes, 133 Blogger, 376 Mint, 133 Gmail, 374 Scribd, 133 MSN, 376 Twitter, 133 Yahoo!, 377 nawarstwianie, 288 mikka ostro, 495 nawigacja, 98, 288 mikroaktualizacje, 55 krok po kroku, 100 mikroodczyt, 297 model Piramidy, 111 Mikroprzerwy, 37, 55 o i szprychy, 98 Mio Do Klawiatury, 41, 60 panel modalny, 101 miniaturka, 59 pene poczenie, 99 Miniaturki Z Tekstem, 455 piramida, 100 App Store, 455 paska nawigacja, 100 Boston.com, 457 przeciganie i przyblianie, 100

Skorowidz 523 nawigacja TurboTax, 195 wiele poziomów, 99 Odlege To, 494 wyjcie ewakuacyjne, 102 Ecoki, 497 wyrane punkty wejcia, 101 Firefoks, 494 zakadki, 101 Mercedes-Benz, 497 nawigacja asocjacyjna, 98, 103 zrónicowana czytelno, 496 nawigacja funkcyjna, 98 odstpy midzy wierszami, leading, 486 nawigacja globalna, 98, 103 Odwlekanie Decyzji, 34 nawigacja i przegldanie Odwoywalno, 271 przeciganie, 289 Firefox, 271 przyblianie i oddalanie, 289 okno instalacji Adobe AIR, 273 rozwijanie i zwijanie, 289 przerwanie czynnoci, 272 uszczegóowienie treci, 290 przycisk Anuluj, 272 nawigacja wierszowa, 98 Odwrócona Mikropiramida Netvibes, 67 Amerykaski Czerwony Krzy, 415 Newsbox, 55, 427 tweet, 413 Amerykaski Czerwony Krzy, 428 Ogld Ze Szczegóami, 297, 317 Ford, 431 Google Finance, 299 link „wicej”, 429 New York Times, 299 nagówek, 429 Perla, 297 opis, 429 Photoshop, 298 Red Bull, 430 okno Znajd i zamie, 40 Sierra Club, 432 Okruszki, 134, 136 Whole Foods, 431 Mothering.com, 138 Nieskoczona Lista, 458 narzdzia programistyczne Chrome, 139 Facebook, 459 panel sterowania Windows 7, 138 iTunes, 459 Target, 136 Mail, 458 organizacja danych, 284 Norman Donald, 473 organizacja przestrzenna listy linków, 110 Osobiste Rekomendacje, 43 O Osobiste Wypowiedzi, 404 Tweety, 405 obrazowanie danych, 287 Twitter, 404 Obrazy, 493 oznaczniki gbokoci, 495 obserwacja bezporednia, 27 Obszar Centralny, 155, 159, 218 P Artyku na Newfangled, 162 Artyku na Steepster, 162 Paginacja, 232 Edytor tekstu Google, 161 Amazon, 235 Flash, 159 Digg, 234 kolor, 160 Drupal.org, 235 kontekst, 160 eBay, 235 nagówki, 160 Flickr, 235 rozmiar, 160 Google, 234 obszar interaktywny, 255 Hulu, 235 Obwódki, 492 Kayak, 235 Obwódki Zgodne Z Tekstem, 504 Last.fm, 235 Dakine, 506 Mothering.com, 235 Good, 506 Songza, 232 Mochimedia, 505 Target, 235 MoMA, 504 YouTube, 235 Odblokowywanie Reakcyjne, 75, 156, 192, 194 Pami Prospektywna, 39, 86 Lexus, 197 Pami Przestrzenna, 38 Preferencje systemowe Mac OS, 196

524 Skorowidz Panel Modalny, 113 Poczone Aplikacje, 465 Kayak, 116 Freedom Trail, 465 Macintoshu, 117 Poprawne Wartoci Domylne, 387 schemat, 114 Kayak, 387 SlideShare, 116 Photoshop, 389 Panel Polece, 257 Porady Innych, 42 iPhoto, 257 powtarzanie czynnoci, 40 meneder plików Windows XP, 260 Pragnienie Natychmiastowej Satysfakcji, 32 oznaczenie polece, 259 prezentacja elementów graficznych, 206 Picasa, 260 prezentacja treci, 82 struktura wizualna, 259 prezentowanie danych umieszczanie w interfejsie, 258 chmurki informacyjne, 295 Pasek Przewijania Z Adnotacj, 139 legendy, 295 Chrome, 141 osie, linijki, skale i linie czasu, 295 MSNBC, 139 oznaczenia, 294 tkdiff, 141 podwietlanie, 295 persony, 27 rozrysowywanie, 295 Pionowy Stos, 447 problem naukowy, 43 ESPN, 449 progresywne ujawnianie, 124, 179 REI, 449 projektowanie architektury interfejsu, 513 Washington Post, 449 projektowanie dla urzdze przenonych, 441 Wiadomoci Google, 447 Boston.com, 444 Piramida Fidelity.com, 444 Flickr, 112 JetBlue.com, 444 New York Times, 113 RuthsChris.com, 444 schemat, 111 projektowanie formularzy, 343 pliki CSS, 83 projektowanie graficzne, 288, 475, 483 Pótno I Paleta, 48, 69, 180 kty i krzywe, 488 Flash Builder, 72 kolor, 484 MacPaint, 72 obrazy, 490 Photoshop CS5, 69 odniesienia kulturowe, 490 Raven, 71 powtarzanie motywów, 491 siatka przycisków, 70 przestrze i zagszczenie, 488 SumoPaint, 71 tekstury i rytm, 489 Pynny Layout, 103, 156, 198 typografia, 485 Dokumenty Google, 200 projektowanie stron, 103 Drupal.org, 199 projektowanie struktury informacji, 204 Mac OS, 198 projektowanie Treemapy, 338 Podgld, 266 Przegld Tematyczny, 400 Picasa, 268 Epicurious, 400 PowerPoint, 266 Google, 403 Starbucks, 268 rodzaje materiaów, 401 Podwietlanie Danych, 303, 325 Starbucks, 403 San Francisco Crimespotting, 305 Whole Foods, 403 Wall Street Journal, 307 przegldanie, 288 Washington Post, 306 Przemienne To, 229 podwietlenie elementu, 314 arkusz Excela, 231 pokaz slajdów, 135 iTunes, 231 Pole adresu URL, 462 JetBlue, 229 Pole Nowego Elementu, 243 paski zebry, 230 Excel, 244 przepyw, 36 Microsoft Outlook, 243 przepyw wzroku, 151 PowerPoint, 244 przestrze konceptualna, 317

Skorowidz 525 Przewijanie Alfabetyczne, 237 Równolege Wykresy, 328 About.com, 237 Google Trends, 330 iPhon, 238 MATLAB, 331 przycisk Anuluj, 272 New York Times, 329 przycisk ekranowy, 452 The Weather Channel, 332 Przycisk Kasowania Tekstu, 462 Róne Widoki, 49, 81 Bing, 463 Adobe Illustrator, 84 Google, 463 CNN, 84 przycisk Load more, 460 Mapy Google, 81 przycisk Wstecz, 36 Microsoft PowerPoint, 83 przycisk Zamie, 40 przecznik widoku, 83 przyzwyczajenia, 36 widok domylny, 82 Pulpit, 49, 64 Ruchome Panele, 66, 155, 180 Fitbit, 65 iGoogle, 184 Google Analytics, 68 My Yahoo!, 182 My Yahoo!, 67 pulpit MATLAB, 185 Netvibes, 67 pulpit Photoshop, 185 wzorce i komponenty, 65 YouTube, 181 pulpit MATLAB, 185 punkty uwagi, 151, 495 S rozmyte i mocne, 495 Sano Darrell, 189 R Satisficing, 32 schemat Ramy Graficzne, 155, 156 Gbokiego Linkowania, 117 JAQK, 156 kolorystyczny interfejsu, 484 JetBlue, 158 Panelu Modalnego, 114 Kolor, 157 Piramidy, 111 Krój pisma, 157 Wyjcia Ewakuacyjnego, 121 siatka layoutu, 157 Shift+Tab, 42 Styl pisma, 157 shingling, 335 TED, 157, 158 siatka layoutu, 157 Ranking Treci, 432 Siatka Miniaturek, 60, 164, 220 Engadget, 434 AIGA, 222 Mashable, 435 ekran domowy, 224 New York Times, 433 Facebook, 224 Technology Review, 435 Finder, 222 Wall Street Journal, 432 Grafika Google, 224 Wired, 435 Hanna Andersson, 220 reakcje emocjonalne, 486 YouTube, 223 rekomendacja, 44 Zappos, 223 rodzaje przej, 143 Siatka Miniaturek nieregularna, 113 Rozrysowywanie Danych, 295, 312 Siatka Równoprawnych Elementów, 155, 163 BBN Cornerstone, 312, 314 CNN, 165 Flickr, 315 Hulu, 164 SPOT Adventures, 315 IBM, 166 Weeplaces, 316 MapQuest, 165 Rozwijane Panele, 70 Skórki I Motywy, 512 Rozwijany Selektor, 381, 382 motywy Firefoksa, 512 iWeb, 384 WordPress, 514 Microsoft PowerPoint, 384 Sortowalna Tabela, 321 Microsoft Word, 381 Inxight TableLens, 323 Photoshop, 383 iTunes, 321 sortowanie, 290, 292

526 Skorowidz Spis Treci, 107 projektowanie, 338 AIGA, 109 SmartMoney, 337 Craigslist, 107 zmienne wizualne, 341 MIT, 109 treci w stopce, 128 MoMA, 111 Tufte Edward, 333 Museum of Modern Art, 110 tworzenie spójno interfejsu, 36 elementów na palecie, 70 stan przepywu, 36 layoutu strony, 145 Stanza, 452 makra, 280 stopka, 128 projektu graficznego, 103 stopka serwisu Obrazy Google, 455 Stopniowa Konstrukcja, 35 U stos, 275 udostpnianie narzdzi kreatywnych, 48 struktura informacji Ujawnianie Reakcyjne, 75, 156, 191 dugo, 204 AutoTrader, 191, 193 dynamika, 205 Dokumenty Google, 194 grupowanie, 205 Kayak, 193 interakcja, 205 Ujednolicony Branding, 467 kolejno, 204 aplikacja mapy na iPhone, 468 rodzaje elementów, 205 Chipotle, 471 strumie aktywnoci, 56 Fandango, 470 studia przypadków, 27 JetBlue, 469 style graficzne, 475 Walmart, 468 Stylizowane Rogi, 501 Whole Foods, 470 Getty Museum, 502 ukad elementów, 145 JetBlue, 501 Ukryte Narzdzia, 254 Pandora, 503 Grooveshark, 256 system nawigacji globalnej, 103 Odtwarzacz YouTube, 257 szczegóy o elemencie, 206 Twitter, 254 szeryfy, 486 Zillow, 257 szkic interfejsu, 45 urzdzenia mobilne, 440, 468 szum graficzny, 496 Uszczegóowienie W Jednym Oknie, 55, 62, 212 Fora Ravelry, 215 Mac Mail, 212 Picasa, 216 wiata w literach, 486 prostota, 213 wady, 214 T Uzupenianie, 366 Tabela Drzewiasta, 82, 208, 241 eBay, 368 Finder, 241 Excel, 367 meneder zakadek Firefoksa, 242 New York Times, 366 tekstury, 489 testy uywalnoci, 345 V Ta, 492 Visual Basic, 281 to gradienty, 495 mikka ostro, 495 W oznaczniki gbokoci, 495 Wiadomoci Google, 56 adnych mocnych punktów uwagi, 495 wiarygodno stron tosamo marki, 474 obsuga klienta, 473 Treemapa, 336 reklamy, 473 Digg, 340 reputacja firmy, 473 Hive Group, 339 sponsorowanie, 473 Newsmap, 340 wygld strony, 473

Skorowidz 527 Widget Wspódzielenia, 47, 425, 433 Microsoft Word, 370 Boing Boing, 427 Twitter, 369, 371 Mashab, 428 Yahoo!, 371 Pandora, 427 wskazówki przestrzenne, 96 ShareThis, 426 Wskanik Postpu, 269, 272 Slate, 425 Flickr, 270 Technorati, 427 Grooveshark, 271 Wired, 427 okno kopiowania Mac OS, 269 widoki danych, 313 Wskaniki Wczytywania, 464 widoki poczone, 313 Flickr, 465 Wiele Obszarów Roboczych, 40, 47, 48 pasek postpu instalacji, 465 Chrome, 87 Stocks, 464 Firefoks, 85 Wspomagane Powtarzanie, 40 Safari, 88 Wspódzielenie I Komentowanie, 406 TweetDeck, 86 Amerykaski Czerwony Krzy, 410 Wielopoziomowe Cofanie Czynnoci, 273, 274 blogi, 407 Microsoft Word, 276 Mashable, 407 odwracalne czynnoci, 274 REI, 409 Photoshop, 273 retweetowanie, 410 sekwencja cofania, 275 Wybór Dwupanelowy, 51, 55, 61, 74, 209, 211 Wielopoziomowy System Pomocy Mac Mail, 211 chmurki podpowiedzi, 89 Mac OS, 209 Excel, 88 Picasa, 212 Firefoks, 91 zalety, 210 obsuga techniczna, 90 wybór kontrolek, 346 osobne okna, 90 wygld strony, 473 podpisy i instrukcje, 89 Wyjcie Ewakuacyjne Rozwijany Panel, 90 Google Maps Labs, 122 samopomoc spoecznociowa, 90 schemat, 121 Ukryte Narzdzia, 90 strona Netflix, 122 wprowadzenia, 90 wykorzystywanie cudzej pracy, 43 wizualizacja wykres klimatyczny, 332 artykuów, 340 wykres MATLAB, 331 danych, 289, 333 Wykres Panelowy, 332 genomu bakterii, 328 dane geograficzne, 335 promienista, 323 trellis graphs, 334 Wkadka, 55, 216 trellis plots, 334 Amazon, 219 University of Oregon, 332 Czytnik Google, 219 wykres pogodowy, 332 Kayak, 216 Wykres Promienisty, 323 waciwoci ukadów obiektów wizualnych analiza sprzeday samochodów, 324 blisko, 154 Eigenfactor, 327 cigo, 154 genom bakterii, 328 dopenienie, 154 SolidSX Software Explorer, 326 podobiestwo, 154 wykres punktowy, 288 WordPress, 514 wykres supkowy skumulowany, 292 Wskazane Punkty Startowe, 104 wykres treliaowy, 334, 335, 336 Fireworks, 107 wykresy statystyczne, 334 strona iPada, 106 wypenienie gradientowe, 492 Wskazówki, 49, 369 Wyrównanie Do Lewej I Prawej, 155, 186 Blogger, 371 drobne nierównoci, 187 Gmail, 370 Mac OS, 186, 188 Hotmail, 371 wyrónienie elementu, 149

528 Skorowidz Wyszczególniony Przycisk „Zakocz” Najnowsza Aktywno, 400 American Airlines, 264 Narzdzia Dotykowe, 446 JetBlue, 263 Narzdzia Logowania, 104 Kayak, 263 Newsbox, 400 OneHourCourses.com, 263 Nieskoczona Lista, 446 Songza, 261 Obwódki Zgodne Z Tekstem, 493 Southwest, 263 Odlege To, 493 wyszukiwanie, 293 Odwlekanie Decyzji, 31 Wywaenie Po Przektnej, 155, 188 Odwoywalno, 251 Designing Visual Interfaces, 189 Odwrócona Minipiramida, 399 Starbucks, 190 Ogld Ze Szczegóami, 296 Windows 7, 188 Okruszki, 104 wzorce Transition, 143 Osobiste Rekomendacje, 31 wzorzec, 16 Osobiste Wypowiedzi, 399 Aktualnoci, 49 Paginacja, 209 Animowane Przejcie, 104 Pami Prospektywna, 31 Automatyczne Uzupenianie, 361 Pami Przestrzenna, 31 Bezpieczna Eksploracja, 31 Panel Modalny, 104 Bezporednie Przejcie Do Elementu, 209 Panel Polece, 250 Chmurki Informacyjne, 296 Pasek Przewijania Z Adnotacj, 104 Dolny Pasek Nawigacyjny, 446 Pionowy Stos, 446 Due Marginesy, 446 Piramida, 104 Dynamiczne Kwerendy, 296 Pótno I Paleta, 49 Edytor Ustawie, 50 Podgld, 251 Ekspozycja, Wyszukiwanie I Przegldanie, 49 Podwietlanie Danych, 296 Format Pobaliwy, 361 Pole Nowego Elementu, 209, 353 Format Strukturalny, 361 Poczone Aplikacje, 446 Gbokie Linkowanie, 104 Poprawne Wartoci Domylne, 361 Grube Menu, 104 Porady Innych, 31 Grupy Przycisków, 250 Pragnienie Natychmiastowej Satysfakcji, 31 Harmonogram, 400 Product Configurator, 77 Historia Polece, 251 Przegld Tematyczny, 399 Home Link, 123 Przemienne To, 209 Image Browser, 64 Przewijanie Alfabetyczne, 209 Inteligentne Elementy Menu, 251 Przycisk Kasowania Tekstu, 446 Kanay Tematyczne, 400 Przyzwyczajenie, 31 Karuzela, 208 Pulpit, 49 Kaskadujce Listy, 209 Ranking Treci, 400 Kilka Barw, Wiele Wartoci, 493 Rozrysowywanie Danych, 296 Klisza, 446 Rozwijany Selektor, 361 Kontrastujca Grubo Tekstu, 493 Równolege Wykresy, 296 Kreator, 50 Róne Widoki, 50 Kreator Listy, 361 Satisficing, 31 Linki Spoecznociowe, 400 Siatka Miniaturek, 208 Lokalne Przyblianie, 296 Skórki I Motywy, 494 Makra, 251 Sortowalna Tabela, 296 Mapa Sekwencji, 104 Spis Treci, 104 Mapka Strony W Stopce, 104 Stopniowa Konstrukcja, 31 Meneder Obrazów, 49 Stylizowane Rogi, 493 Miernik Bezpieczestwa Hasa, 361 Tabela Drzewiasta, 209 Mikroprzerwy, 31 Treemapa, 296, 310 Mio Do Klawiatury, 31 Ujednolicony Branding, 446 Miniaturki Z Tekstem, 446 Ukryte Narzdzia, 250

Skorowidz 529 wzorzec Zapytanie, 372 Uszczegóowienie W Jednym Oknie, 208 Apple, 373 Uzupenianie, 361 CulinaryCulture.com, 374 Widget Wspódzielenia, 400 Yahoo!, 372 Wiele Obszarów Roboczych, 50 zarzdzanie list, 207 Wielopoziomowe Cofanie Czynnoci, 251 zasada ujawniania progresywnego, 192 Wielopoziomowy System Pomocy, 50 zasady projektowania interfejsów, 34 Wkadka, 208 Zatytuowane Sekcje, 70, 75, 155, 166 Wskazane Punkty Startowe, 104 Amazon, 168 Wskazówki, 361 aplikacja do synchronizacji iPhona, 169 Wskanik Postpu, 251 JetBlue, 166 Wskaniki Wczytywania, 446 Zlokalizowane Komunikaty O Bdach, 389 Wspomagane Powtarzanie, 31 Hanna Andersson, 392 Wspódzielenie I Komentowanie, 399 Mint, 391 Wybór Dwupanelowy, 208 Netflix, 389 Wyjcie Ewakuacyjne, 104 Twitter, 391 Wykres Panelowy, 296 Yahoo!, 392 Wykres Promienisty, 296 Zmiany Na Bieco, 33 Wyszczególniony Przycisk „Zakocz”, 251 Zwijane Panele, 155, 177 Zagajenia, 399 Firefoks, 180 Zapytania, 361 Mapy Google, 178 Zlokalizowane Komunikaty O Bdach, 361 MSNBC, 180 Zmiany Na Bieco, 31 progresywne ujawnianie, 179 dziebeka, 493 Z dziebeka, 507 Zagajenia, 410 Colly.com, 508 Boing Boing, 413 HermitageMuseum.org, 507 REI, 413 RibbonsOfRed.com, 509 Whole Foods, 412 Zakadki, 155, 169 iWeb, 172 Mac OS, 171 MapQuest, 169 SourceForge, 172 wstka Excela, 171

530 Skorowidz