Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design and Build Immersive experience in Virtual Reality

D7424ff0e1dc983d898de62c7496c321?s=47 uxindia
October 25, 2019

Design and Build Immersive experience in Virtual Reality

UXINDIA2019: India's biggest international conference on User Experience Design which is being celebrated on Sep 9, 10 & 11 at Novotel HICC, Hyderabad.
#ux #uxindia #uxindia2019 #designthinking #uxi19 #uxconference #umodesign



October 25, 2019


  1. None
  2. None
  3. Who we are We are an innovation and design consultancy

    studio based in Bangalore, Delhi, Mumbai and Hyderabad providing design focused training and consultancy services for UI/UX Design, Immersive Design, Conversational Design, Design Thinking and Digital Product design.
  4. What We Do? We foster innovation by following a design

    thinking process to imagine, design and create revolutionary remedies to worldly problems . With a team of expert alumni graduates from NID’s and IIT’s with industry experience in companies like Samsung, Microsoft, Google, Thought Works etc, we have been able to solve problems in the domains of education, finance etc, using our expertise in the field of Augmented/ Virtual Reality, Tangible User Interfaces, Artificial Intelligence etc.
  5. We have trained participants from Genpact, IBM, L&T, Infosys, WIPRO,

    Edelweiss, TCS, ENY, DRDO, SAP, Motorola, DELL, Macmillan India, Zivame, Bates CHI & Partners, CSE, SSL, Cadenza, Magnus, Digi Collect, July Systems to foster innovation in their companies, to build products, services and upscale their teams including developers, product managers to design thinkers. Who have we trained ?
  6. None
  7. Portfolio

  8. None
  9. TravelScape Interactive Storytelling based booking experience

  10. None
  11. None
  12. None
  13. None
  14. None
  15. Interio VR Tour to showcase Interior Design Ideas

  16. None
  17. None
  18. None
  19. VRepair Garage Simulation Training Module

  20. None
  21. VR UX Design Course Weekend Course 12 Weeks | 24

    Sessions Course Fee: 80k 3 Hour x 2 Sessions per week This 12 week course is aimed at providing knowledge and hands on experience to get you seamlessly into VR industry requirements. By the end of the course you'll be equipped with tools and knowledge to design and create Virtual Reality experiences. Expert Trainer Design Portfolio One to one mentorship VR Tool Kit Career Assistance Hands on Learning
  22. 1. Intro to UX UI Design in Virtual Reality &

    Immersive Media Get to know about Virtual Reality medium and how UX design process is being used in industry. 2. Basics of VR UI, VR Design & Prototyping Tools Introduction to the basics of 3D space design for VR medium, process and ecosystem of tools for design and development. 3. Color, Material, Light, Space Styling, Iconography, 3D models Learn the skills of envisioning the 3d space in visually appealing way. 4. Typography, Spatial Audio, VR UI Components, VR UI Guidelines Deep dive into different elements of VR UI elements and how they drive the entire user experience during immersion. Course Content
  23. 5. Considering Human Ergonomics, Physiology for VR learn about the

    fundamentals of designing the space with respect to human ergonomics and physiology of their body, head and eyes. 6. Conducting User Research in VR Introduction to user research. How to conduct user interview and Empathise with them as a designer. 7. Understanding User Data using Affinity Mapping, VR UX Canvas learn how to organise and analyse the data that is collected from the user research by using methods such as affinity analysis. 8. User Personas, Scenarios, and Narratives. Design for Collaboration Learn different storytelling techniques used in theatre, narrative patterns, orchestrating movement and dialogue between user and other elements. Course Content
  24. 9. Information architecture, navigation models in 3D Learn about defining,

    categorizing and structuring information which will go in the application. 10. VR Storyboarding Create task flows and align them with users mental model, which make it easy for users to achieve their final goal. 11. Interaction laws, wireframing 3D interactions and Brainstorming Learn different interaction laws governing experience and control in 3D spaces and specifics of VR interaction patterns. 12. Paper prototyping the VR experience Learn to create paper VR wireframes to get quick feedback on UI layout ideas and flow Course Content
  25. 13. VR wireframing Learn how to create wireframes which is

    the skeleton of your application. 14. Heuristics evaluation of VR interfaces Learn about heuristic evaluation which will helps to identify usability problems in the user interface (UI) design. 15. Refining wireframes based on Heuristics evaluation Work on refining their VR wireframes based on results of Heuristics evaluation. 16. VR Wireframes to VR Visual Design Design aesthetically pleasing scenes by using the color, light and typography principles in the right way. Course Content
  26. 17. Refining Visual Design Final review and improvements on the

    visual design. 18. Usability Testing Learn how to conduct usability testing and get to know about the methodologies involved in VR usability testing. 19. Stitching Everything Together, Prototyping Learn to create interactive prototypes which simulates the final product to test it’s functionalities and do the usability testing of your product. 20. Design Specifications & Developer Hand offs Learn how do designers create design specification and how to handover them to the developers, and how do they take it further. Course Content
  27. 21. Portfolio Preparation and Setup Get expert guidance in creating

    an eye-catching portfolio to showcase your work and how to present it effectively. 22. Finalising Portfolio, Publishing and Sharing Reviewing and improvising the portfolio. Example of a good VR portfolio using a case study. 23. Introduction to Unity-1 Introduction to Unity Game Engine, IDE and create basic VR experience 24. Unity Intro-2 Create VR experience and publish it on mobile. Course Content
  28. VR UX Kit VR UX Journal Mobile VR Headset

  29. Virtual Reality, one of the hottest technology of the decade

    is now being projected as a core offering by giants like Google, Microsoft, Facebook etc. According to the statistics the worldwide user base for AR and VR will reach 443 million by 2021. This means that UX designers have a greater role to play and should be equipped with right knowledge on how to create amazing VR experiences. 3D interaction design calls for a completely new way of thinking about UX design. Why Virtual Reality?
  30. FAQs Are there any pre-requisites and who qualifies for the

    course? There are no pre-requisites for the course. However, we expect you to have an basic understanding of using laptop to create digital content earlier. This will ease the learning time for you. Since, we are taking limited number of participants for this batch, it will be on first come first serve basis. What Tools will be taught in the course? The course will focus on the process of designing VR experiences from ideation to developer hand off. For this, tools like VR UX paper templates (paper sketch sheets designed by Designerrs specifically for VR), BrioVR will be taught. Introduction to Adobe XD and Unity will be given during the course. How is this course different than UX UI course? Virtual Reality is altogether a new medium giving you access to a canvas that spans 360 degree around the user. Optimal usage of this entire space to give user a true feeling of immersion, wherein she feels part of the new space and do not get intimidated by the expanse is the true difference. Traditional UI deals with 2d flat screen, wherein all the interactions are limited in 2 dimension, whereas in VR user is interacting in 3d space, giving them the magical powers. Additional skills and understanding of space is required to create VR experience. Which VR headset will be used during the course? Mobile VR and/or Oculus GO will be used in the course as it focusses on taking the participants through the entire VR design process from ideation to developer hand off. Oculus GO headset will be provided as and when required during the course and to be shared among participants. Mobile VR headset will be provided as part of VRUX kit.
  31. For further details visit us at designerrs.com

  32. Designing for Virtual Reality Kumar Ahir Principal Design Consultant Designerrs

    Lab UX India 2019
  33. What are we going to do today? Principles of Designing

    for Virtual Reality Tools to design and create VR experience Create a VR experience
  34. Session Schedule Session 1 - 3 hrs (approx) • Understand

    VR and Design • VR Paper prototyping Session 2 - 3 hrs (approx) • AFrame basics • Design and Build VR experience
  35. Checklist VR ready smartphone Mozilla Firefox browser YouTube app Grid

    Paper, Pencil, Eraser, Color Pen Adobe XD if not download and install Mobile Data Connection
  36. Make a team be prepared to Think in 3D Don’t

    switch of your phone! We will use it in the session Make sure data connection is ON & Use it for social media sharing J #uxi19 #uxindia2019 #ux #design4VR @uxindiaconf @designerrslab @kernel_kumar
  37. At the end of the workshop we’ll publish links of

    VR experience
  38. How many have experienced VR in any form?

  39. How many are working on VR project?

  40. How long do you think does it take to create

    a VR Experience?
  41. Fundamentals of VR VR Design Principles Content Creation process Hands

    on VR content creation Hands on VR prototyping tool – AFrame Designing and Building an experience
  42. Before we begin to learn Design for VR we need

    to know what makes it the way it is
  43. Immersive Media Cave paintings Print Photographs Film/TV 3D cinema VR

    | AR | MR We have been recreating the reality around us...
  44. Different Immersive Media AR | VR | MR and XR

  45. VR Virtual Reality AR Augmented Reality MR Mixed Reality Immersion

  46. None
  47. None
  48. None
  49. Anatomy of VR hardware Stereoscopic Images Lens adjusts the focus

    Syncs head orientation with display 360 onboard rendering
  50. Anatomy of VR hardware FoV – Field of View DoF

    – Degrees of Freedom Controllers | Sensors | Trackers
  51. Field of View (FoV)

  52. Stretch your right hand Finger in front of you While

    looking straight and not moving eyes Move your right hand toward right side Till you loose visibility of your finger
  53. Degrees of Freedom - DoF

  54. Controller | Sensors

  55. What’s the use of each of these?

  56. Types of VR Devices and Content Hardware • Mobile VR

    • StandAlone • RoomScale Content • Monoscopic 360 image/video • Stereoscopic content • 3d Rendered Modes of Interaction • Gaze • Controller • Direct hand • Combination
  57. VR Hardware - Mobile

  58. VR Hardware - RoomScale

  59. VR Hardware - Standalone

  60. Mobile 3 DoF High latency Low FoV Gaze Standalone 3

    DoF Low latency 100 FoV 3 DoF controller Roomscale 6 DoF Perceptive latency 110 FoC 6 DoF controller cardboard daydream Gear VR Oculus GO Vive Focus Oculus Quest Pimax Oculus Rift HTC Vive Pro VR headsets Varjo PSVR
  61. Monoscopic 360 Stereoscopic 360 3D Rendered VR Content No Depth

    Flat 360 image Fixed Light Depth with parallax 3D 360 image Fixed Light Depth 3D rendering Dynamic Light
  62. Stereoscopic • In normal Image both of our eyes see

    same image • In Stereoscopic image our two eyes sees same image captured from 2 slightly different angles and that’s how illusion of 3D depth is created • Latest phones with dual camera creates stereoscopic content
  63. Gaze Interaction

  64. Controller Interaction

  65. Direct Hand Interaction

  66. Categorizing VR experiences based on complexity of Environment/content and User

  67. We will Create Monoscopic Static content We will focus on

    creating a VR experience that has simple interface no environment gaze interaction
  68. Fundamentals of VR VR Design Principles Content Creation process Hands

    on VR content creation Hands on VR prototyping tool – Aframe Designing and Building an experience
  69. First 30 Seconds • Do not put user directly in

    middle of action • On board with tips and hints • Give time to explore the space • Acquaint with interactions and affordances • Not applicable for experts
  70. Field of View and Comfort Zone

  71. Field of View and Comfort Zone

  72. Field of View - Placement of Element - Spread of

    UI - Reach of element Field of View and Comfort Zone
  73. Real life units - meter, feet, inches Unit of dimension

  74. Layers of information

  75. Use of depth to show hierarchy

  76. Gaze based cues

  77. Give visual anchor

  78. Reference horizon

  79. Communicate affordances clearly

  80. Employ Presence

  81. Head locked Stereo audio 3D Spatial audio Spatial Audio

  82. Have a background behind Text Consider Billboard signage font size

    3D type adds to cognitive load 4.8cm at 1m distance 9.6mc at 2m distance 1.4m at 3m distance Typography
  83. A 3D interface 360 Canvas It is overwhelming (Hicks law)

    You can walk inside the interface
  84. Design for VR Multimodal interface Gaze, Gesture, Speech Types of

    controllers Seated, Standing, Moving
  85. Build a story and plot

  86. https://tinyurl.com/y36m7j66 IKEA 360 tour watch it with the lens of

  87. Fundamentals of VR VR Design Principles Content Creation process Hands

    on VR content creation Hands on VR prototyping tool – Aframe Designing and Building an experience
  88. Let’s VR..

  89. is your phone VR ready?

  90. VR ready Turn on Auto Rotate mode Open YouTube app

    Search and play 360 video Rotate phone by 90 degree to view fullscreen When moving phone around, does the video also move? If yes the phone has sensors needed for VR iPhone 6s and above supports VR by default
  91. Install on android phones Google VR services

  92. Browser check WebVR Mozilla Firefox WebVR community

  93. https://tinyurl.com/y5s53ae4 VR timeline in VR watch it with VR cardboard

  94. Who coined the term Virtual Reality?

  95. How long do you think does it take to create

    a basic VR experience?
  96. Less than a minute* *depending on your internet speed

  97. Take a photo of the grid from the sheets given

    to you
  98. Take Photo In landscape mode

  99. Crop Exactly to the four corners Rotate 90degree Brighten To

    better the visual
  100. Upload the image to https://vrframe.in make sure to add https

  101. View on your phone with VR headset

  102. Copy the url and save it somewhere for later reference

  103. What just happened?

  104. None
  105. Reference lines Each line is 20degree apart Comfort zone 40degrees

    up and down
  106. Understand the Paper Grid 3 inch 3 inch 5 feet

  107. Experiment Drawing Basic shapes on the grid and view in

  108. Sketch some environment on the grid and view in VR

  109. let’s create some VR experiences 30 mins

  110. And you thought VR can be created only in 3D

    software!?! Use Adobe XD to create VR content
  111. Download template XD files https://vrframe.in/other/

  112. Use the template to create different experiences – 15 mins

  113. Don’t you feel background is blank, drab and doesn’t follow

    some principles? You can either add A 360 image or gradient background
  114. Gradient background create using gradient color fill in XD

  115. Add environment to the content Search “equirectangular 360 images” width=half

    of height Use this image as background
  116. None
  117. None
  118. Create interesting 360 content • Draw different shapes • Add

    Text • Add Image • Add environment in background • Add shadow to near • Blur far away elements • Add a faint horizon • Create circular ground by adding a rectangle in bottom Template pointers • Follow the reference line for content in comfort zone • Set grid opacity to 0 • Duplicate the base template artboard and create new image using that
  119. let’s create some VR experiences ~30-40 mins In next part

    we’ll add animation/action to this static content
  120. Time to add some action to static content

  121. AFrame a javascript framework to create Virtual Reality on web

    browser open https://glitch.com/~aframe on your laptop browser
  122. Click on Show and a new window will open. You’ll

    be able to pan scene Open the url in mobile browser and view it in Cardboard
  123. You’ll see something like this

  124. Open https://glitch.com/~vrbasetemplate1 Play with the scene

  125. The coding area. We are not going to code !!!

    Index.html file holds all we need Assets is a folder that will hold graphic files
  126. Let’s understand this a bit There are 2 zones in

    the code Pick objects Area of work Do not touch any other lines
  127. Copy the line which mentions plane Copy line no. 15

    and paste in on top of area of work zone Paste after line no. 28
  128. Click on Show in top left corner Select in a

    new window
  129. A new window should open like this Hit the keys

    ALT+CTL+i (on windows) CMD+CTL+i (on Mac)
  130. If it doesn’t open do this Add English Keyboard (US)

    layout Edit Language and Keyboard options
  131. Below is a 3d editable view

  132. Design a VR Experience for connecting people Landing state First

    30 seconds Contact list UI spread In conversation Presence and Immersion
  133. https://vrframe.in/share=

  134. Skype FaceTime Messenger WhatsApp … Virtual Reality

  135. Brainstorm Paper Prototyping Adobe XD for Graphic assets AFrame for

    final VR Create 1-2 states Landing Normal During communication
  136. None