Η αρχή της εγγύτητας στο σχεδιασμό ιστοσελίδων
Πρόσφατα πήρα ένα παλιό βιβλίο σχεδίου που δεν είχα αγγίξει για λίγο, και μου θύμισε μια αρχή σχεδίασης που πολλοί από εμάς εφαρμόσαμε πιθανότατα μόνο υποσυνείδητα, αν όχι καθόλου.
Το βιβλίο ασχολείται με το σχεδιασμό για εκτύπωση, αλλά σκέφτηκα ότι θα έκανε ένα σπουδαίο θέμα για συζήτηση στο πλαίσιο του σχεδιασμού ιστοσελίδων.
Η αρχή της εγγύτητας απαιτεί να ομαδοποιούνται οπτικά ομαδοποιημένα αντικείμενα, δημιουργώντας λιγότερη ακαταστασία και καθιστώντας μια πιο οργανωμένη διάταξη. Τα αντικείμενα που δεν σχετίζονται μεταξύ τους πρέπει να τοποθετηθούν περισσότερο, για να τονισθεί η έλλειψη σχέσης.
Θα συζητήσω λεπτομέρειες και ορισμένους τρόπους με τους οποίους αυτό μπορεί να εφαρμοστεί αποτελεσματικά, αλλά αυτός ο ορισμός θα πρέπει να αρκεί για αυτό που θα συζητήσουμε σε αυτό το άρθρο.
Η σωστή χρήση της εγγύτητας, σε συνδυασμό με άλλες αρχές σχεδιασμού, έχει μεγάλη επίδραση στην εμπειρία του χρήστη και, τελικά, στη γενική επιτυχία ενός ιστοτόπου.
Μην φοβάστε το λευκό διάστημα
Το πρώτο βήμα για την ορθή εφαρμογή της αρχής της εγγύτητας είναι η κατανόηση της σημασίας του λευκού χώρου στο σχεδιασμό.
Η έλλειψη χώρου είναι ένα κοινό πρόβλημα στα ερασιτεχνικά σχέδια. Ο σχεδιασμός είναι ένας τρόπος επικοινωνίας των πληροφοριών και όταν οι ερασιτέχνες προσπαθούν να μεταφέρουν ένα μήνυμα μέσω του σχεδιασμού, η φυσική κλίση τους είναι να κατανείμουν το περιεχόμενο ομοιόμορφα για να γεμίσουν το χώρο χωρίς να σκεφτούν πολύ τις δυνατότητες του καλά οργανωμένου λευκού χώρου.
Ο λευκός χώρος μπορεί να επηρεάσει τη συμπεριφορά του χρήστη σε πολύ, αν όχι περισσότερο, από το πραγματικό περιεχόμενο στη σελίδα. Ο λευκός χώρος καθοδηγεί τα μάτια του χρήστη στην επιθυμητή κατεύθυνση, δημιουργεί αντίθεση και δημιουργεί μόνιμη εντύπωση.
Παρόλο που ο ιστότοπος της W3Avenue παραπάνω περιέχει ένα σημαντικό περιεχόμενο (με άρθρα σε πολλές κατηγορίες, όπως οποιοδήποτε blog σχεδίου) και μια σειρά διαφημίσεων στην πλαϊνή μπάρα, δεν συντρίβει τον χρήστη οπτικά.
Το γενναιόδωρο δωμάτιο στην κεφαλίδα και τα κατάλληλα τοποθετημένα αντικείμενα στις περιοχές του περιεχομένου και της πλευρικής γραμμής συμβάλλουν σε αυτή την καθαρή και οργανωμένη εμφάνιση. Η W3Avenue δεν κάνει τίποτα ιδιαίτερα μοναδικό με το περιεχόμενό της, αλλά ο σχεδιασμός της πιθανώς συμβάλλει στην ισχυρή επισκεψιμότητα παίρνει σε ένα σύντομη περίοδος χρόνου .
Έτσι μην είστε ανασφαλείς για τον κενό χώρο στο σχεδιασμό σας. Η σωστή χρήση του λευκού χώρου αποτελεί το πρώτο βήμα στην εφαρμογή της αρχής της εγγύτητας και, κατά συνέπεια, καθιστώντας το σχέδιο πιο οπτικό ελκυστικό.
Οπτικά Στοιχεία Σχετικά με την Ομάδα
Ο λευκός χώρος, ωστόσο, είναι μόνο ένα μέρος της εφαρμογής εγγύτητας. Ένα σχέδιο μπορεί να έχει πολύ λευκό κενό, αλλά αν τα στοιχεία δεν είναι ομαδοποιημένα σωστά , ο λευκός χώρος θα έχει μικρή επίδραση, όπως φαίνεται από τις δύο επαγγελματικές κάρτες παρακάτω:
Η κάρτα στα αριστερά δεν είναι γεμάτη. έχει κάποιο κενό. Αλλά τα στοιχεία δεν είναι λογικά ομαδοποιημένα, επομένως το αποτέλεσμα είναι αδύναμο.
Ο αναγνώστης αναγκάζεται να σαρώσει την κάρτα πολλές φορές. Η κάρτα στα δεξιά, ωστόσο, έχει ένα πιο ευχάριστο οπτικό αποτέλεσμα. Ο αναγνώστης πρέπει απλώς να το δει να λάβει τα στοιχεία (περισσότερα για αυτό αργότερα).
Η ομαδοποίηση στοιχείων στην κάρτα στα δεξιά είναι επίσης πιο λογική . Στην πρώτη ομάδα στοιχείων βλέπουμε το όνομα της εταιρείας σε μεγάλη γραμματοσειρά με την τοποθεσία κάτω από αυτήν. Το δεύτερο σετ μάς λέει πώς μπορούμε να πάρουμε πληροφορίες για τις παρεχόμενες υπηρεσίες (π.χ. τηλεφωνικός αριθμός και διεύθυνση ιστοτόπου).
Αυτό το παράδειγμα απεικονίζει τη σημασία της εγγύτητας στον σχεδιασμό της εκτύπωσης και μια παρόμοια ιδέα μπορεί να χρησιμοποιηθεί για στοιχεία στον σχεδιασμό ιστοσελίδων, όπως φαίνεται στην παρακάτω εικόνα.
Παρόλο που ο ιστότοπος της Arora Designs δεν είναι περίπλοκος ή βαριά για πληροφορίες, η χρήση του λευκού χώρου και ο οπτικός διαχωρισμός των ομαδοποιημένων στοιχείων είναι αποτελεσματικά. Θα πρέπει να σημειωθεί εδώ ότι ο "λευκός χώρος" δεν χρειάζεται να είναι λευκός. μπορεί να είναι οποιοσδήποτε κενός χώρος μεταξύ των στοιχείων, ανεξάρτητα από το χρώμα.
Στην περίπτωση του Arora Designs, αν και ο λευκός χώρος έχει χρώμα, εξυπηρετεί τον ίδιο σκοπό του διαχωρισμού οπτικά των περιοχών κεφαλίδας, πλοήγησης και περιεχομένου.
Δημιουργία οπτικής ιεραρχίας
Χρησιμοποιώντας αποτελεσματικά τον λευκό χώρο και ομαδοποιώντας τα σχετικά στοιχεία είναι ζωτικής σημασίας για να δώσετε στον ιστότοπό σας μια σαφή οπτική ιεραρχία. Φυσικά, η αρχιτεκτονική και η ροή πληροφοριών του ιστοτόπου αποτελούν το θεμέλιο της αποτελεσματικής εγγύτητας .
Η ιεραρχία μεταφέρεται από τον τρόπο με τον οποίο τα στοιχεία ομαδοποιούνται και υποομάζονται.
Αυτή η ιεραρχία βοηθά τον χρήστη να καταλάβει πού βρίσκονται και πού θέλει να πάει και έτσι βοηθά να γνωστοποιήσει τον σκοπό της ιστοσελίδας. Μια λίστα είναι ένα καλό παράδειγμα ενός στοιχείου που έχει τη δυνατότητα να επικοινωνήσει με την οπτική ιεραρχία, όπως φαίνεται στην παρακάτω εικόνα:
Ακριβώς κοιτάζοντας τις δύο παραπάνω λίστες, χωρίς καν να εξετάσετε το περιεχόμενο, θα δείτε ότι η λίστα στα αριστερά έχει μια σαφή οπτική ιεραρχία που δείχνει τις σχέσεις μεταξύ αντικειμένων (τα στοιχεία με υποδιαιρέσεις είναι υποκατηγορίες των κύριων αντικειμένων).
Αυτή η ιεραρχία δεν θα ήταν δυνατή χωρίς λευκό χώρο (συμπεριλαμβανομένων των macro και micro λευκό διάστημα). Ο κατάλογος στα δεξιά είναι απλά μια τυχαία ομαδοποίηση στοιχείων χωρίς φαινομενική σχέση ή ιεραρχία.
Η εφαρμογή αυτής της αρχής σε έναν ιστότοπο με κάτι τόσο απλό όσο μια λίστα HTML είναι εύκολη. Η πρόκληση είναι να χρησιμοποιήσουμε αυτήν την αρχή ως παράγοντα καθοδήγησης στην κατασκευή του δικτυακού τόπου, από το στάδιο του σχεδιασμού και της κατασκευής των καλωδίων μέχρι το σχεδιασμό.
Διάταξη που είναι εύκολη στη σάρωση και την ανάγνωση
Το περιεχόμενο που είναι οργανωμένο σε μια ιεραρχία και λογικά ομαδοποιημένο είναι ευκολότερο να διαβαστεί και να σαρωθεί .
Οι επικεφαλίδες, για παράδειγμα, θα πρέπει να επιτρέπουν στο χρήστη να σαρώσει σαφώς αναφέροντας τα κύρια σημεία. Περιττό να πούμε ότι το περιεχόμενο πρέπει να προγραμματιστεί από το get-go για να αντικατοπτρίζει την κατάλληλη οπτική ιεραρχία. η παραπάνω λίστα με τα περιθωριακά στοιχεία είναι ένα κακό παράδειγμα, επειδή το περιεχόμενο δεν ταιριάζει με την οπτική ιεραρχία.
Ένας ιστότοπος που χρησιμοποιεί την εγγύτητα στην αρχιτεκτονική και το σχεδιασμό του δεν κατακλύζει τον χρήστη με πληροφορίες.
Έτσι, παρόλο που είναι σχετικά εύκολο να εφαρμοστούν οι αρχές της εγγύτητας σε ιστοσελίδες που είναι ελαφρύ για το περιεχόμενο, η εγγύτητα είναι πολύ πιο σημαντική σε ιστοσελίδες πλούσιες σε περιεχόμενο.
Οι ιστοσελίδες ειδήσεων είναι καλά περιπτωσιολογικές μελέτες αυτής της αρχής. Παρακάτω είναι μια σύγκριση του Los Angeles Times και το Σφαίρα και ταχυδρομείο .
Συνολικά, η ιστοσελίδα LA Times έχει ένα ευχάριστο σχέδιο κυρίως λόγω της επιλογής χρωμάτων και της τυπογραφίας. Αλλά έχει επίσης μια καθαρή και ξεκάθαρη εμφάνιση, ειδικά στο τμήμα της κεφαλίδας.
Το λογότυπο είναι μεγάλο και ξεχωρίζει, συμβάλλοντας αποτελεσματικά στην επωνυμία του ιστοτόπου. Το αντικείμενο που βρίσκεται πιο κοντά στο λογότυπο είναι η οριζόντια γραμμή πλοήγησης παρακάτω. Επειδή η γραμμή πλοήγησης είναι σκοτεινή, έρχεται σε αντίθεση με το λογότυπο.
Οι σύνδεσμοι κειμένου πάνω από το λογότυπο είναι τακτοποιημένοι, με άφθονο χώρο μεταξύ των δύο τμημάτων. Η αριστερή ευθυγράμμιση του περιεχομένου στην κεφαλίδα συμβάλλει επίσης στην καθαρή εμφάνιση.
Κάθε κομμάτι των πληροφοριών στην κεφαλίδα LA Times ομαδοποιείται με συναφή αντικείμενα, εκτός από το λογότυπο, το οποίο βρίσκεται μόνο του. Τίποτα στην κεφαλίδα δεν σας συγχέει ή σας κάνει να αναρωτιέστε πού ανήκει.
Τι γίνεται με την ιστοσελίδα Globe and Mail, που φαίνεται παρακάτω;
Ο ιστότοπος Globe and Mail έχει μια σύνθετη ενότητα κεφαλίδας που δεν εφαρμόζει την αρχή της εγγύτητας.
Η μόνη σημαντική ποσότητα λευκού χώρου βρίσκεται στο κέντρο, δίπλα στο λογότυπο, που δεν καταφέρνει τίποτα. Δύο διαφημίσεις εμφανίζονται στην κεφαλίδα, συμβάλλοντας στην ακαταστασία. Οι διαφημίσεις μπορεί να είναι απαραίτητες για οικονομικούς λόγους, επομένως τα προβλήματα είναι κατανοητά.
Το μεγαλύτερο πρόβλημα είναι το ακατάστατο τμήμα πάνω από τη μεγάλη διαφήμιση με banner. Δεν υπάρχει σαφής διάκριση μεταξύ των στοιχείων αυτού του τμήματος.
Τρεις διακεκομμένες κάθετες γραμμές προσπαθούν να χωρίσουν την περιοχή σε τέσσερις ενότητες, αλλά ο πρώτος διαχωριστής δεν έχει νόημα. Στην πραγματικότητα, η ενότητα αυτή θα φαινόταν μάλλον πιο ελκυστική εάν οι διακεκομμένοι διαχωριστές είχαν αφαιρεθεί.
Τα δίκτυα βοηθούν με την εγγύτητα
Ένας τρόπος για να ομαδοποιήσετε αντικείμενα και να χρησιμοποιήσετε σωστά το λευκό χώρο είναι να ξεκινήσετε με ένα πλέγμα .
Από μια σύντομη ματιά και στις δύο σελίδες LA Times και Globe and Mail, μόνο οι LA Times φαίνεται να έχουν βασίσει το σχεδιασμό τους σε ένα δίκτυο ή τουλάχιστον να χρησιμοποιούν τις αρχές που βασίζονται στο δίκτυο στο στάδιο του σχεδιασμού. Ο δικτυακός τόπος της Globe and Mail παρουσιάζει ελάχιστα στοιχεία σχετικά με τη μορφή δικτύου.
Μια διάταξη με βάση το πλέγμα, με τα κατάλληλα μεγέθη υδρορροών, επιτρέπει αρκετό χώρο ανάμεσα σε τμήματα και σε πολλές περιπτώσεις αναγκάζει τον σχεδιαστή να εφαρμόσει αρχές εγγύτητας χωρίς να το σκεφτεί καν.
Παρακάτω παρουσιάζονται εικόνες από δύο ιστότοπους που έχουν χρησιμοποιήσει το 960 σύστημα πλέγματος . Και οι δύο είναι αρκετά απλές (δηλαδή δεν είναι τόσο βαρύ, όπως οι ιστοτόποι ειδήσεων που αναφέρθηκαν παραπάνω), αλλά δείχνουν ότι τα πλέγματα δίνουν στοιχεία σελίδας αναπνέοντας χώρο, προσφέροντας σε κάθε τμήμα το δικό της οπτικό σπίτι.
Μετακινήστε τους χρήστες κάτω από τη σωστή διαδρομή
Ένα άλλο σημαντικό πλεονέκτημα της εγγύτητας είναι ότι βοηθά τους χρήστες να περιηγούνται σε έναν ιστότοπο χωρίς περιττές καθυστερήσεις ή εμπόδια. Όταν η κύρια πλοήγηση διαχωρίζεται σαφώς από τα άλλα στοιχεία της σελίδας, θα βρεθεί αμέσως και είναι λιγότερο πιθανό να ξεχαστεί.
Η σωστή οπτική ιεραρχία μέσω της εγγύτητας βοηθά τους χρήστες να εξελιχθούν βαθύτερα στον ιστότοπό σας χωρίς να ανησυχούν για το πού ή πού πηγαίνουν.
Θα αισθάνονται πάντα άνετα και θα φτάσουν στα πιο σημαντικά τμήματα του ιστότοπού σας γρήγορα και αποτελεσματικά.
Οι σχεδιαστές ιστοσελίδων με μικρή ή καθόλου εμπειρία στον σχεδιασμό της εκτύπωσης θα μπορούσαν να επωφεληθούν σε μεγάλο βαθμό από τις αρχές που οι σχεδιαστές της εκτύπωσης εφαρμόζουν εδώ και χρόνια πριν από την έκρηξη του ιστού.
Η εγγύτητα δεν είναι η μόνη αρχή σχεδιασμού που θα βοηθήσει μια τοποθεσία να είναι πιο εύχρηστη και οπτικά ευχάριστη, αλλά είναι ένας σημαντικός παράγοντας που πρέπει να εξεταστεί για πολλούς από τους λόγους που μόλις συζητήθηκαν.
Περαιτέρω ανάγνωση
- Βασικά σχεδιασμού: Η αρχή της εγγύτητας
- Πώς CRAP είναι το site σας Σχεδιασμός;
- Χρησιμοποιώντας Ομαδοποίηση σε διαμόρφωση ιστοσελίδας
Αυτή η ανάρτηση γράφτηκε αποκλειστικά για το Webdesigner Depot του Louis Lazaris, ανεξάρτητου συγγραφέα και web developer. Ο Λούις τρέχει Εντυπωσιακοί ιστότοποι , όπου δημοσιεύει άρθρα και σεμινάρια σχετικά με το σχεδιασμό ιστοσελίδων. Μπορείτε να ακολουθήσετε τον Louis στο Twitter ή να έρθετε σε επαφή μαζί του μέσω της ιστοσελίδας του .