ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE Fakulta elektrotechnická Deliverable D2 [NIC-WEB-] Redesign UI mojeid Předmět: [A4M39NUR] Návrh uživatelského rozhraní Zpracovali: Petr Liška, Jan Šrogl, Petr Štěpán Vedoucí: Ing. Zdeněk Míkovec, Ph.D Zadavatel: Petr Závodský [cz.nic] Datum: 28. 0.204
Obsah Úvod... 3 Use cases... 3 Scenarios... 3 # - Chci se zaregistrovat... 3 #2 Chci se přihlásit... 3 #3 Chci se podívat na seznam služeb, kam jsem se přihlásil... 3 #4 Chci se podívat na seznam služeb, kam se mohu přihlásit... 3 #5 Chci zobrazit vizitku... 3 #6 Chci si vyplnit údaje v profilu a zjistit význam pole "Identifikátor MPSV"... 4 #7 Chci zjistit stav účtu... 4 #8 - Na e-shopu mě zaujalo "přihlásit přes mojeid", klikám na to a zjišťuji, že je potřeba se registrovat... 4 Storyboards... 4 #5 - Chci zobrazit vizitku... 5 #6 - Chci si vyplnit údaje v profilu a zjistit význam pole "Identifikátor MPSV"... 5 #8 - Na e-shopu mě zaujalo "přihlásit přes mojeid", klikám na to a zjišťuji, že je potřeba se registrovat... 6 Hierarchical Task Analysis... 6 Analýza průchodů službou na webu mojeid.cz... 6 Návrh zlepšení průchodů službou na webu mojeid.cz... 8 Analýza průchodů službou na webových službách podporujících přihlášení přes mojeid... 9 Návrh zlepšení průchodů službou na webových službách podporujících přihlášení přes mojeid... 0 Vizualizace možných návrhů pomocí paper mock-up... Informační ikony u vstupních polí... Informace o stavu účtu v horní části obrazovky... 2 Nové rozložení menu... 3 2
Úvod V předchozí deliverable tým zanalyzoval a popsal možné problémy služby mojeid. Uživatelé si stěžovali zejména na neintuitivní značení položek. Dalším problémem byla složitá navigace na některé sekce profilu. Všechny tyto problémy a několik dalších je dále zpracováno v tomto dokumentu. Use cases Na základě zpracování získaných dat získaných v rozhovorech se stávajícími i novými uživateli služby mojeid bylo stanoveno následujících osm případů užití: # - Chci se zaregistrovat #2 - Chci se přihlásit #3 - Chci se podívat na seznam služeb, kam jsem se přihlásil #4 - Chci se podívat na seznam služeb, kam se mohu přihlásit #5 - Chci zobrazit vizitku #6 - Chci si vyplnit údaje v profilu a zjistit význam pole "Identifikátor MPSV" #7 - Chci zjistit stav účtu #8 - Na e-shopu mě zaujalo "přihlásit přes mojeid", klikám na to a zjišťuji, že je potřeba se registrovat Scenarios # - Chci se zaregistrovat Uživatele zaujme možnost přihlašovat se na různých stránkách se stejnými údaji. Rozhodne se tedy prozkoumat tuto možnost přihlašování a navštíví stránku https://www.mojeid.cz/. Zde si zvolí možnost Založit účet mojeid a vyplní všechny pole v dotazovacím formuláři. Pokračuje zmáčknutím tlačítka Založit účet a je přesměrován na svou domovskou stránku ve svém profilu. #2 Chci se přihlásit Uživatel chce využít službu mojeid, ale nejdříve je potřeba se přihlásit. Protože chce službu využít na konkrétních stránkách, tak na nich zvolí záložku Přihlásit přes mojeid, dále je pak přesměrován do přihlašovacího formuláře, kde je vyzván k vyplnění všech ověřovacích polí. Následně stiskne tlačítko přihlásit se a objeví se ve svém profilu a může dále službu využívat. #3 Chci se podívat na seznam služeb, kam jsem se přihlásil Uživatel se úspěšně přihlásil do služby mojeid a nachází se v základní obrazovce svého profilu. Přejde do sekce Nastavení. Zde, po zorientování se, upře svoji pozornost na podsekci Předávání údajů a zmáčkne tlačítko Změnit. Následně se uživatel ocitne na stránce s přehledem služeb, do kterých se přihlásil. #4 Chci se podívat na seznam služeb, kam se mohu přihlásit Uživatel se zajímá o službu mojeid, ale rád by se před založením účtu podíval, kde všude může tuto službu využívat. Proto si načte domovskou stránku https://www.mojeid.cz/ a hledá, kde tyto informace najde. Po chvíli hledání kliká na tlačítko Pro uživatele a následně volí záložku Katalog služeb s mojeid. Zobrazí se mu seznam webů, kde je tato služba podporována a uživatel se rozhodne službu založit. #5 Chci zobrazit vizitku Uživatel služby se rozhodl sám sebe propagovat na internetu. Je přihlášen do služby a nachází se na hlavní stránce profilu. Nikde bohužel nevidí nějaký odkaz, který by ho dovedl k jeho vizitce. 3
Nezbývá, než postupně projít všechny položky hlavního menu, dokud nenarazí na položku Veřejný profil. Po ocitnutí se v sekci veřejný profil uživatel musí profil nejprve aktivovat a až pak kliknout na položku Váš veřejný profil. Následně dojde k otevření veřejného profilu v novém okně. V případě, kdy uživatel veřejný profil neaktivuje, sice dojde k otevření nového okna, zobrazí se však pouze informace o registraci této stránky v rámci domény poskytovatele služby mojeid. #6 Chci si vyplnit údaje v profilu a zjistit význam pole "Identifikátor MPSV" Uživatel je přihlášen do služby mojeid a nachází se v sekci editace profilu. Je zmaten z významu některých polí (jmenovitě: Identifikátor MPSV ). Nikde bohužel nevidí žádný popisek, či odkaz, který by mohl význam, či důvod vyplnění tohoto pole, objasnit. Nezbývá mu, než zkusit dohledat tuto položku na internetu, popřípadě ji ponechat nevyplněnou. #7 Chci zjistit stav účtu Uživatel touží zjistit, na které úrovni se v současné době nachází jeho profil. Přihlásí se do služby a ocitne se na základní obrazovce svého profilu. Zde nikde nemůže informace o svém účtu najít, a proto zkouší přejít do položky Nastavení. Zde již je uživatel konfrontován s položkou Stav účtu, avšak v případě ne-zcela aktivovaného účtu se mu zobrazí pouze textové pole s popiskem PIN3. Uživatel je lehce zmaten z tohoto pojmu a aktuální stav svého profilu se nedozví. Nedozví se také, k čemu mu případná aktivace může být prospěšná. #8 - Na e-shopu mě zaujalo "přihlásit přes mojeid", klikám na to a zjišťuji, že je potřeba se registrovat Uživatel se od kamarádů doslechl o službě mojeid, později, když byl na konkrétní stránce, si všiml možnosti Přihlásit se přes mojeid a vzpomněl si na výhody, které mu kamarádi pověděli. Rozhodl se tedy, že si založí účet a kliknul na tlačítko Přihlásit se přes mojeid. Zde však nikde neviděl možnost nechat si vytvořit účet. Nechal si tedy přes Google vyhledat domovskou stránku s mojeid. Poté, co ji vyhledal, na ni vstoupil a vytvořil si svůj profil pomocí záložky Založit účet mojeid. Po založení se vrátil na svou stránku a pokračoval ve svém plánu nakoupit si zboží. Storyboards Pro vizualizaci klíčových problémů tým vypracoval sadu storyboardů. Tyto storyboardy vystihují klíčové okamžiky interakce mezi uživatelem a službou mojeid, ať už v současném stavu, či po uživateli zamýšlených zlepšeních. 4
#5 - Chci zobrazit vizitku #6 - Chci si vyplnit údaje v profilu a zjistit význam pole "Identifikátor MPSV" 5
#8 - Na e-shopu mě zaujalo "přihlásit přes mojeid", klikám na to a zjišťuji, že je potřeba se registrovat Hierarchical Task Analysis V této části je zobrazen hierarchický model akcí ve službě mojeid (nejvíce pozornosti bylo věnováno části po přihlášení). Celý rozsah problémů use-cases byl rozdělen do dvou hlavních kategorií akce na webu mojeid.cz a akce na webových službách podporujících přihlášení přes mojeid. Pro obě dvě kategorie byly zpracovány HTA zvlášť. Vždy následují dva modely za sebou, jeden stávající a druhý s navrženými změnami. Analýza průchodů službou na webu mojeid.cz Jako první je uvedena stromová struktura webu mojeid.cz v současném stavu, za ní následují jednotlivé plány. 6
. Založit účet mojeid.. Založit..2 Facebook..3 Google..4 LinkedIn.2.3 Jdu do.2. Heslo.2.2 Certifikát.2.3 Heslo + heslo (OPT).4.4...5 Založit z registru domén..x. Vyplnění poĺı a Plány (současný stav): Profil.3.. profilu.3.2.3.3.3.4.3.2. Stav účtu.3.2.2 účtu.3.2.3 metody.3.2.4 údajů.3.4. profil #- Chci se zaregistrovat... OR..2 OR..3 OR..4 OR..5..X. #2 - Chci se přihlásit IF uživatel není registrován: Proveď plán #.2.2. OR.2.2 OR.2.3 #3 - Chci se podívat na seznam služeb, kam jsem se přihlásil.3.3.2.3.2.4 #4 - Chci se podívat na seznam služeb, kam se mohu přihlásit.4.4. 7
#5 - Chci zobrazit vizitku.3.3.4.3.4. #6 - Chci si vyplnit údaje v profilu a zjistit význam pole "Identifikátor MPSV".3.3..3.. Hledání "Identifikátor MPSV" ve vyhledavači #7 - Chci zjistit stav účtu.3.3.2.3.2. Návrh zlepšení průchodů službou na webu mojeid.cz Nyní je uvedena přepracovaná stromová struktura zmíněných problémů. Modrá barva značí přejmenování položky, růžová značí přesun položky. Za stromem HTA jsou opět plány.. Založit účet mojeid.. Vyplnění poĺı a.2.3 Jdu do.2. Heslo.2.2 Certifikát.2.3 Heslo + heslo (OPT).4.3..3.2.3.3.3.4 Vizitka.3.5.3.6 Stav účtu.3...3.4..3.5. profilu vizitku metody.3.5.2 účtu 8
Plány (navrhovaný stav): #- Chci se zaregistrovat... #2 - Chci se přihlásit IF uživatel není registrován: Proveď plán #.2.2. OR.2.2 OR.2.3 #3 - Chci se podívat na seznam služeb, kam jsem se přihlásil.3.3.2 #4 - Chci se podívat na seznam služeb, kam se mohu přihlásit.4 #5 - Chci zobrazit vizitku.3.3.4.3.4. #6 - Chci si vyplnit údaje v profilu a zjistit význam pole "Identifikátor MPSV".3.3..3.. #7 - Chci zjistit stav účtu.3.6 Analýza průchodů službou na webových službách podporujících přihlášení přes mojeid Dále je zobrazeno HTA pro use-case #8, který spadá mezi akce na webových službách podporujících přihlášení přes mojeid. Plán (současný stav): #8 - Na e-shopu mě zaujalo "přihlásit přes mojeid", klikám na to a zjišťuji, že je potřeba se registrovat..2.2..2.. OR.2..2 OR.2..3 OR.2..4 OR.2..5.2..X 9
Návrh zlepšení průchodů službou na webových službách podporujících přihlášení přes mojeid Plán (navrhovaný stav): #8 - Na e-shopu mě zaujalo "přihlásit přes mojeid", klikám na to a zjišťuji, že je potřeba se registrovat...4..4.. Přihlásit....2 Certifikát..3 Heslo + heslo (OPT).2.2. Založit účet mojeid.2.. Založit.2..2 Facebook.2..3. Přihlásit.. Heslo..2 Certifikát..3 Heslo + heslo (OPT)..4 Založit účet mojeid Google.2..4..4. Vyplnění poĺı a LinkedIn.2..5 Založit z registru domén.2..x. Vyplnění poĺı a 0
Vizualizace možných návrhů pomocí paper mock-up Na základě analýzy kritických částí služby se tým usnesl na vytvoření následujících třech mock-upů. Tyto mock-upy vizualizují potenciální kandidáty na hlubší redesign. Informační ikony u vstupních polí Tento mock-up vyjadřuje jakékoliv menu či formulář, kde je potřeba vyplnit některé informace. K některým, zdánlivě nejasným, polím bude přidána informační ikonka, která pomůže uživateli ihned pochopit význam pole nebo pomůže vysvětlit formát, v jakém má být pole vyplněné. Informační bublina se objeví při najetí kurzoru na písmeno i ve čtverečku.
Informace o stavu účtu v horní části obrazovky Tento návrh znázorňuje přehledný způsob prezentace aktuálního stavu účtu profilu mojeid. Návrhem je, aby se v horní části Profilu mojeid zobrazila ikona postavy s informací o aktuálním stavu účtu. Při interakci s uživatelem (např. najetí kurzoru myši) by se zobrazily dodatečné informace o tom, co další krok přinese a co je pro něj potřeba udělat. V současném stavu je tato informace skryta pod položkou Nastavení v hlavním menu v sekci Stav účtu. 2
Nové rozložení menu Při interview si respondenti stěžovali na nepřehledné umístění jednotlivých sekcí profilu. Tento fakt tým zanalyzoval jako zbytečně dlouhou cestu k dosažení zamýšlených uživatelských cílů. Po analýze tým dospěl k závěru, že řešením by mohla být nová obsahová organizace položek v menu. Styl rozložení menu tým shledal jako dostačující. Výše uvedený obrázek zobrazuje možnou představu o novém rozložení položek v hlavním menu. Pod položkou A se nachází přehled osobních údajů, které uživatel může předávat službám. Položka B obsahuje sekce zaměřené na služby, ke kterým se uživatel přihlásil, včetně přehledu údajů, které jim předává. Položka C obsahuje historii uživatelských akcí. Položka D umožňuje přístup k Vizitce. Sekce menu E představuje cestu k nastavení profilu. 3