creating the best e-commerce user experience (ux) | something digital
Upload: new-york-interactive-and-digital-marketing-agency-something-digital
Post on 21-Nov-2014
11.210 views
DESCRIPTION
Online shoppers have high expectations nowadays when it comes to your website and mobile apps. They increasingly expect companies to continually provide a compelling User Experience (UX) that is useful, usable, and desirable. But how do you accomplish that? This presentation is aimed at helping you learn the current best practices in e-Commerce website design that lead to an improved User Experience (UX). In this presentation, you’ll learn about the seven building blocks essential for a great User Experience: • User Needs • Information Architecture • UI Design • Visitor Behaviors • Business Objectives • Look and Feel • Content Who Should View this: • Product Managers • CEOs • Marketing Directors • Creative Directors • Website Designers • Website DevelopersTRANSCRIPT
®
Creating the best User experienCe (Ux) in eCommerCe Magento Webinar | October 26, 2011
2
something Digital Based in New York City Founded in 1999 Built Around 3 Practice Groups: Interactive, Software, and IT Services
Horizontally-Focused: eCommerce, Corporate Websites, Portals, Enterprise AND Consumer Apps, Web Branding
Experience in Retail, Media, Fashion, Professional Services, Non-Profit, Healthcare
Awards - 2011 Webby Nominee for drugfree.org
- 2011 Gold American Graphic Design Awards for elmaphilanthropies.org & madisonsquarepark.org
- 2010 Gold American Graphic Design Award for somethingdigital.com
- 2008-2009 Silver Communicator Awards & W3 Awards for
timetotalk.org & meth360.org
Mickey Winter (Creative Director)
Jon Klonsky (Founding Principal)
Greg Steinberg (Founding Principal)
3
Why Does User experienCe matter?User Experience (UX) is the interaction a user has with a product and how they perceive it.
= $Convenient
Enjoyable
Intuitive
4
User experienCe (Ux)
UI DesignInformation Architecture
Content
Look & Feel
User Needs
Behaviors
Business Objectives
5
Create a better eCommerCe experienCeLet shoppers browse their way
Give products the spotlight
Highlight calls to action
Streamline the checkout process
steps4
6
let shoppers broWse their Way Create an intuitive navigational structure
Include multiple ways to filter & sort Incorporate options for viewing product results
Add breadcrumbs Offer a comprehensive search
Designed by Something Digital
7
let shoppers broWse their Way Create an intuitive navigational structure
Include multiple ways to filter & sort Incorporate options for viewing product results
Add breadcrumbs Offer a comprehensive search
8
let shoppers broWse their Way Create an intuitive navigational structure
Include multiple ways to filter & sort Incorporate options for viewing product results
Add breadcrumbs Offer a comprehensive search
9
let shoppers broWse their Way Create an intuitive navigational structure
Include multiple ways to filter & sort Incorporate options for viewing product results
Add breadcrumbs Offer a comprehensive search
10
let shoppers broWse their Way Create an intuitive navigational structure
Include multiple ways to filter & sort Incorporate options for viewing product results
Add breadcrumbs Offer a comprehensive search
11
give proDUCts the spotlight Provide shoppers with multiple views of each product (photos, video, etc.)
Include as much detail about a product as possible (size, material, weight, etc.)
Show related products, up-sells & cross-sells on the same page
Enable wishlists, sharing and notifications
Display detailed product reviews
12
give proDUCts the spotlight Provide shoppers with multiple views of each product (photos, video, etc.)
Include as much detail about a product as possible (size, material, weight, etc.)
Show related products, up-sells & cross-sells on the same page
Enable wishlists, sharing and notifications
Display detailed product reviews
Designed by Something Digital
13
give proDUCts the spotlight Provide shoppers with multiple views of each product (photos, video, etc.)
Include as much detail about a product as possible (size, material, weight, etc.)
Show related products, up-sells & cross-sells on the same page
Enable wishlists, sharing and notifications
Display detailed product reviews
14
give proDUCts the spotlight Provide shoppers with multiple views of each product (photos, video, etc.)
Include as much detail about a product as possible (size, material, weight, etc.)
Show related products, up-sells & cross-sells on the same page
Enable wishlists, sharing and notifications
Display detailed product reviews
15
give proDUCts the spotlight Provide shoppers with multiple views of each product (photos, video, etc.)
Include as much detail about a product as possible (size, material, weight, etc.)
Show related products, up-sells & cross-sells on the same page
Enable wishlists, sharing and notifications
Display detailed product reviews
16
highlight Calls to aCtion Add primary and secondary action items to the homepage
Place key calls to action in a terminal area
Avoid deadends, include at least one call to action on every page
Use ACTIVE language that describes the action
Differentiate between primary and secondary action items
Use whitespace, color & size to separate the actions from content
17
highlight Calls to aCtion Add primary and secondary action items to the homepage
Place key calls to action in a terminal area (the end of the viewing pattern)
Avoid deadends, include at least one call to action on every page
Use ACTIVE language that describes the action
Differentiate between primary and secondary action items
Use whitespace, color & size to separate the actions from content
New client of Something Digital, updated site launching 2012
18
highlight Calls to aCtion Add primary and secondary action items to the homepage
Place key calls to action in a terminal area (the end of the viewing pattern)
Avoid deadends, include at least one call to action on every page
Use ACTIVE language that describes the action
Differentiate between primary and secondary action items
Use whitespace, color & size to separate the actions from content
19
highlight Calls to aCtion Add primary and secondary action items to the homepage
Place key calls to action in a terminal area (the end of the viewing pattern)
Avoid deadends, include at least one call to action on every page
Use ACTIVE language that describes the action
Differentiate between primary and secondary action items
Use whitespace, color & size to separate the actions from content
20
highlight Calls to aCtion Add primary and secondary action items to the homepage
Place key calls to action in a terminal area (the end of the viewing pattern)
Avoid deadends, include at least one call to action on every page
Use ACTIVE language that describes the action
Differentiate between primary, secondary & tertiary action items
Use whitespace, color & size to separate the actions from content
Designed by Something Digital
21
highlight Calls to aCtion Add primary and secondary action items to the homepage
Place key calls to action in a terminal area (the end of the viewing pattern)
Avoid deadends, include at least one call to action on every page
Use ACTIVE language that describes the action
Differentiate between primary, secondary & tertiary action items
Use whitespace, color & size to separate the actions from content
22
streamline the CheCkoUt proCess Make the shopping cart clearly accessible from every page
Show all fees in the shopping cart Allow customers to buy without creating an account
Make the checkout a single page Design forms for fastest completion time
23
streamline the CheCkoUt proCess Make the shopping cart clearly accessible from every page
Show all fees in the shopping cart Allow customers to buy without creating an account
Make the checkout a single page Design forms for fastest completion time
24
streamline the CheCkoUt proCess Make the shopping cart clearly accessible from every page
Show all fees in the shopping cart Allow customers to buy without creating an account
Make the checkout a single page Design forms for fastest completion time
Designed by Something Digital
25
streamline the CheCkoUt proCess Make the shopping cart clearly accessible from every page
Show all fees in the shopping cart Allow customers to buy without creating an account
Make the checkout a single page Design forms for fastest completion time
Designed by Something Digital
26
streamline the CheCkoUt proCess Make the shopping cart clearly accessible from every page
Show all fees in the shopping cart Allow customers to buy without creating an account
Make the checkout a single page Design forms for fastest completion time
Designed by Something Digital
27
What have We learneD?
Incorporate the following best practices and you will create a better eCommerce experience.
Let shoppers browse their way.
Give products the spotlight.
Highlight calls to action.
Streamline the checkout process.
28
In simplest terms, UX is the overall emotional feeling a user gets after using a website.
Give them a convenient, intuitive, & enjoyable experience and they will buy.
29
resoUrCesAdaptivePath.comAlistApart.comBaymard.comHumanfactors.comJjg.netLukeWroblewski.comSmashingMagazine.comSomethingDigital.comUie.comUsabilitypost.comUseit.comUXdesign.comUXmatters.comUXmovement.comWebdesignerdepot.com
FeatUreD sitesAnnTaylor.comApple.comCrate&Barrel.comFreePeople.comModCloth.comPapyrusOnline.comPotteryBarn.comTarget.comTelcare.comTheodora&Callum.comVMVhypoallergenics.comWestElm.com
Zappos.com
®
thank yoUSomething Digital 9 East 38th Street, 8th Fl. New York, NY 10016
212.983.8373