GRAFIČAR - 25 INTERAKTIVNE INTERAKTIVNOST avtor Andrej ISKRA Univerza v Ljubljani INTERAKTIVNE VSEBINE NA INTERNETU - II. DEL V prejšnjem članku smo spoznali samo defi nicijo pojma interakti vnost in prikazali šti ri glavne korake načrtovanja in izdelave interakti vnih vsebin. Natančno smo obdelali prvi korak – ugotavljanje potreb in zahtev uporabnikov naših interakti vnih vsebin. V tem koraku ima ključno vlogo zbiranje podatkov, ki jih lahko opravimo na več načinov, opisanih v prejšnjem članku. Temu koraku sledi del procesa – izdelava oblikovnih in strukturnih konceptov. Izdelava oblikovnih in strukturnih konceptov Ta del načrtovanja in izdelave interak- ti vnih vsebin (predstavitev) je v celotnem procesu najbolj pomemben. Predstavimo namreč zamisli, ki jih osnujemo glede na prej ugotovljene in analizirane uporabni- kove zahteve. Ta korak v načrtovanju in izdelavi interakti vnih vsebin lahko naprej razdelimo na: izdelavo drevesne strukture ↗ izdelavo grafi čne predloge (meniji, ↗ gumbi, barve) izbiro dodatnih elementov (slike, ↗ zvočna podlaga, zvok v gumbih, video) Izdelava drevesne strukture Tu najprej določimo strukturo svoje interakti vne predstavitve. Pogosto zač- nemo kar na belem listu papirja in tam skiciramo strukturo. Ta je največkrat v drevesni obliki, ki je ti pična za spletne strani in interakti vne predstavitve. Pri- mer drevesne strukture namišljene oseb- ne predstavitve je prikazan na sliki 1. Struktura interakti vne predstavitve je seveda odvisna od vsebine. Za interakti v- no igro bi bila verjetno malce drugačna, za kak interakti ven izobraževalni projekt spet malce drugačna. V osnovi pa ima vsak primer neko drevesno strukturo. Prikazana drevesna shema je precej poenostavljena. Kot načrtovalec mora- mo biti pozorni na navigacijo v projektu. Ta iz navedenega primera ni popolnoma razvidna predvsem zato, ker bi v prime- ru risanja vseh povezav v projektu v naši shemi prišlo do velike nepreglednosti . Navigacija je ena najpomembnejših stva- ri v naši predstavitvi, saj so napačne in nelogične povezave ena večjih uporabni- ških napak in so lahko kot take zelo mo- teče za uporabnika oziroma ga lahko celo odvrnejo od nadaljnje uporabe. Napačno navigacijo bomo skupaj z drugimi napa- Slika 1: Drevesna struktura interaktivne predstavitve. Uvodna animacija Glavna stran O meni Izobraževanje Delovne izkušnje Galerija izdelkov Izhodna animacija Dosedanje zaposlitve Projekti ... Šola Seminarji Tečaji Konference ... Odraščanje Hobiji Prosti čas ... Priporočilna pisma Projekti ... Email naslov Telefonska številka Interaktivni zemljevid lokacije ... Reference Kontakt 26 - GRAFIČAR kami uporabnosti podrobneje predstavil v prihodnjem članku. Za zdaj naj ome- nim, da je pomembnejše navigacijsko načelo, da se uporabnik na vsakem po- dročju naše interakti vne predstavitve lahko z enim klikom vrne na osnovno stran. V tem primeru mora biti glavni navigacijski meni v celotni predstavitvi vedno prikazan, ne glede na trenutno prikazano vsebino. Slika 2 prikazuje pri- mer nenehno vidnega glavnega menija pri različnih vsebinah. Poleg tega mora biti med pomikanjem po vsebini v globino na vsakem mestu jasno vidna tudi možnost pomikanja na- zaj (po navadi gumb nazaj). Poleg nav- pičnega pomikanja po drevesni strukturi interakti vne predstavitve so možne tudi vodoravne povezave. Iz slike 1 bi bile take povezave med področjema »projek- ti « v skupini »delovne izkušnje in »refe- rence«. Prav veliko povezav onemogoča popoln prikaz drevesne strukture, ki bi bila v takem primeru zelo nepregledna. Pri zelo obširnih predstavitvah si lahko celotno drevesno strukturo zaradi laž- je preglednosti razdelimo na več delov, pri čemer moramo ves čas upoštevati povezave med posameznimi ločenimi deli. Drevesna struktura se lahko med samim izdelovanjem delno spreminja in dograjuje, vendar pa mora biti glavnina zasnove našega izdelka v obliki drevesne strukture izdelana pred začetkom izdela- ve končne predstavitve. Pri obsežnih predstavitvah se lahko tudi v predstavitvi pojavi prikaz drevesne strukture, ki pomaga uporabniku pri na- vigaciji po vsebini. Tako imamo na sple- tnih straneh pogosto tudi povezavo na prikaz strukture strani (na angleških stra- neh pogost izraz site map). Primer takega prikaza drevesne strukture, vključenega v spletno stran, lahko vidite na htt p:// www.amnesty.si/sl/ sitemap. Izdelava grafi čne predloge Izdelavi drevesne strukture sledi izde- lava grafi čne podobe. Po navadi naredi- mo več grafi čnih predlog. Pri tem spet lahko »uporabimo« testne uporabnike. Glede na njihova mnenja, pripombe, nasvete nato skupaj z našimi zahteva- mi izberemo končno grafi čno podobo. Če delamo interakti vno predstavitev za naročnika, ima seveda zadnjo besedo pri določitvi grafi čne predloge on. Mi mu pri tem samo svetujemo. Slika 2: Primer nenehno vidnega glavnega menija. Slika 3: Primera grafi čnih predlog spletne strani. Slika 4: Razdelitev glavne strani. INTERAKTIVNOST Glavni meni Naslov strani Glavni meni Povezava do iskalnika Reklama Vsebina GRAFIČAR - 27 GRAFIČAR - 27 Težava pri izbiri grafi čne predloge se pojavi tudi glede smernic oblikovanja na internetu, ker se seveda spreminja- jo. V enem obdobju so priljubljene žive barve, razgibane linije, v kakem drugem pa preproste linije, nevpijoče barve itn. Zato je treba kar redno spremljati smer- nice grafi čnih podob na internetnih stra- neh. Seveda je grafi čna podoba v osnovi odvisna tudi od namena in vsebine naše interakti vne predstavitve (izobraževalna, zabavna, osebna, interakti vna igra itn.). Pred izdelavo grafi čne predloge največkrat na- redimo grafi čno podobo v profesionalnem gra- fi čnem programu (npr. Adobe Photoshop). To predlogo potem lahko uvozimo v program za interakti vne predstavite (npr. Adobe Flash) in si z njo pomagamo pri izdela- vi interakti vnosti . Primer dveh spletnih grafi čnih predlog, nareje- nih v programu Adobe Photoshop, prika- zuje slika 3. Iz slike 3 se vidi, da sta to grafi čni pre- dlogi za osnovno stran. Zelo pomembno je, da se izbrane grafi čne zasnove čim bolj natančno držimo v celotni predsta- vitvi (enotnost oblikovanja gumbov, eno- tnost izbranih pisav, ozadja itn.) Glede grafi čnega oblikovanja lahko na spletni strani RTVSLO (htt p://www.rtvslo. si) zasledite zanimiv učinek, ki uporabni- ku še olajša navigacijo po vsebini. Če v glavnem meniju izberete katero izmed področij (novice, šport, zabava), je ozad- je na ti sti vsebini obarvano v isto barvo kot gumb v meniju. Ta učinek povezova- nja barve ozadja in gumba uporabniku pripomore k hitrejšemu ugotavljanju, kje v vsebini je v določenem trenutku. Po izbiri se pomaknemo na glavno stran (prikazana na sliki 1), kjer je po navadi delovni prostor razdeljen na več področij (naslov strani, menijski gumbi, vsebinski del, oglasni del, povezava na iskalnik ipd.). Primer take razdelitve pri- kazuje slika 4. Tako kot pri grafi čni za- snovi je tudi pri tem po- membno, da se razdelitve čim bolj natančno držimo v celotni interakti vni predstavitvi. Izbira dodatnih elementov Pri izbiri dodatnih elementov se de- jansko odločimo o vključitvi slik, zvočne podlage, zvoka v gumbih in videa v našo interakti vno predstavitev. Pri tem mora- mo seveda vedeti , da lahko vključitev teh elementov zelo poveča velikost datoteke in s tem tudi čas prenosa prek povezav svetovnega spleta (če je naša predsta- vitev postavljena na svetovni splet). Pri sami izdelavi interakti vnih predstavitev (kar bo tema naslednjega članka) je tre- ba seveda vse dodatne elemente pred vključitvijo ustrezno pripraviti (dimenzije in kakovost slik, kompresija videa itn.). Povzetek V tem članku smo si pogledali drugi korak v procesu načrtovanja in izdelave interakti vnih vsebin, to je izdelava obli- kovnih in strukturnih konceptov. Gre verjetno za najpomembnejši korak v ce- lotnem procesu, ker sta od njega najbolj odvisni privlačnost in uporabnost naše interakti vne predstavitve. Pogledali smo si pomembnost izdelave drevesne struk- ture, ki je osnova za navigacijo. Natančno smo obravnavali tudi izdelavo grafi čne predloge, ki močno vpliva na videz. Na koncu smo na kratko omenili še izbiro dodatnih elementov, ki lahko precej pri- pomorejo k izboljšanju predstavitve tako v vizualnem kot v vsebinskem pomenu. Literatura: Yvonne Rogers, Helen Sharp, Jenny Preece: 1. Interacti on Design: beyond human-compu- ter interacti on, John Wiley & Sons, ltd, 2007 htt p://www.amnesty.si/sl/sitemap, marec 2. 2009 htt p://www.fl ashmint.com/show-tem- 3. plate-1529.html, marec 2009 KOLEDAR KOLEDAR DOGODKOV 2009˝- ˝JULIJ 13.–14. 7. 09 Koper - Slovenija 3D tehnologije in svetovni izzivi Seminar ­ 3D tehnologije ti ska Izdelava drevesne strukture je osnova navigacije predsta­ vitve. INTERAKTIVNOST