Grafieken - een hobbelige ontwerprit

Vertel het aan niemand, maar ik ben dol op grafieken. Zoiets vreemds om lief te houden, ik weet het. Toen ik mijn bachelorscriptie schreef, besteedde ik meer tijd aan het ontwerpen van de grafieken dan aan het schrijven van de tekst (mijn professor knikt kalm vanuit zijn kamer). Ik wilde ze perfect maken. Mijn scriptie was gebaseerd op een kwantitatief onderzoek, waarbij ik veel gegevens had verzameld en een poging deed om het met grafieken te verlichten. Ik vond ze er echt cool uitzien. Wat een mooie rondingen. Verbazingwekkende afstand tussen de horizontale scheidingslijnen. En die X- en Y-legendes? Perfect uitgebalanceerd.

Een maand geleden begon ik aan een nieuw project op mijn huidige werk, Tink. Het was een droom die uitkwam; Ik zou de komende weken besteden aan het bouwen van een enorme analyse-tool. Overal grafieken. Zoveel gegevens om te verwerken. Dus ik dacht terug aan mijn oude Bachelor Thesis-grafieken en besloot om door de geheugensteeg te lopen en voor het eerst in 7 jaar naar de Thesis te kijken. Ik hoopte op inspiratie. Maar toen ik het document opende, sloot ik de computer in milliseconden na het bekijken van de grafieken. Wat. Een ramp. Na 1 minuut naar een lege muur te hebben gekeken (of 1 uur - tijd en ruimte verdwenen een tijdje), opende ik mijn computer opnieuw en probeerde wat het allemaal was. Maar kon het niet. Er was gewoon te veel informatie over te weinig pixels. Ik heb er geen gescande versie van, maar hier is een grafiek die ik in minuten heb gemaakt om te illustreren hoe verschrikkelijk het was.

Niet mijn scriptie-grafiek (gelukkig) maar het was bijna net zo gek

Ik keerde terug naar de realiteit en probeerde de nieuw ontdekte lage zelfrespect weg te wassen door mijn oude grafieken te bekijken. Twaalf zelf-motiverende YouTube-clips later, opende ik Sketch en begon mijn nieuwe grafiekenproject voor werk. Ik moest het beter doen.

Weken gingen voorbij en ik maakte waarschijnlijk honderd grafieken. Ik heb het herhaald en heb feedback ontvangen en updates geïmplementeerd. Ik geloof dat ik nu een paar stappen dichter bij het maken van ten minste een fatsoenlijke grafiek ben. In 6 hoofdstukken zal ik - stap voor stap - mijn proces doorlopen en uitleggen hoe ik heb ontworpen, hoe ik itereerde en waarom het eindproduct er nu uitziet en functioneert.

Deel I

Beginnen met het eerste ontwerp

Het eerste ontwerp van de grafiek was letterlijk een kopie, plak en schaal van een grafiek die we hebben gemaakt voor de fintech-app die we bij Tink hebben gebouwd.

Voordelen

Het mooie van deze grafiek is dat deze schoon is. Het heeft geen echte rommel. Het zijn zo weinig parameters dat het eigenlijk werkt zonder legendes / verklaringen van de Y-as en X-as.

Nadelen

We bouwen aan een geavanceerde analyse-tool. Met deze kleine hoeveelheid informatie krijgt u niet de uitsplitsing van wat u zoekt. Het is moeilijk om met zo weinig besturingselementen geavanceerde statistieken toe te passen. Het is niet erg schaalbaar voor potentiële gegevens die we onderweg willen presenteren.

Lessen

  • Maak het simpel. Maak het gemakkelijk te lezen - zonder details te hoeven bestuderen om te begrijpen wat het probeert te vertellen.
  • Houd dat in gedachten terwijl u ook meer functionaliteit en gegevens aan de grafiek toevoegt (omdat er onderweg veel gegevens zullen zijn).

Deel II

Overgaan op het toevoegen van functionaliteit en gegevens

Geboren uit de bovenstaande minimalistische grafiek, heb ik een aantal wijzigingen aangebracht die nodig waren om meer gegevens en meer geavanceerde gegevens te kunnen visualiseren. Er moet ook een manier zijn om de gegevens te filteren.

Updates

  • Filteren op tijd
  • Plaats de muisaanwijzer op een eindpunt en moet meer informatie weergeven
  • Datums moeten prominenter worden weergegeven
  • Er moet een lijn achter de zweefcirkel zijn om aan te geven waar deze zich bevindt
  • De lijn zelf kan niet rond zijn. Afgeronde hoeken geven geen nauwkeurige gegevenspunten weer bij het zweven om meer exacte gegevens te zien.
  • Overal grotere lettertypen omdat dit niet mobiel is en we hier ruimte hebben om mee te spelen.
  • Er moeten lijnen zijn die de x-as aangeven.

Voordelen

Deze grafiek is duidelijker; het toont meer datapunten en is gedetailleerd genoeg om grip te krijgen op hoe het gaat met uw app. Het is ook leuk dat je kunt zweven en meer exacte details kunt krijgen als je op zoek bent naar iets specifieks. De lijnen zijn niet meer afgerond waardoor het ook preciezer is. De datums worden hieronder duidelijk weergegeven en hangen alleen zodat ze gemakkelijk te lezen zijn.

Nadelen

Het wordt een beetje rommelig in de rechterbovenhoek. Het filtergedeelte van het tijdfilter raakt een beetje druk met de Y-aswaarden. Ik geloof ook dat er te weinig regels achter zijn die enigszins aangeven waar het 500-gegevenspunt zich bevindt. Hoewel onze merkkleur dat soort zalm is, toen ik dit aan een ontwikkelaar liet zien, ervoeren ze het alsof het een fout aangaf.

Lessen

  • U kunt een geavanceerde grafiek maken door niet te veel te laten zien, maar door de gebruiker te laten ontdekken wat ze willen door acties (zoals hier, filteren en zweven).
  • Ik moet de Y-asnummers naar links verplaatsen, omdat het aan die kant niet zo veel gebeurt.
  • Evalueer de kleur

Deel III

Het zijn de kleine dingen

Een paar stijlverbeteringen op elk onderdeel hebben dit duidelijker gemaakt. In het iteratiegedeelte van het ontwikkelen van een ontwerp hoeft het niet vanaf het begin opnieuw te worden getekend, zoals we nu allemaal doen: werken met elk één component - component voor component - geeft het een zoet holistisch resultaat.

Grafiek: deel III

Updates

  • De kleur is gewijzigd in onze secundaire merkkleur: donkergroen
  • Y-asnummers naar links verplaatst
  • Kleine lijnen toegevoegd onder de onderste regel om de datums beter uit te lijnen
  • Een lijn toegevoegd tussen elke "hele" lijn om het gemakkelijker te maken om de grafiek te lezen zonder te zweven, terwijl deze nog steeds los blijft zodat het niet wordt overweldigd door lijnen
  • Filtering verplaatst naar een subsectie die opvouwbaar is om de kracht van filtering te geven aan hoofdgebruikers, terwijl de filtering verborgen blijft voor de meest voorkomende case-gebruiker.

Voordelen

De accumulaties van alle voorgaande Pro's kunnen hier worden ingevoegd, evenals het extra voordeel van het naar links verplaatsen van de Y-asnummers. Het is nu gemakkelijker om ze te lezen en de acties (filter) vallen meer op dan voorheen toen het aan de rechterkant druk was. De lijnen maken het gemakkelijker om te lezen en de grafiek voelt nog steeds schoon en duidelijk aan. Het is fijn dat er geen filtering is die te veel ruimte rechtsboven in beslag neemt. Met meerdere beschikbare filteropties zou het er rommelig uitzien.

Nadelen

Gevouwen filters zijn niet optimaal voor ervaren gebruikers. Maar door de filters uit te breiden, wordt dit onthouden aan de volgende grafiek en de volgende sessie voor iedereen die de filters uitgebreid wil zien.

Lessen

  • Door hier en daar kleine details toe te voegen, wordt het zeker gemakkelijker om te lezen.
  • Het is echter noodzakelijk om de toegevoegde details tot een minimum te beperken om het nog steeds schoon en duidelijk te houden.
  • Toen ik dit aan een collega liet zien, vroeg hij of een staafdiagram niet de betere optie is voor dit soort gegevens ...
  • Dus het laatste leren was om de hele zaak te heroverwegen. Dat is nooit goed, want ik heb er veel tijd aan besteed. Maar ook erg goed, want er was ruimte voor verbetering.

Deel IV

Begin aan het einde

Dus kijkend naar de lijngrafiek, is de waarde tussen het ene punt en het volgende alleen zinvol voor bepaalde gegevens.

  • Net als geld, als u uw persoonlijke creditcarduitgaven wilt laten zien, is een lijngrafiek logisch, want tussen punt a en b is er een exacte waarde van geld.
  • Maar iets binairs tonen dat niet echt een geheel getal kan zijn en zoals weergegeven in de onderstaande grafiek, het is tussen twee gegevenspunten, het is niet logisch om mensen in de juiste grafiek te laten zien tijdens de nacht. We weten dat het een daling is, maar de regel kan niet precies verklaren hoeveel, omdat we de afname per seconde niet bijhouden.
Grafieken: deel IV

Lessen

  • Probeer staafdiagrammen voor het scenario waarbij de verandering tussen gegevenspunt a en b niet kan worden verklaard door een lijn.

Deel V

Een nieuwe dag

Met de feedback heb ik de grafiek opnieuw omgezet in staven in plaats van een lijn. Het toont echt duidelijke gegevens voor elke X-aswaarde en duwde me 3% dichter bij nirvana als ik ernaar keek.

Grafiek: deel V

Updates

Bars in plaats van een lijn.

Voordelen

Duidelijk het bedrag op de x-as. Gemakkelijk om elke datum ook te lezen; het tonen van een balk voor een datum is duidelijker te zien dan wanneer een lijn tussen meerdere datums loopt. Het maakt het scannen eenvoudiger.

Nadelen

Te veel witte ruimte tussen elke grafiek, maar kan worden opgelost door de balken en de afstand tussen uiterst rechts en links van de container aan te passen.

Deel VI

Inpakken

Ik wil het artikel afsluiten met een paar extra inzichten die ik tijdens dit hele proces heb opgedaan.

1. Houd het simpel dom

1. Houd het simpel dom

Aan de linkerkant zijn de gegevens opgesplitst in twee verschillende grafieken waar u in plaats daarvan tussen kunt schakelen. Dit komt omdat het rommelig en druk en onleesbaar wordt zodra je meer grafieken toevoegt (zoals rechts te zien). Twee lijnen weergeven werkt misschien, maar niet ideaal, maar wanneer u meer dan twee lijnen begint toe te voegen, is het een raadspel wat de grafieken wel en niet zijn.

Laatste opmerking over het hebben van meerdere lijnen in één grafiek: wat gebeurt er als ze exact dezelfde gegevens hebben? Ze zullen gewoon op elkaar liggen en een van hen opheffen door het onder de andere te verbergen.

2. Markeer wat belangrijk is

2. Markeer wat belangrijk is

Wanneer u de details van een bepaalde balk of bepaalde gegevens wilt zien - maak het gemakkelijk te lezen en te begrijpen. Aan de linkerkant zweeft de gebruiker over een bepaald datapunt en de andere balken vervagen om het gemakkelijk te kunnen lezen. De anderen zijn niet volledig verborgen omdat je die balk misschien nog wel wilt vergelijken met de anderen. Aan de rechterkant is er geen vervagend effect en het is een worsteling om die balk te lezen vanwege het.

3. Tabelvormig versus proportioneel

3. Tabelvormig versus proportioneel

Het is geen kardinale zonde om een ​​proportioneel lettertype te gebruiken, maar als je op het punt staat een product te bouwen dat sterk neigt naar het blootstellen van veel gegevens in tabellen en grafieken, is het toevoegen van een secundair lettertype dat geschikt is om getallen in tabelvorm weer te geven een goed idee. Het lijnt de nummers uit zodat ze dezelfde breedte hebben en dus de kolommen correct zijn uitgelijnd. Een mooi artikel en een meer diepgaande duik hier vind je hier, in een artikel van Matthew Ström.

Het is een kardinale zonde op mijn huidige werkplek om meerdere lettertypen te gebruiken, daarom houden we ons proportionele lettertype in grafieken. Maar mijn advies is: als u bezig bent met het selecteren van een nieuw lettertype voor uw bedrijf of een nieuw bedrijf begint en de vrijheid krijgt om een ​​lettertype van uw keuze te selecteren, controleer dan of dat lettertype een tabelversie biedt - ze doen het zelden , zelfs tegen premium prijzen.

Deel VII

Dat is eigenlijk de wrap! Ik geloof dat ik de rest van mijn leven hier en daar grafieken ga ontwerpen, dus het lijkt me een van die zeldzame goede ideeën die ik onderweg heb bij te houden. We zullen zien.

Veel van de ontwerpverbeteringen en feedback die dit onderweg hebben verbeterd, zijn te danken aan de ontwikkelaars (Jon, Gustav, Stephan, enz.) In mijn team bij Tink en mijn ontwerpcollega's zoals Henrik Hedvall.

Als u aanbevelingen of inzichten heeft, aarzel dan niet om contact met mij op te nemen. Bedankt voor het lezen!

Voel je vrij om meer van mijn werk te zien en te lezen in mijn portfolio of voeg me toe op LinkedIn of volg mijn ontwerpreis op Dribbble.