UX drag-and-drop: significanti, feedback e alternative accessibili
Come progettare il trascinamento e rilascio che le persone possono scoprire e utilizzare: afferrare significanti, sollevare e visualizzare in anteprima il feedback, zone di rilascio, fisica e l'alternativa senza trascinamento richiesta da WCAG 2.2.
Punto chiave
Rendi evidenti gli oggetti trascinabili con una maniglia o una modifica del cursore, conferma la presa con un sollevamento e un'ombra, visualizza in anteprima il risultato durante il trascinamento evidenziando le zone di rilascio e sistema chiaramente l'oggetto quando viene rilasciato, con Annulla. Fornire sempre un modo che non trascini per fare la stessa cosa; WCAG 2.2 lo richiede al livello AA.
Feedback in ogni fase
La guida di Nielsen Norman Group è che significanti chiari e feedback chiari in ogni fase rendano il drag-and-drop rilevabile e facile da usare. Una volta afferrato un oggetto, le persone devono sapere che è stato afferrato e vedere cosa succederà prima di lasciarlo cadere.
- Significante: un'icona con una maniglia, un cursore al passaggio del mouse o entrambi.
- Afferrato: solleva l'oggetto con un'ombra e una leggera scala in modo che sembri trattenuto.
- Anteprima: evidenzia le zone di rilascio valide e mostra dove atterrerà l'oggetto.
- Rilasciato: anima l'elemento in posizione e offre l'annullamento.
Accessibilità: offrire sempre un'altra modalità
WCAG 2.2 criterio di successo 2.5.7, Movimenti di trascinamento (livello AA), richiede che qualsiasi operazione eseguita mediante trascinamento possa essere eseguita anche con un singolo puntatore senza trascinamento, a meno che il trascinamento non sia essenziale. Alternative comuni sono i pulsanti sposta su e sposta giù, un menu "Sposta in" o il supporto della tastiera con i tasti freccia. NN/g rileva inoltre che un'alternativa precisa spesso aiuta tutti, ad esempio trascinando approssimativamente in posizione e spingendo con i tasti freccia.
La fisica fa sì che il trascinamento sembri diretto
Gli elementi trascinati dovrebbero seguire il puntatore senza ritardi. Quando viene rilasciata, una molla che trasporta la velocità di rilascio nell'assestamento rende la caduta fisica, e gli altri oggetti che si spostano dolcemente di lato mostrano dove si trova lo spazio. Mantenere questi movimenti brevi e ridurli quando è attivo il movimento ridotto.
Tocca i dettagli
Sui touch screen, distinguere un trascinamento da uno scorrimento, spesso con una pressione prolungata per riprendere. Rendi le maniglie abbastanza grandi da poter essere colpite, fai scorrere automaticamente gli elenchi quando li trascini vicino al bordo e fornisci feedback tattile quando prendi e rilascia dove la piattaforma lo supporta.
Principi chiave da ricordare
- Mostra cosa è trascinabile con maniglie o modifiche del cursore
- Conferma la presa e visualizza l'anteprima del rilascio
- Sistemati con un movimento chiaro e offri l'annullamento
- WCAG 2.5.7 (AA): fornisce un'alternativa senza trascinamento
- Utilizzare le molle per il rilascio naturale; ridurre per un movimento ridotto
Domande frequenti
Fonti
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI