Hierarchia, elrendezés és szöveg

Célok

A lecke végére a felhasználó feladata alapján vizuális és tartalmi hierarchiát tudsz kialakítani. Érted, hogy a méret, pozíció, üres tér, kontraszt, csoportosítás és mikroszöveg együttesen irányítja a figyelmet, és nem a „minél nagyobb gomb” a hierarchia egyetlen eszköze.

Miért fontos a figyelem tervezése?

Egy képernyőn a felhasználó nem olvas, hanem pásztáz. Másodpercek alatt dönt arról, hova néz, mit ért meg, és merre lép tovább. Ha a tervező nem irányítja a tekintetet, akkor az véletlenszerűen vándorol, és a felhasználó a legharsányabb elemre kattint, nem a legfontosabbra. A hierarchia az az eszköz, amellyel a tervező előre eldönti, mi legyen az első, a második és a harmadik dolog, amit a felhasználó észrevesz.

A figyelem tervezése

A vizuális hierarchia a figyelem és az információs prioritás elrendezése vizuális eszközökkel. Eszközei:

Eszköz	Hogyan hat?
Méret	A nagyobb elem előbb vonzza a tekintetet
Súly és szín	A vastagabb, sötétebb vagy erősebb színű elem hangsúlyos
Kontraszt	A környezetétől eltérő elem kiugrik (a kontrasztról lásd a 3. fejezetet)
Pozíció	A bal felső sarok és a lap tetejének elemei előbb látszanak (balról jobbra író nyelveken)
Üres tér	Az elemet körülvevő hely kiemeli, és elválaszt
Közelség	Ami közel van, az összetartozónak látszik
Ismétlés	Az azonos stílus azonos szerepet jelez

A vizuális döntésnek azonban tartalmi oka legyen. Egy időpont kiválasztásánál például az aktuális választás, a kritikus feltétel és a továbblépés legyen hangsúlyosabb, nem feltétlenül a dekoratív kép.

Elrendezés és csoportosítás

Gestalt-elvek röviden

A pszichológia Gestalt-elvei leírják, hogyan fogjuk fel az alakzatokat csoportként. Három közülük a felületek tervezésében különösen hasznos:

• Közelség: az egymáshoz közel lévő elemeket összetartozónak látjuk. Egy mező címkéje legyen a mező közelében; egy árhoz kapcsolódó feltétel ne egy távoli lábjegyzetben jelenjen meg.
• Hasonlóság: a hasonlóan formázott elemeket azonos szerepűnek olvassuk. Ezért kell a linkeknek és a gomboknak konzisztens kinézet.
• Zártság / keret: a közös keret vagy háttér csoportot jelöl. De ne bontsd túl sok dobozra a képernyőt; a túl sok keret zajt kelt.

A csoportok között hagyj elég teret, hogy a szerkezet látható legyen. A térközöket érdemes rendszerbe szervezni: egy alapegység (például 8 pont) többszörösei (8, 16, 24, 32) következetes ritmust adnak, és a döntéseket is egyszerűsítik.

Olvasási minta

A felhasználók a tartalmat többnyire pásztázva olvassák: a fontos cím, majd a félkövér kulcsszavak, majd az ismerős elemek. Az „F-minta” azt írja le, hogy a szöveges oldalakat gyakran vízszintes sávokban, a bal oldal mentén lefelé haladva pásztázzuk. Ez nem törvény, hanem figyelmeztetés: a jobb alsó sarokba tett kulcsinformációt könnyen elnézhetik.

Reszponzív elrendezés

Az elrendezésnek a képernyőméret változásakor is meg kell őriznie a logikáját. Mobilon nem csak összenyomjuk a desktop nézetet: eldöntjük, milyen sorrendben kapja a felhasználó az információt, mi marad látható és mi nyitható meg szükség esetén. A részleteket a következő leckében tárgyaljuk.

Mikroszöveg

A mikroszöveg (microcopy) rövid, feladatot támogató felületi szöveg: gombok, címkék, súgók, hibaüzenetek, üres állapotok szövege. A rövid feliratok a feladat részei, és gyakran ezek döntik el, hogy a felhasználó biztos-e a lépésében.

Szabályok:

• A gomb a következményt nevezze meg. A „Folytatás” csak akkor jó, ha a kontextus egyértelmű. A „Foglalás ellenőrzése” vagy „Jelentkezés elküldése” önmagában is megnevezi a következményt.
• Használd a felhasználó nyelvét, ne a rendszerét. A címke ne tükrözze a rendszer belső állapotát, ha a felhasználó más céllal érkezett.
• A magyarázat a döntés helyén legyen, ne külön súgóban rejtve. Kritikus műveletnél a szöveg csökkentheti a kockázatot: a „Véglegesítés” mellett jelenjen meg, mi válik véglegessé.
• A hangnem legyen következetes és tisztelettudó, hibánál különösen.

Példa összehasonlítás:

Gyenge	Jobb	Miért?
„Küldés”	„Jelentkezés elküldése”	A gomb megnevezi a következményt
„Hiba történt.”	„Nem sikerült elmenteni. A módosításaid megmaradtak, próbáld újra.”	Megmondja, mi történt és mi a teendő
„Nincs adat.”	„Még nincs mentett eseményed. Böngéssz a mai programok között.”	A helyzetet és a következő lépést adja

Végigvezetett példa: a Mai program jelentkezési űrlapja

Egy űrlapon az elsődleges „Küldés” gomb mellett ugyanakkora „Mégse” gomb, három link és egy reklámszerű információs panel szerepel. A résztvevő nem biztos benne, melyik lépés fejezi be a folyamatot. A javítás nem feltétlenül több szín:

• a fő művelet kap egyértelmű feliratot („Jelentkezés elküldése”) és elkülönített helyet;
• a megszakítás („Mégse”) kevésbé hangsúlyos, de elérhető (például szöveges link);
• a kiegészítő információ a mező közelébe vagy másodlagos rétegbe kerül;
• a lemondási feltétel az elküldés gomb fölött áll, közvetlenül a döntés előtt.

Gyakori tévhitek

Állítás	Pontosítás
„A hierarchia kizárólag vizuális stílus.”	A tartalom sorrendje és megfogalmazása ugyanúgy hierarchiát teremt.
„A rövid szöveg mindig jobb.”	A túl rövid, homályos felirat növeli a bizonytalanságot.
„Minél nagyobb, annál jobb.”	A nagy elem csak akkor hasznos, ha a tartalmilag fontos; ha minden nagy, semmi sem hangsúlyos.
„Az üres tér pazarlás.”	Az üres tér csoportosít, kiemel és pihenőt ad.

Röviden

• A hierarchia eszközei: méret, súly, kontraszt, pozíció, üres tér, közelség, ismétlés; tartalmi okkal használd őket.
• A közelség és a hasonlóság összetartozóvá tesz; az alap térköz-egység ritmust ad.
• A mikroszöveg a feladat része: a gomb nevezze meg a következményt, a magyarázat a döntés helyén legyen.

Ellenőrző kérdések

1. Mit kell a felhasználónak először észrevennie a fő képernyőn?
2. Mely elemek tűnnek ma indokolatlanul egyformán fontosnak?
3. A fő gombod felirata önmagában is érthető?
4. Mely információt helyezted túl távol a hozzá tartozó döntéstől?