Het systeem waarmee A.R.T. of Data data in beeld brengt. Het legt vast welke kleur de conclusie draagt, welke vorm bij de vraag van de lezer past, hoe zwaar een bronregel staat, en waar elke waarde in het palet vandaan komt.
I
Doel en bereik
Voor wie dit geldt, wat het beslist, en waar het ophoudt.
Dit systeem geldt voor elke datavisualisatie, elk dashboard en elk rapport dat onder de naam A.R.T. of Data buitengaat: klantwerk, keynotes, LinkedIn-rebuilds en de digitale toolkit. Het staat naast de merkrichtlijn, op gelijke hoogte. De merkrichtlijn beslist hoe het merk eruitziet. Dit document beslist hoe een getal eruitziet, en dat is een andere vraag met andere randvoorwaarden.
Het onderscheid is niet cosmetisch. Een merkpalet wordt gekozen op hoe de kleuren naast elkaar staan. Een datapalet wordt gekozen op hoe de kleuren uit elkaar blijven, op klein formaat, bij kleurenblindheid, en in de volgorde waarin een tool ze toevallig toewijst. Dat zijn verschillende problemen, en het tweede wordt nooit opgelost door het eerste.
Hierop van toepassing
- Datavisualisaties, dashboards en rapporten die buitengaan.
- Klantwerk, keynotes en LinkedIn-rebuilds.
- De digitale toolkit.
Hierbuiten
- Illustratie, iconografie en de houtskooltekeningen.
- Sociale beeldsjablonen.
- Alles wat geen data codeert.
Thema-bestanden voor Power BI, sjablonen voor PowerPoint en CSS-tokens staan hier evenmin in. Ze worden hieruit gegenereerd, en dit document blijft de bron waaruit ze gemaakt worden.
Wat erin gaat, en wat eruit komt
Ingevoerd
- Cyan#00B4F0
- Yellow#F5E400
- Magenta#E8006E
- Teal#0EA5A5
- Gold#C8A800
- Doek#FFFFFF
Wat daaruit volgt
- Inktschaal10
- Focus6
- Categorisch6
- Ramps18
- Meubilair7
28 waarden in gebruik, waarvan er 3 rechtstreeks uit het merk komen en 25 hier zijn afgeleid. De drie statuskleuren staan daarbuiten, en dat is opzet: een statuskleur die op een merkkleur lijkt, wordt gelezen als decoratie.
- Status, van buiten3
Elke afgeleide waarde draagt de bewerking waarmee ze gemaakt is, zodat ze na te rekenen valt en zodat duidelijk blijft wat merk is en wat constructie. Die bewerkingen staan bij de inktschaal, in onderdeel III.
II
Principes
Vijf regels. Elke regel beslecht een discussie.
Kleur codeert, of ze is grijs
Draagt een kleur geen waarde, geen categorie en geen status, dan is ze inkt. Dat is de hele reden dat het focuspalet vooraan staat. Zodra decoratie ook kleur mag gebruiken, verliest de lezer de enige aanwijzing die hij had over waar hij moest kijken.
Eén ding draagt het punt
Attention uit A.R.T. staat hier. In een datavisualisatie is precies één reeks, één staaf of één punt benadrukt en al de rest is context. Dat is geen esthetische voorkeur maar een capaciteitsgrens: een lezer die drie dingen tegelijk aangewezen krijgt, kiest zelf wel wat hij belangrijk vindt, en dat is meestal niet wat jij had gevonden.
De vraag kiest de vorm, niet het datatype
Recognition uit A.R.T. Van datatype naar vorm redeneren is hoe taartdiagrammen ontstaan: iemand heeft delen van een geheel, grijpt naar de vorm die delen van een geheel betekent, en vraagt zich nooit af of de lezer die delen moet vergelijken. Onderdeel VI begint daarom bij de vraag die de lezer heeft.
De hoofding draagt de conclusie
Takeaway uit A.R.T. Een hoofding die de maatstaf benoemt laat het werk over aan de lezer dat de analist al gedaan had. Als de hoofding een getal of een verschil noemt, moet dat getal terug te vinden zijn in het vlak, anders vraag je de lezer om je op je woord te geloven.
Elke kleur is hier te herleiden
Een kleur in een datavisualisatie komt uit dit document of ze is een uitzondering. Een uitzondering wordt genoteerd met haar reden en een vervaldatum. Zonder die regel groeit een rapportagelandschap binnen twee jaar naar een palet dat niemand meer kan verantwoorden.
III
Inkt en neutralen
Het grootste deel van wat een lezer in een datavisualisatie ziet, is geen merkkleur. Het is inkt op een bepaald gewicht.
Een merk heeft één tekstkleur. Een datavisualisatie heeft er zestien: een hoofding, een titel, waardelabels op twee niveaus, aslabels, een annotatie, een bronregel, een aslijn, maatstreepjes, een referentielijn, rasterlijnen, een paneelvlak, een zebrastreep, een geen-datavlak en een uitgeschakelde staat. Worden die gewichten niet vastgelegd, dan kiest elke auteur ze zelf en zakt het geheel naar grijze pap.
De schaal staat hier als rollen. Een auteur vraagt om de rol Aslabel en krijgt de waarde die daarbij hoort. Dat is precies waarom een waarde later kan wijzigen zonder dat elk bestand mee moet wijzigen.
De banden hebben elk een eigen contrastdoel op het doek. Argument haalt 7:1 of beter, Steunend en Stille tekst halen 4,5:1, Structuur zit tussen 1,5:1 en 3:1, en Terugtreding blijft bewust onder 1,5:1.
| Rol | Gewicht | Hex | Vraagt | Op het doek | Waarvoor |
|---|---|---|---|---|---|
| Argument | |||||
| Kop | 100% | #000E13 | tekst | 19,59 haalt | Hoofding van de datavisualisatie en het kengetal in een KPI-tegel |
| Waardelabel, benadrukt | 87% | #212D32 | tekst | 14,13 haalt | De getallen op de reeks die het punt draagt |
| Annotatie | 80% | #333E42 | tekst | 11,00 haalt | De zin in het vlak die de conclusie aanwijst |
| Steunend | |||||
| Titel | 69% | #4F595C | tekst | 7,20 haalt | Bereik en eenheid, onder de hoofding |
| Aslabel | 56% | #70787B | tekst | 4,50 haalt | Categorieën en schaalwaarden langs de assen |
| Legendelabel | 56% | #70787B | tekst | 4,50 haalt | Alleen wanneer een direct label niet past |
| Waardelabel, context | 56% | #70787B | tekst | 4,50 haalt | De getallen op de reeksen die niet benadrukt zijn |
| Stille tekst | |||||
| Bron en voetnoot | 56% | #70787B | tekst | 4,50 haalt | Herkomst, peildatum, definitie |
| Eenheidsnoot | 56% | #70787B | tekst | 4,50 haalt | Losse noot over meeteenheid of afronding |
| Structuur | |||||
| Aslijn | 34% | #A8ADAF | vlak | 2,27 vlak | De basislijn waar de codering op rust |
| Maatstreepje | 34% | #A8ADAF | vlak | 2,27 vlak | Streepjes langs de as |
| Referentielijn | 80% | #333E42 | tekst | 11,00 haalt | Doel, budget, vorig jaar. Streepjeslijn |
| Rand | 19% | #CFD1D2 | vlak | 1,53 vlak | Kaders om panelen en tegels |
| Geen data | 19% | #CFD1D2 | vlak | 1,53 vlak | Cel of vlak zonder meting |
| Terugtreding | |||||
| Rasterlijn | 9% | #E8E9EA | vlak | 1,22 vlak | Horizontale hulplijnen, nooit verticaal |
| Paneelvlak | 5% | #F2F3F3 | vlak | 1,11 vlak | Achtergrond van een tegel of paneel |
| Zebrastreep | 3% | #F7F8F8 | vlak | 1,06 vlak | Alternerende rijen in een tabel |
| Uitgeschakeld | 19% | #CFD1D2 | vlak | 1,53 vlak | Filter of knop zonder actieve staat |
Een bronregel is nog altijd tekst
Bronregels en voetnoten worden in een deprimerend aantal dashboards op 38 procent inkt gezet. Op deze inkt komt dat neer op 2,55:1, ruim onder de drempel. Juist die regel gaat een lezer opzoeken op het moment dat hij aan het getal twijfelt. Ze staat hier op 56 procent, 4,50:1, en dat is geen ruimte voor onderhandeling.
Een rasterlijn mag 3:1 niet halen
Dit is de enige plek in het document waar een lager contrast het juiste antwoord is. Een rasterlijn is een referentie, geen object dat de lezer moet herkennen, en een rasterlijn die de drempel voor grafische objecten haalt concurreert met de data die ze zou moeten ondersteunen. Ze staat op 9 procent, 1,22:1. Wie dat bij een toegankelijkheidsronde wil repareren, repareert het verkeerde.
De gewichten van Material passen hier niet
De bekende 87, 60 en 38 procent gaan uit van zuiver zwart. Vanuit zuiver zwart ligt 4,5:1 op 54 procent en 7:1 op 65 procent. Vanuit deze inkt liggen dezelfde drempels op 56 en 69 procent. Wie die percentages overneemt, laat de steunende tekst stilletjes onder AA zakken.
De diepe varianten van cyaan en geel
Twee van de drie stippen halen de tekstdrempel niet op wit. Ze worden daarom verdiept, en de bewerking daarvoor is schalen richting samengesteld zwart. Schalen is een zuivere vermenigvuldiging: de verhouding tussen de drie kanalen blijft staan, en die verhouding is precies wat de tint bepaalt.
- diep(kleur, s) = kleur × s
- Cyan #00B4F0 op 70 procent geeft #007EA8, 4,62:1
- Yellow #F5E400 op 52 procent geeft #7F7700, 4,62:1
- Mengen met de inkt zou hetzelfde contrast halen maar de tint meeslepen richting het blauw van de inkt, en dan is het merk weg.
Verificatie. De tint blijft staan, en dat is na te meten. Cyan staat op 195,0 graden en de diepe variant ook op 195,0. Yellow staat op 55,8 en de diepe variant op 56,2: het verschil van 0,4 graad is afronding naar acht bit en niets anders. Dat is de controle dat schalen de juiste bewerking is.
De inkt komt uit de drie stippen
Cyaan, magenta en geel zijn de drie subtractieve primairen. Ze over elkaar drukken op volle dekking geeft samengesteld zwart. Dat is niet een beeldspraak over het merk maar een rekensom op de gepubliceerde waarden, en ze klopt exact.
- Vermenigvuldig de drie stippen kanaal per kanaal: Cyan #00B4F0 heeft R nul, Magenta #E8006E heeft G nul, Yellow #F5E400 heeft B nul.
- Het product is #000000, zuiver zwart, in elk kanaal exact.
- Zuiver zwart is de verkeerde inkt voor een scherm: hij is hard en hij is merkloos. Trek er acht procent cyaan in terug.
- inkt = 0,92 × #000000 + 0,08 × #00B4F0 = #000E13
Verificatie. De eerste stap is controleerbaar op de gepubliceerde waarden en geeft exact #000000, tot op de laatste bit. Dat is de reden om deze constructie te vertrouwen. De tweede stap, de acht procent, is een keuze en geen afleiding: ze houdt de inkt koel zoals houtskool op papier koel leest, en ze levert 19,59:1 op het doek.
De neutrale schaal
Het merk publiceert geen enkel grijs. De hele schaal is daarom de inkt op een percentage over het doek, en de banden zijn verankerd op het gewicht waar de drempel voor het eerst gehaald wordt. Ronde getallen vallen daar zelden mee samen.
- waarde(p) = inkt × p + doek × (1 − p)
- 7:1 wordt voor het eerst gehaald op 69 procent: #4F595C, 7,20:1
- 4,5:1 wordt voor het eerst gehaald op 56 procent: #70787B, 4,50:1
- 3:1 wordt voor het eerst gehaald op 44 procent, dus alles in de band Structuur blijft daaronder.
Niet te verifiëren. Er is geen gepubliceerd grijs om tegen te verifiëren. Deze schaal veronderstelt dat het doek zuiver wit is. Staat er ergens een gebroken wit, dan verschuiven alle gewichten en moet de schaal helemaal opnieuw berekend worden.
IV
Paletten
Zes paletten, elk voor een andere vraag. De vraag kiest het palet.
Het palet op één pagina
Eén van de vijf merkkleuren overleeft als lijn
Gemeten op wit haalt alleen Magenta de drempel voor tekst. Teal blijft met 3,02:1 net boven de drempel voor grafische objecten, en Cyan, Gold en Yellow zakken er alle drie onder. Dat betekent niet dat het palet slecht is: het betekent dat het een vlakkenpalet is. Als staaf werkt het, als lijn van twee pixel of als markeringspunt verdwijnt het. De twee dieptevarianten onderaan zijn hier afgeleid om dat op te lossen zonder de identiteit te verlaten.
Contrast op wit, per merkkleur, met beide WCAG-drempels ingetekend. Berekend uit de vijf ingevoerde hexwaarden.
Rood en de waarschuwing moeten samen in de smalste boog die het merk overlaat
De cirkel hieronder is de kleurtoon. Bovenaan staat rood op nul graden, en met de klok mee loopt hij door geel, groen, cyaan en blauw terug naar magenta. Het merk zet daar drie ankers op, en die verdelen de cirkel in bogen van 84, 124 en 152 graden. Gold en Cyan staan pal naast hun anker, dus ze tellen niet als een vierde en een vijfde richting. De ruimste boog loopt van geel naar teal, en daar staat het positieve groen precies in het midden op 145 graden. De smalste loopt van magenta naar geel, en daar moeten rood op 4 graden en de waarschuwing op 39 graden allebei in. Dat is de reden dat status hier nooit alleen door kleur gedragen wordt.
De kleurtoon van de vijf merkkleuren als stip, en van de drie statuskleuren als ruit. De bogen binnen de ring zijn de ruimte die het merk overlaat. Hoeken berekend uit de hexwaarden.
Focus: het standaardpalet
Dit is het standaardpalet en dat is geen aanbeveling maar de norm. Verreweg de meeste datavisualisaties tonen één reeks die het punt draagt en verder alleen context. Het categorische palet is de uitzondering, voor het geval dat de categorieën zelf het onderwerp zijn.
Highlight bestaat uit twee waarden en dat is opzet. De afgeleide Deep Cyan werkt overal, ook als lijn van één pixel en als waardelabel. De signature Cyan mag alleen op vlakken vanaf 24 pixel, waar het formaat het lage contrast opvangt. Wie twijfelt, neemt de eerste.
De drie contextstappen staan op 19, 36 en 52 procent inkt en liggen daarmee 1,57 en 1,63 uit elkaar in onderling contrast, ruim boven de 1,5 die nodig is om ze naast elkaar in één vlak nog uit elkaar te houden. Meer dan drie contextniveaus betekent dat de datavisualisatie te veel wil.
Categorisch
De volgorde weegt zwaarder dan de samenstelling. Een BI-tool wijst slot 01 toe aan de eerste reeks, ongeacht waar de datavisualisatie over gaat. Slot 01 is daarom de kleur die overal werkt, ongeacht hoe ze naast de andere staat.
Het merk levert drie bruikbare categorieën. Teal staat op 15 graden van cyaan en Gold op 5 graden van geel: dat zijn tinten van dezelfde kleur, geen tweede kleur. Ze krijgen daarom een eigen taak bij het meubilair. Vanaf slot 04 wordt de staart grijs, en dat is de regel over groeperen uitgedrukt als kleur in plaats van als zin.
Slot 02 en 03 hebben elk een vlakvariant: de signature Cyan en Yellow. Gebruik die alleen op grote vlakken, en houd binnen één datavisualisatie de keuze consistent.
Sequentieel
Divergerend
Status
Deze drie komen van buiten het palet, en dat is het juiste antwoord. Een statuskleur die op elke andere merkkleur lijkt, wordt door de lezer weggeschreven als decoratie. Een statuskleur moet het ontwerp onderbreken om te werken.
Grijs is geen status. Grijs is de afwezigheid van een signaal en hoort bij het meubilair. Drie staten volstaan.
Waarschuwing is een compromis en het document zegt dat liever hardop. De tint staat op 39 graden en dat is 18 graden van slot 03: in één datavisualisatie zijn die twee niet te onderscheiden, want ze delen ook hun lichtheid. Waarschuwing wordt daarom alleen als vlak gebruikt, altijd met een icoon of een woord erbij, en nooit in een visual waar slot 03 al staat.
Meubilair
Teal en Gold krijgen hier hun taak. Teal is de vergelijkingsreeks: vorige periode, vorig jaar, de lijn waar de reeks van nu tegen afgezet wordt. De afgeleide Deep Gold is de prognose, altijd als streepjeslijn, zodat gemeten en voorspeld nooit dezelfde vorm hebben. Zo blijft het volledige merk in gebruik zonder dat er twee kleuren in een categorieslot terechtkomen waar ze niet uit elkaar te houden zijn.
De drie stippen zijn het palet, de twee accenten zijn tinten
Gemeten in tinthoek liggen Teal en Cyan 15 graden uit elkaar en Gold en Yellow 6 graden. Een categorisch palet vraagt scheiding, en op die afstand is er geen. Het merk draagt dus drie categorieën. Dat is geen tekort: drie kleuren op 84, 124 en 152 graden van elkaar is een uitzonderlijk goede categorische set, beter dan wat de meeste merken kunnen leveren.
De eerste drie slots liggen op dezelfde lichtheid, en dat is de prijs
Slot 01, 02 en 03 zijn alle drie afgeleid naar dezelfde drempel van 4,5:1, en daarmee komen ze onvermijdelijk op vrijwel dezelfde luminantie uit: 0,18. De scheiding in deze set wordt volledig gedragen door tint. Het gevolg is concreet: deze set overleeft geen zwart-witdruk en geen ontzadigd scherm. Daarom is directe labeling in een categorische datavisualisatie verplicht en is een legende hier geen alternatief.
V
Toegankelijkheid
Twee drempels. Een datavisualisatie bestaat grotendeels uit iets anders dan tekst, en juist die helft wordt vergeten.
Tekst haalt 4,5:1 volgens WCAG 2.1 SC 1.4.3. Alles wat de lezer moet herkennen om de datavisualisatie te begrijpen, dus staven, lijnen, markeringen, legendeblokjes en iconen, haalt 3:1 volgens SC 1.4.11. Die tweede rij is de rij die overgeslagen wordt, en het is precies de rij waar een datavisualisatie uit bestaat.
Een kleur wordt hier gemeten tegen de drempel van haar eigen rol. Een vulling die nooit een letter draagt, wordt niet afgerekend op de tekstdrempel, want dan kleurt de matrix zichzelf rood en zegt ze niets meer. Wat een rol vraagt staat in de derde kolom, en de laatste kolom zegt wat de gemeten waarde daarbovenop nog toelaat.
Die laatste kolom volgt rechtstreeks uit de meting, want waargenomen kleurverschil krimpt met de grootte van het teken. Haalt een kleur 4,5:1, dan mag ze tekst, lijn en vlak. Haalt ze 3:1, dan mag ze lijn en vlak. Daaronder is ze alleen vlak. Een kleur die als staaf prima uit elkaar te houden is, kan als lijn van één pixel onzichtbaar zijn (Szafir 2018; Stone, Szafir en Setlur 2014).
Kleurenblindheid raakt ongeveer één op twaalf mannen, meestal in de rood-groenrichting. Het categorische palet hier rust niet op een rood-groenverschil, wat het grootste risico wegneemt. Het rust wel volledig op tint, en dat is de bekende zwakte van deze set. Kleur is daarom nooit het enige kanaal: positie, vorm, een label of een icoon draagt mee, en bij status is dat een harde eis.
| Kleur | Hex | Vraagt | Op het doek | Op het paneel | Laat ook toe |
|---|---|---|---|---|---|
| Highlight | #007EA8 | tekst | 4,62 haalt | 4,15 onder AA | tekst, lijn en vlak |
| Highlight, groot vlak | #00B4F0 | vlak | 2,39 vlak | 2,15 vlak | alleen vlak |
| Tweede nadruk | #E8006E | tekst | 4,51 haalt | 4,06 onder AA | tekst, lijn en vlak |
| Context, stil | #CFD1D2 | vlak | 1,53 vlak | 1,38 vlak | alleen vlak |
| Context, tweede plan | #A3A8AA | vlak | 2,40 vlak | 2,16 vlak | alleen vlak |
| Context, standaard | #7A8284 | lijn en vlak | 3,92 haalt | 3,53 haalt | lijn en vlak |
| 01 | #E8006E | tekst | 4,51 haalt | 4,06 onder AA | tekst, lijn en vlak |
| 02 | #007EA8 | tekst | 4,62 haalt | 4,15 onder AA | tekst, lijn en vlak |
| 03 | #7F7700 | tekst | 4,62 haalt | 4,16 onder AA | tekst, lijn en vlak |
| 04 | #7A8284 | lijn en vlak | 3,92 haalt | 3,53 haalt | lijn en vlak |
| 05 | #B2B7B8 | vlak | 2,03 vlak | 1,82 vlak | alleen vlak |
| 06 | #E0E2E3 | vlak | 1,30 vlak | 1,17 vlak | alleen vlak |
| Positive | #127A3E | tekst | 5,41 haalt | 4,87 haalt | tekst, lijn en vlak |
| Negative | #C0342A | tekst | 5,58 haalt | 5,02 haalt | tekst, lijn en vlak |
| Warning | #9A6300 | tekst | 5,05 haalt | 4,54 haalt | tekst, lijn en vlak |
| Rasterlijn | #E8E9EA | vlak | 1,22 vlak | 1,09 vlak | alleen vlak |
| Aslijn | #A8ADAF | vlak | 2,27 vlak | 2,04 vlak | alleen vlak |
| Referentielijn | #333E42 | tekst | 11,00 haalt | 9,90 haalt | tekst, lijn en vlak |
| Vergelijkingsreeks | #0EA5A5 | lijn en vlak | 3,02 haalt | 2,72 zakt | lijn en vlak |
| Prognose | #7F7700 | tekst | 4,62 haalt | 4,16 onder AA | tekst, lijn en vlak |
| Geen data | #CFD1D2 | vlak | 1,53 vlak | 1,38 vlak | alleen vlak |
| Paneelvlak | #F2F3F3 | vlak | 1,11 vlak | 1,00 vlak | alleen vlak |
| Cyaan · stap 1 | #E6F2F6 | vlak | 1,14 vlak | 1,03 vlak | alleen vlak |
| Cyaan · stap 2 | #B8DBE7 | vlak | 1,47 vlak | 1,32 vlak | alleen vlak |
| Cyaan · stap 3 | #80BED4 | vlak | 2,05 vlak | 1,85 vlak | alleen vlak |
| Cyaan · stap 4 | #409EBE | vlak | 3,06 vlak | 2,76 vlak | lijn en vlak |
| Cyaan · stap 5 | #007EA8 | vlak | 4,62 vlak | 4,15 vlak | tekst, lijn en vlak |
| Cyaan · stap 6 | #004E68 | vlak | 9,17 vlak | 8,25 vlak | tekst, lijn en vlak |
| Magenta · stap 1 | #FCE0EE | vlak | 1,23 vlak | 1,11 vlak | alleen vlak |
| Magenta · stap 2 | #F7A8CE | vlak | 1,83 vlak | 1,65 vlak | alleen vlak |
| Magenta · stap 3 | #F26BAB | vlak | 2,81 vlak | 2,53 vlak | alleen vlak |
| Magenta · stap 4 | #E8006E | vlak | 4,51 vlak | 4,06 vlak | tekst, lijn en vlak |
| Magenta · stap 5 | #80003D | vlak | 10,58 vlak | 9,52 vlak | tekst, lijn en vlak |
| Magenta naar cyaan · stap 1 | #80003D | vlak | 10,58 vlak | 9,52 vlak | tekst, lijn en vlak |
| Magenta naar cyaan · stap 2 | #E8006E | vlak | 4,51 vlak | 4,06 vlak | tekst, lijn en vlak |
| Magenta naar cyaan · stap 3 | #F7A8CE | vlak | 1,83 vlak | 1,65 vlak | alleen vlak |
| Magenta naar cyaan · stap 4 | #F2F3F3 | vlak | 1,11 vlak | 1,00 vlak | alleen vlak |
| Magenta naar cyaan · stap 5 | #B8DBE7 | vlak | 1,47 vlak | 1,32 vlak | alleen vlak |
| Magenta naar cyaan · stap 6 | #00B4F0 | vlak | 2,39 vlak | 2,15 vlak | alleen vlak |
| Magenta naar cyaan · stap 7 | #004E68 | vlak | 9,17 vlak | 8,25 vlak | tekst, lijn en vlak |
Op het doek haalt elke kleur haar drempel, op het paneelvlak niet
Tegen wit haalt elk staal precies wat zijn rol vraagt, en dat is geen geluk: de diepe varianten zijn afgeleid tot ze de tekstdrempel haalden, en de kleuren die hem niet haalden zijn vullingen geworden in plaats van lijnen. Tegen het paneelvlak zakt datzelfde stel. Slot 01, 02 en 03 landen tussen 4,06 en 4,16, en de vergelijkingsreeks valt terug naar 2,72. Een waardelabel in kleur hoort dus op het doek. Staat er een tegel onder, dan gaat dat label in inkt.
Magenta haalt de tekstdrempel met 0,01 marge
Magenta komt op 4,51:1 tegenover een drempel van 4,50. Dat is geen fout maar het is ook geen marge. Wordt de signature ooit bijgesteld, al is het maar één stap in één kanaal, dan kan slot 01 onder de drempel zakken zonder dat iemand het merkt. De matrix hierboven rekent zelf, dus het valt op zodra het gebeurt.
Teal is de enige merkkleur die precies op de objectdrempel landt
Teal komt op 3,02:1 tegenover een drempel van 3,00. Als lijn en als vlak mag het, als tekst niet. Dat is de reden dat Teal hier de vergelijkingsreeks is en geen categorieslot: een vergelijkingsreeks krijgt nooit een waardelabel in zijn eigen kleur.
VI
Vormkeuze
Van de vraag die de lezer heeft naar de vorm die hem beantwoordt. Nooit van het datatype naar de vorm.
| De vraag die de lezer heeft | Vorm | Waarom |
|---|---|---|
| Hoe groot is dit tegenover dat? | Horizontale staaf | Lengte op een gemeenschappelijke basislijn is de nauwkeurigst afgelezen codering |
| Hoe is dit in de tijd bewogen? | Lijn | De helling draagt de verandering; verbind alleen echt continue punten |
| Hoe is dit bewogen, en is het niveau zelf het punt? | Kolom | Voor wanneer elke periode een op zichzelf staande hoeveelheid is |
| Waaruit is dit opgebouwd? | Gestapelde staaf of kleine veelvouden | Alleen het onderste segment ligt op een gemeenschappelijke basislijn, dus maximaal drie delen |
| Hoe verschuift de verhouding in de tijd? | Honderd procent gestapeld, of een lijn per aandeel | Kies op grond van of de lezer de mix wil of de losse aandelen |
| Hoe ver staat dit van het doel? | Afwijkingsstaaf rond een nullijn | Codeer het verschil zelf, zodat de lezer het niet hoeft af te trekken |
| Waar zit de concentratie? | Warmtetabel met een sequentiële ramp | De ramp bindt aan de maatstaf, nooit aan de categorie |
| Bewegen deze twee samen? | Spreiding | Voeg alleen een trendlijn toe wanneer de samenhang zelf het punt is |
| Wat is de vorm van de verdeling? | Histogram of boxplot | Een gemiddelde verbergt de vorm, en de vorm is meestal de bevinding |
| Wat gebeurde er tussen deze twee toestanden? | Waterval | Legt de brug tussen twee toestanden open, met de sentimentkleuren uit het statuspalet |
| Wat is het ene getal? | KPI-tegel met context | Een getal zonder vergelijking is geen bevinding |
| Hoe verhouden veel kleine reeksen zich? | Kleine veelvouden | Gelijke schalen, één gedeeld aslabel, gesorteerd op wat er toe doet |
| Wie loopt voorop? | Gesorteerde staaf, kop en staart getoond | Sorteren op waarde is gratis nauwkeurigheid; alfabetisch draagt geen informatie |
Vormen om te vermijden
| Vorm | Waarom niet |
|---|---|
| Dubbele as | Het snijpunt is een artefact van twee onafhankelijke schalen. Twee panelen boven elkaar met een gedeelde tijdas zegt hetzelfde, eerlijk |
| Taart met meer dan drie parten | Hoek wordt minder nauwkeurig afgelezen dan lengte, en de fout groeit met het aantal parten |
| Donut met een getal in het midden | Het getal doet het werk en de ring is decoratie eromheen. Neem een KPI-tegel |
| Afgekapte basislijn bij staven | Staaflengte is de codering, dus wie de as afkapt geeft de verhouding verkeerd weer. Lijnen mogen wel weg van nul beginnen |
| Drie dimensies | Perspectief vervormt precies de codering die het versiert |
| Radar | Oppervlak schaalt met het kwadraat, en de vorm hangt af van de willekeurige volgorde van de assen |
| Gestapelde staaf om iets anders dan het totaal te vergelijken | Alleen het eerste segment heeft een gemeenschappelijke basislijn |
VII
Galerij
Geordend op de vraag die de lezer heeft. Elk voorbeeld is getekend met de paletten en de inktschaal uit dit document.
De meest gebouwde en de meest verknoeide familie. Sorteren en één benadrukking doen het grootste deel van het werk.
Kolom met één benadrukking
Welke sector zit het hoogst, en hoeveel scheelt dat?
Waarom deze vorm. Eén kolom draagt het punt en de rest is context op 48 procent inkt. De annotatie staat binnen het vlak, zodat de conclusie meereist wanneer het beeld uitgeknipt en gedeeld wordt.
In plaats van. Acht kolommen die alle acht een eigen kleur uit het merkpalet krijgen.
Focus, met de benadrukking op één kolom
Gesorteerde horizontale staaf
Hoe groot is elke dienst tegenover de andere?
Waarom deze vorm. Gesorteerd op waarde, omdat alfabetisch een volgorde is die geen informatie draagt en het patroon uiteenslaat waar de lezer voor kwam. Horizontaal omdat de labels dan leesbaar blijven zonder te kantelen.
In plaats van. Een taartdiagram met zes parten.
Focus, benadrukking op de kop
Puntendiagram met twee peilmomenten
Waar is de verschuiving tussen toen en nu het grootst?
Waarom deze vorm. De afstand tussen de twee punten is de bevinding, en die lees je hier direct af. Een gegroepeerde staaf zou dezelfde data tonen maar de lezer dwingen om twee lengtes te vergelijken die niet naast elkaar staan.
Focus, twee stappen
De helling draagt het verhaal. Direct labelen aan de rechterkant, altijd.
Lijn met directe labels
Welke lijn loopt weg van de andere?
Waarom deze vorm. Het label staat aan het einde van de lijn in de kleur van de lijn, zodat het oog de data nooit verlaat. Een legende zou een decodeerstap toevoegen die hier niets oplevert.
In plaats van. Een legende onder de datavisualisatie met drie blokjes.
Categorisch, slot 01 tot 03
Kleine veelvouden
Welke sectoren stijgen en welke niet?
Waarom deze vorm. Zes panelen verslaan één datavisualisatie met zes lijnen: vormen laten zich vergelijken, lijnen raken in de knoop. De schaal is gedeeld, anders vergelijkt de lezer vormen die niet vergelijkbaar zijn.
Focus, stijgers benadrukt
Twee valkuilen: meer dan drie segmenten, en een taart wanneer de lezer de delen moet vergelijken.
Gestapelde kolom, drie delen
Waaruit bestaat het kwartaal, en groeit het totaal?
Waarom deze vorm. Drie delen is het maximum, want alleen het onderste segment ligt op een gemeenschappelijke basislijn. Direct gelabeld rechts van de laatste kolom.
In plaats van. Zeven segmenten per kolom.
Categorisch, slot 01 tot 03
Honderd procent gestapeld
Hoe verschuift de verhouding tussen de diensten?
Waarom deze vorm. Deze vorm beantwoordt alleen de vraag naar de mix. Wil de lezer weten of de omzet groeide, dan blijft die vraag hier onbeantwoord, en dan werk je met een lijn per aandeel.
Categorisch, slot 01 tot 03
Wat een gemiddelde verbergt.
Histogram
Hoe lang duurt een doorlooptijd echt?
Waarom deze vorm. Het gemiddelde is hier onbruikbaar omdat de staart lang is. De mediaan staat als streepjeslijn op de referentierol, en die is bewust zwaarder dan een rasterlijn omdat de lezer hem moet herkennen.
Focus, context met een referentielijn
Boxplot per groep
Welke groep is het meest voorspelbaar?
Waarom deze vorm. Vijf getallen per groep. De bevinding zit in de breedte van het vak, en dat is precies wat een staaf met gemiddelden zou hebben weggegooid.
Focus, benadrukking op de smalste spreiding
Alleen wanneer de samenhang zelf de vraag is.
Spreiding met één uitgelicht punt
Welk project valt uit de toon?
Waarom deze vorm. De trendlijn staat op de referentierol, want ze is meubilair. Het uitgelichte punt is groter én anders gekleurd: twee kanalen, omdat kleur alleen niet volstaat.
Focus, één punt benadrukt
Codeer het gat zelf.
Afwijkingsstaven rond nul
Waar zitten we boven en waar onder budget?
Waarom deze vorm. De nullijn is het anker en die verankert op budget, een echte waarde. Verankeren op het midden van de data werkt averechts. Dat laatste beweegt bij elke verversing mee en maakt de datavisualisatie onvergelijkbaar met die van vorige maand.
In plaats van. Twee gegroepeerde staven per rij, realisatie naast budget.
Status, positief en negatief
Waterval
Wat verklaart het verschil tussen de twee kwartalen?
Waarom deze vorm. De totalen staan in inkt, want een totaal draagt geen oordeel. Alleen de stappen ertussen krijgen sentiment.
Status voor de stappen, inkt voor de totalen
De ramp bindt aan de maatstaf, nooit aan de categorie.
Warmtetabel
Waar zit de piek in het jaar?
Waarom deze vorm. De getallen blijven staan, want een warmtetabel is een tabel met kleur en geen kleurenvlak met een legende. Het label wisselt naar wit zodra de achtergrond donker genoeg is, zodat het contrast op elke cel klopt.
Sequentieel cyaan
Het meest gekopieerde en het minst gespecificeerde onderdeel van elk rapportagelandschap.
Tegelrij met context
Waar staan we nu, en is dat goed nieuws?
Waarom deze vorm. Het kengetal staat in inkt op de kopgewicht, want kleur is hier voor de richting gereserveerd. De richting draagt een pijl naast de kleur, omdat kleur alleen faalt voor ongeveer één op twaalf mannen. De vergelijkingsperiode staat erbij, want zonder vergelijking is een getal geen bevinding, en de sparkline laat zien of deze maand een uitschieter is.
In plaats van. Een groot getal met een gekleurd percentage eronder en verder niets.
Inkt voor het kengetal, status voor de richting
VIII
Anatomie
Van boven naar onder, en elk onderdeel heeft één taak.
Takeaway uit A.R.T. staat hier. De lezer moet weggaan met het punt in plaats van met een beschrijving van de assen.
| Onderdeel | Regel | Waarom |
|---|---|---|
| Hoofding | Formuleert de conclusie, in de woorden van de lezer | Een maatstafnaam laat de lezer het werk doen dat de analist al gedaan had |
| Hoofding met een getal erin | Dat getal is terug te vinden in het vlak | Anders vraag je de lezer om je op je woord te geloven |
| Titel | Draagt bereik, periode en eenheid, en leest op zichzelf | Beelden worden uitgeknipt en gedeeld; een titel die naar de hoofding terugwijst valt dan stil |
| Eenheid | Staat in de titel, niet alleen bij de as | De as wordt overgeslagen, de titel niet |
| Labels | Direct op de reeks, niet in een legende | Een legende is een decodeerstap tussen de lezer en de data |
| Annotatie | Staat in het vlak en wijst aan | Een bijschrift onder de datavisualisatie wordt als los tekstje gelezen |
| Bronregel | Herkomst, peildatum en definitie, op stille tekst | Dit is de regel die een lezer opzoekt op het moment dat hij twijfelt |
| Ordening | Op waarde, tenzij er een natuurlijke volgorde bestaat | Sorteren is gratis nauwkeurigheid, en alfabetisch draagt geen informatie |
De hoofding is de enige plek waar de analist zijn werk kan laten zien
Een lezer die een datavisualisatie tien seconden bekijkt, leest de hoofding en scant het vlak. Staat de conclusie niet in die hoofding, dan is de kans dat hij haar zelf vindt ongeveer even groot als de kans dat hij een andere vindt. Dat is de zwaarste regel in dit document en tegelijk de goedkoopste om te volgen.
IX
Typografie en getallen
Montserrat draagt de hele schaal. Grootte, snit en kleur per element, en daarna de getalconventies, die eruitzien als schrijfregels maar dataregels zijn.
| Element | Snit | Grootte | Kleur | Op ware grootte |
|---|---|---|---|---|
| KPI-kengetal | Montserrat SemiBold | 32 pt | Kop | € 62,4k |
| Hoofding | Montserrat SemiBold | 18 pt | Kop | Overheid trekt de vraag |
| Titel | Montserrat Regular | 13 pt | Titel | Per sector, 2021 tot 2026, in procent |
| Aslabel | Montserrat Regular | 11 pt | Aslabel | Overheid |
| Waardelabel | Montserrat SemiBold | 11 pt | Waardelabel, benadrukt | 16% |
| Annotatie | Montserrat SemiBold | 11 pt | Annotatie | hoogste van de acht, en stijgend |
| Bron en voetnoot | Montserrat Regular | 9 pt | Bron en voetnoot | Bron: eigen meting · 30 juni 2026 |
Getallen en taal
| Regel | Juist | Fout |
|---|---|---|
| Duizendtal en decimaal | 1.250,4 | 1,250.4 |
| Percentage | 12,4% | 12.4 % |
| Valuta | € 1.250 | 1250 EUR |
| Grote getallen | 1,2 mln | 1.2M |
| Datum | 14 juni 2026 | 06/14/2026 |
| Verschil in procentpunt | +2,0 pp | +2,0% |
| Nul tegenover geen meting | 0 en een lege cel | overal 0 |
X
Opbouw en dichtheid
Hoeveel er op een pagina past, en in welke volgorde het gelezen wordt.
Attention uit A.R.T. staat hier. Een lezer begint niet linksboven omdat een regel dat voorschrijft, hij begint waar het meeste gewicht ligt: het grootste getal, het enige gekleurde vlak, het sterkste contrast. Positie doet mee, maar ze verliest van gewicht. Zet het antwoord dus op de plek die de aandacht toch al pakt, en geef die plek het gewicht dat erbij hoort.
De meeste dashboards doen het omgekeerde. Het zwaarste element op de pagina is een filterbalk of een logo, en dan gaat de sterkste plek naar iets dat niets zegt. Wie wil weten waar zijn lezer begint, hoeft er niet naar te raden: knijp het beeld tot een duimnagel en kijk wat er overblijft.
Zes visuals per pagina is de bovengrens, en dat is een grens en geen doel. Boven de zes stopt een lezer met lezen en begint hij te scannen, en scannen levert alleen op wat groot en gekleurd is. Heb je meer te vertellen, neem dan een tweede pagina.
Kleine veelvouden gaan voor op één dichte datavisualisatie. Zes kleine panelen met een gedeelde schaal beantwoorden de vraag welke reeks afwijkt in één oogopslag, waar zes lijnen in één vlak de lezer dwingen om ze uit elkaar te pluizen. De schaal is daarbij altijd gedeeld, anders vergelijkt de lezer vormen die niet vergelijkbaar zijn.
Een dashboard: het antwoord waar de aandacht landt
Zes panelen, en dat is de bovengrens uit deze regel. Het antwoord staat linksboven én draagt het meeste gewicht: het kengetal is de grootste letter op het blad, dus het oog komt er sowieso terecht. De vijf andere panelen dragen de onderbouwing, elk met een eigen kop die een conclusie formuleert, want een lezer die halverwege instapt moet weten waar hij naar kijkt. De bronregel staat op stille tekst in de paginakop, en de drie signature stippen staan daar ook, naast het logo en niet naast een staaf. De telling is verzonnen, en dat is opzet: een voorbeeldblad hoort niet te lezen als het rapport van een echte klant.
Het zespanelen-raster van A.R.T. of Data, op een verzonnen telling van de antieke Spelen. Zesenzeventig kransen, acht poleis, vier disciplines, vijf periodes: elke opsplitsing telt op tot hetzelfde totaal.
Een slide: één datavisualisatie, en verder niets
Hetzelfde systeem op een blad waar maar één ding op staat. De kolommen staan aflopend, dus de reeks die het punt draagt staat vooraan. Er is geen annotatie: het getal in de hoofding draagt de accentkleur, en in het vlak draagt precies één kolom diezelfde kleur. Dat is de brug tussen de kop en de data, en ze kost geen extra tekst. Wie dit naast de rapportpagina legt, ziet dat er geen tweede stijl bij komt kijken: dezelfde rollen, andere maten.
Acht poleis, aflopend gesorteerd, als enige onderwerp van het blad.
De signature stippen horen niet in het datavlak
Cyaan, geel en magenta naast elkaar zijn de handtekening van het merk. In een datavisualisatie zijn ze drie categorieën. Zet de drie stippen daarom in de paginakop, in de voettekst of op de omslag, en nooit als decoratie binnen een vlak waar ook data staat. Zodra ze naast een staaf staan, gaat de lezer ervan uit dat ze iets betekenen.
XI
Wel en niet
Geordend op hoe vaak elke regel gebroken wordt.
Wel
- Zet de conclusie in de hoofding, want de hoofding is het enige dat zeker gelezen wordt.
- Sorteer op waarde, want dat is nauwkeurigheid die niets kost.
- Label direct op de reeks, want een legende is een decodeerstap.
- Neem het focuspalet als standaard, want de meeste datavisualisaties hebben één punt.
- Zet de bronregel op 56 procent inkt, want ook een voetnoot is tekst.
- Veranker het midden van een divergerende schaal op een echte waarde: nul, budget, vorig jaar.
Niet
- Gebruik de signature Cyan niet als lijn of als label; neem de afgeleide diepe variant.
- Geef een vierde categorie geen vierde kleur; groepeer, want de staart is met opzet grijs.
- Gebruik geen twee assen; twee panelen boven elkaar zeggen hetzelfde zonder te suggereren.
- Kap een staafbasislijn niet af, want lengte is de codering.
- Zet slot 03 en de waarschuwingskleur nooit in dezelfde visual; ze staan 13 graden uit elkaar.
- Laat status nooit alleen door kleur dragen; zet er een pijl, een teken of een woord bij.
XII
Beheer
Een gids zonder eigenaar is een suggestie.
| Eigenaar | Henny Speelman · Archonit |
| Herziening | Jaarlijks, en telkens wanneer een merkwaarde wijzigt |
| Een kleur toevoegen | Een nieuwe kleur heeft een herkomst nodig, een gebruiksbereik en haar gemeten contrast op elk oppervlak in dit document. Voldoet ze niet aan alle drie, dan is ze geen kleur maar een uitzondering. |
| Uitzonderingen | Genoteerd, met de reden en een vervaldatum. Een uitzondering zonder vervaldatum is een stille wijziging van de standaard. |
| Bron van waarheid | guide.json. Elk paletbestand, thema en sjabloon wordt daaruit gegenereerd. Een waarde die op twee plaatsen los wordt bijgehouden, begint uit elkaar te lopen op de dag dat ze wijzigt. |
| Versie | 1.0 |
Dit kan ook op jullie merk staan
Bijna elk merkboek stopt waar de data begint. Er staat een palet in dat gekozen is op hoe de kleuren naast elkaar staan, en daarmee moet een heel rapportagelandschap het doen. Ik lees jullie merkrichtlijn uit en leid er dit systeem uit af: de inktschaal, de paletten, de vormkeuze en een galerij die met jullie eigen kleuren getekend is. Elke waarde draagt de bewerking waarmee ze gemaakt is, zodat een collega ze kan narekenen in plaats van geloven. Vertel me kort waar jullie staan.
Neem contact op