360 likes | 372 Views
Learn why information architecture (IA) is crucial for online shopping. Explore topics such as finding products, searching vs browsing, the shopping cart, and best practices for a seamless shopping experience.
E N D
Information Architecture and Shopping Presented by Andrew Gordon
Overview • Why is IA important for shopping? • Finding products • Searching vs. browsing • The shopping cart • Checking out • Good vs. bad examples • Summary: Best Practices
http://www.ritholtz.com/blog/2011/11/buying-on-the-internet-for-24-nov/http://www.ritholtz.com/blog/2011/11/buying-on-the-internet-for-24-nov/
Why is IA Important for Shopping? • Profits rely on the site to connect users to the items they need • Imagine if we paid Google whenever it succeeded in finding what we were looking for • Or, if every time a user failed to find what they wanted on your site, you lost money; this is retail online • Bad design = less profit • We don’t want abandoned shopping carts, just like stores don’t want people walking out without purchasing anything • We want it to be as easy as possible for the shopper; fewer complexities, especially regarding checkout
Why is IA Important for Shopping? • Where does IA fit into all this? • IA’s focus is on the organization and labeling of information • Connect users to information • Products = information • Also, information about products • The ‘architecture’ of a retail store • Online shopping = reflection of shopping in person • Similar goals – connect the users to products and improve their experience in the store • Architecture = structure • Structure of the information • Structure of the process
Overview of the Process http://argus-acia.com/white_papers/shopping_cart_ia.html
Finding Products • Reality • How do we shop in reality? • Specific item in mind? • Not always – browsing in general or via category (a movie to watch?) • Always buy *only* what we came for? • Often not • How do we find what we want? • Organization, labeling, visual display • Customer support • When we shop we search, browse, browse by category, and filter in our heads. We rely on organization, sorting, structure, labeling, visuals, and the availability and accessibility of products and information. • Does this all sound familiar?
Finding Products • Catalogs or Magazines • How do we shop in these? • Specific item in mind? • Less so with catalogs than with stores • Always buy *only* what we are specifically are looking for? • Almost never • How do we find what we want? • Images, organization and labeling
Finding Products • Internet • How do we shop on the web? • Specific item in mind? • Or maybe we’re not really sure what we want? • Filters and suggested items • Just browsing? • Browse by category • So how do we find something? • Searching and browsing – including filters and sorting • Organization, labeling, visuals (pictures), just like in reality! • What do we do when we need help?
Finding ProductsFaceted Navigation • Faceted navigation is an important findability concept • Faceted navigation = filtering • It divides products into a faceted classification system • Rational sub-categories that are displayed as filters • For example – searching for pants will give the user the options to filter their results by brand, gender, color, price, size, etc. • Important because it gives users greater control over their results • Mimics the in-store approach (e.g. retail clothing store)
Finding Products • So how do we make it work? • Good navigation • Global, local, contextual, faceted • Products should be easy to find • Search, browse, filter, sort • Connect users to products that they want, might want, or might not know that they want • Clear labeling • Product images • Solid product taxonomy • Example: Google product taxonomy • Related items • Organization and ordering are vital • Some level of customer support (may not be an actual representative)
The Shopping Cart‘Managing Products’ http://www.thewebcitizen.com/2011/06/21/the-blueprint-of-a-successful-online-shopping-cart-an-inforgraphic/
The Shopping Cart • Why is the shopping cart so important? • It is the primary connection between the user and checking out • Available to users without an account; encourages account creation and purchase • It’s the means of organizing what the user is interested in purchasing • Like a real shopping cart • User finds item, places it in cart with the intent of purchasing it • List of what the user wants to purchase • Shopping cart abandonment rate is high (~60%) • Need to find a means to fix this (maybe with better IA?)
The Shopping Cart • What makes a good shopping cart? • Clearly visible and in the same location throughout (upper right?) • Well-structured • Makes sense – organized and clearly labeled so that the users understand what all of it ‘means’ – number of items, shipping costs, discounts, etc. • Ability to move quickly and easily between shopping cart and browsing for items • Customizable and easily manipulated • Delete/add/view items • Save items for later
The Shopping Cart • What makes a good shopping cart? • Clearly visible and in the same location throughout (upper right?) • Well-structured • Makes sense – organized and clearly labeled so that the users understand what all of it ‘means’ – number of items, shipping costs, discounts, etc. • Ability to move quickly and easily between shopping cart and browsing for items • Customizable and easily manipulated • Delete/add/view items • Save items for later http://argus-acia.com/white_papers/shopping_cart_ia.html
Checkout • Why is the checkout process so important? • Checkout is the last step in the shopping process • The final barrier between the customer and their money • This also means that it can become a reason why they did not finish their purchase • The longer it takes, the less likely the person is to follow through with their purchase; impulse buyers! • Purchasing mistakes can be made by the user • Sensitive information is being processed
Checkout • What makes a good checkout process? • Remove barriers • Make it as easy and as quick as possible; keep it simple! • Flows well • The process is seamless and makes sense – shipping info, payment, confirmation • ‘Next’ or ‘continue’, ‘submit’, ‘finalize’ • Make sure they know when they’re actually finished! • Make the user feel that their information is secure • And make sure it is
Good Example • Amazon main page: • Categorical searching • Also – shop by department • More items to consider; new for you; related to items you viewed; recommendations for you in your most popular categories • The entire site customizes itself to YOU; it becomes its own store based on your history and shows you what you want to see (not perfect but works well)
Good Example • Amazon results page • Sorting • Faceted navigation and filtering • In 1st case - primary filters (at top) AND secondary (to the left) • Auto-corrected • Well-organized results • Clear images • Sufficient product information (price, new/used, etc.)
Good Example • Amazon product page • Multiple, large images (can be zoomed in for detail) • Buying options, wish list • Related items • Sufficient product details/information • Q/A • Reviews
Good Example • Amazon shopping cart • Always in the upper right – clear and consistent • Item count • Hover over to see products in the cart • Clear and simple • Easy to understand • Gives only the necessary information • Ability to ‘save for later’ (might this discourage shopping cart abandonment?
Good Example • Amazon checkout process • Few pages (1-click possibility) • This makes it fast and easy, less clicking by the user • But can it become TOO easy to buy something? • Sufficient information • Addresses and payment info with last 4 digits of card • Good? How does that make the user feel about security? • Estimated delivery and order totals are prominent (important pieces of information) • Customer service (textual links) • “Place Your Order” • Good wording, the user knows that this button places the final order
Good Example • Why Amazon? • They make it easy to find things • Good search with categories, departments, autofill, related items, sorting options, faceted navigation • Account options • Great customer support (both from service representatives, site Q/A links, and other users) • Additional features • Ratings/reviews, rankings
Bad Example • What not to do • Don’t confuse the user • Don’t leave out important information • Don’t overload them with unnecessary information • Say no to bad web design • Colors, labeling, navigation, etc. • Organization and browsing need to be visually pleasing, just like you would expect from a retail store
BAD EXAMPLE! (In case you couldn’t tell)
Summary – Best Practices • Uniformity and familiarity make users comfortable • The goal is not to be creative, it is to make money • Strong searching, browsing, ordering and filtering are a must (faceted) • Make it easy to find things! Guide your users to products they may like. Give them options! • Shopping cart • Needs to be easily viewable and prominent • Well structured – organized and clearly labeled • Checkout should be quick, convenient and secure
Credits • Bidigare, Sarah. Information Architecture of the Shopping Cart: Best Practices for the Information Architectures of E-Commerce Ordering Systems. May 2000. http://argus-acia.com/white_papers/shopping_cart_ia.html • Walsh, Ivan. Good Information Architecture Increases Online Sales. October 23, 2003. http://www.sitepoint.com/increases-online-sales/ • Berry, Nicholas. Information Architecture for Retail Websites. November 26, 2010. http://www.slideshare.net/nicholasberry/information-architecture-for-retail-web-sites • Holst, Christian. Fundamental Guidelines of E-Commerce Checkout Design. April 6, 2011. http://uxdesign.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/ • Biddle, Toby. Shopping Cart Usability: Why a Simple, Honest Checkout Sequence (Usually) Wins. May 9, 2013. http://uxmag.com/articles/shopping-cart-usability • Tunkelang, Daniel. Faceted Search: Synthesis Lectures on Information Concepts, Retrievals, and Services. 2009. http://www.morganclaypool.com/doi/abs/10.2200/S00190ED1V01Y200904ICR005 • Roggio, Armando. 10 Essential Shopping Cart Features. June 1, 2011. http://www.practicalecommerce.com/articles/2821-10-Essential-Shopping-Cart-Features