Gombok
Akciógombok
Olyan gombok, interaktív elemek, ame lyek megnyomva egy akciót váltanak ki, például az űrlap beküldését.
Elsődleges és másodlagos gombok Egy adott layout akkor van jól felépítve, ha van egy elsődleges akció, amit elvá runk a felhasználótól. Ezt azt akciót egy gomb megnyomásával tudja a felhasználó véghezvinni, az elsődleges akciógomb megnyomásával. Lehető séget kell biztosítani egyéb akció vagy akciók indítására is, de ezeket vizuális hierarchiába kell rendezni. Így jönnek létre a másod- vagy akár komplex rend szerekben harmadlagos akciógombok is. Ezeknek a hangsúlya világosan meg kell, hogy legyen komponálva, egyébként zavart okoz a felhasználóban, hogy az adott felületen milyen akciót várunk el tőle elsődlegesen.
A mintán az elsőnél két azonos súlyú gombot mutatunk, maximum a gombok sorrendje jelent némi hierarchiát (a bal oldali némileg kiemeltebb pozíció). Ha ennél hangsúlyosabb vizuális megkü lönböztetést hozunk létre, akkor például a gomb színének visszavételével, vagy akár a gomb teljes elvételével és link létrehozásával tudjuk ezt megtenni (lásd második és harmadik példa).
Tehát a vizuális hierarchia létrehozására az alábbi eszközeink vannak:
• méretbeli eltérés
• színbeli eltérés
• grafikai eltérés
• pozíció
Gombok pozíciója
Nemcsak a gombok színével, méretével fontos foglalkozni, hanem az elhelyezé sükkel, pozíciójukkal is, mert ez is befo
149
04
L I B
D
Gombok hierarchiája
Különböző fontosságú gombok, különböző vizuális megjelenéssel bírnak. Minta a zwistem UI Kitből.
lyásolja az értelmezést. Például komplex űrlapokon kell lennie „vissza” gombnak. Rosszul elhelyezett „vissza” gomb vélet len megnyomásokhoz vezethet, amelyek frusztrációt okoznak a felhasználónak.
A jó gombok ott helyezkednek el, ahol a felhasználók keresnék őket. A gombok sorrendje is hasonlóan fontos, ha több gomb van egymás mellett. Fontos, hogy a design hangsúlyt helyezzen az elsőd leges akciógombra.
A fenti példában egy albumot szeret nénk törölni, és a felugró párbeszédab lak ebben kér megerősítést. Ennek meg felelően az elsődleges akció a „select”. Ezt színben és pozícióban is megerősíti a design. A piros kiemelkedik, ráadásul tiltó szín, felhívja a figyelmet az akció veszélyességére. Pozíciója jobb oldali, ami ugyancsak azt erősíti, hogy azzal lépünk tovább.
Biztos
Biztos
A címke megfogalmazása is fontos, legyen egyértelmű és rövid. Ugyanezt a screent ha megnézzük a gombfel iratok nélkül, akkor látjuk, hogy így is könnyen értelmezhető lenne.
Gombfeliratok
Kerüljük az általános elnevezéseket, cél szerűbb a kissé leíró szövegezés alkal mazása, vagy akár konkrét CTA (call to action) elhelyezése. A gombon a felirat, ha megoldható, akkor buzdítson cselek vésre a legtöbb esetben.
Reset gomb Több kárt okoz, mint amennyi haszna lehet, hiszen véletlenül megnyomva frusztrációt okoz, viszont a hasznosság
150
benne, hogy törölni szeretné ezt az albumot?
Mégse Törlés
benne, hogy törölni szeretné ezt az albumot?
megkérdőjelezhető: hányszor akartál eddig egy űrlapot törölni?!
Vizuális megjelenés
A gomboknak gombként kell kinézniük, erről gondoskodnod kell. Az affordan cia a tárgyak észlelésének olyan eleme, amely a használati tulajdonságokat kapcsolja hozzá az észlelt jellemzőkhöz. Mitől lesz valami gombszerű? A színek, formák árnyékok összessége adja, hogy egy adott elem gombnak néz ki vagy sem.
Tervezéskor nemcsak a gomb formájá ra és pozíciójára kell gondolni, hanem a méretére is. Érintőképernyős terve zéskor figyelembe kell venni az emberi ujj paramétereit is, hogy kényelmesen tappolható, vagy eltalálható legyen. Korábbi MIT-kutatások azt mutatták ki, hogy az emberi ujjbegy átlagosan 8–10 mm széles. Ebből következik, hogy az ideális tapintható minimális gombméret 10x10 mm.
Az ajánlott gombméret érintőképernyős felületeken 7-10 mm. Ez a fizikai mé ret, amelyet át kell fordítanunk digitális
méretbe. Az Apple Human Interface Gu idelines szerint ez minimum 44 px-t je lent. Mivel a pixel fizikai mérete változó, a 44 px méret is változó fizikai mérettel bírhat különböző eszközökön.
A Google Material design előírásai sze rint minimum 48x48 dp-nek kell lennie a tappolható felületnek. A dp a Goog le saját mértékegysége, amely density independent pixelt vagyis, sűrűségfüg getlen pixelt jelent.
A gombok formája
A gombok általában téglalap formájúak, lekerekített vagy lekerekítetlen sarkok kal. Extrém esetben teljesen lekerekített, teljes körív formában végződnek.
Kutatások azt mutatják, hogy a kere kített sarkok a figyelmet a gomb kö zéppontja felé irányítják. Lehet más formákat is kipróbálni, mint például kör vagy háromszög alakú gombok de ebben mindig benne van a veszély, hogy a felhasználók nem fogják felismerni a szokatlan formát. Bármilyen formájú is az interface-en a gombod, fontos, hogy konzisztensen használd, ne legyen
151
04 ikon háttér bal margó felső margó alsó margó Edit felirat jobb margó
keret A UI gomb anatómiája
rádiusz
minden screenen másféle formájú, színű gomb, mert a felhasználóid nem fogják érteni.
Ki- vagy felemelt gomb
Grafikai eszközökkel azt a hatást érjük el, hogy a gomb elemelkedik a felületről. Ezt olyan akciókhoz használjuk, melyek kiemeltek az UI-felületen. Ennek a gombnak különböző állapotai vannak, érdekessége, hogy lenyomáskor nem a benyomódás hatását kelti, hanem az ujjunkhoz cuppan. Ezt a megoldást a Material Design vezette be. A ilyen ki emelt gomboknak a a fenti ábrán jelzett állapotai vannak.
Flat gombok
A flat gombok nem emelkednek ki meg nyomáskor, csak más kitöltőszínt kap nak. Ezeket kevésbé kiemelt akciókhoz használjuk (secondary action). Előnyük, hogy jobban beleolvadnak a tartalmi környezetbe.
Toggle vagy switch gomb
A switch gombbal a felhasználó két állapot között tud választani. Jellem zően mobilfelületeken használjuk, de
az utóbbi időben beszivárgott és egyre gyakoribb az asztali felületeken való megjelenése is.
Ghost button
A gomb azon vizuális megjelenési for mája, amikor csak egy keret veszi körül a gombfeliratot, tehát nincs kitöltve a gomb háttérszínnel, hanem a gomb alatti háttér színét veszi fel a gomb is, csak a keret választja el a háttértől. Általában nem használjuk elsődleges gombként, inkább hátrébb vont sze repe van az ilyen vizuális megjelenésű gomboknak.
A gombok állapotai Normál állapot: az alapszabály az, hogy nyugalmi állapotban egy gomb gomb ként nézzen ki. Erre rossz példát jelente nek a teljesen flat layoutokon lévő gomb UI-elemek. Fókuszált, vagy hover állapot: ha a felhasználó a gomb fölé viszi az egeret, egyértelmű vizuális megerősítést kell kapnia, hogy gombot szeretne ma nipulálni. Lenyomott állapot: nélküle is lehet működő UI-t tervezni és használni, de ez olyan kis vizuális csemege, amit a felhasználók értékelni fognak.
152
normál fókusz hover aktív inaktív
Save Save Save Save Save
Preview
Delete
Preview Preview Preview Preview
Delete Delete Delete Delete
Gombok hierachiája és jellemző állapotaik.
Űrlapok
Az űrlap az elsődleges formája a prog ramok és a felhasználók közötti interak ciónak. Ezért is fontos, hogy ezek jól megtervezettek, a felhasználók számára világosan érthetőek és a legkevesebb szükséges erőfeszítéssel kitölthetőek legyenek.
Az űrlapok jellemzően öt elemből épül nek fel:
• Struktúra, amely meghatározza az űrlap felépítését, az összetartozó és különálló elemek megjelenítését,
• Beviteli mezők, melyek lehetnek szö vegesek, rejtett szövegesek (pl. jelszó), check boxok, radio gombok, sliderek, vagy valamilyen egyéb egyedi beviteli eszköz, amelyet a tervező megtervez,
• Mező címkék, ezek a kis feliratok, amelyek megmondják a felhasználó nak, hogy milyen inputot várunk el tőle,
• Akciógombok, amelyek megnyomá sakor elindítunk valamit a felületen (pl.: „jóváhagyás” vagy „megszakítás” gomb),
• Visszajelzés, a felhasználó akciójára történő reakció, visszajelzés, amelyből megérti, hogy mi történt, milyen folya mat zajlott le. Ezek üzenetek is lehet nek, amelyekben pozitív vagy negatív megerősítést kap a felhasználó, de lehetnek egyértelmű animációk is.
Opcionálisan lehetnek még egyéb ele mei is egy űrlapnak:
• Segítség, szöveges utalások a kitöltés egyszerűsítésére.
• Azonnali validáció, amely a kitöltés közben azonnal jelzi a bevitt adat minőségét vagy helyességét (pl. jel szóerősség-indikátor).
Űrlapstruktúra kialakítása
Az űrlapokra úgy kell tekinteni, mint egy párbeszédre két fél között, jelen eset ben a felhasználó és az app/weboldal között. A párbeszéd hangneme fogja meghatározni, hogy milyen érzésekkel tölti ki a felhasználó, pont mint a valós életben, amikor mosolyog a pénztáros vagy bunkón ad vissza. Az űrlap egy kommunikációs csatorna, amelyen a fel használóihoz „szól” az adott vállalat.
Csak annyit kérdezz, amennyi szükséges
Legyél biztos abban, hogy csak annyi mező kitöltését várod el a felhasználó tól (csak annyit kérdezel), amennyire az adott pillanatban mindenképp szük séged van. Minden egyes plusz bevitel, amit az űrlapba raksz, befolyásolja a konverziót. Ezért fontos minden elemet megvizsgálni, hogy az adott szituáció ban biztosan be kell-e kérni, nem ér-e rá esetleg egy későbbi szituációban az adott adat bekérése.
Adj címet, és legyen logikus, értelmezhető a felépítés Legyen az űrlapnak címe, amiből kiderül az űrlap célja. Nagyon fontos, hogy a kérdéseket a felhasználó szemszö géből kell feltenni, nem pedig az üzleti
153
04
*
Űrlapok esetén fontos a linearitás, fontos, hogy a felhasználó értse a folyamatot, és ne kelljen ugrálnia a lépések között, mert így csökkentjük a hibázás lehetőségét is.
Lineáris folyamat esetén csak lépni kell a következő inputra.
logika és megfogalmazás szerint. Fontos a kérdések sorrendje is, az általános felől kell menni a részletek felé, pl. fur csa, ha előbb valakinek a telefonszámát kéred, és utána a nevét.
Összetartozó információk csoportosítása Olyan információkat, amelyek valamilyen logikai szempont szerint összetartoznak, csoportosítani kell. Ez azért fontos, hogy a felhasználó könnyen átlássa, hogy milyen információkat várnak tőle. (Pl. személyes adatok, szállítási adatok stb.)
Egy hasáb a több hasáb ellenében Űrlapok sose legyenek többhasábosok. Több hasáb esetén ugyanis nem lineáris a kitöltés menete a felhasználó szá mára, Z-minta szerint kell szkennelnie, ezért nem egyértelmű számára a kitöltés sorrendje, így lassabban fogja kitölteni. Gondoljunk csak a korábbiakra, ez azt jelenti, hogy ez az elrendezés a konverziós rátánkat befolyásolja negatív értelemben.
Beviteli mezők
A beviteli mezők azok a felületek, ame lyeket a felhasználó kitölt, bejelöl stb., így adva át az információt. Ezek a mezők lehetnek szövegesek, rejtett szövegesek (pl. jelszó), check boxok, radio gombok, sliderek, vagy képvisel hetnek valamilyen egyedi beviteli módot, amelyet a tervező megtervez.
Beviteli mezők száma Kritikus a konverzió miatt, ezért jó, ha a minimumom tartjuk. Ahol lehet, össze vonhatunk (ésszel!), amit lehet, később, egy másik folyamat során kérdezünk meg a felhasználótól.
Kötelező és opcionális mezők Lehetőség szerint kerüljük az opcionális mezők alkalmazását, csak olyan mezőt tervezzünk, amely szükséges. Ha mégis szükséges opcionális mezők alkalma zása, akkor mindenképp tüntessük fel, hogy melyek azok (a kötelező mezők címkéit pl. * jellel szokták megjelölni).
154
Alapértelmezett értékek beállítása Érdemes ezeket elkerülni, mert a felhasz nálók hajlamosak gyorsan szkennelni az űrlapokat, és nem fordítanak elég figyelmet, hogy észrevegyék, mi az, amit ők töltöttek ki, és mi az, ami előre kitöl tött volt. Olyan esetben lehet alapértelmezett értéket megadni, ahol tudjuk, hogy a felhasználók több mint 90%-a ezt az értéket választja ki vagy írja be, illetve amikor konkrét adat alapján meg tudunk adni egy adatot a felhasználó helyett. Például geolokáció alapján, IP cím alapján meg tudjuk állapítani, hogy mely országban van.
Címkék
A címkék alapvető fontosságúak egy űrlap megértéséhez. Jó pozícióval és szövegezéssel egyértelműen irányítják a felhasználót az űrlap megértésében és kitöltésében.
Szövegezés
A címkék nem help szövegek, tartóz kodjunk a hosszú megfogalmazásoktól. Egy-két szavas, lényegretörő, egysze rű megfogalmazást kell a címkéknél alkalmazni. Példaként áll az Amazon korábbi login screenje ahol sok felesle ges szót használtak, így vissza is vetette a konverziót. Nem érvényesült az az alapszabály, hogy amit lehet, vegyünk le a UI-ról. Ennek megfelelően nagy a vizuális zaj, ami kihat a felhasználók regisztrációs hajlandóságára is.
A rövid címkék használata és az opcio nális mezők elhagyása könnyen átlát ható űrlapot eredményez, javítva a site konverzióját.
Címkék
tipográfiája
A címkék lehetnek nagy kezdőbetűsek, vagy az angol nyelvben akár minden szót kezdhetünk nagy kezdőbetűvel, viszont olvashatóság szempontjából megfontolandó a csupa verzál címke használata. A fel- és lenyúló szárak hiányában nehezebb a szkennelés, bár ilyen rövid, 1-2 szavas kifejezéseknél ez még nem okoz nehézséget a felhaszná lónak.
Címkék pozíciója, elrendezései
A címkék elhelyezésére négy lehetősé günk van: • az input mellett balra zárva, • az input mellett jobbra zárva, • az input felett, • az inputban elhelyezve.
Korai szemkövető vizsgálatok arra a megfigyelésre jutottak, hogy a legy gyorsabban az input feletti címkéket tudták a felhasználók értelmezni. Későbbi vizsgálatok ezt viszont nem támasztották alá: nem találtak szignifikáns különbsé get az egyes elrendezések között.
Input felett elhelyezkedő címke Nagy előnye, hogy a különböző hosszú ságú címkék sem okoznak a designban problémát, hiszen van hely, illetve a cím kék különböző nyelvű lokalizációja sem okozhat gondot: kifér minden.
A mobilkijelzők arányait figyelembe véve is előnyös ez az elrendezés: a keskeny screenen nem lenne elég hely egymás mellett a címkének és a mezőnek. Vi szont hosszabb űrlapoknál már problé mát okozhat, hogy sokkal több vertikális térre van szükség így egy adott űrlap
155
04
A beviteli mezőhöz tartozó címke befolyásolja az űrlap feldolgozásának idejét. Balra rendezett címkék esetén ugrál a szem a címke és a mező között. (kör » fixációs hely, mérete » eltöltött idő, vonal » szem útvonala)
Jobbra rendezett címke esetén egy tengelyre rendeződik a figyelem, gyorsan szkennelhető, viszont a hosszú címkenév nem ideális.
A mező feletti címke gyorsan feldolgozható, viszont az űrlap vertikálisan meghosszabbodik.
számára, mint ha mellette lenne. Tény, hogy legjobb kitöltési mutatókkal ezek az elrendezések bírnak.
Balra rendezett címkék
A balra rendezett címkék legnagyobb hátránya, hogy lassabb a kitöltési idejük. A vizuális távolság itt a legnagyobb a címke és a mező között, ezért tart so káig az elemek értelmezése: sok fixációt kíván a szemtől, és ez időt vesz igénybe. Sőt, minél rövidebb a címke – ami célunk is –, annál nagyobb lehet ez a távolság. Ellenben nem mindig hátrány, ha valami lassabban történik. Hiszen ekkor jobban figyel a felhasználó, így ha fontos, akár hivatalos adatok beviteléről van szó, ak kor célszerű lehet szándékosan lassítani a folyamatot.
Jobbra rendezett címkék Ezeknek a legnagyobb előnye, hogy mivel közel vannak a beviteli mezőkhöz, gyorsabb a kitöltés. Az egymáshoz közel eső elemek kapcsolatban vannak egy
mással, ez nem véletlen, ezt már a Gestalt-elvek is rögzítik: a közelség törvénye (law of proximity). A jobb ra rendezett címkék hátránya viszont abban van, hogy a kialakult layoutnak így nincs erőteljes vizuális határa a bal oldalon, zászlóznak a sorkezdetek, ami design szempontból nem előnyös („bo rulhat” a design balra), illetve nehezen szkennelhető.
A fentiekből következik, hogyha azt szeretnénk, hogy a felhasználónk gyorsan átlássa és gyorsan kitölthesse az űrlapot, akkor a címkéket a beviteli mező fölé kell helyezni. Amennyiben sze retnénk, hogy időt töltösön el az adatok bevitelével, akkor a jobbra zárt elrende zés a megfelelő megoldás.
Inline címke Inline címkéről beszélünk, amikor a címke nem a beviteli mező mellett/ felett helyezkedik el, hanem magában a beviteli mezőben jelenik meg. Ennek
156
Címed Város
Cég, amelynél vagy
Munkatársaid száma Válassz!
Beküld
Címed Vezetéknév Keresztnév
Életkor Város
Város
Cég, amelynél vagy Munkatársaid száma Válassz! Beküld
Válassz! Beküld
hátránya, hogy ha elkezdjük kitölteni az űrlapot, akkor eltűnik, nem lesz látható, hogy mit is kér az input. Előnye, hogy nem kell plusz helyet biztosítani a címké nek, így ez rövidebb űrlapok esetén, pl. egy belépési űrlapnál ideális megoldás.
A másik veszély, hogy mivel a beviteli mező már tartalmaz szöveget, a felhasználó azt hiszi, hogy már ki van tölt
ve. Ennek ellenére nagyon divatosak, és jól néznek ki az ilyen mezők, pláne, ha animálva vannak.
Jó megoldás lehet az úszó címke, amely ugyan a beviteli mezőben van, viszont amikor a felhasználó belekattint, akkor a címke kisebb méretben, de megmarad a mezőn belül.
címke bal margó kezdő ikon
Password Strong
