godt ecommerce design i praksis

34
Godt design – I praksis - Opfølgning, Neuropsykologi - Coffee Shop Usability Testing - Start med det simple, en skabelon for webshops - Webshops i praksis

Upload: soren-sprogo

Post on 18-Nov-2014

761 views

Category:

Design


1 download

DESCRIPTION

Slides fra gennemgang af praktiske redskaber til skabelse af godt eCommerce design. Opfølgning på tidligere foredrag, der tog udgangspunkt i neuropsykologi & godt design.

TRANSCRIPT

Page 1: Godt eCommerce design i praksis

Godt design – I praksis

-Opfølgning, Neuropsykologi

-Coffee Shop Usability Testing

-Start med det simple, en skabelon for webshops

-Webshops i praksis

Page 2: Godt eCommerce design i praksis

Baggrund, om Søren Sprogø

-Rådgiver om online markedsføring og konverteringsoptimering (på Jysk: Drive kunder ind i butikken, og få dem til at købe noget)

- Uddannet Datamekaniker samt Multimediedesigner. Dvs. teknisk velfunderet, men med stor viden om design, kommunikation, salg og markedsføring.

- 18 års erfaring fra IT-branchen. Bl.a. fra OFiR, Bon’a Parte, Wupti.com, Cofman.com

- Elsker teori, men kun hvis det kan omsættes til praksis.

- Ved lidt om alt, og er god til at kombinere det.

- Er mega-meget-midtjyde. Født, opvokset og bor i Silkeborg.

Page 3: Godt eCommerce design i praksis

Neuropsykologi

Når hulemanden var på jagt, skulle han ofte følge spor. Og naturen rundt omkring ham sendte alt for mange signaler til at den tænkende del af hjernen havde tid til at bearbejde det.

Ligger der en løve gemt på lur? Er der farlige planter?Er der mad? Eller spor fra noget jeg kan spise?Eller måske endda noget jeg kan parre mig med?

Hvor gemmerløven sig?

Så han udviklede synscenteret, der ”filtrerer” det vi ser i hvad der er vigtigt og ikke vigtigt, hvad vi skal passe på og hvad vi godt kan lide. Hvilket gør at vi ikke nødvendigvis ser det vi ser, men nærmere en fortolkning af det!

Allerede inden vi overhovedet er begyndt at tænke over noget, har vi fået et signal om der er noget vi skal passe på. Og dette påvirker os langt mere end vi tidligere har troet!

Page 4: Godt eCommerce design i praksis

Brugere er måldrevne

Hulemanden var desuden altid ude efteret eller andet. Han havde et mål.

Men at lede efter visuelle spor ude iden vilde natur er en kæmpe opgave,så synscenteret lærte hurtigt at sorterei hvad der måske kan bringe en ét skridttættere på målet, og sende dette videretil videre behandling i den ”tænkende”del af hjernen.

Sjovt nok surfer vi rundt på nettet påsamme facon!

Page 5: Godt eCommerce design i praksis

Squint testenHvor vil du klikke for at komme videre?

Page 6: Godt eCommerce design i praksis

Squint testenHvor vil du klikke for at komme videre?

Page 7: Godt eCommerce design i praksis

Squint testenHvor vil du klikke for at komme videre?

Page 8: Godt eCommerce design i praksis

Squint testenHvor vil du klikke for at komme videre?

Page 9: Godt eCommerce design i praksis

Squint testenHvor vil du klikke for at komme videre?

Page 10: Godt eCommerce design i praksis

Squint testenHvor vil du klikke for at komme videre?

Page 11: Godt eCommerce design i praksis

Usability Testing

...Er dyrt

...Er besværligt

...Tager lang tid

...Kræver uddannelse

...Koster mange penge

...Kræver et kæmpe laboratorier

...Kræver masser af maskiner og teknik

...Ikke nødvendigvis!

Page 12: Godt eCommerce design i praksis

Coffee Shop Usability Testing

Page 13: Godt eCommerce design i praksis

Coffee Shop Usability TestingSæt rigtige mennesker ned foran dit website, og observer hvordan de bruger det.

-Find et par venner, bekendte eller folk fra gaden.

-Orienter dem om at dette er en test af websitet, og ikke af dem. Det er derfor helt OK at give op.

-Fortæl dem en historie og stil dem en opgave.

-Observer hvordan de søger. Der er GULD at hente i at teste konkurrenter!

-Lad være med at afbryde dem, guide dem, eller at ”forsvare” dit website.

-Tag noter undervejs, stil spørgsmål bagefter.

”Forestil dig at din familie har besluttet sig for at tage på sommerferie i Spanien. Og nu vil du kigge lidt på om det er muligt at finde en god lejlighed for en billig penge.”

”Forestil dig at der lige er gået børnepenge ind. De skal dælme brændes af på noget lækkert tøj til ungerne, hvilket passer meget godt, da de trænger til nyt til foråret. Sæt i gang!”

Page 14: Godt eCommerce design i praksis

Simpel produktside

Page 15: Godt eCommerce design i praksis

Grupper informationerne

Page 16: Godt eCommerce design i praksis

Opret fix-punkter

Page 17: Godt eCommerce design i praksis

Fremhæv Call-to-action

Indkøbskurv0 varer i kurven

Læg i kurv

Page 18: Godt eCommerce design i praksis

”Katteshoppen” i praksis

Page 19: Godt eCommerce design i praksis

”Katteshoppen” i praksis

Page 20: Godt eCommerce design i praksis

Du skal have en rigtig, rigtig god grund, hvis du vil bryde brugernes forventninger til, hvor de forskellige elementer på siden findes!

User Expectations for the Location of Common E-Commerce Web Objects

Examining User Expectations for the Location of Common E-Commerce Web Objects, Januar 2001http://www.surl.org/usabilitynews/41/web_object-ecom.asp

Page 21: Godt eCommerce design i praksis

Få styr på white space

Page 22: Godt eCommerce design i praksis

Ensartet klik-indikation

Page 23: Godt eCommerce design i praksis

Centreret tekst, svært at læse

Page 24: Godt eCommerce design i praksis

Hvor er indkøbskurven?

Page 25: Godt eCommerce design i praksis

Trættende tekst

Page 26: Godt eCommerce design i praksis

Gruppering og symmetri

Page 27: Godt eCommerce design i praksis

Call-to-action, gruppering

Page 28: Godt eCommerce design i praksis

Fade effekt, whitespace

Page 29: Godt eCommerce design i praksis

Call-to-action, gruppering

Page 30: Godt eCommerce design i praksis

Lille skrift, helt anden stil

Page 31: Godt eCommerce design i praksis

Brug samme font/størrelse

Page 32: Godt eCommerce design i praksis

Prøv at lave en ”Katteshoppen.dk”

Page 33: Godt eCommerce design i praksis

Skriftstørrelser, whitespace

Page 34: Godt eCommerce design i praksis

ReferencerBøger ”Brugervenligt webdesign” af Rolf Molich

”Don’t make me think” af Steve Krug

”Rocket Surgery Made Easy” af Steve Krug

”Call to Action: Secret Formulas to Improve Online Success” af Bryan & Jeffrey Eisenberg

”The Decisive Moment – How the brain makes up its mind” af Jonah Lehrer

På nettet Artikler om webdesign på min egen blog. http://www.afdeling18.dk/tag/Design.aspx

Gode artikler andre steder på nettet. http://delicious.com/SoerenS

Gæt hvilken, der er bedst http://whichtestwon.com/ http://www.abtests.com/