Kis képernyők nagy problémák: A mobil UX alapjai

Már manapság is esetenként egy weboldal látogatóinak 80%-a mobilon találkozik először a céggel, azaz ezen a platformon érik az első benyomások. A kiváló mobilos felhasználói élmény elérése sosem volt egyszerű, amire a folyamatos technológiai változások szintén rátettek egy lapáttal, de mégis megkerülhetetlen feladat.

Azokat a mobil weboldalakat, amik nem gyorsak és könnyen használhatók már a főoldalon keresztül el fogják hagyni a látogatók. A mobil alkalmazásoknál még nehezebb a helyzet, ha nem elég jó az app a felhasználó szempontjából, ritkán kapunk második esélyt – már egyáltalán, ha először rá tudjuk bírni az embereket a letöltésre.

A tendenciát megállítani már nem lehet, helyette alkalmazkodnia kell a cégeknek, lásd például az Alibabát, ahol a tranzakciók 93%-a mobilon történik. Az is egy lehetséges forgatókönyv bizonyos országokban, hogy a „mobile first” trend helyett a “mobile only” fog kibontakozni: a fejlődő országokban például egyértelműen van annak meghatározó jelentősége, hogy egy okostelefon jóval olcsóbb is lehet, mint egy laptop.

Egy egész könyvet lehetne írni a mobilos felhasználói élményről, de most csak a mobil UX esszenciáját gyűjtöttem össze: ami 2018-ban elengedhetetlen egy vállalat számára, ha létezni akar a multi device kontextusban. Ezek betartása nélkül semmi esély nincs a mobilon is értelmezhető élményt adni az emberek számára, ugyanakkor ez csak az “elégséges minimum”, a haladóbb szint, igazán versenyképes állapot már egy összetettebb kérdés (aminek elérésben tudok segíteni).

Néhány mobil UX tanács a Google-től

A Google-nek mindig is a vesszőparipája volt a sebesség, a mobil kapcsán is a gyorsaság az első-számú tanácsuk. Főleg azoknak a cégeknek, akik több országba értékesítenek érdemes azzal számolniuk, hogy a betöltődési sebesség sokkal jobb lesz a fővárosban, mint egy távoli országból érkező lekérésnél. Ennek megfelelően kell tesztelni az oldalt, és megtenni a szükséges lépéseket.

De van azért a Google tarsolyában más is, amit használni lehet a mobil UX fejlesztésében.

A Google usability szakértőkkel 500 népszerű weboldalt vizsgált meg a Közel Keletről, Európából és Afrikából, hogy megtudják kik a mobilon a legjobbak és mit lehet tőlük tanulni. A munka eredménye egy heurisztika lista, ami a mobil UX minimum elérésben segíthet:

A három heurisztika lista letölthető innen:
Utazási szektor, kiskereskedelem, pénzügy

A sebesség mellett például a másik fontos ajánlásuk a tanulmány után a megtalálhatóság. Az emberek többsége úgy nyilatkozik, hogy ez az egyik legfontosabb egy mobil oldal kapcsán: hogy amit keresnek, azt villámgyorsan megtalálják. Magyarul legyen egy kiválóan működő és jól észrevehető kereső, ami automatikus kiegészítéssel segíti az emberek navigálását. Ha lehet, a keresősávot ne egy ikon rejtse (később bővebben, hogy miért problémás az ikon használat).

Rengeteg szakmai vita szokott lenni a görgetés nélkül elérhető terület fontosságáról. A Google tanulmánya szerint is, ha az emberek nem találnak hasznos információt és akciót (egyedi érték ajánlat + CTA) a mobilon görgetés látható területen, akkor az esetek többségében nem fognak scrollozni. A görgetés nélkül elérhető terület fontossága tehát nem csökkent. (Sőt. Az asztali böngészéssel összehasonlítva a mobilon sokkal több minden vonja el a figyelmet, notifikációk, a külvilág jelzései, szóval ilyen környezetben koncentrált böngészésre sokkal kisebb az esély, ami növeli az above the fold fontosságát).

A Google fenti listái mindenesetre jó kiindulási alapot szolgáltatnak a mobil UX javításához.

A UX designer tanácsai

A Google után a saját javaslataimmal is igyekszem segíteni a a mobil UX minimum elérését célzó törekvéseket.

A legfontosabb: használati kontextus

A UI a kommunikációról szól, nincs ez másként mobilon sem. A mobil UI-nak megfelelő választ kell adnia a felhasználó kontextustól függő kérdésre. Azaz a használati kontextus a következőtől függ:

• Stresszes helyzetben van?
• Éppen unatkozik?
• Éppen elfoglalt?
• Eltévedt?

Az elérhető funkcióknak és a működésüknek az adott szituációhoz kell igazodnia.

Egyszerűsíts

Ha valami komplexnek látszik, azt feltételezzük hogy nehéz használni, vagy legalább időigényes. Még akkor is ez a feltétlezés, ha nem ez az igazság. A percepció 50 millisecundumon belül megszületik az interfészt használó emberben, és ha túl komplexnek látja a felületet nagy eséllyel távozik.

A megoldás: egyszerre csak annyit adni, ami a felhasználó feladata, célja szempontjából hasznos. Azaz mobilon 1 képernyő 1 célt szolgáljon.

Hüvelykujjakra tervezz

A legtöbben ujjakra és nem hüvelykujjakra terveznek képernyőket. Pedig a mobilos interakciók nagy többségét vagy az egyik, vagy mindkét hüvelykujjuk segítségével végzik az emberek.

Azaz a főmenü elemeket, a gyakran használt interakciós eszközöket a hüvelykujj számára elérhető pozícióba célszerű tervezni.

Dundi ujjakra tervezz

A kontrollálást befolyásoló elemek illetve minden, ami hozzájuk kapcsolódó minimum 48 px szélességűnek kell lenniük. Mindent, ami ettől kisebb, egyszerűen nehéz “eltalálni” mobilon.

Ennek megfelelően kell az interakciók között távolságoknál érdemes a fenti számot figyelembe venni, hogy a véletlen tapintások elkerülhetők legyenek.

Ne ess túlzásba az ikonokkal

Számos vitába futok az ikon használat kapcsán. A probléma, hogy az ikonok címke nélkül rosszabbak, mint ha csak címkéket használsz.

Sok designer úgy közelíti meg a kérdést, hogy az ikonok jobban észrevehetőek, miközben helyet is spórolunk velünk. Viszont az ikonokat az emberek nagyon sokszor figyelmen kívül hagyják, mert nem magától értetődő a jelentésük (ellentétben azzal, amit sokan feltételeznek). Lényegében több erőfeszítést igényelnek a felhasználótól, amit természetesen nem fognak megtenni a kedvünkért.

Mobilon az érintések száma egy átlagos vásárlási folyamatban 120 körül mozog, szóval komoly előnyt jelenthet minden erőfeszítés spórolás a felhasználóinknak.

Minimalizáld a szükséges gépelést

Még a legideálisabb körülmények között is mobilon gépelni kényelmetlen. Senki sem szereti, talán ezért olyan népszerűek az emojik. A gépelés mobil eszközökön ráadásul egy lassú folyamat, szinte mindig hibát eredményez. Éppen ezért az űrlapokat rövidre és egyszerű kell tervezni, a szükségtelen mezőket pedig egyszerűen kidobni. Használj auto-complete és perszonalizált adatokat ahol csak lehetséges.

Az elv (ami egyébként desktopra is igaz) nagyon egyszerű: a technológia dolgozzon sokat, a felhasználó keveset.