Diseño de apps de navegación: rediseño de la pantalla de conducción, antes y después

Una pantalla de conducción tiene una sola regla: el conductor dispone de un segundo por mirada, y el próximo giro tiene que leerse en ese segundo. El primer borrador de abajo mete el giro en una frase de 11 px dentro de una barra verde, y luego rodea la carretera con diecisiete controles, un anuncio y cuatro pines en el mapa. Tiene todas las funciones que un conductor podría querer, y ninguna se puede leer a velocidad de crucero.

El arreglo conserva todas las funciones. Hace del próximo giro lo más grande de la pantalla y saca de la carretera todo lo que no tenga que ver con el próximo minuto.

La pantalla completa, antes y después

Borrador junior

Arreglada

A la izquierda, la instrucción es una frase. El conductor tiene que leer "En 400 ft gira a la derecha en 16th St, luego continúa 0.2 mi y gira a la izquierda en Mission St" a 11 px mientras el coche se mueve. La ruta es una línea fina de 4 px, el coche es un punto de 13 px, y un anuncio de café y cuatro pines compiten con la carretera por la atención. La barra de pestañas se come la parte inferior de la pantalla aunque nadie cambia de pestaña mientras conduce.

A la derecha, la pantalla tiene tres bloques: el giro arriba, la carretera en el medio y el viaje abajo. La ruta es lo bastante ancha para seguirla, el coche es una ficha clara, y el mapa muestra solo la carretera.

Qué cambió, medido

Arreglo 1: convierte la frase en una instrucción grande

Antes

Después

Una barra verde fina con una línea de texto pequeño que nombra dos giros, frente a una tarjeta verde con una gran flecha de giro, "400 ft" y "16th St", y un pequeño chip "Luego" con una flecha a la izquierda pegado bajo su borde izquierdo.

Un conductor necesita tres datos: hacia dónde, a qué distancia y dónde. La frase los contiene, pero en el orden en que una persona los dice, así que el ojo tiene que leer de izquierda a derecha para encontrar el que importa. El segundo giro queda enterrado al final, donde se lee último o nunca.

El arreglo da a cada dato su propio tamaño. La flecha dice hacia dónde, los 400 ft dicen a qué distancia, y el nombre de la calle va debajo en un tamaño menor porque es lo que se contrasta con el cartel de la calle. El segundo giro pasa a ser un chip pequeño fijado a la tarjeta, de modo que se lee como "y luego" y no como una segunda instrucción de igual peso.

Regla para reutilizar: cuando una persona tiene un segundo, convierte una frase en una forma y un número.

Arreglo 2: deja dos botones en el mapa

Antes

Después

Un mapa con cinco botones por el borde derecho (capas, coche, brújula, bandera y volumen, unos redondos y otros cuadrados), una pila de zoom a la izquierda, un anuncio de café y cuatro pines, frente a un mapa limpio con solo dos botones blancos redondos abajo a la derecha: recentrar y volumen.

Cada botón en la carretera es algo que el conductor puede sentir la tentación de tocar en movimiento. El borrador tiene cinco a la derecha, dos de zoom a la izquierda, y una mezcla de círculos y cuadrados que hace que cada uno parezca un tipo de cosa distinto. El anuncio y los cuatro pines añaden más objetivos y más color sobre la ruta.

El arreglo conserva los dos que un conductor usa a mitad de viaje: recentrar, cuando se ha arrastrado el mapa, y volumen. El zoom es un pellizco. Los botones de capas, tráfico, brújula y reportar pasan detrás de un chevron en la barra de viaje, así que no se borró nada, se movió a donde un pasajero o un coche aparcado puede alcanzarlo. El anuncio y los pines desaparecen de la carretera, porque la ruta es lo único que debe llevar color.

Regla para reutilizar: cuantas menos cosas se puedan tocar con el coche en marcha, menos toques ocurren.

Arreglo 3: dibuja el límite de velocidad como la señal

Antes

Después

Una cajita que dice LIMIT 25 y un círculo oscuro que dice 23 mph apilados en el borde izquierdo del mapa, frente a un solo chip blanco con una señal de límite de velocidad con SPEED LIMIT y un 25 grande, junto a un 23 grande y una pequeña mph.

Los conductores ya saben cómo es una señal de límite de velocidad: blanca, borde negro, las palabras SPEED LIMIT, un número grande. El borrador usa una cajita y un círculo oscuro que no se parecen a nada que el conductor haya visto, y los pone uno encima del otro para que haya que compararlos.

El arreglo dibuja la señal real a 48 por 60 pt, con un borde de 2 px y el número a 26 pt, y pone la velocidad actual justo al lado a 32 pt. Lado a lado, los dos números responden una pregunta: ¿me estoy pasando? Eso lleva un vistazo, sin leer.

Regla para reutilizar: cuando un objeto real ya carga el significado, dibuja el objeto real.

Arreglo 4: reduce el viaje a lo que consultas

Antes

Después

Una línea de 10 px que dice 18 min (4.2 mi), Llegada 9:59 AM, Ruta más rápida, Tráfico fluido, sobre cinco botones iguales: Salir, Pasos, Compartir, Buscar y Añadir parada, frente a una hoja blanca con 18 min en letra verde grande, 4.2 mi y 9:59 AM debajo, un botón rojo de Finalizar y un chevron.

Durante un viaje un conductor consulta tres cosas: cuánto falta, cuántas millas y a qué hora llega. El borrador las mete en una línea de 10 px con dos datos más, y luego añade cinco botones iguales en mayúsculas de 9 px, de modo que "Salir", el que termina el viaje, se ve igual que "Compartir".

El arreglo pone el tiempo restante a 24 pt en verde, la distancia y la llegada debajo, y una sola píldora roja de Finalizar. Roja porque terminar un viaje es la única acción con coste. Pasos, Compartir, Buscar y Añadir parada pasan detrás del chevron, a un toque de distancia para un pasajero.

Regla para reutilizar: dale al número que más se consulta el mayor espacio, y dale a la única acción costosa el único color de advertencia.

Los arreglos menores

• Un segundo mapa. La pantalla arreglada tiene su propio mapa, recortado más ancho y con el coche abajo en la pantalla, así la ruta sube y se aleja del coche y muestra la carretera por delante en vez de la que ya recorriste.
• Un borde limpio. La ruta tiene un borde blanco de 14 px bajo una línea azul de 9 px, así se sigue leyendo tanto sobre carreteras amarillas como sobre bloques grises.
• Sin barra de pestañas. Las cinco pestañas se quitaron de la vista de conducción. Conducir, Explorar, Guardados, Viajes y Perfil son para cuando el coche está aparcado.
• Una sola forma para los botones. Solo círculos, de 40 pt, para que los objetivos parezcan objetivos.

Audita tu propia pantalla de conducción

Consigue el archivo de Figma

El archivo gratis tiene ambas pantallas, con cada pieza arreglada como componente.

Archivo gratis de Figma

Rediseño de navegación para conducir, antes y después

Ambas pantallas y cada pieza como componente de Figma. Gratis, solo lectura, duplícalo en tus borradores.

Abrir en Figma

FAQ

¿Qué debe mostrar la pantalla de una app de navegación mientras se conduce?

El próximo giro, la distancia hasta él, el nombre de la calle, la velocidad actual y el límite de velocidad, el tiempo restante y una forma de terminar el viaje. Todo lo demás puede quedar detrás de un toque.

¿Qué tamaño debe tener la instrucción de giro en una app de conducción?

Lo bastante grande para leerse de un vistazo: en este rediseño la flecha mide 52 pt y la distancia 28 pt. Una frase de una línea a 11 px hay que leerla, y un conductor no tiene tiempo de leer.

¿Cuántos botones debe tener una pantalla de mapa mientras se conduce?

Con dos basta: recentrar y volumen. El zoom es un pellizco, y capas, tráfico y reportar pueden quedar detrás de un chevron para un pasajero o un coche aparcado.

¿Cómo se debe mostrar un límite de velocidad en una app?

Como la señal que los conductores ya conocen, con borde, las palabras SPEED LIMIT y un número grande, junto a la velocidad actual para poder comparar las dos de un vistazo.

¿Por qué quitar la barra de pestañas de una pantalla de navegación?

Nadie cambia de pestaña mientras conduce, y la barra le quita espacio y atención a la carretera. Vuelve cuando termina el viaje.

¿De qué color debe ser el botón de terminar viaje?

Rojo, y debe ser el único rojo de la pantalla. Terminar un viaje es la única acción con coste, así que recibe el único color de advertencia.

Fuentes

• Ambas pantallas son nuestras, diseñadas y medidas en Figma. La app, Waymark, es inventada, y 23 mph, un límite de 25, 18 min, 4.2 mi y 9:59 AM son ilustrativos e iguales en ambos lados.
• La ruta sigue calles reales del distrito Mission de San Francisco: Valencia St, 16th St y Mission St. Datos del mapa: OpenStreetMap contributors.
• Iconos: Phosphor Icons (MIT).
• Publicado por primera vez como carrusel en App Brainy.