Download - Information Architecture and Shopping
S
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/
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 laterhttp://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
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
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
Good Example
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
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
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
S
Questions?