Visual design: πώς επιλέγεις σωστή οπτική σχεδίαση για το ψηφιακό προϊόν σου
Το visual design είναι η οπτική σχεδίαση που οργανώνει χρώμα, τυπογραφία, εικόνες, αντίθεση και διάταξη ώστε ένα ψηφιακό προϊόν να είναι αναγνωρίσιμο και εύχρηστο. Δεν αφορά μόνο το αν μια οθόνη δείχνει όμορφη. Αφορά το τι προσέχει πρώτα ο άνθρωπος, ποια ενέργεια καταλαβαίνει ότι μπορεί να κάνει και αν τα στοιχεία συνεργάζονται χωρίς οπτικό θόρυβο. Η οπτική ιεραρχία καθορίζει τι αναγνωρίζεται πρώτο. Η σωστή επιλογή ξεκινά από το πρόβλημα της εμπειρίας και όχι από μια συλλογή εντυπωσιακών παραδειγμάτων.
Οπτική σχεδίαση, σχεδίαση διεπαφής και εμπειρία χρήστη
Η σχεδίαση διεπαφής, UI (User Interface), περιγράφει τα στοιχεία με τα οποία αλληλεπιδρά ο χρήστης, όπως πεδία, κουμπιά και μενού. Η εμπειρία χρήστη, UX (User Experience), εξετάζει ολόκληρη τη διαδρομή προς έναν στόχο: τι καταλαβαίνει ο άνθρωπος, πού δυσκολεύεται και αν φτάνει εκεί που χρειάζεται. Η οπτική σχεδίαση υποστηρίζει και τα δύο με ιεραρχία, σαφήνεια, αισθητική συνέπεια και ευανάγνωστη πληροφορία.
Μια άρτια χρωματικά φόρμα μπορεί να αποτυγχάνει επειδή ζητά άσκοπα στοιχεία. Ένα εξαιρετικά σχεδιασμένο μονοπάτι εργασίας μπορεί να προκαλεί σύγχυση αν τα κύρια κουμπιά μοιάζουν με απλό κείμενο. Γι’ αυτό δεν αγοράζουμε «μόνο εμφάνιση» όταν το πρόβλημα είναι λειτουργικό, ούτε επανασχεδιάζουμε τη ροή από την αρχή όταν λείπει απλώς οπτική συνέπεια.
Δέντρο επιλογής σχεδιαστικής παρέμβασης
- Η δυσκολία είναι να αναγνωρίσει κανείς το ίδιο εμπορικό σήμα σε διαφορετικά μέσα; Ξεκίνα από την οπτική ταυτότητα.
- Η δυσκολία αφορά την εύρεση επόμενου βήματος ή τη συμπλήρωση στοιχείων; Έλεγξε πρώτα τη διαδρομή χρήστη.
- Η λειτουργία είναι σαφής, αλλά η ιεραρχία και οι αποχρώσεις αλλάζουν από οθόνη σε οθόνη; Επένδυσε στην οπτική ενοποίηση.
- Αν ισχύουν περισσότερες αιτίες, δοκίμασε μία κρίσιμη εργασία πριν εγκρίνεις εκτεταμένη αλλαγή.
Πώς αποφασίζεις ποια εργασία χρειάζεται πραγματικά
Αν οι επισκέπτες βρίσκουν σωστά τις πληροφορίες αλλά οι σελίδες μοιάζουν ασύνδετες μεταξύ τους, προτεραιότητα έχει η οπτική ενοποίηση. Αν εγκαταλείπουν μια διαδικασία επειδή δεν βρίσκουν το επόμενο βήμα, προηγείται ο έλεγχος της διαδρομής. Αν αναζητάς δημιουργική ταυτότητα για νέο προϊόν, ξεκινάς από το κοινό, τη γλώσσα της μάρκας και το βασικό μήνυμα. Η απάντηση μπορεί να περιλαμβάνει περισσότερα από ένα είδη σχεδιαστικής εργασίας, όμως η σειρά τους έχει σημασία.
| Παρατηρούμενο πρόβλημα | Πιθανή πρώτη κίνηση | Σημείο ελέγχου |
|---|---|---|
| Ασυνεπής εικόνα οθονών | Οπτικοί κανόνες και κοινή παλέτα | Επαναληψιμότητα χωρίς πρόχειρες εξαιρέσεις |
| Δυσκολία ολοκλήρωσης φόρμας | Έρευνα και ανασχεδιασμός διαδρομής | Μπορεί ο άνθρωπος να φτάσει στο τέλος; |
| Κακή αναγνωσιμότητα | Ιεραρχία κειμένου και έλεγχος αντίθεσης | Διαβάζεται σε διαφορετικές οθόνες; |
| Νέο προϊόν χωρίς χαρακτήρα | Ορισμός κατεύθυνσης ταυτότητας | Συνδέεται με την υπόσχεση και το κοινό; |
Τι πρέπει να περιλαμβάνει μια καλή σχεδιαστική πρόταση
Η πρόταση οφείλει να δείχνει πραγματικές καταστάσεις χρήσης, όχι μόνο μια αρχική οθόνη με εντυπωσιακή φωτογραφία. Χρειαζόμαστε παραδείγματα για λίστες, φόρμες, ειδοποιήσεις, κενά αποτελέσματα, σφάλματα και μικρές οθόνες. Ελέγχουμε αν υπάρχει προτεινόμενη τυπογραφική κλίμακα, σαφής αντίθεση κύριων και δευτερευόντων ενεργειών, καθώς και τρόπος διατήρησης συνέπειας όταν προστίθεται νέο περιεχόμενο.
Χρειάζεται ακόμη να διευκρινίζεται ποια στοιχεία είναι τελικά και ποια ενδεικτικά, πώς θα παραδοθούν τα γραφικά και αν οι τεχνικές αποφάσεις έχουν συζητηθεί με τους ανθρώπους που υλοποιούν τη σελίδα. Μια μακέτα χωρίς κατάσταση κατάδειξης πληκτρολογίου, μηνύματα σφάλματος ή απαιτήσεις εικόνων αφήνει κρίσιμα προβλήματα για αργότερα.
Αντίθεση και προσβασιμότητα ως μέρος της ποιότητας
Η αισθητική δεν αρκεί αν το κείμενο χάνεται πάνω στο φόντο. Οι οδηγίες WCAG (Οδηγίες Προσβασιμότητας Περιεχομένου Ιστού, Web Content Accessibility Guidelines) του W3C (Παγκόσμια Κοινοπραξία Ιστού, World Wide Web Consortium) ορίζουν, για το σχετικό κριτήριο επιπέδου AA, ελάχιστη αντίθεση 4,5 προς 1 για συνηθισμένο κείμενο και 3 προς 1 για μεγάλο κείμενο, με τις προβλεπόμενες εξαιρέσεις. Τα χρώματα χρειάζεται να δοκιμάζονται σε πραγματικούς συνδυασμούς.
Η πληροφορία δεν πρέπει να μεταφέρεται μόνο με χρώμα. Ένα κόκκινο περίγραμμα χωρίς επεξηγηματικό μήνυμα μπορεί να μην αρκεί για να καταλάβει κάποιος τι πρέπει να διορθώσει. Η επιλογή εικονιδίων, η σήμανση πεδίων και η ορατή εστίαση με πληκτρολόγιο σχεδιάζονται μαζί με την υπόλοιπη εικόνα.
Παράδειγμα: ένας πίνακας ελέγχου που δεν πρέπει να κουράζει
Σε έναν πίνακα παρακολούθησης αιτημάτων, η πληροφορία έχει πολλές ανταγωνιστικές πηγές: κατάσταση, προθεσμία, υπεύθυνο και ειδοποιήσεις. Η οπτική σχεδίαση μπορεί να αναδείξει τις επείγουσες περιπτώσεις με ελεγχόμενο χρώμα, θέση και σαφή ετικέτα. Τα υπόλοιπα στοιχεία χρειάζονται ήρεμο ρυθμό και σταθερή ευθυγράμμιση. Αν όλα είναι έντονα, τίποτα δεν ξεχωρίζει.
Η πρώτη δοκιμή μπορεί να γίνει χωρίς ανάπτυξη λογισμικού: δίνουμε σε ανθρώπους ένα συγκεκριμένο σενάριο, τους ζητάμε να εντοπίσουν το επόμενο σημαντικό αίτημα και παρατηρούμε τα σημεία δισταγμού. Μετά διορθώνουμε τη δομή και επανεξετάζουμε τη σειρά προσοχής. Δεν θεωρούμε επιτυχία μια μακέτα μόνο επειδή άρεσε σε μια εσωτερική παρουσίαση.
Πότε βοηθά ένα σύστημα σχεδίασης
Όταν πολλές ομάδες δημιουργούν σελίδες, η συνέπεια δεν διατηρείται με οδηγίες προφορικά. Ένα σύνολο κανόνων σχεδίασης διεπαφής μπορεί να συγκεντρώνει επαναχρησιμοποιούμενα στοιχεία, χρωματικούς κανόνες και τεκμηριωμένη συμπεριφορά. Για ένα μικρό ενημερωτικό έργο ίσως αρκεί ένας περιεκτικός οδηγός εμφάνισης. Για προϊόν με συνεχείς προσθήκες και σύνθετες διεπαφές, χρειάζεται συστηματικότερη οργάνωση.
Η επιλογή δεν καθορίζεται από το πόσες σελίδες διαθέτει η εταιρεία αλλά από το πόσο συχνά αλλάζει το προϊόν και πόσος συντονισμός απαιτείται. Οι μικρές ομάδες μπορούν να ξεκινήσουν με βασικά στοιχεία, αρκεί να τα ονομάζουν και να τα χρησιμοποιούν σταθερά. Η συντήρηση είναι μέρος της επένδυσης.
Κίνδυνοι στην προσφορά: τι να ζητήσεις πριν συμφωνήσεις
- Παραδείγματα σε πραγματικές καταστάσεις, όχι μόνο διακοσμητικές μακέτες.
- Σαφή ορισμό παραδοτέων και αρχείων που θα μπορείς να επεξεργαστείς.
- Δοκιμή σε μικρή οθόνη και με χρήση πληκτρολογίου.
- Περιγραφή του τρόπου αναθεώρησης από σχόλια πραγματικών χρηστών.
- Κανόνες επαναχρησιμοποίησης χρωμάτων, γραμματοσειρών και στοιχείων.
Προσοχή σε προτάσεις που υπόσχονται αύξηση πωλήσεων αποκλειστικά χάρη στη νέα εμφάνιση, χωρίς να έχουν ορίσει πώς θα μετρηθεί αυτή η αλλαγή. Επίσης, μια συλλογή έτοιμων εικόνων δεν αποτελεί ολοκληρωμένο σύστημα λειτουργικής σχεδίασης.
Συχνές ερωτήσεις για την επιλογή ειδικού
Αρκεί να είναι καλός στη γραφιστική;
Η γραφιστική ευαισθησία βοηθά, αλλά στα διαδραστικά προϊόντα απαιτείται κατανόηση περιεχομένου, συμπεριφοράς στοιχείων και προσβασιμότητας. Ζήτησε δείγματα που εξηγούν τις αποφάσεις.
Χρειάζεται πρώτα έρευνα χρήστη;
Για νέα ή προβληματική διαδρομή είναι πολύτιμη. Αν διορθώνονται μικρές ασυνέπειες σε ήδη καλά κατανοημένο προϊόν, μπορεί να προηγηθεί στοχευμένος έλεγχος.
Πώς ξεχωρίζω εμφάνιση από αναγνωρισιμότητα μάρκας;
Η οπτική σχεδίαση αφορά την παρουσίαση συγκεκριμένου περιβάλλοντος. Η εμπειρία χρήστη και η ευρύτερη οπτική ταυτότητα επηρεάζουν αντίστοιχα τη λειτουργία και τη διαχρονική αναγνώριση.
Πότε είναι έτοιμο το αποτέλεσμα;
Όταν έχει δοκιμαστεί στα πραγματικά βασικά σενάρια, υπάρχουν κανόνες για επόμενες οθόνες και τα παραδοτέα επιτρέπουν υλοποίηση χωρίς αυθαίρετες ερμηνείες.
Η δοκιμή της οπτικής κατεύθυνσης πριν από την υλοποίηση
Για να επιλέξουμε ανάμεσα σε δύο δημιουργικές προτάσεις, μπορούμε να παρουσιάσουμε την ίδια πραγματική εργασία σε καθεμία: εντοπισμός υπηρεσίας, σύγκριση επιλογών και ολοκλήρωση φόρμας. Ζητάμε από τους συμμετέχοντες να περιγράψουν τι θεωρούν κύριο, τι τους μπερδεύει και ποιο βήμα περιμένουν στη συνέχεια. Παρατηρούμε αν τα χρώματα αλλάζουν τη σειρά προσοχής και αν οι τίτλοι εξηγούν επαρκώς την πληροφορία. Έτσι ο σχεδιασμός αξιολογείται με βάση συγκεκριμένη κατανόηση, όχι μόνο με ψηφοφορία αισθητικής προτίμησης.
Ελέγχουμε ακόμη πώς αλλάζει η διάταξη όταν αυξάνεται το μέγεθος κειμένου ή εμφανίζεται πολύ μεγαλύτερη ελληνική περιγραφή. Μια σύνθεση που αντέχει μόνο σε άψογα επιλεγμένα δείγματα δεν είναι έτοιμη για καθημερινή χρήση. Τα ευρήματα καταγράφονται μαζί με τις διορθώσεις, ώστε ο επόμενος σχεδιαστής να καταλαβαίνει το γιατί κάθε απόφασης.