IGM 2011/12 Informasjonsdesign webproduksjon Ann Hege Dahl Olsen 1/13/2012 Tangengenten kulturhus på Nesodden er under bygging og ferdigstilles våren 2012.Det kommunale flerbrukshuset skal romme ny ungdomsskole, nytt administrasjonsbygg, et nytt bibliotek, kulturskole, helsestasjon, ungdoms og fritidsarenaer, lokalerfor lag, foreninger og folkevalgte. Bygget er derfor grundig planlagt og lagt til rette for alle aldersgrupper og funksjonshemninger.
Innledning: Obligatorisk innlevering3 Informasjonsdesign for nettsidene til Tangenten Kulturhus på Nesodden. Tangengenten kulturhus på Nesodden er under bygging og ferdigstilles våren 2012. Det kommunale flerbrukshuset skal romme ny ungdomsskole, nytt administrasjonsbygg, et nytt bibliotek, kulturskole, helsestasjon, ungdoms og fritidsarenaer, lokalerfor lag, foreninger og folkevalgte. Bygget er derfor grundig planlagt og lagt til rette for alle aldersgrupper og funksjonshemninger. Oppgaven går ut på å vise kjennskap til brukervennlighetsprinsipper, bruk av flytkart for å vise oppbyggingen av et nettsted og ha forståelse for gjenbruk av designelementer ved å skissere et nettsted for Tangenten kultursenter. Målgruppe, idé og kommunikasjonsstrategi skal defineres, det skal gjøres rede for de ulike brukervennlighetsprinsippene gruppen benytter seg av og hva som gjøres for å synliggjøre nettstedet på web. Rapporten skal inneholde begrunnelse for valg av arkitektur og design på nettstedet. Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 2
Innhold Innledning... s. 2 Rapport Målgruppe... s. 4 Brukervennlighetsprinsipper... s. 5 Web strategi... s. 6 Søkermotoroptimalisering... s. 7 Kilder Målgruppe... s. 8 Vedlegg Personas... s. 9-11 Logodesign... s. 12 Kjernesider... s. 13-18 Flytkart... s. 19-23 Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 3
Målgruppe Tangenten kultuhus skal romme mennesker i alle livsfaser. Fra vugge til alderom. Funksjonfriske og mennesker med funksjonshemninger. Det må derfor legges stor vekt på tydelighet enkel navigasjon på nettsiden. For å danne et bilde av målgruppen er det laget tre personas som skal illustrere bredden av alle brukeren og deres motivasjon for å bruke siden. Hovedmålgruppene vil være: Barn, ungdom, i skolesituasjon og i fritid (ungdommer som går på klubben.) Voksne og eldre, som bruker biblioteket som møteplas. Organisasjoner som leier lokaler. Nybakte foreldre som skal på helssestasjonen med sin nyfødte. Administrasjonen i Nesodden kommune og deres brukere. Hva krever målgruppene: Målgruppen er som tidligere nevnt variabel i alder og kunnskap, fra alle sosiale lag. Nettstedet må derfor designes for å passe alle. Det må vær enkelt å navigere og opfatte budskapet på siden. (1. (Nielsen/Loranger, Prioritizing web Usability, s. 394 ) Informasjon om relevante temaer Bli inspirert til aktivitet/engasjement i lokalmiljøet Målsetningen for kultursenteret på web: Avsenderen/Eieren Kultursenteret kan ses på som en organisasjon og målet for virksomheten er å spre informasjon og å rekrutere nye brukere. Men for noen av aktørene vil også bruke nettstedet for å fremme salg. Nettstedet www.tangenten.no vil derfor kunne brukes som et middel for å oppnå de ulike målsetninger de ulike gruppene har. (2. Furu, Webkommunikasjon, 2006, s. 9) Skolen, biblioteket og kommunen får en tillegs arena å presentere sine nyheter på i samsvar med de eksisterende sidene. Det vil linkes fra Tangentens sider direkte til aktørenes eksisterende sider. Synliggjøre alle aktørene på kultursentret Informasjon om aktivitetene på senteret. Informasjon fra offentlige etater Selbetjening: skjemaer, bestilling av bøkepå bibliotek og dokumenter, bestilling av billetter til konserter etc. Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 4
Brukervennlighetsprinsipper Tangenten Kultursenter er Nesoddens storstue. Den rommer mange kulturelle aranaer. Noen av disse aktørene har allerede eksisterende nettsteder. Tangenten Kultursenter ønsker imidlertid å samle alle aktørene på samme nettsted. Det blir derfor nødvendig å ta hensyn til at disse aktørene kommer til å delta med begrenset informasjon til nettstedet. Når vi skal benytte brukevennlighetsprinsippet må vi se på hva som kommuniserer godt. Layout: Det er viktig for Tangenten Kultursenter å fremstå som en samlende aktør. Det er derfor svært viktig å bruke samme designspråk på alle kjernesider. Logoen og design elementene brukes derfor gjennomgående. (3. Furu, Webkommunikasjon, 2006, s. 33), Arkitekturen på siden er lik for all aktørene. Navigeringen ligger i toppen og følger alle sidene, for å gi brukeren forutsigbarhet og gjenkjenning. Navigasjonen skal være enkel og forståelig og ikke skape forvirring for brukeren. Det skal være lett å se hva som er klikkbart. Alle navigeringsknappene er derfor satt i dyp lilla med hvit skrift som kontrast. Disse knappene endrer farge til orange. Brukeren vil da visuelt kunne se hvilken side de har klikket på (Visuel sti ved bruk av farge). (4. Nielsen/Loranger, Prioritizing web Usability, s. 205) Hver aktør har sin klikkbare knapp oppe på siden. Kontaktinfo vil være til høyre under søkeboksen denne vil endre seg etter hvilken aktør på senteret brukeren har klikket på. Brukeren klikker på den aktøren de ønsker. Fargen på knappene vil da endre seg til orange. Dersom brukeren ønsker mer informasjon kan de klikke vidre på ønsket tema på høyre side. Knappen her vil da få et orange symbol etter at brukeren har gjort et klikk. Heading på sidene vil også endre seg i fargen orange. Bakgrunnpå siden : Bakgrunnen på siden brukes til å definere designet og nettsiden. Sidene har to lyse felt på sidene og midt feltet i en lys lilla farge. Dette for å skape spenning og kontrast på sidene. Lillafargen skal fremstå som nøytral og være en ramme rundt inholdet på siden. Den skal ikke ta vekk operksomheten fra innholdet. Noen av brukerene kan være svaksynte eller dyslektikere. Det er derfor viktig at teksten har høy kontrast, svart tekst på hvit eller svakt tonet lilla gir god lesbarhet. (5. Nielsen/Loranger, Prioritizing web Usability, s. 240). Logo: Designet av logoen er utformet etter inspirasjon av bygget. Ordet Tangent kan ha flere betydninger. Tangent som på et instrument, eller tangen som i Nesoddtangen. Bygget i seg selv kan minne om en Tangent i utformingen, med det noe smale tilbaketrukkede underbygget og det bredere overbygget. Bygget er designet for å slippe inn mye lys. Designet av logoen illustrerer disse faktorene. Hovedformen er etter inspirasjon av den kubistiske formen på bygget, samt at man visuelt kan se formen av en T og en tangent i den negative delen av logoen. Formen på logoen er også samlende i visuell betydning at den rommer alle fra vugge til grav, samtidig som den slipper inn lys. Fargene Lilla/Purpu/obergine er valgt forde det symboliserer: Kongelighet, høyrang og rikdom Intelligens, psykisk styrke, visdom, selvbeherskelse, spirituell realisering, innsikt, forståelse. Det er brukt orange på siden for å skape kontras. (6. Forelesning av Else Munthe Kaas) Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 5
Fonter på siden Gill Sans er brukt gjennomgående på logo og alle sidene. Den er en enkel font uten seriffer, som gir et elegant preg. Dersom brukeren ikke har denne fonten tilgjengelig, kan den lett erstattes med fonter som Arial,Trebuchet MS og Verdana (7. Nielsen/Loranger, Prioritizing web Usability, s. 232 ) Søkefelt: Web siden inneholder mange forskjellige aktiviteter. Det skla være enkelt å søke etter informasjon på siden. Søkefeltet er derfor satt oppe til venstre. Det er godt synlig og har plass til over 30 tegn i søkefeltet. Dette for at brukerene skl kunne se hva de skriver og derfor få bedre treff på søkene sine Det legges vekt på at søkefeltet ikke skla være avansert. (8. Nielsen/Loranger, Prioritizing web Usability, s. 142-143, 148-149,) Hjem knapp: Brukere som finner siden fra eksterne sider eller fra en søkemotorside vilte lande på uvilkårlige sider. Detter er tatt hensyn til ved at hjem knappen følger alle sider. Den ligger i toppen sammen med alle aktørene sine knapper. Flytkart. Flytkartet illustrer hvordan hovedmenyene er delt inn i kategorier/aktører. Web strategi/markedsføring av siden: Web siden må inneholde relevant og korrekt informasjon. Innhodet må være nytt og oppdterte. Siden oppdateres og holdes ved like av web ansvarlig. Alle aktøer er ansvarlig for sende inn informasjonog bilder til web redaktøren. Tekstene må være informative og lettfattelige, og det må legges vekt på synlighet på web, det vil si fokus på søkemotoroptimalisering. (9. Furu Webkommunikasjon, 2006, s.122-151) Det er tatt hensyn til at noen av brukerene er svaksynte/blinde. Oppe til venstre på siden er det satt inn symboler med tekst for tilpassning av skriftstørrelse, opplesning av tekst samt engels språk. Noen av aktørene har allerede eksisterende sider og vil derfor bare bidra med informasjon om annet enn ved om arrangementer der de selv er involvert. Designet på disse sidene er lik som resten av nett stedet. Alle knappene på sidene til disse aktørene vil være utformet på samme måte som retsten av nettstedet. Forskjellen er at knappene er linker som fører brukeren (til den informasjonen som kunden etterspør) til aktørens egen nett side. (Dette gjelder skolen, bibliotek og kommunen) Det anbefales å gjøre en brukerundersøkelse for å se om kundene klarer å navigere mellom de forskjellige sidene fra Tangenten og over på de allerede eksisterende web sidene til aktørene (10. Furu, Webkommunikasjon, 2006, s. 70-72), Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 6
Alle sider inneholder linker til Facebook og Tvitter. Dette for at flest mulig brukere skl bli klar over at siden eksisterer og på denne måten gjøre siden kjent og utvide bruker gruppen. Søkemotoroptimalisering: Hvordan synliggjøre nettstedet på nettet: Tangenten kultursenter er et nytt senter og en ny web side. Det er derfor viktig at brukerene opnår best mulig treff på nettet. For å opnå høyest mulig rangering på treff er det en rekke tiltak som kan benyttes. Man kan kjøpe seg god rangering, men dette er å anse som en kortvarig lykke. Det anbefales å gjøre seg fortjent til gode rangeringer. Søkermotoroptimalisering ved skriving av teksteneer svært viktig. Det er svært viktig å gjøre seg kjent med mål gruppen og skrive tekstene på deres språk Språket skal være folkelig og legge vekt på de ordene som brukerene bruker. Dette for å lette søkene på siden, slik at brukerene får bedre resultat på sine søk. Sosiale medier er i dag en viktig aktør i markedsføring. Word og mouth er den beste reklame noen kan få. Den er i tilleg gratis. Det er derfor svært viktig at all informasjon på siden er relevant og fersk. Headinger bør være enkle og gi tydelig informasjon om sidens innhold til brukerene. Dette vil i tilleg gi økt søkbarheten på siden. Alle overskrifter settes i H1. H1 Kan bare brukes 1 gang pr side. H2- brukes på alle under tittler. H3-H6 brukes på henholdsvis brødtekster og bildetekster. Bildetekstene er korte men informative og illustrative. Disse tekstene legges også inn som alternativ tekst i html. Disse tiltakene vil gjøre tekstene søkbare for søkemotorene, samt at det vil hjelpe blinde og svaksynte i sin navigering på sidene. (Det anbefales å bruke Google til å lage nøkkelord.) (Åsen, Stig, forelesningsnotater: Webproduksjon - Google SOE) (6. Nielsen/Loranger, Prioritizing web Usability, s: 165,166, 168) Det legges vekt på bruken av linker til og fra nettstedet. Dette vil lede søk til siden og gjøre at siden får bedre søkbarhet og at søkermotorene lettere finner siden. Linkene må derfor være skrevet i ren html. (Knappene på siden må derfor ha en alternativ tekst) (Åsen, Stig, forelesningsnotater: Webproduksjon - Google SOE) Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 7
Kilder Nielsen/Loranger, Prioritizing web Usability 2006 Furu, Nina, Webkommunikasjon, 2006 Sig Åsen, forelseningsnotater: Web produksjon 2011 Else Munthe Kaas, forelseningsnotater: Farger 2011 Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 8
Personas 1 Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 9
Personas 2 Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 10
Personas 3 Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 11
Logo Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 12
Kjernesider Design forslag Web Nivå 1 Start siden Tangenten Kultursenter Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 13
Kjernesider Design forslag Web Nivå 2 Start siden Tangenten Kultursenter- Bibliotek Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 14
Kjernesider Design forslag Web Nivå 3 Tangenten Kultursenter - Bibliotek -Barn Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 15
Kjernesider Design forslag Web Nivå 2 Tangenten Kultursenter Kulturskolen Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 16
Kjernesider Design forslag Web Nivå 3 Tangenten Kultursenter Kulturskolen - Undervisning - Musikk Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 17
Kjernesider Design forslag Web Nivå 4 Tangenten Kultursenter Kulturskolen- Undervisning Musikk - Fløyte Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 18
Flyt kart Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 19
Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 20
Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 21
Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 22
Oblig 3 Informasjonsdesign, webproduksjon, Ann Hege D. Olsen 23