Come abbiamo evitato che il testo si sposti quando compaiono i simboli

Quando spostavo il cursore per modificare un elenco, il testo scivolava di lato. Quando il cursore usciva, tornava al suo posto.

A muoversi era una sola riga, ma sembrava che oscillasse l’intero paragrafo. Questa piccola differenza interrompeva continuamente il flusso della modifica.

La causa era la larghezza del marcatore.

Normalmente sullo schermo si vede un punto elenco rotondo. Nel file, però, sono memorizzati un trattino e uno spazio. Quando il cursore raggiunge il marcatore, bisogna mostrare il testo originale affinché possa essere modificato direttamente.

Il problema è che le due forme occupano larghezze diverse. Il punto elenco è un riquadro dalla larghezza fissa, mentre la larghezza del trattino e dello spazio varia a seconda del carattere tipografico. In mote, la differenza era di 4,9 px. Ogni volta che appariva il testo originale, il testo successivo veniva spostato della stessa distanza.

Spostiamo la riga in misura pari alla differenza di larghezza

Non abbiamo reso uguali le due larghezze. Abbiamo invece compensato la differenza.

Nel momento in cui il marcatore passa alla forma originale, spostiamo l’intera riga nella direzione opposta di una distanza pari alla differenza di larghezza. Anche se la forma del simbolo cambia, il punto in cui inizia il testo rimane invariato.

Il file non viene toccato. Il punto elenco è un elemento decorativo disegnato sopra il trattino e la compensazione modifica soltanto la posizione in cui la riga viene disegnata sullo schermo. Anche quando il cursore entra ed esce, il contenuto salvato rimane invariato.

Abbiamo anche unificato il criterio usato per calcolare la larghezza. Prima c’erano valori distinti nel punto in cui veniva disegnato il marcatore e in quello in cui veniva compensata la riga. La piccola differenza tra i due valori corrispondeva proprio a quei 4,9 px.

Ora entrambi i punti chiedono alla stessa funzione la larghezza del marcatore. Poiché il criterio è unico, non possono più verificarsi discrepanze.

Tuttavia, se il margine sinistro non è sufficiente, la compensazione non viene applicata. Questo perché, spostando la riga, il testo potrebbe essere tagliato fuori dalla finestra. La scomparsa del testo sarebbe un problema più grave dell’oscillazione.

Abbiamo lasciato che titoli e citazioni si spostassero

All’inizio abbiamo applicato lo stesso metodo anche ai titoli e alle citazioni.

Ma il # dei titoli e il > delle citazioni hanno normalmente una larghezza pari a 0 sullo schermo. Per mantenere fermo il testo, avremmo dovuto spostare i simboli nel margine sinistro.

Tecnicamente funzionava bene. Il testo non si muoveva. Ma l’aspetto dello schermo risultava insolito. Non sembrava naturale vedere il simbolo sospeso da solo nel margine.

Perciò siamo tornati indietro. Ora, quando appaiono i simboli dei titoli e delle citazioni, il testo viene spostato verso destra.

Alla fine abbiamo scelto una soluzione diversa per ciascun tipo di marcatore.

I marcatori che hanno un riquadro sullo schermo, come i punti elenco e le caselle delle attività, mantengono fermo il testo. I marcatori che normalmente hanno larghezza pari a 0, come quelli dei titoli e delle citazioni, spostano il testo.

Un aspetto naturale dello schermo era più importante di una regola unica.

Mostriamo i simboli soltanto quando sono davvero necessari

Il modo migliore per ridurre le oscillazioni è ridurre il numero di momenti in cui il simbolo cambia.

Ora il simbolo dell’elenco viene mostrato nella sua forma originale soltanto quando il cursore si trova sopra di esso. Quando il cursore supera lo spazio e si sposta nel testo, torna immediatamente a essere un punto elenco. Non è necessario continuare a vedere il trattino mentre si modifica il contenuto dell’elenco.

L’allineamento viene mantenuto anche quando una riga diventa lunga e va a capo. Anche mentre il marcatore è mostrato nella sua forma originale, la seconda riga inizia sotto il testo della prima.

Abbiamo risolto anche il problema per cui un clic veniva erroneamente interpretato come un trascinamento. Quando il puntatore oscillava leggermente nel momento in cui cambiava il marcatore, il testo finiva per essere selezionato. Ora il movimento viene considerato un trascinamento soltanto se il puntatore si sposta di oltre 8 px.

Verifichiamo con i numeri, non con gli occhi

Differenze come questa sono difficili da verificare soltanto a occhio. A una rapida occhiata può sembrare tutto a posto, ma con un uso prolungato la schermata può risultare dispersiva.

Per questo abbiamo creato un test che avvia l’applicazione reale. Sposta il cursore dentro e fuori dal marcatore e confronta direttamente la coordinata x in cui inizia il testo. Il test viene superato soltanto se i due valori sono uguali.

Verifichiamo nello stesso modo i punti elenco, le caselle delle attività e gli elenchi annidati.

È difficile che un disallineamento di un solo pixel venga segnalato come bug. Gli utenti, invece di spiegare che cosa si è mosso, percepiscono semplicemente che “qualcosa distrae”.

Perciò movimenti come questi devono essere sorvegliati dai numeri, non dalle persone.

Una schermata tranquilla non è una schermata in cui non accade nulla. È una schermata in cui i cambiamenti necessari avvengono senza disturbare lo sguardo.