Ce document décrit différents modèles de conception et idées pour vous aider à démarrer votre expérience Aerial View. La manière dont vous présentez Aerial View à vos clients doit faire l'objet d'une réflexion approfondie, afin de vous assurer que vous obtenez 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'une propriété et de ses environs.
Lorsque les utilisateurs voient une propriété en 3D, ils peuvent avoir une meilleure idée de son emplacement et de sa taille. Il est également utile de mettre en avant les caractéristiques de l'établissement, telles qu'une piscine, des dépendances ou une grande cour, en plus des caractéristiques à proximité, comme les routes, les plans d'eau, les montagnes ou les parcs.
Renforcer l'engagement
Aerial View sera un facteur d'impressionnant pour vos clients. Pour en tirer pleinement parti, le contenu doit être aussi facile à découvrir que possible. Dans cette section, nous allons vous présenter quelques modèles de conception d'implémentation pour Aerial View afin d'atteindre cet objectif.
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. Afficher une vidéo en mode paysage sur un appareil mobile, en particulier en plein écran, peut nuire à l'expérience utilisateur. En affichant une vidéo dans un format incorrect pour l'appareil, vous gaspillerez 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 la différence lorsque vous exécutez Aerial View 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 de propriétés, 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 en superposition. Les utilisateurs peuvent ainsi se faire une idée de l'établissement, sans avoir à cliquer pour accéder à la page d'informations correspondante.
L'exemple ci-dessous montre un repère représentant le complexe Googleplex à Mountain View. Lorsque vous passez la souris sur ce repère, la fiche informative s'affiche et affiche la vidéo en vue aérienne de la propriété.
Un événement onClick peut être ajouté au repère et à la carte de visite intégrée pour rediriger l'utilisateur vers la page d'informations de 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 unique pour votre propriété
Si vous souhaitez proposer une expérience réellement immersive pour les acheteurs potentiels, vous pouvez présenter votre établissement en suivant une approche narrative qui associe des photos et une vidéo Aerial View.Vous pouvez créer un carrousel d'images de la même manière qu'un carrousel d'images, en utilisant à la fois du code HTML, CSS et JavaScript.
Dans l'exemple ci-dessus, nous avons inclus la vidéo Aerial View sur l'une des diapositives, avec un lien permettant d'afficher plus de détails sur la propriété. Ce bouton doit rediriger l'utilisateur vers la page d'informations sur l'établissement.
Le principe est le suivant :
- Choisissez vos photos. Sélectionnez une variété de photos qui mettent en valeur les aspects les plus intéressants 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 à celle d'une histoire pour votre propriété Showcase, vous pouvez capter l'attention des acheteurs potentiels.
Démarrage d'Aerial View lors du chargement de la page
Les études de Google sur l'expérience utilisateur montrent que l'engagement utilisateur est le plus élevé par défaut lorsque la vue 3D se charge. 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 termes de coût, si vous récupérez une vidéo Aerial View à partir de l'API, vous devrez payer. Une fois la vidéo demandée, envisagez de lancer la lecture automatique pour vous assurer que les utilisateurs en voient l'avantage.
Anti-modèle: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 amener à passer à côté des avantages des vues 3D ou à confondre Aerial View comme 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 expérience utilisateur optimale et les aidera à prendre une décision éclairée concernant la propriété. Lorsque vous concevez l'expérience de lecture automatique, gardez à l'esprit que la vidéo Aerial View fait plus de 30 Mo et que le chargement peut être lent pour certains utilisateurs.
Si votre page comporte un carrousel d'images, vous pouvez inclure la vidéo Aerial View en tant qu'élément prospect, ce qui vous permet d'intégrer facilement l'expérience 3D dans la conception de votre site Web.
Placer des boutons pour charger des vues 3D est facile à implémenter, mais cela peut réduire l'engagement. Par défaut, Google Maps charge les vues 3D. 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 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, tenez compte des points suivants:
- Location (Emplacement) : le bouton doit être regroupé avec d'autres boutons liés au mappage afin que les utilisateurs sachent qu'il est lié à l'emplacement de l'établissement.
- Transition: la transition vers la vidéo doit être fluide. Si une section de la page contient déjà des images, des cartes et Street View, la vidéo en mode Aerial View doit y figurer.
- Mise en surbrillance: étant donné qu'il s'agit d'un nouvel ajout sur la page, il est utile de mettre en évidence le bouton à l'aide d'un tag "nouvelle fonctionnalité" ou d'une miniature d'image fixe de la vidéo.
- Accentuation: le bouton doit être conçu avec une accentuation moyenne ou élevée, car le fait d'appuyer dessus effectuera une action proéminente. Google Material Design propose des conseils pour concevoir des boutons avec différents niveaux d'accentuation.
Voici quelques conseils supplémentaires pour créer un bouton de vue aérienne efficace:
- Utilisez un langage clair et concis. Le bouton doit être clairement étiqueté afin que les utilisateurs sachent ce qu'il fait.
- Utilisez une police de grande taille et lisible. Le bouton doit être suffisamment grand pour que les utilisateurs puissent le voir et cliquer dessus.
- Utilisez une couleur contrastée. Le bouton doit avoir une couleur différente de celle du texte environnant et de l'arrière-plan afin qu'il se démarque.
- Utilisez une incitation à l'action. Le bouton doit inclure une incitation à l'action claire, telle que "Regarder la vue aérienne" ou "Regarder la vidéo".
Éléments à prendre en compte concernant le Réseau Display
Chargement de la vidéo
Vous pouvez prendre en compte les connexions lentes en affichant un aperçu d'image fixe de la vidéo et en chargeant l'expérience complète sur une interaction utilisateur, comme onClick. En plus de la vidéo Aerial View, vous avez également accès à une vignette qui vous permet d'effectuer cette opération.
Vous aurez également accès à la vidéo dans différentes résolutions, qui peuvent donc être utilisées de manière stratégique pour réduire le temps que l'utilisateur doit passer à attendre le chargement de l'expérience, avec différentes vitesses de connexion.
Attributions de logos
Lorsque vous implémentez Aerial View, vous devez vous assurer de respecter l'ensemble des conditions d'utilisation, y compris l'attribution de logos. Pour en savoir plus, consultez cette page.
Conclusion
Nous espérons que cet article vous a donné l'inspiration pour réfléchir à la façon dont vous aimeriez implémenter Aerial View sur votre site Web, avec un engagement utilisateur élevé.
Il est important de réfléchir à la manière dont les utilisateurs découvriront le contenu et au format le plus approprié pour l'afficher. Il est également bon de prendre en compte le type d'appareil sur lequel la vidéo sera lue, en particulier l'orientation de l'écran, et la vitesse de connexion de l'utilisateur.
Étapes suivantes
Autres ressources suggérées:
- Améliorer la précision de la saisie d'adresse en vue aérienne
- Documentation sur le produit Aerial View
Contributeurs
Cet article est mis à jour par Google. Ce commentaire a été écrit initialement par les contributeurs suivants.
Auteur principal:
Henrik Valve | Ingénieur en solutions Google Maps Platform