2013 lecture 6: ar user interface design guidelines
DESCRIPTION
COSC 426 Lecture 6: on AR User Interface Design Guidelines. Lecture taught by Mark Billinghurst from the HIT Lab NZ at the University of Canterbury on August 16th 2013TRANSCRIPT
COSC 426: Augmented Reality
Mark Billinghurst
August 16th 2013
Lecture 6: AR User Interface Guidelines
AR Authoring Tools Low Level Software Libraries
osgART, Studierstube, MXRToolKit Plug-ins to existing software
DART (Macromedia Director), mARx, Unity, Stand Alone
AMIRE, BuildAR, Metaio Creator etc Rapid Prototyping Tools
Flash, OpenFrameworks, Processing, Arduino, etc Next Generation
iaTAR (Tangible AR)
BuildAR
http://www.buildar.co.nz/ Stand alone application Visual interface for AR model viewing application Enables non-programmers to build AR scenes
Scene Graph Example
osgART Approach: AR Scene Graph
Video Geode
Root
Transform
3D Object
Virtual Camera
Projection matrix from tracker calibration
Transformation matrix updated from marker tracking in realtime Video
Layer Full-screen quad with live texture updated from Video source
Orthographic projection
AR Interaction
Designing AR System = Interface Design Using different input and output technologies
Objective is a high quality of user experience Ease of use and learning Performance and satisfaction
AR Information Browsers Information is registered to
real-world context Hand held AR displays
Interaction Manipulation of a window
into information space Applications
Context-aware information displays
Rekimoto, et al. 1997
3D AR Interfaces
Virtual objects displayed in 3D physical space and manipulated HMDs and 6DOF head-tracking 6DOF hand trackers for input
Interaction Viewpoint control Traditional 3D user interface
interaction: manipulation, selection, etc.
Kiyokawa, et al. 2000
Augmented Surfaces
Rekimoto, et al. 1998 Front projection Marker-based tracking Multiple projection surfaces
Tangible AR: Time-multiplexed Interaction
Use of natural physical object manipulations to control virtual objects
VOMAR Demo Catalog book:
- Turn over the page
Paddle operation: - Push, shake, incline, hit, scoop
Space-multiplexed Many devices each with one function
- Quicker to use, more intuitive, clutter - Real Toolbox
Time-multiplexed One device with many functions
- Space efficient - mouse
Object Based Interaction: MagicCup Intuitive Virtual Object Manipulation
on a Table-Top Workspace
Time multiplexed Multiple Markers
- Robust Tracking
Tangible User Interface - Intuitive Manipulation
Stereo Display - Good Presence
Our system
Main table, Menu table, Cup interface
Wrap-up Browsing Interfaces
simple (conceptually!), unobtrusive
3D AR Interfaces expressive, creative, require attention
Tangible Interfaces Embedded into conventional environments
Tangible AR Combines TUI input + AR display
Designing AR Interfaces
The Interaction Design Process
How Would You Design This?
Put nice AR Picture here – and video
Or This?
experiences
applications
tools
components
Sony CSL © 2004
Building Compelling AR Experiences
Tracking, Display
Authoring
Interaction
AR Interaction Design
Designing AR System = Interface Design Using different input and output technologies
Objective is a high quality of user experience Ease of use and learning Performance and satisfaction
AR UI Design Consider your user Follow good HCI principles Adapt HCI guidelines for AR Design to device constraints Using Design Patterns to Inform Design Design for you interface metaphor Design for evaluation
Consider Your User Consider context of user
Physical, social, emotional, cognitive, etc
Mobile Phone AR User Probably Mobile One hand interaction Short application use Need to be able to multitask Use in outdoor or indoor environment Want to enhance interaction with real world
Good HCI Principles Affordance Reducing cognitive overload Low physical effort Learnability User satisfaction Flexibility in use Responsiveness and feedback Error tolerance
Norman’s Principles of Good Practice Ensure a high degree of visibility
- allow the user to work out the current state of the system and the range of actions possible.
Provide feedback - continuous, clear information about the results of actions.
Present a good conceptual model - allow the user to build up a picture of the way the system holds
together, the relationships between its different parts and how to move from one state to the next.
Offer good mappings - aim for clear, natural relationships between actions the user
performs and the results they achieve.
Adapting Existing Guidelines Mobile Phone AR
Phone HCI Guidelines Mobile HCI Guidelines
HMD Based AR 3D User Interface Guidelines VR Interface Guidelines
Desktop AR Desktop UI Guidelines
iPhone Guidelines
Make it obvious how to use your content. Avoid clutter, unused blank space, and busy
backgrounds. Minimize required user input. Express essential information succinctly. Provide a fingertip-sized target area for all links and
controls. Avoid unnecessary interactivity. Provide feedback when necessary
Applying Principles to Mobile AR Clean Large Video View Large Icons Text Overlay Feedback
AR vs. Non AR Design
Design Guidelines Design for 3D graphics + Interaction Consider elements of physical world Support implicit interaction
Characteristics Non-AR Interfaces AR Interfaces
Object Graphics Mainly 2D Mainly 3D
Object Types Mainly virtual objects Both virtual and physical objects
Object behaviors Mainly passive objects Both passive and active objects
Communication Mainly simple Mainly complex
HCI methods Mainly explicit Both explicit and implicit
Maps vs. Junaio
Google Maps 2D, mouse driven, text/image heavy, exocentric
Junaio 3D, location driven, simple graphics, egocentric
Design to Device Constraints Understand the platforms and design for limitations
Hardware, software platforms Eg Handheld AR game with visual tracking
Use large screen icons Consider screen reflectivity Support one-hand interaction Consider the natural viewing angle Do not tire users out physically Do not encourage fast actions Keep at least one tracking surface in view
31
Art of Defense Game
Design Patterns “Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem in such a way that you can use this solution a million times over, without ever doing it the same way twice.”
– Christopher Alexander et al.
Use Design Patterns to Address Reoccurring Problems
C.A. Alexander, A Pattern Language, Oxford Univ. Press, New York, 1977.
Handheld AR Design Patterns Title Meaning Embodied Skills Device Metaphors Using metaphor to suggest available
player actions Body A&S Naïve physics
Control Mapping Intuitive mapping between physical and digital objects
Body A&S Naïve physics
Seamful Design Making sense of and integrating the technological seams through game design
Body A&S
World Consistency
Whether the laws and rules in physical world hold in digital world
Naïve physics Environmental A&S
Landmarks Reinforcing the connection between digital-physical space through landmarks
Environmental A&S
Personal Presence The way that a player is represented in the game decides how much they feel like living in the digital game world
Environmental A&S Naïve physics
Living Creatures Game characters that are responsive to physical, social events that mimic behaviours of living beings
Social A&S Body A&S
Body constraints Movement of one’s body position constrains another player’s action
Body A&S Social A&S
Example: Seamless Design
Design to reduce seams in the user experience Eg: AR tracking failure, change in interaction mode
Paparazzi Game Change between AR tracking to accelerometer input
Example: Living Creatures
Virtual creatures should respond to real world events eg. Player motion, wind, light, etc Creates illusion creatures are alive in the real world
Sony EyePet Responds to player blowing on creature
35
Designing for Children Development Psychology Factors
• Motor Abilities • Spatial Abilities • Logic Abilities • Attention Abilities
Radu, Iulian, and Blair MacIntyre. "Using children's developmental psychology to guide augmented-reality design and usability." Mixed and Augmented Reality (ISMAR), 2012 IEEE International Symposium on. IEEE, 2012.
Motor Abilities Skill Type Challenging AR Interaction Multiple hand coordination Holding phone in one hand and
using another hand to move marker
Hand-eye coordination Using a marker to intercept a moving object
Fine motor skills Moving a marker on a specified path
Gross motor skills and endurance Turning body around to look at a panorama
Spatial Abilities Skill Type Challenging AR Interaction Spatial memory Remembering the configuration of a large
virtual space while handheld screen shows a limited view
Spatial Perception Understanding when a virtual item is on top of a physical item
Spatial Visualization Predict when virtual objects are visible by other people or virtual characters
Attention and Logic
Skill Type Challenging AR Interaction Divided attention Playing an AR game, and making sure to
keep marker in view so tracking is not lost
Selective and executive attention
Playing an AR game while moving outdoors
Skill Type Challenging AR Interaction Remembering and reversing Remembering how to recover from tracking
loss
Abstract over concrete thinking
Understanding that virtual objects are computer generated, and they do not need to obey physical laws
Attention Abilities
Logic and Memory
Design Considerations Combining Real and Virtual Images
• Perceptual issues Interactive in Real-Time
• Interaction issues Registered in 3D
• Technology issues
AR Perceptual Issues
AR and Perception Creating the illusion that virtual images are
seamlessly part of the real world • Must match real and virtual cues
• Depth, occlusion, lighting, shadows..
AR as Perception Problem Goal of AR to fool human senses – create
illusion that real and virtual are merged Depth
Size Occlusion Shadows Relative motion Etc..
Perceptual Issues
Combining multiple display modes • Direct View, Stereo Video View, Graphics View
Conflict between display modes • Mismatch between depth cues
Perceptual Issues Static and Dynamic registration mismatch Restricted Field of View Mismatch of Resolution and Image clarity Luminance mismatch Contrast mismatch Size and distance mismatch Limited depth resolution Vertical alignment mismatches Viewpoint dependency mismatch
Depth Cues Pictorial: visual cues
• Occlusion, texture, relative brightness Kinetic: motion cues
• Relative motion parallax, motion perspective Physiological: motion cues
• Convergence, accommodation Binocular disparity
• Two different eye images
Use the Following Depth Cues Movement parallax. Icon/Object size (for close objects) Linear perspective
To add side perspective bar.
Overlapping Works if the objects are big enough
Shades and shadows. Depends on the available computation
Provide Perspective Cue
Eg ground plane grid
Depth Perception
Information Presentation • Amount of information
• Clutter, complexity • Representation of information
• Navigation cues, POI representation • Placement of information
• Head, body, world stabilized • View combination
• Multiple views
Twitter 360
www.twitter-360.com iPhone application See geo-located tweets in real world Twitter.com supports geo tagging
Wikitude – www.mobilizy.com
Blah
Blah
Blah Blah Blah
Blah Blah
Blah
Blah Blah Blah
Blah Blah
Blah
Blah Blah
Blah
Blah Blah
Blah
Blah Blah
Information Filtering
Information Filtering
Outdoor AR: Limited FOV
Possible solutions Overview + Detail spatial separation; two views
Focus + Context merges both views into one view
Zooming temporal separation
TU Graz – HIT Lab NZ - collaboration Zooming panorama Zooming Map
Zooming Views
AR Interaction Issues
Interface Components Physical components Display elements
- Visual/audio Interaction metaphors
Physical Elements
Display Elements Interaction
Metaphor Input Output
AR Design Elements
Physical Elements
AR Design Space
Reality Virtual Reality
Augmented Reality
Physical Design Virtual Design
Design of Objects Objects
Purposely built – affordances “Found” – repurposed Existing – already at use in marketplace
Affordance The quality of an object allowing an action-
relationship with an actor An attribute of an object that allows people to
know how to use it - e.g. a door handle affords pulling
Norman on Affordances "...the term affordance refers to the perceived
and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. [...] Affordances provide strong clues to the operations of things. Plates are for pushing. Knobs are for turning. Slots are for inserting things into. Balls are for throwing .. " (Norman, The Psychology of Everyday Things 1988, p.9)
Physical vs. Virtual Affordances Physical affordances
- Physical and material aspects of real object Virtual affordance
- Visual and perceived aspects of digital objects
AR is mixture of physical and virtual affordances Physical
- Tangible controllers and objects Virtual
- Virtual graphics and audio
-
Affordance Framework
William W. Gaver. 1991. Technology affordances. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI '91), Scott P. Robertson, Gary M. Olson, and Judith S. Olson (Eds.). ACM, New York, NY, USA, 79-84.
Affordance Led Design Make affordances perceivable
Provide visual, haptic, tactile, auditory cues
Affordance Led Usability Give feedback Provide constraints Use natural mapping Use good cognitive model
Example: AR Chemistry
Tangible AR chemistry education (Fjeld) Fjeld, M., Juchli, P., and Voegtli, B. M. 2003. Chemistry education: A tangible interaction
approach. Proceedings of INTERACT 2003, September 1st -5th 2003, Zurich, Switzerland.
Input Devices
Form informs function and use
Picking up an Atom
AR Interaction Metaphors
Interface Components Physical components Display elements
- Visual/audio Interaction metaphors
Physical Elements
Display Elements Interaction
Metaphor Input Output
AR Design Elements
Interface Design Path
1/ Prototype Demonstration
2/ Adoption of Interaction Techniques from other interface metaphors
3/ Development of new interface metaphors appropriate to the medium
4/ Development of formal theoretical models for predicting and modeling user actions
Desktop WIMP
Virtual Reality
Augmented Reality
Interface metaphors Designed to be similar to a physical entity but also has own
properties e.g. desktop metaphor, search engine
Exploit user’s familiar knowledge, helping them to understand ‘the unfamiliar’
Conjures up the essence of the unfamiliar activity, enabling users to leverage of this to understand more aspects of the unfamiliar functionality
People find it easier to learn and talk about what they are doing at the computer interface in terms familiar to them
Example: The spreadsheet Analogous to ledger
sheet Interactive and
computational Easy to understand Greatly extending
what accountants and others could do
www.bricklin.com/history/refcards.htm
Why was it so good? It was simple, clear, and obvious to the users how to
use the application and what it could do “it is just a tool to allow others to work out their
ideas and reduce the tedium of repeating the same calculations.”
capitalized on user’s familiarity with ledger sheets Got the computer to perform a range of different
calculations in response to user input
The Star interface
Benefits of interface metaphors Makes learning new systems easier Helps users understand the underlying
conceptual model Can be innovative and enable the realm of
computers and their applications to be made more accessible to a greater diversity of users
Problems with interface metaphors (Nielson, 1990)
Break conventional and cultural rules e.g., recycle bin placed on desktop
Can constrain designers in the way they conceptualize a problem Conflict with design principles Forces users to only understand the system in terms of the
metaphor Designers can inadvertently use bad existing designs and transfer
the bad parts over Limits designers’ imagination with new conceptual models
Microsoft Bob
PSDoom – killing processes
Back to the Real World
AR overcomes limitation of TUIs enhance display possibilities merge task/display space provide public and private views
TUI + AR = Tangible AR Apply TUI methods to AR interface design
Tangible AR Design Principles Tangible AR Interfaces use TUI principles
Physical controllers for moving virtual content Support for spatial 3D interaction techniques Time and space multiplexed interaction Support for multi-handed interaction Match object affordances to task requirements Support parallel activity with multiple objects Allow collaboration between multiple users