Σχεδιασμός web site: πώς διαμορφώνεται μια εύχρηστη ιστοσελίδα
Ο σχεδιασμός web site είναι η διαδικασία με την οποία αποφασίζουμε ποιες πληροφορίες βλέπει ο επισκέπτης, με ποια σειρά και πώς αλληλεπιδρά με αυτές. Η εμφάνιση είναι σημαντική, αλλά δεν μπορεί να διορθώσει μια ακατανόητη πλοήγηση ή περιεχόμενο που δεν απαντά στην ανάγκη του χρήστη. Για να κατανοήσουμε τον σχεδιασμό, βοηθά να εξετάσουμε πώς μετατρέπεται ένας επιχειρηματικός στόχος σε σελίδες, κείμενα, στοιχεία διεπαφής και λειτουργικούς ελέγχους.
Βήμα πρώτο: κατανοούμε τον επισκέπτη και την εργασία του
Πριν σχεδιαστεί μια σελίδα, περιγράψτε ποιος τη χρησιμοποιεί και τι θέλει να πετύχει. Ο επισκέπτης ενός επαγγελματικού γραφείου αναζητά υπηρεσίες και τρόπο επικοινωνίας, ενώ ο αγοραστής ενός καταστήματος χρειάζεται διαθεσιμότητα, κόστος και ολοκλήρωση παραγγελίας. Για κάθε περίπτωση καταγράψτε την πρώτη ερώτηση και το σημείο στο οποίο ο άνθρωπος θα θεωρήσει ότι βρήκε απάντηση. Αυτή η εργασία αποκαλύπτει ποια πληροφορία πρέπει να εμφανίζεται νωρίς και ποια μπορεί να αναπτύσσεται σε βάθος. Χωρίς σαφή σκοπό, ο σχεδιασμός καταλήγει σε διαδοχικές αισθητικές επιλογές χωρίς κοινό μέτρο αξιολόγησης.
Βήμα δεύτερο: χτίζουμε αρχιτεκτονική πληροφοριών
Η αρχιτεκτονική πληροφοριών είναι η οργάνωση σελίδων, κατηγοριών και εσωτερικών διαδρομών με τρόπο που μπορεί να προβλέψει ο επισκέπτης. Μια υπηρεσία δεν πρέπει να κρύβεται κάτω από ασαφείς τίτλους μενού ούτε η ίδια πληροφορία να εμφανίζεται ασύνδετα σε πολλές θέσεις. Δημιουργήστε μικρό κατάλογο των κύριων θεμάτων και εξετάστε αν οι ονομασίες τους έχουν νόημα για άνθρωπο που δεν γνωρίζει την εσωτερική ορολογία της επιχείρησης. Προβλέψτε ιδιαίτερη θέση για συχνές ερωτήσεις, στοιχεία επικοινωνίας και πολιτικές που επηρεάζουν την απόφαση. Με αυτόν τον τρόπο η πλοήγηση προκύπτει από περιεχόμενο, αντί να το αναγκάζει να προσαρμόζεται σε αυθαίρετα μενού.
Βήμα τρίτο: δοκιμάζουμε σκελετό πριν από τα χρώματα
Ένας απλός σκελετός σελίδας επιτρέπει να τοποθετήσουμε τίτλο, βασική απάντηση, στοιχεία απόδειξης και επόμενη ενέργεια χωρίς διακοσμητικές αποφάσεις. Είναι χρήσιμο να δοκιμάζεται με κάποιον που δεν συμμετείχε στον σχεδιασμό. Ζητήστε του να εντοπίσει συγκεκριμένη υπηρεσία ή να βρει τον τρόπο υποβολής αιτήματος. Αν δυσκολευτεί, η αλλαγή θέσης ή ονομασίας στοιχείων είναι ευκολότερη εδώ παρά μετά την ολοκλήρωση της ανάπτυξης. Ο σκελετός βοηθά επίσης να φανεί αν η ίδια ενότητα επαναλαμβάνεται ή αν ένα κρίσιμο βήμα δεν έχει καθόλου χώρο.
Βήμα τέταρτο: ορίζουμε οπτική ιεράρχηση
Η οπτική ιεράρχηση καθορίζει τι γίνεται αντιληπτό πρώτο: τίτλος, κύρια πληροφορία, παραδείγματα ή κουμπί ενέργειας. Προκύπτει από μέγεθος, θέση, αποστάσεις, χρώμα και αντίθεση. Η ισχυρή ιεράρχηση δεν σημαίνει ότι όλα τα στοιχεία είναι μεγάλα ή έντονα· αντίθετα, ορισμένα χρειάζεται να έχουν χαμηλότερη έμφαση ώστε να αναδεικνύονται τα σημαντικά. Χρησιμοποιήστε σταθερούς κανόνες για επικεφαλίδες, λίστες και μηνύματα σφάλματος. Έτσι ο επισκέπτης αναγνωρίζει το ίδιο μοτίβο σε διαφορετικές σελίδες και δεν χρειάζεται να μάθει ξανά τη διεπαφή σε κάθε κλικ.
Βήμα πέμπτο: προσαρμόζουμε τη δομή σε μικρές οθόνες
Ο σχεδιασμός για κινητά δεν είναι μικρογραφία της επιτραπέζιας έκδοσης. Χρειάζεται να αποφασιστεί ποιο περιεχόμενο εμφανίζεται πρώτο, πώς διαβάζονται οι πίνακες και πώς ενεργοποιούνται τα στοιχεία αφής χωρίς λάθη. Οι εκτεταμένες οριζόντιες γραμμές πλοήγησης συχνά χρειάζονται διαφορετική οργάνωση. Προσέξτε ιδιαίτερα φόρμες, επιλογές προϊόντων και ενότητες με πολλές λεπτομέρειες. Μην αποκρύπτετε χρήσιμες πληροφορίες μόνο επειδή δεν χωρούν. Προτιμήστε προσεκτική αναδιάταξη και προοδευτική αποκάλυψη λεπτομερειών, ώστε ο επισκέπτης να μπορεί να ολοκληρώσει την ίδια σημαντική εργασία σε κάθε συσκευή.
Βήμα έκτο: ενσωματώνουμε προσβασιμότητα
Η προσβασιμότητα αφορά το αν μπορούν να χρησιμοποιούν τη σελίδα άνθρωποι με διαφορετικές δυνατότητες και μέσα πρόσβασης. Απαιτεί ορατή εστίαση κατά την πλοήγηση με πληκτρολόγιο, ευανάγνωστο περιεχόμενο, σαφείς ετικέτες πεδίων και στοιχεία που δεν βασίζονται αποκλειστικά στο χρώμα. Οι εικόνες που μεταφέρουν πληροφορία χρειάζονται κατάλληλη περιγραφή. Όταν η διαδραστική λειτουργία είναι δύσκολη χωρίς ποντίκι, το πρόβλημα δεν είναι απλώς αισθητικό. Καλό είναι τέτοιες απαιτήσεις να περιλαμβάνονται από τον αρχικό σχεδιασμό και να ελέγχονται στο τελικό λειτουργικό αποτέλεσμα, όχι μόνο σε μια στατική μακέτα.
Βήμα έβδομο: κάνουμε έλεγχο χρηστικότητας με πραγματικές αποστολές
Ο έλεγχος χρηστικότητας δεν περιορίζεται στο αν αρέσει η εμφάνιση. Δώστε σε ανθρώπους συγκεκριμένες αποστολές, όπως να εντοπίσουν μια υπηρεσία, να συγκρίνουν δύο επιλογές ή να στείλουν μήνυμα. Παρατηρήστε πού διστάζουν, τι θεωρούν κλικ και ποιες λέξεις δεν καταλαβαίνουν. Σημειώστε τις δυσκολίες χωρίς να τους καθοδηγείτε διαρκώς. Ακόμη και μικρή δοκιμή μπορεί να αναδείξει σοβαρά εμπόδια, χωρίς όμως να αποτελεί στατιστική εγγύηση για όλους τους επισκέπτες. Οι αλλαγές πρέπει να αξιολογούνται ξανά μετά την εφαρμογή τους.
Βήμα όγδοο: παραδίδουμε κανόνες και όχι μόνο εικόνες
Ένας σχεδιασμός ολοκληρώνεται καλύτερα όταν συνοδεύεται από κανόνες για τυπογραφία, κουμπιά, φόρμες, μηνύματα και διαφορετικές καταστάσεις της διεπαφής. Οι συντάκτες πρέπει να γνωρίζουν πώς να προσθέτουν κείμενο χωρίς να καταστρέφουν την ιεράρχηση, ενώ οι τεχνικοί χρειάζονται σαφείς οδηγίες για διαδραστικές συμπεριφορές. Προβλέψτε διαδικασία διορθώσεων μετά τη δημοσίευση. Εάν αλλάζουν συχνά οι υπηρεσίες, το σύστημα πρέπει να δέχεται αυτές τις αλλαγές χωρίς κάθε νέα σελίδα να σχεδιάζεται από την αρχή. Αυτή είναι μια πρακτική ένδειξη ότι η δουλειά έγινε ως σύστημα και όχι ως μεμονωμένη εικόνα.
Η σχέση μορφής και περιεχομένου στην ίδια σελίδα
Μια επικεφαλίδα πρέπει να περιγράφει την ενότητα που ακολουθεί, ενώ ένα κουμπί χρειάζεται να αποκαλύπτει τι ενέργεια θα προκαλέσει. Αν η ομάδα γράφει αόριστους τίτλους όπως «Λύσεις για όλους», ο σχεδιαστής δεν μπορεί να διορθώσει μόνο με την εμφάνιση την απουσία πληροφορίας. Δοκιμάστε να διαβάσετε τη σελίδα χωρίς εικόνες: παραμένει κατανοητό τι προσφέρει και πώς χρησιμοποιείται; Αν όχι, ξαναδείτε το κείμενο και τη δομή. Η ισχυρή συνεργασία συντάκτη και σχεδιαστή βοηθά το εικαστικό σύστημα να υποστηρίζει το νόημα, αντί να το καλύπτει.
Ένα παράδειγμα ολοκληρωμένης διαδρομής
Φανταστείτε ότι ένας επισκέπτης χρειάζεται να κλείσει ενημερωτικό ραντεβού. Πρώτα πρέπει να αναγνωρίζει την υπηρεσία, ύστερα να καταλαβαίνει για ποιους είναι κατάλληλη και στη συνέχεια να βλέπει τις διαθέσιμες επιλογές επικοινωνίας. Αν η φόρμα ζητά άσχετες πληροφορίες ή το μήνυμα επιβεβαίωσης είναι ασαφές, η διαδρομή παραμένει προβληματική ακόμη κι αν τα στοιχεία φαίνονται όμορφα. Σχεδιάστε τόσο την κανονική πορεία όσο και την περίπτωση λανθασμένου πεδίου ή μη διαθέσιμης υπηρεσίας. Αυτό το μικρό παράδειγμα δείχνει γιατί ο σχεδιασμός αφορά τη συμπεριφορά και όχι μόνο τη διάταξη.
Κριτήρια μάθησης για όσους ξεκινούν τώρα
Ένας αρχάριος μπορεί να αξιολογήσει τη δική του σελίδα με απλές αποστολές: μπορεί ένας ξένος να ονομάσει τον σκοπό της; εντοπίζει το κατάλληλο μενού χωρίς βοήθεια; συμπληρώνει τη φόρμα χωρίς αβεβαιότητα; καταλαβαίνει ένα σφάλμα; μπορεί να χρησιμοποιήσει το πληκτρολόγιο; Κρατήστε σημειώσεις και αναθεωρήστε συγκεκριμένα σημεία αντί να αλλάζετε ολόκληρη την εμφάνιση. Η επανάληψη αυτής της διαδικασίας δημιουργεί πραγματική γνώση σχεδιασμού. Μελετάμε πώς λειτουργεί η σελίδα για ανθρώπους, όχι μόνο αν μοιάζει με ένα δημοφιλές παράδειγμα.
Στάδια και σημεία ελέγχου
- Ερώτημα επισκέπτη Καταγράψτε τι πρέπει να βρει
- Δομή Οργανώστε θέματα και μενού
- Σκελετός Δοκιμάστε τη σειρά πληροφοριών
- Εμφάνιση Καθορίστε ιεράρχηση και αναγνωσιμότητα
- Έλεγχος Παρατηρήστε ολοκλήρωση πραγματικών εργασιών
Για πιο συστηματικό έλεγχο, οι WCAG (Οδηγίες Προσβασιμότητας Περιεχομένου Ιστού, Web Content Accessibility Guidelines) της κοινοπραξίας W3C (Παγκόσμια Κοινοπραξία Ιστού, World Wide Web Consortium) λειτουργούν ως διεθνές πλαίσιο απαιτήσεων. Δεν αρκεί όμως η επίκληση του ονόματός τους χωρίς δοκιμή.
Ερωτήσεις κατανόησης
Τι είναι ο σχεδιασμός ιστοσελίδας;
Είναι η οργάνωση περιεχομένου, εμφάνισης και αλληλεπίδρασης ώστε ο επισκέπτης να ολοκληρώνει μια ενέργεια χωρίς περιττό εμπόδιο.
Πώς οργανώνουμε το περιεχόμενο;
Με βάση τις ανάγκες του κοινού και την αρχιτεκτονική πληροφοριών. Οι τίτλοι πρέπει να περιγράφουν αυτό που βρίσκεται πραγματικά πίσω τους.
Γιατί προηγείται ο σκελετός σελίδων;
Επειδή δοκιμάζει τη θέση και τη σειρά των πληροφοριών πριν γίνουν ακριβές οι αλλαγές λόγω έτοιμης εικαστικής ή τεχνικής υλοποίησης.
Τι σημαίνει οπτική ιεράρχηση;
Ο τρόπος με τον οποίο μέγεθος, διάταξη και αντίθεση βοηθούν τον άνθρωπο να ξεχωρίζει την κύρια πληροφορία από τη συμπληρωματική.
Πώς ελέγχουμε τη χρηστικότητα;
Με παρατήρηση συγκεκριμένων εργασιών σε λειτουργικές σελίδες και επανάληψη των ελέγχων μετά από διορθώσεις. Οι προσωπικές προτιμήσεις δεν αρκούν.
Πώς αλλάζει ο σχεδιασμός για κινητά;
Αναδιοργανώνονται τα στοιχεία ώστε να είναι αναγνώσιμα και εύκολα στην αφή, χωρίς να εξαφανίζονται κρίσιμες πληροφορίες ή λειτουργίες.
Περαιτέρω σχετικά θέματα
Για συμπληρωματική εμβάθυνση, δείτε οργάνωση σχεδιασμού · τεχνικά βήματα δημιουργίας · εφαρμογή σε τοπική επιχείρηση.