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

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

Λίστα ελέγχου στόχου και κοινού

• Ποια είναι η βασική ενέργεια που θέλουμε από τον επισκέπτη;
• Ποια κοινά έχουν διαφορετικές ανάγκες;
• Ποια πληροφορία πρέπει να βρίσκεται άμεσα στην αρχική σελίδα;
• Ποια στοιχεία αξιοπιστίας είναι διαθέσιμα ήδη;
• Ποια αποτελέσματα θα μετρηθούν μετά τη δημοσίευση;

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

Λίστα ελέγχου αρχιτεκτονικής πληροφορίας

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

Λίστα ελέγχου περιεχομένου και ευθύνης παραγωγής

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

Λίστα ελέγχου οπτικής ταυτότητας

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

Λίστα ελέγχου κινητών συσκευών και προσβασιμότητας

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

Λίστα ελέγχου λειτουργιών και εξαρτήσεων

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

Λίστα ελέγχου προϋπολογισμού και αναθεωρήσεων

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

Πότε είναι ώριμο το έργο να ξεκινήσει

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

Οι ερωτήσεις που κλείνουν το εύρος έργου

• Ποια σελίδα ή ροή έχει τη μεγαλύτερη επιχειρηματική αξία;
• Ποιος είναι υπεύθυνος για το περιεχόμενο και τις εγκρίσεις;
• Ποιες λειτουργίες είναι υποχρεωτικές στην πρώτη έκδοση;
• Ποιες εξωτερικές υπηρεσίες ή λογαριασμοί απαιτούνται;
• Ποιο είναι το κριτήριο ότι ο σχεδιασμός μπορεί να παραδοθεί και να περάσει σε υλοποίηση;

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

Συνάντηση εργασίας απαιτήσεων πριν από το πρώτο προσχέδιο διάταξης

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

Κριτήρια αποδοχής για να μην εγκρίνεται μόνο «το όμορφο»

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

Παραδοτέα της φάσης προδιαγραφών

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

Έλεγχος συνέπειας πριν ξεκινήσει η ανάπτυξη

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

Πότε κλείνει πραγματικά η φάση σχεδιασμού

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