Création d'une expérience utilisateur immersive

Google Earth vous permet de transposer votre contenu dans un contexte géospatial. Plus important, il vous donne la possibilité de raconter des histoires. Dans ce didacticiel, vous découvrirez comment rendre votre contenu facile d'accès, comment renforcer son intérêt et comment en faciliter la navigation.

L'interface de Google Earth

Les visiteurs peuvent interagir avec votre contenu par l'intermédiaire de l'interface de Google Earth de trois manières différentes, en sélectionnant l'un des éléments suivants :

panneau Lieux
Carte 3D
Vos infobulles descriptives

Zones de l'interface utilisateur de Google Earth

Pour que vos visiteurs profitent d'une expérience réellement immersive en visionnant votre contenu, vous devez prendre en considération la manière dont ils exploreront celui-ci. Commencez par analyser la carte dans la vue 3D, explorez quelques infobulles et examinez les options du panneau Lieux. Assurez-vous que votre conception s'appuie solidement sur la carte elle-même.

Voici quelques exemples de contenus qui offrent au visiteur une expérience réellement immersive :

Logo KML Sky Truth Green Valley

Logo KML Crise du Darfour

Faites une bonne première impression

La première chose que les gens voient lorsqu'ils ouvrent un fichier KML ou KMZ, ce sont les icônes, les modèles, les superpositions d'image et les polygones qui s'affichent dans la vue 3D de Google Earth. C'est à vous de les séduire et de leur donner envie de découvrir votre contenu. Vous trouverez ci-dessous des conseils pour faire une bonne première impression.

Prenez des captures d'écran de vos repères.

Définir un point de vue par défaut approprié pour vos repères et dossiers est essentiel pour obtenir une expérience utilisateur satisfaisante.

Lorsque vous double-cliquez sur un repère, la visionneuse affiche le point de vue par défaut. Si vous n'en avez pas spécifié un explicitement, ce point de vue peut se trouver trop près du repère.
Choisissez une perspective appropriée pour chaque repère. Ne vous approchez pas trop du repère si la résolution des images satellite est faible ; en revanche, si la résolution est élevée, profitez-en !
N'utilisez pas systématiquement une vue plongeante. Inclinez la vue pour que le relief environnant soit visible ou alignez-la sur la photo de l'info-bulle du repère.
Pour définir le point de vue par défaut d'un repère, cliquez dessus avec le bouton droit de la souris, soit dans la carte, soit dans le panneau "Lieux", puis sélectionnez Utiliser la vue actuelle.

Ne submergez pas les visiteurs.

Une quantité trop importante de repères peut gêner même les utilisateurs les plus chevronnés. Voici quelques idées pour que le nombre de repères reste raisonnable :

Utilisez les régions pour contrôler le moment où les repères deviennent visibles. Pour obtenir de l'aide concernant l'utilisation des régions, reportez-vous à la section Régions du Didacticiel KML 2.1 et au didacticiel Utilisation des régions pour éviter les surcharges sur ce site.
La combinaison des liens réseau et des régions est une méthode efficace pour proposer dynamiquement un contenu différent aux visiteurs en fonction du lieu où ils se trouvent. Pour en savoir plus, reportez-vous à la section Chargement intelligent de liens réseau basés sur les régions du Didacticiel KML 2.1.
Vous n'êtes pas obligé de placer tout votre contenu dans un seul fichier KML ou KMZ. Incluez des liens vers d'autres fichiers KML ou KMZ dans les descriptions de vos infobulles pour que les visiteurs les téléchargent seulement s'ils le souhaitent.

Utilisez vos icônes pour transmettre des informations.

Il est possible de transmettre une grande quantité d'informations avant même qu'un visiteur n'ait cliqué sur un repère. Voici quelques astuces pratiques pour utiliser les icônes de manière efficace :

Utilisez des icônes personnalisées. Dans Google Earth, il est très facile d'utiliser vos propres images comme icônes. Voici quelques icônes personnalisées issues du calque "Contenu sélectionné" :
Utilisez des icônes distinctes pour les différents types de lieux. Utilisez une icône pour les hôpitaux et une autre pour les cliniques.
N'utilisez pas une icône dans les cas où un libellé serait plus approprié. Si aucune description n'est définie pour un repère, cliquez sur Aucune icône dans la fenêtre des propriétés de l'icône. (Pour afficher la fenêtre des propriétés de l'icône, cliquez avec le bouton droit de la souris sur le repère, sélectionnez Propriétés, puis cliquez sur l'icône à droite du champ Nom).

Examinez la ville de Nimrud, dans le calque Sensibilisation mondiale du Global Heritage Fund pour voir des exemples de repères comportant uniquement du texte.
Si vous ne souhaitez pas que votre icône soit carrée, utilisez la transparence au moment de sauvegarder les images, comme illustré dans les exemples suivants, tirés du calque Sensibilisation mondiale.

Les images GIF et PNG 8 bits acceptent les zones basiques, transparence activée/désactivée et 256 couleurs. Les images PNG 24 bits acceptent la transparence alpha (transparence partielle, apparence translucide) et 16 millions de couleurs. Elles constituent le meilleur choix pour les icônes Google Earth.
Dans l'idéal, les icônes affichées sur la carte 3D mesurent 64 x 64 pixels. Si vous souhaitez utiliser des icônes plus petites ou plus grandes, utilisez des tailles de 32 x 32, 128 x 128 ou toute dimension qui serait un facteur de 2 (2^n), car elles s'afficheront mieux dans Google Earth.
Restez simple. Évitez d'utiliser du texte dans l'icône, car il sera illisible à petite échelle.
Sélectionnez une mise en page claire qui sera informative sans distraire l'attention du lecteur.

Choisissez les couleurs avec soin.

Utilisez différentes couleurs pour les lignes, polygones et icônes pour voir les données ou représenter des classes de lieux.

Observez cet exemple de calque Crise du Darfour qui utilise des polygones de différentes couleurs pour représenter le déplacement de la population et les camps des réfugiés, et des icônes de différentes couleurs pour les villages partiellement endommagés ou complètement détruits.
Pour les icônes, les lignes et les polygones, choisissez des couleurs qui contrastent avec l'imagerie satellite de fond.

Les lignes jaunes des calques Global Heritage Fund ressortent sur la forêt verte, au fond.

Créez des infobulles qui ressortent

Une fois que l'un de vos visiteurs a ouvert l'un de vos repères, vous devez vous efforcer de retenir son attention. Rien de tel que les descriptions de repère pour apporter encore plus d'informations à propos d'un site en particulier ou même pour guider les visiteurs vers d'autres repères et votre site Web.

Incluez un repère de présentation.

Vous connaissez votre contenu mieux que quiconque, il est par conséquent très facile d'oublier que les autres ont besoin d'aide pour le découvrir. Envisagez d'inclure un repère de présentation qui servira de guide pour utiliser vos fichiers KML. Mettez en évidence les différents composants de votre contenu. Suggestions d'informations :

Une présentation globale de votre organisation et de votre travail ;
Des captures d'écran du panneau Lieux ou un curseur chronologique pour aider les visiteurs à naviguer au mieux au sein de votre contenu ;
Une explication des icônes ou des couleurs employées dans votre fichier KML.

Voici des exemples de guide de l'utilisateur et de repère de présentation tirés des calques Sensibilisation mondiale (Global Heritage Fund et Crise du Darfour).

Restez concis et courtois.

Les meilleures infobulles séduisent l'utilisateur en proposant une courte description avec des liens pour plus d'informations. Vous pouvez toujours guider l'utilisateur vers votre site pour obtenir toute l'histoire ou les inviter à télécharger d'autres fichiers KML avec des informations plus détaillées.

Dans cette optique, utilisez des infobulles de taille raisonnable. Mettez tout votre contenu dans un tableau HTML ne dépassant pas 400-500 pixels de large. Cette opération permet de s'assurer que les infobulles ne sont pas trop volumineuses pour les petits écrans et qu'il reste un peu d'espace pour que l'utilisateur puisse encore voir la carte et cliquer dessus.

Conservez un style homogène.

Une apparence homogène de vos info-bulles oriente les visiteurs. Commencez par des modèles que vous pouvez créer avec le didacticiel Création d'info-bulles plus efficaces. Pour développer vos propres modèles, gardez à l'esprit les conseils suivants :

Utilisez des types d'infobulles légèrement différents pour signaler des types de repères différents. Pensez à utiliser des bordures de couleurs différentes pour marquer les niveaux de menace pour l'environnement ou les programmes sur les différents continents. Vous pouvez également utiliser des mises en page plus riches pour différents niveaux hiérarchiques au sein de votre contenu, tels que les bureaux internationaux, nationaux, régionaux et locaux, les lieux de recherche ou les projets d'aide humanitaire.
Utilisez un en-tête. Créez une bannière avec le logo de votre organisation et la même couleur ou une photo accrocheuse en haut de chaque infobulle.
Incluez un pied de page. Mentionnez toujours le nom de votre organisation, un lien vers votre site Web et un copyright en bas de toutes vos infobulles. Utilisez une police de couleur grise ou claire pour que le texte du pied de page soit accessible sans distraire l'attention.
Utilisez les jeux de couleurs du site Web de votre organisation pour créer une expérience cohérente.
Tirez parti du texte en couleur. Utilisez la couleur pour augmenter ou diminuer l'importance des titres et des légendes.
Utilisez des icônes standard telles que l'icône KML si votre info-bulle contient des liens vers un contenu supplémentaire de ce type.

Utilisez <BalloonStyle> pour normaliser vos en-têtes et pieds de page.

Pour ajouter facilement des en-têtes et des pieds de page homogènes à toutes vos info-bulles, utilisez les balises <BalloonStyle> et <text>. Ces balises vous permettent de créer un modèle HTML qui sera appliqué à tous vos repères. Vous pouvez inclure dans le modèle des descriptions spécifiques à chaque repère. Cela vous aidera à différencier les éléments communs à toutes vos infobulles du contenu spécifique de chaque repère.

Logo KML L'exemple KML de Santa Cruz, Bolivie vous montre comment les repères peuvent utiliser <BalloonStyle> pour les en-têtes et pieds de page. (Cet exemple est une modification du calque PNUE : Atlas de l'évolution de notre environnement.)

Utilisez <BalloonStyle> pour colorer l'ensemble de l'info-bulle.

Les balises <bgcolor> et <textColor> associées à la balise <BalloonStyle> permettent d'attribuer une couleur d'arrière-plan à l'intégralité de l'info-bulle. Pour les couleurs, saisissez un code hexadécimal à 8 caractères, tel que AABBVVRR (R - rouge, V - vert, B - bleu, A - alpha-blending). Ce code diffère du code habituel à 6 caractères employé en HTML (RRVVBB). Voici deux façons de choisir une couleur d'arrière-plan dans Google Earth :

Essayez le KML Color Picker (en anglais).
Si vous connaissez le code HTML de la couleur voulue, échangez les deux derniers et les deux premiers caractères, puis ajoutez "FF" au début pour que la couleur soit complètement opaque. Par exemple, pour la couleur HTML #0066CC, écrivez FFCC6600 (FF + CC6600).

Capture d'écran - Info-bulle avec arrière-plan de couleur bleue

Logo KML Blog sur les chimpanzés de Gombe et exemples de couleurs d'arrière-plan (modification du blog sur les chimpanzés de Gombe de Jane Goodall).

N'oubliez pas le panneau Lieux !

Même si l'attention de beaucoup de visiteurs est attirée principalement par la vue 3D de Google Earth, il est tout aussi important que votre fichier KML ait une apparence nette et conviviale dans le panneau Lieux.

Utilisez des descriptions courtes (snippets) vides.

Par défaut, Google Earth affiche les deux premières lignes de la description d'un repère sous son nom. C'est ce que l'on appelle une description courte. Récupérez cet espace souvent perdu en spécifiant une description courte vide dans votre fichier KML, comme suit :

<Placemark>
  <name>My placemark</name>
    <Snippet></Snippet>

  <description>Lots of interesting information!</description>
  ...
</Placemark>

Capture d'écran - utilisation d'un nom approprié pour les documents KML

Exemple de description courte vierge

Choisissez des noms explicites.

Souvent, lorsque vous sauvegardez votre projet KML, Google Earth sauvegarde vos éléments géographiques dans un conteneur <Document>. Vous pouvez reconnaître un document à son icône :

Par défaut, le nom du document est celui du fichier KML. Ce nom est souvent peu explicite, voire trompeur. Évitez d'utiliser des caractères qui sont interdits dans les noms de fichier ( / ? < > \ : * | ). Si vous tentez d'enregistrer un dossier intitulé "Bureaux: 2007" ou "Locaux/Régionaux", Google Earth ne vous laissera pas effectuer l'enregistrement. Ce problème peut être résolu en rouvrant le fichier KML, en renommant le document de niveau supérieur et en l'enregistrant en remplaçant le fichier d'origine.
Vous trouverez ci-dessous un exemple correct et un exemple incorrect de nom pour un document : "bgColor Examples" et "ux_bgcolor.kml".

Utilisez les icônes de liste pour mieux transmettre le contenu et l'objectif.

Avec <ListStyle> et <ItemIcon>, vous pouvez modifier les icônes par défaut de vos dossiers, documents, repères et autres éléments.
Identifiez vos calques avec le logo de votre organisation pour les documents et dossiers de premier niveau. Cette technique s'avère particulièrement utile si vous voulez masquer le contenu d'un dossier mais souhaitez que le dossier représente visuellement le repère qu'il contient. (Voir la rubrique "Évitez le désordre" ci-dessous pour plus d'informations sur le masquage du contenu d'un dossier.)
Les icônes de liste sont ramenées à l'échelle 16 x 16 pixels : pour obtenir de meilleurs résultats, utilisez donc des images avec ces dimensions précises.
Consultez la Référence KML 2.1 officielle et les exemples suivants.

Exemple ListStyle : le dossier "icône de dossier personnalisé" utilise <ListStyle> pour définir une icône en forme de croix rouge, ce qui informe les visiteurs que le contenu peut être en rapport avec les cliniques ou les hôpitaux.

Évitez le désordre : contrôlez le comportement de vos dossiers.

Maintenez la vue de liste de votre fichier KML courte et bien organisée.
N'incluez pas plus de 2 ou 3 niveaux hiérarchiques à l'intérieur de vos documents.
Si l'exposition de certains repères est importante, enregistrez le KML avec les dossiers ouverts ; sinon laissez-les fermés.
Contrôlez le contenu d'un dossier depuis la vue de liste avec les balises et .
- Les dossiers avec bouton radio ne permettent aux visiteurs d'activer qu'un élément d'un dossier à la fois.
- Cochez la case HideChildren pour masquer le contenu des dossiers : une fonction bien utile s'ils contiennent des centaines ou des milliers de repères !
- Cochez la case OffOnly pour que les dossiers puissent être désactivés mais pas activés : idéal pour les dossiers qui contiennent beaucoup de modèles ou des polygones complexes. Cela empêche les visiteurs de tout afficher en même temps et de saturer Google Earth.

Consultez la Référence KML 2.1 et le Didacticiel KML 2.1 pour de plus amples informations et étudiez les exemples suivants.

Exemple de type d'élément de liste : ce fichier KML utilise <ListStyle> et <ItemIcon> pour contrôler la façon dont les visiteurs peuvent utiliser les dossiers.

Discussions et commentaires

Vous avez des questions à propos de ce didacticiel ? Vous aimeriez nous faire part de vos commentaires ? Rendez-vous sur le groupe de discussion Google Earth Actions publiques pour partager vos commentaires.

Earth Actions publiques