Bakos Szabolcs UI/UX Designer portfóliója

Hogyan javítsunk a mobil felületek felhasználói élményén (UX)?

A cégeket általában a weblapok klasszikus monitoros megjelenése érdekli leginkább, a mobilos felületek minősége már nem annyira lényeges.

21 hasznos tanács designerek számára
Webdesign trendek melyek dominálni fognak 2016-ban
Hogyan javítsunk a mobil felületek felhasználói élményén (UX)?
Szerző: Bakos Szabolcs
Lassan, de biztosan egyre több weboldal készül reszponzív technológiával, aminek köszönhetően a modern weblapok már mobil és tablet felületeken is viszonylag elfogadhatóan jelennek meg.

Hogy miért csak viszonylag? Sajnos tapasztalataim alapján a weboldalak mobil felületeinek minősége jócskán elmarad a monitoron megjelenő felületekhez képest. Ez a jelenség több tényezőnek is köszönhető. Fejlesztői hanyagság, design szakértelem hiánya, a büdzsé hiánya, időhiány, egyéb tényezők. Az ügyfeleket főleg a weblapok monitorokon megjelenő verziójának minősége érdekli, a mobilos megjelenés tökéletessége már általában annyira nem fontos.

Természetesen az internetes mobilhasználat Magyarországon a közelében sincs a külföldről fordított marketinges cikkekben olvasott több mint 50%-nak, de évről évre folyamatosan növekszik ez a szám. Az egyre modernebb nagyobb kijelzőjű okostelefonoknak, az egyre olcsóbb és gyorsabb internetnek köszönhetően, a mobilos böngészés is szépen dinamikusan erősödik itthon.

A számok folyamatosan növekednek, érdemes tehát komolyan venni az egységes felhasználói élményt, a mobil felületeken is. Összeírtam pár felhasználói élmény (UX) tippet, hogy mire érdemes figyelni a weblapok mobil felületeinek tervezése során.

Letisztult, fókuszált tartalom

A legtöbb ember utazás közben, vagy a munka közbeni szabad pillanatában használja a mobilját, azonnal és gyorsan szeretne információhoz jutni. Amennyiben mobilra tervezünk felhasználói élményt, a legoptimálisabb megoldás, ha a minimalizmusra törekszünk. Kerüljük a végtelen hosszúságú tartalmakat, a következetlen navigációt. Az emberek nem szeretnek sokat olvasni a mobilon, az egyszerű logikus felületeket kedvelik.

Egyszerű menü és navigáció

A tradicionális weblapokon a fő navigációs menü, általában az oldal tetején van elhelyezve. A menüpontok számától függően ez a struktúra nem jeleníthető meg rendesen a mobil felületeken. A fenti problémának köszönhetően terjedt el a hamburger menü, mely már a desktop felületeken is egyre népszerűbb.

A második komolyabb probléma a többszintű navigáció, a hoverre lenyíló menük megjelenítése a mobil felületeken. Ezeket amennyire csak lehetséges kerüljük a mobilon.

Optimalizált mobil, tablet reszponzív nézetek

A designerek fix méretben megrajzolják a mobil és a desktop terveket (jobb esetben), a legtöbb fejlesztő pedig elintézi a fejlesztést valamilyen reszponzív framework-el (Bootstrap, Foundation). A probléma akkor kezdődik, ha a felületek nincsenek optimalizálva lehetőség szerint több mérettartományban, csak bizonyos telefonokon, tableteken néznek ki jól.

Természetesen minden mobileszköz felületére nem lehet optimalizálni, de ha a felületek mobil first stílusban készülnek akkor jóval nagyobb tartományt tudnak lefedni. Törekedjünk rá, hogy minél több felületen nézzen ki jól a weblapunk, webes alkalmazásunk.

Mobile First metódus

A weblapok nagy százaléka először monitorokra készül és a designer csak utána csökkenti az elemeket mobilra és tabletekre. Ez a lehető legrosszabb stratégia a mobil felületek szempontjából. A mobile first metódusnál a tervezést, a mobilon kezdi a designer és utána ezeket a felületeket bővíti tovább tablet és monitor nézetekre.

Előnyei:

  • Jövőtálló technológia
  • Optimalizált mobil felületek
  • Tartalom és felhasználói élmény (UX) fókusz
  • Tisztább dizájn és kód

Fat finger probléma

A modern mobileszközök nagy része már érintőképernyős, az újjunkat kell használnunk, ha egy weblap linkjére, vagy gombjára szeretnénk kattintani. Igen ám, de az újjunk jóval vastagabb mint egy egér kurzor. Ha a kattintható elemeket nagyon lekicsinyítjük, vagy közel tesszük egymáshoz akkor ez megnehezíti a felhasználók navigálását a weblapon. A megoldás egyszerű, használjunk nagyobb térközöket, gombokat a mobil felületeken.

A lehető legegyszerűbb formok

A felhasználók nem szeretik a formokat, pláne mobil felületeken. Törekedjünk a minél rövidebb egyszerűbb formok létrehozására, mert a felhasználók gyorsan tovább állnak. Ha nem tudjuk elkerülni a hosszabb formokat, használjunk folyamatjelző csíkot, wizard-ot, mely mutatja a felhasználónak mennyi van még hátra a befejezésig.

A fentiekből látszik, hogy rengeteg dolgot kell figyelembe venni az optimális felhasználói élmény eléréséhez a mobil felületeken is, de érdemes rá időt és pénzt fordítani. Lehet, hogy egy potencionális ügyfél a mobilon találkozik először a weblapunkkal, és ha ott nem találja meg az információt amit keres, vagy káoszt talál könnyen tovább is állhat. Ezzel üzletet bukhatunk.

Dolgozzunk együtt!

Amennyiben konkrét webdesign projekttel szeretnél megkeresni, vagy szeretnél velem együttműködni, kérlek vedd fel velem a kapcsolatot. Dolgozzunk együtt egy sikeres projekten!