The Glass Class Lecture 4: Concept Design Tools
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
836
On Slideshare
835
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
62
Comments
0
Likes
3

Embeds 1

http://www.slideee.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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