Miért mutat
jól, ami jól mutat?
Kontraszt, egyensúly, harmónia, hierarchia. Ez a négy szó az, amiért egy oldal rendezettnek látszik - és ez az a négy szó, amit érdemes használni, amikor javítást kérsz egy tervre. Ezek nem stílusok: az emberi észlelésről szólnak, ezért nem is fognak elavulni.
Az agyad rendszert keres, akkor is, ha nincs.
Amikor ránézel egy felületre, először a nagy formákat és a hangsúlyos színeket veszed észre. Aztán - anélkül, hogy döntenél róla - felméred, mi tartozik össze. Az egyforma alakú, egyforma színű, egyforma méretű dolgokat egy csoportnak érzed. Ez a hasonlóság elve.
Ha ritmust találsz, végigfut rajta a szemed - ezért tudsz elrévedni egy tapétamintában: ez a folytonosság. Ha befejezetlen formát látsz, fejben befejezed, összekötöd a vonalakat: ez a zártság. Ezeket a törvényeket a Gestalt-pszichológia írta le, és a mai felhasználóbarát tervezés is ezekre épül.
A gyakorlati haszon egyszerű: ha nem te döntöd el, mi tartozik össze, akkor az agy fog dönteni - és rosszul. A rendezetlenség pedig érezhető: a látogató nem tudja megnevezni, mi zavarja, csak kényelmetlenül érzi magát, és tovább kattint.
Nem azt tervezed, ami a képernyőn van. Azt tervezed, ami a néző fejében összeáll belőle.
Ami közel van, összetartozik.
Ez a legerősebb és leggyorsabb eszközöd, és nem kell hozzá se szín, se vonal, se keret: csak hely. A címke legyen közelebb a saját mezőjéhez, mint a következőhöz. Az ár legyen közelebb a termékhez, mint a szomszédhoz. Ha valami nem áll össze egy tervben, kilencszer tízből a távolságokkal van a baj.
Ugyanaz a négy elem, ugyanaz a szín, ugyanaz a betű. Csak a hely van máshol.
Ami egyforma, azt egyforma munkára tartod fenn.
Ha két dolog egyformán néz ki, a látogató azt hiszi, ugyanaz a szerepük. Ebből következik a legfontosabb szabály: minden kattinthatót ugyanúgy jelölj, és semmi mást ne jelölj úgy. Ha a gomb arany, akkor ami arany, az gomb. Ez a következetesség - és ez az, amit az AI a leggyakrabban elront, mert szekciónként újratervez.
A kontraszt megmutatja, hova nézz.
A kontraszt kiemel, láthatóvá tesz, és odairányítja a figyelmet, ahová szeretnéd. Nem csak színnel: a méret, a forma, a vastagság, a sűrűség és az üres hely is kontrasztot alkot. A navigációnál és a gomboknál nem szabad az oldalba belesimuló színt használni - amit nem lehet megtalálni, azt nem is fogják. Ez a kiemelés azoknak is segít, akik színtévesztők, mert a kontrasztot ők is érzékelik.
Egy képernyőn egy főszereplő.
Minden szekciónak legyen egy dolga, amit először meglátsz, egy második, ami magyaráz, és egy harmadik, ami a következő lépést kínálja. Ennél többet egy pillantás nem tud befogadni. Ha két dolog egyszerre akar főszereplő lenni, egyik sem lesz az.
Első körben egy folyamatot vesszük át, két hét alatt.
Ingyenes audit →Négyféleképpen lehet kiegyensúlyozott.
Az ember ösztönösen keresi a szimmetriát, a természetben is azt találjuk szépnek, ami közel áll hozzá. A weben az egyenletes elosztásnak négy alapesete van - és mind a négy használható, ha tudod, mit üzen.
A tengely két oldalán ugyanaz. Rendezettséget és bizalmat üzen, és a mobil nézet is könnyebben készül belőle.
Más a két oldal, de kiegyensúlyozott. A túl rendezett sorokat átugorja a szem - egy apró eltérésen viszont megakad.
Az elemek egy közép körül rendeződnek. Nyugalmat, természetességet, szépséget fejez ki.
Nincs középpont, az egyensúly az ismétlésből jön. Háttérként, mintaként, kitöltésként működik.
Legyen egy láthatatlan vonal, amire minden illeszkedik.
Ez a harmónia titka: minden elem igazodik valamihez. Lehet balra, jobbra vagy középre zárt, lehet rács vagy ritmus - de legyen. A rendezetlenség zavart okoz, és a néző nem tudja, mi zavarja: az agya folyton igazítani akar, ettől lesz feszült, tudattalanul is.
Az ismétlés nem lustaság. Ez a rendszer.
Ha a szekciók között ugyanannyi hely van, a címek ugyanolyanok, a kártyák egyformák, akkor az oldal egésznek látszik - és az agy nem dolgozik többet a kelleténél. Az ismétlődő ritmus egyben vezet is: a szem tudja, mikor jön a következő egység.
A levegő nem kihasználatlan hely.
A kezdő reflex az, hogy minden szabad helyre kerüljön valami. Pedig az üres hely az, ami a fontos dolgot fontossá teszi: körülötte nincs semmi, tehát oda kell nézni. A drága márkák ezért használnak sok levegőt - a sűrűség olcsóságot üzen, a levegő értéket.
A jobb oldalon kevesebb információ van. Mégis többet ad el - mert eldöntötte, mi a fontos, és a többit máshova tette.
Balról jobbra, fentről le - ugrálva.
Sok szöveget tartalmazó oldalon a szem F alakban fut: az első sorokat végigolvassa, aztán egyre rövidebben pásztázik lefelé. Kevés elemből álló, látványos oldalon inkább Z alakban: bal felső sarok, jobb felső, átlósan le, jobb alsó. Ezért van a logó bal fent, a menü jobb fent, és ezért a jobb alsó sarok a legjobb hely a gombnak.
A diszharmóniának is van feladata.
Egy más stílusú elem, egy szokatlan szín, egy a rendezett felülettől eltérő megjelenés felkelti az érdeklődést, és emlékezetesebbé teszi a designt. Ez viszont eszköz, nem véletlen: csak akkor szabad használni, ha tudatos.
A gyakorlati mérce: egy oldalon egy ilyen legyen. Ha kettő van, már nem kivétel, hanem rendetlenség.
"Valahogy nem jó" helyett mondd ezt.
Az AI-nak nem az érzésedet kell megfogalmaznod, hanem a hibát. Ez a táblázat a leggyakoribb érzést fordítja le kérésre.
A hunyorítás-teszt.
Húzd össze a szemed, amíg a szöveg olvashatatlan lesz. Ami így is kiugrik, azt fogja először meglátni a látogató. Ha ez nem az, amit szeretnél, akkor nem a szöveggel van dolgod, hanem a formával. Ez a leggyorsabb és legpontosabb ellenőrzés, amit ismerek.
A tervezési szabályod, egy blokkban.
Ez az a néhány sor, amit érdemes elmenteni. A tervezési kérés végére illesztve ez a hat mondat viszi el a munka nagy részét.
Mielőtt kiadod a kezedből
Ez a négy szó a te szerkesztői hangod. Használd.
Kontraszt, egyensúly, harmónia, hierarchia. Ha ezekkel kérsz javítást, pontosan azt kapod, amit szeretnél - és nem kell tudnod, hogyan van megcsinálva. Ha mélyebbre akarsz menni, a Laws of UX gyűjti össze ugyanezeket az elveket egy helyen, angolul.