Este documento descreve vários padrões de design e ideias para você começar sua jornada do Aerial View. A forma como você apresenta a vista aérea aos seus clientes precisa ser cuidadosamente considerada para garantir que você veja um bom nível de engajamento com o produto e que os clientes vejam o valor dele.
A vista aérea adiciona um componente visualmente atraente ao seu site, mostrando uma visão aérea de uma propriedade e dos arredores.
Quando os usuários veem uma propriedade em 3D, podem ter uma ideia melhor da localização e do tamanho dela. Também ajuda a destacar as características da propriedade, como uma piscina, dependências ou um grande quintal, além de elementos próximos, como vias, corpos d'água, montanhas ou parques.
Aumento do engajamento
A vista aérea impressionará seus clientes e, para ver todos os benefícios, o conteúdo precisa ser o mais fácil possível de descobrir. Nesta seção, falaremos sobre alguns padrões de design de implementação para que a vista aérea possa fazer isso.
Orientação do vídeo
É importante considerar a orientação da tela do dispositivo em que o vídeo da visualização aérea está carregando. Pode ser uma experiência do usuário ruim mostrar um vídeo no modo paisagem em um dispositivo móvel, especialmente em tela cheia. Ao mostrar um vídeo usando a proporção incorreta para o dispositivo, você desperdiçará uma quantidade significativa de espaço na tela.
Os vídeos de vista aérea são fornecidos nas orientações paisagem e retrato.
Confira abaixo um exemplo da diferença ao executar a vista aérea em um dispositivo móvel, na orientação recomendada e na orientação não recomendada:
Cartão de visita incorporado
Ao exibir várias propriedades em uma visualização de pesquisa de propriedade, é útil adicionar cartões de visita 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 têm uma ideia da propriedade de forma rápida e fácil, sem precisar clicar para acessar a página de detalhes.
O exemplo abaixo mostra um marcador que representa o complexo do Googleplex em Mountain View. Quando você passa o cursor sobre esse marcador, o cartão de informações é exibido, mostrando o vídeo da vista aérea da propriedade.
Um evento onClick pode ser adicionado ao marcador e ao cartão de informações incorporado para levar o usuário à página de detalhes da propriedade. Assim, é mais fácil para os usuários saberem mais sobre a propriedade e decidirem se é certa para eles.
Crie uma experiência semelhante a uma história para sua propriedade
Se você quiser criar uma experiência realmente imersiva para os compradores em potencial, mostre sua propriedade 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 inferior para ver mais detalhes sobre a propriedade. Esse botão leva o usuário à página de detalhes da propriedade.
Veja como funciona:
- Escolha suas fotos. Selecione várias fotos que destacam os melhores elementos da sua propriedade.
- Crie seu vídeo da vista aérea.
- 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 campanhas de marketing por e-mail.
Ao criar uma experiência semelhante a uma história para sua propriedade de vitrine, você é capaz de chamar a atenção de compradores em potencial.
Como iniciar a visualização aérea no carregamento da página
Nos estudos de UX do Google, notamos 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 visualizar os detalhes da propriedade. Quando pensando no custo, se você buscar um vídeo da vista aérea na API, você vai receber uma cobrança. Quando 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 visualização aérea atrás de um botão é considerado um antipadrão porque força os usuários a dar um passo extra para visualizar a visualização em 3D. Isso pode ser frustrante e também fazer com que eles percam os benefícios das visualizações em 3D ou se confundam com imagens aéreas como conteúdo estático.
É recomendável carregar a vista aérea por padrão quando um cliente quiser ver os detalhes da propriedade. Isso proporcionará uma ótima experiência ao usuário e os ajudará a tomar uma decisão informada sobre a propriedade. Ao criar 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 o carregamento pode demorar para alguns usuários.
Se a sua página tem um carrossel de imagens, o vídeo da vista aérea pode ser incluído como o item principal, permitindo que você integre facilmente a experiência 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 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 ter uma visualização parcial das imagens enquanto ainda está na visualização 3D. Essa é uma ótima maneira de oferecer aos usuários uma experiência mais imersiva e envolvente.
Design de 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 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 deve ser suave e perfeita. Se já houver uma seção na página com imagens, mapas e o Street View, o vídeo da vista aérea será exibido nessa mesma seção.
- Destaque: como essa será uma nova adição à 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 ter ênfase média ou alta, já que o pressionamento resulta em uma ação proeminente. O Google Material Design (link em inglês) tem algumas orientações sobre como criar botões com diferentes níveis de ênfase.
Aqui estão algumas dicas adicionais para projetar um botão eficaz de vista aérea:
- Use uma linguagem clara e concisa. O botão deve 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 que ele se destaque.
- Usar uma call-to-action. O botão precisa incluir uma call-to-action clara, como "Assista a vista aérea" ou "Assista o vídeo".
Considerações sobre a Rede de Display
Carregando vídeo
Considere as conexões mais lentas ao exibir uma visualização de imagem estática do vídeo e carregar a experiência completa em uma interação do usuário, como onClick. Além do vídeo sobre vista aérea, você também terá acesso a uma miniatura que pode ser usada para fazer isso.
Como você também terá acesso ao vídeo em diferentes resoluções, elas podem ser usadas estrategicamente para minimizar o tempo que o usuário precisa aguardar o carregamento da experiência em diferentes velocidades de conexão.
Atribuições de logotipo
Ao implementar a vista aérea, é necessário seguir todos os termos, incluindo a atribuição do logotipo. Consulte esta página para mais detalhes.
Conclusão
Esperamos que este artigo tenha ajudado você a pensar em como implementar a vista aérea no seu site, com alto engajamento do usuário.
É importante pensar em como o usuário 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
Leitura adicional sugerida:
- Melhorar a precisão da entrada de endereço na vista aérea
- Documentação do produto da API Aerial View
Colaboradores
O Google mantém este artigo. Ela foi escrita pelos colaboradores a seguir.
Autor principal:
Henrik Valve, engenheiro de soluções da Plataforma Google Maps