Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2017-09-100 komment

Mi a gond a flat gombokkal és linkekkel? És van-e megoldás?

A flat design ugyan eredetiként hatott a szkeuomorf világ után, azonban egyes elemei nem felétlenül segítik a felhasználói élmény javítását, inkább kihívást jelentenek az embereknek. Most egy kutatás révén kiderült, hogy milyen problémákat okozhat a flat kialakítás egy weboldal használata során, és hogyan használhatjuk jól a flat designt.

A Nielsen Norman Group futott neki egy vizsgálatnak a flat designnal kapcsolatban. Róluk tudjuk, hogy elsősorban a konvencionális megoldások hívei a webdesignban, ami talán unalmas a designerek és sok ember számára is, viszont állításaikat alá tudják támasztani. Korábban már érintettük azt is, hogy az NNG szerint egy gombnak, mely kattintható, annak úgy is kell kinéznie, most azonban itt vannak a részletek, hogy miért és mekkora problémát okoz, de még az is kiderül, hogy mikor nem gond a flat design.

A flat felületek és a gyenge jelzések

Az NNG szerint a flat design használata a digitális felületeken az egyértelmű jelek hiányával jár együtt. Azok a weboldalak, melyek flat designt használnak, eltávolították azokat az egyértelmű jelzéseket, melyekre az emberek támaszkodtak annak megállapítása során, hogy mi kattintható az oldalon. Vizsgálataik során arra voltak kíváncsiak, hogy miként befolyásolja a kattinthatósági jelzések erőssége azt, ahogy a felhasználók feldolgozzák és megértik a weboldalakat.

Abból indultak ki, hogy több tényező befolyásolja, hogy miként lép kapcsolatba a felhasználó egy felülettel. Ahhoz, hogy meg lehessen állapítani, hogy a jelzések különböző erősségének milyen hatása van, az egyéb befolyásoló tényezőket el kellett távolítani. Vettek tehát 9 darab weboldalt, és mindegyikből kialakítottak két, majdnem teljesen azonos verziót: a különbséget az jelentette, hogy erős vagy gyenge volt az interaktív elemek – úgy mint gombok, linkek – jelzése. Ez bizonyos esetekben azt jelentette, hogy flat designnal készül oldalakhoz adtak hozzá árnyékokat és gradienseket, míg más oldalakon a tradicionális elemeket alakították át a flat design szabályai szerint.

A további részletekbe nem mennénk bele, ezek elérhetők az NNG kutatásról szóló beszámolójában. A lényeg, hogy a résztvevőknek jelezniük kellett, mikor veszik észre a kapott feladat végrehajtásához szükséges gombot, miközben figyelték tekintetük mozgását. Így aztán tanulságos heatmapek is kirajzolódtak, melyeken jól látható, hogy hogyan nézelődnek a weboldalakon. Ami még fontos, hogy minden résztvevő csak a kétféle weboldal egyik verzióját látta. A cél pedig az volt, hogy megállapítsák: milyen könnyen találják meg a cél-elemeket a felhasználók (nem pedig az, hogy rámutassanak a használhatósági problémákra).

Az eredmények

Nem túl nagy meglepetésre, kiderült, hogy az átlagos idő, melyet az emberek az egyes weboldalelemek keresésével töltöttek, szignifikánsan – 22 százalékkal – több volt a gyenge jelzéseket alkalmazó weboldalakon. Mérték a megtorpanások számát is, ami 25 százalékos eltérést mutatott.

Mindez azt jelenti, hogy a gyenge jelzéseket használó weboldalakon az emberek sokkal több időt töltenek a weboldal nézegetésével, és több elemet kell átnézniük rajtuk egy feladat végrehajtása érdekében. Ez a több eltöltött idő ugyanakkor nem azt jelenti, hogy a felhasználóknak tetszik az oldal, hanem azt, hogy kihívást jelent számukra beazonosítani elemeket, illetve nem biztosak benne, hogy megtalálják azokat, amikor először rájuk pillantanak.

Arra azonban az NNG is felhívta a figyelmet, hogy a feladatok nagyon specifikusak volt, és a csak egy kis szeletét jelentették a weben valóban elvégzett feladatoknak. Általában, amikor az emberek a webet használják, a valóségban több időt töltenek a feladatok egyéb vonatkozásaival, például azzal, hogy elolvassák a kapcsolódó információkat. Amennyiben ezeket is hozzáadjuk az oldalon eltöltött időhöz, akkor a teljes feladatra (például egy pár cipő megvásárlása) vonatkozó lassulás már kisebb lesz, mint 22 százalék.

Másrészt viszont ott a kattintási bizonytalanság, melynek megnövekedése azt jelenti, hogy az emberek időnként nem oda kattintanak, ahova szerettek volna. Ezt azonban nem mérték a kutatásban. Ugyanakkor a hibás kattintások korrekciója igen sok időt képes felemészteni, különösen, ha a felhasználók nem jönnek rá azonnal, hogy hibáztak. Az időveszteség mellett ilyenkor megjelenik a bizonytalanság érzelmi hatása is, ami végül is azt jelenti, hogy egy rossz felhasználói élmény a márkáról kialakult képet is negatív irányba befolyásolja.

Hőtérképek

Az NNG szerint a 9 pár oldal közül 6 esetében volt megfigyelhető eltérés a felhasználók tekintetének mozgásában. Ebből azt a következtetést vonták le, hogy a jelzések megváltoztatják azt, ahogy az emberek feldolgoznak egy weboldalt egy feladat végrehajtása során. Alapvetően egyébként az volt látható, hogy a gyengébb jelzéseket alkalmazó oldalaknál a felhasználók többet nézelődtek, vagyis több volt a megtorpanás és az oldalon eltöltött idő. Itt látható egy hőtérkép, melyről minden világossá válik:

Mindez azt jelenti, hogy a résztvevőknek több lehetséges elemet is meg kellett vizsgálniuk a gyenge jelzéseket alkalmazó oldalakon. Nyilvánvalóan azért, mert ezeknek a jelzéseknek nincs meg ugyanaz az erejük, amivel felkelthetnék az emberek figyelmét, illetve meggyőzhetnék őket, hogy jó helyen próbálkoznak. Gyakran azt tapasztalták a kutatók, hogy az emberek ugyan megtalálták a célként megjelölt elemet, azonban a tekintetük tovább mozdult, mivel nem ismerték fel azonnal, hogy az lenne a feladat megoldása.

Mikor működhet a flat design?

Ugyanakkor viszont a 9-ből 3 oldal esetében nem volt különbség a felhasználók tekintetének útvonala között a gyengébb és erősebb jelzéseket alkalmazó weboldalak között. Ez azért fontos, mert rámutat arra, hogy mely esetekben működőképes a flat design. Az egyik ilyen ez az oldal volt:

Az első verzióban a hagyományos, aláhúzott kék linkek szerepeltek, míg a másikban a linkek lilával voltak jelölve. A kutatók szerint a kettő egyforma teljesítménye valószínűleg annak köszönhető, hogy megfelelő volt a színkontraszt a szöveg és a link között. Amikor egy másik weboldalon világosszürkét használtak linkelt szavaknál, jelentős mértékben eltért a felhasználói tekintetek útvonala a két verziónál. A következtetésük tehát az, hogy amíg a szövegben szereplő linkek kellően kontrasztosak, addig a felhasználók felismerik a szerepüket, még akkor is, ha nincsenek aláhúzva.

A másik két eltérő, mégis egyforma heatmapet produkáló oldal esetében pedig az alábbi közös jellemzőket találták:

  • Alacsony információsűrűség. Vagyis az oldalak viszonylag kevés szöveget tartalmaztak, nagy whitespace-szel. Ez pedig azt jelenti, hogy a más módokon nem megkülönböztetett elemek figyelemfelkeltőek amiatt, hogy nem kell versenyezniük egyéb elemekkel.
  • Hagyományos layout. Az elemek (gombok, linkek, navigáció) a megszokott helyen jelentek meg, ott ahol az emberek általában keresik őket.
  • Feltűnő, kontrasztos célpontok. A cél-elemek kontrasztosak voltak az őket körülvevői elemekhez képest, ráadásul jelentős tér választotta el őket a többi elemtől. Ezáltal sokkal könnyebben felhívták magukra a figyelmet.

Összességében elmondható tehát, hogy a gyenge jelzések negatív hatása kiküszöbölhető, ha a weboldal információ-sűrűsége viszonylag csekély, hagyományos vagy következetes a felépítése, és olyan helyen jelennek meg az interaktív elemek, ahol ki tudnak tűnni a többi elem közül. Ahhoz, hogy egy flat vagy félig flat oldalnál elkerülhető legyen a kattintási bizonytalanság, mindhárom kritériumnak teljesülnie kell. Ezek egyébként minden jó UX designra jellemzőek. Vagyis, ha egy tapasztalt UX-csapat készít egy flat oldalt a felhasználók figyelembevételével, akkor jobb eredmény születik, mint ha vizsgálatok nélkül készülne el egy hagyományos oldal – szögezte le az NNG, mely úgy véli, hogy felhasználói tesztek segítségével minden flat felületen beazonosíthatók és kiküszöbölhetők a hibák.

Kategória: Design | Címke:

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.