4: Prototyping Tools
How can we quickly
prototype Wearable
experiences with
little or no coding?
Why Prototype?
▪ 
▪ 
▪ 
▪ 
▪ 
Quick visual design
Capture key interactions
Focus on user experience
Communicate design ideas
“Learn by doing/experiencing”
Prototyping Tools
▪  Static/Low fidelity
▪  Sketching
▪  User interface templates
▪  Storyboards/Application flows
▪  Interactive/High fidelity
▪  Wireframing tools
▪  Mobile prototyping
▪  Native Coding
Important Note
▪  Most current wearables run Android OS
▪  eg Glass, Vuzix, Atheer, Epson, etc
▪  So many tools for prototyping on Android
mobile devices will work for wearables
▪  If you want to learn to code, learn
▪  Java, Android, Javascript/PHP
Typical Development Steps
▪  Sketching
▪  Storyboards
▪  UI Mockups
▪  Interaction Flows
▪  Video Prototypes
▪  Interactive Prototypes
▪  Final Native Application
Increased
Fidelity &
Interactivity
Sketched Interfaces
▪  Sketch + Powerpoint/Photoshop/Illustrator
GlassSim – http://glasssim.com/
▪  Simulate the view through Google Glass
▪  Multiple card templates
GlassSim Card Builder
▪  Use HTML for card details
▪  Multiple templates
▪  Change background
▪  Own image
▪  Camera view
GlassSim Samples
Glass UI Templates
▪  Google Glass Photoshop Templates
▪  http://glass-ui.com/
▪  http://dsky9.com/glassfaq/the-google-glass-psd-template/
Sample Slides From Templates
Application Storyboard
▪  http://dsky9.com/glassfaq/google-glassstoryboard-template-download/
ToolKit for Designers
▪  Vectoform Google Glass Toolkit for
Designers
▪  http://blog.vectorform.com/2013/09/16/google-glasstoolkit-for-designers-2/
▪  Sample cards, app flows, icons, etc
Application Flow
Limitations
▪  Positives
▪  Good for documenting screens
▪  Can show application flow
▪  Negatives
▪  No interactivity/transitions
▪  Can’t be used for testing
▪  Can’t deploy on wearable
▪  Can be time consuming to create
Transitions
Video Sketching
▪ Series of still photos in a movie format.
▪ Demonstrates the experience of the product
▪ Discover where concept needs fleshing out.
▪ Communicate experience and interface
▪ You can use whatever tools, from Flash to
iMovie.
Example: Video Sketch of Vine
UI
See https://vine.co/v/bgIaLHIpFTB
UI Concept Movies
Interactive Wireframes
Interactive Wireframing
▪  Developing interactive interfaces/wireframes
▪  Transitions, user feedback, interface design
▪  Web based tools
▪  UXpin - http://www.uxpin.com/
▪  proto.io - http://www.proto.io/
▪  Native tools
▪  Justinmind - http://www.justinmind.com/
▪  Axure - http://www.axure.com/
UXpin - www.uxpin.com
▪  Web based wireframing tool
▪  Mobile/Desktop applications
▪  Glass templates, run in browser
https://www.youtube.com/watch?v=0XtS5YP8HcM
Proto.io - http://www.proto.io/
▪  Web based mobile prototyping tool
▪  Features
▪ 
▪ 
▪ 
▪ 
Prototype for multiple devices
Gesture input, touch events, animations
Share with collaborators
Test on device
Proto.io - Interface
Demo: Building a Simple Flow
Gesture Flow
Ta
p
Swipe
Scr1
Scr2
Scr3
Scr4
Scr5
Scr6
Start Transitions
Demo
Justinmind - http://
www.justinmind.com/
▪  Native wireframing tool
▪  Build mobile apps without programming
▪ 
▪ 
▪ 
▪ 
drag and drop, interface templates
web based simulation
test on mobile devices
collaborative project sharing
▪  Templates for Glass, custom templates
User Interface - Glass
Templates
Web Simulation Tool
Comparing Wireframe Tools
Tool
Web
Uxpin
X
Proto.io
X
Native
Wearable
Template
Interaction
X
X
Justinmind
X
X
X
Axure
X
X
X
Wireframe Limitations
▪  Can’t deploy on Glass
▪  No access to sensor data
▪  Camera, orientation sensor
▪  No multimedia playback
▪  Audio, video
▪  Simple transitions
▪  No conditional logic
▪  No networking
Processing for Wearables
Processing
▪  Programming tool for Artists/Designers
▪  http://processing.org
▪  Easy to code, Free, Open source, Java based
▪  2D, 3D, audio/video support
▪  Processing For Android
▪  http://wiki.processing.org/w/Android
▪  Strong Android support
▪  Generates Android .apk file
Processing - Motivation
▪  Language of Interaction
▪  Sketching with code
▪  Support for rich interaction
▪  Large developer community
▪  Active help forums
▪  Dozens of plug-in libraries
▪  Strong Android support
▪  Easy to run on wearables
http://processing.org/
http://openprocessing.org/
Development Enviroment
Basic Parts of a Processing
Sketch
/* Notes comment */
//set up global variables
float moveX = 50;
//Initialize the Sketch
void setup (){
}
//draw every frame
void draw(){
}
Importing Libraries
▪  Can add functionality by Importing
Libraries
▪  java archives - .jar files
▪  Include import code
import processing.opengl.*;
▪  Popular Libraries
▪ 
▪ 
▪ 
▪ 
Minim - audio library
OCD - 3D camera views
Physics - physics engine
bluetoothDesktop - bluetooth networking
http://toxiclibs.org/
Processing and Glass
▪  One of the easiest ways to build rich
interactive wearable applications
▪  focus on interactivity, not coding
▪  Collects all sensor input
▪  camera, accelerometer, touch
▪  Can build native Android .apk files
▪  Side load onto Glass
Example: Hello World
//called initially at the start of the Processing sketch
void setup() {
size(640, 360);
background(0);
}
//called every frame to draw output
void draw() {
background(0);
//draw a white text string showing Hello World
fill(255);
text("Hello World", 50, 50);
}
Demo
Hello World Image
PImage img;
// Create an image variable
void setup() {
size(640, 360);
//load the ok glass home screen image
img = loadImage("okGlass.jpg"); // Load the image into
the program
}
void draw() {
// Displays the image at its actual size at point (0,0)
image(img, 0, 0);
}
Demo
Touch Pad Input
▪  Tap recognized as DPAD input
void keyPressed() {
if (key == CODED){
if (keyCode == DPAD) {
// Do something ..
▪  Java code to capture rich motion events
▪  import android.view.MotionEvent;
Motion Event
//Glass Touch Events - reads from touch pad
public boolean dispatchGenericMotionEvent(MotionEvent event) {
float x = event.getX(); // get x/y coords
float y = event.getY();
int action = event.getActionMasked(); // get code for action
switch (action) { // let us know which action code shows up
case MotionEvent.ACTION_DOWN:
touchEvent = "DOWN";
fingerTouch = 1;
break;
case MotionEvent.ACTION_MOVE:
touchEvent = "MOVE";
xpos = myScreenWidth-x*touchPadScaleX;
ypos = y*touchPadScaleY;
break;
Demo
Sensors
▪  Ketai Library for Processing
▪  https://code.google.com/p/ketai/
▪  Support all phone sensors
▪  GPS, Compass, Light, Camera, etc
▪  Include Ketai Library
▪  import ketai.sensors.*;
▪  KetaiSensor sensor;
Using Sensors
▪  Setup in Setup( ) function
▪  sensor = new KetaiSensor(this);
▪  sensor.start();
▪  sensor.list();
▪  Event based sensor reading
void onAccelerometerEvent(…)
{
accelerometer.set(x, y, z);
}
Sensor Demo
Using the Camera
▪  Import camera library
▪  import ketai.camera.*;
▪  KetaiCamera cam;
▪  Setup in Setup( ) function
▪  cam = new KetaiCamera(this, 640, 480, 15);
▪  Draw camera image
void draw() {
//draw the camera image
image(cam, width/2, height/2);
}
Camera Demo
Timeline Demo
▪  Create Card Class
▪  load image, card number, children/parent
cards
▪  Timeline Demo
▪ 
▪ 
▪ 
▪ 
Load cards in order
Translate cards with finger motion
Swipe cards in both directions
Snap cards into position
Native Coding
Overview
▪  For best performance need native coding
▪  Low level algorithms etc
▪  Most current wearables based on Android
OS
▪  Need Java/Android skills
▪  Many devices have custom API/SDK
▪  Vusix M-100: Vusix SDK
▪  Glass: Mirror API, Glass Developer Kit (GDK)
Mirror API + Glass GDK
Glassware and Timeline
Glassware and Timeline
▪  Static Cards
▪  Static content with text, HTML, images, and video.
-  e.g. notification messages, news clip
▪  Live Cards
▪  Dynamic content updated frequently.
-  e.g. compass, timer
▪  Immersions
▪  Takes over the whole control, out from timeline.
-  e.g. interactive game
Glassware Development
▪  Mirror API
▪  Server programming, online/web application
▪  Static cards / timeline management
▪  GDK
▪  Android programming, Java (+ C/C++)
▪  Live cards & Immersions
▪  See: https://developers.google.com/glass/
Mirror API
▪  REST API
▪  Java servlet, PHP, Go,
Python, Ruby, .NET
▪  Timeline based apps
▪  Static cards
-  Text, HTML, media attachment (image & video)
-  Standard and custom menu items
▪  Manage timeline
-  Subscribe to timeline notifications
-  Sharing with contacts
-  Location based services
GDK
▪  Glass Development Kit
▪  Android 4.0.3 ICS + Glass specific APIs
▪  Use standard Android Development Tools
GDK
▪  GDK add-on features
▪ 
▪ 
▪ 
▪ 
Timeline and cards
Menu and UI
Touch pad and gesture
Media (sound, camera and voice input)
Glass Summary
▪  Use Mirror API if you need ...
▪  Use GDK if you need ...
▪  Or use both
Hardware Prototyping
Fake Display
3D print Thingiverse model
see http://www.thingiverse.com/thing:65706
Have the social impact of Google Glass without the cost
Build Your Own Wearable
▪  MyVu display + phone + sensors
Beady-i
▪  http://www.instructables.com/id/DIYGoogle-Glasses-AKA-the-Beady-i/
Rasberry Pi Glasses
▪  Modify video glasses, connect to Rasberry Pi
▪  $200 - $300 in parts, simple assembly
▪ 
https://learn.adafruit.com/diy-wearable-pi-near-eye-kopin-videoglasses
Physical Input Devices
▪  Can we develop unobtrusive input
devices ?
▪  Reduce need for speech, touch pad input
▪  Socially more acceptable
▪  Examples
▪ 
▪ 
▪ 
▪ 
Ring,
pendant,
bracelet,
gloves, etc
Prototyping Platform
Arduino Kit
Bluetooth Shield
Google Glass
Example: Glove Input
▪  Buttons on fingertips
▪  Map touches to commands
Example: Ring Input
▪  Touch strip, button, accelerometer
▪  Tap, swipe, flick actions
How it works
Bracelet
1,2,
3,4
Armband
Gloves
Values/
output
Summary
▪  Prototyping for wearables is similar to mobiles
▪  Tools for UI design, storyboarding, wireframing
▪  Android tools to create interactive prototypes
▪  App Inventor, Processing, etc
▪  Arduino can be used for hardware prototypes
▪  Once prototyped Native Apps can be built
▪  Android + SDK for each platform
Other Tools
▪  Wireframing
▪  pidoco
▪  FluidUI
▪  Rapid Development
▪  Phone Gap
▪  AppMachine
▪  Interactive
▪  App Inventor
▪  WearScript
App Inventor - http://appinventor.mit.edu/
▪  Visual Programming for Android Apps
▪  Features
▪  Access to Android Sensors
▪  Multimedia output
▪  Drag and drop web based interface
▪  Designer view – app layout
▪  Blocks view – program logic/control
App Inventor Designer View
App Inventor Blocks View
Orientation Demo
▪  Use wearable orientation sensor
WearScript
▪  JavaScript development for Glass
▪  http://www.wearscript.com/en/
▪  Script directory
▪  http://weariverse.com/