Vejleder: Tina Østergaard Filsø - Rikke Lind - Hanne Skov Bertelsen - Thomas Bøye Jessen

Transkript

1 Projekt forside Gruppe medlemmer: Steffen Biering Dressø Dato for aflevering: 18. december 2015 Vejleder: Tina Østergaard Filsø - Rikke Lind - Hanne Skov Bertelsen - Thomas Bøye Jessen Projekt titel: Online portfolie Semester: 1. semester Antal kopier: 1 Antal anslag (inkl. mellemrum): Dette projekt er inkluderet (kryds med x) Rapport Separate bilag X X DVD/USB Andre ting beskriv Link til webside: Hvis projektet er udviklet til et eksternt firma. Hvilket? Navn, adresse: Må denne opgave blive offentliggjort til inspiration for andre studerende? (sæt kryds) Ja Nej X

2 Indholdsfortegnelse Indholdsfortegnelse... I Liste over figure... III 1. Introduktion Problemstilling Teori HOME Bollemodellen C.R.A.P Persona Usability Programmering Metoder Foranalyse Undersøgelse Tidslinje Bollemodellen Formål og Præmis Indhold Målgruppe Afsender / SWOT Mediet I

3 Kommunikationsmiljø Udformningen Effekt Design Realisering Resultat Flowchart Moodboard Wireframe Test Slut resultat Diskussion Usability & Prototyping Programmering Konklusion...25 References...I Bilag...II II

4 Indholdsfortegnelse Figur 1 - HOME modellen... 2 Figur 2 - Timeline... 7 Figur 3 - Persona male...9 Figur 4 - Persona female Figur 5 - SWOT Figur 6 - Designmanual Figur 7 - Flowchart...15 Figur 8 - Wireframe index Figur 9 - Moodboard Figur 10 - Wireframe work Figur 11 - Wireframe about Figur 12 - Paper prototype about...20 Figur 13 - Paper prototype rapporter Figur 14 - Final index page Figur 15 - Final work page...22 III

5 1. Introduktion Vi lever nu i en høj teknologisk tidsalder, hvor det at lave et helt almindeligt CV samt ansøgning ikke altid anses som værende tilstrækkeligt. Det kan derfor være en god ide at skabe noget kreativt, der fanger arbejdsgiverens interesse og skiller sig ud fra mængden. Dette kan løses på mange måder. I denne rapport vil der bliver undersøgt, hvordan det er muligt at skabe et online portfolie. Derudover vil denne rapport dække forskellige metoder, der kan bruges til at opnå dette. 1.1 Problemstilling Hvordan kan en hjemmeside designes for at opnå et brugervenligt design samt fungere som et portfolie, der rammer min valgte målgruppe? 1

6 2. Teori Denne sektion vil dække teorien bag de forskellige metoder, der vil blive brugt i denne opgave. Dette er gjort for at skabe en forståelse for, hvordan disse metoder er brugt til at løse problem stillingen. 2.1 HOME For at hjælpe med at fastslå hvilken udviklingsmetode, der skal bruges til at løse problemstillingen er HOME analysen valgt. HOME er en metode, der bliver brugt til at udvikle digitale medier, som bruges på forskellige digitale platforme. Den er et bud på at give et helhedsorienteret overblik af udviklingsfasen. HOME metoden indeholder 4 primære trin. Disse trin er med til at sikre en struktureret arbejdstilgang samt skabe system i opgaven. (Fischer & Oosterbaan, 2013) Foranalyse Undersøgelse Design Realisering (Fischer & Oosterbaan, 2013) Figur 1 - HOME modellen Foranalysen bruges til at fastsætte opgavens forudsætninger. Den er med til at sikre, der er lavet nok research til at beslutte hvilken udviklingsmetode, der skal bruges. Dette sker igennem spørgeskemaer, interview og research. (Fischer & Oosterbaan, 2013) 2

7 Undersøgelsestrinnet er fasen, der dækker over størstedelen af den research, der danner grundlag for projektet. Det er bl.a. her konceptet, målgruppen og markedet skal defineres, samt hvor de første ideer testes. Bollemodellen, som er den kommunikationsmodel, der er anvendt i dette projekt, indgår som en del af undersøgelsestrinnet, da den hjælper med at svare på nogle af de spørgsmål, der er med til at definere udviklingsmetoden. Teorien bag bollemodellen beskrives i sektion 2.2. (Fischer & Oosterbaan, 2013) Designtrinnet dækker over to sekundære processer, procesniveau og produktudvikling. Procesniveauet skal sikre, at de beslutninger der blev truffet i det tidligere trin er i fokus. Det er ofte her udviklingsarbejdet begynder. Produktudviklingen er hvor designet skal beskrives, samt struktureres. (Fischer & Oosterbaan, 2013) I realiseringstrinnet skal alle de undersøgelser, der tidligere er lavet, realiseres. Det er her selve programmeringen vil foregå, af det færdige produkt. Den endelige produktudvikling i dette projekt består af en programmeret hjemmeside, der fungerer som et portfolie. (Fischer & Oosterbaan, 2013) 2.2 Bollemodellen Kommunikations modellen der er brugt i denne rapport er Bollemodellen. Dette er for at sikre man opnår et overblik over de mange forhold, der medvirker til at foretage et bevidst valg omkring formidlingen af sin kommunikation. Bollemodellen-i kort form består af en række punkter som er vist nedenfor. (Ingemann, 2002) Formål og præmis Indhold Målgruppe Afsender Mediet K-miljø Udformning Effekt Disse punkter vil blive brugt i udformningen af budskabet, og vil dermed sikre, at designet mest effektivt når målgruppen. 3

8 2.3 C.R.A.P C.R.A.P reglerne anvendes til planlægning af strukturen og designet. C.R.A.P er en forkortelse af fire ord; Contrast, Repetition, Alignment, Proximity. Disse regler er retningslinjer, der skal hjælpe med at skabe et design, der er attraktivt for den valgte målgruppe. Det er derfor vigtigt at anvende denne metode når design processen startes. (Rundle, 2006) Contrast er hvordan man bruger kontraster til at skabe struktur i designet. Ved at bruge contrast korrekt fremstår det tydeligt hvilke elementer, der hører sammen, og hvilke elementer der har forskellige funktioner. (Rundle, 2006) Repetition er at gentage den stil, typografi, osv. man har valgt at bruge i sit design. Det er vigtigt at bruge repetition i designet, da det skaber ro og kan eksempelvis hjælpe med at styre brugerens navigation af hjemmeside. Repetition skaber også en sammenhængende fornemmelse for brugerne. (Rundle, 2006) Alignment er, når man i sin design proces vurderer, hvordan de forskellige elementer er placeret i forhold til hinanden. Det er vigtig at de valgte elementer placeres, så de opnår sammenhæng for igen at skabe struktur i dit design. (Rundle, 2006) Proximity betyder at skabe nærhed. Dette bruges for at visualisere at forskellige elementer hører sammen. (Rundle, 2006) Det fremstår tydeligt, at alle fire processer i C.R.A.P på sin vis har det samme mål, at skabe struktur og genkendelighed i designet. Hvis f.eks. kun tre af de fire punkter opfyldes kan det hurtigt ødelægge det visuelle resultat. 2.4 Persona Persona er et redskab, der ofte bliver brugt i en undersøgelses fase. En persona hjælper afsenderen med at visualisere sin målgruppe. For at lave en god persona, er det vigtigt at dække så mange aspekter som muligt. Man kan sammenligne en persona med at tegne et portræt af en person. Der er i denne rapport givet eksempler på to personaer til visualisering målgruppen. (Steane, 2014) 4

9 2.5 Usability For at skabe et design, der skaber en god bruger oplevelse, er der i design fasen valgt at kigge på hvordan der kan opnås et godt usability design. Usability design er fem komponenter, der tilsammen fortæller hvor nemt og effektivt designet er. (Nielsen, 2012) De fem komponenter er: Learnability: Er designet nemt at lære. Efficiency: Hvor hurtigt brugeren kan gennemføre en stillet opgaven. Memorability: Hvor let er det at huske, når brugeren vender tilbage. Errors: Hvor mange fejl opnår brugerne og hvor let er det at komme tilbage på sporet. Satisfaction: Hvor stor tilfredsstillelse opnår brugeren ved designet. (Nielsen, 2012) Der er flere forskellige definitioner på usability. I denne rapport er definitionen udført af Jacob Nielsen blevet brugt. Dette er valgt, da det menes, at de ovenfornævnte punkter vil sikre opnåelse af et godt usability design. 2.6 Programmering Programmeringen af hjemmesiden vil blive udført i HTML5 og stylet i CSS. HTML5 (HyperText Markup Language) er et kodesprog, der bruges til at strukturere opbygningen af en hjemmeside. Dette sker ved hjælp af forskelige HTML elementer. Det er HTML elementerne, der bestemmer, hvad der skal stå på siden samt hvilke billeder der skal vises. Efter selve opbygningen af hjemmesiden skal kodesprog CSS (Cascading Style Sheets) anvendes. Dette definere hvordan billederne skal placeres, hvilken font samt størrelse en angivende tekst skal have, hvordan skal navigations baren se ud osv. Tilsammen skaber disse to sprog en stor del af de hjemmesider man i dag kan finde på internettet. (Anders, i.d.) 5

10 3. Metoder Denne sektion beskriver de forskellige metoder, der er blevet brugt til at skabe en attraktiv hjemmeside, der henvender sig til den definerede målgruppe samt formidler det korrekte budskab. Metode sektionen er opbygget over HOME modellen. Dette er gjort for at skabe struktur i projektet. 3.1 Foranalyse Foranalysen dækker over den udførte research beskrevet i teori sektionen. Den gennemførte research giver nu en indikation på, hvordan dette kan bruges til at opnå det ønskede resultat for denne opgave. For at opnå en høj bruger oplevelse viser den gennemførte research at dette kan opnås ved at følge de fem usability goals. (Nielsen, 2000) For at finde ud af hvilken udviklingsmetode der er bedst at anvende til denne opgave, er der udført yderligere research, der fortæller, at der kan opnås et godt usability design ved hjælp af udviklingsmetode prototyping. (Nielsen, 2000) For at sikre at der opstår så få fejl som muligt i det endelige produkt, vil der blive udført to test runder. Første test runde vil blive udført i form af en low-fidelity prototype kaldet paper prototyping. Dette gør det muligt at teste, om man har opnået et logisk flow i sit design, samt hvor nemt det er for test grupperne at fuldføre en given opgave. Dette er en billig måde at starte med at afdække de fejl, brugerne eventuelt finder. (Nielsen, 2003) Efter den første test runde er udført, og mulige fejl er blevet rette, kan design fasen begynde. Her vil en anden hurtig og billig løsning være at udvikle en high-fidelity prototype, der giver næste test gruppe en god ide om, hvordan det færdige resultat vil se ud. Dette er en billig og hurtigt måde at opnå resultater, der fortæller om afsender er på rette spor med det ønskede design. Dette muliggør dermed også hurtigt at kunne analysere og implementere feedbacken fra testrunderne i det endelige design. (Nielsen, 2003) 6

11 3.2 Undersøgelse Tidslinje For at give et overblik over de forskellige milestones i projektforløbet, er der udarbejdet en timeline, der hjælper med at holde overblikket samt skabe struktur i projektforløbet. Denne timeline er illustreret nedenfor. Figur 2 - Timeline 7

12 3.2.3 Bollemodellen Som nævnt tidligere er bollemodellen valgt som kommunikations model. Nedenfor er bollemodellen i kort form gennemgået Formål og præmis Formålet med denne opgave er at skabe en attraktiv hjemmeside, der er nem at navigere og samtidig fungerer som et portfolie. Portfoliet skal indeholde det arbejde og de resultater, der er opnået igennem uddannelsen som multimediedesigner. Dette skulle gerne øge job muligheden samt skabe en øget interesse hos en kommende arbejdsgiver. Målet med denne opgave er at opnå en praktikplads Indhold Hjemmesiden opbygges som et portfolie, der indeholder det illustrative arbejde, der er udført gennem multimediedesigner uddannelsen. Derudover er der tilføjet et personligt CV samt projekter fra tidligere uddannelser Målgruppe Den primære målgruppe i denne rapport er defineret som en kommende praktikplads. Mere specifikt en kommende chef da en praktikplads forhåbentlig kan føre til en senere fastansættelse. Som tidligere nævnt vil der blive udført en persona på en mulig kommende arbejdsgiver for at visualisere den angivende målgruppe. Nedenfor udføres der en persona på to forskellige personer fra Mind the Media. Mind the media er et firma i Kolding der specialiserer sig i at skabe digitale løsninger der er målrettet brugerens behov. 8

13 Mand Navn: Mads Henriksen Alder: 35 år Køn: Mand Bopæl: Kolding Civilstatus: Single, men har en hund Personlighed: Introvert, stille og eftertænksom Beskæftigelse: Programmør hos Mind the Media Fritidsinteresser: Computerspil, E-sport, akademiske undersøgelser og webkodning. Erfaringer/uddannelser: Datalogi, webintegrator. Formål med hjemmesiden: Se den ansøgendes udførte arbejde. Scenarie Mind The Media søger en ny praktikant. Mads er ved at gennemgå de forskellige ansøgninger, de har modtaget. Han ser en ansøgning med et link til en hjemmeside der indeholder et portfolie. Han går ind på hjemmesiden og ser, at det indeholder alt det arbejde, den søgende praktikant har udført. Både fra hans nuværende uddannelse og tidligere uddannelse. Derudover er der også et link til et komplet cv. Mads er mest interesseret i hvordan hjemmesiden er programmeret og inspicerer derfor forskellige elementer. Mads finder også de tidligere udførte rapporter spændende. Han synes hjemmesiden er fint udført og finder denne ansøgning interessant, da den ikke ligner alle de andre. Han beslutter sig derfor at indkalde praktikanten til en samtale. Figur 3 - Persona male 9

14 Kvinde Navn: Jette Sørensen Alder: 31 år Køn: Kvinde Bopæl: Vejle Civilstatus: Kæreste igennem 4 år Personlighed: Ekstrovert, snakkende og social. Beskæftigelse: Designer hos Mind the Media Fritidsinteresser: Friluftsliv, byture med veninderne og design. Erfaringer/uddannelser: Uddannet designer på Designskolen i Kolding. Formål med hjemmesiden: Se den ansøgendes udførte arbejde. Scenarie Mind The Media søger en ny praktikant. Jette er ved at gennemgå de forskellige ansøgninger de har modtaget. Hun ser en ansøgning med et link til en hjemmeside der indeholder et portfolie. Hun går ind på hjemmesiden og ser, at det indeholder alt det arbejde, den søgende praktikant har udført. Både fra hans nuværende uddannelse og tidligere uddannelse. Derudover er der også et link til et komplet cv. Jette er mest interesseret i alt det illustrative arbejde, der er udført, hun kan lide hvad hun ser, og kalder derfor den ansøgende praktikant til en samtale. Figur 4 - Persona female 10

15 Afsender / SWOT Afsenderen i denne situation er Steffen Dressø. Der er udført en SWOT analyse for at undersøge hvilke styrker, svagheder, trusler og muligheder afsenderen besidder. Dette er gjort for at sikre det bedst mulige slut resultat. SWOT analysen er illustreret nedenfor. Figur 5 - SWOT 11

16 Mediet Mediet for denne opgave er en hjemmeside. Distributionen for dette medie kunne være direkte henvendelse til en søgende arbejdsplads. Derudover kunne man uploade sit CV med et link til sit online portfolie på diverse jobportaler. En sidste mulighed ville være, at bruge sit nuværende netværk på de forskellige sociale medier, til at hjælpe med at dele portfoliet Kommunikations miljø Det valgte kommunikationsmiljø er socialt. Kommunikationen kan her foregå både ved hjælp af push- og pull strategien, da det afhænger af hvordan man vælger at formidle informationen om, at man er arbejdssøgende. Kommunikationen på websitet giver mulighed for at potentielle arbejdsgivere igennem søgeord finder den jobsøgende. Her finder push strategien anvendelse, da den jobsøgende her offentliggør sine kompetencer til fri afbenyttelse af alle interesserede. Pull strategien finder anvendelse, hvor den jobsøgende sender sin ansøgning på specifikke job annoncer, og her refererer til websiden, hvor jobudbyderen så kan hente oplysninger og informationer omkring den jobsøgende. Da man er oppe imod andre job/praktik søgende er det vigtigt at man skiller sig positivt ud i forhold til øvrige ansøgere Udformningen Da der med dette portfolie forsøges at opnå en praktikplads er der implementeret både akademisk indhold samt de illustrative resultater der er udført til dags dato. Dette er gjort for at ramme den bredest mulige målgruppe dog med primær udgangspunkt i de to udarbejdede personaer. Derudover er der foretaget en analyse af Mind the Medias egen website som er brugt til inspiration i opbygningen af portfoliet. Dette er gjort for at øge genkendelses effekten og dermed forhåbentlig skabe større interesse Effekt Effekten kan måles i det antal jobsamtaler, man bliver indkaldt til. En anden måde at måle effekten på, er at implementere en hits tæller på siden. Hvis man f.eks. gør sit CV tilgængeligt, med et link til sit portfolie, på forskellige jobportaler, kan man se hvor ofte hjemmesiden bliver besøgt. Google analytics er tilføjet hjemmesiden for at hjælpe med dette. 12

17 3.3 Design Det er nu muligt at starte med at undersøge, hvordan der opnås et design, der opfylder betingelserne for løsning af problemstillingen. En mulighed der kan hjælpe i designfasen er de tidligere nævnte C.R.A.P regler. I designfasen er der udviklet både en low- og high fedelity prototype ved brug af C.R.A.P reglerne. Dette skulle gerne sikre, at der opstår så få design fejl som muligt, i slut produktet. Der vil i forbindelse med udførelsen af de to prototypes udføres to testrunder. For at finde så mange usability fejl som muligt i både flowet samt designet vil test deltageren bliver stillet nogle opgaver der tvinger han/hende til at navigere hjemmesiden. Designmanual Der er udarbejdet en designmanual med en detaljeret beskrivelse af designprocessen. Design manualen er beskrevet nedenfor. Design manualen i fuld størrelse, findes i bilagene. Figur 6 - Designmanual 13

18 3.4 Realisering Efter grundig gennemgang af de tre tidligere punkter og udarbejdelsen af design manualen kan den endelige produktudvikling gå i gang. Selve programmeringen vil foregå i NetBeans ved brug af HTML5 til opbygningen og CSS til at opnå det ønskede design. Hjemmesiden består af 2 undersider samt en footer. Der vil blive brugt jquery til at gøre hjemmesiden responsive til tablets og mobil telefoner. Resultaterne af realiseringen vil blive gennemgået i diskussionen. Work - vil indeholde de resultater der er opnået på multimediedesigner uddannelsen samt resultater fra tidligere uddannelser. About - vil indeholde en beskrivelse af mig som person. Siden vil derudover dække alt om fritidsinteresser, familie og tidligere uddannelser. Her vil det også være muligt at finde et link til et komplet cv hvis dette skulle ønskes. Til sidst kan alle mine kontakt oplysninger samt links til diverse sociale medier findes her. Footeren - vil indeholde genveje til det meste af sidens indhold. 14

19 4. Resultat I denne del af rapporten vil de resultater, der er opnået ved hjælp af de tidligere nævnte metoder blive illustreret nedenfor 4.1 Flowchart Figur 7 - Flowchart 15

20 4.2 Moodboard Figur 8 - Moodboard 16

21 4.3 Wireframe Figur 9 - Wireframe index Figur 10 - Wireframe work 17

22 Figur 11 - Wireframe about 18

23 4.4 Test Som nævnt tidligere ville der i denne opgave blive udført to test runder for at kunne eliminere så mange fejl i det endelige design som muligt. Den første test var udført på en paper prototype. Dette var gjort for at undersøge, om der var opnået et logisk flow i designet. Da der ikke var tid til at udføre en high fidelity prototype blev den anden test runde udført på det endelige produkt. Dette blev ikke kun gjort for at teste for så mange fejl som muligt, men også for at undersøge om der var opnået en høj memorability, da der imellem de to test runder var gået ca. en uge. Test resultatet viste ingen fejl i løsningen af de stillede opgaver. Under en af de stillede opgaver blev think aloud metoden brugt. Dette foregår ved at man beder test deltageren om at tænke højt og dermed forhåbentlig opnår, at der bliver fundet så mange fejl som muligt, samt høre deres førstehånds indtryk. (Nielsen, 2012) Opgave 1: Den første opgave, test deltageren blev stillet, var at finde de opgaver, der var udført på medialogi studiet. Dette blev løst uden problemer. Opgave 2: Den anden opgave var at finde kontakt informationerne på personen der havde lavet hjemmesiden. Igen blev opgaven løst uden fejl. Opgave 3: Den sidste opgave var frit at navigere hjemmesiden, mens think aloud metoden blev brugt. Det medførte, at der blev fundet nogle stave fejl. Derudover fandt test deltageren hjemmesiden simpel og nem. Nedenfor er der illustreret nogle billeder af paper prototypen. 19

24 Figur 12 - Paper prototype about Figur 13 - Paper prototype rapporter 20

25 4.5 Slut resultat Nedenfor er der illustreret et par billeder af det færdige design. Figur 14 - Final index page 21

26 Steffen Biering Dressø Figur 15 - Final work page 22

27 5. Diskussion I denne sektion vil nogle af de metoder, der er blevet brugt som retningslinjer samt de opnåede resultater, blive diskuteret. 5.1 Usability & Prototyping Denne opgave bestod i at designe og programmere en hjemmeside, som skulle fungere som et portfolie for de resultater, der var opnået gennem multimediedesigner uddannelsen. Processen begyndte med at udføre noget research, der skulle hjælpe med at definere hvilken retning dette projekt skulle bevæge sig i. Da beslutningen om at forsøge at skabe et design med en høj user experience blev truffet, prioriterede den udførte research at kigge nærmere på hvordan man kan opnå god usability i designet. Denne beslutning mødte dog nogle udfordringer i udviklingsprocessen, da projektets varighed kun var tre uger. Udviklingsmetoden der blev valgt til at opnå et godt usability design var prototyping. Ulempen ved dette var, at da der skal udføres flere test runder, med flere personer for at sikre sig, man opnår korrekte data, er tre uger lang tid. Prototyping er en udviklingsmetoder, der ofte kræver længere projekt varighed. (Fischer & Oosterbaan, 2013) Som nævnt i resultat sektionen af denne rapport, blev der udført en testrunde, af en enkelt person, på et paper prototype. For at sikre designet opnår en høj usability skal der være en test gruppe på minimum fem personer. Flere studier udført af Jacob Nielsen fra Neilsen Norman Group viser at 75% af alle usability problemer kan findes ved en test gruppe på fem personer. (Nielsen, 2000) Selvom tiden var knap til denne udviklingsmetode menes det dog stadig, at prototyping er en god udviklingsmetode, da det i sidste ende giver et resultat, der er nemt at vedligeholde grundet grundig dokumentation. (Fischer & Oosterbaan, 2013) Ved brug af prototyping med fokus på at opnå høj usability sikrer man samtidig også, at produktet er gennemtestet, og den gennemsnitlige bruger finder hjemmesiden nem og rar at bruge. Da dette skal fungere som et portfolie, der er en del af et CV, der hele tiden bliver opdateret, kan dette i sidste ende vise sig at være tidbesparende og nem at vedligeholde. Der kan dog argumenteres for, at det er unødvendig at teste for usability problemer, da hjemmesiden er simpel og kun har få funktioner. En anden mulighed for at sikre, at den korrekte udviklingsmetode blev valgt, kunne være at lave et spørgeskema til produktdefinitionen i foranalysen. Besvarelserne kunne derefter været blevet holdt op imod forskellige udviklingsmoder for at sikre den mest effektive metode bliver valgt. Dette kunne hjælpe med at se hvilke paradigmer udviklingen skal vægte. (Fischer & Oosterbaan, 2013) 23

28 5.2 Programmering Som nævnt tidligere blev hjemmesiden opbygget i diver, der blev tildelt en bestemt class eller id. Dette hjalp med at skabe struktur i koden, og gjorde det nemmere at ramme det ønskede element i CSS en. Da CSS en blev på omkring 650 linjer, var det vigtigt at dele de forskellige sider op med et kommentarfelt. Dette gjorde, at det var nemmere at vende tilbage til eller finde den ønskede class/ id, når man sprang mellem HTML koden og CSS en. Der blev på alle HTML sidernes head tilføjet et script med et link til jquery for at gøre det muligt at gøre siden responsive. Scriptet er indsat neden for. <script src="js/jquery min.js" type="text/javascript"> Som nævnt ovenfor gjorde det, det muligt at gøre siden responsive. I CSS en blev der i bunden, efter det ønskede design var opnået, only screen and (max-width : 1366px){} hvor det stykke kode, der skulle overskrive den oprindelige kode blev tilføjet. Dette medførte, at når siden nåede en bestemt bredde, overskrev den kode, der var indsat mellem tuborg klammerne, koden fra den valgte class/id. Det var kun nødvendigt at indsætte den kode, man ønskede der skulle ændres da class en/id et arvede resten fra den oprindelige kode. Der blev dog kun valgt at gøre siden responsive til tablets og mobil telefoner, da siden ellers virkede optimalt. Efter selve opbygningen blev de forskellige elementer på siden stylet. Dette skete ved hjælp af en effekt kaldet hover. Dennes funktion er at ændre noget ved et element, når musen hover over det. Hover blev her brugt til at ændre farven på både navigationen samt footeren. Hover blev også tilføjet til forskellige billeder for at skabe repetition og proximity mellem dem og navigationen, som også er knapper, for at fortælle brugerne, at disse elementer også fungerer som en knap. Der er skabt alignment i designet ved at holde den samme stil igennem hele designet. Der er usynlige lodrette linjer, der skaber en god struktur på alle sider. Der er også tænkt over at holde forskellige skrifttyper på et minimum for ikke at skabe forvirring. Der blev senere opdaget, at hjemmesiden ikke virkede på alle platforme. Løsningen var at tilføje, -webkit, -moz, -ms og -o til alle transform, translate og transition. Dette løste problemet. Det er tydeligt at selve realiseringsfasen af dette projekt var yderst lærerigt. Den opnåede indlæring har givet et bedre overblik over, hvordan en hjemmeside kan opbygges. Dette vil være til stor nytte i næste projekt, da der i tidsplanen kan spares tid på opbygningen og bruges mere tid på at opnå et godt finish. 24

29 6. Konklusion For at kunne løse problemstillingen for dette projekt, var det vigtigt at afdække forskellige teoretiske aspekter for at skabe en forståelse for de brugte metoder. Den valgte udviklingsmetode, prototyping, viste sig at være en metode, der kræver en længere tidsramme, end der var stillet til rådighed for dette projekt. Derudover kan der argumenteres for, at det ikke er nødvendigt at teste for usability fejl på en hjemmeside, der har så lav funktionalitet. Det er også vigtigt at huske at ifølge Jacob Nielsen (2000) skal der fem personer til for at finde 75% af alle usability fejl. Med disse faktorer i mente, kan det konkluderes, at det gennem den udførte testrunde lykkedes at skabe en attraktiv hjemmeside, der samtidig er brugervenlig. Det kan også konkluderes, at det lykkedes at udføre et design der ville ramme målgruppen (de beskrevne personaer). 25

30 Referencer Anders. (i.d.). Webdesigner.dk. Hentet fra Hvad er HTML og CSS og hvorfor bruge tid på sætte mig i det?: Fischer, L. H., & Oosterbaan, M. (2013). Digital Media Management. København: Nyt Teknisk Forlag. Ingemann, B. (2002). Den nye Bollemodel. Hentet fra Roskilde Universitet: dk/~bruno/ingemannkomm/2002_nyebollemodel.pdf Mind the Media. (i.d.). Mind the Media. Hentet fra se hvad vi kan: Nielsen, J. (19. marts 2000). Why You Only Need to Test with 5 Users. Hentet fra Nielsen Norman Group: Nielsen, J. (14. april 2003). Paper Prototyping: Getting User Data Before You Code. Hentet fra Nielsen Norman Group: Nielsen, J. (16. januar 2012). Nielsen Norman Group. Hentet fra Thinking Aloud: The #1 Usability Tool: Nielsen, J. (4. januar 2012). Usability 101: Introduction to Usability. Hentet fra Nielsen Norman Group: Rundle, M. (10. april 2006). How C.R.A.P is Your Site Design. Hentet fra Treehouse: teamtreehouse.com/how-crap-is-your-site-design Steane, J. (2014). The Priciples & Processes of Interactive Design. London, New York: Bloomsbury Publishing Plc. I

31 Bilag Bilag 1 - Designmanual II