Creating an Immersive User Experience

Google Earth allows you to put your content into a geospatial context. More importantly, it allows you to tell stories. In this tutorial, you'll learn some ways to make your content accessible, easier to navigate, and more compelling.

The Google Earth Interface

There are three main ways people will interact with your KML through the Google Earth interface:

Areas of the Google Earth User Interface

To design an immersive experience for people viewing your content, consider the most common path that visitors will take. Start by scanning the map in the 3D view, explore a few placemark balloons and discover the full range of options in the Places panel. Make sure your design starts with a solid foundation on the map itself.

Here are examples of KMLs that provide an immersive, high-quality visitor experience :

KML logo Sky Truth Green Valley

KML logo Crisis in Darfur

Make a Good First Impression

The first thing that most people see when they open a KML or KMZ file are the icons, models, image overlays and polygons in the 3D view of Google Earth. It's your job to engage them and get them interested in exploring your content. Below are some tips for making a good first impression.

Take Snapshots of your placemarks.

Setting a good default view for your placemarks and folders is one of the most important things you can do to ensure a good user experience.

Don't overwhelm visitors.

Too many placemarks can be overwhelming, even for the most experienced Google Earth visitor. Here are some ideas for keeping the number of placemarks manageable:

Inform with your icons.

You can communicate plenty of information before a visitor even clicks a placemark. Here are a few helpful hints for using icons effectively:

Choose colours carefully.

Create Balloons That Shine

Once you've got a visitor to open one of your placemark balloons, make the best of their attention. Placemark description balloons are a great way to communicate extra information about a particular location, but they're also a powerful tool for guiding viewers to other placemarks and to your website.

Include an introductory placemark.

You know your content much better than anyone else, so it's easy to forget that others need guidance to explore all of your content. Consider including an introductory placemark to guide the use of your KML file. Highlight the most different components of your content. Some suggestions for what to include:

Here are examples of a user's guide and an introductory placemark from the Global Awareness layer (Global Heritage Fund and Crisis in Darfur).

Example User Guide Example User Guide

Keep it short and sweet.

The best balloons engage the user, offering a brief description with links to additional information. You can always direct the user to your site for the full story or invite them to download additional KML files with more detailed information.

Continuing this philosophy, keep your balloons to a reasonable size. Put all of your content into an HTML table no wider than 400-500 pixels. This helps ensure that the balloons aren't too big on small monitors and that there is a little space left for the user to see and click back to the map.

Maintain consistent style.

A consistent look and feel in your balloons helps to orient your visitors. Get started with some templates you can create with the Building Better Balloons tutorial. As you develop your own designs, keep some of these tips in mind:

Use <BalloonStyle> to standardize your header and footer.

For an easy way to add consistent headers and footers to each of your balloons, check out the <BalloonStyle> and <text> tags. These tags allow you to create an HTML template that is applied to all of your placemarks. You can insert the descriptions unique to each placemark into the template. This keeps the universal elements of your balloon design separate from the content specific to each placemark.


KML logo The Santa Cruz, Bolivia example KML shows you how placemarks can use <BalloonStyle> for the header and the footer. (This example was modified from UNEP's Atlas of Our Changing Environment layer.)

Use <BalloonStyle> to color the entire balloon.

By using the <bgcolor> and <textColor> tags with <BalloonStyle>, you can specify a background color for the entire balloon. You enter 8-digit hex codes for colors, such as AABBGGRR (R - red, G - green, B - blue, A - alpha transparency). This is different than the traditional 6-digit hex codes used in HTML (RRGGBB). Here are two ways to choose a background color in Google Earth:

   Screenshot - Blue balloon background colour

KML logo Gombe Chimp Blog and Background Color Examples (modified from the Jane Goodall'sGombe Chimpanzee Blog)

Don't Forget the Places Panel!

Although many visitors are drawn in by the 3D view in Google Earth, it's also important to keep the view of your KML file in the Places panel organised and useful.

Use blank snippets.

Choose informative names.

Use list icons to better convey contents and purpose.

Avoiding clutter: Control the behaviour of your folders.

See the KML 2.1 Reference and the KML 2.1 Tutorial for more information, and check out the example below.


Screenshot - ListStyle example

KML logo List Item Type Example: This KML uses <ListStyle> and <ItemIcon> to control how visitors can use the folders.

Discussion/Feedback

Have questions about this tutorial? Want to give us some feedback? Visit the Google Earth Outreach Discussion Group to discuss it with others.

What Next?