Webshark Blog

Mitől lesz jó egy weboldal, egy app, vagy bármely termék, melynek felhasználói felülete van? A válasz rendkívül széles körű lehet, ahogy a jó weboldalról szóló anyagunkban a konkrétumokat tekintve már megpróbáltuk körüljárni egy irányból. Most azonban egy kicsit máshonnan, az alapelvek felől közelítünk a jó webdesign felé. (Frissítés, 2022.09.30. – Bővítettük ezt a fejezetet: Gestalt-elvek betartása)

Melyek egy jó webdesign alapelvei?

A következő alapelvek azok, melyek figyelembe vételével hatékony felhasználói felületek készíthetők. Mivel elvekről van szó, így alkalmazhatók mobileszközöknél, weboldalaknál vagy akár viselhető eszközöknél.

1. Felfedezhetőség

Ha a felhasználók nem találnak meg valamilyen információ vagy funkciót, az olyan, mintha nem létezne. Ezért minden fontos információnak és funkciónak láthatónak és könnyen megtalálhatónak kell lennie.

Ne rejtsd el az összetettségét! Ha megpróbálod takargatni egy felület összetettségét, azzal csak bonyolítod a helyzetet. Minden olyan elemnek, mely szükséges a sikeres ember-gép interakcióhoz (tartalom, menü, stb.) láthatónak kell lennie.

Próbáld mérsékelni a tanulási görbét a fokozatossággal! Lehet, hogy a haladó lehetőségeket első körben nem kell megmutatni a felhasználóknak, csak akkor, ha már valóban szükségük van rá.

Vezesd a felhasználókat a haladó funkciók felé! Ne várj arra, hogy az emberek megtalálnak majd valamit, ehelyett mutasd meg nekik!

Hagyd meg számukra a döntés szabadságát! Tedd lehetővé, hogy bizonyos dolgokat megváltoztassanak, például egy app betűméretét. Ezzel arra ösztönzöd őket, hogy felfedezzék a terméket.

2. Hatékonyság

Az interakciós költségek csökkenthetők azáltal, hogy minimalizálod a felhasználói bevitelt és minden fontos információt az emberek elé helyezel.

Legyen összhangban a felhasználói várakozásokkal! Teljesen mindegy, hogy mennyire logikusan rendezed el a tartalmat, vagy hogy milyen jól néz ki, az számít, hogy megfelel-e a felhasználói várakozásoknak. Ha az emberek arra számítanak, hogy máshogy néz ki, máshogy működik, akkor az gondot fog jelenteni. Mindig olyan terméket készíts, amit könnyű megérteni, megtanulni. Ideális esetben egy terméknek nincs tanulási görbéje.

Használd az alapértelmezéseket okosan! Egy felhasználói felületnél nem feltétlenül lehet mindig beállítani valamilyen alapértelmezést. Ha nem tudod pontosan meghatározni, hogy melyik lehetőség legyen alapértelmezett, akkor nem muszáj beállítani ilyet.

Jelenítsd meg a rendszerállapotot! A felhasználóknak nem lenne szabad keresgélniük a rendszerinformációkat. Figyelj a felhasználókra, és tájékoztasd őket arról, hogy a rendszer éppen mit csinál.

Előrelátó designt készíts! Próbáld előrejelezni a felhasználói szükségleteket és igényeket. Legyél tisztában azzal, hogy a felhasználók miként lépnek kapcsolatba a termékkel, és biztosítsd minden lépéshez a szükséges információkat és eszközöket.

3. Következetesség

Ez egyfelől vizuális következetességet jelent, másfelől következetességet az interakcióknál.

Legyen következetes a platform: a terméket a platform irányelvekkel összhangban készítsd el!

Belső következetesség: hozd létre a saját vizuális és interakciós nyelvedet, melyet mindenhol alkalmazz!

Termékcsaládok közötti következetesség: ha termékcsaládot hozol létre, akkor ezeknek valamilyen közös megjelenést kell adni.

Kacsa teszt: ha kacsának néz ki, úgy úszik, mint egy kacsa, hápog, mint egy kacsa, akkor az valószínűleg kacsa. Ez azt jelenti, hogy viszont azoknak az elemeknek, melyek máshogy reagálnak, máshogy kell kinézniük.

4. Barátságos felület

Add át az irányítás érzését a felhasználóknak! Az emberek gyorsan tanulnak és gyorsan profi használók lesznek, amikor kényelmes környezetben dolgoznak.

Ezért védd a felhasználók munkáját. Biztosítsd azt, hogy soha ne veszítsék el az adataikat!

Segítő hibaüzeneteket küldj! Olyan hibaüzeneteket használj, melyek segítenek a felhasználóknak kijavítani a hibákat.

Legyenek visszafordíthatók a cselekedetek. Gondoskodj annak lehetőségéről, hogy a felhasználók bármilyen cselekvést bármikor vissza tudjanak fordítani.

5. Használhatósági tesztek alkalmazása

Végezz hatékony felhasználói teszteket, melyek biztosítják a cél elérését. Teszteld a tanulhatóságot, az elégedettséget, a hatékonyságot.

6. Jó kontraszt

A kontraszt elve egy másik nagyon gyakran használt elv, mely a weboldal egyes részeit kiemelkedővé teszi a felhasználók számára. A kontraszt elve a vizuálisan eltérő elemek egymáshoz viszonyított helyzetére vonatkozik, azt fejezve ki, hogy az elemek különböznek egymástól.

A kontraszttal teremtünk különbözőséget a szem számára két elem vagy elemek csoportjai között annak érdekében, hogy eltérő mivoltukat kihangsúlyozzuk. 

A kontraszt elve a leggyakrabban a színeken keresztül jelenik meg a designban. A designerek gyakran túlságosan is lecsökkentik a kontrasztot a háttér és a szöveg között annak érdekében, hogy annak lényegtelenségét megmutassák. Ezzel azonban sokszor nagymértékben lerontják a szöveg olvashatóságát. 

Habár a felhasználók általában nem panaszkodnak a kontraszt miatt, mégis meghatározza a vásárlási döntésüket az, hogy milyen színű a háttér és milyen színűek rajta a betűk. Egy rossz kombináció fárasztja a szemet, de ezt elsőre nagyon nehéz észrevenni.

Indulásnak a legjobb, ha fehér háttéren fekete betűket használsz. Egy világos szürke, egy zöld vagy egy sárga szín használata csak elriasztaná az embereket a weboldaladról. Ha azt tapasztalod, hogy a felhasználóidnak nehezen megy a szövegek elolvasása, akkor gondolj arra, hogy a probléma a betűk vagy a háttér színével lehet.

7. A fontos tartalom előre kerül

Az elrendezés a legfontosabb információ a felhasználók számára. Ha nem megfelelő a tartalmak sorrendje, akkor az rossz benyomást kelt azokban, akik először látogatnak az oldaladra. Az elrendezés alapvetően két elemből áll: szövegből és képekből.

Általában jó megoldás, ha kiváló minőségű képeket használsz a weboldaladon, ugyanakkor arra is figyelned kell, hogy a megfelelő tartalmat helyezd az emberek elé. A lényeget az embereknek már első pillantásra észre kellene venniük.

A cégedről alkotott képet alapvetően határozza meg az, hogy miként jeleníted meg az emberek számára a tartalmakat a weboldaladon. Ez alapján alakul ki valamilyen benyomás bennük a márkádról. Ha a tartalom egyszerű és előtérbe van helyezve, akkor az emberek szívesen kötnek üzletet veled. De ha valami összetett szöveggel támadod meg őket mindjárt az elején, vagy nem értik, hogy mit kínálsz nekik, akkor az embereknek nehéz lesz kapcsolódniuk ahhoz, amit csinálsz.

8. Helyes elrendezés

A weboldalad forgalmát úgy növelheted a leggyorsabban, ha az adatokat a legegyszerűbb módon rendezed el a weboldaladon. Ehhez érdemes rácsszerkezetet használni. Egy rács mentén történő elrendezés az egyik legkönnyebb és leggyorsabb megoldás, amivel javíthatod a weboldalad használhatóságát, valamint gyorsabbá is teheted vele az oldalt. Az elrendezés emellett nagymértékben meghatározza a weboldalad általános megjelenését.

9. Megfelelő betűméret

Habár nincs semmiféle ökölszabály arra, hogy mekkora betűket kellene használnod a weboldaladon, érdemes abból kiindulnod, hogy ne legyen kisebb 12 pontosnál a kenyérszöveg, illetve 14 pontosnál a címsor. Ha nagyobb betűket használsz, könnyebb lesz elolvasni a weboldalad tartalmát.

Persze nem csak a betűméret számít az olvashatóságnál, hanem a negatív tér is. Sokan erről elfeledkeznek, pedig, ha kis sortávolságokat használsz, akkor túlságosan bonyolultnak tűik majd a tartalmad. A nagyobb sortávolsággal elválasztott sorok viszont rendezettebbnek tűnnek, áradásul könnyebben olvashatóak.

10. Intuitív keresőmező

A weboldalad célja nyilván az, hogy eladj valamit. És ha azt adod a látogatóknak, amit keresnek, akkor jobban fognak emlékezni rád, és később is visszatérnek. Egy keresőbox is hozzájárul a könnyű használhatósághoz, mégis sokan nem törődnek vele. pedig érdemes “minél intelligensebbé” tenni, mely a korábbi keresések alapján tesz javaslatokat a felhasználók számára.

11. Kényelmes használat

Az nem elég, ha egy weboldal szép, fontos, hogy kényelmes legyen a használata is. Mitől lesz kényelmes egy weboldal használata? Attól, hogy az emberek könnyen megtalálják rajta azt, amit keresnek. Például egy jó designnál a kosár gomb annyira előtérbe van helyezve, hogy a látogatóknak nem kell keresgélniük, hanem egyből megtalálják

12. Jó méretarány

Ezt az alapelvet gyakran használjuk, hiszen majdnem minden vizuális design számára előnyös. A méretarány elve a relatív méretek használatára utal, melyek jelezni tudják a fontosságot egy adott kompozíción belül. 

Tehát, ezt az alapelvet akkor használjuk helyesen, ha a legfontosabb elemek a legnagyobbak, illetve minél kevésbé fontos valami, az annál kisebb. Ennek az elvnek az alapja az, hogy ha valami nagy méretű, akkor azt könnyebben észrevesszük.

Egy vizuálisan vonzó design többnyire legfeljebb csak három különböző méretet használ. A különböző méretű elemekmegteremtik a vizuális hierarchia alapjait is.  

13. Vizuális hierarchia

A jó vizuális hierarchiájú elrendezést a felhasználók könnyebben megértik. A vizuális hierarchia arra utal, hogy az elrendezés vezeti a tekintetet a weboldalon, mégpedig a lényegesebbektől a kevésbé fontosak felé. 

A vizuális hierarchia megteremthető a méretarányok, az értékek, a színek, az elhelyezések, a tér nagysága és sok más egyéb jelzés által. Ha egy weboldalon nehezen tudod megállapítani, hogy hova kellene nézned, akkor valószínűleg hiányzik a megfelelő vizuális hierarchia az oldalon. 

A világos vizuális hierarchia megteremtéséhez, 2-3 betűtípus-méretet érdemes használni, melyek jelzik a felhasználónak, hogy mely tartalmak a legfontosabbak. Emellett használhatsz élénkebb színeket a fontosabb elemeknél, míg a visszafogottabb színeket meghagyod a kevésbé fontosak számára. 

A méretek ugyancsak segítenek a vizuális hierarchia kialakításában: ökölszabályként érdemes kicsi, közepes és nagy elemeket használni a designban. 

14. Egyensúly

Az egyensúly elve arról szól, hogy mennyire kiegyensúlyozottan vannak elrendezve és méretezve a desgin elemei. Egyensúly akkor jelenik meg, amikor egy képzeletbeli, középen húzódó tengely mindkét oldalán megjelenő elemek egyenlő súlyúak. Ebből a szempontból nem csak az elemek száma fontos, hanem az általuk elfoglalt terület is. 

A képzeletbeli tengely a referenciapont, melynek mentén elrendezheted az elemeket. Egy kiegyensúlyozott designban egyetlen terület sem vonja annyira magára annyira a figyelmet, hogy a többi területet ne vedd észre, annak ellenére, hogy bizonyos elemeknek nagyobb a vizuális súlya és sokkal inkább fókuszpontban vannak.

Milyen egyensúlyokról beszélhetünk? Szimmetrikus, aszimmetrikus és sugárirányú egyensúly. Ezt most nem részletezzük, korábban itt írtunk róla.

A lényeg, hogy olyan egyensúlyt kell választani, ami összhangban van azzal az érzéssel, amelyet közvetíteni szeretnél. Az aszimmetrikus egyensúly dinamikus hatást kelt, energia és mozgás érzetét adja át. A szimmetria ezzel szemben csendes és statikus, a sugárirányú pedig mindig a középpont felé vezeti a tekintetet. 

Frissítés, 2022.09.30.:

Gestalt-elvek betartása

A Gestalt-elvek olyan elvek, melyeket a 20. század elején, az 1920-as években fogalmaztak meg a Gestalt pszichológusai, Kurt Koffka, Wolfgang Köhler és Max Wertheimer. Ők azt próbálták megérteni, hogy miként következtetnek az emberek valamilyen látványból a látottak jelentésére, még akkor is, ha az elsőre zűrzavarosnak, bonyolultnak tűnik.

Ha egy olyan weboldallal találkozol, melyet első pillantásra értesz és értelmezni tudsz, akkor az annak köszönhető, hogy a weboldal betartja a Gestalt-elveket, még ha ezt nem is tudatosan teszi. A Gestalt-elvek segítenek abban, hogy megértsük, a felhasználók miként látják a felhasználói felületeket, pontosabban fogalmazva: miként egyszerűsítik a komplex felületet, miként teremt rendet az agyuk a „káoszban”. A tudatalatti rendszerezés révén a részek egy szervezett egésszé állnak össze, és megszűnnek különálló részeknek lenni. A Gestalt elvek tehát arra mutatnak rá, hogy hajlamosak vagyunk az egészet figyelembe venni az egyedi elemek helyett.

Az emberi agynak tehát van egy olyan természete vagy viselkedése, mely leírható szabályokkal, elvekkel. Az emberi agy mindig

• mintákat keres
• elemeket csoportosít
• egyszerűsít

Gestalt elvekből több is létezik, így

• a hasonlóság,
• a folytonosság,
• a közelség,
• a közös terület,
• a zártság,
• a fókuszpont,
• az alak és forma,
• a szimmetria és
• az egységes kapcsolódás.

Ezeket az elveket, illetve ezekből jó néhányat aztán később a designerek is elkezdték figyelembe venni a tervezésnél. Ugyanakkor az elvek akkor is jelen vannak a döntésekben, ha a webdesigner nincs tudatában, hogy a Gestalt-elvek alapján tervez.

Közöttük akadnak fontosabbak és kevésbé fontosak a webdesign számára. A későbbiekben némelyikkel részletesen, egy-egy külön fejezetben is foglalkozunk, de azért nézzünk meg néhányat elöljáróban:

Az egyik legfontosabb elv a közelség elve, mely azt mondja ki, hogy azok az elemek, melyek egymáshoz közel helyezkednek el, egy csoportot alkotnak. Ha az egyes csoportok között üres terek vannak, akkor az emberi agy azonnal csoportokként értelmezi az egymáshoz közel fekvő elemeket. A webdesignban alkalmazva könnyebben befogadhatóvá válik a tartalom, ha látható, hogy mi tartozik egyik és másik témakörbe az oldalon.

A közelség elvéhez nagyon hasonló a közös terület elve, mely szerint azok az elemek, melyek ugyanazon területen kapnak helyet, összetartoznak. A különbség az előbbi elvhez képest az, hogy a területet ki is jelölik jelzett határok, tehát például egy körvonal, nem csak whitespace. Bizonyos design esetében jobb megoldás lehet, ha vonalakkal jelezzük a határokat.

Érdemes megemlíteni az egységes kapcsolódás elvét, mely szerint egyes elemek akkor tekinthetők egy egység részének, ha azok fizikailag is össze vannak kapcsolva. Ez a webdesignban egyszerűen annyit jelent, hogy egy vonallal valamely elemet egy másik elemhez kapcsolunk. Nyilván persze sok más eszköz is rendelkezésre áll arra, hogy a kapcsolódást jelezzük, de néha a legegyértelműbb jelzés a legjobb.

A folytonosság elve alapján ugyanakkor azáltal is kapcsolódást fejezhetünk ki elemek között, ha azok az elemek ugyanazon az útvonalon helyezkednek el. Ez hasonló a kapcsolódás elvéhez, csak épp nincs látható vonal az elemek között. Az ilyen láthatatlan vonalra fűzött elemek a mozgás érzetét keltik, mivel vezetik a tekintetet, tehát jól használhatók a felhasználók figyelmének irányítására.

A sor persze még folytatható, de a későbbi fejezetekben találkozol még további részletekkel a Gestalt-elvekről.

Miért fontos ezeket a webdesign elveket figyelembe venni?

• Alkalmazásuk javítja a használhatóságot – az imént felsorolt vizuális design elvek betartása esetén könnyebben használhatóvá válik a weboldal. 
• Pozitív érzéseket vált ki a design – az elvek használatának eredményeként a designerek olyan felhasználói felületet tudnak létrehozni, mely jól néz ki, így pedig kellemes érzéseket vált ki a felhasználóból.
• Figyelembe vételük révén erősödik a márka – egy erős vizuális rendszer fokozza a felhasználói bizalmat és érdeklődést a termék iránt, ami erősíti a márkát.

De lássuk ezeket részletesebben!

A jó webdesign a célra összpontosít

De mielőtt nekiállnál a weboldalad tervezésének, tudnod kell, hogy mi a célod vele. Ha már tisztában vagy a célokkal, akkor összpontosíthatsz csak a designra.

A ’90-es évek weboldalainál még nem igazán számított a hatékonyság. Mindenki csak annyit akart, hogy legyen szép a weboldala, kapjon helyett rajta néhány jópofa, egyedi funkció, amire felfigyelnek az emberek. Látszólag egyébként a felhasználók is ezt akarták, nem nagyon zavartak bele képbe a marketing szempontok.

A „szép weboldalak” kora véget ért

A webdesign ennek folyományaként annyiból állt, hogy az ügyféllel folytatott beszélgetés után a designer leült a kedvenc pixel-szerkesztője elé, és összedobott pár különböző vázlatot a weboldal kinézetéről. Lehetőleg olyanokat, melyek jelentős mértékben eltértek egymástól. Egy kifejezetten ronda darab biztos, hogy került közéjük, mivel az értékesítés pszichológiája szerint az emberek annál könnyebben hoznak meg döntéseket, minél nagyobb a különbség a lehetőségek között. Ahhoz képest persze, hogy csak a vizualitás volt fontos, egészen elképesztő weboldalak születtek akkoriban.

A „szép weboldalak” korszakán azonban még mindig nem jutottunk túl. Ha körülnézel a weben, továbbra is azt láthatod, hogy van egy rakás designer, aki változatlanul az előbb vázolt elvet követi a weboldaltervezésnél. Annak ellenére, hogy a webdesign mára egy egészen más irányba fordult. A szépség még mindig fontos tényező a webdesignban, sőt van, akik számára csak ez létezik, elég, ha a Dribbble-t megnézed. A szépség persze fontos lehet a webdesignban, azonban nem elsődleges és nem egyetlen célként.

Az ezeken látható terveknek soha nem az a céljuk, hogy pénzt keressen a weboldalával annak tulajdonosa. Ezek mindig csak a szépségről szólnak, vagy olyan egyéni szempontok határozzák meg őket, mint mondjuk a tökéletes reszponzivitás kialakítása. De nemcsak itt van gond. A különböző template-ek és témák készítői sem nagyon foglalkoznak mással. Habár őket sokszor még a kinézet sem érdekli. Az elsődleges céljuk a nyereség, az a pénz, amit a template hoz nekik.

Mára a cél lett a legfontosabb

Ha azt akarjuk, hogy a cél mindennél fontosabb tényező legyen, akkor még időben meg kell határozni. Ez nem azt jelenti, hogy majd a harmadik vázlat után, hanem azt, hogy még az első előtt. Ha már kigondoltad a weboldalad célját, akkor hamar rájössz, hogy a designnak csak alárendelt szerepe lehet a céllal szemben. Az nem működik, hogy elkészül valamilyen weboldal, majd reménykedsz, hogy eléred vele a már meghatározott céljaidat.

Tehát az első kérdés, amit egy új weboldal tervezésekor vagy egy meglévő oldal redesignja előtt fel kell tenned magadnak az, hogy milyen célt akarsz elérni a weboldallal? (Illetve a designer szemszögéből az, hogy milyen célt akar elérni vele az ügyfél?) A termékét vagy szolgáltatását akarja eladni? Olvasókat akar szerezni? A feliratkozói számát szeretné gyarapítani? Tájékoztatni akarja az embereket a tevékenységéről? Vagy esetleg csak szórakoztatná őket?

Bármi is legyen a weboldal célja, tisztában kell lenni vele. Nem csak a design függ ettől, hanem a tartalmat is az határozza meg, hogy mit akar a weboldal elérni. Mert, hogy írod meg egy cselekvésre ösztönző link szövegét (call to action), ha nem tudod, hogy mire akarod biztatni az embereket?

Nyilván nem mindenki van tisztában a céljaival. Nagyon sok olyan leendő weboldaltulajdonos van, aki nem gondolkodik el a célokon, csak egy weboldalt szeretne. Pedig a célt mindenképpen meg kell határozni a weboldal-tervezés előtt, hiszen csak ekkor tudod megállapítani, hogy a weboldal sikeres-e vagy sem.

A cél akár a célközönség elérése is lehet

A cél szinte minden esetben lehet akár annyi is – ami egyébként minden weboldalnál potenciális célként merül fel -, hogy összekapcsold a céget az ügyfeleiddel vagy közönségeddel. Tehát a kérdés itt az, hogy mi a leghatékonyabb megoldás ennek a kapcsolatnak a kialakítására?

Ugyanakkor ezt a kérdést csak akkor tudod megválaszolni, ha ismered a közönséged, illetve ismered a konkurenciát, és hogy ők miként közelítik meg ezt a problémát. Mit csinálunk, mit teszünk az ügyfelekért, és hogyan tesszük ezt? Honnan tudjuk, hogy elértük a célt? Mit jelent a siker ezen keretek között? A válaszok fogják meghatározni a projekt leírását.

Ezek után következhet csak maga a tervezés. Ami fontos, hogy a célközönség ismeretén alapuljon a design. Például megállapítod, hogy a célközönséged kizárólag 60 éven felüliekből áll. Nyilván ekkor a könnyen olvasható betűtípusok kerülnek az oldalra, megnövelt méretben. De ha pont az ellentéte derül ki, az is kiemelt figyelmet érdemel a tervezés során.

Viszont, csak akkor tudod ezeket a tényezőket figyelembe venni a design során, ha tudod, hogy kik fogják látogatni a weboldalad. Az ügyfelek pedig csak akkor fogják elérni a céljukat, ha Neked sikerül elérned őket. És csak ebben az esetben mondhatod azt majd, hogy a weboldalad sikeres.

Frissítés, 2022.02.24.:

A jó webdesign érték-vezérelt

Weboldalak tervezésénél vagy redesignjánál gyakran születnek érzelem alapú döntések, melyek mögött nem állnak adatok vagy hosszú távú stratégia, mégis sokba kerülhet a kivitelezésük. Vajon megéri végrehajtani ezeket? Vagy van jobb megoldás?

Nagyon sok döntés mögött érzések, intuíció áll, miközben a döntés nem támasztható alá számokkal. Ennek ellenére időt és pénz ölnek a kivitelezésbe, majd a gyenge eredményeket látva hasonlóan érzelem-alapú döntések születnek a megoldásra, ismét csak szerény eredményeket produkálva.

Mi az az érték-vezérelt tervezés?

Lássuk először azt, hogy mikor beszélünk érzelem-alapú döntésről? Például, amikor valaki úgy vág neki a weboldala redesignjának, hogy egyszerűen megunta már a régit, arra panaszkodik, hogy az összes konkurens weboldal jobban néz ki, különben sem hoz a weboldal jó számokat, úgyhogy kell valami új.

Ezzel szemben egy érték-alapú döntés úgy néz, hogy miután felmerül az igény, hogy új szolgáltatással szeretne bővíteni a cég, mert szélesebb közönséget akar elérni, akkor piackutatást végeznek, megvizsgálják a célközönséget, majd ez alapján átgondolják, hogy milyen változtatásokkal lehet mindezt megvalósítani a weboldalon.

Tehát, míg a vélemény- vagy érzelem-vezérelt folyamat úgy néz ki, hogy van egy érzés vagy vélemény, mely elvezet egy cselekvéshez, aminek lesz egy eredménye, addig érték-alapon először megfogalmazzuk az elérendő értéket, hozzákapcsoljuk a teljesítendő számokat, vagyis az adatokat, ezután megtörténik a kivitelezés, majd a mérés.

Az érték-alapú megoldás abban különbözik az érzelem alapútól, hogy mindig valami olyan dologra kínál megoldást, amire valóban szüksége van a célközönségnek (egy érték, amit előzetesen meghatározunk). Ezzel szemben érzelem-alapú döntéseknél egyszerűen szerencsejátékot játszik a cég: tippel, majd megteszi a tétet, aztán vagy nyer vagy elbukja a pénzét.

Mi kell egy érték-alapú döntés meghozatalához?

Speciális teljesítmény-célok meghatározása

Nagyon sokszor a weboldaltulajdonosoknak fogalmuk sincs mit akarnak elérni, csak valami jobbat, többet, szebbet, és reményeik szerint ezt majd a kivitelező cég ezt a kiváltja belőlük az új weboldallal. Az érték-alapú designhoz viszont tudni kellene, hogy honnan indulunk és hová tartunk. Nem elég, ha csak valami homályos elképzelünk van arról, hogy mi szeretnénk elérni a weboldalunkkal. Pontos, mérhető, de reális célokra van szükség.

A weboldalak újratervezésénél ezért meg kell határozni a célokat, és jó, ha ezek a valóság talaján maradnak. Világosan kell látni, hogy mit is várunk el, mit szeretnénk elérni, majd ezeknek fontossági sorrendet kell adni. Miután ez megvan, megfogalmazhatjuk a konkrét, releváns, mérhető és elérhető célokat. Az írásban rögzített határidős célok teszik igazán világossá, hogy mit is akarunk elérni, illetve teszik lehetővé a stratégiai gondolkodást és a célokra összpontosítást.

A célközönség problémáit kell megoldani

Az emberek a weboldalakra azért érkeznek, mert megoldást keresnek valamilyen problémájukra. Igazából semmi más nem érdekli őket a weboldalon, nem foglalkoznak első körben azzal, hogy kik vagyunk, vagy milyen kiválónak értékeljük a saját szolgáltatásunkat. A weboldalaknak nem reklámozni kell a terméket vagy a szolgáltatást, hanem megoldást kell kínálniuk a felhasználó problémájára.

Az még nem elég, hogy bemutatunk néhány terméket, majd leírjuk ezek jellemzőit. Ebből még a felhasználónak nem feltétlenül derül ki, hogy nekik a mi termékünkre van szüksége. Természetesen a részletek is fontosak lesznek egy ponton, ahogy a hitelességünk is, de ezek csak másodlagosak. Ezek akkor lesznek érdekesek számukra, ha már úgy érzik, hogy a termék vagy szolgáltatás megoldhatja a problémájukat, kielégíti az igényeiket, szebbé teszi az életüket.

Ehhez fel kell tárni a célközönségünk problémáit, azt, hogy miként látják őket, hogyan éreznek ezekkel kapcsolatban, miként oldanák meg. Minél jobban megértjük, annál jobban ki tudjuk elégíteni az igényeket. Ehhez annyi is elég, hogy kérdéseket teszünk fel nekik.

A felhasználó kerüljön a középpontba

Az előbbihez kapcsolódó hiba, hogy a weboldal központi témája nem maga az ügyfél, hanem a cég, mely a szolgáltatást kínálja. Az ügyfelek legfeljebb csak a referencia-listában jelennek meg, ahol nem az kerül kiemelésre, hogy miként tettük az adott ügyfelet sikeresebbé. Ez nem sugározza azt a felhasználóknak, hogy értjük őket és a problémáikat.

Vagyis, ha azt akarod, hogy megbízzanak benned az ügyfelek, akkor olyan weboldalt kell készíttetned számukra, melyből kiderül, hogy törődsz velük és érted őket.

A feltételezéseinket ellenőrizzük az analitikával!

Az analitika önmagában nem mutat meg egy érték-alapú döntést, ugyanakkor arra jó, hogy ellenőrizzük az elképzeléseink helyességét. Emellett az A/B tesztekkel nagyon jól meg lehet vizsgálni a döntéseket. Ha van egy hosszú távú stratégiába illeszkedő megoldásunk, akkor azt A/B tesztelve, megállapíthatjuk, hogy hatékony-e vagy sem.

Merjük módosítani a stratégiát!

Ha rögzítettük a célokat és a stratégiát, akkor az a dokumentum nem egy kőbe vésett szöveg. Rendkívül fontos, hogy folyamatosan korrigáljuk, amennyiben a teszteredmények indokolják, vagy új igények merülnek fel. Jó példa erre a koronavírus-járvány, mely sok cég esetében írta felül a korábbi stratégiát, hiszen változhatott a célközönséget és az ő elérésük. Ehhez pedig hozzá kell igazítani a weboldalt is.

A jó webdesign láthatatlan

Habár sokszor ejtünk szót új, látványos, néha meglepő webdesign-trendekről, valójában a jó webdesing nem arról szól, hogy a weboldalunkon be kell mutatnunk valamilyen vizuális csodát, vagy be kell bizonyítanunk, hogy mennyire jól ismerjük a legfrissebb megoldásokat, mennyire vagyunk trendik. A jó webdesign ugyanis láthatatlan.

Azt már sokszor elmondtuk, hogy egy jó webdesign a felhasználót helyezi a középpontba, és a legfőbb jellemzője elsősorban a használhatósága. Ez a cél, és minden vizuális megoldás, technika csak eszköz ennek a célnak az elérésében. A célt azonban meg lehet fogalmazni másként is – és sokak számára talán így érthetőbb lesz -, mégpedig úgy, hogy a webdesignnak

láthatatlannak, azaz észrevehetetlennek kell lennie.

Amikor már “díszíted” a weboldalad ilyen-olyan vizuális megoldásokkal, akkor biztos lehetsz benne, hogy “túldizájnoltad”. Hogyan tarthatod meg a weboldalad designját láthatatlannak?

Természetesen láthatatlanságról nem abban az értelemben beszélünk, hogy a weboldalad teljesen láthatatlanná, vagy akár észrevehetetlenné válik. Nem, a webdesign látható, csak kérdés, hogy mennyire tolakodóan törekszik erre, mennyire feltűnősködni akar. A designer által használt technikáknak és eszközöknek ugyanis nem szabadna szembetűnően nyilvánvalónak lennie az átlagos felhasználók számára.

A webdesignnak tulajdonképpen csak a “jó érzést” kellene közvetítenie feléjük, ennyit kellene észlelniük az egészből. A felhasználók ugyanis a hatása alá akarnak kerülni, kapcsolatba akarnak lépni vele. Nem szükséges arról tudniuk, hogy miért is érzik a késztetést. Ettől jó egy design, és ez az, amiért láthatatlan. De hogyan érhetjük el? Ehhez először meg kell érteni, hogy:

A webdesign a kommunikációról szól

Amikor egy weboldalt tervezünk, vagy akár egy mobilalkalmazást, akkor valamiféle kommunikációt tervezünk meg a felhasználóval. A designnak támogatnia kell az üzenetet, nem pedig akadályoznia azt. Egy élményt kell teremteni, minden rendelkezésünkre álló eszközzel.

Az elkészült weboldal nem neked készül, sőt nem is a konkurencia vagy más designerek számára, hanem a célközönségednek, akik semmit nem tudnak a white space-ről, a színek vagy az egyes betűtípusok megfelelő kiválasztásáról és használatáról. Mindössze érzik, hogy jó használni egy weboldalt, vagy sem. Ez az, amiért úgy kell gondolkodni egy webdesignról, mint egy láthatatlan eszközről.

A láthatatlanságnak több típusa is jelen van a webdesignban. Beszélhetünk a láthatatlan termékekről vagy elhelyezésekről, amikor a márka vagy a hirdetés fel sem tűnik az embereknek. A láthatatlan interakciók és értesítések is annyira feltűnés-mentesen történhetnek, hogy gondolkodás nélkül tud elvégezni a felhasználó egy-egy feladatot. A láthatatlan esztétika pedig egy érzelmi kapcsolatot és köteléket teremt a látogatóval, hogy azok vágyjanak az elköteleződésre a weboldallal.

Hogyan kivitelezhető a láthatatlan webdesign?

A láthatatlan webdesign nem egy trend vagy egy UX-technika. Ugyanazokat az elemeket használja, melyek minden weboldalon megtalálhatók, így a szöveggel, a színekkel, a betűkkel, a képekkel, az ikonokkal dolgozik. Vagyis megértéséhez csak vissza kell térnünk az alapokhoz.

A szöveg és a nyelv esetében azt kell megérteni, hogy üzenetet közvetítenek a felhasználók felé, nemcsak azt, amit kimondunk, hanem annál többet. A stílus lehet hivatalos, könnyed vagy akár vicces is. A felhasználóknak szándékaid szerint szenvedélyt kellene érezniük, esetleg a szövegednek valamilyen cselekvésre kellene sarkallnia őket? Döntsd el, mit szeretnél kiváltani bennük, és ennek megfelelően alakítsd a nyelvezetet. Emellett gondold végig a szavak ritmusát, és hogy hogyan hangzanak, amikor hangosan kiejted őket.

A színek esetében tudni kell, hogy minden színnek vagy színkombinációnak van valami érzelmi hatása. A színek kiválasztása sok időbe telhet, hiszen végig kell gondolni, hogy melyik milyen hatást kelt a látogatókban. Alapvetően valami “jó érzést”, harmóniát, egyensúlyt kell sugározniuk feléjük.

A tipográfiának szintén komoly érzelmi hatása van, üzenetet közvetít a felhasználók felé. Ha bármikor bizonytalan vagy a betűtípus kiválasztásánál, akkor maradj egy sans serif vagy egyszerű serif megoldásnál. De a betűtípusok érzelmi hatásáról korábban már írtunk, érdemes ennek kapcsán átolvasni linkelt bejegyzésünket.

A képek, videók vagy animációk használatánál végig kell gondolni, hogy azokon éppen mi történik, vannak rajta emberek, azok vidámak és mosolyognak? A színek melegek vagy hidegek, lassú vagy gyors cselekedeteket ábrázol? A megfelelő ütem és ritmus ugyanis bizonyos szintű biztonságérzetet jelent az emberek számára. Egy túl gyors vagy akár túl lassú mozgás magára a cselekményre hívja fel a figyelmet, és így a kép kikerül a felhasználó figyelmének középpontjából.

Az ikonok és a felhasználói felület egyéb elemei kapcsán következetességre kell törekedni. Ha ez sikerül, akkor az sokat tehet a webdesign láthatatlanná tétele érdekében. Az ikonkészlet világossá teszi a felhasználók számára, hogy pontosan hogyan működik egy weboldal, hogyan léphetnek vele kapcsolatba, ugyanakkor az egyes ikonok esetén kivitelezhető cselekvések vagy épp azok kinézete akár eltérő is lehet.

A láthatatlanná válás akkor következik be, amikor a felhasználónak már nem kell gondolkodnia azon, hogy mi miért történik, hogyan működik. A cél az, hogy az embereknek megtorpanás nélkül navigáljanak a cél felé, azaz mondjuk egy webáruház esetében  a termékek megrendeléséhez.

Ezek mellett még számos eszköz létezik, melyek segíthetik vagy éppen akadályozhatják egy webdesign láthatatlanná, azaz működőképessé tételét. Ilyenek az árnyékok, a különböző szöveg-effektek, keretek, távolságok, és még sok más dolog. A lényeg az, hogy ezeket miként használjuk. Mindenképpen úgy kell őket alkalmazni, hogy az emberek észre se vegyék őket, ne ezek miatt pillantsanak egy képre vagy egy szövegre. Ezeknek az elemeknek nem kell önálló életre kelniük, pusztán a célok és az üzenet átadásában kell közreműködniük.

A kulcs a láthatatlan design létrehozásánál az, hogy minden részlet tökéletesen ki legyen dolgozva, akár a makro-, akár a mikroelemekről van szó. A webdesignnak szándékosan egyszerűnek kell lennie, nem szabad túldíszíteni, vagy csak azért használni trendi megoldásokat, hogy megmutassuk: ilyet is tudunk.

Meg kell tehát tervezni az apró részleteket, hogy azok teljesen zökkenőmentesen működjenek, valamint át kell gondolni alaposan a teljes képet, hogy lássuk, megfelel-e annak, amit közvetíteni szeretnénk a felhasználók felé. Túlkomplikálni viszont nem érdemes a dolgokat: legtöbbször a legegyszerűbb megoldás egyben a legjobb is.

A jó webdesign következetes

A következetesség rendkívül fontos dolog a webdesignban, a felhasználói élmény szempontjából talán fontosabb is, mint azt elsőre gondolnád. A következetes webdesign révén jobbá, könnyebben használhatóvá válik a weboldalad. Azt is mondhatjuk, hogy bizonyos részei észrevehetetlenné válnak, ami pozitívum, hiszen mint tudjuk: a jó webdesign láthatatlan.

A következetesség egy olyan szál, mely összeköt elemeket a weboldalon, sőt akár egy kampány vagy egy márka esetében is. Ezáltal válik egy termék megkülönböztethetővé.

Miért fontos a következetesség?

Először érdemes meghatározni azt, hogy mit is értünk következetesség alatt. A következetesség egy megegyezés, harmónia vagy összeegyeztethetőség, illetve összhang vagy azonosság egy komplex dolog részei között.

Ha a felhasználói felület tervezését vizsgáljuk, akkor például a CTA-k színeinek egyezése következetesség, vagy ugyanazon betűméret használata a címsorokban szintén következetesség. Tehát, amennyiben követjük az ismert és használt mintákat a designban, akkor következetesek vagyunk.

A következetesség egy fontos design-elv, mely abban segít, hogy a design:

• használhatóbb
• könnyebben tanulható
• intuitív legyen.

De hol a legfontosabb a következetesség egy weboldalnál?

Következetesség a színeknél

Megvan annak az oka, hogy olyannyira sok információ elérhető a megfelelő színsémák kialakításával kapcsolatban a weben. Mi is foglalkoztunk már részletesen a témával, hiszen a szín kulcsfontosságú, amikor össze kell kötni egy márkát egy vizuális megjelenéssel. Egy-egy szín alapján azonnal meg tudod mondani, hogy melyik márkához kapcsolódik: gondolj a Coca-Colára, a Facebookra vagy a T-Mobile-ra! Mennyivel nehezebb lenne azonosítani ezeket a cégeket a rájuk jellemző színárnyalat nélkül.

A jó színhasználat ugyanakkor abban is segíti az embereket, hogy navigáljanak a weboldaladon, és tudják, hogy még a jó irányba tartanak. Ha minden egyes kattintással olyan oldalra jutnának, mely más színpalettát használ, akkor fogalmuk sem lenne róla, hogy hol járnak. Ahhoz, hogy megalkoss egy jó színpalettát, ki kell választanod egy domináns színt, majd ehhez egy vagy két másodlagos színt illeszteni. Ezután meg kell határoznod a stílus és használati szabályokat minden egyes szín esetében, valamint azt, hogy miként alkalmazd mindezt a design során. Ragaszkodj ezekhez a szabályokhoz, és a színekkel már nem lesz gondod!

Betűméretek, térközök, pozíciók

Ugyanúgy, mint a színeknél, itt is szabályokat kell alkotnod, és a megoldás is ugyanaz:

• válassz ki egy domináns betűtípust és méretet,
• majd válassz egy másodlagos betűtípust és méretet!

A kiválasztott típust, méretet, térközt, elhelyezést hozzá kell rendelned egy-egy taghez, mint a h1, h2, h3, illetve a kenyérszöveg, így ezek használatával egyből a megfelelő megoldást veszed elő.

Akadnak olyan típusok, melyek csak bizonyos esetekben kerülnek használatra (például a navigációs menüben), ezek eltérnek, de a következetesség itt is fontos. A felhasználókat ugyanis megzavarja, ha a navigációs elemek szövegei az egyes oldalakon eltérő betűtípussal íródnak.

A méretek és az elemek kapcsolat

Mekkorák az egyes elemek a Te weboldaladon? Minden gomb azonos méretű? És mi a helyzet a címsorokkal és a fotókkal? Az egyes elemek méretét a weboldal stílusa határozza meg, ugyanakkor egy adott elem méretének azonosnak kellene lennie minden használatkor. A gyakori méretek és a kapcsolat az egyes elemek között abban segíti a felhasználókat, hogy könnyebben felfedezzék a mintákat, és ennek révén megkapják a megfelelő vizuális segítséget. A következetesség révén harmóniát és egyensúlyt alakíthatsz ki, ezáltal könnyen befogadhatóvá válik a design, és a felhasználói elkötelezettség is erősödik.

Terek és használatuk

Az egyes elemek között húzódó terek legalább olyan fontosak, mint maguk az elemek. Nincs annál zavaróbb, mint amikor az elemek úgy jelennek meg egy weboldalon, mintha csak oda lennének szórva, és semmiféle szabály nem fedezhető fel az alkalmazásukkal kapcsolatban.

A legjobb megoldás a következetes térhasználati szabályok kialakítására a rácsrendszer alkalmazása. A láthatatlan vonalak segítenek abban, hogy hogyan és hová helyezd el az egyes elemeket a weboldalon, ezáltal pedig a szövegek, a képek és a gombok harmóniába kerülnek egymással.

Mindig győződj meg azonban arról, hogy mind a vízszintes, mind a függőleges térkalakítás következetes legyen! Ehhez figyelned kell a kapcsolatra a hasonló és az eltérő elemek között.

Felhasználói minták

A Te designodnak is úgy kell működnie, mint a többi hasonló designnak, és követned kell az elfogadott felhasználói sablonokat. A designerek sokszor eredetit akarnak alkotni, de Te ne ess bele ebbe a csapdába!

Ha egy applikáció vagy egy weboldal úgy működik, ahogy arra számítanak a felhasználók, akkor könnyebben kapcsolatba tudnak vele lépni. Ekkor tudják, hogy a weboldaltól mire számíthatnak, és a design szinte észrevehetetlenné válik, hiszen a jó használhatóság túlragyogja.

A felhasználói felület elemei

Végül, minden interakciós és felhasználói felületen megjelenő elemnek azonos módon kellene viselkednie:

• A linkeknek vagy az oldalon vagy egy új ablakban megnyílnia (válaszd valamelyiket).
• A gomboknak azonos színűnek kell lennie.
• A navigációnak mindig ugyanazon pozícióban kell megjelennie és ugyanazokat az opciókat kell tartalmaznia.
• A lábléceknek és az oldalsávoknak mindig azonos helyen és méretben kell megjelenniük (azaz ne tedd az egyik oldaladon nagyobbá őket, mint a másikon).
• Az ikonok legyen felismerhetők, mert erre számítanak az emberek.
• A kattintható elemek mindig legyenek kattinthatók.

Ne felejtsd: ha egy elemhez valamilyen akciót rendelsz, akkor annak a funkciónak mindenhol máshol is meg kell jelennie. A következetesség a designban létrehozza azt a felépítést, amire a felhasználók vágynak. Kialakul egy drótváz, amit az emberek megértenek, és amely hozzájárul a weboldal használhatóságához és az elköteleződés kialakításához. Mindez egy rakás szabállyal indul az egyes projektek esetében.

Ha egyedül dolgozol, akkor is alkoss egy listát a szabályokról, hogy miként használod a színeket, méreteket, tereket, a felhasználói felület elemeit és az interakciókat! Ez felgyorsítja majd a design-folyamatot és egy sokkal jobb, használhatóbb design kialakításához vezet.

Mikor érdemes néha megkérdőjelezni a következetesség elvét a webdesignban?

A következetesség átgondolatlanul alkalmazva nem feltétlenül hoz jó eredményeket. A problémákat alapvetően két részre oszthatjuk:

Következetesség a felületen belül

A felületen belüli következetesség kényszert jelent. Habár a kényszer nem egy eredendően rossz dolog, adott esetben meghisúsíthatja azt, hogy elérjük a célunkat a szabályok követése miatt. Néha a következetesség miatt rosszul használható felületek jönnek létre, vagyis a következetesség akár nehezítheti is a felhasználók számára a céljaik elérését. 

A gond az, hogy miközben a design rosszul használható, a következetes megjelenésre hivatkozva igazolhatjuk a design helyességét. Annál is inkább, mivel könnyebb egy következetes designt létrehozni, mint egy jól használhatót.

Ragaszkodás már létező designokhoz

Létezik már egy tökéletes design? Már megtervezted a tökéletes vásárlási folyamatot? Vagy elkészítetted már a legjobban használható bejelentkezési űrlapot? És vajon létezik olyan sablon, mely minden ember számára száz százalékban használható? Nem. 

Nem szabad egyetlen design-megoldáshoz ragaszkodni anélkül, hogy gondolkodnánk annak további javításán. 

Általában nem kérdőjelezzük meg a bevett sablon-megoldásokat, és nem gondolkodunk az azokkal kapcsolatos problémákon. Használjuk őket, mivel megszokottá váltak, és amiatt nem érhet kritika, ha azt csináljuk, ami már jól bevált.

Érdemes megtörni a következetességet?

Mindezek után felmerül a kérdés, hogy szükség van a következetesség figyelmen kívül hagyására vagy a szabályok állandó megszegésére? Nem, ez sem működik. A következetesség fontos a használhatóság, a könnyebb tanulhatóság, és az intuitív design miatt. 

Ugyanakkor, érdemes megváltoztatni a hozzáállásunkat, kérdéseket feltenni és elgondolkodni a válaszokon. Amikor a következetesség miatt alakítunk ki valamit egy weboldalon, akkor fontos lenne átgondolni, hogy a következetesség segít elérni a felhasználóknak a céljukat? Vagy lenne valamilyen könnyebb és használhatóbb megoldás helyette?

A lényeg tehát, hogy a következetesség nem maga cél, amit el kell érni, hanem egy eszköz, hogy elérhessen általa a felhasználó egy célt. És amikor a következetesség a gátja a cél elérésnének, akkor nem szabad ragaszkodni hozzá.

Ha nem ismered a felhasználóidat, maradj következetes!

Fontos ugyanakkor, hogy nem szabad felhagyni a következetességgel, ha nem értjük pontosan a felhasználóinkat. Hiszen hogyan is szegnénk meg egy szabályt, ha nem tudjuk, hogy miért tesszük azt?

Az NNG három kérdés feltevését javasolja, mielőtt megtörnénk a következetességet:

• Az új design jobban fog teljesíteni, mint a régi?
• A felhasználók újra és újra hajlandóak lesznek próbálkozni az új designnal, amíg meg nem ismerik annyira, hogy felfedezzék a hosszú távú előnyeit?
• Felgyorsítja a tanulást?

Ezekre a kérdésekre nem lehet úgy választ adni, hogy nem ismered kellően a felhasználóid tudását és céljait.

A következetesség, illetve annak időnkénti megtörése az egyensúlyról szól. A legfontosabb dolog tisztában lenni azzal, hogy mikor szabad elhagyni a következetességet, és mikor kell következetesnek maradni. Ehhez ismerni kell a felhasználóidat, a céljaikat, mert anélkül nincs értelme a dolognak. 

A jó webdesign nem tér el a megszokottól

A felhasználói cselekvést a korábbi tapasztalatok és a megszokás alakítja. Bármilyen eltérés a megszokott mintáktól hibákat eredményez. Ez azt is jelenti, hogy rendkívül nehéz új mintákat kialakítani, mert ehhez el kellene felejteniük az embereknek a korábbi beidegződéseiket.

Az egy jó dolog, ha valami már ismerős számunkra, hiszen a tapasztalatok alapján gyorsabban végezhetünk el hasonló cselekvéseket, csekély erőfeszítéssel hozhatunk gyors döntéseket. Ennek oka, hogy egy már jól begyakorolt cselekvés sokkal kevesebb kognitív energiát használ fel, mint egy teljesen új – hívta fel a figyelmet Aurora Harley, a Nielsen Norman Group blogjában.

A megszokott felület előnye

A szakértelem is az ilyen begyakorlott, megismert mintákon alapul: a sakkmesterekről készült tanulmányok is azt mutatják, hogy ők korábbi sikeres mintákat ismernek fel, és ezek alapján tervezik meg a következő lépésüket. Ezzel szemben az újoncoknak sokkal több erőfeszítést kell tenniük, hogy végiggondolják minden lépésük a következményeit.

Az emberek a web használata során úgy tevékenykednek, mint a sakkmesterek: találkoztak már jó pár felhasználói mintával, így egy oldalra tévedve felismerik azt, hogy melyiket érdemes elővenniük. Amikor találkozunk egy ismerős designnal, akkor nem kell elvonni erőforrásokat más, fontosabb feladatokról. Ez az oka annak, amiért az emberek utálják, ha egy felületnek megváltozik a designja, hiszen sokkal könnyebb olyan rendszert használni, ami már ismerős.

Egy felület azáltal válik ismerőssé az emberek számára, hogy azt többször is használják. Mint minden tanulásra, erre is igaz, hogy sok ismétlés kell ahhoz, hogy az emberek gyorsan és hatékonyan tudják használni. Amit itt észben kell tartanod, hogy a felhasználók a legtöbb időt más weboldalakon töltik, nem pedig a Tiéden. Nagyon sok lehetőségük van arra, hogy megtanuljanak és gyakoroljanak bizonyos használati mintákat. És amikor Te a weboldaladdal eltérsz a megszokott mintáktól, akkor arra kényszeríted őket, hogy erőfeszítést tegyenek a felületed megértése érdekében.

A várakozások irányítják a figyelmet

Amikor az emberek felismernek egy olyan mintát, mellyel korábban már találkoztak valahol a weben, akkor az ezzel kapcsolatos mentális modelljük irányítja a viselkedésüket. Ha a Te weboldalad esetében az interakciók bármilyen módon eltérnek a megszokottól, akkor az emberek vagy eltévednek vagy összezavarodnak. Úgy használják, mintha “csőlátásuk” lenne, azaz a kijelzőnek csak bizonyos pontjaira figyelnek. Azokra a pontokra, melyek korábbi tapasztalataikon alapuló feltételezéseik szerint fontosak lehetnek a céljuk eléréséhez.

Másrészről viszont bizonyos területeket szándékosan kerül a tekintetük, és ha véletlenül mégis odapillantanának, akkor gyorsan elkapják a tekintetüket. Ez az úgynevezett forró krumpli hatás, mely azon alapul, hogy az emberek a weboldalak bizonyos pontjain nem számítanak semmilyen fontos információra.

Erre példa a banner-vakság, amikor a weboldalakon felbukkanó reklámokat gyakorlatilag észre sem veszik. Ezért a weboldalak jobb oldalával nem is foglalkoznak, mert sok esetben ott szerepelnek a reklámok. A felhasználói várakozásokat mentális modelljük alakítja, melyet viszont az állandó ismétlések befolyásolnak.

Ez a Te szempontodból azt jelenti egy felhasználói felületet létrehozásakor, hogy meg kell ismerned a felhasználóid mentális modelljét és az elvárásaikat, valamint ki kell elégítened ezeket. Ezáltal képesek az eddig megszerzett tapasztalataik alapján hatékonyan végrehajtani a weboldaladon a feladataikat.

A hibás feltételezések hibákhoz vezetnek

Amikor a felhasználók a weboldal bizonyos részeire nem figyelnek oda, mert hibás feltételezéseik vannak a használatával kapcsolatban, akkor az komoly problémákhoz vezet. Az NNG egy korábbi tanulmányában arra kérte a résztvevőket, hogy a Starbucks oldalán próbálják meg megtalálni a legközelebbi kávézót, ahol bizonyos lehetőségek a rendelkezésükre állnak. Miközben ezt a feladatot végrehajtották, ötből három felhasználó nem vette észre a szűrési lehetőséget a kiválasztásnál, ehelyett minden egyes kávézóra rákattintottak és ellenőrizték, hogy adott lehetőség szerepel-e a kínálatban. Nyilván ez jóval több időbe telik, mint a szűrő használata.

Ráadásul a felhasználók arra panaszkodtak, hogy nem volt lehetőségük szűkíteni a találati listát, annak ellenére, hogy elérhető volt a szűrés funkció a keresésnél, egyszerűen csak nem vették észre. A képernyőképen látható, hogy mi okozta a gondot: a Filter gomb olyan helyre került, ahol a keresés elküldése szokott lenni, így nem is ellenőrizték, hogy valójában mire is szolgál a gomb.

További problémát jelent, hogy nagyon nehéz lecserélni, megváltoztatni a már korábban begyakorolt rutinokat. Még akkor is, ha a felhasználó már belefutott miatta egy hibába. Az NNG vizsgálatában az egyik résztvevő újra és újra ugyanazt a hibát követte el: mindig bezárta a böngészőt, mivel a Chrome app éppen akkor váltott designt és az X-szel jelölt bezárás ikon a bal felső sarokba került, ahol általában a visszalépés gomb szerepel.

A felhasználó ugyan felismerte a hibát, ahogy az is, hogy miként is működik az új design, ennek ellenére annyira megszokta a használatát visszalépésként, hogy nem tudott átállni a megváltozott funkcióra. Hiszen minél többet használunk egy bizonyos mintát, annál nehezebb lesz átszokni egy újra.

Összességében tehát elmondható, hogy amikor egy design eltér a megszokottól, akkor az emberek nem tudják, miként hajtsák végre az előttük álló feladatot a felületen, így pedig hibázni fognak. Különösen akkor, ha egy korábbi jól begyakorolt rutint használnak, és ezért nem figyelnek oda arra, mit tesznek. Ezáltal úgy hajtanak végre hibás lépéseket, hogy észre sem veszik őket.

A legnagyobb veszélyt ez jelenti, annál is inkább, mert az emberek számára túl nagy megterhelést jelentene, ha minden weboldal designját átvizsgálnák annak érdekében, hogy megállapíthassák, változott-e rajta valami. Ezért elsősorban a weboldaltulajdonosok és a designerek feladata az, hogy figyelembe vegyék a felhasználók mentális modelljeit, és ennek tudatában alakítsák az oldalt.

A jó webdesign intuitív

Mostanában nagyon sok készülő webdesign esetében központi kérdésként merül fel, hogy miként tegyük azt “intuitívvá”. Hiszen az erőfeszítéstől, akadályoktól mentes használat jelentősen javítja egy weboldal hatékonyságát.

Képzeld el, hogy látsz egy autót a kereskedésben, amit kipróbálnál! Amikor viszont beszállsz, azt látod, hogy nincs ott a kormánykerék, ahol az lenni szokott. Ilyenkor beszélhetünk „nem intuitív designról”, hiszen eddigi tapasztalataid alapján nem tudod vezetni az autót. A felhasználó figyelmét itt a design elvonja azzal, hogy nem nyilvánvaló megoldásokkal ismeretlen helyzetekbe kényszeríti.

Mi az az intuitív webdesign?

Amikor webdesignról van szó, akkor a design egészen addig intuitív, amíg a felhasználó képes egy feladat végrehajtására mindenféle megtorpanás nélkül. Ezzel szemben egy nem intuitív design a figyelmét olyan weboldal-elemekre irányítja, melyek nincsenek kapcsolatban a feladattal.

Az intuitív webdesign tulajdonképpen csak annak a könnyen, szinte gondolkodás nélkül használható webdesignnak egy más aspektusa – vagy akár csak egy eltérő megnevezése -, melyet az egyszerűség, a konvencióknak való megfelelés és a kiváló felhasználói élmény jellemez.

Ami talán szintén érzékelhető a példából, és fontos megjegyezni: “ösztönös” használat nincs, csak már megszerzett tapasztalat alapján történő használat. Hiszen ki születik úgy, hogy tud autót vezetni? A megszerzett tapasztalatra viszont lehet és kell építeni. Ehhez persze tisztában kell lenned azzal, hogy mekkora is a felhasználói tudás, és mennyit kell neked hozzátenned. Akad azonban néhány probléma:

Mindenkinek mást jelent

A helyzetet azonban bonyolítja, hogy mindeni számára egy kicsit mást jelent az intuitív használat. Vagyis, ami intuitív számodra, az nem feltétlenül intuitív a felhasználóidnak. Ugyanakkor van egy pár dolog, ami közös benned és a felhasználóidban.

Ezért, ahhoz hogy elő tudj állítani egy intuitív webdesignt némi kutatásra lesz szükséged. Akár meg is kérdezheted arról a felhasználóidat, hogy mit gondolnak a weboldaladról. Bevetheted az A/B teszteket is, amivel pontosan megtudhatod, hogy mi működik és mi nem a weboldaladon. És kiderülhet az is, hogy egy-egy változtatásnak milyen a hatása.

Megszerzett tudás – megcélzott tudás

A másik dolog, ami az intuitív webdesign kapcsán felmerül, hogy a felhasználók rendelkeznek már egy tudással a felületedről, ugyanakkor még van egy pár dolog, amit nem tudnak, de tudniuk kellene. Ha olyan dolgot is a szájukba akarsz rágni, amivel már tisztában vannak, akkor azzal csak túlkomplikálod a designt. Kénytelenek lesznek felesleges lépéseket megtenni.

Ez azt jelenti, hogy egy intuitív design csak azokra a dolgokra vezeti rá a felhasználóit, melyet még nem tudnak, de kellene tudniuk a felületed használatához. Ahhoz megint csak elég jól kell ismerned a felhasználóidat, hogy tudjad mit tudnak és mit nem tudnak.

Mikor lesz egy felhasználói felület intuitív?

Akkor, amikor a felhasználók minden kísérletezés, gyakorlás, segítség, oktatás nélkül képesek megérteni a felhasználói felület működését. Vagyis, ha valami úgy néz ki mint egy gomb, akkor tudjuk, hogy annak megnyomása esetén számíthatunk valamilyen reakcióra. Ehhez hasonlóan, ha látunk a linket, akkor tudjuk, hogy kattintásra megnyit egy másik oldalt. Ugyanakkor egy olyan felhasználói felület esetében, melyen nem csak navigálni nehéz, hanem olyan elemeket is tartalmaz, melyek teljesen idegenek számunkra, azt mondhatjuk, hogy az az UI nem intuitív.

A lényeg, hogy miközben vannak eltérések aközött, hogy mit jelent az intuitív használat az egyik ember számára, és mit jelent a másik számára, addig vannak olyan dolgok, melyek szinte mindenki esetében javítják a felhasználói élményt. Például az, ahogy átfutjuk a weboldalakat legalább annyira egyforma minden ember esetében, mint hogy nem nyúlnak bele a tűzbe. Tehát az univerzálisan elfogadott elemekre kell építeni.

A bejegyzés elején említett példában adott egy akadály – nincs kormánykerék -, mely a felhasználói út során bukkant fel. Az átlagos felhasználó nem akar plusz erőfeszítést tenni, törni a fejét. Különösen akkor nem, ha azért jött, hogy pénzt költsön el. Az emberek nem szeretik az akadályokat a használat során, hiszen csak hátráltatja őket a céljaik elérésében, összezavarja, eltéríti őket. (Talán ez az egyik oka annak is, hogy a Google miért tesz az önvezető autóiba is kormánykereket.)

Ha mindezt a webdesignra alkalmazzuk, akkor azt mondhatjuk, hogy egy intuitív weboldal elemei olyan módon vannak kialakítva és elrendezve, hogy a felhasználó a lehető legkönnyebben hozzá tudjon férni az információkhoz, tudjon navigálni az oldalon, és erőfeszítés nélkül elérje a célját. Az intuitív webdesign nem szúr szemet, ugyanakkor nem feltétlenül marad észrevétlen.

A gyakorlatban, amikor valaki arra törekszik, hogy egy weboldalt esztétikussá tegyen, gyakran a szépség oltárán feláldozza a használhatóságot. És habár egy szép weboldalnak sokszor elnézzük a kisebb használhatósági hibáit, ha a felhasználó nem találja meg, amit keres, akkor esélytelen, hogy hosszabb időt töltsön el a weboldalon.

Mi kell egy intuitív a webdesignhoz?

1. A felhasználóid megismerése

Habár mindez egyszerű és nyilvánvaló lehet mindenki számára, sokszor mégsem készülnek intuitívan használható weboldalak. Még akkor sem, ha erre törekszünk. Ennek valószínűleg az az oka, hogy a designerek nem tudják, kik és mit akarnak az adott weboldal felhasználói, vagy mit várnak el az adott cég weboldalától. Tehát egy intuitív weboldal elkészítését a közönség megismerésével kell kezdeni.

Ezzel kapcsolatban fontos figyelni a tudásbeli különbségre. Ez alatt azt értjük, hogy tudnod kell, mekkora az eltérés a meglévő felhasználói tudás és a megcélzott felhasználói tudás között. A meglévő tudás egészen pontosan az, amit a felhasználó tud a felület használatáról a weboldal meglátogatása előtt addigi tapasztalatai alapján. Ez minden felhasználónál, célcsoportnál más és más. A megcélzott tudás pedig az, amit a reményeid szerint megszerez majd a weboldaladon annak érdekében, hogy ott elérje a céljait.

A felhasználók megismerésével tudsz rálátni erre a különbségre, tisztába kerülni jelenlegi tudásszintjükkel. Emellett persze arra is rájössz, mit várnak a weboldaladtól, mik a céljaik, milyen vágyaikat akarják kielégíteni. Ezen információk nélkül nem nagyon lehet hatékony weboldalt készíteni, hiszen csak feltevések vannak és sötétben tapogatózás zajlik.

A vizsgálataid eredményeként tehát meg kellene ismerned a célközönséged szándékait, vágyait, tudását. Ez egyénenként és célcsoportonként eltérő, ráadásul aszerint is változik, hogy épp az eladási tölcsér mely szakaszán tartózkodnak. Mégis ez határozza meg, hogy milyen lesz a webdesign, milyen szövegeket írsz egy adott aloldalon számukra.

2. Egy jó információs architektúra

Nyilván az cél, ha az emberek ne csak elolvasni tudják a weboldalad, hanem könnyen át is futható legyen. Ehhez kell az intuitívan befogadható a tartalom, amit a jó elrendezés biztosít. Az információs architektúra határozza meg, hogy miként rendezed el a tartalmaid a felületen, milyen kategóriákat használsz és mennyire könnyű navigálnia a látogatóknak az oldalon. Nyilván a cél az, hogy könnyű és intuitív használat révén jussanak bele a megfelelő csatornába az emberek, és arra haladjanak benne, amerre szeretnéd.

3. A megszokott sablonok

A célközönségedet figyelembe véve a számukra érvényes webes konvenciókra érdemes építened. Hiszen az emberek nem szeretik a változásokat a gyakran előforduló sablonoknál. Egy Windows-használó számára furcsa, amikor egy OS X-et kell használnia és a bezárás gomb az ablak bal oldalán található. És persze ugyanez igaz fordítva is. Az emberek megszoktak bizonyos megoldásokat, és ha ezektől eltávolodunk, akkor az nem túl felhasználóbarát dolog.

4. Következetesség

Akadnak akik nem figyelnek eléggé a következetességre, amikor épp egy intuitívnak szánt designon dolgoznak. Miközben egy weboldalt tervezel, szükség van a következetességre az egyes oldalak esetében. Van ugyanis egy elvárás a felhasználók részéről azzal kapcsolatban, hogy a weboldalad miként működik, és ha ez oldalról oldalra változik, akkor az nem csak zavart okoz, hanem frusztrációt is.

Tehát ha az egyik oldaladon még felső navigációs menüt használsz, míg a következőn már a bal oldalra teszed a menüt, azzal zavart okozol a felhasználókban, akik a csalódás miatt talán el is hagyják a weboldaladat. Már egy egészen kis következetlenség miatt is sokat romolhat a weboldalad használhatósága.

5. Egyszerűség

Az egyszerűség manapság gyakran hallott szó a webdesignban, és az sem véletlen, hogy a minimalista weboldalak egyre népszerűbbek. Egy egyszerű weboldal gyorsabban betöltődik, könnyebbnek látszik, de megvalósítani és karbantartani is egyszerűbb lehet. Ezért is törekszenek egyre inkább a minimalista megoldások irányába a tervezők.

Ehhez persze az kell, hogy minden felesleget eltávolíts a weboldalról, így egyszerűbbé téve a használatot. Azt, hogy mi a felesleges egy alapos ellenőrzés és a tesztek tudják megmutatni. Minden, ami által könnyebbé válik a használat, intuitívabban használhatóvá teszi a felületet, és ezáltal mérsékelhető a weboldal használata által kiváltott stressz.

6. Minimális erőfeszítéssel megvalósítható feladatok

Senki sem akar egy teljes percet azzal tölteni, hogy létrehozzon mondjuk egy felhasználói fiókot. Ezért szükséged van arra, hogy gyorsíts a regisztrációs folyamaton, és a felhasználók ezt a lehető legkisebb erőfeszítéssel meg tudják tenni. Az egyszerűsítés és a felesleges lépések elhagyása a megoldás a felhasználók megtartására és konvertálására.

7. Integrált segítség

Ez az egyik legkritikusabb része az intuitív designnak. Tény ugyanis, hogy nem egyszerű létrehozni egy olyan felhasználói felületet, mely akár egy speciális célközönség számára is egyformán könnyen használható. Miközben néhány embernek a felületed teljesen intuitívnak fog tűnni, addig mások máshogy érzik majd. Az utóbbiak miatt gondolni kell arra, hogy segítségre lesz szükségük a weboldalad működésével kapcsolatban.

Az egyes elemek mellett elhelyezett segítő információk gondoskodnak arról, hogy a weboldal használata közben mindig információhoz jussanak az emberek. Ez nem csak időt takarít meg számukra, hanem az egész felhasználói élményt kellemesebbé, kevésbé zavarba ejtővé, és hatékonyabbá teszi.

8. Gyors betöltődés

A régi, bölcs mondás úgy hangzik, hogy ha időt adsz az ügyfeleknek a gondolkodásra, akkor valószínűleg nem fognak vásárolni. Ugyanez érvényes a webdesignban is. Ha egy weboldal betöltése túl sok időt vesz igénybe, akkor nagy a valószínűsége, hogy a felhasználók nem fognak várni, és inkább egy másik weboldalt keresnek fel.

Ez az oka annak, hogy amikor nagyméretű weboldalakról van szó, akkor mindig csak egy részét töltsd be a tartalomnak, esetleg használj folyamatjelzőt, hogy a felhasználókat a weboldaladon tartsd! A weboldalsebességről részletesebben itt írtunk.

Összefoglalva

Elmondhatjuk, hogy egy olyan weboldal nem lehet intuitív, melynek nehéz megfejteni a működését, esetleg eltéríti a felhasználók figyelmét. Tehát miközben figyelsz az olyan megszokott designelemekre, mint a megfelelő színséma kiválasztása vagy tartalomstruktúra kialakítása, arra is figyelned kell, hogy a design intuitív legyen a célközönséged számára.

A felhasználói élményt egyesek összekeverik a vizuális megjelenéssel, pedig az csak egy része neki. A másik része, hogy milyen könnyen használják a weboldalad az emberek. Ha nem sikerül egy kellően intuitív felületet összehoznod, melyet könnyű megérteni és amely segíti a feladatok végrehajtását, akkor a felhasználók valószínűleg egy másik weboldalt keresnek, mely megteszi mindezt számukra.

A jó webdesign együttérző

Ahhoz, hogy jó legyen a weboldalad, ismerned kell a felhasználóidat. Ez azt jelenti, hogy együtt kell érezned azon személyekkel, akik használják a terméked vagy szolgáltatásod. Sokan azonban, amikor empátiára törekszenek, mindössze szimpátiát éreznek. Pedig ez nem elég.

A szimpátia és empátia fogalma gyakran keveredik, ez pedig problémát okozhat amiatt, hogy nem igazán tudsz reagálni a valódi felhasználói igényekre. A Norman Nielsen Group nemrég egy bejegyzésben tisztázta a problémát, és azt, hogy miként kapcsolódik az empátia a webdesignhoz.

Mi az a szimpátia?

A szimpátia gyakran egy reakció – szomorúság vagy szánalom formájában – a másik ember nehézségeit látva. Az empátiával szemben, azonban megmarad a távolság a két fél között, és a figyelő nem osztozik a megfigyelt szenvedéseiben. Szimpátia esetén nem tudod elképzelni magad, amint a felhasználók problémái miatt szenvedsz, mindössze csak felismered, hogy a másiknak gondjai akadtak.

A webdesignt vagy UX-et illetően a szimpátia annyit jelent, hogy tisztában vagy a felhasználók nehézségeivel. Ugyanakkor nem próbálod magad az ő helyükbe képzelni, és átérezni a fájdalmukat vagy a haragjukat. Persze, a szimpátia is jobb, mint a semmi, illetve az, amikor lenézed a felhasználókat például azért, mert nem tudják úgy használni a weboldalad, ahogy szerinted kellene.

Ugyanakkor a design célja nem az, hogy kedves legyél a felhasználókkal, hanem az, hogy segítsd őket. Tehát nem az a megoldás, hogy hosszú és udvarias hibaüzeneteket írsz nekik, hanem az, hogy a hibaüzenet révén gyorsan tudják korrigálni a hibát és továbbléphessenek.

Mi az az empátia vagy együttérzés?

Az empátia több, mint a szimpátia. Az empátia annak a képessége, hogy teljes mértékben megértsd, tükrözd, és megoszd egy másik személy kifejezéseit, szükségleteit, motivációit.

A webdesignt tekintve az empátia teszi lehetővé, hogy megértsd az emberek azonnali frusztrációin túl a reményeiket, a félelmeiket, a korlátaikat és képességeiket, a céljaikat. Az empátia a felhasználók mélyebb megértését jelenti, és olyan megoldások létrehozását, melyek nem csak egy szükségletre reagálnak, hanem hatékonyan javítják a felhasználók életét azzal, hogy a szükségtelen nehézségeket eltávolítják.

Tehát nem egyszerűen megtervezel egy akadálymentes oldalt, hanem szövegfelolvasót használsz és bekötött szemmel próbálsz megoldani egy feladatot a weboldalon.

Hogyan gyakorold az empátiát a webdesignban?

Az empátia gyakorlása a felhasználói kutatásokkal kezdődik. Félre kell tenni az egót és a feltételezéseket, és bele kell merülni a kutatásokba. A kvalitatív módszerek közé tartozik a felhasználói interjú, a kognitív feltérképezés, a naplóvizsgálatok, mivel ezek lehetővé teszik, hogy elmélyedj a felhasználók viselkedésében, motivációiban és aggodalmaiban.

Használj nyitott végű kérdéseket, mert ezáltal sokkal többet megtudhatsz a felhasználóktól. Tehát ne azt kérdezd tőle, hogy “boldog vagy?”, hanem azt, hogy “mi tesz téged boldoggá?”. A lényeg, hogy ne igennel vagy nemmel válaszoljanak, hanem elmondják, hogy mi motoszkál bennük.

Az is fontos lenne, hogy a teszteken a csapat más tagjai is vegyenek részt. Ez nagymértékben javítja az empátiát és a kutatás eredményeinek elfogadását is könnyebbé teszi. Hiszen azt hiszik el, amit látnak. Az pedig még hatékonyabb, ha kapcsolatba is kerülnek a felhasználókkal.

Ehhez persze tisztában kell lenniük azzal is, hogy mi a célja a felhasználói élmény tervezésének: időmegtakarítás, a pluszmunka minimalizálása és egy olyan termék, mely a valós felhasználói igényekre reagál.

Érdemes empátiatérképeket készíteni, melyek rögzítik a felhasználói érzéseket, reményeket és félelmeket. Ezáltal a felhasználókról szerzett tudás egy helyre kerül. Az empátiatérkép segítségével felfedezhetők azok az információk, melyekről még nem szereztél tudomást, és egyben kiderül, hogy milyen típusú kutatásra van szükség ennek felderítésére.

De ami ennél is fontosabb, hogy az empátiatérkép segít abban, hogy együttérzőbben viselkedj a felhasználókkal, valamint kivédi az előítéleteket és megalapozatlan feltételezéseket.

Az empátiának végül bele kell kerülnie a design-eljárásba is. Ennek úgy kell működnie, hogy kiküszöbölje a feltételezések alapján történő tervezést. Tehát, ha hajlamos vagy nem módosítani a designon, annak ellenére, hogy akadnak olyan felhasználók, akik számára nem használható, akkor az irányelvekhez kell nyúlni, hogy a korrekció mindenképpen megtörténjen.

Empátiára van tehát szükség a weboldalak tervezéséhez is. Ez egy hidat jelent a felhasználóidhoz. Az empátia révén a felhasználóid szószólója leszel, és megzabolázod a feltételezéseid.

A jó webdesign szép

Az emberek sokkal elnézőbbek az olyan weboldalak usability hibáival szemben, melyek vizuálisan kifejezetten vonzó felhasználói felülettel rendelkeznek. Ezáltal tehát elfedhetők a weboldal hibái. Olyannyira, hogy még a használhatósági tesztek során sem derül rájuk fény, ha nem figyelsz.

Amikor a tesztek során azt hallod az alanyoktól, hogy milyen szép a weboldal, ahelyett, hogy arról beszélnének milyen problémákkal és akadályokkal találkoztak a használat során, akkor joggal gyanakodhatsz az esztétikai-használhatóság hatásnak elnevezett jelenség megjelenésére a weboldaladnál.

Az esztétikai-használhatóság hatásának meghatározása

Az esztétikai-használhatóság hatás a Nielsen Norman Group definíciója szerint a felhasználóknál tapasztalható azon tendenciára utal, miszerint a vonzóbb terméket használhatóbbnak tartják. Az emberek ugyanis azt hiszik, hogy ami jobban néz ki, az jobban is működik. Még akkor is, ha valójában egyáltalán nem így van.

Más szavakkal a felhasználók pozitív érzelmi választ alakítanak ki az általad készített vizuális designnal kapcsolatban, ez pedig elnézőbbé teszi őket a kisebb használhatósági problémákkal szemben a weboldaladon. A legtöbb esetben ez egyébként egy kedvező dolognak tekinthető, a Te szempontodból. Ez a fő oka annak is, hogy a jó felhasználói élményhez nem elegendő egy funkcionális felhasználói felület. Érdemes tehát olyan felületet tervezni, mely vonzó, ugyanakkor persze az a legjobb, ha egyben hatékony is.

Nem most kezdték vizsgálni

Az esztétikai-használhatóság hatást már 1995-ben vizsgálták az ember és számítógép közötti interakciók során. A Hitachi Design Center szakemberei, Masaaki Kurosu és Kaori Kashimura egy ATM felhasználói felületének 26 variációját tesztelték, melynek során 252 ember kértek meg arra, hogy minden változat használhatóságát és esztétikai megjelenését értékeljék.

Erős összefüggést találtak a szépség és a használhatóság között. Azt a következtetést vonták le, hogy a felhasználókat jelentős mértékben befolyásolja az adott felület esztétikai megjelenése, még akkor is, amikor kifejezetten annak funkcionalitását kellett értékelni. Don Norman 2004-es könyvében, az Emotional Designban mélységében is megvizsgálta ezt az elképzelést, és a mindennapi tárgyakra is alkalmazta.

Csak a kisebb hibákat fedi el

Ugyanakkor azt is érdemes észben tartani, hogy az esztétikai-használhatóság hatásának vannak korlátai. Egy kellemes design ugyanis képes elfeledtetni az emberekkel a kisebb használhatósági problémákat, de a nagyobbakat már nem. Ahogy az e-kereskedelem első törvénye mondja: ha egy felhasználó nem talál meg egy terméket, akkor nem is fogja azt megvenni. Vagyis egy jól kinéző weboldalnak sem lesznek bevételei, ha nem lehet rajta a fontos dolgokat megtalálni.

A formának és a funkciónak tehát összhangban kell lennie. Amikor egy felhasználói felület súlyos használhatósági problémáktól szenved, vagy amikor a használhatóságot feláldozzák az esztétika oltárán, akkor a felhasználók elvesztik a türelmüket. A weben ráadásul nagyon gyorsan képesek reagálni is az emberek azzal, hogy elhagyják a weboldalt.

Ha szép dolgokat hallasz, kezdj el gyanakodni!

Amikor a való életben megjelenik az esztétikai-használhatóság hatás, az egy jó dolog. Hiszen ez azt jelenti, hogy egyrészt volt értelme szép felhasználói felületet készíteni, másrészt az kapcsolódik is a célközönség igényeihez. A tesztek alatt viszont megakadályozza a használhatósági problémák feltárását. Az esztétikai-használhatóság hatást tehát már a termék tervezési fázisában érdemes figyelembe venni, de a felület kialakítására is kihat. A tesztelőknek tudniuk kell, hogy miként fedezzék fel ezt a hatást a használhatósági tesztek alatt, és miként értelmezzék.

Vagyis, amikor egy személyes kvalitatív használhatósági tesztre kerül sor, talán már látható, hogy a vizsgált személyek a feladatok megoldása közben problémákba ütköznek, viszont a végső visszajelzésnél a felület vonzóságát emlegetik fel. Tehát, ha olyan véleményeket hallunk, melyek nem igazán tűnnek odavalónak, akkor érdemes megfontolni az alábbi három lehetőséget:

• A részvevők lehet, hogy kötelező jellegűnek érezték, hogy véleményt mondjanak. Ráadásul az emberek (főleg, ha tapasztalatlan tesztelők) általában könnyebbnek találják, hogy egy weboldal vizuális designjáról mondjanak véleményt, mint a használhatósági problémákról.
• A résztvevők úgy érezhették, hogy valami pozitív dolgot kell mondaniuk a weboldalról. Ilyesmire akkor kerül sor, amikor úgy vélik, hogy a Te kezed is benne volt a weboldal elkészítésében, és nem akarnak megbántani.
• Vagy ha közbeszól az esztétikai-használhatóság hatás. Ehhez ki kell zárni az első két lehetőséget, azaz a felhasználóknak nem szabad nyomás alatt érezniük magukat semmilyen szempontból.

Ki kell tehát találnod, hogy a felhasználók miért adnak pozitív visszajelzést a vizuális designról egy negatív élmény után, így elkezdhetsz dolgozni a probléma megoldásán.

Összességében tehát elmondható, hogy egy szép felhasználói felület elkészítése megéri a befektetést. Egy vonzó vizuális design hatására a weboldalad rendezettnek, jól megtervezettnek és professzionálisnak tűnik. Az emberek jobban szeretnek egy vizuálisan vonzó weboldalt használni, és ilyenkor türelmesebbek is az apró hibákat látva. Ez a hatás akkor a legerősebb, amikor az esztétikát a tartalom és a funkcionalitás szolgálatába állítod.

Ugyanakkor ez a hatás akkor is megjelenik, amikor a használhatósági problémákat akarod feltárni. Úgyhogy ilyenkor érdemes a dolgok mögé nézni, és nem csak azt vizsgálni, hogy mit mondanak az emberek, hanem, hogy mit tesznek.

Kérdésként merülhet fel persze, hogy mi is az, hogy szép? Egy szubjektív ítélet ilyenkor elegendő, vagy vannak olyan objektív tényezők melyek meghatározzák, hogy mennyire szép egy weboldal?

Mitől lesz szép egy weboldal?

Ha valaki ránéz egy weboldalra, akkor viszonylag könnyen meg tudja mondani róla, hogy az – ízléstől függetlenül – jól néz ki, vagy sem. Azt viszont már sokkal nehezebb megmondani, hogy miért is néz ki jól az adott weboldal. Pedig nem bonyolult a dolog, csak ismerni kell néhány vizuális design alapelvet, melyeket a Nielsen Norman Group gyűjtött össze egy bejegyzésben.

Tipográfia és távolságok

Egy weboldal alapszinten nem áll többől, mint betűkből és a közöttük lévő térből. De hogy milyen betűket használunk és azokat hogyan rendezzük el, alapvetően meghatározza azt, hogy jól néz-e ki a weboldal.

Az egyik összetevőt tehát a betűk jelentik, egy adott betűkészlet használata, a variációk, a színek. Ha túl sokféle a variáció, akkor sérül a következetesség és a design elveszíti vonzerejét. Ökölszabályként elmondható, hogy egy designnál nem használhatunk egy-két betűkészletnél többet, ezen belül pedig a dőlt, a vastag betűs változatokat mindig ugyanazon célból variálhatjuk az oldalon.

Legalább ugyanilyen fontosak azonban a használt terek is. Így a rácsba, hasábokba rendezés, mely szabályossá teszi az elrendezést. A kialakított elrendezésnek minden aloldalon ugyanúgy kellene megjelennie. Ha bármilyen eltérés történik ettől az alap-elrendezéstől az csak szándékosan történhet, szintén szabályok alapján, különben sérül a következetesség és így a design.

Ugyancsak fontosak a sortávolságok a szövegeknél: ha néhány bekezdéses szövegekről van szó, akkor eltérhetünk az alapértelmezett távolságtól (betűméret + 2 px), és a távolság akár +4-6 px is lehet. Ezáltal szellősebbé, olvashatóbbá válik a szöveg.

Hierarchia és színek

Ha a weboldalon már megjelennek a képek és a színek is, akkor azokat is következetesen kell meghatározni, hogy elérjünk egy vonzó megjelenést. Ahogy a betűknél, úgy a színeknél is mérsékelni kell a változatosságot: két színnél nem feltétlenül van szükség többre. Az egyik lehet sötétebb, mely jól látható egy fehér háttéren, míg a másik világosabb.

Az persze némi esztétikai érzéket igényel, hogy a megfelelő színeket válasszuk, hiszen az alapszínek nem feltétlenül jelentik a legjobb választást. Sok szempontot át kell gondolni a színek kiválasztásánál, amiről részletesebben itt írtunk. Mindenesetre a színek számát érdemes visszafogni az erőteljesebb hatáshoz.

Ezután a megfelelő vizuális hierarchia kialakítása következik, mely vezeti a látogatók tekintetét, és megmutatja a fontos elemeket az oldalon. Ebben a legfontosabb szerepük a méreteknek és a színeknek van, valamint, hogy következetesen használjuk.

Végül a képek, fotók, grafikák következnek, melyeknek segíteniük kell a felhasználókat abban, hogy vizuálisan megértsék a terméket, és nem csak dekorációs célt kell betölteniük. Sokat javít a weboldalad megjelenésén, ha a képek összhangban vannak a design többi részével, például azáltal, hogy passzolnak a háttérszínek.

Következetesség

Már eddig is többször szóba került a következetesség, mivel tulajdonképpen egy vonzó webdesignnak az az alapja, hogy következetesek legyünk a vizuális elemek használatánál. Ennek hiányában elveszítjük a professzionális megjelenést is.

Ennek érdekében a weboldaladnál egy vizuális rendszert kell létrehozni és ragaszkodni hozzá a weboldal minden részén. Milyen elemeknél fontos a következetesség? Főleg amiket eddig felsoroltunk: a távolságoknál, a betűtípusoknál, a színeknél, a hierarchiánál, az elrendezésnél, stb. Ha pedig sikerül következetesnek maradni a design minden eleménél, akkor annak az lesz az eredménye, hogy egységessé és vonzóvá válik a megjelenés.

Összességében tehát elmondható, hogy egy-egy weboldal akkor lesz szép, ha figyelembe veszik a tervezésnél a fenti alapelveket. Tehát egy vizuális design rendszer alapján szervezik a weboldalt: a szövegeket és a grafikai elemeket rács mentén helyezik el, világos hierarchiát alakítanak ki visszafogott színpalettával, valamint mindezt következetesen használják a teljes weboldalon.

A jó webdesign figyelembe veszi az első benyomás fontosságát

Mindannyian szeretünk úgy gondolni magunkra, mint racionális lényekre, akik döntéseiket átgondoltan hozzák meg. A valóság azonban az, hogy a döntési folyamatok jelentős része már azelőtt lezajlik bennünk, hogy egyáltalán tudatában kerülnénk a döntési helyzetnek. A Nielsen Norman Group szerint pedig ezért kell figyelembe vennünk a weboldalkészítés során az irracionális viselkedés hatását a döntéshozatalra.

Hogyan születnek a döntéseink?

Daniel Kahneman szerint az emberek kétféle úton dolgozzák fel az információkat. Van egy egyes számú és egy kettes számú rendszerük. Az 1. rendszer az úgynevezett automata rendszer, mely akaratlan és csekély erőfeszítést igényel, ugyanakkor gyorsan érzékeli a kapcsolatokat és felismeri a mintákat.

A 2. rendszer ezzel szemben lassú és nehézkes, a figyelmünket igényli. Általában utóbbival azonosulunk, vagyis tudatosnak tartjuk magunkat, és úgy véljük, hogy irányítjuk a sorsunkat. Ezzel szemben a kormánykeréket az 1. rendszer fogja. Még akkor is, ha nem teljes mértékben irányít, a legtöbb benyomásról ez gondoskodik a 2. rendszer számára.

Az 1. rendszer gyors megoldásokkal szolgál a már megszerzett tapasztalataink felhasználásával. Gondosan feldolgoz minden tárgyat körülöttünk, ami egyébként megterhelő lenne és túl sokáig tartana tudatosan megtenni. Gyorsan azonosítja azokat az információkat, melyek fontosak egy feladat elvégzéséhez, így a 2. rendszer ezeket az információkat fogja feldolgozni egy döntés meghozatalánál.

De a weboldaltulajdonosok szempontjából mindez miért fontos?

Egyrészt azért, mert az egyes számú rendszer határozza meg azt, hogy az emberek minként ítélik meg az információk fontosságát. Információkeresés közben ugyanis a felhasználók gyorsan átfutják a weboldalakat a számukra fontos információk után kutatva. Ennek során hajlamosak azon elemekkel kapcsolatba kerülni, melyeket magas információtartalmúnak ítélnek meg.

A vizsgálatok azt mutatják, hogy egy weboldal átfutásának mintája attól függően változik, hogy éppen mi a célja a látogatónak. Például, ha információt keres, akkor egyedül a keresésre utaló jelzéseket veszi figyelembe (nagyító ikon, keresés szó, beviteli mező), minden mást figyelmen kívül hagy.

A 1. rendszer kiváló abban, hogy kiiktassa a felesleges információkat. A gond csak akkor van, ha a fontos információ valamiért felesleges információnak néz ki. Ilyenkor a fontos információt ugyanúgy figyelmen kívül hagyja, mint a lényegtelen információt. Vagyis az első benyomás ugyan gyors és általában pontos, de nem száz százalékos. Ezért figyelned kell arra, hogy a fontos információ valóban fontosnak tűnjön.

Ráadásul az 1. rendszer hatással van arra is, hogy a felhasználó miként látja a weboldal esztétikáját, és indirekt módon a használhatóságát. Egy szebb weboldalra az emberek úgy emlékeznek, mint ami sokkal használhatóbb, mint amilyen valójában. Márpedig az 1. rendszer dönti el egy weboldalról, hogy az szép vagy sem. Gite Lindgaard kutatásaiból az derül ki, hogy mindössze 50 milliszekundumra van szükség ezen döntés meghozatalához, és hiába nézik tovább az emberek az oldalt, a kezdeti véleményük már nem fog megváltozni.

Az 1. rendszer ítéli meg azt is, hogy mennyire hiteles egy weboldal. Amikor a felhasználó megérkezik az oldalra, általában van egy célja. A kiemelkedő designelemek (mint például egy piros call to action gomb) pedig automatikusan felkeltik a figyelmét. BJ Fogg szerint minél feltűnőbb egy elem, annál nagyobb lesz a hatása a weboldal hitelességére nézve. Ez a hatás lehet pozitív vagy negatív is, attól függően, hogy az emberek miként értelmezik az elemet. Tehát egy mozgó reklám az oldal tetején lehet ugyan figyelemfelkeltő, de egyben zavaró is, így rontani fogja a weboldal megítélését.

Következtetések a webdesignra vonatkozóan

Először is érdemes meghatározni a kulcsfontosságú munkafolyamatokat minden egyes persona számára. Ez azt jelenti, hogy minden terméknek többféle felhasználója van, akik különböző feladatokat szeretnének végrehajtani. A personák felelnek meg a különböző felhasználó-típusoknak. Meg kell értened ezeknek a típusoknak a gondolkodásmódját és attitűdjeit, meg kell határoznod a céljaikat és azt a módot, ahogy el akarják érni. Ez alapján kialakítható egy munkafolyamat, és meghatározható az, hogy mely információk milyen sorrendben fontosak az egyes típusok számára.

Egyszerűsíteni kell a vizuális megjelenést annak érdekében, hogy ne terheld túl az 1. rendszert, és segítsd a releváns információk meghatározásában. Mivel az 1. rendszer azokra az elemekre figyel fel, melyek kiemelkedőek – ha fontosak az éppen előtte álló feladat végrehajtásában -, ezért el kell kerülni a versengő, azonos mértékben figyelemfelkeltő, de különböző call to action-öket. Két CTA-t alkalmazni nem tanácsos, de ha mégis szükség lenne rá, akkor úgy kell kialakítani őket, hogy világos legyen a hierarchiában betöltött helyük. Ha egyforma súlyú a két különböző CTA, akkor a 2. rendszernek kell választania közülük, ami időbe telik és kognitív megterhelést jelent.

Korlátozni kell a hangsúlyos színek és betűtípusok számát is. Ha túl sok színt használsz (négynél többet) és túl sok betűtípust (kettőnél többet) egy oldalon, akkor az úgynevezett szivárvány hatást vált ki: megzavarja az 1. rendszert és rossz benyomás keletkezik a weboldal esztétikájáról. Ne használj alacsony kontrasztú színeket és apró betűket sem, mert ez azt üzeni az embereknek, hogy valamit el akarsz rejteni előlük!

Az is fontos, hogy a design vizuálisan kiegyensúlyozott legyen egy rács mentén. Ez ugyan bizonyos mértékben korlátozza a kreativitást, ugyanakkor gondoskodik a struktúráról és az egyensúlyról.

Továbbá a legfontosabb elemek világosak legyenek, és támogassák a hitelességet. Tehát érthetően meg kell mondanod a látogatóknak, hogy ki is vagy és mit csinálsz. Ha aktiválni kell a 2. rendszert azért, mert a felhasználó nem tudja eldönteni, hogy jó helyen jár-e a weboldaladon, akkor elkezdi vizsgálgatni az oldalt, mert gyanúsnak találja.

Ne kérdezz túl sokat, túl korán a látogatóktól! Hiszen időbe telik, mire kialakul a bizalom. Ha a feliratkozási kérés az első, amit a felhasználó meglát a weboldaladon, akkor az csak felidegesíti és gyanakvóvá teszi. Először inkább kínálj értéket, hogy az emberek azt viszonozni akarják valamivel, mondjuk kapcsolati információkkal.

Segítenek a tesztek

Érdemes mérni az első benyomást, és tesztelni a weboldalt még indulás előtt valódi embereken. Nem elég, ha az intuíciód használod, amikor az első benyomást akarod meghatározni. A tesztek tudnak pontos eredményt adni. Ilyen teszt például, amikor rövid időre (50ms-5s) mutatod meg az embereknek a weboldalt. Az időkeret alsó része elegendő ahhoz, hogy elmondják benyomásaikat az oldalat esztétikájáról, de több idő kell ahhoz, ha azt is szeretnéd megtudni, hogy szerintük mi az, ami feltűnő az oldalon, vagy mely designelemek okoznak zavart.

A szemkövetéses vizsgálatok ugyan nehezek és drágák, ugyanakkor értékes információkat kínálnak. Pontosan megmutatják, hogy az emberek hova pillantanak az első néhány másodpercben a weboldalon. Ez egy remek kvantitatív mérés, ha megvannak hozzá az eszközeid. A kvalitatív tesztek viszont lehetővé teszik, hogy kevés számú felhasználótól nyerjél adatokat. Csak tedd fel nekik a megfelelő kérdéseket a különböző szakaszokban, és kiderül, hogy az első benyomások miként befolyásolják a döntéshozatalt.

Összességében tehát elmondható, hogy az első benyomás határozza meg, hogy az emberek mit gondolnak a weboldalad kinézetéről, használhatóságáról, hitelességéről. Ahhoz, hogy kellemes és szórakoztató felületet készíts, a racionális gondolatok mögé kel nézni, és az ösztönös, automatikus folyamatokat kell támogatni. Ha megérted az emberi agy erősségeit és korlátait, akkor tudni fogod, hogy miként kell megközelíteni a designt. Persze soha nem tudhatod pontosan, hogy a felhasználóid mit gondolnak, amíg meg ne kérdezed őket.

A jó webdesign egyensúlyt alakít ki

Egyensúlyra van szükség ahhoz, hogy a felhasználók azokkal a weboldal-elemek vizsgálatával töltsék az idejüket, amelyet szeretnél megmutatni nekik. Az egyensúly segít fenntartani a látogatók számára a koncentrációt, így könnyebben befogadják az információkat a weboldaladról.

A hatékony kommunikációhoz tehát egyensúlyra van szükség a weboldalon.  Abban a pillanatban, hogy ez az egyensúly megszűnik, az üzenet veszít hatékonyságából, elsüllyed a káoszban.

Amikor eléred azt a pontot, hogy minden éppen olyan mértékben van jelen – akár egy weboldalon -, amennyire szükséges, akkor létrejön az egyensúly, harmónia alakul ki a designban.

Ahhoz, hogy egy weboldal megalkotása során a designer egyensúlyt hozzon létre, kell a tehetség és a gyakorlat, na meg egy kis gondolkodás. De milyen lehetőségek adódnak az egyensúly vizuális megteremtésére egy weboldalon?

A szimmetrikus egyensúly

Az első és a legegyszerűbb megoldás az egyensúlyra a teljes szimmetria, a weboldalakon is. Ezért is találkozol szimmetrikus egyensúllyal a legtöbb weboldalon, úgy, hogy észre sem veszed.

És pontosan ez a lényege a szimmetrikus egyensúlynak. Egy természetesen kellemes megjelenést jelent az emberek számára, hiszen a design esztétikai szempontból jól szervezettséget és harmóniát sugároz. Ráadásul azért is vonzóbb az emberek számára a szimmetria minden más megoldásnál, mert maga az ember is egy szimmetrikus lényként tekint magára.

Az ember vonzódik a rendezettséghez, az egységességhez és az ismétlődéshez. A szimmetrikus egyensúly fontos jellemzője, hogy mivel a képek az ilyen weboldalakon szabályosan elrendezett hasábokban jelennek meg, így sokkal könnyebb a navigáció a felhasználók számára. Ráadásul olvasni is könnyebb, felülről lefelé, illetve balról jobbra haladva.

A szimmetrikusan kiegyensúlyozott oldalakat általában professzionálisabbnak tűnnek, nagyobb bizalmat keltenek, és a felhasználók igényeire szabottabbnak érezzük. A szimmetrikus egyensúly lehetővé teszi, hogy több részletet, képet, hirdetést helyezz el egy oldalon, mert könnyebb az információk megtalálása és feldolgozása az emberek számára.

A szimmetrikus egyensúly pontosan azt jelenti, amire bárki gondol a szimmetriával kapcsolatban: minden egyes elemnek megvan a maga megfelelője egy vertikálisan vagy horizontálisan húzódó tengely másik oldalán. Vagyis van egy képzeletbeli vonal, mely a weboldal közepén húzódik és mintegy tükörként működik, azaz egyik oldalt „tükrözi” a másik oldalra.

Sokan persze teljesen jogosan ezt a fajta egyensúlyt vagy elrendezést rendkívül unalmasnak látják, azonban az idő próbáját kiállta. És még mindig a legjobb módja annak, hogy egy weboldalnál megtaláljuk a tökéletes egyensúlyt. Itt van például a Cisco weboldala, mely egy ilyen szimmetrikus egyensúlyt mutat be.

Ennél a tengely függőlegesen húzódik az oldal közepén. Ha ezt képzeletben meghúzod, akkor láthatod, hogy a sorok középre rendezettek, az ikonok száma mindkét oldalon megegyezik, ahogy a cikkek bélyegképeinél is megmarad ez a szimmetria. És talán nem a legizgalmasabb weboldalról van szó, azonban nem is kell annak lennie, hiszen a cég hálózati eszközöket gyárt, nem pedig a kreatíviparban tevékenykedik.

Emellett a weboldal jól használható és funkcionális, ami tovább javítja a felhasználói élményt. A szimmetrikus design tehát olyan cégek számára javasolt, melyek professzionalizmust, szakmai hozzáértést, a minőség felé való elköteleződést akarnak sugallni.

Aszimmetrikus egyensúly

Annak ellenére, hogy a tökéletes szimmetriának sok előnye van – mint az fentebb soroltuk – az aszimmetria sem elvetendő. Aszimmetrikus weboldal például a Pinterest, ugyanakkor az is tény, hogy talán nehezebb feldolgozni az információtartalmát, mint ha szimmetrikusan lennének elrendezve az elemek.

Ugyanakkor nagyon sok aszimmetrikus megjelenést látunk logóknál is: ilyen például a Nike, mely ennek ellenére, vagy épp ezért, nagyon sikeres és jól felismerhető. Az aszimmetrikus design sokkal egyedibb és izgalmasabb, ha megfelelően használják.

Elsőre ellentmondásosnak hangozhat, de asszimmetriával is el lehet érni az egyensúlyt. Nincs ebben semmi különös, hiszen attól, hogy két rész nem azonos méretű, még lehet azonos súlyú, egyenlő jelentőségű. Az aszimmetria többféle módon is megjelenhet egy weboldalon: akár vertikálisan, akár horizontálisan.

Az aszimmetria kiemelheti az egyik oldalon lévő elemet, míg a másik oldalon lévőket kissé elhalványítja. Az ilyen egyenlőtlenség ellenére az egymás mellé helyezett eltérő súlyú elemek összessége mégis egyensúlyt mutat.

Vagyis annak ellenére, hogy az oldalon aszimmetriát látunk, tulajdonképpen a súlyokat tekintve itt is szimmetriával van dolgunk, az összbenyomás pedig harmonikus és kifejezetten szép lehet, talán még inkább, mint a szimmetrikus egyensúlyt használó megoldásoknál.

Paradoxonnak tűnhet, de a látszólagos egyenlőtlenséggel teremt egyensúlyt a design, és ezáltal működik. De miért használjuk a nagyobb kihívást jelentő aszimmetrikus designt, ha szimmetrikus designnal egyszerűen és könnyen kialakítható a megfelelő egyensúlyt?

Elsősorban azért, mert az aszimmetrikus egyensúly révén izgalmasabb, dinamikusabb lesz a kapott eredmény. Az persze tagadhatatlan, hogy több munkával jár így megalkotni az egyensúlyt, de ha igazán élő, dinamikus és vizuálisan vonzó megoldásra törekszel, akkor érdemes belefektetni ezt a többletet. Egy aszimmetrikus weboldal a mozgás, az izgalmasság, és a modern megjelenés érzését teremti meg a felhasználóban. Itt egy példa rá. A Honda amerikai oldala ugyan egy teljesen szimmetrikus résszel indít, azonban a hajtás alatt már változik a helyzet.

Belecsöppenünk egy kártya-alapú designba, ami elsőre rendkívül rendezetlennek, szinte kaotikusnak hat, ugyanakkor vizuálisan nagyon erős, színes. Ha egy horizontális vagy akár egy vertikális vonallal kettéosztjuk a felületet, akkor látható, hogy a két rész sehogy sem egyforma. Egyrészt a kártyák többféle méretűek és oldalarányúak, ráadásul nem szabályos sorokba és oszlopokba rendeződnek.

Ettől azonban egy nagyon izgalmas látvány bontakozik ki, mely összességében mégis egyensúlyt mutat. Az aszimmetrikus egyensúly megalkotása lényegesen nehezebb, mint a szimmetrikus társáé, mert figyelembe kell venni az egyes elemek közötti összetett kapcsolatokat.

Sok designer pont emiatt igyekszik kerülni ezt a megoldást. Pedig az aszimmetrikus egyensúly nagyon hatékonyan ragadja meg a felhasználók figyelmét, használatával a mozgás érzetét keltheted, mivel a szem természetes módon elindul a nagyobb elemek irányából a kisebbek felé, és a sötétebb részektől a világosabbhoz.

Érdemes tehát kihasználni az aszimmetrikus egyensúlyban lévő lehetőségeket. A kérdés már csak az, hogy milyen eszközökkel lehet kialakítani a weboldaladon? Használhatod a színeket, a textúrákat és a súlyt.

• Az egyes elemeid eltérő méretűek legyenek.
• Olyan textúrát használj, mely egyes elemeket nehezebbé tesz.
• Használj erős színeket a pasztell árnyalatok helyett.
• Helyezz elemeket az oldal sarkába vagy szélére, mivel ez nehezebbé teszi őket.

És természetesen a negatív tér megfelelő használata is beletartozik, hiszen az whitespace eleve aszimmetriát teremt. Ha tudod, miként működik a negatív tér a designban, akkor már érted, hogy hogyan mozgatja a felhasználó tekintetét a weboldalon. Ha jól alkalmazod, akkor a látogatók oda tekintenek, ahová Te szeretnéd. Ehhez persze hozzátartozik a színek okos használata is.

Mindenesetre gyakorlással és türelemmel megtanulhatod kialakítani a hatékony aszimmetriát, és lehet egy sokkal izgalmasabb weboldalad. Az aszimmetrikus design mindezek alapján elsősorban olyan cégeknek való, melyek az egyediségükkel akarnak hatni, művészi vagy modern a megjelenésük, lendületet, dinamizmust akarnak kifejezni, és innovatív termékekkel szállnak be a versenybe.

Sugárirányú egyensúly

Mindezeken túl azonban beszélhetünk úgynevezett radiális vagy sugárirányú egyensúlyról is. Ilyenkor nem egy vonal mentén tükrözünk szimmetriát kialakítva, hanem egy középen elhelyezett pontból. Ez persze azt eredményezi, hogy amennyiben akár egy függőleges, akár egy vízszintes vonallal kettéválasztjuk a felületet, mindig találni fogunk mindkét oldalon egymásnak megfelelő elemeket, azonos távolságra a vonaltól.

A legegyszerűbb példa erre az egyensúlyra a nap és annak sugarai, melyek a középpontból nyúlnak ki, vagy egy tó felszínén kirajzolódó hullámok, amikor beledobunk egy követ. Ami ezt a megoldást igazán különlegessé teszi, hogy a felhasználó figyelme egyrészt a középpontra irányul, másrészt el is vándorol onnan kifelé, és ismét visszatér. Vagyis nagyon könnyű ezáltal kialakítani a fókuszpontot.

Van erre is példa természetesen a webdesignban, még ha nem is olyan gyakori az előfordulása, mint a másik két megoldásnak. Itt van például a Vlog, mely animációjával még fokozza is a hatást, szinte hipnotizálva az embert.

Ezzel el is jutottunk a végére. Most már talán Te is tudatosabban fogod figyelni az eléd kerülő weboldalakon az egyensúly megjelenését vagy éppen annak hiányát. Fontos azonban megérteni, hogy az egyensúly kialakítása nem csak az esztétika miatt fontos, hanem azért is, mert javítja a felhasználói élményt. Azáltal, hogy megkönnyíti a látogatóknak az információk befogadását és a navigációt a weboldalon.

A jó webdesign nem épít akadályokat (csak amikor tudatosan teszi)

A webdesign alapvetően arra törekszik, hogy a felhasználók a lehető legkevesebb problémával nézzenek szembe, amikor egy weboldalt használnak. Ugyanakkor az akadályok is lehetnek hasznosak, ha jól használjuk őket.

A megfelelő felhasználói élmény kialakításának lényege, hogy ne akadályozza semmi a felhasználókat az interakciók során. Ahhoz azonban, hogy tudjuk, milyen akadályokat kell eltávolítani a weboldalról, először azt kell tudni, hogy mi is számít akadálynak. Akadálynak nevezhetünk minden olyan dolgot a weboldalon, ami meggátolja a felhasználót abban, hogy a weboldalt “intuitívan” használva elérje a célját a termékeddel való interakció révén.

Mivel az emberek az egyszerű megoldásokat preferálják, amikor kapcsolatba lépnek egy termékkel, ezért az akadálytalan designra az egyszerűség jellemző. A cél az, hogy a weboldal könnyebben használható legyen. Ennek feltétele, hogy tanulás nélkül tudják használni a terméket, vagyis fontos az “ösztönös”, könnyű és természetes használat, amiről egy korábbi fejezetben már részletesen beszéltünk.

Ehhez persze pontosan érteni kell, hogy a felhasználók miként lépnek kapcsolatba a felületeddel. A felhasználói élmény áramvonalasabbá tétele érdekében a felhasználói út optimalizálásával kell kezdeni. De el kell dönteni azt is, hogy egy akadály mikor jelent segítséget, és mikor problémát.

Meg kell érteni, hogy milyen célokat akarnak elérni az emberek a weboldaladdal való interakció révén. Ennek ismeretében pedig meghatározni, hogy milyen lépéseket tesznek meg az interakciós folyamat során. Ha ezt tudod, akkor megérted, hogy milyen problémákkal néznek szembe.

Az akadályok pontos feltérképezéséhez kutatásokra és tesztekre van szükséged. Ki kell alakítani a felhasználói utat, és egy jól használható információs architektúrát még a fejlesztés megkezdése előtt.

Hogyan kerüld el az akadályok létrehozását?

Ne terheld túl az embereket tartalmakkal és funkciókkal!

A felhasználói élmény egyik legfontosabb jellemzője, hogy mennyire tudnak az emberek összpontosítani a céljukra a weboldalad használata közben. Ha könnyen tudnak fókuszálni, akkor könnyebben elérik a céljukat. De ha a felületed túlterheli őket tartalmakkal, funkciókkal, akkor nem segíted őket azokkal, hanem elvonod a figyelmüket. Hogyan tudod mérsékelni a terhelésüket?

1. Távolítsd el a felesleget

Próbálj eltüntetni mindent a weboldaladról, ami felesleges. Legyen az plusz információ, vagy bármilyen plusz elem a felületen. Emlékezz a minimalizmus azon elvére, hogy a “kevesebb több”. Kövesd a minimalista esztétikát, és a weboldaladon csak a valóban elhagyhatatlan elemeket jelenítsd meg!

2. Rendezd sorrendbe a tartalmakat és a funkciókat!

Ne akarj mindent egyetlen oldalra zsúfolni. Alakíts ki tartalmakat prioritás szerint: rendezd el őket az alapján, hogy a felhasználóidnak milyen igényei vannak.

3. Oszd meg és uralkodj!

Ne feledkezz meg arról, hogy az emberi agynak korlátai vannak és szereti minél előbb elérni a célját. Érdemes ezért a hosszú és bonyolult űrlapokat többlépéses, de egyszerűbb és rövidebb egységekbe rendezni.

Ne kelljen találgatniuk a felhasználóknak!

A visszajelzések hiánya sok felhasználói felület tipikus hibája. Amikor az emberek elindítanak egy cselekvést, és nem kapnak erre semmilyen reakciót, akkor azt gondolhatják, hogy valamit elrontottak. Ezért újra és újra próbálkoznak. Hogyan lehet ezt megelőzni?

1. Vizuális visszajelzések

Azok az alkalmazások, melyek válaszolnak a felhasználói interakcióra, enyhítik a félelmüket.

2. Gyors betöltődés

Amikor az embereknek várni kell a tartalmak megjelenésére, akkor az akadályt jelent számukra a céljuk elérésében. Ha a betöltődés túl hosszú ideig tart, akkor elkezdenek aggódni, hogy történik-e valami vagy sem. Ezért meg kell tenned mindent, hogy csökkentsd az oldal betöltési idejét olyannyira, hogy az megfeleljen a felhasználói elvárásoknak a művelet gyorsaságával kapcsolatban.

3. Legyen a betöltési folyamat jól követhető

A hosszabb időt igénybe vevő műveleteknél tájékoztatni kell a felhasználókat arról, hogy meddig fog tartani a végrehajtás.

Legyen inkább érthető, mint okos

A könnyű érthetőségnek közvetlen hatása van a felhasználói várakozásokra. A jó felhasználói felület mindig összhangban áll a várakozásokkal és a már megszerzett tudással. Amikor az emberek tudják, hogy mire számíthatnak, akkor szívesebben használnak egy terméket. De hogyan teheted még világosabbá a weboldalad?

1. Érthetően címkézz!

Minden interaktív elemet, például a gombokat, olyan könnyen érthető címkékkel kellene ellátnod, melyek világosan leírják a funkciójukat.

2. Legyen a design következetes!

A következetlenség zavart okoz. Amikor ugyanazok az elemek eltérően jelennek meg egy weboldalon belül, akkor az megzavarja a felhasználókat. A következetesség viszont lehetővé teszi az emberek számára, hogy a már megszerzett tudásukra építsenek az interakció során.

3. Ha használj szakmai szövegeket!

Olyan szavakat használj, melyeket a felhasználóid is megértenek, így gond nélkül tudnak kapcsolódni a termékedhez.

4. Tedd egyszerűvé a navigációt!

A rossz navigáció vezet a leggyakrabban a felhasználók csalódottságához. Az embereknek lehetővé kell tenni, hogy könnyen elérjék a weboldal különböző részeit. Azzal is tisztában kell lenniük a használat közben, hogy éppen hol tartózkodnak a navigációs hierarchiában.

5. Használd ki a sablonokat!

Mindig, amikor az embereknek újra és újra meg kell tanulniuk, hogy valami hogyan működik, az akadályt jelent számukra. Viszont, ha a megszokott sablonokat használod, azzal csökkentheted a tanulási görbét. A felismerhető minták segítik az embereket abban, hogy könnyen megbirkózzanak összetett feladatokkal is.

Csökkentsd a lépések számát!

Ha az embereknek túl sok lépést kell megtenniük egy cél elérése érdekében, az felesleges akadályt jelent számukra. Minden egyes lépés további erőfeszítést igényel a részükről. Ezért fontos minden felesleges lépés eltávolítása a felhasználói útról.

1. Használd az alapértelmezett beállításokat!

Az alapértelmezett beállításokat ritkán változtatják meg az emberek.

2. Kínálj személyre szabott élményt!

Használd az adatokat, melyek a rendelkezésedre állnak, annak érdekében, hogy egy kellően személyre szabott élményt tudj nyújtani az embereknek. Például sok webáruház a korábbi vásárlásokat is figyelembe veszi az ajánlatainál.

3. Használd az automatikus kitöltést

Sok esetben automatikusan is kitölthetsz adatokkal bizonyos részeket a weboldaladon.

Előzd meg a hibákat, és kezeld őket nagyvonalúan!

Egy ideális weboldal vagy alkalmazás úgy működik, hogy nem tudnak rajta hibázni a felhasználók. Ilyen azonban a valóságban nem létezik. Tehát, amikor hiba csúszik a használatba a jó felületnek segítséget kell nyújtania a megoldásban, és arról is tájékoztatnia kell a felhasználót, hogy hol történt a hiba.

1. Számíts a lehetséges hibákra!

Ha alaposan végiggondolod a lehetséges hibákat, és ennek megfelelően alakítod ki a weboldalad, akkor jobb élményt kínálhatsz az embereknek a hibák bekövetkezésekor.

2. Egyből jelezd a hibát!

A felhasználói adatbevitelt minél előbb értékelned kell és világos visszajelzéssel kell szolgálnod. Ezzel érheted el, hogy a felhasználók könnyen azonosítsák és javítsák a hibákat.

Mikor lehetnek hasznosak az akadályok a weboldaladon?

Azt hiszed, hogy egy weboldal akkor a leghatékonyabb, ha a lehető legkönnyebben használható, és szinte siklanak rajta a felhasználók? Nos, nem egészen. Néhány akadály, némi nehézség csak még jobbá teheti.

Persze itt nem a rossz vagy elrontott webdesignról van szó. Hanem olyan akadályokról, melyeket meg kell tervezni. Mégpedig annak érdekében, hogy az eredmény még az áramvonalas UX-nél is jobb legyen a végén. Hogyan? Erre adta meg a választ a Usabilla blogjában Robyn Collinge.

Abból indul ki, hogy a UX-et általában akkor tartjuk ideálisnak, ha teljesen “akadálytalan”, “erőfeszítésmentes” a felhasználók szempontjából. Pedig lehet, hogy az emberek mást akarnak. Mondjuk akadályokat legyőzni. Ez pedig a Te szempontodból is jó, mert jobb és elégedettebb ügyfeleket szerzel.

Amikor az a gond, hogy túl könnyen megy minden

Erre egy példa az ‘50-es évek Amerikájából, amikor a General Mills létrehozott egy instant süteményport. Más dolguk nem is volt a háziasszonyoknak, mint vizet adni az előre csomagolt száraz összetevőkhöz, és megsütni. Ki ne akarná, hogy időt és energiát megtakarítva készítsen el egy egészen jó süteményt? Meglepetésre, az eladások nem alakultak valami fényesen. A cég persze nem értette miért, így felkért egy csapat pszichológust, hogy fejtse meg a rejtélyt.

Mint kiderült, a probléma az volt, hogy az átlagos amerikai háziasszonyok bűnösnek érezték magukat a kényelmes megoldás miatt. A Psychology Today beszámolója szerint a termék annyi időt és energiát spórolt meg, hogy a háziasszonyok azt érezték, becsapják a férjüket és a vendégeiket. Tulajdonképpen a süti annyira finom volt, hogy az emberek azt gondolták, a nők órákat töltöttek a tűzhely előtt az elkészítésével.

A Mills mindezek után kénytelen volt kissé kényelmetlenebbé tenni a terméket, hogy jobban fogyjon: már nem csak vizet kellett hozzá tenni, hanem egy tojást is belekeverni. Így az instant sütemény eladásai végre megindultak felfelé. Az emberek tehát szeretnek feladatokat végrehajtani, nehézségeket leküzdeni, a kérdés már csak az, hogy ez miért lehet jó Neked?

Az akadályok megelőzik a hibák elkövetését

Az egyik megoldás, hogy nehézségekkel találkozzanak az emberek a felhasználói út során, ha visszaigazolásokat kérünk tőlük. Egy felugró ablak láttán talán úgy érzik, az csak hátráltatja őket. De eggyel több lépés az úton megelőzi azt, hogy hibát kövessenek el. Ezt pedig hosszú távon méltányolni fogják.

Tehát, ha megerősítést kérsz tőlük egy e-mail elküldése előtt, az világossá teszi számukra azt, hogy a dolgok komolyra fordultak: innen már “nincs visszaút”. Ahelyett, hogy csalódottak lennének, még inkább tudatában lesznek a tevékenységük súlyának, így elkerülhetik a hibákat.

Az Amazon appjának felületén például a megrendeléshez egy kézmozdulat megtételére van szükség, ami éppen ellentétes azzal, mintha megérintenénk, megnyomnánk a gombot. Utóbbi esetében előfordulhat véletlen érintés, míg véletlen kézmozdulat kisebb eséllyel. Ez azt jelenti, hogy egy ideiglenes nehézség a felhasználót sok későbbi problémától mentesítheti.

Az akadályok jobb minőségű leadeket hoznak

Elsőre talán az tűnik logikusnak, hogy a terméked vagy szolgáltatásod olyan könnyű legyen használni, amennyire csak lehetséges. Ezzel szemben egy akadály révén jobb leadeket szerezhetsz. Mint Nick Babich rámutatott, egy akadály segítséget jelenthet az olyan weboldalak számára, ahol a felhasználók hozzák létre a tartalmat.

Csak vess egy pillantást arra a hosszú folyamatra, ahogy egy ügyletet feltölthetsz a Grouponra, vagy egy lakást az Airbnbre. A plusz akadályok révén éri el mindkét cég, hogy minőségi szolgáltatást tudjon kínálni, hiszen csak azok jelennek meg itt az ajánlatukkal, akik tényleg komolyan gondolják. Azt látjuk, hogy ami kezdeti nehézségnek tűnik, az végeredményben egy jobb szolgáltatáshoz, és még jobb felhasználói élményhez vezet.

Az akadályok ösztönözhetik a konverziót

Utazási oldalakon előfordul, hogy olyan szállásokat vagy repülőjáratokat hirdetnek, melyek már nem elérhetők, mert lefoglalták őket vagy minden jegy elkelt. Habár ez idegesítő lehet az emberek számára, mégis arra ösztökéli őket, hogy minél előbb lefoglalják a következő elérhető szállást vagy repülőjegyet, ahelyett, hogy még hosszasan keresgélnének jobb ajánlatok után, akár egy másik weboldalon. Ami problémának tűnik, tulajdonképpen gyorsabb konverzióhoz vezet.

Hasonló az a megoldás is, amikor úgymond “megszégyenítik” a felhasználókat azzal, hogy a felugró ablakban nem “kérem” vagy “nem kérem” opciók jelennek meg, hanem utóbbi helyett egy olyan üzenet áll, mely miatt rosszul érezhetik magukat. Ezzel a kis kellemetlenséggel – vagyis, hogy nehezebbé vált visszautasítani a cselekvést – jobb konverziós arány érhető el, bár akadnak akik úgy vélik (például a Nielsen Norman Group), hogy nem szabad ezzel a trükkel élni, mert rosszul érzik tőle magukat az emberek. De hát végül is ez a cél.

A lényeg pedig az, hogy a felhasználói élménybe csúsztatott kis döccenő – ami zavaró lesz mindenki számára, és rossz lesz a híre – végül is lehet, hogy jó hatással lesz mind a felhasználóidra, mind pedig rád nézve.

A jó webdesign nem terheli túl választási lehetőségekkel a felhasználót

Hick törvényének lényege: a választási lehetőségek száma befolyásolja a válaszadási időt. Ez pedig fontos tényező a webdesignban, és olyan mutatókat határoz meg, mint a visszafordulás, az aktivitás vagy az oldalon eltöltött idő.

Amikor 1951-ben William Edmund Hick és Ray Hyman közzétette eredményeit, akkor még valószínűleg nem sokan gondolták végig, hogy mennyire fontosak is lesznek azok az információ korában. Hick és Hyman törvénye ugyanis azt mondja ki, hogy minél több lehetőség közül választhatsz, az annál több időt vesz igénybe. Ez pedig érvényes az élet minden területén, többek között a webdesignban is.

Hick és Hyman leegyszerűsítve azt fedezte fel, hogy ha az embereknek több választási lehetőséget kínáltak fel, akkor a válaszidejük logaritmikusan nőtt. A logaritmikus ebből annyit jelent, hogy a választási lehetőségek növekedéséhez képest csökkenő mértékben nőtt a választáshoz szükséges idő (így aztán a görbe végénél már hiába nő a lehetőségek száma, alig nő az idő). Grafikonon ábrázolva ez így néz ki:

A vízszintes vonal a választási lehetőségek számát mutatja, míg a függőleges az időt. A görbén látható, hogy egyetlen elem kiválasztásához nincs szükség időre, azaz nulla az idő. Viszont, minél több a választási lehetőség, annál több időt vesz igénybe a döntés. A gyakorlatban – esetünkben a webdesignban – ez azt a problémát okozza, hogy ha nagyon hosszúra nyúlna az idő a választásnál, akkor a felhasználók részéről egyáltalán nem születik döntés. 

A weboldalak esetében négy olyan mutató van, mely összefüggésben áll Hick törvényével. Ezek a számok persze hatással vannak a forgalomra, a rangsorolásra a találati oldalakon, illetve legvégül a bevételekre. Lássuk ezeket egyenként!

Visszafordulás

A fő probléma itt az információs túlterhelés. Ha egy olyan weboldalra érkezel, mely lehetőségek döbbenetes mennyiségét kínálja egyből a főoldalon, akkor ott gyakorlatilag lefagysz, amikor megpróbálsz döntést hozni arról, hogy merre is indulj el. Így végül az lesz az egyetlen döntés, amit meg tudsz hozni, hogy elhagyod az oldalt. Ezért mondjuk mindig, hogy nem érdemes mindent egyszerre kipakolni a főoldalra.

Aktivitás

A felhasználók nem akarnak nehéz döntésekkel szembenézni, vagy túl sok időt tölteni olyan dolgokkal, mint egy űrlap kitöltése. Azt a tartalmat akarják látni, amiért megérkeztek az oldalra, mégpedig olyan gyorsan, ahogy csak lehet. 

Oldalon eltöltött idő

Ez a mutató azért érdekes, mert minél nagyobb a választható lehetőségek száma, annál több időt fog a felhasználó a weboldalon tölteni. Ugyanakkor kockázatos is a dolog, mert ha túl nagy a választási lehetőségek száma, akkor visszafordulnak.

Szubjektív felhasználói élmény

Sok esetben jóval fontosabb, hogy mit tapasztalnak a felhasználók, mint a számok.

Hol vehető figyelembe egy weboldalon Hick törvénye?

Mint láttuk, Hick törvénye fontos, ugyanakkor minden weboldalelemnél mégsem alkalmazható. Lássuk, hogy hol érdemes figyelni rá!

• Menüelemek csoportosítása – ha sok a választási lehetőség a menüben, akkor célszerű nagyobb kategóriákba rendezni őket.
• Kontraszt alkalmazása – kontrasztos színek, formák, méretek és felületek alkalmazásával világosabban megmutathatod a választási lehetőségeket. Ezáltal csökken a döntési idő és javul a felhasználói élmény.
• Célok átgondolása – a döntéshozási folyamat mindig egy céllal indul. Tisztában kell lenned a felhasználóid tipikus céljaival, és azt kínálni nekik, amit feltehetően választanának.
• Tesztek – ha nem akarsz tévedni, akkor tesztelj!

A kivételek, azaz ahol nem érvényes Hick törvénye, olyan helyzetek, melyek ismerősek a felhasználók számára, így tudni fogják a következő lépést.

• Megfelelsz a várakozásoknak – a gombok, linkek, információs hierarchia vagy az ikonok kialakításának megvan a megszokott módja. Ha a megszokott megoldásokat alkalmazod, azzal időt spórolsz a felhasználóidnak a döntésnél.
• Nem feledkezel meg a felhasználókról – mivel ismered a weboldalad, ezért te jól tudod használni, a felhasználók azonban nem így van vele. Ezért olyan emberekkel kell tesztelni a használhatóságát, akik nem ismerik az oldalt. 

Ez lenne tehát a lényeg, és a megoldás egyrészt az, hogy csökkented a választási lehetőségek számát, másrészt elrendezed őket, hogy fokozatosan találkozzanak velük a felhasználók, harmadrészt pedig mindezt világosan, logikusan, a felhasználóid elvárásaival összhangban teszed. 

A jó webdesign figyelembe veszi a közelség elvét

A bejegyzés elején már ejtettünk szót a Gestalt-elvekről, melyek a webdesign esetében is működnek. Most ezek közül lássuk részletesebben a “közelség elvét”!

A XX. század első felében született Gestalt-elvekkel azt próbálták meg leírni a pszichológusok, hogy miként érzékelik az emberek az őket körülvevő világot. A Gestalt-elveket korábban már érintettük, olyan fogalmak tartoznak ide, mint a hasonlóság, a folytonosság, az alak és forma, szimmetria, rend, vagy a közelség. Itt elsősorban arról van szó, hogy miként döntik el az emberek bizonyos elemekről, hogy azok részei egy csoportnak vagy sem.

Mindez fontos a digitális felületek vizuális designjánál is. A UI design ugyanis erőteljesen épít a közelségre, illetve minden olyan elvre, mely befolyással van arra, hogy mit tekintenek a felhasználók egy csoportnak: azaz, hogy milyen elemek kapcsolódnak össze, kritikus tényező a felületekkel történő interakcióknál.

Mi az a közelség elve?

A közelség elve azt mondja ki, hogy az egymáshoz közel található elemek valószínűleg egy csoport részeinek tekinthetők, így hasonló a funkcionalitásuk vagy a tulajdonságaik. A közelség az egyik legfontosabb elv a csoportosításnál, mely megelőz olyan elveket is, mint a színek vagy formák hasonlósága. Érdemes egyébként ezzel kapcsolatban megnézni egy ábrát, ahol a különböző formák hatását felülírja a közelség elvét kihasználó csoportosítás.

A gyakorlatban a közelség elve úgy jelenik meg a UI designban, hogy a kapcsolódó elemeket egymás mellé helyezzük, míg a nem kapcsolódó elemeket elkülönítjük ezektől. Itt lép be a képbe a már sokszor emlegetett whitespace vagy negatív tér, mely biztosítja ezt az elkülönítést. Hogy jelenik meg ez a gyakorlatban? Az alábbi ábrán egy weboldal fejléce látható, ahol a keresés ugyan egy sorba került a navigációval, azonban a negatív tér segítségével két csoportot képeznek belőle, mely jelzi, hogy eltérő funkciókról van szó.

De a közelség megjelenik egy jól formázott szövegtörzsben is, ahol bekezdésekbe rendezzük a mondatokat, és ezeket a bekezdéseket negatív tér választja el egymástól, ahogy ebben a blogbejegyzésben is. Amennyiben a címsorok esetében is megfelelően alkalmazzuk a közelség elvét és a whitespace-t, akkor az is világosan látszik, hogy melyik címsor melyik bekezdéshez kapcsolódik, hiszen a címsor közelebb helyezkedik el a vonatkozó bekezdéshez, és távolabb a nem kapcsolódó bekezdéstől.

A közelség ugyanúgy megjelenhet az űrlapok designjában is: a kapcsolódó mezők egy csoportba rendezhetők, ahogy arról az űrlapok kialakításánál is írtunk. Ezáltal az űrlap jobban áttekinthetővé válik, és kevésbé ijesztő a kitöltése. Tehát, míg egy 12 soros űrlap túl nagynak tűnik, addig három részre bontva ugyanez az űrlap sokkal barátságosabb képet mutat.

Hol hibázhatsz a közelséggel?

Ha nem egy nem kapcsolódó elemet helyezünk el egy csoportban, azzal gyakorlatilag elrejthetjük azt a felhasználók elől. De amikor a felhasználók nem találnak meg egy linket, egy gombot, vagy akár valamilyen információt, pedig ott van az orruk előtt, akkor azért is a közelség elve okolható, illetve annak megértésének hiánya.

A feladatukra összpontosító felhasználók ugyanis azt gondolják, hogy a releváns információk egybe vannak rendezve az oldalon. Ha viszont ezek nagy távolságokra szét vannak szórva, akkor úgy fogják érzékelni, hogy az oldalon nem találnak meg semmit. Ennek oka a “csőlátás”, vagyis, hogy a felhasználók fontos feladatok elvégzésénél egy helyre figyelnek, és nem látják, ami azon kívül esik.

Erre jó példa az alábbi oldal, ahol a felhasználók mind arra panaszkodtak, hogy az app használatához muszáj bejelentkezniük, pedig csak egyszerűen nem vették észre a bal felső sarokban található “Skip” gombot, mert az igen messze esik a fő CTA-tól, vagyis a bejelentkezéstől. Ezzel szemben, ha a Skip egyből a CTA-gomb alatt kap helyet, akkor nem lenne ilyen gondjuk.

A közelségre külön kell figyelni a reszponzív felületek tervezésénél, ugyanis ahogy a weboldal igazodik a különböző kijelzőméretekhez, úgy változhat a csoportosítás. Egy kisebb kijelzőn lecsökkenhet például a távolság bizonyos nem kapcsolódó elemek között, míg kapcsolódó elemek távolra kerülnek egymástól. Ezzel pedig a weboldal értelmezhetetlenné válik.

Összességében tehát elmondható, hogy a megfelelő csoportosítás a közelség elvének figyelembevételével jelentős mértékben javítja egy weboldal vagy egy app használhatóságát. Így ugyanis a felhasználók könnyebben megtalálják az őket érdeklő információkat, és hatékonyabban összpontosítanak kizárólag azokra az elemekre, melyek az épp aktuális feladatukhoz kapcsolódnak.

A jó webdesign figyelembe veszi a hasonlóság elvét

A közelség elvének bemutatása után egy másik fontos Gestalt-elvre hívnánk fel a figyelmet a Nielsen Norman Group egy újabb alapos cikke alapján: ez pedig a hasonlóság elve.

Az elv lényegében azt mondja ki, hogy azokat a tárgyakat, melyek vizuális jellemzői hasonlóak, kapcsolódónak érzékeljük, ellentétben az eltérő megjelenésű tárgyakéval. A következetesen alkalmazott vizuális szabályok ezért rendkívül fontosak abban, hogy segítsenek a felhasználóknak megérteni és használni egy weboldalt. Hiszen minden interakció során kialakulnak várakozások a felhasználókban azzal kapcsolatban, hogy a hasonló elemek miképpen működnek.

A hasonlóság elve miatt itt sorok helyett oszlopokat látunk. Ha sorban lennének azonosak az elemek, akkor sorokat látnánk.

A hasonlóság elve az egyike az első vizuális csoportosítási elveknek a közelség elve mellett, melyet a Gestalt pszichológusai fogalmaztak meg. Ezek a pszichológusok azt próbálták megérteni, miként fogadják be az emberek a világot és miként döntenek arról, hogy bizonyos dolgok egy csoportba tartoznak.

A hasonlóság elve szerint tehát, amikor elemek vizuális karakterisztikája hasonló, akkor azt feltételezik, hogy azok kapcsolatban állnak egymással. Az elemeknek nem kell tökéletesen egyezőnek lenniük, mindössze legalább egy vizuális jellemzőjüknek kell megegyezni. Ez lehet

• szín
• forma
• méret

A hasonlóság elve akkor is működik, ha az elemeknek eltérő az elhelyezésük. A hasonlóság elve azonban nem feltétlenül a legerősebb csoportosítási elv, mivel a közelség vagy az azonos elhelyezés felülírhatja, ugyanakkor a legrugalmasabbnak számít.

A szín

Egy szín alkalmazása jól jelzi, ha bizonyos elemek összetartoznak, így pedig feltételezhetően azonos a funkciójuk. A szín erősebb, mint más jellemzők, így például a forma, ahogy ezen a képen is látszik:

A felhasználói felületek designjában a színt gyakran használják az azonos funkció jelölésére. Ilyen például, amikor a kattintható elemek, például a linkek, mindig azonos színűek. A szín maga jelzi, hogy kattintható elemről van szó. Fontos azonban, hogy amikor egy kattintható elemet valamilyen színnel jelölünk, akkor azzal a színnel ne jelöljünk például olyan ikonokat vagy címsorokat, melyek nem kattinthatóak.

Az azonos színű gombok ráadásul azonos fontosságot is jeleznek, így ha egy eltérő színű gombot használunk, akkor az a másodlagos fontosságot jelöli.

A forma

A felhasználói felületeken gyakran alkalmazzuk ugyanazt a négyzet alakot, ha azt akarjuk jelezni, hogy egy gombról van szó, ezzel erősítve közöttük a kapcsolatot. Amikor azt látjuk, hogy bizonyos elemek azonos formát vesznek fel, akkor egyébként azt feltételezzük, hogy valóban azonos a funkciójuk. Ez akkor okoz problémát, amikor azonos formájú elemeknek más a funkciójuk egy weboldalon belül.

Itt azonos ikon jelenik meg eltérő linkeknél:

Az NNG egyébként egy korábbi vizsgálatában megállapította, hogy a felhasználók sokkal gyorsabban megtalálnak egy elemet egy listában, ha annak egyedi a formája. Ha az elemek nagyon hasonlóak, akkor sokkal tovább tart átfutniuk a listát és megtalálni a keresett elemet.

Méret

A méret szintén jelezhet elemek között kapcsolatot. Azok az elemek, melyek hasonló méretűek a felhasználók szemében valószínűleg azonos fontosságúnak tűnnek. A felhasználói felületeken gyakran használjuk a méretet azon célból, hogy egy elem fontosságát jelezzük. Az azonos méret azonos fontosságot jelez. A méret következetes használata pedig megteremti a vizuális hierarchiát, mely által a weboldal könnyebben áttekinthető, megérthető.

Persze nem csak a szín, a forma vagy a méret mutathat hasonlóságot elemek között, így például szövegek esetén a vastag vagy dőlt betűs szedés is kapcsolatra utal elemek között. De ugyanígy a tájolás vagy akár a mozgás is kapcsolatot jelez. Látható tehát, hogy a hasonlóság elve teljesen áthatja a vizuális designt, minden egyes weboldal esetében érvényes és működik. Ha nem tudatosan tervezünk a hasonlósággal, akkor zavart okozhat a felhasználókban a weboldalunk, míg gondos tervezésnél javítja a használhatóságot.

A jó webdesign figyelembe veszi Fitts törvényét

Fitts törvényét még jóval a web-korszak előtt alkotta, ennek ellenére igen hasznos figyelembe venni mindenféle digitális felhasználói felület megtervezésénél.

1954-ben egy Paul Fitts nevű pszichológus közzétett egy cikket, melyben részletezte empirikus modelljét a sebesség és a pontosság közötti kapcsolatról az emberi mozgásban. Fitts megfigyelése szerint egy célpontra történő rámutatás vagy annak érintése mérhető, és alkotott egy matematikai modellt, mely leírja, hogy az emberek milyen gyorsan képesek kiválasztani egy célpontot.

Fitts törvénye kimondja, hogy egy cél eléréséhez szükséges idő függ a cél méretétől és annak távolságától. Ez matematikai képletként így néz ki:

MT=a+b*log₂(2D/W)

• az MT – az átlagos idő egy mozgás befejezéséhez és egy célpont kiválasztásához
• az a és b – az eszköz típusától függő állandók
• a D – a mozgás távolsága az indulástól a célpont középpontjáig
• W – a cél szélessége a mozgás tengelye mentén

Ezek között a fontos változók a cél és a célpont távolsága. A célpont pedig az, amivel a felhasználó interakcióba kerül. A weboldalakon ez lehet egy gomb, egy űrlapmező, bármi, amit meg kell érinteni, vagy kattintani lehet rá.

A távolság azt jelenti, hogy milyen messze van a célpont attól a ponttól, ahonnan a felhasználó megkezdi a cselekvést. Ebből következik, hogy a nagyobb célpontok esetén, melyek közel helyezkednek el a felhasználóhoz, alacsony az interakciós költség, míg távoli és kicsi célpontok esetében nagy. 

1954-ben persze ennek a törvénynek még semmi köze nem volt a számítógépekhez, mobilalkalmazásokhoz, azonban a jelen designerei könnyen megérthetik a törvény fontosságát a digitális felületek tervezésekor. Emiatt vált Fitts törvénye alapvető fontosságúvá az ember-számítógép interakcióknál, és az egyik leginkább elfogadott irányelvvé az iparágban. 

Hogyan kapcsolódik Fitts törvénye a UX és UI designhoz?

Fitts törvénye széles körűen alkalmazható a felhasználói élmény (UX), illetve a felhasználói felületek tervezésénél (UI) is. Ennek a törvénynek a hatására nőttek meg a felhasználói interakciókban részt vevő gombok, különösen a mobiltelefonoknál, hiszen a designerek megértették, hogy a kisebb gombokat nehezebb és hosszabb ideig tart elérni. Ugyanígy a távolságnak is a lehető legkisebbnek kell lennie a felhasználó feladati területe és a feladattal kapcsolatos gomb között.

Amikor az egérmutató vagy az ujjad messze jár egy kisméretű call to action gombtól, akkor nagyon precíznek kell lenned ahhoz, hogy pontosan a gombra kattints, ez pedig növeli az időt és a ráfordított energiát. Viszont, ha az egérmutató közel esik egy nagy CTA-hoz, akkor könnyebben jön létre az interakció, ami nagyban segíti a felhasználó dolgát. 

Mit jelent ez a gyakorlatban:

• például egy űrlap kitöltésénél a gombnak közel kell lennie a kitöltött űrlapmezőhöz, mert innen fog átlépni a gombhoz a felhasználó.
• illetve azt, hogy a fontos CTA-nak nagynak kell lennie, hogy könnyebben érinthesse a felhasználó.

Fitts törvénye könnyen érthető modell és mindenkinek tisztában kell lennie vele, aki weboldalt tervez. Ha azt akarod, hogy a felhasználó kapcsolatba lépjen a felület egy elemével, akkor vedd figyelembe a törvényt és tedd a célpontot gyorsan elérhetővé és könnyen használhatóvá. Hiszen a törvény szerint egy nagyobb és közelebbi célpontot könnyebben elér a felhasználó, mint egy távoli és kisebb célpontot. És minél nagyobb a célpont, annál kevesebb idő kell a cselekvés végrehajtásához, ezáltal pedig alacsonyan tartható az interakciós költség.

Frissítés, 2022.06.16.:

A jó webdesign figyelembe veszi a zártság elvét

A zártság elve a gestaltpszichológia egyik alapelve, mely arról szól, hogy az emberek hajlamosak egy felületen az üres részek kitöltésével meglátni alakzatokat.

Definíciója szerint a zártság elve azt mondja ki, hogy az emberek hajlamosak kitölteni az üresen maradt tereket, hogy ezáltal egy teljes alakzatot kapjanak, ha az részben egyezik egy létező alakzattal. Vagyis, amikor hiányzik valamilyen információ, akkor ezt a hiányt gondolatban kitöltjük, hogy egy teljes tárgyat lássunk.

Ha ez így még nem érthető, akkor itt egy klasszikus ábra, melynek révén világossá válik, miről is van szó:

A zártság elve tehát az embernek azon vágyát fejezi ki, hogy egésznek lásson töredezett vizuális elemeket, az információs hiány ellenére. Az elv a leggyakrabban a logódesignban jelenik meg, de az ikonoknál vagy a weboldalak bármely eleménél felbukkanhat az alkalmazása.

A fenti példákban is azt látjuk, ahogy kirajzolódik egy-egy forma a logókban, annak ellenére, hogy nincsenek körvonallal ábrázolva: az NBC esetében a páva, a FedEx logójában a nyíl, a WWF-nél a panda, míg a Major League Baseball logójában a játékos.

De ugyanígy megjelenhet ikonoknál is, csökkentve azok összetettségét. Ugyanakkor nem árt tesztelni, hogy vajon a felhasználók értik-e, mit akar ábrázolni az ikon, vagyis látják-e az alakzatot, melyet szándékaink szerint elhelyeztünk benne. Ilyen például a Google Diák esetében a kör és a négyzet alakzat, ahol a négyzetet nem látjuk, mégis tudjuk, mit ábrázol.

Mire használhatják a designerek a zártság elvét?

Az elv két módon használható a vizuális designban:

• egyrészt utalásként egy további tartalom létezésére,
• másrészt interakciók elősegítésére.

A képgalériák, karuszelek a zártság elvét használják ki, amikor egy elemnek, általában egy képnek csak egy részét mutatják meg. Ilyenkor a felhasználó gondolatban kiegészíti a nem teljesen látható képet, annak ellenére, hogy a részleteit nem látja. Ez tehát arra utal, hogy további elemek is elérhetők, melyek a kijelző szélén túl helyezkednek el, megtekintésükhöz pedig csak oldalra kell csúsztatni a galériát.

Hiszen, ha nem így jelenne meg, hanem teljesnek tűnne a felhasználó számára, akkor a teljesség illúzióját kapná, így nem keresne újabb képeket. A nehézséget a gyakorlatban általában az okozza, hogy az eltérő kijelzőméretek miatt nem mindig lehet tudni, hogy miként jelenik meg a karuszel egy adott felhasználó számára: teljesként tűnik fel, vagy nem teljesként.

Ez azért fontos, mert a zártság elve persze nem minden esetben működik. Amikor levágod a tartalom vagy valamely weboldalelem nagy részét, akkor nem feltétlenül fogja azt kommunikálni, hogy a felhasználónak görgetnie vagy csúsztatnia kell a kijelzőn. A túl kevés információ esetében a felhasználó nem tudja kitölteni a hiányt, így nem fog működni a zártság elve. Figyelni kell tehát arra, hogy mekkora a látható rész, lehet-e következtetni belőle a további részekre.

A lényeg tehát, hogy amikor nem teljes alakzatokat és információkat jelenítesz meg, akkor a felhasználók a hiányzó részeket a képzeletükkel pótolják. Egy weboldalon vagy alkalmazásban a zártság elve leegyszerűsíthet vizuális elemeket és további információkra tesz utalást, miközben bátorítja a felhasználói interakciót.

Frissítés, 2021.10.07.:

A jó webdesign segíti a felhasználók térbeli emlékezetét

Fontos dolgok térbeli elhelyezkedésének visszahívása lényeges jellemzője az emberi memóriának. Kihasználjuk ezt a grafikus felhasználói felületeken is, mivel lehetővé teszi a felhasználók számára, hogy gyorsan azonosítsanak elemeket, anélkül, hogy időigényes vizuális keresést kellene minden alkalommal végrehajtaniuk.

Egy felületen történő keresés ugyanis lassú és fáradtságos folyamat, melynek gyorsítása sokat jelent a felhasználói hatékonyság szempontjából. Gondolj csak arra, amikor egy új helyre költözöl, vagy egy nyaralás alkalmával egy idegen apartmanban próbálod meg a mindennapi dolgokat megtenni. Ilyenkor minden, egyébként rutincselekvés több időt, nagyobb erőfeszítést igényel, nehézkessé válik. Ha pedig valami nincs meg, neki kell állni keresni minden lehetséges helyen, ami elég komoly mentális erőfeszítéssel jár, legalábbis ahhoz képest, mint amikor a saját otthonodban tevékenykedsz.

Ilyen esetekben is segít persze egy jó információs architektúra, de teljesen nem oldja meg a problémát. De hogyan használhatjuk ki a weboldalunkon a felhasználók térbeli emlékezetének lehetőségeit?

Mi az a térbeli emlékezet?

Először is azt érdemes tisztázni, hogy a térbeli emlékezet annak a képessége, hogy megjegyezzük bizonyos tárgyak helyzetét azáltal, hogy többször is interakcióba lépünk velük. A grafikus felhasználói felületeken a térbeli emlékezet lehetővé teszi az automatizálásnak egy bizonyos szintjét, ha a felhasználók gyakran vesznek igénybe bizonyos funkciókat.

A térbeli emlékezet kihasználásához két dolog szükséges. Az egyik a nem változó felhasználói felület, ahol az egyes elemek nem mozognak (túl sokat), illetve a másik az egyes elemek többszöri elérése a felhasználó által.

Ember-számítógép interakciós kutatásokból tudjuk, hogy a térbeli emlékezet a határokhoz és tereptárgyakhoz viszonyít. Tehát, amikor egy papírtérképen keresel valamit, és mondjuk a térkép alsó részén találod meg, akkor ha legközelebb megint elő kell keresni a helyet a térképen, a térbeli emlékezeted a térkép széléhez való viszonyt rögzítette, így ez határozza meg, hogy hol keresd a helyet.

A weboldalakra nézve ebből két következtetést tudunk levonni. Az egyik az, hogy a világosan meghatározott, egyértelmű vizuális jelzésekkel jelölt elemek kulcsszerepet játszanak a térbeli emlékezet kialakításánál. A másik az, hogy amikor a nézet mérete változik (mert mondjuk más lesz a böngészőablak mérete), az elemeknek lehetőleg ugyanazon a helyen kellene elhelyezkedniük a határvonalakhoz viszonyítva.

Utóbbi egyébként azt jelenti, hogy ha a böngészőablak átméretezése hatására megváltozik az elemek elrendezése, akkor az komolyan megzavarja a felhasználót egyes elemek megtalálásában. Ez csak akkor nem gond, ha a felhasználók nem túl gyakran látogatják a weboldaladat vagy az alkalmazásodat, vagy ha mindig ugyanolyan nézetet használnak.

A határvonalak mellett ugyanakkor fontosak a tereptárgyak is, ha egy elem helyzetét kell rögzíteni a memóriánkban. Általában az ilyen tereptárgyakat használjuk arra, hogy meghatározzuk a saját helyzetünket. A felhasználói felületeken a felhasználók emlékeznek arra, hogy egy elem mondjuk közel volt a keresőmezőhöz.

Ugyanakkor a tereptárgyakat nem csak elemek helyzetének rögzítésére használunk, hanem ezekhez az elemekhez történő navigációra is mind két-, mind pedig háromdimenziós környezetben. Tehát, amikor egy idegen városban vagy, de vissza kell találnod a szállodádhoz, akkor a térbeli emlékezet segít ebben a tereptárgyak azonosítása révén (már ha nem használod a gps-t). Ezeknek a segítségével olyan dolgokat is megtalálsz, melyek adott pillanatban nem is láthatók.

A térbeli memória ugyanakkor nem működik tökéletesen: a felhasználók csak megközelítőleg emlékeznek egy-egy elem helyzetére, kivéve, ha nagyon gyakran használják azt. A dolgot tovább bonyolítja, hogy minden ember térbeli emlékezete eltérő hatékonyságú. Ugyanakkor elegendő ismétlés esetén a gyakran használt elemek helyzetére emlékezni fognak általában a felhasználók.

Hogyan segítsd a felhasználók térbeli emlékezetét?

Az előbbiekből tehát láttuk, hogy mi segít a felhasználóknak egyes elemek helyzetének meghatározásában a weboldalakon. Ugyanakkor figyelembe kell venni más UX tényezőket is egy felület tervezésénél, így például a tanulhatóságot, a hatékonyságot, vagy akár a teljes elégedettséget, melyek szemben állhatnak a térbeli emlékezet kihasználásával.

A másik dolog, hogy a térbeli emlékezetre akkor érdemes optimalizálni, ha vannak olyan felhasználók, akik rendszeresen használják az adott weboldalt vagy alkalmazást. Ilyenkor különösen fontos, hogy ne változzon a legfontosabb funkciók és tartalmak helyzete. Az olyan weboldalak esetében viszont, melyeket a felhasználók csak olykor-olykor látogatnak meg, nem jelent olyan fontos tényezőt a térbeli memória kihasználása.

Kerüld az adaptív felületeket!

Az adaptív felületek jellemzője, hogy újrarendezik a felhasználói felület elemeit a felhasználók várható igényeire tekintettel. A legtöbb ilyen adaptív felület egyébként nem működik igazán jól, pont azért, mert akadályozzák a felhasználók térbeli emlékezetének használatát, fejlődését.

Ugyanakkor vannak olyan adaptív felületek, melyek nem teszik ezt: ilyen, amikor egy lenyíló menüben a gyakran használt elemek legfelülre kerülnek. Érdemes azonban ebben az esetben is nem csak legfelül megjeleníteni elemet, hanem a szokásos helyén is.

Emeld ki!

Mivel a térbeli emlékezet nem működik pontosan, ezért nem érdemes kizárólag rá hagyatkozni egyes elemek megtalálásánál. Érdemes olyan szöveges vagy vizuális jelzéseket még elhelyezni, melyek segítenek az elemek azonosításában a felhasználóknak. Ez a gyakorlatban például azt jelenti, hogy ikonok mellé címkét is helyezel vagy egy kontrasztos színt adsz neki, ami kiemeli a többi elem közül. Ha ehhez az eszközhöz nyúlsz, akkor igyekezned kell elkerülni, hogy a felület zűrzavarossá váljon.

Használj lapos hierarchiát!

Amikor a térbeli emlékezetre építesz, akkor a legjobb, ha valamennyi információ egyszerre átlátható. Ezáltal a felhasználók minden elemet látnak, illetve a számukra fontos elem ezekhez viszonyított helyzetét is. Ez persze nem járható út, ha szűkös a hely vagy sok az információ, és csak lelassítja a keresést, ha nagyon sok lehetőséget kínálsz a felhasználónak. Kompromisszumként ilyenkor jelennek meg például a hierarchiába rendezett legördülő menük, melyek nem foglalnak helyet, mégis jelen vannak.

A hierarchia ugyanakkor két okból sem hatékony elemek megtalálásánál: az egyik oka, hogy lassítják a felhasználót (hiszen le kell nyitnia a menüt a keresett elem megtalálásához), a másik, hogy az információs tér egy jelentős részét takarják, ami viszont rontja a térbeli emlékezetet. A leghatékonyabb egy széles, de lapos hierarchia kialakítása lehet.

Jeleníts meg áttekintést az információs térről!

Nagy mennyiségű adat nem fér ki a kijelzőkre, ezért görgetésre kényszeríti a felhasználót. Ez viszont akadályozza a térbeli emlékezet felépítését az adott oldalra vonatkozóan. Ezért érdemes bevetni olyan vizualizációs technikákat, mint a térképek vagy miniatűr nézetek. Ezek segítenek nem csak a vizuális emlékezet kialakításában, hanem abban is, hogy feldolgozzák az emberek a sok információt.

Helyezz el tereptárgyakat!

Különösen a adatokkal teli, rendkívül összetett alkalmazások esetében fontos, hogy szándékosan elhelyezz tereptárgyakat, melyek segítik a visszatérő felhasználókat a tájékozódásban. Ilyen lehetnek a színes pontok, vagy a változó színek a tartalomban és az áttekintésben. Ezek úgy működnek, mint a könyvjelzők vagy szamárfülek egy könyvben.

Összességében tehát elmondható, hogy a térbeli emlékezet fontos a hatékony feladatvégzéshez visszatérő felhasználók esetében. A térbeli emlékezetet az ismétlések építik, ha rendelkezésre áll egy stabil, nem változó felület. Használatával csökken a kognitív erőfeszítés mértéke, amikor egy fontos funkciót vagy tartalmat kell megtalálni.

A térbeli emlékezet ugyanakkor nem pontos, ezért a felhasználók számára más vizuális jelzések is kellenek, illetve érdemes áttekintést kínálni nekik a teljes információs térről, valamint egy lapos, de széles hierarchiát használni.