Denne “Webanalysen” (formal og innholdsanalyse av et nettsted) er en skriftlig oppgave ved “Digital mediedesign” som er et nettbasert årsstudium ved Høgskolen i Telemark, avdeling Notodden. Våren 2010

FORMAL OG INNHOLDSANALYSE

http://www.ica.no

HØGSKOLEN I TELEMARK
Digital mediedesign
Web og informasjonsdesign

Vår 2010


DEL 1

Innledning

I denne oppgaven analyserer vi nettstedet til matvarekjeden/konsernet ICA.

ICA er et stort internasjonalt konsern og vi skal analyser den norske avdelingens nettside.

ICA har en mangfoldig og omfattende nettside. Den synes i første rekke å være rettet mot den vanlige forbrukeren, men siden inneholder også informasjon for den som er interessert i selskapet av andre grunner. Det er for eksempel mye info for de som ønsker å søke jobb i ICA, på samme måte som det finnes informasjon om finansiell status for de som vil vite mer om ICA i et økonomisk henseende.

Hovedmålgruppen er imidlertid den vanlige forbrukeren som er interessert i dagligvarer. På siden finnes matoppskrifter og tilberedningstips, som skal gi inspirasjon og matglede. Det finnes også mye annen seriøs informasjon om mat og matprodukter. De profilerer fordelene med et sunt og næringsrikt kosthold, og gir utfyllende forklaringer på hvordan en skal tolke varedeklarasjoner, ingredienslister og kvalitetsmerking. Økologisk mat har også fått mye omtale på nettstedet.

DEL 2

Et nettsted må designes slik at innhold og funksjonalitet henger sammen på en fornuftig måte.  Derfor er det viktig at nettsiden ikke kun er pen å se på, men også er brukervennlig og inneholder ting en bruker kan nyttiggjøre seg av.

Informasjonsdesign

Et nettsted består av mange elementer som skal settes sammen til et hele. Informasjonen som skal publiseres , er det viktigste av dem . (Erichsen 2001, s.478)

Informasjonsdesign er altså strukturen og sammenhengen mellom sidene.

ICA har valgt å legge informasjonen i 4 forskjellige kategorier.

Øverst på siden finner vi fanene/kategoriene;

Mat & Inspirasjon, Butikker & Varer, Kontakt oss og Jobb i ICA.

Disse kategoriene gjentas i bunnen på siden. De er synlige og gir en god pekepinn på hvor man skal navigere videre til de andre sidene, på en ren og elegant måte.

Struktur

Strukturen er nært knyttet til informasjonsdesignen. Hovedstrukturen er lagt opp hierarkisk. Dette er den vanligste måten å organisere et nettsted på, der informasjonen deles inn i enheter som utdypes nedover i strukturen. (Erichsen 2001, s. 480) Denne måten å bygge en side på er oversiktig, så lenge de ulike kategoriene fremstår som logiske ovenfor brukeren, og det kan ofte være et godt utgangspunkt for mer komplekse nettsteder. Med slik struktur bør man passe på at det ikke er for mye klikk til detaljinformasjonen. (Erichsen 2001, s. 480)

På ICAs nettsider kan man søke på tvers av kategoriene . Det er laget flere innganger til det samme stoffet for lettere å kunne navigere seg rundt på nettstedet.

Multimedia

Det å benytte seg av multimedia på en nettside, kan gjøres med for eksempel bruk av lyd, bilder eller levende bilder av forskjellige slag. På ICAs nettsider er det ingen utstrakt bruk av multimedia. På en underside ligger riktignok ICAs reklamefilmer som mange kjenner fra fjernsyn. Ellers ligger det en rekke bilder på sidene, spesielt fokus er det på bilder av tiltalende matretter og matvarer.

Interaktivitet

Interaktivitet handler om i hvilken grad brukeren har mulighet til å påvirke nettsiden, og forme den etter brukerens egne ønsker.

Interaktivitet går hånd i hånd med brukervennlighet. (Erichsen 2001, s. 484)

Man kan for eksempel skrive inn en matingrediens i ICAs oppskriftsøk, og få tilbake svar i form av retter som inneholder denne ingrediensen. På denne måten tilpasser nettsiden seg etter hva brukeren er opptatt av og hva han eller hun liker, og foreslår ulike matretter til brukeren.

Når det gjelder interaktiv kommunikasjon så er ikke ICAs nettsider de beste eksemplene på dette. Man kan sende inn spørsmål via mail, og klage på matvarer fra ICA via et tilbakemeldingsskjema.

En del av interaktiviteten på ICAs hjemmeside er at man kan dele en lenke til oppskrifter med andre, via for eksempel det sosiale mediet Facebook. Nettsidene har en delefunksjon som har blitt mer eller mindre standard på en rekke nettsteder etter framveksten av sosiale medier som fordrer mye interaktivitet mellom brukerne. Her kan man dele lenker med andre gjennom en mengde forskjellige andre nettsteder.

En annen funksjon på nettsidene er at man kan lage sin egen tilpassede handleliste, gjerne basert på oppskriftene du finner på nettsiden. Denne kan man i neste omgang sende til seg selv eller en venn på mail, via en link, eller skrive den ut på en skriver.

Her kan man savne en funksjon der man kan legge inn sine egne oppskrifter.  Siden er med andre ord ikke interaktiv i den forstand at man kan bidra med eller påvirke innholdet på siden.

Navigering

Navigering dreier seg om å lage et system der brukeren alltid vet hvor han eller hun er, hvor han kan gå, og hvordan han kan gå dit. (Erichsen 2001, s. 488)

Navigeringen på en nettside henger ofte sammen med strukturen.

Hovedstrukturen på ICAs nettide er de 4  hovedelementene og nederst på nettsiden ligger det 4 bokser, som viser frem en del av innholdet under de fire hovedmenyene, men som ikke fungerer som noen god navigeringsmulighet i seg selv.

Under hovedsiden kommer man inn i en noe annen form for navigering, der menyen ligger øverst til venstre på siden. Siden er ganske oversiktlig på den måten at det ikke er vanskelig å finne ut hvor man er på siden, og ganske intuitivt å finne tilbake igjen der man var. ICA-logoen fungerer som en ”hjem”-knapp, og bringer brukeren tilbake til forsiden, noe som er et kjent navigeringspunkt for vante nettbrukere.

Man kan også navigere rundt i strukturen ved hjelp av søkefunksjonaliteten på nettsiden.

DEL 3

Å avgjøre om nettstedet består av godt eller dårlig design i forhold til målgruppe er vanskelig. Nettstedet oppfattes forskjellig etter brukerens formål og behov. Godt design avgjøres etter brukerens situasjon og om brukeren raskt oppfatter hvor han skal klikke for å finne ønsket informasjon.

Grafisk profil

ICA-konsernet er en av Nordens ledende detaljhandelsselskap med ca. 2300 egne og kjøpmannseide butikker i Norge og Sverige (http://www.ica.no/FrontServlet?s=om_ica&state=start). Firmaets grafiske profil er en viktig del av firmaidentiteten eller firmaprofilen. Den danner standard for utforming av alle synlige deler av firma (Erichsen 2001, s. 426). ICAs grafiske profil fremstår ryddig og oversiktlig. Det som er kjennetegner siden og går igjen er rødfargen, som hyppig brukes i ulike nyanser og som knytter nettstedet til ICAs markedsprofil.

Layout

Innen layout må det tas hensyn til det visuelle og det funksjonelle (Erichsen 2001, s. 306). I følge Erichsen leser man ikke siden , men derimot skanner den (Erichsen 2001, s. 307), dette fører til at brukeren av et nettsted ser først siden som en mengde former og farger. Det er derfor viktig med sterke visuelle kontraster som gir liv til komposisjonen. Tekst må for eksempel stå i kontrast til fargen i bakgrunnen.

Teksten er skrevet i hvitt og svart etter hvilken farge som brukes i bakgrunnen. Det blir brukt hvitt der bakgrunnen består av mørke farger og svart der bakgrunnen er lys. Kontrastmessig i forhold til farge fungerer dette godt, men i boksene i undermenyen kommer teksten litt dårlig frem. Se for eksempel linken ”Lag dine egne gaveetiketter” i oransje boks.  Det er mulig at enten metaforer eller større tekst hadde fått denne teksten tydeligere frem. Også i hovedmenyen over kunne valgene komt litt bedre frem. Større skrift hadde kanskje vært redningen her også.

Forsiden til ICA.no består av en innramming av informasjon uten at det er brukt markerte linjer. Banner, annonser, bilder og bokser er plassert på linje med hverandre i en usynlig firkant. Noe som får nettstedet til å fremstå ryddig og oversiktlig ved at all informasjon er plassert innenfor en ramme.

Logoen er plasser oppe i venstre hjørne og følger de konvensjonelle regler for nettsted. Dette er den vanligste plassering av logo i forhold til ulike nettsted (VG, Dagbladet, MSN, Facebook etc.) Menyen følger i en horisontal linje etter logoen og det er mye luft mellom valgene slik at de kommer tydeligere frem.

Under logoen og banner/meny  presenteres et bilde av grønnsaker med tekst som omhandler sunn og vitaminrik mat. Denne blir lett oversett ettersom blikket blir trukket forbi denne og ned på boksene under. Der det er brukt skarpe farger og bilder. Noe som skaper blikkfang.

Plasserer man det gylne triangel, det stedet hvor blikket lander når man går inn på en webside, over forsiden får man lite informasjon om ICA eller hva man finner på nettstedet, annet enn at vi er på ICAs hjemmeside.

Selv om den viktigste informasjonen ikke er plassert i selve triangelet er det brukt skarpe farger som tiltrekker oppmerksomhet i layouten. De skarpe fargene kontrollerer blikkretningen.

De fire boksene: MAT OG INSPIRASJON, BUTIKKER OG VARER, KONTAKT OSS og AKTUELT er like store bokser med ulike farger. De tre første har sterke farger som tiltrekker oppmerksomhet. Dermed har de oppnådd at brukeren får med seg mye informasjon.

Klikker man inn på en av linkene i disse boksene kommer får man opp en boks til venstre der menyen, som også er presentert i banneren, vises. Her fungerer det gylne triangel meget bra.

I forhold til layout er det viktig å ikke fremheve for mange elementer, for da konkurrerer de om oppmerksomheten (Erichsen 2001, s. 306). I midten på forsiden er det plassert annonser. De tiltrekker ikke så mye oppmerksomhet som banner/meny og boksene under, men de skaper ubalanse på siden. Annonsene er ikke like store og det tar lang tid før man legget merke til at den ene boksen faktisk ikke er annonse men derimot ”Dagens middagstips”. Noe som nettstedet for øvrig er flink å oppdatere. Helhetlig burde denne linken kommet bedre frem i stedet for å være gjemt mellom to annonser. Hva man skal ha til middag er et hverdagslig problem som mange sliter med. Middagstips er derfor ofte en av hovedgrunnene til at man går inn på en hjemmeside for en matvarebutikk.

ICAs hjemmeside består av mye luft, men grunnet mange elementer som kjemper om oppmerksomheten blir ikke luften utnyttet fullstendig. Forsiden består av hele 5 bilder utenom to fargerike annonser, en bildebanner i sterk rødfarge, fire store bokser i skarpe farger og tekst. Det er mye som kjemper om oppmerksomheten til brukeren. Samtidig kommer det ikke valgene godt nok frem til at oppmerksomheten blir opprettholdt.

I boka mediedesign bruker Erichsen et gjennomgående spørsmål: vil de valgene jeg nå vurderer, styrke eller svekke formidlingen av budskapet? (Erichsen 2001, s. 25). Av den grunn undres det over om det har blitt testet å ha hele nettsiden midtstilt. Blir det da for mye luft eller kan det være at informasjonen kommer bedre frem i midten av nettleseren enn oppe i venstre hjørne?

Farger

Farger er det visuelt mest markante element i en design og velges ofte på bakgrunn av retningslinjer som er lagt i en profil- eller markedsplan med hensyn til stil og tone (Erichsen 2001, s. 313). ICAs logo er rød og bæreposene består av en stor, rød ICA logo på hvit bakgrunn. Siden ICAs profil består av denne fargen er det naturlig for ICA å velge rødt som hovedfarge på nettstedet http://www.ica.no. Rød er en sterk oppmerksomhetsskapende farge. Sterk kontrast i farger trekker blikket til seg (Fagerjord 2006, s. 37). Rødt er brukt i kontrast mot det hvite og rene, dette fremhever nettstedet og markedskonseptet. Sterke og lyse farger virker nærmere enn mørke og duse farger, noe som kan utnyttes til å angi prioritet (Fagerjord 2006, s. 37).

For eksempel i boksene nederst på nettstedet er det brukt sterkest farge på ”Kontakt oss”, på denne måte kommer den tydelig frem. Det er også brukt skarpe farger på ”Butikker og varer” samt ”Mat og inspirasjon”, mens på ”Aktuelt” er den brukt dus farge. På denne måten prioriterer nettstedet ”Kontakt oss” fremfor ”Aktuelt”. Farger er identitetsskapende og et godt verktøy å bruke når man skal holde temaer adskilt (Erichsen 2001, s. 313).

Med farger følger også en del konnotasjoner, rødt kan bety ild, fare, stopp, og kommunist, mens grønt kan bety miljø og kjør (Fagerjord 2006, s. 37). Derfor er det lett å stoppe blikket når man ser rødt. På dette nettstedet fungerer det røde som en oppmerksomhetsfanger.

Bilder

På et nettsted kan bilder brukes i ulike sammenhenger og til ulikt formål. Bilder kan fungere som bakgrunn, som et enkeltstående bilde, en del av komposisjonen, som kontrollelement, som ornament osv. (Erichsen 2001, s. 309).

Iwww.ica.no bruker bilder som både bakgrunn og en del av komposisjonen. Hovedsakelig er de brukt som illustrasjonsfoto. Bildene har til hensikt å illustrere det teksten handler om. For eksempel ved tittelen ”Fargerikt og sunt” er det bilde av grønnsaker. Bildet knyttes sammen med teksten og illustrerer det teksten handler om.

Bildet brukt i boksen ”Butikker og varer” fungerer som et meget godt illustrasjonsfoto, der man ser en familie med handleposen og mye varer. Bildet appellerer til familie og venner og de smiler på bildet. Noe som får handel til å fremtre gøy og koselig, noe man gjør sammen.

Under ”Aktuelt” fungerer bildet også greit som illustrasjonsfoto, bildet av aviser under presselinken. Det kan drøftes om det blir overflødig å ha begge deler, både bilde av aviser og teksten ”presse” og om det brukes kun for å skape gjennomgående komposisjon.

Avbildningen av opphakkede tomater under ”Kontakt oss” er noe forvirrende. Hva har tomater med kontaktinformasjon å gjøre? Her kunne det for eksempel vert brukt et bilde av ansatte i uniform. Ettersom reklamefilmene er tilgjengelig på nettstedet kunne nettstedet brukt bilder av disse av de kjente ”ansatte” som vist på TV.

I boksen ”Mat og inspirasjon” forventes det et inspirerende bilde av god mat. Mens dette fotoet er lite inspirerende. Det kunne vært presentert med flere råvarer eller en ferdig rett med flere ulike smaker i stedet for et bilde av en rødløk. Kontakt oss bildet hadde antakelig fungert bedre som illustrasjonsfoto for ”Mat og inspirasjon” enn bildet av rødløk.

Utover at bildene er brukt som illustrasjon og gir variasjon i komposisjonen praktiserer bildene som en dekorativ effekt på nettstedet. Bilder myker opp siden, gjør den livligere og behageligere å se på, og bidrar til å fange og lede blikket (Fagerjord 2006, s. 46).

Typografi

I forhold til tekst på skjerm bør man bruke fonter med god lesbarhet. Groteske fonter med minimum 12 punkter har god lesbarhet på skjerm (Erichsen 2001, s.312). Det bør brukes korte linjer og redusert tekst i forhold til at mye tekst er vanskeligere å lese på skjerm enn på papir. På dette nettstedet er det antagelig brukt Verdana som hovedfont. Fonten som er brukt fungerer fint og gir god lesbarhet. Samme stil er brukt i undermenyene, korte tekster og bruk av illustrasjonsbilder.

Valg og meny er skrevet med store bokstaver. Man leser gjerne formen på ordet, ikke enkeltbokstavene. Derfor er det lettere å lese ord med både store og små bokstaver enn ord med bare STORE (versaler) (Erichsen 2001, s. 313). Selv om versaler oftest  gir dårlig lesbarhet fungerer det godt på ica.no i forhold at menyen skal være synlig. Versaler brukt i menyen er også med på å danne et skille mellom hovedmeny og undermenyer. Helhetlig er tekstene er lett å lese og fremtrer ryddig og oversiktlig. Noen steder kunne det vert brukt større skrift i forhold til oppmerksomhetstiltrekking.

Video og animasjon

Det er ikke brukt mye video og animasjon på nettstedet, men noe er der. Blant annet tilbyr nettstedet ICAs kjente reklamefilmer. I tillegg finnes det en etikettmaskin, en form for flash video som gjør det mulig å lage egne etiketter. Den finner en ved å klikke mat og inspirasjon -> etikettmaskinen. Det er også en form for flash/video som er brukt  under Jobb i ICA -> Karriere i ICA -> Våre karriereveier. Samme gjelder under om Ica, der det er brukt en form for skiftende tekst i video.

Bakgrunn

Bakgrunner brukt på nettstedet er hovedsaklig rene og hvite. Utenom der blikket skal tiltrekkes og for å skille mellom ulike valg der det er brukt enkelt farger. I selve menyene er det brukt ulike farger for å skille mellom ulike tema. Samt har menyen til venstre en beige bakgrunn som går helt ned på siden. Denne finner man også oppe på ICA logoen. Utover dette skaper bakgrunnene liv og spenning i komposisjonen og uten farger og bilder som bakgrunn hadde design og layout fremstått noe kjedelig og monotont.

Konklusjon

Det synes som ICA ønsker å profilere seg på kvalitet og stort utvalg, og ikke like mye på lave priser og store tilbud. Nettsiden er derfor utformet med spesiell tanke på et forbrukersegment med kvalitetsbeviste og økonomisk solide kjøpere.

Nettsiden inneholder, som tidligere nevnt, informasjon for den som er interessert i selskapet av andre grunner. Det er for eksempel mye informasjon for de som ønsker å søke jobb i ICA, på samme måte som det finnes informasjon om finansiell status for de som er vil vite mer om ICA i et økonomisk henseende.

Designet på siden utnytter ikke den fulle skjermbredden og det resulterer at hele bildet blir lite. Designen virker litt ”gammeldags” i forhold til dette med skjermbredden og kunne fått et bedre utseende av at bildene hadde fått med en større bredde. Bredden ligger i dag på 700 pixler, men kunne med fordel bli lagt til 1000 pixler, med tanke på dagens skjermkapasitet på de fleste maskiner..

Man kan si at ICA kanskje ”later” som de er med på sosiale medier. Man kan for eksempel legge oppskrifter inn i handlelister på siden, som er veldig bra, men det går ikke an å sende den videre til mobilen. Man kan derimot dele den på Facebook, men det er lite praktisk i forhold til sms når man skal ut og handle i butikken.

Vi synes at ICA burde ha brukt reklamefilmene sine for det de er verdt, ved å bruke bilder på nettsiden i stedet for å, for eksempel, bruke bildet av mat under fanen ”Kontakt oss”.

ICA sin hjemmeside er ren og har et pent design. Den er lett å navigere i og innbydende for brukeren.

REFERANSELISTE:

Erichsen, Stein Holmboe, 2001. Mediedesign. GAN Forlag, Oslo.

Fagerjord, Anders 2006 WEB-MEDIER Introduksjon til sjangre og uttrykksformer på nettet. Universitetsforlaget, Oslo.

ICAs hjemmeside www.ica.no

____________________________________________________________

Skjermbilde av http://www.ica.no, tatt 11.03.2010