A UX útvesztőjében

Te tudod, hogy mi a különbség az IA és az IxD között? Vagy érdekel, hogy milyen lépések előzik meg a grafikai design készítést? Netán az, hogy milyen kutatási módszerekkel ismerheted meg a leendő felhasználókat?

Akkor ez a könyv neked szól!

Mit takar a UX Design?

A UX Design mint fogalom, számos szakterületet foglal magában. Ezen területek célja, hogy olyan termékeket és szolgáltatásokat alkothass, melyeket a végfelhasználók saját tapasztalataikra alapozva kényelmesen, könnyedén és élményszerűen használhassanak, vehessék igénybe.

A UX Designer pedig az az ember, aki ezen szakterületeket elsajátítva képes olyan terméket vagy szolgáltatást létrehozni, hogy az megfeleljen az imént említett kritériumoknak.

Íme a UxD három fő szakterülete:

• User research
  A szakterület ismerője azért felel, hogy feltárja az adott célcsoport jellemzőit, szokásait, viselkedését. Ez az egyik legfontosabb művelet, hiszen ha nem tudod, hogy kinek készítest weboldalt, akkor nagy valószínűséggel nem lesz felhasználóbarát, hiszen nem tudod a megfelelő igényekhez igazítani.
• Information architect
  Ezen szerep viselőjének a feladata, hogy kialakítsa egy weboldal vagy webes alkalmazás tartalmi részének struktúráját, ő határozza meg, hogy mikor, hol milyen információk (szöveg, kép, videó, stb.) kapjanak helyet. Továbbá az ő feladata az is, hogy az ügyfél és az adott célközönség igényeinek megfelelő sitemapet és menüstruktúrát alakítson ki.
• Interaction design
  A terület szakértőjének feladata az, hogy meghatározza a weboldal vagy webes alkalmazás viselkedését. Például ha a felhasználó megnyom egy gombot, akkor mi történjen.

Lássuk a medvét!

Első lépés, hogy beazonosítsd milyen féle-fajta projekttel állsz szemben. Erre azért van szükség, mert minden típusnak megvannak a maga jellemzői, tartalmi és strukturális elvárásai, melyekre építve kielégítheted mind az ügyfél, mind pedig a leendő felhasználók igényeit.

Minden weboldal vagy webes alkalmazés lefedhető a következő négy alaptípus egyikével, vagy ezek speciális keverékével.

• Márkajelenlét
  Ezek általában olyan állandó jellegű weboldalak, melyek célja, hogy összekössék az adott márkát a nagyközönséggel.
• Marketing kampány
  Olyan időszakos (vagy állandó jellegű) weboldal, mely feladata az, hogy elérjen egy adott célközönséget és megismertesse őket az adott márka termékeivel vagy szolgáltatásaival, miközben az eléréseket pontosan mérik.
• Tartalom szolgáltatás
  Ezekre a webhelyekre jellemző, hogy olyan tájékoztató vagy szórakoztató jellegű leírásokat, cikkeket, képeket és/vagy videókat stb. tár a nagyközönség elé, melyeket nagy valószínűséggel csak itt kaphatnak meg.
• Feladat orientált alkalmazás
  Ezek az alkalmazások olyan szolgáltatást vagy szolgáltatások csoportját nyújtják, melyek hasznosak lehetnek az adott célközönség számára akár a munkájukban, akár a napi rutinjukba illesztve azt.

Ismerd meg az ügyfelet

A hatékony együttműködés kulcsa a jó kommunikáció és a kölcsönös bizalom. Ezt, csak abban az esetben tudod elérni, ha megismered, hogy kinek és miért dolgozol.

Íme néhány kérdés, melyek használatával jobban megismerheted az ügyfeled:

• Mely projektekre a legbüszkébbek és vajon miért lett ez annyira sikeres?
• Volt-e olyan projektjük, melyre nem szívesen emlékeznek vissza és mondják el, hogy mi okozhatta a problémát?
• Dolgoztak-e már hasonló szakirányú emberrel egy másik projekten?
• Aggódnak-e a projekttel kapcsolatban és miért?

Tégy javaslatot

Ahhoz, hogy a projekt futása alatt elkerüld az esetleges félreértéseket, készítened kell egy olyan javaslatot az ügyfél számára (és magadnak is), amiben például leírod, hogy milyen lépésekkel, milyen ütemben és milyen határidőkkel stb. fogsz haladni.

A teljesség igényével itt egy lista azokról a főbb pontokról, melyeknek szerepelnie kell ebben a bizonyos dokumentumban:

• Címoldal
• Frissítések (a dokumentum esetleges idő közbeni módosításainak időpontjai)
• Projekt áttekintés
• Projekt megközelítése (ütemterv lépései, hogyan fogod elvégezni a feladatot)
• Hatályok (elvárások/megfelelések mind az ügyfél, mind a saját részedről)
• Szükségletek (például, minden mérföldkő után egyeztetés az ügyféllel)
• Teljesítések (például, a wireframek elkészítése után az ügyfél elé tárni azokat)
• Tulajdonjogok (mind az ügyfél, mind a saját részedről)
• Járulékos költségek és díjak
• Árazás (a teljes projekt költsége)
• Fizetési határidő(k)
• Köszönetnyilvánítás és aláírás

Mindenkinek van egy álma…

A sikeres projekthez vezető út másik fontos momentuma, az úgynevezett kickoff, vagy más néven projekt indító megbeszélés. A megbeszélés lényege, hogy alaposan képbe kerüljön mindenki a projekttel.

Négy fontos dolgot kell tisztázni:

• Miért fontos ez a projekt az ügyfélnek?
• Mikor lesz sikeres a projekt?
• Milyen módszertan alapján érdemes haladni a projektben?
• Melyek azok a fő mérföldkövek és dátumok, melyeket mindenki be tud tartani?

Mikor először ülsz össze egy projekttel kapcsolatban, és felteszed az első két kérdést, előfordulhat, hogy ahányan vannak, annyiféle válasz fog érkezni. A cél, hogy a különféle válaszokat összefésüld, és egységes célokat fogalmazzatok meg.

Egy jó célra jellemző, hogy:

• egyszerű és érthető
• egyedi, tehát nem egy másik cél kicsavart módosulata
• mérhető, azaz összehasonítható lesz korábbi adatokkal

Érdemes elkövetni egy úgynevezett SWOT elemzést, mely segít, a megfelelő célok kialakításában. Az elemzés lényege, hogy megismerd a cég (ügyfél) erősségeit, gyengeségeit és lehetőségeit.

Üzleti igények

A projekt indító megbeszélés eredményeként már van egy szép cél listád az ügyfél által, ám most itt az ideje, hogy több szemszögből is megvizsgáld őket.

Annak érdekében, hogy minél hatékonyabb megoldásokat tudj eszközölni rájuk, vedd őket sorban egymás után, és tégy fel kérdéseket azokkal kapcsolatban több embernek az ügyfél- cégen belül.

Tegyük fel, hogy az egyik cél ez volt:
„A felhasználók legyenek képesek nyomon követni a rendeléseiket.”

Kérdezz rá:

• „Miért fontos ez az önök számára? Netán azért, hogy ezzel lecsökkentsük a türelmetlen vásárlóik hívásait?”
• „A cégük jelenleg is rendelkezik ilyen követő rendszerrel? Ha nem, akkor szükség lesz rá, vagy esetleg egy harmadik féllel megoldhatják.”
• „Mennyire pontos rendszert szeretnének és milyen információkat kellene megjeleníteni?”

Tegyük fel, hogy két embert kérdezel meg és mind a két embernek más volt az elképzelése. Nagyon fontos, hogy még a projekt elején kérdezz és együtt az ügyféllel beszéld is meg, máskülönben a munka végén derül ki a turpisság, akkor pedig már késő.

Ahogy haladsz előre, egyre tisztább képet fogsz kapni a célokról. Foglald őket egy listába, majd priorizáld azokat a projekt fő célja alapján.

Ha a feladatod, egy meglévő oldal áttervezése, akkor még most érdemes átkattingatnod. Valószínüleg lesznek olyan részei, melyeket át kell emelni az általad készített oldalba. Ez azért szerencsés, mert így már most észreveheted, mely részek nem a legmegfelelőbbek és javaslatot tehetsz rá egy összehívott megbeszélés keretein belül az ügyfélnek.

Felhasználói igények

Az üzleti igények mellett ez a másik sarokköve egy jól működő weboldalnak, hiszen ha a produktum nem tesz eleget a felhasználói igényeinek, akkor nagy valószínűséggel nem is fogják használni azt, legalábbis nem szívesen.

Van jó néhány módszer, melyeket bevetve már a kezdetekkor feltérképezheted a célcsoportba tartozó felhasználók igényeit, például: kártyarendezés, kérdőív, interjú, fókuszcsoport stb.

Az elvégzett teszt vagy tesztek után, birtokában leszel jó pár olyan valós felhasználói viselkedésnek, döntésnek, tulajdonságnak, melyekre alapozva létrehozhatsz úgynevezett perszónákat.

Perszónák

A perszónák olyan dokumentumok, melyek jellemzik az adott célcsoportba tartozó felhasználókat. A perszónák által tiszta képet kaphatsz arról, hogy az adott célcsoport hogyan fogja használni a weboldalt.

A perszónáknak két típusa létezik:

• Célzott marketing perszóna
  Mutatja, hogy mi motiválja a felhasználód vásárlásra.
• Interaktív perszóna
  Megmutatja a célközönséged viselkedési modelljét.

Egy perszónának az alábbi tartalmi elvárásoknak kell megfelelnie:

• Profil kép
  A legjobb, ha egy természetes, nem beállított képet használsz, ezáltal sokkal emberibb képet kapsz majd.
• Név
  Lehetőleg, olyan nevet válassz, ami elég természetes, szokványos és persze illeszkedik a választott archoz is.
• Kor
  Ügyelj rá, hogy ezt is a választott kép alapján határozd meg.
• Lakhely
  A lakhely nagyban befolyásolja a kulturális és viselkedési mintákat, ezért ezzel is körültekintően bánj.
• Foglalkozás
  A választott foglalkozás is sok mindenre utalhat. Például egy bolti eladó, nap mint nap számos emberrel találkozik.
• Életrajz
  Az életrajzi sztoritól lesz majd igazán életszerű a perszónád. Itt bele kell venni a származását, azt hogy miket szeret, miket nem stb. MInél részletesebben dolgozod ki, annál életszerűbb lesz.

A UX és a SEO

Hogy jön össze a két szakterület?
Nagyon egyszerű. A SEO specialista abban tud neked segíteni, hogy feltárja számodra a felhasználók viselkedését, akár a korábbi weboldalról, akár hasonló weboldal felhasználásával. Meg tudja mondani, hogy mely linkeket kattintották a legtöbbször, mely tartalmak után érdeklődtek a legtöbbet stb.

Később az oldaltérkép és az URL struktúra kidolgozásában is számíthatsz a segítségére, ezért ha lehet, élj a lehetőséggel és kérj tanácsot egy ilyen szakembertől.

Vizualizálj

Első lépés, az úgynevezett Storyboarding készítés lesz. A módszert még a filmesek is előszeretettel használják, hogy rapid módon felvázolhassanak folyamatokat/jeleneteket anélkül, hogy a kamera előtt próbálgatnák el őket sok-sok pénzért. Másrészt azért is hasznos, mert az emberek szeretik a történeteket, és még inkább azonosulni tudnak a szereplőkkel. Ha ezzel állsz oda az ügyfél vagy a fejlesztőcsapat elé, akkor gond nélkül meg fogják érteni a dolgot.

Ehhez arra lesz szükséged, hogy a perszónáidból kiindulva felhasználói sztorikat készíts, pl.: „Károly szeretné megnézni, hogy merre jár a csomagja, mert már nagyon várja az érkezését.” Mivel tisztában vagy Károly kompetenciáival, viselkedésével, így le tudod modellezni, hogyan fog reagálni a helyzetre.

A következő lépésben az iménti sztorit kell felskiccelned 4 kockában.

• Károly ül a fotelben, már itt kellene lennie a futárnak, de nincs sehol.
• Károly kinyitja laptopját és behozza az oldalt, ahol egyből meg is találja a nyomon követési funkciót.
• Ráklikkel, és látja, hogy a csomagja 1 óra múlva ér oda.
• Károly boldog!

Ezek után a sztorikat priorizálnod kell a projekt fő céljának figyelembevételével.

A következő lépés az, hogy közös pontokat alkotsz a felhasználói és üzleti igények kapcsán, priorizálod azokat, majd ezt összeveted a technikai lehetőségekkel, amiben a fejlesztők lesznek a segítségedre.

Sajnos előfordulhat, hogy a három halmaz valamelyike nem idomul a másik kettőhöz. Ekkor annyit kell tenned, hogy a halmazokat addig alakítod, még ki nem hozod egyensúlyba.

Ha megvan, akkor össze kell hívni a csapatot, átadni nekik a priorizált követelménylistát mind a felhasználók, mind az üzleti fél részéről és alátámasztani a felhasználói történetekkel.

A végén a perszónákat is nyugodtan oda lehet adni nekik, hiszen így biztos, hogy végig tudni fogják, mit miért csinálnak.

Sitemap és folyamatok

Már megvan a végleges követelménylistád is. Most el kell készítened a site egyes oldalainak hierarchikus felépítését, vagyis az oldaltérképet. Ez majd nagy segítség lesz a fejlesztőknek, a SEO szakembernek és az ügyfélnek is. Törekedj rá, hogy minnél kevesebb oldalad legyen és arra is, hogy minél kevesebb szinted.

A következő teendőd, hogy folyamatábrákat készítesz. Ezek azért jók, mert egyrészt már itt látod ha valami nem stimmelne, másrészt pedig a fejlesztés szempontjából is előnyös.

Drótvázak és kommentek

A drótvázakkal és azon jól elhelyezett kommentekkel remekül prezentálhatod a javasolt tartalmakat és szerkezetet, valamint az oldal funkcionális viselkedését az ügyfél, a grafikus és a fejlesztők számára. Ráadásul ha kombinálod a korábban elkészített oldaltérképpel és folyamatokkal, akkor remek kis prototípust is készíthetsz belőle.

A drótvázakat ajánlatos szürkeárnyalatos formában elkészíteni, így nem fog értetlenkedni az ügyfél, és a grafikust sem vezeted tévútra. Lehetőleg ne használj benne képeket és egyedi betűtípusokat sem.

Érdemes felkommentezni az egyes részeket, hogy átadás után minden egyértelmű legyen mindenkinek, mi mire való. Bár a legjobb, ha minél kevesebb kommentet használsz, hiszen ez azt jelenti, hogy tiszta, egyértelmű felületet készítettél.

Íme néhány példa, hogy miket érdemes felcímkézni:

• tartalmak
• megjelenítési kötöttségek
• interakciós kötöttségek
• folyamatok
• rendszer üzenetek

Ügyelj rá, hogy a kommentjeiddel ne hagyj kiskapukat, azaz ne írj olyat, hogy „ezt vagy azt így kellene”, légy határozott és írd ezt: „ezt vagy azt így kell”.

Ha elkészítetted a terveket, akkor tárd az ügyfél elé, de először is magyarázd el neki, hogy ez nem a végleges felület, csak annak a terve.

Prototipizálj

A legjobb módja, hogy leteszteld a megtervezett folyamatokat az oldalon még mielőtt késő lenne nem más, mint a prototípus készítés. A lényege, hogy az előzőleg legyártott drótvázakat interakciókkal látod el.

Természetesen, már a drótvázak elkészítése előtt is készíthetsz prototípusokat, méghozzá papíron. Előnye, hogy gyorsan elkészíthető, letesztelhető, és csak papír, valamint ceruza kell hozzá.

Az, hogy melyik módszert választod, gyorsan eldől, csak rá kell nézni az órára.

Akármelyik utat választod, miután elkészültek a prototípusok, érdemes letesztelni őket valódi felhasználókkal is. Előfordulhat, hogy olyan problémák jönnek elő, melyekkel nem is számoltál. Aggodalomra semmi ok, ebben a fázisban még bátran korrigálhatod a terveket. Persze a módosítás után, újabb tesztekre lesz szükség mindaddig, még az összes felbukkanó nagyobb hibát ki nem javítottad.

Végső állomás

Ezen a ponton már azt hihetnéd, hogy nyugodtan hátradőlhetsz, de az igazság az, hogy a projekt sosem ér véget.

Azon túl, hogy végig kell követned mind a grafikus, mind pedig a fejlesztők munkáját, egy olyan folytonos tesztelési fázis veszi kezdetét, mely a termék „haláláig" tart.
A különféle tesztelési és kutatási módszerek segítségével élezheted, finomhangolhatod a produktumot, hogy még inkább megfeleljen az amúgy is állandó jelleggel változó felhasználói igényeknek…