Data virtualization helps translate numbers into a language our brain understands. Each person has his/her own sense and ability on understanding, so we should make our design enable to communicate effectively to people in a way that best fits their brains.
First, we decided to use American election from 2016 to be our dataset, which contains number of votes for each candidate, percent of votes for each candidate, state and county. Considering the votes, we definitely want to show the comparison between different states or candidates. The motivation of this design is that enables the users to learn the information of the selected dataset through our charts. There are two approaches to make two entire different kind of chart for two different groups of users.
Clear Communication
One is the clear communication, which assumes all the users have the ability of understanding the traditional charts. Therefore, we choose three classic traditional charts to distribute different portrait of the same dataset.
Five Design Sheet
At the brainstorm stage, we scratch lots of idea about the traditional chart, which relates with election topic. Then we take the ideas and remove the duplicate ideas, which we find line chart and histogram are similar in this situation, so we remove the histogram. Unfortunately, in next stage for testing prototype, we just realize it is a bad idea. Actually, the advantage of five design sheet doesn’t reveal well for clear communication, for my perspective, because there are not many design element for this part, which we only want users to be able to understand the data as quick and accurate as possible. Therefore, after brainstorm, we move on to the realization design.
Realization Design on Vega-Lite
We have a grouped bar chart, which represents the comparison of three candidates who have the highest total number of votes in each state. We assume the users can realize what the preference of each state for those candidate. In the first testing of our prototype, actually this is our first chart for users to test, some of the users are a little confused about what is our dataset, which they know nothing about the American election. The users provide really useful advice that we should put a big title on the top of the chart to give others a clear sense about what they are looking for. On the other hand, grouped bar chart works well which helps users to identify the area we expect them to learn, because as we all know, bar chart is used to show the comparison between multiple distributions, which most of users think this one is helpful and clear enough. At the end, we did a little change on this chart, which remove the name under the x-axis. Users suggest because we already have the legend with name of each color, we don’t need the name showing under each bar, which makes a little messy.
Our second chart tries to have an overall presentation for this election, which is a line chart with each candidate’s total votes. Users don’t have positive reflections on this chart, because they think it is confused that the line chart is for representing the change between same distribution in different stage, which is definitely not suitable for counting votes in election. Also, we tried put multiple line charts in one image; each line represents one candidate. However, it still doesn’t work for clear communication, since there are so many candidate which make the chart really messy. Moreover, because of the huge difference of the number of votes between two candidate, many points seem like they all get 0 for total of votes. Even though they have thousands of votes, it is still a large interval with millions of votes. Finally, we come up with another traditional clear chart, the quite classic and simple one, the histogram. It can show the accurate representation of the distribution of the numerical data, which is perfect in this case. We set the x-axis to represent the candidate, so one column is a candidate; considering the ability of Vega-Lite, users can move the mouse on the column, which the legend with exact number and name will show up immediately.
The last one for clear communication is horizontal bar chart, which we would like to show the distribution of number of the votes in each state for every candidate. As you can see, the x-axis is the total number of votes and y-axis represents each state. Moreover, each bar has various colors which represents multiple state. First vision of this chart is a normal horizontal bar chart, which the length of each bar is determined by the total number of votes, so users can easily make the comparison through comparing the length. Unfortunately, some of the votes in state is so tiny, which users can’t even notice that color bar or they can’t indicate where that state is by mouse. Therefore, we make some improvement on this chart, which we reorganize the chart by stretching each bar and make them have the same length. Now, the chart is clear enough to see each state. In addition, we did some extra improvement for the graph, which is adding a selection tool. This tool are setting at the bottom of the graph, which enables the use to only view the candidate they want to learn. As the graph shows, once the user chooses the name of the candidate, all the area for other candidates become grey, which makes users to find specific information more convenient. It is easy to realize that there is a bug about the selection tool, which the piece of its title is missing. I think this is the Vega’s problem that maybe next time we will figure our another tool to improve this chart.
The essential element making those design work is clear and direct presentation for our dataset. The most important thing of data virtualization is not misleading the users, which provides the numerical data directly to the users’ brain. I believe our clear communication does achieve this motivation after listening to the feedback from user and making the improvement based on it.
User testing is quite helpful for data virtualization, which provides a creative aspect from the people who will really use our design. Users have specific motivation on what they expect to see, so they can directly tell you what’s wrong there. Users keep their mind clear always as the spectator which is the significant element in the design process.
Summary
An summary for the clear communication part(detailed description above):
After first prototype:
Feedback:
1. Confused for users without knowledge on American election
2. Line chart is not suitable for comparison between same stage
3. Can’t show the difference if candidate got small percent of votes
4. Too many repeating name under each bar(grouped bar chart)
Improvement:
1. Add a clear title for each chart
2. Change the line chart to histogram
3. Stretch the width of the horizontal bar chart
After the final testing:
Feedback:
1. Everything makes sense now.
2. Simple is not a bad design in this situation( because we are always worried if the histogram is too simple for an assignment)
3. Election is a quite large dataset, is there any way to group it.
4. Grouped bar chart is nice and clear
Improvement:
1. To organize the data, add a selection tool for chart.
2. Make the title and legend clear.
Persuasive Communication
The other is called persuasive communication requiring plenty of creative thinking from the designers, which is really tricky that there are so many uncertain element about the users. The users maybe not interested on election, which the designers should try their best to get their attention. Also, when you provide them with traditional chart and force them to get information, they will just get bored and be unable to learn from the dataset. I believe the key element making this data virtualization work is attractive, which we need to design our ‘chart’ by most compelling way.
Five Design Sheet
In the stage of brainstorm, we would like to design something familiar with people’s normal life, like map or building a real election environment. Also, we consider to divide some of distributions in election, which enables users to understand the numerical data easier.
Our first prototype is like a bullet screen that the each candidate’s name moves horizontally above the screen. Users can view the detailed information by clicking on the names. However, the feedback on our first vision is not really positive which the users still think it is boring. Although there might be a reason that it is a paper prototype, the module doesn’t have clear different from the traditional chart just with additional bullet screen.
Realization Design
Then we try to simulate the process of election, not actual election, but it is more like vote in animation. Animation is an amazing element for get people’s attention, which we create an animating simulation for the election. When you click on the name of candidate, there will be lots of ‘person’ representing each vote coming from everywhere around the screen and collected by the ballot box. Then the screen will show the final result for this candidate with the total votes. Users think this one is much better, which is successful to make users concentrate on our dataset, and pay attention on our data virtualization. I believe the reason why this one is successfully worked is we create an interface, the animation, involves users into the data, which the users are not only looking at the data itself, but also extract the data by themselves. They even see where those data comes from by the simulation of election.
You can see how this voting simulation works, which there is an animation with little person appearing on screen. The counting is adding each person into count at the right corner. After the counting finishes, a button written “show the distribution of voting” will appear at the bottom of the screen. Once users click on it, the people will go to the candidate they prefer to vote. Finally, there will be two horizontal bar showing beside the portrait of candidate to represent their total votes.
To see the entire design we made, please go to the site: users.wpi.edu/~dchen3/ and experience.
Summary
An summary for the persuasive communication part(detailed description above):
After first prototype:
Feedback:
1. Little boring, maybe because it is a paper prototype
2. Too similar with traditional chart
Improvement:
1. Make it to real prototype
2. Add animation and simulation
Final prototype:
Feedback:
1. Interesting and successful deliver the information
2. Little messy, can get more organized
Improvement:
- Try to organize the screen and make animation look better
Conclusion
Reflection on design for understanding
For this design of understanding, I believe we are quite successful which convey the information from our dataset to any kind of users. Result in testing prototype provides plenty of advice to enable us to improve our design constantly. By comparison the testing process of two communication, I feel persuasive communication works better, which people can immediately recognize what dataset we are using. Creative way seems like more fit for data virtualization, which it really makes data “virtual”. Clear communication still require users to have ability to analyze the numerical date. Moreover, five design sheet really help a lot, which enables us to assemble different approach of design together. Also, brainstorm is efficient in coming up with ideas which just require a little time to determine whether it is a great idea. Although some of our thoughts may be not achieved this time, it makes the process of realization of design quite easy. If I have another chance to redo this design, there are something I would like change but can’t achieve in this case. The design for persuasive is still a little messy, which we should make it more organize in next time. For simulation of voting, we expect to put more data information which has all of the candidates in more various years, creating an abundant data virtualization. Also, we will design a more pretty and attractive main page for our graph, maybe a short animation, which I believe it will work better.