En este documento, se describen varios patrones de diseño e ideas para que comiences a usar Aerial View. Debes considerar cuidadosamente cómo presentar Aerial View a tus clientes para asegurarte de que obtengas un buen nivel de participación con el producto y que tus clientes vean su valor.
Aerial View agrega un componente visualmente atractivo a tu sitio web, que muestra una vista aérea de una propiedad y sus alrededores.
Cuando los usuarios ven una propiedad en 3D, pueden tener una mejor idea de su ubicación y tamaño. También ayuda a destacar las características de la propiedad, como una piscina, dependencias o un patio grande, además de las características cercanas, como caminos, cuerpos de agua, montañas o parques.
Haz que aumente la participación
Aerial View será un factor sorpresa para tus clientes, y para que vean todos los beneficios, el contenido debe ser lo más fácil posible de descubrir. En esta sección, hablaremos sobre algunos patrones de diseño de implementación para Aerial View para lograr esto.
Orientación del video
Es importante tener en cuenta la orientación de la pantalla del dispositivo en el que se carga el video de Aerial View. Puede ser una mala experiencia del usuario mostrar un video con orientación horizontal en un dispositivo móvil, en especial en pantalla completa. Si muestras un video con la relación de aspecto incorrecta para el dispositivo, desperdiciarás una cantidad significativa de espacio en pantalla.
Los videos de Aerial View se proporcionan en orientación horizontal y vertical.
A continuación, se puede ver un ejemplo de la diferencia entre ejecutar Aerial View en un dispositivo móvil con la orientación recomendada y la no recomendada:
Información en el gráfico de segmento incorporada
Cuando se muestran varias propiedades en una vista de búsqueda de propiedades, es útil agregar información en el gráfico de segmento incorporada para mostrar el video de Aerial View, con información adicional sobre la propiedad, como la dirección y el precio superpuestos. Esto permite que los usuarios tengan una idea rápida y sencilla de la propiedad, sin tener que hacer clic en la página de detalles de la propiedad.
En el siguiente ejemplo, se muestra un marcador que representa el complejo Googleplex en Mountain View. Cuando colocas el cursor sobre este marcador, aparece la información en el gráfico de segmento, que muestra el video de Aerial View de la propiedad.
Se puede agregar un evento onClick al marcador y a la información en el gráfico de segmento incorporada para llevar al usuario a la página de detalles de la propiedad. Esto permite que los usuarios obtengan más información sobre la propiedad y decidan si es adecuada para ellos.
Crea una experiencia similar a una historia para tu propiedad
Si quieres crear una experiencia realmente envolvente para los compradores potenciales, puedes mostrar tu propiedad con una experiencia similar a una historia que combine fotos y un video de Aerial View.Esto se puede crear de manera similar a un carrusel de imágenes, con una combinación de HTML, CSS y JavaScript.
En el ejemplo anterior, incluimos el video de Aerial View en una de las diapositivas, con un vínculo en la parte inferior para ver más detalles sobre la propiedad. Este botón debe llevar al usuario a la página de detalles de la propiedad.
Aquí te mostramos cómo funciona:
- Elige tus fotos. Selecciona una variedad de fotos que destaquen las mejores características de tu propiedad.
- Crea tu video de Aerial View.
- Combina tus fotos y videos en una historia.
- Comparte tu historia. Comparte tu historia con compradores potenciales en tu sitio web o en campañas de marketing por correo electrónico.
Si creas una experiencia similar a una historia para tu propiedad destacada, podrás captar la atención de los compradores potenciales.
Cómo iniciar Aerial View cuando se carga la página
En los estudios de UX de Google, vemos que la mayor participación de los usuarios se produce cuando la vista 3D se carga de forma predeterminada. Como se trata de un factor de forma nuevo y emocionante, queremos cargarlo tan pronto como un cliente quiera ver los detalles de la propiedad. Si piensas en el costo, se te cobrará si recuperas un video de Aerial View de la API. Una vez que se solicite el video, considera la reproducción automática para asegurarte de que los usuarios vean el beneficio.
Antipatrón: Ocultar Aerial View detrás de un botón se considera un antipatrón porque obliga a los usuarios a realizar un paso adicional para ver la vista 3D. Esto puede ser frustrante y también puede hacer que se pierdan los beneficios de las vistas 3D o que confundan Aerial View con contenido estático.
Te recomendamos que cargues Aerial View de forma predeterminada cuando un cliente quiera ver los detalles de la propiedad. Esto brindará una excelente experiencia del usuario y lo ayudará a tomar una decisión informada sobre la propiedad. Cuando diseñes la experiencia de reproducción automática, ten en cuenta que el video de Aerial View tiene más de 30 MB y que podría tardar en cargarse para algunos usuarios.
Si tienes un carrusel de imágenes como parte de tu página, el video de Aerial View se puede incluir como el elemento principal, lo que te permite integrar fácilmente la experiencia 3D en el diseño de tu sitio web existente.
Colocar botones para cargar vistas 3D es fácil de implementar, pero puede reducir la participación. Google Maps carga vistas 3D de forma predeterminada. Por ejemplo, cuando buscas el Empire State Building, la vista 3D se carga automáticamente y puedes ver una vista parcial de las imágenes mientras aún estás en la vista 3D. Esta es una excelente manera de brindar a los usuarios una experiencia más envolvente y atractiva.
Diseño de botones
Si decides usar un botón para acceder a Aerial View, es importante tener en cuenta lo siguiente:
- Ubicación: El botón debe agruparse con otros botones relacionados con los mapas para que los usuarios sepan que está relacionado con la ubicación de la propiedad.
- Transición: La transición al video debe ser fluida y sin interrupciones. Si ya hay una sección en la página que muestra imágenes, mapas y Street View, el video de Aerial View debe mostrarse en esa misma sección.
- Destacado: Como esta será una nueva incorporación a la página, es útil destacar el botón con una etiqueta de "función nueva" o una miniatura de imagen fija del video.
- Énfasis: El botón debe diseñarse con un énfasis medio o alto, ya que, si se presiona, se realizará una acción destacada. Google Material Design tiene algunas instrucciones sobre cómo diseñar botones con diferentes niveles de énfasis.
Estas son algunas sugerencias adicionales para diseñar un botón de Aerial View eficaz:
- Usa un lenguaje claro y conciso. El botón debe estar claramente etiquetado para que los usuarios sepan qué hace.
- Usa una fuente grande y legible. El botón debe ser lo suficientemente grande para que los usuarios puedan verlo y hacer clic en él fácilmente.
- Usa un color contrastante. El botón debe tener un color diferente al texto y al fondo circundantes para que se destaque.
- Usa un llamado a la acción. El botón debe incluir un llamado a la acción claro, como "Ver Aerial View" o "Ver video".
Consideraciones sobre la visualización
Cargando video
Es posible que quieras tener en cuenta las conexiones más lentas mostrando una vista previa de imagen fija del video y cargando la experiencia completa en una interacción del usuario, como onClick. Junto con el video de Aerial View, también tendrás acceso a una miniatura que se puede usar para lograr esto.
También tendrás acceso al video en diferentes resoluciones, por lo que se pueden usar estratégicamente para minimizar el tiempo que el usuario debe esperar para que se cargue la experiencia, en diferentes velocidades de conexión.
Atribuciones de logotipos
Cuando implementes Aerial View, debes asegurarte de cumplir con todas las condiciones, incluida la atribución del logotipo. Consulta esta página para obtener más detalles.
Conclusión
Esperamos que este artículo te haya inspirado para pensar en cómo te gustaría implementar Aerial View en tu sitio web, con una alta participación de los usuarios.
Es importante pensar en cómo el usuario descubrirá el contenido y en qué formato sería más adecuado mostrarlo. También es bueno tener en cuenta el tipo de dispositivo en el que se reproducirá el video, en especial la orientación de la pantalla y la velocidad de conexión del usuario.
Próximos pasos
Lectura adicional sugerida:
- Mejora la precisión de la entrada de dirección en Aerial View
- Documentación del producto Aerial View
Colaboradores
Google mantiene este artículo. Los siguientes colaboradores lo escribieron originalmente.
Autor principal:
Henrik Valve | Google Maps Platform Ingeniero de soluciones