Human-Computer Interaction in eCommerce

Lecture 9: Designing for the Web Brad Myers 05-863 / 45-888: Introduction to Human Computer Interaction for Technology Executives Fall, 2018, Mini 2 2018 - Brad Myers 1 Homework 5 You should have received an email from your TA with two systems Full list is on Canvas Including email addresses, if you want to contact the author Evaluate and fill in the on-line template Due Monday

No late turn-ins for HW #5! 2018 - Brad Myers 2 Web and Mobile Topics Norman-Nielsen Group (NN/g) Alertbox E-Mail Newsletter Excellent source for data-backed recommendations for web and mobile usability and design Once a week, 1 or 2 articles Always concise and interesting and relevant Subscribe here: http://www.nngroup.com/articles/subscribe/ 2018 - Brad Myers

3 Note: Focus on Desktop Web Mobile web will be covered in future lecture Source: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ 4 2018 - Brad Myers E-Commerce Usability Web sites are a requirement for all companies Usability of web sites improving, but still bad Failure rate: in 2000: 39%; vs. in 2010: 22%. (78% success) http://www.useit.com/alertbox/usability-progress-rate.html 38.6% of e-commerce visitors were there for

information-gathering 2018 - Brad Myers 5 Source: Keys to E-Commerce Success, Nov. 2, 2009 http://www.emarketer.com/Article.aspx?R=1007358 Navigating sites is often difficult Studies find 58% or 74% failure at achieving a task at a site! Lower rate when need a sequence of steps eMarketer study: 61.5% success rate Source: Keys to E-Commerce Success, Nov. 2, 2009 http://www.emarketer.com/Article.aspx?R=1007358

2018 - Brad Myers 6 Importance of Web Usability Nearly 9 of 10 of Americans Have Negative Feelings About Brands with Poorly Performing Websites and Mobile Apps, New SOASTA Study Reveals June 20, 2013 https://www.bulldogreporter.com/dailydog/article/user-unfriendly-pr-nearly-9-of-10-o f-americans-have-negative-feelings-about-brands- For those Americans who said they have a negative reaction when a website takes too long, 28% would visit a competitors website, 27% would not trust the website, 18% would not visit that page again, and 13% would think the site may have been hacked. 2018 - Brad Myers 7

Report on Intranet Web Usability Cite: http://www.useit.com/alertbox/intranet-usability.html (12/2012) Employees' average success rate when attempting basic intranet tasks: 2002: 75% 2012: 74% By comparison, 2012s average success rate on public websites is around 80%. Website usability has improved dramatically over the past decade Based on time-on-task metrics from our recent study, a company with 10,000 employees can save $4 million per year by going from bad intranet usability (defined as being among the worst 25% we tested) to average intranet usability. (cite: http://www.useit.com/alertbox/usability-progress-rate.html) New article: The Top Enduring Intranet-Design Mistakes: 7 Deadly Sins, https://www.nngroup.com/articles/top-intranet-design-mistakes/

2018 - Brad Myers 8 Navigation Where am I? Make sure each page identifies site Logo, standard structure and consistent design Where have I been? Trails (also called breadcrumbs) (cite: http://www.nngroup.com/articles/breadcrumb-navigation-useful/) Should start with the home link Or shown by highlightingthe menu structure

9 2018 - Brad Myers Navigation 2 Where can I go? Visible links on page This has gotten dramatically worse with flat design (cite: http://www.nngroup.com/articles/flat-design-long-exposure) Standard navigation-bar is good Show where you are

Links should have meaningful labels All pages should have one-click link to the homepage cite Non-standard location: http://www.amgen.com/ 2018 - Brad Myers 10 Navigation, 3 Site Structure that maps into users ideas and tasks Product lists Make it easy to compare - cite

Shallow vs. Deep Website Hierarchies Tradeoffs depends on natural structure of infomation Nielsen reports 80% vs. 9% success rates depending on structure Cite: http://www.nngroup.com/articles/flat-vs-deep-hierarchy Never say under construction The web is always changing Except for prototypes (obviously) 2018 - Brad Myers 11 Design for multiple browsers

Cross platform design You dont control the layout or navigation People use various browsers, window sizes, etc. Various languages and fonts installed Cell phones, tablets, etc. Users can jump in middle, go back and forward Test your pages in Chrome, Safari, Microsoft Edge, Internet Explorer, and Firefox Test in all (recent) versions People dont update 2018 - Brad Myers 12 Design for multiple browsers, 2

Tools for checking: BrowserLab built into Dreamweaver http://browsershots.org/ (Thanks to Kevin McEachern for finding this link) 2018 - Brad Myers 13 Responsive Design Responsive One design fits all, or Compute design based on window width example But

Design - definition Change size, position, and even which elements are present dont just use menu icon on desktop Discoverability is cut almost in half by hiding a websites main navigation. -- cite Example: https://www.bloomberg.com/ 2018 - Brad Myers 14 Design for quick downloading Users #1 complaint is slow downloading HCIIs slow website: http://www.hcii.cmu.edu/ Users want response times of less than 1 second

Longer than 10 seconds, users cannot stay focused on the task Forwards and backwards Predictable is important Always mark pages that may be slow due to multimedia content 2018 - Brad Myers 15 Rules for links Provide links to related items of interest Misleading link names are a broken promise erodes trust and credibility (cite: http://www.nngroup.com/articles/link-promise/)

Link text should be descriptive Not: For the schedule, click here Better: See the schedule and homeworks Easier to tell what link will get to Underlined words are visually highlighted Handicapped, etc. users wont click 16 2018 - Brad Myers Rules for links, 2 Be cautious about opening up new browser windows or tabs Cant go back Lose track of all the windows Example: Stuttering Foundation shop

Example: ACM dl search: pdf vs. link for results Advertising links go to payoff pages rather than to general pages Users dont explore to find the advertised item Users want information now not 5 clicks from now Make sure the links stay valid 2018 - Brad Myers 17 Design for credibility Dont look amateurish Nice, clean designs Good graphic design and color choices Links and code that work

Copyedit and proofread (spell-check) Typo Policys Typo in title: Warantee Ability to find out privacy policy Obvious way to provide feedback to the company 2018 - Brad Myers 18 Web is an Attention Economy Ultimate currency is the users time

There is too much content on the WWW In traditional media, inertia helps keep people reading On the web, it is almost as easy to go to the competitor as to go to your next page Web content must give immediate benefits to the users or they will allocate their time to other sites 2018 - Brad Myers 19 Content Study In a study of 24 web sites, content-related issues caused 40.2% of the usability obstacles. Inaccuracies or missing information in the sites' text Text that didn't do its job -- Jared Spool, www.uie.com

Even for domain experts: https://www.nngroup.com/articles/writing-domain-experts/ 2018 - Brad Myers 20 Writing for the Web Different than manuals, papers, reports Keep text short, succinct Plain Language Is for Everyone, Even Experts - cite Better SEO ranking; has strong business value Write for scannability

Nielsen study: Users scarcely read anything during an average website visit. Eye tracking studies Cite: http://www.nngroup.com/articles/website-reading/ Begin Link Names with the Most Important Keyword (scanning in CI video of Stuttering Foundation) Multiple heading levels Bulleted lists Hypertext links and other highlighting for important words Provide sufficient information on source page to avoid needing to 21 follow links

2018 - Brad Myers Text in Pictures Dont put important text in pictures https://chi2018.acm.org/ Also cant be selected for copy/paste Exceptions 2018 - Brad Myers 22 Design for Quick Scanning Neilsen reports F shape scanning

https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ When little structure to content Across top two content rows Then, down content I cant believe its not there - cite 2018 - Brad Myers 23 Legibility Design for legibility & Readability Can be measured cite: http://www.nngroup.com/articles/legibility-readability-comprehension/

Good color choice Optimal: black text on white background Need good contrast Color blind people Background: plain-color or extremely subtle pattern Busy background and bad color choices Too much animation NOT IN ALL CAPS. READ 10% SLOWER Seems like shouting 2018 - Brad Myers 24 Page Titles

Remember to title your pages Dont use URL, codes in title Make different pages have different titles Page history, bookmarks Make first word most important Shows up in icon, abbreviations, etc. MyCompany: Welcome vs. Welcome to MyCompany 2018 - Brad Myers 25 Form Fields Provide Even better: be flexible: ignore spaces, ,-(), etc.

formats and prompts that help 4122685150 vs. (412) 268-5150 vs 1-412-268-5150 Phone numbers, social security numbers, etc. 2018 - Brad Myers 26 Why Home Page Design is Important Homepages are the most valuable real estate in the world Space on a big company's homepage is worth 1,300 times as much as land in the center of Tokyo. Cite: http://www.nngroup.com/articles/homepage-real-estate-allocation/

A homepage's impact on a companys bottom line is far greater than simple measures of e-commerce revenues: The homepage is your company's face to the world. Increasingly, potential customers will look at your company's online presence before doing business with you. 27 2018 - Brad Myers Home Page Ref: https://www.nngroup.com/articles/ecommerce-homepages-listing-pages/ Design differently than inside pages Should be obvious what company does

Welcoming & Informative www.Oath.com Good example: https://www.expedia.com/ Provide good entry into sites navigation Good example: https://sites.google.com/site/vlhcc2017/ Bad example: http://mojoyogurt.com/#/home Also news that of general interest Secondary Reason to return to site 2018 - Brad Myers 28 Home Page, 2 Provide direct access to most important functions ( Delta example) Vs. www.AA.com picture is probably too big

No splash screens waste time Dont require pop-ups for site to work One click access to home from all interior pages Good title for home page (used by search engines) Cite: Nielsens Top Ten Guidelines for Homepage Usability 2018 - Brad Myers 29 Search Nielsen: Search in upper right, especially on home page CDW

users go straight for the search option focused on improved search results (2008): The results are in: CDW has realized a 4.5% increase in sales driven through site search and a 16% increase in shoppers clicking through from results pages to product pages. cite: http://www.internetretailer.com/article.asp?id=28897 Jumps right to pages, so need to be clear where ended up Show what searched for Offer scoped search if large space, e.g.: Amazon Larger search box -> type more terms -> better results Dont use Boolean queries Men and Women Replace with ability to filter results Search

results Allow user to change sort order Sorted by quality and relevance Only give what asked for 2018 - Brad Myers Cite: http://www.uie.com/articles/three_perils_search 30 Search, 2 UIE: searching again doesnt help

First time: 23% of the users got a "no results" message. Of those users who kept going, 44% got a "no results" on the second attempt. If they still persisted, 50% got a "no results" on the third attempt. And if they were really persistent, it didn't help because 100% got a "no results" on the fourth attempt. Encouraging users to continue with helpful hints doesn't actually seem to help. So: get users relevant results on the first try! Reference 2018 - Brad Myers 31 Finding products by browsing Many people browse for products from homepage -- Cite Or search by category, then browse Clear Product Organization Polyhierarchies -- https://www.nngroup.com/articles/polyhierarchy/

Multiple ways to get to same product Graph not a tree E.g., https://www.rei.com/ - getting to hats 2018 - Brad Myers 32 Picking your URLs Company.com and www.company.com Put index.html file in every directory Pick a new company name that can be the URL Easy to remember and spell Use directory name as main URL Allow URLs to be archived and emailed

Make site friendly for incoming links Current vs. permanent reference (ACM Technews) Even for products and steps of a purchasing process Add links or redirects so old URLs still work 33 2018 - Brad Myers Fun! My list of Good and Bad Uis Please send me your examples! Bad Web Design (2015) Most are still unchanged

http://www.webpagesthatsuck.com/ (not updated since 2014) 2018 - Brad Myers 34

Recently Viewed Presentations

  • Why do we have day and night? The

    Why do we have day and night? The

    One day on Mars is about the same as one day on Earth. You should now be able to tell your partner the answer to these questions: Does the sun move ? How long does it take for the Earth...
  • Data sharing practices in the region

    Data sharing practices in the region

    For example if organization ABC have been approved funding to provide 500 cases in Irbid with regular cash assistance for a period of 6 months rather than explicitly limiting data selection to cases with high (3) or severe (4) vulnerability...
  • A Two-part Investigation of Augmentative and Alternative Communication

    A Two-part Investigation of Augmentative and Alternative Communication

    Lack of funding, long waitlists (parents often don't wait and pay out of pocket) ... Children with ASD were more likely to be using PECS, while children with DD were more likely to be using Sign language (χ 2=8.43, p=.038)
  • XIXth International Congress of the International Association for

    XIXth International Congress of the International Association for

    Those migrants with primordialist sentiment, through continuing ethnic/religious enculturation may become more stridently primordialist Those of more situationalist disposition, while taking advantage of greater diversity, enculturate elements that result in their innovating new societal forms of their ethnicity Identity processes...
  • Lesson 17 Greek Word Parts: Aero, Belli, Pan

    Lesson 17 Greek Word Parts: Aero, Belli, Pan

    Aero means "air." Aerobics is a system of exercises that promote fitness. Aerodynamics is the branch of physics related to the motion of air and other gases.
  • Stelle e stelle - Carcuro

    Stelle e stelle - Carcuro

    Then the traveller in the dark Thanks you for your tiny spark; He could not see which way to go, If you did not twinkle so. In the dark blue sky you keep, And often through my peep, For you...
  • WANT TO GET A BETTER GRADE online study tools for ...

    WANT TO GET A BETTER GRADE online study tools for ...

    1-800-936-6899. PLEASE NOTE: If you have any technical difficulties (registering, accessing, etc.) you . must call tech support before you contact me.
  • Title

    Title

    Waxing and waning throughout hospitalization. Case Review. Patient C . 83 year old female, born in Nigeria, currently living in US. Family: Matriarch of large, geographically diverse family, many medically trained. American-born grandchildren very involved in care.