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?

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
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.
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
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
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