.png){kind=small}
.png){kind=small}
VR Interfaces
UI | UX Case Study.
Interface design
for Virtual Reality Environment.
Problem Statement
The existing 3D Virtual environment is quite unfamiliar among users. The users need a sense of direction and familiarity in interfaces to avoid confusion and ensure a smooth experience.
Due to a lack of familiarity with the 3D environment among users, there are a set of guidelines and principles which are needed to be taken care of in order to avoid confusion among users. These interactions also sometimes cause nausea among users when the experience is made too complicated and cause problem due to new unfamiliar environment experience.
Project Overview
Research-based interface design for the 3D Virtual Environment and providing UI elements following VR principles.
Duration
August 2019 - Present
(Currently in development stage.)
My role
The research was conducted for designing VR interfaces while working as a UI/UX Designer for the company E3IQ TM. The project included in-depth research sessions with the team of 3D Designers and XR Engineers.
From the research, we were able to design interfaces following the guidelines and requirements for the Virtual Environment.
Worked with a team of UI/UX and 3D designers including XR Engineers of E3IQ.
The interface design involves extensive research and ideation sessions to formulate ideal solutions for the platform.
Overview
Introduction
VR experiences have many divergent requirements when it comes to UX. There are analogs to traditional product design, of course, but the application of these heuristics is what is important to focus upon for the scope of this article, as traditional digital products are designed to be interacted with through the medium of the touchscreen of a mobile app or the mouse and keyboard of a desktop or laptop.
Instead, VR products use a combination of the user’s body and senses as well as proprietary or adapted controller devices for interaction.
The burgeoning field of virtual reality incorporates a myriad of design elements that differ significantly from more traditional methods for designing a positive user experience (UX). Given the current momentum of both movements, studying virtual and augmented reality may be the key to “future-proofing” UI and UX designers.
Analysis
User Research
Futuristic and next-gen technology where the research is still going on and people are slowly getting accustomed to it. People are still not familiar with the 3D Virtual environment and generally face issues while using such applications on VR headsets
Virtual Environment
One of the most challenging tasks when it comes to virtual reality interaction design is the design and implementation of user interfaces. In order to design VR interfaces, it is necessary to consider that they should be adapted to the 3D environment, respect usability principles (which are not very clear in VR), and, off course, they need to be aesthetic and visually appealing. We do not design the same interaction techniques for HTC Vive, Oculus Rift or Samsung Gear.
Home Screen
One of the most challenging tasks when it comes to virtual reality interaction design is the design and implementation of user interfaces. In order to design VR interfaces, it is necessary to consider that they should be adapted to the 3D environment, respect usability principles (which are not very clear in VR), and, off course, they need to be aesthetic and visually appealing. We do not design the same interaction techniques for HTC Vive, Oculus Rift or Samsung Gear.
Menus
One of the most challenging tasks when it comes to virtual reality interaction design is the design and implementation of user interfaces. In order to design VR interfaces, it is necessary to consider that they should be adapted to the 3D environment, respect usability principles (which are not very clear in VR), and, off course, they need to be aesthetic and visually appealing. We do not design the same interaction techniques for HTC Vive, Oculus Rift or Samsung Gear.
To view complete research conducted on the Virtual Reality Environment,
UX Research
Research Outcomes
The research conducted from user response and various other sources helped us formulate and understand the principles to design for the VR Environment. Based on the research we were able to sum-up theories related to designing interfaces for "Home Screens" and "Menus" for VR applications.
This involved designing 3D environment interactions and also the portal through which the modules can be accessed for the application or platform developed for the company.
VR Home Screen
An interface is the set of elements that users interact with to navigate an environment and control their experience. All VR apps can be positioned along two axes according to the complexity of these two components.
In the top-left quadrant are things like simulators, such as the rollercoaster experience linked to above. These have a fully formed environment but no interface at all. You’re simply locked in for the ride.
The full width of the projection represents 360 degrees horizontally and 180 degrees vertically. We can use this to define the pixel size of the canvas: 3600 × 1800.
The area of interest represents one ninth of the 360-degree environment. It’s positioned right at the centre of the equirectangular image and is 1200 × 600 pixels in size.
Thus,
“360 View“: 3600 × 1800 pixels
“UI View“: 1200 × 600 pixels
Menus
Choosing the right menu mainly depends on two things. -
First, what structure of your content? Is it hierarchical? If yes, how many layers? How many items are you expecting? Does it have to scale?
Second, what kind of user experience are you aiming for? Quickly finding a certain single element in a large heap? Browse through a category? Are some elements more important than others?
Size, what is the right size for embedded menu option?
It depends on the content, smaller options can be used when the contents are icons and larger options when we need to implement text. The size of the menu options depends on the number of choices available.
There are two main embedded menu categories according to the interaction method: those in which the interaction involves one hand and those involving both hands.
What color should we use?
When it comes to colors, the same principles of 2D environments apply. Just remember that the menu needs to be integrated in the context and be readable. The embedded menus need to be fit in the hand command in a way that do not disturb the immersion. Position the menus on the top of the hand control, so the virtual representation of the menu is fully visible.
UX Design
Implementing Research
The whole research done for the company resulted in creating various interfaces for the Virtual Reality platforms which were involved in Training and Machine Assembly. These modules included intense guided actions where the user experience plays a vital role in understanding and using the interface of the platform.
One of the vital task was to create familiar interfaces which makes it easy for the user to navigate and use regularly. Some elements used by inspired by those used in games and 2D web applications in order to ensure not much difference in interpreting the platform UI.
Wireframe
Initially, we created a moodboard as a reference for creating our platform according to the interfaces for the Virtual environment. Using the reference platforms we started ideating and formulating interfaces according to our requirements. For an efficient and familiar user experience, we used elements of web applications to make sure the users don't get confused.
Based on the paper prototyping and the user flow created for the application, we started creating wireframes for the application. There were many modules and of different categories. The functionalities included managing the module, creating modules by the admin and completing modules by the users.
The wireframes prototyping were created and were given to users for testing to understand their responses and behaviour. Upon finalising the final screens for the platform, we started working on the UI Design of the application.
To view complete UX Designs created for the Virtual Reality Environment,
UI Design
Final Screens
After finalizing the color theory and typography, we worked on the iconography to be used for the application for various menus and options. Using the color palette, we transformed the wireframes into final versions of the screens. Refined various screen's interface taking into consideration visual appeal and easy to use interface.
Appointments Calendar -
%20-%20Day.png)
Chat/Messaging -
Video Consultation -
Consultations -
Profile -
