Keresés
Header Háttér

Webshark Blog

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

2017-04-260 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.

Most a prototypr.io egyik cikke segítségével vetünk rá egy mélyebb pillantást.

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

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

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 Te weboldaladon melyek a legfontosabb dolgok? Korlátozd a számukat 3-5-re!

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

Hogyan alakíts ki hatékony információs architektúrát?

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

3. Ne félj újratervezeni az információs architektúrát!

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. Sokan elfeledkeznek erről, mondván: szeretnék rendbe rakni az információs architektúrájukat, de nincs kapacitásuk az egész app vagy weboldal redesignjára.

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.