UX: miglioramento del comportamento di scorrimento nelle sottomaschere

I moduli utente hanno il compito di semplificare le cose per gli utenti. Ma cosa succede quando lo scorrimento diventa una battaglia tra le sottomaschere e il loro contenuto? Probabilmente vi sarà già capitato: cercate di scorrere una casella di riepilogo in una sottomaschera, ma l’intera sottomaschera si sposta. O, peggio ancora, si cerca di scorrere la stessa sottomaschera, ma la casella di riepilogo rimane ostinatamente ferma!

Questo aspetto è stato migliorato con 4D 20 R6, rendendo l’azione più naturale.

Cosa deve scorrere? La sottomaschera o il suo contenuto?

Inizialmente (diciamo “molto tempo fa”), utilizzando la rotella di scorrimento o il trackpad, si faceva scorrere solo la sottomaschera stessa, non gli oggetti contenuti nella sottomaschera stessa. Poi è successo il contrario! Gli oggetti inclusi scorrevano, ma non necessariamente la sottomaschera stessa. A meno che non si utilizzino le barre di scorrimento, che spesso sono nascoste. In breve, non è sempre stato facile per l’utente!

Una GIF può aiutare a capire l’obiettivo.

Ecco cosa possiamo fare ora utilizzando la rotellina del mouse (o un trackpad)!

Il meglio dei due mondi

D’ora in poi, se una sottomaschera contiene oggetti scrollabili, questi ultimi scorreranno per primi, a condizione che questi oggetti vengano passati con il mouse quando viene attivata la rotellina o il trackpad. Alcuni oggetti possono essere scrollabili o meno, a seconda del loro contenuto. Un elenco vuoto, un’immagine piccola o una casella di riepilogo il cui contenuto è completamente visualizzato non scorreranno mai.

Il risultato è naturale in tutti i casi: se un oggetto all’interno di un sottoformato può scorrere, lo farà! In caso contrario (se è vuoto o è già stato fatto scorrere completamente), la sottomaschera “genitore” scorrerà… finché non si incontra un nuovo oggetto scrollabile nella sottomaschera. ecc. fino al fondo della sottomaschera.

Naturalmente, questo funziona in tutte le direzioni, dall’alto verso il basso, dal basso verso l’alto, da sinistra a destra o da destra a sinistra.

Conclusione

Questa modifica apparentemente piccola fa una grande differenza nell’esperienza dell’utente. Gli utenti possono navigare con sicurezza tra i moduli, sapendo esattamente cosa scorrerà in base al punto in cui passano il mouse. Questo permette allo sviluppatore di progettare interfacce più semplici e intuitive.