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?