Πυκνότητα πληροφοριών στο B2B SaaS: Σχεδιασμός πινάκων εργαλείων για ισχυρούς χρήστες και αρχάριους
Πώς να σχεδιάσετε πυκνούς πίνακες εργαλείων και πίνακες B2B που οι ειδικοί μπορούν να σαρώσουν γρήγορα χωρίς να συντρίψουν νέους χρήστες: λειτουργίες πυκνότητας, ιεραρχία, προοδευτική αποκάλυψη.
Core Takeaway
Οι πυκνές διεπαφές δεν είναι το πρόβλημα. οι ανοργάνωτοι είναι. Οι ειδικοί θέλουν περισσότερες πληροφορίες ανά οθόνη, επομένως δώστε τους με ισχυρή ιεραρχία, σταθερή στοίχιση και γραφήματα που χρησιμοποιούν θέση και μήκος. Προστατέψτε τους αρχάριους με λογικές προεπιλογές και προοδευτική αποκάλυψη και αφήστε τους ανθρώπους να επιλέξουν ένα επίπεδο πυκνότητας, όπως κάνουν τα συστήματα σχεδιασμού όπως το Carbon για πίνακες.
Η πυκνότητα είναι ένα χαρακτηριστικό για τους ειδικούς
Τα άτομα που χρησιμοποιούν ένα εργαλείο B2B όλη την ημέρα, όπως αναλυτές, πράκτορες υποστήριξης και χειριστές, προτιμούν συχνά να βλέπουν περισσότερα ταυτόχρονα, επειδή η κύλιση και η εναλλαγή καρτελών τους κοστίζει χρόνο. Το να κάνουν τα πάντα ευρύχωρα για ένα καθαρό στιγμιότυπο οθόνης μπορεί να κάνει τη δουλειά τους πιο αργή. Ο στόχος είναι πληροφορίες που είναι πυκνές αλλά εύκολο να σαρωθούν.
Αφήστε τους ανθρώπους να επιλέξουν την πυκνότητα
Τα συστήματα σχεδίασης δημιουργούν πλέον πυκνότητα σε εξαρτήματα. Ο πίνακας δεδομένων Carbon της IBM, για παράδειγμα, προσφέρει πέντε ύψη σειρών, από πολύ μικρό (24px) για πολύ πυκνές διατάξεις έως εξαιρετικά μεγάλες (64px) για ευκολότερη σάρωση, με προεπιλογή το μεσαίο (40px).
- Προσφέρετε δύο ή τρεις ρυθμίσεις πυκνότητας, που θυμούνται ανά χρήστη.
- Αλλαγή απόστασης και ύψους σειρών, όχι μεγέθους γραμματοσειράς ή αντίθεσης.
- Διατηρήστε τους στόχους αφής αρκετά μεγάλους σε συσκευές αφής ανεξάρτητα από την πυκνότητα.
Η ιεραρχία κάνει την πυκνότητα ευανάγνωστη
Το Nielsen Norman Group ορίζει τους πίνακες εργαλείων ως οπτικοποιήσεις που παρέχουν με μια ματιά πληροφορίες στις οποίες οι άνθρωποι μπορούν να ενεργήσουν γρήγορα και συνιστά την κωδικοποίηση ποσοτήτων με μήκος και δισδιάστατη θέση, τις οποίες οι άνθρωποι διαβάζουν πιο γρήγορα. Στην πράξη: βάλτε τους λίγους αριθμούς που οδηγούν τις αποφάσεις στην κορυφή, ευθυγραμμίστε τα πάντα σε ένα πλέγμα, χρησιμοποιήστε χρώμα μόνο για νόημα (κατάσταση, ειδοποιήσεις) και στοιχίστε τους αριθμούς δεξιά ώστε να μπορούν να συγκριθούν.
Προστατέψτε τους αρχάριους χωρίς επιβράδυνση ειδικών
Η προοδευτική αποκάλυψη κρατά τις προηγμένες επιλογές διαθέσιμες αλλά απροσδόκητες. Ξεκινήστε νέους χρήστες με μια εστιασμένη προεπιλεγμένη προβολή, αφήστε τους να προσθέσουν στήλες, φίλτρα και γραφικά στοιχεία όπως τα χρειάζονται και αποθηκεύστε προβολές, ώστε οι ειδικοί να μπορούν να επιστρέψουν στην πυκνή τους εγκατάσταση αμέσως.
Κίνηση σε πυκνές διεπαφές
Σε οθόνες με πολλά δεδομένα, η κίνηση θα πρέπει να εξηγεί την αλλαγή, όχι να διακοσμεί: επισημάνετε μια τιμή που μόλις ενημερώθηκε, κινήστε μια σειρά στη νέα ταξινομημένη της θέση ή εμφανίστε μια μετάβαση γραφήματος, ώστε οι χρήστες να μπορούν να ακολουθήσουν αυτό που μετακινήθηκε. Κρατήστε το σύντομο και αποφύγετε τη συνεχή κινούμενη εικόνα που ανταγωνίζεται τα δεδομένα.
Κλειδί Principles για να θυμάστε
- Οι ειδικοί επωφελούνται από τις πυκνές οθόνες. η αποδιοργάνωση είναι το πραγματικό πρόβλημα
- Προσφέρετε ρυθμίσεις πυκνότητας αλλάζοντας απόσταση, όχι μέγεθος τύπου ή αντίθεση
- Χρησιμοποιήστε το μήκος και τη θέση για αριθμούς. χρώμα μόνο για νόημα
- Η προοδευτική αποκάλυψη προστατεύει τους αρχάριους
- Χρησιμοποιήστε την κίνηση για να εξηγήσετε τις αλλαγές στα δεδομένα, όχι για να διακοσμήσετε
Συχνές Ερωτήσεις
Πηγές
- Data table usage — Carbon Design System (IBM)
- Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
- Progressive Disclosure — Nielsen Norman Group