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

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

Εδώ, διερευνάμε πότε είναι κατάλληλο στο σχεδιασμό ιστοσελίδων να χρησιμοποιεί κάρτες έναντι λιστών και αντίστροφα.

Τι είναι μια κάρτα; Τι είναι μια λίστα;

Για να μας βοηθήσετε να κατανοήσουμε ότι η χρήση μιας κάρτας ή μιας λίστας είναι πιο κατάλληλη για σκοπούς UX, μας βοηθάει να κατανοήσουμε πρώτα τι είναι και τι κάνει ο καθένας (ή ότι πρέπει να κάνει).

Μια κάρτα είναι ένα δοχείο που εμφανίζει διάφορα bits σχετικών πληροφοριών, από τις οποίες οι χρήστες μπορούν να πάρουν ακόμα περισσότερες πληροφορίες. Ενώ είναι ακόμα ένα προϊόν επίπεδου σχεδιασμού, είναι πιο κατάλληλα ταξινομημένο ως Flat Design 2.0, καθώς συνήθως έχει ελαφριά 3D εφέ, όπως σκιά σταγόνες για να δείξει δυνατότητα κλικ. Τα εφέ 3D, όπως το οπτικό βάθος, λειτουργούν ως σημαίνοντες για τους χρήστες, λέγοντάς τους ότι μπορούν να κάνουν κλικ για περισσότερες πληροφορίες.

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

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

Πότε να χρησιμοποιείτε κάρτες

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

Για περιήγηση σε πληροφορίες (σε αντίθεση με την αναζήτηση)

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

cards03

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

Για ομάδες διαφορετικών αντικειμένων

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

κάρτες02

Δεδομένου ότι οι κάρτες χρησιμοποιούν σύνορα για να καθορίσουν οπτικά όρια, είναι ιδανικά όταν πρόκειται για την ομαδοποίηση ανόμοιων στοιχείων.

cards04
cards01

Πότε πρέπει να χρησιμοποιείτε λίστες

Οι λίστες μπορούν να είναι λίγο πιο απλές από τις κάρτες, ίσως επειδή έχουν περάσει περισσότερο στο σχεδιασμό ιστοσελίδων. Ως αποτέλεσμα, τείνει να είναι ευκολότερο να προσδιοριστεί πότε να τα χρησιμοποιήσετε καλά.

Για αποτελεσματική σάρωση των ματιών

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

list04

Για μικρότερες οθόνες

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

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

list03a

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

list02
list01

Κάρτες έναντι λιστών

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

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

Θυμηθείτε αυτή τη ζωτική διάκριση μεταξύ των δύο, και θα οργανώσετε το περιεχόμενο με εξαιρετική σχεδίαση.