Designing Usable Interface
5 likes1,850 views
This document discusses interaction design principles and processes for designing virtual reality interfaces. It begins by defining interaction design and discussing needs analysis methods like learning from users, analogous settings, and experts. Ideation techniques like brainstorming and sketching VR interfaces are presented. Design considerations like affordances, metaphors, and physical ergonomics are covered. Prototyping tools like Sketchbox, A-Frame and Unity EditorVR are introduced. The document concludes by discussing evaluation methods like usability testing and field studies.
![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)](https://image.slidesharecdn.com/designingarvrfinal2novideo-181013141554/85/Designing-Usable-Interface-24-320.jpg)
Designing Usable Interface
- 1. DESIGNING USABLE VR INTERFACES Mark Billinghurst University of Auckland October 3rd 2018
- 2. How Can we Design Useful VR? • Designing VR experiences that meet real needs
- 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. • 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. 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. 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. NeedsAnalysis Goals 1. Create a deep understanding of the user and problem space 2. Understand howVR can help address the user needs
- 8. Methods for Identifying User Needs Learn from people Learn from analogous settings Learn from Experts Immersive yourself in context
- 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. Suitable for VR or not?
- 11. The Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product
- 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. VR Interface Design Sketches • Sketch out Design concept(s)
- 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. 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. VR Human Interface Guidelines • Interface design website - http://vrhig.com/ • Set of VR interface design best practices
- 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. Cardboard Design Lab • Mobile VR App providing examples of best practice VR designs and user interaction (iOS, Play app stores)
- 19. Demo: Cardboard Design Lab • https://www.youtube.com/watch?v=2Uf-ru2Ndvc
- 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. 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. Simple Virtual Hand Manipulation https://www.youtube.com/watch?v=_OgfREa4ggw
- 23. How are These Used?
- 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. 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. 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. Human Information Processing • High level staged model from Wickens and Carswell (1997) • Relates perception, cognition, and physical ergonomics Perception Cognition Ergonomics
- 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. Consider the Whole User Needs
- 30. Would you wear this HMD?
- 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. How can we Interact in VR? • How can VR devices create a natural user experience?
- 34. 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
- 35. Interaction: Selection and Manipulation • Selection: • specifying one or more objects from a set • Manipulation: • modifying object properties • position, orientation, scale, shape, color, texture, behavior..
- 36. Classification of Selection Techniques • asdf
- 37. 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
- 38. 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
- 39. Example Ray Casting • https://www.youtube.com/watch?v=W1ZUBTPCL3E
- 40. Classification of Manipulation Techniques • asdfa
- 41. 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.
- 43. 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”
- 44. Movement Process • Focusing on user control
- 45. 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.
- 46. 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
- 48. 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).
- 50. 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
- 52. Example: GearVR Interface • 2D Interface in 3D Environment • Head pointing and click to select
- 54. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product
- 55. How can we quickly prototype Virtual Reality experiences with little or no coding?
- 56. Why Prototype? ▪ Quick visual design ▪ Capture key interactions ▪ Focus on user experience ▪ Communicate design ideas ▪ “Learn by doing/experiencing”
- 57. 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
- 58. 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
- 59. Example Sketched VR Interface • https://www.youtube.com/watch?v=BmMh6-jPWOc
- 60. 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
- 62. InstaVR •http://www.instavr.co/ •Free, fast panorama VR, deploy to multi platforms
- 63. Demo - Using InstaVR • https://www.youtube.com/watch?v=M2C8vDL0YeA
- 64. 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/
- 66. A-Frame • See https://aframe.io/ • Web based VR framework • Make WebVR with HTML and Entity-Component • Works on Vive, Rift, Daydream, GearVR, desktop
- 68. 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
- 69. Demo: Unity EditorVR • https://www.youtube.com/watch?v=ILe2atyofqM
- 70. 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
- 71. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product
- 72. 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
- 73. 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
- 74. Four Evaluation Paradigms •‘quick and dirty’ •usability testing (lab studies) •field studies •predictive evaluation
- 76. NASA Hololens AR/VR Concept Demo • Vision: Work on Mars from your office • Story and sketches based on vision • Led to working Demo
- 78. Hololens Story
- 80. Final NASA HoloLens OnSight Demo https://www.youtube.com/watch?v=o-GP3Kx6-CE
- 81. CONCLUSION
- 82. 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
- 83. 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/
- 84. UX of VR Website - www.uxofvr.com • Many examples of great interaction techniques • Videos, books, articles, slides, code, etc..