Rapport Studiemad Fase 2
Gruppe 6 Morten Møller Nielsen Mikael Lund Kristensen Ian Mika Sahlertz
Indholdsfortegnelse Problemformulering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Afgrænsning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Indledning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Projektplan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . PBS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . WBS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Estimering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Implementeringsplan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Valg af skærmstørrelser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mobil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tablet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Skærm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Designvalg . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mobil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tablet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Skærm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Infographics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Kvalitetskrav (FURPS) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Brugertest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Procesevaluering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Bilag 01: Gantt chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 02: Implementeringsplan (Økonomisk estimat) . . . . . . . . 03: Responsive design . . . . . . . . . . . . . . . . . . . . . . . . . . . . 04: Brugertest (Testperson 1) . . . . . . . . . . . . . . . . . . . . . 05: Brugertest (Testperson 2) . . . . . . . . . . . . . . . . . . . . . Faktaark . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
s. 1 s. 1 s. 1 s. 2 s. 2 s. 2 s. 2 s. 3 s. 4 s. 4 s. 4 s. 4 s. 5 s. 5 s. 5 s. 5 s. 5 s. 6 s. 7 s. 8 s. 9 s. 10 s. 11 s. 12 s. 13 s. 14
Problemformulering
Kampagnens krav
Hvordan kan STUDIEMAD optimeres til forskellige brugergrænseflader og skærmstørrelser? Hvilke krav stille dette til valg af design?
Vi blev i forrige opgave hyret af Sundhedsministeriet til at skabe en visuel identitet for deres kampagne ”STUDIEMAD”. Kampagnen skulle have fokus på sund og billig mad til studerende i alderen 19-25 år.
Afgrænsning STUDIEMAD skal optimeres til tre forskellige skærmstørrelser. Navigationen skal understøttes af forklarende piktogrammer. Sitet skal indeholde et ”brugerregistrerings-skema”, som skal valideres med javascript.
Denne opgave er en videreudvikling af samme kampagne. En række andre interessenter har meldt sig på banen. Økologisk Landsforening vil gerne støtte projektet med studierabatter på økologiske varer hvorfor ”ugens artikel” bringes i samarbejde med dem. Derudover har Fødevareministeriet vist interesse. De vil gerne have information om brugerne til statistisk brug og vil til gengæld bidrage økonomisk til kampagnen.
Indledning Livsstil herunder madopskrifter, køkkenindretning og køkkenudstyr fylder meget på Internettet. Det er muligt at få alle slags råd om madlavning og downloade opskrifter om et hvilken som helst måltid fra et hvilken som helst land. Køkkengrej til alle typer sofistikeret madlavning kan købes og tv-madprogrammer skovler seere ind til tv-stationerne. Boghandlernes hylder bugner af kogebøger. Der er noget der tyder på, at det er en rigtig god forretning, at beskæftige sig med mad. Til gengæld er det temmelig vanskeligt at finde noget struktureret og samlet om billig mad til unge, som samtidig er sund og nærende og ikke koster mere end dkr 30 pr. måltid. Der findes en kogebog for fattigrøve, hvor maden er dødsyg og nærmest uspiselig. – Slut med spaghetti i kødsovs, pommes frites og kedelige håndmadder.
1
Projektplan Ved at udarbejde en projektplan, og arbejde struktureret efter den, optimerer vi muligheden for at overholde og sikre at vi opfylder krav og deadlines for projektet. (Se bilag 01)
PBS (Product breakdown structure) Website Rapport (Fase 2) Udvikling af kampagne Brugertest
WBS (Work breakdown structure) Rapport Problemformulering Afgrænsning Indledning Projektplan Implementeringsplan Valg af skærmstørrelser Designvalg Kvalitetssikring (FURPS) Brugertest Website Mock-up (Nyt Design) Pictogrammer (Adobe Illustrator) Billeder (Adobe Photoshop) Kode Javascript Mobil Tablet Skærm Brugertest
Estimering Formålet med at lave en estimering er at sikre en realistisk projektplan ud fra defineret personressourcer. Et estimat er en forudsigelse af et projekts personressourcer.
PERT: (Project Evaluation and Review Technique) Vi har givet vores skøn på hvad en given opgave tager af tid. Her er A brugt som det mest optimistiske, B som middelskøn og C som det mest pessimistiske skøn. Vi har derfor udregnet vores estimat for vores projektperiode, for at finde usikkerheden om vores tidsplan holder.
Formler A + 3B + C / 5 = M (Middel estimat) C – A / 5 = S (Usikkerhed) Estimering (tallene i venstre kolonne er taget fra vores Gantt-chart):
5 9 13 16 24
A 2 2 2 5 1
B 3 4 3 7 2
C 4 5 5 10 3
M 3 3,8 3.2 7,2 2
S 0,4 0,6 0,6 1 0,4
2
Implementeringsplan Vi har udarbejdet en implementeringsplan (se nedenfor) over hele kampagnens forløb.Vi har tilføjet ressourcer, og lavet et økonomisk skøn (se bilag 02) på kampagnens forløb. Dette projekt tager udgangspunkt i fase 2, i implementeringsplanen Implementeringsplan for kampagneforløb
3
Valg af skærmstørrelser Skærm - 1400px i skærmbredde og op Et krav til denne opgave har været at tilpasse vores website til tre forskellige skærmstørrelser, og derved ramme så bredt inden for elektroniske enheder som muligt.Vi har haft fokus på stærrelserne 320px, 768px og 1400px (Se bilag 03)
Brugere med bærbare og stationære computere vil blive præsenteret for vores originale design, som også er blevet finpudset i forbindelse med dette projekt.
Vi har valgt at optimere vores side til:
Mobil - 767px i skærmbredde og ned Da vores mobile design er markant ændret har vi valgt at ”redirecte” brugere med en skærmbredde under 767px til vores dette site. Vi har valgt denne skærmstørrelse, da vi mener vores målgruppe ofte vil benytte sig af mobiltelefonen, når de skal tjekke sitet. Derudover har man ofte mobilen med, når man handler og skal kigge på indkøbssedlen. Den er ligeledes nem at tage frem, når man står i køkkenet og laver maden.
Tablets - 768px til 1399px Vores tablet design er optimeret til iPaden, som har ovenstående mål Grundende til vores valg af denne skærmstørrelse er meget lig dem vi beskrev ovenfor. Ipaden bliver brugt flittigt blandt unge og er ligeledes ”handy” at have med i fart - eksempelvis i køkkenet.
4
Designvalg Vi har gjort os en række overvejelser i forbindelse med vores optimering af STUDIEMAD til tre forskellige skærmstørrelser. (Se bilag 03). Vores brug af pictogrammer har været gennemgående for alle tre designs. Både menuer og sider benytter sig af forklarende symboler, som er lavet i en konsistent visuel stil. Farver og fonte er også gennemgående for ikke at skabe forvirring for brugeren, når sitet åbnes på forskellige enheder. Nedenfor gør vi rede for nogle af de unikke ændringer, der er lavet for hvert enkelt design:
Mobil De mest radikale forandringer er foretaget i vores design til smartphones. Her er brugen af symboler intensiveret, menuer ændret og enkelte elementer udeladt.
plads. Billederne af mad under hver enkel dag er droppet, dels for at skabe luft, men også for at lade symbolerne stå stærkere frem. Opskrifterne står i en enkelt spalte. Disse mange ændringer har gjort at vi har valgt at ligge vores mobile design af STUDIEMAD op som et selvstændigt site.Vores normale site ”redirecter” brugeren videre hertil ved hjælp at et script, såfremt dennes skærmbredde er under 767px,
Tablet På tablet udgaven har vi primært rykket rundt på elementer for at få siden til at fungere og denne udgave tager derfor udgangspunkt i det oprindelige design. Ugens madplan og hovedmenuen er f.eks. tilpasset. De forskellige elementer heri forskubber og tilpasser sig, når skærmen bliver mellem 1024px og 768px bred.
Skærm Vores oprindelige design har også fået et par tilføjelser i forbindelse med dette projekt.Vi har tilføjet en ekstra menu i toppen, med en række nye undersider.
Eksempelvis er forsiden forenklet, ved at billedet af de studerende er fjernet. ”Stjernen” med link til tilmelding er der dog stadig. Selve menuen markant ændret.Vi har gjort brug af en drop-down menu for at spare på den mindre skærmplads, man har til rådighed på en smartphone. De enkelte menu-punkter er suppleret med forklarende symboler, som er tilpas store så brugeren ikke rammer forkert. Madkalenderen er lavet således at hver enkelt dag ”folder sig ud”, når man trykker på den. Dette er igen gjort for at skabe overskuelighed og
5
Kvalitetskrav (FURPS+) Functionality: Tilmeldelse til nyhedsbrev. Håndtering og sikring af oplysninger. Formidling af information omkring sund kost og økonomi.
Usability: Det simple design hjælper med at formindske risikoen for fejl 40. Farveskift på valgte dag hjælper brugeren med orienteringen.
Reliability: Da de informationer som brugerne skal opgive til sitet, ikke er af en sensitiv eller privat natur, er sitet meget pålideligt. Der kan dog ske at tilmeldte ikke får deres frynsegoder for tilmeldelsen. I dette tilfælde vil de være i stand til at kontakte en admin fra sitet, som ville kunne hjælpe. Men på trods af den mere harmløse natur af opgivet informationer, skal de stadigvæk beskyttes.
Performance: Ved optimering af elementer (f.eks. billeder) på siden, har vi forbedret performance.
Supportability: Siden er nem nok i sig selv at teste, man skal blot af have en testperson til at teste den. Sitet er kompatibelt med PC og Mac, såvel som notepads og mobiltelefoner. Sitet er også fuldt tilgængeligt i alle browsere.
6
Brugertest Vi har valgt at benytte en kvalitativ brugertest. Se vores skabelon til højre.Vi føler den har givet os god indsigt i og feedback fra vores målgruppe.
For-interview: Fortæl lidt om dig selv og dit studie. Fortæl lidt om dit syn på sundhed og hvilken indflydelse det har på din dagligdag. Hvordan søger du oplysninger omkring sundhed og kostplaner? Har du nogensinde stødt på problemer i din søgen? Hvis du netop nu skulle bruge noget info omkring emnet, hvordan ville du så bære dig ad?
Test af siden: Forsiden: Hvad synes du om forsiden? Hvad er dit umiddelbare indtryk af siden? Hvilke af undersiderne synes du er relevante for dig i forhold til emnet? Andre kommentarer til siden? Opgaver til brugeren: Tilmeld dig nyhedsbrevet. Tjek månedens forbrug. Download madplanen. Find dagens frokost.
Efter-interview: Hvad er dit samlede indtryk af siden? Var det nemt/svært at gå til? Er det logisk/uoverskueligt for dig? Savner du nogle features? Er der nogen features du synes er overflødige? Hvordan vurderer du stil og tone? Er det formidlet til dig som bruger og målgruppe? Hvilke tre gode råd ville du give gruppen? Andre kommentarer?
7
Procesevaluering Læringsmål for gruppen: Vi håber ved projektet at opnå følgende læringspunkter:
Lære om responsivt design. Lære om design til forskellige platforme. Formidling af et budskab til specifikke målgrupper. Forbedring af evner inden for HTML og CSS. Forbedring af evner inden for Photoshop. Forbedring af evner inden for Illustrator.
Arbejdsprocessen: Arbejdsprocessen har været til dels jævn og afslappet. Projektet er skredet fremmad i jævn hastighed, og målene er blevet nået til tiden. Der er på ingen tidspunkter opstået nogen form for kriser.
Samarbejde: Atmosfæren i gruppen har været god og lærerig.
Vejledere: Vi har ikke haft brug for meget hjælp fra vejledere.
Resultatet: Vi er tilfredse med vores endelige resultat.
8
Bilag 01: Gantt chart
9
Bilag 02: Implementeringsplan økonomisk estimat.
Eget projekt (Foranalyse).
Kampagne.
10
Bilag 03: Responsive Design
11
Bilag 04: Brugertest (test 1) For-interview: Fortæl lidt om dit syn på sundhed og hvilken indflydelse det har på din dagligdag. Sundhed og god kost er noget man har brug for hvis man er overvægtig, eller hvis man træner meget. Det har ingen indflydelse på min dagligdag, da jeg hverken er overvægtig eller træner meget. Hvordan søger du oplysninger omkring sundhed og kostplaner? Jeg har meget forhåndsviden omkring emnet igennem min viden omkring biologi, så det er ikke noget jeg søger aktivt. Har du nogensinde stødt på problemer i din søgen? Nej. Hvis du netop nu skulle bruge noget info omkring emnet, hvordan ville du så bære dig ad? Jeg ville sikkert bruge wikipedia.org
Test af siden: Forsiden: Hvad synes du om forsiden? Jeg kan rigtig godt lide forsiden. Hvad er dit umiddelbare indtryk af siden? Umiddelbart ser den ud til at være en let måde at holde styr på økonomi, kost og ugens indkøbsliste. Hvilke af undersiderne synes du er relevante for dig i forhold til emnet? Umiddelbart er det kun økonomi undersiden, der holder relevans for mig. Andre kommentarer til siden? Har ingen andre kommentarer. Opgaver til brugeren: Tilmeld dig nyhedsbrevet.
Kunne ikke lade sig gøre. Tjek månedens forbrug. Det var nemt nok. Download madplanen. Det var nemt nok. Find dagens frokost. Det var nemt nok.
Efter-interview: Hvad er dit samlede indtryk af siden? Naturligvis var det lidt ærgerligt med det bug, men det var ellers en side jeg var rigtig glad for. Det var godt med billede eksemplar på de forskellige retter som man skulle lave de forskellige dage.Var også rigtig glad for den nemme og overskuelige økonomiplan. Var det nemt/svært at gå til? Det var nemt. Er det logisk/uoverskueligt for dig? Det var rimelig logisk stillet op. Savner du nogen features? Kunne være fedt hvis siden inkorporerede tilbud fra forskellige supermarkeder. Det kunne også være rart hvis siden fortalte hvor den fik priserne på indkøbslisten fra. Er der nogen features du synes er overflødige? Der var ikke nogen features som jeg synes var overflødige. Hvordan vurderer du stil og tone? Jeg kunne rigtig godt lide stil og tone, og hele konceptet bag siden tiltalte mig. Jeg synes også farverne var valgt godt ud fra emnet. Er det formidlet til dig som bruger og målgruppe? Som sagt synes jeg rigtig godt om siden, og jeg synes at hele konceptet bag siden, tiltaler unge som målgruppe. Hvilke tre gode råd ville du give gruppen? Ikke rigtig nogen - synes det er en god side. Andre kommentarer? Kan ikke helt forstå, hvorfor det partout skal være økologiske varer, da ikke-økologiske varer også kan være sunde.
12
Bilag 05: Brugertest (test 2) For-interview: Fortæl lidt om dit syn på sundhed og hvilken indflydelse det har på din dagligdag. Jeg prøver at leve efter det, men det gør jeg nok ikke så meget, som jeg selv gerne ville. Hvordan søger du oplysninger omkring sundhed og kostplaner? Altid internettet. Det er klart nemmest. Har du nogensinde stødt på problemer i din søgen? Nej. Ikke nogen jeg lige kan komme i tanke om. Hvis du netop nu skulle bruge noget info omkring emnet, hvordan ville du så bære dig ad? Jeg ville søge på google, efter de specifikke behov jeg havde spørgsmål til.
Test af siden: Forsiden: Hvad synes du om forsiden? Den er lidt kedelig. Tror det er baggrundsfarven der gør det. Hvad er dit umiddelbare indtryk af siden? Der er ikke rigtig noget der fanger mig. Hvilke af undersiderne synes du er relevante for dig i forhold til emnet? Der er ikke rigtig nogen af siderne jeg føler holder relevans for mig. Andre kommentarer til siden? Synes den er zoomet lidt for tæt på. Når min browser er på 100% kan jeg ikke se bunden af forsidens reklame. Det kan selvfølgelig bare være min computer der er problemet. Opgaver til brugeren: Tilmeld dig nyhedsbrevet. Det var nemt nok i teorien, men der var et bug som forhindrede mig i at gøre det. Tjek månedens forbrug.
Nemt nok. Download madplanen. Det var nemt nok, men det var rent held at jeg fandt madplanen, da den lå lige under økonomiplanen. Find dagens frokost. Nemt nok.
Efter-interview: Hvad er dit samlede indtryk af siden? Der er nogle små bugs, og der var nogen links som var ulogisk placeret. Indkøbslisten er også lidt uspecifik, men ellers er siden god. Var det nemt/svært at gå til? Siden er meget nem at finde rundt på, og holder sig simpel. Er det logisk/uoverskueligt for dig? Har svært ved at se formålet ved ”info siden”. Synes ”info siden” giver mig mere gode råd, end info om siden generelt, som jeg ville tro en ”info side” ville gøre. Savner du nogen features? Der er ikke nogen features der savnes. Er der nogen features du synes er overflødige? Der er ingen overflødige features. Der er ikke mange, men dem som er, gør deres arbejde. Hvordan vurderer du stil og tone? Den er måske lidt kedelig og ikke særlig moderne, selvom den prøver. Jeg synes siden holder sig ren, men også lidt for ”øko-agtig” og brun. Er ikke glad for farven brun. Er det formidlet til dig som bruger og målgruppe? Mig som bruger tiltaler siden ikke, men som målgruppe er den spot-on. Indholdet på siden kan jeg godt lide, og det vil målgruppen bestemt også. Hvilke tre gode råd ville du give gruppen? Måske rykke økologisk landsforening og sundhedsministeriets links ned i bunden af siden. Andre kommentarer? Ingen andre kommentarer.
13
Faktaark
Titel:
Studiemad fase 2.
URL:
http://www.weblabs.dk/projekter/studiemad/index.html
Gruppe 6:
Underskrift:
__________________________________ Morten Møller Nielsen
Morten Møller Nielsen mail:
[email protected] http://www.weblabs.dk Mikael Lund Kristensen mail:
[email protected] http://www.graphicweb.dk Ian Mika Sahlertz mail:
[email protected] http://www.emperorsahlertz.dk Hold: Clmul-b12e 2. semester forår 2013
__________________________________ Mikael Lund Kristensen
__________________________________ Ian Mika Sahlertz
Lærere: Thomas Hartmann Charlotte F Czepluch
14
