εικονίδια

Εικονίδια σε εφαρμογές και ιστοσελίδες: σχεδίαση με σαφές νόημα

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

Πότε χρησιμοποιούμε ένα σύμβολο και πότε κείμενο

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

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

Η διαφορά μεταξύ λειτουργικών και διακοσμητικών εικονιδίων

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

Ο οργανισμός W3C (Παγκόσμια Κοινοπραξία Ιστού, World Wide Web Consortium), μέσω της WAI (Πρωτοβουλία Προσβασιμότητας Ιστού, Web Accessibility Initiative), προτείνει τα λειτουργικά γραφικά να περιγράφουν τον σκοπό τους και τα καθαρά διακοσμητικά να αγνοούνται από τις εναλλακτικές περιγραφές. Στον πραγματικό σχεδιασμό ελέγχουμε το νόημα του κουμπιού συνολικά, όχι μόνο την εμφάνιση του εικονιδίου μέσα του.

Οπτική συνοχή σε μια οικογένεια συμβόλων

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

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

Μέγεθος, αντίθεση και επιφάνεια αλληλεπίδρασης

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

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

Μορφότυποι αρχείων και καθαρή παράδοση

Τα διανυσματικά αρχεία είναι πρακτικά για πολλά σύμβολα επειδή μπορούν να προσαρμόζονται σε διαφορετικές διαστάσεις χωρίς να σχεδιάζεται εξ αρχής κάθε μέγεθος. Η μορφή SVG (Κλιμακούμενα Διανυσματικά Γραφικά, Scalable Vector Graphics) χρησιμοποιείται συχνά για τέτοιες ανάγκες, αλλά απαιτεί σωστή ενσωμάτωση και ελεγμένη προσβασιμότητα. Για άλλες περιπτώσεις μπορεί να χρησιμοποιηθεί κατάλληλη εικόνα σταθερών διαστάσεων, αν το περιβάλλον το επιβάλλει.

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

Πίνακας απόφασης για συνηθισμένες περιπτώσεις

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

Δοκιμή με πραγματικές εργασίες χρήστη

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

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

Τι αποφεύγουμε στον σχεδιασμό

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

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

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

Μπορεί ένα εικονίδιο να αντικαταστήσει πάντα τη λέξη;

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

Τα εικονίδια πρέπει να έχουν πάντα εναλλακτικό κείμενο;

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

Πώς διαλέγω ανάμεσα σε συμπαγές και γραμμικό ύφος;

Εξετάστε τη σαφήνεια σε πραγματικές διαστάσεις και τη συνέπεια με το υπόλοιπο περιβάλλον. Κανένα ύφος δεν εγγυάται από μόνο του καλύτερη χρηστικότητα.

Γιατί χρειάζεται έλεγχος με πληκτρολόγιο;

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

Τι περιλαμβάνει ένα λειτουργικό σύνολο συμβόλων;

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

Πρακτικό συμπέρασμα

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