PROTOTYPOVÁNÍ TOMÁŠ BOUDA KISK 2017 KOMUNIKACE ČLOVĚK-POČÍTAČ EFEKT PROTOTYPOVÁNÍ Prototypování je strategie, jak se efektivně vypořádat s věcmi, které je těžké předvídat. Tomáš Bouda HCI na KISK 2 EFEKT PROTOTYPOVÁNÍ - Prototyp x Finální verze Tomáš Bouda HCI na KISK 3 EFEKT PROTOTYPOVÁNÍ Charakteristiky prototypu - Nefunkční - Názorný (větší) - Levný Tomáš Bouda HCI na KISK 4 SÍLA PROTOTYPOVÁNÍ – CO JE ÚČELEM? Jeff Hawkins – Palm Pilot - dřevěný prototyp Jeff využíval v reálném světě Foto: http://www.computerhistory.org/collections/accession/102716262 http://haykin.net/innovationsparks/2010/09/17/evolution-and-innovation-where-do-ideas- come-from/ Tomáš Bouda HCI na KISK 5 SÍLA PROTOTYPOVÁNÍ Bill Buxton: http://www.billbuxton.com/ Bill Buxton on sketching experiences, Institute of Design Strategy Conference, May 2008 http://vimeo.com/5189134 Tomáš Bouda HCI na KISK 6 Zdroj: http://vimeo.com/5189134 Tomáš Bouda HCI na KISK 7 HLEDÁNÍ ALTERNATIV Tomáš Bouda HCI na KISK 8 Zdroj: http://vimeo.com/5189134 LASEAUOVA NÁLEVKA – REDUKCE ALTERNATIV Tomáš Bouda HCI na KISK 9 Zdroj: http://vimeo.com/5189134 LASEAU, Paul. Graphic thinking for architects and designers. New York, N.Y: VNR Van Nostrand Reinhold, 1980. ISBN 978-044-2262-471. Zdroj: http://vimeo.com/5189134 Tomáš Bouda HCI na KISK 10 PROTOTYP - Nemusí být kompletní - Měl by být lehce změnitelný Tomáš Bouda HCI na KISK 11 PROTOTYP ŠETŘÍ ČAS A RYCHLE SE Z NĚJ POUČÍME Tomáš Bouda HCI na KISK 12 TYPOLOGIE PROTOTYPŮ Co chceme vlastně zjistit? Jakou roli hraje artefat v životě člověka? Jak usnadníme člověku práci? Jak bude uživatel artefakt používat? … - storyboard, videoprototyp… Jak bude artefakt vypadat a působit? Jaké emoce a prožitky artefakt vzbuzuje? Líbí se artefakt uživateli? … - fyzické podoba, chování systému, grafika, vizuální styl … Jak bude artefakt implementován? Jak bude konkrétní funkce vypadat a fungovat? Jaký typy meny bude použit? Jak bude vyřešena informačí architektura webu? - papírový prototyp, mock-up prototyp … Haude a Hill: http://hci.stanford.edu/courses/cs247/2012/readings/WhatDoPrototypesPrototype.pdf Tomáš Bouda HCI na KISK 13 TYPOLOGIE PROTOTYPŮ - ROLE Zdroj: http://www.pushyourdesign.com/Scott/develpeople.html Tomáš Bouda HCI na KISK 14 TYPOLOGIE PROTOTYPŮ – VZHLED A POCITY Zdroj: http://www.toycollector.com/index.php?option=com_kunena&func=view&cati d=95&id=10432&Itemid=0 Tomáš Bouda HCI na KISK 15 TYPOLOGIE PROTOTYPŮ - VZHLED Zdroj: Haude a Hill: http://www.sics.se/fal/kurser/winograd- 2004/Prototypes.pdf Tomáš Bouda HCI na KISK 16 TYPOLOGIE PROTOTYPŮ - IMPLEMENTACE Zdroj: http://www.dhtml-menu-builder.com/blog/drop-down-menu-10-useful- scripts-to-enhance-header-navigation/ Tomáš Bouda HCI na KISK 17 TYPOLOGIE PROTOTYPŮ - INTEGRACE Haude a Hill: http://www.sics.se/fal/kurser/winograd-2004/Prototypes.pdf Tomáš Bouda HCI na KISK 18 Tento prototyp reprezentuje komplexní uživatelský prožitek. PROTOTYPOVÁNÍ INTERIÉRU V LETADLECH Velké prototypy v životní velikosti nebo prototypování za použití simulace. Zdroj: http://www.ur.umich.edu/0506/Jun26_06/03.shtml Tomáš Bouda HCI na KISK 19 PROTOTYPOVÁNÍ PRVNÍHO APPLE STORU Před otevřením prvního Apple Storu byl zřízen prototyp prodejny, kde se testovala hudba, která hrála v různých koutech obchodu. Apple si tak vyzkoušel, jak bude reálný obchod nakonec vypadat a působit na lidi. Zdroj: http://www.cultofmac.com/168770/how-the-ceo-of-gap- helped-create-the-first-apple-store/ Tomáš Bouda HCI na KISK 20 EFEKTIVNÍ PROTOTYPOVÁNÍ Tomáš Bouda HCI na KISK 21 Je dobré dělat kvalitní prototyp, nebo více nekvalitních prototypů? Tomáš Bouda HCI na KISK 22 KVALITA VS. KVANTITA? V hodině keramiky učitel rozdělil žáky do dvou skupin. Jedné dal za úkol, aby vytvořila co nejvíce váz. Ta skupina se soustředila na kvantitu. Druhé skupině řekl, soustřeďte se na kvalitu a vytvořte mi jednu nejlepší vázu. Když přišel konec hodiny, ukázalo se, že kvalitnější produkty má skupina, která se zaměřovala na kvantitu. Rychlé prototypování alternativních řešení přináší kvalitu. Zdroj: http://alanp.ca/blog/2011/06/01/fail-early-fail-often/ (DAVID BAYLES, 1993) Tomáš Bouda HCI na KISK 23 THINK OUTSIDE THE BOX Úkol: Vyhoďte vajíčko z prvního patra domu tak, aby se nerozbilo o zem. Úspěšné video: http://www.youtube.com/watch?v=-eFMWwA2TNs&feature=g-hist Někteří se však zasekli na prvním nápadu, který dostali. Viz. http://www.cs.cmu.edu/~spdow/files/Prototyping-Iteration-CC09.pdf Tomáš Bouda HCI na KISK 24 JE DOBRÉ ZKOUŠET VÍCE NÁPADŮ A KONCEPTŮ Tomáš Bouda HCI na KISK 25 Zdroj: Designing Interactions Možné typy myší prototypované u firmy XEROX. PROTOTYPOVÁNÍ - HLEDÁNÍ GLOBÁLNÍHO MAXIMA Tomáš Bouda HCI na KISK 26 FUNKČNÍ FIXACE Připevněte svíčku na korkovou stěnu tak, aby vosk z ní nekapal na stůl. Zdroj: http://bajgar.blog.ihned.cz/c1-55385850-kdo-pripevni-svicku- na-zed-aneb-zvysuji-financni-motivace-vykonnost-pracovniku Wikipedia: http://en.wikipedia.org/wiki/Functional_fixedness Tomáš Bouda HCI na KISK 27 THINK OUTSIDE THE BOX Tomáš Bouda HCI na KISK 28 PARALELNÍ PROTOTYPOVÁNÍ Tomáš Bouda HCI na KISK 29 Protototyp Protototyp Protototyp Protototyp Protototyp Protototyp Feedback Feedback Feedback Feedback Paralelní Sériové PARALELNÍ PROTOTYPOVÁNÍ - VÝZKUM Steven Dew a col. chtěl zjistit, jaký typ prototypování je výhodnější. Úkol: Dvě skupiny studentů měly tvořit reklamní letáky. Jedni využívali paralelní a druzí sériové prototypování. Letáky byly umístěny na MySpace jako reklamní banery. Pomocí Google Analytics byl měřen zájem uživatelů MySpace o reklamní letáky. (DOW, 2010) Tomáš Bouda HCI na KISK 30 Paralelní a sériové prototypování reklamních letáků. Tomáš Bouda HCI na KISK 31 Návštěvnost webu. Navíc na webu zůstávali déle ti uživatelé, kteří se na něj dostali z reklamy vytvořené paralelním prototypováním. Tomáš Bouda HCI na KISK 32 Hodnocení expertů na design. Tomáš Bouda HCI na KISK 33 PROČ MÁ PARALELNÍ PROTOTYPOVÁNÍ LEPŠÍ VÝSLEDKY? • Paralelní prototypování odděluje EGO od ARTEFAKTU, který designuji. • Jestliže obdržím kritiku na můj jediný projekt, pak jsem náchylný kritiku brát osobně. • Paralelní prototypování umožňuje porovnávání a umožňuje přenos dobrých prvků designu na budoucí prototyp Tomáš Bouda HCI na KISK 34 SROVNÁVÁNÍ PODPORUJE VZDĚLÁVÁNÍ Jedna část participantů (A) dostala za úkol přečíst nejdříve jednu studii, zapřemýšlet nad ní a pak druhou studii a zapřemýšlet nad ní. Druhá část participantů (B) dostala najednou obě studie a měla je porovnávat. Výsledek: participanti B byli schopni lépe popsat studie, jejich podobnost a bylo u nich naměřeno 3x vyšší porozumění textu. (LOEWENSTEIN a col., 2003) Tomáš Bouda HCI na KISK 35 Studie 1 Studie 2 Porozumění 1 Porozumění 2 Studie 1 Studie 2 Porozumění 3 JAKÝ MÁ VLIV PARALELNÍ PROTOTYPOVÁNÍ NA DESIGNÉRSKÝ TÝM? Chceme znovu zjistit na jaký banner uživatelé na internetu klikají nejčastěji. Banery tvoří dvojce participantů v rámci procesu: 1. Individuálně vytváří své nápady. 2. Sdílí své nápady. 3. Individuálně pracují na finálním nápadu. Tři typy skupin: 1. Vytváří, sdílí a předkládají dva nápady. 2. Vytváří a sdílí dva nápady, předkládají jeden nápad 3. Vytváří, sdílí a předkládají jeden nápad. Zdroj: https://hci.stanford.edu/publications/2010/prototyping- dynamics/PrototypingDynamics2010.pdf Tomáš Bouda HCI na KISK 36 Zdroj: https://hci.stanford.edu/publications/2010/prototyping-dynamics/PrototypingDynamics2010.pdf Tomáš Bouda HCI na KISK 37 VÝHODY SDÍLENÍ VÍCE PROTOTYPŮ Individuální práce člena týmu je bohatší. Členové týmu mezi sebou sdílí více vlastností rozhraní. Dochází k intenzivnější konverzaci. Vznikne lepší konsenzus. V rámci týmu vznikají bohatší vztahy. Tomáš Bouda HCI na KISK 38 ALTERNATIVNÍ PROTOTYPY UJASŇUJÍ TERMINOLOGI Tomáš Bouda HCI na KISK 39 PROTOTYPOVÁNÍ ZNAMENÁ: - Hledání a definování správných otázek. - Snažte se najít odpověď na co nejvíce z nich. Tomáš Bouda HCI na KISK 40 TECHNIKY Tomáš Bouda HCI na KISK 41 PROTOTYPOVÁNÍ Zdroj: http://support.balsamiq.com/customer/portal/articles/107999-specifying- interaction-with-mockups Tomáš Bouda HCI na KISK 42 PROTOTYPOVÁNÍ Tipy a triky: - Všechny materiály mějte na jednom místě. - Pracujte rychle a používejte znovupoužitelné části. - Udělejte si fotku přístroje, na který budete vytvářet aplikaci. - Pokud je to možné, využívejte známe grafické a interakční elementy daného systému. Tomáš Bouda HCI na KISK 43 PROTOTYPOVÁNÍ - TYPOLOGIE Z HLEDISKA TECHNOLOGIE - Storyboardy - Papírové prototypování - Wizard of Oz - předstíráte funkční stroj - Digitální mockup - digitální prototyp vytvořený za pomoci speciálního software - Video prototypování - podobně jako storyboardy Tomáš Bouda HCI na KISK 44 1. STORYBOARDY Storyboard - kreslený scénář - kontext uživatel – prostředí – artefakt - Zachycuje děj, příběh, scénář – roli aplikace ve světě. - Nejde o pěkné obrázky, ale o předání nápadu a představy. Tomáš Bouda HCI na KISK 45 1. STORYBOARDY Tomáš Bouda HCI na KISK 46 2. PAPÍROVÉ PROTOTYPOVÁNÍ Potřebujete • Model přístroje • Různé papíry • Tužky, fixy, pastelky • Nůžky, lepidlo, izolepu Tomáš Bouda HCI na KISK 47 2. PAPÍROVÉ PROTOTYPOVÁNÍ Tomáš Bouda HCI na KISK 48 2. PAPÍROVÉ PROTOTYPOVÁNÍ Výhody • Odhalíte zásadní chyby v designu rozhraní. • Šetříte peníze za vývoj špatného produktu. • Můžeme experimentovat s mnoha variantami. • Špatně navržený papírový prototyp můžeme vyhodit a vytvořit úplně nový. • Usnadňujete komunikaci mezi vývojovým týmem, designérem, uživatelem a vámi (klientem). • Nemusíte programovat. • Umocňuje kreativitu. Tomáš Bouda HCI na KISK 49 2. PAPÍROVÉ PROTOTYPOVÁNÍ Přemýšlejte - Za jak dlouho jste schopni vytvořit první obrazovku? - Můžete si vytvořit rozmnoženinu první obrazovky. - Jak rychle jste schopni případně prototyp změnit? Tomáš Bouda HCI na KISK 50 2. ROZBALOVACÍ MENU Tomáš Bouda HCI na KISK 51 OZNAČENÍ Tomáš Bouda HCI na KISK 52 TEXTOVÁ POLE Tomáš Bouda HCI na KISK 53 OVLÁDÁNÍ Snažte se používat prvky systému, pro který prototypujete. Tomáš Bouda HCI na KISK 54 TAKE AWAY MESSAGE #2: Hlavně levně a rychle. Tomáš Bouda HCI na KISK 55 3. WIZZARD OF OZ Představte si, že bychom byli schopni pozorovat uživatele při práci se systémem, který je plně funkční, ale stále je to jen prototyp… Tomáš Bouda HCI na KISK 56 3. WIZARD OF OZ Čaroděj ze země Oz (1939) Film o dívce, která odnese tornádo do vzdálené země. Snaží se vrátit zpět za pomoci čaroděje Oz. Ten ji ale dá těžký úkol zabít zlou čarodějnici. Po cestě se k dívce přidávají další postavy, které chtějí od Oze pomoci. Nakonec se ukazuje, že Oz je pouhý člověk a dívce pomoci nemůže. Naštěstí se domů dostávají po dlouhé a nebezpečné cestě. Oz dokázal vytvořit velké realistické show, která dívku a její přátele strašila. Zdroj: http://www.csfd.cz/film/2818-carodej-ze-zeme-oz/ Tomáš Bouda HCI na KISK 57 3. WIZARD OF OZ Prostřednictvím člověka simulujeme chování počítače. Např. testování interakce uživatele s počítačem prostřednictvím hlasového ovládání. Ve skutečnosti však jsou do stroje uživatelovy pokyny přepisovány výzkumníkem. Pro lepší představu: http://www.youtube.com/watch?NR=1&v=r2CP45 MHJd8&feature=endscreen Tomáš Bouda HCI na KISK 58 WIZARD OF OZ John Gould (cirka 1980) – prototypování digitální sekretářky Tomáš Bouda HCI na KISK 59 PŘÍKLAD POUŽITÍ W.OF.OZ: AARDVARK Aardvark je (byl) sociální vyhledávač, díky kterému dostávají jeho uživatelé odpovědi na své otázky od svých přátel a přátel přátel. Prototypování probíhalo za využití metody WOS. • Uživatelé odesílali své dotazy. • Pracovníci je manuálně třídili a posílali online uživatelům. “If people like this in super crappy form, then this is worth building, because they’ll like it even more,” Horowitz said of their initial idea. Zdroj: http://blogs.wsj.com/venturecapital/2010/04/24/how-a-start-up-grew-by- paying-attention-to-whats-behind-the-curtain/ Tomáš Bouda HCI na KISK 60 PŘÍKLAD POUŽITÍ W.OF.OZ: GLOBALL Tomáš Bouda HCI na KISK 61 Zdroj: http://hci.stanford.edu/courses/cs247/2012/readings/WhatDoPrototypesPrototype.pdf JAK WOS REALIZOVAT: 1. Vytvořte si scénáře a průchod aplikací. • Vlastně definujete odpověď aplikace na vstupní data uživatele. 2. Vytvořte rozhraní. 3. Vytvořte vstupy, které bude využívat uživatel. 4. Kde a jak bude člověk, který ovládá aplikaci, vkládat data? • Budete mít nějaký před-programovaný systém nebo budou vše zajišťovat lidí? • Myslete na to, že budete muset systém nakonec vyměnit za PC. 5. Procvičte si roli člověka – operátora. Tomáš Bouda HCI na KISK 62 JAK TESTOVÁNÍ METODOU WOS 1. Procvičte si scénář s předstihem - vychytáte evidentní chyby. 2. Až budete spokojení, vyberte si uživatele. 3. Myslete na dvě role: • Facilitátor – předává úkol a instrukce • Člověk – operátor – ovládá rozhraní 4. Zpětná vazba od uživatele: • Metoda hlasitého myšlení • Retrospektivní interview • Heuristická analýza 5. Nakonec si s uživatelem jednoduše popovídejte. Tomáš Bouda HCI na KISK 63 WOS V PRŮBĚHU VÝVOJE PRODUKTU WOS můžeme využívat kdykoli v procesu vývoje aplikace/softwaru. Tomáš Bouda HCI na KISK 64 WOS - VÝHODY • Rychlá, levná a opakovatelná metoda prototypování. • Možnost vytvořit několik variant prototypu. • Více realistický, nežli papírový prototyp. • Do středu procesu designu staví uživatele. • Může předpovědět, jak náročné bude vystavět reálný systém. • Učit se mohou i programátoři. Tomáš Bouda HCI na KISK 65 WOS - NEVÝHODY • Můžeme simulovat něco, co nemůže nikdy existovat. • WOS potřebuje tréning a je náročný na uskutečnění. • Může být obtížné simulovat některé části systému. Tomáš Bouda HCI na KISK 66 4. VIDEO PROTOTYPOVÁNÍ Příklad: Walkabout app: http://www.snowflyzone.com/newnewnew/2008/12/01/walkabout/ Tomáš Bouda HCI na KISK 67 4. VIDEO PROTOTYP - VÝHODY 1. Natočit něco na mobil je jednoduché a nic to nestojí. 2. Video je skvělý komunikační kanál. • Sdílíte společnou vizi a představu. • Video je přenosné a evidentní. 3. Pro programátory rozhraní může sloužit jako specifikace. 4. Spojuje design rozhraní s úkolem uživatele. • Ukazuje funkcionalitu a možnosti. • Ukazuje, jestli je rozhraní kompletní. • Ve videu není nic navíc. Tomáš Bouda HCI na KISK 68 RŮZNÁ KVALITA A ROZLIŠENÍ VIDEO PROTOTYPU Tomáš Bouda HCI na KISK 69 Nízká kvalita Vysoká kvalita Papírový prototyp + video: http://www.youtube.com/watch?v=djXB-i3-V6Q Apple`s Knowledge Navigater: http://www.youtube.com/watch?v=9bjve67p33E CO BY MĚLO VIDEO UKAZOVAT… • Podobně jako storyboard by mělo video ukazovat kompletní úkol. • zahrnuta by měla být počáteční motivace zúčastněných a konečný úspěch. • Ukazovat všechny úkoly, které lze díky rozhraní realizovat. • Pomůže definovat minimalistickou funkcionalitu rozhraní. Tomáš Bouda HCI na KISK 70 JAK VYTVOŘIT VIDEO PROTOTYP 1. Začni s vytvořením storyboardu. 2. Pokus se improvizovat. 3. Potřebné nástroje • Kamera – telefon, web kamera apod. Nemusí být nic extra. • Herci • Realistické místo Obecně se soustřeď na zprávu, kterou díky videu komunikuješ. Není třeba mít video skvěle natočené. Tomáš Bouda HCI na KISK 71 VIDEO PROTOTYPOVÁNÍ – NAD ČÍM SE ZAMYSLET? • Bude video obsahovat zvuk nebo ne? • Audio je často náročné na úpravu. • Můžeme využít nálepky s informacemi, nebo video proložit vysvětlujícím textem. • Jaké bude rozhraní? • Papírový prototyp, Mockup prototyp nebo produkt nebude ve videu vidět? • Bude video ukazovat úspěšné nebo neúspěšné dokončení úkolu? • Tip: video upravujte co nejméně – pracujte efektivně. • Klidně na kameře používejte pouze tlačítko pro zastavení nahrávání. Tomáš Bouda HCI na KISK 72 5. HIGH-FIDELITY PROTOTYP (MOCKUP) - INVISION Jedná se o prototyp, který je vytvořený prostřednictvím speciální aplikace nebo je naprogramovaný. S mockup prototypem můžeme vstupovat do interakce. Jinak vlastnosti jako papírový prototyp. Software: http://www.1stwebdesigner.com/design/wireframing- mockup-prototyping-tools-plan-designs/ Balsamiq např.  Tomáš Bouda HCI na KISK 73 LITERATURA A ODKAZY SNYDER, Carolyn. Paper prototyping: the fast and easy way to design and refine user interfaces. San Diego, CA: Morgan Kaufmann Pub., c2003, xxiv, 378 p. ISBN 15-586-0870-2. Prototypování aplikací na iPhone. Výhody X nevýhody, Jak na to v krocích. Pozadí, standardizované ovládání: tap bar, posuvné ovládání, vkládání textu, výběr možností, označení možností, upozornění, Segmentované ovládaní. http://www.codeproject.com/Articles/111949/Excerpt-from-Designing-the- iPhone-User-Experience Templates iphone a některých Windows a Android telefonů (volně ke stažení): http://www.tripwiremagazine.com/2012/07/free-printable-sketching-wireframing-templates.html Stránka, kde lze stáhnout komponenty pro papírové prototypování HTC, Tablety s HoneyCompem, iPhone, iPad atd. http://www.zurb.com/playground/honeycomb-stencils Zajímavý článek o prototypování: http://www.userfocus.co.uk/articles/paperprototyping.html BAYLES, David a Ted ORLAND, 2001. Art and Fear: Observations on the Perils (and Rewards) of Artmaking. 2. Image Continuum Press. ISBN 0961454733. Tomáš Bouda HCI na KISK 74 LITERATURA A ODKAZY HOUDE, Stephanie a Charles HILL, 1997. What do Prototypes Prototype? [online]. Apple Computer, Inc. Cupertino, CA, USA [cit. 2015-02-22]. Dostupné z: https://courses.cs.washington.edu/courses/cse440/12au/readings_files/Houde-Prototypes.pdf BAYLES, David a Ted ORLAND, 2001. Art and Fear: Observations on the Perils (and Rewards) of Artmaking. 2. Image Continuum Press. ISBN 0961454733. DOW, Steven a col., 2010-12. Parallel prototyping leads to better design results, more divergence, and increased self-efficacy. ACM Transactions on Computer-Human Interaction [online]. 17 (4), 1-24 [cit. 2013-01-28]. DOI: 10.1145/1879831.1879836. ISSN 10730516. Dostupné z: http://portal.acm.org/citation.cfm?doid=1879831.1879836 DOW, Steven a col., 2011. Prototyping dynamics. In: Proceedings of the 2011 annual conference on Human factors in computing systems - CHI '11 [online]. New York, USA: ACM Press, s. 2807- [cit. 2017- 03-12]. DOI: 10.1145/1978942.1979359. ISBN 9781450302289. Dostupné z: http://dl.acm.org/citation.cfm?doid=1978942.1979359 LOEWENSTEIN, JEFFREY a a col., 2003. Analogical Learning in Negotiation Teams: Comparing Cases Promotes Learning and Transfer. Academy of Management Learning and Education [online]. 2(2), 119- 127 [cit. 2017-03-29]. Dostupné z: https://business.illinois.edu/loewenstein/papers/Loewensteinetal%20AMLE03.pdf Tomáš Bouda HCI na KISK 75 DĚKUJI ZA POZORNOST TOMÁŠ BOUDA BOUDATOMAS@GMAIL.COM KISK 2017 KOMUNIKACE ČLOVĚK-POČÍTAČ