České vysoké učení technické v Praze Fakulta elektrotechnická
UI PRO UMĚLCE Návrh uživatelského rozhraní (A4M39NUR) – Hi-Fi prototyp
Autoři: Chvála Michal, Rubeš Lukáš Cvičící: Ing. Jan Balata ZS 2015/2016
Obsah High-Fidelity prototyp.............................................................................................................................................3 Technický popis.......................................................................................................................................................3 State transition network...........................................................................................................................................4 Popis prototypu........................................................................................................................................................5 Vložení díla..............................................................................................................................................................5 Upravení nahrávaného díla......................................................................................................................................7 Prohlížení si svých nahraných děl.........................................................................................................................10 Testování prototypu...............................................................................................................................................11 Příprava testu.........................................................................................................................................................12 Účastník 1..............................................................................................................................................................12 Účastník 2..............................................................................................................................................................13 Analýza nálezů......................................................................................................................................................14 Dokumentace.........................................................................................................................................................14
High-Fidelity prototyp Při tvorbě High-Fidelity prototypu jsme vycházeli z Low-Fidelity prototypu použitého v úloze D3. Opět zde popisujeme a testujeme hlavní scénáře průchodu:
Nahrání obrázku Upravení nahrávaného obrázku Prohlížení svých nahraných děl
V našem prototypu jsme měnili pár věcí, které nám vyplynuly z testování Low-Fidelity prototypu: Při ukládání obrázků do složek jsme změnili název z „nová složka“ na „Vytvořit novou galerii“. Uživatelé byli trochu zmateni z použité symboliky a mysleli si, že mohou nahrávat celé složky. To samozřejmě v našem prototypu nelze, neboť musíme kontrolovat, že nahraná díla jsou pouze určité soubory. Dále jsme u komentářů odstranili hvězdičky pro hodnocení děl a přidali možnost hodnotit komentáře. Uživatelé si nejprve mysleli, že hvězdičky v Low-Fidelity prototypu patří ke komentářům a celkově nerozuměli značení. Komentáře se nyní hodnotí stylem „palec nahoru/dolu“. Nakonec jsme změnili řazení komentářů na hlavní obrazovce tak, že se nyní řadí dle jednotlivých děl. Prototyp lze spustit otevřením souboru app.html ve webovém prohlížeči. Soubor se nachází v přiložené složce layout.
Technický popis Prototyp byl vytvořen v html, css a javascriptu za pomoci frameworku Semantic-UI. 1 Jako vývojové prostředí byl použit PhpStorm. Návrh rozhraní byl vyvinut pro webový prohlížeč Google Chrome. Správná funkčnost v jiných prohlížečích není zaručena. Rozhraní editace obrázku bylo vytvořeno pomocí html elementu canvas. Rotace využívá možnost canvasu rotovat obsah podle počátku souřadnicové soustavy. Jen je nutné před začátkem rotace posunout počátek soustavy do středu obrázku a poté zase zpět. Oříznutí bylo též implementováno pomocí canvasu. Tentokrát však bylo nutné vložit dva nad sebe. Spodní pro vykreslení obrázku a vrchní pro zobrazení výběrového obdélníku. Obdélník musí být smazán a znovu vykreslen po každém pohybu myši. Proto je nutné použít dva canvasy. Jinak by byl mazán i obrázek. Opravený obrázek se nijak neukládá. Pro účely prototypu to není třeba. V budoucnu by ovšem neměl být problém upravený obrázek uložit a odeslat na server.
1 http://semantic-ui.com/
State transition network Na diagramu jsou zobrazeny jednotlivé přechody mezi stavy aplikace. Ze všech stavů se lze dostat zpět do původního stavu „Dashboard“, pro přehlednost ale tuto skutečnost nezobrazujeme.
Popis prototypu Low-Fidelity prototyp jsme popisovali detailně v úloze D3, kdy se náš High-Fidelity v hlavní funkčnosti neliší. Opět budeme popisovat nejzajímavější části, především kvůli vizuální stránce High-Fidelity prototypu. Popis prototypu jsme si rozdělili do několika částí popisující scénáře průchodu. Opět začneme ukázkou hlavní obrazovky, kde jsme provedli již okomentované změny v řazení a zobrazení komentářů.
Vložení díla Při vkládání děl musí uživatel kliknout na tlačítko „Vložit dílo“. Zobrazí se mu obrazovka, kde si postupně nahrává obrázky. Počet nahrávaných děl najednou omezený není. Z důvodů urychlení vývoje a testování se vždy jako nahrané soubory objeví dva obrázky zakomponované v prototypu. Dalším krokem je stisknutí tlačítka „Pokračovat“. Zde v druhé fázi nahrávání si uživatel musí zvolit, zda se jedná o komiks, či ilustraci. V případě ilustrací si poté vybere galerii, do které svůj obrázek uloží. V opačném případě při ukládání komiksu musí ještě autor vyplnit údaje o nahrávaném díle, především zvolit žánr.
Upravení nahrávaného díla Naší aplikaci jsme navrhovali jako webové rozhraní, které je přístupné především z počítače. Také jsme předpokládali, že autoři komiksů budou disponovat softwarem na úpravu obrázků. V naší aplikace jsme se zaměřili pouze na drobnější úpravy velikosti a tvaru. Úprava obrázku je možná při nahrávání děl. Když uživatel najede myší na nahrané dílo, objeví se kontextové okénko s dalšími možnostmi k danému dílu. Tato situace je vyobrazena na druhém obrázku. Po kliknutí na tlačítko upravit se objeví nová stránka, kde si uživatel může vybrat ze dvou možností, obrázek „Oříznout“ nebo „Rotovat“. Při ořezávání obrázku si uživatel tažením myši nakreslí obdélník a klepnutím na tlačítko „Oříznout“ provede změny. Takto může měnit rozměry obrázku libovolně dlouho, dokud neklepne na tlačítko „Uložit změny“ nebo „Zpět“. Při rotaci má uživatel na výběr pouze dvě tlačítka v podobě šipek reprezentující rotaci po nebo proti směru hodinových ručiček.
Prohlížení si svých nahraných děl Posledním scénářem je případ, kdy si uživatel chce prohlédnout svá nahraná díla a získat tak zpětnou vazbu od čtenářů. V hlavní nabídce si zvolí možnost „Moje díla“ a zobrazí se mu seznam všech jeho děl, které do aplikace nahrál. Po klepnutí na konkrétní dílo se uživateli zobrazí detailní popis. Pod položkou „Obsah“ si může prohlédnout své dílo a v záložce „Komentáře“ si přečíst hodnocení čtenářů.
Testování prototypu Při testování jsme chtěli ověřit funkčnost a hlavně použitelnost. Opět jsme testovali stejné průchody aplikací, jako v předešlé úloze
Nahrát obrázek Upravit nahrávaný obrázek Zjistit, jak si jejich komiks vede u čtenářů (hodnocení, počet přečtení/shlédnutí, komentáře)
Zároveň jsme se také zaměřili na konkrétní změny, které jsme oproti minulému prototypu provedli. Cílem tedy bylo zjistit, zda jsme nalezené nedostatky správně odstranili a nevytvořili další nejasnosti.
Příprava testu
K testu jsme přizvali dva lidi, kteří mají alespoň minimální zkušenost s kreslením obrázků, či komiksů. Účastníci měli za úkol projít celým prototypem a komentovat jednotlivé kroky. S těmito podmínkami souhlasili pouze za předpokladu, že nikde nebudeme zveřejňovat jejich identitu. Souhlasili s pořízením audio nahrávky, ale pouze pro účely kvalitnějšího zpracování výsledků, a opět bez zveřejňování. Jelikož se jedná o webovou aplikaci, test byl prováděn na počítači v domácím prostředí. Pro dokumentaci testů byl použit záznam dění na obrazovce počítače a záznam zvuku. Participanti byli seznámeni s účelem aplikace a jejich rolí. Poté byli požádáni, aby prošli aplikaci a komentovali, co dělají a vidí na obrazovce. Pokud účastník některý z úkolů nesplnil v rámci volného průchodu, byl následně vyzván k jeho splnění.
Účastník 1 Prvním účastníkem byl muž ve věku kolem 35 let, pracuje jako stavební inženýr a komiksy kreslí ve volném čase.
Hlavní obrazovka Úvodní obrazovka mu přišla jednoduchá a přehledná. Nebyl si ale jistý, zda položka „Novinky“ patří k jeho dílům nebo k dílům ostatních autorů.
Vkládání děl Jelikož jsou na hlavní obrazovce pouze dvě tlačítka, neměl participant problém klepnout na tlačítko „Vložit dílo“ na první pokus. Poté co, nahrál soubory, byl vyzván k tomu, aby jeden z vložených obrázků upravil. Tento úkol trval chvíli déle, protože participant nemohl najít tlačítko upravit dílo. Poté ale zkoušel přejíždět myší po obrazovce a danou možnost nalezl. Po prvním účastníkovi jsme požadovali, aby zkusil obrázek oříznout a vše proběhlo bez problémů. Druhá fáze nahrávání proběhla také bez jakýchkoliv zádrhelů. Participant přidělil svému obrázku kategorii „Ilustrace“ a dílo úspěšně nahrál.
Prohlížení děl Účastník se proklikl z hlavní obrazovky do galerie a poté si rozklikl detail nahraného díla. Přečetl si pod dílem komentáře a k celkovému vzhledu neměl připomínky.
Připomínky První připomínka byla, co znamená tabulka „Novinky“. Druhým nedostatkem participant shledal skutečnost, že aplikace nijak neohlásí uložení díla.
Účastník 2 Druhým účastníkem je slečna ve věku 19 let, která stále studuje střední školu a chtěla by pokračovat ve studiích grafiky.
Hlavní obrazovka Na úvodní obrazovce by si účastnice představovala galerii nových obrázků od jiných autorů. Přišla jí škoda, že jsme vytvářeli aplikaci pouze z pohledu autorů.
Vkládání děl Nahrávání souborů se i zde obešlo bez význačných komplikací. Tentokrát jsme po účastnici chtěli, aby obrázek otočila o libovolný úhel. Ihned si všimla možnosti „Upravit“ a dala se do práce. U druhého participanta jsme vyžadovali, aby obrázek uložila pod kategorií „Komiks“.
Prohlížení děl Při prohlížení obrázků hned účastnice poznamenala, že by bylo vhodné mít u svých nahraných děl možnost náhledu. Zbytek pak proběhl bez komplikací.
Připomínky První připomínkou byla univerzálnost naší aplikace a snaha přiblížit to i autorům čtenářům. Dále se účastnici nelíbilo, že při ukládání děl pod kategorií „Komiks“ vybírá z omezeného počtu žánrů. Líbila by se jí širší nabídka a také možnost vytvořit si svojí novou kategorii.
Analýza nálezů První participant si stěžoval na nedostatečnou interakci s uživatelem, konkrétně na neohlášení nahraného díla. Takovýchto informačních dialogů by mohlo být v naší aplikaci více, ať už se to týká nahrání nebo upravení díla. Zároveň také nepochopil význam „Novinek“. S podobným problémem jsme se setkali i u druhého participanta a shodli jsme se na tom, že je potřeba mít všude náhledy děl. Zároveň je také vhodné přidat na úvodní obrazovku novinky ostatních autorů. Sekce Novinky byla původně zamýšlena pro zobrazování informací vkládaných administrátory aplikace. Jako například pozvánky na různé akce, informace o vývoji aplikace a podobně. K nepochopení došlo pravděpodobně z důvodu nevyplnění konkrétních textů u samotných novinek. Nicméně myšlenka, že by každý autor mohl vytvářet novinky o své tvorbě, je zajímavá a mohla by se použít v dalším vývoji aplikace. V nynější podobě má uživatel při ukládání komiksu na výběr pouze omezený počet žánrů. Vhodné by bylo přidat možnost vytvořit si nový žánr, který by nejlépe vystihl autorovo dílo. Zároveň také nikde není řečeno, že komiks má pouze jeden žánr. Po vybrání jednoho žánru by se uživateli měla opět zobrazit daná nabídka, kde by si mohl vybrat současně i jinou možnost.
Dokumentace Funkcionální požadavky Dokumentaci jsme rozdělili na dvě části, a to na nutné a vhodné požadavky. Nutné požadavky vycházejí z funkčnosti a z požadavku uživatelů. Do druhé kategorie spadají méně důležité prvky, které jsou především bonusem.
Nutné
Neustále zobrazovat tlačítko Dashboard a Nastavení Registrační a přihlašovací formulář pro uživatele Správa uživatelského účtu Statistika uživatele Možnost nahrát a spravovat nahraná díla Možnost si číst a reagovat na komentáře Možnost prohlížet si komiksy od jiných uživatelů
Vhodné
Na úvodní obrazovce přidat novinky jiných autorů Možnost komunikovat s ostatními čtenáři/autory jinak než přes komentáře Možnost přátelit se s jinými uživateli (po vzoru Facebooku) Dostávat upozornění na komentáře Možnost vytvářet si nové žánry komiksu
Interakce Aplikace je určeno pro osobní počítače, prototyp jsme nepřispůsobovali mobilním zařízením. Aplikace se ovládá pomocí klávesnice a myši. Na zařízeních s dotykovou obrazovkou je možné nahradit myš za dotyk.
Vizuální design Vizuální stránku aplikace uživatelé příliš nehodnotili, neboť není tak důležitá, jako její funkčnost. Barvu tlačítek a horní lišty jsme zvolili tmavě modrou, aby se vizuálně odlišily od zbytku, většina tlačítek obsahuje textový popis. V každé části naší aplikace umožňujeme uživateli vrátit se na úvodní obrazovku nebo otevřít nastavení. Na úvodní obrazovce jsou sekce „Novinky“ a „Nejnovější komentáře“ zabalovací, aby případně uživatele nerušily.
UX design Naší hlavní snahou bylo zpříjemnit uživatelům sdílení komiksů s okolním světem. Prioritou tedy byla rychlost a jednoduchost. Uživatelům by měl být na první pohled jasný význam jednotlivých položek a orientace mezi nimi. Aplikace by měla být součástí každodenního života jak autorů, tak čtenářů.
