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.
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
“
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
“
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. 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. 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. 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.
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. 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. 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. 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. 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
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. …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. “…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
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,
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. 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. …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. 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. 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. 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. 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. …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. 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. …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. 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. 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.
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. 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. …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. 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. 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. 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. 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. 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. …you can focus on
crafting small,
carefully-curated
bundles of experience
that combine to tell a
great story.
Source: The Verge
54. (or if you will…*much*
better ads?)
Source: The Verge
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. 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. 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. 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. …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. 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. PS - Messaging may be
eating websites…but i’m not
certain it has to eat the web
https://www.flickr.com/photos/garryknight/6436100219
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. 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
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
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. 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. 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.