NUR - Interaktivní panel, D2 Petr Fišer, Roman Kubů, Jiří Slivárich {fiserp10, kuburoma, slivajir}@fel.cvut.cz
Obsah Úvod.................................................................................................................................................2 Scénáře užití.....................................................................................................................................3 Otevírající se skříň (bez omezení věku).................................................................................3 Překlápějící se písmena (náctiletí, dospělí)............................................................................3 Poskládej si slovo (děti)..........................................................................................................3 Storyboardy......................................................................................................................................4 Otevírající se skříň..................................................................................................................4 Překlápějící se písmena..........................................................................................................5 Poskládej si slovo...................................................................................................................6 Formální model uživatelského rozhraní...........................................................................................7 Diagramy scénářů interakce...................................................................................................7 Mockupy..........................................................................................................................................9 Zobrazení reklamy, rozloučení s uživatelem..........................................................................9 Otevírající se skříň................................................................................................................10 Překlápějící se písmena........................................................................................................11 Poskládej si slovo.................................................................................................................11 Testování Low Fidelity modelu.....................................................................................................13
Úvod Tento dokument navazuje na dokument Interaktivní panel - Deliverable 1. Jeho účelem je popsat use case panelu, předvést storyboardy rámcového použití a mockupy uživatelského rozhraní. Tato sada dat je doplněna formálním CTT modelem uživatelského rozhraní. V rámci Low Fidelity modelu, který tyto informace dohromady tvoří, bylo provedeno neformální základní testování. Participanty v testování byli členové vývojového týmu. Závěr testování je poskytnut na konci dokumentu.
Scénáře užití Scénáře užití interaktivního panelu jsou poměrně specifické; interakce uživatele ve všech případech probíhá tak, že se uživatel pohybuje (přibližuje či oddaluje) vzhledem k panelu či provádí jednoduchá gesta. Jednotlivé use casy v případě interaktivního panelu degenerují na průchod uživatelským rozhraním.
Otevírající se skříň (bez omezení věku) Uživatel prochází okolo panelu, který jej na sebe vizuálně nebo akusticky upozorní. Pokud uživatel zareaguje a začne panelu věnovat pozornost, začíná samotná interakce. Panel sleduje vzdálenost uživatele a s jejím klesáním se otevírají dveře skříně, která je na něm vyobrazena. Princip otevírající se skříně má za úkol to, že se uživatel přiblíží až do vzdálenosti optimální pro vyfotografování jeho obličeje. Fotografie je použita v konečné fázi - do obsahu (plakátu, ...), který se objeví "ve skříni", je vložen obličej uživatele. Use cases: přijít blíže, poodstoupit, odejít
Překlápějící se písmena (náctiletí, dospělí) Interaktivní panel zjistí ve své blízkosti (cca 5m) přítomnost potencionálního uživatele a pokusí se jej přilákat zvukem či vizuálně. Pokud dojde k reakci uživatele (otočí se na tabuli), začne samotná interakce. Uživateli je zobrazeno slovo, jehož písmena jsou převrácena podle svislé osy. Toto slovo má souvislost se samotnou reklamou, která bude vyobrazena na konci scénáře. S klesající vzdáleností uživatele od panelu se jednotlivá písmena otáčejí do správné polohy a případně obarvují. Jakmile je uživatel ve vzdálenosti, ze které bez problémů reklamu přečte, tak slovo zmizí a zobrazí se právě tato reklama (plakát na film, akce z nedalekého obchodu, ...) Pokud během jakékoliv fáze uživatel ztratí zájem o interakci s panelem, je stav panelu navrácen do výchozího, kdy panel vyčkává na potenciálního uživatele. Toto se stane i po samotném zobrazení reklamy, a následném odchodu uživatele. Use cases: přijít blíže, poodstoupit, odejít
Poskládej si slovo (děti) Cílem tohoto způsobu interakce je upoutat děti (6 – 10 let). V zásadě se jedná o obdobu přehazujících se písmen, ale zde si může uživatel s písmeny i hrát. Jakmile tabule zjistí přítomnost uživatele (dítěte), zobrazí slovo, jehož písmena jsou přeházena. Rozházená písmena jsou doplněna obrázkem předmětu/zvířete, které dané slovo pojmenovává. Panel vizuálně nebo zvukově vysvětlí, jakým způsobem se dá slovo poskládat do správné podoby. Během interakce má uživatel za úkol pomocí dotyků „přetahat“ písmenka na jejich správné pozice a tím vrátit slovo do správné podoby.
Jakmile je toho uživatel dosáhne, dojde ke zobrazení reklamy, která by měla být cílena na danou věkovou skupinu. Pokud tedy uživatel poskládá např. slovo HROCH dojde ke zobrazení reklamy na nedalekou ZOO apod. Po odchodu uživatele se panel navrací do výchozího stavu. Use cases: přijít blíže, poodstoupit, odejít, uchopit písmeno, pustit písmeno, posunout písmeno
Storyboardy Ke každému scénáři průchodu uživatelským rozhraním byl vytvořen storyboard. Tyto storyboardy jsou popsané v této kapitole. Zdrojové obrázky jsou přílohou tohoto dokumentu.
Otevírající se skříň Uživatel je upoután podivnou skříní. Jak se přibližuje k panelu, skříň se postupně otvírá a odhaluje svůj vnitřek. Když je skříň otevřená a uživatel je v dostatečné vzdálenosti, panel uživatele vyfotí. Následně zakomponuje obličej uživatele do reklamy ve skříni.
Překlápějící se písmena Okolo procházející uživatel je upoután panelem. Jak uživatel přichází blíže, otáčejí se jednotlivá písmena textu.
Poskládej si slovo Tento storyboard je úzce spojen s mockupem rozhraní. Mockup byl tvořen v „reálném“ nasazení - místo interaktivního panelu byl použit whiteboard. Vzniklé materiály byly použity i pro tvorbu storyboardu.
Formální model uživatelského rozhraní Následující kapitola formálně popisuje uživatelské rozhraní panelu. Je velmi úzce spljata se scénáři a mockupy. K formálnímu popisu byly použity CTT diagramy.
Ilustrace 1: Funcionalita panelu je v základních rysech stejná. Liší se jednotlivé scénáře předávané uživateli. Tyto jsou popsány v samostatných diagramech a navazují na uzel "Interakce s uživatelem"
Diagramy scénářů interakce
Ilustrace 2: Diagram interakce uživatele při scénáři "Otevírající se skříň"
Ilustrace 3: Diagram interakce uživatele při scénáři "Překlápějící se písmena"
Ilustrace 4: Diagram interakce uživatele při scénáři "Poskládej si slovo"
Mockupy Mockupy jsou Low Fidelity modelem uživatelského rozhraní. V rámci návrhu UI panelu byly vytvořeny mockupy pro každý ze tří scénářů, protože uživatelské rozhraní se významně liší. Akce interaktivního panelu lze rozdělit na tyto části: 1. Zobrazování reklamy - stav „neaktivity“ 2. Přehrávání jednoho ze scénářů uživateli 3. Rozloučení s uživatelem Přechod mezi těmito stavy je možný ve směrech (1 -> 2), (2 -> 3), (3 -> 1). Mockup reklamy a rozloučení je generický, zatímco mockupy interakce jsou specifické danému scénáři. Některé mockupy jsou z technických důvodů provedeny v malém formátu (A5) místo na reálném velkoplošném panelu.
Zobrazení reklamy, rozloučení s uživatelem
Ilustrace 5: Reklama - klidový stav
Ilustrace 6: Rozloučení
Otevírající se skříň V tomto scénáři se zobrazená skříň otevírá tím víc, čím blíže je uživatel k panelu.
Ilustrace 8: Zavřená skříň uživatel je daleko (nebo byl právě detekován)
Ilustrace 7: Uživatel je v požadované vzdálenosti od panelu
Ilustrace 9: Uživatel přichází blíže - skříň se více otvírá
Ilustrace 10: Uživatel byl vyfocen a jeho obličej zakomponován do obrazu
Překlápějící se písmena Písmena v textu se převracejí do správné polohy, pokud se uživatel přiblíží k panelu. Pokud je uživatel v dostatečné vzdálenosti, zobrazí se reklama.
Ilustrace 11: Obrácený text počátek scénáře
Ilustrace 14: Uživatel přichází blíže
Ilustrace 12: Uživatel přichází blíže
Ilustrace 13: Uživatel přichází blíže
Ilustrace 15: Uživatel je v dostatečné vzdálenosti a je mu zobrazena reklama
Poskládej si slovo Tento mockup byl z důvodu náročné interakce s panelem modelován v situaci reálné velikosti. Uživatel má zobrazen obrázek a má pomocí zpřeházených písmen poskládat slovo (to, co je na obrázku). Uživatel najíždí rukou na písmena - pohyb jeho ruky je snímán a přenášen na panel
jako kurzor. Při najetí na písmeno se kurzor animuje zavírající a otvírající se dlaní. Pokud uživatel zavře dlaň, uchopí písmeno a může jím volně přetahovat. Pokud dlaň otevře, písmeno pustí. Na tomto mockupu je použit obrázek hrocha.
Ilustrace 16: OHRCH a zaujatý uživatel
Ilustrace 17: Uživatel mění pořádí písmen
Ilustrace 19: Uživatel dále přemisťuje písmena
Ilustrace 18: Uživatel složil slovo správně a byla mu zobrazena reklama
Testování Low Fidelity modelu Model byl po stránce funkčnosti otestován členy týmu. Testování se neslo v neformálním duchu a jeho hlavním učelem bylo identifikovat nelogičnosti návrhu, případně problémy uživatele v reálném nasazení. Výstupem testování bylo několik zpřesňujících zjištění:
Oddělit rozloučení od přechodu do klidového režimu pauzou (stmívající se nebo černou obrazovkou) Pro scénář „Poskládej si slovo“ vybírat jednoduchá slova
Byl také identifikován důležitý problém použitelnosti vztahující se ke scénáři „Poskládej si slovo“. Protože se počítá s tím, že s panelem budou interagovat i děti, je zapotřebí umístit kameru panelu do rozumné výšky. V případě, že bude kamera špatně umístěna, může dojít k velkým rozdílům v korespondenci ruky uživatele a kurzoru. Toto může děti mást.
Ilustrace 20: Malý uživatel může mít problém "dosáhnout" na kurzor
