En la mayoría de las apps de gastos hay un pequeño impuesto constante, y dejas de notar que lo pagas.
Estás repasando una lista de cuarenta gastos de un viaje y comparando cada uno con el extracto del banco. Haces clic en uno. La app te lleva a otra pantalla. Compruebas la cifra, pulsas Atrás y vuelves a aparecer arriba del todo, cuarenta filas por encima de donde estabas, sin la menor idea de cuál acababas de revisar. Multiplícalo por cuarenta.
La solución no es una página más rápida. Es no irse a ningún sitio.
Lo que de verdad tiene que hacer una vista de detalle
Abres un gasto desde una lista y hay cuatro cosas que tienen que cumplirse a la vez; la mayoría de las implementaciones consiguen dos:
Sigues donde estabas. La lista se queda como estaba, en el mismo punto del desplazamiento, con la fila que abriste marcada para que veas dónde estás.
Atrás hace lo evidente. Cierra lo que abriste, en lugar de sacarte de la pantalla.
Lo que estás mirando tiene una dirección. Recargas y sigue ahí. Le envías la dirección a alguien y ve lo mismo que tú.
Puedes seguir un hilo. Un gasto menciona a una persona, y esa persona tiene otros gastos. Seguir esa cadena no debería expulsarte de la lista que estabas leyendo.
Un diálogo modal te da las dos primeras, mal, y nunca la tercera. Una página completa te da la tercera y renuncia a la primera. Lo que quieres son las dos cosas, y la forma de conseguirlas es dejar de tratar «qué está abierto» como algo que la app recuerda en privado.
Ponlo en la barra de direcciones
En HiBill, lo que esté abierto en el panel lateral se escribe en la URL de la página: una transacción como ?peek=, una persona como ?person=. No tiene nada de ingenioso. Es solo darse cuenta de que el panel abierto forma parte de dónde estás, y dónde estás pertenece a la barra de direcciones.
Todo lo bueno sale de esa única decisión, sin coste extra:
Una recarga lo conserva. No una reconstrucción ni una suposición. El mismo gasto, en la misma lista, en el mismo punto del desplazamiento.
El enlace es un enlace. Copia la dirección, envíasela a la persona con la que dividiste el vuelo y abrirá exactamente el gasto que estabas mirando. Las reglas de acceso no cambian (quien no está en la transacción sigue sin ver nada), así que, para mandárselo a alguien sin cuenta, sigue estando la opción de compartirlo con un enlace público.
Atrás significa atrás. No «salir de la página». El navegador ya guarda una pila con todo lo que tenías abierto, así que el botón Atrás va bajando por ella, un gasto cada vez, y solo sale de la página cuando la pila se acaba.
Eso último es la razón de que el panel tenga también su propio botón Atrás, al principio de su encabezado. No hace nada más que lo que hace el botón Atrás del navegador. Está ahí porque en un portátil tienes la mano en el trackpad y el panel está a la derecha, y obligar a la gente a ir hasta los controles del navegador para deshacer algo que hizo en la app es una pequeña descortesía.
Seguir una cadena sin salir de la lista
El cuarto requisito es el interesante.
Abre una cena desde la actividad. El reparto muestra cuatro nombres. Haz clic en uno y, en lugar de cerrarse y llevarte a otra parte, el panel pasa a ser esa persona: su saldo, sus transacciones compartidas. Haz clic en una de ellas y el panel pasa a ser ese gasto.
Puedes bajar tres o cuatro pasos por esa cadena (un gasto, alguien que está en él, otro de sus gastos) y la lista desde la que empezaste no se ha movido. Luego Atrás, Atrás, Atrás, y estás exactamente donde estabas, con la respuesta a lo que habías ido a buscar. Esa es toda la función. Lo demás son detalles.
Aunque los detalles también cuentan. Con una transacción abierta, el encabezado del panel tiene las flechas Transacción anterior y Transacción siguiente, que recorren la lista desde la que la abriste, en el orden en que se muestra. Las teclas ↑ y ↓ hacen lo mismo. Revisar un mes de gastos se convierte en mantener pulsada una tecla y leer, que es lo que debería ser revisar. Y en la versión de escritorio, el borde izquierdo del panel se puede arrastrar, porque 520 píxeles está bien para una cena de dos líneas y mal para un recibo de treinta artículos; el ancho que elijas se recuerda para la próxima vez.
Por qué no es un modal
Un modal habría dado menos trabajo. No lo usamos, por dos razones.
Un modal deja la lista muerta. Atenuada, sin desplazamiento, sin clics. Pero la lista es el contexto: muchas veces lo que quieres es comparar el gasto abierto con los tres que lo rodean, o seguir bajando y abrir otra cosa. Aquí no hay ninguna capa que oscurezca la pantalla. La lista de debajo sigue viva, y hacer clic en ella no cierra el panel de golpe.
Un modal atrapa el teclado. En un modal, Esc tiene que significar una sola cosa, y suele ser «tíralo todo». En el panel, Esc mientras escribes un comentario te saca del campo, y solo cierra el panel a la segunda pulsación. Esc en un cuadro de filtro de la página de detrás no le hace nada al panel. Son reglas pequeñas, pero marcan la diferencia entre un teclado útil y un teclado peligroso.
El único sitio donde un modal tiene sentido es un teléfono, donde no caben dos cosas una al lado de la otra. Así que en el teléfono el panel ocupa toda la pantalla, y la dirección sigue indicando lo que está abierto: un enlace que envías desde el teléfono abre lo mismo en el portátil de otra persona.
Compruébalo
Ya está disponible para todos: en Inicio, en Actividad, en Personas y dentro del historial de una persona. Haz clic en cualquier cosa.
La mecánica está explicada en abrir transacciones y personas en el panel lateral y, si acabas de llegar, cómo funciona HiBill es el recorrido completo.
Sigue leyendo
Cómo funciona HiBill: cuentas claras entre amigos: todo el modelo de una vez, con las personas, los saldos y los dos tipos de transacción.
Cómo encontrar un gasto compartido rápido: busca por grupo o persona: cómo reducir una lista larga hasta el único gasto que quieres abrir.
Cómo corregir un gasto compartido después de guardarlo: qué puedes cambiar desde el panel y qué ven los demás cuando lo haces.