Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Developers: Why Care About the User?

Developers: Why Care About the User?

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?

D3e97d0de2acd41a96bbdb7cf15ea860?s=128

Andrew Malek

March 11, 2018
Tweet

Transcript

  1. @malekontheweb DEVELOPERS: WHY CARE ABOUT THE USER? Andrew Malek -

    @malekontheweb http://malektips.com/
  2. @malekontheweb THE SELFISH VIEW…

  3. @malekontheweb

  4. @malekontheweb ANOTHER VIEW…

  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/
  44. @malekontheweb – http://bit.ly/2ehzXW4

  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
  51. @malekontheweb – http://www.techrepublic.com/blog/classics-rock/surf-the-web-on-your- commodore-64/

  52. @malekontheweb https://mixpanel.com/trends/#report/iphone_ – 8_X/from_date:- 7,report_unit:day,to_date:0

  53. @malekontheweb – https://mixpanel.com/trends/#report/iphone_8_X/from_date:- 7,report_unit:day,to_date:0

  54. @malekontheweb – https://mixpanel.com/trends/#report/iphone_models/from_date:- 7,to_date:0

  55. @malekontheweb – https://mixpanel.com/trends/#report/iphone_models/from_date:- 7,to_date:0

  56. @malekontheweb https://developer.android.com/about/dashboards/index.html –

  57. @malekontheweb – https://www.netmarketshare.com/operating-system-market- share.aspx?qprid=10&qpcustomd=0

  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

  66. @malekontheweb Laurent PELE – https://commons.wikimedia.org/wiki/File:Cd_reader_used_as_a_cup_holde – r.jpg

  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