Visualización de datos en la interfaz

Mi nombre es Ilona y soy Senior Experience Designer en EPAM. Diseño interfaces complejas para clientes extranjeros, doy presentaciones, mentor de diseñadores. En mi tiempo libre, enseño diseño de interfaces en el programa de maestría de la Universidad ITMO y dirijo un  canal de Telegram sobre diseño de UX .





En este artículo, quiero hablar un poco sobre la historia de la infografía y cómo, desde una perspectiva de diseño, visualizar datos y mostrarlos de manera efectiva en una interfaz.






Múltiples datos, que, en principio, pueden considerarse Big Data, son un conjunto de información (números, porcentajes, estados, parámetros, texto, etc.), a partir de los cuales el usuario puede sacar determinadas conclusiones.





Los paneles amados por los diseñadores   son el resultado de visualizar dichos datos.





Tablero de Ghulam Rasool
Tablero de Ghulam Rasool

Pero esparcir gráficos coloridos por la pantalla no significa visualizar bien la información.





, — .

?





.





 —   , .





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





El primer gráfico de barras de William Playthey, 1781
, 1781

  , ,  The Visual Display of Quantitative Information , .





Libros de datos de E. Tufty
.

, /. () , () .





, , — , , — .





, .

– .





Ilustración del libro de E. Tufty
.

:





  1. — . , ..





  2. — .





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





  4. — . , , , , .





. .





  • — .

    : , , .





  • , — - .

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





  • — , ( — ).

    : , .





  • (), / — . . .

    : , , .





  • — .

    : , .





  • — .

    : , .





  • , — . , .

    ! — , «‎» .

    : , 2020 .





  • — .

    : , .





  • — .

    : , .





  • — .

    : COVID-19, .





  • — , .

    : , . .





  • — .

    : , , .





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





  • — , . , .





  • — «-».

    : , , .





  • -, — .

    : , .





    Un ejemplo de pista de piscina.  Si elimina los departamentos, obtiene un diagrama de bloques
    . -
  • — . , , .  .





  • — ( , ).





, ,   UX-.





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





, :      .





, , , , , .





Tablero para analizar el estado de carga actual del Puerto de Hoboken, Nueva Jersey
, -

— , .





, , , , , .





Aplicación de monitoreo de producción de devvela
devvela

, , . , , . , .





— . , . , , , .





, , ( ).





Panel de estadísticas de ventas

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





  1. . : .





  2. , ( , , ..).





  3. «». UI .





  4. .





  5. . , .





  6. . 5–7 .





  7.     .





  8. . , , , - .





  9. . .





  10. . , . , .





Ejemplo no muy positivo, pero relevante e informativo de un tablero de Johns Hopkins
, Johns Hopkins

UX - « UX».








All Articles