() translation by (you can also view the original English article)
Στο προηγούμενο μέρος της σειράς, ασχοληθήκαμε με τον ορισμό και την σημασία της "πλευρικής μπάρας" στα μπλογκ Wordpress και είδαμε layouts με μία, δύο, τρείς και τέσσερις πλευρικές μπάρες (ή ακόμα και καθόλου πλευρικές μπάρες).
Σε αυτό το δεύτερο μέρος, θα δούμε πως να σχεδιάσουμε μια πλευρική μπάρα και να ιεραρχήσουμε τα στοιχεία - συγκεκριμένα τα widgets - από τα οποία αποτελείται.
Σχεδιάζοντας την Τέλεια Πλευρική Μπάρα
Ένας από τους κυριότερους λόγους που οι επισκέπτες δεν προσέχουν τις πλευρικές μπάρες, έχει να κάνει με ανεπαρκείς σχεδιαστικές επιλογές. Άλλοι λόγοι είναι η χρήση υπερβολικά πολλών ή λίγων στοιχείων, η εμφάνιση πεζού και μη ενδιαφέροντος περιεχομένου, η μη ορθή ιεράρχηση των στοιχείων εντός της, και ούτω καθ'εξής.
Η αμέλεια στον σχεδιασμό της πλευρικής μπάρας οδηγεί σε λιγότερες προβολές σελίδας, λιγότερα κλικ στις διαφημίσεις, μικρότερο ρυθμό conversion, και λιγότερες πωλήσεις. Ακόμα και αν κάποιος δεν αναμένει κάποιο εισόδημα από το Wordpress μπλογκ του, και απλά περιμένει ο κόσμος να διαβάσει το περιεχόμενό του, είναι σημαντικό να σχεδιάζει την πλευρική μπάρα(ες) ορθά, ώστε να μπορεί να οδηγεί τους επισκέπτες με καθοδηγητικά στοιχεία στην πλευρική μπάρα.
Θα εξετάσουμε τρεις κύριους παράγοντες ενός καλού σχεδιασμού πλευρικής μπάρας: τις διαστάσεις, τα χρώματα, και τα βασικά της τυπογραφίας.
Πλάτος και Ύψος της πλευρικής μπάρας
Η κοινή λογική για το πλάτος της πλευρικής μπάρας είναι να μειώσετε το πλάτος της πλευρικής μπάρας σε σχέση με τον χώρο κυρίως περιεχομένου. Αυτή είναι μια συνετή προσέγγιση, αφού το κυρίως περιεχόμενο είναι σχεδόν πάντα το πιο σημαντικό στοιχείο μιας ιστοσελίδας και ένας στενός χώρος περιεχομένου με φαρδιές πλευρικές μπάρες αφαιρεί έμφαση από το περιεχόμενο.
Ένα πλάτος ανάμεσα σε 20% και 40% είναι συνήθως η καλύτερη επιλογή για μια μονή πλευρική μπάρα και αν πρόκειται να χρησιμοποιήσετε πάνω από μία, συνιστώ να μην ξεπεράσετε ένα συνολικό πλάτος του 50% (20% + 20% ή 15% + 35%, για παράδειγμα).
Για μία μονή πλευρική μπάρα, μπορείτε επίσης να χρησιμοποιείτε την προσέγγιση της Χρυσής Τομής, οπου το πλάτος της πλευρικής μπάρας είναι περίπου 38% του πλάτους του χώρου του κυρίως περιεχομένου. Μπορείτε να βρείτε παραπάνω πληροφορίες για την Χρυσή Τομή στο άρθρο του Jarel Remick Η Χρυσή Τομή στον Σχεδιασμό για το Δίκτυο στο Nettuts+.
Όσον αφορά το ύψος, δεν υπάρχει κάτι άξιο συζήτησης πέραν του "διπλώματος". Το Δίπλωμα είναι η κάτω γραμμή στην οθόνη του επισκέπτη, όπου ο επισκέπτης πρέπει να κυλίσει προς τα κάτω πριν δει το υπόλοιπο της σελίδας. Συνήθιζα να συμβουλεύω τους πελάτες μου να προσπαθούν να μένουν "πάνω από το δίπλωμα", αλλά απαξ και υπάρχουν πολλές διαφορετικές συσκευές (και κατά συνέπεια αναλύσεις οθόνης) και ΄το κοινό έχει συνηθίσει αρκετά στην κύλιση, η ζωή κάτω από το δίπλωμα δεν είναι τόσο τρομακτική πια.
Απο εκεί και έπειτα, θα πρέπει να έχετε υπ'όψιν το γεγονός οτι τα στοιχεία πάνω από το Δίπλωμα είναι τα πρώτα στοιχεία που βλέπουν οι επισκέπτες. Θα το συζητήσουμε παραπάνω στο τελευταίο θέμα, "Ιεραρχώντας τα Στοιχεία της Πλευρικής Μπάρας.
Επ'ευκαιρίας, πρεπει να είστε πολύ πολύ προσεκτικοί να μην ξεπερνάτε το ύψος του χώρου του κυρίως περιεχομένου. Αν οι πλευρικές μπάρες είναι μακρύτερες από το περιεχόμενο, δείχνει πολύ άσχημο.
Χρησιμοποιώντας Χρώματα και Εικόνες
Θυμάστε το μόττο "τα λιγότερα είναι περισσότερα"; Μπορούμε να το διαβάσουμε και ως "τα περισσότερα είναι λιγότερα" επίσης.
Τα χρώματα μπορούν τόσο να τραβούν την προσοχή, όσο και να την αποσπούν. Αν χρησιμοποιείτε όσα χρώματα όσα η πλευρική μπάρα επάνω, κανένα από αυτά τα χρωματιστά, άσχημα στοιχεία δεν θα πάρει την περισσότερη προσοχή - θα πάρουν την ελάχιστη προσοχή.
Αλλά αν χρησιμοποιήσετε λίγα μόνο χρώματα για λίγα μόνο στοιχεία (που χρειάζεστε να τραβήξουν την προσοχή των επισκεπτών περισσότερ), θα τραβήξουν την περισσότερη προσοχή. Πρέπει να έχετε στο νου σας οτι για να είναι προφανές ένα widget, πρέπει τα υπόλοιπα να είναι διακριτικά. Η "Αντίθεση" είναι η λέξη κλειδί εδώ.
Οι εικόνες μπορεί να είναι η εξαίρεση, ωστόσο. Ενώ όλα όσα είπα παραπάνω εφαρμόζονται εξίσου στα ψηφιακά γραφικά, οι φωτογραφίες μπορούν να χρησιμοποιηθούν ώστε να τραβούν την προσοχή ξεχωριστά από τα χρωματιστά στοιχεία. Ωστόσο, όπως μπορείτε να φανταστείτε, πάρα πολλές εικόνες θα αποσπάσουν την προσοχή του επισκέπτη - γι αυτό μπορεί οι διαφημίσεις είτε να παρατηρηθούν, είτε όχι, αναλόγως με τον σχεδιασμό της πλευρικής μπάρας σας.
Θα πρότεινα, αν είναι εφικτό, να χρησιμοποιείτε φωτόγραφίες με fade out (που κάνουν fade in όταν ο κέρσορας είναι από πάνω τους) στα widget της πλευρικής σας μπάρας. Δοκιμάστε και δείτε αν αυτό μοιάζει ωραίο ή όχι.
Μεγέθη Γραμματοσειρών και Στοίχιση των Στοιχείων
Η τυπογραφία είναι πάντα σημαντική για έναν καλό σχεδιασμό. Με καλή τυπογραφία, μπορεί να μην χρειάζεστε τίποτε άλλο για να κάνετε την ιστοσελίδα σας να δείχνει όμορφη.
Στις πλευρικές μπάρες που σχεδιάζω, μου αρέσει να ορίζω το μέγεθος της γραμματοσειράς ελάχιστα (10% με 20%) μεγαλύτερο από αυτό του κυρίως περιεχομένου. Τραβάει την προσοχή, αλλά δεν αποσπά τον χρήστη από το κυρίως περιεχόμενο - οι επισκέπτες βλέπουν αυτό που θέλουν να δουν, και σε αυτό εστιάζουμε και εμείς. Μην ξεχνάτε οτι ενίοτε το μικρότερο κείμενο μπορεί να είναι ελκυστικό επίσης.
Μου αρέσει και να στοιχίζω τις επικεφαλίδες στο κέντρο και το κείμενο στα δεξιά, αλλά μπορείτε - και θα έπρεπε - να κάνετε οτιδήποτε νομίζετε πως ταιριάζει στον σχεδιασμό σας. Όσο δεν μοιάζει μπερδεμένο και άσχετο, είναι καλό για εσάς.
Ιεραρχώντας τα Στοιχεία της Πλευρικής Μπάρας
Έστω και αν έχετε δύο μόνο στοιχεία στην πλευρική μπάρα, ή ακόμα και δέκα, θα πρέπει να σκεφτείτε οτι η ιεράρχηση αυτών των στοιχείων είναι μια αναγκαία πρακτική. Αν γίνει σωστά θα αυξήσει σίγουρα τα κλικ, και αν γίνει λάθος μπορεί να τα βυθίσει!
Σκεφτείτε τα σημαντικά στοιχεία τα οποία θα έπρεπε να δουν όλοι οι επισκέπτες, και τα όχι-και-τόσο-σημαντικά τα οποία δεν χρειάζεται να ιδωθούν από κάθε ένα άτομο που επισκέπτεται την σελίδα σας.
Για παράδειγμα: ενώ οι φόρμες εγγραφής και τα πλήκτρα για τις τελευταίες/δημοφιλείς επισκέψεις θεωρούνται "σημαντικά", δεν μπορούμε να πούμε το ίδιο για τις λίστες με τα τελευταία σχόλια ή τα blogrolls. Όταν αναγνωρίσετε τα "σημαντικά", μπορείτε να τα ιεραρχήσετε μεταξύ τους, και να έχετε μια καλά ιεραρχημένη πλευρική μπάρα.
Επίσης, πρέπει να σκεφτείτε το δίπλωμα: Ποιά στοιχεία πρέπει να μπουν στην κορυφή, και ποιά στο τέλος της πλευρικής μπάρας; Το να έχετε τα ποιό σημαντικά στοιχεία (όπως η φόρμα εγγραφής email και μια λίστα με τις δημοφιλείς δημοσιεύσεις και πιθανόν και μια διαφήμιση) πάνω από το δίπλωμα θα ωφελήσει τόσο εσάς όσο και τους επισκέπτες σας.
Συμπέρασμα
Δεν πιστεύω πως θα πρέπει να ακολουθείτε αυστηρούς κανόνες για έναν καλό σχεδιασμό, αλλά υπάρχουν πάντα "οδηγοί" για να σχεδιάζετε καλύτερα. Αυτή η σειρά είναι ένας από αυτούς τους οδηγούς και ελπίζω να τον απολαύσατε.
Έχετε κάτι να προσθέσετε ή να βελτιώσετε; Μοιραστείτε τις ιδέες σας μαζί μας αφήνοντας ένα σχόλιο!
