Este documento descreve vários padrões e ideias de design para você começar a usar sua Aerial View jornada. É preciso considerar cuidadosamente como você apresenta a Aerial View aos clientes para garantir um bom nível de engajamento com o produto e que os clientes percebam o valor dele.
A Aerial View 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 ideia melhor da localização e do tamanho dela. Isso 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 d'água, montanhas ou parques.
Aumentar o engajamento
A Aerial View será um fator surpreendente para seus clientes, e, para aproveitar ao máximo, 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 da Aerial View para alcançar esse objetivo.
Orientação do vídeo
É importante considerar a orientação da tela do dispositivo em que o vídeo da Aerial View está sendo carregado. Mostrar um vídeo orientado para paisagem em um dispositivo móvel, especialmente em tela cheia, pode gerar uma experiência ruim para o usuário. Ao exibir 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 nas orientações paisagem e retrato.
Abaixo, um exemplo da diferença entre executar a Aerial View em um dispositivo móvel na orientação recomendada e na não recomendada:
Cartão de visita incorporado
Ao mostrar várias propriedades em uma visualização de pesquisa de propriedades, é útil adicionar cartões de visita incorporados para mostrar o vídeo da Aerial View, com informações adicionais sobre a propriedade, como endereço e 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.
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 visita aparece, mostrando o vídeo da Aerial View da propriedade.
Um onClick evento pode ser adicionado ao marcador e ao cartão de visita incorporado para levar o usuário à página de detalhes da propriedade. Isso facilita o aprendizado dos usuários sobre a propriedade e a decisão 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 combine fotos e um vídeo da Aerial View.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 Aerial View em um dos slides, com um link na parte de baixo para conferir 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 uma variedade de 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 marketing por e-mail.
Ao criar uma experiência semelhante a uma história para sua propriedade, você poderá chamar a atenção de compradores em potencial.
Como iniciar a Aerial View no carregamento de página
Nos estudos de UX do Google, observamos que o maior engajamento do usuário ocorre quando a visualização 3D é carregada por padrão. Como esse é um formato novo e interessante, queremos carregá-lo assim que um cliente quiser conferir os detalhes da propriedade. Ao pensar no custo, se você estiver buscando um vídeo da Aerial View 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 Aerial View atrás de um botão é considerado um antipadrão porque força os usuários a fazer uma etapa extra para conferir 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 Aerial View com conteúdo estático.
Recomendamos que você carregue a Aerial View por padrão quando um cliente quiser conferir os detalhes da propriedade. Isso vai proporcionar uma ótima experiência do usuário e ajudar 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 Aerial View tem mais de 30 MB e pode ser lento para carregar para alguns usuários.
Se você tiver um carrossel de imagens como parte da sua página, o vídeo da Aerial View poderá ser incluído como o item principal, permitindo que você integre facilmente a experiência 3D ao design do seu site.
É fácil implementar botões para carregar visualizações 3D, mas isso 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 Aerial View, é importante considerar o seguinte:
- Localização: o botão precisa ser agrupado com outros botões relacionados ao mapa 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 Aerial View precisará ser mostrado 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 ênfase média ou alta, já que pressioná-lo vai realizar uma ação importante. O Google Material Design tem algumas orientações sobre como projetar botões com diferentes níveis de ênfase.
Confira algumas dicas adicionais para projetar um botão eficaz da Aerial View:
- 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 que se destaque.
- Use uma call-to-action. O botão precisa incluir uma call-to-action clara, como "Assistir a Aerial View" ou "Assistir ao vídeo".
Considerações sobre a exibição
Carregamento de vídeo
Talvez você queira 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 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, para que possam 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 Aerial View, você precisa seguir 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 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 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
Sugestões de leitura adicional:
Colaboradores
O Google mantém este artigo. Os colaboradores a seguir escreveram o artigo originalmente.
Autor principal:
Henrik Valve | Plataforma Google Maps Engenheiro de soluções