Ce document décrit différents modèles de conception et idées pour vous aider à démarrer avec votre Aerial View Vous devez réfléchir attentivement à la façon dont vous présentez Aerial View à vos clients pour vous assurer d'obtenir un bon niveau d'engagement avec le produit et que vos clients en perçoivent la valeur.
Aerial View ajoute un composant visuellement attrayant à votre site Web, en affichant une vue aérienne d'un établissement et de ses environs.
Lorsque les utilisateurs voient un établissement en 3D, ils peuvent mieux se rendre compte de son emplacement et de sa taille. Cela permet également de mettre en évidence les caractéristiques de l'établissement, comme une piscine, des dépendances ou un grand jardin, en plus des éléments à proximité tels que les routes, les étendues d'eau, les montagnes ou les parcs.
En augmentant l'engagement
Aerial View aura un effet "waouh" sur vos clients. Pour en profiter pleinement, le contenu doit être aussi facile à découvrir que possible. Dans cette section, nous allons aborder quelques modèles de conception d'implémentation pour Aerial View 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 en cours de chargement. Afficher une vidéo au format paysage sur un appareil mobile, en particulier en plein écran, peut être une mauvaise expérience utilisateur. En affichant une vidéo avec un format d'image incorrect pour l'appareil, vous gaspillez une quantité importante d'espace à l'écran.
Les vidéos Aerial View sont disponibles au format paysage et portrait orientation.
Vous trouverez ci-dessous un exemple de la différence entre l'exécution d'Aerial View sur un appareil mobile avec l'orientation recommandée et celle 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 informatives intégrées pour afficher la vidéo Aerial View, avec des informations supplémentaires sur l'établissement, telles que l'adresse et le prix superposés. Cela permet aux utilisateurs de se faire une idée rapide et facile de l'établissement, sans avoir à cliquer pour accéder à la page de détails 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 Aerial View de l'établissement.
Vous pouvez ajouter un événement onClick au repère et à la fiche informative intégrée pour rediriger l'utilisateur vers la page de détails de l'établissement. Les utilisateurs peuvent ainsi en savoir plus sur l'établissement et décider s'il leur convient.
Créer une expérience de type "Story" pour votre établissement
Si vous souhaitez créer une expérience véritablement immersive pour les acheteurs potentiels, vous pouvez présenter votre établissement avec une expérience de type "Story" combinant des photos et une vidéo Aerial View.Vous pouvez créer cette expérience de la même manière qu'un carrousel d'images, en utilisant un mélange de HTML, de CSS et de JavaScript.
Dans l'exemple ci-dessus, nous avons inclus la vidéo Aerial View sur l'une des diapositives, avec un lien en bas pour afficher plus de détails sur l'établissement. Ce bouton doit rediriger l'utilisateur vers la page de détails de l'établissement.
Voici comment cela fonctionne :
- Choisissez vos photos. Sélectionnez différentes photos qui mettent en avant les meilleures caractéristiques de votre établissement.
- Créez votre vidéo Aerial View.
- Combinez vos photos et votre vidéo dans une story.
- Partagez votre story. Partagez votre story avec des acheteurs potentiels sur votre site Web ou dans vos campagnes de marketing par e-mail.
En créant une expérience de type "Story" pour votre établissement, vous pourrez capter l'attention des acheteurs potentiels.
Démarrer Aerial View au chargement de la page
Les études UX de Google montrent que l'engagement des utilisateurs est le plus élevé lorsque la vue 3D se charge par défaut. Comme il s'agit d'un nouveau format intéressant, nous voulons le charger dès qu'un client souhaite afficher les détails de l'établissement. Si vous récupérez une vidéo Aerial View à partir de l'API, vous serez facturé. Une fois la vidéo demandée, envisagez de la lire automatiquement pour que vos utilisateurs en voient les avantages.
Anti-modèle : Masquer Aerial View derrière un bouton est considéré comme un anti-modèle, car cela oblige les utilisateurs à effectuer une étape supplémentaire pour afficher la vue 3D. Cela peut être frustrant et les utilisateurs peuvent passer à côté des avantages des vues 3D ou confondre Aerial View avec du contenu statique.
Nous vous recommandons de charger Aerial View par défaut lorsqu'un client souhaite afficher les détails de l'établissement. Cela offrira une excellente expérience utilisateur et l'aidera à prendre une décision éclairée concernant l'établissement. Lorsque vous concevez l'expérience de lecture automatique, n'oubliez pas que la vidéo Aerial View fait plus de 30 Mo et que son chargement peut être lent pour certains utilisateurs.
Si votre page comporte un carrousel d'images, vous pouvez inclure la vidéo Aerial View comme élément principal, ce qui vous permet d'intégrer facilement l'expérience 3D à la conception de votre site Web existant.
Il est facile d'implémenter des boutons pour charger des vues 3D, 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 pendant que vous êtes toujours dans la vue 3D. C'est un excellent moyen d'offrir aux utilisateurs une expérience plus immersive et attrayante.
Conception des boutons
Si vous choisissez d'utiliser un bouton pour accéder à Aerial View, il est important de tenir compte des points suivants :
- Emplacement : le bouton doit être regroupé avec d'autres boutons liés à la cartographie afin que les utilisateurs sachent qu'il est lié à l'emplacement de l'établissement.
- Transition : la transition vers la vidéo doit être fluide et transparente. S'il existe déjà une section sur la page qui affiche des images, des cartes et Street View, la vidéo Aerial View doit être affichée dans cette même section.
- Mise en évidence : comme il s'agit d'un nouvel ajout à la page, il est utile de mettre en évidence le bouton avec un tag "Nouvelle fonctionnalité" ou une vignette d'image fixe de la vidéo.
- Accentuation : le bouton doit être conçu avec une accentuation moyenne ou élevée, car son activation effectuera 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 contrastée. Le bouton doit être d'une couleur différente de celle 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, telle que "Regarder Aerial View" ou "Regarder la vidéo".
Considérations relatives à l'affichage
Chargement de la vidéo
Vous pouvez tenir compte des connexions plus lentes en affichant un aperçu d'image fixe de la vidéo et en chargeant l'expérience complète lors d'une interaction utilisateur, telle qu'un clic. En plus de la vidéo Aerial View, vous aurez également accès à une vignette que vous pourrez utiliser à cette fin.
Vous aurez également accès à la vidéo dans différentes résolutions. Vous pourrez ainsi les utiliser de manière stratégique pour réduire le temps d'attente de l'utilisateur lors du chargement de l'expérience, en fonction des différentes vitesses de connexion.
Attributions de logo
Lorsque vous implémentez Aerial View, vous devez vous assurer de respecter toutes les conditions, y compris l'attribution du logo. Pour en savoir plus, consultez cette page pour détails.
Conclusion
Nous espérons que cet article vous aura donné l'inspiration nécessaire pour réfléchir à la manière dont vous souhaitez implémenter Aerial View sur votre site Web, avec un engagement élevé des utilisateurs.
Il est important de réfléchir à la manière dont votre utilisateur découvrira le contenu et au format le plus approprié pour l'afficher. Il est également judicieux 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
Lectures complémentaires suggérées :
Contributeurs
Google gère cet article. Les contributeurs suivants l'ont écrit à l'origine.
Auteur principal :
Henrik Valve | Google Maps Platform Ingénieur solutions