Usability in e-commerce - a design framework
•Transferir como PPTX, PDF•
3 gostaram•1,326 visualizações
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.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (14)
Destaque
Destaque (20)
Semelhante a Usability in e-commerce - a design framework
Semelhante a Usability in e-commerce - a design framework (20)
Mais de Human Interface Group
Mais de Human Interface Group (20)
Usability in e-commerce - a design framework
- 1. Usability in e-commerce a design framework to lubricate your design discussions
- 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. ”
- 9. Johan Verhaegen – UX Strategist Human Interface Group
- 10. Vision & mission We give strategic advice and create the engaging user experience you need. We help our customers getting their results.
- 11. UX Strategy UX Design User Assistance
- 12. business+desig n a design framework trust-and-tried best practices
- 13. business+design a difficult relationship
- 14. 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
- 16. business design
- 17. business design
- 18. “Design doesn’t just make things beautiful, it makes them work.” Scott Dadich – The Age of Invisible Design (Wired, September 2013)
- 21. design ∞ produce
- 27. “Impressive!” Eh, how do we pull this off exactly?
- 28. Simply copying the giants is not a decent e-commerce strategy. @johanverhaegen
- 29. business+design a design framework to the rescue
- 30. Without a design framework, your designs will eventually become a chaotic jumble of preferences and opinions. @johanverhaegen
- 31. Design framework – foundations Design theory User research User evidence
- 32. 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
- 33. User research – UX references Profound research on similar products, best practices, interpretations, conclusions, … ‘Customers like to be in control of their shopping baskets’
- 34. User evidence – HIG projects Data gleaned directly from projects - user observations, usability testing, … ‘Users feel overwhelmed when offered to many choices’
- 35. Design framework – mechanism Value proposition Usability principles Design principles e-shop design
- 36. 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
- 37. 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
- 38. 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.”
- 39. 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.”
- 40. 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.”
- 41. Design framework - mechanism Value proposition Usability principles Design principles e-shop design
- 42. trust-and-tried best practices search + search results + product page
- 43. 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.
- 44. 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
- 45. Best Practices – Search Deliver results fast with autocomplete scope suggestions
- 46. Distinct style in the autocomplete suggestions
- 47. Best Practices – Search Deliver results fast with power search tools
- 48. Best Practices – Search
- 49. 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
- 50. Best Practices – Search results Filter for highly personalized results
- 51. Browse Filter Theme Sort
- 53. Filter
- 54. 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
- 58. 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
- 59. as simple and striking as possible so it passes the blink test a clear and effective layout minimal non-distracting navigation
- 61. Before you take off: 3 things to take away with you
- 62. business+design are two sides of the same coin
- 63. your design framework is your compass
- 64. an engaging user experience makes a customer happy
- 65. 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!
Notas do Editor
- Usability in e-commerce – a design framework to lubricate your design discussions 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 some additional e-commerce usability best practices, you will be ready to step into your next design meeting like a design pro.
- Don’t be intimidated by such requests. Just ask questions to uncover what it is this client is really looking for: Could you tell me what you mean with breath our brand? What is the story behind your logo? What do you mean by wow our customers and gorgeous design?
- “You can start with our logo for our corporate visual identity” Could you tell me what you mean with breathe our brand? Well, we have this new company logo - that can stand easily next to the logo of the greatest brands on earth by the way – and everything we develop and produce is in line with that logo.
- “We do have a corporate visual styleguide
- “All our products are thoroughly branded” What’s the story behind that logo? Eh… it’s eh… it’s designed a couple of months ago by our branding agency and it comes with a corporate visual identity guide which describes exactly where, when and how it should be used.
- “Something like this would be nice.” What do you mean by wow our customers and gorgeous design? Oh, that’s easy. Look at this website I came across a couple of weeks ago. It’s from a company called Luhse Tea and they sell - well, obviously - loose tea instead of teabags and they have declared ‘war’ to the teabag. Brilliant! And look at the gorgeous design: graphic novel - comic book style with tommy guns and all. How cool is that! You might be mistaken for thinking Luhse Tea was a comic book site on first glance. The clever use of highly stylised graphics certainly makes you take a second look. This ecommerce website makes great use of copy and distinct visual style.
- Agenda for today: The schism between business and design Your own design framework to the rescue Best practices
- Schism between 2 stakeholders involved in digital projects: business people who define the project, write the requirements and list the features designers who are supposed to create a beautiful design for the project and are perfectly happy in their traditional comfort zone of designing screens for features that are defined by business. These designers don’t feel the urge to take up a more fundamental role in creating value for the project as a whole.
- Challenge: how can we make business and design work more closely together, so that the end result is a more valuable product or service for the customer?
- Dadich: “”
- Everyone knows the famous bottles of Heinz… Beautiful, OK, but they don’t work… So Heinz searched for a solution that was beautiful AND worked…
- They didn’t only design the product, but they designed the experience. “OK, but that’s product design. How can we make a design difference when selling products via an eshop?”
- This watch is not only designed to be beautiful, but also to work, to be pleasant to wear. While designing, the whole experience of the watch is kept in mind.
- The new branding: perfect blend between visual branding and design branding “Landing on the home page of wallet maker Bellory and you'll be greeted with a relatively simple layout. Delve a little deeper into this ecommerce website and you'll find a wide variety of very different designed pages highlighting individual products. Incorporating custom illustration and fun demonstration videos the Bellroy site is a great example of how flexible Shopify can be when presenting your products online.”
- The Slim your wallet tutorial is a fun and interesting guide to 'loosing the wallet bulge', culminating in some rather nice photographs of the product and links to all their products. You can fill the wallet with cards and cash and you see what will happen to the Bellroy wallet and to a normal wallet.
- Spoiler: it’s not by epiphany’s
- Tweet Johan At the first design meeting everyone tosses his or her own opinion in the table. Each opinion is based on personal preference and experience. Result: “Let’s just do what Amazon and Google do…”. And you end up with a deceptively safe design decision that is simply a copy of what the giants of this digital universe do. And that’s a shame. Those giants’ designs are probably NOT the best solution for you. On the contrary, many of the design patterns out there are dark patterns: patterns intentionally applied to mislead or at least direct users to do things that are beneficial for the company, not necessarily for the user.
- Instead of copying the giants, dare to create your own design framework so you can make solid and well-founded design decisions. How can design prove itself relevant to business and the creation process of a product or service?
- Tweet Johan The design framework can be the answer to all opinions and questions. It has to be the basic idea in every discussion. If you take on the challenge to create and apply a design framework as your compass, your design discussions will become founded, focused and relevant.
- For your design framework, you have to retrieve information from different sources to evidence your framework.
- A design framework is built upon design theories
- A design framework is built with best practices
- A design framework is built with experiences and user evidence from previous projects
- To create your own design framework, take these 4 steps: Define the value proposition of your product or service Select the proper usability principles Translate those principles into design principles, relevant for your project Start designing.
- Defining the value proposition is not hard. You probably have it already written down somewhere in a project definition document, a project pitch, a roadmap or the like. You don’t need an ‘official’ value proposition. A committed product manager will explain it to you in 2 sentences. On the slide you see the value proposition of bol.com and airbnb
- Usability principles are based on scientific research of human behavior, cognitive processes, emotional reactions and so on. For example, if you are working on an e-shop a relevant usability principle is that ‘people are motivated by control’ or that ‘people process information in bite-sized chunks’. In numerous studies you will read that e-shop customers don’t like unwanted surprises in their shopping carts and that they don’t like search result pages with 60 items listed in seemingly random order. At least, usability principles will prevent you from these unforgivable mistakes.
- Thirdly, translate the general usability principles into specific design principles that keep you focused during your design work. ‘Always in control’ might be an interesting design principle to work with. Translate the design principles in user quotes the whole team can understand.
- ‘Progressive disclosure’ might be another design principle.
- When you got this covered, start designing. You will immediately experience that your design meetings will become a lot more focused and that your design decisions will be made a lot faster and to-the-point. And when you go out and usability test your early designs, you will see that your users will understand your proposed solution a lot better.
- =
- http://www.webcredible.co.uk/user-friendly-resources/web-usability/ecommerce-findability.shtml http://www.measuringusability.com/blog/search-browse.php http://www.smashingmagazine.com/2013/11/11/guidelines-navigation-categories-ecommerce-study/
- Position top-right corner of the header - least attention center of the header - lots of attention integrated in the navigation bar - attention depends on implementation surrounding images to have a major impact cf. airbnb hero image Contrast increase the contrast of the border, input text and search button will make it stand out Size customers will perceive a larger search field as an encouragement to use it
- When people use search, they want it to deliver results fast, or at least see progress. autocomplete scope suggestions dedicated search tools Autocomplete scope suggestions encourages users to specify their search while performing it. do this by adding a distinct style in the autocomplete suggestions. distinguish the suggested search scope from the suggested search query
- Jotter Multi Search This search allows people to enter up to 50 products (1 per line) in a search field. Every product gets a list of search results.
- Facetted sorting = a set of category-specific filtering and sorting options to retrieve of the specific product a customer Enable customers to browse through categories and subcategories typically in a left-hand side pane truncate long lists (+10 items) with a clear link to display more Provide options to sort the results e.g. popularity, rating, price, name,… If relevant, offer themes as alternative entry points
- Provide options to filter the results e.g. brand, promotion, dietary,…
- Only the most essential filters are immediately visible. These filters are those most used (most clicks) by the users.
- The user can ask for more filters.
- http://www.webcredible.co.uk/user-friendly-resources/web-usability/ecommerce-findability.shtml http://www.measuringusability.com/blog/search-browse.php http://www.smashingmagazine.com/2013/11/11/guidelines-navigation-categories-ecommerce-study/
- The user has two options: - Use the search function - Scroll through the different possibilities
- The navigation model is set up so that the user can easily find the type of lawn mower he/she needs. The user can choose to search, to scroll down to see the different types or the use the left side navigation.
- As simple and striking as possible so it passes the blink test the commonly accepted 3 seconds you get to orient and guide a customer before he hits the back button A layout that is clear and effective display the add to cart button near large, high-quality images and away from cluttered text With minimal navigation as not to distract a customer from completing the on-page goal Facilitate a fluent shopping experience by suggesting alternative and supplementary products
- The user only gets the information he/she really needs, only the information that is really interesting at this moment, for this user.
- value proposition > search/browse > buy > optimal UX