Digitálne označovače MHD v Bratislave
Digitálne označovače MHD v Bratislave
Redizajn užívateľského rozhrania
- časť druhá: úspešné kúpenie lístka
Prečítajte si druhé pokračovanie projektu redizajnu užívateľského rozhrania digitálnych označovačov v bratislavskej MHD.
V úvodnom článku o projekte redizajnu užívateľského rozhrania digitálnych označovačov sme sa venovali chýbajúcim cenám. Ukázal som vám prečo ceny chýbajú a ako jednoducho je možné ich užívateľovi zobraziť. V pokračovaní sa pozrieme na dizajn dôležitého nákupného kroku – potvrdzujúcej obrazovky.
Každý, kto aspoň raz využil verejnú dopravu v Bratislave vie, že ak si kupuje jednorazové cestovné lístky (opak električenky), potrebuje vedieť ako dlho mu bude jeho cesta trvať. Podľa toho sa totiž musí rozhodnúť, ktorý lístok si kúpiť – či pätnásťminútový, polhodinový alebo hodinový (tých druhov je viac, ale ak nie ste škôlkársky výlet, dôvodov na ich zakúpenie už menej …).
Lístok cestujúcemu (t.j. užívateľovi) teda platí obmedzený čas, čo je samozrejme normálne a aj žiadúce. Pri kupovaní potrebuje preto vedieť presný časový údaj, dokedy mu jeho lístok platí. Pretože ak by cestoval dlhšie ako je časová platnosť jeho cestovného lístka, ten by sa stal neplatným a neplatný lístok je priamy príbuzný pokuty.
Dôležitosť spomínaného údaju pre užívateľa je teda zrejmá. Napriek tomu ho pri používaní digitálnych označovačov cestovných lístkov vo vozidlách MHD v Bratislave nemusí nájsť. Alebo len obtiažne.
Rovnaká vizuálna priorita spôsobuje problémy pri čítaní
Aktuálny dizajn obrazovky, ktorý plní funkciu potvrdenia úspešného zakúpenia cestovného lístka a (okrem iného) zobrazuje údaj o jeho časovej platnosti, nespĺňa požiadavky užívateľov / cestujúcich. Samotná platnosť cestovného lístka je vyobrazená malým písmom, šedou farbou, ktorá je v minimálnom kontraste s pozadím. Vizuálne je tento údaj zaradený medzi ostatné zobrazujúce sa údaje na obrazovke a preto zaniká ešte viac. Aby toho nebolo málo, obrazovka sa po krátkom čase automaticky vypne. Cestujúcemu tak neostáva nič iné, ako znovu načítať svoju kartu, zobraziť si informácie o karte (tlačidlo INFO) a ešte raz poriadne zaostriť zrak na obrazovku zariadenia.
Na obrázku vyššie môžete vidieť aj ďalšiu problematicky vyobrazenú informáciu, ktorá je pre užívateľa však nemenej dôležitá. Je ňou potvrdenie úspešného nákupu cestovného lístka (zobrazené ako Platí do). Aký je hlavný cieľ kúpy elektronického cestovného lístka cez digitálne označovače? Predsa jeho zakúpenie! Napriek tomu v aktuálnom dizajne dostáva táto informácia najnižšiu pozíciu v hierarchí s ostatnými. Pritom by tomu malo byť presne naopak.
Jedným z výstupov pri užívateľských testovaniach môjho návrhu tejto obrazovky bolo, že tester nedôveroval potvrdeniu o úspešnom kúpení jeho cestovného lístka. Mal tendenciu opätovne načítavať kartu a skontrolovať, či sa na nej lístok naozaj nachádza. Na mojom dizajne má pritom potvrdenie o úspešnom zakúpení cestovného lístka najvyššiu vizuálnu prioritu, je najväčším písmom (v porovnaním s ostatnými prvkami) a dopĺňa ju jasný zelený prvok „check“.
Netreba sa potom čudovať, že pri aktuálnom dizajne majú cestujúci potrebu skontrolovať zapísanie kúpeného lístka tiež. Pri cestovaní v MHD som niekoľkokrát videl, ako cestujúci po zakúpení elektronického lístka opätovne načítavajú svoju kartu a kontrolujú, či na nej nachádza lístok, ktorý si len pred niekoľkými sekundami kúpili. Tento možno nepatrný detail predlžuje a zbytočne komplikuje celý proces.
Aktuálny zostatok kreditu na karte je do tretice ďalší dôležitý údaj, ktorý by mal mať cestujúci možnosť vidieť bez sebemenšej nutnosti pátrania po obrazovke označovača.
Vzhľadom na krátkosť času, ktorý má cestujúci pri nástupe do vozidla na nákup cestovného lístka je dizajn tejto nákup-potvrdzujúcej obrazovky nedostatočný hneď v niekoľkých smeroch. V mojom návrhu sa snažím všetky spomínané chyby odstrániť a navrhnúť dizajn, ktorý užívateľovi dopomáha k rýchlejšiemu nákupu.
Nikdy nie sú všetky prvky najdôležitejšie
Pri navrhovaní tejto obrazovky som najprv vytvoril hierarchiu zobrazovaných informácií – od najdôležitejších, po (v danej chvíli) menej dôležité. Vďaka tomu som bol schopný určiť vizuálnu prioritu jednotlivých prvkov.
Jasný a výrazný prvok na potvrdenie úspešnej kúpy cestovného lístka dostal najvyššiu prioritu. Pre dobrú čitateľnosť navrhujem použiť naozaj veľké písmo. Vo svojom redizajne pracujem s veľkosťou 100 pixelov. Vďaka tomu je tento prvok jednoducho čitateľný a užívateľ tak môže rýchlo prejsť očami na ďalšie zobrazované informácie. Uvidí rekapituláciu jeho nákupu – cestovný lístok, ktorý si práve kúpil a jeho časovú platnosť.
Najnižšiu vizuálnu prioritu som priradil informácii o aktuálnom zostatku kreditu na karte. Nezmanená to však, že je menej dôležitá, v danom momente však užívateľ potrebuje najskôr vidieť iné informácie. Napriek tomu však aktuálny zostatok kreditu nájde rýchlo a na mieste, kde to môže očakávať.
V prieskume respondenti spomínali časovú platnosť cestovného lístka niekoľkokrát:
| „Informácie o zakúpenom cestovnom lístka sú neprehľadné a veľmi malým písmom. Keď si človek elektronicky zakúpi napr. 30 minútový lístok, je pre neho dôležité od kedy do kedy platí a je to tam ťažko vidno.” |
| „Pred potvrdením transakcie kartou prehľadný sumár o nákupe – vizuálne znázornené zakúpené (platné) lístky, ich hodnota a platnosť (prípadne progressbar ktorý indikuje ako im časová platnosť ubúda).” |
| „Informácia po ktorú zastávku na danom spoji daný typ lístka platí (pri každom lístka by to mohlo byt uvedené, aby cestujúci nemusel riešiť koľko minút vlastne potrebuje + pri stlačení info by sa táto informácia mohla zobraziť pre už zakúpený CL).” |
Použité nástroje a princípy:
- Figma
- Adobe Photoshop
- Online verejný prieskum (spolu 101 respondentov)
- Usability testing návrhov (5 testerov)
- Dizajn orientovaný na užívateľa (tzv. User-centered design)
