Webshark Blog

Ahogy a legtöbb iparágban zajlik a fejlődés, úgy a weboldaltervezés is folyamatosan változik, megjelennek új technikák, megoldások, melyekkel még jobb weboldalakat lehet készíteni. (Frissítés, 2022.09.14. – Bővítettük ezt a fejezetet: Mi az az empátia-térkép? És hogyan használható a webdesignban? használható oldaltérkép?)

Most nem új szoftverekről vagy a technológiai háttérről lesz szó, hanem olyan UX tervezésben használható gyakorlatokról, melyek egyre többször jelennek meg a weboldalkészítésnél. Nem is feltétlenül vadonatújak ezek, hiszen már évekkel ezelőtt is találkozhattunk velük, azonban sokan még mindig csak ismerkednek velük. Mi is csak felvillantjuk ezeket most, ha valamelyik használhatónak tűnik, akkor érdemes mélyebben megismerkedni vele.

Felhasználói folyamat tervezése

A felhasználói utak olyan folyamatok, melyeket úgy terveznek, hogy a felhasználók bizonyos cselekvéseket egymást követően végrehajtsanak. Ezeket a cselekvéseket persze alapvetően a weboldaltulajdonos szeretné látni a látogatóktól. A felhasználói folyamatban való gondolkodás segít mindenesetre segít a felhasználói igények meghatározásában, és megfelelő keretet biztosít a tartalom elkészítéséhez.

---

Storyboard – mi az a storyboarding? És hogyan vágj bele?

A storyboardokat régen a filmkészítésben használták azért, hogy előre felvázoljanak bizonyos jeleneteket, vizuális formában, illetve még azt megelőzően megalkossák a film saját világát, hogy elkezdenék a munkát. De a weboldalkészítésnél is hasznosak lehetnek, amikor meg kell tervezni a felhasználói élményt.

A stroyboard azonban nem drótváz készítését jelenti, hanem a felhasználók történetének felvázolását, hogy érthetőbb legyen, miért és hogyan lépnek kapcsolatba a weboldallal. Ahhoz ugyanis, hogy jobban megértsd a felhasználóid világát, és hogy miként teheti jobbá a terméked az életüket, szükség lehet a sztorijuk megalkotására.

A történetek vizuális formában való összeállítása több ok miatt is hasznos:

• Vizuális formába öntesz gondolatokat, így érthetőbbé válnak, hiszen a képek kommunikációja hatékonyabb, mint a leírt szavaké.
• Sokkal maradandóbbak, hiszen a történeteket 22-szer könnyebben jegyezzük meg, mint a szimpla tényeket.
• A történetekhez jobban tudnak kapcsolódni az emberek is, együttérzőbbé válnak a megjelenő karakterekkel, amikor látják, hogy a kihívások, melyekkel szembesülnek a való életben, hasonlóak az övéikhez.
• A történetek jobban felkeltik a figyelmet, az emberek kíváncsiságát, akik általában meg akarják tudni, hogyan is végződik a történet.

Hogy néz ki mindez a webdesignban? A storyboard segítségével vizuális módon előre felvázolhatod, hogy milyen lehet a felhasználó tapasztalata a termékkel (weboldallal). Tehát úgy gondolkodsz a termékedről, mintha az egy filmben jelenne meg, és látnád magad előtt, hogy az emberek miként fogják használni, hogyan lépnek interakcióba vele.

A történetek felvázolása azért különösen fontos a tervezésnél, mivel emberközpontúvá teszi azt: az adatoknak emberi arca lesz. Az elképzeléseket megjeleníti a valós (bár elképzelt) életben, a tervezők így könnyebben beleképzelhetik magukat a felhasználók cipőjébe, és úgy látják a megoldásaikat, ahogy az emberek.

Ha belevágnál egy storyboard elkészítésébe, akkor arra törekedj, hogy az logikus, érthető és meggyőző legyen. Meg kell értened a történet alapjait, mindegy egyes építőkövét, mert így tudod hatékonyabban és meggyőzőbben megalkotni a sztorit. Világosan kell látnod azt a karaktert, aki köré a történet épül (viselkedését, megjelenését, várakozásait), ugyanígy a környezetét, ahol zajlik a történet, valamint a sztori felépítését: vagyis a kezdetét, a végét, tehát, hogy mi indítja el a karaktert és mi a célja, és ezáltal milyen előnyöket szerez.

Ami a gyakorlati kivitelezést illeti:

• érdemes egyszerű szöveges leírással kezdeni, mely felbontja a történetet rövidebb szakaszokra.
• ezután a szakaszokhoz érzelmeket rendelni, megmutatni (akár csak smiley-kkal), mit játszódik a karakterek fejében.
• végül pedig ezeket a szakaszokat, pillanatokat vizuális formába önteni.

---

A lehető legrosszabb ötlet technikája

Ez valóban azt jelenti, amiről az alcím szól: egy ötletelés során fel kell vetni azokat a rossz UX-megoldásokat, melyeket a weboldallal kapcsolatban csak el lehet képzelni. Ha mélyebb betekintést nyernek az új, és egyben rossz ötletekbe a fejlesztők, az segít abban, hogy megnyugodjanak és magabiztosabbak legyenek. A rossz ötletek felsorakoztatása javítja a kreativitást, vagyis könnyebben jönnek a jó ötletek.

Miért is működik a „lehető legrosszabb ötlet” technika? Azért, mert amikor egyszerű ötletbörzére kerül sor, ahol elvileg mindenki hozzászólhat a témához, sokan vannak, akik a többek miatt nem mernek megszólalni, mert félnek, hogy csak lejáratják magukat egy rossz ötlettel. Ez viszont azért nem szerencsés, mert így lesznek olyan – egyébként jó ötletek – melyek fel sem merülnek, aztán egy idő után a kiötlőjük is elfeledkezik róluk.

A lehető legrosszabb ötlet technikai ezt a feszélyezettséget próbálja oldani azzal, hogy megfordítja a dolgot, és nem a legjobb ötletet keresik, hanem a legőrültebbet vagy legbénábbat. Egy ilyen helyzetben senki nem tud butának tűnni, hiszen mindenki hülyeségeket sorol körülötte. Mindenesetre az ötletelés során oldódik a hangulat, megszűnik a feszültség.

A technikát egyébként Bryan Mattimore, a The Growth Engine Company társalapítója nevezte el így. A céljuk az volt, hogy a hagyományoktól elrugaszkodva beindítsák az ötletelést. A technika révén lenyugodtak a résztvevők, eltűntek a mentális gátak, melyek miatt nem tudtak szabadon áramlani a gondolatok. A sok nevetséges ötlet után viszont lassan elkezdett kialakulni, hogy működő dolgokhoz is el tudnak jutni.

De hogyan is néz ki a gyakorlatban ez a technika?

1. Soroljatok fel annyi rossz ötletet, amennyit csak tudtok.
2. Rögzítsétek a rossz ötletek valamennyi jellemzőjét.
3. Azt is gondoljátok át, hogy mitől is annyira rossz egy adott rossz ötlet.
4. Ezután keressétek meg a rossz ötlet ellentétét.
5. Gondoljátok át azt is, hogy mivel lehet helyettesíteni egy rossz ötletet.
6. Végül próbáljatok meg kombinálni több rossz ötletet is.

Tehát, mint látható, nem elég csak felsorolni néhány hülyeséget, ezeket analizálni is kell: meg kell állapítani, hogy mitől hibásak, így lehet eljutni olyan gondolatokig, melyek aztán a jó ötletek alapját jelenthetik.

---

Moderált és moderálatlan tesztelés

Ha olvastál már a UX-ről, akkor tudod, hogy mennyire fontos rész a tesztelés ahhoz, hogy egy jó felhasználói élmény készülhessen. Tesztelni azonban sokféleképpen lehet, és fel lehet osztani a tesztek típusait úgynevezett moderált és a moderálatlan tesztelésre. Mindkettő hasznos egy jó weboldal kialakításában.

---

Milyen a webdesignhoz használható oldaltérkép?

A legtöbben az oldaltérkép kapcsán arra az XML oldaltérképre gondolnak, melyet a keresőmotorok is használni tudnak a weboldal feltérképezésére, vagy a láblécben található navigációs segédeszközre, melyek a felhasználók tájékozódása érdekében helyeznek el. Ugyanakkor a weboldaltervezésnél egy olyan oldaltérképre van szükség, mely áttekintést ad a weboldal működéséről, érthetőbbé teszi azt. Ez az oldaltérkép inkább egy folyamatábra, nem pedig linkek listája.

Az oldaltérképnek tehát több jelentése is van, és itt most nem abban az értelemben használjuk, mint egy listát, ami tartalmazza a webhely valamennyi oldalát. Webdesign szempontból egy olyan segítséget jelenthet az oldaltérkép, melynek révén a fejlesztők elkerülhetik a hibás navigáció kialakítását és a rossz tervezési döntéseket.

Valójában csak arról van szó, hogy egy másfajta nézőpontból közelít az oldalakhoz, hiszen a tervezés felhasználói élmény és interakciók alapján történik, így ezeket helyezi a középpontba. A lényeg ugyanis nem az egyes oldalak listája vagy azok tartalma (nem információs architektúra), hanem a közöttük lévő kapcsolatok, melyek kifejezik azt, hogy a rendszer miként működik, és nem csak azt, hogy hogyan néz ki.

Ugyanakkor itt nem egy drótvázról van szó, mivel a teljes rendszert (weboldalt) próbáljuk az oldaltérkép segítségével áttekinteni – nem csak annak bizonyos részeit -, megrajzolni a feladatok folyamatát, illetve megmutatni, hogy az egyes oldalak milyen funkciókat tartalmaznak. Ennek révén kaphatunk egy teljes áttekintést a webhely működéséről, és hogy a tartalmak miként illeszkednek össze.

Az oldaltérképen tipikusan dobozok jelennek meg, melyek az egyes oldalakat vagy oldalállapotokat mutatják, ezeket nyilak vagy vonalak kötik össze, melyek jelzik a kapcsolódásokat. Nem az egyes tartalmak elhelyezkedését szemlélteti tehát, hanem a felhasználói utat rajzolja meg.

Elkészítése időrendben a tartalmak összeállítása, illetve az egyes oldalak drótvázának felrajzolása közé esik. A tartalmi lista megmutatja, hogy mi az a tartalom, ami már létezik (ha még nem létezik, akkor el kell készíteni tervezés előtt), ugyanakkor itt még nem szempont, hogy ezeket hogyan rendezzük el az oldalon. Drótvázat azonban csak az oldaltérkép elkészítése után érdemes rajzolni, ez ugyanis már magában foglalja a navigációt, ami az oldaltérkép révén válik csak világossá.

Mindezek alapján látható, hogy hasznos lehet egy oldaltérkép, ennek ellenére a gyakorlatban még nem nagyon használják a tervezés során. Ennek oka nem csak a megszokotthoz ragaszkodás, vagy a munka leegyszerűsítése, gyorsítása, hanem az is, hogy a reszponzív megjelenés miatt kijelzőmérettől függően akár az oldalak száma is változhat egy webhely esetében, így túl bonyolultnak találják az elkészítést. Ugyanakkor bármilyen okból spórolják is meg a fejlesztés során az oldaltérképet, egy nagyobb oldal esetében emiatt megjelenhetnek hiányzó részek vagy épp felesleges, magukra hagyott elemek, mivel a kapcsolatokat enélkül nem lehet pontosan átlátni. Így később kell majd korrigálni a problémákat.

---

Frissítés, 2022.09.14.:

Empátia-térkép: mi az az empátia-térkép? És hogyan használható a webdesignban?

Még mielőtt vizuális formába öntenéd a weboldalad, érdemes lehet egy úgynevezett empátiatérképet készíteni annak érdekében, hogy jobban megértsd a leendő felhasználóidat. Az empátia-térkép annak vizualizációja, hogy milyen attitűdjei vannak a felhasználóknak és miként viselkednek. Ez pedig segít a weboldaltervezés előtt mélyebben megérteni a felhasználókat, illetve rámutat arra, hogy hol vannak hiányosságok az adatoknál.

A Nielsen Norman Group definíciója szerint az empátia-térkép egy kollaboratív vizualizáció, mellyel megfogalmazhatjuk, hogy mit tudunk egy bizonyos típusú felhasználóról, annak érdekében, hogy közösen megértsük az igényeit, ezáltal pedig segítsen a döntéshozatalban.

Tehát, mint a neve is jelzi, az empátia-térkép abban segít elsősorban, hogy empátiát, együttérzést alakítson ki a felhasználók irányába. Valós adatokon alapul, ezáltal

• megszünteti a téves elképzeléseket, és a csapat összes tagja ugyanazt fogja látni a felhasználókról
• feltárja a vizsgálataink hiányosságait
• megmutatja a felhasználói igényeket, melyeknek talán még ők sincsenek tudatában
• világossá teszi, hogy mi mozgatja őket
• egy értelmes fejlesztés felé irányítja a csapatot.

Az empátia-térképet a tervezés egészen korai szakaszában érdemes elkészíteni.

Hogyan néz ki?

A gyakorlatban egy empátia-térkép egy négy részre osztott négyzet (mond, gondolkodik, tesz, érez) a felhasználói personával a közepén. Az empátiatérkép segítségével egyetlen pillantással, teljes egészében áttekinthetjük, ki is a felhasználó.

A „mond” (Says) négyzet azt tartalmazza, amit a felhasználó hangosan kimond, például egy interjú vagy egy használhatósági tanulmány során. Ideális esetben itt idézetek is megjelennek a felhasználótól.

A „gondol” (Thinks) négyzet arról szól, hogy mit gondol a felhasználó egy termék használata során. Itt meg kell fogalmaznunk, hogy mi foglalkoztathatja a felhasználót, mi az, ami lényeges számára? Az is elképzelhető, hogy ugyanaz a tartalom kerül ide, mint az előző négyzetbe. Ugyanakkor lehetséges, hogy vannak olyan dolgok, melyeket nem mond ki. Ezért meg kell próbálni megérteni, hogy mi az, amit magában tart, mi lehet ennek az oka?

A „csinál” (Does) négyzet a felhasználó által végrehajtott műveleteket tartalmazza. A vizsgálat alapján mit tesz? És hogyan teszi mindezt? Tehát például: „többször is frissíti az oldalt”, „összehasonlítja az árakat”.

Az „érez” (Feels) négyzet a felhasználó érzelmi állapotáról szól. Mi miatt aggódik a felhasználó? Mitől lesz izgatott? Milyennek érzi az élményt? Tehát például „türelmetlen: mert az oldalak lassan töltődnek be”, „aggódik: fél, hogy valamit rosszul csinált”).

Mivel a felhasználók is emberek, így találsz majd ellentmondásokat az egyes négyzetek között. Például más mondanak, mint amit tesznek, vagy gondolnak. De pont ezáltal lesz értékes az empátia-térkép, hiszen felfedi az ilyen ellentmondásokat. Persze lesz olyan is, amikor az egyes négyzetek szinte ugyanazt tartalmazzák, például a gondolatok és az érzések esetében, ez azonban nem probléma. A lényeg, hogy nem marad ki egyetlen fontos dimenzió sem. Probléma akkor van, ha üresen marad valamely négyzet, mert az azt jelzi, hogy további vizsgálatokra van szükség, mielőtt belekezdenél a designba.

Empátia-térképet persze nem muszáj minden felhasználóra külön készíteni, az aggregált empátia-térkép teljes felhasználói szegmenseket mutathat be. Igaz, ez is úgy készül, hogy az olyan egyedi empátia-térképeket összesítik, ahol a felhasználók hasonlóan viselkedik, így egy csoportba rendezhetők. Ebből aztán előállítható egy persona is.

---

Felhasználói út térkép

Minél összetettebb a weboldalad, annál fontosabb, hogy elkészítsd a felhasználói utak térképét. És itt valóban egy vizuális formában megjelenő térképről van szó, mely jelentős segítséget ad a felhasználók fogadásában és megtartásában. Ezt úgy éri el, hogy komoly betekintést enged az ügyfelek felmerülő problémáiba, amikor kapcsolatba lépnek a weboldaladdal vagy a cégeddel. A felhasználói útról ebben az anyagunkban már részletesebben is írtunk.

5 másodperces teszt

Az 5 másodperces teszt az első benyomásról szól és annak javításáról szól. Ez egy olyan teszt, mely egy felhasználó számára mindössze öt másodpercet vesz igénybe, viszont nagyban hozzájárulhat egy világosabb és használhatóbb weboldal kialakításához. Öt másodperc alatt meghatározható, milyen a felhasználó első benyomása a weboldalról, miután olyan kérdésekre kell válaszokat adnia, hogy vajon mi lehet a szándéka az oldalnak, melyek a fő elemei, ki lehet a célközönség, megbízhatónak látszik-e az oldal és a cég, és egyébként milyen benyomása alakult ki a designról.

Ezek lennének tehát a lehetőségek, melyek még nem épültek be a weboldalkészítés mindennapi gyakorlatába, ugyanakkor némelyiket vagy akár többet is közülük bizonyos esetekben érdemes lehet alkalmazni. A későbbiekben ezek közül többet is részletesebben bemutatunk majd.