Grafer - en ujævn designtur

Fortæl ikke nogen - men jeg elsker grafer. Sådan en underlig ting at holde kære, ved jeg. Da jeg skrev min bacheloropgave brugte jeg mere tid på at designe graferne end at skrive teksten (min professor nikker roligt fra sit kammer). Jeg ville gøre dem perfekte. Min afhandling byggede på en kvantitativ undersøgelse, hvor jeg havde samlet en masse data og gjort et forsøg på at belyse det med grafer. Jeg troede, de så virkelig cool ud. Sådanne dejlige kurver. Fantastisk afstand mellem de vandrette skillelinjer. Og de X- og Y-legender? Perfekt afbalanceret.

For en måned siden startede jeg et nyt projekt på mit nuværende arbejde, Tink. Det var en drøm, der blev gået i opfyldelse; Jeg ville bruge de kommende uger på at bygge et kæmpe analyseværktøj. Grafer overalt. Så meget data at fordøje. Så jeg huskede på mine gamle bachelor-afhandlingsgrafer og besluttede at gå ned i hukommelsesbanen og se på afhandlingen for første gang i 7 år. Jeg håbede på inspiration. Men da jeg åbnede dokumentet, lukkede jeg computeren i millisekunder efter at have set graferne. Hvad. A. Katastrofe. Efter at have stirret på en tom væg i 1 minut (eller 1 time - tid og rum forsvandt i et stykke tid) åbnede jeg min computer igen og prøvede at stryge ud af, hvad det hele hedder. Men kunne ikke. Der var bare for meget information om for få pixels. Jeg har ikke en scannet version af den, men her er en graf, jeg lavede på få minutter for at illustrere, hvor forfærdeligt det var.

Ikke min afhandling graf (heldigvis) men det var næsten lige så fjollet

Jeg vendte tilbage til virkeligheden og forsøgte at vaske af den nyligt opdagede lave selvtillid fra at se mine gamle grafer. Tolv selvmotiverende YouTube-klip senere åbnede jeg Sketch og startede mit nye grafprojekt til arbejde. Jeg var nødt til at gøre det bedre.

Uger gik, og jeg lavede sandsynligvis hundrede grafer. Jeg har gentaget dem og har modtaget feedback og implementeret opdateringer. Jeg tror, ​​jeg er et par skridt tættere på at oprette mindst en anstændig graf nu. I 6 kapitler vil jeg gennemgå - trin for trin - min proces og forklare, hvordan jeg designet, hvordan jeg itereres, og hvorfor slutproduktet ser ud og fungerer som det gør nu.

Del I

Start med det første udkast

Første udkast til grafen var bogstaveligt talt en kopi, indsætning og skala af en graf, som vi har lavet til den fintech-app, vi har bygget på Tink.

Fordele

Det gode ved denne graf er, at den er ren. Det har ikke nogen rigtig rod. Det er så få parametre, at det faktisk fungerer uden sagn / forklaringer på Y-aksen og X-aksen.

Cons

Vi bygger et avanceret analyseværktøj. Du får ikke oversigten over, hvad du leder efter, med denne lille mængde information. Det er vanskeligt at anvende avancerede metrics med så få kontroller. Det er ikke meget skalerbart for potentielle data, som vi gerne vil vise frem ad vejen.

Læringer

  • Gør det enkelt. Gør det nemt at læse - uden at skulle studere detaljer for at kunne forstå, hvad den prøver at fortælle.
  • Husk det, mens du også tilføjer mere funktionalitet og data til grafen (fordi der vil være en masse data nede på vejen).

Del II

Flytning til tilføjelse af funktionalitet og data

Efter at være født ud fra den minimalistiske graf ovenfor, lavede jeg et par ændringer, der var nødvendige for at kunne visualisere flere data såvel som mere avancerede data. Der skal også være en måde at filtrere dataene på.

Opdateringer

  • Filtrer efter tid
  • Hold musepekeren over et slutpunkt for at vise mere information
  • Datoer skal vises mere fremtrædende
  • Der skal være en linje bag musemarkøren for at indikere, hvor den er
  • Linjen i sig selv kan ikke være rund. Rundede hjørner afspejler ikke nøjagtige datapunkter, når du holder musen hen for at se mere nøjagtige data.
  • Større skrifttyper overalt, fordi dette ikke er mobilt, og vi har plads til at lege med her.
  • Der skal være linjer, der angiver x-aksen.

Fordele

Denne graf er tydeligere; det viser flere datapunkter og er detaljerede nok til at få fat i, hvordan det går med din app. Det er også dejligt, at du kan svæve og få mere præcise detaljer, hvis du leder efter noget specifikt. Linjerne er ikke længere afrundede, hvilket gør det mere nøjagtigt. Datoerne vises tydeligt nedenfor, hængende alene, så de er lette at læse.

Cons

Det bliver lidt rodet i øverste højre hjørne. Tidsfilterets filtersektion bliver lidt overfyldt med Y-aksens værdier. Jeg tror også, at der er for få linjer bag, der angiver noget, hvor 500-datapunktet er. Selvom vores brandfarve er den slags laks, da jeg viste dette til en udvikler, oplevede de det, som om det indikerede fejl.

Læringer

  • Du kan lave en avanceret graf ved ikke at vise for meget, men ved at lade brugeren opdage, hvad de vil ved handlinger (som her, filter og svæver).
  • Jeg skulle flytte Y-aksenumrene til venstre, da det ikke foregår så meget på den side.
  • Evaluer farven

Del III

Det er de små ting

Et par stilforbedringer på hver komponent var med til at gøre dette klarere. I iterationsdelen af ​​at udvikle et design behøver det ikke at tegnes fra starten, som vi alle nu: At arbejde med en komponent hver - komponent for komponent - giver det et søde helhedsresultat.

Graf: Del III

Opdateringer

  • Ændret farve til vores sekundære mærkefarve: mørkegrøn
  • Flyttede Y-aksenumre til venstre
  • Tilføjet små linjer under bundlinjen for at gøre datoerne bedre
  • Tilføjet en linje mellem hver "hele" linje for at gøre det lettere at læse grafen uden at holde musepekeren, mens du stadig holder den løs, så den ikke er overvældet med linjer
  • Flyttede filtrering til et underafsnit, der kan foldes sammen for at give strømmen til at filtrere til strømbrugerne, samtidig med at filtreringen er skjult for de fleste almindelige tilfælde.

Fordele

Akkumuleringerne fra alle de foregående fordele kunne indsættes her såvel som den ekstra fordel ved at flytte Y-aksenumrene til venstre. Det er nu lettere at læse dem, og handlingerne (filteret) skiller sig ud mere end tidligere, da det var overfyldt på højre side. Linjerne gør det lettere at læse, og grafen føles stadig ren og klar. Det er dejligt, at der ikke er nogen filtrering, der tager for meget plads øverst til højre. Med flere tilgængelige filterindstillinger ville det se rodet ud.

Cons

Foldede filtre er ikke optimale for strømbrugere. Men ved at udvide filtrene huskes det til næste graf og næste session for alle, der ønsker at se filtre udvidet.

Læringer

  • Tilføjelse af små detaljer her og der vil helt sikkert gøre det lettere at læse.
  • Men det er nødvendigt at holde de tilføjede detaljer til et minimum for at holde dem rene og klare.
  • Da jeg viste dette til en kollega, spurgte han, om et søjlediagram ikke er den bedre mulighed for denne type data ...
  • Så sidste læring var at genoverveje det hele. Hvilket er aldrig godt, fordi jeg har brugt en masse tid med det. Men også meget godt, da der var plads til forbedringer.

Del IV

I slutningen skal du starte fra begyndelsen

Så når man ser på linjegrafen, giver værdien mellem det ene punkt og det næste kun mening for visse data.

  • Som penge, hvis du vil vise dine personlige kreditkortudgifter, giver en linjegraf mening, for mellem punkt a og b er der en nøjagtig værdi af penge.
  • Men at vise noget binært, der ikke rigtig kan være andet end et heltal, og som det er vist i grafen nedenfor, er det mellem to datapunkter, hvor det ikke giver mening at prøve at vise folk i den rigtige graf i løbet af natten. Vi ved, at det er et tilbagegang, men linjen kan ikke forklare, hvor meget præcist, da vi ikke holder oversigt over faldet pr. Sekund.
Grafer: Del IV

Læringer

  • Prøv søjlediagrammer for scenariet, hvor ændringen mellem datapunkt a og b ikke kan forklares med en linje.

Del V

En ny dag

Med feedbacken tegnet jeg grafen til søjler i stedet for en linje. Det viser virkelig klare data for hver X-akseværdi og skubbede mig 3% tættere på nirvana, når man kiggede på den.

Graf: Del V

Opdateringer

Søjler i stedet for en linje.

Fordele

Viser klart mængden i x-akse. Nem at læse hver dato også; Det er tydeligere at se en bjælke for en dato, end når du har en linje, der går mellem flere datoer. Det gør det lettere at scanne.

Cons

For meget hvidt rum mellem hver graf, men kunne løses ved at justere bjælkerne såvel som afstanden mellem yderste højre og venstre af beholderen.

Del VI

Indpakning af det

Jeg vil gerne afslutte artiklen med et par ekstra indsigter, jeg har fået under hele denne proces.

1. Hold det simpelt dumt

1. Hold det simpelt dumt

Til venstre er dataene opdelt til to forskellige grafer, som du skifter mellem i stedet for. Dette skyldes, at det bliver rodet og overfyldt og uleseligt, så snart du begynder at tilføje flere grafer (som det ses til højre). Visning af to linjer fungerer muligvis, men ikke ideelt, men når du begynder at tilføje mere end to linjer - er det et gætspil, hvad graferne er og ikke er.

Sidste note om at have flere linjer i en graf: hvad sker der, hvis de har nøjagtigt de samme data? De vil bare være oven på hinanden og annullere en af ​​dem ved at skjule den under den anden.

2. Fremhæv det, der er vigtigt

2. Fremhæv det, der er vigtigt

Når du vil se detaljerne i en bestemt bjælke eller bestemte data - gør det let at læse og forstå. Til venstre svæver brugeren hen over et bestemt datapunkt, og de andre bjælker falmer ud for at gøre det let at læse. De andre er ikke helt skjult, fordi du stadig ønsker at sammenligne denne bjælke med de andre. Til højre er der ingen falmende virkning, og det er en kamp for at læse denne bjælke på grund af den.

3. Tabular vs. proportional

3. Tabular vs. proportional

Det er ingen kardinal synd at bruge en proportional skrifttype, men hvis du er ved at bygge et produkt, der tynger meget mod at udsætte en masse data i tabeller og grafer, er det at tilføje en sekundær skrifttype, der er egnet til at vise tal på en tabelformet måde god ide. Det stiller numrene op, så de har samme bredde, og følgelig justeres kolonnerne ordentligt. En dejlig artikel og et mere dybdyb i dette findes her i en artikel af Matthew Ström.

Det er en kardinal synd på min nuværende arbejdsplads at bruge flere skrifttyper, hvorfor vi opbevarer vores proportionelle skrifttype i grafer. Men mit råd er: Hvis du er i færd med at vælge en ny skrifttype til din virksomhed eller starte et nyt firma og får friheden til at vælge en skrifttype efter eget valg, skal du kontrollere, om den skrifttype indeholder en tabelversion - de gør sjældent , selv til premium priser.

Del VII

Det er faktisk indpakningen! Jeg tror, ​​jeg vil arbejde på at designe grafer her og der i resten af ​​mit liv, så det at prøve at føre en fortegnelse over indlæringer undervejs virker som en af ​​de sjældne gode ideer, jeg har. Vi får at se.

Meget af designforbedringerne og feedbacken, der gjorde dette bedre undervejs, skyldes udviklerne (Jon, Gustav, Stephan osv.) I mit team hos Tink såvel som mine designkolleger som Henrik Hedvall.

Hvis du har nogen anbefalinger eller indsigt, tøv ikke med at nå ud til mig. Tak for at have læst!

Du er velkommen til at se og læse mere af mit arbejde på min portefølje eller tilføje mig på LinkedIn eller følge min designrejse på Dribbble.