GRUPPE 5 Line - Nanna - Thea - Sarah Gruppeopgave uge 40 Redesign af website - Feelgood Bakery 2. oktober 2015 Link til site http://nannalauth.com/fgb/website.html Kode Brugernavn : keammd Adgangskode : kode2015
Koncept & Idé-generering I Idé-generings processen har vi gjort brug af forskellige metoder. Vi lavede en brainstorm, for at finde ud af hvilke key-words vi ville gå ud fra I forhold til vores design og konceptet. Vores brainstorm kan ses nedenfor Vi brugte lang tid på at lave research på vores brand, for at finde ud af hvem Feelgood Bakery var og hvad de ville derudover kiggede vi også på andre sites, for at finde ud af hvad der var på markedet. Konceptet var bestemt på forhånd, derfor har vi prøvet at fange essensen af Feelgood Bakery og deres koncept.
Analysemodel 1. Hvem er afsenderen? Feelgood Bakery et non-gluten bageri 2. Hvem er målgruppen? - Allergigere - Evt. sundheds-interesseret - 20 år + - De moderne - Kunder har en over-middel indkomst 3. Hvad er afsenderens budskab? - Feel Good - Det er ok at spise brød - Nemt og lige til - Non-gluten koncept 4. Hvilken effekt ønsker afsenderen at opna? - Gode og sunde produkter 5. Hvad kan du forestille dig, at afsenderen ønsker, at ma lgruppen skal tænke om afsenderen? - At det er pålidelige og troværdige. - At det er praktiske og levere et godt produkt at man både kan få færdigt brød og kager i butikken og man kan købe forskellige mel-blandinger med hjem.
Responsive design 1. Tegn en wireframe/skitse over siden og beskriv (RWD) design pattern. Design pattern på siden er Mostly Fluid da siden (sidens indhold) er centret i midten og det der det som tilpasser sig til skærmstørrelserne. Baggrunds billledet bliver skaleret.
2. Hvor er break points? Der er 3 break points - Første side fylder hele skærmen. Det første breakpoint kommer ved 1024x701 Det andet ved 800x701 Det tredje 640x701 3. Hvilket design princip følger siden? Siden følger det responsive designprincip Overordnede spørgsmål Er det funktionelle behov opfyldt? - Ja, siden opfylder det funktionelle behov. Da siden er overskuelig og elementerne at tydelige. Er behovet for relevans opfyldt? - Ja, grundlæggende er behovet for relevans opfyldt. Elementerne er relevante i forhold til sidens indhold og funktion.
Engagerer siden emotinelt? - Siden for overbevist sine bruger og hendes budskab er tydeligt på siden. Derfor engagerer siden emotionelt. Både stil og udtryk er velvalgt og rammer målgruppen godt. Dog er der selvfølgelig nogle ting som kan forbedres også i forhold til hvad vi opfatter målgruppen for at værende. Stilart, udtryk og den røde tråd. (Lav en style-guide over sidens stil) Har siden en rød tråd i sine visuelle elementer? - Ja siden har en rød tråd i sine visuelle elementer. I forhold til farverne som er holdt i den brunligenuancer, billederne har samme billedstil, typografien går igen, Er der brugt en stilart? - Nej der er ikke brugt en specifik stilart. Hvordan vil du kategorisere stilen? - Moderne og enkel stil. Farver Er der brugt overskuelige farvepalette? - Den overskuelige farvepalette fremgår i deres brune nuancer, men derimod afviger siden fra at have en overskuelig farvepalette i deres navigation ved at benytte mange pang/neon farver. Og i så fald hvilke kontraster og harmonier er der i farverne? - Sort og hvid kontraster + Split komplimenter ved menu og log (grøn, blå og pink) + Forskellige farve styrker. Understøtter brug af farverne hierarkiet og siden indhold? - Nej, farverne understøtter ikke hierarkiet og siden indhold. Typografi og tekstopsætning
Hvor er der brugt, display skrift, brødtekst og konsultativ tekst? - Der er brugt brødtekst på de forskellige faner. Der er ikke gjort brug af display eller konsultativ skrift. Hvor mange forskellige skrifter er der brugt? - Der er brugt 4 forskellige fonttyper. I hvilke klassificeringsgrupper tilhører disse skrifter? - Der er brugt Pladeserif i logoet. Serif er brugt i alt skrift udover undtagen i navigationen, hvor der er brugt sansserif. Følger tekstopsætningen konventionerne? - Ja, tekstopsætningen følger konventionerne. Passer valget af skrifter til sidens budskab og indhold? - Serif teksten passer til men menuen og sans-serif skriften passer ikke til deres indhold eller budskab. Det bliver for stramt og pænt. Komposition Identificer kontraster og gestaltlove, hvilke er brugt hvor? - Loven om lukkethed ved billeder og billede tekst også i logoet. - Loven og forbundenhed ved navigationen. - Loven om nærhed I logoet, de to tekstere hænger sammen og danner logoet. - Der er størrelseskontraster ved billederne. - Farvekontraster i navigationen hvor man lægger mærke til den pang/neon pink og den grønne ved mouse-over på de andre menupunkter. Er der gjort brug af det gyldne snit, white space og grid? - Der er gjort brug af white space - som man kan se på sidens home page. - Der er også gjort brug af Grid som man kan se på billederne på home -pagen. Kan du identificere følgende kompositoriske elementer på sitet? - Siden er harmonisk.
- Siden er i høj grad symmetrisk men ikke 100% - men vi vil ikke sige den er er asymmetrisk og derfor i højere grad symmetrisk. - Vi kan ikke umiddelbart identificere en komposition på sitet.
Er hierarkiet mellem elementerne på siden overskuelige? - Ja, elementerne på siden er overskuelige. Men billedteksten på billederne er uoverskuelig. Fortæller brug af kompositoriske virkemidler noget i forhold til budskabet? - Nej brugen af kompositoriske virkemidler fortæller ikke noget grundlæggende i forhold til budskabet. Sprogligt virkemiddel Er det funktionelle behov opfyldt? - Ja, det er letlæseligt og forståeligt. Er behovet for relevans opfyldt? - Ja tekstens indhold er relevant i forhold til sidens indhold og funktion. Engagerer siden emotionelt? - Ja, det gør den. Hvordan er tonen? - Tonen i teksten hælder til at være personlig og levende. De få fag ord hun bruger er letforståelige og overskuelige. Hvordan passer tonen til sidens indhold og budskab? - Tonen passer godt til sidens indhold. Er der meget eller lidt tekst? - Der er lidt tekst på hendes Home -page og kortfattede tekster på del-siderne.
Er teksten relevant? - Ja, teksten er relevant. Er teksten let at læse? - Ja, teksten er let-læsligt. Er teksten overskuelig? Fx Nem at skimme? - Ja, teksten er overskuelig da tonen er god og der er lidt og kortfattet tekst. Strukturelt virkemiddel Er det funktionelle behov opfyldt? - Ja, det er det. Siden har en god komposition og er umiddelbart nem at finde rundt i. Er behovet for relevans opfyldt? - Ja, det er det. Man kan ikke tage fejl af informationerne og hvor du kan finde dem. Engagerer siden emotionelt? - Ja siden engagerer emotionelt. Hvordan ser navigationen ud? - Navigationen er øverst på siden og punkterne ligger side om side. Den består af 2 linjer. Er den overskueligt? - Både og.. Menuen er pæn at se på og enkel men der er for mange menupunkter, og fordi teksten er hvid er den lidt utydelig på brød -billedebaggrunden. Kan du benævne hvilken type for navigation, der er brugt? - Det er brugt Global/top-level/persistant/primary navigation. Da menuen går igen på hver side og befinder sig i toppen af siden.
Hvad kan forbedres? Hvad fungerer godt? Farvesammensætningen. Den enkelte og minimalistiske udseende. Fonten er god. At indholdet er centreret. Hvad kan forbedres? Billederne på siden. Font-størrelse. Billede-tekst. Navigationen (både design og farve). Features (der skal være liv på siden). Logoet. Research - Hvordan er det pågældende site i forhold til konkurrenternes? - Hvordan ser andre sites ud i branchen? - Hvordan ser konkurrenternes site ud? Kombineret svar på de 3 ovenstående spørgsmål: Vi har kigget på glutenfristart.dk/naturbageriet og nogluten.dk og konkluderer her ud fra at alle sites er ufærdige, ugennemtænkte, umoderne og opfatter kun de funktionelle behov i analysemodellen.
Wireframe( (Desktop(( Logo( Nav( tekst( Overskri;( billede( tekst( Overskri;( billede( billede( billede( billede( billede( billede( Overskri;( tekst( Facebook_link( Instagram_link( Footer(( Copyright((
Wireframe( (ipad( Nav( Logo( Tekst( Overskri;( tekst( Overskri;( billede( billede( billede( billede( Overskri;( tekst( Faceboo_link( Instagram_link( Footer(( Copyright((
Wireframe( (IPhone(( Logo( Nav( Om(os( Nav( Opskri;er( Nav( Webshop( Nav( Kontakt( Footer( Copyright(
Layoutdiagram, Desktop, Gruppe,5,, Sarah,,Thea,,Nanna,&,Line,
Hele,siden,, #home, #om, #opskri>er, Webshop,(link), #kontakt, Footer,
Layout:,Home, #forside,.forside_desktop,.nav,.ng,.np,
Layout:,Om, #om,.om_desktop, omover,.p,
Layout:,opskri>er, #opskri>er, opskri>over,.photojgrid,
Layout:,Kontakt,, #kontakt, kontaktover,,.kontaklnfo,
Footer, footer,.facebook,ikon,.instagram,ikon,.copyright,
Layoutdiagram, Tablet, Gruppe,5,, Sarah,,Thea,,Nanna,&,Line,
Hele,siden,, #home, #om, #opskri>er, Webshop,(link), #kontakt,
Layout:,Home, #forside,.forside_desktop,.nav,.ng,.np,
Layout:,Om, #om,.om_desktop,.omover,.p,
Layout:,opskri>er, #opskri>er,.opskri>over,.photohgrid,
Layout:,Kontakt,, #kontakt,.kontaktover,.kontakjnfo,.facebook_link,.instagram_link,
Layoutdiagram, Mobil, Gruppe,5,, Sarah,,Thea,,Nanna,&,Line,
Hele,siden,, #home, #om, #opskri?er, Webshop,(link), #kontakt,
Layout:,Home, forside_iphone_5.png,, LOGO, Nav, Om, Nav, Opskri?er, Nav, Webshop, Nav, Kontakt, Footer, Copyright,
#om, Layout:,Om, omover,.om_desktop,.p,
Layout:,opskri?er, #opskri?er, opskri?over,.photolgrid,
+,11,af,overstående,vinduer,(opskri?er),
#kontakt, Layout:,Kontakt,, kontaktover,,.kontakpnfo,.facebook_link,.instagram_link,
! Dokumentation af brugertest 1. Beskriv jeres testforløb og vedlæg skemaerne som dokumentation Skema til Heuristisk evaluering Gruppe nr. 5 I forbindelse med vores testforløb, på vores eget website af Feelgood Bakery, fandt vi følgende ovenstående problemer med vores site. Vi har ud fra problemernes alvorsgrad, kategoriseret dem efter vores egen prioritering, hvad der er vigtigt og hvad er der mindre vigtigt i forhold til at opgaven er løst. 2. Sammenhold den heuristiske evaluering med jeres brugertest Hvilke problemer viste de 2 test? Var der forskel? Efter at have arbejdet med vores eget heuristiske evaluering og med vores brugertest kan vi konkludere, at de så nogle andre fejl end hvad vi selv var kommet på under vores heuristiske evaluering. Et problem der viste sig hos både vores heuristiske evaluering og brugertesten var at menuen ikke følger med ned af siden så
menupunktet home ikke er unødvendigt og man altid vil kunne klikke sig tilbage, selvom man er nederst på siden. Ved brugertesten var der forskel i forhold til vores egen heuristiske evaluering, da de havde fundet flere problemer, som at der ingen produkter eller varer er du kan klikke dig ind på og købe i vores opskrifter og derudover er e-mailen ikke interaktiv som er relevant i forhold til at klikke sig direkte ind på e-mailen. Testgruppe 19 Brugertest 3. Vurder jeres test resultater og lav en prioritering af problemerne (se på alvorsgrad og de ressourcer der skal sættes ind på at rette fejlene.) Hvilke problemer vil i prioritere at rette? Efter at have kigget på testresultaterne har vi forstået de problemer der har været til for brugeren. Da vi ikke selv ser punkt nummer 3 som et essentielt problem, da vi har vores webshop -menupunkt i menuen, har vi valgt at nedprioritere dette problem i forhold til de to andre, som vi vil gå ind og ændre på. Her refereres til punkt nummer 4 og 5 i brugertesten. 4. Reflektér over selve testen. Kunne I have gjort det bedre eller anderledes? Var der noget I ikke fik spurgt om? Testen har været en god hjælp til at få andre øjne på diverse problemer der kan opstå på hjemmesiden, som vi selv har set os blind på under arbejdsforløbet. Derudover har vi ikke ønsket testforløbet anderledes, da fik opfyldt alle svar og problemer, samt spurgt om diverse spørgsmål til testgruppen.
Refleksion I forbindelse med ugeopgave 40 har vi fået til opgave at redesigne en eksisterende hjemmeside. Der var mulighed for at vælge i mellem tre forskellige hjemmesider. Vi valgte at redesigne bageriet Feel Good Bakery hjemmeside, da vi så flest muligheder for ændringer designmæssigt. For at skabe et nyt design til Feel Good Bakery tog vi udgangspunkt i, hvilke skrifter, farver og billeder vi ønskede at ændre for at give hjemmesiden mere sammenhæng. For at gøre hjemmesiden mere overskuelig, valgte vi at lave hjemmesiden om til en onepage og gøre brug af whitespace funktionen, for at skabe ekstra fokus, på de enkelte ting der måtte foregå på, hvert slide. For at bevare overskueligheden har vi anvendt sort og hvid skrift, som står i kontrast til hinanden. Dertil har vi valgt at anvende brune toner for at tilføje lidt varme, til det ellers meget sort/hvide-look, som websitet har fået sig efter dets ændringerne. Derudover har vi anvendt de samme billeder, der er tilkoblet til Feel Good Bakery s nuværende site, til brug af en oversigt over 12 forskellige opskrifter, som hjemmesiden udbyder. Slutteligt har websitet fået sig en kontakt-side der indeholder; navn på virksomheden, adresse, åbningstider, mail, telefonnummer samt CEO og founders af Feel Good Bakery.!!!