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
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
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...
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)
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...
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.
Ready to download the document? Go ahead and hit continue!