Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2018-03-200 komment

Mi az az információs architektúra? És miért fontos a webdesignban?

Habár korábban, a user experience-ről írt anyagunkban már érintettük az információs architektúra fontosságát, úgy véljük, hogy érdemes egy külön bejegyzésben is szólni róla.

A designerek a megszokott UX folyamat során általában információs architektúrát is készítenek az 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. Ugyanakkor az információs architektúra több, mint egy szimpla oldaltérkép.

Mi az információs architektúra?

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:

spotify-informacios-architektura

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ége, hanem mint absztrakt gondolatok, főnevek és igék gyűjteménye.

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.

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úra

 

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:

ipod-informacios-architektura

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:

informacios-architektura-minta-1

informacios-architektura-minta-2

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 dolgozhatnak ugyanazon a projekten, és élőben láthatják 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 vagy a Visio 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

1. 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!

2. 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.

3. 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.

4. 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.

5. Mindig legyen alapja

Ne a levegőbe építkezz, tehát a tervet alapozzák meg források, kutatások, információk. Különben olyan lenne a munka, mint ha egy programozónak kellene prototípus nélkül megterveznie egy appot.

6. 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.

Kategória: Design | Címke:

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.