ÚVOD DO INTERAKTIVNÍHO DESIGNU (HCI, DESIGN, EFEKT PROTOTYPOVÁNÍ, EVALUACE) TOMÁŠ BOUDA KISK 2013 KOMUNIKACE ČLOVĚK-POČÍTAČ OBSAH HCI Dobrý design Síla prototypování Evaluace designu Tomáš Bouda HCI na KISK CO JE HUMAN-COMPUTER INTERACTION? Člověk Tomáš Bouda HCI na KISK http://1y4o79syc6g4difua2cvof9qco.wpengine.netdna-cdn.com/wp-content/uploads/2013/05/people.jpg Počítač Interakce Člověk a jeho denní úkoly, pracovní úkoly, neformální motivy k práci apod. Všudypřítomné programování, všudypřítomné počítače. Interakce by měla být taková, že nás rozhraní nevyrušuje, neupoutává zbytečně naši pozornost tak, abychom se mohli soustředit na naše úkoly. HCI SYSTÉMY - TYPOLOGIE Unimodální systémy: -Visual-based (Facial Expression Anylsis, Body movement tracking, Gesture recognition …) -Audio-based (Speech recognition, Speaker recognition, Auditory Emotion Analysis, Musical interactions) -Senzor-based (Pen-based Interactions, Mouse & Keyboards, Joystick, Motion tracking senstors, Haptic sensors, pressure sensors, Taste/Smell sensors) - Multimodální systémy -Put That There: http://www.youtube.com/watch?v=RyBEUyEtxQo -Emotion Recongnition multimodal systems (monitoring face, body and voice) -Map-based multimodal apps (ukážete a zeptáte se: How much is this?) -Multimodal human-robort interface apps (Go over there. Switch on the light.) -Multi-modal HCI in medicine (neuro-surgery) - Zdroj: FAKHREDDINE, Karray Human-Computer Interaction: Overview on State of the Art. INTERNATIONAL JOURNAL ON SMART SENSING AND INTELLIGENT SYSTEMS [online]. 2008, roč. 1, č. 1, 137 - 159 [cit. 2013-09-24]. Dostupné z: http://www.s2is.org/Issues/v1/n1/papers/paper9.pdf Tomáš Bouda HCI na KISK Gesture recognition: Aplikace na focení v iPadu – pěsti. Speech recognition – Android Motion tracking sensors – Wearables, aplikace, kterou poměřujeme, kdo jak vysoko vyhodí mobil. TROCHA HISTORIE – SAMOSTUDIUM, NICMÉNĚ … Počátky – 1970 – zvyšuje se penetrace počítačů na pracovištích Tomáš Bouda HCI na KISK Zdroj: Human-Computer Interaction: Overview on State of the Art http://www.s2is.org/Issues/v1/n1/papers/paper9.pdf Ubiquitous computing – všudypřítomné počítače (Internet věcí) TROCHA HISTORIE – SAMOSTUDIUM, NICMÉNĚ … 1970 – 1980 – zamření na výzkumy – ergonomie, engeneering, počítačová věda. 1980 – vznikají profesní organizace a HCI se začíná učit na školách SIGHCI - premier international society for professionals, academics and students who are interested in human-technology and human-computer interaction (HCI). http://www.sigchi.org/ Tomáš Bouda HCI na KISK Zdroj: CHURCHILL, Elizabeth F., Anne BOWSER a Jennifer PREECE. Teaching and learning human-computer interaction. Interactions [online]. 2013-03-01, vol. 20, issue 2, s. 44- [cit. 2013-09-24]. DOI: 10.1145/2427076.2427086. Dostupné z: http://dl.acm.org/citation.cfm?doid=2427076.2427086 Tomáš Bouda HCI na KISK Portugalsky mluvící – interaction design Čínsky mluvící – mobil design a development English – kvantitativní výzkumy INTERAKTIVNÍ ROZHRANÍ IMG_0639.JPG Tomáš Bouda HCI na KISK INTERAKTIVNÍ ROZHRANÍ Tomáš Bouda HCI na KISK DSC08252.JPG INTERAKTIVNÍ ROZHRANÍ Tomáš Bouda HCI na KISK DSC08253.JPG INTERAKTIVNÍ ROZHRANÍ Tomáš Bouda HCI na KISK IMG_0440.JPG IMG_0441.JPG IMG_0439.JPG INTERAKTIVNÍ ROZHRANÍ Tomáš Bouda HCI na KISK Zdroj: http://www.bestappsite.com/friendly-facebook-browser-for-ipad/ http://www.bestappsite.com/wp-content/uploads/2010/08/friendly-main.jpg CO JE DOBRÝ INTERAKČNÍ DESIGN? Tomáš Bouda HCI na KISK INTERAKČNÍ DESIGN - DOBRÉ MENTÁLNÍ MODELY Zdroj: http://ipad.appfinders.com/best-ipad-calendars/ - http://ipad.appfinders.com/wp-content/uploads/2010/09/12.jpg Tomáš Bouda HCI na KISK INTERAKČNÍ DESIGN –PRINCIP ZPĚTNÉ VAZBY Foto: gmail.com - -Vibrační zpětná vazba. -Pípaní v telefonu při vytáčení čísla. Tomáš Bouda HCI na KISK INTERAKČNÍ DESIGN – DOBRÁ NAVIGACE -Kde jsem? -Co mohu udělat? - -Jak se mohu vrátit zpět? - Tomáš Bouda HCI na KISK inflow.JPG INTERAKČNÍ DESIGN – DOBRÁ NAVIGACE Foto: Inflow.cz - Tomáš Bouda HCI na KISK INTERAKČNÍ DESIGN – KONZISTENCE Ten samý prvek by se měl chovat v každé části systému stejně. Akční tlačítko Applu: Action button Tomáš Bouda HCI na KISK INTERAKČNÍ DESIGN – INTUITIVNÍ INTERAKCE Systém by měl být ovladatelný tak, abychom se soustředili na cíl naší práce. - -Řízení auta - - - Foto: http://amazing-creature.blogspot.cz/2012/04/40-cool-dogs-driving-cars-40-pics.html http://3.bp.blogspot.com/-Z3GFsJZvT7E/T4MYxMkNl3I/AAAAAAAAGd0/AZyTI-6D1A4/s640/funny-animals-dogs-d riving-cars-036.jpg Tomáš Bouda HCI na KISK DOBRÝ INTERAKČNÍ DESIGN -Dobré mentální modely - -Princip zpětné vazby -Dobrá navigace - -Konzistence - -Intuitivní Interakce - - Tomáš Bouda HCI na KISK INTERAKČNÍ DESIGN Cílem není vytvořit skvěle vypadající produkt. Smyslem je vytvářet design, který funguje. Navrhujeme to, jak se nám bude s produktem pracovat. Tomáš Bouda HCI na KISK DESIGN PRO KAŽDÝ DEN Donald A. Norman Pokud máte problém s ovládáním přístroje, počítače nebo jiného systému, pak není chyba ve vás. Chyba je v systému. http://data.bux.cz/book/016/816/0168164/medium.jpg Tomáš Bouda HCI na KISK JAK SE VÁM POUŽÍVÁ FACEBOOK? „Rodiče se teď připojili na Facebook a díky tomu jsem zjistil, jak je neintuitivní. Jako geek mám tendenci tyhle věci považovat za normální a přirozené – ve skutečnosti to ale znamená, že v hlavě nosím neuvěřitelná kvanta postupů. Vydalo by to na desetisvazkovou knížku o tom, kdy na co kliknout a jakou klávesovou zkratku použít. To všechno je překomplikované a většinou zbytečné.“ Michal Kašpárek (Živě.cz) http://bit.ly/zivekasparekbocek Tomáš Bouda HCI na KISK DESIGN ZAMĚŘENÝ NA UŽIVATELE Larry Tasler a Tim Mott Participativní design Larry (XEROX, Apple) vyvinul manuál, podle kterého bylo vhodné strukturovat otázky pro uživatele. Jedině tak bylo možné vytvořit software, který by uživatelé opravdu využívaly. Vyvíjeli a testovali Apple Lisa -GUI, metafora s pracovním stolem -Jedno , tři a dvě tlačítka na myši Foto: http://www.designinginteractions.com/interviews/LarryTesler Timothy Mott Picture Tomáš Bouda HCI na KISK SÍLA PROTOTYPOVÁNÍ Tomáš Bouda HCI na KISK EFEKT PROTOTYPOVÁNÍ Prototypování je strategie, jak se efektivně vypořádat s věcmi, které je těžké předvídat. Přemýšlejte nad cílem produktu. Tomáš Bouda HCI na KISK EFEKT PROTOTYPOVÁNÍ -Prototyp x Finální verze http://images.amazon.com/images/G/02/uk-electronics/shops/misc/panasonic/DMCFZ7back.jpg Tomáš Bouda HCI na KISK EFEKT PROTOTYPOVÁNÍ Charakteristiky prototypu - -Někdy větší -Nefunkční -Názorný -Levný Tomáš Bouda HCI na KISK 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/ http://archive.computerhistory.org/resources/access/physical-object/2010/08/102716262.01.01.lg.JPG? rand=121252375 http://haykin.net/innovationsparks/wp-content/uploads/2010/09/Palm_Pilot_335x450.jpg Tomáš Bouda HCI na KISK http://t3.gstatic.com/images?q=tbn:ANd9GcRAsHp6B09b4ZTmlJCfeE9H46oQoklUhWDSDf9eEouJQCdTJ4xt 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 http://divergentmba.files.wordpress.com/2011/03/buxton_sketching.jpg Kanadský počítačový vědec – University of Toronto Jeden z pionýrů HCI Pracoval na výzkumu v Microsoftu Rozpracoval Fittovo pravidlo: http://en.wikipedia.org/wiki/Fitts%27_law Zdroj: http://vimeo.com/5189134 Tomáš Bouda HCI na KISK http://divergentmba.files.wordpress.com/2012/03/design-process.jpg HLEDÁNÍ ALTERNATIV Tomáš Bouda HCI na KISK http://www.talidari.net/image-files/broken-tree.jpg Zdroj: http://vimeo.com/5189134 Pokud máte jenom více variant, pak je můžete vytahovat z rukáv. Jenda je lepší, druhá horší, ale máte další. Možná lepší, možná nejlepší. Pokud máte jeden nápad, jak je problém, když vám jej kritizuji. Kritizuji vás osobně. LASEAUOVA NÁLEVKA – REDUKCE ALTERNATIV Tomáš Bouda HCI na KISK 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. Laseaus Funnel Lsauova nálevka Levá hemisféra – racionální Pravá hemisféra – kreativní Zdroj: http://vimeo.com/5189134 Tomáš Bouda HCI na KISK http://media.konigi.com/book/sketch/buxtondesignprocess.png PROTOTYP - -Nemusí být kompletní -Měl by být lehce změnitelný - Tomáš Bouda HCI na KISK PROTOTYP ŠETŘÍ ČAS A RYCHLE SE Z NĚJ POUČÍME - Tomáš Bouda HCI na KISK TYPOLOGIE PROTOTYPŮ Prototypy slouží různým účelům: Role Prototyp je designován za účelem zjištění, co s produktem může uživatele dělat. Zkoumáme funkcionalitu. (Storyboard, prototyp telefonu) • Vzhled a pocity Prototyp je designován za účelem zjištění, jak produkt působí na uživatele z hlediska vzhledu a uživatelského prožitku. (Hračky pro děti, přenosný počítač pro architekty atp.) • Implementaci Prototyp je designován za účelem zjištění, jak bude konečný produkt fungovat. (Menu ve Wordu) Haude a Hill: http://hci.stanford.edu/courses/cs247/2012/readings/WhatDoPrototypesPrototype.pdf Tomáš Bouda HCI na KISK Komplexní systémy (OS a software) vyžadují komplexní prototypování. To zajistí komplexní design. - Nové produkty poskytují nové funkce a hrají tak v našich životech nové role. - Nové produkty musí vypadat atraktivně a vzbuzovat emoce, potřebujeme zjišťovat vzhled a pocity. - Nové produkty přináší také nové technologie a techniky, které vyžadují specifickou implementaci. TYPOLOGIE PROTOTYPŮ - ROLE Zdroj: http://www.pushyourdesign.com/Scott/develpeople.html http://www.pushyourdesign.com/Scott/storyboard.jpg Tomáš Bouda HCI na KISK TYPOLOGIE PROTOTYPŮ – VZHLED A POCITY Zdroj: http://www.toycollector.com/index.php?option=com_kunena&func=view&catid=95&id=10432&Itemid=0 http://www.toycollector.com/hwdphotos/originals/107/1089/Ixo_17.jpg Tomáš Bouda HCI na KISK TYPOLOGIE PROTOTYPŮ - VZHLED Zdroj: Haude a Hill: http://www.sics.se/fal/kurser/winograd-2004/Prototypes.pdf Tomáš Bouda HCI na KISK TYPOLOGIE PROTOTYPŮ - IMPLEMENTACE Zdroj: http://www.dhtml-menu-builder.com/blog/drop-down-menu-10-useful-scripts-to-enhance-header-navigatio n/ http://www.dhtml-menu-builder.com/blog/wp-content/uploads/2011/03/drop-down-menu-6.gif Tomáš Bouda HCI na KISK TYPOLOGIE PROTOTYPŮ - INTEGRACE Haude a Hill: http://www.sics.se/fal/kurser/winograd-2004/Prototypes.pdf Tomáš Bouda HCI na KISK Tento prototyp reprezentuje komplexní uživatelský prožitek. Je náročnější a dražší na vytvoření. 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 http://www.ur.umich.edu/0506/Jun26_06/img/060626_3Dlab(22).jpg 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 JE DOBRÉ ZKOUŠET VÍCE NÁPADŮ A KONCEPTŮ Zdroj: Designing Interactions Možné typy myší prototypované u firmy XEROX. Tomáš Bouda HCI na KISK PROTOTYPOVÁNÍ - HLEDÁNÍ GLOBÁLNÍHO MAXIMA Tomáš Bouda HCI na KISK 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 EVALUACE DESIGNU Tomáš Bouda HCI na KISK PROČ TESTOVAT? Příběh Universatoru: Jaké to bylo a proč to nedopadlo David Šiška a Jan Kolář „V tento moment všechny naše předchozí chyby vyvrcholily. Zjištění z uživatelského testování, že je web nevhodně navržen, přišlo až příliš pozdě. Způsobilo to ještě větší zpomalení nezkušeného vývojového týmu, který musel pracovat na změnách. Motivace uvnitř týmu kvůli pocitu nekonečnosti vývoje klesala.“ Zdroj: http://www.tyinternety.cz/startupy/pribeh-universatoru-jake-to-bylo-a-proc-to-nedopadlo-7626 Tomáš Bouda HCI na KISK undefined EVALUACE DESIGNU Jak můžeme měřit úspěšnost softwaru? Otázky jsou otevřené, odpovědi subjektivní a komplexní, často se jedná o osobní preference, který systém je lepší. Tomáš Bouda HCI na KISK EVALUACE DESIGNU Proč hodnotit design prostřednictvím uživatelů? Tomáš Bouda HCI na KISK EVALUACE DESIGNU Co bychom měli o našem designu vědět? Jak se změní chování uživatelů, když design produktu přebudujeme? Tomáš Bouda HCI na KISK EVALUACE DESIGNU Metody evaluace designu jsou různé a jsou tak vhodné k dosažení různých cílů. Tomáš Bouda HCI na KISK EVALUACE DESIGNU - V různých situacích se hodí různé typy testování a evaluace. Tomáš Bouda HCI na KISK Roly hrají peníze – testování doma x v laboratoři Roli hraje lokalita – v laboratoři se lidí nechovají přirozeně, někdy je třeba testovat na autobusové zastávce EVALUACE DESIGNU Zeptejte se lidí, jak často cvičí. Pravděpodobně vám neřeknou pravdu. pozorování x dotazování … je vhodné když… Tomáš Bouda HCI na KISK TYPOLOGIE EVALUACE •Dotazník •Focus grops •Zpětná vazba od expertů •Sdílená kritika (Peer Critique) •Heuristická analýza •Dogfooding – produkt jsou nuceni používat zaměstnanci firmy. (Např. Facebook nutil své vývojáře používat špatnou aplikaci pro Android). •Pozorování účastníků výzkumu •Když přesně nevíte, co hledáte. Tomáš Bouda HCI na KISK Dotazník – když potřebujeme oslovit mnoho lidí, online dotazník… Focus Groups – když se chceme dostat do hloubky a měnit otázky. Chceme se dozvědět, jak reagují na jiné názory ostatní z cílové skupiny. Máme málo uživatelů. JAKÝ TYP EVALUACE POUŽÍT? Záleží na •Reliabilita (spolehlivost) •Bude výsledek dalšího měření v případě stejných podmínek shodný? •Generalizace •Je výsledek stejný v případě 50 letého zaměstnance univerzity a studenta v první třídě? •Reálnost •Je to, co zkoumáme, možné přenést do reálného světa? Nebo jsou výsledky využitelné pouze v laboratoři? •Porovnávání •Který ze systémů je lepší? •Zahrnutý objekt výzkumu •Zkoumáme systém, který pomáhá zachraňovat životy? Tomáš Bouda HCI na KISK Vytváříme dva podobné systémy pro dvě různé firmy? Je systém myšlen pro několik cílových skupin? Testujeme teoreticky nejlepší rozhraní, které však není možné realizovat prakticky? Nebo bude realizace stát spoustu peněz? ZÁVĚR Ujasněte si, co se chcete dozvědět. Tomáš Bouda HCI na KISK DOPORUČENÁ LITERATURA NORMAN, Donald A. Design pro každý den. 1. vyd. v českém jazyce. Praha: Dokořán, 2010, 271 s. ISBN 978-80-7363-314-1. HOUDE, Stephanie a Hill CHARLES. What do prototypes prototype?. HELANDER, Martin. Handbook of human-computer interaction. Vyd. 1. New York: Elsevier, 1997, s. 367-381. ISBN 0444818626. MOGGRIDGE, Bill. Designing interactions. Cambridge, Mass.: MIT Press, c2007, xxiv, 766 p. ISBN 978-026-2134-743. Interactions: experience, people, technology: http://interactions.acm.org/ . Tomáš Bouda HCI na KISK DĚKUJI ZA POZORNOST TOMÁŠ BOUDA BOUDATOMAS@GMAIL.COM KISK 2013 KOMUNIKACE ČLOVĚK-POČÍTAČ