Tvorba uživatelských rozhraní a hodnocení použitelnosti Martin Dostál Honeywell International - Aerospace Advanced Technology Europe Masarykova Univerzita v Brně, Fakulta informatiky PV252 5. přednáška DOTYKOVÁ ROZHRANÍ Plato IV • 1972 • University of Illionis • infračervený panel - single touch • určeno pro výuku 2 První multi-touch tablet • 1981, 1985 • University of Torono • první multi-touch tablet • kapacitní technologie snímání 3 Casio • 1984 • Casio AT-550 • dotyková kalkulačka • malování znaků (finger trace) 4 První smarphone • 1991 • IBM Simon • ovládání perem • komunikátor 5 Digital Desk • XEROX, 1991 • tabletop zařízení • projekce • multi-touch • PaperPaint • ne paperless řešení, naopak ! 6 • personal digital assistant (PDA), cca 1992 • Palm, Apple ... • Apple Newton platforma • MessagePad 110, ARM610 • Newton OS • dotykové pero, rozpoznávání písma • neúspěch na trhu Další zařízení 7 Zařízení • elektronické hudební nástroje a kontrolery • iPhone (2007) • iPad (2010) • Microsoft PixelSense (dříve Surface) 8 • dispej jako téměř výhradní prvek interakce • principiální zjednodušení ovládání • založeno na přímé manipulaci • ovládání více prsty • gesta • tap, drag, flick, pinch, shake ... Charakteristika 9 • různý hw (zejména velikosti obrazovky) • modální, v jednom okamžiku jedna aplikace • aplikace bez nápovědy jako princip • jedno „okno” • menší množství ovládacích prvků • volnější forma než desktop = příležitost i hrozba • převažuje konzumace obsahu • vytváření obsahu je potřeba správně uchopit Charakteristika 10 Interakce • Přímá manipulace • přímý (přímější) přístup k ovládacím prvkům a volbám na úkol hierarchie • Action - Object versus Object - Action 11 Přímá manipulace • principy • vyobrazení reálného světa • trvalá viditelnost objektů a akcí • okamžitá odezva • vratnost akcí • jak na to • využití metafor • důraz na vizuální reprezentaci • jedině důsledně to má smysl 12 obrázek: http://www.idownloadblog.com Přímá manipulace • výhody • vhodné pro laické uživatele (za předpokladu nízké motorické náročnosti) • (za určitých okolností) snadno použitelné • předcházení chybám • lze vrátit zpátky • nevýhody • (za určitých okolností) těžko použitelné • může být pracné • pro experty zdlouhavé Pøříklady 13 Tři obecné principy • Metafory • Mentální modely • Mapování 14 Mentální modely • vnitřní reprezentace světa • vytváří si je každý sám • uživatel – představa o systému • aplikace mentálního modelu v uživatelském rozhraní vede k intuitivnímu používání • východisko pro konceptuální model interakce • typicky buď • model struktury • model funkce 15 Mentální modely • Mentální modely jsou neúplné a nepřesné a tak na ně nelze spoléhat. • Mentální modely nejsou konzistentní napříč uživateli. • Mentální modely jsou nestabilní. • Mentální modely jsou nedokonalé. 16 Příklad 17 Metafory • Metafora (z řeckého metaférein, přenos) znamená přenášení významu na základě vnější podobnosti • přenášení principů z reálného světa do UI • vhodné pro obecně akceptované a známé principy • usnadňuje práci se systémem a pochopení systému • umožňuje abstrahovat od technické podstaty • podporuje tvorbu mentálních modelů 18 Metafory: příklady • pracovní plocha • dokument • tiskárna • okno • elektronický obchod • koš • kalkulačka • soubory a složky • mailbox • menu • ovládací prvky ? Pøříklady ? 19 Problémy s metaforami • metafory narušující mentální model • metafory nemusí být široce známé nebo akceptované • tupé přenášení metafor Pøříklady ? 20 Narušení mentálního modelu • koš na starších verzích Mac OS • konflikt principů • jeden objekt – jedna funkce • minimum objektů na ploše • hodit do koše disketu, co se stane ? • Move to trash, Erase, Put Away, Eject • Mac OS X – ikona se mění podle kontextu 21 Mapování • vztah mezi ovládacím prvkem a ovládaným objektem • souvisí s mentálním modelem • musí být jasné a přirozené 22 Příklady • konektory – co bývá správně, co špatně ? • volant 23 Cvičení: mapování u varné desky 24 Uživatelské rozhraní a ovládací prvky • podobně jako na desktopu máme sadu ovládacích prvků • máme i guidelines • forma je však volnější • lze upravit či přidávat nové prvky - “think twice pravidlo” • konzistence se systémem, ale i s vizuálním výrazem aplikace 25 iOS Guidelines WWWAndroid Guidelines WWW Od desktopu k mobilní aplikaci 26 • Co by se mělo změnit • Jaké konkrétní změny indentifikujeme? • Jaké pro to existují důvody? Obecná doporučení • buďte minimalističní, važte funkcionalitu - “80% user rule” • jedna funkce, jedna cesta • hledejte funkční metafory • minimalizujte modalitu • minimalizujte hierarchičnost • plocha displeje je snadno stává velmi limitující 27 obrázek: www.apple.com Mail: OS X vs iPad verze 28 obrázek: www.applenaps.com OS X Mail 29 obrázek: www.applenaps.com iPad Mail 30 obrázek: www.applenaps.com Minimální rozměry interaktivních prvků 31 Prostředí/Výrobce Rozměr iOS/Apple 44x44 bodů (7x7mm) Android/Google 7x7mm Nokia doporučeno 10x10mm minimum 7x7mm, pro palec 8x8mm Windows Phone/Microsoft doporučeno 34x34 bodů (9x9mm) minimum 26x26 bodů (7x7mm) Trend • haptická rozhraní • propojení vjemů přináší synergický efekt 32 Human Interface Guidelines • http://developer.apple.com/library/ios/#documentation/ UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html • http://developer.android.com/guide/practices/ui_guidelines/index.html 33 Úkol na cvičení • Navrhnout papírový prototyp aplikace pro prezentace ala PowerPoint, která poběží na iPadu • sepište uživatelské požadavky • diskutujte o nich s uživateli • sepište, které byly/nebyly zahrnuty a proč • vyberte funkcionalitu • navrhrněte interakci (u klíčových funkcí detailně) • myslete na interakční paradigma • cílem je mít výbornou aplikaci na prezentace - co to znamená ??? :) • to vše vložte do prezentace 34