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?

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