Hovedopgave Multimediedesigner, Erhvervsakademiet Aarhus Tech, Forår 2010 Motiverende design og brugervenlighed Persuasive design and Usability af Christina Duus Vejleder: Niels-Erik Kaster Projektperiode: 6. april 7. juni Lavet i samarbejde med Café Slabberas i Århus URL: Eksisterende side: http://sw1593.smart-web.dk/?open=bdf61e6f4e330df Redesignede side: http://sw1583.smart-web.dk/
Kapitel: Hovedopgave, 7. juni 2010 Indholdsfortegnelse Indledning 5 Strategy Plane 11 Scope Plane 33 Structure Plane 37 Skeleton Plane 43 Surface Plane 47 Afslutning 57 Bilag 65 3
Kapitel: Indholdsfortegnelse Christina Duus 4
Kapitel: Hovedopgave, 7. juni 2010 Indledning For mange er det at tage på cafebesøg en del af deres livsstil, og der er mange muligheder for at finde den café, der passer til ens personlighed. Mange tager på cafe med deres venner eller kæreste, fordi det giver et afbræk i en hverdag, der kan være fyldt med bekymringer, indkøb eller regninger. Det er derfor vigtigt at caféen lægger op til at man kan slappe af og nyde god mad eller en kold øl i godt selskab. Café Slabberas er en hyggelig café i hjertet af Århus, hvor man er mere interesseret i hyggen og den hjemlige stemning, end man er i at have et chikt sted, hvor gæsterne kommer for at blive set. Café Slabberas har de sidste to år markedsført sig på at være en børnevenlig café, hvor mødre på barselsorlov kan komme med deres små børn og slappe af og mødes med andre mødre. Caféen, der ejes af Trine Kirch, åbnede for ca. to år siden. Trine skulle på barselsorlov, med sin datter, og da hun ikke kunne finde en børnevenlig cafe i Århus, besluttede hun sig for at åbne sin egen. Hun er ifølge sig selv meget selvstændig og ville gerne selv bestemme over sine arbejdstider. Hun kan godt lide at have travlt og være omgivet af mange mennesker. Fordelen ved at have en café, er at folk ikke tager i byen hvis de er i dårligt humør, så der er gerne en god stemning på Slabberas. Caféen, der er fordelt på en kælder, stueetage og første sal, tilbyder rigelige muligheder for at finde et bord eller et sofaarrangement, hvor man kan sidde sammen og slappe af. Caféen er indrettet med gamle møbler og billeder som Trine har fundet i storskrald og på loppemarkeder og det er med til at give caféen en hyggelig og hjemlig stemning. De fleste møbler, er også noget man forbinder med besøg hos sine bedsteforældre. Lige fra starten var det vigtigt at caféen havde en hyggelig og hjemlig atmosfære, hvor gæsterne kunne slappe af og nyde at de ikke skal nå en helt masse og når man besøger caféen, får man også den opfattelse at gæsterne kommer på caféen fordi de føler sig godt tilpas. Trine er i gang med at udvide caféens image som en børnevenlig café. Dette er ikke fordi hun ikke længere er interesseret i denne målgruppe, men fordi at hun ikke har mange gæster på caféen efter kl. 16.00. Hun arbejder derfor aktivt på at tiltrække de cafégæster, der kommer på en café, for at hygge med venner eller som en del af en shopping tur. Nogle af de ting hun har gjort for at tiltrække den nye målgruppe, er at have en cocktail bar i weekenden og en restaurant om aftenen. Jeg vil i min hovedopgave derfor arbejde ud fra følgende problemstilling: 5
Christina Duus Problemstilling Cafe Slabberas er i en overgangsperiode, hvor de aktivt forsøger at udvide deres images. Deres nuværende målgruppe er mødre med små børn, og det er blevet besluttet at ændre dette fokus, for at nå en bredere målgruppe, med henblik på at skabe vækst for caféen. Slabberas har en hjemmeside, der på nuværende tidspunkt, afspejler en café, hvor den primære målgruppe er mødre med småbørn. Hjemmesiden er derfor en del af denne forandring, idet det kræver fornyelse af hjemmesiden for at afspejle de nye forhold. Dette inkluderer baren og restauranten. Det er dog samtidig vigtigt at men ikke glemmer de loyale gæster, som Cafe Slabberas gennem de sidste to år har skaffet sig, og som stadig vil komme på caféen. Baseret på ovenstående indledning og problemstilling, er problemformuleringen for denne opgave: Problemformulering Hvordan kan et redesign af Cafe Slabberas hjemmeside motivere brugere til at besøge caféen? Problemafgrænsning For at afgrænse min problemformulering har jeg opstillet følgende del spørgsmål: Hvordan kan man designe en hjemmeside, så brugervenligheden passer til de forskellige målgrupper? Hvilke grafiske elementer skal være til stede på hjemmeside for at øge brugervenligheden og afspejle caféens identitet. Hvilke informationer er det brugere af hjemmesiden efterspørger? Jeg vil i min opgave arbejde med Jens Hofman Hansens bog, "Motiverende Design", der dækker over ni strategier, der kan bruges til at tilfredsstille brugerens behov. Jeg vil også gøre brug af forskellige artikler fra Designværkstedet 1 bl.a. "Persuasive design" af Julia Gardner. I forhold til brugervenlighed, der vil være en stor del af min opgave, vil jeg bruge teorier fra Steve Krug s bog "Don t Make Me Think", der går ud på at man tester sine ideer og design på sin målgruppe og lytter til deres input. Med hensyn til grafiske elementer, vil jeg koncentrere mig om retoriske figurer, og hvordan man kan bruge dem til at skabe en brugervenlig og motiverende navigation. Til dette vil jeg bl.a. bruge uddrag af "Anvendelse af retoriske figurer i netdesign" af Claire Dormann. Resultatet vil være en fuldt fungerende hjemmeside, opsat i Smart Webs CMS 2. Kapitel: Indledning 1 http://design.emu.dk/ 2 http://dk.smart-web.dk/ 6
Metode For at min projektperiode skal ende ud i det bedst mulige produkt, vil jeg have flere teorier i spil. Dels vil jeg her beskrive hvilken produktionsmetode jeg vil benytte, og dels vil jeg komme med en gennemgang af de teoretiske modeller, analyser og tests, jeg vil bruge, som redskab til at få mit koncept til at stemme overens med den færdige hjemmeside. Hovedopgave, 7. juni 2010 Da jeg ved projektstarten ikke har en helt præcis viden om hvordan mit endelige produkt skal se ud og hvad det skal indeholde, har jeg valgt at bruge prototyping 3 som produktionsmodel. Denne model bygger på at man hele tiden tester sin prototype på brugere indenfor målgruppen, og derefter arbejder videre med den testede prototype, hvilket giver mulighed for at man hele tiden kan tilpasse designet og indholdet, til de krav de enkelte brugersegmenter har til hjemmesiden. Dette vil jeg sammenholde med metoden "The Five Planes" fra bogen "The Elements of User Experience" af Jesse James Garrett. Denne model tager udgangspunkt i, hvordan man optimerer sin designproces, og jeg vil derfor bruge den som et redskab til at beslutte i hvilken rækkefølge jeg fortager de enkelte analyser i. For at finde ud af hvilke elementer på den eksisterede side, der understøtter caféens identitet og mål med hjemmesiden, vil jeg lave en dybdegående designanalyse af siden, og ved hjælp af brugertests finde ud af om caféens identitet på nettet er den samme som den caféen har i virkeligheden. For at kunne lave en præcis analyse af hvilke elementer, der skal implementeres på den nye side, vil jeg lave en grundig målgruppeanalyse. Denne vil tage udgangspunkt i hvilke kunder Café Slabberas har, og hvilke kunder caféen ønsker at tiltrække i fremtiden. Til dette vil jeg bruge segmenteringsmodeller fra "The User is Always Right" af Steve Mulder. Fordelen ved at bruge denne model er, at jeg kan segmentere min målgruppe, ud fra hvilken adfærd brugerne vil have på siden, hvilket giver god mening i forhold til redesign af en hjemmeside. For at afkode Café Slabberas identitet vil jeg gøre brug af Laboratoriemodellen fra bogen "Storytelling - Branding in Practice" af Klaus Fog, Christian Budtz og Baris Yakaboylu. Her vil jeg gennem interviews af ejer, ansatte og gæster, og ved hjælp af artikler fra nettet og anmeldelser fastslå Café Slabberas image og identitet og se om de stemmer overens. Til at sikre mig, hvilke informationer der bør være på hjemmesiden, benytter jeg et trianguleret undersøgelsesdesign, som jeg kan validere min målgruppe og design op imod. Dels vil jeg lave en fokusgruppeundersøgelse, med repræsentanter fra målgruppen. På den måde kan jeg tideligt i forløbet få klarlagt sidens "user goals". Dette vil måske også belyse ting jeg ikke selv havde tænkt på. Jeg vil også udsende et spørgeskema, få at få et indblik i hvem målgruppen er, og hvad deres indtryk af hjemmeside er og hvilken information, der er vigtig at fremhæve. Det er også for at få et indblik i hvilket image Cafe Slabberas har. Som sidste del i mine undersøgelser, vil jeg forholde mig til log files fra Google Analytics, som bl.a. vil kunne give mig en ide om brugernes færden på hjemmesiden. Ved at holde disse undersøgelser op mod hinanden, vil jeg kunne teste mit design op mod målgruppen. 3 Udvikling af Multimedier, Marie Christensen & Louise Harder Fischer, s. 34 Kapitel: Indledning 7
Christina Duus Frem for at teste min prototype ved hjælp af papirmodeller, har jeg valgt at gøre brug af Axure 4, der er et program designet til at teste funktionaliteten på hjemmesider. Ved at bruge denne model har jeg mulighed for at rette så mange problemer med siden som muligt, inden den er kodet. Fordelen ved at bruge Axure, frem for en papirprototype, er at man meget hurtigt kan opsætte en side i Axure, og det er nemmere at teste funktionaliteten af ens design. Slutteligt vil jeg kunne konkludere på mit produkt ved usabilitytests af den nye side. Jeg har valgt sideløbende at have en opdateret blog på nettet, som jeg opdaterer med beslutninger, status på processen, relevante links og forskellige noter. Dette redskab vil jeg bruge som et supplement til "The Five Planes", da jeg senere skal lave dokumentation of evaluering af min proces 5. NB. Hjemmesiden blev opdateret under mit projektforløb, så jeg har lavet mine indledende brugertests på baggrund af siden før den blev opdateret og de efterfølgende analyser efter at siden blev opdateret. Dette er bl.a. indsættelse af indhold på menukortene. Kapitel: Indledning 4 http://www.axure.com/ 5 http://christinaduus.dk/hovedopgave/blog/ 8
Struktur Jeg vil opbygge min rapport, således at hvert afsnit relaterer sig til de forskellige planes i produktionsmodellen "The Five Planes" Hovedopgave, 7. juni 2010 Indledning Problemstilling Problemformulering Problemafgrænsning Metode Struktur Strategy Plane Om Cafeen Caféens målgruppe Fokusgruppe Designanalyse af den eksisterende side Image / Identitet Google Analytics Segmentering af målgruppen Personabeskrivelser Konceptbeskrivelse Hvad er brugervenligt design? Structure Plane Informationsarkitekturen Interaktionsdesign Skeleton Plane Wireframes Navigationsdesign Surface Plane Visuelt design Logodesign Opfølgning på brugertests Implementering af design Afslutning Metodekritik Konklusion Perspektivering Scope Plane Kravspecifikationer Produktspecifikationer Kapitel: Indledning 9
Kapitel: Indledning Christina Duus 10
Kapitel: Hovedopgave, 7. juni 2010 Strategy Plane Café Slabberas 12 Caféens målgruppe 13 Fokusgruppen 15 Designanalyse af den eksisterende side 16 Image/ Identitet 20 Google Analytics 23 Segmentering af målgruppen 24 Personabeskrivelser 26 Konceptbeskrivelse 30 Hvad er brugervenligt design? 31 11
Christina Duus Strategy Plane det første element, som jeg skal beskæftige mig med. Det er i det plane, jeg skal fortage al det nødvendige analysearbejde, i forhold til at kunne lave troværdige personas, og sætte "user goals" for disse. Jeg vil starte med kort at fortælle om caféen og beskrive dens stil. Café Slabberas Café Slabberas ejes af Trine Kirch 6, der er uddannet pædagog. Hun har altid været meget glad for at gå på café, fordi hun syntes det er meget hyggelig. For to år siden, da hun gik på barsel med sin datter Vilas, kunne hun ikke finde en børnevenlig cafe og hun besluttede sig derfor for at åbne sin egen. Trine har, siden hun startede caféen, også solgt børnetøj i kælderen. Da hun er ved at afvikle denne del af sit koncept, har jeg valgt ikke at inkludere det i min opgave. Caféens stil Caféen fordeler sig på tre etager og den er indrettet med henblik på børnene. Det gør, at der er god plads og at man nemt kan bevæge sig gennem cafeen. I stueetagen er endevæggen for nylig blevet tapetseret med stribet tapet, der er inspireret af designeren Paul Smith. Der er brugt en lys turkisblå accent farve på skorstenen, der er midt på væggen, mens resten af væggene er hvide. På første sal er endevæggene stadig brune, men det er meningen at de med tiden også skal tapetseres. Lokalerne er indrettet med mange forskellige møbler og lamper, som Trine har fundet på storskrald og loppemarkeder, og hun har med stor dygtighed brugt disse møbler til at skabe en café, der virker hyggelig og hjemlig, når den nemt kunne virke rodet med de mange forskellige møbler. Når man først har besøgt caféen er det nemt at se at Trine syntes at hvide, ens møbler er kedelige. Det der er godt ved caféen, er at der er plads til små sofaarrangementer, der indbyder til snak og hygge, og store solide borde, som det er nemt at arbejde ved, eller hvor der er god plads til at man kan sidde og spise. Hjemmesidens formål Før man går i gang med sin hjemmeside, skal man gøre sig klart hvad formålet med siden er. Da jeg spurgte Trine i mit indledende interview, fik jeg standartsvaret, at mange bruger en hjemmeside, men også at den skulle afspejle stedet og virke som en reklame for caféen udadtil. Den skal også bruges til at informere brugerne omkring konkrete informationer i forbindelse med caféen, såsom åbningstider, adresse, menukort og kontaktoplysninger. Kapitel: Strategy Plane 6 Se bilag 1 interview med Trine Kirch 12
Caféens målgruppe For bedre at kunne sikre mig at mit design og indholdet på siden er tilpasset den rigtige målgruppe, vil jeg lave en dybdegående målgruppeanalyse. Denne vil jeg lave på baggrund af: Interviews med Trine Kirch 7 og Michael Mizzi 8 (der har ansvaret for den daglige ledelse) Min spørgeskemaundersøgelse 9 Statistik for Tendens 2005 10, som kan give mig en ide om hvor mange, der går på café og hvilke aldersgrupper de fordeler sig på. En fokusgruppeundersøgelse 11, med repræsentanter fra målgruppen, som giver mig en ide om, hvilke informationer, den enkelte finder relevant i forbindelse med café besøg. Hovedopgave, 7. juni 2010 På baggrund af denne analyse, vil jeg fortage en segmentering af målgruppen, og dermed lave en persona, som skal repræsentere hvert segment. Jeg vil bruge "user goals" (den enkelte brugers mål med siden) og "site objectives" (hvad jeg gerne vil have den enkelte bruger skal gøre på siden) for disse personas til at validere på, om mit design indeholder de elementer, som vil opfylde målgruppens krav til siden. Den nuværende målgruppe For at få et indblik i Café Slabberas målgruppe, har jeg interviewet Trine Kirch og Michael Mizzi. Fordi caféen de sidste to år har markedsført sig på at Slabberas er børnevenlig, er mange af gæsterne mødre, der kommer med små børn. Jeg har fortaget en spørgeskemaundersøgelse, der gav mig 17 besvarelser. Disse var ikke så mange som jeg havde håbet på, men jeg mener stadig at jeg kan se en tendens. Af de adspurgte, svarede 77 % at de godt kunne lide at caféen var børnevenlig og 13 % svarede at de kom på caféen fordi den er børnevenlig. Gennem mine interviews fik jeg også at vide at mange af dem der kom om aftenen, gerne var studerende eller unge i arbejde. Jeg kan derfor konkludere at Slabberas målgruppe groft kan deles op i tre segmenter: Mødre, på barselsorlov, der kommer om dagen. Forældre og unge, der kommer om aftenen til forskellige arrangementer. Og unge der kommer på baren i weekenden. For at estimere målgruppens størrelse vil jeg bruge statistik jeg fik fra horesta.dk 12. Disse er fra hele landet, men i 2008 var der 52.647.00 cafébesøg. Her er de 18 til 19-årige og 25 til 29-årige især repræsenteret. I mit interview med Mizzi, fik jeg at vide at caféen har ca. 100 gæster i løbet af dagen og også 100 gæster 7 Se bilag 1 Interview med Trine Kirch 8 Se Bilag 2 Interview med Michael Mizzi 9 Se bilag 5 Statistik til spørgeskema 10 http://www.horesta.dk/website/horesta/service/om%20horesta/medier/~/media/filer/medier/tendens/ten dens2005_01low001%20pdf.ashx 11 Se bilag 6 Resume af fokusgruppe 12 Se bilag 7 E-mail fra Karin B Knudsen, Horesta Kapitel: Strategy Plane 13
Christina Duus om aftenen på baren. De fleste gæster kommer gerne igen, hvilket betyder at caféen formår at give gæsterne en god oplevelse. Den ønskede målgruppe Café Slabberas er som jeg allerede har nævnt i gang med at ændre deres image, og de har i den anledning fokus på en ny målgruppe, de gerne vil ramme. Den ønskede målgruppe er unge (25+) og ældre ægtepar, der ikke er afhængige af børn, og som har penge de kan bruge på cafébesøg. Dette stemmer godt overens med den statistik jeg har fra Tendens, der siger at flere ældre får øjnene op for caféer og restauranter. Trine vil gerne have at disse gæster kommer ned på caféen for at få en kold øl efter arbejde eller kommer ind for at få en frokost som en del af en shopping tur. Det kan dog være et problem for caféen, at mange kan finde på at fravælge en cafe, hvis de ser at der er mange barnevogne udenfor og man kan se at der er mange små børn indenfor. Det samme kan ske om aftenen, hvis caféen er fyldt med unge, kan det skræmme den ældre målgruppe væk. Café Slabberas er derfor nødt til at fortælle deres ønske målgruppe at der også er plads til dem, hvilket hjemmesiden kan hjælpe med. Jeg kan hermed opsummere på, hvad min primære målgruppe ville ønske på siden, og det vil kunne lede mig hen mod eventuelle "business objectives" for målgruppen. Den primære målgruppe: Er personer, der ikke kender Slabberas, eller måske har et forkert indtryk af caféen. De vil gerne komme på en café, der er hyggelig og afslappet. De ønsker at finde informationer omkring caféen på nettet, bl.a. menukort, adresse, samt priser. Business objectives: Skal nemt kunne finde menukort, adresse og åbningstider. Skal kunne få et positivt indtryk af caféen gennem billeder. Skal kunne finde informationer omkring caféen. Skal kunne se Smiley-ordning Skal være nemt at kontakte caféen i forbindelse med spørgsmål. Kapitel: Strategy Plane 14
Fokusgruppe En fokusgruppe er en kvalitativ undersøgelse, der går ud på at man samler en gruppe brugere og så snakker om deres meninger og ønsker i forbindelse med et produkt, service eller koncept. Fordelen er at man hurtigt kan få feedback på sine ideer, og at man måske bliver opmærksom på nogle aspekter man ikke selv havde overvejet. Hovedopgave, 7. juni 2010 Jeg lavede tidligt i forløbet en fokusgruppeundersøgelse 13 for at finde ud af hvorfor folk tager på cafe og ud fra hvilke kriterier de vælger en cafe. Vi snakkede også om hvilken indflydelse hjemmesider kan have på cafévalg. Der kom 7 unge kvinder til min fokusundersøgelse, de var alle først i tyverne og de havde ingen børn, og de placerer sig derfor indenfor den ønskede målgruppe. I min fokusgruppe fik jeg deltagerne til at tale frit om emnet, og det medførte at jeg blev opmærksom på nogle ting, og fik bekræftet nogle af de antagelser jeg havde. De valgte generelt caféer, der fik dem til at føle sig godt tilpas, og steder hvor der var god plads og man følte sig hjemme. En af de ting der kom op i forbindelse med hjemmesider, er at de næsten aldrig kigger på en hjemmeside når de skal vælge en cafe. Det er kun hvis de skal tjekke åbningstider, menukort, adresse eller finde et sted til et større selskab, at de ville besøge stedets hjemmeside. Det kom op at hvis stedet havde forskellige spændende arrangementer, og det var et sted, man ofte kom, ville man måske kigge på hjemmesiden for at holde sig orienteret, med hvad stedet havde at tilbyde. En anden nævnte her at, hun ville melde sig ind i caféens Facebook gruppe i stedet. Det syntes hun var nemmere. En af de ting, der kom frem var at man ofte bedømmer en café ud fra hjemmesiden, og hvis kvaliteten af hjemmesiden er lav, kan man tro at kvaliteten på caféen også er lav. Det er derfor vigtigt at hjemmesiden har et professionelt udtryk. Det blev dog også nævnt at mund til mund metoden kan betyde mere for en café, end en dårlig hjemmeside. 13 Se bilag 6 Referat af fokusgruppeundersøgelse Kapitel: Strategy Plane 15
Christina Duus Designanalyse af eksisterende side Når jeg efterfølgende skal afklare Cafe Slabberas image/ identitet, vil jeg med denne designanalyse afklare, hvordan hjemmesiden understøtter disse punkter. Jeg har som baggrund for designanalysen foretaget en række userbilitytests 14. Resultaterne af disse tests var både med til at bekræfte nogle af mine egne ideer om, hvad der er godt og skidt på siden, og samtidig fik jeg belyst nogle emner, som jeg ikke umiddelbart selv havde tænkt på. Informationsdesign Ifølge Trine er caféens hjemmeside en form for reklame udadtil, den skal derfor også være med til at afspejle caféens identitet. Den eksisterende side er en af SmartWebs templates, og mange af undersiderne er endnu ikke opdateret. Det betyder at mange brugere vil gå forgæves når de kommer til siden for at finde informationer. Dette giver siden et uprofessionelt udtryk, som også er med til at afspejle caféen negativt. En af mine testpersoner nævnte at hvis man ikke kan opdatere sin hjemmeside, kan man lige så godt lade være med at have en. En af de ting, der overraskede mig, var at mine brugere troede at caféen var en kaffebar. De fik denne opfattelse på grund af bannerets mørkebrune baggrundsfarve og billederne af kaffebønnerne og koppen med cafe latten. Den mørkebrune farve giver dog fin mening i forhold til caféens tidligere udseende. På forsiden står der en tekst, der fortæller om caféen og at de er i gang med at opdatere hjemmesiden. Den sorte tekst på den hvide baggrund, gør at siden virker kedelig og at man ikke bliver fanget af siden. Nederst på siden står caféens åbningstider, hvilket virker rigtig godt, for det er det mange kommer ind på siden for at finde. Dette er Jens Hofmans Hansens første motivationsstrategi: Gør det synligt og simpelt 15. Det kan dog være et problem at punktet Lej Slabberas, ligger under Nyheder, idet at det ikke virker logisk i forhold til hvor brugerne ville forvente at find det. Det er måske en nyhed, fra caféens side, men brugere ville forvente at finde det under punktet Information. Logo Café Slabberas logo er et cirkulært emblem 16. Baggrunden er en brun, beige og orange cirkel inden i hinanden. Der er en rød kaffekop, med damp ovenover. Teksten "Cafe Slabberas" er skrevet over koppen i en håndskriftlignende font. Dette logo passer godt til deres børnevenlige image, fordi stilen minder om noget et barn kunne have tegnet og dette giver logoet, og i forlængelse caféen, en meget afslappende stil. Kapitel: Strategy Plane Kontaktoplysninger I mine brugertests, bad jeg mine testpersoner om at finde caféens telefonnummer. Det er efterhånden en konvention at sådanne oplysninger står i footeren 17, men det gør det ikke her. Der var kun en af mine bru- 14 Se bilag 9 Brugertests af den eksisterede side 15 Motiverede design, Jens Hofman Hansen, s. 22 16 Designing Brand Identity, Alina Wheeler, s. 64 17 Don t make me think, Steve Krug, s. 34 16
gere der kunne finde det med et klik. De andre tre måtte gennem tre eller fire klik for at finde telefonnummeret, og det må siges at være for meget. Siden har dog en kontaktformular og jeg blev gjort opmærksom på at dette var en god ting, da denne bruger, ikke har opsat Outlook og hun syntes det var træls at programmet blev åbnet hver gang hun trykkede på en e-mail. Hun syntes at kontaktformularen virker godt, og hun kunne godt lide den feedback der kom, når man udfyldte formularen. Hovedopgave, 7. juni 2010 Navigationsdesign Hjemmesiden er bygget op omkring en simpel horisontal menu, med en enkelt dropdown funktion. Flere af punkterne er skrevet med store bogstaver og et par af dem linker tilbage til forsiden 18, hvilket virker forvirrende og frustrerende for brugerne. Det menupunktet for den underside man er inde på bliver understreget, hvilket gør at man kan se hvilken underside man er inde på. Det ville måske være tydeligere hvis menupunktet også skiftede farve. Der er dog breadcrumbs, og en overskrift i toppen af hver side, hvilket giver en fin indikation over hvor man er henne. På en lille side som denne, kan det dog diskuteres om breadcrumbs er nødvendige. I toppen af siden er der også to små ikoner til print og sitemap. Dette er en af SmartWebs standarter for alle deres løsninger, og det er slået til som default, men man har mulighed for at slå det fra. På en lille side som denne, er det måske ikke nødvendig med disse muligheder. En af mine testpersoner brugte dog sitemap linket, da han ikke kunne finde et telefonnummer til caféen. Der er flere måder at komme tilbage til forsiden. Man kan klikke på "logoet" i toppen, på banneret, eller på menupunktet "Forside". Jacob Nielsen fraråder at man har et link til forsiden på sin side, da det er blevet en konvention at bruge logoet 19. Derudover kan man også klikke på navnet i footeren, men dette er indbygget i CMSen. Mine brugere brugte forsidepunktet i menuen eller banneret for at komme tilbage til forsiden. Man kan diskutere behovet for logoet i toppen, da de fleste af mine brugere brugte banneret eller forside linket. De fleste brugere vil måske også blive forvirret over logoet i toppen, da Café Slabberas reelle logo er en del af banneret. Flere af mine testpersoner udtrykte frustration over at to af menupunkterne linkede til forsiden i stedet for at linke til en underside. Det blev også sagt at det virkede uprofessionelt og at det afspejlede kvaliteten på caféen. Menuen har syv menupunkter, og i forhold til 7±2 20 reglen, kan det jo siges at være perfekt. Problemet det dog at de sidste fire punkter omhandler caféens menu og man derfor kunne vælge at lave dette som ét menupunkt, og på den måde kunne udnytte menuen bedre. Her kan det også nævnes, at menupunkter Drikkevarer mangler et R, hvilket måske vil irritere nogle brugere. 18 Se bilag 14 Sitemap af gammel side 19 Jacob Nielsen, Designing web Usability 20 http://psychclassics.yorku.ca/miller/ Kapitel: Strategy Plane 17
Christina Duus Linkene på siden er røde med en understregning. Det er derfor nemt at se dem, og man er ikke i tvivl om at det er et link. Præsentationsdesign I præsentationsdesignet forsøger man at få indhold, navigation, æstetik til at spille sammen som en enhed, som udgør den visuelle identitet for siden. Siden har en grå baggrund, og er holdt i varme, gyldenbrune farver. Banneret er mørkebrunt, med et logo i venstre side og tre billeder i højre side. Menuen er iøjefaldende idet at den er gyldenbrun og resten af siden er meget neutral i hvide og grå farver. Det blev nævnt i mine brugertests at siden var meget mørk, og at pladsen ikke blev udnyttet særlig godt. Det skal dog bemærkes at dette har noget med min skærmopløsning at gøre. Brug af skrifttyper Standart skrifttypen på siden er Verdana, en skrifttype der er designet specielt til at være letlæselig på en skærm 21, man har dog valgt på nogle sider at gøre teksten mørkerød, fed og skrive med store bogstaver. Dette kan være svært at læse, da den fede tekst flyder meget ud. På forsiden står der et par linjer med en orange skriftfarve og en ferskenfarvet baggrund, om at siden er under opbygning. Dette er gjort for at fremhæve informationen, men det giver et uheldigt indtryk på besøgende idet det skaber en for stor kontrast, der falder uden for designet. Det er derfor med til at give siden et rodet og uprofessionelt udtryk. På nogle af undersiderne er teksten centreret 22, igen er denne uregelmæssighed med til at forvirre brugeren og give siden et uprofessionelt udtryk. I usabilitytesten blev der givet udtrykt for at forsiden indeholdt rigtigt meget tekst. Dette gjorde at siden blev lidt kedelig og at man ikke havde lyst til at bevæge sig videre på siden. Ved nærmere eftersyn viste det sig at enkelte linjer havde op til 100 anslag. Man bør til skærmbrug holde sig til mellem 45-60 anslag, hvis man vil gøre teksten letlæselig 23. Brug af billeder og grafik De eneste billeder der er på siden er de tre der er i banneret. Flere af mine testbrugere troede at det var en kaffebar, pga. kaffebønnerne og cafe latte. En enkelt nævnte også den høje stol i det sidste billede, og at hun måske ville være betænkelig ved at komme der, fordi hun ikke kunne se i hvor høj grad cafeen var børnevenlig og gerne ville frabede sig skrig og skrål fra små børn. De billeder, der blev efterlyst i forbindelse med mine brugertests, var billeder af caféen, så man kunne få en fornemmelse for hvordan stedet så ud. Kapitel: Strategy Plane Siden gør brug af to retoriske figurer, en printer (til print funktion) og et sitemap-diagram (til sidens sitemap). 21 http://www.microsoft.com/typography/fonts/family.aspx?fid=1 22 http://sw1593.smart-web.dk/lej-slabberas/ 23 Kim Petersen: Design til skærmen - Grafisk forlag 18
Ifølge Claire Dormann er print symbolet en metafor, hvor printeren symbolisere selve funktionen at printe og sitemap-diagrammet er en synekdoke, hvor en del erstatter helheden. I dette tilfælde hvor en lille gren af et diagram, symbolisere hele sidediagrammet. Gestaltlove Gestaltlovene handler om perception, de beskriver hvordan den menneskelige hjerne opfatter sammenhænge i omverdenen. Der er især gjort brug af loven om lukkethed i designet. Selve indholdet opfylder reglen om lukkethed, fordi det er en hvid boks imod den grå baggrund. Men også både navigationen og footeren er lukket inde ved at give dem en mørkere baggrundsfarve, der også er med til at skabe en stor kontrast imod det mere neutrale hvide og grå. På kontakt siden har man valgt at sætte en ramme rundt omkring teksten og inputfelterne, hvilket også falder ind under loven om lukkethed. I banneret er der også brugt loven om lighed, med de tre billeder. Deres farver er holdt i de mørkebrune farver og formen og den orange kant er med til at gøre denne effekt stærkere. Hovedopgave, 7. juni 2010 Visuelt hierarki 24 I webdesign gør man brug af bl.a. kontrast til at skabe et visuelt hierarki på siden. Dette er for at fortælle brugeren om hvad der er vigtigt på siden. Slabberas hjemmeside gør brug af kontrast gennem banneret, menuen og footeren. Man lægger med det samme mærke til banneret fordi det er mørkt i forhold til resten af siden. Den samme effekt er brugt på menuen og footeren. Nogle af siderne har meget lange tekster (Menukort), hvor man har brugt fed skrift til skabe et hierarki, af hvad der er vigtigt på siden. Dette virker dog ikke særligt godt på Vinkort, hvor teksten enten er fed eller kursiv og der ikke er meget mellemrum mellem de forskellige vine. Sammen med den røde skrifttype der er brugt, er teksten meget udflydende og svær at læse. Denne analyse af siden har givet mig et rigtigt godt fundament for, at beslutte hvilke elementer, der skal prioriteres i det nye design. Jeg vil i det næste kapitel forsøge at afkode Cafe Slabberas image og identitet. 24 Visual Design for the Modern Web, Penny McIntire, s. 158 Kapitel: Strategy Plane 19