Downloaded 117 times
Uploaded byMark Billinghurst
Mobile AR lecture 9 - Mobile AR Interface Design
The document provides guidelines for designing mobile augmented reality (AR) interfaces, focusing on user-centered design and good human-computer interaction (HCI) principles. It emphasizes the importance of adapting existing interface guidelines for mobile environments, considering factors like device constraints, user context, and micro-interactions. Additionally, it introduces design patterns and principles for effective AR experiences, highlighting the integration of physical and virtual elements.
More Related Content
Similar to Mobile AR lecture 9 - Mobile AR Interface Design
Mobile AR lecture 9 - Mobile AR Interface Design
- 1. LECTURE 9: DESIGNING MOBILEAR INTERFACES Mark Billinghurst mark.billinghurst@unisa.edu.au Zi Siang See zisiang@reina.com.my November 29th-30th 2015 Mobile-Based Augmented Reality Development
- 2.
- 3. Handheld HCI • Consider youruser • Follow good HCI principles • Adapt HCI guidelines for handhelds • Design to device constraints • Micro-Interactions • Design Patterns
- 4. ConsiderYour User • Considercontext 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
- 5. Follow Good HCIPrinciples • Provide good conceptual model/Metaphor • customers want to understand how UI works • Make things visible • if object has function, interface should show it • Map interface controls to customer s model • infix -vs- postfix calculator -- whose model? • Provide feedback • what you see is what you get!
- 6. 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
- 7. iPhone Guidelines • Make itobvious 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
- 8.
- 9. Applying Principles toMobileAR • Clean • LargeVideoView • Large Icons • Text Overlay • Feedback
- 10. AR vs.NonAR 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
- 11. Maps vs.Junaio • Google Maps • 2D, mouse driven, text/image heavy, exocentric • Junaio • 3D, location driven, simple graphics, egocentric
- 12. Design to DeviceConstraints • Understand the platforms used 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 Art of Defense Game
- 13. HandheldAR Constraints/Affordances • Cameraand screen are linked • Fast motions a problem when looking at screen • Intuitive “navigation” • Phone in hand • Two handed activities: awkward or intuitive • Extended periods of holding phone tiring • Awareness of surrounding environment • Small screen • Extended periods of looking at screen tiring • In general, small awkward platform • Vibration, sound • Can provide feedback when looking elsewhere • Networking - Bluetooth, 802.11 • Collaboration possible • Guaranteed minimum collection of buttons • Sensors often available • GPS, camera, accelerometer, compass, etc
- 14. Micro-Interactions ▪ On mobiles peoplesplit attention between display and real world
- 15. Time Looking atScreen Oulasvirta, A. (2005). The fragmentation of attention in mobile interaction, and what to do with it. interactions, 12(6), 16-18.
- 16. Dividing Attention toWorld • Number of times looking away from mobile screen
- 17. Design for MicroInteractions ▪ Designinteraction less than a few seconds • Tiny bursts of interaction • One task per interaction • One input per interaction ▪ Benefits • Use limited input • Minimize interruptions • Reduce attention fragmentation
- 18. Design Patterns “Each patterndescribes 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. C.A. Alexander, A Pattern Language, Oxford Univ. Press, New York, 1977.
- 19. Handheld AR DesignPatterns 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 Hidden information The information that can be hidden and revealed can foster emergent social play Social A&S Body A&S
- 20. Example:Seamless Design • Design toreduce seams in the user experience • Eg:AR tracking failure, change in interaction mode • Paparazzi Game • Change between AR tracking to accelerometer input Yan Xu , et.al. , Pre-patterns for designing embodied interactions in handheld augmented reality games, Proceedings of the 2011 IEEE International Symposium on Mixed and Augmented Reality--Arts, Media, and Humanities, p.19-28, October 26-29, 2011
- 21. Example:Living Creatures • Virtual creaturesshould 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
- 22.
- 23. AR Interaction • Designing ARSystem = Interface Design • Using different input and output technologies • Objective is a high quality of user experience • Ease of use and learning • Performance and satisfaction
- 24. • Interface Components • Physical components • Displayelements • Visual/audio • Interaction metaphors Physical Elements Display ElementsInteraction Metaphor Input Output AR Design Principles
- 25. Design of Objects • Objects • Purposelybuilt – affordances • “Found” – repurposed • Existing – already at use in marketplace • Make affordances obvious (Norman) • Object affordances visible • Give feedback • Provide constraints • Use natural mapping • Use good cognitive model
- 26. Affordances:to give aclue • Refers to an attribute of an object that allows people to know how to use it • e.g. a button invites pushing, a door handle affords pulling • Norman (1988) used the term to discuss the design of everyday objects • Since has been much popularised in interaction design to discuss how to design interface objects • e.g. scrollbars afford moving up and down, icons afford clicking
- 27. Physical Affordances • Physical affordances: Howdo the following physical objects afford? Are they obvious?
- 28. ‘Affordance’ and InterfaceDesign? • Interfaces are virtual and do not have affordances like physical objects • Norman argues it does not make sense to talk about interfaces in terms of ‘real’ affordances • Instead interfaces are better conceptualized as ‘perceived’ affordances • Learned conventions of arbitrary mappings between action and effect at the interface • Some mappings are better than others
- 29. VirtualAffordances • Virtual affordances How dothe following screen objects afford? What if you were a novice user? Would you know what to do with them?
- 30. • AR is mixtureof physical and virtual affordance • Physical • Tangible controllers and objects • Virtual • Virtual graphics and audio
- 31. Affordance Led Design • Makeaffordances perceivable • Provide visual, haptic, tactile, auditory cues • Affordance Led Usability • Give feedback • Provide constraints • Use natural mapping • Use good cognitive model
- 32. 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.
- 33. Input Devices • Forminforms function and use
- 34. Picking up anAtom
- 35. Case Study 1:ARLens • Physical Components • Lens handle • Virtual lens attached to real object • Display Elements • Lens view • Reveal layers in dataset • Interaction Metaphor • Physically holding lens
- 36. 3DAR Lenses:ModelViewer ! Displaysmodels made up of multiple parts ! Each part can be shown or hidden through the lens ! Allows the user to peer inside the model ! Maintains focus + context
- 37. Case Study 2:LevelHead • Block based game
- 38. Case Study 2:LevelHead • PhysicalComponents • Real blocks • Display Elements • Virtual person and rooms • Interaction Metaphor • Blocks are rooms
- 40. Handheld Interface Metaphors • Tangible AR LensViewing • Look through screen into AR scene • Interact with screen to interact with AR content • Eg Invisible Train • Tangible AR Lens Manipulation • Select AR object and attach to device • Use the motion of the device as input • Eg AR Lego
- 42. Space vs. Time- Multiplexed • 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
- 43. Tangible AR: Tiles(Space Multiplexed) • Tiles semantics • data tiles • operation tiles • Operation on tiles • proximity • spatial arrangements • space-multiplexed
- 44.
- 45. Tangible AR: Time-multiplexedInteraction • 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
- 46.
- 47. TangibleAR Design Principles • TangibleAR 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
- 48.
- 49. AR and Perception " Creatingthe illusion that virtual images are seamlessly part of the real world • Must match real and virtual cues • Depth, occlusion, lighting, shadows..
- 50. AR as PerceptionProblem • Goal of AR to fool human senses – create illusion that real and virtual are merged • Depth • Size • Occlusion • Shadows • Relative motion • Etc..
- 51. Depth Cues " Pictorial: visualcues • Occlusion, texture, relative brightness " Kinetic: motion cues • Relative motion parallax, motion perspective " Physiological: motion cues • Convergence, accommodation " Binocular disparity: two different eye images
- 53. Use the FollowingDepth 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
- 54. Provide Perspective Cue • Eg ground plane grid
- 56.
- 57. Information Presentation " 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
- 59. Twitter 360 • www.twitter-360.com • iPhone application • Seegeo-located tweets in real world • Twitter.com supports geo tagging
- 60.
- 61.
- 62.
- 63.
- 64. Possible solutions • Overview +Detail • spatial separation; two views • Focus + Context • merges both views into one view • Zooming • temporal separation
- 65. • TU Graz –HIT Lab NZ - collaboration • Zooming panorama • Zooming Map ZoomingViews
- 66.