In general usage, most users tend to hold their phones in portrait orientation for general tasks like browsing, messaging, and social media.
When watching videos, users often switch to landscape orientation, especially for longer content and more immersive mobile games often encourage landscape use.
In my experience, I have found that most interactive virtual tours are best suited to portrait orientation especially when there are popup windows with text and or images.
In landscape orientation, the user interface of the web browsers displaying the Virtual Tours doesn’t leave much screen real estate for the display of information. Still, it is acceptable for viewing just the panoramic node.
Mobile Landscape
To that end, I’ve designed a function called, Mobile Landscape that has a number of variations for the Landscape orientation.
The variations fall under two categories; Display Current Node and Display Image. The current node shows the active node when the mobile phone was turned into the landscape orientation. The display image shows a still image assigned to the Mobile Landscape.
All settings are made in the Edit Skin Configuration window.
Display Current Node:
#1. Single Node - No Interaction: If the user is viewing a node in Portrait and changes to Landscape the UI is hidden and the user sees just the panorama but any interaction with the panorama is disabled.
#2. Single Node - with Interaction: If the user is viewing a node in Portrait and changes to Landscape the UI is hidden and the user sees just the panorama that they can pan around and zoom into.
#3. Current Node with Previous/Next buttons: The same as above with the addition of Previous/Next buttons that allow them to move through the different nodes of the tour.
#4. Display Title: Display a text Title over the current panorama.
Interaction with the underlying panorama is active and the previous/next buttons can be used.
#5. Display Instructions: Displays, over the current panorama, a graphic showing a rotation symbol. Checking “Display Instructions” automatically hides the previous/next buttons and disables interaction with the panorama.
#6. Instructions: Displays call to action text, such as, “Please rotate the device to portrait to view the Virtual Tour”.
#7. Blur Filter: Adds a CSS filter (Blur) over the current panorama but under the Display Title and or Instructions & Graphic. Stops interaction with the panorama.
Display Image:
#1. Display Image - Image Name: By checking Display Image: and adding the name of the image (with extension) adds an image to the Mobile Landscape.
Other elements of the Mobile Landscape can be added including; Title, Display Instructions and Instructions.
And Blur.
This concludes the Mobile Landscape post.
