Κατασκευή Iστοσελίδων: Τι πρέπει να προσέξεις

Ποιοι είναι οι παράγοντες που επηρεάζουν την κατασκευή ιστοσελίδων;

Τι θα πρέπει να γνωρίζεις για να διασφαλίσεις ότι η “online βιτρίνα” του brand σου είναι… προσεγμένη και ότι θα συνεχίσει να βοηθάει την επιχείρηση σου να αναπτυχθεί;

Ας ξεκινήσουμε από τα βασικά. Η ιστοσελίδα αντιπροσωπεύει την εικόνα της επιχείρησης σου στο διαδίκτυο.

Συνεπώς, αυτό που βλέπουν οι χρήστες όταν την επισκέπτονται επηρεάζει τον τρόπο με τον οποίο “αντιμετωπίζουν” και αλληλεπιδρούν με την επιχείρηση σου στο σύνολο της.

Ο σχεδιασμός της ιστοσελίδας καθορίζει σε μεγάλο βαθμό την εμπειρία του χρήστη.

Μια καλοσχεδιασμένη ιστοσελίδα δημιουργεί θετικές εντυπώσεις στους χρήστες ενισχύοντας το αίσθημα του επαγγελματισμού και της αξιοπιστίας.

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

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

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

Συνέχισε την ανάγνωση για να τις ανακαλύψεις!

Ευκολία πλοήγησης

Κατασκευή Ιστοσελίδων: Βέλτιστες Πρακτικές #1

Ένα σημαντικό μέρος της διαδικασίας σχεδιασμού αφορά την οργάνωση και το περιεχόμενο των μενού της ιστοσελίδας.

Η σωστή οργάνωση μιας ιστοσελίδας είναι πολύ σημαντική γιατί καθορίζει το πόσο φιλική και προσβάσιμη είναι για το χρήστη.

Θα πρέπει να αποφασίσεις ποιες σελίδες, κατηγορίες και υποκατηγορίες θα συμπεριληφθούν στα μενού της ιστοσελίδας σου, με βασικό γνώμονα τους επισκέπτες σου.

Με άλλα λόγια θα πρέπει να σκεφτείς τι είναι αυτό που πρόκειται να ψάξει ο μέσος επισκέπτης στην ιστοσελίδας σου. Επίσης πως θα τον βοηθήσεις να το καταφέρει με όσο το δυνατόν λιγότερα κλικ.

Είναι σημαντικό να οργανώσεις την ιστοσελίδα σου με τρόπο που θα τον κάνει εξίσου “φιλικό” τόσο για έναν χρήστη που επισκέπτεται, για πρώτη φόρα όσο και για τον τακτικό επισκέπτη!

Ομοιογένεια Σχεδίασης

Κατασκευή Ιστοσελίδων: Βέλτιστες Πρακτικές #2

Μια ιστοσελίδα θα πρέπει να διατηρεί έναν ομοιογενή σχεδιασμό ο οποίος να αφορά όλες τις επιμέρους σελίδες.

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

Σε καμία περίπτωση, δεν θέλεις οι επισκέπτες της ιστοσελίδας σου να αντιμετωπίζουν τέτοιου είδους προβλήματα.

Γι’ αυτό κατά τη διαδικασία του σχεδιασμού, θα πρέπει να ακολουθείται ένα ενιαίο σχεδιαστικό στυλ. Βάσει αυτού του “οδηγού” θα διασφαλίσεις ότι όλες οι επιμέρους σελίδες σου έχουν παρόμοια οπτική, σχεδιασμό και δομή.

Πιο συγκεκριμένα τα στοιχεία ομοιογένειας που θα πρέπει να λάβεις υπόψη σου είναι τα εξής:

• Ο συνδυασμός χρωμάτων της ιστοσελίδας
• Ο σχεδιασμός του λογότυπου και τυχόν παραλλαγές του ως προς το μέγεθος και το σχήμα ανάλογα τη σελίδα.
• Η γραμματοσειρά
• Το οπτικό στυλ (για παράδειγμα, minimal αισθητική, εντυπωσιακά γραφικά στοιχεία κ.ο.κ.)

Στόχοι επιμέρους Σελίδων

Κατασκευή Ιστοσελίδων: Βέλτιστες Πρακτικές #3

Mια ιστοσελίδα “προσαρμόζεται” για να ικανοποιήσει τον πρωταρχικό στόχο μιας επιχείρησης, ο οποίος καθορίζει εξαρχής τον συνολικό σχεδιασμό της.

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

Για παράδειγμα, ένα Eshop θα σχεδιαστεί κατά κύριο λόγο για να ενθαρρύνει τους χρήστες να πραγματοποιήσουν αγορές.

Για να γίνει αυτό, ορισμένες σελίδες θα πρέπει να έχουν ως στόχο την προσέλκυση κοινού, αλλά και την αύξηση της επισκεψιμότητας. Αυτές μπορεί να είναι σελίδες που εστιάζονται στην παραγωγή περιεχομένου (πχ. ένα blog).

Άλλες σελίδες θα σχεδιαστούν για να ενισχύσουν το SEO ή να ενθαρρύνουν την αλληλεπίδραση με τους χρήστες στα Social Media.

Άλλες, θα ωθήσουν πιο άμεσα τους χρήστες να προχωρήσουν σε κάποια αγορά, με τη συμπερίληψη ενός Call to Action.

Θα πρέπει να καθορίσεις με σαφήνεια τον συγκεκριμένο στόχο που θέλεις να επιτύχεις ανά σελίδα και να βεβαιωθείς ότι ο σχεδιασμός της ιστοσελίδας “προσαρμόζεται” κατάλληλα σε αυτόν.

Εστίαση Σελίδας

Κατασκευή Ιστοσελίδων: Βέλτιστες Πρακτικές #4

Μια άλλη καλή συμβουλή σχεδιασμού ιστοσελίδων που συμβαδίζει με την προηγούμενη είναι η διατήρηση της εστίασης του περιεχομένου κάθε επιμέρους σελίδα.

Με άλλα λόγια, μην προσπαθήσεις να “χωρέσεις” όλους τους στόχους σου μαζί σε μια οποιαδήποτε σελίδα.

Μια σελίδα που είναι “φορτωμένη” με πολύ περιεχόμενο το οποίο δεν συμβαδίζει με τους σκοπούς της θα δημιουργήσει αρνητικές εντυπώσεις στον χρήστη.

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

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

Διαθέτοντας ξεχωριστές σελίδες με πολύ πιο ξεκάθαρη εστίαση θα ενισχύσεις τόσο την εμπειρία του χρήστη όσο και τις ενέργειες του SEO για την ιστοσελίδα σου.

Responsive Design

Κατασκευή Ιστοσελίδων: Βέλτιστες Πρακτικές #5

Κάθε χρόνο οι χρήστες που επισκέπτονται το διαδίκτυο από κινητές συσκευές αυξάνονται σταθερά, ενώ πλέον έχουν ξεπεράσει τους χρήστες που “σερφάρουν” από “σταθερούς” υπολογιστές (desktops).

Με απλά λόγια αυτό σημαίνει ότι ο σχεδιασμός της ιστοσελίδας σου θα πρέπει να διασφαλίζει μια φιλική εμπειρία για τις κινητές συσκευές.

Στις περισσότερες περιπτώσεις, η καλύτερη επιλογή για τη δημιουργία ιστοσελίδας που λειτουργεί εξίσου καλά τόσο σε desktops όσο και σε κινητές συσκευές εκφράζεται από το Responsive Design.

Το Responsive Web Design είναι ο τρόπος σχεδιασμού ιστοσελίδας ο οποίος προσαρμόζει αυτόματα το περιεχόμενο και τα στοιχεία της ώστε να ταιριάζει με το μέγεθος της οθόνης στην οποία προβάλλεται.

Αυτός ο σχεδιασμός αποτρέπει τις εικόνες να είναι μεγαλύτερες από το πλάτος της οθόνης και διευκολύνει τους επισκέπτες κινητών συσκευών.

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

Κατά το σχεδιασμό της ιστοσελίδας σου θα πρέπει να σιγουρευτείς ότι η κάθε επιμέρους σελίδα προβάλλεται με τον σωστό τρόπο σε καθένα από τα τρία κύρια μεγέθη συσκευών (desktop, tablet, mobile).

Πλέον, τα websites που αξιοποιούν αυτό το σχεδιασμό είναι αρκετά διαδεδομένα. Έτσι τα περισσότερα εργαλεία κατασκευής ιστοσελίδων χρησιμοποιούν αυτόματα τις βέλτιστες πρακτικές για τον σχεδιασμό τους βάσει Responsive Design.

Βελτιστοποίηση για κινητά

Κατασκευή Ιστοσελίδων: Βέλτιστες Πρακτικές #6

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

Για παράδειγμα το να κάνεις κλικ σε ένα μικρό κουμπί (button) στην οθόνη του υπολογιστή είναι πολύ εύκολο εξαιτίας της χρήσης του ποντικιού.

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

Εάν ένας σύνδεσμος (link) ή κάποιο κουμπί είναι πολύ μικρό ή εάν προβάλλεις διαφορετικούς συνδέσμους που βρίσκονται σε πολύ μικρή απόσταση μεταξύ τους, οι χρήστες θα δυσκολευτούν να τους αξιοποιήσουν με ευκολία.

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

Οπτική Ιεραρχία

Κατασκευή Ιστοσελίδων: Βέλτιστες Πρακτικές #7

Η οπτική ιεραρχία σχετίζεται με τους στόχους που έχεις θέσει για την κάθε επιμέρους σελίδα της ιστοσελίδας σου.

Κάθε σελίδα θα πρέπει να προβάλλει στον χρήστη πρώτα από όλα τις σημαντικότερες πληροφορίες σε ένα εμφανές και ευδιάκριτο σημείο.

Στη συνέχεια θα πρέπει να ακολουθούν οι επιπρόσθετες πληροφορίες και τα στοιχεία σχεδίασης που είναι δευτερεύουσας σημασίας.

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

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

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

Προσβασιμότητα

Κατασκευή Ιστοσελίδων: Βέλτιστες Πρακτικές #8

Οι χρήστες δεν αλληλεπιδρούν με τον ίδιο τρόπο στο διαδίκτυο, oύτε έχουν τις ίδιες δεξιότητες. Ένα ποσοστό των χρηστών του διαδικτύου έχει κάποιο είδος αναπηρίας.

Μια ιστοσελίδα θα πρέπει να δημιουργείται αξιοποιώντας τις αρχές της “συμπερίληψης” και της προσβασιμότητας.

Η Πρωτοβουλία Προσβασιμότητας στο Διαδίκτυο (Web Accessibility Initiative) έχει θεσπίσει μια σειρά Αρχών Προσβασιμότητας τις οποίες θα πρέπει να ακολουθήσουν οι σχεδιαστές κατά τη δημιουργία ιστοσελίδων τους.

Τα άτομα που επωφελούνται περισσότερο από μια “προσβάσιμη” σχεδίαση μπορεί να ανήκουν στη μειονότητα, αλλά μερικά αυτό αυτά είναι πολύ πιθανό να ανήκουν στο κοινό που στοχεύεις.

Κατασκευάζοντας μια ιστοσελίδα που ενισχύει την προσβασιμότητα, προβάλλεις το brand σου ένα ευρύτερο κοινό.

Πιο σημαντικά, δημιουργείς “καλή θέληση” με μια κοινότητα ατόμων που συχνά δεν έχουν επαρκή εξυπηρέτηση.

Design Standards

Κατασκευή Ιστοσελίδων: Βέλτιστες Πρακτικές #9

Yπάρχουν ορισμένα πρότυπα σχεδιασμού που καθορίζουν τους βασικούς “κανόνες” βάσει των οποίων οι άνθρωποι αλληλεπιδρούν με τις ιστοσελίδες.

Αν και φυσικά υπάρχουν εξαιρέσεις αυτές οι ενέργειες εκφράζουν αποτελεσματικά τις προσδοκίες και τις ανάγκες των χρηστών κατά την πλοήγηση τους σε μια ιστοσελίδα.

Μερικές από τις ενέργειες που σου συνιστούμε να ακολουθήσεις κατά τη διαδικασία κατασκευής της ιστοσελίδας σου είναι οι εξής:

• Το λογότυπό της επιχείρησης σου να βρίσκεται στο πάνω αριστερά μέρος της ιστοσελίδας
• Τα στοιχεία επικοινωνίας της επιχείρησης σου να βρίσκονται στο επάνω δεξιά μέρος της ιστοσελίδας
• Το κύριο μενού να εκτείνεται στο πάνω μέρος της οθόνης
• Το βασικό μήνυμα/αποστολή του brand σου τοποθετείται πάντα ψηλά στην αρχική σελίδα
• Συμπεριέλαβε ένα Call to Action στην αρχική σελίδα
• Πρόσθεσε τη δυνατότητα αναζήτησης στο header (κεφαλίδα)

Αυτή η λίστα “σχηματοποιεί” τα στοιχεία που περιμένεις να δεις όταν επισκέπτεσαι μια ιστοσελίδα.