Η ψυχολογία του web design / Μέρος Δ: Η τυπογραφία

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

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

…δε θα σου συνιστούσα ποτέ να το χρησιμοποιήσεις στο σχεδιασμό ενός website, εκτός εάν έχει να κάνει με κάποιο νέο horror video game ή –έστω– με μια μπάντα black metal.

Αλλά ας πάμε στο πιο διαχρονικό ερώτημα από όλα, όταν μιλάμε για τυπογραφία: serif ή sans-serif; Με άλλα λόγια, με πατούρα ή χωρίς πατούρα; Η και πιο απλά, Times New Roman ή Arial;

Λοιπόν, δεν υπάρχει απόλυτα σωστή απάντηση. Τα πάντα είναι σχετικά. Είναι γενικά αποδεκτή η αντίληψη, ότι οι serif γραμματοσειρές (π.χ. Times New Roman, Garamond, Georgia, Bookman Old Style) προσδίδουν στα κείμενα περισσότερο επαγγελματισμό, σοβαρότητα και «επιστημονικότητα». Από την άλλη, οι sans-serif γραμματοσειρές (όπως οι Arial, Helvetica, Open Sans, Futura) προσδίδουν μια πιο μοντέρνα αίσθηση, πιο «καθαρή» και όχι τόσο αυστηρά επίσημη.

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

Δες την αρχική σελίδα των New York Times:

Το όνειρο των serif-lovers – και ο δικός μου εφιάλτης. Οι New York Times θέλουν το website τους να εκπέμπει κύρος, σοβαρότητα και εξουσία. Θέλουν επίσης να σε κάνουν να νιώθεις πως αυτό που διαβάζεις είναι σημαντικό.

Αντίθετα, οι περισσότερες εταιρείες τεχνολογίας χρησιμοποιούν sans-serif γραμματοσειρές, γιατί θέλουν να νιώθει ο επισκέπτης ότι η εταιρεία είναι μοντέρνα και σύγχρονη. Λογικό, έτσι; Επιπλέον,  οι «καθαρότερες» γραμματοσειρές είναι πιο εύκολα αναγνώσιμες στο διαδίκτυο, κάτι που μειώνει τη σύγχυση και επιστρέπει στους αναγνώστες να καταλάβουν το περιεχόμενο ενός website ευκολότερα.

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

Το infographic που ακολουθεί ίσως να σε βοηθήσει να καταλάβεις πώς συμβάλλει ο κάθε τύπος γραμματοσειράς στη διαμόρφωση της ψυχολογίας του επισκέπτη. Εδώ θα δεις ότι υπάρχουν και άλλες επιλογές: οι slab serif (serif, αλλά με πιο παχιά γραμμή), οι script (καλλιγραφικές) και οι modern – όλες όμως εντάσσονται ουσιαστικά στις 2 βασικές κατηγορίες.

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

  1. Να αντικατοπτρίζουν τη γενικότερη φιλοσοφία που συνδέεται με το στόχο του website (άλλο στιλ έχει ένα αυστηρά επιχειρηματικό website και άλλο αυτό που προωθεί, π.χ., υπηρεσία κλόουν για παιδικά πάρτι. Έτσι, τόσο η serif όσο και η sans serif γραμματοσειρά θα πρέπει να είναι εξίσου «σοβαρές», «χαλαρές», «διασκεδαστικές» κ.λπ.).
  2. Να υπάρχει μια οπτική ιεραρχία. Οι συνδυασμοί πρέπει να είναι τέτοιοι, που να ξεχωρίζουν οι βασικοί τίτλοι από τους δευτερεύοντες και από το βασικό κείμενο των παραγράφων.
  3. Να μην υπάρχει μεγάλη διαφορά στα ύψη των γραμμάτων και στη μεταξύ τους απόσταση. Όταν μοιάζουν αρκετά σε κάποια στοιχεία (όχι σε όλα) δύο γραμματοσειρές διαφορετικού τύπου, είναι πιθανότερο να ταιριάξουν οπτικά μεταξύ τους.
  4. Αν μοιάζουν υπερβολικά μεταξύ τους, τότε είναι πολύ πιθανό ότι ο συνδυασμός τους θα προκαλεί σύγχυση στο μάτι.

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

Τέλος, δεν πρέπει να ξεχνάς το πιο σημαντικό: ότι ένα website είναι πετυχημένο όταν ο επισκέπτης δεν δίνει σημασία στη γραμματοσειρά, αλλά στο μήνυμα.

Resources:

Advertisements

Σχολιάστε

Εισάγετε τα παρακάτω στοιχεία ή επιλέξτε ένα εικονίδιο για να συνδεθείτε:

Λογότυπο WordPress.com

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό WordPress.com. Αποσύνδεση / Αλλαγή )

Φωτογραφία Twitter

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Twitter. Αποσύνδεση / Αλλαγή )

Φωτογραφία Facebook

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Facebook. Αποσύνδεση / Αλλαγή )

Φωτογραφία Google+

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Google+. Αποσύνδεση / Αλλαγή )

Σύνδεση με %s