En este documento, se describen varios patrones y ideas de diseño para ayudarte a comenzar tu recorrido por Vista Aérea. Debes considerar cuidadosamente la forma en que presentas la vista aérea a tus clientes para asegurarte de que veas un buen nivel de participación con el producto y de que tus clientes vean su valor.
Aerial View agrega un componente visualmente atractivo a tu sitio web y muestra una vista general de una propiedad y sus alrededores.
Cuando los usuarios ven una propiedad en 3D, pueden hacerse 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 gran patio, además de los elementos cercanos, como rutas, cuerpos de agua, montañas o parques.
Cómo aumentar la participación
Aerial View será un factor sorprendente para tus clientes y, para ver el beneficio completo, 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 logre esto.
Orientación del video
Es importante considerar la orientación de la pantalla del dispositivo en el que se carga el video de Aerial View. Mostrar un video en orientación horizontal en un dispositivo móvil, en especial en pantalla completa, puede ser una mala experiencia del usuario. 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 vista aérea se proporcionan con orientación horizontal y vertical.
A continuación, se muestra un ejemplo de la diferencia entre ejecutar Vista aérea en un dispositivo móvil con la orientación recomendada y con la no recomendada:
Tarjeta de información personal incorporada
Cuando se muestran varias propiedades en una vista de búsqueda de propiedades, es útil agregar tarjetas flotantes incorporadas para mostrar el video de vista aérea, con información adicional sobre la propiedad, como la dirección y el precio superpuestos en la parte superior. Esto permite que los usuarios obtengan una idea de la propiedad de forma rápida y sencilla, 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 tarjeta emergente, que muestra el video de vista aérea de la propiedad.
Se puede agregar un evento onClick al marcador y a la tarjeta flotante incorporada para dirigir al usuario a la página de detalles de la propiedad. De esta manera, los usuarios pueden obtener más información sobre la propiedad y decidir si es adecuada para ellos.
Crea una experiencia como 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 combina 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.
A continuación, le indicamos cómo funciona:
- Elige tus fotos. Selecciona una variedad de 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 los compradores potenciales en tu sitio web o en las campañas de marketing por correo electrónico.
Si creas una experiencia similar a una historia para tu propiedad de catálogo de productos, podrás captar la atención de compradores potenciales.
Iniciando 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 este es un factor de forma nuevo y emocionante, queremos cargarlo en cuanto un cliente quiera ver los detalles de la propiedad. Cuando pienses en el costo, ten en cuenta que se te cobrará si recuperas un video de Vista aérea desde la API. Una vez que se solicite el video, considera habilitar 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 llevar a que se pierdan los beneficios de las vistas 3D o que confundan Aerial View como contenido estático.
Se recomienda cargar 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 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 30 MB o más, y que algunos usuarios podrían tardar en cargarse.
Si tienes un carrusel de imágenes como parte de tu página, el video de vista aérea se puede incluir como elemento principal, lo que te permite integrar fácilmente la experiencia 3D en el diseño existente de tu sitio web.
Colocar botones para cargar vistas 3D es fácil de implementar, pero puede reducir la participación. Google Maps carga las 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 del botón
Si decides usar un botón para acceder a la vista aérea, es importante que tengas en cuenta lo siguiente:
- Ubicación: El botón debe agruparse con otros botones relacionados con la cartografía para que los usuarios sepan que se relaciona 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 Vista aérea debe mostrarse en esa misma sección.
- Destacar: Como esta será una nueva incorporación a la página, es útil destacar el botón con una etiqueta de “nueva función” o una miniatura de imagen fija del video.
- Emphasis: El botón debe diseñarse con un énfasis medio o alto, ya que presionarlo realizará una acción destacada. Google Material Design tiene algunas instrucciones para diseñar botones con diferentes niveles de énfasis.
A continuación, se incluyen algunos consejos adicionales para diseñar un botón de vista aérea eficaz:
- Usa un lenguaje claro y conciso. El botón debe estar etiquetado de forma clara para que los usuarios sepan qué hace.
- Usa una fuente grande y legible. El botón debe ser lo suficientemente grande como para que los usuarios puedan verlo y hacer clic en él fácilmente.
- Usa un color que contraste. El botón debe ser de un color diferente al del texto y el fondo que lo rodea 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 vista aérea" o "Ver video".
Consideraciones sobre la pantalla
Cargando video
Te recomendamos que tengas en cuenta las conexiones más lentas. Para ello, muestra una vista previa de 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 podrás acceder a una miniatura que se puede usar para lograr este objetivo.
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 tiene que pasar esperando que la experiencia se cargue, en diferentes velocidades de conexión.
Atribuciones de logotipos
Cuando implementes Vista Aérea, debes asegurarte de cumplir con todos los términos, 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 a pensar en cómo te gustaría implementar 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, en especial la orientación de la pantalla, y la velocidad de conexión del usuario.
Próximos pasos
Lecturas adicionales sugeridas:
- Cómo mejorar 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 la escribieron originalmente.
Autor principal:
Henrik Valve | Ingeniero de Soluciones de Google Maps Platform