Information Architecture for Soundhead.hu (Hungarian)
Upcoming SlideShare
Loading in...5
×
 

Information Architecture for Soundhead.hu (Hungarian)

on

  • 565 views

Goal of presentation: showing how basic Information Architecture can be applied to a small project with tight deadline. ...

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.

Statistics

Views

Total Views
565
Views on SlideShare
486
Embed Views
79

Actions

Likes
0
Downloads
2
Comments
0

2 Embeds 79

http://lanyrd.com 73
http://www.linkedin.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Information Architecture for Soundhead.hu (Hungarian) Information Architecture for Soundhead.hu (Hungarian) Presentation Transcript

  • 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. Foglalkozomsajá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 oldalmegújításával ünnepelte.
  • 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 / 20információ szervezés az alapoktól a megvalósításig
  • 3 / 20 információ szervezés az alapoktól a megvalósításigAz 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 kisebbprojekteknél is meg tudjuk valósítani.
  • 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
  • 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
  • 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
  • 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
  • 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.
  • 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
  • ú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.
  • 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
  • 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
  • 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.
  • ú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.
  • 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.
  • 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.
  • drótvázak: hír oldal 17 / 20információ szervezés az alapoktól a megvalósításig
  • 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 / 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
  • 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!