Návrh redesignu aplikace FlixBus
Úvod
Všichni si jistě dokážeme představit, jak chaotické a stresující může být cestování veřejnou dopravou. Dopravní prostředky mohou mít zpoždění, následkem čehož nestíháme navazující spoj a musíme si v rychlosti zajistit rezervaci spoje jiného, abychom se dostali do kýžené destinace. Komunikace mezi cestujícími a dopravními společnostmi by měla být srozumitelná a časově efektivní a jejich prioritou by mělo být naplnění (a dosažení) cílů uživatelů.
Předmětem tohoto článku je návrh redesignu aplikace dopravní společnosti FlixBus. Účelem není komplexní rozbor dané služby, pouze její dílčí součásti, která hraje klíčovou roli při komunikaci se zákazníky. Aplikace FlixBus byla vybrána z toho důvodu, že ji sám mnohdy používám — tudíž jsem při práci na redesignu mohl pracovat nejen s připomínkami ostatních uživatelů, ale i s vlastními zkušenostmi.
Analýza
Při analýze současného stavu aplikace bylo v různých mírách aplikováno několik metod. Za ústřední metodu ve fázích poznávání a definování jsem zvolil safari službou, tuto metodu jsem posléze doplnil o redukovanou podobu cesty službou obohacenou o kontextový rozhovor a konkrétní uživatelské scénáře. Uživatelé, které jsem do výzkumu zapojil, mnohdy aplikaci viděli poprvé a na základě jejich reakcí jsem se rozhodl pracovat i s heuristikami. V článku uvádím pouze zjištění, která osobně považuji za důležité, a připomínky, které se mnohdy opakovaly.
Vizuální zpracování aplikace
První poznámka většiny uživatelů při průchodu službou se shodně negativně vyjadřovala k vizuální stránce aplikace. Minimalistické pojetí uživatelského rozhraní shledávali přehledným, výtky byly směřovány především k „nevýraznosti“ domovské stránky aplikace. Po otevření aplikace nás totiž vítá stránka, ve které si rovnou můžeme vyhledávat dopravní spoje. Dále je zde jen logo společnosti a sekce „nechte se inspirovat.“ Jeden z uživatelů si myslel, že se na hlavní stránce ani nenachází a snažil se zmáčknout logo, které však nemá funkci tlačítka.
Množství uživatelů na první pohled zaujala sekce „nechte se inspirovat,“ ta však pravděpodobně není implementovaná funkčně. Chvíli tuto část aplikace zkoušeli, posléze to ale vždy vzdali. Nepodařilo se mi prověřit, zda část funguje. Ve vrchní části obrazovky neustále přebíhá čára, což zřejmě má symbolizovat načítání — v tomto ohledu by bylo vhodné zavést konkrétní ukazatele průběhu načítání, aby byla zajištěna viditelnost stavu systému. I v případě, že by tato sekce fungovala, by však domovská stránka měla být výraznější a skýtat nějaké vstupní informace, či další zajímavosti o službě.
Jakmile došlo k vyhledávání spojů, uživatelé se zrakovým znevýhodněním měli výtky i k podobě uživatelského rozhraní. V aplikaci se nachází bílý text na zeleném pozadí, kontrast těchto dvou barev činí text méně čitelným. Tyto dvě barvy odpovídají i barevnému složení loga společnosti, jejich užití však snižuje přístupnost aplikace. Text by měl být přinejmenším větší, nebo by zelenou barvu měla doplňovat místo bílé barvy barva jiná (dle stránek WCAG Color Contrast Checker by byl optimální kontrast například černého textu na zeleném pozadí). Zároveň by zde mohla být tlačítka + a - za účelem zvětšení, či zmenšení velikosti textu.
Použitelnost a užitečnost
Nejpodstatnější problémy byly zjištěny při testování použitelnosti a užitečnosti. Uživatelům byl například zadán komplexnější scénář, ve kterém si museli přeobjednat několik spojů. Součástí úkolu bylo koupení jízdenek s cestou z bodu A, přestupem v bodu B a destinací v bodu C. Všechny cesty měly být v konkrétním časovém okně. Tento jednoduchý úkon v několika případech trval i více než deset minut, zvláště pak u uživatelů, kteří aplikaci viděli poprvé.
První úskalí skýtá „funkce košíku,“ která není v aplikaci implementovaná správně. „Košík“ v této aplikaci není zřetelný a na první pohled srozumitelný. Chybí zde jednoznačná formulace „přidat do košíku,“ či znak, jenž by funkci košíku zastupoval. Toto však není jediný problém, samotná funkce košíku totiž neodpovídá standardu této funkce v jiných aplikacích a službách. V rámci této aplikace slouží pouze k předběžné rezervaci, což znamená, že po dobu deseti minut nikdo další nemůže rezervovat místenku cesty, kterou má uživatel v košíku. Zákazník si nemůže do košíku přidat cest vícero, všechny spoje musí kupovat zvlášť. (Tlačítko DÁLE vede k zaplacení jednotlivé cesty.) Toto při testování nebylo uživatelům srozumitelné a obvykle je to i zdržovalo při dokončení úkolu. „Je zvláštní, že takovou základní věc v aplikaci nemají, když to konkurence — třeba Student — už léta má.”
Z hlediska časové efektivity na zmíněný problém navazují i další připomínky týkající se absence profilu či kreditu a množství mezikroků při rezervaci dílčích cest. Pokud zákazník stornuje rezervaci cesty, obdrží několikamístný kód, který posléze lze uplatnit při rezervaci dalších cest. Tento kód se v aplikaci nikam neukládá (naprosto zde chybí sekce profilu uživatele), uživatel si ho musí opsat, nebo si pořídit snímek obrazovky. Zadávání kódu zabírá další čas.
Při dohledávání návaznosti jednotlivých cest ze strany uživatelů zazněly i výtky spjaté s efektivitou samotného vyhledávání. Téměř všichni aplikaci při testování užívali intuitivně a v tomto ohledu nespatřuji v architektuře aplikace žádný problém, množství mezikroků nicméně bylo častým předmětem kritiky. Negativně bylo ohodnoceno „neustálé vracení se,“ v aplikaci totiž nejsou perzistentní vyhledávací pole pro zadání zastávek, výsledky vyhledávání pomáhá upřesnit jen funkce „filtr.“ Uživatelé se při testu museli několikrát vracet a kontrolovat, zda jim zdroje opravdu navazují — někdy si časové údaje i psali stranou. Až poté přistoupili ke koupi jízdenek. Mnohem efektivnější by bylo zavedení perzistentních vyhledávacích polí tak, aby bylo možné vyhledávání upravovat průběžně, bez potřeby vracet se na úvodní stránku.
Očekávání některých uživatelů zklamala i strohost vyhledávání. Ačkoliv to posléze lze zadat pomocí filtru, při prvotní fázi vyhledávání není možné stanovit konkrétní zastávku — lze vybrat jen město. Toto by samo o sobě nebylo tolik problematické, pokud by si všichni uživatelé funkce filtru všimnuli. Někteří však podotýkali, že by čas šetřilo i zadání přibližné hodiny odjezdu spoje. „Chybí mi tu zadání času, tak by to bylo rychlejší. Například v aplikaci od IDOSu to tak funguje. Člověk pak nemusí procházet všechny ty spoje.”
Součástí scénáře byla i stimulace stresu. Pro simulaci hektického přerezervování jízdenek někteří respondenti byli požádáni o ovládání mobilního zařízení pouze jednou rukou (za vysvětlení, že se momentálně nachází v hromadné dopravě a nemají jinou možnost pro přeobjednání jízdenek). Z tohoto dílčího testu vyplynulo, že aplikace nemá adekvátně nastavenou senzitivitu tažení pro dotykové displeje. Uživatelé kupříkladu palcem chtěli posouvat obrazovku směrem dolů, či nahoru, přičemž aplikace registrovala horizontální osu a mnohdy se dostali jinam, než zamýšleli. (Což je v kontextu aplikace podstatné, jelikož si nesoustředěný zákazník může nezáměrně objednat jízdenku na špatný den.) Bylo by tedy vhodné upravit poměr vertikální a horizontální senzitivity.
Z testování rovněž vyplývalo, že uživatelé kladně vnímají množství dodatečných informací k cestám a zastávkám, ojediněle zazněla i chvála možnosti kompenzace emisí oxidu uhličitého (peníze financují projekty úspory uhlíku).
Redesign
V následující části článku se pokouším navrhnout redesign, který by mohl řešit nejpodstatnější otázky aplikace. Důraz je kladen především na jevy a problémy, ke kterým ve článku dosud nebylo navrženo řešení, nebo vyžadují komplexní přístup. Součástí tohoto segmentu jsou i low-fi vizualizace návrhů, jež se respondentům zamlouvaly.
Vizuální zpracování aplikace
Pokud pomineme jednoduchou verzi řešení problému s přístupností (zaměnění bílého textu za černý), můžeme pracovat alespoň s přepínáním módu aplikace. Ačkoliv bílý text na zeleném pozadí nesplňuje pravidla přístupnosti, toto barevné uspořádání odpovídá i logu společnosti — tudíž úzce souvisí s její prezentací a záměna by nemusela být vhodná. Řešením by však mohl být režim, do kterého by si uživatelé aplikaci mohli volitelně přepínat. Tento režim by fungoval podobně jako widget tmavého režimu v prohlížečích — účelem by však bylo zajištění lepší přístupnosti pro uživatele se zrakovým znevýhodněním.
Stěžejním bodem vizuálního redesignu by mělo být členění aplikace. Uživatelské rozhraní je přehledné, byť se v něm v aktuální podobě setkáváme s problémy s přístupností. Hlavní stránka aplikace působí až ledabylým dojmem, neboť v ní polovina obsahu nefunguje (sekce “nechte se inspirovat”). V tomto ohledu by se aplikace mohla inspirovat u konkurence, dobrým příkladem řešení domovské stránky je aplikace RegioJet. Na hlavní stránce této aplikace se nachází množství aktuálních informací o poskytované službě. Rovněž se zde setkáváme s různými doporučeními. Podobné řešení by bylo úsporné, ale i přehledné, efektivní a nepůsobilo by prázdným dojmem. Na domovské stránce by bylo vhodné uvést i jedodnuchý manuál pro používání aplikace.
Dalším možným řešením by bylo napodobení desktopové verze webu FlixBus v redukované podobě, domovská stránka obsahuje množství užitečných informací.
Součástí stránky by mohla zůstat i stávající část “nechte se inspirovat,” pokud by byla opravena. Případně by mohla být přesunuta k sekci “zastávky,” ve které lze hledat zastávky. Domovská stránka aplikace by taktéž mohla být doplněna o fotku autobusu společnosti (tak, jak tomu je i v prohlížečové podobě služby) a samotné logo FlixBus by mohlo sloužit jako navigační tlačítko domovské stránky.
Použitelnost a užitečnost
Z hlediska vnější konzistence aplikace nedrží krok s konkurencí. Při navrhování aplikace je vhodné dbát na efektivitu jejího užívání a na to, že jí uživatelé budou rozumět již na základě předchozích zkušeností s jinými podobnými aplikacemi. Navrhovaná aplikace by tedy měla tuto konkurenci sledovat a co nejvíce se přiblížit očekávání uživatelů.[1] Aplikace FlixBusu nesplňuje standard domovské stránky, ale i několika funkcí, jako jsou například uživatelské profily, funkce košíku a kredity či snadno použitelné kupóny atd. Vnitřní konzistence zde také pokulhává, zejména ve spojitosti s vyhledáváním: v aplikaci chybí perzistentní vyhledávací pole a uživatelé jsou nuceni neustále se vracet na hlavní stránku.
Pro účely efektivního vyhledávání by bylo vhodné zavést perzistentní vyhledávací pole. Implementace by uživatelům umožnila výsledky vyhledávání upravovat průběžně, vyhledávání by bylo jednodušší a rychlejší. Na základě připomínek respondentů se domnívám, že by bylo vhodné i přidat čas odjezdu (pokud by jej uživatel nevyplnil, vyhledávání by našlo všechny spoje v daný den), zastávku a možnost zadání místa přestupu. Výsledky vyhledávání by pak měly mnohem více odpovídat informačním potřebám uživatelů, kteří by se navíc nemuseli neustále vracet na hlavní stránku.
Funkce košíku by měla fungovat stejně, jako u ostatních aplikací a internetových obchodů. Zároveň by měla být mnohem lépe znázorněna, pouhé plus, či šipka nestačí. Uživatelé jsou zvyklí na piktogram nákupního košíku nebo přímo formulaci “přidat do košíku.”
K tomuto se váže i otázka kreditů a kupónů. Externí poznamenávání několikamístných kódů není efektivní, aplikace by si měla kupóny (se znázorněnou peněžní hodnotou) po každém stornování cesty ukládat a posléze automaticky nabízet při rezervaci další cesty. Dalším případným řešením by bylo zavedení kreditu, který by se vázal k uživatelskému profilu. Profil momentálně v aplikaci naprosto schází, ačkoliv se v ní ukládají veškeré předešlé cesty a zadané nároky na slevy taktéž zůstávají uložené. S touto variantou by bylo možné “vrácené” peníze za stornovanou cestu převést na kredit konkrétního profilu. Sekce uživatelského profilu by se mohla spojit s momentální sekcí “moje jízdenky.”
Zavedením těchto změn by se jistě zlepšila uživatelská zkušenost i práce s aplikací by byla efektivnější.
[1] KRAUSE, Rachel. Maintain Consistency and Adhere to Standards: (Usability Heuristic #4). Nielsen Norman Group: World Leaders in Research-Based User Experience [online]. January 10, 2021 [cit. 2023–01–04]. Dostupné z: https://www.nngroup.com/articles/consistency-and-standards/
