Neste documento, descrevemos vários padrões de design e ideias para você começar sua jornada com a Visão Aérea. A forma como você apresenta a Visualização Aérea aos seus clientes precisa ser cuidadosamente considerada para garantir um bom nível de engajamento com o produto e que os clientes percebam o valor dele.
A Vista Aérea adiciona um componente visualmente atraente ao seu site, mostrando uma vista aérea de uma propriedade e dos arredores.
Quando os usuários veem uma propriedade em 3D, eles têm uma noção melhor da localização e do tamanho dela. Também ajuda a destacar as características da propriedade, como piscina, anexos ou um quintal grande, além de elementos próximos, como estradas, corpos hídricos, montanhas ou parques.
Aumentar o engajamento
A Visualização Aérea vai ser um fator de destaque para seus clientes, e, para que eles aproveitem todos os benefícios, o conteúdo precisa ser o mais fácil possível de descobrir. Nesta seção, vamos falar sobre alguns padrões de projeto de implementação para que a Aerial View alcance isso.
Orientação do vídeo
É importante considerar a orientação da tela do dispositivo em que o vídeo de vista aérea está sendo carregado. Mostrar um vídeo em modo paisagem em um dispositivo móvel pode ser uma experiência ruim para o usuário, especialmente em tela cheia. Ao exibir um vídeo usando a proporção incorreta para o dispositivo, você desperdiça uma quantidade significativa de espaço na tela.
Os vídeos de vista aérea são fornecidos na orientação paisagem e retrato.
Confira abaixo um exemplo da diferença entre executar a Visualização Aérea em um dispositivo móvel na orientação recomendada e na não recomendada:
Card de informações incorporado
Ao mostrar várias propriedades em uma visualização de pesquisa, é útil adicionar cards de informações incorporados para mostrar o vídeo de vista aérea, com informações adicionais sobre a propriedade, como o endereço e o preço sobrepostos. Assim, os usuários podem ter uma ideia rápida e fácil da propriedade sem precisar clicar na página de detalhes dela.
O exemplo abaixo mostra um marcador que representa o complexo do Googleplex em Mountain View. Quando você passa o cursor sobre esse marcador, o card de informações aparece, mostrando o vídeo de vista aérea da propriedade.
Um evento onClick pode ser adicionado ao marcador e ao card de informações incorporado para direcionar o usuário à página de detalhes da propriedade. Assim, os usuários podem saber mais sobre a propriedade e decidir se ela é adequada para eles.
Crie uma experiência semelhante a uma história para sua propriedade
Se você quiser criar uma experiência realmente imersiva para compradores em potencial, mostre sua propriedade com uma experiência semelhante a uma história que combina fotos e um vídeo de vista aérea.Isso pode ser criado de maneira semelhante a um carrossel de imagens, usando uma combinação de HTML, CSS e JavaScript.
No exemplo acima, incluímos o vídeo de vista aérea em um dos slides, com um link na parte de baixo para ver mais detalhes sobre a propriedade. Esse botão deve levar o usuário à página de detalhes da propriedade.
Veja como funciona:
- Escolha as fotos. Selecione várias fotos que destaquem os melhores recursos da sua propriedade.
- Crie seu vídeo aéreo.
- Combine suas fotos e vídeos em uma história.
- Compartilhe sua história Compartilhe sua história com compradores em potencial no seu site ou em campanhas de e-mail marketing.
Ao criar uma experiência de narrativa para sua propriedade em destaque, você poderá chamar a atenção de possíveis compradores.
Como iniciar a Vista Aérea no carregamento da página
Nos estudos de UX do Google, observamos que o maior engajamento do usuário ocorre quando a visualização em 3D é carregada por padrão. Como esse é um formato novo e interessante, queremos carregá-lo assim que um cliente quiser ver os detalhes da propriedade. Ao pensar no custo, se você estiver buscando um vídeo de vista aérea na API, será cobrado. Depois que o vídeo for solicitado, considere a reprodução automática para garantir que os usuários vejam o benefício.
Antipadrão:ocultar a Vista Aérea atrás de um botão é considerado um antipadrão porque força os usuários a realizar uma etapa extra para acessar a visualização em 3D. Isso pode ser frustrante e fazer com que eles percam os benefícios das visualizações em 3D ou confundam a Aerial View com conteúdo estático.
Recomendamos que você carregue a Vista Aérea por padrão quando um cliente quiser ver os detalhes da propriedade. Isso vai proporcionar uma ótima experiência do usuário e ajudar a tomar uma decisão fundamentada sobre a propriedade. Ao projetar a experiência de reprodução automática, lembre-se de que o vídeo de vista aérea tem mais de 30 MB e pode demorar para carregar para alguns usuários.
Se você tiver um carrossel de imagens como parte da sua página, o vídeo de vista aérea poderá ser incluído como o item principal, permitindo que você integre facilmente a experiência em 3D ao design do seu site.
Colocar botões para carregar visualizações em 3D é fácil de implementar, mas pode reduzir o engajamento. O Google Maps carrega as visualizações em 3D por padrão. Por exemplo, quando você pesquisa o Empire State Building, a visualização em 3D é carregada automaticamente, e é possível ver uma visualização parcial das imagens enquanto você ainda está na visualização em 3D. Essa é uma ótima maneira de oferecer aos usuários uma experiência mais imersiva e envolvente.
Design do botão
Se você optar por usar um botão para acessar a Vista Aérea, é importante considerar o seguinte:
- Local: o botão precisa ser agrupado com outros botões relacionados ao mapeamento para que os usuários saibam que ele está relacionado ao local da propriedade.
- Transição: a transição para o vídeo precisa ser suave e contínua. Se já houver uma seção na página que mostre imagens, mapas e o Street View, o vídeo de vista aérea deverá ser exibido nessa mesma seção.
- Destaque: como essa será uma nova adição à página, é útil destacar o botão com uma tag de "novo recurso" ou uma miniatura de imagem estática do vídeo.
- Ênfase: o botão precisa ser projetado com uma ênfase média ou alta, já que pressioná-lo vai realizar uma ação importante. O Google Material Design (link em inglês) tem algumas orientações sobre como projetar botões com diferentes níveis de ênfase.
Confira mais algumas dicas para criar um botão de Vista Aérea eficaz:
- Use uma linguagem clara e concisa. O botão precisa ser claramente rotulado para que os usuários saibam o que ele faz.
- Use uma fonte grande e legível. O botão precisa ser grande o suficiente para ser facilmente visto e clicado pelos usuários.
- Use uma cor contrastante. O botão precisa ter uma cor diferente do texto e do plano de fundo ao redor para se destacar.
- Use uma call-to-action. O botão precisa incluir uma call-to-action clara, como "Assistir à Vista Aérea" ou "Assistir ao Vídeo".
Considerações sobre a Rede de Display
Carregando o vídeo
Considere conexões mais lentas mostrando uma prévia de imagem estática do vídeo e carregando a experiência completa em uma interação do usuário, como onClick. Além do vídeo de vista aérea, você também terá acesso a uma miniatura que pode ser usada para isso.
Você também terá acesso ao vídeo em diferentes resoluções, que podem ser usadas estrategicamente para minimizar o tempo de espera do usuário para que a experiência seja carregada em diferentes velocidades de conexão.
Atribuições de logotipo
Ao implementar a Vista Aérea, siga todos os termos, incluindo a atribuição do logotipo. Confira mais detalhes.
Conclusão
Esperamos que este artigo tenha inspirado você a pensar em como implementar a Aerial View no seu site, com alto engajamento do usuário.
É importante pensar em como o usuário vai descobrir o conteúdo e em qual formato seria mais apropriado para exibi-lo. Também é bom considerar o tipo de dispositivo em que o vídeo será reproduzido, especialmente a orientação da tela, e a velocidade de conexão do usuário.
Próximas etapas
Sugestões de leitura:
- Melhorar a precisão da entrada de endereço na Visualização aérea
- Documentação do produto Aerial View
Colaboradores
O Google mantém este artigo. Os colaboradores a seguir escreveram o conteúdo original.
Autor principal:
Henrik Valve | Engenheiro de soluções da Plataforma Google Maps