Animált gombok és interakciós elemek tervezése

Gombok tervezése

A gombok tervezése sokkal fontosabb feladat, mint ahogy elsőre látszik. Egy weboldalon vagy kisebb alkalmazásban gyakran ez az a pont, ahol a látogató végül döntést hoz. Kattint, továbblép, elküld valamit, visszalép vagy bezárja az oldalt. Ha a gomb nem érthető, rossz helyen van, túl kicsi, túl erős vagy éppen láthatatlan, akkor az egész felület bizonytalanná válik. A Qjob.hu oldalán ezért is keresnek sokan olyan szakembert, aki külön is elvállalja a felületi elemek átgondolását, és ezen belül a gombok kialakítását.

Az én tapasztalatom az, hogy a gombok tervezése nem pusztán rajzolás. Nem csak arról szól, milyen színű legyen valami, vagy kerekített legyen-e a széle. Inkább arról, hogy a látogató pontosan értse, mire számíthat egy kattintás után. Én személy szerint azokat a megoldásokat szeretem, ahol a gomb egyszerű, tiszta és azonnal olvasható. Nem kell körülötte sok dísz. Sőt sok esetben a túl sok látványelem inkább árt. A felhasználó nem gyönyörködni akar, hanem haladni.

Sokan ott hibáznak, hogy minden fontos műveletet ugyanúgy jelölnek. Ugyanaz a méret, ugyanaz a tónus, ugyanaz az erő. Így viszont a látogató nem érzi, mi a fő irány. Máskor meg épp az ellenkezője történik. Túl sok erős gomb kerül egyetlen képernyőre, és minden egyszerre akar kiemelkedni. Ez szerintem fárasztó és zavaró. A jó gombtervezés csendes. De pont ezért működik.

Jó gombok és rossz döntések

Egy jó gomb látható, de nem ordít. Egyértelmű, de nem hosszú. Pont ott van, ahol a felhasználó a következő lépést várja. És nem csapja be az embert. Ez utóbbi nagyon fontos. Ha a szöveg azt ígéri, hogy megnézem az árakat, de valójában egy hosszú űrlap nyílik meg, az bizalmat rombol. Sok magánmegrendelő azért kér segítséget, mert az oldala rendezettnek tűnik, mégis gyenge a kattintási arány. Ilyenkor gyakran a gomb a gond, nem az egész oldal.

Volt egy eset, amikor egy ügyfél biztos volt benne, hogy a szövegezésével van baj. A szolgáltatása rendben volt, az oldal tiszta volt, mégis kevesen küldtek üzenetet. Később kiderült, hogy a fő gomb alig különült el a háttértől, ráadásul a felirata túl általános volt. Amikor ezt átalakították, a reakciók száma érezhetően javult. Ez nem csoda. Egyszerűen könnyebb lett dönteni.

Én úgy látom, hogy sokan túl okosak akarnak lenni a feliratokkal. Kreatívnak szánt mondatokat írnak oda, pedig a látogató inkább világos utasítást vár. Szerintem az egyenes megfogalmazás többnyire jobb. A gomb ne találós kérdés legyen. Ne kelljen megfejteni, mi történik utána.

Gombok tervezése árak

Az ár attól függ, hogy egyetlen elemről van szó, vagy teljes felületi rendszerről. Más munka egy fő gomb átrajzolása, és más feladat egy egész oldal vagy több képernyő cselekvési pontjainak újragondolása. Az is számít, hogy a szakember csak tervet ad, vagy beépíthető megoldást, állapotokat és mobil igazítást is készít. A gombok tervezése olcsó feladatnak tűnhet, de ha jól csinálják, közvetlenül hat a használhatóságra és a megrendelések számára.

Az én véleményem az, hogy túl alacsony áron ritkán kap az ember valóban átgondolt munkát. Olcsóbban gyakran csak egy gyors színezés vagy sablonos alakítás történik. Ez elsőre elfogadhatónak látszik, de nem biztos, hogy javítja a használatot. Én inkább azt választanám, aki megkérdezi, mire való a gomb, hol helyezkedik el, milyen képernyőn jelenik meg, és mi a kattintás utáni cél. A jobb szakember nem feltétlenül bonyolultabban dolgozik. Csak pontosabban.

Az árak tájékoztató jellegűek, de jól mutatják az eltéréseket. Szerintem 12.000 forint alatt inkább apró javítás fér bele. Egy komolyabb munka, ahol a gombok valóban összehangolt rendszert alkotnak, ennél többe kerül. És szerintem ez indokolt is, mert a végén nem csak egy szebb elem születik, hanem egy könnyebben használható oldal.

Hogyan válassz szakembert

Magánmegrendelőként nem mindig könnyű eldönteni, kit érdemes megbízni. Sokan ügyesen mutatnak színes mintákat, de abból még nem látszik, hogy értenek-e a gombok tervezéséhez. Én azt figyelném, hogy a szakember beszél-e a használatról, a sorrendről és a felhasználói döntésekről. Ha csak annyit mond, hogy ez a szín most divatos, az nekem kevés lenne. A gomb nem divattárgy. A gomb útjelző.

Jó jel, ha kérdez a célról. Például arról, hogy ajánlatkéréshez kell-e a fő gomb, időpontfoglaláshoz, kapcsolatfelvételhez vagy vásárláshoz. Ezek nem ugyanazok a helyzetek. Más tónus kell egy küldés gombnak, és más egy törléshez vagy lemondáshoz tartozó elemnek. Egy jó felületi tervező vagy használhatósági szakember ezt érzi. És nem akar mindent egyforma erősséggel hangsúlyozni.

Sokan elkövetik azt a hibát, hogy a legolcsóbb ajánlatot választják, majd később többször javíttatnak. Én inkább azt mondanám, hogy olyan embert érdemes keresni, aki kevesebbet ígér, de tisztán érvel. Ha meg tudja mondani, miért lesz kisebb az egyik gomb, miért kerül át a másik máshová, és miért változik a felirat, az már sokat elárul a munkájáról.

Gombok helye és környezete

A gombok tervezése nem választható el attól, hol jelennek meg. Ugyanaz a gomb másként működik egy rövid bemutatkozó oldalon, mint egy hosszú űrlap végén vagy egy több lépéses folyamat közepén. Ha túl közel van más elemekhez, elveszik. Ha túl messze kerül az előző szövegtől, megszakad a logika. És ha rossz sorrendben áll a többi vezérlő között, akkor téves kattintásokat okozhat.

Én személyesen jobban szeretem, ha a fő művelet tisztán elkülönül. Nem kell nagy helyet foglalnia, de legyen világos, hogy az a következő lépés. A másodlagos lehet visszafogottabb. Sok felületen ezt fordítva látom. A törlés, a vissza vagy a mégse majdnem ugyanolyan hangsúlyt kap, mint a küldés. Szerintem ez veszélyes. Különösen telefonon, ahol egy félrenyomás sokkal könnyebben megtörténik.

Gyakori probléma az is, hogy a gomb körül nincs elég levegő. Túl közel kerül a szöveghez, a képekhez vagy a többi vezérlőhöz. Ilyenkor a látogató szemének nincs kapaszkodója. Egyszer egy megbízó azt mondta, hogy a gombja jól néz ki, mégis alig használják. Később kiderült, hogy egyszerűen beleveszett a sűrű tartalomba. A megoldás nem új szín volt, hanem tisztább környezet.

Mobil használat és érintési hibák

A gombok tervezése ma már nem lehet csak asztali gondolkodás. Telefonon más a kézmozdulat, más a pontosság és más a figyelem is. Ami egérrel kényelmesnek tűnik, ujjal sokszor túl kicsi vagy túl közeli lesz. Az emberek nem szeretnek pontos célzásra kényszerülni. Ha a gomb szűk, alacsony vagy túl közel áll egy másik művelethez, abból hiba lesz. Sokszor nem látványos hiba, csak bosszúság. De a bosszúság végül kilépéshez vezet.

Az én tapasztalatom szerint a mobilos felületeken a túl rövid gombmagasság és a rossz elhelyezés a két leggyakoribb gond. És gyakran a felirat sem segít. Ha túl hosszú, törik. Ha túl rövid, semmitmondó. Én inkább a rövid, de világos szövegeket tartom jónak. És azt is, hogy a fontos művelet legyen könnyen elérhető a természetes hüvelykujjas használat során.

Sokan azt gondolják, hogy elég lekicsinyíteni az asztali tervet. De ez ritkán működik jól. A mobil külön közeg. Külön ritmus. Külön hibaforrás. Ezért szerintem a gombok tervezésénél mindig meg kell nézni, hogyan működik az elem valódi telefonos helyzetben. Nem csak képen, hanem használat közben.

Feliratok, bizalom és kattintás

A gomb felirata legalább annyira fontos, mint a formája. Ha a szöveg ködös, általános vagy túl játékos, a látogató elbizonytalanodik. A gomb akkor jó, ha a felirata rögtön választ ad arra, mi következik. Küldés, ajánlatkérés, időpont foglalása, kapcsolatfelvétel. Ezek világos irányok. Én személy szerint nem szeretem a homályos megoldásokat, mert a felhasználó ideje rövid. Nem akar találgatni.

Sok megbízó hibát követ el, amikor minden gombra ugyanazt a szót írja. Például tovább. Ez bizonyos helyzetekben működik, de nem mindenhol. Van, amikor sokkal jobb kimondani a tényleges célt. A látogató így biztosabban kattint. És a bizonytalanság csökkenése önmagában is javítja az eredményt. Döntés előtt az ember szereti tudni, mi vár rá.

Én úgy látom, hogy a jó gomb nem csak szép vagy rendezett. Hanem tisztességes. Nem rejt el fontos információt, nem irányít félre, és nem próbálja sürgetni a látogatót felesleges trükkökkel. Ezért a gombok tervezése szerintem közelebb áll a tiszta kommunikációhoz, mint a díszítéshez. Ha valaki szakembert keres ehhez, azt nézze, érti-e ezt a különbséget. A jó eredmény sokszor egyszerűnek tűnik. De ez többnyire azért van, mert valaki előtte rendesen átgondolta.