ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE Fakulta elektrotechnická
Deliverable D2 [NIC-WEB-1] 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. 10.2014
Obsah Úvod ........................................................................................................................................................ 3 Use cases ................................................................................................................................................. 3 Scenarios ................................................................................................................................................. 3 #1 - 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 .... 10 Vizualizace možných návrhů pomocí paper mock-up ........................................................................... 11 Informační ikony u vstupních polí ................................................................................................. 11 Informace o stavu účtu v horní části obrazovky............................................................................ 12 Nové rozložení menu..................................................................................................................... 13
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í: #1 - 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 #1 - 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
1
1.1 Zaloˇ zit u ´ˇ cet mojeID
1.2
1.1.1 Zaloˇ zit
1.2.1 Heslo
1.1.2
1.2.2 Certifik´ at
1.3 Jdu do
1.4 1.4.1
1.2.3 Heslo +
Facebook 1.1.3
heslo (OPT)
Google 1.1.4 LinkedIn 1.1.5 Zaloˇ zit z registru dom´ en
Profil 1.3.1.1 profilu 1.1.X.1 Vyplnˇ en´ı pol´ı a
1.3.2 1.3.2.1 Stav u ´ˇ ctu 1.3.2.2
1.3.3
1.3.4 1.3.4.1 profil
´ˇ u ctu 1.3.2.3 metody 1.3.2.4 ´daj˚u u
Plány (současný stav): #1- Chci se zaregistrovat 1 1.1 1.1.1 OR 1.1.2 OR 1.1.3 OR 1.1.4 OR 1.1.5 1.1.X.1
#3 - Chci se podívat na seznam služeb, kam jsem se přihlásil IF uživatel není přihlášen: Proveď plán #2 1.3 1.3.2 1.3.2.4
#2 - Chci se přihlásit IF uživatel není registrován: Proveď plán #1 1 1.2 1.2.1 OR 1.2.2 OR 1.2.3
#4 - Chci se podívat na seznam služeb, kam se mohu přihlásit 1 1.4 1.4.1 7
#5 - Chci zobrazit vizitku IF uživatel není přihlášen: Proveď plán #2 1.3 1.3.4 1.3.4.1
#7 - Chci zjistit stav účtu IF uživatel není přihlášen: Proveď plán #2 1.3 1.3.2 1.3.2.1
#6 - Chci si vyplnit údaje v profilu a zjistit význam pole "Identifikátor MPSV" IF uživatel není přihlášen: Proveď plán #2 1.3 1.3.1 1.3.1.1 Hledání "Identifikátor MPSV" ve vyhledavači
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.
1
1.1 Zaloˇ zit u ´ˇ cet mojeID 1.1.1 Vyplnˇ en´ı pol´ı a
1.2
1.4
1.3 Jdu do
1.2.1 Heslo 1.2.2 Certifik´ at 1.2.3 Heslo + heslo (OPT)
1.3.1
1.3.2
1.3.3
1.3.4 Vizitka
1.3.5
1.3.1.1
1.3.4.1
1.3.5.1
profilu
vizitku
metody 1.3.5.2 ´ˇ u ctu
8
1.3.6 Stav u ´ˇ ctu
Plány (navrhovaný stav): #1- Chci se zaregistrovat 1 1.1 1.1.1
#5 - Chci zobrazit vizitku IF uživatel není přihlášen: Proveď plán #2 1.3 1.3.4 1.3.4.1
#2 - Chci se přihlásit IF uživatel není registrován: Proveď plán #1 1 1.2 1.2.1 OR 1.2.2 OR 1.2.3
#6 - Chci si vyplnit údaje v profilu a zjistit význam pole "Identifikátor MPSV" IF uživatel není přihlášen: Proveď plán #2 1.3 1.3.1 1.3.1.1
#3 - Chci se podívat na seznam služeb, kam jsem se přihlásil IF uživatel není přihlášen: Proveď plán #2 1.3 1.3.2
#7 - Chci zjistit stav účtu IF uživatel není přihlášen: Proveď plán #2 1.3.6
#4 - Chci se podívat na seznam služeb, kam se mohu přihlásit 1 1.4
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 1 1.1 1.2 1.2.1 1.2.1.1 OR 1.2.1.2 OR 1.2.1.3 OR 1.2.1.4 OR 1.2.1.5 1.2.1.X1
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 1 1.1 1.1.4 1.1.4.1
1
1
1.1 Pˇrihl´ asit
1.1 Pˇrihl´ asit
1.1.1 1.1.2 Certifik´ at 1.1.3 Heslo + heslo (OPT)
1.2
1.1.1 Heslo 1.1.2 Certifik´ at
1.2.1 Zaloˇ zit u ´ˇ cet mojeID
1.1.3 Heslo +
1.2.1.1 Zaloˇ zit
heslo (OPT)
1.2.1.2
1.1.4 Zaloˇ zit u ´ˇ cet mojeID
Facebook 1.2.1.3
1.1.4.1 Vyplnˇ en´ı pol´ı a
Google 1.2.1.4 LinkedIn 1.2.1.5 Zaloˇ zit z registru dom´ en 1.2.1.X.1 Vyplnˇ en´ı pol´ı a
10
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.
11
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“.
12
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.
13
