Clear Communication vs Persuasion: Same Data, Different Message
For this project, we were asked to design two visual representations, one for clear communication and reasoning and the other for persuasive communication and storytelling, to communicate a data set of our own choice.
Our team ended up choosing song lyrics data set to communicate our ideas. For clear communication, we ended up showing the most popular word usage from 1960s till 2010s whereas for persuasive communication, we showed the comparison between the words love and hate, both in terms of frequency of occurrence in each decade and the proportional change in usage between decades, from 1960s to 2010s.
5 Sheet Design Process
We used the five-design sheet (Fds) approach to come up without design for both the communication methods, along with getting some feedback from Professor Peck.
Sheet 1
- Generate Ideas : Sketches
This is our first initial sketch of both the clear communication portion and persuasion portion of our visualization project.
The initial ideas we had for Clear-Communication include:
- Most frequent words by year/decade
- Word Cloud
- Recurring top artists in subsequent years
- Average number of words per song in each year or decade
The initial ideas we had for Persuasion include:
- Word Cloud
- Radio slider playing top songs involving the words love and hate with the song playing being the one with the most plays with either of those two words in the title
2. Filter the ideas
Our ideas were quite unique in their basic nature and measured varied parts of our data set. Therefore we moved on to the next step in Sheet 1 of the Five Design Sheet Method.
3. Categorize the sketches: Categorize concepts, stickies, ideas, thoughts
We categorized ideas based on the data we were measuring. For the clear-communication, we linked ideas 1, 2, and 3 together as they all involved measuring the frequency of words with time as the x-axis. For persuasion, we decided that our two ideas were quite different and did not need to be categorized.
4. Combine & Refine: As you see in the image, we began to draw small images that depict each idea.
5. Question: We concluded this final sheet by scrutinizing each of the ideas. Some questions we proposed were:
- Does this graph sit in line with the theme Clear-Communication or Persuasion respectively?
- Does it clearly deliver value to the user in an interesting story or in a new opinion?
We came to a conclusion after long discussion to execute on visualizing the most frequent words used in song lyrics per decade for the clear-communication visualization. For the persuasion visualization, we decided on implementing the radio slider idea that displayed the song that was of highest frequency with either the word ‘Love’ or ‘Hate’ in the title of each song.
Sheet 2,3,4
CLEAR COMMUNICATION
Layout: On our initial ideas from stage 1, we decided to proceed with the idea of showing the word frequency from each decade. The idea was to choose certain words that have occurred more than others words and graph them right next to each other in the form of a bar graph. We went with a bar graph because it was the easiest and most intuitive way to compare the word frequencies side-by-side.
Focus: To show more in-depth data, we went with an idea to expand the graph to a horizontal bar graph, where each bar in the graph will be divided into different years within that decade and show how many occurrences of the word took place in each decade.
Operations: To navigate through the various decades, there would be clickable sideways arrow to go to the next or previous decade (range from 1960s to 2010s). In addition, the regular bar graph would have clickable bars that would further navigate to the horizontal bar graph.
Discussion: While discussing this idea among our group members, we found that this idea would show the intensity of words used. However, we were concerned as to how clear the idea was and whether two layers of graphs were enough to communicate the idea across.
To get an opinion, we showed our idea to Professor Peck. He recommended us to use a better way to present this data than two bar graphs. The horizontal bar graph was rather confusing. We eventually decided to have individual small line graphs for each of the words, showing their individual trends over the decade.
PERSUASIVE COMMUNICATION
Layout: For our persuasive communication idea, we ended up choosing the idea of presenting the relationship between opposite words. Our initial idea was to have two line graphs side-by-side, with one showing the actual frequency usage of the words while the other showing the proportional change in word usage in each decade. We initially decided to go with 3 pairs of words: Love & Hate, Happy & Sad, and Together & Lonely.
Focus: For each of the graphs, the two words will be presented in the form of a line graph with different legends on the side. If a song is being played, a small box will appear at the top, indicating the song name and artist of the song.
Operations: There will be three buttons on top labelled L&H, H&S, and T&L that the user can click on to have that particular word pair relationship appear on the two graphs. In addition, all the points will have small cycles with a music symbol on them, indicating the user to press the button. Once the button was pressed, two famous song that contain the very word pair chosen, will be played for 30 seconds.
Discussion: This idea seemed a lot more interactive since it showed the involvement of multiple senses (sight and sound) to fully interact with the graphs. The navigation between the graphs was another advantage this design had. The overlap of music symbols was a potential problem that could hinder the user to choose the right song. In addition, this idea wasn’t too distinguished from our clear communication idea.
After getting some feedback from Professor Peck on our design, we decided to scrap that idea and come with an idea that had more visual appeal to it. We thus start thinking towards the lines of getting rid of the graph completely.
Sheet 5
CLEAR COMMUNICATION
The most notable element of our sheet 5 for clear communication is the small multiples chart that replaces the stacked bar chart. This change was made based on feedback from Professor Peck in order to better capture change in word usage among the top words over the decades. One can focus on one particular element in the grid to see how its usage compared to itself and then compare to the surrounding graphs. We felt this would better visually display word trends than a stacked bar graph.
PERSUASIVE COMMUNICATION
Feedback regarding our persuasive design pointed out that our idea was still predominantly a clear communication design. This led us to take a more creative approach on our relationship between opposite words idea.
- We eliminated graphs altogether and decided to use emojis of differing size to convey the same relationship as our original graph.
- We replaced the x axis timeline and instead utilized a radio dial to change decades
- When a particular decade is tuned into on the radio dial, the top song from that decade containing the predominant word in the relationship will play.
These implementations led to a much more creative visualization than we had started out with.
CLEAR COMMUNICATION
Implementation
In order to display our data, we first had to parse our csv to pull out the required data for the visualization. We wrote a short Python script that gave us the top 12 most frequently used words over the 50 years of song data. Taking that data, we utilized Vega to create our visualizations. We chose to use Vega over Vega-Lite to allow for more dynamic visualization elements.
Pitfalls and Struggles
Our initial pitfall was in implementing our design in Vega-lite. Neither of us were particularly well versed in constructing data visualizations nor working with the Vega-lite library. It would have been more effective if we had spent less time working on curating ideas and instead began playing with Vega-lite.
Second, we were incredibly optimistic in our ability to create very interactive graphs given the time constraints. We included this in our initial designs but were forced to adjust our design towards graphs with little interactivity. As a result, we failed to include any of original interactivity ideas in our final prototype.
Final product
We were content with our final product as seen below. Our first graph indicated, using bar graphs, the highest frequency words used in lyrics per decade since 1960. We felt that the graph is clear and displays the data very objectively. There is no interaction and the text is clear. We worked to make sure that our final project.
Here is our small multiples graph. For each word, we wanted to show a clear and informative way to compare each of the top words with each other over the decades. As you can see, words that in aggregate have similar frequencies certainly fluctuate during different periods of time.
PERSUASIVE COMMUNICATION
For our persuasive visualization, we wanted to show how easily we could tell vastly different stories using the same exact data set. To do this, we created two visualizations using p5.js, which Sierra had experience with. Both visualizations were very similar in that they had a stereo-esque dial that the user could turn through using their mouse, similar to how turning a stereo knob changes the station and moves the orange needle to show the current station. Through this, the user could move through the decades, from 1960s to 2010s, playing a different song from each decade.
In one of our visualizations, we showed the proportional change in the use of the words ‘Love’ and ‘Hate’ in music through these decades. From the 1960s to 2010s, the word ‘hate’ grew substantially in use, so that by the 2010s it had grown proportionally 12 times compared to its usage in the 60s. To show this change, the songs played were the most popular songs of their respective decade that used the word hate. Additionally, the words ‘love’ and ‘hate’ appeared randomly on the screen throughout the visualization, changing in size to show their proportional change over time.
In our other visualization, we focused on overall word usage instead of proportional change. With this parameter, we saw that ‘love’ was consistently used between 1000–3000 times every decade, while ‘hate’ was used only 10–120 times. In this visualization, the words still appeared randomly on the screen, but their size was correlated to their frequency of usage in each decade. Also, the songs played in this visualization were the most popular songs from each decade that used the word ‘love.’ This decision was made since the visualization showed that ‘love’ overpowered ‘hate’ in every decade by a significant margin.
To aid our user in understanding the data set, we also added a button in the bottom right corner each of our visualization screens. When this button was clicked, the user was redirected to another page that laid the information about what this data set is supposed to present. A back button was included to return back to the visualization screen. Additional instructions were added below the dial to tell the user how to interact with the visualization.
We had many different ideas throughout the design process that we eventually decided against.
- Originally, we wanted to incorporate line graphs that showed the proportional change and overall usage. While this would have been clearer for the user, we decided to focus more on impact and persuasion and, as a result, cut out the actual graphs from our design.
- One of our early designs had us using emojis in place of the written words ‘love’ and ‘hate’ that appear randomly on the screen. We decided to scrap this idea to make the visualization more clear for the user.
- We played around with many different color schemes and did research on what certain colors are associated with. After getting advice from Professor Peck, we chose a pink and dark blue that are similar in saturation levels, so neither color overpowers the other. We also changed our background to white, whereas it was originally a dark gray, to make the visualization stand out more.
- While the idea of having the info screen appear first made more sense, with both the visualization screens linked to it, due to time constraints we decided to just add the screens separately to each of our visualizations.
Reception/Improvements/Struggles
After finishing our visualizations, we presented our work in class and received feedback from classmates. Many people commented on our graphics and praised our music and design choices, particularly in our persuasive visualizations. Many classmates suggested putting our information page first on the persuasive visualizations, which we expected (we liked this idea, but due to time constraints we decided against it). We also got feedback saying that we should not use small multiples in our clear communication, which we found surprising. We felt that, given the data we were presenting, small multiples was a clear way to show the different data, but our classmates did not agree.
Overall, our group felt comfortable in our visualizations, especially given our time constraints. While we were not able to create all aspects that we originally envisioned, we were able to create visualizations that focused on clear communication of our data, and persuasive visualizations that showed how we can easily manipulate our data and the story we tell through it.
Links to persuasive communication visuals:
http://eg.bucknell.edu/~as062/bucknell-hci/word-use/
http://eg.bucknell.edu/~as062/bucknell-hci/proportional-change/
Link to clear communication visuals:
