Ecommerce UX Nielsen Norman Group. Lecture notes

Transcription

1 Ecommerce UX Nielsen Norman Group Lecture notes

2 Table of Content 5 types of EC shoppers 3 Design Trends to Follow and 3 to Avoid

3 5 types of EC shoppers Product focused Browsers Researchers Bargain hunters One-time shoppers

4 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

5 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

6 5 types of EC shoppers Browsers

7 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

8 Researchers 5 types of EC shoppers

9 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

10 Bargain hunters 5 types of EC shoppers

11 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

12 One-time shoppers 5 types of EC shoppers

13 3 Design Trends to Follow and 3 to Avoid The Good: Bigger Product Images on Product pages on Category pages

14 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

15 3 Design Trends to Follow and 3 to Avoid The Good: More Robust Reviews adding details to reviews summarizing the reviews.

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

17 3 Design Trends to Follow and 3 to Avoid The Bad: Smaller and Hidden Product Descriptions Product descriptions seem to be disappearing

18 3 Design Trends to Follow and 3 to Avoid The Bad: Adding Items to the Cart fail to give adequate feedback

19 3 Design Trends to Follow and 3 to Avoid The Bad: Cluttered Customer Service the cluttered, cramped, and dreary dungeons of e-commerce sites

20 Mobile UX Nielsen Norman Group Lecture notes

21 Table of Content Mobile guidelines Mobile vs. Desktop

22 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

23 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

24 Groupon vs Livingsocial stock photos only push salient information off the small screen hard to find out what you're buying

25 Wikipedia giving me an outline But, other names important?

26 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

27 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

28 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