Serfőző Péter - User Interface Design - könyv minta - brandguide

SERFŐZŐ PÉTER

UI-DESIGN & DIGITÁLIS TERVEZÉS

Home

hamburger

oreos

kebab

candy box

chocolate

cheeseburger

hot dog

veggie burger

strawberry

fries

stairs

cake

Hamburger menünek nevezzük a mobilos felületeken a rejtett menüt. Az elnevezés a három párhuzamos vonal adta asszociációból jött létre. Sőt, ezt tovább is gondolták a designerek és más menütípusokat is létrehoztak.

Ikonok címkével

Fontos belátni, hogy a komplex cselek-

A legtisztább, ha az ikonok magukért

vések vagy asszociációk ikongrafikus

beszélnek, és nincs szükség további

megjelenítése korlátos, megfontolandó,

szöveges címkézésre. Számos olyan eset

hogy ezeket mindig szövegcímkével

fordulhat elő, amikor ez nem megke-

egészítsük ki. A hoverre megjelenő címke

rülhető, olyan komplex kifejezéseknek,

nem annyira hatékony, mint a folya-

elvont tartalmaknak kell ikont használni,

matosan látható. Az is megállapítható,

hogy ez nem megoldható. Ilyenkor az

hogy az ikon + címke megjelenési forma

ikon és szó kombinációjából gyorsan

a leghatékonyabb, jobb, mintha önálló-

felismerhető jel jön létre.

an vagy ikont, vagy címkét használnánk csak.

A felhasználóknak tiszta elvárásaiknak kell lenniük ahhoz, hogy egy ikonra

Ne keverjünk platformspecifikus

koppintsanak vagy klikkeljenek. Ellenke-

ikonokat

ző esetben elbizonytalanodnak, és ez

Mind az iOS-nek, mind az Androidnak

a felhasználói élmény rovására megy.

megvan a saját ikonkészlete, melyek ráadásul már messziről megkülönböz-

Készültek felhasználói tesztek is a cím-

tethetők. Ne keverjük ezeket a vizuális

kével ellátott és címke nélküli felületekre:

világokat, pl iOS-appba ne tegyünk

• olyan esetekben, ahol címke támogatta az ikont, a felhasználók 88%-a meg tudta mondani, hogy mi fog történni az ikon megnyomása után, • címke nélküli ikonoknál ez a szám 60% alá esett, sőt az egyedi ikonok esetében, amelyeket korábban nem ismertek, ez tovább esett 34% könyékére.

148

bold, Android-szerű ikonokat, mert az szokatlan az Apple világában.

Y

LIBER

T

04

D

18 mm

15 mm

10 mm

Gombok méretei Talán nem árulok el titkot azzal, hogy a gombok méretét ahhoz az eszközhöz érdemes igazítani, amivel meg tudjuk nyomni. Az érintőképernyők elterjedése óta ez az ujjunk, annak fizikai mérete határozza meg a UI gomb méretét.

Gombok Akciógombok

A mintán az elsőnél két azonos súlyú

Olyan gombok, interaktív elemek, ame-

gombot mutatunk, maximum a gombok

lyek megnyomva egy akciót váltanak ki,

sorrendje jelent némi hierarchiát (a bal

például az űrlap beküldését.

oldali némileg kiemeltebb pozíció). Ha ennél hangsúlyosabb vizuális megkü-

Elsődleges és másodlagos gombok

lönböztetést hozunk létre, akkor például

Egy adott layout akkor van jól felépítve,

a gomb színének visszavételével, vagy

ha van egy elsődleges akció, amit elvá-

akár a gomb teljes elvételével és link

runk a felhasználótól. Ezt azt akciót

létrehozásával tudjuk ezt megtenni (lásd

egy gomb megnyomásával tudja a

második és harmadik példa).

felhasználó véghezvinni, az elsődleges akciógomb megnyomásával. Lehető-

Tehát a vizuális hierarchia létrehozására

séget kell biztosítani egyéb akció vagy

az alábbi eszközeink vannak:

akciók indítására is, de ezeket vizuális

• méretbeli eltérés

hierarchiába kell rendezni. Így jönnek

• színbeli eltérés

létre a másod- vagy akár komplex rend-

• grafikai eltérés

szerekben harmadlagos akciógombok is.

• pozíció

Ezeknek a hangsúlya világosan meg kell, hogy legyen komponálva, egyébként

Gombok pozíciója

zavart okoz a felhasználóban, hogy az

Nemcsak a gombok színével, méretével

adott felületen milyen akciót várunk el

fontos foglalkozni, hanem az elhelyezé-

tőle elsődlegesen.

sükkel, pozíciójukkal is, mert ez is befo149

Gombok hierarchiája

lyásolja az értelmezést. Például komplex

Különböző fontosságú gombok, különböző vizuális megjelenéssel bírnak.

Minta a zwistem UI Kitből.

űrlapokon kell lennie „vissza” gombnak.

Rosszul elhelyezett „vissza” gomb véletlen 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ődleges akciógombra.

A fenti példában egy albumot szeretnénk törölni, és a felugró párbeszédablak ebben kér megerősítést. Ennek megfelelő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.

A címke megfogalmazása is fontos,

Biztos benne, hogy törölni szeretné ezt az albumot?

Mégse

Törlés

legyen egyértelmű és rövid. Ugyanezt a screent ha megnézzük a gombfeliratok nélkül, akkor látjuk, hogy így is könnyen értelmezhető lenne.

Gombfeliratok Kerüljük az általános elnevezéseket, célszerűbb a kissé leíró szövegezés alkalmazása, vagy akár konkrét CTA (call to action) elhelyezése. A gombon a felirat, ha megoldható, akkor buzdítson cselek-

Biztos benne, hogy törölni szeretné ezt az albumot?

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

megkérdőjelezhető: hányszor akartál

méretbe. Az Apple Human Interface Gu-

eddig egy űrlapot törölni?!

idelines szerint ez minimum 44 px-t je-

04

lent. Mivel a pixel fizikai mérete változó, Vizuális megjelenés

a 44 px méret is változó fizikai mérettel

A gomboknak gombként kell kinézniük,

bírhat különböző eszközökön.

erről gondoskodnod kell. Az affordancia a tárgyak észlelésének olyan eleme,

A Google Material design előírásai sze-

amely a használati tulajdonságokat

rint minimum 48x48 dp-nek kell lennie

kapcsolja hozzá az észlelt jellemzőkhöz.

a tappolható felületnek. A dp a Goog-

Mitől lesz valami gombszerű? A színek,

le saját mértékegysége, amely density

formák árnyékok összessége adja, hogy

independent pixelt vagyis, sűrűségfüg-

egy adott elem gombnak néz ki vagy

getlen pixelt jelent.

sem.

A gombok formája Tervezéskor nemcsak a gomb formájá-

A gombok általában téglalap formájúak,

ra és pozíciójára kell gondolni, hanem

lekerekített vagy lekerekítetlen sarkok-

a méretére is. Érintőképernyős terve-

kal. Extrém esetben teljesen lekerekített,

zéskor figyelembe kell venni az emberi

teljes körív formában végződnek.

ujj paramétereit is, hogy kényelmesen tappolható, vagy eltalálható legyen.

Kutatások azt mutatják, hogy a kere-

Korábbi MIT-kutatások azt mutatták ki,

kített sarkok a figyelmet a gomb kö-

hogy az emberi ujjbegy átlagosan 8–10

zéppontja felé irányítják. Lehet más

mm széles. Ebből következik, hogy az

formákat is kipróbálni, mint például

ideális tapintható minimális gombméret

kör vagy háromszög alakú gombok de

10x10 mm.

ebben mindig benne van a veszély, hogy a felhasználók nem fogják felismerni

Az ajánlott gombméret érintőképernyős

a szokatlan formát. Bármilyen formájú

felületeken 7-10 mm. Ez a fizikai mé-

is az interface-en a gombod, fontos,

ret, amelyet át kell fordítanunk digitális

hogy konzisztensen használd, ne legyen

A UI gomb anatómiája felső margó ikon

bal margó

rádiusz

Edit

jobb margó

keret

háttér

felirat alsó margó 151

normál

fókusz

hover

aktív

inaktív

Preview

Preview

Preview

Preview

Preview

Save

Save

Save

Save

Save

Delete

Delete

Delete

Delete

Delete

Gombok hierachiája és jellemző állapotaik.

minden screenen másféle formájú, színű

az utóbbi időben beszivárgott és egyre

gomb, mert a felhasználóid nem fogják

gyakoribb az asztali felületeken való

érteni.

megjelenése is.

Ki- vagy felemelt gomb

Ghost button

Grafikai eszközökkel azt a hatást érjük

A gomb azon vizuális megjelenési for-

el, hogy a gomb elemelkedik a felületről.

mája, amikor csak egy keret veszi körül

Ezt olyan akciókhoz használjuk, melyek

a gombfeliratot, tehát nincs kitöltve

kiemeltek az UI-felületen. Ennek

a gomb háttérszínnel, hanem a gomb

a gombnak különböző állapotai vannak,

alatti háttér színét veszi fel a gomb is,

érdekessége, hogy lenyomáskor nem

csak a keret választja el a háttértől.

a benyomódás hatását kelti, hanem az

Általában nem használjuk elsődleges

ujjunkhoz cuppan. Ezt a megoldást

gombként, inkább hátrébb vont sze-

a Material Design vezette be. A ilyen ki-

repe van az ilyen vizuális megjelenésű

emelt gomboknak a a fenti ábrán jelzett

gomboknak.

állapotai vannak.

A gombok állapotai Flat gombok

Normál állapot: az alapszabály az, hogy

A flat gombok nem emelkednek ki meg-

nyugalmi állapotban egy gomb gomb-

nyomáskor, csak más kitöltőszínt kap-

ként nézzen ki. Erre rossz példát jelente-

nak. Ezeket kevésbé kiemelt akciókhoz

nek a teljesen flat layoutokon lévő gomb

használjuk (secondary action). Előnyük,

UI-elemek. Fókuszált, vagy hover állapot:

hogy jobban beleolvadnak a tartalmi

ha a felhasználó a gomb fölé viszi az

környezetbe.

egeret, egyértelmű vizuális megerősítést kell kapnia, hogy gombot szeretne ma-

Toggle vagy switch gomb

nipulálni. Lenyomott állapot: nélküle is

A switch gombbal a felhasználó két

lehet működő UI-t tervezni és használni,

állapot között tud választani. Jellem-

de ez olyan kis vizuális csemege, amit

zően mobilfelületeken használjuk, de

a felhasználók értékelni fognak.

152

04

Űrlapok Az űrlap az elsődleges formája a prog-

• Azonnali validáció, amely a kitöltés

ramok és a felhasználók közötti interak-

közben azonnal jelzi a bevitt adat

ciónak. Ezért is fontos, hogy ezek jól

minőségét vagy helyességét (pl. jel-

megtervezettek, a felhasználók számára

szóerősség-indikátor).

világosan érthetőek és a legkevesebb szükséges erőfeszítéssel kitölthetőek

Űrlapstruktúra kialakítása

legyenek.

Az űrlapokra úgy kell tekinteni, mint egy párbeszédre két fél között, jelen eset-

Az űrlapok jellemzően öt elemből épül-

ben a felhasználó és az app/weboldal

nek fel:

között. A párbeszéd hangneme fogja

• Struktúra, amely meghatározza az

meghatározni, hogy milyen érzésekkel

űrlap felépítését, az összetartozó és

tölti ki a felhasználó, pont mint a valós

különálló elemek megjelenítését,

életben, amikor mosolyog a pénztáros

• Beviteli mezők, melyek lehetnek szö-

vagy bunkón ad vissza. Az űrlap egy

vegesek, rejtett szövegesek (pl. jelszó),

kommunikációs csatorna, amelyen a fel-

check boxok, radio gombok, sliderek,

használóihoz „szól” az adott vállalat.

vagy valamilyen egyéb egyedi beviteli eszköz, amelyet a tervező megtervez, • Mező címkék, ezek a kis feliratok,

Csak annyit kérdezz, amennyi szükséges

amelyek megmondják a felhasználó-

Legyél biztos abban, hogy csak annyi

nak, hogy milyen inputot várunk el tőle,

mező kitöltését várod el a felhasználó-

• Akciógombok, amelyek megnyomá-

tól (csak annyit kérdezel), amennyire az

sakor elindítunk valamit a felületen

adott pillanatban mindenképp szük-

(pl.: „jóváhagyás” vagy „megszakítás”

séged van. Minden egyes plusz bevitel,

gomb),

amit az űrlapba raksz, befolyásolja

• Visszajelzés, a felhasználó akciójára

a konverziót. Ezért fontos minden elemet

történő reakció, visszajelzés, amelyből

megvizsgálni, hogy az adott szituáció-

megérti, hogy mi történt, milyen folya-

ban biztosan be kell-e kérni, nem ér-e

mat zajlott le. Ezek üzenetek is lehet-

rá esetleg egy későbbi szituációban az

nek, amelyekben pozitív vagy negatív

adott adat bekérése.

megerősítést kap a felhasználó, de lehetnek egyértelmű animációk is.

Adj címet, és legyen logikus, értelmezhető a felépítés

Opcionálisan lehetnek még egyéb ele-

Legyen az űrlapnak címe, amiből kiderül

mei is egy űrlapnak:

az űrlap célja. Nagyon fontos, hogy

• Segítség, szöveges utalások a kitöltés egyszerűsítésére.

a kérdéseket a felhasználó szemszögéből kell feltenni, nem pedig az üzleti 153

Ű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

Beviteli mezők

a kérdések sorrendje is, az általános

A beviteli mezők azok a felületek, ame-

felől kell menni a részletek felé, pl. fur-

lyeket a felhasználó kitölt, bejelöl stb.,

csa, ha előbb valakinek a telefonszámát

így adva át az információt. Ezek

kéred, és utána a nevét.

a mezők lehetnek szövegesek, rejtett szövegesek (pl. jelszó), check boxok,

Összetartozó információk

radio gombok, sliderek, vagy képvisel-

csoportosítása

hetnek valamilyen egyedi beviteli módot,

Olyan információkat, amelyek valamilyen

amelyet a tervező megtervez.

logikai szempont szerint összetartoznak, csoportosítani kell. Ez azért fontos, hogy

Beviteli mezők száma

a felhasználó könnyen átlássa, hogy

Kritikus a konverzió miatt, ezért jó, ha

milyen információkat várnak tőle. (Pl.

a minimumom tartjuk. Ahol lehet, össze-

személyes adatok, szállítási adatok stb.)

vonhatunk (ésszel!), amit lehet, később, egy másik folyamat során kérdezünk

Egy hasáb a több hasáb ellenében

meg a felhasználótól.

Űrlapok sose legyenek többhasábosok.

Több hasáb esetén ugyanis nem lineáris

Kötelező és opcionális mezők

a kitöltés menete a felhasználó szá-

Lehetőség szerint kerüljük az opcionális

mára, Z-minta szerint kell szkennelnie,

mezők alkalmazását, csak olyan mezőt

ezért nem egyértelmű számára a kitöltés

tervezzünk, amely szükséges. Ha mégis

sorrendje, így lassabban fogja kitölteni.

szükséges opcionális mezők alkalma-

Gondoljunk csak a korábbiakra, ez azt

zása, akkor mindenképp tüntessük fel,

jelenti, hogy ez az elrendezés a konverziós

hogy melyek azok (a kötelező mezők

rátánkat befolyásolja negatív értelemben.

címkéit pl. * jellel szokták megjelölni).

154

04

Alapértelmezett értékek beállítása

Címkék tipográfiája

Érdemes ezeket elkerülni, mert a felhasz-

A címkék lehetnek nagy kezdőbetűsek,

nálók hajlamosak gyorsan szkennelni

vagy az angol nyelvben akár minden

az űrlapokat, és nem fordítanak elég

szót kezdhetünk nagy kezdőbetűvel,

figyelmet, hogy észrevegyék, mi az, amit

viszont olvashatóság szempontjából

ők töltöttek ki, és mi az, ami előre kitöl-

megfontolandó a csupa verzál címke

tött volt. Olyan esetben lehet alapértel-

használata. A fel- és lenyúló szárak

mezett értéket megadni, ahol tudjuk,

hiányában nehezebb a szkennelés, bár

hogy a felhasználók több mint 90%-a

ilyen rövid, 1-2 szavas kifejezéseknél ez

ezt az értéket választja ki vagy írja be,

még nem okoz nehézséget a felhaszná-

illetve amikor konkrét adat alapján meg

lónak.

tudunk adni egy adatot a felhasználó helyett. Például geolokáció alapján, IP

Címkék pozíciója, elrendezései

cím alapján meg tudjuk állapítani, hogy

A címkék elhelyezésére négy lehetősé-

mely országban van.

günk van: • az input mellett balra zárva,

Címkék

• az input mellett jobbra zárva,

A címkék alapvető fontosságúak egy

• az input felett,

űrlap megértéséhez. Jó pozícióval és

• az inputban elhelyezve.

szövegezéssel egyértelműen irányítják a felhasználót az űrlap megértésében

Korai szemkövető vizsgálatok arra

és kitöltésében.

a megfigyelésre jutottak, hogy a leg�gyorsabban az input feletti címkéket

Szövegezés

tudták a felhasználók értelmezni. Későbbi

A címkék nem help szövegek, tartóz-

vizsgálatok ezt viszont nem támasztották

kodjunk a hosszú megfogalmazásoktól.

alá: nem találtak szignifikáns különbsé-

Egy-két szavas, lényegretörő, egysze-

get az egyes elrendezések között.

rű megfogalmazást kell a címkéknél alkalmazni. Példaként áll az Amazon

Input felett elhelyezkedő címke

korábbi login screenje ahol sok felesle-

Nagy előnye, hogy a különböző hosszú-

ges szót használtak, így vissza is vetette

ságú címkék sem okoznak a designban

a konverziót. Nem érvényesült az az

problémát, hiszen van hely, illetve a cím-

alapszabály, hogy amit lehet, vegyünk le

kék különböző nyelvű lokalizációja sem

a UI-ról. Ennek megfelelően nagy

okozhat gondot: kifér minden.

a vizuális zaj, ami kihat a felhasználók regisztrációs hajlandóságára is.

A mobilkijelzők arányait figyelembe véve is előnyös ez az elrendezés: a keskeny

A rövid címkék használata és az opcio-

screenen nem lenne elég hely egymás

nális mezők elhagyása könnyen átlát-

mellett a címkének és a mezőnek. Vi-

ható űrlapot eredményez, javítva a site

szont hosszabb űrlapoknál már problé-

konverzióját.

mát okozhat, hogy sokkal több vertikális térre van szükség így egy adott űrlap 155

Címed

Címed

Város

Város

Cég, amelynél vagy Munkatársaid száma

Vezetéknév Keresztnév

Cég, amelynél vagy Válassz!

Munkatársaid száma

Beküld

Életkor

Válassz!

Válassz!

Város

Beküld

Beküld

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,

mással, ez nem véletlen, ezt már

hogy legjobb kitöltési mutatókkal ezek

a Gestalt-elvek is rögzítik: a közelség

az elrendezések bírnak.

törvénye (law of proximity). A jobbra rendezett címkék hátránya viszont

Balra rendezett címkék

abban van, hogy a kialakult layoutnak

A balra rendezett címkék legnagyobb

így nincs erőteljes vizuális határa a bal

hátránya, hogy lassabb a kitöltési idejük.

oldalon, zászlóznak a sorkezdetek, ami

A vizuális távolság itt a legnagyobb a

design szempontból nem előnyös („bo-

címke és a mező között, ezért tart so-

rulhat” a design balra), illetve nehezen

káig az elemek értelmezése: sok fixációt

szkennelhető.

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

A fentiekből következik, hogyha azt

is –, annál nagyobb lehet ez a távolság.

szeretnénk, hogy a felhasználónk

Ellenben nem mindig hátrány, ha valami

gyorsan átlássa és gyorsan kitölthesse

lassabban történik. Hiszen ekkor jobban

az űrlapot, akkor a címkéket a beviteli

figyel a felhasználó, így ha fontos, akár

mező fölé kell helyezni. Amennyiben sze-

hivatalos adatok beviteléről van szó, ak-

retnénk, hogy időt töltösön el az adatok

kor célszerű lehet szándékosan lassítani

bevitelével, akkor a jobbra zárt elrende-

a folyamatot.

zés a megfelelő megoldás.

Jobbra rendezett címkék

Inline címke

Ezeknek a legnagyobb előnye, hogy

Inline címkéről beszélünk, amikor

mivel közel vannak a beviteli mezőkhöz,

a címke nem a beviteli mező mellett/

gyorsabb a kitöltés. Az egymáshoz közel

felett helyezkedik el, hanem magában

eső elemek kapcsolatban vannak egy-

a beviteli mezőben jelenik meg. Ennek

156

hátránya, hogy ha elkezdjük kitölteni az

ve. Ennek ellenére nagyon divatosak, és

űrlapot, akkor eltűnik, nem lesz látható,

jól néznek ki az ilyen mezők, pláne, ha

hogy mit is kér az input. Előnye, hogy

animálva vannak.

04

nem kell plusz helyet biztosítani a címkének, így ez rövidebb űrlapok esetén, pl.

Jó megoldás lehet az úszó címke, amely

egy belépési űrlapnál ideális megoldás.

ugyan a beviteli mezőben van, viszont amikor a felhasználó belekattint, akkor

A másik veszély, hogy mivel a beviteli

a címke kisebb méretben, de megmarad

mező már tartalmaz szöveget, a fel-

a mezőn belül.

használó azt hiszi, hogy már ki van tölt-

felső margó címke

keret

rádiusz

Password

Formdesign

bal margó

jobb margó

kezdő ikon

záró ikon Strong

érvényesség visszajelzés

alsó margó

beviteli szöveg

Beviteli mező helyzetei Felhasználónév

Felhasználónév

Felhasználónév

Albert Einstein Inaktív Felhasználónév

Hover Felhasználónév

Albe

Albert Einstein Visszaigazolás

Fókusz/aktív

Letiltva Felhasználónév

Albert Einstein Foglalt név

Hiba

Engedélyezés

Címke pozíciók és stílusok Teljes név

Teljes név

Albert Einstein

Albert Einstein

Aláhúzott

Keretezett (alkalmazkodó)

Teljes név

Albert Einstein Keretezett (felülre igazítva)

Teljes név

Teljes név

Albert Einstein

Albert Einstein

Teljes név

Keretezett (címkét tartalmazva)

Keretezett (balra vagy jobbra igazítva)

Kitöltött

Albert Einstein

157