Mid-semester Critique.

Mid Semester Presentation: Stance

Lots of work to do. New direction, better direction, more concise direction. Thanks for meeting with me Cady, you helped so damn much. I'm a bit behind right now, but I much more content with this direction.

Wireframes + Reliability Graphs.

Below is the small presentation given in class on friday, March 2nd. It goes over the latest infograph style and how it works. It then transitions into my three(ish) scenarios.
Degree Project. Wireframes + Reliability Graphs.


First, My Infographs
            So my search for the perfect infograph style continues as I work on my wireframes for my scenarios. The infographs have gone through many reimaginings since last friday, and have settled on a more direct approach visually.

This is the gradient I've been using for the infographs. Liberals are left-wing, conservatives are right-wing, so it makes sense to have the spectrum to go from liberal to conservative. The bars within this gradient are where the color is pulled for the infographs. There are 10 bars on each side, and one perfectly in the middle. This visualizes the article, journalist, or website's political stance.

I started out with the infographs on top, and it was then translated into the the one on bottom. The idea behind the one on the bottom is that the shape is trying to reach the outer perfect hexagon shape. Reaching that means you have 100% reliability. I enjoyed the curved infograph better, but I was having issues rendering it correctly, so I resorted to the angular one.

Above is a set of these infographs showing the range of possibilities within this system. The closer it got to the outer edge, the darker it got, the closer to the center, the lighter it got. There are a lot of factors shown within this infograph which makes it harder than a simple quick read. Plus, the angular shape wasn't that pleasing to the eye. So, I went back my initial infograph ideas to reevaluate what I had and to rethink the way this functioned.

So I went back to this idea that I ended with in the first round. They are visually reductive in comparison to the hexagon, but they hold just as much information within them as the hexagon infograph. Let's focus on the purple bar infograph. The idea is that the top bar is the visual mean of the set of bars below it. The faded bar in the middle is just the set of bars at the bottom overlaid onto each other. This style(the orange square functions this same way) is about size of the bar representing reliability. The thinness of the height if the bar, with its long, variegating width, makes it hard to place within any sort of context, which is why I made the square to try and fix this. I noticed the overlay on these two infographs which correlated a bit with the hexagon's idea of the darker/lighter color. They inspired this.

With this infograph style, the size and shape of the square will always stay the same, it's only the shade of the square that changes. The square on the right is the reliability rating of whatever it corresponds to. When you hover your mouse over the square, or tap your finger on it, the square on the left would appear in its place. The square on the left is what the one on the right is made of. The shade of the square on the right is the calculated mean of the bars on the left. This allows for a quick read of the shade of the square. The richer and fuller the color, the more reliable, therefor, the lighter and more washed out the color, the less reliable.

The top imade is a set of these overview infographs going from most reliable in the upper left-hand corner, to the least reliable in the lower right-hand corner. These squares correspond directly with the image below it and show what the overview squares are formed from. All of this allows for a quick initial read, and then a deeper dive into the content of the square.



The Scenarios
            I will leave the scenarios to exist in the presentation above. All of my scenarios run together to form one full use case, trying to cover the main parts of the website. It starts within the reliability website, here you get see activity happening within the website.The user clicks on "Graphs" and searches for immigration to find the most reliable article. It takes him to the article on the website. The user opens up the reliability plugin to rate and review the article. The user then opens up the article rating in the website to see a more in-depth look at the rating. They look at the sources, the website's rating, and then the reviews by the users. From here the user finds another user who posted a review that they like. The user goes to the other user's profile, looks over their profile and information, and ends up following them.