I was originally going to go with my design modus operandi and stick to something simple, both aesthetically and technically (more on the latter below). I toyed with the idea of having a geometric layout that made it easy for the user to follow a path I had set out for them. My very first iteration was an attempt at that. I soon discovered that this would neither be easy for a user to follow, nor would it be aesthetically simple. I referred to Dieter Rams' design commandments as a vague outline for what I wanted to achieve. While it"s impossible to work with all ten principles simultaneously, the two that I found most relevant were to be "unobtrusive" and to be "thorough to the last detail." I tried to keep these in mind when I started working with my new layout. With the MARTA-inspired configuration, I had intended for each 'subway line' to intersect whenever a joke appeared in an episode. This was scrapped as I found that the layout would ultimately end up looking more like a double helix than a subway line which, while "thorough," did not do much to demonstrate the unobtrusive-ness that Rams emphasizes.

The 16th Street and Mission project was also useful, even though it was—aesthetically—the exact opposite of what I wanted to achieve. Thematically, I knew this project was going to be fragmented; the challenge was to ensure that, in spite of this, the project was still cohesive. Whereas 16th Street positions fragments of images in order to tell a story, I provide images in fragments in order to recall a story. To draw another parallel, the images I use are also fragmented, which was a challenge I encountered. In order to display the joke, I needed to make decisions as a designer to provide the right context. In the same way that 16th Street needed to choose its fragments in order to visually represent a space, I was concerned with not only what still frame I selected, but also which scene to pick. One particular instance of this was with the Cornballer joke. Upon seeing all of its dots on the antimap, a few people (who were familiar with the show) commented that they thought there were more instances of the joke than were represented. The screenshot in question was one I chose from the fourth episode of the second season. That particular scene focused heavily on the cornballer joke, though through different visuals. Even though it was portrayed in more than one way, I made the decision to represent the entire scene as 'an' instance of a joke. In this way, 16th Street was useful for me as an example of how to represent the abstract: as the designers needed to choose how to represent a part of the city, I needed to choose how to represent a single occurrence of a joke.




There were two main challenges to this project: organization and selection. The latter was addressed through my concerns of the micro (i.e. which still frame to display), but I also wanted to make sure that the project as a whole was cohesive as well. Even though Arrested Development only lasted three seasons, that amounted to 53 episodes, which were 53 nodes that I had to represent individually, as well as providing each with some space to place various dots in some coherent order. This was a challenge. I decided to organize my data (and this was a very data-intensive project) using concentric circles in order to get the most out of a small amount of space. . In doing this, “The Role of Interaction in Information Visualization” by Yi, et al. was invaluable. Because I wanted to emphasize the scope of each joke, it was crucial that the entire show be on screen at all times so that the user could visualize how often each joke appeared, as well as where it appeared within the series. I wanted to make sure my visual data was organized well so as to convey a clear message, yet it was important that I balance the tension between the minute details (screenshots) and a general overview. I tried to engage with a few categories from "Interaction," including Select, Explore and Filter.

The filtering of my data was something I reiterated multiple times in order to try and create the most accessible means of viewing the different instances of jokes (Yi, et al., 1228). Had I incorporated more than three jokes, the project would aesthetically look very busy; it was crucial to filter the data in order to contextualize it, otherwise I felt it would simply amount to noise (I realized far too late that this was something I actually wanted to achieve, but I elaborate on this later). By selecting each dot, a user can do more than acknowledge that a joke appears at a particularly point in one episode; he or she can pull up a visual that will (in most cases) contextualize the joke (Yi, et al., 1226). Furthermore, a user can mouse over a different dot in order to navigate through different instances of the same joke. In this way, I have all the visuals for each instance of a joke easily accessible and is—at most—just a mouse click and scan away.

Though subtle, one of the decisions I struggled with the most was whether a user would interact with the antimap through mousing over as opposed to a mouse click. Though only tangentially relevant, Crampton and Krygier's "An Introduction to Critical Cartography" made mention of a concept that I found particularly useful. Geovisualization is an approach that changes how maps work in that their representation is not meant to communicate an empirical truth, but rather it works to encourage exploration (Crampton and Krygier, 24). It made more sense to me to limit the mouse clicks to a meaningful action. Because the amount of information you receive from a smaller dot is so minute (it simply displays a different image) and due to the sheer number of them, a mouse click seemed like too important of a gesture and a quick mouse hover seemed more appropriate. In addition to the amount of information, I considered how long it would take the user to digest it. If there were text, it would require more effort to read than to simply look over an image, which contributed to my (very grueling) decision to script almost all the interactions with ActionScript 3's MOUSE_OVER instead of CLICK. Similarly, I have minimal explanatory text because I did not want my antimap to provide any facts. I considered showing snippets of the script alongside each screenshot in order to fully contextualize the joke, but I did not want to explain each individual punchline. What I really wanted this project to be was something of a toy, with which a user traverses the space and gets brief glimpses of the show, In doing so, I wanted to create a sort of nostalgic visualization, in which the users recall the punchlines themselves—kind of like a quicker, internalized alternative to looking up clips on YouTube.

This brings up something I had to decide on in order to keep my design consistent. Originally, I intended to create a project that would make an argument as to why I thought Arrested Development was funny and, ideally, convince other people to start watching. Obviously this was aimed at people who were not already familiar with the show. This, however, would have necessitated a lot more information explaining each joke and why it was so funny in context of the entire show. For example, the punchline of the final "no touching" joke is funny (to me, anyway) because the character actually says "more touching" while his parents make out on their bed. This, in turn, necessitates biographical information for each character, etc. Of course, explaining a joke is the quickest way to ruin it, so I shifted my target audience to fans of the show. By concretizing my target audience, I engaged in an intensional reference, as Bardzell writes in "Interaction Criticism and Aesthetics" (2363). More than that, however, I do not only construct the 'ideal' user in my mind (i.e. those familiar with the jokes on the show), but I wanted to construct a particular experience with my project—or a hyperextensional sense of reference, to allude to Bardzell's terms. I tried to use the visual cues in order to evoke nostalgia. I do not only do this with the use of screenshots, but also through the repeated image of the red circle and arrow, which is often used as a visual on the show itself (example: the opening credits). This is problematic at its core, however: by referring to visual cues, the impact of my project heavily relies on the user's prior knowledge of the show. Many of the "I've made a huge mistake" screenshots, for instance, are simply portraits of various characters. While some have some vaguely humourous expressions on their faces, the real pleasure of my constructed experience comes from remembering the circumstances that inform the punchline. While my anti-map can stand on its own as a tool for spatializing an abstract concept, its real strength is the way in which a user recalls his or her memories of the show, which is the intention I had in mind throughout my entire design process.




These are some notes for me to keep in mind for future development and iterations. The most notable addition that is necessary for this project is to add more jokes: I have a total of 15 jokes, including timecodes and individually sized screenshots, but ran out of time as there was entirely too much effort and energy required to code each joke into Flash. I have a total of 155 screenshots, which results in 155 different frames. These are already in Flash (I can send the .fla at request); the effort comes from coding each individual dot to have its own mouseOver event-- then repeating this for each instance of each joke. I probably could have done this had I stuck with my old geometric layout, but I'm much happier with the iteration I'm currently using. Similarly, it would be better UI practice to show all dots for all jokes simultaneously. Dots for jokes that aren't currently displayed would be faded so as to indicate differing layers of granularity. I've also considered changing the colours of the dots: as they are right now, the dots don't mean anything beyond distinguishing one joke from another. One option would have each dot be an icon that corresponded to the joke (e.g. a magic hat for "I've made a huge mistake," which is normally associated with the character GOB, who is a magician). However, this could be hard to distinguish at such a small size (14px squared). At some distant point in my life, when I have significantly more free time and have considerably increased my AS3 knowledge, I think the timeline would be more effective if I used brief clips instead of screenshots. This, of course, would necessitate the sound, which is entirely too ambitious for me at this point, but is still something to consider.




Academic papers from here, here and here.
Rams' design principles were referenced in class from here. Font choice from here and here.