Developers: Why Care About the User? (2017)
1 like2,184 views
The document highlights the importance of user-centric design in web development, emphasizing that developers must understand the diverse needs, skills, and perspectives of users, which differ significantly from their own. It discusses various accessibility and usability principles, urging designers to consider readability, color contrast, and the complexity of language to enhance user experience. Overall, it asserts that successful products depend on empathizing with users and prioritizing their experience over the developers' preferences.
Developers: Why Care About the User? (2017)
- 1. @malekontheweb DEVELOPERS: WHY CARE ABOUT THE USER? Andrew Malek - @malekontheweb http://malektips.com/
- 5. @malekontheweb We need users to support ourselves and our• passion for development… “…the most common activity at Web sites is• fleeing the Web site” Edward– Tufte Yale Professor Emeritus– http://www.nytimes.com/– 1998/03/30/business /the-da-vinci-of-data.html
- 6. @malekontheweb • “People judge an experience by the most intense point and the end point.” –Dave Rothschild –iOS App Developer, Intel –http://bit.ly/2lutWqr
- 7. @malekontheweb • To encourage people to use our product, we must understand: • In most cases: “You are not the user” • Must empathize, understand: –Their needs and desires –Their concerns –Their skills and difficulties
- 8. @malekontheweb NOT EVERYONE… SEES THE SAME WAY AS YOU
- 9. @malekontheweb – Some people feel anxiety reading an eye chart
- 10. @malekontheweb • “Approximately 14 million Americans aged 12 years and older have self-reported visual impairment defined as distance visual acuity of 20/50 or worse.” –Center for Disease Control – Vision Health Initiative • https://www.cdc.gov/visionhealth/data/national.ht m
- 11. @malekontheweb • Condensed fonts – fit more on page, harder to read • As opposed to this non-condensed version • Light-gray on white is not easy to read • Use contrasting colors • 8-point text is too small • Increase point size – experiment
- 12. @malekontheweb “The Academic Evidence Base for Typeface• Readability” Links to various readability studies– http://typoface.blogspot.com/– 2009/08/academi c-base.html WebAIM• Color Contrast Checker http://webaim.org/resources/contrastchecker/–
- 13. @malekontheweb • Don’t use color as sole signifier for warning, alert, hyperlink, etc. • Test icons, text, etc. with color blindness simulators –http://www.color-blindness.com/coblis-color- blindness-simulator/ –http://www.etre.com/tools/colourblindsimulator
- 14. @malekontheweb – Macy’s front page…
- 15. @malekontheweb
- 16. @malekontheweb – Color Blindness Simulation – Chromatic Vision Simulator in iOS App Store
- 17. @malekontheweb NOT EVERYONE… SEES THE WORLD AS YOU SEE IT
- 18. @malekontheweb • What do these colors mean?
- 19. @malekontheweb b
- 20. @malekontheweb ♨️ A plate of hot food? Or…hot springs?
- 21. @malekontheweb OTHER DESIGN CONSIDERATIONS Left• -to-right - Right-to-left - vertical? Leave enough room in UI for larger texts?• Or will UI have too much whitespace if– translations are smaller? Don’t include text inside images• – or will require new images when translating
- 22. @malekontheweb • Always test with target audience • Again, be careful if color is only signifier • Choose icons understandable by different cultures • Icons may need text labels if ambiguous – consider “5 second rule” https://www.nngroup.com/articles/icon- usability/
- 23. @malekontheweb NOT EVERYONE… KNOWS YOUR APP OR WEBSITE LIKE YOU DO
- 24. @malekontheweb And yes, there’s plenty of animation I’m not showing here– http://www.lingscars.com/–
- 25. @malekontheweb
- 26. @malekontheweb • “Years ago, we looked at how people remembered icons in desktop applications… In the first experiment, we changed the pictures of the icons, but kept them in the same location… • In the second experiment, we kept the original pictures, but shuffled their locations on the toolbar. To our surprise, users really struggled with this.” – Jared Spool – https://www.uie.com/brainsparks/2006/02/20/orbitz- cant-get-a-date/
- 27. @malekontheweb • Just as in real estate: “Location, location, location” • In user interfaces: “Consistency, consistency, consistency!”
- 28. @malekontheweb • “Principle of Consistency and Standards in User Interface Design “ –Interaction Design Foundation –https://www.interaction- design.org/literature/article/principle-of- consistency-and-standards-in-user-interface- design
- 29. @malekontheweb Colors• Fonts (and size)• Icons• Widget locations• Widget actions•
- 30. @malekontheweb NOT EVERYONE… READS AS MUCH AS YOU
- 31. @malekontheweb – Ren and Stimpy are trademarks of Viacom International Inc – Fair Use for Educational Purposes
- 32. @malekontheweb Will users read the dialog box or just press ‘OK’?•
- 33. @malekontheweb "Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning." • Rick Cook, author • https://en.wikiquote.org/wiki/Rick_Cook
- 34. @malekontheweb "People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences." • Jakob Nielsen • https://www.nngroup.com/articles/how-users- read-on-the-web/
- 35. @malekontheweb • “Minimize alerts” • “Write short, descriptive, multiword alert titles” • “…use verbs and verb phrases…” • “Identify destructive buttons”
- 36. @malekontheweb iOS Human Interface Guidelines• - Alerts https://developer.apple.com/ios/human- interface-guidelines/views/alerts/ “Should I use Yes/No or Ok/Cancel on my• message box?” – UX Stack Exchange http://ux.stackexchange.com/questions/994 6/
- 37. @malekontheweb • People scan • Smaller sections are better (“chunking your content”) • Shorter paragraphs OK • Bulleted lists • Don’t “bury the lead”
- 38. @malekontheweb • How Users Read on the Web https://www.nngroup.com/articles/how-users- read-on-the-web/ • Writing for the Web | Chunking Your Content http://www.parentcenterhub.org/repository/w eb-chunking/ • Writing for the Web https://www.usability.gov/how-to-and- tools/methods/writing-for-the-web.html
- 39. @malekontheweb NOT EVERYONE… READS AS WELL AS YOU
- 40. @malekontheweb • When writing, know your audience
- 41. @malekontheweb • "50% of adults cannot read a book written at an eighth grade level" – Literacy Project Foundation – http://literacyprojectfoundation.org/community/statistics/ • "Studies suggest that consumer comprehension may be compromised if content exceeds a 7th-grade reading level, which is the average American reading level identified by the United States Department of Health and Human Services (USDHHS)." – Readability assessment of internet-based consumer health information. – https://www.ncbi.nlm.nih.gov/pubmed/18811992
- 42. @malekontheweb • Test readability of sentences via Flesch- Kincaid test –Approximates grade level of those who can understand text –Not exact science, but factors in number of words, syllables, and sentences
- 43. @malekontheweb This Surprising Reading Level Analysis Will• Change the Way You Write Shane Snow– https://contently.com/strategist/– 2015/01/28/th is-surprising-reading-level-analysis-will-change-the- way-you-write/
- 45. @malekontheweb
- 46. @malekontheweb –Java Fathom Java library • https://github.com/ogrodnek/java_fathom –JavaScript npm package – flesch-kincaid • https://github.com/wooorm/flesch-kincaid –Python textstat • https://pypi.python.org/pypi/textstat/ –Odyseey ruby gem • https://github.com/cameronsutter/odyssey
- 47. @malekontheweb CHATBOT SCRIPT SUGGESTIONS • What are users expected to ask? • Short sentences; don’t overwhelm user • Avoid slang (unless that is “your thing”) • Avoid gender pronouns • Proper grammar to avoid confusion • Be friendly to assuage fears of new tech • Reduce amount of passive voice
- 48. @malekontheweb • More resources for script writing, including: – https://uxdesign.cc/making-chatbots-talk-writing- conversational-ui-scripts-step-by-step-62622abfb5cf – https://medium.com/skilla/writing-for-a-chatbot- 2a9092d7316 – https://developers.facebook.com/docs/messenger- platform – https://www.smashingmagazine.com/2016/12/conv ersational-design-essentials-tips-for-building-a- chatbot/
- 49. @malekontheweb KNOW ALL YOUR AUDIENCES If your chatbot cannot recognize a user’s• input, do you say “sorry; I screwed up”? When an item isn’t available, do you ask• someone to “take a raincheck”? When putting together a calendar, if you• remove an item, do you “table it”?
- 50. @malekontheweb NOT EVERYONE… HAS THE SAME DEVICES AND BANDWIDTH YOU HAVE
- 58. @malekontheweb • “OMG: 2.1 million people still use AOL dial-up” (May 8, 2015) – http://money.cnn.com/2015/05/08/technology/aol- dial-up/ • “A couple years ago, I took a road trip from Wisconsin to Washington and mostly stayed in rural hotels … the bandwidth was roughly comparable to what I got with a 56k modem in the 90s.” – Dan Luu, Microsoft Engineer – https://danluu.com/web-bloat/
- 59. @malekontheweb Test slow network speeds in Chrome–
- 60. @malekontheweb – Fiddler Web Debugging Proxy – PC, Mac, Linux – http://www.telerik.com/fiddler
- 61. @malekontheweb – Modify speeds as needed, default is 56k modem speed – http://stackoverflow.com/questions/16276669/
- 62. @malekontheweb – Then turn on the “Simulate Modem Speeds” rule
- 63. @malekontheweb dummynet– project - http://info.iet.unipi.it/~luigi/dummynet/ Builds for FreeBSD, OSX, Linux, Windows–
- 64. @malekontheweb • Compress images • Use front-end built-tool to minify code • Inventory third-party code • Combine scripts together (except for HTTP/2) –https://yoast.com/performance-optimization- http2/ • Test on older devices!
- 65. @malekontheweb NOT EVERYONE… HAS THE TECHNICAL SKILLS YOU HAVE
- 67. @malekontheweb • Survey of Adult Skills (PIAAC) from the OECD (Organisation for Economic Co-operation and Development) • 250k adults surveyed in 2012 and 2015 –http://www.oecd.org/skills/piaac/
- 68. @malekontheweb • USA Statistics • Can’t use computers / skipped test: 19.9% • Below level 1: 15.8% • Level 1: 33.1% • Level 2: 26% • Level 3: 5.1%
- 69. @malekontheweb – Courtesy Nelsen Norman Group – https://www.nngroup.com/articles/computer-skill-levels/
- 70. @malekontheweb “Overall, people with strong technology skills• make up a 5–8% sliver of their country’s population, whatever rich country they may be coming from…. If you think something is easy, or that “surely people can do this simple thing on our website,” then you may very well be wrong.” Jakob– Nielsen
- 71. @malekontheweb • “…nearly six out of 10 millennials can't do basic tasks such as sorting, searching for and emailing data from a spreadsheet.” –THE Journal (Technological Horizons in Education) –https://thejournal.com/articles/2015/06/11/rep ort-6-of-10-millennials-have-low-technology- skills.aspx
- 72. @malekontheweb – WarGames distributed by MGM/UA Entertainment Company – Fair Use for Educational Purposes
- 73. @malekontheweb
- 74. @malekontheweb • “a more than 20% drop in discoverability” • “Task difficulty…a 21% increase” • “15% slower when the navigation was hidden” –Hamburger Menus and Hidden Navigation Hurt UX Metrics –https://www.nngroup.com/articles/hamburger- menus/
- 75. @malekontheweb – Logo and arrow
- 76. @malekontheweb – Label the hamburger menu
- 77. @malekontheweb Bottom bar of icons–
- 78. @malekontheweb NOT EVERYONE… CARES ABOUT YOU (SORRY)
- 79. @malekontheweb – It’s not about you… it’s about the user.
- 80. @malekontheweb Website analytics company– Kissmetrics created an infographic https://blog.kissmetrics.com/leave– -a-website/
- 81. @malekontheweb HOW DO I NOT LOVE THEE? LET ME COUNT THE WAYS… • Too many ads • Bad navigation • Obtrusive audio and video • Registration required • Poor legibility
- 82. @malekontheweb – Localytics – “Mobile Apps: What’s A Good Retention Rate?:” – http://info.localytics.com/blog/mobile-apps-whats-a-good-retention-rate
- 83. @malekontheweb SO MUCH CHOICE • 3.3 million Android apps on Google Play – https://www.appbrain.com/stats/number-of- android-apps – (October, 2017) • 2.2 million iOS apps available in App Store – https://www.lifewire.com/how-many-apps-in-app- store-2000252 – (May, 2017)
- 84. @malekontheweb • “…in the end, our users want high quality products delivered regularly with updates that work.” –Your Customers Don't Care if You Are Agile –Joshua a Jack –https://www.linkedin.com/pulse/your-customers- dont-care-you-agile-joshua-a-jack
- 85. @malekontheweb Your Customers Don’t Care About Your• Product: They Care About Progress Chris Brophy– https://blog.kissmetrics.com/customers– -dont- care-about-your-product/
- 86. @malekontheweb It is all about your users …. PERIOD