D4 [XXX-PUB] Návrh uživatelského rozhraní pro ovládací panel v restauracích The PUB Petr Hejhal Radek Ježdík Petr Smrček hejhape1@fel.cvut.cz jezdirad@fel.cvut.cz smrcepet@fel.cvut.cz 22. prosince 2013 1
Obsah Obsah High fidelity prototype Scénáře zanesené v prototypu Založení účtu (bez The PUB Club karty) Čepování piva na společný účet Čepování na účet Přivolání obsluhy Volba objednávek z hlavní obrazovky Volba objednávek z obrazovky čepování Objednání jídla Objednání nápoje Potvrzení objednávky Objednání skladby Ukázky High fidelity prototypu Implementace AngularJS Jquery Mobile Implementační problémy Vývoj Testování Cíle testování Nastavení testování Testované úkoly Výhodnocení testů Dokumentace pro developery Funkční požadavky Interakční design Vizuální design User Experience 2
High-fidelity prototype Navržený prototyp zahrnuje veškeré scénáře z D2 kromě založení účtu s The Pub kartou, které z důvodu absence hardwaru nebylo možné implementačně realizovat. Aby mohla být otestována reakce systému na zahájení a ukončení čepování piva, je výčep simulován kliknutím (a držením) čísla stolu. Ve vývoji high fidelity prototypu byl brán zřetel na nedostatky odhalené v testování low fidelity prototypu. Scénáře zanesené v prototypu Založení účtu (bez The PUB Club karty) Čepování piva na společný účet Čepování na účet Přivolání obsluhy Volba objednávek z hlavní obrazovky Volba objednávek z obrazovky čepování Objednání jídla Objednání nápoje Potvrzení objednávky Objednání skladby Založení účtu (bez The PUB Club karty) Hlavní obrazovka Uživatel klikne na tlačítko a poté si vybere jednoho z avatarů, který bude reprezentovat jeho účet (viz obr. 3). Výběrem avatara scénář končí a uživatel je založen. Čepování piva na společný účet Kdekoliv start 1 Hlavní obrazovka start 2 Scénář začíná: 1. čepováním piva bez předem zvoleného účtu 2. zvolením společného účtu na hlavní obrazovce následuje čepování piva Scénář končí: 1. automatické odhlášení po 10 sekundách 3
2. ihned po kliknutí na tlačítko zpět Čepování na účet Hlavní obrazovka Uživatel klikne na avatara, kterého si zvolil při příchodu a začne čepovat pivo. Scénář končí: 1. automatické odhlášení po 15 sekundách 2. ihned po kliknutí na tlačítko zpět Přivolání obsluhy Kdekoliv Uživatel si vyžádá přivolání obsluhy kliknutím na tlačítko potvrdit v dialogovém okně (viz obr. 4) čímž je scénář u konce. Svůj záměr následně musí Volba objednávek z hlavní obrazovky Hlavní obrazovka Uživatel zvolí tlačítko objednávek. Systém jej dále vyzve ke zvolení účtu na který bude objednáváno. Po zvolení avatara hosta, který objednává, nebo společného účtu zobrazí systém objednávkové menu (viz obr. 5) a scénář končí. Volba objednávek z obrazovky čepování Obrazovka čepovní po zvolení účtu Uživatel zvolí tlačítko objednávek scénář končí.. Systém zobrazí objednávkové menu (viz obr. 5) a 4
Objednání jídla Objednávkové menu Uživatel zvolí tlačítko pro objednávku jídla Scénář dále pokračuje potvrzením objednávky a následně vybere pokrm, který chce objednat. Objednání nápoje Objednávkové menu Uživatel zvolí tlačítko pro objednávku nápoje Scénář dále pokračuje potvrzením objednávky následně vybere nápoj, který chce objednat. Potvrzení objednávky Výběr jídla, nápoje nebo hudby Systém vyzve uživatele k potvrzení objednávky (viz obr. 6). Uživatel objednávku potvrdí nebo zamítne. Systém zobrazí obrazovku, na které byl scénář zahájen. Objednání skladby Objednávkové menu Uživatel zvolí tlačítko pro objednávku skladby následně vybere skladbu, kterou chce přehrát (viz obr. 7). Scénář dále pokračuje potvrzením objednávky 5
Ukázky High-fidelity prototypu Obrázek 1 Hlavní obrazovka Obrázek 2 Objednávka jídel 6
Obrázek 3 Výběr z avatarů Obrázek 4 Potvrzení přivolání obsluhy 7
Obrázek 5 Objednávkové menu Obrázek 6 Potvrzení objednávky 8
Obrázek 7 Výběr skladby Obrázek 8 Čepování piva Implementace High fidelity prototyp byl vytvořen jako jednostránková webová aplikace použitím značkovacího jazyka HTML a programovacího jazyka JavaScript. Pro zjednodušení práce jsme využili 9
JavaScriptový framework AngularJS, který poskytuje jednoduché provázání dat s jejich vykreslením (MVC framework). Dále jsme využili systému uživatelského rozhraní JQuery Mobile, pomocí něhož jsme navrhli rozhraní na základě low fidelity prototypu. AngularJS AngularJS je JavaScriptový MVC framework, který poskytuje snadné provázání aplikačních dat (Model), kontrolerem pro zpracování událostí (Controller) a logikou pro zobrazení těchto dat uživateli (View). V prototypu používáme tuto nejzákladnější vlastnost frameworku pro udržení modelu (účtů, výtočů piva, nápojového a jídelního lístku, seznamu hudby, atd.), interakci s uživatelem (obsluha tlačítek, události) a pro vykreslení modelu, které je spojeno s JQuery Mobile. Jquery Mobile Tento framework jsme použili pro snadnější designování uživatelského rozhraní. Poskytuje totiž předpřipravené komponenty (vzhledem i funkčností), které zajišťují například filtrování položek v seznamu, dialogová okna apod. Framework je postaven na vlastních atributech HTML elementů, které definují, co se má zobrazit a jak se komponenta má chovat. O vlastní funkci komponent se postárá sama knihovna, právě podle specifikovaných atributů. Implementační problémy Při tvorbě prototypu se vyskytlo i několik problémů. Jeden ze závažnějších byla snaha využít oba frameworky zároveň tak, aby se doplňovaly. Frameworky ale nejsou spolu kompatibilní a tak nešlo například využít směrování odkazů a AJAXového načítání pohledů (včetně animací) bez ztráty kontroly nad jedním nebo druhým frameworkem. Tento problém jsme vyřešili tak, že jednotlivé pohledy (obrazovky) jsou celé definované ve stejném HTML dokumentu a uživateli se podmíněně zobrazí jen ten, který je nastaven aktuálně v modelu. Vývoj Vývoj celé HTML aplikace (HTML, CSS, JavaScript) probíhal v editoru Sublime Text. Testování při vývoji a ladění probíhalo v prohlížeči Chrome (verze 31.0.1650.63 m), který doporučujeme i k otestování prototypu. Aplikace byla laděna pro nejnovější verze vykreslovacího jádra WebKit a na jiných nemusí fungovat správně. 10
Testování Cíle testování Hlavním cílem testování bylo především ověřit použitelnost navrhnutého řešení s ohledem na nalezené problémy v D1. Prostředí by tedy mělo být přehledné, intuitivní, zábavné a mělo by poskytovat možnost opravy. Nastavení testování Testovací zařízení: Tablet Apple ipad 2 Testovací prostředí: Webový prohlížeč Google Chrome (verze pro ios) Počet testovaných osob: 2 Testované úkoly Testované úkoly jsou navržené tak, aby jejich rozsah pokryl co největší množství scénářů. Oba respondenti vykonali všechny úkoly. 1. Přihlášení ke stolu a zvolení avatara 2. Výčep piva na společný účet 3. Výčep piva na vlastní účet 4. Změna výtoče na jiného uživatele 5. Přivolání obsluhy 6. Objednávka některé písničky od skupiny Metallica 7. Objednávka toastu 8. Objednávka Stroh 80% Výhodnocení testů Oba respondenti splnili bez problémů všechny úkoly. Všechny úkoly jim přišly velmi snadné. Nad žádným úkolem ani obrazovkou neváhali déle než 0,5 vteřiny (jediná výjika byl výběr avatara, kde ale oba respondenti naopak věnovali čas výběru avatara, který se jim líbil, funkci tedy ocenili). Jediný nalezený nedostatek byla rychlost odezvy, ta však byla způsobena testovacím prostředím. Ve výsledné aplikaci je třeba dát důraz na rychlou odezvu. Respondenti dále naznačili, že pokud by byli pod vlivem alkoholu, mohli by si naopak unáhleně a nerozvážně díky jednoduchosti a rychlosti objednat více pokrmů či nápojů, než by doopravdy chtěli. Bylo by tedy vhodné před nasazením provést další testy a to s osobami v podnapilém stavu (pravděpodobně A/B test, kde ve variantě B by byl přidán další krok objednávky). 11
Dokumentace pro developery Funkční požadavky Požadavky jsou seřazeny dle priorit. Nejdůležitější funkcí je přitom hladce probíhající čepování piva: 1. Měření průtoku piva pípou a přičtení této hodnoty k příslušnému účtu 2. Přidávání účtů včetně volby avatarů 3. Převedení právě provedené výtoče na jiný účet 4. Přivolání obsluhy 5. Objednávka jídla 6. Objednávka hudby s vyhledáváním Interakční design Veškeré ovládání aplikace je dotykové. Stisk tlačítek musí mít rychlou odezvu a na správném místě (po celé ploše tlačítka). Není možné, aby aplikace dotek ignorovala nebo vyhodnotila na jiném místě, jak je tomu ve stávající verzi panelu. V případě scrollovacích menu (např. objednávka jídla / hudby) se obrazovka posouvá dotykem a následným tahem nahoru nebo dolů ve stejném směru. Při přerušení dotyku během scrollování se obrazovka nezastaví okamžitě, ale zachová si setrvačnost a zastaví až se zpožděním. Velikost tohoto zpoždění je závislá na rychlosti scrollování. Vizuální design Velikosti jednotlivých prvků jsou závislé na rozlišení použité obrazovky, specifikována jsou proto převážně minima. Veškerá tlačítka musí být velká minimálně 2 x 2 cm, aby se do nich bez problémů trefil i uživatel pod vlivem alkoholu. Hranice tlačítek musí být vždy jasně viditelná, každé tlačítko musí být zvýrazněno stínem. Tlačítka pro účty na hlavní obrazovce musí mít velikost minimálně 6 x 3 cm. Na hlavní obrazovce musí být místo pro minimálně 9 tlačítek účtů zároveň. Nadpisy v horním oznamovacím panelu musí mít velikost alespoň 1cm. Vešekré texty musí být dobře čitelné i ze vzdálenosti 1,5m. User Experience Uživatel musí mít systém vždy pod kontrolou a to i pokud se příliš nesoustředí. Systém tedy musí vykonávat požadované akce spolehlivě a okamžitě. Na obrazovce musí být vždy jasně viditelné, které prvky jsou interaktivní (tlačítka) a na kterých obrazovkách je možné scrollovat. Tlačítko zpět musí být k dispozici kdykoliv, kromě situace, kdy vyskočí popup. V takovém případě musí být možné popup kdykoliv jedním dotekem zrušit. Uživatel by měl mít k aplikaci důvěru a její používání by mělo být jednoduché a zábavné. 12