Visualisation des données dans l'interface

Je m'appelle Ilona et je suis Senior Experience Designer chez EPAM. Je conçois des interfaces complexes pour des clients Ă©trangers, fais des prĂ©sentations, encadre des designers. Pendant mon temps libre, j'enseigne la conception d'interfaces au programme de maĂ®trise de l'UniversitĂ© ITMO et dirige une  chaĂ®ne Telegram sur la conception UX .





Dans cet article, je veux parler un peu de l'histoire de l'infographie et comment, d'un point de vue de la conception, visualiser les données et les afficher efficacement dans une interface.






Les données multiples, qui, en principe, peuvent être considérées comme du Big Data, sont un ensemble d'informations (chiffres, pourcentages, statuts, paramètres, texte, etc.), sur la base desquels l'utilisateur peut tirer certaines conclusions.





Les tableaux de bord apprĂ©ciĂ©s des designers   sont le rĂ©sultat de la visualisation de ces donnĂ©es.





Tableau de bord par Ghulam Rasool
Tableau de bord par Ghulam Rasool

Mais disperser des graphiques colorés sur l'écran ne signifie pas bien visualiser les informations.





, — .

?





.





 â€”   , .





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





Le premier graphique Ă  barres par William Playthey, 1781
, 1781

  , ,  The Visual Display of Quantitative Information , .





Livres de données E. Tufty
.

, /. () , () .





, , — , , — .





, .

– .





Illustration tirée du livre de E. Tufty
.

:





  1. — . , ..





  2. — .





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





  4. — . , , , , .





. .





  • — .

    : , , .





  • , — - .

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





  • — , ( — ).

    : , .





  • (), / — . . .

    : , , .





  • — .

    : , .





  • — .

    : , .





  • , — . , .

    ! — , «‎» .

    : , 2020 .





  • — .

    : , .





  • — .

    : , .





  • — .

    : COVID-19, .





  • — , .

    : , . .





  • — .

    : , , .





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





  • — , . , .





  • — «-».

    : , , .





  • -, — .

    : , .





    Un exemple de piste de piscine.  Si vous supprimez les départements, vous obtenez un diagramme
    . -
  • — . , , .  .





  • — ( , ).





, ,   UX-.





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





, :      .





, , , , , .





Tableau de bord pour analyser l'état de charge actuel du port de Hoboken, New Jersey
, -

— , .





, , , , , .





Application de surveillance de la production par devvela
devvela

, , . , , . , .





— . , . , , , .





, , ( ).





Tableau de bord des statistiques des ventes

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





  1. . : .





  2. , ( , , ..).





  3. «». UI .





  4. .





  5. . , .





  6. . 5–7 .





  7.     .





  8. . , , , - .





  9. . .





  10. . , . , .





Exemple pas très positif, mais pertinent et informatif d'un tableau de bord de Johns Hopkins
, Johns Hopkins

UX - « UX».








All Articles