Návrh uživatelského rozhraní (A4B39NUR)
[BBBCRF] UI pro crowdfunding D4 Autoři Jakub Špatný Tomáš Tušla
Tvorba prototypu V rámci iterace D4 byl vytvořen Hifi prototyp zabývající se webovým rozhraním aplikace Big Book Brotherhood firmy DRAWetc. Prototyp byl vytvořen v Axure RP 7.0 a pro účely finálního testování byl následně vyexportován do formátu HTML a javascriptu.
Popis prototypu V tomto prototypu byly implementovány funkcionality představené v rámci dokumentů D2 a D3, nicméně také došlo k dalšímu rozšíření o funkce, které jsou definované dále v tomto dokumentu.
1.
Navigační lišta
Hlavním navigačním prvkem celé aplikace je horní lišta, která je jednotná v rámci celého prototypu. Nepřihlášenému uživateli nabízí lišta možnost návratu na úvodní obrazovku, registraci či přihlášení. Přihlášenému uživateli jsou zobrazeny odkazy na úvodní stranu, stránku oblíbených děl, knihovnu zakoupených děl, stránku vlastní tvorby, včetně rychlého odkazu pro vložení nového díla. Dále lišta obsahuje jméno aktuálně přihlášeného uživatele, které slouží pro přechod do profilu uživatele, a v poslední řadě tlačítko pro odhlášení. V případě, že je přihlášený uživatel administrátorem z firmy Drawetc, je horní lišta rozšířena o odkaz na stránku určenou pro administraci obsahu.
2.
Úvodní obrazovka
Hlavním úkolem úvodní stránky prototypu je nabídnout uživateli výběr komixů, které by ho mohly zaujmout. V horní polovině stránky jsou nabízeny komixy formou playlistů, které byly vytvořeny administrátory firmy Drawetc. Ve spodní části obrazovky jsou zobrazeny nově přidané komixy od autorů, které si uživatel sám vložil do oblíbených. Lišta na levé straně umožňuje filtrovaní děl podle jednotlivých kategorií. Napravo může uživatel využít možnosti rychlého fulltextového hledání, případně se přesunout na pokročilé vyhledávání.
3.
Kategorie komixů
Jak již bylo řečeno, aplikace umožňuje zobrazení seznamu komixů podle konkrétní kategorie. Tento seznam lze řadit (například dle hodnocení či data přidání) nebo dále filtrovat. Filtrovat je možné podle názvu komixu, autora, konkrétních tagů či jazyka.
4.
Vyhledávání
Mimo rychlého fulltextového hledání, systém podporuje pokročilé vyhledávání, kde může uživatel specifikovat název díla, jméno autora, výčet tagů či požadovaný jazyk. Výsledky hledání lze poté řadit dle hodnocení nebo abecedně dle názvu díla či autora.
5.
Detail komixu
V detailu komixu se zobrazují základní informace o vybraném komixu jako je jeho jméno, jméno autora, popis, hodnocení, tagy, a jazyky, ve kterých je komix dostupný. Jméno autora zároveň také slouží jako odkaz na stránku tvůrce aktuálního komixu. V detailu jsou dále zahrnuty ukázky z díla, mezi kterými lze přepínat pomocí tlačítek vlevo a vpravo. Následně stránka také uživateli umožňuje ohodnotit komix kliknutím na příslušný počet hvězdiček.
Dále následují tlačítka pro online čtení a offline stažení komixu. Při přejetí myší na tyto tlačítka se zobrazí podmenu umožňující výběr z podporovaných jazyků. V případě, že uživatel nemá zaplacené předplatné, budou místo těchto tlačítek zobrazeny tlačítka pro předplacení nebo zakoupení komixu.
Na stránce se dále nachází tlačítko podpořit autora, po kliknutí na něj se zobrazí okno, umožňující komix buď za předem určenou cenu koupit, nebo autora podpořit zvolenou částkou.
Ve spodní části stránky se nacházejí komentáře, které je možné řadit podle hodnocení či data vložení komentáře. Poslední prvkem stránky jsou odkazy na podobné komixy.
6.
Detail Autora
V hlavičce obrazovky detailu autora je možné vyčíst základní informace jako jméno autora, počet vydaných děl, nebo počet příznivců. Jediné tlačítko na této stránce umožňuje přidání autora do oblíbených, což zaručí, že nová díla tohoto autora budou uživateli zobrazena na úvodní stránce v sekci “Nově přidané komixy”. Dále pak stránka obsahuje seznam autorových děl.
7.
Oblíbené komixy/autoři
Funkce oblíbených umožňuje uživatelům ukládání komixů do předem definované složky, případně si uživatelé mohou vytvořit složky vlastní. Tyto složky jsou zobrazeny na stránce Oblíbené, která je přístupná ze všech obrazovek prototypu pomocí stejnojmenného tlačítka v horní liště. Komixy lze mezi jednotlivými složkami přesouvat buď tlačítkem přirozenějšího gesta draganddrop.
, nebo pomocí uživatelům
8.
Knihovna komixů
Knihovna komixů obsahuje komixy, které si uživatel přímo zakoupil, tedy například v případě, že nemá zaplacené předplatné. Pro snadnější přístup jsou tyto komixy dělené do dvou kategorií: Nepřečtené a Archiv. Pro přesun komixu do archivu je nutné v jeho detailu zvolit možnost “Označit jako přečtený”.
9.
Přidání / Úpravy komixu
Prototyp umožňuje jak přidávání, tak úpravu již existujících komixů. Na obrazovku pro přidání komixu se lze dostat dvěma způsoby. První možností je průchod přes obrazovku vlastní tvorby s tlačítkem “Přidat nový komix”, z ostatních obrazovek aplikace je však rychlejší využít příslušné tlačítko v horní liště aplikace.
Pro přidání nového komixu je nejprve nutné definovat jeho název, popis a cenu. Dále je potřeba dílo charakterizovat pomocí slovních tagů. Při kliknutí do pole pro zadávání tagů se zobrazí nápověda tagů. Následně lze přidat soubory a ukázky komixu kliknutím na příslušná tlačítka +. V prototypu přidání souborů proběhne automaticky, jelikož Axure neumožňuje reálné otevření dialogového okna pro výběr souboru.
Po potvrzení přidání nového komixu je uživatel přesměrován na stránku vlastní tvorby, kde je informován o úspěšném vložení komixu hláškou v dialogovém okně.
10.
Správa playlistů
První funkcionalitou v části prototypu pro administraci portálu ze strany firmy Drawetc je obrazovka pro tvorbu a správu playlistů děl, které je možné uživatelům zobrazit na úvodní stránce aplikace. Při tvorbě nového playlistu je nutné specifikovat jeho jméno, zvolit zda má být zobrazen na hlavní stránce a přidat komixy, které má playlist obsahovat. Komix je možné do playlistu přidat pomocí dialogu hledání na obrazovce tvorby playlistu, případně může uživatel přidat komixy přímo z jejich detailu.
V rámci správy již vytvořených playlistů můžeme jednotlivé listy děl skrývat, respektive zobrazovat na úvodní stránce, a také můžeme zvolit pořadí, ve kterém tam mají být zobrazeny. V případě potřeby je také možné playlisty vyhledávat, upravovat či mazat.
11.
Přidávání překladů
Další sekcí v části prototypu pro administraci je obrazovka pro přidaní překladů k již existujícím komixům v aplikaci. Konkrétní komix, pro který chce uživatel přidat překlad lze vybrat buď v detailu komixu tlačítkem “Přidat překlad”, nebo na stránce pro přidání překladu pomocí vyhledávaní. Pro vložení nového překladu je nutné definovat jeho jazyk, a následně vložit přeložený popis a soubory komixu. Pokud by uživatel chtěl přidat více překladů, může přidat další jazyk pomocí tlačítka “Přidat jazyk”.
12.
Nastavení cen
Obrazovka Nastavení cen umožnuje spravovat ceny nabízených služeb a produktů na jednom místě. V prototypu je možné nastavit cenu předplatného, minimální cenu komixu, výplata autorovi za 1 přečtení komixu a minimální hranice pro provedení výplaty. Při změne ceny jakékoliv položky je uživatel vyzván pomocí dialogového okna k potvrzení této akce.
13.
Schvalování komixů
Aby nebylo možné do systému náhrát závadný obsah či například obsah chráněný autorskými právy, implementuje prototyp funkcionalitu pro schvalování komixů. Obrazovka pro schvalování komixů obsahuje dvě skupiny komixů čekající na schválení a již revidované komixy. Tlačítkem “REVIDOVAT” se uživatel přesune do detailu komixu, který je rozšířen o tlačítka “Zamítnout” a “Schválit”. V případě zamítnutí komixu je nutné aby uživatel popsal důvody k zamítnutí, tuto funkctionalitu však prototyp nepodporuje. Komix je navíc možné znovu revidovat i po jeho schválení či zamítnutí, případně lze zobrazit historie revizí.
14.
Předplatné
Správu předplatného je možné provádět na obrazovce profilu přihlášeného uživatele.
Po kliknutí na volbu “Prodloužit předplatné” je uživateli zobrazen formulář, kde uživatel musí vyplnit své platební údaje. Zároveň si také může vybrat, zda bude předplatné automaticky prodlužováno.
Po vyplnění všech údajů je zobrazena rekapitulace, po jejíž odsouhlasení dojde k posunutí času vypršení předplatného.
Implementační problémy, Tipy a triky Při implementaci prototypu postupně začal být problém s exponenciálně narůstající velikostí souboru projektu. Projekt byl také uspořádán tak, že v případech, kdy bylo nutné upravit hlavní panel, bylo nutné tyto změny ručně rozkopírovat do celého prototypu. Později byla nalezena možnost udělat část stránky jako Master , tedy jako objekt, který je v rámci projektu znovupoužitelný. Tím jsme dokázali snížit velikost souboru napolovic, a zároveň nebylo již nutné ručně kopírovat změny, protože se delegovaly automaticky. Při práci s měnícími se prvky v rámci jedné obrazovky se jsme pak hojně využívaly Dynamic Panel , tedy komponenty mající stav, který je možné jednotlivými událostmi měnit. Takto byly například implementovány obrázkové galerie na hlavní stránce aplikace či detailu komixu.
Stavový diagram Na základě prototypu byl vytvořen následující stavový diagram, který znázorňuje přechody mezi jednotlivými obrazovkami aplikace. Stavový diagram je ovšem zjednodušený a neobsahuje všechny hrany přechodů, neboť díky jednotné horní liště je možné se z jakékoliv obrazovky dostat na následující obrazovky: úvodní strana, oblíbené, knihovna, vlastní tvorba, přidání komixu a profil uživatele. Počátečním stavem diagramu je uzel Úvodní strana , koncovým uzlem může být kterákoliv obrazovka. Pro zlepšení přehlednosti byly uzly obarveny podle jednotlivých částí aplikace. Obrazovky týkající se čtení jsou v diagramu zbarveny tyrkysově, funkcionalita týkající se tvorby komixů je zbarvena zeleně a uzly administrativy jsou označeny oranžově.
Testování Cíle testování Cílem testování bylo jednak ověřit, že se podařilo opravit nedostatky lofi prototypu z předchozí, jednak pak ověřit nově přidané funkcionality a celkově také otestovat zvládnutí navigace v rámci celého systému. Těmto požadavkům byly uzpůsobeny i testovací scénáře, které byly oproti předchozí iteraci méně konkrétní a více se orientovaly na cílový stav, tudíž méně vedly uživatele konkrétní cestou a raději dávaly více prostoru jeho způsobu myšlení.
Testovací scénáře Testovací scénáře byly vytvořeny dva první se zabývá funkcionalitou týkající se tvorby a čtení komixů, druhá se zaměřuje výhradně na administrace systému.
Čtení a tvorba 1) Přihlašte se do aplikace [uživatelské jméno:
[email protected] heslo: heslo] 2) Přidejte nový komix [Název: Superman, tag: Superhrdinský, jazyk: angličtina, cena: 5€, přidejte soubor komixu a 2 soubory ukázek]
3) Editujte komix Superman, odeberte ukázky a přidejte nové 4) Nalezněte komix Superman 1 [ohodnoťte 7 hvězdičkami, přidejte do oblíbených do složky Marvel, přečtěte si komix online v angličtině a podpořte ho částkou 5€] 5) Dostaňte se na profil autora komixu a přidejte si ho do oblíbených 6) Přejděte do svých oblíbených a přesuňte komix Superman 1 do složky Ostatní 7) Prodlužte si předplatné na svém účtu 8) Odhlaste se
Administrace 1) Přihlašte se jako administrátor [uživatelské jméno:
[email protected] heslo: heslo] 2) Přidejte překlad pro komix Superman 10 [jazyk: EN, popis: “Best Superman”, přidejte 1 soubor]. 3) Vytvořte playlist komixů, který se zobrazí na úvodní stránce [název: Supermani, s komixy Superman 1,2,3] 4) Nastavte výši ceny předplatného na 14.99€ a minimální cenu komixu 4€. 5) Podívejte se, zda je ve frontě komixů čekající na schválení nějaký komix. Pokud ano, pak tento komix schvalte.
Průběh testování Participant 1 Věk
22
Pohlaví
Muž
Povolání
Student
Znalost ovládání počítače
Pokročilá
Prostředí
klidné prostředí
Testovací setup
Počítač myší, klávesnicí a monitorem s rozlišením 1920x1080. Prohlížeč Mozilla Firefox
Participant v průběhu testovacího scénáře na čtení a tvorbu nenarazil na žádný výrazný problém. Pro přidání komixu podle očekávání použil zkratku pomocí tlačítka “+”, které se nachází v horní liště vedle tlačítka “Vlastní tvorba”. Pro přesun oblíbených intuitivně využil funkcionalitu drag&drop, ale také se ujistil, že ikonka
by také splnila požadovanou akci.
V rámci administrace se participant pokoušel přidat překlad skrze detail komixu, tento scénář však prototyp plně nepodporuje. Poté participant úkol provedl korektně přes menu administrace.
Participant 2 Věk
23
Pohlaví
Muž
Povolání
Student
Znalost ovládání počítače
Pokročilá
Prostředí
Středně hlučné prostředí
Testovací setup
Notebook s myší a rozlišením 1366x768, Prohlížeč Mozilla Firefox
Participant č. 2 také pro přidání komixu použil zkratkovou ikonku v horní liště. V detailu komixu by však uživatel preferoval rozdělení akcí nákupu a donate na 2 separátní tlačítka. Pro přesun komixu mezi složkami oblíbených použil participant také gesto drag&drop.
Menší zásek nastal pouze při akci prodloužení předplatného. Tlačítko na prodloužení předplatného uživatel na úvodní stránce profilu přehlédl a místo toho ji hledal ve finančních informacích. V rámci scénaře pro administraci se i druhý participant pokoušel přidat překlad ke komixu přes jeho komixu. Dále, při přidávání překladu participant nejprve považoval tlačítko pro přidání dalšího jazyka za tlačítko pro uložení přidaného překladu.
Nálezy a doporučení Společné tlačítko pro nákup a příspěvek Nález: Participanta zmátlo společné tlačítko pro nákup a příspěvek autorovi. Doporučení: Rozdělit funkcionalitu na dvě oddělená tlačítka “Koupit” a “Přispět autorovi”. Každé tlačítko by tedy mělo také zobrazit zvláštní dialog pro konkrétní akci, ne společný jak je tomu nyní.
Nevýrazné tlačítko pro předplatné Nález: Participant úplně přehlédl tlačítko pro prodloužení předplatného, ač se toto tlačítko nachází na první stránce uživatelského profilu.
Doporučení: Lépe oddělit sekci “Předplatné”, případně zvýraznit konkrétní tlačítko.
Matoucí tlačítko pro přidání dalšího překladu Nález: Participanta zmátlo tlačítko “Přidat jazyk”, od kterého očekával, že uloží nově přidaný překlad. Ve skutečnosti však přidává další jazyk překladu. Doporučení: Přesunout toto tlačítko na začátek stránky a změnit popisek na “Přidat další překlad”.
Dokumentace pro vývojáře Funkční požadavky Funkční požadavky jsou rozděleny do 3 kategorií dle priority. Požadavky s vysokou prioritou popisují funkcionalitu, která je pro běh budoucího systému absolutně nezbytná. Požadavky se střední prioritou nejsou nezbytné pro základní běh systému, rozšiřují ho však o další možnosti monetizace obsahu. Funkcionalita ohodnocená nízkou prioritou není pro systém nezbytná, nicméně doplňuje aplikaci o funkcionalitu, která uživatelům usnadní práci se systémem.
Vysoká priorita ● ● ● ● ● ● ● ● ● ●
Registrace Možnost registrace nových uživatelů. Přihlášení Možnost přihlášení registrovaných uživatelů. Přidání komixů Možnost vložit nový komix do systému. Zobrazení komixů Možnost zobrazit detail komixu. Čtení online Možnost čtení komixů online. Čtení offline Možnost stažení komixů pro offline čtení. Revize komixů Možnost revize nově přidaných komixů předtím než jsou zobrazeny koncovým uživatelům aplikace. Správa cen Možnost nastavení cen služeb administrátory systému. Předplatné Implementace subscription modelu, včetně platby platební kartou. Vyhledávání Možnost vyhledávání komixů fulltextově nebo pomocí rozšířených kritérií (jméno komixu, autor, tagy, jazyk).
Střední priorita ● ● ● ● ● ●
Playlisty Možnost tvorby, editace a zobrazení playlistu komixů. Zakoupení komixu Možnost zakoupení komixu za předem určenou částku. Knihovna Přehled zakoupených komixů. Donate Možnost přispět autorovi za dílo libovolnou částkou. Přidání překladu Možnost přidání překladu k již existujícímu komixu. Uživatelský profil Možnost zobrazení a editace uživatelských údajů.
Nízká priorita ● ● ● ● ●
Oblíbené komixy Možnost přidávání komixu do oblíbených. Složky oblíbených Možnost správy oblíbených do složek. Oblíbení autoři Možnost přidání autorů do oblíbených Nově přidané komixy Zobrazení nově přidaných komixů od oblíbených autorů. Sdílení na sociální sítě Možnost sdílení odkazu na konkrétní komix na sociální sítě (Facebook, Twitter, Google+).
Specifikace designu interakce Při práci s komixy a obrázky je vhodné umožnit uživatelům pracovat s těmito objekty pomocí gesta drag&drop. Obzvláště důležité je to v těchto případech: 1) přidávání/editace komixu umožnit změnu pořadí nahraných souborů a ukázek 2) oblíbené přesun komixů mezi složkami oblíbených 3) playlisty změna pořadí komixů v playlistu Nicméně by měla být uživatelům také ponechána možnost provádět tyto úpravy pomocí standardních ovládacích prvků. Dalším důležitým prvkem je nápověda tagů. Tato nápověda by se měla zobrazit poté, co uživatel klikne na příslušné textové pole určené pro zadávání tagů. Zobrazená nápověda by měla uživateli nabídnout nejčastěji používané tagy, které je možno rychle zadat kliknutím na název daného tagu. V případě, že uživatel začne psát vlastní tag, změní se výčet napovídaných tagů kontextově dle psaného vzoru.
Specifikace vizuálního designu Vzhled aplikace by měl být minimalistický. Primární barvou systému byla modrá barva, která se vyskytovala především v horní liště aplikace. Tato barva by mohla být ve finálním produktu rozšířena o doplňující sekundární barvu. Přesto by v rámci aplikace mělo být používáno méně barev, které jsou příliš kontrastní. Pro běžné operace v aplikaci (přidávání, odebírání, úpravy, zavření okna) by měly být používány ikonky, jejichž vzhled musí být v rámci celé aplikace jednotný, a to ve všech kontextech z důvodu zlepšení přehlednosti. Při najetí myší na ikonky by se měla zobrazit kontextová nápověda vysvětlující danou akci. Při najetí myší na miniaturu komixu na hlavní stránce, by se měla zobrazit zvětšenina náhledového obrázku s názvem komixu a jeho cenou. Při pokliku na ukázkách komixu by se měl daný obrázek zobrazit přes celou obrazovku, pro co nejlepší vizuální požitek.
Specifikace UX designu Finální aplikace by měla umožnit rychlý průchod nabízenou funkcionalitou k požadovanému cíli. Konkrétně je například nutné mít možnost co nejrychleji přidat nový komix, neboť to není akce s kterou by autoři chtěli ztrácet čas. Čtenáři by naopak měli mít možnost se rychle a jednodušše dozvědět o nově přidaných komixech, a to hlavně v případě jimi sledovaných autorů. Administrace systému by měla být flexibilní a umožnit více způsobů revize a administrace jednotlivých komixů.
