Coinvolgimento dei clienti con Aerial View

Questo documento descrive vari pattern di progettazione e idee per iniziare il tuo percorso con Aerial View. Il modo in cui presenti Aerial View ai tuoi clienti deve essere valutato attentamente per garantire un buon livello di coinvolgimento con il prodotto e per far sì che i tuoi clienti ne comprendano il valore.

Aerial View aggiunge un componente visivamente accattivante al tuo sito web, mostrando una vista aerea di una proprietà e dei suoi dintorni.

Quando gli utenti vedono una proprietà in 3D, possono farsi un'idea più precisa della sua posizione e delle sue dimensioni. Inoltre, aiuta a mettere in evidenza le caratteristiche della proprietà, come una piscina, edifici secondari o un ampio cortile, oltre alle caratteristiche vicine, come strade, specchi d'acqua, montagne o parchi.

Aumentare il coinvolgimento

Aerial View sarà un fattore di grande impatto per i tuoi clienti e, per sfruttare appieno i vantaggi, i contenuti devono essere il più facili possibile da scoprire. In questa sezione parleremo di alcuni pattern di progettazione dell'implementazione per Aerial View per raggiungere questo obiettivo.

Orientamento video

È importante considerare l'orientamento dello schermo del dispositivo su cui viene caricato il video di Aerial View. Mostrare un video con orientamento orizzontale su un dispositivo mobile, soprattutto a schermo intero, può essere un'esperienza utente negativa. Se mostri un video utilizzando le proporzioni errate per il dispositivo, sprecherai una quantità significativa di spazio sullo schermo.

I video di vista aerea sono forniti con orientamento orizzontale e verticale.

Di seguito è riportato un esempio della differenza tra l'esecuzione di Aerial View su un dispositivo mobile con l'orientamento consigliato e con quello non consigliato:

GIF animata che mostra due dispositivi, uno in modalità Ritratto e l'altro in modalità Orizzontale. Su entrambi i dispositivi il video viene visualizzato in modalità Ritratto. Sotto il dispositivo in modalità Ritratto è scritto "Consigliato", mentre sotto quello in modalità Orizzontale è scritto "Non consigliato".

Biglietto da visita incorporato

Quando mostri più proprietà in una visualizzazione di ricerca delle proprietà, è utile aggiungere schede popup incorporate per mostrare il video di vista aerea, con informazioni aggiuntive sulla proprietà, come l'indirizzo e il prezzo sovrapposti. In questo modo, gli utenti possono farsi un'idea della proprietà in modo rapido e semplice, senza dover fare clic sulla pagina dei dettagli della proprietà.

L'esempio seguente mostra un indicatore che rappresenta il complesso Googleplex a Mountain View. Quando passi il mouse sopra questo indicatore, viene visualizzata la scheda popup che mostra il video di vista aerea della proprietà.

GIF animata che mostra una mappa con una scheda popup con un video di vista aerea del complesso Googleplex. Questa scheda popup viene visualizzata quando il cursore si trova sopra l'indicatore pertinente.

È possibile aggiungere un evento onClick sia all'indicatore sia alla scheda popup incorporata per indirizzare l'utente alla pagina dei dettagli della proprietà. In questo modo, gli utenti possono scoprire facilmente di più sulla proprietà e decidere se è adatta alle loro esigenze.

Crea un'esperienza simile a una storia per la tua proprietà

Se vuoi creare un'esperienza davvero immersiva per i potenziali acquirenti, puoi mostrare la tua proprietà con un'esperienza simile a una storia che combina foto e un video di vista aerea.Questo può essere creato in modo simile a un carosello di immagini, utilizzando un mix di HTML, CSS e JavaScript.

GIF animata con un esempio di video di vista aerea visualizzato in un'esperienza simile a una storia, in modalità Ritratto. Il video di vista aerea si trova nella seconda slide e in basso è presente il pulsante "Visualizza edificio".

Nell'esempio precedente, abbiamo incluso il video di vista aerea in una delle slide, con un link in basso per visualizzare ulteriori dettagli sulla proprietà. Questo pulsante deve indirizzare l'utente alla pagina dei dettagli della proprietà.

Ecco come funziona:

  1. Scegli le tue foto. Seleziona una serie di foto che mettano in evidenza le caratteristiche migliori della tua proprietà.
  2. Crea il tuo video di vista aerea.
  3. Combina foto e video in una storia.
  4. Condividi la tua storia. Condividi la tua storia con i potenziali acquirenti sul tuo sito web o nelle campagne di email marketing.

Creando un'esperienza simile a una storia per la tua proprietà in vetrina, potrai catturare l'attenzione dei potenziali acquirenti.

Avvio di Aerial View al caricamento pagina

Negli studi sulla UX di Google, abbiamo notato che il coinvolgimento degli utenti è maggiore quando la visualizzazione 3D viene caricata per impostazione predefinita. Poiché si tratta di un nuovo ed entusiasmante fattore di forma, vogliamo caricarlo non appena un cliente vuole visualizzare i dettagli della proprietà. Quando pensi ai costi, tieni presente che il recupero di un video di vista aerea dall'API comporta un addebito. Una volta richiesto il video, valuta la possibilità di riprodurlo automaticamente per assicurarti che gli utenti vedano il vantaggio.

Anti-pattern: nascondere Aerial View dietro un pulsante è considerato un anti-pattern perché costringe gli utenti a eseguire un passaggio aggiuntivo per visualizzare la vista 3D. Questo può essere frustrante e può anche far perdere i vantaggi delle visualizzazioni 3D o far scambiare Aerial View per contenuti statici.

Ti consigliamo di caricare Aerial View per impostazione predefinita quando un cliente vuole visualizzare i dettagli della proprietà. In questo modo, gli utenti avranno un'esperienza ottimale e potranno prendere una decisione consapevole sulla proprietà. Quando progetti l'esperienza di riproduzione automatica, tieni presente che il video di vista aerea ha una dimensione di oltre 30 MB e potrebbe essere lento da caricare per alcuni utenti.

Se la tua pagina include un carosello di immagini, il video di vista aerea può essere incluso come elemento principale, consentendoti di integrare facilmente l'esperienza 3D nel design del tuo sito web esistente.

Esempio di un pulsante che potrebbe essere utilizzato per accedere ad Aerial View, posizionato accanto a un pulsante esistente per accedere a Foto

Il posizionamento di pulsanti per caricare le visualizzazioni 3D è facile da implementare, ma può ridurre il coinvolgimento. Google Maps carica le visualizzazioni 3D per impostazione predefinita. Ad esempio, quando cerchi l'Empire State Building, la visualizzazione 3D viene caricata automaticamente e puoi vedere una visualizzazione parziale delle immagini mentre sei ancora nella visualizzazione 3D. Questo è un ottimo modo per offrire agli utenti un'esperienza più immersiva e coinvolgente.

Design dei pulsanti

Se scegli di utilizzare un pulsante per accedere ad Aerial View, è importante considerare quanto segue:

  • Posizione: il pulsante deve essere raggruppato con altri pulsanti relativi alla mappatura, in modo che gli utenti sappiano che è correlato alla posizione della proprietà.
  • Transizione: la transizione al video deve essere fluida e senza interruzioni. Se nella pagina è già presente una sezione che mostra immagini, mappe e Street View, il video di vista aerea deve essere visualizzato nella stessa sezione.
  • Evidenziazione: poiché si tratta di una nuova aggiunta alla pagina, è utile evidenziare il pulsante con un tag "nuova funzionalità" o una miniatura di un'immagine fissa del video.
  • Enfasi: il pulsante deve essere progettato con un'enfasi media o alta, poiché la sua pressione eseguirà un'azione importante. Google Material Design fornisce alcune indicazioni su come progettare pulsanti con diversi livelli di enfasi.

Ecco alcuni suggerimenti aggiuntivi per progettare un pulsante Aerial View efficace:

  • Usa un linguaggio chiaro e conciso. Il pulsante deve essere chiaramente etichettato in modo che gli utenti sappiano cosa fa.
  • Utilizza un carattere grande e leggibile. Il pulsante deve essere abbastanza grande da essere facilmente visibile e cliccabile dagli utenti.
  • Usa un colore a contrasto. Il pulsante deve essere di un colore diverso rispetto al testo e allo sfondo circostanti, in modo da risaltare.
  • Usa un invito all'azione. Il pulsante deve includere un invito all'azione chiaro, ad esempio "Guarda Aerial View" o "Guarda il video".

Considerazioni sulla pubblicità display

Caricamento del video in corso…

Potresti prendere in considerazione le connessioni più lente, mostrando un'anteprima dell'immagine fissa del video e caricando l'esperienza completa in seguito a un'interazione dell'utente, ad esempio onClick. Oltre al video di vista aerea, avrai anche accesso a una miniatura che può essere utilizzata per questo scopo.

Avrai anche accesso al video in diverse risoluzioni, che possono essere utilizzate strategicamente per ridurre al minimo il tempo che l'utente deve dedicare all'attesa del caricamento dell'esperienza, con diverse velocità di connessione.

Attribuzioni del logo

Quando implementi Aerial View, devi assicurarti di rispettare tutti i termini, inclusa l'attribuzione del logo. Per informazioni dettagliate, visita questa pagina.

Conclusione

Ci auguriamo che questo articolo ti abbia dato l'ispirazione per pensare a come implementare Aerial View sul tuo sito web, con un elevato coinvolgimento degli utenti.

È importante pensare a come l'utente scoprirà i contenuti e in quale formato sarebbe più appropriato visualizzarli. È anche consigliabile considerare il tipo di dispositivo su cui verrà riprodotto il video, in particolare l'orientamento dello schermo, e la velocità di connessione dell'utente.

Passaggi successivi

Letture consigliate per approfondire:

Collaboratori

Google gestisce questo articolo. È stato scritto originariamente dai seguenti collaboratori.

Autore principale:

Henrik Valve | Google Maps Platform Solutions Engineer