nacrtovanje uporabnisko prijaznih svetovno razprostranjenih mreznih strani world wide web www seminarska naloga iz predmeta projektiranje informacijskih sistemov podiplomski studij student mateja podlogar dipl org nosilec predmeta dr joze zupancic izredni profesor in dr vladislav rajkovic redni profesor uvod v zadnjih letih se vedno bolj uveljavlja svetovno omrezje internet stevilo v internet povezanih racunalnikov presega milijona od velikih racunalniskih sistemov pa tudi osebnih racunalnikov stevilo uporabnikov ki se povezujejo v internet pa presega milijonov internet ponuja veliko razlicnih storitev npr neposredni dostop do stevilnih baz podatkov gopher petric najnovejsa in najbolj zanimiva storitev interneta pa je svetovno razprostranjena mreza world wide web www v nadaljevanju se uporablja kratica www www sestavljajo stotine tisoci med seboj povezanih strani ki jih lahko uporabnik vidi na svojem racunalniku vsaka stran je povezana z drugimi stranmi do katerih lahko dostopa vsak ki ima racunalnik povezan v omrezje internet naj navedemo primer ce nekoga zanima kosarka lahko zacne svoje pregledovanje pri zgodovini igre ko je na strani omenjena dolocena ekipa ki ga zanima enostavno pritisnemo z misko na ime ekipe in odpre se mu nova stran z vsemi informacijami o ekipi browne www storitev je bila prvic predstavljena v letu v uporabo pa je prisla v letu www storitev je postala popularna sele v zacetku leta ko je prisel na trg pregledovalnik browser ncsa mosaic gray sedaj se stevilo www streznikov zelo hitro povecuje in njihova rast je prikazana na naslednji sliki bento slika rast stevila www streznikov uporabniki www je razsirjen po celem svetu in uporabniki so zelo razlicni predenj oblikujemo strani se moramo vprasati kdo so ljudje ki bodo pregledovali nase strani stranke kupci potencialni kupci investitorji konkurenti vkljucno z njihovimi oddelki otroci nastetih ljudi nekdo ki prvic spoznava internet in www tvoja stara mama nas oddelek nas trzni oddelek graficni umetnik profesionalni pisatelj univerzitetni profesor oz student programer nekdo z zelo slabim znanjem angleskega jezika nekdo ki mu lahko datum pomeni junij ali julij ali nekdo ki klice preko modema hitrosti bps nekdo ki meni da je unix windows netware mac ali commodore edina prava osnova z drugimi besedami lahko recemo da je podrocje uporabnikov zelo veliko in oblikovalec skusati moramo zadovoljiti vse uporabnike vedno mora nacrtovalec strani upostevati ze razvito kulturo in pravila obnasanja hogoboom odlicnost graficnega oblikovanja kako uporabnik dostopa do informacij v tvojem dokumentu je odlocilen za uspesno oblikovanje www strani in sistemov dokumenti oblikovani za racunalniski zaslon lahko vsebujejo razlicne oblike interaktivne medije lahko vklucujejo tekst stevilke slike in fotografije animacijo video cilji v nadaljevanju so navedeni cilji ki jih skusajo doseci oblikovalci www strani a cilj povecati kvaliteto doslednost globalno razumljivost uporabnost tocnost tehnicno intenzivnost ponudbo sluzbe oz ustanove prodajo b cilj zmanjsati casovni dostop do strani zmedo moznost izgube potrebo po posljanju sporocil za pomoc avtorju strani prednost doloceni osnovi oz operacijskemu sistemu hogoboom nacrtovalci www strani morajo imeti osnovno znanje o oblikovanju graficnih uporabniskih vmesnikov pri oblikovanju www strani izstopata dva problema informiranje in vodenje uporabnika skozi kompleksno celoto povezanih informacij oblikovanje primerne oblike strani za interaktiven racunalniski prikaz ki se sklada z hipertekstnim jezikom html hypertext markup language v nadaljevanju se uporablja izraz html jezik lynch struktura pri oblikovanju strani ima velik vpliv uporabnikovo dojemanje in predpostaljanje kako morajo biti strani organizirane moc www strani je predvsem v velikem stevilu hipertekstnih povezav www strani na zalost pa je v danem trenutku vidna le posamezna trenutno izbrana stran tako da uporabnik nagonsko zgradi v svoji glavi miselni model moznosti in strukture strani nacrtovalci uporabnisko prijaznih www strani skusajo prepreciti da bi si uporabnik ustvaril v svoji glavi miselni model strukture www strani kot ga prikazuje slika slika nezazeljeni miselni model strukture www strani uporabniki potrebujejo strukturo z jasnimi uporabnimi in graficnimi povezavami med razlicnimi sestavinami in podsekcijami www strani ikone graficni znaki in drugi pripomocki lahko zelo koristno oznacujejo identiteto podrocja znotraj podsekcij na www straneh skrbno organiziran in graficno nacrtovan uporabniski vmesnik lahko mocno poveca jasnost in okrepi strukturo www strani ter omogoca uporabniku lazje razumevanje njemu se nepoznanih in kompleksnih strani slika prikazuje dobro organizirano strukturo www strani slika dobro organizirana struktura www strani natancno oblikovanje www strani zahteva ravnotezje med strukturo in povezavami menijev oz posameznih strani ter posameznih delov strani grafike in dokumentov cilj je zgraditi hierarhijo menijev in strani uporabniku prijazno na nacin kot on vidi uporabo www strani predvsem pa uporabnika nacin organiziranja strani ne sme speljati na napacno pot iskanja veckrat se z rastjo strani zgodi da se zacne izgubljati sprva postavljena menijska shema zelo plitva hierarhicna struktura vodi v zmesnjavo saj imamo en sam glavni meni in veliko stevilo nepovezanih informacij podmenijev kot je prikazano na naslednji sliki slika preplitva hierarhicna struktura klasicen primer take preplitve hierarhicne strukture je prvotna struktura www strani ncsa mosaic what's new ki je zelo dolga s plitvo hiararhicno strukturo prav tako pa imamo lahko pregloboko www strukturo s stevilnimi hierarhicnimi nivoji kot je prikazano na sliki klasicen primer pregloboke hierarhicne strukture je stran gopher kjer je vcasih potrebno stiri ali pet map predenj prides do vsebine dokumenta avtor navaja kot primer take strani tudi stran hot wired ki ima prav tako prevec nivojev vendar pa tukaj resujejo zmedo z neposrednimi povezavami na dnu strani kar mocno poveca uporabnost celotnega sistema meniji izgubijo svojo vrednost ce nimajo vsaj stiri ali pet povezav seznam menijev lahko na enostaven nacin uporabniku poda ducat povezav brez listanja skozi celotno stevilo moznih povezav lynch slika pregloboka hierarhicna struktura v primeru da se stevilo strani stalno povecuje v tem casu se rast dnevno oz urno povecuje je proces ustvarjanja ravnotezja med meniji in stranmi zelo dinamicen spremenljiv proces s pomocjo povratnih informacij uporabnikov in analiziranjem oblikovanih strani lahko ugotovimo kaksna je preglednost in uporabnost organiziranosti www strani zapletena struktura dokumentov zahteva globoko menijsko hierarhijo vendar pa nikoli ne smemo uporabnika siliti v iskanje stran po stran ce je mozen neposreden dostop cilj je narediti cimbolj uravnotezeno drevo ki omogoca hiter dostop do informacij predvsem pa mora uporabnik razumeti kako imamo organizirane strani uravnotezeno strukturo prikazuje slika lynch slika uravnotezena hierarhicna struktura oblikovanje stila temeljni lastnosti vsakega dobro oblikovanega informacijskega sistema sta doslednost in napovedljivost uporabniku je potrebno omogociti dober pregled nad tem kaj je prvotna stran in kje so povezave z sorodnimi stranmi ter dosleden in napovedljiv dostop do vmesnika in posameznih elementov strani ter dosledna graficna shema norman oblikovati pravi stil strani je zelo tezko predvsem zaradi relativno slabe locljivosti zaslonov osebnih racunalnikov kompromis med locljivostjo in vidnimi kontrasti na zaslonu povzroci zmanjsanje bralne hitrosti in razumevanja vendar pravi stil oblikovanja lahko mocno ublazi tezave s tekstom v elektronskih dokumentih avtor navaja kar nekaj osnovnih principov na podlagi katerih lahko naredimo stran cimbolj uporabnisko prijazno lynch dobro graficno oblikovanje zahteva optimalno ravnotezje med vidnimi obcutki graficnimi in tekstnimi informacijami brez vidnih vplivov kot so okvirji barve in kontrasti je stran najveckrat dolgocasna in ne bo motivirala uporabnika da bi raziskoval njeno vsebino mnogi avtorji opozarjajo na pomembnost barv david siegel govori o standardnih barvah ki naj bi jih uporabljali oblikovalci www strani navaja kot primer rdeco barvo ki naj bi opozarjala uporabnika na nekaj pomembnega zanimivega siegel seveda pa je uporaba barv mocno odvisna od narave in vsebine strani tako da mora oblikovalec najveckrat sam presoditi katere barve so najprimernejse na pomembnost barv pri oblikovanju dobrih www strani je opozorila tudi janice gjertsen iz podjetja total new york na konferenci electronic shopping electronic commerce september new york city gosti tekst brez kontrasov in vidnih graficnih oznak je ponavadi zelo tezko berljiv se posebno ce je graficna locljivost racunalniskega zaslona slaba uporabnik je lahko zelo razocaran nad samo vsebino www strani ce ni uravnotezenosti med vidnimi znaki kvalitetno grafiko tekstnimi informacijami in interaktivnimi hipermedijskimi povezavami osnova pri iskanju idealnega ravnotezja je navpicna seznamsko orientirana struktura html jezika ki jo lahko vidimo v graficnih pregledovalnikih kot sta netscape in mosaic in omejitev hitrosti uporabnikovega dostopa ki jo lahko razvrstimo od kbs do ethernet hitrosti ali vec oblikovanje strani v html jeziku mora povdariti moc hipermedijskih povezav html je hipertekstni jezik kjer je povdarek na interaktivnih povezavah med graficnimi tekstnimi in medijskimi dokumenti moznost hipertekstnih povezav med tekstom in grafiko je velika prednost ki jo lahko ponudi internet in ima velik pomen pri oblikovanju interaktivnih infomacijskih sistemov oblikovanje strani v jeziku html mora imeti povdarek na hipermedijskih povezavah tako da so v celoti izkoriscene moznosti ki jih ponuja ta medij s pomocjo html jezika lahko povezemo stran ki jo oblikujemo s stranjo s podobno vsebino kjerkoli na interenetu brez da bi uporabnik listal skozi stevilne menije lynch dolzina strani primerna dolzina www strani je odvisna od treh faktorjev odnos med stranjo in velikostjo racunalniskega zaslona uredniskih zahtev glede vsebine ki jo zajema www stran modularnega oblikovanja neposredno zbranih www strani odnos med stranjo in velikostjo racunalniskega zaslona veliko kritikov in oblikovalcev graficnih uporabniskih vmesnikov opozarja na slab vpliv listanja na racunalniskem zaslonu apple horton marcus norman tutte dolge strani zahtevajo od uporabnika da si zapomni veliko informacij ki jih je videl pri listanju zaslonov drugace lahko zelo hitro izgubi pregled nad sobesedilom ko listamo strani lahko izgubimo sobesedilo to pa prestavlja veliko tezavo predvsem takrat ko zaradi zelo dolgih strani pri listanju izgubimo usmeritvene elemente npr povezave z drugimi lokalnimi stranmi na www ju uporabnik mora pri listanju dolgih strani uporabljati drsnike kot je prikazano na sliki zaradi zgoraj navedenega razloga avtor zagovarja www strani ki ne vsebujejo vec kot dva do tri zaslone x informacij kar pa hkrati omogoca da uporabnik vidi usmeritvene elemente na zacetku in koncu strani lynch slika listanje s pomocjo drsnikov kot je ze zgoraj navedeno je ena glavnih pomanjkljivosti zelo dolgih strani da uporabnik ne vide celotnega teksta na zaslonu ampak mora uporabljati drsnike v vecini graficnih vmesnikov macintosh windows imajo drsniki fiksno dolzino in ne prikazujejo dolzine dokumenta v odnosu vidnega teksta na zaslonu tako da uporabnik nima predstave kaksna je resnicna dolzina strani na zelo dolgih www straneh lahko majhni premiki z drsnikom popolnoma spremenijo vsebino zaslona v takem primeru uporabniku ne preostane nic drugega kot da se premika korak za korakom po strani s pomocjo puscic na drsniku lynch uredniske zahteve glede vsebine ki jo zajema www stran kadar so www strani zelo dolge in mora uporabnik listati vec zaslonov predno pride do zeljene vsebine informacija izgubi svojo vrednost in s tem se zmanjsajo prednosti ki jih nudi neposreden on line dostop do strani ce zelimo imeti uporabnisko prijazne www strani in hkrati tudi enostavno tiskanje in shranjevanje vsebine strani moramo zagotoviti naslednje a razdeliti stran na kose dveh do treh tiskanih strani informacij vkljucno z grafiko oz liki uporabiti je potrebno moc hipertekstnih povezav in s tem izkoristiti prednosti ki jih nudi www b skrbeti da povezave z locenimi datotekami vsebujejo obicajne dolzine teksta na eni strani tako da lahko uporabnik stiska ali shrani informacije v enem koraku na stran ne smemo pozabiti vkljuciti enopomenskega naslova url uniform resource locator tako da lahko uporabnik pravilno navede vir strani lynch modularno oblikovanje neposredno zbranih www strani ena izmed osnovnih prednosti www dokumentov je da jih lahko zelo hitro spremenimo kadar imamo dobro modularno oblikovane strani lahko z urejevalnikom zelo hitro zamenjamo stare datoteke z novimi zamisel je zelo podobna sistemu nevezanih listov v vecini organizacijah ki skusajo na cimbolj razumen nacin zamenjati staro dokumentacijo z novo razlika je le v tem da www storitev omogoca se bolj prilagodljivo in ekonomicno shranjevanje informacij ki jih lahko resnicno v vsakem trenutku nadomestimo z novimi svezimi informacijami lynch temeljni elementi www strani osnovni elementi katere naj bi vsebovala vsaka www stran so avtor oz kontaktna oseba povezava z lokalno glavno stranjo ustanova datum oblikovanja strani stavek o avtorskih pravicah prav tako pa naj bi vsaka dobro oblikovana stran vsebovala tudi naslednje elemente enopomenski naslov url uniform resource locator dokumenta povezave z drugimi sorodnimi stranmi zascitni znak ustanove gumbi in drugi znaki za premikanje po straneh lynch tekst tekst na racunalniskem zaslonu je ponavadi zelo tezko berljiv najvecja tezava je predvsem v predolgih vrsticah normalna bralna sirina ki jo clovesko oko lahko v danem trenutku prebere je cm oblikovalci strani se morajo drzati te omejitve binns drugace ima bralec z branjem tezave lynch izogibati se je potrebno stavkov kot je naslednji ce zelite izvedeti kaj vec o kosarki pritisnite tukaj bolsa je uporaba druge moznosti na voljo je se vec informacij o kosarki norton marsikdo misli cimvecje je tem bolse je vendar najveckrat ni tako potrebno je ustvariti pravilen kontrast med eno in drugo pisavo med tekstom in praznim prostorom okoli njega kadar stran sestavlja predvsem tekst je potrebno uporabljati barvne tone prva stvar ki jo uporabnik vidi je tekstovna podlaga in kontrast ne pa naslov ali druge podrobnosti strani avtor clanka tips for writers and designers nasprotuje uporabi dodatnih presledkov med crkami in besedami smiselno in pregledno pa je uporabljati dvojni presledek med posameznimi stavki pravilna velikost obicajnega presledka med besedami je sirina crke i vecja sirina presledka povzroci vtis da besede plavajo stran od bralca kar povzroca tezave pri branju siegel slike oz grafika velika prednost ki jo nudi storitev www je tudi v tem da lahko prikazujemo neposredne informacije v obliki teksta slike zvoka in animacije uporabljati moramo vse tehnike ki zmanjsajo zamude prikazovanja slik oz grafike da uporabnik ne postane pri listanju nestrpen pri velikosti slike moramo paziti predvsem na to da ni vecja od velikosti okna pregledovalnika kot je mosaic ali netscape sirina slike naj ne bi presegala tock kar je primerna velikost za obicajne racunalniske zaslone palcev za zmanjsevanje zamud prikazovanja slik avtor navaja naslednje mozne tehnike uporaba vrstice v html ju ki doloca sirino in visino slike z dodajanjem informacije o visini in sirini slike v html jeziku lahko netscape ali kaksen drug pregledovalnik takoj oblikuje meje slike brez da bi preveril informacijo o celotni doloceni velikosti slike povecanje hitrosti prikazovanja slike v primeru vkljucitve informacije o visini in sirini slike se mocno poveca predvsem pri velikem stevilu slik ta informacija omogoca da www pregledovalnik nalozi tekst in uredi stran brez nepotrebnega cakanja da bi se vsaka slika posamezno nalozila primer vrstice v html jeziku ki doloca sirino in visino slike img src sample gif width height prikazovanje slik s slabo locljivostjo netscape in nekateri drugi pregledovalniki omogocajo oblikovalcu www strani da ob prvem odpiranju strani opredeli manjso sliko z nizko locljivostjo ki jo lahko zelo hitro prikaze nato pa to sliko kasneje nadomesti s sliko boljse locljivosti primer v html jeziku je naslednji img src highrez gif lowsrc lowrez gif width height zmanjsanje stevila barv oz intenzivnosti slike najobicajnejsi format slik je izmenljivi graficni format graphics interchange format gif ta format slik omogoca izmenjavo slik med razlicnimi tipi racunalnikov neodvisno od njihovh graficnih sposobnosti slike v tem formatu so namrec kodirane z metodo prepletanja podlogar intenzivnost take slike je lahko najvec bitov barv vsako sliko v gif formatu pa lahko shranimo tudi z nizjo intenzivnostjo kar pomeni da s tem povecamo hitrost prikazovanja slike ne da bi zmanjsali velikost slike za koliko lahko zmanjsamo intenzivnost slike pa je odvisno od presoje oblikovalca in narave slike netscape pregledovalnik pa podpira tudi format joint photographic experts group jpeg posebnost formata je v tem da shranjuje slike v stisnjeni obliki pri cemer je kolicnik stiskanja obratno sorazmeren s stevilom podrobnosti na sliki podlogar jpeg ima le eno slabost da ga trentno se ne podpirajo vsi pregledovalniki vendar pa bo v prihodnosti sigurno zalo razsirjen oblikovalci si trenutno pomagajo tako da na stran vkljucijo moznost prikaza slike v obeh formatih in uporabnik sam izbere zeljen format lynch zvok in animacija oblikovalci www strani vkljucujejo na strani tudi zvok in animacijo s pomocjo zvoka in animacije lahko bolj nazorno prikazemo doloceno vsebino strani omogocata tudi lazje komuniciranje z uporabnikom zvok ima zmoznost uporabniku prikazati stvari kjer ni mogoc viden prikaz robin bargar glasbeni skladatelj in raziskovalni programer v ncsa pravi zvok in animacija sta dopolnilo slikam tako v vsakdanjem zivljenju v filmih kot tudi v racunalniskem svetu zvok okrepi kar vidimo in pove stvari ki jih ne moremo videti ryckaert zvok in animacija pritegneta uporabnika bolj kot tekst in slika na zvok ki je vkljucen na strani ponavadi opozarja graficni gumb seveda pa je potrebno da je uporabnikov racunalnik programsko in strojno opremljen za sprejemanje kvalitetnega zvoka glava strani glava na strani je zelo pomembna in prikazuje glavno tocko strani veckrat so v glavi tudi graficne slike ki prikazujejo povezavo s serijami sorodnih strani oblikovalec se mora zavedati dejstva da ne more biti nikoli preprican katere strani je uporabnik pregledal oz prebral predenj je prisel do tekoce strani minimum ki ga mora vsebovati glava je naslov graficne slike ki jih vkljucujemo takoj pod naslovom ne smejo biti prevelike tako da bi silile cez obicajen racunalniski zaslon oblikovalci dobro oblikovanih www strani vedno uporabljajo glavo na vrhu strani kot povezavo ki omogoca prehod nazaj na visji nivo celotnega www sistema avtor priporoca uporabo standardih gumbov prev prejsnja stran next naslednja stran kmalu pod vrhom strani tako da uporabnik na zelo enostaven nacin lista od strani do strani html podpira sest nivojev oblikovanja glave vendar pa to ne pomeni da je potrebno uporabiti vse na eni strani avtor priporoca uporaba manjsega stevila razlicnih vrst glav v celotnem dokumentu lynch dno strani minimalni elementi ki morajo biti zajeti na dnu strani so avtorjevo ime in clanstvo hipertekstne povezave s sorodnimi oz glavno stranjo ce ni teh povezav lahko pridemo do mrtvega konca informacija o avtorskih pravicah in leto ter zadnji datum sprememb zadnji datum sprememb je potreben da uporabnik ve kaksna je uporabna casovna vrednost prebranih informacij avtor predlaga uporabo naslednjega formata datuma mesec dan leto avgust da ne pride do napacne razlage datuma ko je www stran aktivna imamo vcasih tezave nazorno prikazati kaj so novosti tu si lahko pomagamo z gumbom novo ki ga uporabljamo v kombinaciji z datumom primer feb zelo koristne informacije ki jih lahko vklucimo na dno strani so se avtorjev elektronski naslov uporabnik lahko s pritiskom na elektronski naslov direktno poda komentar o strani postni naslov uporabimo ga v primeru ce zelimo da nas uporabnik kontaktira po telefonu faxu jezik v katerem lahko uporabnik komunicira s kontaktno osebo zascitni znak avtor predlaga uporabo manjsih graficnih slik ter enopomenski naslov url avtor predlaga vkljucitev url naslova na dno strani predvsem zato da se ohrani neposredna povezava z virom strani lynch gumbi na straneh fiksne povezave med serijo strani na enem dokumentu lahko med seboj povezemo z gumbi kadar imamo zelo komleksne www strani pa se gumbi uporabljajo tudi za povezave s podmeniji posameznimi tabelami vsebine in z drugimi stranmi veckrat se pojavi vprasanje ali so boljsi tekstni ali le slikovni gumbi avtor priporoca uporabo tekstnih gumbov slika ker le ti nedvoumno povedo kaj je funkcija dolocenega gumba nikoli ne izumljajte svojih hieroglifov ce uporabnik razume gumbe ki jih uporabljamo bo zelo hitro prisel do vsebine ki ga zanima slika tekstni gumbi lynch zakljucek naj se enkrat navedemo da je www skupina shranjenih informacij ki je razedljena na elemente ki so med seboj povezani preko omrezja vsaka posamezna stran mora prinasati informacije za zakljucek pa le se nekaj nasvetov za oblikovalce www strani kot jih navaja avtor hogoboom oglejte si razlicne strani na internetu da boste lazje spoznali svoje potrebe razmisljajte o vasih uporabnikih kreirajte visoko kvalitetne profesionalne in uporabne strani vkljucujte majhne in kvalitetne slike uporabljajte standardni jezik html uporabljajte sorodstvene povezave organizirajte vsako stran skladno z ostalimi stranmi preverite narejene strani z vec razlicnimi pregledovalniki ne predvidevajte o osnovah ki jih bodo uporabljali uporabniki kot tudi ne hitrosti njihovih povezav preverite pravopis in pozorno preberite strani potrebno je vodenje pravni in marketinski pregled ter odbritev strani hogoboom literatura bento alberto use and design of web pages http ubmail ubalt edu ~abento webuse use gif browne steve the internet via mosaic and world wide web ziff davis press pg gray matthew measuring the growth of the web http www netgen com info growth html hogoboom karen the sybase world wide web site style guide http www sybase com www sybase www style html audience lynch patrick j web style manual http info med yale edu caim norton brigita guidelines for good design http www dpie gov au dpie web construction html petric darjan problemi izbire moznih vrst telekomunikacijskih povezav med udelezenci elektronskega poslovanja s posebnim ozirom na okoliscine v sloveniji v porocilo o raziskovanju v letu kranj moderna organizacija urednik joze gricar februar ryckaert victor data driven sound the next step http www ncsa uiuc edu pubs access datadrivensound html siegel david tips for writers and designers http www best com ~dsiegel tips wonk links html podlogar mateja racunalnisko izmenjavanje standardiziranih in nestandardiziranih podatkov na primeru elektronske kataloske prodaje porocilo o raziskovanju v letu kranj moderna organizacija urednik joze gricar februar