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

Design for Telepathy

Ddec3a334a9333761e1e6dfb227e976f?s=47 Mapk
September 11, 2016

Design for Telepathy

The transfer of information is paramount in design. Technology has made it possible to consume a mass of information in minimal time – is your design helping the flow of this information, or hindering it?

Ddec3a334a9333761e1e6dfb227e976f?s=128

Mapk

September 11, 2016
Tweet

Transcript

  1. Design for Telepathy A talk by Mark Uraine

  2. Transfer of Information

  3. INFORMATION : the communication or reception of knowledge or intelligence.

    Merriam-Webster’s Learner’s Dictionary
  4. We create the content involved in communicating the information. TEXT,

    IMAGE, SOUND, PRODUCT We organize by using relevant design principles to communicate effectively. COLOR, VALUE, CONTRAST, BALANCE, PROXIMITY We facilitate by building environments in which information can be transferred. WEBSITE, APP, BOOK, MAGAZINE, POSTER, AD DESIGNERS = COMMUNICATORS
  5. They desire for knowledge and/or pleasure. They visit the environment

    to receive the information. They interpret the content, tone, and personality conveyed. USERS = RECEIVERS
  6. People with disabilities People with telepathy TRANSFER OF INFORMATION Me

  7. People with disabilities • Vision impairments • Hearing impairments •

    Motor impairments • Cognitive impairments • Photo epilepsy • Age-related processes
  8. PREVALENCE OF DISABILITIES 57 million Americans have a disability 

    0 5000000 10000000 15000000 20000000 Motor skills Cognitive Vision Hearing    19.9M 15.2M 8.1M 7.6M http://www.interactiveaccessibility.com/accessibility-statistics
  9. Provide appropriate alternative text Provide appropriate document structure Provide headers

    for data tables Ensure users can complete and submit all forms Ensure links make sense out of context Caption/transcripts for media Do not rely on color alone Content should be clearly written and easy to read Don’t use flashing lights, or contrasting dark and light patterns Vision impairments Hearing impairments Motor impairments Cognitive impairments Photo epilepsy Age-related processes
  10. Provide appropriate alternative text Provide appropriate document structure Provide headers

    for data tables Ensure users can complete and submit all forms Ensure links make sense out of context Caption/transcripts for media Do not rely on color alone Content should be clearly written and easy to read Don’t use flashing lights, or contrasting dark and light patterns Vision impairments Hearing impairments Motor impairments Cognitive impairments Photo epilepsy Age-related processes
  11. Provide appropriate alternative text Provide appropriate document structure Provide headers

    for data tables Ensure users can complete and submit all forms Ensure links make sense out of context Caption/transcripts for media Do not rely on color alone Content should be clearly written and easy to read Don’t use flashing lights, or contrasting dark and light patterns Vision impairments Hearing impairments Motor impairments Cognitive impairments Photo epilepsy Age-related processes
  12. Provide appropriate alternative text Provide appropriate document structure Provide headers

    for data tables Ensure users can complete and submit all forms Ensure links make sense out of context Caption/transcripts for media Do not rely on color alone Content should be clearly written and easy to read Don’t use flashing lights, or contrasting dark and light patterns Vision impairments Hearing impairments Motor impairments Cognitive impairments Photo epilepsy Age-related processes
  13. Provide appropriate alternative text Provide appropriate document structure Provide headers

    for data tables Ensure users can complete and submit all forms Ensure links make sense out of context Caption/transcripts for media Do not rely on color alone Content should be clearly written and easy to read Don’t use flashing lights, or contrasting dark and light patterns Vision impairments Hearing impairments Motor impairments Cognitive impairments Photo epilepsy Age-related processes
  14. Provide appropriate alternative text Provide appropriate document structure Provide headers

    for data tables Ensure users can complete and submit all forms Ensure links make sense out of context Caption/transcripts for media Do not rely on color alone Content should be clearly written and easy to read Don’t use flashing lights, or contrasting dark and light patterns Vision impairments Hearing impairments Motor impairments Cognitive impairments Photo epilepsy Age-related processes
  15. Provide appropriate alternative text Provide appropriate document structure Provide headers

    for data tables Ensure users can complete and submit all forms Ensure links make sense out of context Caption/transcripts for media Do not rely on color alone Content should be clearly written and easy to read Don’t use flashing lights, or contrasting dark and light patterns Vision impairments Hearing impairments Motor impairments Cognitive impairments Photo epilepsy Age-related processes
  16. None
  17. But the web is not fully optimized for this yet.

  18. People with disabilities People with telepathy TRANSFER OF INFORMATION

  19. Accessibility ? TRANSFER OF INFORMATION Me

  20. Sight Sound Taste Smell Touch Use a keyboard and mouse

    effectively. Read and visually navigate the web. Listen to videos and helpful sound queues. Understand general internet & web concepts. Troubleshoot issues on a basic level.
  21. 6th sense 6th sense 14 - 21 senses

  22. Pressure Itch Pain Hunger Thirst Temperature Direction Time Muscle tension

    Proprioception Equilibrioception Linear acceleration Rotational acceleration Stretch receptors Chemoreceptors
  23. SUPERHUMAN

  24. SUPERHUMAN DESIGNERS

  25. + +

  26. On average, a superhuman can read 200 words per minute

    with a 60% comprehension. More advanced superhumans read 700 words per minute with an 85% comprehension.
  27. But the web is not fully optimized for superhumans yet.

  28. None
  29. None
  30. None
  31. None
  32. None
  33. Set max-width to limit 55-75 characters per line of text

    Increase font-size Adjust line-height Keep a strong contrast of color
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. Title of Post Interesting meta data Lorem ipsum dolor sit

    amet, consectetur adipiscing elit. Curabitur orci enim, sollicitudin eget magna eget, interdum porttitor sapien. Donec auctor massa sed vulputate pulvinar. Aliquam suscipit in ex nec tempor. Maecenas efficitur, massa non eleifend ullamcorper, eros urna facilisis nunc, sit amet rhoncus ante libero at mi. Aenean vel purus enim. Duis elementum orci elit, in tincidunt sapien tristique non. Curabitur sodales finibus elit ut ullamcorper. Nullam dolor risus, vulputate quis turpis nec, semper ultrices enim. Curabitur at enim nec dolor vestibulum mollis et vitae ligula. Phasellus sit amet pretium sem. Sed blandit odio in augue lobortis venenatis. Donec dapibus ex in justo ultricies mollis. Etiam in convallis
  41. Title of Post Interesting meta data Lorem ipsum dolor sit

    amet, consectetur adipiscing elit. Curabitur orci enim, sollicitudin eget magna eget, interdum porttitor sapien. Donec auctor massa sed vulputate pulvinar. Aliquam suscipit in ex nec tempor. Maecenas efficitur, massa non eleifend ullamcorper, eros urna facilisis nunc, sit amet rhoncus ante libero at mi. Aenean vel un purus enim. Duis elementum di orci elit, in tincidunt sapien eros tristique non. Curabitur sodales finibus elit ut ullamcorper. Nullam dolor risus, vulputate quis turpis nec, semper ultrices enim. Curabitur at enim nec dolor vestibulum mollis et vitae ligula. Phasellus sit amet pretium sem. Sed Duis elementum orci elit, in tincidunt sapien tristique non. Ad Home Lorem Ipsum Interdum Massa Click me
  42. Title of Post Interesting meta data Lorem ipsum dolor sit

    amet, consectetur adipiscing elit. Curabitur orci enim, sollicitudin eget magna eget, interdum porttitor sapien. Donec auctor massa sed vulputate pulvinar. Aliquam suscipit in ex nec tempor. Maecenas efficitur, massa non eleifend ullamcorper, eros urna facilisis nunc, sit amet rhoncus ante libero at mi. Aenean vel un purus enim. Duis elementum di orci elit, in tincidunt sapien eros tristique non. Curabitur sodales finibus elit ut ullamcorper. Nullam dolor risus, vulputate quis turpis nec, semper ultrices enim. Curabitur at enim nec dolor vestibulum mollis et Duis elementum orci elit, in tincidunt sapien tristique non. Ad Ad Home Lorem Ipsum Interdum Massa Click me
  43. facilisis nunc, sit amet rhoncus ante libero at mi. Aenean

    vel un purus enim. Duis elementum di orci elit, in tincidunt sapien eros tristique non. Curabitur sodales finibus elit ut ullamcorper. Nullam dolor risus, vulputate quis turpis nec, semper ultrices enim. Curabitur at enim nec dolor vestibulum mollis et vitae ligula. Phasellus sit amet pretium sem. Sed blandit odio in augue lobortis venenatis. Donec dapibus ex in justo ultricies mollis. Etiam in convallis lorem. Maecenas tellus magna, eleifend sit amet urna sit amet, accumsan semper sem. Proin pretium tellus, nec lorem, mattis nec, tempus justo interdum. Cras faucibus porta odio non elementum. Aenean at velit dapibus, porttitor mauris ac, tincidunt urna. Suspendisse potenti. Curabitur Duis elementum orci elit, in tincidunt sapien tristique non. Ad Curabitur at enim nec dolor vestibulum mollis et vitae ligula. Ad Home Lorem Ipsum Interdum Massa Click me
  44. ullamcorper. Nullam dolor risus, vulputate quis turpis nec, semper ultrices

    enim. Curabitur at enim nec dolor vestibulum mollis et vitae ligula. Phasellus sit amet pretium sem. Sed blandit odio in augue lobortis venenatis. Donec dapibus ex in justo ultricies mollis. Etiam in convallis lorem. Maecenas tellus magna, eleifend sit amet urna sit amet, accumsan semper sem. Proin pretium tellus, nec lorem, mattis nec, tempus justo interdum. Cras faucibus porta odio non elementum. Aenean at velit dapibus, porttitor mauris ac, tincidunt urna. Suspendisse potenti. Curabitur dapibus condimentum luctus. Donec ultricies id metus in lacinia. Ad Curabitur at enim nec dolor vestibulum mollis et vitae ligula. Read the next story? Page 1 of 5 Next >> Home Lorem Ipsum Interdum Massa Click me
  45. Somewhere along the lines we screw it up.

  46. Navigation is Failure “Your job is to help the user

    achieve their goal. Navigating an interface is never the user’s goal.” — ANTOINE VALOT https://medium.com/radical-ux/nine-nasty-ux-truths-83b30ea94355#.q0bi39oeh
  47. Pull Quotes “You either end up learning to blot them

    out completely, or you end up reading the same sentence twice.” — JEREMY KEITH https://adactio.com/journal/11102
  48. Interstitial Ads “After January 10, 2017, pages where content is

    obscured by interstitial popups will be penalized in seo ranking.” — SCOTT JEHL https://twitter.com/scottjehl/status/768156598959218688
  49. Readers Don’t Read, They Scan “Web pages have to employ

    scannable text, using • Highlighted keywords • Meaningful sub-headings • Bulleted lists • One idea per paragraph • Half the word count of conventional writing.” — JACOB NIELSEN https://www.nngroup.com/articles/how-users-read-on-the-web/
  50. Title of Post Interesting meta data Lorem ipsum dolor sit

    amet, consectetur adipiscing elit. Curabitur orci enim, sollicitudin eget magna eget, interdum porttitor sapien. Donec auctor massa sed vulputate pulvinar. Aliquam suscipit in ex nec tempor. Maecenas efficitur, massa non eleifend ullamcorper, eros urna facilisis nunc, sit amet rhoncus ante libero at mi. Aenean vel purus enim. Duis elementum orci elit, in tincidunt sapien tristique non. Curabitur sodales finibus elit ut ullamcorper. Nullam dolor risus, vulputate quis turpis nec, semper ultrices enim. Curabitur at enim nec dolor vestibulum mollis et vitae ligula. Phasellus sit amet pretium sem. Sed blandit odio in augue lobortis venenatis. Donec dapibus ex in justo ultricies mollis. Etiam in convallis lorem. Maecenas tellus magna, eleifend sit amet urna sit amet, accumsan semper sem. Proin • pretium tellus • nec lorem • mattis nec tempus justo interdum. Cras faucibus porta odio non elementum. Aenean at velit dapibus, porttitor mauris ac, tincidunt urna. Suspendisse potenti. Curabitur dapibus condimentum luctus. Donec ultricies id
  51. http://aneventapart.com/news/post/modern-layouts-getting-out-of-our-ruts-by-jen-simmons-an-event- apart-video An Event Apart Modern Layouts: Getting out of

    our ruts “In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade.” — JEN SIMMONS
  52. None
  53. None
  54. None
  55. None
  56. People with disabilities People with telepathy TRANSFER OF INFORMATION Me

  57. People with telepathy

  58. TELEPATHY : the transfer of information from one person to

    another without using any of our known sensory channels or physical interaction.
  59. Letters Telegraph Email Text msgs Telepathy Stone tablets Scrolls Books

    Websites Apps New Tools
  60. https://medium.freecodecamp.com/your-ui-is-your-products-humble-compensation-for-not-being- telepathic-b467d022d640 Your UI is your product’s humble compensation for

    not being telepathic. “Take a few products and keep asking what is this compensating for? and you’ll eventually end up with the same answer.” — MORTEN JUST
  61. How are you improving the transfer of information?

  62. Thank you. Twitter: @mapk WordPress.org: mapk markuraine.com