Questo documento descrive vari pattern di progettazione e idee per iniziare a utilizzare la Aerial View. Il modo in cui presenti Aerial View ai tuoi clienti deve essere attentamente considerato per garantire un buon livello di coinvolgimento con il prodotto e che i clienti ne vedano il valore.
Aerial View aggiunge un componente visivamente accattivante al tuo sito web, mostrando una vista dall'alto di una proprietà e dei dintorni.
Quando gli utenti vedono una proprietà in 3D, possono farsi un'idea migliore della sua posizione e delle sue dimensioni. Inoltre, aiuta a mettere in evidenza le caratteristiche della proprietà, come una piscina, delle dipendenze o un grande cortile, oltre a elementi nelle vicinanze come strade, specchi d'acqua, montagne o parchi.
Aumentare il coinvolgimento
Aerial View sarà un fattore di attrazione per i tuoi clienti e, per sfruttarne appieno i vantaggi, i contenuti devono essere il più facili possibile da scoprire. In questa sezione parleremo di alcuni pattern di progettazione dell'implementazione di 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ò costituire un'esperienza utente negativa. Se visualizzi un video utilizzando le proporzioni errate per il dispositivo, sprecherai una quantità significativa di spazio sullo schermo.
I video di Aerial View sono disponibili 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 l'orientamento non consigliato:
Biglietto da visita incorporato
Quando visualizzi più proprietà in una visualizzazione di ricerca di 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 rapida e semplice della proprietà, 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 visualizzato il biglietto da visita con il video di Aerial View della proprietà.
È possibile aggiungere un evento onClick sia all'indicatore sia al biglietto da visita incorporato per indirizzare l' utente alla pagina dei dettagli della proprietà. In questo modo, gli utenti possono facilmente scoprire di più sulla proprietà e decidere se è adatta alle loro esigenze.
Creare 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 Aerial View.Questa esperienza può essere creata in modo simile a un carosello di immagini, utilizzando un mix di HTML, CSS e JavaScript.
Nell'esempio sopra, abbiamo incluso il video di vista aerea in una delle diapositive, con un link in basso per visualizzare maggiori dettagli sulla proprietà. Questo pulsante dovrebbe indirizzare l'utente alla pagina dei dettagli della proprietà.
Ecco come funziona:
- Scegli le foto. Seleziona una varietà di foto che mettano in evidenza le migliori caratteristiche della tua proprietà.
- Crea il tuo video di vista aerea.
- Combina le foto e il video in una storia.
- Condividi la storia. Condividi la 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.
Avviare Aerial View al caricamento pagina
Negli studi UX di Google, abbiamo notato che il coinvolgimento degli utenti è massimo quando la visualizzazione 3D viene caricata per impostazione predefinita. Poiché si tratta di un fattore di forma nuovo ed entusiasmante, vogliamo caricarlo non appena un cliente vuole visualizzare i dettagli della proprietà. Se recuperi un video di vista aerea dall'API, ti verrà addebitato un costo. Una volta richiesto il video, valuta la possibilità di riprodurlo automaticamente per assicurarti che gli utenti ne vedano i vantaggi.
Anti-pattern: nascondere Aerial View dietro un pulsante è considerato un anti-pattern perché costringe gli utenti a eseguire un passaggio aggiuntivo per visualizzare la visualizzazione 3D. Questo può essere frustrante e può anche portare gli utenti a non sfruttare i vantaggi delle visualizzazioni 3D o a confondere Aerial View con contenuti statici.
Ti consigliamo di caricare Aerial View per impostazione predefinita quando un cliente vuole visualizzare i dettagli della proprietà. In questo modo, l'esperienza utente sarà ottima e gli utenti potranno prendere una decisione informata sulla proprietà. Quando progetti l'esperienza di riproduzione automatica, tieni presente che il video di vista aerea è di oltre 30 MB e potrebbe essere lento da caricare per alcuni utenti.
Se nella pagina è presente un carosello di immagini, il video di vista aerea può essere incluso come elemento principale, consentendoti di integrare facilmente l'esperienza 3D nella progettazione del sito web esistente.
L'inserimento 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 ti trovi ancora nella visualizzazione 3D. Questo è un ottimo modo per offrire agli utenti un'esperienza più immersiva e coinvolgente.
Progettazione 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 correlati alle mappe 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 di Aerial View efficace:
- Utilizza un linguaggio chiaro e conciso. Il pulsante deve essere etichettato chiaramente in modo che gli utenti sappiano cosa fa.
- Utilizza un carattere grande e leggibile. Il pulsante deve essere abbastanza grande da essere facilmente visto e cliccato dagli utenti.
- Utilizza un colore a contrasto. Il pulsante deve avere un colore diverso dal testo e dallo sfondo circostanti in modo che risalti.
- Utilizza un invito all'azione. Il pulsante deve includere un invito all'azione chiaro, ad esempio "Guarda Aerial View" o "Guarda il video".
Considerazioni sulla visualizzazione
Caricamento del video
Potresti prendere in considerazione le connessioni più lente, mostrando un'anteprima di un'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 accesso anche a una miniatura che può essere utilizzata per questo scopo.
Avrai anche accesso al video a diverse risoluzioni, in modo da poterle utilizzare in modo strategico per ridurre al minimo il tempo di attesa per il caricamento dell'esperienza, a diverse velocità di connessione.
Attribuzioni del logo
Quando implementi Aerial View, devi assicurarti di rispettare tutti i termini, inclusa l'attribuzione del logo. Per maggiori dettagli, consulta 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:
- Migliorare l'accuratezza dell'input dell'indirizzo in Aerial View
- Documentazione del prodotto Aerial View
Collaboratori
Google gestisce questo articolo. I seguenti collaboratori lo hanno scritto originariamente.
Autore principale:
Henrik Valve | Google Maps Platform Solutions Engineer