Design patterns for Immersive Tech

Virtual Reality patterns

Grab and scroll

User goal

Allow the user to see more options on a menu or list than what is visible on the screen in one go

Interaction

On mobile phone and desktop computers we are used to scrolling down a page to see more information. Although this is very common, it’s something that does not immediately work as well in VR. One reason is that users may not expect to scroll down a page the same way they do on other devices. We can’t scroll real physical objects such as books. The information you see on a physical page is what’s there and VR models itself on this kind of physical skeuomorphism, so this may reduce expectations of scrolling. However, scrolling is a useful feature and VR is still a digital medium so we can offer scrolling if we feel it helps the user. The other reason scrolling does not always work in VR is that the interaction is different and there are some usability issues we see users encounter.

This pattern looks at the ‘grab & scroll’ interaction.

A) Using hand to grab

  • The user is interacting with a menu of options
  • The possibility of scrolling is indicated with a scroll bar in the same way we’d expect on a website browser or in a Windows application (a left hand side scroll bar showing the current position, and the amount of scrolling that is possible)
  • The user moves their hand to physically touch the scroll bar. They need to put their hand on the scroll position indicator.
  • The user uses the grab button on the controller (or any button that’s been configured to show selection intent, and is generally consistent with the platform)
  • Once their hand has grabbed the scroll indicator, they can move their hand up or down to scroll the page
  • Once they have scrolled to where they want to, they release the ‘grab’ and step away to view the information

Please also see the spin scrolling pattern for a more VR friendly solution to scrolling:

Good

  • It’s familiar in appearance for most users, so they are likely to recognise that scrolling is possible
  • It does allow more information to be accessed without having to navigate to a different page or tab in the menu

Bad

  • The level of usability is generally poor
  • Grabbing a virtual scroll bar in 3D space with no haptic feedback is difficult. The user grabs to deep or too shallow rather than precisely where the bar is. This can be fixed by increasing tolerance or by providing haptic feedback as the hand interacts with the bar.
  • It’s hard to see how the information is scrolling. The user has to come in close to grab the scroll bar so they often cannot see the whole content art of the panel.They are too close to read it. They cannot scroll and scan the info at the same time. They need to take a step back to read it comfortably. This could be fixed by designing the content to be viewed from much closer in i.e. a smaller panel with smaller text. It’s also possible to modify the pattern to allow users to grab with a ray-cast instead of the hand.

B) Using ray cast to grab

  • The user aims the ray cast at the scroll bar/ indicator
  • The scroll bar indicator may change colour or glow to indicate it can be selected
  • The user presses the trigger or other designated action button to ‘grab’ the the scroll indicator
  • Whilst holding the trigger/ action button, the user moves the controller up/ down or left/ right to quickly control the degree of scrolling
  • The content scrolls proportionally to the user action.

Good

  • The user can interact from any distance without having to step into the menu
  • Generally much a easier, smoother and more accurate way to scroll in VR

Design challenges

It’s important to consider if scrolling is really necessary. It’s often used on websites and mobile apps because it is less effort than clicking through to a second page or tab. However, in VR it can be more effort to scroll if using hand interaction, and it would be less effort to have pagination buttons (see the arrow buttons in Facebook Spaces).

Examples

Thrill of the Fight main menu

Raw Data main menu: For large menus that need to be viewed at distance, tabbing through screens using a ray cast is often more efficient and usable than stepping forward to ‘grab & scroll’ down the page.

Steam VR Home: Horizontal grab and scrolling using ray cast

Steam VR Home: Using ray cast and arrow buttons to scroll