Skip to content

MetroVLC’s UX/UI little details

>MetroVLC is an unofficial app I made two years ago to check Metrovalencia’s train schedules.

These days I’m working in a completely new version, written from scratch and I thought is was a nice opportunity to gather a few little details I love about the current version.

The way the origin and destination are exchanged.

Manually changing the theme between light and dark is like switching on and off a light bulb.

The icons are not static images…

Even the date icon shows the selected hour.

When you press the Show trains buttons, a train animation shows upa while the app get the schedules online. During the animation, the taptic engine simulates the vibrations of an actual train moving on the rails.

If you are in dark mode, the animation shows up a train at night with the interior lights on.

In Valencia people usually speaks Valencian, but I’m not a native speaker, so I apologice in advance for any mistake during translation.

I spent an insane amount of hours in the open card animation…

… and even in the delete card animation (who deletes a card, anyways??)

The card animation is interactive, you can pull it down to close it.

When you search for a station, the list takes the whole screen. If you tap OK when only one station is in the list, the station gets selected.

When a station is no longer your favourite, you breaks its heart.

I spent a lot of time trying to make the app as accessible as possible, but did not achieve the results I wanted. To avoid leaving anyone behind, I created a “simple mode” with big targets for people with motion or vision problems.

The app detects VoiceOver is active when you open it and suggests you this mode, but you can always go there from the settings

The pandemic took out the night train service. Night trains did show up with a Moon emoji and would show the correct moon phase of that day.

Detalles de UX/UI de MetroVLC

MetroVLC es una app no oficial para la consulta de horarios de Metrovalencia que desarrollé hace ya un par de años.

Aprovechando que estos días estoy trabajando en una versión completamente nueva de MetroVLC, había pensado en recopilar aquellos pequeños detalles que me encantan de la app actual.

La forma en la que se intercambian origen y destino

El cambio manual entre el modo claro y oscuro es como encender o apagar una bombilla, o como subir y bajar una persiana.

Los iconos no son imágenes, sino que están animados…

Incluso el icono de la hora, refleja la hora seleccionada

Cuando pulsas en Mostrar trenes, se muestra una animación de un tren de Metrovalencia cruzando la pantalla. Esta animación es un bucle que dura el tiempo que sea necesario para recuperar los horarios online. Durante la animación, el taptic engine del iPhone simula la vibración del vagón circulando por las vías

Si estás en modo nocturno, el tren de la animación está a oscuras y tiene las luces interiores encendidas

Como buen albaceteño nacido en los 80, mi valenciano es nivel Bola de drac y no paso de núvol supersonic, por lo que si el usaurio selecciona el Valencià como idioma pido perdón por los errores que pueda haber cometido en la traducción

La de horas injustificadas que dediqué a la animación de abrir la tarjeta…

… por no hablar de la animación de borrar una tarjeta (quién borra una tarjeta??)

La animación de la tarjeta es interactiva, puedes tirar de ella hacia abajo y acabar cerrándola

Cuando buscas una estación, la lista crece para ocupar toda la pantalla y si pulsas aceptar cuando sólo queda un resultado, se selecciona automáticamente

Cuando una estación deja de ser tu favorita, se le parte el corazón

Dediqué bastante tiempo a la accesibilidad de la app, pero nunca conseguí los resultados esperandos. Para evitar dejar a nadie fuera, acabé creando un “modo sencillo”, más accesible y con targets grandes, especial para personas con problemas motrices o de visión.

Cuando abres la app y VoiceOver está activo, se te sugiere pasar a este modo, aunque también puedes activarlo a mano desde los Ajustes

La pandemia se llevó por delante el servicio de trenes nocturnos de Metrovalencia. Los trenes nocturnos se diferencian del resto con el emoji de la Luna en la fase correcta para dicho día.

Improving Safari in iOS 15

After a few days using the 4th beta of iOS 15 I’m still unable to accustom to the new Safari interface. I’m convinced puting the main GUI in the bottom is the way to go. If there is something our phones have nowadays is vertical space and, the top is pretty hard to reach with our thumbs due to the increasing screen size.

IMHO, the GUI in Safari iOS 15 Beta 4 has a few problems:

  • There’s content under the floating bar (I do not have a better name for it), which isnt’t always accesible.
  • It is hard to see the floating bar above the web content.
  • There are too many things on the screen at the same time and the horizontal space is decreased due to the lateral margins of the floating bar, which force Safari to use tiny buttons.
  • The refresh button, frecuently used, changes its position according to the domain lenght, which play against your muscle memory.

When you scroll throught the website the floating bar morphs into a tiny toolbar, but the animation is so complex that distracts the user focus. There are too many things happening at once.

My proposal

  • Use a fixed toolbar.
  • Does not hide the website content under itself.
  • The domain is shown inside a textfield, which suggests to the user to tap on it.
  • Buttons have a fixed place, so you can always reach them without thinking about it.

When you scroll, the toolbar can decrease its height to gain a few extra pixels, but it does in a subtle way without sacrificing functionality.

Mejorando Safari en iOS 15

Después de un par de días usando la Beta 4 de iOS 15, sigo sin poder acostumbrarme a la nueva interfaz de Safari. Estoy convencido de que bajar la interfaz a la parte inferior de la pantalla es el camino a seguir, si algo les sobra a las pantallas es espacio vertical y la parte superior, que ha sido donde normalmente tenemos interfaz principal, ya no está tan al alcance del usuario como nos gustaría debido al tamaño de los teléfonos.

En la interfaz habitual de Safari Beta 4 veo varios problemas:

  • Hay contenido debajo de la barra flotante, que no siempre es accesible.
  • La barra flotante no se distingue lo suficiente del contenido de la web, por lo que es difícil de localizar a simple vista.
  • Hay demasiadas cosas en pantalla y muy poco espacio para mostrarlas, lo que provoca tener botones minúsculos.
  • El botón de refrescar, muy usado, cambia de posición en función del ancho del dominio que estamos visitando, lo que dificulta memorizar el gesto de pulsarlo.

Cuando hacemos scroll sobre la página cambia la apariencia, pasa de ser una barra flotante a una pequeña barra de herramientas, pero la animación es compleja y distrae demasiado al usuario, pasan demasiadas cosas a la vez que capturan la atención del usuario.

Mi propuesta

  • Usamos una barra de herramientas fija.
  • No oculta el contenido bajo ella.
  • La dirección se muestra dentro de una caja de texto, invitando al usuario a pulsarla para editar la url.
  • Los botones están en un lugar fijo, no cambian su posición según el dominio.
  • Cuando se hace scroll, la barra puede disminuir su tamaño ocultando sólo los botones de refrescar y opciones, ganando unos píxeles extra sin sacrificar funcionalidad.

Auto-radar, el fin de los Fernando Alonso de la carretera

TL;DR: y si convertimos cada coche en un radar?

Ayer, mientras circulaba al máximo permitido por la ley con mi coche en autovía me adelantaron un par de coches que calculo irían a cerca de los 200 km/h y pensé: nunca pillan a estos @#$% y luego a mí seguro que me multan por ir a 120 en un tramo de 100.

Durante varios kilómetros pensé en lo injusto que era que alguien estuviese cometiendo una infracción tan flagrante y a la vista de todos y aún así saliesen indemnes si no se da la casualidad de tropezarse con un radar. Entonces se me ocurrió.

Y si descentralizamos el trabajo que hacen los radares de carretera y nos convertimos todos en uno?

La idea me gustó y todavía me quedaba una hora de viaje, así que seguí divagando sobre ella en mi cabeza.

Pensemos en una aparato (llamado auto-radar, por ejemplo) con las siguientes características:dashcam

  • Tamaño similar a una cajetilla de tabaco, se pega al cristal delantero del coche tras el espejo retrovisor interior, donde habitualmente va el sensor de luz ambiental para el encendido de las luces.
  • No necesita interacción con el conductor, él sabe cuándo debe encenderse y cuando apagarse al estar conectado a la electrónica del coche.
  • Tendría como sensores básicos una cámara que apunta hacia delante y un GPS para conocer la velocidad del vehículo en cada momento.
  • Cada auto-radar se conecta a un sistema central.

Qué haría el auto-radar?

Tendrá dos funcionalidad principales:

  1. Utilizando la posición del GPS informa al conductor de la velocidad máxima autorizada de la vía en la que se encuentra, además de avisarnos cuando alcancemos velocidades excesivas.
  2. Conociendo nuestra velocidad y a través de algoritmos de visión artificial, puede escanear las imágenes de su cámara buscando los coches que tenemos alrededor, estimar su velocidad y leer su matrícula. Cuando detecta que un coche circula muy por encima del límite legal (teniendo en cuenta que el sistema puede tener un margen de error), se envía una comunicación al sistema central.

El sistema no es robusto. Y si un aparato funciona mal y recibo una denuncia errónea?

Al ser un sistema descentralizado los falsos positivos no serían un problema. Un coche que circula a una velocidad elevada durante algunos minutos seguro que adelanta a muchísimos coches. Si se reciben una buena cantidad de posibles positivos, podemos afirmar con rotundidad que la infracción ha ocurrido. Además estaríamos hablando de superar los límites legales por un amplio margen, no de que un coche circule a 130 km/h porque está adelantando a otro coche en un momento determinado.

No me gusta que el gran hermano me vigile

El auto-radar no necesitaría estar conectado la mayoría del tiempo. Puede tener almacenados los mapas de la región y conocer la velocidad de la vía con nuestra posición GPS tal y como hace cualquier TomTom.

El único momento en el que necesitaría conectividad sería para transmitir una infracción, ya sea mediante una petición sencilla del tipo posición-velocidad-matrícula o algo más sofisticado como un vídeo/fotografía del momento señalizando al vehículo infractor.

highway

Nunca funcionaría. Si me gusta ir rápido nunca usaría un auto-radar

Esa es una de las gracias del aparato, no necesita que tú lo uses para que te pillen, sólo se necesita que otros lo usen.

Dado que es un aparato que en principio tiene poca utilidad para el conductor que lo usa, debería ofrecerse algún aliciente para que la gente monte en su vehículo de manera gratuita.

El dueño podría beneficiarse de descuentos en los impuestos que se le aplican al vehículo, rebaja en el precio del seguro (puesto que tenemos básicamente una dashcam) o incluso podría crear una red wifi gratuita para los pasajeros del vehículo aprovechando sus capacidades de conectividad 3G.

No merece la pena, pronto llegarán los coches autónomos

Estoy seguro de que mis hijos (y no tengo ninguno) podrán conducir coches con sus propias manos. Existirán vehículos autónomos, sí, pero desde luego no será un porcentaje abrumador.

Los conductores estarán detrás del volante durante muchos años todavía, para bien o para mal.

Sería demasiado caro desplegar algo así a gran escala.

mapUn radar de carretera cuesta del orden de 60.000€ más el mantenimiento que acarrean.

El auto-radar no es más que el resultado de una noche de pasión entre una cámara web y una Raspberry Pi. El coste al consumidor de estos dos elementos por separados no es mayor de 80€, si lo desarrollamos a escala y le quitamos márgenes comerciales podría quedarse en quizá 10€ la unidad. Con ese coste podrían fabricarse 6.000 auto-radares.

Por ponerlo en perspectiva, la DGT tiene menos de 2.000 radares entre fijos y móviles. Hemos triplicado el número de “vigilantes” con el coste de sólo uno de ellos!

En la imagen de la izquierda, aunque no lo parezca, hay una cuadrícula de píxeles rojos alternos, en total sólo sobre la península no llega 10.000 en total (coste 800.000€). En ese mapa estamos obviando muchos aspectos, por ejemplo la densidad sería mayor en núcleos de población y tan sólo habría puntos sobre carreteras, pero también podemos pensar que no siempre los 10.000 auto-radares estarían en funcionamiento y no permanecen estáticos. A pesar de esto, para nuestra aproximación serviría perfectamente.

En un desplazamiento de 200 km, pasaríamos al menos junto a 30 de estos auto-radares, 1 cada 4 minutos! Y todo por el 0,05% del coste de los radares actuales.

No solo eso, hay que contar además con el efecto disuasorio que tendría sobre un conductor con prisas el saber que durante el trayecto encontrará auto-radares, en cualquier momento, cuya localización desconoce, en lugar de 1 ó 2 radares fijos que se sabe de memoria.

Llevémoslo un poco más allá. Obliguemos a que todos los camiones lleven uno (por supuesto dándoles los mismos beneficios que al resto de conductores) y tendremos un parque de auto-radares en constante movimiento virtualmente las 24 horas del día en todo el territorio nacional.

Evidentemente la infraestructura para soportar este sistema también tiene un coste, pero sería irrisorio en comparación con el coste de mantenimiento de la actual red de radares.

La idea está ahí, ahora sólo falta que alguien la lleve a cabo.

31 de diciembre

1 Comment

Y se acabó. 365 fotografías, una diaria, durante todo el 2014.

Parecía una locura cuando lo empecé pero rápidamente se convirtió en una rutina. No ha sido fácil, hay días que estás menos creativos que otros, en los que tienes menos tiempo o directamente no te apetece. Me alegra poder mirar atrás y ver que lo conseguí.

Es bonito empezar cosas pero también lo es terminarlas. Hasta aquí 365 fotografías, gracias a todos los que han estado pendientes al otro lado.

Fin.

2014_12_31

30 de diciembre

Penúltima foto del proyecto, una más y podré decir que lo he conseguido. Durante 364 días ésta ha sido mi compañera, no ha habido día que no viniese conmigo. Daba igual que saliese de casa media hora o todo el día, tenía que cargar con ella. Daba igual que no me apeteciese salir de casa, me obligaba a salir.

Cuando me compré la cámara tuve claro que no quería dejarla olvidada en un rincón, quería sacarle partido y aprender a usarla y esta la es la manera que se me ocurrió de conseguirlo.

Hoy le toca a ella ser la protagonista.

2014_12_30