Table Of ContentNap raźniejsze jest pierwsze wrażenie!
Sprawdzone wzorce projektowe
HELION
O REILLY'
Jenifer Tidwell
Spis treści
Wprowadzenie do drugiego wydania.......................................................................................9
Wprowadzenie...............................................................................................................................13
1. Co robi użytkownik ......................................................................................................................23
Środek do celu 24
Podstawy badań użytkowników 26
Motywacja użytkowników do nauki 28
Wzorce 30
Bezpieczna Eksploracja 31
Pragnienie Natychmiastowej Satysfakcji 32
Satisficing 32
Zmiany Na Bieżąco 33
Odwlekanie Decyzji 34
Stopniowa Konstrukcja 35
Przyzwyczajenie 36
Mikroprzerwy 37
Pamięć Przestrzenna 38
Pamięć Prospektywna 39
Wspomagane Powtarzanie 40
Miłość Do Klawiatury 41
Porady Innych 42
Osobiste Rekomendacje 43
3
2. Organizacja treści: architektura informacji i struktura aplikacji....................................45
Ogólny zarys 46
Wzorce 49
Ekspozycja, Wyszukiwanie I Przeglądanie 50
Aktualności 54
Menedżer 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 Treści 107
Piramida 110
Panel Modalny 114
Głębokie Linkowanie 117
Wyjście Ewakuacyjne 121
Grube Menu 123
Mapka Strony W Stopce 127
Narzędzia Logowania 131
Mapa Sekwencji 134
Okruszki 136
Pasek Przewijania Z Adnotacją 139
Animowane Przejście 142
4. Organizacja strony: układ elementów.................................................................................145
Podstawy tworzenia layoutu strony 145
Hierarchia wizualna: ważność i relacje 145
Przepływ wzroku: na co teraz spojrzeć 151
Wykorzystanie dynamicznych elementów 153
Wzorce 155
Ramy Graficzne 156
Obszar Centralny 159
4 | Spis treści
Siatka Równoprawnych Elementów 163
Zatytułowane Sekcje 166
Zakładki 169
Akordeon 173
Zwijane Panele 177
Ruchome Panele 180
Wyrównanie Do Lewej I Prawej 186
Wyważenie Po Przekątnej 188
Ujawnianie Reakcyjne 191
Odblokowywanie Reakcyjne 194
Płynny Layout 198
5. Listy.................................................................................................................................................203
Scenariusze korzystania z list 203
Architektura informacji 204
Możliwe rozwiązania 205
Wzorce 208
Wybór Dwupanelowy 209
Uszczegółowienie W Jednym Oknie 212
Wkładki 216
Siatka Miniaturek 220
Karuzela 224
Przemienne Tło 229
Paginacja 232
Bezpośrednie Przejście Do Elementu 235
Przewijanie Alfabetyczne 237
Kaskadujące Listy 239
Tabela Drzewiasta 241
Pole Nowego Elementu 243
6. Jak to się robi: czynności i polecenia.....................................................................................245
Poszerzanie horyzontów 248
Wzorce 250
Grupy Przycisków 251
Ukryte Narzędzia 254
Panel Poleceń 257
Wyszczególniony Przycisk „Zakończ" 261
Inteligentne Elementy Menu 264
Podgląd 266
Wskaźnik Postępu 269
Odwoływalność 271
Spis treści | 5
Wielopoziomowe Cofanie Czynności 273
Historia Poleceń 277
Makra 279
7. Prezentowanie danych: dendrogramy, wykresy i inne infografiki.............................283
Podstawy infografik 283
Wzorce 296
Ogląd Ze Szczegółami 297
Chmurki Informacyjne 300
Podświetlanie Danych 303
Dynamiczne Kwerendy 308
Rozrysowywanie Danych 312
Lokalne Przybliżanie 316
Sortowalna Tabela 321
Wykres Promienisty 323
Równoległe Wykresy 328
Wykres Panelowy 332
Treemapa 336
8. Dane wejściowe: formularze i kontrolki .............................................................................343
Podstawy projektowania formularzy 343
Wybór kontrolek 346
Wzorce 361
Format Pobłażliwy 362
Format Strukturalny 364
Uzupełnianie 366
Wskazówki 369
Zapytanie 372
Miernik Bezpieczeństwa Hasła 374
Automatyczne Uzupełnianie 377
Rozwijany Selektor 381
Kreator Listy 385
Poprawne Wartości Domyślne 387
Zlokalizowane Komunikaty O Błędach 389
9. Media społecznościowe............................................................................................................395
Czego nie znajdziesz w tym rozdziale 396
Media społecznościowe od podstaw 396
Wzorce 399
Przegląd Tematyczny 400
Osobiste Wypowiedzi 404
Współdzielenie I Komentowanie 406
6 | Spis treści
Zagajenia 410
Odwrócona Mikropiramida 413
Harmonogram 416
Kanały Tematyczne 418
Linki Społecznościowe 422
Widget Współdzielenia 425
Newsbox 427
Ranking Treści 432
Najnowsza Aktywność 435
10. Urządzenia przenośne ..............................................................................................................439
Wyzwania towarzyszące projektowaniu na urządzenia mobilne 440
Wzorce 446
Pionowy Stos 447
Klisza 448
Narzędzia Dotykowe 451
Dolny Pasek Nawigacyjny 453
Miniaturki Z Tekstem 455
Nieskończona Lista 458
Duże Marginesy 460
Przycisk Kasowania Tekstu 462
Wskaźniki Wczytywania 464
Połączone 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
Odległe Tło 494
Kilka Barw, Wiele Wartości 498
Stylizowane Rogi 501
Obwódki Zgodne Z Tekstem 504
Ździebełka 507
Kontrastująca Grubość Tekstu 509
Skórki I Motywy 512
Bibliografia....................................................................................................................................515
Strony internetowe 515
Książki 516
Skorowidz .....................................................................................................................................519
Spis treści | 7
8 | Spis treści
Wprowadzenie do drugiego wydania
W ciągu pięciu lat od publikacji pierwszego wydania Projektowania interfejsów wiele rzeczy
uległo zmianie.
Większość projektantów interfejsów — którzy teraz mogą pełnić rolę specjalistów ds. UX
(z ang. user experience — doświadczenie użytkownika), projektantów interakcji, architektów
informacji bądź sprawować funkcje o jeszcze innych nazwach — pracuje teraz nad zasobami
internetowymi. Niezliczonym stronom, serwisom i aplikacjom internetowym, blogom i skle
pom online potrzebny jest dobry design, a opracowanie odpowiedniego projektu w rekordowo
krótkim czasie staje się coraz łatwiejsze. Wiele z tych aktywów internetowych wyróżnia się
wysokim stopniem interaktywności, ale nawet na tradycyjnych stronach internetowych —
niegdyś prostych i statycznych — znajdują się teraz dynamiczne i interaktywne komponenty,
takie jak odtwarzacze filmów i zasoby społecznościowe. Projektowania jest co niemiara.
Stosunkowo niewiele projektów, w porównaniu z sytuacją sprzed kilku lat, powstaje dla aplikacji
komputerowych. Rzecz jasna, wszyscy korzystamy z rozbudowanego oprogramowania na
laptopach i komputerach stacjonarnych. Nasze klienty e-mailowe, przeglądarki, edytory tekstu,
specjalistyczne programy i systemy operacyjne są ważnymi elementami życia w sieci. Ich interfej
sy są już jednak pod wieloma względami znormalizowane. Wskutek tego od początku minionej
dekady literatura z dziedziny projektowania zaczęła być kierowana do osób projektujących
zasoby internetowe, a nie standardowe aplikacje.
Kolejną zmianą jest istny rozkwit dziedziny projektowania obejmującej urządzenia przeno
śne, która w 2005 roku jeszcze raczkowała. Za sprawą wszechobecnych iPhone'ów i innych
rozwiniętych urządzeń przenośnych, dzięki którym cały internet nosimy ze sobą w kieszeni,
wielu projektantów musi się zmierzyć z problemami związanymi z tą technologią. Jak te
uwarunkowania mogą wpłynąć na projekty interfejsów, zwłaszcza stron internetowych? Na to
pytanie musimy dopiero znaleźć odpowiedź, ale społeczność designerska zna już kilka funkcjo
nalnych technik.
Ponadto designerzy nie mogą zlekceważyć wpływu sieci społecznościowych. Kiedy jestem we
wczesnej fazie tworzenia projektu, muszę zastanowić się nad jego połączeniami z blogami,
Twitterem, Facebookiem, komentarzami, forami oraz wszystkimi innymi środkami, których
ludzie używają do porozumiewania się między sobą. To absolutnie konieczne. Użytkownicy
dużo czasu w internecie poświęcają interakcji społecznej, a zaawansowani użytkownicy ocze
kują od interfejsów powiązania z serwisami społecznościowymi. Trudno dziś trafić na stronę,
która w jakiś sposób nie jest połączona z serwisem bądź kilkoma serwisami społeczościowymi.
9
To jednak nie wszystko. Od czasu publikacji pierwszego wydania tej książki środowisko
projektantów UX odkryło wartość wzorców, a ponadto opracowano multum gotowych zesta
wów wzorców UX, w tym wiele całkiem dobrych. Niektórzy opierali się na wzorcach przedsta
wionych pierwotnie w tej książce, lecz rozwiniętych, przekształconych, nazwanych według
bieżących konwencji bądź opatrzonych nowymi informacjami. Inni tworzyli wzorce odno
szące się do dziedzin, które omówiono w tej książce nie najlepiej, tj. interfejsów społeczno-
ściowych, urządzeń przenośnych, gestów, wyszukiwania oraz Rich Internet Application (bogatych
aplikacji internetowych, w skrócie RIA). Najlepsze z tych zbiorów wzorców wymieniam
w przedmowie, bibliografii i przy omówieniach samych wzorców.
Czy zatem książka napisana w 2005 roku jest wciąż aktualna?
W znacznej mierze — tak. Ludzki umysł nie uległ zmianie — hierarchie wizualne wciąż
działają, zasada progresywnego ujawniania też ciągle działa, a ruchome elementy wciąż przycią
gają naszą uwagę. Dobre wzorce, oparte na fundamentalnych zasadach projektowania, są
dziś równie aktualne jak pięć, dziesięć czy dwadzieścia lat temu. Jednak również okazało się,
że inne wzorce nie były równie mocno ugruntowane w tychże regułach bądź po prostu prze
stały być atrakcyjne. Dzięki drugiemu wydaniu mogłam spojrzeć na owe wzorce z perspek
tywy czasu i określić, czy dobrze się zestarzały. Okazało się, że nie musiałam pozbyć się ich
zbyt wielu.
Większość z nich zostawiłam, ponieważ nadal się sprawdzają. Opatrzyłam je nowymi przy
kładami, a efektywność niektórych zbadałam na nowo. Ponadto utworzyłam (a także opisałam)
nowe wzorce, które odzwierciedlają zmiany ostatnich pięciu lat. W następnym podrozdziale
omawiam te zmiany bardziej szczegółowo.
Zmiany w drugim wydaniu
Oto, co znajdziesz w tej książce.
Rozdział o mediach społecznościowych
W rozdziale 9., „Media społecznościowe", przedstawiono techniki i wzorce włączania
mediów społecznościowych do stron i aplikacji. Nie jest to jednak omówienie wszystkich
aspektów interfejsów społecznościowych, lecz nawiązanie do innych książek traktujących
0 tej dziedzinie, zwłaszcza Designing Social Interfaces.
Rozdział o interfejsach na urządzenia przenośne
W rozdziale 10., „Urządzenia przenośne", przedstawiono kilka wzorców przeznaczonych
do wykorzystania w projektach interfejsów dla urządzeń mobilnych. Wzorce te odnoszą
się szczególnie do platform, na które tego rodzaju projekty bywają najczęściej przezna
czone, czyli łączących się z siecią urządzeń z ekranami dotykowymi, m.in. iPhone'ów.
Omówiono zarówno temat aplikacji, jak i stron internetowych. Ten rozdział również nie
wyczerpuje tematu projektowania dla takich urządzeń, ale ukazanymi w nim wzorcami
1 koncepcjami możesz się wspomóc w tworzeniu zgrabnych interfejsów nawet wtedy, kie
dy nie jesteś specjalistą w dziedzinie urządzeń mobilnych.
Samo istnienie tego rozdziału powinno zwrócić uwagę na istotny problem. „Dobry"
wzorzec ma zachowywać swoją postać na różnych platformach, być może także mobil
nych. Podczas projektowania dla urządzeń przenośnych trzeba jednak uwzględniać wiele
ograniczeń i wymagań, dotyczących m.in. rozmiaru ekranu, interaktywnych gestów,
10 | Wprowadzenie do drugiego wydania
oczekiwań użytkowników i opóźnienia połączeń, wobec czego niektóre wzorce zwyczaj
nie się w tej dziedzinie nie sprawdzają. Podobnie zresztą większość wzorców opracowa
nych dla urządzeń przenośnych nie znajduje zastosowania (a przynajmniej nie odznacza
się szczególną użytecznością) w projektach przeznaczonych na większe ekrany. Owe
wzorce dla urządzeń przenośnych znajdziesz właśnie w rozdziale 10.
Zmiana kolejności rozdziałów i nowe wprowadzenia
Ze względu na niezwykle dużą liczbę nowych i starych wzorców prezentowania list ele
mentów postanowiłam przetworzyć trzy rozdziały. Rozdział 5. dotyczy teraz wyłącznie
list. Znajdują się w nim wzorce z rozdziału 2. (Wybór Dwupanelowy, Uszczegółowienie
W Jednym Oknie) oraz rozdziału 7. (Przemienne Tło, Kaskadujące Listy) pierwszej edycji.
Dodałam również kilka nowych, takich jak Wkładka i Przewijanie Alfabetyczne.
Ponadto napisałam na nowo wprowadzenia do rozdziałów o architekturze informacji
(rozdział 2.), nawigacji (rozdział 3.) i układzie stron (rozdział 4.), aby uwzględnić naj
nowsze nurty w designie i koncentrację na projektach zasobów internetowych i podobnych.
Nowe wzorce, uwzględniające nowe formy interakcji
W ciągu ostatnich pięciu lat pewne techniki zdobyły dużą popularność. W książce omówione
zostały te z nich, które przypominają wzorce — czyli te, które można wyabstrahować
z kontekstu i wykorzystać w innych warunkach, które są często stosowane i łatwe w użyciu,
a ponadto znacząco ulepszają doświadczenie użytkownika. Do przykładów należą Grube
Menu, Mapka Strony W Stopce, Ukryte Narzędzia, Miernik Bezpieczeństwa Hasła, Pod
świetlenie Danych i Wykres Promienisty.
Nowe wzorce, które nie są „nowe", lecz nie znalazły się w pierwszym wydaniu
Te wzorce istnieją już od jakiegoś czasu, ale mogłam nie dostrzec ich znaczenia w 2005
roku. Możliwe też, że wówczas nie były jeszcze szczególnie praktyczne, ale dziś już są.
Należą do nich: Pulpit Nawigacyjny, Aktualności, Karuzela, Siatka Równoprawnych Ele
mentów, Miniprzerwy, Menedżer Obrazów oraz Ekspozycja, Wyszukiwanie I Przeglądanie.
Nowe nazwy wzorców i wzorce, których zakres działania uległ zmianie
Wprowadziłam pewne zmiany, aby dostosować nazwy wzorców do współczesnej termino
logii i istniejących bibliotek wzorców. Z wzorca Rozwijane Panele wydzieliłam wzorzec
Akordeon, jako że inni designerzy, komentatorzy i twórcy bibliotek zgodzili się określać
tę technikę właśnie taką nazwą. Jednocześnie funkcje wzorców Wybór Dwupanelowy
i Uszczegółowienie W Jednym Oknie — które pierwotnie znalazły się w rozdziale o ar
chitekturze informacji — zredukowałam tak, by odnosiły się konkretnie do list elementów.
Nowe przykłady, badania i połączenia z innymi bibliotekami wzorców
Lwia część wzorców jest opatrzona nowymi ilustracjami. Do wielu dołączyłam również
sekcję „W innych bibliotekach", w której odsyłam czytelnika do tych samych (lub po
dobnych) wzorców z innych zbiorów, tam można pogłębić swoją wiedzę i zapoznać się
z innymi przykładami. Niektóre ze wzorców nieco zmodyfikowałam, uwzględniając najnow
sze badania i rozważania na ich temat. Jeden z takich wzorców to Przemienne Tło, któ
rego wartość zweryfikowano drogą prób. W jego omówieniu odsyłam do rezultatów tychże
badań.
Usunięto niektóre wzorce
Wykorzystywanie wielu z omówionych w poprzednim wydaniu wzorców jest dziś oczywi
ste. Choć są to nadal wartościowe elementy interfejsów, ich opis nie wniósłby wiele do tej
książki.
Zmiany w drugim wydaniu | 11
