2/24/12

Finally, Visuals!

So, finally, this blog is has some visuals within it! (Yes, you're welcome Kidwell) This has been a long time coming, lots of research and thinking and understanding of this system. The three images below are my initial visualizations of all of the factors that go into giving an article, journalist, or website its rating. I like to think of these as visuals instead of infographs because they're very unclear and have ended up being used to show the factors that go into a rating, but not actually any content.
Articles, journalists, and websites are graded on the same criteria, the only thing that changes is what it is influenced by. With the article, it's rating is influenced by the journalist who wrote it and the website it was published on. The journalist has a stronger pull on the article's rating than the website becuase it is literally the journalist's written voice.
So it would make sense that the journalist's rate is affected by the articles they've written and the website(s) they write for. The article ratings has less of a pull on the journalist's than the website. The journalist may write hundreds of articles in a year, and as time progresses and they accumulate more articles, the better understanding of their writing reliability. As for the website, the journalist is a human embodiment of the website, so how the website is viewed is partially how the journalist is viewed.

As for the website, the content(articles) it is rated on is created by the journalist, so they both have direct influence over the rating of the website. Because the journalists are embodiments of the website, they really determine the overall rating of the website. It doesn't matter what the website set out to be/do, what matters is what it actually is doing.

How to Visualize this Clearly and Accurately
This was my first stab at showing this idea, a circular bar graph. All of the attributes that go into giving a piece its rating is on the same graph to help show they're interconnected. Sourrounding the main graph is the political stance of the piece, to better help show where it stands in relation to the reader.
With the first try, i realized that it didn't give an easy way to show a quick understanding of the rating the piece had. This was my next attempt to try and address this issue, something that has an easier first read that still allows for a deep dive into the content. The ideal shape in these graphs is either a perfect hexagon(left), or a perfect circle(right) The color is red because with this example the piece has a conservative slant to it. I liked this idea, but it was getting a bit confusing. This system is complex, and showing that complexity is key, but not confusingly. Confusing does not equal clear and accurate, if it's confusing, it could end up misrepresenting the content. 
Thsi graph above and the one below, are trying to help show reliability through color as well. The one above is just a jumble of color, but the one below is working on the idea of the less white, and the more color it has, the more reliable it is. That way, it's not jsut size, but also color to help get the initial idea across.
The graph above was just another style of the same circular grid. The two smaller blue ones were testing out what the shape would like without any defining factors, trying to find a shape that could easily convey "amount" of reliability.
Then I tried something different with this bar graph above. The bottom set of lines are all of the contributing factors to the rating of the piece. The middle shape is all of them overlaid to help find the mean of the ratings. The top bar is the mean of the bottom six bars combined. So with the individual ratings of 8, 12, 7, 2, 5,  and 9, the mean was found to be 7.2. This, if put with what the max size the bar could be, quickly shows its reliability. Possibly, when you hover over the bar, it could break apart to look like the middle bar to show where the mean was created from. The bottom set of bars would then allow for a deeper dive into the content. The two below this are just other shapes I considered, squares and circles. The bar graph works better in my mind because the height of the shape is always the same, it's only the width that changes. This allows for a quicker understanding. With the two below, comparing two squares with the same proportional sides, or circles that all look the same, rely on size only, and not shape.  This makes the initial reading slower, slower = not as good.
Colors of These Infographs?

Researching political colors, I found that historically, blue goes with conservative more than liberal. This stems back to the conservative party in the UK using blue. But the United States has very recently decided on red for conservative, blue for liberal. The Democrats recently revealed an all blue logo, and then the Republicans came out with an all red logo soon after.
            But does the red and blue have to be exactly red and blue? Can it be a blue/green and a red/orange? I don't know yet, I'm still playing around and doing research. But one thing I know is that people are not just blue or just red, they are very much purple. So one thing I want to have with this system is the ability to be somewhere in between red and blue, some form of purple.
            The color was chosen to help situate where the article/journalist/website is coming from, it gives a quicker understanding of the context this is in. For example, if there is a strong bias to the article and the shape has a red hue to it, it will be bias in favor of conservative.
Sooooo.... From Here?

Pick a direction for my infographs, both style, shape, and color. And start wireframing the app + plugin. This infograph system is at the very core of this idea, so this needs to be figured out ASAP.

No comments:

Post a Comment