28
LABORATORIO DI INFORMATION DESIGN E UX CON DRUPAL - FULL DAY

Labortatorio di Information Design e UX con Drupal

Embed Size (px)

DESCRIPTION

Sergio Cima, Paolo Griselli, Riccardo Scalco @ Drupal Days 2014

Citation preview

Page 1: Labortatorio di Information Design e UX con Drupal

LABORATORIO DI INFORMATION DESIGN E UX CON DRUPAL - FULL DAY

Page 2: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITDATA

Page 3: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITDATA

Page 4: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITDATA

1300 euro 3300 euro

Page 5: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITDATA

1300 euro 2 polli / minuto

3300 euro 10 polli / minuto

Page 6: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITDATAVIZ

Richard Saul Wurman*: “Information Design è progettare la comprensione” !!!!!!!!!*TED, architettura dell’informazione, n altre cose

Page 7: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITNON È UNA NOVITÀ: ~1800

William Playfair

Page 8: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITNON È UNA NOVITÀ: ~1850

John Snow

Page 9: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITNON È UNA NOVITÀ: ~1860

Charles Minard

Page 10: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITI FONDAMENTI: JAQUES BERTAIN

Dati nello spazio

Page 11: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITI FONDAMENTI: EDWARD TUFTE

Data-ink ratio = Data-ink

Total ink used

Page 12: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITI FONDAMENTI: STEPHEN FEW

Macchina Organo

vs

(Feltron)

Dashboard

Page 13: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITDAI DATI ALLA CONOSCENZA

• creazione (scraping, dataset esistenti ecc) • normalizzazione • mining • integrazione • visualizzazione

Page 14: Labortatorio di Information Design e UX con Drupal

#DrupalDaysIT

Page 15: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITDASHBOARD: UNSUITABLETroppo testo e tabelle: difficoltà di individuare i dati salienti !Torte e altri oggetti rotondi: occupano troppo spazio e la differenza di area può non essere percepita accuratamente !Grafici in pila: richiedono troppa concentrazione Grafici a radar: difficile paragonare le diverse variabili. !Tachimetri, termometri e altre metafore: meramente ornamentali, rischio di rappresentare male i dati e tenere oscure le unità di misura

(Stephen Few)

Page 16: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITDASHBOARD: SUITABLEBarre, linee o combinate !Liste e tabelle molto semplici !Box plot: molto informativi, danno conto della variabilità del fenomeno !Dispersione (scatterplot): ma con una linea di correlazione (R)

(Stephen Few)

Page 17: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITRAW (VISUALIZZAZIONE)*

app.raw.densitydesign.org

*ma pure Excel

Page 18: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITITALIAN RESEARCH MAP

irm.scienceonthenet.eu

MIUR CNR Zadig

Page 19: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITDAL DATO AL DATASET

argomento

paese

titolo del progetto

data di inizio

cordis.europa.eu

Page 20: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITIL DATASET

Progetti

PJ_UID PROJECT_TITLE …

… … …

9803873 An interoperability service utility… …

9803920 Coupling charge transport to internal…

… … …

Contractor

ORG_UID

ORGANIZATION_NAME …

… … …

494959 EUROPEAN ROAD TRANSPORT TELEMATICS IMPLEMENTATION COORDINATION …230203 VLAAMSE OVERHEID

… … …

Collegamento

PJ_UID ORG_UID

… …

9803873 494959

9803920 230203

… …

Page 21: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITDATASET DRUPALIZZATO

• creazione tipi di contenuto • configurazione import • import • creazione delle query • conteggi vari • visualizzazione

Moduli per tipo di contenuto • date • entity reference • location • views

Moduli per import • feeds • feeds tamper • location feeds • entity reference feeds

Moduli per dataviz • d3.js • libraries

Page 22: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITQUERY CHE DESIDERIAMO DA DRUPAL

• Mostra in una sola tabella il nome del contractor e i suoi relativi progetti e data dei progetti

• Conta quanti progetti all’anno ha un contractor

e visualizza…

Page 23: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITD3

Page 24: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITVISUALIZZAZIONE

Page 25: Labortatorio di Information Design e UX con Drupal

#DrupalDaysITVISUALIZZAZIONE

Page 26: Labortatorio di Information Design e UX con Drupal

#DrupalDaysIT

Page 27: Labortatorio di Information Design e UX con Drupal

SERGIO CIMA

[email protected] @sergio_cima

!@eidogram

PAOLO GRISELLI

RICCARDO SCALCO

[email protected] @pauligree

Page 28: Labortatorio di Information Design e UX con Drupal

SPONSOR

MEDIA PARTNER