Visual design: απαιτήσεις και αποφάσεις πριν από τον οπτικό σχεδιασμό

Το visual design είναι η οπτική οργάνωση ενός ψηφιακού προϊόντος μέσω τυπογραφίας, χρώματος, σύνθεσης, εικόνων, αποστάσεων και ρυθμού. Δεν αποτελεί απλή «διακόσμηση» μετά την κατασκευή. Μεταφέρει τη σημασία της πληροφορίας, διαμορφώνει την αναγνωσιμότητα και βοηθά τους ανθρώπους να ξεχωρίζουν το κύριο από το δευτερεύον. Πριν επιλεγούν χρώματα ή εικονίδια, χρειάζεται να καθοριστούν ο σκοπός της σελίδας, οι περιορισμοί της χρήσης και το υλικό που πραγματικά θα παρουσιαστεί.

Ορίζουμε τι πρέπει να επικοινωνήσει η εικόνα

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

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

Ποιες απαιτήσεις συγκεντρώνουμε από την αρχή

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

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

Τυπογραφία για ανάγνωση και όχι για εντύπωση

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

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

Χρώματα, αντίθεση και νόημα

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

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

Διάταξη, κενά και σταθερή ευθυγράμμιση

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

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

Φωτογραφίες, εικονίδια και τεκμηρίωση της προέλευσης

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

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

Εξαρτήσεις από UX, UI και τεχνική υλοποίηση

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

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

Προσαρμοστική σύνθεση σε υπολογιστή και κινητό

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

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

Τι παραδίδουμε για να θεωρείται ολοκληρωμένο το σχέδιο

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

Λίστα απαιτήσεων πριν από την έγκριση

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

Πώς αξιολογείται η ποιότητα χωρίς υποκειμενικές υπερβολές

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

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