interaction design

Ορατές δυνατότητες και σαφής πρόβλεψη αποτελέσματος

Ένα διαδραστικό στοιχείο πρέπει να δείχνει τον ρόλο του χωρίς να απαιτεί μαντεψιά. Αν ένα κείμενο μοιάζει με σύνδεσμο αλλά δεν ανοίγει κάτι, παραπλανά. Αν ένα εικονίδιο ενεργεί σαν κουμπί χωρίς κατάλληλη ετικέτα, χρειάζεται προηγούμενη γνώση που ο επισκέπτης ίσως δεν έχει. Δώστε σαφή ονόματα ενεργειών: «Αποθήκευση επιλογών» είναι πιο συγκεκριμένο από «Εντάξει». Η μορφή, η θέση και η διατύπωση πρέπει να συμφωνούν μεταξύ τους.

Προβλέψτε και τη στιγμή πριν από τη δράση. Σε κουμπί διαγραφής πρέπει να είναι σαφές τι ακριβώς θα αφαιρεθεί και αν μπορεί να αποκατασταθεί. Σε σύνδεσμο εξωτερικής υπηρεσίας ο άνθρωπος πρέπει να μπορεί να συμπεράνει πού κατευθύνεται. Αν μια επιλογή αλλάζει κρίσιμο οικονομικό ή προσωπικό δεδομένο, η πρόβλεψη έχει μεγαλύτερη σημασία από την ταχύτητα. Καλός σχεδιασμός μειώνει τις λανθασμένες ενέργειες πριν χρειαστεί μήνυμα σφάλματος.

Άμεση και ουσιαστική ανατροφοδότηση

Κάθε σημαντική ενέργεια χρειάζεται κατανοητή απόκριση. Μετά την αποστολή μιας φόρμας πρέπει να φαίνεται αν η ενέργεια βρίσκεται σε εξέλιξη, ολοκληρώθηκε ή απέτυχε. Ένα γενικό εικονίδιο φόρτωσης δεν εξηγεί τι θα συμβεί αν ο άνθρωπος κλείσει τη σελίδα. Αντίστοιχα, μια αλλαγή φίλτρου πρέπει να επιβεβαιώνεται μέσω των αποτελεσμάτων ή κάποιας ευανάγνωστης ένδειξης. Η ανατροφοδότηση δεν είναι διακόσμηση, αλλά μέρος του νοήματος της λειτουργίας.

Η ταχύτητα της απόκρισης μεταβάλλεται ανάλογα με τη λειτουργία, επομένως ο σχεδιασμός χρειάζεται σαφή κατάσταση αναμονής και εναλλακτικό μήνυμα σε περίπτωση καθυστέρησης. Αποφύγετε να εμφανίζεται επιβεβαίωση επιτυχίας πριν πραγματικά ολοκληρωθεί μια αποθήκευση. Αν η ενέργεια απαιτεί έγκριση ή άλλη διαδικασία, ξεχωρίστε την παραλαβή αιτήματος από την οριστική ολοκλήρωση. Η ακρίβεια των λέξεων αποτρέπει πολύ περισσότερη σύγχυση από μια εντυπωσιακή κινούμενη εικόνα.

Χειρισμός σφάλματος χωρίς αδιέξοδα

Ένα μήνυμα όπως «κάτι πήγε στραβά» αφήνει τον άνθρωπο χωρίς σχέδιο. Όταν είναι δυνατό, εξηγήστε ποιο πεδίο χρειάζεται διόρθωση ή ποια ενέργεια μπορεί να επαναληφθεί. Διατηρήστε τα ήδη σωστά δεδομένα και οδηγήστε το βλέμμα στο συγκεκριμένο πρόβλημα. Για πεδία με κανόνες μορφής, βοηθήστε προληπτικά με σαφή παράδειγμα. Η επισήμανση πρέπει να μην εξαρτάται μόνο από το κόκκινο χρώμα.

Σχεδιάστε τουλάχιστον τις περιπτώσεις ακύρωσης, λήξης διαδικασίας και προσωρινής απώλειας σύνδεσης, εφόσον είναι σχετικές με τη λειτουργία. Ο χρήστης πρέπει να ξέρει αν μια δεύτερη προσπάθεια μπορεί να δημιουργήσει διπλή ενέργεια. Για κρίσιμες αλλαγές, εξετάστε επιβεβαίωση ή ασφαλή δυνατότητα αναίρεσης. Το να αποφεύγουμε τα σφάλματα είναι στόχος, αλλά το να μπορεί κάποιος να ανακάμψει αποτελεί αναπόσπαστο μέρος της ποιότητας.

Καταστάσεις στοιχείων και συνέπεια συμπεριφοράς

Τα κουμπιά, τα πεδία και οι επιλογές δεν έχουν μόνο μία εμφάνιση. Υπάρχουν ενεργή κατάσταση, εστίαση, αναμονή, απενεργοποίηση και επιλεγμένη τιμή. Καθορίστε για κάθε κατάσταση τι σημαίνει και πώς μεταφέρεται στο άτομο που αλληλεπιδρά. Ένα ανενεργό κουμπί χωρίς εξήγηση μπορεί να μοιάζει με τεχνικό λάθος. Μια επιλογή που αλλάζει χρώμα χωρίς συνοδευτική ένδειξη μπορεί να παραμένει ασαφής. Ο κοινός κανόνας μειώνει τις εκπλήξεις.

Η συνέπεια πρέπει να αφορά το αποτέλεσμα της ενέργειας και όχι μόνο το σχήμα του στοιχείου. Αν το ίδιο σύμβολο ανοίγει φίλτρα σε μία οθόνη και διαγράφει δεδομένα σε άλλη, δημιουργείται επικίνδυνη σύγχυση. Αν όλες οι φόρμες εμφανίζουν σφάλματα με παρόμοιο τρόπο, ο άνθρωπος μαθαίνει μία συμπεριφορά και την εφαρμόζει σε περισσότερα σημεία. Καταγράψτε τις αποκλίσεις μόνο όταν υπηρετούν σαφή ανάγκη.

Πληκτρολόγιο, εστίαση και εναλλακτικοί χειρισμοί

Ο σχεδιασμός πρέπει να λειτουργεί και χωρίς συσκευή αφής ή ποντίκι. Σχεδιάστε τη λογική σειρά εστίασης, ορατή ένδειξη του ενεργού στοιχείου και τρόπο ενεργοποίησης μέσω πληκτρολογίου. Αν ένα παράθυρο διαλόγου ανοίγει πάνω από τη σελίδα, πρέπει να είναι κατανοητό πού μεταφέρεται η εστίαση και πώς κλείνει. Η διαδρομή αυτή χρειάζεται πραγματικό έλεγχο στον τελικό κώδικα, όχι μόνο οπτική αποτύπωση στη μακέτα.

Οι Οδηγίες Προσβασιμότητας Περιεχομένου Ιστού (Web Content Accessibility Guidelines) καλύπτουν, μεταξύ άλλων, στόχους χειρισμού και εναλλακτικές σε ενέργειες που απαιτούν σύρσιμο. Σε πρακτικό επίπεδο, αν μετακινείτε κάρτες αποκλειστικά με σύρσιμο, εξετάστε και εντολές για αλλαγή σειράς. Μην θεωρείτε ότι η δυνατότητα χρήσης σε οθόνη αφής αποδεικνύει προσβασιμότητα. Διαφορετικοί άνθρωποι και συσκευές χρειάζονται ισότιμους δρόμους προς το αποτέλεσμα.

Δοκιμή ροής με πραγματικό περιεχόμενο

Καταγράψτε ένα σενάριο από την αρχική απόφαση μέχρι την επιβεβαίωση. Σε κράτηση ραντεβού, για παράδειγμα, ο επισκέπτης επιλέγει διαθέσιμη ώρα, συμπληρώνει στοιχεία, αλλάζει γνώμη και επιστρέφει στην επιλογή. Ελέγξτε αν διατηρούνται πληροφορίες, αν είναι σαφές ποια ώρα είναι διαθέσιμη και αν η τελική επιβεβαίωση περιγράφει σωστά τι ολοκληρώθηκε. Η διαδρομή πρέπει να ελεγχθεί με δεδομένα που πλησιάζουν τις πραγματικές συνθήκες.

Μετρήστε επιτυχία με παρατήρηση και συγκεκριμένο κριτήριο, όχι με προσωπική εντύπωση. Σημειώστε αν βρέθηκε η ενέργεια, αν προκλήθηκαν λανθασμένες προσπάθειες και αν το μήνυμα ολοκλήρωσης έγινε κατανοητό. Αν εμφανιστεί δυσκολία, διαχωρίστε αν προέρχεται από ετικέτα, διάταξη, κατάσταση ή επιχειρηματικό κανόνα. Η σωστή διάγνωση οδηγεί σε μικρότερη και πιο αποτελεσματική διόρθωση.

Μικρός πίνακας αποφάσεων για αλληλεπιδράσεις

Για κάθε σημαντική κίνηση απαντήστε τι περιμένει ο χρήστης και ποια απόκριση θα λάβει.

• Αλλαγή φίλτρου: Εμφανίστε καθαρά την ενεργή επιλογή και ενημερώστε τα αποτελέσματα.
• Αποστολή φόρμας: Διαχωρίστε αναμονή, επιτυχία και αποτυχία με σαφείς διατυπώσεις.
• Διαγραφή στοιχείου: Εξηγήστε τον αντίκτυπο και δώστε κατάλληλη επιβεβαίωση ή αναίρεση.
• Αποτυχία σύνδεσης: Περιγράψτε τι αποθηκεύτηκε και ποια ασφαλής ενέργεια ακολουθεί.

Η αντιστοίχιση ενέργειας και απόκρισης αποτελεί πρακτικό συμβόλαιο συμπεριφοράς ανάμεσα στον σχεδιασμό και στην υλοποίηση.

Ερωτήσεις ελέγχου πριν την παράδοση

Η αλληλεπίδραση πρέπει να έχει ελεγχθεί πέρα από την ιδανική επίδειξη.

• Ορατότητα αποτελέσματος: Μπορεί ο άνθρωπος να ξεχωρίσει ότι η ενέργεια ολοκληρώθηκε;
• Χειρισμός χωρίς ποντίκι: Υπάρχει διαδρομή με πληκτρολόγιο και σαφής εστίαση;
• Ανάκαμψη από αποτυχία: Ξέρει ο χρήστης τι χάθηκε, τι διατηρήθηκε και τι να κάνει μετά;

Καταγράψτε κάθε μη δοκιμασμένη κατάσταση, ιδιαίτερα όταν αφορά πληρωμές, προσωπικά δεδομένα ή μη αναστρέψιμες ενέργειες.

Συχνές πρακτικές ερωτήσεις

Τι σημαίνει interaction design;

Είναι ο σχεδιασμός των ενεργειών, των καταστάσεων και της ανατροφοδότησης που επιτρέπουν σε άνθρωπο να χειριστεί μια ψηφιακή υπηρεσία.

Πώς διαφέρει από τον οπτικό σχεδιασμό;

Ο οπτικός σχεδιασμός ορίζει κυρίως εμφάνιση και ιεραρχία. Ο σχεδιασμός αλληλεπίδρασης ορίζει τι συμβαίνει πριν, κατά τη διάρκεια και μετά από μια ενέργεια.

Γιατί πρέπει να σχεδιάζονται τα σφάλματα;

Επειδή μια λειτουργία μπορεί να αποτύχει ή να δεχθεί λανθασμένη είσοδο. Χωρίς σαφή ανάκαμψη ο χρήστης μένει σε αδιέξοδο.

Ποιος ελέγχει την προσβασιμότητα;

Χρειάζεται συνεργασία σχεδιασμού, ανάπτυξης και δοκιμών σε λειτουργικό περιβάλλον, καθώς η σωστή μακέτα μόνη της δεν αποδεικνύει προσβάσιμη χρήση.

Πότε είναι έτοιμη μια αλληλεπίδραση;

Όταν έχουν περιγραφεί οι κρίσιμες καταστάσεις, έχουν δοκιμαστεί οι κύριες εργασίες και τα τεχνικά κενά είναι γνωστά και καταγεγραμμένα.

Το επόμενο σωστό βήμα

Επιλέξτε μία κρίσιμη ενέργεια και περιγράψτε τη ως ακολουθία προσδοκίας, χειρισμού, κατάστασης και αποτελέσματος. Προσθέστε τι θα συμβεί αν αποτύχει. Αυτή η απλή καταγραφή είναι η βάση για ελέγξιμες, συνεπείς και ανθρώπινες ψηφιακές υπηρεσίες.