Concepto independiente · Movilidad, interfaz

RUTA

Un planificador de viaje donde cada parada de carga explica si es viable, cuánto tarda y cuánto cuesta. Parte de mi experiencia en interfaces de automoción, con datos y vehículo ficticios.

RUTA, vista de escritorio
RUTA, vista móvil
Tipo
Movilidad, interfaz
Mi papel
Diseño de producto, interfaz y desarrollo
Alcance
Planificador, línea de tiempo del viaje y confirmación
Estado
Concepto independiente · marca y datos ficticios

El reto

Qué problema intenta resolver.

Con un coche eléctrico, llegar no depende solo de la distancia: depende de la batería con que se sale, de dónde se carga, de cuánto se espera y de cuánto margen quiere cada persona al llegar.

La pregunta de diseño: ¿cómo hacer que el motivo de una restricción sea evidente, para que nadie tenga que adivinar por qué una opción no está disponible?

Decisiones de diseño

Cuatro decisiones, a la vista.

Cada una se puede comprobar en la demo.

Salida con 12 % de batería

Una opción bloqueada dice por qué

Con poca batería, el plan directo se desactiva y dice «No alcanza la reserva mínima de llegada». Se propone la parada más rápida que sí lo es, y la selección se comunica con texto, contorno y símbolo.

Línea de tiempo Barcelona–Madrid

Cada parada, en una línea de tiempo

El resumen muestra la hora de salida elegida, cada parada con su kilómetro, minutos de carga, coste y batería al llegar y al salir, y la llegada. En rutas largas se ven todas las paradas, no solo la primera.

Controles de batería, reserva y hora de salida

El margen lo pone quien conduce

La reserva al llegar se elige entre 10, 15, 20 y 25 %. Al subirla, el plan añade carga y lo explica. Cada estación muestra su precio, y el plan compara: «cuesta 6 € menos, pero tarda 6 min más».

Estación ocupada y plan recalculado

Prever que algo salga mal

«Simular primera estación ocupada» recalcula el plan sin perder el contexto. Los errores también son concretos: si una ciudad no está en el catálogo, la interfaz dice cuál.

Qué puedes probar

Un recorrido de cuatro pasos.

Para ver las decisiones funcionando, en este orden.

  1. Elige Barcelona–Madrid y mira las paradas en la línea de tiempo.

  2. Sube la reserva al llegar al 25 % y compara el total.

  3. Cambia la hora de salida.

  4. Simula la primera estación ocupada y confirma el plan.

Detrás de la interfaz

Vehículo y precios ficticios

58 kWh, 18 kWh/100 km, 120 kW de potencia máxima y 3 minutos de conexión. Precios de ejemplo: 0,59 €/kWh en áreas de servicio y 0,45 €/kWh en zonas urbanas. La potencia de carga es una media simplificada.

  • HTML, CSS y JavaScript, sin dependencias externas.
  • Revisado sin errores de consola ni desbordes horizontales a 1440 y 390 px.
  • Marca, imágenes y datos ficticios. Ninguna cifra procede de usuarios reales.

Con más tiempo

Qué comprobaría con personas.

Son hipótesis para una prueba que aún no he hecho, no resultados.

  • ¿Entienden por qué una estación está desactivada?
  • ¿Qué reserva eligen, y la cambian al ver el coste?

¿Hablamos del puesto?

Puedo explicarte cómo llegué a cada decisión de este concepto.