Interface Design Considerations for Data Visualization

A464352136da1292242d810c001ed275?s=47 Scott Murray
March 12, 2014

Interface Design Considerations for Data Visualization

This talk illustrates the design process behind Kindred Britain (kindred.stanford.edu), an interactive network visualization and digital humanities project, made with Nicholas Jenkins and Elijah Meeks of Stanford University. I'll discuss interface and visual design considerations critical to any visualization, framed in the context of five core elements we faced with Kindred Britain: visual structure, navigation structure, interaction, color, and authorship.

A464352136da1292242d810c001ed275?s=128

Scott Murray

March 12, 2014
Tweet

Transcript

  1. 1.

    Primary Identity —Full Name Logos FULL NAME LOGO WITH TAGLINE

    1-LINE FOR EXTREME HORIZONTAL SPACE RESTRICTIONS RECOMMENDED: FULL NAME LOGO WITH TAGLINE 2-LINES PRIMARY LOGO, VARIATIONS: FULL NAME LOGO WITH TAGLINE CENTERED FOR SQUARE FORMAT SPACE RESTRICTIONS An Introduction to Designing With D3 Scott Murray Interactive Data Visualization for the Web Interface Design Considerations for Data Visualization Scott Murray @alignedleft alignedleft.com Assistant Professor, Design University of San Francisco Author, Interactive Data Visualization for the Web
  2. 2.

    K I N D R E D B R I

    TA I N kindred.stanford.edu Nicholas Jenkins Associate Professor, English Stanford University Elijah Meeks Digital Humanities Specialist Stanford University
  3. 3.
  4. 5.
  5. 6.
  6. 7.
  7. 8.
  8. 9.
  9. 10.
  10. 11.
  11. 12.
  12. 13.
  13. 14.
  14. 15.
  15. 16.
  16. 17.
  17. 19.
  18. 20.
  19. 21.
  20. 22.
  21. 24.
  22. 25.
  23. 26.
  24. 27.
  25. 28.
  26. 29.
  27. 30.
  28. 31.
  29. 32.
  30. 33.
  31. 34.
  32. 35.
  33. 36.

    ...avoiding catastrophe becomes the first principle in bringing color to

    information: Above all, do no harm.” —Edward Tufte, Envisioning Information “ Position is everything. Color is difficult.” —Moritz Stefaner “
  34. 37.
  35. 38.
  36. 39.
  37. 40.
  38. 41.
  39. 42.
  40. 43.
  41. 45.
  42. 46.
  43. 47.
  44. 48.
  45. 49.
  46. 50.
  47. 51.

    Visual Structure Navigation Structure Interaction Color Authorship how to see

    how to move how to act how to differentiate how to critique
  48. 52.

    An Introduction to Designing With D3 Scott Murray Interactive Data

    Visualization for the Web Scott Murray @alignedleft alignedleft.com