Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Developers: Why Care About the User? (Updated)


Published on

As developers, we deal with technologies, frameworks, and data, making it very easy to forget that what we create is meant for real people to use.

While designers and UI specialists should handle most decisions about how a product or service looks and feels, we should all be on the same page to make better solutions. Whether we are building an interface for a desktop website, mobile application, or chatbot, what are some basic design concepts that we as developers can pick up, allowing us to be on the same page with designers and product owners during product meetings and discussions?

Published in: Design
  • Be the first to comment

  • Be the first to like this

Developers: Why Care About the User? (Updated)

  1. 1. @malekontheweb DEVELOPERS: WHY CARE ABOUT THE USER? Andrew Malek - @malekontheweb
  2. 2. @malekontheweb THE SELFISH VIEW…
  3. 3. @malekontheweb
  4. 4. @malekontheweb ANOTHER VIEW…
  5. 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–– 1998/03/30/business /the-da-vinci-of-data.html
  6. 6. @malekontheweb • “People judge an experience by the most intense point and the end point.” –Dave Rothschild –iOS App Developer, Intel –
  7. 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. 8. @malekontheweb NOT EVERYONE… SEES THE SAME WAY AS YOU
  9. 9. @malekontheweb – Some people feel anxiety reading an eye chart
  10. 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 • m
  11. 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. 12. @malekontheweb “The Academic Evidence Base for Typeface• Readability” Links to various readability studies–– 2009/08/academi c-base.html WebAIM• Color Contrast Checker–
  13. 13. @malekontheweb • Don’t use color as sole signifier for warning, alert, hyperlink, etc. • Test icons, text, etc. with color blindness simulators – blindness-simulator/ –
  14. 14. @malekontheweb – Macy’s front page…
  15. 15. @malekontheweb
  16. 16. @malekontheweb – Color Blindness Simulation – Chromatic Vision Simulator in iOS App Store
  17. 17. @malekontheweb NOT EVERYONE… SEES THE WORLD AS YOU SEE IT
  18. 18. @malekontheweb • What do these colors mean?
  19. 19. @malekontheweb b
  20. 20. @malekontheweb ♨️ A plate of hot food? Or…hot springs?
  21. 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. 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” usability/
  24. 24. @malekontheweb And yes, there’s plenty of animation I’m not showing here– –
  25. 25. @malekontheweb
  26. 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 – cant-get-a-date/
  27. 27. @malekontheweb • Just as in real estate: “Location, location, location” • In user interfaces: “Consistency, consistency, consistency!”
  28. 28. @malekontheweb • “Principle of Consistency and Standards in User Interface Design “ –Interaction Design Foundation –https://www.interaction- consistency-and-standards-in-user-interface- design
  29. 29. @malekontheweb Colors• Fonts (and size)• Icons• Widget locations• Widget actions•
  30. 30. @malekontheweb NOT EVERYONE… READS AS MUCH AS YOU
  31. 31. @malekontheweb – Ren and Stimpy are trademarks of Viacom International Inc – Fair Use for Educational Purposes
  32. 32. @malekontheweb Will users read the dialog box or just press ‘OK’?•
  33. 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 •
  34. 34. @malekontheweb "People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences." • Jakob Nielsen • read-on-the-web/
  35. 35. @malekontheweb • “Minimize alerts” • “Write short, descriptive, multiword alert titles” • “…use verbs and verb phrases…” • “Identify destructive buttons”
  36. 36. @malekontheweb iOS Human Interface Guidelines• - Alerts interface-guidelines/views/alerts/ “Should I use Yes/No or Ok/Cancel on my• message box?” – UX Stack Exchange 6/
  37. 37. @malekontheweb • People scan • Smaller sections are better (“chunking your content”) • Shorter paragraphs OK • Bulleted lists • Don’t “bury the lead”
  38. 38. @malekontheweb • How Users Read on the Web read-on-the-web/ • Writing for the Web | Chunking Your Content eb-chunking/ • Writing for the Web tools/methods/writing-for-the-web.html
  39. 39. @malekontheweb NOT EVERYONE… READS AS WELL AS YOU
  40. 40. @malekontheweb • When writing, know your audience
  41. 41. @malekontheweb • "50% of adults cannot read a book written at an eighth grade level" – Literacy Project Foundation – • "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. –
  42. 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. 43. @malekontheweb This Surprising Reading Level Analysis Will• Change the Way You Write Shane Snow–– 2015/01/28/th is-surprising-reading-level-analysis-will-change-the- way-you-write/
  44. 44. @malekontheweb –
  45. 45. @malekontheweb
  46. 46. @malekontheweb –Java Fathom Java library • –JavaScript npm package – flesch-kincaid • –Python textstat • –Odyseey ruby gem •
  47. 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. 48. @malekontheweb • More resources for script writing, including: – conversational-ui-scripts-step-by-step-62622abfb5cf – 2a9092d7316 – platform – ersational-design-essentials-tips-for-building-a- chatbot/
  49. 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”?
  51. 51. @malekontheweb – commodore-64/
  52. 52. @malekontheweb– 8_X/from_date:- 7,report_unit:day,to_date:0
  53. 53. @malekontheweb – 7,report_unit:day,to_date:0
  54. 54. @malekontheweb – 7,to_date:0
  55. 55. @malekontheweb – 7,to_date:0
  56. 56. @malekontheweb–
  57. 57. @malekontheweb – share.aspx?qprid=10&qpcustomd=0
  58. 58. @malekontheweb • “OMG: 2.1 million people still use AOL dial-up” (May 8, 2015) – 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 –
  59. 59. @malekontheweb Test slow network speeds in Chrome–
  60. 60. @malekontheweb – Fiddler Web Debugging Proxy – PC, Mac, Linux –
  61. 61. @malekontheweb – Modify speeds as needed, default is 56k modem speed –
  62. 62. @malekontheweb – Then turn on the “Simulate Modem Speeds” rule
  63. 63. @malekontheweb dummynet– project - Builds for FreeBSD, OSX, Linux, Windows–
  64. 64. @malekontheweb • Compress images • Use front-end built-tool to minify code • Inventory third-party code • Combine scripts together (except for HTTP/2) – http2/ • Test on older devices!
  66. 66. @malekontheweb Laurent PELE–– r.jpg
  67. 67. @malekontheweb • Survey of Adult Skills (PIAAC) from the OECD (Organisation for Economic Co-operation and Development) • 250k adults surveyed in 2012 and 2015 –
  68. 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. 69. @malekontheweb – Courtesy Nelsen Norman Group –
  70. 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. 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) – ort-6-of-10-millennials-have-low-technology- skills.aspx
  72. 72. @malekontheweb – WarGames distributed by MGM/UA Entertainment Company – Fair Use for Educational Purposes
  73. 73. @malekontheweb
  74. 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 – menus/
  75. 75. @malekontheweb – Logo and arrow
  76. 76. @malekontheweb – Label the hamburger menu
  77. 77. @malekontheweb Bottom bar of icons–
  78. 78. @malekontheweb NOT EVERYONE… CARES ABOUT YOU (SORRY)
  79. 79. @malekontheweb – It’s not about you… it’s about the user.
  80. 80. @malekontheweb Website analytics company– Kissmetrics created an infographic– -a-website/
  81. 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. 82. @malekontheweb – Localytics – “Mobile Apps: What’s A Good Retention Rate?:” –
  83. 83. @malekontheweb SO MUCH CHOICE • 3.3 million Android apps on Google Play – android-apps – (October, 2017) • 2.2 million iOS apps available in App Store – store-2000252 – (May, 2017)
  84. 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 – dont-care-you-agile-joshua-a-jack
  85. 85. @malekontheweb Your Customers Don’t Care About Your• Product: They Care About Progress Chris Brophy–– -dont- care-about-your-product/
  86. 86. @malekontheweb It is all about your users …. PERIOD