Weboldalakat nemcsak asztali gépre, hanem mobilra is tervezünk

Ha mobilbarát, akkor felhasználóbarát is. Vagy mégsem?

Mobilbarát vagy mobile first. Mi a különbség a két kifejezés között? Miért fontos ez különösen akkor, amikor redesignról, vagyis egy weboldal vizuális és szerkezeti újratervezéséről beszélünk?

A mobile first-elv, vagyis hogy elsősorban mobilnézetre tervezünk, majd onnan ültetjük át a designt tabletre és asztali gépes megjelenítésre, nem újdonság a webdesignban. Mégsem alkalmazzák a szakmában olyan sokan, mint elvárható lenne. Gyakran ennek eredménye, hogy habár a weboldal a kódolt töréspontok miatt alkalmazkodik az eszköz képernyőjének szélességéhez (ezt jelenti a reszponzivitás), mobilon mégis túlzsúfolt, nehezen használható lesz. 

Amíg a zsúfoltság inkább csak esztétikai kérdés a mobilokon, a használhatatlanság már idegtépő, és a látogató haragjában inkább bezárja a weboldalt. Ügyfeleket és vásárlókat pedig egyetlen vállalkozó sem akar veszíteni. Mit lehet tenni, hogy ezt elkerüljük?

Pásztor Dávid a UX Design című könyvében felmérések és megfigyelések alapján készített egy szuper ábrasorozatot arról, hogyan tervezzünk kényelmes mobilalkalmazásokat. Azt írja, hogy a tervezés során figyelembe kell venni a kéz és az ujjak méretét, valamint az érintőképernyő szélességét. Habár a fejezet elsősorban az appokat veszi górcső alá, van néhány általános érvényű szabály, amelyeket a webdesignban is érdemes megfogadni. Például aki a hüvelykujját használja a képernyő nyomkodásához, nem tudja lekattintani az elemeket akkor, ha négynél több lehetőség van egymás mellett. Ilyen, amikor egy vállalkozó szolgáltatásait szeretnénk felsorolni, vagy összehasonlíthatóvá akarjuk tenni a különféle csomagajánlatokat.

Ujjgyakorlatok mobilon

Mivel egyre nagyobbak és szélesebbek az érintőképernyők, fellélegezhetünk, mert van helyünk bőven? Korántsem, hiszen itt jön képbe a reachability, vagyis hogy mit, hogyan érünk el az ujjainkkal. A UX Design könyv szerint három alapvető pozícióban tartják a kezüket a mobilozók.

  • Az egykezesek (ők vannak a legtöbben),
  • a kétkezesek (aki egyik kézzel megtámasztják a mobilt és a másik kezük hüvelyk- vagy mutatóujjával nyomkodnak)
  • és a ritka kétkezesek (akik mindkét hüvelykujjukkal nyomkodnak – a mobilon játszók is ilyenek).

 

Habár Pásztor Dávid mobilalkalmazások tervezéséhez írta le a fentieket, nem árt ezeket az ismereteket figyelembe venni a webdesignban sem. Vannak persze nem elhanyagolható különbségek. Például amíg egy alkalmazásban valószínűleg nem a képernyő jobb felső sarkába tervezzük a navigációt, addig egy weboldal mobilos megjelenítésében 99%-ban ide kerül a lenyitható, úgynevezett hamburger menü. 

A Google szűri a nem mobilbarát weboldalakat

Webdesignerként egyre nagyobb felelősség a weboldalak mobilos, pontosabban felhasználóbarát megjelenítése. A Google a 2014 óta növekvő mobilos forgalom miatt új rangsorolási módszert vezetett be, amelyről a Thepitch.hu egy remek összefoglaló cikket  jelentetett meg. A lényeg, hogy változtak az indexelési feltételek, így próbálja szűrni a Google a mobile first, a reszponzív és a nem mobilbarát weboldalakat.

Talán a legfontosabb aspektusa ennek az egyébként elég bonyolult folyamatnak, hogy a Google nem nézi jó szemmel, ha mobilon vagy asztali gépes nézetben elrejtünk blokkokat, információkat. Ez főleg az oldalépítő bővítményekkel készült honlapokon figyelhető meg, pl. az Elementornál, ahol lehetőség van teljes szekciókat elrejteni a képernyőkről.

Te hogyan használod a mobilodat? Van olyan weboldal, amit azért nem szeretsz mobilon megnyitni, mert „fájdalmasan” rossz használni?