Find Pølsen INNOPEEPS DESIGN TIL DIGITALE KOMMUNIKATIONSPLATFORME. - der er noget for enhver smag ANDREAS KROGH ANDERSEN ELIN LINDING JØRGENSEN

Transkript

1 Find Pølsen - der er noget for enhver smag DESIGN TIL DIGITALE KOMMUNIKATIONSPLATFORME KURSUSANSVARLIG : KENNY MAREK MØLLER MARIA ØRNDRUP SØRENSEN ELIN LINDING JØRGENSEN NANNA SHYAMA PETERSEN ANDREAS KROGH ANDERSEN INNOPEEPS

2 1. INDLEDNING!3 5. DESIGN!19 (Nanna) 1.1 PROBLEMSTILLING!3 5.1 GENRE!19 (Nanna) 2. METODISK TILGANG!3 (Elin) 5.2 STIL!20 (Maria) 2.1 BODYCRASHING!4 (Elin) 5.3 GESTALT!22 (Elin) 2.2 SPØRGESKEMAUNDERSØGELSE! 5 (Nanna) 5.4 SKRIFTTYPER!23 (Andreas) 2.3 FIELD CONVERSATIONS!6 (Andreas) 5.4 SEMIOTIK!23 (Andreas) 2.4 MÅLGRUPPE!7 (Nanna) 6. UDVIKLING!24 (Elin) 3. IDEATION OF PROTOTYPING!8 (Maria) 6.1 MOBILE FIRST!24 (Elin) 3.1 BRAINSTORMING!8 (Maria) 6.2 BENSPÆND!25 (Andreas) 3.2 SKETCHING!11 (Maria) 6.3 VALIDERING!27 (Nanna) 3.3 MOCK UP!14 (Nanna) 7. USABLITITYTEST 2.0!27 (Maria) 3.4 WIREFRAMES!15 (Andreas) 8. PERSPEKTIVERING!30 (Nanna) 4. TEST AF PROTOTYPE!17 (Andreas) 9. KONKLUSION!30 (Elin) 4.1 USABILITYTEST 1.0!17 (Elin) 10. LITTERATURLISTE! TÆNKE-HØJT-TEST!18 (Elin) 10.1 Internethenvisninger! TESTRESULTATER OG FORBEDRING!19 (Elin) ANSVARSFORDELING

3 Jf. gældende studieordning er vi pålagt at anføre en ansvarsfordeling i opgaven. Der skal dog nævnes, at opgaven er udarbejdet i tæt samarbejde. Ansvarsfordelingen ses i indholdsfortegnelsen. Ved afsnit hvor navn ikke er angivet skal disse ses som fælles ansvar. OPGAVENS ANSLAG ,9 sider LINK TIL PROTOTYPE BILAGSOVERSIGT Bilag 1 - Vejledning til brugerscenarie Bilag 2 - Bodycrashing (Udsnit) Bilag 3 - Visimojo spørgeskemaundersøgelse (Udsnit) Bilag 4 - Field Conversations (Udsnit) Bilag 5 - Prototyping on paper (Wireframes) Bilag 6 - Apps til inspiration Vi anbefaler at Bilag 1 - Vejledning til brugerscenarie læses før selve opgaven. 2

4 1. INDLEDNING I juni 2012 annoncerede Apple, at antallet af apps i App Store var over , herunder udviklet særligt til ipads. 1 På baggrund af dette er det ikke svært at argumentere for, at det kan være en udfordring at tænke innovativt og nyskabende i ønsket om at udvikle en app, hvilket er udgangspunktet for denne opgave. Ved en søgning på Internettet opdagede vi forskellige fora, der ligeledes diskuterede denne problemstilling: Findes der en app, som ikke er udviklet? Er der et behov, der endnu ikke er tilfredsstillet? Under denne søgning viste det sig gentagne gange, at der var et utilfredsstillet ønske om en app, der finder den nærmeste pølsevogn. På den måde blev vi introduceret til opgavens overordnede tema, hvor vi besluttede os for at dykke dybere ned i pølsevognskonteksten: Pølsevognen er et kulturhistorisk fænomen, der stammer fra Tyskland og kom til Danmark i 1920 erne, hvor den har været en del af gadebilledet i mere end 80 år. Den typiske menu, som danskere kender den, er begrænset: her kan du få ristede og kogte pølser i forskellige varianter med tilbehør såsom ketchup, sennep, løg, agurkesalat og brød. I dag er den danske pølsevogn i modvind, da ændrede spisevaner og øget konkurrence på fastfoodmarkedet får kunderne til at gå andre veje. Hvor der i 1970 erne var omkring 600 pølsevogne, er der i dag kun omkring mellem tilbage, heraf flest placeret i København. 2 Med udgangspunkt i vores indledende undersøgelser, samt de markedsmæssige udfordringer som pølsevognen står overfor, har vi valgt at projektet skal omhandle udviklingen af en app, som bringer kunderne og pølsemændene sammen. Dette skal ske via værktøjer indenfor Web 2.0 samt en designmæssig tilgang til udviklingen af interaktive brugerflader til mobile enheder. 1.1 PROBLEMSTILLING Hvordan kan vi ved inddragelse af kunder og pølsemænd udvikle en pølsevognsapp, der både tilgodeser kundernes og pølsemændenes behov? 2. METODISK TILGANG Denne opgave samt den bagvedliggende proces tager sit metodiske udsnit i den skandinaviske designtradition, hvor værdier omkring

5 participatory design er i højsædet. Her er brugerens deltagelse en vigtig aktør i procesudviklingen, hvor også designerens deltagelse og udvikling er i fokus. Derved ses participatory design som en gensidig læringsproces, hvor fokus er på både brugerens deltagelse i designprocessen og designerens deltagelse i designanvendelsen (Lövgren & Stolterman 2004: 152). Praktisk forståelse er et værktøj, der i en designpraksis tages alvorligt. Der er opnået en forståelse for den virkning, brugerne har på designprocessen samt det, at brugernes ekspertise og færdigheder er afgørende for designet. Ved brugerinddragelse sikres et design, som er bedre tilpasset brugeren. I de følgende afsnit vil der redegøres for vores metodiske tilgang, vores iterationer herunder og den derudfra generede viden, som var med til at fastsætte vores målgruppe og forme prototypen. 2.1 BODYCRASHING For at danne os et overblik over målgruppen og miljøet omkring pølsevognene valgte vi at bodycrashe et antal af byens pølsevogne. Bodycrashing går ud på at stille sig midt i en situation, hvor man indgår på lige fod med de mennesker, man ønsker at observere. For os blev dette udlevet, ved at besøge en række udvalgte pølsevogne i København, hvor vi købte mad, fik en snak med pølsemanden, samt stod og hang lidt ud både i og udenfor pølsevognen for at mærke stemningen og lægge mærke til de andre kunder. Bodycrashing som metode blev valgt, fordi vi ikke ønskede at have nogle forudindtagede holdninger omkring felten, men i stedet være objektive i vores tilgang og danne os indtryk på baggrund af vores observationer. Ligeledes var miljøet forholdsvis ukendt for os alle, så det var nødvendigt at danne os et overordnet billede for at definere målgruppen, og for at se hvilke mønstre og bevæggrunde, der afspejlede sig i kunderne. Derfor blev feltarbejdet også en iterativ proces, hvor vi lod flere feltobservationer supplere hinanden. Et andet fordelagtigt aspekt ved at benytte denne form for tilgang er, at vi helt anonymt havde mulighed for at observere pølsemanden og hans kunder i deres vante omgivelser og dermed få indblik i, hvordan en typisk dag forløber, samt klarlægge kundernes handlingsmønstre. Vi var først og fremmest optagede af at undersøge, hvem kunderne var, men også den relation, der muligvis måtte være mellem pølsemanden og hans kunder; eksempelvis om kunderne blev og spiste deres mad i pølsevognen eller valgte at tage den med. Inden feltarbejdet havde vi på forhånd lavet en rute over de pølsevogne, vi ville observere. Ruten gik gennem indre by fra Nørreport, gennem Købmagergade, Strøget over Rådhuspladsen og sluttede på Vesterport. 4

6 Gennem de forskellige besøg på ruten opdagede vi hurtigt, at der findes flere typer pølsevogne end først antaget. Ligeledes så vi også en stor diversitet iblandt kunderne. Klientellet spændte over alt fra teenagere til det mere modne publikum, børnefamilier og par, men også rigtig mange kom alene i pølsevognen. Under observationerne sørgede vi for at fordele os rundt om pølsevognen, således vi ikke fremstod anderledes end øvrige kunder, der ventede på betjening. På den måde havde vi også mulighed for at observere fra flere vinkler og fange det centrale i kundernes samtale med pølsemanden. I flere tilfælde observerede vi stamkunder eller folk, der kendte stedet i forvejen. Særligt kunderne ved pølsevognen DØP (Den Økologiske Pølsemand) og pølsevognen Johns Hotdog Deli virkede som kunder, der kendte konceptet og havde valgt netop denne pølsevogn meget bevidst. Eksempelvis observerede vi en kunde konversere med pølsemanden om hvor mange tofu-pølser, de sælger. De sludrede lidt om menuen og kunden fortalte, at han er vegetar: Vi er ikke i overtal endnu os vegetarer (Bilag 2). Ud fra vores observationer tegnede der sig et billede af, at kunderne går målrettet efter hvilken type menu, de har lyst til og ikke så meget 3 hvilken pølsevogn, der er nærmest deres lokation, som vi først havde antaget. Det satte en masse overvejelser omkring brugerens behov igang. Vi havde en forventning om, at der var et behov for at se, hvor den nærmeste pølsevogn er når man er på farten, men observationerne tegnede mere på et behov fra kunden om, at se hvordan de forskellige pølsevogne differentierede sig fra hinanden gennem deres menukort. Så i stedet for at finde den nærmeste pølsevogn ville konceptet mere bygge på find DIN pølsevogn. Der tegnede sig også et tydeligt billede af at målgruppen, der kom ved DØP, var et yngre klientel kontra hos de mere traditionelle pølsevogne. Bodycrashingmetoden viste sig at fungere hensigtsmæssigt. Det gav også nogle indsigter, vi ikke var klar over, og de observerede mønstre hos kunderne dannede fundament for at vores app skulle have et andet fokus end først antaget. 2.2 SPØRGESKEMAUNDERSØGELSE Som et supplement til vores første iteration ude blandt pølsevognene, udformede vi et spørgeskema med hjælp fra survey-værktøjet Visimojo. 3 En af styrkerne ved den kvantitative metode er, at den kan bruges til at indramme feltet og generere en viden, der kan bruges i det 5

7 efterfølgende kvalitative arbejde (Hjarvard 1997: 75). I vores tilfælde indebar spørgeskemaet en række indledende spørgsmål omkring køn, alder, bopæl, hvor ofte pølsevognsbesøg indtræffer, og hvorvidt vedkommende er indehaver af en smartphone. Herudover brugte vi også skemaet til at stille en række åbne spørgsmål såsom I hvilke situationer besøger du typisk en pølsevogn og Hvis der fandtes en pølsevogns-app, hvilke funktionaliteter skulle den indholde, for at du ville bruge den? (Bilag 3). Dette resulterede i mange gode og anderledes input omkring app ens funktionaliteter, som vi ikke selv havde overvejet. Samtidig fik vi bekræftet, at der var et stort behov for at finde den nærmeste pølsevogn, hvilket modsagde sig vores første observationer. De ønskede funktionaliteter ser således ud hierarkisk opstillet efter mest efterspurgte funktionalitet: 1) Find nærmeste/ location 2) Udvalg/ menu 3) Priser/ tilbud 4) Åbningstider 5) Smiley/ popularitet/ rating 6) Lære pølsevogns slang 7) Forhåndsbestilling 8) Gevinster/ konkurrencer/ bonuspoint med rabatter Ud fra vores resultater kunne vi også skabe nogle nøgleord, der bedst beskrev vores respondenters associationer med en pølsevogn. Disse ord er: tradition, oplevelse/begivenhed og snack-lyst. Endelig er det værd at nævne, at størstedelen af dem, der ikke køber mad i en pølsevogn, begrundede det med manglende kvalitet, sundhed eller økologi. Dette finder vi bemærkelsesværdigt, da der netop findes pølsevogne, som fokuserer meget på disse ting, hvilket også er med til at understrege et manglende kendskab til pølsevogns-området. På dette tidspunkt havde vi således fået to hovedsynspunkter tydeliggjort; et ønske om at finde den rigtige pølsevogn til ens behov samt et ønske om at finde den nærmeste. Facebook blev i dette henseende anvendt som distributionskanal til vores online spørgeskema, idet det har den force at nå mange mennesker på kort tid. Vi er dog klar over, at vores respondenter ikke nødvendigvis udgør et fuldstændig repræsentativt udsnit af den endelige målgruppe. 2.3 FIELD CONVERSATIONS Ud fra overstående undersøgelser havde vi dannet et grundigt billede af pølsevognens brugere, men selve pølsemanden var ikke repræsenteret, 6

8 hvorfor vi besluttede at tage ud på endnu et pølsevognsbesøg for at tale med dem. Vi havde forberedt nogle enkelte spørgsmål men ønskede ikke at skabe en interview-situation. I stedet udformede vi, i etnografisk forstand, det der kaldes for field conversations, hvor stemningen er mere uformel, og hvor der er mulighed for at komme med egne personlige holdninger for netop at skabe ideen om en samtale (Neyland 2008: ). Formålet med samtalerne var at få et indblik i, hvordan pølsemanden selv vil beskrive sin vogn, og hvilket indtryk der er vigtigt at kunderne skal huske pølsevognen på. Det resulterede i meget forskelligartede svar, hvor vi blandt andet mødte mere indifferente pølsemænd med udtalelser såsom En pølsevogn er en pølsevogn og jeg tror ikke på økologi (Bilag 4). Heldigvis fik vi også mere anvendelige udtalelser i forhold til processen. For det første viste det sig vanskeligt at definere en fast målgruppe i henhold til både alder, køn og titel. De adspurgte pølsemænd nævnte både børnefamilier, individer, yngre, ældre, kvinder, mænd, advokater og bumsen på bænken. Samtidig fik vi understreget, at det er vigtigt for langt de fleste pølsemænd, hvilke leverandører og mærker der bruges: Jeg sælger kun Steff Houlberg, det er et meget eftertragtet mærke. Kunden skal vide, hvad de får, og hvad man går ind til (Ibid.). Dette gjorde sig gældende for både de pølsemænd, der har taget et bevidst valg om økologi og de såkaldte mere almindelige pølsevogne. Derudover var der flere pølsemænd, der havde et klart ønske om at yde en god service, eksempelvis i form at smil eller en samtale med kunderne, således de kunne gå fra pølsevognen med en god oplevelse. Nogle få fremhævede deres elite-smiley og forklarede, at en god hygiejne var oftest ikke noget, folk forbinder med en pølsevogn. Endnu et vigtigt aspekt af vores field conversations var samtalerne med henholdsvis DØP og Johns Hotdog Deli, som er to pølsevognstyper, der adskiller sig fra den mere traditionelle pølsevogn. Fælles for disse er en anderledes og mere ihærdig markedsføring, der blandt andet indebærer ugentlige og månedlige tilbud. Samtidig har de begge oprettet en Facebook fanside, som bruges til at distribuere deres tilbud. Dette så vi som gode tegn på pølsevognens fremtid, hvilket ligger i god forlængelse af vores produkt. 2.4 MÅLGRUPPE I vores ønske om at udvikle en app for pølsevogne, stod vi først uden en defineret målgruppe og kun med få antagelser omkring hvilke mennesker, vi ville møde i felten. Den viden vi i vores metodiske undersøgelser har indsamlet omkring brugerne stemmer overens med pølsemandens udlægning af selv samme; det er en svær målgruppe at definere. Vi har valgt ikke at fastlægge vores målgruppe ud fra prækonstruerede skematiske fremstillinger, men i stedet undersøge lige præcis det område, der er tale om. Det har således været 7

9 undersøgelsesgenstanden, der som udgangspunkt har bestemt vores metoders relevans, som også bliver foreslået af Rasmussen og Fischer i deres tekst omkring målgruppekategorisering (Rasmussen & Fischer 2008: 196). Først og fremmest kan vi indskrænke vores målgruppe til at være smartphone-brugere, men eftersom omkring 50% af Danmarks befolkning ejer en smartphone, er målgruppen stadig meget bred. 4 Smartphone-brugere er vant til at benytte et stort udvalg af de apps, der er tilgængelige. Ligeledes vurderer vi også, at de fleste i målgruppen har profiler på diverse sociale netværkssider og er vant til at benytte dem gennem netværkssidens egen app på brugernes egne mobiler. Derefter kan vi også udelukke stamkunder, idet de vil gå målrettet efter én pølsevogn og herved ikke har behov for en app. På baggrund af vores metodiske undersøgelser kan vi derfor inddele vores fokus i to primære kategorier: Nye kunder og kunder, der kun besøger pølsevognene månedligt eller årligt. Herunder er et behov for at oplyse og informere om tilbud og udvalget hos de forskellige pølsevogne. Kunder, der er snacksultne på farten. Det skal være muligt at finde frem til nærmeste pølsevogn hurtigt og nemt. 3. IDEATION OF PROTOTYPING 3.1 BRAINSTORMING I udviklingsprocessen af app en var det vigtigt for os at få fastlagt hvilke elementer og funktioner, der skulle indgå. Ud fra vores tidligere iterationer havde vi fået et indtryk af hvilke mulige elementer, der kunne være relevante, ligesom dataen fra vores spørgeskema ligeledes gav et billede af hvilke funktioner vores respondenter ønskede i app en. Med udgangspunkt i udvalgte kravspecifikationer fra den førnævnte empiri påbegyndte vi første brainstormsession. Vi ønskede at forblive åbne omkring udvælgelsesprocessen og ikke lade os begrænse af den indhentede data, men i første omgang blot lade os inspirere, da vi ønskede at arbejde ud fra tesen om, at forbrugeren ikke nødvendigvis er bevidste om, hvilke behov de egentlig har. Vi benyttede det metodiske greb den stille brainstorm, hvor vi individuelt, på post-its, kom med bud på funktioner vi mente var 4 8

10 relevante at integere i vores produkt. 5 Denne metode adskiller sig fra den åbne brainstorm, hvor processen foregår i plenum og facilitatoren både er ordstyrer og skribent. Vi valgte førstnævnte metodegreb da vi først og fremmest ønskede at få mange ideer på bordet på kort tid, men ligeledes ville vi ikke påvirke hinandens tankeproces. Som kommentar skal der tilføjes, at vi alle kommer med forskellige baggrunde og ved at brainstorme individuelt, fik vi muligheden for at sætte vores forskellige fagligheder i spil. Der blev sat en tidsramme for processen, hvor vi derefter præsenterede vores ideer for hinanden. Næste punkt var at få struktureret og grupperet de mange forslag og foretage en kritisk udvælgelse. Vi fik sorteret ideerne i tre kategorier. 1. app ens omdrejningspunkter. 2. Vigtige brugerfunktioner. 3. Sjove features. Nedenfor beskrives de udvalgte elementer. 1. Appens omdrejningspunkt: Ud fra vores brainstorm og i henhold til den indsamlede data fra spørgeskemaer fandt vi to omdrejningspunkter, der skulle danne ramme for vores app: Kort/GPS-funktion i forhold til radius, så brugeren kan se nærmeste pølsevogne. Sorteringsfunktion i forhold til genre, så brugeren har mulighed for at sortere i sin søgning efter behov. Disse genrer kunne være sund, økologi, traditionel osv. Ved at vælge disse to som bærende elementer i vores app imødekommer vi behovet om convenience. Det skal være nemt og hurtigt som forbruger at få overblik over sin lokation i forhold til nærmeste pølsevogn. Samtidig er sorteringselementet også et yderst vigtigt element, da der blandt brugerne er stor forskel på, hvilken type 5 9

11 pølsevogn, man søger. Ved at gøre sorteringsfunktionen til et af de bærende elementer, gør vi det nemmere for brugeren at navigere rundt og derved også hurtigere for dem at gennemføre deres søgning. 2. Vigtige brugerfunktioner Da hovedfokus i app en var besluttet, skulle de underliggende funktioner udvælges. Disse funktioner udvælges ligeledes på baggrund af vores empiriske data. Vores respondenter efterlyste bl.a. information omkring de forskellige pølsemænd og ud fra vores observationer under feltarbejdet, ligger en vurdering af atmosfæren hos pølsemanden næsten lige så højt på listen som vurderingen af maden. Derfor blev nedenstående punkter også udvalgt: Andre kommentarer der gik igen var respondenternes tvivl omkring de forskellige pølsemænds hygiejne. På baggrund af vores feltarbejde så vi at mange pølsemænd havde fødevarestyrelsens smileyordning hængende i vognen, så kunderne kan se dem. Men det kræver, at kunden kommer hen i vognen og tjekker dette. Vi valgte derfor også at medtage smileyordningen som et element på infosiden. 3. Sjove features De sidste ideer fra vores brainstorm omhandlede forskellige funktioner af en mere humoristisk eller markedsføringsmæssig karakter. Disse er mindre vigtige i forhold til selve funktionaliteten: Rating/brugeranmeldelse: Mulighed for at få overblik over kvaliteten af maden, ud fra andre kunders vurderinger. Men også en rating af atmosfæren, da en samtale med den rare og venlige pølsemand, også er en bevæggrund for at indtage sit måltid i pølsevognen. Infoside: Indeholdende kort introduktion af pølsemanden, og hans åbningstider. Notering om hvorvidt den pågældende pølsemand tager Dankort, da vi ud fra spørgeskemaet kunne se at dette var et irritations moment der gik igen i besvarelserne. Oplysning om tilbud/events - kampagner, sweetdeal, dagens/ månedens/ugens tilbud. Pølsevognsslang Gamifications (spil, udfordringer til kunderne, belønninger) Visuel funktion der påvirker app ens design alt efter hvad tid på døgnet, det er. Ud fra spørgeskemaerne fremgik det at mange besøgte pølsevognene på vej hjem fra en bytur, så en sjov feature i app en kunne være at designet skiftede udseende om 10

12 natten, for at imødekomme brugerne i de helt specifikke omgivelser de befinder sig i. Ud fra denne brainstorming session fik vi sorteret i vores ideer og fundet frem til de elementer der var en nødvendighed, for at imødekomme brugerne og samtidigt skabe en funktionel og brugervenlig app. Ligeledes fik vi belyst, hvilke elementer der havde første prioritet i forhold til prototypen, og hvilke der var features som kunne ses som et fremtidigt aspekt. kortet og sorteringsfilteret, samt app ens vigtige brugerfunktioner; info om pølsemanden og brugeranmeldelser. Igen benyttede vi dette metodegreb da vi med vores forskellige fagligheder også har forskellige visuelle forestillinger om app ens funktioner, deres visuelle udtryk samt deres placering på skærmen. 3.2 SKETCHING På baggrund af vores iterationer fra brainstormingprocessen påbegyndte vi vores sketching. Som Bill Buxton formulerer det: Sketching in the broad sense, as an activity, is not just a byproduct of design. It is central to the design thinking and learning (Buxton 2007: 118). Vi benyttede samme metodiske tilgang som i processen tidligere, hvor vi individuelt sketchede og visuelt fik bragt vores tanker ned på papiret. Vi valgte at afgrænse os fra at skitsere alle diskuterede elementer, men blot i første omgang at fokusere på app ens to vigtigste funktioner; Denne sketchingproces gav os inspiration til konceptet samt tydeliggjorde forskellige problemområder og muligheder. Som Merit og Nielsen formulerer, gør visualisering det nemt for alle at følge med, hvorved det er nemmere og hurtigere at nå konsensus omkring håndtering af udfordringer og problemer (Merit og Nielsen 2006). 11

13 Første opgave lød derfor på at skitsere de førnævnte sider i app en og give vores individulle bud på, hvordan flowet imellem siderne skulle forløbe. Følgende er et uddrag af, hvad der blev skitseret: -Forside med mulighed for at vælge kort (find nærmeste) eller specifikationskrav. - Listevisning af muligheder, når man har valgt ud fra enten kort eller specifikationer. - Mulighed for at sortere via drop down menu. - Profil af pølsemand med billede og ratings. - Push-besked med events. Sketching afstedkommer idegenerering (Buxton 2009), og vores skitser åbnede op for en diskussion om problematikker og hvad der egentlig kunne fungere. Med hver vores bud på mulige scenarier fik vi vendt en masse ideer og blev bevidste om nye aspekter, som vi hidtil ikke havde identificeret. En af de tydeligste udfordringer stod til at være selve flowet og rækkefølgen af de forskellige sider. Vi udviklede derfor et flowchart som værktøj for visuelt at skabe en forståelsesramme for hvordan app ens opbygning skulle se ud. Flowchart er en oversigt over navigation som viser, hvordan man kommer fra A til B. Med et flowchart får man fuldt overblik over hvilke sider app en skal bestå af og hvordan de skal være placeret i forhold til hinanden. I modellen kan man se hvordan app ens forskellige sider skal forløbe og hvordan de skal integreres med hinanden. Startside: Brugeren præsenteres her for app en. Man vil se titel, logo samt loadingindikator vises. Kort: Kortsiden er app ens standardvisning, som viser brugerens lokation på kortet og afstanden til de nærmeste pølsevogne. Pølsevognene vil være angivet med nåle. Siden vil være brugervenlig og give et hurtigt overblik over hvor man befinder sig. 12

14 Liste: App ens sekundære sidevisning er listen. Her vil de pølsevogne brugeren så på kortet ligeledes blive vist men her i listeform. Siden vil også indeholde en dropdown menu, hvor sortering af genre af de mange pølsevogne vil være en mulighed. Filtreringsfunktion: Via kortsiden og listesiden har brugeren adgang til filtreringssiden. Den vil som et ikon ligge i bunden af siden og være et overlay slide up, og vil indeholde de kategorier som pølsevognene er inddelt efter, økologisk, gourmet, traditionel, vegetar. Mulighederne vil være visualiseret som checkbokse, så brugere kan sortere i hvilken type pølsevogn, de ønsker visning af, hvadenten det er som kort eller listevisning. Siden vil yderligere indeholde en afstandsindikator som vil være integreret som en slidefunktion. Her har brugere mulighed for fra starten at indikere, hvor langt de ønsker at gå i forhold til de valgte genrer af pølsevogne. Infoside: Infosiden kan tilgås gennem kortsiden og listesiden. Siden vises når brugere trykker på den valgte pølsemand, f.eks. fra listesiden, hvor pølsemændene vil være listet op under hinanden. Denne side er den tidligere beskrevne infoside, hvor brugere har mulighed for at få et overblik over den valgte pølsemand. Pølsemandens profil, gennemsnitlige anmeldelser, åbningstider, betalingsmuligheder og smiley- 13

15 ordning vil være at finde her. Ydermere vil det være muligt for brugeren at se pølsemandens adresse og gennem en knap funktion kunne se rutevejledning fra brugerens lokation til pølsemandens. Endnu vil der på siden være knapper til menu og giv en anmeldelse. Nederst på siden vil brugeren kunne læse tidligere anmeldelser fra andre kunder men også se hvor mange point de har givet pølsemanden. Anmeldelsesside: Gennem knappen giv en anmeldelse på infosiden kommer brugeren til anmeldelsessiden. Øverst på siden har brugeren mulighed for at bedømme både kvaliteten af maden samt stemning og atmosfæren hos pølsemanden. På siden vil man ligeledes i et tekstfelt kunne skrive en generel anmeldelse af sit besøg hos pølsemanden. Herunder implementeres kamera og delfunktioner til de sociale netværkssider Facebook og Twitter. Sidst vil der være en send-knap. 3.3 MOCK UP Med flowchartet som værktøj og guideline for app ens indhold og flow, udarbejdede vi mock ups over de førnævnte sider. Vi benyttede os af en quick and dirty -metode, hvor vi i små moduler på tre minutter hver især sketchede visuelle bud på sidens opbygning. Vi fokuserede ligeledes på, hvor på siden de forskellige knapper skulle placeres, i forhold til let-tilgængelighed og brugervenlighed. Vi lod os inspirere af andre apps, hvor funktionalitet og brugervenlighed fungerede godt. Denne research af andre apps gav os inspiration til en mere overskuelig sideopsætning. Særligt pølsemændenes profil side gav os udfordringer, da siden skulle indeholde mange informationer, som hurtigt kan virke forvirrende, tungt og uoverskuelig som bruger. Da brugervenlighed for app en er et af vores kerneområder var det derfor vigtigt at få ideer til, hvordan denne udfordring kunne løses bedst muligt. App en Yelp igangsatte ideer til, hvordan layoutet kunne se ud. Særligt deres kortfunktion til iphone håndterede opsætning af mange oplysninger på en brugbar måde. Vi blev gennem Yelp også inspireret til at integrere både kamera og billeder som en feature men også tilføje en dele funktion til de sociale netværkssider som Facebook, Twitter og eventuelt Instagram. Da vi arbejder med et koncept omhandlende mad, gav det god mening at tilføje disse fotoelementer i app en. Vi ser en aktuel tendens, hvor billed-upload og særligt folks egne billeder af mad bruges flittigt. I tråd med denne observation er det også nærliggende at give brugerne mulighed for at fotodokumentere maden de køber i pølsevognen, da det ofte er en mere sigende metode at anmelde mad på, fremfor skriftlige vurderinger. En kombination af både foto og tekst 14

16 giver brugerne er klart billede af andre brugeres oplevelser med den pågældende pølsemand. Ved at integrere kamera i app en er det optimalt, at brugerne skulle have mulighed for at dele sin bedømmelse på de sociale medier, da vores primære målgruppe, gennem deres smartphone, formentlig logger på Facebook og tjekker deres profil på telefonen. På denne måde er det også en strategi for at sætte mere fokus på pølsemændene og deres eksistens, men også en metode til at sprede et budskab om den diversitet, der i dag er blandt pølsesvognene, men som mange som nævnt ikke er klar over. Omvendt kan man også argumentere for at denne funktion holder pølsemændene til ilden, da en dårlig anmeldelse spredes ligeså hurtigt som en god. Dette er i det hele taget et vilkår for fødevareindustrien, hvor det typisk er kunderne, der vurderer din kvalitet, hygiejne og spreder deres mening om produktet. I forlængelse af vores mock ups udarbejdede vi wireframes med det formål at teste flowet i vores app hos brugeren. 3.4 WIREFRAMES Wireframes beskriver indholdet af siden og viser, hvor elementer som knapper skal placeres. Det hjalp os med at visualisere funktionaliteten og flowet imellem de forskellige sider eller templates (Brown 2011). De færdige wireframes skulle bruges til den første prototype. En prototype har til formål at teste funktionaliteten af et produkt. Af samme grund skal en prototype have et interaktivt lag som kan testes (Ward m.fl. 2011). Det var vigtigt på et tidligt tidspunkt i forløbet at teste om brugerne kunne navigere i siderne og om flowet imellem siderne gav mening for dem. Ifølge Steve Krug afhænger prototypens gengivelseskvalitet af formålet med testen. Han påpeger dog også, at det ofte er en fordel, hvis produktet virker ufærdigt, da dette motiverer testpersonerne til at være mere ærlige. Hertil kommer, at en lavpraktisk 15

17 prototype gør det nemt for designeren at ændre funktioner, der ikke fungerer optimalt (Krug 2006). Derfor diskuterede vi også detaljegraden af det visuelle udtryk igennem, da målet med den første test netop var at undersøge brugerens håndtering af app en. For os at se handlede det om at skabe en prototype med den rette balancegang af detaljegrad. Merit og Nielsen pointerer også, at det er nødvendigt at visualiseringerne viser konceptet tydeligt for at få valide resultater. Man må ikke undervurdere menneskers evne til at abstrahere og fantasere (Merit & Nielsen 2006: 70-73). Denne tese i sammenhold med Krug kombinerede vi derfor med Beechers fidelty begreb: A prototype can be as simple as a series of hand-sketched wireframes that flow together. This is a good example of a low visual fidelity prototype. These wireframes show layout and functionality but have no visual design (Beecher 2009). 6 indeholdt og de muligheder de havde indenfor en bestemt ramme. Detaljegraden bygger defor på en kombination af low visual and low functional fidelity samt low visual and high functional fidelity (Beecher 2009). 7 Forud for prototypens udformning, overvejede vi fordele og ulemper ved henholdsvis papirprototyper og digitale prototyper. Et ønske om også at kunne teste elementernes placering på skærmen, ledte os til et mellemstadie; en digital prototype med et sketchet layout. På denne måde blev det en delvist digital løsning, som stadig havde et tydeligt præg af ufærdighed. Vi vægtede sidstnævnte højt, i ønsket om at få så meget kritisk feedback fra testpersonerne som muligt. Prototypen blev lavet i programmet POP - Prototyping On Paper (Bilag 5). Dette er et program som gør det muligt at lave simple tegninger om til en interaktiv hjemmeside på smartphones. 8 Vores wireframes er bygget på en kombination af disse metodegreber. Det var ikke vigtigt til denne test at have færdige wireframes, men det var nødvendigt at brugerne tydeligt kunne se, hvilke funktioner app en Ibid

18 Beecker underbygger dette: Appropriate fidelity refers to a level of prototype fidelity that allows you to achieve the goals you ve set for doing a prototype in the first place (Beecker 2009) TEST AF PROTOTYPE Når man har arbejdet længe på en hjemmeside kan det være svært at Siderne til den interaktive prototype blev lavet med blyant og der blev benyttet klippe-klister metoder, så det visuelle var ikke vore primære mål, men der blev dog alligevel fokuseret på at tilføre vores wireframes nok detalje til, at der ikke kunne opstå misfortåelser fra brugerens side. Da vi havde besluttet os for at lave interaktive wireframes argumenterer vi derfor for, at prototypen indeholder en grad af high functional fidelity. Denne kombination vurderede vi som effektiv i forhold til målet. Som Buxton formulerer det: There is no such thing as high or low fidelity, only appropriate fidelity (Buxton 2007). 9 forholde sig til den med klare øjne. En brugertest giver et nyt perspektiv på tingene, og kan afsløre en række problemer som ikke er tydelige for designeren. Ifølge Krug er det ikke så vigtigt, hvem man tester, det vigtigste er at man får det gjort, helst tidligt og over flere omgange i designforløbet, som en del af den iterative proces (Krug 2006). 4.1 USABILITYTEST 1.0 Ole Gregersen og Ian Wisler-Poulsen beskriver usability med det danske ord brugbarhed. At skabe god usability handler med andre ord om hvornår noget opleves som brugbart med henblik på både bruger, Ibid. 17

19 kontekst og formål (Gregersen & Wisler-Poulsen 2009). Man kan ifølge Gregersen og Wisler-Poulsen opstille en række succeskriterier for, hvordan en hjemmeside skal opfylde bestemte usability-mål. Dette gøres ved at dele brugerens oplevelse af usability op i tre kategorier: handler grundlæggende om, at give brugeren en defineret opgave, og bede vedkommende om at tænke højt mens opgaven udføres. At få brugerens ureflekterede tanker er et nemt og brugbart værktøj til at afsløre en hjemmesides svagheder (Nielsen 2012) 1) Funktionalitet: Imødekommer funktionerne brugerens formål med at besøge hjemmesiden? 2) Effektivitet: Er det nemt og hurtigt for brugeren at finde det vedkommende søger? 3) Tilfredshed: Er det en god oplevelse for brugeren at bruge hjemmesiden? Overordnet set flyder kriterierne sammen og overlapper hinanden. I samspil med brugskonteksten og de æstetiske aspekter som beskrives i et senere afsnit om design, har disse kriterier stor betydning for hjemmesidens fremtidige succes. Disse tre niveauer har derfor været vores pejlemærker under hele den iterative proces. 4.2 TÆNKE-HØJT-TEST Vi valgte at bruge Tænke-højt-test som metode til at teste vores tidlige prototype. Dette er et velegnet og simpelt redskab, som hurtigt afslører eventuelle problemer på en hjemmeside. Tænke-højt-test Testen blev udført på 10 forskellige brugere med forskellig alder og baggrund. Vi valgte bevidst at komme udenfor ITU s rammer for at møde brugere med et andet tankesæt end vores eget. Vi vurderede, at dette ville give os et mere realistisk og brugbart resultat. Brugerne blev testet én person ad gangen. Som indledning til testen gjorde vi brugeren klar over, at det var produktet, der skulle testes, og at eventuelle udfordringer som vedkommende ville støde ind i lå for vores regning. Herefter fik brugeren stillet en opgave: Find den økologiske pølsevogn som har fået den højeste bedømmelse, og bedøm selv pølsevognen. Mens opgaven blev løst, opfordrede vi brugeren til at tænke højt. På denne måde fik vi indblik i logikken bag brugerens handlinger. Under testen observerede vi hvilke problemer brugeren stødte ind i. Testen afslørede derfor inddirekte en mængde brugbar information om hjemmesidens problematikker med hensyn til både funktionalitet, effektivitet og brugeroplevelse. 18

20 4.3 TESTRESULTATER OG FORBEDRING Prototypen bestod af følgende sider: 1. Kort (startskærm) #klik på filtrering 2. Filtreringsmenu #klik på øko 3. Filtreringsmenu #øko er tjekket af - klik på filter 4. Kort (med nye nåle) #klik på liste 5. Liste #Klik på sorter 6. Liste med sorter-menu #klik på bedømmelse 7. Liste med økopølsevogne #klik på den øverste (sorteret efter bedømmelse) 8. Pølsevognsprofil #klik på bedømmelse 9. Anmelderside #klik på bedøm Testen gav som forventet anledning til en række forbedringer, som vi tog op til overvejelse: 1) Inkludere mulighed for at sortere efter pris. 2) Fastlåse navigationsbar så den er i bunden af alle undersider. 3) Tydeliggøre at filteret kan swipes. Med hensyn til prototypens styrker, var det generelt for alle testpersonerne at: 1) De fandt det naturligt at interagere med kortet mht. zoom og panorering. 2) Placeringen af sortér-dropdown gav god mening for dem. 3) De fandt hjemmesiden nem at bruge. 4) De følte sig hjemme i navigationen og strukturen. Alt i alt gav testen os et godt indblik i brugernes oplevelse af hjemmesidens funktionalitet, effektivitet og tilfredshed. Dog ville det naturligvis have været mere optimalt med flere tests løbende, hvis tiden ikke havde været en afgørende faktor. 5. DESIGN 5.1 GENRE Webgenrer er ladet med forventninger. Ifølge Ida Enghold og Lisa Salamon danner de en referenceramme mellem afsender og modtager ved at bygge på normer og konventioner, samt ved at genforstærke en kulturelt betinget forventning, genkendelse og erfaring med lignende produkter. En webgenre genbruger velkendte navigationselementer i forhold til layout, grafik, farver, osv. På denne måde trækker designere på målgruppers kognitive forståelse af- og forventninger til hvad den pågældende genre repræsenterer (Engholm & Salamon, 2005). 19

21 For at benytte sig af genrers og konventioners momentum, er det nødvendigt at kende til det øvrige marked (Engholm 2008). Vi har derfor orienteret os indenfor en række populære danske og udenlandske apps, der ligesom pølsevognssiden har til formål at hjælpe brugere med hurtigt at lokalisere en specifik lokal ydelse (Bilag 6). De vigtigste app s vi har fundet frem til er: 1) Istid 2) Bratwurst 3) Etilbudsavis 4) Googlemaps fusion med Yelp Herudover lod vi os også inspirere af: Instagram DSB Rejseplanen Alle disse mobilapps har en række layout- og funktionsmæssige fællestræk: Brug af radius-slider. Kort/liste funktion. Navigationsbar i bunden. Særligt navigationsbaren i bunden er blevet en velkendt konvention indenfor mobilapplikationer, og den vil derfor føles velkendt for mange af vores brugere. Radius-slideren og kort/liste funktionen er relevante med henblik på hurtigt at finde frem til en bestemt lokation. Dette er særdeles relevant for vores mobilside, da brugskonteksten ofte vil være on-the-go og derfor vil kræve en simpel og hurtig navigationsmulighed. I vores pølsevognsapp har vi valgt at lægge os op af konventionerne ved bl.a. at integrere de tre nævnte fællestræk i designet. På denne måde skaber vi en genkendelighed, som har betydning for hele usability aspektet, særligt mht. effektivitet og den overordnede brugeroplevelse. 5.2 STIL Med stilbegrebet foreligger muligheden, for at differentiere en hjemmeside indenfor en bestemt genre. Som webdesigner må man derfor tage et valg om, i hvor høj grad man med sin stil ønsker at lægge sig op af genreforventningerne. Et centralt element for valg af stilart, er målgruppens forventninger, brugskontekst og kultur. Det endelige valg afhænger derfor af, hvilken visuel identitet der er målsat (Engholm & 20

22 Salamon 2005). Ligesom genrer kan stilarter blive generelle, og være med til at generere forventninger. Når mange vælger at lægge sig op af den samme stil, rodfæstes en fælles forståelse af produktet, ud fra brugernes tolkninger af resultatet, kombineret med andre fælles referencerammer (Engholm 2008). Stil handler om smag, og alle æstetiske virkemidler kommunikerer noget om afsenderen. Ifølge Lisbeth Thorlacius afspejler en hjemmesides smag med fordel smagen hos den målgruppe man ønsker at henvende sig til (Thorlacius 2005). Idet vores målgruppe er bredt defineret, er det en stor udfordring at ramme en smag, som alle har til fælles. I stedet har vi valgt at fokusere på skellet mellem det nye og det gamle, som en metafor for koblingen mellem web 2.0 og pølsevognen som et dansk historisk fænomen. At indføre pølsevognen i web 2.0 version, har derfor krævet en finfølt balancegang, hvor der trækkes tråde mellem før og nu. I vores søgen efter en passende stil for hjemmesiden, igangsatte vi en kollektiv brainstorming. Vores udgangspunkt var, at stilen skulle være forfriskende, indbydende, og samtidig have referencer til pølsevognens historie. Vi ønskede desuden at lægge os tæt op af den simple og funktionelle app-genre, men dette valg medbragte ikke nogen klart defineret ramme for hverken farvevalg eller stemning. Med hjælp fra Pinterest og Google fandt vi frem til stilen retro-futurisme, der er en kombination af klassiske designelementer og minimalistiske layoutstrukturer. Vi konkluderede, at stilens klassiske retromodernisme koblet med nye mere moderne elementer er passende til vores intentioner med app en. Stilen inddrager både varme og kolde farver, og kobler de typiske retrofarver med elementer som transparency og tredimensionelle lys/skygge effekter. På denne måde adskiller designet sig fra de originale matte brun-i-brun pølse-og-brød farver som vi ønskede at undgå. Samtidig afviser stilen ikke helt den traditionelle stemning, som er i høj kurs hos mange af de adspurgte fra spørgeskemaundersøgelsen. 21

23 5.3 GESTALT Æstetiske virkemidler er med til at understøtte en hjemmesides usability. Det har derfor stor betydning for brugervenligheden hvordan bl.a. farver, former og kontraster anvendes på en hjemmeside (Thorlacius 2005). Vi har taget højde for netop dette, ved at lade vores hjemmeside benytte sig af en række gestaltprincipper, ud fra den måde de er beskrevet i bogen Universal principles of design af William Lidwell (Lidwell m.fl. 2003). Vi vil her gennemgå de vigtigste: Navigationsbaren, der er et gennemgående element for både hovedside og undersider, benytter sig af gestaltloven om nærhed og lukkethed. Dette ses ved, at de tre knapper sidder tæt sammen i bunden, afgrænser sig tydeligt fra sidernes andre elementer. Til navigationsbaren har vi også benyttet gestaltloven om lighed, for at vise tilhørsforholdet mellem kort- og listeknapperne, der begge har til formål at finde frem til en specifik pølsevogn. Slideknappen i midten, der har til formål at filtrere udvalget, skiller sig ud med sin runde form. Her har vi benyttet gestaltloven om formkontrast for at antyde, at denne har en anden funktion end liste- og kortknappen. Moodboard (retrofutisme) og farvekoder I listevisningen benytter vi os af gestaltloven om placering og orientering. Ved at lade filtermenuen inddele elementerne efter et 22

24 defineret hierarki, som f.eks. alfabetisk rækkefølge eller højeste bedømmelse, kan brugeren selv påvirke inddelingen. På denne måde hjælper vi brugerne til at navigere i listen, og hurtigt finde det de søger. Infosiderne om de enkelte pølsevogne indeholder store mængder information. For at sikre at dette bliver overskueligt at navigere i, har vi benyttet os af en kombination af åbne og lukkede elementer, samt en hierarkisk placering af indholdet, med udgangspunkt i brugernes egen efterspørgsel. Vi har også her gjort brug af gestaltloven om lighed og nærhed, for at inddele informationerne i tydeligt adskilte temaer. Farvemæssigt har vi benyttet os af grundfarverne hvid og sort og tilsat stemningsfarverne fra moodboardet. Den brune farve går igen i overskrifterne mens brødteksten gennemgående er sort. Den gule, røde, lyseblå og og mørkeblå farve er fordelt mellem app ens ikoner og knapper. Vi har udnyttet farvekontrasten mellem den røde og den blå farve, hvilket giver liv og spil til de andre mere neutrale farver. Filterknappens blå farve er med til at understøtte formkontrasten mellem dennne og de firkantede kort/liste knapper. Til samme formål benyttes desuden en teksturkontrast, idet de firkantede knapper har et tredimensionelt præg, som følge af en gradieret skyggevirkning, mens den blå har et fladt og næsten papiragtigt præg. Det flade look skal understøtte knappens funktion som værende et gardin eller en flap man trækker op og ned, i modsætning til de andre, som er knapper, man skal trykke på. Filtermenuens trækkefunktion angives desuden af tre små folder i filterslideren kant, mens den stærke blå farve og sliderens centrale placering skal gøre det nemt for brugeren at finde og forstå sliderens formål. Dette er vigtigt, idet filtreringsmenuen er en af app ens vigtigste og mest efterspurgte funktioner. 5.4 SKRIFTTYPER Valget af skrifttyper har været en længere proces, hvor vi har afprøvet forskellige muligheder. Valget er faldet på en Google Webfont Oleo Script til overskrifterne, samt Arial til brødtekst. Oleo Script er en meget udtryksfuld og dekorativ font som i app en er med til at understrege en historisk kontekst. Samtidig har den stor betydning i forhold til app ens branding og udtryk udadtil. Oleo Script står i en klar hierarkisk og formmæssig kontrast til fonten Arial, som vi anvender til brødteksten, da den er let læselig på skærme. Vi anvendte Google Webfonts da det rent teknisk er effektivt at implementere i HTML/CSSkombinationen, som vores prototype er konstrueret med. 5.4 SEMIOTIK Til at understøtte og effektivisere en intuitiv brugeroplevelse af applikationens UI (User Interface) har vi forsøgt at anvende ikoner og 23

25 grafik fra ét samlet arkiv af ikoner. 11 Designerne af dette bibliotek, samt lignende projekter, har haft som hensigt at bidrage til en begyndende standardisering (eller best practice) for anvendelsen af ikoner på tværs af hjemmesider og webapplikationer. Herunder ses et udvalg af nogle af de ikoner, som vi gør brug af i Find Pølsen: I de tilfælde hvor vi ikke har kunnet finde et ikon, som vi skulle anvende i layoutet (eks. tragten som symbolsk repræsentant for filtreringsmekanismen), konstruerede vi dem i et billedredigeringsprogram, så de fulgte samme simple stil som det øvrige bibliotek. Rationalet for anvendelsen af genkendelige ikonisk-understøttende elementer er, at der bidrages til en fælles forståelsesramme, som igen effektiviserer interaktionen i webapplikationer UDVIKLING 6.1 MOBILE FIRST The simple guideline is whatever you are doing - do mobile first (Google Chairman Eric Schmidt 13 ). Mobile First er en strategi, der er udspringer af det stigende antal brugere, der bruger mobilen til at gå på internettet (Wroblewski 2011: 10-11). Som navnet antyder, hersker der en tro på at webløsninger primært bør designes med fokus på mobile enheder fremfor laptops og desktops. Mobiltelefonens status skal således opgraderes i udviklingsprocessen, både i henhold til funktion og layout. Styrkerne ved denne strategi er blandt andet at man forbereder sig på den eksplosive vækst og de nye muligheder der dukker op for mobilen i dag samt at man bliver tvunget til at tænke kreativt ved at udvikle nye funktioner til mobile enheder (Ibid: 1). Hele denne tankegang er også en af grundene til at vi i første omgang ønskede at udvikle en app. Denne bliver dog udviklet som en hjemmeside, hvorfor vi fandt det yderligere relevant at arbejde ud fra Mobile First strategien

26 Når der designes til mobile enheder er der nogle begrænsninger (constraints), der bør tages højde for såsom skærmstørrelse, mængde af information, touch, device orientation etc. Der er rigtig mange overvejelser og beslutninger, der skal træffes i den forbindelse, hvoraf vi vil komme ind på nogle af de, der har været vigtige i vores udvikling af app en: Størrelse af interaktive elementer: Touch screens er ofte anvendt på mindre skærme, hvilket også bør være en vigtig overvejelse i udviklingsprocessen (Ibid: 67). Det er her vigtigt at sikre sig at touch elementernes størrelse er rigtig proportioneret i forhold til både skærmstørrelse og finger. I vores design har vi arbejdet ud fra go small by going big -princippet, hvor det har været vigtigt at give plads til knapperne, idet disse er centrale for vores brugerscenarie. Placering: Udover selve elementerne på en touch screen er det også vigtigt at tage højde for bevægelsesmønstrene på mobile enheder (Ibid: 73-74). Holdes en smartphone med højre hånd er det lettest at ramme det mørkegrønne område, herefter det lysere grønne, hvor tommelfingeren skal række langt for at nå det gule område. Dette har vi også arbejdet med prototype, og for så vidt muligt holdt os til standardkonventioner for knappers placering. 6.2 BENSPÆND Som en del af projektkravene for denne opgave, skulle vi implementere minimum ét ud af tre tekniske benspænd. Hertil valgte vi at fokusere på at implementere Benspænd B, som omhandler optimering til forskellige visningstilstande. Begrundelsen for dette valg er relevansen i forhold til forskellige opløsninger på mobile enheder, herunder tabletdevices. For at løse denne opgave rent teknisk, har vi arbejdet med float-enheder og relative positioneringer af elementer, der anvender 25

27 procentvise dimensioner, hvilket bidrager til en gennemgående tilpasning af vore UI på tværs af opløsninger. Herunder ses to skærmbilleder, som viser hvorledes at vores prototype er repræsenteret på bredere skærme (f.eks. tablets): 26

28 6.3 VALIDERING Vi har valideret alle vores html-filer, som udgør grundsstrukturen i vores prototype, således at der ingen fejl eksisterer pånær en advarsel omkring udviklende standarder for HTML5. Dette skyldes at den nye standard stadig er under udvikling, men understøttes i moderne samt ældre browsere - hertil skal det dog siges, at vi ikke anvender htmlelementer med begrænset browser-understøttelse. Hvad angår vores styling (CSS), så rapporterer W3C s CSS Validator om ukendte vendor extensions og pseudo-elementer. Disse fejl og advarsler har dog ingen negativ indvirkning på den visuelle præsentation af prototypen i test-browsere såsom Safari, Google Chrome og Mozilla Firefox. Fejlene omhandler to former for implementering, som vi har ladet blive i den sluttelige version af prototypen; vi anvender CSS-biblioteket Normalize.css, til at nulstille og standardisere browser-elementer på en konsistent måde og i forhold til vendor extensions, så omhandler advarslerne brugen af gradienter til knapper og øvrige grafiske elementer. 14 Det kunne valideres ved brug af horisontalt gentagende grafiske elementer, men vi har valgt at beholde konstruktionen i sin nuværende form grundet fleksibiliteten i implementeringen og den videre udviklingsproces USABLITITYTEST 2.0 Vores endelige prototype blev testet på baggrund af Ole Gregersen og Ian Wisler-Poulsen teori om usability som blev beskrevet tidligere under afsnittet Usabilitytest 1.0. Gennem hele processen har brugerne været i fokus, og det var derfor vigtigt at lade dem teste prototypen, og på baggrund af deres feedback blive opmærksomme på goder og mangler. I tråd med at vores andre undersøgelser og første usabilitytest blev foretaget i miljøet omkring pølsevognene, var det nærliggende at lade tilfældigt udvalgte mennesker teste prototypen. Formålet med testen var at undersøge, om vi gennem prototypen opfylder vores problemformulering og har udviklet et produkt, der er brugervenligt og brugbart for målgruppen. Denne test adskiller sig dog fra første usabilitytest, da den er mere detaljeorienteret og ligeledes fokuserer på layout og design. Testpersonerne vurderede hjemmesiden ud fra Ole Gregersen og Ian Wisler-Poulsens tre usabilitykategorier som beskrevet tidligere. Funktionalitet: Det generelle indtryk fra brugerne var, at de nemt forstod, hvad de forskellige funktioner skulle bruges til. Der blev bl.a. nævnt at app en 27

29 indeholder de nødvendige informationer, man har brug for, når man er sulten og skal finde en pølsevogn. En af brugerne efterlyste en indikator for, hvilken genre man har valgt, efter man forlader filtreringssiden. Dette ville give brugeren mulighed for i den videre proces at se, om man f.eks. har valgt økologisk. Dette vil eventuelt kunne opnås ved at pølserne på kortfunktionen bliver vist i en ny farve, som indikerer den repræsenterede genre. En bruger efterspurgte mulighed for pushbeskeder eller notifikationer, når man er tæt på en pølsevogn, man tidligere har anmeldt. Samme bruger efterspurgte ligeledes en funktion, der meddeler, når andre brugere anmelder pølsevogne, man tidligere selv har anmeldt. Effektivtet: Flere af brugerne nævnte, at layoutet var meget overskueligt og let at navigere i. Dog blev der af én bruger påpeget, at vedkommende savnede en angivelse af vis/skjul på filterknappen for at hjælpe brugere til at forstå funktionen bedre. Ligeledes tilføjede flere brugere, at de var lidt i tvivl om betydningen af hjerter og pølse,r som er listet ude for hver pølsemands profil. Der blev også kommenteret på størrelsen af knapper, når man skal vælge genre, da en ældre bruger syntes, de var lidt svære at ramme. Tilfredshed: Der tegnede sig et generelt billede af tilfredshed blandt brugerne. Folk fandt den sjov og nem at bruge. En bruger nævnte at han klart ville bruge den. En bruger sagde samtidig at han fik vildt meget lyst til at købe en pølse nu Udover de tre opstillede kategorier, mener vi, at der er et behov for at definere en ekstra kategori, som vi vælger at kalde den visuelle oplevelse, da prototypens layout også påvirkede brugereoplevelsen. Visuelle oplevelse: Der blev kommenteret på filterets farve, samt filterknappens størrelse, der ifølge flere brugere ikke matcher det øvrige layout. Tillige oplevede en bruger en asymmetri i opbygningen af ikonernes placering i navigationsbaren og foretrak, at de placeres symmetrisk orienteret mod midten. Ud fra testen blev vi både bekræftet i hvilke funktioner, der virkede efter hensigten, og at brugeren generelt set havde nemt ved at forstå og navigere i app en. Men vi fik også tilbagemelding på hvilke elementer, der kunne forbedres både funktionelt og visuelt. Dette vil vi tage højde for i et fremtidigt arbejde med app en. 28

30 29