Σχεδιασμός ιστοσελίδων: οι απαιτήσεις που πρέπει να οριστούν πριν αρχίσει η υλοποίηση

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

Ορίστε πρώτα τον επιχειρηματικό στόχο

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

Χαρτογραφήστε τους τύπους χρηστών και τις ερωτήσεις τους

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

Καθορίστε το περιεχόμενο πριν παγιωθεί η διάταξη

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

Λίστα απαιτήσεων πριν ξεκινήσει το έργο

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

Η οπτική ιεραρχία υπηρετεί την απόφαση

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

Σχεδιασμός για κινητό από την αρχή

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

Οι λειτουργίες χρειάζονται καταστάσεις και εξαιρέσεις

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

Συνδέστε τις απαιτήσεις με σχετικές ενότητες

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

Πώς αποφεύγεται η ανεξέλεγκτη διεύρυνση του έργου

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

Προσβασιμότητα ως απαίτηση και όχι ως μεταγενέστερη διόρθωση

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

Σύστημα σχεδιασμού για συνέπεια στις μελλοντικές σελίδες

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

Έλεγχος σχεδίασης με σενάρια, όχι μόνο με στατικές εικόνες

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

Πριν περάσετε από τη σχεδίαση στην ανάπτυξη

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

Ο καλός σχεδιασμός μειώνει τις αποφάσεις του χρήστη

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