Redesign af website Gruppe 27: Fanøfærgen Website: Feelgood Bakery Link til redesign: http://madsklarlund.dk/feelgoodbakery/ Dagmar Büchert Julie Otzen
Mads Klarlund Mathias Duhn Larsen 2. Koncept & idé 3. Wireframes 4. Styleguide 5. Mockups 6. Layoutdiagrammer 7.Test & testresultater 8. Refleksion 1. Analyse af website Hvad vil siden? BUDSKAB: glutenfri Opskrifter med mel alternativer Hovedbudskab: FOLK SKAL KØBE DERES BRØD Målgruppe: Skabe bevidsthed om folk med glutenallergi, og alternativet. Derved promoveres det som sundt/smart. Glutenallergikere Københavner bager Fungerer siden? Webshoppen bruges til at sælge melmix Budskab: Kvalitetsbrød Formidles: Der sælges melmix Men også et bageri Effekt Sælge Sprede budskab Bevidsthed Hvilke værdier har afsenderen? 2
Småt og godt Kvalitet Miljøbevidsthed Krop og sind Sundhed Kommunikation og virkemidler WEBDESIGN Grafiske virkemidler Sproglige virkemidler Strukturelle virkemidler Funktionelle behov Synligt? Mange billeder af deres produkter. Ikke kortfattet, skal være mere komprimeret. Enkel struktur? Strukturen er enkel men der er for meget indhold på siden i forhold til brugerens orientering. Behov for relevans Illustrativt? Ja, baggrundsbillede af brød. Umiddelbart viser siden meget fint, hvad deres overordnede koncept er, men det forekommer imidlertid for rodet. Relevant? Ja, god information, men måske lidt for knudret. Og uoverskueligt. Er informationen på rette tid og sted? For mange navigationsmuligh eder, i forhold til deres produkt. Det skal sammenfattes enklere. Emotionelle behov Emotionelt passer det. Pussenuttet. Passende skrivestil og genre? Lidt for cheesy, men godt med metaforer. Er der skabt en god historie? Ja, men skal være mere præcist.mere klar konceptualisering. 3
Grafisk virkemidler Farver: Relativ simpel farvepalette i gråtoneskala. Brune og blålige nuancer på baggrundsbillede af brød. Lys grøn og pink kontrast farver i navigationsmenuen.. Typografi og tekstopsætning: Der er brugt tre forskellige skrifttyper. En display skrifttype til logoet: Feelgood Bakery. En humanist skrifttype til navigationsdelen og en serif skrifttype til brødtekst og overskrift. Siden følger konventionerne ved at have en serif font som brødtekst og sans serif som konsultativ tekst. Styleguide Har siden en rød tråd i sine visuelle elementer? Siden har mange gennemgående elementer, både i forhold til skrifttyper og billedelementer, hvilket gør, at der er en forholdsvis god samhørighed mellem det hele. Webshoppen ødelægger den røde tråd, da den ikke indeholder samme skrifttype og baggrundsbillede. Det ser ud som om den er købt hos en ekstern webshop udbyder. Er der brugt en stilart? Hvordan vil du kategorisere stilen? 4
Eftersom siderne og elementerne overvejende er sammenhængende, betyder det dermed også, at der er en konkret stil. Stilen er dog ikke mærkbart særpræget, og den er derfor ikke særlig genkendelig. Afsenderen stræber tydeligvis efter, at indgyde brugeren en følelse af varme og omhu, men det lykkedes ikke helt. Den personlighed og identitet, man fornemmer de har, kommer ikke ordentligt til udtryk, fordi de bl.a. har brugt for lidt tid på stilistisk og æstetik. Sproglige virkemidler For mange metaforer. Brug for mere sproglig klarhed. Hvor er der brugt, display skrift, brødtekst og konsultativ tekst? Teksten i sig selv er ikke så uoverskuelig, men teksten er disponeret de forkerte steder og man skal lede for at finde det man leder efter. Skriften til brødteksten passer fint til indholdet. Men skrifttypen til logo og overskrift er forvirrende i forhold til budskab. Komposition Identificer kontraster og gestaltlove, hvilke er brugt hvor? Eftersom siden er nemt og enkelt opbygget er det ret overskueligt for brugeren at finde de sammenhængende billeder og tekst. På hver af deres under menupunkter ser man kun en enkelt side af enten billede eller en smule tekst. Kun på deres webshop ses loven om nærhed, hvor billede af produkt hænger tydeligt sammen med beskrivelsen og pris af produktet. Er der gjort brug af det gyldne snit, white space, grid? Grid, for lidt white space white space ville være pænt!!! Strukturelt virkemiddel Er det funktionelle behov opfyldt? Menuen fungerer i overskrift træk, men flere af dem kunne godt passe under samme overskrift. Idet menuen bliver i headeren, er det muligt at komme frem og tilbage på nem vis. Er behovet for relevans opfyldt? Det grundlæggende relevante indhold bliver gemt en lille smule væk under menuens mange punkter. 5
Man skal selv aktivt lede efter de vigtigste informationer. Engagerer siden emotionelt? Modstridende visuel identitet. Logo signalerer industri og stilrenhed mens fx. billede på about side af ejernes sko (?) signalerer personlighed og hygge. Navigation Navigationen er en otte punktet navigation med underpunkter/undermenuer på visse hovedpunkter. Menuen i sig selv er ret overskuelig, men indholdet af dem kunne sagtens disponeres, således at man droppede et par af de overordnede punkter. Menuen er en top level/primary navigation idet at menuen konstant befinder sig øverst på siden med en headline der grundlæggende beskriver afsnittets indhold. Site arkitektur på websitet 6
2. Koncept & idé Vi har med udgangspunkt i vores analyse fundet frem til at hjemmesiden skal trækkes i en mere enkel og stilren retning. Dette skal være med til at understøtte firmaets fokus på sundhed og selvfølgelig budskabet om at produkterne er glutenfri. Vi syntes at hjemmesiden fremstod noget rodet og usammenhængende. Især navigationsdelen har vi forsimplet og slået flere dele sammen, så man som kunde lettere bare kan scrolle rundt på siden og blive inspireret. Dette er også en af grundene til at vi har valgt en onepage. Vi har forsøgt at forsimple layoutet ved brug af whitespace, som giver en vis eksklusivitet. For at balancere tingene, har vi valgt en display font, der er lidt legende og naiv og som også giver et moderne præg. 3. Wireframes Desktop 7
4. Styleguide 8
5. Mockups Desktop 9
10
11
12
Landingpage tablet 13
14
15
Mobil 16
17
6. Layoutdiagrammer Desktop 18
Mobil 19
20
7.Test & testresultater Heuristisk evaluering: Beskrivelse af problem Hvilken heuristik? Link til siden hvor problemet findes Kateg ori Forslag til løsning Hvor lang tid vil det tage at løse? Displayfonte n skal være downloadet til den pågældende computer for at kunne vises. Æstetisk design 4 1) Ændre fonten! 2) Ændre overskrift til billede 3) Download ny Google font 1) 2 min. 2. 20 min. 3. 1½ time Footeren fucker op Æstetisk design 3 Tekst mangler i Status synlighed 2 Skriv noget mere 10 min. 21
hvem er vi og butik se ktion Hvid kant på et af billederne under vores produkter 1 For mange skrifttyper Hjem knap i butik virker ikke Æstetisk 2 Status synlighed 3 Rettes i html 15 min Generelle rettelser i media queries Ændre baggrundsfa rver Mangler margin i højre og venstre Æstetisk 3 Æstetisk 1 Rettes i css 5 min. Æstetisk 1 Rettes i css 20 min. 22
Usabilitytest med opponentgruppe: Nr Svar Problemer Forslag til løsning Hvor lang tid vil det tage at løse? 1 Brugergruppen kunne se, at det var Feelgood bakery, og da de kiggede på logoet, oppe i venstre hjørne, tænkte de øjeblikkeligt på, at det var hjemmebag 2 Svært at finde praktiske informationer Gruppen var først lidt i tvivl om, hvor de skulle finde adresse og åbningstider. Adressen fandt de dog, ved at trykke på besøg vores butik, mens de havde sværere ved at finde åbningstiderne. Muligvis angive oplysningerne flere steder på siden 30 60 min. 3 Gruppen havde umiddelbart ikke problemer med at finde 23
sidens produkter 4 I og med, at gruppen havde svært ved at finde de praktiske oplysninger, der lå i footeren, havde de ligeledes svært ved, at finde ud af, hvordan man kunne sende en mail. Mail systemet på siden fungerer heller ikke Mail systemet skal rettes op i CSS. Det skal være nemmere for brugeren at finde mail systemet Yderligere kommentarer fra opponentgruppe: enkel og fin er i tvivl om, det er kokain fedt logo med piskeris så ved man de bager selv de ved ikke hvem de er forvirring med ikoner ærgerligt at teksten ikke er samme størrelse som i billede adresse og åbningstider kan være svær at finde Vurdering ud fra de to tests: Ud fra de to tests kan vi se at vi ser på websitet på to forskellige måde. Vi har lagt meget mærke til de som detaljer som vi ved hvordan vi vil have dem, hvorimod den anden gruppe har lagt mere mærke til designet og brugervenligheden i helhed. De fejl og mangler som den anden gruppe har bidt mærke i, er de ting vi har prioriteret først, da det er ting som tager kortest tid at rette. De ting vi selv er utilfredse med har vi valgt at rette til hen ad vejen når vi har tid. 24
8. Refleksion Ud fra vores analyse af Feelgood Bakerys website startede vores idegenerering, som indebærer en del af de elementer, vi er endt op med i vores færdige produkt. Elementer som farver, billeder og en simplificering af det daværende website har været centrale for vores proces. Vi valgte at tilføre en stilren og æstetisk identitet til websitet for at sælge produkterne som noget eksklusivt. Vores version af websitet indeholder de gennemgående farver sort, hvid og den lidt skarpe gule. Den gule farve fungerer som blikfang og kontrast og sammen med vores display font, har vi ønsket at nedtone det eksklusive udtryk, så bageriet også får et skær af individualitet og ikke fremstår som en stor, kommerciel virksomhed. Hvis vi ser på Jens Hogman Hansens model over motiverende design, fremgik det af vores analyse, at sitet ikke fremstod særlig velovervejet rent sprogligt. Det har vi forsøgt at ændre ved at komprimere teksten og præcisere indholdet, udfra tankegangen om at vi ikke læser men nærmere skimter tekst på internettet. Herudover haltede hjemmesiden efter vores mening på det strukturelle område. Der var for mange navigationsmuligheder i menuen, som mindede om hinanden. Derfor har vi halveret antallet af sektioner og lagt siderne ind under hinanden. Vi vil karakterisere vores stilart som enkel og stilren med visuelle elementer, der giver et personligt og legende udtryk. Dette skal være med til at understrege virksomhedens koncept som et eksklusivt men også lille, lokalt bageri, der er startet og ejet af to søstre. På Besøg vores butik sektionen har vi desuden gjort brug af en strålekomposition idet hylderne på billedet peger hen mod teksten. Efter at vi sendte det første forsøg i luften, fandt vi ud af at skrifttypen ikke ville følge med på andre devices. Det krævede at de andre devices havde downloadet fonten. Løsningen endte med at vi fandt en lignende font på Google font og herefter brugte den, da den kan åbnes på alle andre devices. I forhold til ugens forløb har vi været en del pressede med at få fremtryllet et design og færdige mock ups allerede tirsdag. Vi har som gruppe følt at det mandag blev brugt for meget tid på analyse af virksomhedens website. 25