Design Iteration 2

tags: animation color opacity process prototype visualization

posted by Zeke Shore on Feb 2nd, 2010

After evaluating some of the issues we observed in the first design iteration for the VoxPop visualization model, we were able to establish some more criteria as the design evolved.

One idea that I explored early on was the concept of these emotive forces “pulling” the conversation in various directions. While the metaphor seemed interesting, data quantity vs. real estate would be even more of an issue than with the first design iteration. Another big take away from the first prototype was the non-representational and homogenizing side effect of grouping words at a full conversation level, as one abnormally “colorful” comment could dramatically swing the visual representation of the entire conversation.

Additionally, breaking words into these six groups unnecessarily abstracts the way in which these semantic classifications are actually describing attitudes.  Going back to Charles Osgood’s Semantic Differential theory, his studies revealed that the Evaluative scale (good to bad) is the primary axis by which study participants classified affective meaning, followed by Potency and Activity as the two other universal characteristics of affective classification. rather than thinking of these three axises as separate scales, when trying visualize emotional qualities of these comments it makes more sense to have these metrics somehow layering on top of each other so that in conjunction, they draw the full “personality” of each comment.

So the idea of representing each comment as its own entity developed. In order for these three emotive characteristics to be able to layer on top of each other, representing each of the six poles as a different color (as done in design iteration 1) would not work.

In this next design iteration, The Evaluative scale is the only metric represented across a color spectrum, ranging from blue (negative) to yellow (positive) where the number of positive words minus the number negative words dictates the comment’s place along the color spectrum. Comments with mostly positive words would be closer to pure yellow, and comments with mostly negative words would be closer to pure blue, with more neutral and balanced comments being various shades of green.

The Potency scale (strong to weak) could then be represented with opacity, where the number of “strong” words minus the number of “weak” words would dictate where the comment lives on the opacity spectrum between fully opaque and almost completely transparent.

Our last axis is Activity (active to passive). While the color-inspired evaluative scale requires a somewhat subjective color scheme choice which of course will involve cultural and personal influences, opacity actually serves as a conveniently clear metaphor for our ’strong to weak’ continuum. The ‘Activity’ axis presented a similarly convenient direct metaphor that could be exploited. The more active a comment is, it could actually be moving faster and farther, and likewise the more passive a comment is, the more stagnant it would be.

The final characteristics of this design iteration was that the scale of each comment could be determined by the number of affective words it has. This could arguably be thought of as how “loud” the comment was (although this is open to some debate, a really long comment with lots of weak and passive words isn’t really “loud”… more “verbose”).

So we created a new prototype exploring how this design iteration might look with real data. We started with just three articles that the comments would “swarm” around. To help keep the composition balanced and as easy to read as possible, we had comments on the ‘positive’ side of the evaluative scale swarm on top of the article’s title, and comments on the ‘negative’ side of the evaluative scale swarm bellow the comment title. (The blue and yellow evaluative colors were accidentally reversed in this version of the prototype, with blue at the ‘positive’ end and yellow at the ‘negative’ end).

Evaluation

This design iteration was beginning to show a lot of promise. With a quick glace a viewer might more successfully read the tone of the entire conversion surrounding the article, while still preserving the ‘personality’ of each individual comment. This was also starting to become more interesting to look at. Active comments would quickly nestle their way in towards the article title while passive comments float aimlessly at the perimeter.

A major flaw with this design iteration was that we were moving in wrong direction with maximizing out screen real estate, with only three articles being viewable at a time. While the readability of each article’s conversion had improved, we were even further from being able to see any sort of trends or evolution in discourse surrounding a topic over time.

Coming soon: Design Iteration 3.