Hallgassa meg a cikk hangos változatát
Az UX-folyamat szokásos részeként a tervezők a termékfejlesztés során információs architektúrát hoznak létre. Az információs architektúra minden olyan utat és ösvényt meghatároz, amelyet a felhasználók egy alkalmazáson vagy weboldalon keresztül bejárhatnak, sokkal több, mint egy oldaltérkép, amely megmutatja, hogy melyik oldal hova vezet.
Hasonlóan ahhoz, ahogyan az építészek tervrajzot használnak egy ház minden részének megépítéséhez, a fizikai szerkezetektől kezdve a bonyolultabb belső munkálatokig, mint az elektromos és vízvezetékrendszer, az információs architektúra leírja egy weboldal vagy alkalmazás hierarchiáját, navigációját, funkcióit és interakcióit. És ahogyan a tervrajzok a legértékesebb dokumentumot jelentik egy építész számára egy épület építése során, úgy az információs architektúra is a leghatékonyabb eszköz lehet egy tervező arzenáljában.
Az információs architektúra kidolgozása azonban nem olyan egyszerű, mint a funkciók listájának összeállítása és működésük feltérképezése – vizsgáljuk meg a folyamatot.
Mi az információs architektúra, és miért fontos?
Az információs architektúra (IA) a tervrajzhoz hasonlóan a termék infrastruktúrájának, funkcióinak és hierarchiájának vizuális megjelenítése. A részletesség szintje a tervezőtől függ, így az IA magában foglalhatja a navigációt, az alkalmazás funkcióit és viselkedését, a tartalmat és az áramlásokat is. Az IA méretének vagy formájának nincs meghatározott határa; mindazonáltal a termék általánosított szerkezetét kell magában foglalnia, hogy (elméletileg) bárki képes legyen elolvasni és megérteni, hogyan működik a termék.
A tervrajzra való hivatkozást gyakran fogjuk használni, mert a két dokumentum célja szinte azonos. A tervrajzhoz hasonlóan az IA a tervezőknek (valamint a termékfejlesztési és mérnöki csapatoknak) madártávlatú képet nyújt a teljes termékről. Az alkalmazás vagy weboldal működésének egyszerű és érthető ábrázolását nyújtó egyetlen dokumentum megléte létfontosságú az új funkciók kifejlesztéséhez, a meglévők frissítéséhez, valamint ahhoz, hogy lássuk, mi lehetséges a meglévő terméket figyelembe véve.
Az IA rendelkezésre állásával lényegesen könnyebbé válik az új funkciókkal és megvalósításokkal kapcsolatos kulcsfontosságú döntések meghozatala, a termékváltozások ütemezésének megértése, valamint a felhasználói viselkedés követése több folyamaton keresztül.
Merüljünk el egy alapvető videóban, hogy lássuk, hogyan épül fel egy IA.
Hogyan tervezzünk információs architektúrát
A UX folyamat részeként az IA tervezése nagyon hasonló mintákat követ, mint a folyamatábrázolás: Adj hozzá alakzatokat, és kösd össze őket vonalakkal szervezett módon egyetlen dokumentumhoz. Az IA építése során a kihívás abban rejlik, hogy megértsük, hogyan működik valójában az alkalmazás vagy a webhely a felhasználó szemszögéből, és hogyan szervezzük ezt az információt olvasható, olvasható formátumba.
A tényleges IA építésének két fő követelménye van: a vizuális hierarchián (azaz a funkciók, funkciók és viselkedés hierarchiáján) keresztül történő szervezés, valamint a különböző típusú funkciók, interakciók és folyamatok megjelenítésére szolgáló legenda létrehozása. Egy szabványos folyamatábránál az alakzatok meghatározott követelményeket követnek (a téglalapok a folyamatok, a rombuszok a döntési pontok stb.); ennek a nómenklatúrának a követése azonban nem követelmény.
Más szóval, az IA felépítésének legfontosabb tényezői az, hogy az architektúra egyes összetevői hol helyezkednek el (hierarchikusan), és hogyan vannak felcímkézve és megjelenítve.
A vizuális hierarchia megértése és megjelenítése
Az új információs architektúra létrehozásának legnagyobb kihívása szinte mindig a hierarchikus felépítés. Gyakori tévhit, hogy az IA-t “felülről lefelé” kell felépíteni. Ez szinte mindig nehezebb, hacsak nem egy meglévő termékről van szó, mint például a fenti videóban.
Az IA nulláról való felépítésekor, hacsak a webhely vagy az alkalmazás nem követ egy szabványos formátumot, a legfelső szint után nagyon nehéz bármit is megrajzolni. Ez olyan, mintha egy szerelőt arra kérnénk, hogy részek helyett felülről lefelé építsen meg egy autót. Minden egyes darabot előre meg kell építeni, saját kutatással, tervezési idővel és fejlesztéssel. Ugyanez igaz az IA-ra is.
A vizuális hierarchia megjelenítése értékes előnye az IA-nak, nemcsak azért, mert jobb kontextust biztosít az olvasó számára, hanem általánosítja a termék kulcsfontosságú régióit is. Ha az alkalmazásod legjelentősebb funkciója a fuvar megrendelése (a la Uber vagy Lyft), amelyet a kezdőlapról lehet megtenni, akkor azon az oldalon lesz a legtöbb érintkezési pont és a termék legnagyobb értéke. Ugyanez igaz lesz a vizuális hierarchiára is.
A hierarchia megértéséhez jól jönnek az oldaltérképek, mivel számszerűen rendezik az oldalakat (például 1.0 Főoldal, 2.0 Fizetés, 2.1 Fizetési mód hozzáadása stb.). Vagy tekintsük az alábbi képen látható példát a Duke Egyetem könyvtári honlapjára, ahol a legfelső navigáció nem csak a tetején található, hanem ki is van emelve, hogy az egész alkalmazásban látható legyen.
A formák, színek és egyéb vizuális elemek hierarchiája
A hierarchián kívül a fenti architektúra egy másik dolgot is jól csinál: Egyszerű legendán és néhány kulcsmondaton keresztül minden egyes foglalatossági pontot szükség szerint egyedileg jelenít meg. A legenda jelöli az oldal és a tartalom típusát, és jelzi az alakzatok színei közötti eltéréseket. Ez azért fontos, mert bár a Duke webhelye meglehetősen egyszerűnek tűnik, az IA csak három szint mélyre megy. Minden sárga téglalap egy-egy alkalmazást jelöl, így az egyes dobozokban található folyamatok nem szerepelnek ebben a dokumentumban!
A struktúra még e részek nélkül is olyan, hogy a honlapon való navigálást pusztán az IA segítségével is megérthetjük. Ez megszűnik, amikor elérünk egy alkalmazást a weboldalon belül – nem is kell.
A lenti IA egy játékhoz készült. Négy alakzat, színek nélkül és okosan elhelyezett szövegrészletek használatával minden fontosabb interakció prototípusok nélkül is érthető, és ami még fontosabb, bárki számára érthető, aki dolgozik rajta.
Ez a modell nem tökéletes, de világosan megszervezi az alkalmazáshierarchiát, és körülhatárolja, hogy a felhasználó mit lát vagy mit csinál egy adott ponton.
A legjobb információs architektúra-eszközök
Megannyi olyan szoftver létezik, amellyel IA-t lehet építeni, de kevés olyan egyszerű és gyors, amely eléggé élvezetessé teszi az élményt. Vagy legalábbis könnyen kezelhető.
A fenti videóban használt Draw.io teljesen ingyenes személyes és professzionális használatra, és automatikusan csatlakozik a Google Drive-hoz. Integrációi vannak a Confluence és a JIRA rendszerrel is, amelyek fizetősek. A Draw.io kiválóan alkalmas folyamatábrázolásra, felhasználói áramlatok és információs architektúra létrehozására, a Drive funkcióval pedig több ember is dolgozhat ugyanazon a dokumentumon, és élőben láthatja a változásokat. Van egy ingyenes offline verzió is.
A Lucidchart egy másik nagyszerű eszköz, amely valamivel jobb élményt nyújt, mint a Draw.io, és további előnyökkel rendelkezik, például előre elkészített sablonokkal, sokkal több integrációval, mobilalkalmazással (2,5 csillagosra értékelve az App Store-ban) és vállalati támogatással.
Az Omnigraffle és a Visio régóta az iparág meghatározó eszközei, és kiválóan működnek az IA-tervezés kialakításához és karbantartásához, bár a Visio csak online elérhető (a régebbi offline verzió csak Windows-ra készült), míg az Omnigraffle csak Mac-re készült, és külön kell megvásárolni a MacOS és iOS verziókat. Az OmniGraffle egyik előnye a főbb versenytársakkal szemben, hogy JavaScript és AppleScript automatizálást biztosít, ami a legtöbb tervező számára szükségtelen lehet, de jellemzően a főállású információs építészek értékelik.
A fent felsorolt eszközök mindegyike a gyorsaság és az egyszerű használat érdekében készült, különösen a folyamatábrázolás körül, amely szinte azonos elveket követ az információs architektúrával. Más alkalmazások, mint például a Balsamiq, a MindMeister, a MindManager vagy az XMind mind hasonló stílusú viselkedést kínálnak, de más fő célokra, például prototípusok készítésére vagy agytérképezésre készültek.
Az információs architektúra legjobb gyakorlatai
Míg kevés meghatározott szabály van arra vonatkozóan, hogy mi az információs architektúra, a folyamat végigjárásakor vegye figyelembe a következőket:
Ne a hierarchiára, hanem a struktúrára koncentráljon
A hierarchia állítható. A kezdőlap mindig is a kezdőlap lesz, de hogy hová vezet, hogyan jutnak el a felhasználók ezekre a helyekre, és minden, ami a kettő között és azon túl van, azt később határozzuk meg.
Minden folyamatnak logikusnak kell lennie
Még ha az IA a UX-folyamatban a felhasználói interakciókat szolgálja is, minden lépésnek értelmesnek kell lennie. A regisztrációs képernyőknek nem szabad a beállításokhoz vezetniük, a kamera funkciónak nem szabad a térképnézethez ugrania… a lista folytatható.
Emlékezzünk az UX-folyamatra
Egy gyakori hiba, hogy csak úgy, erőforrások, kutatás vagy egyéb eszközök és munka nélkül készítünk IA-kat. Ez olyan, mintha azt mondanánk egy írónak, hogy vázlat nélkül írjon könyvet, vagy egy programozónak, hogy prototípusok nélkül kódoljon egy alkalmazást.
Te vagy a térképész
A térképészek mindent figyelembe vesznek egy térképen, a hegyvonulatoktól az államhatárokig. A térképkészítőkhöz hasonlóan a tervezők is meghatározzák, hogy mi kerül bele az IA designba. Az egyes oldalak, a konkrét felhasználói viselkedések, a döntési pontok kontextusa… és így tovább.
A térképész végső soron a felhasználói igények alapján dönti el, hogy mi kerüljön a térképre. Ugyanez igaz a tervezőkre is, ezért az IA-t a végfelhasználó, azaz a termékfejlesztő és tervező csapatok számára építi fel.
Az információs architektúra folyamatosan változik és fejlődik
Még egyszer a lényegre fúrva, minden IA a változásra épül. A termékek fejlődnek, a tervek változnak, a felhasználók alkalmazkodnak, és a ciklus újra és újra folytatódik. Ne vedd ezt túl komolyan, és tudd, hogy mindig lesz hova fejlődni. Ne törekedjen a tökéletességre; építsen egyszerű, alkalmazkodó IA-t.
Az információs architektúrám elkészült… Most mi lesz?
Az a közfelfogás, hogy bármilyen tervezési munka sosincs igazán kész, és ez minden bizonnyal igaz az információs architektúrára is. Növekszik, zsugorodik és változik, ahogy a termékeink is. Ellentétben egy épület tervrajzával, az IA mindig fejlődik a felhasználói igényektől kezdve az új funkciókig vagy egy termékfelújításig. A struktúra nagy része megmaradhat, és konzisztenciát biztosít a verziók között, hogy a felhasználók ne zavarodjanak össze.
És ez jó dolog. Ha tudjuk, hogy az IA egy képlékeny dokumentum – amely valószínűleg hetente, sőt néha naponta változik -, ez egy hatékony módja annak, hogy az alkalmazás vagy weboldal általános struktúráját anélkül tartsa fenn, hogy valaha is hozzá kellene nyúlnia a kódhoz vagy új prototípusokat kellene készítenie. Minél jobban ismeri a teljes termékfejlesztő csapat az IA-t, annál gyorsabban tudja majd mindenki, hogy mi lehetséges és mi nem, és mennyire komoly a feltételezett “könnyű munka”.
Azzal elérkeztünk az információs architektúra igazi szépségéhez: Nincs előre meghatározott kiindulópont. Míg a hagyományos UX-tervezési folyamat azt diktálja, hogy az IA-t elegendő felhasználói áramlat elkészítése után építsük fel; rengeteg felhasználói és versenykutatással felfegyverkezve, ez lehet az első dolog is, ami elkészül… vagy az utolsó. A prototípuskészítési folyamat gyakran olyan információkat hoz felszínre arról, hogy bizonyos viselkedéseknek vagy műveleteknek hogyan kellene történniük, amelyeket egy logikus vagy fantáziátlan IA alapján nehéz lenne elképzelni.
A folyamatosan fejlődő gyakorlatként az IA-tervezés éppúgy művészet, mint készség, részben ezért is van a nagyvállalatoknál információs építész pozíció. Ezek a tervezők a hatalmas rendszerek kapuőrei, és a termék időbeli növekedésének megértésével segítenek a termék-, tervezési és mérnöki csapatoknak abban, hogy éveken keresztül a helyes döntéseket hozzák meg. Ez a szervezeti lépték nem minden tervezőnek való, de minden tervező képes egyszerű, érthető információs architektúrát létrehozni.
– – – –
Javasolt olvasmány az információs architektúráról
IA for the Web and Beyond
How to Make Sense of Any Mess of: Information Architecture for Everybody
Information Architecture Basics
The Difference Between Information Architecture and UX Design