Drag and drop: πώς σχεδιάζεται σωστά η μεταφορά και απόθεση στοιχείων
Το drag and drop, δηλαδή η μεταφορά και απόθεση, επιτρέπει στον χρήστη να μετακινεί ένα στοιχείο από μία θέση σε άλλη. Χρησιμοποιείται σε εργαλεία δημιουργίας σελίδων, ταξινόμηση καρτών, μεταφορά αρχείων και οργάνωση εργασιών. Η δυνατότητα δείχνει απλή, αλλά απαιτεί σαφείς κανόνες: τι επιτρέπεται να μετακινηθεί, πού μπορεί να αφεθεί, πότε αποθηκεύεται η αλλαγή και πώς αναιρείται. Ο καλός σχεδιασμός δεν μετριέται από το πόσο ομαλή είναι η κίνηση του δείκτη, αλλά από το αν ο χρήστης καταλαβαίνει και ελέγχει το αποτέλεσμα.
Πρώτα καθορίζουμε τη δουλειά που εξυπηρετεί
Η ίδια χειρονομία μπορεί να σημαίνει διαφορετικά πράγματα. Σε μία λίστα αλλάζει τη σειρά εμφανίσεων, σε έναν πίνακα εργασιών αλλάζει κατάσταση, ενώ σε εργαλείο σελίδων τοποθετεί ένα νέο δομικό τμήμα. Πριν σχεδιάσουμε το περιβάλλον, ορίζουμε ακριβώς ποια πληροφορία μεταβάλλεται και ποιες επιχειρησιακές συνέπειες έχει η κίνηση. Η οπτική θέση ενός στοιχείου δεν ταυτίζεται πάντα με την πραγματική κατάσταση της εφαρμογής.
Ένα σύστημα που επιτρέπει μετακίνηση αρχείου πρέπει να ξεχωρίζει την αντιγραφή από την αλλαγή θέσης. Σε έναν κατάλογο προϊόντων, η μεταφορά κάρτας ίσως επηρεάζει μόνο τη σειρά προβολής και όχι τα χαρακτηριστικά της εγγραφής. Αν ο χρήστης δεν γνωρίζει αυτή τη διαφορά, μπορεί να θεωρήσει ότι ολοκλήρωσε λειτουργία που δεν έγινε. Χρειάζεται σύντομη εξήγηση δίπλα στην αλληλεπίδραση, όχι εκτενές εγχειρίδιο.
Ορατοί στόχοι και σαφής ανατροφοδότηση
Κατά τη μεταφορά πρέπει να διακρίνεται ποιο στοιχείο είναι ενεργό και ποιες περιοχές δέχονται απόθεση. Μια ένδειξη θέσης δείχνει αν η κάρτα θα μπει πριν ή μετά από άλλη, ενώ μια περιοχή που δεν επιτρέπεται να δεχθεί τη μεταφορά πρέπει να το δηλώνει. Η αλλαγή μόνο του χρώματος δεν επαρκεί για όλους τους επισκέπτες. Συνδυάζουμε θέση, κείμενο και ορατή αλλαγή κατάστασης.
Αφού αφεθεί το στοιχείο, η εφαρμογή εξηγεί αν η ενέργεια ολοκληρώθηκε, απορρίφθηκε ή βρίσκεται σε αποθήκευση. Αν απαιτείται χρόνος για επικοινωνία με διακομιστή, δεν πρέπει να παρουσιάζεται ως οριστική μια αλλαγή που μπορεί να αποτύχει. Όταν η αποτυχία είναι πιθανή, παρέχουμε δυνατότητα επανάληψης ή ασφαλή επαναφορά στην προηγούμενη κατάσταση. Η αξιόπιστη επιβεβαίωση μειώνει τις επαναλαμβανόμενες προσπάθειες.
Γιατί χρειάζεται ισότιμη εναλλακτική με πληκτρολόγιο
Δεν μπορούν όλοι οι χρήστες να χειριστούν με ακρίβεια έναν δείκτη. Κάποιοι χρησιμοποιούν πληκτρολόγιο, άλλοι βοηθητικές συσκευές ή οθόνη αφής με περιορισμένη κινητικότητα. Για αυτό κάθε κρίσιμη λειτουργία μεταφοράς χρειάζεται ισοδύναμο τρόπο εκτέλεσης, όπως «Μετακίνηση πάνω», «Μετακίνηση κάτω» ή επιλογή θέσης από λίστα. Η εναλλακτική πρέπει να ολοκληρώνει την ίδια εργασία και να διατηρεί τους ίδιους κανόνες δικαιωμάτων.
Η εστίαση οφείλει να παραμένει προβλέψιμη μετά τη μετακίνηση. Αν μια κάρτα αλλάξει θέση, ο χρήστης χρειάζεται επιβεβαίωση για το νέο αποτέλεσμα και δυνατότητα να συνεχίσει από εκεί. Η αλληλεπίδραση δεν πρέπει να εξαρτάται αποκλειστικά από την παρατεταμένη πίεση ενός πλήκτρου ή από συνδυασμούς που συγκρούονται με βοηθητικές τεχνολογίες. Η προσβασιμότητα πρέπει να σχεδιαστεί από την αρχή και όχι να προστεθεί ως έμπλαστρο.
Ειδικές δυσκολίες στα κινητά και στις οθόνες αφής
Στις μικρές οθόνες το δάχτυλο κρύβει μέρος του στοιχείου που μετακινείται. Ένα πολύ μικρό σημείο χειρισμού προκαλεί λανθασμένες κινήσεις, ενώ η σύγκρουση με την κατακόρυφη κύλιση μπορεί να μετατρέψει μια απλή προσπάθεια ανάγνωσης σε ανεπιθύμητη αναδιάταξη. Διαμορφώνουμε κατάλληλη περιοχή λαβής, σαφή κατάσταση ενεργοποίησης και ορατή θέση στόχου. Η κύλιση της σελίδας πρέπει να παραμένει ελεγχόμενη.
Ελέγχουμε πώς συμπεριφέρεται η διεπαφή όταν ο χρήστης μεταφέρει ένα στοιχείο προς το άκρο της οθόνης, όταν αλλάξει ο προσανατολισμός ή όταν εμφανιστεί το πληκτρολόγιο. Σε μακριές λίστες εξετάζουμε αν η αυτόματη κύλιση βοηθά ή προκαλεί αποπροσανατολισμό. Η τελική επιλογή προκύπτει από δοκιμή σε πραγματική συσκευή και όχι μόνο από προσομοίωση σε μεγάλη οθόνη υπολογιστή.
Δημιουργία ιστοσελίδας με οπτικά δομικά στοιχεία
Σε έναν κατασκευαστή σελίδων, η μεταφορά μπορεί να τοποθετεί κείμενα, εικόνες, ενότητες και φόρμες σε προκαθορισμένη διάταξη. Αυτό επιταχύνει την παραγωγή όταν οι διαθέσιμες επιλογές έχουν σαφή όρια. Χρειάζεται όμως διάκριση ανάμεσα στην οπτική σειρά και στη σημασιολογική σειρά ανάγνωσης. Μια όμορφη διάταξη δεν πρέπει να παράγει ακατανόητη ακολουθία τίτλων ή να κρύβει σημαντικό περιεχόμενο σε μικρές οθόνες.
Ο κώδικας HTML (Γλώσσα Σήμανσης Υπερκειμένου, HyperText Markup Language) που παράγεται έχει ιδιαίτερη σημασία για την προσβασιμότητα. Ελέγχουμε αν υπάρχουν σωστοί τίτλοι, ετικέτες και στοιχεία πλοήγησης, ανεξάρτητα από την οπτική τοποθέτηση. Η δυνατότητα μετακίνησης ενός πλαισίου δεν δίνει από μόνη της έλεγχο στην ιεραρχία της σελίδας. Χρειάζονται πρότυπα που προστατεύουν κρίσιμους κανόνες και επιτρέπουν ελευθερία εκεί όπου δεν προκαλείται πρόβλημα.
Τι σημαίνει για SEO και για τη συντήρηση
Το SEO (Βελτιστοποίηση για Μηχανές Αναζήτησης, Search Engine Optimization) στηρίζεται στην πραγματική πληροφορία, στη σωστή δομή και στην προσβασιμότητα των σελίδων. Ένας οπτικός κατασκευαστής μπορεί να βοηθήσει τη συντακτική ομάδα να οργανώσει ενότητες, αλλά δεν εγγυάται ότι το κείμενο θα είναι χρήσιμο ή ότι ο παραγόμενος κώδικας θα είναι ελαφρύς. Ελέγχουμε τη συνοχή των τίτλων, την ποιότητα εικόνων, τους εσωτερικούς συνδέσμους και την ταχύτητα φόρτωσης.
Για μακροχρόνια συντήρηση είναι σημαντικό το περιεχόμενο να μην παγιδεύεται σε αδιαφανή αποθήκευση που δεν μπορεί να εξαχθεί. Αν χρειαστεί αλλαγή προτύπου, ιδανικά τα κείμενα, οι εικόνες και οι σχέσεις πρέπει να παραμένουν διαθέσιμα. Το κόστος μιας μελλοντικής μεταφοράς δεν φαίνεται πάντα στην πρώτη επίδειξη. Προκύπτει όταν ο ιστότοπος μεγαλώσει και χρειαστεί μαζική επεξεργασία.
Αποθήκευση, αναίρεση και συγκρούσεις ενεργειών
Μια νέα σειρά στοιχείων συχνά αποθηκεύεται ως λίστα αναγνωριστικών. Η εφαρμογή πρέπει να επαληθεύει ότι ο χρήστης έχει δικαίωμα αλλαγής και ότι δεν λείπουν ή προστίθενται αθέμιτα στοιχεία. Αν δύο άτομα μετακινήσουν ταυτόχρονα την ίδια κάρτα, απαιτείται σαφής κανόνας επίλυσης της σύγκρουσης. Η εικόνα που βλέπει ο τελευταίος χρήστης δεν αρκεί ως απόδειξη επιτυχούς αποθήκευσης.
Η αναίρεση πρέπει να είναι πραγματική λειτουργία και όχι διακοσμητικό μήνυμα. Ελέγχουμε αν μπορεί να επιστρέψει η προηγούμενη θέση, τι συμβαίνει μετά την ανανέωση της σελίδας και πώς καταγράφεται η αλλαγή. Σε κρίσιμες λίστες, η αποθήκευση και η καταγραφή αποτελούν μέρος της επιχειρησιακής ασφάλειας. Δεν πρέπει να αφήνουμε ασαφές αν η αλλαγή επιβίωσε μετά το κλείσιμο του φυλλομετρητή.
Κριτήρια αποδοχής για πραγματική λειτουργία
Μια ολοκληρωμένη δοκιμή περιλαμβάνει επιτυχημένη μεταφορά, άκυρο στόχο, ακύρωση πριν την απόθεση, απώλεια σύνδεσης και επαναφορά της παλιάς σειράς. Δοκιμάζουμε επίσης χρήση με πληκτρολόγιο, οθόνη αφής και διαφορετικές διαστάσεις. Ελέγχουμε αν η ίδια εγγραφή μπορεί να εμφανιστεί δύο φορές κατά λάθος και αν διατηρείται η σωστή σειρά μετά την ανανέωση.
Όταν η λειτουργία αποτυγχάνει, ο χρήστης χρειάζεται χρήσιμο μήνυμα και διαδρομή συνέχειας. Αντί για αόριστη «αποτυχία», προτιμούμε να εξηγείται ότι η αλλαγή δεν αποθηκεύτηκε και να υπάρχει ασφαλής τρόπος επανάληψης. Η δοκιμή ολοκληρώνεται όταν αποδεικνύεται όχι μόνο ότι η μεταφορά λειτουργεί, αλλά και ότι η πληροφορία παραμένει σωστή.
Σύντομες απαντήσεις στις συχνότερες απορίες
Είναι κατάλληλο για όλες τις λειτουργίες;
Όχι. Προτιμάται όταν η μεταφορά αναπαριστά φυσικά την εργασία. Για κρίσιμες επιλογές, μια καθαρή φόρμα ή λίστα ενεργειών μπορεί να είναι ασφαλέστερη.
Χρειάζεται οπωσδήποτε ποντίκι;
Όχι. Πρέπει να υπάρχει ισοδύναμος χειρισμός με πληκτρολόγιο ή σαφείς επιλογές μετακίνησης ώστε να μην αποκλείονται χρήστες.
Πότε θεωρείται αποθηκευμένη η νέα σειρά;
Όταν η εφαρμογή έχει επιβεβαιώσει πραγματικά την ενημέρωση, όχι απλώς όταν η κάρτα φαίνεται στη νέα θέση.
Είναι ίδια η εμπειρία σε κινητό;
Δεν αρκεί η συρρίκνωση της οθόνης. Χρειάζονται ξεχωριστές δοκιμές για αφή, κύλιση, λαβές και ορατότητα στόχων.
Τι πρέπει να ελεγχθεί πριν την παραγωγική διάθεση;
Η ορθότητα των δεδομένων, η προσβασιμότητα, η αναίρεση, τα σφάλματα δικτύου και η συμπεριφορά πολλών χρηστών στην ίδια πληροφορία.