A mobilbarát weboldal tervezés terén a Google nem csak beszél, hanem tovább folytatja a mobilbarát alapú stratégiáját. Ha weblap tulajdonos vagy és hosszútávban gondolkozol, jobban jársz, ha Te is így teszel.
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.
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 weboldal 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 weboldal tervezés miatt vannak, mivel a mobil verzió a monitoros verzió egy erősen megvágott verziója.
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.
Összeírtam pár tippet, amire nem árt ha figyelsz a weboldal tervezés során, ha használható mobilbarát weboldalt szeretnél.
Weboldal tervezése közben érdemes figyelni arra a tényre, hogy 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.
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.
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.
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.
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.
Mobilbarát weboldal tervezésénél érdemes figyelni 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ő.
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 mobil felhasználók információt keresnek a weblapokon. Ha nem találnak valamit, általában a keresőhöz fordulnak. Mobilbarát weboldal 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é.
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.
Mobilbarát weboldal 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.
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.
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.
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.
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.
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.
Bakos Szabolcsnak hívnak, szabadúszó UI/UX Designer vagyok, több mint 17 év tapasztalattal a hátam mögött, cégek és vállalatok számára tervezek, auditálok weblapokat, webáruházakat és webes alkalmazásokat.
Képszerkesztés ingyen, Photoshop nélkül! Lehetséges? Ismerd meg a legjobb ingyenes online képszerkesztő programokat.
Összegyűjtöttem több mint 20 hasznos tanácsot, mely rengeteg hasznos tippel szolgálhat számodra, ha a design szakmában mozogsz.
Imádtam az összes Ipademet, a technológiai remekművek voltak, csak egy problémám volt velük, gyakorlatilag nem használtam őket semmire a reszponzív weblapok fejlesztésen kívül.
Véleményed van? Szólj hozzá!
Jelenleg még nem szóltak hozzá ehhez a bejegyzéshez.