Η ψυχολογία του web design / Μέρος Γ: Ο χώρος

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

Σε αυτό το τρίτο μέρος, θα μιλήσουμε για τη σημασία του χώρου.

Γ. Ο χώρος

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

Πού βρίσκονται αυτοί οι κενοί χώροι; Σίγουρα γύρω από τα διάφορα στοιχεία μιας σελίδας: γύρω από το μενού, γύρω από το βασικό κείμενο του άρθρου, γύρω από τις εικόνες. Φαντάσου να έμπαινες σε ένα site και να ήταν «τίγκα» από κείμενα, εικόνες και links. Εντάξει, κάποιες φορές το χάος φαντάζει γοητευτικό – αλλά σίγουρα όχι εδώ.

Το κείμενο μπορεί να "αναπνεύσει". Επάνω, αριστερά, δεξιά, ανάμεσα στις παραγράφους, ο κενός χώρος καθιστά την ανάγνωση άνετη και ξεκούραστη | http://emperor.works/case-study/small-luxury-hotels/

Παράδειγμα #1. Το κείμενο μπορεί να «αναπνεύσει». Επάνω, αριστερά, δεξιά, ανάμεσα στις παραγράφους, ο κενός χώρος καθιστά την ανάγνωση άνετη και ξεκούραστη | http://emperor.works/case-study/small-luxury-hotels/

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

Πέρα από την καλύτερη ψυχολογία που διαμορφώνει, ο κενός χώρος γύρω από το περιεχόμενο έχει τεράστια πρακτική σπουδαιότητα, καθώς αποτρέπει την προσοχή του επισκέπτη από το να αποσπαστεί. Φαντάσου ότι, μετά από αναζήτηση στο Google, έχεις επιτέλους βρει ένα κείμενο που απαντάει στο ερώτημά σου. Θέλεις να διαθέσεις 1-2 λεπτά για να το διαβάσεις, συγκεντρωμένος. Όλα γίνονται πιο εύκολα όταν γύρω από το κείμενο υπάρχει λίγος άδειος χώρος (padding), αντί για πλαίσια, αχρείαστες εικόνες, σύνδεσμοι και άλλα αντικείμενα. Μάλιστα, σύμφωνα με τα αποτελέσματα μιας έρευνας που διεξήχθη το 2004, η χρήση κενού χώρου ανάμεσα στις παραγράφους, καθώς και δεξιά & αριστερά του κειμένου, αύξησε τη δυνατότητα κατανόησής του κατά 20%.

Παράδειγμα #2 | http://thehideout.co.uk/about/

Παράδειγμα #2 | http://thehideout.co.uk/about/

Ακόμα και αν η βελτίωση που προσφέρει σε πρακτικό επίπεδο ο κενός χώρος δεν μπορεί να μετρηθεί, σίγουρα επηρεάζει την ικανοποίηση και την εμπειρία του επισκέπτη. Επιπλέον, όταν χρησιμοποιείται σωστά ώστε να κρατάει τα πράγματα σε μια σελίδα τακτοποιημένα, ισορροπημένα και χωρισμένα ανάλογα με τη συνάφειά τους, δημιουργεί θετική εντύπωση για το brand πίσω από το website. Σίγουρα, δεν θα σχημάτιζες την καλύτερη εικόνα για μια εταιρεία που το website της είναι σαν «προβάδικο» εφηβικής ροκ μπάντας, με μπουκάλια μπίρας επάνω στους ενισχυτές, καλώδια στο πάτωμα, πεταμένα τζάκετ και αντικείμενα παντού (αυτή, για μένα, είναι μια περίπτωση που το χάος όντως φαντάζει γοητευτικό… rock on).

Συνοψίζοντας, ο κενός χώρος θα πρέπει να χρησιμοποιείται ως ένα απαραίτητο εργαλείο, που κρατάει τα πάντα σε μια τάξη, άνετα και ευκολοδιάβαστα – και μια συμβουλή που καλό είναι να έχουμε πάντοτε στο μυαλό μας σήμερα, που περισσότερο από ποτέ μπαίνουμε στα websites από κινητά και tabletsKeep it simple. Ο μέσος χρήστης δεν θέλει και δεν σκοπεύει να σπαταλήσει πολύ χρόνο στο site σου, επομένως κράτησέ τα όλα οργανωμένα και απλά, ώστε να βρει εύκολα αυτό που τον ενδιαφέρει!

Resources:

 

Advertisements

One thought on “Η ψυχολογία του web design / Μέρος Γ: Ο χώρος

  1. Παράθεμα: Η ψυχολογία του web design – Μέρος Δ: Η τυπογραφία | web stories

Σχολιάστε

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

Λογότυπο WordPress.com

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

Φωτογραφία Twitter

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

Φωτογραφία Facebook

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

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

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

Σύνδεση με %s