Design for Telepathy - Speaker Deck

Slide 1

Slide 1 text

Design for Telepathy A talk by Mark Uraine

Slide 2

Slide 2 text

Transfer of Information

Slide 3

Slide 3 text

INFORMATION : the communication or reception of knowledge or intelligence. Merriam-Webster’s Learner’s Dictionary

Slide 4

Slide 4 text

We create the content involved in communicating the information. TEXT, IMAGE, SOUND, PRODUCT We organize by using relevant design principles to communicate eﬀectively. COLOR, VALUE, CONTRAST, BALANCE, PROXIMITY We facilitate by building environments in which information can be transferred. WEBSITE, APP, BOOK, MAGAZINE, POSTER, AD DESIGNERS = COMMUNICATORS

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

People with disabilities People with telepathy TRANSFER OF INFORMATION Me

Slide 7

Slide 7 text

People with disabilities • Vision impairments • Hearing impairments • Motor impairments • Cognitive impairments • Photo epilepsy • Age-related processes

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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 ﬂashing lights, or contrasting dark and light patterns Vision impairments Hearing impairments Motor impairments Cognitive impairments Photo epilepsy Age-related processes

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

But the web is not fully optimized for this yet.

Slide 18

Slide 18 text

People with disabilities People with telepathy TRANSFER OF INFORMATION

Slide 19

Slide 19 text

Accessibility ? TRANSFER OF INFORMATION Me

Slide 20

Slide 20 text

Sight Sound Taste Smell Touch Use a keyboard and mouse eﬀectively. Read and visually navigate the web. Listen to videos and helpful sound queues. Understand general internet & web concepts. Troubleshoot issues on a basic level.

Slide 21

Slide 21 text

6th sense 6th sense 14 - 21 senses

Slide 22

Slide 22 text

Pressure Itch Pain Hunger Thirst Temperature Direction Time Muscle tension Proprioception Equilibrioception Linear acceleration Rotational acceleration Stretch receptors Chemoreceptors

Slide 23

Slide 23 text

SUPERHUMAN

Slide 24

Slide 24 text

SUPERHUMAN DESIGNERS

Slide 25

Slide 25 text

+ +

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

But the web is not fully optimized for superhumans yet.

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Set max-width to limit 55-75 characters per line of text Increase font-size Adjust line-height Keep a strong contrast of color

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Slide 41

Slide 41 text

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 eﬃcitur, 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 ﬁnibus 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

Slide 42

Slide 42 text

Slide 43

Slide 43 text

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 ﬁnibus 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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Somewhere along the lines we screw it up.

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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/

Slide 50

Slide 50 text

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 eﬃcitur, 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 ﬁnibus 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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

People with disabilities People with telepathy TRANSFER OF INFORMATION Me

Slide 57

Slide 57 text

People with telepathy

Slide 58

Slide 58 text

TELEPATHY : the transfer of information from one person to another without using any of our known sensory channels or physical interaction.

Slide 59

Slide 59 text

Letters Telegraph Email Text msgs Telepathy Stone tablets Scrolls Books Websites Apps New Tools

Slide 60

Slide 60 text

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