DIGITÁLNÍ PROTOTYPOVÁNÍ (WIZARD OF OZ, DIGITALNÍ MOCKUP, VIDEO PROTOTYPOVÁNÍ) TOMÁŠ BOUDA KISK 2013 KOMUNIKACE ČLOVĚK-POČÍTAČ CO NÁS ČEKÁ? Wizard of Oz Digitální mockup Video prototypování Efektivní prototypování Tomáš Bouda HCI na KISK 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… Tzn. není náročný na zdroje. Tomáš Bouda HCI na KISK 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 poster Nakreslit obrázek – člověk na plátno vrhá ohromný stín. 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=r2CP45MHJd8&feature=endscreen Tomáš Bouda HCI na KISK WIZARD OF OZ John Kelley (cirka 1980) •Využil metody WOZ při definování budoucího systému opatřeného hlasovým vstupem. •Uživatel počítač ovládal hlasem. •Výzkumník vkládal informace do PC v textové podobě. •Pokud počítač příkaz nerozpoznal, člověk příkaz přeformuloval. •Na základě slovních oprav byl upraven i algoritmus v PC a při dalším testu již na přirozený jazyk a dotaz odpovídal správně. - Tomáš Bouda HCI na KISK Jednostranné zrcadlo Uživatel dával hlasové pokyny. WIZARD OF OZ WOZ vytváří interaktivní aplikace bez rozsáhlého kódování. •Důležitá realističnost rozhraní. •Člověk, který systém spravuje na back-endu. •WOZ dává smysl, když je systém rychlý, levný nebo lehčí na ovládání, nežli stroj. WOZ pomáhá sbírat data od uživatelů. •Více realistické řešení způsobuje, že si uživatelé myslí, že komunikují opravdu se strojem. •Méně realistické řešení můžeme rychle upravovat. • Použití •prototypování vstupního rozhraní do systému - - Tomáš Bouda HCI na KISK 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-beh ind-the-curtain/ Tomáš Bouda HCI na KISK PŘÍKLAD POUŽITÍ W.OF.OZ: GLOBALL Tomáš Bouda HCI na KISK Zdroj: http://hci.stanford.edu/courses/cs247/2012/readings/WhatDoPrototypesPrototype.pdf Balón měl hlasově odpovídat na hlasovou komunikaci dítěte. Měl se také pohybovat k a od dítěte. Mezi uživatelem a počítačem byl člověk, který celý systém ovládal. 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 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 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 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. •Možnost odhalit chyby v designu. •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 WOS - NEVÝHODY •Simulace nemusí representovat zamýšlenou technologii dostatečně. • •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 DIGITÁLNÍ MOCKUPS PROTOTYPY Tomáš Bouda HCI na KISK MOCKUP 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/ Tomáš Bouda HCI na KISK BALSAMIQ MOCKUPS 1.Stažení a instalace softwaru 2.Základní práce se softwarem 1.obrazovka 2.prvky designu 3.vkládání obrázků 3.Pokročilá práce se softwarem 1.jednotlivé mockupy 2.linkování 3.Export 4.Sdílení mockupu s kolegy • Tomáš Bouda HCI na KISK AXURE WWW.AXURE.COM Download: http://www.axure.com/download Licence: extend Key: rRIN03YUSknbe+Pxco0JYHvEJpOH2y9sIh966vsPFazoJAdnwUv6/NnzRRZIz+uf Licence je volná do14. února 2014. Tomáš Bouda HCI na KISK VIDEO PROTOTYPOVÁNÍ Tomáš Bouda HCI na KISK Tomáš Bouda HCI na KISK http://3.bp.blogspot.com/-QuV2VaiLp0k/UF0bE0zADXI/AAAAAAAAG70/TOvuNHHQsXs/s320/context-recycle-logo -759450.jpg Uživatel Podmínky Použití Designér Klient Programátor - WALKABOUT APP Video: http://www.snowflyzone.com/newnewnew/2008/12/01/walkabout/ Tomáš Bouda HCI na KISK 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 Video X Specifikace v dokumentu. RŮZNÁ KVALITA A ROZLIŠENÍ VIDEO PROTOTYPU Tomáš Bouda HCI na KISK 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 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é. 1. Tomáš Bouda HCI na KISK 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 EFEKTIVNÍ PROTOTYPOVÁNÍ VYTVÁŘENÍ A POROVNÁVÁNÍ MOŽNÝCH ALTERNATIV Tomáš Bouda HCI na KISK 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 Pokud prototypujeme, je dobrý dělat kvalitní prototyp, nebo více nekvalitních prototypů? 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 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-v ykonnost-pracovniku Wikipedia: http://en.wikipedia.org/wiki/Functional_fixedness Dunkner, 1945 Tomáš Bouda HCI na KISK THINK OUTSIDE THE BOX Tomáš Bouda HCI na KISK PARALELNÍ PROTOTYPOVÁNÍ Tomáš Bouda HCI na KISK 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 Paralelní a sériové prototypování reklamních letáků. Tomáš Bouda HCI na KISK 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 Hodnocení expertů na design. Tomáš Bouda HCI na KISK 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 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 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. 4. Tomáš Bouda HCI na KISK (Dow a col., 2011) Tomáš Bouda HCI na KISK 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 Když sdílíme jenom jeden nápad, tak po kritice lidé k druhému cítí nepřátelství a nedůvěru. Proč právě kritizoval tento nápad. Lidé si berou kritiku více osobně. Když však sdílíme několik prototypů, pak o sobě lidé smýšlí lépe. ALTERNATIVNÍ PROTOTYPY UJASŇUJÍ TERMINOLOGI Tomáš Bouda HCI na KISK Napříč designérským a programátorským týmem. Co je důležité tak také mezi ´řešitelským týmem a uživatelem. UX MEATING http://srazy.info/ux-meating/3920 Tomáš Bouda HCI na KISK TÝMY? http://bit.ly/kiskhcitymy2013 Tomáš Bouda HCI na KISK ÚKOL Č. 1 Tomáš Bouda HCI na KISK LITERATURA DOW, Steven P., Alana GLASSCO, Jonathan KASS, Melissa SCHWARZ, Daniel L. SCHWARTZ a Scott R. KLEMMER. Parallel prototyping leads to better design results, more divergence, and increased self-efficacy. ACM Transactions on Computer-Human Interaction. 2010-12-01, roč. 17, č. 4, s. 1-24. ISSN 10730516. Dostupné z: http://portal.acm.org/citation.cfm?doid=1879831.1879836 LOEWENSTEIN, J., L. THOMPSON a D. GENTNER. Analogical Learning in Negotiation Teams: Comparing Cases Promotes Learning and Transfer. Academy of Management Learning. 2003-06-01, roč. 2, č. 2, s. 119-127. ISSN 1537-260x. Dostupné z: http://amle.aom.org/cgi/doi/10.5465/AMLE.2003.9901663 DAVID BAYLES, Ted Orland. Art: observations on the perils (and rewards) of artmaking. 1st Image Continuum Press ed. Santa Cruz, CA: Image Continuum Press, 1993. ISBN 09-614-5473-3. Tomáš Bouda HCI na KISK DĚKUJI ZA POZORNOST TOMÁŠ BOUDA BOUDATOMAS@GMAIL.COM KISK 2012 KOMUNIKACE ČLOVĚK-POČÍTAČ