Bespoke Virtual Tour Interface (Skin)

This page explains the various parts of a Bespoke Virtual Tour Interface.  A Virtual Tour is usually constructed from two elements, 360vr Photography and a Graphical User Interface (or skin).  You can read about how we create our 360 Photographs in the article here.

The design process usually starts with a discussion with the client about their ideas and what they hope to achieve with the investment of a Virtual Tour.  From this a brief is produced, the prefered platform for the tour is decided (either a Bespoke Virtual Tour or Google Street View) and work on the design can begin.  For this article we are talking about our Bespoke Virtual Tours, as Google Tours do not require an additional interface.

An interface design can come in many different forms, usually driven by the clients wishes and the size of the Virtual Tour.  The larger the tour the more complex the interface generally will be,  more time is required to plan and build it.  A good interface will allow for easy navigation by the user.

You can view some examples of our Virtual Tour Skins in the video below.


Interact with these yourself on our Virtual Tour page.

Typical Features of a Virtual Tour interface

Virtual Tour Interface

Individual Features

Toolbar

There are many different designs of toolbars, fully customizable to the requirement of the Virtual Tour.

Common toolbar buttons are…

  • Zoom In & Out
  • Left, Right, Up & Down
  • Start/Stop Autorotation
  • Start/Stop Auto Tour – Auto Tour loads each scene in turn, ideal for display at an exhibition or touch kiosk.
  • Info/Help
  • Full Screen – allowing the tour to go full screen.
  • Next/Previous Scene
  • Hide Toolbar/Hotspots/Graphics
  • Navigation Method
  • Social Sharing
  • Floorplans & Googlemaps.
  • Gyro

More information can be found on other tabs on this section of the page.

Virtual Tour Toolbars

Popup and Dropdown Scene Menus

These allow for quick navigation to scenes within the Virtual Tour via popup and dropdown lists.

Examples:

Virtual Tour Popup and Dropdown Menus

Scene Menu for Larger Virtual Tours

When a Virtual Tour has a large number of scenes more thought has to be given to the design of the menu so that users can easily navigate the tour, rather than one big long list.

You can see with a couple Virtual Tours we produced for the University of Exeter.  Each has 3 main categories, in these cases locations or types of accommodation which are then broken down into lists of scenes or sub categories.

Examples:

Bespoke Menus for Larger Virtual Tours

Previous and Next Scene tabs

These allow for quick access to scenes either side of the current one, within a predefined list.  These usually sit at the left and right sides of the interface, though can also be apart of the Navigation Toolbar.

Examples:

Previous and Next Scene Tabs

Next Scene Hotspot Buttons

Hotspot buttons can be placed within the interactive scenes which when pressed will take the user to the corresponding scene.  These are very common within Virtual Tours.  Buttons can take whatever form you like, though often are dots or arrows.  Here are a few that we have used:

Virtual Tour Scene Hotspot Buttons

Thumbnail Scene Navigation

A simple list of thumbnails of each of the scenes can be added to the interface for a visual way of navigating the Virtual Tour.

Examples:

Thumbnail Navigation

Thumbnail Navigation

Floorplans

Hotspots can be added to a floorplan offering users another method of navigating the Virtual Tour.

Examples:

Virtual Tour Floor Plan Finca el Almendrillo

Virtual Tour Floor Plan Exeter Chiefs

Virtual Tour Floor Plan Redrow Property

Google Maps

We can add Google Maps to your Virtual Tour and include hotspot links to 360vr imagery within it.

Example:

Google Maps within a Virtual Tour

Help, Info & Welcome

A popup screen with a Welcome message, Info about the tour or Help with using the controls can be added.  Welcome messages can be added at the beginning of the tour, Help and Info messages are usually accessible via the toolbar – usually a ‘?’ or an ‘i’ button.  Most of our Virtual Tours have this feature.

virtual-tour-help-and-welcome-screen

Hide/Show Skin Elements

Graphical Elements of the interface can be hidden via the click of a button so that the 360vr imagery can be viewed with minimal clutter.  We can choose to turn any of the graphical elements on or off by adding tags to them within the code.   View the Virtual Tour of the Exeter Chiefs stadium for an example of this.

virtual-tour-hide-the-toolbarvirtual-tour-hide-the-hotspots

Auto-Rotation and Auto-Tour

We can set our Virtual Tours to automatically spin and load each scene in turn.  We usually set all of our Virtual Tours to automatically spin on a slow setting, this shows the user that the imagery moves and invites them to interact with it.  Some tours are suitable for Auto-Tour, this enables each scene to load either after a set time or rotation of each scene.  We can place each scene in order within the code so that they load as required.

We can add a button to the toolbar so that you can turn this feature on and off.

Virtual Tour Auto-Tour and Auto-Rotation

Navigation Method

There are two ways of interacting with a 360vr image, either by dragging or pushing it via your mouse or finger.  Our prefered method of interacting with 360vr imagery is by pushing (clicking the mouse and pointing the direction you want to go), though some people prefer to drag… just like with Google Street View.   We can add a button to the Virtual Tour toolbar which allows users to switch between the two methods.

virtual-tour-toolbar-change-control-method

Social Media

Our Virtual Tours can include social media buttons for users to share, usually accessible via a button on the toolbar.  Most of our tours have this feature.

virtual-tour-social-media-linkvirtual-tour-social-media-links

Photography

We can add still photography to our Virtual Tours either via a hotspot which pops up the image when click on, or embedded within the scene ie. a painting on the wall which you might like to show in more detail.

Examples coming soon…

Video

We can add video to our Virtual Tours either via a hotspot which pops up the video when clicked on, or embedded within the scene ie. on a TV screen.  The video can be hosted by websites like YouTube or Vimeo.

Examples coming soon…

Loading Graphics

Animated graphics can be used to show that a scene is loading.  Often a loading bar, perhaps with a loaded percentage or spinning dots.  Business logos can work well here too.  Most of our tours have this feature.
virtual-tour-loading-graphics

Effects

Visual effects can be overlaid on our virtual tours, for example rain or snow.  Also we can add lens flare over bright light sources like the sun, or lights.

Examples coming soon….

Gyroscope

Our Virtual Tours can make use of the gyroscope built into most mobile devices, this allows users to interact with the tour by holding their device up and physically moving it around.  The gyroscope is used when viewing imagery through VR Goggles.   This feature is on most of our virtual tours, and can be turned on and off via a button on the toolbar.

PDF 

We can place PDF documents within our Virtual Tours.  For example look at our tour of the conference rooms at Sandy Park, each of the rooms has a PDF button bottom left which when clicked on opens up a floor plan with room dimensions.

VR Glasses

Our Virtual Tours can be adapted to display on VR Glasses such as Google Card, Oculus Rift, Gear VR etc…

For more information about our Virtual Tour Interfaces please contact us…

    Your name (required)

    Your Email address (required)

    Your Phone number (required)

    Your Website

    Subject of your message

    Your message

    [recaptcha]