Introduction to wearables and wearable app design

Introduction to

wearables and

wearable app design

Table of Content

• What are wearables ?

• Architecture of Wearables /Sensors

• Notable Examples

• Why Should we care ?

• What are the Applications ?

• Elements of User Interaction Design for

Wearables (smartwatches).

• Whats Next.

What are Wearables

Body worn computers .

• Highly ubiquitous• Are sensor rich• Increasingly complex

* “wearables” sometimes used interchangeably with “sensor devices”

• Wrist• On Shoes• Embedded in Clothes• In Jewelry• Earbuds/Headphones• Glasses• Arm Bands• Chest Bands• Contact Lenses• Tatoos

Architecture of Wearables

Architecture of Wearables

Processor (Arm Cortex A series, Exynos) + Power

Operating System (RTOS, Android, Tizen)

Communication(E.g BLE)

Hardware Sensors(e.g Heart Rate )

Extensible Hardware Platform

Extensible Software Platform (apps)

• Heartrate,• Accelerometer• Gyroscope, • UV• Light, • Pressure,• Magnetic Field• Proximity

• Accelerometer• Gyroscope, • Light• Magnetic Field• Proximity

• Accelerometer• Gyroscope, • Magnetic Field• Proximity

• Accelerometer• Gyroscope, • Proximity• EEG (Cardiac

rhythm).

• Accelerometer• Gyroscope,

• NO • NO • YES • NO • NO

• YES • YES • YES • YES • YES

Gear 2 Google Glass NODE+ Sensor Bionym Nymi FitBit

Sensors

Extensible Hardware ?

Extensible Software ?

Why do we Care ?

Why do we Care

Gartner 2014.

Why do we Care

• Next frontier of Consumer Electronics

• Billion Dollar Industry Potential

(estimated at $9.2 billion in 2014, IDTechEx)

• A new paradigm of programmable wearables

(more data to work with, more use cases)

• Its new, and exciting! As developers, there is

opportunity to create the use cases and

establish the wearable hype

What Are the Applications

• SecurityWearable payments, authentication

• Health / Wellness / FitnessApplications in addressing chronic diseases and aiding medical

consultations.

• Quantified Selfdata acquisition on aspects of a person's daily (e.g. food consumed, quality of surrounding air),

states (e.g. mood, arousal, blood oxygen levels), and performance (mental and physical).

• Education and LearningResearch. Opportunities to easily measure things previously unknown or

difficult.

• Others – entertainment, insurance, automation ..

Designing Interfaces for the

Smartwatch – Samsung Gear 2, Gear SWhy focus on design? Why Smartwatches ? Why Gear ?

Elements of UI for Wearables

Irrespective of your background – Android Java,

iOS Objective C, Web Apps (HTML, JavaScript,

Php) e.t.c , designing Apps for the smart watch

wearable form factor still props up challenges.

You will need to design for

- Social / Fashion norms

- Sensing capabilities

- Form and Function.

Social / Fashion Norms

• Smartwatches ARE a fashion accessory.

• Design watchfaces that are meaningful and

elegant

• Build social elements into your use case to

improve stickiness

• Build trust with known interaction models.

Progress from the Known to the Unknown ,

and update the user along the way.

• Design to empower the user – offer multiple

input options via settings.

Sensing Capabilities

Design to leverage sensors for input and

feedback.

- Accelerometer based gestures. X,y.x – axis

tilt

- Leverage vibration for personalized feedback

- Leverage more advanced touch gestures

Swipe, pan, pinch , double tap to expand

interaction model. But teach the user.

- Leverage voice input and TTS

Form and Function

• Be legible 35 px minimum font size.

• Single action per screen . Aim for two

buttons max per screen . Beware of small text and buttons in games.

• Let each app take care of a given need. Give as much depth as possible.

• The Gear is meant to be glanceable . Avoid

apps/use cases that require extended continuous use (E.g some games)

• Optimize for SpaceRemember to minify your files and remove unused scripts. Limited

device storage.

Work done ..

Foqus

A wearable app for Mental Health and

Wellness

Apps Built on these principles

Next Talk ?

• Installation of the Tizen Wearable IDE

• Developing a sample app interface using

JQuery and Hammer.js for expanded

touch interactions

• Developing a simple pedometer app to

track steps, calories and distance

walked.

• Expanding app to track motion, and

making inferences on human activity

Whats Next ?

• An App development Team

Lets make some apps together!

• An app testing Team

Lets build new knowledge in the area of

wearables

• Please take the next 2 minutes to fill in

the following form.

http://goo.gl/mFsAA2

Supplemental Learning Materials

• I have written a rich panoply of tutorials to

get you started developing apps for the

Gear 2 line of smartwatch devices.

• Access them at:

denvycom.com/blog/tag/gear-2/

Whats Next

Thanks for listeningdibia.victor@my.cityu.edu.hk