Este documento descreve vários padrões de design e ideias para você começar sua jornada de visão aérea. A forma como você apresenta o Aerial View aos 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 panorâmica de uma propriedade e dos arredores.
Quando os usuários veem uma propriedade em 3D, eles têm uma ideia melhor do local e do tamanho dela. Também ajuda a destacar os recursos da propriedade, como piscina, edifícios externos ou um grande quintal, além de recursos próximos, como estradas, corpos hídricos, montanhas ou parques.
Aumento do engajamento
O Street View vai impressionar seus clientes. Para aproveitar ao máximo os benefícios, o conteúdo precisa ser o mais fácil possível de encontrar. Nesta seção, vamos falar sobre alguns padrões de design de implementação para o Aerial View para fazer isso.
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 orientado para paisagem em um dispositivo móvel pode ser uma experiência ruim para o usuário, principalmente em tela cheia. Ao mostrar um vídeo usando a proporção incorreta para o dispositivo, você vai desperdiçar uma quantidade significativa de espaço da tela.
Os vídeos da Aerial View são fornecidos na orientação paisagem e retrato.
Abaixo, um exemplo da diferença pode ser visto 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 propriedades, é útil adicionar cartões de informações incorporados para exibir o vídeo da vista aérea, com mais informações sobre a propriedade, como o endereço e o preço sobrepostos. Isso permite que os usuários tenham 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 cartão de informações é exibido, mostrando o vídeo de vista aérea da propriedade.
Um evento onClick pode ser adicionado ao marcador e ao hovercard incorporado para levar o usuário à página de detalhes da propriedade. Isso facilita para os usuários saberem mais sobre a propriedade e decidirem se ela é adequada para eles.
Criar uma experiência semelhante a uma história para sua propriedade
Se você quiser criar uma experiência verdadeiramente imersiva para compradores em potencial, mostre sua propriedade com uma experiência semelhante a uma história que combina fotos e um vídeo com 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 conferir mais detalhes sobre a propriedade. Esse botão precisa levar o usuário à página de detalhes do imóvel.
Veja como funciona:
- Escolha suas fotos. Selecione várias fotos que destaquem os melhores recursos do seu imóvel.
- Crie seu vídeo com 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 em campanhas de marketing por e-mail.
Ao criar uma experiência semelhante a uma história para sua propriedade de destaque, você vai conseguir capturar a atenção de compradores em potencial.
Como iniciar a vista aérea no carregamento de página
Nos estudos de UX do Google, notamos que o maior engajamento 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 conferir os detalhes do imóvel. Ao pensar em custo, se você estiver buscando um vídeo de vista aérea da 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:esconder a visualização aérea atrás de um botão é considerado um antipadrão, porque obriga os usuários a realizar uma etapa extra para acessar a visualização 3D. Isso pode ser frustrante e também pode fazer com que eles percam os benefícios das visualizações 3D ou confundam a visualização aérea com conteúdo estático.
É recomendável carregar a visualização aérea por padrão quando um cliente quiser conferir os detalhes da propriedade. Isso vai proporcionar uma ótima experiência do usuário e ajudá-lo a tomar uma decisão informada 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 como parte da sua página, o vídeo do Street View aéreo poderá 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 3D é fácil de implementar, mas pode reduzir o engajamento. O Google Maps carrega visualizações 3D por padrão. Por exemplo, quando você pesquisa o Empire State Building, a visualização 3D é carregada automaticamente, e você pode conferir 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 do botão
Se você optar por usar um botão para acessar a visualização 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 do Aerial View vai aparecer 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 do vídeo.
- Emphasis: o botão precisa ser projetado com uma ênfase média ou alta, porque pressioná-lo vai realizar uma ação importante. O Material Design do Google tem algumas orientações sobre como projetar botões com diferentes níveis de ênfase.
Confira outras dicas para projetar um botão de visualização aérea eficiente:
- Use uma linguagem clara e concisa. O botão precisa ser claramente identificado 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 pelos usuários com facilidade.
- 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
Carregamento de vídeo
Você pode considerar conexões mais lentas, mostrando uma visualização de imagem estática do vídeo e carregando a experiência completa em uma interação do usuário, como o clique. 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. Elas podem ser usadas estrategicamente para minimizar o tempo que o usuário tem que esperar pela experiência ser carregada em diferentes velocidades de conexão.
Atribuições de logotipo
Ao implementar o Street View, é necessário seguir todos os termos, incluindo a atribuição do logotipo. Consulte esta página para detalhes.
Conclusão
Esperamos que este artigo tenha inspirado 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 vai descobrir o conteúdo e em qual formato seria mais apropriado para mostrar. 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
Este artigo é mantido pelo Google. Os colaboradores a seguir escreveram o post originalmente.
Autor principal:
Henrik Valve | Engenheiro de soluções da Plataforma Google Maps