← Volver a todos los artículos

Un solo botón Acciones en vez de seis iconos: por qué hemos rediseñado cada tabla de micali.online

#botón Acciones #diseño de tablas #usabilidad móvil #experiencia de usuario #actualización de producto #micali.online
Un solo botón Acciones en vez de seis iconos: por qué hemos rediseñado cada tabla de micali.online

Hay cambios que notas nada más entrar, aunque en la aplicación no se haya añadido nada nuevo de verdad. Este es exactamente así. Las filas de las tablas —Eventos, Servicios, Visitantes, Plantillas de mensaje— hasta ahora terminaban con una fila de iconos pequeños. Desde ahora, en su lugar hay un único botón con texto: Acciones.

Parece un simple retoque estético. En realidad, arregla lo que más molestaba en el móvil —y es una decisión que merece una explicación. Al fin y al cabo, los iconos son más rápidos. Entonces, ¿por qué dar un paso atrás hacia un menú?

Qué fallaba con los iconos

Un icono no es una palabra. Un lápiz y una papelera todavía se pueden adivinar. Pero en la lista de eventos había seis uno al lado del otro: descargar, calendario, compartir, copiar, lápiz, papelera. ¿Cuál de ellos programa horarios y cuál crea una copia del evento? Quien lo usa a diario lo memoriza. Quien lo usa una vez al mes lo adivina cada vez desde cero —y con uno de esos iconos, el error no tiene vuelta atrás.

Un texto emergente solo sirve para el ratón. El texto que aparece al mantener el cursor encima nunca se muestra en una pantalla táctil —un dedo no tiene dónde «detenerse». En el móvil, por tanto, solo tenías la forma del pictograma, y nada más. Y algunos iconos ni siquiera tenían ese texto: Editar y Eliminar, en las plantillas de mensaje, no lo tenían en absoluto.

Eran pequeños, y el peligro estaba justo al lado. Los botones medían 28 píxeles, aunque el tamaño de toque recomendado ronda los 44. La papelera quedaba pegada al lápiz, del mismo tamaño y del mismo gris.

En el móvil, además, quedaban escondidos tras el ancho de la tabla. En una pantalla estrecha la tabla se desplaza hacia los lados, y la columna de acciones era la última. Para llegar hasta ella, primero tenías que desplazar toda la tabla hacia la derecha —y volver a hacerlo en la siguiente fila.

Una fila de tabla antes y ahora
Una fila de tabla antes y ahora

Cómo se ve ahora

En la fila hay un único botón Acciones. Lo que pasa al pulsarlo depende del dispositivo:

  • En el ordenador se despliega un menú donde cada opción tiene icono y palabra —Programe su evento, Compartir, Copiar, Editar, Eliminar.
  • En el móvil sube desde abajo un panel que ocupa todo el ancho de la pantalla, con filas grandes para el dedo. En su cabecera aparece el nombre del registro con el que estás trabajando —el correo del visitante, el nombre del evento. En una lista larga de filas parecidas, esto importa más de lo que parece.
  • Eliminar y las demás acciones irreversibles están separadas por una línea y en rojo. No en gris y pegadas a Editar.
  • En el móvil, la columna de acciones va al principio de la fila —justo después de la casilla de selección, si la tabla tiene una. Es decir, donde la ves sin desplazarte hacia los lados. En el ordenador se quedó a la derecha, exactamente donde estaba hasta ahora.
El menú Acciones en el ordenador
El menú Acciones en el ordenador
En el móvil sube un panel desde abajo y la columna Acciones va primero
En el móvil sube un panel desde abajo y la columna Acciones va primero

Por qué un solo botón, y no iconos

Los iconos son un atajo para algo que ya sabes. Funcionan de maravilla cuando hay pocos y los usas a diario —la flecha de volver, la cruz para cerrar. Con seis acciones, de las que solo necesitas la mitad de vez en cuando, la ventaja se invierte: ahorras medio segundo al pulsar y lo pagas en segundos de pensar, más algún clic equivocado de tanto en tanto.

Un solo botón convierte una decisión difícil («¿cuál de esas seis imágenes es la mía?») en dos fáciles: quiero hacer algo con esta fila —y luego lo leo. Leer es más lento que reconocer una forma, pero nunca se equivoca.

Detrás de esto hay también tres razones más prácticas:

  • La fila trata de datos. Nombre, correo, fecha, aforo —esa es la información por la que miras la lista. Seis iconos al final de cada fila son ruido visual que se repite tantas veces como filas tengas.
  • Igual en todas partes. Hemos rehecho así 28 tablas en 18 pantallas —incluidas las siete de la página Visitantes. Lo aprendes una vez y vale para toda la aplicación.
  • Se puede ampliar. Una acción nueva ahora es una fila más en el menú, no otro icono que empuja aún más la tabla hacia el lado. Dos acciones que antes pedían su propia columna —usar una plantilla de mensaje y editar un pedido de servicio— se han trasladado directamente al menú, y las tablas se han quedado con una columna menos.

El precio es un clic más en el ordenador. Lo sabíamos cuando tomamos la decisión y lo asumimos: un clic cuesta medio segundo, una papelera pulsada por error cuesta bastante más.

Dónde lo verás

Hemos rehecho así todas las listas de la aplicación: Eventos y Servicios, todas las pestañas de la página Visitantes (visitantes, reservas, pedidos de servicio, Listas, lista negra), Planes prepago y su Uso de la membresía, Plantillas de mensaje, Formularios y sus respuestas, Disponibilidad de servicios, Webhooks y Usuarios de la cuenta.

No tienes que activar ni configurar nada —el cambio ya está en la aplicación, en los 31 idiomas en los que funciona micali.online. Si en algún menú echas en falta una acción que esperarías encontrar ahí, escríbenos: la lista de acciones de una fila ahora vive en un solo sitio y se cambia con facilidad.

Prueba micali.online