Korábbi cikkünkből már kiderült, hogy az, hogy minden eszközön tökéletes felhasználói élményt nyújtsunk – melybe természetesen az is beletartozik, hogy jól nézzen ki és intuitívan lehessen használni –, fontosabb, mint valaha. 

Ezért egyre és egyre többen választják a reszponzív webfejlesztést. Azonban ezen a területen is számos gyakori hiba van, amely akadályozza a problémamentes, élvezhető böngészést. Lássuk, melyek ezek, és mit tehetsz ellenük.

1. Túl sokáig tart, hogy betöltsön az oldal

Gondolj bele, te hol használod leggyakrabban a telefonodat böngészésre. Az emberek nagy százaléka tömegközlekedésen, munkahelyén a kávészünetben vagy más üresjáratok alatt nézeget a mobilján weboldalakat – ami azt jelenti, hogy mind az idő szűke, mind a mobilinternet használata miatt fontos, hogy minél gyorsabban betöltsön az adott tartalom. Ezt pedig úgy érhetjük el, hogy a képek és a videók méretét optimalizáljuk, illetve minél letisztultabb, felesleges elemektől mentes kódot alkalmazunk.

2. El akarsz rejteni bizonyos tartalmakat

A reszponzív weboldalak fejlesztésénél általában mindig felmerül szempontként az, hogy minél kevesebb a tartalom az oldalon, annál gyorsabban fog betölteni. Ez így is van, és tényleg oda kell rá figyelni, hiszen amint az előző pontban is látszik, a betöltési sebesség a siker egyik kulcsa egy weboldalnál. Azonban sokan esnek abba a hibába, hogy a webes nézeten megjelenő tartalmat egyszerűen egy kódrészlet segítségével elrejtik mobilon. Ezzel az a probléma, hogy ebben az esetben még ha fizikailag nem is látszik, maga a tartalom attól még betölt. Így értékes másodperceket veszíthetünk. Törekedj inkább arra, hogy a mobilos nézetben tényleg csak olyan elemek kerüljenek a kódba, amelyek feltétlenül szükségesek.

3. Nem a megfelelő képméretekkel dolgozol

Nagy tévedés, hogy ugyanaz a kép ugyanolyan jól fog kinézni asztali gépen, mobilon vagy retina-kijelzőn. Azért lényeges szempont a képméret, mert egy nagy méretű kép, amely tökéletesen néz ki egy nagyobb monitoron, mobilon jelentősen csökkentheti az oldal sebességét. Egy mobilra optimalizált kép pedig laptopon vagy asztali gépen pixelesnek tűnhet a méretezési problémák miatt. Mindig ellenőrizd, hogy a weboldaladon található képek mindig megfeleljenek az adott platform “elvárásainak”.

4. Nem optimalizálsz az érintőképernyő adottságaira

Egy mobil vagy egy tablet egészen másképp működik, mint amikor az ember egy kurzor segítségével navigál egy weboldalon belül. Mobilon és tableten általában az ujjunkat használjuk böngészéskor, ezért például nem szerencsés túl kicsire tervezni és túl közel pakolni egymáshoz az elemeket. Gondold át a weboldalad fontos részeit is, és figyelj oda, hogy hova helyezed el őket: mobilon a képernyő alsó része a legkönnyebben elérhető, tableten inkább a felső sarkok. Emellett figyelj oda arra is, hogy egy érintőkijelzőn milyen görgetési, nagyítási stb. lehetőségek vannak.

5. Nem gondolsz a tesztelésre

Mind a marketingben, mint a UX világában az A/B tesztelés a legjobb barátod. Így lehet a legkönnyebben megállapítani, hogy a valódi végfelhasználóknak mik az igényeik. Közel sem biztos, hogy ugyanaz az elrendezés válik be mobilon, mint asztali gépen vagy tableten. A fejlesztési munkák során gyakran fordul elő, hogy megcsúszunk a megrendelt weboldal elkészítésével – mi mégis azt javasoljuk, hogy ne az A/B tesztelésen spóroljunk időt és pénzt, hiszen ezzel lehet a legkönnyebben megtalálni és kijavítani az oldal UX-szel kapcsolatos hibáit. Teszteld az oldalt több készüléken, több operációs rendszerben és böngészőben.

6. Túl sok elemet akarsz a kijelzőre zsúfolni

Mivel kis kijelzőről van szó, sok designer úgy gondolja, hogy ki kell használni minden egyes apró felületet az oldalon, ezért sok kis elemet zsúfol egy helyre. Azonban ez ahhoz vezethet, hogy a weboldal mobilnézete túlzsúfolt lesz, és bonyolult lesz rajta kiigazodni és navigálni. A betűméretek csökkentése szintén gyakori hiba. Amellett, hogy a kis méretek miatt nem könnyű a tartalom olvasása, egyéb UX szempontokat is figyelembe kell venni (pl. a túl hosszú sorokat tudat alatt nem annyira szívesen olvassuk). Itt “a kevesebb több” megoldással jársz a legjobban: bőven hagyj helyet az egyes elemek között, és figyelj oda a szövegek nagyságára és a sorok hosszúságára.

7. Elfelejted a nem mobilt használókat

Az is gyakran előfordul, hogy egy reszponzív webdesign megalkotója átesik a ló túloldalára. Bár évek óta rendkívül elterjedt a “mobile first” szemlélet, azonban ez nem jelenti azt, hogy csakis a kis kijelzős eszközök használóinak kedvezzünk, hiszen még mindig sok látogatás érkezik asztali gépről vagy laptopról is. Ha a tervezéskor a mobilnézetből indulunk ki, és utána foglalkozunk az asztali nézettel, érdemes odafigyelni az alábbiakra:

• a mobilos nézet általában vertikálisan tartalmazza egymás alatt a különböző menüpontokat – így nem elég, ha csak egy az egyben felnagyítjuk a mobilnézetet az asztali nézethez, hanem egész más elrendezésben kell gondolkodni, és a fennmaradó üres területeket is jól kell kihasználni
• mobilon és számítógépen máshogy olvasunk: külön-külön figyelj oda a betűméretekre (ne legyen se túl nagy, se túl kicsi) és a sorok hosszúságára
• minden elemnek legyen meg a helye mind mobilon, mind asztali nézetben, figyelembe véve a legfontosabb UX irányzatokat

8. Nem mobilbarát linkeket helyezel el az oldalon

Az előző részben írtunk arról, hogy a látogatók nagy része valamilyen közösségi médiából érkezik a mobilos weboldalakra. Már csak emiatt is nagyon oda kell figyelni, hogy milyen megoldásokat használunk az oldalon. Azonban teljesen elronthatja a folyamatot, és megszakítja a böngészés flowját az, ha saját weboldalunkról olyan tartalomra linkelünk, amely nem mobilbarát. Ha külső hivatkozásokat használsz, mindig győződj meg róla, hogy egy nem mobilbarát oldal nem rontja el a böngészés élményét.

9. Nem veszed figyelembe, hogy máshogy navigálunk mobilkijelzőn

Számos praktikus megoldás létezik arra, hogy mobilon barátságosabb legyen a navigáció. A weboldal tetején található főmenüt például a legtöbb designer egy ún. “hamburger menüben” gondolja újra, amikor a mobilnézet designját tervezi. A hosszú, sok teret kitöltő horizontális menüket célszerű mobilon inkább vertikálissá tenni, esetleg drop-down megoldást alkalmazni, hogy minél jobban kihasználjuk a rendelkezésre álló kijelzőméretet.

 

A reszponzív webdesignnal kapcsolatos cikksorozatunkban megismerhettétek ennek a népszerű módszernek az előnyeit. A reszponzív tervezést gondosan át kell gondolni, minden szempontot figyelembe kell venni mind megjelenés, mint UX szempontjából. A reszponzív webdesign az egyik legfontosabb alapelv manapság – ha használod, helyesen használd.

 

Forrás: Upwork, 3nions