Bad.no by Remi Evjenth Løvik

Nettbutikkløsning

BAD.NO

ANALYSE | 1

Innhold ANALYSE 9–25

BEARBEIDING 27–33

LØSNING 35–41

ANALYSE | 3

Sammendrag Bad.no ønsker ett redesign av sin hjemmeside. I detter forslaget vil det bli presentert ett eksempel på ny forsideløsning, scenariovisualisering av kjøpsproses og ett eksempel på hvordan nettside arkitekturen kan bygges opp for å få en velfungerende nettside. Beskrevet i en setning, hva er bad.no? Bad.no er en leverandør av baderoms-, varme, vann og sanitærartikler som leverer varer gjennom nett.

Oppgavens mål Skape ett effektiv profil- og nettløsning som kan øke bad.nos tilstedeværelse på nett og potensielt øke bad.nos salg og omsetning.

Funksjonalitet ˲˲ Effektiv netthandel ˲˲ Produktpresentering ˲˲ Egenprofilering ˲˲ Tilbud og nyhetsfront

Brukere ˲˲ Private enkeltbrukere ˲˲ Bygg bransje ˲˲ Firma assosiert med bygg bransjen

Platform Nettbasertbutikkløsning og promoteringskanal for bad.no.

Kildeliste Brown, Dan M. (2007) Communicating Design: Developing documentation for design and planning. New Riders: Berkley Cooper, Allan, Robert Reimann, David Cronin (2007) About Face: The Essentials of international design. USA: Wiley Cooper, Allan (2007) The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity USA: Wiley Tidwell, Jenifer (2010) Designing interfaces. O’Reilly: Canada.

Oppgave Bad.no skal videreutvikle sin nettbutikk. Bad.no ønsker nye løsninger vist på: ˲˲ Forsiden ˲˲ Kjøpsprosessen av et produkt,

fra valg av produkt frem til lagt i handlevogn.

Forslag ønskes til følgende: ˲˲ En bedre brukeropplevelse ˲˲ En moderne og nytt design (logo skal bevares) ˲˲ Bedre kommunikasjon til kunde/besøkende ˲˲ Forslag til hvorfor man skal velge bad.no

Reaktors UX-tankegang for salg av produkter skal implementeres: https://www.unisonforsikring.no/privat/ Det skal ikke presenteres en total løsning, leddene av løsningen som skal være tilstede er følgende: ˲˲ Prosessen - hvordan du vil angripe en slik problemstilling ˲˲ Kvaliteten på det arbeidet du leverer av design ˲˲ Overordnet informasjonsarkitektur ˲˲ Argumentasjonen din ift de valgene du tar

Kort analyse av eksisterende løsning Gjennom analysen vil jeg kartlegge de funksjonene som ikke funger i det eksisterende designet. Dette hjelper meg å legge en plan for hvordan skape ett nettsted med høyere funksjonalitet en det eksisterende løsningen.

ANALYSE | 9

Logg inn eller registrer deg som kunde hos Bad.no

FORSIDEN

PRODUKTER

TILBUD

BROSJYRER

PRISFORESPØRSEL

INFOSENTER

KONTAKT OSS

Du er her: Forsiden BAD.NO NYTT TEGN DITT BAD UTSTILLINGER MIN SIDE

Baderomsmøbler Baderom Blandebatteri Badekar Massasjebad Steambad Servant Toalett Dusj

Baderomsmøbler

Baderom

Blandebatteri

Badekar

Massasjebad

Steambad

Servant

Toalett

Dusj

Varmtvannsbereder

Kjøkken/ Vaskekar

Rør og deler

Varme

Pumper og Annet

Verktøy

Arbeidsklær/ Verneutstyr

Hage

Kjemikalier/ Rengjøring

Varmtvannsbereder Kjøkken/ Vaskekar Rør og deler Varme Pumper/ Brannslanger Verktøy Arbeidsklær/ Verneutstyr Hage Kjemikalier/ Rengjøring

Over 20 000 lagerførte varer.

Ved å benytte søkefeltet øverst til venstre i menyen vil søket hente fram produkter fra over 20 000 lagerførte varer. Du vil da kunne søke fram varer innen det meste relatert til VVS bransjen. Varer innen synlige produkter, varme/ tekniske produkter, VA/ Vannkraft som PVC-rør - PE-rør - PP-rør - tanker Like

isolasjon, industrisortiment som stålrør - sveiserør og deler - rustfrie/syrefaste rør og deler - trykkrør - ventiler, verktøy, festeartikler, verneutstyr, arbeidsklær etc. Lagerførte varer kan søkes enkelt opp ved hjelp av Nrf nr.

VVS kvalitetsprodukter til faste lave priser OVER 6 ÅR PÅ NETT - Lengst erfaring på salg av VVS produkter i Norge via internett! Med oppstart i 2004 er bad.no Norges eldste VVS leverandør på internett med flere tusen fornøyde kunder. Vi gjør vårt beste for å yte god service til våre kunder og har opparbeidet et godt servicenett gjennom våre leverandører over hele landet.

Bad.no (eksisterende) Bad.no har en profil som reflekterer bransjen og har har ett stort sotrement. Siden lider allikevel av ett design som virker noe utdatert. Det mangler ett friskere design og oppdatering av navigasjon for å skape en bedre opplevelse av nettstedet. Bad.no har en god informasjonsbank og dokumenterer vareutvalget sitt utfyllende. Dette stiller dem i en sterk rolle som leverandør og kan gir dem potensiale til å ta en stor del av markedet både hos private og profesjonelle kunder. For å stille som en sterk leverandør har allikvel bad.no en del ting i nettløsningen som må oppdateres og raffineres. Første inntrykket er at designet er noe utdatert og det trengs en oppussing. Samtidig er flere konvensjonelle innrettninger dårlig utnyttett og menyer er lite konsekvente. Forsiden fungerer for øyeblikket som en forstørret meny. Tilbudsartikler blir presset ut til sidene og kan oppfattes som reklame for eksterne sider. Reklamerutene representerer ikke bad.nos profil og bør bli presentert på en bedre måte. Alle elementer ved siden bør underbygge bad.nos profil og promotere kvalitet for å selge varemerket på en best mulig måte. Utnyttelsen av forsiden er dårlig, dette er somregel den første siden nye kunder får kontakt med og det er dermed kritisk om denne ikke kommuniserer det ønskede budskapet. Det er også viktig å vise aktiv endring på denne siden for å vise at nettstedet er i live og at det skjer ting som brukerne kan ta en del i. For å skape ett mer attraktivt nettsted har bad.no gått frem riktig i å be om ett redesign av forsiden og navigasjon. En av problemene jeg fant ved begynnelsen av analyse av nettstedet er at det ikke er noe sted hvor forkortelsen VVS er forklart. Dette kan virkeforvirrende og ekskluderende for nye kunder.

Pluss ˲˲ Høyt nivå på produkt informasjon ˲˲ Stort produktutvalg ˲˲ Dyp informasjonsbank om nettstedet

Minus ˲˲ Forsiden er ikke utnyttet til potensialet ˲˲ Footer mangler konvensjonelle elementer ˲˲ Unødvendig og redundante menyer ˲˲ Manglende statuering av sidens funksjon ˲˲ Ustrukturert reklame med forringende effekt

ANALYSE | 11

Kort analyse av lignende løsninger Det er viktig å se til kilder som fungerer for så å utnytte de løsningene som er tilgjengelige. I denne delen prosessen ser jeg med ett kritisk øye på lignende løsninger for å lære både av de gode og dårlige løsningene lignende nettsteder har implementert i sin løsning.

ANALYSE | 13

Allerede kunde? Logg inn

Ikke kunde ennå? Registrer deg Kontakt oss

Forsiden

Ukens tilbud Søk

Datautstyr Her er du:

Komplett-PC

PC & servere

Lyd & bilde

Foto & video

Privat

Handlevogn

Bedrift

Min side

Telefoni & GPS

Spill

Forsiden

Infosenter

Hjem & fritid

Ingen varer i handlevognen.

Datautstyr

Harddisker Hovedkort Minne Nettverk PC i deler - AMD PC i deler - Intel Prosessorer Skjermer Skjermkort Skrivere/skannere

Komplett-PC Komplett Komplett Komplett Komplett Komplett

Gamer Gamer Extreme Gamer Premium Home & Media Office

PC & servere

Bærbare Nettbrett Server & infrastruktur Stasjonær PC

Vennligst installer eller oppgrader Flash Player for å se dette innholdet riktig.

LG 37" Full-HD LCD-TV Sjekk prisen!

Superslim & ultra-portabel!

PRISBOMBE!

-25%

Komplett Gamer a20 Monthly Edition

-33%

Lyd & bilde TV DVD MP3 Projektorer

Foto & video

Digital speilrefleks Digitalkamera Digitalt videokamera Digitalt systemkamera

Telefoni & GPS GPS Hustelefoner Mobiltelefoner

Spill

Nintendo DS Nintendo Wii PC-Spill PlayStation 2 PlayStation 3 Xbox 360

Hjem & fritid

Kaffe & Espresso Kjøkkenapparater Klima & Varme Personlig Pleie Støvsugere

LG 37LD450 37" LCD-TV med trinn for trinn-guiden Picture Wizard som hjelper deg med å optimere bildet etter egen smak. Full-HD til en knallpris!

ASUS U31JG er lett å ta med seg selv om den er fullspekket med utstyr. Intel Core i3 prosessor sørger for optimal ytelse. Skjermkortet fra nVidia har 1GB minne!

Acer 24" LCD P246HBD til gi-bortpris! Her er det førstemann til mølla. Full-HD oppløsning, VGA og DVI tilkobling. Rett å slett en lekker LCD!

Førpris 3.995,-

Førpris 5.495,-

Førpris 1.495,-

Nå 2.995,-

Kjøp

Nå 4.995,-

Nå 999,-

Kjøp

8.995,-

Kjøp

Vennligst installer Flash Player for å se dette innholdet.

Samsung 40" LED-TV til en knallpris!

-26%

Samsungs Serie 5 har HD med fantastisk bildekvalitet takket være Clear Motion Rate og Wide Color Enhancer Plus.

Førpris 6.495,-

Nå 4.795,-

Klar for avkjølte dager? Med aircondition fra Wilfa har du god og behagelig luft døgnet rundt, det være seg hjemme eller på arbeidsplassen.

Førpris 4.495,Priser er inkl. mva. Hurtigkasse Handlelister Kjøp gavekort Bruk gavekort

Kjøp

SpillPC med massevis av kraft for å kjøre dagens spill. I pakken har vi inkludert spillet Brink, en 21,5” skjerm, tastatur, mus og et par høyttalere.

Nå 3.495,-

50" 3D Plasma-TV til en knallpris - Inkl Blu-ray spiller! Gi en gave til hele familien med denne 3D-pakken fra Samsung. Her får du hele 50" Full-HD plasmaTV og 3D blu-ray spiller til en knallpris! Førpris 8.990,-

Nå 7.990,-

Kjøp

-22%

En knallsterk 17” bærbar PC med Sandy Bridge prosessor, AMD Radeon HD6850 skjermkort og god lagringskapasitet!

6.995,-

Kjøp

Canon EOS 550D SLR m/18-55IS

Avspill HD-video direkte til TV-en din med HTC Sensation! Vis innhold opp til 40 % raskere med en dobbeltkjerneprosessor. Stor 4,3" QHD-skjerm!

Med kreativ frihet til å fange det unike øyeblikket – få med alle detaljene i en vakker solnedgang eller følg hvert spark i den lokale fotballkampen.

5.490,-

Kjøp

Mye stasjonær glede for pengene!

IP kamera med full overvåkning!

Acer eMachines ET1850 gir deg mye PC for pengene! Denne modellen har rask dobbeltkjerneprosessor fra Intel på 3,2 GHz, 4GB DDR3 minne, 1TB harddisk.

TP-LINK TL-SC3171 Day/Night IP Camera lar deg holde øye med dine verdier mens du er borte eller sover. Enkel i bruk, og med godt nattsyn kan du sove godt!

Førpris 3.795,-

Nå 3.495,-

Førpris 1.595,-

Nå 895,-

Kjøp

Bygge selv?

Rykende fersk nyhet fra nVidia!

Perfekt kontor/underholdnings alternativ fra AMD! Athlon II X2 250 prosessor med 3GHz hastighet. 4GB minne og MSI mikro-ATX hovedkort. Radeon HD 5670 grafikk!

Gigabyte GeForce GTX 560 (ikke TI versjonen) er her. Nå er det snakk om utrolig god DirectX 11 ytelse til en billig penge!

3.495,Lynrask harddisk uten beveglige deler! Intel® SSD 510 er en 250GB harddisk i 2.5" størrelse. Lynrask lesehastighet med opptil 500MB i sekundet! SATA 6Gb/s grensenitt er fult støttet.

Førpris 4.295,-

Nå 3.790,-

1.595,-

Kjøp

-12%

Kjøp

Kraftig gamer PC!

HTC Sensation - Toppscore!

fra1.195,-

-11%

LG hjemmekino + 2 Blu-ray filmer! LG HB965DF er et kraftig 2.1 Blu-ray hjemmekinosystem med trådløs tilkobling til din bredbåndsruter. Du kan spille av musikk og filmer fra din pc uten en kabel! Førpris 3.495,-

Nå 2.495,-

Kjøp

Nytt på lager

Nye produkter

Nye kundeanbefalinger

Nye produktomtaler

Boxee Box by D-Link

PowerColor Radeon HD

Corsair Gaming Audio

The Witcher 2: Assas

Microsoft Windows Ho

LaCie 4big Quadra 12

Yamaha RX-V667BL hje

InFocus Projector SP

Nikon COOLPIX L23 so

PNY Quadro 2000D 1GB

Turtle Beach Earforc

Epson Projektor EH-T

Nikon AF-S Nikkor 28

Corsair SSD Nova Ser

HTC Wildfire S Black

Monster BeatBox iPod

Intel Pro/1000GT Des

Kingston SSDNow V+18

Acer Aspire 5750G 15

Tivoli Model 10+ DAB

PowerColor Radeon HD

Kingston SSDNow V+18

Optoma 3D-XL Project

Tivoli Model 10+ DA

APC Pwr Cord, 10A, I

Kingston SSDNow V+18

ASUS GeForce GTX 560

Pro Evolution Soccer

MSI Wind Top AP1920

Garmin Forerunner 30

Dragon Age 2 PC & MA

BenQ Projector MX812

CoolIT OMNI AC-A5970

Dragon Age 2 PlaySta

BenQ 24" LED GL2440H

Beyerdynamic hodetel

Dragon Age 2 Xbox 36

Se hele listen

Kjøp

-44%

Kjøp

-29%

Kjøp

Komplett.no Komplett.no har en stor markedsandel av norsk elektronikknetthandel. Deres merkevare er sterk og løsningen deres har sett mang en kunde gjennom ett godt kjøp. For å forstå layout og brukeropplevelse av netthandel er det en god strategi å se nærmere på lignende løsninger. Kompletts brukergruppe faller kanskje ikke under samme kategori, men komplett er en sterk nettbutikk og stiller med noen gode sorteringsløsninger for kvantitativ informasjon. Om man bruker «at a glance» strategi (Brown 2007, s. 108) for å skape seg en oversikt over strukturen er det mye å hente i kompletts løsning. Her finner man løsningsforslag til både nettstedsarkitektur og kategorisk layout. Når en seperat avdeligsside velges i menystrukturen, fases unødvenig informasjon ut og navigasjonselementer fra den dypere strukturen kommer til overflaten. Ved hjelp av denne strategien skaper komplett en navigasjonsløsning som baserer seg på en målbasert navigasjonmønster som eliminerer valgmulighetene underveis for å hjelpe burkeren finne frem til ønsket kategori og produkt. Denne formen for navigering skaper ett oversiktlige system man nivåvis kan finner frem til det ønskede produktet og er en god modell for sider med dype strukturer. Selv om komplett har ett god system kan vi også lære av de tingene som ikke gagner komplett i deres løsning. Komplett har noe problemer med sortering og navnekonvensjoner. Disse kan i noen tilfeller skape forvirring når brukeren er på jakt etter en spesifikk vare. Komplett har en kombinasjon av norske, engelske, fagrelaterte og tekniske begreper som blir brukt på produktene. Ett eksempel på detter er om man er på jakt etter en: skjerm, monitor eller display. Disse er nærmes synonymer og det kan da være vanskelig å finne produktet man er på jakt etter.

Pluss ˲˲ Rigid struktur ˲˲ Godt løst elimineringsmetode ved manual navigering ˲˲ Imøtekommende forside med en effektiv tilbudsfunksjon

Minus ˲˲ Konvensjon for navngiving av produkter ˲˲ Manglende statuering av sidens funksjon

ANALYSE | 15

Kundesenter

MegaTips

Butikker

Kontakt oss

Kampanje

0 vare(r) i kurv Delsum: Kr 0,00

Ikke pålogget Logg inn Ny bruker? Registrer deg Du er her : VVS

Veggfliser bad Veggfliser kjøkken Mosaikk Bekledningsfliser Gulvfliser Naturstein

VVS Vi ønsker å ha et variert utvalg av produkter innen VVS, for å kunne tilby deg som kunde stor valgmulighet av produkter til en best mulig pris. Da vi fører store merkevare leverandører som blant annet Hansa, Hansgrohe, Oras, Grohe, Unidrain, Fm Mattsson, Westerbergs og Høiax m.fl. vil vi kunne tilby trygghet til deg som kunde gjennom deres garantier. På våre egenproduserte VVS produkter vil vi kunne tilby 5 års garanti, og en trygghet i at alle reservedeler lagerføres i inntil 5 år etter endt produksjon.

Servantarmatur

Kjøkkenarmatur

Dusjarmatur

Badekararmatur

Utekran

Kjøkkenservant

Baderomsservant

Bereder

Badekar

Innbygningstoalett

Frittstående toalett

Toalettsete

Dusjkabinett

Dusjløsninger

Dusjpanel

Dusjsett

Dusjtilbehør

Baderomstilbehør

Rør & avløpsdeler

Håndkletørker

Baderomsmøbler Glassbyggestein Gulvvarme VVS Servantarmatur Kjøkkenarmatur Dusjarmatur Badekararmatur Utekran Kjøkkenservant Baderomsservant Bereder Badekar Innbygningstoalett Frittstående toalett Toalettsete Dusjkabinett Dusjløsninger Dusjpanel Dusjsett Dusjtilbehør Baderomstilbehør Rør & avløpsdeler Håndkletørker Sluk Elektro Belysning Laminat Verktøy og tilbehør Lim og hefteprodukter Beslag

Sitemap

Salgsbetingelser

Megaflis.no Megaflis er en konkurrerende leverandør av VVS artikler. De har en av sine utsalgssteder i Begern og har 15 varehus i Norge. Hvordan har de overført sin praksis til nett? Megaflis baserer seg på mye av de samme prinsippene som bad. no om man ser nærmere på navigering. En av løsningene jeg setter pris på ved Megaflis er at de forklarer hvert hoved nivå av meny systemet. Hver hoved tittel har en dypere forklaring om hva kategorien handler om og gir brukeren mulighet til å forstå bruken til de forskjellige komponentene. Dette kan være redundant for erfarne håndverkere men er til stor hjelp for hvermannsen. Teksten kan allikevel bli prangende når teksten nærmer seg tre avsnitt. Megaflis utnytter forsiden bra, men web typografien har problemer i hierarkiet. Titlene til produktene forsvinner og ligger langt under i oppmerksomhet i forhold til både løpende tekst og pris.

Pluss Forklarende kategoritekst Godt utnyttet forside

Minus Utdatert design og profil Noen litt lange kategoritekster Noe problemer med leselighet i forhold til farge En del utdaterte konvensjoner ang. navigasjon Problemer med typografisk hierarki

ANALYSE | 17

Personas, scenario ui- & arkitektur For å forstå og dokumentere brukernes behov tar jeg i bruk personas som portreterer potensielle brukere og plasserer dem i tiltenkte situasjoner. Dette hjelper meg å forstå brukerne på andre premisser. Disse scenaroene hjelper meg å visualisere tiltenkte situasjoner for å illustrere nettstedets bruk og å luke ut feil i brukeropplevelsen. For å få tankene mer konkrete slik at man kan forholde seg til dem på ett mer permanent plan visualiserer jeg nettstedsarkitekturen. Dette er for å dokumentere alle veier en bruker kan ta og for å skape ett kontrollert, konkret og gjennomtenkt navigerings miljø.

ANALYSE | 19

Scenario ui-diagram Åpne Mail

Apne nettleser

Done

Velg produkt link

Lukker nettleser

Velg baderomsmøbler

Lagrer handlekrurv

Velg spesifisering småbad

Velger handlekurv

Velg prudukt

Logger inn

Se spesifikasjoner for produktet

Velg kjøp of å legge i handlevogn

Ida Iversen Nettstedsbruker

Ustagn: «Jeg elsker elsktriske dupeditter, men det er ikke alltid jeg får dem til å funke slik jeg vil.» Jobb: Arkitekt Alder: 32 Ansvar: Visualisering, 3D layout og varekontakt. Utstyr: Samsung 900X3 Win7 laptop, Samsung Galaxy S2 mobil og Canon G12 kamera.

Mål: ˲˲ Finne nye produkter som passer i arkitektløsninger ˲˲ Bruke en leverandør som bygger bransjen er kjent med ˲˲ Ha en leverandør som kan levere over hele landet ˲˲ Ha en fast leverandør som dekker alle baderoms behov ˲˲ Ha flere alternativer til samme produkt ˲˲ Ha samme merke på alle baderoms produktene ˲˲ Detalj spesifikasjoner på produktene

Scenario: Ida vil gjerne finne nye produkter som passer inn i planene for de nye studentboligene i Stavanger. Hun trenger både baderomsløsning og om mulig vil hun finne produkter som kan passe på kjøkkenet. Hun er på jakt etter kompakte produkter som er både moderne og som kan passe inn i de små hyblene. Ida har nylig fått en mail fra Bad.no som forteller at de nå har lansert sin nye nettløsning. Hun har hatt kontakt med bad.no før og vil gjerne bruke dem igjen om hun finner de produktene hun er på jakt etter. Ida leter seg frem til mailen hun fikk og blir linke til bad. nos nye forside. Hun får oversikt over forsiden og tilbudene som ligger tilgjengelig. I navigasjonsmenyen velger hun produkter, så baderomsmøbler. Hun velger så løsningen for små bad. Linken sender henne videre til listeoversikten for små bad, hvor hun får oversikt over de forskjellige produktene i denne kategorien. Hun finner en løsning som passer og legger denne i handlekurven. Ida har allerede en konto hos bad.no så hun bruker denne å logger seg inn. Etter hun har logget seg in får hun mulighet til å lagre handlekurven. Hun lukker så ned nettsiden for å kunne komme tilbake til produktet senere. For å informere en kolega om produktet sender hun ham en mail ved hjelp av delignsfunksjonen. Så lukker hun ned nettsiden.

ANALYSE | 21

Scenario ui-diagram Åpne nettleser

Done

Skrive inn adresse

Bestille produkt

Klikke på menypunkt for produkter

Registrere kort informasjon

Klikke på meny punkt for baderomsmøbler

Registrere bruker adresse o.l

Spesifiser sortering etter merke

Se at handlekurven har produkter i seg

Spesifiser sortering etter størrelse

Bruk kjøp knapp for å putte produktet i handlekurven

Velg ønsket produkt

Lese spesifikasjonene

Stein Simonsen Nettstedsbruker

Ustagn: «Ting må være lettvint. Jeg bruker det ikke om ting tar lang tid å sette seg inn i. Mitt hoved medium er TVen, internett kommer på andreplass.» Jobb: Baderomsmontør Alder: 52 Ansvar: Selvstendig næringsdrivende Utstyr: HP Pavilion 660, Nokia N91

Mål: ˲˲ Finne eksakte produkter for å løse konktrete problem ˲˲ Finne gode tilbud ˲˲ Gjennomføre en handel raskt og enkelt ˲˲ Spesifikasjoner for produktet ˲˲ Avanserte sorteringsmuligheter

Scenario: Stein er på jakt etter ett 150cm møbel som en løsning på badet han bygger. Han vil gjerne holde løsningsdelene til samme merke; foss bad. Stein bruker nettet bare når det er nødvendig og han har fått ett tips av en kompis om at bad.no har gode tilbud og god produktdetaljer på baderoms løsningene sine. Stein navigerer seg frem til bad.nos forside og finner menyen for produkter. Han navigerer seg så til baderomsmøbler. I topp menyen finner han så foss bad. Etter siden laster inn på nytt, ser han listen under har endret seg til bare å inneholde foss bad produkter. Han navigerer seg ned ett stykke og ser at det er for mange produkter i listen til at han kan ta et valg og setter enda ett kriteria i sorteringen. Han markerer av mål øverst i menyen. Etter valget er lastet opp finner han bare ett produkt i listen: Foss bad, standard hvit høyglans 150 Dobbel. Stein ser seg fornøyd med produktet og legger det i handlekurven. Han logger seg inn og bestiller så produktet hjem til seg.

ANALYSE | 23

Baderom

Sorteringskriterie

Ønsket produkt

Baderomsmøbler

Sorteringskriterie

Ønsket produkt

Sorteringskriterie

Blandebatteri

Ønsket produkt

Sorteringskriterie

Badekar

Forside

Tilbud

Ønsket produkt

Sorteringskriterie

Toalett

Kjøp

Ønsket produkt

Sorteringskriterie

Servant

Produkter

Public

bad.no

Ønsket produkt

Sorteringskriterie

Varmtvannsbereder

Brosjyrer

Ønsket produkt

Sorteringskriterie

Kjøkken/vaskekar

Ønsket produkt

Sorteringskriterie

Rør og deler

Infosenter

Ønsket produkt

Sorteringskriterie

Varme

Ønsket produkt

Sorteringskriterie

Pumper og annet

Arkitektur Nettstedsarkitekturen legger til rette hvordan nettstedets link struktur skal lede brukeren. Det er viktig å legge en god struktur i bunn for ikke å villede bruker og for skape en god opplevelse for brukerne. Tiden investert i denne oppgaven er ikke nok til å legge en grundig og intelligent struktur. En intelligent struktur legger tilredte for flere eventualiteter og hjelper hver bruker å finne sin vei tilbake til stien om de går seg bort. I oppgaven har jeg valgt å lage en struktur som er enkel og liner. Strukturen baserer seg mye på brukerens villighet til å ta i bruk navigasjonselementene og sorteringsmetodene som er implementert. Om man gjør seg avhengig av bare ett brukermønster risikerer man miste brukere underveis, dette er ikke bra. Med mer tid vil man kunne raffinere eller utvide systemet på en måte som tar hensyn til flere brukermønstre. Jeg ser frem til å se den ferdige navigasjonsløsningen fra Reaktor.

ANALYSE | 25

Inspiration & wireframes Med skisser og wireframes begynner ulvikingen av designet. Med disse hjelpemidlene flytter jeg tankeprosessen fra 책 bare brukeropplevelsen til 책 involvere b책de estetikk og kontrast som hjelpemidler for 책 veilede brukeren.

ANALYSE | 27

Inspirasjon På samme måte som det er viktig å analysere andres løsninger for å finne interaksjonsløsninger er det viktig å hente inspirasjon. Det å se andres godt gjennomførte prosjekter gir en enorm motivasjon til å skape og gjennomføre mine egne prosjekter. Andres gode prosjekter kan til og med gi motivasjon til å starte nye prosjekter. Med ett kalkulert øye for design er det mulig å skape innovative løsninger fra design som har inspirert meg.

BEARBEIDING |29

INFOSENTER

FORSIDE

PRODUKTER

TILBUD

DEL

BROSJYRER

HANDLEVOGN

SØK

DEL

FORSIDE Baderomsmøbler

13-22 Juni

Rør og deler

PAKKETILBUD Kjøp en hele baderomspakken hos oss å få 15% avslag på hele kjøpssummen! Gjelder på varer fra ifø og foss!

NYE PRODUKTER PRODUKT TITTEL

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Fusce facilisis mi ac elit feugiat quis porta ante faucibus.

TILBUD PRODUKT TITTEL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porttitor elit, at tristique urna scelterisque anarcaisque ipsumsa.

BEST I TEST

Nunc et ligula nisl. Morbi commodo felis eu ligula congue quis blandit quam dignissim. Vivamus pellentesque rhoncus dignissim. Curabitur lacus velit,

Barerom Varme

TILBUD

Blandebatteri

Badekar

BROJYRER Servant

PRODUKT TITTEL

Proin in est lectus, sed pretium leo. Nam ultricies quam vel risus scelerisque eget suscipit neque commodo.

Phasellus congue porttitor elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit. at tristique urna scelterisque anarcaisqu.

SPICTION ITEI Sit amet, consectetur adipiscing elit. Phasellus congue porttitor elit, at tristique urna scelterisque anarcaisque et sato sumsa.

PICTION DISELIT Phasellus congue porttitor elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit. at tristique urna scelterisque anarcaisqu.

OM BAD.NO

KONTAKT

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Fusce facilisis mi ac elit feugiat quis porta ante faucibus.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Fusce facilisis mi ac elit feugiat quis porta.

Telefon: 55 98 87 50 (Betjent alle hverdager fra kl. 09-14) post@bad.no Fjøsangerveien 159 5073 BERGEN

Varmtvannsbereder

Kjøkken/Vaskekar

Baderomsmøbler

Baderom

Blandebatteri

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis blandit quam dignissim.

Badekar

Servant

Toalett

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis blandit quam dignissim.

Dusj

Varmtvannsbereder

Kjøkken/Vaskekar

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis blandit quam dignissim.

Rør og Deler

Varme

Pumper og annet

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis blandit quam dignissim.

SPICTION ITEI

PICTION DISELIT

SØK

Dusj

Pumper og annet

MEST SOLGTE PRODUKTER Sit amet, consectetur adipiscing elit. Phasellus congue porttitor elit, at tristique urna scelterisque anarcaisque et sato sumsa.

Toalett

INFOSENTER

Produktoversikt

ANBEFALINGER

PRODUKT TITTEL

PRODUKTER

OM BAD.NO

KONTAKT

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Telefon: 55 98 87 50 (Betjent alle hverdager fra kl. 09-14)

Nulla facilisi. Fusce facilisis mi ac elit feugiat quis porta ante faucibus.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Fusce

post@bad.no

facilisis mi ac elit feugiat quis porta.

Fjøsangerveien 159 5073 BERGEN

Wireframes Skrittet videre fra nettstedsarkitekturen er å gå inn i siden spesifikke funksjoner. Her kommer wireframes med som ett god verktøy. Gjennom oppgaven har jeg brukt wireframes for å kartlegge funksjonene og innholdet på sidene og sluppet å tenke på å spesifikke design detaljer. Wireframes frigjør tankeprosessen og legger til rette for full fokus på brukeropplevelse og hvordan effektivisere og tilrettelegge navigasjonen for en mest mulig nettstedsopplevelse.

BEARBEIDING | 31

DEL

FORSIDE

PRODUKTER

Baderomsmøbler Rør og deler

Barerom Varme

TILBUD

Blandebatteri

Badekar

BROJYRER Servant

Toalett

INFOSENTER

SØK

Dusj

Varmtvannsbereder

Kjøkken/Vaskekar

Pumper og annet

Produktoversikt Baderomsmøbler

Baderom

Blandebatteri

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis blandit quam dignissim.

Linn bad

Foss bad

Tema bad

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis .

Alterna

Ifø

Vikingbad

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis .

Vesterbergs

Stonearth

Små bad

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis .

90 cm møbel

120 cm møbel

150 cm møbel

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis .

Badekar

Servant

Toalett

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis blandit quam dignissim.

Dusj

Varmtvannsbereder

Kjøkken/Vaskekar

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis blandit quam dignissim.

Rør og Deler

Varme

Pumper og annet

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis blandit quam dignissim.

OM BAD.NO

KONTAKT

Class aptent taciti sociosqu ad litora torquent

Telefon: 55 98 87 50 (Betjent alle hverdager fra kl. 09-14)

per conubia nostra, per inceptos himenaeos. Nulla facilisi. Fusce facilisis mi ac elit feugiat quis porta ante faucibus.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Fusce facilisis mi ac elit feugiat quis porta.

post@bad.no Fjøsangerveien 159 5073 BERGEN

INFOSENTER

FORSIDE

PRODUKTER

Baderomsmøbler Rør og deler

Varme

Barerom

TILBUD

Blandebatteri

DEL

BROJYRER

Badekar

Servant

Toalett

HANDLEVOGN

SØK

Dusj

Varmtvannsbereder

Kjøkken/Vaskekar

Pumper og annet

Sorteringsvalg

Produsent

Mål

Løsning

Farge/tekstur

ingen

Alterna Foss bad Ifø bad Linn Bad Stonearth Tema bad Vikingbad Westerbergs

Småbad 90 cm møbel 120 cm møbel 150 cm møbel Store møbel

Med speil Uten speil Med blandebatteri Uten blandebetteri

Hvit Rødt Sort Grønt Tre Metall

LINN BAD INGRID HVIT UNDERSKAP 80CM M/SERVANT Leverandør: Linn bad Produkt: INGRID HVIT HG Varenummer: 0070100 Leveringstid: 2 uker Fri frakt

Pris inkl. mvakr 7 299,(Fra 283,- /mnd)

Kjøp

LINN BAD INGRID HVIT UNDERSKAP 80CM M/SERVANT Leverandør: Linn bad Produkt: INGRID HVIT HG Varenummer: 0070100 Leveringstid: 2 uker Fri frakt

Pris inkl. mvakr 7 299,(Fra 283,- /mnd)

Kjøp

LINN BAD INGRID HVIT UNDERSKAP 80CM M/SERVANT Leverandør: Linn bad Produkt: INGRID HVIT HG Varenummer: 0070100 Leveringstid: 2 uker Fri frakt

Pris inkl. mvakr 7 299,(Fra 283,- /mnd)

Kjøp

LINN BAD INGRID HVIT UNDERSKAP 80CM M/SERVANT Leverandør: Linn bad Produkt: INGRID HVIT HG Varenummer: 0070100 Leveringstid: 2 uker Fri frakt

Pris inkl. mvakr 7 299,(Fra 283,- /mnd)

Kjøp

OM BAD.NO

KONTAKT

Telefon: 55 98 87 50 (Betjent alle hverdager fra kl. 09-14) post@bad.no Fjøsangerveien 159 5073 BERGEN

BEARBEIDING |33

Design spesifikasjoner Til slutt vil jeg spesifisere funksjonene til forslaget. Valgene som er gjort i designet er n책 basert p책 analyse og av testing p책 personals. Prosjektet avsluttes med omkring 10-14 timers arbeid lagt inn i designet og analysen.

ANALYSE | 35

INFOSENTER | DEL | LOGIN | HANDLEVOGN (0)

FORSIDE

PRODUKTER

TILBUD

BROSJYRER

SØK

13-22 Juni

PAKKETILBUD Kjøp en hele baderomspakken hos oss å få 15% avslag på hele kjøpssummen! Gjelder på varer fra Ifø og Foss!

3 Bad.no selger Ifø og foss:

Les mer »

Høy kvalitet til tilbudspriser!

SPESIAL PRODUKT

TILBUD

BEST I TEST

ANBEFALING

PRODUKT TITTEL

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Fusce facilisis mi ac elit feugiat quis porta ante faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porttitor elit, at tristique urna scelterisque anarcaisque ipsumsa.

Nunc et ligula nisl. Morbi commodo felis eu ligula congue quis blandit quam dignissim. Vivamus pellentesque rhoncus dignissim. Curabitur lacus velit,

Proin in est lectus, sed pretium leo. Nam ultricies quam vel risus scelerisque eget suscipit neque commodo.

7899,-

Førpris 5999,-

9899,-

Førpris 4999,-

Kjøp

Nå 4569,-

Kjøp

Nå 2569,-

Kjøp

BRUKERNE ANBEFALER

NYESTE PRODUKTER

Dolor sit amet, consectetur adipiscing elit. Phasellus congue porttitor elit, at tristique urna scelterisque anarcaisque ipsumsa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porttitor elit, at tristique urna.

SPICTION ITEI Sit amet, consectetur adipiscing elit. Phasellus congue porttitor elit, at tristique urna scelterisque anarcaisque et sato sumsa.

PICTION DISELIT Phasellus congue porttitor elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit. at tristique urna scelterisque anarcaisqu.

SPICTION ITEI Sit amet, consectetur adipiscing elit. Phasellus congue porttitor elit, at tristique urna scelterisque anarcaisque et sato sumsa.

Sed et massa urna, quis viverra leo. In scelerisque rhoncus justo, non aliquam odio accumsan vitae. Cauris porta felis velit, sed consectetur diam. Mauris porta feugiat justo, vitae placerat arcu laoreet vel.

OM BAD.NO

KONTAKT

NYHETSBREV

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Fusce facilisis mi ac elit feugiat quis porta ante faucibus.

Telefon: 55 98 87 50 (Betjent alle hverdager fra kl. 09-14)

Aenean non nisi mauris. Duis dictum, sem in congue tempus.

post@bad.no Fjøsangerveien 159 5073 BERGEN

Forside 1

Basert på analysen har jeg kuttet ned på hovedmenypunktene. Dette gjøre det letter for brukeren å ta ett valg og man får et mer oversiktlig system. Dette er det høyeste nivået i menyhierarkiet.

Neste nivå er den sekundære menyen som tar imot brukerens input informasjon. Her logger brukeren seg inn og har oversikt over elementene som ligger i handlevognen. Om man ikke er logget in har man mulighet til å registrere seg ved denne menyen. Her finner man også infosenteret om man trenger assistanse.

Jeg foreslår ett hoved slideshow som kan brukes både som en informasjonskanal og en reklame kanal. Her kan bad.no komme med informasjon om nye oppdateringer så vel som nye brosjyre slipp og eventuelle utstillinger der ønsker å informere om. Dette også forsiden mer dybde og brukerne har mulighet til å ta til seg den mest aktuelle og nyeste informasjonen.

For å utnytte forsiden på en bedre måte en før har jeg lagt opp til flere spalter med informasjon som kan holde brukerne oppdatert med gode tilbud og skape liv på siden. Disse dekker de samme behovene som annonsespaltene i den gamle utgaven.

Nederst har jeg implementert en footer løsning som inneholder essensiell informasjon om bad.no. Denne metoden brukes konvensjonelt for å gjøre kontakt med bad.no enklere for kunder som trenger denne informasjonen med det samme. Footeren inneholder også kort informasjon om hva bad.no, noe som gjør det lettere for brukere å sette ting i kontekst når de navigerer til bad.no fra eksterne sider. Med mye foldermateriale foreslår jeg også at ett nyhetsbrev blir lagt til løsningen for å holde på kunder og informere om tilbud bad.no tilbyr.

LØSNING | 37

INFOSENTER | DEL | LOGIN | HANDLEVOGN (0)

FORSIDE

PRODUKTER

Baderomsmøbler Rør og deler

Badrerom Varme

TILBUD Blandebatteri

BROSJYRER Badekar

Servant

SØK Toalett

Dusj

Varmtvannsbereder

Kjøkken/Vaskekar

Pumper og annet

Produktoversikt Baderomsmøbler

Baderom

Blandebatteri

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis blandit.

Badekar

Servant

Toalett

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis blandit.

Dusj

Vasrmtvannsbereder

Kjøkken/vaskekar

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis blandit.

Rør og Deler

Varme

Pumper og annet

Nunc et ligula nisl. Morbi et commodo felis eu ligula congue quis blandit.

OM BAD.NO

KONTAKT

NYHETSBREV

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Fusce facilisis mi ac elit feugiat quis porta ante faucibus.

Telefon: 55 98 87 50 (Betjent alle hverdager fra kl. 09-14)

Aenean non nisi mauris. Duis dictum, sem in congue tempus.

post@bad.no Fjøsangerveien 159 5073 BERGEN

Produktmeny 1

Produktoversikten har fått sitt eget hovedmenypunkt. Jeg ser form meg att denne løsningen blir implementert som en egen side. Som instruert i oppgaven er løsningen inspirert av menyen laget av Reaktor for Unison forsikring. Hver produktkategori skal få navnet på kategorien sammen med en kort forklaring som utdyper hvilke produkter kategorien inneholder. Den korte informasjonens om blir presentert vil hjelpe usikre kunder å finne frem til produktet de ønsker i nettbutikken.

I toppen finner man en opplisting av de samme kategoriene som nedenfor. Disse er her for å ha ett raskt alternativ når du er kjent med siden. De er også plassert der for å bevare posisjonens sin når man navigerer seg dypere ned i strukturen. Eksempel på dette vil du se på neste side.

LØSNING | 39

INFOSENTER | DEL | LOGIN | HANDLEVOGN (0)

FORSIDE

PRODUKTER

Baderomsmøbler Rør og deler

Varme

Sorteringsvalg Alterna Uten speil

Badrerom

TILBUD Blandebatteri

BROSJYRER Badekar

Servant

SØK Toalett

Dusj

Varmtvannsbereder

Kjøkken/Vaskekar

Pumper og annet

Produsent

Mål

Løsning

Farge/tekstur

Foss bad Ifø bad Linn Bad Stonearth Tema bad Vikingbad Westerbergs

Småbad 90 cm møbel 120 cm møbel 150 cm møbel Store møbel

Med speil Med blandebatteri Uten blandebetteri

Hvit Rødt Sort Grønt Tre Metall

ALTERNA MØBELPAKKE 3-I-1 HVIT SMALL 45 CM

Pris inkl. mvakr 7 299,(Fra 283,- /mnd)

Leverandør: Linn bad Produkt: INGRID HVIT HG Varenummer: 0070100 Leveringstid: 2 uker Fri frakt

Kjøp

ALTERNA QBO MØBELPAKKE 3-I-1 HVIT HØYGLANS 45 CM

Pris inkl. mvakr 7 299,(Fra 283,- /mnd)

Leverandør: Linn bad Produkt: INGRID HVIT HG Varenummer: 0070100 Leveringstid: 2 uker Fri frakt

Kjøp

ALTERNA MØBELPAKKE 3-I-1 WENGE SMALL 45 CM

Pris inkl. mvakr 7 299,(Fra 283,- /mnd)

Leverandør: Linn bad Produkt: INGRID HVIT HG Varenummer: 0070100 Leveringstid: 2 uker Fri frakt

Kjøp

ALTERNA SLIM 90 CM UNDERSEKSJON HVIT HØYGLANS

Pris inkl. mvakr 7 299,(Fra 283,- /mnd)

Leverandør: Linn bad Produkt: INGRID HVIT HG Varenummer: 0070100 Leveringstid: 2 uker Fri frakt

Kjøp

ALTERNA SLIM 90 CM UNDERSEKSJON HVIT HØYGLANS

Pris inkl. mvakr 7 299,(Fra 283,- /mnd)

Leverandør: Linn bad Produkt: INGRID HVIT HG Varenummer: 0070100 Leveringstid: 2 uker Fri frakt

Kjøp

ALTERNA SLIM 90 CM UNDERSEKSJON HVIT HØYGLANS

Pris inkl. mvakr 7 299,(Fra 283,- /mnd)

Leverandør: Linn bad Produkt: INGRID HVIT HG Varenummer: 0070100 Leveringstid: 2 uker Fri frakt

Kjøp

OM BAD.NO

KONTAKT

NYHETSBREV

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Fusce facilisis mi ac elit feugiat quis porta ante faucibus.

Telefon: 55 98 87 50 (Betjent alle hverdager fra kl. 09-14)

Aenean non nisi mauris. Duis dictum, sem in congue tempus.

post@bad.no Fjøsangerveien 159 5073 BERGEN

Menyspesifisering Her har brukeren valgte en kategori og har da fått opp ett nytt nivå av navigasjon. Her ser du at brukeren har valgt baderomsmøbler fra forrige navigasjonsnivå og blir da bragt til denne siden. Dette navigasjonsnivået baserer seg på å legge til kriterier og trekke fra kriterier for å gjøre listen av opplistede produkter større eller mindre basert på brukerens valg. Hver kategori fra topp menyen (1) har ett utvalg opplistede alternativer for å kunne spesifisere produktet. Desto flere detaljer brukeren velger fra meny (2) jo lettere blir det for brukeren å finne produktet de er på jakt etter. Når du legger til en egenskap til produktet du er på jakt etter dukker alle produktene med denne egenskapen opp i en liste under.

LØSNING | 41