Mitől jó egy mobilbarát weboldal?
Az egyik legfontosabb tény amire egy mobilbarát weblap tervezés során ügyelned kell, hogy a mobil felhasználók nagyon célorientáltak. Azonnal szeretik elérni az információt amit keresnek a lehető legrövidebb és legegyszerűbb módon.
A mobilbarát jelenlét kiemelten fontos
A mobileszközök évről évre egyre nagyobb százalékot képviselnek a statisztikákban. Elég ha kimész az utcára és szétnézel, mindig fogsz látni legalább egy alakot aki nyomkodja a mobilját. Tény, hogy az okostelefonok és a tabletek, phabletek terjedésével egyre több multimédiás tartalom vált fogyaszthatóvá, elérhetővé az emberek számára. Egyre könnyebben és egyszerűbben tudsz elérni tartalmakat.
Ezt a trendet pusholja a Google is azzal, hogy a mobilbarát weblapokat részesíti előnyben, ha mobileszközökön keresel. A fentieken felül a Google egy kis címkével is ellátja az ilyen típusú weblapokat, mellyel jelöli a keresési találatokban, hogy bizony mobilon is nyugodtan nézheted az adott oldalt. A vállalat többfajta címkével is kísérletezett, de úgy tűnik végleges verzió egy szürke “mobile-friendly” felirat lett.
Mitől lesz mobilbarát egy weboldal?
- A Google szerint attól, hogy például a mobilbarát weboldal nem használ Flash technológiát a tartalom megjelenítésére
- A mobilbarát weboldal olyan betűmérettel rendelkezik amelyek nagyítás nélkül is jól olvasható
- A mobilbarát weboldal a tartalmat az adott képernyőmérethez igazítja, így nem kell vízszintesen nagyítanod az olvasáshoz
- A mobilbarát weboldal linkjei körül megfelelő eltartás van és azok könnyedén kattinthatóak
A fentiekből is jól látható és nem győzöm hangsúlyozni, hogy aki a következő években szeretné kihasználni a modern webes jelenlét előnyeit, az egyszerűen nem hagyhatja ki a weblap tervezéskor, hogy a weblapja ne legyen optimalizálva minél több multimédiás eszközre. És nem csak a Google miatt. Egyre több felhasználó rendelkezik valamilyen multimédiás eszközzel, mellyel könnyedén el tudja érni az internetet. Felejtsd el azt a sztereotípiát, hogy az emberek a PC előtt görnyedve fogyasztják a webes tartalmat, ugyanis ez már rég nem így van. A webes fogyasztói szokások folyamatosan változnak és potenciális ügyfeleket veszíthetünk azzal, ha a weblapod nem megfelelően jelenik meg a mobileszközökön.
Aki képben van az tudja, hogy erre a problémára a reszponzív weboldal tervezés a legjobb megoldás. Igen ám, de a reszponzív weblapok nagy százaléka úgy készül, hogy első körben a monitorokra terveződik a weblap és csak utána készül el mobilos megjelenítés. Általában a mobilos nézet a monitoros nézet egy erősen megcsonkított verziója. Nagyon kevés a hely a mobilokon.
Ha böngészel a mobilodon tapasztalni fogod, hogy sokkal használhatatlanabbak, nehezen kezelhetőbbek a weblapok. Ez a jelenség, a fenti dolgok az elhanyagolt weblap tervezés miatt vannak, mivel a mobil verzió a monitoros verzió egy erősen megvágott verziója.
Mobile-first weblapok és a Google
Van egy másik metódus, a mobile-first metódus. Amikor a tervező mobilra tervez alapból és csak a mobilos felületek elkészülte után tervezi a monitoros felületeket. A mobile first metódus előnyeiről itt olvashatsz részletesebben. Ennek az előnye - mivel alapból mobilra van megtervezve a felület-, ezért kevesebb tartalom van eltüntetve és könnyebben kezelhető a weblap.
Mire ügyelj weboldal tervezés közben?
Összeírtam pár tippet, amire nem árt ha figyelsz, ha használható mobilbarát weboldalt szeretnél.
A weblap tervezés célja legyen egyértelmű
A felhasználóidnak mindig tudnia kell elsőre, hogy miről szól a weblapod, különben csak az idejüket vesztegeted. Ha lehetséges már az első képernyőn jó ha tudatod velük, hogy mivel fognak találkozni ha elkezdik böngészni a tartalmaidat.
Felejtsd el a desktop portolást
Adott egy nem mobilbarát weboldal és egy ügyfél aki szeretné minél gyorsabban és olcsóbban mobilbaráttá alakítattni a weblapját. Egy kis CSS módosítás ide, egy kis hamburger menü oda és kész is a mobil site. Sajnos ez egy igen elterjed módszer itthon, az esetek nagy részében gyenge felhasználói élménnyel rendelkező mobilfelületeket kap a végére a megrendelő. Normál esetben ilyen könnyen nem úszható meg a dolog, hiszen túl nagy a különbség a felületek között. Különbözik a beviteli mód (egér, ujj), különbözik a felület mérete (kicsi, nagy) és a használati szokások is különbözőek.
Csak a legfontosabb elemek maradjanak
A mobil felületeken sajnos rendkívül kevés hely áll rendelkezésre, éppen ezért a legfontosabb elemekre kell helyezni a hangsúlyt. A cél, hogy minél kevesebb kattintható felület, minél kevesebb zavaró elem legyen az oldalakon. A zavaró elemek eltüntetése segíti a felhasználói fókusz megtartását, a rövidebb oldalak pedig abban segítenek, hogy kevesebbet kelljen lapozni a felhasználónak. Persze ez nem mindig kerülhető el a weboldal tervezés során.
A kattintható elemek legyenek nagy méretűek
Az ujjaink jóval szélesebbek mint a precíz egér kurzor, ezért nagyobb felület szükséges a használatukhoz. Az Apple például 44px négyzet távolságot javasol a tapintható mobilfelületek köré. Természetesen ezt nem kell pixelpontosan betartani, de érdemes növelni a linkek körüli távolságot, a gombok kerületét és az eltartási távolságokat is, amennyire lehetséges. Így szellősebb lesz a tartalom és könnyebben kattinthatóak az elemek.
Törekedj a szellős struktúrára, a nagy térközökre és az olvasható betűkre
Kiemelten fontos a nagy térközök és jól olvasható betűtípusok használata a mobil felületeken. A nagy térközök jobban tagoltá teszik a tartalmat, a nagyobb betűk pedig könnyebben olvashatóvá. Az ügyfelek szeretik, ha minél több szöveg elfér egy oldalon, viszont az apró és zsúfolt betűket nehéz olvasni, főleg kisebb méretű telefonokon.
A mobilbarát weboldal nyitóoldalán található call to action gomb legyen elérhető scrollozás nélkül
Mobilbarát weblap tervezésénél érdemes figyelned arra, hogy a modern reszponzív weblapok nyitóoldala általában hero képpel és CTA (call to action) gombbal indul. Mobil nézetben, ha a weblap nem megfelelően van optimalizálva, a CTA gomb csak scrollozás után érhető el. Ez egy fatális hiba, a mobil nézetben a CTA gomb az első képernyőn azonnal legyen elérhető.
Használj rövid és egyszerűsített menüket a mobilbarát weboldal tervezése közben
A mobil felhasználók nem szeretik tekergetni a hosszú menülistákat. Erre kiemelten ügyelj a tervezés közben. Alakítsd a weblapod menüpontjainak listáját úgy, hogy minél egyszerűbben elérjék a mobil felhasználók a keresett menüpontot. 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üld a mobilon.
A kereső legyen könnyen elérhető a mobilbarát tervezésű weboldaladon
A mobil felhasználók információt keresnek a weblapokon. Ha nem találnak valamit, általában a keresőhöz fordulnak. Mobilbarát weblap tervezése közben, ha a weboldalad rendelkezik keresőmezővel, akkor mobil nézetben is rakd egy jól látható helyre és ne dugd pl. egy lenyíló menü mögé.
Engedd a felhasználóidat szabadon böngészni
A felhasználók szeretik feltérképezni, megismerni a weblapokat mielőtt különböző döntéseket hoznak azokkal kapcsolatban. Engedd a felhasználóidnak, hogy szabadon böngészhessenek, kötelező feladatok nélkül. A felhasználók adatainak túl korai bekérése például kevesebb regisztrációhoz vezethet.
Használj minél egyszerűbb űrlapokat, az adatok bekéréséhez
Mobilbarát weblap tervezése közben kiemelten figyelj arra a tényre, hogy a felhasználók utálják a hosszú, átláthatatlan űrlapokat. Használj minél egyszerűbb struktúrájú beviteli mezőket tervezéskor. Csökkentsd az űrlapok kitöltésének hibaszázalékát egyértelmű hibajelzésekkel. Ha nem tudod elkerülni a hosszabb formokat, használj folyamatjelző csíkot, wizard-ot, mely mutatja a felhasználónak mennyi van még hátra a befejezésig.
Ne engedd meg a felhasználóidnak a kétújjas nagyítást
A mobil felhasználók már hozzászoktak a lefelé görgetés szabályaihoz. Ne zavard őket össze nagyítással és a horizontális scrollozás lehetőségével. Azok a weboldalak amik kényszerítik a felhasználókat a horizontális scrollozásra, általában elbuknak a Google mobilbarát teszten és rosszabbul szerepelnek a keresési találatokban.
Törekedje a minél kevesebb beviteli mezőre
Az emberek jobban szeretnek kattintani, tappolni mint írkálni, főleg mobilon. Mobilon az írkálás lassú és fájdalmas procedúra. Egy nem mobilbarát weboldalnál általában a formok okozzák a legtöbb problémát. Minél rövidebb egy form, annál nagyobb eséllyel fogják kitölteni. Érdemes tehát minimálisra csökkentni az írkálás lehetőségét a mobil felületeken is.
Weboldal tervezés határidőre
Kérj ajánlatot
Felejtsd el a weblapod alján található “Teljes verzió”, “Asztali verzió” típusú linkeket
A fenti linkek segítségével egyes weblapok monitorokra tervezett verziói elérhetőek mobilon is. Ha mobilbarát weboldalt tervezel, felejtsd el ezeket a linkeket, mert azt sugallod a mobilos felhasználóidnak, hogy asztali verzióval több tartalmat fognak kapni.
Optimalizáld a teljes weblapod mobilra
A mobilbarát weboldal tervezésénél kiemelten fontos, hogy minden oldal optimalizálva legyen mobil felületekre. Azoknál a weboldalaknál, ahol ez nem történt meg a felhasználók összezavarodhatnak és ezáltal az adott weboldalak rosszabb teljesítményt nyújthatnak. A designerek általában 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 rá, hogy minél több felületen nézzen ki jól a weblapod, webes alkalmazásod.
Érvek az átgondolt weblap tervezés és mobilbarát weboldalak mellett
- Tízből négy magyarnak már van mobilnet előfizetése
- A tendenciák szerint Magyarországon többen interneteznek mobil platformokról, mint az asztali számítógépekről
- Ha valaki mobilon indít keresést a Google-ben, akkor a Google a mobilbarát weboldalakat részesíti előnyben
- Mobilos böngészés közben az emberek 40%-a kilép egy weblapról, ha az nem mobilbarát
- A felhasználók 48%-a bosszankodik, ha nem mobilra optimalizált oldalra lép
- A felhasználók 48%-a szerint az a cég aki nem optimalizálta weblapját mobilra, az nem foglalkozik megfelelően az üzletével
Mobile first és kevesebb a probléma
A mobile first weboldal előnye, hogy a tervezés a mobil felületeknél kezdődik és a desktop felületeknél ér véget. Pont emiatt kerülhető el a fenti problémák nagy része. Mint általában minden weboldal tervezésnél, a mobile first metódusnál is ajánlott a drótváz, prototípus tervezése, készítése. Érdemes már előre definiálni a reszponzív töréspontokat, és a legkisebb mobil felbontásra optimalizálni először.
Ha szeretnéd tesztelni, hogy mobilbarát-e a weblapod a Google szerint, az alábbi linken megteheted:
https://search.google.com/test/mobile-friendly
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 weblapoddal, é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 bukhatsz.
