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!
- Minél fontosabb valami, annál feltűnőbben jelenjen meg az oldalon!
- 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.
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.
A 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!
