1. No category

Projekt C - Udvikling af
multimedieløsning for ByPrang
Multiemediedesign - UCN Sofiendalsvej
Termin: Sommer 2015
4. Semester
MMDB0913
Projektdeltagere:
Daniel Kranker
Nicolai Dahl Jeppesen
Thomas Christiansen
Vejleder:
Lisbeth Mathiesen
Må gerne offentliggøres.
Link til løsning:
www.ByPrang.dk/wordpress
Backend
www.byprang.dk/wordpress/admin
Brugernavn: byprangdk
Kodeord: 2d5B2!91
Tegn: 145.512
Synopsis
ByPrang er en dansk design virksomhed som sælger produkter der giver stof til
eftertanke. ByPrang manglede en platform hvor de kunne sælge deres produkter.
Da de er en virksomhed som bryster sig af at de gerne vil hjælpe andre gennem
deres produkter, har der derfor været fokus på andre områder end bare at lave en
løsning der kan skabe dem profit. Vores opgave har været at skabe en multimedie
løsning fra bunden af.
Indhold
Indledning7
Problembeskrivelse8
Problemformulering8
Metode9
Dataindsamling12
Kvantitativ dataindsamling i form af et online
spørgeskema13
Kvalitativ dataindsamling med fokus på UX i form af low-fidelity prototyping14
Kvalitativ dataindsamling i form af intern usability test
Anvendt teori
14
15
Udviklingsmetoder15
Agile metoder
15
Scrum15
De tre roller
15
De tre ceremonier
16
De tre værktøjer
16
SWOT16
Benchmarking17
Målgruppespecificering18
Segmenteringskriterier18
Informationsarkitektur19
Praktisk organisering:
19
Websidestrukturer20
Sekvensen:20
Hierakiet:20
Webstrukturen:21
Wireframes21
Retorik22
Appelformer22
Patos22
Logos23
Ethos23
2
Lisbeth Thorlacius’ kommunikationsmodel
24
Faktisk afsender
24
Implicit afsender
24
Implicit modtager
25
Faktisk modtager
25
Produkt25
Kontekst25
Medie26
Kode26
Farvepsykologi 26
Komposition28
Typografi28
Brugertest29
Udførsel af brugertest
29
Storytelling30
Historiefortællingens fire elementer
30
Budskabet30
Konflikten31
Rollefordelingen31
Aktantmodel31
Handlingen32
Stakeholder interview
32
Video33
Berettermodellen 33
Personer34
Billedets formater/camera shots 34
Storyboard35
Analyse og problemløsning
37
Trend- og tendensanalyse
37
“Fashion with a cause”
37
Armbåndsurets funktion
37
Post-demographic consumerism
38
Brandloyalitet39
3
Corporate Social Responsibility
Analyse af spørgeundersøgelse
Hypotese om ByPrangs målgruppe:
39
40
41
Virksomhedsanalyse:42
Mission, Vision og værdier
42
Mission42
Vision43
Konkurrentanalyse44
Ben & Jerry’s
44
Northernmakers44
Vipp45
Målgruppespecifikation45
Brugerprofil46
Design47
MoSCoW47
Konceptbeskrivelse47
Informationsarkitektur48
Wireframes49
Farvevalg50
Typografi51
Grafiske elementer:
51
Forside53
Jeres Historier
54
Butik55
Produktsiden55
Produktsforhåndsvisning56
Om ByPrang
56
Kontakt56
UX-test57
Hvad føler du når du ser siden?
57
Hvad er dit første indtryk af ByPrang når du ser siden?
57
Hvad synes du om siden?
57
Delkonklusion58
4
Video59
Personer59
Stakeholder interview
60
Storytelling60
Typografi64
Tredjedelsreglen65
Musik/Filmscore65
Videoens billedformater
66
Storyboard66
Interaktion67
WordPress theme-udvikling
67
Menu på mobil/tablet
67
“Jeres historier”
70
Indsendelse af historier
70
Visning af historier
71
Video på forsiden
73
Usability test
75
Konklusion78
Perspektivering79
Ansvarsliste80
Daniel80
Nicolai80
Thomas80
Literaturliste:81
Bøger:81
Hjemmesider:81
PDF82
Bilag83
Billag 1 - Spørgsmål til interview
83
Bilag 2
85
Bilag 3 - Kvantitativ dataindsamling
86
5
Indledning
Dette projekt er udarbejdet i samarbejde med ByPrang. ByPrang er en
nyopstartet virksomhed, som ønsker at sælge deres unikke designs og
produkter på en online platform. ByPrangs produkter er ure med unikke
motiver, tegnet af Birgitte Prang, som skal kunne hjælpe brugeren med
at kommunikere om forskellige aspekter af deres liv. Konceptet bag deres
produkter er, at hvert produkt skal have en speciel historie og betydning
for brugeren. Udover dette koncept havde ByPrang også nogle bestemte
værdier, som de ønskede at få formidlet gennem produktet.
De har tidligere forsøgt at nå ud til deres målgruppe ved brug af crowdfunding, men det viste sig ikke at være en succes. ByPrang ønsker derfor
en ny måde at kommunikere med deres målgruppe på, for at sælge deres
produkter.
For at nå frem til en løsning på dette problem, er der blandt andet udført
en trend- og tendensanalyse, for at få indsigt i den moderne forbrugers
adfærd, holdninger og værdier. Ud fra blandt andet trend- og tendensanalysen er der udarbejdet en brugerprofil. Resultaterne fra undersøgelserne, de dertilhørende analyser og brugerprofilen, er så blevet brugt som
argumentationsgrundlag for design og udvikling af produktet. Produktet
er en todelt multimedieløsning, delt op i en video og et website med CMS.
I selve produktudviklingen er der anvendt relevante teorier og metoder, i
forbindelse med design og implementering af produktet. Produktet er så
løbende blevet holdt op mod resultaterne fra analyserne og brugerprofilen, for at sikre at der er en sammenhæng mellem produktets afsender
og modtager. Udover at anvende resultaterne fra undersøgelserne, er der
udført brugertests, blandt andet i form af user experience-test, hvor modtagerens emotionelle reception er blevet observeret og analyseret. Resultaterne fra brugertests er så brugt til at revidere produktet, så kommunikationen og funktionaliteten lever op til den faktiske modtagers behov og
værdier.
6
Problembeskrivelse
ByPrang er en nystartet virksomhed der sælger ure, som er designet af
Birgitte Prang.
ByPrang har allerede lavet deres produkter, men mangler at promovere/
markedsføre og sælge dem, derfor ønsker de en platform til dette formål.
Produkterne vil være ure med forskellige design, som bliver lavet i et begrænset antal.
ByPrang forsøgte, ved hjælp af crowdfunding, at få opstartet deres virksomhed og dermed lanceret deres produkter. Da de ikke nåede deres mål
for deres Kickstarter-projekt, stod de med det problem at de skulle finde
en ny måde at få deres produkter solgt på. Selvom de ikke fik finansieret
deres projekt gennem crowdfunding, besluttede ByPrang sig alligevel for
at begynde produktionen af deres første produktserier.
Derfor har de brug for en platform, hvor de kan fremvise og sælge deres
produkter. Hvis ikke de får løst dette problem, står de i en situation hvor
de har en masse produkter som de ikke er i stand til at sælge. Dette leder
så ultimativt til at ByPrang ikke tjener nogen penge, og derfor enten bliver
nødt til at stoppe med at lave det de holder af, eller fortsætte med at finansiere projektet indtil de ikke har råd til det længere. Hvis ByPrang derimod får en platform, hvor de kan fremvise deres produkter og sælge dem,
giver det dem en mulighed for at udvide deres virksomhed og produktsortiment, hvis platformen tiltrækker interesserede kunder. Derudover giver
deres produkter den moderne forbruger en måde at udtrykke sine holdninger og værdier på.
ByPrangs krav til platformen er at den skal være meget personlig; “Det
skal være som at blive inviteret ind i vores hjem”, og løsningen skal afspejle at ByPrang ikke gør det for pengene, men fordi at de brænder for
det de laver. De skal desuden være i stand til selv at vedligeholde denne
platform.
Problemformulering
ByPrang har nogle værdier og holdninger som bliver udtrykt i deres produkter. Hvordan stemmer disse overens med den moderne forbrugers
værdier, og hvordan formidles og markedsføres disse gennem en video og
et website? Hvordan sørges der for at websitets backend er brugervenlig,
så den kan anvendes af ByPrang?
7
Metode
Der arbejdes med Scrum som udviklingsmetode.
Scrum er en agil udviklingsmetode der handler mere om effektiv kommunikation, end hvilke hvilke løsningsorienterede metoder man vil tage
i brug for at nå sit mål. Scrum egner sig godt til små teams, og er meget
fleksibel i forhold til ændringer i den overordnet tidsplan, da der altid er
mulighed for at ændre i sin prioritering af opgaver.
Nogle af risiciene ved Scrum er at der kan opbygges en form for gruppepres, da man kan se hvem der tager hvilke opgaver, og er der en der falder uden for gennemsnittet kan det have en negativ effekt på den enkelte
person, og teamet kan føle at den givne person ikke bidrager med nok i
forhold til den endelige løsning.
Der skal også overvejes hvorvidt der skal benyttes en burndown-graf eller
ej. Herefter overvejes hvilken måde opgaver i backloggen skal kategoriseres på. Opgaverne skal inddeles i tidsintervaller og kategoriseres ved
hjælp af en pointværdi ud fra Fibonacci-tallene: 1, 2, 3 og 5. 1 point har
et time interval fra 1-3 timer, 2 point har et time interval fra 4-6 timer, 3
point har et time interval fra 7-9 timer og 5 point har et time interval fra
10-12 timer.
Derefter kommer forundersøgelse og analyse hvor der vil blive set nærmere på hvilke trends og tendenser der rører på sig. Denne undersøgelse
udføres for at finde ud af hvilke værdier og holdninger der gør sig gældende for den moderne forbruger. Første trin er desktop research, hvor
forskellige crowdfunding-sider, som Kickstarter og Indiegogo, vil være i
fokus, for at give en idé om hvilke tendenser og trends der efterfølgende
skal søges efter.
Sideløbende foretages der en kvantitativ dataindsamling.
For at få en idé om hvilken afgrænsning af målgruppen er relevant, foretages der en kvantitativ dataindsamling i form af et online spørgeskema.
Til udførelse af dette spørgeskema bruges der Google Forms, da det er en
gratis løsning med mulighed for automatisk at indføre data i et spreadsheet, så resultaterne hurtigt kan analyseres. Antallet af spørgsmålstyper
i Google Forms er lavere end hos lignende services som SurveyMonkey,
men til denne spørgeundersøgelse er Google Forms seks spørgsmålstyper
tilstrækkeligt.
Der er valgt at udføre en virksomhedsanalyse, i form af en konkurrentanalyse og SWOT-analyse. I konkurrentanalysen ses der nærmere på virksomheder der deler værdier med ByPrang, men ikke nødvendigvis sælger
samme produkt. Resultaterne fra konkurrentanalysen skal bruges til at
finde frem til hvilke muligheder og trusler der er for ByPrang, og hvilken
målgruppe konkurrenterne henvender sig til. I virksomhedsanalysen vil
der også være et kundemøde.
8
SWOT-analysen skal bruges til at give et overblik over hvilke styrker der
skal være fokus på, og hvilke svagheder / trusler der skal gøres opmærksom på i forbindelse med produktudvikling. Igennem et kundemøde findes der frem til ByPrangs værdier, mission og vision.
Næste trin er målgruppespecificeringen, hvor der vil blive afklaret hvilke
af målgruppens værdier, behov og præferencer er relevante for denne
case. Målgruppespecificeringen sammenlignes så med virksomhedsanalysen, for at finde ud af hvilke af ByPrangs værdier der stemmer overens
med målgruppens. Når disse værdier, behov og præferencer er specificeret, påbegyndes vores design- og udviklingssprints.
Der skal afholdes en idégenereringsworkshop på baggrund af konkurrentanalysen, hvor der ses nærmere på de konkurrenter der er fundet
frem til. Der skal ses nærmere på hvordan konkurrenterne har løst deres
problemer i forhold til informationsarkitektur og kommunikation, dette
udføres ved hjælp benchmarking, for at danne et billede af hvordan man
kan løse de problemer. Ud fra det laves der en MoSCoW: must -, should-,
could- og would have.
Derefter udledes der en kravspecifikation for produktet.
Derefter skal der arbejdes med informationsarkitektur og user experience
design for produktet. Ud fra kravspecifikationen planlægges der hvilket
indhold der skal være på siden, som bliver udført i form af et sitemap. Ud
fra sitemappet vil der så blive taget forskellige beslutninger i forhold til
interface designet. Løbende laves der sketches for at få visualiseret forskellige udkast til sidens informationsarkitektur.
Derefter skal der laves wireframes, med formål at agere skelet for produktet. Ud fra disse wireframes skal der så designes mockups.
Sideløbende med udviklingen af mockups, foretages en undersøgelse af
kommunikation, samt formidlingen af budskabet. Dette gøres ved hjælp
af retorik, med fokus på appelformer. Desuden bliver Lisbeth Thorlacius’
kommunikationsmodel benyttet for at planlægge kommunikationen i produktet, samt undersøge hvordan brugeren oplever og forstår produktet.
Der anvendes farvepsykologi, for bedst muligt at kommunikere de værdier som ByPrang og målgruppen har. Disse mockups bliver hele tiden
holdt op imod ByPrang og målgruppens værdier, da det er dem designet
skal afspejle. Her undersøges der brug af farvepsykologi og komposition
for bedst muligt at relatere til målgruppen, samt lede hen til de følelser og
tanker ByPrang ønsker at kommunikere.
Til idégenerering bruges der mockups, da forskellige personers udgaver
af det samme produkt kan give kreativ inspiration, og dermed føre til en
forbedret version. Derfor skal der i designsprints skabes forskellige for9
slag og udgaver af designet i form af mockups.
Disse mockups skal så bruges til at udføre en UX test, hvor forskellige testpersoner bliver bedt om at sætte ord på de tanker og følelser de får når
de ser siden, for at give et indblik i om brugeren kan afkode de ønskede
kommunikative budskaber.
Da et af casens krav er et CMS og en webshop, undersøges de forskellige
muligheder der findes for at opfylde disse krav. Der bruges WordPress
som CMS, som er verdens mest brugte CMS, der bruges på 23,8 % af alle
websites (W3Techs, n.d.). Grunden til der arbejdes med WordPress er, at
der er stor mulighed og frihed når det kommer til design og udseende,
men også funktionalitet. For at opfylde kravet om en webshop, anvendes
WordPress-udvidelsen ”WooCommerce”, som tilføjer ecommerce-funktionalitet til et website. For at salg gennem webshoppen er muligt, skal der
vælges en betalingsgateway. Som betalingsgateway bruges der PayPal.
Grunden til dette er, at alle transaktioner bliver foretaget gennem PayPal’s eget site, så kundens data bliver behandlet fortroligt. Da WordPress
er det mest populære CMS i verden, er der en vis sikkerhedsrisiko når det
anvendes. Derfor anvendes der et sikkerhedsmodul ved navn ”iThemes
Security”, som analyserer ens site og laver en oversigt over eventuelle
sikkerhedsbrister. Designet af siden og webshoppen udføres ved brug af
et “starter theme”, genereret via. Underscores.me. Dette “theme” bliver så
designet ved brug af HTML og CSS, så det appellerer til målgruppen. Der
vil desuden blive anvendt Javascript i form af biblioteket jQuery, til at løse
forskellige design- og layoutmæssige problemer. Til udviklingen af designet, anvendes der desuden Bootstrap 3 som framework, for at gøre udarbejdelsen af et responsivt design lettere og mindre tidskrævende.
Dernæst startes implementeringen, hvor resultaterne fra analysen og
designet anvendes. Da CMS’et skal anvendes af ByPrang efter implementeringen, skal det sikres at backend’en af sitet er anvendelig af kunden.
Dette bliver testet ved brug af en intern brugtest med Birgitte fra ByPrang,
i form af en tænke-højt test, for at give et konkret overblik over hvilke
elementer der skaber forvirring eller problemer, eller hvis der er manglende elementer. Under denne brugertest spørges der også ind til kundens
forventninger i forhold til selve websitet og webshoppen, for at klargøre
om kunden er tilfreds eller ej.
Der foretages yderligere UX-test af websitet, for at undersøge brugerens
emotionelle reception af det implementerede produkt.
Løbende skal der laves en video, med formålet at fremvise ByPrangs
historie. Først udvikles der et manuskript og et dertilhørende storyboard,
for at have en struktureret tidsplan i forhold til optagelserne til videoen.
Desuden bliver berettermodellen benyttet, som tager udgangspunkt i en
10
films spændingskurve. Dette kan være med til at holde fokus på om videoen formidler ByPrangs budskab, på en måde der er spændende for målgruppen. Da det vigtige ved denne video vil være at formidle ByPrangs
budskab på en personlig måde, bliver der i videoen foretaget et interview
af Birgitte og Gøran, stifterne af ByPrang.
I forbindelse med dette interview skal der undersøges hvordan man afholder et stakeholderinterview. Grunden til dette er for at få alle Byprangs
holdninger, værdier og motivation for virksomheden. Her bliver der også
undersøgt om personer i film, og hvordan de kan være med til at skabe en
fornemmelse af troværdighed, men også være med til at give målgruppen
muligheden for at relatere til Birgitte og Gørans historie.
I forbindelse med videoen skal der også undersøges brug af forskellige
kameravinkler samt komposition, beskæring og placering, for at sikre at
budskabet bliver formidlet optimalt. Det samme gælder for tredjedelsreglen, som er en guide til at placere vigtige personer og objekter rigtigt i
sin film, så seeren får fokus på dem og det tidligt. I videoen skal der også
anvendes stillbilleder, for at skabe en stemning og en forbindelse til ByPrangs produkter.
Til revidering af produktet anvendes resultaterne fra de forskellige UXtests.
Dataindsamling
Når et produkt skal udvikles, er det ikke altid man har den data man har
brug for. Derfor findes der forskellige teknikker, som kan bruges til at
indsamle den data man har brug for, for at udvikle sit produkt:
• Spørgeskemaundersøgelse
• Interview
• Prototyping
• Observationer
De ovennævnte teknikker er såkaldte kvantitative og kvalitative metoder.
Kvantitative metoder
Kvantitative metoder forbindes ofte med klassiske markedsundersøgelser,
og udføres ofte i form af spørgeskemaer, som enten kan afvikles via telefon, ansigt til ansigt eller over internettet.
Man anvender kvantitative metoder til at undersøge hvor mange mennesker der gør noget bestemt, men spørgeskemaer har også muligheden
for at spørge ind til hvad en bruger prioriterer højest på for eksempel en
hjemmeside eller et fysisk produkt.
Spørgeskema
Når man skal foretage en spørgeundersøgelse i form af et spørgeskema,
er det vigtigt at man har en problemstilling som man skal have besvaret
i form af sit spørgeskema, derudover skal man gøre det klart hvad man
11
vil bruge resultaterne til, for uden et klart mål for hvad man vil opnå, kan
en spørgeundersøgelse være uden betydning, for hvordan man arbejder
videre med sin undersøgelse.
Det er også vigtigt at overveje arkitekturen i spørgeskemaet, hvilken rækkefølge skal spørgsmålene komme i? Typisk vil man se generelle spørgsmål først, og så de mere specifikke spørgsmål der omhandler problemstillingen.
Derudover er det vigtigt at spørgsmålene i undersøgelsen er velformulerede og nemme at forstå for undersøgelsens målgruppe. Det vil sige at det
for eksempel er bedst at undgå fagsprog, med mindre at man ved målgruppen forstår det.
De spørgsmål man laver, skal være direkte og præcise i forhold til problemstillingen. De må dog ikke være ledende i den forstand, at et spørgsmål ikke må presse brugeren i retning af et bestemt svar.
Man skal også overveje hvilken kontekst der spiller ind når man laver sit
spørgeskema. Hvor sender man det ud? Mail? Telefon? Sociale medier
eller face-to-face? Hvor svarer folk på det? Sidder de derhjemme, på kontoret eller i skolen?
Det er vigtigt at overveje konteksten i forhold til hvor meget “støj” der er
som folk kan blive forstyrret af under spørgeskemaet.
Inden man sender sit spørgeskema ud, er det best practice at teste det, da
tests oftest vil resultere i at man finder fejl eller sætter spørgsmålstegn
ved formuleringer.
(Fischer, L. H. & Oosterbaan, M., 2010)
(Busch, A. M., 2011)
Kvantitativ dataindsamling i form af et online
spørgeskema
Det online spørgeskema skal deles på Facebook via. ByPrang.dk’s side, for
at udspørge folk som har udvist interesse for ByPrangs produkter.
Grunden til at der vælges et online spørgeskema, er for at få resultater
som ikke er begrænset af geografiske forhold. Ulempen ved online spørgeskema er at man ikke har kontrol over hvem der svarer på undersøgelsen.
Da der ikke er mulighed for at hjælpe testpersonen, hvis der opstår forvirring, er det vigtigt at spørgeskemaet er simpelt og let at forstå og udfylde.
Formålet med spørgeundersøgelsen er at undersøge nogle demografiske
parametre for folk der har udvist interesse i ByPrangs produkter, samt
undersøge hvilken type armbåndsur de foretrækker, og hvor meget de er
villige til at betale.
Ved at dele spørgeskemaet på ByPrangs egen Facebookside kan der opstå
usikkerhed om undersøgelsens repræsentativitet, da nogle af deltagerne
kan have en forudindtagelse om ByPrang i forvejen.
12
Kvalitativ dataindsamling med fokus på UX i form af
low-fidelity prototyping
Til UX-testen udformes der en interviewguide som skal klargøre hvad der
skal opnås med dataindsamlingen, samt hvilke spørgsmål der skal stilles.
Formålet med undersøgelsen er at finde ud af om testpersoner kan afkode
budskaberne på siden, og hvilke følelser og indtryk de får når de oplever
produktet. En potentiel ulempe ved denne metode kan være at testpersonerne er bange for at “gøre noget forkert”, eller være ærlige, fordi de kan
se at der er brugt tid på produktet de giver feedback på.
Kvalitativ dataindsamling i form af intern usability test
Den interne usability test tager udgangspunkt i sidens CMS. Her får klienten til opgave at løse en række opgaver, for eksempel. at oprette et nyt
produkt på siden. Usabilitytesten vil blive udført som en tænke-højt-test.
Testen vil blive optaget via. Silverback, for at have dokumentation, der
kan henvises til, når produktet skal revideres.
13
Anvendt teori
Udviklingsmetoder
Agile metoder
Det der beskriver de agile metoder, er deres evne til at tilpasse sig i forhold til udviklingsprocessen. Derudover egner de agile metoder sig bedst
til små teams, hvilket er beskrevet i det agile manifest:
“Individer og samspil frem for faste arbejdsgange og værktøjer.
Funktionsdygtigt software frem for omfattende dokumentation.
Samarbejde med kunden frem for kontraktforhandling.
Tilpasning til forandring frem for at følge en plan.
Det vil sige, mens der er værdi i punkterne til højre,
værdsætter vi punkterne til venstre endnu mere.”
(Klysner, 2001 i Busch, 2011 s. 141)
Scrum
Scrum er en agil metode, der beskriver hvordan planlægningen og organiseringen af et projekt kan foregå. Når man benytter Scrum tager man ikke
stilling til hvordan udviklingen af produktet skal foregå, men derimod
hvordan man kan opnå en effektiv kommunikation og hvordan et selvstyrende team skal fungere.
Det der er med til at adskille Scrum fra de andre agile metoder, er at det
kører i såkaldte “sprints”. Disse sprints har en fast tidsramme, hvor man
har tid til at færdiggøre de opgaver der er taget ind, inden den næste
sprint starter. Når en sprint er afsluttet skal opgaverne fra en sprint potentielt være klar til at blive frigivet og anses for at være færdige.
Figur 1 - Vores scrumboard
De tre roller
Produktejeren, som ikke kender til alle detaljerne i produktet eller hvad
det helt præcist skal kunne, men ved hvem det skal udvikles til og hvilket
problem produktet skal løse.
14
Scrummasterens job er at holde tæt kontakt med produktejeren, samt
holde teamet motiveret, samt fjerne de forhindringer teamet kunne møde.
Derudover har Scrummasteren også ansvaret for at afholde de tre ceremonier.
Holdet består af dem der udvikler produktet. De bestemmer hvilke opgaver de tager ind fra produktbackloggen, og hvordan de vil fuldføre de
opgaver.
De tre ceremonier
Sprint planlægningsmøde: hvor de tre roller mødes og beslutter hvilke
opgaver de tager ind i det kommende sprint.
Det dagligt stående Scrummøde hvor holdet taler om, hvad de har lavet siden i går, hvad de skal lave i dag, og hvilke forhindringer der kunne være.
I Sprint review-mødet beslutter produktejeren hvad der kan accepteres
som værende færdigt, og hvad der skal tilbage til teamet. Udover det, afholdes der et “retrospektiv” hvor udviklingsprocessen revurderes; “er der
noget der skal ændres på i forhold til måden vi arbejder på?”.
De tre værktøjer
Produktbacklog består af alle de ideer og krav som produktejeren har
til produktet. Man kan kalde det en prioriteret ønskeliste over hvad produktet skal kunne.
Sprintbacklog består af de opgaver som de tre roller har besluttet der skal
med i den kommende sprint.
Burndown-grafen viser holdets samlede tidsforbrug der er blevet estimeret til sprint planlægningsmødet. Den blå graf viser hvordan tidsforbruget
er i forhold til estimeringen, og den røde graf viser det ideelle tidsforbrug.
Hvis den blå graf er over den røde, så er holdet bagud, og hvis den blå
graf er under den røde, så er holdet foran i forhold til tidsplanen.
(Busch, 2011) (Scrum Alliance, 2015).
SWOT
SWOT (Strengths, Weaknesses, Opportunities, Threats) er et analytisk
værktøj som man kan gøre brug af i forbindelse med en virksomhedsanalyse. En SWOT-analyse giver et overblik over interne faktorer, såsom virksomhedens styrker og svagheder, og eksterne faktorer som muligheder og
trusler i omgivelserne.
En SWOT-analyse hjælper en til at evaluere en virksomhed og drage konklusioner vedrørende denne. Det kan blandt andet være om virksomheden har nogle kerneydelser og -kompetencer eller styrker, som man skal
lægge særlig vægt på fremover.
Kerneydelse er det som man forbinder virksomheden med, og som er
15
virksomhedens primære formål. Disse kerneydelser er som regel forbundet med ejeren af virksomheden, og kan derfor siges at være en form for
kompetencer. Det kunne for eksempel være at ejeren af en tøjbutik havde
stor erfaring indenfor detail-branchen, og derfor var en effektiv sælger,
hvilket så ville være en kerneydelse i dette eksempel.
Udover at gøre en opmærksom på virksomhedens styrker, vil man også
kunne drage konklusioner vedrørende eventuelle svagheder, og hvad der
bør gøres ved dem.
Når man har udarbejdet en SWOT-analyse kan den bruges som udgangspunkt for forskellige planer og opgaver som man vil møde senere hen i
forbindelse med virksomheden.
(kilde: http://toolbox.systime.dk/index.php?id=588)
Benchmarking
Benchmarking går i sin helhed ud på at holde konkurrenter op imod
hinanden og sammenligne dem med hinanden eller sin egen løsning. På
den måde kan man få indsigt i hvilke mønstre der er gældende inden for
netop den industri.
Der kan være mange årsager til at foretage en benchmarking øvelse.
Benchmarking kan benyttes hvis klienten ikke har sit eget produkt endnu.
I den sammenhæng benytter man benchmarking til at få indblik i konkurrenternes styrker og svagheder. Med styrkerne og svaghederne i baghovedet kan der udvikles et produkt der benytter konkurrenternes styrker
samt undgå de svagheder de har.
Benchmarking kan også benyttes hvis klienten allerede har et eksisterende produkt. Her ser man nærmere på hvordan klientens produkt klarer
sig i forhold til konkurrenternes, samt hvor der er plads til forbedring.
Når der skal foretages benchmarking er det vigtigt at have et klart mål
hvad man vil opnå med det, hvem man skal benchmark op imod og hvad
man vil sammenligne.
Der er flere måder at sætte sin benchmarking-analyse op. Enten i form
af en simpel tabel, eller en detaljeret analyse hvor man går i dybden med
konkurrenternes styrker, usability, serviceydelser osv.
En af ulemperne ved den detaljerede analyse i forhold til tabellen er at
det ikke er lige så let at sammenligne de endelige resultater.
(Allen & Chudley, 2012)
16
Målgruppespecificering
Ved at specificere sin målgruppe, kan man få en bedre forståelse for målgruppens holdninger og præferencer, og derved skabe bedre forhold når
man skal kommunikere med målgruppen. Når man har specificeret sin
målgruppe, kan man anvende de data fra ens målgruppe til at skabe retningslinjer for bl.a. ens designmæssige og kommunikative elementer.
Et af værktøjerne man kan benytte til at specificere sin målgruppe er kulturanalyse. Efter man har undersøgt og dokumenteret sin målgruppe kan
man beskrive den via en modellæser eller persona, som kan anvendes til
udviklingen af sin løsning.
Segmenteringskriterier
For at finde frem til sin målgruppe er der forskellige kriterier som man
kan opbygge sin målgruppe ud fra.
• Objektive kriterier
Disse kriterier er fysiske attributter som geografi og demografi, og er
kendetegnede ved at målgruppen kun i mindre grad kan påvirke disse.
• Subjektive kriterier
Disse kriterier er adfærdsmæssige attributter, som for eksempel. adfærd, interesse, livsstil, holdninger, socialklasse og personlighed.
I modsætning til de objektive kriterier, har målgruppen lettere ved at
påvirke de subjektive kriterier end de objektive.
• Adfærdsmæssige kriterier
De adfærdsmæssige kriterier bestemmes ud fra folks konkrete handlinger. Man kan så gennem disse handlinger forsøge at opnå forståelse
for, hvad folk kan være interesserede i og hvorfor.
• Psykografiske kriterier
De psykografiske kriterier er en sammensætning af psykologiske og
demografiske kriterier, som man forsøger at måle og analysere.
(Busch, 2011)
17
Informationsarkitektur
Informationsarkitektur omhandler måden man opdeler, organiserer,
samt placerer alt den information og de links som findes på en hjemmeside. Nogle hjemmesider har meget information, andre lidt, men de har det
til fælles at hvis informationen ikke bliver organiseret ordentligt, bliver
det højst sandsynligt en dårlig oplevelse for brugere af hjemmesiden.
Brugere af hjemmesider har nemlig ofte en forventning til opstillingen af
hjemmesider. Det er derfor vigtigt at imødekomme disse forventninger
ved at holde en god struktur, opbygge et hierarki af menuer og indholdssider, samt sørge for at hjemmesidens funktioner ikke har tvetydige navne
eller udseender.
Kort fortalt betyder det, at informationsarkitektur er det værktøj som kan
afgøre om en hjemmeside er brugervenlig eller ej. Uden at overveje informationsarkitekturen på en hjemmeside, risikerer man at skabe en side
hvor tingene ikke hører sammen, hvilket kan skræmme potentielle brugere væk. Et eksempel på dårlig informationsarkitektur kan være en hjemmeside som sælger hvidevarer, hvor de har valgt at opdele hvidevarerne
indenfor køleskabe, opvaskemaskine og så videre i hjemmesidens navigationsbar. Et bedre eksempel ville være at lave en knap i navigationsbaren
som hedder hvidevarer, og lave det til en dropdown-menu med alle kategorier indenfor. Dette giver mere plads i navigations baren til sider som:
‘kontakt’, ‘find varehus’ eller andet.
Praktisk organisering:
For at komme i gang med informationsarkitektur, er det vigtigt at få klargjort hvilken information der skal være på siden.
Hvis du har en eksisterende hjemmeside, kan man lave en indholdsopgørelse, hvor man bruger et regneark til at systematisere hjemmesidens
grundinformation.
Men hvis der skal laves en ny hjemmeside kan man gøre en masse ting,
som f. eks. tale med kunden, som kender til emnet, læse alt om emnet,
læse reklamer og tilbudsaviser, interviewe målgruppen eller hente idéer
fra hjemmesider inden for samme genre.
Når man har arbejdet sig frem til hvilke informationer der skal være på
hjemmesiden, er det tid til at strukturere dem. Ofte bruger man hierarkier til at skabe et overblik over al informationen. Det starter med et bredt
overblik, men bliver senere mere specifikt gennem undermenuer og
indholdssider. Her begynder informationsarkitekturen også at opdele de
forskellige sider og information i kategorier, for derefter at rangere deres
vigtighed for hjemmesiden. De generelle kategorier bliver rangeret højere
end de sider som indeholder information der er mere specifik.
18
Kategorierne bliver også navngivet på en beskrivende og sammenhængende måde, så det er nemt for en udvikler, designer el. lign. at henvise til
den samme ting.
Websidestrukturer
Hjemmesider er bygget op ved hjælp af strukturer som giver brugeren
en fornemmelse af hvordan man har organiseret indholdet. De tre mest
anvendte strukturer er sekvenser, hierarkier, og web.
Sekvensen:
Sekvensen er den mest enkle måde at organisere information på en hjemmeside på. Strukturen kender man fra f. eks. bøger og magasiner, hvor
man er nødt til at læse én side af gangen, før man kan gå videre til den
næste.
Denne struktur begrænser brugerens interaktionsmuligheder, men gør
det dog nemt for brugeren at forstå, da han/hun oplever den rigtige rækkefølge på siden.
En moderne udgave af ‘sekvensen’ kan være parallax, som oftest er bygget omkring det at fortælle en historie. Brugeren ‘scroller’ nedad på siden,
hvor hvert scroll aktiverer den næste side information, selvom hver side
af information egentlig hænger sammen, som én lang side.
Hierakiet:
Hierarkiet er en meget anvendt struktur på hjemmesider. Det er med til at
organisere komplekse oplysninger, ved at inddele informationen i menuer og undermenuer. Man kan vælge at se på det som ‘lag’, hvor det første
lag for eksempel. kan være “hvidevarer”, det næste lag kan være “vaskemaskiner”, det næste lag er et bestemt mærke af vaskemaskiner, og laget
efter dette kan være en kategorisering som “energimærke”, “pris” eller
lignende. Disse lag er ofte nemme at forstå for de fleste brugere, da de er
velkendte med kategorier, især inden for virksomheders organisationsdiagrammer.
Selvom informationen bliver opdelt i menuer, undermenuer og dertilhørende kategorier, skal det ikke være begrænsende for brugeren. Det skal
være muligt at bevæge sig fra en undermenu på siden til en anden. Dette
kan f. eks. klares ved hjælp af en dropdown-menu. Dette er med til at skabe flere globale navigerings links, så brugeren ikke skal tilbage til forsiden
for at finde ny information.
Selvom at denne struktur bliver anvendt ofte, så er den ikke altid så egnet
til produkter, hvor oplevelsen er det primære formal med siden.
19
Webstrukturen:
Denne struktur er kendetegnet ved ikke at have særligt mange begrænsninger, når det kommer til at kunne bevæge sig rundt på siden. Formålet
med dette er at brugeren skal have lov til selv at vælge retningen, samt
bestemme hvilke sider han/hun associerer med hinanden. Dette gør det
muligt for brugeren at følge sine egne indfald, og ikke blive påvirket til at
besøge bestemte sider.
Det kan dog ende med at være forvirrende, uforudsigeligt og/eller svært
at forstå for brugeren, hvis der er for få “guidelines” som brugeren kan
følge.
I praksis kan de tre strukturer kombineres. De hierarkiske sider kan
skabe grundstrukturen, hvor sekvensen f. eks. kan være området af siden
hvor man betaler for et produkt. Her følger brugeren en proces fra indkøbskurven, til kontoinformation, til betaling og sidst til faktura. Alt sammen information/data som gemmes i en database.
Til sidst bruges webstrukturen for at give brugeren mulighed for at bevæge sig på tværs af sider. Det er dog vigtigt ikke at overdrive dette, så informationsarkitekturen ikke skaber muligheden for at bevæge sig rundt på
siderne så meget at brugeren mister overblikket.
(Busch, 2011)
Wireframes
Wireframes er illustrationer/diagrammer der danner rammen om hjemmesidens komposition og
informationsarkitektur.
Derfor fungere Wireframes
som skridtet mellem informationsarkitektur og det endelige
produkt.
Formålet med wireframes er at
få et indblik i funktionaliteten
af navigations- og interaktions
elementer tidligt i processen.
I forretningssammenhæng benytter man Wireframes tidligt i
udviklingsprocessen, til at teste
sidens informationsarkitektur
med henblik på interaktion og
navigering.
Årsagen til dette er at det er en
god måde at finde fejl på, samt
det er billigere at rette de fejl
Figur 2 - Wireframe af produktsiden
tidligere i processen.
20
Når der skal designes Wireframes er det vigtigt at have nogle klare ideer
om hvem brugerne er, samt hvilke mål de har når de benytter det endelige produkt. Derudover skal man have en vision om hvad virksomhedens
mål med produktet er. En klar informationsarkitektur samt ideer til designet. Alt dette resultere i bedre wireframes med klare retningslinjer.
Herefter foretages en prioritering af indholdet og undervejs holdes prioriteringen op imod de retningslinjer der er fundet frem til.
For hver ting på prioriteringslisten laves en blok i wireframen. Når alt ens
indhold er sat ind i wireframen indsættes tekst til de passende elementer.
Til sidst holdes wireframen op imod retningslinjerne igen og det gøres
klart hvor brugernes mål er og hvor virksomhedens mål er på wireframen.
(Allen, J & Chudley, J 2012)
Retorik
Retorik handler om at formidle sit budskab, på en måde så modtageren
føler sig overbevist om at det der bliver sagt er sandt. Det kan blandt andet gøres ved at afsenderen virker som en sympatisk og troværdig autoritet, men samtidig formulerer og argumentaterer sig på en måde som
virker logisk og sandfærdig.
Appelformer
I det antikke Grækenland beskrev Aristoteles, retorikken og dens virkning. Her beskrev han også et hjælpemiddel som kunne gøre det nemmere at bruge retorik, nemlig Appelformerne. For hans tid gik appelformerne mest ud på at blive brugt igennem taler, men i dag kan appelformerne
blive brugt til mange forskellige produkter som har et budskab eller en afsender. Det kan være alt fra slogan, til plakater, til reklamer, både billeder
og film. En strategisk brug af disse appelformer, kan styrke dit produkts,
eller en persons, budskab samt troværdighed og omdømme.
Patos
Patos appellerer til følelserne hos modtageren, enten ved at tale til dem
eller ved brug af for eksempel. billeder.
Meningen med brugen af patos er at påvirke målgruppens følelser, men
uden at det bliver kvalmende. Det kan ses i for eksempel. skræmmekampagner for cigaretter, men det kan også være følelser gennem humor eller
velgørenhed. Hvis man bruger patos fornuftigt, kan målgruppen relatere
til problemet hurtigt. På langt sigt kan patos blive for meget, og næsten
have den modsatte effekt, især hvis det ikke bliver bakket op af argumenter fra de andre appelformer.
21
Logos
Logos appellerer til modtagerens fornuft og tænkeevne, ved at give information eller stof til eftertanke om et givent produkt eller budskab. Kan
ofte ses som tekst, gerne til et billede af noget som appellerer til modtagerens følelser. Hvis vi tager udgangspunkt i det tidligere eksempel med
skræmmekampagner for cigaretter, så kan billederne af en ‘rygerlunge’
skabe følelser, men en dertilhørende tekst omkring kræft eller hvad det
koster for samfundet at have rygere, kan være med til at cementere det
budskab som der bliver sendt. Ofte virker patos hurtigere end logos, men
logos sørger ofte for at budskabet bliver hængende længere tid hos modtageren, da det sætter tankerne igang.
Ofte ser man at produkter eller budskab bliver sat i forbindelse med
kendte personer. Kendte personer har dog varierende effekt hos modtagere, da folk ofte har en forudbestemt holdning til disse personer. Hvilket
omhandler patos. Men hvis man skal bruge logos fornuftigt, er det bedre
at tage fat i en troværdig autoritet, som er uddannet eller ekspert indenfor
området. Det samme gælder alt information eller statistik som man kan
vælge at bruge, for at fremme logos. Hvis denne information slet ikke er
rigtig, ikke er undersøgt ordentligt, eller der er blevet arbejdet med resultatet, så kan det have en helt igennem ødelæggende effekt for det budskab
man prøver at sende.
Ethos
Som nævnt før, så er det vigtigt at bruge de 3 appelformer sammen. Ethos
appellerer til følelser, men på en anden måde end patos. Her handler det
om modtagerens følelser over for afsenderen. Det skal altså være klart
over for modtageren om hvorvidt det er en troværdig person eller kilde,
som bringer budskabet frem.
Med udgangspunkt i eksemplet på skræmmekampagner over for rygere,
kan modtageren af dette budskab nemt forstå de argumentationer der
stammer fra patos og logos, men hvis afsenderen af skræmmekampagnen
ikke er en troværdig kilde, kan det have den omvendte effekt. I virkeligheden er disse kampagner støttet af blandt andet, Sundhedsstyrelsen, Kræftens Bekæmpelse og Hjerteforeningen. Det vil altså for de fleste mennesker umiddelbart stå klart at dette er foreninger som har en aktiv rolle i at
sørge for at vi som befolkning er sunde og raske. Det er med til at styrke
troen på at det er troværdige kilder og information som der bliver sendt
ud i skræmmekampagnerne. For nogle mennesker kan det have modsat
effekt, hvis for eksempel. de ved at Sundhedsstyrelsen er statsejet, og dermed har et problem med at staten skal bestemme over deres forbrug af
tobak. Det kan også være negativt hvis afsenderen havde været en anden
kilde, som for eksempel. firmaer der sælger nikotintyggegummi, så ville
en del personer overveje om det er en taktik for at få flere personer til at
købe nikotintyggegummi. Men det kan også have den effekt at nogle modtagere begynder at se disse firmaer i et positivt lys, for at tage vare på/
22
være opmærksomme på deres helbred. Det handler altså både om troværdighed, men også om formålet bag afsenderens budskab.
Som nævnt før er retorik, og den samlede brug af appelformer, en god
måde at fremme sit budskab. Det kan også være en måde at brande sit
firma eller et produkt på, som for eksempel. Nike, der gennem deres ‘Just
Do It’-reklamer har skubbet til nogle menneskers egne holdninger om at
de er svage eller dovne, og at de i stedet kan rejse sig og blive stærke.
Retorik handler også om hvordan man håndterer de forskellige medier,
som for eksempel. video, hvor det handler om følelsesmæssige virkemidler eller effekter. Billeder, eller levende billeder, er ofte det medie som
relaterer hurtigst til folks følelser, hvor tekst dertil kan være det som appellerer til folks tænkeevne. Til sidst kan placeringen af et logo være med
til at cementere, hvem afsenderen er, samt troværdigheden og formålet
for budskabet.
(Busch, 2011)
Lisbeth Thorlacius’ kommunikationsmodel
Denne models primære formål er
at fungere som et samlet redskab til
planlægning og analyse af den visuelle kommunikation på websites.
Modellen forklarer både de visuelle,
æstetiske og funktionelle aspekter
af webkommunikation. Modellen
kan både anvendes i produktionsog analysesammenhæng, og skaber
sammenhæng mellem de forskellige fagområder og teorier som skal
anvendes,
når man udvikler et nyt website.
Figur 3 Lisbeth Thorlacius’ kommunikationsmodel
(http://www.pjokket.dk/portfolio/lisbethThorlacius.jpg)
Thorlacius’ kommunikationsmodel består af flere forskellige elementer,
som alle har udgangspunkt i
pragmatisk semiotik:
Faktisk afsender
Den faktiske afsender er den som reelt står bag kommunikationen til
modtageren. Dette er typisk produktejeren, som man kan udspørge og
derved få defineret hvilke værdier og budskaber den faktiske afsender
ønsker at kommunikere. Det er ikke altid synligt i slutproduktet hvem den
faktiske afsender er.
Implicit afsender
Den implicitte afsender er derimod den afsender, som altid er synlig i pro23
duktet. Denne afsender kan man analysere sig frem til, fordi den synliggøres gennem tekst, farver, billeder og andre visuelle elementer man vælger
at anvende. Dette kendes også som den ekspressive funktion.
Den implicitte afsender er også forbundet med emotive funktioner, som
omhandler forholdet mellem afsender og modtagers følelser. De emotive
funktioner handler altså om, hvordan afsenderen påvirker modtagerens
følelser.
Implicit modtager
Den implicitte modtager er den modtager, som den faktiske afsender
ønsker at kommunikere med gennem produktet. Den implicitte modtager
kan kun fremanalyseres gennem en analyse af produktet, da det blot er
den ønskede modtager, og ikke nødvendigvis den faktiske.
De kommunikationsfunktioner som knytter sig til modtageren, og kan
analyseres ud af selve produktet, er den konative og de interaktive funktioner. Den konative funktion handler om, hvordan afsender forsøger
at påvirke modtagers adfærd, til at foretage en bestemt handling. Det er
typisk direkte opfordringer, som for eksempel teksten “Tilmeld dig vores
nyhedsbrev!” på en hjemmeside. I forbindelse med websites er den konative funktion typisk skjult i de interaktive muligheder.
Faktisk modtager
Den faktiske modtager er den modtager som oplever produktet. Denne
modtager kan der ikke analyseres frem til ved hjælp af produktet, hvor
der kræves en receptionsanalyse, som kan foretages på flere måder:
• Den kognitive reception, som undersøger hvad modtageren forstår ved
websitet.
• Den konative reception, som undersøger effekten af afsenders opfordringer, som nyhedsbrevseksemplet fra før.
• Den emotionelle reception, som undersøger hvad modtageren rent
faktisk føler i forbindelse med produktet.
Produkt
Produktet i denne model dækker både indholdet og udtrykket af ens samlede produkt. Indhold og udtryk kommunikeres via de æstetiske funktioner, som i modellen opdeles i to funktioner:
• Den formale funktion, som skal leve op til de krav og standarder der er
for, hvordan et website skal se ud.
• Den uudsigelige æstetiske funktion er det innovative indhold på websitet, som gør at produktet formidler en bestemt æstetisk oplevelse, og
skiller sig ud fra mængden.
Kontekst
Konteksten henvender sig til den sammenhæng produktet indgår i. Det
dækker den situation som teksten læses i; “den situationelle kontekst”, og
24
det teksten udsiger; “den tekstlige kontekst”. (Thorlacius 2005)
I konteksten er der tilknyttet to kommunikationsfunktioner:
• Den referentielle funktion, som fremgår når der bliver henvist til noget
uden for teksten, ofte gennem en logosappel.
• Den intertekstuelle funktion, som handler om tekstens forbindelse til
andre tekster. Dette kan for eksempel. være når der i teksten henvises
til en anden tekst.
Medie
Mediet er det som gør kommunikationen mellem afsender og modtager
mulig. Der knytter sig to funktioner til mediet:
• Den fatiske funktion, som sørger for at modtager bliver i situationen.
Dette udføres for eksempel. på websites ved at have et gennemgående overordnet design på alle sider, så læseren ikke er i tvivl om det er
samme afsender.
• De navigative funktioner, som sørger for at fastholde modtageren i
situationen ved at styre, hvordan modtageren opfatter produktet. Disse
funktioner udføres gennem informationsarkitekturen.
Kode
Koden er et udvalg af tegn som igennem deres sammensætning får en
bestemt betydning for modtageren. Koden er altså et system af tegn, hvor
hvert enkelt tegn er tildelt en betydning, for eksempel. et sprog. For at der
kan foregå kommunikation mellem afsender og modtager, er det en forudsætning at begge parter har samme kode.
Til koden er der tilknyttet to funktioner:
• Den metakommunikative funktion, som fremstår når man taler om
sproget gennem sproget, for eksempel. hvis der skal sikres at modtager
har samme kode som afsender.
• Den intersemiotiske funktion, som fremstår når man anvender et kodesystem for at forklare et andet, eksempelvis gennem en metafor.
(Busch, 2011)
Farvepsykologi
Farvepsykologi handler om de tanker og følelser brugerne får ud af at
kigge på bestemte farver. Det er ikke altid noget som man bemærker, men
derimod opfatter underbevidst. Det er værd at huske at enkelte farver
kan have deres egne betydninger for hver enkelt person, eller at farverne
har en anden betydning i andre lande eller kulturer. Derudover kan hver
farve have flere forskellige betydninger.
Det er derfor vigtigt ikke at sætte al sin tillid til én enkelt farve og den
betydning man vil have fra den, men derimod kombinere farverne og se
det som en helhed, for bedre at appellere til sin målgruppe. Man kan også
fokusere på nuancerne af forskellige farver, om det for eksempel. er lyse
eller mørke farver man benytter sig af på sin side, da hver farves nuance
25
kan have forskellige meninger, og at de som en helhed kan skabe et mørkere (mere seriøst), eller et lysere (mere livligt/friskt) tema for siden.
Rød
Rød er ofte en farve for noget fysisk, som for eksempel. mod og styrke,
gerne noget maskulint. Men det kan også give negative tanker, som aggressivitet eller blod. Det kan også være en farve for nærvær, på godt og
ondt, som man for eksempel. ser med Røde Kors, som er gode da de udøver hjælp til ofre for krig, men kan give negative tanker da man kommer
i tanke om ofrene og krigen, som man ville ønske ikke fandt sted.
Blå
En blå farve handler mere om tanker og intellekt. En mørk blå vil stimulere ens tanker, mens en lys blå beroliger sindet og styrker koncentrationen.
Blå forekommer som en venlig og tillidsvækkende farve. Ses ofte hos banker, revisor, mægler eller andre der skal håndtere dine penge, men kan
også virke kold eller uvenlig overfor nogle mennesker. Blå kan også betyde intelligens, kommunikation, pligt eller overblik, men kan også virke
uempatisk.
Grøn
En grøn farve betyder ofte ro og balance. Meget grønt kan signalere naturlighed, men kan også hurtigt forekomme for kedeligt. Med en tilpas
mængde kan grøn være en farve der signalerer harmoni og det naturlige
valg. Grøn ses ofte i knapper til Call-to-Action, eller som farve på knapper
hvor man betaler for eller accepterer et produkt, for eksempel. på webshops, dankortterminalen eller når du modtager et opkald fra en ven.
Grå
Grå er en neutral farve. Den ses ofte som en kedelig farve, men kan i de
rette mængder, eller under rette forhold, falde ind i mængden og virke
helt tilpas.
Sort
Sort er en blanding af alle farver. Det kan indkapsle objekter og skabe en
barriere fra andre omkringliggende farver, så det er nemmere at holde
flere farver adskilt.
Sort kan betyde elegance og substans, men også undertrykkelse eller sorg.
Hvid
Hvid er renhed, enkelthed og klarhed, men kan også være kulde eller sterilitet.
En hvid baggrund kræver at man virkelig overvejer placeringen af andre
farver og objekter.
(Busch, 2011)
26
Komposition
Komposition omhandler sammensætningen af alle elementerne, så de
danner en størrer helhed. Når man taler om komposition i webdesign er
der flere forskellige teorier man kan anvende, enkelt layout, det gyldne
snit og z-layout.
Det enkle layout består i at fjerne alle distraktioner fra brugeren. det gøres for at øge chancen for at brugeren
interagere med et bestemt element,
læse en bestemt tekst, eller generelt
fremhæve et element.
Det gyldne snit omhandler hvordan
man komponere sine elementer i forhold til hinanden.
Et typisk eksempel på brug af det
gyldne snit i webdesign kunne være en Figur 4 Det gyldnesnit (http://
produktside.
www.kprobbins.com/wp-content/
Hvor man har produktbillede i to tred- uploads/2012/01/Fibonacci_spiral.jpg)
jedele af skærmbilledet og beskrivelse
i den sidste tredjedel af billedet
Z-layout er bygget op omkring den
måde man læser en tekst på. det vil
sige fra venstre til højre. Dette bruges
til at føre brugerne fra element til element. I web sammenhæng kunne det
være fra logo, gennem menuen, ned
til noget indhold og videre til et call to
action. Z-layoutet kan også udvides til
et zig-zag layout der som navnet antyder fører brugeren gennem indholdet i
et zig-zag mønster.
(Busch, 2011)
Figur 5 Z-layout (http://www.luckyday.it/
wp-content/uploads/2012/10/1.jpg)
Typografi
Typografi har mange forskellige virkemidler, det kan være en måde at
lede øjet hen på det man gerne vil have brugeren skal se, dette kan gøres
via forskellige fonte, farver eller vægten på fonten.
Et eksempel på at lede øjet hen til det man gerne vil se kunne være en
overskrift, oftest har overskriften en anden størrelse og vægt end brødteksten. Det skal være det første brugeren ser i den sammenhæng overskriften bliver brugt i. Andre typografisk virkemideller man kan bruge i
forhold til netop overskrifter er at bruge en anden font og/eller farve end
brødteksten, det får overskriften til at blive mere synlig.
Derudover benyttes typografi også til at formidle budskaber, fonten skal
27
stemme overens med det budskab man gerne vil formidle eller den identitet man gerne vil ramme.
For eksempel benytter apple sig af en ren og simpel font, der stemmer
overens med deres produkters design og kvalitet.
Hvor imod en legetøjsforretning ville vælge en font med et mere barnligt
og legende udtryk.
(Thorlacius, 2006 i Busch, 2011 s. 74)
Brugertest
Hvad er brugertest og hvad kan det bruges til?
En brugertest består i at man inviterer brugere til at teste det produkt
man er ved at udvikle.
Når man skal udvikle et produkt er det vigtigt at inddrage brugerne i
udviklingsprocessen. Derfor er det vigtigt at udføre brugertest, og det er
ideelt at udføre brugertest mere end en gang igennem hele udviklingsprocessen, da der hele tiden vil blive foretaget ændringer i forhold til design
og måske funktionalitet.
Brugertest kan også vise hvad der fungerer og hvad der ikke fungerer i
produktet, her er det vigtigt at tage alt det input brugerne giver, reflektere over det, og revidere produktet på de fronter hvor brugerne har mødt
problemer.
Et eksempel på hvorfor det er godt at udføre brugertests:
En designer har lavet en menu, bestående udelukkende af ikoner som
han mener er fyldestgørende, og fortæller hvad brugeren kan finde ved at
klikke på dem. Men da det kommer til brugertesten, er der ikke én bruger
der kan finde menuen. Her er det tydeligt at der skal foretages ændringer
i forhold til den endelige løsning.
Derfor designes der en helt ny menu, dog med samme ikoner, men med
tilført tekst og øget synlighed. Da der bliver afholdt brugertest igen - kan
alle brugere finde menuen, og navigere rundt. Da ingen person er ens, vil
der altid være nogen som tænker eller reagerer anderledes end man selv
gør, hvilket gør brugertests til et nyttigt værktøj for at finde forskellige
adfærdsmønstre.
Udførsel af brugertest
Når man skal udføre en brugertest bryder man den oftest ned i fire trin:
planlægning, udførsel, analyse og rapportering.
Typisk ved udførelsen af en brugertest er der opstillet nogle opgaver som
brugeren skal løse i forhold til det område af produktet der skal testes. Det
kunne for eksempel være: “Kan brugeren finde ud af at oprette nye produkter i webshoppen?”. Udover at finde sine mål for brugertesten, skal
man også finde ud af nogle mere praktiske ting: Hvem skal vi rekruttere
til testen? Hvor skal testen finde sted? Hvilken platform skal det testes på?
Skal det være sketches? Mockups? Low fidelity prototype?
28
Når man har afklaret disse ting, skal der laves en plan for hvordan testen
skal afholdes, så brugerne bliver stillet overfor de samme spørgsmål og
opgaver, inden for den samme tidsramme.
(Allen & Chudley, 2012 p. 73-94)
Storytelling
Storytelling indenfor brands og branding, kan være et stærkt strategisk
element. Det er en måde for firmaer at kommunikere holdninger og følelser, for bedre at relatere til deres målgruppe. Man ser det blandt andet
med Nike, hvor deres slogan er ‘Just do it’. Dette slogan, sat sammen med
deres reklamer der omhandler viljestyrke og fitness, kan give en masse
atleter og håbefulde atleter følelsen af at alt er muligt, så længe man har
lysten og kampgejsten til at gøre det.
Pludselig bliver Nike til mere end bare et firma der sælger sportstøj og
sko. Det er et firma som motiverer og hjælper dig i dit vægttab, med at
blive en bedre atlet, eller hjælper med at give en bedre kondition og et
sundere liv.
Storytelling, samt det budskab du sender, kan være med til at forme dit
brands identitet. Det kan skabe fokus og positive holdninger omkring dit
brand, men kan også blive negativt, hvis det bliver brugt for meget eller
det begynder at virke mindre og mindre sandfærdigt.
For at skabe en bedre story, kan man bruge historiefortællingens fire elementer.
(Fog, Budtz & Yakaboylu. 2004)
Historiefortællingens fire elementer
De fire elementer i historiefortælling er en guide til at skabe en god historie. De fire elementer sørger for at man overvejer hvilken slags historie
man har. Hvis en af disse fire elementer ikke er helt gennemtænkt, eller
mangler, kan det betyde at man har en svagere historie. Det er derfor godt
at analysere sit manuskript på denne måde, så man er sikker på ens egen
historie indeholder de elementer som kan skabe en god historie.
(Fog, Budtz & Yakaboylu. 2004)
Budskabet
Når det kommer til en historie er det vigtigt at have et budskab. Især når
det kommer til branding, da det vil være åndssvagt for et firma at fortælle
en historie uden at være forberedt på hvilket budskab man sender.
Det centrale budskab i sin historie er også det man kalder for præmis.
Præmissen er det endelige resultat af en historie, for eksempel. at det
gode vinder over det onde, som er præmissen i rigtig mange historier.
Budskabet bliver stærkere ved at fortælle en historie og ved at bygge op til
denne løsning, end hvis man bare afsender budskabet for sig selv.
Desuden er det vigtigt at sørge for at man kun fokuserer på et centralt
29
budskab. Hvis man begynder at involvere flere forskellige budskaber,
risikerer man at ende med en uklar og rodet historie.
(Fog, Budtz & Yakaboylu. 2004)
Konflikten
Konflikten er en essentiel del af en spændende historie. Uden denne bliver historien ensformig og uden nogle udfordringer, hvilket gør det svært
for modtageren at blive fanget af historien. For eksempel. ville historien
om Robin Hood være ret kedelig, eller måske endda ikke at finde, hvis
rigdommen i Nottingham allerede var fordelt ligeligt.
Konflikten sørger altså for at budskabet bliver en integreret del af historien. Budskabet med Robin Hood historien er at promovere socialisme og
at alle burde være på lige fod. Men dette kan være svært at understrege,
hvis ikke Robin Hood skulle tage fra de rige og give til de fattige.
Det er derfor vigtigt at have en konflikt. Ikke alene understreger den budskabet, men giver også modtageren en spændende historie, hvor han/hun
oplever en forløsning ved at se konflikten blive ødelagt vha. budskabet.
(Fog, Budtz & Yakaboylu. 2004)
Rollefordelingen
Endnu en vigtig del af storytelling er rollefordelingen. Ofte fungerer en historie med en hovedperson, også kaldt en protagonist, som følger et mål.
Protagonisten, eller helten, får ofte hjælp igennem sin historie, enten fra
andre personer eller fra hans/hendes egne egenskaber. Hvis vi bruger eksemplet fra før, med Robin Hood, så er hans hjælpere både Lille John, og
de andre røvere, men også hans evne til at bruge bue og pil.
Men som nævnt før, så har alle gode historier en konflikt. Denne konflikt
bliver ofte skabt eller styret af en modstander, altså en antagonist. I Robin
Hoods’ historie er modstanderen Prins John, samt Sheriffen af Nottingham, som står i vejen for Robin Hoods mål om at stjæle fra de rige og give
til de fattige.
En god måde at få styr på de forskellige roller, samt hvad der spiller ind
på historiens forløb, er ved at bruge aktantmodellen.
(Fog, Budtz & Yakaboylu. 2004)
Aktantmodel
Aktantmodellen er en simpel måde at klargøre hvem og hvad har en rolle
i en historie. Med Robin Hood eksemplet kan man sætte Robin Hood in
som ‘subjekt’ og retfærdig og lighed til alle er ‘objektet’. Hans ‘modstander’ er Sheriffen af Nottingham, samt Prins John. Hans ‘hjælper’ er Lille
John og Robin Hoods egen kløgtighed, samt evne til at bruge bue og pil.
‘Giveren’ i historien er Kong Richard, som i slutningen af historien vender
hjem og stopper Prins John og giver fred og retfærdighed til ‘modtageren’,
som er Englands folk.
(Fog, Budtz & Yakaboylu. 2004)
30
Handlingen
Handlingen er selvfølgelig historiens gang. Det er her man fletter konflikt
og rollefordeling sammen med budskabet, for at skabe den gode historie.
Det handler selvfølgelig om at fortælle historien én del af gangen. Oftest
bliver hovedrollen introduceret først, samt baggrundshistorien for denne
person. Det er på denne måde man også får et indblik i hans/hendes forhold til konflikten og antagonisten, når de bliver introduceret.
Nogle historier starter også omvendt, hvor man får et indblik i konflikten
og i stedet bliver introduceret til protagonisten, og hans forhold til konflikten bagefter.
For bedre at skabe sin handling, kan man tage brug af berettermodellen,
som inddeler sin film i en spændingskurve. X-aksen viser spændingen i
løbet af filmen, hvor y-aksen beskriver tiden. Det ligner lidt en rutsjebane, som starter godt ud, med en introduktion af hvad der kan forventes.
Herefter bliver konflikten præsenteret og den bygger sig op mod et point
of no return, hvor man som seer gerne vil få en afslutning på problemet.
Konflikten stopper dog ikke med at vokse, før det ser ud til at være helt
umuligt at løse. Det er her klimaks gerne kommer i spil og resulterer i en
forløsning af konflikten.
Den ‘lykkelige slutning’ er i sigte og handlingen udtones, hvor man får lov
til at se hvilken effekt konfliktløsningen har på protagonisten og de elementer, miljøer og samfund som bliver mærket af dette.
(Fog, Budtz & Yakaboylu. 2004)
Stakeholder interview
Et interview med sin interessent er et vigtigt redskab, da man får indblik i
deres holdninger, tanker, mål og visioner for deres firma. Men det er samtidig en måde at få gjort det klart hvad de vil have ud af det samarbejde
de har indgået i.
Det kan også næsten være en øvelse i tillid, da interessenten føler at han/
hun får givet sin information videre og dermed stoler mere på at man går
den retning han/hun ønsker med projektet.
En interessent er en person som har indflydelse på det projekt der bliver
arbejdet på. Da nogle interessenter ikke altid er med inde over det daglige
arbejde, så kan det være smart at interviewe dem og få et indblik i hvad
deres holdninger og visioner er for projektet, så man ikke har brugt lang
tid på projektet og er gået i den forkerte retning med det.
Når du skal udføre et interview med interessenten, skal der forberedes en
del ting. Det er selvfølgelig vigtigt at planlægge en dag med interessenten,
hvor interviewet skal udføres.
31
Men det vigtige her er især at interessenten har tid til interviewet. Det
skal derfor gøres klart hvor lang tid man regner med at bruge interviewet
og derefter tilføje omkring 30 minutter, for at være på den sikre side.
Det er også en god ting at starte med at forklare hvad man regner med at
snakke om og i hvilket sammenhæng det skal bruges. De fleste personer
er beæret over at deltage i det, men det er godt at forklare formålet med
det, så personen er mere komfortabel med situationen.
Man skal huske at optage interviewet, enten ved brug af et kamera eller
en lydoptager. Det kommer an på ens egne præferencer eller om man har
brug for video eller lyd til noget specielt. Det essentielle er at man får optaget det, så man ikke går glip af svar som kan være vigtige. Nogle gange
kan det være svært at nå at transskribere det hele og der er altid en risiko
for at man hører forkert.
Dine spørgsmål skal være formuleret rigtigt, så interessenten ikke bare
svarer med ja/nej i løbet af hele interviewet.
Spørgsmålene skal åbne op for en god forklaring, da det giver bedre og
mere oprigtige resultater end at ‘putte ordene i deres mund’.
Et eksempel kan være at man i stedet for at spørge : ‘Er dette en god idé?’
så spørger dem om ‘Hvorfor er dette en god idé?’.
Formuleringen af dette spørgsmål gør at interessenten er nødt til at forklare sit valg, og hvis tilfældet er at interessenten ikke syntes det er en god
idé, skal han/hun nok give udtryk for det, samt begrunde det. Hvis han/
hun ikke begrunder det, er det nemt at tilføje et ‘Hvorfor?’.
(Allen & Chudley, 2012)
Video
Berettermodellen
Når du vælger at bruge film, er det vigtigt at det handler om at fortælle en
historie. Den gode historie kan hjælpes på vej af Berettermodellen.
Man ser Berettermodellen som en
spændingskurve for film. Man kan
vælge at se dette som en retningslinje
for sin film, uanset længde eller genre.
Selvom man ikke behøver at sætte al
sin tillid til modellen, er den stadig god
at benytte sig af, for at få et indblik i sin Figur 6 Berettermodellen
egen fortællings spændingskurve. Den (http://ibog.litteraturenshuse.systime.dk/
hjælper også med at koncentrere sig om fileadmin/filer/ubeskyttede_filer/hoejbillesin historie, spædingen i den, samt at få der/Berettermodellen.png)
sit budskab ud.
Man ser anslaget og præsentationen
som en fremvisning af miljø og per32
soner. Udviklingen og point of no return, er konflikter, problemer, mål
og kamp. Det er her historien skal begynde at blive så spændende eller
rørende at ’seeren’ er opslugt af historien og skal se enden på det. Konfliktoptrapningen og klimaks, er her hvor de problemer, mål eller konflikter
der er opstået undervejs stiger og stiger. Når de når deres højeste plan,
klimaks, kan det ofte give ’seeren’ tvivl om en forløsning, lige inden det
sker.
Udtoning er det sidste punkt i modellen. Det opstår efter klimaks, når man
ser frem mod en lykkelig slutning. De fleste problemer, mål eller konflikt
er ofte overstået, eller som navnet tilkendegiver, under udtoning. Den
sidste del ses som den lykkelige slutning, hvor man for eksempel. ser løsningen på de problemer eller konflikter der har været undervejs. Men det
kan også vise hvad slutresultatet af forløsningen eller den happy ending
er.
Personer
Personer i film, video og reklamer kan være altafgørende. Mange historier der skal fortælles har ofte udgangspunkt i mennesker, eller menneskelig kontakt. Især i reklamer, hvor en persons reaktion til et givent produkt
ofte ses og fortolkes af ’seeren’.
Når det kommer til en filmisk fortælling, er det personerne som er med
til at skabe empati eller interesse hos ’seerne’. Det kan ske ved at ’seerne’
identificerer sig selv med personen eller de problemer han/hun har.
’Seerne’ bliver trygge og overbeviste, hvis de føler at rolleindehaveren
eller det viste miljø er troværdigt.
Personer i reklamer skal, i forhold til interview, virkelig fremkomme troværdige da vi jo inderst inde godt ved at tømreren i reklamen er en skuespiller, men hvis han gør et godt job vælger vi at tro på det. Et interview
er anderledes, da vi jo kan regne med (og se) at det er den rigtige person
der er vidst frem og taler. Men i et interview skal rolleindehaveren så i
stedet være opmærksom på hvad der bliver sagt, og om det der bliver sagt
er oprigtigt.
Man ser også at nogle produkter forbindes med kendte mennesker, ved at
de medvirker i reklamer, selv nogle gange uden rigtigt at vise produktet
frem. Det giver nogle mennesker en trang til at købe produktet, for at
være en del af den kendtes persons aura. De mennesker får altså en fornemmelse af at være en del af den kendtes persons historie eller succes.
(Busch, 2011)
Billedets formater/camera shots
• Extreme Wide Shot / total (b):
Beskrives ofte som et etablerende shot, da det viser det store overblik
og ofte får alle detaljer med. Man får som seer overblik over personer,
miljø og motiver, men kan også få et indblik i størrelse og afstand af
objekter/personer.
33
• Wide shot / total (a):
Viser ofte en person, gerne i kontekst med et andet objekt, som et hus,
bil eller lignende.
• Medium shot / halvtotal:
Viser ofte en persons overkrop og hoved. Bruges især meget til dialog.
• Close up / nærbillede:
Viser ofte en begrænset del af en person eller objekt, f. eks. et hoved eller et dæk, med meget lidt, eller intet, af omgivelserne rundt omkring.
• Extreme close up / detalje:
Viser ofte kun en enkelt del af en person eller et objekt, f. eks. et detaljeret shot af et ur på en persons håndled.
(Thurlow & Thurlow, 2013)
Storyboard
For at holde styr på fortællingen, kameravinkler og andre detaljer som
skaber din film, er den bedste måde at holde styr på dette et storyboard.
Et storyboard er en form for tegneserie som skal illustrere, meget simpelt,
hvordan ens film skal se ud. Hver scene eller ændring i filmen markeres
med sin egen rubrik i storyboardet. Man kan også bruge storyboardet til
at prøve at tegne lysforholdene i hver scene.
Ved hver rubrik kan man skrive detaljer om scenen, som for eksempel.
længden af scenen.
Et storyboard er altid vigtigt at sætte op til en film, da det skaber et bedre
overblik. Det handler om at planlægge alt godt, så man ikke mangler flere
forskellige scener eller effekter, når man engang skal redigere videoen.
Rule of Thirds / Tredjedelsreglen
Tredjedelsreglen er en retningslinje for hvordan du skal placere personer
eller objekter i en film eller et billede. Det er selvfølgelig en regel som du
kan bryde, men man skal have en god grund og en forståelse for reglen
for at gøre dette.
Hvis man ser på et billede og opdeler billedet i 3, lodret og vandret, så det
former et ’grid’, med 9 rubrikker,
så er det de 4 punkter hvor stregerne mødes, som er vigtige at have
fokus på. Disse 4 punkter er de
steder som vores øjne først ledes
hen, så det kan derfor være en stor
fordel at placere sine objekter eller
personer ved disse punkter. Det
kan også skabe fokus, hvis man
(Figur 7 Tredjedels reglen
placerer objekter langs linjerne, elhttp://photoinf.com/Golden_Mean/Michael_
ler for eksempel. en horisont eller
Fodor/Photo_School_-_Rule_of_Thirds/ruleet bjerg langs den nederste eller
ofthirds.jpg)
øverste lodrette linje.
34
Man kan godt vælge at placere en person midterst på billedet, men man
skal være opmærksom på at det kan få ’seeren’ til at kede sig, hvis man
bruger den teknik for ofte.
(Busch, 2011)
35
Analyse og problemløsning
Trend- og tendensanalyse
“Fashion with a cause”
En af de trends vi har undersøgt er “fashion with a cause”, hvor konceptet er at man igennem mode støtter eller giver udtryk for at man støtter
et formål, eller ønsker at skabe opmærksomhed omkring et specifikt
emne. Et af de mest populære eksempler på denne trend i nyere tid er
Livestrong-armbåndene. De gule silikonearmbånd blev først introduceret
i 2004, og har siden da solgt over 80 millioner eksemplarer ifølge et interview med Lance Armstrong. (http://theconversation.com/spin-lance-armstrongs-confession-and-livestrongs-future-11616)
Disse armbånd startede en global modetrend, hvor andre virksomheder
og organisationer også startede velgørenheds- og awarenesskampagner.
Et eksempel er Nikes “Stand Up Speak Up”-kampagne fra 2005, hvor forskellige fodboldspillere gik sammen i protest mod en række racistiske
hændelser i fodboldverdenen. For at skabe opmærksomhed omkring
dette problem, bar fodboldspillere kampagnens symbol; to sammensatte
armbånd - ét i sort og ét i hvidt. Disse armbånd var tilgængelige for alle
som ville støtte op om sagen.
Dette eksempel er blot et af mange, hvor mode er formidlingsredskabet.
(http://news.nike.com/news/thierry-henry-and-fellow-players-call-on-fansto-fight-racism)
Denne trend er især også populær på crowdfunding-sites som Kickstarter
og Indiegogo, hvor der er stor mulighed for forbrugere at vælge og støtte
netop det produkt de bedst identificerer sig med.
Armbåndsurets funktion
77 % af alle danske familier bruger smartphones, og med tallet stigende
væsentligt hvert år, går der ikke længe før alle ejer en smartphone. Derudover ejer 98 % af alle danske familier en mobiltelefon. (http://www.dst.
dk/da/Statistik/emner/forbrug/elektronik-i-hjemmet.aspx)
Med andre ord er det stort set alle som har adgang til en mobiltelefon,
hvor en af de mest simple, men også mest brugbare, funktioner er at kunne se hvad klokken er. Dette stiller spørgsmålet om armbåndsuret stadig
er relevant for den moderne forbruger.
Umiddelbart virker det som om at dets primære funktion, at se hvad klokken er, er ved at blive erstattet af mobiltelefonen. Ifølge en undersøgelse
fra 2010 foretaget af Mintel i Storbritannien, siger 14 % at de ikke har
brug for et armbåndsur, da de bruger deres telefon til at se klokken. Ifølge
undersøgelsen er dette tal fordoblet hos folk under 25 år, hvilket i undersøgelsen er krediteret til teknologien:
“Many consumers have grown up with technology and are just as likely to
associate the notion of checking the time with a mobile handset as with a
36
watch and as they grow older this mindset will accompany them.“
(http://www.mintel.com/press-centre/technology-press-centre/is-time-ticking-for-the-watch-one-in-seven-brits-claim-they-have-no-reason-to-wearone)
Trods teknologiens store indflydelse på tidsforvaltning, er armbåndsuret
stadig populært. Undersøgelsen viser, at omkring ni ud af ti voksne ejer et
armbåndsur, og at hver femte ejer mere end et ur, til forskellige lejligheder.
Tallene fra denne undersøgelse kan tyde på, at armbåndsurets primære
funktion har ændret sig, med smartphonens udbredelse. Så hvad er det et
armbåndsur har, som en smartphone ikke har? Et armbåndsur kan bl.a.
være et statussymbol, her er det især Rolex og lignende luksusure der har
denne funktion. Dette kan så også argumenteres for moderne teknologi
som for eksempel. Apple-produkter, som er kendt for deres høje kvalitet
og pris. Men et armbåndsur er altid lige ved hånden, så at sige. Så urets
design og udseende er også en vigtig faktor, da det stort set altid er synligt
for alle at se, i modsætning til en smartphone som ofte ligger gemt væk i
lommen.
En anden grund til at armbåndsuret stadig er så populært kunne være, at
der er større sandsynlighed for at et ur skaber sentimental værdi for en
person, end at en smartphone gør. Begrundelsen for dette er, at smartphones bliver skiftet ud ofte, da der hele tiden kommer nye modeller på
markedet. Under 20 % af danske forbrugere har haft deres nuværende
mobiltelefon i mere end tre år.
(http://www.forbrug.dk/Nyheder/2014/Danskerne-har-korte-forhold-til-mobiltelefonen?tc=DE142FD96A3649D99E32069646132286)
På baggrund af dette kan der påstås, at sandsynligheden for at en mobiltelefon har sentimental værdi for den moderne forbruger er lav. Et ur derimod bliver sjældent erstattet af nyere modeller med nye funktioner, og
følger en overalt.
Ud fra disse undersøgelser kan der drages den konklusion, at armbåndsurets umiddelbare primære funktion; at se hvad klokken er, er ved at blive erstattet af mobiltelefonen. Dog er de andre funktioner som et ur kan
have, som statussymbol, modegenstand og sentimental værdi, ikke truet
af mobiltelefonen, og kan give en forklaring på hvorfor armbåndsuret
stadig er relevant for den moderne forbruger.
Post-demographic consumerism
Trendwatching.com’s definition af post-demographic consumerism:
“People – of all ages and in all markets – are constructing their own identities more freely than ever. As a result, consumption patterns are no
longer defined by ‘traditional’ demographic segments such as age, gender,
37
location, income, family status and more.”
(http://trendwatching.com/trends/post-demographic-consumerism/)
Med andre ord, bliver ens målgruppe i lavere og lavere grad defineret
ved hjælp af demografiske parametre. Grunden til dette, er blandt andet
global adgang til information gennem internettet. Hvis en person i Australien har lyst til at købe et produkt fra en dansk butik, er dette muligt hvis
butikken har en webshop. Dette, kombineret med det enorme udvalg af
brands og produkter, er med til at skabe en forbruger med langt større frihed og flere valgmuligheder, når det kommer til hvem de skal give deres
penge.
Denne frihed begrænses sjældent af demografiske eller geografiske parametre, og virksomheder er derfor nødt til at finde nye måder at specificere deres målgruppe på. Derudover har forbrugeren også større mulighed
for at udtrykke deres personlighed gennem deres forbrug, blandt andet
ved at udvælge de brands / virksomheder de identificerer sig med.
Brandloyalitet
Med globaliseringen og forbrugeren som ikke er begrænset af geografiske
forhold, er der i dag flere muligheder for forbrugere at vælge brands end
nogensinde før. Dette kunne være en forklaring på, hvorfor brandloyalitet er faldende hos forbrugere, ifølge en global undersøgelse foretaget
af Ernst & Young i 2012. (http://www.ey.com/Publication/vwLUAssets/
This_time_it_is_personal_-_from_consumer_to_co-creator_2012/$File/Consumer%20barometer_V9a.pdf)
I undersøgelsen blev 25.000 personer i 34 forskellige lande spurgt om
deres købsaktiviteter, -præferencer og -oplevelser.
I gennemsnit lå brandloyalitet lige under 40 % som en afgørende faktor,
når forbrugeren skulle købe et produkt, og endnu lavere specifikt i vesten.
Derudover viste undersøgelsen, at forbrugere er blevet langt mere kritiske, og er tilbøjelige til at undersøge virksomheder inden de køber.
Dette skaber nye udfordringer for virksomheder, som skal overbevise
forbrugerne om, at deres produkt er det rette at købe.
En anden undersøgelse fra Harvard Business Review viser, at kun 23 % af
alle forbrugerne i deres undersøgelse havde et forhold til et brand. Af de
forbrugere som havde loyalitet til et brand, svarede 64 % at delte værdier
var årsagen.
(https://hbr.org/2012/05/three-myths-about-customer-eng)
Corporate Social Responsibility
Europa-Kommissionens definition på Corporate Social Responsibility:
“Corporate social responsibility (CSR) refers to companies taking responsibility for their impact on society. As evidence suggests, CSR is increasingly
important to the competitiveness of enterprises. It can bring benefits in
terms of risk management, cost savings, access to capital, customer relati38
onships, human resource management, and innovation capacity.”
(http://ec.europa.eu/enterprise/policies/sustainable-business/corporate-social-responsibility/index_en.htm)
Ifølge en global online-undersøgelse foretaget af Cone Communications i
2013, er virksomheders engagement i socialt ansvar en forholdsvis vigtig
faktor, når forbrugere vælger hvor de skal købe varer. Undersøgelsen
består af besvarelser fra 10.287 forbrugere i de 10 lande med højest BNP i
verden. 87 % af besvarelserne svarede, at en virksomheds CSR-adfærd var
en forholdsvis vigtig faktor, når de skulle vælge et sted at købe et produkt.
35 % svarede at det var en rigtig vigtig faktor. Ud fra disse tal, er det tydeligt at socialt ansvar er en vigtig værdi for den moderne forbruger, hvilket
fremgår yderligere i undersøgelsen.
88 % af forbrugerne føler nemlig at de spiller en vigtig rolle, i forbindelse
med sociale og miljømæssige problemer, gennem deres køb af varer.
Det fremgår dog af undersøgelsen, at der er en signifikant forskel mellem
at ønske at engagere sig med virksomheders CSR, og rent faktisk at gøre
det.
92 % svarer at de, givet muligheden, ville købe et produkt med social eller
miljømæssig fordel, hvoraf blot 67 % faktisk havde købt et sådant produkt
indenfor de sidste 12 måneder.
Dette tyder umiddelbart på, at der er et stort, uudnyttet potentiale for
virksomheder, i forbindelse med at blive engageret i CSR.
Ifølge en global undersøgelse foretaget af Nielsen i 2014, er 55 % af globale online forbrugere villige til at betale mere for produkter og ydelser
hos virksomheder, som er engagerede i positive sociale og miljømæssige
ændringer.
Det fremgår desuden, at forbrugerne som går op i CSR har større sandsynlighed for at udvikle loyalitet til en virksomhed, hvis de ved at virksomheden har de samme værdier omkring socialt og miljømæssigt ansvar.
(http://www.nielsen.com/us/en/press-room/2014/global-consumers-arewilling-to-put-their-money-where-their-heart-is.html)
Analyse af spørgeundersøgelse
Da denne spørgeundersøgelse er blevet delt af ByPrang, kan vi ved hjælp
af resultaterne udarbejde en hypotese om, hvem ByPrangs primære målgruppe er. Spørgeundersøgelsen består af 46 besvarelser.
ByPrangs målgruppe består hovedsageligt af kvinder i alderen 35-50 år,
og går stort set kun med ur med viser. Ud af de 27 som går med ur, har
25 sagt at de foretrækker ur med viser, hvor en har valgt digitalur og en
anden begge. Hvor meget respondenterne er villige til at betale for et
armbåndsur er meget varieret, og rangerer fra 0-250 kroner og op til over
39
1500 kroner, hvor størstedelen (34 %) af svarene ligger.
Størstedelen af besvarelserne går med armbåndsur som smykke/modegenstand, og for at se hvad klokken er. Derudover svarede 30 % at de
gik med ur, fordi det havde personlig værdi for dem. Det vigtigste kriterium i forbindelse med køb af et nyt armbåndsur var udseendet/design,
som 91 % af alle besvarelserne har valgt. Andre kriterier som mærke/
brand var der kun 13 % der valgte, hvilket giver udtryk for at brandloyalitet ikke er særlig vigtigt for respondenterne i denne undersøgelse.
14 ud af 27 har to eller flere armbåndsure, hvilket kan tyde på at de ikke
blot bruger armbåndsur for at se klokken, men også for at udtrykke deres
personlige stil.
Af de besvarelser som ikke går med ur, er den primære (80 %) begrundelse fordi de anvender deres mobiltelefon til at se hvad klokken er. De
sidste 20 % går ikke med armbåndsur fordi de synes det føles ubehageligt.
Hypotese om ByPrangs målgruppe:
ByPrangs målgruppe er primært kvinder i alderen 35-50 år, som går eller gerne vil gå med armbåndsur. Målgruppen bruger ikke armbåndsur
blot for at kunne se hvad klokken er, men i højere grad også for at kunne
udtrykke deres personlige stil gennem mode, hvor prisen ikke er en vigtig
faktor. For målgruppen er designet og udseendet af uret altså det vigtigste, og der foretrækkes analogt ur frem for digitalt.
40
Virksomhedsanalyse:
SWOT–––
Strengths
- Unikke produkter.
- Unikt koncept.
- Dansk design
- Mange års erfaring i branchen.
- Forholdsvist kendt navn (Fru
Prang).
- Ikke begrænset rent geografisk.
- “Eksklusive” produkter i begrænset oplag.
Opportunities
- Tilpasse nye produkter til trends
og situationer.
- Udvide produktsortiment.
- Velgørenhed.
- Sælge på internationalt plan.
Weaknesses
- Produkter i begrænset oplag.
- ingen fysisk butik.
- Ingen distribution til fysiske
butikker.
Threats
- Kommunikationsfejl i forhold til
- produkt budskab.
- Konkurrenter med lignende
budskaber.
ByPrang har forskellige kerneydelser, hvoraf deres produkters unikke,
danske design er den største. Alle motiverne er tegnede af Birgitte Prang,
og sælges ikke andre steder. Derudover er deres koncept at alle deres
produkter kan fortælle en historie om brugeren. Virksomheden består
af to personer, som har mange års erfaring indenfor online forretningsbranchen. De ønsker ikke kun at sælge deres produkter i Danmark, og er
dermed ikke begrænset rent geografisk, og når derfor også ud til et større
marked med flere muligheder. Deres begrænsede oplag af hvert produkt
giver produkterne en form for eksklusivitet, som kan være med til at give
produkterne en mere personlig betydning for køberen eller brugeren.
ByPrang har også nogle potentielle svagheder, hvoraf de begrænsede
produktlinjer potentielt kunne være en af dem. Det kunne være i forbindelse med en potentiel kunde, som havde set en anden person gå med et
ByPrang ur, og så selv ville have et, kun for at finde ud af at det bestemte
ur var udgået. Desuden har ByPrang ikke en fysisk butik, hvilket både kan
være en styrke og svaghed.
Da ByPrangs idé er at løbende udvikle nye produktdesigns, er der stor mulighed for at tilpasse de nye produkter til forskellige trends og årstider.
Mission, Vision og værdier
Mission
ByPrangs mission er at designe og skabe produkter som skal få folk til at
tale om deres tanker, følelser og ideer. Det vil sige at kommunikation er i
fokus, når de designer og skaber produkter. Kommunikationen af budskabet skal ske gennem Birgitte Prangs egne illustrationer, som har et meget
41
karakteristisk udtryk og altid indeholder et glimt af humor. Humoren skal
gøre det lettere at italesætte budskabet.
Hvert ByPrang produkt skal have et budskab som kan skabe dialog. Eksempler på budskaber der kunne findes i et ByPrang produkt:
• Stress
• Tourrette
• At miste nogen
• Kærlighed.
Produkterne skal visuelt indbyde til at man kommunikerer og spørger
ind til hvorfor brugeren netop har valgt det produkt. Derudover mener
ByPrang at illustrationerne i designet er til fri fortolkning for brugerne,
så et produkt kan godt have mere end et budskab, afhængigt af brugerens
situation.
“ByPrang vil tilbyde brugerne unikke produkter der skal hjælpe dem med
at italesætte emner der står dem nær”.
Vision
ByPrangs vision er at lave en virksomhed der handler om at have det
sjovt, en virksomhed der er ikke tager sig selv alt for seriøst, men også en
virksomhed der skal vokse organisk. Deres vision er at ByPrangs første
produkt skal generere nok overskud til at udvikle andre produkter. ByPrang regner med at deres virksomhed vil vokse stille og roligt, og med en
“mund-til-mund” markedsføring gennem tale og sociale medier. ByPrang
er dog ikke kun interesseret i det danske marked men vil gerne appellere
til et verdensomspændende publikum.
ByPrang er ikke interesseret i masseproduktion, så alle produkter de laver
vil være i et begrænset oplag. Deres ure starter i oplag på 100, og når oplaget er udsolgt vil det ikke være at finde igen, men blive erstattet af et nyt
ur, med et nyt motiv og en ny historie.
“I fremtiden vil ByPrang kunne tilbyde deres unikke, danske produkter på
et internationalt marked”
Værdier
Med henblik på værdier er det ikke økonomien der skal styre virksomheden, men deres produkter. “Vi vil gerne tjene penge, men ikke for enhver
pris” - Birgitte Prang
ByPrang vil gerne sælge unikke produkter til deres kunder, derfor kommer produkterne kun i begrænset oplag. ByPrangs værdier er:
• Humor
• Nærhed/personlighed
• Lyst til at drive virksomheden, ikke kun for pengenes skyld
• Kommunikation
• Samvær
• Dansk design
42
• Autencitet
(Kjær, Skriver og Staunstrup ,2007)
Konkurrentanalyse
I konkurrentanalysen blev der undersøgt forskellige virksomheder som
delte nogle af de samme værdier som ByPrang. Konkurrenternes websites
blev så analyseret, for at se hvordan de kommunikerede værdierne.
Ben & Jerry’s
Ben & Jerry’s har ofte prvomoveret velgørenhed, benyttet sig af fair trade
og enten deltaget i eller taget stilling til holdninger inden for politiske og
sociale problemer. Blandt andet tager de stilling til GMO (Gen-modificerede organismer), ved at støtte op om at folk har en ret til at vide hvad der
er i deres mad, hvor Ben & Jerry’s selv ikke bruger GMO, men derimod
naturlige ingredienser.
(http://www.benjerry.com/whats-new/vermont-gmo-labeling-law)
De havde siden starten af 1980’erne en regel om at ingen i firmaet kunne
tjene mere end 5 gange de mindstlønnede. Indtil en af skaberne bag, valgte at træde tilbage i 1994.(http://www.baltimoresun.com/business/bal-bz.
ex.payequity15may15-story.html)
Foruden dette har Ben & Jerry’s stort set altid skabt sjove navne til deres
produkter, som også får modtageren eller køberen til at tænke sig om, for
eksempel “Baked Alaska”. Her ser man en illustration af et snelandskab
der smelter, samt en isbjørn med solbriller på. Dertil er der en tekst hvor
der står ‘If it melts, it’s ruined’, hvilket kan være en hentydning til både
selve isen, men også is andre steder, som Alaska, Syd- og Nordpolen, Grønland osv.
Historie og holdninger som disse, har været med til at forme Ben & Jerry’s
brand. De to skabere af firmaet har valgt at vise deres egne holdninger
frem til offentligheden, ved at gøre det til firmaets standpunkter. Det
giver Ben & Jerry’s et brand som viser at de er forkæmper for folket, deres
rettigheder, men også naturen og dens bevaring. Det er en god holdning,
men også smart i forhold til det produkt de sælger, som er is. Købere af
produktet kan føle sig syndige, men samtidig hellige, da de støtter et produkt som kæmper for rettigheder for mennesker, dyr og natur.
Northernmakers
Northernmakers er en platform, hvor skandinaviske designere kan promovere og sælge deres produkter. Selve siden har et meget simpelt og
stilrent design. De forskellige tilmeldte designere får deres egen “butik”
på websitet, hvor deres historie bliver beskrevet og deres produkter fremvist. Designerne har også mulighed for at blogge på deres side. Hver designer har et unikt baggrundsbillede, som er med til at skabe en stemning
og idé om, hvad deres designs handler om. Mange af produkterne har
en historie, som for eksempel. Claydies’ “True feelings tea light holder”
(http://claydies.northernmakers.com/store/products/true-feelings-tea-light43
holder/).
Produktet bliver beskrevet som unikt, og har en historie i forbindelse
med, hvordan det blev skabt. De skriver: “One of the rules was to work
blindfolded. Focus was transferred from a visual approach to design to
the sense of touch. The design became an expression of the fingers’ choice
only.”
Denne historie omkring produktet skaber autenticitet, og kan være
med til at give en større værdi hos forbrugeren der vælger at købe det.
Vipp
Vipp er en dansk familievirksomhed, der er kendt for deres stilrene og
verdenskendte design af hovedsageligt skraldespande. På deres website
har de en side kaldt “Historie”, hvor der blandt andet er en video som
fortæller historien om Vipp. Videoen er meget personlig, og viser familien
bag Vipp fortælle om deres oplevelser gennem tiden. Udover en video, er
der også forskellige undersider, som fortæller historien om de forskellige
dele og tidsperioder af Vipp. Dette er med til at give Vipp personlighed, og
fremvise deres passion for deres produkter.
Vi kan ud fra konkurrentanalysen konkludere, at værdier som autenticitet, humor og socialt ansvar er vigtige for konkurrenterne. Værdierne bliver kommunikeret på forskellige måder hos konkurrenter, både gennem
design af deres websites og video, men også gennem deres produkter. De
anvender altså forskellige medier til at kommunikere og præsentere de
værdier og følelser, som deres produkter har.
Målgruppespecifikation
Ud fra vores kvantitative spørgeundersøgelse, lavede vi en hypotese om
hvem ByPrangs målgruppe er:
“ByPrangs målgruppe er primært kvinder i alderen 35-50 år, som går
eller gerne vil gå med armbåndsur. Målgruppen bruger ikke armbåndsur
blot for at kunne se hvad klokken er, men i højere grad også for at kunne
udtrykke deres personlige stil gennem mode, hvor prisen ikke er en vigtig
faktor. For målgruppen er designet og udseendet af uret altså det vigtigste, og der foretrækkes analogt ur frem for digitalt.”
Denne hypotese er, efter foranalysen, blevet afkræftet på de fleste punkter. De demografiske data har ikke vist sig, at stemme overens med resultaterne fra trend- og tendensanalysen, hvorimod de psykografiske parametre; målgruppens holdninger om armbåndsuret, har vist sig at have
sandhed i sig.
Målgruppens afgrænsning er altså primært ved brug af psykografiske
parametre, og ikke demografiske eller geografiske. Derfor er målgruppen
blevet specificeret ved brug af en brugerprofil baseret på værdier. De
værdier som brugerprofilen baseres på, er valgt ud fra ByPrangs værdier
44
og forbrugerværdierne, der blev fundet frem til i trend- og tendensanalysen.
Brugerprofil
Brugeren er vant til at begå sig på internettet, mere specifikt gennem
online shopping og sociale medier, på alle platforme (smartphone, tablet,
computer).
Brugeren føler, at et armbåndsur har en større værdi, end blot at vise
hvad klokken er. For brugeren er et armbåndsur en måde at vise sin
personlighed, og skabe sin personlige og unikke stil på, og har dermed en
sentimental værdi. De vigtigste kriterier for brugeren, når der skal købes
et armbåndsur, er altså design og udseende.
Brugeren værdsætter virksomheder og produkter, som på en eller anden vis bidrager til forbedringen af sociale og miljømæssige problemer,
og ønsker selv at “gøre en forskel”. Når brugeren skal købe en vare, er
værdier som autencitet, humor og nærhed vigtige faktorer. Det er vigtigt
for brugeren at kunne vide, at en virksomhed som ByPrang har lyst til at
drive forretning, men også sætter pris på kunden. Brugeren har lyst til at
kommunikere sine tanker, værdier og holdninger, og sætter pris på socialt
samvær og støtte.
45
Design
MoSCoW
Grundlaget for designet startede ud med en workshop hvor der blev set
nærmere på hvad konkurrenterne havde gjort i forhold til interface,
formidling af budskaber og opbygning af webshop. På baggrund af dette
lavede vi en MoSCoW, hvor alt indsamlet viden blev sat ind. Hvert af de
indsamlede punkter blev holdt op imod de krav ByPrang havde til den
endelige løsning.
Figur 8 - Uddrag fra MoSCoW
Resultatet af denne MoSCoW analyse gav en ide om hvilke punkter der
var vigtigst for ByPrang, altså hvilke ting der er et Must have i den endelige løsning.
Efter MoSCoW analysen blev der set nærmere på de ideer vi løbende havde fået under vores analyse. De ideer blev holdt op imod ByPrangs værdier og ud fra det vurderede vi hvilke ideer der var passende for løsningen.
Vi blev enige med ByPrang om at brugerne skulle have mulighed for at
dele deres historier med ByPrang.
Derudover blev vi enige om, at vores interview med ByPrangs stiftere
skulle formidles via. Video og at det skulle fungere som en ”attention
grapper” når brugere besøger siden.
Konceptbeskrivelse
Vi har udviklet et koncept til ByPrang der hedder Jeres historier, som
giver brugerne mulighed for selv at dele deres historier med ByPrang og
andre brugere af siden. Incitamentet for at brugerne skulle dele deres
historie med ByPrang er at ByPrang læser historierne og bruger dem som
inspirationskilde til fremtidige motiver og temaer.
Konceptet er baseret på brugerindragelse.
Brugerne vil få to muligheder til at dele deres historie, først via. siden “Jeres Historier” som der er link til i menuen samt et call to action på forsiden, men derudover også når de er færdige med check ud processen.
46
Informationsarkitektur
På baggrund af MoSCoW-analysen samt de ideer vi havde drøftet med
ByPrang, begyndte vi at se nærmere på hvilke sider der var brug for, og
hvordan vi strukturerer vores navigation og indhold. Vi startede med at
drøfte hvilket indhold vi havde, vi fandt frem til vi havde nogle værdier i
form af selling points, en video, noget historik om hvem ByPrang er, hvad
de står for og hvem de støtter. Derudover skulle brugerne have mulighed
for at dele deres historie med ByPrang via en side, der skulle også være
mulighed for at komme i kontakt med dem, og sidst men ikke mindst ByPrangs webshop.
Vi havde allerede gennem ByPrang
fundet ud af at webshoppen ikke
skulle være i fokus, derfor skulle det
ikke være det første brugerne blev
mødt af når de besøgte ByPrang,
men de skulle ledes hen til webshoppen i form af et eller flere calls
to action.
På baggrund af den information vi
havde vedrørende indhold på siderne kom vi frem til følgende:
Figur 9 (Sitemap)
Menuen skulle være fixed så den
fulgte brugerne ned gennem siderne, da forsiden, jeres historier og om ByPrang havde mere indhold end de
andre, samt vi ønskede ikke at brugeren skulle scroll op i toppen af siden
for at navigere.
Figur 10 eksempel på menu med brødkrumme
Derudover skulle webshoppen udstyres med en brødkrumme menu under hovedmenuen, så brugerne altid havde mulighed for at vende tilbage
til de forrige sider.
Vi vurderede indholdet på de forskellige sider, ved at se på hvad vi synes
der var vigtigst for brugeren, denne opstillede hypotese skulle afprøves i
form af en UX test.
47
Wireframes
Efter informationsarkitekturen og den dannede hypotese om indholdets
placering, begyndte vi at lave wireframes. Under opsætningen af disse
wireframes så vi på kompositionen af de forskellige elementer på siden.
Med henblik på opbygningen af menuen og den generelle navigation på
siden, byggede vi den op ud fra et supplementært perspektiv, hvilket betyder at det der linkes til via de forskellige siders indhold skulle være noget
der supplementerede indholdet på den givne side.
Figur 11: Eksempel på supplementeret indhold fra forsiden
Dernæst blev der nået til enighed om at brugerne skulle mødes af et
singulært udtryk når de besøger siden i form af en video. Videoen skulle
give brugerne en introduktion til hvad ByPrang er, hvad de går ind for,
samt hvad de sælger.
Figur 12: singulær komposition
Det singulære udtryk skulle fjerne alle distraherende elementer for brugeren og derved øge chancen for at de så videoen.
48
Til vores produktoversigt/relaterede produkter har vi benyttet z-layout til hvert produkt, z-layoutet er bygget op omkring øjets
naturlige måde at skimme på. På den måde
kan brugeren hurtigt danne sig et overblik
over navn, pris, udseende samt hvor de
skal klikke for at få mere information om et
produkt.
Figur 12 eksempel på z-layout
Farvevalg
Med henblik på vores valg af farver har vi været i tæt samarbejde med
ByPrang, da de havde nogle ønsker til hvilke farver der skulle benyttes.
Det var dog ikke alle deres ønsker der blev opfyldt og vi valgte selv at
træffe nogle beslutninger med henblik på netop farvevalget.
Vi har primært benyttet os af rød,
blå og grøn. Den røde farve benyttes
som den primære farve på siden.
Den røde farve benyttes som farve
til menuen, knapper i webshoppen,
priser og grafiske elementer. Vi har
valgt netop den røde farve da rød
Figur 13 (Farvepaletten)
symbolisere nærvær og er ofte en
farve man sætter i forbindelse med hjælpeorganisationer (Røde kors, Red
Barnet, Kræftens Bekæmpelse osv).
Den mørkerøde farve bliver brugt til adskille menuen og resten af siden,
vi har valgt at gøre dette da menuen er fixed til toppen og kan komme til
at ligge over elementer som har den samme røde farve som menuen. På
denne måde undgår vi at tingene “smelter” sammen.
Den blå farve benyttes til grafiske elementer, knapper og pris i oversigten
over produkter samt relaterede produkter. Der hvor den grå farve har
sit hovedområde er under Jeres Historier. Den blå farves værdier passer
bedst inde for det område, da den blå farve er med til at stimulere brugernes tanker. Udover det så virker blå også tillidsvækkende hos brugerne.
Vi har valgt den grønne farve til vores indkøbskurv samt købs/læg i
kurv-knapper. Årsagen til dette er at vi forbinder den grønne knappe med
“Start!”. Derfor fungerer den grønne knap godt som et call to action.
Derudover er den grønne farve blevet brugt til en illustration på forsiden
der symbolisere at ByPrang går ind for en miljøvenlig produktion hvilket
stemmer overens med den grønne farve.
49
Den neutrale farve (#FDF9F0) bliver brugt til baggrunde, hvor den sorte
og hvide bliver brugt til tekster og overlays. Grunden til vi ikke har valgt
en ren hvid farve til den primære baggrund på websitet, er for at skabe en
varm og nærværende stemning.
Et resultat af dette er, at vi kan anvende den helt hvide farve til at skabe
forskellige grænser til indholdet på de forskellige sider, og kontrast til
baggrunden.
Typografi
Til vores brødtekst har vi benyttet Raleway,
som er en sans-serif.
Til menuen og overskrifter har vi benyttet
fonten Coming Soon. Fonten har et barnligt
udtryk, den er letlæselig og komplimenterer
Figur 14 Coming soon typografi
Birgitte Prangs illustrationer og ByPrangs
logo godt. Vi har benyttet en anden font til
overskrifter og menupunkter da det giver en god effekt, det springer ud
i forhold til resten af brødteksten og leder derfor øjet hen på den givne
overskrift.
Grafiske elementer:
For at fremhæve nogle af ByPrangs værdier har vi på forsiden lavet 3 cirkler der hver symboliserer nogle af kerneværdierne i ByPrang.
De symboliserer at ByPrang går ind for en miljøvenlig produktion, socialt
ansvar og at vi skal blive bedre til at kommunikere med hinanden. Disse
figuere har desuden en intersemiotisk funktion hvor der anvendes semiotik til at formidle nogle værdier.
Figur 15 Illustrationer til forsiden.
Træet er et ikon for naturen og er i den her kontekst med til at formidle
ByPrangs værdi om miljøvenlig produktion.
Håndsrækningen symbolisere socialt ansvar og formidler at ByPrangs
vision om et større fælles socialt ansvar.
Kommunikations figuren symboliserer en samtale mellem to personer og
derved også ByPrangs værdi om at vi skal blive bedre til at kommunikere
med hinaden. Farverne der er brugt til disse illustrationer har sammenhæng med det de hver især symbolisere (Se farvevalg).
Vi har forsøgt at imitere ByPrangs stil da vi mente det var vigtigt at vi
50
forblev i det univers og ikke brød stilen med andre stilarter. Det bidrager
også til den fatiske funktion på siden.
Figur 16 Knapper
I forlængelse af dette skulle knapperne ikke være retvinklet eller med lige
linjer da det ikke passede ind i ByPrangs univers. Derfor designede vi nogle knapper med et kunstnerisk, uformelt og barnligt udtryk, hvor det ikke
gjorde noget at man tegnede udover rammerne på knappen.
Figur 17 header og footer
Vi har i vores header og footer også forsøgt, at holde os til det kunstneriske univers med penselstrøg og blyantstreger, som visualiseres gennem
bunden af headeren og toppen af footeren. Den specielle form er en del af
sidens uudsigelige æstetiske funktion, og er med til at formidle en bestemt
æstetisk oplevelse. Headeren og footeren bidrager til den fatiske funktion på websitet, da man altid kan se hvem afsenderen er, desuden er det
karaktaristiske design af navigationen med til at skabe en visuel identitet
for ByPrang.
51
Forside
På forsiden valgte vi at brugerne skulle
blive mødt af en video, videoen skulle
give en introduktion til hvem og hvad
ByPrang laver.
Teksten ”Se videoen om ByPrang” er et
eksempel på en konativ funktion, hvor
brugeren opfordres til at se videoen, ved
at trykke på play-knappen, som er et globalt symbol for ”afspil”. Andre konative
funktioner på siden er visualiseret i form
af knapper, som opfordrer brugeren til at
besøge andre dele af websitet.
Dernæst har vi indsat de tre cirkulære
grafiske elementer, der viser og fortæller
hvad ByPrang går ind for. Der er et klart
skel mellem videoen og de 3 cirkler, i
form af to streger og en overskrift. Det er
med til at fortælle brugeren at der starter
et nyt afsnit af siden, med nyt indhold.
De tre illustrationer viser miljøvenlighed,
socialt ansvar og kommunikation. Vist
ved hjælp af et træ, en håndsrækning og
Figur 18 mock up af forsiden
to mennesker der taler med hinanden.
Illustrationerne og den dertilhørende tekst viser brugen af patos, da dette
er udtalelser som omhandler emner folk ofte har en følelse overfor. At
man for eksempel. viser at man er miljøbevidst kan være betryggende for
personer som går op i bevaring af naturen, samt brugen af råvarer fri for
giftstoffer. Der bliver her også brugt mere lidenskabelige ord som ‘elsker’,
der giver brugere af siden et stærkere indtryk af, at ByPrang har passion
for hvad de laver, samt viser mere troværdighed, end ved brugen af mere
neutrale ordvalg. Derudover giver det også en vis autenticitet, da det følelsesladede ordvalg er med til at skabe en idé om, hvem indehaverne af
ByPrang er som personer.
Ud fra den midterste af de tre cirkler springer der nogle blækpletter som
leder øjet videre på siden. Det fører brugerne ned til et billede af urene,
de får mulighed for at klikke direkte videre til butikken via. en knap. Årsagen til vi har valgt denne løsning er at vi føler når brugerne er kommet
så langt ned på siden har de allerede fået de mest essentielle informationer. Det er også derfor at vi har placeret “Del din historie” elementet på
samme linje med produkterne.
Nederst på siden bliver brugerne mødt af en konvolut, hvor det er muligt
at tilmelde sig nyhedsbrevet. Derudover vil ByPrang også have mulighed
for at skrive nyheder der.
52
Jeres Historier
I starten gik “Jeres Historier” under
navnet “Vores Historier”, men den titel
virkede misvisende,
da det nemt kunne lyde som om at det
er ByPrangs historier, og ikke brugernes
historier. Derfor ændrede vi navnet til
“Jeres Historier”
Jeres Historier er bygget op omkring
mange af de samme principper som
forsiden. Siden startede oprindeligt med
et singulært udtryk øverst på siden, men
fandt ud af det var overflødigt i sidste
ende, da brugerne skulle scrolle mere for
at finde ud af hvad siden egentlig omhandlede. (Kan ses i den tidlige mockup
til højre). Derudover lavede
vi en illustration af bøger, da det drager
paralleller til det overordnede tema på
siden.
“Del din historie” går igen både under
elementet “Historier” hvor der er en
beskrivelse af hvad “Jeres Historier” omhandler, derudover finder man den også Figur 19 mock up af del din historie
nedenunder, de udgivne historier.
Årsagen til dette er, at jo flere historier der
kommer på siden, desto længere ned kommer “Del din historie” knappen.
Derudover mener vi også at det var vigtigt at have en knap under alle
historierne, da brugere måske selv ville blive inspireret til at dele deres
historier.
Historierne var oprindeligt med
i en tegnet boks med en illustration der passede til den givne
historie. Men der var enighed
om at de tegnede bokse ville
have indflydelse på læsbarheden og de linjer der blev skabt Figur 20 Nye historie format
ned gemmen siden.
Derfor ændrede vi strukturen til et mere læsevenligt format.
Udover at ændre formatet tilføjede vi også et ’synes godt om’-system i
form af det lille hjerte.
53
Butik
På butikssiderne er der en ekstra menu bar, hvor der er navigation i form
af en brødkrumme samt en indkøbskurv. Denne menu er med til at give
brugeren et bedre overblik mens de er i ”butikken”.
Når brugeren åbner får de mulighed for at vælge mellem to forskellige
kategorier, Watch Me og Watch Out. Begge kategorier er skabt af ByPrang,
tanken bag dem er at Watch Me fokuserer på den individuelle bruger og
deres tanker og ideer. Watch Out fokuserer derimod på et overordnet
emne som fx. tourette syndrom. Dette bliver formuleret over for brugeren
i form af en kort beskrivelse af kategorien.
Produktsiden
Produktsiden er bygget op omkring tredjedelsreglen. I alt er der fire fokus
punkter fordelt over produktsiden. Der er to fokus punkter på produktetbilledet, et på ”læg i kurven” og et på produktbeskrivelsen. Dette layout er
med til at fremhæve de informationer der er vigtige for brugerne.
Ved siden af prisen står der ”kun 100 tilbage” for at informere brugeren
om hvor mange ure der er tilbage. Det er med til at tilføre produkterne en
form for eksklusivitet.
Derudover har brugerne mulighed for at dele produktet på Facebook
og Pintrest. I følge en undersøgelse fortaget af Pew Research Center, er
71% af alle voksne internetbrugere på Facebook, og 28% er på Pinterest.
(http://www.pewinternet.org/2015/01/09/social-media-update-2014/) Dette
i sig selv er en god begrundelse for at indkoporere de respektive sider.
Derudover er det med til at forstærke ByPrangs ønske om at dele deres
værdier og produkter.
På hver enkelt produktside er der et unikt baggrundsbillede der relatere
til det overordnede tema for produktet, og på den måde skaber en stemning for produktsiden. Eksempelvis på produktsiden Beach Chair, hvor
baggrundsbilledet er af en dansk strand. Årsagen til denne kulisse er
temaet for uret samt forstærkningen af det danske design. Den samme
kulisse benyttes i de ekstra produktbilleder, hvor man kan se produktet i
en tema bestemt kontekst.
Sidst på produktsiden kommer der en sektion med relaterede produkter.
54
Produktsforhåndsvisning
De relaterede produkter bliver fremvist i et
simpelt design hvor der kun fremgår de vigtigste informationer. Produktsforhåndsvisningen og relaterede produkter er bygget op
som et Z-layout. I starten af layoutet er titlen
på produktet. efter titlen på produktet kommer prisen, som derefter føre øjet henover
produktbilledet og ned til ”Læs mere om produktet”-knappen som har fuld bredde.
Om ByPrang
Figur 21
Produktforhåndsvisning
Overskriften på siden Om ByPrang lyder
”Mød ByPrang” dette er for at formulere det på en mere personlig måde.
Fra start af har ByPrang ønsket at det giver en følelse af at blive inviteret
ind i deres hjem. Årsagen til at siden ikke hedder Mød ByPrang i navigationen er på grund af de standarder internet brugere har vænnet sig til.
Derudover vil siden også indeholde andre oplysninger, end de personlige
historier om Birgitte og Gøran.
Om ByPrang indeholder også hvilke projekter og samarbejdspartnere de
har.
Med henblik på layoutet af siden er det forsøgt at gøres mere dynamisk
ved hjælp af tekstjustering og billede placering.
Derudover er der et afsnit om hvilke projekter og organisationer ByPrang
støtter op om. Sektionen ”Vi støtter...” er en referentiel funktion der henviser til et eksternt element, som har relation til ByPrang.
Figur 22 Screenshot af ”Vi støtter..”-sektionen
Kontakt
Kontaktsiden er endnu et eksempel på det personlige, der er her muligheden for både at se deres adresse, samt se hvor de bor. Derudover er der
beskrevet at man kan kontakte ByPrang via. Facebook og mail. Årsagen til
dette er at en kontaktformular ofte kan føles meget formel, hvor socialemedier kan skabe en mere afslappet dialog.
Sproget på siden er holdt på et uformelt plan, for at forstærke fornemmelsen af nærhed.
55
UX-test
Inden vi gik i gang med vores UX-test, lavede vi en række spørgsmål som
var med til at give os en idé om, hvad testpersonernes emotionelle reception af produktet var.
Da formålet netop var at undersøge modtagerens personlige følelser og
indtryk i forbindelse med produktet, blev der udformet tre åbne og kvalitative spørgsmål: “Hvad føler du når du ser siden?”, “Hvad er dit første
indtryk af ByPrang når du ser siden?” og “Hvad synes du om siden?”.
Det første spørgsmål gav os indblik i, hvilke følelser og stemninger produktet fremkaldte hos testpersonerne. Det andet spørgsmål gav os en
idé, om de værdier vi ønskede at kommunikere til testpersonerne, stemte
overens med hvad de rent faktisk forstod. Det sidste spørgsmål blev brugt
til at opsummere testpersonernes indtryk og holdning af produktet, efter de havde kigget på og tænkt over det, i forbindelse med de to første
spørgsmål.
Hvad føler du når du ser siden?
Dette spørgsmål blev som sagt stillet først, for at undersøge testpersonens
umiddelbare emotionelle reception af produktet. Svarene var blandt
andet: “varme”, “positivitet” og “sommer”, som giver et indtryk af, at den
gennemgående røde farve og de smilende figurer på forsiden, har dominerende indflydelse på modtagers emotionelle reception. Disse svar gav
et indblik i, hvilke dele af produktet der kunne ændres, hvis det var ønsket at ændre den emotive funktion. Da svarene på spørgsmålet stemte
overens med de følelser ByPrang ønskede at kommunikere, blev der ikke
foretaget ændringer, som kunne tænkes at ændre den emotive funktion.
Hvad er dit første indtryk af ByPrang når du ser siden?
Dette spørgsmål blev stillet for at få en idé om, hvad testpersonens indtryk
af ByPrang som virksomhed var. Svarene på dette spørgsmål lød blandt
andet: “afslappede”, “kunstneriske” og “pædagogiske”. Her var det især
baggrundsvideoen på forsiden, som havde indflydelse på testpersonen.
Dette kan skyldes teksten foran videoen hvor der står “Mød ByPrang”,
eller at personerne bag ByPrang vises i videoen.
Hvad synes du om siden?
I dette spørgsmål fik vi de forskellige testpersoners endelige holdning til
produktet. Der blev svaret ting som “barnlig”, “sjov” og “pædagogisk”,
som giver os en idé om, at humoren og det lidt barnlige udtryk i ByPrangs
produkter er blevet formidlet gennem produktet. Dette var en af de ønskede værdier fra afsender, som blev modtaget og afkodet “korrekt” af
modtager. Der blev også svaret “enkelt”, forstået som at testpersonen
syntes produktet havde et enkelt design. Dette stemmer igen overens med
ByPrangs enkle produktdesigns, og kan også tænkes at have en sammenhæng med dansk design, hvor der er fokus på enkelthed.
56
Nogle af svarene gav dog opfordring til revidering af visse dele af produktet. Nogle af testpersonerne svarede “useriøst” og “fjollet”, hvilket kan
give problemer i forbindelse med webshoppen, hvor brugere måske føler
sig utrygge ved at give penge til noget, som måske ikke virker seriøst nok.
Derfor er der valgt et mere traditionelt og almindeligt design til webshoppen. Knapperne er blandt andet ændret, hvor der på de andre sider er
anvendt de “tegnede” knapper, er der på webshoppen anvendt en mere
almindelig knap, som ses på mange webshops. Denne designvariation
mellem webshop og resten af sitet er gjort, for at sikre brugeren om, at
deres penge og køb vil blive taget alvorligt af ByPrang.
Der blev også svaret “anderledes / speciel”, hvilket kan fortolkes på flere
forskellige måder. Svaret kan tyde på, at brugeren syntes at produktets
design var unikt, eller ihvertfald udenfor standarden for webdesign. Dette
kan være positivt, men også negativt. Hvis det er den formale æstetiske
funktion som bliver beskrevet, er det højst sandsynligt ikke positivt, da
denne funktion indebærer standarder og krav i forhold til produktets design. Hvis der derimod er tale om produktets uudsigelige æstetiske funktion, er det positivt, da denne funktion omhandler det innovative indhold,
som formidler en bestemt æstetisk oplevelser. Den uudsigelige funktion
siges også at være produktets funktion til at skille sig ud fra mængden,
hvilket kan fortolkes ud fra svaret.
Delkonklusion
Konklusionen på denne analyse af brugertests er, at værdierne om det
uformelle, sjove og unikke design som ByPrang har, er muligt for modtageren at afkode. Ved at have dette sjove og lidt specielle design, viste det
sig dog at vække utilsigtede værdier om ByPrang hos modtageren. Disse
værdier var ikke nødvendigvis uhensigtsmæssige i forhold til ByPrangs
værdier, men kunne sende et forkert signal til modtageren, hvis kommunikeret på specifikke sider.
57
Video
Birgitte og Gøran ønskede at deres hjemmeside skulle være personlig og
give brugeren en fornemmelse af hvem Birgitte og Gøran er, samt ‘invitere’ dem ind i deres hjem.
Det var altså vigtigt for dem at brugerne fik et indblik i deres liv og oplevelser.
Der var enighed om at lave en video, som ‘showcaser’ ByPrang og deres
værdier og visioner.
Vi følte at en video kunne falde på det rette sted, da det giver brugerne en
mere personlig forbindelse til ByPrang, samt hvem de er.
Undervejs i processen, blev der lavet mange overvejelser i forhold til
historien og elementerne i videoen. Vigtigst af alt var at vi benyttede os af
Birgitte og Gøran, til selv at fortælle deres egen historie og visioner.
Personer
Brugen af personer kan have en helt forskellig effekt, alt efter hvilke personer der bliver benyttet, hvilket firma der benytter dem, samt hvad man
bruger personerne til.
For mange store firmaer, især firmaer inden for parfume og tøj, benytter
man sig ofte af en velkendt person, oftest en skuespiller eller sanger. Det
sender et signal om at produktet og firmaet har de samme værdier og
holdninger som den kendte person. Og folk der i forvejen kan lide eller relaterer til personen, får en hurtigere og bedre forbindelse til det produkt.
Det kan dog også gå i den anden grav, hvis nogle mennesker ikke kan lide
den benyttede person, eller mener at han/hun er en ‘sell-out’.
I forhold til dette projekt mener vi at personerne, som er involveret, er
den afgørende faktor. Især når det kommer til en video, da det er dem og
deres firma som det handler om.
Her er det dog, som sådan, ikke velkendte personer. Det handler i stedet
om at gøre ByPrang mere personligt og give brugerne en forbindelse til
Birgitte og Gøran, samt en forståelse for deres historie og grunde for at
starte ByPrang.
Det er især vigtigt, da de gerne vil have at andre personer fortæller deres
historier på ByPrang, så det er naturligt at de selv tager del i dette.
Der var i starten overvejelser om at bruge en eller flere figurer, skabt af
Birgitte, der skulle tale og bevæge sig rundt på skærmen. Selve idéen var
som en intro til filmen, hvor Birgitte og Gøran lagde stemmer til figurerne. Men det blev hurtigt klart at der var flere forskellige risiko ved dette.
Ingen af os havde stor erfaring med animering, hvilket gjorde at det ville
blive en længere process for os, at lære og forstå det, for derefter at skabe
en animeret intro. Men den primære risiko, var at vi var bekymrede for at
en indtalt intro ville virke mindre oprigtigt og ‘opstillet’.
Det blev i stedet besluttet at der skulle gennemføres et interview med Bir58
gitte og Gøran, for at gøre deres besvarelser så spontane og naturlige som
muligt.
Stakeholder interview
Interviewet med Birgitte og Gøran var i form af et stakeholder interview.
Dette var for at få dem til at fortælle om deres visioner, værdier og mål.
Men også omkring deres historie, deres oplevelser samt deres baggrund
og årsager til hvorfor de har valgt at starte ByPrang.
Det mundede ud i rigtig mange spørgsmål, som omhandlede dem selv,
deres professionelle baggrund, deres oplevelser med tourette, deres firma
osv.
Formålet med spørgsmålene var at få dem til at fortælle så meget som muligt om dem selv og hvilke planer de har med ByPrang, uden at det virker
som noget de har forberedt eller læst op fra et manuskript.
Der blev derfor også overvejet meget omkring formuleringen af spørgsmålene, så det ikke blev til korte svar og langtrukne forklaringer.
Vi valgte også at aftale med Birgitte og Gøran at selve interviewet skulle
tage sted hjemme hos dem selv. Det gav mening, da de gerne vil fremstå
personlige og som de selv har nævnt tidligere, vil de gerne have at folk bliver en del af deres historie og nærmest bliver inviteret ind i deres hjem.
Det mundede ud i et 45-minutter langt interview. Der blev desuden også
filmet ‘fill shots’ af forskellige objekter og aktiviteter rundt omkring i
huset, som for eksempel. illustrationer skabt af Birgitte, deres hunde som
render rundt i haven osv.
Vores fill shots blev filmet for at gøre videoen mere spændende, gøre det
muligt at vise Birgitte’s illustrationer frem, samt vise almindelige aktiviteter frem som kan virke personligt.
Storytelling
Det kom nu til at bruge de besvarelser fra interviewet, samt fill shots, til
at skabe en video der kan vise ByPrang frem. I selve videoen skulle der
gerne være en historie, som vi fra starten havde valgt skulle omhandle
Birgitte og Gøran, deres forhold til tourette og deres årsager til at starte
en forretning sammen. Vi ønskede derfor at ‘klippe’ nogle af de længere
besvarelser ud, for at komme frem til små sætninger og citater, som kunne forklare deres liv og historie på en måde som ville passe ind på deres
hjemmeside. Eller i det mindste ‘klippe’ i enkelte besvarelser, hvis de midt
i en forklaring begyndte på et sidespor, eller blev afbrudt af for eksempel.
deres hunde.
Vores første udkast til en video, bestod af en del klip, som sammenlagt
kom til at vare omkring 3 minutter. Disse klip omhandlede for eksempel.
tourette, deres tanker bag firmaet, omkring deres ure, samt en del hvor de
introducerede sig selv. Det blev hurtigt klart at det ville ende i en alt for
lang video at ligge op på deres hjemmeside.
59
Vi havde i forvejen undersøgt om folks ‘attention span’, som blandt andet
omhandler hvor længe folk ser med på en video, før det ikke er interessant for dem længere (http://wistia.com/blog/does-length-matter-it-doesfor-video-2k12-edition). På baggrund af dette blev længden af videoen
reduceret til 1 minut og 40 sekunder, og kun det mest essentielle kom med
fra den første udgave.
Desuden brugte de begge forholdsvis lang tid på at komme frem til enkelte pointer, blandt andet omkring deres faglige baggrund. Dette blev dog
set som et luksusproblem, da det mest af alt var fordi de begge gik meget i
detaljer med deres besvarelser.
Det blev klart for os at vi måtte gøre noget for at mindske den tid som
bliver brugt på at introducere dem, samt noget af tiden hvor de taler om
tourette. Introduktionen kunne i vores øjne klares hurtigere, men når
vi prøvede at klippe i deres besvarelser for at lave dem kortere, blev det
til sætninger som enten ikke passede ordentligt sammen, eller hvor man
tydeligt kunne høre at der blev redigeret i det.
Det samme skete når de omtalte tourette. Her var vores dilemma at vi var
bange for at besvarelserne ville det få det til at virke som om deres firma
kun omhandler deres liv med tourette. Når dette i stedet skulle ses som
‘deres historie’ - i relation til de historier de gerne vil have besøgende på
hjemmesiden deler.
Vi endte med at placere stillbilleder ind i mellem klippene, så det var
muligt at forklare ting hurtigere end normalt. På denne måde bliver det
nemmere og hurtigere at forklare ting som ikke blev nævnt i deres besvarelser eller som tog for lang tid at få besvaret.
Det gav muligheden for at vise Birgitte’s illustrationer frem, samtidig med
at stillbilledet fik lidt mere ‘liv’ og detaljering, end bare en sort skærm
med hvid tekst på.
Figur 23 Stilbillede fra video
Et af still billederne i videoen - et eksempel på hvordan vi beskriver ting
hurtigere.
60
På denne måde kan videoen forkortes, men også give mere opmærksomhed til Birgitte og Gøran når de faktisk fortæller om noget. På denne måde
bliver det de siger ikke bare glemt i ‘strømmen af citater’.
Det blev også besluttet at fjerne nogle klip, som for eksempel. information
omkring deres ure, da vi indså at de i fremtiden nok ikke sælger de samme ure eller for den sags skyld ure i det hele taget. ByPrang har planer
om at introducere silke t-shirts i fremtiden og de har planer om at udvide
med endnu flere produkter. Derfor blev det besluttet at bruge betegnelsen ‘produkter’ i videoen i stedet og simpelthen fjerne alt der har med et
specifikt produkt at gøre. Igen kommer det til at blive mere personligt, da
det i stedet kommer til at handle om deres årsager til at skabe disse produkter, samt hvilke associationer folk får når de bruger dem.
figur 24 Beretter modellen
(http://ibog.litteraturenshuse.systime.dk/fileadmin/filer/ubeskyttede_filer/hoejbilleder/Berettermodellen.png)
Hvis vi skal analysere historien i videoen i forhold til Berettermodellen, så
starter vi ud med det første klip i videoen, hvor Gøran fortæller at nogle
par går i haven sammen, men at de valgte at starte et firma sammen.
Denne del ses som Anslaget. Det er den første bid af videoen, og samtidig
en kort introduktion til hvad det kommer til at handle om - et ægtepar og
deres firma.
Herefter begynder Præsentationen og Udviklingen. Begge dele bliver berørt under det første stillbillede i videoen, hvor vi introducerer Birgitte og
Gøran som personer, men også i forhold til deres rolle i firmaet. Historien
udvikler sig og man får et større indblik i hvem og hvad videoen handler
om.
I slutningen af det første stillbillede, inden det er helt væk, begynder Gøran at snakke. Han begynder at forklare om hvad Tourette er. Efter hans
forklaring nævner Birgitte at de er 3 i husstanden som har Tourette. Det
61
er her Point of no return begynder at vise sig, samtidig med Konfliktoptrapningen. Man får et indblik i deres liv og hvad der kan være problematisk for dem, hvilket seerne af videoen forhåbentlig finder spændende og
har lyst til at se en forløsning på.
Det næste stillbillede forklarer kort at begge deres børn har Tourette.
Derefter snakker Birgitte om hvordan hun googlede Tourette og opdagede at det passe på hendes børn. Konflikten bliver her størrer, men stopper da det næste stillbillede kommer frem. Her står der at nogle af deres
produkter er inspireret af Tourette og at de ønsker at deres produkter
får tildelt en ny historie af de personer som bruger dem. Gøran begynder
her at snakke om at de gerne vil skabe et værktøj som hjælper folk med
at kommunikere omkring ting som er tæt på livet af dem, hvad enten det
er Tourette, stress eller andet. Dette skal ses som tidspunktet hvor Klimaks indtræffer. Her skulle det gerne være klart for seerne at det hele
ikke omhandler Tourette, men det er derimod deres historie og tidligere
kamp. Forløsningen ses også i at de sælger få produkter som er inspireret
af Tourette, men at alle produkterne er inspireret af at hver person har
sin egen personlige konflikt eller problem som de skal gå med. ByPrang og
deres produkter kan derfor være med til at hjælpe disse personer med at
snakke, håndtere eller overveje disse problemer.
Udtoningen ses i resten af videoen, hvor der her bliver fortalt at de gerne
vil have andre personers historier delt på deres hjemmeside. De resterende klip indeholder citater som forholder sig til at de gerne vil høre folks
historier, samt at de gør det her pga. lyst og ikke på kun at skabe profit.
Figur 25 Aktantmodellen
(http://medieogkommunikationsleksikon.dk/wp-content/uploads/2013/06/MK-Leks-aktantmodellen-grafik2.jpg)
Fordi videoen er kort, og der dermed ikke er alverdens tid til at fortælle
en historie, kan det godt virke svært at finde alle roller fra modellen i videoen. Men det handler egentlig om hvordan man fortolker det der bliver
sagt og beskrevet igennem videoen. Hvis vi skal sætte historien i forbindelse med Aktant-modellen, kan vi starte med Subjekt. Dette er selvfølgelig Birgitte og Gøran, men som ByPrang.
Deres Objekt defineres på at de har lyst til at give et værktøj til folk som
62
har brug for at tale om ting, problemer eller lignende, som står dem nært.
Deres Modstander kan fortolkes på forskellige måder, men vores tanke
med det er at Tourette er deres modstander. Det skal forstås på den måde,
at det er det som de har kæmpet med i deres liv og det har været, for dem,
en modstander af at kunne leve ‘normalt’. Deres modstander er ikke en
altødelæggende kraft, men ser vi på andre historier, så er skurken ikke
altid den stærkeste.
På samme tid er Tourette også indirekte deres Hjælper. De oplevelser og
den erfaring som de har fået pga. Tourette, er hvad der ligger grundlaget
for deres historie, som spiller en forholdsvist stor rolle for de valg de tager
i forhold til deres firma. Selvom kun nogle få produkter er inspireret af
Tourette, så er hele deres side indirekte inspireret af det. Deres historie
er vigtig, fordi de gerne vil modtage andre personers historier, samt gerne vil have at folk bruger produkterne som et værktøj til at håndtere og
informere om hvad der foregår i deres liv.
Giveren til Objektet kan være sværere at finde frem til. Det kan fortolkes
fra mange vinkler. For os er det Birgitte og Gørans samlede egenskaber.
De danner sammen et godt team, hvor Gøran indkøber og sælger forskellige produkter, som Birgitte kan designe vha. hendes kunstneriske evner.
Til sidst kommer Modtageren af Objektet. Modtageren skal selvfølgelig
fortolkes som de personer der vælger at købe ByPrang.dk’s produkter. Det
formål som Objektet er skabt til, kommer nu til gode for de personer som
køber produkterne. Kunderne kan selvfølgelig have deres egen holdning
til hvorfor de har købt produkter fra ByPrang.dk, men der står en masse
idéer og årsager bag som kan komme dem til gode, hvis de ønsker det.
Typografi
Vi har i videoen brugt typografien ‘Raleway’. Vi har valgt at bruge denne
font, dels fordi den er enkel og slank. Dels fordi den er letlæselig, men
også fordi det er den font vi primært bruger på ByPrang.dk
63
Tredjedelsreglen
Vi har så vidt muligt prøvet at forholde os til tredjedelsreglen i vores video. Det problematiske har her været at vi har haft 2 personer i videoen
af gangen. Der er derfor, for det meste, blevet fokuseret mindre på de 4
punkter indenfor tredjedelsreglen, men derimod de 4 linjer.
Figur 26 Eksempel på brug af Tredjedelsreglen.
I dette eksempel kan man se at vi her har placeret Birgitte langs både den
venstre lodrette linje, men også den nederste vandrette linje. Et af de 4
punkter, rammer hende derfor omkring halsen. I dette klip er det også
Birgitte som taler, så det er derfor vigtigt at hun bliver placeret et sted
hvor ens øjne flakker hen imod.
Gøran når lige at ramme den nederste og den højre lodrette linje, men i
dette klip er han også af mindre betydning end Birgitte, så der sker ikke
noget ved at han bliver fokuseret på sidst.
Musik/Filmscore
Da videoen var midt i sin udvikling, valgte vi at indsætte en sang. Det var
oplagt for os at bruge en sang som underliggende lyd, da det giver mere
stemning og følelse til videoen. Desuden bliver der benyttet stillbilleder til
at forklare nogle ting i videoen, hvilket ville gøre dem mindre spændende
hvis der ingen lyd var imens.
Vi fandt først en sang, som vi havde regnet med var royalty free, eller under creative commons. Men vi fandt senere ud af at denne sang krævede
minimum en donation på 10$, og her måtte den stadig ikke blive brugt til
kommercielt brug. Vi besluttede os istedet for at, skabe vores egen sang,
for at slippe for juridiske problemer.
En sang blev kreeret i Garageband, som følger med alle Apple-produkter.
Her blev der blandt andet brugt samples til at skabe en sang, som vi følte
passede ind i videoen.
64
Videoens billedformater
I løbet af videoen bliver der brugt forskellige formater, for at understrege
objekter eller mennesker i videoen.
Blandt andet bruger vi til interviewet primært wide shots, for at få både
Birgitte og Gøran med i billedet. Dette er mens de fortæller omkring deres
holdninger, idéer osv. omkring ByPrang, så det er derfor vigtigt at få dokumenteret deres kropssprog, men også den anden halvdels reaktion på
disse besvarelser.
Undervejs er der en del fill shots, hvor vi har skiftende format. Ofte er det
Close-Up eller Extreme Close Up af enten Birgitte’s illustrationer, kunstneriske redskaber eller uret på hendes hånd. Dette gør vi for at skabe fokus
på disse objekter, som har så meget at gøre med ByPrang. Foruden uret,
som er et decideret produkt fra deres side, så er hendes illustrationer og
malergrej også et symbol på at der konstant bliver designet og udviklet
nye ting fra deres side. Desuden er det altid positivt at kunne vise potentielle kunder hvordan designet ser ud.
Storyboard
I starten af videoens process forestillede vi os, som sagt, at vi ville lave en
animeret intro til videoen. Her var planen at når den animerede del var
færdig, ville figuren stå helt stille og der ville blive zoomet ud af, så seeren
kan se at figuren er placeret på et ur. Planen var at dette ur skulle sidde
på Birgitte.
Men efter lidt tid, var der enighed om at en animeret intro krævede mere
tid og erfaring fra vores side, men at det også kunne ende med at være et
for langt og forstyrrende element, i forhold til at sprede Birgitte og Gørans
budskab.
Da der var enighed om at skrotte den animerede intro, blev der i stedet
fokuseret på de 3 sidste billeder i storyboardet, som skulle være en slags
‘guideline’ til hvilke vinkler der kunne være spændende at filme i til interviewet.
Figur 26 Vores storyboard
65
Interaktion
WordPress theme-udvikling
WordPress er bygget op af mange forskellige dokumenter, som er med
til at skabe de sider som bliver vist på front-enden. De dokumenter som
opbygger de forskellige webpages er rent funktionelle, og har ingen
CSS-styling og kun simpel HTML-struktur. Der kan så ændres i design og
layout af siderne ved at anvende et såkaldt “theme”. Til dette projekt er
der anvendt et “starter theme”, ved navn Underscores (www.underscores.
me). Dette starter theme er i bund og grund en skabelon, som kan bruges
når man skal udvikle et theme.
Vi har brugt dette starter theme til at implementere vores designvalg i
WordPress.
Menu på mobil/tablet
På mobil og tablet er der et meget mindre skærmområde at vise indhold
på, i modsætning til på computer. Dette resulterer i, at man skal være
mere selektiv omkring hvilket indhold der skal vises på skærmen.
Da vi implementerede vores design, opdagede vi at navigationsbaren for
sitet ikke var optimal på mindre skærmstørrelser.
Figur 27 Mobil uden responsiv menu
Udover at headeren fyldte en stor del af viewporten i denne udgave, var
der også problemer med præcision, da menupunkterne lå tæt på hinanden vertikalt. Der kunne også opstå forvirring omkring, hvor hvert
menupunkt endte og et nyt startede, når de ikke blot ligger horisontalt.
Da ByPrang selv har mulighed for at tilføje nye sider og indhold på websitet, ville denne menustruktur kun blive mere vanskelig at bruge, jo flere
punkter den fik.
For at løse dette problem på mobile devices, har vi lavet en separat menu
dertil. Når menuen er lukket, vises der blot en knap med ordet “menu” på,
for at give brugeren en klar idé om, hvordan de finder frem til menuens
indhold.
Figur 28 Mobil med responsiv menu
66
Ved at gøre dette har vi mindsket den mængde plads som headeren på sitet optager, og dermed frigivet mere plads til det primære indhold på hver
enkelt side. Med denne løsning er headerens højde 82 pixels, i modsætning til den samme header uden denne løsning, som var 126 pixels høj.
Når bruger så klikker på menuknappen, “flyver” menuen ind fra højre
side som en slags skuffe, der så forskyder resten af indholdet:
Denne menu er blevet lavet ved
brug af jQuery og CSS.
For at “skjule” menuen, når brugeren ikke har brug for den, er den
i vores stylesheet sat til at være
forskudt et antal pixels til højre for
viewporten som standard:
right: -200px
For at menuen ikke bliver placeret
relativt til det andet indhold på
sitet, men i stedet til browservinduet, er menuen sat til position: fixed.
Disse to CSS-egenskaber sørger for
at menuen sættes -200 pixels fra
højre relativt til browservinduet, så
menuen ikke er synlig for brugeren,
hvis den ikke er blevet aktiveret.
Figur 29 Mobilmenu i funktion
For at aktivere menuen og vise den,
kræver det at der sker ændringer i
menuens styling når der klikkes på
menu-knappen.
Dette er udført ved at manipulere websitets DOM gennem JavaScript;
mere specifikt JavaScriptbibliotektet “jQuery”. Først laves der en funktion,
som sørger for at yderligere funktioner først bliver udført når alt indholdet på siden er indlæst:
$(function() {
...
}
Dette er en forkortelse af jQuerys $(document).ready()-funktion.
Når siden så er blevet indlæst og indholdet er blevet genereret, kan der
gennem jQuery ændres i indholdets struktur.
Da vi ville have mobilmenuen til at vises når der blev klikket på menuknappen i headeren, lavede vi en funktion som blev kørt når der blev
klikket på knappen:
67
$(‘.nav-toggle’).on(‘click’, function(e) {
e.preventDefault();
$(‘.mobile-navigation’).toggleClass(‘show’);
$(‘.wrapper’).toggleClass(‘nav-open’);
$(‘.site-header’).toggleClass(‘move-left’);
$(‘.cloak’).fadeIn();
}
Denne funktion vælger først vores menuknap (.nav-toggle), og siger så, at
funktionen skal udføres når der klikkes på knappen. Den første handling
der udføres i funktionen er, at forhindre eventets (et klik, i dette tilfælde)
standard handling.
Dette gøres, fordi menuknappen også linker til et sitemap der ligger i
footeren. Dette link skal kun aktiveres, hvis brugeren ikke har JavaScript
aktiveret i sin browser, så der stadig er mulighed for at finde rundt på
websitet. På denne måde kan brugere få adgang til navigation, uanset om
de har JavaScript aktiveret eller ej.
Næste handling i funktionen er at få selve menuen til at dukke op på websitet. Da menuen som sagt var stylet til at ligge et antal pixels udenfor viewporten, tilføjes der i funktionen en simpel class med egenskaben right: 0.
Når denne class så bliver tilføjet gennem funktionen, sættes menuens position til 0 pixels fra højre siden af browservinduet, og dukker op som vist
på figur 29.
For at gøre ændringen mere flydende og naturlig, er der sat en transition
på menuen, så den animeres ind, i stedet for blot at dukke op og forsvinde
med det samme. Denne animation er med til at mindske forvirring hos
brugeren, da det ikke blot ser ud som om menuen bare dukker op, men i
stedet “trækkes ind” fra siden, og giver brugeren mere tid til at reagere på
ændringen.
For at sikre at brugerens opmærksomhed bliver ledt til menuen, er der
i funktionen også en handling som “skubber” indholdet på siden til venstre. Ved at gøre dette, signaleres der at det “vigtigste indhold lige nu” er
menuen. Dette forstærker også illusionen om, at menuen er en “skuffe”
der kan trækkes ud for at afsløre nyt indhold.
Sidste trin i funktionen er at lægge et “overlay” over indholdet på siden,
som yderligere signalerer hvilket indhold er i fokus. Menuen kan så lukkes igen ved at klikke på overlayet, som så kører en funktion der fjerner
de ændringer der blev foretaget, da der blev trykket på menuknappen.
68
“Jeres historier”
For at føre vores koncept “jeres historier” til livs på websitet, er der lavet
en side på websitet med titlen “Jeres historier”. På siden er der blandt
andet en sektion, hvor brugernes indsendte historier vises. Udover at vise
brugernes indsendte historier, er der også en funktion som giver brugeren mulighed for at indsende sin historie. Kravene til denne funktion var,
at den skulle være hurtig at bruge, og tilgængelig for alle. Tilgængelig for
alle betyder i dette tilfælde, at brugeren ikke behøver at oprette en konto
på siden.
En af overvejelserne til løsningen af dette problem var at anvende WordPress’ kommentarfunktion på siden. Selvom denne løsning ville give
uregistrerede bruger mulighed for at indsende historier, ville der være
mange begrænsninger.
Den optimale løsning indebar at brugeren kunne indsende forskellige
data; titel på historien, selve historien og deres navn. Derudover skulle
der være en form for godkendelse, inden historien blev fremvist på siden.
For at opfylde disse krav, blev der valgt at historierne skulle indsendes i
form af et indlæg. WordPress’ indlæg giver mulighed for blandt andet at
gemme en titel for indlægget, samt metadata, hvor der kan tilføjes forskellige felter. Som standard i WordPress er det ikke muligt for en uregistreret
bruger at oprette et indlæg. Derfor er der anvendt et plugin; Guest Posts
(https://wordpress.org/plugins/guest-posts/) som gør dette muligt.
Indsendelse af historier
Hvis brugeren har lyst til at indsende sin historie, kan der klikkes på
knappen med teksten “Del din historie!”, hvorved der dukker en formular
op som brugeren skal udfylde. Denne formular er som standard skjult på
siden, og vises kun hvis brugeren anmoder om at se den. Dette er udført
ved brug af jQuery og CSS.
Ligesom mobilmenuen, har formularen CSS-egenskaben position: fixed,
for at den bliver placeret i forhold til browservinduet, og ikke det andet
indhold på siden. Indtil brugeren anmoder om at skrive en historie, er
formularen skjult uden for skærmområdet. Når der så klikkes på “Del din
historie!”, animeres formularen ind fra oven, med en illusion af at den
“flyver ind” på siden. Animationen udføres ved brug af CSS’ transition
egenskab, og er med til at give siden et mere levende og sjovt indtryk.
Når formularen vises, skal brugeren indtaste titlen på historien, selve historien og sit navn, for at indsende “sin historie” til ByPrang. De data som
brugeren indtastede bliver så sendt til WordPress’ database, ved brug af
Guest Posts-modulet.
69
Visning af historier
Historierne bliver automatisk lagt i en bestemt kategori ved navn “Historier”, ved at ændre en variabel i modulet:
$this->category = $cat;
Hvor variablen $cat er ændret til 10, som er ID’et på kategorien “Historier”.
I kombination med dette, kan der på siden vælges kun at vise indlæg fra
historie-kategorien, gennem en WordPress-funktion som giver mulighed
for at ændre i hovedforespørgslen:
query_posts(’cat=10’);
På denne måde bliver der kun vist indlæg fra “Historier”, da der kun bliver forespurgt om indlæg fra den kategori.
Efter denne forespørgsel kører WordPress et såkaldt “loop”, og tager hver
enkelt indlæg som passer med forespørgslens kriterier. I dette tilfælde er
den eneste kriterie, at indlægget skal være fra “Historier”-kategorien.
Inde i loop’et har vi nogle forskellige WordPress-funktioner, som henter
værdier om forskellige attributter, fra tabellen med indlæg i WordPress’
database, og visualiserer dem gennem HTML.
I dette tilfælde er der brug for titlen på historien, selve historien og hvem
der har skrevet den:
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
<span>
Skrevet af <?php echo get_post_meta( get_the_
ID(),’author’, true ); ?>
</span>
the_title() og the_content() henter titlen og indholdet for det nuværende indlæg, som bliver behandlet i loop’et. ‘Grunden til at der ikke er
brugt funktionen the_author() til at vise, hvem der har skrevet historien, har at gøre med måden som historierne bliver oprettet på.
For at man kan oprette et indlæg i WordPress, kræver det at en registreret bruger er tilknyttet som forfatter. I dette tilfælde er forfatteren sat
til ByPrangs konto, som også ville dukke op som forfatteren, hvis the_
author() blev brugt.
Derfor hentes der metadata for indlægget, som er specielle værdier som
kan tilføjes til indlæg. Til historierne bruges der to felter med data: author
og my-post-likes. Det første felt er der hvor brugerens navn opbevares, og
hentes i koden vist foroven gennem get_post_meta() funktionen. Det andet
felt er til at opbevare “likes” for hver historie.
Like-systemet er baseret på et modul skrevet af Gabriele Romanato (http://
gabrieleromanato.name/implementing-an-ajax-like-system-on-wordpressposts/), som anvender en WordPress-funktion til at registrere og gemme
“likes” på indlæg. Modulet registrerer når en bruger klikker på like-knap70
pen, og sender en forespørgsel til serveren om, at øge antallet af likes for
indlægget med 1.
Denne like-funktion kan bruges af alle, uanset om de er logget ind på
siden eller ej. Dette medfører, at der ikke er nogen begrænsning for, hvor
mange gange den samme person kan like en historie. Derfor har vi anvendt HTML5 Local Storage, som kan gemme data på clientside. Der er
anvendt local storage i stedet for cookies, fordi det både er mere sikkert
for brugeren og ikke påvirker websitets ydelse, da de gemte data aldrig
bliver overført til serveren.
LocalStorage-objektet bliver gemt i brugerens browser, når der klikkes på
like-knappen. Dette er udført ved at tilføje nogle linjer kode til like-modulets JavaScript-kode:
if (localStorage[’hasLiked’ + id] == ”1”){
e.preventDefault();
}
Dette stykke kode er indsat i funktionen som opdaterer antallet af likes.
Det tjekker om der allerede findes et localStorage-objekt for den specifikke historie, identificeret gennem “id”-variablen, som har historiens
ID som værdi. Hvis der ikke findes et objekt med samme navn og værdi,
fortsætter like-funktionen som normalt:
else {
e.preventDefault();
$.getJSON( url, data, function( json ) {
if( json && json.count ) {
$count.text( json.count ); // Update the count without page refresh
}
});
localStorage.setItem(”hasLiked” + id, 1);
}
Hvor der til sidst defineres et localStorage-objekt med navnet “hasLiked”
og ID’et på historien, for eksempel. “hasLiked23”, og værdien “1”. Dette
objekt bliver så gemt, og sørger for at hver person kun kan like én gang
per historie. Dette kan selvfølgelig forbigås, hvis brugeren sletter objektet,
eller anvender en anden browser.
71
Video på forsiden
På forsiden er der implementeret en videobaggrund, som er med til at
skabe en stemning, samt give brugere en idé om hvem ByPrang er. Der
er desuden mulighed for at se den fulde video, hvis der klikkes på afspilningsknappen.
Baggrundsvideoen, som automatisk går i gang når brugeren kommer ind
på siden, er lavet ved brug af HTML5 Video.
Figur 30 forsiden med video loop
<video id=”video-loop” poster=”/img/preload.jpg” auto
play=”autoplay” preload=”auto” loop>
<source id=”video-source” src=”/img/loop.mp4” ty
pe=”video/mp4”>
</video>
Der er brugt HTML5 video for at undgå at bruge unødvendige plugins,
som for eksempel. flash, til at vise videoen. Videofilen der indlæses i koden er et 10-sekunders loop, bestående af klip fra præsentationsvideoen.
Dette er for at give brugeren en idé om hvad videoen handler om, samt
skabe nysgerrighed.
For at den korte video loader forholdsvist hurtigt, er den komprimeret til
en filstørrelse på ~4MB. Inden videoen er loadet færdig, vises det første
billede derfra som et statisk billede, ved brug af poster-egenskaben. Da
det er meningen at videoen skal gentages, er funktionen loop også blevet
anvendt.
Når der klikkes på play-knappen, bliver baggrundsvideoen pauset og den
fulde video dukker op.
72
Figur 31 iframe med video
Når videoen bliver vist dukker overlayet, som også anvendes i forbindelse
med mobilmenuen, op. Dette er for at brugeren nemmere kan fokusere på
videoen, og ikke så nemt bliver distraheret af andet indhold på siden. Når
brugeren har set videoen færdig, kan den lukkes ved at klikke på krydset
i højre hjørne. Videoen forsvinder så, og det oprindelige indhold på siden
“fader” så ind igen.
Der er valgt at hoste videoen på YouTube, både for at spare plads og trafik
på ByPrangs server, men også for at sikre at brugeren hurtigt kan se videoen. YouTube gemmer videoer i forskellige kvaliteter, så uanset om brugeren har en hurtig eller langsom forbindelse, vil det altid være muligt for
dem at se videoen.
Videoen er indlejret ved brug af en iframe.
For at løse de forskellige interaktionsopgaver vi har haft i forbindelse med
dette projekt, har vi gjort brug af WordPress og dets funktioner og plugins, samt HTML5 og CSS3 for at strukturere og designe løsningerne. Der er
også blevet anvendt JavaScript-biblioteket jQuery, til at løse opgaver hvor
de andre værktøjer ikke har været tilstrækkelige. Til det overordnede
design og struktur af produktet, er der blevet skabt et WordPress theme,
hvor der er taget udgangspunkt i startertemaet Underscores.
73
Usability test
Vi besluttede os for at teste vores backend på Birgitte fra ByPrang, for at
sikre os at kunden selvstændigt kunne benytte sig af produktet uden problemer. Backend i dette tilfælde, er WordPress’ administrationsside, hvor
der kan tilføjes, redigeres og fjernes indhold på siden. Til denne test blev
der skabt fire forskellige opgaver, som alle ville være opgaver som kunden kunne støde på i fremtiden:
Opret en produktkategori (Watch Out)
Denne opgave blev lavet, for at undersøge hvorvidt brugeren var i stand
til selv at oprette en ny produktkategori til webshoppen. Dette var især
relevant for ByPrang, da de ønsker at udvide deres produktsortiment i
fremtiden. For at gøre opgaven mere “ægte” valgte vi, at lade brugeren oprette en kategori, som allerede er en del af ByPrangs produktsortiment.
Opret et nyt produkt i Watch Out-kategorien
Denne opgave blev lavet i forlængelse af den første opgave. Formålet med
denne var, at undersøge om brugeren selv kunne finde ud af at oprette et
nyt produkt, og derefter tildele det den rette kategori.
Skriv en nyhed
Denne opgave blev lavet, for at se om
brugeren selv var i stand til at skrive
en nyhed til forsiden.
Læs og godkend en historie
Den sidste opgave blev lavet, for at undersøge om brugeren var i stand til at
bruge det koncept, som der var udviklet i forbindelse med projektet.
Inden testen blev udført, var der foretaget ændringer i udseendet og informationsarkitekturen på backenden,
med den specifikke bruger; Birgitte
Prang, i tankerne. For at undgå at
skabe forvirring hos brugeren, blev
der ændret i brugeroverfladen ved
hjælp af et plugin kaldet “WP Admin
UI Customize”. Med dette plugin var
det muligt at fjerne elementer som var
vurderet unødvendige for den specifikke bruger, samt ændre overskrifter
på de forskellige elementer.
figur 32 backend menu
74
Brugertesten startede ud med at
brugeren blev introduceret til hvad
testen ville omhandle. Efter at have
fået en kort introduktion til backenden, fik brugeren stillet den første
opgave (opret en produktkategori).
Da vi allerede inden testen havde
fjernet nogle unødvendige kategorier i menuen inden testen, fik
brugeren navigeret sig hen til målet forholdsvist nemt. Der opstod
dog problemer da brugeren havde
indtastet informationer til den nye
Figur 33 Oprindelige udgiv sektion
kategori. Brugeren var usikker på,
hvordan kategorien blev oprettet, og
havde svært ved at finde knappen “Tilføj ny produktkategori”.
Efter kategorien blev oprettet, blev brugeren bedt om at tilføje et produkt
til den. Brugeren fandt hurtigt menupunktet “Tilføj nyt produkt”, og fik
skrevet en titel og beskrivelse til produktet. Herefter opstod der forvirring
i forbindelse med hvor mange felter der skulle udfyldes på siden. Brugeren havde den opfattelse, at alle tekstfelterne vedrørende produktdata
skulle udfyldes. Da produktet endeligt skulle oprettes, opstod der forvirring i forhold til hvilken knap der skulle trykkes på.
Opgaven om at skrive en nyhed gik forholdvist uden problemer. Da
layout’et af siden der blev anvendt til denne opgave var stort set identisk
med siden fra den forrige, var brugeren hurtig til at skrive og oprette en
nyhed.
Til den sidste opgave, fik brugeren forklaret at der skulle findes indlæg
fra “Historier”-kategorien. Der var i starten lidt forvirring omkring dette, men brugeren fandt hurtigt ud af at se indlæg fra kun én kategori. Da
indlæggene fra historiekategorien blev vist, og brugeren skulle læse og
godkende en ny historie, opstod der forvirring. Brugeren havde svært ved
at finde ud af, hvad der skulle klikkes på, for at udføre opgaven.
Efter brugertesten blev afsluttet, gennemgik vi videooptagelserne derfra.
Ud fra dette, kom vi frem til nogle elementer, som krævede ændring. Disse
elementer blev så ændret gennem CSS-styling af de ønskede elementer.
“Tilføj ny produktkategori”-knappen
Som standard er denne knap en forholdsvis lille knap, som brugeren i
testen havde svært ved at finde frem
75
Figur 34 Tilføj ny produktkategori
til. Derfor er størrelsen af knappen ændret, for at give brugeren et indtryk af,
at knappen har en vigtig funktion for Figur 35 Revideret ny produktkategori
siden. Derudover er knappens skriftlige beskrivelse ændret fra “Tilføj ny
produktkategori” til “Opret ny produktkategori”. Dette er gjort, for at give
brugeren en klar forestilling om, hvad knappens funktion er. At “oprette”
noget giver en bedre idé om, at der bliver skabt noget nyt, end ordet “tilføj” gør.
“Udgiv”-knappen
Denne knaps funktion igennem
brugertesten var, at gemme og udgive det indhold, som brugeren havde
skrevet. Derfor var det vigtigt, at
denne knap nemt kunne findes, og
at dens funktion var tydelig. Som der
kan ses på figur 36 er “udgiv”-knappens eneste forskel fra de andre
knapper dens kontrast. Dette viste
sig i brugertesten ikke, at være tilstrækkeligt for at brugeren kunne
skille den ud fra “mængden”. Derfor
er knappen blevet forstørret og givet
sin egen linje at stå på. Ved at gøre
dette skiller den vigtigste knap sig
Figur 36 Revideret udgiv sektion
signifikant ud fra de to andre, mindre
vigtige knapper.
Indlæg
På indlægssiden, hvor der er en oversigt over alle
indlæg, er der foretaget en mindre ændring. Denne
ændring er synligheden af “Redigér”-linket, som viFigur 37 Rediger indlæg
ses under hvert indlæg i oversigten. Som standard,
og i brugertesten, er dette link skjult, indtil man
bevæger musen over et bestemt indlæg. Derfor er der ændret, så linket til
at redigére et indlæg altid er tilgængeligt og synligt for brugeren
I denne interne brugertest er der blevet undersøgt modtagerens (Birgitte
Prang, i dette tilfælde) kognitive og konative reception af websitets administrative del. Der blev observeret, at mange af de ønskede konative
funktioner ikke blev modtaget, som det var ønsket. Derfor blev der efter
brugertesten foretaget visuelle ændringer af disse funktioner, så de bedre
passede til den specifikke brugers behov.
76
Konklusion
Problemet som der er arbejdet med i dette projekt er: “ByPrang har nogle værdier og holdninger som bliver udtrykt i deres produkter. Hvordan
stemmer disse overens med den moderne forbrugers værdier, og hvordan
formidles og markedsføres disse gennem en video og et website? Hvordan
sørges der for at websitets backend er brugervenlig, så den kan anvendes
af ByPrang?”.
Dette problem er blevet besvaret gennem forskellige aspekter af projektet.
Først og fremmest er den moderne forbrugers værdier blevet undersøgt
og analyseret, blandt andet gennem en trend- og tendensanalyse, og opsummeret i en brugerprofil. I forhold til videoen er der blevet fokuseret
på de værdier og informationer om ByPrang, som er vigtigst for målgruppen. De værdier og holdninger, som er fælles for ByPrang og den moderne forbruger, er blevet formidlet på websitet ved brug af forskellige
kommunikations- og designteorier. Selve websitet og dets funktioner er
blevet udarbejdet og implementeret ved brug af WordPress. Til at realisere designet af websitet, er der anvendt HTML, CSS og jQuery i form af et
unikt WordPress tema.
Der er løbende i projektet foretaget receptionsanalyse af forskellige aspekter af produktet. Dette har blandt andet været i form af en kognitiv- og
konativ receptionanalyse, hvor klientens forståelse for den administrative
del af websitet er blevet undersøgt. Derudover er der blevet undersøgt,
hvorvidt den emotionelle reception af designet stemte overens med, hvad
der var forsøgt at kommunikere.
Resultatet af dette projektforløb er en multimedieløsning, som formår at
kommunikere ByPrangs værdier og holdninger til den ønskede modtager.
Løsningens backend er desuden tilpasset klientens behov og brugeradfærd.
77
Perspektivering
Vi vil i fremtiden gerne tilføje en funktion til siden ‘Jeres Historier’. Det
skal gå ud på at man kan tilføje og søge efter ‘tags’ i historierne. Dette er
mest set ud fra et scenarie hvor der kommer mange besøgende som opretter et indlæg på siden. Hvis det blev tilfældet, kunne det være rart med
en funktion så man kunne søge efter ‘keywords’. Det kunne også være
med til at opdele historierne i kategorier, så man har mulighed for at læse
historier indenfor et specifikt tema.
En anden ting er en engelsk version af hjemmesiden. Dette er grundet
ByPrang i forvejen har enkelte tilhængere fra udlandet. Desuden ønsker
ByPrang at de i fremtiden kan fungere på et internationalt marked, hvilket selvfølgelig kræver at hjemmesiden er mulig at forstå for udenlandske
brugere.
Vi vil også gerne udføre usabilitytest af hjemmesiden. Vi kunne godt
tænke os at være helt sikre i at denne hjemmeside er forståelig og nem at
bruge for nye brugere. En større undersøgelse kunne være aktuel for at få
valideret at hjemmesiden er til at finde rundt i, samt at den ikke har underlige, unødvendige eller forkert placeret elementer og funktioner.
Til sidst ønsker vi at implementere 2 funktioner mere. Den ene er at blive
mere kompatibel med Internet Explorer. Over de sidste mange år er brugen af IE faldet voldsomt. Der er kommet nye, hurtigere og mere brugervenlige browsere til. Dog er der stadig omkring 8% som vælger at bruge
IE. http://www.w3schools.com/browsers/browsers_stats.asp
Websitet vises ikke korrekt i IE, grundet en renderingsfejl i forbindelse
med .SVG-filer. Den sidste ting vi vil implementere er en knap som hører
til køb af produkterne. Det er en ekstra knap som spørger om brugeren
har lyst til at betale lidt ekstra, hvor differencen er en donation til et velgørende formål. Dette var et koncept vi havde udtænkt til ByPrang, som
stemte overens med deres mål om at være personlige, venlige og tænke på
andre. Men knappen blev ikke tilføjet, da vi prioriterede andre opgaver
højere.
78
Ansvarsliste
Daniel
Design af hjemmeside
Design af grafiske elementer
Mockups
Wireframes
Design afsnit
Nicolai
Produktion af video
Interview
Wireframes
Mockups
Tekstforfatning til hjemmeside.
Video afsnit
Thomas
Udvikling af hjemmeside
Tekstforfatning til hjemmeside
Trend og Tendensanalyse
Interaktions afsnit
Produktbilleder
79
Literaturliste:
Bøger:
Allen, J. & Chudley, J., 2012. Samshing UX Design Foundations for designing Online
User Experiences. West Sussex: John Wiley & Sons.
Busch, A. M., Engelby, D., Andersen, G. M. og Larsen, T., 2011. Kommunikation i Multimediedesign. København K: Hans Reitzels Forlag.
Fischer, L. H. & Oosterbaan, M., 2010. Digital Media Management. Nyt Teknisk Forlag.
Fog, K., Budtz, C. & Yakaboylu, B., 2009. Storytelling - Branding i praksis. 1. Udgave.
Samfundslitteratur
Garrett, J. J., 2011. The Elements of User Experience. 2. Udgave. New Riders
Kjær, H., Skriver, H.J. og Staunstrup, E., 2007. Organisation. 4. Udgave. Nykøbing F:
Trojka A/S
Thurlow, M., Thurlow, C., 2013. Making short films. London: Bloomsbury Academic.
Hjemmesider:
Baltimoresun.com, 2015. Debate swirls around CEO pay <http://www.baltimoresun.
com/business/bal-bz.ex.payequity15may15-story.html> anvendt d. 06.05.2015
Benjerry.com, 2015. VT GMO labeling law clears another hurdle <http://www.benjerry.com/whats-new/vermont-gmo-labeling-law> anvendt d. 06.05.2015
Dst.dk, 2015. Elektronik i hjemmet. <http://www.dst.dk/da/Statistik/emner/forbrug/
elektronik-i-hjemmet.aspx> anvendt d. 29.04.2015
Europa.eu. 2014. Corporate social responsibility. <http://ec.europa.eu/enterprise/policies/sustainable-business/corporate-social-responsibility/index_en.htm> anvendt d.
05.05.2015
Forbruger.dk, 2014. Danskerne har korte forhold til mobiltelefonen. <http://www.
forbrug.dk/Nyheder/2014/Danskerne-har-korte-forhold-til-mobiltelefonen?tc=DE142FD96A3649D99E32069646132286> avendt d. 29.04.2015
Gabrieleromanato.name, 2014. Implementing an AJAX “Like” system on WordPress
posts <http://gabrieleromanato.name/implementing-an-ajax-like-system-on-wordpress-posts/> anvendt d. 22.05.2015
Hbr.org, 2012. Three myths about what customers want <https://hbr.org/2012/05/
three-myths-about-customer-eng> anvendt d. 04.05.2015
80
Mintel.com, 2010. Is time ticking for the watch? One in seven brits claim they have
no reason to wear one <http://www.mintel.com/press-centre/technology-press-centre/is-time-ticking-for-the-watch-one-in-seven-brits-claim-they-have-no-reason-towear-one> anvendt d. 03.05.2015
Nielsen.com, 2014. Global Consumers are willing to put their money where their
heart is <http://www.nielsen.com/us/en/press-room/2014/global-consumers-are-willing-to-put-their-money-where-their-heart-is.html> anvendt d. 05.05.2015
Nike.com, 2005. Thierry Henry and Fellow Players Call on Fans to Fight Racism<http://news.nike.com/news/thierry-henry-and-fellow-players-call-on-fans-to-fight-racism> anvendt d. 02.05.2015
Northernmakers.com, 2015. Cladies<http://claydies.northernmakers.com/store/products/true-feelings-tea-light-holder/> anvendt d. 07.05.2015
Pewinternet.org, 2015. Social Media Update 2014 <http://www.pewinternet.
org/2015/01/09/social-media-update-2014/> anvendt d. 16.05.2015
Scrum Alliance, 2015. Learn about Scrum. Tilgængelig på <https://www.scrumalliance.org/why-scrum> anvendt d. 15.04.2015.
Systime.dk, 2015. SWOT-Opstilling/SWOT-Analyse. Tilgængelig på <http://toolbox.
systime.dk/index.php?id=588> anvendt d. 22.04.2015.
TheConversation.com, 2013. Spin: Lance Armstrong’s confession and Livestrong’s
future <http://theconversation.com/spin-lance-armstrongs-confession-and-livestrongs-future-11616> anvendt d. 02.05.2015
Trendwatching.com, 2014. Post demographic consumerism <http://trendwatching.
com/trends/post-demographic-consumerism/> anvendt d. 04.05.2015
W3schools.com, 2015 Browser Statistics <http://www.w3schools.com/browsers/
browsers_stats.asp> anvendt d. 01.06.15
Wistia.com, 2012. Does length matter? It does for video <http://wistia.com/blog/doeslength-matter-it-does-for-video-2k12-edition> anvendt d. 25.05.2015
PDF
E & Y., Year. This time it’s personal: From consumer to co-creater. Ernest and Young.
Tilgængelig på: http://www.ey.com/Publication/vwLUAssets/This_time_it_is_personal_-_from_consumer_to_co-creator_2012/$File/Consumer%20barometer_V9a.pdf
81
Bilag
Billag 1 - Spørgsmål til interview
Præsentation:
Start med at introducere jer selv. (Hvad er jeres navn, hvor gamle er i, hvor kommer i fra?)
Hvad er jeres forhold? (hvor længe har i været gift?)
Hvor mange børn har i?
Hvad er jeres ‘baggrund’? Hvad har i arbejdet med de sidste par år?
Tourettes:
Fortæl om Tourettes og hvordan i har fået det ind på livet.
Ved i hvor mange % af befolkningen der har Tourettes? Eller har i andre statistikker?
Er der forskellige former/grader af Tourettes?
Kan man blive helt symptomfri?
Hvornår opdagede i det?
Hvordan har det påvirket jeres liv?
Hvad har i gjort for at håndtere det?
Hvad har de største udfordringer været pga. det?
Hvordan påvirker det jer idag? (nu når børnene er ældre?)
Gør i noget aktivt for at oplyse andre om det/støtte til formål indenfor genren?
Firmaet:
Hvad er byprang.dk?
Hvem er byprang.dk?
Hvordan opstod idéen til byprang.dk?
Hvornår besluttede i jer for at i ville starte byprang.dk? Hvorfor?
Hvad er tanken bag? Hvorfor valgte i at gå i den her retning?
Hvad vil du/i gerne have ud af byprang.dk?
Historier:
Hvad er jeres historie?
Har i planer om at implementere andres historier? Hvordan?
Hvilke historier interesserer jer?
Har andres historier betydning for jer/byprang.dk? Hvorfor?
Hvad kan i/du/man bruge historierne til?
Hvorfor vil i gerne have et nyhedsbrev? Hvad vil i bruge det til?
82
Produkter:
Fortæl lidt om urene.
Hvem er de designet af?
Hvorfor ure? / Hvorfor sælger i lige præcis ure?
Hvor mange antal af hvert ur bliver der lavet? Hvorfor?
Hvad repræsenterer urene? (Hvilke historier ligger bag? - Har hvert ur en historie?)
Har i gjort jer af tanker omkring priser? Hvorfor disse priser?
Har i tænkt jer at udvide med flere produkter?
Hvorfor disse produkter? Bliver der også et begrænset antal af disse?
Butikker:
Hvilke butikker har i planer om at sælge urene i?
Hvilket formål støtter det/de?Hvad repræsenterer urene? (Hvilke historier ligger
bag? - Har hvert ur en historie?)
Har i gjort jer af tanker omkring priser? Hvorfor disse priser?
Har i tænkt jer at udvide med flere produkter?
Hvorfor disse produkter? Bliver der også et begrænset antal af disse?
83
Bilag 2
84
Bilag 3 - Kvantitativ dataindsamling
Se ekstra materiale
85
86
87
88
89