Webdesignopgave 2009

46
!"#$%&’(# !%*’+# !"#$"%&’( *’ +"#,*--.(&,/0*( 1234&/( 51"4&67 8*494 :;;< =4.>>" :? @ A&(/ B/- CD;CE:FDG<H7 I"/ I"JK( D:;EE:F:GLL7 M/$% NO4P Q4"$"4&,%"( ;<DDEDFD<G<7 R">>" M*4’"(JO/S"4 :C;?GGF:<;D T I*.&%" RP I"&$"4%$*4U MVW"(4X :H;<G<FD:CH Y(%S/’@ EHPG:<

description

Webdesignopgave lavet p ITU i 2009, sammen med min super seje gruppe.

Transcript of Webdesignopgave 2009

Page 1: Webdesignopgave 2009

!"#$%&'(#)!%*'+#

!"#$"%&'()*')+"#,*--.(&,/0*()1234&/()51"4&67))8*494):;;<)=4.>>"):?)@)A&(/)B/-)CD;CE:FDG<H7)I"/)I"JK()D:;EE:F:GLL7)

M/$%)NO4P)Q4"$"4&,%"();<DDEDFD<G<7)R">>")M*4'"(JO/S"4)):C;?GGF:<;D)T))I*.&%")RP)I"&$"4%$*4U)MVW"(4X):H;<G<FD:CH)Y(%S/'@)EHPG:<)!!!

Page 2: Webdesignopgave 2009

INDHOLD

Side 1 Indledning (Alle)

Side 1 Metode (Alle)

Side 1 Kommunikationsplan

Side 1 Kravspecifikation (Nina Dam)

Side 2 Beskrivelse af brandets kvaliteter (Nina Dam)

Side 2 Målgruppen (Lea Letén)

Side 3 Målgruppens købemotivation (Lea Letén)

Side 3 Målgruppens forståelse af børnetøjs betydning (Lea Letén)

Side 3 Opsummering af målgruppens ønsker og interesser (Lea Le tén)

Side 3 Konkurrenter (Louise J. L. McHenry)

Side 4 Konklusion på kommunikationsplan (Nina Dam, Lea Letén, Louise J. L. McHenry)

Side 4 Produktudvikling (Louise J. L. McHenry)

Side 4 Eksemplificeret differentiering (Jeppe Morgenthaler)

Side 4 www.okkergokker.dk

Side 6 www.wheat.dk

Side 6 www.hollys.dk

Side 6 Visuelle Valg (Louise J. L. McHenry)

Side 6 Afsenderimage

Side 6 Funktionalitet

Side 6 Genre

Side 7 Målgruppe

Side 7 Farver i grafikelementer og tekstfelter

Side 7 Primærfarvepalette

Side 7 Sekundærfarvepalette

Side 7 Tekstfarver

Side 7 Valg af grafikelementer og design

Side 7 Logo

Side 8 Baggrund

Side 8 Header, indholdsfelt og menu

Side 8 Fotos

Side 8 Indeksfoto

Side 9 Foto af Rasmussen under menupunktet ”Om Jette”

Side 9 Fotos af produkter

Side 9 Typografi

Side 9 Baskerville

Side 9 Calibri

Side 10 Opbygning (Mads Chr. Frederiksen)

Side 11 Afprøvning af site (Alle)

Side 11 1. Testperson 1. afprøvning

Side 11 2. Testperson 1. afprøvning

Side 12 3. Testperson 2. Afprøvning

Page 3: Webdesignopgave 2009
Page 4: Webdesignopgave 2009

Side 12 Navigation (Mads Chr. Frederiksen)

Side 12 10 principper for navigation

Side 14 Skriftlig formidling (Alle)

Side 14 Fra ”My by Dandelion” til ”Dandelion Design”

Side 14 Beskrivelse – mig, mit firma og produkterne

Side 14 Om mig, Jette Rasmussen

Side 15 Tekniske specifikationer (Nina Dam)

Side 15 Websitets dimensioner

Side 15 Mappestrukturen

Side 16 Kodning af websitet

Side 16 Overordnet opbygning af sitet

Side 17 Menu

Side 17 Produkterne

Side 18 Validering

Side 18 Afsluttende bemærkninger (Alle)

Side 18 I en perfekt verden…

Side 18 Design

Side 18 Kode/teknik

Side 19 Anbefalinger til Rasmussen

Side 20 Litteraturliste

Side 20 Oversigts- og speciallitteratur

Side 20 Tidskrifter

Side 20 Websites

Side 21 Andet

Side 21 Bilagsliste

Page 5: Webdesignopgave 2009

INDLEDNING

Børnetøjsfirmaet Dandelion Design, herefter kaldet DD, blev etableret i

sommeren 2008. Firmaet bliver drevet af tekstildesigneren Jette Rasmus-

sen, herefter kaldet Rasmussen, som vi har fået forbindelse til gennem

tidligere netværk. Rasmussen designer børnetøj til drenge og piger i alderen

0-6 år; alle produkter produceres i Rasmussens værksted på Frederiksberg.

Designet er inspireret af børnetøj overvejende fra 1950-1970.

Alle produkter bliver syet efter det enkelte barns mål og kundens ønsker om

materiale og udtryk. En stor del af tekstilerne er økologiske og er reproduk-

tioner af tekstiler fra 1920’erne til 1970’erne. De fleste modeller bliver kun

syet op i meget få eksemplarer, så betegnelsen unika kan bruges. Rasmus-

sen startede firmaet på baggrund af en kraftigt øget efterspørgsel på hendes

design.

60% af nuværende salgsprocesser foregår over telefonen og ca. 40% face-

to-face med kunderne. Alle nye kundeforhold opstår på baggrund af anbe-

falinger fra eksisterende kunder. DD har intet website i forvejen, og bag-

grunden, for at Rasmussen ønsker at åbne et website, er følgende:

- Al for meget tid går med at forklare, hvordan de forskellige produkter ser

ud, og hvilke typer af tekstiler de kan købes i, og hvad de forskellige priser

er.

- Nye kunder kan ikke få et overblik over Rasmussens varesortiment og

køber oftest kun en vare magen til én, de har set hos en anden eksisterende

kunde.

- Rasmussen ønsker ikke en internetbutik, men nærmere et online ”visit-

kort” eller ”showroom”, som kan understøtte og forbedre nuværende

salgsoplevelse.

Hensigten med rapporten er først og fremmest at begrunde vores valg i ud-

formningen af DD’s site. Derudover ønsker vi også at skabe et reelt billede

af, hvilke udfordringer man møder i et samarbejde med en kunde. Vores

rapport afspejler derfor et samarbejde med Rasmussen, respondenter og

tidligere købere. Vi har revideret vores valg undervejs, hvilket har været en

naturlig konsekvens af den kritik, vi har modtaget. Vi har ligeledes haft dis-

kussioner med Rasmussen, hvor hun har ønsket en række ting, som vi ikke

fandt tilrådelige. Vi har ikke inkluderet alle diskussioner og rettelser, vi har

foretaget, men vi har udvalgt en række af de mest essentielle overvejelser,

da disse beslutningsprocesser afspejler, hvorfor vi har truffet en række valg.

METODE

Vi ønsker en bred forståelse for, hvordan vi bedst muligt løser de nuværende

problemer og både designer et effektivt site, der skaber overblik for kunden

og er tidsbesparende for Rasmussen, såvel som giver et indtryk af DD’s stil

og design. Ligeledes ønsker vi at møde målgruppen på rette vis, og vi læg-

ger derfor stor vægt på dette i opgaven. Da disse problemstillinger er meget

forskelligartede, anvender vi flere metoder for at afdække disse forskellige

aspekter.

I forhold til at skabe et website der rammer målgruppen, anvender vi

indsamling af data omkring målgruppen og kvalitative interviews med

tidligere købere af DD’s produkter. Dertil henviser vi til teori omkring kø-

beadfærd for at få indblik i, hvad der ligger til grund for målgruppens køb.

Her har vi i høj grad anvendt Russel W. Belks teori om menneskers forståelse

af ydre ting som dele af deres eget selv. Denne har vi anvendt for at anskue-

Page 6: Webdesignopgave 2009

liggøre, hvilken betydning børnetøj kan have for køberne. Opgaven vil være

af praktisk karakter, og anvendelsen af teori vil ske med henblik på at bruge

den som værktøj. Vi vil kun bruge de dele af de benyttede teorier, som vi

finder anvendelige for at besvare vores problemstilling og har ikke i sinde at

diskutere andre dele af teorierne end de elementer, vi benytter i opgaven.

På baggrund af et dybtgående afsnit om målgruppen og den deraf afledte

kommunikationsstrategi skaber vi nogle overordnede retningslinjer om-

kring, hvilken stil der vil være hensigtsmæssig at anvende på sitet. Derefter

lægger vi fokus på sitets praktiske udformning. I disse afsnit benytter vi os

ikke af nogle få gennemgående teoretikere, men trækker i stedet løbende

på relevant teori, der omhandler de emner, vi behandler. Vi inddrager derfor

teori, der er relevant for sidens opbygning, navigationsfunktioner, lingvis-

tik samt tekniske specifikationer. Vores designproces har fra start været

præget af, at Rasmussen kun har leveret få materialer til os, og at vi derfor

har måttet skabe alt grafisk materiale selv samt behandle billeder, som har

været af svingende kvalitet. Derfor har vi inkluderet et uddybende afsnit

omkring vores visuelle valg, hvor vi redegør for et udpluk af de valg, der er

truffet i den sammenhæng.

Vi har til formål at skabe et website, der i høj grad er brugerorienteret. Der-

for anvender vi løbende testpersoner, der giver respons på vores website.

Her har vi anvendt en kvalitativ observationsform, der vil blive uddybet i

afsnittet ”afprøvning af site”.

KOMMUNIKATIONSPLAN

Kravspecifikation

På baggrund af interview med DD’s indehaver (Se bilag 2), kan vi slå fast,

at det primære formål med websitet ikke er direkte salg, men i højere grad

at give et indtryk af DD’s kvaliteter og at præsentere de specifikke detaljer

omkring tøjet som priser, udvalg og muligheder for design. Rasmussen

ønsker at websitet skal fungere som et digitalt visitkort, som hun selv og

tilfredse kunder kan henvise til. Websitet skal spare Rasmussen for en del

telefonsamtaler med eventuelle kunder, og det skal lette den forklarende

indledende fase før bestilling. Dette er især vigtigt, da designet rummer

mange individuelle muligheder, der kan være en stor arbejdsmæssig byrde

at beskrive for hver kunde.

Det er ligeledes tanken, at eventuelle kunder selv kan udforske deres mu-

ligheder på websitet og dermed få mulighed for at blive fristet og overveje

priser etc., før de træffer beslutningen om at kontakte Rasmussen via mail

eller telefon. Websitet skal derfor præsentere:

• Oversigt over hvilke muligheder der findes for sammensætning af

modeller og tekstiler

• Detaljer omkring hvad de forskellige løsninger koster

• Information om Dandelion Design

• Information om Jette

• Kontaktoplysninger

• Information om hvordan man bestiller

1

Page 7: Webdesignopgave 2009

Da sitet skal fungere som et visitkort, er det dog essentielt, at det afspejler

en hensigtsmæssig stil i hele sit layout, sprog etc. (Bernstein 2007, s.3) Vi

vælger derfor at lægge stor vægt på at finde frem til, hvilke kvaliteter DD

kan byde på, hvad målgruppen ønsker fra et børnetøjsmærke som DD, og

hvad konkurrenterne tilbyder på deres websites. Derigennem ønsker vi

at skabe et website, der afspejler de af DD’s kvaliteter, som der er efter-

spørgsel på, og samtidig tilbyde en anden oplevelse end dem, der findes på

konkurrenternes websites. (Se bilag 2).

Beskrivelse af brandets kvaliteter

På trods af at en køber af DD’s produkter kalder tøjet for ”billigt i forhold

til samme varer andre steder” (Se bilag 1), er det ikke en lav pris, der er

mærkets stærkeste konkurrenceelement. (Sammenligning af priser fra bilag 2

med H&Ms priser, der er ca. tre gange så lave, H & M 2009) For at opnå en bred

forståelse af hvad DD i stedet har af kvaliteter, kan det være anvendeligt at

udforme en fyldig liste, der opsummerer, hvilke egenskaber brandet kan

tilbyde. Langt fra alle punkter herfra vil blive medtaget i en senere kom-

munikationsstrategi, men de kan i samspil med analysen af målgruppe give

et indblik i, hvor DD skiller sig ud, og på hvilke af disse punkter det vil være

gavnligt at fokusere (Aaker 2002, s. 192) Indehaveren og designeren af DD

siger selv, at DD ”står for ærlighed, kvalitet og ansvar som afspejles i alle

dele af tilblivelsen”. (Bilag 2)

Listen omfatter følgende karakteristika:

• Unika tøjstykker lavet specielt efter ønske

• Personlighed gennem det håndsyede tøj, der kommer direkte fra

designerens hånd til kunden

• Luksuriøst og dyrt

• Visse af produkterne i økologiske tekstiler

• Bestilles på nettet

• Anderledes og sjovt design

• Små produktioner

• Lille virksomhed

• Dansk design

• Nostalgisk design med henvisninger til 50’erne og 70’erne

• Med designs til babyer og børn op til 6 års alderen er DD ikke bare et

”design”, men praktisk og funktionelt tøj, der kan klare den daglige

brug (Se bilag 2)

Flere af disse værdier, som fx ”luksuriøst” eller ”nostalgisk”, er merværdier,

man kan vælge at tillægge DD, men disse er dog subjektive værdier. Der er

dog udelukkende nævnt egenskaber, som DD vil have mulighed for at leve

op til.

Vi har nu kort klarlagt en række merværdier, børnetøjet fra DD kan byde på.

Det er herefter vigtigt at udvælge nogle få af disse værdier og rette fokus på

disse i en formfuldendt og harmonisk stil, der afspejler DD’s image gennem

webkommunikationen (Engholm 2004, s.70) For at udvælge en række pas-

sende kernekompetencer er det vigtigt at forstå, hvilken kundegruppe DD

har. (Wodtke 2002, s.72)

Page 8: Webdesignopgave 2009

Målgruppen

På trods af at der ikke findes publicerede statistikker, der viser, at kvinder

køber langt størstedelen af børnetøjet i Danmark, er dette en følgeslutning,

vi drager på baggrund af nutidig litteratur om forbrug. Det kan fastslås, at

kvindens forbrugermagt er vokset støt, hvilket er en konklusion, der drages

af adskillige publicister som trendforskerne Poul Erik Jakobsen og Louise Byg

Jakobsen. (Jakobsen 2003, s.211)

Reklamebranchen opererer med tal, der viser, at op til 85 % af familiens

indkøb foretages af kvinden. (Cleaver 2004, s.56) At kvinden således stadig

varetager indkøbet af børnetøj, hvilket er en varegruppe, der kan betegnes

som kvindeprodukter, (Cleaver 2004, s.56) er derfor den følgeslutning, vi

tager udgangspunkt i i denne opgave.

Målgruppen er altså mødre til børn, og kommunikationen skal rettes mod

dem. Dette resulterer ikke nødvendigvis i at fædre, bedsteforældre eller an-

dre udelukkes, men de prioriteres ikke højest i kommunikationsstrategien.

Herudover finder vi det interessant at indkredse målgruppen, så den velud-

dannede mor kommer i fokus. Dette har sin årsag i tre bevæggrunde:

1. Gruppen af veluddannede kvinder er vokset støt gennem de

seneste 14 år. (Statistikbanken, 2009) Gennem det sidste årti er der opstået

en selvstændig gruppe af kvinder, der er veluddannede, lever materielt

rige liv og søger forbrug med oplevelser. Denne købestærke gruppe vokser

og skønnedes i 2002 at udgøre 1/3 af de skandinaviske kvinder. (Jakobsen

2003, s. 211) Der er altså tale om en stor gruppe, der gerne betaler ekstra

for produkter med emotionel merværdi.

2. DD ligger i den dyre ende, da produktionsomkostningerne er

høje på grund af de små produktioner, der alle er syet i hånden, og produk-

tet henvender sig til den ressourcestærke målgruppe. Eftersom løn stiger i

takt med uddannelse (Undervisningsministeriets hjemmeside 2000), vil den

veluddannede mor være en naturlig aftager af produktet. Det skal her indv-

endes, at der er tilfælde, hvor kvinden trods en lav indkomst prioriterer dyrt

børnetøj alligevel, eller at hendes samlever har en høj indtjening.

3. Det er ikke kun er det økonomiske aspekt, der er relevant i

indkredsningen af de veluddannede mødre. Det faktum, at DD’s produkter

er produceret i designerens eget hjem, og at visse dele af produktionen

også er økologisk, kan være et aspekt, der tiltaler den veluddannede kvinde.

(Forskningscenter for Økologisk Jordbrugs hjemmeside) Både på grund af

hendes personlige ønske om gennemsigtighed i forhold til de varer hun

indkøber (Jakobsen 2003, s.213), og fordi interessen for forurenings- &

miljøspørgsmål stiger i takt med uddannelsesniveauet. (HK 2006) Eftersom

disse alle er emner, som DD tager hensyn til eller berører (Se bilag 2), er det

gavnligt at henvende sig til en målgruppe, der har interesse i disse aspekter.

Designeren selv beskriver mærket som et, der ”står for ærlighed, kvalitet og

ansvar, som afspejles i alle dele af tilblivelsen.” (Se bilag 2) Det skal her til-

føjes, at der er kvinder uden lange uddannelser, der trods det har både god

økonomi og ønsker en gennemsigtig produktion, og disse er dermed også en

naturlig del af målgruppen.

På baggrund af dette afsnit kan det altså konstateres, at målgruppen er dan-

ske veluddannede mødre. Dette er dog stadig en meget bred gruppe, der

kan opføre sig vidt forskelligt som forbrugere. (Jakobsen 2003, s.212) Vi vil

ikke forsøge at indkredse mødrene yderligere via en demografisk tilgang, da

livsvilkår i dette tilfælde synes at være en vigtigere faktor end alder, geografi

etc. Vi vil i følgende afsnit diskutere dette aspekt.

2

Page 9: Webdesignopgave 2009

We are what we have (Belk 1998, s.139)

A man’s Self is the sum total of all that he CAN call his, not only his

body and his psychic powers, but his clothes and his house, his wife

and children […] (Belk 1998, s.139)

Målgruppens købemotivation

Det er blevet ekspliceret, at DD’s primære målgruppe er veluddannede

danske kvinder. Målgruppen har desuden et vigtigt fællestræk, som er anv-

endeligt i en segmenteringssituation: De er mødre. Dette medfører ikke kun,

at størstedelen har en sammenlignelig dagligdag med modsvarende prak-

tiske udfordringer tilfælles, men at der her er tale om en gruppe kvinder,

som står med en fælles rolle og et fælles mål; at være gode mødre. I denne

opgave tager vi derfor udgangspunkt det faktum, at en meget spraglet for-

brugergruppe, som kan betegnes som de danske veluddannede mødre, har

så slående fællestræk via deres rolle. Det er derfor essentielt at analysere,

om denne gruppe også deler de samme mål og motiveres af de samme fak-

torer, når de indkøber børnetøj. Hvis dette er tilfældet, vil det være muligt

på det punkt at betragte mødrene som en relativt homogen gruppe, hvilket

vil være gavnligt i udformningen af websitet. Derfor vil vi i det følgende afs-

nit forsøge at skabe et bedre indblik i, hvilken betydning børns påklædning

spiller i forhold til mødres livstemaer og livsprojekter.

Målgruppens forståelse af babytøjs betydning

Man kan argumentere for, at mødre betragter deres børn som repræsentan-

ter for dem selv, hvis man sammenholder dette udsagn med teori fremført

af blandt andet Russell W. Belk. Belk argumenterer for, at vi som mennesker

ikke blot opfatter os selv som vores sind, krop, tanker osv., men forstår vores

eget selv som både, hvad vi er, hvad vi kan, og hvad vi ejer; et udvidet selv.

Dette er en anskuelse, der i sine store træk støttes af talrige teoretikere som

Tuan, Feirnstein, Rosenbaum og William James, som formulerer aspektet

således:

Vores forståelse af, hvem vi selv er, inkluderer altså de objekter, personer,

karakteristika og steder, som omgiver os. Ligeledes kan vi tilegne os ud-

vortes besiddelser, der reflekterer vores personlighed og bliver til en del af

os selv. Spørgsmålet i denne situation er, om mødre betragter deres børn og

disses påklædning som dele af deres eget udvidede selv.

Belk argumenterer for, at andre mennesker kan indgå i en persons for-

længede jeg, og Prelinger, McClelland, Ellis og andre teoretikere har på bag-

grund af kvantitative undersøgelser konkluderet, at familie og venner kan

opfattes af mennesker, som indgår de i deres forlængede selv. (Belk 1998, s.

140) Herforuden har vi, ifølge Belk, i vores kultur en opfattelse af, at børn er

forældrenes ejendom, både på lovmæssigt plan, og også i opfattelsen af at

vi lever videre gennem vores børn, hvilket stærkt indikerer en opfattelse af,

at børn er dele af forældrenes udvidede jeg. (Belk 1998, s.156) Det er derfor

ikke påfaldende, at mødrene finder det vigtigt, at deres barn udstråler mø-

drenes egne attributter. Denne antagelse understøttes af Lars Pynt Ander-

sen, der i en forskerartikel henviser til et interview i en mødregruppe udført

af Marianne Babiel Kjær. Også i dette gør mødrene klart, at de ønsker, at

deres barn skal være pænt klædt på, så de afspejler, at de kommer fra et

hjem med overskud. (Andersen 2007, s.10) Det kan fastslås, at mødrene i

denne gruppe ser deres børn som repræsentanter for familien og deres eget

image. Herudover udtaler kvinderne i mødregruppen, at de ønsker at kunne

Page 10: Webdesignopgave 2009

genkende dem selv i barnets stil, samt at de ”opfatter andres blik på deres

barn som en granskning af dem selv, og endda som det vigtigste udtryk for

deres identitet, ikke blot som noget eksternt”.

Mødregruppen klæder i høj grad deres børn på for at vise, at de er gode

mødre. Dette er vigtigt for dem, da moderskabet er en vigtig del af deres

identitet og livsprojekt. I dette tilfælde er det idealet omkring den res-

sourcestærke mor, som mødrene vælger at afspejle i børnenes tøj. Barnet

og dettes påklædning bliver på denne måde en del af mødrenes identitet og

udvidede selv.

Det kan hermed konkluderes, at moderen i allerhøjeste grad shopper til sig

selv og shopper for at understøtte sin egen personlighed, når hun indkøber

børnetøj, og at man i markedsføringen af DD skal rette opmærksomheden

mod dette livstema, som mødrene har tilfælles.

En måde at vise sit overskud på som mor er ved at klæde sit barn i hjem-

melavet tøj. Hvis mødre ikke selv er i stand til, eller kan finde tiden til at sy

deres børns tøj selv, er DD et alternativ. Det afspejler ligeledes et overskud

at vælge udenom masseproducerede stangvarer og gå efter noget unikt. (Se

bilag 1)

Opsummering af målgruppens ønsker og interesser

På baggrund af denne konklusion vil det være gavnligt at opsummere og

tilføje, hvad mødrene kan have interesse i at afspejle gennem deres børns

tøj. Her tages ligeledes udgangspunkt i interviewet med DD’s nuværende

kunder (Se bilag 1), samt interviewet med mødregruppen.

Udover at barnets komfort er vigtigt for dem alle, kan man tale om en række

interesser, der alle afspejler ”overskudsagtige forældre”, hvilket mødrene

ønsker, at børnenes tøj afspejler. Mødrene henviser til, at børnetøj gerne

må afspejle følgende:

• Kvalitetstøj

• Hjemmelavet

• Komfort for barnet

• Dyrt tøj der viser overskud

• Barnet må gerne skille sig ud og ikke gå i stangvaretøj

• Nostalgi og intimitet

• Støtter image om overskudsmor

• Cool, smart og moderigtigt design

• Kvalitetsdesign

• Desuden finder vi det centralt, at mange mødre shopper babytøj

over nettet (Jasper, 2006)

Konkurrenter

For at opnå et design, der skiller sig ud fra konkurrenternes websites (Se

bilag 2), er det essentielt at forstå, hvilke konventioner der findes på det

øvrige marked. Denne forståelse har vi i dette tilfælde skaffet via analyse af

konkurrenters websites. På baggrund af observation og analyse af 25 web-

sites (Se bilag 3), kan det konkluderes, at følgende konventioner gør sig gæl-

dende i branding af baby- og børnetøj:

Som mange af navnene afspejler, er det legende barn udgangspunkt for

3

Page 11: Webdesignopgave 2009

mange af mærkernes profil: Bavian, Okker Gokker, Zirkus Zirkus, Ej Sikke Lej,

Wildfang etc. Mange af børnemodellerne fremviser tøjet i den vilde natur,

og et gennemgående tema er ”leg i det grønne”.

Fokus ligger på to aspekter: design og komfort. Websitene er meget produk-

torienterede, og tøjets materialer, størrelser og design beskrives indgående,

og tøjet vises ofte liggende fladt på hvid baggrund. Herudover er der stor

fokus på etik, og mange af websitene fortæller om, hvordan de bidrager til

bæredygtighed via økologi og støtte til fattige børn. Der tegnes korte per-

sonlige portrætter af grundlæggerne og designerne.

Konklusion på kommunikationsplan

Konkurrenternes store fokus på komfortdelen betyder, at det ikke skal være

det bærende element i markedsføringen af DD. Ligeledes kan DD heller ikke

konkurrere på det økologiske aspekt. I forhold til DD’s nuværende kvaliteter,

målgruppens ønsker og konkurrenternes fokusområder finder vi det i stedet

relevant at lægge hovedvægten på, at tøjet er håndlavet, syet specielt efter

ønske og er helt unikt, samt at give websitet et nostalgisk præg (Se Bilag 1),

der understøtter en romantisering omkring det ”hjemmelavede” aspekt.

Dermed plejes målgruppens eget image som mødre med overskud gennem

DD’s image. Det er derfor også vigtigt at afspejle, at køberne er i kontakt

med Rasmussen, når de navigerer rundt på sitet. Vi prioriterer højt at sælge

en livsstilshistorie via sitet, og et personligt touch er derfor altafgørende i

den videre designproces af websitet. Det lækre og sjove design af tøjet er

selvfølgelig et uundværligt aspekt i salgssituationen, men dette vises gen-

nem billedmaterialet, og vi vil ikke beskrive designet yderligere med ord.

Det er dog vigtigt, at sidens stil harmonerer med tøjets stil, hvilket også er

årsagen til retrolooket. Vi vil uddybe de visuelle valg yderligere følgende af-

snit.

PRODUKTUDVIKLING

Ved første møde bad vi Rasmussen om at medbringe farveprøver, tekstiler,

produkter, malerier, hvad som helst hun mente kunne inspirere det over-

ordnede design på websitet. Disse materialer brugte vi til at udforme et

roughboard, der ligger til grund for vores senere visuelle valg. (Se rough-

board s. 7) Vi bad ligeledes Rasmussen sætte ord på de æstetiske ønsker,

hun havde til websitet. Rasmussen ønskede et ”retro-udseende”, som helst

skulle differentiere sig fra salgswebsites fra konkurrenter. Hun ville gerne

have et ”tapet” med et mønster som baggrund og ikke bare en farve. Og så

kunne hun godt tænke sig nogle ”sjove” elementer som eksempelvis blom-

ster med ansigter, legetøj eller dyr, helst inspireret af det stof hun medbrag-

te. Rasmussen ville gerne formidle et ”eventyrligt, nostalgisk, og farverigt”

univers på websitet. (Se bilag 2)

Som tidligere gennemgået i opgaven har vi analyseret konkur-

rerendes sites og dermed skabt et overblik over, hvilke indholdsmæssige

aspekter vi skal differentiere os fra. Det er dog lige så essentielt at få en

forståelse for, hvilket visuelt udtryk der møder målgruppen på de konkur-

rerende sites. Med udgangspunkt i interviews med DD’s nuværende kunder

har vi derfor udvalgt tre børnetøjsmærker, som den eksisterende kunde-

gruppe køber til deres børn. (Se bilag 1) Dermed ønsker vi at få indblik i,

hvilke grafiske designs og sproglige tilgange samt overordnede stil-karak-

teristika målgruppen møder, når de besøger konkurrenternes websites, og

dermed hvordan DD’s website visuelt, grafisk og sprogligt stilistisk kan skille

sig ud.

Page 12: Webdesignopgave 2009

EKSEMPLIFICERET DIFFERENTIERING

“Keep your friends close, and your enemies closer “

(Sun-tzu, kinesisk militærstrateg 400 f. kr.)

www.okker-gokker.dk

Noget af det første, der møder én på Okker Gokker (herefter O.G.), er et

logo/navn på dansk og en tagline på engelsk. Vi har som bekendt den om-

vendte problematik med et engelsk navn og en dansk tagline, og man må

sige, at det ikke er optimalt, hverken i deres eller i vores tilfælde. De har de-

suden en forholdsvis massiv mængde tekst, hvis man scroller længere ned

ad indekssiden. Der skrives med seks forskellige farver brødtekst, noget der

instinktivt får det til at gibbe i en webdesigner in spe. Seks brødtekstfarver

fjerner øjeblikkeligt troværdighed og derved købelyst. Sproget fremstår i det

hele taget amatøragtigt og kluntet sat sammen. Bedste eksempel er vel jo-

bannoncen, der med sine fire farver tekst og klodsede sprog træder ud som

et rigtig dårligt element på deres site. Deres opstilling med ordene ”Du er

[…]” fungerer slet ikke med det nederste punkt, ”Kan arbejde i tidsrummet

kl. 14-18 på fredage”. Der er flere lignende eksempler på manglende spro-

glig logik.

Det bærer præg af, at det er ejerne selv, der komponerer tekst til sitet uden

tilsyneladende at være blevet enige om en sproglig stil; noget man kunne

stille spørgsmålstegn ved, når de samtidig stolt fortæller, at de har 25 men-

nesker i firmaet. Et 25-mennesker stort firma bør som noget naturligt have

en webmaster der kan holde styr på sprog, form og stil på sitet.

Den sproglige usikkerhed går igen når man bevæger sig ind på sitet:

”På Magretheskolen i 1980érne – er det her at designerne Dorthe

Nielsen og Merete Nash møder hinanden.”

Det er direkte sjusket og knudret sprog, der, selv hvis det var skrevet på pa-

pir, ville være noget vrøvl - og på en computerskærm bliver tålmodigheden

som bekendt forkortet yderligere. At tegnsætningen også er forkert hjælper

selvsagt ikke.

Logikken synes også helt tabt i kategoriseringen i menuen, der ellers ligger

pænt ude til venstre. Under ”Nye varer” finder man varegruppen ”Purple”

(Okker Gokker 2009), der rummer en masse varer, der ikke har farven lilla.

Flere af dem har da også navne som ”Black/cream flower”, ”Black denim

Knickers” og så videre.

Sidste eksempel, der er værd at belyse, er den råbende mangel på vanter

under både ”Drengetøj” og ”Pigetøj” (Okker Gokker 2009), til trods for at

varen figurerer under begge kategorier.

Vi har forsøgt at lægge en anden sproglig stil med øje for sproglig kohærens,

basale logiske følgeslutninger, ensrettet brug af font, såvel i størrelse som

i farve, og generelt søge mod en reflekteret sprogbrug med udgangspunkt

i gældende sprognormer. Desuden holder vi os til dansk, fordi Rasmussens

primære målgruppe er danske kvinder.

Grafik og design

Den kølige blå farve på O.G. er sammen med et forholdsvis overskueligt

trekolonnes design med til at skabe ro og overblik på sitet. Med andre ord

er det ikke i det grafiske udtryk, de brander sig mod børnetøj. Rammerne

kunne lige så godt rumme guitarkabler, søm og skruer eller andre varer. Det

4

Page 13: Webdesignopgave 2009

www.okker-gokker.dk

Page 14: Webdesignopgave 2009

www.wheat.dk www.hollys.dk

5

Page 15: Webdesignopgave 2009

er en meget anonym stil, og O.G. satser på, at tøjet alene er nok til at fast-

holde målgruppens interesse, og selv om man grafisk kan vælge at spille på

andre heste, må man sige, at de med en medarbejderstab på 25 gør noget

rigtigt. Altså er et firmas succes ikke altid uløseligt bundet sammen med de-

res website. Det samme kan vel siges om Jakob Nielsen, der i flere tilfælde

ikke praktiserer, hvad han selv prædiker, hvor for eksempel Steve Krug i

langt højere grad tager sin egen medicin. De kølige farver på sitet er med

til at fremhæve de farverige internationale betalingskort, man kan bruge

på sitet. De er placeret fornuftigt ved den imaginære F-forms nederste van-

drette streg og springer i øjnene, så man med det samme er klar over, om

man har mulighed for at handle her. (Krug 2006, s. 63)

Især i forhold til farverne har vi valgt at differentiere os fra O.G. Vi satser

på, at den øgede opmærksomhed på børnenes univers vil udgøre en tydelig

forskel fra O.G. og være grund til, at man kan huske DD, når man har besøgt

sitet.

www.wheat.dk

Igen må man konstatere at engelske navne er populære på dansk. Wheat

spilder ganske vist ingen plads på forsiden med at forklare, hvad det er, de

laver. Umiddelbart er forsiden holdt i en næsten pensionsselskabslignende

stil; et moderne glansbillede af glade, sorgfri børn. Også længere inde i sitet

sender billederne hilsner til Strandvejsvillaer og appellerer uden omsvøb til

en generelt velhavende målgruppe.

Wheat, der ligesom O.G. kan læses på både dansk og engelsk, fremstår

straks langt mere troværdig, rent sprogligt. Hvis man altså kan finde tek-

sterne. Den alternative menu giver plads til store og flotte billeder; billeder

i langt bedre kvalitet end DD’s website har, men det efterlader menuen i

bunden af skærmen. Farvevalget i menuen nærmer sig det usynlige, men

er efter alt at dømme sat i samme farve som baggrundsfarven uden for

menuen. Det har den uheldige effekt, at det er meget svært at se menu-

punkterne, ikke mindst hvis man ikke sidder og ser på sin skærm i en vinkel

præcis diagonalt på skærmen. Først når man holder cursoren hen over

menupunkterne, træder links frem med sort tekstfarve. Det er atypisk og i

dette tilfælde både i modstrid med god webskik (Nielsen 2004) og uheldigt,

idet man højner risikoen for at miste købelystne kunder, inden de har set så

meget som en enkelt vare. Menuerne på undersiderne er i det hele taget

anbragt alternativt og uden noget fast handlemønster. På kontaktsiden lig-

ger teksten i toppen, på forhandlersiden ligger den ude til højre, og under

”Presse” ligger en lille tekstboks i nederste venstre hjørne. Dette er med

til at forvirre. Vi skønner, at sitet ville være lettere at navigere rundt i, hvis

stilen fra forsiden var blevet holdt hele vejen igennem, altså med alle tekst-

bokse lagt i bunden af de gode billeder. Billeder ville da udgøre et naturligt

fikspunkt for forskellige mængder tekst på de forskellige undersider.

Billedmaterialet er som nævnt langt bedre end det, vi selv har at arbejde

med, og trækker i øvrigt på en række andre associationer. Her vægtes som-

merferiestemning og moderne livsstil, hvor vi arbejder med retrolook og

eventyrreferencer. Wheat undlader at liste priser, hvilket nok har noget med

det store forhandlernetværk at gøre. Her differentierer DD’s website sig

markant fra Wheat i kraft af sin lille størrelse og den personlige og retrospe-

ktive stil.

www.hollys.dk

Hollys er et af de mere gennemarbejdede blandt de 25 referencesites. Det

er tydeligt, at afsenderen af Hollys har forstået, at tekst er noget, man skal

passe på med ikke at overbruge på et website. Og de holder sig til et ab-

solut minimumsforbrug af tekst. I øvrigt er deres flashbaserede og simple

Page 16: Webdesignopgave 2009

site - her simple i ordets mest positive forstand - smukt adskilt ved at lade

indekssiden samt børnetøjsafdelingen være hvid og kvindetøjsafdelingen

være sort. Teksten på sitet er skåret ind til benet, uden tvivl redigeret af en

sprogkyndig. Der er ingen fejl, der springer i øjnene, og man har ladet hele

opbygningen af sitet logisk diktere navigationen på sitet. Spørgsmålet er,

om de sælger varer på grund af deres website, eller fordi de har varer ude

i en masse butikker verden om. Hollys er gode til at italesætte deres eget

værdisæt ved at beskrive firkløverlogoet, hvor det kommer fra, og at de har

redefineret det i en ny betydning.

Navnet Hollys er dejlig frit for uheldige konnotationer og klinger ikke en-

gelsk på en påtaget og forstyrrende måde.

Hollys er på den måde et simpelt og velfungerende eksempel på et site,

man kunne lægge sig op ad i udformning, hvis man på et senere tidspunkt

skal redesigne DD’s website. Vel at mærke hvis brandet i mellemtiden er ble-

vet så stærkt, at de lidt grundige introduktioner bliver overflødige.

VISUELLE VALG

Udover at undersøge konkurrenters websites, har vi også overvejet, hvordan

vi kan designe et æstetisk vellykket website ved at gennemtænke fire vigtige

roller i forhold til vores designvalg (Thorlacius 2007, s. 67);

• afsenderimage

• funktionalitet

• genre

• målgruppe

Afsenderimage

Æstetikken spiller en afgørende rolle for, hvordan vores website bliver op-

fattet af brugerne, hvor let anvendelig den er, og hvordan DD bliver opfattet

som brand. Rasmussen ønsker at websitet formidler et eventyrligt, nostal-

gisk, legende børneunivers. Websitet skal afspejle Rasmussens person og

den nærhed, som hendes kunder normalt føler i den personlige salgsoplev-

else.

Funktionalitet

På et site som DD, hvor det tekstuelle indhold er begrænset, har vi valgt at

vægte æstetik og funktionalitet på lige niveau, blandt andet ved at bruge

æstetikken til at skabe funktionalitet.

Genre

Det skal visuelt være tydeligt for brugeren, at dette site handler om et bør-

neunivers og børnetøj. Der eksisterer æstetiske konventioner for, hvordan

brugeren forventer et børnetøjswebsite ser ud, og hvis DD’s website ikke

lever op til dette eller tydeligt forklarer, hvorfor det ikke gør, så vil brugeren

få en utilfredsstillende oplevelse på sitet. Det samme gælder, hvis sitet føl-

ger en konvention, og produktet ikke lever op til dette. Det er altså vigtigt, at

der er en sammenhæng mellem det æstetiske udtryk på sitet og det æste-

tiske udtryk af produkterne. (Engholm 2008, s. 219)

Som beskrevet senere i rapporten udførte vi en tænke-højt test for at un-

dersøge, om vi kunne møde de uskrevne konventioner for børnetøjsgenren.

(Se afsnittet ”Afprøvning af site” s. 11)

6

Page 17: Webdesignopgave 2009

Målgruppe

Målgruppeanalysen har vi anvendt til at definere den ideelle målgruppe og

for bedst muligt at tilpasse sitet til den.

DD’s website skal gerne udtrykke nostalgi, både med henvisning til målgrup-

pens barndom og gennem et ”retroudtryk”.

Til trods for at vi er blevet gjort opmærksomme på, at man bør tage hensyn

til farveblinde brugere, og 8% af alle europæiske mænd er farveblinde, har

vi dog valgt ikke at bekymre os om dette i vores designvalg, da vores mål-

gruppe er kvinder, og kun 0,4 % af europæiske kvinder har problemer med

farveblindhed. Af samme årsag har vi ikke testet for dette. (Gabriel-Petit

2007)

Farver i grafikelementer og tekstfelter

Roughboard:StofprøveProduktCarl Larssons mælkebøtteFarveskala

Vi har forståelse for, at forskellige mennesker kan have forskellige opfattel-

ser af harmoniske farvesammensætninger. (Ittens 1977, s. 19)

Vores farvevalg har taget udgangspunkt i en ønsket subjektiv nostalgisk

stemning, og da DD’s produktudseende skal arbejde sammen med sitets ud-

seende, er vores farvevalg først og fremmest inspireret af retrostoffet, som

Rasmussen leverede til vores roughboard, og som er typisk stil for DD.

Primær farvepalette

Som primære farvepalette har vi valgt en monokromatisk farveskala i

grønne nuancer. Vi er startet med den mørkeste og meget mættede grønne

nuance, og har så fyldt mere og mere hvidt i for at skabe forskellige nuancer

af samme farve.

Da de grønne toner alle er udgaver af den samme farve, skaber det et roligt

og behageligt udtryk. (Bækgaard 2000)

Sekundær farvepalette

Som sekundære og accentfarver på sitet har vi designet nedenstående

farvegruppe, ligeså inspireret af stoffet og med størst fokus på den gule og

cremefarvede tone.

Page 18: Webdesignopgave 2009

Farvepaletten indeholder både primære, sekundære og tertiære farver, og

for at skabe et harmonisk udtryk, har vi valgt farver med lignende valør.

(Bækgaard 2000)

Alle tonerne er såkaldte støvede toner, det vil sige, at alle tonerne er

brækkede med grå, og at vi ikke har brugt nogle 100% rene kulørte farver.

De brækkede toner er med til at gøre det overordnede udtryk på sitet mere

nostalgisk. De reproducerede tekstiler fra 1920-1970, som Rasmussen

præsenterede os for, havde udelukkende brækkede toner i designet.

Tekstfarver

Teksten i indholdsfeltet er en mættet brun. Den brune tone på den lyse

grønne tonede baggrund skaber en høj kontrast, som medfører en bedre

læselighed. (Gabriel-Petit 2007) Den højeste kontrast sort/hvid, mener vi, er

for skarp og harmonerer ikke med vores samlede farvetema. Vi har ligeledes

valgt at anvende den lysegrønne baggrund (#dbf3e3) bag de brune bogstav-

er for at undgå, at computerens lysende kridhvide skærm generer øjet.

Denne måde, hvorpå vi anvender samme farvegruppe til al tekst og samme

farvegruppe til tekstfelter, skaber en tryg ramme for brugeren at navigere i.

(Gabriel-Petit 2007)

Vi har altså både anvendt de brune tekstfarver æstetisk til at bidrage til

vores nostalgiske stemningsunivers, samt til at støtte brugerens navigation

og læseligheden på skærmen.

Tekstfarven bliver ligeledes brugt til at angive hierarki i menuen. Eksempel-

vis under børnetøj, hvor ”Børnetøj” har en lysere brun farve og underkat-

egorierne, produkterne, en mørkere. På denne måde kan brugeren altid se,

hvilken kategori hun befinder sig i.

I indholdsfeltet har vi valgt at anvende en lysere grøn. Den lysere grønne får

feltet til at synes forrest i billedet, og derved vil brugeren forhåbentlig give

det felt opmærksomhed på lige fod med menuen. (Lynch og Horton s. 182)

Vi har valgt den gule og tonerne af grøn som primære farver på siden,

fordi disse ikke normalt associeres med køn som eksempelvis lyseblå eller

lyserød. Målgruppen er kvinder, men de køber både til piger og drenge, så

farverne skal være med til at understrege et unisex udtryk.

Valg af grafikelementer og design

Logo

Rasmussen leverede inspirationen til logoet, en tegning af Carl Larsson fra

ca. 1900 af en mælkebøtte.

7

Page 19: Webdesignopgave 2009

Vi har stiliseret udtrykket af Carl Larssons mælkebøtte, da vi mener, det vi-

suelt fungerer bedre på skærmen. Vi har prøvet at bevare retro-følelsen, og

selvom udtrykket er blevet mere grafisk, er formen er stadig genkendelig.

Redesignet logo

Baggrund

Da Rasmussen ønskede en ”tekstil” eller tapetlignende baggrund, designede

vi i første omgang denne baggrund, stærkt inspireret af mønsteret i retrost-

offet i roughboardet.

Rasmussen var meget begejstret for designet, som hun syntes var i stil med

DD’s produkter. Da vi afprøvede det på skærmen kombineret med header

og indholdsfelt, vurderede vi dog, at det var for dynamisk til være egnet til

skærmen. Som baggrund for tekstfelter var det simpelthen for uroligt for

øjet.Vi tog udgangspunkt i blomsterhovedet fra logoet og tegnede et nyt baggr-

undsmønster, som vi afprøvede i diverse størrelser.

Vi har valgt denne størrelse og farvekombination, som vi mener harmonerer

bedst med størrelsen af header, logo og menu.

Rasmussen var ligeledes tilfreds med dette mønster i denne størrelse.

Førstedesign

Indbliki proces

Page 20: Webdesignopgave 2009

Endeligtdesign

Header, indholdsfelt og menu

Da Rasmussen var glad for det første baggrundsdesign og gerne ville holde

fast i inspiration fra retrostoffet og figurerne, valgte vi at bruge nogle af fig-

urerne til at skabe liv i headeren.

Træet og blomsterne kombineret med dyrene skaber liv og en illusion om

eksempelvis en skov. Da figurerne ikke er autentiske i størrelse og udtryk,

spiller det på eventyr og fantasien fra børnenes univers.

Headerens hjørner er afrundet for at fortælle brugeren, at dette er en over-

skrift, som er anderledes fra menu og indholdsfelt, der indeholder tekst.

Vi har videreført det samme udtryk i indholdsfeltet, igen med blomster, som

kan findes i en skov.

Menuen er holdt i samme grønne tone som headeren og har ligeledes

skovelementer derfra.

Vi mener, der skabes en fin kontrast mellem det mere grafiske blomsterprint

og de naive figurer, hvilket gør sitet mere dynamisk.

Vi har søgt at skabe sammenhæng i websitets udtryk ved at anvende figur-

erne i både i header og menu og på samme måde blomsten i både baggr-

undsdesign, logo, header og favicon.

Da sitet er centreret over både indholdsfeltet og menu, har vi valgt at lave

menuen længere end indholdet kræver, så siden ikke tipper ned til venstre,

og der skabes bedre balance. Vægten ligger dog stadig tungere i venstre

side, da menuen er i mørkere tone end indholdsfeltet.

Fotos

Indeksfoto

Da vi gennemførte testen af websitet midtvejs, eftersøgte målgruppen et

foto på indekssiden, som kunne illustrere universet og websitets indhold.

(Se afsnittet ”Afprøvning af site” s. 11)

I det først gennemførte interview nævnte en af kunderne desuden, at hun

ønskede at se fotos af tøjet på børn og meget gerne i natur og fantasifulde

omgivelser. (Se bilag 1)

Gennem vores analyse af konkurrenternes sites har vi konkluderet, at

mange af disse bruger fotos af legende børn i naturen. Rasmussen ville

som skrevet gerne have eventyr ind på sitet, så af de fotos hun forsynede

os med, valgte vi dette foto af to kyssende børn i kostumer. Vi synes, det er

med til at understrege den legende eventyrlige stemning. Fotoet skal gerne

skille sig lidt ud fra konkurrenternes fotos og gøre kunderne i godt humør og

8

Page 21: Webdesignopgave 2009

minde dem om deres barndom.

Indeks-foto

Rasmus-sen

Foto af Rasmussen under menupunktet ”Om Jette”

Vi har skåret Rasmussen ud, da hun, og ikke baggrunden, skal være i fokus.

For igen at understrege det personlige på websitet har vi fundet et billede,

hvor vi mener Rasmussen ser venlig og imødekommende ud. Hun er ikke

overstylet med tøj, makeup og hår, hun ligner enhver anden mor, som ikke

hele tiden har tid til at se sig i spejlet. Dette udtryk skulle gerne skabe en

følelse af åbenhed og tilnærmelighed overfor kunden.

Fotos af produkter

De fotos Rasmussen leverede af hendes produkter, mente vi ikke var anven-

delig på websitet. Kontrasten mellem produkt og baggrund var ikke udtalt

nok, og vi mente heller ikke, det var professionelt at vise et produkt liggen-

de på gulvet.

Derfor har vi valgt at skære fotoet ud og sætte det på en lys baggrund.

Page 22: Webdesignopgave 2009

Den lyse baggrund får fotoet af produktet til at træde frem, og farven har-

monerer godt med det overordnede udtryk på sitet, da det er samme tone

som baggrundsfarven.

Typografi

Når man vælger en font til et website, skal man være bevidst om, at det har

stor betydning for, hvilket udtryk websitet får. (Englund og Guldbrand 2001,

s. 115) En font er forbundet med en masse konnotationer, og man skal der-

for vælge en font med en stil, der harmonerer med websitets indhold og

budskab.

Baskerville

Vi valgte som udgangspunkt at anvende fonten Baskerville på DD’s website.

Baskerville er en gammel typografi fra 1757, og valget faldt på denne font af

flere årsager; Baskerville er en serif font, hvilket giver et mere gammeldags

udtryk end sans serif fonte. Dette harmonerede med det nostalgiske præg,

vi gerne ville tilføre sitet. Vi vidste, at det kunne være problematisk at anv-

ende en serif font på skærmen, hvilket vi dog mente, kunne afhjælpes ved

en tilstrækkelig stor skriftstørrelse. Selvom Baskerville er en font med et lev-

ende og harmonisk formsprog, blandt andet fordi den er proportional, blev

den alligevel meget stiv i forhold til resten af websitets bløde og barnlige

omgivelser. Ligeledes harmonerede den ikke med headeren, der er uden

seriffer.

Basker-ville

Calibri

På baggrund af denne overvejelse, valgte vi i stedet at anvende Calibri på

websitet. Denne font er i modsætning til Baskerville uden seriffer, og den

harmonerer dermed langt bedre med websitets header. Calibri er ligeledes

9

Page 23: Webdesignopgave 2009

en proportionalskrift, hvilket giver et mere interessant udtryk, end hvis vi

havde anvendt en monospatieret skrift, hvor alle bogstaverne har stan-

dardiserede breddefelter. (Pedersen & Hansen 1997, s. 6) Vi skriver al tekst

i regular format, uden brug af styles eller store bogstaver. Dette er igen for

at øge læseligheden og for at gøre det lettere for øjet at skelne ordene fra

hinanden. (Englund & Guldbrand 2001, s.132) Vi har dog anvendt bold-

format i overskrifterne, da dette format er det tydeligste, når et tekststykke

skal fremhæves. (Englund & Guldbrand 2001, s.132) I disse tilfælde har vi

anvendt Calibri Bold, i stedet for at lade browseren gøre fonten fed. Derved

undgår vi, at skriften bliver mudret og uskarp, men beholder en skarp font

med høj læselighed.

En anden beslutning vi har truffet med henblik på læselighed, er størrelsen

på teksten. Vi har anvendt følgende størrelser:

• Brødtekst 1em

• Store overskrifter 1,5 em

• Underoverskrifter 1,2 em

Vi har valgt at definere skriftstørrelserne ud fra em units, der er en rela-

tiv størrelse, i modsætning til pixelstørrelser, der er baseret på skærmens

opløsning. Vi har ikke låst em-størrelsen fast til en punktstørrelse, da vi

derved ville forpasse muligheden for at give brugeren kontrol over skrift-

størrelsen. Med em-format kan brugeren vælge at forstørre teksten efter

ønske, hvilket giver gode muligheder for svagtseende. (Rutter 2004)

I tilfælde af, at nogle brugere ikke har fonten Calibri installeret, indsætter

vi en font-family med følgende skrifttyper: Calibri, Trebuchet MS, Candara,

Sans Serif. Ligeledes er overskrifterne Calibri Bold, Trebuchet MS Bold og

Candara Bold.

Derved sikres det, at websitet fremstår med et ensartet udtryk, uanset om

brugeren har installeret Calibri eller ej. (Robbins 2007, s.206)

OPBYGNING

For at bevare overblikket over vores websites struktur og indhold har vi

udformet et sitemap over dandeliondesign.dk (Se figuren). Et sitemaps

primære funktion er først og fremmest at skabe overblik over de forskellige

siders relationer, og hvordan undersiderne passer sammen. I forbindelse

med store websites og mange undersider er dette specielt vigtigt.

Øverst i figuren ligger sektionen index placeret. Index er websitets hoved-

menu og den væsenligste sektion. De underliggende sektioner børnetøj,

om Jette, bestillinger og kontakt er websitets fire primære informations-

sektioner. Disse fire sektioner viser, hvilke muligheder for information, man

kan få på dette website. Kun sektionen børnetøj har en ny forgrening, som

udmunder i seks underliggende sektioner (undersider). De seks sektioner er

bukser, buksedragter, kjoler, skjorter, jakker og hatte/kyser og kan benævnes

som websitets produktsektion. Efterfølgende har fem af de seks produktsek-

tioner en ny gren, som fører videre til ti mere detaljerede og beskrivende

produktsektioner, som på sitemappet er kaldt billeder.

Page 24: Webdesignopgave 2009

Sitemap

10

Page 25: Webdesignopgave 2009

AFPRØVNING AF SITE

Den første form for test, vi anvendte på sitet, foregik med Rasmussen. Hun

fik muligheden for at se det første udkast og give sine umiddelbare kom-

mentarer omkring sitet. Dermed vidste vi fra start, om sitet mødte hendes

forventninger, hvilket var vigtigt i forhold til, at det skal afspejle hendes

person i både layout og tekst. Rasmussen havde kun en enkelt rettelse til

teksten, men syntes at stilen matchede hendes design og hendes person.

Da dette var et vigtigt aspekt i forhold til at skabe en fuldendt og harmonisk

kommunikation, fortsatte vi designet af siden som planlagt.

For at opnå at DD’s website er så brugervenlig som muligt, har vi desuden

afprøvet sitet på en række testpersoner. (Wodtke 2002, s.84) Vi har selv

arbejdet med websitet over en lang periode, og vi kender de valg, der er

truffet i forhold til brugervenlighed, hvorfor de er valgt, og hvad hensigten

er med disse valg. Derfor fremstår disse valg indlysende for os selv, men der

findes en risiko for at andre ikke finder navigationsmønstre med mere lige

så selvfølgelige. (Krug 2000, s.141)

Vi har valgt at anvende en tænke-højt test, (Munk og Mørk, 2002) der er en

kvalitativ metode til at vurdere, hvordan testpersoner opfatter vores site. Vi

har derigennem ønsket at opfange eventuelle problemer med både naviga-

tionsværktøjer og indhold. Vi udførte testen over to omgange. Første gang

lod vi to testpersoner enkeltvist udtale sig om deres tanker, mens de bev-

ægede sig rundt på hjemmesiden.

På baggrund af vores afsnit omkring websitets målgruppe udvalgte vi to

veluddannede mødre. Vi finder det mest sandsynligt, at vores målgruppe er

vant til at begå sig på nettet, og derfor er alle respondenter vant til at surfe

på nettet og besøge sites, de ikke kender i forvejen. (Wharton et al. 1994, s.

114)

Vi bad respondenterne finde en ”solhat i det stof, de helst ville have”.

(Wharton et al. 1994, s. 110) Mens de søgte efter dette og overvejede

bestillingsmuligheder osv., observerede vi dem. Vi valgte, at vores respon-

denter skulle sidde hver for sig, når de gennemførte testen. Dette gjorde vi,

for at de ikke påvirkede hinanden under testen og dermed gav et urealistisk

billede af, hvorledes sitet fungerede. Som vist noterede vi løbende respon-

denternes kommentarer.

1. Testperson. 1. afprøvning

Mia, HR-chef, mor til to børn.

Mia bliver bedt om at finde en solhat og vælge det tekstil, hun ønsker at få

hatten i.

Det ser fint ud - det ligner noget til børn. Det appellerer til en Østerbro-mor

som mig. Det er irriterende, at der mangler billede på forsiden, så jeg ikke

kan se stilen. Det er heldigvis en overskuelig menu. Hov, der kommer mere

frem når man klikker på børnetøj. Jeg bemærker ikke rigtigt teksten midt på

siden, men ser kun oversigten over tøjtyper i venstre side. Jeg finder nemt

hattene. En bestemt hat fanger min opmærksomhed, men også andre varer

fanger min opmærksomhed. Jeg ser lidt på dem og vender senere tilbage til

solhatten. Det er nemt at navigere rundt. Jeg klikker på et billede af en hat,

og en masse farver kommer frem. Fed effekt. I stedet for at skifte til billeder

af stof, ville jeg hellere se produktet i stoffet. Ligesom på Victorias Secret.

Det undrer mig, at man ikke kan få billedet af stoftypen til at blive, når jeg

har klikket på det. Jeg prøver et par gange. Det irriterer mig ikke meget, men

er årsag til, at jeg undrer mig. Der er ikke så meget plads til at pege forkert

med musen, så det skal være rimeligt nøjagtigt.

Page 26: Webdesignopgave 2009

De ensfarvede stoffer virker meget massive på de store billeder i forhold til

de mønstrede stoffer. Jeg skifter mellem mønster og hat, mønster og hat,

indtil jeg har et billede af hvilket mønster, der passer til hatten. Jeg mangler

muligheden for at klikke på farven og dermed bestille den. Jeg savner en

forklaring på, hvordan bestillingssystemet virker.

Forklaringen blev hun præsenteret for tidligere i processen, men ignorerede

den. Hun havde ikke lyst til at bruge opmærksomhed på andet end at finde

hatten på det givne tidspunkt. Når hun så finder info om bestilling, opdager

hun, at hun skulle have haft et stofnummer, og skal dermed tilbage og finde

det igen.

Det er dobbelt arbejde! Irriterende.

Vi spørger, hvordan hun vil komme tilbage til forsiden.

For at finde tilbage til forsiden, finder jeg det logisk at klikke på headeren for

oven.

(Ikke logoet, som på nuværende tidspunkt er linket, hvilket hun siger, at hun

slet ikke havde overvejet.)

Jeg savner et link i menuen, der henviser til ”sådan bestiller du”. Jeg ville

ikke gætte, at den lå under ”Børnetøj”. Jeg ville nok ikke klikke ind på bag-

grunden for designet, men bare købe produktet. Men hvis det stod på for-

siden, ville jeg eventuelt skimme det. Tekst vækker ikke min store interesse

i forhold til billeder, der med det samme viser, om der er noget interessant

for mig. Ved køb ville det være lettest, hvis jeg bare kunne udfylde et skema

og ikke skulle tage personlig kontakt til hende, der laver det.

Modellen er anderledes end andre sider og ikke som andre webshops. Der-

for er en god forklaring essentiel. Jeg gider ikke spilde en masse tid på sitet,

for derfor at finde ud af, at jeg ikke bare kan bestille som i en webshop. Jeg

giver ikke et nyt site mange sekunder, før jeg klikker videre. Men hvis det fra

start blev gjort klart og fremhævet som noget positivt at tøjet er specialla-

vet, ville det være ok.

2. testperson. 1. afprøvning

Pernille, 37 år, eget PR-firma. Mor til et barn.

Pernille bliver bedt om at finde en solhat og vælge det tekstil, hun ønsker at

få hatten i.

Jeg synes forsiden ser sjov ud. Lidt 50’eragtigt og natur tænker jeg også. I

virkeligheden ville jeg nok ikke gå så målrettet efter en solhat, men kigge lidt

mere på siden. Men jeg kan jo med det samme se, at der er tøj ude i menu-

en i siden. Der står noget om bestilling – det er fint. Så klikker jeg på hatte.

Det er nemt. Jeg vil jo gerne have den her.. (solhatten) Nå, så kan man se

stoffer – ja.... jeg vælger dette her. Hvad så.. Hmm jeg klikker tilbage for at

se, hvordan man bestiller. Hvor er det? Det er lidt forvirrende opsat, at der

ikke er et link omkring det. Det er nemmest bare at klikke tilbage... Linket i

bunden, der viser tilbage til hatten og kyser, ville jeg ikke bruge, for menuen

i siden er så enkel, at den er overflødig. For at finde tilbage til forsiden ville

jeg normalt klikke på headeren for oven.

(Ikke logoet, som på nuværende tidspunkt er linket. Hun finder bestillings-

guiden under børnetøj)

Den ligger lidt ulogisk her. Jeg glemte at læse det, da jeg var ved den side

11

Page 27: Webdesignopgave 2009

før. Ok – jeg får så at vide, at jeg skal bruge stofnummeret. Jeg klikker til-

bage igen. Det er lidt bøvlet. Kunne man ikke bestille direkte fra siden med

stoftyper. Måske bare når man klikker på den vare, man ønsker. Jeg ville ikke

gide at bøvle for meget. Hvis jeg bliver forvirret, er det bare videre til et an-

det site. Det er ellers fine ting. Det er vildt fedt med det skræddersyede tøj.

Det bliver syet specielt til mig, og det er fedt. Det skal bare gøres helt vildt

tydeligt!

Test 2 færdig

Resultatet af testen tydeliggjorde, hvor mange konventioner der findes, når

købere færdes på nettet, og hvor mange krav de stiller til usability. Respon-

denterne ønskede websites, der fungerede som de forventede, og selv små

forhindringer på sitet kunne få dem til at droppe hele websitet og aldrig

vende tilbage til det. Dette er på grund af sitets genre, der ligger tæt op ad

de gængse webshops, der indbefatter en række konventioner. (Engholm

2008 s. 218) Derfor fandt respondenterne genremixet forvirrende.

Der viste sig altså efter første test to åbenlyse problemer; der var forvirring

omkring bestillingsprocedurer, og indekssiden præsenterede ikke hjemmes-

idens formål tydeligt nok.

Før vi testede sitet, var der en forklaring på, hvordan man kunne bestille,

når man kom ind på undersiden ”Børnetøj”. Der var dog irritation over, at

respondenterne manglede denne information, som de ikke gad gennem-

læse, før det var aktuelt, når de havde fundet det produkt, de ønskede. Efter

denne test valgte vi derfor at rette på bestillingshenvisningerne. Den største

ændring af sitet efter testen er derfor, at man kan se forklaringen på, hvor-

dan en bestilling kan gennemføres, mens man er inde på det produkt, man

ønsker at købe. Vi har ligeledes indsat et link i menuen, der hedder ”Bestil-

lingsguide”. Dette var ligeledes for at lette forståelsen af, hvordan bestilling

foregår, efter respondenternes ønske.

Ligeledes var der et ønske om, at indekssiden på websitet med det samme

skulle afspejle, hvilket design den byder på. Første respondent bad om at

få præsenteret et billede på indekssiden, der afspejlede stilen på siden. Det

fandt hun mest fangende. Vi flyttede derfor et billede af to børn i Rasmus-

sens produkter, samt tekststykket om Rasmussens tanker omkring hendes

design frem til indekssiden, da respondenterne ikke ville opsøge informa-

tionen af dem selv, men ville bemærke teksten, hvis den stod på første side.

Som nævnt i kommunikationsplanen, er Rasmussen tilstedeværelse på sitet

essentiel for at forstå tøjets kvaliteter, og information om hende er derfor

rykket frem i fokusfeltet.

Derudover ændrede vi linket til indekssiden, så det ikke udelukkende lå i

logoet i øverste venstre hjørne, men nu også indbefattede headeren på

sitet, da testpersonerne fandt det naturligt at klikke på det for at komme til

indekssiden.

Vi valgte at teste siden på en ny bruger efter disse rettelser var gennemført:

3. Testperson. 2. Afprøvning

Lotte, 29 år, projektchef. Mor til tvillinger.

Lotte bliver bedt om at finde en solhat og vælge det tekstil, hun ønsker at få

hatten i.

Okay.. så jeg skal finde en hat. Så kigger jeg jo menuen igennem. Ja, det er

da nemt at se, det er for børn. Jeg ville jo tænke, at det ligger under bør-

Page 28: Webdesignopgave 2009

netøj. Yes… og så kan jeg se, at den ligger her – hatte og kyser. Og her er en

hat øverst. Så kan jeg vælge en farve. Det kunne være sjovt at se stoffet på

hatten. Men det er da smart med målebåndet i siden. Det er lidt svært at

tænke sig til men ok.

(Hun bliver gjort opmærksom på, at hun har fundet en kyse og ikke en sol-

hat)

Nåeh ja – jeg ville jo også surfe mere omkring herinde, hvis jeg ikke var sat

på sådan en opgave her. Jamen så tænker jeg, at jeg skal klikke her...

(hatte og kyser i menu)

Hun finder nemt hatten. Det er så det samme. Ok. Og så vil jeg bestille.

Bum bum bum…. Ja… Det står jo herunder, hvordan jeg gør. Det er nemt

nok at forstå. Dér ville jeg nok vælge at sende en mail. Jeg synes, det er lidt

grænseoverskridende at ringe til én, jeg ikke kender.

(Hun klikker på mail)

Åh outlook kommer jeg ind på... det virker aldrig. Det gider jeg ikke. Ud

igen! Ok, hendes mail står under kontakt… Det er ok. Det ville jeg hellere

bruge. Det andet fungerer aldrig for mig.

Så tjekker jeg lige bestillingsguiden og ser, om der står noget mere, jeg kan

bruge... Der er lidt om, at man også kan få det sendt. Det synes jeg er rart.

Det er meget sjovt, at hun underskriver med sit navn... Det er meget hyg-

geligt.

Jeg ville nok gå ind igen og hente hendes e-mail under kontakt og copy

paste den i mit eget mailsystem. Så kunne jeg også have en fane åben med

hendes side og oplysningerne på hatten samtidig med at jeg har min mail

åben. Det er ok. Lidt bøvlet, men det er jo heller ikke en normal webshop.

Test slut

I denne test viste det sig, at websitet fungerede langt bedre, og forvirringen

omkring navigationen var mindre. Hun bevægede sig uden problemer mel-

lem de forskellige sider og forstod umiddelbart nemt, hvordan bestilling-

sproceduren foregik. Det var ligeledes mere tydeligt for denne testperson,

at tøjet på siden var skræddersyet, og hun accepterede derfor i højere grad,

at det ikke var en konventionel webshop med den sædvanlige bestillingspro-

cedure.

NAVIGATION

En fundamental og betydningsfuld funktion på ethvert website er naviga-

tionen. Hvis kunden ikke kan navigere rundt på websitet og ikke finde den

information, som søges, er websitet ikke brugbart. En bruger åbner en ny

side ad gangen ved hvert klik med musen, så sandsynligheden for at miste

overblikket i sin søgen efter information er forholdsvis stor.

10 principper for navigation

Vi har valgt at inddrage teksten Professional Webcommunication (Mcgovern

m.m. 2003, s. 163-192). I teksten gives der ti principper for et godt og vel-

fungerende navigationsdesign. Vi vil anvende disse ti principper på de re-

fleksioner, som vi har været omkring i udarbejdelsen af vores navigationsde-

sign. I udformningsfasen og processen har det været meget brugbart for os

at benytte denne principmodel som grundlæggende guideline til at opbygge

vores navigationsfunktion ud fra. Vi har arbejdet målrettet hen imod, at det

ikke kun var os og Rasmussen, som ubesværet skulle kunne bruge websitets

navigationsfunktioner. Allerede i den tidlige fase foretog vi tests for at få

brugernes kommentarer om navigationsfunktionen. (Se side XX) Disse erfar-

12

Page 29: Webdesignopgave 2009

inger har vi medtaget i bestræbelserne på at gøre websitet så overskueligt

og brugervenligt som overhovedet muligt. Målet er at brugeren slet ikke

bemærker navigationen.

”Navigationen giver på den anden side læserne en kontekst. De

får herved vist dokumenter, der indbyrdes er forbundne. Navi-

gationsfunktionen styrer dem og oplyser dem om indhold, som

organisationen har, men som læserne måske ikke er klar over

eksisterer”. (McGovern m.m. 2003, s. 173)

1. Design for læseren. Et godt website bør designes direkte til brugerne

og ikke til designeren. Allerede tidligt i forløbet foretog vi ”tænke

højt tests” og afprøvede vores navigationsdesign på brugeren. For

selv at have et udgangspunkt konstruerede vi tidligt i vores egen pro-

ces en mock-up af den ønskede navigation. Det var medvirkende til

internt at give en fælles forståelse for, hvilken retning vi skulle bev-

æge os imod.

Mock-up

2. Tilbyd et udvalg af navigationsmuligheder. Det er en kendsgern-

ing, at brugere har forskellige behov, og derfor må vi som webde-

signere tilbyde en række forskellige navigationsmuligheder. Vi har

på websitet følgende tre eksempler på, at brugeren kan vælge den

navigation, der føles mest naturlig. 1 – Når man klikker sig ind på

”Børnetøj”, kan man både vælge at bevæge sig længere ind i en kat-

egori via tekstlinks i menuen og billedlinks i indholdsfeltet. 2 – Når

man er inde på et specifikt produkt, kan man både komme tilbage

til produktkategorier via et link i menuen og via et link bunden af

indholdsfeltet, hvis man befinder sig dér. 3 – Når en bruger vil til-

bage til indekssiden, kan man både klikke på logo (se blå markering

på figur) og header (se grøn markering på figur), så brugeren ikke

klikker forgæves på nogle af disse. Denne dobbeltsikring har vi

foretaget, for at der ikke skal opstå nogen forvirring. Dette virkede

godt ved vores brugertest. Vores testpersoner fandt ikke et hyperlink

til indekssiden i menuen nødvendigt, fordi mange nyere websites har

inkorporeret, at man vender tilbage til ”hjem” ved at trykke på web-

sitets logo.

Page 30: Webdesignopgave 2009

Header,Logo,Menu &Indholds-felt

3. Lad læserne vide, hvor de er. Det anbefales at webdesigneren ind-

koder navigationen, så den vises som hypertekst. Vi har derfor valgt

at undgå at bruge grafik, til at navigere rundt med, med undtagelse

af Header og logo. Hele menuen er bygget op med hypertekst, som

på en enkel og indbydende måde giver læseren ro til at undersøge

de forskellige produkter nærmere. Menupunkterne skifter samtidig

farve, når cursoren holdes hen over. Som beskrevet i visuelle valg,

er et aktiveret menupunkt lysere end de resterende punkter, så bru-

gerne kan se under hvilket menupunkt, de befinder sig.

4. Lad læseren vide, hvor de har været. McGovern et al foreslår, at

man markerer de steder, læseren har været på websitet i form af

et farveskift, så folk ved, hvor de har været. Da DD’s website ikke er

større end en indeksside og 20 undersider (Se sitemap s. 10), har vi

ikke fundet det nødvendigt at indkode denne funktion. På lang sigt

kan man med fordel inkorporere denne funktion, hvis websitet skal

udvides markant.

5. Lad læseren vide, hvor de er på vej hen. For at skabe klarhed har vi

forsøgt at oplyse om det på forhånd. Vi har forsøgt at være fortæl-

lende ved fx at vise ALT-tekst (IE) med et navn, der beskriver bill-

edets relation, når cursoren holdes hen over. Vi har samtidig afholdt

os fra brugen af nye pop-up vinduer, der åbnes, når brugeren trykker

på et link. I stedet bibeholdes den samme navigationsbaggrund kon-

tinuerligt for at skabe tryghed for læseren.

6. Giv kontekstoplysninger. Hvis sitet vokser betydeligt, kan det være

hensigtsmæssigt at præsentere korte resuméer på hver side for at

give en forsmag på websitets indhold til kunder, som ikke er sikre i

deres søgen efter et produkt. Man kunne udarbejde en funktion, så

der, når man står på et givent produkt, vises en oversigt over relat-

erede produkter. Vi har dog ikke udarbejdet en sådan funktion, da

websitet er overskueligt i dets nuværende størrelse.

7. Vær konsistent. Vi har bevidst bevaret det samme sprog, farver og

skrift i navigationsmenuen på alle sider. Menuen er fx placeret til

venstre og lidt oppe, fordi vi antager at brugeren læser i et F-møn-

ster. Jakob Nielsen har sammen med et hold forskere i 2006 gennem

eyetracking-studier analyseret og observeret en lang række men-

neskers læsevaner på websites og fundet det, for en webdesigner,

alarmerende resultat, at læsere af websites ikke så meget læser, som

de skimmer. (Nielsen 2006) Og dette hovedsagligt i den efterhånden

velkendte F-form. Altså i den forstand at vi læser al tekst der figurer-

er øverst og til venstre på sitet grundigst, og jo længere til højre og

nedad vi kommer, jo mindre læser vi reelt. Vi skimmer. Studierne er

veldokumenterede, og derfor har vi også været opmærksomme på

ikke at placere teksttunge elementer nederst til højre på nogen side.

DD’s website er langtfra et teksttungt site og vil derfor ikke være lige

13

Page 31: Webdesignopgave 2009

så udsat for skimning som teksttunge sites som nyhedssites, sites

med vejledninger og så videre.

”(…) pages dominated by text information are scanned in an ”F”

pattern of intense eye fixations across the top header area, and

down the left edge of the text”. (Lynch og Horton 2008, s. 91).

Menuen er placeret samme sted på alle sider, og den viser de vigtig-

ste navigationslinks, ligegyldigt hvor kunden bevæger eller klikker

sig hen på websitet. Det som McGovern m.m. benævner som global

navigation. Det eneste sted hvor menuen rykker sig er, når brugeren

klikker på ”Børnetøj”, og en ekspanderende menu kommer frem.

Dette har været nødvendigt i forsøget på at bevare en simpel og ved-

varende navigationsmenu. (Se figur på foregående side).

8. Følg Webkonventionerne. For at gøre vores websitet ekstra brug-

bart og bevare en form for nemhed i navigationen har vi fokuseret

på genkendelighed og en central placering af indholdsfeltet på alle

undersider (gul markering, se figur), så øjet på en behagelig måde

kan fange websitets naturlige linjer. (Lynch og Horton 2008, s. 91)

Desuden har vi givet menuen en mørkere farve end resten af skærm-

felterne, som bevirker at opmærksomheden naturligt ledes derhen

(rød markering, se figur).

9. Undlad at overraske eller vildlede læserne. Ud fra denne guideline

har vi bevidst arbejdet hen imod, at alle de anviste stier skulle være

brugbare. Vi har derfor ikke ville medtage stier eller genveje, som

ikke var færdige eller kunne lede hen til blindgyder, da det fx kunne

udtrykke, at websitet forekom ufærdigt eller ubrugbart.

10. Giv læserne support og tilbagemeldinger. McGovern m.m. mener, at

læseren kun bør være et enkelt klik fra kontakten til den pågældende

organisation. Det bedste er selvfølgelig, når websitets struktur er

ordnet på en sådan måde, at læseren ikke behøver assistance for at

orientere sig på websitet. Vi har ikke fundet det relevant at medtage

en hjælpefunktion udover bestillingsguiden, da websitets antal af

undersider er begrænset. Rasmussens kontaktoplysninger står der i

øvrigt, så man kan altid kontakte Jette personligt. Ud fra den betragt-

ning at websitet ikke er specielt kompleks, har vi i stedet fokuseret

på, at websitet ikke skulle kunne misforstås. Udarbejdelsen at et

enkelt og genkendeligt design har været omdrejningspunktet i vores

refleksioner over hele navigationsfunktionen.

Vi har haft frie hænder til udformning og planlægning af navigation, fordi

vi fx ikke har skullet bygge videre på et eksisterende websites navigations-

funktioner. Der ville være mange flere hensyn at tage, hvis vi skulle udvikle

et langt større website. (McGovern m.m. 2002, s. 183) Den primære be-

grænsning, vi har haft, har været vores deadline for aflevering af opgaven

og dette har fx medført, at vi har måttet sætte en nødvendig begrænsning

på antallet af websitets undersider. Ved hjælp af de ti principper som guide-

line og vores testpersoners udsagn er vi i denne beslutningsfase kommet

omkring navigationsfunktionens primære områder. Fremgangsmåden har

bevirket, at vi løbende har været meget opmærksomme på elementer, der

har kunnet tilføre websitet et præg af usikkerhed omkring navigationen.

Page 32: Webdesignopgave 2009

SKRIFTLIG FORMIDLING

Fra ”My by Dandelion” til ”Dandelion Design”

Med hensyn til sitets navn havde vi som udgangspunkt ikke meget at

komme efter. Kundens produkter hedder jo, hvad de hedder, og vi havde

ingen forhåbninger om at kunne ændre dette. Dog argumenterede vi for,

at brugen af ’MY by Dandelion’ let kunne forveksles med det engelske ord

for ’min’, my, og at det, til trods for at sitet udelukkende er på dansk, ville

kunne skabe en vis forvirring. Ikke mindst i lyset af målgruppens sandsynlig-

vis gode engelskkundskaber. Det endte til stor overraskelse og en vis generel

begejstring med, at vi fik lov at påvirke navnet, der nu er dandeliondesign.

dk. Vi synes stadig ikke det er optimalt med et engelsk navn til et dansk site,

men det nye navn er trods alt langt bedre end ’My by Dandelion’.

Her gives her et eksempel på den proces, der er foregået mellem Rasmus-

sens skriftlige oplæg til os, og de valg vi har foretaget imod en overskuelig-

gørelse af de informationer, der skal afgives skriftsprogligt.

Rasmussens oplæg:

Beskrivelse – mig, mit firma og produkterne

Jeg hedder Jette og jeg er færdiguddannet tekstilformidler.

Jeg har egen lille systue på Frederiksberg. Her designer og syr jeg unikt bør-

netøj. Jeg arbejder med lækre metervarer med herlige børnevenlige møn-

stre, samt i økologiske tekstiler. Jeg mikser det hele til min egen stil, som

vel bedst kan beskrives som ”Madicken på en forunderlig tidsrejse sammen

med Emil”.

Tøjet er som et hemmeligt indblik i barnets verden. En verden fyldt med leg,

glæde og livskraft. Her er en overflod af farver og unikke varer.

Vores omskrivning:

Om mig, Jette Rasmussen

• Jeg er uddannet tekstildesigner.

• Jeg har systue på Frederiksberg, hvor jeg designer og syr unikt bør-

netøj.

• Jeg arbejder med de bedste metervarer med herlige mønstre og

naturligvis helst i økologiske tekstiler.

• Jeg mikser min egen stil, der bedst kan beskrives som mit eget lille

svenske eventyr.

• Jeg har to dejlige børn – Vilhelm på fire år og Ludvig på et år.

• Tøjet afspejler børnenes verden fyldt med leg, glæde og livskraft.

• I min verden er der en overflod af farver og unikke varer.

Jakob Nielsen og Steve Krug citeres begge flittigt af alle, der har en holdning

til sprog og skrift på websites. Også selv om nogle af Jakob Nielsens ker-

netekster i visse tilfælde er så meget som 10-12 år gamle i skrivende stund,

hvilket normalt ville gøre dem forældede i forhold til nettets udvikling i

øvrigt. Ikke desto mindre holder flere af hans pointer stadig, og hans resul-

tater bliver jævnligt bakket op af nye tests om folks læsevaner på nettet. Det

ville med andre ord være uklogt ikke at bruge hans relative regelsæt som

en slags rettesnor for, hvordan man sætter tekster sammen på et website.

Når det er sagt, er der omvendt også yderst få regler, der skal følges blindt.

Der vil altid være skønsspørgsmål, der skal afgøres af sitets genre eller stil

14

Page 33: Webdesignopgave 2009

og i det hele taget er det fornuftigt løbende at stille spørgsmål ved, om et

givent stykke tekst opfylder den funktion, der er hensigten. Det kan (og

skal) betyde omskrivninger undervejs, da designprocessen af et site typisk

gennemgår en række transformationer og ændrer sig i forhold til udgangs-

punktet. (Englund og Guldbrand 2005, s. 79)

Som det første ville vi, i samarbejde med Rasmussen, definere

• hvem der skal læse teksterne

• hvem der er afsenderen af sitet

• hvad der er absolut uundværlig tekst

• om sitet skal skrives på flere sprog

DD’s website skal læses af den primære målgruppe, og derfor skal den

skrives i et sprog de forstår. Og den primære målgruppe er i vores tilfælde

veluddannede kvinder, så der er ingen grund til at tvinge et lavt lixtal ned

på alle undersider af sitet. Det nytter omvendt ikke noget, at vi skriver

akademisk, selv om målgruppen her faktisk nok kunne læse et relativt

højttravende sprog. Det ville nemlig gøre sitet utroværdig i forhold til den

personlighed, vi ønsker at tilføre. Troværdighed på nettet er en delikat stør-

relse, som let korrumperes af for eksempel sproglig inkohærens eller på

andre måder ukontekstuel sprogbrug. Det kunne være en unødvendig de-

taljebeskrivelse af irrelevante aspekter, hvor en afsender griber videndeling

helt forkert an. Det giver ikke nogen relevante oplysninger om designet eller

designeren, og derfor skal den slags for det meste undgås. Således også

informationer der trækker brugeren væk fra det billede, vi og Rasmussen

forsøger at male af hende og hendes virksomhed. Vi har holdt en jeg-form

på sitet, for at italesætte at det er hendes virksomhed og ingen andres. Hun

laver på nuværende tidspunkt selv alle designs og syr alt det tøj, der sælges

i dette navn, og det kan have stor betydning, at kunderne føler sig betjent

af den rigtige designer og ikke en assistent eller en webmaster, der ikke

forstår sig på tøjdesign. Det er i øvrigt hyppigt brugt i designverdenen at ital-

esætte designerens navn i forbindelse med produkterne. Nogle af de bedste

og decideret prototypiske eksempler er berømte makkerpar som Dolce &

Gabbana, Munthe + Simonsen, Birger et Mikkelsen, Bang & Olufsen og så

videre, der i alle tilfælde sætter lighedstegn mellem deres navne (og deres

personer) og deres design. Da Rasmussen ikke ønsker at kalde sit design for

Jette Rasmussen, er det altså vigtigt, tekstligt at få kædet Jettes navn sam-

men med de unikke designs hun laver, for at prente sammenhængen i folks

bevidsthed. Det har vi blandt andet gjort ved at kalde en underside ”Om

mig, Jette Rasmussen”. I samarbejde med Rasmussen er vi kommet frem til

en række tekstlige informationer, der ikke kan undværes, eller ikke kan er-

stattes med illustrationer.

Det er afgørende for de ovennævnte punkter, hvor stringent designernes

retningslinjer for tekst på sitet skal være. I DD’s tilfælde skulle det som

nævnt, kortlægges hvor på sitet man kunne udelade tekst og for eksempel

indsætte illustrationer, fotos, knapper eller anden grafik, der kunne gøre

det ud for en visuel hjælp til informationssøgningen på sitet. Det har vi eks-

empelvis i høj grad kunnet gøre på produktsiderne, hvor billedprøverne af

tøjdesignet og priserne skrevet med tal kan give gode oplysninger med langt

mindre forklarende tekst.

Det er en stor fordel for DD’s website, at det som udgangspunkt ikke er et

teksttungt site, hverken kvalitativt eller kvantitativt, og derfor har det ikke

været et spørgsmål om at korte tekstoplæggene ned, snarere at omstruk-

turere teksten så den gør sig bedre på et website.

Page 34: Webdesignopgave 2009

Dette har vi, som illustreret, blandt andet gjort ved punktopstillinger af

de informationer vi fandt centrale for Rasmussens branding. Branding her

forstået som de valg man foretager sig for at iscenesætte sig selv ud fra be-

stemte mål og italesatte kerneværdier, som man godt vil associeres med. Vi

har haft øje for den strategiske placering af kerneord som børn, tøj, design,

unikt, herlige, leg, glæde, livskraft med flere, og lader i teksten ”Om mig,

Jette Rasmussen” disse ord være med til at kendetegne designvirksom-

heden og altså Rasmussens egne kerneværdier. Ligeledes har vi trukket på

referencer til svenske eventyr, Astrid Lindgrens universer især, og givet de

forskellige designs navne som Sød som Annika-kjole, Fræk som Emil-skjorte,

Sjov som Madicken-kjole og så videre. Disse er igen placeret for at skubbe

læseren i retning af en bestemt stemning, og skulle gerne bevirke, at kvin-

der i målgruppen føler, at de er kommet til et sted, der repræsenterer deres

værdier. Et sted de trygt kan stole på og i sidste ende handle hos.

TEKNISKE SPECIFIKATIONER

Websitets dimensioner

Vi besluttede os for at optimere sitet til en skærmopløsning på minimum

1024 x 768 pixels, da under 2% af danskerne bruger en skærmopløsning,

der er mindre end dette (FDIM, 2009a). Ud fra vores kendskab til målgrup-

pen mente vi derfor, at de højst sandsynligt ikke ville have en skærm, der er

mindre end dette.

Derfor besluttede vi også, at det ikke ville være nødvendigt at gøre layoutet

flydende, men foretrak i stedet at layoutet var mere forudsigeligt. (Robbins

2007, s. 43-44) Sitet har således en fikseret bredde på 950 pixels.

Vi valgte til gengæld at centrere sitet, så det altid vil være i midten af bru-

gernes skærme og lagde en blomstret baggrund bag det egentlige indhold

på sitet. Hvis brugerne sidder ved større skærme vil den ekstra plads på

skærmen ikke virke så tom, da den for det første bliver fordelt på hver side

af indholdet, og for det andet også bliver udfyldt med den blomstrede bag-

grund, og således bliver en del af sitets udtryk.

Mappestrukturen

Vi har forsøgt at gøre mappestrukturen (directory structure) på sitet så over-

skuelig som muligt. Index-filen ligger således på første niveau sammen med

en mappe med CSS-filerne, en mappe med billederne og en mappe med

undersiderne. Mappen ”undersider” indeholder filerne i det øverste niveau

af menuen og mapperne ”produkter”, som indeholder filerne til produk-

toversigterne, og ”enkeltprodukt”, som indeholder filerne på de enkelte

produkter. Her har vi taget højde for, at Rasmussen senere selv skal kunne

opdatere sitet.

(Se figur på næste side)

15

Page 35: Webdesignopgave 2009

Mappestruktur Kodning af websitet

Sitet er kodet i Dreamweaver i XHTML og CSS. Da vi ville sørge for, at så

mange som muligt kunne se websitet korrekt, har vi designet det, så det

vises så godt som ens i de nyeste versioner af både Internet Explorer,

Firefox, Safari og Opera, som er nogle af de mest populære browsere (FDIM,

2009b).

Man kunne også have tilpasset sitet til ældre versioner af Internet Explorer,

hvis det havde været tilladt at anvende JavaScript, da vi så kunne have linket

til et separat eksternt stylesheet, som de øvrige browsere ville ignorere.

I XHTML-dokumentet linkes der til et eksternt stylesheet, som ligeledes

linker til tre eksterne stylesheets. Dette besluttede vi for at gøre sitet mere

overskueligt og enkelt i sin opbygning. På denne måde var det også lettere

at ændre i layoutet på hele sitet uden at skulle rette i hvert enkelt XHTML-

dokument. Derudover sparer man også nogle bytes i download, da det er

de samme stylesheets, der er linkes til på alle siderne i websitet. (Robbins

2007, s. 187-188)

Overordnet opbygning af sitet

Websitet er overordnet set bygget op af fem div-elementer.

For det første er hele sitet rammet ind i en div med id-attributten ”main”,

desuden er logoet, headeren, menuen og indholdsfeltet markeret med

hvert deres div-element; ”logo”, ”banner”, ”menu” og ”indhold”. (Se næste

side)

Page 36: Webdesignopgave 2009

#main {

margin: 20px auto 20px;

padding: 10px;

width: 950px;

}

#logo {

width: 175px;

height: 176px;

border: none;

float: left;

margin-bottom: 20px;

}

#banner {

width: 759px;

height: 176px;

float: right;

margin-bottom: 20px;

}

16

Page 37: Webdesignopgave 2009

#menu {

width: 175px;

height: inherit;

background: #b9dfc5 url(../images/egernogsvampe.png) bot-

tom no-repeat;

clear: both;

float: left;

border: 2px solid #7a9c87;

}

#indhold {

width: 755px;

min-height: 400px;

background-color: #dbf3e3;

clear: right;

float: right;

border: 2px solid #7a9c87;

}

Som man kan se i ovenstående CSS-kode, har vi valgt at placere de overor-

dnede div-elementer i forhold til hinanden ved hjælp af egenskaben float.

Vi har også sat en margin-bottom på 20 pixels på logoet og headeren, så

menuen og indholdsfeltet ikke kolliderer med dem.

Menu

Da vi gerne ville have, at menuen var så overskuelig som mulig, valgte vi at

lave en ekspanderende menu, så produktkategorierne først viser sig, idet

man trykker på ”Børnetøj”. Vi ønskede desuden, at man i menuen skulle

kunne se, hvor på sitet man befinder sig, så man altid ville kunne finde

rundt.

Dette ville man nok for det meste lave i JavaScript, men vi fandt en måde,

man kunne gøre det på udelukkende ved hjælp af CSS.

For det første er menuen sat op i en unordered list (ul), mens produktkat-

egorierne er sat ind i deres egen ul inden i listepunktet ”Børnetøj”.

Når menupunktet ”Børnetøj” skal være lukket, ser koden således ud:

<li class=”closed”><a href=”undersider/produkter.htm” class=”sub”

onclick=”return door(this);”>Børnetøj</a>

Når menupunktet skal være åbent, ser det således ud:

<li class=”open”><a href=”../produkter.htm” class=”sub”

onclick=”return door(this);”>Børnetøj</a>

Page 38: Webdesignopgave 2009

I det tilhørende stylesheet ser det således ud:

.open ul { display: block; }

.closed ul { display: none; }

Deklarationen display: none fjerner indholdet og lukker den plads, indholdet

ellers ville have optaget. I modsætning til visibility: hidden, som blot ville

gøre indholdet usynligt, men lade pladsen stå tom, hvilket jo ville have skabt

et stort hul i menuen. (Robbins 2007, s. 282)

Da vi ønskede at højne brugervenligheden, ville vi have, at man i menuen al-

tid kan se, hvor på sitet man befinder sig. Vi tilføjede derfor en class-attribut

til det pågældende link i menuen og specificerede en farve for dette link.

F.eks. er attributten sat på menupunktet Kjoler på siden kjoler.htm:

<li class=”closed” id=”m3”><a href=”kjoler.htm”

class=”active”>Kjoler</a></li>

- med tilhørende CSS:

#menu1 li a.active { color: #9c7f51; }

Produkterne

For at skabe lidt dynamik på sitet har vi sat en hover-effekt på billederne af

stofprøverne til de enkelte produkter. På denne måde vil en potentiel kunde

hurtigt kunne se detaljerne i stofprøverne i et større billede.

Dette er gjort på følgende måde i XHTML-dokumentet:

<div class=”fabric”>

<a class=”thumbnail” href=”#thumb”>

<img src=”../../images/1_tekstilthump.jpg” alt=”Stof” />

<span><img src=”../../images/1_tekstil.jpg” alt=”Stort stof”

height=”400” />

</span>

</a>

<div class=”price”>Nr. 1<br />450 kr.</div>

</div>

- med tilhørende CSS:

.thumbnail span {

position: absolute;

17

Page 39: Webdesignopgave 2009

left: -1000px;

visibility: hidden;

}

.thumbnail:hover span {

visibility: visible;

top: 0;

left: 300px;

z-index: 50;

}

På denne måde bliver det store billede af stofprøven placeret samme sted

som billedet af produktet, eksempelvis soldragten. Så længe cursoren ikke

er placeret på thumbnailen af stofprøven, er det store billede gemt. Men

så snart cursoren trækkes hen over thumbnailen, vil det store billede blive

synligt pga. visibility: visible, og da z-indexet er sat til 50, sikres det, at stof-

prøvebilledet viser sig foran produktbilledet. (Robbins 2007, s. 306)

Validering

Vi har tjekket alle CSS-filerne og XHTML-siderne på The W3C CSS Validation

Service og The W3C Markup Validation Service, og alle CSS-filerne validerer,

mens næsten alle XHTML-dokumenterne validerer. Det eneste, der ikke vali-

derer, er kontakt.htm, da denne side indeholder en iframe med en henvis-

ning til Google Maps. Da iframes ikke understøttes i XHTML 1.0 Strict (Wiki-

pedia, Frames) er det ikke muligt at validere denne side, med mindre man

vælger at vise et kort på en anden måde, som ikke inkluderer iframes.

AFSLUTTENDE BEMÆRKNING

For at opnå indblik i hvilken merværdi der vil være gavnlig at tillægge bør-

netøjet fra DD, har vi indkredset målgruppen som værende den danske

veluddannede mor. På baggrund af en analyse omkring hvilken betydning

denne gruppe tillægger deres køb af børnetøj, har rollen som mor, og ple-

jen af dennes image, vist sig at have en betydelig rolle. Gennem opgaven er

det blevet påvist, at et stærkt ønske fra målgruppens side er at vise sit eget

overskud gennem sine børns påklædning. Det vil derfor være gavnligt, at

kunderne føler at de medkøber en merværdi, der støtter deres image om at

have overskud. Vi har ønsket at vægte det ”hjemmelavede” aspekt højt, og

vi har tilstræbt, at kunderne medkøber historien om Jette Rasmussen, der

tegner og syr alt tøj i hånden specielt til kundens barn. Sitet fremstår som

en personlig hilsen fra Jette Rasmussen, og vi har lagt vægt på at en handel

gennem dette site, er en handel med Rasmussen selv.

Vi har løbende argumenteret for, hvilke valg der ville være hensigtsmæssige

at tage i designet af sitet og derigennem haft en klar hensigt med valg af stil,

opbygning, navigationsfunktioner, skriftlig formidling og tekniske specifika-

tioner. Vi har ligeledes inkluderet konkurrerende websites i analysen og har

bestræbt os på at skabe et site, der giver brugerne en oplevelse, der ad-

skiller sig fra disse.

Vi har vægtet brugervenlighed højt gennem hele processen og har derfor

inkluderet testpersoner. Hermed har målet været at lave et site, der båder

møder brugernes forventninger til emotionel merværdi, brugervenlighed

samt plejer deres æstetiske sans. Herved skal sitet lette det daglige arbejde

for Rasmussen, da det har til hensigt at give køberne den oplevelse, de på

nuværende tidspunkt får gennem de indledende telefonsamtaler med Ras-

mussen.

Page 40: Webdesignopgave 2009

I en perfekt verden…

For at sætte vores forskellige designvalg i perspektiv vil vi her komme ind på,

hvad vi ville have gjort, hvis vi havde haft fuld handlefrihed, ingen program-

meringsrestriktioner, og et uendeligt budget.

Design

Allerede tidligt i forløbet forhørte vi os om kundens holdninger til hendes

logo. Logoet havde hun forholdsvis stærke følelser omkring, til trods for

at det i virkeligheden bestod af et oplæg i form af en blomst, og i hendes

øjne var den stort set, som den skulle være. Altså måtte vi komme op med

et forslag, der tog højde for blomstens form, men som alligevel kunne ap-

pliceres på et website uden at stikke for meget ud. Det betød at vi måtte

farvelægge blomsten, så den matchede det farveskema, vi i øvrigt havde

fremstillet til sitet.

Havde vi haft absolut handlefrihed, havde vi efter al sandsynlighed måske

forsøgt at komme op med et nyt originalt logo, og som designgruppe sætte

så stort et kunstnerisk aftryk på det færdige produkt som vi kunne. Ikke blot

ville det være nemmere at designe et visuelt udtryk, der var forbundet gen-

nem flere lag, end det nu er blevet tilfældet - vi ville også have mulighed for

at foretage ændringer til det sidste i takt med sitets tilblivelse.

Kode / teknik

I forlængelse af forrige afsnit om design skal det siges, at sitet i det hele tag-

et kunne være bygget anderledes op, hvis vi som designere havde haft frie

hænder til at programmere. Vi havde på forhånd (inden vi helt havde gjort

os designprocessens regler bevidste) set på mulighederne for at implemen-

tere et flashgalleri, der ville gøre sig godt på sitet. Flashgalleriet, der skulle

vise kollektionerne frem, ville give en blødere og mere levende og intuitiv

visning af varerne, og dette ville kunne påvirke de besøgendes generelle in-

dtryk af sitet. Men FLASH var som bekendt ikke tilladt i denne opgave.

Ligeledes havde vi gerne set mulighed for at implementere videoer, der

kunne illustrere Rasmussens arbejde, for eksempel ved stop-motion-videoer

af tilblivelsen af et stykke børnetøj. Med vore dages mulighed for at dele

videoerne på You Tube og indlejre (embed) dem på sitet var der mulighed

for, at Rasmussen også selv kunne tage videoer og dele dem med sine

kunder, både på You Tube og på sitet. At bruge You Tube er noget, vi som

designgruppe, har haft succes med før, og det kan, for ret små penge, gøre

et stort indtryk. De levende billeder kan være en stærk medspiller i brand-

ingstrategierne, og med dem kommer også en lyddimension, og således

åbningen til at påvirke en sans der ellers ikke er i spil på sitet. Høresansen

kan have endog rigtig stor positiv eller negativ indvirkning på menneskers

opfattelse af en oplevelse; online såvel som offline. Man skal ikke have

besøgt mange websites i slutningen af 90’erne eller MySpace sites (Den slags

MySpace sites hvor kunstneren har valgt at musikken automatisk afspilles ved

besøg) i dag for at vide, hvor provokerende det kan være, at musikken beg-

ynder at spille, uden man har ”bedt” den om det. Man skal på den anden

side ikke være blind for, at You Tube er et forholdsvis populært website.

Endelig skal det understreges, at sitet Hollys kan stå som flink appetitvæk-

ker til en eventuel senere relaunch af DD version 2.0. Når først brandet er

lanceret, og på et senere tidspunkt forhåbentligt har bevist sit værd, vil det

være både muligt og klogt at bruge penge på et enkelt website, der kan

præsentere DD på en måde, der både er moderne og retro.

18

Page 41: Webdesignopgave 2009
Page 42: Webdesignopgave 2009

Anbefalinger til Rasmussen

Vi har nu gennemgået en række overvejelser, der er vigtige i forhold til DD’s

website. Det er dog vigtigt at understrege, at websitet ikke kan stå alene i

DD’s markedsføringsstrategi. Et bredt kendskab til websitet kræver en anden

form for reklame end den nuværende mund-til-mund metode. Rasmussen

kan dog også træffe den beslutning, at hun ikke ønsker, at forretningen skal

vokse sig meget større, end den er nu, og i så fald kan yderligere reklame

undværes. For at skabe en succesfuld købeoplevelse hos hendes kunder

bør hun dog både supplere selve produkterne med en oplevelse før, under

og efter købet, da man overvejer og evaluerer sit køb på alle disse stadier

(Bjerre og Tollin 2002, s.311).

Med nuværende website leverer Rasmussen en oplevelse før købet, og den

personlige kontakt med kunden er ligeledes en vigtig del af kundens oplev-

else under købet. Når en kunde har bestilt og modtaget sin vare, evalueres

købet allerede. For at skabe en oplevelse som synes lidt ekstra speciel og

personlig, vil vi anbefale en form for emballage af lækker kvalitet, der stem-

mer overens med af det visuelle udtryk, der præsenteres på sitet (Sønder-

gaard 2002, s.25). Hertil kunne man tilføje et lille visitkort, som vedlægges

varen. For at understrege det personlige islæt vil det være optimalt, hvis

dette havde en håndskrevet hilsen. Derved mindes man om merværdien

og de emotionelle fordele, efter man har modtaget produktet. Et sådant vil

fremstå som en ekstra service samt fungere som et påmindelseskort, der

kan gemmes, så websitet ikke bliver glemt.

19

Page 43: Webdesignopgave 2009

LITTERATURLISTE

Oversigts- og speciallitteratur

Aaker, david A. (2002): Building strong brands, London: Simon & Schuster

Bjerre, Mogens & Tollin, Karin (2002): ”Kap. 7: Markedskommunikation”, i:

Modtageren som medproducent (2. udgave), Samfundslitteratur

Engholm, Ida (2004): ”Webgenrer og stilarter”, i: Digitale Verdener, Køben-

havn: Gyldendal

Englund, Helena & Guldbrand, Karin (2001): Klarspråk på nättet, Sundby-

berg: Pagina.

Itten, Johannes (1977/1961): Farvekunstens elementer. Subjektive oplevelser

og objektiv erkendelse som vejledning til kunsten, Borgens Forlag

Jakobsen, Poul Erik & Jakobsen, Louise Byg (2003): Trend sociologi

(2.udgave), Herning: pej gruppens forlag.

Krug, Steve (2000): Don’t make me think. A Common Sense Approach to

Web Usability, Intrapolis: New Riders

Lynch, Patrick J. & Horton, Sarah (2008/1999): Web Style Guide: Basic De-

sign Principles for Creating web Sites – 3rd edition, New Haven & London:

Yale University Press

McGovern, Gerry & Norton, Rob (2002): Professionel webkommunikation,

København: Børsen

Pedersen, Kim & Hansen, Pernille (1997): Design til skærmen, Forlaget Graf-

isk Litteratur

Robbins, Jennifer Niederst (2007): Learning Web Design. A Beginner’s Guide

to (X)HTML, Style Sheets, and Web Graphics – 3rd edition, O’Reilly Media,

Inc.

Søndergaard, Thomas Christensen (2002): Emballagen som kommunikativt

medie og informationsbehandlingen i forbindelse med indkøb af fast moving

consumer goods, Handelshøjskolen i Århus: Institut for Markedsøkonomi

Wharton, C. et al. (1994): “The Cognitive Walkthrough Method: A Practi-

cioner’s Guide, i: Usability Inspection Methods, New York: John Wiley &

Sons

Wodtke, Christina (2002): Information Architecture. Blueprints for the Web,

Boston: New Riders

Tidsskrifter

Andersen, Lars Pynt (2007: september): ”Børn og branding: Forbrug pr. sted-

fortræder”, i: Brand base, nr. 21

Belk, W. Russel (1998): “Possessions and the extended self”, i: The journal of

consumer research, vol. 15

Bernstein, Mark (2001): “Beyond usability and design: The narrative web”, i:

Brand Arts

Cleaver, Joanne (2004): “What women want”, i: Entrepreneur, vol. 32, issue

2

Engholm, Ida (2008): “Design history of the WWW: Website development

from the perspective of genre and style theory, i: Artifact, vol. 1, issue 4

Page 44: Webdesignopgave 2009

Websites

Danmarks statistik

http://www.statistikbanken.dk/03 (set 15. maj 2009)

ej sikke lej: http://www.ejsikkelej.dk (set 5. maj 2009)

FDIM, Foreningen af Danske Interaktive Medier (marts, 2009a): ”Skærmo-

pløsning”

http://fdim.dk/?pageid=91&list=resolution&sorttype=users&dir=desc&use

rtype=danish&periodtype=month&period=3-2009&update.x=48&update.

y=10 (set 14. maj 2009)

- (marts, 2009b): ”Browserbarometer”

http://fdim.dk/?pageid=89&list=browser&sorttype=users&dir=desc&userty

pe=danish&periodtype=month&period=3-2009&update.x=54&update.y=10

(set 14. maj 2009)

Gabriel-Petit, Pabini (2007): ”Applying Color Theory to Digital Displays”, UX

Matters

http://www.uxmatters.com/mt/archives/2007/01/applying-color-theory-to-

digital-displays.php (set 14. maj 2009)

Gro Company: http://www.grocompany.dk (set 5. maj 2009)

H.J.O.R.T.H Copenhagen: http://www.hjorth-cph.dk (set 5. maj 2009)

H&M: priser på H&M

http://www.hm.com/dk (set 15. maj 2009)

HK (2006): ”HK-medlemmerne og fødevarer” http://www.hk.dk/

hkwww/html.nsf/vFILES/doku_foedevarerne./$FILE/doku_foedevarerne.

pdf?OpenElement (set 15. maj 2009)

IdaT: http://www.idat.dk (set 5. maj 2009)

Jasper, Morten (2006): ”Børn sætter sig på nettet i 2007”, i: Erhvervsbladet

http://www.erhvervsbladet.dk/article/20061219/news02/112190176/ (set

15. maj 2009)

Kaloo: http://www.kaloo-usa.com (set 5. maj 2009)

Kammakarlo: http://www.kammakarlo.dk (set 5. maj 2009)

20

Page 45: Webdesignopgave 2009

Katvig: http://www.katvig.dk (set 5. maj 2009)

MALA: http://www.mala.dk (set 5. maj 2009)

Me Too: http://www.metoo.dk (set 5. maj 2009)

Mini a ture: http://www.miniature.dk (set 5. maj 2009)

Munk, Timme Bisgaard & Mørk, Kristian (2002): ”Tænke-højt-testen forklar-

et for dummies”

http://www.kommunikationsforum.dk/?articleid=5381 (set 8. maj 2009)

Nielsen, Jakob (2004): “Guidelines for Visualizing Links”

http://www.useit.com/alertbox/20040510.html (set 15. maj 2009)

Nielsen, Jakob (2006): “F-Shaped Pattern for Reading Web Content”

http://www.useit.com/alertbox/reading_pattern.html (set 15. maj 2009)

Okker-Gokker: http://www.okker-gokker.dk (set 5. maj 2009)

- Purple, Nye varer: http://www.okker-gokker.dk/pl/NYE_VARER_Pur-

ple_130.aspx (set 5. maj 2009)

- Vanter, Drengetøj : http://www.okker-gokker.dk/pl/Drenget%C3%B8j__

Vanter_68.aspx (set 5. maj 2009)

Phister og Philina by Pure Kids: http://www.phisterphilina.dk (set 5. maj

2009)

Rutter, Richard (2004): “How to size text using ems”

http://www.clagnut.com/blog/348 (set 15. maj 2009)

Udenrigsministeriet (2000): Tal der taler

http://pub.uvm.dk/2000/tal/kap05_2.htm (set 15. maj 2009)

Wier, Mette (2004): ”Moderne økologi er afhængig af stærke ø-mærker”, i:

FØJOe Nyt, nr. 5

http://www.foejo.dk/enyt2/enyt/okt04/marked.html (set 15. maj 2009)

Wikipedia: ”Frames”, i: HTML element

http://en.wikipedia.org/wiki/HTML_element#Frames (set 15. maj 2009)

Page 46: Webdesignopgave 2009

Zirkus Zirkus: http://www.zirkuszirkus.dk (set 5. maj 2009)

Andet

Bækgaard, Jette (2000): Farveværktøjet BCW – til den professionelle bruger, TEKO

Center Danmark, Herning

BILAGSLISTE

1. Interview med to kunder

2. Introducerende møde med Rasmussen

3. Analyse af konkurrenters websites

21