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

The Glass Class Lecture 4: Concept Design Tools

on

  • 603 views

The

The

Statistics

Views

Total Views
603
Views on SlideShare
603
Embed Views
0

Actions

Likes
3
Downloads
47
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The Glass Class Lecture 4: Concept Design Tools The Glass Class Lecture 4: Concept Design Tools Presentation Transcript

  • 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