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/

5 types of EC shoppers♦ Product focused

♣ 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/

5 types of EC shoppers♦ Browsers

♣ 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/

5 types of EC shoppers♦ Researchers

http://www.nngroup.com/articles/ecommerce-shoppers/

5 types of EC shoppers♦ Bargain hunters

♣ 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/

5 types of EC shoppers♦ Bargain hunters

http://www.nngroup.com/articles/ecommerce-shoppers/

5 types of EC shoppers♦ One-time 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/

5 types of EC shoppers♦ One-time 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:

★ 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.

♦ For desktop♣ avoid horizontal scrolling

♦ For mobile♣ for touch-screens, horizontal swipes are often fine

http://www.nngroup.com/articles/mobile-content-is-twice-as-difficult/