Ce document décrit différents modèles et idées de conception pour vous aider à démarrer votre parcours Vue aérienne. Vous devez réfléchir attentivement à la façon dont vous présentez la vue aérienne à vos clients pour vous assurer d'obtenir un bon niveau d'engagement avec le produit et que vos clients en voient la 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 permet également de mettre en valeur les caractéristiques de la propriété, comme une piscine, des dépendances ou une grande cour, ainsi que les éléments à proximité, comme les routes, les plans d'eau, les montagnes ou les parcs.
Augmenter 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 disponibles 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. Cela permet aux utilisateurs d'avoir une idée rapide et facile de la propriété, sans avoir à cliquer sur la page d'informations correspondante.
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 fiche flottante intégrée pour rediriger l'utilisateur vers la page d'informations sur la propriété. Les utilisateurs peuvent ainsi en savoir plus sur la propriété et décider si elle leur convient.
Créer une expérience narrative pour votre établissement
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 détaillées sur la propriété.
Le principe est le suivant :
- Choisissez vos photos. Sélectionnez différentes photos qui mettent en avant les meilleurs aspects 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 les acheteurs potentiels sur votre site Web ou dans vos campagnes de marketing par e-mail.
En créant une expérience narrative pour votre propriété phare, vous pourrez capter l'attention des acheteurs potentiels.
Démarrer Aerial View au chargement de la page
Dans les études UX de Google, nous constatons que l'engagement utilisateur le plus élevé se produit 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 masquage de 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 confondre la vue aérienne avec un contenu statique.
Nous vous recommandons de charger la vue aérienne par défaut lorsqu'un client souhaite consulter les détails de la propriété. Vous leur offrirez ainsi une expérience utilisateur de qualité et les aiderez à prendre une décision éclairée sur 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 vous incluez un carrousel d'images sur votre page, vous pouvez inclure la vidéo en vue aérienne comme é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.
- Accentuation: le bouton doit être conçu avec une accentuation moyenne ou élevée, car appuyer dessus déclenche une action importante. Google Material Design propose des conseils pour concevoir des boutons avec différents niveaux d'accentuation.
Voici quelques conseils supplémentaires pour concevoir un bouton de vue aérienne 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".
Considérations 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 Aperçu aérien, vous aurez également accès à une miniature qui vous permettra de le faire.
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 pendant le chargement de l'expérience, en fonction de différentes vitesses de connexion.
Attributions de logos
Lorsque vous implémentez la vue aérienne, vous devez vous assurer de respecter l'ensemble des conditions, 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
Complément d'informations:
- Améliorer la précision de la saisie d'adresses dans la 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 solutions Google Maps Platform