5. WIREFRAMES 🔥

Los contenidos quedan clusterizados en 3 secciones con contenidos de mayor a menor relevancia para el usuario:

• Galería + Información esencial - información más relevante que todo usuario va a revisar.

• Descripción + Características - Información secundaria a la que los usuarios captados por la primera sección accederán.

• Mapa - Facilidad adicional para ver de una manera más visual la ubicación del inmueble en el mapa.

Los elementos se acompañan de iconos representativos, aportando una guía visual extra.

De este modo se palia la fatiga del usuario tratando de encontrar información concreta.

Puedes ver los wireframes completos en el archivo de Figma.

Wireframe de la ficha de producto

1. Galería de fotos del inmueble

Ofrecer una primera impresión visual del inmueble en la parte superior aprovecha el patrón natural de escaneó del usuario (arriba-abajo) y le facilita la decisión de seguir navegando o descartar.

Además, el análisis de plataformas líderes (ver página “1.Contexto”) nos muestra que la tendencia es ubicar la galería en la parte superior.

2. Botón de favoritos

Botón para guardar automáticamente en favoritos. Un clásico que permite al usuario clasificar de manera automática sus preferencias.

3. Información esencial

Tal y como se observa en el análisis de competidores, la información más importante para el usuario es: localización, precio total, metros cuadrados, número de habitaciones, baños, planta y precio por metro cuadrado.

Esta información se concentra en la parte principal, junto al botón de contacto.

4. Botón de contacto

Posición estratégica en la parte superior junto a la información esencial. De este modo se hace más accesible y se facilita al usuario su búsqueda, eliminando fricciones.

Por otro lado, al estar en la parte superior, teniendo en cuenta el escaneo del usuario (arriba/abajo) se aumentan las probabilidades de que el usuario contacte.

5. Descripción

Apartado de descripción libre para detallar el inmueble.

6. Características

Características del inmueble acompañadas de un icono para dotar de un recurso extra que aporta facilidades a la búsqueda de información concreta.

7. Mapa

La ubicación del inmueble aparece en la información superior. Sin embargo, un mapa en la parte inferior ofrece al usuario, de manera complementaria, facilidad de comprensión visual.

Detalle de la galería de imágenes del inmueble

Para solucionar el pain point relacionado con la distribución y dejar clara la ubicación de cada foto en la galería de fotos del inmueble es se han tomado tres medidas opcionales de visualizar el interior dle inmueble.

1. Etiquetado de las imágenes

Proveer a cada imagen de un título descriptivo indicando la estancia a la que hace referencia, este recurso despeja dudas al usuario.

Wireframe detalle del etiquetado de las imágenes

1. Plano con imágenes

Esta opción permite abrir un plano donde y visualizar dentro de cada espacio las fotos asociadas. De este modo es más sencillo entender la distribución y visualizar su contenido.

Wireframe detalle del la opción de plano con imágenes

1. Tour virtual

Opción muy potente que permite al usuario ver de manera inmersiva el inmueble y desplazarse por el interior de manera virtual.

Se plantea el siguiente proveedor: matterport.com

Imagen de estudibasic.com