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:

• Places panel
• 3D map
• Your description balloons

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:

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.

• Double-clicking a placemarks flies you to its current default view. If you haven't explicitly set one, this view could be too close to the placemark.
• Pick a perspective for each placemark. Don't get too close if the surrounding satellite imagery is low-resolution; if there is high-resolution imagery, make the best of it!
• Don't alway look straight down! Tilt the camera to capture the local terrain or match the perspective from real photos in the placemark's description balloon.
  
  
  
  
  
  
• To set a placemark's default view right-click on a placemark, either on the map or in the Places panel, and choose Snapshot view.

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:

• Use regions to control when placemarks become visible. For help getting started with regions, check out the Regions section of the KML 2.1 Tutorial and the Avoiding Overload with Regions tutorial on this site.
• Combining network links and regions provides a powerful method of dynamically delivering content to visitors based on their location. Learn more in the Smart Loading of Region-Based Network Links section of the KML 2.1 Tutorial.
• You don't have to put everything in one KML or KMZ file. Include links to other KML or KMZ files in your placemark balloon descriptions for the visitors to download on-demand.

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:

• Use custom icons. Google Earth makes it easy to use your own images as icons. Here are some custom icons from the Featured Content layer:
  
  
  
  
  
• Select different icons for different types of locations. You might use one icon for major hospitals and another for smaller field clinics.
  
• Don't use an icon if a text label would be better. If a placemark has no description for visitors to read, click No Icon on the Icon properties window. (To display the Icon properties window, right-click the placemark, select Properties and then click the icon to the right of the Name field).
  
  
  
   

  See Nimrud from the Global Heritage Fund's Global Awareness layer for examples of text-only labels.

• If you don't want your icon to have a square shape, use transparency when you save the images, as shown in the following examples from the Global Awareness layer.
  
  GIF and 8-bit PNG images support areas of basic, on/off transparency, and 256 colours. 24-bit PNG images support alpha-transparency (partial transparency; translucent appearance), 16 million colours and are the best choice for Google Earth icons.
  
  
  
  
  
  
• Icons on the 3D map are ideally 64 x 64 pixels. For larger or smaller icons use 32 x 32, 128 x 128, and other dimensions that are factors of two (2^x), because they scale better in Google Earth.
  
• Keep it simple. Avoid using text in the icon, as it will be illegible at small scales.
  
• Select a clean design that will inform without being distracting.

Choose colours carefully.

• Use different colours for lines, polygons and icons to visualise data or represent classes of locations.
  
  See this example from the Crisis in Darfur layer which uses different coloured polygons to represent displaced people and refugee camps, as well as different coloured icons to represent partially damaged and completely destroyed villages:
  
  
  
  
  
  
• Choose colours for icons and line/polygon features that contrast with the satellite imagery in the background.
  
  The use of yellow lines in the Global Heritage Fund layer stands out against the green forest in the background.
  
  
  
  

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:

• An overview of your organisation and work.
• Screenshots of the Places panel or time slider to guide visitors to the best way to navigate your content.
• Explain the use of icons or colours used in your KML.

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

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 slightly different balloon design to indicate different types of placemarks. Consider using distinct border colours to denote environmental threat levels or programmes on different continents. You could also use more ornate layouts for different levels of hierarchy within your content, such as international, national, regional and local offices, research locations or humanitarian aid projects.
• Use a header. Create a banner with your organisation's logo and either a consistent colour or an eye-catching photo for the top of each balloon.
• Include a footer. Always put your organisation's name, a link to your website and a copyright notice at the bottom of all your balloons. Use a grey or light colour font, so that the footer text is accessible but not distracting.
• Use colour schemes from your organisation's website to help create a cohesive experience.
• Take advantage of text colour. Use colour to add or diminish emphasis to titles and captions.
• Use standard icons, such as the KML icon, if your balloon includes links to such additional content.

Use <BalloonStyle> to standardise you 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.

Use <BalloonStyle>to colour the entire balloon.

By using the <bgcolor> and <textColor> tags with <BalloonStyle>, you can specify a background colour for the entire balloon. You enter 8-digit hex codes for colours, 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 colour in Google Earth:

• Try the KML Colour Picker.
• If you know the HTML colour code you want to use, swap the last two characters with the first two characters, and add "FF" to the beginning to make this a fully opaque colour. For example: for HTML colour: #0066CC, use FFCC6600 (FF + CC6600).
  
  

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.

• By default, Google Earth shows the first two lines of a placemark's description below its name. This is called a Snippet. Reclaim this often wasted space by specifying an empty snippet in your KML as follows:

• <Placemark>
    <name>My placemark</name>
      <Snippet></Snippet>
    <description>Lots of interesting information!</description>
    ...
  </Placemark>
  

  

  Example of a Blank Snippet

Choose informative names.

• Often, when you save your KML project, Google Earth saves your features into a <Document> container. You'll recognise a document by its icon:
  
  By default, a document's name is the same as the name of the KML file itself. This name is often uninformative, if not confusing. Avoid using characters that are illegal for file names ( / ? < > \ : * | ). If you try to save a folder named "Offices: 2007" or "Local/Regional", Google Earth won't let you save the feature. You can fix this problem by re-opening the KML file, renaming the top-level document and saving it, thus overwriting the original file.
• Below is an example of a good and bad name for a document - "bgColour Examples" versus "ux_bgcolour.kml".
  
  
• 

Use list icons to better convey contents and purpose.

• By using <ListStyle> and <ItemIcon>, you can change the default icons for folders, documents, placemarks, and other features.
• Brand your layers by using your organisation's logo for the top level documents and folders. This technique is especially useful if you want to hide the content of a folder but want that folder to visually represent the placemarks it contains. (See "Avoiding clutter" below for more information about hiding the contents of a folder).
• List icons are scaled down to 16 x 16 pixels, so, for the best results, use images with those exact dimensions.
• See the official KML 2.1 Reference and the examples below
  
  
  
  
  
  

  ListStyle Example: The "custom folder icon" folder uses <ListStyle> to specify a red cross icon, informing visitors that the contents might be clinics or hospitals.
  
  

Avoiding clutter: Control the behaviour of your folders.

• Keep the list view of your KML file short and organised.
• Include no more than 2-3 levels of hierarchy within your documents.
• Where exposure of certain placemarks is important, save the KML with the folders open; otherwise, leave them closed.
• Control the contents of a folder from the list view using the <ListStyle> and <listItemType> tags.
  • Radio folders allow visitors to turn on only one item in a folder at a time.
  • Check Hide Children for folders to conceal their contents – a great idea if you have hundreds or thousands of placemarks inside!
  • Check Off Only so folders can be turned off, but not turned on – great for folders that have lots of models or intense polygons and paths. Visitors can't turn on everything at the same time and overwhelm Google Earth.
  
  

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

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?

• Building Better Balloons
• Avoiding Overload with Regions
• Packaging Content in a KMZ File