Projektowanie
interfejsów
Sprawdzone
wzorce projektowe
Twórcy
oprogramowania mogą dziś korzystać z wielu niesłychanie sprawnych
narzędzi do tworzenia świetnych aplikacji. Równocześnie
obserwujemy olbrzymi rozwój oprogramowania przeznaczonego do
najróżniejszych urządzeń. Producenci aplikacji prowadzą
swoisty wyścig zbrojeń, starając się zapewnić swoim użytkownikom
porywające wrażenia podczas korzystania z oferowanych
produktów. W tym niezwykle zmiennym środowisku stałe
pozostaje jedno: sposób, w jaki ludzie postrzegają
oprogramowanie i z niego korzystają. Ludzkie zmysły i psychika
człowieka się nie zmieniają. Nawet najdoskonalsza aplikacja, jeśli ma
być użyteczna, musi zapewniać interfejs odpowiadający potrzebom
odbiorców.
Publikacja
pozwala zapoznać się z fundamentalnymi teoriami i praktycznymi
aspektami dobrego designu; to wydanie zostało starannie przejrzane i
uzupełnione o najnowsze osiągnięcia w tej dziedzinie. Zawiera
również spory zbiór sprawdzonych
wzorców projektowych, znacząco ułatwiających projektowanie
interfejsów. Wzorce te stworzono z wykorzystaniem zdobyczy
psychologii, starano się przy tym zadbać o ich wszechstronność.
Podstawą do ich zbudowania były większe lub mniejsze zadania wykonywane
przy użyciu oprogramowania. Książka ułatwia poruszanie się po
skomplikowanych zagadnieniach projektowania interfejsów,
zapewniając wzorce dla aplikacji mobilnych, przeglądarkowych i
samodzielnych programów komputerowych. Każdy wzorzec został
zilustrowany przykładowymi projektami i opatrzony praktycznymi
wskazówkami.
Dzięki
tej książce dowiesz się, jak:
- przygotować się do
projektowania interfejsu
- zapewnić, aby
oprogramowanie miało strukturę zrozumiałą dla użytkowników
- projektować komponenty
ułatwiające użytkownikom wykonywanie zadań
- ułatwić użytkownikom
odnajdywanie potrzebnych funkcji
- uwzględniać w
projektowaniu wizualnym aspekt użyteczności produktu
- tworzyć efektowne
wizualizacje do prezentacji danych
Wprowadzenie do trzeciego wydania 11
1.
Projektowanie
dla ludzi 19
Kontekst 20
Poznaj odbiorcę 20
Interakcja jest konwersacją 20
Dopasowanie treści i funkcjonalności do potrzeb odbiorców 21
Poziom umiejętności 22
Interfejs jest jedynie środkiem do celu 23
Spytaj: Dlaczego? 24
Wartość projektowania: właściwe rozwiązanie właściwego problemu 24
Badania: sposób na poznanie kontekstu i celów 26
Obserwacja bezpośrednia 27
Studia przypadków 27
Ankiety 27
Persony 28
Badania projektowe nie są badaniami rynku 28
Wzorce - procesy poznawcze i zachowania związane z projektem interfejsu
29
Bezpieczna Eksploracja 30
Pragnienie Natychmiastowej Satysfakcji 31
Satisficing 31
Zmiany Na Bieżąco 32
Odwlekanie Decyzji 33
Stopniowa Konstrukcja 34
Przyzwyczajenie 35
Mikroprzerwy 36
Pamięć Przestrzenna 37
Pamięć Prospektywna 38
Wspomagane Powtarzanie 40
Obsługa Klawiaturą 41
Media Społecznościowe, Dowód Społeczny I
Współpraca 42
Podsumowanie 43
2.
Organizacja
treści: architektura informacji i struktura aplikacji 45
Cel 46
Definicja 46
Projektowanie obszarów informacyjnych dla ludzi 47
Podejście 47
Oddzielenie informacji od prezentacji 47
Zasada MECE 48
Sposoby organizacji i kategoryzacji treści 49
Alfabet 49
Liczba 49
Czas 49
Lokalizacja 50
Hierarchia 50
Podobieństwo 50
Projektowanie na potrzeby aplikacji zorientowanych na zadaniowość i
obieg pracy 50
Widoczność często używanych elementów 50
Dziel zadania na sekwencje kroków 51
Wielokanałowość i zróżnicowanie rozmiarów
ekranów 51
Informacje w formie Kart 51
Projektowanie systemu typów ekranów 52
Ogląd - pokazanie listy lub siatki elementów 52
Skupienie - pokazanie jednego elementu 54
Tworzenie - udostępnienie narzędzi kreatywnych 54
Działanie - umożliwienie wykonania czynności 55
Wzorce 55
Ekspozycja, Wyszukiwanie I Przeglądanie 56
Bezpośredni Dostęp Mobilny 66
Aktualności 67
Przeglądarka Multimediów 81
Pulpit 90
Płótno I Paleta 93
Kreator 97
Edytor Ustawień 99
Różne Widoki 105
Wiele Obszarów Roboczych 112
System Pomocy 115
Tagi 126
Podsumowanie 132
3.
Tam i z powrotem: nawigacja, drogowskazy i orientacja 133
Przestrzeń informacji i czynności 134
Drogowskazy 134
Orientacja 134
Nawigacja 135
Nawigacja globalna 135
Nawigacja funkcyjna 136
Nawigacja asocjacyjna i wierszowa 136
Powiązane treści 136
Tagi 136
Model społecznościowy 137
Konwencje projektowania nawigacji 137
Oddzielenie projektu nawigacji od projektu wizualnego 137
Obciążenie poznawcze 137
Niewielkie odległości 138
Modele nawigacyjne 139
Oś i szprychy 139
Pełne połączenie 140
Wiele poziomów lub drzewo 140
Krok po kroku 142
Piramida 142
Płaska nawigacja 144
Wzorce 144
Wskazane Punkty Startowe 145
Spis Treści 150
Piramida 155
Panel Modalny 159
Głębokie Linkowanie 164
Wyjście Ewakuacyjne 168
Grube Menu 172
Mapka Strony W Stopce 176
Narzędzia Logowania 181
Mapa Sekwencji 183
Okruszki 188
Pasek Przewijania Z Adnotacją 192
Animowane Przejście 195
Podsumowanie 200
4.
Układ elementów 201
Podstawy tworzenia layoutu 201
Hierarchia wizualna 201
Co sprawia, że element wydaje się ważny 202
Cztery zasady psychologii postaci 207
Przepływ wzroku 209
Wykorzystanie dynamicznych elementów 211
Odblokowywanie Reakcyjne 213
Ujawnianie Reakcyjne 213
Obszary interfejsu 214
Wzorce 215
Layout 215
Wydzielanie informacji 216
Ramy Graficzne 216
Obszar Centralny 219
Siatka Równoprawnych Elementów 222
Zatytułowane Sekcje 223
Zakładki 226
Akordeon 230
Zwijane Panele 233
Ruchome Panele 235
5.
Styl wizualny i estetyka 239
Podstawy projektowania graficznego 240
Hierarchia wizualna 240
Kompozycja 240
Kolor 242
Typografia 246
Czytelność 252
Sugestywność 253
Obrazy 257
Co to oznacza dla aplikacji biznesowych 259
Dostępność 260
Rodzaje stylów wizualnych 260
Skeumorficzny 261
Ilustrowany 262
Płaski 263
Minimalistyczny 266
Adaptacyjny/parametryczny 268
Podsumowanie 269
6.
Urządzenia
mobilne 271
Wyzwania i szanse towarzyszące projektowaniu na urządzenia mobilne 272
Niewielki rozmiar ekranu 272
Zróżnicowana szerokość ekranu 272
Ekrany dotykowe 273
Trudność w pisaniu 273
Problemy związane z otoczeniem 273
Lokalizacja 274
Kontekst społeczny i ograniczona uwaga 274
Jak podejść do projektowania dla urządzeń przenośnych 274
Wzorowe przykłady 277
Wzorce 279
Pionowy Stos 280
Klisza 282
Narzędzia Dotykowe 284
Dolny Pasek Nawigacyjny 288
Kolekcje I Karty 289
Nieskończona Lista 293
Duże Marginesy 294
Wskaźniki Wczytywania 297
Połączone Aplikacje 298
Zadbaj o interfejs mobilny 303
7.
Listy
305
Scenariusze korzystania z list 305
Architektura informacji 306
Co chcesz pokazać? 307
Wzorce 310
Wybór Dwupanelowy lub Widok Złożony 310
Uszczegółowienie W Jednym Oknie 314
Wkładki 317
Karty 320
Siatka Miniaturek 323
Karuzela 327
Paginacja 329
Bezpośrednie Przejście Do Elementu 332
Przewijanie Alfabetyczne/Numeryczne 335
Pole Nowego Elementu 336
Podsumowanie 338
8.
Jak to się robi: czynności i polecenia 339
Dotykanie, przeciąganie i szczypanie 340
Obracanie i potrząsanie 341
Przyciski 341
Paski menu 341
Menu kontekstowe 342
Rozwijane menu 342
Paski narzędzi 342
Odnośniki 342
Panele poleceń 342
Ukryte narzędzia 343
Pojedyncze i dwukrotne kliknięcia 343
Polecenia klawiszowe 343
Skróty 344
Kolejność tabulacji 344
Przeciągnij i upuść 344
Wpisywane polecenia 344
Afordancja 345
Bezpośrednia manipulacja obiektami 345
Wzorce 347
Grupy Przycisków 348
Ukryte Narzędzia 350
Panel Poleceń 353
Wyszczególniony Przycisk "Zakończ" 356
Inteligentne Elementy Menu 362
Podgląd 364
Spinnery I Wskaźniki Postępu 368
Odwoływalność 373
Wielopoziomowe Cofanie Czynności 375
Historia Poleceń 379
Makra 381
Podsumowanie 387
9.
Prezentowanie złożonych danych
389
Podstawy infografik 389
Modele organizacyjne - jak wygląda organizacja danych? 390
Przedświadoma interpretacja zmiennych - co wiąże się z czym? 391
Nawigacja i przeglądanie - jak mogę zgłębić te dane? 395
Sortowanie i przestawianie - czy mogę zmienić strukturę danych, by
uzyskać inny punkt widzenia? 396
Wyszukiwanie i filtrowanie - w jaki sposób mogę dostać
wyłącznie te dane, których potrzebuję? 399
Dane jako takie - jakie są konkretne wartości danych? 400
Wzorce 402
Chmurki Informacyjne 402
Podświetlanie Danych 406
Dynamiczne Kwerendy 408
Rozrysowywanie Danych 411
Równoległe Wykresy 415
Wykres Panelowy 418
Moc wizualizacji danych 422
10.
Dane
wejściowe: formularze i kontrolki 423
Podstawy projektowania formularzy 424
Formularze stale ewoluują 426
Dodatkowe materiały 427
Wzorce 427
Format Pobłażliwy 428
Format Strukturalny 432
Uzupełnianie 435
Wskazówki 438
Zapytanie 442
Miernik Bezpieczeństwa Hasła 444
Automatyczne Uzupełnianie 449
Rozwijany Selektor 456
Kreator Listy 460
Poprawne Wartości Domyślne 464
Komunikaty O Błędach 468
Podsumowanie 474
11.
Systemy interfejsów użytkownika i Atomic Design
475
Systemy UI 476
Przykład systemu UI opartego na komponentach: Microsoft Fluent 476
Atomic Design - metodyka projektowania systemów 479
Przegląd 480
Hierarchia Atomic Design 481
Frameworki UI 482
Przegląd 483
Korzyści 483
Właściwości frameworków UI 483
Przegląd wybranych frameworków UI 484
Podsumowanie 494
12.
Poza ekranem 497
Inteligentne systemy - części składowe 498
Połączone urządzenia 498
Systemy antycypacyjne 498
Systemy asystujące 498
Naturalne interfejsy użytkownika 499
Podsumowanie 499
504
strony, Format: 17.0x23.8cm, oprawa miękka