hugo :: brainstorms in sociable media (mas.961 '03)
"only as an æsthetic phenomenon is
existence and the world justified"

- nietzsche


emotus ponens picture
::: abstract representations :::
We are embodied time, and so are our societies, made up of history.
- Manuel Castells, The Rise of the Network Society.



Brainstorming Dimensions of Social Relationships in the Online World

Before we ask the question of how to visualize social relationships in the online world, we should first ask what aspects of social relationships are important or interesting to a user? I've made a cursory list to brainstorm some possible dimensions below...

  • Who is the person? Name, monikers
  • How does this person want to be identified stylistically? icon, font, colors, sounds...
  • What is the nature/categorization of our relationship? Business, friends, activity partners, romantic interests, long-time friends?
  • How active is the person in his/her online messaging activities?
  • How active is the person with me in his/her online messaging activities?
  • What are his/her interests?
  • What can be said about his/her lingo/discourse style and what does that say about his/her identity?
  • How much do we know about them?
  • Under which contexts have we interacted, and to what magnitude?
  • Do we have overlapping social networks?
  • Infrequent, long convos VS. short, frequently convos?
  • When was our last contact?
  • What is his/her reply time versus mine?
  • Do we regularly share our latest news with each other?
  • What is the depth versus breadth of our conversations?
  • How superficial is our interaction?
  • Do we have a common friend, or group, or topic of interest which we consistently refer to?
  • What is the nature of our language and use of emoticons? Flirtatious, formal, etc.?
  • Are we refer to shared events and activities that we've done outside of our online interactions?
  • How does his/her relationship with me compare to that of her other friends, and similarly, how does my relationship with him/her compare to my relationship with other online buddies?
  • What are some of our more memorable episodes?
  • Who talks more and more often?
  • Is there a pattern of interruption?
  • How responsive or attentive is the person?

Colin Ware's Information Visualization: Perception for Design is a bible of information visualization through basic abstract color and spatial dimensions. One troubling realization is that to create an effective, at-a-glance visualization, a designer will likely have to constrain the number of communicated dimensions to just 3 or 4.

Visual Metaphors for Online Relationships

Below, I sketch three visualizations of online relationships, each harnessing different visual metaphors for conveying the essence of a relationship in an intuitive at-a-glance manner.

Visualization #1: Strength of a Relationship

In this sketch, I chose to visualize the very basic nature of a relationship: its strength. First, the iconic face representation is meant to give the user an at-a-glance recognition, not unlike with other icons such as basic shapes and typographic symbols, as discussed in Information Visualization. The system makes no effort to represent the online identity of the user in this situation, and the icon is merely meant to evoke the user's own memories or impressions of the depicted buddy. The strength of the relationship is modulated along two color dimensions: luminance and saturation.

A high luminance (bright), high color saturation icon (leftmost) indicates a healthy relationship where the buddy in question is actively engaged with the user in discussions. A lower luminance, low saturation icon (middle) indicates that somehow the relationship has soured. Perhaps there was a fight, or someone's response was ignored for long periods of time, or a general falling out where the relationship's previous prominent and active role has been diminished. A low luminance, high saturation role (rightmost) indicates that a relationship has begun to fade, but on more amicable terms. For example, perhaps the user's interaction with the buddy is casual and periodic, or the buddy has generally diminished all online activity and not just the relationship with the user.

When an icon is placed in isolation, luminance is hard to distinguish, but imagine that the pic is placed next to a reference normal luminance, normal saturation pic of the buddy, or placed in history sequence, or against the pics of other friends. Suddenly the contrast of luminance begins to convey a buddy's presence. Those we love and interact with have a strong presence, represented by a bright picture. Those we are not actively engaged with are darker. And those we feel distant from or emnity toward are greyed out.

A third dimension that is harder to see, and may or may not work is sharp versus blurry. A blurred or otherwise perturbed photo can indicate that the user doesn't know the buddy in question. Perhaps the buddy is too new or is too distant. But the crispness of a photo is being used as a metaphor for the crispness of the mental impression that the buddy has made on the user.

Visualization #2: Social Exchange

In the capitalistic context of present day society, it seems sadly appropriate that we think of our social relationships too, in terms of an "exchange" of commodities. Our relationships with different people are characterized by an exchange of ideas, or of business, or of love, inter alia. In this visualization, the exchange of information is made explicit. The green connector edge has a width and length. The stronger the exchange, the stronger and thicker the connector, pulling people close to the user's icon. Of course, each person has his/her own notions of the value of each social commodity, and these valuations will change under different life contexts (e.g. the user values love most after a recent breakup). The user can specify the value of each type of currency, and the composite score determines the strenght of the relationship.

A more advanced visualization may try to not only model each buddy's relationship with the user, but also amongst each other. This would let the visualization leverage the visual power of groups, perhaps viewed under the filters of different commodities. What are the love groups and circles? Which are the business groups and circles? Who is the person with all the ideas flowing from him?

Visualization #3: Planting Friends

The beauty of flowers is that there is already a strong metaphorical connection between the state of flowers and relationships. A small budding flower represents a budding friendship (or relationship, if we make that a red rose instead of a yellow tulip). A full, blossoming flower is symptomatic of a relationship healthy and in its stride. A withering shriveling darkening flower is close to death. Luckily, whereas real flowers must eventually die, virtual flowers do not.

The chief import of the social relationship as flower visualization is simplicity. Everyone understands the flower metaphor. Another major boon is that the flower visualization is ambient and artistic and is something that a user might want to keep on the screen. Flowers can be expressive too... different types of flowers to symbolize love, friendship, fortune, etc. Certainly your local botanist or florist can help you pick the right flower to match any person's identity.

Flowers are visually distinct. In the vocabulary of Colin Ware's Information Visualization, there are several pre-attentive features being employed. When flowers are first budding, they are smaller and brighter, thus, they stand out. When flowers are wilting, their orientation changes, and that is also pre-attentive. There is the possibility for grouping of flowers based on characteristics of friends, or maybe keeping different pots for friendship, love, business, etc. Of course, those special friends who cross categories may have to be visualized as vines ;)

There is the psychological side effect of planting flowers that creates a need in a person to nurture and care for the flowers/friends. This can create a desire in the user to take more responsibility toward maintaining good social relationships.

And what of history? How might we visualize that in our flower pot? Flowers grow at different rates and mature in different ways. Some flowers grow quickly, straight stemmed, and blossom and wither quickly. Other flowers grow slowly, have lots of little knots, twists and turns, and mature slowly. A blossom may persist for a longer period, causing the petal and stem colors to saturate and darken. These subtlies allow us to map history of a relationship into the form of the flower. It's more of a pity for the most delicate and intricate rose to wither than a smaller bloom that is coarser. In general, I suspect that people have deep intuitions for interpreting detailed cues about flowers, and other natural objects, albeit these intuitive perceptions may be subconscious.

Ambient representations of social relationships can be artful, non-intrusive, and intuitive. Nature nurture metaphors can be very intuitive, detailed, and at-a-glance.






H U G O . . L I U ...
interactive experience group

commonsense computing group
counter intelligence
hugo at media dot mit dot edu