Diseño de apps inmobiliarias: rediseño de una pantalla de inicio, antes y después
Una pantalla de inicio inmobiliaria que te pide leerlo todo a la vez, y la misma pantalla corregida. Cada cambio lado a lado, la razón de cada uno y el archivo gratis de Figma.
Una pantalla de inicio inmobiliaria tiene un solo trabajo: llevar a una persona de "estoy buscando" a un anuncio que quiera abrir. El primer borrador de abajo no rompe nada. Todas las funciones funcionan. Solo le pide al lector que asimile todo a la vez: un campo de búsqueda, cinco categorías redondas, cuatro botones distintos, un banner y una tarjeta con nueve detalles pequeños.
La corrección mantiene todas las funciones y cambia el orden, el tamaño y el número de estilos.
La pantalla completa, antes y después
Borrador junior
Corregida
A la izquierda, el ojo se topa con un campo de búsqueda, cinco círculos de categoría, cuatro controles en tres estilos distintos, un banner azul de ancho completo, una estrella, una flecha, dos botones apilados en cada foto y un botón flotante de Mapa que tapa los detalles del anuncio. Nada está mal por sí solo. Juntos, no hay una primera cosa que leer.
A la derecha, la pantalla se lee de arriba abajo: quién eres, qué buscar, alquilar o comprar, qué tipo de vivienda y después un anuncio grande. El banner sigue ahí, pero espera abajo, más pequeño, donde no puede competir con la búsqueda.
| Borrador junior | Corregida | |
|---|---|---|
| Márgenes laterales | 12 a la izquierda, 16 a la derecha | 20 en cada fila |
| Tamaños de texto | 9 a 15 px | 11 a 22 pt, la escala tipográfica de iOS |
| Espaciado | Valores mezclados | 4, 8, 12, 16 |
| Estilos de control sobre los anuncios | 4 (relleno, simple, con borde, texto) | 2 (un botón de filtro y un control segmentado) |
| Banner promocional | 107 px de alto, encima de los anuncios | 68 px de alto, debajo de ellos |
| Pestañas | 5, con iconos rellenos y de contorno mezclados | 4, todos de contorno, pestaña activa en el azul de marca |
Corrección 1: una fila de búsqueda, un control de Alquilar o Comprar
Antes
Después
Un campo de búsqueda con borde y micrófono, cinco iconos de categoría redondos, luego un botón Alquilar relleno, la palabra Comprar sin estilo, un botón Ordenar con borde y un enlace Filtrar. Frente a un campo de búsqueda gris con un botón de filtro azul, y Alquilar y Comprar como dos mitades de un control segmentado.
El borrador pone cuatro controles en una fila y da a cada uno un aspecto distinto: Alquilar es un botón relleno, Comprar es texto sin más, Ordenar tiene borde y Filtrar es un enlace simple con icono. El lector tiene que averiguar cuáles son botones, cuáles pestañas y cuáles interruptores antes de usar cualquiera.
La corrección da una forma a cada tarea. Buscar y filtrar viven en la misma fila, porque filtrar es parte de buscar. Alquilar o Comprar es una elección entre exactamente dos cosas, que es para lo que sirve un control segmentado: ambas opciones siguen visibles y la elegida está claramente iluminada. Ordenar se aparta, porque solo importa cuando ya hay resultados.
Regla para reutilizar: si dos controles hacen el mismo tipo de trabajo, deben verse iguales. Si hacen trabajos distintos, no.
Corrección 2: categorías que muestran lo elegido
Antes
Después
Cinco círculos finos con borde y una etiqueta pequeña debajo de cada uno, donde solo la etiqueta azul indica que Apartamento está seleccionado. Frente a chips rellenos con un icono y una palabra en una línea, donde Apartamentos es azul sólido y los siguientes chips siguen saliéndose del borde.
En el borrador, la única señal de lo seleccionado es una etiqueta azul en texto pequeño bajo un círculo. Los círculos se ven idénticos, así que el ojo tiene que leer las etiquetas una por una para encontrar la activa.
Un chip con relleno sólido responde la pregunta antes de que se haga. El estado seleccionado es un color y un peso distintos, no una pequeña diferencia de texto. Los chips además son más anchos que altos, así que el icono y la palabra van en una línea y toda la fila ocupa menos altura. El chip cortado en el borde derecho muestra que la fila se desplaza, sin necesidad de flechas.
Corrección 3: una tarjeta de anuncio que se lee en orden
Antes
Después
Anuncios destacados con una estrella y una flecha, una foto con una insignia de "1 año" y botones de más y corazón, un $2,400 al mes en azul, etiquetas de Venta y Alquiler, una dirección, y detalles de habitaciones y baños cortados por un botón flotante de Mapa. Frente a una foto grande con esquinas redondeadas y un corazón, luego $2,400 al mes, apartamento de 2 habitaciones, Alfama, Lisboa y 2 hab, 2 baños, 980 pies cuadrados.
Una persona que mira una vivienda hace cuatro preguntas en el mismo orden: cuánto cuesta, qué es, dónde está y de qué tamaño es. La corrección pone la tarjeta en ese orden, una respuesta por línea. El precio es el texto más grande, luego el tipo de vivienda, luego líneas más ligeras para el lugar y los detalles.
El borrador mezcla las respuestas. El precio comparte línea con dos etiquetas que dicen Venta y Alquiler en una vivienda que solo es de alquiler. La dirección está encima de los detalles pero debajo del precio, en otro color. Los detalles son texto pequeño de 9 puntos y el último queda oculto bajo el botón de Mapa, así que el lector pierde la superficie, un número que la mayoría compara.
También se quitó de la foto la insignia de "1 año" y el botón de más. Dos botones flotantes en cada imagen piden decisiones que el lector aún no ha tomado. Un corazón basta, y la foto es más grande porque la foto es lo que vende la vivienda.
Regla para reutilizar: una tarjeta es una frase. Decide su orden de palabras y luego da a cada palabra un estilo.
Corrección 4: cuatro pestañas con un solo estilo de icono
Antes
Después
Inicio, Mis propiedades, Mensajes, Favoritos y Más, con iconos rellenos y de contorno mezclados. Frente a Inicio, Guardados, Mensajes y Perfil, todos con iconos de contorno y solo Inicio en azul.
El borrador tiene cinco pestañas, y tres se parecen: Mis propiedades, Favoritos y Más suenan a lugares donde podría estar una vivienda guardada o propia. Además sus iconos mezclan formas rellenas (la casa, los mensajes) con contornos (el edificio, el corazón), así que la pestaña activa cuesta distinguirla de una que simplemente está dibujada más pesada.
La corrección usa cuatro pestañas con un solo estilo de icono, de modo que la única diferencia entre pestañas es cuál está activa. "Favoritos" pasa a ser "Guardados", una palabra más corta que coincide con el corazón de la tarjeta. "Más" pasa a ser "Perfil", un nombre que dice lo que hay detrás. Las guías de Apple describen la barra de pestañas como navegación entre secciones de primer nivel, así que un destino que en realidad es un menú de sobras no pertenece ahí.
Las correcciones menores
- Un encabezado con una persona. La corrección añade un saludo, un avatar con iniciales en un círculo azul sólido y una campana con un punto rojo. El borrador no tiene encabezado, así que nada dice de quién es la app.
- Un solo margen. El borrador usa 12 a la izquierda y 16 a la derecha, así que nada se alinea con el borde de la pantalla. La corrección usa 20 a ambos lados en cada fila.
- Una sola escala de espaciado. Los huecos son de 4, 8, 12 o 16. Cuando cada hueco sale de la misma lista corta, las filas parecen relacionadas sin necesidad de divisores.
- Una escala de texto de la plataforma. El texto del borrador va de 9 a 15 px sin patrón. La corrección usa los tamaños de iOS de 11 a 22 pt, tamaños que la gente puede leer.
- Un banner más tranquilo. "Publica tu vivienda gratis" perdió la palabra de acento en cursiva, el contorno de casa y el segundo botón interior. Ahora es una sola fila con una flecha.
Audita tu propia app inmobiliaria
| Pregunta | Por qué importa |
|---|---|
| ¿Puedes nombrar la única cosa que la parte superior de la pantalla te pide hacer? | Sin una primera cosa que leer, todo se lee a la misma velocidad |
| ¿Dos controles que hacen el mismo trabajo se ven iguales? | Los estilos mezclados hacen que la gente adivine qué es un botón |
| ¿Se nota la categoría seleccionada desde el otro lado de la habitación? | Un estado seleccionado no debería necesitar lectura |
| ¿Cada tarjeta responde precio, vivienda, lugar, detalles en ese orden? | Es el orden en que la gente hace las preguntas |
| ¿Hay algún detalle oculto bajo un botón flotante? | Los metros cuadrados son el número que la gente compara |
| ¿Dos pestañas suenan como si llevaran al mismo sitio? | Las puertas duplicadas hacen dudar a dónde ir |
| ¿Cada fila usa el mismo margen izquierdo y derecho? | La alineación es la forma más barata de verse terminado |
Consigue el archivo de Figma
El archivo gratis incluye ambas pantallas, cada parte de la pantalla corregida como componente, las variables de color, los estilos de texto de iOS y un léeme con los créditos de las fotos.
Archivo gratis de Figma
Pantalla de inicio inmobiliaria, antes y después
Ambas pantallas y cada parte corregida como componentes de Figma. Gratis, solo lectura, duplícalo en tus borradores.
FAQ
¿Qué debe mostrar primero la pantalla de inicio de una app inmobiliaria?
Un campo de búsqueda con un botón de filtro, luego Alquilar o Comprar y el tipo de propiedad. Pon los anuncios justo debajo, con el banner y las ofertas secundarias después.
¿Cómo se deben mostrar Alquilar y Comprar en una app de propiedades?
Como un control segmentado de dos mitades, para que ambas opciones estén siempre visibles y la elegida esté claramente resaltada. Cuatro estilos de botón distintos en una fila hacen que la gente adivine.
¿Qué debe incluir una tarjeta de anuncio de propiedad?
Primero el precio, luego el tipo de vivienda, el lugar y los detalles clave como habitaciones, baños y superficie. Un botón de favorito en la foto es suficiente.
¿Cuántas pestañas debe tener una app inmobiliaria?
Cuatro es un buen número: Inicio, Guardados, Mensajes y Perfil. Evita dos pestañas que suenen al mismo lugar, como Favoritos y Mis propiedades.
¿Cómo se puede mostrar qué categoría está seleccionada?
Rellena el chip seleccionado con el color de marca y deja los demás neutros. Un pequeño cambio de color de texto bajo un círculo es fácil de pasar por alto.
Fuentes
- Ambas pantallas son nuestras, diseñadas y medidas en Figma.
- Fotos de Unsplash por Luke van Zyl, A. L. Brown y Annie Spratt, bajo la Licencia de Unsplash.
- Apple Human Interface Guidelines: Tab bars.
- Apple Human Interface Guidelines: Typography, los tamaños de texto de iOS.
- Publicado por primera vez como carrusel en App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
