En este documento, se describen varias ideas y patrones de diseño que te ayudarán a comenzar tu viaje con Aerial View. La forma en que presentas la Vista aérea a tus clientes debe considerarse cuidadosamente para asegurarte de observar un buen nivel de participación con el producto y de que tus clientes vean su valor.
La vista aérea agrega un componente visualmente atractivo a tu sitio web, ya que muestra una vista general de una propiedad y sus alrededores.
Cuando los usuarios ven una propiedad en 3D, pueden obtener una mejor idea de su ubicación y tamaño. También ayuda a destacar las características de la propiedad, como una piscina, edificios externos o un patio grande, además de características cercanas, como rutas, masas de agua, montañas o parques.
Aumento de la participación
La vista aérea será un factor de sorpresa para tus clientes y, para aprovechar al máximo el beneficio, 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 que Aerial View lo logre.
Orientación del video
Es importante tener en cuenta la orientación de la pantalla del dispositivo en el que se está cargando el video de vista aérea. Puede ser una mala experiencia del usuario mostrar un video horizontal en un dispositivo móvil, especialmente en pantalla completa. Si muestras un video con una relación de aspecto incorrecta para el dispositivo, desperdiciarás una gran cantidad de espacio en pantalla.
Los videos de vista aérea se proporcionan en orientación horizontal y vertical.
A continuación, se muestra un ejemplo de la diferencia de ejecutar la vista aérea en un dispositivo móvil, con la orientación recomendada y la orientación no recomendada:
Tarjeta emergente incorporada
Cuando se muestran varias propiedades en una vista de búsqueda de propiedades, resulta útil agregar tarjetas emergentes incorporadas para mostrar el video de vista aérea con información adicional sobre la propiedad, como la dirección y el precio superpuestos. Esto permite a los usuarios tener una idea rápida y fácil de la propiedad, sin tener que hacer clic en su página de detalles.
En el siguiente ejemplo, se muestra un marcador que representa el complejo de Googleplex en Mountain View. Cuando colocas el cursor sobre este marcador, aparece la tarjeta emergente y se muestra el video de vista aérea de la propiedad.
Se puede agregar un evento onClick al marcador y a la tarjeta emergente 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 deseas 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 vista aérea.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 vista aérea en una de las diapositivas, con un vínculo en la parte inferior para ver más detalles sobre la propiedad. Este botón debería llevar al usuario a la página de detalles de la propiedad.
Aquí te mostramos cómo funciona:
- Elige las fotos. Selecciona varias fotos que destaquen las mejores características de tu propiedad.
- Crea tu video de Vista aérea.
- Combina tus fotos y videos en una historia.
- Comparta su historia. Comparte tu historia con compradores potenciales en tu sitio web o en campañas de marketing por correo electrónico.
Con la creación de una experiencia similar a una historia para tu propiedad de catálogo de productos, podrás captar la atención de los compradores potenciales.
Iniciando la vista aérea al cargar la página
En los estudios de UX de Google, observamos que la mayor participación de los usuarios se produce cuando la vista 3D se carga de forma predeterminada. Dado que se trata de un factor de forma nuevo y atractivo, queremos cargarlo en cuanto un cliente quiera ver los detalles de la propiedad. En cuanto al costo, se te cobrará si recuperas un video de Aerial View desde la API. Cuando se solicite el video, considera la reproducción automática para asegurarte de que los usuarios vean el beneficio.
Antipatrón: Ocultar la vista aérea 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 pierdan los beneficios de las vistas en 3D o que confundan la vista aérea como contenido estático.
Se recomienda que cargues la vista aérea de forma predeterminada cuando un cliente quiera ver los detalles de la propiedad. Esto brindará una excelente experiencia del usuario y los ayudará a tomar una decisión fundamentada sobre la propiedad. Cuando diseñes la experiencia de reproducción automática, ten en cuenta que el video de vista aérea pesa más de 30 MB y podría tardar en cargarse para algunos usuarios.
Si tienes un carrusel de imágenes como parte de la página, el video de vista aérea 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.
La implementación de botones para cargar vistas en 3D es fácil, 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 acceder a una vista parcial de las imágenes mientras estás en la vista 3D. Esta es una excelente manera de brindarles a los usuarios una experiencia más envolvente y atractiva.
Diseño del botón
Si eliges utilizar un botón para acceder a la Vista aérea, es importante que tengas en cuenta lo siguiente:
- Ubicación: El botón debe estar agrupado con otros botones relacionados con la asignación 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 fluida. Si ya hay una sección en la página que muestra imágenes, mapas y Street View, el video de Aerial View se debe mostrar en esa misma sección.
- Destacado: Dado que será una adición nueva a la página, es útil destacar el botón con una etiqueta de "nueva función" o una miniatura de imagen estática del video.
- Énfasis: El botón debe estar diseñado con un énfasis medio o alto, ya que si lo presionas se realizará una acción destacada. Google Material Design tiene orientación sobre cómo diseñar botones con diferentes niveles de énfasis.
A continuación, se incluyen algunas sugerencias adicionales para diseñar un botón de vista aérea eficaz:
- Usa un lenguaje claro y conciso. El botón debe estar claramente etiquetado para que los usuarios sepan lo que 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 con facilidad.
- Usa un color que contraste. El botón debe ser de un color diferente al texto que lo rodea y el fondo para que se destaque.
- Utilice un llamado a la acción. El botón debe incluir un llamado a la acción claro, como "Mirar vista aérea" o "Mirar video".
Consideraciones sobre la visualización
Cargando el video
Te recomendamos tener en cuenta las conexiones más lentas. Para ello, muestra una vista previa de una imagen fija del video y carga la experiencia completa en una interacción del usuario, como onClick. Además del video de Vista aérea, también tendrás acceso a una miniatura que se puede usar para lograrlo.
También tendrás acceso al video en diferentes resoluciones, de modo que se pueden usar estratégicamente para minimizar el tiempo que el usuario debe pasar esperando que se cargue la experiencia, con distintas velocidades de conexión.
Atribuciones de logotipos
Cuando implementes la vista aérea, debes asegurarte de seguir todas las condiciones, incluida la atribución de logotipos. Consulta esta página para obtener más detalles.
Conclusión
Esperamos que este artículo te haya inspirado para pensar cómo te gustaría implementar la vista aérea 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 el más apropiado para mostrarlo. También es bueno tener en cuenta el tipo de dispositivo en el que se reproducirá el video, especialmente la orientación de la pantalla, y la velocidad de conexión del usuario.
Próximos pasos
Lectura adicional sugerida:
- Cómo mejorar la precisión de la entrada de direcciones en la vista aérea
- Documentación del producto de Aerial View
Colaboradores
Google conserva este artículo. Los siguientes colaboradores la escribieron originalmente.
Autor principal:
Henrik Valve | Ingeniero de soluciones de Google Maps Platform