Exploring the Physical Limits of Axial Magnetic Bearings ...
Exploring the physical web
Transcript of Exploring the physical web
![Page 1: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/1.jpg)
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
![Page 2: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/2.jpg)
• A brief history • Understanding Physical Web and Web Bluetooth. • Three key use cases. • Design considerationsCoffee Break :-)• Group exercise (~35 minutes) • Group discussion (~45 minutes)
Workshop agenda
![Page 3: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/3.jpg)
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.
![Page 4: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/4.jpg)
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
“
![Page 5: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/5.jpg)
1. A brief history
5
![Page 6: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/6.jpg)
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.
![Page 7: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/7.jpg)
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.
![Page 8: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/8.jpg)
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
![Page 9: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/9.jpg)
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
![Page 10: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/10.jpg)
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
![Page 11: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/11.jpg)
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.
![Page 12: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/12.jpg)
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.
![Page 13: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/13.jpg)
2. How does the Physical Web work?
15
![Page 14: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/14.jpg)
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.
![Page 15: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/15.jpg)
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.
![Page 16: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/16.jpg)
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
![Page 17: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/17.jpg)
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
![Page 18: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/18.jpg)
Unidirectional broadcastThe 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.
![Page 19: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/19.jpg)
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
![Page 20: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/20.jpg)
2. The scanner/browserAs the beacons broadcast URLs, the most common scanners are (and will probably remain?) web browsers.
ChromeAndroid + iOS
~800M devices
Opera(Labs browsers)
Mozilla(Beta)
Microsoft Edge (coming soon)
Safari Mobile ????
![Page 21: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/21.jpg)
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 :-)
![Page 22: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/22.jpg)
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*.
…dis
play
ed in
ord
er o
f pro
xim
ity
*see this article for details of metadata retrieval in each browser
(Behaviour varies by browser)
![Page 23: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/23.jpg)
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)
![Page 24: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/24.jpg)
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
![Page 25: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/25.jpg)
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
![Page 26: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/26.jpg)
What it does
https://shortURL.io
BEACONS BOOKMARKTOP SITES
Search or enter address
Haro Sushi and Izakayaharo-sushi.com
Hons on Robsonhons-noodles.com
Beacons are small devices that broadcast links to web sites. Tap here to learn more
2
analysis + optimisation
4
1one-way broadcast
(based on Google’s PWS…each proxy is a bit different)
parses the document to extract metadata3
• final URL • page title • description • favicon
![Page 27: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/27.jpg)
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)
![Page 28: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/28.jpg)
Miscellaneous FAQ
![Page 29: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/29.jpg)
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.
![Page 30: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/30.jpg)
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
![Page 31: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/31.jpg)
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.
![Page 32: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/32.jpg)
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?
![Page 33: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/33.jpg)
Thought experiment: Does the scanner have to be a browser?
![Page 34: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/34.jpg)
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.
![Page 35: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/35.jpg)
“…the watches glow and vibrate when you walk somewhere in the real world
that corresponds with somewhere inPokémon Go's virtual world”
Source: The Verge - Pokemon Go Plus hands on photos
![Page 36: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/36.jpg)
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
![Page 37: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/37.jpg)
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,
![Page 38: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/38.jpg)
3. Three key use cases
40
![Page 39: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/39.jpg)
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
![Page 40: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/40.jpg)
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
![Page 41: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/41.jpg)
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
![Page 42: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/42.jpg)
…unless you’re waaaaay at the backtop 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
![Page 43: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/43.jpg)
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-diveto the exact content that suit a user’scontext and location
![Page 44: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/44.jpg)
https://www.flickr.com/photos/marketingfacts/6323249188/
...in Korea, grocery stores are embeddedon Subway platforms where users scan QR codes to
buy items that are delivered just-in-time for dinner
![Page 45: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/45.jpg)
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
![Page 46: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/46.jpg)
…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
![Page 47: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/47.jpg)
Miscellaneous FAQ
![Page 48: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/48.jpg)
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?
![Page 49: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/49.jpg)
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 toScenario:
a wait-list and receive a notification
![Page 50: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/50.jpg)
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
![Page 51: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/51.jpg)
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
![Page 52: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/52.jpg)
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…
![Page 53: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/53.jpg)
Instead, the app often communicates with the cloud, or a local hub (or ‘bridge’) which then relays the command to the device.
![Page 54: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/54.jpg)
1
Issue a command: ”Lamp on!”
For example…
![Page 55: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/55.jpg)
1
cloud service API
The bridge in your home receives the command via wi-fi.
2
For example…
Issue a command: ”Lamp on!”
![Page 56: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/56.jpg)
1
cloud service API
The bridge in your home receives the command via wi-fi.
23
It transmits the command (P2P) to nearby bulbs
For example…
Issue a command: ”Lamp on!”
![Page 57: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/57.jpg)
1
cloud service API
The bridge in your home receives the command via wi-fi.
23
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!”
![Page 58: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/58.jpg)
1
cloud service API
The bridge in your home receives the command via wi-fi.
23
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!”
![Page 59: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/59.jpg)
…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.
![Page 60: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/60.jpg)
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’.
![Page 61: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/61.jpg)
https://www.flickr.com/photos/neo_ii/7483010074
Now playing
LOGIN with SPOTIFY
VOTE FOR THE NEXT SONG
I Didn’t see it comingBelle 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‘
![Page 62: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/62.jpg)
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.
![Page 63: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/63.jpg)
Use case 1: “A much smarter QR code”
Use case 2: Interact with moderately “smart” things
Use case 3: Directly control an object
60
![Page 64: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/64.jpg)
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.
![Page 65: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/65.jpg)
Support levelsThe 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’.
ChromeAndroid + iOS
(behind Dev flag)
Opera(Labs browser)
Mozilla(Experimental)
Microsoft Edge (coming soon?)
Safari Mobile ????
![Page 66: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/66.jpg)
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
![Page 67: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/67.jpg)
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!
https://www.youtube.com/watch?v=-FO9thLaiug
PAIR
Playbill candle
![Page 68: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/68.jpg)
![Page 69: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/69.jpg)
…one more thing
![Page 70: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/70.jpg)
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.
![Page 71: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/71.jpg)
• 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
![Page 72: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/72.jpg)
![Page 73: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/73.jpg)
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
![Page 74: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/74.jpg)
4. Design considerations
70
![Page 75: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/75.jpg)
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
![Page 76: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/76.jpg)
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
![Page 77: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/77.jpg)
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
“
![Page 78: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/78.jpg)
1 cloud service API
23
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
![Page 79: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/79.jpg)
But (if you’re lucky) the user sees (something like) this…
![Page 80: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/80.jpg)
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…
![Page 81: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/81.jpg)
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
![Page 82: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/82.jpg)
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.
![Page 83: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/83.jpg)
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.
![Page 84: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/84.jpg)
*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.
![Page 85: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/85.jpg)
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?
![Page 86: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/86.jpg)
Tuning the range to minimise or avoid overlap can reduce friction, minimise errors, and increase trust in the overall service.
![Page 87: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/87.jpg)
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?
![Page 88: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/88.jpg)
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 toobjects you interact with…
![Page 89: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/89.jpg)
ii. Provide clear (and ideally) real-time feedback Strong feedback improves learnability, promotes trust and helps users feel in-control.
![Page 90: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/90.jpg)
![Page 91: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/91.jpg)
iii. Use consistent signposting Content in the physical environment should—where possible—match that used on the web interface.
![Page 92: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/92.jpg)
Space #2304
Meter #2304
Meter #2304Main St, 10 m from Fir St.
$2.50FOR 1 HOUR
PARK HERE
ends at 13:47pm
![Page 93: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/93.jpg)
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.”
![Page 94: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/94.jpg)
iv. Provide just enough content Consider how much content you really need.
![Page 95: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/95.jpg)
there’s nothing wrong with simply mirroringa beacon architecture to its physical
https://www.flickr.com/photos/morebyless/14246207164
url/grandGallery
url/artDesign
url/artDesign
url/artDesign
url/naturalWorldurl/naturalWorld
url/naturalWorld
and virtual equivalent
![Page 96: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/96.jpg)
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
SODERHAMNFind it in store105.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.
![Page 97: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/97.jpg)
Does my interaction with this flower pot require much more than a disembodied record-set?
[yes] [no] [maybe]
Source: Estimote Nearables
![Page 98: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/98.jpg)
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
![Page 99: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/99.jpg)
…it’s not clear we’ll evenneed 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 AvailableTipping available until 12:09
$0.50 $1.50 $2.00
11:20 AM
![Page 100: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/100.jpg)
v. Anticipate novel uses Anticipate URL re-use in novel contexts and, where needed provide clear guidance to avoid unexpected errors.
![Page 101: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/101.jpg)
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?
![Page 102: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/102.jpg)
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 imagineremote 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]
![Page 103: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/103.jpg)
Is the physical touchpoint merely an entry point to future (virtual) interaction?
![Page 104: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/104.jpg)
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
![Page 105: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/105.jpg)
3. Group exercise
![Page 106: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/106.jpg)
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)
![Page 107: Exploring the physical web](https://reader033.fdocuments.in/reader033/viewer/2022061306/587e19b71a28abbc2e8b5db5/html5/thumbnails/107.jpg)
http://www.flickr.com/photos/tinou/453593446
thank you
many thanks to the amazing photographers on
http://creativecommons.org/licenses/by/2.5
@yiibu
[email protected] us at
Presentation deck available @ http://www.slideshare.net/yiibu