Webshop makeover
University College Nordjylland, Teknologi og Business Professionsbacheloruddannelsen i webudvikling Hold: PWEa0913 Titel: Webshop makeover Projektdeltagere: Nicolai Michiels Christiansen Vejleder: Kasper Hurwitz Afleveringsdato: 12/1/2015 Tegn med mellemrum, ekskl. Bilag: 81.767 Underskrift:_________________________________________ Resumé Dette projekt er fokusset sat på, hvordan der laves en navigeringsvenlig webshop, som har et tidssvarende udseende, der kan skabe tillid til forbrugeren. For at løse denne problemstilling, vil der i projektforløbet undersøges for eksempel hvad godt web UI er, og hvordan en hjemmeside laves brugervenlig, for målgruppen. I starten af projektet, er der ikke klarhed om hvad der skal laves, og hvordan informationen skal tilgås. Ved at have en udforsknings fase, bliver dette mere klargjort. Det er af interesse, at lave webshop relateret arbejde. For at kunne lave dette, bliver der researchet, for at finde kilder, der kan indikere hvor forbrugere handlede mest på nettet. For ikke at lave et generisk projekt er dette blevet afgrænset, så der kun fokuseres på et firma. Ved at gøre dette kan projektet fokuseres på en general case i stedet for en generisk løsning. Det valgte firma skal analyseres, for at finde general information om dette. Denne information skal bruges til at lave en SWOT analyse, som anvendes til at finde ud af hvor firmaet står på det digitale marked. Efterfølgende, skal firmaets målgruppe findes. Dette bliver gjort ved at lave en Minerva analyse, og stille brugerspecifikke spørgsmål til at determinere den rette målgruppe. Af den valgte målgruppe, bliver der kreeret personas. Disse skal bruges i brugerscenarier, til hypotetisk at finde ud af hvordan målgruppen, gebærder sig på det nuværende website. For at få en bedre forståelse for at lave et godt design til målgruppen, bliver der efterfælgende lavet en State of the art analyse, af konkurrerende hjemmesider, med samme målgruppe. Den erhvervede information fra dette, bliver brugt sammen med informationen fra brugerscenarierne, til at kreere high end mockups. Svaret på problemformuleringen er en hi-fi mockup, som viser hvordan hjemmesiden vil komme til at se når denne skal programmeres. Side 2 af 61 Forord Dette bachelor projekt, er den endelige opgave på uddannelsen, Teknologi og Business Professionsbacheloruddannelsen i webudvikling fra UCN Sofiendalsvej Aalborg. Dette projekt har fokus på, hvordan et nyt og forbedret redesign, af et selv valgt firma laves. Dette emne er valgt, da jeg har personlig interesse for godt webdesign, og selv stræber efter at blive bedre til at designe. Det at blive bedre til at designe hjemmesider, kommer jeg til at bruge på daglig basis, i mit professionelle arbejdsliv som webudvikler. Jeg vil gerne benytte denne muligheden, til at takke de mennesker, som har hjulpet mig, og støttet mig under denne projektperiode. Først og fremmest, vil jeg gerne takke lærerne fra Teknologi og Business Professionsbacheloruddannelsen i webudvikling, for at have delt deres kompetencer, og visdom. Disse lærere har inspireret mig, til at yde mit bedste, og derfor er jeg hvor jeg er i dag. En speciel tak, gives til min vejleder Kasper Hurwitz, som har hjulpet med at sætte rammerne for projektet, og givet mig den tillid jeg har manglet for at kunne realisere projektet. Endvidere tak til min mor for korrektion af rapporten, og min dejlige kone, for den ubegrænsede support, hun har givet mig under projektperioden. Hun har været min motivation, til at give projektet en ekstra skalle. Side 3 af 61 Indholdsfortegnelse Resumé .......................................................................................................................................................................2 Forord .........................................................................................................................................................................3 Indholdsfortegnelse....................................................................................................................................................4 1. Indledning ...........................................................................................................................................................6 Problemformulering ...............................................................................................................................................6 Projektets mål og afgrænsning ...............................................................................................................................6 Projektets formål og resultater ..........................................................................................................................7 2. Metode ...............................................................................................................................................................8 Udforskningsfasen ..................................................................................................................................................8 Analysefasen...........................................................................................................................................................8 Udviklingsfasen.......................................................................................................................................................8 3. Udforskningsfasen ..............................................................................................................................................9 Projektets motivation .............................................................................................................................................9 Produktdefinition ...................................................................................................................................................9 Forundersøgelse - Spørgeskema ............................................................................................................................9 Kontakt til B.J.Trading .......................................................................................................................................... 12 Konklusion af Udforskningsfasen ........................................................................................................................ 12 4. Analysefasen .................................................................................................................................................... 13 The Strategy Plane ............................................................................................................................................... 14 Firmaets identitet ............................................................................................................................................ 14 Hvem er firmaet .............................................................................................................................................. 15 Succeskriterier ................................................................................................................................................. 17 Forbrugernes behov ........................................................................................................................................ 18 Bruger segmentering ....................................................................................................................................... 19 Minerva modellen ........................................................................................................................................... 19 Persona ............................................................................................................................................................ 22 Konklusion af Strategy Plane ........................................................................................................................... 23 The Scope Plane .................................................................................................................................................. 24 Udspørgning af målgruppen ............................................................................................................................ 24 Konklusion af udspørgning .............................................................................................................................. 25 Brugerscenarie................................................................................................................................................. 26 Side 4 af 61 Brugerscenarie konklusion .............................................................................................................................. 29 State of the art................................................................................................................................................. 30 State of the art konklusion .............................................................................................................................. 32 Funktionelle specifikationer ............................................................................................................................ 32 Konklusion af Scope Plane ............................................................................................................................... 35 The Structure Plane ............................................................................................................................................. 36 Interaktions design .......................................................................................................................................... 36 Fejlhåndtering.................................................................................................................................................. 37 Strukturering af indhold .................................................................................................................................. 38 Organisering – Sitemap ................................................................................................................................... 38 Konklusion af Structure Plane ......................................................................................................................... 40 5. Design - Udviklingsfasen .................................................................................................................................. 41 The Skeleton Plane .............................................................................................................................................. 41 Godt web UI..................................................................................................................................................... 41 Mockups .......................................................................................................................................................... 42 Konklusion as Skeleton Plane .......................................................................................................................... 52 The Surface Plane ................................................................................................................................................ 53 Tidsvarende design .......................................................................................................................................... 53 B.J.Trading makeover ...................................................................................................................................... 53 Konklusion af Surface planet ........................................................................................................................... 55 6. Konklusion ....................................................................................................................................................... 56 Perspektivering .................................................................................................................................................... 57 Procesrefleksion .................................................................................................................................................. 57 7. Kildefortegnelse............................................................................................................................................... 58 8. Bilag ................................................................................................................................................................. 59 Planlægning ......................................................................................................................................................... 59 Brainstorm ........................................................................................................................................................... 60 Liste over figurer.................................................................................................................................................. 61 Side 5 af 61 1. Indledning Befolkningen foretager i dag næsten ”alt” på nettet; vi booker de billigste fly billetter, vi bestiller den mest passende tid ved frisøren, vi shopper på nettet. Shopper? Ja i den grad! En undersøgelse viser at der blev handlet 106 mio. gange på nettet, og omsat for 62,4 mia. kroner i 20131. Men er det nok at have en webshop, for at få del i denne omsætning? En webshop er som en fysisk butik, den skal kunne tiltrække køberne. Et eksempel kunne være en skoforretning, som ikke ser attraktiv ud. Hvis forretningen ser gammel og slidt ud, er der ikke så mange der vil gå ind i den, selv om der måske er 50-70% rabat på alt. Før vi går ind i en butik og betaler med vores hårdt optjente penge, vil vi være sikre på, at det er et troværdigt sted, vi handler. Troværdighed er for mange mennesker vigtigt, når der skal handles nettet. Men hvordan skabes troværdighed mellem firma og kunde? Hvad skal der til før forbrugeren får tillid til at lægge sine penge i butikkens kasse? Før en kunde føler sig helt tillidsfuld til at benytte en webshop, kan det være, at kunden først vil se webshoppen an. Dette er ikke altid nødvendigvis let, da det ikke er alle hjemmesider, der er lige til at gå i gang med. Det kan være, at kunden har svært ved at navigere rundt i menuerne, eller i det hele taget at navigere på siden. En kunde skal helst føle sig hjemme i en webshop, og skal let selv kunne navigere rundt, uden at man tages i armen, og guides aktivt igennem hele websitet. I sådan et tilfælde vil det være bedre at gøre lige som de gør i IKEA. Her har man valgt at sætte tydelige skilte op, og løbene fortæller kunderne, hvor de befinder sig. På denne måde kan kunderne gå på opdagelse, uden at stå tilbage med en større forvirring. Jeg har valgt, at projektet skal tage udgangspunkt i ét firma, for at have en konkret case der kan arbejdes med. Dette vil give mere relevans for projektet, da teorien i projektet kan bruges i praksis. Problemformulering ”Hvad er en navigeringsvenlig webshop, som har et tidssvarende udseende, der kan skabe tillid til forbrugeren? ” Hvad er godt web UI? Hvordan laves en god brugeroplevelse for forbrugere? Hvad er vigtigt når der handles på nettet? Hvad er et tidsvarende design? Projektets mål og afgrænsning For ikke at lave et generisk projekt, er der valgt at afgrænse projektet, så der kun fokuseres på ét firma. Ved at gøre dette, kan der fokuseres på en general case i stedet for en generisk løsning. Det firma der er valgt at fokusere på, er firmaet B.J. Trading EDB A/S. Firmaet har en fysisk forrentning, samt en webshop http://www.bj-trading.dk/. B.J. Trading sælger et bredt udvalg af brugs artikler, dog mest forbruger elektronik, alt fra computer hardware til brødristere. Firmaet lægger mest vægt på salg af computer hardware, da dette udgør største delen af sortimentet. Firmaet er grundlangt i 1997, og efter min mening afspejles dette også i hjemmesidens design. Det kan ikke ses, at hjemmesidens design er blevet opdateret, siden den første gang hjemmesiden gik live. 1 http://www.fdih.dk/media/1409880/dansk_e-handelsanalyse_light_2013.pdf Side 6 af 61 Firmaet B.J. Trading er valgt, da jeg har personlig interesse for at købe forbrugerelektronik, og computerhardware på nettet. Dette er jeg ikke ene om. Faktisk er forbrugerelektronik noget af det, som vi danskere køber mest af, når vi handler på nettet. Det viser en brugerundersøgelse af E-handel i norden 2014k2, som er udstedt af PostNord i 2014. Figur 1 Antal forbrugere i Norden, som købte forskellige varer på nettet i 2013 – side 9 I dette projekt, er det oplagt at arbejde med en webshop der forhandler forbrugerelektronik, i forhold til andre kategorier som film, tøj og kosmetik. Tøj er dét som danskere køber mest af, men det er ikke køb af tøj, jeg har interesse i. Så ved at vælge en webshop der sælger forbrugerelektronik, øger dette min motivation for at arbejde med dette projekt. I forhold til analyserne af B.J.Trading, er jeg i projektet begrænset til den information jeg selv kan erhverve mig, via den information der er på http://bj-trading.dk, http://datacvr.virk.dk/ og http://pricerunner.dk, og drage konklusioner ud fra disse. Dette er jeg nødsaget til, da B.J.Trading ikke har ønsket samarbejde, i forbindelse med bachelor projektet. Projektets formål og resultater Formålet for dette projekt er at bruge undersøgelser og teori, til at redegøre for, at lave et design til det valgte firma. Formålet er, at gøre hjemmesiden mere præsentabel og troværdig, og forhåbentlig skabe et mersalg for firmaet. Der vil også være mulighed for at sælge designet til firmaet. Dette vil kunne supplere godt til en studerendes SU. Resultatet vil være en High Fidelity mockup, lavet i Photoshop. Denne skal afspejle de undersøgelser, og den gennemgåede teori, som er beskrevet i denne rapport. Hvis der er overskud i slutningen af projektperioden, vil der stræbes efter, at lave mockupet til et dummy site, som der kan interageres med, og derved bedre vise min vision af, hvordan webshoppen kunne se ud. 2 Se bilag Side 7 af 61 2. Metode I dette afsnit vil jeg komme ind på, hvilke faser jeg kommer igennem i mit projekt. Jeg starter med udforskningsfasen, hvor jeg gør mig de første overordnede tanker om projektet. Efter denne fase går jeg i gang med analysefasen, hvor jeg tilegner mig den viden, der skal bruges i udviklingsfasen. I udviklingsfasen viser jeg, hvad det er, jeg konstruktivt kan bruge analyserne til. Udforskningsfasen I denne fase stilles der spørgsmål til, hvad der skal undersøges, og hvordan det undersøges. Projektet planlægges og tidsadministreres, for at sikre en kvalitativ fremgangsmåde, der skal sikre, at både projekt og produkt er klart før deadline. Planlægningen til projektet findes i bilag under planlægning. Der er lavet en lille spørgeskema undersøgelse, som er brugt til, at lave problemformuleringen, og som har hjulpet til med, at sætte fokus for projektet. Analysefasen I denne fase vil det valgte firma blive analyseret. Der skal laves en SWOT analyse på firmaet for at se, hvordan firmaet står i forhold til dets konkurrenter. Ud over dette, skal firmaets primære forbrugere findes. Dette gøres ved hjælp af Minervamodellen3. Til udviklingen af produktet, bruges i analysefasen, Jesse James Garrett’s model ”The Five Planes4” 3 første plan. The Five plane, er en model der bruges til behandling af ideer der skal realiseres. For eksempel en ide til et website. Udviklingsfasen Med alle data fra analysefasen, vil udviklingen af produktet begynde. Dette vil gøres i forbindelse med Jesse James Garrett’s 2 sidste plan, The skeleton Plane og The Surface Plane. Disse plan vil arbejdes med iterativt. Til at supplere Jesse James Garrett’s teorier, vil jeg bruge brugercentreret teori fra Steve Krug’s bog: ”Dont make me think second edition”, og Gestalt principperne5 til det visuelle design. Der vil til at starte med laves flowcharts. Herefter wireframes, som skal bruger testes. Efter test og evt. redesign, vil designet tages til sidste niveau, som vil være en High Fidelity mockup af konceptet. 3 http://www.studieportalen.dk/kompendier/afsaetning/minerva-modellen Model fra THE ELEMENTS OF USER EXPERIENCE [1] 5 http://www.smashingmagazine.com/2014/03/28/design-principles-visual-perception-and-the-principles-ofgestalt/ 4 Side 8 af 61 3. Udforskningsfasen Før konceptet til webshoppen skal laves, er der brug for noget data, som skal være fundamentet af projektet. Noget af det, der skal undersøges i forbindelse med konceptet af webshoppen er, hvorvidt design og intuitivt brug er vigtigt for forbrugerne? Hvis forbrugerne ikke er interesseret i dette, vil det være spild for firmaer, at investere store summer af penge i et design. For at finde ud af, om forbrugerne interesserer sig for designet, i en webshop, vil der udvikles et spørgeskema, som skal bruges til at vise, hvilket retning projektet skal tage. Projektets motivation Motivationen for dette projekt er, at finde ud af, hvordan man kan lave en bedre brugeroplevelse, når forbrugere benytter webshops. Dette vil være nyttigt for mig i mit professionelle arbejdsliv, efter min bachelor. Jeg er blevet ansat hos firmaet ITSecurity, som er beliggende i Aalborg. Mit kommende job består i, at jeg skal være en del af et team, der udvikler nye hjemmesider for eksisterende og nye kunder. Produktdefinition Produktet i dette projekt vil være et High Fidelity wireframe koncept tegning, af en intuitiv og æstetisk appellerende webshop. Konceptet skal laves i Photoshop, og skal repræsentere et fornyet design, til det valgte firma. Forundersøgelse - Spørgeskema For at komme i gang med dette projekt, er der lavet et kort spørgeskema. Dette skal hjælpe med at indikere, om det er vigtigt for brugerne af en webshop, denne tager sig pænt ud. Der var i alt 72 anonyme personer, der svarede på spørgeskemaet. Størstedelen som svarede, var i alderen 20 til 30 år. Side 9 af 61 HVAD ER DET VIGTIGSTE NÅR DU HANDLER PÅ NETTET? Troværdig Lave priser Entuitivitet 24% 45% 31% Figur 2 Diagram om hvad der er vigtigst når der handles på nettet Spørgeskemaet indikerer, at en vigtig faktor, når der handles på nettet, er troværdigheden af hjemmesiden. Næsten halvdelen af dem der svarede på spørgeskemaet mente, at troværdigheden på en webshop, er det der kan afgøre om de bliver på hjemmesiden eller ej. Dette kan ses i diagrammet ovenfor. Det der var næst vigtigste var priserne, hvilket ikke vil undre mange mennesker. Hvis forbrugeren kan købe et produkt billigere ét sted, frem for et andet, giver dette god mening, medmindre at det billige website ikke ser troværdigt nok ud. ER DET VIGTIGT AT EN HJEMMESIDE SER FLOT UD NÅR DU BESØGER DEN? Meget vigtigt vigtigt Ved ikke 6% 12% Mindre vigtigt 17% 65% Figur 3 Diagram af vigtigheden af en hjemmeside ser flot ud Et andet spørgsmål der blev stillet i spørgeskemaet var, om det er vigtigt at en webshop tager sig pænt ud. Dette var hele 82% enige i, at det var. Mange begrundede dette med, at en flot hjemmeside ser mere troværdig ud, end en hjemmeside der ikke er sammenhængende, og ikke er visuel appellerende. For at finde ud af hvilken type webshop der skal arbejdes med, blev der også spurgt om, hvad forbrugerne mest handlede på nettet. Spørgeskemaets svar vises i diagrammet nedenfor. Side 10 af 61 HVAD HANDLER DU PÅ NETTET Elektronik Tøj Billetter 6% Mad Hårde hvidevare bøger 4% 9% 30% 24% 27% Figur 4 Diagram af køb på nettet Diagrammet viser, at det der handles mest på nettet er tøj og elektronik. Min lille spørgeskemaundersøgelse understøttes af en større undersøgelse. PostNord, postvæsnet i Norge, har i 6 år i træk undersøgt og analyseret e-handel i det nordiske marked. Undersøgelsen bygger på interview fra januar 2014, hvor der er brugt i alt 6.068 respondenter fra Sverige, Norge, Danmark, og Finland6 6 E-handel i Norden 2014 – side 2 Side 11 af 61 Figur 5 Varer købt på nettet i Norden 2013 Rapporten, E-handel i norden 2014 bekræfter tidligere analyse, i forhold til hvad mennesker køber på nettet. Som der kan ses på figuren ovenfor viser denne, at det er tøj og elektronik som mennesker oftest køber, når der handles på nettet. Kontakt til B.J.Trading Der er taget kontakt til B.J.Trading, for at høre om der vil være interesse for at deltage i projektet, men dette har der fra deres side ikke været interesse for. Dette forhindre mig ikke i at bruge deres hjemmeside som case i projektet. Der vil bare ikke være mulighed for at henvende sig til dem for feedback eller information. Dette er ærgerligt, da det ville gøre projektet mere spændende at arbejde med, specielt hvis der kunne laves en reel case ud af projektet. Konklusion af Udforskningsfasen I udforskningsfasen blev det mere klart, angående hvilken indgangsvinkel der skulle bruges til at tage hul på selve projektet. Desværre valgte B.J.Trading, at de ikke ville være en del af projektet, så projektet bliver ikke til en reel case. Side 12 af 61 4. Analysefasen Når en bruger komme ind på en hjemmeside, så er det op til den individuelle person, at finde ud af hvordan hjemmesiden bruges. Der er ikke med sikkerhed andre mennesker i nærheden, der kan spørges til råd. Derfor er det vigtigt, når der skal laves en hjemmeside, at designet, er brugervenligt! Er en hjemmesiden ikke er dette, så er der en sandsynlighed for, at brugeren forlader sitet, da det tager for meget af brugeres tid at navigere rundt, og finde det, der ledes efter. Brugeren navigerer muligvis over på et konkurrerende website, og derved kan hjemmesiden allerede have mistet en kunde. Når der skal laves et brugercentreret design, er det vigtigt, at der tages højde for alle handlinger, som brugeren kan komme til at fortage sig. Ved at tage højde for alle handlingerne, kan man komme flere bruger centreret fejlhandlinger til livs. Det er ikke altid sandsynligt, at alle problemerne bliver løst til perfektion. Det kan være, at der ikke er økonomi eller tid til at rette disse. Ikke alt er perfekt, og det vil dette projekt heller ikke blive. Derfor er det vigtigt at prioritere de vigtigste nøgle elementer, som med størst sandsynlighed gør projektet succesfuld7. Surface • Sensorisk design Skeleton • Interface design • Navigations design • Informations design Structure • Interaktions design • Interaktions design I denne fase startes der på udviklingen af det nye design til B.J.Trading. Til udarbejdningen af designet bruges • Funktionelle modellen ”The Five Planes” De fem plan. Denne model specifikationer Scope bruges til at behandle en ide til fx et website, og tage den • Krav til indhold plan for plan, indtil man har et komplet design af det ønskede produkt. Til højre er modellen, The five planes. Denne består af 5 plan, hvor der startes fra bunden, og • Brugerbehov Strategy • Produkt mål arbejdes op til toppen. Hvert plan er afhængelig af det nedenstående plan, og på grund af dette, er det vigtigt, at hvert plan laves rigtigt fra starten, ellers skal der bruges overtid på kompensere og løse eventuelle mangler og Figur 6 The five plane model fejl. 7 [2] kapitel 2 Side 13 af 61 The Strategy Plane Dette er planet, hvor det hele starter. Det er derfor vigtigt, at der startes rigtigt ud, for det der eventuelt går galt nu, kommer til at påvirke resten af planerne. Ifølge Jesse James Garrett, er der rigtig mange hjemmesider, der fejler, før de første linje koder er skrevet. Dette er på grund af, at der ikke er nogen der har stillet spørgsmålene: Hvad vil vi gerne have ud af dette projekt? Hvad vil vores brugere få ud af dette? Følgende er hypotetiske svar på ovenstående spørgsmål. Dette er gjort på B.J.Tradings vegne, for at have noget konkret at gå ud fra i de følgende plan. Hvad vil vi gerne have ud af dette projekt? Vi vil gerne have, at det bliver lettere at tilføje og fjerne produkter på vores hjemmeside, og gøre hjemmesiden mere dynamisk samt gøre hjemmesiden mere SEO venlig. Hvad vil vores brugere få ud af dette? Vores brugere skal have en bedre oplevelse, når de besøger vores hjemmeside, og opleve en mere overskuelig menu struktur. Hjemmesiden skal også være responsiv, så hjemmesiden lettere kan bruges på mobile enheder som smartphones og tablets. Ved at svare på ovenstående spørgsmål, er fundamentet for projektets formål, og brugernes behov lagt. Det er vigtigt at svare på disse spørgsmål så specifikt som muligt, da dette gør det lettere at se, hvad der skal opfyldes, for at imødekomme målene. Ved at gøre dette, kan projektet gøres mere eksplicit. Firmaets identitet Når der skal laves en hjemmeside til et firme, er det vigtigt at hjemmesiden afspejler firmaets identitet. Når vi tænker på et firma, et mærke, et såkaldt brand, så tænker vi for eksempel på Google, med dets farver eller Nikes flueben. Når vi tænker på et brand, så tænker vi mest på det visuelle, og ikke det grundlæggende, der ligger bagved. Den visuelle identitet for et firma er meget vigtig, men et brand er ikke noget værd, hvis det ikke symbolisere firmaets grundværdier. Hvordan mennesker ser et brand, kan være noget der opstår tilfældigt, men det kan også være noget man aktivt går ind og reklamere for. For at finde B.J.Tradings identitet, skal der først erhverves information omkring firmaet. Side 14 af 61 Hvem er firmaet B.J. TRADING EDB A/S Er en detailhandel der er beliggende i byen Thorsø i Favrskov kommune. De sælger computere, kontor artikler og software. Selskabet sælger mest IT-udstyr, som computere og mange komponenter relateret til dette8. Firmaet er en lille virksomhed9, som har cirka 17 ansatte. De har eksisteret siden 1997 og er ejet af Johannes Jessen. I 2007 blev firmaet omdannet til et aktieselskab, men er stadig 100% ejet af Johannes Jessen10. B.J.Trading sælger til virksomheder, til det det offentlige samt privat personer. Firmaet omsætter for 200 millioner årligt. Ved at se på hjemmesiden kan man se, at firmaet har et bredt udvalg af produkter. Ved at bruge Small SEO Tools Website links count checker11, som bruges til at se, hvor mange links der er på en given hjemmeside, hjælper denne hurtigt med, at give et overblik over alle de links, der er i navigations menuen. Dette resulterer i over 200 forskellige produktkategorier. Ved at bruge værktøjet PowerMapper fra http://powermapper.com som analysere hjemmesider, kan man i gratisversionen af programmet se, at der er langt over 1000 produktet. Da gratisversionen er brugt, tæller programmet kun op til 1000 sider, hvilket ikke giver et indblik i det totale antal sider. Dog viser dette stadigt at B.J.Trading har et stort produktudvalg. For at finde ud af hvor firmaet står på markedet, laves der en SWOT analyse, som er beskrevet nedenfor. 8 http://datacvr.virk.dk/data/visenhed?enhedstype=virksomhed&id=30689860&soeg=30689860 B.J.Trading Årsrapport 2012-2013: http://cvr.dk/Site/Forms/Commerce/DownloadFile.aspx?vd=1&cvrnr=30689860®nr=A%2fS404815+&start=2 0130101000000&slut=20131231000000&of=R++&type=R Guide for størrelse af virksomhed: http://ec.europa.eu/enterprise/policies/sme/files/sme_definition/sme_user_guide_da.pdf side 14 10 http://www.bj-trading.dk/bjshop/default.asp?side=profil.asp 11 http://smallseotools.com/website-links-count-checker/ 9 Side 15 af 61 SWOT SWOT er en forkortelse af Strenghts, Weaknesses, Opportunities, Threats. På dansk betyder dette styrker, svagheder, muligheder og trusler. Disse deles op i 2 kategorier: intern og ekstern. Det som analysen gør, er at gå ind og se på et firmas kerneydelser og kernekompetencer, for at se, hvor firmaet har dets stærke sider. Men også for at se firmaets svage sider, da en svaghed i sig selv kan være, ikke at kunne se sine egne mangler. Formålet ved en SWOT-analyse er at finde firmaets styrker og svagheder. Dette kan bruges senere i projektforløbet, til at determinere de vigtige aspekter af firmaet, der skal afspejles i hjemmesiden nye design. Ud over dette, kan analysen også bruges til at finde ud af, hvordan firmaet står, i forhold til de rivaliserende virksomheder12. Styrker Stort produkt sortiment. Gode priser i forhold til andre virksomheder13. Sælger til virksomheder, det offentlige, og private. Muligheder Opdatering af design. Bliv aktiv på de sociale medier. Bliv et skandinavisk eller internationalt firma. Svagheder Uoverskueligt hjemmeside design. Ikke aktiv på sociale medier14. Trusler Priskonkurrence på nettet. Konkurrenternes webshops er mere brugervenlige. Ikke de bedste anmeldelser på TrustPilot15. SWOT analysen viser, at B.J.Trading er et solidt firma med en god økonomi. Det er en virksomhed, som sælger deres produkter til gode markedspriser, og som har et stort, varieret varesortiment. Det store varesortiment er dog også et problem for virksomheden, da varesortimentet har så mange kategorier og underkategorier, at hjemmesidens menu struktur ikke er brugervenlig. Firmaet skriver på hjemmesiden at ”Det er B.J.Trading's mål at sælge varen til en fornuftig pris og sørge for en så kort leveringstid som muligt, samt at yde kunderne den nødvendige service 11. ” Med at yde den nødvendige service, er en blandet følelse for kunderne. Google anmeldelser giver firmaet 4.5 ud af 5 stjerner16 baseret på 12 anmeldelser. Dette er ikke repræsentativt for firmaet, når der sammenlignes med TrustPilot’s 735 anmeldelser13, hvor firmaet der får en samlet score på 6 ud af 10 stjerner. For de større webshops der sælger elektronik på nettet, er der altid en benhård kamp for at få priserne banket lavere end konkurrentens. Dette kan ses på http://edbpriser.dk, hvor man ved at sammenligne priserne på diverse produkter, kan se den lille prisforskel, der findes imellem de forskellige forretninger. 12 SWOT analyse: https://startvaekst.virk.dk/idefasen/forretningside/swot-analyse-i-idefasen Prissammenligning på forskellige produkter på: http://www.edbpriser.dk/ 14 B.J.Trading’s facebook side: https://www.facebook.com/pages/BJ-Trading-EDB-AS/105673892802636?fref=ts 15 B.J.Trading’s anmeldelser på TrustPilot: https://www.trustpilot.dk/review/www.bj-trading.dk 16 Google anmeldelser af B.J.Trading: https://www.google.dk/webhp?sourceid=chromeinstant&ion=1&espv=2&ie=UTF-8#safe=off&q=bj-trading&lrd=0x464c0917c0f8fb59:0x7dc4e74400acfb8a,1 13 Side 16 af 61 B.J.Trading’s hjemmeside, er desværre ikke så funktionel og navigeringsvenlig, som konkurrenternes. Dette kan skræmme nye kunder væk, hvis de ikke kan få overblik over hjemmesidens indhold. Alt dette betyder ikke, at det går dårligt for firmaet. Der er bare en mulighed for, at firmaet kan blive mere konkurrencedygtig. Dette kunne gøres ved at modernisere hjemmesiden, lave navigationen bedre og gøre den mobilvenlig med responsivt design. Ud over dette kunne firmaet også blive mere aktivt på de sociale medier, så som på facebook og twitter. Her vil de kunne yde support, til en stor den af deres kunder, og have mulighed for at reklamere for sig selv og deres produkter. En større satsning som firmaet kunne gøre, ville være at udvide deres webshop til andre lande, eventuelt til Skandinavien. På den møde kommer de ud på et større marked. Dog kræver dette meget forberedelse, fx i forhold til de forskellige love og betingelser, i de forskellige lande. Succeskriterier Med den erhvervede information omkring firmaet, skal succeskriterierne for redesignet af hjemmesiden fastlægges. Ved at sætte disse kriterier, kan man lettere måle på, om redesignet er en succes eller en fiasko. Et kriterie/ mål kan være, at man vil have en minimum stigning af besøgende på 15% inden for den første måned. Måske vil firmaet have, at folk bliver længere på siderne, og læser den information der er på siden. Det kan også være det direkte modsatte, hvor det ønskes, at brugerne finder det der søges efter hurtigt. Disse kriterier er lette at måle på, ved hjælp af det gratis værktøj Google Analytics17. Denne webservice fra google gør det let, at gå ind og måle webtrafikken af ens hjemmeside. Man kan måle, hvor mange tilbagevendende bruger der er, og også hvor lang tid brugerne bruger på de forskellige sider, og hvordan der navigeres rundt. 17 http://www.google.com/analytics/ Side 17 af 61 Hvilke succeskriterier skal B.J.Tradings redesign opfylde for at være succesfuldt? Dette er hypotetiske succeskriterier lavet på vegne af B.J.Trading. En stigning af besøgende brugere på 10% En stigning af besøgende brugere på smartphones og tablets på 40% En stigning af sidevisninger på 18% En stigning i transaktioner fra privat personer på 20% En reduktion af sessionsvarigheden på 12% Disse succeskriterier skal gerne være opfyldt, inden for den første måned efter lanceringen af den redesignede hjemmeside. Grunden til den store forøgelse i brug af smartphones og tablets, er på grund af, at B.J.Tradings nuværende hjemmeside ikke er responsiv. Ved at tage højde for dette, bliver det lettere for brugerne på ”farten”, at bruge websitet. De skal derfor ikke vente, til de sidder med en bærbar eller stationær computer, for at kunne udnytte siden bedst muligt. Dette illustreres med billedet vist til højre. Samtidigt vil brugerne også have lettere mulighed for at betale online med et responsivt design. Selv om disse succeskriterier er sat, er der mange faktorer der kan spille ind, og forhindre kriterierne i at blive opfyldt. Dette kan for Figur 7 Grafen viser en stigning, efter lanceringen af redesign. eksempel være, at et konkurrerende firma har en kampagne i gang, hvor der reklameres for produkter, som er i begge firmaers sortiment. Dette kan resultere i, at forbrugerne bliver lokket til konkurrentens hjemmeside, på grund af en måske bedre pris, service eller andet. Forbrugernes behov Når der skal designes, er det generelt vigtigt at huske, at det er forbrugeren der er i centrum, og ikke én selv. Hvis en hjemmeside ikke bliver designet efter forbrugeren, er der risiko for at redesignet vil ikke opnå de ønskede mål, som blev sat tidligere. Når der designes for andre mennesker, er det godt at vide hvem målgruppen er, og hvilke behov de har. Derfor er det en god ide at undersøge, hvilken målgruppe man har med at gøre, så man bedre kan skræddersy løsningen til hovedparten af de brugere, der kommer til at anvende hjemmesiden. Det er ikke altid let at finde ud af, hvem den præcise målgruppe er. Det er en fordel at specificere og indsnævre målgruppen så meget som det kan lade sig gøre, med de remedier og den tid som man har til rådighed. For at finde målgruppen til B.J.Trading, vil Minerva modellen blive brugt, for at finde ud af hvilket segment hjemmesiden skal rette sig imod. Dette vil blive beskrevet i næste afsnit. Side 18 af 61 Bruger segmentering Ved at kende den brugertype der er anvender hjemmesiden, kan denne person udspørges for kvalitativ information, angående brug af hjemmesiden og vægtning af forskellige prioriteter. Dette gøres ved at tage befolkningen og opdele dem i forskellige kategorier, eller nærmere segmenter. Hvordan dette foregår, ses på billedet til højre, hvor man har en befolkningsgruppe. I denne gruppe, vil der være nogle mennesker, der deler de samme nøgleværdier. Når man ved, hvilke nøgleværdier en given gruppe ligger vægt på, kan denne gruppe som projektet skal rettes imod, tages til udspørgning for kvalitativ information om, hvordan projektet bedst muligt kan løses, for at tilgodese brugerens behov. Målgruppen der sigtes efter til B.J.Trading, er personer der bruger meget tid på internettet, hvor det er en stor del af deres hverdag, og måske også deres arbejde. Der sigtes efter privatpersoner, der mere eller mindre er entusiaster, hvad angår computere og lignende. Det er personer, der ved hvad de leder efter, og som går meget op i specifikationerne af produktet frem for designet. For et finde denne målgruppe, er der flere forskellige segmenterings modeller som Minerva modellen, Gallups kompas og Mosaic familietræet, som alle tre tager den danske befolkning, og opdeler disse i forskellige forbrugertyper. Minerva modellen18 Grunden til valget af Minerva modellen, frem for de andre modeller er, at Minerva modellen bruger det færreste antal opdelinger. Derfor er det den simpleste af modellerne at anvende. Dette er dog også et kompromis, da opdelingen af segmenterne er så grov, at man kan kalde dem generaliserende. B.J.Trading sælger til virksomheder, det offentlige og til private. For at gøre det lettere at segmentere disse grupper, vælges der kun at fokusere på privatpersonerne. Grunden til dette valg er, at det bliver for omfattende, hvis der skal tages højde for de 3 overordnede grupper. Minerva modellen består af 5 segmenter, som er kort beskrevet nedenfor. Det blå segment Disse er de materialistiske og moderne. 25 % af befolkningen består af denne gruppe. Disse mennesker er højtuddannede og tjener flere penge end den gennemsnitlige dansker. De er også større forbrugerne af mere eksklusive varer, som Gucci tasker og andre dyre mærkevarer. Det grønne segment De idealistiske og moderne udgør også 25 % af den danske befolkning. Denne befolkningsgruppe er også højtuddannede, men mere miljøbevidste en det blå segment. Ud over dette, er det grønne segment også mere kulturelt anlagt, hvor disse går mere op i kultur. De der hører til det grønne segment, er generelt gladere for andre mennesker, og har stærkere solidaritet over for disse. Det rosa segment De idealistiske og traditionelle, som er 20 % af den danske befolkning, er i større træk den ældre del af befolkningen. De har ikke så stor indkomst som de to ovenstående segmenter. Dette har de ikke, da de ikke er lige så godt uddannet, som de ovenstående. Derfor går de mere op i familie, traditioner og deres ugentlige rutiner. 18 [4] Side 19 af 61 Det violette segment De traditionelle og materialistiske, er rigtige ”gør det selv” mennesker, som godt kan lide at arbejde i haven eller have deres egne mindre eller stører byggeprojekter. Som det rosa segment består de også af 20 %. Disse mennesker også traditionelle, men går ikke lige så meget op i tradition som det rosa. Ud over dette har de også et større forbrug, og vil nogle gange stræbe efter en mere moderne tilværelse. Dette segment består mest af yngre mænd, der endnu ikke har fundet ud af, hvad det er de vil med deres liv. De har ikke fået en videregående uddannelse, Disse personer har en mellem indkomst, og derfor kan de forbruge mere end det rosa segment. Dog har de ikke lige så mange penge som det højtuddannede blå og grønne segment. Det grå segment Det midterste segment består kun af 10 % af befolkningen, og er den gruppe, der endnu ikke er afklaret og opdelt. Alle i denne gruppe kan potentielt bevæge sig over til én af de 4 andre segmenter, men dette kræver, at de ved, hvad de vil med deres liv, og hvor de står i forhold til samfundet. Indtil da forbliver de i det grå segment. Figur 8 Minerva modellen, med de 5 segmenter Side 20 af 61 Hvem er målgruppen til B.J.Trading Resultatet af denne model vil ikke give konkret data, men vil derimod pege i retningen af de forbrugere, der vil bruge B.J.Tradings hjemmeside. Dette er på grund af, at modellen deler befolkningen så groft op, at man kan kalde opdelingerne for stereotyper. For at finde frem til det segment der vil være B.J.Tradings primære forbrugere, vil jeg, ved brug af udelukkelsesmetoden19, reducere antallet af segmenter, ved at opstille et hypotetisk købs kriterie ”Hvilken brugergruppe er forbrugere af elektronik, som for eksempel grafikkort, RAM, CPU’er? ” Det grå segment er ikke til at måle på, og kan derfor ikke være den primære gruppe, da alle i segmentet kan have forskellige meninger. Derfor er dette segment udelukket. Jetsætteren i Armani jakkesættet, og den drevne business kvinde med Gucci tasken, fra det blå segment, vil ikke være interesseret i at købe den nyeste og smarteste CPU, eller det største grafikkort. Dette vil de ikke, da de hver især sidder med deres egne eksklusive Macbook pro. De er ikke interesset i at installere nyt Hardware, da det er en Mac, der er købt på grund af enkelheden, og til en rimelig høj den pris. Største delen af det grønne segment vil sikkert ikke bruge de tusinde af kroner det koster, at erhverve sig en Mac. Dog har de heller ikke den store interesse i at skulle bygge en computer op fra bunden. Men at tage ind i Elgiganten, eller at købe en samlet computer på nettet, vil ikke være utænkeligt. De kender til brug af Windows fra deres arbejdet, og når pakken fra GLS kommer, er det bare ”plugin og start” – og så kører computeren. Det samme vil stort set også være gældende for det rose segment, bortset fra, at der ikke er lige så stor en del af de ældre mennesker, der oplever det bekvemt, at handle på nettet. De vil eventuet tage i Elgiganten, Fona, eller Expert og købe deres produkt. Med det violette segment er det dog anderledes. Det er de unge mennesker, der endnu ikke ved, hvad de vil. De er ikke færdiguddannet, og har muligvis ikke fuldtidsarbejde. De kan godt lide ”gøre det selv”, og de ved, at de ofte kan spare penge, i forhold til at købe det samlede produkt. Som en del af deres hobby, vil de søge efter det billigste og bedste produkt, rundt omkring på flere forskellige webshops. Derfor anser jeg det violette segment som hovedforbrugergruppen af B.J.Tradings webshop, og derfor er det denne gruppe der skal fokuseres på, i forhold til hjemmesidens struktur, indhold og præsentation af produkter. 19 http://ordnet.dk/ddo/ordbog?query=udelukkelsesmetode Side 21 af 61 Persona For at få en bedre forståelse af, hvem hjemmesiden skal laves til, skal der laves nogle personas. En persona er en fiktiv person, som skal repræsentere et helt segment eller gruppe, og er baseret på den data vi har opnået indtil videre. I dette tilfælde skal vores personas repræsentere den generelle målgruppe (det violette segment) for webshoppen. Persona 1 Navn: Kasper Nielsen Alder: 19 år Beskæftigelse: Studerende på HTX, studieretning kommunikation, it, engelsk Status: Bor ikke hjemme, single Indkomst: Udeboende SU og medarbejder ved kassen i Netto. 9.000 kr. pr måned ”Jeg går meget op i at søge efter nyt hardware til min computer, så produktinformationen skal helst være så fuldendt som muligt. ” Kasper køber det billigste han kan finde, hvis hjemmesiden er pålidelig. Ofte kigger han efter produkter på hans smartphone, når han er ”på farten”. Teknisk snilde: Er meget fortrolig med alle nye teknologier, og ikke bange for at prøve noget nyt. Har dog krav til, at dette fungere logisk. Brug af internettet: Bruger nettet til næsten alt, både i skole og i fritid. Er på nettet i mere en 38 timer om ugen. Favoritsider: www.komplett.dk, www.edbpriser.dk, www.reddit.com Persona 2 Navn: Thomas Andersen Alder: 21 år Beskæftigelse: Elektrikerlærling Status: Bor hjemme, single Indkomst: Lærlingeløn 7.200 kr. ”Jeg kan godt lide ”gør det selv” projekter, og når jeg skal finde nye dele til min computer, skal det være let at finde det jeg skal bruge ” Thomas kan godt lide at arbejde med elektronik, men er ikke en super bruger. Diverse fagtermer siger ham ikke så meget. Teknisk snilde: Har en over middel forståelse af generel teknologi, men er ikke stærk i alle computer fagtermer. Brug af internettet: Bruger nettet en god del af fritiden og i arbejdspauser. Er på nettet 18 timer om ugen. Favoritsider: www.bt.dk, www.komplett.dk, www.9gag.com Disse to personas, er de mennesker der repræsentere forbrugerne af B.J.Tradings hjemmeside, og det er dem der skal tages højde for, når hjemmeside designet skal laves. Side 22 af 61 Konklusion af Strategy Plane B.J.Tradings brugere er ”gør det selv” mennesker, som høre til det violette segment i Minerva modellen. Denne gruppe vil være sikker på, at de får lige akkurat det, de skal bruge til deres projekt. De går meget op i specifikationerne af de produkter de køber. Denne brugergruppe kunne være blevet mere indsnævret, ved brug af for eksempel Gallups kompasset. Dette har jeg vurderet ikke nødvendigt, da B.J.Trading har et bredt sortiment, og derfor også en bred brugergruppe. Side 23 af 61 The Scope Plane Funktionelle specifikationer og krav til indholdet - dette er det overordnede, der skal gennemgås i dette plan. Beslutningerne som tages, er baseret på den viden der blev erhvervet i strategi planet. Det er vigtigt at vide, hvad der skal laves og endnu vigtigere, hvad der ikke skal laves. ”Hvad er det, der skal laves? ” Dette er det spørgsmål der skal specificeres. Der lægges vægt på 2 hovedemner, funktionalitet og indhold. Dette er det basale for en hjemmeside. Til indholds delen vil det være fornuftigt, at administrere dette ved hjælp af et content management system eller forkortet CMS. Disse findes der flere hundrede af. CMS’er kan være store og komplicerede og kan koste en formue. De kan også være gratis og stadig levere den nødvendige funktionalitet. Hvis ingen af de allerede eksisterende CMS’er opfylder de behov der er, kan et CMS også laves fra bunden og skræddersyes til brugers præcise behov. Uanset hvilket CMS der vælges, skal det stadig tilpasses, for at kunne opfylde behov omkring funktionalitet, brugervenlighed og design. Når kravene til hjemmesiden skal opstilles, er det sikkert, at det firma man laver hjemmesiden for, har en masse gode ideer til, hvad der skal være på siden og hvordan det skal fungere. Det er godt, at de har en ide om hvad det er de vil have. Det er en god ide altid at inddrage målgruppen, for det er dem der skal bruge hjemmesiden. Målgruppen har sikkert deres eget personlige input til, hvad der de føler er vigtigt på hjemmesiden. Udspørgning af målgruppen Ved resultatet fra Minerva modellen, blev målgruppen til B.J.Trading fundet. Til at hjælpe ved at opstille krav til redesignet af hjemmesiden, er 5 personer fra målgruppe blevet spurgt om, hvad de mener er vigtige kriterier for en succesfuld webshop, som de selv ville bruge. Personerne fra målgruppen har valgt at forblive anonyme, og bliver derfor tiltalt som person 1, 2, 3…. Person 1 Det eneste jeg synes er vigtigt når der handles på internettet er, at hjemmesiden er e-mærket20. Ellers ved jeg ikke om hjemmesiden er sikker, og jeg har derfor ikke lyst til at bruge mine penge der. Person 2 Det skal være nemt og overskueligt. Under produkterne skal man let kunne finde en detaljeret specifikations liste. Ud over dette, skal det også være tydeligt, om der skal betales fragt på produkterne eller om det er inkluderet. Min fortrukne hjemmeside at handle på er www.proshop.dk 20 E-mærket sikre at der handles sikkert på den givne side: https://www.emaerket.dk/ Side 24 af 61 Person 3 Først og fremmest skal hjemmesiden være nem at navigere rundt på. Hvis det tager for lang tid at finde de informationer jeg leder efter, så går jeg videre til en anden hjemmeside. Hvis jeg så ender med at vil købe noget, skal det helst også være hurtigt og nemt at gøre dette. Derudover har jeg det også bedst med hjemmesider, som har mulighed for at have en bruger, hvor man kan holde øje med, hvad man har bestilt og hvad status er på det man har bestilt. Prisen må selvfølgelig også godt være fornuftig i forhold til andre hjemmesider. Langt de fleste hjemmesider jeg har købt fra, har været i orden. Gode sider kunne være sådan noget som www.dustinhome.dk eller www.mm-vision.dk. En mindre god hjemmeside kunne være www.cinemagic.dk, da der her ikke er mulighed for at lave en bruger og følge det man har bestilt. Jeg kan se, at de har fået et stort make-over siden sidst jeg var derinde, så er ikke helt sikker på om det stadig er et problem. Person 4 Det første jeg lægger mærke til, når jeg går ind på en webshop er, om den er overskuelig. Ligner den noget som der ikke er lagt noget arbejde i, er jeg stort set på vej ud igen. Derefter skal det være nemt at finde det som man søger efter, deraf overskueligt, og siden skal helst ikke være i farver, som man bliver træt af at kigge på, over en længere periode. Selvfølgelig skal den være sikker at bruge! Person 5 De skal være e-mærkede, så jeg ved at jeg handler sikkert, og så skal de gerne have gode anmeldelser på www.trustpilot.dk. Længere leveringstid er også okay, så længe at jeg har den bedste pris. Konklusion af udspørgning Som ovenstående svar antyder, er det meget vigtigt for målgruppen at, at hjemmesiden er overskuelig og brugervenlig. Det vil derfor være optimalt at finde ud af, hvordan den bedste brugervenlighed opnås i forhold til overskuelighed og navigering. Dette skal bruges under Wireframe udviklingen i plan nummer 4, Skeleton planet. Det er også vigtigt for målgruppen, at de hjemmesider de handler på er e-mærket. Så ved de, at hjemmesiden de handler på er sikker, og det er derfor et mindre problem at bruge penge der, hvis priserne er attraktive nok. Side 25 af 61 Brugerscenarie Hvis ikke der er mulighed for at inddrage målgruppen til en interaktions test, så kan man med de personaer, der blev oprettet i forrige plan, lave bruger senarier. Et bruger senarie er et simpelt narrativ, der bruges til at forklare en brugerhandling. Dette gøres ved sætte sig i personaens sted, og fuldføre en handling, som var man denne persona. Brugerscenarie – Find et nyt grafikkort til computeren Elektrikerlærlingen Thomas vil gerne købe et nyt grafikkort til hans computer, da han ikke mener, at han kan spille sine spil med den optimale grafik og ydeevne. Siden han bor hjemme og ikke betaler husleje, har han sparet en masse penge sammen, - så han kan købe et af de dyre grafikkort. Han går ind på webshoppen www.bjtrading.dk, da en ven har anbefalet denne side, på grund af de lave priser. Figur 9 Screenshot af forsiden på bj-trading.dk Inde på hjemmesiden ser han en hjemmeside som ser gammel ud, og han forstår ikke opdelingen af de forskellige segmenter. Han kan se ugens tilbud, super tilbud og tilbud. Disse bliver der lagt meget mærke til, da der sammen med teksten er store billeder. Side 26 af 61 Dette er ikke noget han kan bruge, da det ikke er et grafikkort. Han leder efter menuen med kategorier, og ser en liste med ikke mindre end 20 kategorier, hvor 16 af dem har underkategorier. Thomas klikker på kategorien ”Hardware”, hvor denne udvider sig, og viser mere end 50 underkategorier, hvor nogle af underkategorierne har underkategorier. Thomas synes at det er meget ustruktureret, men finder endelig kategorien ”Grafikkort”. Han klikker på kategorien. Figur 10 Screenshot af menuen Under kategorien ”Grafikkort”, bliver han mødt af et udvalg af små produktbilleder og meget ustruktureret information, der giver en klaustrofobisk fornemmelse. Desuden er der 16 sider med produkter at vælge imellem, så dette hjælper ikke med til, at gøre det lettere at browse. Figur 11 Screenshot af grafikkort Side 27 af 61 Thomas føler ikke, at han har overblikket over sidevisningen, og han prøver at specificere det, han søger efter han ved at han vil have et Nvidia kort. Figur 12 Screenshot af chipset menu Her bliver han igen overvældet er alt for meget information, som han ikke kan forholde sig til. Han husker dog at hans ven sagde noget med GTX 900, og et eller andet. Han finder i menuen én, der hedder Nvidia GeForce GTX 970, og kikker på denne. Her bliver sidens produkter reduceret til 12, men Thomas kan ikke differentiere produkterne fra hinanden, på grund af den viste information. Derfor vælger det billigste produkt som han kan finde, og som også er på lager. Inde på selve produktsiden bliver Thomas igen bombarderet med information. Der er meget lidt plads, hvilket gør det stort set umuligt for ham at skabe et overblik. Han vælger dog at købe produktet, som bliver lagt i webshop kurven, som først bliver vist, når der er et produkt der i. Thomas går ind på kurven, og vælger at fortsætte til køb af produktet. Herfra skal han ind på ikke mindre en 9 forskellige sider, før han bliver taget til en ekstern side, hvor han kan betale. Han er glad for at han fandt et godt og billigt grafikkort, men han er ikke sikker på at han vil bruge B.J.Trading mere, da det er en krævende proces, at finde det han leder efter. Selv hvis man bruger produktsøgningen, får man ikke leveret den information man skal bruge, da der ikke er vist nogen pris til de produkter der kommer frem af søgningen. Side 28 af 61 Brugerscenarie konklusion Selv for unge mennesker der bruger nettet meget, kan denne hjemmeside virker overrumplende og ustruktureret. Informationen på hjemmeside er på nogle steder for mangelfuld eller opsat på en ustruktureret måde, hvor for meget information bliver vist på ganske lidt plads. Thumbnails21 af produkterne er for små, da man ikke kan differentiere forskellige billeder fra hinanden. Til sidst, hvis det ønskede produkt findes og ønskes købt, så er købsprocessen alt for lang. 21 Thumbnail er et mindre billede af et større billede. Side 29 af 61 State of the art En anden analysemetode der også kan bruges, til at finde krav til redesignet af hjemmesiden, er at lave en State of the art analyse. Dette gøres ved at se på hjemmesider, som er bedst på deres område. En af disse hjemmesider er www.Komplett.dk Denne hjemmeside sælger mange af de samme produkter som B.J.Trading. Derfor er der også stor sandsynlighed for, at begge firmaer deler den samme målgruppe. Derfor kan det være en god ide at analysere denne konkurrent. Komplett Det første indblik man får når man kommer ind på siden, er et stilrent og overskueligt design, der er sat op med gode store billeder. Menulinjen viser overskueligt de forskellige kategorier, og til venstre er der en mere detaljeret menu til superbrugeren, der ofte bruger hjemmesiden. Figur 13 Komplett's forside Side 30 af 61 De forskellige ikoner på hjemmesiden er genkendelige, og er lette at differentiere fra hinanden. Information omkring fragt, kundeservice og kontaktinformation er også let tilgængelig. Produkterne har gode thumbnails med tilhørende produktbeskrivelse og tydelig priser. Figur 14 Screenshot af produktoversgt Under selve produkterne, er den fulde specifikations liste kun et enkelt faneklik væk. Derved kan superbrugeren få opfyldt kravet omkring avancerede specifikationer. Specifikationerne som er angivet i listeformat, og er delt op i forskellige kategorier, som giver et stort overblik over produktets indhold og funktioner. Figur 15 Screenshot af specifikationer til produkt på Komplett Side 31 af 61 Komplett.dk har også en mobil side, til brugeren ”på farten”. Dog bliver brugeren ikke omdirigeret til denne side automatisk, og den virker ikke på alle telefon modeller. Mobilversionen er en skrabet version af standart sitet, men giver stadig muligheden for at browse efter produkter. Produkterne er stadig tydelige og specifikations listen er stadig komplet, dog uden anbefalede produkter m.m. Figur 16 Screenshot af det mobile site fra Komplett State of the art konklusion På hjemmesiden er der lagt stor vægt på, at produkterne er det centrale. Dette er gjort ved at have gode produktbilleder i god kvalitet, der viser produktet tydeligt, med klar indikering af produktnavn, beskrivelse og ikke mindst pris. Under selve produktet, er der langt stor vægt på at organisere alt information, så dette ikke virker kludret og kompakt. Menu strukturen er der også lagt stor vægt på. Hver produktkategori er tydeligt markeret og underkategorierne er organiseret alfabetisk. Dette hjælper med overskueligheden for brugeren og superbrugeren. Funktionelle specifikationer Ulempen er, at disse specs ikke reflektere det aktuelle design Nogle ting ændres under implementeringen pga. teknologi ændringer, eller noget ikke virker Fokuser på de positive specs Og vær specifik med specifikationerne Ved at have fundet ud af hvad målgruppen søger i en webshop, er det lettere at opsætte de funktionelle krav til hjemmesiden. Der er dog ulemper ved disse specifikationer, og det er, at de ikke kommer til at reflektere sitet. Dette betyder ikke, at det er en dårlig ide at have disse. Tvært imod er det godt at skrive ned i detaljer, hvad det er, løsningen skulle kunne. Ved at skrive disse krav ned som specifikationer, har man en guideline over hjemmesidens funktioner. Side 32 af 61 Når disse specifikationer skal laves, er det vigtigt at skrive positivt om specifikationerne og fokusere på hvad hjemmesiden skal kunne, i stedet for at skrive om, hvad den ikke skal kunne. Specifikationerne skal holdes simple, men må ikke være mangelfulde, da der ikke må herske tvivl om hvordan en specifikation skal udføres. Specifikationer For bedre at give overblik over specifikationerne, vil disse blive delt op i underkategorier. Performance Websitet skal kunne have minimum 1000 brugere online på samme tid, uden at det går ud over den gennerelle ydelse. Produktsiderne skal caches i 30 dage men opdateres, hvis der laves en ændring. Indholdet skal gZippes. Kopi af HTML, CSS, JS, som laves minified, og bruges som standart. Hjemmesiden Produktkategorier skal være i en venstrestillet menu. o Kategorier skal være highlightet i forhold til underkategorier. Information, support link m.m. skal være i en topstillet menu. Breadcrumbs til hjælp af side navigering. Sitet skal være responsive ned mobil bredde på 320px Login skal være en loginboks Billeder Billeder skal gemmes som ”safe to web” igennem Photoshop. Produkt billeder skal have størrelsen 250x150px. o Når muse markøren bevæges over billedet vises klikke markøren. Når der klikkes popper et billede op i størrelsen 900xauto px. Produkt thumbnails skal have størrelsen 150x110px. Produkt mini thumbnails skal have størrelsen 50x40px. Shop Kurven skal være tilgængelig på alle sider. Betaling af produkt skal gøres på max 4 steps. Side 33 af 61 Indholdsoversigt Denne oversigt giver indblik i, hvad den nuværende hjemmeside indeholder. Ud fra denne liste kan man se, hvilke sider der skal overføres til det nye design. Nogle af siderne vil også blive delt op i kategorier, for lettere at differentiere disse. Da der ikke skal laves et officielt redesign, bliver ikke alle underkategorier inkluderet. Topnavigering Startside Erhverv/offentlig Kundeservice Reklamation/returret Guides Information Produktkategorier Bil & cykel tilbehør Billede & Lyd o Antenner/kabel/stik o AV afspiller o DVD afspiller o Fjernbetjening o Hifi lyd o Højttaler o Høretelefon/headset o Lydkort o Mikrofon o MP3/MP4 afspiller o Projektor o TV Computere og tablets EL-artikler Forbrugsstoffer Foto & Video Hardware Hus og have Juleartikler Kabler & stik Kontorartikler Mobiltelefoner Personligt tilbehør Printer, fax og scanner Software Sport og fritid Værktøj Gavekort Side 34 af 61 Konklusion af Scope Plane I dette plan er det blevet mere klart hvad det er forbrugerne forventer af en webshop, og ikke mindst hvad det er de sætter stor pris på. Dette er blandt andet e-mærket, som viser, at hjemmesiden er testet og sikker. Hjemmesiden må heller ikke være kaotisk at se på og navigere rundt på. Ud over dette, blev der også fastsat nogle specifikke krav til, hvad hjemmesiden skal overholde i forhold til ydelse og præsentation. Side 35 af 61 The Structure Plane I dette plan skal hjemmesidens indhold struktureres, så dette kan give mening for brugeren. Dette vil gøres ved at definere nogle konceptuelle modeller og forklare, hvordan disse virker for brugeren, og i forhold til,hvad man er vant til fra den analoge verden. Hvordan hjemmesiden skal reagere på de forskellige input brugeren kommer med, - og hvordan der svares tilbage på disse. Derudover skal der laves et sitemap koncept til hjemmesiden for at vise, hvordan hjemmesiden bedst opsættes. Interaktions design Når interaktions designet skal laves, skal der findes ud af, hvordan brugeren bruger hjemmesiden, og hvordan hjemmesiden svare tilbage på bruges input. Det er vigtigt at både brugeren og systemet kan arbejde sammen. Hvis en bruger ikke føler sig tryg ved at navigere rundt på et site, er dette for det meste ikke brugerens skyld. Det kan være fordi, at hjemmesiden ikke er sat op på en logisk måde, hvilket desværre et tilfældet for nogle hjemmesider. Konceptuelle modeller Det er vigtigt at hjemmesiden og hjemmesidens indhold er konstant. Hvis hjemmesiden ikke er det, kan dette gå ud over brugerens evne til at interagere. Et eksempel på dette kan være en musikafspiller integreret i hjemmesiden. På denne vil en bruger forvente at startknappen ”afspiller” og pauseknappen ”pauser” musikken. Vi er også blevet vant til, at langt de fleste volumenslidere skruer op for lyden når slideren trækkes til, eller drejes mod højre, som vi kender fra vores analoge enheder. Dette er vist på billederne nedenfor. Figur 17 Volumenslider på analog forstærker Figur 18 Volumenslider fra YouTube Selv om slideren nedenfor skruer op for lyden, ved at blive trækket mod venstre. Så kan man visuelt se at volumenbaren udvides, og dette firbindes også med at skrue op for lyden. Figur 19 Volumenslider fra Specific Radio For et sikre, at hjemmesiden ikke vil forvirre brugeren, så skal den slider der vælges, være den samme hele sitet igennem. Ellers vil brugeren ikke kunne vide, hvornår der skal skrues til højre eller venstre. Et andet kort eksempel er, hvis man på YouTube tilføjer en video til en spilleliste Så forventes det, at filmen ligger i listen når man navigere over til denne. Når filmen fravælges, skal denne selvfølgelig fjernes fra listen. De konceptuelle modeller der bruges på siden skal give mening i forhold til brugeren. Hvis man for eksempel laver en ny søgeknap, i stedet for det kendte forstørrelsesglas, Så ville en stor del af brugerne ikke vide, hvad knappen gjorde, og derfor ikke bruge denne. Derfor er det vigtigt, at designe inde for normerne, med mindre der er en bedre måde at præsentere modulerne på. I så fald skal man være sikker på, at forbrugerne forstår at bruge dette. Overordnet skal en webshop fungere som en webshop, og ikke som en fysisk butik på nettet. Side 36 af 61 Fejlhåndtering Ligegyldigt hvad der laves, om det er en maskine, et program eller en hjemmeside, så er det meget vigtigt at have fejlhåndteringen på plads. Om det er brugeren af programmet der laver en fejl, eller om det er programmet selv der fejler, så er det vigtigt at disse fejl kan udbedres, når de sker. Det som et gammelt ordsprog siger ”Det er bedre at forebygge, end at helbrede”. For en programmør eller webudvikler, er det godt at gøre begge dele. Selvfølgelig er det bedste man kan gøre, at lave det perfekte system til at starte med. Men dette er lettere sagt end gjort, og det er specielt ikke let at realisere, jo større og mere kompliceret projektet er. Den fejlsikre webshop er noget vi kan drømme om, men er bestemt også noget der skal stræbes efter. Fejl rapportering Hvis en bruger kommer til at lave en fejl, som brugeren helst ikke skal kunne, så er det en god feature, hvis systemet kan hjælpe med at udbedre fejlen. Dette kan være i form af auto korrektion, hvor systemet selv udfylder noget manglende. Dette er bare ikke altid den bedste løsning, dette ved nogle IPhone brugere, som har brugt autokorrektionen, når de skriver beskeder. Selv om dette er en smart feature, virker den ikke altid efter hensigten. Det som der så kan gøres i stedet for at bruge autokorrektion i systemet er, at fortælle brugeren, hvad han kan i og ikke kan. Et eksempel på dette kan være, når en bruger skal udfylde en form. I sådan en simpel proces, kan alt faktisk gå galt, hvis formen ikke er sat ordentligt op. Men hvordan skal formen sættes op? Først er det en god ide at brugeren kan se hvilken information der skal udfyldes i de forskellige inputfelter. Derefter en det godt at brugeren ved, hvilket format informationen skal skrives som. Dette kan være måden en dato skrives på 13/12/1014 eller 13-12-2014. Dette kan undgås, hvis der bruges en datovælger. Men hvad så med de andre felter, som telefon nummer og e-mail? Der er det en god ide at bruge en validator, som sikre at formatet er rigtigt, og ikke vil lade brugeren gå videre, før at dette er rettet. Figur 20 Validator eksempel fra bettercontactform.com Denne form validator fortæller brugeren om de felter der skal udfyldes, og viser dette både skriftligt og visuelt. Hvis dette skulle tages et skridt videre, så kunne fejlteksten også angive hvilket e-mailadresse format der godkendes. Side 37 af 61 Strukturering af indhold Når sitet skal struktureres, kan man vælge at gøre dette af 2 veje. Enten top-down tilgangen hvor arkitektur strukturen baseres på forståelsen af strategiplanet, og disses overvejelser. Det vil sige, at arkitekturen bygges op omkring brugernes behov og projektets mål. Måden dette sker på, er at starte med de mest overordnede kategorier af indhold og funktionalitet. Derefter indsnævres kategorierne til deres logiske underkategorier. Efter dette vil man have et logisk hierarki, som indholdet og funktionerne kan indsættes i. Den anden metode er bottom-up, hvor arkitekturen også er baseret på kategorier og underkategorier. Men hvor disse er baseret på funktionelle krav, her startes der med det specifikke indhold, og derefter bevæger man sig op til underkategorierne, og til sidst til de overordnede kategorier. Den ene metode er ikke bedre end den anden, og begge tilgange har svagheder. Men ved at finde balancen mellem disse metoder, kan man ende op med at få et mere komplet projekt, end ved kun at fokusere på den ene tilgangsmetode. Dette gør også, at man kan gå mere dynamisk til værks, og er ikke begrænset af for eksempel x antal kategorier. En vigtig egenskab som enhver hjemmeside burde have, er muligheden for at kunne udvides. Hvis en hjemmeside besidder denne egenskab, gør dette at denne bliver mere alsidig og bedre kan tilpasses fremtidige behov og funktioner. Organisering – Sitemap Nu skal skrukturen af hjemmesiden fastlægges. I stedet for at opgøre hierarkiet i sider, vil det blive opgjort i noder. Noder er mere alsidige og kan indeholde alt fra et enkelt tal, til funktioner, til aktuelle sider, til det der er større. Men til at organisere hjemmesiden vil noden symbolisere det, som kendes som en hjemmeside side. Der findes flere forskellige måder at organisere et website på, de mest almindelige er Hierarkisk – træstruktur, Matrix, Organisk, og Sekventiel. Den måde der skal bruges til at organisere B.J.Tradings side på, vil være med træstrukturen. Denne er valgt, da det er denne metode der gør det mest logisk, at browse fra startside, til kategorier, til underkategorier, til produktet. På den måde kan brugeren inden for det minimale antal klik, nå til den ønskede node. Et eksempel på et hierarkisk sitemap kan ses på næste side. Side 38 af 61 Figur 21 Hierarkisk sitemap baseret på morsolie.dk Når et sitemap skal organiseres, gøres dette efter organiseringsprincipperne22. Dette betyder at hjemmesiden kan deles op i forskellige grupperinger, der indeholder hver deres elementer. På en webshop kan dette være en menu gruppering i toppen, der angiver information, og en gruppering til venstre der angiver produktkategorier. De underkategorier der er, skal således også passe til de overordnede kategorier siden har. Det vil ikke være logisk, hvis man for eksempel er på en webshop, og under kategorien værktøj, ser en underkategori kaldet køleskabe. Hvis kategorier og underkategorier passer sammen, bliver disse noder ikke blandet sammen, og sidens indhold forbliver konstant, hvilket er godt i forhold til navigationen på hjemmesiden. 22 [1] side 96 Side 39 af 61 Her er et eksempel på hvordan sitemappen til B.J.Tradings redesign vil se ud: Dette sitemap er en minimeret version af det komplette site, dette er lavet sådan for bedre at skabe overblik. Der er ikke taget højde for, hvad der skal være på de forskellige sider i sitemappen. Dette vil der først blive taget højde for i næste plan. Hjemmesidens informationer er delt op i to navigationer, en kategorinavigation som vil indeholde kategorier, underkategorier, og produkter. Den anden navigation vil indeholde de overordnede informationer. I forhold til den nuværende hjemmeside, vil der ikke længere være duplikerede underkategorier, og informationen vil blive samlet i korrekte sektioner. Konklusion af Structure Plane Ved at inddrage elementer som bruges i den analoge verden, og gøre disse digitale, kan brugere lettere associere sig med disse elementer, og bruge disse ubesværet. Ud over dette, er der blevet fundet ud af nogle gode tilgangsvinkler, til at finde ud af, hvordan hjemmesiden kan reagere på fejlinput fra brugeren, og derved få brugeren på rette spor igen. Dette uden at lave irritable handlinger på brugerens vegne. Til sidst er sitemappen til det nye design lavet og er godt omstruktureret, i forhold til det nuværende sitemap. Denne omstrukturering giver et bedre og mere logisk overblik. Side 40 af 61 5. Design - Udviklingsfasen I denne fase, skal den teori, og information, som er blevet erhvervet i de 2 tidligere faser, bruges til at forme designet til hjemmesiden. Til at starte med skal skelettet af hjemmesiden laves, dette gøres ved at lave mockups. En mockup er en skitse af hvordan, hjemmesiden kan kommer til at se ud. Dette er langt hurtigere at lave, end et fuldendt design, eventuelt lavet i Photoshop. Når mockup’s er lavet, er næste skridt The Surface Plane, hvor ”glasuren puttes på kagen”. Det er her designet fuldendes. Når denne High end mockup er lavet så kan en webudvikler gå i gang med realisere designet i HTML. The Skeleton Plane I dette plan skal selve skelettet af det overordnede design laves, dette kan sammenlignes med når en stor bygning skal konstrueres. Dette sker med store gipsvæge og betonstøbte gulve, som efterlader meget til fantasien, men som stadig viser hvor rummene er og hvor store de er. Det er så først i sidste plan The Surface Plane, at bygningen males, og møblerne indsættes. Når bygningen så står helt klar, så kan man vurdere om arkitekten har lavet bygningen men at navigere rundt i. Hvis bygningen er meget kompleks og mennesker fare vildt, så er bygningen ikke særlig brugervenlig. Det samme er gældende for hjemmesider, der hedde dette UI23. Godt web UI For at lave en god brugergrænseflade, som her repræsenteres ved en mockup, er det godt at bruge ellementer, webbrugere allerede er vant til at bruge. Hvis for eksempel en bruger ser et element på en side som han vil mene er en knap, som der kan trykkes på, så nytter det ikke noget, at knappen ikke virker efter brugerens forståelse. Brugere i dag er vant til at links er highlightet, knapper har en form for border, og navigation med dropdown menuer skilter dette med en pil ned. Ifølge www.99designs.com er der 7 ubrydelige love, hvad angår UI. Disse love, eller regelset, er gode guidelines for at sikre at hjemmesidens brugere den bedst mulige oplevelse. 1. Klarhed Det skal være let for brugere at vide hvad forskellige handlinger vil gøre, når de browser hjemmesider. Hvis en handling ikke gør det den viser, eller hvis brugeren ikke ved hvad et givent ikon betyder, så vil der være meget mindre chance for at brugeren vil bruge disse funktioner. 2. Foretrukne handlinger En bruger skal heller ikke være i tvivl om hvad næste skridt er, når personen kommer ind på en hjemmeside. En Hjemmeside skal være let at læse, og en bruger skal ikke være i tvivl om hvad det næste skridt er, for at komme videre. 3. Sammenhæng Hvis der funktionalitet på hjemmesiden som gør at brugeren kan fortage handlinger, i forhold til hjemmeside elementer. Så skal disse handlinger være visuelt tæt forbundet, til det element der har funktionen. Dette vil svare til at man sætter sin nøgle i fordøren, og drejer nøglen rundt, og bagdøren låses op. Dette vil heller ikke give mening for de fleste mennesker, og det er derfor at handlingerne skal passer sammen til de elementer, de er forbundet med. 23 User Interface = Brugergrænseflade Side 41 af 61 4. Standardindstillinger De fleste mennesker ændre ikke ved standardindstillingerne ved ting som tv indstillinger, frysertemperature, og lignende. Det samme gælder på nettet, og der er derfor ikke grund til at give en bruger en masse optioner, for at ændre et website til han eller hendes præferencer. Største delen vil nøjes med hvordan sitet er, og ser ud. 5. Hjælpe handlinger Hvis en bruger aktivt bedes er en hjemmeside om at udfylde en form eller lignende, vil brugere oftere gøre dette end hvis hjemmesiden ikke går ind og prøver at få mere information ud af brugeren. Et eksempel, hvis en bruger skal udfylde en kontaktformular, og udfylder med hendes fulde navn og e-mail. Så kan hjemmesiden aktivt spørge ”Med dit telefonnummer, kan vi sende en sms når, pakken er klar til afhentning” og derefter give brugeren mulighed for at svare ”Ja det vil jeg gerne” eller ”Nej tak”. På denne måde kan man få flere oplysninger ud af brugerne. 6. Tilbagemeldinger Det er vigtigt, når der fortages handlinger, på for eksempel en webshop. At brugeren bliver informeret om handlingen lykkes, og hvor der er foretaget ændringer. Hvis man på en webshop ikke får besked når en vare er lagt i kurven, når der klikke læg i kurv. Eller hvis kurven ikke fortæller, at den er blevet opdateret. Kan dette forvirre brugeren, og denne vil muligvis foretage handlingen flere gange. på grund af den manglende respons. 7. Simplificering Dette er også kaldet KISS24, som betyder hold det simpelt. KISS er en god ting at praktisere, da ikke mange ønsker en overkompliceret oplevelse. Når en bruger på en webshop skal betale for sit produkt, er der en masse data der skal udfyldes. Disse date er personlige oplysninger, kortoplysninger, leveringsmetoder. Hvis alt dette data skulle besvares på en side, vil dette virker overvældende. Men ved at dele oplysningerne op i flere steps, bliver dette langt mere overskueligt. Mockups Til at lave mockups er programmet Balsamiq Mockups25 blevet brugt. Dette program er specielt skræddersyet, til hurtigt at opsætte flotte mockups, hvor designeren let kan kreere sin visionen af hjemmesiden. Selv om mockups er en skitsering af hvordan hjemmesiden kan komme til at se ud, er det stadig vigtigt at få lavet dette så detaljeret, og brugervenligt som muligt. Ellers vil dette ikke kunne bruges i næste fase, og der skal startes forfra, på skellet planet. Til at starte med bliver forsiden lavet, dette er hovedsiden, som de fleste brugere ender ind på til at starte med, det er derfor vigtigt at denne sider virker appellerende for førstegangsbrugere, så de bliver holdt på hjemmesiden. Hvis de ikke bliver længe nok til at finde noget de har interesse i, vil brugerne med mindre sandsynlighed vende tilbage i fremtiden. Der kan laves high end mockups, og der kan laves low end mockups. Forskellen på disse, er mængden af detaljer som disse besidder. Der er valgt at lave high end mockup, da disse bedre repræsentere det endelige produkt, men er stadig hurtigere at lave end Hi-fi mockup lavet i Photoshop. 24 25 Keep it simple stupid = Hold det simpelt http://balsamiq.com/products/mockups/ Side 42 af 61 Forside mockup Side 43 af 61 Nye forside Gamle forside Det nye design er lavet i samme størrelsesformat som det gamle design, 978px bred, men dette betyder ikke at der er sket stor forskel. I stedet for at 13 forskellige sektioner med forskellig information, er dette blevet reduceret 6 sektioner. Dette betyder at der er mindre kludder på forsiden, og denne bliver meget lettere at fordøje. Forsiden har fået en slider som kan bruges til at vise aktuel, og ny information, som hjælper med at bringe liv til forsiden. I stedet for at have tre kategorier og 6 billeder, så er kategorierne blevet reduceret til 2, men derimod vil det være muligt at tilføje så mange produkter under hver kategori, som dynamisk vil tilpasse sig. Topnavigeringen er blevet simplificeret og indeholder kun den overordnede information, plus et indkøbsvogn ikon, og login i toppen til højre. På det gamle design er de forskellige informations link, spredt ud over hele layoutet. Hvor disse nu er samlet, under et sted. Ud over dette er indkøbskurven lavet til et ikon i stedet for et link. Det samme er gældende for login, som nu er placeret øverst til højre, som på mange hjemmesider er standart placeringen. Den venstre stillede kategori menu ligner meget den gamle, men har fået søgeknappen oversig, da søgeknappen mest skal bruges til produktsøgning. Kategorierne sorteres i valgfri rækkefølge, og det samme gælder for underkategorierne. Her er der dog sket en større forandring, da underkategorierne ikke bliver vist som en lang liste som det gamle design. Derimod er underkategorierne kategoriseret i forhold til hvad de indeholder for bedre at få dannet et overblik. Side 44 af 61 Ud over dette så er der i den højre stillet menu også et e-mærke, som målgruppen lagde meget vægt på. Dernæst er der billeder af de understøttede kredit kort, som der kan anvendes til køb på webshoppen. Til sidst er der mulighed for sociale links, og lignende, som for eksempel Facebook. Den højre side er holdt ren, da det ikke er nødvendigt at have mere information der. Dette vil bare være spildplads, og så er det godt at huske at LESS IS MORE. Til sidst er der footeren, som har fået mere plads, mere overordnet information, og font størrelsen er blevet normal, so informationen er nemmere at læse. Side 45 af 61 Produktvisnings mockup Side 46 af 61 Nye forside Gamle forside På produktvisningssiden, er der sket rigtig meget. Varenumrene er blevet fjernet da det ikke giver noget værdi for brugeren af hjemmesiden, der ud over er billederne blevet væsentlig større og derved skaber dette større overblik, og samtidigt gør det lettere at differentiere imellem produkterne. Produkt containeren vil være klikbar, men produktet kan lægges direkte i kurven ved at klikke på indkøbsvogn ikonet. Hvor man på det gamle design er nødt til at trykke på linket info. Der er også blevet tilføjet breadcrumbs, som gør det lettere for brugeren et navigere frem og tilbage på sitet. Efter denne er der kommet mere aktuelle, og mere brugervenlige sorterings metoder. Til sidst er filtrering tilføjet, som gør det lettere at filtrere produkter til og fra, basseret på deres specifikationer. Dette er illustreret på billedet på den følgende side. Side 47 af 61 Side 48 af 61 Enkelt produktside mockup Side 49 af 61 Nye forside Gamle forside Den nye enkelte produkt side er lavet til, at have produktet i fokus. Dette gør den nye side ved at have større og flere produktbilleder, der kan vises i fuld skærm, hvis dette ønskes. Produktet har en introduktionstekst til højre fra billedet, som er efterfulgt af pris og købeknap. Disse er blevet sat i fokus, da disse gled sammen med omkringlæggende information. Under dette er der blevet oprettet faner, disse hjælper med at separer information, som produktinformation, specifikationer, og spørgsmål til produkt. Specifikationerne er delt op i kategorier, for hurtigere og lettere at kunne bearbejde den specifikke information. Dette er illustreret på næste side Side 50 af 61 Side 51 af 61 Konklusion as Skeleton Plane B.J.Trading er blevet omstruktureret, og er blevet gjort mere brugervenlig, ved at opdele hjemmesiden i forskellige informations sektioner. Kategoristrukturen er blevet smartere og mere overskuelig, ved at opdele de overordnede kategoriers underkategorier i subsektioner. Produktvisningen her fået større billeder, som hjælper med bedre at differentiere produkterne fra hinanden. På den måde kan man lettere scanne produkterne igennem, og finde det ønskede produkt. Ud over dette er det blevet lettere at sortere, og de nye filtreringsmuligheder gør det endnu hurtigere at minimere mængden af information der skal bearbejdes. Det enkelte produkts side, er også blevet bedre. Denne viser nu flere billeder, som også kan vises i fuld størrelse. Der udover er visningen af general information blevet bedre, dette er gjort ved at give tekst mere luft, samt mere bredde. Den tekniske information, specifikationer, bliver nu vist i en lettere overskuelig tabel struktur. Disse design er lavet med målgruppen i fokus, da disse ønskede overskuelighed, og at have muligheden for at finde den aktuelle information, hurtigst muligt. Side 52 af 61 The Surface Plane I det foregående plan, var formålet at lave skellettet til hjemmesiden. Fokusset var sat på struktureringen af hjemmesiden, og placeringen af elementerne, som navigations menuer og produkter. Nu er fokusset flyttet til overfladen, og det komplette design af hjemmesiden. Designet vil være en hi-fi mockup, lavet i Photoshop. Tidsvarende design Når det nu er et nyt design, så vil det være dumt ikke at stræbe efter det nyeste inden for design. Det gamle design, er trods alt fra starten 2000 tallet26. Hjemmeside design er lig som fashion, det ændre sig hele tiden. Dette gør det ikke let at lave et tidsløst design, og en hjemmeside skal nogle gange friskes op. Enten visuelt opgradering, eller både for og bag. Elegantthemes.com som hovedsageligt blogger om Wordpress relaterede emner, sælger Wordpress temaer. Har skrevet en artikel27, om hvad de mener, bliver de helt store trends i 2015. Det de giver udtryk for, som værende vigtigt, er responsivt design. Dette er når hjemmesiden tilpasser indholdet til den skærmstørrelse der browser hjemmesiden. Baggrundsbilleder skal være store, og flotte. De spår også at der vil komme langt flere lange sider, hvor klik bliver minimeret. Og ikke mindst flat UI eller som google kalder det ”Material Design”. Et godt eksempel på alt dette, er Hi-Fi Klubbens hjemmeside28. Deres hjemmeside vil ifølge elegantthemes være rigtig trendy. B.J.Trading makeover Ved allerede at have lavet en high end mockup i tidligere plan, er det er der mindre der skal tages stilling til i forhold til det endelige design. Dette betyder ikke at der kan komme små ændringer med i denne sidste designudvikling. Stadig efter denne er lavet, er det stadig ikke sat i sten, i forhold til når designet skal implementeres i HTML. 26 Web design of the year 2000: http://www.topdesignmag.com/web-design-of-the-year-2000/ Artikel omkring web design trends 2015:http://www.elegantthemes.com/blog/resources/web-design-trendsto-look-out-for-in-2015 28 Hi-Fi Klubbens hjemmeside: https://www.hifiklubben.dk/ 27 Side 53 af 61 Side 54 af 61 Redesignet til B.J.Trading, er holdt simpelt og professionelt, med rene linjer og et simpelt farveskema. Det der holder hjemmesidens sektioner adskilt fra hinanden, er kontrasten imellem farverne. Bortset fra top menuen, hvor der er brugt en skygge, til at separer fra hovedindholdet på siden. Produktvisningen på forsiden vil være den samme produktvisning på alle sider som har produkter som indhold, på denne mode holdes designet på hjemmesiden konstant i forhold til hvordan produktvisningen er på det gamle design. På grund af denne ensartethed, bliver det lettere for brugeren at navigere rundt på shoppen, da visningen af information er konstant. Farverne som er brugt, er gråtoneskalaen, hvor der er lagt vægt på en rolig, og mørk baggrund. Selve indholdet på siden er lysere, og på grund af baggrunden bliver dette bragt mere i fokus. En anden farve, der er brugt. Er den kølige, men stadig levende blå farve #234B7F. Denne giver en god visuel kontrast til den hvide farve, og derved skiller sig meget ud. Der ud over er farverne rød, gul, grøn, brugt. Disse fungere her, som på mage andre webshops, ved at fortælle lager status af produkterne. Da der ikke er lavet en live bruger test i projektet, ville dette være en god test at lave, da det ikke er blevet bekræftet endnu, om det den rigtige løsning der er lavet. Hvis denne test vil vise sig at give et positivt udfald, ville man kunne starte udviklingen af den nye hjemmeside. Men hvis det er at testens udfald ikke giver et positivt resultat, så skal testen bruges på den mest konstruktive måde, til at få tilrettet de fejl og mangler der da måtte være. Dette kan have indflydelse på designet, eller der kommunikation, der er i mellem sælger og køber. Konklusion af Surface planet Der er fundet ud af hvad de nye trends er for 2015, i forhold til web design, og disse trends er blevet brugt i overvejelsen af redesignet af B.J.Tradings hjemmesiden, for at sikre at denne vil være tidsvarende. Der er blevet lavet en hi-fi mockup, som illustrere det endelige design. Hjemmesiden er klar til at blive programmeret såfremt at en brugertest bekræfter, eller afkræfter teorien omkring designvalgende. Side 55 af 61 6. Konklusion Formålet med dette projekt var at finde ud af, ”Hvad er en navigeringsvenlig webshop, som har et tidssvarende udseende, der kan skabe tillid til forbrugeren? ”. Firmaet der blev valgt at fokusere på er B.J.Trading A/S, da deres hjemmeside ikke er brugervenlig, og ikke er blevet visuelt opdateret siden starten af 2000 tallet. Jeg måtte arbejde med begrænsede resurser, på grund af firmaet ikke ønskede at sammenarbejde. Projektet er bygget op af 3 faser. Udforsknings fasen, analyse fasen, og udviklings fasen. I disse faser er teorien ”The Five Planes” brugt, som guideline for projektets udvikling. I opstartsperioden var det ikke afklaret, hvordan der skulle tages hul på projektet. Men dette fik udforskningsfasen, rodet bod på. I denne fase blev det mere klart, angående hvilken indgangsvinkel der skulle benyttes. Desværre havde projektet ikke potentiale, til at blive en reel case, på grund af det uønskede sammenarbejde. Dette forhindrede dog ikke, projektet i at fortsætte. For at kunne lave designet skræddersyet til B.J.Trading, skulle der først erhverves information omkring firmaet. Informationen omkring firmaet blev erhvervet igennem firmaets egen side, og fra http://datacvr.virk.dk/data/, da disse sider var det eneste sted at finde valid information omkring firmaet. Ved at analysere B.J.Trading blev der fundet ud af, at firmaet er et lille firma med 17 ansatte, som i modsætning til konkurrenterne ikke er aktive på de sociale medier. Efter at have dannet et indtryk af firmaet, blev deres målgruppe fundet ved hjælp af Minerva modellen. Dette er det violette segment, som består af studerende, og personer med deltidsarbejde. Disse personer kan godt lide ”gøre det selv”, og ved at gøre dette, kan disse mennesker spare penge i forhold til at købe det samlede produkt selv. Dette gør de, som en del af deres hobby. De vil søge efter det billigste, og bedste produkt. Dette gør de blandt forskellige webshops, for at finde den bedste pris. For at finde ud af hvordan målgruppen, ville gebærde sig på hjemmesiden, blev 2 personas lavet. Disse personas blev kreeret ud fra informationen fra det violette segment, og skulle bruges til et hypotetisk Brugerscenarie. Denne metode viste hvilke problemer der er med B.J.Tradings nuværende side. Med denne information, er det lettere at kunne designe til målgruppen, da der nu vides, hvad målgruppen forventer af en webshop. For at bekræfte disse resultater blev en State Of The Art analyse lavet, som bekræftede brugerscenariet. Dette viste at brugerne, ville have sikkerhed, når de handlede på nettet. En måde at opnå dette på er ved at gøre hjemmesiden e-handels certificeret. Ud over dette, vil brugerne også have, at de let kan navigeres rundt på siden. Dette opnås ved at lave en bedre menu skruktur, der har mere plads i mellem elementerne. Ud over dette hjælper breadcrumbs også med overskueligheden, i forhold til hvilken side, brugeren befinder sig på. Den vigtigste ændring var, at samle hjemmesidens informationer, i færre, men relevante sektioner. På grund af analyserne, og de hypotetiske brugertests, blev det muligt at lave et konceptuelt mockup. Dette high end mockup viser den erhvervede information i praksis. Det endelige design, blev derefter lavet på baggrunden af mockupet. Sammen med analyse af State Of The Art som er baseret firmaet Komplett, og nye webtrends 2015, som blev spået af elegantthemes.com. Resultatet af hele projektet, er en hi-fi mockup, som viser redesignet af B.J.Tradings hjemmeside. Denne er lavet mere brugervenlig, og udstråler mere professionalisme. Dette gør den i et moderne, og stilrent design. Som er mere tidsvarende en det nuværende design. Side 56 af 61 Perspektivering Ved at have lavet dette projekt, har jeg fået mere forståelse for hvordan, man laver et redesign for en større hjemmeside. Dette er ikke så let som det kan virke som, ved første øjekast. Jeg har fået opfyldt mit ønske, om at kunne lave en større rapport selvstendigt. Men dette er ikke gået uden problemer, da abstrakt teori ikke er men stærke side. Der er på grund af dette, langt mere vægt på denne del af rapporten, end den kreative del. Derfor afspejler den kreative del, ikke mit fulde potentiale, da jeg har været i tidsnød, på grund af den skriftlige del. Jeg er tilfreds med min skriftlige præstation, men fortryder at jeg ikke har indgået i et sammenarbejde, med en klassekammerat. Dette ville have hjulpet med at aflaste den skriftlige del, samt givet mere tid til at udvikle på det konceptuelle design. Samtidigt ville et sammenarbejde, også have givet bedre mulighed for at sparring, og holde hindanden på sporet. For at kunne gøre projektet bedre, skulle der være lavet, et mere dybdegående spørgeskema. Der skulle også have været, en live interaktions test af mockups, for at opnå bedre kvalitativ information omkring produktudviklingen. Procesrefleksion I projekt perioden har jeg stræbt efter, at arbejde hver dag, men dette er ikke altid gået efter hensigten. I projektperioden har jeg haft flere bolde i luften, end hvad der her været tid til. Ud over dette, har der i starten at projektperioden, ikke været meget entusiasme, for at skrive på projektet. Dette har resulteret i mere stress, i forhold til at blive færdig i tide. Tidsplanen blev hurtigt ubrugelig, da jeg ikke fulgte planlægningen tilstrækkeligt. Side 57 af 61 7. Kildefortegnelse [1]: Jesse James Garrett: The element of user experience, second edition. Jesse James Garrett, 2011. [2]: Steve Krog: Dont make me think, second edetion. New Riders Publishing, Berkeley, California USA, 2002. [3]: Postnord: E-handel i norden 2014. Link til PDF på følgene: http://www.postdanmark.dk/da/Documents/Analyser/E-handel%20i%20Norden.pdf (Tilgået december 2014). [4]: Studieportalen: Minerva Modellen, Kompendie. Link til PDF på følgene: http://www.studieportalen.dk/kompendier/afsaetning/minerva-modellen (Tilgået december 2014) Side 58 af 61 8. Bilag I bilaget findes planlægningen af projektet, brainstormen af projektet, og liste over figurer. Planlægning Til min planlægning har jeg valgt at bruge et Gantt diagram, dette er fordi at gant diagrammet tydeligt viser hvilke arbejdsopgaver der skal laves, og hvor lang tid de enkelte opgaver er estimeret til at tage. Dette skaber et stort overblik for mig, og jeg kan let, og overskueligt se hvad jeg mangler i projektperioden. Hvis Gantt diagrammet følges nøje, vil dette sikre at projektet vil være færdigt til tiden, dette forudsættes dog at der er sat realistiske mål for hver opgave i projektet, og at der stræbes efter at overholde de individuelle deadlines. Figur 22 Gantt diagram - Udkast af projektplanlægning Ovenfor er et udkast af mit Gantt diagram, som viser hvilke arbejdsopgaver jeg vil igennem i dette projekt. Jeg stræber efter at arbejde fokuseret hver dag, så jeg ikke skal stresse i slutningen af projektperioden, så jeg også kan holde lidt juleferie. Side 59 af 61 Brainstorm Min brainstorm viser mine første tanker om projektet, og ligger grundlaget for hvad det er jeg vil komme ind i min rapport. Nøgleordet for min brainstorm er ”Webshop”, en webshop er et meget bredt begreb. Det er bland andet noget man interagere med på flere plan, og interaktion skal helst være intuitiv. Hvem er de forskellige brugere af diverse webshops, og hvad lægger de vægte på? En webshop er for det meste lavet i en form for CMS29, og dem er der mange forskellige af. En webshop skal også have et design, som et lag oven på interaktion af hjemmesiden. Nogle af disse elementer vil jeg inddrage i et lille spørgeskema, som en blød analyse, for at komme i gang med projektet. 29 Content management system Side 60 af 61 Liste over figurer Figur 1 Antal forbrugere i Norden, som købte forskellige varer på nettet i 2013 – side 9 ........................................7 Figur 2 Diagram om hvad der er vigtigst når der handles på nettet ....................................................................... 10 Figur 3 Diagram af vigtigheden af en hjemmeside ser flot ud ................................................................................ 10 Figur 4 Diagram af køb på nettet............................................................................................................................. 11 Figur 5 Varer købt på nettet i Norden 2013 ............................................................................................................ 12 Figur 6 The five plane model ................................................................................................................................... 13 Figur 7 Grafen viser en stigning, efter lanceringen af redesign. ............................................................................. 18 Figur 8 Minerva modellen, med de 5 segmenter .................................................................................................... 20 Figur 9 Screenshot af forsiden på bj-trading.dk ...................................................................................................... 26 Figur 10 Screenshot af menuen............................................................................................................................... 27 Figur 11 Screenshot af grafikkort ............................................................................................................................ 27 Figur 12 Screenshot af chipset menu ...................................................................................................................... 28 Figur 13 Komplett's forside ..................................................................................................................................... 30 Figur 14 Screenshot af produktoversgt ................................................................................................................... 31 Figur 15 Screenshot af specifikationer til produkt på Komplett ............................................................................. 31 Figur 16 Screenshot af det mobile site fra Komplett .............................................................................................. 32 Figur 17 Volumenslider på analog forstærker Figur 18 Volumenslider fra YouTube .......................................... 36 Figur 19 Volumenslider fra Specific Radio ............................................................................................................... 36 Figur 20 Validator eksempel fra bettercontactform.com ....................................................................................... 37 Figur 21 Hierarkisk sitemap baseret på morsolie.dk ............................................................................................... 39 Figur 22 Gantt diagram - Udkast af projektplanlægning ......................................................................................... 59 Side 61 af 61
© Copyright 2024