Mobilt website for Købehavns Fødevarefællesskab

Exercise 7 Gruppe: De Fleksitive Casper Nøhr Marie Dansgaard Henrik Roloff Mobilt website for Købehavns Fødevarefællesskab

Indholdsfortegnelse Indledning Problemformulering DEL1 Dataindsamling og -behandling Metode Afgrænsning Dataindsamling og -behandling Målgruppeanalyse Personas DEL2 Designproces Skitsering Design til mobile enheder - usability Designovervejelser Motiverende strategi Sitemap - nuværende hjemmeside Konklusion Litteratur Bilag

Indledning Københavns Fødevarefællesskab (kbhff) blev stiftet i 2008 som en indkøbsforening, der har til formål at tilbyde medlemmerne lokalt producerede økologiske fødevarer til en pris, der kan konkurrere med konventionelt producerede og/eller importerede fødevarer. Den konkurrencedygtige pris sikres ved en høj grad af medlemsinddragelse, idet man med sit medlemskab forpligter sig til en månedlig arbejdsindsats på tre timer, og et eventuelt overskud fra salget anvendes til at sænke priserne, udvikle foreningen eller som bidrag til godtgørende formål. Som medlem i foreningen er man således både kunde, medarbejder og medejer. kbhff s websted, kbhff.dk, spiller en vigtig rolle i organiseringen af foreningen, både som informationskanal for eksisterende og potentielle medlemmer og som planlægningsværktøj. Her kan medlemmerne finde information om ugens grøntsagspose, søge inspirerende opskrifter, debattere og ikke mindst bemande vagtplanen, så det sikres, at alle opgaver løses. kbhff.dk bygger på WordPress bloggingplatform kombineret med wikis, et bbpress forumsoftware og Googles kalenderfunktion. På nær kalenderen er alle værktøjerne dårligt integrerete i webstedet, hvilket bevirker, at webstedet i realiteten har tre forskellige brugergrænseflader og følgelig tre forskellige grafiske udtryk. Samtidig er indholdet generelt dårligt struktureret. Det gør det besværligt at bruge webstedet og bevirker, at foreningen fremstår fragmenteret og ringe organiseret. Der er således gode muligheder for at forbedre webstedet. I 97% af alle danske hjem findes en mobiltelefon. 33% heraf er en smartphone (Danmarks Statistik 2011, s. 1). Da en stadig voksende andel af danske internetbrugere anvender mobiltelefonen til at komme på internettet (Danmarks Statistik 2010, s. 21), og der er mange fordele ved at vælge en Mobile first-tilgang (Wroblewski 2011, s. 6-7) til webdesign, har vi valgt at fokusere på en mobil løsning, som efterfølgende vil kunne danne grundlag for et redesign af desktop-webstedet. Sidstnævnte ligger dog uden for opgavens område (se Afgrænsning). Problemformulering Vi ønsker at udarbejde en mobil løsning for kbhff.dk, der sikrer medlemmerne mulighed for hurtig opdatering og smidig planlægning når som helst og hvor som helst, uden at de skal være afhængige af adgang til computere. Udover den forbedrede brugeroplevelse skal den mobile løsning bidrage til at brande kbhff som en professionelt drevet forening, der tager sine medlemmer alvorligt, og hvor spildtid minimeres så der holdes fokus på det overordnede formål: at fremme økologi for menneskets og naturens skyld. På denne baggrund har vi fundet det relevant at arbejde ud fra følgende problemformulering: Hvordan kan vi tilskære, strukturere og præsentere indholdet fra kbhff s eksisterende websted på et mobilt websted, så brugerne sikres en let og hurtig kilde til information og planlægning?

Eller noget lignende: Hvordan skal der tages højde for designet i forbindelse med brugervenlighed for mobile enheder? For at nå et fyldestgørende svar herpå har vi opstillet en række kriterier for, hvornår et mobilt websted for kbhff kan anses for vellykket: Let organisering af arbejdet gennem simpel og intuitiv opdatering af vagtplanen Hurtig adgang til den vigtigste information som eksempelvis ugens grøntsagspose og akut behov for afløsere Skabe et grønt design, der taler til målgruppen Mere overskuelig opskriftssamling Bedre oversigt over blogindlæg via kategorisering

DEL1 Dataindsamling og -behandling Metode Fremgangsmåden for vores projekt vil have bund i en iterativ proces, der er således ikke fastlagt et på forhånd start- og slutpunkt, med det vil ske som en flydende proces, hvori der kan arbejdes frem og tilbage imellem design og nye idéer. Med Fallmans (2003) termonologi hører vores designtyper ind under den Pragmatiske account som kan siges at være en mellemting blandt de mere yderliggående romantiske- og konservative accounts. Måden hvorpå en pragmatiker arbejder giver et godt billedet af måden hvorpå struktureringen af projektet forløber. Det skal dog ikke være direkte ensbetydende med at arbejdet ikke kan være flydende iblandt disse accounts, idet vi naturligvis også låner argumentationer og metoder fra videnskaber (derved det konservative), som beskriver processor i mennesket der skal tages højde for i sine design. (Eventuel grafisk fremstilling af nedenstående proces) 1. Identificering af målgrupper udarbejdelse af personas 2. Kortlægning af indhold på eksisterende kbhff 3. Definering af væsentligste indhold til mobilt websted 4. Udarbejdelse af roughboards og wireframes for mobilt websted 5. Mock-up af mobilt websted 6. HTML og CSS for væsentligste sider på mobilt websted

7. Usabilityundersøgelse 8. Tilpasning baseret på usabilityundersøgelse Afgrænsning Selvom opgaven tager afsæt i kbhff s eksisterende websted, der er udviklet for visning på stationære og bærbare computere, er sigtet med opgaven at designe et websted for mobile enheder (primært smartphones, og vi kommer derfor ikke ind på, hvordan de erfaringer vi har gjort os i løbet af designprocessen vil kunne finde anvendelse på et redesign af det eksisterende websted. Selvom størstedelen af mobiltelefonerne i danske hjem fortsat er af den konventionelle slags, vil vi i designet af det mobile website udelukkende fokusere smartphones, ud fra den begrundelse, at et hovedsageligt er personer med smartphones, der går på internettet via deres mobiltelefon. Mangler kilder Dataindsamling og -behandling Offline markedsanalyse (personlige interviews, spørgeskemaer) Online data (analytics, webmaster) Målgruppeanalyse Brugerne af kbhff spænder vidt, det er studerende, den almindeligt arbejde familiemor/far, pensionisterne og de idealistiske hippie typer. Der er dog karakteristika som kendetegner brugerne, hvorfor målgruppen ikke afgrænses demografisk, men mere ved politisk overbevisning, ikke at dette derved betyder at alle stemmer på Enhedslisten. Ud fra samtaler og interviews med brugerne opstilles der to personas som i større eller mindre grad kendetegner brugergrupperne af kbhff. Personas Ud fra værdierne for kbhff som er bestemt af medlemmerne samt uddrag fra interviews og opslag, kan der udarbejdes de personaer som benytter sig af fødevarefællesskabet. Hippien Går ind for bæredygtighed Meget opmærksom på miljøet og de indvirkninger man har som privat person igennem sine dagligdags valg. Ønsker at mindske sit CO2-fodspor. Går ind for fair og direkte handel. Er ikke glad for supermarkeder og fordyrende mellemled, ser hellere at pengene skal gå direkte til producenten, hvorved det også bliver billigere for forbrugeren. Tror på det bedste i mennesker. Vil kun dele sit fællesskab med andre som yder sit hertil. Ser økologi som den eneste rigtige måde at producere på.

Den semi-miljøbevidste Ønsker at fremstå som den miljøbevidste type, men fører ikke altid dette helt ud i livet. Støtter gerne gode formål, men er ikke den der går forrest med initiativet. Har ofte en travl hverdag, hvilket derfor også influerer den miljørigtige tankegang, det er ikke noget der altid er tid til. Er kendetegnet ved studerende og karrierepersonen som gerne vil have et andet image end kapitalsøgeren.

DEL2 Designproces Skitsering For at udvikle designet på forhånd og imødekomme eventuelle problemer med de valgte elementer, er en vigtig del af processen at skitsere på papir før der påbegyndes programmering og billeddesign. De skitserede mockups kan ligeledes bruges som testversioner overfor en eventuel bruger, for at få forhåndsvurderet brugergrænsefladen, hvorvidt disse fungerer intuitivt og har de ønskede funktionaliteter. Design til mobile enheder - usability I forhold til skrivelser i Mobile First: Begrænsning i selve størrelsen på skærmen, begrænsninger i form af at der navigeres ved brug af klodsede fingre, derfor skal knapper have en vis størrelse, som sikrer at brugeren ikke bliver irriteret under navigation på siden. Designovervejelser Hvor placeres knapperne i forhold til vigtighed, muliggørelse af navigation med en hånd, dvs. brug af tommelfinger. I overvejelserne omkring design skal der ligeldes inddrages aspekter omkring hvorledes budskaberne kommunikeres på den korekte måde, hertil kan bla. Laswells kommunikationsmodel bruges, denne kan opstilles således: Modellen kan bruges som grundlag for måden som det nye design skal udformes, hver kasse repræsenterer et område, hvori der skal tages højde for emner som kan have en betydning for de valg der skal tages i forhold til designet. Motiverende strategi

Ved at udvikle en særlig webside til smartphones, forenkler vi brugerens passage til sit mål. Den generelle webside bude også være let at gå til, så hvorfor det særlige behov? - Når en bruger får adgang til siden gennem sin smartphone, kan vi antage to ting: vedkommende er højst sandsynligt ikke hjemme og vedkommende har et ærinde hos os, som får ham til at trodse besværet ved at surfe på mobilen. Ud af disse antagelser, kan vi gå ud fra at brugerens nuværende miljø er travlt, og dermed ikke egner sig til fordybelse. Som designere af siden kan vi ved at anlægge en motiverende strategi, give brugeren lettere adgang til de elementer, som der er størst sandsynlighed for er hans mål (Fogg, 2003, s.33). For at finde de mest brugte elementer på hjemmesiden kunne vi f. eks. Bruge Google Analytics til at undersøge brugeres adfærd på siden. Herefter kunne vi koge siden ned til det mest essentielle og give et egnet design til mobilen. Denne strategi dækker dog ikke over at brugerens ærinde via smartphone er et andet end via pc. Derfor må vi som designere tænke med i processen: hvad vil VI gerne have at brugeren lægger mærke til når han vælger at bruge tid på os gennem smartphone? På den meget sparsomme plads vi har til rådighed på en smartphoneskærm kan vi foreslå de valg vi gerne vil have han tager, og som vi må antage han er åben over for (ibid, s.41). Vores hovedmål vil være at erhverve ham som kunde, men det er i vores interesse, at fremstå uegennyttige og derved vinde sympati. Særligt med en målgruppe som er særlig kritiske. Derfor skal det første tilbud på siden heller ikke være her bliver du medlem, men her har du nogle gratis opskrifter. Ved at forære noget til vores bruger, i form af hjælp og opskrifter, vil vores selskab fremstå uegennyttigt og give brugeren en fornemmelse af taknemmelighedsgæld (ibid, s.50). Den åbenhed kan vi bruge senere, når vi forslår et medlemskab. At åbne en webside via sin smartphone, og opdage en særlig udviklet side til individet som smartphonebruger er stadig mere undtagelsen end reglen. Det er dermed en behagelig overraskelse, som får brugeren til at føle sig vel mødt. Han kan mærke at der bliver taget særlig hensyn til hans behov og komfort (ibid, s.38). Dette vil forhåbentlig bidrage til hans åbenhed over for vores forretning.

Sitemap - nuværende hjemmeside

Wireframe skitser Logo Tagline (Er det Økologi til alle?) Opskrifter (link til ny side): links til undersider ved videre specifikation eller genbrug af råvaresky. Om KBHFF (link til ny side): Kort beskrivelse af guddommelige etiske principper, 3 gode grunde til at blive medlem + hvordan. Citat (Der må kunne siges noget om, hvorfor vi reagerer positivt på hvad andre godt kan lide? Marketingstrick anyway..) Afdelinger (dropdown fane med links): links til alle afdelinger Medlemmer (dropdown fane med links): vagtplan, forum Hjemmeside (link)

Roughboard - Stemningen som vi ønsker at brugeren skal opleve. Den skal have et øko-look, fremme den miljøbevidste tankegang. Simplistisk men effektfuld, da et overdrevet design muligvis vil have den modsatte effekt i forhold til modtageren: Hvis noget skal afspejle noget grønt og billigt skal der ikke kastes en masse Pang og flash ind.

Konklusion

Litteratur Wroblewski, Luke (2011): Mobile first. A Book Apart. Fogg, B. J. (2003): Computers as Persuasive Tools -Persuasive Technologi - Using Computers to Change What We Think and Do, s. 31-54. Morgan Kaufmann Publishers. Turner, P., Turner, S. (2011): Is stereotyping inevitable when designing with personas?. Design Studies, 32, 30-44. Buxton, B. (2007): Sketching user experiences: getting the design right and the right design. Danmarks Statistik (2011): Befolkningens brug af internet 2010, Danmarks Statistik Danmarks Statitisk (2011): Elektronik i hjemmet 2011, Danmarks Statitstik Mobile Design and development: http://books.google.com/books? hl=da&lr=&id=lymeulbtkh0c&oi=fnd&pg=pr5&dq=smartphone+web+design&ots=ftvpd0noc6 &sig=smmhaax-njz2fufzqusiqh2sdii#v=onepage&q=smartphone%20web%20design&f=false Links til mobil website design: http://www.webpagefx.com/design-build-mobile-web-site.html http://www.noupe.com/how-tos/mobile-web-design-tips-and-best-practices.html http://www.mobileawesomeness.com/ http://sixrevisions.com/web-development/mobile-web-design-best-practices/ http://www.adapt.dk/blog/designtrendspaamobilewebapps/ http://www.sitepoint.com/designing-for-mobile-web/ http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ Bilag