Az elmúlt időszakban jó néhány projektben kértek fel külső tanácsadónak. Van, ahol redesign kapcsán vettem részt, máshol pedig expert review-t, auditot kértek tőlem jellemzően konverzió növelés céljából. Mindegyik projektnek megvan a maga sajátossága, mindegyikben egyedi problémák, megoldandó feladatok estek ki. Egyértelműen szemet szúrt, hogy van egy közös problémagóc, ami gyakorlatilag mindegyik terméknél felmerült, általánosnak nevezhető. Mitöbb a magyar interneten is generikus gond. Ezért gondoltam, hogy erről beszélni, írni, ezen változtatni kell.
Mi ez a probléma?
Igen, a következetesség, a következetes design hiánya.
Szembetűnő, hogy egy alkalmazáson, sőt nézeten belül tizenvalahány link, gomb formátumot találni. Oldalról-oldalra lépve össze-vissza változnak az elrendezések. Van, ahol az oldal címe balra rendezett, majd egy másik oldalon középre, jobbra mindenféle betűmérettel, színnel. Sőt olyan is előfordul, hogy egyáltalán nincs cím. És még sorolhatnám…
Mégis a szerencsétlen emberek, akik ezeket az alkalmazásokat használni szeretnék, honnan tudják, hogy hol járnak, egyáltalán mire lehet kattintani, melyik elemmel lehet interakcióba lépni? Agyrém. Gondolom nem kifejezett üzleti cél, hogy a felhasználók frusztráltak legyenek, netalán lelépjenek és sose térjenek vissza.
Miért probléma ez?
A legjobban egy régi kutatással és annak eredményével lehet megvilágítani. Erről írtam még régen Mintázat címmel, előbb olvasd el. Ha mégse tennéd, akkor röviden összefoglalom a következtetéseket és megválaszolom a kérdést.
A lényeg, hogy a tudatalattid nagyon „okos”. Felismeri a mintázatokat és hihetetlen sebességgel megtanulja azokat. Mindezt úgy, hogy nem is tudsz róla, nem tudatosodik benned.
Az emberi agy, gyakorlatilag egy óriási mintázat felismerő rendszer!
Ha a megtanult mintázat hirtelen és sokszor változik, az kognitív terhelést és csakhamar frusztrációt okoz. Az agy, a mintázatokat nem csak felismeri, de azokat képes eltárolni, bármikor elő tudja hívni, amikor szükség van rá. Mindemellett a rögzült mintázatot képes összekapcsolni más agyi területekkel. Ez utóbbi kapcsolatra klasszikus példa, mikor meglátsz egy citromot és nyomban összefut a szádban a nyál.
Az embernek szüksége van a rendre, a rend érzetére, a kiszámíthatóságra. Kellenek számunkra a keretek, kell a rendszer.
A válasz pedig: ha nincs következetesség az alkalmazásodban, akkor folyamatosan dolgoztatod az emberek agyát, amit nagyon nem szeretnek. Használhatósági problémákkal jár, az emberekben zavart okoz, akiket végül még fel is idegesítesz.
Következetes design
A megoldás a következetes design használata, ami sok előnnyel jár:
- csökkenti a kognitív terhelést
- kényelmet, biztonságot és a rend érzetét adja a felhasználóknak
- ezáltal javítja, növeli az alkalmazás használhatóságát
- időt és pénzt takarít meg mind tervezéskor, mind fejlesztéskor.
OK, de hogyan érheted ezt el?
Először is, a következetességet érdemes két irányból megközelíteni:
- Külső következetesség
- Belső következetesség
Külső következetesség
Előbb ismerkedj meg a mentális modellel, ami pongyolán fogalmazva: a külvilág egy szeletének leképezése, reprezentációja a tudatban, az előzetes ismeretek alapján.
A mentális modellel kapcsolatban mindig egy rövid történetet szoktam mesélni. Az akkor 7 éves ikerlányaimmal sétáltunk Budapesten, a Vörösmarty téren. Egyszer csak egy 4–5 fős ortodox zsidó csoport jött velünk szembe. Hozzá teszem a csajok korábban még soha sem láttak ortodox zsidókat. Szóval jöttek a klasszikus hosszú fekete kabátban, fejükön fekete kalap, hosszú ősz szakállal és pajesszal. A lányok meredten nézték őket egy darabig, majd egyikük oldalba bökött és felkiáltott: „Nézd apa, varázslók!”.
A felhasználók is egy mentális modellel érkeznek az alkalmazásodba, amit számtalan külső tényező, korábbi ismeret befolyásol.
-
A fizikai világban tanultak. Gondolj például a könyvekre. Évszázadok óta velünk él a vizuális hierarchia. A vertikális ritmus. A címek, címsorok használata. A tipográfia. Már kicsi korunkban megtanuljuk a szövegek elrendezését, értelmezését. Az első gomb is már több mint egy évszázada megjelent és folyamatosan jelen van a fizikai valóságban is. Ezekre és a megtanult megjelenésükre alapoznod kell. Ó, hány olyan site-ot látok, ahol a címek, címsorok, kenyérszöveg össze-vissza van, nincs ritmusa, nem lehet tudni, mi mihez tartozik, iszonyatosan nehéz értelmezni. Ezt a témát, egy korábbi Intuitív design című írásomban kifejtettem.
-
Lehet, hogy meglep, de a felhasználóid nem az alkalmazásodban töltik az idejük nagy részét. Számtalan oldalt, alkalmazást, desktop software-t használnak, ahol megismernek felhasználói felületeket és megtanulják azok használatát. Egyenesen következik ebből, hogy tudnod kell arról, hogy a terméked célcsoportja milyen más rendszereket használ rendszeresen, és azok mintázatait érdemes hasznosítanod a saját projektedben.
-
A külső következetesség fontos eleme az adott platformhoz tartozó irányelvek halmaza (guidelines) is. Az iOS, vagy az Android felhasználó a rendszerek saját appjain keresztül megismernek számtalan mintázatot, melyekre szintén érdemes és kell építkezned.
Nagy segítségedre lehetnek az ún. design pattern-ök, melyek különböző problémákra adnak megoldásokat. Ezeket számtalan helyen használják, így az emberek már ismerik azokat.
A külső következetességgel kapcsolatban a legfontosabb, amit meg kell jegyezned:
Sose feledd, hogy a termék felhasználóinak meglévő tudásához (mentális modelljéhez) kell alkalmazkodnia a felületnek.
Rendben? Akkor haladjunk tovább.
Belső következetesség
Ide tartozik minden, ami az alkalmazáson belül található és egy rendszert alkot. A cél az, hogy megelőzd, minimálisra csökkentsd a következetlenségeket. Végigveszem, hogy hol és mire figyelj.
Tartalom
A tartalom minősége, nézetenkénti mennyisége és hangvétele legyen konzisztens.
Klasszikus problémák:
- tegeződés, magázódás, komolyság, lazaság keveredése
- egyik nézeten 6km hosszú, másik nézeten 2 sornyi szöveg
- kis méretű, rossz minőségű képek és ezek ellentettjei, variációi
Elrendezés/Layout
Az egyes nézetek, oldaltípusok elrendezése legyen következetes. A navigáció, a fejléc, a lábléc, az oldalcím, a segédmenü (breadcrumb) megjelenési formája és elhelyezkedése egységes legyen.
Tipográfia
Igen, ismét a vertikális ritmus. A cím, címsorok, kenyérszöveg következetesen mindenhol ugyanúgy legyen. Ne használj sok betűtípust és azok is rímeljenek a brandre. Az olvashatóság kiemelten fontos.
Színek
Ez brand/márka kerdés is, amivel szintén tanácsos konzisztensnek lenni. Ne használj sok színt és azokat is tudatosan, jelentéssel. Ha egy színhez jelentés párosul, akkor az a rendszeren belül mindenhol ugyanazt jelentse. A megfelelő kontraszt használatára feltélten ügyelj!
Vizuális elemek
A linkek, gombok, űrlap elemek, ikonok. Ha egy ikonhoz valamilyen funkciót társítasz, akkor az, az egész rendszeren belül mindenhol ugyanazzal a funkcióval bírjon. Ezek az elemek pedig mind legyenek felismerhetőek. Azaz a gomb, nézzen ki úgy, mint egy gomb!
Interakciók
Űrlapok működése. Mindenféle üzenetek megjelenítése. Animációk. Folyamatok. Mindenhol következetesen.
Á–Á-Ácsi!
Ezek szerint a site-om nézzen ki úgy, mintha a böngésző beépített CSS-ét használnám? Az appom az iOS, vagy Material Design stílusában készüljön?
Szó sincs róla!
Még csak az kellene!
No fucking way…
John Gruber – egy zseniális UI Designer – fogalmazta meg talán a legtalálóbban:
User Interfaces are clothing for the mind
– John Gruber
A felhasználói felület olyan, mint a divat. Öltöztesd fel egyedileg!
Ugyanis szükség van az egyedi arcra, a megkülönböztetésre, a változatosságra, különben minden egyforma és baromi unalmas lenne. Vagyis nem EGYÖNTETŰSÉGRE van szükség, hanem KÖVETKEZETESSÉGRE. A két fogalom nem ugyanazt jelenti.
Ez mind szép és jó, de mégis egy projekt kapcsán ezt hogyan valósítsd meg?
Használj style guide-ot!
Szerencsére létezik egy nagyszerű eszköz, ami nem csak a tervezésnél és fejlesztésnél lesz segítségedre, hanem a termék teljes életciklusában. Sok néven nevezik, úgy mint UI kit, meg web style guide és hasonlók, de végülis teljesen mindegy minek hívod.
A style guide gyakorlatilag egy dokumentum (web esetében célszerű HTML formátumban), ami a termék stílus irányelveit rögzíti. Mindent, ami a belső következetességnél felsorolásra került, és még a felületi egységeket, ismétlődő elemeket, blokkokat is. Ezekből aztán kvázi össze lehet legózni, végül pedig iterálva kidolgozni az egyes nézeteket. Ajánlom Brad Frost előadását, és az általa kitalált Atomic Design módszert.
One more thing
Hogy mégse legyen olyan egyszerű az élet, a következetlenségnek is megvan ám a helye. Sőt! Tudatosan alkalmaznod is kell. Időnként fel kell rúgni a szabályokat, mert az gyönyörködtet, örömöt okoz az embernek. Az abszolút értelemben vett következetesség unalmat szül, tehát meg kell törni a monotóniát.
A szándékos következetlenséget használd akkor:
- ha fel akarod hívni a felhasználó figyelmét valamire
- ha le akarod lassítani a felhasználót (fontos információ esetén, vagy amikor tudatos döntésre van szükség a részéről)
- ha meglepetést akarsz okozni, és azáltal örömet
Egyensúly
Vigyázz az egyensúlyra! Kedvenc analógiám a következetesség megtörésére a zenében alkalmazott csend. Óriási hatása van, de ha sok van belőle, akkor élvezhetetlen lesz a zenemű. Finoman kell bánni vele, mint egy egzotikus fűszerrel.
Tanuld meg a szabályokat, mint egy profi, hogy aztán úgy szeghesd meg őket, mint egy művész.
– Pablo Picasso
Összefoglalva
- Ismerd meg a felhasználóid mentális modelljét!
- Tervezz következetes felhasználói felületet!
- Használj style guide-ot!
- Tudatosan törd meg a következetességet!
- Mindent folyamatosan validálj a felhasználóiddal!
Erről beszéltem a Mobile Hungary 2016 konferencián. A prezentáció diáit itt nézheted meg:
Alánlott és hasznos tartalmak
- Doulingo style guide
- MailChimp style guide
- Brand és web style gyűjtemény
- Website Style Guides anyagok
- Style guide eszközök
- Collect UI design pattern gyűjtemény
- Mobile design patterns gyűjtemény
- User Interface design patterns gyűjtemény
- Gridlover: tipográfia és vertikális ritmus eszköz
- Atomic Design
- John Gruber – The Gap Theory of UI Design előadás
Visszajelzésfüggő vagyok. Segíts!