Ce document décrit différents modèles de conception et idées pour vous aider à vous familiariser avec Aerial View. Vous devez soigneusement réfléchir à la façon dont vous présentez Aerial View à vos clients afin de vous assurer que vous constatez un bon niveau d'engagement avec le produit et que vos clients en voient sa valeur.
La vue aérienne ajoute un élément visuel attrayant à votre site Web. Elle montre une vue d'ensemble d'une propriété et de ses environs.
Lorsque les utilisateurs voient une propriété en 3D, ils peuvent mieux se rendre compte de son emplacement et de sa taille. Il est également utile de mettre en avant les caractéristiques de la propriété, telles qu'une piscine, des dépendances ou une grande cour, en plus des éléments géographiques à proximité tels que les routes, les plans d'eau, les montagnes ou les parcs.
Renforcer l'engagement
La vue aérienne est un élément qui impressionnera vos clients. Pour en tirer tous les avantages, le contenu doit être aussi facile à découvrir que possible. Dans cette section, nous allons parler de certains modèles de conception d'implémentation pour la vue aérienne afin d'y parvenir.
Orientation de la vidéo
Il est important de tenir compte de l'orientation de l'écran de l'appareil sur lequel la vidéo Aerial View est chargée. L'affichage d'une vidéo en mode paysage sur un appareil mobile peut entraîner une mauvaise expérience utilisateur, en particulier en plein écran. En affichant une vidéo avec un format incorrect pour l'appareil, vous gaspillez une quantité importante d'espace à l'écran.
Les vidéos Aerial View sont fournies en mode paysage et portrait.
Vous trouverez ci-dessous un exemple de différence entre l'exécution de la vue aérienne sur un appareil mobile, dans l'orientation recommandée et dans l'orientation non recommandée:
Fiche informative intégrée
Lorsque vous affichez plusieurs établissements dans une vue de recherche d'établissements, il est utile d'ajouter des fiches flottantes intégrées pour afficher la vidéo de vue aérienne, avec des informations supplémentaires sur l'établissement, telles que l'adresse et le prix superposés. Les utilisateurs peuvent ainsi se faire rapidement et facilement un aperçu de l'établissement, sans avoir à cliquer pour accéder à la page d'informations de l'établissement.
L'exemple ci-dessous montre un repère représentant le complexe Googleplex à Mountain View. Lorsque vous pointez sur ce repère, la fiche informative s'affiche et présente la vidéo de la propriété en vue aérienne.
Vous pouvez ajouter un événement onClick au repère et à la carte flottante intégrée pour rediriger l'utilisateur vers la page d'informations sur la propriété. Les utilisateurs peuvent ainsi facilement en savoir plus sur la propriété et décider si elle leur convient.
Créez une expérience réaliste pour votre propriété
Si vous souhaitez créer une expérience vraiment immersive pour les acheteurs potentiels, vous pouvez présenter votre propriété avec une expérience narrative qui combine des photos et une vidéo en vue aérienne.Vous pouvez créer cela de la même manière qu'un carrousel d'images, en utilisant un mélange de HTML, CSS et JavaScript.
Dans l'exemple ci-dessus, nous avons inclus la vidéo en vue aérienne sur l'une des diapositives, avec un lien en bas pour en savoir plus sur la propriété. Ce bouton doit rediriger l'utilisateur vers la page d'informations de l'établissement.
Le principe est le suivant :
- Choisissez vos photos. Sélectionnez des photos mettant en avant les meilleurs atouts de votre établissement.
- Créez votre vidéo Aerial View.
- Combinez vos photos et vidéos dans une story.
- Partagez votre histoire. Partagez votre histoire avec des acheteurs potentiels sur votre site Web ou dans vos campagnes de marketing par e-mail.
En créant une expérience semblable à une histoire pour votre propriété Showcase, vous pourrez attirer l'attention d'acheteurs potentiels.
Démarrage de la vue aérienne lors du chargement de la page
Dans les études sur l'expérience utilisateur de Google, nous constatons que l'engagement utilisateur est le plus élevé lorsque la vue 3D se charge par défaut. Comme il s'agit d'un nouveau facteur de forme intéressant, nous souhaitons le charger dès qu'un client souhaite consulter les détails de la propriété. En ce qui concerne les coûts, si vous récupérez une vidéo aérienne à partir de l'API, des frais vous seront facturés. Une fois la vidéo demandée, envisagez de la lire automatiquement pour vous assurer que vos utilisateurs en profitent.
Anti-modèle:le fait de masquer la vue aérienne derrière un bouton est considéré comme un anti-modèle, car il oblige les utilisateurs à effectuer une étape supplémentaire pour afficher la vue 3D. Cela peut être frustrant et les empêcher de profiter des avantages des vues 3D ou de considérer la vue aérienne comme un contenu statique.
Il est recommandé de charger Aerial View par défaut lorsqu'un client souhaite afficher les détails de la propriété. Cela leur offrira une expérience utilisateur de qualité et les aidera à prendre une décision éclairée concernant l'établissement. Lorsque vous concevez l'expérience de lecture automatique, gardez à l'esprit que la vidéo en vue aérienne fait plus de 30 Mo et peut être lente à charger pour certains utilisateurs.
Si votre page comporte un carrousel d'images, vous pouvez inclure la vidéo en vue aérienne en tant qu'élément principal, ce qui vous permet d'intégrer facilement l'expérience 3D à la conception de votre site Web existant.
Placer des boutons pour charger des vues 3D est facile à implémenter, mais cela peut réduire l'engagement. Google Maps charge les vues 3D par défaut. Par exemple, lorsque vous recherchez l'Empire State Building, la vue 3D se charge automatiquement et vous pouvez voir une vue partielle des images lorsque vous êtes toujours dans la vue 3D. C'est un excellent moyen de proposer aux utilisateurs une expérience plus immersive et attrayante.
Conception des boutons
Si vous choisissez d'utiliser un bouton pour accéder à la vue aérienne, tenez compte des points suivants:
- Emplacement: le bouton doit être regroupé avec les autres boutons liés à la cartographie afin que les utilisateurs sachent qu'il est lié à l'emplacement de la propriété.
- Transition: la transition vers la vidéo doit être fluide. Si une section de la page affiche déjà des images, des cartes et Street View, la vidéo de vue aérienne doit s'afficher dans cette même section.
- Mise en avant: comme il s'agit d'une nouvelle fonctionnalité, il est utile de mettre en avant le bouton avec une balise "Nouvelle fonctionnalité" ou une vignette de la vidéo.
- Emphasis: le bouton doit être conçu avec une accentuation moyenne ou élevée, car appuyer dessus déclenche une action importante. Google Material Design fournit des conseils sur la conception de boutons avec différents niveaux d'accentuation.
Voici quelques conseils supplémentaires pour concevoir un bouton Aerial View efficace:
- Utilisez un langage clair et concis. Le bouton doit être clairement libellé pour que les utilisateurs sachent ce qu'il fait.
- Utilisez une police de grande taille et lisible. Le bouton doit être suffisamment grand pour être facilement vu et cliqué par les utilisateurs.
- Utilisez une couleur contrastante. Le bouton doit être d'une couleur différente du texte et de l'arrière-plan environnants pour qu'il se démarque.
- Utilisez une incitation à l'action. Le bouton doit inclure une incitation à l'action claire, comme "Voir la vue aérienne" ou "Regarder la vidéo".
Remarques concernant l'affichage
Chargement de la vidéo
Vous pouvez tenir compte des connexions plus lentes en affichant un aperçu de la vidéo sous forme d'image fixe et en chargeant l'expérience complète lors d'une interaction utilisateur, comme un clic. En plus de la vidéo Aerial View, vous avez également accès à une miniature qui peut être utilisée à cette fin.
Vous aurez également accès à la vidéo dans différentes résolutions. Vous pourrez ainsi l'utiliser de manière stratégique pour réduire le temps d'attente de l'utilisateur pendant le chargement de l'expérience, en fonction de la vitesse de connexion.
Attributions de logos
Lorsque vous implémentez Aerial View, vous devez vous assurer de respecter tous les termes, y compris l'attribution du logo. Pour en savoir plus, consultez cette page.
Conclusion
Nous espérons que cet article vous aura inspiré pour réfléchir à la façon dont vous souhaitez implémenter la vue aérienne sur votre site Web, en suscitant un engagement utilisateur élevé.
Il est important de réfléchir à la façon dont votre utilisateur découvrira le contenu et au format le plus approprié pour l'afficher. Il est également conseillé de tenir compte du type d'appareil sur lequel la vidéo sera lue, en particulier de l'orientation de l'écran et de la vitesse de connexion de l'utilisateur.
Étapes suivantes
Documentation complémentaire suggérée:
- Améliorer la précision de la saisie d'adresses en vue aérienne
- Documentation produit de la vue aérienne
Contributeurs
Cet article est géré par Google. Les contributeurs suivants l'ont initialement rédigé.
Auteur principal:
Henrik Valve | Ingénieur des solutions Google Maps Platform