Guidelines for making Virtual Reality applications for the domain of Real Estate.

1. DESIGN GUIDELINES
Real Estate in VR
Mudit Asija
Real Estate in VR

2. INTRODUCTION
OVERVIEW
VISUAL DESIGN
Colour Animation
Colour of Icons Typography
Primary Colours Writing Style
Secondary Colours Language
Iconography Imagery
Terminology
APP ARCHITECTURE
Accessibility Loading
Selection Motion
Pointer Navigation
Perspective Onboarding
USER INTERACTION
Audio Data Entry
Input Feedback
CONTROLS
Buttons Pickers/Selector
CONTENTS

3. INTRODUCTION
The following guidelines are to be used by anyone who wishes to make an application for the
domain of Real Estate on the VR platform ( Virtual Reality ).
OVERVIEW
The purpose of the applications in this domain will be to provide users with an experience,
that of viewing
houses in any part of the world without having to actually go there, so that they can browse
wherever
they like, on their own time and in as private a setting as they like.
Users will be able to select the location, type, and other attributes of the living space.
VISUAL DESIGN
The interface should be simple and easy to use. There should not be too much information
on the area of field of view.
Colour
• Make sure to use dimmer lights and colors than you normally would.
• Colours should not be too bright so as to avoid straining the users eyes.
• Strong and vibrant lighting in VR can cause Simulation Sickness to occur more quickly.
• Avoid this by using cooler shades and dimmer lights than you normally would.
Colour of Icons
• Depending on the context, the background may change, but the icons are to stay white
(#000000)
• Avoid using very light or bright colours for backgrounds as they may not be visible due their
own background; also white icons will be difficult to see on such backgrounds
When displaying Information:
• A black background with opacity 75%; use white text with full opacity
• Avoid using borders for the background plane
• Red (#CD2E27) and Green (#51B848) can be used to display denial or success respectively (as
shown in the image below)

4. ( #51B848 ) ( #CD2E27)
PRIMARY COLOURS
Here are some colours you can use as primary colours :
Either one of these colour can be used for the main colour scheme/theme as they are very welcoming
colours and relatable to the everyday Indian household.
SECONDARY COLOURS
Here are some colours you can use as secondary colours or accents :
Success Denial
#17333d #1d1f1a #eadee1
#3e97bd #f3d132
#68bd47
#82aece
#3790ba
#52bfed
#3a7dc0

5. Iconography
Icons have always been a great way to support text labels with a visual relationship to the
performed action or even replace text completely.
• System icons will be used to represent simple and consistent tasks or functionalities like
( information (i), “more” (+), remove (-), Trash (dustbin), etc )
• Make icons as relevant and close to their real world counterparts as possible.
Size of the icons :
• The size of icons should be consistent with the size of the text
Animation
• Icons may not be necessarily animated
• Try to keep animations restricted to system menu icons and that too very subtly
• Whenever the pointer hovers over any icon, it should be highlighted
• Simple animations should be used wherever required
• The animations should be subtle and not too flashy

6. Typography
Font type
Arial - Regular
This font type is the most common and is very widely used and
understood.
Arial ABCDEFGHIJKLM
abcdefghijklm
Arial ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Font Size
h1 : 41.6px on mobile screen, 3.46° of perceived view, 6.04cm height in 1 meter
h2 : 16px on mobile screen, 1.33° of perceived view, 2.32cm height in 1 meter
Writing Style
Regular relatable language to be used which is commonly and widely used
Bedroom
Bedroom

7. Language
• Users must be given an option to change languages and units
Imagery
• There shall be images/icons to represent the type of living spaces that will be displayed for
the users to choose.
Terminology
Error alerts
• When showing errors of any kind, try not to scare the user as if something majorly wron
has happened;
• Instead use language that assures the user that everything is alright and it can be take care
of.
• Along with it, show the users other options that they can use like another way out of the
issue.
APP ARCHITECTURE
Accessibility
Accessibility plays a big part in enhancing the experience of users. Users need to know that
there is more than one way to perform a single task. This assures them and increases trust
between them and the interface.
Selection
• Allow users to select something by not just having to click on it, but also long stare, etc. You
can also use customized gestures for the same.
The Pointer
• Try not to use gaze input as it may hinder the users actions.
• Most preferably use the cross hairs type pointer or a circular pointer (as shown in the
image below for crosshairs)

8. • The pointer can be can be made to reduce and increase in size as it goes closer to or further away
from the user. This is to show perspective and give an idea of the size of the space. (as shown in
the image below)
Perspective
• To give an idea of the surfaces to the users (for instance, the thickness of the pillars), the pointer
may be placed parallel to the surfaces in the place as it moves over them. (as in the image below)

9. Loading
• Do not use a complete blackout to show the process of loading as it can cause simulation
sickness.
Motion
• Transition effects can be given while moving from one point to another.
For example : Fade out/ fade in
• Actual locomotion(movement) can be shown
• Duration of the transition should not be too long.
Navigation
• Navigation can be done using the menu visible on the left hand of the users and will be
interacted with using the right hand.
• Another way to bring up the menu can be to pinch with all 4 fingers and the thumb
Onboarding
• The onboarding will consist of instructions that will tell the users how to operate the system
and to go about the task
• Use clear and simple language
• Try not to use more than 10 words in a sentence for a single instruction

10. USER INTERACTION
Audio
• You can have subtle cues when moving around in the menu or other options
• This will provide the user with feedback of the movement of the cursor from one position to
another
Input
• Use Swipe, Slide and Click methods
• Either keep a long time period for the gaze input or avoid using it entirely as it may, for
instance, cause the user to select an option that they’re only looking at because they were
reading what it was
Data Entry
• Try to display all the options either in a step by step menu system and use sliders to scroll
through a list of things rather than having to type everything out.
Feedback
•�Highlight the blocks on the floor where the cursor is pointing. This is for the user to know
that they can click there to move to that point in space.
CONTROLS
Buttons
• For users to move directly to other parts of the space, they will need to click on ( UI elements
which can be considered ) buttons
• Please avoid using completely white (#000000) or completely black (#FFFFFF) buttons.
This is to avoid confusion about the content behind the button.

11. The “ buttons ” here are used to move to other parts of the space. They have different states :
• Inactive
• Hovered
•Active
And they have different colours to indicate the current state.
• Inactive - Blue - #3e97bd
• Hovered - Orange - #f3d132
•Active - Green - #68bd47
Pickers/Selector
• The selector should be big enough to be seen seen by the users, but not too big so as to cover
up content behind it.
• It can have opacity of 75% but preferably not less than that, since it may make it harder for
the user to locate or see the pointer