Reszponzív webdesign, Mobile-first design

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.

Hogyan javítsunk a mobil felületek felhasználói élményén (UX)?
Reszponzív webdesign
Mobile-first design
Author: Szabolcs Bakos

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.


Bakos Szabolcs, UI/UX Designer

Kövess Facebookon a friss bejegyzésekért

Bakos Szabolcsnak hívnak, szabadúszó UI/UX Designer vagyok, több mint 17 év webdesign tapasztalattal a hátam mögött, cégek és vállalatok számára tervezek weblapokat.



Vedd fel velem a kapcsolatot!

Amennyiben kérdésed van, legyen az egyszerű információkérés, együttműködés, vagy üzleti megkeresés, örömmel állok a rendelkezésedre.

UI/UX Design
Facebook Twitter Google+ Linkedin
Web Design