UX Design. Projektowanie aplikacji dla urządzeń mobilnych - ebook

UX Design. Projektowanie aplikacji dla urządzeń mobilnych

User experience (UX), czyli wrażenie użytkownika, w ogromnym stopniu decyduje o sukcesie produktu cyfrowego. Przed przystąpieniem do właściwego pisania aplikacji warto zastosować wywodzące się z UX techniki analizy rzeczywistych potrzeb użytkowników. W ten sposób łatwiej jest tworzyć produkty, z których użytkownik będzie korzystał z przyjemnością. Odpowiadanie na potrzeby odbiorcy - poprzez staranne projektowanie interakcji z użytkownikiem - jest szczególnie istotne w przypadku aplikacji mobilnych. UX pozwala znacznie obniżyć ryzyko porażki i zaoszczędzić czas podczas projektowania.

Ta książka jest praktycznym wprowadzeniem do projektowania efektownych aplikacji mobilnych. Zaproponowano tu techniki odpowiednie dla wczesnych etapów rozwoju aplikacji, pozwalające na skrócenie czasu prac projektowych i zmniejszenie ryzyka. Sporo uwagi poświęcono testowaniu pomysłów, ich wyborowi i dopracowywaniu. Opisano techniki korzystania z prototypów o niskiej i wysokiej wierności z wykorzystaniem profesjonalnego oprogramowania narzędziowego, a także wyjaśniono wady i zalety ich poszczególnych rodzajów. Przedstawiono podstawowe sposoby i etapy procesu testowania. Co istotne, zaprezentowane w książce idee i techniki można zastosować niezależnie od wielkości budżetu przeznaczonego na projekt.

Najważniejsze zagadnienia:

• zasady projektowania i budowy scenariuszy
• badanie potrzeb użytkowników
• korzystanie ze szkiców, wzorców mobilnych, szkieletów i makiet
• narzędzia do prototypowania: Tumult Hype i Framer Studio
• testowanie prototypu z udziałem użytkowników

Zrób na użytkowniku najlepsze wrażenie!

O autorach 11

O recenzencie 12

Wstęp 13

Rozdział 1. Zasady projektowe i planowanie projektu ogólnego 17

• Zmiana perspektywy i skoncentrowanie uwagi na użytkowniku 19
  
  • Przekonywanie organizacji, by przyjęły podejście skoncentrowane na użytkowniku 20
• Zasady projektowe 22
  
  • Potrzeby związane z naszymi ludzkimi cechami 23
  • Potrzeby związane z ogólnymi oczekiwaniami 27
  • Potrzeby wynikające z konkretnego kontekstu zastosowania 34
• Planowanie projektu ogólnego 38
• W praktyce 39
  
  • Projektowanie wcale nie polega na tym, by produkty wyglądały ładnie 39
  • Użytkownicy nie są w stanie nam powiedzieć, czego potrzebują 40
  • To nie Ty (ani Twój zespół) jesteś użytkownikiem 40
  • Doświadczenia użytkownika to nie lista możliwości 40
  • Twoim celem nie jest uszczęśliwienie klienta lub szefa 41
• Podsumowanie 41

Rozdział 2. Badanie - uczenie się od użytkowników 43

• Jak to zrobić? 44
  
  • Poznawanie użytkowników 44
  • Model umysłowy - zrozumieć, jak myślą użytkownicy 44
  • Czym jest model pojęciowy? 46
• Metody badawcze 47
  
  • Obserwacja i wywiady 47
  • Diagramy pokrewieństwa 48
  • Sortowanie kart 52
  • Test drzewa 55
  • Ankiety 58
• Dokumenty badawcze 62
  
  • Dokument persony 63
  • Scenariusze 68
  • Podróż użytkownika 69
  • Analiza konkurencyjnych produktów 71
  • Użytkownicy docelowi, użytkownicy obsługiwani oraz użytkownicy nieobsługiwani 72
• W praktyce 73
  
  • Rekrutacja uczestników badań 73
  • Zachowanie obiektywizmu 74
  • Wypatrywanie znaków 74
• Podsumowanie 75

Rozdział 3. Badanie pomysłów - szkicowanie 77

• Z odpowiednim podejściem do szkicowania 78
  
  • Podstawy szkicowania 80
  • Narzędzia do szkicowania 81
• Szybkie efekty 83
  
  • Koncentracja na pracy 83
  • Określanie limitów czasowych z wykorzystaniem metody szalonych ósemek 84
• Organizacja badań 86
  
  • Rozkład problemu 86
  • Identyfikacja konfliktów 87
• Wyrażanie swoich pomysłów 89
  
  • Tworzenie scenorysów 89
  • Organizowanie sesji analizy krytycznej 90
• W praktyce 92
  
  • Lepsze jest wrogiem dobrego 92
  • Nie chodzi o inspirację 93
  • Nawiązywanie w rozmowie do celów projektu 93
  • Uwidacznianie kompromisów - nie wszystko można zaakcentować 94
• Podsumowanie 95

Rozdział 4. Wzorce mobilne - najlepsze praktyki dla aplikacji internetowych na Androida i iOS-a 97

• Sposoby tworzenia aplikacji mobilnych - responsywność, adaptacja i elastyczność 99
  
  • Responsywność działania 99
  • Strony płynne 99
  • Strony adaptacyjne 100
  • Rozwiązania hybrydowe 101
  • Frameworki do tworzenia interfejsu użytkownika 101
  • Projektowanie w oparciu o kolumny 102
• Wzorce projektowe dla aplikacji mobilnych 103
  
  • Wzorce projektowe związane z interfejsem użytkownika aplikacji mobilnych 104
  • Wzorce projektowe zachowań na urządzeniach mobilnych 122
• Różnice pomiędzy Androidem i iOS-em 125
  
  • Przyciski fizyczne 126
  • Gęstość i cechy ekranów 126
  • Elementy interfejsu użytkownika 127
• W praktyce 129
  
  • Badanie różnych rozwiązań 129
• Podsumowanie 130

Rozdział 5. Uszczegóławianie rozwiązania - szkielety i makiety 131

• Wyjaśnienie, czym są szkielety 132
• Szkielety jako specyfikacja możliwości funkcjonalnych 132
  
  • Układ 134
  • Gesty 135
  • Przejścia 136
• Makiety 141
  
  • Testowanie makiet z wykorzystaniem rzeczywistych treści 142
  • Specyfikacje i zasoby dla różnych ekranów 143
• W praktyce 153
  
  • Nauka kodowania 154
  • Testowanie w rzeczywistych środowiskach 154
  • Znajomość aktualnych trendów 154
• Podsumowanie 155

Rozdział 6. Prototypowanie - ożywianie pomysłów 157

• Z odpowiednim podejściem do prototypowania 158
• Dobór sposobu prototypowania najlepiej spełniającego nasze potrzeby 159
  
  • Wybór typu prototypu 161
  • Dobór narzędzi do tworzenia prototypów 165
• Planowanie prototypu 169
  
  • Określanie, co ma zostać uwzględnione w prototypie 169
  • Wybór sposobu tworzenia prototypu 170
• W praktyce 171
  
  • Prototyp to nie wczesna wersja produktu 171
  • Prototyp jest wart tysiąca spotkań 172
• Podsumowanie 172

Rozdział 7. Prototypowanie z wykorzystaniem ruchu - stosowanie Tumult Hype 173

• Znaczenie ruchu w prototypach 175
• Podstawy programu Hype 176
  
  • Lista scen 177
  • Edytor sceny 177
  • Inspektor właściwości 177
  • Oś czasu i warstwy 178
  • Edytor kodu 180
  • Importowanie i eksportowanie 180
  • Prototypowanie nawigacji 181
  • Interakcje operujące na warstwach 188
  • Obsługa przewijania i nawigacji 195
  • Obsługa gestów 201
• Prototypowanie złożonych zachowań 205
  
  • Łączenie animacji 205
  • Obsługa wprowadzania danych przez użytkownika 211
• W praktyce 217
  
  • Zapewnienie organizacji warstw 217
  • Częste przeglądanie efektów 218
• Podsumowanie 218

Rozdział 8. Prototypowanie z użyciem kodu - stosowanie programu Framer Studio 219

• Framer.js 220
• Framer Studio 220
• Wprowadzenie do języka CoffeeScript 221
• Zacznijmy programować w języku CoffeeScript 222
  
  • Zmienne i operatory 222
  • Typy 224
  • Funkcje 224
  • Pętle i konstrukcje warunkowe 225
  • Obiekty i metody 227
• Prezentacja Framer.js 228
  
  • Warstwy 229
  • Animacje 231
  • Zdarzenia 232
  • Stany 232
  • Komponenty 233
• Tworzenie prototypów przy użyciu programów Sketch i Framer Studio 239
  
  • Prototyp prezentacji powitalnej 239
  • Prototyp szuflady nawigacyjnej 249
  • Prototyp dolnego paska nawigacyjnego 261
• W praktyce 266
  
  • Bądź elementem społeczności 267
  • Materiały do nauki 267
  • Testowanie na telefonie 267
  • Bądź na bieżąco z nowościami o Framer Studio 267
• Podsumowanie 268

Rozdział 9. Testowanie z udziałem użytkowników 269

• Zrozumienie znaczenia testowania użyteczności 270
  
  • Określenie, co należy testować 271
  • Wybór odpowiedniej metody 273
• Planowanie testu 276
  
  • Definiowanie celów 276
  • Scenariusze i zadania 277
  • Definiowanie skryptu 278
  • Przygotowanie środowiska 280
• Przeprowadzanie testów użyteczności 281
  
  • Rekrutacja uczestników badania 282
  • Przedstawienie procesu 283
  • Obserwacja zachowań użytkowników 284
  • Identyfikacja kluczowych aspektów i podsumowanie wyników 285
• W praktyce 286
  
  • Zapraszanie członków zespołu do oglądania sesji testowych 286
  • Nauka jest ważniejsza od potwierdzania 286
  • Sprawdzanie, czy odpowiadamy na pytania badawcze 287
  • Łączenie badań z pomiarami 287
• Podsumowanie 288

Rozdział 10. Bibliografia i odwołania 289

• Ogólne 289
  
  • Model Kano 289
  • Zasady Gestaltu 289
  • Informacje o modelu umysłowym 290
  • Informacje o modelu pojęciowym 290
  • Informacje o dokumentach person 290
  • Informacje o sortowaniu kart 290
  • Informacje o testowaniu drzewa (odwrotnym sortowaniu kart) 291
  • Informacje o diagramach pokrewieństwa 291
  • Informacje o metodzie szalonych ósemek 291
  • Informacje o ankietach 291
  • Informacje o podróżach użytkowników 292
  • Informacje o scenariuszach 292
  • Stopniowe ujawnianie 292
  • Efekt wzajemności 293
  • Leniwe logowanie 293
  • Testowanie przy pomocy użytkowników 293
  • Wzorce mobilne 293
  • Architektura informacji 294
  • Projekty wizualne 294
  • Prototypowanie 294
  • Tumult Hype 294
  • CoffeeScript 294
  • Framer 295
  • JavaScript 295
  • jQuery 295
• Źródła obrazków 295
  
  • Rozdział 1. 295
  • Rozdział 2. 296
  • Rozdział 3. 296
  • Rozdział 4. 297
  • Rozdział 5. 297
  • Rozdział 6. 298
  • Rozdział 7. 298
  • Rozdział 8. 300
  • Rozdział 9. 300

Skorowidz 301