Drag-and-Drop UX: Signifiers, Feedback and Accessible Alternatives
Τρόπος σχεδίασης μεταφοράς και απόθεσης που μπορούν να ανακαλύψουν και να χρησιμοποιήσουν οι άνθρωποι: αρπάξτε σημαίνοντα, ανυψώστε και προεπισκόπηση σχολίων, ζώνες απόθεσης, φυσική και την εναλλακτική λύση που απαιτεί το WCAG 2.2 χωρίς μεταφορά.
Core Takeaway
Κάντε εμφανή τα στοιχεία που μπορούν να συρθούν με μια λαβή αρπαγής ή αλλαγή δρομέα, επιβεβαιώστε την αρπάγη με ανύψωση και σκιά, κάντε προεπισκόπηση του αποτελέσματος κατά τη μεταφορά επισημαίνοντας τις ζώνες πτώσης και τακτοποιήστε το στοιχείο καθαρά όταν πέφτει, με αναίρεση. Παρέχετε πάντα έναν τρόπο χωρίς σύρσιμο για να κάνετε το ίδιο πράγμα. Το WCAG 2.2 το απαιτεί στο επίπεδο AA.
Ανατροφοδότηση σε κάθε στάδιο
Η καθοδήγηση του Nielsen Norman Group είναι ότι τα σαφή σημαίνοντα και η σαφής ανατροφοδότηση σε κάθε στάδιο καθιστούν το drag and-drop ανιχνεύσιμο και εύκολο στη χρήση. Μόλις αρπάξουν ένα αντικείμενο, οι άνθρωποι πρέπει να γνωρίζουν ότι το άρπαξαν και να δουν τι θα συμβεί πριν το ρίξουν.
- Σημαίνον: ένα εικονίδιο λαβής λαβής, ένας δρομέας αρπαγής στον δείκτη του ποντικιού ή και τα δύο.
- Αρπάχτηκε: σηκώστε το αντικείμενο με μια σκιά και ελαφριά κλίμακα ώστε να φαίνεται κρατημένο.
- Προεπισκόπηση: επισημάνετε έγκυρες ζώνες πτώσης και δείτε πού θα προσγειωθεί το αντικείμενο.
- Έριξε: κινήστε το στοιχείο στη θέση του και προσφέρετε αναίρεση.
Προσβασιμότητα: προσφέρετε πάντα έναν άλλο τρόπο
Το κριτήριο επιτυχίας WCAG 2.2 2.5.7, Σύρετε κινήσεις (επίπεδο AA), απαιτεί ότι οτιδήποτε γίνεται με σύρσιμο μπορεί επίσης να γίνει με έναν μόνο δείκτη χωρίς σύρσιμο, εκτός εάν η μεταφορά είναι απαραίτητη. Συνήθεις εναλλακτικές λύσεις είναι τα κουμπιά μετακίνησης προς τα πάνω και προς τα κάτω, ένα μενού "Μετακίνηση σε" ή υποστήριξη πληκτρολογίου με πλήκτρα βέλους. Το NN/g σημειώνει επίσης ότι μια ακριβής εναλλακτική λύση βοηθάει συχνά όλους, για παράδειγμα το να σύρετε κατά προσέγγιση στη θέση του και να σπρώξετε με τα πλήκτρα βέλους.
Η φυσική κάνει το σύρσιμο να είναι άμεσο
Τα στοιχεία που σύρονται θα πρέπει να ακολουθούν τον δείκτη χωρίς καθυστέρηση. Όταν απελευθερώνεται, ένα ελατήριο που μεταφέρει την ταχύτητα απελευθέρωσης στην καθίζηση κάνει τη σταγόνα να αισθάνεται φυσική και άλλα αντικείμενα που μετακινούνται ομαλά στην άκρη δείχνει πού βρίσκεται το κενό. Διατηρήστε αυτές τις κινήσεις σύντομες και μειώστε τις όταν είναι ενεργοποιημένη η μειωμένη κίνηση.
Αγγίξτε λεπτομέρειες
Στις οθόνες αφής, διακρίνετε τη μεταφορά από μια κύλιση, συχνά με παρατεταμένο πάτημα για λήψη. Κάντε τις λαβές αρκετά μεγάλες ώστε να τις χτυπάτε, πραγματοποιήστε αυτόματη κύλιση στις λίστες όταν τις σύρετε κοντά στην άκρη και δώστε απτική ανάδραση κατά την παραλαβή και την απόθεση όπου την υποστηρίζει η πλατφόρμα.
Κλειδί Principles για να θυμάστε
- Εμφάνιση τι μπορεί να συρθεί με λαβές ή αλλαγές δρομέα
- Επιβεβαιώστε την αρπαγή και κάντε προεπισκόπηση της πτώσης
- Τακτοποιήστε με καθαρή κίνηση και προσφέρετε αναίρεση
- WCAG 2.5.7 (AA): παρέχει μια εναλλακτική λύση χωρίς σύρσιμο
- Χρησιμοποιήστε ελατήρια για φυσική απελευθέρωση. μείωση για μειωμένη κίνηση
Συχνές Ερωτήσεις
Πηγές
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI