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