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.
www.ux-india.org/uxindia2019
#ux #uxindia #uxindia2019 #designthinking #uxi19 #uxconference #umodesign

Transcript

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 ?
7. Portfolio
9. TravelScape Interactive Storytelling based booking experience
15. Interio VR Tour to showcase Interior Design Ideas
19. VRepair Garage Simulation Training Module
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
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 Interface
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 principles
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?
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 VR
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
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