The Lorem Ipsum of data visualisation: How to design data-driven wireframes

Transcript

1. The Lorem Ipsum of data visualisation Martin von Lupin @martinvonlupin How to design data-driven wireframes
2. I’m UX/UI Designer at data visualisation studio Small Multiples in Sydney
4. How to create wireframes for data-driven products?
5. Wireframes Placeholder elements like “Lorem Ipsum” paragraph
6. Wireframes Placeholder elements like “Lorem Ipsum” paragraph
7. Wireframes Placeholder elements like “Lorem Ipsum” paragraph
8. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus accumsan eu purus in pharetra. Maecenas pretium, nibh ut fermentum egestas, metus justo viverra elit, id porta felis velit id libero. Integer non dui ullamcorper, scelerisque libero ut, tempus purus. In faucibus leo quis nunc vehicula iaculis. Mauris commodo leo eget imperdiet elementum. Pellentesque dolor odio, euismod eget tristique sit amet, porta at sem. Nulla eget nibh ultricies, bibendum tortor ut, sodales felis. Cras diam nulla, suscipit eu pellentesque vitae, sodales non urna. Nam ut volutpat magna. Donec sodales consequat efficitur. Nullam aliquam lorem quam, et sagittis velit sagittis nec. Praesent ultricies, justo nec finibus pulvinar, enim mi auctor sem, sit amet congue purus diam sit amet neque. Morbi imperdiet ipsum turpis, quis tincidunt nisl ultricies eget. Curabitur fringilla purus turpis, vitae molestie libero finibus vel.
9. Wireframes Placeholder elements like “Lorem Ipsum” paragraph
10. Design Placeholder elements like “Lorem Ipsum” paragraph
11. Design Replacing placeholders with meaningful but random content
12. Design Replacing placeholders with meaningful but random content
13. Development Final developed version using real content
14. Development Final developed version using real content
15. The design process Design Wireframes Development
16. Wireframes contain the basic structure of a page very early in the process using placeholders.
17. Wireframes contain the basic structure of a page very early in the process using placeholders. Meaningful content is added later in the design phase.
18. Wireframes contain the basic structure of a page very early in the process using placeholders. Meaningful content is added later in the design phase.
19. What if content is fundamental for the basic structure?
20. What if content data is fundamental for the basic structure?
21. What is the Lorem Ipsum of data visualisation?
22. Let’s put data into our wireframes!
23. Meaningful but random content Placeholder content Real content Content strategies
24. Final design of a chart
25. ... to get to this? Wireframes Final design ? How to design wireframes...
26. Placeholder data Meaningless numbers and placeholder area for bar chart
27. Meaningful data Random but meaningful data. All elements are there and chart and numbers make sense.
28. Real data Real data is applied to the chart and stats. Difference in values larger than expected. Several days share the minimum value.
29. Meaningful but random data Placeholder data Real data Strategies for datavis wireframes
30. Strategies for datavis wireframes Meaningful but random data Placeholder data Real data
31. Visualising geo-referenced frog recordings in Australia
33. Visualising geo-referenced frog recordings in Australia Project brief Interactive map of Australia with locations of all frog recordings from citizen science project “FrogID”. Filter locations by ◦ frog species ◦ date range ◦ by LGA
35. Why using real data for wireframes? 1. Visualisations are fundamental for interaction 2. Real data is available
36. Example of using real data Real data all the way! Data in map, sidebar, bar chart and summary are all for real.
39. Real data time!!!
40. Example of using real data Surprise! There are clusters of locations that challenge the design and development.
46. Looks awesome!
47. Why not always use real data when designing wireframes?
48. Sometimes, there is no real data available.
50. Strategies for datavis wireframes Meaningful but random data Placeholder data Real data
51. Strategies for datavis wireframes Meaningful but random data Placeholder data Real data
52. Visualising clusters of NSW government agencies and their projects
53. Visualising clusters of NSW government agencies and their projects Project brief Interactive online visualisation of NSW government projects. Show alignment with the three priorities of the digital strategy. Arrange projects by ◦ Government cluster ◦ Priority ◦ Budget
54. Clusters of NSW government projects - 30 projects - 3 strategies - 3 budget groups (major, medium, small)
60. More projects (not 30 but 150+)
61. More projects (not 30 but 150+) Unknown budget (pattern)
62. More projects (not 30 but 150+) Unknown budget (pattern) Huge difference in budget (bubble size)
63. Linear scale Clusters of NSW government projects Projects with small budgets are too small to be clickable. Projects with large budgets attract too much attention.
64. Linear scale Clusters of NSW government projects Changing the scaling of circle sizes: Linear vs logarithmic. Linear scaling emphasises outlier.
65. Logarithmic scale Clusters of NSW government projects Changing the scaling of circle sizes: Linear vs logarithmic. Logarithmic scaling brings outliers closer togehter.
66. Clusters of NSW government projects Small projects appear larger and large projects appear smaller.
68. Clusters of NSW government projects Push for detailed information about key parameters in order to generate random but meaningful data Get your key parameters right Total number: 30 150 projects Minimum budget: $250K $15K Maximum budget: $10.5M $273M
69. Strategies for datavis wireframes Meaningful but random data Placeholder data Real data
70. Strategies for datavis wireframes Meaningful but random data Placeholder data Real data
71. Portal for data on poverty and inequality in Australia
72. Portal for data on poverty and inequality in Australia Project brief Create a website that showcases existing figures and charts about poverty and inequality in Australia. Include filters to let the user explore figures by theme.
73. Portal for data on poverty and inequality in Australia Placeholder elements used for charts; only one actual chart shown to communicate look and feel.
74. Portal for data on poverty and inequality in Australia Placeholder elements used for charts; only one actual chart shown to communicate look and feel.
75. Strategies for datavis wireframes Meaningful but random data Placeholder data Real data
76. Meaningful but random data Placeholder data Real data Strategies for datavis wireframes
77. Visualising and comparing large amounts of genomic information
78. Visualising and comparing large amounts of genomic information Project brief Explore network of chromosomes, mRNAs, microRNAs and proteins to support study of neurodegenerative diseases like Alzheimer’s.
81. How would you create wireframes for something that complex?
82. You don’t.
83. Visualising and comparing large amounts of genomic information Sketches + detailed annotations to communicate visuals, interactions and insights.
85. Flat concentric circles Dense arrangement inspired by nature
86. Meaningful but random data Placeholder data Real data Strategies for datavis wireframes
87. Meaningful but random data Placeholder data Real data If data visualisation is fundamental for the structure or interaction use
88. Meaningful but random data Placeholder data If you don’t have real data use Real data
89. Meaningful but random data Placeholder data Real data If data visualisation is not fundamental for the structure or interaction use
90. How to build wireframes that contain random or real data?
91. Import graphics Create charts using external software. Maps for FrogID project were screenshots taken from QGIS.
92. Import graphics Create charts using external software. Maps for FrogID project were screenshots taken from QGIS.
93. +
98. + Chippencharts
103. Meaningful but random data Placeholder data Real data Strategies for datavis wireframes
104. Example of using real data Real data in datavis wireframes is great for: - Testing the design - Spot challenges very early and communicate with team - Having educated convos with clients
105. Using real data in wireframes is fun and the clients love it.
106. Thanks. Martin von Lupin @martinvonlupin smallmultiples.com.au @smallmultiples
107. Let’s have a chat! Martin von Lupin @martinvonlupin smallmultiples.com.au @smallmultiples