best practices for ui/ux in ecommerce
Post on 19-Jan-2017
252 Views
Preview:
TRANSCRIPT
What is eCommerce
UX design is the process of designing (digital or physical) products that are useful, easy to use, and delightful to interact with.
What is UX?
UI Elements - Legibility
UI Elements - Colors
UI Elements - Content
Use relevant content which is familiar to users and easily take action
Navigation Menu
Currency/Country/Language selector
Service Phone number and help WishlistTrack OrderStore Finder
Home Page
User Account
Help Customers to remember your brand
Search Box
Home Page
Easy access to shopping cart
Search Page
Is the search box easy to use?
Search Page
Is your search box clearly visible and quickly noticeable?
Category Listing
Grid View
FilterSorting
Category Listing
List View
Product Page
Images for every color
Multiple Images
Show Product In Context
Product Page
Zoom Functionality
Product Page
Show Product Texture
Product Page
Videos
Product Page
360 degree interactive image
Product Page
So what’s inside
Create a sense of scale
Product Page
Product Price
1. Highlight discount if any
2. Clear Pricing
3. Product availability
Product Page
Product Options
1. Include a size Guide
2. Add color swatches3. Allow shoppers to
select quantity
Product Call to action
Product Page
Social Sharing Buttons Add to Wishlist
Write a review
Notify Me Quick Buy
Product Page
1. Empty shopping cart design
2. Mini shopping cart
3. Full page cart
Shopping cart page design
Shopping cart page design
1. Should you save the shopping carts?
2. Let the shoppers easily remove items from cart
3. Allow the user to edit cart items
4. Notify when an item has been added/deleted to cart
Shopping cart ADD-ONS
Show different payment options
Persuade your shoppers with offers
Create urgencyCross-sell/upsell
What if shoppers buy gifts for someone else?
Allow shoppers to save items for later
1. Things to take care when you opt for a single page checkout
a. Data validation
b. Organize the checkout form
c. Avoid asking unnecessary information
2. Single page checkout
Checkout
1. Design for ‘Images Off’
2. Design responsive email templates
3. Link your CTA to the right page
4. Easy to find call to action
5. Optimize for social media
6. Help recipients recognize your emails7. Remind shoppers to buy gifts for themselves
eCommerce Marketing Email
Mobile UXor
How to fit an elephant in a box
Inspiration and Sources
http://ecommerceuxdesign.com/
https://selfstartr.com/
https://uxmag.com/
https://econsultancy.com
https://www.smashingmagazine.com
http://uxmovement.com/
… and, of course, Magento.com
Queries?
Confidential
Thank You
top related