Get In Touch
London
United Kingdom
Work Inquiries
hello@hillierforshaw.co.uk
@hillierforshaw

VR-UX: Building a video player prototype

Knowledge into practice: 

Today I’m building an interactive VR video player; an integral piece to entertainment apps featuring on demand video. The most important task is understand early on what it is I’m building, how that will be perceived by the end user and its interaction.

Low fidelity: 

I always start with pencil and paper to plan what I create and I love to take the time at this early stage to build a low fidelity visual to not only understand my visual goals but to help calculate where my prototype will sit within the users space and how details will be positioned with the UI for accessability, legibility and comfort.

Wireframe prototype:

It’s time to start thinking about the spacial aspects and working with visualising the UI and within a 3D space. Using various techniques including Augmented Reality I look at various angles, Does the UI balance? Does it sit well within a spacial scene? etc.

Visualising in 3D & Augmented Reality:

Visualising in VR (Basic):

Happy with the UI layout and how the prototype works from a third person perspective I like to visualise from a first person perspective (as a user) to make sure I’m happy before moving on to the next stage.

Designing UI:

Happy with the layout within 3D it’s time to start building all the elements ready for the main build. The first step is vector design (Obviously) and then I look at the coding of the elements including animations & hover states etc.

High fidelity:

Interaction & animation :

Speed and efficiency are paramount and it is important when interacting with a product that the user gets from point A to point B in the fastest way possible. I’ll achieve this with simplicity. There’s no need to waste valuable time by creating waiting time with unnecessary interactions, animations or micro interactions. It’s a good rule of thumb to understand that a user is using the app to get a specific task done.

Aims:

  • Click on video > FadeInUp (UI)
  • buttons hover (video array) > Scale & highlight
  • progress bar > animate to video time

Extra :

I’m happy with the overall prototype and everything is functioning as it should so it’s time to add some finishing touches. I add in a volume slider and the ability to allow the user to slightly curve the video as opposed to its flat original self and add in some UI sounds.

Int_VP_001
Output/tested Quest/Quest2
Engine Unity 2020.1.17f1
Tools Sketch, Cinema4D, SparkAR, C#, Unity
Git Download (Sideload)
I Use Google Anyltics to provide a better User Experience.