← Torna a tutti gli articoli

Un solo pulsante Azioni al posto di sei icone — perché abbiamo ridisegnato ogni tabella di micali.online

#pulsante Azioni #design delle tabelle #usabilità mobile #esperienza utente #aggiornamento prodotto #micali.online
Un solo pulsante Azioni al posto di sei icone — perché abbiamo ridisegnato ogni tabella di micali.online

Ci sono cambiamenti che noti già al primo accesso, anche se all'app non è stato davvero aggiunto nulla di nuovo. Questo è uno di quelli. Le righe delle tabelle — Eventi, Servizi, Visitatori, Modelli di messaggio — finora finivano con una fila di piccole icone. Da oggi al loro posto c'è un unico pulsante con una scritta: Azioni.

Sembra un ritocco estetico. In realtà risolve quello che dava più fastidio sul telefono — ed è una scelta che merita una spiegazione. Le icone, dopotutto, sono più veloci. Perché allora fare un passo indietro verso un menu?

Cosa non andava nelle icone

Un'icona non è una parola. Una matita e un cestino si possono ancora indovinare. Ma nell'elenco degli eventi ce n'erano sei una accanto all'altra: scarica, calendario, condividi, copia, matita, cestino. Quale delle sei pianifica gli orari e quale crea una copia dell'evento? Chi la usa ogni giorno se la ricorda. Chi la usa una volta al mese la indovina ogni volta da capo — e con una di quelle icone l'errore è irreversibile.

Il fumetto con la descrizione è solo per il mouse. Il testo che compare tenendo fermo il cursore non si vede mai su uno schermo touch — un dito non ha dove «fermarsi». Sul telefono avevi quindi a disposizione solo la forma del pittogramma, e nient'altro. E una parte delle icone non aveva nemmeno quel testo: Modifica ed Elimina, nei modelli di messaggio, ne erano del tutto prive.

Erano piccole, e il pericolo stava proprio accanto. I pulsanti misuravano 28 pixel, mentre l'area di tocco consigliata è di circa 44. Il cestino era appiccicato alla matita, della stessa dimensione e dello stesso grigio.

Sul telefono, per di più, erano nascoste dietro la larghezza della tabella. Su uno schermo stretto la tabella scorre lateralmente, e la colonna delle azioni era l'ultima. Per raggiungerla dovevi prima far scorrere tutta la tabella verso destra — e ricominciare da capo alla riga successiva.

Una riga di tabella prima e dopo
Una riga di tabella prima e dopo

Come si presenta adesso

Sulla riga c'è un unico pulsante Azioni. Cosa succede al clic dipende dal dispositivo:

  • Sul computer si apre un menu in cui ogni voce ha un'icona e una parola — Pianifica il tuo evento, Condividi, Copia, Modifica, Elimina.
  • Sul telefono sale dal basso un pannello che occupa tutta la larghezza dello schermo, con righe abbastanza grandi per il dito. Nella sua intestazione compare il nome del record su cui stai lavorando — l'email del visitatore, il nome dell'evento. In un lungo elenco di righe simili, conta più di quanto sembri.
  • Elimina e le altre azioni irreversibili sono separate da una linea e in rosso. Non grigie e appiccicate a Modifica.
  • Sul telefono la colonna delle azioni è all'inizio della riga — subito dopo la casella di selezione, se la tabella ne ha una. Cioè proprio dove la vedi senza scorrere lateralmente. Sul computer è rimasta a destra, esattamente dove si trovava finora.
Il menu Azioni sul computer
Il menu Azioni sul computer
Sul telefono sale un pannello dal basso e la colonna Azioni è la prima
Sul telefono sale un pannello dal basso e la colonna Azioni è la prima

Perché un solo pulsante, e non le icone

Le icone sono una scorciatoia per qualcosa che già sai. Funzionano benissimo quando sono poche e le usi ogni giorno — la freccia indietro, la crocetta per chiudere. Con sei azioni, di cui metà ti servono solo ogni tanto, il vantaggio si ribalta: risparmi mezzo secondo sul clic e lo paghi in secondi di riflessione, più qualche clic sbagliato ogni tanto.

Un unico pulsante trasforma una decisione difficile («quale di queste sei immagini è quella giusta?») in due decisioni facili: voglio fare qualcosa con questa riga — e poi lo leggo. Leggere è più lento che riconoscere una forma, ma non sbaglia mai.

Dietro ci sono anche tre ragioni più pratiche:

  • La riga parla di dati. Nome, email, data, capienza — questa è l'informazione per cui guardi l'elenco. Sei icone alla fine di ogni riga sono rumore visivo che si ripete tante volte quante sono le righe.
  • Ovunque allo stesso modo. Abbiamo rifatto così 28 tabelle su 18 schermate — comprese tutte e sette quelle della pagina Visitatori. Lo impari una volta e vale in tutta l'app.
  • Si può ampliare. Una nuova azione ora è una nuova riga nel menu, non un'altra icona che spinge la tabella ancora più di lato. Due azioni che prima richiedevano una colonna propria — usare un modello di messaggio e modificare un ordine di servizio — si sono così spostate direttamente nel menu, e le tabelle si sono ristrette di una colonna.

Il prezzo da pagare è un clic in più sul computer. Lo sapevamo quando abbiamo deciso, e lo abbiamo accettato: un clic costa mezzo secondo, un cestino premuto per sbaglio costa parecchio di più.

Dove lo vedrai

Abbiamo rifatto così tutti gli elenchi dell'app: Eventi e Servizi, tutte le schede della pagina Visitatori (visitatori, prenotazioni, ordini di servizio, Liste, blacklist), Piani prepagati e il loro Utilizzo iscrizione, Modelli di messaggio, Moduli e le loro risposte, Disponibilità dei servizi, Webhook e Utenti account.

Non devi attivare né configurare nulla — la modifica è già nell'app, in tutte le 31 lingue in cui funziona micali.online. Se in qualche menu manca un'azione che ti aspetteresti di trovare, scrivicelo: l'elenco delle azioni di una riga adesso vive in un unico posto e si cambia facilmente.

Prova micali.online