Download - Godt eCommerce design i praksis
![Page 1: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/1.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/5.jpg)
Squint testenHvor vil du klikke for at komme videre?
![Page 6: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/6.jpg)
Squint testenHvor vil du klikke for at komme videre?
![Page 7: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/7.jpg)
Squint testenHvor vil du klikke for at komme videre?
![Page 8: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/8.jpg)
Squint testenHvor vil du klikke for at komme videre?
![Page 9: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/9.jpg)
Squint testenHvor vil du klikke for at komme videre?
![Page 10: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/10.jpg)
Squint testenHvor vil du klikke for at komme videre?
![Page 11: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/12.jpg)
Coffee Shop Usability Testing
![Page 13: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/14.jpg)
Simpel produktside
![Page 15: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/15.jpg)
Grupper informationerne
![Page 16: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/16.jpg)
Opret fix-punkter
![Page 17: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/17.jpg)
Fremhæv Call-to-action
Indkøbskurv0 varer i kurven
Læg i kurv
![Page 18: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/18.jpg)
”Katteshoppen” i praksis
![Page 19: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/19.jpg)
”Katteshoppen” i praksis
![Page 20: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/20.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/21.jpg)
Få styr på white space
![Page 22: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/22.jpg)
Ensartet klik-indikation
![Page 23: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/23.jpg)
Centreret tekst, svært at læse
![Page 24: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/24.jpg)
Hvor er indkøbskurven?
![Page 25: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/25.jpg)
Trættende tekst
![Page 26: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/26.jpg)
Gruppering og symmetri
![Page 27: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/27.jpg)
Call-to-action, gruppering
![Page 28: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/28.jpg)
Fade effekt, whitespace
![Page 29: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/29.jpg)
Call-to-action, gruppering
![Page 30: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/30.jpg)
Lille skrift, helt anden stil
![Page 31: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/31.jpg)
Brug samme font/størrelse
![Page 32: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/32.jpg)
Prøv at lave en ”Katteshoppen.dk”
![Page 33: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/33.jpg)
Skriftstørrelser, whitespace
![Page 34: Godt eCommerce design i praksis](https://reader033.vdocuments.us/reader033/viewer/2022051609/546a38feaf7959973b8b4934/html5/thumbnails/34.jpg)
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/