Gruppe 16 / redesign af website: Cinnober / Redesign af website. Gruppe 16: Anja Line Kira Emma Ditte Karoline

Transkript

1 Redesign af website Gruppe 16: Anja Line Kira Emma Ditte Karoline

2 Indhold Analyse 2-5 Koncept og idé 6 Wireframes 6-7 Styleguide 7 Layout diagrammer 8 Kodning 9 Beskrivelse af test og testresultater 9-10 Refleksioner 10 Link til website og password 11 1

3 Analyse Cinnober er en uafhængig boghandel for internationale bøger om design og kunst, lokalisert i København centrum De prøver at nå ud til interessede indenfor kunst, kultur og design. De er en professionel boghandel i sit felt og sælger også andre udvalgte varer end bøger. Grafiske Virkemidler Selve hovedindholdet er meget forvirrende og det er svært at se om de primært fokuserer på at være en webshop eller mere på deres fysiske butik, med dertil hørende månedlige events. Hvis man klikker videre fra hjemmesidens frontpage og over til Newsletter, bliver det meget misvisende, da man egentligt kommer ind til en scroll-down menu, med deres aktuelle arrangementer og samtidig deres nye produkter, hvilket intet har afgøre med deres newsletter. Derimod har de et meget lille link oppe i højre hjørne, der skulle indikere deres rigtige newsletter og mulighed for sign-up. Hvis man klikker videre fra Newsletter og over til Read more, har de en lang liste der går helt tilbage til November 2008, med gamle og dertil også udgående varer, de ikke længere sælger. Det giver et indtryk af en hjemmeside, der nærmest aldrig bliver opdateret og en del irrelevant info. Behovet for relevans, er dermed ikke helt opfyldt. Dertil giver About siden, et meget forældet og uprofessionelt indtryk, da selve opsætningen og layoutet er usammenhængende og uharmonisk. Selve indholdet/teksten er også kun brødtekst, uden nogen form for fremhævninger eller grafiske virkemidler der kan hjælpe til at fremhæve, f. eks deres månedlige events eller deres newsletter. Noget af teksten behøver heller ikke at være der, eller den kan flyttes et andet sted hen. Når man første gang besøger deres website, får man ikke rigtigt noget bestemt indtryk, da de kun bruger sort på hvidt, og det er derved meget upersonligt og mangel af en bestemt design-identitet, hvis man ser væk fra deres logo. Derudover har de som sådan ikke rigtigt nogle visuelle virkemidler, og det virker derfor meget hurtigt en smule utroværdigt og man ville derfor som bruger ikke benytte sig af deres webshop. Derudover har de som sådan ikke rigtigt nogle visuelle virkemidler, og det virker derfor meget hurtigt en smule utroværdigt og man ville derfor som bruger ikke benytte sig af deres webshop. Knapperne til Læg i kurv og Godkend ordre er af lav kvalitet og det medvirker til, at webshoppen bliver yderligere utroværdig og man vil derfor som bruger hellere benytte en anden webshop, der tilbyder produkter af samme stil. Stilart, udtryk og den røde tråd Kompositionen på siden er rolig, enkel og symmetrisk. Og med et hierarki mellem elementerne, Så man ved hvad som hvad. Da der ikke er så mange visuelle elementer på siden som brug af farver, splashbilleder, animationer eller specielle former for typografi, bliver hjemmesiden meget statisk og derved uden liv. Fonten Cinnober har valgt at skrive navnet i, fungerer meget godt og kunne godt være noget, man kunne arbejde videre med, til deres fremtidige/nye site. Stilen de prøver at ramme, er nok noget der nærmer sig den klassiske skrivemaskine-stil, da de fx. kun benytter sig af sort/hvid og at navnene på produkterne i webshoppen er understreget, giver også et typewriter indtryk. 2

4 Farver Siden er i sort/hvid, og det er kun billederne som giver de få farver der er. Det er altså lys/mørk-kontrasten der er anvendt. Derudover har de under deres webshop og kontakt information anvendt billeder i de grønlige nuancer, hvilket gør det meget afslappende for øjet at kigge på. Da der ikke er anvendt nogle farver, er det svært at sige at det overholder sitet s hierarki. Det skaber ro, da det kun er sort/hvid og derudover kun er i de grønlige nuancer. Lys/mørk kontrast (sort/hvid), altså er det akromatiske farver. Derudover er det kolde farver de har anvendt, da det er på den nlå/grønne side af favecirklen. Farverne er derudover mættede. Typografi og tekstopsætning Der er brugt display skrift til Cinnobers logo-type. Brødtekst er anvendt til alle andre tekst typer på sitet og er letlæseligt. Deres konsultative tekst under menupunktet Contact, kan kun findes hvis man klikker på linket og står derfor ikke på deres frontpage eller ved brug af en footer. Der er som udgangspunkt kun brugt en skrifttype gennem hele deres site, også under kontakt information og linket. Hvilket gør det svært at skelne, når det står mellem deres normale brødtekst. Der er som udgangspunkt kun brugt en skrifttype gennem hele deres site, også under kontakt information og linket. Hvilket gør det svært at skelne, når det står mellem deres normale brødtekst. Brødteksten er letlæselig, men derudover skrifter paragrafferne ikke på de rigtige tidspunkter. Det er svært at skelne mellem kontakt info og reel brødtekst. Idet Cinnober vælger at anvende en meget simpel og enkelt layout, kan man sige at Verdana er en god skrifttype, da den ingen sheriffer har og derfor er meget enkel. Dog kunne de godt have valgt at ændre deres skrifttype i navigationen, da det ville gøre det meget mere klart at det var et menuen og ikke bare normal brødtekst. Logoets font-type er derudover let genkendelig og man kan sagtens adskille den fra de omkring liggende skrifter. 3

5 Sproglige virkemidler Teksten kan forstås, men der er både brugt engelsk og dansk, hvilket gør sitet lidt forvirrende. Her ville det være godt at vælge et sprog, hvis man har en målgruppe der er engelsk, så er det nok bedst bare at lave sitet på engelsk. Ja, i nogle sammenhænge. Men der er også en masse info som er lidt irrelevant for sitet. Derudover kunne sitet også have godt af at gøre det lidt nemmere at finde det info man leder efter, nogle gange skal man klikke på flere punkter for at komme ind på det tekst man leder efter. Understøtter er de sproglige virkemidler sidens budskab overbevisende? Nej. Hvordan er tonen? Sproget er personligt og lidt humoristisk. Tonen passer fint til sidens budskab, hvis man altså tager udgangspunkt i at Cinnober vil have et mere personligt site. Men knap så meget tekst ville nok passe bedre til sitet. På Cinnober har de også prøvet at bruge ordspil og gøre teksten mere personligt. Er der meget eller lidt tekst? Der er meget tekst på sitet. Er teksten relevant? Nej, meget af teksten er irrelevant for produktet og sitet. Er teksten let at læse? Der er ret mange grammatiske fejl, det der står på engelsk er eller ikke det bedste og det kan få sitet til at virke utroværdigt. Er teksten overskuelig? Fx nem at skanne? I og med at der er ret meget tekst, og det meste er sat op i kolonner virker det ret uoverskueligt. Strukturelle virkemidler Det første indtryk giver at siden er simpel opbygget, men går man dybere ind på websitet, så er strukturen rodet. Det gyldne snit er delvis opfyldt, dog er problemet at nogle af de vigtige elementer fx navigationen er uden for det gyldne snit og er ikke hvad man først finder, men som man i stedet skal lede efter, fordi den ligger helt nederst på siden (lidt uden for synsfeltet). Den følger ikke Rule of Thirds, da vigtige elementerne hverken tekst, billeder m.m., ikke er placeret på de fire punkter, der kunne have sat billederne og tekst i fokus. Der er en del white space i forhold til at websitet er lille og minimalistisk. Elementernes placerng er ikke udnyttet til det fulde, så de kunne få opmærksomhed fra brugeren fra første øjekast. Grid er ikke udnyttet, da billeder er placeret ovenpå hinanden uden for grid-systemet. Der er ikke sat nok system i opsætningen af billeders og teksts placering. Websitet viser, at det prøver at køre den minimalistiske stil, men der er stadig for meget tekst, så websitet får ikke sin fulde virkning på brugeren. Man bliver som bruger hurtig træt af at skulle læse for meget. Deres About indeholder for meget tekst i stedet for at fokusere på det vigtigste om dem selv. De har et Newsletter liggende på websitet som en side for sig selv, hvor der er meget irrelevant tekst om nye produkter og andet og generelt er hvert nyhedsbrev for langt. Man får den information man søger, men det kan være besværligt at finde det frem, da noget ligger skjult under Read more. Man får serveret mere irrelevant information end det mest relevante. Siden engagerer en ikke emotionelt. Man finder senere ud af, at de faktisk har interessante niche-ting at sælge, men det sker kun fordi at man navigerer rundt på siden. Websitet fortæller dog ikke en historie, der er ikke skabt et emotionelt behov, hvilket er ærgerligt, fordi websitet har et potentiale for at fortælle en historie, der fanger brugeren bedre. Rodet blandet med minimalismen giver et lidt uambitiøst og mislykket udtryk, så det overbeviser ikke brugerne. 4

6 Budskabet kommer ikke til udtryk i 5 sekunder-testen. Man finder ikke ud af hvad deres budskab er. Man bliver heller ikke positivt overrasket, da man skal lede efter informationerne. Det gør også at man ikke bliver længe på siden. Loven om nærhed er delvis opfyldt. Menupunkterne er sammenhængende på alle sider. Der er stort set kun sort-hvid kontrast på websitet. Der er Navnicon, der fører tilbage til hjem/forside. Der er en main menu på alle sider. Navigationen er overskuelig til en vis grad. Den har simpel menu, der er ens på alle sider. Research Cinnober er utrolig enkelt og svært at finde rundt på. Der er intet splash-billede eller andre af tidens tendenser. På Louisianas hjemmeside, har de en header der fungere ret fint. Menuen er nem og lige at gå til. Der er blandt andet et punkt der hedder Det Sker - Herunder er blandt andet en kalender, hvor i man også kan se hvilke udstillinger der har været og hvilke der er akutelle i fremtiden. Man kunne også have et punkt(er) der hedder Events eller Aktuelle Arrangementer, det kan gøre det lidt nemmer for brugeren at finde rundt på sitet. Cinnober kunne også godt have gavn af nogle lidt mere levende elementer, måske i form af billeder. Siden følger ikke tidens tendens, den har ikke splash-billede og den har et navicon der ikke fungerer optimalt. Siden er heller ikke responsiv. 5

7 Koncept og idè Idéen går ud på at lave et skille mellem webshop og den fysiske butik, og gøre det klart at begge eksisterer. Derfor tænker vi at lave en forside hvor det er tydeligt at det er en butik, og hvad slags varer de sælger. For et af problemerne med siden var at man ikke kunne se hvad det var for et slags site man havde kommet ind på. Og for interesserede er det vigtigt at fange deres opmærksomhed, og fortælle dem hvad denne butik kan tilbyde. Så når man kommer ind på forsiden skal man kunne enkelt vælge mellem deres webshop og informationer om deres forretning, derfor vil det være et link til hver enkelt. Når man klikker sig ind på siden om deres fysiske butik, vil der være informationer om hvem der, hvor man finder dem og hvordan man kan kontakte dem. Deres evt. besøgende skal også vide om de arrangementer som har vært og som kommer, så de kan få en fornemmelse at de også er lidt mere end kun en butik, men også et sted for kunst- og designinteresserede. Deres webshop skal relatere sig mere til dem der ikke har tænkt at besøge dem. Så der skal deres varer blive præsenteret på en overskuelig og indbydende måde, man skal få lyst til at se igennem deres sortiment, og måske få lysten til at kigge forbi deres butik i København. Wireframes Frontpage Om 6

8 Events Sign up Kontakt Webshop Styleguide 7

9 Layoutdiagrammer Frontpage Om Events Sign up Kontakt Webshop 8

10 Kodning Der har ligeledes været lignende udfordringer med kodningen hvor ingen i gruppen har kunne gennemskue hvorfor kodningen ikke virker som den skal. Men udfordringerne skaber også en læring og på den måde har denne opgave været meget givende. Forløbet med kodning har været en proces med løbende udfordringer. Opstart af HTML og CSS dokument er en opgave der er til at klare da det er prøvet adskillige gange efterhånden. Udfordringen har mest lidt ligget i at gå i stå med kodningen over et simpelt problem. F.eks var der problemer med at style links forskelligt fra hinanden og detektivarbejdet kostede en halv dags arbejde, da det var vigtigt for layoutet at kunne arbejde med linksene individuelt. Til opklaringen blev der forsøgt med en intuitiv løsning, med CSS School, medstuderendes hjælp og til sidst en tilfældig forbipasserende lærers hjælp. Hvorefter det lykkedes på ca. 2 sek. Test og resultater Heuristisk evaluering Vi har udført en Heuristisk evaluering på vores redesign av Cinnober med følgende 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. Kategori: 0 = I don t agree that this is a usability prob lem at all 1 = Cosmetic problem only: need not be fixed unless extra time is available on project 2 = Minor usability problem: fixing this should be given low priority 3 = Major usability problem: important to fix, so should be given high priority 4 = Usability catastrophe: imperative to fix this before product can be released 9

11 Resultat Vi har valgt at placere logoet ned i højre hjørne på forsiden, som strider i mod konventionen at det skal stå øverst i venstre hjørne. Vi ser ikke dette som et problem, da det kun handler om forsiden, og det er for gi siden et design som ikke alle andre har. Siden er heller ikke optimalt responssiv. Noget av teksten kan ikke helt følge med, og ender op udenfor boksene. Forsiden ser heller ikke så god ud når den kommer ned i en mobil størrelse. Siden er lidt for bred i forhold til designet, og man får et hvidt område når man scroller til siden. Det er ikke et alvorlig problem, kun et lille irritationsmoment for perfektionisterne. Vi ved heller ikke hvordan vi eksakt skal løse dette problem. Et andet problem er at siden fungerer i Chrome, men ikke i Safari. Vi har ikke tjekket andre browsere. Refleksioner Vi startede med at researche omkring, hvordan andre websites har gjort, i fht. at drive en webshop, blandet med et site der hoster events mm. Vi har blandt andet kigget op Louisiana, Nikolaj Kunsthal og StormCPH, for at få inspiration til vores redsign af Cinnobershop.dk. Derefter har vi brugt en del tid på, at brainstorme og skitsere hvordan det nye site skulle se ud. Der var dog en del problemer i fht. at skulle blive enige om layout, farver og generel design. Vi blev dog enige til sidst, om at dele vores website i to: butikkens univers med de dertil hørende events og selve webshoppen. Denne idé har vi brugt igennem hele vores redesign af Cinnober, for at skabe et meget klarere overblik. Vi har derefter uddelegeret arbejdet i forhold til kodning og skrivning af rapport. Til slut har vi sammen justeret vores site og samlet alle forskellige koder, til værende én sammenhængende fil. 10

12 Link og password til website Brugernavn: kea2016 Password: mmdkode 11