Developing for

Wearable Devices

Erica Stanley

@ericastanley

@connect_js

#WearableDev

1 

in 6 use

wearables

daily

@ericastanley

#WearableDev

@ericastanley

#WearableDev

Vision

@ericastanley

#WearableDev

Cameras

@ericastanley

#WearableDev

Smartwatches

@ericastanley

#WearableDev

Wristbands

@ericastanley

#WearableDev

Head Gear

@ericastanley

#WearableDev

Industries/ Solutions

  • Health/ Fitness
  • Home/ Environment Enhancement
    • Automation
    • Navigation
  • Identity

@ericastanley

#WearableDev

Behind the Scenes: The Technology

 

  • Foundations
    • Networking
    • Sensors
    • Cloud Computing
    • Big Data
    • Machine Learning/ Artificial Intelligence
    • Computer Vision
    • Augmented Reality
  • The Physical Graph
  • Technical Challenges
  • Tools

@ericastanley

#WearableDev

Wearables and IoT

@ericastanley

#WearableDev

Networking for IoT

@ericastanley

#WearableDev

Networking for Wearables

@ericastanley

#WearableDev

Source: Moe Tanabian, Solid 2014, Bringing Life to Wearables

Bluetooth Low Enery (Smart)

@ericastanley

#WearableDev

Central vs Peripheral

@ericastanley

#WearableDev

Workflow of a BLE app - Central

@ericastanley

#WearableDev

Source: Vincent Gao, Wearables DevCon 2014, Wearables & Bluetooth

 

 The Technology

 

  • Foundations
    • Networking
    • Sensors
    • Cloud Computing
    • Big Data
    • Machine Learning/ Artificial Intelligence
    • Computer Vision
    • Augmented Reality
  • The Physical Graph
  • Technical Challenges
  • Tools

@ericastanley

#WearableDev

@ericastanley

#WearableDev

Sensor Basics

@ericastanley

#WearableDev

Source: Moe Tanabian, Solid 2014, Bringing Life to Wearables

Common Sensors for Wearables

  • Accelerometer
  • Gyroscope
  • Magnetometer
  • Pressure and Altitude Sensor
  • *Sensor Fusion Chip

@ericastanley

#WearableDev

Source: Moe Tanabian, Solid 2014, Bringing Life to Wearables

 

 The Technology

 

  • Foundations
    • Networking
    • Sensors
    • Cloud Computing
    • Big Data
    • Machine Learning/ Artificial Intelligence
    • Computer Vision
    • Augmented Reality
  • The Physical Graph
  • Technical Challenges
  • Tools

@ericastanley

#WearableDev

 

 The Technology

 

  • Foundations
    • Networking
    • Sensors
    • Cloud Computing
    • Big Data
    • Machine Learning/ Artificial Intelligence
    • Computer Vision
    • Augmented Reality
  • The Physical Graph
  • Technical Challenges
  • Tools

@ericastanley

#WearableDev

 

 The Technology

 

  • Foundations
    • Networking
    • Sensors
    • Cloud Computing
    • Big Data
    • Machine Learning/ Artificial Intelligence
    • Computer Vision
    • Augmented Reality
  • The Physical Graph
  • Technical Challenges
  • Tools

@ericastanley

#WearableDev

 

 The Technology

 

  • Foundations
    • Networking
    • Sensors
    • Cloud Computing
    • Big Data
    • Machine Learning/ Artificial Intelligence
    • Computer Vision
    • Augmented Reality
  • The Physical Graph
  • Technical Challenges
  • Tools

@ericastanley

#WearableDev

 

 The Technology

 

  • Foundations
    • Networking
    • Sensors
    • Cloud Computing
    • Big Data
    • Machine Learning/ Artificial Intelligence
    • Computer Vision
    • Augmented Reality
  • The Physical Graph
  • Technical Challenges
  • Tools

@ericastanley

#WearableDev

 

 The Technology

 

  • Foundations
    • Networking
    • Sensors
    • Cloud Computing
    • Big Data
    • Machine Learning/ Artificial Intelligence
    • Computer Vision
    • Augmented Reality
  • The Physical Graph
  • Technical Challenges
  • Tools

@ericastanley

#WearableDev

The Physical Graph

A Wearable Application is a User-Directed Graph

@ericastanley

#WearableDev

The Physical Graph

Today, Connected Devices deployed in Silos

@ericastanley

#WearableDev

The Physical Graph

Towards a Platform for Connected Devices

@ericastanley

#WearableDev

The Physical Graph

User Control of Identity, Resources and Experience

@ericastanley

#WearableDev

 

 The Technology

 

  • Foundations
    • Networking
    • Sensors
    • Cloud Computing
    • Big Data
    • Machine Learning/ Artificial Intelligence
    • Computer Vision
    • Augmented Reality
  • The Physical Graph
  • Technical Challenges
  • Tools

@ericastanley

#WearableDev

Technical Challenges

  • Connectivity & Processing vs Power Consumption
  • Fragmentation
  • Privacy and Security

@ericastanley

#WearableDev

Technology Challenges

  • Understand your vulnerabilities
  • Build security from the ground up
  • Start with the OS
  • Build an End-to-End Security Solution

Security Guidelines

@ericastanley

#WearableDev

 

 The Technology

 

  • Foundations
    • Networking
    • Sensors
    • Cloud Computing
    • Big Data
    • Machine Learning/ Artificial Intelligence
    • Computer Vision
    • Augmented Reality
  • The Physical Graph
  • Technical Challenges
  • Tools

@ericastanley

#WearableDev

Tools

  • Arduino Compatible
    • LilyPad
    • Adafruit Flora and Gemma
    • Intel Edison
  • Tessel
    • Hardware + Software Platform
    • Node Compatible
  • Metawear
    • Kickstarter Grad
    • Open Source hardware + software

Hardware

@ericastanley

#WearableDev

Tools

  • Vendor SDKs and APIs
    • Android-based
      • Google Glass
        • GDK, Mirror API
      • Android Wear
      • Sony Smartwatch
    • Pebble
    • iOS
  • Tizen SDK (open source, used in Samsung Gear S)

Software

  • Spark Core
  • IoT Toolkit
  • Open.Sen.se
  • Hybrid Group
    • Cylon.js
    • Artoo
    • Gobot
  • Computer Vision
    • Open CV
    • SimpleCV

@ericastanley

#WearableDev

Tools

  • Proto.io for Android Wear

Software (UX/ Design)

@ericastanley

#WearableDev

Prototyping for Wearables

  • Mix of Design and Technology
  • Rapid Iterations/ Fail Fast.
  • Cross-skill talent and training

@ericastanley

#WearableDev

Designing for Wearables

  • No longer own the foreground
  • Integration with other platforms & devices
  • Discoverability of Functionality
  • Low Energy/ Computing Power

Challenges

@ericastanley

#WearableDev

Designing for Wearables

  • Form Factor
  • Natural Interfaces
  • Microinteractions

Philosopy

@ericastanley

#WearableDev

Designing for Wearables

  • Cost vs Benefits
  • Social Weight

Form Factor

@ericastanley

#WearableDev

Designing for Wearables

SW = CL + PP + SC

  • CL → cognitive load
  • PP → physical presence
  • SC → social convention

Social Weight

@ericastanley

#WearableDev

Designing for Wearables

Social Weight

@ericastanley

#WearableDev

CL:

PP:

SC:

CL:

PP:

SC:

CL:

PP:

SC:

CL: Cognitive Load      PP: Physical Presence      SC: Social Convention

Source: Moe Tanabian, Solid 2014, Bringing Life to Wearables

Designing for Wearables

Social Weight

@ericastanley

#WearableDev

CL:

PP:

SC:

CL: ?

PP:

SC:

CL:

PP:

SC:

CL: Cognitive Load      PP: Physical Presence      SC: Social Convention

Source: Moe Tanabian, Solid 2014, Bringing Life to Wearables

Designing for Wearables

  • Form Factor
  • Natural Interfaces
  • Microinteractions

Philosopy

@ericastanley

#WearableDev

Designing for Wearables

  • Inputs
    • Touch
    • Hand Gestures
    • Voice
    • Eye/ Head Movement
    • Thought?! (Um, did I mention the future is now?)

Natural Interfaces

@ericastanley

#WearableDev

Designing for Wearables

  • Outputs
    • Haptic
    • Visual
    • Audio

Natural Interfaces

@ericastanley

#WearableDev

Designing for Wearables

  • Form Factor
  • Natural Interfaces
  • Microinteractions

Philosopy

@ericastanley

#WearableDev

Designing for Wearables

Contained product moments that revolve around a single use case and have one main task.

Microinteractions

@ericastanley

#WearableDev

Designing for Wearables

  • No one size fits all
  • Don't get in the way
  • Keep it Timely
  • Avoid the unexpected

Guidelines

@ericastanley

#WearableDev

Designing for Wearables

  • Scale with User's Attention
  • Design with Data
  • Service Design
  • Design for Identity

Practices

@ericastanley

#WearableDev

Developing for Wearables

  • Little to No Standards
  • Interface Development Challenges
    • Screen Real Estate / No Display
    • Programmatic Interface Testing
  • Restricted memory and processing capabilities
  • Integration Testing
    • Sensors
    • Firmware
    • Devices

Challenges

@ericastanley

#WearableDev

Example: Pebble Geolocation 

Sending and Receiving Messages

@ericastanley

#WearableDev 

Pebble.sendAppMessage({"0": "Your first value", "1": "Your second value", "2": "Your third value"},
  function(e) {
    console.log("Successfully delivered message with transactionId=" + e.data);
  },
  function(e) {
    console.log("Unable to deliver message with transactionId=" + e.data + ". Error is: " + e.error.message);
  }
);

Example: Pebble Geolocation 

Geolocating

@ericastanley

#WearableDev 

var locationOptions = {timeout: 15000, maximumAge: 60000}; 
Pebble.addEventListener('ready', function(e) {
  locationWatcher = window.navigator.geolocation.watchPosition(
                                                    fetch_location_data, 
                                                    fetch_location_error, 
                                                    locationOptions);
});
function fetch_location_error() {
  Pebble.sendAppMessage({location: 'Unable to retrieve location'});
}

Example: Pebble Geolocation 

Making Requests

@ericastanley

#WearableDev 

var req = new XMLHttpRequest(),
    version = Date.now(),
    clientId = 'BNBFMG541RT1SJBWRZ1NPS1F1QQKK2B19SMS0EDAU3DR7ZZA',
    clientSecret = '4AFKSBKJHQAKJHFBNGERON0LYMSMG1AKJ2KJHBWKS8KJHSDKHE',
    latitude = pos.coords.latitude,
    longitude = pos.coords.longitude;
req.onload = function(e) {
  if (req.readyState == 4 && req.status == 200) {
    if (req.status == 200) {
      var response = JSON.parse(req.responseText);
      if (response && response.meta.code == '200' && response.response) {
var venue = response.response.venues[0];
Pebble.sendAppMessage({location: venue.location.address + ', ' + venue.location.city});

Developing for Wearables

  • Native Mobile Development is optional but a good start
  • Choose your hardware
  • DIY Tutorials
    • http://makezine.com/projects/
  • Hackathons
    • AT&T
    • Intel
  • Local User Groups
    • Atl Mobile Dev
    • Freeside Atlanta
    • Sensors and Startups

Next Steps

@ericastanley

#WearableDev

Sources

  • http://postscapes.com/internet-of-things-resources/
  • http://iot-datamodels.blogspot.com/2013/02/an-open-source-platform-for-internet-of.html
  • http://www.slideshare.net/alui0000/reorientating-ux-design-for-the-internet-of-things
  • http://solidcon.com/solid2014/
  • http://www.wearablestechcon.com/
  • http://www.cmo.com/articles/2014/6/16/Mind_Blowing_Stats_Wearable_Tech.html
  • http://www.sitepoint.com/pebble-watch-development-javascript/
  • http://www.deloittedigital.com/us/blog/the-truth-about-wearables-what-they-are-and-arent

@ericastanley

#WearableDev

Thank you!

Questions?

@ericastanley

#WearableDev

Made with Slides.com