Δομή πριν από τον σχεδιασμό: γιατί έχει σημασία

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

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

Στη γλώσσα του επαγγέλματος αυτό λέγεται αρχιτεκτονική πληροφορίας, δηλαδή ο τρόπος που οργανώνεται το περιεχόμενο ώστε να βρίσκεται εύκολα. Το Nielsen Norman Group την περιγράφει ως τη ραχοκοκαλιά της πληροφορίας ενός site, ξεχωριστή από τα μενού και τα κουμπιά που βρίσκονται πάνω της. Η ευρύτερη εικόνα υπάρχει στο τι κάνει μια εταιρική ιστοσελίδα αποτελεσματική. Τα case studies δείχνουν την ίδια σειρά σε έργα websites και πλατφορμών.

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

Οι συνήθειες ανάγνωσης το κάνουν ακόμη πιο σημαντικό. Στη μακροχρόνια έρευνα του Nielsen Norman Group για το πώς διαβάζουν οι άνθρωποι στο διαδίκτυο, το 79% των συμμετεχόντων σάρωνε πάντα μια νέα σελίδα. Μόνο το 16% διάβαζε λέξη προς λέξη. Οι αναγνώστες σαρώνουν για το σημείο που απαντά στο ερώτημά τους. Αυτό που σαρώνουν είναι οι ουσιαστικοί τίτλοι, οι σύντομες παράγραφοι, η καθαρή σειρά. Όλα αυτά είναι στοιχεία δομής.

Χρειάζεται επίσης προσοχή στον τρόπο που κρίνουμε τη δουλειά. Μια όμορφη σελίδα μοιάζει πιο εύχρηστη. Το Nielsen Norman Group το ονομάζει «φαινόμενο αισθητικής-ευχρηστίας» και σημειώνει ότι ο ελκυστικός σχεδιασμός δεν λύνει σοβαρά προβλήματα ευχρηστίας. Γι' αυτό ελέγχουμε τη δομή χωριστά, πριν την κρίνουν πραγματικοί επισκέπτες.

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

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

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

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

1. Ονομάζουμε τις αποφάσεις. Γράφουμε ποιοι επισκέπτονται το site και τι πρέπει να αποφασίσει ο καθένας: να ζητήσει προσφορά, να βάλει την εταιρεία σε λίστα επιλογών ή απλώς να καταλάβει την υπηρεσία.

2. Φτιάχνουμε τη λίστα σελίδων. Κρατάμε τις σελίδες που στηρίζουν αυτές τις αποφάσεις, ώστε κάθε σελίδα να έχει σαφή σκοπό.

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

4. Γράφουμε το πραγματικό κείμενο. Με τελική διατύπωση, ώστε η διάταξη να χτιστεί γύρω από ό,τι θα ειπωθεί πραγματικά.

5. Ελέγχουμε την κατανόηση σε απλή μορφή. Βλέπουμε απλά σχέδια σελίδων χωρίς χρώματα. Ρωτάμε αν κάποιος εκτός έργου μπορεί να εξηγήσει τι λέει η σελίδα.

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

Η ίδια σειρά υπάρχει στα στάδια της διαδικασίας μας. Γι' αυτό κάθε εταιρικό website που φτιάχνουμε ξεκινά με ερωτήσεις, πριν από τα πρώτα σχέδια.

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

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

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