Érintésbarát gombok és elemek optimalizálása a felhasználói élmény javításáért

Gombok optimalizálása érintőképernyős használatra

A Gombok optimalizálása akkor fontos, amikor a látogató mobilon nem tud kényelmesen kattintani, rossz helyre nyom, vagy egyszerűen feladja a folyamatot. Ez nem csak dizájnkérdés. A rosszul méretezett, túl közel tett vagy félreérthető gomb közvetlenül rontja a rendelést, az ajánlatkérést, a feliratkozást és minden olyan műveletet, ahol a felhasználónak döntést kell hoznia.

Én azt látom, hogy sok weboldalon a tartalom már elfogadható, a mobilnézet is működik, de a gombok még mindig asztali képernyőre vannak kitalálva. Kicsik, sűrűn állnak, nem elég kontrasztosak, vagy nem derül ki belőlük, mi történik kattintás után. Egy magán webfejlesztő vagy felhasználói élményre figyelő szakember ilyenkor nem az egész oldalt építi újra, hanem a kritikus érintési pontokat javítja.

A Qjob.hu felületén olyan önálló szakembereket lehet keresni, akik távolról is el tudják végezni ezt a munkát. A megbízás általában képernyőképekkel, webcímmel, rövid leírással és hozzáféréssel indul. A végeredmény lehet módosított gombstílus, javított mobilnézet, jobb elhelyezés, pontosabb szöveg, vagy egy rövid lista arról, mely elemek akadályozzák a használatot.

Gombok optimalizálása árak

Az ár főleg attól függ, hány gombot kell javítani, mennyire régi az oldal, van-e kész arculat, és szükség van-e tesztelésre több képernyőméreten. Szerintem a túl olcsó munka ezen a területen gyakran gyengébb minőséget jelent, mert a szakember csak átszínez néhány elemet, de nem nézi meg a folyamatot. Pedig a gomb nem önmagában fontos. A helye, a szövege, a mérete és a környezete együtt dönti el, hogy használható lesz-e.

Tapasztalatom szerint kisebb oldalaknál már egy célzott javítás is látványos különbséget adhat. Nagyobb felületeknél viszont érdemes előbb rangsorolni. Nem minden gomb egyformán fontos. Az ajánlatkérés, a kosár, a fizetés, a kapcsolatfelvétel és a belépés általában előrébb kerül, mint egy kevésbé használt másodlagos link.

Érintőképernyős gombok mérete

Az érintőképernyős gombok mérete akkor jó, ha a felhasználó nem gondolkodik rajta. Rányom, és működik. Ha nagyítani kell, ha két közeli elem közül nehéz választani, vagy ha a szöveg túl kicsi, akkor már gond van. A mobil felhasználó ritkán türelmes. Egy rossz érintés után még próbálkozik. A második után sokszor kilép.

A szakember ilyenkor megnézi a tényleges kattintható területet is, nem csak a látható gombot. Gyakori hiba, hogy a gomb szépnek tűnik, de csak a szöveg része aktív. Máskor az ikon kicsi, a körülötte lévő üres rész pedig nem reagál. Ez különösen menüikonoknál, lapozóknál, bezáró gomboknál és űrlapoknál zavaró.

Sokan ott hibáznak, hogy csak a gomb szélességét növelik. Ez kevés. A magasság, a belső térköz, a szomszédos elemek távolsága és a kéz természetes mozgása is számít. Egy jó mobil gomb nem nyomul rá a tartalomra, de nem is bújik el. Világos, elérhető és elég nagy.

Mobil gombok szövege

A mobil gombok szövege rövid legyen, de ne legyen homályos. Az olyan feliratok, mint tovább, rendben vagy küldés néha elegendők, de sok helyzetben nem mondanak eleget. Ha a felhasználó nem tudja, mi történik a kattintás után, bizonytalan lesz. Ez különösen igaz fizetésnél, ajánlatkérésnél és adatküldésnél.

Volt olyan eset, amikor egy ügyfél weboldalán az ajánlatkérő űrlap végén csak egy rövid gomb állt. A látogatók egy része nem tudta, hogy azonnal elküldi-e az adatait, vagy még lesz egy ellenőrző lépés. A gomb szövegének pontosítása és a környező magyarázat rövidítése után a folyamat érthetőbb lett. Nem varázslat történt. Csak kevesebb lett a bizonytalanság.

A gombfeliratnak illeszkednie kell a helyzethez. Ha a felhasználó árajánlatot kér, akkor a gomb is ezt mondja. Ha időpontot foglal, akkor ne általános tovább szerepeljen rajta. Ha fájlt tölt le, akkor derüljön ki, hogy letöltés indul. Ez apróságnak tűnik, de a felhasználói döntés pillanatában nagy szerepe van.

Gombok optimalizálása szakember választása

A Gombok optimalizálása feladathoz olyan szakembert érdemes keresni, aki nem csak kódot módosít, hanem érti a mobil használatot is. Jó jel, ha kér képernyőképet, megkérdezi a fő célt, és nem azonnal általános csomagot ajánl. A feladat lehet kis fejlesztés, de rossz döntésekkel könnyen széteshet az oldal megjelenése.

Érdemes megnézni, hogy a magán szakember dolgozott-e már űrlapokkal, mobil menükkel, webáruházi gombokkal vagy ajánlatkérő oldalakkal. Nem kell mindig nagy portfólió. De kell néhány konkrét példa. Az is fontos, hogy tudjon egyszerűen írni arról, mit javítana. Ha a válasz tele van homályos kifejezésekkel, de nincs benne konkrét lépés, az óvatosságra int.

A jó webfejlesztő nem sértődik meg, ha a megbízó rákérdez a részletekre. Meg tudja mondani, hogy a munka csak látványbeli módosítás lesz-e, vagy a működést is érinti. Meg tudja különböztetni a gyors javítást a mélyebb felhasználói élmény javítástól. És ami fontos, nem ígér minden gombra azonnali eredménynövekedést.

Online munkafolyamat és átadás

Az online munkafolyamat általában rövid egyeztetéssel indul. A megbízó elküldi az oldal címét, leírja, melyik gombbal van gond, és megmutatja, milyen eszközön jelentkezik a probléma. Ezután a szakember felméri, hogy elég-e a stílus módosítása, vagy sablonhoz, bővítményhez, esetleg egyedi kódhoz kell nyúlni.

A kisebb feladatok sokszor egy napon belül lezárhatók. Összetettebb oldalon kellhet több kör. Először jön a hibák listája, utána a javasolt megoldás, majd a módosítás és az ellenőrzés. A kommunikáció online történik, ezért fontos, hogy a leírás pontos legyen. Egy egyszerű mondat sok időt megspórolhat. Például a kapcsolat gomb mobilon túl közel van a lap aljához, és gyakran nem lehet elsőre megnyomni.

Az átadásnál nem elég annyi, hogy kész. Hasznos, ha a szakember röviden leírja, mit változtatott. Melyik gomb lett nagyobb, hol változott a térköz, módosult-e a szín, és történt-e változás a működésben. Így később is érthető marad, mihez nyúlt hozzá. Ez főleg akkor fontos, ha az oldalt más is kezeli.

Gyakori hibák gombok javításánál

A leggyakoribb hiba az, hogy a gombokat csak esztétikai elemként kezelik. Pedig a gomb döntési pont. Ha rossz helyen van, túl sok van belőle, vagy nem látszik, melyik a fő művelet, akkor a felhasználó elakad. Nem mindig panaszkodik. Egyszerűen továbbmegy.

Másik gyakori gond a túl erős vizuális verseny. Minden gomb egyformán feltűnő, ezért egyik sem vezet. Egy oldalon általában kell fő művelet és kell néhány másodlagos elem. Ha minden egyformán hangsúlyos, a felület zajos lesz. Ha semmi sem hangsúlyos, akkor bizonytalan.

Probléma lehet a javítás utáni tesztelés hiánya is. Asztali nézetben jól mutat, mobilon mégis törik a szöveg. Egy nyelvi változatban elfér a felirat, másikban már két sorba csúszik. Egy gomb jó az oldal tetején, de rossz egy hosszú űrlap végén. Ezért a gombok javítását mindig érdemes valódi mobilnézetben is ellenőrizni.

Minőségi eredmény mobil gomboknál

A minőségi eredmény nem attól jó, hogy a gomb látványosabb lett. Attól jó, hogy könnyebb használni. A látogató gyorsabban érti, mit kell tennie. Kevesebb a félrenyomás. Egyértelműbb a következő lépés. A Gombok optimalizálása akkor sikeres, ha a felület nyugodtabb, tisztább és kis képernyőn is természetes marad.

Szerintem a legjobb megoldások nem hangosak. Nem feltétlenül változik meg az egész oldal képe. Néha csak nagyobb belső térköz kell. Néha pontosabb felirat. Néha az, hogy két gomb ne legyen egymás mellett túl szorosan. Ezek kis döntések, de a felhasználó ezek alapján érzi, hogy az oldal rendben van-e.

Magán megbízóként érdemes konkrét célt adni. Több ajánlatkérés kell, kevesebb félrekattintás, érthetőbb űrlap, kényelmesebb menü, gyorsabb vásárlási lépés. Így a szakember nem általános javítást végez, hanem a valódi problémára figyel. Ez adja a munka értelmét.