Dynamic concept maps as knowledge representation tools for ...
The Glass Class Lecture 4: Concept Design Tools
-
Upload
mark-billinghurst -
Category
Technology
-
view
109 -
download
1
description
Transcript of The Glass Class Lecture 4: Concept Design Tools
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