Design for Understanding
Group 5: David Abraham, John Amaral, Michael Collins, Henry Dunphy
We were tasked with creating visual representations of data for two very different purposes. We examined drug use and frequency over different age groups across different types of drugs. We took the raw data and visualized it to clearly communicate the information and to highlight the impact of the data in a persuasive way.
Clear Communication
Introduction
The clear communication and reasoning way of representing the data is most effective at displaying the data in its entirety. The data is displayed in an unbiased, in-depth, clear manner, all the data is there and up to the user to interpret. This means we assumed our users did not need training on our subject. The graphs are meant to be as minimalistic as possible because the point is to just display the data. The graphs also allow the users to easily compare and contrast the different drug types.
Five Sheet Design Process:
When we started brainstorming for how to clearly communicate the entire data set, our largest consideration was what about the data was most important for viewers to see. The data contained usage information across ages, which we could use use as a kind of time axis, and across different types of drugs, which meant the ability to compare across those types would also be an important feature. Our brainstorming accordingly produced a lot of line charts, which would emphasize the progression of usage over age, and bar charts, which are very easy to use to make comparisons, according to our readings for class. We also decided to experiment with radar charts, for a more visually interesting solution.
The next three sheets are for exploring these options more in depth. For the line chart, we decided to display only two charts at once, the usage and frequency charts for a given drug. We would allow the user to switch between sets of charts at will, but also select multiple drugs at once, showing all relevant charts on the same axes. The benefit of the approach is that it allows all types of comparison at once, while not being cluttered with data the user does not want to see.
Our next sheet was a clustered bar chart design, which would show data for all drug types at once, clustered together at each age group. This chart would once again allow for all comparisons the user would want to make across the data set in one chart, and such comparisons would be somewhat easier in bar chart form. The disadvantage is that the design is very busy, with no easy way to remove information irrelevant to the user, and comparison over age would wind up very spread out.
The final design we investigated was using a radar chart for each age, to show data for all different drug types at once on different axes. We decided that while this was probably the most visually interesting design, it would be too cluttered and hard to read, especially since it would need 13 separate axes to show all types of drugs at once.
With all of this in mind, we made our decision to pursue the line charts as our final design, using checkboxes to control what information is being viewed at any one time. This allows for the most readability and ability to compare data.
Final Design:
After deciding on the line chart design, the next thing we had to worry about was implementation. We originally were only going to use the p5.js library however upon further research we discovered that there was a library designed specifically for creating graphs and charts, Chart.js (www.chartjs.org). When learning to use the two libraries we took ‘baby steps’ in our approach to adding elements. First we started with getting a generic graph to display using the Chart.js library. Next we worked with p5.js to load in the csv file we downloaded from github and use its data within our chart. There was some difficulties with this step until we realized that we were calling the data before the csv file was loaded in. To fix this we created a function that loads the csv file and then calls a function to create our chart. Next we implemented a second chart by adding parameters to the build chart function which allowed us to create charts with different labels and title. These charts were put side by side for easy comparison. After the charts were working to our liking, we added checkboxes which would allow the user to add the different drug datasets to the graph and allow for easy comparison. Finally we finished up by adding different aesthetic components such as surrounding the checkboxes in a green background.
Persuasive communication
Introduction:
For the persuasive communication data representations, we knew we wanted to keep drug use and drug frequency separate. The original .csv table containing all of the data was extremely vague on the differences between use and frequency. From the information we gathered, the use referred to the percentage of those out of that age group who were surveyed who used the specific drug at least once within the past year. The frequency corresponded to the median number of times that percentage of people used that drug within the past year.
Five Sheet Design Process:
We started considering different ideas for the use and the frequency. For the use, we were dealing with percentages, so at first we considered pie charts. However, it would have been difficult to do this, as the percentages between the different age groups or between the different drugs within one age group could not be collectively organized into one pie chart. We realized that the only comparison we could make with the drug use was between the percentage of those within a given age group who used it and the rest of that age group who didn’t. This lead us to choosing pictographs as a way to represent the drug use. We figured that using human-like stick figures would make users realize that actual people are affected by drug use. It is not just data; it means something much more.
For the frequencies of drug use, knew from the get-go that we wanted a bar chart since the frequencies were physical numbers that could be compared between age groups.
Once we brainstormed ideas, the actual designing process began. Since we were focused on creating an impact on people, we came up with clever ways to represent the data. We figured it would be most effective for us to focus on ages 12–18. We were especially glad we covered 12-year-olds, as the results of that data were unbelievable. We also decided on 3 different graphs for use and 3 different graphs for frequency, as we believed this was great enough to the point where people would take away the message that we were trying to convey: people (teenagers especially) should not abuse drugs.
For the drug use pictographs, we honed in on specific age groups and specific drugs that we wanted to highlight. Originally, we were going to do one pictograph for a specific drug among all teenagers, which is why there are math equations within each design sheet for the different pictographs. However, this made less sense as we went on, and we figured there would be too much going on in one graph if we did all age groups for one drug. We ended up choosing inhalant usage among 13-year-olds, marijuana usage among 17-year-olds, and alcohol usage among 16-year-olds.
The frequency graphs were easier to come up with because they were bar graphs. For each one, we wanted something special to make them unique. We decided on displaying heroin use among teenagers, hallucinogen use among teenagers, and cocaine use among teenagers. We used needles for the bars in the heroin graph, mushrooms in the hallucinogen graph, and straws in the cocaine graph. We chose these specific drugs because the frequency of use within our age group was staggering to use, and we felt that this could help in our goal to persuade.
Final Design:
For our final designs, we actually did not use JavaScript functionality. We figured to make the graphs, it would not make sense to use JavaScript but instead use a separate program to make the graphs visually interesting; JavaScript would limit us too much. We used a program called Piktochart to make our graphs.
For the drug use pictographs, we used stick figure models to represent people. We decided that stick figures did the best job of conveying that we were talking about actual people and not just numbers. We made our sample size out of 50 to have a nice even number that users would be able to understand easily. The gray stick figures represented people in that age group who did not use the drug, and the ones that were given a specific color did use that drug. We included images in the background of the pictographs to make them more visually stimulating and too convey the subject easier. We stretched the truth a little bit when we said “on average,” since the data given in the original table used the median. However, if anything this means that the proportions are too small, and that the actual average usage is greater.
For the frequency bar graphs, we ended up going with our previous 3 ideas with the needles, mushrooms, and straws. Once again, this was done to make the graphs a little easier to identify and stimulate interest. Among all three bar graphs, each age group had a different color: 12 was light blue, 13 was dark blue, 14 was green, 15 was purple, 16 was yellow, and 17 was red. For all of the graphs, age was on the x-axis and frequency on the y-axis.
We put together all 6 of these graphs into an HTML webpage that we modified. We separated them into two sections, one for the usage and one for the frequency. We did not want our background to be colorful since we wanted to convey a negative message related to drug use. We also used black text for this reason. We made an attempt at implementing audio within our webpage, but this proved to be a major problem as some computers played certain audio files while others did not. This was even after we tested with different browsers (Chrome if the best) and different audio file types (wav vs. mp3).
Final Thoughts:
We demoed our designs to our peers and recieved a variety of feedback. Many liked how easy it was to compare different line graphs in the same window for our clear communication approach. Many also commented on the visuals of the persuasive approach and liked the simplistic design. Both of the designs needed better directions according to our peers, and our websites had a few quirks that they also pointed out. Overall, we are happy with these results.
The goals for these two representations were very different. The clear communication representation was meant to display the data that the user wanted in a user friendly way. The persuasive communication representation was meant to show how much of an issue drug abuse is in teenagers, not necessarily the exact data. We made sure to take these goals into consideration when designing our interfaces, and we believe our final products reflect their respective goals.
Check out our clear communication data and our persuasive communication data with the provided links.
Made by: David Abraham, John Amaral, Michael Collins, and Henry Dunphy