Este documento descreve vários padrões e ideias de design para você começar a usar a Visão aérea. É importante considerar com cuidado como você apresenta a Vista aérea aos clientes 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 panorâmica de uma propriedade e dos arredores.
Quando os usuários veem uma propriedade em 3D, eles têm uma ideia melhor da localização e do tamanho dela. Ela também ajuda a destacar os recursos da propriedade, como uma piscina, dependências ou um grande quintal, além de recursos próximos, como estradas, corpos hídricos, montanhas ou parques.
Aumentar o engajamento
A Vista aérea vai impressionar seus clientes, mas para aproveitar 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 design de implementação para a Visão Aérea alcançar esse objetivo.
Orientação do vídeo
É importante considerar a orientação da tela do dispositivo em que o vídeo do Aerial View está sendo carregado. Mostrar um vídeo na orientação paisagem em um dispositivo móvel, principalmente em tela cheia, pode gerar uma experiência ruim para o usuário. Ao mostrar um vídeo usando a proporção incorreta para o dispositivo, você vai desperdiçar uma quantidade significativa de espaço na tela.
Os vídeos da Aerial View são fornecidos na orientação paisagem e retrato.
Abaixo, você pode conferir um exemplo da diferença entre executar a Visão aérea em um dispositivo móvel na orientação recomendada e na orientação não recomendada:
Card de visita incorporado
Ao mostrar várias propriedades em uma visualização de pesquisa, é útil adicionar hovercards incorporados para exibir o vídeo da Vista aérea, com mais informações sobre a propriedade, como endereço e 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.
O exemplo abaixo mostra um marcador representando 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 da vista aérea da propriedade.
Um evento onClick pode ser adicionado ao marcador e ao cartão de passar o cursor incorporado para levar o usuário à página de detalhes do imóvel. Assim, os usuários podem saber mais sobre o imóvel e decidir se ele é adequado para eles.
Criar uma experiência semelhante aos Stories para sua propriedade
Se quiser criar uma experiência realmente imersiva para os possíveis compradores, você pode mostrar seu imóvel com uma experiência semelhante a uma história que combina fotos e um vídeo da 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 da 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 suas fotos. Selecione várias fotos que destaquem os melhores recursos do seu imóvel.
- Crie seu vídeo da Aerial View.
- Combine 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 semelhante a uma história para sua propriedade de vitrine, você poderá capturar a atenção de compradores em potencial.
Como iniciar a Aerial View 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 em custos, se você estiver buscando um vídeo do Aerial View na API, haverá uma cobrança. Depois que o vídeo for solicitado, considere a reprodução automática para garantir que seus 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 também fazer com que as pessoas percam os benefícios das visualizações em 3D ou confundam a Visão aérea 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 na tomada de decisão sobre a propriedade. Ao projetar a experiência de reprodução automática, lembre-se de que o vídeo da Vista aérea tem mais de 30 MB e pode demorar para carregar para alguns usuários.
Se você tiver um carrossel de imagens na página, o vídeo da Vista aérea poderá ser incluído como o item principal, permitindo que você integre facilmente a experiência 3D ao design do site atual.
Colocar botões para carregar visualizações 3D é fácil de implementar, mas pode reduzir o engajamento. O Google Maps carrega visualizações em 3D por padrão. Por exemplo, ao pesquisar o Empire State Building, a visualização em 3D é carregada automaticamente, e você pode ver uma parte das imagens enquanto ainda está nessa visualização. 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 Visão aérea, é importante considerar o seguinte:
- Localização: o botão precisa ser agrupado com outros botões relacionados a mapas para que os usuários saibam que ele está relacionado à localização da propriedade.
- Transição: a transição para o vídeo precisa ser suave e perfeita. Se já houver uma seção na página que mostre imagens, mapas e o Street View, o vídeo da API Aerial View vai aparecer nessa mesma seção.
- Destaque: como esse será um novo recurso na página, é útil destacar o botão com uma tag "Novo recurso" ou uma miniatura de imagem estática do vídeo.
- Ênfase: o botão precisa ser projetado com ênfase média ou alta, já que pressioná-lo vai realizar uma ação em destaque. O Google Material Design tem algumas orientações sobre como criar botões com diferentes níveis de ênfase.
Confira mais algumas dicas para criar um botão de visão aérea eficaz:
- Use uma linguagem clara e concisa. O botão precisa ter um rótulo claro 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 visto e clicado com facilidade 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 vídeo".
Considerações sobre a Rede de Display
Carregando o vídeo
Você pode considerar 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 da Aerial View, 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 que o usuário precisa esperar para que a experiência seja carregada, em diferentes velocidades de conexão.
Atribuições de logotipo
Ao implementar a Visão Aérea, siga todos os termos, incluindo a atribuição de logotipo. Consulte esta página para mais detalhes.
Conclusão
Esperamos que este artigo tenha inspirado você a pensar em como implementar a Visão Aérea 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 adequado para mostrá-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
Leitura adicional sugerida:
Colaboradores
O Google mantém este artigo. Os colaboradores a seguir escreveram o texto original.
Autor principal:
Henrik Valve | Engenheiro de soluções da Plataforma Google Maps