shopping apps - 5 rules of a perfect user experience
DESCRIPTION
5 golden rules how to create a perfect mobile shopping interface, that is fun to use on a mobile display. What are the basic mobile usability and design principles that lead into the mobile future?TRANSCRIPT
![Page 1: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/1.jpg)
Shopping Apps-5 rules of a perfect user experienceHamburg, 17. May 2011
Dienstag, 17. Mai 2011
![Page 2: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/2.jpg)
By 2014 12%of all e-commercetransactions willbe made with asmartphone*
* Gartner study
Dienstag, 17. Mai 2011
![Page 3: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/3.jpg)
This is great...
Dienstag, 17. Mai 2011
![Page 4: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/4.jpg)
But here is the shocking reality of mobile commerce
Dienstag, 17. Mai 2011
![Page 5: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/5.jpg)
I gave my girlfriend my phone and asked her to buy a classical star trek DVD
Dienstag, 17. Mai 2011
![Page 6: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/6.jpg)
Dienstag, 17. Mai 2011
![Page 7: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/7.jpg)
„Oh, this is the wrong product“
Dienstag, 17. Mai 2011
![Page 8: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/8.jpg)
„Hm, we don‘t have a blue ray player!“
Dienstag, 17. Mai 2011
![Page 9: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/9.jpg)
„I need a login. Oh I have to search again“
Dienstag, 17. Mai 2011
![Page 10: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/10.jpg)
„Finally we got it“
Dienstag, 17. Mai 2011
![Page 11: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/11.jpg)
Dienstag, 17. Mai 2011
![Page 12: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/12.jpg)
>30KlicksDienstag, 17. Mai 2011
![Page 13: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/13.jpg)
„Preparation“
„Searching for the right produkt“
„Purchase“
Dienstag, 17. Mai 2011
![Page 14: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/14.jpg)
Less screen space - less space for information
> -80%
Dienstag, 17. Mai 2011
![Page 15: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/15.jpg)
So, mobile shopping is not that easy.
Dienstag, 17. Mai 2011
![Page 16: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/16.jpg)
Maybe some guidelines could be useful.
Dienstag, 17. Mai 2011
![Page 17: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/17.jpg)
Dienstag, 17. Mai 2011
![Page 18: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/18.jpg)
Reduce to the essence
Dienstag, 17. Mai 2011
![Page 19: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/19.jpg)
Slide 18
What is of relevance to the user on the go?
Dienstag, 17. Mai 2011
![Page 20: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/20.jpg)
Slide 19
Should a shopping app give access to all products...
Dienstag, 17. Mai 2011
![Page 21: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/21.jpg)
Slide 20
or only to some o≠ers?
Dienstag, 17. Mai 2011
![Page 22: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/22.jpg)
Combine relevant o≠ers and full access to all your products.
Dienstag, 17. Mai 2011
![Page 23: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/23.jpg)
Slide 22
Target app: Nice integration of o≠ers...
Swipe
Dienstag, 17. Mai 2011
![Page 24: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/24.jpg)
Slide 22
Target app: Nice integration of o≠ers...
Swipe
Dienstag, 17. Mai 2011
![Page 25: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/25.jpg)
Slide 22
Target app: Nice integration of o≠ers...
Swipe
Dienstag, 17. Mai 2011
![Page 26: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/26.jpg)
Slide 23
But also easy navigation to find a certain product
Search
Dienstag, 17. Mai 2011
![Page 27: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/27.jpg)
Slide 24
And easy Navigation to find a certain product
Voice input
Dienstag, 17. Mai 2011
![Page 28: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/28.jpg)
Slide 25
And easy Navigation to find a certain product
Bar code scanner
Dienstag, 17. Mai 2011
![Page 29: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/29.jpg)
Slide 26
And easy Navigation to find a certain product
Overview with list of categories
Dienstag, 17. Mai 2011
![Page 30: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/30.jpg)
Another possibility: Di≠erent apps for di≠erent tasks
Dienstag, 17. Mai 2011
![Page 31: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/31.jpg)
The „general“ app where you can buy everything
Dienstag, 17. Mai 2011
![Page 32: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/32.jpg)
Apps for a more focused usage
Dienstag, 17. Mai 2011
![Page 33: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/33.jpg)
The icons should be easy to di≠erentiate!
Dienstag, 17. Mai 2011
![Page 34: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/34.jpg)
Or just reduce to a relevant use case in just one focussed app
Dienstag, 17. Mai 2011
![Page 35: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/35.jpg)
Slide 32
Dienstag, 17. Mai 2011
![Page 36: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/36.jpg)
Dienstag, 17. Mai 2011
![Page 37: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/37.jpg)
Make the design simple, interruptible and finger friendly
Dienstag, 17. Mai 2011
![Page 38: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/38.jpg)
Simplicity is King: If you aren’t making something easier, then it’s best to leave it out.
Dienstag, 17. Mai 2011
![Page 39: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/39.jpg)
Lets have a look at 3 di≠erent checkout screens:
Dienstag, 17. Mai 2011
![Page 40: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/40.jpg)
good
Reed AppLike a task list
Dienstag, 17. Mai 2011
![Page 41: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/41.jpg)
good
Reed AppLike a task list
better
Guilt AppOnly one screen
Dienstag, 17. Mai 2011
![Page 42: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/42.jpg)
good
Reed AppLike a task list
better
Guilt AppOnly one screen
best
Amazon App, 1-Clickno typing in at all
Dienstag, 17. Mai 2011
![Page 43: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/43.jpg)
Mobile design should be interruptiple design.
Dienstag, 17. Mai 2011
![Page 44: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/44.jpg)
Slide 39
The Kayak App, it saves every user input
Dienstag, 17. Mai 2011
![Page 45: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/45.jpg)
Slide 40
Mobile there is nothing more precious than the information you hardly typed in
Dienstag, 17. Mai 2011
![Page 46: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/46.jpg)
Finger friendlyness, touch targets should be big enough
Dienstag, 17. Mai 2011
![Page 47: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/47.jpg)
13 Pixel
Dienstag, 17. Mai 2011
![Page 48: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/48.jpg)
Dienstag, 17. Mai 2011
![Page 49: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/49.jpg)
Create a clear mobile interaction design
Dienstag, 17. Mai 2011
![Page 50: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/50.jpg)
Don‘t try to be smarter than everybody else - use the phones standards
Dienstag, 17. Mai 2011
![Page 51: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/51.jpg)
Slide 46
Use the phones interface standards
Back- Button
Content
Tab Bar
Navigation Bar
Dienstag, 17. Mai 2011
![Page 52: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/52.jpg)
Make it very clear which element ist clickable.
Dienstag, 17. Mai 2011
![Page 53: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/53.jpg)
Slide 48
Use color the guide your user
Dienstag, 17. Mai 2011
![Page 54: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/54.jpg)
Create a good flow!
Dienstag, 17. Mai 2011
![Page 55: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/55.jpg)
Wireframes and scribbles are helping a lot to create an easy user flow!
Dienstag, 17. Mai 2011
![Page 56: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/56.jpg)
Dienstag, 17. Mai 2011
![Page 57: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/57.jpg)
Take advantage of the phones features
Dienstag, 17. Mai 2011
![Page 58: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/58.jpg)
Do things, you only can do with a smartphone
Dienstag, 17. Mai 2011
![Page 59: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/59.jpg)
Slide 54
Kayak App: Useful integration of localization feature
Dienstag, 17. Mai 2011
![Page 60: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/60.jpg)
Slide 55
Bolia App: Nice example to use the camera of the phone
Dienstag, 17. Mai 2011
![Page 61: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/61.jpg)
Dienstag, 17. Mai 2011
![Page 62: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/62.jpg)
Create lovely, useful Details
Dienstag, 17. Mai 2011
![Page 63: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/63.jpg)
The standard timer app, how to improve that?
Dienstag, 17. Mai 2011
![Page 64: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/64.jpg)
Pronto Timer App
Dienstag, 17. Mai 2011
![Page 65: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/65.jpg)
Summary:
1. Reduce to the essence
Dienstag, 17. Mai 2011
![Page 66: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/66.jpg)
Summary:
1. Reduce to the essence
2. Make the design simple, interruptible and finger friendly
Dienstag, 17. Mai 2011
![Page 67: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/67.jpg)
Summary:
1. Reduce to the essence
2. Make the design simple, interruptible and finger friendly
3. Create a clear mobile interaction design
Dienstag, 17. Mai 2011
![Page 68: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/68.jpg)
Summary:
1. Reduce to the essence
2. Make the design simple, interruptible and finger friendly
3. Create a clear mobile interaction design
4. Take advantage of the phones features
Dienstag, 17. Mai 2011
![Page 69: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/69.jpg)
Summary:
1. Reduce to the essence
2. Make the design simple, interruptible and finger friendly
3. Create a clear mobile interaction design
4. Take advantage of the phones features
5. Create lovely, useful details
Dienstag, 17. Mai 2011
![Page 70: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/70.jpg)
And don‘t forget this last number...
Dienstag, 17. Mai 2011
![Page 71: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/71.jpg)
26% *Percentage of apps that where only used once.
Dienstag, 17. Mai 2011
![Page 72: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/72.jpg)
Thank you.
Dienstag, 17. Mai 2011
![Page 73: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/73.jpg)
SinnerSchrader Deutschland GmbHVölckersstraße 3822765 Hamburg
T 040.398855-0F 040.398855-55
Dienstag, 17. Mai 2011
![Page 74: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/74.jpg)
Dienstag, 17. Mai 2011
![Page 75: Shopping Apps - 5 rules of a perfect user experience](https://reader034.vdocuments.site/reader034/viewer/2022042813/548900b1b47959ec0c8b5842/html5/thumbnails/75.jpg)
Flow
Nutzerführung
Usability
Umsetzungsqualität
Interfacedesign
Markenführung
Dienstag, 17. Mai 2011