$30 off During Our Annual Pro Sale. View Details »

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?

Andrew Malek

March 11, 2018
Tweet

More Decks by Andrew Malek

Other Decks in Technology

Transcript

  1. @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
  2. @malekontheweb • “People judge an experience by the most intense

    point and the end point.” –Dave Rothschild –iOS App Developer, Intel –http://bit.ly/2lutWqr
  3. @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
  4. @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
  5. @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
  6. @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/ –
  7. @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
  8. @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
  9. @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/
  10. @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/
  11. @malekontheweb • Just as in real estate: “Location, location, location”

    • In user interfaces: “Consistency, consistency, consistency!”
  12. @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
  13. @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
  14. @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/
  15. @malekontheweb • “Minimize alerts” • “Write short, descriptive, multiword alert

    titles” • “…use verbs and verb phrases…” • “Identify destructive buttons”
  16. @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/
  17. @malekontheweb • People scan • Smaller sections are better (“chunking

    your content”) • Shorter paragraphs OK • Bulleted lists • Don’t “bury the lead”
  18. @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
  19. @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
  20. @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
  21. @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/
  22. @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
  23. @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
  24. @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/
  25. @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”?
  26. @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/
  27. @malekontheweb – Modify speeds as needed, default is 56k modem

    speed – http://stackoverflow.com/questions/16276669/
  28. @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!
  29. @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/
  30. @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%
  31. @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
  32. @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
  33. @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/
  34. @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
  35. @malekontheweb – Localytics – “Mobile Apps: What’s A Good Retention

    Rate?:” – http://info.localytics.com/blog/mobile-apps-whats-a-good-retention-rate
  36. @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)
  37. @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
  38. @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/