Design for Understanding — Clear Communication versus Persuasion
Summary
Our project is based on communicating a data set that we chose to effectively communicate in two different ways using data visualization techniques. These two perspectives include clear communication and persuasion. Clear communication visuals are a series of graphs and charts that give an in-depth, unbiased, and clear portrait of the data. Persuasion visuals are more open-ended and share a story to depict the data in a way that will leave a long lasting impact in the user.
Choosing a Data Set
We first looked through a variety of links and decided to choose the March Madness 2018 Predictions that was featured on the FiveThirtyEight site.
We used this data set because our team found it to be both easy to work with as it was already cleaned and interesting to interpret predictions of the NCAA Basketball Championship. Furthermore, we found that many aspects of the data set can be used to effectively portray the information in the two different, captivating perspectives using graphs and persuasion.
Design Process
Clear Communication:
We first wanted to establish the aspects to include in our design so that the users would be captivated in looking at the visuals. We then decided the following areas would be interesting to look at:
- Every team’s rating and the round they got eliminated
- Every team’s rating and the gender of that team (either all female or all male)
- The final four team’s individual chances and other team’s chances of getting into the Final Four Game
- The chances of the final four teams winning the Final Four Championship
We took these features to create our own excel spreadsheets based on the original data set spreadsheet, which we also used, to help depict the graphs that we will choose later on:
For this sheet, we took each team, their team rating, and the round they got eliminated in. We could tell that the final four teams who made it to the final round were Villanova, Michigan, Kansas, and Loyola.
In this sheet, we mainly compiled the final four teams, each of their chances and other team’s chances of getting into the Final Four Game, and the chance of each of the final four teams winning the Championship.
Sketches (Sheet 1)
For the four aspects that are bulleted above, we wanted to make sure we would pick the most compatible chart. Below is a sketch of ideas we brainstormed:
At first, we thought about using either pie charts or a line graph for each of the final four team’s chances against all other team’s chances to get into the Final Four Game feature.
For the team rating versus(vs) round eliminated aspect, we again had two ideas. We could either use a bar graph to compare different ratings every team had when they got eliminated in each round or a scatterplot to show the outliers of the data.
In addition, we thought it might be interesting to show either a bar graph or binned scatterplot of men’s team ratings and women’s team ratings to see how the two different groups perform overall.
Initial Design (Sheet 2 & 3)
After we brainstormed many ideas, we started to make a concrete decision about which charts would be best for each aspect of the data we chose to interpret. Below is our process for our selection:
We decided to use the pie charts to display individual chances for the final four teams against the chances of other teams to compete in the final round. Moreover, we used a pie chart to show the final four team’s chances of winning the Championship. We chose this graph because we can clearly visualize their percentages of winning by the size and color of the section. With a line graph, it would be difficult to see the different team’s probabilities and color coding would be a problem.
We determined to use a scatterplot to show every team’s rating after they got eliminated in a round. We chose this graph because we would be able to see any outliers or unusual team ratings. Additionally, we would be able to see the lowest and highest team ratings in each round and in general. A bar graph would not give us this level of in-depth knowledge about the data in this aspect.
We used a binned scatterplot to present how the men’s and women’s group perform based on their team rating. We used this graph because we can see how many teams have achieved the team rating. We can also see the highest and lowest team ratings for each gender. Again, the bar graph would only be able to compare average team ratings so it wouldn’t provide us with the information we want to analyze.
Final Design (Sheet 4)
After many thought processes about which graphs to use for each aspect we wanted to investigate, we started sketching what we wanted our final design to look like. Below is a layout of our graphic designs:
At this point, we mapped out the percentages, colors, and legend for the pie charts and the data we would expect to see implemented for the scatterplots. We decided to use warm, complementary colors for each of the individual graphs and then use those corresponding colors to form the Final Four graph. We wanted to include a legend to understand the graphs better. We expected to see common trends and outliers in the scatterplots. For example, we anticipated to see some variation between men’s and women’s team ratings.
Persuasion:
Brainstorming
We wanted to show some of the biggest landslide wins between two teams in a round as we thought it was a good coverage of the perspective we wanted to cover and be able to convey the information in a unique, compelling manner.
Sketches (Sheet 1)
We had many different ideas and design version to depict a persuasive visualization. Below are some of these sketches:
One idea we had to make our visual was to create a bar with 6 divided regions, one for each round of the game. Each divided region would have a varying color intensity to show the percent chance they had to win each round (with the darker color having the bigger probability) and thus the difference in how each team would perform in that round.
Another idea was to have pictures of the mascot or logo for each pair of teams that are competing in that round. We would enlarge or reduce the size of the image to show a team with the bigger or lower chance of winning, respectively.
Initial Design (Sheet 2 & 3)
We went on to create the initial designs of the aforementioned ideas after thinking about pros and cons of each. Below is the design sheet:
For the sheet 2 design, we determined that it would be useful to see the percent chance of each team winning the round using the color intensity technique. However, we wouldn’t be able to see the momentum of each team and it is not as intuitive.
For the sheet 3 design, the size factor would be the biggest component of the visualization. It would serve to be more intuitive since the user can visualize the team using the team mascot or logo. However, we wouldn’t be able to see performances in every single round.
Final Design (Sheet 4)
After much thought on which version to use, we decided to go with our second idea which depends on the size of the team mascot or logo. Below is a sketch of our final design:
We chose this as our final design because we wanted our design to be intuitive, easily understandable, and readable. Having images instead of long boxes would give more of a compelling story to the users. Furthermore, the size, instead of color intensity, of the images will effectively communicate the games that were won in a landslide in this data set and make users understand that when they see our visualization.
Final Implemented Design
We implemented our Clear Communication Graphs on Vega-Lite (image 1) and our Persuasion Data Visualization on P5JS (image 2). We then put these graphs on a website using HTML to create a central location to view and compare them.
Both of the different scatterplots and pie charts were created using the example template graphs provided on the Vega website. We converted the excel sheets that we created to a .csv file and put it on our Github site. We kept the original data set link the same since it was already a .csv file. Then we used those links to import and parse the data to form our graphs on Vega-Lite.
We were satisfied with how the design of the graphs looked as it clearly gave us the information we wanted to know in an intriguing manner.
Using P5JS, we compiled the pictures of the team mascots or logos. We then decided the layout of the website would have half the teams on the left and the other half on the right for easy readability. We established they would be placed in pairs determining what teams are playing against each other in the round, much like in our final design sketch. In addition, we adjusted the size of the image relative to their percent chance of winning that game. The bigger the image, the more chance and advantage they have for winning.
There were technical trade-offs as we spent a good amount of time trying to familiarize ourselves with Vega-Lite and Javascript. Given the time constraint we had, it was difficult to build a highly technical product that had all components to satisfy the user. However, we did try to incorporate elements that we thought were important for each type of design.
Comparing/Contrasting the Two Designs
The two designs had some very interesting perspectives on the same data set. While there were some similarities in content, there were also many differences in visual presentation.
Each of the clear communication graphs show a different, straightforward, clear-cut view of the data set. The team ratings vs round eliminated graph shows trends for each round. For example, round 1 had the highest variety in team ratings and round 5 had the highest team ratings overall. The team ratings vs gender graph displays that women have more disparity or variety in their team ratings compared to men. The pie charts convey that Villanova has the best chance (about a 50/50 shot) against other teams to both qualify for the Final Four and win the championship.
The persuasive visualization shows a compelling story about the games played between two NCAA teams. It demonstrates that many of the teams that had a very low chance of winning actually ended up victorious by a landslide in the game. The success rates and size of upsets of different schools is surprising to look at as well.
Feedback
We had our demo day for this project on 4/2 where we demonstrated our design to various other students in our HCI class. We got a lot of comments on where the design went well and where we could improve using the “I Like, I Wish, What if” format. Many people liked the presentation and layout of the information, using pie charts, pointing out concepts that they didn’t consider, and showcasing data using team logos. Some parts they suggested to improve were having more defined labels for the pie charts and persuasive design, displaying the data in a more intuitive way for people who don’t understand sports, and having an interaction to switch between charts. It was very helpful to receive feedback from peers. We could take this into account if we made improvements to the designs in the future.
Looking Back
In the future, there are areas where we could refine both designs. We could improve the readability in the pie charts by having more defined labels and distinct colors. We could also enhance comprehensibility by having labels for the team logos in the persuasive designs. Moreover, we could develop a more interactive visual for people who don’t understand sports or even include information on the website that gives background details on the data. To make the site less cluttered, we could include a button to switch between different graphs or designs.
