Goal of presentation: showing how basic Information Architecture can be applied to a small project with tight deadline. Soundhead.hu is the leading Hungarian electronic music portal. For their 10th birthday they wanted to fully redesign the site - including UX design during the process. Besides the tight deadline I thought that for such a content heavy-site the basis of IA is a must. In my presentation I show how we rebuilt the navigation, created content models and wireframes using these models. The result: People find interesting content easily. Using "related content" links, visitors engage more deeply - they use the feature frequently. Conversion is around 20% (we don't have exact numbers yet). Question: What was the effect of using related content links? The automatism doesn't work until a reasonably big database. Using this feature manually, we achieved that 20% of people reading an article used the related content links to read something else, too. Are visitors staying longer on the site? After the redesing people are staying on the site ~15% longer. A big portion of IA is still not realized (tagging and search). We are working on it.

1. információ szervezés az
alapoktól a megvalósításig
Fábián Csongor – LogMeIn
felhasználói élmény tervező, használhatósági tanácsadó
12 éve mozgok a web körül: designerként, front-end fejlesztőként. Az utóbbi 3 évben figyelmem középpontjába a felhasználó
központú élmény-tervezés került. 2 nap múlva házigazdánk – a LogMeIn – kötelékét erősítem, mint UX designer. Foglalkozom
saját projektekkel is, mert szeretem a kihívásokat és ezek extra éles tapasztalatot és tudást jelentenek számomra.
Soundhead.hu saját projekt: a legnagyobb magyar elektronikus zenei portál. 2012-ben 10 születésnapját az oldal
megújításával ünnepelte.

2. információ szervezés az alapoktól a megvalósításig
4→10 navigáció átszervezés
11→14 tartalom-modellek
15→17 drótvázak
18→19 tanulságok
2 / 20
információ szervezés az alapoktól a megvalósításig

3. 3 / 20
információ szervezés az alapoktól a megvalósításig
Az UX design feladata az IA-ban: http://www.methodbrain.com/posters/dsia-ux-design-practice-verticals.pdf (DSIA™
Research Initiative). Az IA egy teljes embert igényel, de a feladatok egy részét a felhasználói élmény tervezésekor kisebb
projekteknél is meg tudjuk valósítani.

4. Navigáció
4 / 20
információ szervezés az alapoktól a megvalósításig
• Meghatározó fontosságú az oldal használhatósága és az információ-struktúra átláthatósága szempontjából
• A jó navigáció láthatatlan, az olvasó egyszerűen „csak rátalál” az őt érdeklő tartalmakra
• Kritériumok és best-practice-ek sokasága írja le a helyes navigáció működését
• A nyomtatott média tartalomjegyzékének megfelelője

5. navigáció: korábbi főmenük
főoldal cikkek partyfotók
buli ajánló fesztiválok
shop dj mixek shtrend.hu
videók forum regisztrálj!
5 / 20
információ szervezés az alapoktól a megvalósításig
• A címkék nem takarják a mögöttes tartalom mondanivalóját
• A főoldal elérése a logóra kattintással lehetséges, ez már elég jól ismert a célközönség körében
• A struktúra nem következetes
• Egyes menüpontok kimutatnak az oldalról (fórum, videók, shtrend.hu)
• A call-to-action-nek nincs helye a navigációban (regisztrálj!), ráadásul nem is nagyon tudhatjuk, hogy miért jó nekünk, ha
regisztrálunk

6. navigáció: korábbi almenük
cikkek partyfotók
lemezajánlók 2012
interjúk 2011
hosszabb írások 2010
technika 2009
korábbi hírek …
partnerek 2002
6 / 20
információ szervezés az alapoktól a megvalósításig
• Az almenüpontok szintén nem következetesek, sorrendjük nem hagyatkozik semmilyen logikára
• A címkék itt sem írják le a tartalmakat
• Általános címkék, melyek láthatóan azért jöttek létre, mert egyes tartalmak nem voltak beszoríthatók a meglévő feliratok alá
(hosszabb írások, korábbi hírek)
• Kizárólag reklám célzatú információ megjelenítésére használt tartalomnak nincs helye a menüstruktúrában (partnerek), ezt
az oldal alján célszerű elhelyezni

7. navigáció: új főmenük
írások események
podcast trend partifotó
videó fórum
7 / 20
információ szervezés az alapoktól a megvalósításig
• Minimális számú főmenü elem
• Igyekeztünk a célcsoport hangvételét, könnyedségét átvenni
• A sorrendet a frissülés és népszerűség gyakorisága is meghatározza
• Lehetőség szerint magyar címkék. Kivételt tehetünk olyan esetekben ahol a közönség, olvasók jobban értenek bizonyos
online környezetben elterjedt szavakat, mint magyar megfelelőiket (podcast)
• A kimutató tartalmakat bevontuk a soundhead.hu alá és egyszerűsítettük struktúrájukat

8. navigáció: új almenük
írások trend partifotó
hírek stílus minden idők képei
interjúk film pózok
szakmai art & design események
kritika gasztro
gondolat
tudósítás
8 / 20
információ szervezés az alapoktól a megvalósításig
• A címkék reprezentatívak, az olvasó tudhatja, hogy mit rejtenek (akár még a lélegzetvételükre is tud következtetni)
• Nincsenek átfedések (buli ajánló és fesztiválok összevonásra kerültek)
• A címkék nem zárják a tartalmakat (a kritika nem csak lemezkritika, hanem bármilyen egyéb kritika is lehet). Ez a
szerkesztők dolgát is egyszerűsíti a változatos tartalmak egyszerűbb besorolásában.
• Kedvenc címke a Minden idők képei…, Pózok. Az oldal látogatóinak gondolkodását egyszerűen leképezi: két okból
nézegetnek partifotókat: 1. mosolyogni akarnak 2. keresik magukat egy korábbi buli képei között. Az elsőt jobban
kiszolgálja a bevezetett két új címke.

9. navigáció: teszteljük le!
/ 20
információ szervezés az alapoktól a megvalósításig
• A navigáció tesztelése nagyon egyszerű: már egy 10 fős panel is adhat jó ötleteket
• Nagyobb lélegzetvételű projekteknél ez nem elegendő, használjunk távoli card sorting eszközöket. Több információért
nézzétek meg Varga Csaba prezentációját a témában: http://www.ustream.tv/recorded/29146125

10. új navigáció: rendszerbe szedve
1. Írások
Újdonságok az elektronikus
zene világában.
1.1. Hírek Kapcsolódhatnak pl.
fellépőkhöz, közelgő
eseményekhez.
Beszélgetések szakmán belül
1.2. Interjúk és kívül. Képekkel, videókkal,
mixekkel illusztrálva.
Minden ami „tanító jellegű”
tartalom. Pl. zene
1.3. Szakmai menedzsment, tech eszközök
bemutatása.
Kritikai írások lemezekről,
1.4. Kritika kiadványokról, helyekről.
Esszé jellegű írások változatos
1.5. Gondolat témakörökben akár külsős írók
által.
Beszámolók rendezvényekről,
1.6. Tudósítás eseményekről, konferenciákról
stb.
10 / 20
információ szervezés az alapoktól a megvalósításig
• Kategóriák leírásai segítenek az értelmezésben, útmutató a szerkesztőknek tartalmaik elhelyezésére
• Adtunk javaslatokat a tartalmak címére is (8 szavas felső korlát, első 3 szó meghatározó). Pl. Bónusz 2012 a világ 10
legjobb októberi fesztiválja között > Top 10-ben a Bónusz Fesztivál). Ha rosszak a címek és tartalmak, akkor hiába jó a
struktúra.
• Számozott rendszer, amivel kezdetben meggyűlt a bajunk. Célszerű olyan alkalmazást használni, ami ezt a feladatot
automatikusan végzi (Excel, Numbers vagy Word). Gyakran vissza kell nyúlni, át kell rendezni a struktúrát.

11. Tartalom
modellek
11 / 20
információ szervezés az alapoktól a megvalósításig
• A navigációval ellentétben a tartalom-modellek feladata nem az, hogy a felhasználó megtalálja a számára izgalmas
tartalmakat, hanem inkább az érdekes dolgok találják meg a felhasználót
• A tartalmak a legritkább esetben állnak önmagukban. Mindig van valamilyen kontextus, amit már maga a főkategória is
meghatároz.
• A tartalmak összekapcsolása a legjobb eszköz a látogató figyelmének hosszabb távú lekötésére
• Érdekes, hogy sokan nem használják ki azt a nem elhanyagolható információt, hogy ha már a látogató egy adott tartalmat
olvas, akkor feltehetően érdekli őt a téma. Ha behatárolható az érdeklődési köre, egyszerűen javasolhatunk kapcsolódó
tartalmakat

12. tartalom modellek: kilógó kapcsolódó tartalmak
12 / 20
információ szervezés az alapoktól a megvalósításig
• Basketball awareness test: Moonwalking Bear. http://www.youtube.com/watch?v=KB_lTKZm1Ts
• Nem mindegy, hogy a kapcsolódó tartalmakat hol helyezzük el. Ha megfelelően izgalmas az adott tartalom/cikk, akkor
normális, hogy a látogató közben nem nagyon figyel máshova az oldalon (pl. a sidebar-ra sem)
• Ezért célszerű a kapcsolódó, oldalon maradást célzó tartalmakat a cikk végén elhelyezni. Itt a látogató már túl van a
számára izgalmasnak tekintett cikken és tud egyébre összpontosítani
• Ebből következik természetesen, hogy az egyes cikkek tartalma és hosszúsága is meghatározó a figyelem lekötése/
leköthetősége szempontjából

13. kapcsolódó tartalmak korábbi megjelenítése
13 / 20
információ szervezés az alapoktól a megvalósításig
• Rengeteg nem releváns, strukturálatlanul elhelyezett hivatkozás. Ettől nem lesz kedvünk tovább olvasni.

14. új tartalom-modell: felépítés
14 / 20
információ szervezés az alapoktól a megvalósításig
• Meta információk: nem elsősorban a felhasználónak, mint inkább a struktúrának, keresőknek készülnek. Ezeket jelöljük a
tartalomfelépítés esetén is.
• Tartalmi kapcsolatok meghatározása - pl. egy Berlin témájú cikk összekapcsolható berlini eseményekkel, előadókkal és ez
fordítva is igaz. Ezt a meta információk alapján tudjuk automatizálni.
• Kategóriákon átívelő ajánlások: ha valaki olvas egy cikket Berlinről, akkor nem biztos, hogy szeretne még egyet olvasni. Ha
felkeltette az érdeklődését akkor inkább más típusú anyagok felé fog kacsintgatni (podcast, videók, események)
• Kifejezetten hasznosak és informatívak a kapcsolódó tartalmak pl. egy esemény esetén, hiszen adott a fellépők listája,
amihez már könnyű tartalmakat rendelni.

15. Drótvázak
15 / 20
információ szervezés az alapoktól a megvalósításig
• A drótvázak nagyon jól használhatók az információstruktúra tervezésekor is. Főleg, ha a már korábban megtervezett
modellekre hivatkozni is tudunk.

16. drótvázak: írások aloldal
16 / 20
információ szervezés az alapoktól a megvalósításig
• Az egyes listázások nem ugyanazokat az információkat tartalmazzák. Pl. az Írások alatt az egyes alkategóriákban
különböző információ-felépítésű tartalmak találhatók. Egy lemezkritika esetén nem ugyanaz a tartalom-fragmens fontos,
mint egy interjú esetén.

17. drótvázak: hír oldal
17 / 20
információ szervezés az alapoktól a megvalósításig

18. Tanulságok
18 / 20
információ szervezés az alapoktól a megvalósításig
• A projekt még nem fejeződött be. Sok definiált feladat még megvalósításra vár (pl. kapcsolódó tartalmak automatizálása, ez
egyelőre automatikusan történik).
• A kevés idő (teljes fejlesztési idő 2 hónap) nagyon behatárolta a lehetőségeket. Ettől függetlenül szerintem sikerült
jelentősen javítanunk a korábbi navigáción és tartalomfelépítésen.

19. 19 / 20
információ szervezés az alapoktól a megvalósításig
• Ajánlott olvasmány: Peter Morville & Louis Rosenfeld: Information Architecture for the World Wide Web. http://
www.amazon.com/Information-Architecture-World-Wide-Web/dp/0596527349

20. Köszönöm a
figyelmet!
fábián csongor
linkedin.com/in/csongorfabian
uxstories.quora.com
uxstories.tumblr.com
csongorfabian@gmail.com
20 / 20
információ szervezés az alapoktól a megvalósításig
• Bármilyen kérdésre szívesen válaszolok a fenti elérhetőségek bármelyikén. Köszönöm a figyelmet!