Webshark Blog

Az információs architektúra a weboldaladon vagy az applikációdban megjelenő információk felépítése. Amikor arra törekszünk, hogy megfelelően elrendezzük az információkat, akkor ennek eredményeként könnyebbé válik a weboldal tartalmának megértése és a navigáció. (Frissítés, 2022.03.24. – Egy új fejezettel bővítettünk: Oldalstruktúra és SEO: milyen oldal-felépítést javasol a Google?)

A designerek a webdesign folyamat elején gyakran információs architektúrát is készítenek egy adott termékhez kapcsolódóan. Ilyenkor meghatároznak minden utat, melyet a felhasználók bejárhatnak az adott weboldalon vagy appikációban, és ennek megfelelően rendezik el az információkat. Ugyanakkor az információs architektúra több, mint egy szimpla oldaltérkép.

Mi az információs architektúra?

A definíció szerint az információs architektúra annak gyakorlata, hogy miként rendezd el valaminek a részeit úgy, hogy az érthető legyen.

Érthetőbben: az információs architektúra a weboldaladon vagy az applikációdban megjelenő információk felépítése. Amikor arra törekszünk, hogy elrendezzük az információkat, akkor ennek eredményeként könnyebbé válik a weboldal tartalmának megértése és a navigáció. Ez hasonló ahhoz, mint amikor egy író a történet megírása előtt vázlatot, vagy amikor egy építész először tervrajzot készít.

Bármilyen digitális termék, weboldal vagy applikáció tulajdonképpen az információk gyűjteményének tekinthető. Az információs architektúra rendezi el ezeket az információkat olyan módon, hogy könnyű legyen őket megérteni, és a későbbiekben hozzáigazíthatók legyenek a változó weboldalhoz vagy alkalmazáshoz.

Minden olyan weboldal vagy applikáció, melynek megfelelő az információs architektúrája, strukturálisan megalapozottnak tekinthető. Olyan ez, mint az építkezés. Ha tudjuk, hogy melyek a fontos pillérek, és ezekkel kezdjük az építkezést, akkor stabil alapokat rakunk le. Ha pedig van egy stabil alapunk, akkor anélkül tudjuk folytatni a munkát, hogy az építmény bármikor is bizonytalanná válna.

Példaként itt van a Spotify információs architektúrája, mely így néz ki:

Az információs architektúra egy weboldal esetében leírja annak hierarchiáját, navigációját, funkcióit és interakcióit. És csakúgy, mint egy építészeti tervrajz, ez a legfontosabb dokumentum a designer számára, hiszen távlatból mutatja meg a teljes terméket.

Az információs architektúra tehát alapvetően egy tervrajz, vizuális ábrázolása a termék felépítésének, funkcióinak és hierarchiájának. Az, hogy mennyire részletes lesz, a designertől függ. Ezért adott esetben magába foglalhatja a navigáció leírását, a tartalom ismertetését és a folyamatokat. A méretet és a formát tekintve nincs korlát,  persze célszerű, ha az emberek az IA alapján megértik, miként működik a termék.

Miért fontos az információs architektúra?

Ha világos és hatékony designt szeretnél, akkor egy világos és hatékony információs architektúra kialakításával kell kezdened. Ez a feladat rákényszerít arra, hogy gondolkodj, így a felhasználóidnak már nem kell majd. Amikor az információs architektúrán töröd a fejed, akkor nem úgy tekintesz a designra, mint oldalak és pixelek összességére, hanem mint absztrakt gondolatok, főnevek és igék gyűjteményére.

Ilyenkor rádöbbensz, hogy egy app vagy weboldal nem más, mint információ. Az a mód, ahogy összefűzzük az információkat, meghatározza, hogy az emberek miként tudják majd fogyasztani ezt az információt. Ez olyan, mint egy gondolat vagy egy mondat megalkotása. A főnevek és az igék megfelelő elrendezése a mondaton belül meghatározza azt, hogy mennyire könnyen érthető az üzenet.

Egy applikáció és egy weboldal is csak főnevek és igék összessége. A főnevek alkotják az alkalmazásod vagy weblapjaid világát. Az igék viszont a cselekvést jelzik, melyet a felhasználók tehetnek a megjelenő főnevekkel. Olyan főnevekre kell gondolni, mint például a dalok, a mappák, a felhasználók, a fotók, az éttermek, a pénz, vagy a barátok. Ezekhez kapcsolódnak az igék: lejátszani (egy dalt), létrehozni (egy mappát), létrehozni (egy felhasználót), megosztani (egy fotót), értékelni (egy éttermet), (pénzt) küldeni, vagy hozzáadni (egy barátot).

Az appok nagyobb részét, durván 80 százalékán főnevek jelennek meg, és csak egy kisebb részét teszik ki az igék, vagyis azok az elérhető cselekvési lehetőségek, melyeket az emberek tehetnek.

Miben segíti a felhasználót a jó információs architektúra?

• Csökkenti a kognitív terhelést – ha túl sok információ jelenik meg egyszerre, strukturálatlanul a kijelzőn, akkor a felhasználó nem tudja, hogy mire kellene figyelnie. Ha túl sok a döntési lehetőség, akkor a felhasználó nem fog tudni döntést hozni.
• Felgyorsítja a szükséges információ megtalálásának folyamatát – a felhasználó ugyanis a világos navigációs lehetőségek révén képes könnyen és gyorsan megtalálni, amit keres.
• Hagyja a felhasználót a feladatra összpontosítani – ha a navigáció nincs megterhelve felesleges elemekkel, akkor nem fogja eltéríteni a felhasználót.
• Könnyebben megérti az információt, hiszen átlátja a kontextust – amennyiben a felhasználó látja, hogy hol áll egy weboldalon, akkor az kontextusba helyezi az épp fogyasztott tartalmat.
• Csökkenti a frusztrációt és az elveszettség érzését – amennyiben a felhasználó világosan látja, hogy hol találja meg azt, amire szüksége van, akkor nincs szüksége további segítségre.

Miben segíti a céget a jó információs architektúra?

• Tovább maradnak a látogatók a weboldalon.
• Növeli a konverzió esélyét – hiszen, ha a felhasználó könnyen megtalálja, amit keres, és egyszerűen el is éri, az jelentősen megnöveli a konverzió esélyét.
• Csökkenti az esélyét, hogy a látogató a konkurenciánál nézzen körül – amennyiben a felhasználó könnyen megtalálja a weboldaladon azt, amit keres, akkor nagyobb az esélye, hogy nem kezd el másik, jobban használható weboldalt keresni.
• Csökkenti az információ duplikációját – egy jó információ architektúra biztosítja azt, hogy nem jelennek meg többször azonos vagy hasonló információk egy weboldalon.
• A hatékonyabb használat miatt javul a megtérülés.
• Csökkenti az ügyfélszolgálat leterheltségét – hiszen a felhasználók megtalálják, amit keresnek, így nincs szükségük szóbeli vagy írásbeli segítségre.

Hogyan tervezzünk információs architektúrát?

Az IA design egy nagyon hasonló folyamat, mint egy folyamatábra megrajzolása. Formákat jelenítesz meg, melyeket összekötsz vonalakkal valamilyen rendszer alapján egyetlen dokumentumon belül. A kihívás elsősorban az, hogy megértsd, pontosan miként működik az appod vagy a weboldalad a felhasználó szemszögéből, valamint hogyan szervezd az információkat érthető formába.

Két dologra mindenképpen figyelni kell a megalkotásakor:

1. Ki kell alakítani egy vizuális hierarchiát a funkciókat, viselkedést illetően.
2. Létre kell hozni a megfelelő jeleket a különböző funkciók, interakciók, folyamatok számára.

Tehát mint egy folyamatábránál is, mondjuk a négyzetek jelzik a folyamatokat, míg a rombuszok a döntési pontokat. A legfontosabb annak jelzése, hogy az egyes összetevők hol helyezkednek el a hierarchiában és miként vannak címkézve, megjelenítve.

Információs architektúrát készíteni „fentről lefelé” nagyon nehéz dolog. Olyan, mint ha egy mérnököt arra kérnél, tervezzen meg egy autót a tetejétől az aljáig. Ehelyett inkább alkatrészenként kell nekiállni, vagyis az egyes egységek megtervezésével kell kezdeni.

A legértékesebb része a hierarchia vizuális ábrázolása, nem csak azért mert így könnyebben érthető a termék, hanem mert megmutatja a kulcsfontosságú részeit. Ugyanakkor minden interakció érthetővé válik prototípus használata nélkül azok számára, akik a terméken dolgoznak.

Egy jó információs architektúra univerzális és időtlen

A jó információs architektúránál mindig bizonyos elvek és minták érvényesülnek. Például, a felső navigációs sávban szereplő információknak kellene mindig a legfontosabbnak lenniük. A dolgok ott válnak érdekesebbé, amikor azt látjuk, hogy az információk mindig azonos struktúrát akarnak felvenni, az információ természetétől függetlenül. Tipikus mintázat például, hogy minél mélyebbre navigálunk az információs architektúrában, annál távolabb jutunk az általános elemek gyűjteményétől egy-egy specifikus elem irányába.

Az iPod információs architektúrája változatlan marad, miközben a felhasználói felület sokat változott:

Minták megjelenése

Ha valaki már elég sok appot, weboldalt vagy digitális terméket készített, akkor azt látja, hogy bizonyos szinten az információk struktúrája mindegyiknél ugyanaz. Általában csak az információ az, ami változik. Egy jó designer pedig tudja, hogy, miként alkalmazza a már kipróbált és működő struktúrákat.

Az információs architektúra kialakításánál tehát ezekkel a struktúrákkal kell kezdeni. Amikor elkezdjük beleönteni az információt a megfelelő konténerekbe, akkor kezdjük személyre szabni az információ egyedi nyelvét. Tehát például az olyan vizuális információk, mint a fotók, másként jelennek meg, mint mondjuk az adatalapú információk.

A minta ugyanaz, csak a tartalom más:

Az információs architektúra tervezésének lépései

Egy jól átgondolt információs architektúra a legjobb módja annak, hogy a felhasználóidat végigvezesd a tartalmaidon. Ha a tartalmaid nincsenek megfelelően elrendezve, akkor a látogatók elveszettnek érzik magukat a weboldaladon. Egy jó IA figyelembe veszi a felhasználói igényeket, és megmutatja nekik az utat a tartalomban.

Az információs architektúra kidolgozása néhány lépésben megoldható. Az alábbiakban felsoroljuk ezeket a lépéseket, de nem minden esetben lesz szükség mindegyikre.

Határozd meg a célokat!

Akár el akarsz adni valamilyen terméket, akár csak egy blogot működtetsz nonprofit alapon, valamilyen célod biztos, hogy van, illetve néhány mérőszámod, ami megmutatja, hogy sikeres vagy-e. Ez a cél lehet egy konverziómennyiség vagy egyedi látogatószám adott időkereten belül. A lényeg, hogy ezek jól meghatározott célok legyenek.

Tartalomaudit

Ahhoz, hogy megismerd a tartalmadat, tartalomauditra lehet szükséged. Ez különösen akkor fontos, ha a meglévő információs architektúrát szeretnéd csiszolni. A tartalomaudit során annyit teszel, hogy valamennyi információmorzsát elemzel a weboldalon. A tartalomaudit mondja meg, hogy mi az, ami működik, és mi az, ami nem.

A meglévő tartalom rendszerezése

Ha már megvannak a céljaid, és látod, hogy milyen tartalmak állnak a rendelkezésedre, akkor a következő lépés, hogy ezeket elkezded rendszerezni. Létrehozol tartalmi csoportokat, melyek összekapcsolsz, hogy aztán egy jól szervezett egységet képezzenek. A rendszerezés után nem maradhatnak különálló információs darabkák, mert mindegyiknek valamilyen csoportba kell tartoznia. Ezeket a csoportokat aztán már könnyebb lesz értelmezni.

Ebben a fázisban létrehozhatod az oldaltérképet, melynél azonban nem csak az elsődleges menüre vagy fő navigációra kell fókuszálnod, mivel ezek még nem nyújtanak teljes képet. Világosan kell látnod a kapcsolatokat, linkeket az egyes információs elemek között, és hogy ezek együtt miként közvetítik az üzenetet. Egy jó oldaltérképről kiderül, hogy a felhasználóknak milyen választási lehetőségei vannak, és hogyan juthatnak az igényeiknek megfelelő tartalmakhoz.

Értsd meg a felhasználók igényeit!

Az eddigi lépések alapvetően a Te igényeidre fókuszálnak, és eddig még nem nagyon vetted számba a felhasználók igényeit. Úgyhogy itt már nézőpontot kell váltani, ehhez pedig az kell, hogy ismerd a közönséged. A felhasználók várakozásainak és reakcióinak ugyanis hatással kell lenniük az információs architektúrára.

A lényeg, hogy a látogatóid szemével kezd szemlélni a tartalmaidat! Fontos, hogy többféle típusú felhasználódnak ismerkedj meg a vágyaival, elvárásaival, valamint az is, hogy amennyire lehetséges, maradj elfogulatlan és tárgyilagos. Persze, Te nyilván szereted a tartalmaidat, de fogadd el, ha a felhasználók másként látják őket. Ez persze nem azt jelenti, hogy mindent komolyan kell venni, amit mondanak, de ha több ember is ugyanazt állítja, akkor érdemes odafigyelni rá.

Akár személyes, akár online felmérések, interjúk, fókuszcsoportos beszélgetések szolgáltathatnak információt a közönségedről. A lényeg, hogy a végén legyen egy világos képed arról, hogy az emberek mit akarnak, amikor kapcsolatba lépnek a weboldaladdal.

Dolgozd fel az információkat!

Ezen a ponton tehát tisztán látod a rendelkezésedre álló tartalmat (vagy azt, amit el kell készítened), illetve a felhasználóid igényeit. Az elkészült oldaltérképet össze kell vetned azzal, hogy milyen tartalom áll rendelkezésedre, és hogy az emberek mit akarnak a weboldaladon. Ennek eredményeként ki tudod tölteni a meglévő réseket, és létre tudod hozni az (új) információs architektúrát.

Alakítsd ki az információs architektúrát!

Most már minden adott ahhoz, hogy megrajzold az információs architektúrát. Fontos azonban, hogy az elkészült IA érthető legyen azok számára, akik abból dolgoznak majd, világosan lássák a kapcsolatokat az egyes részek között.

Milyen eszközöket használhatsz a tervezésre?

Számtalan szoftver rendelkezésre áll, ha információs architektúrát kell tervezni, és akad közöttük olyan is, amit könnyű használni. A draw.io használata ingyenes, és összekapcsolható a Google Drive-val. Ezáltal többen is dolgozhattok ugyanazon a projekten, és élőben láthatjátok a változásokat.

A Lucidchart még jobb felhasználói élményt kínál, ráadásul előre elkészített template-ek is találhatók benne, több integrációs lehetőséggel, és mobil appal kiegészítve. További lehetőség az Omnigraffle,a Visio, a Diagrams.net vagy a Coggle használata. Mindegyiknek vannak előnyeik és hátrányaik, valamint attól függően használhatók, hogy ki, milyen környezetben dolgozik.

Tippek az információs architektúra elkészítéséhez

Értsd meg, mit akarnak a felhasználók!

Ehhez felhasználói interjúkra lesz szükséged, mert ezek segítenek abban, hogy valóban megértsd a felhasználóid igényeit, problémáit, hogy milyen feladatokat akarnak végrehajtani, milyen célokat akarnak elérni a weboldaladon. Ez alapján gondold végig, hogy miként lépnek interakcióba a weboldaladdal, és milyen úton tudják végrehajtani a feladataikat.

Legyél tisztában azzal, hogy mi a fontos, és mi nem az!

Ne félj attól, hogy bizonyos dolgok fontosságát csökkentened kell! Ez szükséges ahhoz, hogy más elemek fontosságát növelni tudd. Szükség van a kontrasztra az átláthatósághoz. Ezért szabadulj meg az információtól, ahol kell, és csökkentsd a fontosságát, amikor az előbbi már nem megy!

Ne a hierarchiára, hanem a struktúrára figyelj!

A hierarchia bármikor megváltoztatható, a kezdőlap pedig mindig a kezdőlap marad. Ami érdekesebb, hogy hova tartanak innen az emberek, miként jutnak el a megfelelő oldalakra, és mi van a kettő között.

Próbáld meg minimalizálni a hierarchia szintjeit!

Minél jobban csökkented a szintek számát, annál kevesebb kattintásra lesz szükségük a felhasználóknak ahhoz, hogy elérjék a célt.

Az egyes szintek vizuálisan is elkülöníthetők legyenek

Tehát például a hierarchia tetején lévő címsorok íródjanak nagyobb betűkkel. Az ilyen vizuális eltérések a fontosabb részekhez vezetik a felhasználók tekintetét.

Gondolkodj információs “vödrökben”!

Gondold át, hogy mely dolgok tartoznak össze! Például a profilról szóló rész megfelelő hely arra, hogy ott jelenjen meg minden, ami a felhasználóhoz kapcsolódik, ahelyett, hogy szétszórnád ezeket az információkat az app vagy a weboldal különböző pontjain.

Minden folyamat legyen logikus!

Minden lépésnek legyen értelme az úton. Ez azt jelenti, hogy egy regisztrációs űrlap ne a beállításokhoz vezessen, a kamera funkcióra kattintva ne a térkép nézetbe jusson a felhasználó, stb.

Ne félj újratervezni!

Ahogy az alkalmazásod vagy weboldalad növekszik és fejlődik, úgy válhat szükségessé, hogy újra átgondold az információs architektúra kialakítását. Az információs architektúrát ne úgy készítsd el, hogy az az örök időknek szó, hanem azzal a szemlélettel, hogy folyamatosan változik. Ne a tökéletességre törekedj, hanem egy egyszerű, használható IA-t hozz létre.

Frissítés, 2022.03.24.:

Oldalstruktúra és SEO: milyen oldal-felépítést javasol a Google?

A piramis alakú oldalstruktúra a 2000-es évek elején kezdett terjedni a weben, így nem egy vadonatúj dologról van szó. Azonban egyelőre nem lépett át rajta az idő, sőt a Google nemrég megerősítette, hogy ez a legjobb megoldás, ha érthetővé akarjuk tenni számára a weboldalunkat.

A piramis alakú oldalstruktúra lényege egyszerű, ma már szinte természetes (de nem volt ez mindig így): a főoldal helyezkedik el a legfelső szinten általános kulcsszavakkal, és minél mélyebbre ereszkedsz a weboldalban, annál speciálisabbá válnak a kategóriák és az oldalak.

A piramis alakú oldalstruktúra eredete

Az első komolyabb említése a piramis alakú oldalstruktúrának a 2001-es Webmaster World-höz kapcsolódik, ahol téma-piramisokról beszéltek a szakértők.

Ez a weboldastruktúra azért indult terjedésnek a 2000-es évek elején, mivel megjelent néhány olyan tanulmány, mely a „témák” koncepcióját és a linkek ehhez igazodó elrendezését vizsgálta a weboldalak megértése szempontjából. Hiszen, ha a keresőmotorok a weboldalakat és a linkeket témák szerint vizsgálják, akkor érdemes a weboldalakat is témák szerint elrendezni.

Tehát, ha egy oldal például horgászfelszereléseket árul, akkor a főoldala erről szól általánosságban, viszont innen egy kattintással a felhasználó olyan témákig jut el, mint a horgok, csalik, vagy a ruházat. Ezeken belül pedig a következő kattintással még specifikusabb témákat, illetve termékeket talál.

Végül pedig a piramis alján található a legtöbb longtail kulcsszó, illetve „tégla”, melyek egy-egy aloldalnak felelnek meg. Ugyanakkor minél feljebb nézed a hierarchiát, annál kevesebb tégla lesz egy szinten, mígnem a tetejére elérve egyetlen tégla található, maga a főoldal.

A másik lehetőség: a lapos oldalstruktúra

Egy SEO Office-hours Hangout során valaki feltette a kérdést John Muellernek, a Google szakemberének arról, hogy mit szól hozzá a Google, ha egy webáruház olyan statikus navigációs menüt használ, mely több ezer linket tartalmaz. Ezt hívják lapos oldalstruktúrának, ahol nincsenek hierarchiába rendezve az oldalak, vagyis a főoldaltól minden link egy kattintásnyira található.

Ennek a lapos oldalstruktúrának a megjelenése is a 2000-es évek elejére tehető, és azt próbálták meg vele elérni a weboldaltulajdonosok, hogy minél több aloldalukat indexeljék a keresőmotorok, és minden aloldal kapjon elegendő mennyiségű PageRanket a főoldalra mutató linkektől.

Ez a gondolat abból fakadt, hogy a SEO korai éveiben még sokan használták a katalóguslinkeket, melyek tipikusan a weboldalak főoldalára mutattak, nem pedig az egyes aloldalakra. Így pedig a főoldalak révén csepegett le némi PageRank az egyes aloldalakra.

És hogy minél több aloldal kapjon a PageRankből, úgy kellett elrendezni őket, hogy minél több aloldalra közvetlenül a főoldalról mutasson link. Kialakultak tehát a lapos oldalstruktúrába rendezett oldalak is.

Miért előnyösebb a piramis?

John Mueller a fentebb említett kérdésre adott válaszában elmondta, hogy gyakran látják, hogy vannak weboldaltulajdonosok, akik rettegnek a feltérképezési mélység miatti korláttól, és azt akarják elérni, hogy a keresőrobot minél gyorsabban feltérképezze a teljes weboldalukat. Ezért lapos hierarchiába rendezik el az oldalt, például a főoldali mega menüben akár ezer link is található.

És habár ebben van ráció, egy piramis struktúra segít a Google-nek abban, hogy megértse az egyes kategóriák és oldalak kapcsolatát is a feltérképezett weboldalon. Tehát, ha látják, hogy egy kategória kapcsolatban van más alkategóriákkal, akkor az kirajzolja a közöttük lévő viszonyt. Ez pedig segít abban, hogy megértsék, miként kapcsolódnak össze a dolgok, hogyan működnek együtt az oldalon.

Ezzel szemben egy teljesen lapos oldalstruktúra esetében a bot azt látja, hogy minden aloldal egyforma fontosságú, és nem lehet tudni, hogy ezeknek pontosan mi közük egymáshoz.

A legtöbb oldal számára tehát előnyös a piramis struktúra használata, ugyanakkor persze az sem jó, ha ez a piramis túlságosan nagyra nő, vagyis a felhasználóknak sokat kell kattintania, amíg eljut a keresett tartalomhoz. Vagyis egy elfogadható mélységű struktúrára van szükség, ahol néhány kattintással elérhető bármilyen tartalom.

John Mueller is azt tanácsolta ezért a kérdezőnek, hogy jobban jár, ha nekiáll átalakítani a weboldala struktúráját, hogy megkönnyítse a keresőmotorok számár az oldal megértését, az egyes aloldalak összefüggéseit, és így azt, hogy a megfelelő jelzések könnyebben jussanak el a kapcsolódó részekhez.