Best Practices for Displaying 3D Showcase

Introduction

Matterport 3D Showcase is an online web player through which you and your audience can explore the spaces you have scanned. 3D Showcase is a 3D walkthrough  an innovative and immersive media format through which you can attract, engage, and convert users.

Because a 3D walkthrough is a relatively new format compared to pictures and videos, you may be unclear on how to integrate it into your existing marketing. That’s why we’ve compiled this list of best practices on how to implement 3D Showcase so it can have the maximum effect on your users and your marketing.

As the market leader for 3D walkthroughs, we here at Matterport have learned these lessons after years of experimenting, analyzing, and consulting with the thousands of big and small customers we work with everyday.

The goal of these best practices is to:

  • Reduce your bounce rate
  • Increase exposure (more impressions and visitors)
  • Increase user engagement (more time in space and more scans explored)

Ultimately, these will lead to happier, more informed users and a better business for you.

 

Basic Implementation

First, learn the basics on how to embed 3D Showcase into your website. Learn more.

Next, use URL parameters to fine-tune user behavior when they are inside 3D Showcase. Learn more.

Finally, for any specific content changes such as setting a Start Position, creating a Highlight Reel, adding Mattertag™ Posts, adding Room Labels, etc please open Workshop for that specific space. Learn more

The rest of this guide are guidelines and design tips for you to implement on your end to maximize user engagement.

Remember, if you have a large enough set of visitors, you can also A/B test on any of these guidelines until you find a winning formula.

 

Clear and Direct Call-To-Action to Enter 3D

Goal: Reduce bounce rate

Users who know what they're getting into are more likely to move and explore through the space. By contrast, people who don't know what a 3D walkthrough is will "bounce"  that means they will enter, get confused or not like it, and then leave immediately.

Reduce your bounce rate by signaling a 3D tour to the user instead of immediately putting them into it. Here's how:

  • Make sure the way the user enters 3D Showcase is clear and separate from your normal photo carousel.
  • Write short, concise copy instructing users to enter.
  • Use a clear visual icon to indicate 3D and not 2D photos.

For example, these are clear and direct call-to-actions: 

3d-showcase-cta.png

showcase-custom-start-exploring.png

Here are some examples of a clear and distinct user interface icon.

3d-tour-realtor-com.png

 3d-icon.png

 

Gratify Users Immediately

Goal: Reduce bounce rate, Increase user engagement

Users who want to explore in 3D want to explore right away. If the space takes too long to load, the user is likely to get bored or impatient and then click away.

That's why we suggest you use the quick start URL parameter (&qs=1). Quick start loads the space faster so users can start exploring immediately. This means a lower bounce rate.

However, one drawback is that because there is no fly-in from the Dollhouse to the Start Position, users are less likely to know and Use Dollhouse View. Learn more about the difference. See the difference for yourself below.

Quick start disabled (default behavior):

Quick start enabled:

 

Deliberately Design User Experience to Show How 3D Can Help Users

Goal: Increase user engagement, Align with business goals

A 3D Space should not just be something gimmicky or tacked-on. Take some time to think about the best time and place to show it to the user as they are considering your business. Remember, the 3D Space is a tool to help the user achieve their goals, which are closely connected to your own business goals.

Some tips on good design:

  • Make entrance into the 3D persistent. Generally this is done through a button.
  • Create visual icon that signifies 3D Showcase’s purpose to users.
  • Commanding (yet friendly) and concise copy that tells users why they should enter 3D.
  • Typically the 3D Space is used to give more information or to confirm one's initial opinion after seeing 2D photos.

For example, this is an good way to show persistent iconography and reduce user anxiety. 

home-with-fireplace.png

For example, this is good short copy: “Take a Virtual Tour” or “Explore the 3D Space.”

take-a-virtual-tour.png

 

Make it Easy to Discover Immersive Content

Goal: Increase number of views, Differentiate your busines

By making it easy to discover immersive content, you can increase your total number of views across all of your spaces. 3D content is also a great way to position yourself as cool, innovative, and forward-looking. This can build value in your business' band and differentiate you from your competitors. For example:

costar-3d-tour-burlingame.png

filter-by-3d-on-app.png

 

Encourage User Interactivity

Matterport 3D Spaces are primarily designed as a read-only medium  they are not as interactive as a chat room or a forum. However, they are some things you can do to encourage interactivity.

First, remember to put your contact details (metadata) such as your name, address, phone number, and website for each space in Matterport Cloud (my.matterport.com). Learn more.

Sometimes users may share the 3D Space on social media but not your exact listing page. So people who see the 3D Space first need a way to go back to your website.

metadata-chicago-condo.png

Second, you can creatively place Mattertag Posts at key points in the 3D walkthrough especially at the Start Position. Add links in your Mattertag Posts with CTAs (call-to-actions) that direct users to places you do want them to interact, such as on the listing webpage. You can also send them to form landing pages such as "Sign up for a Open House."

Remember, if you are worried about complying with MLS rules on links and branding then you can add the URL parameter &mls=1 to the end of the URL to remove the offending data and stay compliant. Learn more.

mattertag-open-house.png

Finally, be sure to share cool 3D Spaces you have scanned on your organization's own social media feeds. You can send them to the listing page or directly to the 3D Space itself. Remember to fill the Space Details so more users can connect back to your website.

cool-spaces-on-twitter.png

3D Enablement Technical Implementation

Related articles:

Have more questions? Submit a request