Data visualization in the interface

My name is Ilona and I am Senior Experience Designer at EPAM. I design complex interfaces for foreign customers, make presentations, mentor designers. In my free time, I teach interface design at ITMO University's master's program and run a  Telegram channel about UX design .





In this article, I want to talk a little about the history of infographics and how, from a design perspective, to visualize data and display it effectively in an interface.






Multiple data, which, in principle, can be considered Big Data, is a set of information (numbers, percentages, statuses, parameters, text, etc.), on the basis of which the user can draw certain conclusions.





Dashboards loved by designers  β€Šare the result of visualizing such data.





Dashboard by Ghulam Rasool
Dashboard by Ghulam Rasool

But scattering colorful graphics across the screen doesn't mean visualizing information well.





, β€” .

?





.





 β€”   , .





18 , ,  Commercial and Political Atlas and Statistical Breviary. , , .





The first bar chart by William Playthey, 1781
, 1781

  , ,  The Visual Display of Quantitative Information , .





E. Tufty's Data Books
.

, /. () , () .





, , β€” , , β€” .





, .

– .





Illustration from the book by E. Tufty
.

:





  1. β€” . , ..





  2. β€” .





  3. β€” (, «» β€” , «» β€” ). , 4% -. , .





  4. β€” . , , , , .





. .





  • β€” .

    : , , .





  • , β€” - .

    : // -, // -, // .





  • β€” , ( β€” ).

    : , .





  • (), / β€” . . .

    : , , .





  • β€” .

    : , .





  • β€” .

    : , .





  • , β€” . , .

    ! β€” , Β«β€ŽΒ» .

    : , 2020 .





  • β€” .

    : , .





  • β€” .

    : , .





  • β€” .

    : COVID-19, .





  • β€” , .

    : , . .





  • β€” .

    : , , .





  • β€” , , .     , .. ( ) , .





  • β€” , . , .





  • β€” Β«-Β».

    : , , .





  • -, β€” .

    : , .





    An example of a pool track.  If you remove the departments, you get a block diagram
    . -
  • β€” . , , .  .





  • β€” ( , ).





, ,   UX-.





, , , , . ,  . . , ( ).





, :      .





, , , , , .





Dashboard for analyzing the current load status of the port of Hoboken, New Jersey
, -

β€” , .





, , , , , .





Production monitoring app by devvela
devvela

, , . , , . , .





β€” . , . , , , .





, , ( ).





Sales statistics dashboard

Β« Β». , , , , . . , , , .





  1. . : .





  2. , ( , , ..).





  3. «». UI .





  4. .





  5. . , .





  6. . 5–7 .





  7.     .





  8. . , , , - .





  9. . .





  10. . , . , .





Not very positive, but relevant and informative example of a dashboard from Johns Hopkins
, Johns Hopkins

UX - Β« UXΒ».








All Articles