Developers: Why Care About the User? (February 2020)
0 likes501 views
This document discusses why developers should care about users and consider their needs and abilities when building products. It notes that users have a variety of skills, devices, reading levels, disabilities and preferences that may differ from developers. Developers are encouraged to test their products with real users and consider factors like accessibility, internationalization, responsiveness and simplicity. Failing to understand users fully can negatively impact the usability and success of a product. The document advocates putting users first to create engaging experiences for all.
Developers: Why Care About the User? (February 2020)
- 1. @malekontheweb DEVELOPERS: WHY CARE ABOUT THE USER? Andrew Malek - @malekontheweb http://malektips.com/
- 4. @malekontheweb – Courtesy Hollywood Reporter, New York Post, Motley Fool
- 6. @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
- 7. @malekontheweb • “People judge an experience by the most intense point and the end point.” –Dave Rothschild –iOS App Developer, Intel –http://bit.ly/2lutWqr
- 8. @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
- 10. @malekontheweb – Some people feel anxiety reading an eye chart
- 11. @malekontheweb • “More than 3.4 million Americans aged 40 years and older are blind (having a visual acuity of 20/200 or less or a visual field on 20 degrees or less) or visually impaired (having a visual acuity of 20/40 or less).” –Center for Disease Control – Vision Health Initiative • https://www.cdc.gov/visionhealth/basic_informatio n/vision_loss.htm
- 12. @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
- 13. @malekontheweb • “Typography for Glanceable Reading: Bigger Is Better” –Nielsen Norman Group –https://www.nngroup.com/articles/glanceable- fonts/ • WebAIM Color Contrast Checker –https://webaim.org/resources/contrastchecker/
- 14. @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/ (Online) –https://colororacle.org/ (Windows, Mac, Linux)
- 15. @malekontheweb – Macy’s front page…
- 16. @malekontheweb
- 17. @malekontheweb – Chromatic Vision Simulator for iOS / Android – https://asada.website/cvsimulator/e/
- 18. @malekontheweb – NoCoffee Extension for Chrome https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhck mgdhmgdckeigabjfbddl (or search Google to find)
- 19. @malekontheweb – NoCoffee Extension for Chrome dialog box
- 20. @malekontheweb ACCESSIBILITY TESTING • Web: Pa11y –https://github.com/pa11y/pa11y • Android: Variety of tools –https://developer.android.com/guide/topics/ui/ accessibility/testing • iOS: – https://developer.apple.com/accessibility/ios/
- 21. @malekontheweb – Which text is easier to read?
- 22. @malekontheweb – Black text passes, white text fails…
- 24. @malekontheweb • What do these colors mean?
- 26. @malekontheweb ♨ A plate of hot food? Or…hot springs?
- 27. @malekontheweb Alternate to onsen icon?
- 28. @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
- 29. @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/
- 31. @malekontheweb – And yes, there’s plenty of animation I’m not showing here J – http://www.lingscars.com/
- 32. @malekontheweb ' + ( ♥ * * ♥ + ' (
- 33. @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/
- 34. @malekontheweb • Just as in real estate: “Location, location, location” • In user interfaces: “Consistency, consistency, consistency!”
- 35. @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
- 36. @malekontheweb • Colors • Fonts (and size) • Icons • Widget locations • Widget actions
- 38. @malekontheweb – Ren and Stimpy are trademarks of Viacom International Inc – Fair Use for Educational Purposes
- 39. @malekontheweb • Will users read the dialog box or just press ‘OK’?
- 40. @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
- 41. @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/
- 42. @malekontheweb • “Minimize alerts” • “Write short, descriptive, multiword alert titles” • “…use verbs and verb phrases…” • “Identify destructive buttons”
- 43. @malekontheweb • iOS Human Interface Guidelines - Alerts https://developer.apple.com/design/human- interface-guidelines/ios/views/alerts/ • “Should I use Yes/No or Ok/Cancel on my message box?” – UX Stack Exchange http://ux.stackexchange.com/questions/994 6/
- 44. @malekontheweb • People scan • Smaller sections are better (“chunking your content”) • Shorter paragraphs OK • Bulleted lists • Don’t “bury the lead”
- 45. @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 https://www.parentcenterhub.org/web- chunking/ • Writing for the Web
- 47. @malekontheweb • When writing, know your audience
- 48. @malekontheweb • "50% of adults cannot read a book written at an eighth grade level" – Literacy Project Foundation – https://www.literacyprojectfoundation.org/ • "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
- 49. @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
- 50. @malekontheweb • This Surprising Reading Level Analysis Will Change the Way You Write –Shane Snow –https://contently.com/strategist/2015/01/28/thi s-surprising-reading-level-analysis-will-change-the- way-you-write/
- 51. @malekontheweb – http://bit.ly/2ehzXW4 (from Microsoft)
- 52. @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
- 53. @malekontheweb AND NOW FOR THE ALTERNATE VIEW… • “Readability Formulas: 7 Reasons to Avoid Them and What to Do Instead” –UXmatters –https://www.uxmatters.com/mt/archives/2019 /07/readability-formulas-7-reasons-to-avoid- them-and-what-to-do-instead.php
- 54. @malekontheweb OTHER OPTIONS • Perform actual user research with text • Use formulas as guidance but do not change text automatically • Cliché Finder – http://www.clichefinder.net & http://cliche.theinfo.org • Hemingway App – http://www.hemingwayapp.com
- 55. @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
- 56. @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/
- 57. @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”?
- 64. @malekontheweb • 3G-only Users by State: – California: 9.7% – Texas: 7.0% – Florida: 6.0% – New York: 4.6% • "83.2% of 3G-only users in the U.S. lack a 4G rate plan, 12.7% of 3G-only users spent time exclusively in areas where 4G does not reach" – OpenSignal – "How to hasten US 3G switch-off to accelerate 5G" – https://www.opensignal.com/2019/12/18/how-to- hasten-us-3g-switch-off-to-accelerate-5g
- 65. @malekontheweb – Test slow network speeds in Chrome – Firefox has similar features in developer tools
- 66. @malekontheweb • Mac and iOS Simulator: “Network Link Conditioner” for Xcode – https://stackoverflow.com/questions/9659382/ • Android: “Android Studio” has emulator in extended controls – simulate different network types, signal strengths, etc. – https://developer.android.com/studio/run/emulator • Other tools available such as “Throttle” for Linux / Mac – check GitHub – https://github.com/sitespeedio/throttle
- 67. @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!
- 69. @malekontheweb – Laurent PELE – https://commons.wikimedia.org/wiki/File:Cd_reader_used_as_a_cup_holde r.jpg
- 70. @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/
- 71. @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%
- 72. @malekontheweb – Courtesy Nelsen Norman Group – https://www.nngroup.com/articles/computer-skill-levels/
- 73. @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
- 74. @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
- 75. @malekontheweb – WarGames distributed by MGM/UA Entertainment Company – Fair Use for Educational Purposes
- 76. @malekontheweb
- 77. @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/
- 78. @malekontheweb – Logo and arrow (chevron)
- 79. @malekontheweb – Label the hamburger menu
- 80. @malekontheweb – Bottom bar of icons (Spotify – 2/17/2020)
- 82. @malekontheweb – It’s not about you… it’s about the user.
- 83. @malekontheweb – Website analytics company Kissmetrics created an infographic – https://blog.kissmetrics.com/leave-a-website/
- 84. @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
- 85. @malekontheweb – Localytics – “Mobile Apps: What’s A Good Retention Rate?:” – http://info.localytics.com/blog/mobile-apps-whats-a-good-retention-rate
- 86. @malekontheweb SO MUCH CHOICE • 2.89 million Android apps on Google Play – https://www.appbrain.com/stats/number-of- android-apps – (February, 2020) • 1.8 million iOS apps available in App Store (approx.) – https://www.lifewire.com/how-many-apps-in-app- store-2000252 – (February, 2020)
- 87. @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
- 88. @malekontheweb • Your Customers Don’t Care About Your Product: They Care About Progress –Chris Brophy –https://medium.com/tradecraft-traction/your- customers-dont-care-about-your-product-they-care- about-progress-74beec116071
- 89. @malekontheweb It is all about your users …. PERIOD