​

Design Considerations: 

 

​

Designing for Virtual Reality

​

• A curved surface is useful to simulate a design for a spherical environment. When the information is ‘wrapped’ around the user, they can easily navigate it without even having to take a single step.

• We used depth perception to create a comparison of the distance of elements between each other. This consideration is important to establish foreground and background elements in the system so the user is given a proper sense of location.

• A stationary visual point is essential for the VR experience to help minimize disorientation and thus reducing sickness and the feeling of nausea for the user.

• Adding caption to buttons will help minimize the load to the users.

• Whitespace is used to create breaks and help not overwhelm the user with too much clutter and give their eyes some breathing room.

• Lengthy reading is difficult in a VR setting so less texts should be used as much as possible.

​

Font  Roboto was our font of choice. It is a neo-grotesque sans-serif typeface family developed by Google which emphasizes neutrality and simplicity. We chose it because it is highly readable and is widely used in many applications. Google describes the font as “modern, yet approachable” and “emotional”

​

Color  Our main colour palette is blue. Some research suggests that people with highly intellectual work, which requires a high cognitive load, for instance, programmers or academics, are most productive in a blue environment. The blue colour family works well in science & math by lowering the heart rate & allowing concentration to kick in. In learning design, blue is used to calm when something seems too complicated.

​

Galitz Principles 

 

• The weight of screen elements is balanced vertically and the elements are also symmetric along the center line.

• Consistent spacing was implemented on some alignment points

• The menu and subfunctions are located in familiar locations. For VR sytems, they are usually on the left and right sides. The main element is placed in the center since the user is placed on the center. The information function was placed on the top right side.

• The use of saturated and dark color in the center background directs the eye to the main contents.

• The system features as few styles, colors and fonts as possible.

• Similar shapes and sizes make elements appear as a unified whole.

• The interface is simple with only three columns utilized for the display elements.

• The elements were arranged to provide functional groupings: lessons on left and info and quiz to the right.

​

Gestalt’s Principles 

 

• Since we are employing a VR system, figure-ground segregation was an important consideration for our design. We used shadows and angles to simulate 3D. Color gradient was used in the background to create depth. Menu boxes were angled to create foreground elements.

• Elements that are similar were placed close to each other to form a group.

• Similar shapes and colors were used. Colors were changed to highlight and give feedback.

​

Norman’s Principles

​

• Because we are using the hand movement as the controller, navigation naturally follows the user’s actions. Swiping motion to the left and right would simulate rotation to the same direction.

• We do not want the user to get lost in the VR environment, hence it is important to provide them with clues. Feedback is always given whenever the user would interact with the system: fading logo, highlighted buttons, changing of font colors, sounds.

• We used constraint to simplify the user interaction. The user is only be able to click certain elements displayed. Blinking elements gave users clue as to which part is interactable.

​

Prototyping We began with a paper prototype which we later implemented in Figma. The demo can be accessed here.

​

Implementation Bootstrap and jQuery were used in the design implementation.

​

Project evaluation

 

Overall, the project got very positive reception. Particularly the way the design simulated a 3D environment despite using tools meant for 2D, clearly resonated a Virtual Reality environment. The simple design with less use of text was a great consideration bearing in mind the user in a VR setting.

 

Points of improvements noted was putting descriptions of the lessons in the buttons or in the Info column.

 

Other ideas for future implementation of the system include providing more lessons and areas of studies, and adding the sound and audio features. It would also be worthy to consider prototyping the design using tools meant for VR and testing these to the users. The end goal could also be implementing the system in actual VR technologies.

​​