Kaaviot - kuoppainen suunnittelumatka

Älä kerro kenellekään - mutta rakastan kuvaajia. Tällainen outo asia pitää rakas, tiedän. Kun kirjoitin kandidaatintutkielmaani, vietin enemmän aikaa kuvaajien suunnitteluun kuin tekstin kirjoittamiseen (professorini nyökkää rauhallisesti kammiostaan). Halusin tehdä niistä täydellisiä. Opinnäyteni rakeni kvantitatiiviseen tutkimukseen, jossa olin kerännyt paljon tietoa ja yrittänyt valaista sitä graafisesti. Luulin, että he näyttivät todella siistiltä. Niin mukavia käyriä. Hämmästyttävä etäisyys vaakasuorien jakajien välillä. Ja nuo X- ja Y-legendat? Täysin tasapainoinen.

Kuukausi sitten aloitin uuden projektin nykyisessä työssäni Tinkissä. Se oli unelma; Vietäisin seuraavat viikot valtavan analytiikkatyökalun rakentamiseen. Kaaviot kaikkialla. Niin paljon tietoa sulavaa. Joten muistelin vanhoista kandidaatintutkimuksistani ja päätin kävellä muistiradalla ja katsoa opinnäytetyötä ensimmäistä kertaa 7 vuoden aikana. Toivoin inspiraatiota. Mutta kun avasin asiakirjan, suljin tietokoneen millisekunnissa tarkastellen kuvaajia. Mitä. A. Katastrofi. Katseltuaan tyhjää seinää minuutin ajan (tai yhden tunnin ajan - aika ja avaruuden tyyppi kadottivat hetkeksi), avasin tietokoneeni uudelleen ja yritin selvittää, mitä se kaikki merkitsee. Mutta ei voinut. Liian vähän pikseliä oli vain liian paljon tietoa. Minulla ei ole skannattua versiota siitä, mutta tässä on kaavio, jonka tein muutamassa minuutissa havainnollistaakseen kuinka kauheaa se oli.

Ei tutkielmakaavioni (onneksi), mutta se oli melkein typerä

Palasin todellisuuteen ja yritin pestä äskettäin löydetyn alhaisen itsetunnon seuraamalla vanhoja kaavioita. Kaksitoista itsemotivaatiota tarjoavaa YouTube-leikettä myöhemmin avasin Sketchin ja aloitin uuden graafisen projektini työhön. Minun piti tehdä paremmin.

Viikon kulunut ja tein todennäköisesti sata kuvaajaa. Olen toistanut niitä ja saanut palautetta ja toteuttanut päivityksiä. Uskon, että olen pari askelta lähemmäs ainakin kunnollisen kuvaajan luomista nyt. Kuudessa luvussa käyn läpi - askel askeleelta - prosessini ja selitän, kuinka suunnittelin, kuinka iteroin ja miksi lopputuote näyttää ja toimii kuten nykyään.

Osa I

Aloitetaan ensimmäisestä luonnoksesta

Graafin ensimmäinen luonnos oli kirjaimellisesti kopio, liitä ja mittakaava graafista, jonka olemme tehneet Tinkissä rakennetulle fintech-sovellukselle.

Hyödyt

Hyvä asia tässä kaaviossa on, että se on puhdas. Sillä ei ole todellista sotkua. Sillä on niin vähän parametreja, että se todella toimii ilman Y-akselin ja X-akselin legendoja / selityksiä.

Miinukset

Rakennamme edistynyttä analytiikkatyökalua. Et saa erittelyä etsimäsi tällä pienellä tietomäärällä. On vaikeata käyttää edistyneitä mittareita niin harvoilla säätimillä. Se ei ole kovin skaalautuvaa potentiaalisten tietojen suhteen, joita haluaisimme esitellä tiellä.

Opinnot

  • Tee siitä yksinkertaista. Tee siitä helppo lukea - joutumatta tutkimaan yksityiskohtia ymmärtääksesi mitä se yrittää kertoa.
  • Pidä tämä mielessä ja lisää samalla graafisuuteen enemmän toimintoja ja tietoja (koska tiellä on paljon tietoa).

Osa II

Siirtyminen toiminnallisuuden ja datan lisäämiseen

Syntyessään yllä olevasta minimalistisesta kuvaajasta tein parin muutosta, joita tarvittiin voidakseen visualisoida enemmän tietoja ja edistyneempiä tietoja. Lisäksi on oltava tapa suodattaa tietoja.

Päivitykset

  • Suodata ajan mukaan
  • Vie hiiri päätepisteen yli, jos haluat näyttää lisätietoja
  • Päivämäärät on osoitettava näkyvämmin
  • Leijuvan ympyrän takana on oltava viiva osoittaaksesi missä se on
  • Linja sinänsä ei voi olla pyöreä. Pyöristetyt kulmat eivät heijasta tarkkoja tietopisteitä näytettäessä tarkempia tietoja.
  • Suurempia fontteja kaikkialla, koska tämä ei ole mobiili ja meillä on tilaa leikkiä täällä.
  • X-akselia osoittavat viivat on oltava.

Hyödyt

Tämä kaavio on selkeämpi; se näyttää enemmän datapisteitä ja on riittävän yksityiskohtainen, jotta saadaan käsitys siitä, miten se toimii sovelluksellesi. On myös hienoa, että voit hiirellä ja saada tarkempia tietoja, jos etsit jotain tarkkaa. Viivat eivät ole enää pyöristettyjä, mikä tekee siitä myös tarkemman. Päivämäärät näkyvät selvästi alla, roikkuu yksin, jotta niitä on helppo lukea.

Miinukset

Siitä tulee vähän sotkuinen oikeassa yläkulmassa. Aikasuodattimen suodatinosa on hieman täynnä Y-akselin arvoja. Uskon myös, että takana on liian vähän rivejä, mikä osoittaa jonkin verran, missä 500 datapistettä on. Vaikka tuotemerkkivärimme on sellaista lohta, kun osoitin tämän kehittäjälle, he kokivat sen kuin se osoitti virhettä.

Opinnot

  • Voit tehdä tarkennetun kuvaajan näyttämättä liian paljon, mutta antamalla käyttäjän havaita haluamansa toiminnot (kuten tässä, suodattaa ja viedä hiiren osoittimella).
  • Minun pitäisi siirtää Y-akselin numeroita vasemmalle, koska se ei kulje niin paljon sillä puolella.
  • Arvioi väri

III osa

Se on pieniä asioita

Muutaman tyylin parannukset jokaisessa komponentissa auttoivat tekemään siitä selkeämmän. Suunnittelun kehittämisen iteraation osassa sitä ei tarvitse piirtää uudelleen alusta alkaen, kuten me kaikki nyt: työskentelemällä yhden komponentin kanssa - komponentti komponentin mukaan - antaa sille makean kokonaistuloksen.

Kaavio: Osa III

Päivitykset

  • Vaihdettu väri toissijaiseen tuotemerkkiväriimme: tummanvihreä
  • Y-akselin numeroita on siirretty vasemmalle
  • Lisätty pieniä rivejä alareunan alle, jotta päivämäärät tasaantuvat paremmin
  • Lisätty rivi jokaisen ”kokonaisen” rivin väliin, jotta kaavion lukeminen on helpompaa ilman hiiren pitämistä pitäen sitä silti löysänä, jotta se ei ole viivojen varassa
  • Siirtyi suodattamiseen osaosaan, joka on taitettava, jotta suodattamisen teho saadaan energiankäyttäjille, samalla kun suodatus on piilotettu yleisimmälle käyttäjälle.

Hyödyt

Kaikkien aikaisempien ammattilaisten keräykset voitaisiin lisätä tähän, samoin kuin Y-akselinumeroiden siirtämisen vasemmalle lisäetuna. Nyt niiden lukeminen on helpompaa, ja toiminnot (suodatin) ovat erottuvat enemmän kuin aiemmin, kun se oli täynnä oikealla puolella. Rivit helpottavat lukemista ja kuvaaja tuntuu silti puhtaalta ja selkeältä. On hienoa, että oikeassa yläkulmassa ei ole suodatusta, joka vie liian paljon tilaa. Koska käytettävissä on useita suodatusvaihtoehtoja, se näyttää sotkeltaiselta.

Miinukset

Taitetut suodattimet eivät ole optimaalisia energiankäyttäjille. Laajentamalla suodattimia se muistetaan seuraavaan kuvaajaan ja seuraavaan istuntoon kaikille, jotka haluavat nähdä suodattimien laajentuvan.

Opinnot

  • Pienten yksityiskohtien lisääminen täällä helpottaa lukemista.
  • Lisättyjen yksityiskohtien pitäminen minimissä on välttämätöntä, jotta ne pysyisivät silti puhtaina.
  • Kun osoitin tämän kollegalle, hän kysyi, onko pylväskaavio parempi vaihtoehto tällaiselle tiedolle ...
  • Joten viimeksi oppimisen tarkoituksena oli miettiä koko asia uudelleen. Mikä ei ole koskaan hyvä, koska vietin paljon aikaa sen kanssa. Mutta myös erittäin hyvä, koska parantamisen varaa oli.

Osa IV

Aloita lopussa alusta

Joten viivakaavion perusteella yhden pisteen ja seuraavan välinen arvo on järkevä vain tietyille tiedoille.

  • Rahan tavoin, jos haluat näyttää henkilökohtaiset luottokorttikulut, viivakuvaaja on järkevä, koska pisteiden a ja b välillä on rahan tarkka arvo.
  • Mutta näyttää jotain binaarista, joka ei oikeastaan ​​voi olla muuta kuin kokonaisluku, ja kuten alla olevassa kaaviossa on esitetty, se on kahden datapisteen välillä, yrittämällä näyttää ihmisiä oikeassa kaaviossa yön aikana ei ole mitään järkeä. Tiedämme, että se on lasku, mutta linja ei pysty selittämään kuinka paljon tarkalleen, koska emme pidä laskua sekunnissa.
Kaaviot: Osa IV

Opinnot

  • Kokeile pylväskaavioita tilanteesta, jossa muutosta datapisteiden a ja b välillä ei voida selittää rivillä.

Osa V

Uusi päivä

Palautteen avulla piirrän kuvaajan uudelleen palkkiksi viivan sijasta. Se näyttää todella selkeät tiedot jokaisesta X-akselin arvosta ja työnsi minut 3% lähemmäksi nirvanaa sitä tarkastellessa.

Kaavio: Osa V

Päivitykset

Baarit linjan sijasta.

Hyödyt

Määrä näkyy selvästi x-akselilla. Helppo lukea myös jokainen päivämäärä; päivämäärän palkin näyttäminen on selkeämpää nähdä kuin silloin, kun linja kulkee usean päivämäärän välillä. Se helpottaa skannausta.

Miinukset

Liian paljon valkoista tilaa kunkin kuvaajan välillä, mutta se voidaan ratkaista säätämällä palkkeja sekä etäisyyttä oikean ja vasemman reunan välillä.

Osa VI

Kääri se

Haluaisin viimeistellä artikkelin parilla ylimääräisellä näkemyksellä, jotka olen saanut koko prosessin aikana.

1. Pidä se yksinkertaisena tyhmäna

1. Pidä se yksinkertaisena tyhmäna

Vasemmalla puolella tiedot on jaettu kahteen eri kaavioon, joiden välillä vaihdetaan. Tämä johtuu siitä, että se muuttuu sotkuiseksi, tungosta ja lukukelvottomaksi heti, kun lisäät lisää kaavioita (kuten oikealla). Kahden rivin näyttäminen saattaa toimia, mutta ei ihanteellisesti, mutta kun lisäät enemmän kuin kaksi riviä - se on arvauspeli, mitä kuvaajat ovat ja mitä eivät.

Viimeinen huomautus siitä, että yhdellä kuvaajalla on useita rivejä: mitä tapahtuu, jos niillä on täsmälleen samat tiedot? He ovat vain toistensa päällä ja peruuttavat yhden niistä piilottamalla sen toisen alle.

2. Korosta mikä on tärkeää

2. Korosta mikä on tärkeää

Kun haluat nähdä tietyn palkin tai tietyt tiedot - tee siitä helppo lukea ja ymmärtää. Vasemmalla puolella käyttäjä siirtyy hiiren tietyn datapisteen päälle ja muut palkit häviävät helpottamaan lukemista. Muita ei ole piilotettu kokonaan, koska haluat silti verrata kyseistä palkkia muihin. Oikealla puolella ei ole häipyvää vaikutusta, ja sen takia on vaikea lukea kyseinen palkki.

3. Taulukko vs. suhteellinen

3. Taulukko vs. suhteellinen

Suhteellisen fontin käyttäminen ei ole kardinaalia syntiä, mutta jos aiot rakentaa tuotetta, joka nojaa voimakkaasti paljastamaan paljon tietoja taulukoissa ja kaavioissa, lisäämällä toissijainen fontti, joka soveltuu numeroiden näyttämiseen taulukkotavalla, on hyvä idea. Se linjaa numerot siten, että niiden leveys on sama ja sarakkeet kohdistuvat siten oikein. Ihastuttava artikkeli ja syvällisempi sukellus löytyvät täältä, Matthew Strömin artikkelissa.

Useiden kirjasimien käyttäminen on nykyisen työpaikan sydänsynti, joten pidämme suhteellista kirjasinta graafina. Mutta neuvoisin sanani: jos valitset yrityksellesi uutta kirjasinta tai perustat uuden yrityksen ja saat vapauden valita haluamasi kirjasin, tarkista, onko kyseisessä kirjasimessa taulukkoversio - he harvoin tekevät , jopa premium-hinnoilla.

Osa VII

Se on itse asiassa kääre! Uskon työskenteleväni suunnitella kuvaajia täällä ja siellä koko elämäni, joten yritän pitää kirjaa oppimista matkan varrella näyttää olevan yksi niistä harvinaisista hyvistä ideoista, joita minulla on. Katsotaan.

Paljon suunnittelun parannuksia ja palautetta, jotka tekivät tästä parempaa matkalla, saavat Tink-tiimini kehittäjät (Jon, Gustav, Stephan jne.) Sekä suunnittelukollegani Henrik Hedvallin tapaan.

Jos sinulla on suosituksia tai oivalluksia, älä epäröi ottaa minuun yhteyttä. Kiitos lukemisesta!

Voit nähdä ja lukea lisää töistäni portfoliossani tai lisätä minut LinkedIniin tai seurata suunnittelureittiäni Dribbblessa.