Diseño de apps de alquiler de coches: rediseño de la pantalla de inicio, antes y después

Una app de alquiler tiene un solo trabajo en su pantalla de inicio: llevar a alguien al coche que quiere. El primer borrador de abajo tiene todo lo que un conductor necesita, pero abre con un formulario de cinco campos, grita 25% de descuento en un banner que no apunta a nada y deja los coches para el final, a 100 por 60 píxeles y con sus especificaciones en texto de 8 px.

La corrección mantiene cada función y pone los coches primero. Sigue el diseño de Turo: fondo blanco, un campo de búsqueda y tarjetas de coche a todo el ancho con el precio bajo la foto. Cada cambio de abajo se puede copiar.

La pantalla completa, antes y después

Borrador júnior

Corregida

A la izquierda, los coches son lo más pequeño de la pantalla. Antes de ver uno, el conductor pasa por cinco campos de formulario, una casilla, un botón, un banner y tres desplegables. Cada coche es una miniatura de 100 por 60 con especificaciones de 8 px y un botón BOOK.

A la derecha, la pantalla se lee en el orden en que decide un conductor: dónde, qué tipo, qué coche. La búsqueda es un campo de 48 px, las fotos de los coches son de 350 por 190 y el texto va de 13 a 18 px frente a los 8 a 15 px del borrador.

Qué cambió, medido

Arreglo 1: reúne el formulario en un solo campo

Antes

Después

Find a Rental Car con un lugar de recogida, un lugar de devolución, una fecha de recogida, una fecha de devolución, una casilla de edad del conductor con un enlace Change, un botón naranja Search Cars y una línea de letra pequeña. Frente a un único campo redondeado: una lupa, Pick up at SFO, y Nov 8 to 10 en el borde derecho.

El borrador pide al conductor rellenar un formulario antes de mostrar un solo coche. La mayoría de las respuestas ya se conocen: la devolución es en el mismo sitio que la recogida, la edad es 25 o más y las fechas son este fin de semana. El formulario las pide todas igualmente, con el mismo peso, así que lo único que el conductor debe decidir recibe la misma atención que las cuatro que no tocará.

La pantalla corregida conserva las dos respuestas que importan, dónde y cuándo, y las pone en un campo. Es el mismo patrón que usa Uber en su campo de destino. Tócalo y se abre una hoja con devolución, hora de regreso y edad del conductor, así que no se quitó nada, solo se movió a un toque de distancia.

Regla para reutilizar: muestra los valores por defecto, pregunta solo lo que cambia.

Arreglo 2: pon la oferta en un coche real

Antes

Después

Un banner naranja a todo el ancho: UP TO 25% OFF THIS WEEKEND!!! con *T&C apply a la derecha. Frente a una tarjeta de coche alta: una etiqueta de 25% off sobre la foto, Sport Coupe, 2 plazas y Auto, $89/día y $119 tachado.

Un banner que dice "hasta 25% de descuento" no dice en qué. El conductor tiene que desplazarse y adivinar a qué coche se aplica, y los tres signos de exclamación y el "T&C apply" en letra de 10 px parecen más una advertencia que una oferta.

En la pantalla corregida el descuento está en el coche al que pertenece. Una etiqueta pequeña sobre la foto dice 25% off, y la línea de precio muestra $89/día con los $119 antiguos al lado. $119 menos 25% son $89,25, así que la cifra es honesta y la oferta por fin tiene algo que vender. Turo hace lo mismo, con la oferta en el anuncio en vez de encima.

Regla para reutilizar: una oferta necesita un objeto. Pégala a lo que rebaja.

Arreglo 3: cambia tres desplegables por una fila

Antes

Después

Tres desplegables iguales que dicen Type, Price y Seats, cada uno con un chevron. Frente a una fila de chips en forma de píldora: All seleccionado en negro, luego Electric, SUV, Coupe y Convertible saliéndose por el borde derecho.

Un desplegable esconde sus opciones hasta que se toca, así que el conductor tiene que abrir Tipo para saber que existen Eléctrico, SUV y Cupé. Tres juntos además dan a Precio y Plazas el mismo peso que al único filtro que la gente usa de verdad, el tipo de coche.

Los chips muestran las opciones sin un toque. El chip seleccionado va relleno de negro, la fila se desliza y el último chip queda cortado por el borde de la pantalla, lo que indica al conductor que hay más. Precio y Plazas siguen existiendo, ahora se abren desde los filtros del campo de búsqueda.

Regla para reutilizar: si un filtro tiene cinco valores o menos, muéstralos. No los escondas tras un menú.

Arreglo 4: da a cada coche una foto a todo el ancho

Antes

Después

Cuatro filas bajo Popular Cars, cada una con una foto de 100 por 60, un nombre, una línea de especificaciones en 8 px, un precio y un botón naranja BOOK. Frente a dos tarjetas a todo el ancho: una foto de 350 por 190 con un corazón, luego el nombre y el precio en una línea y una línea de detalle debajo.

Este es el producto, y el borrador le da el menor espacio. A 100 por 60 un coche es una mancha de color. La línea de especificaciones mete plazas, caja de cambios, combustible, tiempo de 0 a 100, seguro y una valoración en 8 px, así que nada se lee y todo compite con el precio.

La tarjeta corregida da al coche una foto de 350 por 190 con esquinas redondeadas y pone el nombre y el precio diario en una línea. Debajo va una línea de detalle de 13 px, plazas y caja de cambios. El botón BOOK desaparece porque toda la tarjeta es el botón: tócala y la página del propio coche muestra las especificaciones, las valoraciones y Book.

Regla para reutilizar: una lista de productos es una lista de fotos. Todo lo que no sea la foto, el nombre o el precio va un toque más adentro.

Los arreglos menores

• Un solo color de marca. El naranja (#FF5A1F) marca la etiqueta de 25% off y nada más. El borrador lo usa en el banner, el botón de búsqueda, la casilla, el enlace Change, cuatro botones BOOK y la pestaña activa.
• Un margen mayor. 20 px a ambos lados en lugar de 14 a la izquierda y 12 a la derecha, con 14 entre bloques.
• Una cabecera más calmada. El corazón y la campana del borrador están junto al logotipo. La cabecera corregida conserva la campana, y el corazón ahora es la pestaña Saved.
• Una barra de pestañas flotante. Cuatro pestañas (Explore, Trips, Saved, Profile) en una barra flotante de 62 px, y el tercer coche pasa por debajo, lo que dice que la página sigue.
• Un solo estilo de iconos. En la barra de pestañas del borrador se mezclaban iconos rellenos y de contorno, ahora todos son de contorno.
• Nombres que coinciden con tareas. Bookings pasó a ser Trips, y Search pasó a ser el campo de arriba.
• Texto recortado. "Car of the Week" y la línea de 0 a 100 desaparecen, ya que ninguna ayudaba a elegir un coche.

Audita tu propia app de alquiler

Consigue el archivo de Figma

El archivo gratuito tiene el borrador júnior, la pantalla corregida y cada parte como componente.

Archivo de Figma gratis

Rediseño de la pantalla de inicio de alquiler de coches, antes y después

Las dos pantallas y cada parte como componente de Figma. Gratis, solo lectura, duplícalo en tus borradores.

Abrir en Figma

FAQ

¿Cómo se debe diseñar la pantalla de inicio de una app de alquiler de coches?

Abre con un campo de búsqueda con el lugar de recogida y las fechas, luego una fila de tipos de coche, luego tarjetas de coche a todo el ancho con el nombre y el precio bajo cada foto. Deja la devolución, la hora de regreso y la edad del conductor a un toque del campo de búsqueda.

¿Cuántos campos debe tener la búsqueda de un alquiler de coches?

Tan pocos como necesite la primera pantalla: dónde y cuándo. La devolución, la hora de regreso y la edad del conductor suelen mantener sus valores por defecto, así que pueden ir en una hoja que se abre desde el campo de búsqueda.

¿Dónde debe ir el descuento de un alquiler de coches?

En el coche al que se aplica. Una etiqueta en la foto y el precio antiguo tachado junto al nuevo, como $119 y $89/día, dice al conductor qué está rebajado y cuánto. Un banner que no apunta a nada no lo hace.

¿Los tipos de coche deben ser desplegables o chips?

Chips, cuando hay unos cinco. Una fila deslizable muestra All, Electric, SUV, Coupe y Convertible sin un toque, y un chip cortado por el borde de la pantalla indica que hay más.

¿De qué tamaño deben ser las fotos de coches en una app de alquiler?

Todo el ancho de la columna, unos 350 por 190 píxeles en un móvil. Una miniatura de 100 por 60 convierte un coche en una mancha de color, y el conductor no puede juzgarlo.

Fuentes

• Las dos pantallas son nuestras, diseñadas y medidas en Figma. La app, Torque, los precios y las especificaciones son inventados, y no se nombra ninguna marca ni modelo. El diseño sigue a Turo: fondo blanco, un campo de búsqueda y tarjetas de coche a todo el ancho con el precio bajo la foto. La búsqueda de un solo campo sigue al campo de destino de Uber.
• $119 menos 25% son $89,25, mostrado como $89/día.
• Los iconos son de Phosphor (MIT). La barra de estado está dibujada a partir de una captura real medida de un iPhone.
• Las fotos son de Pexels: Dextar Studio, Jae Park, miata7 MX-5, Furkan Ceylan y Can AGBULUT.
• Publicado por primera vez como carrusel en App Brainy.