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.
@malekontheweb
DEVELOPERS: WHY CARE ABOUT
THE USER?
Andrew Malek - @malekontheweb
http://malektips.com/
@malekontheweb
THE SELFISH VIEW…
@malekontheweb
@malekontheweb
ANOTHER VIEW…
@malekontheweb
We need users to support ourselves and our•
passion for development…
“…the most common activity at Web site...
@malekontheweb
• “People judge an experience by the most
intense point and the end point.”
–Dave Rothschild
–iOS App Devel...
@malekontheweb
To encourage people to use our product, we•
must understand:
In most cases: “You are not the user”•
Must em...
@malekontheweb
NOT EVERYONE…
SEES THE SAME WAY
YOU DO
@malekontheweb
Some people feel anxiety reading an eye chart–
@malekontheweb
• “Approximately 14 million Americans aged
12 years and older have self-reported visual
impairment defined ...
@malekontheweb
Condensed fonts• – fit more on page, harder to read
As opposed to this non• -condensed version
Light• -gray...
@malekontheweb
“The Academic Evidence Base for Typeface•
Readability”
Links to various readability studies–
http://typofac...
@malekontheweb
• Don’t use color as sole signifier for warning,
alert, hyperlink, etc.
• Test icons, text, etc. with color...
@malekontheweb
Macy’s front page…–
@malekontheweb
@malekontheweb
– Color Blindness Simulation
– Chromatic Vision Simulator in iOS App Store
@malekontheweb
NOT EVERYONE…
SEES THE WORLD LIKE
YOU DO
@malekontheweb
• What do these colors mean?
@malekontheweb
b
@malekontheweb
♨️
A plate of hot food?
Or…hot springs?
@malekontheweb
WRITING A SCRIPT FOR A CHATBOT?
If your chatbot cannot recognize a user’s•
input, do you say “sorry; I scre...
@malekontheweb
BTW: OTHER DESIGN CONSIDERATIONS
Left• -to-right - Right-to-left - vertical?
Leave enough room in UI for la...
@malekontheweb
Always test with target audience•
Again, be careful if color is only signifier•
Choose icons understandable...
@malekontheweb
NOT EVERYONE…
KNOWS YOUR APP OR
WEBSITE LIKE YOU DO
@malekontheweb
– And yes, there’s plenty of animation I’m not showing here 
– http://www.lingscars.com/
@malekontheweb
@malekontheweb
“Years ago, we looked at how people•
remembered icons in desktop applications…
In the first experiment, we ...
@malekontheweb
Just as in real estate:•
“Location, location, location”
In user interfaces:•
“Consistency, consistency, con...
@malekontheweb
• “Principle of Consistency and Standards in
User Interface Design “
–Interaction Design Foundation
–https:...
@malekontheweb
Colors•
Fonts (and size)•
Icons•
Widget locations•
Widget actions•
@malekontheweb
NOT EVERYONE…
READS AS MUCH AS YOU
DO
@malekontheweb
Ren and– Stimpy are trademarks of Viacom International Inc
Fair Use for Educational Purposes–
@malekontheweb
• Will users read the dialog box or just press ‘OK’?
@malekontheweb
"Programming today is a race between
software engineers striving to build bigger and
better idiot-proof pro...
@malekontheweb
"People rarely read Web pages word by word;
instead, they scan the page, picking out
individual words and s...
@malekontheweb
• “Minimize alerts”
• “Write short, descriptive, multiword alert
titles”
• “…use verbs and verb phrases…”
•...
@malekontheweb
iOS Human Interface Guidelines• - Alerts
https://developer.apple.com/ios/human-
interface-guidelines/ui-vie...
@malekontheweb
People scan•
Smaller sections are better•
Shorter paragraphs OK•
Bulleted lists•
Don’t “bury the lead”•
@malekontheweb
How Users Read on the Web•
https://www.nngroup.com/articles/how-users-
read-on-the-web/
Writing for the Web...
@malekontheweb
NOT EVERYONE…
READS AS WELL AS YOU
DO
@malekontheweb
When writing, know your audience•
@malekontheweb
• "50% of adults cannot read a book written at an eighth
grade level"
Literacy Project Foundation–
http://l...
@malekontheweb
• Test readability of sentences via Flesch-
Kincaid test
• Gives approximate grade level who can
understand...
@malekontheweb
This Surprising Reading Level Analysis Will•
Change the Way You Write
Shane Snow–
https://contently.com/str...
@malekontheweb
http://bit.ly/– 2ehzXW4
@malekontheweb
@malekontheweb
Java Fathom Java library–
https://github.com/ogrodnek/java_fathom•
JavaScript– npm package – flesch-kincaid...
@malekontheweb
CHATBOT SCRIPT SUGGESTIONS
What are users expected to ask?•
Short sentences; don’t overwhelm user•
Avoid sl...
@malekontheweb
More resources for script writing, including:•
https://uxdesign.cc/making– -chatbots-talk-writing-
conversa...
@malekontheweb
NOT EVERYONE…
HAS THE DEVICES AND
BANDWIDTH YOU DO
@malekontheweb
http://www.techrepublic.com/blog/classics– -rock/surf-the-web-on-your-
commodore-64/
@malekontheweb
https://mixpanel.com/trends/#report/iphone_– 7/from_date:-
124,report_unit:month,to_date:0
@malekontheweb
https://mixpanel.com/trends/#report/iphone_models/from_date:– -
31,to_date:0
@malekontheweb
– https://developer.android.com/about/dashboards/index.html
@malekontheweb
https://www.netmarketshare.com/operating– -system-market-
share.aspx?qprid=10&qpcustomd=0
@malekontheweb
“OMG:• 2.1 million people still use AOL dial-up”
(May 8, 2015)
http://money.cnn.com/– 2015/05/08/technology...
@malekontheweb
– Test slow network speeds in Chrome
@malekontheweb
Fiddler Web Debugging Proxy– – PC, Mac, Linux
http://www.telerik.com/fiddler–
@malekontheweb
Modify speeds as needed, default is– 56k modem speed
http://stackoverflow.com/questions/– 16276669/
@malekontheweb
Then turn on the “Simulate Modem Speeds” rule–
@malekontheweb
– dummynet project - http://info.iet.unipi.it/~luigi/dummynet/
– Builds for FreeBSD, OSX, Linux, Windows
@malekontheweb
Compress images•
Use front• -end built-tool to minify code
Inventory third• -party code
Combine scripts tog...
@malekontheweb
NOT EVERYONE…
HAS THE TECHNICAL
SKILLS YOU HAVE
@malekontheweb
– Laurent PELE
– https://commons.wikimedia.org/wiki/File:Cd_reader_used_as_a_cup_holde
r.jpg
@malekontheweb
Survey of Adult Skills (PIAAC) from the OECD•
(Organisation for Economic Co-operation and
Development)
250•...
@malekontheweb
USA Statistics•
Can’t use computers / skipped test:• 19.9%
Below level• 1: 15.8%
Level• 1: 33.1%
Level• 2: ...
@malekontheweb
“Overall, people with strong technology skills•
make up a 5–8% sliver of their country’s
population, whatev...
@malekontheweb
• “…nearly six out of 10 millennials can't do
basic tasks such as sorting, searching for and
emailing data ...
@malekontheweb
WarGames– distributed by MGM/UA Entertainment Company
Fair Use for Educational Purposes–
@malekontheweb
@malekontheweb
• “a more than 20% drop in discoverability”
• “Task difficulty…a 21% increase”
• “15% slower when the navig...
@malekontheweb
Logo and arrow–
@malekontheweb
Label the hamburger menu–
@malekontheweb
Bottom bar of icons–
@malekontheweb
NOT EVERYONE…
CARES ABOUT YOU
(SORRY)
@malekontheweb
It’s not about you… it’s about the user.–
@malekontheweb
Website analytics company– Kissmetrics created an infographic
https://blog.kissmetrics.com/leave– -a-websit...
@malekontheweb
HOW DO I NOT LOVE THEE? LET ME COUNT
THE WAYS…
Too many ads•
Bad navigation•
Obtrusive• audio and video
Reg...
@malekontheweb
Localytics– – “Mobile Apps: What’s A Good Retention Rate?:”
http://info.localytics.com/blog/mobile– -apps-w...
@malekontheweb
SO MUCH CHOICE
• 2.8 million Android apps on Google Play
–https://www.appbrain.com/stats/number-of-
android...
@malekontheweb
“because in the end, our users want high•
quality products delivered regularly with
updates that work.”
You...
@malekontheweb
Your Customers Don’t Care About Your•
Product: They Care About Progress
Chris Brophy–
https://– blog.kissme...
@malekontheweb
It is all about your users
…. PERIOD
Upcoming SlideShare
Loading in …5
×

Developers: Why Care About the User?

1,005 views

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

Developers: Why Care About the User?

  1. 1. @malekontheweb DEVELOPERS: WHY CARE ABOUT THE USER? Andrew Malek - @malekontheweb http://malektips.com/
  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– http://www.nytimes.com/– 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 –http://bit.ly/2lutWqr
  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 YOU DO
  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 –https://www.cdc.gov/visionhealth/data/national .htm
  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– http://typoface.blogspot.com/– 2009/08/academi c-base.html WebAIM• Color Contrast Checker http://webaim.org/resources/contrastchecker/–
  13. 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. 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 LIKE YOU DO
  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 WRITING A SCRIPT FOR A CHATBOT? 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”?
  22. 22. @malekontheweb BTW: 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
  23. 23. @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/
  24. 24. @malekontheweb NOT EVERYONE… KNOWS YOUR APP OR WEBSITE LIKE YOU DO
  25. 25. @malekontheweb – And yes, there’s plenty of animation I’m not showing here  – http://www.lingscars.com/
  26. 26. @malekontheweb
  27. 27. @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/orbit z-cant-get-a-date/
  28. 28. @malekontheweb Just as in real estate:• “Location, location, location” In user interfaces:• “Consistency, consistency, consistency!”
  29. 29. @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
  30. 30. @malekontheweb Colors• Fonts (and size)• Icons• Widget locations• Widget actions•
  31. 31. @malekontheweb NOT EVERYONE… READS AS MUCH AS YOU DO
  32. 32. @malekontheweb Ren and– Stimpy are trademarks of Viacom International Inc Fair Use for Educational Purposes–
  33. 33. @malekontheweb • Will users read the dialog box or just press ‘OK’?
  34. 34. @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•
  35. 35. @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/
  36. 36. @malekontheweb • “Minimize alerts” • “Write short, descriptive, multiword alert titles” • “…use verbs and verb phrases…” • “Identify destructive buttons”
  37. 37. @malekontheweb iOS Human Interface Guidelines• - Alerts https://developer.apple.com/ios/human- interface-guidelines/ui-views/alerts/ “Should I use Yes/No or Ok/Cancel on my• message box?” – UX Stack Exchange http://ux.stackexchange.com/questions/994 6/
  38. 38. @malekontheweb People scan• Smaller sections are better• Shorter paragraphs OK• Bulleted lists• Don’t “bury the lead”•
  39. 39. @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
  40. 40. @malekontheweb NOT EVERYONE… READS AS WELL AS YOU DO
  41. 41. @malekontheweb When writing, know your audience•
  42. 42. @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
  43. 43. @malekontheweb • Test readability of sentences via Flesch- Kincaid test • Gives approximate grade level who can understand text • Not exact science, but factors in number of words, syllables, and sentences • Also, reduce amount of passive voice
  44. 44. @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. 45. @malekontheweb http://bit.ly/– 2ehzXW4
  46. 46. @malekontheweb
  47. 47. @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•
  48. 48. @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•
  49. 49. @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/
  50. 50. @malekontheweb NOT EVERYONE… HAS THE DEVICES AND BANDWIDTH YOU DO
  51. 51. @malekontheweb http://www.techrepublic.com/blog/classics– -rock/surf-the-web-on-your- commodore-64/
  52. 52. @malekontheweb https://mixpanel.com/trends/#report/iphone_– 7/from_date:- 124,report_unit:month,to_date:0
  53. 53. @malekontheweb https://mixpanel.com/trends/#report/iphone_models/from_date:– - 31,to_date:0
  54. 54. @malekontheweb – https://developer.android.com/about/dashboards/index.html
  55. 55. @malekontheweb https://www.netmarketshare.com/operating– -system-market- share.aspx?qprid=10&qpcustomd=0
  56. 56. @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/
  57. 57. @malekontheweb – Test slow network speeds in Chrome
  58. 58. @malekontheweb Fiddler Web Debugging Proxy– – PC, Mac, Linux http://www.telerik.com/fiddler–
  59. 59. @malekontheweb Modify speeds as needed, default is– 56k modem speed http://stackoverflow.com/questions/– 16276669/
  60. 60. @malekontheweb Then turn on the “Simulate Modem Speeds” rule–
  61. 61. @malekontheweb – dummynet project - http://info.iet.unipi.it/~luigi/dummynet/ – Builds for FreeBSD, OSX, Linux, Windows
  62. 62. @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!•
  63. 63. @malekontheweb NOT EVERYONE… HAS THE TECHNICAL SKILLS YOU HAVE
  64. 64. @malekontheweb – Laurent PELE – https://commons.wikimedia.org/wiki/File:Cd_reader_used_as_a_cup_holde r.jpg
  65. 65. @malekontheweb Survey of Adult Skills (PIAAC) from the OECD• (Organisation for Economic Co-operation and Development) 250• k adults surveyed in 2012 and 2015 http://www.oecd.org/skills/piaac/–
  66. 66. @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%
  67. 67. @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 https://www.nngroup.com/articles/computer– - skill-levels/
  68. 68. @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
  69. 69. @malekontheweb WarGames– distributed by MGM/UA Entertainment Company Fair Use for Educational Purposes–
  70. 70. @malekontheweb
  71. 71. @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/
  72. 72. @malekontheweb Logo and arrow–
  73. 73. @malekontheweb Label the hamburger menu–
  74. 74. @malekontheweb Bottom bar of icons–
  75. 75. @malekontheweb NOT EVERYONE… CARES ABOUT YOU (SORRY)
  76. 76. @malekontheweb It’s not about you… it’s about the user.–
  77. 77. @malekontheweb Website analytics company– Kissmetrics created an infographic https://blog.kissmetrics.com/leave– -a-website/
  78. 78. @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•
  79. 79. @malekontheweb Localytics– – “Mobile Apps: What’s A Good Retention Rate?:” http://info.localytics.com/blog/mobile– -apps-whats-a-good-retention-rate
  80. 80. @malekontheweb SO MUCH CHOICE • 2.8 million Android apps on Google Play –https://www.appbrain.com/stats/number-of- android-apps –(May 4, 2017) • 2.2 million iOS apps available in App Store –https://www.statista.com/statistics/276623/numb er-of-apps-available-in-leading-app-stores/ –(March, 2017)
  81. 81. @malekontheweb “because 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
  82. 82. @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/
  83. 83. @malekontheweb It is all about your users …. PERIOD

×