Σχεδιάστε καλύτερους πίνακες δεδομένων

Κακή πίνακες. Πού πήγαν στραβά;

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

Για παράδειγμα, πιστεύω ότι είναι η μητέρα όλων των πινάκων: το "Εναρμονισμένο Χρονοδιάγραμμα των Ηνωμένων Πολιτειών", ένας πίνακας που εκτείνεται σε 3.550 σελίδες και απαριθμεί κάθε αγαθό που μπορεί να εισαχθεί στις ΗΠΑ, συμπεριλαμβανομένων τέτοιων συναρπαστικών καταχωρήσεων "Παντελόνια ανδρικά ή αγόρια, καροτσάκια, καπέλα, μανδύες, άνορακ (στα οποία περιλαμβάνονται και τα σακάκια), ανεμόσκαλες και παρόμοια είδη (συμπεριλαμβανομένων των σακακιών με αμάνικα)."

Τι είναι καουτσούκ, ούτως ή άλλως;

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

Ας το κάνουμε σωστό, έτσι;

Γνωρίστε τους αριθμούς σας

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

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

Oldstyle εναντίον στοιχείων επένδυσης

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

Η διαφορά μεταξύ αναλογικών και εικονογραμμάτων δεν είναι τόσο προφανής:

Αναλογικοί και πίνακες

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

Μια τεχνική σημείωση σχετικά με τη χρήση των πινακοποιημένων στοιχείων επένδυσης

Όταν σχεδιάζετε, θα χρειαστεί να κάνετε κάποια εργασία για να βεβαιωθείτε ότι τα ψηφία που χρησιμοποιείτε είναι τα σωστά (οι πίνακες των ετικετών δεν είναι τυπικά οι προεπιλεγμένες). Τα προϊόντα της Adobe έχουν έναν πίνακα "opentype" που μπορεί να χρησιμοποιηθεί για να ρυθμίσετε σωστά τα στοιχεία και το CSS παρέχει μια ελαφρώς κρυπτική σύνταξη για την ενεργοποίηση αυτής της δυνατότητας. Πέρα από αυτό, μερικές βασικές googling θα πρέπει να σας οδηγήσει κάτω από το σωστό μονοπάτι.

Αλλά τώρα για τα κακά νέα: δεν είναι όλα τα γραμματοσειρά να έχουν αληθινά στοιχεία ταμπλέτας επένδυσης διαθέσιμα. Αυτά που τείνουν να είναι αρκετά ακριβό. Υπάρχουν μερικές εξαιρέσεις: Το άριστο Work Sans είναι ένα ελεύθερο γραμματοσειρά που έχει αληθινά φιγούρα.

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

Θέματα ευθυγράμμισης

3½ απλοί κανόνες που πρέπει να ακολουθήσετε:

1. Τα αριθμητικά δεδομένα ευθυγραμμίζονται δεξιά
2. Τα δεδομένα κειμένου είναι αριστερά ευθυγραμμισμένα
3. Οι κεφαλίδες είναι ευθυγραμμισμένες με τα δεδομένα τους
3½. Μην χρησιμοποιείτε το κέντρο ευθυγράμμισης.

Κατάλογος των ΗΠΑ αναφέρει ιστορικό πληθυσμό - Wikipedia

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

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

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

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

Συνεπείς σημαντικές φιγούρες = Καλύτερη ευθυγράμμιση

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

Λιγότερες, σαφέστερες ετικέτες

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

Πρόγνωση του σταδίου του ποταμού Μισισιπή - NOAA

Τίτλος

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

Μονάδες

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

Κεφαλίδες

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

Ως ελάχιστο μελάνι

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

2016 Εθνική Λίγκα Στατιστικά - BattleReference

Κανόνες

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

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

Μία απροκάλυπτη γνώμη που έχω σχετικά με τους κανόνες είναι ότι η ρίψη ζέβρας είναι κακή. Πραγματικά, πραγματικά κακό. Πάρτε το ή αφήστε το.

Φόντα

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

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

Συμπερασματικά

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

Περαιτέρω ανάγνωση και έμπνευση

Το FiveThirtyEight ήταν πάντα μια μεγάλη πηγή έμπνευσης - έβαλαν τα αριθμητικά τους δεδομένα σε μια γραμματοσειρά που ονομάζεται Decima Mono, η οποία έχει σχεδιαστεί ειδικά για να ταιριάζει σε πολλά δεδομένα σε ένα μικρό χώρο.

Η πρακτική τυπογραφία του Butterick είναι η πάλη μου για όλα τα τυπογραφικά πράγματα και το είδος αναφοράς που κρατάτε πολλαπλά αντίγραφα - είναι τόσο πρακτικό!

Τέλος, κανένα άρθρο σχετικά με το σχεδιασμό δεδομένων δεν θα ήταν πλήρες χωρίς μια φωνή του Edward Tufte. Η διορατική γραφή του για το σχεδιασμό είναι απαραίτητη.

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

Ειδικές ευχαριστίες στους Kontur, Nathan D Huening, Robin Rendle, Scott Dawson, Karen Bachmann και Kelly Jepsen για τα λάθη στην ιστορία.