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 is 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.
In Mobile Landscape we will cover the following topics:
Display Current Node:
#1. 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.
In this scenario all options in the MOBILE LANDSCAPE section of the Edit Skin Configuration window are empty.
#2. 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.
In this scenario the “Disable Interaction” option in the MOBILE LANDSCAPE section of the Edit Skin Configuration window is checked.
#3. Current Node with Previous/Next buttons: ⇑
The same as scenario #1 with the Previous/Next buttons checked. This allows forward and back movement through the different nodes of the tour.
Note: if the user hasn’t clicked through the Splash Screen the Previous/Next buttons are hidden but the user can still interact with the panorama
#4. Display Title: ⇑
This options displays a text Title over the current panorama.
Note: the text box has Word wrap and Auto size enabled and will expand to 90% of the screen.
Interaction with the underlying panorama is active and the previous/next buttons can be used in conjunction with the Display Title.
#5. Display Node Title: ⇑
This options displays the current Node Title over the current panorama.
Note: When the Display Node Title is active the Display Title is hidden
#6. Display Instructions Image: ⇑
Displays, over the current panorama, a graphic showing a rotation symbol.
Note: Checking “Display Instructions” automatically hides the previous/next buttons and disables interaction with the panorama.
#7. Instructions: ⇑
Displays call to action text, such as, “Please rotate the device to portrait to view the Virtual Tour”.
Note: requires the Display Instructions Image to be active
#8. Blur Filter: ⇑
Adds a CSS filter (Blur) over the current panorama but under the Display Title and or Instructions & Graphic.
Note: Prevents any interaction with the panorama.
#9. 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.
