Ecommerce UX Nielsen Norman Group. Lecture notes

Similar documents
CS 160: Lecture 15. Outline. How can we Codify Design Knowledge? Motivation for Design Patterns. Design Patterns. Example from Alexander: Night Life

New Phoenix User Interface Transition Guide November 4, ebuy Help: (814) or

Kovan International. e-commerce Platform. UX/UI Project.

Creative Services. ebay Store & Listing Design ENTERPRISE PACKAGE

Guidebook ONLINE ORDERING MADE EASY!

UX Case Study 1 Objective

Competitors Usability Heuristics App Analysis. Sandeep Hundal UX Course Competitors Usability Heuristics App Analysis

HOLIDAY HOT SHEET N O V E M B E R 6,

10 TESTED LANDING PAGE ELEMENTS GUARANTEED TO IMPROVE CONVERSIONS

POWER UP PLUS: 6 TECHNOLOGIES TO ENHANCE YOUR SHOPIFY PLUS STORE CONTRIBUTING PARTNERS:

Table of Contents Page 2

Vehicle Deal Page. Dealer.com Product & UX

25 WAYS TO MAKE YOUR MOBILE E-COMMERCE REVENUE SKYROCKET

Ecommerce Fashion Marketing Checklist. /smartrmail

Topic 2: Website Usability. 1. Make the Site s Purpose Clear: Explain Who You Are and What You Do

D2L vs. Canvas Mobile Experience

eprocurement Website Training Guide

ebook Tablet Commerce: Ecommerce King in 2013

You can make your websites responsive with WebSite X5 version 12. Updating them? No problem!

Introduction to emanagement MGMT 230 WEEK 4: JANUARY 29. Implementing basic e-commerce: technologies and options

Workshop with ROCKWOOL editors. Helle Jensen, Senior ux consultant

Digital Marketing Manager, Marketing Manager, Agency Owner. Bachelors in Marketing, Advertising, Communications, or equivalent experience

FOCUS: Kurio. 1 of 9 FOCUS: Kurio. Class Handout

Solving the Windows 8 Puzzle

aveo.com.au/residents

Usability and Small Screens SWEN-444

2013, Active Commerce 1

The Mobile Movement Understanding Smartphone Users. Google/IPSOS OTX MediaCT U.S., April 2011

Understanding Today s Mobile Device Shopper. Google/Compete, U.S. Mar 2011

Web Design and Usability. What is usability? CSE 190 M (Web Programming) Spring 2007 University of Washington

Checkout Success Page v2.x Configuration for Magento 2

10 Usability Heuristics by Nielsen; Lazada and Shopee Review

Increasing Conversions with Retargeting s and Website Personalization Quick and Easy Ideas to Implement before the Holidays

Update Manual App World Blackberry Disappeared After Software

MIT GSL week 4 Wednesday. User Interfaces II

The Quick Guide to Better Site Search

Google & Mobile SEO 1

Webstore user guide. Table of Contents

Overview In this lab you will Explore some of the features of the new Windows 8 Interface.

Technology Quick Tips

2017 Q1 Mobile Commerce Insights Report. Actionable insights on Q1 benchmarks and 2017 trends

InstantSearch+ Documentation for WooCommerce

Reviewing and Evaluating your Website

Order Entry Guide Table of Contents

AMERICAN EAGLE. Usability Testing. Page 1 Cover Page 2 Survey Pages 3-4 Sonja Pages 5-6 Danijela. Group 2 12/5/13

KOHLS.COM - PRIVACY POLICY

The Smartphone Consumer June 2012

ecommerce USER GUIDE

InstantSearch+ Documentation for Shopify

Online Banking ENHANCEMENT

E-COMMERCE HOMEPAGE UX DESIGN TIPS THESE TIPS WILL HELP YOU CREATE A USABLE E-COMMERCE WEBSITE AND TURN YOUR HOMEPAGE INTO A CONVERSION MAGNET

ways to present and organize the content to provide your students with an intuitive and easy-to-navigate experience.

A Usability Evaluation of Google Calendar

How to create a web quote on thermofisher.com Create an online web quote for easy purchase order generation and order submission.

NB Linear Mobile. A Mobile Solution for all your Linear Motion needs

CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation

The guide for the Merrill Mobile catalog available for tablet-based devices. Version 3.0

USABILITY WEBSITE AUDIT USCHOOL.COM.UA TECHNICAL SPECIFICATIONS

How to Choose the Right Designer: A Checklist for Professional Web Design

Pocket Salon Guide. salonbiz.com

This study guide is continually being revised and improved. When preparing for the exam, remember to check the website for the latest version.

Site Owners: Cascade Basics. May 2017

New retailing. May 9 th, 2013 Rob de Jonge, General Manager, Venda Software Development

Version 14 Supplemental Manual

Windows 8.1. Tiles come in four shapes: small, medium, wide, and large. The red outlined tiles are live tiles.

Set-up a Donation Option in Facebook

Shopper Guide v.3: 3/23/16

SPS Online Store User Tutorial

Overture Advertiser Workbook. Chapter 4: Tracking Your Results

All About Catalog. Contents. West Virginia University Information Technology Services. ecommerce End User Advanced Guide

360 View on M-Commerce. Presented by S. Baranikumar

Sitecore E-Commerce Cookbook

Marketing Best Practices

Chrome. Browsing in Chrome. The Omnibox. Video: Browsing in Chrome. To use the Omnibox: Omnibox suggestion icons. Page 1

Software Requirements Specification Version 1.0 Team 3 Creation Station

Meet our Example Buyer Persona Adele Revella, CEO

I m going to be introducing you to ergonomics More specifically ergonomics in terms of designing touch interfaces for mobile devices I m going to be

Getting Started: Setting up Your ecommerce Site

Getting Started with Internet Explorer 10

The Utherverse Clothing System

Mobile UI. Device, Input, Interaction Characteristics. Mobile UI 1

State of Mobile Commerce. South East Asia: H1 2016

Alamo Ag Customer Service Interface Guide

On Monday, July 26 th SunRISE will have a different look & feel. We think you will be happy with the changes!

QNet Online Ordering Ordering Instructions

SellerDeck Release Notes

User Instructions for the KITS ios Mobile Application

STX & ios Devices. Setting up and using STX iphone, ipad, ipod touch

Usability Test Report: Bento results interface 1

Table of Contents. Introduction. Buttons of the table. Using the touchscreen. Using the keyboard. Connecting to Wi-Fi. Applications.

A WARM WELCOME TO OUR BRAX B2B PORTAL!

New developments Social Media

Interaction Techniques. SWE 432, Fall 2017 Design and Implementation of Software for the Web

Using Windows 8 (and new Windows 8.1)

SECRETS OF A GREAT WEBSITE DESIGN

Enhanced new user experience with simple to use navigation and better buying experience. Trade accounts will see current order status, and history

Basic & Pro Resellers

INTEGRATE MOBILE MESSAGING INTO YOUR MARKETING MIX TO DRIVE IMMEDIATE ROI. Learn more

OX App Suite 7.10 Highlights

Analytics, Insights, Cookies, and the Disappearing Privacy

Transcription:

Ecommerce UX Nielsen Norman Group Lecture notes

Table of Content 5 types of EC shoppers 3 Design Trends to Follow and 3 to Avoid http://www.nngroup.com/

5 types of EC shoppers Product focused Browsers Researchers Bargain hunters One-time shoppers http://www.nngroup.com/articles/ecommerce-shoppers/

Product focused 5 types of EC shoppers know exactly what they want. goal-oriented want the site to give it to them quickly The goal is speed. Get shoppers to the right product, let them know it s the right product, and take them to checkout. Key elements: Clear identification of each product through descriptive names and clear product images An effective search that makes it easy to quickly locate items of interest and to pick the right item from the search-results list Easy access to previously purchased items for simple reorder A streamlined checkout to get shoppers in and out as quickly as possible http://www.nngroup.com/articles/ecommerce-shoppers/

Browsers 5 types of EC shoppers leisurely shoppers who go to their favorite sites or new sites for inspiration or to kill time people who choose to spend time on your site, with your company, with your brand. turn these browsers into buyers what s new, what s popular, and what s on sale see what changed he latest items, the latest deals, what other people are buying Key elements: Listings of new, popular, and sale products Easy access to new inventory through related links and recommended products Ability to share information about products they like http://www.nngroup.com/articles/ecommerce-shoppers/

5 types of EC shoppers Browsers http://www.nngroup.com/articles/ecommerce-shoppers/

5 types of EC shoppers Researchers goal driven. plan to purchase, but the purchase may happen today, tomorrow, next week, or in six months. collecting information about products and prices Key elements: Clear and detailed product descriptions Definitions of unfamiliar terminology or product features, in context and written in easy-to-understand language User reviews Easy comparison between products Easy-to-edit shopping carts that retain products between visits http://www.nngroup.com/articles/ecommerce-shoppers/

Researchers 5 types of EC shoppers http://www.nngroup.com/articles/ecommerce-shoppers/

Bargain hunters 5 types of EC shoppers look for the best deal possible simply looking for bargains, enticed into purchases by the idea of getting a good deal. locate deals. Prices need to be clearly listed. Sale items must not be hidden on the site, but listed alongside full-price items, with savings highlighted. Available discounts must be easy to use. Key elements: Displaying sale items alongside full-priced inventory, as well as providing a clear section for discounted items Listing product prices and associated discounts and savings Allowing easy coupon redemption or applying discounts automatically when criteria are met http://www.nngroup.com/articles/ecommerce-shoppers/

Bargain hunters 5 types of EC shoppers http://www.nngroup.com/articles/ecommerce-shoppers/

One-time shoppers 5 types of EC shoppers product focused, browsing, bargain hunting, or researching gift-card recipients, gift-card buyers, or gift buyers. no intentions to visit the site after the initial purchase not familiar with the site A main complaint is site registration Key elements: Clear site navigation Complete product descriptions Clear and trustworthy company information Checkout without registration http://www.nngroup.com/articles/ecommerce-shoppers/

One-time shoppers 5 types of EC shoppers http://www.nngroup.com/articles/ecommerce-shoppers/

3 Design Trends to Follow and 3 to Avoid The Good: Bigger Product Images on Product pages on Category pages http://www.nngroup.com/articles/e-commerce-usability/

3 Design Trends to Follow and 3 to Avoid The Good: Bigger Product Images pictures that look like banner ads will be ignored stock photos hurt more than they help http://www.nngroup.com/articles/photos-as-web-content/

3 Design Trends to Follow and 3 to Avoid The Good: More Robust Reviews adding details to reviews summarizing the reviews. http://www.nngroup.com/articles/e-commerce-usability/

3 Design Trends to Follow and 3 to Avoid The Good: Coupons You Can Use making it easier than ever for shoppers to apply discounts or even to automatically receive them. http://www.nngroup.com/articles/e-commerce-usability/

3 Design Trends to Follow and 3 to Avoid The Bad: Smaller and Hidden Product Descriptions Product descriptions seem to be disappearing http://www.nngroup.com/articles/e-commerce-usability/

3 Design Trends to Follow and 3 to Avoid The Bad: Adding Items to the Cart fail to give adequate feedback http://www.nngroup.com/articles/e-commerce-usability/

3 Design Trends to Follow and 3 to Avoid The Bad: Cluttered Customer Service the cluttered, cramped, and dreary dungeons of e-commerce sites http://www.nngroup.com/articles/e-commerce-usability/

Mobile UX Nielsen Norman Group Lecture notes

Table of Content Mobile guidelines Mobile vs. Desktop http://www.nngroup.com/

Mobile guidelines design a separate mobile site. different platforms require different user interface designs. have clear, explicit links from the full site to the mobile site and from the mobile site to the full site Redirection design for the small screen The fat-finger syndrome limit the number of features include a visible cue when people can swipe avoid swipe ambiguity: don't employ the same swipe gesture to mean different things on different areas of the same screen http://www.nngroup.com/articles/mobile-usability-update//

Mobile guidelines Mobile Is Less Forgiving than Desktop Desktop copywriting must be concise. Mobile copywriting must be even more concise. feature set should be much smaller for a mobile site than for a desktop site. Defer Secondary Content When Writing for Mobile Users When writing for mobile users, focus their attention on the essential content. progressive disclosure Mobile Content Is Twice as Difficult http://www.nngroup.com/articles/defer-secondary-content-for-mobile/

Groupon vs Livingsocial stock photos only push salient information off the small screen hard to find out what you're buying http://www.nngroup.com/articles/defer-secondary-content-for-mobile/

Wikipedia giving me an outline But, other names important? http://www.nngroup.com/articles/defer-secondary-content-for-mobile/

Mobile vs. Desktop More painful to use the Web on mobile phones than on desktop computers Reasons Slower downloads No physical keyboard for data entry No mouse for selection; no mouse buttons to issue commands and access contextual menus (indeed fewer signaling states) a touchscreen only signals "finger-down/up," whereas a mouse has hover state in addition to button press/release) Small screen (often with tiny text) Websites designed for desktop access instead of following the usability guidelines for mobile Whacky app UIs that lack consistency http://www.nngroup.com/articles/mobile-content-is-twice-as-difficult/

Mobile vs. Desktop Analysis of privacy policy (Singh et al.) 10 popular websites: ebay, Facebook, Google, Microsoft, Myspace, Orkut, Wikipedia, WindowsLive, Yahoo!, and YouTube 50 test participants completed reading comprehension tests Desktop screen: 39.18% comprehension score Mobile screen: 18.93% comprehension score must be 60% or higher for a text to be considered easy to understand Mobile Content Is Twice as Difficult When reading from an iphone-sized screen, comprehension scores for complex Web content were 48% of desktop monitor scores http://www.nngroup.com/articles/mobile-content-is-twice-as-difficult/

Mobile vs. Desktop A smaller screen hurts comprehension for two reasons: Users can see less at any given time. must rely on their highly fallible memory when trying to understand anything that's not fully explained within the viewable space. Less context = less understanding Users must move around the page more using scrolling to refer to other parts of the content Scrolling introduces 3 problems: For desktop It takes more time, thus degrading memory. It diverts attention from the problem at hand to the secondary task of locating the required part of the page. It introduces the new problem of reacquiring the previous location on the page. avoid horizontal scrolling For mobile for touch-screens, horizontal swipes are often fine http://www.nngroup.com/articles/mobile-content-is-twice-as-difficult/