Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Imagining the physical web

15,434 views

Published on

Some people say the web is dying, but I believe it’s just getting started. And what will kick it into overdrive is the Physical Web: the ability to discover, engage, and interact with smart devices (or that “dumb” tree over there) using nothing more than a browser.

In this presentation, we explore the impact these new capabilities may have on the way we design and think about this (increasingly near) future web.

Published in: Technology

Imagining the physical web

  1. 1. physical web https://www.flickr.com/photos/jeffwilcox/7151463717 imagining the
  2. 2. https://www.flickr.com/photos/64503243@N06/19020417214/ There is a theory which states that if ever anyone discovers exactly what the Universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable. There is another theory which states that this has already happened. - Douglas Adams “
  3. 3. https://www.flickr.com/photos/64503243@N06/19020417214/http://www.flickr.com/photos/ducdigital/2892313560 There is a theory which states that if ever anyone discovers exactly what the web is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable. There is another theory which states that this has already happened. - Douglas Adams “
  4. 4. http://www.flickr.com/photos/ducdigital/2892313560 I believe one of the reasons we keep debating whether the web is maybe or maybe not dying, is that we aren’t yet certain how to use it to its full potential.
  5. 5. Humans are actually pretty rubbish at predicting the potential of a technology. or how it may fit into their lives.
  6. 6. http://www.flickr.com/photos/ducdigital/2892313560 Another example… If this were the 1910s, we’d all be talking about what an amazing life we’d have if each of us could own one of these…
  7. 7. http://www.flickr.com/photos/ducdigital/2892313560 …which kind of reminds me of the way we still often think of the web—as a thing you bolt on (to products, businesses or processes) rather than a thing that has the potential to drive, enhance or disrupt them.
  8. 8. http://www.flickr.com/photos/ducdigital/2892313560 This presentation will explore the possibilities and opportunities of the physical web…
  9. 9. http://www.flickr.com/photos/ducdigital/2892313560 …an initiative* to create an open standard that extends the web we know today into the physical world. *started by Google, but open to everyone
  10. 10. http://www.flickr.com/photos/ducdigital/2892313560 I’m also hoping we can briefly consider what the web, the browser and the ecosystems we’ve built around them are really for.
  11. 11. http://www.flickr.com/photos/ducdigital/2892313560 And not just what they’re for today—because what if—the web is still at that “a motor for every home” stage? What if the uses and behaviours that will truly define it are just around the corner?
  12. 12. Image source: Wired The number of smart devices is going to explode, and the assumption that each new device will require its own application just isn't realistic. We need a system that lets anyone interact with any device at any time… [this] isn’t about replacing native apps, it’s about enabling interaction when native apps just aren't practical. — Scott Jenson, Physical Web Lead, Google “
  13. 13. http://www.flickr.com/photos/ducdigital/2892313560 How does the physical web work?
  14. 14. A thing that wirelessly broadcasts a URL: https://something.com Software on a device that detects and displays the URL when a user requests it http://www.flickr.com/photos/susanito/5447525972 the technology is pretty simple, and has just two main parts… 2 1
  15. 15. most often involves a small, low-power Broadcasts data in the clear (i.e. anyone can see it) using BLE: the low-power version of Bluetooth these days, broadcasting the URL device called a beacon Image source: Estimote Coin battery operated and lasts up to several years Many sizes and form factors
  16. 16. to broadcast URLs could soon be attached or embedded into all sorts of smart and dumb things around us Change my colour! Understand how I work and where to recycle me Check what materials i’m made of when Craigslisting me. https://www.flickr.com/photos/naan/2398024748 …but if all goes well, the ability Permanently broadcasts “I love you” Turn me off from a distance
  17. 17. The software that detects and displays URLs currently pushes discovery to the lock screen (or Today Widget on iOS). This is fine right now, as there’s only a few beacons around, but the intent is to build a URL “discovery” interface right into the browser*. *…or in the case of Firefox OS, possibly the OS itself.
  18. 18. http://www.flickr.com/photos/ducdigital/2892313560 So…how might browser-based discovery work?
  19. 19. Disclaimer: These concepts *feel* plausible from a product perspective, but were conceived without the help of Search engineers—some bits may therefore be implausible* :-) *…if you’re an engineer, we’d love to know which ones! https://www.flickr.com/photos/tamaleaver/6801803312
  20. 20. Haro Sushi and Izakaya haro-sushi.com - Yummy Japanese food McDonalds mcdonalds.ca - Robson - Open 24 hours West End Neighbourhood Map yvr-westend.ca - Map - What’s here, What’s On Search or type URL BEACONSRECENT More nearby beacons BEACONS BOOKMARKTOP SITES Search or enter address Haro Sushi and Izakaya haro-sushi.com Hons on Robson hons-noodles.com Beacons are small devices that broadcast links to web sites. Tap here to learn more 
 Politely sneak physical web results into the browser by automatically displaying nearby beacons on the search home screen. (This would work particularly well in UIs such as Firefox on Android as users don’t have to enter a keyword for content to populate each tab.) low hanging fruit :-) Beacons? Nearby?
 Something else?
  21. 21. 17:24 Guu with Garlic - Guu Izakaya haro-sushi.com - Yummy Japanese food Haro Sushi and Izakaya haro-sushi.com - Enjoy fresh suchi and grilled me... Hons on Robson hons-noodles.com - Extensive menu featuring Can... BEACONSWEB IMAGES MAPS VIDEOS Izakaya Alternatively, users could type a keyword and view results by context. (A potential challenge here is that the Beacon tab might often be empty—something that was common in the early days of the web, but is now almost unheard of. A robust search engine could however use this opportunity to suggest alternate results e.g. no Izakaya, but maybe sushi or Thai street food.) keyword-based search
  22. 22. Guu with Garlic - Guu Izakaya guu-izakaya.com > robson Mobile-friendly - Also called “Guu Robson”, this is the second Guu to open. Discover delicious... Rating: 9.2/10 = 96 votes - Price range: $$ McDonalds mcdonalds.ca > robson Popular times: Mondays 600 900 1200 1500 1800 2100 2400 West End Neighbourhood Map yvrwest-end.com 17:24 BEACONSWEB IMAGES MAPS VIDEOS Search engines already hold an index of content and associated metadata for URLs. If a beacon’s domain/URL is known, why not augment results with that indexed data? •Known/indexed + knowledge graph:
 Site IA shortcuts, reviews, opening hours, related images (basically anything you currently see on a results “card”) •Social graph: Further contextualised based on social relationships. •Temporal/Proximal: Data that is particularly useful when nearby at given day/time. augmentation
  23. 23. Guu with Garlic - Guu Izakaya haro-sushi.com - Yummy Japanese food Haro Sushi and Izakaya haro-sushi.com - Enjoy fresh suchi and grilled me... Hons on Robson hons-noodles.com - Extensive menu featuring Can... 17:24 Always on top Mute Block Report BEACONSWEB IMAGES MAPS VIDEOS Izakaya Results are initially ordered by (approx.) distance/popularity/relevance. Users can then further personalise the output to improve productivity. •Favourite: Always on top of the list even if farther away. e.g. favourite brands, frequently accessed objects at home/work. •Mute: Not necessarily negative e.g. staff in a shop might mute objects they rarely use to further promote more common ones. •Filter/Sort: Farthest, Newest/Oldest, Secure. Filter/Sort or more generic “search tools” productivity/personalisation
  24. 24. http://www.flickr.com/photos/ducdigital/2892313560 If this degree of personalisation feels too high- maintenance, it’s maybe because search has (so far) mostly been a way to discover other people’s stuff.
  25. 25. Drat! Filius seems to have gone wandering again. Must send the drone to check the river. https://www.flickr.com/photos/mckaysavage/7584239230 BEACONS BOOKMARKTOP SITES Search or enter address Harry Male - 2km walked Hermione Female - 1.3km walked Voldemort Male - 2.2km walked Dumbledore Male - 0.5km walked Draco Male - 2.1km walked Bartemius Male - 0.7km walked 6 (PS - the Netherlands have “Beaconized alpacas”!) …instead of a dashboard for things you care about…a tool whose job is to assist you in assembling highly-personalised yet meaningful results. (so meaningful in fact that they may preclude leaving the query environment at all)
  26. 26. …but what if we’re still thinking too conservatively about what a browser or discovery service could be? https://www.flickr.com/photos/boedker/2857091534
  27. 27. “…the watches glow and vibrate when you walk somewhere in the real world that corresponds with somewhere in Pokémon Go's virtual world” Source: The Verge - Pokemon Go Plus hands on photos
  28. 28. https://www.flickr.com/photos/25958224@N02/8122856863 …an antenna implanted in his skull allows him to ‘hear’ the racks upon racks of brightly coloured packaging in the aisles as a sensor converts colour frequencies into sound.
 - Vice: The Creator’s Project “ artist Neil Harbisson
  29. 29. Martin Luther King Jr.'s "I Have A Dream" painted by Neil Harbisson. which means Neil can listen to paintings… TED: I listen to color and also paint everything he hears. Each colour is assigned an audible frequency,
  30. 30. http://www.flickr.com/photos/ducdigital/2892313560 So you’ve successfully located some beacons. What happens once you click a URL?
 (…and why would you even bother to do so?) Three potential scenarios…
  31. 31. http://www.flickr.com/photos/ducdigital/2892313560 Scenario 1: Pure discovery (“A much smarter QR code”) Scenario 2: Interact with moderately “smart” things Scenario 3: Directly control an object
  32. 32. tadaslab on Instagram “Call a taxi” button attached to a tree #iot “…the significance of technologies such as RFID and 2D barcoding is that they offer a low impact way to import physical objects into the datasphere—to endow them with an informational shadow. - Adam Greenfield
  33. 33. Seriously? Is that it? That’s only marginally more useful than typing a URL yourself, or just googling it… https://www.flickr.com/photos/neilghamilton/10389735244 url/greatKurdishFoodNearby
  34. 34. …unless you’re waaaaay at the back top range for beacons is currently ~100m (300ft) and while a wider smart poster range will drain more power, this poster is powered, so that’s ok https://www.flickr.com/photos/alsaarom/8258444009
  35. 35. https://www.flickr.com/photos/sfj/288526372 knowing a user is nearby is also an opportunity to augment content Yikes, as you can see, we’re *really* busy! There’s about a 20 minute wait, but our sister location Oishii still has three tables. JOIN WAITLIST SHOW ME OISHII BOOK ANOTHER DAY to suit their location
  36. 36. A few thoughts… • Remember the old debate about all the things “mobile users won’t want to do”? (Hint: that list is super tiny) • Once a user discovers a URL in the real world* there’s no reason they can’t bookmark it for later use. • So…what (if anything) will users “NOT want to do” with that URL when they are no longer nearby? *URLs that control physical things could make this question even more interesting (or, in some contexts—disturbing).
  37. 37. The fact that you maybe could provide identical functionality from anywhere brings up another question: Should the URLs that you broadcast be new, or significantly different from the ones that users might encounter “on the web”?
  38. 38. there’s certainly benefit to mirroring a virtual architecture to its physical equivalent https://www.flickr.com/photos/morebyless/14246207164 url/grandGallery url/artDesign url/artDesign url/artDesign url/naturalWorld url/naturalWorld url/naturalWorld (you’re maybe doing this already, this just provides a new way to expose those relationships)
  39. 39. …then again, you could create local groupings to reduce noise and information density https://www.flickr.com/photos/crondeau/14314596362/ url/specialExhibitDouglasCoupland url/thisDonutThingHereThatDougWantsHelpIdentifying (while potentially retaining that density online) Douglas Coupland, “The Brick Wall”, 2005/2014 assemblage with pieces from the following toys and various untraceable construction sets.
  40. 40. you could also attach URLs to “things” that only exist at a certain time, or https://www.flickr.com/photos/morebyless/14246207164 Hi, i’m Narelle! Ask me anything about vikings, or join my class on Thursdays and Sundays at 14:00. REGISTER in a certain place
  41. 41. …which kinda’ brings us back to discovery. 
 Once exploring the web gains a more tangible form, will we begin to seek out far more exploratory experiences? https://www.flickr.com/photos/boedker/2857091534
  42. 42. Once upon a time…web discovery provided a form of curation that reflected its creator’s personality. Maybe it’s time we bring an element of curation back…?
  43. 43. Search engines could contain a collection of “helpers”, each with different moods, tastes, and proclivities to help us discover things in entirely different ways. Animism as a metaphor for interaction design, by Phillip van Allen Seeks attention, provokes and interrupts. Extremely structured and organized, geeky and persistent Proud of finding new information, fast, short attention span Dwells on existing information, methodical, focused, sometimes dreamy. Mediator/wrangler/ translator for the other AniThings THE PASSIVE WALL Shy, displays it’s own findings, but is often taken over by other AniThings.
  44. 44. http://www.flickr.com/photos/ducdigital/2892313560 Scenario 1: Pure discovery (“A much smarter QR code”) Scenario 2: Interact with moderately “smart” things Scenario 3: Directly control an object
  45. 45. A brief “smart” device primer… Many “smart” devices we use these days* can be controlled using an app, but very rarely does the app “speak” directly to the thing. *This will eventually change but for now we’re at the mercy of issues such as high power-consuming wi-fi radios, a lack of widespread iPV6 support and poor interoperability of low-power communication protocols.
  46. 46. 2 1 you use the (native) app on your phone to issue a command —”make it blue!” 3 …and transmits (P2P) to the bulb 4 …who then uses a mesh network to tell other bulbs that may be too far from the bridge Instead…your app often communicates with the cloud, or a local hub (or bridge), which then relays the command to the smart device. (This is just one example… with *many* variations on this theme) …which the bridge in your house receives via wifi…
  47. 47. …extending this pattern to the physical web will enable us to create all sorts of rich and yet casual scenarios that completely bypass the friction of downloading an app https://www.flickr.com/photos/charlottemorrall/3778508426 GUMBOT Bet you don’t have a quarter? Am I right or am I right? GUMBOT No sweat. How about one of these? That’ll be $0.25 please.
  48. 48. https://www.flickr.com/photos/neo_ii/7483010074 Now playing LOGIN with SPOTIFY VOTE FOR THE NEXT SONG I Didn’t see it coming Belle and Sebastian Monthly special for Spotify members. Log in to redeem your complementary virtual jukebox credit and choose a song we will play in the next 18 minutes. simple, anonymous, low commitment interaction higher commitment, but also higher reward “smart” a thing must be, you may also also want to reconsider the term “device” (is the device the music system…or the café itself?) …once you reconsider how
  49. 49. Interesting factoid: It costs about 3 million dollars to outfit a 767 with a seat-back entertainment system. https://www.flickr.com/photos/charlottemorrall/3778508426
  50. 50. https://www.flickr.com/photos/charlottemorrall/3778508426 PS - Android users can even download the native app directly from the plane :-) Air Canada Rouge recently replaced their seat-back system with a web app whose content is streamed from within the plane to a passenger’s personal device (or a rented iPad). Anyone with a browser can access the service—but passengers are incentivised to download the app to access premium content.
  51. 51. A few thoughts… • Many of the “apps” these URLs point to have barely anything to do with the stuff that’s currently on that brand’s web site. • They are single-purpose, designed for just-in-time-interaction and can therefore often be smaller and more lightweight. • And if we assume* they will only/mostly be accessed on mobile, some could even be mobile-only. *Assumptions are dangerous…but in many markets, this one stands a pretty decent chance of being correct.
  52. 52. Does my interaction with this flower pot require much more than a disembodied record-set? [yes] [no] [maybe] Source: Estimote Nearables …instead of delivering a giant, multi-purpose container full of stuff you hope a user will want…
  53. 53. …you can focus on crafting small, carefully-curated bundles of experience that combine to tell a great story. Source: The Verge
  54. 54. (or if you will…*much* better ads?) Source: The Verge
  55. 55. https://www.flickr.com/photos/curious_e/10473440064 which is what’s starting to happen in China with something called “light apps”
  56. 56. …small, fun, and beautifully designed single-purpose “sites” that are so intricately tied to just-in-time mobile discovery that brands rarely bother to even support larger screens*. *which I don’t totally recommend, but there’s a big difference between “supporting” a context and fully optimising for it.
  57. 57. The main reason the desktop barely matters is that an increasing number of B2C (and C2C) interactions and transactions take place within a chat window that you deep-link into or out of from the web. Source: Why Southeast Asia is Leading the world’s most disruptive business models
  58. 58. A few more thoughts… •How long before optimising* for the desktop becomes a liability? •How long before just- in-time, context-based interactions are the only reliable way to attract and engage? *as opposed to merely supporting Source: Why Southeast Asia is Leading the world’s most disruptive business models
  59. 59. https://www.flickr.com/photos/crondeau/14314596362/ Douglas Coupland, “The Brick Wall”, 2005/2014 assemblage with pieces from the following toys and various untraceable construction sets. What is this object? Where is it from? Share your ideas at #dougsDonutThing Doug Coupland @douglascoupland 63% 37% @douglascoupland 511 votes A toilet float A toy url/thisDonutThingHereThatDougWantsHelpIdentifying bundles of just-in-time, long-tail content and micro-interactions as we exchange smaller and smaller
  60. 60. …it’s not clear we’ll always need to open an app* at all *native or otherwise—remember, notifications now exist in the browser as well url/starbucksBranch_0123 https://www.flickr.com/photos/130000572@N03/16285653016/ Receipt Available Tipping available until 12:09 $0.50 $1.50 $2.00 11:20 AM
  61. 61. computer or your phone” of a time before there were better ways “…websites are unnecessary vestiges to find things to look at on your - The Awl, The next internet is TV https://www.flickr.com/photos/garryknight/6436100219
  62. 62. PS - Messaging may be eating websites…but i’m not certain it has to eat the web https://www.flickr.com/photos/garryknight/6436100219
  63. 63. http://www.flickr.com/photos/ducdigital/2892313560 Scenario 1: “A much smarter QR code” Scenario 2: Interact with moderately “smart” things Scenario 3: Directly control an object
  64. 64. While still early days…a standardized open web JavaScript Bluetooth API is currently in the works. This API will allow webpages to create direct connections to nearby Bluetooth devices.
  65. 65. The toy broadcasts a URL to a web page that, through JavaScript, directly connects to the toy via Bluetooth. The interface enables you to personalise and configure the toy. 2 1 This will enable devices to offer advanced interactions without the need for an internet connection. JS bluetooth enabled toy https://www.youtube.com/watch?v=PwK3ccOJ6EY
  66. 66. http://www.flickr.com/photos/ducdigital/2892313560 A few final thoughts…
  67. 67. Each of these examples, taken by itself, is modestly useful. Taken as a whole, however, they imply a vast "long tail" where anything can offer information and utility. — Scott Jenson, Google “ https://www.flickr.com/photos/jsome1/1243493095
  68. 68. https://www.flickr.com/photos/nnova/16527031431 Affordances: the actionable properties between the world and an actor…[they] are a part of nature: they do not have to be visible, known, or desirable. Some affordances are yet to be discovered…” — Don Norman “
  69. 69. Photo of Sniff by Timo Arnall on Flickr, used with permission Sniff - the RFID enabled toy dog The future promises to be full of wonderful and mysterious things whose physical form may not always hint at the opportunity-space they present.
  70. 70. As designers, it will be our job to mediate and enable the discovery of these hidden capabilities. To render the virtual tangible, and expose the hidden meanings and opportunities within physical things. Photo of Sniff by Timo Arnall on Flickr, used with permission speaker RFID reader vibration motor battery vibration motor
  71. 71. This is what I believe the web was truly meant for…
 
 (…even if it maybe took a while for it to reveal itself) Immaterials: Light Painting Wi-fi explored the invisible terrain of WiFi networks in urban spaces by light painting signal strength in long-exposure photographs.
  72. 72. https://www.flickr.com/photos/michale/147584173/ The web isn’t a page, a platform, a destination, or an activity—its a universal tool for us to explore, hack and shape our world.
  73. 73. What if you could bump into data? Hold it in your hand as easily as holding a cup? Brendan Dawes, Data as an object
  74. 74. http://www.flickr.com/photos/tinou/453593446 thank you many thanks to the amazing photographers on http://creativecommons.org/licenses/by/2.5 @yiibu hello@yiibu.com contact us at Presentation deck available @
 http://www.slideshare.net/yiibu

×