SÍLA PROTOTYPOVÁNÍ (SCÉNÁŘE, PERSONY, STORYBOARDY, PAPÍROVÉ PROTOTYPOVÁNI) TOMÁŠ BOUDA KISK 2013 KOMUNIKACE ČLOVĚK-POČÍTAČ VAŠE NÁPADY??? „You can observe a lot by just watching.“ Yogi Berra http://en.wikipedia.org/wiki/Yogi_Berra Tomáš Bouda HCI na KISK http://4.bp.blogspot.com/-EwpTx3J72KE/TVt5-ptdaEI/AAAAAAAAADE/kXF0D3wEnaA/s1600/light+bulb.jpg http://www.amazon.com/You-Can-Observe-Lot-Watching/dp/0470454040 Basketbalista, který pozoroval týmové zapojení hráčů. ZMĚNA, INOVACE, NÁPAD Odpovězte si na dvě základní otázky: Co chtějí vaši uživatelé? Co chcete vy? Máme spoustu cílů – společenské, obchodní, finanční, ekologické apod. Tomáš Bouda HCI na KISK UŽIVATELSKÝ VÝZKUM (ANALÝZA UŽIVATELSKÝCH POTŘEB) Potřebujete vědět: -Kdo je vaše cílovka? -Jaký je váš konkrétní uživatel? -Co si vaši uživatelé myslí? -Jaké jsou jejich hodnoty a cíle? -Jaké jsou jejich pracovní a denní úkoly? -Jaké jsou jejich konkrétní úkoly, které budou řešit prostřednictvím vaší technologie/ produktu/aplikace/řešení? - Tomáš Bouda HCI na KISK ANALÝZA UŽIVATELSKÝCH POTŘEB - METODOLOGIE Pozorování uživatelů v jejich přirozeném prostředí je nejvhodnější, ale zato časově náročné. Dotazníkové šetření a interview jsou metody vhodné k statistické analýze a v případě většího počtu účastníků výzkumu. V případě dotazníku přicházíme o přímý kontakt s cílovou skupinou. Focus groups jsou užitečné, ale náročné na organizaci. Tomáš Bouda HCI na KISK 1.) POZOROVÁNÍ -Jack Whalen – Call Centrum pro opravu kopírek XEROX PARK http://choo.fis.utoronto.ca/fis/courses/lis2176/Readings/bobrow.pdf Proces pozorování - Spřátelte se s pozorovanými X nedávejte o sobě vědět. - Pozorujte všechno, co uživatelé dělají. - Zhodnoťte všechno, čeho jste si všimli (bez uživatelů i s uživateli v průběhu pozorování). - Hledejte chyby a chvíle, kdy se uživatelé zmýlí nebo jim něco nejde. Tomáš Bouda HCI na KISK http://www.linkedin.com/pub/jack-whalen/10/635/5bb One of my favourite examples of participant observation comes from Jack Whalen and colleagues at Xerox PARC. They were studying a call centre for photocopier repair, so these were people who field questions for technicians, and, over the telephone, help them work through troubleshooting broken photocopiers. Doing this over the phone can be extremely difficult. What Whalen and colleagues found was that, as you might expect, the most proficient person in this copier repair centre was the person who’d been the longest. It was the skill that they’d built up over a period of time. What’s interesting is that the second most effective person at this repair centre was not the person who’d been the second longest, but rather the person who’d sat next to the person who had been the longest. What they realized was that, by sitting next to an expert, these repair technicians were able to pick up all of the informal skills of doing repair work that aren’t written down in manuals anywhere. And it’s this apprenticeship model that helped somebody really excel in their job. DOTAZNÍK A INTERVIEW Jak si vybrat respondenty? •Z cílové skupiny? •Mohou aktuálně systém užívat/nevyužívat? Nábor respondentů •Soc. sítě •„Zeptej se bráchy“ •Motivujte je! Tomáš Bouda HCI na KISK DOTAZNÍK A INTERVIEW Položte dobrou otázku, dostanete dobrou odpověď. Dobré otázky Jak je pro vás denní update systému podstatný? Co na programu máte rádi? -> Používejte otevřené otázky -> Ticho je také důležité, většinou pak někdo začne mluvit. Špatné otázky Co byste dělal/měl rád/chtěl v tomto hypotetickém případě. Jak často cvičíte? -> Nepoužívejte škálu. -> Nepoužívejte otázky typu ano/ne. Tomáš Bouda HCI na KISK PERSONY Persony = Abstraktní profily konkrétních lidí (našich uživatelů) - Věk - Demografické faktory - Motivace, přání, sny, záměry, cíle, chování, etc. - Obrázek a jméno Chceme navodit empatii (psychologie apod.) Tomáš Bouda HCI na KISK PERSONY Tomáš Bouda HCI na KISK http://www.moveo.com/wp-content/uploads/2012/08/persona.jpeg http://www.avalonhu.com/SI/MeetingBytes/images/personas_comparsion_prev.png http://www.uxforthemasses.com/blog/wp-content/uploads/2010/06/Peter-the-busy-parent.jpg PROTOTYPOVÁNÍ Zdroj: http://support.balsamiq.com/customer/portal/articles/107999-specifying-interaction-with-mockups Tomáš Bouda HCI na KISK http://balsamiq.com/img/tutorials/interaction/doctypes.png 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 PROTOTYPOVÁNÍ - TYPOLOGIE Z HLEDISKA TECHNOLOGIE -Storyboardy -Papírové prototypování -Wizard of Oz • -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 STORYBOARDY Storyboard = kreslený scénář, který nám pomůže pochopit kontext uživatel – prostředí – designovaný nástroj/aplikace/ produkt. Zachycuje děj, příběh, scénář. -Nejde o pěkné obrázky, ale o předání nápadu a představy. Tomáš Bouda HCI na KISK STORYBOARDY Tomáš Bouda HCI na KISK http://media.dexigner.com/article/19874/Movirtu_Frog_MXShare_Storyboard.jpg http://www.alphachimp.com/storage/post-images/storyboard-revision-2.png?__SQUARESPACE_CACHEVERSION= 1304022725083 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 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 PAPÍROVÉ PROTOTYPOVÁNÍ Tomáš Bouda HCI na KISK http://metasite.lt/bin/167 http://technabob.com/blog/wp-content/uploads/2009/09/notepod_2.jpg 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 ROZBALOVACÍ MENU Tomáš Bouda HCI na KISK http://www.alistapart.com/d/paperprototyping/tab-post-drop-down.jpg OZNAČENÍ Tomáš Bouda HCI na KISK http://dorelvis.com/wp-content/uploads/2009/06/paper.gif http://hfid.olin.edu/sa2011/s_engr3220-rock-me-amadeus/images/PaperPrototype/Edits/prototype_advfea t_small.jpg TEXTOVÁ POLE Tomáš Bouda HCI na KISK http://courses.csail.mit.edu/6.831/wiki/images/4/43/Prototype3.jpg OVLÁDÁNÍ Snažte se používat prvky systému, pro který prototypujete. Tomáš Bouda HCI na KISK http://t0.gstatic.com/images?q=tbn:ANd9GcQ-Qusqjm5Wddn6sm6B7Z__vBe1ESyWh_iTVxvx2ajpf7LK7Urrlobq09qr lg http://www.sitemotif.com/wp-content/uploads/2011/07/Date-and-Time-Controls-Android.png ZÁVĚR Prototypujte levně a rychle. Tomáš Bouda HCI na KISK 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 Tomáš Bouda HCI na KISK DĚKUJI ZA POZORNOST TOMÁŠ BOUDA BOUDATOMAS@GMAIL.COM KISK 2012 KOMUNIKACE ČLOVĚK-POČÍTAČ