Responsive Design Mul-a 2013 RAPPORT - opgave 3, Semester 2 Gruppe xx - The Cook Club Project/2 Claus Buus Christensen claus.buus@hotmail.com http://cbuus.dk Ole Jørgen Hansen ohan@post.tele.dk www.gribskovweb.dk Jonna Gaardbo jg0906@hotmail.com http://www.j-gaardbo.com Sergio Pabel Calero Calderon.info@calerophotography.dk http://calerophotography.dk http://thecookclub2.cbuus.dk
INDHOLDSFORTEGNELSE Problemformulering: Valg og afgrænsninger vedrørende platforme: Designargumentation: -Sitet -Pictogrammer Projektplan: Brugertest: Non-funktionelle krav: Bilag og kilder: - Kildeliste - Forbrugerundersøgelse - Screenshots - Pictogrammer - Projektplan - Brugertest Side 3 Side 3 Side 4 Side 4 Side 6 Side 8 Side 8 Side 8 Side 9 Side 10 Side 13 Side 14 Side 15 Side 18
Problemformulering Hvordan kan vi hjælpe Coop med at finde oplysninger om vores målgruppens så Coop kan registrere vaner og behov hos målgruppen? Denne information skal Coop bruge til at tilpasse varesortiment og butikkernes tæthed I de valgte regioner. Samtidigt har Fødeministeriet også vidst en interesse for disse oplysninger og vil gerne støtte vores projekt i bytte med denne information. FDP, som er hovedafdelingen for Coop arrangerer derfor en brugertest angående digitale platforme, for at vi kan optimere vores site, så den er mere målrettet til vores målgruppe. for at løse dette problem er vi nød til at tilpasse vores site (gøre det responsivt) så det bliver mere brugervenligt for vores målgruppe. Vi ved fra forskellige undersøgelser at unge bruger ofte ipads og smartphones som kogebøger. Vi lave også en formular hvor man kan tilmelde sig. Her skal de oplyse om deres madvaner. Vores formular indeholder følgende kategorier: ordinærkost, økologiskkost og vegetariskkost. Udover det, skal burger også vælge den region de bor i. På denne måde, indhenter vi oplysninger, Coop kan bruge til at tilpasse varesortiment og butikkernes tæthed I de valgte regioner. Valg og Afgrænsninger For at grunde vores valg har vi taget udgangspunkt i FDP s analyse af brugernes vaner vedrørende digitale platforme. Her får endnu engang bekræftet at smartphones er efterhånden essentielle for befolkningen, ikke 3
mindst for vores målgruppe hvor vi kan se at 75% af unge mellem 15-34 år har en smartphone. Vi har også valgt at tilpasse vores site til en tablet. Det viser sig at at 20% af befolkningen har en tablet, og 17% af vores målgruppe har en her kan man også se et mønster at det er generelt folk med en højere indkomst der har sådan en. Men det som er mest interesant er at 80% af alle dem der ikke har en tablet i øjeblikket har intentioner om at skaffe sig sådan en. Her har vi et stort potentielt marked, som vi kan forvente kommer til at bruge vores site via en tablet. Det er også en fordel når disse segmenter helst kender vores site i forvejen igennem den mobile platform og derfor forventer at den også fungerer på deres nye tablet. Derfor har vi taget disse beslutninger. *Se bilag 1 Designargumentation Vi har valgt at vi skal have 3 forskellige størrelser, tablets, smartphones, samt den almindelige computerskærm. For at optimere til en tablets, kræver det ikke de store ændring med hensyn til brugervenligheden. Vi vil beholde det originale layout når vi har tableten i horzontal format. *Bilag 2 Der må lidt justeringer til når den er i verical format, samt når vi skal se den på en smartphone. Vi vil helst undgå at gå på komprimer med vores design, for at beholde genkendeligheden overfor vores brugere. De ændringer vi har valgt at lave i forhold til tilpassning af vores site er som følgende: Navn, logo og 4
søgefelt kommer til at stå øverst ligesom før men de elementer der ligger til højre, Facebook knap og ugens opskrifter bliver rykket i bunden. Menuen bliver forsat centreret og kommer at ligge alene som 4 store bokse. For at holde siden enkel og for at optimere brugervenligheden og læsbarheden, er det vigtigt at tilpasse elementerne så tekst, links og knapper er i en størrelse at de kan læses samt at de stadig er nemme at navigere på. Vores formel bliver placeret i højre side på computerlayoutet, mens den bliver rykket ned under menuen når den blive anvendt på tablet og mobil. Grunden til at vi har valgt disse rækkefølger er på grund af at logo og navn, er selvfølgelig det som er mest vigtigt, idet at det viser brugeren at den er kommet til det rigtige sted. Dernæst er vores menu det bærende element på sitet, det er her du finder de informationer som brugeren højs sandsynlig vil søge når de vælge at logge ind på vores site. Derefter kommer vores vores formel, som er en ting som vi forventer at brugeren først vil udfylde, når de har fundet ud af hvad sitet har at byde på, og herefter er blevet nysgerrige nok til at de vælger at udgive personlige informationer til os. Nederst kommer vores henvisninger, som Facebook og link til apps. som er 2. prioritet når det kommer til lignende sider, samt at dette er rimelig traditionelt så brugeren ved højst sandsynligt hvor de vil finde disse oplysninger, specielt når vi har i tankerne at målgruppen er unge, som har godt styr på brug 5
af lignende produkter. Vi har beholdt sitet i vores enkle og rene layout, som også tilpasses meget fint til den responsive tilgang, uden de store komplikationer. Vi har valgt at skifte vores billeder i menuen til pictogrammer, idet at det kan forenkle navigationen. Billederne bliver rimelig små og kan fremstå en smule utydelige på en mindre skærm. De er i samme stil som resten af vores site, dog med mere farve for at tilføje lidt friskehed til sitet. Vi har valgt at skifte billederne på alle vores platforme, så der er en rød tråd igennem hele sitet og det skaber genkendelighed. Dette er også med til at løse det problem som vi stødte på da vi udførte vores brugertest, som var at billedet til vores menupunkt opskrifter,kunne være misvisende idet at der stod bestemors opskrifter som nemt kunne fortolkes som et tema. Vi valgt ikke at have en brødkrummestig fordi den ville ikke passe til vores design. Med vores målgruppe ser vi det heller ikke det som en nødvendighed. Menuen er dertil heletiden tilgængelig når man befinder sig på en underside - enten i venstre side eller lige under informationen man har klikket sig ind på. Pictogrammer: Vi har valgt at lave pictogrammer til vores menu. Dette kræver en del overvejelser for at være sikker på at ikonerne giver et klart budskab, men når de er lavet rigtigt kan de sagtens fungere bedre end almindelige billeder, både idet at de er mere neutrale med hensigt til præferancer og holdninger end f.eks et almindeligt billede og de kan laves som vector som kan 6
afgrænse belastningen på sitet når man tænker på loadtid hvis der er meget trafik på sitet. De kan også fremstå klarere på sitet i forskellige størrelser. Økologi: Vi valgt det klassiske Ø som alle kender. Her er der ikke så meget at tage fejl af at der er tale om noget økologi, både for dem der er til økologi og dem der fravælger det. Dertil kan dette være med til at støtte vores symbol på vegetar. Vegetar: Vi har valgt at lave en gulerod, siden det er et ikon der er enkelt og ikke kræver mange detaljer. Der findes symboler for vegetar, men der findes flere forskellige, samt at de er ikke lige så kendte blandt ikke-vegetarer som f.eks økologimærket. Så for at være så alsidig som muligt har vi valgt at lave en gulerod der henviser til grøntsager, hvilket langt de fleste forbinder med vegetar. Madplan: Det var lidt mere kompliseret at finde et symbol på et emne som madplan, men ved at kikke lidt på nettet og finder inspiration, kom vi på at en kalender sammen med bestik, nok skulle være den klareste måde at lave det på. Opskrifter: Var også en af de lidt svære, siden den hurtig kunne blive lidt for kompleks med mange detaljer. Men vi synes at det endelige resultat blev så enkelt som det nu kunne blive og beskriver emnet rimelig godt, når brugeren nu ved at vedkommende er på et madsite og højst sandsynligt vil lede efter opskrifter og vil reagere på at dette er den rette knap. *se bilag 3 7
Projektplan Vi har lavet en projektplan som kan ses i vores bilag. *Se bilag 4 Brugertest Vi vælger at bruge en brugertest på vore website fordi vi er interesseret I at vide hvordan, vores bruger oplever vores site. Vi vil gerne finde muglige fejl som kan hjælpe videreudvikling af sitet. Disse muglige fejl skal være baseret på feddback fra rigtige brugere og ikke på vores egen mavefornemmelse. For at lave vores test, formulerer vi en lille opgave som vores forsøgsperson skal løse. *Se bilag 5 Non-funktionelle krav Funktionality: Vores website er simpelt at navigere i. Dette er fordi vi bruger billeder og ikoner i stedet for kun tekst i vores navigationsmenu. Vores site har et hurtigt responstid og man kan hurtigt navigere rundt på sitet. Realiability: Vores site er altid tilgængelig både fra et bærbar og smart tablets. Vi ved at mange bruger tablets og smartphones til madlavning, derfor er vores site responsiv. Udover det har vi tjekket på alle links på vores site virker, så vi er 100% sikker på at der ikke findes ikke opdaterede eller døde links på sitet. Usability: Designet og Inddeling af informationer på sitet gør den enkel og klar. Man er fra starten klar over at man er kommet til et site der omhandler om mad og madlavning. 8
Et resposivdesign gøre det enkelt og tilgængeligt for alle brugere. Om man åbner sitet fra en iphone eller en hjemmecomputer er den nem at navigere på. Security: På vores site er alt det information, vores bruger taster ind fortroligt. Alt data bliver indsamlet af Coop. Kildeliste: http://www.w3schools.com/ http://fdb.dk/ https://www.google.dk/ search?hl=da&site=imghp&tbm=isch&source=hp&biw=1440&bih=711&q=vegetar&oq=vegetar&gs_l=img.3..0l10.2298.40 39.0.4351.7.6.0.1.1.0.278.86 3.2j3j1.6.0...0.0...1ac.1.9.img. xe0hkfswyhy#hl=da&site=imghp&tbm=isch&sa=1&q=vegetarian+logo&oq=vegetarian+logo&gs_ l=img.3.0.0i19l4j0i5i19l5.1793 6.20591.2.25600.7.6.1.0.0.1.19 4.636.4j2.6.0...0.0...1c.1.9.img. eu9z0mu4rvs&bav=on.2,or.r_ qf.&bvm=bv.45373924,d. Yms&fp=5f69b83d963bd4e5&biw=1440&bih=711 9
Bilag 1 Forbrugerundersøglse Tre ud af fem har en smartphone Tre ud af fem voksne danskere har i dag en smartphone. Lidt flere mænd (64 procent) end kvinder (53 procent) har en smartphone. Og så har markant flere unge i alderen 15-34 år en smartphone (75 procent), mens det samme gælder for 65 procent i alderen 35-54 år og hver tredje (35 procent) af de ældre i alderen 55-74 år. Der er ikke enighed om, hvad smartphonen skal hedde: Hver fjerde voksne dansker har en iphone, mens en anden fjerdedel har en Android i tasken. http://fdb.dk/analyse/vi-har-smartphones-%e2%80%93-nu-vil-vi-have-tablets 10
Hver femte har en tablet Én ud af fem (20 procent) har en tablet. Og mens vi tilsyneladende er lige så glade for Android-telefoner som iphones, skal tabletten helst være en ipad, som tre ud af fire med en tablet har liggende derhjemme. Og mens smartphones er mere udbredte blandt de unge, er der flere tablets blandt de 35-54-årige (24 procent) end blandt de 15-34-årige (17 procent) og 55-74-årige (14 procent). Helt afgørende for, om man har en tablet derhjemme, er indkomsten. Mens hver tredje med høj personlig indkomst (33 procent) har en tablet, gælder det samme for 14 procent af de mellemlønnede og 12 procent af de lavtlønnede. Af de 80 procent, der endnu ikke har en tablet, forventer mere end to ud af fem (45 procent) at anskaffe sig en inden for det kommende år. Særligt de unge og midaldrende forventer at anskaffe sig en tablet, ligesom troen på en tablet stiger med indkomsten. 11
Mad på telefonen især blandt unge og kvinder Hver tiende dansker med en smartphone læser madopskrifter på deres telefon minimum en gang om ugen, mens 44 procent aldrig gør det. Det er mere udbredt blandt unge og kvinderne, at læse opskrifter på telefonen. Når vi griber telefonen for at kigge opskrifter, gør hver anden det for at blive inspireret (51 procent) eller for at finde en konkret opskrift (56 procent). Markant færre gør det for at stykke indkøbssedler og madplaner sammen. Og hvor læser vi så oftest opskrifterne? I køkkenet, svarer næsten hver anden (47 procent), mens mere beskedne 14 procent læser madopskrifter ved køledisken i supermarkedet. 12
Bilag 2 Screenshots Computer & Tablet Tablet & Mobile 13
Bilag 3 Pictogrammer 14
Bilag 4 Projektplan 15
Bilag 4 Projektplan 16
Bilag 4 Projektplan 17
Bilag 4 Brugertest Spørgeskema Opgave: Hvad synes du om sitet? Hvad tænker du når du ser sitet? 1. Find en opskrift med fiskefrikadeller. 2. Find torsdagens menu. Bruger - Website: Synes at sitet er lyst, enkelt, friskt og moderne. Tænker at sitet har noget med mad at gøre. Sitet har en vis standart og henvender sig til en intellektuel målgruppe. 1. Forside -> Ugens opskrifter Prøver også at finde den i menuen Opskrifter -> F, hvor den også findes 2. Ugeplan i menuen -> Leder efter torsdag, men finder ingen ugedage på menuerne. Regner ud at vedkommende må tælle menuerne for at finde menuen der tilsvarer torsdagens menu. *Bemærkninger: Billedet der illustrere menupunktet Opskrifter, kan være lidt misvisende med teksten bestemors opskrifter og kan opfattes som et tema i stedet for almindelige opskrifter. Det kunne være en god ide at sætte ugedage på madplan, lodret ud fra hver sektion. 18
Bilag 4 Brugertest Spørgeskema Mobil platform: Bruger har samme oplevelse af sitet og løser opgaverne på samme måde. Finder sammenhæng imellem det originale site og det mobile layout. * Bemærkninger: Det kan virke forstyrrende med illustrationen af bestikket i bagrunden af feltet ugens menuer kunne evt. Være lysere eller fjernes. 19