1. No category

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&regnr=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