καρτα σχεδιασμός ιστοσελίδων: απαιτήσεις πριν σχεδιαστεί ένα σύστημα καρτών
Η κάρτα σε μια ιστοσελίδα είναι επαναχρησιμοποιούμενο τμήμα διεπαφής που ομαδοποιεί σχετικές πληροφορίες και, συχνά, μια επόμενη ενέργεια. Μπορεί να παρουσιάζει υπηρεσία, προϊόν, άρθρο, έργο, μέλος ομάδας ή άλλη οντότητα. Το σωστό σύστημα καρτών δεν ξεκινά από σκιά, γωνίες και χρώμα. Ξεκινά από το περιεχόμενο: ποια δεδομένα υπάρχουν, ποια είναι υποχρεωτικά, ποια είναι προαιρετικά, πόσο μπορεί να μεγαλώσει κάθε πεδίο και τι πρέπει να κάνει ο χρήστης αφού διαβάσει την κάρτα.
Πρώτη απαίτηση: ορίστε τι εκπροσωπεί η κάρτα
Μια κάρτα περιεχομένου πρέπει να αντιστοιχεί σε σαφή μονάδα πληροφορίας. Αν άλλοτε εμφανίζει υπηρεσία, άλλοτε προσφορά και άλλοτε άρθρο με εντελώς διαφορετική δομή, η επαναχρησιμοποίηση γίνεται τεχνητή. Πριν σχεδιαστεί το στοιχείο, γράψτε τον τύπο περιεχομένου και τα πεδία του: τίτλος, σύντομη περιγραφή, εικόνα, ετικέτα, τιμή, κατάσταση, ημερομηνία ή σύνδεσμος, μόνο όπου έχουν πραγματικό νόημα. Έτσι το οπτικό πρότυπο χτίζεται πάνω σε σταθερό πληροφοριακό μοντέλο.
Checklist απαιτήσεων για κάθε τύπο κάρτας
| Ερώτηση | Απόφαση πριν τη σχεδίαση | Κίνδυνος αν μείνει ασαφής |
|---|---|---|
| Τι παρουσιάζει; | Ένας σαφής τύπος περιεχομένου | Ασυνεπείς κάρτες και εξαιρέσεις |
| Ποια πεδία είναι υποχρεωτικά; | Ελάχιστο κοινό σύνολο δεδομένων | Κενά ή διαφορετικά ύψη χωρίς λόγο |
| Ποια ενέργεια κάνει ο χρήστης; | Μία κύρια ενέργεια ανά περίπτωση | Ανταγωνιστικά κουμπιά και σύγχυση |
| Πού εμφανίζεται; | Αρχική, κατηγορία, αναζήτηση, σχετικό περιεχόμενο | Σχεδίαση που δουλεύει μόνο σε μία σελίδα |
| Πόσο περιεχόμενο χωρά; | Όρια τίτλου, περιγραφής και εικόνας | Σπασμένη οπτική ιεραρχία |
Η οπτική ιεραρχία πρέπει να ακολουθεί τη σημασία
Η οπτική ιεραρχία καθορίζει τι βλέπει πρώτα ο επισκέπτης και τι καταλαβαίνει ως κύρια πληροφορία. Σε μια κάρτα υπηρεσίας μπορεί να προηγείται ο τίτλος και να ακολουθεί σύντομη περιγραφή. Σε κάρτα προϊόντος η εικόνα και η βασική εμπορική πληροφορία μπορεί να έχουν μεγαλύτερο βάρος. Δεν είναι σωστό όλα τα στοιχεία να φωνάζουν το ίδιο. Η τυπογραφία, τα κενά, η θέση της εικόνας και η έμφαση στην ενέργεια πρέπει να υπηρετούν το συγκεκριμένο περιεχόμενο.
Η γενικότερη ενότητα για σχεδιασμό ιστοσελίδων βοηθά να τοποθετηθεί η κάρτα μέσα στη συνολική γλώσσα της ιστοσελίδας και όχι ως απομονωμένο γραφικό στοιχείο.
Πλέγμα καρτών: πόσες χωρούν πραγματικά;
Το πλέγμα καρτών πρέπει να προσαρμόζεται στον διαθέσιμο χώρο και στο είδος της πληροφορίας. Τρεις ή τέσσερις στήλες σε μεγάλη οθόνη μπορεί να φαίνονται ισορροπημένες, αλλά η ίδια λογική δεν μεταφέρεται αυτούσια σε μικρό πλάτος. Η προσαρμοστική διάταξη πρέπει να διατηρεί αναγνωσιμότητα και εύκολη αλληλεπίδραση, όχι απλώς να μικραίνει τα πάντα. Αν ο τίτλος μιας κάρτας μπορεί να είναι μεγάλος, το σύστημα πρέπει να το γνωρίζει από πριν και να μην βασίζεται σε ιδανικό δείγμα δύο λέξεων.
Εικόνες: αναλογία, περικοπή και εναλλακτικές περιπτώσεις
Αν η κάρτα περιλαμβάνει εικόνα, ορίστε αναλογία και κανόνα περικοπής. Οι πραγματικές εικόνες δεν έχουν πάντα ίδιο σχήμα ούτε ίδιο σημείο ενδιαφέροντος. Χρειάζεται επίσης συμπεριφορά όταν δεν υπάρχει εικόνα: χρησιμοποιείται ουδέτερο πλαίσιο, διαφορετική παραλλαγή κάρτας ή δεν εμφανίζεται καθόλου το οπτικό πεδίο; Η απάντηση πρέπει να είναι μέρος των απαιτήσεων. Διαφορετικά, το πρώτο πραγματικό σύνολο δεδομένων θα αναγκάσει τον σχεδιασμό να γεμίσει εξαιρέσεις.
Μία κύρια ενέργεια, σαφής περιοχή αλληλεπίδρασης
Πρέπει να αποφασιστεί αν ολόκληρη η κάρτα είναι σύνδεσμος ή αν υπάρχει συγκεκριμένο κουμπί. Αν υπάρχουν δευτερεύουσες ενέργειες, όπως αποθήκευση ή σύγκριση, χρειάζεται να ξεχωρίζουν χωρίς να δημιουργούν παγίδες αλληλεπίδρασης. Η συμπεριφορά με πληκτρολόγιο και η ορατή εστίαση πρέπει επίσης να προβλεφθούν. Όταν όλη η κάρτα είναι ενεργή, πρέπει να είναι ξεκάθαρο πού οδηγεί. Όταν έχει πολλά χειριστήρια, η δομή πρέπει να παραμένει κατανοητή και όχι να μετατρέπεται σε μικρό, πυκνό πίνακα ελέγχου.
Καταστάσεις που συχνά ξεχνιούνται
Ένα σχέδιο με μία τέλεια κάρτα δεν είναι ακόμη ολοκληρωμένο σύστημα. Χρειάζονται παραδείγματα για μεγάλους τίτλους, μικρές περιγραφές, έλλειψη εικόνας, μη διαθέσιμη ενέργεια, ένδειξη νέου στοιχείου, εξαντλημένο προϊόν ή άλλη κατάσταση που υπάρχει στα δεδομένα. Επίσης πρέπει να φανεί τι συμβαίνει όταν υπάρχουν μία, δύο ή πολλές κάρτες. Η ευρύτερη προσέγγιση σχεδιασμού ιστοσελίδας έχει νόημα όταν αυτές οι καταστάσεις συνδέονται με κοινό σύστημα στοιχείων.
Το περιεχόμενο πρέπει να έχει κανόνες, όχι να διορθώνεται οπτικά κάθε φορά
Αν κάθε συντάκτης γράφει περιγραφές διαφορετικού μήκους, το πλέγμα θα αποκτήσει ασυνέπεια. Είναι προτιμότερο να οριστεί τι πληροφορία ανήκει στην κάρτα και τι μένει στη σελίδα λεπτομέρειας. Μια κάρτα δεν πρέπει να προσπαθεί να χωρέσει όλη την ιστορία. Ο τίτλος χρειάζεται να είναι συγκεκριμένος, η περιγραφή να βοηθά στη διάκριση και η ενέργεια να λέει τι ακολουθεί. Η συνέπεια του περιεχομένου είναι σχεδιαστική απαίτηση, όχι απλώς θέμα επιμέλειας κειμένου.
Εξαρτήσεις από σύστημα διαχείρισης και δεδομένα
Αν οι κάρτες δημιουργούνται αυτόματα από σύστημα διαχείρισης, πρέπει να αντιστοιχιστούν τα πεδία της κάρτας με τα πραγματικά δεδομένα. Ποιο πεδίο είναι ο τίτλος; Από πού έρχεται η εικόνα; Πώς παράγεται η σύντομη περιγραφή; Υπάρχει κατηγορία ή κατάσταση; Τι γίνεται όταν μια τιμή λείπει; Αυτές οι ερωτήσεις συνδέουν τον σχεδιασμό με την υλοποίηση. Αν παραμείνουν ανοιχτές, το τελικό στοιχείο μπορεί να απαιτεί χειροκίνητες παρεμβάσεις σε κάθε καταχώριση.
Πότε χρειάζεται νέα παραλλαγή και πότε όχι
Ένα συχνό λάθος είναι να δημιουργείται διαφορετική κάρτα για κάθε μικρή διαφοροποίηση περιεχομένου. Αυτό αυξάνει γρήγορα τον αριθμό των εξαιρέσεων και δυσκολεύει τη συντήρηση. Νέα παραλλαγή έχει νόημα όταν αλλάζει ουσιαστικά η πληροφοριακή προτεραιότητα ή η κύρια ενέργεια, όχι επειδή ένας τίτλος είναι μεγαλύτερος ή λείπει μια φωτογραφία. Για τις μικρές αποκλίσεις πρέπει να υπάρχουν κανόνες μέσα στο ίδιο στοιχείο. Αν, για παράδειγμα, μια κατηγορία χρειάζεται τιμή και μια άλλη όχι, μπορεί να προβλεφθεί προαιρετικό πεδίο. Αν όμως μια κάρτα πρέπει να υποστηρίζει εντελώς διαφορετική ροή, είναι καθαρότερο να αναγνωριστεί ως ξεχωριστό πρότυπο.
Πώς παραδίδεται σωστά ένα σύστημα καρτών
Η παράδοση πρέπει να περιλαμβάνει όχι μόνο μια εικόνα του «κανονικού» παραδείγματος, αλλά τις παραλλαγές, τις καταστάσεις, τους κανόνες κειμένου, τη συμπεριφορά σε διαφορετικά πλάτη και τη λογική αλληλεπίδρασης. Για τη συγκεκριμένη θεματική υπάρχει και η εσωτερική σελίδα κάρτα και σχεδιασμός ιστοσελίδων. Ο στόχος είναι ο επόμενος σχεδιαστής, προγραμματιστής ή συντάκτης να μπορεί να χρησιμοποιήσει το στοιχείο χωρίς να μαντεύει πώς πρέπει να συμπεριφερθεί.
Τελικό requirements checklist
- Ορίστε έναν σαφή τύπο περιεχομένου για κάθε οικογένεια καρτών.
- Καταγράψτε υποχρεωτικά και προαιρετικά πεδία.
- Ορίστε τη μία κύρια ενέργεια και τυχόν δευτερεύουσες.
- Προβλέψτε μεγάλα κείμενα, έλλειψη εικόνας και πραγματικές καταστάσεις.
- Σχεδιάστε το πλέγμα για μεγάλα και μικρά πλάτη.
- Συνδέστε τα στοιχεία της κάρτας με τα πραγματικά πεδία δεδομένων.
- Παραδώστε κανόνες χρήσης, όχι μόνο οπτικό παράδειγμα.
Ο καλός σχεδιασμός καρτών μειώνει τις εξαιρέσεις και κάνει το περιεχόμενο πιο εύκολο να σαρωθεί, να συγκριθεί και να συντηρηθεί. Η βασική αρχή είναι απλή: πρώτα ορίζονται πληροφορία, ενέργεια, καταστάσεις και εξαρτήσεις και μετά αποφασίζεται η οπτική μορφή. Έτσι η κάρτα γίνεται πραγματικό επαναχρησιμοποιούμενο στοιχείο του συστήματος και όχι ένα μεμονωμένο σχέδιο που λειτουργεί μόνο στο αρχικό δείγμα. Παράλληλα, η ομάδα αποκτά κοινό λεξιλόγιο για μελλοντικές επεκτάσεις και ελέγχους.