Bakos Szabolcs UI/UX Designer portfóliója

A reszponzív mobil felületek felhasználói élményének (UX) javítása

A reszponzív mobil és a desktop felületek tervezése teljesen másfajta gondolkodásmódot igényel.

A Mobile First reszponzív webdesign előnyei
A reszponzív mobil felületek felhasználói élményének (UX) javítása
Szerző: Bakos Szabolcs
A reszponzív mobil és a desktop felületek tervezése teljesen másfajta gondolkodásmódot igényel. A méretből adódó különbségeknek köszönhetően teljesen más szabályokat kell betartania a designernek.

Azok a tervezési megoldások melyek desktopon működnek, mobilon nem minden esetben fognak. Ebben a cikkben adok pár tanácsot, melyeket érdemes megfontolni a mobil felületek tervezésekor.

Felejtsd el a desktop portolást

Adott egy nem mobil kompatibilis weblap é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.

Bevált megoldások

Alkalmazni a már bevált dolgokat érdemes, mert a felhasználók már ismerik őket. Navigációhoz a hamburger menü az egyik legjobb választás (hiába utálják sokan), linkek helyet pedig a ikonok használata. Ahol lehetséges, az adatokat minél egyszerűbben és lényegre törőbben kell megjeleníteni.

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.

Szellős struktúra, nagy térközök, olvasható betűk

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.

Minél kevesebb beviteli mező

Az emberek jobban szeretnek kattintani, tappolni mint írkálni, főleg mobilon. Mobilon az írkálás lassú és fájdalmas procedúra. Egy mobilos weblapná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.

Mobile first és kevesebb a probléma

A mobile first 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. Amennyiben érdekel a mobile first metódus, kattints a lenti linkre.

Kapcsolódó linkek:
Dolgozzunk együtt!

Amennyiben konkrét webdesign projekttel szeretnél megkeresni, vagy szeretnél velem együttműködni, kérlek vedd fel velem a kapcsolatot. Dolgozzunk együtt egy sikeres projekten!