Miért fontos, és milyen egy jó mobilbarát weboldal?

Összefoglaltuk, amit egy mobilbarát weboldal kialakításáról tudnod kell: mit tart fontosnak a Google, hogyan tedd, mire figyelj, milyen hibákat ne kövess el? Egyszóval, mindben benne van, ami fontos lehet egy mobilbarát weboldal készítése kapcsán.

Frissítés (2018.11.08.): Egy új fejezettel bővítettünk: irányelvek a mobil-webdesignban, melyeket érdemes megkérdőjelezni

A Google 2014-ben vezette be a Mobilbarát címkét azokra a weboldalakra, melyek okostelefonon és tableten is jól használhatók, és ez a címke meg is jelent a kereséseknél. 2015-ben azonban tovább lépett a cég, egyrészt e-mailben elkezdte figyelmeztetni a weboldaltulajdonosokat arra, hogy nem mobilbarát a weboldaluk, és jelezte, hogy ez bizony problémát fog okozni, ha az okostelefon-tulajdonosok készülékein is jó pozícióban szeretnék megjelentetni weboldalaikat a találati listán.

Miért fontos egy mobilbarát weboldal?

A mobilos böngészés alaposan felforgatta a webdesignt, teljes szemléletváltás következett be, elég csak olyan dolgokra gondolni, mint a reszponzív tervezés vagy a flat design. A mobileszközök hatása azonban nem merült ki ennyiben, sok más ponton is beleavatkoztak netezési szokásainkba és az életünkbe.

A mobiltelefonok egyik meghatározó és talán legfontosabb tulajdonsága, hogy állandóan velünk vannak használatra készen, szemben a PC-vel, mely még a laptopok esetében is némileg korlátozottan bírt ezzel a tulajdonsággal. Ennek következménye, hogy tevékenységeink során mindig a telefonunkat bámuljuk vagy bökdössük, azaz a figyelmünket megosztva használjuk a mobilt, gyakorlatilag folyamatosan multitaszkolva. (Ennek káros hatása persze már a PC esetében felmerült, és bőven ki lett elemezve, igaz ott a PC világán belül párhuzamosan futó tevékenységeinken volt a hangsúly). A mobil és a tablet a tévé mellé is felsorakozott második képernyőként – főleg a közösségi média miatt -, párhuzamos használattal megosztva a közönség figyelmét.

A mobileszközök társasága olyannyira folyamatos, hogy

• a mobiltelefont használók 60 százaléka ma már elsősorban okostelefonját vagy tabletjét használja netezésre.
• Az átlagos médiafogyasztás már elérte a napi 7 órát, amiből azonban 1,8 óra a mobil nyomogatásával telik. A számítógépük előtt pedig csak 1,6 órát töltenek az emberek, és ami meglepő: még ennél is kevesebb, 1,5 óra jut már csak a televíziónak.
• Az emberek már annyira kötődnek a mobiljukhoz, hogy inkább lemondanak az alkoholról, a csokoládéról vagy a szexről, mint az okostelefonjukról.
• Az emberek 70 százaléka az ébredést követő egy órában biztos, hogy a mobilja után nyúl.
• 56 százalék ugyanezt megteszi közvetlenül lefekvés előtt is.
• 48 százalék hétvégente sem tud vagy akar a telefonjától szabadulni, és
• 51 százalék folyamatosan használja a mobilját nyaralás alatt is.
• 44 százalékunk ráadásul nagyon ideges és ingerlékeny lesz, ha egy hétig el kell szakadnia a mobiljától.

Vannak olyan földrajzi régiók, ahol az okostelefon-használók 44 százaléka tekinti magát mobiltelefon-függőnek. Ez az arány pedig lényegesen magasabb, mint a PC-k esetében a 11 százalékos függőségi arány.

Az Econsultancy az Adobe-bal közreműködve 2015-ben 2973 céget kérdezett meg szerte a világban, és úgy találták, hogy szinte mindenki komolyan foglalkozik a kérdéssel, és túljutottak azon a fázison, amikor még csak ötlet szintjén létezik a mobilra optimalizálás. Ennek oka, hogy most már senki sem tagadhatja a mobilos böngészés jelenlétét és egyre növekvő arányát. De a legsúlyosabb érv talán az, hogy tapasztalják a mobileszközökhöz köthető bevételek fokozódó növekedését.

Mint kiderült, sokaknak volt már legalább 12 hónapja kidolgozott mobilstratégiája, bár a legtöbben éppen abban a szakaszban járnak, hogy még alakítják ezt a mobilstratégiát. A legkisebb egyébként azoknak a cégeknek az aránya, akik még neki sem álltak foglalkozni a kérdéssel.

A kutatók regionálisan is kíváncsiak voltak a számokra, így a földrészeket is összehasonlították. Észak-Amerika nem áll annyira jól, mint várnánk, az európai és az ázsiai cégek előrébb járnak:

De a legfontosabb kérdés, hogy miként optimalizálnak a cégek mobilra, azaz melyik megoldást részesítik előnyben. Talán nem is meglepetés, hogy a Google által favorizált reszponzív designt választják a legtöbben. Habár az adaptív design (dynamic serving) is erősen ajánlott megoldás – és bizonyos szempontokból jobb is -, jóval kevesebb híve van, aminek a kutatók szerint az lehet az oka, hogy sokkal összetettebb és erőforrásigényesebb megoldás. Mindenesetre megfigyeléseik szerint minden évben többen választják.

Mit várnak el az emberek egy mobilbarát weboldaltól?

A legtöbb cégtulajdonos már tisztában van azzal, hogy minden vállalkozásnak szüksége van mobilbarát weboldalra is. Az azonban talán még nem teljesen világos mindenki számára, hogy mit is várnak el a felhasználók egy-egy mobilbarát weboldaltól.

Mint egy kutatásból kiderült, az emberek 94 százaléka keresett már rá cégre, vállalkozásra az okostelefonján, illetve 61 százalékuk rendszeresen – akár napi szinten – használja erre a célra a mobilját. Az emberek 90 százaléka helyi éttermekre keresett rá, 64 százalék szórakozási lehetőségekre (például moziműsorra, programokra), 58 százalék viszont valamilyen kiskereskedelmi céget akart megtalálni.

Mit akarnak látni egy mobilos weboldalon az emberek?

• Legelőször is a kapcsolati információkat (címet, telefonszámot) és a nyitva tartást.
• Szintén sokan kíváncsiak a cég áraira, a termékek és szolgáltatások listájára.
• Ennél azért kevesebben, de még 39 százalék fényképet is szeretne látni.
• 10-20 százalékuk akar videókkal, vásárlói véleményekkel, közösségi média linkekkel, információs cikkekkel vagy blogbejegyzésekkel találkozni.

Mi zavarja őket?

Vannak viszont olyan dolgok, amelyek kifejezetten idegesítik az embereket a mobilos weboldalakon. Ilyen például az információk hiánya és a gyenge reszponzivitás. Az emberek 46 százaléka ideges lesz, ha egy általa meglátogatott weboldalon nem találja meg könnyen a nyitvatartási időt, 42 százalék arra számít, hogy mindjárt az első oldalon látni fogja a telefonszámot és a címet, míg 34 százalék morcos lesz, ha a mobilos weboldalon nem található meg minden olyan információ, ami a desktop oldalon szerepel.

Ugyanakkor a felmérésből az is kiderül, hogy komoly problémát tud okozni a felhasználóknak, ha valami gond van a szöveg méretezésével és a reszponzivitással. A felhasználók súlyos hibának tartják, ha egy weboldalon zoomolni kell azért, hogy valamilyen információhoz hozzájussunk, vagy ha tudnak könnyen megnyitni egy linket. De a megkérdezetteknek a negyede már akkor is méltatlankodik, ha egy telefonszám megérintésére nem ugrik fel azonnal a tárcsázó, benne a számmal.

Mindezek mellett még a sebesség és a navigáció kérdése is igen lényegesnek tűnik. Az emberek közel 72 százaléka ugyanis jelezte, hogy ha egy weboldal túl lassú mobilon, akkor egyszerűen otthagyja. Ráadásul a megkérdezettek 30 százalékának már az is elegendő indok, hogy lelépjenek egy weboldalról, ha nem néz ki elég jól a telefonjuk kijelzőjén.

Hogyan reagálnak?

És mi van akkor, ha egy céges weboldalon a felhasználók nem találják meg az általuk keresett infót? Az emberek több mint fele képes rákeresni a cég Facebook-oldalára, vagy más forrásokra, hátha ott megtalálják, amit akarnak. Ugyanakkor 39 százalékuk inkább egy másik céget keres a neten. Ez pedig egyértelműen azt jelzi, hogy a kis cégek igen könnyen vevőket veszíthetnek, ha nincsen jó mobilos weboldaluk.

Ugyanakkor, ha egy cégnek van egy jó mobilbarát weboldala, akkor az emberek 72 százalékában az jó benyomást kelt, 55 százalék egyből azt gondolja, hogy a cég kifejezetten törődik az ügyfeleivel, és 49 százalék szívesen üzletet is köt vele.

Mindebből tehát az a tanulság vonható le, hogy nem elég, ha van egy mobilra optimalizált weboldalad, annak designját a felhasználók igényeire kell szabni: könnyen megtalálható kapcsolati és nyitvatartási adatokkal, kattintható telefonszámmal, valamint a termékek, szolgáltatások és árak felsorolásával, hogy az emberek tudják, mire számíthatnak.

Irányelvek a mobil-webdesignban, melyeket érdemes megkérdőjelezni

Kialakultak mára olyan elvek a mobil-webdesignban, melyeket mindenki követ, különösebb megfontolások nélkül. Pedig mint Alex Jasin a Smashing Magazine-ban felhívja rá a figyelmet, ezek csak irányelvek, nem pedig megkérdőjelezhetetlen igazságok. El is kezdi boncolgatni a leggyakrabban felmerülő mítoszokat.

A mobilos felhasználók mindig sietnek?

Gyakran halljuk a mobilos tervezésnél, hogy a mobilos felhasználókra úgy kell gondolni, mint akik állandóan úton vannak, rohannak, nagyon könnyen megzavarják őket a külső körülmények. Miközben persze ennek az elvnek van alapja, hiszen valóban sokszor használjuk a mobilunkat menet közben, a mobilos böngészés számára kedvezőtlen körülmények között. De azért azt is be kell vallani, hogy ez nincs mindig így. És persze nem is mindenkire igaz.

Ebből az következik, hogy kénytelen leszel megismerni a saját felhasználóidat, ahelyett, hogy elfogadnád és alkalmaznád ezt az elvet. Az persze nem kérdés, hogy a mobiloknál a sebesség kulcsfontosságú tényező, és a Google AMP-projektje is arra hívja fel a figyelmet, hogy rendkívül fontos a betöltődési idő a weboldalaknál. Ugyanakkor érdemes arról előbb meggyőződnöd, hogy milyen jellemzői vannak a Te közönségednek.

Ehhez bele kell merülni az analitikába, és megállapítani, hogy milyen különbségek vannak a mobilos és az asztali gépes szegmensek viselkedésében. Tehát, ha például azt látod, hogy nincs különbség az oldalon eltöltött időt tekintve a két csoport között akkor nincs értelme eltérően kezelni őket a mobilos és a desktop oldalon. Természetesen nem minden weboldalra igaz ez, ahogy az sem, hogy az oldalon eltöltött idő lenne az egyetlen és tökéletes jelzője a konverzióknak. De mi kell ahhoz, hogy jobban megértsd a közönséged?

• Ismerned kell a weboldalad céljait. Arra használod például a weboldalad, hogy bevételt termeljen számodra? Vagy azt akarod megmutatni a versenytársaidnak, hogy mennyire innovatív a céged?
• Ismerned kell a célközönséged! Tudnod kell kik ők, mit akarnak, mit keresnek, milyen problémáikat kell megoldanod, hajlandóak elolvasni egy hosszú bejegyzést, vagy inkább a rövid videók érdeklik őket?
• Tesztelned kell az ötleteid, mielőtt bármilyen változásba belevágsz. Tudnod kell, hogy mi működik és mi nem, még azt megelőzően, hogy belekezdenél a weboldalad átalakításába.

A mobil weboldalakon kevesebb funkcióra van szükség?

Talán akadnak páran, akik még emlékeznek arra, hogyan használtuk az internetet 10 évvel ezelőtt. Olyan tartalmakat kerestünk, melyek feldolgozása kevés időt emészt fel. Akkor még az embereknek nem állt szándékában a mobil-weboldalak felfedezése vagy vásárlás a neten. Az adatkapcsolat lassú volt és drága. Akkor tehát volt értelme annak, hogy a weboldalak mobil verziói csak a minimumot kínálják. Vagyis, ha egy funkció szükségességével kapcsolatban kétely merült fel, akkor inkább elhagyták. Hiszen, ha a felhasználók a teljes weboldalra voltak kíváncsiak, akkor leültek a gép elé.

Mára azonban változott a helyzet. Az okostelefonoktól való függőség egyre nő. Egyre több ember használja elsődleges kapcsolatként a világhálóhoz a mobiltelefonját. Ma már, amikor valaki meglátogat egy weboldalt, azt várja, hogy ugyanazt lássa mobilon, mint az asztali gépes verzióban.

Amin feltétlenül túl kell lépni, hogy a kisebb kijelzőkön nem akarják felfedezni a weboldalakat az emberek. Tehát ahelyett, hogy eltávolítanál funkciókat, inkább a fontossági sorrendjüket kell meghatároznod. Vagyis kínáld ugyanazokat a hasznos funkciókat mobilon is, miközben persze figyelembe veszed a kisebb kijelző korlátait! Ugyanígy nem kell lemondani a felugró ablakokról sem, hiszen mobilon is fontos a feliratkozás, a letöltés, mindössze a mobilos környezetre kell szabni.

Az egyszerűség jó, az összetettség rossz

A “kevesebb több”, halljuk nagyon sokszor, ami persze igaz, ugyanakkor nem azt jelenti, hogy egy mobil-weboldalnak csak egy light-verzióját kell nyújtania a desktop megfelelőjének. Sok designer külön kezeli a mobilos és az asztali gépes felületet, mondván: eltérő igényeknek kel megfelelniük. Természetesen vannak korlátai a mobileszközöknek, azonban a felhasználók igényei nem változnak meg jelentős mértékben attól, hogy a mobiljukat vagy a számítógépüket használják.

Azt kell megérteni, hogy a felhasználóknak nem egy lebutított verzióra van szükségük mobilon, hanem az összetett rendszert nem túlbonyolítva kell számukra elérhetővé tenni. A több kattintás sem feltétlenül rossz dolog. A lényeg az, hogy a weboldal átlátható és könnyen feldolgozható legyen, ne pedig zsúfolt és kusza. Az összetettség tehát nem rossz dolog, így amikor elkészíted a weboldalad, akkor arra figyelj, hogy az kellően felhasználóbarát legyen.

Az elveket mindig be kell tartani

A Google material design elvei jó alapot nyújtanak arra, hogy megértsd, miként kell kialakítani egy digitális élményt az elvek következetes betartásával. Az elvek betartásából következik az is, hogy egy applikáció teljesen máshogy néz iOS-en, mint Androidon. De az igazi gond akkor merül fel, amikor egy olyan designt alkotsz, mely összeütközésbe kerül az irányelvekkel. Ilyenkor felmerül, hogy követni kellene azokat, vagy pedig a tapasztalatra építeni?

Az irányelvek csak ajánlások, nem pedig kötelezően betartandó szabályok. A Google is úgy fogalmaz, hogy a design annak felfedezése, mi működik a legjobban. Tehát, ha a weboldalad designja szembemegy az irányelvekkel, akkor el kell döntened, hogy valóban gond van vele, vagy pedig egyszerűen arról van szó, hogy az egyedi felhasználói igényekre tervezed az oldalt. A Google sem veszi minden esetben figyelembe a saját material design alapelveit. Ezért Te is inkább a felhasználóidra tervezz, még akkor is, ha ehhez el kell térni az irányelvektől!

A felhasználók és a designerek ugyanazt gondolják?

Ez tulajdonképpen nem egy mítosz, és nem is elsősorban a mobilokhoz kötődik – bár ott is igaz -, sokkal inkább a gyakorlatban jelentkező probléma. A felhasználó-központú design első szabálya az, hogy Te nem a felhasználó vagy. Ugyanakkor a weboldaltulajdonosok és a designerek gyakran úgy állnak hozzá a tervezéshez, hogy “mi jobban tudjuk”. És persze gyakran úgy vélik, hogy mindenki ugyanúgy gondolkodik, mint ők. A tervezés is olyan kérdések mentén zajlik, hogy “vajon én szeretném használni ezt a funkciót?” A gond ezzel az, hogy ilyenkor eltűnik a képből az, akinek a weboldal készül.

Pedig a felhasználók eltérően élik meg a weboldalad használatát, mint Te. Az emberek csak azt akarják a weboldaladból, ami hasznos számukra. Ha nem találják hasznosnak az általad kínált funkciókat, tartalmakat, akkor nem is foglalkoznak vele. Az emberek a problémáikat akarják megoldani a weboldaladon is. Míg Neked a profit számít, nekik a megoldások. Időnként a két érdek találkozik egymással, ugyanakkor ehhez figyelned kell a felhasználói igényekre. Ehhez megint csak meg kell ismerned a felhasználóidat, és persze tesztelned kell a webdesignt.

A lényeg tehát

• Ismerd meg a közönséged és a céljaikat: határozd meg a weboldalad célját, a célközönséged, és teszteld az ötleteid, hogy adatokat szerezz a látogatóidról!
• Bővítsd a mobilos lehetőségeket: használd ki a mobilok érzékelőit, adj a weboldaladhoz olyan funkciókat, melyek csak mobilon elérhetők!
• Ne félj az összetettségtől: egy ötlet mindig egy oldalra kerüljön. Tedd a tartalmakat a megfelelően címkézett elemek alá másodlagos oldalak helyett! És győződj meg arról, hogy az oldal világos és könnyen befogadható.
• Az irányelveket csak ajánlásoknak tekintsd, ne szabályoknak!
• És próbáld megismerni a felhasználóid nézőpontját: végezz mobil használhatósági teszteket, hogy jobban megértsd a közönséged igényeit!

Mennyit tudnak és mennyit hajlandóak olvasni az emberek mobilon?

Miközben a tartalmakat tekintve határozott trend mutat az egyre nagyobb terjedelmek felé, és ezt támogatja a Google rangsorolása is, addig akad némi kétely a mobilos felhasználók befogadási képességét és olvasási hajlandóságát illetően. Egy 2010-es tanulmány arra hívta fel a figyelmet, hogy mobilt használva romlik az emberek szövegértése a kisméretű kijelző miatt. Ez alapján az a feltételezés született, hogy kisméretű kijelzőn a felhasználók egyszerre kevesebb szöveget látnak, ezért nagyobb mértékben kell a memóriájukra támaszkodniuk az olvasás során ahhoz, hogy összefüggésbe helyezzék az olvasottakat.

Egy újabb vizsgálat

Ez tehát azt jelenti, hogy a kisebb kijelző jobban terheli a munkamemóriát, az emberek pedig ezt nem tudják fenntartani, így a szövegértés romlik – foglalta össze a Nielsen Norman Group, mely 6 évvel később maga is végzett egy érdekes tanulmányt a témával kapcsolatban, de pont ellenkező eredményre jutottak.

Az NNG vizsgálatában 276 résztvevőt kértek meg, hogy különféle témákban különböző cikkeket olvassanak el mobilon, illetve számítógépen. Néhányat közülük könnyű volt megérteni, másokat nehezebb. Minden cikk elolvasása után válaszolniuk kellett néhány kérdésre, hogy így mérjék fel a kutatók, mennyit értettek meg az olvasók a szövegekből.

Az eredmény pedig az lett, hogy nem találtak gyakorlati eltérést a szövegértés foka között mobilon és számítógépen. Ez ellentmondott a kiinduló elméletnek, illetve a másik kutatásnak. Ennek ellenére akármilyen alaposan vizsgálták is a dolgot, mindig ugyanarra az eredményre jutottak: nincs számottevő különbség a megértés fokát tekintve. De lássuk a részleteket, mert akadnak még érdekes dolgok!

Megértés: egy kicsit még jobb is mobilon

Mint kiderült, nem hogy nem értik jobban a szövegeket számítógépen olvasva az emberek, hanem mobilon egyenesen magasabb lett a megértési pontszám. Ha nem is sokkal, de egy kis mértékben, melyet nem tekintettek a gyakorlatban szignifikánsnak: 3 százalékkal. Természetesen a nehezebben befogadható és hosszabb szövegek esetében rosszabb volt a megértés foka.

Ugyanakkor az is látható az eredményekből, hogy a mobilok előnye a megértést tekintve nehezebb és hosszabb szövegeknél némileg csökkent. De ez az eltérés sem tekinthető számottevőnek. Az NNG szerint elképzelhető, hogy a rendkívül nehéz szövegek megértése már rosszabb mobilon, azonban ők is elismerik, hogy ezt legfeljebb további vizsgálatokkal lehetne igazolni, de az eredmény közel sem biztos.

Olvasási sebesség

Nem túl meglepő, de az olvasási sebesség is alacsonyabb nehezebb szövegek esetében, illetve mobilon lassabb, mint számítógépen. Viszont a könnyű szövegeket azonos sebességgel olvasták az emberek mobilon és számítógépen is. Számszerűsítve 30 milliszekundummal több időt töltöttek az emberek egy-egy szó elolvasásával mobilon, mint számítógépen a nehezebb szövegeknél. Ez így néz ki grafikonon ábrázolva:

Mindebből azt a következtetést vonták le, hogy nehezebb szövegeknél már nagy terhelést kap a munkamemória, és ahhoz, hogy az olvasók elérjék ugyanazt a megértési szintet

• vagy alaposabban kell olvasni, hogy megjegyezzék a releváns információkat,
• vagy újra el kell olvasni bizonyos szövegrészeket.

A pontosságot a sebesség rovására tartották fenn az emberek, vagyis le kellett lassulniuk, hogy a megértésben ugyanazt a szintet elérjék, mint számítógépen. Bonyolult szövegeket tehát nehezebb olvasni mobilon – szól a kutatók következtetése.

Feltevésük szerint a szöveg egy bizonyos bonyolultsági fokánál az emberek már feltehetően feladják a szöveg teljes megértését, mert annyival több időt venne igénybe a befogadás, így végül ezeknél a nagyon bonyolult szövegeknél mobilon romlik a megértés. De ez megint csak feltételezés, viszont passzol az NNG elméletébe.

Kétszer annyi időt töltünk el mobilon hosszabb cikkek olvasásával

Az előbbi megállapításokat talán érdemes kiegészíteni a Pew Research egy korábbi kutatásával, mely szerint az emberek kétszer annyi időt töltenek a mobilon a hosszabb cikkek átböngészésével, mint a rövidekkel. A tanulmány a Parse.ly látogatói viselkedéssel kapcsolatos adatain, illetve 78840 darab, 30 amerikai híroldalról származó cikken alapul, melyeket 71 millió látogató ért el okostelefonján keresztül. Ennek a mennyiségnek 24 százaléka volt úgynevezett long-form tartalom, ami 1000 szónál hosszabb cikket jelent.

Habár a rövidebb tartalmak uralják a netet, és összességében több forgalmat is eredményeznek, a tanulmány szerint a hosszabb szövegek közel ugyanolyan mértékben érdeklik az embereket – még akkor is, ha mobiltelefont használnak -, mint a rövidebbek. Ráadásul kétszer annyi időt töltenek ezek előtt a tartalmak előtt, mint a rövidebb cikkekkel. És ez a különbség a nap minden szakában közel azonos, ahogy attól is nagyjából független, hogy milyen úton (linkre kattintással, kereséssel, közösségi médián keresztül, stb.) jutnak el a tartalomig a felhasználók.

Utóbbi kapcsán a kutatás megemlíti, hogy akkor töltötték a leghosszabb időt (148 másodpercet) olvasással az emberek, amikor belső linkről érkeztek egy őket érdeklő szövegre. A legrövidebb időt – 111 másodpercet – pedig akkor foglalkoztak egy hosszabb anyaggal, amikor a közösségi médiából kattintottak rá, de a keresésből érkezők sem mutattak sokkal jobb eredményt. A helyzet egyébként a rövidebb cikkek esetében is ugyanez. A közösségi oldalak közül a Facebook hozta a legrosszabb eredményt 107 másodperccel a hosszabb szövegeknél, és 51 másodperccel a rövidebbeknél.

Átlagosan persze a hosszabb tartalmak esetében is még mindig csak 123 másodpercről beszélünk, ami alig több, mint két perc, és a több ezer szavas cikkek elolvasásához bizony ennél jóval több időre lenne szükség.

Miért lesz egyre jobb a mobilos szövegértés?

Visszatérve a szövegértésre, az NNG kutatói szerint más oka is lehet annak, hogy most már jobbak az eredmények a mobilos szövegértésnél, mint a 6 évvel ezelőtti vizsgálatban.

• Például azért, mert a szövegek megjelenése azóta sokat javult, nagyobbak lettek a mobilok kijelzői, jobb lett a felbontásuk (egy iPhone 7 kijelzője 6,5-ször több pixelt tartalmaz, mint a 6 évvel korábban használt iPhone 3-é.)
• A felhasználók ma már sokkal többet olvasnak mobilon, és megszokták ezt. Kényelmesebb nekik scrollozni a hüvelykujjukkal, mint a görgetősávot használni a monitoron (merthogy sokan nem a görgőt használják erre az egéren).
• Kevesebb a zavaró dolog mobilon. A kijelző ugyan kisebb, viszont kevesebb az egymással versengő információ rajta.

Összefoglalva elmondható tehát, hogy az olyan lineáris tartalmakat, mint a cikkek, különösen, ha könnyen olvashatók, nem nehezebb megérteni mobilon sem, mint számítógépek monitorán.

A használat nem lesz könnyebb

Mindez azonban nem jelenti azt, hogy a mobilokat ugyanolyan könnyű lenne használni mint az asztali gépeket vagy a laptopokat. Hiszen tudjuk, hogy a feladatok végrehajtása mobileszközökön lassabb, mint asztali gépeken. A legtöbb weben végrehajtandó feladat nem lineáris tartalmak olvasásából áll, hanem annál összetettebb. Az online tevékenységek során bizonyos fokú navigációra és interakcióra van szükség. Ilyen például a webáruházak használata, ahol ráadásul különböző tartalmak összehasonlítása is megszokott feladat.

Másodszor pedig, habár az érthetőséget mérő pontszámok nem térnek el egymástól mobil és asztali gépek esetén, ez csökkenő sebességgel jár mobilon: minél hosszabb a szöveg, annál jobban lassul az olvasó mobilon, hogy elérje ugyanazt a megértési fokot. A mobilt használóknak nehezebb szövegeknél keményebben kell dolgozniuk, mint a számítógépen olvasóknak. A megértési pontszámok pedig csak egy vonatkozását jelentik a teljesítménynek, a másik a sebesség, és a teljes kép miatt a kettőt együtt kell vizsgálni.

Mit tegyünk?

Az NNG ezért továbbra is azt javasolja, hogy rövidítsük le a mobilon megjelenő szövegeket. A rövid, könnyű szövegeket gyorsabban olvassák a felhasználók mind mobilon, mind asztali gépeken. Ugyanakkor azt is elismerik, hogy nem kell erőltetni az ultra-rövid tartalmakat mobilon, különösen akkor, ha a szöveg befogadása nem nehéz az olvasó átlag számára, illetve szórakoztatás vagy informálás céljából született.

Ugyanakkor akadnak olyan weboldalak, melyek rendkívül nehéz szövegeket tesznek közzé a weben, többek között a pénzügyi, az egészségügyi vagy a tudományos szektorokban. Ezért ha a Te weboldaladon is nehéz szövegek találhatók, akkor érdemes használhatósági teszteket végezni ezekkel kapcsolatban, ha azt akarod, hogy mobilon is olvassák az emberek. A legtöbb esetben pedig azzal mehetünk biztosra, ha rövidítünk és priorizáljuk a mobilon megjelenő szövegeket.

Hogyan tervezd meg a mobilbarát weboldalad?

Amikor tervezünk, ma már a mobilokból kell kiindulni. Nemcsak azért, mert ez az elsődleges eszköz, hanem praktikus okai vannak: sokkal könnyebb elkerülni a problémákat, hibákat, ha a mobil felől tartunk a desktop kijelzők felé, mint fordítva. Azaz egyszerűbb átültetni egy mobilon megfelelően használható weboldalt desktop méretbe, mint desktopról mobilra. A mobilos megjelenésnek azonban más szabályai vannak, így ha a weboldalunkon gondolkodunk, és persze már mobilra tervezünk elsősorban, akkor az alábbi szabályokat érdemes figyelembe venni.

Maradj a minimalista megoldásoknál!

A mobilos webdesign mindig legyen a lehető legegyszerűbb. Ne a szépség legyen az elsődleges szempont, hanem a praktikusság és a használhatóság. Soha ne felejtsd, hogy egy kisebb méretű kijelzőre tervezel, még ha a laptopodon vagy az óriási monitorodon teszed is ezt! A hely nagyon szűkös a mobilok kijelzőjén, még ha phabletekről is van szó, és nem marad tér a túlságosan összetett megoldásokra.

A minimalista kialakítással viszont a felhasználóidat is segíted. Egy egyszerű, letisztult, könnyen áttekinthető felületen az emberek sokkal könnyebben és gyorsabban megtalálják az őket érdeklő dolgokat, vagyis javul a felhasználói élmény.

De hogy is néz ki a minimalizmus a mobilokon? A felhasználóknak mindössze annyit kell látniuk maguk előtt a kijelzőkön, amennyi feltétlenül szükséges ahhoz, hogy a weboldal lényegi funkcióit használni tudják, vagyis amelyek révén automatikusan tovább tudnak navigálni a céljuk felé. A gombok és a menük használatát intuitívvá kell tenni, azaz a felhasználóknak ne kelljen gondolkodniuk azon, hogy mi mit jelent. Ez persze ősi szabály a webdesignban, de a mobilos tervezésnél érdemes halálosan komolyan venni. Az egyszerűség sok problémára megoldást jelent.

Különböző eszközök és helyzetek

Habár mobileszközökre tervezed a weboldalad, ezek a mobileszközök igen eltérőek lehetnek. Ez egy fontos dolog a mobilos tervezésnél, mégis sok webdesigner időnként elfeledkezik arról, hogy a weboldalakat többféle platformról, többféle helyzetben is használják. Tisztában kell lenni azzal, hogy az adott weboldal felhasználóinak többsége milyen eszközt használ és általában milyen helyzetekben. Ne essünk abba a tévedésbe, hogy azt hisszük, minden felhasználó teljesen azonos módon és körülmények között használja a mobilját.

Azt sem szabad figyelmen kívül hagyni, hogy a mobilokat sok esetben szabadtéren, változatos környezeti viszonyok között használjuk. A kültéri használat miatt viszont sokkal kontrasztosabbra érdemes tervezni a weboldalt, a finom, kis megoldások ilyenkor elvesznek. Tipikusan előfordulhat ilyen felhasználás éttermek, szórakozóhelyek, üzletek weboldalai esetében, melyek honlapjára sokszor menet közben keresnek rá az emberek, hogy tájékozódjanak címekről, árakról, szolgáltatásokról. Ilyenkor egyszerűen csak jól láthatónak kell lennie a weboldalnak.

Maradj a megszokott megoldásoknál, ha a navigációról van szó

Habár ma már több ember használja böngészésre a mobilt, mint az asztali gépét, ezeknek az embereknek a nagy része annak idején még desktopon kezdett netezni. Kialakultak tehát bizonyos ismereteik, szokásaik a weboldalak navigációját és megjelenését illetően, melyeket figyelembe kell venni akkor is, amikor mobilra tervezel. A hagyományos megoldásoktól nem érdemes nagyon eltérni, a megszokott és jól működő navigációs megoldásokat érdemes átvezetni mobilra is a megfelelő felhasználói élmény miatt.

Jó megoldás mobilon, ha egy hamburger ikon alá a navigációs menübe elhelyezed a legnépszerűbb oldalaidat, tehát amelyekre az emberek valóban kíváncsiak. Emellett jelenjen meg a jobb felső sarokban egy jól használható kereső, valamint jól látható, nagy méretű call to action gombok.

Ne akadályozd a vevőid a vásárlásban!

Ez a pont webáruházaknak szóló tanács, azonban számukra mind közül a legfontosabb. Egy webáruház ugyanis nem éri el a célját, ha egy potenciális vevője végül vásárlás nélkül hagyja el az áruházat. A webáruházakban a legrettegettebb dolog, hogy a már bepakolt kosarat otthagyja a vevő, anélkül, hogy leadná a megrendelését.

A kutatások azt mutatják, hogy akárcsak asztali gépeken, mobilon a vásárlás megszakítása legtöbb esetben azért következik be, mert rossz a weboldalon a felhasználói élmény, azaz a UX. Magyarul használhatatlan az oldal. A csalódott vásárlók pedig nem fognak többet visszatérni, még asztali gépeiken sem, inkább máshol rendelik meg a terméket.

A legtöbb probléma egyébként a mobilos vásárlásoknál ott jelentkezik, amikor a call to action és a fizetés gomb nem igazán felel meg a vásárló várakozásainak. Például a gombok túl kicsik, nehezen észrevehetők, nem találja meg őket a vevő, nem tudja megérinteni az ujjával, vagy egyszerűen csak nem jelennek meg azonnal, hogy a terméket hozzáadta volna a kosárhoz. A gomb tehát legyen nyilvánvaló, nagy méretű és könnyen használható, körülötte nagy white space-szel.

Mitől lesz jó a mobilbarát weboldal a Google szerint?

A Google általában nem csak elvárja a weboldalak tulajdonosaitól, hogy korszerű weboldalakat készítsenek, illetve ösztönzi is őket erre – néha elég drasztikusnak tűnő – eszközökkel, hanem remek oktatóanyagokat is készít, hogy segítse őket. Így van ez a mobilbarát weboldalak esetében, ahol egy dokumentumban felsorolja a jó mobilos weboldalak ismérveit.

Vagyis a felsorolt elvek alapján elkészíthetünk egy alapvetően használhatónak számító mobil weboldalt, vagy legalábbis figyelembe vehetjük ezeket, amikor mobilra is tervezünk. Mindezt a tudást a Google nem csak kitalálta, hanem kutatásokat végzett a témában az AnswerLab segítségével. Az emberek viselkedését vizsgálták különböző mobilra optimalizált oldalakon, majd ebből vonták le azokat a következtetéseket, amiket a developers.google.com oldalon elolvashattok, de a lényegét össze is foglaljuk:

Honlap és navigáció

A Google fő megállapítása az, hogy miközben egy desktopos weboldal gyakran több célt is szolgálhat, addig a mobil weboldalaknál már célszerű arra fókuszálni, hogy a felhasználók megtalálják azt a tartalmat, amit keresnek. Ennek érdekében:

• Tartsuk a call to action gombokat a weboldal felső vagy középső részén, vagyis ahol a felhasználók könnyen észreveszik!
• Legyenek a menük rövidek, mert egy mobil oldalon kicsi az esélye, hogy a hosszú menükön végig fognak görgetni a felhasználók.
• Könnyen visszatérhessenek a főoldalra: ma már általában a bal felső sarokban állandóan szereplő logót arra használják az emberek, hogy az visszarepítse őket a főoldalra.
• Óvatosan a hirdetésekkel! Nem szerencsés, ha kiszorítják a hasznos tartalmat.

Keresések

Egy weboldalon történő könnyű és gyors keresés életbevágóan fontos a mobilos felhasználók számára. Ehhez szükség van arra, hogy a

• a keresőmező mindig látható legyen, mégpedig az elsőként pillantsák meg, ahogy megérkeznek egy mobil weboldalra. Nem jó megoldás, ha a menübe vagy akár csak összecsukva elrejtjük a keresést.
• Természetesen a keresési eredmények legyenek relevánsak, amihez a jól működő keresőn kívül érdemes olyan technikát bevetni, mint az automatikus kiegészítés, tehát amikor elkezdi a felhasználó beírni a betűket, mindjárt javaslatokat dob fel a kereső.
• Emellett érdemes lehet szűrőket is használni bizonyos esetekben, például, amikor egy webshop egyszerre nagy mennyiségű találatot dob ki.
• Ilyen szűrőket pedig már a keresés megkezdése előtt lehet használni a jobb keresési eredmények érdekében.

Webáruházak és konverzió

• Hagyjuk a felhasználót a regisztráció előtt körülnézni és tájékozódni! Ne erőltessük már a rendelés leadása előtt a regisztrációt, mert ezt a kutatás szerint nem szeretik az emberek.
• Hagyjuk az embereket vendégként vásárolni, azaz ne kényszerítsük rá őket egy account létrehozására. Ha viszont regisztrációt szeretnénk, akkor tegyük világossá számukra, hogy az milyen előnyökkel jár.
• Ha egy felhasználó korábban már megadta az adatait, akkor azokat ne kelljen újra megadnia. Az új felhasználók pedig külső szolgáltatások használatával is bejelentkezhessenek.
• Ne feledkezzünk meg arról, hogy a telefonszámra kattintás mobilon automatikusan elindíthassa a hívást.
• Más eszközökön is befejezhető legyen a folyamat mentés vagy megosztás segítségével, mivel esetleg egy nagyobb kijelzőn is meg akarják nézni a terméket, mielőtt vásárolnak.

Űrlapok kitöltése

Legyen a folyamat vásárlásnál vagy feliratkozásnál is olyan egyszerű és könnyű, amennyire csak lehetséges. Ennek érdekében:

• Mindig a legpraktikusabb beviteli módot kell választani, vagyis mindig a megfelelő billentyűk ugorjanak fel (pl. számok és nem betűk).
• Amikor dátumot kell megadnia a felhasználónak, akkor érdemes egy naptárat feldobni neki.
• A legjobb formok persze minél rövidebbek, nincsenek benne ismétlődések, csak a legfontosabb információkat kéri, és megmutatja, hogy hol tart a felhasználó a folyamatban.

Usability

A felhasználók hálásak azokért az apró dolgokért, amelyeket a felhasználói élmény fokozása érdekében teszünk. Ebbe beletartozik, hogy

• az egész oldalt optimalizáljuk mobilra!
• Ne kényszerítsük vízszintes görgetésre vagy zoomolásra az embereket!
• A termékek képei legyenek kinagyíthatók, mert a felhasználók látni akarják, amit megvesznek.
• Egyetlen böngészőablakon belül tartsd a felhasználókat! Tehát ne nyíljanak meg újabb böngészőablakok linkekre történő kattintásokra, mert akkor nehezen találnak már vissza.
• Ne használd a “teljes verzió” linket, mert azt hiszik a felhasználók, hogy a mobilverzió csökkentett funkciókat és tartalmat kínál.
• Tedd a felhasználók számára világossá, hogy miért kéred a helyadatait!

Mi kellhet még a felhasználóidnak egy jó mobilos oldalon?

Habár a Google mobilbarát-tesztje sokat segít abban, hogy megállapíthasd, minden rendben van-e a weboldaladdal mobiltelefonon és tableten is, van pár dolog, amit érdemes azért külön is leellenőrizni, és egy checklistában sorban kipipálni.

1. HÍVÁS ÉS SMS GOMB

Nagyban megkönnyíti a mobiltelefonon böngészők életét, ha a weboldaladon olyan gombok szerepelnek, melyekre rákattintva felhívhat vagy SMS-t küldhet neked. Ilyenkor nem kell az oldalon talált telefonszámot kijelölni, kimásolni, majd megnyitni a tárcsázót és beilleszteni a telefonszámot. Ezt nem olyan egyszerű végrehajtani mobilon, sokkal jobb megoldás, ha egyből ott az oldalon a hívás gomb.

2. MOBILTÉRKÉP AZ ÚTVONALLAL

A másik praktikus dolog mobilon, amikor a vállalkozás helye egy beágyazott térképen szerepel, sőt még az útvonalat is megtervezi, ha tudja, hogy a felhasználó hol tartózkodik.

3. KAPCSOLAT FORM

Az egyik legjobb ügyfélszerző eszköz, egy olyan kapcsolati form, melyet kitöltve a látogató felteheti az őt éppen foglalkoztató kérdést a termékeddel, szolgáltatásoddal kapcsolatban akár a mobiljáról is. Itt főleg arra kell figyelni, hogy legyen kellően egyszerű, minél kevesebb adatot kelljen megadnia. Praktikusan elég a név és az e-mail, plusz az üzenet megfogalmazására szolgáló mező.

4. ÖSSZECSUKHATÓ TARTALOM ÉS SLIDER

Habár mobilon is egyre inkább megbarátkoznak az emberek a scrollozással, és jól tudják használni a hosszúra nyúló weboldalakat a sok aloldal helyett, ennek ellenére a túl hosszú oldalakat érdemes lehet kompakt formába összesűríteni. Ilyenkor annak érdekében, hogy ne kelljen nagyon sokat görgetnie a felhasználóknak, összecsukható tartalmakat lehet használni, melyek egy-egy gombra kattintva nyílnak ki és záródnak be. Ugyanígy képeknél is jó megoldás lehet a slider használata, ahelyett, hogy nagyon sok képet helyeznénk el egymás alá.

5. KÖNNYŰ NAVIGÁCIÓ

Egy mobil-weboldalon a könnyű navigáció van annyira fontos, mint a gyors betöltés. Arra kell törekedni, hogy a legfontosabb tevékenységeket a főoldalról végre tudják hajtani a látogatók, illetve a leglényegesebb tartalmakat minden aloldalról elérjék. Az sem árt, ha az oldal tetején vagy akár még az alsó részén is elhelyezünk back gombokat a könnyebb visszalépés érdekében.

6. VIDEÓTARTALMAK

Mivel mobilon nem mindenki szeret hosszú szövegeket olvasni, illetve sokan preferálják a videókat, így nem elvetendő ötlet, hogy egy leírás helyett vagy mellett videókat is elhelyezzünk. Ezek szólnának a cégről, termékeinkről, szolgáltatásokról.

7. NAGY GOMBOK

Soha ne felejtsük, hogy a mobiltelefonon böngészők az ujjaikat használják a kijelzőn a kattintásokra és nem egy tűhegyes nyilat. Ezért a gomboknak kellően nagy méretűnek kell lenniük és megfelelő távolságban kell elhelyezkedniük egymástól. A méretet javasolt 45-57 pixel közé belőni.

8. KÖZÖSSÉGI OLDALAK LINKJEI

Ha jelen van a céged a közösségi média oldalakon, akkor a mobilra optimalizált weboldaladon mindenképpen kapjanak helyet a rájuk mutató linkek, illetve azok a közösségi média gombok, melyekkel kifejezhetik a tetszésüket az oldaladdal és egy-egy tartalmaddal kapcsolatban.

Hibák, melyeket igyekezz elkerülni

Azt nem árt tudni, hogy a reszponzív vagy az adaptív design nem old meg minden problémát, akad még egy-két dolog, amire figyelni kell, ha valóban mobilbarát weboldalt szeretnél. Ha kiválasztottad a számodra legjobbnak tűnő technológiát, és figyeltél azokra a tényezőkre, melyeket fentebb felsoroltunk, akkor még mindig van néhány hiba, amit elkövethetsz.

1. BLOKKOLT JAVASCRIPT, CSS ÉS KÉPFÁJLOK

Az indexelés miatt engedni kell a robots.txt fájlban, hogy a Googlebotok hozzáférjenek a JS, a CSS és a képfájlokhoz a weboldaladon. Ennek hiányában a weboldalad nem mobilbarát weboldal a Google számára, még ha szerinted az is. A Google egyébként a Search Console-on, azaz a Webmestereszközökön keresztül figyelmeztetést küld azok számára, akik blokkolják a Javascript és a CSS elérését.

A Google egyébként már évek óta jelzi ezt a weboldaltulajdonsoknak különböző fórumokon, illetve 2014 októberében frissítette a webmester irányelveket, Jelezve, hogy a CSS és a JS blokkolása ront a weboldal helyezésén. 2015 óta azonban már e-mailben és a Search Console-on keresztül is riadóztatja az ilyen weboldalaknak a tulajdonosait és kezelőit. A figyelmeztetés angol nyelven így néz ki:

Látható, hogy a Google megoldási javaslatot is ad, viszonylag egyszerűvé téve a helyzet rendezését. Lépésről lépésre vezetve jelzi, hogy

• először azonosítani kell a robots.txt által blokkolt elemeket a “Megtekintés Google-ként” – a Search Console-ban elérhető – funkció segítségével.
• Ezután kerülhet sor a blokkolás eltávolítására,
• amit érdemes ellenőrizni az ugyanitt található robots.txt tesztelővel, majd ha rendben van minden, akkor
• frissíteni kell a robots.txt-t.
• Végül pedig ismét le kell futtatni a “Megtekintés Google-ként” funkciót, de úgy, hogy a “Mobil (okostelefon)” opciót választjuk az alapértelmezett Asztal helyett.

Ennél egyszerűbben is azonosíthatók a blokkolt elemek: a “Google index” alatt lévő “Letiltott források” menüpontban is láthatók a Search Console-ban, hogy jelenleg milyen forrás van letiltva, és hogy a helyzet korábban hogyan változott. Az itt található forrásokra rákattintva további részleteket találhatunk arról, hogy mi is van letiltva az adott oldalon. Előfordulhatnak hibás jelzések is, ezért is érdemes ebben a menüpontban ellenőrizni, hogy pontosan mivel is van gond. A megoldáshoz vezető lépéseket itt foglalták össze.

2. LEJÁTSZHATATLAN TARTALOM

Akad néhány olyan videó és egyéb tartalom a webodalakon, melynek lejátszását nem támogatják a mobileszközök (ilyen például a Flash). Ez rendkívül lehangoló a weben mobillal barangoló felhasználóknak, véli a Google, ezért azt javasolja, hogy HTML5-tel oldjuk meg a videók és az animációk lejátszását. További részletek itt.

3. HIBÁS ÁTIRÁNYÍTÁSOK

Amennyiben szeparált mobil URL-t használsz, akkor a mobilos felhasználókat minden esetben át kell irányítania desktop URL-ekről a megfelelő mobil URL-ekre. Más oldalakra, például a főoldalra történő átirányítás hibának minősül. Tehát az nem fogadható el például, hogy a mobilos felhasználó egy desktopos felhasználónak szánt linkre való kattintáskor a mobilos főoldalra jut, ha van annak az oldalnak mobilos megfelelője is.

Ha van hibás átirányításod, akkor az kiderül a Webmestereszközök elemző részéből. Egyébként pedig azt javasolja a Google, hogy ha nincs megfelelő mobilos oldalad az okostelefon-használóknak, akkor sem a mobilos főoldalra irányítsd őket, hanem inkább a desktop oldalra. Ebben az esetben jobb semmit sem tenni, mint hibásan megoldani a helyzetet. Egyébként pedig a reszponzív designt javasolja a Google, amit mi szívesen összedobunk neked.

4. MOBILOS 404-ES OLDALAK

A hiba lényege, ha egy URL a desktop oldalon jól működik és a megfelelő oldalra vezet, akkor ugyanez az URL egy 404-es oldalt eredményez mobilon.

Ilyen esetben ha van egy azonos tartalmú, de más URL-en elérhető mobilos weboldal, akkor arra kell átirányítani a felhasználót. A javítási lépéseket itt foglalja össze a Google.

5. ALKALMAZÁS-LETÖLTÉS

Akadnak olyan weboldalak, melyek a saját natív appjukat ajánlják a mobilos weboldalukra tévedőknek. Ezt azonban lehet úgy csinálni, hogy az indexelési hibákat okozzon, valamint megakassza a felhasználókat a weboldal használatában. Erre gondolunk:

Ennek megoldására az egyszerű bannert javasol a Google, mely szépen illeszkedik a honlap tartalmába.

6. IRRELEVÁNS KERESZTLINKEK

Gyakori megoldás, hogy egy weboldal a felhasználók számára egy szeparált mobil URL-en a desktopra optimalizált verzióra mutató linket jeleníti meg, és ugyanígy a desktop oldalról egy linket a szeparált mobilos oldalra.

7. LASSÚ MOBILOS OLDALAK

És végül: pörögjön az a weboldal mobilon is! Azzal, hogy a weboldaladat reszponzívvá tetted, még nem oldottad meg a sebesség problémáját. Sőt, néha csak lassítunk ezzel a megoldással a mobilos megjelenésen. Pedig nemcsak a felhasználók nem szeretik a lassú weboldalakat, hanem a Google sem, így a keresési oldalakon elfoglalt helyezésünk is kárát látja majd, ha nem figyelünk oda a weboldalunk sebességére. Úgyhogy futtassátok a PageSpeed Insightsot, és fogadjátok meg a tanácsait!

8. Nem igazodó felugró ablak

Habár a felugró ablakokat nem szeretjük látni, abban az esetben, ha csak visszafogottan idegesítőek, kevéssé tolakodóak, akkor viszonylag hatékonyak. Nincs is velük különösebb gond a nagyméretű desktop-kijelzőkön, hiszen az egérmutatóval könnyen kattintható a rajtuk elhelyezett X, és egy szempillantás alatt bezáródnak. Mindez mobilon nem ennyire egyszerű, és egy rossz beállítás még jobban megkeserítheti a felhasználók életét.

Ha ugyanis a popup, illetve a benne lévő tartalom nem alkalmazkodik megfelelően a kijelzőmérethez, akkor a felhasználónak nem lesz egyszerű csúsztatással, átméretezéssel megtalálni és lekattintani az X-et a mobilon. Nyilván mindenki futott már bele ebbe a problémába mobilos netezés közben, így tisztában van azzal, hogy mennyire idegesítő. Arra tehát nem árt figyelni, hogy a CSS-ben legyen egy médialekérdezés, ami beállítja a felugró méretét a fix méret használata helyett. Emellett azonban azt se felejtsük, hogy az X gombnak kellően nagyméretűnek kell lennie a mobilok kijelzőjén is a kattinthatóság miatt. Az is megfontolandó, hogy egy bizonyos idő elteltével a popup magától bezáródjon.

9. TÚL KICSI GOMBOK

Nem csak a felugróknál lehet probléma abból, hogy a gombokat rosszul méretezzük, és rontjuk a felhasználói élményt. Az Apple ajánlása azt mondja, hogy a gombok soha ne legyenek kisebbek a 44×44 pixeles méretnél. Ezért érdemes megbizonyosodni arról, hogy a CSS nem méretezi le ezen ajánlott méret alá a gombot.

10. A ZOOMOLÁS LEHETŐVÉ TÉTELE

Sokan gondolják úgy, hogy azért mert egy weboldal reszponzív, felesleges lehetővé tenni a felhasználók számára a zoomolást, azaz kinagyítsanak bizonyos részeket a weboldalon. Az emberek azonban nem egyformák és eltérőek az igényeik. Még akkor is lehet egy szöveg vagy egy kép valakinek túl kicsi, ha az átlagnak semmilyen gondot nem okoz az elolvasása, megtekintése. Vagyis annak érdekében, hogy a weboldalunk mindenki számára jól használható legyen, reszponzív weboldalaknál is engedélyezzük a zoomolás lehetőségét a viewport meta tagben.

11. NAVIGÁCIÓ

Komoly problémát szokott okozni a felhasználók számára az olyan oldalakon történő mobilos navigálás, melyeknél a navigáció tervezése során nem vették figyelembe a mobilos látogatókat. Még egy reszponzív oldalon is lehetnek gondok a navigációs elemek használhatóságával, ha túl kicsi lesz a méretük a kisebb kijelzős okostelefonokon, különösen ha a felhasználó ujja ehhez képest nagy. A hosszú görgetésű weboldalak már ennek figyelembe vételével születnek meg, ezeket azért jobb használni, mert az embereknek könnyebb görgetni mobilon, mint linkeket, gombokat nyomogatni.

12. ÚJ ABLAK NYITÁSA

Sok esetben a belső linkekre való kattintásnál egy új ablak nyílik meg a böngészőben, hogy a linkről elérhető tartalmat így olvassák el a felhasználók, majd ezt lecsukva könnyedén folytathassák az eredeti ablakban az olvasást. Ez a technika jó a weboldalnak, elfogadható a felhasználónak egy desktop böngészőben, mobilon azonban nem a legszerencsésebb megoldás.

Ennek oka az, hogy a mobilos böngészőkben viszonylag nehéz kezelni a sok megnyitott ablakot, nem látjuk át olyan könnyen, hogy hány ablak van nyitva, így böngészés közben könnyű elkeveredni egy idő után az ablakok erdejében. Vagyis, ha a mobilos felhasználókra gondolunk, akkor jobb megoldás, ha a linkjeink nem új ablakban, hanem ugyanabban az ablakban nyílnak meg. Ráadásul nagy eséllyel vissza is térnek az eredeti oldalra a látogatóink, hiszen a mindenki által előszeretettel használt back gomb odarepíti őket egy pillanat alatt.

13. Lebutított weboldal

Míg korábban jellemző volt, hogy a weboldalak mobilos verzió valami lebutított változatot mutattak az okostelefonos felhasználónak, ezt a reszponzív design elterjedése és a felhasználói mobilhasználat az elmúlt évek során megváltoztatta. Most már a PC-ken is elérhető webes élményt kell nyújtani az embereknek mobilon is. Sőt, ennél többet!

Az okostelefonok fel vannak szerelve fényképezőgéppel, mikrofonnal, gyorsulásmérővel, GPS-szel, melyeket használnak is az emberek nap mint nap. Az ezek használatával kiegészített keresés pedig más eredményeket ad mobilon, mint PC-n. Így a GPS adatait veszi figyelembe, amikor lényeges a felhasználó pozíciója. De használható a hangalapú keresés, vagy a lefotózott képek értelmezése, ahogy azt a Goggles alkalmazás teszi. Vagyis nem elég, ha mobilon ugyanazt az élményt nyújtod az embereknek, mint asztali gépen, hanem annál többet kell.

Címkék: mobilbarát, mobilbarát weboldal