A „Mobile-Only” gondolkodásmód: amikor a desktop verzió már másodlagos

A mobil végleg átvette a vezetést

Évekkel ezelőtt a weboldalakat asztali gépre tervezték, majd „lekicsinyítették” mobilra. Ez a sorrend mára megfordult. A keresés, a böngészés, a vásárlás nagy része telefonon történik, gyakran útközben, gyors döntési helyzetben. A mobil tehát nem egy verzió a sok közül, hanem az elsődleges felület.

A keresők is mobil-első szemlélettel értékelik az oldalakat: elsősorban a mobil változatot nézik a rangsoroláshoz. Vagyis ha a mobilos élmény gyenge, az nemcsak a látogatókat zavarja, hanem a kereshetőséget is rontja. A mobil minősége ma közvetlenül üzleti kérdés.

Ebben a környezetben a „mobilbarát” (reszponzív) megközelítés a minimum, de a legjobbak már tovább léptek: nem csak alkalmazkodnak a mobilhoz, hanem eleve rá terveznek. Ez a mobile-only gondolkodásmód lényege.

Mobile-first vs. mobile-only – mi a különbség?

A mobile-first azt jelenti, hogy a tervezést a mobil képernyőről indítjuk, majd onnan bővítjük a nagyobb képernyőkre. Ez már önmagában nagy előrelépés a régi, desktop-első szemlélethez képest, és ma a jó gyakorlat alapja. A reszponzív weboldal ezen az elven épül.

A mobile-only ennél is tovább megy: nemcsak a tervezés indul a mobilról, hanem a teljes gondolkodás a mobil felhasználó köré szerveződik. A desktopot nem egyenrangú felületként, hanem másodlagos esetként kezeli – ahol a mobilon hozott döntések érvényesülnek, csak több hely áll rendelkezésre.

Fontos: a mobile-only nem azt jelenti, hogy elhanyagoljuk a desktopot. Inkább azt, hogy a prioritások sorrendje egyértelmű. Ha választani kell, a mobil élmény nyer, mert ott van a látogatók többsége. A desktop ettől még tökéletesen működik – csak nem ez a kiindulópont.

Mit jelent ez a gyakorlatban?

A mobile-only szemlélet konkrét döntésekben ölt testet. A legfontosabb tartalom és a cselekvésre hívás azonnal, görgetés nélkül látható a telefon képernyőjén. A menü egyszerű és hüvelykujjal könnyen elérhető. A gombok elég nagyok és távol vannak egymástól, hogy ne legyen félrekattintás.

A tartalom tömör és lényegre törő, mert a mobil felhasználó gyakran sietős és kis képernyőn olvas. A hosszú, terjengős szövegek helyett rövid bekezdések, világos címek és jól tagolt szerkezet kell. A kép és a szöveg egyensúlya is a mobil olvashatóságra optimalizált.

A kényelmi funkciók a mobilra szabottak: egyetlen kattintással hívható telefonszám, könnyen kitölthető űrlapok, megfelelő billentyűzet a különböző mezőkhöz, és az ujjal könnyen kezelhető elemek. Ezek apróságnak tűnnek, de együtt döntik el, hogy a mobil látogató ügyféllé válik-e.

A mobil-első tervezési folyamat

A folyamat a legfontosabb kérdéssel kezdődik: mit akar a mobil látogató a leggyorsabban elérni? Ez köré épül minden. Először a mobil elrendezést tervezzük meg, a lényeges tartalommal és a legfontosabb cselekvésekkel, és csak ezután bővítjük nagyobb képernyőkre, ahol több hely jut a kiegészítő elemeknek.

Ez a sorrend kényszerít a fókuszra. Mivel a mobil képernyőn kevés a hely, muszáj eldönteni, mi a valóban fontos, és mi a felesleges. Ez a fegyelem nemcsak a mobil, hanem a desktop élményt is javítja, mert átgondoltabb, letisztultabb oldalt eredményez. A korlát itt jó tervezésre kényszerít.

A tesztelés valós eszközökön történik, nem csak a tervező nagy monitorán. Különböző méretű telefonokon, valódi használati helyzetben próbáljuk ki az oldalt – mert ami a tervezőasztalon jól néz ki, az egy kis kijelzőn, egy kézzel, mozgás közben másképp viselkedhet.

Érdemes a hüvelykujj-zónára külön figyelni. A telefont jellemzően egy kézzel, a hüvelykujjal kezeljük, amely a képernyő bizonyos részeit könnyen, másokat nehezen ér el. A legfontosabb cselekvő elemeket – a fő gombot, a menüt – ezért a könnyen elérhető zónába érdemes helyezni, nem a képernyő tetejére vagy a nehezen elérhető sarkokba.

A tartalom sorrendje is kritikus mobilon. Mivel a látogató felülről lefelé görget, a legfontosabb üzenetnek és a cselekvésre hívásnak elöl kell lennie. Egy desktopon a többoszlopos elrendezésben minden egyszerre látszik; mobilon viszont az oszlopok egymás alá kerülnek, ezért tudatosan kell eldönteni, mi legyen legfelül – ott, ahol a látogató először találkozik vele.

A mobil űrlapok külön odafigyelést igényelnek, mert itt dől el a kapcsolatfelvétel és a vásárlás. Minél kevesebb mező, annál jobb; a megfelelő billentyűzet (számjegyekhez numerikus, e-mailhez @ jeles) és az automatikus kitöltés támogatása mind csökkenti a súrlódást. Egy nehezen kitölthető mobil űrlap közvetlenül ügyfeleket veszít – ezért ezt mindig a legegyszerűbbre csiszoljuk.

A teljesítmény mobilon különösen számít

A mobil felhasználó gyakran gyengébb interneten, korlátozott adatkapcsolaton böngészik. Ezért a sebesség mobilon még fontosabb, mint asztali gépen. Egy lassan töltődő oldal a mobil látogatók nagy részét elveszíti, mielőtt egyáltalán meglátnák a tartalmat.

A mobile-only szemlélet ezért a teljesítményt a középpontba helyezi: tömörített, megfelelő méretű képek, minimális felesleges kód, gyors kiszolgálás. A cél, hogy a fő tartalom mobilon is néhány másodperc alatt megjelenjen, gyengébb kapcsolaton is. Erről részletesen a betöltési sebességről szóló cikkünkben írtunk.

A teljesítmény és a mobil élmény tehát elválaszthatatlan. A leggondosabban megtervezett mobil oldal is megbukik, ha lassú – és a leggyorsabb oldal is, ha kényelmetlen a kezelése. A kettőt együtt kell kiválóra csiszolni.

Mi lesz a desktop verzióval?

A mobile-only nem jelenti a desktop elhanyagolását. A nagy képernyős felhasználók – akik gyakran komolyabb döntés előtt, nyugodtabb körülmények között böngésznek – ugyanúgy fontosak lehetnek, sőt egyes iparágakban (B2B, komplex szolgáltatások) a desktop arány is jelentős.

A különbség a szemléletben van: a desktop a mobilra optimalizált alapra épül rá, kihasználva a több helyet – nagyobb képek, többoszlopos elrendezés, gazdagabb megjelenés. De a tartalmi prioritások, a fő üzenetek és a cselekvésre hívások ugyanazok maradnak, amelyeket mobilon kidolgoztunk.

Érdemes a saját közönséged adatait megnézni: a látogatottság-mérőből pontosan látszik, milyen arányban érkeznek mobilról és desktopról. Ez segít a helyes prioritás meghatározásában – mert minden iparág és minden vállalkozás más, és a döntést az adatra, nem a feltételezésre kell alapozni.

Gyakori hibák a mobil tervezésben

A leggyakoribb hibák: a fő cselekvésre hívás csak hosszú görgetés után jelenik meg; a menü vagy a gombok túl kicsik, közel vannak egymáshoz; a felugró ablakok eltakarják a tartalmat mobilon; a szöveg apró és halvány; és a betöltés lassú nagy, tömörítetlen képek miatt.

Szintén tipikus, ha az űrlapok kényelmetlenek mobilon: túl sok mező, rossz billentyűzet, nehéz kitöltés. Mivel a mobilon a kapcsolatfelvétel és a vásárlás itt dől el, ezek a súrlódások közvetlenül ügyfeleket és bevételt visznek el.

A jó hír, hogy ezek a hibák tudatos, mobil-első tervezéssel mind elkerülhetők, egy meglévő oldalon pedig felújítással javíthatók. Sokszor néhány célzott változtatás is érezhetően javítja a mobil konverziót.

Mit jelent ez egy magyar kkv-nak?

Egy kkv számára a mobile-only szemlélet egyszerű, mégis erős igazságot jelent: az ügyfeleid nagy része a telefonján találkozik veled először, és ott dönti el, érdemes-e veled foglalkozni. Ha ez az élmény gyors, kényelmes és meggyőző, megnyerted; ha nem, pillanatok alatt elveszíted.

Ha olyan weboldalt szeretnél, amely a mobil látogatókat helyezi a középpontba – gyorsan, kényelmesen és meggyőzően –, kérj ingyenes ajánlatot. Minden weboldalkészítés projektünk mobil-első szemlélettel készül, valós eszközökön tesztelve.