Interaction Design & UI

Laura Natali Sotomayor

Within the magazine we have different sections, and in each of them host different format of content. For example: we have articles that we could share, discuss or save, the reading option with Watson, we can visualize 3D contents or 2D content and 360º videos.

12.1 User Interface (UI)

The 2D panels (a static UI) allow us to navigate between the contents of a magazine and when we chose a magazine, we are able to go deeper in each news. Each news selected show us an interactive and immersive content.

We followed some Law of UX by Jon Yablonski in order to build a great user interface and improve the user experience.

As you can see below, we defined:

  • Control buttons: active, disabled buttons and hover buttons.
  • Avenir typography: it has a good quality in VR.
  • UI colors: colors were chose following the brand color.

We applied JAKOB’S LAW for our 2D panel design because “By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models.”-by Jon Yablonski

12.2 UI Interaction

We try to make an user interface useful and enjoyable for users.

How did we do that?

We used the VR gaze pointer in order to interact with the content selected, that means you do not need a controller if you want to interact with a menu, the environment or any object.

Interaction_AlmudenaLopez | Click here

To add, users would know when the selection is finished thanks to the countdown (we established a 2 seconds timing)and the sound at the end.

12.3 Navigation and Interaction | 3D content

Some of these panels send us small 3D content in front of us with which we can interact. We can play with objects that evolve according to our hours of use (gamification) or even receive rewards as virtual objects when visiting the publications of the main brands.