Aanbevolen procedures voor het ontwerpen van visualisaties

Uw apps overzichtelijk maken

Te veel informatie in een app maakt het moeilijk om te zien wat belangrijk is. De stijl van moderne gebruikersinterfaces is overzichtelijker, eenvoudiger en platter. Een eenvoudigere interface leidt de lezer op subtiele wijze door de app en stelt hem in staat geconcentreerd te blijven.

Minder is meer

Gebruikers proberen vaak te veel informatie in één app te proppen. Lijndiagrammen met meerdere metingen kunnen verwarrend en moeilijk te interpreteren zijn. Probeer meerdere kleinere visualisaties te maken om deze informatie te verdelen over de pagina. Het stelt de lezer tevens in staat op efficiënte wijze visualisaties naast elkaar te vergelijkingen zodat de verschillen duidelijk worden. U kunt ook alternatieve dimensies en metingen gebruiken om de lezer in staat te stellen snel over te schakelen tussen metingen zonder dat een visualisatie onoverzichtelijk wordt. Ga voor meer informatie naar De gegevens van een visualisatie wijzigen.

Er is een aantal verschillende manieren beschikbaar waarop u het uiterlijk en de functionaliteit van uw app kunt verbeteren. Afhankelijk van uw doelgroep en de gegevens die u wilt markeren, kan de manier waarop u uw visualisatie ontwerpt aanzienlijke invloed hebben op de wijze waarop de lezer de gegevens interpreteert.

Ken uw grenzen

Mensen die uw visualisaties gebruiken, hebben mogelijk weinig schermruimte of een lage resolutie. Qlik Sense gebruikt een responsief ontwerp om deze beperkingen aan te pakken. Als de schermruimte of resolutie echter te beperkt is, zijn bepaalde aanpassingen in het ontwerp noodzakelijk. Mogelijke oplossingen zijn:

• Een subset gegevens weergeven in staafdiagrammen en lijndiagrammen. Als het aantal dimensiewaarden te groot is voor de breedte van de visualisatie, wordt een minidiagram met een scrollbar weergegeven.
• Samengevouwen menu's voor het selecteren van gegevensfilters. Als het aantal dimensiewaarden de beschikbare ruimte voor het filtervak overschrijdt, wordt het menu samengevouwen. App-gebruikers moeten in de titel in het filtervak op de dimensienaam klikken om een nieuw vak te openen. De gebruiker kan in het nieuwe vak de selectie maken. Als de ruimte beperkt is, worden dimensienamen mogelijk ook als weglatingstekens weergegeven in filtervaktitels. App-gebruikers moeten op de weglatingstekens klikken om de naam van het filtervak weer te geven.
• Afgekapte namen in diagramlegenda's. Namen die te lang zijn voor de beschikbare ruimte voor dimensies en metingen worden afgekapt. Aan het einde van een afgekapte naam worden weglatingstekens toegevoegd. App-gebruikers kunnen de muisaanwijzer op een afgekapte naam plaatsen en de volledige naam weergeven.
• Ontbrekende legenda's, labels en titels.

App-gebruikers kunnen visualisaties uitvouwen om enkele van deze problemen op te lossen. We raden u echter aan om uw apps te testen op de apparaten waarop ze kunnen worden gebruikt. U kunt ook verschillende hulpmiddelen gebruiken om te testen, zoals responsieve ontwerpmodus in Firefox (Ctrl + Shift + M). Indien nodig kunt u visualisaties verplaatsen naar nieuwe werkbladen, de hoeveelheid gegevens die worden weergegeven in visualisaties verminderen enzovoort.

Toegankelijkheid van kleur

Het kleurenspectrum is smaller voor mensen met een op kleur gebaseerde oogafwijking. Hierdoor kunnen zij uw visualisatie mogelijk anders interpreteren.

Zo zien sommige mensen bijvoorbeeld de kleuren rood en groen meer als geel of bruin. Deze vorm van kleurenblindheid voor rood en groen komt het vaakst voor. Dit is het vermelden waard omdat rood vaak een negatieve bijbetekenis heeft in gegevensvisualisaties, met name in financiën.

Een rode of groen KPI-status kan verwarrend zijn. U kunt vormen met kleuren gebruiken als prestatie-aanduidingen om uw ontwerpen toegankelijker te maken. Zo kunt u bijvoorbeeld een rode lege cirkel gebruiken voor slecht en een volle groene cirkel voor goed of een driehoek toevoegen als waarschuwingssymbool dat alleen verschijnt als een KPI-status op een onacceptabel niveau is aanbeland.

Lijnen, balken en taartpunten kunnen moeilijk te onderscheiden zijn als de kleuren vervormd zijn.

Ga voor meer informatie naar Het uiterlijk van een visualisatie wijzigen.

Plaatsing van filters en pictogrammen

Filters en pictogrammen vormen een essentieel onderdeel van gegevensvisualisatie, maar het kan moeilijk zijn om uit te zoeken waar u deze moet plaatsen en hoe u deze sorteert. U kunt vaak anticiperen op waar de gebruiker begint met lezen op basis van enkele erkende ontwerpprincipes.

Plaatsing aan de linkerkant

Verschillende populaire websites maken gebruik van navigatietegels en filters aan de linkerkant. Dit komt doordat veel talen van links naar rechts worden gelezen. Hierdoor kijken deze lezers meestal eerst aan de linkerkant. Gebruikers die inhoud doorlezen, concentreren zich vaak op de linkerkant van het scherm. Hoe verder naar rechts objecten zijn geplaatst, des te geringer de kans dat gebruikers ze zullen zien. Als u al uw filters en pictogrammen op elkaar stapelt aan de linkerkant, kent u ze allemaal hetzelfde gewicht toe.

Het tegenovergestelde geldt voor talen waarbij tekst van rechts naar links wordt geschreven. Houd dit in gedachten als uw apps in deze talen worden vertaald.

Plaatsing aan de bovenkant

Een andere veelgebruikte plaatsingsoptie voor pictogrammen en filters is boven aan een app. Als filters of pictogrammen niet allemaal aan de linkerkant worden geplaatst, ontstaat er meer ruimte voor grotere visualisaties met menu's die de aandacht afleiden. Als filters en pictogrammen boven visualisaties worden geplaatst, worden deze als gescheiden van de inhoud daaronder beschouwd. Dit kan helpen de lezer te laten zien dat u de prioriteit legt bij de filters of pictogrammen. Als al uw filters en pictogrammen naast elkaar boven aan het scherm staan, heeft het pictogram uiterst rechts meer gewicht en een hogere prioriteit voor de lezer.

Ga voor meer informatie naar Een app via werkbladen structureren.

Informatiehiërarchie

Soms wilt u dat uw lezer prioriteit geeft aan bepaalde visualisaties boven andere. U kunt een hiërarchie van informatie weergeven door enkele belangrijke aanbevolen procedures bij het ontwerpen te gebruiken. Zo kunt u bijvoorbeeld verschillende formaten gebruiken om sommige visualisaties te benadrukken. Grotere informatie wordt als belangrijker beschouwd, dus kunt u door de tekens of het diagram groter te maken de lezer laten zien waar deze het eerste moet kijken.

Plaatsing op de pagina speelt eveneens een rol in de informatiehiërarchie. De informatie boven aan een pagina wordt als belangrijker beschouwd dan informatie onder aan de pagina omdat deze als eerste wordt gelezen. Informatie op de eerste pagina wordt als belangrijker beschouwd dan informatie op de laatste pagina.

Context toevoegen aan KPI's

KPI's zijn een uitstekende manier om enkele van de belangrijke ideeën binnen uw app over te brengen. De waarden van KPI's bieden echter geen context met betrekking tot de cijfers en de berekeningen die achter de schermen. Een groen licht naast een KPI vertelt de lezer niet of de doelstelling ternauwernood is gerealiseerd of sterk is overtroffen.

U kunt context toevoegen aan uw KPI's door in kleinere tekst ondersteunende informatie op te nemen naast de waarde. Zo kunt u bijvoorbeeld de huidige waarde van de KPI vergelijken met de waarde van verleden jaar. U kunt ook een klein staafdiagram zonder assen of waarden toevoegen om informatie te verstrekken over de huidige trend.

De valkuilen van gegevensvisualisatie vermijden

Als u wilt profiteren van de voordelen van gegevensvisualisaties, moet u de valkuilen ervan vermijden. Hier volgen enkele van de meest voorkomende:

Kleurmisbruik

Gebruik niet te veel kleuren. Wees ervan bewust dat de verkeerde kleur op de verkeerde plek verwarring kan veroorzaken in plaats van duidelijkheid te bieden. Ook kan dezelfde kleur in verschillende delen van de wereld verschillende betekenissen hebben.

Verkeerd gebruik van cirkeldiagrammen

Plaats geen cirkeldiagrammen naast elkaar om met elkaar te vergelijken. Probeer niet te veel informatie in cirkeldiagrammen op te nemen.

Visuele ruis

Te veel informatie gaat ten koste van helderheid. Gebruik maximaal negen KPI's en verwijder alle overbodige visuele toeters en bellen.

Stijl boven inhoud

Een fraaie visualisatie is niet noodzakelijk de meest effectieve. Gebruik altijd beste praktijken op ontwerpgebied.

Onjuiste gegevens

Herken en verhelp problemen met uw gegevens voordat u deze presenteert. Onjuiste informatie doet het de visualisatie als geheel teniet.