The Glass Class Lecture 4 – Concept Design Tools

Feb 17th – 21st 2014

Mark Billinghurst, Gun Lee HIT Lab NZ

University of Canterbury

THE GLASS CLASS

Interaction Design Process

THE GLASS CLASS

Rapid Prototyping Approach   Quick design   Capture key interactions   Focus on user interface and experience   No programming required

THE GLASS CLASS

BUNRATTY FOLK PARK Sharon Brosnan

0651869 Bachelor of Science in Digital Media Design

THE GLASS CLASS

EXAMPLE: BUNRATTY PARK  Irish visitor attraction run by Shannon Heritage  19th century life is recreated  Buildings from the mid-west have been relocated to Bunratty Castle  30 buildings are set in a rural or village setting there.

THE GLASS CLASS

AUGMENTED REALITY Want to develop AR tour guide  Runs on smart phones  Overlay virtual information on real objects  Provides navigation aid  Adds story/game elements

THE GLASS CLASS

STORYBOARD

THE GLASS CLASS

SKETCHES – PHOTOSHOP Pros:  •   Good  for  idea  genera,on  •   Cheap  •   Concepts  seem  feasible      Cons:  •   Not  great  feedback  gained  •   Photoshop  not  fast  enough  for  making  changes  

THE GLASS CLASS

POST IT PROTOTYPING

First  Dra<  

Camera  View  with  3D  

Second  Dra<   Third  Dra<  •   Selec,on  highlighted  in  blue   •   Home  bu@on  added  for  easy  

naviga,on  to  main  menu  

THE GLASS CLASS

POWERPOINT PROTOTYPING Benefits    •   Used  for  User  Tes,ng  •   Quick,  Interac,ve  •   Func,onali,es  work  with  storyboard  •   Easy  arrangement  of  slides    User  Tes7ng  •   Par,cipants  found  •   15  minute  sessions  screen  captured  •   ‘Talk  Allowed’  technique  used    •   Notes  taken,  Post-­‐Interview  

THE GLASS CLASS

WIKITUDE  Popular AR browser  Mapping  Point of Interest abilities  Multiplatform  Shows the points of interest of Bunratty Folk Park

THE GLASS CLASS

Benefits of RAPID Prototyping   Fast and inexpensive   Identifies problems before they’re coded   Elicits more and better feedback from users   Helps developers think creatively   Gets users involved early in the process   Fosters teamwork and communication   Avoids opinion wars   Helps decide design directions

Concept Design Tools

THE GLASS CLASS

Design Tools   Static

  Sketching  User interface templates   Storyboards/Application flows

  Interactive  Wireframing tools  Mobile prototyping

THE GLASS CLASS

GlassSim – http://glasssim.com/

  Simulate the view through Google Glass   Multiple card templates

THE GLASS CLASS

GlassSim Card Builder   Use HTML for card details   Multiple templates   Change background

 Own image  Camera view

THE GLASS CLASS

GlassSim Samples

THE GLASS CLASS

Glass UI Templates

  Google Glass Photoshop Templates   http://glass-ui.com/   http://dsky9.com/glassfaq/the-google-glass-psd-template/

THE GLASS CLASS

Sample Slides From Templates

THE GLASS CLASS

Glass Application Storyboard

  http://dsky9.com/glassfaq/google-glass-storyboard-template-download/

THE GLASS CLASS

Glass Application Flow

THE GLASS CLASS

Wireframing Tool   Add transitions, limited interactions   UXPin Wireframing Tool

  http://uxpin.com/  Web based  Glass templates

THE GLASS CLASS

UXpin

THE GLASS CLASS

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

THE GLASS CLASS

Proto.io - Interface

THE GLASS CLASS

Demo Building a Simple Flow

THE GLASS CLASS

Gesture Flow

Scr1

Scr2 Scr3

Scr4 Scr5 Scr6

Tap

Swipe

THE GLASS CLASS

Start Transitions

THE GLASS CLASS

Demo

THE GLASS CLASS

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

THE GLASS CLASS

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

THE GLASS CLASS

Device Setup   Emulator

 Use aiStarter on Windows/Linux

  Live view (run on connected device)  Make sure device is in Debug mode   Install companion app (sideload on Glass)

-  MITAI2Companion.apk

THE GLASS CLASS

App Inventor Designer View

THE GLASS CLASS

App Inventor Blocks View

THE GLASS CLASS

Orientation Demo

  Use Glass orientation sensor

THE GLASS CLASS

Resources   Main Developer Website

  https://developers.google.com/glass/

  Glass Apps Developer Site   http://glass-apps.org/glass-developer