Hoe je complexe (en responsive!) tabellen ontwerpt en niet je verstand verliest

Je bent niet alleen, ik heb een aantal grote ontwerpers zien beven in hun laarzen bij de gedachte om dit probleem op te lossen. Maar je hoeft niet bang te zijn! Onlangs ben ik deze ontwerpuitdaging aangegaan, en nu ben ik hier om enkele tips te delen die me hebben geholpen om tot een ontwerp te komen waar onze gebruikers dol op zijn.

Er zijn een heleboel verschillende opties voor hoe je tabellen ontwerpt, laat staan hoe je ze responsive maakt. Kolommen en rijen kunnen worden verplaatst, verkleind, samengevouwen, geminimaliseerd of zelfs verdwijnen wanneer het browservenster smaller wordt.

Zoals bij alle ontwerpoplossingen hangt het beste ontwerp af van hoe uw lezers de gegevens gaan gebruiken. We hebben aan het begin van dit project wat gebruikersonderzoek gedaan om enige richting te geven en vastgesteld dat voor ons project:

• Deze informatie in tabelvorm zou in gelijke mate worden gebruikt op een mix van desktop-, tablet- en mobiele apparaten.
• Deze tabellen zouden veel kolommen met vrije tekst kunnen bevatten, evenals getallen.
• Zekere belangrijke stukjes informatie moeten te allen tijde zichtbaar blijven.

Met deze inzichten van onze gebruikers, zijn dit de belangrijkste dingen die ik heb aangepakt bij het ontwikkelen van een ontwerpsysteem voor tekstzware gegevenstabellen.

Voreerst, bepaal wat voor soort tabel het is. Is het een vergelijkingstabel, waarbij de lezer gegevens over meerdere kolommen vergelijkt, of is het een inhoudstabel, waarbij de gegevenssets onafhankelijk van elkaar zijn?

Mijn tabel lijkt meer op een inhoudstafel dan op een vergelijkingstabel. Door dit al in een vroeg stadium vast te stellen, begreep ik welke informatie in het smalle schermformaat dicht bij elkaar moest blijven.

Mobile first

De eerste versie die ik ontwierp, was de versie voor het smalle scherm. Ik heb hier bewust naar gekeken vóór de breedbeeldversie, omdat het bekijken van de tabellen op mobiel belangrijk is voor onze gebruikers. Daarom moest ik een manier vinden om complexe en niet-lineaire informatie in een verticaal formaat te passen.

Ik wist dat het veel gemakkelijker zou zijn om het ontwerp op te schalen als er veel horizontale ruimte is, dan een mooie tabel voor desktop te ontwerpen en te worstelen om het leesbaar te houden op mobiel. Het betekende ook dat ik vanaf het begin rekening hield met aanraakbare doelgroottes en niet vertrouwde op acties zoals hover om informatie te onthullen.

Ik besloot de inhoud meer als een lijst te behandelen in smalle weergaven, zodat de belangrijke informatie goed zichtbaar en scanbaar bleef.

Consistente styling

De rijen moeten herpositioneren als de schermgrootte verandert, dus gebruikte ik styling om de verbinding tussen de rijen te helpen behouden. Bijvoorbeeld, als kolomkoppen vetgedrukt zijn met een grijze achtergrond, gebruik dan dezelfde stijl in de smalle weergave. Dat zal lezers helpen om de nieuwe verdeling van cellen opnieuw in te delen.

Typografie is je vriend

Het is makkelijk om je typografische principes te vergeten als je veel beperkingen hebt, maar als je er bewust voor kiest om de leesbaarheid te optimaliseren, zal dat een enorme hulp zijn voor je lezers, vooral in een project zoals het mijne waar de tabellen veel tekst bevatten.

Typografie bestaat om de inhoud te eren. ~ Robert Bringhurst

Scannen

Maak het gemakkelijk om snel te scannen door de leesstroom eenvoudig en duidelijk te houden. Ik heb ervoor gekozen de tekst in elke kolom aan dezelfde rand te laten hangen, zodat de lezer de tekst lineair kan scannen.

Lijnlengte

Probeer de lijnlengte van de tekst niet in gevaar te brengen door veel kolommen in een smalle ruimte te persen, anders vertraagt dat de leessnelheid. Ik stel een minimumbreedte in voor kolommen met doorlopende tekst.

Labels

Bedenk waar u de labels neerzet, zodat ze niet te veel ruimte in beslag nemen, maar toch enige context geven aan de informatie.

Ik plaatste de labels boven elk stukje celinhoud in mijn lijst, waar ze minder ruimte in beslag namen, in plaats van aan de zijkant. En zo is de informatie ook gemakkelijker te scannen. Ik heb de labels anders vormgegeven, zodat het verschil tussen een vast label en variabele inhoud gemakkelijk te zien is.