The Glass Class
Lecture 4 – Concept Design Tools
Feb 17th – 21st 2014
Mark Billinghurst, Gun Lee
HIT Lab NZ
University of ...
THE GLASS CLASS
Interaction Design Process
THE GLASS CLASS
Rapid Prototyping Approach
  Quick design
  Capture key interactions
  Focus on user interface and expe...
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...
THE GLASS CLASS
AUGMENTED REALITY
Want to develop AR tour guide
 Runs on smart phones
 Overlay virtual information on re...
THE GLASS CLASS
STORYBOARD
THE GLASS CLASS
SKETCHES – PHOTOSHOP
Pros:	
  
• 	
  Good	
  for	
  idea	
  genera,on	
  
• 	
  Cheap	
  
• 	
  Concepts	
...
THE GLASS CLASS
POST IT PROTOTYPING
First	
  Dra<	
  
Camera	
  View	
  with	
  3D	
  
Second	
  Dra<	
   Third	
  Dra<	
 ...
THE GLASS CLASS
POWERPOINT PROTOTYPING
Benefits	
  	
  
• 	
  Used	
  for	
  User	
  Tes,ng	
  
• 	
  Quick,	
  Interac,ve	...
THE GLASS CLASS
WIKITUDE
 Popular AR browser
 Mapping
 Point of Interest abilities
 Multiplatform
 Shows the points o...
THE GLASS CLASS
Benefits of RAPID Prototyping
  Fast and inexpensive
  Identifies problems before they re coded
  Elici...
Concept Design Tools
THE GLASS CLASS
Design Tools
  Static
  Sketching
  User interface templates
  Storyboards/Application flows
  Intera...
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...
THE GLASS CLASS
GlassSim Samples
THE GLASS CLASS
Glass UI Templates
  Google Glass Photoshop Templates
  http://glass-ui.com/
  http://dsky9.com/glassfa...
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/
...
THE GLASS CLASS
UXpin
THE GLASS CLASS
Proto.io - http://www.proto.io/
  Web based mobile prototyping tool
  Features
  Prototype for multiple...
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
...
THE GLASS CLASS
App Inventor
  http://appinventor.mit.edu/
  Visual Programming for Android Apps
  Features
  Access t...
THE GLASS CLASS
Device Setup
  Emulator
  Use aiStarter on Windows/Linux
  Live view (run on connected device)
  Make ...
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
...
Upcoming SlideShare
Loading in...5
×

The Glass Class Lecture 4: Concept Design Tools

948

Published on

The

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
948
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
77
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "The Glass Class Lecture 4: Concept Design Tools"

  1. 1. The Glass Class Lecture 4 – Concept Design Tools Feb 17th – 21st 2014 Mark Billinghurst, Gun Lee HIT Lab NZ University of Canterbury
  2. 2. THE GLASS CLASS Interaction Design Process
  3. 3. THE GLASS CLASS Rapid Prototyping Approach   Quick design   Capture key interactions   Focus on user interface and experience   No programming required
  4. 4. THE GLASS CLASS BUNRATTY FOLK PARK Sharon Brosnan 0651869 Bachelor of Science in Digital Media Design
  5. 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. 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. 7. THE GLASS CLASS STORYBOARD
  8. 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. 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. 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. 11. THE GLASS CLASS WIKITUDE  Popular AR browser  Mapping  Point of Interest abilities  Multiplatform  Shows the points of interest of Bunratty Folk Park
  12. 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. 13. Concept Design Tools
  14. 14. THE GLASS CLASS Design Tools   Static   Sketching   User interface templates   Storyboards/Application flows   Interactive   Wireframing tools   Mobile prototyping
  15. 15. THE GLASS CLASS GlassSim – http://glasssim.com/   Simulate the view through Google Glass   Multiple card templates
  16. 16. THE GLASS CLASS GlassSim Card Builder   Use HTML for card details   Multiple templates   Change background   Own image   Camera view
  17. 17. THE GLASS CLASS GlassSim Samples
  18. 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. 19. THE GLASS CLASS Sample Slides From Templates
  20. 20. THE GLASS CLASS Glass Application Storyboard   http://dsky9.com/glassfaq/google-glass-storyboard- template-download/
  21. 21. THE GLASS CLASS Glass Application Flow
  22. 22. THE GLASS CLASS Wireframing Tool   Add transitions, limited interactions   UXPin Wireframing Tool   http://uxpin.com/   Web based   Glass templates
  23. 23. THE GLASS CLASS UXpin
  24. 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. 25. THE GLASS CLASS Proto.io - Interface
  26. 26. THE GLASS CLASS Demo Building a Simple Flow
  27. 27. THE GLASS CLASS Gesture Flow Scr1 Scr2 Scr3 Scr4 Scr5 Scr6 Tap Swipe
  28. 28. THE GLASS CLASS Start Transitions
  29. 29. THE GLASS CLASS Demo
  30. 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. 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. 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. 33. THE GLASS CLASS App Inventor Designer View
  34. 34. THE GLASS CLASS App Inventor Blocks View
  35. 35. THE GLASS CLASS Orientation Demo   Use Glass orientation sensor
  36. 36. THE GLASS CLASS Resources   Main Developer Website   https://developers.google.com/glass/   Glass Apps Developer Site   http://glass-apps.org/glass-developer
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×