Cijfers, prijzen en vergelijkingen horen bij veel websites, maar ze zijn berucht moeilijk om mooi te tonen. Een tabel die op de computer netjes oogt, valt op een telefoon vaak uit elkaar, en een prijslijst die te druk is, jaagt bezoekers eerder weg dan dat hij overtuigt. Toch is goed vormgegeven data juist het moment waarop een bezoeker een keuze maakt. In deze gids laat ik zien hoe je prijslijsten, vergelijkingen en cijfers presenteert zodat ze leesbaar en overzichtelijk blijven, ook op een klein scherm.

Wanneer een tabel de juiste keuze is

Een tabel is bedoeld om gegevens naast elkaar te zetten zodat je ze kunt vergelijken. Pakketten met hun kenmerken, prijzen per dienst, eigenschappen van producten: dat is waar een tabel sterk in is. Het oog kan dan over de rijen en kolommen lopen en verschillen oppikken.

Heb je geen echte vergelijking, dan is een tabel vaak de verkeerde vorm. Losse informatie leest prettiger in een lijst of een rij kaarten, waarover de gids over kaarten en lijsten ontwerpen gaat. De vraag is dus steeds: wil de bezoeker echt vergelijken, of staat hier gewoon informatie onder elkaar?

Een tabel leesbaar opbouwen

Een goede tabel is vooral rustig. Te veel lijnen, kleuren en vakjes maken het oog onrustig en verbergen juist de inhoud. Een paar regels helpen veel.

Net als bij gewone tekst geldt: leesbaarheid is een ontwerpkeuze. Hoe contrast en uitlijning daarbij helpen, lees je in de gids over contrast en nadruk.

Een goede tabel laat de cijfers het werk doen. Alles wat eromheen staat, mag het oog niet afleiden van wat het moet vergelijken.

Prijzen en pakketten tonen

Een prijstabel is een gevoelig onderdeel, want hier maakt de bezoeker een afweging. Hou het overzichtelijk: een handvol pakketten, per pakket de belangrijkste kenmerken en één duidelijke knop. Eén pakket mag uitgelicht zijn als aanbevolen keuze, maar overdrijf dat niet.

Voor maatwerk werk ik zelf liever met een heldere uitleg en een offerte op maat dan met vaste bedragen die zelden kloppen met de echte situatie. Een tabel met losse opties kan dan verwarrender werken dan een rustig gesprek over wat je nodig hebt. Wat het beste past, bekijken we per pagina. Hoe je een keuze overtuigend brengt zonder opdringerig te worden, hangt samen met conversiegericht ontwerp.

Data op een klein scherm

Hier sneuvelen de meeste tabellen. Een brede tabel met vijf kolommen past simpelweg niet op een telefoon, en als je hem zomaar laat krimpen, wordt het onleesbaar. Er zijn betere manieren. Je kunt de tabel laten schuiven, de kolommen onder elkaar zetten, of per item een eigen blokje tonen waarin de kop en de waarde samen staan.

Welke aanpak past, hangt af van de gegevens en hoeveel kolommen er zijn. Ik ontwerp data daarom met het kleine scherm in gedachten, zodat het op elk formaat te volgen blijft. Hoe een ontwerp meebeweegt met de schermbreedte, staat in de gids over breakpoints kiezen en in de dienst responsive design.

Veelgemaakte fouten

De grootste fout is te veel in één tabel willen proppen. Tien kolommen en twintig rijen lijken compleet, maar niemand vindt er nog iets in terug. Beter is om te kiezen wat de bezoeker echt nodig heeft en de rest weg te laten of elders te zetten.

Andere veelgemaakte missers zijn felle achtergrondkleuren per cel, te kleine tekst om alles te laten passen en het vergeten van de mobiele weergave. Stuk voor stuk maken ze data onleesbaar. Minder tonen en het rustig houden levert bijna altijd een beter resultaat, in lijn met het idee uit de blog over minder is meer in ontwerp.

Zelf doen of uitbesteden?

Een tabel maken kan iedereen, maar een tabel die op elk scherm leesbaar blijft en bij je merk past, vraagt meer aandacht. Standaardtabellen uit een bouwer zien er vaak hoekig uit en lopen vast op de telefoon. Juist bij prijzen en vergelijkingen, waar de bezoeker beslist, wil je dat het klopt.

Laat je je data als vast onderdeel ontwerpen, dan blijft het overzichtelijk en kun je er later moeiteloos iets aan toevoegen. Bekijk de mogelijkheden bij webdesign op maat en leg me gerust voor welke gegevens je wilt tonen via de contactpagina.

Veelgestelde vragen

Een tabel is op zijn plaats als je gegevens hebt die je echt naast elkaar wilt vergelijken, zoals pakketten, prijzen of kenmerken. Gaat het om losse informatie zonder onderlinge vergelijking, dan is een lijst of een rij kaarten vaak prettiger om te lezen dan een tabel.

Een brede tabel past zelden op een klein scherm. Oplossingen zijn de tabel laten schuiven, kolommen onder elkaar zetten of per item een eigen blokje tonen. Welke aanpak past, hangt af van de gegevens. Ik ontwerp de tabel zo dat hij op elk formaat te volgen blijft.

Dat kan helpen om pakketten te vergelijken, maar het hoeft niet altijd. Voor maatwerk werk ik liever met een duidelijke uitleg en een offerte op maat dan met vaste bedragen die zelden kloppen met de situatie. Wat het beste past, bekijken we per pagina samen.

Vaak wel. Als de tabel goed is opgezet, voeg je later een rij toe die automatisch dezelfde opmaak krijgt. Ik zorg dat de structuur helder is, zodat een wijziging geen rommel oplevert. Wat je zelf wilt kunnen aanpassen, spreken we vooraf af.

Verder in de kennisbank: Kaarten en lijsten ontwerpen · Breakpoints kiezen · Contrast en nadruk