Theory+Practice

A thesis exploration by Christopher Cannon for the School of Visual Art's MFA program in Interaction Design View my IxD work Read my bio

[theorypluspractice]

Anyone still following this blog (last updated May 2012) should check out my new(ish) blog, Graphic Specimens—my collection of maps, charts, diagrams, data visualizations and other related curiosities.

[theorypluspractice]

Thesis Presentation

May 12, 2012

[theorypluspractice]

Contextus (video) launch

[theorypluspractice]

Humanity's effect on the earth

The Anthropocene age illustrated.

[theorypluspractice]

Process does not have rounded corners.

Liz Danzico

[theorypluspractice]

Preparing for defense

To prepare for my upcoming thesis defense this Friday, as well as gather all of the content for my process book, I started to take inventory of everything I produced in the last year. I went through each and every blog entry, thesis-related email, papers in my file folder, my three sketchbooks, my Google docs, bookmarked websites and all of my digital files. After jotting each separate item down on a post-it, I began organizing and sorting them into roughly a dozen different categories. My conclusion: I produced a ton of material over the last three semesters! And I'm still not done producing—in fact the final couple of weeks will most likely prove to be my most productive in terms of creating tangible, demonstrable assets for my thesis.

[theorypluspractice]

Be mindful of how you render your maps.

Advice for me from classmate Michael Yap, Fall 2011 semester

[theorypluspractice]

More @#$%&! Yeah!

The visual design of Contextus is more or less complete. Here are a few key screens and states that a user would see while navigating through it. As a test, I refined my previous experiment by placing these screens into Keynote and animated a couple of screens and interactions. More smoke and mirrors...

Now all I have to do is create specific screens for an individual’s taskflow, or rather four individuals, animate in keynote and film my actors ‘using’ Contextus in various locations. And remember to replace the lorem ipsum dummy text with something more real.

They can find answers in one of three ways: selecting the day’s featured question, browsing topics or by entering a direct search. The globe zooms to their destination and provides background info. They have the choice to find related maps or info, imagine “what-if...?” or answer the question. Thematic map overlays provide more information and start to build a story around the topic. What-if takes existing data and imagines would could have happened or what will happen by visualizing how one variable can affect other variables, showing correlations and connections. To complete the feedback loop, people can answer their own question publicly or browse through other’s answers to the same question, perhaps reply and engage in healthy discourse.

View all 39 visual design screens of Contextus

[theorypluspractice]

@#$%&! Yeah!

After experiencing frustration trying to use TAP to prototype an iPad app, I've turned to Keynote (big thanks to Sera for reminding me at 4am that Keynote is available on iOS!). I'm able to simulate a smoke & mirrors version of a working prototype of the Contextus app on an iPad, complete with nifty animations and transitions, much like I did for You Are Here, my final project for Public Interfaces class last semester. The video above simply shows two wireframe screen transitions. There is a noticeable delay between screens when Keynote is first launched, but it becomes smoother with any subsequent use. Now the plan will be to finish visual design, storyboard my video in detail, build all of the screens and animations and have my actors use the iPad in location. Its a big relief not having to add animations post-production, à la After Effects.

[theorypluspractice]

[theorypluspractice]

Wireframes, round one

In my Skype chat with my advisor Shawn today, I could see his eyes light up as we walked through my wireframes. Up until this point, everything I was doing for thesis was either research or conceptual/theoretical in nature. Now Contextus is starting to get tangible and more real, and I think Shawn was reacting favorably to that. I spent a considerable amount of time on these 35 pages of wireframes, the idea being to make them as tight as possible, allowing the application visual design a quicker, more streamlined process. Shawn had valuable feedback in the logic of some of these page transitions as well as the naming of buttons and features. We talked about the What-if feature at length and how it would make more sense mapping the lowest and highest values for each set of data to the lowest and highest values worldwide (and not to Haiti’s neighbor to the east). I'll make changes based on his feedback, add some polish to the design and test out a quick n dirty prototype in TAP, a great tool for viewing your product idea in the context of an iPhone or iPad.

See all 35 wireframes

[theorypluspractice]

Sitemap and userflow diagrams

Although late in the game, I finally know what it is that I'm building. I've thought extensively on Contextus’s features and requirements and now can illustrate its structure, hierarchy and a specific example of a typical use case through these diagrams. I've learned that creating a site map for an iPad app is quite different from creating one for a website, mainly because an app doesn't have ‘pages’ in the traditional sense. All of this helped inform how my wireframes (following post) would need to be designed.

  The following three userflow diagrams are in order from general needs to more specific tasks.

[theorypluspractice]

Thesis Object & Agency

Following last week’s assignment of describing our thesis characters, is a new exercise which goes into more detail about one particular character’s experience interacting with Contextus. He has a question, uses Contextus, finds the answer himself and proudly shares his theories. Again, a useful assignment preparing me for storyboarding my user journey video...

After he bought the ingredients for tonight’s dinner he is cooking for his girlfriend and her parents, Pat McDaniels relaxes on a park bench, wondering what he’ll talk about with them. Trina and her parents are originally from Haiti, a country he knows is quite poor but knows little else about. Eager to impress them and not put his foot in his mouth, he wants to learn more about Haiti and hopefully have an intelligent conversation this evening. Wikipedia is just a long list of facts and figures, he thinks, if I read about Haiti’s history through that, I'll probably just fall asleep. I heard about this app called Contextus that helps teach visually through maps. Pat pulls out his iPad from his backpack and downloads and opens Contextus.

He is a little hesitant at first glance. Maps are great for getting directions for travelling somewhere, but I'm not going to Haiti tonight… I'm going back to Brooklyn, he thinks. The first thing Pat notices is a big, bold featured question of the day. Its about why did the Europeans and not the Chinese discover the Americas. He finds that an interesting question, but not for the task at hand, so he bookmarks it for a later reading. As he starts browsing through place, time and subjects, Pat notices how information is organized and classified—economics, politics and history are linked to each other and viewing a timeline of Haiti as a histogram shows a spike in information around 1500, 1800 and 2000.

With his search criteria of Haiti (place), economy (subject) and 1700–present (time period) selected, Pat is presented with a series of overlaying thematic maps in which he can change the opacity, rearrange their order and get more contextual information for each. He begins to see the relationships between natural geography and its effects on a country’s history as well as manmade decisions. Sifting through rainfall, wind pattern, elevation and topography maps, Pat can better understand how Hispaniola’s bisecting mountain range prevented much rain from reaching the Haitian side of the island, thereby reducing arable land and crop diversity. Their history of importing vast amounts of slaves for plantations and a subsequent slave rebellion which banned foreign investment and land ownership had an equally profound effect on the nation’ development.

Pats spots a feature simply called “What if?”. Intrigued, he taps on it and is taken to another map where moving a slider for Foreign Direct Investment (FDI) from Haiti’s current state of 0.2% to 5%, causes graphics on the map to reflect that change. Bars representing infrastructure, GDP, unemployment rate, poverty rate and life expectancy move up or down in relation to the FDI’ value. I had no idea how connected these things are, Pat thinks, the correlation between foreign economic investment and a person’s life expectancy surprises me. Eager to share his theories, he types his responses in the answer forum as he browses through other people’s thoughts on the subject. I get it now, Pat believes, the answers are never that simple and can be quite subjective, but maps are good at showing a ton of complicated information in an uncomplicated way. Armed with knowledge for conversation, Pat heads home for dinner with his possible future in-laws.

[theorypluspractice]

Contextus characters

The following was an assignment for our Narrative & Interactivity class to develop a character who uses our thesis product. I imagined four of them, all within different contexts having different motivations. This was helpful in getting me to start thinking about my final user journey video and how I would storyboard it...

Watching the evening news on CNN after long day at work, Guy Moretti slumps down on his couch while seeing disturbing footage of the recent violence in Syria. Guy feels like he cannot keep track of all the events taking place in the Middle East lately. Its about dictators backed by the U.S., the price of oil, refugees from Iraq, exported Saudi Wahhabi extremism, sectarian conflict and economic sanctions. Its about all of these things and more. “This shit is fucked up,” Guy thought as he nursed his beer, “I wonder why the Middle East always had so much trouble…” He reaches over to his messy coffee table and grabs his iPad, launching his favorite new app Contextus to try to find an answer to that very question.

Amy Li is a senior at the New School majoring in Urban Studies. After her morning class, she decides to wander over to the East Village to enjoy the crisp Spring weather. Amy often finds herself in this neighborhood, but usually with friends at night going to clubs or restaurants. Today, she notices the East Village in a whole new light as she passes by the John Varvatos boutique on the Bowery. “I can't believe this used to be where CBGBs was,” she thinks to herself. “I always read about and heard from some of my teachers what a gritty, creative and interesting neighborhood this used to be in the 70s and 80s. How come it looks like a shopping mall now?” Sitting down in Tompkins Square Park, far away enough from the punks and homeless (but not so far as to look like she is avoiding them), Amy pulls her iPad out of her bag and starts sifting through the maps in Contextus.

Its not everyday that a man meets his girlfriend’s parents for the first time. This thought made Pat McDaniels slightly nervous as he was buying ingredients for tonight’s big home-cooked dinner with Trina Pierre-Louis and her mom and dad. Trina and her family are from Haiti and immigrated to Miami when she was twelve. Pat was always interested in travel and other cultures, but never had any interest in visiting Haiti, perhaps because of all the bad press that unfortunate nation gets. Not wanting to look ignorant or unable to hold an intelligent conversation, Pat sat down on a park bench and began swiping his way through history in Contextus.

Yael Feldman is deeply engrossed with her iPad. During her morning commute, she starts to plan for her upcoming business trip to Germany. Will the debt crisis in Greece affect the exchange rate? What about her company’s interests in the region? Even more importantly, how did the European Union get itself into this situation? As she wonders if she should bring her daughter along for the trip, Yael browses related topics in Contextus, getting a sense of how politics, history and economics are intertwined. She starts to see not only what already happened, but what could happen in the near future.

[theorypluspractice]

Data cubes, R.I.P.

The sheer scale of geographical information and the organization of it within Contextus needed some model to make sense of its complexity. During my research, I discovered the OLAP (online analytical processing) model and though it could prove to be a helpful tool for visualizing data. Used mostly for data mining and other computational sciences, information is arranged on x, y and z axes for logical organization. A slice of the cube corresponds to a single value on one axis, while dicing represents two or more slices of data. Although a little more scientific than my needs, I appreciated the visualization of an abstract concept. It seemed to be a good fit for geography which is comprised of place, time and a subject.

The idea was that using Contextus, one could search for information on a specific place, say Haiti, across multiple times or multiple subjects. Or they could drill down to find everything related to Haiti’s export economy in the 1990s.

For over a month, I've struggled to turn this data cube model into a design and UI benefit for Contextus. I envisioned a dynamic navigation device that the user would spin, zoom, explode and pick apart to find the exact information they were looking for. My reasoning was that by seeing how information was organized on a magnitude from general to specific, the user would be learning about hierarchies, classification and taxonomy, perhaps without even realizing they were learning. The theory was that they would be learning before they even arrived at the information they wanted to learn about. And the possibilities were endless: one could slice, dice and drill down within a cube to find what they were looking for, discovering cubes within cubes and so on.

Aside from my notebook sketches and illustrator diagrams, I went so far as to build three-dimensional models with Legos and designed an animated spinning cube in Google Sketchup.

The problem became apparent that it was too abstract a concept, straying too far from the conventions of searching and interacting with navigational interfaces. Various thesis critics had trouble imagining the benefit or the payoff. Plus, it was straying too far from the maps, which is what my thesis is about after all. The exploration of how to arrange data in a model like this could rightfully be its own thesis. If I had a few more months to work on all of this, perhaps I could make the cube work and demonstrate its value. Since time is running out, I'd like to announce that I'm officially killing my darling.

Although the effort spent on this set me behind schedule, it was by no means a waste of time. The data cube is still a good metaphorical model to explain how the what, where and when information is arranged and retrieved in Contextus. Hopefully it will help me in wireframing, designing and producing the remainder of thesis.

[theorypluspractice]

Less machine gun, more shotgun

Two weeks ago, we each presented our thesis opening intro and pitch to writer, communications consultant and public speaking expert Stephen Nickson (and his eight month-old son which was great practice in learning how to deliver a speech with a distraction in the room). Our intros needed to be at most one minute long and include the problem, our solution and a self-introduction. To my surprise, my pitch went pretty well and I was able to memorize it, not needing to rely on notes or a laptop. It went a little something like this…

Recent studies show that 50% of Americans ages 18 to 24 cannot find New York City on a U.S. map. Even worse, a quarter of Dallas high school students cannot name the country that borders the United States to the south. This obviously is a bad situation and will only be worse as the world becomes smaller and more competitive. Maybe its because we grow up thinking that geography is merely points on a map and in school we memorize state capitals for memorization’s sake.

My name is Chris and I created Contextus, an iPad app that demonstrates that geography is much more than just points on a map. Geography is politics, history, economics and dozens of other interconnected fields of study. Maps are the tangible output of geography, capable of conveying complex information at a glance. Contextus will give people the tools to see these connections and find answers to questions for themselves, which makes for a more active, engaging and fun learning experience. If a picture is worth a thousand words, I believe a map is worth a million.

Content-wise, Stephen’s only advice was that starting off with “Recent studies show…” is boring and will disinterest most people. He suggested that I present a blank map of the world and ask the audience if they could find Iraq or Afghanistan. If they can, great, but note that they are in the minority. If they can’t, assure them that they aren’t alone. As far as my delivery, public speaking was never a strong suit of mine, but I did well by memorizing the intro which allowed me to look at the audience (Stephen, Liz, our class and a squirming baby). However, Stephen referred to my looking at the audience as a machine gun delivery, which meant that I quickly and constantly scanned the entire room back and forth while speaking the whole time. What I should be aiming for (no pun intended) is a shotgun delivery, whereby I stop and pick out one section of the room or a particular audience member, speak a sentence or two directly to them, pause briefly and then move to the next section.

The following week, we presented a modified version of our intro pitch to David Womack, Chloe Gottlieb and Tamara Giltsoff in our second thesis roundtable discussion. This time, I started with the blank map…

View the slides that accompanied my verbal intro.

[theorypluspractice]

Use cases, task flows and other fun

In order to move forward in a logical manner and avoid wasting what little precious time I have left, I restated my thesis goals, left the file on my desktop and a printout on my desk. This was done to constantly remind me that every action, feature or design element that I make from this point on should serve one or more of these goals. If what I'm designing doesn't do that, then its extraneous and I should move on. These goals were to:

Allow people to become better informed and more engaged citizens.

Demonstrate that geography isn't just points on a map, it encompasses history, politics,

economics, demographics, etc.

Make learning geography and all it encompasses more interesting, more fun and more

intuitive.

Combine the functionality of Google Maps and Wikipedia in order to bridge the gap

between text-based and visual-based learning.

Teach basic geographic concepts of juxtaposition, correlation, scale, etc. by showing the

connections between subject, place and time (what, where and when).

Give people the tools to find answers for themselves, thereby creating a more active role

for learning.

Create a framework of presenting information to help people retain knowledge better.

Present geography as an evolving, often unresolved ‘soft science’ that can be subjective

and open to interpretation.

As an iPad app, Contextus has features, and to determine what features it needed to have, I first compiled a list of all of the functions and requirements a new or existing user would need to accomplish their goals of learning geography. I wrote my first-ever use case list in the format of

As a [user type], I want to [action] so that I can [fulfill a goal].

Each of these was given a priority from 1 to 3, with all of the 1’s hopefully making it into the design by the end of the semester. The following 35 use cases were helpful for me to start thinking about features and sketching screen design and UI.

I began thinking some more about how to approach visualizing information in this app, from time scrubbers, subject histograms, hierarchy trees, chronological layering, polar diagrams to of course a spinning globe. This made me realize the importance for the user to be able to display information in a variety of ways, however makes the most sense to them and which is the most logical format for the given information. Place can be found by selecting from an alphabetical or categorical list, or by spinning a globe and zooming in on a particular area. Time can be manipulated by dragging a scrubber or flicking a set of panels, à la Apple's Coverflow. Subject is a tricky… um, subject. It can be a list of text, a series of icons in some order of magnitude, it can be categorized within broader subjects or it can be visualized in a histogram by how much information exists within Contexus’s database.

What followed next were generalized user flows based on my use cases. These include:

Finding information by a direct search, browsing topics or viewing the question of the day.

The globe zooming to a particular location.

Multiple side panels with relevant information to a particular subject, place and time.

Contextual menus and icons of thumbnail maps.

Sorting/organizing the different map layers.

Changing the perspective, adjusting the map opacity.

Playing with “what-if” scenarios through a series of javascript sliders.

Typing and submitting your hypothesis about a particular question.

Viewing the hypotheses and responses from the Contextus community.

Comparing two or more subjects/places/time periods.

Saving/exporting your searches and found information.

Where does this leave me? I need to work on a specific detailed use case for an individual with a unique question and how Contextus will help him or her find the answer (or create their own informed answer). This exercise will also help me in creating a framework for both telling the story through my user journey video as well as creating my own “what-if” scenario prototype in html/css/javascript. This is where I currently stand in my thesis process: