Projektowanie interfejsów. Sprawdzone wzorce projektowe

Table of contents :
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)
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)
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)
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)
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)

Citation preview

Napraźniejsze jest pierwsze wrażenie!

Sprawdzone wzorce projektowe

H E L IO N

O REILLY'

Jenifer Tidwell

Spis treści

W prow adzenie do drugiego w y d a n ia .......................................................................................9 W p ro w a d z e n ie ............................................................................................................................... 13 1. Co robi użytkow nik ...................................................................................................................... 23 Środek do celu

24

Podstawy badań użytkow ników

26

M otywacja użytkow ników do nauki

28

W zorce

30

Bezpieczna Eksploracja

31

Pragnienie Natychmiastowej Satysfakcji

32

Satisficing

32

Zmiany Na Bieżąco

33

Odwlekanie Decyzji

34

Stopniowa Konstrukcja

35

Przyzwyczajenie

36

M ikroprzerwy

37

Pamięć Przestrzenna

38

Pamięć Prospektywna

39

W spomagane Powtarzanie

40

M iłość Do Klawiatury

41

Porady Innych

42

Osobiste Rekomendacje

43

3

2. Organizacja treści: architektura informacji i struktura a p lik a c ji....................................45 Ogólny zarys

46

W zorce

49

Ekspozycja, W yszukiwanie I Przeglądanie

50

Aktualności

54

M enedżer Obrazów

59

Pulpit

64

Płótno I Paleta

69

Kreator

73

Edytor Ustaw ień

77

Różne W idoki

81

W iele Obszarów Roboczych

85

W ielopoziom ow y System Pom ocy

88

3. Tam i z powrotem: nawigacja, drogowskazy i poruszanie s ię ........................................95 Jak się odnaleźć

95

Koszt nawigacji

96

M odele nawigacji

98

Konwencje projektowania stron

103

W zorce

104

W skazane Punkty Startowe

104

Spis Treści

107

Piramida

110

Panel M odalny

114

Głębokie Linkowanie

117

W yjście Ewakuacyjne

121

Grube M enu

123

M apka Strony W Stopce

127

Narzędzia Logowania

131

M apa Sekwencji

134

Okruszki

136

Pasek Przewijania Z Adnotacją

139

Animowane Przejście

142

4. Organizacja strony: układ e le m e n tó w ................................................................................. 145 Podstawy tworzenia layoutu strony

145

Przepływ wzroku: na co teraz spojrzeć

151

W ykorzystanie dynamicznych elementów

153

W zorce

4

|

145

Hierarchia wizualna: w ażność i relacje

155

Ramy Graficzne

156

Obszar Centralny

159

Spis treści

Siatka Równoprawnych Elementów

163

Zatytułowane Sekcje

166

Zakładki

169

Akordeon

173

Zw ijane Panele

177

Ruchome Panele

180

W yrównanie Do Lewej I Prawej

186

W yważenie Po Przekątnej

188

Ujawnianie Reakcyjne

191

Odblokowywanie Reakcyjne

194

Płynny Layout

198

5. L is ty .................................................................................................................................................203 Scenariusze korzystania z list

203

Architektura informacji

204

Możliwe rozwiązania

205

W zorce

208

W ybór Dwupanelowy

209

Uszczegółow ienie W Jednym Oknie

212

W kładki

216

Siatka M iniaturek

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

W zorce

250

Grupy Przycisków

251

Ukryte Narzędzia

254

Panel Poleceń

257

W yszczególniony Przycisk „Zakończ"

261

Inteligentne Elementy M enu

264

Podgląd

266

W skaźnik Postępu

269

Odwoływalność

271

Spis treści

|

5

W ielopoziom ow e Cofanie Czynności

273

Historia Poleceń

277

M akra

279

7. Prezentowanie danych: dendrogramy, wykresy i inne in fo g ra fik i.............................283 Podstawy infografik

283

W zorce

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

W ykres Promienisty

323

Równoległe W ykresy

328

W ykres Panelowy

332

Treemapa

336

8. Dane wejściowe: form ularze i kontrolki ............................................................................. 343 Podstawy projektowania formularzy

343

W ybór kontrolek

346

W zorce

361

Form at Pobłażliwy

362

Form at Strukturalny

364

Uzupełnianie

366

W skazówki

369

Zapytanie

372

M iernik Bezpieczeństwa Hasła

374

Autom atyczne Uzupełnianie

377

Rozwijany Selektor

381

Kreator Listy

385

Poprawne W artości Domyślne

387

Zlokalizowane Komunikaty O Błędach

389

9. M edia społecznościow e............................................................................................................395 Czego nie znajdziesz w tym rozdziale

396

M edia społecznościow e od podstaw

396

W zorce Przegląd Tem atyczny

6

|

399 400

Osobiste W ypowiedzi

404

W spółdzielenie I Komentowanie

406

Spis treści

Zagajenia

410

Odwrócona M ikropiramida

413

Harmonogram

416

Kanały Tem atyczne

418

Linki Społecznościowe

422

W idget W spółdzielenia

425

Newsbox

427

Ranking Treści

432

Najnowsza Aktyw ność

435

10. Urządzenia przenośne ..............................................................................................................439 W yzwania towarzyszące projektowaniu na urządzenia mobilne

440

W zorce

446

Pionowy Stos

447

Klisza

448

Narzędzia Dotykowe

451

Dolny Pasek Naw igacyjny

453

M iniaturki Z Tekstem

455

Nieskończona Lista

458

Duże M arginesy

460

Przycisk Kasowania Tekstu

462

W skaźniki W czytywania

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 kom puterow ych

492

W zorce

493

O dległe Tło

494

Kilka Barw, W iele W artości

498

Stylizowane Rogi

501

Obwódki Zgodne Z Tekstem

504

Ździebełka

507

Kontrastująca G rubość Tekstu

509

Skórki I M otywy

512

B ib lio g ra fia ....................................................................................................................................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 pierw szego wydania Projektowania interfejsów wiele rzeczy uległo zmianie. W iększość projektantów interfejsów — którzy teraz m ogą p ełnić rolę specjalistów ds. UX (z ang. user experience — doświadczenie użytkow nika), projektantów interakcji, architektów informacji bądź sprawować funkcje o jeszcze innych nazw ach — 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. W iele z tych aktywów internetowych wyróżnia się wysokim stopniem interaktyw ności, ale naw et 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 kom puterow ych. Rzecz jasna, wszyscy korzystamy z rozbudowanego oprogram owania 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ć kierow ana do osób projektujących zasoby internetowe, a nie standardowe aplikacje. Kolejną zm ianą jest istny rozkwit dziedziny projektow ania 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 nosim y ze sobą w kieszeni, wielu projektantów musi się zm ierzyć z problemami związanym i 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, m uszę zastanow ić się nad jego połączeniami z blogami, Twitterem, Facebookiem, komentarzami, foram i oraz w szystkim i innym i środkami, których ludzie używają do porozum iewania się m iędzy sobą. To absolutnie konieczne. Użytkownicy dużo czasu w internecie pośw ięcają interakcji społecznej, a zaawansowani użytkownicy ocze­ kują od interfejsów powiązania z serw isam i społecznościow ym i. 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 pu blikacji pierw szego w ydania tej książki środow isko 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 pierw otnie w tej książce, lecz rozw iniętych, przekształconych, nazw anych według bieżących konwencji bądź opatrzonych now ym i inform acjam i. Inni tworzyli w zorce 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 internetow ych, w skrócie RIA). N ajlepsze z tych zbiorów w zorców w ym ieniam w przedmowie, bibliografii i przy omówieniach samych wzorców . Czy zatem książka napisana w 2005 roku jest wciąż aktualna? W znacznej m ierze — tak. Ludzki um ysł nie uległ zm ianie — h ierarchie w izu alne w ciąż działają, zasada progresywnego ujawniania też ciągle działa, a ruchome elementy wciąż przycią­ gają naszą uwagę. Dobre wzorce, oparte na fundam entalnych zasad ach projektow ania, są dziś równie aktualne jak pięć, dziesięć czy dwadzieścia lat temu. Jednak również okazało się, że inne w zorce nie były równie mocno ugruntow ane 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. O kazało się, że nie m usiałam pozbyć się ich zbyt wielu. W iększość z nich zostawiłam, ponieważ nadal się sprawdzają. Opatrzyłam je now ym i przy­ kładami, a efektywność niektórych zbadałam na nowo. Ponadto utworzyłam (a także opisałam) now e wzorce, które odzwierciedlają zm iany ostatnich pięciu lat. W następnym podrozdziale omawiam te zm iany bardziej szczegółowo.

Zm iany w drugim wydaniu Oto, co znajdziesz w tej książce. Rozdział o mediach społecznościowych W rozdziale 9., „Media społecznościow e", przedstawiono techniki i w zorce włączania m ediów społecznościowych do stron i aplikacji. N ie jest to jednak om ówienie w szystkich aspektów interfejsów społecznościowych, lecz naw ią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ń m obilnych. W zorce 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 tem at aplikacji, jak i stron internetowych. Ten rozdział również nie w yczerpuje tematu projektowania dla takich urządzeń, ale ukazanym i w nim w zorcam i 1 koncepcjami możesz się wspomóc w tworzeniu zgrabnych interfejsów naw et wtedy, kie­ dy nie jesteś specjalistą w dziedzinie urządzeń m obilnych. Samo istnienie tego rozdziału pow inno zw rócić uw agę na istotny problem. „D obry" w zorzec ma zachow ywać swoją postać na różnych platform ach, być m oże także mobil­ nych. Podczas projektowania dla urządzeń przenośnych trzeba jednak uwzględniać wiele ograniczeń i w ym agań, dotyczących m .in. rozm iaru ekranu, interaktyw nych gestów ,

10

|

W prow adzenie do drugiego w ydania

oczekiwań użytkow ników i opóźnienia połączeń, wobec czego niektóre w zorce zwyczaj­ nie się w tej dziedzinie nie sprawdzają. Podobnie zresztą w ię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 w iększe ekrany. Owe w zorce 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 przetw orzyć trzy rozdziały. Rozdział 5. dotyczy teraz w yłącznie list. Znajdują się w nim wzorce z rozdziału 2. (W ybór Dwupanelowy, Uszczegółowienie W Jednym Oknie) oraz rozdziału 7. (Przemienne Tło, Kaskadujące Listy) pierwszej edycji. Dodałam również kilka now ych, takich jak W kładka i Przewijanie Alfabetyczne. Ponadto napisałam na nowo wprow adzenia do rozdziałów o architekturze informacji (rozdział 2.), nawigacji (rozdział 3.) i u kładzie stron (rozdział 4.), aby uw zględ nić naj­ nowsze nurty w designie i koncentrację na projektach zasobów internetowych i podobnych. Nowe wzorce, uwzględniające nowe form y 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 przypom inają w zorce — czyli te, które m ożna w yabstrahow ać 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 M enu, M apka Strony W Stopce, Ukryte Narzędzia, M iernik Bezpieczeństwa Hasła, Pod­ świetlenie Danych i W ykres Promienisty. Nowe wzorce, które nie są „nowe", lecz nie znalazły się w pierwszym wydaniu Te w zorce istnieją już od jakiegoś czasu, ale m ogłam nie dostrzec ich znaczenia w 2005 roku. M oż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 ów nopraw nych 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 w zorców W ybór D w upanelow y i Uszczegółowienie W Jednym Oknie — które pierw otnie znalazły się w rozd ziale 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) w zorców z innych zbiorów, tam m ożna p ogłębić sw oją w iedzę i zapoznać się z innymi przykładami. Niektóre ze wzorców nieco zmodyfikowałam, uwzględniając najnow­ sze badania i rozw ażania na ich tem at. Jeden z takich w zorców to Przem ienne 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ściow e elementy interfejsów, ich opis nie w niósłby wiele do tej książki.

Zmiany w drugim w ydaniu

|

11

Usunięto rozdział „Aplikacje produkcyjne i edytory" Projektanci nadal korzystają z tego rodzaju aplikacji, ale nie potrafiłam wym yślić, jak m ożna by zaktualizow ać te w zorce i utw orzyć dla nich now e przykład y. D ow iedziałam się również z ankiety, że czytelnicy uznali ten rozdział za jeden z najmniej przydatnych. Jako że chciałam nieco zm niejszyć grubość tej książki, postanowiłam usunąć ten rozdział, aby zyskać miejsce na nowy m ateriał. Na koniec chciałabym streścić, czego nie znajdziesz w nowym wydaniu. W ym ienione poniżej dziedziny są na tyle dobrze omówione w innych — opublikowanych bądź czekających na publikację — zbiorach wzorców, że postanowiłam je pom inąć. Oto one: » W yszukiwanie, » Interfejsy społecznościowe, « Gesty, « Dogłębne omówienie projektów na urządzenia mobilne, * Anim owane przejścia, * Obsługa i pomoc. M am nadzieję, że w kilku następnych latach dane nam będzie ujrzeć nowe zestawy wzorców z innych dziedzin projektowania, np. gier online, systemów geograficznych, społeczności in­ ternetowych, oraz wielu innych. W idzę, że jest co zgłębiać i m ożna to robić z korzyścią. To świetnie. Zachęcam innych projektantów do tworzenia nowych wzorców, a innych czytelników, by popędzali nas do ulepszania istniejących już zbiorów!

12

j

W prow adzenie do drugiego w ydania

Wprowadzenie

D aw no, daw no tem u projektanci interfejsów m u sieli pracować na żałośnie m ałym zbiorze narzędzi. M ieliśm y do dyspozycji zaledw ie garstkę elementów: pola tekstow e, przyciski, m enu, małe ikonki i okna dialogowe. Układaliśm y je starannie w edług zaleceń W indows Style Guide lub M acintosh Human Interface Guidelines i m ieliśmy nadzieję, że użytkownicy zrozum ieją, jak taki interfejs działa. Zbyt często jednak nie rozum ieli. Projektow aliśm y z m yślą o m ałych ekranach, niewielu kolorach, słabych procesorach i wolnych połączeniach z internetem (o ile użytkow nik w ogóle korzystał z internetu). W szystko było szare. To się zmieniło. Dziś przy projektowaniu interfejsów m am y do dyspozycji dużo szerszy wy­ bór komponentów i koncepcji. Istnieje też o w iele w ięcej narzędzi, takich ja k Java, HTML/CSS, JavaScript, Flash i niezliczone pakiety open source. Narzędzia Apple i Microsoftu do tworzenia interfejsów dla ich platform są bogatsze i ładniejsze niż dawniej. Wyświetlacze są dziś lepsze. Aplikacje internetowe są często zaprojektowane równie profesjonalnie jak strony, na których są umieszczane. Niektóre z właściwości interfejsów internetowych w ykorzystuje się także w aplikacjach komputerowych; są to podkreślane linki, przyciski Dalej i Wstecz, estetyczne fonty i tła oraz palety kolorów o odcieniach innych niż szarość. A jednak w ciąż projektow anie dobrych interfejsów nie jest łatwe. Załóżmy, że nie jesteś ani formalnie wykwalifikowanym projektantem interfejsów, ani sam się tej umiejętności nie nauczy­ łeś. Wykorzystując pakiety UI zgodnie z ich przeznaczeniem i przestrzegając wytycznych styli­ stycznych bądź imitując istniejące aplikacje, utworzyłbyś prawdopodobnie interfejs przeciętny, ale znośny. Niestety, to już może nie wystarczyć. Oczekiwania użytkow ników są większe niż dawniej. Jeżeli Twój interfejs nie będzie całkowicie intuicyjny już na pierw szy rzut oka, użytkow nik n ie będzie darzył go w ielką sym patią. Jeśli naw et interfejs będ zie zgodny ze w szystkim i standardam i, to i tak m usisz się liczyć z ryzykiem, że błędnie zrozum iałeś charakter pracy użytkownika, wykorzystałeś nietrafioną terminologię lub doskonale utrudniłeś zrozum ienie, do czego w łaściw ie program służy. Niecierpliw i użytkownicy zw ykle nie dają takim designom szans. Co gorsza, jeżeli aplikacja lub strona internetowa nie nadaje się do użytku, sfrustro­ wany użytkow nik m oże jednym kliknięciem przenieść się do konkurencji. Cena opracowania przeciętnego interfejsu również jest w iększa niż kiedyś.

13

Urządzeniami w rodzaju telefonów, telewizorów, samochodów i tablic rozdzielczych zajmo­ wali się niegdyś wyłącznie projektanci przemysłowi. Dziś urządzenia te są inteligentne. Ste­ rują nimi coraz potężniejsze komputery, a w odpowiedzi na popyt rynkowy pojawia się co­ raz więcej aplikacji i oprogramowania. Z takimi maszynami i program am i m usim y już żyć, niezależnie od tego, czy ich obsługa jest prosta. W obec tempa, w jakim sprawy się rozwijają, dobry design interfejsów i interakcji może za dziesięć lat zdecydować o zdrow iu psychicznym całego społeczeństwa.

Drobne, luźno pow iązane elementy Kiedy jako projektant interfejsów chciałam odnaleźć się w ogrom ie przem ian technologicz­ nych, które zaszły w kilku ostatnich latach, zw róciłam uwagę na dwa najważniejsze zjawiska. Pierwsze to rozmnożenie i d i o m ó w i n t e r f e j s ó w , czyli rozpoznawalnych rodzajów i stylów interfejsów o właściwych sobie zbiorach obiektów, czynności i elementów graficznych. Prawdo­ podobnie rozpoznasz wszystkie, które umieszczono na rysunku P.1. Cały czas pow stają nowe ich rodzaje.

IMlOP 3 te*OC it lea« 100 4m«» il ti« fcw n nunkno

» 1 7 .4 « • Hłoo O M , . U

Qu*r«Ky : I

l> M *■R W CM M R M 1 1 r łM W ■ a»»l « ( M i U M l M l i M T l V I U M **■:« jo r., 3

S u b to ta l: » 3 5 .1 4

•G a liery SoacoSb

E«t shopping tat

łcacc: i u id Monda/S t Durr»m s SUOS.

• X P n a f ia

crtea titie mm w« in* rolls U morrow*

QUICKVOTC

Strony internetowe

o

ON J h -M

Serwisy społecznościowe

Rysunek P.1. Przykłady idiomów interfejsów

14

|

W prow adzenie

>

tro»w dli»O i«rt.ir.1rs1 tr.r best user eipenence and r-Aormation

o J Nirar RT . nicl.jih-irno Th» i 1 } mm!

Ja.

I

ui*epool

http.1ow.hr11Tftw4 wedOJJsm u srvraT>v«rP«

c alen d ar

b u y t ic k e t s

j o in

about

a-|A

+

[* j

EXHIBITIONS & THE COLLECTION E x h ib itio n s

F ilm

T h e C o lle c tio n

Brow se the online collection

Rlter a selection of w orks

Rysunek 3.17. Spis Treści witryny MoMA

Rysunek 3.18. Schemat Piramidy Kiedy używ ać

Na stronie lub w aplikacji znajduje się sekwencja elementów, które użytkow nik zwykle oglą­ da po kolei, tak jak dzieje się to w przypadku pokazu slajdów, kreatora, rozdziałów książki lub serii produktów. Niektórzy użytkownicy wolą jednak przeglądać je pojedynczo i w wybranej przez siebie kolejności — w tym celu m uszą jed n ak m ieć możliw ość w yboru spośród całego zakresu elementów. Niem al wszystkie M enedżery Obrazów (rozdział 2.) opierają się na modelu nawigacyjnym Piramidy. Użytkownik czasami m usi przejrzeć obrazy pojedynczo, a czasami woli przeglądać je zgodnie z sekwencją. Piramida pozwala mu zdecydować, jak to zrobić.

W zorce

|

111

D laczego

W zorzec ten zmniejsza liczbę kliknięć potrzebnych do poruszania się. U spraw nia n aw igację i ilustruje sekwencję, w jakiej elementy występują. Linki lub przyciski Wstecz i Dalej (albo P oprzedni i N astępny) są w pełni użyteczne; ludzie wiedzą, co z nim i robić. U żytkow nik m oże jed n ak nie życzyć sobie narzuconej sekwencji, gdzie po przejściu przez siedem stron musiałby siedmiokrotnie kliknąć Wstecz, gdyby chciał wró­ cić do punktu w yjścia. To nudne! Umieszczając na każdym etapie sekwencji link prowadzący z powrotem do nadrzędnej strony, dajesz mu większe możliwości. Ma dzięki temu trzy opcje nawigacji: Wstecz, Dalej i Z powrotem. N ie komplikujesz w ten sposób pracy, a swobodnie przeglądający stronę lub aplikację użyt­ kow nik (który mógł tymczasem zm ienić zdanie dotyczące tego, co chce zrobić) nie będzie musiał tyle klikać, żeby dotrzeć tam, gdzie chce. Tak jest wygodniej. Podobnie połączenie szeregu w innym przypadku niepowiązanych stron ułatwia pracę użyt­ kownikom, którzy chcieliby w szystkie strony przejrzeć. Bez linków W stecz i D alej byliby zmuszeni cały czas pow racać do strony rodzica — z czasem m ogliby się poddać i opuścić witrynę. W jaki sposób

Podaj listę w szystkich elementów lub stron w e właściwej im kolejności na nadrzędnej stronie. Ujmij ją w takiej formie, aby przystawała do rodzaju elementów, które prezentujesz. Dla zdjęć byłaby to Siatka M iniaturek, a dla artykułów — rozbudowana lista. W ięcej na temat dopasowania formy do treści przeczytasz w rozdziale 5. W ystarczy, żeby użytkow nik kliknął link lub element, aby dotrzeć do stosownej strony. Um ieść odnośniki Wstecz i Dalej na stronie każdego elementu. Na wielu stronach można znaleźć miniaturow e podglądy kolejnych elementów, np. w postaci tytułu lub miniaturki ob­ razu (tak jak na serwisie Flickr, co w idać na rysunku 3.19). Dodatkowo utw órz też link pro­ w adzący użytkow nika z pow rotem do strony nad rzęd nej. O znacz go nazw ą w rodzaju „Pow rót do...".

jtidw eirs photostream

Rysunek 3.19. Flickr Jeden z wariantów Piramidy polega na przeobrażeniu linearnej sekwencji w pętlę, gdzie ostatnia strona łączy się z pierwszą, bez pośrednictwa strony rodzica. Takie rozwiązanie bywa użyteczne, choć użytkow nik może nie być św iadom tego, że ma do czynienia z pętlą. Czy

112

|

Rozdział 3. Tam i z powrotem: nawigacja, drogow skazy i poruszanie się

użytkow nik rozpozna pierwszą stronę sekwencji? Niekoniecznie. Jeżeli kolejność sekwencji jest istotna, pow inieneś połączyć ostatnią stronę ze stroną nadrzędną, by użytkow nik w ie­ dział, że zobaczył już wszystko, co trzeba. Przykłady

Strony serwisu Flickr oparte są na klasycznej wersji Piramidy. M enedżer Obrazów wyświetla zdjęcia z sekwencji zwanej photostream („fotostrum ień"), którą można zobaczyć w całości, klikając link oznaczenia u góry widgetu (rysunek 3.19). Dwie miniaturki przedstaw iają po­ przednie i kolejne zdjęcie photostreamu. Interaktywna aplikacja w serwisie „New York Tim es" (rysunek 3.20) to kolejny przykład M enedżera Obrazów. Na stronie rodzicu znajduje się nieregularna Siatka M iniaturek z klikalnymi obrazami; na stronach zdjęć (rysunek 3.21) w idnieją natom iast przyciski strzałek służące do poruszania się po elem entach zbioru. Zauw aż, że w id ać tu rów nież inform ację o tym , który elem ent sekw encji u żytkow nik w danej chw ili ogląda — w tym przypadku „121 z 176" — co jest miłym dodatkiem. Nie ma przycisku „z pow rotem ", ale jedyny przycisk poza wspomnianymi powyżej — Close (zamknij) — przenosi użytkownika na stronę nadrzędną. (Jest to zatem ciekawie w ykorzystany Panel M odalny).

Published: May 11. 2010

Strange Signs From Abroad Arecent slide show, "A Sampling of Chinglish," which accompanied a story by Andrew Jacobs, showed signs in Chinese paired with unusual and often funny English translations. We asked readers to share photos of amusingly translated or otherwise quirky signs that they've found during their travels. Click an image to enlarge it, and scroll to browse through the collection.

Rysunek 3.20. Interaktywna aplikacja „New York Timesa"; na rysunku przedstawiam stronę nadrzędną, na której wyświetlone są wszystkie zdjęcia

W zorce

|

113

Published: M ay 11. 2010

Strange Signs From Abroad A recent slide show, "A Sampling of Chinglish,"which accompanied a story by Andrew Jac< English translations. We asked readers to share photos of amusingly translated or othcrw image to enlarge it, and scroll to browse through the collection.

Rysunek 3.21. Podstrona tej samej aplikacji, na której przy zdjęciu 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 możliwości nawigacyjnych, dopóki użytkownik nie wykona zadanej mu czynności. Kiedy używ ać

W aplikacji lub na stronie nic nie może lub nie powinno się dziać bez udziału użytkownika. W aplikacji skoncentrowanej na dokumencie użytkow nik przy zapisywaniu pliku może być poproszony o podanie nazw y pliku, jeżeli nie określił jej w cześniej. W innych kontekstach użytkownik może być zmuszony do zarejestrowania się lub potwierdzenia przeczytania w ażnej wiadomości, nim zyska możliw ość podjęcia jakichkolw iek innych czynności. Jeżeli użytkow nik podejm uje się drobnej czynności, która m oże później w ym agać od niego dalszego wkładu, znajdź sposób, by pobrać dane od użytkow nika bez używ ania panelu modalnego. Przykładowo możesz umieścić pole tekstowe tuż pod naciśniętym przyciskiem; takie

114

|

Rozdział 3. Tam i z powrotem: nawigacja, drogow skazy i poruszanie się

pole może tam sobie „w isieć", aż użytkow nik je wypełni. N ie trzeba zatrzym yw ać działania strony lub aplikacji tylko dlatego, że jakiś elem ent czeka na dane. Pozw ól użytkownikowi zająć się czymś innym, a do pytania pow rócić później. D laczego

Panel M odalny odcina użytkownika od w szystkich innych opcji nawigacyjnych. N ie może on go zatem zignorow ać i zająć się czymś innym na stronie lub w aplikacji. Po wykonaniu przy­ pisanej mu czynności użytkow nik w raca tam, gdzie był wcześniej. Łatwo ten model zrozum ieć i projektow ać na jego podstawie, choć w ciągu ostatnich lat był nadużywany. Panele modalne zakłócają pracę. Kiedy użytkow nik nie spodziewa się, że bę­ dzie zmuszony odpowiedzieć na zapytanie Panelu M odalnego, m usi on przerw ać pracę — być może naw et w celu podjęcia decyzji co do czegoś, co go w ogóle nie obchodzi. Odpo­ wiednio użyty Panel Modalny zwraca natomiast uwagę użytkownika na kolejną decyzję, którą ma podjąć. Żadne inne możliwości naw igacyjne nie mogą go w tedy od tego odwieść. W jaki sposób

W tym miejscu na ekranie, na którym skupiona jest uwaga użytkownika, um ieść panel, ram­ kę dialogową albo stronę, w których znajd zie się zapytanie o w ym agane dane. Elem ent ten powinien tymczasowo uniemożliwić klientowi korzystanie z innych stron aplikacji. Panel pow inien być w m iarę schludny, zgod nie z założeniem , iż użytkow nik ma m ieć możliw ość pełnego skoncentrowania się na swoim nowym zadaniu. Pamiętaj, że jest to wzorzec określający formę nawigacji. Powinieneś starannie oznaczyć drogi w yjścia, których zresztą nie pow inno być w iele — jed n a, dw ie, m oże trzy. W w iększości przypadków są to przyciski opatrzone krótkim i, „czasow n ikow ym i" w yrazam i w rodzaju „Zapisz" czy „Nie zapisuj". Zw ykle można gdzieś znaleźć przycisk Zamknij lub „X " w pra­ wym górnym rogu. Po kliknięciu takiego przycisku użytkow nik powinien wrócić tam, gdzie był wcześniej. Panel M odalny można ująć graficznie w bardzo ciekawy sposób jako lightbox. Polega to na przyciem nieniu większości obszaru ekranu i podśw ietleniu jasnego panelu modalnego, co sprawia, że uwaga zostaje skupiona na nim. (Żeby m ogło to odnieść skutek, Panel M odalny musi być wystarczająco duży, aby użytkownik mógł go bez problemu znaleźć. Widywałam tak m ałe i oddalone od środka ekranu panele, że odnalezienie ich w dużym oknie przeglądarki było dość trudne). Na niektórych w itrynach zam iast Paneli M odalnych stosuje się podstrony oferujące skrajnie ograniczone możliwości nawigacyjne. Ekrany logowania i rejestracji zazwyczaj w łaśnie tak działają: nie ma na nich systemów nawigacji lokalnej i globalnej, lecz jedynie linki służące do wyłączenia strony (Anuluj, Dalej itp.) oraz W yjście Ewakuacyjne. Systemy operacyjne i platformy GUI zazwyczaj udostępniają m odalne okna dialogow e z po­ ziomu systemu. Te przydają się najbardziej w tradycyjnych aplikacjach komputerowych. Należy unikać umieszczania ich na stronach internetowych, a stosow ać innego rodzaju pa­ nele, nad którym i projektant m a w iększą w ładzę, a które w m niejszym stopniu przeszka­ dzają użytkownikowi.

W zorce

|

115

Przykłady

Okno logowania na SlideShare oznaczone jest lightboksem, by przyciągało uwagę użytkow­ nika. Kiedy użytkow nik na SlideShare w ykonuje czynność, która wymaga zarejestrowania, na ekranie pojawia się Panel M odalny z rysunku 3.23. Można się go pozbyć jedynie na trzy sposoby: logując się, rejestrując lub klikając znajomy przycisk „X" w prawym górnym rogu. Jest to typowe zachow anie dla Paneli M odalnych pojaw iających się na stronach internetowych.

Rysunek 3.23. Panel Modalny logowania na SlideShare Na serwisie Kayak użytkownik ma styczność z podobnym lightboksem przy zaawansowanym wyszukiwaniu. W tym przypadku panel wskazuje link, którym go uruchomiono, dzięki czemu użytkow nik może skojarzyć czynność z rezultatem (rysunek 3.24). To ciekawe rozwiązanie. Jeden rodzaj modalnej ramki dialogowej na Macintoshu zwraca na siebie uwagę, kiedy rozwija się z paska tytułowego okna. Takie i inne okna modalne aplikacji uniem ożliw iają użytkow ni­ kowi posługiwanie się pozostałymi elementami aplikacji, toteż jest zmuszony dokończyć czyn­ ność lub porzucić ją całkowicie, nim zabierze się za cokolw iek innego (rysunek 3.25). W innych bibliotekach

http://quince.infragistics.com/Patterns/M odal% 20Panel.aspx http://patternry.com/p=overlay/ Zapoznaj się również z w zorcem D ialog O verlay w książce D esigning Web Interfaces Billa Scotta i Theresy Neil. Znajdziesz tam również opisy innych rodzajów okien.

116

|

Rozdział 3. Tam i z powrotem: nawigacja, drogow skazy i poruszanie się

Modify or start search over Modify or start search over

^

' 0 ' Get a fare alert ^

© R o u n d -t rip

0 O n e -w a y

dDse E

M u lti-city

Weekend

Show fare charts

From BOS

Share results - LIVE

Q Include nearbY airports

Q Include nearby airports

Depart__________ Tim e Anytime 108/02/2010 Monday, Aug 2 2010

Time Return Q S ;0 9 f2 0 1 0 H i 1 Anytime Monday, Aug 9 2010

Stops nonstop

21

$321

5 ? 2+ stops

1447

J

S to p

[ I

Virgin America Hot low fares fr WIFI, movies, m www.vlrginamer

MSY

t

] T rave le rs

Honda Indv Ton Enjoy 2 -N t Sum 2 three-day 20 SeeTorontoNow

C Prefer N on sto p

Cheap New Q rk Compare Rates Sites - Fast & E< www.5marterTri

Com pare sites in new windows

□

O P rice line

DTravelocity

0 Landing

O E x p e d ia

□ Hotwire

F light T im e s ^ T a k e -o ff Take-off (Depart Flight)

g>—

Com pare all

show all

Mon S OOa - 6:30p

A irlines

show all

k fu n fa irie a ir l -■

rec en t ta g s

-

2 2

With p a ttern s th a t s ta r t with chain two an d en d with

5 hours ago

w earing a shrug

8hours ago

33

33

you know y o u 're a knitting dork w hen...

9 hours ago

3095

3095

W hat is 'y o n ' - y a rn o v e r ....... ?

9 hours ago

5

8

a c ro s s

a c r y l ic

unknown h eal tu rn - n e ed aid

9 hours ago

5

5

a lp a c a

a lp in e

ID hours ago

4

4

a m ig u r u m i

Slippers

|

Î sta rt

Perso n al Tips an d R esources

214

g ro u p s

fo ru m s

techniques

Rozdział 5. Listy

-

16

9093

1st a

2

20

25m m

a b b r e v ia tio n

2x2

above

a fg h a n

4 p ly

6 p ly

a b r é v ia tio n s

a fg h a n s

a lle n

a m e ric a n - tr a n s la tio n and

a n k le

as

a s y m m e tr ic a l

Rysunek 5.5. Fora Ravelry Interfejs przeglądania M enedżera Obrazów Picasa korzysta z W yboru Dwupanelowego połą­ czonego z Siatką Miniaturek (rysunek 5.6). Kiedy użytkownik klika zdjęcie, na całym obszarze okna (poza dolnym paskiem narzędzi) pojawia się now y layout, gdzie samo zdjęcie umiesz­ czone jest w Obszarze Centralnym, sąsiadującym z zestawem narzędzi.

W zorce

|

215

Rysunek 5.6. Picasa W innych bibliotekach

http://quince.infragistics.com/Patterns/One-W indow% 20Drilldown.aspx

Wkładki $359 — W

$371 W

_

A

_ ^

.

, rWłT'

.

« » *M« •* LAX U)7p UU • KU - K» 4 tip

K*

r«»

■

■* l*X 10 i i D » BOS I ï ïp

•IWON 0 .

o 0

.>

$359

_

$359

_

hooowy

Com por Dchoo

Totol

OWI

»199.40

»19940

ChyioT\Mt),con

» » 9 40

»199.40

Q

je tB tu e

JMOgo AiM yi

»»*.40

»»9.40

E 3

©EopoAo

t» B* ■» SOS 9 lOp

• ISK Mm)

1u $391 4 Mn

Doport « M Aw« i t » 1 0

flwiA

■ a.

} »0 Mn

$391

■

frnn Nm tonowy t o nowy i>»¿9 m

w

*

d dum mu

m mu

q

0 ISh Mm)

A0M0 Artmn / »OJ 7 OSp -f LAX 10 i Vo UMOd UU 10»» « K» roto

|Rozdział 5. Listy

Adkit Anmyt Otpwti 6 48p Amon 9 S7p OkgM «4» logon MomoBonol OOU Im Angtm (LAX) Coot» lo iiM t MH140 I ANOwt Al»* 100(300 (Sor»ow- lotfy |>t) I

IH04m*n I Iw o w w

RMom Mod top 1 » 10

0

0 IM Mm)

0

Rysunek 5.7. Wkładki listy na serwisie Kayak

216

tuck u m rut»

ffcgta Dtutli Prtmtconowry S1H

C l

C o z ro b ić

Umieść listę elementów w rzędach kolumny. Kiedy u żytkow nik w ybiera elem ent, ukaż jego szczegóły na m iejscu, w sam ej liście. Elem enty m uszą się otw ierać i zam ykać n iezależnie od siebie. Kiedy używ ać

M asz do wyświetlenia listę elementów. Z każdym elementem pow iązana jest interesująca użytkownika treść, np. tekst e-maila, długi artykuł, pełnowymiarowy obraz albo szczegóły do­ tyczące rozmiaru plików bądź ich datowania. Szczegóły elementów nie zajm ują dużo miejsca, ale nie są wystarczająco małe, aby je domyślnie prezentow ać w liście w całości. Chcesz, żeby użytkow nik mógł zapoznać się z ogólną strukturą listy i zaw sze m iał ją przed oczami, ale chcesz również, by mógł szybko i bez trudności p rzegląd ać elem enty. Użytkownik m oże również otw orzyć dwa elementy jednocześnie i porów nać je. Lista elementów przyjm uje postać pionow ą — kolumny. D laczego

Wkładka ukazuje szczegóły elementu w obrębie samej listy. Użytkownik w idzi inne elementy listy, co może mu pomóc w przyswojeniu i wykorzystywaniu jej zawartości. Użytkownik może również jednocześnie oglądać szczegóły kilku elementów. Nie jest to możli­ we w Wyborze Dwupanelowym, Uszczegółowieniu W Jednym Oknie, rozszerzanych oknach oraz większości innych sposobów przedstawiania szczegółów elem entów . Jeśli Tw oje sce­ nariusze użytku przew idują częste porów nyw anie dwóch lub więcej elementów, ten wzorzec m oże być rozwiązaniem najlepszym. Ponieważ pole szczegółów elementu zaw arte jest w kolum nie, w zorzec ten m ożna połączyć z Wyborem Dwupanelowym do zaprezentowania trójpoziomowej hierarchii. Rozważ przykład klienta e-mailowego lub czytnika RSS — w iadom ości lub artykuły m ożna p rzegląd ać jako Wkładki, podczas gdy kontenery elementów (skrzynki odbiorcze, grupy, filtry itp.) wyświetlane są obok nich w ramach struktury W yboru Dwupanelowego. W jaki sposób

Zaprezentuj listę elementów w kolumnie. Wkładka ze szczegółami klikniętego elementu po­ winna rozwijać się na miejscu. Element pow inien się zw ijać po wykonaniu podobnego gestu.. Kiedy elem ent się rozwija, rozszerz jego obszar w dół tak, by jednocześnie zepchnął znajdu­ jące się pod nim elementy. Tak powinno w yglądać rozwinięcie każdego elementu. Ta stale zmieniająca się struktura m usi być zaw arta w przew ijalnym obszarze, gdyż m oże stać się niezw ykle długa. Do zwinięcia pola ze szczegółami ma służyć jasno objaśniona kontrolka (np. „Zamknij" lub „X"). Przy niektórych implementacjach Wkładki takie kontrolki znajdują się u dołu pola. Jeżeli jed­ nak pole jest długie, a użytkow nik nie chce przew ijać go w całości, powinna być możliw ość zwinięcia przez kliknięcie kontrolki u góry. Umieść kontrolkę zamykającą w pobliżu kontrolki otwierającej (lub wyświetlaj je zamiennie). W ten sposób kursor nie musi przebywać długiej dro­ gi, kiedy użytkownik chce zwyczajnie otworzyć element, przejrzeć go, zam knąć i przejść dalej.

W zorce

|

217

Przy otwieraniu i zamykaniu elementu powinno następować Anim owane Przejście, gdyż sprzyja to orientacji użytkownika oraz zwraca jego uwagę na otworzony element. Jeżeli aplikacja pozwala użytkow nikow i na edycję elementów, zam iast kazać mu przechodzić do osobnej strony ze szczegółami, m ożesz zaoferow ać edytor danych w e w kładce elem entu (ew. jako u zupełnienie tej pierw szej m etody). Lista wykorzystująca W kładki działa tak samo jak Akordeon: wszystko znajduje się w poje­ dynczej kolumnie, której panele rozwijają się i zw ijają w jej obrębie. Podobnie W ybór Dwupanelow y przypomina w działaniu szereg Zakładek, a Uszczegółow ienie W Jednym Oknie — Spis Treści (rozdział 3). Przykłady

W czytniku Google (rysunek 5.8) użyto Wkładek w ramach Wyboru Dwupanelowego. Prezentuje on w ielopoziom ow ą hierarchię kontenerów, które ukazane są w dendrogramie po lewej, lecz lista artykułów zajm uje Obszar Centralny. Użytkownik może te artykuły rozwijać i czytać na miejscu. Z am iast zm uszać użytkow nika do przeskakiw ania tam i z pow rotem m iędzy listą recenzji a treścią recenzji, strona sklepu A m azon przeznaczona dla u rządzeń mobilnych pozwala użytkownikom czytać recenzje ukazane jako Wkładki. Widoczna po lewej lista kusi użytkownika krótkimi zajawkami recenzji. Z ainteresow any dalszym ciągiem użytkow nik m oże nacisnąć tytuł i przeczytać całość (rysunek 5.9). Obecność kontrolek z plusem i minusem wskazuje, że elementy są rozwijalne. L g ia jsy ' f

C O

www.google.pl/reader/view/#stream/feed%2Fhttp%3A%2F%2Ffeeds.bbci.co.uk0/o2Fnews%2Fscience_and_environment%2Frss.xn

"C?

£

\

+Maks Gmail Kalendarz Dokumenty Zdjęcia Witryny Sieć Więcej -

G oogle Czytnik

Wszystkie elemer -

Strona główna

Pokaż 10 nowych elementów - wszystkie elementy Oznacz wszystkie jako przeczytane Ustawienia kanału... ^

Wszystkie elementy (49) Elementy oznaczone gwiazdką^ 0 Twoje elementy

Pokaż: Rozwinięte - Lista Odśwież

Scientists hail brain gene find - Scientists say new research about the genetic make-up of the

Uwagi

'Seabird cities' still struggling - Scotland's internationally important seabird colonies are continuing

Trendy jJ Przeglądaj

Are there really seven billion of us?

00

Should shipwrecks be left alone? - Should shipwrecks be left in place, or plundered?

Ęj) Widok komentarzy Ustawienia udostępniania »

Fossil feast for 'zombie worms' - Traces of bone-eating "zombie worms" have been found in a three

Eksploruj 0 Rekomendowane elementy

VIDEO: Farne Island seal pups in annual count Grey seal pups living on the Farne Islands, off

GM mosquitoes show fever promise - A field study of genetically modified mosquitoes suggests

O Rekomendowane źródła

Could legalising rhino horn trade stop poaching? - Should South Africa legalise the rhino horn

30 paz 2011

Wyświetl wszystkie rekomendacje »

Bronze Age hoard found in field - A collection of Bronze Age artefacts found in a Pembrokeshire

29 paz 2011

Subskrypcje

Clean energy loans under review - Clean energy loans made by the US Department of Energy will

29 paź 2011

Polar bear 'better Canada emblem' - A Conservative senator wants the polar bear installed as

29 paź 2011

Zombie conference at Winchester - Sci-fi fans descend on Winchester for the university's first

29 paź 2011

0 BBC News - Europe (10) BBC News - Science & ... (10) 0 CNN.com - Europe (10) 0 CNN.com - Technology (10) 0CNN.com - US (9)

Scientists glimpse inside a Peruvian mummy - Advanced imaging lets scientists peer inside a long-

29 paz 2011

VIDEO: CT scan for 700-year-old mummy - Scientists at the Smithsonian Institution's National

28 paź 2011

Campaigners occupy Belo Monte dam - Indigenous activists and environmentalists in Brazil occupy Zarządzaj subskrypcjami »

21B

pokaż szczegóły

Bangladesh bid to save dolphins - Bangladesh is to declare three areas in the southern

fó. Udostępniane elementy

Obserwowane osoby

Wyszukaj

BBC News - Science & Environment »

|Q Dodaj subskrypcję

I

Rozdział 5. Listy

|Poprzedni element |[ Następny element |

28 paź 201 1

-d

ponad 60 elementyfów)

l = l® l

Wi ÿ 4"

ss j

CzytnikGoogle (46; O

O www.google.p(/reader/vjew/#stream/feed%2Fhttp%3A%2F%2Ffeeds.bbd.co.ulc%2Fnews%2Fsdence_and_envi'ronment%2Frss.xn & Maks Gutowski

+Maks Gmail Kalendarz Dokumenty Zdjęcia Witryny Sieć Więcej -

G ou głe Czytnik |

Wszystkie elemer -

O Dodaj subskrypcję

IffBBfffiffW I

Pokaż: Rozwinięte - Lista

Pokaż 7 nowych elementów - wszystkie elementy Oznacz wszystkie jako przeczytane » Ustawienia kanału..

Elementy oznaczone gwiazdką^ 0 Twoje elementy

1

Wyszu taj i

B B C N e w s - S c ie n c e & E n v ir o n m e n t »

Strona główna Wszystkie elementy (46)

^ ■Jjt

Odśwież pokaż szczegóły

Bangladesh bid to save dolphins - Bangladesh is to declare three areas in the southern

fó. Udostępniane elementy 13 Uwagi Trendy .iii

Scientists hall brain gene find - Scientists say new research about the genetic make-up of the brain S c i e n t i s t s h a il b r a in g e n e fin d Scientists say new research about the genetic make-up of the brain could lead to better understanding of diseases such as Parkinson's.

Przeglądaj Obserwowane osoby Ę ) Widok komentarzy Ustawienia udostępniania »

Dodaj gwiazdkę Dodaj tagi

Eksploruj sil Rekomendowane elementy £3 Rekomendowane źródła Wyświetl wszystkie rekomendacje »

--

Subskrypcje BBC News - Europę (10) BBC News - Science & ... (7) S2 CNN.com - Europe (10) S CNN.com - Technology (10) CNN.com - US (9)

Podoba ml się

Udostępnianie *§ Opublikuj wrazz opisem EDE-mall C Zachowaj nleprzeczytane

'Seabird cities' still struggling - Scotland's internationally important seabird colonies are continuing

08:57 ©

Are there really seven billion of us?

08:57 ©

Should shipwrecks be left alone? - Should shipwrecks be left in place, or plundered?

08:57 ©

Fossil feast for 'zombie worms' - Traces of bone-eating "zombie worms" have been found in a three

01:51 © I

GM mosquitoes show fever promise - A field study of genetically modified mosquitoes suggests they

22:19 ©

VIDEO: Fame Island seal pups in annual count - Grey seal pups living on the Fame Islands, off

30 paź 2011 ©

Could legalising rhino horn trade stop poaching? - Should South Africa legalise the rhino horn

30 paź 2011 O i

Bronze Age hoard found in field - A collection of Bronze Age artefacts found in a Pembrokeshire

29 paź 2011 ©

Clean energy loans under review - Clean energy loans made by the US Department of Energy will

29 pai 2011 ©

Polar hoar 'hattor Poprzedni element

Zarządzaj subskrypcjami»

d

if wants tho nnlar hoar ¡nstaUefCa Następny element

ponad 60 elementy(-ów)

Rysunek 5.8. Czytnik Google ^

________ 2:21 P M __________________ 0

-aDpy AT&T ^ ________ 2:21 P M __________________ 0

|+ |Review about Mr. P o p p e r's P e n gu in s

|+ |Review about Mr. P o p p e r's P e n gu in s

'tctctrA rk

■trtcirtck

■pnllCAT&T

April 18, 2000 By

April 18, 2000 By

i read this book and thought is w a s cute, funny, ...

i read this book and thought is w a s cute, funny, ...

|+| A laugh out loud book, enjoyable for everyone.

|+J A laugh out loud book, enjoyable for everyone.

November 9, 1999 By

November 9, 1999 By

A house painter w ho loves the Arctic is in f o r ...

A h ouse painter w ho loves the Arctic is in f o r ...

l+| A se co n d grader s a y s I could not put this b ook down

— A se co n d grader s a y s I could not put this b oo k down

'trtc irtc tr

A s A & A s A June 16,2005 By

June 16, 2005 By

Mr. P op p er's P e n gu in s w a s written by Richard and

Mr. Popper's P en gu in s w a s written by Richard

Florence A tw a te r...

and Florence Atwater in 1938. This book is so

|+j A n enduring favourite December 31,2000 By Susan Zuckerman

popular it h as becom e a classic of Am erican humor.

M y G rade 4 students gobble up this book! I include ...

Mr. Poper is a gentle, untidy, and sometimes absent-m inded house painter. He and his wife

+

P o p p e r's Is E a sy reading

• A A 'A r A r A July 26, 2006 By Mr

P n n n a Ó B P a n n u in e ic a n f l i c ' i m a r ł i m

and their two children, Jamie and Bill, live in a simple home in Stillwater. H is favorite pastime is tr i r t r a a m a h n i it n n i n n try łh a P f J a c

f l n o zta u

Mr

Rysunek 5.9. Recenzje z serwisu Amazon na iPhonie

W zorce

j

219

W innych bibliotekach

http://www.patternry.com/p=inline-expand/ Bill Scott i Theresa Neil opisali tę technikę w książce Designing Web Interfaces. W kładka należy do szerszego zbioru technik opartych na wykorzystaniu tego rodzaju w kładek, w tym m.in. Dialog Inlays i Detail Inlays. W zorzec Akordeon można znaleźć w w ielu bibliotekach w zorców — w tej książce również. W iele z porad projektowych przedstaw ionych w opisie Akordeonu m oże się równie dobrze odnosić do W kładki, gdyż nie ma m iędzy nimi wielu różnic pod względem praktycznym .

Siatka Miniaturek

, ^ | j

n

X

t

S a y Something Tees

S a y Something Tees

S a y Something Tees

S a y Something Tees

Creature Tees

reg. 522 n o w $10

reg. $22 n o w $10

reg. $22 n o w $10

reg. $22 n o w $10

reg. $22 n o w $10

iÜ

w

Creature Tees

Creature Tees

Cool Prehistory Tees

Cool Prehistory Tees

Striped Polo

rag, 522

reg. $22 n o w $10

reg. $22 n o w $10

reg. $22 n o w $10

reg. $24 now $14

now

$10

Rysunek 5.10. Lista produktów serwisu Hanna Andersson Co zrobić

Utwórz listę przyciągających w zrok elem entów i nadaj jej postać siatki „od b itek ". Pozw ól użytkownikowi w ybrać jedną lub więcej m iniaturek do przeglądania lub zarządzania. Kiedy używ ać

Elem enty listy oznaczone są właściwymi sobie miniaturkami graficznymi: obrazami, logo, zrzutami ekranu, pomniejszonymi zdjęciami itd. Są one na ogół utrzym ane w jednakowym rozm iarze i stylu. Lista może być długa albo podzielona na Zatytułowane Sekcje (rozdział 4.). Przy każdym masz zam iar u m ieścić niewielką ilość metadanych (tj. inform acji o elem encie) w rodzaju nazw y i daty. Nie powinno ich być za dużo — to obraz powinien zajm ować więk­ szość miejsca przeznaczonego dla elementu.

220

|Rozdział 5. Listy

Użytkownik chce obejrzeć całą listę, a być m oże m usi ją szybko przejrzeć, by znaleźć intere­ sującą go pozycję. M oże też m ieć zamiar zaznaczenia jednego lub więcej elem entów jedno­ cześnie, w celu przeniesienia ich, skasowania bądź przejrzenia. D laczego

Siatka Miniaturek jest atrakcyjnym sposobem przedstawiania wielu elementów w sposób skon­ densowany. Wzorzec ten, spokrewniony z Siatką R ów nopraw nych E lem entów (rozdział 4.), tworzy hierarchię wizualną ukazującą elementy listy jako równoprawne, przy czym mocna kompozycja wizualna przyciąga oko do tej części strony. Być może elementy listy łatwiej ukazać w formie tekstowej, jednak niekiedy obrazy łatwiej rozpoznać i odróżnić od siebie niż tekst. M iniaturki w kształcie zbliżonym do kwadratu są łatwiejszym „celem" dla palców i pisaków (na ekranach dotykow ych). W zorzec ten spraw dza się dobrze na urząd zeniach m obilnych z ekranami o stosunkowo wysokiej rozdzielczości, takich jak iPhony. W jaki sposób

Rozmieść miniaturki w dwuwym iarowej siatce. Dopasuj je tak, aby były mniej więcej tego samego rozmiaru i siatka była schludna. Um ieść m etadane tekstowe w pobliżu miniaturki; ich rozmiar m usi być niewielki, aby miniaturka pozostała najbardziej wyeksponowana. Niektóre Siatki M iniaturek wyglądają o wiele ładniej, kiedy miniaturki m ają podobną w yso­ kość i szerokość. Jeżeli pracujesz na obrazach o różnych wymiarach lub formatach (tj. różnym stosunku szerokości do w ysokości) albo obrazy są po prostu duże, do utworzenia miniaturki potrzebujesz obróbki graficznej. Spróbuj znaleźć rozmiar i format obrazu, który będzie od­ powiednio dobrze przystaw ał do w szystkich, naw et jeśli miałoby się to w iązać z przycięciem niektórych obrazów. (Zmniejszenie obrazu jest łatwe; odpowiednie wykadrowanie go już nie. Staraj się zachow ać sens obrazu, prezentując — o ile to możliwe — najważniejszą jego część). W yjątkiem są sytuacje, kiedy masz do czynienia z obrazami, których wym iary i proporcje są dla użytkownika przydatnymi informacjami. Przykładowo w zbiorze osobistych zdjęć znaj­ dziemy zarówno wykadrowane pionowo, jak i poziom o. N ie ma sensu przycinać ich do roz­ miarów idealnej miniaturki, gdyż użytkownik chce je odróżniać. Z drugiej strony, miniaturki w galerii produktów (w rodzaju butów lub koszul) pow inny być tej samej długości i szerokości, a sposób przedstawiania produktów na zdjęciach ma być spójny. Przykłady

W widoku katalogu w Finderze można znaleźć różne rodzaje miniaturek (rysunek 5.11). Jeżeli plik jest obrazem, na ekranie widać ów obraz w pomniejszeniu; w przypadku katalogów widzi­ my zwyczajną ikonę foldera; przy plikach pozbawionych elementu graficznego widzimy jedy­ nie nazwę formatu na standardowej ikonie. Miniaturki w tej siatce nie są w pełni zestandaryzowane, toteż nie wygląda ona tak czysto, jak pozostałe przykłady zaprezentowane w opisie tego wzorca. Użytkownik może jednak wyczytać przydatne informacje z różnic w rozmiarze i stylu miniaturek.

W zorce

|

221

Rysunek 5.11. Finder w Mac OS Archiwa projektowe AIGA (rysunek 5.12) oraz YouTube (rysunek 5.13) to Menedżery Obrazów. W pierwszym w ogóle nie ma informacji tekstowych, a w drugim jest ich dużo.

Rysunek 5.12. Archiwa projektowe AIGA Serwisy Zappos (rysunek 5.14) i Hanna Andersson (rysunek 5.10) m ają estetycznie zapro­ jektow ane Siatki M iniaturek w swoich galeriach produktów . H om ogeniczność je st tu czymś pięknym — podobieństwa i różnice między produktami są niezw ykle wyraziste, a kompozycja samej strony charakteryzuje się mocnym rytmem.

222

|Rozdział 5. Listy

Rysunek 5.13. YouTube

Rysunek 5.14. Zappos

W zorce

| 223

Siatki M iniaturek potrzebne są na urządzeniach mobilnych w wielu kontekstach: do prezen­ towania aplikacji, funkcji i samych obrazów. Porównaj rozmiary m iniaturek z przykładu 5.15. Te na stronie Grafika Google i ekranie domowym iPhona są akurat na tyle duże, by można je było nacisnąć opuszkiem palca. Ekran strony Facebooka jest mniej zagęszczony, a dookoła każdego elementu znajduje się więcej przestrzeni.

Rysunek 5.15. Siatki miniaturek na iPhonie: Facebook, Grafika Google oraz ekran domowy W innych bibliotekach

http://ui-patterns.com/patterns/Thumbnail

Karuzela

Rysunek 5.16. Marriott

224

j

Rozdział 5. Listy

C o z ro b ić

Przedstaw listę atrakcyjnych wizualnie elementów w formie poziom ego paska lub łuku i daj użytkownikowi możliwość przeglądania ich poprzez przew ijanie lub przeciąganie m iniatu rek w jedną i w drugą stronę. Powiększ elem ent centralny, jeżeli uznasz to za stosowne. Kiedy używ ać

Elementy listy oznaczone są właściwymi sobie miniaturkami graficznymi: obrazami, logo, zrzu­ tami ekranu, pomniejszonymi zdjęciami itd. Są one na ogół utrzymane w jednakowym rozmiarze i stylu. Lista jest p ł a s k a (tj. niepodzielona na kategorie lub kontenery danych). Przy każdym chcesz um ieścić niew ielką ilość m etadanych (tj. inform acji o elemencie) w ro­ dzaju nazw y i daty. N ie powinno ich być za dużo — to obraz powinien zajm ować w iększość miejsca przeznaczonego dla elementu. Każdy elem ent jest potencjalnie interesujący dla użytkownika. Użytkownicy będą przeglądać elementy dość niezobowiązująco, czyli raczej nie będą szukać niczego konkretnego ani mieć ochoty na zobaczenie całej listy. Jeśli jednak ktoś będzie szukał konkretnego elementu, nie będzie mu przeszkadzać, że znajdzie go dopiero po przejrzeniu wielu innych. Sam e elem enty m ożesz uporządkować w kolejności od najbardziej do najmniej interesującego albo chronologicznie. Brakuje Ci poziomej przestrzeni na Siatkę M iniaturek, a p rzestrzeni pionowej też możesz m ieć niewiele, ale jednak m usisz sprawić, by lista wyglądała atrakcyjnie i ciekawie. D laczego

Karuzela to wciągająca forma przeglądania elementów graficznych, która zachęca użytkownika do oglądania tego, co już widać, oraz patrzenia, co jest dalej. U żytkow nik nie m oże z łatwo­ ścią przeskoczyć do konkretnego miejsca w liście, toteż m usi przew ijać wszystkie elementy. W zorzec ten zachęca zatem do przeglądania i zdania się na szczęście. Karuzele zajmują ograniczoną ilość pionowej przestrzeni, więc mogą być lepszym rozwiązaniem od Siatki M iniaturek w interfejsach przeznaczonych dla urządzeń z niew ielkim i w yświe­ tlaczami. W poziom ie mogą być natom iast w ąskie albo szerokie, w edle upodobań i potrzeb. Jeżeli w danej implementacji uwagę użytkownika z założenia przyciąga jakiś położony centralnie obiekt, np. dlatego, że jest powiększony, w zorzec ten dostarcza „skupienia i kontekstu". Użytkownik ma bowiem szczegółow y w id ok jed n ego elem entu, a jed n ocześn ie w idzi ele­ menty bezpośrednio z nim sąsiadujące. Więcej o zasadzie „skupienia i kontekstu" przeczytasz w rozdziale 7. W jaki sposób

Po pierwsze, utwórz miniaturki dla każdego elementu przedstawionego w Karuzeli. O pro­ blem ach zw iązanych z rozm iarem i proporcjam i m iniatu rek przeczytasz w opisie w zorca Siatka M iniaturek. Pamiętaj jednak, że Karuzela nakłada jeszcze większe ograniczenia — m i­ niaturki o różnych rozmiarach i formatach obrazu zwykle wyglądają jeszcze bardziej niezdarnie w Karuzelach niż Siatkach Miniaturek. Umieść metadane tekstowe w pobliżu miniaturki; powin­ ny być niewielkiego rozmiaru, aby miniaturka pozostała najbardziej wyeksponowana.

W zorce

| 225

Kiedy przewijanie odbywa się w poziomie, rozmieść miniaturki poziomo — losowo lub w kolej­ ności, która byłaby oczywista dla użytkownika (np. w edług daty). Pokaż niew ielką ich liczbę, czyli mniej niż dziesięć, a pozostałe ukryj z dowolnej strony. Po lewej i prawej um ieść duże strzałki, służące do poruszania Karuzeli. Przy każdym kliknięciu strzałki na ekranie powinien przesunąć się więcej niż jeden element. Aby atrakcyjność wizualna Karuzeli była większa, przew ijanie powinno być animowane. Gdyby użytkow nik chciał poruszać się szybko po długiej liście, jakby czegoś szukał, pod Ka­ ruzelą — poza strzałkami — um ieść dla niego pasek przewijania. M oże się okazać, że użyt­ kownicy będą z niego często korzystać. W takim przypadku powinieneś rozw ażyć nadanie liście bardziej konwencjonalnej, pionowej formy, a także dodanie możliwości wyszukiwania elementów. M ożesz zdecydow ać się na pow iększenie centralnego elementu Karuzeli, by zw rócić na niego uwagę. W ten sposób Karuzela staje się systemem opartym na w yborze pojedynczych ele­ mentów — pow iększony elem ent ew identnie jest zaznaczony i m ożna z nim wykonyw ać różne czynności, np. wyśw ietlić jego szczegóły w formie tekstowej albo skorzystać z kontro­ lek odtwarzania, jeżeli element jest filmem. Niektóre Karuzele są proste, a inne zakrzyw ione lub okrągłe. Zazwyczaj w ykorzystują złu­ dzenie trójwym iarowości polegające na zmniejszaniu i częściowym zakrywaniu elementów, które oddalają się od środka. Klisza (rozdział 10.) jest wariantem Karuzeli przeznaczonym do wykorzystania na urządzeniach mobilnych. Kiedy jest w użyciu, na ekranie znajduje się tylko jed en elem ent, a użytkow nik przeciąga po ekranie, by dotrzeć do kolejnych. Przykłady

Na wielu w itrynach można znaleźć podstawową, linearną Karuzelę służącą do przeglądania produktów. W sklepie Amazon i na serwisie Google Książki w ten właśnie sposób w yświe­ tlane są okładki książek (rysunek 5.17). Zw róć uwagę na różne ilości metadanych tekstowych i ich w pływ na ogół projektu. Ile informacji o książkach należy podawać? Jak ciasno powinny być ze sobą zestaw ione okładki?

K siążki p o kre w n e

um il niEPi ILIA D A

NOMEM

±!i

HAMLJT

POD TRO JĄ

l i t ;

f iü l

dniała HoMep, Hmai^-ut Btiem-ieec

3od Troją .esław M. Bartelski

Odyseja Homer

\

>

--------Hamlet Stanisław Wyspiański

Homer

n e x t-*

* I

la s t »

H

4

3

of

1579

►

(59,440 results)

W ste cz

2

3

4

6

5

8

7

Dalej

Items 121-150 of 1827 «

1 2 3 4 5 6 7 8 9 . . . 61

►

< Poprzednia

9

Dalej [> < P re v io u s

Page 10 of 70


| N e xt"

L a st»

1

Rysunek 5.29. Od góry, w stronę przeciwną do ruchu wskazówek zegara: Kayak, Drupal.org, Flickr, Target, Last.fm, Mothering.com, Amazon, eBay, YouTube i Hulu W bibliotece wzorców Yahoo! znajdują się dwie wersje Paginacji — jed na opracow ana z myślą o rezultatach wyszukiwania, a druga o innego rodzaju elementach: http://developer.yahoo.com/ypatterns/navigation/pagination/item.html http://developer.yahoo.com/ypatterns/navigation/pagination/search.html

Bezpośrednie Przejście Do Elementu A lb u m

2 c2Cionkam i

O

Qr

^ 3 Czcionka

Zbióf

Ror

A

W irystfcle czcio n k i

► STKaili

‘A

ootski

► Siane Sans ITC TT

X

Użytkownik

► Słone Sans Sem ITC TT

*

Komputer Chines«

*~ Classic

rixcc W id th

‘./ u k a j

D o p asu j *

A B C D E F G H IJ K L M N O PQ RSTU VW XYZ

» CTCong e Symbol

ąbOdćfghijklm

* Synchro l ET

nopqfstfivwxyl.

► Tahcwna * Tekton Pro

1234567890

- I lA M iSrW kfif * T ri;» n Pro

n.W eb Windows Ofhce Lompa. .

► Tre&uchet MS ►TW C tflM T ►Typ« c m b ...ts

ont

lc t

► v«rd*r%a * W cM m g t

JZL

+j

lB .

Czcionek. 2S4

Tim es Rom an. 2 0 pkt.

Rysunek 5.30. Okno fontów w Mac OS

W zorce

| 235

C o z ro b ić

Kiedy użytkownik wpisuje nazwę elementu w tabeli lub dendrogramie, aplikacja pow inna od razu „przeskoczyć" do owego elementu i zaznaczyć go. Kiedy używ ać

W interfejsie w ystępuje przew ijana lista, tabela, rozw ijane menu, pole w yboru lub drzewo, gdzie znajduje się wiele elementów. Elementy są posortowane alfabetycznie lub numerycznie. Użytow nik chce zaznaczyć konkretny elem ent szybko i dokładnie, n ajlepiej przy użyciu klawiatury. Ten wzorzec jest często w ykorzystyw any w w yszukiw arkach plików, przy długich listach oraz rozw ijanych menu służących do wyboru np. kraju i miasta zamieszkania. Można z niego również skorzystać przy liczbach w rodzaju lat i cen, czy naw et przy datach do wyboru m ie­ sięcy lub dni tygodnia. D laczego

Ludzie nie radzą sobie dobrze z przeglądaniem długich list słów i liczb, lecz kom putery jak najbardziej. Niech w szyscy robią to, z czym czują się dobrze. Kolejną dobrą właściw ością tej techniki jest to, że użytkow nik m oże trzym ać ręce na klawia­ turze. Kiedy użytkow nik porusza się po formularzu lub oknie dialogowym, może mu się przydać m ożliw ość dokonania w yboru poprzez wpisanie pierw szych kilku liter nazwy ele­ mentu, którego poszukuje, żeby system sam zaznaczył element, a użytkow nik mógł się zająć kolejnymi czynnościami. N ie potrzeba żadnego przewijania ani klikania — użytkow nik nie musi ściągać rąk z klawiatury. W jaki sposób

Kiedy użytkow nik w pisuje pierwszą literę lub cyfrę nazw y elementu, którego szuka, aplika­ cja powinna przeskoczyć do pierw szego elementu, który pasuje do podanych danych; lista powinna być automatycznie przeciągnięta tak, by elem ent był widoczny i zaznaczony. Kiedy użytkow nik szybko w pisuje więcej znaków, zaznaczenie powinno być na bieżąco dosto­ sow yw ane do podaw anych informacji. Jeżeli nic nie pasuje do wpisanego ciągu, przenieś za­ znaczenie na najbardziej podobny element — nie w racaj do góry listy. M ożesz spraw ić, by użytkow nik usłyszał ostrzeżenie dźwiękowe, kiedy brakuje pasującego elementu. W niektó­ rych aplikacjach tak jest. Przykłady

W ariant Bezpośredniego Przejścia Do Elementu w ystępuje w funkcji przeszukiwania przyro­ stowego w GNU Emacs (rysunek 5.31). Kiedy użytkow nik wchodzi w tryb i-search polece­ niem Ctrl+S, wraz z każdym w pisanym znakiem jest przenoszony do pierw szego m iejsca w dokumencie, w którym dany ciąg się pojaw ia. N ie ma znaczenia to, że pierwotny materiał jest nieposortowany. Po odnalezieniu pierwszego pojaw ienia się szukanego ciągu u żytkow nik m oże przechodzić do kolejnych, naciskając skrót Ctrl+S. Pod pewnymi względami takie przeszukiwanie jest wy­ godniejsze, a na pewno szybsze od wyszukiwania oferowanego przez typowe okna Znajdź, które nie aktualizują w yników na bieżąco.

236

|Rozdział 5. Listy

Ufijxi

T 'e m a c s ir iT I D W E L L J

File Edit

Options

Buffers Tools

HTML

5GML

Help

< td c l a 3 3 = o n t e n t '> You a r e d e s ig n in g a UI t h a t c o n t a i n s s e v e r a l d i s c r e t e t a s k s o r c o n t e n t e le m e n t s : f o rm s , demos, gam es, a r t i c l e s , t r a n s a c t i o n s , e n tir e a p p lic a tio n s , e t c . A l l a r e r e a c h a b l e from one c e n t r a l p age o r window. B u t you d o n 't want t o l i n k a l l | s e c tio n s o r "sp o k es" to ev e ry o th e r on e, f o r s e v e r a l p o s s ib le re a s o n s: < ul> < li > s p a c e c o n s t r a i n t s , < li > a b s e n c e o f v i s u a l and/ or c o g n i t i v e c l u t t e r , < l i > r e s t r i c t e d w ork flow t o f o r c e t h e c o m p le tio n (o r e x p l i c i t c a n c e lla tio n ) o f a ta s k . < /ul>

d



< tr> < td v a lig n = t o p " a l i g n = " r i g h t r > Why: < td c l a 3 s = o n t e n t '> P r i m a r i l y , you a r e u s in g n a v ig a t i o n t o < b > s t r u c t u r e t h e u s e r e x p e r ie n c e < / b > in t o s o m e th in g d i f f e r e n t fro m t h e f r e e - f o r m h y p e r t e x t b ro w s in g o f f e r e d b y t h e Web. You a r e a s k in g t h e u s e r t o f o c u s on one s e c t i o n at- a tim e ,< / b > th e n go b a c k t o t h e hub and n a v i g a t e t o a n o t h e r s e c t i o n . T h is c e r t a i n l y r e d u c e s c l u t t e r on t h e " s p o k e ' p a g e s — t h e u s e r h as l e s 3 to lo o k a t , and l e s s t o t h i n k a b o u t.

- 1 \ * * hub—and—s p o k e . html. (HTML I s e a r c h ) — L 5 4 — 5 6 * -----------------------I - s e a r c h : th e

J

-------------

Rysunek 5.31. Emacs Poza przewinięciem do pierw szego pojawienia się ciągu, Emacs podświetla w dokumencie wszystkie inne miejsca, w których można ów ciąg znaleźć. Użytkownik zyskuje dzięki temu wiele dodatkowych informacji kontekstowych o w yszukiw aniu, które prow adzi. Czy ciąg pojawia się często? Czy przypadki pojawienia się tego ciągu w ystępują obok siebie, czy są rozproszone?

Przewijanie Alfabetyczne — E x p lo r e O u r T o p ic s Sacram e n to S a ilin g

ni # A A 1

B \D E 1 F \ GH

S a le s S a l t L a k e C ity S a l t w a t e r A q u a r iu m s

i

S a l t w a t e r F i s h in g S a n A n t o n io

:

S a n D ie g o S a n F r a n c is c o S a n F r a n c is c o T r a v e l S a v in g E n e rg y S a v i n g f o r C o l le g e S c a n d in a v ia T ra v e l

■ p I9 ? ■

]j wVu 1x

▼

2

S c a n d in a v ia n Food S c h o o l - A g e C h ild r e n S c i- F I

/

F a n ta sy

1

: K L M N 0

Rysunek 5.32. About.com

W zorce

| 237

C o z ro b ić

Um ieść litery alfabetu obok paska przewijania uporządkowanej alfabetycznie listy. Kiedy używ ać

Użytkownicy będą szukać bardzo konkretnych elementów z długiej listy — przyjmującej zwykle formę przewijanej listy, tabeli lub dendrogramu. Chcesz, żeby odnajdowanie elem entów było m ożliwie łatwe i szybkie. D laczego

Alfabetyczne paski przewijania nie są częste, lecz ich d ziałanie jest zrozum iałe samo przez się. Zapewniają interaktywną m apę zawartości listy w podobny sposób, jak Pasek Przewija­ nia Z Adnotacją (rozdział 3.). Są też blisko spokrew nione ze wzorcem Bezpośrednie Przejście Do Elementu, gdyż obydwa te wzorce pozwalają na bezpośrednie przechodzenie do wybra­ nych punktów uporządkow anych list. W zorzec ten praw dopodobnie w yrósł na podstaw ie książek (w rodzaju słowników) i notat­ ników (w rodzaju książek adresowych), w których litery alfabetu oznaczone są zakładkami. W jaki sposób

Um ieść długą, uporządkow aną alfabetycznie listę w przew ijanym obszarze. Wzdłuż paska przewijania um ieść litery alfabetu. Kiedy użytkow nik klika daną literę, lista powinna być do niej przewijana (rysunek 5.32). Istnieje wiele przykładów działających w ten sposób list alfabetycznych, ale inne kolejności sortowania — np. w edług liczby lub daty — również mogą się sprawdzać. Zastanów się nad w ykorzystaniem tego wzorca w odniesieniu do rodzaju list innego niż alfabetyczne. Przykłady

Prawdopodobnie najlepszy przykład zastosow ania tego wzorca można znaleźć na iPhonie. Na rysunku 5.33 w idać systemową aplikację Kontakty.

Rysunek 5.33. Lista kontaktów na iPhonie

238

|

Rozdział 5. Listy

Kaskadujące Listy

Rysunek 5.34. Okno Album z czcionkami Mac OS Co zrobić

Przedstaw hierarchię w postaci interaktywnych list elementów z każdego jej poziomu. W ybór elementu hierarchii skutkuje wyświetleniem jego podrzędnych elementów w liście obok. Kiedy używ ać

Elementy listy ułożone są hierarchicznie. Taka hierarchia może być rozbudowana, a na każdym jej poziom ie m oże znajdow ać się wiele elementów. Dendrogram lub zarys hierarchii byłyby wprawdzie wystarczające, lecz użytkownik musiałby ciągle przewijać listę, żeby obejrzeć wszyst­ kie elementy, a jednocześnie nie mógłby zyskać dobrego przeglądu elem entów z w yższych poziom ów hierarchii. Może tu chodzić o hierarchię dosłowną, tak jak w systemie plików, albo konceptualną. Wzorzec ten wykorzystuje się często, by dać użytkownikowi m ożliw ość poruszania się po kategoriach i w ybierania elementów spośród nich albo podejm ow ania w spółzależnych decyzji, tak jak w przykładzie z fontami na rysunku 5.34. D laczego

Rozkładając poziomy hierarchii na kilku przewijalnych listach, możesz ją ukazać pełniej. Tylko o to chodzi. W idoczność przydaje się, kiedy użytkownik ma do czynienia ze złożonymi strukturami informacyjnymi. Rozłożenie elementów w listach pozwala na schludne uporząd­ kowanie. Użytkownikowi łatwiej w tedy rozeznać się, na którym poziom ie działa, niż gdyby m iał się tego dowiadywać z zarysu danych, jako że poziomy hierarchii ułożone są w ustalo­ nych pozycjach w ładnych i przew idyw alnych listach. W jaki sposób

U m ieść elementy pierw szego poziom u h ierarchii w liście znajdującej się najdalej po lewej; powinna w niej obowiązywać zasada jed nokrotnego w yboru. Kiedy użytkow nik zaznacza w niej któryś z elementów, wyświetl elementy podrzędne w drugiej liście. Podrzędne elementy dla tych z drugiej listy wyświetl w trzeciej itd.

W zorce

| 239

Kiedy użytkow nik dociera do elementów najniższego poziomu hierarchii — „liści" zam iast „gałęzi" — możesz um ieścić szczegóły takiego elementu na prawym krańcu interfejsu. Przy plikach graficznych są to zw ykle m iniaturki, lecz zam iast tego m ożesz udostępnić interfejs pozwalający na edycję elementu, czytanie jego zawartości bądź cokolwiek innego, co odpo­ wiada profilowi Twojej aplikacji. Ciekawym aspektem tego wzorca jest to, że z każdą listą możesz z łatwością powiązać przyciski typu Usuń bieżący element, Przejdź wyżej, Przejdź niżej itd. Wiele zestawów narzędzi pozwala na bezpośrednie manipulowanie elementami przy użyciu kontrolek dendrogramu, ale kiedy takiej możliwości brak, opisana powyżej technika może się okazać sensownym środkiem zastępczym. Przykłady

Widoczny na rysunku 5.35 Finder w Mac OS jest skrajnym przykładem wdrożenia tego wzorca — znajduje się w nim 8 poziomów hierarchii. Udowadnia on jednak, że wzorzec znajduje zasto­ sowanie w różnych skalach i pozwala użytkownikowi zagłębić się w hierarchię plików przy jed­ noczesnym zachowaniu ogólnego jej przeglądu. (Muszę ostrzec, że może to jednak być roz­ wiązanie niezrozum iałe dla ludzi, którzy nie są obeznani z tym wzorcem i ideą hierarchii).

Rysunek 5.35. Finder w Mac OS NeXTSTEP pierwotnie wykorzystał tę technikę ok. 1990 roku w swoim programie File Viewer. Przykład z rysunku 5.36 pochodzi ze strony http://www120.pair.com/mccarthy/nextstep/intro.htmld/ Workspace.html.

Rysunek 5.36. NeXTSTEP File Viewer

240

|

Rozdział 5. Listy

W innych bibliotekach

http://quince.infragistics.com/Patterns/Cascading% 20Lists.aspx

Tabela Drzewiasta

B

Nazwa

Data zmian

Adobe

2 0 1 0 - 0 7 - 2 0 2 1 :4 9

—

k a ta lo g

2 0 1 0 - 0 6 - 2 3 2 1 :3 4

— —

k a ta lo g

2 0 1 1 - 1 0 - 1 1 2 0 :3 9 2 0 1 0 - 0 7 - 2 0 2 1 :5 1

—

k a ta lo g

► Û

Flash P layer

► Cl] A d o b e P a tch F ile s E l A d o b e Flash CS5

fr

Wielkość

Rodzaj

k a ta lo g

2 0 1 0 - 0 7 - 2 1 2 2 :1 5

1 ,1 MB

p ro g ra m

T e a m V ie w e r

2 0 1 0 - 0 9 - 0 3 1 1 :2 6

6 1 ,4 MB

p ro g ra m

A d o b e D ig ita l E d itio n s

2 0 1 0 - 1 0 - 2 0 0 0 :4 5

1 9 ,1 MB

p ro g ra m

M acX V id e o C o n v e rte r Pro

2 0 1 0 - 1 0 - 2 9 0 5 :0 2

3 7 ,8 MB

p ro g ra m

VLC

2 0 1 0 - 1 1 - 1 2 1 7 :5 9

7 8 ,2 MB

p ro g ra m

M ic ro s o ft S ilv e rlig h t

2 0 1 0 - 1 1 - 1 2 2 3 :0 6

4 KB

2 0 1 0 - 1 1 - 1 7 2 0 :0 3

7 2 ,3 MB

p ro g ra m

2 0 1 0 - 1 2 - 0 1 2 3 :4 6

1 ,6 MB

p ro g ra m

dfh Q ue 3

a

S A d iu m Picasa W eb A lb u m s U p lo a d e r

CTI N a rz ę d z ia

s k ró t

2 0 1 0 - 1 2 - 2 6 1 2 :3 4

—

2 0 0 S - 0 5 - 2 6 1 0 :3 9

6 6 8 KB

p ro g ra m

•t LCC U n in s ta lle r

2 0 0 8 - 0 5 - 2 6 1 0 :3 9

5 5 7 KB

p ro g ra m

i L o g ite c h C o n tro l C e n te r U p da te

_.i LCC C o n n e c tio n U tility

k a ta lo g

2 0 0 8 - 0 5 - 2 6 1 0 :3 9

7 8 6 KB

p ro g ra m

i:( f G ra p h e r

2 0 0 9 - 0 4 - 0 7 0 2 :4 2

2 9 ,8 MB

p ro g ra m

'"5/ E d y to r A p p le S c rip t

2 0 0 9 - 0 4 - 2 4 1 5:4 1

1 7 ,7 MB

p ro g ra m

2 0 0 9 - 0 5 - 1 9 0 4 :1 2

1 ,7 MB

p ro g ra m

G ra b 9 d K o lo ry m e tr c y fro w y

2 0 0 9 - 0 5 - 2 8 0 7 :0 6

1 ,4 MB

p ro g ra m

' 0 ' N a rz ę d z ia s ie cio w e

2 0 0 9 - 0 6 - 2 5 0 4 :2 5

2 ,4 MB

p ro g ra m

2 0 0 9 - 0 7 - 3 1 0 9 :1 8

1 0 ,3 MB

2 0 1 0 - 0 6 - 2 3 2 1 :5 3

—

11. M o n ito r a k ty w n o ś c i ▼ 0

A d o b e In s ta lle rs

p ro g ra m k a ta lo g

Rysunek 5.37. Finder w Mac OS Co zrobić

Um ieść pola elementów w kolumnach tabeli, lecz znajdujący się w pierwszej kolumnie zarys struktury drzewa zaznacz wcięciami. Kiedy używ ać

Elem enty listy są wysoce ustrukturyzowane oraz charakteryzują się interesującymi dla użyt­ kowników atrybutami. Możesz je zaprezentow ać w wielokolum nowej liście lub tabeli. Ele­ menty są jednak przede wszystkim ujęte w hierarchię, więc wolisz, żeby były przedstawione w formie dendrogramu. Użytkownicy są stosunkowo dobrze zaznajom ieni z obsługą interfejsów ; nie jest to wzorzec zrozum iały dla niezorientow anych użytkowników. To samo można pow iedzieć o większości widoków hierarchicznych, w tym również o dendrogram ach i Kaskadujących Listach. D laczego

Łącząc dwie metody przeglądania danych w jeden widok, sumujemy korzyści obydwu po­ dejść kosztem skomplikowania w arstw y kodowej i graficznej. M ożesz ukazać hierarchię ele­ mentów, a także matrycę dodatkowych danych lub atrybutów w jednej, scalonej strukturze.

W zorce

|

241

W jaki sposób

Z przykładów dowiesz się, co należy zrobić: dendrogram (a właściwie zarys strukturalny) zam ieść w pierwszej kolumnie, a atrybuty elementów w kolejnych. Rzędy — każdy z poje­ dynczym elementem — można zw ykle zaznaczać. Rzecz jasna, można to połączyć z Sortow alnym i Tabelami w celu utworzenia struktury, która jest łatwiersza w przeglądaniu i przyjaźn iejsza pod w zględem ogólnej interakcji. Sortow anie kolum n zakłóca w łaściw y układ elementów dendrogramu, więc musisz udostępnić użytkow nikow i dodatkowy przycisk lub inny sposób na posortow anie tabeli zgodnie z układem pierwotnym. W ygląda na to, że technika ta na dobre zadomowiła się w klientach e-mailowych i czytnikach RSS, w których wątki tematyczne układają się w dendrogramy. Przykłady

W jednym z okien dialogowych przeglądarki Firefox można było niegdyś znaleźć charakte­ rystyczną Tabelę Drzewiastą. Separatory w postaci poziomych linii grupują wizualnie elementy w osobne kategorie, co jest całkiem dobrym rozwiązaniem (rysunek 5.38).

Rysunek 5.38. Menedżer zakładek wczesnej wersji Firefoksa W innych bibliotekach

http://quvnce.vnfragistics.com/Patterns/Tree-Table.aspx

242

|

Rozdział 5. Listy

Pole Now ego Elementu

Rysunek 5.39. Microsoft Outlook Co zrobić

Użyj pierw szego lub ostatniego rzędu tabeli lub listy jako pola służącego do tworzenia no­ wych elementów. Kiedy używ ać

W interfejsie znajduje się tabela, lista, dendrogram albo jakiekolw iek inne poziom e zobrazo­ w anie zbioru elementów (gdzie na jeden rząd przypada jed en elem ent). Na jakim ś etapie użytkow nik m usi dodać do tego zbioru now e elementy. W interfejsie nie ma jednak za dużo wolnego miejsca na dodatkowe przyciski i kontrolki, toteż chcesz, aby tworzenie elementów było bardzo efektywne i łatwe dla użytkownika. D laczego

Dając użytkow nikow i m ożliw ość pisania bezpośrednio na początku lub końcu tabeli, spra­ wiasz, że elem ent pow staje tam, gdzie rzeczywiście będzie istniał. Rozwiązanie to jest bar­ dziej spójne pod w zględem konceptualnym niż tworzenie elem entów w osobnej części inter­ fejsu. Ponadto interfejs jest bardziej schludny, ponieważ zajm uje mniej miejsca na ekranie, redukuje wymagania naw igacyjne (czyli eliminuje „przeskoki" do nowych okien) oraz wy­ maga od użytkownika mniej pracy. W jaki sposób

Daj użytkownikowi łatwy i intuicyjnie zrozumiały sposób tworzenia nowych obiektów w pierw­ szym pustym rzędzie tabeli. Edycję elementu można rozpocząć np. pojedynczym kliknięciem rzędu, kliknięciem znajdującego się w nim przycisku „Now y elem en t" albo istniejącej już „atrap y" elem entu, tak jak na rysunku 5.39. Po kliknięciu nowy element powinien się pojawić w rzędzie. Zawartość każdej kolumny w tabeli (o ile tych kolumn jest więcej niż jedna) powinna być modyfikowalna, co pozw ala użytkow­ nikowi nadać im wartości. W komórkach pow inny znajdow ać się pola tekstowe, rozwijane li­ sty bądź jakiekolw iek inne narzędzia pozw alające na szybkie i dokładne p rzypisan ie owych w artości. Tak jak przy każdym form ularzu, Popraw ne W artości Domyślne (rozdział 8.) wspomagają użytkownika, który nie musi edytować wszystkich kolumn, poniew aż niektórym przypisane już są stosowne wartości. M usim y jednak przem yśleć kilka niuansów. Co ma się dziać, kiedy użytkow nik nie skończy tworzenia nowego elementu? M ożna sprawić, by nowo utw orzony elem ent był od razu po­ prawny. W takiej sytuacji, jeśli użytkownik przerywa jego edycję, element tkwi w tym miejscu,

W zorce

| 243

dopóki użytkow nik sam go nie skasuje. Także tutaj przydaje się zastosow anie Poprawnych W artości Domyślnych, automatycznie przypisywanych wszystkim kolumnom rzędu. W zależności od implementacji, wzorzec ten może przypominać Zapytania (rozdział 8.). W oby­ dwu przypadkach mamy do czynienia ze wstępną wartością, którą użytkownik może zastąpić wartością właściwą; tutaj jednak wstępna wartość przyjmuje formę „zapytania", które wskazuje użytkow nikow i, co ma zrobić. Przykłady

W domyślnych szablonach arkuszy Excela, jak np. w służącym do planow ania finansow ego z rysunku 5.40, Pole Now ego Elementu zaznaczone jest bardzo w yraźnie niebieskim polem okalającym cały rząd. W widoku Konspekt program u Pow erpoint (rysunek 5.41) m ożna two­ rzyć now e slajdy poprzez wpisanie w artości w dolnym rzędzie, lecz ta funkcja interfejsu jest oznaczona subtelniej, przez co trudniej ją zauważyć. (Sama m usiałam poszukać tej funkcji; nigdy nie byłam świadoma jej istnienia). V u i i iii i u i 111----------------------------- m r a u t t --------------------------------------------------------- ? / j y t a r o ---------------------------------------y i r r w

Springdell Great H arvest Whole Foods B u sa Farm W right-Locke Farm Kim ball’s Fruit Farm S w is s Bakers Chestnut Farm Rancatore's Char| T

Dairy Bakery Misc Produce Produce Produce Bakery Meat, e g g s D esse rts

7/9/2010 7/9/2010 7/12/2010 7/14/2010 7/14/2010 7/14/2010 7/14/2010 7/14/2010 7/14/2010

J_______

$ 3 0 .0 0 $5.99 $ 7 8 .1 2 $ 2 2 .0 0 $5.00 $7.50 $3.25 $ 1 9 .0 0 $ 1 4 .0 0

T

□

Rysunek 5.40. Nowy element w arkuszu Excela

New Open Save Print

Undo

Format

Text Box Pictur

Rysunek 5.41. Nowy slajd w prezentacji PowerPoint W innych bibliotekach

http://quince.infragistics.com/Patterns/New-Item% 20Row.aspx http://www.welie.com/patterns/showPattern.php?patternID=list-entry-view

244

I

Rozdział 5. Listy

n n n n n n n n n *

R O ZD ZIA Ł 6.

Jak to się robi: czynności i polecenia

Rozdział ten poświęcony jest „czasownikowym" funkcjom interfejsu. Na wcześniejszych stronach była mowa o ogólnej strukturze, przepływie wzroku, układzie graficznym i „rzeczownikach", czyli oknach, tekście, linkach oraz statycznych elementach stron. W rozdziale 7. o rzeczowni­ kach będzie jeszcze więcej, a w rozdziale 8. zajmiemy się standardowymi (oraz kilkoma mniej typowymi) kontrolkami i widgetami, tj. obiektam i pozw alającym i użytkow nikom podawać informacje i w ybierać stany interfejsu, które jednak same nie robią zbyt wiele. Opowiem tu zatem o przyciskach i menu. Brzmi porywająco, czyż nie? Chyba nieszczególnie. Interfejsy komputerowe wykorzystywały paski menu już w pierwszym komputerze M acintosh, a przyciski w czasach jeszcze bardziej zamierzchłych. To, co uznajem y za „przyciski", to z kolei graficzne odwzorowanie elemen­ tów mechanicznych, które przecież istnieją znacznie dłużej niż interfejsy graficzne. M am y tu zatem do czynienia z długą historią i wieloma dobrym i technikami. Standardowe wytyczne stylistyczne platform w rodzaju W indows i M acintosh na ogół w ystarczą do utwo­ rzenia funkcjonującego interfejsu. Kiedy użytkownicy poruszają się po menu i szukają przy­ cisków, na ogół polegają na w yuczonych konwencjach. W ypada zatem tych konwencji prze­ strzegać naw et wtedy, kiedy w ydają się zbyt ograniczające lub wręcz nonsensowne. Pow szechnie spotykane funkcje w rodzaju wycinania, kopiowania i wklejania również mogą się pochwalić wieloletnią tradycją — gdyby wymyślono je dziś, prawdopodobnie wyglądałyby inaczej, choć naw et um iarkowanie doświadczeni użytkow nicy kom puterów w iedzą, „jak to działa". To samo odnosi się do m enu kontekstow ych, których jed n i użytkownicy oczekują właściwie wszędzie, a inni w ogóle nie m yślą o korzystaniu z nich. C zynność przeciągania i upuszczania nie jest już tak mocno spętana historycznymi naleciałościami, ale i tak musi koniecznie przystaw ać do intuicyjnych oczekiwań użytkow ników , żeby m ożliwe było za­ chowanie iluzji bezpośredniej manipulacji. Mając wzgląd na powyższe, możesz zrobić naprawdę dużo, żeby Twój interfejs był i ciekawszy, i łatwiejszy w użyciu. Twoim celem powinno być danie użytkownikowi dostępu do odpo­ wiednich czynności, prawidłowe ich oznaczenie, odpowiednie ułatwienie ich znajdowania oraz wykonywania całych ich serii. M ożna to w ykonać na kilka ciekawych sposobów. Na początek zadem onstruję popularne metody przedstawiania użytkownikom czynności.

245

Przyciski Przyciski umieszczane są bezpośrednio w interfejsie, toteż użytkow nik nie m usi w yko­ nyw ać żadnych dodatkowych czynności, żeby je zobaczyć; ponadto są pogrupow ane se­ mantycznie (o czym przeczytasz w opisie wzorca Grupy Przycisków). Są duże, czytelne, intuicyjnie zrozumiałe i niezwykle łatwe w użyciu nawet dla zupełnie niedoświadczonych użytkow ników . Zajm ują jednak dużo miejsca, w odróżnieniu od pasków m enu i menu rozwijanych. Na stronach docelowych w rodzaju stron głównych serwisów korporacyjnych i stron produktów wezwania do działania zwykle przedstawiane są w postaci występujących pojedynczo, wielkich i przyciągających w zrok przycisków, co idealnie pasuje do ich celu, jakim jest przyciągnięcie uwagi i zachęcenie do kliknięcia. Paski menu Paski menu są standardem w większości aplikacji kom puterowych. Zazwyczaj znajdują się w nich w szystkie czynności, które można w danej aplikacji w ykonać, i są ułożone tak przewidywalnie, jak to możliwe (np. w kolejności Plik, Edytuj, Widok). Niektóre czynności wpływają na działanie całej aplikacji, a inne odnoszą się do wybranych elementów. W pa­ skach menu często powtarzają się funkcje istniejące już w menu kontekstowych i paskach narzędzi, ponieważ dzięki temu lepszy jest dostęp do nich — czytniki ekranowe mogą odczytywać ich nazwy, użytkownicy mogą ich używać za pośrednictwem skrótów itd. (Same wymagania dostępności wymuszają stosowanie pasków menu w wielu aplikacjach). Pa­ ski menu pojaw iają się w niektórych aplikacjach internetowych, zw łaszcza w programach produkcyjnych, graficznych i innych, których interfejsy przypom inają interfejsy aplikacji komputerowych. M enu kontekstowe M enu kontekstowe otwiera się kliknięciem prawego przycisku myszy lub po wykonaniu jakiegoś podobnego gestu na panelu albo elemencie. Zazwyczaj znajdują się w nich stan­ dardowe, dobrane stosow nie do kontekstu polecenia, a nie wszystkie czynności, na które interfejs pozwala. Takie menu powinno być krótkie. Rozwijane menu Takie menu otwiera się kliknięciem kontrolki w rodzaju pola wyboru. Rozwijane menu służą jednak do w ybierania spomiędzy dostępnych w artości w form ularzu, a nie do wykonywania czynności. Unikaj stosowania ich tam, gdzie w ydaje się polecenia. Paski narzędzi Typowy pasek narzędzi jest długim, wąskim rzędem ikonek. Często znajdują się na nich inne rodzaje przycisków i kontrolek, w rodzaju pól tekstowych i Rozwijanych Selektorów (rozdział 8.). Paski narzędzi z ikonkam i spraw dzają się najlepiej, kiedy przedstaw ione w nich czynności zobrazow ane są w sposób intuicyjnie zrozumiały. Kiedy czynność ko­ niecznie trzeba opisać słowami, możesz skorzystać z innego rodzaju kontrolek, w rodzaju pól w yboru lub przycisków oznaczonych tekstem. Niezrozumiałe ikonki są dezorientują­ ce i zmniejszają używ alność interfejsu. Odnośniki Przycisk nie musi być prostokątem z obwódką. Dzięki internetowi wszyscy wiedzą, że kolo­ rowy (zwłaszcza niebieski) tekst zazwyczaj oznacza klikalny link. W tej części interfejsu, gdzie użytkownik spodziewa się znaleźć przyciski poleceń, ale do której nie chcesz szczegól­ nie przyciągać uwagi albo nie chcesz zaśm iecać nią całej strony, m ożesz um ieścić prosty,

246

|

Rozdział 6. Jak to się robi: czynności i polecenia

klikalny tekst polecenia zam iast klasycznego przycisku. Tekst po najechaniu kursorem pow inien zostać podkreślony, a sam kształt kursora też m usi się zmienić, żeby wyraźnie dać do zrozum ienia, że można go kliknąć. Panele poleceń Są to w zasadzie menu, których użytkow nik nie musi rozwijać, gdyż zaw sze są widoczne w interfejsie. Są dobrym zamiennikiem pasków narzędzi, kiedy czynności lepiej opisać słownie niż graficznie. Więcej dowiesz się z opisu wzorca Panel Poleceń. Ukryte narzędzia Jeżeli chcesz przypisać dwie lub więcej czynności każdemu elementowi w interfejsie, ale nie chcesz zaśm iecać strony pow tarzającym i się przyciskami, możesz te dodatkow e przy­ ciski ukryć i sprawić, że pojaw ią się po najechaniu na nie myszą. (Jest to świetne w inter­ fejsach używ anych z myszą, ale nie działa zbyt dobrze z ekranami dotykowymi). W ięcej przeczytasz w opisie wzorca Ukryte Narzędzia. Są też czynności niewidoczne, których działanie nie jest objaśnione jakim ikolw iek oznacze­ niami. Użytkownicy muszą sami w iedzieć (lub odgadnąć), że takie czynności istnieją, chyba że gdzieś w interfejsie umieścisz pisemne instrukcje. N ie pom agają one zatem w ogóle w zapo­ znawaniu się z interfejsem, ponieważ użytkownik nie może się z ich pomocą w pełni zapoznać z tym, jakie czynności są możliwe. Przyciski, linki i menu można przejrzeć, więc z nich użyt­ kownik może się dowiedzieć o poleceniach. Podczas testów używalności nowego produktu wi­ działam, jak wielu użytkow ników przegląd ało system atycznie pasek m enu elem ent po elemencie, żeby zorientow ać się, co można w program ie zrobić. Tak czy inaczej opisane poniżej niew idoczne czynności muszą być przez interfejs uwzględ­ niane (przynajmniej jedna z nich). Ludzie często oczekują możliwości dwukrotnego klikania elementów. Tymczasem klawiatura (lub jej zamiennik) czasami jest jedynym narzędziem dla użytkow ników niedow idzących i takich, którzy nie m ogą korzystać z myszy. Dodatkowo za­ awansowani użytkownicy niektórych systemów operacyjnych i aplikacji w olą w pisyw ać po­ lecenia w pow łoce systemowej albo używ ać skrótów klawiszowych. Dwukrotne klikanie Użytkownicy — w zależności od kontekstu — postrzegają dwukrotne kliknięcie jako pole­ cenie otworzenia elementu lub wykonania jakiejk olw iek dom yślnej czynności zw iązanej z elementem. W edytorze graficznym dwukrotne kliknięcie elementu często oznacza otwo­ rzenie okna właściwości lub specjalistycznego edytora. Dwukrotne kliknięcie ikony apli­ kacji w większości systemów operacyjnych urucham ia tę aplikację. Dwukrotne kliknięcie tekstu może natom iast skutkować otworzeniem go w miejscu. Polecenia klawiszowe W większości aplikacji, ze względu na dostępność i w ydajność pracy, należy w prow adzić skróty klawiszowe, takie jak powszechnie znany Ctrl+S, który służy do zapisywania plików. N ajpopularniejsze platformy interfejsowe, w tym W indow s, M ac i niektóre środow iska Linuksa, mają własne w ytyczne, określające standardow e skróty klaw iszow e — zresztą dość podobne do siebie. Ponadto w nazw ach menu i kontrolek w ystępują często podkre­ ślone klawisze dostępu, które pozwalają na skorzystanie z tych elementów bez użycia myszy czy klawisza tabulatora. (Aby wydać polecenie, wystarczy przytrzymać klawisz Alt, a na­ stępnie nacisnąć klawisz z podkreśloną literą).

Poszerzanie horyzontów

| 247

Przeciągnij i upuść Przeciąganie i upuszczanie elementów zazwyczaj oznacza albo przeniesienie elementu, albo wykonanie danej czynności na innym elemencie. Innymi słowy, ktoś m oże przecią­ gnąć plik na ikonę aplikacji z myślą: „Otwórz ten plik w tej aplikacji". M oże też przecią­ gnąć plik z jednego miejsca w m enedżerze plików do innego, mając na celu przeniesienie go lub skopiowanie. Przeciąganie i upuszczanie jest wprawdzie zależne od kontekstu, ale niemal zaw sze chodzi o którąś z pow yższych dwóch czynności. Wpisywane polecenia Interfejsy oparte na wierszach poleceń na ogół pozwalają do swobodny dostęp do wszystkich funkcji czy to systemu, czy określonej aplikacji. Sam a uznaję takie rodzaje p oleceń za „niew idoczne", ponieważ interfejsy tego rodzaju zazw yczaj sam e n ie objaśniają, jakie polecenia można wydać. N ie są łatw e w użyciu, lecz obeznanemu użytkow nikow i dają sporo możliwości — za pom ocą jednego dobrze skonstruowanego polecenia można osią­ gnąć bardzo dużo. Wiersze poleceń są zatem najlepsze dla użytkowników zainteresowanych zdobyciem bardzo dobrej znajomości programu.

Poszerzanie horyzontów Aplikacje oparte na pewnych idiomach pozwalają projektować niestandardowe przyciski i kon­ trolki. Użytkownicy edytorów graficznych, odtwarzaczy multimediów, aplikacji specjalistycz­ nych, komunikatorów, gier oraz wszystkich innych programów, które mają być zabawne i intere­ sujące, mogą być wystarczająco ciekawi, by zainteresow ać się działaniem nietypowych, lecz dobrze zaprojektow anych komponentów interfejsu. W jakim zakresie można puścić w odze wyobraźni? Zastanów się nad elementami z pierwszej listy poprzedniego podrozdziału. Z widzialnych przycisków i m enu łatw iej się korzysta niż z niew idocznych poleceń, takich jak skróty klawiszowe. Uogólniając, polecenia m ogą przyj­ m ow ać formę: • klikalnych ikonek, • klikalnego tekstu, który nie wygląda jak przycisk, • elementu, który reaguje, kiedy najedzie się na niego kursorem, • obiektu wyglądającego tak, jakby użytkow nik m ógł nim manipulować, • elementu umieszczonego w dowolnym miejscu na ekranie. Ile jednak można ich utworzyć, aby interfejs nie stał się tak skomplikowany, że stracimy w nim rozeznanie? Przyjrzyjmy się przykładowi w ziętemu z życia: aplikacji GarageBand (rysunek 6.1). W tym interfejsie dzieje się dość dużo. Niektóre obiekty, takie jak strzałki paska przewijania i kon­ trolki odtwarzania — przewiń wstecz, odtwórz, przew iń naprzód itd. — ewidentnie są przy­ ciskami. Znajdziesz tu także kilka suwaków i pokręteł. Spójrz jednak na praw y kraniec okna, w miejsce między czerwoną linią a krawędzią o faktu­ rze drewna. Zastanów się teraz, które elementy interfejsu w yglądają na klikalne? Dlaczego? Na rysunku 6.2 znajdziesz ściągawkę (a jeśli znasz już GarageBand, przetrwaj jakoś dalszą część podrozdziału).

248

|

Rozdział 6. Jak to się robi: czynności i polecenia

Rysunek 6.1. GarageBand

Rysunek 6.2. Polecenia w GarageBand Na rysunku 6.2 widać, które elementy interfejsu służą do w ykonyw ania czynności. Z pewno­ ścią sam nie mógłbyś dociec, co wszystkie z nich robią, jako że w tej książce nie ma chmurek podpowiedzi, zmian kursora po najechaniu na elem ent ani m ożliwości eksperymentowania.

Poszerzanie horyzontów

| 249

Czy jednak domyśliłeś się, które z tych elementów można kliknąć i którym i z nich można się posłużyć? Podejrzewam, że tak. W jaki sposób? Prawdopodobnie wiesz, że w interfejsach, takich jak ten, istnieje wiele m oż­ liwości bezpośredniej manipulacji, więc m ożesz założyć, że każdy wyróżniający się element wizualny do czegoś służy. Pewnie wiesz, że suwaki, takie jak suwak głośności u dołu, czasami m iew ają przyciski do „przeskakiw ania" z jednego krańca do drugiego; sam suw ak głośności m ożesz kojarzyć z iTunes. Być m oże odgadłeś, że m aleńkie kwadraciki bywają przyciskami służącymi często do wydawania poleceń zw iązanych z wyglądem elementów — wiele takich można znaleźć w program ach W ord i Pow erPoint. Być m oże pionow ą linię z odwróconym trójkątem u góry — czy to ruchomą, czy nie — w idyw ałeś w innych kontekstach. Czy tutaj trójkąt nie wydawał się jednak ruchomy? Kiedy jakiś obiekt wygląda tak, jakby można było z jego pom ocą coś zrobić, np. kliknąć lub przeciągnąć, to mówimy, że aforduje czynność. Typowe „w ystające" przyciski na tej zasadzie afordują naciśnięcie; suwak aforduje przeciągnięcie; pole tekstowe aforduje w pisanie w nim czegoś; niebieski, podkreślony wyraz aforduje kliknięcie go. W szystko, co reaguje na kursor aforduje coś, naw et jeśli sam nie wiesz, co. Na rysunku 6.2 widzimy afordancje interfejsu GarageBand. To bardzo w ażne pojęcie. Interfej­ sy programów nie dają użytkownikowi zbyt wielu sensorycznych w skazów ek dotyczących tego, na co można wpłynąć, albo czego można użyć: to elementy graficzne są najważniejszy­ mi wskazówkami, a z resztą można się zapoznać, najeżdżając m yszą na pozostałe elementy. Używaj tych elementów do wyrazistego wskazywania afordancji. Oto kilka konkretnych porad projektowych: • Kiedy tylko m asz taką m ożliw ość, działaj w edług konwencji. Wykorzystuj koncepcje UI i kontrolki w rodzaju suwaków głośności, które ludzie już znają. • Zastosuj pseudotrójw ym iarow e cieniowanie i zw ykłe cienie, żeby uwypuklić elementy. • Kiedy kursor znajduje się nad elem entam i, które m ożna kliknąć lub przeciągnąć, zmień jego kształt, np. w palec lub rączkę. • Za pom ocą chm urek podpow iedzi lub innego rodzaju tekstu opisow ego w ytłum acz użytkownikowi, do czego służy znajd ujący się pod kursorem obiekt. Jeżeli ich nie po­ trzebujesz, to świetnie — Twój projekt jest zrozum iały sam z siebie. Tym niemniej wielu użytkow ników i tak oczekuje chmurek podpowiedzi.

Wzorce Pierwsze opisane w tym rozdziale w zorce dotyczą trzech spośród wielu sposobów przed­ stawiania czynności. Kiedy zaczniesz bezw iednie um ieszczać polecenia w pasku m enu lub rozwijanych menu aplikacji, zatrzymaj się na chwilę i rozważ wykorzystanie poniższych wzorców. 1 . Grupy Przycisków 2 . Ukryte Narzędzia 3. Panel Poleceń

250

|

Rozdział 6. Jak to się robi: czynności i polecenia

W zorzec W yszczególniony Przycisk „Z akoń cz" ulepsza najważniejszy przycisk w ielu stron i okien dialogowych. Inteligentne Elementy M enu to technika, która uspraw nia niektóre ze znajdujących się w menu czynności; to bardzo ogólny wzorzec, który przydaje się przy wielu rodzajach menu, przycisków i odnośników. 4. W yszczególniony Przycisk „Zakończ" 5. Inteligentne Elementy M enu Byłoby najlepiej, gdyby zapoczątkow ywane przez użytkow ników czynności były natych­ m iast w ykonywane — tak jednak nie jest. W Podglądzie użytkow nik może zobaczyć efekty czasochłonnej czynności. Wskaźnik Postępu to znana metoda informowania użytkownika o tym, co właściwie dzieje się podczas wykonywania polecenia. Odwoływalność odnosi się natomiast do możliw ości zatrzymania wykonywania polecenia na żądanie użytkownika. 6. Podgląd 7. W skaźnik Postępu 8. Odwoływalność Ostatnie trzy w zorce — W ielopoziom ow e Cofanie C zynności, H istoria Poleceń i M akra — odnoszą się do sekwencji poleceń. Te trzy pow iązane ze sobą wzorce przydają się najbardziej w złożonych aplikacjach, a zw łaszcza takich, z którymi użytkow nicy gotowi są dobrze się zapoznać i z których zam ierzają intensywnie korzystać. (Z tego powodu wzorce te omówimy na przykładzie kompleksowego oprogramowania w rodzaju systemu Linux i programów Photoshop, W ord i M ATLAB). Licz się z tym, że wdrożenie tych wzorców nie jest łatwe, gdyż aplikacja musi odczytywać polecenia użytkownika jako konkretne, jasno zdefiniow ane i niekiedy odwracalne czynności — w prow adzenie takiego modelu poznawczego do archi­ tektury istniejącego już programu jest niezw ykle trudne. Porady w spraw ie im plem entacji tych wzorców znajdziesz w opisie wzorca Polecenie (Command) w kanonicznym podręczniku Wzorce projektowe (Helion, 2010). Szczegółam i im plem entacji w tej książce nie będziem y się zajm ow ać. Pow róćm y teraz do projektowania interfejsów. 9. W ielopoziom ow e Cofanie Czynności 1 0 . Historia Poleceń 11. Makra

Grupy Przycisków

Rysunek 6.3. Nagłówek głównego ekranu Google Dokumenty; na rysunku zaznaczono cztery grupy przycisków

W zorce

|

251

C o z ro b ić

Powiązane polecenia zgrupuj w m ałych gromadach; wyrównaj je względem siebie i nadaj im podobną oprawę graficzną. Utwórz więcej takich grup, jeżeli dostępnych poleceń jest więcej niż trzy lub cztery. Kiedy używ ać

W interfejsie trzeba zam ieścić w iele poleceń. W szystkie pow inny być stale widoczne, przy czym należy je uporządkow ać graficznie tak, by ich układ nie w yglądał chaotycznie i łatwo można było rozeznać się w nim. Niektóre z poleceń są do siebie podobne — ich rezultaty są podobne bądź uzupełniają się w zajem nie albo semantyka ich działania jest podobna — toteż można je zebrać w grupy składające się z od dwóch do pięciu elementów. W Grupach Przycisków można zam ieszczać polecenia odnoszące się do działania całej apli­ kacji (w rodzaju Otwórz lub Preferencje), konkretnych elementów (Zapisz, Edycja, Usuń) oraz czegokolw iek innego. Jednak nie należy grupować poleceń odnoszących się do różnych za­ kresów działania. D laczego

Dzięki Grupom Przycisków interfejs jest bardziej zrozum iały. Odpowiednio rozplanowane grupy przycisków w yróżniają się ze złożonego layoutu, a ze względu na swoją wyrazistość od razu w skazują na dostępność przypisanych do nich poleceń, tak jakby mówiły: „Oto pole­ cenia, które możesz w tym kontekście w ydaw ać". W łaśnie tutaj znajdują zastosowanie praw a psychologii postaci om ówione w rozdziale 4. Bli­ skość wskazuje na pokrewieństwo — skoro przyciski znajdują się obok siebie, pewnie służą do wydawania podobnych poleceń. Tak samo jest z podobieństwem — przyciski o takich samych wymiarach wyglądają, jakby przystawały do siebie naw zajem . Kiedy n atom iast grupy przyci­ sków oddzielone są od siebie lub przyjm ują inny kształt, m ożna w nioskow ać, że nie są po­ wiązane. W ybór odpowiedniego rozmiaru i linii wyrównania dla Grupy Przycisków pozw ala na zasa­ dzie dopełnienia utw orzyć większy, złożony kształt. W jaki sposób

Zgromadź zestaw przycisków w grupie. Oznacz je krótkimi, lecz jednoznacznymi czasownikami bądź wyrażeniam i czasownikowymi. Nie używaj terminów żargonow ych, chyba że użyt­ kownik tego oczekuje. N ie grupuj przycisków odnoszących się do różnych elem entów lub zakresów działania — rozdziel je na osobne grupy. W szystkie przyciski z grupy pow inny m ieć jed nakow ą opraw ę graficzną: obwódki, kolor, szerokość i wysokość, styl ikonek, efekty dynamiczne itp. M ożesz je um ieścić w pojedynczej kolumnie lub w rzędzie, jeżeli nie są zbyt szerokie. (Potraktuj je jednak odmiennie, jeżeli któryś z przycisków oznacza „polecenie g łó w n e", jak np. przycisk Wyślij w formularzu. Polecenie główne to takie, które przew ażająca w iększość użytkowników powinna wydać, albo chociaż spodziewasz się, że wyda. Zaznacz ten przycisk graficznie, żeby wyróżniał się spośród reszty).

252

|

Rozdział 6. Jak to się robi: czynności i polecenia

Jeżeli wszystkie przyciski w grupie oddziałują na ten sam obiekt lub obiekty, zam ieść Grupę Przycisków po lewej lub prawej stronie obiektu. Zam iast tego możesz je um ieścić pod obiek­ tami, ale użytkownicy często w ogóle nie kierują w zroku na obszar znajdujący się pod kom­ pleksowymi elementami interfejsu w rodzaju wielokolumnowych list i dendrogram ów , a co za tym idzie — mogą w ogóle nie zwrócić uwagi na te przyciski. Aby zwiększyć ich widoczność, zadbaj o czystość i porządek całego interfejsu. Jeżeli utworzyłeś projekt, w którym umieszczenie przycisków u dołu wydaje się bardziej odpowiednie, przeprowadź test używalności i zwery­ fikuj swoje przekonania. Kiedy przycisków jest w ystarczająco dużo i oznaczone są ikonkami, m ożesz je też um ieścić w pasku narzędzi lub podobnym elemencie u góry strony. Gdy używasz Grup Przycisków, starasz się uniknąć m ętliku przycisków i odnośników oraz prezentowania długich list nierozróżnialnych poleceń. W zorzec ten pozwoli opracować mi­ niaturow ą hierarchię graficzną poleceń, żeby użytkow nik m ógł od razu zobaczyć, co jest po­ wiązane i co jest ważne. Przykłady

Standardowe narzędzia w edytorach W YSIW YG często są pogrupow ane w edług funkcji. Przykłady program ów W ord i Flash Builder w idoczne na rysunku 6.4 ukazują kilka typo­ wych grup narzędzi, które ułatw iają rozpoznanie ich funkcji.

Rysunek 6.4. Microsoft Word i Adobe Flash Builder Na rysunku 6.5 widnieje przykład iTunes, gdzie Grupy Przycisków znajdują się w e w szyst­ kich czterech rogach głównego okna, a w pasku tytułowym w idnieją standardowe przyciski do zamykania i minimalizacji. Kiedy użytkow nik przegląda M usic Store, na trzecim (niewi­ docznym tutaj) panelu, wyglądającym jak strona internetowa, znajduje się jeszcze więcej po­ leceń — w iele z nich w postaci odnośników — oraz przycisk odnoszący się do każdego utworu w tabeli. W interfejsie tym jest co najmniej trzynaście przycisków , n ie w liczam tu czterech przycisków przewijania oraz trzech klikalnych nagłówków tabel. Użytkownik ma wiele możliwości działania, ale za sprawą starannie sformułowanych w arstw graficznej i sem antycznej interfejs nie wy­ daje się przytłaczający.

W zorce

| 253

Rysunek 6.5. iTunes W innych bibliotekach

http://quince.infragistics.com/Patterns/Button% 20Groups.aspx

Ukryte Narzędzia d j | | go o gle New! Google Earth 1.1 for Android lets you tour the oceans. Runs on most 2 .1 + devices. h tt p : // b it . ly / 9 jL O W d a b o u t 1 h o u r a g o via bitly

B

C N N Dr. @sanjayguptaCNN and his producer (aiDanielleCNN are en route to ^Pakistan to cover the floods. Follow them for on the ground updates. t about 1 hour ago via txt Reply Retweet

E®® MR

n prnew s Telling T h e ir Stories h tt p : // n . p r /b S T A d o via @ n p r p ic tu re s h o w a b o u t 2 h o u rs ag o via tw itterfeed

n prnew s In July, U.S. Home Sales Dropped To 15-Year Low, £

Mat-I l c « w

n f Paaltfirc P an n rt hitrv '________________________________

Rysunek 6.6. Twitter Co zrobić

Um ieść przyciski i inne polecenia obok elementów, na które oddziałują, lecz ukrywaj je do czasu, aż użytkow nik najedzie na nie kursorem. Kiedy używ ać

W interfejsie trzeba zam ieścić w iele poleceń. Chcesz, by był przejrzysty i uporządkow any, ale gdzieś musisz um ieścić te polecenia — najlepiej na elementach, na które oddziałują, lub tuż

254

|

Rozdział 6. Jak to się robi: czynności i polecenia

obok nich. W yznaczyłeś już obszar, na którym te polecenia mają być w ykonywane, ale gdyby stosowne przyciski i odnośniki miały być w idoczne przez cały czas, to interfejs byłby zbyt zabałaganiony. W interfejsach opartych na listach, w których wyświetlonych jest wiele drobnych elementów — zdjęć, wiadomości, rezultatów wyszukiwania itp. — Ukrytych N arzędzi używa się po­ wszechnie. Użytkownik może w ydać szereg poleceń odnoszących się do każdego z nich. Interfejs nie jest przeznaczony do obsługiwania przy użyciu palców, jak to się dzieje na urzą­ dzeniach z panelami dotykowymi, i masz pewność, że niem al w szyscy użytkownicy będą korzystać z myszy. (Jeżeli tworzysz interfejs dla strony internetowej, zastanów się, czy pow i­ nien działać inaczej w zależności od tego, czy korzysta się z niego na urządzeniu z ekranem dotykowym, czy na komputerze stacjonalnym lub laptopie). D laczego

Ukryte Narzędzia ujawniają się we właściwym miejscu i czasie, czyli tam, gdzie są potrzebne. W innych sytuacjach są ukryte, dzięki czemu interfejs pozostaje jasny i przejrzysty. Pojawiają się, kiedy użytkow nik sam jej wywołuje gestem, przez co zw racają na siebie uwagę. M enu kontekstowe (otwierane kliknięciem prawego przycisku myszy), rozwijane menu oraz paski menu także przystają do tych kryteriów, lecz w niektórych interfejsach odkrycie ich możliwości bywa problematyczne — najlepiej sprawdzają się w tradycyjnych aplikacjach komputerowych, a gorzej w interfejsach internetowych. (Czasami m ogą naw et nie przysta­ w ać do charakteru niektórych aplikacji komputerowych). Ukryte Narzędzia łatwiej znaleźć, ponieważ gest pozw alający na ich ujaw nienie — najechanie myszą na dany elem ent — jest prosty i intuicyjny. Niestety, Ukryte Narzędzia nie działają zbyt dobrze na urządzeniach dotykowych. Najechanie kursorem na coś jest łatw ą i naturalną czynnością, która prowadzi do odkrywania nowych funkcji. Tymczasem użytkow nik korzystający z panelu dotykowego może co najwyżej bez­ pośrednio nacisnąć obszar polecenia, co musi być z jego strony intencjonalne. N ie sprzyja to odkrywaniu możliwości interfejsu. W jaki sposób

Przydziel każdemu elementowi lub interaktywnem u obszarowi wystarczająco dużo miejsca, by w yśw ietlić dostępne polecenia. Ukryj te, które nadm iernie zaśm iecają interfejs, i ujawniaj je tylko wtedy, kiedy użytkow nik najeżdża na nie kursorem. Reakcja na najechanie kursorem pow inna by ć natychm iastow a. N ie używ aj Animowanych Przejść — ujawniaj narzędzia od razu i zaraz je ukrywaj, kiedy kursor się oddala. Nigdy też nie powiększaj obszaru interaktyw nego ani nie zm ieniaj układu strony w odpowiedzi na ruch kursora. Chodzi o to, by najechanie kursorem odnosiło m ożliw ie szybki skutek, a użyt­ kownik mógł bez problemu skorzystać z potrzebnych mu narzędzi. Jeżeli obszar interaktywny jest elementem listy, możesz go wyróżnić, zm ieniając kolor tła lub tworząc w okół niego obwódkę. Sam o u jaw nienie narzędzia przyciąga w zrok użytkow nika, a podśw ietlenie elementu dodatkowo wzmaga ten efekt. Rozważ wykorzystanie Ukrytych Narzędzi zamiast menu rozwijanych, kontekstowych, Paneli Poleceń, Wkładek z przyciskami albo powtarzających się przy każdym elemencie przycisków.

W zorce

| 255

P rz y k ła d y

Na serwisie Grooveshark Ukryte Narzędzia służą do w ydaw ania poleceń zw iązanych z po­ szczególnymi utworami (rysunek 6.7). Zam iast tego projektant mógłby zdecydow ać się na jednoczesne wyświetlanie w szystkich narzędzi — co w praw dzie zw iększyłoby tłok na stro­ nie, ale nie tragicznie — albo na przeniesienie narzędzi do paska u góry, skąd polecenia wy­ dawane byłyby w odniesieniu do zaznaczonych w liście elementów. Takie rozwiązanie było­ by jednak zbyt skomplikowane dla projektanta, program isty, a zwłaszcza użytkownika, który m usiałby dom yślić się, jak zaznaczyć utwór, a następnie skojarzyć logicznie i przestrzennie relację między wybranymi utworami a narzędziami znajdującymi się nad tabelą. Tymczasem Ukryte Narzędzia są zrozum iałe same przez się i dostępne tuż pod ręką.

Rysunek 6.7. Grooveshark Zastosowanie wzorca Ukryte Narzędzia pozwala na uzyskanie bardziej przejrzystego inter­ fejsu, lecz dzieje się to kosztem tego, że użytkow nik nie w idzi od razu dostępnych mu pole­ ceń. Strona rezultatów wyszukiwania na Zillow (rysunek 6.8) jest przykładem kompromisu: narzędzia są standardowo wytłumione, a ujawniają się w całej krasie, kiedy użytkownik najeż­ dża na nie kursorem. W niektórych im plementacjach Ukryte Narzędzia przyjm ują formę paneli z przyciskam i lub suwakami. Przypomina to wzorzec Rozwijany Selektor z rozdziału 8., z tym że U kryte N a­ rzędzia służą do wydawania poleceń, a nie do określania ustawień. Na rysunku 6.9 widnieje przykład serwisu YouTube, gdzie po n ajechaniu kursorem na ikonkę w odtwarzaczu na ekranie pojawia się suwak głośności.

256

|

Rozdział 6. Jak to się robi: czynności i polecenia

Rysunek 6.8. Zillow

i Rysunek 6.9. Odtwarzacz YouTube W innych bibliotekach

http://patternry.com/p=hover-reveal-tools/ http://www.flickr.com/photos/designingwebinterfaces/tags/hoverrevealtools/

Panel Poleceń

Rysunek 6.10. iPhoto

W zorce

| 257

C o z ro b ić

Zamiast używać menu, przedstaw grupę powiązanych czynności na dobrze ustrukturyzowanym i zaw sze widocznym panelu. Kiedy używ ać

Masz listę elementów i szereg czynności, które m ożna na każdym z nich przeprow adzić. Czynności jest zbyt wiele, by ukazać wszystkie przy każdym elem encie, oraz za dużo, by je przedstaw ić jako Ukryte Narzędzia. M ógłbyś je um ieścić w m enu, ale uw ażasz, że stosun­ kowo trudno byłoby się zapoznaw ać z nimi w menu, albo w interfejsie w ogóle nie ma paska menu. Podobnie z menu kontekstowymi, które nie są wystarczająco widoczne. Użytkownicy mogą naw et nie wiedzieć, że interfejs uwzględnia menu kontekstowe. Być może zestaw możliw ych czynności jest zbyt skomplikowany na m ożliw ości menu. M enu n ajlepiej służą do przed staw iania płaskich list poleceń (jako że m enu kaskadujące byw ają zbyt trudne w obsłudze dla niektórych użytkow ników ) w bardzo prosty, linearny sposób, z jedną linijką tekstu przypadającą na element. Jeżeli polecenia trzeba zgrupować, a zwłaszcza wtedy, kiedy powstałe w ten sposób grupy nie przystawałyby do standardowego nazewnictwa pierw szopoziom ow ych elem entów m enu (tj. Plik, Edycja, W idok, N arzędzia itp.), to m oże Ci zależeć na wybraniu innego sposobu ich prezentowania. Elementy wykorzystywane po wdrożeniu tego wzorca mogą zajmować dużo miejsca, więc jest to zwykle nie najlepszy w ybór przy projektowaniu z m yślą o małych urządzeniach. D laczego

Lepiej korzystać z Paneli Poleceń niż z menu i przycisków przypisanych do elem entów z trzech powodów: widoczności, dostępnego miejsca i swobody prezentacji. Rozmieszczając polecenia na obszarze głów nego interfejsu, zam iast u kryw ać je w tradycyj­ nych menu, sprawiasz, że użytkow nik w idzi je już na pierw szy rzu t oka. Panele Poleceń są w zasadzie swego rodzaju menu, tyle że nie przyjmują postaci pasków menu, rozwijanych menu i menu kontekstowych. Użytkow nik nie musi podejm ow ać żadnych dodatkow ych czynności, żeby zapoznać się z Panelem Poleceń, gdyż leży on tuż przed nim. Jest to szcze­ gólnie korzystne dla użytkow ników , którzy nie są zaznajom ieni z tradycyjnym modelem do­ kumentu i pasków menu. Istnieje naprawdę wiele sposobów organizowania komponentów interfejsu. Możesz je umieszczać w listach, siatkach, tabelach, hierarchiach — w p raktycznie dow olnych strukturach. Grupy Przycisków i tradycyjne menu są jednak zaledw ie listami (w dodatku niedługimi). Panel Po­ leceń daje natom iast tyle samo swobody rozmieszczania „czasow ników " w przestrzeni jak „rzeczow niki". W ykorzystaj ją mądrze! W jaki sposób

Umieszczenie Panelu Poleceń w interfejsie Zarezerwuj wolny obszar interfejsu dla Panelu Poleceń. Zam ieść go poniżej lub obok obiektu, na który ów panel ma oddziaływać. Takim obiektem zwykle jest lista, tabela lub dendrogram z wybieralnymi elementami, choć może to być również dokum ent w Obszarze Centralnym

258

|

Rozdział 6. Jak to się robi: czynności i polecenia

(rozdział 4.). Pamiętaj, że bliskość jest istotna. Jeżeli umieścisz Panel Poleceń zbyt daleko od obiektu, na który oddziałuje, użytkow nik może nie zobaczyć relacji między tymi dwoma komponentami. Panel powinien być zw yczajnym prostokątem . M oże być jednym z kilku paneli, np. Rucho­ mym Panelem (rozdział 4.), „szufladą" w M ac OS X albo naw et osobnym oknem . Jeżeli można go zamknąć, daj użytkownikowi możliwość łatwego otwarcia go na nowo, zwłaszcza jeśli elementy z Panelu Poleceń nie są pow ielone w menu. Bardzo często w różnych sytuacjach powinny pojaw iać się odmienne polecenia. Zawartość Panelu Poleceń może się zatem zmieniać w zależności od stanu, w jakim aplikacja się znajduje (np. czy dokument jest otwarty), elementów zaznaczonych w innych listach bądź jeszcze innych czynników. Panel Poleceń może być dynamiczny. Zmiany w jego obrębie nie będą przyciągać w zroku użytkownika — to dobrze.

Ustrukturyzow anie poleceń Następnie musisz określić strukturę wizualną zbioru poleceń. Oto kilka możliwości: • zw ykłe listy, • listy wielokolumnowe, • listy kategoryzowane, tak jak w e wcześniejszym przykładzie programu PowerPoint, • tabele lub siatki, • dendrogramy, • dowolna kombinacja powyższych, zawarta w jednym panelu. Jeżeli kategoryzujesz polecenia, podejdź do tego zadaniow o. Z grupuj je zgodnie z tym, co ludzie zam ierzają robić. Spróbuj jednak przedstaw ić je linearnie. W yobraź sobie, że odczytu­ jesz na głos polecenia komuś, kto nie widzi ekranu. Czy m ożesz to zrobić w logicznej kolej­ ności, od punktu w yjścia do końca? Pamiętaj, że właśnie w taki sposób niew idom y użytkow­ nik dosłownie usłyszy interfejs.

Oznaczenie poleceń Każde polecenie możesz oznaczyć tekstem, ikonkam i bądź jednym i drugim, w zależności od tego, jak najlepiej ukazać charakter czynności. Co więcej, jeśli skorzystasz z samych ikon, w efek­ cie powstanie typow y pasek narzędzi (lub paleta, jeżeli m asz do czynienia z aplikacją do tworzenia grafiki). Oznaczenia tekstowe w Panelu Poleceń mogą być dłuższe od tych, które umieszcza się w menu lub na przyciskach. M ożesz np. skorzystać z w ielow ierszow ych oznaczeń; n ie musisz się bardzo ograniczać ze słowami. Pam iętaj tylko, że dłuższe, bardziej rozległe opisy są lepsze dla sporadycznych i nowych użytkow ników , którzy muszą sobie przypom nieć sens poleceń lub dopiero nauczyć się go. Przeznaczenie dodatkowego miejsca na długie oznaczenia może jednak nie być najlepszym pomysłem w specjalizowanych interfejsach, z których korzystają przede wszystkim doświadczeni użytkow nicy. W takich przypadkach naw et zupełnie nowi użytkow nicy zaledwie rzucą okiem na długi ciąg tekstu.

W zorce

| 259

P rz y k ła d y

Przykład z rysunku 6.10 pochodzi z iPhoto. W innych menedżerach obrazów, takich jak Picasa (rysunek 6.11), znaleźć można podobne panele z poleceniam i odnoszącym i się do pojedyn­ czych obrazów. Porównaj złożoność Panelu Poleceń z aplikacji Picasa z prostotą iPhoto; obydwa odpowiadają na potrzeby swoich odbiorców (iPhoto przeznaczone je st dla początkujących, a Picasa dla nieco bardziej doświadczonych).

Rysunek 6.11. Picasa W menedżerze plików W indows XP (rysunek 6.12) widnieje katalog obrazów z dołączonym Panelem Poleceń, który Microsoft określa mianem „okienka zadań". Panel składa się ze zwijanych podpaneli (porównaj ze wzorcem Zw ijane Panele z rozdziału 4.), a w każdym znajd uje się um iarkowana liczba odpowiednich poleceń.

Rysunek 6.12. Menedżer plików Windows XP

260

|

Rozdział 6. Jak to się robi: czynności i polecenia

Zauważ, że pierwsze dwie sekcje, Zadania obrazów oraz Zadania plików i folderów , są sformu­ łowane całkowicie zadaniowo: polecenia u jęte są jako czasow niki (Wyświetl, Zamów i Drukuj) i odnoszą się do czynności, które użytkow nik praw dopodobnie będzie chciał w ykonać. Jed­ nakże w trzeciej sekcji panelu, Inne miejsca, znajduje się lista obiektów. W innych bibliotekach

W internecie wzorzec ten często określany jest mianem Task Pane („okienko zadań"), tak jak w następującym wzorcu z Infragistics: http://quince.infragistics.com/Patterns/Task% 20Pane.aspx

Wyszczególniony Przycisk „Zakończ"

O

W elcom e to the S o n g z a C om m unity! Fill out the form to create yo u r account and start m aking stations:

E m ail A d d re ss : U se rna m e: P a ssw o rd : C o n firm Pass:

C re a te Vly A c c o u n t

-

.

...

— «... f

•

Tv

L/V'J,' u ’ '

„

V

p

-h f

, * M V V A . - S.

Rysunek 6.13. Songza Co zrobić

Um ieść przycisk kończący transakcję tam, gdzie kończy się przepływ w zroku. Niech będzie duży i w yraźnie oznaczony. Kiedy używ ać

Z tego w zorca pow inieneś skorzystać, kiedy tylko musisz zamieścić w interfejsie przycisk w rodzaju Zakończ, Wyślij, OK lub Kontynuuj. M ów iąc ogólniej, w ostatnim kroku każdej transakcji — w rodzaju zakupów online — albo procesu definiowania ustaw ień znajdow ać pow inien się taki w yszczególniony przycisk. D laczego

Ostatni etap każdej czynności, jeżeli tylko ma być w oczywisty sposób postrzegany jako taki, pow inien dawać użytkow nikow i poczucie, że to już koniec. M usi być jasne, że transakcja zostanie zatwierdzona po kliknięciu tego przycisku . N iech u żytkow nik nie zastanaw ia się, czy jego działania odniosły skutek.

W zorce

|

261

W ywołanie takiego poczucia dopełnienia na ostatnim etapie to właściwy sens działania tego wzorca. Prawidłowe wykorzystanie go m usi opierać się na zasadach kom pozycji w yłożonych w rozdziale 4., czyli na hierarchii wizualnej, przepływ ie w zroku, grupowaniu i w yrównaniu. W jaki sposób

Utwórz przycisk, który rzeczywiście wygląda jak przycisk, a nie jak link. N iech wygląda tak, jak nakazują standardy platformy, choć m ożesz zdecydow ać się na wykorzystanie średniej wielkości lub dużego obrazu przycisku o w yrazistych kolorach i m ocno zarysowanych grani­ cach. Dzięki temu przycisk będzie się w yróżniać na stronie i nie zginie w natłoku innych elementów. Jeśli zaś chodzi o oznaczenie przycisków, pamiętaj, że tekst jest lepszy od grafiki. Przy tego rodzaju czynnościach łatwiej je zrozumieć, zw łaszcza że w iększość użytkow ników będzie szukać przycisku Gotowe lub Wyślij. Tekst takiego oznaczenia może być czasownikiem lub krótkim wyrażeniem czasow nikow ym , opisującym w zrozum iały dla użytkow nika sposób czynność, która nastąpi. Wyślij, Kup i Zatwierdź zmiany mają bardziej konkretny sens niż Gotowe, toteż czasami są bardziej efektywne pod względem komunikacyjnym. Um ieść przycisk tam, gdzie użytkow nik może się go spodziewać. Prześledź przepływ czyn­ ności na stronie, formularzu lub oknie dialogowym i um ieść przycisk na samym końcu ostat­ niego kroku. Prawdopodobnie będzie to sam dół lub prawy kraniec strony. Layout strony mo­ że standardowo przew idyw ać jakieś m iejsce dla takich przycisków (por. w zorzec Ramy Graficzne z rozdziału 4.); ich dom yślne p ołożenie m oże rów nież w ynikać ze standardów platformy. Jeśli tak jest, postąp zgodnie ze standardami. Tak czy inaczej, koniecznie zam ieść przycisk w pobliżu ostatniego pola tekstowego lub kon­ trolki, gdyż jeśli znajdzie się zbyt daleko, użytkow nik może nie zw rócić na niego uwagi tuż po zakończeniu pracy i zacząć szukać innych afordancji w ramach dociekania, co robić dalej. Jeżeli stanie się tak na stronie internetowej, użytkownik porzuci witrynę (a może nawet zakup), nie zdając sobie z tego sprawy.. Przykłady

Na rysunku 6.14 widnieje typowy formularz internetowy. Za sprawą samego projektu graficznego przyciski poleceń od razu rzucają się w oczy i naw et nie trzeba czytać ich oznaczeń. • Wyróżnia się kolor niebieski. Jest nasycony, kontrastuje z białym tłem oraz pasuje do niebie­ skich nagłówków. Biały lub jasnoszary przycisk z czarną obwódką zlałby się z formularzem. • Przyciski rzeczywiście zobrazowano przy użyciu odpowiedniej grafiki. Przyjmują za­ okrąglony czy też „pigułow aty" kształt i są dodatkowo opatrzone bardzo subtelnym cie­ niem, przez co odróżniają się od tła. Poza tym — są duże. • Obydwa przyciski umieszczone są bezpośrednio pod głów ną zaw artością formularzy. Zarówno przepływ czynności (użytkownik będzie pracował od góry do dołu), jak i wzroku kieruje użytkownika do tego przycisku. • Każdy przycisk jest obramowany pustą przestrzenią po lewej, prawej i pod nim. W w yszukiw arkach lotów na stronach głównych JetBlue, Kayak i Southw est (rysunek 6.15) znajdują się w yraziste przyciski. Są zbudow ane zgodnie z wytycznymi wzorca W yszczegól­ niony Przycisk „Zakończ". Podobnie jak w poprzednim przykład zie, te też są od razu w i­ doczne. Przycisk na stronie American Airlines z kolei ginie w formularzu. Jest zbyt mały, za

262

|

Rozdział 6. Jak to się robi: czynności i polecenia

Rysunek 6.14. OneHourCourses.com

Rysunek 6.15. JetBlue, Kayak i Southwest

W zorce

j

263

bardzo oddalony od końca formularza, znajduje się zbyt blisko krawędzi formularza oraz jest zbyt podobny do innych elementów, żeby się wyróżnić (rysunek 6.16). Ponadto oznaczenie GO (Dalej) nie jest równie skoncentrowane na zadaniu jak Szukaj lub Znajdź połączenia.

Book Flights Book: 0

? T View/Change R e se rv a tio n s j Flight C he ck-In

Flight O n ly Q Flight & Hotel

T r a v o lln g :@ R o u nd -T rip Q

¿ W ta g e ' “

O n e -W a y Multi-Citv

Fro m :

L o o ku p

Airports W ithir

0 Mites

Departure Date : ( Month

To:

L o o ku p

Airports Within f 0 Miles

X)

Return D a t e :

* ) ( Day

1

[:||S!S:|

( Month

T) [

Morning

P a s se n g e rs : ( 1

□

Loo kin g F o r Destination Id e a s 7

j

) ( Day

j

) fljjjj

Afte

Prom o tion C o d e :

: ) Adult (15-64)

[+] Child or S e r io r

^

P rom otior C o d e Irform atior

(M axim um o f 6 p a s s e n g e r s per reservation)

S h o w R e su lts By:

0

Price

&

Sc h e d u le

0

Sche d ule

[7] M o re S e a r c h O o t io r s

U

J

Rysunek 6.16. American Airlines W innych bibliotekach

W n iektórych bibliotekach m ożna znaleźć bardzo podobne w zorce, np. Prim ary A ction („Główna czynność") i Action Button („Przycisk czynności"). Luke W roblewski w książce Web Form Design omawia różnice między czynnościami głównymi a pobocznymi w formula­ rzach, takich jakie tutaj opisałam. http://w w w .w elie.com /pattem s/showPattem .php?pattem ID =action-button http://pattemry.com/p=primary-secondary-actions/ http://quince.infragistics.com/Patterns/Primary% 20Action.html

Inteligentne Elementy Menu 1

1 fit

M a il

Plik B 3 ? W f f S W idok

g g g g g g y i

C o fn ij U s u ń w ia d o m o ś ć

1

W iad om ość |

1

Rysunek 6.17. Mac Mail

264

Sk rz yn k a pocztow a

|

Rozdział 6. Jak to się robi: czynności i polecenia

C o z ro b ić

Zmieniaj oznaczenia menu dynamicznie, aby po wywołaniu dokładnie tłumaczyły, co robią. Kiedy używ ać

W interfejsie znajdują się menu, których polecenia odnoszą się do konkretnych dokumentów i elementów (np. Zamknij), albo działają różnie, w zależności od kontekstu (np. Cofnij). D laczego

Elem enty menu, które same tłumaczą swoje działanie, sprawiają, że interfejs jest intuicyjnie zrozum iały. Użytkownik nie musi przeryw ać pracy, żeby dociec, na który obiekt jego pole­ cenie wyw rze wpływ. Dzięki temu prawdopodobieństwo, że użytkow nik wykona niezam ie­ rzoną czynność — np. skasuje „Rozdział 8." zamiast „Przypisu 8." — staje się mniejsze. Wzorzec ten pozwala zatem na bezpieczną eksplorację. W jaki sposób

Za każdym razem, kiedy użytkow nik oddziałuje na wybrany obiekt (albo bieżący dokument, ostatnią odwoływ alną czynność itp.), zmień odnoszące się do niego elementy menu tak, by uwzględniały konkretny charakter czynności. Rzecz jasna, jeżeli żaden obiekt nie jest zazna­ czony, taki element menu powinien być zdezaktywowany, co dodatkowo wzmacnia skoja­ rzenie tego elementu z obiektem, na który oddziałuje. W zorzec ten można również zastosow ać do oznaczeń przycisków, linków oraz jakichkolwiek innych obiektów, które reprezentują „czasow niki". Co zrobić, kiedy zaznaczonych jest kilka obiektów? Trudno byłoby znaleźć jakąś dobrą wskazówkę, jako że wzorzec ten w ykorzystuje się zw ykle w odniesieniu do operacji w yko­ nyw anych na całych dokumentach i cofania czynności, ale m ożesz po prostu podać w ariant polecenia w liczbie mnogiej, np. Usuń zaznaczone obiekty. Przykłady

Na rysunku 6.18 widnieje jedno z menu Illustratora. Ostatni filtr, z jakiego użytkow nik sko­ rzystał, nosił nazw ę Dodaj cień. Program to zapamiętał, więc pierwsze dwie pozycje w menu oferują możliwość: (1) ponownego zastosow ania tego samego filtra oraz (2) zm iany ustawień filtra przed jego ponownym zastosowaniem. (Polecenie Dodaj cień... otwiera odpowiednie okno dialogowe). Istnieje tyle innych filtrów, które użytkow nik mógłby zastosować, że warto m ieć możliw ość przypomnienia sobie, który użyty był ostatni. Skróty klawiszowe natomiast idealnie ułatwiają wielokrotne stosowanie tego samego filtra.

Zaznacz Ej

Efektyjj Widok

Okno

Pomoc

| i~^

S I T

_

- 1 Krycie: Ustawień© efektów rastra dokumentu... Efekty programu Illustrator 3D Filtry SVG Konwertuj na kształt

i ► ► ►

Rysunek 6.18. Illustrator

W zorce

| 265

Powyższe dwa przykłady zaczerpnęłam z pasków menu aplikacji, ale om awiany wzorzec można także skutecznie zastosow ać do narzędzi odnoszących się do poszczególnych ele­ m entów, tak jak w przykładzie rozwijanego menu w Gm ail (rysunek 6.19). Polecenie Dodaj użytkownika (...) do listy kontaktów jest jaśniejsze i bardziej zrozum iałe niż standardowe Dodaj nadawcę do listy kontaktów.

Oto przykładowy e-mail 12:49 (0 min temu)

Maksymilian Gutowski [email protected] do mnie 0

Odpowiedz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras s faucibus sit amet, sollicitudin eget nisi. Sed placerat arcu sit amet fermentum velit a facilisis. Nunc facilisis ullamcorper augue a pelle libero, sed fermentum risus urna at velit. Maecenas ultrices elit ac imperdiet. Vestibulum condimentum sodales nulla et tristique. Nun imperdiet sem. Proin sit amet turpis mauris, a gravida eros.

Przekaż dalej Filtruj wiadomości tego typu Drukuj Dodaj użytkownika Maksymilian Gutowski do listy kontaktów Usuń tę wiadomość Zgłoś niewiarygodnego nadawcę

Kliknij i Odpowiedz lub Przekaż dalej

Pokaż oryginał Tekst wiadomości nieczytelny? Oznacz jako nieprzeczytane

Rysunek 6.19. Menu Gmail

Podgląd

Przykładowy slajd Z p o d ty tu łe m

4

1

rl >

26% © —Ç------ !------------ © E 3

Rysunek 6.20. Zakładka ustawień drukowania w programie PowerPoint

266

|

Rozdział 6. Jak to się robi: czynności i polecenia

C o z ro b ić

Pokaż użytkownikowi podgląd lub streszczenie tego, co się stanie, kiedy wykona jakąś czynność. Kiedy używ ać

Użytkownik ma w ykonać „pow ażną" czynność w rodzaju otworzenia dużego pliku, w ydru­ kowania dziesięciostronicowego dokumentu, wysłania formularza, którego wypełnienie za­ jęło dłuższą chwilę, albo zatw ierdzenie zakupu online. Użytkownik chce się upewnić, że zro­ bił wszystko dobrze. Błędy wiązałyby się ze stratą czasu lub jakim ś innym kosztem. U żytkow nik może też przygotow yw ać się do przeprowadzenia m odyfikacji graficznej, której rezultat trudno przewidzieć, w rodzaju nałożenia filtra na zd jęcie. Chce w iedzieć z w yprze­ dzeniem, czy efekt będzie odpowiedni. D laczego

Podglądy pozw alają uniknąć błędów. Użytkownik m ógł zrobić literówkę lub wykonać jakąś czynność (np. zakupić niew łaściw y produkt w sieci), ponieważ coś źle zrozum iał. Pokazując mu streszczenie lub graficzny opis tego, co się stanie, dajesz mu m ożliw ość cofnięcia i po­ prawienia błędów. Podgląd może także pomóc w objaśnieniu działania samej aplikacji. Jeżeli ktoś nigdy wcze­ śniej nie wydał danego polecenia albo nie wie, jaki to przyniesie skutek w zaistniałej sytuacji, z podglądu dowie się więcej niż z dokumentacji — użytkow nik zapoznaje się z poleceniem w e w łaściwym miejscu i w łaściwym czasie. W jaki sposób

Bezpośrednio przed wydaniem polecenia przez użytkownika podaj mu informacje, z których uzyska najjaśniejszy obraz tego, co się stanie. Jeżeli jest to podgląd wydruku, pokaż, jak strona będzie w yglądać na arkuszu o wybranym formacie. Jeżeli chodzi o czynność w ykonywaną na obrazie, pokaż podgląd rezultatu. Jeżeli jest to transakcja, wyświetl wszystkie znane syste­ mowi dane o tej transakcji. Pokaż to, co najważniejsze — ani mniej, ani więcej. Pozwól użytkownikowi zatw ierdzić czynność z poziomu podglądu. N ie ma sensu kazać mu zam knąć podgląd lub przejść w inne miejsce. Daj też użytkow nikow i jakąś m ożliw ość anulowania czynności. Jeżeli popraw iając podane w cześniej informacje, będzie mógł doprowadzić transakcję do właściwego końca, pozwól mu na to i um ieść przyciski Zmień obok m odyfikow alnych elem entów . W n iektórych kreato­ rach i przy innych linearnych procesach może to być po prostu kwestia cofnięcia się o kilka kroków. Przykłady

Picasa pozwala użytkownikowi nałożyć na zdjęcie jeden z kilku filtrów (rysunek 6.21). Z każdym z tych filtrów pow iązana jest m iniaturka podglądowa — u żytkow nik dostaje to, co widzi. Użytkownika może czekać konieczność poeksperymentowania z w ielom a podobnym i filtrami przed znalezieniem takiego, przy użyciu którego uzyska pożądany rezultat, toteż potrzebuje możliwości błyskawicznego przejrzenia efektów. To standardowy przykład podglądu. (Podobne znajdziesz w Photoshopie i innych programach graficznych).

W zorce

| 267

Rysunek 6.21. Picasa Kreatory produktów i narzędzia personalizacyjne online często dem onstrują użytkownikowi jego dokonania w Podglądzie. Spersonalizowana karta Starbucks (rysunek 6.22) jest tego do­ brym przykładem: w widocznym tutaj kroku podglądu użytkow nik może w rócić na wcze­ śniejszy etap i zm odyfikować ustawienia, zatw ierd zić utw orzenie karty, poprosić o pom oc albo zupełnie zrezygnow ać z transakcji.

HERE’S YOUR NEWCARD IF tO U 'RE HAPPY WITH IT, SIMPLY DUCK THE " M E ir EUTTOU FO PROCEED 10 CHECKOUT TO EDIT, CLICK Oil »NY OF THE PREVIOUS SIEPS ABOVE.

|

|

I agree th a t my Card will be subject to a review and may be declined. Please read our Personalization Policy for more details.

Rysunek 6.22. Personalizacja karty Starbucks

268

|

Rozdział 6. Jak to się robi: czynności i polecenia

W innych bibliotekach

http://quince.infragistics.com/Patterns/Preview.aspx http://ui-patterns.com/pattems/LivePreview Bill Scott i Theresa Neil w książce Designing Web Interfaces również opisują ten wzorzec. W zorzec Live Preview różni się tym, że podgląd jest aktualizowany na bieżąco.

Wskaźnik Postępu

Rysunek 6.23. Okno kopiowania Mac OS Co zrobić

Pokaż użytkownikowi, jaka część długotrwałej czynności została już wykonana. Kiedy używ ać

Długotrwała czynność przeryw a ogólne funkcjonow anie interfejsu lub w ykonyw ana jest w tle przez czas dłuższy niż dwie sekundy. D laczego

Użytkownicy niecierpliw ią się, kiedy interfejs jest nieaktywny. Jeśli naw et kursor zm ienia się w ikonkę zegarka lub klepsydry (a powinien, jeżeli cały interfejs je st chw ilow o zablokow any), nie należy zm uszać użytkownika do bezterminowego czekania. Eksperymenty wykazują, że kiedy użytkow nicy w idzą na W skaźniku Postępu, że coś się dzieje, są w iele bardziej cierpliwi naw et wtedy, jeśli muszą czekać dłużej. Być może dzieje się tak dlatego, że użytkow nik ma świadomość, iż „system jest zajęty m yśleniem " i ani się nie zawiesił, ani nie czeka na czynność ze strony użytkownika. W jaki sposób

Pokaż animowany wskaźnik, z którego wynika, jaki jest postęp. Przekaż użytkownikowi słownie lub graficznie: • co się dzieje, • jaką część operacji już w ykonano, • ile czasu zostało, • jak przerw ać czynność.

W zorce

| 269

N ie ma problemu, jeśli czas szacowany do zakończenia czynności nie jest precyzyjnie okre­ ślony, o ile jego aktualizacje zachodzą na bieżąco. Czasami jednak trudno określić, ile zostało do końca. W takiej sytuacji należy pokazać jakiś animowany element, który nie odnosi się do żadnych wartości liczbowych. Zainspiruj się przykładem animowanych grafik w yśw ietlanych podczas wczytywania strony w przeglądarce. W większości zestaw ów narzędzi do tworzenia interfejsów graficznych można znaleźć widgety lub okna dialogowe, służące do im plementacji tego wzorca. Strzeż się problem ów zw ią­ zanych z rozdzielnością operacji — W skaźnik Postępu m usi być aktualizow any na bieżąco, bez przerywania właściwej czynności. O ile to możliwe, niech reszta interfejsu pozostanie aktywna. Nie ma sensu blokow ać całego interfejsu, kiedy W skaźnik Postępu jest widoczny. Jeżeli można anulow ać operację, której postępy się śledzi, udostępnij przycisk anulowania albo podobną afordancję na W skaźniku Postępu lub w jego pobliżu — praw dopodobnie tam użytkow nik będzie go szukał. W ięcej inform acji na ten tem at znajdziesz w opisie wzorca Odwoływalność. Przykłady

Kiedy użytkow nik serwisu Flickr wczytuje wiele plików obrazu (co potrafi trwać długo), Flickr wyświetla szczegółowy W skaźnik Postępu (rysunek 6.24), który ukazuje rozmiar każ­ dego pliku, postępy w jego wczytywaniu oraz status; na dole dodatkowo znajduje się ogólny pasek postępu. O zakończenu w czytywania użytkow nik jest w yraźnie pow iadam iany oraz przekierowywany do kolejnej czynności. (Miłym dodatkiem jest to, że w pasku tytułowym strony również pojawia się w artość procentowa postępów).

Rysunek 6.24. Wskaźnik postępu wczytywania wielu plików na serwisie Flickr

270

|

Rozdział 6. Jak to się robi: czynności i polecenia

Interfejs serwisu Grooveshark w czytuje się powoli. Jego W skaźnik Postępu jest w ym yślnym i charakterystycznym obrysem rekina m łota, w ypełnianego stopniow o od lewej do prawej wraz z postępam i w e wczytywaniu kodu strony (rysunek 6.25).

f\ Grooveshark

Rysunek 6.25. Grooveshark W innych bibliotekach

http://quince.infragistics.com/Patterns/Progress% 20Indicator.aspx http://www.welie.com/patterns/showPattern.php?patternID=processing-page Opis wzorca W skaźnik Postępu znajdziesz również w książce Designing Web Interfaces.

Odwoływalność ^

r►

□

s

|Q

a

helion.pi

m

o

H

m

Login

H a sło

'

G oo g le

1

Rysunek 6.26. Firefox Co zrobić

Daj możliwość natychmiastowego anulowania czasochłonnej operacji, bez jakichkolwiek efektów ubocznych.

W zorce

|

271

Kiedy używ ać

Długotrwała czynność przerywa ogólne funkcjonowanie interfejsu lub wykonywana jest w tle przez czas dłuższy niż dwie sekundy. M oże to być np. drukow anie pliku, przeszukiw anie bazy danych albo wczytywanie dużego pliku. Być może użytkownik je st zajęty czynnością, która pozornie lub rzeczywiście dezaktywuje w iększość innych funkcji systemu, jak to się dzieje np. przy pracy z modalnym oknem dialogowym. D laczego

Użytkownicy mają w zwyczaju zmieniać zdanie. Użytkownik może zechcieć przerwania czaso­ chłonnej czynności zwłaszcza wtedy, kiedy ze Wskaźnika Postępu wynika, że wykonanie jej zaj­ mie jeszcze długą chwilę. Użytkownik mógł ją zresztą rozpocząć przez przypadek. Odwoływalność pomaga zapobiegać błędom i radzić sobie z ich skutkami — użytkow nik może anulować czynność, która na pewno się nie powiedzie, taką jak wczytywanie strony z serwera, o którym wiadomo, że jest nieczynny. Tak czy inaczej, użytkow nik będzie się czuł swobodniej przy zapoznaw aniu się z interfejsem i wypróbowywaniu nowych funkcji, jeżeli będzie miał świadomość, że w szystko można od­ wołać. Wzorzec ten pozwala na Bezpieczną Eksplorację (rozdział 1.), dzięki czemu sam interfejs poznaje się łatwiej i przyjemniej. W jaki sposób

Po pierwsze, sprawdź, czy można jakoś przyspieszyć czasochłonną czynność, by jej rezultaty w ydaw ały się pojaw iać natychmiastowo. N ie chodzi naw et o to, żeby rzeczywiście czynność była w ykonywana szybko; jeżeli dla użytkownika rezultaty czynności w ydają się następować natychmiastowo, w zupełności wystarczy. Na stronie internetowej lub w aplikacji podłączonej do sieci może to być w czytyw anie danych lub kodu — tj. przesłanie ich klientow i, zanim sam o nie spyta — albo sukcesywne przesyłanie danych, które użytkownik kolejno widzi na ekranie. Pamiętaj, że szybkość, z jaką ludzie czytają, nie jest nieograniczona. Możesz postanowić, żeby przez czas wczytywania użytkownik zapoznał się z pierwszą stroną danych, a potem kolejną itd. Jeśli jednak O dw oływ alność jest Ci napraw dę potrzebna, zrealizuj w zorzec następująco: um ieść przycisk Anuluj bezpośrednio w interfejsie, tuż obok W skaźnika Postępu (którego — mam nadzieję — używasz) albo jakiegokolw iek m iejsca, w którym pojaw iają się rezultaty czynności. Oznacz go słowem Stop lub Anuluj albo użyj uniweralnie zrozumiałego znaku stopu: czerwonego oktagonu, czerwonego koła z poprzecznym białym paskiem albo znaku „X". Natychm iast anuluj czynność, kiedy użytkow nik klika lub naciska przy cisk Anuluj. Jeżeli opóźnienie będzie zbyt długie, tj. dłuższe niż jedna lub dw ie sekundy, użytkow nik m oże zwątpić, czy anulowanie rzeczywiście zadziałało. M ożesz również odwieść użytkownika od anulowania, skoro równie dobrze m oże chwilę poczekać na zakończenie czynności. Pokaż użytkow nikow i, że anulowanie odniosło skutek — zatrzymaj W skaźnik Postępu albo wy­ świetl komunikat. Z wieloma jednocześnie wykonyw anym i czynnościami może być problem. W jaki sposób użytkow nik może anulow ać jedną czynność bez przeryw ania pozostałych? W oznaczeniu lub chm urce podpow iedzi przycisku A nuluj pow inno być jasno pow ied ziane, co jego kliknięcie w łaściw ie anuluje (podobną koncepcję znajdziesz w opisie wzorca Inteligentne Elementy Menu). Jeżeli czynności przedstawione są w postaci listy lub zestaw u paneli, dla uniknięcia wieloznaczności m ożesz um ieścić osobne przyciski A nuluj przy w szystkich elementach.

272

|

Rozdział 6. Jak to się robi: czynności i polecenia

Przykłady

Okno instalacyjne Adobe A IR (rysunek 6.27) jest prostym, podstawowym przykładem zasto­ sowania Odwoływalności.

Rysunek 6.27. Okno instalacji Adobe AIR Długotrwałe operacje kopiow ania plików w M ac OS m ożna anulow ać osobno, m im o że wszystkie podane są w jednym oknie (rysunek 6.28). Ma to sens — żadna operacja kopiowania nie jest zależna od innej, toteż każdą z nich można pojedynczo anulować.

Rysunek 6.28. Okno Kopiuj w Mac OS, z trzema operacjami kopiowania

Wielopoziomowe Cofanie Czynności

Rysunek 6.29. Photoshop

W zorce

j

273

C o z ro b ić

Daj użytkownikowi łatwy sposób cofania serii poleceń. Kiedy używ ać

Tw orzysz wysoce interaktywny interfejs o funkcjach bardziej rozbudowanych niż prosta na­ wigacja lub wypełnianie formularza. Odnosi się to do czytników e-mailowych, oprogramowania do obsługi baz danych, narzędzi do authoringu, program ów graficznych oraz środow isk programistycznych. D laczego

Możliwość anulowania długiej sekwencji czynności daje użytkownikom poczucie, że z interfejsem można się zapoznawać bezpiecznie. Ucząc się obsługi interfejsu, mogą z nim eksperymentować ze świadomością, że nie wprowadzą nieodwracalnych zmian, nawet jeśli zrobią coś „źle". Tyczy się to użytkow ników na każdym poziom ie zaawansowania, nie tylko początkujących1. Zapoznawszy się dobrze z interfejsem, użytkow nik może poruszać się po nim z pewnością, że żadna pomyłka nie jest nieodwracalna. Kiedy obsunie mu się ręka i w skaże niewłaściwą pozycję menu, cofnięcie czynności nie będzie skomplikowane ani męczące; nie będzie musiał wracać do zapisanych plików, w yłączać programu i w łączać go od nowa, czy prosić adm ini­ stratora o przyw rócenie kopii zapasowej. Oszczędza to użytkownikowi czasu i cierpień. W ielopoziom ow e Cofanie Czynności pozwala także zaaw ansowanym użytkownikom szybko i z łatwością zapoznawać się z różnymi ścieżkami pracy. Na tej zasadzie użytkownik Photoshopa m oże nałożyć serię filtrów na obraz, sprawdzić, czy podoba mu się efekt, a następnie cofnąć czynności, by wrócić do punktu w yjścia. M oże następnie zastosow ać inną serię filtrów, być m oże zachow ać tę sekwencję i ponownie ją cofnąć. M ógłby wprawdzie zrobić to i bez W ielo­ poziomowego Cofania Czynności, lecz trwałoby to dłużej, bo m usiałby zam knąć i ponownie otworzyć plik z obrazem. Podczas pracy twórczej szybkość i łatwość użycia są istotne dla podtrzymania w rażenia płynności działania. W rozd ziale 1. napisałam na ten tem at więcej, szczególnie w opisach wzorców Bezpieczna Eksploracja i Stopniowa Konstrukcja. W jaki sposób

Odwracalne czynności W programie, którego interfejs projektujesz, wszelkie czynności muszą być jasno zdefiniowane. Trzeba określić, jak się nazywają, do jakich obiektów się odnoszą oraz jak je cofnąć. Dopiero na podstaw ie tego modelu pow inieneś zabierać się za tworzenie interfejsu. Zdecyduj, które operacje będzie można cofać. Powinno zostać uwzględnione każde polece­ nie, które skutkuje permanentnymi zmianam i w pliku lub bazie danych; zazwyczaj nie trzeba w to w łączać stanów tymczasowych i różnych w idoków. W większości aplikacji odwracalne są zazwyczaj poniższe rodzaje zmian: • w pisyw anie tekstu w dokumentach i arkuszach, • transakcje w bazach danych, 1 Alan Cooper i Robert Reimann poświęcili kwestii cofania czynności cały rozdział w książce About Face 2.0: The Essentials o f Interaction Design.

274

| Rozdział 6. Jak to się

robi: czynności i polecenia

• modyfikacje obrazów lub obszarów roboczych, • zmiany układu — położenia, rozmiaru, kolejności i grupowania — w aplikacjach graficznych, • operacje na plikach, np. usuw anie i modyfikowanie, • tworzenie, usuw anie i p rzestaw ianie obiektów w rodzaju w iadom ości e-m ailow ych lub kolumn w arkuszach, • jakiekolw iek wycinanie, kopiowanie i wklejanie. Poniższe rodzaje zmian zazwyczaj nie są odwracalne. Jeżeli chcesz się w ykazać szczególną gorliwością i sprawić, żeby były odwracalne, miej wzgląd na to, że m ożesz niesłychanie zde­ nerwow ać użytkow ników , zaśmiecając sekwencję nieistotnym i czynnościam i. Nieodwracalne są zwykle: • zaznaczanie tekstu lub obiektów, • poruszanie się po oknach i stronach, • położenie kursora m yszy lub tekstu, • położenie paska przewijania, • położenie i rozm iar okien oraz paneli, • zm iany niezatw ierdzone lub naniesione w modalnym oknie dialogowym. Niektóre czynności m ieszczą się gdzieś pom iędzy tymi dwiema kategoriami. W ypełnienie formularza czasami bywa odwracalnie, ale czasami nie. Jeżeli jednak wyjście z wypełnionego pola prowadzi do automatycznego zatwierdzenia wprowadzonej zmiany, warto zadbać o moż­ liwość cofnięcia tejże zmiany. (Niektórych rodzajów poleceń nie można odwołać, ale sam charakter aplikacji zazwyczaj su­ geruje to użytkownikom, którzy m ogą się pochw alić jakim kolw iek doświadczeniem. Do nie­ odwracalnych czynności należy m.in. etap zatwierdzenia zakupu w ramach transakcji online, opublikowanie postu na forum lub w ypow iedzenie się na czacie oraz w ysłanie e-maila — choć bez w ątpienia takie rzeczy bardzo chcielibyśmy czasami cofnąć). Tak czy inaczej, odwracalność pewnych czynności powinna być dla użytkownika zrozum ia­ ła. Zdefiniuj je i ponazywaj zgodnie z tym, jak użytkow nik — a nie komputer — postrzega te czynności. Przykładowo cofnięcie w pisania tekstu pow inno się odbywać w ciągu, a nie litera po literze.

Opracuj sekwencję cofania Każda czynność po wykonaniu trafia na sam wierzchołek stosu. K ażde cofnięcie czynności odwołuje najpierw pierwsze polecenie, potem kolejne itd. Ponaw ianie czynności działa tak samo, lecz w drugą stronę. Użyteczny stos powinien zaw ierać co najmniej od dziesięciu do dwunastu pozycji albo i wię­ cej, jeżeli poradzisz sobie z w iększą ich liczbą. Najefektyw niejszy limit m ożesz w yw niosko­ w ać z długotrwałej obserwacji lub testów używalności. (Constantine i Lockwood wskazują, że zam ieszczenie ponad dwunastu elementów w stosie jest zbyteczne, gdyż „użytkownicy rzadko efektywnie korzystają z większej liczby poziom ów "2. Zaawansowani użytkownicy 2 Larry Constantine i Lucy Lockwood, Instructive Interaction: Making Innovative Interfaces Self-Teaching, http://foruse.com/articles/instructive.htm.

W zorce

| 275

specjalistycznego oprogramowania mogliby się z tym nie zgodzić. Pamiętaj — warto znać potrzeby użytkowników).

W yśw ietlanie Na koniec określ, w jakiej postaci przedstawisz stos poleceń użytkow nikow i. W większości aplikacji komputerowych polecenia Cofnij i Ponów znajdują się w menu Edycja. Poleceniu Cof­ nij przypisany jest zazwyczaj skrót Ctrl+Z lub jego odpowiednik. W aplikacjach o szczególnie dobrze zaprojektow anym zachowaniu Inteligentne Elementy M enu inform ują użytkownika, które konkretnie polecenie jest następne w stosie. Na rysunku 6.29 znajdziesz przykład graficznego przedstawienia tej funkcji. Photoshop uka­ zuje przew ijaną listę odwracalnych czynności, w tym również tych, które już cofnięto (tutaj widać dwie takie, oznaczone kolorem szarym). Pozwala to użytkownikowi wybrać miejsce w sto­ sie, do którego chciałby powrócić. Taka przedstawiona wizualnie historia poleceń bywa bardzo przydatna, choćby dla przypom nienia, co użytkow nik ostatnio zrobił. W ięcej na ten temat przeczytasz w opisie wzorca Historia Poleceń. Przykłady

Na rysunku 6.30 widnieje przykład Wielopoziomowego Cofania Czynności w standardowej for­ mie. W przykładzie tym użytkownik wpisał tekst, a następnie w staw ił w dokum encie tabelę. Pierwsze cofnięcie czynności usuwa tabelę, a następne tekst, czyli kolejny element stosu pole­ ceń. Użytkownik ma także możliwość „cofnięcia cofnięcia" poleceniem Ponów. Jeżeli znajdujemy się na wierzchu stosu (tak jak na pierwszym zrzucie), polecenie Ponów jest niedostępne, a na jego miejscu znajduje się polecenie Powtórz. W

M ic r o s o f t W o rd - D o k u m e n t ! PHk i Edycja Widok W ÿaw

O

W M ic r o s o f t W o rd - D o k u m e n t ! Format

Narzędzia

C ofnij Tabela - W s ta w tabelę

C trl+ Z

P ow tó rz T abela - W s ta w tabelę

C trl+ Y

Jabata

ß

Plik 1 E dycja D

1

W id o k

C trl+ Y

C trl+ X

W ytn ij

C trl+ C

I f e Kopiuj S g

N arzęd zia

P o n ó w Tabela - W s ta w tabelę

ks ec

-------------------1

Rysunek 8.22. Amazon C o z ro b ić

M usisz przewidzieć, co użytkow nik może wpisać w polu tekstowym i ukazać mu w ybieralną listę potencjalnych odpowiedzi; o ile to stosowne, automatycznie uzupełnij wpisyw any tekst. K ie d y u ż y w a ć

Użytkownik wpisuje coś przewidywalnego, np. URL, imię lub adres użytkownika, bieżącą datę lub nazwę pliku. M ożesz z dużym prawdopodobieństwem trafnie odgadnąć, co użytkownik chce w pisać — być może istnieje historia tego, co użytkow nik już wpisywał, albo wybiera on spośród zestawu gotowych wartości, w rodzaju listy nazw plików w katalogu. Pola wyszukiwania, pola adresów w przegląd arkach, pola form ularzy e-mailowych, stan­ dardowe formularze internetowe (w rodzaju formularzy rejestracyjnych i zakupowych), edy­ tory tekstu oraz w iersze poleceń w yd ają się łatw iejsze w obsłudze, kiedy w spom agane są wzorcem Automatycznego Uzupełniania.

W zorce

|

377

D laczego

Automatyczne Uzupełnianie to dla użytkownika oszczędność czasu, energii, obciążenia po­ znawczego oraz uniknięcie bólu nadgarstka. Zmienia to czynność wymagającą wysiłku w proste w ybieranie z listy (albo coś w ym agającego naw et jeszcze m niej pracy, jeżeli m ożna podać sensowne uzupełnienie). M ożesz w ten sposób oszczędzić użytkow nikom niezliczonych se­ kund pracy oraz zadbać o zdrow ie tysięcy nadgarstków . Kiedy podaw ane sekwencje są długie i trudne do wpisania (lub zapamiętania), tak ja k adresy URL lub e-mail, Autom atyczne Uzupełnianie jest dość przydatne. Zmniejsza obciążenie pa­ mięci użytkownika, dając mu „informacje z otoczenia" w postaci rozwijanej listy. Potencjalnie dodatkową korzyścią jest zm niejszenie zagrożenia pojaw ienia się błędów : im dłuższy lub dziwniejszy ciąg trzeba wpisać, tym w iększe jest praw dopodobieństw o wystąpienia błędów typograficznych. Przy automatycznie uzupełnianych ciągach takich problem ów nie ma. Jest to właściwość szczególnie cenna w urządzeniach mobilnych. Wpisywanie tekstu na małym urządzeniu nie jest przyjemnością; jeżeli użytkow nik musi w prow adzić długi ciąg znaków, odpowiedni system A utom atycznego U zupełniania m oże mu oszczędzić czasu i frustracji. I znowu, adresy e-mailowe i URL są idealnym materiałem do obsłużenia przy wysyłaniu e-m aili i korzystaniu z internetu na urządzeniach przenośnych. Autom atyczne Uzupełnianie pojawia się również pow szechnie w edytorach tekstu i interfej­ sach opartych na w ierszach poleceń. Kiedy użytkownik wpisuje polecenie lub frazę, aplikacja lub powłoka m ogą przedstaw ić sugerowane uzupełnienie danego ciągu. Edytory kodu i po­ w łoki systemów operacyjnych dobrze się do tego nadają, ponieważ stosowany w nich język jest ograniczony i przew idyw alny (w odróżnieniu od naturalnych języków, takich jak angiel­ sku lub polski); łatwiej wobec tego odgadnąć, co użytkow nik chce wpisać. W reszcie, listy możliw ych uzupełnień m ogą pełnić funkcję m apy lub przew odnika po więk­ szym świecie treści. W yszukiwarki internetowe i pola w yszukiw ania na stronach spełniają tę rolę dobrze — kiedy użytkow nik w pisuje początek frazy, w rozwijanej liście ukazują się su­ gestie oparte na tym, co inni ludzie wpisali (lub odnoszące się do dostępnych zasobów). N ie­ pewny lub zaciekawiony użytkownik uzyskuje w ten sposób drobne korekty tekstu i subtelne w skazów ki, które dają mu jakąś możliw ość poruszania się po niewielkim obszarze ogólnego krajobrazu myśli. W jaki sposób

Oprogram owanie wraz z każdym kolejnym znakiem podanym przez użytkownika w sposób nierzucający się w oczy tworzy listę możliwych uzupełnień częściowo wpisanego ciągu. Jeżeli użytkow nik poda jedną z ograniczonej liczby potencjalnych odpow iedzi, przed staw mu ten zbiór. Jeśli potencjalnych odpowiedzi jest dużo, uzupełnienia możesz podać w postaci któregoś z poniższych zbiorów , czyli • danych wpisanych wcześniej przez użytkownika, zachowanych w preferencjach lub historii, • często występujących fraz, które wielu użytkow ników podawało już w przeszłości, uka­ zanych jako w budow any „słow nik" aplikacji, • możliw ych odpowiedzi pobranych z przeszukiwanych zasobów, tak jak przy polu wy­ szukiwania na witrynie, • innych przystających do kontekstu danych, takich jak firmowe listy kontaktowe służące do przesyłania e-maili w obrębie organizacji.

378

|

Rozdział 8. Dane wejściowe: form ularze i kontrolki

Do projektowania interakcji z systemem Autom atycznego Uzupełniania m ożesz z tego miej­ sca podejść na dwa sposoby. Pierwszy to pokazanie użytkow nikow i na żądanie — np. po­ przez naciśnięcie klawisza Tab — listy potencjalnych uzupełnień i pozwolenie mu na wybranie danej pozycji z listy. Taka funkcja w ystępuje w wielu edytorach kodu (przykład na rysunku 8.26). M ożna uznać, że działa to lepiej, kiedy użytkow nik jest w stanie rozpoznać, co mu jest potrzebne, kiedy to zobaczy, ale sam może nie pamiętać, jak to napisać, jeżeli nie otrzyma pomocy. „Informacje z otoczenia są lepsze od informacji z głow y". M ożna też zaczekać z w yśw ietlaniem , aż zostan ie już tylko jed no m ożliw e u zupełnienie, a następnie pokazać je użytkow nikow i bez w ywołania. W W ordzie odbywa się to za pośred­ nictwem chmurki podpowiedzi; w wielu formularzach następuje poprzez uzupełnienie w pi­ sywanego ciągu bez jakiejkolwiek możliwości wyboru; wtedy jedno naciśnięcie klawisza kasuje uzupełnioną część. Tak czy inaczej, użytkow nik m a w ybór, czy pozostaw ić automatycznie uzupełnioną treść, czy nie — domyślnie nie jest ona pozostawiana. O bydwa te podejścia m ożesz zastosow ać łącznie, tak jak w przykładzie z rysunku 8.26. Autom atyczne Uzupełnianie może irytować użytkow ników . Jeżeli odpow iedzi zostaną od­ gadnięte błędnie, użytkownikowi się to nie spodoba — będ zie m usiał usunąć treść uzupeł­ nienia i napisać to, co rzeczywiście miał na m yśli, żeby w ram ach Autom atycznego U zupeł­ niania nie otrzymać znowu niewłaściwych danych. Następujące niuanse interakcji pozwalają na zapobieganie w ywoływaniu u użytkownika irytacji. • Zaw sze dawaj użytkownikowi m ożliw ość zatwierdzenia lub odrzucenia uzupełnienia; domyślne powinno być odrzucenie. • N ie interferuj, kiedy użytkow nik pisze. Jeżeli zamierza w pisać konkretny ciąg i cały czas pisze, pomimo podaw anych mu uzupełnień, to dopilnuj, by ostatecznie w polu pojawiło się to, czego chce użytkownik. • Jeżeli użytkow nik ciągle odrzuca jakieś uzupełnienie w danym miejscu, przestań mu je oferować. Na jakimś etapie pow inieneś dać za wygraną. • Odgaduj poprawnie. Oto jeden ze sposobów wdrożenia Automatycznego Uzupełniania niewielkim wysiłkiem: pole tekstowe możesz zmienić w pole wyboru (czyli połączenie pola tekstowego, w którym można pisać, z rozw ijanym m enu). Za każdym razem , kiedy użytkow nik podaje now ą w artość w polu tekstowym, utwórz nowy element w rozw ijanym m enu. Jeżeli Tw ój zestaw narzędzi do tworzenia interfejsów pozwala na pisanie w polach w yboru (a w iele na to pozwala), ele­ menty rozwijanej listy są automatycznie w ykorzystyw ane do uzupełniania ciągów podaw a­ nych przez użytkownika. Typowy przykład takiego zachowania znajdziesz na rysunku 8.22; współcześnie w większości przeglądarek ostatnio odwiedzane strony widoczne są w polu opcji, w którym użytkownicy wpisują adresy URL. P rz y k ła d y

W iele klientów e-mailowych w ykorzystuje Autom atyczne Uzupełnianie w ramach pom aga­ nia użytkow nikom w wypełnianiu pól Do: i Kopia:. Dane są zazwyczaj pobierane z listy adre­ sów, kontaktów albo listy adresów, z którymi użytkow nik już korespondował. W idoczny na rysunku 8.23 M ac M ail pokazuje pojedyncze uzupełnienie przedstawione po wpisaniu litery c; uzupełniony tekst jest automatycznie podświetlony, toteż w ystarczy nacisnąć jeden klawisz, aby go usunąć. M ożna zatem „nadpisać" uzupełnienie, jeżeli okaże się błędne.

W zorce

| 379

Rysunek 8.23. Mac Mail Rozwijane listy Automatycznego Uzupełniania m ogą przybierać wiele form. Na rysunku 8.24 znajduje się kilka przykładów formatowania rozwijanych list. 13 a

www)

9

i

t f

±

—

ś r. 4 :0 5

43

Spotlight

w w w - W y s il k '.varka 3 r g

I^ ©

w w w , fa c e b o o k .c o m - K o n to ty m c z a s o w o n ie d o s t ę p n e | F a c e b o o k

©

w w w .f a c e b o o k .c o m /m a k s .g u to w s k i - M a k s G u to w s k i

©

w w w .g o o g le . p l - G o o g le

P I P oka ż w s z y s tk ie N a jce ln ie jsze tra fie n ia

Q

A d o b e P h o to s h o p CSS

P rogram y

Q

A d o b e P h o to s h o p C55

P referencje system ow e

0

. ( iOS S im u la to r

O , w w v j,f a c e b o o k .c o m - W y s z u k iw a r k a B in g

O* / . Lvw.yahoa.com

D o k um en ty

K atalogi

P ły ty C D i DV D

(3) w ild c a ts .h tm l g

s ty le s .c s s

Q

1 0 0 PHOTO

f*51 p h o to - m a n a g e r

i in te r n e to w a in fo r m a ty c z n a H e lio n .p l - w y d a w n ic t w o in fo r m a ty c z n e , k s ią ż k i, k u r s y W iadom ości P i w w w . h e lio n .p l w w w .he lio n .p l

i © O b lic z z y s k n a lo k a c ie 1 4 Ä i ...

O b ra z ki D o k u m e n ty PDF

f \ W ir t u a ln a P o ls k a - w w w . w p .p l - C ie k a w s z a s tr o n a in fo r m a c ji w w w .w p .p l

c a fa 9 6 3 4 2 2 3 d c b c 2 .jp g g

v is io n 2 0 2 0 .p d f

Q A d m in is t ra tio n .p d f

a A m a z o n .c o m : O n lin e S h o p p in g f o r E le c tro n ic s , A p p a r e l, C o m p u te r s , B o o k s , D V D s 8 i m o r e

W itryn y

@ A p p le - S ea rch R e s u lts f o r '0 ... @ C o n ta c tin g A p p le

A lle g r o .p l - a u k c je in te r n e to w e , b e z p ie c z n e z a k u p y alleg ro .p l

M uzyka

Í1Q 0 5 C ra w lin g ,m p 3 — ¡Tunes 0 5 C ra w lin g ,m p 3 — M u s ic

P ie rw s z e k r o k i z F ire fo k s e m w w w .m o z illa .o rg /p l/fire fo x /c e n tra l/

Film y

■

P 1Q 3 09 0Q .M O V P 1 0 3 0 6 2 3 .M O V

P rezentacje O R o un d-trip

5 9 -m ¡n u te S c ru m X P D a y 5 .p p t... 5 9 -m in u te S c ru m X P D a y 5 .p p t...

@ O n e-w a y

P re fe re n c je S p o tlig h t..

F ro m X K atow ice. P oland - Pvrzowice f K T W l | □ Add nearby airports

custom h e l|

M v d a te s a re flexible

K się g a rn ia internetowa informat...

D e p a rt |q 1/17 /2Q 1 2 £ 3 11 A nytim e Tue, Jan 17 2012

http://helion.pl/ -1

Po d rę cznik użytkow nika iP h on e 'a http://help.apple.com/iphone/guide/

1 1 tra ve le r

H

| E conom y

helion edukacja - Szukaj w G o ogle http://www.google.com/...-a&hl-pl&client-safari

□ F in d H o te ls (in ne w w ind ow )

C o m p a re h u n d r e d s o f t r a v e l s ite s a t o n c e .

o w e | r | t | v u i |o p

E

helion| helion helion edukacja

O

helion testy helios

123

11 L o a d Fr a m e (ID R HAINFRAHE)) r e t u r n FA LSE; pH ainFram e-> | ........ . , + ,i-, r.- p Ha : r.t. a — 1r e ' s a s u f f i x ■ ' ;n ■ ■ -’ Us it « - I iF ii-H . r im m e d ia te ly a f t e c cp5t:-Lit €•: P arr: _i •!>-! I it .: M r s h e l l com m ands, D£ •: rir ,r. : ij # r ---l iH -i . i... ParseComm EnableToolTips f t D is p a t 'i p _eventsinkEntnes h e command l i n e . // app wa g ft „eventsinkEntryCcunt , / R e g i s t e r , /Unre i f ( 1P r o c FilterToolTipMessage re tu r JnterfaceEntries i f T h e m a in window h a s b e e n i r i i t a l i z e d , p H a in F r ame- > Show ¥ i ndow(m nCmdSho w)

C H a in F ram e* p H ain F ram e = new C H ain F ram e; i f ( ! pH ai n F ram e ~> Lo ad F ram e ( IDR_HAINFRAHE) ) r e t u r n FA LSE; p H a in F r a m e ~ > E n a b le D o c k in g J m_pMainWnd = p H a in F ra m e ; jvoid EnableOocking (DWORD dwDockStyle)| // c a l l D r a g A c c e p t F i l e s o n l y i f t h e r e ' s a s u f f i x // In a n MDI a p p , t h i s s h o u l d o c c u r im m e d ia te ly a f t e r s e t t i n g // P a r s e command l i n e f o r s t a n d a r d s h e l l com m ands, DDE, f i l e op C C o m m an d L in eln fo c rn d ln fo ; P a r s e C o m m a n d L in e (c r n d ln fo ); // D is p a t c h commands s p e c i f i e d on t h e command l i n e . W ill r e t u r // app was la u n c h e d w ith / R e g S e r v e r , / R e g i s t e r , / U n r e g s e r v e r o r i f ( ! P r o c e s s S h e 1 1 Comrnand(c m d In fo ) ) r e t u r n FA LSE; // The m ain window h a s b e e n i n i t i a l i z e d , s o show an d u p d a te i t p Ha in F r ame- > S howWi ndow (m_nCmdShow);

s o show an d

Rysunek 8.26. Visual Studio Automatyczne Uzupełnianie w Visual Studio służy zatem jako pomoc w pisaniu, system przy­ pominający oraz przeglądarka stosow nych do kontekstu funkcji i klas. Jest bardzo przydatne. W innych bibliotekach

http://developer.yahoo.com/ypattems/selection/autocomplete.html http://ui-patterns.com/pattems/Autocomplete http://patternry.com/p=autocomplete/ http://w w w .w elie.com /pattem s/showPattem .php?pattem ID =autocom plete

Rozwijany Selektor 3. -

1

-

=

-

m

e

ff 1

■ ! ■

■

■

■

■

■

■ ■

■

■

■

■

■

■

■

■

□

□

□

□

□

□

□

□

■

_

Więcej kolorów linii... Wypełnienie deseniem...

Rysunek 827. Microsoft Word

W zorce

|

381

C o z ro b ić

Rozszerz menu poprzez w ykorzystanie rozw ijanego lub w yskakującego panelu, w którym można w ybrać bardziej złożone opcje. K ie d y u ż y w a ć

Użytkownik musi podać dane wejściowe, które w ybiera z gotowego zbioru (tak jak w przy­ kładzie z kolorami z rysunku 8.27) — datę lub godzinę, liczbę lub cokolw iek innego niż do­ w olny tekst wpisyw any klawiaturą. Chcesz utw orzyć interfejs, który obsługuje taki wybór — estetyczne wizualne wyobrażenie możliw ości lub interaktywne narzędzia — lecz nie chcesz w ykorzystyw ać do tego przestrzeni na głównej stronie; wystarczy Ci mały obszar ukazujący bieżące wartości. D la c z e g o

W iększość użytkow ników zna kontrolkę w postaci rozw ijanej listy (zw aną „polem opcji", kiedy wykorzystuje pole tekstowe, w którym można swobodnie pisać). W iele aplikacji umie­ jętnie rozszerza tę formę na rozwijane menu, które n ie są prostym i listami, w rodzaju dendrogram ów, siatek i dowolnych layoutów. Użytkownicy zw ykle rozum ieją je bez problemu, o ile w kontrolkach znajdują się przyciski ze strzałkami skierowanymi w dół, w skazującym i tym samym, że rozwijają się po kliknięciu. Rozwijane Selektory zaw ierają złożone interfejsy na niew ielkich obszarach, toteż w wielu sytuacjach są świetnym rozwiązaniem. W spółcześnie w ykorzystyw ane są w e w szelkiego ro­ dzaju paskach narzędzi, formularzach, ramkach dialogowych i stronach internetowych. Przeglą­ dana przez użytkownika strona pozostaje prosta i elegancka, a interfejs selektora pokazuje się jedynie wtedy, kiedy użytkow nik go w yw ołuje — to dość odpow iedni sposób ukrywania złożonych elementów graficznych do momentu, kiedy staną się potrzebne. W ja k i s p o s ó b

Kiedy Rozwijany Selektor jest „zam knięty", pokaż bieżącą w artość kontrolki na przycisku lub w polu tekstowym. Po prawej zam ieść strzałkę wskazującą w dół, jako osobny przycisk lub nie, w zależności od tego, czy jest to stosowne. Poeksperymentuj — sprawdź, co wygląda dobrze i jest zrozum iałe dla użytkowników. Kliknięciem strzałki (lub kontrolki w ogóle) przywołuje się panel selektora, a kolejnym kliknięciem zamyka się go. Zaprojektuj panel selektora stosownie do wyboru, którego użytkow nik ma dokonać. Niech będzie względnie m ały i skondensowany; jego organizacja wizualna powinna być oparta na znajomym formacie, w rodzaju listy, tabeli, dendrogramu konspektowego, albo bardziej wy­ specjalizowanym, w rodzaju kalendarza lub kalkulatora (spójrz na przykłady w następnym podpunkcie). W rozdziale 5. znajdziesz omówienie wizualizacji list. Przewijanie panelu jest dobre, jeżeli użytkow nik rozumie, że dokonuje w yboru z dużego zbioru, tak jak w przypadku pliku w dużym systemie plików. Pamiętaj jednak, że przewijanie rozwijanych paneli nie jest łatwe dla ludzi, którzy nie mogą się pochwalić większą zręcznością. Linkami lub przyciskami na panelu można wywołać pomocniczy interfejs, np. okno z próbnikiem kolorów, wyszukiwarkę plików lub stronę pomocy, która pomaga użytkownikowi w wybraniu w artości. Takie narzędzia zw ykle są modalnymi panelami dialogow ym i. Jeżeli zam ierzasz

382

|

Rozdział 8. Dane wejściowe: form ularze i kontrolki

zastosow ać taki panel jako główny sposób, w jaki użytkow nik ma w ybierać w artość (np. po otworzeniu go naciśnięciem przycisku), możesz zamiast niego zastosować Rozwijany Selektor, a nie od razu kierować użytkownika do panelu. Rozwijany panel może zawierać najpowszechniej w ybierane lub ostatnio w ybrane elem enty. U łatw iając podaw anie często w ybieranych ele­ mentów, skracasz czas (lub zm niejszasz liczbę kliknięć) potrzebny przeciętnem u użytkow­ nikowi do wybrania wartości. P rz y k ła d y

Treściwe, oferujące bogatą interakcję paski narzędzi w Photoshopie intensywnie wykorzystują Rozwijane Selektory. Na rysunku 8.28 widnieją dwa przykłady: Pędzle i Krycie. Selektor pędzli jest wybieralną listą z pewnymi dodatkami — znajdują się w nim dodatkowe kontrolki w rodzaju suwaka, pola tekstowego oraz przycisku z prawej, którego kliknięciem u zyskuje się dostęp do dodatkow ych opcji. Selektor krycia jest prostym suwakiem, w którego polu tekstow ym w skazana jest w artość ustaw ienia.

a

Zaznacz * 1

Fltr

K iy d « | lüüV.

W idok | >|

O kno

Prsepływ: (lOOŹ''.

f

Rysunek 8.28. Rozwijane menu w Photoshopie Wzorzec Siatka Miniaturek (rozdział 5.) jest w Rozwijanych Selektorach często wykorzystywany zam iast menu tekstowych. W przykładach program ów Pow erPoint (rysunek 8.29) i iW eb (ry­ sunek 8.30) w idnieją dwa style prezentowania Siatki M iniaturek. W i n n y c h b i b li o t e k a c h

http://quince.infragistics.com/Patterns/Drop% 20Down% 20Chooser.aspx M ożesz również poszukać w internecie konkretnych rodzajów R ozw ijalnych Selektorów , takich jak próbniki kolorów, selektory dat, kalendarze, menu fontów oraz suwaki numeryczne.

W zorce

| 383

■? n £lik Edycja Widok Wstaw Eprmat ¡iarzędzia Pokaz Qkno Pornos □

&

R ysuj -

y

#

X

%

Ć ł 11 A g to kszta łty

11 t

\

o \

c £ Unie

y

-

n. -

d l O

H

U -k(l

&

►

tąszniki

►

K szta łty p odstaw ow e

►

Schemat blokowy

* ć > < ? < łV

Gwiazdy i wstęgi O bjaśnienia

-j>i Przyciski akcji

> ► f * pk a

J!

► ^

in>

~

»0

^ ^

O E>

B < a û 5

Rysunek 8.29. Microsoft PowerPoint

Rysunek 8.30. Rozwijany Selektor Motywy) iWeb

384

|

Rozdział 8. Dane wejściowe: form ularze i kontrolki

GE

t -J L - i

Kreator Listy Pokazywanie ko lu m n Maksymalna liczba wierszy w trybie kompaktowym:

■:h

Wybierz dostępne kolumny z: Pola najczęściej wykorzysty, ▼ Pokaż te kolumny w następującej kolejności:

Dostępne kolumny: Automatycznie przesiane da A Charakter Czytaj Data oflagowania jako wykoi Data rozpoczęcia Data ukończenia Do DW Flaga monitująca Kontakty Konwersacja Nadawca wymaga raportu o Nazwa adresata Nie dokonuj autoarchiwizacji Właściwości | [

Usuń

Dodaj -> < - Usuń

Nowa kolumna..

a

Stan flagi Ważność Ikona Załącznik Od Temat Otrzymano Rozmiar Kategorie

w Przenieś w górę | OK

Przenieś w dół Anuluj

Rysunek 8.31. Okno dialogowe w programie Microsoft Outlook C o z ro b ić

Przedstaw listę „źród łow ą" i „d ocelow ą" na tej samej stronie; daj użytkownikowi możliwość przenoszenia między nim i elem entów przy użyciu przycisków lub za pom ocą przeciągania i upuszczania. K ie d y u ż y w a ć

Prosisz użytkownika o utworzenie listy elementów poprzez dokonanie wyboru z innej listy. Lista źródłowa może być długa — zbyt długa, aby z łatwością ją przedstawić np. jako serię kratek. D la c z e g o

Fundamentem tego w zorca je st przed staw ienie obydw u list na jednej stronie. Użytkownik może zobaczyć, co jest czym i nie musi ciągle przeskakiw ać do okna wyboru. Prostszym zamiennikiem Kreatora Listy jest zwyczajna lista zaznaczanych elementów. Oby­ dwa rozw iązują problem „wyboru podzbioru". Jeżeli jednak lista źródłow a jest bardzo rozle­ gła (tak jak np. cały system plików), lista kratek do zaznaczania zw yczajnie nie przystaje do skali — użytkow nik nie może z łatwością zobaczyć, z czego usunął zaznaczenie, wobec czego nie wie dokładnie, co zaznaczył. M usi ciągle przew ijać listę w górę i w dół, by coś zobaczyć.

W zorce

| 385

W ja k i s p o s ó b

Zam ieść listy źródłow ą i docelową obok siebie albo po lewej i prawej, albo na górze i na dole. Pomiędzy tymi dwiema listami um ieść przyciski Dodaj i Usuń (chyba że dla użytkowników przeciąganie i upuszczanie będzie oczywiste bez wytłumaczenia). Możesz oznaczyć przyciski w yrazami, strzałkami lub i jednym , i drugim. W zorzec ten przewiduje również m iejsce dla innych przycisków . Jeżeli lista docelow a jest uporządkowana, wprowadź przyciski Przenieś w górę i Przenieś w dól, takie jak na rysunku 8.31. (Mogą to być po prostu ikonki ze strzałkam i zam iast przycisków ze słowami). W zależności od tego, jakie elementy uwzględnione są w interfejsie, możesz albo sprawić, by dosłownie przenoszono elementy ze źródła do listy docelowej — tak że przeniesiony element znika z listy źródłowej — lub pozostać przy liście, która się nie zmienia. Lista plików w systemie plików nie pow inna się zm ieniać; użytkow nik uznałby to za dziw ne zachow anie, ponieważ taka lista jest modelem systemu plików jako takiego, gdzie pliki nie są rzeczywiście usuwane. Tym niemniej przy liście Dostępne kolumny programu Outlook z rysunku 8.31 elementy zni­ kają z listy. To już zależy od Ciebie. Nadaj listom sem antykę właściw ą w ielokrotnemu zaznaczaniu zam iast zaznaczaniu poje­ dynczemu, żeby użytkow nik m ógł z jednej listy do drugiej przenosić wiele elementów. P rz y k ła d y

W iększość w spółczesnych im plem entacji tego w zorca opiera się na system ie przeciągania i u puszczania w ram ach przenoszenia elem entów m iędzy obszarami; jeżeli są to graficzne elementy, tym lepiej. Na serwisie Flickr (rysunek 8.32) m ożna spotkać się z bardziej nowocze­ snym podejściem do Kreatorów List: można tam przeciągać elementy z potencjalnie długiej listy obrazów źródłowych do sekwencji wsadowej, w celu przeprowadzenia operacji na wszystkich podanych elementach naraz. Duży tekst objaśnia użytkownikowi, co powinien robić w decy­ dujących momentach interakcji, np. utw orzyć now ą sekwencję lub usunąć obraz z sekwencji.

Rysunek 8.32. Flickr

386

|

Rozdział 8. Dane wejściowe: form ularze i kontrolki

W i n n y c h b i b li o t e k a c h

http://www.welie.com/patterns/showPattern.php?patternID=parts-selector

Poprawne Wartości Domyślne Q O n e -w a y

0 R o u n d -t r ip

o M u lti-C it y

From

To

I I * * I I 1 1Include nearbv airoorts or select custom D e p a rt

O W eekend

flexible)

I I Include nearbv airoorts or select custom R e tu rn (flexible:

110/26/2010 £3 1 Anytime Tue, Oct 26 2010

i|

11/02/2010 6 3 1( Anytime Tue, Nov 2 2010

1 1 traveler

$

□

t I I Economy

$

I

P re fe r N o n s to p

Compare hundreds of travel sites at once.

Rysunek 8.33. Kayak C o z ro b ić

Kiedykolwiek jest to stosowne, wypełnij wstępnie pola formularza w artościam i, które uważasz, że przystają do potrzeb użytkowników. K ie d y u ż y w a ć

Twój interfejs zadaje użytkow nikow i pytania, na które odpowiedzi udziela się w formularzu (czyli np. przy użyciu pól tekstowych lub przycisków opcji). Chcesz zm niejszyć ilość pracy, którą użytkownik musi wykonać. Być może w iększość użytkow ników będzie chciała udzielić jednakowej odpowiedzi albo sam użytkownik podał już interfejsowi wystarczająco dużo infor­ macji, by interfejs mógł z kontekstu wiarygodnie odgadnąć odpowiedź. W przypadku pytań technicznych lub um iarkowanie go interesujących niekiedy trudno oczekiwać, by użytkow­ nik znał odpowiedź lub w ogóle się nią interesował, wobec czego w tedy to, co system sam zaproponuje, jest dla niego odpowiednie. Podaw anie w artości dom yślnych nie je st jed nak najrozsąd niejszym rozw iązaniem , kiedy w odpowiedzi trzeba podać poufne lub politycznie w rażliw e dane, w rodzaju haseł, płci lub obywatelstwa. Przyjmowanie założeń i wypełnianie pól danymi, z którym i należy uważać, m oże w yw ołać u użytkownika niepokój lub gniew. (I — błagam — nie um ieszczaj domyślnie zaznaczonych kratek „Proszę w ysyłać mi e-maile reklam ow e!"). D la c z e g o

Dostarczając sensowne domyślne odpowiedzi, oszczędzasz użytkow nikow i pracy. Nie ma tu żadnej tajemnicy. Użytkownik nie musi zastanaw iać się nad odpowiedzią lub w pisyw ać ją. W ypełnianie formularzy raczej nie bywa przyjem ne, ale jeżeli w prow ad zenie domyślnych odpowiedzi skróci czas pracy z formularzem o połowę, zyskasz wdzięczność użytkownika.

W zorce

| 387

Jeżeli naw et domyślna w artość nie odpowiada użytkownikowi, przynajmniej uzyskuje przy­ kład odpowiedzi, jaka jest od niego w ymagana. Już to może m u oszczędzić kilka sekund m y­ ślenia lub — co gorsza — wyświetlenia się wiadom ości o błędzie. Czasami zastosow anie Poprawnych W artości Domyślnych może przynieść nieprzewidziane konsekwencje. Jeśli użytkow nik ma m ożliw ość pom inięcia jakiegoś pola, zadane w nim py­ tanie może nie w pełni dojść do jego św iadom ości. U żytkow nik może zatem zapomnieć, że pytano go o coś; może nie zrozum ieć im plikacji pytania lub nie zn ać dom yślnej w artości. W pisanie odpowiedzi, wybranie w artości lub kliknięcie przycisku zmusza go do świadom e­ go odniesienia się do tej kwestii, co bywa ważne, kiedy chcesz, by użytkow nik m ógł się sku­ tecznie nauczyć obsługi aplikacji. W ja k i s p o s ó b

Wypełnij pola tekstowe, pola wyboru i inne kontrolki odpowiednimi wartościami domyślnymi. M ożesz to zrobić, kiedy przedstawiasz użytkow nikow i stronę po raz pierw szy, albo możesz w ykorzystać informacje, które użytkow nik sam w cześniej w prow adził w aplikacji, do dyna­ micznego ustalenia późniejszych wartości domyślnych. (Przykładowo z podanego kodu poczto­ wego m ożesz wyw nioskować kraj i miejscowość). N ie wprowadzaj w artości domyślnych tylko wtedy, kiedy w ydaje Ci się, że żadna kontrolka nie powinna być pusta. Rób tak tylko, jeżeli jesteś praw ie pewien, że ogół użytkow ników za­ zwyczaj nie będzie tych w artości zmieniać. Inaczej jedynie dołożysz wszystkim pracy. W arto znać swoich użytkowników. Sporadycznie używ ane interfejsy w rodzaju instalatorów oprogram ow ania zasługują na szczególną uwagę. Możesz spytać użytkowników o dane techniczne, np. w rodzaju lokalizacji, w której program należy zainstalować, na wypadek, gdyby chcieli je dostosować do własnych potrzeb. Prawie 90% użytkow ników nie będzie chciało i nie będzie ich interesować, gdzie in­ stalacja się dokona — to ich po prostu nie interesuje. Podanie domyślnej lokalizacji jest w takiej sytuacji zupełnie rozsądne. P rz y k ła d y

Kayak (rysunek 8.33) podaje domyślne w artości, kiedy użytkow nik zabiera się za w yszuki­ w anie połączeń lotniczych. W iększość z tych w artości ma sens: zam ów ienie jednego miejsca w drugiej klasie wraz z biletem powrotnym zdarza się często, a miejscow ość w polu „From " (czyli miejsce odlotu) można albo wyw nioskować z położenia geograficznego użytkownika, albo jego wcześniejszych wyszukiwań. (Daty odlotu i przylotu wydają się być tu jednak dobrane arbitralnie). Efektem podania w szystkich tych wartości domyślnych jest to, że użytkownik spę­ dza mniej czasu na zastanawianiu się nad tym i elem entam i form ularza, w obec czego może szybciej dotrzeć do swojego właściwego celu — rezultatów w yszukiwania. W program ie Photoshop przy zmianie rozmiaru obszaru roboczego obrazu pojawia się okno, które w id ać na rysunku 8.34. Pierw otny obraz — ja k w idać na rysunku — m iał w ym iary 476x306. Te wym iary stały się domyślną szerokością i długością (podanymi w polach Szero­ kość i Wysokość), co w różnych przypadkach jest bardzo użyteczne. Jeżeli chcesz dookoła ob­ razu umieścić cienką ramkę, możesz powiększyć istniejące już wymiary o zaledwie dwa piksele; jeżeli chcesz poszerzyć obszar roboczy, ale nie zm ieniać jego w ysokości, w ystarczy zmienić w artość pola Szerokość. Możesz też kliknąć przycisk OK, niczego nie zmieniając.

388

|

Rozdział 8. Dane wejściowe: form ularze i kontrolki

Rysunek 8.34. Okno z Photoshopa W i n n y c h b i b lio t e k a c h

http://pattem ry.com /p=good-defaults/ http://ui-pattem s.com /pattem s/GoodD efaults

Zlokalizowane Komunikaty O Błędach

Rysunek 8.35. Pole rejestracji Netflix C o z ro b ić

Zam ieść ostrzeżenia o błędzie w formularzu bezpośrednio na stronie, która ten formularz zawiera; kom unikat um ieść na górze, a — o ile to m ożliw e — przy spraw iających kłopot kontrolkach uaktywnij wskaźniki. K ie d y u ż y w a ć

Użytkownik ma m ożliw ość w pisania danych formularzowych, których interfejs nie może za­ akceptować. M oże pom inąć w ym agane pole, w prow adzić liczby, których system nie może przetworzyć, czy też niepopraw ne adresy e-m ailow e. C hcesz zachęcić użytkownika, by spróbował jeszcze raz; w skazać literówki, zanim staną się poważnym problemem ; pomóc zdezorientowanem u użytkow nikow i zrozum ieć, o co się go pyta.

W zorce

| 389

D laczego

Przyjęło się kiedyś, że aplikacje standardowo wyśw ietlają informacje o błędach w modalnych oknach dialogowych. Takie wiadomości bywają bardzo pomocne, gdyż wskazują w ystąpie­ nie problemu oraz sposób, w jaki można mu zaradzić. Rzecz w tym, że do naprawienia błędu trzeba wyłączyć okno, a kiedy okna nie ma, nie można już przeczytać wiadom ości o błędzie! (Chyba że z założenia miałeś po prostu zapam iętać cały komunikat). Następnie, kiedy pojawiły się formularze internetowe, wiadomości o błędach często przedstawia­ no na osobno wczytywanych stronach po kliknięciu przycisku Z atw ierdź. I znow u można było przeczytać komunikat, ale następnie trzeba było kliknąć przycisk Wstecz, by napraw ić błąd — a w tedy kom unikat też znikał z ekranu. W końcu trzeba było przejrzeć form ularz w poszukiwaniu zawierającego błąd pola, co z kolei wymagało wysiłku i zwiększało podatność na błędy. W spółcześnie w większości formularzy internetowych kom unikat o błędzie umiejscowiony jest na samym formularzu. Zamieszczając na tej samej stronie zarówno komunikaty, jak i kon­ trolki, pozwalasz użytkownikowi czytać kom u n ikat i z łatw ością popraw iać form ularz, bez konieczności przeskakiwania m iędzy stronami i narażania się na błędne zapamiętanie treści ostrzeżenia. Co więcej, w niektórych formularzach internetowych ostrzeżenia o błędach umieszczane są bezpośrednio obok kontrolek, w których błędy popełniono. Użytkownikowi wystarczy rzut oka, żeby dociec, gdzie wystąpiły problemy — nie ma przecież powodu, żeby musiał poszu­ kiwać sprawiającego trudności pola według samej nazwy — a od razu pod ręką ma instrukcje dotyczące poprawienia błędu. W jaki sposób

Po pierwsze, zaprojektuj formularz tak, by uniknąć pojawienia się pewnego rodzaju błędów. Używaj rozwijanych menu zam iast dowolnie wypełnianych pól tekstowych, jeżeli możliw o­ ści są ograniczone i niełatwo je wpisać. W przypadku pól tekstowych ułatw podaw anie da­ nych przy użyciu W skazówek, Zapytań, Formatu Pobłażliwego, Automatycznego Uzupeł­ niania i Poprawnych W artości Domyślnych. Stosownie do sytuacji jasno oznacz (asteryskami) wszystkie w ym agane pola i — przede wszystkim — w ogóle postaraj się, by jak najm niej pól było obowiązkowych. Po w ystąpieniu błędów u góry formularza powinno pojaw ić się jakieś ostrzeżenie naw et wtedy, kiedy obok kontrolek zamieszczone są szczegółowe komentarze. Sama góra strony to pierw sze miejsce, na które ludzie zw racają uwagę. (Sprawdza się to również w odniesieniu do użytkow ników niedowidzących, którym odczytywany jest najpierw kom unikat z góry formularza, dzięki czemu w iedzą od razu, że wkradł się błąd). Zam ieść w tym miejscu przy­ ciągającą uwagę grafikę i zastosuj tekst bardziej wyrazisty od standardowego tekstu na stro­ nie, np. wytłuszczony i oznaczony na czerwono. Następnie oznacz pola formularza, w których znalazły się błędy. O ile to m ożliw e, zam ieść obok nich konkretne komunikaty o błędach — na nie trzeba przeznaczyć dodatkowe miejsce obok pola, nad nim lub pod nim — albo przynajmniej oznacz pole kolorem lub niewielkim elementem graficznym (rysunek 8.35). Użytkownicy w takim kontekście standardowo kojarzą czerwień z błędami, więc korzystaj z niej do woli. Ponieważ jednak wielu ludzi z powodu ślepoty barw nie odróżnia czerwieni, użyj także innych w skazówek: słów, w ytłuszczonego tekstu (ale nie nadmiernie dużego) oraz grafiki.

390

|

Rozdział 8. Dane wejściowe: form ularze i kontrolki

Jeżeli projektujesz z myślą o internecie lub jakimś innym systemie opartym na wymianie między serwerem a klientem, postaraj się zw eryfikow ać jak najw ięcej danych jeszcze po stronie klienta. Tak jest o wiele szybciej. O ile to możliwe, umieść komunikaty o błędach na wczytanej już stronie, aby użytkow nik nie musiał czekać na wczytanie kolejnej. Omówienie zasad pisania komunikatów o błędach wykracza poza zakres opisu tego wzorca, ale podaję kilka wskazówek. • Komunikaty powinny być krótkie, lecz dostatecznie szczegółow e, by objaśnić zarów no, w którym polu wystąpił błąd, jak i jego charakter: „Nie podałeś swojego adresu" jest lepsze niż „Brak inform acji". • Posługuj się normalnym językiem, a nie nowomową informatyczną: „Podałeś literę w kodzie pocztow ym " jest lepsze niż „Błąd w weryfikacji num eru". • Bądź przyjazny: „Niestety, ale coś nie działa. Ponow nie kliknij »D alej«" jest lepsze niż „Błąd 693 JavaScript" lub „W tym formularzu brakuje danych". P rz y k ła d y

Strony rejestracji na serwisach Tw itter i M int (rysuneku 8.36 i 8.37) w yśw ietlają kom unikat o błędzie lub „O K"; taka technika przydaje się przy krótkich formularzach.

Full n am e

^

ok

Your full name will appear on your public profile

U se rn a m e

m u st not be b la n k Your public profile: http://twitter.com/ USERNAME

P a ssw o rd

Em ail ^

Let o th e rs find m e b y m y email a d d re ss

Note: Email will not be publicly displayed

Rysunek 8.36. Strona rejestracji na serwisie Twitter

Rysunek 8.37. Strona rejestracji na serwisie Mint

W zorce

|

391

Niektóre komunikaty o błędach na serwisie Yahoo! utrzymane są w konwencji humorystycznej (np. „N apraw dę pochodzisz z p rzy szło ści?"), podczas gdy inne są zu pełn ie pow ażne (ry­ sunek 8.38).

Imię i nazw isko ¡Maksym ilian Pleć

|¡Gutowski_____________ |

M ę ż c z y z n a |-•

Data u ro d z in y R

|styczeń

-

¡2030 Ł ń Naprawdę pochodzisz z —________ przyszłości?

1

M ie szka m w

P o lsk a

K od pocztowy ¡01234567

A

Ten kod pocztowy nie znajduje się w e w s k a z a n y m k ra ju

Rysunek 8.38. Strona rejestracji na serwisie Yahoo! Na serwisie Hanna Andersson, kiedy użytkow nik usiłuje dodać do wózka nie w pełni okre­ ślony element, pojawia się subtelny kom unikat przypominający o podaniu brakujących danych (rysunek 8.39). (Zapytanie zdecydowanie nadmiernie ułatwia przeoczenie tego pola formularza). Po uzupełnieniu danych obszar po komunikacie można przeznaczyć na inną wiadomość, która może zainteresować użytkownika. Zwróć też uwagę, że kiedy formularz wykrywa, iż podane informacje są wystarczające, u dołu pojawia się przycisk Begin Checkout („Dokonaj zakupu").

Rysunek 8.39. Formularz zakupów na serwisie Hanna Andersson

392

|

Rozdział 8. Dane wejściowe: form ularze i kontrolki

W innych bibliotekach

http://ui-patterns.com/patterns/InputFeedback http://www.welie.com/patterns/showPattern.php?patternID=input-error Te dw a w zorce noszą nazwy Input Feedback („Inform acja zw ro tn a") i Inpu t Error Message („Komunikat o błędnych danych w ejściow ych"). Możesz też poszukać innych wariantów tych nazw.

W zorce

| 393

394

|

Rozdział 8. Dane wejściowe: form ularze i kontrolki

RO ZDZIAŁ 9.

Media społecznościowe

W latach 2009 i 2010 media społecznościowe stały się chlebem powszednim. Firmom, produktom i organizacjom non profit czym prędzej utworzono tożsamości na Facebooku, Twitterze i serwi­ sach multimedialnych, takich jak Flickr i YouTube. Jeżeli m iały już swoje blogi, strumienie krótkich wiadomości na Twitterze i Facebooku przyniosły tym blogom nowe rzesze odbiorców. Organizacje odkryły, że wystarczy stale publikować interesujące m ateriały, by klienci i ludzie w pływ ający na istotne decyzje zwracali na nie uw agę. Kiedy jakieś treści stawały się „za­ kaźne", o marce organizacji robiło się w szędzie głośno — i to zupełnie za darmo! Cóż, może nie tak zupełnie za darmo... Organizacje wkładają dużo pracy w kreację udanych tożsamości w mediach społecznościowych. Ktoś m usi spędzać dużo czasu na pisaniu i rozprzestrzenianiu treści; ktoś inny m usi cały czas czytać toczące się w sieci dyskusje oraz stosow nie w yp ow iadać się w ich ramach. Do działalności w mediach społecznościowych można wykorzystyw ać cenne miejsce na stronach internetowych organizacji, a strony na innych serw isach (w rodzaju Facebooka i YouTube) trzeba projektow ać i aktywnie obsługiwać. Poza tym ktoś m usi opracow ać ogólną strategię: w jakim zakresie pracować, kiedy i nad czym. W toku tych działań wyłoniły się pewne najlepsze rozwiązania. Media społecznościowe wciąż są stosunkowo młodym obszarem działalności, a konkretne porady, których się udziela, mogą ulegać szybkim zmianom w nadchodzących m iesiącach i latach. W zorce i wskazówki przed­ stawione w tym rozdziale — tak samo jak w całej tej książce — nie są nienaruszalnym i zasa­ dami, ale można mieć nadzieję, że ich użyteczność przeżyje najpopularniejsze w roku 2010 serwisy i technologie. W tym rozdziale koncentruję się na jednym z aspektów interakcji społecznej online: w yko­ rzystaniu wszelkiego rodzaju mediów społecznościow ych do prom ow ania m arek, dzielenia się pomysłami, promowania film ów lub innych dzieł ekspresji artystycznej oraz na innych sposobach wspomagania różnorakich przedsięwzięć. Najważniejsze jest, by pozyskać o d b i o r c ó w — ludzi, którzy są gotowi dobrowolnie w ysłuchać, co m asz do pow iedzenia. M arki, które dostarczają swoim odbiorcom niezwykłych przeżyć, zdobywają dzięki działalności społecznościowej w ielkie rzesze miłośników. (W tym rozdziale przez „m arki" rozum iem y również marki osobiste, organizacji non profit, przedsięwzięć artystycznych, inicjatyw społecznych albo marki stworzone po prostu dla zabawy).

395

Czego nie znajdziesz w tym rozdziale Formy, jakie przybiera korzystanie z mediów społecznościowych na użytek osobisty, są inne dla innych ludzi. Być m oże istnieją pewne najlepsze techniki wykorzystywania mediów spo­ łecznościowych w celach pryw atnych — jest to zresztą bardzo ciekawy tem at do rozmowy między samymi zainteresowanymi. Tę książkę napisałam jednak z myślą o projektantach witryn i oprogramowania, toteż skoncentruję się na tym, co im jest potrzebne. Kolejnym tematem, który w tym rozdziale poruszony nie zostanie, jest kreowanie społeczno­ ści internetowych. Jest to sztuka sama w sobie, której w zorce i najlepsze techniki różnią się od tych, które tutaj opisuję. Gdy pisałam te słowa, kilka organizacji i marek zdążyło już z pow o­ dzeniem stworzyć społeczności internetowe skoncentrowane w okół ich marek, ale nie ma zbyt wielu dowodów św iadczących o tym, jakoby rzeczywiście pomogło to samym markom. (Co innego, jeżeli chodzi o markę społeczności internetowej jako takiej, tak jak w przypadku Stack Overflow lub Ravelry — tutaj rzeczywiście zdarzają się nieliche sukcesy. Jednak w tym rozdziale nie odnoszę się do takich przypadków). Wreszcie, pojawiło się dotąd wiele witryn, które w innowacyjny sposób wykorzystują interakcję społecznościową. Serwisy Delicious, Yelp, Foursquare i inne stworzyły produkty oparte na kolektywnej inwencji, która m ogła się objaw ić za pośrednictw em sieci. Spodziewam się, że w ciągu kolejnych lat zaistnieje więcej tego rodzaju serwisów. Erin Malone i Christian Crumlish w książce Designing Social Interfaces u m iejętnie opisali niektóre z m etod zbierania i kom asowania opinii użytkowników. Ten rozdział jest uzupełnieniem myśli przedstawionych w owej książce.

M edia społecznościowe od podstaw Jakie zasady i wzorce powinieneś wziąć pod uwagę, kiedy pomagasz w opracowaniu strategii wykorzystania m ediów społecznościowych? Pierwsza wskazówka jest tak oczywista, że przypisałam jej numer zero. Jest to coś, co musisz zro­ bić, zanim w ogóle zabierzesz się za kreowanie tożsamości w mediach społecznościowych. 0. Słuchaj. Dowiedz się, gdzie ludzie dyskutują o Twojej marce, produkcie, organizacji lub konkuren­ tach. Co więcej, zbadaj, które szersze tematy odnoszą się do celu istnienia lub m isji Tw o­ jej m arki. Co ludzie m ają na te tematy do powiedzenia? Jeżeli Twoja organizacja może coś wnieść do takiej dyskusji, zabierz w niej głos. • Znajdź prowadzone w sieci dyskusje i zapoznaj się z nimi. Jeżeli trzeba, monitoruj je przy użyciu stosownych narzędzi zwłaszcza wtedy, kiedy pracujesz dla popularnej m arki o wyrazistej tożsamości w internecie. • Dopilnuj, by organizacja w iedziała, co się o niej m ów i naw et wtedy, kiedy w ypowiedzi są negatywne. • Poleć komuś z Twojej organizacji, by zarejestrował się na cieszących się renomą i wieloma czytelnikami serwisach (takich jak znane blogi), i udzielał się w dyskusjach. M usi być jasne, że ta osoba jest oficjalnym reprezentantem organizacji.

396

|Rozdział 9. M e d ia społecznościowe

• W ramach powyższego odpowiadaj na pytania, udzielaj informacji, delikatnie prostuj błędy, a także przyjmuj do wiadomości zgłaszane zażalenia. • Bądź otwarty na dyskusję i zachowuj się godnie; nie bądź zbyt gadatliwy ani zbyt wy­ czulony. Powstrzymaj się przed nadm ierną promocją. Omówię teraz aktywne, twórcze aspekty wykorzystywania m ediów społecznościowych. Jak stworzyć efektyw ną tożsamość w mediach społecznościowych, z którą ludzie będą chcieli utrzym yw ać kontakt? Poniższe sześć wskazówek uporządkowałam tak, by mniej więcej odzwierciedlić ich waż­ ność. Jeżeli nie będziesz tworzyć materiałów, które ludzie będą z chęcią czytać (zasada 1.), nie ma sensu dokładać starań, by te materiały były szeroko dostępne lub łatw e do w yszukania. N iektóre z tych w skazów ek mogą się trafnie odnosić do Tw ojej sytuacji, a inne nie. Wskazówki 5. i 6. szczególnie rzadko zn ajd ują zastosowanie, ze względu na nakład pracy, jaki trzeba przy nich uwzględnić. 1. Twórz dobre materiały. Pisz, projektuj, nagrywaj albo w jakikolw iek inny sposób tw órz m ateriały, które ludzie będą chętnie przyswajać. Twórz je regularnie i w ystarczająco często, by utrzym ać zainte­ resowanie nimi. Inicjuj dyskusje na temat swoich treści (np. zachęcając do komentowania na Facebooku), aby stały się jeszcze bardziej atrakcyjne. Sam też bierz udział w tych dyskusjach. • Utwórz Przegląd Tematyczny, który dobrze odpow iada charakterow i Twojej organi­ zacji. Twórz nietuzinkowe treści, które mogą zaciekaw ić różnych ludzi; przedstawiaj materiały o różnej „objętości", stylu i formie (tekst, obrazy, filmy, podcasty). • Podawaj odnośniki do cudzych materiałów. Wykorzystaj wzorzec Współdzielenie I Ko­ mentowanie, by dodatkowo zw iększyć zasięg Tw oich treści, a także okazyw ać uznanie innym, zasługującym na to stronom w sieci. • W łączenie Osobistych W ypowiedzi m oże się okazać bardziej przystępne niż posługi­ wanie się standardową, korporacyjną konwencją. • Używaj Zagajeń, by zachęcić odbiorców do wypowiedzi. Osoba biorąca udział w dys­ kusji z większym prawdopodobieństwem powróci, by obcować z Tw oją tożsamością. 2. Przekaż te dobre materiały czytelnikom. Posłuż się narzędziami i serwisami, z których Twoi odbiorcy zwykli korzystać przez znaczną część swojego czasu w sieci: pocztą elektroniczną, Facebookiem, Twitterem, strumieniami RSS, serw isem D igg bądź czym kolw iek stosow nym . Jeśli odbiorcy pozw olą, zamieść swoje treści w ich osobistych Aktualnościach (rozdział 2.), czyli strumieniu stale przychodzą­ cych wiadomości i aktualizacji, z którymi na tych serwisach m ają styczność. (Innymi sło­ wy, rzeczywiście spraw, by użytkownicy stali się odbiorcami). • Korzystaj z więcej niż jednego kanału komunikacji społecznościowej, by dotrzeć do jak największej grupy odbiorców. W yjdź im naprzeciw — nie m ożesz oczekiwać, że sami zechcą skorzystać z nowego serwisu tylko po to, by otrzym ywać od Ciebie aktualizacje. • Nie oszałamiaj odbiorców nadmiarem treści. Korzystaj z różnych serwisów rozsądnie, zgodnie z konw encjam i stw orzonym i dla każdego z nich. O pracuj H arm onogram publikacji. • Zam ieść Linki Społecznościow e na stronie głów nej, aby p rzekierow ać czytelników do Twoich kanałów komunikacji społecznościowej; ułatw im zostanie odbiorcami.

M edia społecznościowe od podstaw

| 397

• Jeżeli Twoja organizacja tworzy dużo materiałów, a jej poszczególne produkty lub po­ ruszane przez nią tematy m ają w iele różnych grup odbiorców, rozważ wykorzystanie Kanałów Tem atycznych zam iast jednego, zbyt intensywnego strumienia treści. • Aktualizacje statusu, streszczenia i nagłówki pisz zgodnie z form ułą Odwróconej Mikropiramidy. Użytkownicy chętniej czytają więcej, kiedy mają do czynienia z umiejętnie napisanymi i odpowiednio chwytliwymi tekstami. 3. Pozwól czytelnikom zdecydować, czy materiały są dobre. Daj czytelnikom m ożliw ość dzielenia się Twoimi treściami z w łasnym i odbiorcami, a po­ za tym pozwól im przesyłać materiały sw oim bliższym kontaktom pryw atnie. Zbieraj informacje zwrotne przy użyciu system ów głosow ania, oceniania (typu „kciuk w górę, kciuk w dół") oraz innych. Zw róć uwagę na to, o których materiałach mów i się aktywnie, jako że jest to kolejna oznaka ich jakości. • Daj ludziom m ożliw ość komentowania publikow anych materiałów, lecz podejdź do tego selektywnie. Mało ciekawe wiadomości i posty blogowe nie przyciągają zbyt wielu komentarzy, a puste listy komentarzy nie zw racają uw agi. W iększa liczba komentarzy może natom iast przyciągnąć jeszcze więcej czytelników. • Zamieszczaj W idgety W spółdzielenia obok postów, aby ludzie mogli się bez trudności dzielić nimi ze swoimi własnymi odbiorcami. Jest to bardzo użyteczny mechanizm — pozwala na przekazanie treści większej liczbie ludzi, aktywizuje osoby przesyłające je dalej, a także dostarcza Ci dane na temat tego, które z tych elementów są najpopularniejsze. • Przyciski „wyślij e-mailem" pozwalają czytelnikom na prywatne przesyłanie materiałów osobom, z którymi pozostają w bliższych kontaktach. A rtykuły przesyłane tą drogą mają duże szanse na przeczytanie, jako że odbiorca otrzymuje materiały, które zostały jemu konkretnie polecone. Taka Osobista Rekomendacja (rozdział 1.) ma niezw ykłą moc. • Kiedy publikujesz materiały w rodzaju opisów produktów lub przepisów — czyli ta­ kie, które m ogą być skomentowane negatyw nie bez szkody dla Twojej organizacji — rozważ danie ludziom możliwości recenzowania i oceniania ich. W spólnym wysiłkiem będą w tedy mogli oddzielić lepsze treści dla gorszych — z pożytkiem dla innych czy­ telników. (Może się to jednak przyczynić do kłopotów, jeżeli poprosisz ludzi o ocenianie produktów, które Twoja organizacja produkuje i w których istnienie jest zaangażowana). • Pozwól użytkownikom „głosow ać" na ulubione m ateriały. M ożna to robić za pomocą kontrolki „Lubię to", gwiazdki, kciuka w górę albo jakiegokolwiek innego mechanizmu. Więcej szczegółów na ten tem at znajdziesz w opisie wzorca Vote to Promote („Zagłosuj — w yprom uj") w bibliotece wzorców Yahoo! lub książce Designing Social Interfaces. 4. Spraw, by te dobre materiały dało się znaleźć. Swoją stronę główną m usisz dobrze zorganizow ać, regu larnie um ieszczać na niej nowe m ateriały oraz w paskach bocznych przed staw iać najczęściej przeglądane treści, listy najwyżej ocenianych materiałów i inne wizualizacje udostępnianych przez Ciebie treści. U żytkow nikow i, który kliknął daną pozycję, przedstaw pow iązane elem enty, a także udostępnij zarchiw izow ane treści i dyskusje. Um ieść treści tam, gdzie będzie je mogła znaleźć w yszukiw arka, ponieważ — w ostatecznym rozrachunku — to tą drogą w ięk­ szość ludzi będzie do nich docierać. • Umieść na stronie głównej Newsbox, w którym przedstawisz najnowsze artykuły, wiado­ mości, posty blogowe, filmy itp. Są to zwykle „zasoby społecznościowe", które promuje się za pośrednictwem mediów społecznościowych, a które publiczność może komentować.

398

|

Rozdział 9. M e d ia społecznościowe

• Jeżeli zbierasz dane o tym, ile razy dany element przekazano dalej, przesłano e-mailem, oceniono lub skomentowano, m ożesz utw orzyć Ranking Treści służący do przedsta­ w iania najpopularniejszych elementów. • Rozważ utworzenie „listy przebojów " Twojego bloga, kolekcji filmów lub jakiegokol­ w iek innego dużego zbioru materiałów. Nowi czytelnicy zyskują w ten sposób bardzo w ygodny punkt w yjścia. Dopilnuj, by zajął się nią ktoś kom petentny, kto zadba o jej aktualność i trafność. • Kiedy użytkow nik przechodzi do postu blogowego, wiadomości bądź innych tego ro­ dzaju treści, pokaż mu zestaw linków do pow iązanych materiałów. M ożna założyć, że czytelnik jest zainteresow any danym tematem — może w zw iązku z tym chciałby po­ czytać coś więcej. Zachęć go do dalszego czytania i poruszania się po Twojej stronie. • Sprawdź, czy Tw oje m ateriały pojaw iają się w w yszukiw arkach. D opilnuj, by tytuły i inne m etadane trafnie opisyw ały zasoby. Spraw dź też, czy pole wyszukiw ania na Twojej witrynie odpowiednio w skazuje poszukiwane treści. • Twórz spójne tożsamości społecznościowe o zrozumiałych nazwach. Czy przypadkowy użytkow nik Facebooka znajdzie w łaściw ą stronę facebookową, jeżeli w pisze w wyszu­ kiwarce nazw ę Twojej organizacji? Czy też m usi w ejść na Tw oją w łaściw ą stronę inter­ netową, by skorzystać z Linków Społecznościow ych? (Taką m ożliw ość — rzecz jasna — również powinien mieć, ale m ożliw ość znalezienia strony na samym serwisie społecznościowym nie w ymusza na nim podjęcia większego wysiłku). 5. Wymieszaj swoje dobre materiały z dobrymi materiałami użytkowników. Publikuj artykuły, posty blogowe, recenzje i filmy opracowane przez odbiorców. Organi­ zuj konkursy zdjęciowe i prezentuj prace zw ycięzców — rzecz jasna, wspominając o au­ torach. W iększość organizacji nigdy nie w chodzi na ten poziom, ale nie ma w tym nic złego. Nie dla każdej firmy lub organizacji non profit byłoby to odpowiednie. Jeżeli jednak Twoi czytelnicy są entuzjastyczni i utalentowani, nawiąż z nimi współpracę! 6. Opiekuj się społecznością. Ta wskazówka również nie jest odpowiednia dla każdej organizacji. Istnieją jednak takie, które stworzyły całe społeczności internetowe skoncentrowane na ich ulubionych tema­ tach lub zajęciach — ogrodnictwie, grach, muzyce, technologii itp. N ie ma wielu dowo­ dów na to, że tego rodzaju społeczności wzmacniają w izerunek m arki lub zw iększają jej udział w rynku, więc na to nie licz. Społeczności takie dają jednak ludziom jakieś m iejsce w internecie, do którego mogą się udać, gdzie m ogą zadaw ać pytania, nawiązywać przyjaźnie, dzielić się myślami, pom agać sobie nawzajem, wyżyw ać się emocjonalnie, wygłupiać i dzielić materiałami, które uznają (oni, nie Ty) za ciekawe.

Wzorce Przy tworzeniu treści społecznościowych rozważ wykorzystanie następujących wzorców: 1. Przegląd Tematyczny 2. Osobiste W ypowiedzi 3. W spółdzielenie I Komentowanie 4. Zagajenia 5. Odwrócona M inipiramida

W zorce

| 399

Przy projektowaniu mechanizmów określających kiedy, gdzie i jak szerzy się treści, skorzystaj z następujących wzorców: 6. Harmonogram 7. Kanały Tematyczne 8. Linki Społecznościowe 9. W idget W spółdzielenia 10. Newsbox 11. Ranking Treści 12. Najnowsza Aktywność

Przegląd Tematyczny

Rysunek 9.1. Tematy omawiane na facebookowej stronie Epicurious Co zrobić

Regularnie publikuj artykuły lub linki odnoszące się do wiadomości, historii z życia wziętych, zdjęć, filmów, ogłoszeń publicznych oraz innych rodzajów treści. Pow strzym uj się przed prowadzeniem bezpośredniej autopromocji. Kiedy używ ać

Chcesz zwiększyć rozpoznaw alność nazw y organizacji, zapewnić dobry stosunek do niej, w ejść w relację z w iększą liczbą klientów oraz ew entualnie zw iększyć sprzedaż. Chcesz, by czytelnicy śledzili publikowane przez Ciebie treści, czerpali przyjemność ze styczności z nimi; dysponujesz środkami pozw alającymi na wynajdowanie lub produkcję takich treści.

400

|Rozdział 9. M e d ia społecznościowe

D laczego

Zróżnicowanie tematyczne i rodzajów mediów sprawia, że treści są atrakcyjne dla szerszej grupy odbiorców, niż gdyby ograniczały się do węższego zakresu tematycznego. Dzięki temu niektórzy z odbiorców mogą również zapoznać się z tematami, z którymi w innym przypadku nigdy by się nie zetknęli. W ystarczy um ieścić pewne treści w ich strumieniach. Bardziej istotną kwestią jest to, że każdy elem ent musi być sam w sobie interesujący. Chcesz, by odbiorcy czytali to, co piszesz, klikali publikow ane przez Ciebie linki, oglądali Tw oje fil­ my i czekali z wytęsknieniem na nowe posty. Co więcej, chcesz, żeby czytelnicy przekazywali te m ateriały swoim w łasnym czytelnikom i bliższym znajomym — w ten sposób ludzie mogą „zakaźnie" zaznajom ić się z Tobą, a być może także zdecydow ać się na zostanie Tw oim i sta­ łymi czytelnikami. W jaki sposób

W ybierz zestaw tematów, które są zw iązane z Tw oją misją i interesują wielu ludzi. W przy­ padku omówionych w tym rozdziale organizacji do owych tematów należą m.in. kuchnia, sport, przyroda, podróże, ekologiczne technologie, polityka, wychowywanie dzieci, pomoc po katastrofach, nowe technologie i nauki ścisłe. Takie tematy interesują ludzi. Jakimi wywołującymi emocje i zainteresow anie tematami możesz się zająć? Opracuj przegląd tematyczny pasujący do Twojej organizacji. Każda organizacja, która z po­ wodzeniem wykorzystuje media społecznościowe, odnosi się do wyjątkowego zestawu tematów i rodzajów treści; łączy je taka w łaśnie różnorodność i ogólna atrakcyjność materiałów. Dłuższe treści można publikow ać na blogu. Taki post blogowy m ożna zam ieścić na serwisie mikroblogow ym lub ogólnie przew idującym korzystanie z krótszych komunikatów, np. na Tw itterze. (W iększość organizacji nie przekazuje w szystkich swoich postów blogowych ta­ kimi kanałami). Krótkie, niezbyt w ażne komunikaty można publikow ać bezpośrednio na mikroblogach. Zachęć czytelników do komentowania tego, co piszesz w postach. Z reguły, komentarze po­ jaw iają się częściej na serwisach społecznościowych w rodzaju Facebooka i mikroblogowych typu Twitter. Ludzie niekiedy komentują posty blogowe, ale gdy to piszę, na blogach kon­ w ersacje się nie pojawiają, ponieważ można je prow adzić lepszymi kanałami. N ie przeładow uj kanałów społecznościow ych nadm iarem treści! Przeczytaj opis w zorca Harmonogram, aby dowiedzieć się więcej o ilości treści i rozplanowaniu czasowym. Unikaj prowadzenia działań jednoznacznie marketingowych. Rzecz jasna, w szerszym zakresie wszystko jest marketingiem, ale użytkownicy wiedzą, kiedy usiłuje się im coś sprzedać, i nie lubią tego. Można założyć, że zdecydowali się otrzym ywać od Ciebie nowości nie po to, by utonąć w reklamach. Publikuj zatem godne uwagi lub zabaw ne m ateriały, a reklamuj jedynie bardzo konkretne i przydatne rzeczy — kody zniżkowe, nowe produkty lub przypomnienia o cieszących się popularnością wyprzedażach. Przed publikacją zastanów się, czy odbiorcom byłoby szkoda, że nie mogli tego przeczytać. Oto rodzaje materiałów, które m ożesz uwzględnić: • wiadomości, • w yw iady z ekspertami z danych dziedzin,

W zorce

|

401

• krótkie, pobudzające cytaty i bon moty, • recenzje produktów, • relacje lub filmy dotyczące tego, co się dzieje „za kulisam i" Twojej organizacji, • przepisy i instrukcje, • ogłoszenia publiczne, • możliwości w sparcia organizacji charytatywnych i inicjatyw dobroczynnych, • treści humorystyczne, • felietony, • listy od czytelników, • krótkie opowieści, fikcyjne bądź prawdziwe, • w ystępy muzyczne lub artystyczne, zw ykle na filmach, • pokazy slajdów, • podcasty, • pytania, na które czytelnicy m ają odpowiedzieć (przeczytaj opis wzorca Zagajenia), • regularne wypowiedzi pracowników na w ysokich stanowiskach (przeczytaj opis wzorca Osobiste W ypowiedzi), • posty blogowe innych ludzi (przeczytaj opis wzorca W spółdzielenie I Komentowanie). Pamiętaj, że odbiorcy w ykorzystają udostępniane przez Ciebie materiały w e w łasnych celach: do utworzenia lub ciągłego podtrzymywania swojej tożsam ości internetowej („Interesuje mnie ten temat"), przekazywania informacji swoim bliższym kontaktom, zabawiania szerszego grona znajomych, niebezpośredniego w yrażania opinii albo po prostu do utrzymywania kontaktu z innymi. Czy Twoi odbiorcy będą chcieli to robić przy użyciu Tw oich materiałów? Czy są śmieszne, kontrowersyjne, piękne, w iarygodne lub autentyczne? Przykłady

Starbucks publikuje treści, którym i m ogą być zainteresow ani klienci tej sieci. Tem atam i są kawa, herbata, specjalności lokalu, muzyka, inicjatywy dobroczynne i inne sprawy. Niektóre z nich porusza się w form ie artykułów tekstow ych, inne w form ie film ów , a jeszcze inne przekazuje się z innych źródeł. Na rysunku 9.2 widnieje strona facebookowa Starbucks. Blogi korporacji muszą utrzym yw ać równowagę między koncentracją na przedstawianych tem atach a ich różnorodnością. Jak w id ać na rysunku 9.3, na blogu W hole Foods m ożna znaleźć w iele m ateriałów na tem at naturalnej żyw ności, podczas gdy blog G oogle, który odzw ierciedla różnorod ność produktów i usłu g firm y, om aw ia o w iele szerszy zakres tem atów .

402

|Rozdział 9. M e d ia społecznościowe

S tarb u c k s

On Monday 3/28 (9am PDT/noon EDT) we are doing a live stream with our ceo, Howard Schultz about his new book, 'Onward: How Starbucks Fought tor Its Life without Losing Its Soul'. Tune in on our fecebook page! Pre-order the book here: http://onwardbook.com/pre-order-onward

ft

O n w a rd B o o k T o u r L iv e C h a t w ith H o w ard S c h u ltz 28 marca a t 09:00

■fH Lubię to! ■Dodaj komentarz •Udostępnij ■24 marca o 23:55 ■ oó Osoby (3.959) lubią to. Zobacz wszystkie komentarze: 281 |Napisz komentarz.,.

Starbucks There are 87,000 different drink combinations. How many have you tried? S ta r b u c k s S ig n a tu r e D rin k B u ild e r | S ta rb u c k s

mystarbuckssignature.com Personalize your drink and discover your Starbucks Signature. With options from A (Americano) to well, almost Z (White Chocolate Mocha), there are more than 87,000 espresso drink combinations at Starbucks. ¡1Lubię to! ■Dodaj komentarz •Udostępnij ■21 marca o 22:33 ■ ^ i i Osoby (10,875) lubią to. Zobacz wszystkie komentarze: 1,583 Napisz komentarz.,.

Starbucks Hope you didn't forget to wear green for St, Patrick's Day I It's our favorite color. Zobacz tłumaczenie Lubię to! ■Dodaj komentarz ■Udostępnij ■ 17 marca o 18:16 • a i Brett Stevens i 15.628 innych lubią to.

ęj

Zobacz wszystkie komentarze: 867

Napisz komentarz.,.

Rysunek 9.2. Strona facebookowa Starbucks

E atin g our w a y through Earth D a y P i K o w Auttralian W im H«Ip 1» Hart Tor Thoia Hard To Racvcla »S'» Food on Film: The Garden Let's Stop Pitying With Our Food Cork IkHonreit

«72/201006 36 00 AM

G reater tran sp are n c y a ro u nd go vern m en t req u ests «202010 1104:00 AM

Introducing G o o g le P la c e s «202010 06 0000 AM

P n m u m lo d y U f t * - AW onhy OMUtngt Pineapple Perfection

T h e art of se a rc h results

let's Not Mess With Mother Nature

«10201001 0000 PM

Food In Reverse Food on Film: No Impact Man

S o a r in g into the cloud

Chance To Win A Trip To Costa Ri

«102010 1000.00 AM

C on trove rsial content and free e x p re ssio n o n the web: a refresher «102010 09 23 00 AM

Older p o m available in the WfmJ* story Arcluvtt

Im agery for Q in gh ai, C h in a e arthquake «102010 06 56 00 AM lOoes from m* o^ e a ftL H L e tta B fe a i

T h is w e e k in se a rc h 4/16/10 «16/2010 06 03 00 PM This is one of a ratyAar i*n»j of posts on search axpananca ipdatas Look lor (ha tabat Pm

G o o g le A p p s h igh ligh ts - 4/16/2010 «102010 11 58 00 AM Ths is poit of s regular tanaa of Ooogta Appa upMN n u »a post avary coup*# of w s*s Look h r (ha labst "Gooata Apps faohtohd* and sobsenba to tha sanas • €

Rysunek 11.24. Mochimedia Na wielu stronach stosuje się bardzo cienkie obwódki i linie oddzielające, które odzwiercie­ dlają właściwości graficzne tekstu głównego. Na stronie internetowej Good (rysunek 11.25) kropkowane linie o szerokości piksela naw iązu ją do subtelnego, szeryfow ego kroju tekstu z paska bocznego. Do kroju bezszeryfowego można lepiej naw iązać przy użyciu ciągłej linii.

W zorce

| 505

Rysunek 11.25. Fragment strony Good Na stronie Dakine sprzed kilku lat elementy te są nieco pomieszane. Na rysunku 11.26 wi­ dzimy, że wykorzystano na niej wiele zróżnicowanych elementów, lecz postrzępione białe linie istotnie naw iązują do kroju użytego w logo. W szystko to wyw ołuje w rażenie ruchu, napięcia i przebojowości, na czym designerom ewidentnie zależało — Dakine sprzedaje sprzęt spor­ towy przeznaczony dla m łodych osób.

Rysunek 11.26. Dakine

506

|

Rozdział 11. Estetyka

Ździebełka

T H E

« no

S T A T E

H E R M I T A G E

M U S E U M

PV C C K.U

I N G L1SH LANG UAG E

£

I1HTEPIIET MAIAII1II

& SHOP ONLINE

J AK. Vl K I I . I E T O B TI C K ET BOOKING

C o p yrig h t @ 2 0 1 0 S ta te H erm itage M useum AH rights reserved. Im age U sage Policy. A b o u t the Site

Rysunek 11.27. Strona główna HermitageMuseum.org C o z ro b ić

Używaj linii grubych na jeden piksel w charakterze obwódek poziomych oddzielaczy i tekstur. K ie d y u ż y w a ć

Chcesz, by interfejs w yglądał elegancko i dostojnie. W ja k i s p o s ó b

Oto kilka z wielu m ożliwych sposobów wykorzystania Ździebełek w interfejsie: • do wyróżnienia Zatytułowanych Sekcji poprzez podkreślenie ich tytułów, • do oddzielenia obszarów z różną zawartością — poziomymi lub pionowymi oddzielaczami albo obwódkami, • jako drogowskazów kierujących w zrok po całości kompozycji, • do zamieszczania m iędzy obszarami o różnych kolorach tła w celu wyróżnienia granicy m iędzy nimi, • w teksturach, np. siatce lub bloku poziom ych linii, • w ikonkach, obrazach i rysowanych grafikach, • jako obwódek kontrolek w rodzaju przycisków.

W zorce

| 507

Ździebełka w yglądają szczególnie dobrze, kiedy znajd ują się obok tekstu pisanego bardzo cienkim krojem bezszeryfowym. Pamiętaj, że szare linie spraw iają w rażenie cieńszych od czarnych, naw et kiedy obydwie są grubości jednego piksela. Zasada ta sprawdza się również w odniesieniu do innych jasnych kolorów, takich jak m orski w przykładzie z rysunku 11.27. Im kontrast między linią a tłem jest mniejszy, tym węższa i lżejsza wydaje się linia. Innym sposobem na rozjaśnienie Ździebełka — i dodania przy okazji dodatkowej tekstury — jest przekształcenie go z linii ciągłej w kropkow aną. D robne, kropkow ane linie zaczyna się stosować pow szechnie w internecie, naw et jako podkreślenia llinków. N apięcie i dynamikę projektu można zwiększyć, przenosząc Ździebełko do linii bazowej wiersza tekstu. Tak się w łaśnie dzieje z tytułem i nagłów kam i w projekcie 8. CSS Zen Garden (rysunek 11.8). P rz y k ła d y

Na stronie internetowej z rysunku 11.28 Ździebełka zastosowano w wielu m iejscach: jako przytłumioną siatkę w tle, poziom e oddzielacze oraz bardzo delikatne obwódki ramek. Ździebełka wraz z teksturą w tle i w yśm ienitą typografią składają się na bardzo estetyczną oprawę graficzną.

Rysunek 11.28. Colly.com Podobnie w ykorzystano Ździebełka na stronie studia projektowego (rysunek 11.29). Zw róć uwagę na ich użycie w logo, kropkowanych liniach oddzielaczy i teksturze z pochylonymi kreskami, stosowanej jako obwódka dla m iniaturek i pojawiającej się u dołu strony.

508

|

Rozdział 11. Estetyka

Rysunek 11.29. RibbonsOfRed.com

Kontrastująca Grubość Tekstu

Rysunek 11.30. TED

W zorce

| 509

C o z ro b ić

Użyj co najmniej dwóch kontrastujących krojów — jed n ego lekkiego i przejrzystego, a drugiego cięższego i ciemniejszego — do oddzielenia różnych poziom ów inform acji i zw iększenia atrakcyjności wizualnej. K ie d y u ż y w a ć

W ażne elementy strony składają się z tekstu, a chcesz, by struktura strony była w pełni zro­ zumiała na pierw szy rzut okiem. Chcesz, by strona wyglądała porywająco. D la c z e g o

Dwa kroje różniące się od siebie grubością tworzą silny kontrast wizualny. Pod względem estetycznym kontrast kreuje dramatyczny i przyciągający oko efekt wizualny. Duży kontrast typograficzny, w tym rozm iaru, faktury, koloru, a zw łaszcza grubości spraw ia, że strona z całą pewnością nie będzie nudna. M ożesz w ykorzystać ten kontrast do ustru kturyzow ania tekstu na stronie. Przykładowo grubszym tekstem m ożesz zapisyw ać tytuły i nagłówki, wzmacniając hierarchię wizualną. W ytłuszczony tekst na rysunku 11.30 przyciąga wzrok. W ynika z tego, że kontrast grubości krojów w takim samym stopniu wpływa na poznaw anie strony jak estetyka. (W rozdziale 4. znajdziesz omówienie kwestii hierarchii wizualnej). W ja k i s p o s ó b

W zorzec ten ma wiele możliw ych zastosowań. W spom niałam już o wykorzystaniu wytłusz­ czonego tekstu w nagłówkach, ale istnieją też inne zastosowania. Oto one. • Tw orzenie bardzo m ocnych nagłówków i podtytułów rodem z czasopism. • Oddzielanie oznaczeń od danych w dwukolum nowej liście. • Oddzielanie linków naw igacyjnych od informacji. • W skazyw anie zaznaczeń, np. zaznaczonych linków lub elementów listy. • Akcentow anie w yrazów w wypowiedzi. • Oddzielanie w yrazów w logotypie. Jeżeli używasz krojów, których tekst jest większy od tekstu głównego, dopilnuj, by kontrast był zauważalny. Kiedy w rodzinie krojów można znaleźć kroje o różnych grubościach, takie jak Helvetica Neue; wybierz te, które różnią się o co najmniej kilka stopni. Słaby kontrast sprawia w rażenie przypadkow ego, a nie zam ierzonego. (Odnosi się to również do innych właściwości krojów. Jeżeli dwóm elementom tekstowym nadajesz różne rozmiary, różnica powinna być w yraźna; kiedz chcesz skorzystać z różnych rodzin krojów, nie pow inny być zbyt podobne do siebie). P rz y k ła d y

Na stronie filmu na witrynie National Film Board of Canada w ramach harmonijnej i zwięzłej kompozycji wykorzystano trzy bardzo różne rozmiary tekstu. Jej dramatyzm i moc odzwier­ ciedlają pow agę tematyki filmu.

510

|

Rozdział 11. Estetyka

THE ST O R Y OF THE LAST GREAT SU PPLY OF FRESH D R IN K IN G WATER ON EARTH

©WATERLIFE Rysunek 11.31. Szczegóły na stronie Waterlife.nfb.ca Zabawny projekt z rysunku 11.32 odznacza się bardziej złożoną hierarchią w izualną, stwo­ rzoną z użyciem wielu stylów i rozmiarów tekstu. Kontrastującą Grubość Tekstu wykorzy­ stano do zaakcentowania nagłówka „W O RKFLO W ", strzałek, tytułów kolum n oraz poszcze­ gólnych fragmentów tekstu głównego. W yszczególnione fragmenty odróżniają się nie tylko w iększą grubością tekstu — są białe, podczas gdy tekst główny jest szary. Dzięki temu owe fragmenty w szczególnym stopniu kontrastują z ciemnym tłem, co przyczynia się do zwięk­ szenia ich odczuwanej grubości.

C om

p le te i j o u r

WORKFLOW

C o m p le t e

Mercurial Git Subversion O u t o f th e b o x in te g ra tio n

N aturally. Kaleidoscope integrates

.psd .txt .png .jpg .html S u p p o r te d file f o r m a ts

Integration w ith (tit. M ercurial

You do n't h a ve to |ump through

SVN. and Bazaar is a m atter of

hoops to cha ng e w na t you 're

Subversion c lie n t It also w orks g re at w ith

clicks. For e verything else, there s ksdlft

com pering. D ro p any num ber o f flhts on a

TextMate s SVN bundle and c o rn erston e

Kaleidoscope's included c o m m an d-tn e tool

com parison to a d d th em , it's th a t simple.

a

tn V ersions c u r aw ard-w inning

your workflow w ith K a le id o s c o p e . it all works

Git. S V N . M e rc u ria l, d r a g a n d d ro p ,

Rysunek 11.32. Strona z KaleidoscopeApp.com

W zorce

I

511

W reszcie, na rysunku 11.33 przedstawiam najbardziej w yrazistą różnicę rozmiarów tekstu, jaką kiedykolwiek w idziałam w sieci. Olbrzymie litery nagłów ka znajdują się w równowadze (mniej więcej) z tekstem głównym ze względu na swój ciemny kolor. W obrębie tekstu głów­ nego Kontrastująca Grubość Tekstu została wykorzystana ponownie przy wyszczególnionych słowach i zw rotach — podobnie jest w przypadku adresu URL w lew ym górnym rogu, gdzie grubszy tekst umieszczony jest obok cieńszego.

jo n b r o u s s e a u

I’m an Associate Creative Director for Boston University’s N ew M edia department. I have eight ye a rs of experience designing interactive & print media, and I am the primary designer for the Art Institute of B osto n 's Porter Square Gallery In Cambridge. MA. Scroll down to view so m e

of

m y work sam p les below or get in touch with me if

you have a ny questions or require further information.

Rysunek 11.33. JonBrousseau.com

Skórki I M otyw y

Rysunek 11.34. Cztery przykładowe motywy Firefoksa C o z ro b ić

Pozwól użytkownikom i osobom z zewnątrz tworzyć własne grafiki i style do wykorzystania w kształtowaniu formy i atmosfery aplikacji. K ie d y u ż y w a ć

W śród użytkow ników Twojej aplikacji znajduje się wielu ludzi, którzy bardzo dobrze znają jej interfejs. Przed takim i osobami interfejs staw ia stosunkow o n iew ielkie wymagania po­ znaw cze — więc nie wszystkie elementy m uszą być od razu rozpoznawalne.

512

|

Rozdział 11. Estetyka

Ponadto ci użytkownicy lubią majstrować. Cenią sobie styl i m ają skłonność do ustaw iania preferencji oprogramowania zgodnie z w łasnym gustem. D la c z e g o

Kiedy ludzie porządkują i przekształcają swoją przestrzeń osobistą — fizyczną bądź wirtualną — z tych czynności wywodzą swoje poczucie posiadania owej przestrzeni. Jest to fundamen­ talna potrzeba ludzka (choć nie w szyscy dążą do jej zaspokojenia; wielu potrafi się w pełni zadowolić „ustawieniami fabrycznym i" programu). Zmiana najprostszych preferencji doty­ czących koloru i tekstu to jeden z najpowszechniejszych sposobów personalizacji środowiska, lecz Skórki I M otywy daleko w ykraczają poza samą zm ianę kolorystyki i wyglądu tekstu. Internet jest pełen dowodów na to, że użytkownicy bardzo lubią różnorakie motywy graficz­ ne. Mam tu zresztą na myśli dwie różne grupy użytkowników: tych, którzy pobierają m oty­ wy i korzystają z nich, oraz tych, którzy dodatkowo sami je projektują. Przedstawiciele tej drugiej grupy postrzegają motywy graficzne jako sposób na danie upustu swojej kreatywno­ ści i przedstawienie swoich dzieł na forum publicznym . W ielu z nich to graficy. M ogą oni być niezwykle dobrze zaznajom ieni z projektem Tw ojego interfejsu. Tak czy inaczej, wiele aplikacji i serwisów internetow ych obsługuje w ym ienne skórki i mo­ tywy, a motywów tworzonych przez użytkowników jest mnóstwo. Czas spędzony na kreowaniu tychże motywów jest świadectwem tego, jak potężna jest wola tworzenia. Aplikacje z wymien­ nymi skórkami dają projektantom m ożliw ość spełnienia ludzkiej potrzeby wyrażania swojej kreatywności. W ja k i s p o s ó b

Dokładny sposób projektowania i im plementowania obsługi skórek w aplikacji jest w pełni zależny od używ anych przez Ciebie technologii, więc trudno tutaj uogólniać. Po pierwsze, pamiętaj, że wygląd każdej aplikacji na W indows m ożna zm ienić za pomocą skórki lub motywu. M otywy można też w ybrać dla kilku popularnych przeglądarek, co w i­ dać na rysunku 11.34. Po drugie, motywy serwisów internetowych w rodzaju W ordPress (rysunek 11.35) wpływają na więcej rzeczy niż same style graficzne stron blogowych. M otywy te wpływ ają również na rozmieszczenie w pisów, rodzaje treści w ystępujących w paskach bocznych, a naw et na to, ja­ kie informacje w e wpisach są widoczne, a jakie są ukryte. Projektowanie architektury interfej­ su mogącej obsłużyć to wszystko jest trudne i wykracza poza zakres tematyczny tej książki. Zachęcam do zapoznania się z istniejącymi przykładam i aplikacji i w itryn, które obsługują w ym ienne motywy. Czasami padają uwagi, że skórki utrudniają obsługę interfejsów. Jest to prawda, gdy są źle zaprojektow ane. Zastanów się jednak, jakie to w łaściw ie ma znaczenie. Czy każda aplikacja m usi idealnie sprzyjać celom poznawczym? (Domyślne ustawienia formy i atm osfery nie są idealne, choć z pew nością są lepiej przetestowane pod w zględem używ alności niż skórki). W przypadku aplikacji, którą użytkownik już dobrze zna, a która nie stawia dużych wymagań poznawczych, można uznać, że jej bazowa używ alność jest zadowalająca, a sprawa osobi­ stych preferencji estetycznych jest ważniejsza. Kiedy skórki są dostępne, ludzie m ogą samo­ dzielnie podjąć decyzje estetyczne niezależnie od tego, czy są obeznani z obsługą.

W zorce

|

513

W pewnym stopniu m ożesz — i powinieneś, gdyż należy to do Tw oich obowiązków jako projektanta — zdecydować, na jakim poziomie pow inno być m ożliw e w ybieran ie m otyw ów i skórek dla aplikacji. Możesz sprawić, by możliwa była jedynie zmiana kolorów, krojów i teł. M ożesz pozwolić na tworzenie skórek na poziom ie bitmap, dopuszczając tym samym zmianę wyglądu kontrolek przy jednoczesnym zachow aniu layoutu. M ożesz też dać możliw ość cał­ kowitej personalizacji. To do Ciebie należy rozstrzygnięcie, czy zupełna dowolność w tej ge­ stii sprawi, że interfejs stanie się zupełnie nie do użycia. Podejrzewam, że doskonałe projektowanie aplikacji — uwzględniające odpowiedni dobór funk­ cjonalności, zrozum iałe m odele organizacyjne, odpowiednią nawigację, dobry layout stron oraz wykorzystanie standardowych widgetów — sprawia, iż interfejs staje się bardziej od­ porny na kiepskie motywy. Zaprojektuj aplikację najlepiej jak potrafisz, a następnie pozwól lu­ dziom spersonalizować ją w stopniu, który uznasz za odpowiedni. Zobaczym y, co się stanie! P rz y k ła d y

Na rysunku 11.35 znajdują się cztery spośród wielu motyw ów dla blogów W ordPress. Inne platformy blogowe, takie jak Blogger i Drupal, rów nież oferują w iele m otyw ów . W iększość z nich daje użytkownikom — zwłaszcza obeznanym z edycją kodu H TM L i C SS — możliwość dodatkowego ich dostosowania.

Dem o W P

Demo WP

10 3

O m w łm y m « W m>lrnii i * f

Rysunek 11.35. Cztery motywy WordPress W i n n y c h b i b li o t e k a c h

http://quince.infragistics.com/Patterns/Skins.aspx

514

|

Rozdział 11. Estetyka

Bibliografia

Strony internetowe Oto internetowe biblioteki i kolekcje wzorców, do których odniosłam się w mojej książce. Niektóre z najlepiej znanych wzorców pojaw iają się wielokrotnie w różnych bibliotekach, lecz każdy autor na własny sposób opisuje je i ilustruje. Dodatkowy w gląd w niektóre z za­ wartych w tej książce wzorców możesz uzyskać poprzez zapoznanie się z ich odpow iednikam i z poniższych kolekcji. Yahoo! Design Pattern Library: http://developer.yahoo.com/ypatterns/ User Interface Design Patterns: http://ui-patterns.com Patternry: http://patternry.com Patterns in Interaction Design M artijna van W eliego: http://welie.com/patterns Quince: http://quince.infragistics.com W itryna książki The Design of Sites: http://www.designofsites.com/design-patterns/ W itryna książki Designing W eb Interfaces: http://designingwebinterfaces.com/explore W itryna książki Designing Social Interfaces: http://www.designingsocialinterfaces.com/patterns/M ain_Page Interface Design Patterns (ze szczególnym naciskiem na infografiki): http://patternbrowser.org

515

Design4Mobile: http://design4mobile.com Endeca User Interface Design Pattern Library (ze szczególnym naciskiem na wyszukiwanie): http://patterns.endeca.com W zorce związane z wyszukiw aniem i pokrewne, według Petera M orville'a: http://www.flickr.com/photos/morville/collections/72157603785835882/ Usability.gov przedstawia wyjątkowy, oparty na faktach zbiór wytycznych i zaleceń z dzie­ dziny projektowania interfejsów. Nie jest to biblioteka wzorców, lecz wartościowe źródło: http://usability.gov/guidelines/index.html Poniższe strony internetowe nie są kolekcjami wzorców , ale można na nich znaleźć ciekawe zbiory ogólnych przykładów z zakresu projektow ania. Korzystam z nich, kiedy potrzebuję przykładów lub inspiracji: The GUIdebook Gallery: http://www.guidebookgallery.org/ Pattern Tap: http://patterntap.com/ Na serwisie Vandelay Design znajduje się wiele stron z pięknymi przykładami projektów z dzie­ dziny e-handlu, organizacji non profit, kościołów, czasopism, portfolio projektantów, nawigacji oraz witryn korporacyjnych. Podaję tylko jedną z nich, na której znajdziesz pełną listę: http://vandelaydesign.com/blog/galleries/corporate-websites/

Książki Jeżeli chcesz poszerzyć swoją wiedzę w zakresie większym niż poruszony w książce, w ypi­ sane niżej pozycje są dobrymi punktami wyjścia do dalszej nauki. Rzecz jasna, świetnych książek o projektowaniu jest o wiele więcej, niż można tu podać. Poniżej zamieściłam „listę przebojów", od których m ożesz przejść do kolejnych źródeł. Z aczynam ją od książek d otyczących pro­ jektowania interfejsów ogólnie, a następnie przedstawiam kilka pozycji z konkretnych dziedzin, m.in. projektowania graficznego, formularzy, infografik, mediów społecznościowych i wyszu­ kiwania: Bill Scott, Theresa Neil, Designing Web Interfaces: Principles and Patterns fo r Rich Interaction, O 'Reilly, 2009. Douglas K. van Duyne, James A. Landay, Jason I. Hong, The Design o f Sites: Patterns fo r Cre­ ating Winning Web Sites, Second Edition, Prentice Hall, 2006. Dan Saffer, Designing fo r Interaction: Creating Innovative Applications and Devices, Second Edition, New Riders Press, 2009. Steve Krug, Nie każ mi myśleć! O życiowym podejściu do funkcjonalności stron internetowych, wyd. 2, Helion, 2010.

516

|

Bibliografia

Alan Cooper, Robert Reimann, David Cronin, About Face 3: The Essentials o f Interaction Design, W iley, 2007. Donald Norman, The Design o f Everyday Things, Basic Books, 1998. Peter Morville, Louis Rosenfeld, Architektura informacji w serwisach internetowych, Helion, 2003. W illiam Lidwell, Kritina Holden, Jill Butler, Universal Principles o f Design: 125 Ways to En­ hance Usability, Influence Perception, Increase Appeal, M ake Better Design Decisions, and Teach through Design, Second Edition, Rockport Publishers, 2010. Robin W illiams, The Non-Designer's Design Book, Third Edition, Helion, 2012. Donald Norman, Emotional Design: Why We Love (or Hate) Everyday Things, Basic Books, 2005. Luke W roblewski, Web Form Design: Filling in the Blanks, Rosenfeld M edia, 2008. Caroline Jarrett, Forms that Work: Designing Web Forms fo r Usability, M organ Kaufmann, 2008. 37signals, M atthew Linderman, Jason Fried, P rzyjazne w itryny WWW. Jak uczynić lepszymi komunikaty o błędach, Pomoc, form ularze i inne kluczowe punkty witryny, Helion, 2005. Edward R. Tufte, The Visual Display o f Quantitative Information, Second Edition, Graphics Press, 2001. Edward R. Tufte, Envisioning Information, Graphics Press, 1990. Edward R. Tufte, Visual Explanations: Images and Quantities, Evidence and Narrative, Graphics Press, 1997. Stephen Few , Inform ation D ashboard D esign: The E ffective V isual C om m unication o f Data, O'Reilly, 2006. Stephen Few, N ow You See It: Simple Visualization Techniques fo r Quantitative Analysis, Ana­ lytics Press, 2009. Christian Crumlish, Erin M alone, Designing Social Interfaces: Principles, Patterns, and Practices fo r Im proving the User Experience, O 'Reilly and Yahoo! Press, 2009. Joshua Porter, Serwisy społecznościowe. Projektowanie, Helion, 2009. Peter Morville, Jeffery Callender, Wzorce wyszukiwania. Projektowanie nowoczesnych wyszukiwarek, Helion, 2011. Na koniec przedstaw iam kilka klasycznych pozycji o w zorcach, które legły u podstaw tej koncepcji: Christopher Alexander, The Timeless Way o f Building, Oxford University Press, 1979. Christopher Alexander, Język wzorców. M iasta — budynki — konstrukcja, GW P, 2008. Erich Gamma, Richard Helm, Ralph Johnson, John M. Vlissides, Wzorce projektowe. Elementy oprogramowania obiektowego wielokrotnego użytku, Helion, 2010.

Książki

|

517

51B

I

Bibliografia

Skorowidz

A adres U RL, 118 afordancje, 250 agregacja treści, 54 agregator wiadom ości, 58 A kordeon, 155, 173, 218 narzędzia program istyczne Chrom e, 175, 176 panel form atow ania w W ordzie, 173 Picasa, 175 Yahoo!, 177 aktualizow any kanał, 55 A ktualności, 49, 54 C zytnik Google, 59 D ig g 57 Facebook, 58 projekty, 56 pryw atne, 56 publiczne, 56 strum ień aktyw ności, 56 treść aktualizacji, 55 Tw itter, 54 W iadom ości Google, 57 alarm , 39 algorytm rysowania, 325 algorytm sortowania, 322 analiza przyczyn źródłow ych, 24 A nim ow ane Przejście, 142 D esigning W eb Interfaces, 143 M ac OS, 142 rodzaje przejść, 143 wzorce Transition, 143 ankiety, 27 aplikacja A dobe Bridge, 62 A dobe Flash Builder, 70 Epicurious, 400, 461 Flash, 159 Flash Builder, 72

Freedom Trail, 467 GarageBand, 34, 24S GNOM E, 492 IMDb, 461 Inxight TableLens, 319 iPhoto, 61 M acPaint, 70, 72 M any Eyes, 119 M ATLAB, 43, 185 Photoshop, 70, 185 Picasa, 61, 175 Q uickBooks, 491 Raven, 70, 71 RIA, 46 San Francisco Crim espotting, 301 Sherpa, 22S Sum oPaint, 70, 71 tkdiff, 141 architektura inform acji (AI), 45 architektura strony, 47 arkusz stylu CSS, 157 Autom atyczne U zupełnianie, 377 A m azon, 377 Chrome, 3S0 Dopplr, 3S1 Firefox, 3S0 Google, 3S0 Kayak, 3S0 M ac M ail, 3S0 M ac OS Spotlight, 3S0 Safari, 3S0 Visual Studio, 3S1

B Bezpieczna Eksploracja, 31, S6 Bezpośrednie Przejście Do Elem entu, 235 Emacs, 237 M ac OS, 235

519

biblioteka wzorców, 17 biblioteka wzorców Transition, 143 biblioteka wzorców Yahoo!, 143, 436 biblioteki i kolekcje w zorców , 515 Blank Slate Invitation, 49 bliskość i dopełnienie, 148 Blogger, 514 branding, 474

C cechy interfejsów filtrowania, 294 Chm urka Inform acyjna, 66, 300, 317 aktualizow ana m apa, 300 m apa dotacji, 303 San Francisco Crim espotting, 302 W ykres M any Eyes, 302 Cleveland William, 335 cookies, 83 coplot, współwykres, 335 CSS Zen Garden, 475 Projekt 1, 476 Projekt 2, 477 Projekt 3, 478 Projekt 4, 479 Projekt 5, 480 Projekt 6, 481 Projekt 7, 482 Projekt 8, 483 Ctrl+A, 36 Ctrl+P/Enter, 41 Ctrl+S, 36 Ctrl+X, 36 Ctrl+Z, 276 czynność dw ukrotne klikanie, 247 polecenia klawiszowe, 247 przeciągnij i upuść, 248 w pisyw ane polecenia, 248 czytnik e-książek, 452 czytnik RSS, 55, 217

D dane w ejściowe, 343 dane w yjściow e w języku naturalnym , 367 dendrogram , 283 D esigning W eb Interfaces, 143 d iagram genetyczny, 327 diagram praw idłow ości, 326 Digg, 56 dobre oznaczenia, 96 dodatkow y wym iar, 333

520

|

Skorow idz

Dolny Pasek N aw igacyjny, 453 A m azon, 453 N PR, 454 O brazy Google, 455 drobne nierów ności, 187 Drupal, 514 Duże M arginesy, 460 Best W estern, 460 Epicurious, 462 IMDb, 462 dynam iczne form ularze, 194 Dynam iczne Kw erendy, 293, 308, 325 G oogle Public Data Explorer, 308 panel ustaw ień treem apy, 311 San Francisco Crim espotting, 311 dynam iczne W skazów ki, 371 dziel i rządź, 74

E edytor tekstu Emacs, 36 Edytor U stawień, 49, 50, 77 A m azon, 81 Facebook, 80 konfigurator produktu, 77 M ac OS, 77 ustaw ienia konta, 81 ustaw ienia profilow e, 80 w artości ustaw ień, 78 W indow s 7, 79 Yahoo!, 80 Ekspozycja, W yszukiw anie i Przeglądanie, 49 A bout.com , 53 A m azon, 53 CNET, 52 EMS, 50 Emacs, 36 Envisioning Inform ation, 333

F filtr Price, 310 filtr treem apy, 310 filtrowanie, 293 filtry A dobe Bridge, 62 Flex, 70 Flickr, 62 Fling Brian, 441 Form at Pobłażliw y, 362 M icrosoft O utlook, 364 N ew Y ork Tim es, 363 PayPal, 364 W eather.com , 362

Form at Strukturalny, 364 LiveJournal, 366 Photoshop, 364 form ularz, 343 formularz filtrowania wyników wyszukiwania, 368 form ularz zakupu, 373

G GarageBand afordancje, 250 polecenia, 249 gest, 450 ghosting, 183 gildia w zorców , 60 gildie wzorców niskopoziom ow ych, 49 Głębokie Linkowanie, 43, 47 Google Books, 119 schem at, 117 URL, 118 gradienty, 495 Grube M enu, 123 progresyw ne ujaw nianie, 124 serwis M icrosoftu, 123 Slate, 125 Starbucks, 125 W ebM D, 126 grupy fokusow e, 27 Grupy Przycisków, 251 A dobe Flash Builder, 253 Google Dokum enty, 251 iTunes, 254 M icrosoft W ord, 253

H H arm onogram , 416 częstotliw ość postow ania, 418 E-maile, 417 Posty blogowe, 417 Posty tw itterow e, 417 Strony facebookow e, 417 hierarchia listy, 208 hierarchiczna struktura w itryny, 128 H istoria Poleceń, 277 M A TLA B, 277 Photoshop, 279 U niks, 278

I infografika, 283, 294 integracja Facebooka z aparatem , 467

Inteligentne Elem enty M enu, 264 Illustrator, 265 M ac M ail, 264 M enu Gm ail, 266 interaktywna m apa narciarska, 293 interfejs Cover Flow, 227 do zarządzania zdjęciam i i film ami, 61 dynam iczny, 74 M acPaint, 70 przeglądania, 61 przeglądarkow y, 64 interfejsy M enu kontekstowe, 246 O dnośniki, 246 Panele poleceń, 247 Paski menu, 246 Paski narzędzi, 246 Przyciski, 246 Rozw ijane menu, 246 U kryte narzędzia, 247 interfejsy aplikacji produkcyjnych, 35

K kanał kom unikacyjny, 54 Kanał Tem atyczy, 418 CNN, 420 Google, 421 przegląd tożsam ości M icrosoftu, 422 segm entacja grup, 419 W ired, 418, 421 Karuzela, 82, 224, 225 A m azon, 226 Apple, 227 Flickr, 227 G oogle Książki, 226 iTunes, 227 M arriott, 224 N ew Y ork Tim es, 228 system A ndroid, 228 Kaskadująca Lista, 82, 208, 239 A lbum , 239 File Viewer, 240 Finder, 240 Kilka Barw, W iele W artości, 498 AdLucent.com , 501 Baby N am e W izard, 500 M int, 498, 499 Klisza, 448 ESPN, 451 W eather, 449 kod czasowy, 55 Kolory i kroje, 492

Skorow idz

|

521

kom unikat o błędzie, 391 koncepcje UI, 250 konfigurator produktu M ini Cooper, 136 K ontrastująca Grubość Tekstu, 509 JonBrousseau.com , 512 KaleidoscopeApp.com , 511 W aterlife.nfb.ca, 511 kontrolka, 343, 346 Dendrogram , 349 Dendrogram pojedynczego wyboru, 351 D w a pola tekstowe, 359 Dwa przew ijane pola, 359 Dwa suwaki, 358 E dytor tekstu sform atow anego, 356 Jednow ierszow e pole tekstowe, 354 Kalendarz, 360 K askadująca Lista, 349 K askadująca Lista z elem entam i przypisanym i do kategorii, 351 lista elem entów , 347 Lista pól wyboru, 351 N ieuporządkow ana lista, 354 Podw ójny suwak, 358 Pokrętło, 349, 357 Pole tekstowe o Formacie Pobłażliwym, 356, 359 Pole tekstowe o Formacie Strukturalnym, 357, 360 Pole tekstow e z m ożliw ością w pisywania znaczników , 356 Pole tekstow e z przyciskiem , 355 Pole tekstow e z w artością sprawdzaną po w prow adzeniu, 358 Pole wyboru, 347, 355 Przeglądarka, 350, 352 Przełącznik, 347 Przew ijane pole, 357 Przyciski opcji, 347 Rozw ijana lista z opcjami, 348 Rozw ijany Selektor, 360 Suw ak, 357 Suw ak z polem tekstowym , 358 Szereg pól wyboru, 350 Szereg przełączników , 350 tabela pojedynczego wyboru, 348, 349 tabela w ielokrotnego wyboru, 351 tabela w ykorzystująca w zorzec Pole N owego Elem entu, 353 tabela z przyciskiem , 353 tabela, na którą można przeciągać elementy, 353 Tekst, 354 W ielow ierszow e pole tekstowe, 355 W zorzec K reator Listy, 352 zegar, 360 koszt nawigacji, 96 niew ielkie odległości, 97

522

|

Skorow idz

Kreator, 49, 50, 73 im portu tekstu w Excelu, 76 M y Yahoo!, 73 serwisu M int, 76 Kreator Listy, 385 Flickr, 386 M icrosoft O utlook, 385 kroje, 486 krój pism a, 485 książki, 516 kw erenda, 294

L layout, 82, 145, 187 elem enty dynam iczne, 153 elem enty spokrew nione, 149 gęstość, 146 kolor tła, 146 listy elem entów , 150 otaczanie, 150 podpisy i kom entarze, 150 rozm ieszczenie i rozm iar, 147 rytm, 147 wyróżnianie drobnych elem entów, 147 zgrupow anie elem entów, 148 layout o luźno rozm ieszczonych elem entach, 474 layouty asym etryczne, 189 layouty sym etryczne, 189 leading, 486 leniw e ładowanie, 459 lightbox, 115 linie przepływ u wzroku, 151 Linki Społecznościow e, 128, 422 H uffington Post, 422 wabiki, 424 wady, 423 widgety, 424 lista filtrowanie, 204 przeglądanie, 204 sortowanie, 204 wyszukiwanie, 204 lista d ynam iczna, 54 lista elem entów , 47 lista linków, 110 lista płaska, 225 Lokalne Przybliżanie, 301, 316 Dock M ac OS, 319 Inxight TableLens, 318 kalendarz DateLens, 316 lupki map Cartifact, 320 obrazy Google, 320 zniekształcenie przestrzeni konceptualnej, 317

M M akra, 279 Excel, 281 nagrywanie, 280 odtw arzanie, 280 Photoshop, 279 tworzenie, 280 Visual Basic, 281 m akroodczyt, 297 m anipulacja, 145 M apa Sekwencji, 75 Boston Globe, 135 H anna Anderson, 134 instalator A dobe CS5, 136 M ini Cooper, 136 M apka Strony W Stopce, 127 Flickr, 131 Los A ngeles Tim es, 130 M apQ uest, 131 REI, 129 W all Street Journal, 130 W hole Foods, 127 m apy, 96 m edia społecznościow e, 395, 399 m em y, 44 M enedżer Obrazów, 49, 59, 113 A dobe Bridge, 63 filtry, 62 Flickr, 63 interfejs przeglądania, 61 iPhoto, 59 kolekcje publiczne, 62 m iniaturka, 59 Picasa, 62 Siatka M iniaturek, 60 TED, 64 w idok pojedynczego elem entu, 61 wzorce i kom ponenty, 60 YouTube, 63 M iernik Bezpieczeństw a Hasła, 374 Blogger, 376 Gmail, 374 M SN, 376 Yahoo!, 377 m iękka ostrość, 495 m ikroaktualizacje, 55 m ikroodczyt, 297 M ikroprzerw y, 37, 55 M iłość Do Klawiatury, 41, 60 m iniaturka, 59 M iniaturki Z Tekstem , 455 A pp Store, 455 Boston.com , 457

iBird, 458 IMDb, 457 Kobo, 457 M ashable, 457 N ew s, 457 Yahoo!, 457 YouTube, 457 m iniw ykres, 333 m odel naw igacji, 98 m odel organizacyjny, 285 geograficzny, 285 hierarchiczny, 285 liniowy, 285 sieć pow iązań, 285 tabelowy, 285 tekstowy, 285 M ullet Kevina, 189 M y Yahoo!, 75

N nagłów ek i stopka, 130 nagłów ek i stopka REI, 129 N ajnow sza A ktyw ność, 435 Boing Boing, 435 K itchen Table M ath, 435 M yStarbucksIdea, 437 Technology Review, 437 Yahoo! N ew s, 437 Yelp, 437 napięcie i dynam ika projektu, 508 narzędzia dla inżynierów oprogram ow ania, 48 narzędzia dla projektantów , 48 N arzędzia Dotykowe, 451 przeglądarka zdjęć na iPhone, 451 Stanza, 452 N arzędzia Logowania, 131 A m azon, 133 Flickr, 131 Gmail, 133 iTunes, 133 M int, 133 Scribd, 133 Twitter, 133 naw arstw ianie, 288 naw igacja, 98, 288 krok po kroku, 100 m odel Piram idy, 111 oś i szprychy, 98 panel m odalny, 101 pełne połączenie, 99 piram ida, 100 płaska naw igacja, 100 przeciąganie i przybliżanie, 100

Skorow idz

| 523

naw igacja wiele poziom ów , 99 wyjście ewakuacyjne, 102 wyraźne punkty wejścia, 101 zakładki, 101 naw igacja asocjacyjna, 98, 103 naw igacja funkcyjna, 98 naw igacja globalna, 98, 103 naw igacja i przeglądanie przeciąganie, 289 przybliżanie i oddalanie, 289 rozw ijanie i zw ijanie, 289 uszczegółow ienie treści, 290 naw igacja wierszowa, 98 N etvibes, 67 N ew sbox, 55, 427 A m erykański Czerw ony Krzyż, 428 Ford, 431 link „w ięcej", 429 nagłów ek, 429 opis, 429 Red Bull, 430 Sierra Club, 432 W hole Foods, 431 N ieskończona Lista, 458 Facebook, 459 iTunes, 459 M ail, 458 N orm an Donald, 473

O obrazowanie danych, 287 Obrazy, 493 obserwacja bezpośrednia, 27 O bszar Centralny, 155, 159, 218 A rtykuł na N ew fangled, 162 A rtykuł na Steepster, 162 Edytor tekstu Google, 161 Flash, 159 kolor, 160 kontekst, 160 nagłów ki, 160 rozm iar, 160 obszar interaktywny, 255 O bw ódki, 492 O bw ódki Zgodne Z Tekstem , 504 Dakine, 506 Good, 506 M ochim edia, 505 M oM A, 504 O dblokow yw anie Reakcyjne, 75, 156, 192, 194 Lexus, 197 Preferencje system owe M ac OS, 196

524

|

Skorow idz

TurboTax, 195 Odległe Tło, 494 Ecoki, 497 Firefoks, 494 M ercedes-Benz, 497 zróżnicow ana czytelność, 496 odstępy m iędzy wierszam i, leading, 486 O dwlekanie Decyzji, 34 O dw oływ alność, 271 Firefox, 271 okno instalacji A dobe AIR, 273 przerw anie czynności, 272 przycisk A nuluj, 272 Odwrócona M ikropiram ida A m erykański Czerw ony Krzyż, 415 tweet, 413 Ogląd Ze Szczegółam i, 297, 317 Google Finance, 299 N ew Y ork Tim es, 299 Perla, 297 Photoshop, 298 okno Znajdź i zam ień, 40 Okruszki, 134, 136 M othering.com , 138 narzędzia program istyczne Chrome, 139 panel sterow ania W indow s 7, 138 Target, 136 organizacja danych, 284 organizacja przestrzenna listy linków, 110 Osobiste Rekom endacje, 43 Osobiste W ypow iedzi, 404 Tweety, 405 Twitter, 404 oznaczniki głębokości, 495

P Paginacja, 232 A m azon, 235 Digg, 234 Drupal.org, 235 eBay, 235 Flickr, 235 Google, 234 Hulu, 235 Kayak, 235 Last.fm, 235 M othering.com , 235 Songza, 232 Target, 235 YouTube, 235 Pam ięć Prospektyw na, 39, 86 Pam ięć Przestrzenna, 38

Panel M odalny, 113 Kayak, 116 M acintoshu, 117 schem at, 114 SlideShare, 116 Panel Poleceń, 257 iPhoto, 257 m enedżer plików W indow s XP, 260 oznaczenie poleceń, 259 Picasa, 260 struktura wizualna, 259 um ieszczanie w interfejsie, 258 Pasek Przew ijania Z Adnotacją, 139 Chrom e, 141 M SN BC, 139 tkdiff, 141 persony, 27 Pionow y Stos, 447 ESPN , 449 REI, 449 W ashington Post, 449 W iadom ości Google, 447 Piram ida Flickr, 112 N ew York Tim es, 113 schem at, 111 pliki CSS, 83 Płótno I Paleta, 48, 69, 180 Flash Builder, 72 M acPaint, 72 Photoshop CS5, 69 Raven, 71 siatka przycisków , 70 Sum oPaint, 71 Płynny Layout, 103, 156, 198 Dokum enty Google, 200 Drupal.org, 199 M ac OS, 198 Podgląd, 266 Picasa, 268 Pow erPoint, 266 Starbucks, 268 Podśw ietlanie Danych, 303, 325 San Francisco Crim espotting, 305 W all Street Journal, 307 W ashington Post, 306 podśw ietlenie elem entu, 314 pokaz slajdów, 135 Pole adresu U RL, 462 Pole N ow ego Elem entu, 243 Excel, 244 M icrosoft Outlook, 243 Pow erPoint, 244

Połączone Aplikacje, 465 Freedom Trail, 465 Popraw ne W artości Dom yślne, 387 Kayak, 387 Photoshop, 389 Porady Innych, 42 pow tarzanie czynności, 40 Pragnienie N atychm iastow ej Satysfakcji, 32 prezentacja elem entów graficznych, 206 prezentacja treści, 82 prezentow anie danych chm urki inform acyjne, 295 legendy, 295 osie, linijki, skale i linie czasu, 295 oznaczenia, 294 podśw ietlanie, 295 rozrysowywanie, 295 problem naukow y, 43 progresyw ne ujaw nianie, 124, 179 projektow anie architektury interfejsu, 513 projektow anie dla urządzeń przenośnych, 441 Boston.com , 444 Fidelity.com , 444 JetBlue.com , 444 RuthsChris.com , 444 projektow anie form ularzy, 343 projektow anie graficzne, 288, 475, 483 kąty i krzywe, 488 kolor, 484 obrazy, 490 odniesienia kulturow e, 490 pow tarzanie m otyw ów , 491 przestrzeń i zagęszczenie, 488 tekstury i rytm, 489 typografia, 485 projektow anie stron, 103 projektow anie struktury inform acji, 204 projektow anie Treem apy, 338 Przegląd Tem atyczny, 400 Epicurious, 400 Google, 403 rodzaje m ateriałów , 401 Starbucks, 403 W hole Foods, 403 przeglądanie, 288 Przem ienne Tło, 229 arkusz Excela, 231 iTunes, 231 JetBlue, 229 paski zebry, 230 przepływ, 36 przepływ wzroku, 151 przestrzeń konceptualna, 317

Skorow idz

j

525

Przew ijanie Alfabetyczne, 237 A bout.com , 237 iPhon, 238 przycisk Anuluj, 272 przycisk ekranowy, 452 Przycisk Kasow ania Tekstu, 462 Bing, 463 Google, 463 przycisk Load m ore, 460 przycisk W stecz, 36 przycisk Zam ień, 40 przyzw yczajenia, 36 Pulpit, 49, 64 Fitbit, 65 G oogle Analytics, 68 M y Yahoo!, 67 N etvibes, 67 wzorce i kom ponenty, 65 pulpit M A TLA B, 185 punkty uw agi, 151, 495 rozm yte i m ocne, 495

R Ram y Graficzne, 155, 156 JAQK, 156 JetBlue, 158 Kolor, 157 Krój pism a, 157 siatka layoutu, 157 Styl pism a, 157 TED, 157, 158 Ranking Treści, 432 Engadget, 434 M ashable, 435 N ew York Tim es, 433 Technology Review , 435 W all Street Journal, 432 W ired, 435 reakcje em ocjonalne, 486 rekom endacja, 44 rodzaje przejść, 143 Rozrysow yw anie Danych, 295, 312 BBN Cornerstone, 312, 314 Flickr, 315 SPO T A dventures, 315 W eeplaces, 316 Rozw ijane Panele, 70 Rozw ijany Selektor, 381, 382 iW eb, 384 M icrosoft Pow erPoint, 384 M icrosoft W ord, 381 Photoshop, 383

526

j

Skorow idz

Rów noległe W ykresy, 328 G oogle Trends, 330 M ATLAB, 331 N ew Y ork Tim es, 329 The W eather Channel, 332 Różne W idoki, 49, 81 A dobe Illustrator, 84 CNN, 84 M apy Google, 81 M icrosoft Pow erPoint, 83 przełącznik widoku, 83 w idok dom yślny, 82 Ruchom e Panele, 66, 155, 180 iGoogle, 184 M y Yahoo!, 182 pulpit M ATLAB, 185 pulpit Photoshop, 185 YouTube, 181

S Sano Darrell, 189 Satisficing, 32 schem at G łębokiego Linkow ania, 117 kolorystyczny interfejsu, 484 Panelu M odalnego, 114 Piramidy, 111 W yjścia Ew akuacyjnego, 121 Shift+Tab, 42 shingling, 335 siatka layoutu, 157 Siatka M iniaturek, 60, 164, 220 A IGA, 222 ekran dom owy, 224 Facebook, 224 Finder, 222 G rafika Google, 224 H anna A ndersson, 220 YouTube, 223 Zappos, 223 Siatka M iniaturek nieregularna, 113 Siatka Rów nopraw nych Elem entów , 155, 163 CNN, 165 Hulu, 164 IBM, 166 M apQuest, 165 Skórki I M otyw y, 512 m otyw y Firefoksa, 512 W ordPress, 514 Sortow alna Tabela, 321 Inxight TableLens, 323 iTunes, 321 sortowanie, 290, 292

Spis Treści, 107 AIG A , 109 Craigslist, 107 M IT, 109 M oM A, 111 M useum of M odern A rt, 110 spójność interfejsu, 36 stan przepływ u, 36 Stanza, 452 stopka, 128 stopka serwisu Obrazy Google, 455 Stopniowa Konstrukcja, 35 stos, 275 struktura inform acji długość, 204 dynam ika, 205 grupow anie, 205 interakcja, 205 kolejność, 204 rodzaje elem entów , 205 strum ień aktyw ności, 56 studia przypadków , 27 style graficzne, 475 Stylizow ane Rogi, 501 Getty M useum , 502 JetBlue, 501 Pandora, 503 system naw igacji globalnej, 103 szczegóły o elem encie, 206 szeryfy, 486 szkic interfejsu, 45 szum graficzny, 496

Ś światła w literach, 486

T Tabela Drzewiasta, 82, 208, 241 Finder, 241 m enedżer zakładek Firefoksa, 242 tekstury, 489 testy używ alności, 345 Tła, 492 tło gradienty, 495 m iękka ostrość, 495 oznaczniki głębokości, 495 żadnych m ocnych punktów uw agi, 495 tożsam ość m arki, 474 Treem apa, 336 Digg, 340 Hive Group, 339 N ew sm ap, 340

projektow anie, 338 Sm artM oney, 337 zm ienne w izualne, 341 treści w stopce, 128 Tufte Edward, 333 tworzenie elem entów na palecie, 70 layoutu strony, 145 m akra, 280 projektu graficznego, 103

U udostępnianie narzędzi kreatywnych, 48 U jaw nianie Reakcyjne, 75, 156, 191 AutoTrader, 191, 193 D okum enty Google, 194 Kayak, 193 U jednolicony Branding, 467 aplikacja m apy na iPhone, 468 Chipotle, 471 Fandango, 470 JetBlue, 469 W alm art, 468 W hole Foods, 470 układ elem entów , 145 Ukryte N arzędzia, 254 Grooveshark, 256 O dtw arzacz YouTube, 257 Twitter, 254 Zillow, 257 urządzenia m obilne, 440, 468 Uszczegółow ienie W Jednym Oknie, 55, 62, 212 Fora Ravelry, 215 M ac M ail, 212 Picasa, 216 prostota, 213 wady, 214 Uzupełnianie, 366 eBay, 368 Excel, 367 N ew Y ork Tim es, 366

V Visual Basic, 281

W W iadom ości Google, 56 w iarygodność stron obsługa klienta, 473 reklam y, 473 reputacja firmy, 473 sponsorow anie, 473 wygląd strony, 473

Skorow idz

|

527

W idget W spółdzielenia, 47, 425, 433 Boing Boing, 427 M ashab, 428 Pandora, 427 ShareThis, 426 Slate, 425 Technorati, 427 W ired, 427 w idoki danych, 313 w idoki połączone, 313 W iele Obszarów Roboczych, 40, 47, 48 Chrome, 87 Firefoks, 85 Safari, 88 TweetDeck, 86 W ielopoziom ow e Cofanie Czynności, 273, 274 M icrosoft W ord, 276 odwracalne czynności, 274 Photoshop, 273 sekw encja cofania, 275 W ielopoziom ow y System Pom ocy chm urki podpow iedzi, 89 Excel, 88 Firefoks, 91 obsługa techniczna, 90 osobne okna, 90 podpisy i instrukcje, 89 Rozw ijany Panel, 90 sam opom oc społecznościow a, 90 U kryte N arzędzia, 90 wprow adzenia, 90 w izualizacja artykułów , 340 danych, 289, 333 genom u bakterii, 328 prom ienista, 323 W kładka, 55, 216 A m azon, 219 Czytnik Google, 219 Kayak, 216 w łaściw ości układów obiektów wizualnych bliskość, 154 ciągłość, 154 dopełnienie, 154 podobieństw o, 154 W ordPress, 514 W skazane Punkty Startowe, 104 Firew orks, 107 strona iPada, 106 W skazów ki, 49, 369 Blogger, 371 Gm ail, 370 Hotm ail, 371

528

|

Skorow idz

M icrosoft W ord, 370 Twitter, 369, 371 Yahoo!, 371 wskazów ki przestrzenne, 96 W skaźnik Postępu, 269, 272 Flickr, 270 Grooveshark, 271 okno kopiow ania M ac OS, 269 W skaźniki W czytyw ania, 464 Flickr, 465 pasek postępu instalacji, 465 Stocks, 464 W spom agane Pow tarzanie, 40 W spółdzielenie I K om entow anie, 406 A m erykański Czerw ony Krzyż, 410 blogi, 407 M ashable, 407 REI, 409 retweetowanie, 410 W ybór Dw upanelow y, 51, 55, 61, 74, 209, 211 M ac M ail, 211 M ac OS, 209 Picasa, 212 zalety, 210 w ybór kontrolek, 346 wygląd strony, 473 W yjście Ew akuacyjne Google M aps Labs, 122 schem at, 121 strona Netflix, 122 wykorzystyw anie cudzej pracy, 43 w ykres klim atyczny, 332 w ykres M A TLA B, 331 W ykres Panelowy, 332 dane geograficzne, 335 trellis graphs, 334 trellis plots, 334 U niversity of Oregon, 332 w ykres pogodow y, 332 W ykres Prom ienisty, 323 analiza sprzedaży sam ochodów , 324 Eigenfactor, 327 genom bakterii, 328 SolidSX Softw are Explorer, 326 w ykres punktow y, 288 w ykres słupkow y skum ulow any, 292 w ykres treliażow y, 334, 335, 336 wykresy statystyczne, 334 w ypełnienie gradientowe, 492 W yrów nanie Do Lew ej I Prawej, 155, 186 drobne nierówności, 187 M ac OS, 186, 188 w yróżnienie elem entu, 149

W yszczególniony Przycisk „Zakończ" A m erican Airlines, 264 JetBlue, 263 Kayak, 263 OneH ourCourses.com , 263 Songza, 261 Southwest, 263 w yszukiw anie, 293 W yw ażenie Po Przekątnej, 155, 188 D esigning Visual Interfaces, 189 Starbucks, 190 W indow s 7, 188 w zorce Transition, 143 w zorzec, 16 A ktualności, 49 A nim ow ane Przejście, 104 A utom atyczne Uzupełnianie, 361 Bezpieczna Eksploracja, 31 Bezpośrednie Przejście Do Elem entu, 209 Chm urki Inform acyjne, 296 Dolny Pasek N aw igacyjny, 446 Duże M arginesy, 446 Dynam iczne Kw erendy, 296 Edytor U staw ień, 50 Ekspozycja, W yszukiw anie I Przeglądanie, 49 Form at Pobłażliw y, 361 Form at Strukturalny, 361 Głębokie Linkowanie, 104 Grube M enu, 104 Grupy Przycisków, 250 H arm onogram , 400 H istoria Poleceń, 251 H om e Link, 123 Im age Browser, 64 Inteligentne Elem enty M enu, 251 K anały Tem atyczne, 400 Karuzela, 208 Kaskadujące Listy, 209 Kilka Barw, W iele W artości, 493 Klisza, 446 K ontrastująca Grubość Tekstu, 493 Kreator, 50 K reator Listy, 361 Linki Społecznościow e, 400 Lokalne Przybliżanie, 296 M akra, 251 M apa Sekwencji, 104 M apka Strony W Stopce, 104 M enedżer Obrazów, 49 M iernik Bezpieczeństw a Hasła, 361 M ikroprzerw y, 31 M iłość Do Klawiatury, 31 M iniaturki Z Tekstem , 446

N ajnow sza A ktyw ność, 400 N arzędzia Dotykowe, 446 N arzędzia Logowania, 104 N ew sbox, 400 N ieskończona Lista, 446 O bw ódki Zgodne Z Tekstem , 493 Odległe Tło, 493 O dwlekanie Decyzji, 31 O dw oływ alność, 251 Odwrócona M inipiram ida, 399 Ogląd Ze Szczegółam i, 296 Okruszki, 104 Osobiste Rekom endacje, 31 Osobiste W ypow iedzi, 399 Paginacja, 209 Pam ięć Prospektyw na, 31 Pam ięć Przestrzenna, 31 Panel M odalny, 104 Panel Poleceń, 250 Pasek Przew ijania Z A dnotacją, 104 Pionow y Stos, 446 Piramida, 104 Płótno I Paleta, 49 Podgląd, 251 Podśw ietlanie Danych, 296 Pole N ow ego Elem entu, 209, 353 Połączone A plikacje, 446 Popraw ne W artości Dom yślne, 361 Porady Innych, 31 Pragnienie N atychm iastow ej Satysfakcji, 31 Product Configurator, 77 Przegląd Tem atyczny, 399 Przem ienne Tło, 209 Przew ijanie A lfabetyczne, 209 P rzycisk Kasowania Tekstu, 446 Przyzw yczajenie, 31 Pulpit, 49 Ranking Treści, 400 Rozrysow yw anie Danych, 296 Rozw ijany Selektor, 361 Rów noległe W ykresy, 296 Różne W idoki, 50 Satisficing, 31 Siatka M iniaturek, 208 Skórki I M otyw y, 494 Sortowalna Tabela, 296 Spis Treści, 104 Stopniowa Konstrukcja, 31 Stylizow ane Rogi, 493 Tabela Drzewiasta, 209 Treem apa, 296, 310 U jednolicony Branding, 446 U kryte N arzędzia, 250

Skorow idz

| 529

w zorzec U szczegółow ienie W Jednym O knie, 208 U zupełnianie, 361 W idget W spółdzielenia, 400 W iele Obszarów Roboczych, 50 W ielopoziom ow e Cofanie Czynności, 251 W ielopoziom ow y System Pom ocy, 50 W kładka, 208 W skazane Punkty Startow e, 104 W skazów ki, 361 W skaźnik Postępu, 251 W skaźniki W czytyw ania, 446 W spom agane Pow tarzanie, 31 W spółdzielenie I Kom entow anie, 399 W ybór Dw upanelow y, 208 W yjście Ewakuacyjne, 104 W ykres Panelowy, 296 W ykres Prom ienisty, 296 W yszczególniony Przycisk „Zakończ", 251 Zagajenia, 399 Zapytania, 361 Zlokalizow ane Kom unikaty O Błędach, 361 Zm iany N a Bieżąco, 31 Ździebełka, 493

Z Zagajenia, 410 Boing Boing, 413 REI, 413 W hole Foods, 412 Zakładki, 155, 169 iW eb, 172 M ac OS, 171 M apQ uest, 169 SourceForge, 172 w stążka Excela, 171

530

|

Skorow idz

Zapytanie, 372 Apple, 373 CulinaryCulture.com , 374 Yahoo!, 372 zarządzanie listą, 207 zasada ujaw niania progresyw nego, 192 zasady projektow ania interfejsów , 34 Zatytułow ane Sekcje, 70, 75, 155, 166 A m azon, 168 aplikacja do synchronizacji iPhona, 169 JetBlue, 166 Zlokalizow ane Kom unikaty O Błędach, 389 H anna A ndersson, 392 M int, 391 Netflix, 389 Twitter, 391 Yahoo!, 392 Zm iany N a Bieżąco, 33 Zw ijane Panele, 155, 177 Firefoks, 180 M apy Google, 178 M SNBC, 180 progresyw ne ujaw nianie, 179

Ź Ździebełka, 507 Colly.com , 508 H erm itageM useum .org, 507 RibbonsOfRed.com , 509

O autorce jest autorką i konsultantką z dziedziny projektowania interakcji, architektury informacji oraz analiz projektowych, która od prawie dwudziestu lat projektuje i opracowuje złożone aplikacje i interfejsy internetowe. W śród jej klientów i byłych pracodaw ców można znaleźć Google, The M athW orks, organizacje non profit, oraz start-upy. W późnych latach 90. ubiegłego wieku, kiedy koncepcję wzorca dopiero zaczęto wykorzystyw ać w odniesieniu do oprogramowania, należała do grona pierwszych projektantów, którzy zaczęli tworzyć wzorce na potrzeby projektowania interfejsów użytkowników. M ieszka w okolicach Bostonu ze swoim mężem, synem i m ałą papugą.

J e n ife r T i d w e l l

Kolofon Okładkę Projektowania interfejsów zdobi mandarynka (łac. A ix galericulata), jed na z najpięk­ niejszych kaczek. Te pochodzące z Chin kolorowe ptaki mieszkają w południowo-wschodniej Rosji, północnych Chinach, Japonii, południowej Anglii i na Syberii. Samce charakteryzują się różnorodnym i barwnym upierzeniem, opalizującym czubkiem głowy, orzechowymi policz­ kami i białym paskiem, ciągnącym się od czerwonego dziobu, przez oczy, po tył głowy. Sa­ mice są mniej w ystawne — zw ykle w ystępują w kolorze szarym, białym, brązowym bądź zielono-brązowym, z szyją upierzoną na biało. Ptaki te zam ieszkują zalesione tereny w pobliżu strumyków i jezior. Są wszystkożerne, ich dieta różni się w zależności od sezonu — jesien ią zjad ają żołęd zie i ziarna, w iosną ow ady, ślim aki lądow e i rośliny w odne, a latem dżdżow nice, koniki polne, żaby, ryby i mięczaki. Rytuał godowy mandarynek zaczyna się od rozbudowanego i zawiłego tańca zalotnego, w któ­ rym ptak wykonuje ruchy trzęsące, pozoruje gest picia i wykonuje czynności higieniczne. Samce walczą o samicę, ale ostatecznie to ona w ybiera towarzysza. Kaczęta instynktow nie podążają za swoimi wiecznie opiekuńczymi matkami, które m ają w zwyczaju udaw ać ranne, kiedy odciągają uwagę drapieżców : wydr, szopów, norek, tchórzy, puchaczy i zaskrońców. M andarynki nie są stricte zagrożonym gatunkiem, lecz grozi im w yginięcie. Drwale ciągle nachodzą ich środowiska, a myśliwi i kłusownicy cenią sobie samce za ich upierzenie. Ich mięso uznaje się za niejadalne, więc na ogół nie poluje się na nie dla jedzenia. Obraz na okładce pochodzi z książki Johnson's Natural History.

Rysunek 7.5. Osiem przedświadomie interpretowanych zmiennych

Rysunek 11.1. Projekt 1.

Ä ic ss Zen Garden: The Beauty in CSS Design File

Edit

View

Go

Bookmarks

lools I

Mozilla Firefox

Help http ://csszengarden,com/?cssfile=jf113/113. c

Today, we m ust clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, W aSP and the major browser creators. The css Zen Garden invites you to relax and meditate on the important le ssons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and Invigorating fashion. Become one with the web.

k & q . 'S 'M „¡§dth is A b o u t? seriously

by graphic artists. The Zen Garden aim s to excite, inspire, and encourage participation. To begin, view so m e of the e xisting d e sig n s in the list. Clicking on any on e will load the style sh e et into this very page. T h e code re m ain s the sam e, the only thing that h as changed is the external .css file. Y e s, really. C S S allows com plete an d total control over the style o f a hypertext document, The only way this can be illustrated in a way that gets people excited is by dem onstrating what it can truly be, once the reins are placed in the h a n d s of those able to create beauty from structure. T o date, m o st e x a m p le s of neat tricks and h a ck s h ave been dem onstrated by stru cturlsts and coders. D e sign ers h ave yet to m a k e their mark. T h is n ee d s to change.

Graphic artists Q n ly please. Y o u are m odifying this p a ge, so strong C S S s are necessary, but the e xa m p le files are com m ented well e no u gh that even C S S novices can u se them a s starting points. P le ase se e the C SS Resource Guide for advanced tutorials an d tips on working with CSS.

i

Rysunek 11.2. Projekt 2.

Rysunek 11.3. Projekt 3.

~Qmm

css Zen Garden: The Beauty in CSS Design - Mozilla Firefox File

Edit

< £

•

View

&

•

Go S

Bookmarks 1

©

Tools

Q s

[

Ol

Help http://c5s:engarderiiccim/7,c5sfile=/150/150ics5&page=0

v

|Gi.

I“

Rysunek 11.4. Projekt 4.

Rysunek 11.5. Projekt 5.

Rysunek 11.6. Projekt 6.

Rysunek ll.7 . Projekt 7.

Rysunek 11.8. Projekt 8.

Rysunek 11.10. Szczegóły tekstur w czterech projektach CSS

Rysunek 11.12. Rozmyte i mocne punkty uwagi

Rysunek 11.13. Cztery tła na Mac OS o zróżnicowanej czytelności

Rysunek 11.14. Strona główna Ecoki

Rysunek 11.15. Mercedes-Benz

Rysunek l l . l ó . Mint

Rysunek 11.17. Kolory wykorzystane w interfejsie strony Mint

Rysunek 11.18. Baby Name Wizard

Though only th e m ost elite universities can grace th e top bu siness schools rankin gs, there are many more exceptional MBA programs th a t w ill prepare you to lead in a m anagem ent-level career. Curriculum delivery methods have also changed, allow ing w ell-know n universities to offer Master’s courses an d even full MBA programs online. To get th e m ost from your education, finding th e best M BA program also m eans finding th e best fit for you.

Com plete your M BA w ithout Interrupting your career. For m ost w orking professionals, th is is not a luxury, but a requirement. W hen you cho ose a flexible program , you can immediately apply th e skills you learn in th e classroom to th e business world. M any w ell-regarded business schools offer online M BA program s, M aster's degrees, and other advanced business degree programs through com bined online an d cam pus-based classroom work. O nlineM BA Rankings.com is dedicated to helping prospective graduate managem ent students find prestigious programs th a t fit real-w orld business needs.

adlucent

1 .8 0 0 .7 8 8 .9 1 5 2

RETAIL PAID SEARCH 'p & iw netnctf

HISTORY CAN ONLY TEACH SO MUCH.

UNLOCK THE FUTURE OF RETAIL SEM.

W hat We Do

Success Stories

A dluce nt uses predictive tech n olo g y and custom o p tim iza tio n a lgo rith m s to co ntin uo u sly im prove search m arke ting perform ance fo r the w o rld ’ s eCom merce leaders.

A dluce nt w orks closely w ith its clients to gro w th e ir search m arke ting p rogram s. Hear what they have to say and learn how we’ ve p ut search to w o rk fo r online retail.

Why We Do It

O ur C om pany Profile -

"A dlucent is the m ost innovative search agency w e 'v e ever w o rked with. They delivered exceptional results th at other agencies couldn't achieve.' J E F F W ISO T , B U Y . C O M V P O F M A R K E T IN G

In the News le a d 's Up: Y ou r S e a r c h M a r k e t in g S t ra t e g ie s N e e d To E volve

Rysunek 11.19. OnlineMBARankings.com i AdLucent.com

Press Releases A d lu c e n t S e a r c h C a m p a ig n D o u b le s R evenu e fo r D is c o u n t O ffice Item s

Rysunek 11.26. Dakine

Rysunek 11.28. Colly.com

— i*

THE ST O R Y OF THE LAST GREAT SU PPLY OF FRESH D R IN K IN G WATER ON EARTH No matter where we live, the Great Lakes affect us all. And as species of fish disappear and rates of birth defects and cancer rise, it seems one thing is clear the Great Lakes are changing and something's not quite right with the water.

^ WATERUFE

Rysunek 11.31. Szczegóły na stronie Waterlife.nfb.ca

Complete your

WORKFLOW

Complete your workflow with Kaleidoscope. it all works

Git. S V N . M e rc u ria l, d r a g a n d d ro p ,

.psd .txt .png .jpg .html

Mercurial Git Subversion O u t o f th e b o x in te g ra tio n

P L A Y S NICE

S u p p o r te d file f o r m a ts

COMMAND LINE

Naturally. Kaleidoscope integrate?;

is a m a tte r of

.

.

EE]

I« hi I

FILES GALORE Y ou do n't h a v e to |ump through

.. tn v e rs io n * c u r aw a rd-w inning

SVN . a n d B a z a a r

Sub version c lie n t It also w ork s g re a t with

clicks. For e verything else, there s hsdiff

com p ann g. Drop any num ber o f fie s on a

le xtM ate r. SV N bundle an d (iom ersto n e

Kaleidoscope ?; included c om m and-kne tool

com parison to ad d them it's that rumple

Rysunek 11.32. Strona z KaleidoscopeApp.com

h o op s to c h a n g e w nat you're

jon brou sseau

I'm an Associate Creative Director lor Boston Universe/« New M etsa deportment i have eight years of experience designing interactive & print medte. and I am the primary de s igner lor th e Art Institute of B oston's Porter Square G alery in Cambridge. MA S ero l down to view som e of my work sam ples below or get in touch with m e V you have any questions or require further information.

Rysunek 11.33. JonBrousseau.com

Plik

E d y c ja

W id o k

H isto r

plik

fcdycja

W id o k

tlistor

i

Plik

E d y cja

W id o k

r

____i 'o uo gle

I

1G oogle

££

G oo gle

Rysunek 11.34. Cztery przykładowe motywy Firefoksa

Demo WP

Jeszcze Jeden Wpts

Rysunek 11.35. Cztery motywy WordPress

Histor