Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00202 003852 18784908 na godz. na dobę w sumie
UX Design. Projektowanie aplikacji dla urządzeń mobilnych - książka
UX Design. Projektowanie aplikacji dla urządzeń mobilnych - książka
Autor: , Liczba stron: 304
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-4699-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> funkcjonalność stron
Porównaj ceny (książka, ebook, audiobook).

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:

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

Znajdź podobne książki Ostatnio czytane w tej kategorii

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)

Gdzie kupić całą publikację:

UX Design. Projektowanie aplikacji dla urządzeń mobilnych
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: