Σχεδίαση ιστοσελίδας: τι πρέπει να οριστεί πριν ξεκινήσει το έργο

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

1. Ξεκινήστε από τον επιχειρηματικό στόχο, όχι από την εμφάνιση

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

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

2. Καθορίστε το κοινό και τα πραγματικά ερωτήματά του

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

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

3. Ορίστε την αρχιτεκτονική πληροφορίας πριν το γραφιστικό

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

Η δομή επηρεάζει επίσης τη Βελτιστοποίηση για Μηχανές Αναζήτησης, SEO (Search Engine Optimization), επειδή βοηθά να ξεχωρίζει ποιο θέμα καλύπτει κάθε σελίδα. Για μια γενική εικόνα του αντικειμένου μπορείτε να δείτε και τη σελίδα σχεδιασμός ιστοσελίδας, ενώ η κατασκευή ιστοσελίδας εστιάζει περισσότερο στη φάση υλοποίησης.

4. Καταγράψτε τις λειτουργίες ως απαιτήσεις

Οι λειτουργίες πρέπει να περιγράφονται με όρους χρήσης και όχι ως αόριστα «θέλω κάτι σύγχρονο». Χρειάζεται να αποφασιστεί αν θα υπάρχουν φόρμες, αιτήματα προσφοράς, κατάλογος υπηρεσιών, φίλτρα, σύνδεση με εξωτερικές υπηρεσίες, πολύγλωσσο περιεχόμενο, περιοχή διαχείρισης ή άλλη ειδική ροή. Κάθε λειτουργία δημιουργεί εξαρτήσεις: δεδομένα, δικαιώματα, ειδοποιήσεις, έλεγχο σφαλμάτων και ανάγκες συντήρησης.

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

5. Προετοιμάστε το περιεχόμενο πριν κλειδώσει η διάταξη

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

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

6. Βάλτε προσβασιμότητα και κινητές συσκευές στις βασικές απαιτήσεις

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

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

7. Ορίστε από πριν ποιος έχει την ευθύνη για κάθε εξάρτηση

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

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

8. Λίστα ελέγχου απαιτήσεων πριν δοθεί το πράσινο φως

• Στόχος: έχει οριστεί η κύρια επιχειρηματική ενέργεια;
• Κοινό: γνωρίζουμε τις βασικές ερωτήσεις και αντιρρήσεις;
• Δομή: υπάρχει χάρτης σελίδων και ρόλος για καθεμία;
• Περιεχόμενο: είναι σαφές ποιος παραδίδει κείμενα, εικόνες και στοιχεία;
• Λειτουργίες: έχουν περιγραφεί με αναμενόμενο αποτέλεσμα και εξαιρέσεις;
• Προσβάσεις: υπάρχουν τα στοιχεία για όνομα χώρου, φιλοξενία και εξωτερικές υπηρεσίες;
• Προσβασιμότητα: έχει ενσωματωθεί στις απαιτήσεις και όχι ως μεταγενέστερη διόρθωση;
• Έλεγχος: έχουν συμφωνηθεί τα κριτήρια αποδοχής πριν τη δημοσίευση;

Αν κάποια από αυτές τις γραμμές δεν έχει απάντηση, το έργο δεν είναι ακόμη έτοιμο να «κλειδώσει». Είναι προτιμότερο να λυθεί η ασάφεια πριν μετατραπεί σε αλλαγή κόστους ή χρόνου.

9. Πώς αξιολογείται ένα σχέδιο πριν περάσει σε υλοποίηση

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

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

10. Συμφωνήστε κριτήρια αποδοχής πριν την παράδοση

Η φράση «να είναι έτοιμη η ιστοσελίδα» δεν είναι αρκετά συγκεκριμένη. Χρειάζεται να συμφωνηθεί τι σημαίνει ολοκλήρωση: οι βασικές σελίδες να έχουν το τελικό περιεχόμενο, οι φόρμες να στέλνουν σωστά, οι σύνδεσμοι να οδηγούν στον αναμενόμενο προορισμό, οι κύριες διαδρομές να λειτουργούν σε κινητό και υπολογιστή και οι προβλεπόμενες προσβάσεις να έχουν παραδοθεί. Τα κριτήρια δεν χρειάζεται να είναι πολύπλοκα· χρειάζεται να είναι ελέγξιμα.

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

Τελική απόφαση

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