Design bedre datatabeller

Dårlige borde. Hvor gik de galt?

Efter at have været brød og smør på nettet i det meste af sin tidlige historie, blev tabeller kastet til side af mange designere til nyere, mere trendy layout. Men selvom de muligvis får færre optrædener på nettet i disse dage, indsamler og organiserer datatabeller stadig meget af den information, vi interagerer med på den daglige basis.

For eksempel er der, hvad jeg betragter som mor til alle borde: De Forenede Staters "harmoniserede toldplan", en tabel, der strækker sig over 3.550 sider og viser hver enkelt vare, der kan importeres til USA, inklusive så spændende poster som "Herre eller drenge's frakker, carcoats, kapper, kappe, anorakker (inklusive ski-jakker), windbreakers og lignende artikler (inklusive polstret, ærmeløs jakke)."

Hvad er alligevel en carcoat?

Den ire, der er rejst af datatabeller, skyldes uden tvivl, hvor forfærdelige de kan se ud, når de ikke er godt designet. Designet af en tabel er linchpin: hvis det er gjort rigtigt, gør det komplekse data let at scanne og sammenligne. Hvis det er foretaget forkert, kan det gøre oplysninger helt uforståelige.

Så lad os gøre det rigtigt, ikke?

Kend dine tal

Ikke alle numre blev oprettet lige. Jeg taler ikke om π og ∞ (selvom jeg ofte gør det, på fester); Jeg taler om tal, der enten er tabelformede eller gamle, enten foringer eller proportioner.

Her er en hurtig illustration af forskellen mellem oldstyle og foringsfigurer.

Oldstyle vs. foringer

Oldstyle-figurer ser pæne ud i sætninger, hvor de bedre matcher størrelsen og afstanden på små bogstaver; foringsfigurer er mere ensartede og forstærker bordets netlignende struktur.

Forskellen mellem forholdsmæssige og tabelformede tal er ikke så indlysende:

Proportionelle kontra tabelformularer

Proportionelle figurer er designet til at matche farve - det vil sige den generelle størrelse og afstand - på skrifttypen. Tabularfigurer er derimod alle ens størrelse, så kolonnerne med numre stiller ordentligt op. Selvom forskellen muligvis ikke synes stor på skalaen fra en eller to linjer, gør brug af tabelfigurer scanning af store tabeller markant lettere og mindre tilbøjelige til fejl.

En teknisk note om anvendelse af tabletter foringer

Når du designer, skal du udføre lidt arbejde for at sikre, at de tal, du bruger, er de rigtige (tabelforinger er normalt ikke standard). Adobe Products har et "opentype" -panel, der kan bruges til at indstille tallene korrekt, og CSS giver en let kryptisk syntaks til aktivering af denne funktion. Ud over det bør nogle grundlæggende googling føre dig ned ad den rigtige vej.

Men nu for den dårlige nyhed: ikke alle skrifttyper har ægte tabulære foringsfigurer tilgængelige. De der har tendens til at være temmelig dyre. Der er nogle få undtagelser: Den fremragende Work Sans er et gratis skrifttype, der har ægte tabelformede foringsfigurer.

Hvis du ikke kan finde et passende skrifttype, der har tabellede foringstal, er en god tilbagefald monospace-skrifttyper - mens de har en mere "kildekode" -udseende, er de altid velegnede til at vise numre i tabeller. Derudover har det nye Apple-systems standardtypeskrift San Francisco fremragende tabelforinger og ser godt ud i små størrelser.

Justeringssager

3½ enkle regler, der skal følges:

1. Numeriske data er højrejusteret
2. Tekstdata er venstrejusteret
3. Overskrifter er på linje med deres data
3½. Brug ikke centrumjustering.

Liste over amerikanske stater efter historisk befolkning - Wikipedia

Numeriske data læses fra højre til venstre; det vil sige, vi sammenligner tal ved først at se på deres ens ciffer, derefter deres tiere, derefter deres hundreder osv. Dette er også, hvordan de fleste lærer aritmetik - start til højre og flyt venstre, med cifre, mens du går [1]. Derfor skal tabeller holde numeriske data retjusteret.

Tekstdata læses (på engelsk) fra venstre til højre. Sammenligning af tekstelementer udføres typisk ved at sortere i alfabetisk rækkefølge: hvis to poster starter med det samme bogstav, bruges det andet bogstav osv. Forsøg på at hurtigt scanne tekst kan være irriterende, hvis det ikke er venstrejusteret.

Overskrifter, generelt, bør bære den justering, deres data har. Dette holder bordets lodrette linjer rene og giver konsistens og kontekst.

Centerjustering får tabellets linjer til at blive “ujævn”, hvilket gør det meget sværere at scanne poster, hvilket ofte kræver ekstra skillelinjer og grafiske elementer.

Konsekvente betydelige tal = Bedre justering

En nem måde at holde dine tabeller korrekt justeret på er at holde det samme antal markante tal - normalt antallet af cifre efter decimal - konsistent i hver kolonne. Væsentlige tal er et helt kaninhul i et emne, så jeg vil holde mine råd her kort: jo færre sig figen du kan klare dig med, jo bedre.

Færre, klarere etiketter

Det er afgørende at levere etiketter til dine data. Disse stykker med ledsagende kontekst tillader, at en datatabel læses af et bredere publikum under et bredere sæt af omstændigheder.

Prognose for oversvømmelsesstadie i Mississippi-floden - NOAA

Titel

Det lyder måske som konventionel visdom, men at give din datatabel en klar og kortfattet titel er lige så vigtig som enhver anden designbeslutning, du tager. Med en god titel er tabeller bærbare: de kan bruges i en række forskellige sammenhænge samt citeres fra eksterne kilder.

Enheder

Den mest almindelige etiket, der bruges i tabeller, er måleenheden til dataene; ofte gentages det sammen med hvert enkelt datapunkt. I stedet for at gentage etiketten, skal du kun medtage det med det første datapunkt i hver kolonne.

headers

Hold overskrifter så korte som muligt; udformningen af ​​datatabellen skal fokuseres omkring selve dataene, og lange overskriftsetiketter kan besætte en masse visuel plads.

Så lidt blæk som muligt

Når man beslutter, hvordan man skal style de grafiske elementer i et bord, skal målet altid være at reducere bordets fodaftryk uden at miste strukturel tro. En af måderne, du kan udrette på dette, er ved at bruge så lidt "blæk" som muligt - det er, når det er muligt, vælg ikke at style et element.

National League Batting Statistics - BaseballReference

Regler

Hvis du har justeret datapunkterne korrekt i din tabel, bliver regler overflødige. Den primære fordel, de giver, er ved at give dig mulighed for at reducere mellemrummet mellem elementerne, mens du stadig kan skelne mellem elementerne. Selv når de bruges, skal regler være ekstremt lette for ikke at forstyrre hurtig scanning.

Horisontale regler er de mest nyttige, da de giver dig mulighed for markant at reducere det lodrette rum, der er besat af lange borde, hvilket gør hurtigere arbejde med at sammenligne mange værdier eller se tendenser over tid.

En ikke-underbygget opfattelse, jeg har om regler, er, at zebra striping er dårlig. Virkelig, virkelig dårligt. Tag det eller forlad det.

Baggrundsbilleder

Baggrundsbilleder er mest nyttige, når du angiver forskelle i datadomænet: skifte mellem for eksempel værdier og summer eller gennemsnit.
Fremhævelse af værdier, tilvejebringelse af ekstra kontekst til data eller indikering af ændringer i værdier fra tidligere perioder kan gøres uden baggrunde ved hjælp af grafiske elementer som ✻, † (en af ​​mine favoritter) eller ▵.

Derudover skal tabellerne være monokratiske. Brug af farver til at give organisatorisk kontekst eller tilføjet mening øger sandsynligheden for fejlagtig fortolkning eller fejl og forårsager brugervenlighedsproblemer for dem med nedsat syn.

Afslutningsvis

Tabeller er måske kedelige, men de er et så stort element i ethvert datarigt dokument, at de er værd at hver enhed designtankegang, vi kan anvende til dem. Ved at designe mere effektive, klarere og lettere at bruge tabeller kan du forbedre den ofte smertefulde oplevelse af at analysere og forstå store datasæt.

Yderligere læsning & inspiration

FiveThirtyEight har altid været en stor inspirationskilde - de sætter deres numeriske data i et skrifttype kaldet Decima Mono, som specifikt er designet til at passe masser af data i et lille rum.

Buttericks praktiske typografi er min go-to for alle ting typografisk, og den slags reference, du opbevarer flere kopier af - det er så praktisk!

Til sidst ville ingen artikel om data-design være komplet uden en Edward Tufte-råb. Hans indsigtsfulde skrivning om design er uundværlig.

[1] For andre interessante tilgange til aritmetik, kan du tjekke, hvordan japanske børn bruger en Soroban, eller hvordan multiplikation af gitter fungerer.

Særlig tak til kontur, Nathan D Huening, Robin Rendle, Scott Dawson, Karen Bachmann og Kelly Jepsen for at have fanget fejl i denne historie.