Visualização de dados na interface

Meu nome é Ilona e sou Designer de Experiência Sênior na EPAM. Eu desenho interfaces complexas para clientes estrangeiros, faço apresentações, sou mentor de designers. Em meu tempo livre, ensino design de interface no programa de mestrado da ITMO University e dirijo um  canal do Telegram sobre design de UX .





Neste artigo, quero falar um pouco sobre a história dos infográficos e como, do ponto de vista do design, visualizar dados e exibi-los de forma eficaz em uma interface.






Os dados múltiplos, que em princípio podem ser considerados Big Data, são um conjunto de informações (números, percentagens, estados, parâmetros, texto, etc.), com base no qual o utilizador pode tirar certas conclusões.





Dashboards amados por designers   são o resultado da visualização de tais dados.





Painel por Ghulam Rasool
Dashboard by Ghulam Rasool

 —  .





, — .

?





.





 —   , .





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





O primeiro gráfico de barras de William Playthey, 1781
, 1781

  , ,  The Visual Display of Quantitative Information , .





E. Livros de dados da Tufty
.

, /. () , () .





, , — , , — .





, .

– .





Ilustração do livro de E. Tufty
.

:





  1. — . , ..





  2. — .





  3. — (, «» — , «» — ). , 4% -. , .





  4. — . , , , , .





. .





  • — .

    : , , .





  • , — - .

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





  • — , ( — ).

    : , .





  • (), / — . . .

    : , , .





  • — .

    : , .





  • — .

    : , .





  • , — . , .

    ! — , «‎» .

    : , 2020 .





  • — .

    : , .





  • — .

    : , .





  • — .

    : COVID-19, .





  • — , .

    : , . .





  • — .

    : , , .





  • — , , .     , .. ( ) , .





  • — , . , .





  • — «-».

    : , , .





  • -, — .

    : , .





    Um exemplo de pista de piscina.  Se você remover os departamentos, obterá um diagrama de blocos
    . -
  • — . , , .  .





  • — ( , ).





, ,   UX-.





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





, :      .





, , , , , .





Painel para analisar o status de carga atual do Porto de Hoboken, Nova Jersey
, -

— , .





, , , , , .





Aplicativo de monitoramento de produção por devvela
devvela

, , . , , . , .





— . , . , , , .





, , ( ).





Painel de estatísticas de vendas

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





  1. . : .





  2. , ( , , ..).





  3. «». UI .





  4. .





  5. . , .





  6. . 5–7 .





  7.     .





  8. . , , , - .





  9. . .





  10. . , . , .





Não é muito positivo, mas é um exemplo relevante e informativo de um painel da Johns Hopkins
, Johns Hopkins

UX - « UX».








All Articles