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

The Future of the Web - and how to prepare for it today

The Future of the Web - and how to prepare for it today

Talk given at Smashing Conference, L.A. - April 2015

petewsmart

April 28, 2015
Tweet

More Decks by petewsmart

Other Decks in Technology

Transcript

  1. THE FUTURE
    OF THE WEB
    AND HOW TO PREPARE FOR IT TODAY
    Smashing Conference, L.A. 2015
    @petewsmart

    View Slide

  2. @petewsmart

    View Slide

  3. @petewsmart

    View Slide

  4. @petewsmart

    View Slide

  5. @petewsmart

    View Slide

  6. @petewsmart

    View Slide

  7. @petewsmart
    Design
    Science Tech

    View Slide

  8. @petewsmart
    Design
    Science Tech

    View Slide

  9. @petewsmart
    Design
    Science Tech

    View Slide

  10. @petewsmart
    Design
    Science Tech

    View Slide

  11. @petewsmart
    Design
    Science Tech

    View Slide

  12. ANY SUFFICIENTLY
    ADVANCED TECHNOLOGY
    IS INDISTINGUISHABLE
    FROM MAGIC”
    ARTHUR C. CLARKE
    @petewsmart

    View Slide

  13. @petewsmart

    View Slide

  14. @petewsmart

    View Slide

  15. View Slide

  16. View Slide

  17. @petewsmart
    WHAT IS MAGICAL
    FOR US TODAY?

    View Slide

  18. WE’RE STILL IN THE FIRST
    MINUTE OF THE FIRST DAY OF
    THE INTERNET REVOLUTION”
    @petewsmart
    SCOTT COOK

    View Slide

  19. @petewsmart
    THE NEXT 8500 DAYS
    ON THE WEB

    View Slide

  20. @petewsmart

    View Slide

  21. @petewsmart

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. 28+ AWARDS
    50 PROBLEMS
    IN 50 DAYS
    @petewsmart

    View Slide

  26. OPEN SOURCE SIMCITY
    FOR REAL LIFE
    VIZICITIES
    @petewsmart

    View Slide

  27. 500,000 VIEWS IN 4 WEEKS
    RETHINK THE AIRLINE
    BOARDING PASS
    @petewsmart

    View Slide

  28. WRITING
    UX, DESIGN AND PSYCHOLOGY
    @petewsmart

    View Slide

  29. @petewsmart
    @petewsmart

    View Slide

  30. @petewsmart

    View Slide

  31. Credit: Fernando Barbella
    @petewsmart

    View Slide

  32. Credit: Fernando Barbella
    @petewsmart

    View Slide

  33. TOMORROW / TODAY
    @petewsmart

    View Slide

  34. THE FUTURE OF
    THE WEB
    @petewsmart

    View Slide

  35. THE FUTURE OF THE WEB IS
    TANGIBLE
    @petewsmart

    View Slide

  36. @petewsmart

    View Slide

  37. Credit: Live Knowledge World
    @petewsmart

    View Slide

  38. Credit: http://news.discovery.com/
    @petewsmart

    View Slide

  39. Credit: M.C. Escher
    @petewsmart

    View Slide

  40. THIS IS HAPTICS
    @petewsmart

    View Slide

  41. @petewsmart

    View Slide

  42. @petewsmart

    View Slide

  43. ELECTROSTATIC
    MANIPULATION
    @petewsmart

    View Slide

  44. Credit: Disney Research
    @petewsmart

    View Slide

  45. Credit: Disney Research
    @petewsmart

    View Slide

  46. View Slide

  47. @petewsmart

    View Slide

  48. @petewsmart

    View Slide

  49. @petewsmart

    View Slide

  50. HOW DOES THIS
    CHANGE THE WEB?
    @petewsmart

    View Slide

  51. SHOPPING
    @petewsmart

    View Slide

  52. @petewsmart

    View Slide

  53. SHOPPING
    @petewsmart

    View Slide

  54. @petewsmart
    KEY TEXTS:
    Lakoff and Johnson (1980)
    Varela,Thompson and Rosch (1991)
    Clark (1997)
    I ACT, THEREFORE I THINK
    EMBODIED COGNITION

    View Slide

  55. EDUCATION
    @petewsmart

    View Slide

  56. .surface {
    texture-temperature: cool | warm | 77°F | 25°C;
    texture-adhesion: 0.15;
    texture-hardness: 1;
    texture-roughness: 0.3;
    texture-malleability: 0.6;
    texture-viscosity: 0.75;
    texture-density: 0.3;
    }
    .assistive-touch-device-text {
    font-family: Braille;
    texture: raised;
    }
    RESOURCES:
    Chris Nager
    W3C Haptic Community
    W3C Tactile Braile
    @petewsmart

    View Slide

  57. USABILITY
    @petewsmart

    View Slide

  58. KEY TEXTS:
    Kleinke (1977).
    Crusco & Wetzel (1984).
    Vaidis and Halimi-Falkowicz (2008)
    University of Berkley, California (2013)
    EMOTIVE POWER
    OF TOUCH
    @petewsmart

    View Slide

  59. THE FUTURE OF THE WEB IS
    TANGIBLE
    @petewsmart

    View Slide

  60. THE FUTURE OF THE WEB IS
    ADAPTIVE
    @petewsmart

    View Slide

  61. @petewsmart

    View Slide

  62. @petewsmart Credit: Torontoist

    View Slide

  63. @petewsmart

    View Slide

  64. Credit: mrwallpaper.com
    @petewsmart

    View Slide

  65. View Slide

  66. @petewsmart

    View Slide

  67. 1801 - Jacquard Loom
    @petewsmart

    View Slide

  68. @petewsmart 1943 - Colossus Valve Machine

    View Slide

  69. @petewsmart

    View Slide

  70. @petewsmart

    View Slide

  71. @petewsmart

    View Slide

  72. @petewsmart

    View Slide

  73. View Slide

  74. View Slide

  75. @petewsmart

    View Slide

  76. Train / blowing hair video repeat

    View Slide

  77. View Slide

  78. Credit: IHA
    @petewsmart

    View Slide

  79. AN ADAPTIVE WEB
    @petewsmart

    View Slide

  80. SECURITY
    @petewsmart

    View Slide

  81. f0rward!
    [email protected]
    Password
    Email
    @petewsmart

    View Slide

  82. @petewsmart

    View Slide

  83. @petewsmart

    View Slide

  84. Credit: Wired
    @petewsmart

    View Slide

  85. Credit: Wired
    @petewsmart

    View Slide

  86. Credit: Hello Tree
    @petewsmart

    View Slide

  87. @petewsmart

    View Slide

  88. View Slide

  89. SECURITY
    @petewsmart

    View Slide

  90. Credit: PlayBuzz

    View Slide

  91. @petewsmart
    REPSONSIVE DESIGN

    View Slide

  92. @petewsmart

    View Slide

  93. @petewsmart
    DYNAMIC CHANGES TO THE
    APPEARANCE OF A WEBSITE,
    DEPENDING ON THE [DEVICE FACTORS]
    BEING USED TO VIEW IT”
    NIELSON NORMAN GROUP

    View Slide

  94. @petewsmart
    1. ANALYTICAL

    View Slide

  95. View Slide

  96. @petewsmart

    View Slide

  97. @petewsmart

    View Slide

  98. @petewsmart

    View Slide

  99. @petewsmart
    2. PERSONAL
    1. ANALYTICAL

    View Slide

  100. View Slide

  101. @petewsmart

    View Slide

  102. @petewsmart

    View Slide

  103. @petewsmart
    2. PERSONAL
    1. ANALYTICAL
    3. HUMAN

    View Slide

  104. View Slide

  105. @petewsmart

    View Slide

  106. @petewsmart

    View Slide

  107. @petewsmart

    View Slide

  108. Credit: Jayson Lane

    View Slide

  109. @petewsmart
    MUTATION

    View Slide

  110. AVATARS
    @petewsmart

    View Slide

  111. @petewsmart

    View Slide

  112. @petewsmart

    View Slide

  113. Credit: http://natemichals.com/wp-content/upload
    @petewsmart

    View Slide

  114. @petewsmart

    View Slide

  115. Ready to buy?
    Card: **** **** **** 6006
    @petewsmart

    View Slide

  116. @petewsmart

    View Slide

  117. @petewsmart

    View Slide

  118. @petewsmart

    View Slide

  119. View Slide

  120. THE FUTURE OF THE WEB IS
    ADAPTIVE
    @petewsmart

    View Slide

  121. THE FUTURE OF THE WEB IS
    INVISIBLE
    @petewsmart

    View Slide

  122. View Slide

  123. @petewsmart

    View Slide

  124. @petewsmart

    View Slide

  125. @petewsmart

    View Slide

  126. TECHNOLOGY MUST BE LIKE
    OXYGEN: UBIQUITOUS, NECESSARY
    ,
    AND INVISIBLE.”
    CHRIS LEHMANN
    @petewsmart

    View Slide

  127. View Slide

  128. @petewsmart

    View Slide

  129. AMBIENT INTERFACES
    @petewsmart

    View Slide

  130. View Slide

  131. @petewsmart

    View Slide

  132. View Slide

  133. AMBIENT INTERFACES
    @petewsmart

    View Slide

  134. @petewsmart
    HOW SHOULD THESE
    INTERFACES BE DESIGNED?

    View Slide

  135. RESOURCES
    Innovega
    @petewsmart

    View Slide

  136. View Slide

  137. TECHNOLOGY IS, IN THE BROADEST
    SENSE, MIND OR INTELLIGENCE OR
    PURPOSE BLENDING WITH NATURE.”
    PAUL DAVIES, SETI
    @petewsmart

    View Slide

  138. THE FUTURE OF THE WEB IS
    INVISIBLE
    @petewsmart

    View Slide

  139. THE NEXT 8500 DAYS
    ON THE WEB
    @petewsmart

    View Slide

  140. THANKS FOR LISTENING
    @petewsmart
    Slides available via:

    View Slide