Projekt C - Udvikling af multimedieløsning for ByPrang
Transcription
Projekt C - Udvikling af multimedieløsning for ByPrang
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