Darmowy fragment publikacji:
Tytuł oryginału: UX Design for Mobile
Tłumaczenie: Piotr Rajca
ISBN: 978-83-283-4699-4
Copyright © Packt Publishing 2017. First published in the English language
under the title ‘UX Design for Mobile (9781787283428)’
Polish edition copyright © 2019 by Helion SA
All rights reserved.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording or by any information storage retrieval system,
without permission from the Publisher.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej
publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną,
fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje
naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich
właścicieli.
Autor oraz Helion SA dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne
i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym
ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Helion SA nie ponoszą również żadnej
odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.
Helion SA
ul. Kościuszki 1c, 44-100 Gliwice
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/uxdesi
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
• Kup książkę
• Poleć książkę
• Oceń książkę
• Księgarnia internetowa
• Lubię to! » Nasza społeczność
Spis tre(cid:258)ci
O autorach
O recenzencie
Wst(cid:218)p
Rozdzia(cid:239) 1. Zasady projektowe i planowanie projektu ogólnego
Zmiana perspektywy i skoncentrowanie uwagi na u(cid:285)ytkowniku
Przekonywanie organizacji, by przyj(cid:218)(cid:239)y podej(cid:258)cie skoncentrowane na u(cid:285)ytkowniku
Zasady projektowe
Potrzeby zwi(cid:200)zane z naszymi ludzkimi cechami
Potrzeby zwi(cid:200)zane z ogólnymi oczekiwaniami
Potrzeby wynikaj(cid:200)ce z konkretnego kontekstu zastosowania
Planowanie projektu ogólnego
W praktyce
Projektowanie wcale nie polega na tym, by produkty wygl(cid:200)da(cid:239)y (cid:239)adnie
U(cid:285)ytkownicy nie s(cid:200) w stanie nam powiedzie(cid:202), czego potrzebuj(cid:200)
To nie Ty (ani Twój zespó(cid:239)) jeste(cid:258) u(cid:285)ytkownikiem
Do(cid:258)wiadczenia u(cid:285)ytkownika to nie lista mo(cid:285)liwo(cid:258)ci
Twoim celem nie jest uszcz(cid:218)(cid:258)liwienie klienta lub szefa
Podsumowanie
Rozdzia(cid:239) 2. Badanie — uczenie si(cid:218) od u(cid:285)ytkowników
Jak to zrobi(cid:202)?
Poznawanie u(cid:285)ytkowników
Model umys(cid:239)owy — zrozumie(cid:202), jak my(cid:258)l(cid:200) u(cid:285)ytkownicy
Czym jest model poj(cid:218)ciowy?
11
12
13
17
19
20
22
23
27
34
38
39
39
40
40
40
41
41
43
44
44
44
46
Poleć książkęKup książkę Spis tre(cid:286)ci
Metody badawcze
Obserwacja i wywiady
Diagramy pokrewie(cid:241)stwa
Sortowanie kart
Test drzewa
Ankiety
Dokumenty badawcze
Dokument persony
Scenariusze
Podró(cid:285) u(cid:285)ytkownika
Analiza konkurencyjnych produktów
U(cid:285)ytkownicy docelowi, u(cid:285)ytkownicy obs(cid:239)ugiwani oraz u(cid:285)ytkownicy nieobs(cid:239)ugiwani
W praktyce
Rekrutacja uczestników bada(cid:241)
Zachowanie obiektywizmu
Wypatrywanie znaków
Podsumowanie
Rozdzia(cid:239) 3. Badanie pomys(cid:239)ów — szkicowanie
Z odpowiednim podej(cid:258)ciem do szkicowania
Podstawy szkicowania
Narz(cid:218)dzia do szkicowania
Szybkie efekty
Koncentracja na pracy
Okre(cid:258)lanie limitów czasowych z wykorzystaniem metody szalonych ósemek
Organizacja bada(cid:241)
Rozk(cid:239)ad problemu
Identyfikacja konfliktów
Wyra(cid:285)anie swoich pomys(cid:239)ów
Tworzenie scenorysów
Organizowanie sesji analizy krytycznej
W praktyce
Lepsze jest wrogiem dobrego
Nie chodzi o inspiracj(cid:218)
Nawi(cid:200)zywanie w rozmowie do celów projektu
Uwidacznianie kompromisów — nie wszystko mo(cid:285)na zaakcentowa(cid:202)
Podsumowanie
Rozdzia(cid:239) 4. Wzorce mobilne — najlepsze praktyki dla aplikacji internetowych
na Androida i iOS-a
Sposoby tworzenia aplikacji mobilnych — responsywno(cid:258)(cid:202), adaptacja i elastyczno(cid:258)(cid:202)
Responsywno(cid:258)(cid:202) dzia(cid:239)ania
Strony p(cid:239)ynne
Strony adaptacyjne
Rozwi(cid:200)zania hybrydowe
Frameworki do tworzenia interfejsu u(cid:285)ytkownika
Projektowanie w oparciu o kolumny
4
47
47
48
52
55
58
62
63
68
69
71
72
73
73
74
74
75
77
78
80
81
83
83
84
86
86
87
89
89
90
92
92
93
93
94
95
97
99
99
99
100
101
101
102
Poleć książkęKup książkę Spis tre(cid:286)ci
Wzorce projektowe dla aplikacji mobilnych
Wzorce projektowe zwi(cid:200)zane z interfejsem u(cid:285)ytkownika aplikacji mobilnych
Wzorce projektowe zachowa(cid:241) na urz(cid:200)dzeniach mobilnych
Ró(cid:285)nice pomi(cid:218)dzy Androidem i iOS-em
Przyciski fizyczne
G(cid:218)sto(cid:258)(cid:202) i cechy ekranów
Elementy interfejsu u(cid:285)ytkownika
W praktyce
Badanie ró(cid:285)nych rozwi(cid:200)za(cid:241)
Podsumowanie
Rozdzia(cid:239) 5. Uszczegó(cid:239)awianie rozwi(cid:200)zania — szkielety i makiety
Wyja(cid:258)nienie, czym s(cid:200) szkielety
Szkielety jako specyfikacja mo(cid:285)liwo(cid:258)ci funkcjonalnych
Uk(cid:239)ad
Gesty
Przej(cid:258)cia
Makiety
Testowanie makiet z wykorzystaniem rzeczywistych tre(cid:258)ci
Specyfikacje i zasoby dla ró(cid:285)nych ekranów
W praktyce
Nauka kodowania
Testowanie w rzeczywistych (cid:258)rodowiskach
Znajomo(cid:258)(cid:202) aktualnych trendów
Podsumowanie
Rozdzia(cid:239) 6. Prototypowanie — o(cid:285)ywianie pomys(cid:239)ów
Z odpowiednim podej(cid:258)ciem do prototypowania
Dobór sposobu prototypowania najlepiej spe(cid:239)niaj(cid:200)cego nasze potrzeby
Wybór typu prototypu
Dobór narz(cid:218)dzi do tworzenia prototypów
Planowanie prototypu
Okre(cid:258)lanie, co ma zosta(cid:202) uwzgl(cid:218)dnione w prototypie
Wybór sposobu tworzenia prototypu
W praktyce
Prototyp to nie wczesna wersja produktu
Prototyp jest wart tysi(cid:200)ca spotka(cid:241)
Podsumowanie
Rozdzia(cid:239) 7. Prototypowanie z wykorzystaniem ruchu — stosowanie Tumult Hype
Znaczenie ruchu w prototypach
Podstawy programu Hype
Lista scen
Edytor sceny
Inspektor w(cid:239)a(cid:258)ciwo(cid:258)ci
O(cid:258) czasu i warstwy
Edytor kodu
Importowanie i eksportowanie
103
104
122
125
126
126
127
129
129
130
131
132
132
134
135
136
141
142
143
153
154
154
154
155
157
158
159
161
165
169
169
170
171
171
172
172
173
175
176
177
177
177
178
180
180
5
Poleć książkęKup książkę Spis tre(cid:286)ci
Prototypowanie nawigacji
Interakcje operuj(cid:200)ce na warstwach
Obs(cid:239)uga przewijania i nawigacji
Obs(cid:239)uga gestów
Prototypowanie z(cid:239)o(cid:285)onych zachowa(cid:241)
(cid:146)(cid:200)czenie animacji
Obs(cid:239)uga wprowadzania danych przez u(cid:285)ytkownika
W praktyce
Zapewnienie organizacji warstw
Cz(cid:218)ste przegl(cid:200)danie efektów
Podsumowanie
Rozdzia(cid:239) 8. Prototypowanie z u(cid:285)yciem kodu — stosowanie programu Framer Studio
Framer.js
Framer Studio
Wprowadzenie do j(cid:218)zyka CoffeeScript
Zacznijmy programowa(cid:202) w j(cid:218)zyku CoffeeScript
Zmienne i operatory
Typy
Funkcje
P(cid:218)tle i konstrukcje warunkowe
Obiekty i metody
Prezentacja Framer.js
Warstwy
Animacje
Zdarzenia
Stany
Komponenty
Tworzenie prototypów przy u(cid:285)yciu programów Sketch i Framer Studio
Prototyp prezentacji powitalnej
Prototyp szuflady nawigacyjnej
Prototyp dolnego paska nawigacyjnego
W praktyce
B(cid:200)d(cid:283) elementem spo(cid:239)eczno(cid:258)ci
Materia(cid:239)y do nauki
Testowanie na telefonie
B(cid:200)d(cid:283) na bie(cid:285)(cid:200)co z nowo(cid:258)ciami o Framer Studio
Podsumowanie
Rozdzia(cid:239) 9. Testowanie z udzia(cid:239)em u(cid:285)ytkowników
Zrozumienie znaczenia testowania u(cid:285)yteczno(cid:258)ci
Okre(cid:258)lenie, co nale(cid:285)y testowa(cid:202)
Wybór odpowiedniej metody
Planowanie testu
Definiowanie celów
Scenariusze i zadania
Definiowanie skryptu
Przygotowanie (cid:258)rodowiska
6
181
188
195
201
205
205
211
217
217
218
218
219
220
220
221
222
222
224
224
225
227
228
229
231
232
232
233
239
239
249
261
266
267
267
267
267
268
269
270
271
273
276
276
277
278
280
Poleć książkęKup książkę Przeprowadzanie testów u(cid:285)yteczno(cid:258)ci
Rekrutacja uczestników badania
Przedstawienie procesu
Obserwacja zachowa(cid:241) u(cid:285)ytkowników
Identyfikacja kluczowych aspektów i podsumowanie wyników
W praktyce
Zapraszanie cz(cid:239)onków zespo(cid:239)u do ogl(cid:200)dania sesji testowych
Nauka jest wa(cid:285)niejsza od potwierdzania
Sprawdzanie, czy odpowiadamy na pytania badawcze
(cid:146)(cid:200)czenie bada(cid:241) z pomiarami
Podsumowanie
Rozdzia(cid:239) 10. Bibliografia i odwo(cid:239)ania
Ogólne
Model Kano
Zasady Gestaltu
Informacje o modelu umys(cid:239)owym
Informacje o modelu poj(cid:218)ciowym
Informacje o dokumentach person
Informacje o sortowaniu kart
Informacje o testowaniu drzewa (odwrotnym sortowaniu kart)
Informacje o diagramach pokrewie(cid:241)stwa
Informacje o metodzie szalonych ósemek
Informacje o ankietach
Informacje o podró(cid:285)ach u(cid:285)ytkowników
Informacje o scenariuszach
Stopniowe ujawnianie
Efekt wzajemno(cid:258)ci
Leniwe logowanie
Testowanie przy pomocy u(cid:285)ytkowników
Wzorce mobilne
Architektura informacji
Projekty wizualne
Prototypowanie
Tumult Hype
CoffeeScript
Framer
JavaScript
jQuery
(cid:189)ród(cid:239)a obrazków
Rozdzia(cid:239) 1.
Rozdzia(cid:239) 2.
Rozdzia(cid:239) 3.
Rozdzia(cid:239) 4.
Rozdzia(cid:239) 5.
Rozdzia(cid:239) 6.
Rozdzia(cid:239) 7.
Rozdzia(cid:239) 8.
Rozdzia(cid:239) 9.
Skorowidz
Spis tre(cid:286)ci
281
282
283
284
285
286
286
286
287
287
288
289
289
289
289
290
290
290
290
291
291
291
291
292
292
292
293
293
293
293
294
294
294
294
294
295
295
295
295
295
296
296
297
297
298
298
300
300
301
7
Poleć książkęKup książkę Spis tre(cid:286)ci
8
Poleć książkęKup książkę 6
Prototypowanie
— o(cid:285)ywianie pomys(cid:239)ów
Ja nie wyja(cid:258)niam, nie mówi(cid:218), ja pokazuj(cid:218).
— Lew To(cid:239)stoj
Przewidzenie sukcesu produktu nie jest prostym zadaniem. Historia ludzko(cid:258)ci jest pe(cid:239)na
zarówno produktów, które odnios(cid:239)y sukces, jak i tych, którym si(cid:218) to nie uda(cid:239)o. Cho(cid:202) proste
zabawki, takie jak hula-hoop, odnios(cid:239)y niebywa(cid:239)y sukces, to jednak inne zabawki, jak na
przyk(cid:239)ad Swing Wing (patrz rysunek 6.1) dzia(cid:239)aj(cid:200)cy na podobnej zasadzie, w ogóle nie zy-
ska(cid:239)y popularno(cid:258)ci.
Rysunek 6.1. Zabawka Swing Wing
Swing Wing to zabawka zaprojektowana, by bawi(cid:202) si(cid:218) poprzez szybkie ruchy g(cid:239)owy do
przodu i do ty(cid:239)u. Je(cid:258)li chodzi o popularno(cid:258)(cid:202), okaza(cid:239)a si(cid:218) wielk(cid:200) klap(cid:200), cho(cid:202) zasada jej dzia(cid:239)a-
nia by(cid:239)a podobna do hula-hoop, w przypadku którego zabawa polega na ruszaniu biodrami
i które odnios(cid:239)o niezwyk(cid:239)y sukces (powy(cid:285)sze zdj(cid:218)cia pochodz(cid:200) z https://en.wikipedia.org/
wiki/Swing_Wing_(toy), https://archive.org/details/swing_wing).
Poleć książkęKup książkę UX Design. Projektowanie aplikacji dla urz(cid:261)dze(cid:276) mobilnych
Ka(cid:285)da aplikacja zaczyna si(cid:218) od pomys(cid:239)u i nigdy nie ma pewno(cid:258)ci, czy dany pomys(cid:239) si(cid:218)
sprawdzi w praktyce, czy nie. Czekanie na stworzenie produktu tylko po to, by sprawdzi(cid:202)
s(cid:239)uszno(cid:258)(cid:202) pomys(cid:239)u, stanowi powa(cid:285)ne ryzyko — je(cid:258)li rzeczy nie pójd(cid:200) po naszej my(cid:258)li, to
trudno ju(cid:285) b(cid:218)dzie zareagowa(cid:202) i co(cid:258) zmieni(cid:202). Zatem bardzo przydatna by(cid:239)aby mo(cid:285)liwo(cid:258)(cid:202)
znacznie wcze(cid:258)niejszego przekonania si(cid:218), jak u(cid:285)ytkownicy reaguj(cid:200) na nasz produkt.
Na szcz(cid:218)(cid:258)cie istnieje sposób na wcze(cid:258)niejsz(cid:200) ewaluacj(cid:218) pomys(cid:239)ów — a wszystko dzi(cid:218)ki
prototypowaniu. Prototyp to symulacja wybranych cz(cid:218)(cid:258)ci rozwi(cid:200)zania, która pozwala na po-
znanie opinii u(cid:285)ytkowników na jego temat i ich reakcji jeszcze przed stworzeniem rzeczywi-
stego produktu. W ten sposób nie trzeba czeka(cid:202) na doko(cid:241)czenie produktu, by si(cid:218) dowiedzie(cid:202),
czy nasz pomys(cid:239) zadzia(cid:239)a zgodnie z oczekiwaniami. Prototypowanie pozwala oszcz(cid:218)dza(cid:202) czas
i dostarcza(cid:202) lepszych produktów, które z wi(cid:218)kszym prawdopodobie(cid:241)stwem zaspokoj(cid:200) rze-
czywiste potrzeby u(cid:285)ytkowników.
Tworzenie prototypów jest szybkie, lecz wymaga znajomo(cid:258)ci celów, w jakich prototypy s(cid:200)
tworzone, doboru odpowiednich narz(cid:218)dzi i zaplanowania ca(cid:239)ego procesu. W tym rozdziale
zamie(cid:258)cimy porady dotycz(cid:200)ce wszystkich tych aspektów prototypowania, tak by(cid:258)my mogli
o(cid:285)ywia(cid:202) nasze pomys(cid:239)y mo(cid:285)liwie jak najszybciej.
Z odpowiednim podej(cid:258)ciem
do prototypowania
Tworzenie prototypów jest powszechn(cid:200) praktyk(cid:200) w wielu dyscyplinach. Ka(cid:285)dy rozumie
zalety, jakie daje przetestowanie odpowiednio zmniejszonego modelu w tunelu aerodyna-
micznym, przed rozpocz(cid:218)ciem produkcji prawdziwego samolotu (patrz rysunek 6.2). Znacznie
lepiej jest sprawdzi(cid:202) i wprowadzi(cid:202) odpowiednie modyfikacje w aerodynamice mniejszego
modelu ni(cid:285) w czasie lotu ju(cid:285) zbudowanego samolotu. Dok(cid:239)adnie to samo dotyczy aplikacji.
Rysunek 6.2. Model nadd(cid:283)wi(cid:218)kowego samolotu transportowego w pe(cid:239)nej skali testowany w tunelu
aerodynamicznym w 1973 roku ((cid:283)ród(cid:239)o: https://commons.wikimedia.org/wiki/File:SST_model_in_Wind_Tunnel.jpeg)
158
Poleć książkęKup książkę Rozdzia(cid:225) 6. • Prototypowanie — o(cid:298)ywianie pomys(cid:225)ów
Prototypy mog(cid:200) wygl(cid:200)da(cid:202) podobnie do prawdziwych produktów, lecz ich natura jest ca(cid:239)ko-
wicie odmienna. Prototyp nie musi dzia(cid:239)a(cid:202), musi jedynie wygl(cid:200)da(cid:202) tak, jakby dzia(cid:239)a(cid:239). Co
wi(cid:218)cej, prototyp próbuje zasymulowa(cid:202) jedynie kilka aspektów wybranych spo(cid:258)ród wszyst-
kich mo(cid:285)liwo(cid:258)ci funkcjonalnych ko(cid:241)cowego produktu — s(cid:200) to w szczególno(cid:258)ci te aspekty,
których dok(cid:239)adniejsze zbadanie wydaje si(cid:218) projektantowi najwa(cid:285)niejsze.
Prototypowanie wykorzystuje fakt, (cid:285)e u(cid:285)ytkownicy nie dbaj(cid:200) o wewn(cid:218)trzne szczegó(cid:239)y dzia(cid:239)a-
nia produktu. Zwracaj(cid:200) uwag(cid:218) jedynie na jego widoczne aspekty. Zasymulowanie niektórych
widocznych rozwi(cid:200)za(cid:241) czasami w zupe(cid:239)no(cid:258)ci wystarcza do odtworzenia do(cid:258)wiadcze(cid:241), jakie
u(cid:285)ytkownicy b(cid:218)d(cid:200) mie(cid:202) podczas korzystania z gotowego produktu, i wyci(cid:200)gania na tej pod-
stawie wniosków. Cho(cid:202) nasza rzeczywista aplikacja b(cid:218)dzie musia(cid:239)a korzysta(cid:202) z bazy danych
lub jakich(cid:258) zewn(cid:218)trznych us(cid:239)ug, to prototyp mo(cid:285)e prezentowa(cid:202) u(cid:285)ytkownikom spreparowa-
ne informacje. Nikt nie zwróci uwagi na te ró(cid:285)nice, cho(cid:202) przygotowanie ich b(cid:218)dzie wyma-
ga(cid:239)o pewnego nak(cid:239)adu pracy. Je(cid:258)li u(cid:285)ytkownik kliknie przycisk wyszukiwania w prototypie
i na ekranie zostan(cid:200) wy(cid:258)wietlone jakie(cid:258) wyniki, to nie b(cid:218)dzie on docieka(cid:239), sk(cid:200)d te informa-
cje pochodz(cid:200).
A zatem w prototypowaniu chodzi o stworzenie pewnej iluzji jak najmniejszym nak(cid:239)adem
pracy. Je(cid:258)li spróbujemy za jednym razem zawrze(cid:202) w prototypie zbyt wiele aspektów rozwi(cid:200)-
zania, wzro(cid:258)nie poziom jego z(cid:239)o(cid:285)ono(cid:258)ci, a w pewnym momencie mo(cid:285)e si(cid:218) on nawet zacz(cid:200)(cid:202)
zbli(cid:285)a(cid:202) do z(cid:239)o(cid:285)ono(cid:258)ci produktu ko(cid:241)cowego. Dlatego prototypy powinny koncentrowa(cid:202) si(cid:218) na
konkretnym aspekcie i s(cid:239)u(cid:285)y(cid:202) do szybkiego zebrania informacji na jego temat.
Ograniczenie zakresu prototypu ma kluczowe znaczenie dla maksymalizacji korzy(cid:258)ci, jakie
nam on zapewni. W przypadku prototypu samolotu mo(cid:285)na koncentrowa(cid:202) si(cid:218) b(cid:200)d(cid:283) to na jego
aerodynamice, b(cid:200)d(cid:283) na projekcie wn(cid:218)trza; lecz nie na obu tych aspektach jednocze(cid:258)nie.
W przypadku sprawdzania aerodynamiki samolotu mo(cid:285)na by u(cid:285)y(cid:202) modelu w odpowiedniej
skali; natomiast pomys(cid:239)y projektu wn(cid:218)trza mo(cid:285)na by prezentowa(cid:202) w odpowiednio urz(cid:200)dzo-
nym pokoju. Stworzenie prototypu obejmuj(cid:200)cego jednocze(cid:258)nie oba te aspekty projektu by-
(cid:239)oby jednak znacznie trudniejsze.
Dobór sposobu prototypowania najlepiej
spe(cid:239)niaj(cid:200)cego nasze potrzeby
Podczas prototypowania bezustannie nale(cid:285)y poszukiwa(cid:202) równowagi pomi(cid:218)dzy realizmem
i szybko(cid:258)ci(cid:200). Z jednej strony chcemy bowiem, by prototypy w mo(cid:285)liwie jak najwi(cid:218)kszym
stopniu odtwarza(cid:239)y do(cid:258)wiadczenia, jakie u(cid:285)ytkownicy b(cid:218)d(cid:200) mie(cid:202) w trakcie korzystania z fi-
nalnego produktu. Natomiast z drugiej strony dba(cid:239)o(cid:258)(cid:202) o wszelkie szczegó(cid:239)y wymaga czasu,
a nam zale(cid:285)y na jak najszybszym sprawdzeniu prawid(cid:239)owo(cid:258)ci naszych pomys(cid:239)ów.
Idealny punkt równowagi pomi(cid:218)dzy realizmem i szybko(cid:258)ci(cid:200) b(cid:218)dzie inny dla ka(cid:285)dego proto-
typu. Poni(cid:285)sze strategie mog(cid:200) pomóc go znale(cid:283)(cid:202), a tym samym uzyska(cid:202) jak najwi(cid:218)ksze ko-
rzy(cid:258)ci z pracy w(cid:239)o(cid:285)onej w przygotowanie prototypów.
159
Poleć książkęKup książkę UX Design. Projektowanie aplikacji dla urz(cid:261)dze(cid:276) mobilnych
(cid:81) Koncentrujmy si(cid:218) na konkretnym scenariuszu.
(cid:81) Starajmy si(cid:218) upraszcza(cid:202) interakcje w zale(cid:285)no(cid:258)ci od ich znaczenia.
(cid:81) Z góry okre(cid:258)lmy, czego chcemy si(cid:218) dowiedzie(cid:202).
Skoncentrowanie si(cid:218) na jednym scenariuszu pomaga upraszcza(cid:202) tworzony prototyp i zacho-
wa(cid:202) szybkie tempo pracy. Mo(cid:285)na zdecydowa(cid:202) si(cid:218) na ograniczenie liczby opcji, jakie zostan(cid:200)
uwzgl(cid:218)dnione w prototypie, aby zmniejszy(cid:202) jego z(cid:239)o(cid:285)ono(cid:258)(cid:202), a jednocze(cid:258)nie by nie sprawia(cid:239)
on wra(cid:285)enia zbyt niekompletnego i pozwala(cid:239) na zapewnienie realistycznych do(cid:258)wiadcze(cid:241).
Tworzony prototyp odtwarzaj(cid:200)cy konkretn(cid:200) reprezentatywn(cid:200) sytuacj(cid:218) musi obs(cid:239)ugiwa(cid:202) je-
dynie minimaln(cid:200) liczb(cid:218) kroków, a my mo(cid:285)emy z góry wybra(cid:202) ten scenariusz. Na przyk(cid:239)ad
w prototypie aplikacji turystycznej mo(cid:285)emy pokaza(cid:202) w prezentowanych wynikach kilka
miast, a jednocze(cid:258)nie pozwoli(cid:202) u(cid:285)ytkownikom wy(cid:239)(cid:200)cznie na wybór Pary(cid:285)a. Testuj(cid:200)c prototyp
z udzia(cid:239)em u(cid:285)ytkowników, mo(cid:285)emy przedstawi(cid:202) scenariusz w taki sposób, by zach(cid:218)ci(cid:202) ich
do wybrania w(cid:239)a(cid:258)nie tego miejsca docelowego.
Zamiast obs(cid:239)ugiwa(cid:202) wszystkie mo(cid:285)liwe interakcje z u(cid:285)ytkownikiem na tym samym poziomie
szczegó(cid:239)owo(cid:258)ci, warto zastanowi(cid:202) si(cid:218) nad uproszczeniem interakcji w zale(cid:285)no(cid:258)ci od ich zna-
czenia. Ka(cid:285)da wykonywana przez u(cid:285)ytkownika interakcja z prototypem mo(cid:285)e by(cid:202) obs(cid:239)ugiwana
na ró(cid:285)nym poziomie szczegó(cid:239)owo(cid:258)ci, zale(cid:285)nym od znaczenia danej interakcji. Na przyk(cid:239)ad
mo(cid:285)emy pomin(cid:200)(cid:202) animowane efekty przej(cid:258)(cid:202) pomi(cid:218)dzy poszczególnymi ekranami, je(cid:258)li zale-
(cid:285)y nam na poznaniu ogólnych wra(cid:285)e(cid:241) i opinii u(cid:285)ytkowników na temat aplikacji. Pomimo
braku tych efektów taki prosty prototyp w zupe(cid:239)no(cid:258)ci wystarczy, by przekona(cid:202) si(cid:218), czy u(cid:285)yt-
kownicy uwa(cid:285)aj(cid:200), (cid:285)e sposób nawigowania pomi(cid:218)dzy poszczególnymi ekranami aplikacji jest
sensowny, czy nie. W przypadku badania konkretnych akcji, takich jak anulowanie powia-
domie(cid:241), mo(cid:285)na po(cid:258)wi(cid:218)ci(cid:202) nieco wi(cid:218)cej czasu na wierne odtworzenie u(cid:285)ywanych gestów,
animacji oraz innych aspektów interfejsu u(cid:285)ytkownika, aby dok(cid:239)adniej i bardziej szczegó(cid:239)owo
odtworzy(cid:202) do(cid:258)wiadczenia u(cid:285)ytkownika.
Podczas takiego upraszczania interakcji mo(cid:285)na ca(cid:239)kowicie pomin(cid:200)(cid:202) pewne kroki po(cid:258)rednie.
Na przyk(cid:239)ad, je(cid:258)li tworzony prototyp zawiera ekran Logowanie, lecz nie stanowi on g(cid:239)ównego
celu bada(cid:241), na których prototyp si(cid:218) koncentruje, to mo(cid:285)emy przedstawi(cid:202) ten ekran w formie
uproszczonej. Pokazanie ekranu logowania z ju(cid:285) wype(cid:239)nionymi polami jest mo(cid:285)e nieco
mniej realistyczne, jednak powinno w zupe(cid:239)no(cid:258)ci wystarczy(cid:202) u(cid:285)ytkownikom do zrozumienia
dzia(cid:239)ania ca(cid:239)ego procesu (patrz rysunek 6.3).
Wiele osób nawet nie zauwa(cid:285)y takiego przeskoku, na nieco podobnej zasadzie, na jakiej se-
ria statycznych obrazów wy(cid:258)wietlanych w kinie jest przez nas postrzegana jako p(cid:239)ynny ruch.
W wielu przypadkach ludzki mózg jest w stanie wype(cid:239)nia(cid:202) takie luki, a testy z wykorzystaniem
u(cid:285)ytkowników poka(cid:285)(cid:200), ile kroków mo(cid:285)na pomin(cid:200)(cid:202), by iluzja ci(cid:200)g(cid:239)o(cid:258)ci zosta(cid:239)a zachowana.
I ostatnia sprawa: konieczno(cid:258)(cid:202) zdefiniowania, czego chcemy si(cid:218) dowiedzie(cid:202), ju(cid:285) na samym po-
cz(cid:200)tku bada(cid:241). Tworzenie prototypu jest znacznie (cid:239)atwiejsze, je(cid:258)li precyzyjnie zdefiniujemy jego
cele, jeszcze zanim zaczniemy nad nim pracowa(cid:202). Okre(cid:258)laj(cid:200)c, czego si(cid:218) chcemy dowiedzie(cid:202),
mo(cid:285)emy zada(cid:202) sobie pytanie, czy wysi(cid:239)ek w(cid:239)o(cid:285)ony w stworzenie konkretnej cz(cid:218)(cid:258)ci prototypu
pomo(cid:285)e w dotarciu do wyznaczonego celu. Na tej podstawie mo(cid:285)na okre(cid:258)li(cid:202) koszty i korzy(cid:258)ci
oraz wybra(cid:202) najprostszy typ prototypu, który pozwoli nam dowiedzie(cid:202) si(cid:218) jak najwi(cid:218)cej.
160
Poleć książkęKup książkę Rozdzia(cid:225) 6. • Prototypowanie — o(cid:298)ywianie pomys(cid:225)ów
Rysunek 6.3. Prototyp procesu logowania obejmuj(cid:200)cy dwa ekrany oraz jedn(cid:200) (cid:239)(cid:200)cz(cid:200)c(cid:200) je interakcj(cid:218)
przedstawiony w programie Adobe InDesign. Ko(cid:241)cowy prototyp b(cid:218)dzie pocz(cid:200)tkowo prezentowa(cid:239) pierwszy
ekran, a nast(cid:218)pnie, kiedy u(cid:285)ytkownik dotknie pola Nazwa u(cid:285)ytkownika, zostanie wy(cid:258)wietlony drugi ekran
z wype(cid:239)nionymi polami tekstowymi symuluj(cid:200)cymi proces wpisywania danych uwierzytelniaj(cid:200)cych
W zale(cid:285)no(cid:258)ci od celu prototypu mo(cid:285)na wybiera(cid:202) ró(cid:285)ne style oraz u(cid:285)ywa(cid:202) ró(cid:285)nych na-
rz(cid:218)dzi. Istnieje wiele ró(cid:285)nych typów prototypów oraz wiele narz(cid:218)dzi do ich tworzenia.
W kolejnych punktach rozdzia(cid:239)u przedstawimy dost(cid:218)pne mo(cid:285)liwo(cid:258)ci oraz sytuacje, w ja-
kich warto je stosowa(cid:202).
Wybór typu prototypu
W zale(cid:285)no(cid:258)ci od przeznaczenia oraz czasu dost(cid:218)pnego na ich przygotowanie prototypy mog(cid:200)
by(cid:202) bardzo ró(cid:285)ne. Ilo(cid:258)(cid:202) potencjalnych typów prototypów, które mo(cid:285)na tworzy(cid:202), jest nie-
ograniczona. W ko(cid:241)cu w prototypowaniu chodzi o eksperymentowanie. Niemniej jednak
istniej(cid:200) pewne podej(cid:258)cia, które warto wykorzysta(cid:202) podczas szukania inspiracji do wypraco-
wania w(cid:239)asnego sposobu tworzenia prototypów. Te ró(cid:285)ne podej(cid:258)cia mo(cid:285)na scharakteryzowa(cid:202)
w oparciu o dwa kluczowe aspekty:
(cid:81) poziom wierno(cid:258)ci — który determinuje, jak realistycznie prototyp wygl(cid:200)da;
(cid:81) poziom interakcji — definiuj(cid:200)cy, jak prototyp reaguje na interakcje
z u(cid:285)ytkownikiem.
W zale(cid:285)no(cid:258)ci od poziomu wierno(cid:258)ci mo(cid:285)na znale(cid:283)(cid:202) prototypy, które w ró(cid:285)nym stopniu przy-
pominaj(cid:200) rzeczywiste produkty:
161
Poleć książkęKup książkę UX Design. Projektowanie aplikacji dla urz(cid:261)dze(cid:276) mobilnych
(cid:81) Prototypowanie na papierze jest sposobem prototypowania o niskim poziomie
wierno(cid:258)ci. Polega ono na wycinaniu, (cid:239)(cid:200)czeniu oraz przesuwaniu kawa(cid:239)ków
papieru z narysowanymi na nich ró(cid:285)nymi cz(cid:218)(cid:258)ciami interfejsu u(cid:285)ytkownika
(patrz rysunek 6.4). Mo(cid:285)na naszkicowa(cid:202) ró(cid:285)ne ekrany aplikacji, pokazywa(cid:202) je
u(cid:285)ytkownikom i zmienia(cid:202) aktualnie pokazywan(cid:200) kartk(cid:218) na inn(cid:200), symuluj(cid:200)c w ten
sposób interakcj(cid:218), która nast(cid:200)pi(cid:239)aby, gdyby u(cid:285)ytkownik dotkn(cid:200)(cid:239) jakiego(cid:258) elementu
naszkicowanego na papierze.
Rysunek 6.4. Prototyp papierowy, w którym ró(cid:285)ne elementy interfejsu u(cid:285)ytkownika zosta(cid:239)y po(cid:239)(cid:200)czone
w formie kola(cid:285)u ((cid:283)ród(cid:239)o: https://www.flickr.com/photos/21218849@N03/7984460226/)
W razie tworzenia takich prototypów mo(cid:285)na korzysta(cid:202) z przygotowanych szablonów,
takich jak te dost(cid:218)pne na stronie http://sneakpeekit.com, aby rysowa(cid:202) szkice na tle
kszta(cid:239)tu przypominaj(cid:200)cego ramk(cid:218) przegl(cid:200)darki. Mo(cid:285)na tak(cid:285)e wydrukowa(cid:202) ró(cid:285)ne
elementy interfejsu u(cid:285)ytkownika, takie jak przyciski i pola wyboru, a nast(cid:218)pnie
odpowiednio je (cid:239)(cid:200)czy(cid:202). Elastyczno(cid:258)(cid:202) medium, jakim jest papier, pozwala b(cid:239)yskawicznie
szkicowa(cid:202) nowe stany w odpowiedzi na nieprzewidziane wcze(cid:258)niej akcje wykonywane
przez u(cid:285)ytkownika. Niemniej jednak ze wzgl(cid:218)du na to, (cid:285)e u(cid:285)ytkownicy prowadz(cid:200)
interakcje ze szkicami na papierze, znacznie trudniej im b(cid:218)dzie w pe(cid:239)ni wyobrazi(cid:202)
sobie korzystanie z finalnego produktu.
Niski próg wej(cid:258)cia zwi(cid:200)zany z korzystaniem z prototypów papierowych sprawia,
(cid:285)e rozwi(cid:200)zanie to (cid:258)wietnie nadaje si(cid:218) do wykorzystania na wspólnych warsztatach
projektowych, w trakcie których mo(cid:285)emy zach(cid:218)ca(cid:202) u(cid:285)ytkowników do wyra(cid:285)ania
swoich w(cid:239)asnych pomys(cid:239)ów. Prototypy przygotowane przez u(cid:285)ytkowników mog(cid:200)
nie zawiera(cid:202) pomys(cid:239)ów gotowych do natychmiastowego wykorzystania, jednak
przydadz(cid:200) si(cid:218) projektantom do odnajdywania problemów, które nale(cid:285)y rozwi(cid:200)za(cid:202), oraz
okre(cid:258)lania tych aspektów rozwi(cid:200)zania, na których u(cid:285)ytkownikom najbardziej zale(cid:285)y.
162
Poleć książkęKup książkę Rozdzia(cid:225) 6. • Prototypowanie — o(cid:298)ywianie pomys(cid:225)ów
(cid:81) Prototypy cyfrowe niskiej wierno(cid:258)ci tak(cid:285)e bazuj(cid:200) na podobnym pomy(cid:258)le
— (cid:239)(cid:200)czeniu wielu szkiców w celu zasymulowania interakcji — jednak przenosz(cid:200)
go do (cid:258)wiata cyfrowego (patrz rysunek 6.5). Takich prototypów mo(cid:285)na u(cid:285)ywa(cid:202)
na rzeczywistych urz(cid:200)dzeniach i dzieli(cid:202) si(cid:218) nimi cyfrowo ze znajomymi lub
wspó(cid:239)pracownikami. Tak(cid:285)e w tym przypadku u(cid:285)ytkownicy b(cid:218)d(cid:200) ogl(cid:200)da(cid:202) jedynie
szkice stanowi(cid:200)ce abstrakcyjn(cid:200) reprezentacj(cid:218) produktu.
Rysunek 6.5. POP jest narz(cid:218)dziem do tworzenia prototypów dzia(cid:239)aj(cid:200)cym na urz(cid:200)dzeniach mobilnych;
pozwala ono na robienie zdj(cid:218)(cid:202) szkiców (z lewej) oraz definiowanie obszarów interaktywnych i powi(cid:200)za(cid:241)
pomi(cid:218)dzy nimi (z prawej)
Szkice mo(cid:285)na wykona(cid:202) na papierze, a nast(cid:218)pnie zrobi(cid:202) ich zdj(cid:218)cia, przy przenie(cid:258)(cid:202)
je do formatu cyfrowego; mo(cid:285)na te(cid:285) w ca(cid:239)o(cid:258)ci tworzy(cid:202) je cyfrowo. W obu
przypadkach szkice b(cid:218)d(cid:200) ze sob(cid:200) (cid:239)(cid:200)czone w aplikacji do prototypowania,
pozwalaj(cid:200)cej okre(cid:258)la(cid:202) sposoby reakcji na ró(cid:285)ne interakcje z u(cid:285)ytkownikiem.
(cid:81) Prototypy o wysokiej wierno(cid:258)ci s(cid:200) na tyle realistyczne, (cid:285)e nie sposób ich odró(cid:285)ni(cid:202)
od rzeczywistego produktu (patrz rysunek 6.6). Cho(cid:202) mog(cid:200) one traktowa(cid:202) pewne
aspekty pobie(cid:285)nie lub pomija(cid:202) niektóre etapy, by zasymulowa(cid:202) zamierzone
do(cid:258)wiadczenia, to jednak u(cid:285)ytkownik b(cid:218)dzie móg(cid:239) w pe(cid:239)ni je odczu(cid:202) i zanurzy(cid:202)
si(cid:218) w nich. W tym przypadku u(cid:285)ytkownicy b(cid:218)d(cid:200) komunikowa(cid:202) swoje doznania
w sposób bezpo(cid:258)redni, bez konieczno(cid:258)ci wyobra(cid:285)ania sobie czegokolwiek.
Tworzenie takich prototypów wymaga bardziej zaawansowanych narz(cid:218)dzi,
niezb(cid:218)dnych do przygotowania realistycznych materia(cid:239)ów i u(cid:285)ycia ich w prototypie.
163
Poleć książkęKup książkę UX Design. Projektowanie aplikacji dla urz(cid:261)dze(cid:276) mobilnych
Rysunek 6.6. Czy to aplikacja, czy prototyp? Brak mo(cid:285)liwo(cid:258)ci odró(cid:285)nienia prototypu od aplikacji pozwala
u(cid:285)ytkownikom pog(cid:239)(cid:218)bi(cid:202) do(cid:258)wiadczenia
Kolejnym czynnikiem po poziomie wierno(cid:258)ci determinuj(cid:200)cym natur(cid:218) prototypów jest ich
poziom interakcji. Prototypy mog(cid:200) udost(cid:218)pnia(cid:202) ró(cid:285)ne poziomy interakcji, okre(cid:258)laj(cid:200)c tym
samym, czy rola u(cid:285)ytkownika b(cid:218)dzie bardziej aktywna, czy pasywna.
(cid:81) Prototypy pozbawione interakcji zawieraj(cid:200) statyczne obrazy pokazuj(cid:200)ce, jak
produkt b(cid:218)dzie wygl(cid:200)da(cid:239) w konkretnym kontek(cid:258)cie, ewentualnie klipy wideo
prezentuj(cid:200)ce posta(cid:202) interakcji. W takich prototypach u(cid:285)ytkownicy nie maj(cid:200)
kontroli, dzi(cid:218)ki czemu unikamy konieczno(cid:258)ci przygotowywania prototypu na
ewentualne interakcje z u(cid:285)ytkownikiem. Osoby przegl(cid:200)daj(cid:200)ce taki prototyp
mog(cid:200) komentowa(cid:202) to, co widz(cid:200), b(cid:200)d(cid:283) te(cid:285) mówi(cid:202), co s(cid:200)dz(cid:200) na temat pomys(cid:239)ów
odzwierciedlonych w prototypie. Prototypy tego typu doskonale nadaj(cid:200) si(cid:218) do
zbierania opinii od szerszych grup odbiorców, jednak nie zapewniaj(cid:200) mo(cid:285)liwo(cid:258)ci
zbierania informacji dotycz(cid:200)cych faktycznego dzia(cid:239)ania.
(cid:81) Prototypy interaktywne zapewniaj(cid:200) u(cid:285)ytkownikom mo(cid:285)liwo(cid:258)(cid:202) interakcji
z prototypem w taki sam sposób, w jaki pó(cid:283)niej by(cid:239)by u(cid:285)ywany finalny produkt.
W porównaniu z prototypami pozbawionymi interakcji prototypy interaktywne
zapewniaj(cid:200) u(cid:285)ytkownikom g(cid:239)(cid:218)bsze do(cid:258)wiadczenia i pozwalaj(cid:200) im zachowywa(cid:202) si(cid:218)
w bardziej naturalny sposób. Umo(cid:285)liwiaj(cid:200) one tak(cid:285)e gromadzenie wniosków
w oparciu o faktyczne zachowania u(cid:285)ytkowników, a nie jedynie na podstawie
ich pocz(cid:200)tkowych wra(cid:285)e(cid:241) i opinii.
W tej ksi(cid:200)(cid:285)ce skoncentrujemy si(cid:218) g(cid:239)ównie na interaktywnych prototypach o wysokiej wierno(cid:258)ci,
gdy(cid:285) pozwalaj(cid:200) one na gromadzenie najbardziej warto(cid:258)ciowych opinii. Niemniej jednak przed-
stawione techniki mo(cid:285)na wykorzysta(cid:202) podczas tworzenia prototypów dowolnych typów. Na
przyk(cid:239)ad po utworzeniu prototypu interaktywnego bez trudu b(cid:218)dzie mo(cid:285)na przygotowa(cid:202) klip
wideo prezentuj(cid:200)cy konkretny tok pracy, uzyskuj(cid:200)c w ten sposób prototyp pozbawiony interakcji.
164
Poleć książkęKup książkę Rozdzia(cid:225) 6. • Prototypowanie — o(cid:298)ywianie pomys(cid:225)ów
Dobór narz(cid:218)dzi do tworzenia prototypów
Istnieje wiele ró(cid:285)nych narz(cid:218)dzi s(cid:239)u(cid:285)(cid:200)cych do tworzenia prototypów (patrz rysunek 6.7),
a w przysz(cid:239)o(cid:258)ci najprawdopodobniej pojawi si(cid:218) ich jeszcze wi(cid:218)cej. Niemniej jednak wiele
z nich wykorzystuje podobne rozwi(cid:200)zania, dzi(cid:218)ki czemu znajomo(cid:258)(cid:202) jednego z nich mo(cid:285)e si(cid:218)
przyda(cid:202) tak(cid:285)e podczas korzystania z innych.
Rysunek 6.7. Program Adobe Experience Design jest narz(cid:218)dziem do projektowania i prototypowania
pozwalaj(cid:200)cym na wizualne (cid:239)(cid:200)czenie ró(cid:285)nych stron poprzez tworzenie przej(cid:258)(cid:202). Symulator pokazany z prawej
strony prezentuje jeden widok w danej chwili, pozwalaj(cid:200)c u(cid:285)ytkownikowi na interakcje z prototypem
((cid:283)ród(cid:239)o: zrzut ekranu z programu Adobe Experience Design)
Narz(cid:218)dzia bazuj(cid:200)ce na przechodzeniu pomi(cid:218)dzy stronami korzystaj(cid:200) z ró(cid:285)nych stron oraz
obszarów interaktywnych. Stron(cid:218) mo(cid:285)na zdefiniowa(cid:202) w taki sposób, by zawiera(cid:239)a konkretny
widok aplikacji. Strony te mog(cid:200) by(cid:202) tworzone w oparciu o pojedynczy obraz interfejsu u(cid:285)yt-
kownika zaprojektowany w zupe(cid:239)nie innym narz(cid:218)dziu lub sk(cid:239)ada(cid:202) si(cid:218) z po(cid:239)(cid:200)czenia ró(cid:285)nych
kontrolek interfejsu u(cid:285)ytkownika.
W celu tworzenia interakcji mo(cid:285)emy definiowa(cid:202) na stronie interaktywne obszary i przej(cid:258)cia
do innych stron. W ten sposób mo(cid:285)emy okre(cid:258)li(cid:202), (cid:285)e dotkni(cid:218)cie obszaru ikony menu spowo-
duje przej(cid:258)cie do widoku menu. Oprócz odwzorowa(cid:241) sposobów poruszania si(cid:218) po aplikacji
mo(cid:285)na tak(cid:285)e definiowa(cid:202) przej(cid:258)cia symuluj(cid:200)ce zmiany stanów, na przyk(cid:239)ad zmian(cid:218) pustego
pola wyboru na pole zaznaczone.
Cz(cid:218)sto wyst(cid:218)puj(cid:200)cym ograniczeniem narz(cid:218)dzi tego typu s(cid:200) problemy z reprezentacj(cid:200) wielu
równoczesnych stanów, wynikaj(cid:200)ce z konieczno(cid:258)ci dostosowania stanu prototypu do (cid:258)cie(cid:285)ki
u(cid:285)ytkownika realizuj(cid:200)cego ró(cid:285)ne interakcje. Innymi s(cid:239)owy, je(cid:258)li prototyp pozwala na wyko-
nanie opcjonalnej czynno(cid:258)ci, której efekty musz(cid:200) zosta(cid:202) w jaki(cid:258) sposób zachowane, takiej jak
165
Poleć książkęKup książkę UX Design. Projektowanie aplikacji dla urz(cid:261)dze(cid:276) mobilnych
usuni(cid:218)cie elementu z listy, to mo(cid:285)e si(cid:218) okaza(cid:202), (cid:285)e konieczne b(cid:218)dzie powielenie wielu widoków,
by uwzgl(cid:218)dni(cid:202) sytuacj(cid:218), gdy element zosta(cid:239) usuni(cid:218)ty oraz gdy nie zosta(cid:239) usuni(cid:218)ty z listy.
Narz(cid:218)dzia korzystaj(cid:200)ce z interakcji na warstwach pozwalaj(cid:200) na tworzenie prototypów po-
przez niezale(cid:285)ne manipulowanie ró(cid:285)nymi elementami. W takim narz(cid:218)dziu mo(cid:285)na stworzy(cid:202)
prototyp zawieraj(cid:200)cy list(cid:218) elementów, a nast(cid:218)pnie niezale(cid:285)nie kontrolowa(cid:202) widoczno(cid:258)(cid:202) ka(cid:285)-
dego z nich.
Takie rozwi(cid:200)zanie zapewnia pe(cid:239)n(cid:200) kontrol(cid:218) nad statusem poszczególnych elementów proto-
typu. Przyk(cid:239)ad programu tego typu zosta(cid:239) przedstawiony na rysunku 6.8.
Rysunek 6.8. Program Pixate korzysta z warstw (wy(cid:258)wietlonych po lewej) i pozwala na modyfikowanie
ró(cid:285)nych w(cid:239)a(cid:258)ciwo(cid:258)ci (po prawej), w tym na definiowanie dla ka(cid:285)dej z warstw odr(cid:218)bnych interakcji i animacji
((cid:283)ród(cid:239)o: zrzut ekranu z programu Pixate)
Cz(cid:218)st(cid:200) wad(cid:200) narz(cid:218)dzi tego typu jest to, (cid:285)e zmuszaj(cid:200) one do wydzielania fragmentów i two-
rzenia prototypów z wielu cz(cid:218)(cid:258)ci. Poniewa(cid:285) szkielety i atrapy zazwyczaj s(cid:200) tworzone w od-
r(cid:218)bnych narz(cid:218)dziach, zmusza to nas do eksportowania odpowiednich fragmentów z narz(cid:218)dzia
u(cid:285)ywanego do tworzenia projektu graficznego i importowania ich w narz(cid:218)dziu do prototy-
powania. Niektóre programy udost(cid:218)pniaj(cid:200) zaawansowane narz(cid:218)dzia do importu, które
upraszczaj(cid:200) i skracaj(cid:200) ten proces.
Narz(cid:218)dzia dzia(cid:239)aj(cid:200)ce w oparciu o o(cid:258) czasu tak(cid:285)e korzystaj(cid:200) z warstw, jednak w ich przy-
padku kluczowe znaczenie ma up(cid:239)yw czasu. Dzi(cid:218)ki wykorzystaniu osi czasu zapewniaj(cid:200)
one dok(cid:239)adn(cid:200) kontrol(cid:218) nad animacjami i efektami przej(cid:258)(cid:202) stosowanymi w prototypach.
166
Poleć książkęKup książkę Rozdzia(cid:225) 6. • Prototypowanie — o(cid:298)ywianie pomys(cid:225)ów
W prototypach tworzonych w narz(cid:218)dziach tego typu mo(cid:285)na stosowa(cid:202) zasady projektowania
ruchu i dostosowywa(cid:202) szczegó(cid:239)y wszystkich animacji. Przyk(cid:239)ad programu tego typu zosta(cid:239)
przedstawiony na rysunku 6.9.
Rysunek 6.9. Program Tumult Hype korzysta z osi czasu wy(cid:258)wietlonej u do(cid:239)u, by pokazywa(cid:202), jak ró(cid:285)ne
elementy i ich w(cid:239)a(cid:258)ciwo(cid:258)ci zmieniaj(cid:200) si(cid:218) wraz z up(cid:239)ywem czasu ((cid:283)ród(cid:239)o: zrzut ekranu z programu Tumult Hype)
Narz(cid:218)dzia wykorzystuj(cid:200)ce po(cid:239)(cid:200)czenia pomi(cid:218)dzy komponentami dzia(cid:239)aj(cid:200) w oparciu o para-
dygmat programowania wizualnego. Pozwalaj(cid:200) one na (cid:239)(cid:200)czenie bloków reprezentuj(cid:200)cych
interaktywne komponenty, interakcje u(cid:285)ytkownika oraz elementy logiczne. Przyk(cid:239)ad takiego
programu zosta(cid:239) przedstawiony na rysunku 6.10.
Dzia(cid:239)anie prototypu mo(cid:285)emy definiowa(cid:202) poprzez (cid:239)(cid:200)czenie bloków. Blok reprezentuj(cid:200)cy gest
uszczypni(cid:218)cia mo(cid:285)emy po(cid:239)(cid:200)czy(cid:202) z w(cid:239)a(cid:258)ciwo(cid:258)ci(cid:200) okre(cid:258)laj(cid:200)c(cid:200) wielko(cid:258)(cid:202) obrazka, symuluj(cid:200)c
w ten sposób operacj(cid:218) jego zmniejszania i powi(cid:218)kszania. Definiuj(cid:200)c takie po(cid:239)(cid:200)czenia, mo(cid:285)na
tak(cid:285)e stosowa(cid:202) pewne bloki logiczne, pozwalaj(cid:200)ce na przyk(cid:239)ad na ograniczenie zakresu po-
wi(cid:218)kszania lub kontrol(cid:218) szybko(cid:258)ci efektu przej(cid:258)cia.
Narz(cid:218)dzia wymagaj(cid:200)ce pisania kodu pozwalaj(cid:200) na definiowanie prototypów przy u(cid:285)yciu
j(cid:218)zyka programowania (patrz rysunek 6.11). Wykorzystuj(cid:200) one pewne zasady prototypowa-
nia, by u(cid:239)atwi(cid:202) tworzenie przej(cid:258)(cid:202) pomi(cid:218)dzy stanami i definiowanie animacji oraz by upro(cid:258)ci(cid:202)
zapisywanie ich w formie kodu. Narz(cid:218)dzia tego typu cz(cid:218)sto pozwalaj(cid:200) tak(cid:285)e na integracj(cid:218)
z innymi komponentami programowymi, zapewniaj(cid:200)c tym samym du(cid:285)(cid:200) elastyczno(cid:258)(cid:202). Nie-
mniej jednak ta elastyczno(cid:258)(cid:202) mo(cid:285)e kusi(cid:202), by dodawa(cid:202) do prototypu niepotrzebne szczegó(cid:239)y.
Zatem stosuj(cid:200)c takie narz(cid:218)dzia, musimy stara(cid:202) si(cid:218) pami(cid:218)ta(cid:202) o zasadach prototypowania i dba(cid:202),
by tworzone prototypy koncentrowa(cid:239)y si(cid:218) na wybranych zagadnieniach.
167
Poleć książkęKup książkę UX Design. Projektowanie aplikacji dla urz(cid:261)dze(cid:276) mobilnych
Rysunek 6.10. Form to narz(cid:218)dzie do tworzenia prototypów, którego dzia(cid:239)anie opiera si(cid:218) na zasadzie
(cid:239)(cid:200)czenia komponentów. Z lewej strony widoczny jest edytor pozwalaj(cid:200)cy na dodawanie bloków i (cid:239)(cid:200)czenie ich
w(cid:239)a(cid:258)ciwo(cid:258)ci; z prawej — symulator prezentuj(cid:200)cy wynikowy prototyp ((cid:283)ród(cid:239)o: zrzut ekranu z programu Form)
Rysunek 6.11. Framer to narz(cid:218)dzie do tworzenia prototypów wymagaj(cid:200)ce pisania kodu. Warstwy, ich w(cid:239)a(cid:258)ciwo(cid:258)ci
oraz wszystkie interakcje musz(cid:200) by(cid:202) definiowane w postaci tekstowej. Do wizualizacji prototypu u(cid:285)ywane s(cid:200)
dodatkowe narz(cid:218)dzia ((cid:283)ród(cid:239)o: zrzut ekranu z programu Framer)
168
Poleć książkęKup książkę Rozdzia(cid:225) 6. • Prototypowanie — o(cid:298)ywianie pomys(cid:225)ów
Cz(cid:218)sto pojawia si(cid:218) konieczno(cid:258)(cid:202) utworzenia prototypu pozbawionego interakcji w oparciu
o prototyp interaktywny. Do tego celu mo(cid:285)na u(cid:285)y(cid:202) narz(cid:218)dzi do tworzenia tre(cid:258)ci multime-
dialnych. Na przyk(cid:239)ad programu do przechwytywania ekranu mo(cid:285)na u(cid:285)y(cid:202) do zarejestrowa-
nia interakcji z prototypem, a programu do edycji wideo — do przyci(cid:218)cia zarejestrowanego
materia(cid:239)u, zmontowania go, dodania (cid:258)cie(cid:285)ki d(cid:283)wi(cid:218)kowej i dopracowania finalnego klipu.
Planowanie prototypu
Prototypowanie to proces poznawczy i nie powinni(cid:258)my obawia(cid:202) si(cid:218) pope(cid:239)niania b(cid:239)(cid:218)dów,
o ile tylko na ich podstawie mo(cid:285)emy si(cid:218) czego(cid:258) dowiedzie(cid:202). Nie ma nic z(cid:239)ego w odkrywaniu
pyta(cid:241) dotycz(cid:200)cych projektu, na które jeszcze nie znamy odpowiedzi, i odpowiadaniu na nie
podczas tworzenia prototypów. Cz(cid:218)(cid:258)ci(cid:200) tego procesu jest eksperymentowanie. Oczywi(cid:258)cie
troch(cid:218) planowania pomo(cid:285)e nam zaoszcz(cid:218)dzi(cid:202) nieco czasu.
Podczas tworzenia prototypów zachowanie efektywno(cid:258)ci pracy wymaga chodzenia na skróty
i traktowania niektórych aspektów rozwi(cid:200)zania pobie(cid:285)nie. Takie decyzje mog(cid:200) ograniczy(cid:202)
liczb(cid:218) dost(cid:218)pnych opcji i warto postara(cid:202) si(cid:218), cho(cid:202)by w pewnym stopniu, oszacowa(cid:202) ich kon-
sekwencje. W ko(cid:241)cu nikt nie chcia(cid:239)by znale(cid:283)(cid:202) si(cid:218) w sytuacji, w której w po(cid:239)owie prac nad
prototypem okazuje si(cid:218), (cid:285)e wybrane narz(cid:218)dzie nie obs(cid:239)uguje interakcji absolutnie niezb(cid:218)d-
nej dla kluczowej cz(cid:218)(cid:258)ci prototypu.
W tym podrozdziale przedstawimy kilka zagadnie(cid:241), które nale(cid:285)y przemy(cid:258)le(cid:202) przez rozpo-
cz(cid:218)ciem prac nad prototypem. Warto po(cid:258)wi(cid:218)ci(cid:202) nieco czasu na planowanie, niemniej
w trakcie tworzenia prototypu mo(cid:285)na dowolnie eksperymentowa(cid:202).
Okre(cid:258)lanie, co ma zosta(cid:202) uwzgl(cid:218)dnione w prototypie
Znajomo(cid:258)(cid:202) celów, jakim ma s(cid:239)u(cid:285)y(cid:202) prototyp, u(cid:239)atwi podejmowanie kluczowych decyzji pod-
czas procesu jego tworzenia. Rozpoczynaj(cid:200)c prace nad prototypem, nale(cid:285)y mie(cid:202) jasno(cid:258)(cid:202) co
do nast(cid:218)puj(cid:200)cych zagadnie(cid:241):
(cid:81) Cel: czego chcemy si(cid:218) dowiedzie(cid:202) dzi(cid:218)ki tworzonemu prototypowi?
(cid:81) Odbiorcy: od kogo chcemy zbiera(cid:202) informacje?
(cid:81) Scenariusz: jakie aktywno(cid:258)ci w konkretnym kontek(cid:258)cie b(cid:218)d(cid:200) obs(cid:239)ugiwane
przez prototyp?
Odpowiedzi na te pytania pozwol(cid:200) nam wybra(cid:202) sposób tworzenia prototypu oraz narz(cid:218)dzia,
których mo(cid:285)na do tego u(cid:285)y(cid:202).
Nale(cid:285)y bardzo precyzyjnie okre(cid:258)li(cid:202) cel, jakiemu ma s(cid:239)u(cid:285)y(cid:202) prototyp. Na przyk(cid:239)ad mo(cid:285)emy
chcie(cid:202) dowiedzie(cid:202) si(cid:218) czego(cid:258) na temat ogólnego zrozumienia naszego pomys(cid:239)u, przejrzysto-
(cid:258)ci systemu nawigacyjnego, (cid:239)atwo(cid:258)ci odnajdywania konkretnych aktywno(cid:258)ci, p(cid:239)ynno(cid:258)ci reali-
zacji konkretnych zada(cid:241) czy te(cid:285) wielu innych czynników maj(cid:200)cych wp(cid:239)yw na do(cid:258)wiadczenia
u(cid:285)ytkownika. Jeden prototyp mo(cid:285)e by(cid:202) tworzony w kilku celach, jednak nale(cid:285)y przy tym
169
Poleć książkęKup książkę UX Design. Projektowanie aplikacji dla urz(cid:261)dze(cid:276) mobilnych
unika(cid:202) celów ogólnych, takich jak „czy pomys(cid:239) spe(cid:239)ni oczekiwania”. W przeciwnym razie
mo(cid:285)e si(cid:218) okaza(cid:202), (cid:285)e trudno b(cid:218)dzie okre(cid:258)li(cid:202), które aspekty rozwi(cid:200)zania nale(cid:285)y uwzgl(cid:218)dni(cid:202)
w prototypie, by móc odpowiedzie(cid:202) na postawione pytania.
Musimy pomóc odbiorcom w dostarczaniu nam u(cid:285)ytecznych odpowiedzi. Warto zastanowi(cid:202)
si(cid:218), czy wybrana grupa osób b(cid:218)dzie w stanie odpowiedzie(cid:202) na postawione pytanie oraz jak
prototyp mo(cid:285)e im w tym pomóc. Je(cid:258)li tworzymy prototyp, by przedyskutowa(cid:202) pomys(cid:239)y z in-
nymi projektantami, to prototyp o niskiej wierno(cid:258)ci w zupe(cid:239)no(cid:258)ci wystarczy do tego celu;
z kolei prototyp o du(cid:285)ej wierno(cid:258)ci lepiej spe(cid:239)ni zadanie, kiedy b(cid:218)dziemy chcieli przeanali-
zowa(cid:202) konkretne szczegó(cid:239)y zachowa(cid:241) rzeczywistych u(cid:285)ytkowników.
Prototyp powinien opiera(cid:202) si(cid:218) na kontek(cid:258)cie, który jest znany odbiorcom, gdy(cid:285) w takim
przypadku (cid:239)atwiej im b(cid:218)dzie zrozumie(cid:202) sytuacj(cid:218), w jakiej zostali postawieni. Je(cid:258)li tworzymy
prototyp aplikacji wspomagaj(cid:200)cej podró(cid:285)owanie, to zapewne jako przyk(cid:239)adowe miejsce do-
celowe lepiej b(cid:218)dzie wybra(cid:202) znane miasto ni(cid:285) tajemnicz(cid:200) miejscowo(cid:258)(cid:202) o nazwie trudnej do
wymówienia — oczywi(cid:258)cie gdy w(cid:239)a(cid:258)nie takiej sytuacji nie chcemy przetestowa(cid:202).
Trzeba si(cid:218) tak(cid:285)e zastanowi(cid:202), w jaki sposób prototyp zostanie dostarczony wybranym odbior-
com. W zale(cid:285)no(cid:258)ci od ich liczby i lokalizacji mo(cid:285)na im dostarczy(cid:202) urz(cid:200)dzenia z zainstalowa-
nym prototypem lub udost(cid:218)pni(cid:202) im go, by mogli zainstalowa(cid:202) go na w(cid:239)asnych urz(cid:200)dzeniach.
Wiele narz(cid:218)dzi do prototypowania pozwala generowa(cid:202) prototypy w formie kodu HMTL,
co dzi(cid:218)ki powszechnej dost(cid:218)pno(cid:258)ci przegl(cid:200)darek WWW sprawia, (cid:285)e z powodzeniem mo(cid:285)na
je testowa(cid:202) na wielu urz(cid:200)dzeniach. Jednak istniej(cid:200) tak(cid:285)e narz(cid:218)dzia tworz(cid:200)ce prototypy prze-
znaczone dla konkretnych platform, co ogranicza liczb(cid:218) potencjalnych odbiorców oraz zmu-
sza ich do przeprowadzenia jakiego(cid:258) procesu instalacyjnego.
W zale(cid:285)no(cid:258)ci od wybranego scenariusza mo(cid:285)na tak(cid:285)e wskaza(cid:202) aspekty o ró(cid:285)nej wa(cid:285)no(cid:258)ci
— minimalny zestaw aspektów obs(cid:239)ugiwanych przez dany scenariusz, aspekty wymagane
w rozszerzonym kontek(cid:258)cie oraz te, których nie trzeba uwzgl(cid:218)dnia(cid:202) w prototypie. Wysi(cid:239)ki
nale(cid:285)y skoncentrowa(cid:202) na tych najwa(cid:285)niejszych aspektach.
W niektórych przypadkach mo(cid:285)e by(cid:202) trudno precyzyjnie okre(cid:258)li(cid:202), co nale(cid:285)y uwzgl(cid:218)dni(cid:202)
w prototypie. Mo(cid:285)emy nie wiedzie(cid:202), które kierunki tworzenia projektu s(cid:200) najbardziej obie-
cuj(cid:200)ce. W takich sytuacjach mo(cid:285)na przygotowa(cid:202) wiele prototypów i przeanalizowa(cid:202), jak
u(cid:285)ytkownicy reaguj(cid:200) na poszczególne pomys(cid:239)y. Jednak ze wzgl(cid:218)du na ograniczon(cid:200) ilo(cid:258)(cid:202) cza-
su na przygotowanie prototypu konieczne b(cid:218)dzie dokonanie wyboru pomi(cid:218)dzy tworzeniem
jednego szczegó(cid:239)owego prototypu a kilku mniej szczegó(cid:239)owych.
Wybór sposobu tworzenia prototypu
Po wybraniu scenariusza, który zostanie zobrazowany w formie prototypu, konieczne b(cid:218)dzie
przedstawienie szczegó(cid:239)ów wszystkich interakcji, które u(cid:285)ytkownik b(cid:218)dzie musia(cid:239) wykona(cid:202)
w ramach tego scenariusza. Poszczególne kroki, które b(cid:218)dzie mia(cid:239) uwzgl(cid:218)dnia(cid:202) prototyp, mo(cid:285)na
przedstawi(cid:202) w formie sekwencji szkiców (ang. sketchflow). Oprócz samych szkiców repre-
zentuj(cid:200)cych poszczególne kroki zawiera ona tak(cid:285)e (cid:239)(cid:200)cz(cid:200)ce je interakcje (patrz rysunek 6.12).
170
Poleć książkęKup książkę Rozdzia(cid:225) 6. • Prototypowanie — o(cid:298)ywianie pomys(cid:225)ów
Rysunek 6.12. Sekwencja szkiców reprezentuj(cid:200)ca proces aktualizacji grafiki przeznaczonej do u(cid:285)ycia
w aplikacji do tworzenia prototypów
W tworzeniu w(cid:239)asnych prototypów mo(cid:285)e pomóc przygotowanie sobie gotowych szablonów. Takie
szablony przydadz(cid:200) si(cid:218) tak(cid:285)e podczas przegl(cid:200)dania prac i oceniania ich post(cid:218)pów. Poniewa(cid:285) pro-
totypy maj(cid:200) sprawia(cid:202) wra(cid:285)enie, (cid:285)e dzia(cid:239)aj(cid:200), (cid:239)atwo jest pomin(cid:200)(cid:202) w nich pewne interakcje; przygo-
towane wcze(cid:258)niej szablony pozwalaj(cid:200) bardziej systematycznie sprawdza(cid:202) zawarto(cid:258)(cid:202) prototypów.
Nasz scenariusz mo(cid:285)e mie(cid:202) idealn(cid:200) (cid:258)cie(cid:285)k(cid:218) reprezentuj(cid:200)c(cid:200) czynno(cid:258)ci, które u(cid:285)ytkownik wykona(cid:239)-
by w idealnej sytuacji. Jednak w razie tworzenia prototypów interaktywnych nie jeste(cid:258)my w stanie
kontrolowa(cid:202) dzia(cid:239)a(cid:241) u(cid:285)ytkowników, a oni niejednokrotnie nie b(cid:218)d(cid:200) post(cid:218)powa(cid:202) zgodnie z nasz(cid:200)
idealn(cid:200) (cid:258)cie(cid:285)k(cid:200). Dlatego warto uwzgl(cid:218)dni(cid:202) przej(cid:258)cia pozwalaj(cid:200)ce u(cid:285)ytkownikom cofn(cid:200)(cid:202) si(cid:218) oraz
postara(cid:202) si(cid:218) przewidzie(cid:202) miejsca, w których u(cid:285)ytkownicy mog(cid:200) zbacza(cid:202) z idealnej (cid:258)cie(cid:285)ki.
Zapewnienie u(cid:285)ytkownikom realistycznego kontekstu pozwoli im lepiej poj(cid:200)(cid:202) i odczu(cid:202)
do(cid:258)wiadczenia towarzysz(cid:200)ce tworzeniu prototypu. Warto unika(cid:202) zamienników takich jak
„Lorem Ipsum” oraz u(cid:285)ywa(cid:202) sensownych i dobrze dobranych przyk(cid:239)adów. W prototypie mo(cid:285)-
na uwzgl(cid:218)dni(cid:202) tak(cid:285)e dodatkowe kroki, jako wst(cid:218)p do dodatnia bardziej rozbudowanego kon-
tekstu. Na przyk(cid:239)ad, je(cid:258)li chce si(cid:218) wzmocni(cid:202) wra(cid:285)enia z pierwszego uruchomienia aplikacji,
to zamiast rozpoczyna(cid:202) prototyp od pokazania jej ekranu pocz(cid:200)tkowego, mo(cid:285)na zacz(cid:200)(cid:202) od
przedstawienia ekranu sklepu z aplikacjami, z poziomu którego u(cid:285)ytkownik j(cid:200) zainstaluje.
W praktyce
Prototypowanie jest bardzo wa(cid:285)nym elementem procesu projektowania. Jednak nie wszyscy
wiedz(cid:200), jak(cid:200) rol(cid:218) ono powinno pe(cid:239)ni(cid:202). Oto kilka uwag, które mog(cid:200) pomóc w prawid(cid:239)owym
wykorzystaniu prototypowania w praktyce.
Prototyp to nie wczesna wersja produktu
Termin „prototyp” jest cz(cid:218)sto u(cid:285)ywany w wielu ró(cid:285)nych znaczeniach. Zdarza si(cid:218), (cid:285)e terminem
tym jest okre(cid:258)lana wczesna wersja produktu, gdy(cid:285) zawiera ona jeszcze sporo rzeczy wyma-
gaj(cid:200)cych dopracowania. Jednak takie niedopracowane produkty nie s(cid:200) w stanie w pe(cid:239)ni
171
Poleć książkęKup książkę UX Design. Projektowanie aplikacji dla urz(cid:261)dze(cid:276) mobilnych
zaoferowa(cid:202) finalnych do(cid:258)wiadcze(cid:241) u(cid:285)ytkowników (gdy(cid:285) nie s(cid:200) kompletne), ich przygotowa-
nie wymaga dodatkowego wysi(cid:239)ku, a one same stanowi(cid:200) swoiste zobowi(cid:200)zanie do rozwoju
produktu w okre(cid:258)lonym kierunku.
Prototypy tworzy si(cid:218) wy(cid:239)(cid:200)cznie w celu przetestowania pomys(cid:239)u, a brak w nich pewnych
elementów jest efektem (cid:258)wiadomych decyzji dotycz(cid:200)cych wa(cid:285)no(cid:258)ci elementów prezentowa-
nych u(cid:285)ytkownikom oraz maj(cid:200)cych istotne znaczenie dla uzyskania odpowiedzi na posta-
wione pytania dotycz(cid:200)ce projektu. Prototyp udaje finalny produkt w tak du(cid:285)ym stopniu, jak
to mo(cid:285)liwe, a(cid:285) do punktu, w którym jego ponowne wykorzystanie staje si(cid:218) bezcelowe. Nie
jest to jednak problemem, gdy(cid:285) najwi(cid:218)ksz(cid:200) warto(cid:258)ci(cid:200) prototypów jest nauka i informacje;
gdy te zostan(cid:200) zdobyte, prototyp mo(cid:285)na porzuci(cid:202).
Prototyp jest wart tysi(cid:200)ca spotka(cid:241)
„Je(cid:258)li obraz jest wart tysi(cid:200)ca s(cid:239)ów, to prototyp jest wart tysi(cid:200)ca spotka(cid:241)”
— s(cid:239)ynne powiedzenie z firmy IDEO.
Spotkania cz(cid:218)sto s(cid:200) wype(cid:239)nione dyskusjami opieraj(cid:200)cymi si(cid:218) na opiniach i spekulacjach.
Materia(cid:239)y cz(cid:218)sto u(cid:285)ywane na spotkaniach, takie jak konkretne has(cid:239)a i statyczne obrazy, wci(cid:200)(cid:285)
wymagaj(cid:200) du(cid:285)ego umys(cid:239)owego wysi(cid:239)ku, koniecznego do wyobra(cid:285)enia sobie, jak pomys(cid:239)y
b(cid:218)d(cid:200) si(cid:218) sprawdza(cid:202) w praktyce.
Prezentuj(cid:200)c prototyp, nale(cid:285)y si(cid:218) skoncentrowa(cid:202) na opowie(cid:258)ci, dzi(cid:218)ki której odbiorcy wyobra(cid:285)(cid:200)
sobie kontekst sytuacji. Koniecznie nale(cid:285)y przy tym podkre(cid:258)li(cid:202) problemy, które nasz projekt
rozwi(cid:200)zuje, a zrezygnowa(cid:202) z opisywania jego konkretnych cech. Prototyp mo(cid:285)e pe(cid:239)ni(cid:202) rol(cid:218)
okna do przysz(cid:239)o(cid:258)ci, pokazuj(cid:200)cego, jak tworzony produkt b(cid:218)dzie dzia(cid:239)a(cid:202). Pozwala on na bez-
po(cid:258)rednie do(cid:258)wiadczenie rozwi(cid:200)zania i pomaga skoncentrowa(cid:202) si(cid:218) na podanym kontek(cid:258)cie.
Podsumowanie
W tym rozdziale przedstawili(cid:258)my podstawowe zasady prototypowania. Podchodz(cid:200)c do tego
z odpowiednim nastawieniem, mo(cid:285)na szybko nauczy(cid:202) si(cid:218) przekszta(cid:239)cania dowolnych pomy-
s(cid:239)ów w co(cid:258) rzeczywistego i pozyskiwania na tej podstawie cennych informacji. W ten sposób
mo(cid:285)na b(cid:239)yskawicznie bada(cid:202) bardziej innowacyjne rozwi(cid:200)zania dla tworzonych aplikacji
i poprawia(cid:202) je na bazie opinii zebranych od rzeczywistych u(cid:285)ytkowników.
Prototypowanie jest jednym z kluczowych etapów procesu projektowania. Jednak s(cid:200) osoby,
które mog(cid:200) postrzega(cid:202) je jako etap opcjonalny. Zrozumienie zasad prototypowania i opano-
wanie ró(cid:285)nych technik tworzenia prototypów pozwoli nam pokaza(cid:202) jego pe(cid:239)ne mo(cid:285)liwo(cid:258)ci
i wykaza(cid:202), (cid:285)e w rzeczywisto(cid:258)ci pozwala ono oszcz(cid:218)dza(cid:202) czas.
W kolejnych rozdzia(cid:239)ach przedstawimy konkretne narz(cid:218)dzia ilustruj(cid:200)ce poszczególne techniki
prototypowania. Konkretnie rzecz bior(cid:200)c, w nast(cid:218)pnym rozdziale opiszemy program Hype,
dysponuj(cid:200)cy wspania(cid:239)ymi mo(cid:285)liwo(cid:258)ciami tworzenia animacji i pozwalaj(cid:200)cy na koordynowanie
ruchu poszczególnych elementów przysz(cid:239)ej aplikacji w celu pokazania, jak b(cid:218)dzie ona dzia(cid:239)a(cid:202).
172
Poleć książkęKup książkę Skorowidz
dzia(cid:239)anie
pola wyszukiwania, 256
prototypu, 246
szuflady nawigacyjnej, 253
E
edytor
kodu, 180
sceny, 177
efekt
animacji, 249
obserwatora, 273
wzajemno(cid:258)ci, 293
efekty
czas trwania, 139
szybko(cid:258)(cid:202), 140
ekrany, 109, 126
eksperymentowanie, 79
elastyczne wprowadzanie
danych, 30
elastyczno(cid:258)(cid:202), 99
elementy
interfejsu u(cid:285)ytkownika, 127
przeznaczone do dotykania,
148
F
format
GIF, 150
JPEG, 150
PDF, 150
SVG, 150
A
C
adaptacja, 99
adnotacje, 80
afordancje, 28
akcje drugorz(cid:218)dne, 116
analiza
cechy ekranów, 126
cele, 41, 66, 93
ciemne wzorce, 41
cienie, 80
CoffeeScript, 221, 294
krytyczna, 90
mo(cid:285)liwo(cid:258)ci funkcjonalnych,
funkcje, 224
konstrukcje warunkowe,
71
s(cid:239)ownictwa, 71
Android, 125
animacje, 205, 231, 247
ankiety, 58, 291
architektura informacji, 56, 294
aspekty nieistotne, 37
automatyzacja, 148
225
metody, 227
obiekty, 227
operatory, 222
p(cid:218)tle, 225
typy danych, 224
zmienne, 222
czcionki, 129
B
badania, 38, 47, 86
ewaluacyjne, 273
generacyjne, 273
pod(cid:239)u(cid:285)ne, 275
badanie
D
definiowanie skryptu, 278
diagram pokrewie(cid:241)stwa, 48, 52,
dobór sposobu prototypowania,
291
159
pomys(cid:239)ów, 77
ró(cid:285)nych rozwi(cid:200)za(cid:241), 129
u(cid:285)ytkownika, 43
dokumenty
badawcze, 62
person, 63, 290
bezpieczne poszukiwania, 34
bezpo(cid:258)rednia obs(cid:239)uga r(cid:218)czna,
dostarczanie inteligentnych
warto(cid:258)ci domy(cid:258)lnych, 30
31
bloking, 173
b(cid:239)(cid:218)dy, 34, 116
burza mózgów, 49
do(cid:258)wiadczenia
u(cid:285)ytkownika, UX, 18, 40
w domenie zagadnienia, 66
Poleć książkęKup książkę Skorowidz
formularze, 61
Framer.js, 219, 228, 267, 295
animacje, 231
komponenty, 233
stany, 232
warstwy, 229
zdarzenia, 232
frameworki do tworzenia
interfejsu, 101
frustracje, 67
funkcje, 224
G
galerie z miniaturkami, 112
generowanie pomys(cid:239)ów, 79
Gestalt, 289
gesty, 135, 201
g(cid:218)sto(cid:258)ci pikseli, 143
grupowanie, 24, 26
pomys(cid:239)ów, 50
grupy u(cid:285)ytkowników, 73
H
humanizacja formularzy, 61
Hype Tumult
edytor kodu, 180
edytor sceny, 177
importowanie mediów, 180
inspektor w(cid:239)a(cid:258)ciwo(cid:258)ci, 177
lista scen, 177
(cid:239)(cid:200)czenie animacji, 205
obs(cid:239)uga
gestów, 201
nawigacji, 195
przewijania, 195
wprowadzania danych,
211
organizacja warstw, 217
o(cid:258) czasu, 178
panel Actions, 185
panel sceny, 187
prototypowanie nawigacji,
181
przegl(cid:200)danie efektów, 218
reprezentacja stanu, 189
stosowanie odr(cid:218)bnych
warstw, 192
warstwy, 178, 188
302
I
identyfikacja konfliktów, 87
ikona, 128, 151
aplikacji, 111
iluzja introspekcji, 269
importowanie mediów, 180
informacje demograficzne, 64
informowanie u(cid:285)ytkowników,
31
inspektor w(cid:239)a(cid:258)ciwo(cid:258)ci, 177
inspiracje, 93
interakcje, 164
jednokrotnego dotkni(cid:218)cia,
114
operuj(cid:200)ce na warstwach,
166, 188
u(cid:285)ytkownika, 114
interfejs u(cid:285)ytkownika, 101,
127
iOS, 125
J
JavaScript, 295
jednostki, 143
j(cid:218)zyk CoffeeScript, 221
jQuery, 295
K
karty u góry aplikacji, 106
kodowanie, 154
kolor, 24
komentarz, 115
komponent, 233
PageComponent, 236
RangeSlider, 238
ScrollComponent, 235, 252
SliderComponent, 237
TextLayer, 233
kompromis, 94
komunikacja, 32, 79
komunikaty, 120
konstrukcje warunkowe, 225
koordynowanie animacji, 247
kszta(cid:239)ty, 23
o zaokr(cid:200)glonych
wierzcho(cid:239)kach, 25
proste, 80
L
leniwe logowanie, 293
liczby, 224
limit pami(cid:218)ci roboczej, 57
lista scen, 177
(cid:146)
(cid:239)a(cid:241)cuchy, 224
(cid:239)(cid:200)czenie
animacji, 205
bada(cid:241) z pomiarami, 287
M
makiety, 141
marnowanie czasu
u(cid:285)ytkownika, 32
menu, 127
dolne, 106
metafory, 29
metoda szalonych ósemek, 84,
291
metody, 227
badawcze, 47
behawioralne, 273
jako(cid:258)ciowe, 273
metryki, 288
miniaturka, 209
model
Kano, 289
poj(cid:218)ciowy, 46, 290
umys(cid:239)owy, 32, 44, 290
modelowanie zachowa(cid:241), 27
modyfikowanie poziomu
wa(cid:285)no(cid:258)ci, 37
motywacje, 67
N
nak(cid:239)adki, 118
narz(cid:218)dzia
do szkicowania, 81
do tworzenia prototypów, 165
nawigacja, 104, 108, 109, 181,
195
nazwy
grup, 51
obszarów, 56
Poleć książkęKup książkę O
obci(cid:200)(cid:285)enie poznawcze, 27
obiekty, 224, 227
obiektywizm, 74
obrazy, 149
obserwacja, 47
obs(cid:239)uga
b(cid:239)(cid:218)dów, 116
gestów, 201
wprowadzania danych, 211
zdarze(cid:241), 252
obszar kompozycji, 244
oczekiwania, 27
odroczone logowanie, 122
od(cid:258)wie(cid:285)anie, 123
okna dialogowe, 111
operatory, 222
opis, 66
optymalizowanie, 37
organizacja
bada(cid:241), 86
tre(cid:258)ci, 56
o(cid:258) czasu, 178
wzgl(cid:218)dna, 200
P
panel sceny, 187
pasek nawigacyjny, 263
p(cid:218)tle, 225
piksele, 143
niezale(cid:285)ne od g(cid:218)sto(cid:258)ci, 145
skalowalne, 145
piórko cyfrowe, 82
planowanie
d(cid:239)ugoterminowe, 59
krótkoterminowe, 59
projektu ogólnego, 38
prototypu, 169
testu, 276
plik specyfikacji, 146
p(cid:239)ywaj(cid:200)ce przyciski, 110
podej(cid:258)cie skoncentrowane
na u(cid:285)ytkowniku, 20
podpowied(cid:283) w kszta(cid:239)cie kó(cid:239)ka,
111
292
podró(cid:285) u(cid:285)ytkownika, 63, 69,
pole wyszukiwania, 256
po(cid:239)(cid:200)czenia pomi(cid:218)dzy
komponentami, 167
pomiary u(cid:285)yteczno(cid:258)ci, 275
porady, 118
postrzeganie kszta(cid:239)tów, 24
potrzeby, 23, 27, 34
konieczne, 36
liniowe, 36
sprzeczne, 37
ukryte, 36
powiadomienia, 110
poziom interakcji, 164
prawo blisko(cid:258)ci, 26
program
Framer Generator, 220
Framer Studio, 219, 239
Sketch, 239
Tumult Hype, 167, 173, 176
progresywne aplikacje
internetowe, 98
projektowanie, 39
w oparciu o kolumny, 102
projekty wizualne, 294
prostota, 37
prototypowanie, 38, 157, 294
na papierze, 162
nawigacji, 181
z wykorzystaniem kodu, 38,
z wykorzystaniem ruchu, 38,
z(cid:239)o(cid:285)onych zachowa(cid:241), 205
prototypy
cyfrowe niskiej wierno(cid:258)ci,
219
173
163
dobór narz(cid:218)dzi, 165
dolnego paska
nawigacyjnego, 261
dzia(cid:239)anie, 246
interaktywne, 164
o wysokiej wierno(cid:258)ci, 163
planowanie, 169
pozbawione interakcji, 164
prezentacji powitalnej, 239
program
Framer Studio, 219, 239
Hype, 176
Sketch, 239
sposoby, 159
szuflady nawigacyjnej, 249,
253
Skorowidz
tworzenie, 158, 170
wybór typu, 161
znaczenie ruchu, 175
przechodzenie pomi(cid:218)dzy
stronami, 165
przeci(cid:200)gni(cid:218)cie w dó(cid:239), 123
przej(cid:258)cia, 136
przestrze(cid:241) projektu, 78
przycisk
FAB, 252
Wstecz, 108
przyciski fizyczne, 126
psychologia
koloru, 24
kszta(cid:239)tu, 23
pytania, 60
badawcze, 287
otwarte, 60
wielokrotnego wyboru, 60
recenzja, 115
redukcja czynników
rozpraszaj(cid:200)cych, 33
rekrutacja uczestników bada(cid:241),
73
reprezentacja stanu, 189
responsywno(cid:258)(cid:202), 99
rozk(cid:239)ad problemu, 86
rozwi(cid:200)zania hybrydowe, 101
ruch, 175
R
S
scenariusz, 63, 68, 277, 292
scenorys, 89, 174
sceny, 177
sekwencja szkiców, 170
sesje analizy krytycznej, 90
skeumorficzny interfejs, 45
skeumorfizm, 45
skrypt testu, 278
sortowanie kart, 52, 290
odwrotne, 55
wariant otwarty, 53
wariant zamkni(cid:218)ty, 54
specyfikacja, 143
mo(cid:285)liwo(cid:258)ci funkcjonalnych,
132
303
Poleć książkęKup książkę Skorowidz
stany, 232
obszarów kompozycji, 242
stopniowe ujawnianie, 122, 292
stosowanie elastycznego
wprowadzania danych, 30
strony
adaptacyjne, 100
p(cid:239)ynne, 99
strza(cid:23
Pobierz darmowy fragment (pdf)
