The Glass Class Lecture 4: Concept Design Tools

  • 681 views
Uploaded on

The

The

More in: Technology , Business
  • 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
681
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
64
Comments
0
Likes
3

Embeds 0

No embeds

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