ANSVARSFORDELING I OPGAVEN

Transkript

1 ANSVARSFORDELING I OPGAVEN Introduktion: Præsentation af prototype: Arbejdsproces og metodevalg: FLY: Brugerne: Webshoppen som genre: Motiverende design: Informationsarkitektur: Kommunikation: Visuel identitet: Usability og brugerindragelse: Konklusion: Videreudvikling af sitet Fælles Nynne Nynne Katrine Katrine Sidsel Sidsel Nynne Katrine Sidsel Katrine Fælles Fælles

2 INDHOLDSFORTEGNELSE Introduktion...3 Præsentation af prototype...3 HTML og CSS...5 Prioritering...6 Browserkompatibilitet...6 Arbejdsprocess og metodevalg...7 De fem planer...8 FLY...9 FLYs ønsker...9 Samarbejde med FLY...10 Kommunikation Tekst Sprog Visuel identitet Farvevalg Illustrationer Typografi Usability og brugerindragelse Konklusion Videreudvikling af sitet Kildeliste Brugerne...12 Hvem er brugeren...12 Den danske forbruger...12 Webshoppen som genre...13 Informationsarkitektur...17 Wireframes...17 Strukturelle virkemidler

3 Introduktion Vi har fået stillet til opgave at skabe et site til den ny- opstartede virksomhed FLY. I vores søgen efter en case til dette projekt vidste vi at vi gerne ville prøve kræfter med at opbygge en hjemmeside fra bunden, og ikke redesigne et eksisterende site. Desuden fandt vi det vigtigt at vælge en case hvor perspektivet er at sitet skal implementeres. Derfor valgte vi at alliere os med en ny virksomhed, der endnu ikke har fået en hjemmeside op at stå. Virksomheden, der distribuerer skomærket FLY LONDON, ønsker et site der tiltaler den danske målgruppe. Målet med sitet er at sælge sko til det danske marked, altså er en webshop sitets primære funktion. Ydermere ønsker FLY at skabe et univers hvor brugeren kan indhente inspiration og interagere med andre brugere. En webshop kan være et godt udgangspunkt for en nyopstartet virksomhed på grund af de relativt lave omkostninger der er forbundet med det. Dog er det essentielt at have brugerens behov for øje når man skal designe og implementere et sådant site. I dette projekt vil vi forsøge at identificere hvordan sådanne behov kan opfyldes ved hjælp af forskellige visuelle og funktionelle virkemidler. Vi vil desuden bestræbe os på at efterleve disse i udarbejdelsen af vores prototype. På baggrund af vores dialog med FLY har vi formuleret følgende problemformulering: Vi ønsker at skabe et webunivers som FLYs målgruppe af modebevidste kvinder kan identificere sig med. Derudover vil vi bestræbe os på at skabe god sammenhæng mellem skoenes design og sitets visuelle udtryk. Desuden skal sitet indgyde tillid hos brugerne og motivere dem til at handle. Præsentation af prototype Vores prototype består af en statisk hjemmeside, hvoraf vi har valgt at kode syv sider. Det færdige website vil kræve kodning af flere sider, men da mange af siderne vil have samme design og struktur, har vi valgt at prioritere at vise ét repræsentativt eksempel for hver af de syv sidetyper. Nedenfor er et diagram over websitets overordnede struktur. 3

4 4

5 HTML og CSS Vores prototype er udarbejdet ved hjælp af de kodningssprog som kurset dækker, (X)HTML og CSS. Prototypen består af syv HTML sider og et CSS stylesheet. Både HTML og CSS siderne validerer med the W3C markup validation service ( i (X)HTML 1.0 strict. Vi havde dog problemer med at få de to sider med checkbokse på (shop_forside.html og shop_enkelt.html) til at validere. Efter at have gennemgået koden grundigt tillader vi os at antage at det var elementerne til checkboksene som (X)HTML 1.0 strict ikke vil validere. Derfor fjernede vi koden, validerede siden og satte derefter koden tilbage i dokumentet. Da valideringsikonerne ikke passer med det overordnede design har vi valgt at placere valideringskoden i en kommentar nederst på hvert enkelt dokument. I udviklingen af prototypen har vi prioriteret at afsender nemt kan vedligeholde og udbygge sitet. Derfor er det vigtigt at HTML og CSS siderne er struktureret ordentligt og overskueligt, så en udenforstående let kan forstå kodens sammensætning. I HTML 5 dokumenterne har vi forsøgt at strukturere koden efter to parametre; elementernes placering og prioritering. Vi har ved hjælp at tabulatoren struktureret koden således at det let kan ses hvilke elementer der hører sammen. F.eks. bliver en <div> startet og afsluttet på samme vertikale niveau (se nedenstående eksempel). <div id="right- column"> <img src="../image/inspiration_3.jpg" alt="copenhagen Look"/> <div id="boxin"> <h2>copenhagen LOOK</h2> <h3>her er sko til dig der kan lide at mikse det praktiske med det elegante...</h3> </div> </div> Vi har desuden forsøgt at skabe en overskuelig struktur ved at bruge et såkaldt semantisk markup. Dette gælder for prioritering af elementerne og betyder at man bruger det HTML element der bedst beskriver indholdet (Robbins, 2007). F.eks. er h1 brugt til en vigtigere overskrift end h2.

6 Prioritering På diagrammet ovenfor fremgår det hvilke sider vi har prioriteret at kode og hvilke vi har undladt. I det nedenstående vil vi argumentere for vores prioriteringer. En essentiel funktion i en komplet prototype vil være siden hvor brugeren skal gå til kassen. Linket til denne side er illustreret af et ikon med en indkøbskurv som er placeret i højre hjørne. Som oftest indeholder en sådan side en bekræftelse af brugerens valg og et skema hvor betalingsoplysninger og personlige informationer udfyldes. En populær metode er dog også at lade denne side fungere som et log- in, så brugeren ikke behøver at indtaste samme oplysninger, hver gang de shopper på sitet. Vi anerkender at denne side er vigtig for sitets overordnede funktionalitet, men har imidlertid valgt ikke at kode den af flere grunde. Dels fordi afsenderen endnu ikke har taget stilling til hvordan købsproceduren skal foregå. Dels fordi de kodemæssige krav til en sådan side ligger uden for vores formåen og kriterierne for dette projekt. I shoppens drop- down menu kan brugeren vælge at indkredse sin søgen til kun at omfatte én slags sko. Disse sider har vi dog valgt ikke at kode fordi en egentlig kategorisering af skoene endnu ikke har fundet sted. Designet og koden af sidetypen vil være ens med shop- oversigten (shop_forside.html), med den undtagelse at der f.eks. kun vil blive vist billeder af støvler. Det samme gør sig gældende for de enkelte sko. I en komplet prototype ville hver enkelt sko have en side lig den gule skos (shop_enkelt.html). Igen ville designet og koden være ens med undtagelse af billederne af skoen og den tilhørende tekst. Med hensyn til inspirationssiderne har vi ligeledes prioriteret kun at lave én repræsentativ side (copenhagenlook.html). Linket til NEW YORK LOOK og LONDON LOOK er derfor ikke aktive. Browserkompatibilitet Prototypen er optimeret til Mozilla Firefox, Crome og Safari da det er de browsere vi opererer med normalt. Desuden dækker disse ca. 70% af alle de browsere som brugerne anvender ( Vi har bestræbt os på at sitet 6

7 vises ens i disse, dog kan nogle detaljer stadig variere fra browser til browser. Selvom vi anerkender Microsoft Internet Explorer s popularitet har vi valgt ikke at optimere sitet til denne browser, da vi arbejder på Mac og dermed ikke bruger den til dagligt. Vi forventer dog at den nyeste version af Explorer (v. 8) vil vise sitet uden de helt store udsving. Arbejdsproces og metodevalg Gennem vores projektforløb har vi forholdt os til principperne bag Garret s Elements of User Experience. Garret forklarer vigtigheden i at følge den rette proces, når man udvikler et website. Til dette formål har han udviklet en model der inkluderer 5 planer; overflade, skelet, struktur, omfang og strategi. Processen starter på et meget abstrakt plan og bliver derefter mere og mere konkret, for til sidst at munde ud i et endeligt interface (Garret, 2003). Garret inddeler desuden websites i 2 kategorier i henhold til deres primære formål; sites med fokus på informationsindhold og sites med fokus på funktionalitet (ibid.). I forhold til disse passer vores site primært ind under sidstnævnte kategori, eftersom formålet med sitet er at få folk til at købe sko. Informationsindholdet er dog ikke uden betydning, da vi mener dette er essentielt for brugernes tillid til siden. Vi vil derfor forholde os til både de funktionelle og informative aspekter, dog med vægtning på funktionalitet. 7

8 I det følgende vil vi klargøre hvordan vi har benyttet os af Garret s principper og hvilken effekt disse har haft på vores valg af metode. I resten af opgaven vil vi forsøge at belyse hvad vi har fået ud af disse metoder, og hvordan det har påvirket vores endelige design. De fem planer På det strategiske plan var vores tætte samarbejde med virksomheden FLY særdeles vigtig. For at kunne indkredse vores designfokus, var det essentielt at forstå afsenderen, deres mål med sitet og hvor det passede ind i virksomhedens overordnede strategi. På den baggrund afholdte vi en workshop med de to unge fyre, som udgør FLY. Udover de ovenstående motiver var målet at klarlægge deres ønsker til sitets indhold, dets funktioner og hvor meget arbejde de er villige til at lægge i vedligeholdelse. Som en del af workshoppen afholdte vi en sketching- session hvor gruppen og virksomheden fik mulighed for at bringe designideer på bordet. Tegningerne og ideerne bag, blev efterfølgende gennemgået og fordele og ulemper identificeret. 8 Det næste plan handler om at indkredse hvilke funktioner og hvilket indhold der skal udgøre ens site. Her brugte vi især energi på at gennemgå FLYs ønsker omkring sitet, og vurdere hvorledes de var relevante og realistiske. Brugernes forventninger var også en vigtig faktor på dette stadie. Derfor fandt vi det vigtigt at forholde os til teorierne omkring webgenrer. Disse overvejelser førte i sidste ende til en oversigt over sitets endelige indhold og funktioner. Fra en abstrakt oversigt var næste skridt at lave en mere fast struktur over sitet. Her brugte vi især sketching- og wireframeteknikker til at lægge os fast på indhold, dybde og hvordan brugerne skulle navigere rundet på sitet. Inspiration blev hentet fra principper bag interaktionsdesign, informationsarkitektur (IA) og usability. Også på næste plan var sketching og wireframes hjælpsomme teknikker. Denne gang var de dog mere detaljerede med fokus på specifikke visuelle overvejelser og tanker omkring placering af elementer på siden. I denne fase blev det endelige interfacedesign til sitet fastlagt med hensyn til farvevalg,

9 illustrationer, navigation mm. Igen var afsenderen med til at vurdere vores forslag og deres feedback blev taget til efterretning og efterfølgende inkorporeret. I sidste fase påbegyndte vi arbejdet med billedbehandling samt HTML og CSS kodning. Her kunne sitets endelige visuelle udtryk og funktionalitet testes og evalueres. Da brugertesting skete forholdsvis sent i forløbet blev deres feedback taget til efterretning og noteret, men dog ikke implementeret i prototypen. Brugerinddragelse og testning vil blive beskrevet senere i opgaven. FLY FLY er en virksomhed under opbygning. Virksomheden skal fungere som distributør af skomærket FLY LONDON, til det danske online marked. FLY LONDONs produkter er allerede repræsenteret på det danske detailmarked men der findes endnu ikke et dansk website som udelukkende forhandler deres produkter. Stifterne bag FLY ønsker begge at bibeholde deres nuværende jobs, hvilket betyder at styring af websitet primært vil fungere som sidebeskæftigelse. Det sætter krav til designet der skal kunne fungere og virke relevant med et minimum af vedligeholdelse. Hvor disse faser virker meget lineære, var det i virkeligheden en iterativ proces der rykkede vores fokus frem og tilbage mellem de forskellige faser. En vigtig ting i denne iterative cirkel var dog at følge Garret s råd om ikke at afslutte en fase før den foregående blev afsluttet (Garret, 2003). F.eks. var det endelige design udarbejdet ved hjælp af wireframes før vi begyndte at kode i HTML og CSS. Denne metode betød at vi kunne revurdere vores beslutninger og redesigne uden at spilde tid på unødvendigt dobbeltarbejde. 9 FLYs ønsker Afsenderen har et ønske om at brugeren får styrket sit image, status og identitet ved at købe FLY LONDON produkter gennem FLYs website. De ønsker på den måde at give brugeren en beriget brugeroplevelse. Websitets opbygning skal altså være den afgørende medfaktor i at skabe en god forbindelse mellem brugeren og produkterne.

10 FLY udtrykker et klart ønske om at websitet overvejene skal kommunikere visuelt, og at dette udtryk skal reflektere FLY LONDON produkters originale design. Endvidere anser de brugervenlighed som værende et must, da brugeren let skal kunne navigere sig rundt mellem siderne og benytte sig af shop funktionen. Derudover har virksomheden også et ønske om at skabe et forum hvor kunderne kan mødes, dele erfaringer omkring skoene og give hinanden gode råd og lignende. FLY har givet specifikke ønsker til shoppen og dennes funktioner. På shoppens forsiden skal der være en visning af flere produkter. Når brugeren har valgt et specifikt produkt skal der være en grundig produktbeskrivelse, prisen skal fremgå tydeligt, og det skal være klart hvilke farver og størrelser der er tilgængelige. Samarbejde med FLY Gennem hele forløbet har vi været i dialog med FLY, og de har på den måde været inddraget i flere af designets faser. Vi har afholdt 3 møder med dem hvor vi har fremlagt vores foreløbige resultater og fået konstruktiv kritik. Det har været vigtigt for os at få konstruktiv kritik fra FLY undervejs i processen, da det har 10 givet os en vished om det endelige resultat ville falde i deres smag. Tidligt i processen afholdte vi en workshop, hvor vi i fællesskab kom frem til hvad websitet skulle udtrykke, og her fik vi som projektgruppe en bedre fornemmelse af hvordan den stillede opgave skulle løses. Da FLY ønskede sig et yderst brugervenligt site blev dybden på sitet diskuteret. Begge parter var her enige om at denne skulle holdes på et minimum. FLY har ikke haft nogle egentlige ønsker til navigationens opbygning, men har udtrykt at de gerne ville have så få klik som muligt, hvilket vi har forsøgt at indfri. Inden det første møde med virksomheden havde vi arbejdet med forskellige ideer til det kommende site. Vi kom med et forslag om at fremhæve det legende og skæve udtryk i FLY LONDON produkterne via et illustrativt site, og samtidig skabe et forum hvor fantasien havde mulighed for at blomstre. Vi ville skabe et anderledes site med en ukonventionel struktur, for på den måde at imødekomme ønsker om en øget brugeroplevelse. FLY var meget begejstret for denne ide, men påpegede dog vigtigheden

11 af at sitet skulle fremstå enkelt og med produkterne i fokus. De Det andet møde med FLY foregik således at vi fremlagde vores var bange for at et for larmende site, ville overskygge sidens skitserede wireframes og lod dem interagere med siderne. Ved egentlige formål. I fællesskab blev vi enige om en løsning der hjælp af disse wireframes kunne FLY rykke rundt på og klynge bevarede det kreative og farverige men med en mere enkelt indhold som det syntes det var passende. Forslag til navigation struktur. På den måde ville siden ikke distancere sig fra den mere blev også diskuteret her og i tråd med FLYs ønske om så få klik voksne brugergruppe, og den statiske struktur ville heller ikke som muligt bragte vi muligheden for en drop- down menu på kræve så meget opdatering fra FLYs side. banen. Ved det tredje og sidste møde fremviste vi vores prototype i browseren, dog uden velfungerende links. Herfra fik vi igen brugbart kritik, samt enkelte ønsker til ændringer som FLY fandt essentielle for at websitet opnår det optimale udtryk. Disse ændringer vil blive behandlet senere i opgaven. Ved første kontakt med Fly gav virksomheden udtryk for at de, via hjemmesiden, ønskede at skabe et forum for brugerne. I dette forum skulle der være plads til at dele tanker, poste råd omkring produkterne m.m. Denne skulle være opbygget som en blog, men ikke kræve opdateringer fra virksomheden side. Vi udtrykte vores bekymring omkring blog- tanken, da en blog har Resultat af workshop afholdt sammen med FLY behov for hyppig opdatering. Endvidere havde vi også en dialog om hvordan et sådan forum ofte kan gå i dvale, da det kan være 11

12 svært at få kunderne til at starte en debat på egen hånd. Begge parter blev herefter enige om at linke til en kommende Facebook- gruppe, hvor der løbede vil blive opdateret med billeder og nyheder. Her vil brugerne også kunne komme i kontakt med hinanden og starte debatter hvis det viser sig at være i deres interesse. Brugerne Da FLY, som beskrevet tidligere, er en nyopstartet virksomhed, er der endnu ikke defineret en klar målgruppe. Vi finder det dog essentielt at komme nærmere denne for at kunne etablere en forståelse mellem afsender og modtager. FLY bevæger sig på et marked hvor det vil være oplagt at analysere på de kulturelle variable, frem for baggrundsvariable. Dette skyldes at virksomheden arbejder med mode og stil, og samtidig opererer indenfor en prisklasse der tiltaler en bred målgruppe. En løsning til at inddele sin målgruppe kan være at benytte sig af minerva- modellen. Vi finder vi dog denne metode for konkret, i forhold til de sparsomme oplysninger vi har omkring målgruppen. Derimod finder vi det mere realistisk at antage at målgruppen findes blandt en generation af kvinder der er vandt til at handle på nettet og søger et troværdigt website som tilbyder kvalitetsprodukter. Hvem er brugeren For at opnå en bedre forståelse af den målgruppe man beskæftiger sig med, vil det være givende for virksomheder at foretage en analytisk kategorisering af målgruppen (Rasmussen og Eriksen, 2008). Den danske forbruger Et af målene hos FLY er at kunne tilbyde de danske forbrugere et website med kvalitets sko. Nedenstående diagram, fundet på Danmarks Statistik ( ) viser hvad det er den danske forbruger finder centralt når de skal handle online. 12

13 medieindhold. Genren bruges til at betegne en gruppe værker med fælles træk, og som indeholder lignende elementer. Ida Engholm forsøger, ud fra denne tradition, at betragte webdesigns udvikling fra et genre- og stilperspektiv, og tilføjer hermed en ny teknik til analyse af websites (Engholm, 2007). I dette projekt har vi fundet det givtigt at anvende genrebegrebet, for på den måde at placere vores site i en større sammenhæng. Vi placerer FLYs site inden for genren webshops, da salg er det åbenlyse formål med sitet. Som nævnt har vi en forventning om at sitets målgruppe har et forhåndskendskab til webshopping, og Under udviklingen af vores prototype har vi haft denne model med i vores overvejelser. Vi har fundet modellen yderst brugbar da vi bedre har kunne forholde os til hvad sitet bør indeholde, og samtidig været bevidste om hvilke elementer der er mindre afgørende for hvorvidt brugeren ender med et køb eller ej. Webshoppen som genre Genrebegrebet har igennem historien været anvendt til at kategorisere forskellige typer litteratur, samt film og har opbygget en vis erfaring med denne måde at shoppe på. I vores indledende researcharbejde har vi analyseret indholdet af flere store webshops, for på den måde at få en indblik i hvad en kunde forventer af en webshop. En inspirationskilde her har været det store engelske site: asos.com. Asos sælger et udvalg af tøj, sko og accessories til herre og damer. Sitet indeholder meget store mængder produkter, og adskiller sig på den vis meget fra FLYs kommende site. Vi har dog ladet os inspirere af en række af 13

14 dets funktionaliteter, som vi mener kan give brugeren den bedst mulige købsoplevelse. Ifølge Ida Engholm har genre en forventnings- genererende funktion. Forstået på den måde at der til en bestemt genre hører en række funktionaliteter, som brugeren forventer er tilstede (ibid.). At lægge sig op af genrens konventioner giver afsender og bruger en fælles referenceramme, hvoraf der opstår en uudtalt aftale om hvordan et site i en given genre bør strukturers. Webgenre er dog ikke fast- definerede størrelser men noget der er i konstant udvikling. Den vante webbruger vil heller ikke blot være interesseret i at få sine forventninger mødt, men også gå efter at bliver overrasket og få en oplevelse. Dette varierer dog afhængigt af brugssituationen (ibid.). Vi har valgt at lægge os op af de eksisterede konventioner vi mener vil forbedre sitets usability. Vi vil sikre at brugerne af websitet kan genkende de forskellige elementer og ikke skal bruge unødvendig tid på at klikke forgæves samt søge efter informationer de ikke kan finde. Vi finder konventionerne særligt vigtigt når det kommer til salgssituationen. Her vil vi gerne give kunden tilstrækkeligt information, så de føler sig i stand til at 14 træffe et valg. Dette vil vi komme nærmere ind på senere i opgaven. Én af de konventioner som hører webshop- genren til er terminologien omkring indkøbssituationen. Det er udbredt at bruge standardudtryk som 'indkøbskurv' og 'ønskeliste', mens sidste skridt i handlen oftest omtales som at 'gå til kassen'. Vi lægger os som udgangspunkt op ad denne konvention, men forsøger primært at illustrere ved hjælp af ikoner, i stedet for ord. Når kunden har valgt et produkt, klikker de på knappen FØJ TIL KURV, produktet placeres derefter i kurven hvorefter de kan vælge at gennemføre købet eller ej. Vi har placeret et ikon med en indkøbskurv i øverste højre hjørne, som går igen på de øvrige sider. På den måde kan brugeren genoptage sit køb ved blot at klikke på ikonet, også efter at have navigeret væk fra shoppen. Dette er en også er en udbredt funktion på de fleste webshops. Vi har valgt denne løsning, da vi herved møder brugerens forventning og giver dem flere valgmuligheder i forhold til hvilken rækkefølge de ønsker at handle. En anden konvention som vi vægter højt har med visualisering af skoene at gøre. Vi ønsker at give brugeren et grundigt indblik i

15 den vare de er i færd med at købe. Vi giver dem derfor muligheden for at se skoen fra flere vinkler, zoome ind og i øvrigt få grundig information omkring materiale og pasform. Da det at købe sko på nettet indebærer at man ikke kan prøve dem inden køb, kræves det af en webshop at man får tilstrækkeligt information til at kunne træffe et kvalificeret valg uden. Det er også i afsenders interesse at kunden får hvad hun forventer, og ikke bliver ubehageligt overrasket når hun får skoen hjem. I takt med udbredelsen af de sociale netværk sites, er der opstået nye konventioner omkring webshops. En af dem er like - funktionen, som vi har valgt at inkorporere i vores design. Det var et ønske fra FLY at gøre det muligt at kommentere på de enkelte sko, og på den måde sætte FLY- pigerne i forbindelse med hinanden. Vi har anbefalet at samle denne funktion i en facebook- gruppe, og har derfor også gjort det muligt at dele de enkelte produkter med sit sociale netværk. Dette er en fordel for FLY idet det udbreder kendskabet til sitet, men også fordi det skaber en personliggørelse af produkterne. Vi mener dog at funktionen skal tages op til genovervejelse efter at have evalueret populariteten. Vi har en formodning om at hvis en sko kun genererer enkelte hits, er det begrænser hvor meget merværdi der skabes. Udover genre forholder Ida Engholm sig ligeledes til webdesign i et stil- perspektiv. Mens genren forholder sig til de kategorier og funktioner som er fælles for bestemte typer sites, forholder stil sig til de enkelte elementer, i form af grafiske virkemidler. Webshop har en række funktionelle fællestræk med andre webshops, mens det grafiske udtryk kan variere meget. Stilvalget afhænger af hvad der skal sælges, og til hvilken målgruppe man ønsker at henvende sig. I afsnittet om visuel identitet vil vi komme ind på hvilke stilistiske valg vi har foretaget i vores arbejde. Motiverende design At bruge motiverende design er en bevidst strategi som anvendes til at få brugerne til at opføre sig på en bestemt måde, eller påtage sig en bestemt holdninger (Hoffman Hansen, 2005). 15

16 På macroniveau er det primære formål med sitet at motivere brugeren til at købe sko, hvilket er en målsætning afsender tidligt i forløbet har formuleret. Herfra er vi interesseret i at finde frem til hvordan vi kan få sitets delelementer til at understøtte dette mål og skabe hvad Fogg kalder microsuation (Fogg, 2003). Hvad der virker motiverende varierer fra brugssituation til brugssituation, og afhænger af hvilket formål brugeren har med sit besøg på et givent site (Hoffman Hansen, 2005). Vi har i den forbindelse valgt at se på to forskellige brugsscenarier. I det første går brugeren målrettet efter et køb, hun har allerede kendskab til skomærket og ved hvad hun vil have. I det andet har vi med en ny kunde at gøre, én som i sin søgen efter ny inspiration browser rundt på forskellige sider, og ikke nødvendigvis er interesseret i at købe med det samme. Vi vil i vores design forsøge at imødekomme begge bruger- typer, og være bevidste om at sitet skal kunne fungere i flere brugsscenarier. 16 Ifølge grundtanken bag motiverende design, er det kun muligt at påvirke brugeren, ved at tage hensyn til deres behov. Hoffman Hansen inddeler brugerens behov i 3 kategorier: Brugerens funktionelle behov, brugerens behov for relevans, og brugerens emotionelle behov. Disse behov kan imødekommes ud fra 9 motivationsstrategier. Vi har i vores arbejde udvalgt de strategier vi mener giver bedst mening for vores projekt. Brugerens funktionelle behov går hånd i hånd med usability. At opfylde behovet for let at kunne navigere rundt på et site og finde den information de søger, er en forudsætning for at kunne tage de resterende behov i betragtning. Lige som vi læner os op at de eksisterende konventioner for webshop- genren, tager vi hensyn til de gængse usability regler i vores designarbejde. Vi tilgodeser bl.a. dette ved at placere vores globale menu i headeren og logoet i venstre top med et link tilbage til forsiden, hvilket er en konvention som mange websites benytter. At tilgodese brugerens behov for relevans er afgørende for om brugeren finder sitet meningsfyld. Én måde at udfylde dette behov er ved at give brugeren den rette information, når de

17 finder det relevant. Dette vil bliver diskuteret yderligere i afsnittet omkring kommunikation og sprog. At placere indhold på en sådan måde at det giver mening for brugeren, er en anden strategi til at opnå motivation, hvilket vi vil kommen nærmere ind på i afsnittet omkring informationsarkitektur. Vi har valgt at imødekomme brugerens emotionelle behov ved at vælge en grafisk stil, som vi formoder tiltaler vores brugergruppe. Vi forventer at de kunder der vælger at købe FLY LONDON- sko gør det på grund af skoen originale design, den komfortable pasform og kvalitetsorienterede materialevalg. Websitets visuelle udtryk vil lægge sig op at skoens design, for på den måde at kunne imødekomme brugerens emotionelle behov. I afsnittet omkring visuel identitet vil vi gennemgå vores site og komme nærmere ind på disse stilistiske valg. De emotionelle behov tilgodeses yderligere i vores skrivestil, hvilket vi også vil komme ind på i et senere afsnit. Informationsarkitektur Informationsarkitektur omhandler, i korte træt, den måde hvorpå man strukturerer information ifølge principper om organisering, navngivning og navigation (Morville & Rosenfeld, 2007). Et ironisk princip inden for IA er, at man ikke bemærker hvor meget arbejde der er lagt i det, hvis den er udført effektivt. Omvendt, lige så snart ens IA brister, viser det sig hurtigt for brugeren. Derfor handler IA i sidste ende om brugerens oplevelse med, og overordnede forståelse af sitet. The way we organize, label and relate information influences the way people comprehend that information (Morville & Rosenfeld, 2007, s. 53). Wireframes I projektets senere faser har vi brugt wireframes som en metode til at visualisere strukturering af indhold og placering af funktioner, samt til at udtænke brugerens interaktion med sitet. Wireframes er en metode der passer godt til en iterativ proces, 17

18 idet den tillader udvikling og redesign på en forholdsvis effektivt måde (Brown, 2007). Vi valgte at bruge simple wireframes tegnet i hånden. De var opbygget således at én side viste sitets gennemgående struktur. På den kunne undersidernes indhold og funktioner placeres, rykkes rundt og ses i forhold til hinanden. Denne type af wireframes er især velegnede til at visualisere elementer på et site. Til gengæld har det kun begrænset effekt med hensyn til at teste funktionaliteten og interaktion i et realistisk setting. Til det formål ville digitale wireframes være langt mere effektive. Vi valgte dog den papirbaserede metode af flere grunde. Dels fordi det tillod os effektivt at rykke rundt på elementer på siderne, viske ud og tegne nyt. Dels fordi vores fokus var på placering af elementer og ikke deres designmæssige udseende. Desuden mente vi at det var passende til vores andet møde med FLY, hvor denne metode tillod vores afsender at komme med deres input. 18

19 Strukturelle virkemidler I Hofman Hansens ni motivationsstrategier er strukturelle virkemidler en af de tre måder hvorpå man kan påvirke brugerens opførsel. En motiverende faktor kan være en enkel grundstruktur der gør det let for brugeren af overskue sitets elementer. For at imødekomme dette behov for funktionalitet og overskuelighed har vi ladet den overordnede struktur være gennemgående på alle sider. Det vil sige at headeren (logo og menuen), content (ikoner samt tekst- boks) og den tredelte struktur vil være faste elementer, lige meget hvilken side man befinder sig på. Denne opbygning kan sammenlignes med et såkaldt globalt navigationssystem, der kan forbedre usability og navigation hvis gjort på den rette måde (Morville & Rosenfeld, 2007). Rettidig placering af indhold og funktioner på et website kan, ifølge Hofman Hansen, være endnu en motiverende faktor der opfylder brugerens behov for relevans (2005). Som nævnt er vores site relativt visuelt og illustrativt, men i shoppen, hvor brugeren har brug for information om produktet, har siden en mere informativ og formel karakter. Desuden kan brugeren finde information om købsbetingelser, FLY LONDON produkterne mm. På søjlediagrammet fra Dansk Statistik kan vi se at brugerne af online shops vægter sådan information højt. I tråd med FLYs ønsker, vil vi skabe et site som består af få lag og som bygges op efter princippet 'jo færre klik, jo bedre'. Derfor har vi, selv med vores begrænsede indhold, valgt at lave en drop- down menu, så brugeren kan finde frem til præcis det de leder efter uden at browse rundt gennem sitet. Det stiller selvfølgelig krav til navngivningen af menupunkterne - et princip der indenfor IA er lige så vigtigt som f.eks. indhold og visuelt design (Morville & Rosenfeld, 2007). Det er vigtigt at få navngivet kategorierne på en logisk og sigende måde, der ikke efterlader brugeren undrende over hvad menupunkterne dækker over. Men da vi kun har tre overordnede menupunkter, og få undersider til hvert punkt, har vi vurderet at navngivningen (shop, inspiration og FLY) højst sandsynligt ikke vil blive et forvirrende element for brugerne. 19

20 Men efterhånden som sitet bliver udbygget med flere produkter og kategorier vil navngivning blive et mere relevant emne. Kommunikation Jacob Nielsen tydeliggør i sin bog at det at skrive til nettet ikke blot påvirker indholdet, men hele den samlede brugeroplevelse, hvilket gør både sprog og tekst til to essentielle områder at behandle under opbygningen af et website. Da brugerne først skimmer tekst og overskrifterne, bør disse være overskuelige (Nielsen, 2001) hvilket stemmer godt over ens med ovennævnte princip indenfor IA. I forbindelse med skabelsen af det nye website for FLY har vi arbejdet efter de 10 bud til at understøtte læse- adfærden 1. Skriv så det passer til situationen 2. Skriv kortfattet og informativt 3. Skriv klart 4. Skriv uformelt 5. Skriv mundtligt 6. Skriv overskueligt 7. Skriv objektivt 8. Skriv konkret 9. Skriv direkte til læseren 10. Skriv korrekt (Jensen, 2001). Med ønske om at skabe et site der er konsistent, har vi så vidt muligt forsøgt at skrive ensartet på hele sitet. Tekst På FLY LONDONs officielle website er det kun farver som adskiller overskrifter fra den øvrige tekst. På flere af siderne er brødteksten større end overskriften, og der er benyttet forskellige fonte og farver på de forskellige undersider. I vores prototype indeholder hver enkelt site ikke meget tekst, men består som oftest af en hovedoverskrift, et par underoverskrifter og kun enkelte steder brødtekst. Hovedoverskriften er placeret under virksomhedens logo, og er en kort beskrivelse af den specifikke side man opholder sig på. Underoverskrifterne er suppleret med en kort tekst som linker videre til en underside, 20

21 der er mere specifik. Et eksempel på dette kan være inspirationssiden Copenhagen Look (copenhagenlook.html). I vores prototype har vi valgt at arbejde med positiv tekst, dog med enkelte undtagelser (forsiden samt inspirationssiden). For at optimere læseforholdene for vores brugere, er der udelukkende brugt jævnt farvede baggrunde til tekstfelterne. Med et hurtigt kig på FLY LONDONSs officielle website, ser man at de har valgt at benytte sig af negativ tekst i form af flerfarvet skrift på sort baggrund. Brødteksten skifter mellem forskellige farver og størrelser, nogle meget små, andre meget store, hvilket giver et forvirrende og inkonsekvent udtryk, samt nedsætter læsevenligheden. Sprog I Hoffman Hansens (2005) model over motivationsstrategier afdækker tre af disse sprogligt virkemiddel. De berører det funktionelle behov, behov for relevans samt det emotionelle behov. 21 Strategien om at skrive forståeligt og kortfattet er centralt for brugernes basale forståelse af det skrevne og for motivationen til at bruge hjemmesiden (Ibid.). På den officielle Fly London hjemmeside benytter de et kompliceret sprog. Der er tilføjet flere beskrivende ord i hver enkelt sætning hvilket ikke blot gør sætningerne lange, men komplicerer også læseligheden unødvendigt. I vores prototype ønsker vi at benytte os af et simpelt sprog, vi afholder os så vidt muligt fra at komplicerer sætningerne ved ikke at bruge fyldord men henvender os direkte til kunden. Det sproglige virkemiddel kan bidrage afgørende til formidling af relevant information for brugeren på siden (Ibid.). Med et ønske fra FLY om at al tekst skal holdes på et minimum har vi valgt at formidle mere illustrativt og derved lade billeder og produkterne tale for sig selv. Det tekst der måtte være er relevant information til kunden. Strategien om at vælge en passende skrivestil og genre kan ramme brugernes emotionelle behov ved, at sprogtonen og genren, som teksten markerer stemmer overens med deres

22 forventninger (Ibid.). Som beskrevet ovenfor har vi valgt at sitet skal kommunikere overhængende illustrativt. Vi ser dette som en stor fordel da billeder taler individuelt til den enkelte bruger alt efter behov og humør. De enkelte steder hvor vi skriver til brugerne har vi tilpasset skrivestilen til omgivelserne. Visuel identitet Én motivationsstrategi som tilgodeser brugerens emotionelle behov er at vælge et passende grafisk udtryk. Vi har gennem vores design forsøgt at tegne en linje mellem produkternes og sitets design. FLY LONDONs sko er kendetegnet ved at bruge asymmetriske former, stærke farver og i øvrigt en visuel stil som leder tankerne ind på noget eventyrligt og legende. I vores indledende arbejde, har vi brugt sketching som en metode til at komme nærmere ind på hvordan vi integrerer disse elementer i vores design. Herefter har vi lavet et moodboard med fotos, screendumps og tegninger, som vi præsenterede for FLY ved vores første møde. Under workshoppen arbejdede vi videre med sketching, for at give dem så meget indflydelse som muligt, og give deres ønsker udtryk og form. 22 Som nævnt bevæger det originale FLY LONDON- site sig i et sort og rødt univers, med mørke billeder i aftenstemning. Dette ligger lang fra den opfattelse FLY har af skoene design, og det udtryk de ønskede at fremhæve. Det har været et ønske fra deres side at få skabt en mere lyst og farverigt rum, som de mener stemmer bedre overens med designet i FLY LONDONs produkter. Farvevalg Da vi har villet skabe et lyst univers, har vi valgt hvid som vores basisfarve. Den dominerende farve i vores palette er blågrøn, en farve som går igen i logoet, linien som indkredser headeren og i tekstboksene under de dominerende fotos. Den blågrønne farve fungerer som brand- farve. Som fremhævningsfarve havde vi valgt en farve som er komplementær til den dominerende. Vores oprindelige tanke var at bruge en varm orange til at fremhæve de væsentlige elementer, men da afsender udtrykte ønske om at den gule farve fra FLY LONDONs skotøjsæsker og øvrige materiale, skulle afspejles i deres webdesign, ændrede vi dette i den endelige udgave af prototypen. Den gule farve fungerer nu som fremhævningsfarve, men refererer samtidig til skomærket. Dette vil dog kun være tydeligt

23 for de kunder der i forvejen kender til mærket. Det har været vigtigt for os at FLY fik deres egen visuelle identitet, og det har da også været ønsket fra afsender at komme så langt væk fra det originale FLY LONDON- site som muligt. Illustrationer Valget af illustrationer har været en anden måde at give FLY identitet på. Vi har valgt fotos og illustrationer, hvis indhold ikke referere til noget konkret, men som giver en stemning og stil, som vi mener taler til brugerens emotionelle behov og smag. Det har været vigtigt for afsender at fluen skulle indgå som et synligt element på sitet. Den indgår derfor i logoet, og på forsiden i forbindelse med skoene. Den indgår ligeledes på shoppens forside, ud for hvert produkt og på enkelte fotos, som vi har fået fra gennem FLY. Alle FLY LONDONs sko har et omrids af fluen under sålen, og ligeledes brændt ind i læderet på siden, som et varemærke. Sammen med den gule farve, går fluen igen på alt deres trykte materiale, så som på skotøjsæsker, poser, postkort mm. Typografi Vi har valgt fonten Andale Mono til alt tekst på sitet. Dette er en kantet monospace- font, som vi mener understøtter vores øvrige visuelle udtryk, og som samtidig er let læselig. I CSS en har vi 23

24 tilføjet Curier New til den valgte font family, da ikke alle computere har adgang til Andale Mono. Da vores site primært kommunikere illustrativt optræder der, som nævnt tidligere, kun korte tekster på sitet. Med sidens trespaltede struktur, bliver sætningerne aldrig længere end 7 ord, hvilker løfter læsebarheden. Vi arbejder med liniehøjden, hvilket vi også mener gør læsningen mere behageligt for brugeren. Vi arbejder, som nævnt, med samme font på hele sitet, men arbejder i en negativ og en positiv version. Særligt i den negative udgave, har det været vigtigt at give luft, da denne ellers kan være svær at læse. Hvis vi havde haft med et mere teksttung site at gøre, ville vi højst sandsynligt have valgt en anden font til brødteksten. En tekst som Helvetica, der bruges i logoet, kunne her have været passende. Usability og brugerindragelse Ved opbygning af et website er det vigtigt at holde sig for øje at dette vil blive anvendt af forskellige brugere, som søger at afdække individuelle behov. Som webdesigner bør man inddrage usability når der træffes beslutninger omkring design og 24 navigation på sitet. Ifølge Gregersen og Wisler- Poulsen er usability en kvalitetsegenskab der blandt andet gør sig gældende når brugeren skal søge informationer, udføre en opgave, købe et produkt eller andet som opfylder et behov [ ] Usability gør digitale produkter så brugbare som muligt (Gregersen & Wisler- Poulsen, s. 14). Usability kan som udgangspunkt deles op i tre kategorier: funktionalitet, tilfredshed og effektivitet (ibid.). Disse kriterier har vi haft som udgangspunkt under vores designproces og endeligt i forbindelse med vores brugertest. Vi har valgt at udføre vores brugertest med inspiration fra Steven Krug s metoder (2006). Han har udarbejdet en model som dækker over faserne fra sitet begyndelse, til det endelige site bliver launchet. De tre første tests blev afholdt sammen med FLY. Den sidste test blev udført af to potentielle brugere fra FLYs målgruppe. Vi har under alle tests brugt get it testing (ibid.), samt tænke højt testen. Vi har ikke benyttet os af de sidste to faser i Krug s model da de omhandler testning efter prototype- stadiet.

25 Som beskrevet tidligere i opgaven præsenterede vi FLY for vores skitserede wireframes. Vi fik indsamlet data omkring hvad de fandt brugbart på sitet, og samtidigt hvilke elementer de ikke opfattede som værende nødvendige. Endvidere snakkede vi også om forståelsen af sidernes opbygning, hvor det ville være mest logisk at placere links, og hvordan disse skulle illustreres. og hvorvidt deres forventninger til webshoppen blev mødt. Resultaterne fra denne test var igen yderst brugbare. Vi har imidlertid ikke været i stand til at kunne foretage større ændringer da testen blev afholdt sent i forløbet, men vil behandle eventuelle løsningsforslag under punktet om videreudvikling. Til den tredje test hos FLY gennemgik vi prototypen med dem. Dog stadig da den var under udvikling, hvilket gjorde at de kun havde mulighed for at klikke rundt mellem enkelte sider. De fik dog stadig mulighed for at danne sig et indtryk af den visuelle stil, og navigationens opbygning. Feedback fra denne test, har vi taget højde for i forbindelse med den sidste udvikling, inden den endelige prototype skulle afprøves. Til brugertesten af vores endelige prototype, kom vi i kontakt med to potentielle brugere af websitet. Vores mål med denne test var at finde ud af hvordan personer, som ikke har været med i designprocessen, ville anvende sitets navigation og funktionaliteter. Vi var desuden interesseret i at få tilbagemeldinger på deres forståelse af de enkelte siders formål, 25 Begge respondenter fangede med det samme det primære formål med websitet, at sælge modesko. Deres forventninger til hvad en webshop bør tilbyde blev mødt, og begge benyttede sig af de forskellige stier mellem siderne. De fandt forsiden simpel og logisk, og synes at den indeholder hvad der forventes af en forside. Den ene respondent forstod med det samme hensigten med inspirationssiden og Copenhagen Look. Hertil tilføjede hun: Jeg synes at det er rigtig rart at man som ny bruger af sitet kan klikke ind under et af tre looks, og få præsenteret et mindre udvalg af de sko som sælges på sitet. Det var naturligt for dem begge at klikke på logoet i øverste venstre hjørne for at komme tilbage til forsiden. Der var dog lidt

26 forvirring omkring det gule facebook- ikon, da brugerne er vandt til at se det i en blå farve. Nedenfor vil vi konkludere på projektets forløb samt det feedback vi har fået fra vores brugertesting. Konklusion Vi har haft til opgave at designe et website til den nyopstartede virksomhed FLY. Websitets primære formål er at sælge sko til det danske online marked, og vi har derfor arbejdet med webshopgenren i et forsøg på at afdække brugerens forventninger til et sådan site. For at imødekommende disse forventninger, har vi lagt os op at de eksisterende konventioner inden for genren. Herunder anser vi en grundig produktbeskrivelse samt visualisering af skoene, som værende blandt de vigtigste funktioner. I tæt samarbejde med virksomheden har vi fundet frem til en stil, som skaber god sammenhæng til skomærkets design. Vi har ønsket at give FLY en visuel identitet, som adskiller sig fra det originale FLY LONDON site, men som samtidig bibeholder en forbindelse til mærkets øvrige grafiske linje. Dette er gjort ved at bruge fluen som et gennemgående element, og anvende den gule farve som fremhævningsfarve. Da skoens design har et legende og kreativt udtryk, har vi valgt at sitet primært skal kommunikere illustrativt, og kun i begrænset omfang gøre brug af teksttunge blokke. Udtrykket understøttes ligeledes i valg af illustrationer, farver og typografi. Vi har gennem projektet arbejdet med forskellige måder at imødekomme brugerens forventninger og behov og herunder set nærmere på hvordan man i designet kan motivere brugeren til at handle. Disse tanker er inkorporeret i informationsarkitekturen, kommunikationen og sitets visuelle identitet. Alt i alt er det lykkes os at skabe en prototype at et site, som vores afsender har udvist stor begejstring for. I brugertesten har det desuden vist sig at sitets navigation ikke skaber problemer, og lever da også op til gængse usability retningslinier. 26

27 Der er dog stadig er stykke fra den nuværende prototype til et endeligt site kan komme på benene. Da samarbejdet fortsætter efter dette projekt er endt, forventer vi at få sitet i luften i løber af foråret. I det følgende afsnit vil vi skitsere hvad der kræves at videreudvikling, inden dette kan realiseres. Sitet skal desuden kobles på et cms- system, så FLY nemt kan opdatere sidernes indhold uden yderligere kendskab til kodesprog. Vi mener at FLY bør udarbejde en markedsføringsstrategi før sitets launch. I den bør de klarlægge hvordan de påtænker at nå den potentielle kundeskare. Videreudvikling af sitet Første skridt mod et implementerbart site vil være at få udviklet en database til kategorisering af varerne, hvilket vil tillade brugeren at indkredse sin søgning efter produkter. Der skal ydermere videreudvikles på de funktionaliteter der mangler i den nuværende prototype såsom betalingssystem således at shoppen kan blive fuldt ud funktionsdygtig. Det ville her være en fordel at få udviklet dynamiske elementer, bl.a. til drop- down- menuen og herunder sikre at designet optimeres til flest mulige browsere. 27

28 Kildeliste Engholm, Ida (2007): Design history of the WWW:Website development from the perspective of genre and style theory, i Artifact, s r: Fogg, B. J. (2003): Computers as Persuasive Tools, i Persuasive Technologi - Using Computers to Change What We Think and Do, Morgan Kaufmann Publishers. ISBN: Garret, Jesse J. (2003): Meet the Elements, i The Elements of User Experiences: User- Centered Design for the web, Ne Gregersen, O. og Wisler- Poulsen, I. (2009): Hvad er Usability?, i Usability, s Forlaget Grafisk Litteratur.w Riders. Hansen, Jens Hoffman (2005): Motiverende design, s Frydenlund. Jensen, U. et al (2001): Tekstens disposition og byggeklodser, i Skrivgodt.dk - sådan skriver du gode tekster til internettet, s Krug, Steve (2006): Don t make me think. A commen sende approach to web usability, 2. ed., s Nwe Riders, Indianapolis. Lynch, Patrick J. & Horton, Sarah (2009): Webstyle guide 3. Yale University Press, ISBN- 13: Online resource: Morville, Peter & Rosenfeld, Louis (2007):Information Architechture for the World Wide Web. O Reilly. ISBN: Nielsen, Jacob (2001): Design af indhold, i Godt webdesign, s IDG Forlag. Rasmussen, C.V. og Fischer, L.H. (2008): Katagorisering, i Målgruppeanalyse - lær din målgruppe at kende, s Nyt Teknisk Forlag. Robbins, Jennifer N. (2007): Web Design 3rd edition. Beijing: O Ŕeilly. ISBN- 13: Online kilder: Browser statistik: Danmarks Statistik: Fly London Website: Asos: Markup Validation Service: CSS Validation Service: validator/ 28