SlideShare ist ein Scribd-Unternehmen logo
1 von 107
Downloaden Sie, um offline zu lesen
Immaterials: Light Painting Wi-fi explored the invisible terrain of WiFi networks in urban spaces by light painting signal strength in long-exposure photographs.
physical web
exploring the
a workshop for UX Lisbon 2016
• A brief history
• Understanding Physical Web and Web Bluetooth.
• Three key use cases.
• Design considerations

Coffee Break :-)

• Group exercise (~35 minutes)
• Group discussion (~45 minutes)
Workshop agenda
In this workshop, we will discuss the Physical Web and Web
Bluetooth: two unrelated but highly complimentary technologies
that enable us to create signposts and pathways between the
web and physical world.
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
“
1. A brief history
5
The Physical Web isn’t our first attempt to place digital markers
within the physical world. Most older approaches in fact are still in
use as they serve slightly different use cases.
QR codes (Japan, 1994)
Invented for use in retail but rapidly
adopted across industries.
Advantages
• Cheap to implement and distribute.
• Can hold up to 1000 bytes of data.
• Easily discoverable.
Disadvantages
• Hard to scan from a distance.
• Many people think they’re ugly.
• Most people (outside Asia) don’t
have a QR code reader.
QR codes (Japan, 1994)
• Invented for use in retail but rapidly
adopted across industries.
• Advantages
• Cheap. Easy to implement.
• Disadvantages (practical)
• Hard to scan from a distance.
• One to one: If you’re close enough
to scan the code then (probably)
no-one else can scan it.
• Disadvantages (sociocultural)
• Most people (outside Asia) don’t
have a QR code reader.
• Many people think they’re ugly.
RFID, NFC (1983, 2002)
• Both employ radio signals to
exchange data between nearby
objects.
Advantage
• Proximity often requires explicit
user action, which improves trust,
and makes these technologies ideal
for payment and identification.
Disadvantage
• Poor discoverability. Must be
signposted or rely on learned
behaviour.
British Airways NFC + e-
paper baggage tag prototype
Proximity marketing 1.0 (2004)
• A small server broadcasts short
messages, images, mp3s etc. into
a space using Bluetooth.
Disadvantage
• Anyone nearby with Bluetooth
turned on received the broadcast.
• Was mostly used for advertising
so became a form of spam (which
forced many people to shut
Bluetooth off).
https://www.flickr.com/photos/voyages-provence/13541325644
Apple iBeacon (2013)
• Small battery powered Beacons
broadcast messages to iOS + Android
apps using Bluetooth Low Energy (BLE).
• Only the app that matches the beacon
ID recognizes the broadcast.
Advantage
• Users aren’t bombarded with messages
from brands they don’t already have a
relationship with.

Disadvantage
• Users without the specific app that matches
the beacon can’t discover/take advantage
of the data or service it provides.
*kontakt.io beacon shown
iBeacon On iOS, a user’s app will automatically
receive a broadcast each time it passes by a
beacon—even if the app is in background
mode or switched off.
Advantage
• If a user walks by several beacons, it’s
therefore possible track their path and use
it to trigger location-relevant offers or
notifications (i.e. a user’s gate number
when they enter the airport).
Disadvantage
• Potential privacy concerns.
• Even if the user likes a brand,
automatically triggered notifications can
rapidly become annoying.
The goal of the Physical Web isn’t to replace these technologies,
but to address some of their challenges by leveraging the ‘super-
powers’ of URLs and the open, flexible, decentralised and
universally supported web.
2. How does the Physical Web work?
15
The Physical Web (PW) is an open-source* project. Google
initiated the technology, and has the most widespread
implementation (~800m devices) through Chrome on Android and
iOS—but there’s already a large ecosystem of other contributors.
It’s all open source!
*Visit GitHub to download the source and/or contribute to these conversations.
1. The beacon
(a thing that
broadcasts a URL)
The Physical Web is pretty simple—it has three parts
2. The scanner/browser
(a thing that scans for, retrieves
and displays a list of URLs)
3. Proxy
(user advocate)
optional cloud
service
The specifications for all three are open source.
What is a beacon?
BLE radio transmitter
(intermittently on, sips power
compared to regular BT)
low-cost, long-life
(~2yrs) battery or
other power source
many beacons also include
some form of remote
management appThis beacon is by Estimote (but there are many others)
many sizes and
form factors
A beacon’s (only) job is to repeatedly* transmit
a signal that other devices can see.
The message itself is transmitted using a BLE
‘advertising packet’, a standard broadcast
format limited to 17 bytes.
Once in range, Bluetooth-equipped devices like
a smartphone can “see” the beacon and
receive its broadcast (if BT is switched on).
*recommended every 700 milliseconds
broadcast range
What it does
Unidirectional broadcast
The Bluetooth ‘advertising’ function
is by-design unidirectional.
• A single beacon can advertise to
multiple nearby smartphones but
these devices cannot send data back
to the beacon.
• Beacons also cannot physically
detect when clients scans them so
cannot track passers-by.
to broadcast URLs could also be
attached or embedded into all sorts of
smart (and otherwise dumb) things around us
https://www.flickr.com/photos/naan/2398024748
…in the near future, the ability
Permanently
broadcasts “I love you”
Turn me
off from a
distance
Change my
colour!
Check what materials
i’m made of when
Craigslisting me.
Understand how
I work and where
to recycle me
2. The scanner/browser
As the beacons broadcast URLs, the most common scanners are
(and will probably remain?) web browsers.
Chrome

Android + iOS
~800M devices
Opera

(Labs browsers)
Mozilla

(Beta)
Microsoft Edge

(coming soon)
Safari Mobile

????
Unlike iBeacon, there is
however no background
scanning. All scanning for
URLs must be user-initiated.
As the Physical Web is new,
users will probably not scan
unless they’re aware of nearby
content, or notice the logo.
(This is how the ‘normal’ web began as
well :-)
How do you ‘scan’ (in Chrome)
A user opens their Android Notification
screen or Today Widget on iOS.
If there are beacons nearby, they will see a
low priority (no vibration) notification. Tapping the notification displays a list of
all beacons within range, showing their
URL, page title, description and favicon*.
…displayedinorderofproximity
*see this article for details of metadata retrieval in each browser
(Behaviour varies by browser)
And then…?
https://webPage.io
That’s (technically) it. The beacon’s job is done. All subsequent
interactions between the user and brand take place ‘on the web’.
https://shortURL.io
user taps to load the
page (on the internet
—the beacon does
not serve the page)
The proxy sits in between the beacon and the user. A proxy is
optional but serves two important purposes: improve
performance and protect the user.
The Chrome proxy is called the Physical Web Service (PWS).
Other browsers have a similar (but probably not identical) service.
3. The proxy
*more details on the PWS and its role
What it does
https://shortURL.io
2
1
(based on Google’s PWS…each proxy is a bit different)
parses the
document to
extract
metadata• final URL
• page title
• description
• favicon
What it does
https://shortURL.io
BEACONS BOOKMARKTOP SITES
Search or enter address
Haro Sushi and Izakaya
haro-sushi.com
Hons on Robson
hons-noodles.com
2
analysis +
optimisation
4
1
one-way broadcast
(based on Google’s PWS…each proxy is a bit different)
parses the
document to
extract
metadata
3
• final URL
• page title
• description
• favicon
Security + privacy

Masks the user’s device information from a web site until the
user has chosen to interact with it.
Ensures site doesn’t contain SPAM or malicious content.
De-duplication*

If several beacons with the same URL are used within a space
the user's will only see one URL.
Optimisation
Augments and enriches the basic results to improve usefulness
and usability. e.g. sorting, ranking and filtering for relevance
User benefits
*Chrome only (for now)
Miscellaneous FAQ
HTTPS only (on Chrome*)
All communications between your browser and the website are
encrypted.
All interactions are ‘on the web’
Once a user selects a site, all subsequent interactions take place
on the web so automatically conform to privacy-preserving
behaviours such as opting-in to enable geolocation or web
notifications.
Q: Are any other user safeguards built in?
*For now. Other scanners will hopefully emulate this.
No. There are many ways to broadcast a URL. Today, the Physical
Web uses BLE because of its ubiquity on mobile devices today.
Additionally, it is highly energy efficient—many bluetooth beacons
today have multi-year battery lives.
The hope however, is that other useful formats will be supported.
Two strong candidates are mDNS and uPnP—transport protocols
that enables users who are logged into wi-fi to discover beacons
broadcasting on that same wi-fi network.
Q: Will/does the Physical Web only support BLE?
See Github for the latest discussions on mDNS
An outstanding issue with wi-fi based protocols is that the devices
that are most likely to broadcast this way (e.g. TVs, printers, smart
home appliances) will most likely broadcast a local IP address
rather than a public URL.
The (cloud-based) proxy will therefore not be able to follow this link
to retrieve the page title and description, perform customary security
checks, or further optimise the discovery experience.
Challenges with wi-fi based discovery
See Github for the latest discussions on local IP-based discovery.
Eddystone is a new open source protocol specification from Google
that defines a BLE message format for proximity interactions.
Eddystone broadens what can be done with beacons by
broadcasting up to four formats (or ‘frame’ types):
• Eddystone UID, EID and TLM—Which all work with apps and
enable interactions similar to iBeacon.
• Eddystone URL—Which the Physical Web is now based on and works
with a browser.
Q: What is Eddystone?
Thought experiment:

Does the scanner have to be a browser?
No. The browser is merely an app that incorporates the
Physical Web specification. This specification is open source,
so companies could build the ability to “see” Physical Web
URLs into other apps.
“…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
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
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,
3. Three key use cases
40
Use case 1: Pure discovery (“A much smarter QR code”)
Use case 2: Interact with moderately “smart” things
Use case 3: Directly control an object
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
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
…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
Tube, DLR, London Overground
Part closureLondon Overgroud
Part closureNorthern
Service closedWaterloo & City
Good service
on all other
lines
Average wait at North
Entrance is 12 minutes
https://www.flickr.com/photos/oatsy40/24775669489/
you can also dynamically deep-dive
to the exact content that suit a user’s
context and location
https://www.flickr.com/photos/marketingfacts/6323249188/
...in Korea, grocery stores are embedded
on Subway platforms where users scan QR codes to
buy items that are delivered just-in-time for dinner
Snapchat Geofilters are small content bundles
that become available once a user reaches a
given (geofenced) place.
instead of merely delivering information,
the URL could provide a location-relevant
utility or experiential application
…or attach URLs to a “thing”
whose identity is more important
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
than its context
Miscellaneous FAQ
By design, the Physical Web does not push messages (and it
will hopefully remain this way).
You can however expand on its base behaviours by combining
it with other web technologies.
For example…
Q: Is it possible to push messages or notifications
from a Physical Web beacon?
https://www.flickr.com/photos/sfj/288526372
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
once the table is ready
customers can add their names to
Scenario:
a wait-list and receive a notification
1. Once a user has joined the queue, ask her to opt-in* to Web Push
Notifications. 



These will be managed by a Service Worker—a new web standard
that enables the browser to run scripts in the background—even
when the page is not open.

2. Once the customer’s table is ready, a web service will message the
service worker, that will then trigger the push notification.
User-centered push notification (…an example)
*opting-in is a default requirement for privacy sensitive web standards such as Geolocation and Push Notifications
Use case 1: Pure discovery (“A much smarter QR code”)
Use case 2: Interact with moderately “smart” things
Use case 3: Directly control an object
50
Most “smart” things we use these days are
not that smart. While they can often be
controlled using an app, very rarely does the
app “speak” directly to the thing.
A brief “smart thing” primer…
Instead, the app often
communicates with
the cloud, or a local
hub (or ‘bridge’)
which then relays the
command to the
device.
1
Issue a command:
”Lamp on!”
For example…
1
cloud
service API
The bridge in your
home receives the
command via wi-fi.
2
For example…
Issue a command:
”Lamp on!”
1
cloud
service API
The bridge in your
home receives the
command via wi-fi.
2
3
It transmits the
command (P2P) to
nearby bulbs
For example…
Issue a command:
”Lamp on!”
1
cloud
service API
The bridge in your
home receives the
command via wi-fi.
2
3
It transmits the
command (P2P) to
nearby bulbs
If other bulbs are too far from the
bridge, the closest bulb uses a mesh
network to pass the message along
4
For example…
Issue a command:
”Lamp on!”
1
cloud
service API
The bridge in your
home receives the
command via wi-fi.
2
3
It transmits the
command (P2P) to
nearby bulbs
If other bulbs are too far from the
bridge, the closest bulb uses a mesh
network to pass the message along
4
For example…
smart
pretty
smart
less
smart
less
smart
less
smart
less
smart
smart
Issue a command:
”Lamp on!”
…by extending this pattern to
the web we can create all
sorts of rich and yet casual
interactions while completely
bypassing the friction of first
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.
And once you reconsider how “smart” a device
needs to be to create a useful (and convincing)
experience—you may also want to reconsider
the term ‘device’.
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.
the music system…or the café itself?
in this scenario, is ‘the device‘
https://www.flickr.com/photos/charlottemorrall/3778508426
PS - Android users
can even download
the native app directly
from the plane :-)
Air Canada Rouge replaced their seat-back entertainment 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.
Use case 1: “A much smarter QR code”
Use case 2: Interact with moderately “smart” things
Use case 3: Directly control an object
60
Web Bluetooth is an open web standard that enables users
—in a secure and privacy-preserving way—to discover
smart devices, communicate with them, and use a web
page to directly control them.
Support levels
The technology is completely separate from the Physical Web but
highly complimentary. It is nearing launch on Chrome and is currently
testable behind a Chrome ‘flag’.
Chrome

Android + iOS
(behind Dev flag)
Opera

(Labs browser)
Mozilla

(Experimental)
Microsoft Edge

(coming soon?)
Safari Mobile

????
Built-in security features
HTTPS Only
All communications between your
browser and the website (and in this
case, the object) are encrypted.
User Gesture Required
As a security feature, discovering
nearby Bluetooth devices must be
called via a user gesture like a touch
or mouse click.
FitBit
Heart Rate Monitor GO9
Visit the thing’s URL

e.g. shown on the thing’s
package, accessible via QR
code, Physical Web beacon Tap to connect. You can now
interact with the
device!
4
How it works: Device discovery and pairing
1
Choose device and
grant permission to
pair with the device.
2
Parrot Drone
3
CONNECTED success!
PAIR
Playbill candle
…one more thing
One neat thing about BLE—is that you can also use it to create
new (personalized) web UIs for known devices*.
*whose services are exposed with the necessary read/write permissions.
• A standardised way for BLE devices to advertise their
services to the outside world.
• Each device has services (e.g. battery service) which has
characteristics (e.g. battery level: 0-100).
• BLE has a list of generic services for common devices such
as, but products can also create their own.
• The value of a characteristics can be read, you can also write
to it and request notifications* when the value changes.
*the web app (not the user) receives the notifications and uses them to update the UI as needed
Bluetooth (Generic Attributes) GATT 101
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
4. Design considerations
70
It used to be fairly straightforward for users to understand what a
thing was, what it could do, and how to make it do those things.
Photo of Sniff by Timo Arnall on Flickr, used with permission
Sniff - the RFID
enabled toy dog
With IoT (and connected things in general) this becomes far
more challenging.
Photo of Sniff by Timo Arnall on Flickr, used with permission
speaker
RFID reader
vibration motor
battery
vibration motor
The conceptual model is the
understanding and expectations
you want the user to have of the
system.
What components does it have,
how does it work, and how can
they interact with it? It’s the
mental scaffolding that enables
users to figure out how to
interact with your service.”
— Claire Rowland
“
1
cloud
service API
2
3
4
The system might in reality do this…
Issue a command:
”Lamp on!”
The bridge in your
home receives the
command via wi-fi.
It transmits the
command (P2P) to
nearby bulbs
If other bulbs are too far from the
bridge, the closest bulb uses a mesh
network to pass the message along
But (if you’re lucky) the user sees (something like) this…
It’s OK for a user’s conceptual model
to be incorrect, so long as this
doesn’t prevent them from easily
and safely operating the product.
But (if you’re lucky) the user sees (something like) this…
The whole point of using the web to
interact with things and spaced is it
to enable random, often one-time
interactions that occur ‘in the wild’.
In this context (whether we like it or
not) there will often be little time or
incentive for a user to ‘properly’
learn how things work.
https://twitter.com/collision/status/729166303253041152
The guidelines in this section tend to work best the more of them
you implement. The ultimate goal is to enable users to quickly and
easily develop a useful and plausible conceptual model.
i. Tune the brain’s broadcast range

Tune the range to aid discoverability and clarify the
relationship between the object and the space it inhabits.
*The advertising range can drop significantly if adjacent to walls which are made of metal or brick.
BLE has a typical unobstructed broadcast range of 70-100m*.
Most beacons allow you to adjust their beacon’s transmission
power—which will in effect—adjust this range.
An ideal setting prioritises user context while being mindful of
beacon battery life (>power = >battery consumption).
Sample beacon range for a Kontakt.io beacon.
Unnecessarily wide or
greatly overlapping ranges
can result in premature
discovery, introduce
ambiguity and increase
cognitive load.Is there actual value in
being able to “see” this
parking meter’s URL from
100m away? Are you
merely creating noise?
Tuning the range to minimise or avoid overlap
can reduce friction, minimise errors, and
increase trust in the overall service.
This is particularly important if
the service has a cost 

(…which in the case of a
vending machine might prove a
minor inconvenience, while in
the case of the parking meter
could result in a substantial
fine or a towed vehicle!)
How costly is human error in
this particular context?
https://www.flickr.com/photos/crondeau/14314596362/
url/specialExhibitDouglasCoupland
url/thisDonutThingHereThatDougWantsHelpIdentifying
Douglas Coupland, “The Brick Wall”, 2005/2014 assemblage with pieces
from the following toys and various untraceable construction sets.
this technique isn’t limited to
objects you interact with…
ii. Provide clear (and ideally) real-time feedback

Strong feedback improves learnability, promotes trust
and helps users feel in-control.
iii. Use consistent signposting

Content in the physical environment should—where
possible—match that used on the web interface.
Space
#2304
Meter
#2304
Meter #2304
Main St, 10 m from Fir St.
$2.50FOR 1 HOUR
PARK HERE
ends at 13:47pm
SPOT is brilliantly simple
way to improve usability
and increase trust.
“Tap a colored button and
look for the Uber with the
matching colored SPOT
light. Passengers can
even hold down on one of
the buttons to turn their
phone that colour and
wave it in the air to help
their driver find them.”
iv. Provide just enough content

Consider how much content you really need.
there’s nothing wrong with simply mirroring
a beacon architecture to its physical
https://www.flickr.com/photos/morebyless/14246207164
url/grandGallery
url/artDesign
url/artDesign
url/artDesign
url/naturalWorld
url/naturalWorld
url/naturalWorld
and virtual equivalent
Does my interaction with this
flower pot require much more
than a disembodied record-
set?
[yes]
[no]
[maybe]
https://www.flickr.com/photos/badlydrawn/15972048661
SODERHAMN
Find it in store
105.523.23
Aisle: Location: 0227
Download
instructions
If however, the information’s role is
to help complete a specific task—
then the content should probably be
more specific to that task.
Does my interaction with
this flower pot require
much more than a
disembodied record-set?
[yes]
[no]
[maybe]
Source: Estimote Nearables
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 content
and micro-interaction…
as we exchange smaller and smaller
…it’s not clear we’ll even
need to open an app* at all
*native or otherwise—remember, notifications (with actions)
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
v. Anticipate novel uses

Anticipate URL re-use in novel contexts and, where needed
provide clear guidance to avoid unexpected errors.
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?
https://www.flickr.com/photos/sfj/288526372
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 it’s not hard to imagine
remote URL use for almost
any physical web context
What happens if someone joins
remotely. Is the outcome
positive or negative? And for
whom is it so?
[the user]
[the restauraunt]
[the other people in the queue]
Is the physical
touchpoint merely an
entry point to future
(virtual) interaction?
When officials in Melbourne
assigned email addresses to
trees (to enable people to
report dangerous branches)…
some people sent in letters
and poems for the trees.
https://www.flickr.com/photos/rbh/14431865903
APOLOGIES
To: London Plane, Tree ID 1032398, St Kilda Rd
My dog pee’d on you the other day.
Sincerest apologies.
A STRANGE QUESTION
To: Western Red Cedar,Tree ID 1058295

Hi Tree,
Are you worried about being affected by the Greek debt
crisis? Should Greece be allowed to stay in the
European Union?
HELLO TREE
To: Green Leaf Elm, Tree ID 1022165
Dear Green Leaf Elm,
I hope you like living at St. Mary’s. Most of the time I
like it too. I have exams coming up and I should be
busy studying. You do not have exams because you are
a tree. I don’t think that there is much more to talk
3. Group exercise
11:00-11:50
• Group brainstorming, discussion and design.
11:50-12:30
• Group presentations
• Limited to ~5 minutes each so we can fit as many as
possible.
Group exercise (11:00-12:30)
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

Weitere ähnliche Inhalte

Was ist angesagt?

Metasploit
MetasploitMetasploit
Metasploithenelpj
 
MediaPipeの紹介
MediaPipeの紹介MediaPipeの紹介
MediaPipeの紹介emakryo
 
Super Easy Memory Forensics
Super Easy Memory ForensicsSuper Easy Memory Forensics
Super Easy Memory ForensicsIIJ
 
Spin Your CTI Process Round - FIRST CTI Conference 2023
Spin Your CTI Process Round - FIRST CTI Conference 2023Spin Your CTI Process Round - FIRST CTI Conference 2023
Spin Your CTI Process Round - FIRST CTI Conference 2023Andreas Sfakianakis
 
計算化学実習講座:第一回
計算化学実習講座:第一回計算化学実習講座:第一回
計算化学実習講座:第一回Maho Nakata
 
「Turtlebot3の紹介」 ROS Japan UG #10 勉強会
「Turtlebot3の紹介」 ROS Japan UG #10 勉強会「Turtlebot3の紹介」 ROS Japan UG #10 勉強会
「Turtlebot3の紹介」 ROS Japan UG #10 勉強会ROBOTIS Japan
 
async/await不要論
async/await不要論async/await不要論
async/await不要論bleis tift
 
Introduction of CTF and CGC
Introduction of CTF and CGCIntroduction of CTF and CGC
Introduction of CTF and CGCKir Chou
 
검색엔진에 적용된 ChatGPT
검색엔진에 적용된 ChatGPT검색엔진에 적용된 ChatGPT
검색엔진에 적용된 ChatGPTTae Young Lee
 
TurtleBot3でROSを始めよう
TurtleBot3でROSを始めようTurtleBot3でROSを始めよう
TurtleBot3でROSを始めようROBOTIS Japan
 
インテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor Skochinsky
インテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor SkochinskyインテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor Skochinsky
インテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor SkochinskyCODE BLUE
 
Xamarinで作る 「オリジナルタイル地図」アプリ
Xamarinで作る「オリジナルタイル地図」アプリXamarinで作る「オリジナルタイル地図」アプリ
Xamarinで作る 「オリジナルタイル地図」アプリKohei Otsuka
 
CTF for ビギナーズ ネットワーク講習資料
CTF for ビギナーズ ネットワーク講習資料CTF for ビギナーズ ネットワーク講習資料
CTF for ビギナーズ ネットワーク講習資料SECCON Beginners
 
Dependable Software Development in Software Engineering SE18
Dependable Software Development in Software Engineering SE18Dependable Software Development in Software Engineering SE18
Dependable Software Development in Software Engineering SE18koolkampus
 
Final LINQ Extensions
Final LINQ ExtensionsFinal LINQ Extensions
Final LINQ ExtensionsKouji Matsui
 

Was ist angesagt? (19)

コルーチンの使い方
コルーチンの使い方コルーチンの使い方
コルーチンの使い方
 
Metasploit
MetasploitMetasploit
Metasploit
 
MediaPipeの紹介
MediaPipeの紹介MediaPipeの紹介
MediaPipeの紹介
 
Super Easy Memory Forensics
Super Easy Memory ForensicsSuper Easy Memory Forensics
Super Easy Memory Forensics
 
Spin Your CTI Process Round - FIRST CTI Conference 2023
Spin Your CTI Process Round - FIRST CTI Conference 2023Spin Your CTI Process Round - FIRST CTI Conference 2023
Spin Your CTI Process Round - FIRST CTI Conference 2023
 
Hard Disk Data Acquisition
Hard Disk Data AcquisitionHard Disk Data Acquisition
Hard Disk Data Acquisition
 
計算化学実習講座:第一回
計算化学実習講座:第一回計算化学実習講座:第一回
計算化学実習講座:第一回
 
「Turtlebot3の紹介」 ROS Japan UG #10 勉強会
「Turtlebot3の紹介」 ROS Japan UG #10 勉強会「Turtlebot3の紹介」 ROS Japan UG #10 勉強会
「Turtlebot3の紹介」 ROS Japan UG #10 勉強会
 
Serving ML easily with FastAPI - meme version
Serving ML easily with FastAPI - meme versionServing ML easily with FastAPI - meme version
Serving ML easily with FastAPI - meme version
 
async/await不要論
async/await不要論async/await不要論
async/await不要論
 
Introduction of CTF and CGC
Introduction of CTF and CGCIntroduction of CTF and CGC
Introduction of CTF and CGC
 
검색엔진에 적용된 ChatGPT
검색엔진에 적용된 ChatGPT검색엔진에 적용된 ChatGPT
검색엔진에 적용된 ChatGPT
 
TurtleBot3でROSを始めよう
TurtleBot3でROSを始めようTurtleBot3でROSを始めよう
TurtleBot3でROSを始めよう
 
インテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor Skochinsky
インテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor SkochinskyインテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor Skochinsky
インテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor Skochinsky
 
Xamarinで作る 「オリジナルタイル地図」アプリ
Xamarinで作る「オリジナルタイル地図」アプリXamarinで作る「オリジナルタイル地図」アプリ
Xamarinで作る 「オリジナルタイル地図」アプリ
 
CTF for ビギナーズ ネットワーク講習資料
CTF for ビギナーズ ネットワーク講習資料CTF for ビギナーズ ネットワーク講習資料
CTF for ビギナーズ ネットワーク講習資料
 
Dependable Software Development in Software Engineering SE18
Dependable Software Development in Software Engineering SE18Dependable Software Development in Software Engineering SE18
Dependable Software Development in Software Engineering SE18
 
Final LINQ Extensions
Final LINQ ExtensionsFinal LINQ Extensions
Final LINQ Extensions
 
Django
DjangoDjango
Django
 

Andere mochten auch

Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical webyiibu
 
Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversationyiibu
 
The internet of things is for people
The internet of things is for peopleThe internet of things is for people
The internet of things is for peopleyiibu
 
The Emerging Global Web
The Emerging Global WebThe Emerging Global Web
The Emerging Global Webyiibu
 
Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancementyiibu
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?yiibu
 
Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity -  how to stop worrying and embrace the Android revol...Designing for diversity -  how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...yiibu
 
Everything old is new again
Everything old is new againEverything old is new again
Everything old is new againyiibu
 
Reset the Web
Reset the WebReset the Web
Reset the Webyiibu
 
Curated Ventures - NOAH16 Berlin
Curated Ventures - NOAH16 BerlinCurated Ventures - NOAH16 Berlin
Curated Ventures - NOAH16 BerlinNOAH Advisors
 
Kweak - NOAH16 Berlin
Kweak - NOAH16 BerlinKweak - NOAH16 Berlin
Kweak - NOAH16 BerlinNOAH Advisors
 
EDITION F - NOAH16 Berlin
EDITION F - NOAH16 BerlinEDITION F - NOAH16 Berlin
EDITION F - NOAH16 BerlinNOAH Advisors
 
Fashwell - NOAH16 Berlin
Fashwell - NOAH16 BerlinFashwell - NOAH16 Berlin
Fashwell - NOAH16 BerlinNOAH Advisors
 
Your browser can see and hear and ...
Your browser can see and hear and ...Your browser can see and hear and ...
Your browser can see and hear and ...Rob Manson
 
Mobiles Can Make Your Business Fly
Mobiles Can Make Your Business FlyMobiles Can Make Your Business Fly
Mobiles Can Make Your Business FlyRob Manson
 
e is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web Presentatione is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web PresentationRob Manson
 
Babbel - NOAH16 London
Babbel - NOAH16 LondonBabbel - NOAH16 London
Babbel - NOAH16 LondonNOAH Advisors
 
Lyst - NOAH16 London
Lyst - NOAH16 LondonLyst - NOAH16 London
Lyst - NOAH16 LondonNOAH Advisors
 
Satalia - NOAH16 London
Satalia - NOAH16 LondonSatalia - NOAH16 London
Satalia - NOAH16 LondonNOAH Advisors
 

Andere mochten auch (20)

Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical web
 
Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversation
 
The internet of things is for people
The internet of things is for peopleThe internet of things is for people
The internet of things is for people
 
The Physical Web
The Physical WebThe Physical Web
The Physical Web
 
The Emerging Global Web
The Emerging Global WebThe Emerging Global Web
The Emerging Global Web
 
Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancement
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?
 
Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity -  how to stop worrying and embrace the Android revol...Designing for diversity -  how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...
 
Everything old is new again
Everything old is new againEverything old is new again
Everything old is new again
 
Reset the Web
Reset the WebReset the Web
Reset the Web
 
Curated Ventures - NOAH16 Berlin
Curated Ventures - NOAH16 BerlinCurated Ventures - NOAH16 Berlin
Curated Ventures - NOAH16 Berlin
 
Kweak - NOAH16 Berlin
Kweak - NOAH16 BerlinKweak - NOAH16 Berlin
Kweak - NOAH16 Berlin
 
EDITION F - NOAH16 Berlin
EDITION F - NOAH16 BerlinEDITION F - NOAH16 Berlin
EDITION F - NOAH16 Berlin
 
Fashwell - NOAH16 Berlin
Fashwell - NOAH16 BerlinFashwell - NOAH16 Berlin
Fashwell - NOAH16 Berlin
 
Your browser can see and hear and ...
Your browser can see and hear and ...Your browser can see and hear and ...
Your browser can see and hear and ...
 
Mobiles Can Make Your Business Fly
Mobiles Can Make Your Business FlyMobiles Can Make Your Business Fly
Mobiles Can Make Your Business Fly
 
e is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web Presentatione is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web Presentation
 
Babbel - NOAH16 London
Babbel - NOAH16 LondonBabbel - NOAH16 London
Babbel - NOAH16 London
 
Lyst - NOAH16 London
Lyst - NOAH16 LondonLyst - NOAH16 London
Lyst - NOAH16 London
 
Satalia - NOAH16 London
Satalia - NOAH16 LondonSatalia - NOAH16 London
Satalia - NOAH16 London
 

Ähnlich wie Exploring the physical web

Physical web inside and out final
Physical web inside and out finalPhysical web inside and out final
Physical web inside and out finalstartupIoT
 
Rococo Software Overview Q3 2010
Rococo Software Overview Q3 2010Rococo Software Overview Q3 2010
Rococo Software Overview Q3 2010Sean O'Sullivan
 
Drupalcamp New York 2009
Drupalcamp New York 2009Drupalcamp New York 2009
Drupalcamp New York 2009Tom Deryckere
 
configuring and using internet.pptx
configuring and using internet.pptxconfiguring and using internet.pptx
configuring and using internet.pptxmtsedey2013
 
Telecoms 2.0: Understanding the Impact of Open Mobile
Telecoms 2.0: Understanding the Impact of Open MobileTelecoms 2.0: Understanding the Impact of Open Mobile
Telecoms 2.0: Understanding the Impact of Open MobileMobileMonday Norway
 
Techniques to Control Memory Hogging by Web Browsers: An in-Depth Review
Techniques to Control Memory Hogging by Web Browsers: An in-Depth ReviewTechniques to Control Memory Hogging by Web Browsers: An in-Depth Review
Techniques to Control Memory Hogging by Web Browsers: An in-Depth ReviewEditor IJCATR
 
Design of mobile browsers
Design of mobile browsersDesign of mobile browsers
Design of mobile browsersArpan Baishya
 
Public Sector Talk by Yeliz Yesilada
Public Sector Talk by Yeliz YesiladaPublic Sector Talk by Yeliz Yesilada
Public Sector Talk by Yeliz YesiladaYeliz Yesilada
 
Computer communication and internet
Computer communication and internetComputer communication and internet
Computer communication and interneteVidhya
 
Building Construction Project Summary
Building Construction Project SummaryBuilding Construction Project Summary
Building Construction Project SummaryMichelle Madero
 
Module 103: Internet Technologies
Module 103: Internet TechnologiesModule 103: Internet Technologies
Module 103: Internet TechnologiesNeishaB
 
web training
web trainingweb training
web trainingsourabh4u
 
Developing network-friendly-applications
Developing network-friendly-applicationsDeveloping network-friendly-applications
Developing network-friendly-applicationsBlueVia
 

Ähnlich wie Exploring the physical web (20)

Physical web inside and out final
Physical web inside and out finalPhysical web inside and out final
Physical web inside and out final
 
unit oe 1.pdf
unit oe 1.pdfunit oe 1.pdf
unit oe 1.pdf
 
Rococo Software Overview Q3 2010
Rococo Software Overview Q3 2010Rococo Software Overview Q3 2010
Rococo Software Overview Q3 2010
 
Drupalcamp New York 2009
Drupalcamp New York 2009Drupalcamp New York 2009
Drupalcamp New York 2009
 
configuring and using internet.pptx
configuring and using internet.pptxconfiguring and using internet.pptx
configuring and using internet.pptx
 
Rococo Software Q3 2010
Rococo Software Q3 2010Rococo Software Q3 2010
Rococo Software Q3 2010
 
HTML for beginners
HTML for beginnersHTML for beginners
HTML for beginners
 
Telecoms 2.0: Understanding the Impact of Open Mobile
Telecoms 2.0: Understanding the Impact of Open MobileTelecoms 2.0: Understanding the Impact of Open Mobile
Telecoms 2.0: Understanding the Impact of Open Mobile
 
mobile browsers.pptx
mobile browsers.pptxmobile browsers.pptx
mobile browsers.pptx
 
PPT on MS-CIT Unit-2
PPT on MS-CIT Unit-2PPT on MS-CIT Unit-2
PPT on MS-CIT Unit-2
 
Doran-C4L2010
Doran-C4L2010Doran-C4L2010
Doran-C4L2010
 
Techniques to Control Memory Hogging by Web Browsers: An in-Depth Review
Techniques to Control Memory Hogging by Web Browsers: An in-Depth ReviewTechniques to Control Memory Hogging by Web Browsers: An in-Depth Review
Techniques to Control Memory Hogging by Web Browsers: An in-Depth Review
 
DDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su LotusDDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su Lotus
 
Design of mobile browsers
Design of mobile browsersDesign of mobile browsers
Design of mobile browsers
 
Public Sector Talk by Yeliz Yesilada
Public Sector Talk by Yeliz YesiladaPublic Sector Talk by Yeliz Yesilada
Public Sector Talk by Yeliz Yesilada
 
Computer communication and internet
Computer communication and internetComputer communication and internet
Computer communication and internet
 
Building Construction Project Summary
Building Construction Project SummaryBuilding Construction Project Summary
Building Construction Project Summary
 
Module 103: Internet Technologies
Module 103: Internet TechnologiesModule 103: Internet Technologies
Module 103: Internet Technologies
 
web training
web trainingweb training
web training
 
Developing network-friendly-applications
Developing network-friendly-applicationsDeveloping network-friendly-applications
Developing network-friendly-applications
 

Mehr von yiibu

Adaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the serverAdaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the serveryiibu
 
Letting Go
Letting GoLetting Go
Letting Goyiibu
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with contextyiibu
 
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...yiibu
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibuyiibu
 
Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...yiibu
 

Mehr von yiibu (6)

Adaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the serverAdaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the server
 
Letting Go
Letting GoLetting Go
Letting Go
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
 
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibu
 
Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...
 

Kürzlich hochgeladen

办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一Fi L
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfworkingdev2003
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Yantram Animation Studio Corporation
 
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一D SSS
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一z xss
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证nhjeo1gg
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一diploma 1
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作7tz4rjpd
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造kbdhl05e
 
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degreeyuu sss
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic global solution
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一Fi sss
 
毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...
毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...
毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...ttt fff
 
Chapter 6(1)system devolopment life .ppt
Chapter 6(1)system devolopment life .pptChapter 6(1)system devolopment life .ppt
Chapter 6(1)system devolopment life .pptDoaaRezk5
 

Kürzlich hochgeladen (20)

办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdf
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
 
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
 
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造
 
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing services
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
 
毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...
毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...
毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...
 
Chapter 6(1)system devolopment life .ppt
Chapter 6(1)system devolopment life .pptChapter 6(1)system devolopment life .ppt
Chapter 6(1)system devolopment life .ppt
 

Exploring the physical web

  • 1. Immaterials: Light Painting Wi-fi explored the invisible terrain of WiFi networks in urban spaces by light painting signal strength in long-exposure photographs. physical web exploring the a workshop for UX Lisbon 2016
  • 2. • A brief history • Understanding Physical Web and Web Bluetooth. • Three key use cases. • Design considerations
 Coffee Break :-)
 • Group exercise (~35 minutes) • Group discussion (~45 minutes) Workshop agenda
  • 3. In this workshop, we will discuss the Physical Web and Web Bluetooth: two unrelated but highly complimentary technologies that enable us to create signposts and pathways between the web and physical world.
  • 4. 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 “
  • 5. 1. A brief history 5
  • 6. The Physical Web isn’t our first attempt to place digital markers within the physical world. Most older approaches in fact are still in use as they serve slightly different use cases.
  • 7. QR codes (Japan, 1994) Invented for use in retail but rapidly adopted across industries. Advantages • Cheap to implement and distribute. • Can hold up to 1000 bytes of data. • Easily discoverable. Disadvantages • Hard to scan from a distance. • Many people think they’re ugly. • Most people (outside Asia) don’t have a QR code reader.
  • 8. QR codes (Japan, 1994) • Invented for use in retail but rapidly adopted across industries. • Advantages • Cheap. Easy to implement. • Disadvantages (practical) • Hard to scan from a distance. • One to one: If you’re close enough to scan the code then (probably) no-one else can scan it. • Disadvantages (sociocultural) • Most people (outside Asia) don’t have a QR code reader. • Many people think they’re ugly. RFID, NFC (1983, 2002) • Both employ radio signals to exchange data between nearby objects. Advantage • Proximity often requires explicit user action, which improves trust, and makes these technologies ideal for payment and identification. Disadvantage • Poor discoverability. Must be signposted or rely on learned behaviour. British Airways NFC + e- paper baggage tag prototype
  • 9. Proximity marketing 1.0 (2004) • A small server broadcasts short messages, images, mp3s etc. into a space using Bluetooth. Disadvantage • Anyone nearby with Bluetooth turned on received the broadcast. • Was mostly used for advertising so became a form of spam (which forced many people to shut Bluetooth off). https://www.flickr.com/photos/voyages-provence/13541325644
  • 10. Apple iBeacon (2013) • Small battery powered Beacons broadcast messages to iOS + Android apps using Bluetooth Low Energy (BLE). • Only the app that matches the beacon ID recognizes the broadcast. Advantage • Users aren’t bombarded with messages from brands they don’t already have a relationship with.
 Disadvantage • Users without the specific app that matches the beacon can’t discover/take advantage of the data or service it provides. *kontakt.io beacon shown
  • 11. iBeacon On iOS, a user’s app will automatically receive a broadcast each time it passes by a beacon—even if the app is in background mode or switched off. Advantage • If a user walks by several beacons, it’s therefore possible track their path and use it to trigger location-relevant offers or notifications (i.e. a user’s gate number when they enter the airport). Disadvantage • Potential privacy concerns. • Even if the user likes a brand, automatically triggered notifications can rapidly become annoying.
  • 12. The goal of the Physical Web isn’t to replace these technologies, but to address some of their challenges by leveraging the ‘super- powers’ of URLs and the open, flexible, decentralised and universally supported web.
  • 13. 2. How does the Physical Web work? 15
  • 14. The Physical Web (PW) is an open-source* project. Google initiated the technology, and has the most widespread implementation (~800m devices) through Chrome on Android and iOS—but there’s already a large ecosystem of other contributors. It’s all open source! *Visit GitHub to download the source and/or contribute to these conversations.
  • 15. 1. The beacon (a thing that broadcasts a URL) The Physical Web is pretty simple—it has three parts 2. The scanner/browser (a thing that scans for, retrieves and displays a list of URLs) 3. Proxy (user advocate) optional cloud service The specifications for all three are open source.
  • 16. What is a beacon? BLE radio transmitter (intermittently on, sips power compared to regular BT) low-cost, long-life (~2yrs) battery or other power source many beacons also include some form of remote management appThis beacon is by Estimote (but there are many others) many sizes and form factors
  • 17. A beacon’s (only) job is to repeatedly* transmit a signal that other devices can see. The message itself is transmitted using a BLE ‘advertising packet’, a standard broadcast format limited to 17 bytes. Once in range, Bluetooth-equipped devices like a smartphone can “see” the beacon and receive its broadcast (if BT is switched on). *recommended every 700 milliseconds broadcast range What it does
  • 18. Unidirectional broadcast The Bluetooth ‘advertising’ function is by-design unidirectional. • A single beacon can advertise to multiple nearby smartphones but these devices cannot send data back to the beacon. • Beacons also cannot physically detect when clients scans them so cannot track passers-by.
  • 19. to broadcast URLs could also be attached or embedded into all sorts of smart (and otherwise dumb) things around us https://www.flickr.com/photos/naan/2398024748 …in the near future, the ability Permanently broadcasts “I love you” Turn me off from a distance Change my colour! Check what materials i’m made of when Craigslisting me. Understand how I work and where to recycle me
  • 20. 2. The scanner/browser As the beacons broadcast URLs, the most common scanners are (and will probably remain?) web browsers. Chrome
 Android + iOS ~800M devices Opera
 (Labs browsers) Mozilla
 (Beta) Microsoft Edge
 (coming soon) Safari Mobile
 ????
  • 21. Unlike iBeacon, there is however no background scanning. All scanning for URLs must be user-initiated. As the Physical Web is new, users will probably not scan unless they’re aware of nearby content, or notice the logo. (This is how the ‘normal’ web began as well :-)
  • 22. How do you ‘scan’ (in Chrome) A user opens their Android Notification screen or Today Widget on iOS. If there are beacons nearby, they will see a low priority (no vibration) notification. Tapping the notification displays a list of all beacons within range, showing their URL, page title, description and favicon*. …displayedinorderofproximity *see this article for details of metadata retrieval in each browser (Behaviour varies by browser)
  • 23. And then…? https://webPage.io That’s (technically) it. The beacon’s job is done. All subsequent interactions between the user and brand take place ‘on the web’. https://shortURL.io user taps to load the page (on the internet —the beacon does not serve the page)
  • 24. The proxy sits in between the beacon and the user. A proxy is optional but serves two important purposes: improve performance and protect the user. The Chrome proxy is called the Physical Web Service (PWS). Other browsers have a similar (but probably not identical) service. 3. The proxy *more details on the PWS and its role
  • 25. What it does https://shortURL.io 2 1 (based on Google’s PWS…each proxy is a bit different) parses the document to extract metadata• final URL • page title • description • favicon
  • 26. What it does https://shortURL.io BEACONS BOOKMARKTOP SITES Search or enter address Haro Sushi and Izakaya haro-sushi.com Hons on Robson hons-noodles.com 2 analysis + optimisation 4 1 one-way broadcast (based on Google’s PWS…each proxy is a bit different) parses the document to extract metadata 3 • final URL • page title • description • favicon
  • 27. Security + privacy
 Masks the user’s device information from a web site until the user has chosen to interact with it. Ensures site doesn’t contain SPAM or malicious content. De-duplication*
 If several beacons with the same URL are used within a space the user's will only see one URL. Optimisation Augments and enriches the basic results to improve usefulness and usability. e.g. sorting, ranking and filtering for relevance User benefits *Chrome only (for now)
  • 29. HTTPS only (on Chrome*) All communications between your browser and the website are encrypted. All interactions are ‘on the web’ Once a user selects a site, all subsequent interactions take place on the web so automatically conform to privacy-preserving behaviours such as opting-in to enable geolocation or web notifications. Q: Are any other user safeguards built in? *For now. Other scanners will hopefully emulate this.
  • 30. No. There are many ways to broadcast a URL. Today, the Physical Web uses BLE because of its ubiquity on mobile devices today. Additionally, it is highly energy efficient—many bluetooth beacons today have multi-year battery lives. The hope however, is that other useful formats will be supported. Two strong candidates are mDNS and uPnP—transport protocols that enables users who are logged into wi-fi to discover beacons broadcasting on that same wi-fi network. Q: Will/does the Physical Web only support BLE? See Github for the latest discussions on mDNS
  • 31. An outstanding issue with wi-fi based protocols is that the devices that are most likely to broadcast this way (e.g. TVs, printers, smart home appliances) will most likely broadcast a local IP address rather than a public URL. The (cloud-based) proxy will therefore not be able to follow this link to retrieve the page title and description, perform customary security checks, or further optimise the discovery experience. Challenges with wi-fi based discovery See Github for the latest discussions on local IP-based discovery.
  • 32. Eddystone is a new open source protocol specification from Google that defines a BLE message format for proximity interactions. Eddystone broadens what can be done with beacons by broadcasting up to four formats (or ‘frame’ types): • Eddystone UID, EID and TLM—Which all work with apps and enable interactions similar to iBeacon. • Eddystone URL—Which the Physical Web is now based on and works with a browser. Q: What is Eddystone?
  • 33. Thought experiment:
 Does the scanner have to be a browser?
  • 34. No. The browser is merely an app that incorporates the Physical Web specification. This specification is open source, so companies could build the ability to “see” Physical Web URLs into other apps.
  • 35. “…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
  • 36. 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
  • 37. 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,
  • 38. 3. Three key use cases 40
  • 39. Use case 1: Pure discovery (“A much smarter QR code”) Use case 2: Interact with moderately “smart” things Use case 3: Directly control an object
  • 40. 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
  • 41. 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
  • 42. …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
  • 43. Tube, DLR, London Overground Part closureLondon Overgroud Part closureNorthern Service closedWaterloo & City Good service on all other lines Average wait at North Entrance is 12 minutes https://www.flickr.com/photos/oatsy40/24775669489/ you can also dynamically deep-dive to the exact content that suit a user’s context and location
  • 44. https://www.flickr.com/photos/marketingfacts/6323249188/ ...in Korea, grocery stores are embedded on Subway platforms where users scan QR codes to buy items that are delivered just-in-time for dinner
  • 45. Snapchat Geofilters are small content bundles that become available once a user reaches a given (geofenced) place. instead of merely delivering information, the URL could provide a location-relevant utility or experiential application
  • 46. …or attach URLs to a “thing” whose identity is more important 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 than its context
  • 48. By design, the Physical Web does not push messages (and it will hopefully remain this way). You can however expand on its base behaviours by combining it with other web technologies. For example… Q: Is it possible to push messages or notifications from a Physical Web beacon?
  • 49. https://www.flickr.com/photos/sfj/288526372 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 once the table is ready customers can add their names to Scenario: a wait-list and receive a notification
  • 50. 1. Once a user has joined the queue, ask her to opt-in* to Web Push Notifications. 
 
 These will be managed by a Service Worker—a new web standard that enables the browser to run scripts in the background—even when the page is not open.
 2. Once the customer’s table is ready, a web service will message the service worker, that will then trigger the push notification. User-centered push notification (…an example) *opting-in is a default requirement for privacy sensitive web standards such as Geolocation and Push Notifications
  • 51. Use case 1: Pure discovery (“A much smarter QR code”) Use case 2: Interact with moderately “smart” things Use case 3: Directly control an object 50
  • 52. Most “smart” things we use these days are not that smart. While they can often be controlled using an app, very rarely does the app “speak” directly to the thing. A brief “smart thing” primer…
  • 53. Instead, the app often communicates with the cloud, or a local hub (or ‘bridge’) which then relays the command to the device.
  • 54. 1 Issue a command: ”Lamp on!” For example…
  • 55. 1 cloud service API The bridge in your home receives the command via wi-fi. 2 For example… Issue a command: ”Lamp on!”
  • 56. 1 cloud service API The bridge in your home receives the command via wi-fi. 2 3 It transmits the command (P2P) to nearby bulbs For example… Issue a command: ”Lamp on!”
  • 57. 1 cloud service API The bridge in your home receives the command via wi-fi. 2 3 It transmits the command (P2P) to nearby bulbs If other bulbs are too far from the bridge, the closest bulb uses a mesh network to pass the message along 4 For example… Issue a command: ”Lamp on!”
  • 58. 1 cloud service API The bridge in your home receives the command via wi-fi. 2 3 It transmits the command (P2P) to nearby bulbs If other bulbs are too far from the bridge, the closest bulb uses a mesh network to pass the message along 4 For example… smart pretty smart less smart less smart less smart less smart smart Issue a command: ”Lamp on!”
  • 59. …by extending this pattern to the web we can create all sorts of rich and yet casual interactions while completely bypassing the friction of first 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.
  • 60. And once you reconsider how “smart” a device needs to be to create a useful (and convincing) experience—you may also want to reconsider the term ‘device’.
  • 61. 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. the music system…or the café itself? in this scenario, is ‘the device‘
  • 62. https://www.flickr.com/photos/charlottemorrall/3778508426 PS - Android users can even download the native app directly from the plane :-) Air Canada Rouge replaced their seat-back entertainment 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.
  • 63. Use case 1: “A much smarter QR code” Use case 2: Interact with moderately “smart” things Use case 3: Directly control an object 60
  • 64. Web Bluetooth is an open web standard that enables users —in a secure and privacy-preserving way—to discover smart devices, communicate with them, and use a web page to directly control them.
  • 65. Support levels The technology is completely separate from the Physical Web but highly complimentary. It is nearing launch on Chrome and is currently testable behind a Chrome ‘flag’. Chrome
 Android + iOS (behind Dev flag) Opera
 (Labs browser) Mozilla
 (Experimental) Microsoft Edge
 (coming soon?) Safari Mobile
 ????
  • 66. Built-in security features HTTPS Only All communications between your browser and the website (and in this case, the object) are encrypted. User Gesture Required As a security feature, discovering nearby Bluetooth devices must be called via a user gesture like a touch or mouse click. FitBit Heart Rate Monitor GO9
  • 67. Visit the thing’s URL
 e.g. shown on the thing’s package, accessible via QR code, Physical Web beacon Tap to connect. You can now interact with the device! 4 How it works: Device discovery and pairing 1 Choose device and grant permission to pair with the device. 2 Parrot Drone 3 CONNECTED success! PAIR Playbill candle
  • 68.
  • 70. One neat thing about BLE—is that you can also use it to create new (personalized) web UIs for known devices*. *whose services are exposed with the necessary read/write permissions.
  • 71. • A standardised way for BLE devices to advertise their services to the outside world. • Each device has services (e.g. battery service) which has characteristics (e.g. battery level: 0-100). • BLE has a list of generic services for common devices such as, but products can also create their own. • The value of a characteristics can be read, you can also write to it and request notifications* when the value changes. *the web app (not the user) receives the notifications and uses them to update the UI as needed Bluetooth (Generic Attributes) GATT 101
  • 72.
  • 73. 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
  • 75. It used to be fairly straightforward for users to understand what a thing was, what it could do, and how to make it do those things. Photo of Sniff by Timo Arnall on Flickr, used with permission Sniff - the RFID enabled toy dog
  • 76. With IoT (and connected things in general) this becomes far more challenging. Photo of Sniff by Timo Arnall on Flickr, used with permission speaker RFID reader vibration motor battery vibration motor
  • 77. The conceptual model is the understanding and expectations you want the user to have of the system. What components does it have, how does it work, and how can they interact with it? It’s the mental scaffolding that enables users to figure out how to interact with your service.” — Claire Rowland “
  • 78. 1 cloud service API 2 3 4 The system might in reality do this… Issue a command: ”Lamp on!” The bridge in your home receives the command via wi-fi. It transmits the command (P2P) to nearby bulbs If other bulbs are too far from the bridge, the closest bulb uses a mesh network to pass the message along
  • 79. But (if you’re lucky) the user sees (something like) this…
  • 80. It’s OK for a user’s conceptual model to be incorrect, so long as this doesn’t prevent them from easily and safely operating the product. But (if you’re lucky) the user sees (something like) this…
  • 81. The whole point of using the web to interact with things and spaced is it to enable random, often one-time interactions that occur ‘in the wild’. In this context (whether we like it or not) there will often be little time or incentive for a user to ‘properly’ learn how things work. https://twitter.com/collision/status/729166303253041152
  • 82. The guidelines in this section tend to work best the more of them you implement. The ultimate goal is to enable users to quickly and easily develop a useful and plausible conceptual model.
  • 83. i. Tune the brain’s broadcast range
 Tune the range to aid discoverability and clarify the relationship between the object and the space it inhabits.
  • 84. *The advertising range can drop significantly if adjacent to walls which are made of metal or brick. BLE has a typical unobstructed broadcast range of 70-100m*. Most beacons allow you to adjust their beacon’s transmission power—which will in effect—adjust this range. An ideal setting prioritises user context while being mindful of beacon battery life (>power = >battery consumption). Sample beacon range for a Kontakt.io beacon.
  • 85. Unnecessarily wide or greatly overlapping ranges can result in premature discovery, introduce ambiguity and increase cognitive load.Is there actual value in being able to “see” this parking meter’s URL from 100m away? Are you merely creating noise?
  • 86. Tuning the range to minimise or avoid overlap can reduce friction, minimise errors, and increase trust in the overall service.
  • 87. This is particularly important if the service has a cost 
 (…which in the case of a vending machine might prove a minor inconvenience, while in the case of the parking meter could result in a substantial fine or a towed vehicle!) How costly is human error in this particular context?
  • 88. https://www.flickr.com/photos/crondeau/14314596362/ url/specialExhibitDouglasCoupland url/thisDonutThingHereThatDougWantsHelpIdentifying Douglas Coupland, “The Brick Wall”, 2005/2014 assemblage with pieces from the following toys and various untraceable construction sets. this technique isn’t limited to objects you interact with…
  • 89. ii. Provide clear (and ideally) real-time feedback
 Strong feedback improves learnability, promotes trust and helps users feel in-control.
  • 90.
  • 91. iii. Use consistent signposting
 Content in the physical environment should—where possible—match that used on the web interface.
  • 92. Space #2304 Meter #2304 Meter #2304 Main St, 10 m from Fir St. $2.50FOR 1 HOUR PARK HERE ends at 13:47pm
  • 93. SPOT is brilliantly simple way to improve usability and increase trust. “Tap a colored button and look for the Uber with the matching colored SPOT light. Passengers can even hold down on one of the buttons to turn their phone that colour and wave it in the air to help their driver find them.”
  • 94. iv. Provide just enough content
 Consider how much content you really need.
  • 95. there’s nothing wrong with simply mirroring a beacon architecture to its physical https://www.flickr.com/photos/morebyless/14246207164 url/grandGallery url/artDesign url/artDesign url/artDesign url/naturalWorld url/naturalWorld url/naturalWorld and virtual equivalent
  • 96. Does my interaction with this flower pot require much more than a disembodied record- set? [yes] [no] [maybe] https://www.flickr.com/photos/badlydrawn/15972048661 SODERHAMN Find it in store 105.523.23 Aisle: Location: 0227 Download instructions If however, the information’s role is to help complete a specific task— then the content should probably be more specific to that task.
  • 97. Does my interaction with this flower pot require much more than a disembodied record-set? [yes] [no] [maybe] Source: Estimote Nearables
  • 98. 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 content and micro-interaction… as we exchange smaller and smaller
  • 99. …it’s not clear we’ll even need to open an app* at all *native or otherwise—remember, notifications (with actions) 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
  • 100. v. Anticipate novel uses
 Anticipate URL re-use in novel contexts and, where needed provide clear guidance to avoid unexpected errors.
  • 101. 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?
  • 102. https://www.flickr.com/photos/sfj/288526372 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 it’s not hard to imagine remote URL use for almost any physical web context What happens if someone joins remotely. Is the outcome positive or negative? And for whom is it so? [the user] [the restauraunt] [the other people in the queue]
  • 103. Is the physical touchpoint merely an entry point to future (virtual) interaction?
  • 104. When officials in Melbourne assigned email addresses to trees (to enable people to report dangerous branches)… some people sent in letters and poems for the trees. https://www.flickr.com/photos/rbh/14431865903 APOLOGIES To: London Plane, Tree ID 1032398, St Kilda Rd My dog pee’d on you the other day. Sincerest apologies. A STRANGE QUESTION To: Western Red Cedar,Tree ID 1058295
 Hi Tree, Are you worried about being affected by the Greek debt crisis? Should Greece be allowed to stay in the European Union? HELLO TREE To: Green Leaf Elm, Tree ID 1022165 Dear Green Leaf Elm, I hope you like living at St. Mary’s. Most of the time I like it too. I have exams coming up and I should be busy studying. You do not have exams because you are a tree. I don’t think that there is much more to talk
  • 106. 11:00-11:50 • Group brainstorming, discussion and design. 11:50-12:30 • Group presentations • Limited to ~5 minutes each so we can fit as many as possible. Group exercise (11:00-12:30)
  • 107. 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