Gruppe: Julie Rasmussen, Laura Kongaa, Naja Lynge & Sophie Krogh Hold: B Analyseafsnit Kommunikation Hvem er afsenderen? Cinnober Hvem er målgruppen? Hipstere. Spelt mødre Kunstbevidste Ingefærs spisende De ønsker at have noget, som ingen andre har og på den måde være frontrunners Hvad er afsenderens budskab? Specielle Opfattes som en niché Hvilken effekt ønsker afsenderen at opnå? At målgruppen skal vide at de eksistere før de kommer ind på deres website. Hvad kan du forestille dig, at afsenderen ønsker, at målgruppen skal tænke om afsenderen? At de kommer ind i deres butik og at de kan få opfyldt deres behov. De skal føle at de kan finde inspiration og ny viden.
Responsive Design Wireframe Tegn en wireframe/skitse over siden og beskriv (RWD) design patern.
Hvor er break points? Hvilket design princip følger siden? Siden er ikke designet med responsive design, derved findes der ingen breakpoints, og siden følger ikke et design princip. Kommunikation & virkemidler / Grafiske virkemiddler Jens Hogman Jensens model I forhold til Jens Hogman Hansens model: Hvilke behov er opfyldt? Hvilke behov er ikke opfyldt? Grafisk virkemiddel Sprogligt virkemiddel Struktureret virkemiddel Funktionelle behov Gør det synligt Skriv forståeligt Gør strukturen enkel Behov for relevans Vær illustrativ Skriv noget relevant Vis informationen på rette tid og sted Emotionelle behov Vælg en passende grafisk stilart Vælg en passende skrivestil og genre Skab en god historie Er det funktionelle behov opfyldt? Kan du se, hvad der er links, overskrifer etc: Når man som bruger logger sig ind på Cinnober, bliver vores funktionelle behov opfyldt. I det at siden er overskuelig og meget stilren, og man kan kan let finde tingene. Dog vil vi mene at hvis der var en scroll funktion inde på deres site, ville det gøre det lettere for brugeren at finde rundt. I stedet for at skulle trykke på de 2 piltaster, som gemmer sig lidt nede i hjørnet. Er behovet for relevans opfyldt? Er fotos, illustrationer, grafik etc. relevant i forhold til sidens indhold og funktion? Fx farvernes medbetydning, typografiens medbetydning osv. Alt i alt mener vi ikke at Cinnobers web site ikke opfylder det relevante behov. Det skyldes at deres logo samt fotos udstråler forkert relevans i forhold til deres egentlig profil som boghandler. Engagerer siden emotionelt? Får siden overbevist sine brugere? Understøtter de visuelle virkemidler budskabet overbevisende? Er stil og udtryk velvalgt i forhold til målgruppe og budskab? Siden overbeviser ikke sine brugere idet, at de gerne ville fremstå som en inspirerende og anderledes butik. Følger sitet ikke dette, hverken via deres brug af visuelle virkemidler eller designet på sitet.
Stilart, udtryk og den røde tråd Lav en style guide over sidens stil, det gør det nemmere for dig, at gennemskue siden. Har siden en rød tråd i sine visuelle elementer? Foto stil, illustration stil, animations stil, typografi, farver osv. Ja, logoet, herunder menes både billede og navn, er et gennemgående element, som fremstår uanset, hvilken side du er inde på. Derudover er der kun anvendt sort og hvid gennem alle side. Som illustrationer har de valgt farve fotografier, hvilket er en gennemgående stil på sitet. Er der brugt en stilart? Hvordan vil du kategorisere stilen? Der er ikke brugt en decideret stilart. Hvis man skal kategorisere stilen vil vi kalde den klassisk og ikke opdateret.
Farver Er der brugt en overskuelig farvepalet? Og i så fald hvilke kontraster og harmonier er der i farverne? Der er brugt en overskuelig farvepalette herunder kun sort hvid. De eneste farve elementer på sitet er fotografierne, som er i farve. Komplementær kontrast, Lys/mørke kontrast, Monokromatiske farver Treklangs farver osv. Understøtter brug af farverne hierarkiet og sidens indhold? Primært er der anvendt hvid baggrund med sort tekst, og dermed gøres der brug af monokromatiske farver. Typografi og tekstopsætning Hvor er der brugt, display skrift, brødtekst og konsultativ tekst? Display er blevet brugt på alle undersiderne på sitet. Brødtekst er blevet brugt på undersiden about, hvor de beskriver dem selv. Samt også på newsletter og contact. Konsultativ tekst, vil vi sige er på undersiden contact, hvor der står deres kontaktoplysninger. Hvor mange forskellige skrifter er der brugt? Der er blevet brugt to skrifttyper på sitet, calibri og Core Sans Cinnober gør brug af både versaler og minuskler på deres site I deres displayskift (overskrifter) benytter de sig af spærre mellem bogstaverne. I hvilke klassificerings grupper tilhører disse skrifter? Der gøres brug af Calibri regular i websitens brødtekst, og Core Sans bold bliver benyttet i deres display. Følger tekst opsætningen konventionerne? Er brødteksten fx let at læse, er der for lange linjer osv. Brødteksten på alle undersiderne er lette at læse. Dog skifter sproget mellem engelsk og dansk på de forskellige undersider. Deres opsætning af brødteksterne varierer fra side til side, med at deres tekstjustering er en blanding af løs forkant og løs bagkant. Og på en af de andre sider gør de brug af fast for og bagkant. Hvilket gør det mere uoverskueligt for forbrugeren og læse Passer valget af skrift til sidens budskab og indhold? Deres valg af skrift passer godt til sidens budskab samt indhold, i det at det er nogle meget stilrene skrifttyper de benytter sig af.
Komposition Identificer kontraster og gestaltlove, hvilke er brugt hvor? I menuen er der anvendt gestaltloven om forbundethed. Under webshop er getaltloven om lighed anvendt, som tilsammen indikere webshoppen. Er der gjort brug af det gyldne snit, white space, grid? Der er blevet gjort brug af whitespace på alle siderne. Sitet arbejder også med tomt whitespace, hvor kun midten af selve sitet er aktivt. Er hierarkiet mellem elementerne på siden overskuelige? Hierarkiet mellem elementerne er umiddelbart overskuelige på trods af siden about. Generelt er det størrelses kontrasterne på de fotografier er rodet. Sprogligt virkemiddel Spørgsmål fra Jens Hogman Hansens model Er det funktionelle behov opfyldt? Selvom de både gør brug af engelsk og dansk på de forskellige undersider, fungerer det fint og man kan forstå hvad der skrives. Er behovet for relevans opfyldt? Behovet for relevans bliver opfyldt, i det at teksten er let at læse og skrifttyperne ikke varierer på siderne med brødtekst m.m. Er tekstens indhold relevant i forhold til sidens indhold og funktion? Indholdet på sitet, er meget information om hvad butikken er samt, hvor man kan finde den. Det er hurtigt og let at finde frem til beliggenheden og komme i kontakt med dem. Den anden brødtekst er information om div. varer de sælger på deres webshop, hvilket også er formuleret kort og kontant. Hvordan er tonen? (Er der brugt slang, fagord. Tørt og formelt kontra personligt og levende osv.) De bruger formelt og tørt sprog. Og hvordan passer tonen til sidens indhold og budskab? Tonen passer godt til sitets budskab. De vil gerne virke faglige og professionelle og det understøtter de godt med tørt og formelt sprog.
Er der meget eller lidt tekst? Er teksten relevant? Er teksten let at læse? Er teksten overskuelig? Fx nem at skanne? Der er lidt tekst, men alt sammen relevant. Nem at læse, hvis man både kan forstå engelsk og dansk. Strukturelt virkemiddel Spørgsmål fra Jens Hogman Hansens model Er det funktionelle behov opfyldt? Kan du finde menuen? Menuen er let tilgængelig på alle sider og er altid synlig. Kan du finde rundt på siden og i sidens hierarki? Siden er enkelt opbygget, og hierarkiet er let forståeligt. Er behovet for relevans opfyldt? Kan du finde det du leder efter? Det er nemt at finde hvor de befinder sig henne og de få informationer man kunne have brug for. Hvad kan forbedres Fordi du skal udføre et redesign af det pågældende site, er det en god ide at tænke nedestående punkter ind i din analyse. Hvad fungerer godt? Det er let at finde rundt på siden, i det at der ikke foregår meget. Hvad kan forbedres? Deres variation i sproget er en smule forvirrende, i det at det skiftet mellem dansk og engelsk på de forskellige sider. Samtidig er deres billeder ikke beskåret eller redigeret til siden, og det virker som om billederne bare er blevet lagt tilfældig op på de forskellige sider. Hvis man skulle lave logoet om, skulle det være noget som henvender sig til at selve butikken som er en boghandel. Hvilket vi ikke mener at det gør. Man finder først ud af, hvad de er længere inde på sitet.
Strukturelt virkemiddel Tegn en site arkitektur over sitet. Hvordan ser navigationen ud? Er den overskuelig? Kan du nævne hvilken type for navigation, der er brugt? Der er anvendt global/persistent navigation. Global navigation er en navigation vises på alle sider og er placeret i toppen i højre side, men i dette tilfælde er placeringen anderledes, da den er placeret nederst til højre. Koncept og idé ved det nye design Vi tolker Cinnober som en kvalitets boghandler som forhandler eksklusive og særpræget produkter til kontoret og kreativiteten hos køberen. Og de ønsker at give deres kunder en speciel oplevelse i det de træder ind i butikken eller befinder sig på webshoppen. At deres produkter er unikke og fundet til kundens behov.
Redesign Landingpage
Homepage
Produktside eksempel
Vores butik
Styleguide
Layout diagrammer over nyt design:
Mock up
Skema til Heuristisk evaluering Gruppenavn: Kodnings eksperterne 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 Beskrivelse af problem Hvilken heuristi k? Link til siden hvor problemet findes Kategori (alvorsgr ad) Forslag til løsning Sitet er ikke responsiv Mangler en synlig mail, som ikke er Konsist ens og standar der Status synlighe d 3 Skal kodes i HTML 1 HTML og CSS
gemt væk i tekst Skema til Usability test gruppe der vurderer: The A team / Testgruppe nr.: kodning eksperterne Spørgsmål 1. Find ud af hvem der står bag sitet Find butikkens adresse og åbningstider 2. Find eksempler på butikkens varer. Køb en vare 3. Send en mail til butikken (find kontaktinformation) 4. evt... Nr. Svar Problemer Forslag til løsning Hvor lang tid vil det tage at løse? 1 Meget let at se, at Cinnober er afsender 2 Det er let at finde en vare, da de har en webshop 3 Det hele er under kategorien: kontakt 4 Korrekturfejl i en h2 på forsiden 5 Fonden har ikke æøå, hvilket gør ulogisk, da det Rettes fra boghandler til boghandel Alternativ kunne være, at oversætte siden 1 min. 20 40 min.
jo er en dansk side. til engelsk eller blot finde en anden fond. Sitet har en sammenhæng da der fremtræder Hover flere steder, hvilket er super. Refleksion Vi har i løbet af ugen beskæftiget os med at lave et redesign af sitet Cinnober som er en boghandel der ligger i indre by. Vi har først lavet en analyse af selve sitet og derefter kommet frem til, hvad der fungerede og hvad der ikke fungerede. Cinnober har både benyttet sig af engelsk og dansk gennem hele der site, hvilket gør det en smule forvirrende og uoverskueligt. Vi syntes også at deres logo er misvisende i forhold til deres reelle budskab. Alt i alt mener vi ikke at de har et særlig stærkt grafisk udseende. På baggrund af dette har vi prøvet at løse problematikkerne i deres site, og give dem et nyt grafisk look. Vi har valgt at benytte os af en rød tråd via vores turkise farve som er gennemgående på alle vores undersider. Vi har prøvet at holde det meget stilrent samt overskueligt. Vi har valgt vores typografi bacis title font og museo sans 300 som har en let anatomi som gør det let at læse. Dog findes de danske bogstaver æ,ø og å ikke og i fremtiden skulle man finde en font som gjorde. Grundet tidsmangel har vi ikke fået gjort vores site responsivt, hvilket ville kunne gavne på længere sigt. Vi har heller ikke fået lavet en del undersider som ville færdiggøre det endelige site, så som at undersiden se produkt, betaling osv mangler. Vores samarbejde har været godt hele ugen og vi har været gode til at hjælpe hinanden, stille spørgsmål og stille krav til hinanden. Vi har hver især udviklet os inden for HTML/CSS. Vi har været meget fokuseret i gruppen og været gode til at uddelegere de forskellige opgaver.
Fremadrettet ville vi lave det hele i et samlet dokument HTML og CSS, i stedet for at sidde og kode på hver vores computer. Da det har gjort det svært at samle det fælles og få de forskellige undersider til at være ens. Dette har også resultatet i at siderne vi har afleveret ikke er 100% ens da der ikke har været tid til at ændre det hele om igen og tilpasse det. Link til website: http://najalynge.com/cinnober/forside.html Brugernavn: keammd Kode:kode2015