I am in constant pursuit of the “clay” of interaction design (IxD). Even if that clay is intangible, if we are to consider ourselves a true design discipline there must be something that we are manipulating. Once we understand what it is that we are manipulating we will be better able to communicate to all our stakeholders the intentions of what it is the interaction designer designs. One possible property of said “clay” may be motion or movement.For almost all interactions we place our body in motion. Even speaking requires muscles to move in order to work. There has been a ton of work done on motion as an aesthetic quality towards an audience, even if that audience is just perceived. What I’m interested in is motion as an aesthetic regardless of perceived or real audience. The question I ask is if certain movements just feel better than others at an aesthetic level and further that perception is manipulated by other interacting factors.

The Foundations: A Recap

A couple of years ago I started positing that there are foundational elements to IxD. If we are to discuss material and medium in IxD there must be properties that we can use to describe and differentiate and even qualify what it is.

Why I pursue foundations as a concept is strongly influenced by Roweena Reed Kostellow (founder of the Pratt Institute’s Industrial Design Department) and her six foundations for three-dimensional design: line, luminance & color, space, volume, negative space, and texture. It isn’t just that these foundations exist for their own sake. They are a basis for two important requirements for the education and practice of design—educating craft and a basis for criticism.

Another growing influence is the work of Bill Verplank. His three areas of concern for the interaction designer are articulated beautifully in his video taped lecture he gives in Designing Interactions for his former colleague Bill Moggridge. In it he suggests that the Interaction Designer is concerned with three things that all start with “How do you …”. It’s worth the watch.

What is unclear to me from Bill’s explanation is how do I manipulate things to achieve the outcomes that he describes. Further it seems that he is only discussing the end result or point of interface that people interact with. This did not seem to map against my idea of what interaction design is. For me interaction design supports the interface by defining both the desired behavior of a product or service and the desired behavior of the people who will interact with that system.

So, with this in mind I’ve been working out a collection of foundations that I believe make up the “clay” of how to do just that. I have three original elements: Time, Metaphor, and Abstraction.

• Time is in many ways the most multi-facetted of the three. It breaks down into the following attributes: pacing, rest, duration, frequency, attention. These properties all combine to create a relative sense of time amongst people using the system, the same way that one experiences anything.
• Metaphor is related to what Richard Buchanan calls the “Poetics of Design”. It is the way we need to use analogy as the bridge between the intangible complexities that are forged through digital technologies (and other complex intangible and abstracted systems such as services) and the tangible world where our senses and cognitive abilities evolved to embody.
• Abstraction is really a value property. It relates to combined physical and cognitive activities that takes place to initiate an activity and when it is perceived to have been occurred.

The rest of this article though is about a new type of foundation that I alluded to when I presented at Interaction 09 on motion or movement.

Background on Motion

We are using a larger variety of motions with our primary computing devices than ever before. The devices are in motion like when we shake an iPhone to initiate an undo, or we are in motion & our devices can sense the movements we make. The previous tap which mapped almost exclusively to a mouse-click has been extended with new gestures like pinch, flick and swipe. Like the ubiquitous mouse-click there are a variety of contexts where these gestures are used changing their meaning, and emotional contexts. Mouse down, move, mouse up is commonly called “drag & drop”. How we combine movements within specific contexts can effect how we interpret their interpersonal meaning and the feelings we have associated with them.

One aspect of motion and movement comes from dance and martial arts. I love to dance and I used to practice both Tae Kwon Do and capoeira (two fairly different martial arts). Dance and martial arts requires a practitioner to be fairly aware of how they move in the world. Yes, you can say this is about balance and agility, but it is also about understanding what brings about balance and agility. It also forces you to understand your place in the world physically compared to everything around you. To me, this spatial awareness is to motion the equivalent that attention is to time.

spatial awareness is to motion what attention is to time

I spent more focused attention on my practice of capoeira as an adult. In doing so I realized quickly that how I felt emotionally doing a movement directly correlated to whether or not the movement itself was successful. On watching capoeira I noticed similarly as an audience member that beauty occurred within the success of those playing (you play capoeira instead of fighting it because of its history as a covert mechanism to learn how to defend yourself within the context of being a slave in Brazil.)

Compare the act of moving a file from one container to another with the act of panning a map. In this example the motion is almost the same but there is a clear difference that effects the aesthetic quality. The level of precision required for panning a map is substantially less than that of file-folder management depending on the level of graphic resolution and other factors related to Fitt’s Law. The motion of panning can in fact have a comparable flick like quality to it, especially when the user knows they are several lengths of motion away from their desired target. Targets themselves are usually approximations as well. Applying Fitt’s Law to this activity, an approximate target has a cognitive equivalent of just being a fairly larger target than an absolute target.

The Case for both good & bad motion design: Twitter for iOS

What got me to return to thinking about motion almost two years later was my own impressions using the newly released Twitter for iPad app and comparing those to my other iPad and iPhone apps I use. Specifically, there are new gestures introduced by the designer of both Tweetie for iPhone (now Twitter for iPhone) and Twitter for iPad, Loren Brichter formerly of Atebits.

On Tweetie, Loren brought to the iPhone world a whole new gesture. Playing on the existing metaphors of gravity & friction in other iPhone gestural interfaces, he used the existing playful springiness at the end of a list as a spring-loaded trigger to call for a refresh of the results of that same list.

The now-standard spring refresh on iPhone

This first gestural innovation was so successful that a host of other applications have taken it on as their primary means of refreshing a result list. For me the adoption of the new gesture so permeated my standard use of my iPhone that I now expect this gesture to be available in every app that I use. That is a pretty successful independent major UI paradigm to design.

When I opened up the new Twitter for iPad app, I was ready for some goodness because of all the hype I read before I downloaded. It is very well designed and is completely different from its iPhone sister. It takes advantage of the unique properties of the iPad. (For those not familiar with the app, the motions are all shown below).

The new iPad app puts the details of a single tweet in a right column, but instead of putting an “X” icon or other “button” to close or collapse the detail view, Loren invented a new gesture/action combo where the user swipes (a common gesture for deletion) to literally push aside the right column, which disappears for portrait view and squeezes it and clips it in landscape view. In so doing he both creates a new motion gesture and uses that new gesture as a means of reducing abstraction through what appears to be a tangible equivalent of pushing aside a pile of paper on your desk. (Yes, it is also an abstract metaphor and also has attributes of time associated with it.)

Clipping Columns

Understanding Aesthetics of Motion

Using all these apps I began to get new critical thinking that I could apply to the foundations I mentioned above. Whether it is the original flick-scroll that Apple designed with the launch of the iPhone, or the spring-refresh, or the swipe-dismiss there is a commonality for how the gestures are engaged. The movements share a lack of control and/or precision. This has as much to do with the size of the targets as it does with the complete lack of target for ending. These free-ending gestures work because of their ease, but also because of the extended range of motion creates an aesthetic quality to them that more precise and controlled gestures do not. In turn they add to the overall aesthetic quality of the interface around feelings of play & personal satisfaction.

I’ve also noticed some other key areas when using my iPad that have, compared to my iPhone, triggered similar emotional responses due to gestural differences. In general, scale of motion adds a lot aesthetically. As in dancing, extensions are just more beautiful.

The area that I find really different is in typing and general tapping. When I compare the typing experience on my iPhone to my iPad I notice the difference greatly. To really feel it open an iPhone app that requires data entry. Normally though we type on an iPhone with the single finger peck or by thumbing. I’m a big thumber. Even when in the correct form factor (and I’m pretty good at thumbing on my iPhone) the feeling of being more constrained & swaddled is there when compared to the openness & bounce you feel when typing on an iPad.

I’ve equated this feeling to the scene in Star Trek Generations when Data, with his new emotion chip, is singing while tapping away on his glass console screen. I’ve felt this so strongly that I’ve even been searching for a Star Trek console wall paper. I’m also constantly singing Data’s refrain when using my iPad, “Life forms. Tiny little life forms. Where are you? Da da da Da!” (Star Trek: Generations. 1994).

The added scale of space allows one to almost feel like they are dancing with their two hands on a glass dance floor.

When looking at any system of evaluation it isn’t only important to look at what works, but also understand what doesn’t work. My example here also comes from the iPad Twitter app. It has 2 other gestures that are applied to new outcomes. Both are related to revealing something in a new context without any visual cues that it is there. Like the swipe to reveal actions in the iPhone app.

The first of these is is two-finger gesture. With two fingers target a touch holding it down and swipe down. If there is a conversation related to the targeted tweet then it will reveal itself.

iPad Twitter Replies—two finger swipe

The other one also requires two fingers. It uses the the reverse pinch to reveal the detailed view of the tweet.

Pinch Open

Without going into why we need these gestures (I kinda feel they are “easter eggs” more than really usable functionality), they both have properties that lead to their lower performance or evaluation.

First, because they are two-fingered gestures it is less likely that a person will discover these behaviors accidentally. People do not use two fingers regularly accept in specific contexts that are well understood like zooming. For example, I was recently struggling to figure out how to scroll an inset frame without scrolling the surrounding container. It never occurred to me that I should use 2 fingers to scroll. When hearing that, I thought, “that’s messed up” and I tested it on 5 avid iPad users who all failed to figure it out as well and all complained that they were having the same problem.

The second problem is more about the reverse pinch activity then it is about the downward two-fingered swipe. With the reverse pinch the amount of fidelity required to do it is just too high. While the ending point is unimportant there is something about how to start the gesture that might require more precision and higher resolution than the system can handle consistently. For the two-finger swipe down to reveal the conversation, the difficult part is that you need to remember to keep your fingers on the glass or it will disappear. This leads to the constant repetition of the task lowering its utility. It is just easier to tap once on it and have it reveal itself that way.

How to Design for Motion

So what does all this mean for me?

First it means there is a huge opportunity. Loren made a huge name for himself as an accomplished iPhone designer/developer by innovating a new gestural paradigm. It catapulted his app into the limelight and eventually got him “acquired,” in this case by Twitter itself.

I don’t know what methods Loren used to come up with his spring-refresh design, but I can look at the work of Kicker Studio and their case study they published for the gestural TV remote control they designed. What is clear is that sketching & prototyping now requires a new methodology. We all need to learn to become solid actors if we are going to design interfaces that require the user to move in new ways outside of buttons, pointing devices & keyboards. When it comes to mobile devices and touch screens especially, we need to all become actors.

I’m reminded of the case study that Bill Buxton wrote about in his amazing book Sketching User Experiences on how the Palm Pilot was designed. They used a block of wood & a cut off pencil and played with various forms & felt how various gestures would play out. Binging our prototypes into the physical is going to be key as we design for mobile gestural platforms. We are going to have to act out scenarios of use, dance out gestures to complete new choreographies. We need to see gestures both as dancer and as audience.

One of the reasons these gestures work is also related to the visual cues for all the states of availability, direction, activity and completion. Rehearsing the gestures in front of others will cause people to ask questions like how do you know it will do something? And how do you know it when it is complete?

Gestural interface design is still very new. We can deeply appreciate the work of Apple , Microsoft, and Google in their leadership efforts but there are still lots of opportunities in this area to innovate even more. Having an understanding of all four of the foundational elements of interaction design will help you design more solid interfaces & interactions for better overall experiences.

Concluding Thoughts

I am cautious about adding this as a foundation of interaction design because it feels like it might fit within the context of “interactive design” or “interface design”. For now though I believe that there is a behavioral property that moves beyond the point of interaction itself towards embedding behaviors within human beings that become embedded culturally. The motions themselves then become akin to affordances of there own even though they do not connect to any visually perceived markers. They just become expected on one hand and they imbue an emotional aesthetic all their own.

References:
Foundations of Interaction Design article on Boxes & Arrows, and related podcast,
Revised article on Johnny Holland
Interaction09 Motion and Movement video and slides

Although social networking sites have become the commonplace over the past eight years since the introduction of Friendster in 2002, designers have not yet explored two important notions: 1) What kind of social experience do social networking sites foster?; and 2) Do social networking sites encourage community?

Introduction

This past year social media, and social network sites in particular, have reached new heights of popularity and adoption. It is no longer unusual for clients to request that designers “add Facebook” to their respective sites, mainly for the purpose of increased engagement and community building for their brand as a part of a greater social marketing strategy. Although social networking sites have become commonplace, designers have not yet explored two important notions:

1. What kind of social experience do social networking sites foster?; and
2. Do social networking sites encourage community?

The Anatomy of a Social Network Site

The Facebook wall

Although many of us utilize social networking sites on a daily basis, it is important to step back and understand the various components that make up a social networking sites, as well recognize that social networking sites are fundamentally different from other social software. Social network sites differentiate themselves from blogs, wikis, and social tagging sites, by three distinct features: profiles, friend lists, and comments[1]. According to Rosen[2], unlike the “proto-social networking sites of a decade ago [that] used metaphors of place to organize their members: people were linked through virtual cities, communities, and homepages,” today’s social networking sites “organize around metaphors of the person, with individual profiles that list hobbies and interests.”

The fundamental feature of a social network site is the profile. A profile is constructed through a pre-defined web form that each member completes for the purpose of describing themselves to other members of the site. The most basic profile fields include demographic details such as age, sex, and location, followed by relationship status, educational level, political and religious affiliations, as well as tastes in music, movies, and books, a photograph, and open-ended descriptions. These fields exist because Friendster – originally designed as a dating site – was the first popular social network site and was subsequently emulated by newer social networking sites.

Once the profile is created, members are than encouraged to look at others’ profiles and add those people to their Friends list. The creation of a friends lists is what makes up the “social network” component of the sites.

Social networking sites also provide a means for communication among Friends. This is most commonly done through comments posted on “The Wall” in Facebook or the “Friend’s Comments” section in MySpace. The comments are publicly displayed and viewable to anyone with access to the individuals’ profiles. According to a survey conducted by the Pew Internet & American Life Project, “the most popular way of communicating via social networking sites is to post a message to a friend’s profile, page, or ‘wall’.” [3]

The Social Experience of Social networking sites

According to Jenny Preece[4], “an online community is first and foremost a social experience that changes according to who is present, the number of people involved, and the type of discussion that occurs.” Perhaps unsurprisingly, social networking sites tend to foster an narcissistic experience, where users goals become to collect friends, feedback, and attention. There is very little sense of being part of a larger group, and little motivation for establishing connections with strangers. By following the daily activities of “Friends”, people do begin to feel, what Leisa Reichelt [5] coined as “ambient intimacy”, which is a sense of a stronger connection to weak ties, such as long lost school friends, dispersed colleagues, or relatives. However, the binary friend/not friend designation found on social networking sites often collapses all relational contexts, turning the semi-public space into a broadcast medium, where others can voyeuristically observe interpersonal interactions.

Some of these experiences are dependent on the design of the friendship mechanism in social networking sites. Sites like Facebook which require reciprocal approval from both parties to become connected, encourage users to limit connections to people who they already know, and don’t particularly dislike. In essence, Facebook truly is just for friends. Sites like Twitter, where a reciprocal connection is not required, people are much more likely to follow strangers that may be of interest. However, there is a proliferation of spammers and bots which often clutter the stream and diminish the experience.

For all social networking sites, the temporal aspect combined with an ever growing connection list creates a significant strain on attention. People often find it difficult to follow individuals of interest because they get lost in the stream, especially if there is a particularly active individual. The situation gets even more complicated as people join more than one social networking sites. In this instance, individuals often pick a primary social networking sites, which they will check and interact with frequently, while others will be visited occasionally.

Social Networking Sites and Community

Multi User Dungeon

Over the years, as technology has progressed, so have community designs. Moving from text-based MUDs (multi-user dungeons) and MOOs (multiuser object oriented technology), to threaded discussions such as usenet groups, listserves. and bulletin boards, and most recently social network sites. According to Preece, online communities are made up of three parts: a purpose which is supported by technology and guided by policies. The purpose of social networking sites is generally thought of as creating connections, or building up the social network through friends list. This purpose is fairly generic compared to community sites of a decade ago, which ranged from interest groups to education, business, and health support.

The community sites of a decade ago were explicitly situated within the context of the domain under discussion, while individuals and their relationships with each other were invisible. In social networking sites, the individual and their relationships are explicit, while the community becomes invisible or imagined. The interaction is centered on individual actions and reactions, with little sense of a larger group. Currently, social networking sites are designed to increase the strength of ties between individuals, instead of fostering a sense of community.

Looking Forward

Google Reader's Like functionality

As we look into the future, we should not forget the lessons we learned in the past. Community designs such as threaded discussions, provide for rich content, a sense of being part of a group, feelings of support and belonging, as well a common interest upon which new relationships can form. Perhaps social networking sites, although incredibly popular, are not always the answer to increased engagement and community in every context. Designers should think about ways of combining the rich context of threaded discussions along with aspects of social networking sites. Is there a way that we could surface content, but at the same time provide pointers to individual contributors? Google Reader is currently taking first steps to this approach with their “Like” functionality, which allows all Google Readers users to mark a post they like, and also view others who liked the same post.

I challenge designers to stop emulating designs that have not changed since 2002, and take the concept further through the creation of context appropriate designs which balance the larger community and the individual. The next time you are designing social network features, think carefully about what kind of behavior and social experience you wish to encourage. Do you want people to connect with their existing contacts, such as found on TripIt? Or do you want them to discover resources from strangers, such as found on Delicious? Additionally, think carefully about the value proposition of your social networking sites. Why will people choose to use the features on your site versus the several other sites they are currently using? What personal benefit does your site provide aside from social networking sites?

References

[1] Boyd, d. and  Ellison, N. B. (2007). Social network sites: Definition, history, and scholarship. Journal of Computer-Mediated Communication, 13(1), article 11.

[2] Rosen, C. (2007). Virtual Friendship and the New Narcissism. The New Atlantis, 15.

[3] Lenhart, A., and Madden, M. (2007). Social Networking Websites and Teens: An Overview. Pew Interent & American Life Project, January 7.

[4] Preece, J. (2004). Designing and evaluating online communities: research speaks to emerging practice. Int. J. Web Based Communities, 1(1).

[5] Reichelt, L. (2007). Ambient Intimacy. Available at: http://www.disambiguity.com/ambient-intimacy/

Josh Porter has a nice post out this week on the importance of taking user behaviors into account in social experience design. In Behavior First, Design Second, he makes use of an example I often use myself: what if twitter removed the follower count from user profiles? But I differ with Josh’s reasoning that some social behavior is hardwired.

It may be the case that certain human qualities are enduring attributes of human nature (ack, don’t like that term…). It may be that from the Ten commandments through to the Seven deadly sins, qualities like vanity, jealousy, greed and some number of others are simply human. But if they are, I’m inclined to consider them impulses, inclinations, tendencies — effects but not causes. I like to think that these social qualities are most often reactive, are responses to situations, social context, and social relationships or dynamics.

Josh cites the accumulation of followers on twitter as an example of a tendency to collect. It might be that all humans are inclined to collect; I’m more inclined to think that collecting is a social phenomenon. Be that as it may, collecting is related in my mind to ownership and possession. It’s related also, but in a different way, to numbers and magnitudes. A collection is a number of things and a pile of things. It might be that I like the pile, or that I like the number. It might be that I can show off the collection, or talk about how many… Owning and telling are different in my book.

Collecting, then, isn’t to me the behavioral explanation that Josh puts forward, but is a behavior behind which may be different psychological motives:

• Some twitter users may collect followers and be happy in their hearts for the number they can count
• Some may think about being seen having a large number of followers
• Some may think about their own status in terms of their follower count
• Some may think about the attention they’re getting from their followers

In other words, counting followers is a design-related behavior in which other motivational and psychological (and psychosocial) factors are implicated:

• status is derived from number of followers
• attention is attributed to number of followers
• status is projected onto number of followers
• status is associated with some important followers (not all followers collected are the same!)
• vanity is reflected in a number of followers

In other words:

• Collecting can have a social function: expressing or standing for status or position
• Collecting can have a communicative function: a representation of status to others
• Collecting can have a personal function: making one feel that there’s an audience that pays attention

and so on…

Collecting is probably not the original or primary cause or motivation behind the follower behaviors seen on twitter. We may count things, but I don’t think that’s grounds to assume that we count people in the same way. Yes, we count the number of people, but that’s not quite the same. The number can represent and signify to others; our motives for signifying are not our motives for collecting.

I think it is probably more likely that the follower phenomenon on twitter can also be explained by means of interaction design. Twitter is a communication tool. Communication, as a system of action or interaction is contingent on the participation of another person. I can tweet, but I cannot do anything to make somebody else respond. This may be the single-most common reason that new users stop using twitter — they simply don’t get anything back. The only type of interaction that does work, independent of any other user’s attention, recognition, response (etc) is following.

I would claim that following provides success. It’s an action that works, an action that can be completed without involving interpersonal or social contingency. It’s an action that to many users may also serve as a friendly gesture (I’m following you!); which may also involve an expectation (follow me back!), and these have little to do with collecting and a lot to do with exploring the sociality of a tool using competencies developed over a lifetime.

In fact one could argue, though it’s a bit of a stretch, that the expectation for reciprocal following (which is the habit of new users) is a social workaround to the asymmetry of relations designed into twitter. That symmetry is preferred, socially speaking, to asymmetry: and an etiquette of reciprocity is the hack that overcomes the design flaw…

I just wanted to comment on this because it is endlessly fascinating. And because I think the motives in social interaction are multiple, escape attribution to a single behavior or practice (eg collecting), and should be understood and unpacked with an eye to the social dynamics of the site or service in question. Social media interactions are a result of social dynamics, and escape explanation by means of the behaviors of individuals only.

We should be talking about this stuff — and I’m glad to see it covered — because the social practices that emerge around mediated communication and interaction are a complex of personal, social, community, and public uses and utilities, values, and actions.

I hope this is taken in the right way. I want to move this kind of thinking along; my disagreements or distinctions are always with respect and, I hope, a shared interest in learning.

From Joshua Porter’s blog:
We don’t just collect attention, of course. We collect lots of things. Most video games are built entirely around the premise of collecting things. The more you collect the higher your score. The more coins that Mario and Luigi collect, the better they do. It’s a causal relationship. We understand when playing these games that collection is the way to achieve success.

As designers we must remember that behavior comes first. Always. The quirky, the obscure, the vain, the annoying, the wonderful. We need to observe human behavior if we are to support it in design. If people collect things, how can we support that? If people are vain…how does that affect the design? Will it kill some interesting behavior…or will it help drive adoption of the service?

So, back to behavior. Some behaviors that drive us nuts are core to the human experience:

We want attention.
We collect things.
We want status.
We are vain.
We make judgments accordingly.

Ever caught yourself watching the latest episode of Battlestar Galactica shouting “What the frak?!”. What about the shock when the two characters flirting all season finally get together in Grey’s? Now there’s a to share these emotions with your social network instead of just your television. And it uses Twitter.

Enter Yell at the TV (@theTV). Not your typical social site, Yell @theTV supports spontaneous bursts and exclamations concerning your favorite show. No fancy subscriptions, hardware, or technical support needed, @theTV uses our neighborhood Twitter service to capture your shouts. For those of you without a Twitter account, you can still follow the exploits of tv viewers, though I highly suggest you sign up and join the conversation.

The method is simple, tweet starts with @theTV, #tv show name, and then your shout.

It is no mistake the developer launched this application minutes before this season’s premiere of LOST. An interesting view of what people are watching, the developer has made it clear he plans to provide options to vote for popular shows, sort by episode or show title, and add more features. Even without these added features, the application proves to be a great way to see who else is watching your shows and if anyone else is angry at the show jumping the shark.

In its limited scope, @theTV offers a unique social interaction. Where Facebook and instant messenger limit us to semi-synchronous communication with people we are at least familiar with, @theTV allows us to share interests with complete strangers from the safety of our home. It’s odd at first but something I have fully embraced. Looking beyond the rants of telivision viewers, I can see Yell@thetv expanding to corporate blogs, political campaigns and more. CNN asked its viewers to send in pictures of President Obama’s innaguration to make a photo collage of the moment. Now imagine being able to tweet @innaguration for the same, if not more personal piece of history. If corporations had such a feed, then individuals could tweet: @Apple, when will the iPhone battery last longer. Not only will this offer an interesting point of view for the company but it allows the consumer to vent, review other thoughts, and network. Just think about how many people you follow on Twitter based on your friends networks and how much it could grow from social interactions such as these.

In its early stages @theTV has gained a small but true following. Scale is everything and as the community grows, it will be interesting to see how the site expands to match different genres, shouts, and so on. Similarly, it will be interesting to see what else the developer does with this concept and how others take this idea and expand on it.