8 dolog a felhasználóbarátságról Steve Krug könyve alapján

Ennek a könyvnek köszönhetem, hogy a felhasználóbarátságot a kezdetektől fogva a legfontosabb tényezőnek tartom a weblapok tervezésénél.

Webes pályám kezdetekor került a látókörömbe Steve Krug „Ne törd a fejem!” című könyve, és azóta is azt mondom, hogy hihetetlenül nagy szerencsém volt, hogy már akkor a kezembe foghattam.

Ennek a könyvnek köszönhetem, hogy a felhasználóbarátságot a kezdetektől fogva a legfontosabb tényezőnek tartom a weblapok tervezésénél. A tervezési szemléletem és a weblapokhoz való hozzáállásom változtatta meg. 2008-ban került Magyarországon először a boltok polcaira, és a mai napig érvényes igazságokat tartalmaz.

Mit tanultam a felhasználóbarátságról?

Mutatom a számomra leghasznosabb tanulságokat:

1. Ne kényszerítsd gondolkodásra a felhasználódat!

Meglep, hogy ezzel indítok, ugye? A weblapodnak magától értetődőnek kell lennie, hogy ne a felhasználónak kelljen az idejét fecsérelni arra, hogy kitalálja, miről szól és hogyan használja azt. Ha frusztrálod a felhasználókat, ki fognak lépni, és máshol fogják keresni a megoldást a problémájukra.

Ha valami használható, az azt jelenti, hogy:

„Egy átlagos képességű egyénnek is tudnia kell használni a weblapodat úgy, hogy a megismerés kevesebbe kerüljön neki, mint amennyit nyerhet vele!”

Steve Krug

Más szavakkal ugyanez:

Ha el tudod magyarázni egy ötévesnek a portékádat úgy, hogy megértse, akkor már nyertél. Ez legyen a kiindulópont!

2. Nem úgy használják a webet, ahogy azt mi elképzeljük

Amikor egy laikus elkezdi a saját weblapját építeni, vagy nekiáll tervezni, azt képzeli, hogy a látogatói majd

  • gondosan végigolvassák az összes aloldalát,
  • elolvasnak mindent, amit írtak,
  • és végigmennek balról jobbra/fentről lefele az összes menüponton egyenként.

HAHA! Szép álom… a valóságban a felhasználók:

  • Nem olvassák, csak átfutják (scannelik) a weblapokat olyan szavakat és kifejezéseket keresve, amik azonnal megragadják a figyelmüket.
  • Nem a számukra legmegfelelőbb döntéseket hozzák meg. Azt feltételezi a friss és lelkes weblaptulajdonos — ha a webese hagyja-, hogy a felhasználók gondosan átolvassák a weboldalakat, megfontolva az összes elérhető lehetőséget, és a lehető legjobb megoldást választják ki maguknak. Ezzel szemben javarészt az első észszerűnek tűnő lehetőséget választják, amivel találkoznak. — viszont ez nem biztos, hogy valóban a legjobb nekik.
  • Nem jönnek rá, hogyan működnek a dolgok valójában. Gyakran téves elképzelésük van arról, hogyan működik egy termék, és csupán addig használják, amíg az működik számunkra. Ha akadályba ütköznek, továbbmennek.

3. Tehát, hogyan kell a fentieket figyelembe véve tervezni?

Ne találd fel újra a spanyolviaszt!

A legjobb módja annak, hogy a felhasználók könnyen megértsék és átlássák a weblapodat, ha követed a már létező konvenciókat — a széles körben használt vagy szabványosított design patterneket. Ide tartozik például a gombok elhelyezkedése, funkciójának megfelelő színjelölés, címsorok kiemelése, hivatkozások egyértelmű jelzése, breadcrumb navigáció az oldalon… és még sorolhatnám.

Hozz létre jól érzékelhető vizuális hierarchiát!

  1. Minél fontosabb valami, annál feltűnőbben jelenjen meg az oldalon!
  2. Azok a dolgok amik logikailag összetartoznak a képernyőn, vizuálisan is tartozzanak egybe!

Oszd fel a weboldalt jól meghatározott területekre!

Például legyen jól látható és egyértelmű, hogy

  • ez itt a navigáció
  • itt vannak a mai legfontosabb hírek
  • itt találsz minden mást
  • ez itt a kapcsolat űrlap
  • a lábléc
  • az impresszum

Tehát jól különítsd el az egyes tartalmi elemeket egymástól vizuálisan!

Gondoskodj arról, hogy a kattintható elemek ténylegesen kattinthatónak látszódjanak!

No comment…

Tüntesd el a zavaró elemeket!

Ha az oldalon minden elem a figyelmet akarja megszerezni, akkor valójában egyiknek sem fog sikerülni, csak kellemetlen és túlterhelő lesz a látogatónak. Ez így egy nagy vizuális katyvasz lesz. Tervezz úgy, hogy a irányítsd a látogató figyelmét és valóban csak az legyen és úgy legyen az oldalon, ahogy az indokolt. Imádom a bemutatkozó aloldalamon lévő Antoine de Saint-Exupéry gondolatot, ami úgy hangzik:

“A jó dizájnt nem akkor érjük el, ha már nem tudunk többet hozzáadni, hanem akkor, amikor már nem tudunk többet elvenni.”

Antoine de Saint-Exupéry

Alakítsd a tartalmat úgy, hogy vezesse a látogatód tekintetét!

  • Használj több jól megírt címsort, jól megkülönböztetve a címsorok szintjeit,
  • legyenek rövidek a bekezdéseid,
  • használj felsorolásokat
  • és emeld ki félkövérrel a kulcsszavakat!

4. Töröld azt, ami nem kell!

Az internet amúgy is tele van olyan szeméttel, amit soha senki nem fog elolvasni. A felesleges gondolatok, szavak csak zajt okoznak és elbizonytalanítják a felhasználót. Ezért amikor megírod a tartalmadat, olvasd el többször, és tisztítsd ki belőle a töltelékszavakat és az olyan gondolatokat, amik valójában semmit nem adnak hozzá a mondanivalód értékéhez!

5. Létfontosságú, hogy a navigáció átlátható legyen

„Az emberek nem fogják használni a webhelyedet, ha nem tudnak eligazodni rajta.”

Ha nem tervezed meg jól az oldaladat, a felhasználó nem fogja tudni hova kattintson, nem fogja tudni, mennyi tartalom vár rá, vagy fogalma sem lesz arról, hogy melyik aloldalon van éppen. A lehető legjobban teszed, ha a navigációban használod a jól bevált szokásokat (például a logó többnyire a bal felső sarokban van, alatta pedig egy navigációs sáv található a fő részekkel stb…). Ha a weboldalad jól van tervezve, az alábbi dolgokat az első pillantásra meg kell találnia a látogatódnak, bármelyik aloldalon is járjon:

  • az oldal logója
  • az aktuális aloldal neve
  • a weboldal fő részei
  • navigáció(k)
  • morzsamenu (breadcrumb) — ami megmutatja struktúrában, hogy hol jár éppen a látogató kiemelve a jelenlegi helyet
  • keresőmező

6. Az első benyomás ezredmásodperc töredéke alatt megtörténik

Az kezdőlap legfontosabb feladata az, hogy átadja azt az információt a felhasználónak, hogy miről is szól a weboldal ahová érkezett. Gyorsan választ kell adnia az alábbi 4 kérdésre:

  • Mi ez az oldal?
  • Milyen terméket találok itt?
  • Mit csinálhatok az oldalon?
  • Miért érdemes itt lennem, és miért nem máshol?

Ha a felhasználó első benyomás alapján történő feltételezései helytelenek, akkor megpróbálja a gondolatait belemagyarázni mindenbe, amivel találkozik. Ezzel több félreértés és még több frusztráció keletkezik benne.

7. Asztali számítógép vs. mobileszközök

Az asztali számítógépek alapvető használhatósági elvei továbbra is érvényesek a mobil eszközökön is, de vannak jelentős különbségek:

  • A mobil kijelzők kicsik, ezért jó ötlet lehet a „mobil first” megközelítés alkalmazása. Ahelyett, hogy először az asztali verziót tervezed meg, majd mindent bepréselsz a mobil verzióba, csináld fordítva!
  • A mobil eszközökön nincs hover funkció. Sok felületi funkció támaszkodik a hoverre, ezért a weblapod tervezőjének fontos, hogy képes legyen megtalálni a helyettesítésük módját.

8. Affordancia (észlelhetőség) vs flat design

Az észlelhetőség a designban található vizuális utalásokat jelenti, amelyek segítenek megérteni, hogyan kell használni egy tárgyat. Például, ha a gombnak van mélysége és árnyéka, egyértelművé válik, hogy azt meg lehet nyomni.

flat design egy népszerű minimalista stílus, amely laposabbá teszi a dolgokat és segít elkerülni a képernyő túlzott zsúfoltságát. Azonban többnyire elvész ebben a stílusban az észlelhetőség — erre találta ki a Google megoldásként a Material Design-t. Ha flat design-t használsz, fontos, hogy más vizuális jeleket is alkalmazz, hogy kompenzáld az észlelhetőségbeli veszteségeket.

Összefoglalva

Ezt a cikket elolvasva mélyebb megértést nyerhetsz arról, hogy a közös munkánk során miért mondom azt, amit mondok és arról, hogy mire számíthatsz. Bár a könyv ma már nehezen megszerezhető, talán antikváriumban, vagy e-book formájában még kapható, annak is ajánlott olvasmány, aki csak simán el akar igazodni a weblapok színes kavalkádjaiban. Egy biztos: ha a könyvet elolvasod, egészen másképp fogsz nekiállni a weben való böngészésnek.

Steve Krug: Ne törd a fejem! — Felhasználóbarát webdizájn

Légy Te is otthon a weben!

Kapcsolatfelvételhez katt ide!

Tetszik, amit olvastál? Oszd meg mással is!

A cikk szerzője: