Εικονίδια: σαφή σύμβολα για πλοήγηση και οπτική κατανόηση
Τα εικονίδια συμπυκνώνουν μια ενέργεια, λειτουργία ή κατηγορία σε μικρό οπτικό σύμβολο. Χρησιμεύουν όταν ο χρήστης αναγνωρίζει γρήγορα το νόημά τους, όχι όταν απλώς διακοσμούν την οθόνη. Ένα σύμβολο αναζήτησης, για παράδειγμα, είναι χρήσιμο επειδή συνδέεται με μια συγκεκριμένη ενέργεια. Όταν όμως ένα εικονίδιο είναι αμφίσημο, η απλή προσθήκη του μπορεί να δημιουργήσει περισσότερο κόπο από όσο αφαιρεί. Ο σχεδιασμός πρέπει να εξετάζει αναγνώριση, συνέπεια και προσβασιμότητα μαζί.
Πότε αρκεί ένα σύμβολο και πότε χρειάζεται λέξη
Ένα γνωστό οπτικό σήμα μπορεί να επιταχύνει τη σάρωση μιας διεπαφής, αλλά η αναγνωρισιμότητα εξαρτάται από το κοινό και τα συμφραζόμενα. Σύμβολα όπως το καλάθι αγορών συχνά γίνονται κατανοητά μέσα σε ηλεκτρονικό κατάστημα, ενώ μια αφηρημένη ένδειξη για σύνθετη υπηρεσία μπορεί να μη σημαίνει τίποτε χωρίς περιγραφή. Αν η σημασία δεν είναι σχεδόν αυτονόητη, τοποθετήστε κειμενική ετικέτα κοντά στο εικονίδιο. Το κείμενο αποσαφηνίζει την ενέργεια και βοηθά στη μάθηση.
Η απόφαση μπορεί να εξεταστεί με μια απλή δοκιμή: δείξτε μόνο το σύμβολο σε άτομα που δεν γνωρίζουν την εφαρμογή και ζητήστε τους να περιγράψουν τι πιστεύουν ότι κάνει. Μην τους δίνετε πολλαπλές επιλογές που αποκαλύπτουν την απάντηση. Αν εμφανιστούν διαφορετικές ερμηνείες, δοκιμάστε διαφορετική εικόνα ή προσθέστε ετικέτα. Το εικονίδιο δεν πρέπει να αναγκάζει τον χρήστη να πειραματιστεί για να βρει τη λειτουργία του.
Γεωμετρία, γραμμή και κοινή οικογένεια
Ένα σύνολο συμβόλων πρέπει να δείχνει ότι ανήκει στο ίδιο σύστημα. Ορίστε κοινό πάχος γραμμής, τρόπο σχεδίασης γωνιών, αναλογίες, πλήρωση και οπτικό βάρος. Αν ένα σύμβολο έχει λεπτό περίγραμμα και το διπλανό είναι συμπαγές, μπορεί να φαίνονται ασύνδετα παρότι έχουν το ίδιο ονομαστικό μέγεθος. Η συνοχή είναι σημαντική στα μενού, στους πίνακες εργαλείων και στις καρτέλες πολλών λειτουργιών.
Χρησιμοποιήστε ένα κοινό πλέγμα σχεδίασης, αλλά διορθώστε οπτικά τις μορφές όπου χρειάζεται. Ένας κύκλος και ένα τετράγωνο ίδιων διαστάσεων ενδέχεται να μην φαίνονται ισοδύναμα στο μάτι. Τα κενά ανάμεσα στα μέρη του συμβόλου είναι εξίσου σημαντικά με τη γραμμή. Ελέγξτε αν λεπτομέρειες εξαφανίζονται στις μικρές προβολές και αν το σύνολο παραμένει αναγνωρίσιμο χωρίς υπερβολικά περίπλοκες εσωτερικές μορφές.
Μέγεθος προβολής και περιοχή αλληλεπίδρασης
Το ορατό μέγεθος του συμβόλου δεν είναι το ίδιο με την επιφάνεια που πατιέται. Ένα μικρό εικονίδιο μπορεί να βρίσκεται μέσα σε αρκετά μεγαλύτερο κουμπί ώστε να επιλέγεται χωρίς δυσκολία σε οθόνη αφής. Σχεδιάστε την περιοχή ενέργειας μαζί με την απόσταση από γειτονικά χειριστήρια. Εξετάστε πώς λειτουργεί σε κινητό, με ένα χέρι και με μεγαλύτερη γραμματοσειρά συστήματος. Η χρηστικότητα δεν τελειώνει στην καλαίσθητη απεικόνιση.
Για την εικόνα στην οθόνη, τα διανυσματικά γραφικά είναι χρήσιμα επειδή μπορούν να κλιμακώνονται χωρίς να μετατρέπονται εύκολα σε θολά εικονοστοιχεία. Δεν είναι όμως κάθε αρχείο κατάλληλο για κάθε πλατφόρμα. Επιλέξτε μορφές ανάλογα με την εφαρμογή, την υποστήριξη και τους όρους αδειοδότησης. Δοκιμάστε το πραγματικό αποτέλεσμα μετά την ενσωμάτωση, γιατί οι γραμμές και οι μικρές λεπτομέρειες μπορεί να αποδίδονται διαφορετικά από την προεπισκόπηση του σχεδιαστικού εργαλείου.
Προσβασιμότητα και εναλλακτικές περιγραφές
Όταν ένα σύμβολο εκτελεί ενέργεια, χρειάζεται κατανοητό προσβάσιμο όνομα. Ένα κουμπί που περιέχει μόνο μεγεθυντικό φακό πρέπει να μπορεί να αναγνωριστεί ως «Αναζήτηση» και χωρίς οπτική πρόσβαση. Αν το σύμβολο είναι καθαρά διακοσμητικό δίπλα σε ήδη επαρκές κείμενο, μπορεί να αντιμετωπίζεται διαφορετικά. Η απόφαση εξαρτάται από τη λειτουργία του και όχι από το αν το αρχείο είναι εικόνα ή γραφικό στοιχείο.
Ελέγξτε αντίθεση, καταστάσεις εστίασης και αλλαγές μετά από αλληλεπίδραση. Μια καρδιά που γίνεται γεμάτη για να δηλώσει αγαπημένο χρειάζεται επίσης κατανοητή ένδειξη της νέας κατάστασης. Αποφύγετε να σημαίνει το ίδιο σύμβολο δύο διαφορετικές ενέργειες στο ίδιο περιβάλλον. Το νόημα πρέπει να παραμένει σταθερό και να επιβεβαιώνεται όταν ο χρήστης εκτελεί μια ενέργεια ή αλλάζει επιλογή.
Σύστημα απόφασης: προσθήκη, αντικατάσταση ή αφαίρεση
Για κάθε νέο εικονίδιο ρωτήστε αν προσθέτει πληροφορία που δεν μεταφέρεται ήδη καθαρά με λέξεις. Έπειτα εξετάστε αν το κοινό μπορεί να το αναγνωρίσει, αν υπάρχει αντίστοιχο στο υπάρχον σύνολο και αν μπορεί να σχεδιαστεί με τους ίδιους κανόνες. Αν τα περισσότερα κριτήρια αποτυγχάνουν, η καλύτερη λύση ίσως είναι απλή κειμενική εντολή. Δεν χρειάζεται σύμβολο σε κάθε παράγραφο ή κουμπί.
Ένα χρήσιμο δελτίο έγκρισης μπορεί να περιλαμβάνει: όνομα λειτουργίας, επιθυμητό νόημα, πεδίο χρήσης, δοκιμασμένο μέγεθος, κειμενική ετικέτα και διαφορετικές καταστάσεις. Κάθε εικονίδιο πρέπει να έχει μοναδική θέση στη βιβλιοθήκη και υπεύθυνο συντήρησης. Για περισσότερες αρχές σχεδιασμού, υπάρχει και η σχετική σελίδα εικονιδίων. Το ζητούμενο δεν είναι μια ατελείωτη συλλογή, αλλά ένα περιορισμένο, ευδιάκριτο εργαλείο επικοινωνίας.
Τρία παραδείγματα όπου το νόημα αλλάζει
Ένα εικονίδιο καμπάνας μπορεί να υποδηλώνει ειδοποιήσεις, αλλά χωρίς κείμενο δεν εξηγεί αναγκαστικά αν ανοίγει λίστα, ενεργοποιεί υπενθύμιση ή αλλάζει ρυθμίσεις. Ένα μολύβι μπορεί να σημαίνει επεξεργασία, δημιουργία ή σημείωση, ανάλογα με το περιβάλλον. Το σύμβολο με τρεις τελείες συνήθως παραπέμπει σε πρόσθετες επιλογές, όμως ο χρήστης χρειάζεται να βλέπει τι διαθέτει το αντίστοιχο μενού. Αυτές οι περιπτώσεις δείχνουν ότι τα εικονίδια αποκτούν νόημα μέσα από τη λειτουργία τους.
Για ενέργειες με σοβαρή συνέπεια, όπως οριστική διαγραφή, μην στηρίζεστε μόνο σε έναν κάδο απορριμμάτων. Προσθέστε σαφή διατύπωση και, όταν χρειάζεται, επιβεβαίωση που εξηγεί ποιο αντικείμενο επηρεάζεται. Σε μια φόρμα, το σύμβολο επιτυχίας πρέπει να συνοδεύεται από κατανοητή επιβεβαίωση. Το ζητούμενο είναι να μειώνεται ο κίνδυνος εσφαλμένης ερμηνείας, όχι να αποφεύγονται όλες οι λέξεις.
Πώς δοκιμάζεται μια συλλογή πριν υιοθετηθεί
Επιλέξτε ένα δείγμα από τις συχνότερες λειτουργίες και τοποθετήστε τα σύμβολα δίπλα στα πραγματικά κείμενα της εφαρμογής. Ελέγξτε αν έχουν ίδια οπτική βαρύτητα, αν ξεχωρίζουν σε μικρό μέγεθος και αν παραμένουν κατανοητά σε διαφορετική γλώσσα. Κατόπιν δοκιμάστε περιπτώσεις ενεργής επιλογής, απενεργοποίησης και ειδοποίησης. Η ομοιομορφία δεν πρέπει να επιβάλλεται με τρόπο που σβήνει σημαντικές διαφορές νοήματος.
Αν υπάρχουν πολλές προτάσεις, επιλέξτε με τεκμηριωμένο πίνακα κριτηρίων: σαφήνεια, ευκολία αναγνώρισης, συνέπεια ύφους, ευκολία εφαρμογής και δυνατότητα προσβάσιμης περιγραφής. Όταν οι συμμετέχοντες διαφωνούν, προτιμήστε μικρή δοκιμή με ανθρώπους του πραγματικού κοινού αντί για αισθητική ψηφοφορία μεταξύ σχεδιαστών. Η αναγνώριση λειτουργίας αποτελεί τον ουσιαστικό στόχο.
Συχνές ερωτήσεις
Είναι καλύτερα τα έγχρωμα ή τα μονόχρωμα εικονίδια;
Εξαρτάται από το περιεχόμενο και τη λειτουργία. Ένα μονόχρωμο σύστημα συχνά διευκολύνει τη συνέπεια και τις αλλαγές κατάστασης. Πολλά χρώματα μπορεί να είναι χρήσιμα για κατηγορίες, αρκεί να μην αποτελούν τον μοναδικό τρόπο διάκρισης. Αξιολογήστε τα σε πραγματική διάταξη.
Γιατί κάποια εικονίδια μπερδεύουν;
Επειδή είναι αφηρημένα, χρησιμοποιούνται για διαφορετικές λειτουργίες ή δεν διαθέτουν αρκετά συμφραζόμενα. Ακόμη και ένα καθιερωμένο σχήμα μπορεί να αποκτήσει διαφορετική ερμηνεία σε άλλη εφαρμογή. Η λύση είναι η δοκιμή με χρήστες και η προσθήκη κειμένου όπου υπάρχει αβεβαιότητα.
Τι χρειάζεται για ένα σωστό εικονίδιο κουμπιού;
Σαφές νόημα, επαρκής αντίθεση, ευδιάκριτη περιοχή αλληλεπίδρασης και κατάλληλο προσβάσιμο όνομα. Ελέγξτε επίσης την κατάσταση όταν το κουμπί είναι επιλεγμένο, απενεργοποιημένο ή έχει εστίαση. Αυτά αποτελούν μέρος της λειτουργίας, όχι λεπτομέρειες εμφάνισης.
Πρέπει όλα τα εικονίδια να είναι πρωτότυπα;
Όχι υποχρεωτικά. Μια συνεπής βιβλιοθήκη με κατάλληλη άδεια και αναγνωρίσιμα σύμβολα μπορεί να εξυπηρετεί καλύτερα. Η πρωτοτυπία αποκτά αξία όταν χρειάζεται ιδιαίτερο νόημα που δεν αποδίδεται από υπάρχουσες μορφές. Προέχει η κατανόηση και η νόμιμη χρήση.
Πώς συντηρώ μια βιβλιοθήκη συμβόλων;
Αποθηκεύστε κανόνες, ονομασίες, παραλλαγές και παραδείγματα χρήσης σε κεντρικό σημείο. Αποφύγετε διπλά σύμβολα για την ίδια ενέργεια και σημειώστε πότε ένα παλιό σχέδιο αντικαθίσταται. Η συστηματική συντήρηση εμποδίζει σταδιακή οπτική ασυνέπεια.