Od hamburger menu k navigační liště

Tři vodorovné čárky v levém horním rohu obrazovky telefonu. Prokletí uživatelů i designérů. Jedni v něm na hranici šílenství hledají, druzí do něj schovávají vše, co jim přijde nepodstatné pro ty první. Hambáč.

Vlastimír Havlíček

Mobile UX Lead designer

Píše se rok 2015 a hamburger menu zažívá vrcholnou slávu. My jsme přišli k redesignu aplikace Mobilní banky od KB a přišlo nám vhodné ho použít na platformě Android. V průběhu času se ukázalo, že to nebyla správná volba. Začali jsme hledat nový způsob uspořádání informační architektury. Chtěli jsme nastolit pořádek v aplikaci a usnadnit uživatelům orientaci při práci s Mobilní bankou.

V roce 2016 přišel Lukáš a Michal s myšlenkou na zavedení spodního navigačního menu v kombinaci s hamburgerem. Tehdy tuto kombinaci prvků prosazoval sám Google. Zkusili navrhnout první prototypy, pustili se do uživatelských testů. Všechno do sebe zapadalo, testy procházely a světlo světa spatřila první verze Mobilní banky se spodním navigačním menu připravená pro pilotní testování.

Výsledek byl uspokojivý, proto se nikdo nebránil vypuštění upravené verze aplikace do pilotního testování. Pilotanti nesdíleli naše nadšení a ukázalo se, že jsou zmatení z podvojné navigace. Spolu s produktovým manažerem Petrem z Komerční banky jsme se rozhodli, že bude lepší, když tuhle verzi stáhneme a nenasadíme ji mezi všechny uživatele.

Teď už opravdu rušíme hamburger menu

Chvíli bylo ticho po pěšině, ale Lukáše tato výzva nenechala spát. Zrála v něm myšlenka na úplně odstranění hamburger menu a přeuspořádání jednotlivých funkcí aplikace. Koncem roku 2017 představil Michalovi a Petrovi návrh nové informační architektury, ve které se mu podařilo najít správné místo pro všechny funkce aplikace v 5 kategoriích.

Na začátku roku 2018 jsem převzal po Lukášovi štafetu a začal jsem s rozpracováním jeho myšlenky. Po zpracování jeho myšlenky do prototypu jsem se pustil do uživatelských testů, kde jsem si ověřil několik prvních hypotéz ohledně přeuspořádání informační architektury. Po prvních testech se ukázalo, že je to správná cesta.

Potřebovali jsme si být jistí, že jdeme správnou cestou

Následně jsme zorganizovali otevřený a uzavřený card-sorting pro lepší pochopení myšlení našich uživatelů. Card-sorting mi pomohl v potvrzení a vyvrácení hypotéz ohledně uspořádání položek. V otevřeném card-sortingu nám respondenti pomohli s pojmenováním kategorií. Potom jsem se pustil do iterování prototypů. Než jsem našel finální řešení, prošel jsem si 14 uživatelskými testy.

V průběhu návrhu spodní navigační lišty jsme řešili i komplikace spojené s nedostatkem místa pro názvy jednotlivých položek. Například položka „Obchod“ se původně jmenovala „Nový produkt“. Název „Nový produkt“ vzešel z card-sortingu a osvědčil se nám při uživatelských testech. Bohužel v průběhu implementace jsme zjistili, že se nám položka do navigační lišty nevejde a museli jsme ji změnit na „Obchod“.

 

Nic není zadarmo a to ani napoprvé. V průběhu uživatelských testů jsem testoval varianty pojmenování kategorií, které vzešli z card-sortingu, ale už jsem viděl světlo na konci tunelu.

V rámci testování jsem zkoušeli přesouvat napříč sekcemi některé sporné položky, jako jsou například kurzy měn. Uživatelské testy jsme opakovali, dokud respondenti neplnili všechny stanovené úkoly bez problémů. Testů se účastnili staří i mladí, uživatelé Mobilní banky i jiných bank. Zkrátka jsme chtěli, aby testem prošel úplně každý a aplikace byla použitelná napříč generacemi. :)

 

Koncem roku 2018 jsme za sebou měli nespočet testování a připravený finální prototyp. Potom jsme jen čekali, kdy se uvolní vývojové kapacity a Petr bude moct úpravy zařadit k realizaci. Nechtěli jsme uživatele zaskočit kompletním přeskládáním informační architektury, takže se Petrovi povedlo rozložit úpravy do několika verzí aplikace. Postupně jsme odebírali funkce z hamburger menu a přesouvali je směrem k finálnímu umístění v informační architektuře aplikace. V září 2019 jsme dospěli k finální úpravě, zavedení spodní navigační lišty. Po dokončení implementace jsme aplikaci vypustili do pilotního testování. Do pilotního testování jsou zapojení zaměstnanci Komerční banky a někteří z klientů.

Pomůžeme vám s

Uživatelské testování

Zjistěte, jaké problémy mají uživatelé na vašem webu, e‑shopu, v mobilní aplikaci nebo s vaším produktem.

Jak to celé dopadlo

Trvalo nám 4 roky, než jsme dospěli k aktuální verzi informační architektury. K úspěšnému výsledku jsme dospěli díky:

  • hloubkovým rozhovorům s 30 respondenty,
  • uživatelským testům s více než 73 respondenty,
  • card-sorting s 500 respondenty,
  • pilotování na 300+ uživatelích.

Posledním velkým testem je vypuštění nové verze aplikace. Dnes poslední verzi používá 314 000+ na Androidu. iOS čeká na vydání nové verze a tím přibude dalších 161 000+ uživatelů. Od vydání nové verze aplikace koncem srpna přibylo na Google Play 199 nových recenzí a z toho jich bylo 83 % se 4 a 5 hvězdičkami.

Uživatelé jsou z velké části spokojení jako například pan Zdenek:

„Aktualizace opět skvělá! Černý režim je věc, kterou považuji za velké plus! Uspořádání ikon směrem dolů vede k lepšímu ovládání. Škoda, že nelze vytvořit aplikaci na hodinky od Samsungu k OS Tizen.

Samozřejmě jsme neuspokojili všechny, protože i v dnešní době se najdou tací, kteří si na hamburger menu zvykli. Jako například pan Marek:

„Nesnáším, jak se aplikace zbavují vyjíždějícího menu ze strany… Ještě tím tuplem, když to pak musí vývojáři nahrazovat těmi stupidní dolními lištami. Kdyby byly alespoň nahoře. Tak ok. No, zbytečné mluvit. Ale ok. Když už to tak je… Tak proč je jako prostřední tlačítko nějaký "obchod"? S tím tlačítkem si já nezaplatím… Dle mého by mělo být uprostřed tlačítko pro platbu. Celkově ale máty ty sekce pod jednotlivými tlačítky strašně divně uspořádáné…: DD“

Tím práce nekončí, už nyní víme, že se nám nepovedlo udělat všechno na jedničku. Proto pokračujeme v hledání dalších cest, jak uživatelům usnadnit život v aplikaci Mobilní banka.

Tisková zpráva Komerční banky.

O autorovi

Vlastimír Havlíček

Mobile UX Lead designer

Pracuji v našem UX týmu zejména na návrzích aplikací. Mám mnohaleté zkušenosti v UX a moje hlavní přednosti jsou empatie, analytické myšlení a promyšlený výstup.

Podobné

Navigace v mobilních aplikacích

Obrazovky mobilů se zvětšují, stále jsou však někdy příliš malé na to, aby se na ně vešlo všechno, co bychom potřebovali. Návrhářům tuto situaci komplikují…
číst více

Formuláře v mobilních aplikacích

Prezentace Michala Vojáka, na téma formulářové prvky v mobilních aplikacích v akci UX monday.
číst více

Neumorphism & UX

Zbavíme se po letech Material designu?
číst více