The

1. The Glass Class
Lecture 4 – Concept Design Tools
Feb 17th – 21st 2014
Mark Billinghurst, Gun Lee
HIT Lab NZ
University of Canterbury

2. THE GLASS CLASS
Interaction Design Process

3. THE GLASS CLASS
Rapid Prototyping Approach
 Quick design
 Capture key interactions
 Focus on user interface and experience
 No programming required

4. THE GLASS CLASS
BUNRATTY FOLK PARK
Sharon Brosnan
0651869
Bachelor of Science in Digital Media Design

5. 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.

6. 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

7. THE GLASS CLASS
STORYBOARD

8. 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

9. 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

10. 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

11. THE GLASS CLASS
WIKITUDE
 Popular AR browser
 Mapping
 Point of Interest abilities
 Multiplatform
 Shows the points of interest
of Bunratty Folk Park

12. 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

13. Concept Design Tools

14. THE GLASS CLASS
Design Tools
 Static
 Sketching
 User interface templates
 Storyboards/Application flows
 Interactive
 Wireframing tools
 Mobile prototyping

15. THE GLASS CLASS
GlassSim – http://glasssim.com/
 Simulate the view through Google Glass
 Multiple card templates

16. THE GLASS CLASS
GlassSim Card Builder
 Use HTML for card details
 Multiple templates
 Change background
 Own image
 Camera view

17. THE GLASS CLASS
GlassSim Samples

18. THE GLASS CLASS
Glass UI Templates
 Google Glass Photoshop Templates
 http://glass-ui.com/
 http://dsky9.com/glassfaq/the-google-glass-psd-template/

19. THE GLASS CLASS
Sample Slides From Templates

20. THE GLASS CLASS
Glass Application Storyboard
 http://dsky9.com/glassfaq/google-glass-storyboard-
template-download/

21. THE GLASS CLASS
Glass Application Flow

22. THE GLASS CLASS
Wireframing Tool
 Add transitions, limited interactions
 UXPin Wireframing Tool
 http://uxpin.com/
 Web based
 Glass templates

23. THE GLASS CLASS
UXpin

24. 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

25. THE GLASS CLASS
Proto.io - Interface

26. THE GLASS CLASS
Demo Building a Simple Flow

27. THE GLASS CLASS
Gesture Flow
Scr1
Scr2 Scr3
Scr4 Scr5 Scr6
Tap
Swipe

28. THE GLASS CLASS
Start Transitions

29. THE GLASS CLASS
Demo

30. 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

31. 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

32. 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

33. THE GLASS CLASS
App Inventor Designer View

34. THE GLASS CLASS
App Inventor Blocks View

35. THE GLASS CLASS
Orientation Demo
 Use Glass orientation sensor

36. THE GLASS CLASS
Resources
 Main Developer Website
 https://developers.google.com/glass/
 Glass Apps Developer Site
 http://glass-apps.org/glass-developer