Stine Mo Stine Simonsen Trine Bauder Sofie Diemer

Transkript

1 Gruppe 8 KEA MMD S15 Stine Mo Stine Simonsen Trine Bauder Sofie Diemer

2 INDHOLDSFORTEGNELSE 1. LINK INDLEDNING OPGAVEFORMULERING AFGRÆNSNING METODE ANALYSE DESIGNPRINCIPPER IDE OG KONCEPT STYLEGUIDE WIREFRAMES MOCK UP LAYOUTDIAGRAMMER TEST OG TESTRESULTATER TEST USABILITYTEST REFLEKTION GUIDE TIL NAVIGATION KONKLUSION... 19

3 1. LINK 1

4 2. INDLEDNING Cinnober er en boghandel i indre by, som har tilhørende hjemmeside som inkluderer en webshop. Formålet med denne aflevering er at forny og forbedre deres hjemmeside. 2.1 OPGAVEFORMULERING Vi skal re-designe websiden for Cinnober. Løsningen skal være responsiv, og minimum indeholde de informationer, der allerede findes på sitet. Løsningen skal tage udgangspunk i analysen af det eksisterende site. 2.2 AFGRÆNSNING Med henblik på at lave afleveringen må det være vigtigt at understrege, at vi kun har haft fem dage til at lave besvarelsen, og det dermed må anslås, at der er mangler i det nye site. Vi har derfor valgt, at kode de sider på sitet vi finder mest væsentlige og relevante. 2.3 METODE Der vil blive brugte metoder, som vi har lært i forløbet grundlæggende webdesign. 3. ANALYSE Afsenderen: er Cinnober, en butik i København. Cinnober sælger bøger, særtryk, notesbøger og andre ting til kontoret. Målgruppen: Cinnobers målgruppe er en moderne borger, som går op i designobjekter, der giver et lækker twist til de små detaljer man pryder sin hverdag med. Afsenders budskab: Cinnobers håndvalgte udvalg af designbøger prøver at signalere, at bøger er et designelement, som hører til i den moderne borgers hjem. Dermed forsøger Cinnober at bryde diskursen om at bøger er støvede, kedelige og hører til på farmors reol. Ønsket effekt: at skabe et enkelt og kreativt site, som øger købelysten hos den besøgende. Hvad afsender ønsker modtageren skal tænke: at cinnober er en inspirerende, kvalitetssikret butik. Kommunikation og virkemidler: I forhold til det funktionelle behov, så ser man ikke med det samme, at Cinnober er en boghandel. Derudover er teksterne ikke særlig kortfattet, og man må læse sig igennem en del overflødig og gentagende information. Desuden skal sitet være helt konsekvent i valg af sprog, så der ikke veksles mellem dansk og engelsk. Eksempel af brug af to sprog: 2

5 I forhold til behov for relevans, er der en masse forældet information på sitet. Det ville være dejligt, hvis der var noget mere informativt information på sitets forside, så man fx vidste hvor butikken er placeret, og især hvilken slags butik der er tale om. Billederne på sitet er relevante de er bare ikke særlig flotte samt dårligt layoutet, og billederne har skiftende kvalitet, hvilket er med til at give et dårligt helhedsindtryk af sitet. Der er også anvendt white space, hvilket fungerer godt i det nuværende design. Den røde tråd på sitet ligger i typografien og logoet, men virker umiddelbart ret tilfældig. Den anvendte farvepalette er overskuelig den strækker sig kun over sort og hvid, men den er også en smule kedelig. Vi mener ikke, at sitet formår at skabe den store lyst hos brugeren, til at besøge butikken - mest på grund af manglende visuel overbevisning. Eksempel af about-siden på cinnobers hjemme side: DESIGNPRINCIPPER Siden bruger static design. Hverken tekst eller billeder tilpasser sig en mindre skærm, og på en mobilbrowser zoomer den helt ud og viser hele skærmen, hvilket resulterer i, at hele siden bliver vist på en halv mobilskærm og er ulæselig. Der er ingen break points på hjemmesiden, og kræver horisontal scroll hvis skærmen bliver for smal til indholdet. Typografi, tekstopsætning og sproglige virkemidler: Der er brugt den samme font til alle overskrifter, samt til al brødtekst. Kun butikkens navn en skrevet med en anden font. Begge fonte er sans serif, og da de begge er ret anonyme, er det ydermere med til at give siden et lidt intetsigende design. Desuden passer det ikke til den kreative profil sitet burde signalere. Selve sproget er formelt, men alligevel med en afslappet attitude. webshoppen på mobil: Komposition og strukturelle virkemidler: I forhold til menuen bliver gestaltloven om nærhed anvendt, hvilken desuden også er gældende i forhold til billederne på webshoppen. 3

6 Der er intet gyldensnit hellere ikke udpræget brug af grid. Hierarkiet på sitet er overskueligt. Hvad fungerer godt: det fungere godt, at der er udpræget brug af whitespace. Det er godt, at butiksnavnet går igen på alle siderne. Punkterne i menuen fungere godt. Logoet er flot. Hvad fungerer skidt: siden mangler responsive design for at fungere godt på mindre skærme som tablets og telefoner. Der mangler henvisning til sociale medier, som deres facebook side. Der er ikke meget fokus på deres webshop og events Research: Vi har kigget på en del bolig og kunstsider, så som og Vi kan konkludere, at mange af de andre sider har webshoppen i fokus, modsat Cinnober hvor den ligger som et menu punkt. 4. IDÉ OG KONCEPT Først og fremmest vil vi gøre det tydeligere, at Cinnober er en boghandel. For når man først ser siden, så kan man ikke umiddelbart regne ud, hvad sitet drejer sig om. Et andet hovedfokus vi har, er at lave en mere funktionel og fremtrædende webshop. Den skal fungere bedre i praksis, samt vække en større købelyst hos forbrugeren. Vi vil også gerne fjerne den sorte boks, der omkranser indholdet på sitet. Den er med til at få siden til at fremstå mere sammenpresset. Vi vil gerne have endnu mere fokus på white space i det nye design, som giver plads og luft til sitets information, tekst og billeder. Vi vil også gerne anvende flere af gastaltlovene. For eksempel er menu og brødtekst skrevet med samme font, hvilket umiddelbart gør dem svære at adskille. Vores koncept er, at lave en moderne og overskuelig hjemmeside med et strejf af farver. Det bliver lidt kedeligt kun med sort /hvid, og siden butikken også er fuld af farver syntes vi, at det er oplagt. Derudover er det en butik der emmer af kreativtiet, og det vil vi gerne have bliver reflekteret på hjemmesiden. Vi har fundet en masse flotte billeder på Cinnobers Instagram profil, samt under deres officielle hashtag. Disse billeder giver et mere kreativt, samt stærkere visuelt udtryk, end dem der allerede er på sitet. Alt i alt vil vi bevarer det der fungerer godt på siden, og ændre det vi ikke syntes fungerer. 4

7 4.1 STYLEGUIDE 5

8 indkøbskurv 5. WIREFRAMES Forside Desktop indkøbskurv LOGO CINNOBER HJEM OM OS WEBSHOP KONTAKT Tablet indkøbskurv BØGER KONTOR INTERIØR MAGASINER LOGO CINNOBER LOGO HJEM OM OS WEBSHOP KONTAKT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget dolor eget sem placerat consectetur ac et enim. Phasellus luctus elit ut nunc feugiat volutpat. Fusce ut pretium ante. BØGER KONTOR Tilmeld dig vores nyhedsbrev KONTAKT Landemærket 9, kld. th København K ÅBNINGSTIDER Mandag til fredag Lørdag Link til Facebook Link til Instagram INTERIØR MAGASINER Smartphone LOGO LOGO CINNOBER HJEM OM OS WEBSHOP KONTAKT BØGER KONTOR Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget dolor eget sem placerat consectetur ac et enim. Phasellus luctus elit ut nunc feugiat volutpat. Fusce ut pretium ante. INTERIØR MAGASINER LOGO Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget dolor eget sem placerat consectetur ac et enim. Phasellus luctus elit ut nunc feugiat volutpat. Fusce ut pretium ante. KONTAKT [email protected] Landemærket 9, kld. th. DK København K Tilmeld dig vores nyhedsbrev ÅBNINGSTIDER Mandag til fredag Lørdag Link til Facebook Link til Instagram Tilmeld dig vores nyhedsbrev KONTAKT [email protected] Landemærket 9, kld. th København K ÅBNINGSTIDER Mandag-fredag: 11:00-17:30 Lørdag: 11:00-15:00 Link til Facebook Link til Instagram 6

9 - Diverse - Særtryk - Belysning Udvalgte varer Bøger Interiør Lorem ipsum Lorem ipsum Kontor Magasiner Hjem Om os Webshop Kontakt CINNOBER Webshop-forside Desktop Smartphone Smartphone CINNOBER Kurv Hjem Om os Webshop Kontakt Bøger Kontor Interiør Magasiner - Notesbøger - Skriveredskaber - Diverse Udvalgte varer Lorem ipsum Lorem ipsum Lorem ipsum KONTAKT [email protected] Landemærket 9, kld. th København K Tilmeld dig vores nyhedsbrev ÅBNINBSTIDER Mandag-fredag: 11:00-17:30 Lørdag: Tablet Kurv CINNOBER Hjem Om os Webshop Kontakt Bøger Kontor Interiør Magasiner Lorem ipsum - Notesbøger - Skriveredskaber - Diverse Udvalgte varer Tilmeld dig vores nyhedsbrev KONTAKT [email protected] Landemærket 9, kld. th København K Lorem ipsum Lorem ipsum Lorem ipsum KONTAKT [email protected] Landemærket 9, kld. th København K Tilmeld dig vores nyhedsbrev ÅBNINGSTIDER Mandag-fredag: 11:00-17:30 Lørdag: ÅBNINGSTIDER Mandag-fredag: 11:00-17:30 Lørdag:

10 Produkt-side Desktop Smartphone logo logo CINNOBER Hjem Om os Webshop Kontakt Bøger CINNOBER Hjem Webshop Om os Kontakt Bøger Kontor Interiør Magasiner Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Bøger Interiør Kontor Magasiner Læg i kurv KONTAKT [email protected] Landemærket 9, kld. th København K Tilmeld dig vores nyhedsbrev ÅBNINGSTIDER Mandag-fredag: 11:00-17:30 Lørdag: Tablet Tablet logo CINNOBER Hjem Om os Webshop Kontakt Bøger Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia dese- Læg i kurv Bøger Kontor Interiør Magasiner KONTAKT [email protected] Landemærket 9, kld. th København K Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Læg i kurv Tilmeld dig vores nyhedsbrev ÅBNINGSTIDER Mandag-fredag: 11:00-17:30 Lørdag: Tilmeld dig vores nyhedsbrev KONTAKT [email protected] Landemærket 9, kld. th København K ÅBNINGSTIDER Mandag-fredag: 11:00-17:30 Lørdag:

11 Katagori-side Desktop Smartphone Tablet 9

12 6. MOCK UP Forside Desktop Smartphone Tablet 10

13 Webshop-forside Desktop Smartphone Tablet 11

14 Produkt-side Desktop Smartphone Tablet 12

15 Katagori-side Desktop Smartphone Tablet 13

16 7. LAYOUTDIAGRAMMER Forside 14

17 Webshop-forside body header div.indkøb img a.logosweb img.headernavnweb div.webhead nav ul li ul li li li li li h1 div.populære 15

18 Produkt-side body main.produkt.produkttext h2 p.tilfoj img 16

19 Katagori-side 17

20 8. TEST OG TESTRESULTATER 8.1 TEST Beskrivelse af problem Hvilken heuristik? Link til siden hvor problemet findes Kategori (alvorsgrad) Forslag til løsning Hvor lang tid vil det tage at løse? 01. Klik på navn/logo fører ikke tilbage til frontpagen 02. Tydeliggør endnu mere, at der er tale om en boghandel 03. De rigtige skrifttyper vises ikke 04. Undermenuen på mobiludgave vises ikke korrekt 05. Tekst i about sektionen holder ikke proportioner på tablet og mobil udgaven 06. Skriftstørrelse i menuen skifter mellem forsiden og webshoppen 07. Kategorierne på forsiden leder ikke hen til de rigtige steder i webshoppen (leder hen på forsiden af webshoppen) 08. Teksten på banneret på kontor-siden vises ikke centreret i mobil udgaven 09. Teksten på produktsiden kan godt blive en smule større på mobiludgaven 10. Billeder på produktsiden kan evt. centreres på mobiludgaven (Konsistens og) standarder Status synlighed Konsistens og standarder Konsistens og standarder Konsistens og standarder Konsistens og standarder Konsistens og standarder Konsistens og standarder Konsistens og standarder Konsistens og standarder Redesign/cinnober.html Redesign/cinnober.html Redesign/webshop.html Redesign/ cinnober.html#omos Redesign/cinnober.html Redesign/kontor.html Redesign/produkt1.html Redesign/produkt1.html 3 Rettes i html 15 min ca. 1 Ændr i layout/design på forsiden 20 min ca. 2 Find nye skrifttyper på Google Fonts, som understøtter web 4 Slet undermenuen på mobil udgaven (sitet kan sagtens fungere uden) 15 min ca. 10 min ca. 3 Skift skrifttype, rettes i CSS 5 min ca. 2 Rettes i CSS 15 min ca. 0 Rettes ikke nu, da siderne ikke er oprettet 0 min 2 Rettes i CSS 10 min ca. 1 Rettes i CSS 10 min ca. 1 Rettes i CSS 10 min ca. 7. beskrivelse af test og testresultater Heuristisk test Da vi udførte den heuristiske test på vores website, fandt vi nogle fejl, vi ikke umiddelbart havde registreret før testen. Alle fejl er rettet, bortset fra fejlen vedrørende navigationen mellem kategorierne på forsiden og webshoppen (punkt nr. 07). Denne fejl kan ikke rettes på nuværende tidspunkt, da vi ikke har kodet alle siderne på webshoppen det ville være for omfattende en opgave. Usability test Vi udførte usability testen på gruppe 20. Testgruppen klarede de stillede opgaver hurtigt, og havde ikke umiddelbart nogen videre kritik til sitet. Dog påpegede de, at der foregår en del på forsiden, og at flere af punkterne på menuen mere eller mindre førte til samme sted. Derudover var de begejstrede for farveholdningen og designet generelt, og syntes at sitet var nemt at navigere rundt i. 8.2 USABILITYTEST Nr. Svar Problemer Forslag til løsning Hvor lang tid vil det tage at løse? 1 Cinnober. KORREKT Fundet Fundet Fundet Farver, gode. Nemt at navigere. Varekategorier på forside. Der foregår meget på forsiden. For lang om os tekst. For mange knapper der leder det samme sted hen. Evt. simplificering af forside. 1 time 18

21 9. REFLEKSION Vi har valgt, at bevare den målgruppe, vi i analyseafsnittet kom frem til, at siden henvendte sig til. Vi har ikke fundet det relevant at ændre målgruppen, fordi det i forvejen er en relativ lille gruppe af mennesker, som køber designbøger. Vi har derimod fokuseret på, at imødekomme målgruppen endnu mere, ved at tydeliggøre produkterne samt gøre designet på sitet bedre. Skal man beskrive målgruppen ud fra Gallups Kompas, ligger den på den moderne halvdel men med træk fra både den idealistiske og pragmatiske side. Vi vurderer målgruppen som folk med middel til høj indkomst, fordi høj uddannelse og interesse for kunst og kultur ofte hænger samen. Vi har tydeliggjort, at sitet repræsenterer en boghandel. Derudover har vi brugt flere farver i designet, både for at gøre det mere indbydende for brugeren, men også for at understrege det kreative rum. Sitet er gjort mere åbent, luftigt og overskueligt, og for at give et roligt udtryk, har vi bygget sitet symmetrisk op. Derudover er den røde tråd gjort langt mere fremtrædende end før både ved brug af gennemgående bannere, brugen af white space etc. Eftersom sitet repræsenterer en kreativ butik, syntes vi det var vigtigt at billederne på sitet i større grad inspirerer, vækker købelyst samt giver modtageren lyst til at besøge butikken. Vi har i det nye design gjort stor brug af Gestalt lovene. Vi har især anvendt loven om lukkethed, da mange af elementerne på sitet er inddelt i synlige bokse. Vi har derudover anvendt loven om nærhed, ved produktbillederne og deres dertilhørende tekst på webshoppen. Vi har haft en god proces. Overordnet har vi mere eller mindre holdt os til den foreslåede tidsplan, og vi har fået nået det meste af det vi ville. Vi har ikke haft videre problemer i processen med at få redesignet Cinnobers hjemmeside, og vi har indbyrdes været ret enige om den visuelle stil. Generelt har vi haft et funktionelt og dynamisk gruppearbejde. 10. GUIDE TIL NAVIGATION For at gøre arbejdsopgaven overskuelig, har vi ikke kodet alle siderne til websitet. Siderne Interiør og Magasiner er ikke oprettet og linker bare tilbage til webshoppen, men vi vurderede at man alligevel sagtens kan få et helhedsindtryk af sitet. Derudover er underkategorierne i kategori-menuen heller ikke oprettet med de rigtige produkter, og der er kun oprettet produktunderside for bogen The Book of Palms. Købs funktionen samt tilmeld nyhedsbrev funktionen er ikke kodet. 11. KONKLUSION Vi har løst opgaven til fulde ved at ændre de ting i vores analyse, som vi fandt utilfredsstillende. Vi har så vidt muligt prøvet, at beholde de ting ved den oprindelige hjemmesiden, som vi syntes fungerede. Vi må dermed konkludere, at vi har skabt en forbedret hjemmeside for Cinnober. 19