Baut eng verständlech Datenvisualiséierung

Fir effektiv ze sinn, muss eng Datevisualiséierung visuell, einfach a séier informéieren. Rendering Daten a grafesch Form zielt eng vereinfacht Liesung ze bidden, déi e bessere Verständnis an Entscheedungsprozess roueg, méi séier a méi einfach erlaabt.

1228581-html5-css3-browser

Verfügbar Technologien

Datevisualiséierung ass eng Disziplin besonnesch gëeegent fir Webtechnologien an HTML5 Subsets. Haut ginn et zwou Haaptfamilljen ënnert den Technologien déi am meeschten benotzt ginn: Grafik Representatioune baséiert op SVG Technologie an déi mat CANVAS Technologie. Wa béid interaktiv Méiglechkeeten presentéieren, baséieren dës zwou Approche op verschiddene Philosophien déi upstream solle studéiert ginn.

html5_canvas_logo  03-01_html5_canvas_element_ld_img   SVG_logo.svg

Déi richteg Wiel hänkt staark vun Ärem Bedierfnes selwer, der gewënschter Ofdeckung, vum Park an dem betraffene Public of. SVG Frameworks bidden Iech sougenannte Vecteure Rendering, dat heescht datt se aus grafeschen Elementer opgebaut sinn tëscht identifizéierten Punkten. D'.svg-Typ Bilddatei ass tatsächlech e Fichier deen Code enthält, deen d'Kräizungspunkte beschreift an d'Art a Weis wéi se matenee verbonne sinn, fir en identescht Bild a Proportioun ze zéien, egal wéi seng Gréisst. Frameworks baséiert op CANVAS Technologie manipuléieren Pixel.

D'Konstruktioun vun engem effektiven an adaptéierten Dashboard

E gutt Dashboard bauen erfuerdert bedeitend Gedanken virun der Entwécklung. Fir wien sinn d'Donnéeë geduecht? Wat sinn d'Motivatioune fir dës Informatioun verfügbar ze maachen? Wat sinn d'Botschaften ze vermëttelen? Wat ass wichteg? D'Daten selwer? Säi Volumen? Seng Evolutioun? Säi Wäert haut oder säin Duerchschnëtt iwwer eng bestëmmten Period? Muss seng Representatioun op Skala sinn? Heiansdo wäert d'Verzerrung vum Raum a seng Proportiounen de Besucher opmierksam maachen op den Deel vun der Grafik fir ze markéieren.

Capture d'écran 2015-03-16 à 16.25.52

D'Wichtegkeet vun der Faarfwahl

D'Bedeitung fir déi ugewisen Donnéeën ze ginn baséiert op dem Volume et duerstellt awer och op der Faarf déi benotzt gëtt fir de Message ze vermëttelen. Zum Beispill, op engem Pie Chart, deen de Verkafsvolumen vu verschiddene Produkter duerstellt, ass et evident datt de gréissten Undeel ouni Zweifel déi bescht Leeschtung wäert sinn a wahrscheinlech an enger positiver Faarf wéi gréng illustréiert gëtt. Mir kënnen och metaphoresch Biller benotzen fir d'Klarheet weider ze vergréisseren, zum Beispill d'Bars vun enger Grafik vu klengen Autoen fir am viregt Beispill ze bleiwen. Wat de Verkaf méi grouss ass, wat méi kleng Autoe ginn.
Op der anerer Säit, wann e Pie-Chart d'Zuel vun den Absencen vun de Mataarbechter vun enger Firma duerstellt, wäert dee wichtegsten Deel och dee beonrouegendste sinn an tatsächlech d'Benotzung vun enger Faarf motivéiert déi dës Konnotatioun dréit wéi rout oder orange fir Beispill.

Egal wéi, en effektiven Dashboard ass e kloert Dashboard. D'Daten, déi an de grafesche Representatioune illustréiert sinn, musse kloer ënnerschrëften an all Representatioun muss en Titel enthalen, deen de Benotzer erlaabt ze verstoen wat e kuckt. D'Representatioun muss dat Element sinn dat virgestallt gëtt. Wann ze vill Text d'Ursaach vun der Grafik illustréiert, wäert de Benotzer éischter op d'Erklärungen oppassen wéi op de Message, deen vun den Donnéeën an hir Representatioun vermëttelt gëtt. Ähnlech kann d'Benotzung vu Pictos eng zousätzlech Informatiounsschicht ubidden andeems d'Benotzer d'exposéiert Material séier verstoen.

D'Zil vum Dashboard

D'Daten, déi ugewise ginn, sinn also direkt mat der Noriicht, déi iwwerdroe gëtt, verbonnen, déi och direkt mat der Zilpublikum verbonnen ass. Mir probéieren allgemeng net datselwecht op déiselwecht Manéier ze soen wa mir d'allgemeng Gestioun vun enger Firma, seng Aktionären oder seng Mataarbechter adresséieren.

newdash-mednarrow

Interaktivitéit

En anere ganz wichtege Virdeel vu grafesche Representatioune versus Datentabellen ass sécherlech d'Méiglechkeet fir einfach Interaktivitéit ze addéieren. Kënnen e Datum verschwannen an d'Berechnung vum Undeel vun jiddereng vun de verbleiwen nei starten kann e feine Verglach an eng einfach Analyse erlaben. Ausserdeem kann ee souguer iwwerleeë fir de Benotzer z'erlaaben, d'Aart vu grafesche Representatioune ze spezifizéieren, déi se fir sou oder sou Zort vun Daten benotze wëllen. An anere Wierder, dem Benotzer ze bidden fir säin Dashboard liicht z'änneren fir et perfekt un säi Gebrauch unzepassen ass och eng räich Feature!

Ausserdeem kënne verschidde grafesch Representatioune zesumme schaffen an interoperéieren, dh eng Ännerung vum Staat an Undeel vun enger éischter Representatioun ännert eng zweet déi automatesch aktualiséiert gëtt. Mat dëser Method wäerte mir den Impakt vun engem Stéck Daten op en anert verstoen, wat net oder schéngt net onbedéngt un déi éischt verbonnen ze sinn.

Vertrieden eng beherrscht Formatioun vun Donnéeën. Wat méi Daten et ginn, wat se manner gutt verstanen sinn.

Och wann eng Grafik eng grouss Unzuel vun Elementer weist, ass et am léifsten dat Ganzt an e puer Schiirme opzedeelen, oder éischter e puer Berichter. Zum Beispill, wa mir Autosverkaaf weltwäit representéieren, wäerten d'Majoritéit vun de Benotzer an den Top 5 oder 10 Charts interesséiert sinn. Wahrscheinlech vill manner duerch méi lokal an dofir manner verbreet Marken. Mir wäerten hei entscheeden fir en éischte Pie-Diagramm mat den 9 beschte Partituren ze representéieren, dann eng 10. Slice déi all déi verbleiwen Resultater par rapport zu der Gesamtmass kombinéiert.
Wann de Benotzer awer un enger gréisserer Granularitéit interesséiert ass, gëtt him ugebueden op déi "aner" Slice (déi 10. Slice) ze klicken an dëse Klick huet den Effekt datt de Benotzer d'Grafik "anzeginn", d.h. D'Representatioun gëtt nei gezeechent, awer dës Kéier wäert de ganze Kuchendiagramm nëmmen de Volume duerstellen, deen am Ufank an der 10. De Benotzer gesäit also den zweeten Niveau vun der Grafik erschéngen, nämlech d'Aktien vun 10 bis 19 an den 20. wäerten erëm de kumulative Volumen vun de verbleiwenen Donnéeën duerstellen.
Wéi Dir wäert verstanen hunn, ass en effektiven Dashboard opzebauen op vill gesondem Mënscheverstand baséiert. Dës Zort vun Interface baséiert och op déi selwecht Regelen wéi eng méi klassesch Interface.
E puer recommandéiert Kaderen:
D3.js (Open Source), HighCharts (bezuelt), ElyCharts (Open Source), iCharts etc.
Vum Yann Cadoret
Partner @UXRepublic
[actionbox color="default" title="" description="UX-REPUBLIC ass eng Agence spezialiséiert op Benotzer-zentréiert Design. Mir sinn och eng guttgeheescht Training Zentrum. Fannt all eis Trainingscoursen am UX-DESIGN a Front Entwécklung (HTML/CSS/JS) op eiser Websäit training.ux-republic.com” btn_label=”Eis Trainingscoursen” btn_link=”http://training.ux-republic. com " btn_color = " Primär " btn_size = " grouss " btn_icon = " Stär " btn_external = " 1 ″ ]