• Could a filter be developed to visually show relevance? • Are there different ways an interface might display complex information without using hierarchical lists? • Can a designerly language feel authentic to an existing web forum community?
I wanted to examine the ways in which information can be delivered to a user, and the ways in which that user can interact with information. The three different kinds of elements within this interface enable users to reconfigure the information by large categories, forum members and specific food items. The user is also able to scroll through the landscape and turn filters on and off to privilege the different kinds of information.
By limiting viewing access to a small frame of the greater landscape, I am beginning to examine how interface can help a user prioritize and focus. I am also exploring different ways connections can be visualized within different kinds of information.
This is the final version of my filter for relevance. Each iteration has been exceptionally different from each other (especially the visual qualities), but the basic concept for each is actually very similar. In this version, I have created an interface entirely out of typography. The user comes to the site and is able to open a "drawer" to view the site content with a different lens. The user is able to navigate through the site content in a very different way, allowing for spatial/proximity relationships to be more evident, and enabling the user to explore and discover.
Please see my previous two posts for more information about this project.
This is my second attempt at creating a filter for relevance. This interface is an application housed within Facebook. The critique this was presented at was a silent one (we wandered around and viewed each other's work with no explication), so this presentation includes more visual explanation than I normally would have included.
How can a filter be designed to visually privilege relevance?
I decided to use the construct of a movie rental kiosk for my investigation. The system begins by asking the user for their three favorite movies. The system then creates a symbol to represent the user and create connections to all other movies.
In iteration #1, the amalgamated symbol generates a wireframe structure. Relevant categories and movies are located spatially upon the structure. The user would be able to interact with the structure and any information coming off of it to examine further.
In iteration #2, the categories and movies are arranged in space again, but this time relevance is shown by proximity to the user. Again, the user can interact with the information in a spatial way.
In iteration #3, the categories are arranged in a much more static way. This time relevance is shown by scale and use of the amalgamated symbol (color coded according to which favorite movie is most relevant.)
I still want to do more iterations and investigations, and want to build something out in flash to show how the interaction could start to work.
Propose and complete a design study that addresses an intersection (a point) rooted in (1) your thesis questions and (2) an aspect of the symposium theme "Design, Community and the Rhetoric of Authenticity."
The proposal/project will be:
Supported by precedents, textual and/or visual.
Pointed and specific.
Investigative of design issues.
Manifested in artifact(s).
Some of my initial ideas:
Points within my thesis
Understanding information
Making decisions about web/info
Shifting nature of attention
Triage
Making connections among points of information
Finding relevance (context)
Establishing credibility / critical thinking
Points within Symposium
Authentic experience
Real vs. faux
Vernacular of internet
Finding relevance (context)
Community making connections
Here is the visual brief I showed in class to discuss the tentative directions I wanted to move in:
Write a critical text responding to Project 2 results. Refer to your own approach and design outcome, of course, but also support your conclusions by referring to works done by other students, as well as published work you have found.
Following are a few of my observations/questions to fuel your inquiries.
• Overall, the initiations implicated designers (meaning you and me) as being severely entrenched in learned (a.k.a. "schooled") visual conventions strategies. Are these strategies tools? Handicaps? Assets?
• For the most part, the initiations did not expand (introduce new visual strategies) to the community visual language. Why is that? Were the visual conventions so conventional as to be unalterable? Did you, as a designer, feel you lacked permission to do so?
• What are your conventions for "successful design"? Is it impossible, advisable, desirable to move beyond them?
• Do you understand your design as having a rhetorical stance? What is it, and from whence does it originate?
Here is my text:
Manipulating visual conventions (really, conventions of any kind) is a tricky thing. Generally, these are established over time and agreed upon by communities or cultures. One cannot declare a convention for others with any certainty. Conventions are extremely fluid and mutable, and can be interpreted in very different ways. Because of this impermanence, manipulations of these conventions are experimental at best…designers serve as catalysts and can only predict an outcome (and are often surprised).
Our most recent MGD studio project asked us to identify and meddle with visual conventions for a specific community. I chose to examine an online community centered around food and cooking. My approach began with a deep dive into the community itself: How does it function? How do members relate to each other? How is communication achieved? What is important to the community? And finally, what does all that look like? This initial consideration of visual conventions resulted in a long but superficial list of typical online forum language: avatars, emoticons, navigation and bread crumbs, topic threads with nested comments, banner ads, etc. These are all indeed visual conventions this community engages with—many of which greatly influence the functionality and relationships of members—but none of them felt particular or specific to this online community.
Next I began to think about the visual conventions found in the act of cooking and engagement with food. This elicited ideas like measuring cups and spoons, food packaging, recipe cards, cookbooks, and mise en place (a French term meaning “everything in place”). This last convention felt very rich—I wondered if it could be used as a visual way to explain complex information to this community. Part of the assignment was to initiate something new. Members spend a lot of time on the site discussing the preparation, combination, taste and enjoyment of food—but what if they were asked to consider the nutritive content? Could the way they respond to and comprehend that information be affected by its visual language?
Using mise en place as a metaphor, I built out an image with bowls and dishes of varying shapes, colors and sizes to represent different categories of nutrition. I tried to use typography to represent the individual nutrition elements (fat, vitamin C, selenium)—applying transparency to each word and layering it within its respective dish. A fuller dish represented a greater percentage of that nutrient in the food. While this idea was compelling, in execution, the complexity of the visual language made it hard to understand the relationships between percentages and nutrients.
I discarded the specificity of the metaphor (literally, items in dishes) but retained the notion of parts to a whole, which is an integral part of cooking. My final design integrated this idea with the visual language of food packaging, cookbooks and recipe cards—culminating in an animated experience triggered when a community member views a recipe on the website. Nutrients are visually treated as products. A box for each nutrient falls into the browser frame—Fat, Carbohydrates, Protein, Sodium, Vitamin C . Each box displays the name of the “product” in typography reminiscent of processed food packaging—arched text, script fonts, bold letters, stroked type, and bright colors. Each box contains a grid of 100 small icons (a stick of butter for Fat, a package of steak for Protein, a salt shaker for Sodium), which represents the percent recommended for daily consumption. The amount contained within the current recipe is shown at full opacity, while the remaining icons on the grid are shown at a much lighter opacity—parts to a whole. The design is meant to be humorous and tongue-in-cheek. The community members love food and convey a sense of fun when they communicate with each other—I decided working with this would prove more compelling than working against it.
What felt most important in this exercise was to communicate with my chosen community in a way that would seem familiar to them, feel of them—but to also experiment with inventive “designerly” ways of doing that. This was much harder than I anticipated. How can a designer—with all her expert knowledge, jargon and prejudices regarding communication—step back and truly see the visual landscape through the eyes of a “non-expert”? Where is the line between imitation and condescension? How can the insertion of my voice as a designer compliment (and complement) that of the community? Users have definite expectations and nearly tangible comfort levels when they encounter artifacts—accounting for this and attempting to innovate within it was difficult. I struggled to clearly communicate my message while engaging the user in a memorable and emotional way.
Working in the medium of convention is something designers do every day—we weave them together and pick them apart and use them for desired effect (whether we consciously realize it or not). I believe conventions are both tools and limitations. We can employ them as shorthand to quickly gain comprehension, to suggest nuance, or even as subversion. At the same time, we always run the risk of misinterpreting how an intended audience will understand them. Convention is a blessing and a curse. Slippery, transient, nebulous—it is the very substance of society, communication, culture and humanity.
Please see my previous post to read the brief for this project.
After the feedback I received at crit, I began to develop an overlay to the DiscussCooking website, which would act as a hack the first time a user encountered it (forcing them to engage with it, either to explore further or to turn it off). My goal with this widget-interface is to introduce my community to the RDA (recommended daily allowance) nutrition information for the recipes on their site. Most of these recipes are user-contributed, and don't come with any specific information about nutrition. The tone of the website is fun and friendly overall, so I wanted to keep my initiation in line with that (and wanted to be somewhat tongue-in-cheek).
The user would come to the site, would navigate to a recipe, and the hack would take over (but only on initial discovery).
Once the hack has finished playing, the user may engage with it as they wish, and all the recipes that are part of the initiation are clearly marked with these interactive icons.
I didn't get much feedback during critique (I happened to go last, which I think didn't help). However, Denise asked us to reflect upon this project and write an analysis, which I will submit in my next post.
After the critique of our initial culture probes, Denise asked us to consider what the class had discussed—regarding the speculative success or failure of probes like these, but also the nature of ritual itself—and re-work our culture probe.
I wondered if changing my probe into something digital could drastically change the nature of the experience. Would a digital/animated experience be more engaging for Starbucks customers?
Here is a simulation of my proposed design. This would exist as a large square touch screen surface, hung on the large display wall in the seating area of my particular store. It would have a motion detector, allowing the interface to react to customers walking by. Users would be able to interact with the elements on the screen, and once engaged, would be asked to use the attached digital camera to take their own photo, caption it, and then look through photos taken by other customers all over the world.
Overall, I think both versions of my culture probe could prove illuminating. However, without actually testing it, I can only speculate about what might come out of it. The beauty of these types of probes (as discussed by Bill Gaver here) is that they can be used as tools by designers for inspiration. By amassing and curating "stuff" created by your customers/users/collaborators, you can sift through it and categorize it and play with it. The possibilities for recognizing patterns, shifts, new ideas and innovations are numerous. You just have to be open to it.
We were asked to choose a community to deeply investigate over the course of the semester. This was the first project involving that community. We were to observe and examine the community according to Dori Tunstall's five characteristics (mentioned in an earlier blog post—historic consciousness, life goals, organizational structures, relationships, and agency) and organize this information into a 25 slide (no more, no less) presentation. The presentation is meant to be stand-alone (meaning I shouldn't need to stand next to it verbally expanding for a viewer to understand).
Because the content/context of my thesis will be food, I chose Discuss Cooking (an online cooking community) for my investigation.
I enjoyed this deep dive… Examining the community along these structured guidelines forced me to look at it from perspectives I probably wouldn't have on my own. And this structure actually illuminated more subjective qualities about the community and members as well.
We will use this community throughout the semester for both seminar and studio projects—so you will see more of Discuss Cooking. I'm sure you are waiting with bated breath…
For our first Studio project, Denise assigned the following…
Project 1 : Anatomy of a Culture Probe
As you venture into "thick analysis", in studio we enlist your imagination to interpret and extrapolate from the explicit evidence you observe.
Based on observations culled at your coffee house:
Write a story from the perspective of a player in the experience, i.e. a particular customer, barista, dishwasher, busboy, manager, delivery person, etc.
She gave us this assignment before we made our observations, which made that exercise something of a "double-dip." While I was observing for my thick description, I was also very careful to capture moments and details that could be material for a piece of fiction.
I have never tried to write a short story, and decided that it would be interesting to make an attempt for this assignment. I tend to overcomplicate both my writing and my design, so for this project, I worked diligently to consider every sentence, phrase, word and comma, and omit anything that seemed superfluous.
I also decided to mix my process up a bit. I found a random number generator online, and generated two different numbers—one that corresponded to a page in my paperback dictionary, and one that corresponded to a word on that page. I used this word as an entry point into my story, and then ended up building upon that stylistically with other words from the same page.
I submit to you, my first short story.
Resplendent. He peered around the wall of merchandise carefully, hoping to see a corner of her face again. She was wearing pink today, with all that black and green, and it suited her. John was arguing with her about whether C-A-N was an abbreviation for "can" or "Canada." Frustration began to creep into her voice. He was sure her mouth was beginning to tense at the edges, thinning to sharp points as she bit off the ends of her words.
The chai tea was turning cold. He knew his presence in the tattered chair in the corner was growing conspicuous. How long had it been? He had forgotten his watch on the lamp-stand again. Forty-five minutes? Fifty?
He sighed a shade too loudly, and glanced down at his lap. Soft, supple fingers curled into a limp fist...skin tone foreign against his bright eggplant t-shirt. Why couldn't Carla have finished the laundry on time? The purple fabric was stretched tight against his paunch, and he noticed a small hole beginning to take shape near his navel. He must look ridiculous…an aging cartoon character of a man…the color of Barney the dinosaur. A groan of discomfort escaped him as he ran his hand over his bald spot…a nervous gesture he had established years ago.
The guy sitting at the next table—all dark hair and Run DMC t-shirt—glanced up and barely brushed his gaze across the space, immediately returning to his laptop universe.
"Hey, are you done with that paper?" Her eyes were dark slits against the sun streaming in behind him, flecks of gold flashing off the buttons on her hat. He choked on his spit, spilling chai tea onto the hem of her black pants. Four eyes turned down to the stain as it spread out over the top of her shoe, then slid back up to meet in the chilly space between them. Her lips were slightly parted, and she rolled her tongue to the side, tucking it into her cheek. Once, twice.
"Nice," she muttered under her breath as she floundered past him to the kitchen. Run DMC guy was staring at him now, a dark smirk teasing the corners of his mouth.
Resonant.
He manouvered himself up and out of the chair, and blindly threw his vestigial tea at the garbage can, missing it by nearly two feet. Tea and milk and cup and lid exploded against the wall, splattering the door, his cheek, the floor and the Run DMC t-shirt. He plowed forward, arms raised, windmills flying, and flung the door out and open—escape. He tucked his hands into his pockets, once, twice. Head ducked, quick steps toward the corner as he tried to slow his heart, measure out his breath, and somehow make it up the block.
He crossed the street and shook his head violently, making space for distraction.
Carla would have finished the laundry by now. He could rescue his Harvard t-shirt from the warmth of the dryer and walk up to the library. Ellen would be working today, her pale skin incandescent behind her oversized glasses, widely framing moist brown eyes. If he hurried he could catch her on her way to lunch, subtly brushing past her on the stone staircase. There would be books and chairs—crevices to peer out of, objects to hide behind.
Resuscitate.
Overall, I am pleased with this. It was an extremely valuable exercise for me, and I think the end result is a decent character study. One of my goals for the semester is to practice more restraint within my work. To ruthlessly edit and re-frame my ideas, allowing more space for simplicity and resonance. Hopefully, this is a step in the right direction.
The next step in this (now becoming extremely complex) taxonomy project was to create a visual language and representation—to build an interface in which to access the taxonomy about navigation interfaces. (Yikes!)
Here is one of the interim attempts:
The logic behind this design is as follows:
• Each object was created using numbers, generated with a complex mathematical process (the average size for each object in the taxonomy was found; I then calculated the area or volume for each object in inches; next I calculated the square root of the area or volume; finally I took the first four digits after the decimal point of the square root and typed them out; and finally combined these typographical forms into the shapes you see here...phew!)
• Next the objects were extruded to give them a three dimensional feel. The shallow objects represent those that are the least tangible (these have also been made to be top-heavy in appearance); the deep objects represent those that are the most tangible (and therefore were made to be bottom-heavy).
• The objects are clustered and colorized by main category: GPS and Online Maps together in the front, Devices grouped together behind them, with Maps grouped together in the back. Teal objects are Maps (the lighter shade for maps that represent accurate distance, the darker shade for maps that represent non-accurate distance), gold objects are Devices (the lighter shade for devices that are electronic or digital, the darker shade for devices that are mechanical, and the red object is the GPS device which is a device and a map at the same time.
• Fences were constructed around the clusters of objects to represent ease of use—the tall impenetrable fence for the most difficult objects to use, the tiny corner stones in front for the easiest objects to use.
• Finally, to represent how portable the object is, I placed figures of monkeys atop each shape. The fewer monkeys on the shape, the more portable the object, the more monkeys the less portable.
Then after a few more iterations in look and feel, here is my final interface:
Most of the visual language is the same, but the addition of pacing, time and interactivity helped simplify the initial look.
Overall, I wanted the user of this interface to have a sense of being lost, but not in a frightening or dire way. More the way one feels when traveling in a foreign city—it seems like things should make sense, but somehow they don't.
The user comes to the main screen, and has to look around to find the navigation hidden in the lower right. There are no labels or instructions, so the user chooses one of the icons. Then they are taken to a new (yet strangely the same) screen. As they explore the objects, they begin to click on them to find that some can be flicked off the screen. The objects that fly the farthest and fastest are the least tangible—those that simply rock and stay put are the most tangible.
Then the user navigates to another screen: this time all the objects are covered by clouds and fog. As the user rolls over the fog, some of it moves away. The fog represents ease of use—the objects easiest to use can be completely uncovered, those hardest to use remain obscured.
Finally, the user navigates to the last screen. Now as they click each object, it grows so the user can inspect it more closely and count the monkeys on top. The objects with the most monkeys are the least portable.
This project was indeed an arduous exercise in logic. However, the great benefit for me was to start out in a very regimented, rational frame of mind, and then attempt to abandon that frame and create something much more abstract and interesting. This was certainly very far out of my comfort zone, but the end result was both surprising and exciting for me. The push and pull and experiment in exploration has my mind spinning off in a million new directions. And working with interactivity and time (even in this very rudimentary way) was energizing and engaging. I'm looking forward to more work in this vein.
This was another attempt at visually representing my taxonomy. Each round shape represents one of the objects in the taxonomy, and were created using shrinkable plastic and transparency material. The mobile is organized around several different gradients of categorization, attempting to show multiple viewpoints at once.
The map objects are represented by the transparency material; the device objects are represented by the shrinkable plastic.
Portability is represented by the size of the circular shape.
Tangibility is represented by the complexity of the pattern and graphics on each piece.
Ease of use is represented by horizontal orientation.
Updatability is represented by vertical orientation.
Much of the feedback I received during crit had to do with the fact that I chose to create a mobile in an attempt to give my taxonomy dimension and movement, but then fashioned it in a very static and flat way. Why didn't I consider the viewer, and the relationship between them and the mobile? Why didn't I attempt to create a more concrete third dimension of spatial relationships?
Representation of scale was also discussed: the smallest object within my taxonomy is a compass (which you can hold in your hand), while the largest is the size of a building. But the representation of this within my mobile makes it hard to understand the enormity of that scale. Creating a more expansive (and expressive) scale of size would have made the concept easier to understand, and would have possibly made the visuals more interesting.
Heads spinning and swimming with new possibilities, we all trudged back to the studio to attempt to make better sense of our content and categorization, and to figure out how to create a visually interesting interface to access it.
Because my genre of interface has everything to do with movement and location, I decided to try to create my taxonomy as a mobile. To do this I first had to tightly structure my categorization and items. In order to fully wrap my head around that, I created this concept map (my very first solo one!)
My final definition of navigation interfaces is: Objects, systems or devices which are used in the art or science of plotting, ascertaining, or directing a course of movement or action; which can be used to understand relationships of geographic concepts and qualities.
The items are categorized into Maps (further categorized into maps that are to geographic scale, and those that are not—the difference between a folded city map and a subway map in which all the routes are shown to express relationships rather than precise distance) and Devices (further categorized into mechanical devices and digital or electronic devices). You can use maps alone to plan trips or routes, navigate or locate, or to create connections and note relationships. Devices, however, must be used in conjunction with maps. My third category is the anomaly: the GPS device, which is both a device used for navigation and location which contains its own maps.
I have also indicated the different ways this information can be further explored or described: by portability, ease of use, tangibility (of materials and inner workings), and how updatable it is (paper maps are often out of date upon creation and can't be updated, while GPS devices are part of a system which is infinitely updatable.)
After much sweat, thought, research and categorizing, I carved out a beginning taxonomy for my genre of interface. In an attempt to give said taxonomy a visual form, I created the following artifacts:
We were asked to give our taxonomy some kind of visual form, and were asked to not just create a list, meaning that the information should spatially show relationships, values, gradients, etc. Although I attempted to spatially relate my information in a map, it was a failed experiment, and was dubbed "still a list". After our class crit, Denise asked us to all take another stab at this step, and refine our taxonomies and give them more interesting visual form.
From feedback I received at the crit, I decided to focus my explorations on geographic navigation (removing some of the less interesting content). I also decided I wanted to try to push myself out of my comfort zone and create a visualization of my taxonomy in an analog and 3D way.
The outcome should foreground a point of view or commentary on the genre.
We took some time to decide on the genre of interface we wanted to work with, had a discussion about some of the different options, and began to further define interface (the definition is still in a pretty constant state of flux.) I decided to work with Navigation Interfaces (think GPS, online maps, atlases, navigation systems on websites).
Then we did another round of super-free-word-association-funtime on iChat. I created two compositions with the results from the prompts about my genre in an attempt to organize my thoughts.
From here we went off to define, parse, categorize and make sense of our genre of interfaces in the attempt of making a taxonomy.
