információ szervezés az alapoktól a megvalósításig

Fábián Csongor – LogMeInfelhaszná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.

információ szervezés az alapoktól a megvalósításig/ 20

4→10 navigáció átszervezés11→14 tartalom-modellek15→17 drótvázak18→19 tanulságok

2

információ szervezés az alapoktól a megvalósításig

információ szervezés az alapoktól a megvalósításig/ 203

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.

/ 20információ szervezés az alapoktól a megvalósításig

4

Navigáció

• 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

információ szervezés az alapoktól a megvalósításig/ 205

navigáció: korábbi főmenük

főoldalbuli ajánló fesztiválok

cikkek partyfotók

dj mixekvideók

shtrend.hushopforum regisztrálj!

főoldalbuli ajánló fesztiválok

shtrend.huregisztrálj!

• 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

információ szervezés az alapoktól a megvalósításig/ 206

navigáció: korábbi almenük

lemezajánlók

interjúk

hosszabb írások

technika

korábbi hírek

partnerek

cikkek2012

2011

2010

2009

…

2002

partyfotók

hosszabb írások

korábbi hírek

partnerek

2012

2011

2010

2009

2002

• 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

információ szervezés az alapoktól a megvalósításig/ 207

navigáció: új főmenük

írásoktrend partifotó

eseményekpodcastvideó fórum

• 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

információ szervezés az alapoktól a megvalósításig/ 208

navigáció: új almenük

hírek

interjúk

szakmai

kritika

gondolat

tudósítás

írásokstílus

film

art & design

gasztro

trendminden idők képei

pózok

események

partifotó

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

információ szervezés az alapoktól a megvalósításig/ 20

navigáció: teszteljük le!

• 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

információ szervezés az alapoktól a megvalósításig/ 20

új navigáció: rendszerbe szedve

10

Beszélgetések szakmán belül és kívül. Képekkel, videókkal, mixekkel i l lusztrálva.

Minden ami „tanító jel legű” tartalom. Pl. zene menedzsment, tech eszközök bemutatása.

Esszé jel legű írások változatos témakörökben akár külsős írók által.

Krit ikai írások lemezekrő l , kiadványokról, helyekrő l .

Beszámolók rendezvényekrő l , eseményekrő l , konferenciákról stb.

Újdonságok az elektronikus zene világában. Kapcsolódhatnak pl. fel lépőkhöz, közelgő eseményekhez.

1.2. Interjúk

1.3. Szakmai

1. Írások

1.5. Gondolat

1.4. Kritika

1.6. Tudósítás

1.1. Hírek

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

/ 20információ szervezés az alapoktól a megvalósításig

Tartalom modellek

11

• 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

információ szervezés az alapoktól a megvalósításig/ 2012

tartalom modellek: kilógó kapcsolódó tartalmak

• 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

információ szervezés az alapoktól a megvalósításig/ 20

kapcsolódó tartalmak korábbi megjelenítése

13

• Rengeteg nem releváns, strukturálatlanul elhelyezett hivatkozás. Ettől nem lesz kedvünk tovább olvasni.

információ szervezés az alapoktól a megvalósításig/ 20

új tartalom-modell: felépítés

14

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

/ 20információ szervezés az alapoktól a megvalósításig

Drótvázak

15

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

információ szervezés az alapoktól a megvalósításig/ 20

drótvázak: írások aloldal

16

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

információ szervezés az alapoktól a megvalósításig/ 20

drótvázak: hír oldal

17

/ 20információ szervezés az alapoktól a megvalósításig

Tanulságok

18

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

/ 20információ szervezés az alapoktól a megvalósításig

19

• 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

/ 20információ szervezés az alapoktól a megvalósításig

Köszönöm a figyelmet!

20

fábián csongorlinkedin.com/in/csongorfabianuxstories.quora.comuxstories.tumblr.comcsongorfabian@gmail.com

• Bármilyen kérdésre szívesen válaszolok a fenti elérhetőségek bármelyikén. Köszönöm a figyelmet!