Tervezzünk olyan felületet, ahol a felhasználó mindig megkapja az információt, amire szüksége van
Avagy esettanulmány arról, hogy miért és milyen információs architektúrát tervezünk a design projekt különböző fázisaiban
Kezdjük az elején: mi az az információs architektúra?
Az információs architektúra tervezés nagyon misztikusan hangzik és talán ezért is ért minden UX designer mást e fogalom alatt. Az információs architektúra (röviden IA) a mi értelmezésünkben
- segít abban, hogy a felhasználók minél gyorsabban megtalálják azt, amit éppen keresnek vagy amire szükségük van;
- abban is segít, hogy a felhasználó tájékozódjon a felületen. Ahogy Steve Krug fogalmaz Don’t make me think című könyvében:
a felhasználóként tudnom kell, hogy hol vagyok, mit látok és hogyan mehetek tovább?
- és nem utolsó sorban rendszerezi a tartalmat, hogy minél átláthatóbb és érthetőbb legyen, abban a kontextusban, amiben a felhasználónk éppen van.
Ezt szeretné a UX is, és így voltaképp mindkettőnek ugyanaz a célja: legyenek a felhasználói felületek érthetők és használhatók.
Magasszintű információs architektúrák
Információs architektúrát tervezünk akkor is, amikor
- valamilyen online folyamatban elkezdjük kibontani képernyő szinten a lépéseket és funkciókat;
- meghatározzuk és felépítjük az oldalak struktúráját: mik a kiemelt tartalmak, milyen egyéb tartalmak vannak az oldalon, azok hova mutatnak, vannak-e olyan pontok, amik már kiterelnek az oldalról;
- egy meglévő felületre vagy folyamatba szeretnénk új funkciót beépíteni és arról a megfelelő pontokon tájékoztatni akarjuk a felhasználókat;
- és meghatározzuk azt is, hogy milyen módon navigálunk az oldalon és az oldalak között, hogy működik a kereső.
A legtipikusabb use-case az IA tervezésére, amikor több oldalt vagy folyamatot kell a design projektben megtervezni. Látnunk kell a nagy egészet mielőtt neki kezdünk a képernyők gyártásának, így ilyenkor a Lo-Fi tervezését megelőzően összerakjuk a magasszintű információs architektúrát (szerk.: mindenképp olvasd el cikkünket a Lo-Fi tervezésről is, ha még nem tetted volna!).
Ez egészen leegyszerűsítve dobozokból, nyilakból és még több dobozból áll valamilyen hierarchiában ábrázolva. Megjelöljük a funkciókat, az oldalakat, felvázolunk egy egyszerű menüstruktúrát, megnézzük, hogy lesz-e olyan hivatkozás, ami az általunk tervezett terméken kívülre mutat. Összességében látjuk, hogy honnan és hova fogunk eljutni az alkalmazáson belül és a felhasználó is tudni fogja, hogy mit és hol talál.
Ha folyamatokról beszélünk, akkor tulajdonképpen egy folyamatábra a kiindulási pont: a fentiek kiegészülnek elágazásokkal, ami segít, hogy átlássuk a különböző eseteket és egyúttal meghatározzuk, hogy minek kell egy oldalon szerepelnie.
Viszont nem csak az oldalak és folyamatlépések között beszélünk információs architektúráról. Önmagában minden oldalnak önállóan is van információs architektúrája, hiszen minden megjelenő elem információt hordoz: a legkisebb ikontól a felugró ablakokig. Talán ez is az oka, de az IA tervezése sokaknak annyira magától értetődő, hogy észre sem veszik, hogy épp az információs architektúrát is tervezik. UX designer az, aki a tervezés közben átgondolja az oldalon a terelést, navigációt és az összes folyamatot.
Egy új alkalmazás vagy weboldal felépítése is kihívás, de az IA tervezéskor legalább ugyanekkora kihívásnak tekinthetjük azt, amikor egy már meglévő struktúrába kell beletervezni egy új funkciót. Ebben az esetben nem az hangzik el, hogy „na, gyertek skacok, üljünk le és tervezzünk információs architektúrát!” Az életszerűbb az, hogy elkezdjük a felhasználói utakat felépíteni, közben tervezzük a képernyőket és szem előtt tartjuk, hogy milyen információt és mikor jelenítünk meg a felhasználónak.
IA tervezési tapasztalatok egy új funkció tervezésekor
A következőkben bemutatom, hogyan terveztük a UX-et és vele együtt az információs architektúrát az egyik projektünkben. Egészen konkrétan egy számlázó rendszerbe illesztettünk egy új, harmadikfeles szolgáltatást — ez tehát a meglévő rendszerbe új funkció tervezésének esete.
Mi volt adott?
- Abban a megrendelő szakértőivel egyetértettünk, hogy ne tervezzünk erre külön képernyőt, az új funkciót a meglévő képernyőkre érdemes rárakni.
- Tegyük ezt úgy, hogy a fő funkció továbbra is a számlázás maradjon, hiszen elsősorban ezért használják az ügyfelek a felületet, az új funkció egy kiegészítő szolgáltatás a számlázás mellé.
- Adott és véges elemkészletből dolgozhatunk annak érdekében, hogy a fejlesztési időt kordában tartsuk, tehát abból kellett főzni, ami már a hűtőben volt. Elég sok UI komponenst használhattunk, ugyanakkor ez azért korlátot is szabott a fantáziának.
A fentiek miatt az információs architektúra túlmutatott egy klasszikus folyamatábrán és oldalak közötti kapcsolatok ábrázolására sem volt szükség. De annál inkább szükség volt arra, hogy megtervezzük az információ megjelenítését és mivel már most is sok üzenet jelenik meg, ezért részletesebben kellett végig gondolnunk minden megjelenített tartalmat.
Hogy kezdtünk neki?
Miután megértettük az új szolgáltatás lényegét, átgondoltuk, hogy milyen főbb journey lépések vannak, amiken a felhasználó végigmegy.
Hogy zajlott a tervezés?
Elkezdtük felrajzolni és összekötni a képernyőket, de egyelőre még nem kattintható prototípus formájában, hanem folyamat-szerűen, nyilakkal. Az oldalakon pedig elhelyeztük a funkciókat és tartalmat a megfelelő prioritásokkal. Ez egészen hasonlít egy “klasszikus” információs architektúrára, nem? 😊
Meghatároztuk, hogy mik azok a belépési pontok, ahol tájékoztatni lehet a felhasználót az új szolgáltatásról. Majd azon gondolkoztunk, hogy mikor és mennyi információt adjunk és pontosan mely felhasználói körnek. Kemény dió, mert ha túl sok információt osztunk meg egyszerre, akkor könnyen elijeszthetjük a felhasználót, de a fordítottja is ugyanúgy igaz. Ha nem a lényeget mutatjuk és nem tudjuk megfogni, hogy mi ez az új szolgáltatás és az miért jó neki, akkor nem fog hajlandóságot mutatni arra, hogy legalább elgondolkodjon rajta, és nem fogja használni sem.
Ugyanez igaz az időzítésre is, tehát hogy mikor adjuk a felhasználónak az információt. Arra törekedtünk, hogy hagyjuk, hogy a felhasználó megcsinálja a szokott módon, amiért a felületre jött, de közben fedezze fel az új információs elemeket: jelölő a számlán, beúszó üzenet, összefoglaló a főoldalon vagy tájékoztató pop-up, hogy csak néhány példát említsünk. A feladat nehézsége abban állt, hogy az új szolgáltatás iránt potenciálisan érdeklődő felhasználói csoportnak a folyamat megfelelő pontján az éppen elégséges és releváns információt adjuk át. Ehhez pedig a szöveges tartalom megfogalmazása és elhelyezése kulcsfontosságú.
Itt többen gondolhatják: álljon meg a menet, az üzenetek megfogalmazása és időzítése nem inkább klasszikus marketing feladat? Nem. Egy digitális termék fejlesztési folyamatán belül ezt nem lehet kiragadni, mivel az IA a termék tervezésének a része, egyben kell látni az összes érintett felülettel és megtervezett funkcióval. Fontos azt is figyelembe venni, hogy a folyamatból mikor tereljük ki a felhasználót tudatosan, ez pedig összefügg a megjelenített információ mennyiségével. Később természetesen be kell vonni a feladatba a marketing szakértőket, a copywriter-t vagy azt a kollégát, aki a megjelenített tartalomért felelős, hogy a szöveges tartalmakat végső formába öntse. De az üzeneteket, a szöveges tartalmak lényegét már a tervezési fázisban meg kell fogni, nem lehet Lorem ipsum-os képernyőkkel dolgozni a tervezés során.
Visszatérve a design folyamatra: a funkciókat és a működést már a Lo-Fi fázisban megkutattuk, begyűjtöttük a felhasználói visszajelzéseket és igen, volt olyan pont, ahol bele kellett nyúlni az információs architektúrába is. Ezért fontos, hogy az első körös validációk a UX/IA tervezés minél korábbi fázisaiban megtörténjenek és ha szükséges, akkor merjük újragondolni a folyamatokat.
És hogy mi történt ezután? Az már egy következő blogposzt témája 😉 Addig is ahelyett, hogy megpróbáljuk elhatárolni minél jobban az információs architektúrát a UX designtól: az adott design projektben fókuszáljunk arra, hogy a felhasználóink mindig tudják és értsék, hogy milyen felületet vannak, az mit szeretne nekik átadni és egyértelmű legyen, hogy általa hogyan tudják céljaikat elérni.
