Redesign af Cinnober Gruppe 25 Vi har i denne uge arbejdet på at redesigne hjemmesiden til butikken Cinnober, som ligger på Strøget i København. Cinnober sælger bøger og andre kontorartikler. Deres hjemmeside indeholder både info om butikken og en webshop hvor de sælger deres produkter. Her er vores færdige resultat: http://andreasofie.dk/kea/cinnober/redesign.html Brugernavn: keammd Kodeord: kode2015 Analyse af hjemmesiden Cinnober Kommunikation: - Hvem er afsenderen? o Cinnober - Hvem er målgrupper? o Designer/ kreative personer o Voksne - Hvad er afsenderens budskab? o De er et inspirerende butik o Kan få nye ideer derinde - Hvilken effekt ønsker afsenderen at opnå? o At vække en interesse for deres butik - Hvad kan du forestille dig at afsenderen ønsker at målgruppen skal tænke om afsenderen? o Afsenderen vil gerne have målgruppen til at tænke at det er en spændende butik og at det er et sted hvor de kan få inspirationer. Responsive webdesign: - Responsive design: o Siden er ikke responsive o Der er ikke nogen breakpoints. - Designprincip: o Der er ikke valgt nogen responsive designprincip da siden ikke er lavet til at være responsive 1
- Wireframes for Cinnobers nuværende hjemmeside: Gruppe 25 Home About Newsleatter Webshop Contact 2
Kommunikation og virkemiddel: Gruppe 25 - Funktionelle behov: o Den er funktionelt o Skriver noget relevant men skriver alt for langt o Kontaktinformation står både under about og contact o Sproget ændrer sig mellem dansk og engelsk - Behov for relevans: o Mange billeder o Mangler en footer o Mangler personlighed o For kedeligt o Mangler noget der fanger målgruppen samt giver et meget hurtigt indblik i hvad det er for en butik. o Alt for sort/hvid - Engagerer siden emotionelt?: o Fanger ikke brugeren emotionelt o Stil og udtryk er ikke velvalgt i forhold til målgruppe - Stilart, udtryk og den røde tråd: o Der er en rød tråd i det visuelle element o Stilarten er meget enkelt brug af farver (sort/hvid) o Farveløs - Styleguide for Cinnobers nuværende hjemmeside: 3
- Farver: o Farverne indgår ikke i farvepaletten da de kun har brugt sort og hvid. o Komplementær(sort/hvid?) - Typografi/tekstopsætning: o Der er brugt sans-serif i hele siden o To forskellige skrifter: Skriften til overskriften (kan ikke identificere skrifttypen da de er sat ind som et billede) og skriften til brødteksten. o Der er ikke lige meget margen o Skrifttypen på overskriften er for useriøst/barnligt - Komposition: o Der er brugt: Loven om lukkethed (rammen) Loven om nærhed (billede i forhold til tekst) Meget whitespace Asymmetrisk Meget stillestående/statisk o Der er ikke brugt nogen gyldne snit o Hierarkiet er overskueligt o Kompositionen fortæller ikke noget om afsenderens budskab - Sprogligt virkemiddel: o Det funktionelle behov: Teksten står både på engelsk og på dansk og derfor burde der være et rød tråd der. (eks. Kun dansk/ kun engelsk/ begge versioner) o Behovet for relevans: Der var for meget tekst i forhold til det relevante o Engagerer siden emotionelt: For lange tekster og derfor bliver man ikke engageret. For mange gentagelser (specielt under kontakt) o Tonen: For lange For tørt og formelt Teksten er ikke nem at scanne 4
- Strukturelt virkemiddel: o Det funktionelle behov: Kan godt finde rundt i menuen overskueligt Gruppe 25 o Behovet for relevans: Man kan godt finde det man leder efter Man får leveret de relevante information men nogle gange får man samtidig også nogle irrelevante informationer o Engagerer siden emotionelt: Siden engagerer målgruppen ikke emotionelt. o Navigation: Vertikal og enkelt Meget overskueligt/ enkelt Footer-navigation - Sitearkitektur for Cinnobers nuværende hjemmeside: 5
- Hvad fungerer godt?: o Info o Navigation overskueligt o Billedet på kontaktsiden Gruppe 25 - Hvad kan forbedres?: o Breakpoints/responsive o Links til Facebook og Instagram o Mere kortere/ relevante/engageret tekster o Mere personligt design o Forsiden eks. Slogan/billeder o Navigation o Scroll o Rammen skal væk o Opdateret billeder o Ny skrifttype o Flere farver minimum 1 o (Webshoppen) Koncept og ide Vi har valgt at lægge mere fokus på webshoppen. Nogle ting fungerede fint og andre fungerede knap så godt. På Cinnobers nuværende hjemmeside er der plantet et stort logo, hvor man så kan trykke sig videre i menuen. Den har ellers ikke nogen funktion. Vi har i stedet valgt at bruge landingpagen til webshoppen. Dvs. at man så kan klikke sig videre med det samme, til det produkt man nu måtte være interesseret i. Derudover har vi en menu, hvor man også kan klikke sig rundt i henholdsvis kontakt, om os og nyheder. Wireframes PC Tablet Iphone 6 6
7
Styleguide for vores redesign Mockups for vores redesign PC Tablet Iphone 6 8
9
Layoutdiagrammer for vores redesign Gruppe 25 PC Tablet Iphone 6 10
Beskrivelse af testresultater Skema til Heuristisk evaluering gruppe nr. 25 Heuristikker Status Synlighed: Hjemmesiden skal altid holde brugerne informeret om, hvad der foregår, gennem passende feedback brugeren skal vide hvor den aktuelle placering er, hvilke muligheder der er for at navigere herfra og hvordan den nuværende position er placeret i en større sammenhæng Konsistens og standarder: Brugerne bør ikke spekulere på, om forskellige ord, situationer eller handlinger betyder det samme. Der skal være konsekvens i både navngivning, funktion og design alle links ser ud og fungerer på samme måde, menuer er placeret på samme måde og fungerer ensartet på hele sitet Æstetisk og minimalistisk design: Hjemmesiden bør ikke indeholde oplysninger, der er irrelevante eller sjældent nødvendigt man bør forenkle sit design (mængden af information og visuelle elementer) så meget som muligt for at undgå støj 11
Beskrivelse af problem Hvilken heuristik? Kategori (alvorsgrad) Forslag til løsning Hvor lang tid vil det tage at løse? Vi har ikke nogen webshop knap i vores menu, her er den kaldt hjem hvilket kan skabe lidt forvirring. Status synlighed 2 Kalde knappen shop i stedet for hjem 5 min Logoet skal linke tilbage til hjem Status synlighed 2 Linke logoet til hjem 5min Vores footer forsvinder og rykker sig Status synlighed 3 Rette den til 0,5 time Vi mangler en mellemside til at vise de forskelige produkter indenfor hver kategori Konsistens og standarter 4 At lave disse sider, men tiden er for presset 3 dage + Vores margener skal være ens Konsistens og standarter 2 Lave dem lige store 2 timer Manglende titel på firma på 3 af siderne Konsistens og standarter 3 Skrive det på de andre sider 1 time Vores logo skaber problemer på vores menu når siden skal være i tablet eller mobil Konsistens og standarter 2 Prøver os frem 0,5 time Skema til usability test gruppe nr. 25 test gruppe nr. 14 Spørgsmål 1. Find ud af hvem der står bag sitet 2. Find butikkens adresse og åbningstider 3. Find eksempler på butikkens varer. Køb en vare. 4. Send en mail til butikken (find kontaktinformation) 5. evt... 12
Nr. Svar Problemer Forslag til løsning Hvor lang tid vil det tage at løse? 1 Nemt at finde ud af hvem der står bag Ingen problemer 2 Nemt at finde Ingen problemer 3 Gjort Ingen problemer 4 Den er nem at finde Ingen problemer 5 Vi har problemer med vores footer Footer ligger ikke altid i bunden Se på kodningen 0,5 time Refleksion Vi har valgt at redesigne hjemmesiden Cinnober fordi vi synes at det er den hjemmeside, der har flest fejl og mangler. Der er brugt meget whitespace på siden og farverne er sort/hvid. Designet er næsten ikke eksisterende, og der er ikke tænkt i kompositioner, farver eller design. Derfor synes vi at Cinnober skulle have en make-over. Dertil har vi valgt et gennemgående design med flere farver, men stadig enkelt og med whitespace. Forsiden/landingpagen har vi lavet om fra et stort Cinnober logo, til en webshop. Dette har vi gjort fordi, at man med det samme får fokus på hvilken butik det er, og hvilke produkter man kan købe. På Cinnobers nuværende side, skal man nemlig klikke sig ind på webshoppen, og man er faktisk ikke helt klar over hvilken butik det er, og hvilket produktudvalg de har før man får klikket sig rundt i navigationen. Vi har hentet inspiration fra forskellige sider på nettet, og gjort det til vores eget. Vi har lagt fokus på at gøre siden nem og overskuelig, og let at navigere rundt i for brugeren. Vi har f.eks. brugt loven om forbundethed og nærhed på siden. Hvilket er med til at forbedre brugervenligheden så man nemmere kan finde rundt på siden. 13