Page 1

SECTIO N 3 .0

VR UI - Dashboard Concept 1 - The Grid

“The Grid” follows in the footsteps of more tesated, mature VR platforms such as the Oculus Store and Google’s Daydream. Grids are an easy to understand concept often found on desktop, so navigation becomes more intuitive.

+20º

A standardized grid allows for - easy eye tracking and scanning - easy expansion of tiles to fill multiple zones of the grid for hierarchy purposes (example: promotion of specific piece of content)

-47º

On Now

+47º

+20º

HISTORY

MY LIBRARY

POSTER FRAME

LIVE VIDEO POSTER FRAME

GUIDE

S00 E000 | 000m

RECENT

LIBRARY

360 VIDEO

POSTER FRAME

POSTER FRAME

S00 E000 | 000m

17

POSTER FRAME

S00 E000 | 000m

POSTER FRAME

PG-13 | 000m

POSTER FRAME

S00 E000 | 000m

HOME

-12º

DLabs | VR MODE UX/UI

POSTER FRAME

S00 E000 | 000m | Episode Name Show Name | TVMA | Genre

POSTER FRAME

PG-13 | 000m

S00 E000 | 000m

360 VIDEOS

S00 E000 | 000m

PG-13 | 000m

-12º

A user would enter the Dashboard State under Scenario 1 as described on Page 6, or by pressing the “Home” button on their GearVR or Daydream clicker while in VR.


SECTIO N 3 .0

VR UI - Dashboard Concept 1 - The Grid

The right side scale shows distance from the viewer that objects should reside. The diagram shown is an estimate only, to show desired separation for 3D effect in VR. 4

On Now

HISTORY

MY LIBRARY

POSTER FRAME

2 LIVE VIDEO

1

POSTER FRAME

POSTER FRAME

5

GUIDE

S00 E000 | 000m

RECENT

LIBRARY

360 VIDEO

POSTER FRAME

PG-13 | 000m

S00 E000 | 000m

S00 3 E000 | 000m | Episode Name Show Name | TVMA | Genre

POSTER FRAME

S00 E000 | 000m

PG-13 | 000m

Actual distace from viewer will need to be tweaked in Unity and tested to what feels right with regards to positioning of main elements within field of view.

360 VIDEOS

POSTER FRAME

S00 E000 | 000m

POSTER FRAME

S00 E000 | 000m

Other tweaks to various elements such as scale of nav icons and font labels will need to be experimented with until achieving a final solutokn that feels corect.

POSTER FRAME

PG-13 | 000m

POSTER FRAME

S00 E000 | 000m

HOME

20m

Note: 3D effect is lost beyond 20m. Anything closer to the viewer than 0.5 meter feels too close and uncomfortable.

18

30º

30º

47º

47º

1

Live Video

2

3 x 3 Post Frame Grid

3

Live Video Title and Labels

4

Tab Labels

5

Icon Navigation

10m

4 3

5

70º

70º {0.5m

POV

DLabs | VR MODE UX/UI

2

1


SECTIO N 3 .0

VR UI - Dashboard Concept 2A - Rails

“Rails” mirrors the rail behaviors found within the mobile app. This translates to navigation familiarity when switching from mobile to VR, as it resembles a UI the user is already familiar with.

+20º

-47º

On Now

+47º

+20º

Watch HISTORY

POSTER FRAME

S00 E000 | 000m

PG-13 | 000m

LIVE VIDEO

MY LIBRARY

POSTER FRAME

POSTER FRAME

POSTER FRAME

S00 E000 | 000m

POSTER FRAME

S00 E000 | 000m

POSTER FRAME

S00 E000 | 000m

POSTER FRAME

000m

360 VIDEOS

S00 E000 | 000m | Episode Name Show Name | TVMA | Genre

000m

GUIDE -12º

POSTER FRAME

RECENT

LIBRARY

360 VIDEO

POSTER FRAME

000m

POSTER FRAME

000m

19

POSTER FRAME

000m

HOME -12º

DLabs | VR MODE UX/UI

S00 E000 | 000m

PG-13 | 000m

POSTER FRAME


SECTIO N 3 .0

VR UI - Dashboard Concept 2B - Rails

“Rails” mirrors the rail behaviors found within the mobile app. This translates to navigation familiarity when switching from mobile to VR, as it resembles a UI the user is already familiar with.

+20º

-47º

360 Videos

On Now

+47º

+20º

History

ALL

FAVORITES

RECENT

CURATED

20 POSTER FRAME

POSTER FRAME

000m

LIVE VIDEO

POSTER FRAME

S00 E000 | 000m

PG-13 | 000m

POSTER FRAME

S00 E000 | 000m

POSTER FRAME

My Library

POSTER FRAME

S00 E000 | 000m | Episode Name Show Name | TVMA | Genre

-12º

LIBRARY

360 VIDEO

POSTER FRAME

S00 E000 | 000m

PG-13 | 000m

RECENT

WATCHLIST

0º POSTER FRAME

000m

GUIDE

DVR

POSTER FRAME

S00 E000 | 000m

HOME -12º

DLabs | VR MODE UX/UI

000m

ALL


SECTIO N 3 .0

VR UI - Dashboard Concept 2B - Rails

The main highlight with Rails is that the two rails of poster frames bend around the sphere, behind the user. As the user advances the rails from right to left, they disappear under the gray bars.

2

360 Videos

On Now

History

ALL

FAVORITES

RECENT

POSTER FRAME

POSTER FRAME

000m

1

3

POSTER FRAME

LIVE VIDEO

6My Library

S00 E000 | 000m | Episode Name Show Name | TVMA | Genre

4

000m

S00 E000 | 000m

PG-13 | 000m

000m

POSTER FRAME

POSTER FRAME

ALL

POSTER FRAME

RECENT

LIBRARY

7

360 VIDEO

POSTER FRAME

S00 E000 | 000m

Other tweaks to various elements such as scale of nav icons and font labels will need to be experimented with until achieving a final solutokn that feels corect.

WATCHLIST

POSTER FRAME

S00 E000 | 000m

PG-13 | 000m

GUIDE

DVR

Actual distace from viewer will need to be tweaked in Unity and tested to what feels right with regards to positioning of main elements within field of view.

CURATED

5

5

POSTER FRAME

S00 E000 | 000m

HOME

20m

5

3

21

6

4

47º

2

10m

7

70º

70º {0.5m

POV

1

360 Video list items

2

360 Video Labels

3

Live Video

4

Live Video Title and Labels

5

Rails

6

Rail Labels and Filters

7

Navigation

DLabs | VR MODE UX/UI

1

Note: 3D effect is lost beyond 20m. Anything closer to the viewer than 0.5 meter feels too close and uncomfortable.

30º

30º

47º

The right side scale shows distance from the viewer that objects should reside. The diagram shown is an estimate only, to show desired separation for 3D effect in VR.


SECT IO N 3 .0

VR UI - Dashboard User Flow

15

DLabs | VR MODE UX/UI


SECTIO N 3 .0

VR UI - Dashboard Concept 1 - The Grid

Ensuring UI Readability UI elements not on a background need to have a thin black stroke applied to ensure readability on a range of background tonality, from light to dark.

Content Types There are three content types in VR Mode: TV Shows, Movies and 360 Video. All share the 16:9 aspect ratio poster frame.

This becomes important when providing various environments to view content in as well as the change in environmental lighting when watching content vs. exploring content.

Each has two states: Unwatched, or Resume, which is distinguished by its progress indicator. Each has its own distinct details about its content as well, further distinguishing the content types, such as rating for Movies, or episode and season number for TV Shows.

16 POSTER FRAME

PG-13 | 000m MOVIE - U NWATC H E D

PG-13 | 000m MOVIE - RE SU M E

S00 E000 | 000m TV SH OW - U NWATC H E D

000m 360 VIDE O - U NWATC H E D

POSTER FRAME

POSTER FRAME

S00 E000 | 000m TV SH OW - RE SU M E

POSTER FRAME

S00 | 000 Episodes TV SH OW - SE RIE S FOL DE R

000m 360 VIDE O - RE SU M E

DLabs | VR MODE UX/UI

POSTER FRAME

POSTER FRAME

POSTER FRAME

Vrmode ui ux v1 ui  
Vrmode ui ux v1 ui  
Advertisement