Design tips in Tableau

Bij het ontwerp van een dashboard moet de functionaliteit de hoogste prioriteit hebben. Vaak worden dashboards echter ontworpen om zoveel mogelijk data te presenteren, de visuele functies van software te presenteren of om indruk op de klant te maken (Sillitti & Succi, 2013 1). Dat gezegd hebbende ben ik wel degelijk van mening dat een mooi ontwerp een toegevoegde waarde kan hebben, mits deze de functionaliteit niet dwarsboomt of teveel tijd vergt om te implementeren. In deze blog ga ik hier verder op in.

1 Bron: Janes, A., Sillitti, A. and Succi, G. (2013),“Effective dashboard design”, Cutter IT Journal, pp. 17-24.

Creatieve dashboards

Om geïnspireerd te raken voor een mooi design zit het internet vol met talloze voorbeelden van creatieve dasboards. Een veel terugkomend element is het gebruik van vlakken met rondingen, waarbij de grenzen van de verschillende grafieken duidelijk afgebakend zijn. Deze afbakening kan als functioneel gezien worden, doordat dit voor een overzichtelijker geheel zorgt. Los van deze afbakening brengt de implementatie van deze vlakken naar mijns inziens ook toegevoegde waarde wat betreft het design. Een goed ontworpen dashboard spoort meer mensen aan om deze te gebruiken/bekijken. Een aanrader is om de ronde vlakken nog wat schaduw te geven, zodat de afbakening hiervan nog duidelijker is.

Design in Tableau

Hoewel Tableau vol functionaliteiten zit om een dashboard tot een visueel mooi geheel te maken, zijn er zo nu en dan momenten dat er wat creativiteit wordt gevergd. Dit is dan ook het geval bij deze ronde vlakken, wat niet onder de standaardfunctionaliteiten valt van Tableau. Om dit te kunnen implementeren ontwikkelen we een achtergrond voor het dashboard waarbij deze vlakken al zichtbaar zijn. Vervolgens worden de sheets/grafieken netjes binnen de vlakken geplaatst. Hoewel er meerdere mogelijkheden zijn om deze onderste laag te creëren, is Figma.com een goed alternatief doordat deze gratis is, de vele ontwerpmogelijkheden die het platform biedt en hoe intuïtief het is in het gebruik. Hieronder wordt aan de hand van twee stappen beschreven hoe deze ronde vlakken geïmplementeerd kunnen worden.

Stap 1

Het is allereerst van belang dat men precies weet welke elementen in het dashboard moeten verschijnen, hoe groot deze zullen zijn en waar ze komen te staan. Nadat men dit weet kan er namelijk pas bepaald worden hoe de achtergrond van het dashboard eruit moet gaan zien. Wanneer de achtergrond is geëxporteerd als een PNG-bestand kunnen de verschillende vlakken niet meer aangepast worden. Ook moet vooraf bepaald worden welke afmetingen het dashboard zal krijgen aangezien het geëxporteerde geheel van Figma precies dezelfde afmetingen moet bevatten. Kanttekening is dan ook dat wanneer er naderhand een element moet worden toegevoegd aan het dashboard, de gehele achtergrond in Figma opnieuw moet worden gemaakt en geëxporteerd. Er moeten logischerwijs nieuwe vlakken gecreëerd worden voor deze nieuwe elementen.

Stap 2

Het geëxporteerde PNG-bestand kan geïmporteerd worden in Tableau door een “Image object” op het dashboard te plaatsen. Zorg ervoor dat de afmetingen van het dashboard precies overeenkomen met die van het PNG-bestand. Wanneer deze stappen ondernomen zijn kan men de grafieken/legenda’s/filters in de vlakken slepen door deze op “floating” te zetten.

Welk design heeft jouw voorkeur?

In onderstaand voorbeeld zijn twee dashboards ontwikkeld, waarbij één dashboard gebruik maakt van de hierboven beschreven techniek. Welk dashboard heeft jouw voorkeur? Er zijn talloze creatieve toepassingen te bedenken met deze methode. Kijk deze pagina voor een aantal voorbeelden:
https://public.tableau.com/en-us/gallery.

Advies over dashboard design?

Wil je meer weten over de dashboard design of graag vrijblijvend advies ontvangen, neem dan contact met ons op. Wellicht is onze workshop Data, communicatie en dashboard design ook wat voor jou. Bekijk hier de pagina met workshops van de Infotopics Academy.

Contact opnemen over dashboard design