Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Designing Usable Interface

1.353 visualizaciones

Publicado el

Lecture on how to design AR/VR interfaces, with a focus on designing usable interfaces. Taught by Mark Billinghurst on October 3rd 2018

Publicado en: Tecnología

Designing Usable Interface

  1. 1. DESIGNING USABLE VR INTERFACES Mark Billinghurst University of Auckland October 3rd 2018
  2. 2. How Can we Design Useful VR? • Designing VR experiences that meet real needs
  3. 3. Interaction Design Designing interactive products to support people in their everyday and working lives” Preece, J., (2002). Interaction Design • Interaction Design is the design of user experience with technology
  4. 4. • Interaction Design involves answering three questions: • What do you do? - How do you affect the world? • What do you feel? – What do you sense of the world? • What do you know? – What do you learn? Bill Verplank
  5. 5. The Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product Develop alternative prototypes/concepts and compare them And iterate, iterate, iterate....
  6. 6. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product Develop alternative prototypes/concepts and compare them And iterate, iterate, iterate....
  7. 7. NeedsAnalysis Goals 1. Create a deep understanding of the user and problem space 2. Understand howVR can help address the user needs
  8. 8. Methods for Identifying User Needs Learn from people Learn from analogous settings Learn from Experts Immersive yourself in context
  9. 9. Is VR the Best Solution? • Not every problem can be solved by VR.. • Problems Ideal for Virtual Reality, have: • visual elements • 3D spatial interaction • physical manipulation • procedural learning • Problems Not ideal for VR, have: • heavy reading, text editing • many non visual elements • need for connection with real world • need for tactile, haptic, olfaction feedback
  10. 10. Suitable for VR or not?
  11. 11. The Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product
  12. 12. Idea Generation • Once user need is found, solutions can be proposed • Idea generation through: • Brainstorming • Lateral thinking • Ideal storming • Formal problem solving • Etc..
  13. 13. VR Interface Design Sketches • Sketch out Design concept(s)
  14. 14. Why is Sketching Useful? • Early ideation • Think through ideas • Force you to visualize how things come together • Communicate ideas to inspire new designs • Ideal for active brainstorming • Beginning of prototyping process
  15. 15. VR Design Considerations • Use UI Best Practices • Adapt know UI guidelines to VR • Use of Interface Metaphors/Affordances • Decide best metaphor for VR applications • Design for Humans • Use Human Information Processing model • Design for Different User Groups • Different users may have unique needs • Design for the Whole User • Social, cultural, emotional, physical cognitive
  16. 16. VR Human Interface Guidelines • Interface design website - http://vrhig.com/ • Set of VR interface design best practices
  17. 17. More VR Design Guidelines • Use real-world cues when appropriate. • If there is a horizon line, keep it steady • Be careful about mixing 2D GUI and 3D • Avoid rapid movement, it makes people sick • Avoid rapid or abrupt transitions to the world space • Keep the density of information and objects on screen low • Do not require the user to move their head or body too much From https://www.wired.com/2015/04/how-to-design-for-virtual-reality/
  18. 18. Cardboard Design Lab • Mobile VR App providing examples of best practice VR designs and user interaction (iOS, Play app stores)
  19. 19. Demo: Cardboard Design Lab • https://www.youtube.com/watch?v=2Uf-ru2Ndvc
  20. 20. Use Interface Metaphors • Design interface object to be similar to familiar physical object that the user knows how to use • E.g. Desktop metaphor, spreadsheet, calculator • Benefits • Makes learning interface easier and more accessible • Users understand underlying conceptual model
  21. 21. Typical VR Interface Metaphors • Direct Manipulation • Reach out and directly grab objects • Ray Casting • Select objects through ray from head/hand • Vehicle Movement • Move through VR environment through vehicle movement
  22. 22. Simple Virtual Hand Manipulation https://www.youtube.com/watch?v=_OgfREa4ggw
  23. 23. How are These Used?
  24. 24. Affordances ”… 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.” (Norman, The Psychology of Everyday Things 1988, p.9)
  25. 25. Affordances in VR • Design interface objects to show how they are used • Use visual cues to show possible affordances • Perceived affordances should match actual affordances • Good cognitive model - map object behavior to expected Familiar objects in Job Simulator Object shape shows how to pick up
  26. 26. Examples of Affordances in VR Virtual buttons can be pushed Virtual doors can be walked through Virtual objects can be picked upFlying like a bird in Birdly
  27. 27. Human Information Processing • High level staged model from Wickens and Carswell (1997) • Relates perception, cognition, and physical ergonomics Perception Cognition Ergonomics
  28. 28. Design for Physical Ergonomics • Design for the human motion range • Consider human comfort and natural posture • Design for hand input • Coarse and fine scale motions, gripping and grasping • Avoid “Gorilla arm syndrome” from holding arm pose
  29. 29. Consider the Whole User Needs
  30. 30. Would you wear this HMD?
  31. 31. Whole User Needs • Social • Don’t make your user look stupid • Cultural • Follow local cultural norms • Physical • Can the user physically use the interface? • Cognitive • Can the user understand how the interface works? • Emotional • Make the user feel good and in control
  32. 32. How can we Interact in VR? • How can VR devices create a natural user experience?
  33. 33. Universal 3D Interaction Tasks in VR • Object Interaction • Selection: Picking object(s) from a set • Manipulation: Modifying object properties • Navigation • Travel: motor component of viewpoint motion • Wayfinding: cognitive component; decision-making • System control • Issuing a command to change system state or mode
  34. 34. Interaction: Selection and Manipulation • Selection: • specifying one or more objects from a set • Manipulation: • modifying object properties • position, orientation, scale, shape, color, texture, behavior..
  35. 35. Classification of Selection Techniques • asdf
  36. 36. Simple virtual hand technique • Process • One-to-one mapping between physical and virtual hands • Object can be selected by “touching” with virtual hand • “Natural” mapping • Limitation: • Only select objects in hand reach
  37. 37. Ray-casting technique • “Laser pointer” attached to virtual hand • First object intersected by ray may be selected • User only needs to control 2 DOFs • Proven to perform well for remote selection • Variants: • Cone casting • Snap-to-object rays
  38. 38. Example Ray Casting • https://www.youtube.com/watch?v=W1ZUBTPCL3E
  39. 39. Classification of Manipulation Techniques • asdfa
  40. 40. World-in-miniature (WIM) technique • “Dollhouse” world held in user’s hand • Miniature objects can be manipulated directly • Moving miniature objects affects full-scale objects • Can also be used for navigation Stoakley, R., Conway, M., & Pausch, R. (1995). Virtual Reality on a WIM: Interactive Worlds in Miniature. Proceedings of CHI: Human Factors in Computing Systems, 265-272, and Pausch, R., Burnette, T., Brockway, D., & Weiblen, M. (1995). Navigation and Locomotion in Virtual Worlds via Flight into Hand-Held Miniatures. Proceedings of ACM SIGGRAPH, 399-400.
  41. 41. https://www.youtube.com/watch?v=Ytc3ix-He4E
  42. 42. Navigation • How we move from place to place within an environment • The combination of travel with wayfinding • Wayfinding: cognitive component of navigation • Travel: motor component of navigation • Travel without wayfinding: "exploring", "wandering”
  43. 43. Movement Process • Focusing on user control
  44. 44. Taxonomy of Travel Techniques • Focusing on sub-task of travel Bowman, D. A., Koller, D., & Hodges, L. F. (1997, March). Travel in immersive virtual environments: An evaluation of viewpoint motion control techniques. In Virtual Reality Annual International Symposium, 1997., IEEE 1997 (pp. 45-52). IEEE.
  45. 45. TelePortation • Use controller to select end point • Usable with 3DOF contoller • Jump to a fixed point in VR • Discrete motion can be confusing/cause sickness
  46. 46. https://www.youtube.com/watch?v=SbxgNnOeyF8
  47. 47. Redirected Walking • Address problem of limited walking space • Warp VR graphics view of space • Create illusion of walking straight, while walking in circles Razzaque, S., Kohn, Z., & Whitton, M. C. (2001, September). Redirected walking. In Proceedings of EUROGRAPHICS (Vol. 9, pp. 105-106).
  48. 48. Redirected Walking • https://www.youtube.com/watch?v=KVQBRkAq6OY
  49. 49. System Control • Issuing a command to change system state or mode • Examples • Launching application • Changing system settings • Opening a file • Etc. • Key points • Make commands visible to user • Support easy selection
  50. 50. System Control Options
  51. 51. Example: GearVR Interface • 2D Interface in 3D Environment • Head pointing and click to select
  52. 52. https://www.youtube.com/watch?v=qMadjF1B3rI
  53. 53. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product
  54. 54. How can we quickly prototype Virtual Reality experiences with little or no coding?
  55. 55. Why Prototype? ▪ Quick visual design ▪ Capture key interactions ▪ Focus on user experience ▪ Communicate design ideas ▪ “Learn by doing/experiencing”
  56. 56. VR Prototyping Tools • Low Fidelity • Sketched Paper Interfaces – pen/paper, non-interactive • Onride Photoshop tool – digital, non-interactive • InstaVR - 360 web based tool, simple interactivity • SketchBox – create VR interface inside VR • High Fidelity • Entiti – template based VR with visual programming • A-Frame – web based VR tool using HTML • EditorVR – Unity wrapper inside VR • Unity/Unreal Game Engine – programming needed
  57. 57. Sketching VR Interfaces • Download 360 panorama template grid • Draw interface ideas into grid • Scan into 360 photo viewer for VR HMD See https://virtualrealitypop.com/vr-sketches-56599f99b357
  58. 58. Example Sketched VR Interface • https://www.youtube.com/watch?v=BmMh6-jPWOc
  59. 59. ONIRIDE - 360° Art Plugin for Photoshop • Draw 360 panorama’s directly in Photoshop • Preview in Photoshop, export to VR • See http://www.oniride.com/360art
  60. 60. OnRide Demo • https://www.youtube.com/watch?v=1P1EfGizal0
  61. 61. InstaVR •http://www.instavr.co/ •Free, fast panorama VR, deploy to multi platforms
  62. 62. Demo - Using InstaVR • https://www.youtube.com/watch?v=M2C8vDL0YeA
  63. 63. Sketchbox • VR design tool - create VR interface inside VR • Support for HTC Vive, Oculus Rift • Easy to use VR sketching tool • Available from SteamVR • See https://www.sketchboxvr.com/
  64. 64. Sketchbox Demo • https://www.youtube.com/watch?v=gWfgewGzaEI
  65. 65. A-Frame • See https://aframe.io/ • Web based VR framework • Make WebVR with HTML and Entity-Component • Works on Vive, Rift, Daydream, GearVR, desktop
  66. 66. A-Frame Demo • https://www.youtube.com/watch?v=1MskH9uqOyQ
  67. 67. Unity EditorVR • Edit Unity VR scenes inside VR • 3D user interface on top of Unity • 2 handed interface using HTC Vive • Support for multi-user input • Available from https://github.com/Unity-Technologies/EditorVR
  68. 68. Demo: Unity EditorVR • https://www.youtube.com/watch?v=ILe2atyofqM
  69. 69. More Prototyping Tools • List of 24 prototyping tools • Tools for prototyping 3D VR experiences • Tools for prototyping 360 degree experiences • Web based Tools for 3D prototyping • 3D modeling tools in VR See http://bit.ly/2wx3i6H
  70. 70. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product
  71. 71. What is Evaluation? •Evaluation is concerned with gathering data about the usability of a design or product by a specified group of users for a particular activity within a specified environment or work context
  72. 72. When to evaluate? • Once the product has been developed • pros : rapid development, small evaluation cost • cons : rectifying problems • During design and development • pros : find and rectify problems early • cons : higher evaluation cost, longer development design implementation evaluation redesign & reimplementation design implementation
  73. 73. Four Evaluation Paradigms •‘quick and dirty’ •usability testing (lab studies) •field studies •predictive evaluation
  74. 74. EXAMPLE: CONCEPT TO DEMO
  75. 75. NASA Hololens AR/VR Concept Demo • Vision: Work on Mars from your office • Story and sketches based on vision • Led to working Demo
  76. 76. Chesley Bonestell (1940s)
  77. 77. Hololens Story
  78. 78. HoloLens Concept Sketches
  79. 79. Final NASA HoloLens OnSight Demo https://www.youtube.com/watch?v=o-GP3Kx6-CE
  80. 80. CONCLUSION
  81. 81. Conclusion • Interaction Design methods can be used to develop effective Virtual Realty interfaces • Needs Analysis • Several methods available for determining user needs • Design • Use metaphors and affordances, good UI guidelines • Prototyping • Many rapid prototyping tools available • Evaluation • Use multiple methods for best evaluation
  82. 82. Resources • Excellent book • 3D User Interfaces: Theory and Practice • Doug Bowman, Ernst Kruijff, Joseph, LaViola, Ivan Poupyrev • Great Website • http://www.uxofvr.com/ • 3D UI research at Virginia Tech. • research.cs.vt.edu/3di/
  83. 83. UX of VR Website - www.uxofvr.com • Many examples of great interaction techniques • Videos, books, articles, slides, code, etc..
  84. 84. www.empathiccomputing.org @marknb00 mark.billinghurst@auckland.ac.nz

×