Webdesign UX webtervezőknek

A UX (User Experience), vagyis felhasználói élmény fontos szempontja a web fejlesztésnek, a webdesigner munkának. A UX olyan eszköz a webdesigner kezében, amely segíti olyan design létrehozásában, ami lehetővé teszi, hogy a felhasználók gyorsan és hatékonyan találják meg azt, amit a weboldalon keresnek.

Ha korábban már készítettünk weboldalt tudhatjuk, hogy számos szempontot kell figyelembe venni a tervezés során, és nem elég a puszta HTML, CSS vagy Photoshop ismeret ennek a komplex munkának az elvégzéséhez. Webdesignerként azzal is tisztában kell lennünk, hogy minden, amit tervezés közben csinálunk – legyen szó vizuális elemek vagy működési funkciók weboldalba integrálásáról – befolyásolja azt a kommunikációs folyamatot, amely a weboldalt üzemeltető és a webhelyet felkereső látogató között zajlik. Azaz, a webdesignernek közvetlen szerepe van abban, hogy a weboldal milyen hatékonyan éri el a célját.

Cikkünkben összegyűjtöttünk a webdesignerek számára néhány olyan alapvető UX tippet, amelyek hasznosak lehetnek weboldalak tervezéséhez, készítéséhez.

Kezdőoldalad

Kezdőoldalad tartalmazza az összes elsődleges üzenetet, amit a látogatónak meg kell értenie. Ezt viszonylag gyorsan akarja megtenni, ezért törekedned kell arra, hogy a hangsúlyok mind a szöveges, mind pedig a vizuális kommunikáció során megfelelően legyenek kialakítva. Jegyezzük meg: akár tetszik, akár nem, az emberek manapság nem szeretnek hosszú szövegeket olvasni, különösen nem képernyőn! Így amennyire csak lehet, legyünk lényegre törőek.

A kezdőoldal másik fő funkciója, hogy tájékoztassa az olvasót arról, hogy mit hol talál a weboldalon. Ha elolvasod „A modern webdesign jövője” című cikket megtudhatod, hogy egyre népszerűbbek az olyan weboldalak, amelyek nem több tucat oldalba szétszedve jelenítik meg a tartalmat, hanem egy hosszú, szinte végtelennek látszó görgetős oldalon mutatják azt.

Néhány fontos szempont kezdőoldal tervezéshez:

• Legyél rövid és egyszerű
• Helyezd a lényeges információkat a többi tartalom fölé
• A hivatkozásoknak a megfelelő helyre kell mutatniuk
• Mindig legyenek a kezdőoldaladon úgynevezett rólunk, kapcsolat, újdonság/hírek menüpontok (természetesen az elnevezésük változhat!)
• Szerepeljen mindig az első helyen az, amit a legjobban szeretnél eladni, elmondani.
• A logó mindig a kezdőoldalon legyen
• Legyen mindig telefonszám és email cím a kezdőoldalon

Navigáció

A korai weboldalak tervezésével az egyik a legfőbb probléma az volt, hogy nem informatikai alkalmazásnak tekintették a weboldalt, hanem egyfajta elektronikus könyvnek. Ebből adódóan nem vették figyelembe azt, hogy a weboldalra másfajta tervezési szempontok vonatkoznak, mint egy átlagos kiadványra. Működés szempontjából az egyik legfontosabb dolog, amiben a weboldal különbözik egy könyvtől az a felhasználói (olvasói) navigáció működése, amely értelemszerűen nem lineáris, mint egy regénynél.

A navigációs rendszer egyértelmű céljain kívül sok szempontból segíti a kommunikációt a felhasználóval:

• Esztétikussá teszi a felhasználói környezetet, a webdesign-t
• Befolyásolja a kommunikáció minőségét
• Megmutatja a felhasználónak a könnyű utat a céljához

A navigáció kialakítása során legyünk következetesek, és ne zavarjuk össze a látogatót! Ez azt jelenti, hogy a hivatkozások, gombok, ikonok mind a vizuális, mind a szöveges, mind pedig a pozíciójuk megjelenése tekintetében legyenek egyértelműek. A következő fejezetekben néhány tipp olvasható a webdesign helyes navigációs rendszerének kialakításáról.

Használjunk információs struktúrát!

A navigációs részek tervezésénél a webdesignernek figyelembe kell venni az aloldalak szerkezetét. Ahhoz, hogy ezt a szerkezetet létrehozzuk, először meg kell tervezni az információs hálót. Mi a Top School webdesigner tanfolyamán ehhez az úgynevezett Card Sort módszereket tanítjuk, amelyek ezt segítik kialakítani a célközönség igénye és logikája alapján.
Mivel minden weboldal és célközönség más, így általános alapelvként annyit lehet megfogalmazni ezzel kapcsolatban, hogy azok az elemek kerüljenek feljebb a hierarchiában, amelyek fontosabbak a többinél. Kicsit más logika alapján megfogalmazva ugyanezt az elvet: a szerkezet kialakítása során az általánostól haladjunk a speciális felé.

Az elnevezések használta során természetesen mindig a legegyszerűbb és legközérthetőbb kifejezéseket kell használni. Például a szakmai igényességgel megfogalmazott műszaki adatokat ráérünk kifejteni a termék adatlapján. A navigációban jobb egyszerű, nyilvánvaló és könnyen érthető kifejezéseket használni. Vigyázzunk a marketing szempontból jól csengő, figyelmet felkeltő szavak túlzott használatára, mert az összezavarja a felhasználókat!

Egységes navigáció alapelve a webdesignban

Ne feledjük, ez egy web alkalmazás, nem pedig egy könyv! Fontos, hogy a webdesigner kreatív legyen a weboldal tervezés során, de ugyanennyire fontos, hogy a navigációs terület oldalanként egyforma legyen, ugyanis csak így tudja a látogató értelmezni az alkalmazás működését. Ha minden weboldalon újra kell tanulni a szoftver használatát, akkor abba a látogató hamar belefárad és tovább áll!

Tudom, hogy hol járok design alapelv

Az emberek általában szeretnek kalandozni, sétálni, érdekes dolgokat látni, de nem szeretnek eltévedni. Egy weboldalon történő pozícióvesztés nyilván nem azt a pánikreakciót váltja ki, mintha ugyanez a dzsungelban történt volna meg, de az erre adott reakció webes kommunikáció szempontjából hasonló eredménnyel jár. Azaz: a felhasználó elhagyja az oldalt és lehet, hogy többé nem talál vissza. Több módszer is létezik, hogyan jelezzük a navigációs területen az aktuális pozíciót. Íme, néhány példa:

• Félkövér és más színű linkek
• Eltérő háttérszín a menüpont mögött
• Nyilak vagy vonalak megjelenítése az aktuális oldalnál

A hatékony UX érdekében minden webdesignban ajánlott valamelyik használata.

Vizualizációs alapelv

Az emberek a sietős napi munka vagy keresés közben nem szeretnek olvasni. Gondoljunk csak arra, hogy a közúti forgalomban elhelyezett szimbólumok használata mennyivel előnyösebb, mintha szövegesen lennének megfogalmazva.

Ugyanezen elv mentén könnyen belátható, hogy az ikonok elhelyezése a webdesignban hasonlóan biztosítja a hatékony navigálást, segítik a látogatót a böngészésben és az egyértelmű döntéshozatalban. Arról nem is beszélve, hogy ezek kreatívabbá tehetik a webdesignt.

Néhány szabály a szimbólumokkal kapcsolatban:

• Használj vonzó ikonokat
• Használj univerzális ikonokat, illetve ne használj univerzális jelentésű ikonokat más értelemben
• Az ikonok legyenek értelmezhetők
• Legyenek következetesek az ikonok
• Az ikonoknak illeszkedniük kell a designba

Weboldal olvashatóságának alapelve

UX szempontból vizsgálva a fejlesztői munkát, az egyik legnagyobb feladat a UX szakember számára megértetni a webfejlesztésben közreműködő szereplőkkel – webdesigner, megrendelő, stb. –, hogy a szöveges tartalom az elsődleges információhordozó és annak értelmezhetősége minden más szempont felett áll. A következőkben megosztunk néhány jó tanácsot a szöveggel kapcsolatban.

Ijesztő a sok szöveg!

Bizonyára sokakat rosszul érint, de sajnos tudomásul kell venni, hogy az emberek többségét a sok szöveg a közoktatás unalmas tanóráira emlékezteti, amit nem akarnak újra átélni.
Egyes ajánlások szerint az ideális karakterszám 50-60 soronként, amelyek maximum 600-650 px szélesek. Ez egész egyszerűen azt jelenti, hogy nem tanácsos túl hosszú és felesleges szövegeket létrehozni.

Megfelelő méretű betűket!

Tudjuk, hogy ez ma már közhely – és azt is tudjuk, hogy a legtöbb böngészőben az ALT billentyűt nyomva tartva és felfelé görgetve az egérrel fel lehet nagyítani a képet –, de ennek ellenére mégis fontos, hogy a szöveg betűmérete legyen elég nagy ahhoz, hogy zoomolás nélkül is könnyen olvasható legyen. Javasoljuk a minimum 10-12 pontos betűméretet és a script, vagy más néven kézírás jellegű betűtípusok használatának mellőzését.

Szöveg tagolásának elve

Használjunk főcímeket és szimbólumokat! A legtöbb olvasó ugyanis az úgynevezett „pásztázó” vagy „scannelő” módszerrel olvas. Ez azt jelenti, hogy nem sorfolytonosan halad olvasás közben, hanem egyfajta letapogató módszerrel halad végig a szövegen és próbálja meg kiszűrni abból a lényeget. A Webdesigner feladata a webtervezés, és nem a szokások megváltoztatása. Segíteni kell szövegtagolással is azt, hogy a weboldal a legoptimálisabban érje el célját.

Szövegkiemelések

A dőlt betűk jól működnek kiemelésként, de megnehezítik az olvasást. Tanácsos a dőlt betűk helyett inkább félkövér kiemeléssel dolgozni. Ez hasonlóan kiemeli a lényeget, de könnyebben olvasható. Ez a kiemelés jobb, mint ez. S persze csak azt emeld ki, ami tényleg fontos!

Az aláhúzott szavak linkek!

Az aláhúzás ugyan jó kiemeléstípus lehetne, pontosan ezért használták eredetileg az egyik legfontosabb elem, a navigáció megkülönböztetésére a web hőskorában, amikor még nem volt CSS és Flash. De ehhez annyira hozzászoktak már az emberek, hogy ha ma egy szöveget aláhúzunk egy weboldalon, akkor azt gondolják, hogy az egy hivatkozás. A legvalószínűbb, hogy a felhasználó megpróbál rákattintani az aláhúzott szavakra, majd ezt követően nem fogja érteni, hogy az miért nem működik linkként.

Webdesigner UX teszt, avagy a nagy Top School Kísérlet

A felhasználói élmény igen nehéz téma. Sok helyen olvashatjuk azt, hogy a legjobb módszer arra, hogy megértsük a UX-t, ha beleképzeljük magunkat egy átlagfelhasználó bőrébe.
Végezzünk el egy gyors, kétlépéses kísérletet, amit az egyszerűség kedvéért szerényen nevezzünk Top School Kísérletnek.

• Képzeljük el, hogy mi felhasználók vagyunk
• Kattintsunk jobb egérgombbal erre a szövegre: Kattints ide!

Összegezzük az eredményt: remélhetőleg a cikk olvasóinak 99,9 százalékánál megjelent a böngésző helyi menüje. Ez alapvetően jó hír, de sajnos azt jelenti, hogy a legtöbb tutorial, designtankönyv és megmondó guru tanácsával ellentétben a „Képzeljük el, hogy mi felhasználók vagyunk” módszer nem működik, mert a felhasználók biztosan a bal egérgombbal kattintottak a szövegre, és nem értik, hogy miért nem történt semmi.

Magyarázat: a webdesignerek, programozók és más informatikai területen dolgozók nem felhasználók, hanem szakemberek.

Megoldás: tesztelj felhasználókkal!

Tanfolyam a témában

• Webdesigner tanfolyam
• Webdesigner 2 - Filmes és web-animáció képzés
• WEB programozás - PHP
• Grafikus OKJ tanfolyam
• Szoftverfejlesztő OKJ tanfolyam

Vissza design, grafika és webdesign cikkekhez