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

Design for Telepathy

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?

Mapk

September 11, 2016
Tweet

More Decks by Mapk

Other Decks in Design

Transcript

  1. Design for Telepathy
    A talk by Mark Uraine

    View Slide

  2. Transfer of Information

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  6. People with
    disabilities
    People with
    telepathy
    TRANSFER OF INFORMATION
    Me

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  16. View Slide

  17. But the web is not fully
    optimized for this yet.

    View Slide

  18. People with
    disabilities
    People with
    telepathy
    TRANSFER OF INFORMATION

    View Slide

  19. Accessibility ?
    TRANSFER OF INFORMATION
    Me

    View Slide

  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.

    View Slide

  21. 6th sense
    6th sense
    14 - 21 senses

    View Slide

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

    View Slide

  23. SUPERHUMAN

    View Slide

  24. SUPERHUMAN
    DESIGNERS

    View Slide

  25. + +

    View Slide

  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.

    View Slide

  27. But the web is not fully
    optimized for superhumans
    yet.

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  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

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  45. Somewhere along the lines we screw it up.

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

  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

    View Slide

  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

    View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. People with
    disabilities
    People with
    telepathy
    TRANSFER OF INFORMATION
    Me

    View Slide

  57. People with
    telepathy

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  61. How are you improving the transfer of information?

    View Slide

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

    View Slide