UI design: σχεδιασμός διεπαφής που καθοδηγεί χωρίς να μπερδεύει
Το UI design, δηλαδή ο σχεδιασμός διεπαφής χρήστη, αφορά όσα βλέπει και χειρίζεται κάποιος σε μια ψηφιακή υπηρεσία: κουμπιά, πεδία, μενού, κάρτες, ενδείξεις κατάστασης και διαδρομές πλοήγησης. Ο στόχος δεν είναι μόνο η οπτική ομορφιά αλλά η σαφήνεια του τι μπορεί να γίνει, τι συνέβη μετά από μια ενέργεια και πώς διορθώνεται ένα σφάλμα. Καλή διεπαφή είναι εκείνη που υποστηρίζει πραγματικές εργασίες χωρίς να απαιτεί από τον άνθρωπο να αποκωδικοποιεί τις προθέσεις του σχεδιαστή.
Διεπαφή, εμπειρία και οπτική γλώσσα: ποια είναι η διαφορά
Το UI (διεπαφή χρήστη, User Interface) είναι το σημείο αλληλεπίδρασης: για παράδειγμα, η φόρμα αναζήτησης ακινήτου και τα κουμπιά των φίλτρων. Το UX (εμπειρία χρήστη, User Experience) περιλαμβάνει ευρύτερα την ανάγκη, την πορεία, την κατανόηση και το τελικό αποτέλεσμα της χρήσης. Μια φόρμα μπορεί να έχει όμορφα πεδία αλλά να ζητά περιττές πληροφορίες, προκαλώντας κακή συνολική εμπειρία.
Ο οπτικός σχεδιασμός ασχολείται με την ιεράρχηση, τη χρωματική σύνθεση, την τυπογραφία και την ταυτότητα. Στην πράξη οι ειδικότητες συνεργάζονται, χωρίς να είναι ταυτόσημες. Αν ο επισκέπτης δεν γνωρίζει ποια επιλογή κάνει τι, δεν αρκεί να αλλάξουμε το χρώμα της. Χρειάζεται να εξετάσουμε τη λογική και την ονομασία της ενέργειας.
Ξεκινάμε από τις εργασίες του χρήστη
Πριν σχεδιαστεί μια οθόνη, περιγράφουμε τις κύριες εργασίες: αναζήτηση προϊόντος, σύγκριση επιλογών, αποστολή αιτήματος ή ενημέρωση λογαριασμού. Για καθεμία καταγράφουμε τι γνωρίζει ήδη ο άνθρωπος, τι χρειάζεται να μάθει και ποιο αποτέλεσμα θεωρεί ολοκλήρωση. Αυτή η καταγραφή αποτρέπει την προσθήκη στοιχείων που εντυπωσιάζουν στο προσχέδιο αλλά δυσκολεύουν την καθημερινή χρήση.
Στη συνέχεια ιεραρχούμε τις επιλογές με βάση τη συχνότητα και τη σημασία τους. Η κύρια ενέργεια πρέπει να αναγνωρίζεται οπτικά, αλλά δεν χρειάζεται κάθε στοιχείο να μοιάζει εξίσου σημαντικό. Οι δευτερεύουσες ενέργειες, όπως η αποθήκευση προτίμησης ή η επαναφορά φίλτρων, παραμένουν διαθέσιμες χωρίς να ανταγωνίζονται τον βασικό σκοπό της οθόνης.
Πώς χτίζεται η οπτική ιεραρχία
Η διάταξη αρχίζει με νοηματικές ομάδες. Μια τιμή τοποθετείται κοντά στην περιγραφή που προσδιορίζει, μια επιλογή φίλτρου κοντά στην αντίστοιχη ετικέτα και ένα μήνυμα σφάλματος κοντά στο πεδίο που το προκαλεί. Η απόσταση λειτουργεί ως σήμα σχέσης. Τα έντονα χρώματα πρέπει να έχουν περιορισμένη, συνεπή σημασία, αλλιώς η διεπαφή μετατρέπεται σε πεδίο ανταγωνιστικών ειδοποιήσεων.
Η τυπογραφία εξυπηρετεί διαφορετικά επίπεδα ανάγνωσης: ο τίτλος δηλώνει πού βρίσκεται ο χρήστης, οι υπότιτλοι ξεχωρίζουν ενότητες και το κείμενο οδηγιών εξηγεί μια ενέργεια χωρίς περιττή ορολογία. Η ποιότητα δεν αποτιμάται από τον αριθμό διαφορετικών γραμματοσειρών ή εικονιδίων αλλά από το πόσο γρήγορα γίνεται κατανοητή η επόμενη κίνηση.
Καταστάσεις διεπαφής που πρέπει να προβλεφθούν
Ένα κουμπί δεν υπάρχει μόνο στην αρχική, έγχρωμη μορφή του. Μπορεί να είναι διαθέσιμο, σε αναμονή, απενεργοποιημένο ή να επιστρέφει μήνυμα αποτυχίας. Κάθε κατάσταση χρειάζεται σαφή ένδειξη. Σε μια αποστολή φόρμας, για παράδειγμα, ο χρήστης πρέπει να αντιλαμβάνεται αν τα στοιχεία μεταφέρονται, αν ολοκληρώθηκαν ή αν χρειάζεται να επαναλάβει την προσπάθεια χωρίς να χάσει όσα πληκτρολόγησε.
Εξίσου σημαντικές είναι οι κενές καταστάσεις. Μια αναζήτηση χωρίς αποτελέσματα δεν πρέπει να μοιάζει με τεχνική βλάβη. Εξηγεί ότι δεν βρέθηκε αντίστοιχο περιεχόμενο, δείχνει ποια κριτήρια ίσως περιορίζουν υπερβολικά την αναζήτηση και προσφέρει ασφαλή επόμενη επιλογή. Η σαφής ανατροφοδότηση μειώνει το αίσθημα ότι ο ιστότοπος «δεν κάνει τίποτα».
Φόρμες και ονομασίες ενεργειών
Μια κατανοητή φόρμα χρησιμοποιεί ορατές ετικέτες, λογική σειρά πεδίων και επεξηγήσεις μόνο όπου είναι απαραίτητες. Η ετικέτα δεν αντικαθίσταται πλήρως από προσωρινό κείμενο που εξαφανίζεται μόλις γράψει ο επισκέπτης. Τα σφάλματα εξηγούν τι πρέπει να διορθωθεί, αντί να εμφανίζουν αόριστη «μη έγκυρη τιμή». Αποφεύγονται τα υποχρεωτικά στοιχεία που δεν εξυπηρετούν τη συγκεκριμένη εργασία.
Το κείμενο του κουμπιού περιγράφει το αποτέλεσμα: «Αποστολή αιτήματος» είναι σαφέστερο από «Συνέχεια» όταν δεν υπάρχει άλλο στάδιο. Αν μια ενέργεια έχει κόστος ή διαγράφει δεδομένα, η σημασία της πρέπει να είναι προφανής πριν ενεργοποιηθεί. Η διατύπωση λειτουργεί ως μέρος του σχεδιασμού, όχι ως τελευταίο διακοσμητικό στοιχείο.
Προσβασιμότητα μέσα στη διαδικασία σχεδιασμού
Οι οδηγίες WCAG (οδηγίες προσβασιμότητας διαδικτυακού περιεχομένου, Web Content Accessibility Guidelines) οργανώνουν την προσβασιμότητα γύρω από πληροφορία που μπορεί να γίνει αντιληπτή, χειρισμό, κατανόηση και τεχνική ανθεκτικότητα. Για τη διεπαφή αυτό μεταφράζεται σε επαρκή ορατότητα, λειτουργία με πληκτρολόγιο, σαφή εστίαση και κατανοητές ονομασίες στα χειριστήρια. Το χρώμα δεν πρέπει να είναι η μοναδική ένδειξη επιτυχίας ή σφάλματος.
Η προσβασιμότητα δεν περιορίζεται σε πρόσθετο έλεγχο στο τέλος. Επηρεάζει τις επιλογές αντίθεσης, τη σειρά ανάγνωσης, τις διαστάσεις στόχων χειρισμού και τον τρόπο εμφάνισης μηνυμάτων. Ένα πρωτότυπο που φαίνεται σωστό με ποντίκι μπορεί να είναι αδύνατο να χρησιμοποιηθεί με πληκτρολόγιο. Για τον λόγο αυτό οι δοκιμές πρέπει να περιλαμβάνουν διαφορετικούς τρόπους αλληλεπίδρασης.
Προσαρμογή σε μικρότερες οθόνες
Η προσαρμοστική σχεδίαση δεν είναι απλή σμίκρυνση του επιτραπέζιου περιβάλλοντος. Στο κινητό ο διαθέσιμος χώρος είναι μικρότερος, η αφή αντικαθιστά το ποντίκι και το πληκτρολόγιο οθόνης αλλάζει την ορατή περιοχή. Ο σχεδιασμός ορίζει ποια στοιχεία παραμένουν μπροστά, ποια μεταφέρονται σε αναδιπλούμενο τμήμα και πώς επιστρέφει ο χρήστης στην προηγούμενη επιλογή.
Ένα σύνολο φίλτρων μπορεί να λειτουργεί ως πλευρική στήλη στον υπολογιστή και ως αναδυόμενο φύλλο στο κινητό. Δεν πρέπει όμως να χάνεται η επιλεγμένη κατάσταση όταν αλλάζει η διάταξη. Απαιτούνται δοκιμές για ακραία μεγάλα κείμενα, μεγέθυνση, διαφορετικά πλάτη και πραγματικές κινήσεις των χεριών, όχι μόνο στατικές εικόνες οθονών.
Βιβλιοθήκη στοιχείων και συνέπεια
Ένα σύστημα σχεδιασμού περιγράφει επαναχρησιμοποιήσιμα στοιχεία, αποστάσεις, χρώματα, γραμματοσειρές και κανόνες συμπεριφοράς. Η αξία του φαίνεται όταν η ίδια ενέργεια παρουσιάζεται με το ίδιο νόημα σε πολλές σελίδες. Δεν είναι αρκετό να διαθέτουμε μία συλλογή κουμπιών· χρειάζονται καταστάσεις, οδηγίες χρήσης και κανόνες για το πότε μια παραλλαγή επιτρέπεται.
Η συνέπεια δεν σημαίνει πλήρη ομοιομορφία. Μια ενέργεια υψηλού κινδύνου χρειάζεται διαφορετική έμφαση από μια αθώα αλλαγή προβολής. Το ζητούμενο είναι να συνδέονται οι διαφοροποιήσεις με πραγματική σημασία. Έτσι μια αλλαγή σχεδίου σε κεντρικό στοιχείο δεν προκαλεί διαφορετική συμπεριφορά σε κάθε ενότητα του ιστότοπου.
Πώς παραδίδεται και ελέγχεται ένα σχέδιο διεπαφής
Ένα χρήσιμο παραδοτέο περιλαμβάνει τις βασικές οθόνες, διαδρομές, συμπεριφορές, εναλλακτικές καταστάσεις και κανόνες για διαφορετικά μεγέθη συσκευής. Η ομάδα υλοποίησης πρέπει να γνωρίζει τι συμβαίνει όταν ένα πεδίο είναι κενό, όταν ο χρήστης επιστρέφει και όταν η σύνδεση αποτυγχάνει. Μόνο τα στατικά χρώματα και περιθώρια δεν αρκούν για να κατασκευαστεί αξιόπιστη λειτουργία.
Πίνακας αποδοχής μιας διεπαφής
- Εντοπισμός: ο χρήστης αναγνωρίζει εύκολα την κύρια ενέργεια και τη θέση του.
- Κατανόηση: οι ονομασίες περιγράφουν συγκεκριμένο αποτέλεσμα, όχι εσωτερική ορολογία ομάδας.
- Ανατροφοδότηση: φόρτωση, επιτυχία, αποτυχία και απουσία αποτελεσμάτων έχουν ξεχωριστή ένδειξη.
- Συμπερίληψη: η διαδρομή ελέγχεται με πληκτρολόγιο, μεγέθυνση και μικρές οθόνες.
- Συνέπεια: επαναλαμβανόμενα στοιχεία διατηρούν νόημα και συμπεριφορά σε όλο το προϊόν.
Πότε χρειάζεται ανασχεδιασμός και πότε μικρή διόρθωση
Αν οι χρήστες δυσκολεύονται σε ένα σαφώς προσδιορισμένο σημείο, μια περιορισμένη αλλαγή ίσως αρκεί: καλύτερη ετικέτα, εμφανέστερη κατάσταση ή αφαίρεση περιττού πεδίου. Αν όμως η πλοήγηση συνολικά δεν αντιστοιχεί στις εργασίες τους, η αλλαγή χρωμάτων δεν θα λύσει το πρόβλημα. Χρειάζεται έρευνα της διαδρομής και ενδεχομένως διαφορετική οργάνωση της πληροφορίας.
Η αξιολόγηση συνδέεται με παρατηρήσεις χρήσης, όχι αποκλειστικά με προτιμήσεις της ομάδας. Ο σχεδιασμός εμπειρίας χρήστη βοηθά να διαπιστωθεί αν το πραγματικό πρόβλημα βρίσκεται πριν ή μετά τη διεπαφή, ενώ ο οπτικός σχεδιασμός συμβάλλει στη σαφή και συνεπή παρουσίαση. Η επιτυχία του UI κρίνεται όταν ένας άνθρωπος ολοκληρώνει την εργασία του με σιγουριά.