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

Transcript

1. UX Australia 2019 -29th August, Breakout session (AUUXAU2908B) MARTIN VON LUPIN: I'll just wait one second until everyone finds a seat. I can highly recommend the seats at the front. OK. So, the Lorem Ipsum of data visualisation and how it's designed data (inaudible). So, 3.5 years ago when I moved from Germany to Australia, I started as a designer at the data visualisation studio s (inaudible) here in Sydney. We mostly do websites that have some kind of data visualisation component and it's my job to (inaudible) and because we're doing so many data visualisations I'm often confronted with the question how to create wire frames for data visualisations. I tried different approaches and strategies and I haven't really found the right answer to this question, so some strategies I work well, and some didn't work so well. Today I want to share some of these approaches with you and I want to show you some of our client project where we applied those strategies. Before I talk about wide frames and data (inaudible) I want to talk about the regular process of creating a website. You go to wide frames to visual design to development, that's how we do it at (inaudible). I want to show you some examples and focus on the strategies that we use here. So let's start with wide frames. So here we see a wide frame of a mobile website or mobile application that shows a bunch of team members and we see a few place holder elements here, like for the name, the job, occupation, the occupation - photo as well as the job description. So the text we use here for the job description is like a special kind of place holder text, (inaudible) you might have heard of. If you haven't, it's a very famous graphic designers have to use this If I have to put in some place holder text into their designs, but they don't have any real content. They're just putting in this and it's (inaudible) for Lorem Ipsum and it doesn't make any sense at all. So this is the wide frame stage. The second stage is the design stage. So there is front styling and colours but at this point where they're using the place holders and then strategy that a lot of visual designers do is add a bit of random but meaningful content. So a photo, first name, last name and job title. So the first we have really nice looking feel of our website, and second I can actually test my design now. I am not sure if you noticed but in the wide frame every first and last name fitted on the same line but when we realised some names need two lines because they're too long. This is an important requirement for the (inaudible) design as well as for the develop later. And then the third stage would be the development. And then the development we probably going to use actual real data like the final data set. Like for example here we see actual people with real jobs, like, you know, Harry from creative development. From the regular process, wide frames design, development. OK. So I think we can all agree that wide frames have the infrastructure of place holder and meaningful content is added later. I think we can agree on that. But here is the thing, you know, if you look at your basic infrastructure and content, what if the content is fundamental for the structure? Or in our case of data visualisation, what if the data is fundamental for the basic structure? Or what is the Lorem Ipsum of data visualisation? I think the answer to this is actually we have to put data into our wide frames. Again, in our wide frames show the basic structure of a page and the data might be fundamental for the basic structure, so we have to put the data into the wide frames. So far from the regular process of creating a website that I just showed
2. UX Australia 2019 -29th August, Breakout session (AUUXAU2908B) Page 2 of 6 you, we know three content strategies - the paid for content, then the meaningful random content we use in the visual design stage and then the real content we use at the end and the development. But the thing we have to do when we deal with data visualisation I think we have to put all these three categories and strategies and apply them in our wide frame stage. Maybe not all three at the same time but one of these three and I'm going to show you an example of how this could look like. Imagine we have this chart of the symmetric of the last three day, average, minimum and maximum. If this is our final design, how could the wide frames have looked like. Let's see what the benefits could be and how they differ. First, the place holder. So, we could add like meaningless numbers and (inaudible) place holders like number, 12, 3, 1, 2, 3, it doesn't make sense but all the elements are there and then a rectangle bar chart, like a description. So I think this is probably the first way everyone would choose if we think about data visualisation in wide frames. Let's think about some other ways. We can add random but meaningful data. Up here these numbers make sense and they really match what we see below in the charts. But again, even though it makes sense, it's still random. And then the third thing we could actually add real data and quite often when we do that there are few surprises. So up here we see it doesn't look as pretty as we thought it would. And the difference between the values is actually larger than expected. And there's the minimum value and the other design, we didn't think there might be zero and high values but in reality, it could happen. OK. So, the strategies for data-less wire frames, meaningful data or real data. So now I want to go through these three strategies and I'm going to illustrate it by showing you some of our client projects and I want to start with real data. Visualising (inaudible) reference for quick holdings in Australia. So the Australia Museum has (inaudible) that allows you to record a frog call and also the location and then this data will be sent to Australian Museum and some expert's going to verify the frog species. So we help Australian Museum design the app. I can't tell you who developed the app, though. It might have been IBM. OK. But this wasn't about the app, this was more about the data that went into the app. So the task force to build an interactive map of Australia with locations of the frog recordings, from the project, and further locations by frog species, date range and (inaudible). The first we did some sketching and based on our sketching we realised we probably have to put in the real data. This had two reasons. First, the visualisations are fundamental for the interaction and, second, we simply had real data already available during the bio print stage. This is the final wide frame. We see a very prominently a map of Australia in the middle to the right, a list of species that also functions as a filter and at the bottom some summary steps like, you know, records of frogs and this year we see 89,235 records of frogs on the map but bar charts that shows the monthly recording activity. And we create click through tripe types to show the interaction. So, if you click on (inaudible),
3. UX Australia 2019 -29th August, Breakout session (AUUXAU2908B) Page 3 of 6 the entire view filters. So, on the map we see the striped march frog is only distributed in the east of Australia and is the holder of 8922 records of frogs during that time. OK, so when I did the wire frames it was super fun for me because when I went in I was so sure I was doing the right thing. I (inaudible) all the data points I had in mind, all the interaction, they really made since because I could look at the numbers and say that makes sense and it was also really good when we showed this to the client. We had really in-depth conversation and the client read the entire interface. So, I was really happy and the client was really happy so everyone was super happy. But there were a few more benefits, so because I was exploring the real data doing the wide frame stage, I noticed a few little things like there are clusters of (inaudible). Like the top cluster, has 30 frogs on exactly the same location. So, you know, I thought you probably want to click on this cluster and see all the frogs in this cluster and simply flick through and get some additional information. But the thing is I had no idea, this is technically possible. So during the wide frame stage I had a chat with our developer, he did some research and he came back to me and he said, yes, we can do that. So, what happens is very early in the process I identified a potential issue and I was able to resolve that issue early in the process, so there was no data surprise in the end. This is the final wide frame of the first (inaudible). I will show you what the final developers looked like, a bit of colour here. But you notice it looks very similar to the wide frames and even the numbers are very very similar. To for example when you have the march frog, and the zoomed in view with the pop-up looking similar as well. And the numbers to get identical. So, you're probably going to say it looks awesome. Why not always use (inaudible) when we're designing wire frames. Something there is just no real data. What! What do we do if we don't have real data? We can use meaningful but random data. That is what we did in the second project. (Inaudible) in the agencies and the projects. OK. So the brief was to build an interactive visualisation (inaudible) and show the strategy and to arrange projects by government, cluster, priority and budget. So for this project we decided to show the project in the force-directed mode, so each -- (inaudible), so each bubble you see here represents one project, the sides of the circle represents the budget and the colour or the shade of grey represents the strategy it belongs to. So, you have experience and data. So, speaking of data, for this project, we didn't use real data. The only thing the client told us is there will be roughly 30 projects and these three strategies. So, I just distributed all the projects equally among the strategies and I randomly applied some budgets. Again, everything around the assumptions that there were 30 projects. This is the entire first view of the first wide frame. And then we thought if we click on the (inaudible) budget, we will see all the projects in the budget, and we will see large projects at the top and small projects at the bottom. If you click on any project, the figures come up and there's a bit of (inaudible) in the description there as well. OK, so this is, again, the first initial view of the wide frame. OK. Now I want to show you what happens when durk development when they cap the real data. So, we only got the data during
4. UX Australia 2019 -29th August, Breakout session (AUUXAU2908B) Page 4 of 6 the development stage. This is the first view of the development - of the developed version. You might be able to spot it but there were few surprises. Actually, three major surprises. The first there were way more than 30 projects. There were over 150 projects. So, the issue with that was that it's really, really tough to find a specific project you're looking for the it's that much. If we would have known this in the wide frame stage, I probably would have pushed for a search function or something like that, but since we were already through a visual design and in development, we couldn't implement such a function so late. Another thing some budgets didn't have a budget assigned to them. And no budget means no sides. I think some project had a confidential budget, I don't know. So, during development our visual designer had to come in and find a vision and her solution was to apply the default size and some pad and to show this is uncertain. Even though we found a solution, and everything worked well, it was still in terms of worked well it was disruptive. MARTIN VON LUPIN: And there was a huge difference in budget, way more than we thought. Let's go back to the big budget view and explore this a bit more. So major projects at the bottom but shake lots of attention - you know - the like the one at the top, I think it's less than a pixel. So it does not attract any attention and I can't click it to bring up more information so we had to find a solution for this really quickly. And our solution was we probably changed the scaling. At this point we were using a linear scale and we used the (unknown term) scale to bring them together. So, once we apply the scaling to the design, to the developed version, it looks much better. So small project does it bigger and every project is quicker. In the end it's a really beautiful website. However, I have to admit that the wide frame and the final version, they looked quite different. I think the reason was I was trying to use random but meaningful data but I was using meaningful data. Looking back, I think what I should have done is pushed the client to give me realistic key parameters. This would have been a realistic number, 150 projects instead of 30. And we could have thought about - we would have implemented a search function and maybe come up with an algorithmic scale already. This is the project where we tried to use the meaningful data. Let's try to explore where to place the data. So, this is the poor and the job was to consider to explore the (inaudible). So, this is one of the key screens of the wide frames at the top we can see some filters and at the bottom a few figures. So, we used mostly (inaudible), so the playful (inaudible) contain s the rectangle and the cross. So, it doesn't even have a red title and we used to pay for that because this website, even though it contains the charge, it was not about the charge but about built ing and using categorisation. But we included one key graph that has the title and the chat to see what the player represents. We could have implemented or included more want but there would have been more work flow and there would not be any benefit for you or the client. So, this is the right way to go.
5. UX Australia 2019 -29th August, Breakout session (AUUXAU2908B) Page 5 of 6 So, we learned about these strategies. Remember, it's not about creating amazing wide frames but data special visualisation projects. MARTIN VON LUPIN: There might be another way of doing this apart from wire frames. Let's explore a current situation. So (inaudible) want us to study the chromosome s. This is the final developed version and for this project I want to start with the final version and walk back. So, we see a network visualisation in the middle? Yes. And at the side we have some side bar with some builders. And the visualisation contains four circles. So, the inner circle, that is the chromosomes, then the second circle, that's the HRNA then there is the outer sickle, it's the micro MRNA and then the outer circle is the proteins. So, they are always 3,000 notes and over 6,000 relations in this visualisation. I think you get the idea that it's insanely complex. It even gets more complex if you consider they there are filter and every item is clickable and brings up more information. How do we create better wide frames for something that complex? Our answer is you don't. Instead, we created sketches are very detailed (inaudible) to have the viable end data it would get. So, the hide would not leave and the sketches. I think this worked really well. This times it was so involved with the data inside they were able to validate our gds based on our sketches. However, there were a few surprises during - that we had to fix during development. One was we were using that concentric circle, so that flat lines here. But then we realised it's so many notes, we simply can't do it and we have to find another charge arrangement. So, we found another more defence arrangement for u it. OK, so we learned about these free strategies and a few alternatives. I think it's fair to say if data visualisation is fundamental for the structure or interactions with Committee use real data. With if we don't have real data it's a good option to make meaningful data and then we can use something else if the data visualisation is not available for. I think there is only one question left. How do we contain the frames to contain the real data? MARTIN VON LUPIN: So, I've created the (inaudible) outside the software and import images into the wide frame. This is what we did for the Map project. We imported all the data into QGS which is like a CSIRO software and took a screenshot and uploaded the images to our wide frame. We made sure that the visuals were created in GGS, had the same visual style than the wide frame so looks consistent. The other advantage of using a different software, usually the other software is doing the advanced graphics. So this time I could filter by species and include this fixture in our designs. So, when we do wide frames we often use sketch and we use sketch in combination with a few other plug-ins. I want to share be you the two plug-ins we use. One is Populator. It would have been tedious to build it all by hand. With data populator, you run the plug-in, run the file, click OK and it putting everything into your system. It's very fast and efficiency and accurate.
6. UX Australia 2019 -29th August, Breakout session (AUUXAU2908B) Page 6 of 6 The second file I would like you to show you is (inaudible). You can create bar charts with random or real data. One example of random data, so, yeah, I have three bar charts, I run a plug-in, I add my Extremer and I have a bunch of random bar charts. Ice more for Trent, the chip and charts can do that. So today we learned if we want to create data realisation website it's a really good idea to inclusion collude some kind of data in the wire frame. We learned about the three strategies, but I think it's fair to say the really beneficial approach is toure wide data in your wire frames. You can spot ranges very early in the process and you eventually educate them. But most importantly using wire frames is fun and the clients love it. OK. Thanks. [APPLAUSE]