Tuve Toggl como icono del dock durante seis meses antes de borrarlo.
El borrado no fue una decisión de principios. Fue que cada vez que hacía cmd-tab y mi ojo captaba el badge de Toggl, pensaba "¿arranqué el temporizador?" y la respuesta solía ser no, y entonces perdía los siguientes noventa segundos cambiando a él para arrancar el temporizador de lo que estuviera haciendo, y luego olvidaba qué estaba haciendo. El icono del dock era un sumidero de atención para una herramienta que se suponía que debía desaparecer.
La primera versión de Timex que construí también era una app del dock. La borré de mi propio dock a los dos días. La versión de barra de menú la reemplazó la semana siguiente y nunca volvió a bajar.
Eso no es una pequeña decisión de diseño. La diferencia entre "dock" y "barra de menú" es la diferencia entre una herramienta que exige atención y una herramienta que vive donde ya echas el ojo. Para un rastreador, solo una de las dos es la correcta.
El dock pregunta. La barra de menú avisa.
El dock de macOS es un lanzador. Los iconos que viven ahí son aplicaciones a las que pretendes cambiar. El peso visual es alto. El blanco de pulsación es grande. La lista de Cmd+Tab los incluye. Todos están cargados de expectativa.
La barra de menú es lo opuesto. Es donde vive el pequeño estado — el reloj, la batería, el Wi-Fi, el conjunto rotatorio de utilidades que consultas sin pensar. El peso visual es bajo. No cambias a una app de la barra de menú. Le echas un ojo.
Un rastreador de tiempo debería ser un vistazo. La pregunta "¿cuál es la app activa como la que me están rastreando?" tiene que poder responderse sin un cambio de contexto. La colocación en el dock fuerza un cambio. La colocación en la barra de menú no.
Por esto tampoco enviamos un icono del dock en absoluto. Ni como opción. Ni como preferencia conmutable. Timex es una app menu-bar-first por principio — la vista de Hoy se abre en una ventana cuando la pides, pero Timex en sí no vive en tu lista de Cmd+Tab. Menos competencia por tu atención.
La pastilla: 220 píxeles y un trabajo que hacer
El hueco de la barra de menú que ocupa Timex es lo que llamamos la pastilla. Mide aproximadamente 220 píxeles de ancho según el nombre de la app activa. Dentro vive:
- Un punto de color (el color por app de la franja)
- El nombre de la app actualmente enfocada
- La duración que llevas en ella
Ese es todo el estado. Cuando cambias de Xcode a Slack, la pastilla anima de verde-Xcode-12m a azul-Slack-0s. El color del punto viene de la misma paleta usada en la vista de Hoy, así que la barra de menú es una vista previa de un píxel de dónde estás apareciendo en la franja.
Tres restricciones lo hicieron difícil.
El presupuesto de ancho es real. Una sesión de larga duración ("Visual Studio Code · 2h 14m") necesita caber sin apretujar los iconos de AirPlay o batería que tiene al lado. Truncamos los títulos de ventana de forma agresiva cuando hace falta, pero el nombre de la app es sagrado — si "Cursor" aparece en la pastilla, tienes que poder leer "Cursor".
La pastilla tiene que redibujarse a 1 Hz sin parpadeo. Cada segundo, la duración avanza. Si el redibujado es chapucero, la barra de menú tiembla visualmente. macOS no te da muchas herramientas para texto sub-pixel-estable en esta región, así que cacheamos el texto renderizado y solo re-renderizamos cuando el dígito realmente cambia.
El modo oscuro y el modo claro tienen que sentirse idénticos. La paleta de puntos tenía que funcionar sobre ambos fondos. El color del texto tiene que ser el color de etiqueta del sistema, no un valor personalizado, o se verá fuera de lugar durante los cambios de color de acento. La HIG de Apple es estricta sobre esto por una razón.
La recompensa de acertar con estas tres es que con el tiempo dejas de ver la pastilla. Simplemente se vuelve parte de la barra de menú — como el reloj, como la batería — y solo la miras conscientemente cuando algo se siente raro.
El desplegable: todo en un scroll
Haz clic en la pastilla y un panel se despliega. La decisión sobre qué poner en este panel fue el 60% del trabajo de diseño de Timex 1.0.
Esto es lo que hay, de arriba abajo, en el orden que ves cuando miras el desplegable de la barra de menú:
- La app actualmente activa, grande arriba, con la duración de la sesión en curso a la derecha. Los mismos datos que la pastilla, repetidos aquí porque la pastilla está en tu visión periférica y aquí es donde realmente miras.
- Etiqueta HOY y tiempo total registrado hoy.
- Próximo descanso en X, con un pequeño botón de play para iniciarlo manualmente si quieres un descanso ahora.
- Contador de descansos ("1 breaks") y contador de hidratación ("2/12") con botones rápidos de menos/más.
- Iconos de estadísticas en una fila — ojo, estiramiento, piernas, postura, caminata, respiración — cada uno con un pequeño recuento del día.
- Lista de apps de hoy, ordenada por tiempo dedicado, cada fila mostrando el punto por app, el nombre de la app y el tiempo total.
- Fila de acciones abajo — cinco iconos para las cinco cosas que realmente harás desde este panel.
El orden importa. La cosa que estás haciendo ahora mismo está arriba porque esa es la respuesta a la pregunta más común ("¿me están rastreando correctamente?"). Los totales del día siguen porque esa es la siguiente pregunta más común. La lista de apps va al final porque para cuando estás escaneando la lista de apps, ya estás en modo "mira el día" y bien podrías abrir la vista completa de Hoy.
Lo que dejamos fuera
La pregunta más difícil no fue qué poner. Fue qué dejar fuera.
No mostramos el promedio de la semana pasada en el desplegable. No mostramos una puntuación de productividad. No mostramos metas u objetivos. No mostramos notificaciones por hitos alcanzados. No tenemos un prompt de "en qué deberías trabajar".
Cada una de esas se discutió y se cortó por la misma razón: el panel de la barra de menú se supone que responde preguntas que ya tenías. No se supone que introduzca nuevas preguntas. El dock es el lugar para una app que exige "mírame". La barra de menú es el lugar para una app que responde "qué hora es" cuando preguntas.
Lo más cerca que estuvimos de violar esta regla es la fila de iconos de estadísticas. Consideramos cortarla para la v1 — ¿pertenece el recuento de estiramiento de ojos a la barra de menú? — y decidimos que se gana su lugar porque los datos de bienestar a un vistazo cambian el comportamiento. Si puedo ver "1/11 descansos de ojos hoy" sin salir del panel, haré un 20-20-20 justo ahí. Si requiere un cambio de ventana, no lo haré. El coste de la fila son dos líneas de espacio vertical. El beneficio, tras tres meses usándola, es significativo.
La fila de acciones de abajo
Los cinco iconos al pie del panel son los más usados después de la lista de apps. De izquierda a derecha:
- Ventana — abre la vista completa de Hoy en una ventana. La grande con la franja de 24 horas.
- Café — inicia un descanso manualmente. Útil si sabes que necesitas uno antes de que se dispare el temporizador.
- Engranaje — ajustes. Nos esforzamos por poner muy poco aquí. Los valores por defecto deberían funcionar.
- Corredor — pausar/reanudar el rastreo. Se usa sorprendentemente poco. La gente que cree que lo quiere normalmente no pausa mucho de verdad.
- Edificio — cambia el contexto de datos. Reservado para futuro soporte multi-perfil (piensa "trabajo" vs "personal"); la v1 es de perfil único pero el icono está ahí porque el modelo de datos ya lo soporta.
El orden es de suelto a apretado: la acción más usada (abrir la vista de Hoy) es la más a la izquierda; la más rara (cambio de contexto) es la más a la derecha. No hay botón de Salir en el desplegable — Salir está en el menú contextual del clic derecho de la pastilla. Salir de un rastreador de tiempo es una acción deliberada, no un blanco de pulsación.
Los otros rastreadores de la barra de menú
Unos cuantos competidores viven en el mismo vecindario, y la comparación de diseño te dice algo.
Tyme tiene una hermosa pastilla en la barra de menú pero la app está orientada a proyectos — eliges un proyecto, arrancas un temporizador. La barra de menú es para gestionar el temporizador manual. Producto diferente, presión de diseño diferente.
Timing tiene un elemento de barra de menú que muestra el nombre de la tarea actualmente rastreada con un pequeño temporizador en vivo. Más limpio que el de Toggl, pero el panel de abajo es denso y se siente como una app de escritorio metida a presión en el desplegable.
Toggl Track tiene un elemento de barra de menú que es principalmente un lanzador para la app del dock. Haces clic y la ventana del dock salta al frente. La barra de menú es incidental, no estructural.
El propio Screen Time de Apple no tiene elemento de barra de menú en absoluto. Para ver tu día, abres Ajustes del Sistema, navegas tres niveles de profundidad, y lees un gráfico que se actualiza a diario.
Lo que a cada uno de estos le falta — al menos desde nuestra perspectiva — es la visibilidad de un vistazo de la app activa. Ninguno de ellos muestra, en la barra de menú misma, "esta es la app como la que te están rastreando, este es cuánto lleva". Esa es la primera respuesta que debería dar la pastilla. La convertimos en lo más importante que hace la pastilla.
Lo que la barra de menú no puede hacer
Quiero nombrar los límites antes de que alguien más lo haga.
La barra de menú no es donde haces análisis profundo. La vista de Hoy, en una ventana normal, es donde recorres la línea de tiempo, profundizas en las apps, miras la semana. El panel de la barra de menú es la comprobación rápida. No intentes replicar la vista de Hoy en el desplegable — quedará apretada, el texto será demasiado pequeño, y el gráfico no cabrá. Lo intentamos. No funcionó. El desplegable muestra resúmenes. La ventana muestra detalle.
La barra de menú también está limitada por macOS de formas que la mayoría de los usuarios no notan. No puedes hacer el elemento de la barra de menú más alto que la barra de menú. No puedes tener contenido animado ahí (bueno, puedes, pero el SO a veces ocultará tu icono bajo "más iconos" en una barra de menú pequeña). No puedes mostrar imágenes más altas de ~22 píxeles. Cada decisión de diseño en la pastilla ocurre bajo estas restricciones.
La forma que emergió
Tras un año de iteración, la forma del rastreador de barra de menú se asentó en algo simple:
- Una pastilla que nombra la app activa, la colorea y la cronometra
- Un panel que resume el día en un scroll
- Cinco botones para hacer las cinco cosas que realmente harás
- La vista completa de Hoy en una ventana, para cuando quieras mirar a fondo
La mayor parte del trabajo de diseño fue cortar cosas que no se ganaban su lugar. La versión de Timex que se lanzó está a varias rondas de "no necesitamos esto" de la versión que esbocé por primera vez. Cada eliminación hizo la barra de menú un poquito más fácil de ignorar hasta que la necesitaras.
Esa es la prueba. Si tienes que aprender a usar una app de la barra de menú, el diseño falló. Las buenas desaparecen en la barra de menú y solo vuelven cuando preguntas.
Abre la pastilla y mira lo poco que se interpone en tu camino.