Questo documento descrive vari pattern e idee di design per aiutarti a iniziare il tuo percorso con Vista aerea. Il modo in cui presenti Aerial View ai tuoi clienti deve essere valutato con attenzione per garantire un buon livello di coinvolgimento con il prodotto e che i clienti ne comprendano il valore.
La vista aerea aggiunge un componente visivamente accattivante al tuo sito web, mostrando una veduta dall'alto di una proprietà e dei dintorni.
Quando gli utenti vedono una proprietà in 3D, possono capire meglio la sua posizione e le sue dimensioni. Inoltre, aiuta a mettere in evidenza le caratteristiche della proprietà, come una piscina, dependance o un ampio cortile, oltre a elementi nelle vicinanze come strade, specchi d'acqua, montagne o parchi.
Aumentare il coinvolgimento
La visualizzazione aerea farà un'ottima impressione sui tuoi clienti e, per trarre il massimo vantaggio, i contenuti devono essere il più facili possibile da trovare. In questa sezione, parleremo di alcuni pattern di progettazione dell'implementazione per Vista aerea per ottenere questo risultato.
Orientamento video
È importante considerare l'orientamento dello schermo del dispositivo su cui viene caricato il video con vista aerea. Mostrare un video orientato in orizzontale su un dispositivo mobile, soprattutto a schermo intero, può essere un'esperienza negativa. Se mostri un video con proporzioni errate per il dispositivo, sprechi una quantità significativa di spazio sullo schermo.
I video di Vista aerea sono disponibili in orientamento orizzontale e verticale.
Di seguito è riportato un esempio della differenza nell'esecuzione di Aerial View su un dispositivo mobile con l'orientamento consigliato e l'orientamento non consigliato:
Biglietto da visita incorporato
Quando vengono visualizzate più proprietà in una visualizzazione di ricerca di strutture, è utile aggiungere schede popup incorporate per mostrare il video della vista aerea, con informazioni aggiuntive sulla proprietà, come l'indirizzo e il prezzo sovrapposti in alto. In questo modo, gli utenti possono farsi un'idea della proprietà in modo facile e veloce, 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 con il video della proprietà in vista aerea.
È possibile aggiungere un evento onClick sia all'indicatore che alla scheda popup incorporata per indirizzare l'utente alla pagina dei dettagli della proprietà. In questo modo, è più facile per gli utenti scoprire di più sulla proprietà e decidere se è adatta a loro.
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 con vista aerea.Questo può essere creato in modo simile a un carosello di immagini, utilizzando una combinazione di HTML, CSS e JavaScript.
Nell'esempio riportato sopra, abbiamo incluso il video con vista aerea in una delle diapositive, 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:
- Scegli le foto. Seleziona una serie di foto che mettano in evidenza le migliori caratteristiche della tua proprietà.
- Crea il tuo video di Aerial View.
- Combinare foto e video in una storia.
- Condividi la tua storia. Condividi la tua storia con potenziali acquirenti sul tuo sito web o nelle campagne di marketing via email.
Creando un'esperienza simile a una storia per la tua proprietà vetrina, sarai in grado di attirare l'attenzione dei potenziali acquirenti.
Avvio di Aerial View al caricamento della pagina
Gli studi UX di Google mostrano che il coinvolgimento degli utenti è più elevato 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 pensi ai costi, ti verrà addebitato un costo se recuperi un video di Aerial View dall'API. Una volta richiesto il video, valuta la possibilità di attivare la riproduzione automatica per assicurarti che i tuoi utenti ne vedano il vantaggio.
Anti-pattern: nascondere la visuale aerea 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 a perdere i vantaggi delle viste 3D o a scambiare la vista aerea per contenuti statici.
Ti consigliamo di caricare la visuale aerea per impostazione predefinita quando un cliente vuole visualizzare i dettagli della proprietà. In questo modo, l'esperienza utente sarà ottimale e aiuterà l'utente a prendere una decisione consapevole in merito alla proprietà. Durante la progettazione dell'esperienza di riproduzione automatica, tieni presente che il video di Aerial View ha una dimensione superiore a 30 MB e potrebbe essere lento per alcuni utenti.
Se nella tua pagina è presente un carosello di immagini, il video della vista aerea può essere incluso come elemento principale, consentendoti di integrare facilmente l'esperienza 3D nel design del tuo sito web esistente.
Posizionare 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 in questa visualizzazione. È un ottimo modo per offrire agli utenti un'esperienza più coinvolgente e avvincente.
Design del pulsante
Se scegli di utilizzare un pulsante per accedere a Vista aerea, è importante tenere conto di quanto segue:
- Posizione: il pulsante deve essere raggruppato con altri pulsanti correlati alla mappatura in modo che gli utenti sappiano che si riferisce 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 Aerial View deve essere visualizzato nella stessa sezione.
- Evidenziazione: poiché si tratta di una nuova funzionalità aggiunta alla pagina, è utile evidenziare il pulsante con un tag "nuova funzionalità" o una miniatura di un'immagine fissa del video.
- Emphasis: il pulsante deve essere progettato con un'enfasi media o elevata, poiché la sua pressione attiverà un'azione in evidenza. Google Material Design fornisce alcune indicazioni su come progettare pulsanti con diversi livelli di evidenza.
Ecco alcuni suggerimenti aggiuntivi per progettare un pulsante di visualizzazione aerea efficace:
- Utilizza un linguaggio chiaro e conciso. Il pulsante deve essere etichettato in modo chiaro 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.
- Usa un colore a contrasto. Il pulsante deve avere un colore diverso rispetto al testo e allo sfondo circostanti, in modo da risaltare.
- Usa un invito all'azione. Il pulsante deve includere un chiaro invito all'azione, come "Guarda vista aerea" o "Guarda il video".
Considerazioni sul display
Caricamento video
Ti consigliamo di prendere in considerazione le connessioni più lente, mostrando un'anteprima del video sotto forma di immagine fissa e caricando l'esperienza completa a seguito di un'interazione dell'utente, ad esempio un clic. Oltre al video di Aerial View, avrai anche accesso a una miniatura che puoi utilizzare per farlo.
Avrai anche accesso al video a risoluzioni diverse, che possono essere utilizzate in modo strategico per ridurre al minimo il tempo che l'utente deve attendere per il caricamento dell'esperienza, a velocità di connessione diverse.
Attribuzioni dei loghi
Quando implementi la visualizzazione aerea, devi assicurarti di rispettare tutti i termini, incluso l'attribuzione del logo. Visita questa pagina per maggiori dettagli.
Conclusione
Ci auguriamo che questo articolo ti abbia dato l'ispirazione per capire come implementare la visualizzazione aerea 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. È bene valutare anche 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
Ulteriori letture suggerite:
- Migliorare la precisione dell'inserimento dell'indirizzo in Aerial View
- Documentazione del prodotto Aerial View
Collaboratori
Questo articolo è gestito da Google. È stato originariamente scritto dai seguenti collaboratori.
Autore principale:
Henrik Valve | Google Maps Platform Solutions Engineer