Digital Mediedesign ved Høgskolen i Sørøst-Norge WEBANALYSE

Transkript

1 Digital Mediedesign ved Høgskolen i Sørøst-Norge WEBANALYSE Beate Johansen Lise Faye-Petersen Anne Grethe Nilsen Solveig Tjølsen-Becker Linda Therese Stadeløkken

2 Innholdsfortegnelse 1. Hva er produktet?... 2 Eiere... 2 Hensikt... 2 Målgruppe... 2 Profil Hvordan produktet virker?... 3 Informasjonsdesign... 3 Struktur... 3 Multimedia... 4 Interaktivitet... 4 Navigering... 5 Funksjonalitet Hvordan produktet ser ut?... 7 Grafisk profil... 7 Layout... 7 Farger... 8 Bilder... 9 Typografi...11 Video og animasjoner...12 Bakgrunn Konklusjon Kildehenvisning

3 1. Hva er produktet? Eiere Som en dårlig webside har vi valgt å analysere Smarte Penger sitt nettsted: På den andre siden, har vi som en god webside valgt å analysere NSB: Hensikt Hensikten med er å hjelpe forbrukere med å gjøre mer bevisste valg innen økonomi for å spare penger, med relevant teori og verktøy som ulike kalkulatorer. Hensikten med er hovedsakelig å informere kunder om persontogvirksomheten i Norge i form av brukerstøtte, ruteinformasjon og bestilling av togbilletter. Målgruppe Målgruppen til Smarte Penger er private forbrukere - alle som er interessert i å kunne ta smarte og bevisste valg i forhold til økonomi; innen bil, bolig, lån, reise, skatt og sparing. Målgruppen til NSB er reisende; reisende som ønsker et effektivt, behagelig og miljøvennlig transportalternativ. Profil Smarte Penger ønsker at nettstedet deres skal fremstå nøytralt for folk som søker råd om privatøkonomi og forbrukerstoff. De ønsker å være best på å vise privatøkonomiske konsekvenser av nyheter, og alltid ha det største og oppdaterte volumet av kalkulatorer, markedsoversikter og temaartikler. NSBs profil og verdier bygger på varme, sjarm og erfaring, som de ønsker å formidle som bedriftens identitet. Den reisende skal oppleve reisen som behagelig, effektiv og miljøvennlig. Med sin profil ønsker bedriften å bygge opp under merkevaren NSB, samt bygge ytterligere på relasjonene internt -og eksternt. 2

4 2. Hvordan produktet virker? Informasjonsdesign Smartepenger.no baserer sitt informasjonsdesign på å formidle veldig mye informasjon. Dette gjøres blant annet ved å benytte flere navigasjonsbarer, både i hodet, på sidene og i bunn, samt er det en mengde nyhetssaker som presenteres fortløpende nedover siden med bevegelig slider og bilder. I tillegg er det ads mange forskjellige steder på nettstedet som forstyrrer. All denne mengden informasjon føles overveldende og gjør websiden kaotisk. Nettstedet har også et søkefelt. Nsb.no har på sin side et mye enklere og oversiktlig informasjonsdesign. Nettstedet har en tydelig/enkel og oversiktlig oppbygning, som gjør det enkelt for forbrukerer å finne den informasjonen hun/han er på jakt etter. På forsiden er den primære informasjonen lett tilgjengelig, med bestillingsskjemaet sentralt oppå headeren mens annen viktig informasjon er lett tilgjengelig i menybaren øverst på nettstedet. Informasjonen som fins på nettstedet virker ikke overveldende, da den ikke blir kastet på forbrukeren allerede på første side, slik som en gjør hos smartepenger.no. All uviktig informasjon er skrellet vekk på nsb.no, mens det som er relevant er lett og intuitivt å finne i menyene. Struktur Smartepenger.no har en hierarkisk struktur, men da den har veldig mange forskjellige menyer med undermenyer virker det hele rotete og forvirrende. Det blir for omfattende å tegne hele strukturen til smartepenger.no. Dette er et eksempel på en hierarkisk struktur: 3

5 Nsb.no, har også en hierarkisk struktur, men her har man valgt å ha korte og oversiktlige menyer på hovedsiden. Da det vil bli for omfattende å lage en komplett struktur, har vi laget en litt forkortet versjon av nsb.no sin struktur: Multimedia Smartepenger.no, som et multimedialt medium, har ikke tatt i bruk video og grafikk, mens de heller har fokusert på store mengder tekst og bilde, samt en interaktiv kalkulator. Skulle nettstedet smartepenger.no, slik det framstår per. i dag, i tillegg tatt i bruk video og grafikk kunne det ført til at nettstedet attpåtil ble mer desorienterende. Nsb.no har tatt i bruk flere multimediale virkemidler enn smartepenger.no, men virker på sin side mye mer ryddig og oversiktlig. Dette er fordi bruken av de ulike virkemidlene er gjort med måte, samt at plassering -og bruk av tekst, bilde, interaktivt skjema, grafiske elementer som logo/ikoner, og grafikk (animert banner) er nøye planlagt i forhold til sidens layout. Interaktivitet Smartepenger.no har en rekke økonomiske kalkulatorer der den besøkende selv må fylle ut informasjon for å ta i bruk verktøyet. Nsb.no har interaktivitet i form av billettbestillingsskjemaet der kunden selv må fylle ut for å finne togtider og kunne bestille togbilletter. 4

6 Navigering Som nevnt tidligere, har forsiden til smartepenger.no flere navigasjonsmenyer. Forsiden har en hovedmeny med dropdown, syv sidebar-menyer, og en meny i footer. Videre har alle disse menyene forskjellig innhold, noe som gjør at websiden oppfattes ustrukturert og forvirrende. Nsb.no har en kort hovedmeny, en sandwichmeny og en footer-meny. Det er lett å navigere og finne den informasjonen man er ute etter. For finne reisemål og togtider kan man fylle ut skjemaet. Knappen med se tider og priser er rød, slik at blikket automatisk ledes til den. Navigasjonsstrukturen til nsb.no er enkel, intuitiv og gjennomtenkt. Den er også konsekvent. Header og footer har ulike menyer som går igjen på alle sidene og disse lenker til nyttige tema. Det at man har tilgang på disse menyene, uansett hvilken artikkelside man befinner seg på, gjør det veldig enkelt for brukeren å navigere på nettstedet. Navigasjonen oppfattes som uanstrengende. Også banneret hvor man kan bestille togbilletter er tilgjengelig nederst på alle sidene, like over footer, slik at man slipper å gå tilbake til forsiden etter å ha lest ulike artikkelsider. På undersidene eller artikkelsidene er det brukt ulike maler. På sidene med artikkeltekst har man brukt en svært enkel artikkelmal som lenker til annen informasjon i selve teksten, mens andre sider bruker en mal som består av tre sentrerte kolonner med lenke som tittel og ingress under. Dette gjenspeiler designet på forsiden, hvor det også er brukt tre sentrerte navigasjonsbokser. Menyene består av korte, enkle og praktiske ord som gjør det intuitivt og enkelt å finne frem til riktig innhold. Enkelte av menyene henvender seg også direkte til spesifikke brukere. Et eksempel på dette er menyen Reise med barn som tydelig henvender seg direkte til reisende familier. Navigasjonsstrukturen til smartepenger.no er uoversiktlig og forvirrende. Flere av menynavnene i toppmenyen gir ingen mening, og flere av menyene har veldig lange undermenyer i drop down format. Brukeren blir overlesset med informasjon og valgmuligheter. 5

7 Det virker som om det ikke er gjort noen sortering av hva som er viktig og mindre viktig informasjon. Alt innhold er likestilt og tilsynelatende tilfeldig plassert, noe som gjør det svært vanskelig å navigere og finne frem. Header og footer, samt enkelte av høyremenyene går igjen på sidene, men på grunn av ulogiske menynavn og tilfeldig plassering av menyer bidrar ikke dette til enklere navigasjon. Lange høyremenyer, som består av påmelding til nyhetsbrev og fem rammer med lenker til mer informasjon, tar mye plass slik at man må bla langt ned for å komme til slutten av siden. Enkelte sider består kun av lenker uten en logisk eller forklarende overskrift. I tillegg går det annonser igjen på de fleste sidene, noe som bidrar til å skape forvirring. Ved første øyesyn kan man lett tro at annonsene lenker til annet innhold på nettstedet. Artikkelsidene har standard oppbygning med tittel, ingress, avsnitt og bilder, men tekstene er så lange slik at man må bla seg langt ned for å komme til slutten av siden. Funksjonalitet Smartepenger.no har på grunn av alle navigasjonsbarene, samt den store mengden med informasjon gjort det vanskelig for forbrukeren å finne den informasjonen hun/han faktisk er ute etter. Dårlig funksjonalitet og desorienteringen i nettstedet kan føre til at potensielle kunder blir avskrekket fra å ta i bruk deres tjenester. Nsb.no har tydelig tenk på at brukervennlighet dreier seg om funksjonaliteten på nettsiden. De har lagt mye ressurser og energi i å gjøre nettstedet enklest mulig å navigere seg i. Oppsettet til nsb.no har i mange sammenhenger blitt trukket fram som et stjerneeksempel på god nettside som er forbrukervennlig. Nå har store flyselskap som Norwegian og SAS latt seg inspirere av nsb.nos modell. 6

8 3. Hvordan produktet ser ut? Grafisk profil Den grafiske profilen til smartepenger.no virker i utgangspunktet lite gjennomtenkt. Det er brukt blå som hovedfarge; en farge som er veldig vanlig innen bedriftslogoer. Videre består selve logoen Smarte Penger kun av tekst, og er av skrifttypen Helvetica. Logoen til smartepenger.no er følgende: Den grafiske profilen til NSB er derimot gjennomtenkt, dens oppgave er å understreke/framheve bedriftens merkevare som behagelig, effektiv, og miljøvennlig. Den grafiske profilen til NSB omfatter logo, logolinje, fargepalett, fonter, trykksaker, profileringsog reklameartikler, skilt, uniformer, fotoprofil (motiver, fargeprofil, stemning). Logoen til NSB kommer i to versjoner; primærlogo og sekundærlogo: Layout Begge sidene er bygget opp med firkantete elementer med forskjellig innhold; hode, menyer, banner, bilder og tekst, og footer, etc. Begge sidene er scrollbar og responsive. Forsiden til nsb.no er bygget opp med forskjellige avdelinger. Hodet i toppen er enkelt utformet med logo, meny med tre knapper og en hamburgermeny. Blikkfanget på siden er et stort banner som strekker seg over hele bredden, og et godt synlig bestillingsskjema plassert på banneret. Under følger et lite felt med funfacts og videre tre klikkbare annonser i høydeformat. Neste avdeling er fire kvadratiske teasere på lys grå bakgrunn illustrert med enkle ikoner, en payoff på 7

9 lys blå bakgrunn i sidens bredde med illustrasjon, før en mørk grå footer med en omfattende meny i negativ tekst danner bunnen av siden. Her er det også blitt plass til linker til diverse sosiale nettverk. Virkemidler brukt på smartepenger.no: Kontrast i form og størrelse mellom elementene, fargekontrast. Fontstørrelsen er på forsiden ganske jevn, fra mellomstor mot mindre. På undersiden er det brukt en noe større overskrift. Siden er balansert, ryddig og leservennlig. Den har et tydelig hierarki, der leseren ledes direkte til bestilling av billetter, og videre nedover siden. Det er ikke brukt skygger eller liknende. Smartepenger.no sin forside benytter ikke hele bredden for sitt innhold, men dette er plassert i et hvitt felt på grå bakgrunn. Header derimot går over hele siden og her er logo og et søkefelt plassert. Under følger faner med hovedmenyen. Et mindre felt er brukt til en bildeslider for tre bilder med tilhørende nyhetssak, som deler bredden med to innholdsrike sidemenyer. Siden forøvrig er bygget opp med tre spalter med nyhetssaker samt en noe bredere sidemeny som benyttes til både annonsering og menyer. Footeren i sort med hvit tekst inneholder også menyer. Virkemidler brukt på nsb.no: Slider som skifter bilder som blikkfang. Fargekontrast mellom bruk av rødt og blått. Forskjellig størrelse på titler. Bilder som blikkfang for saker (men alt for mange gjør at det er vanskelig å orientere seg). Siden er ubalansert, overlesset med stoff og svært lite lesevennlig. Det er ikke noe tydelig hierarki annet enn at øynene først følger bevegelsene i slideren, men leseren får ingen hjelp videre. Designeren for dette nettstedet har nok ikke lest Hicks lov! Det er ikke brukt skygger eller liknende. Farger Smartepenger.no har brukt blå (#3377BB) som primærfarge. Blått er farge som gir uttrykk for pålitelighet, troverdighet, sikkerhet og ansvarlighet. Det er en populær farge for firmaer innen 8

10 blant annet finans. Fargenyansen kombinert med hvitt i logo ( Smarte Penger ) minner om Facebook: NSB på den andre siden har rød som primærfarge og hovedfarge i logoen. Disse to fargene er også de som dominerer nettstedet. Rød er en farge som fanger oppmerksomhet og er energisk og kjærlig. Dette er en populær farge innen teknologi og biler. Sammen med rødt, blir hvitt brukt. Fargen hvit symboliserer renhet, den balanserer den sterke rødfargen, og er med på å gi nettsiden et lyst og luftig preg. I tillegg bidrar hvitt med at fokusområder som eksempelvis tekst, informasjon og foto fremheves. Kombinasjonen av rødt og hvitt gir oss en litt nasjonalistisk følelse da det minner om norskeflagget. NSB sine farger er følgende: Bilder Smartepenger.no har kun bilder tilknyttet artikler - både som thumbnail (forhåndsvisningsbilde) og headerbilde når man er inne på den aktuelle artikkelen. Disse bildene har som formål å skape en stemning og være relevant i forhold til artikkelinnhold. Utover dette har bildene på smartepenger.no ingen funksjon. Nedenfor vises artikkelpresentasjon med thumbnail-bilde: 9

11 Nedenfor vises innholdet inne på en artikkel, men et stort bilde i header som er relevant til artikkelen: Nsb.no har veldig begrenset bildebruk og holder det enkelt og stilrent. Hos nsb.no er bruken av bilder nøye gjennomtenkt for best mulig effekt. De har fokus på å formidle sin identitet som varme, sjarm og erfaring i sine bilder, men samtidig holde et lett å luftig uttrykk. Bildene er ofte manipulert for å få frem et bestemt budskap (se bilde nederst til høyre). Nsb.no bruker også 10

12 bilder ofte kombinert med grafiske elementer for å lage banner som fungerer som navigasjonsknapper til andre sider med informasjon: Typografi Smartepenger.no har i hovedmenyen sin brukt skrifttypen Roboto Condensed. Videre på andre menyer, overskrifter og ingresser. I en enkelt meny forekommer også skrifftypen Calibri. Alt i alt blir Helvetica mest brukt på websiden. Helvetica er en skrifttype som er lett å lese og som fungerer godt til det meste, og er derfor er bra valg. Typografien i hovedmenyen ser slik ut: Mens typografien i artikler ser slik ut: Nsb.no benytter Myriad Pro som primærfont og benyttes til overskrifter, titler, ingresser og mellomtitler. Videre brukes skrifttypen Bembo som støttefont til brødtekst. På diverse informasjonssider forekommer også bruk av Arial. Disse fontene fungerer veldig godt sammen og gjør at designet ser stilrent og enkelt ut. Typografi-kombinasjonen ser slik ut: 11

13 Video og animasjoner På nsb.no brukes GIF animasjon som forsidebilder som strekker seg fra venstre til høyre marg, uten at dette tar for mye oppmerksomhet eller virker forstyrrende. Bildene er tonet ned med et gjennomsiktig lag for å bidra til denne effekten. Det er ikke brukt annen animasjon eller video. På nettsiden smartepenger.no er det verken brukt animasjon eller video. Bakgrunn Begge nettstedene har en ensfarget og lys bakgrunn, noe som gir webdesignet et minimalistisk preg og gjør at fokuset blir på selve innholdet. Smartepenger.no har lys grå bakgrunn (#EEEEEE) mens Nsb.no har hvit (#FFFFFF). 4. Konklusjon I denne analysen har vi tatt for oss smartepenger.no og nsb.no. Helhetsinntrykket for smartepenger.no er at websiden ser rotete, utdatert, billig og uprofesjonell ut. Svake sider for smartepenger.no er først og fremst strukturen og navigasjon på siden da den er veldig kaotisk og altfor omfattende. I tillegg har de kun brukt tekst og bilder i forbindelse med multimedia, men samtidig kunne mer bruk av multimedia gjort siden enda mer masete. Funksjonaliteten kan med andre ord forbedres drastisk ved blant annet å gjøre det lettere for forbrukeren å faktisk finne frem til informasjonen vedkommende er ute etter. Smartepenger.no kunne også med fordel ha valgt en litt særegen primærfarge i logo og på webside da den ellers minner veldig om Facebook. På den måten kunne de kanskje skilt seg mer ut og fått en egen identitet. Typografien de har valgt er lett å lese, men de kunne med fordel 12

14 ha valgt en større kontrast i font brukt i overskrift og tekst ellers. Sterke sider ved Smarte Penger er at de har mye godt innhold skrevet av fagfolk på nettstedet sitt, men som ikke kommer tydelig frem på grunn av det uoversiktlige designet. Hadde smartepenger.no redesignet siden og gjort den enkel og oversiktlig, ville de med fordel også kunne benytte flere multimedia-elementer, samt video og animasjoner. Helhetsinntrykket av nsb.no er svært positivt; det er et rent design og man finner raskt og enkelt frem til informasjonen man er ute etter. Strukturen og navigasjonen er god, både med tanke på menyen som er øverst (mest brukte sider), samt totalmenyen øverst til høyre. Elementene er plassert etter standarder hvor de vanligvis befinner seg, som videre fører til lett navigasjon på nettstedet. Nsb.no sin bruk av multimedia som tekst, bilde, skjema, logo/ikoner (grafiske elementer) og animerte bannere (grafikk) er nøye gjennomtenkt. Typografien NSB har valgt er moderne og lett å lese, og funker godt i alle type tekster og grafikker. NSB bruker også video i form av animert GIF-banner på forsiden som styrker nordmenns tilknytning til NSB som selskap og deres norske identitet. Alt i alt er nsb.no veldig gode på nettstedet sitt med tanke på webdesign. Likevel har vi kommet frem til to svake sider. Turister er hyppige brukere av NSB og vi mener det derfor kunne vært nyttig at man lettere kan finne frem til hvordan man får nettstedet på engelsk. Slik det er per nå må man trykke på hamburgermenyen øverst til høyre for deretter å velge in english. Dette er ikke alltid like enkelt å forstå og finne frem til, og nsb.no kunne med fordel hatt små ikoner øverst til høyre på siden; én for norsk, og én for engelsk webside. I tillegg er søkefunksjon mye brukt på en webside, men på nsb.no er den kun synlig i hamburgermenyen. Denne søkefunksjonen kunne heller vært synlig øverst på forsiden. 5. Kildehenvisning Digi.no ( ). Her er de gode og dårlige nettsidene, tilgjengelig på: ( ) NSB (udatert). NSB sitt nettsted, tilgjenglig på: ( ) NSB (udatert). Designmanual for NSB, tilgjengelig på: ( ) Smarte Penger (udatert). Smarte Penger sitt nettsted, tilgjenglig på: ( ) 13