Datenvisualisierung in der Oberfläche

Mein Name ist Ilona und ich bin Senior Experience Designer bei EPAM. Ich entwerfe komplexe Schnittstellen fĂĽr ausländische Kunden, halte Präsentationen und betreue Designer. In meiner Freizeit unterrichte ich Interface Design am Masterstudiengang der ITMO University und betreibe einen  Telegrammkanal ĂĽber UX Design .





In diesem Artikel möchte ich ein wenig über die Geschichte der Infografiken sprechen und darüber, wie Daten aus gestalterischer Sicht visualisiert und effektiv in einer Benutzeroberfläche angezeigt werden können.






Mehrere Daten, die im Prinzip als Big Data betrachtet werden können, sind eine Reihe von Informationen (Zahlen, Prozentsätze, Status, Parameter, Text usw.), auf deren Grundlage der Benutzer bestimmte Schlussfolgerungen ziehen kann.





Von Designern  geliebte Dashboards  sind das Ergebnis der Visualisierung solcher Daten.





Dashboard von Ghulam Rasool
Dashboard von Ghulam Rasool

Das Verteilen bunter Grafiken auf dem Bildschirm bedeutet jedoch nicht, dass Informationen gut visualisiert werden.





, — .

?





.





 â€”   , .





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





Das erste Balkendiagramm von William Playthey, 1781
, 1781

  , ,  The Visual Display of Quantitative Information , .





DatenbĂĽcher von E. Tufty
.

, /. () , () .





, , — , , — .





, .

– .





Illustration aus dem Buch von E. Tufty
.

:





  1. — . , ..





  2. — .





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





  4. — . , , , , .





. .





  • — .

    : , , .





  • , — - .

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





  • — , ( — ).

    : , .





  • (), / — . . .

    : , , .





  • — .

    : , .





  • — .

    : , .





  • , — . , .

    ! — , «‎» .

    : , 2020 .





  • — .

    : , .





  • — .

    : , .





  • — .

    : COVID-19, .





  • — , .

    : , . .





  • — .

    : , , .





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





  • — , . , .





  • — «-».

    : , , .





  • -, — .

    : , .





    Ein Beispiel fĂĽr eine Poolbahn.  Wenn Sie die Abteilungen entfernen, erhalten Sie ein Blockdiagramm
    . -
  • — . , , .  .





  • — ( , ).





, ,   UX-.





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





, :      .





, , , , , .





Dashboard zur Analyse des aktuellen Ladezustands des Hafens von Hoboken, New Jersey
, -

— , .





, , , , , .





ProduktionsĂĽberwachungs-App von devvela
devvela

, , . , , . , .





— . , . , , , .





, , ( ).





Verkaufsstatistik-Dashboard

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





  1. . : .





  2. , ( , , ..).





  3. «». UI .





  4. .





  5. . , .





  6. . 5–7 .





  7.     .





  8. . , , , - .





  9. . .





  10. . , . , .





Nicht sehr positives, aber relevantes und informatives Beispiel fĂĽr ein Dashboard von Johns Hopkins
, Johns Hopkins

UX - « UX».








All Articles