Τα παρακάτω σημεία αποτελούν βασικές αρχές επιτυχίας για μια ιστοσελίδα, στα οποία αξίζει κανείς να δώσει ιδιαίτερο βάρος. Η λίστα δεν είναι αποκλειστική, αλλά επικεντρώνεται στα πιο σημαντικά, τα οποία καθορίζουν το πλαίσιο εργασίας που με την εμπειρία του μπορεί κάποιος να επαυξήσει και να τροποποιήσει.
1. Γιατί δημιουργείτε την συγκεκριμένη ιστοσελίδα και σε ποιους απευθύνεστε
Πριν το σχεδιασμό μίας ιστοσελίδας καθορίζουμε τι θέλουμε και το κοινό στο οποίο στοχεύουμε. Η ιστοσελίδα μπορεί να αφορά ένα επαγγελματικό πορτοφόλιο, συμβατικό ηλεκτρονικό εμπόριο ή dropshipping. Θα πρέπει να αναδεικνύει το θέμα και να εντυπωσιάζει τους επισκέπτες. Εάν παρέχονται σχετικές υπηρεσίες από τον κάτοχο της ιστοσελίδας που ξεχωρίζουν, θα πρέπει να παρουσιάζονται με ανάλογο τρόπο.
Για παράδειγμα, η ιστοσελίδα μιας κτηνιατρικής κλινικής θα μπορούσε να βασίζεται σε ένα θέμα με ζώα, το οποίο θα είναι ξεκάθαρο, εντυπωσιακό και με επαγγελματική αισθητική. Εάν υπάρχει διασύνδεση με φιλοζωικό σύλλογο ή σωματείο για παροχή συγκεκριμένων υπηρεσιών κάτι τέτοιο θα πρέπει να αναδεικνύεται με τον κατάλληλο τρόπο.
Αντιθέτως ένα επαγγελματικό πορτοφόλιο φωτογραφίας θα μπορούσε να αποφύγει τα έντονα χρώματα και πολυσύνθετα στοιχεία που θα επικάλυπταν τις φωτογραφίες, οι οποίες θα ομαδοποιούνται σε ένα λιτό και απλό ψηφιακό άλμπουμ. Οι φωτογραφίες του άλμπουμ θα πρέπει να είναι υψηλής ανάλυσης και επιλεχθούν ώστε να αναδεικνύουν το προσωπικό στυλ του φωτογράφου, το πάθος του και τον επαγγελματισμό του ώστε να αιχμαλωτίζουν το ενδιαφέρον των επισκεπτών.
Σε τελική ανάλυση είναι οι παρεχόμενες υπηρεσίες και τα προϊόντα που καθορίζουν τον σχεδιασμό μιας ιστοσελίδας. Τα στυλ των γραμμάτων, τα χρώματα και τα διαδραστικά κουμπιά, όλα τα στοιχεία του σχεδιασμού, θα πρέπει να έχουν έννοια και σκοπό. Αυτό θα αποτελέσει την βάση ενός επιτυχημένου σχεδιασμού.
2. Απλότητα στην κατασκευή
Ο σχεδιασμός περιλαμβάνει συνήθως μία πληθώρα επιμέρους οπτικών στοιχείων. Όταν γίνεται με σωστό τρόπο, όλα τα στοιχεία ταιριάζουν μεταξύ τους και αναδεικνύουν την γενικότερη αισθητική εξυπηρετώντας αποτελεσματικά την προβολή της ιστοσελίδας σας. Η χωρίς συνοχή παράθεση οπτικών στοιχείων έχει ως αποτέλεσμα μια πρόχειρη σχεδίαση που δυσχεραίνει την πλοήγηση στο site σας.
Να επιδιώκετε την απλότητα στην κατασκευή που θα εξασφαλίζει σύντομους χρόνους φόρτωσης της ιστοσελίδας σας, ευκολία στην πλοήγηση και ομαλή μετάβαση στο περιεχόμενο του site σας μεταξύ των διάφορων σελίδων. Σχεδόν το 50% των επισκεπτών ενός site το εγκαταλείπουν χωρίς να πλοηγηθούν σε περισσότερες από μία σελίδες – αλλά μια προσεγμένη σχεδίαση που αναβαθμίζει την εμπειρία του χρήστη με εναλλαγές σελίδων χωρίς καθυστερήσεις βοηθάει στο να παραμείνουν περισσότερο χρόνο οι επισκέπτες στο site σας.
Δώστε προτεραιότητα στην εμπειρία του χρήστη και αξιολογήστε εάν είναι απαραίτητο να συμπεριλάβετε στην ιστοσελίδα σας στοιχεία τα οποία κάνουν την πλοήγηση πολύπλοκη ή δημιουργούν ασαφή μηνύματα προς τους επισκέπτες και σε τελική ανάλυση έχουν αρνητικό αντίκτυπο στην εμπειρία του χρήστη. Αφαιρέστε εικόνες που δεν χρειάζονται, μεγάλα κείμενα που διαβάζονται δύσκολα και χρώματα που αποσπούν τον επισκέπτη από την πλοήγηση ή από τα κουμπιά που οδηγούν σε Call-to-Action. Απλοποιώντας την σχεδίαση αποφεύγετε παρόμοια σφάλματα και συμβάλλετε στην θετική εμπειρία των χρηστών με αποτέλεσμα την αυξημένη κίνηση επισκεπτών προς την ιστοσελίδα σας και την αύξηση των επαφών/πωλήσεων.
Αξιοποιήστε τις πλήρεις δυνατότητες της ιστοσελίδας σας μετρώντας τους δείκτες απόδοσής της (χρησιμοποιώντας εργαλεία όπως τα google analytics κτλ)
3. Ευκολία στην πλοήγηση
Τα μενού πλοήγησης θα πρέπει να είναι στις ίδιες θέσεις σε όλες τις σελίδες του site. Το ίδιο ισχύει για του συνδέσμους (links) και τα κουμπιά. Εάν, για παράδειγμα, υπάρχει ένας σύνδεσμος σε μενού πολλαπλών γραμμών (hamburger menu) στην επάνω δεξιά γωνία του site σας δεν θα πρέπει να αλλάζει θέση σε κάτω αριστερά σε μια άλλη σελίδα του site σας.
Αυτό θα πρέπει να εφαρμόζεται σε όλες οθόνες των συσκευών του χρήση – σταθερό υπολογιστή, tablet και κινητό τηλέφωνο. Ένα εντυπωσιακό site θα πρέπει να είναι το ίδιο εντυπωσιακό τόσο στον σταθερό υπολογιστή όσο και στο smartphone. Οι σελίδες του site θα πρέπει να είναι βελτιστοποιημένες για πολλαπλές συσκευές με τα διάφορα μενού και τα διαδραστικά στοιχεία να αλλάζουν ομοιόμορφα μέγεθος σε διαφορετικού μεγέθους οθόνες.
4. Σχεδιασμός και αισθητική
Αφιερώστε χρόνο για να επεξεργαστείτε τις λεπτομέρειες του σχεδιασμού σας. Επιλέξτε την απόσταση μεταξύ των επικεφαλίδων, εξασφαλίστε ότι οι εικόνες έχουν το ίδιο μέγεθος και ότι είναι της ίδιας ποιότητας. Το γράμματα θα πρέπει να είναι ευδιάκριτα. Το στυλ που θα επιλέξετε, οι χρωματικές παλέτες, οι εικόνες και τα video είναι σημαντικά στοιχεία του σχεδιασμού και της αισθητικής της ιστοσελίδας σας.
Πολλές ιστοσελίδες εντυπωσιάζουν με την πρώτη ματιά, αλλά αποτυγχάνουν να προσφέρουν μια διαρκή εμπειρία χρήστη κατά την πλοήγηση σε όλες τις σελίδες του site. Είναι πολύ σημαντικό το στυλ των γραμματοσειρών και τα χρώματα να διατηρούνται ομοιόμορφα σε όλες τις σελίδες του site και τα στοιχεία του σχεδιασμού να αλληλοσυμπληρώνονται.
Xρησιμοποιώντας γραμματοσειρές κατάλληλες για το web και εξασφαλίζοντας ότι οι χρωματικές αποχρώσεις συμμορφώνονται με τις Οδηγίες Προσβασιμότητας Περιεχομένου στο Διαδίκτυο (WCAG) θα καταστίσουν την ιστοσελίδα σας ελκυστική και προσβάσιμη σε ένα ευρύ φάσμα επισκεπτών. Υιοθετώντας μία χρωματική παλέτα για την ιστοσελίδα σας και θέτοντας κανόνες για τις χρησιμοποιούμενες γραμματοσειρές και τα οπτικά στοιχεία της ιστοσελίδας σας θα διευκολύνει κατά πολύ τη διαδικασία του σχεδιασμού.
5. Οργάνωση
Η οργάνωση των οπτικών στοιχείων σε μία ιστοσελίδα απαιτεί γνώση βασικών αρχών σχεδιασμού, όπως:
- Ελεύθερος χώρος: Αναφέρεται στον χώρο της ιστοσελίδας που είναι ελεύθερος από στοιχεία-blocks (whitespace ή “αρνητικός” χώρος). Ο χώρος αυτός αναδεικνύει τα στοιχεία της ιστοσελίδας και επικεντρώνει την προσοχή του επισκέπτη σε συγκεκριμένα στοιχεία που επιθυμούμε να προβάλλουμε.
- Οπτική ιεράρχηση: Αναφέρεται στην οργάνωση της ιστοσελίδας με τρόπο ώστε σε κάποια από τα χαρακτηριστικά της να δοθεί περισσότερη έμφαση σε σχέση με άλλα. Εάν υπάρχει κάτι που το θεωρείτε πιο σημαντικό, όπως ένα call-to-action (CTA) ή η φωτογραφία ενός προϊόντος θα πρέπει να το αναδείξετε με έντονα χρώματα ή τοποθετώντας το στο κέντρο της ιστοσελίδας. Η οπτική ιεράρχηση βασίζεται σε αυτό που ονομάζουμε μορφολογική ψυχολογία (Gestalt psychology).
- Αντιθέσεις: Αναφέρεται στις σχέσεις των επιμέρους σχεδιαστικών στοιχείων μεταξύ τους – τα οποία παρουσιάζουν διαφορές – και αναδεικνύονται από την συνδυαστική παρουσία τους. Για παράδειγμα λευκή γραμματοσειρά σε μαύρο φόντο. Παρόμοιες αντιθέσεις χρησιμοποιούνται συχνά για να ξεχωρίσουν κάποιο στοιχείο του σχεδιασμού το οποίο θεωρούμε σημαντικό ή για να δώσουν έμφαση στις διαφορές των επιμέρους στοιχείων. Αντίθεση μπορούμε να έχουμε με τη χρήση χρώματος, μεγέθους, διαμόρφωσης του χώρου ή της θέσης.
- Κλίμακες: Αναφέρεται στα σχετικά μεγέθη των στοιχείων-μπλοκ μεταξύ τους. Οι εικόνες προϊόντων, για παράδειγμα, θα πρέπει να είναι μεγαλύτερες από τις σχετικές περιγραφές τους και τις ετικέτες τιμών. Κάθε στοιχείο-μπλοκ θα πρέπει να είναι ανάλογο με το σκοπούμενο αποτέλεσμα χωρίς να απομειώνεται η χρηστικότητά του. Το κείμενο δεν μπορεί να αποδίδεται με μικρού μεγέθους γραμματοσειρές, ενώ τα γραφικά δεν πρέπει να είναι τόσο μεγάλα ώστε να επισκιάζουν το υπόλοιπο περιεχόμενο της ιστοσελίδας.
Τα παραπάνω αποτελούν βασικές αρχές οργάνωσης που μπορούν να αναπτυχθούν περαιτέρω για κάποιον που θα ήθελε να εξειδικευτεί.
6. Προσβασιμότητα
Με την ολοένα αυξανόμενη χρήση των προγραμμάτων ανάγνωσης κειμένου και των βοηθητικών τεχνολογιών για άτομα με ειδικά προβλήματα, η παρουσίαση του περιεχομένου μίας ιστοσελίδας είναι σηματική ώστε να εξασφαλίζεται η προσβασιμότητα για όλους. Το κείμενο και τα χρώματα θα πρέπει να είναι αντιληπτά από όλους τους επισκέπτες της ιστοσελίδας σας, ενώ κάθε γραμμή του κειμένου – συμπεριλαμβανομέμου και του εναλλακτικού κειμένου για τις εικόνες (alt text) θα πρέπει να είναι αναγνώσιμα από τα σχετικά προγράμματα. Θα πρέπει να δοθεί προσοχή στα στοιχεία με κίνηση (animation), στα στοιχεία ελέγχου (controls), στις φόρμες, στους πίνακες, στις εικόνες, στα multimedia κ.τ.λ. ώστε να διαβάζονται και από τον φυσικό επισκέπτη αλλά και από τα προγράμματα υποβοήθησης.