Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Usability in e-commerce - a design framework

1.238 Aufrufe

Veröffentlicht am

Surely you’ve attended them - all those meetings full of high-temperature discussions about product pages, search queries and checkout flows. Everybody seems to have their own disparate opinion, everyone refers to another big name site asserting: “Let’s do it like they do, surely they've got it right”. More often than not it ends up in a chaotic jumble.

It doesn’t have to be that way. By using a solid design framework as your compass, you will navigate your future design meetings with much more confidence and efficiency. And armored with a fine selection of e-commerce usability best practices, you will be ready to think like a pro.

Veröffentlicht in: Einzelhandel
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Usability in e-commerce - a design framework

  1. 1. Usability in e-commerce a design framework to lubricate your design discussions
  2. 2. A typical project brief “Our new service should breath our brand and wow our customers. Here’s the RFQ with all the features we need, all we need you to do is to create a gorgeous design. ”
  3. 3. Johan Verhaegen – UX Strategist Human Interface Group
  4. 4. Vision & mission We give strategic advice and create the engaging user experience you need. We help our customers getting their results.
  5. 5. UX Strategy UX Design User Assistance
  6. 6. business+desig n a design framework trust-and-tried best practices
  7. 7. business+design a difficult relationship
  8. 8. Project brief uncovers a schism: business ⎟⎟ design • “Breath … wow … gorgeous” -> uncovers a schism • Business • business sees design as the final step in the creation process • a wrapper, a container or the polish of the product or service • business involves design way down the project line • instead of integrating design as integral part of the process • Design • designers don’t understand their role in the process • designers won’t get out of their comfort zone • designers ‘dribbble’ themselves to death
  9. 9. business design
  10. 10. business design
  11. 11. “Design doesn’t just make things beautiful, it makes them work.” Scott Dadich – The Age of Invisible Design (Wired, September 2013)
  12. 12. http://www.mobify.com/blog/
  13. 13. http://www.mobify.com/blog/
  14. 14. design ∞ produce
  15. 15. “Impressive!” Eh, how do we pull this off exactly?
  16. 16. Simply copying the giants is not a decent e-commerce strategy. @johanverhaegen
  17. 17. business+design a design framework to the rescue
  18. 18. Without a design framework, your designs will eventually become a chaotic jumble of preferences and opinions. @johanverhaegen
  19. 19. Design framework – foundations Design theory User research User evidence
  20. 20. Design theory - UX Authorities Scientific foundation for design decisions, interaction design principles ‘People process information in chunks’ Jakob Nielsen’s Alertbox 10 usability Heuristics for User Interface Design Susan Weinschenk
  21. 21. User research – UX references Profound research on similar products, best practices, interpretations, conclusions, … ‘Customers like to be in control of their shopping baskets’
  22. 22. User evidence – HIG projects Data gleaned directly from projects - user observations, usability testing, … ‘Users feel overwhelmed when offered to many choices’
  23. 23. Design framework – mechanism Value proposition Usability principles Design principles e-shop design
  24. 24. Value proposition shop without worries – comfortably choose between 7 million articles – enjoy the best service rent unique places to stay from local hosts in 190 countries
  25. 25. Usability principles for e-shops 1 People are motivated by control 2 People are motivated by progress 3 People process information better in bite-sized chunks
  26. 26. 1 People are motivated by control • People are motivated by autonomy • Your customer is in control and is able to do things himself e-shop design principle: always in control • “I choose whether I browse or search” • “I am in full control of my shopping basket” • “I decide where and when my goods are delivered.”
  27. 27. 2 People are motivated by progress • Small signs of progress have a big effect • show people their progression toward goals • People don’t always choose the fastest way to complete a task • offer more than one way, so that users have a choice • Keep users informed during the entire journey e-shop design principle: online is easier • “I know what the next step is. I’m confident I will succeed in ordering my stuff.” • “I easily choose between products I want to add to my basket.” • “When I’m done shopping on the site, my shopping journey isn’t finished.”
  28. 28. 3 People process information in chunks • Too many choices paralyzes the decision process • if possible, limit the number of choices to 3 or 4 • if you have to offer more options, offer them progressively • People typically remember only 4 items once, that's why they have the tendency to divide and group items e-shop design principle: progressive disclosure • “I find all the information I need, at the right time and place.” • “I don’t feel overwhelmed by information.”
  29. 29. Design framework - mechanism Value proposition Usability principles Design principles e-shop design
  30. 30. trust-and-tried best practices search + search results + product page
  31. 31. Best Practices – Search • On typical e-commerce sites customers tend to choose browsing over searching • … unless you promote search for a specific reason • Customers see the prominence of the search field as an indicator of how strongly the site recommends search as a way to find products or services.
  32. 32. Surrounding hero image Centered on homepage for maximum effect for major impact Extra dark background for better contrast Distinct color to focus on call-to-action
  33. 33. Best Practices – Search Deliver results fast with autocomplete scope suggestions
  34. 34. Distinct style in the autocomplete suggestions
  35. 35. Best Practices – Search Deliver results fast with power search tools
  36. 36. Best Practices – Search
  37. 37. Best Practices – Search results Assist the customer finding the exact product with facetted sorting Enable customers to browse in categories and subcategories If relevant, offer themes as alternative entry points Provide options to sort the results
  38. 38. Best Practices – Search results Filter for highly personalized results
  39. 39. Browse Filter Theme Sort
  40. 40. Filter Filter Filter
  41. 41. Filter
  42. 42. Best Practices – to the product page • Search • customer already knows the specific item he wants and has a good notion on how it can be identified • customer needs to understand the search space and they should be able to put in the right keywords • Browse • customer doesn’t know yet the specific item he wants • items should be categorized in a customer-logic way, consistent with other (offline and online) shopping experiences • navigation should help a customer to quickly get a mental model of the search space
  43. 43. as simple and striking as possible so it passes the blink test a clear and effective layout minimal and non-distracting navigation well-positioned call-to-action fluent shopping continuation
  44. 44. as simple and striking as possible so it passes the blink test a clear and effective layout minimal non-distracting navigation
  45. 45. well-positioned call-to-action
  46. 46. Before you take off: 3 things to take away with you
  47. 47. business+design are two sides of the same coin
  48. 48. your design framework is your compass
  49. 49. an engaging user experience makes a customer happy
  50. 50. De Regenboog 11 2800 Mechelen +32 (0)15 40 01 38 info@higroup.com johan.verhaegen@higroup.c om Human Interface Group Human Interface Group @higroup Thank you!