Storyboarding iPad Transitions

by:   |  Posted on

If your clients are not yet asking you to design transitions, they will likely do that on your next project. Transitions are hot, and not just because they entertain the eye. In confined mobile computing interfaces, on tablet devices or in complex virtual environments, transitions are an authentic, minimalist way of enabling way-finding, displaying system state and exposing crucial functionality – in short, they are key in creating a superior user experience.

Transitions as design elements

Since the 1980s, designers have been drawing wireframes to represent web pages and device interfaces.1 In the beginning, wireframes were static schematics that showed a single state of the page. With the emergence of dHTML in the 1990s, it became necessary to draw different states of specific dynamic page elements, so the designers adapted the wireframe methodology to document the beginning and end states of the dynamic elements. Still, designers and engineers had little or no control over what happened in between the beginning and end states — the browser or the operating system handled all transitions.

More recently, sophisticated mobile touch frameworks like iPhone, Android, Palm and Windows Mobile allowed unprecedented control over the speed and structure of the transitions, giving designers more tools with which to create a better experience in a confined mobile space.2 Simultaneously, on the web, dynamic platforms like Flash and Flex gained tremendous ground, making it possible for designers to think about and document transitions because those were now part of the customer experience.

With the release of the Apple iPad, the Age of Transition has come to its full potential. On the iPad, Apple takes full advantage of some of the principles and ideas the company previously explored and perfected using the iPhone. On the bigger iPad screen, transitions achieve a new level of detail and sophistication, making the device come alive, and become a powerful, integral part of the experience.

Transitions Require Thinking Differently

As Jonathan Follett writes in his article “Interfaces That Flow: Transitions as Design Elements”:http://www.uxmatters.com/mt/archives/2007/04/interfaces-that-flow-transitions-as-design-elements.php, 3 many UX designers approach projects from a combination of information architecture and interaction design. These disciplines involve thinking that is quite different from constructing the continuous linear narratives required to design and document transitions. Nevertheless, by borrowing freely from the lessons of early animators, it is quite possible to adopt the existing wireframes methodology to convey the structure and rhythm of a user interface transition.

The task consists of wireframing each of the important changes (or “key frames”) that occur during the transition and stringing a bunch of wireframes together in a storyboard. By documenting the key aspects of the transition, it is possible to share them with the larger team and try out different transitions designs. Documenting the transitions also allows us to step back and consider them in a larger context of a specific use case or overall goal of progressive engagement and immersion.

Understanding iPad Transitions

In order to be able to design and document transitions using storyboards, we have to first understand design principles that designers of transitions use to convey the desired meaning. Let’s take a look at the Apple, Inc. video in Figure 1 showing selected transitions from what is arguably the most popular iPad application today: iTunes. Although many different transitions are shown in the video, we will be specifically looking at the two of them: “opening the iTunes application” (0:17-0:20 min) and “opening album details” (0:30 -0:36 min).



Figure 1: Video of iTunes transitions on the iPad [“View larger version on YouTube”:http://www.youtube.com/watch?v=Z03PR_4Ln90]

Borrowing from Chet and Guy’s excellent Devoxx presentation “Animation Rules!”:http://www.parleys.com/#st=5&sl=1&id=1578,4 we can identify seven key principles that specifically apply to the animated transitions on the iPad:
# Component Relationship (background-foreground)
# Illusion (motion perception and perceptual constancy)
# Exaggeration (highlighting states, actions, and changes in state)
# Staging (camera view, lighting, focus)
# Acceleration and Deceleration (slow in and out)
# Metaphors (using real-world analogies to convey complex digital events)
# Simplicity (avoiding noise)

To understand how the seven principles above apply combine to make the transition work its magic, let’s do a step-by-step breakdown of the “opening the iTunes application” transition, shown in Figure 2.

Figure 2: Step-by-step breakdown of the “opening the iTunes application” transition.

Figure 2: Opening iTunes Application Step-by-Step

Using our seven key principles:
Component Relationship (background-foreground)

This transition is essentially the process by which the iTunes application comes into the foreground, while the rest of the apps recede into the background. In the first row, the transition starts out with the home screen and apps icons firmly in the foreground. By the end of the row, we can see that the home screen recedes and darkens, while the iTunes app (represented by a white square) slowly comes into the foreground. By the second row, the background-foreground transition is essentially complete – we can see only the loading iTunes app against the black background.

Illusion (motion perception and perceptual constancy)

This transition creates its magic via an illusion of “flying into” the device, and eventually meeting the white square that represents the iTunes app. To accomplish this, the animation shows us “flying” through the layer of the apps icons on the home screen. The other app icons begin to “fly” to the sides of the screen in a circular pattern, as shown in row 1. The most interesting part of the illusion is the kind of “bait-and-switch”. If you look carefully, you’ll see that the app icons never make it off screen. Just before we “pass through the icons layer” and “witness” the icons “flying off screen”, the background goes completely black, and our attention is focused on the white rectangle. The illusion is complete.

Exaggeration (highlighting states, actions, and changes in state)
In this transition, the lighting effects are used to exaggerate the switch between the background and foreground. In the second row, the background goes completely black, to highlight the change in state. Exaggeration can also be used to warp the shape of an object to emphasize movement, as in is used more in the “genie” effects and transitions.

Staging (camera view, lighting, focus)

Subtle but powerful lighting is used throughout the transition as the primary means for focusing our attention on the foreground of the opening window of the iTunes app through subtle darkening of the background (principle 1). Lighting is also used to accomplish the bait-and-switch in the Illusion principle.

Acceleration and Deceleration (slow in and out)

Our brains know from experience that objects do not start running at top speed or “stop on the dime”. To make the movement more life-like, the animation accelerates into the movement very slowly, picking up pace in later screenshots, as evidenced by the increasing “smudginess” of the icons in the first row. Not surprisingly, the bait-and-switch happens in the fastest moment of the transition to pull of the illusion that the homepage icons actually “fly off screen”. The transition then slows down again in the last row to smoothly fade in the iTunes content elements, deliberately giving the auxiliary page elements and pictures time to “catch up” and making the page load appear smoother.

Metaphors (using real-world analogies to convey complex digital events)

The most effective transitions use real-life elements to provide a frame of reference which makes the animation more realistic. In this case, the icons on the home screen are moving to the sides, creating an overall illusion of moving through space, or deeper “into” the device itself to convey a digital event of opening an application inside the device.

Simplicity (avoiding noise)
The overriding theme of this transition is its apparent simplicity. During the transition, iTunes is not doing anything particularly complicated or earth-shattering. The magic comes not from one particular element, but through carefully blending and combining the lighting and movement to create a smooth cohesive digital dance, perfectly orchestrated from beginning to the end.

Storyboarding iPad Transitions

The key to successfully designing and storyboarding the transitions is understanding and applying the seven animation principles we discussed above. To demonstrate how this can be done, let’s use a slightly more complex transition: the iTunes “opening album details”, shown in Figure 3.

Figure 3: Opening iTunes Album Details Step-by-Step

Figure 3: Opening iTunes Album Details Step-by-Step

Here again, we see the seven principles at work:
Component Relationship (background-foreground)

This entire transition can be viewed as bringing the selected album cover into the foreground, while the rest of the iTunes application recedes slightly into the background.

Illusion (motion perception and perceptual constancy)

The animation shows us the illusion of the album flying forward on the screen while flipping 180 degrees. The most interesting part of the illusion is the switch from darker gray “back” of the album to a while loading screen (midway through the second row). This sleigh of hand changes the focus to the white cover to make the transition believable.

Exaggeration (highlighting states, actions, and changes in state)

In this transition again, the lighting effects are used to exaggerate the switch between the background and foreground. Midway through the second row the album turns completely white against the slightly darker background.

Staging (camera view, lighting, focus)

In the beginning the iTunes application darkens gradually, and reaches its full saturation about half-way through the second row to create the background against which the album will be staged. The album, on the other hand, switches first from color to darker gray, then to solid white to jump to the foreground.

Acceleration and Deceleration (slow in and out)

The animation starts slowly, and achieves top speed half-way through the second row to quickly switch from the dark gray flipping rectangle to a solid white loading page. Just as in the previously discussed “opening iTunes” transition, this transition also slows down in the last row to smoothly fade in the iTunes album cover content elements.

Metaphors (using real-world analogies to convey complex digital events)

This transition invokes the magical feeling of opening picking the old LP album off the shelf and flipping it over to see the back cover by creating the illusion of the album jumping off the page and flipping 180 degrees horizontally around the middle.

Simplicity (avoiding noise)

While a bit more complex than the “opening iTunes application”, this transition can nevertheless be adequately described by looking at only 12 screenshots.

Once the transition design principles are understood, the process of drawing the storyboard becomes fairly straightforward. I use the same method that Galileo Galilei used four centuries ago when he first diagrammed the step-by-step movement of the sun spots in 1613.5 The basic transition storyboard for the “Opening iTunes Details” transition is shown in Figure 4.

Figure 4: Storyboarding iPad Transitions Using Post-it Notes

Figure 4: Storyboarding iPad Transitions Using Post-it Notes [“See larger version”:/files/banda/storyboarding-ipad/figure4_ipadtransitions_postitnotes_large.png]

Now Start Making Your Own Transitions

As you try your own hand in transition storyboarding, here are a few points to keep in mind:

Use appropriate materials


To diagram transitions, I prefer to use medium-size post-it notes that measure 3-inch square. I draw each of the steps in the transition using a soft retractable pencil with a good eraser. This allows me to quickly diagram portrait and landscape transitions, and everything in between. Because the iPad is a rectangle, not a square, I leave the extra space left on the right of the post-it note (on the bottom for landscape) to write the additional explanation for each step or simply leave it blank.

Simplify shading


As I said above, on the iPad the lighting is foundation to expressing Component Relationship, Exaggeration, and Staging principles, so it makes sense to take a disciplined approach to drawing various shades of light and dark in your storyboard. I find that the easiest approach is to draw shading on top of the picture as light lines at a 45 degree angle. As you can see in the last three post-its, I use tighter line spacing to indicate progressively darker shading.

Get the basics down first


When I first approach the transition design, I make only the post-its necessary to convey the overall movement of the various elements and basic component relationship. I sketch quickly using very rough strokes, and use a ruler and templates whenever possible to make my job easier.

Stick to 6-8 post-its


As you can see in Figure 4, it is not necessary to draw all 12 original key frames we saw in figure 3. To convey the basic structure of a transition, I typically try to use only 6-8 post-it notes. Using fewer steps keeps me focused on the principle of simplicity: if it takes me more than 8 post-it notes to describe the transition, it is probably too complex and I immediately look for unnecessary elements or animation that needs to be eliminated or scaled back.

Ignore Acceleration and Deceleration


Above we spoke at length about the Acceleration and Deceleration principle. This idea is essential to creating effective, believable transitions. However, when drawing a rough storyboard of 6-8 post-its, this is the one principle that I found can be safely ignored. Once people understand this principle, most folks can extrapolate from your rough drawings to imagine the complete smooth transition “in their mind’s eye”. As long as you make it clear to your team that this is only a rough storyboard that the end result will in fact follow the principle, you can safely ignore the subject and concentrate on the relationship, movement and shading of screen elements.

Draw the complete story


Transitions do not happen in isolation – they are an integral part of the overall customer experience. Thus, when I storyboard transitions, I typically do it in the context of the entire use case. This helps me make sure that the particular transition makes sense in the complete context and in combination with other transitions. For example, when I use the “flip” transition to show the search results on the map, and then use the “slide back” transition to go back to the list of search results, the storyboard will quickly reveal the inconsistency in the mental model of the interface I am trying to create and the problem transition will feel awkward when walking through the use entire storyboard.

Sketch a few different transition designs


When I approach a given transition, I usually try out 3-4 different design approaches to see which transition creates the effect I am seeking. Sometimes I find that I need to create 10 or more sets of ideas for more complex and critical interactions. The point of this initial sketching is not to create the complete and final blueprint, but to help you visualize how a given transition design option would feel with the rest of the app interactions. Doing the transition with post-it notes allows me to quickly add a new transition or re-position the existing post-its to create and try out several different scenarios, often while engaging in the active team discussion. I recommend you make copies or take photos of your boards periodically to preserve promising design directions before repositioning the post-it notes and changing the transition layout again.

Obtain Initial Stakeholder Approval


In addition to helping you find the best design approach, a rough storyboard is also a fantastic tool for conveying various design options to your team for joint discussion and brainstorming as well as for obtaining initial stakeholder buy-in. It’s a lot easier to discuss the merits of a particular transition movement and information architecture when everyone is quite literally on the same page looking at your complete use case storyboard.

Creating the Final Transition Blueprint

When you obtain the initial stakeholder approval using your rough storyboard drawing, you will need to document the final storyboard design that the engineers to actually create. Here you have a couple of options.

One approach is to use Flash to create the transition with the final high-fidelity look and feel. This is certainly a valid option. However, I found Flash to be more useful for higher-fidelity usability testing and final stakeholder approval than for describing transitions to engineers. Here is why: most developers do not read Flash code and most transitions are simply too fast for the eye to understand in detail the subtleties of acceleration and shading simply by looking at a running a Flash file. I have had several instances of getting not exactly what I specified or else getting something completely different, only to have the engineers claim that “this is exactly what the Flash looked like”. This is especially a big problem with distributed multi-lingual teams where communication is an issue.

The method that I found to work well is to specify (e.g. create a wireframe for) each of the frames at regular intervals of every 50-100 milliseconds for the entire duration of the transition. Most transitions are between 0.5 – 1.2 seconds, so you will need to create anywhere between 5-24 wireframes in your favorite wireframing tool such as Fireworks, OmniGraffle or Visio. Stringing these frames together in document pages will create a short movie that will comprise the complete blueprint that will describe the position, shading, and movement of each element that will communicate clearly and exactly so the engineers can create the exact transition you envisioned.

While this seems at first like a lot of work, after a bit of practice the wireframing goes fairly quickly, as the difference between the each new page and the one before it is only a slight change in position and shading. As long as we firmly keep in mind the principles by which iPad transitions work, we can easily diagram relevant steps for rich, expressive transitions.

To continue this conversation, add a comment below or reach out to Greg at “@designcaffeine”:http://twitter.com/designcaffeine or through his website, “DesignCaffeine.com”:http://www.DesignCaffeine.com.

Interested in more UX sketching techniques? Join us Saturday, May 28th, 2011 at UX SketchCamp [“SketchCamp.com”:http://www.sketchcamp.com or “@sketchcamp”:http://twitter.com/sketchcamp on Twitter] in San Francisco for a chance to learn from the experts, practice UX sketching and share what you know with others.

References

1. “Wireframing Marathon Starts”:http://ciohappyhour.com/wireframing-marathon-starts/; CIO Happy Hour, September 2010

2. See my article “Designing Mobile Search: Turning Limitations into Opportunities”:http://www.uxmatters.com/mt/archives/2010/03/designing-mobile-search-turning-limitations-into-opportunities.php; UX Matters, March 2010.

3. Jonathan Follett; “Interfaces That Flow: Transitions as Design Elements”:http://www.uxmatters.com/mt/archives/2007/04/interfaces-that-flow-transitions-as-design-elements.php; UX Matters, July 2007

4. Chet Haase and Romain Guy; “Animation Rules!”:http://www.parleys.com/#st=5&sl=1&id=1578; Devoxx ’09

5. Galileo documented the movement of the sun spots in his triumphant “Istoria e Dimostrazioni Intorno Alle Macchie Solari e Loro Accidenti Rome”:http://physics.ship.edu/~mrc/pfs/110/inside_out/vu1/Galileo/Things/g_sunspots.html (History and Demonstrations Concerning Sunspots and their Properties); 1613.

Designing for Social Interaction

by:   |  Posted on

It took both the telephone and the mobile phone 15 years to amass 100 million users, but Facebook did it in 9 months. We see more and more people becoming connected on online social networks, and it seems our networks are growing exponentially. But the reality is, social networks rarely add to our number of connections. We’ve already met almost all the people we’re connected to on social networks. We’re already connected to these people offline. Social networks simply make the connections visible. For example, we often connect with old school friends, and catch up over a couple of wall posts. But rarely do we continue the conversation once we’ve connected, and over time we forget that the connections exist. In fact, Facebook users often have no interactions with up to 50% of their connections.1 When we study how people are interacting on social networks, we see that most interactions are with a very small subset of the people we’re connected to.

The average number of friends on Facebook is 130, and many users have many more.2 Yet despite having hundreds of friends, most people on Facebook only interact regularly with 4 to 7 people,3 and for 90% of Facebook users, 20% of their friends account for 70% of all interactions.4 We also see this with phone usage. We have hundreds of people in our phone contacts, yet 80% of phone calls are made to the same 4 people. We know dozens of people who use Skype, yet 80% of Skype calls are made to 2 people.5 Even when people play computer games online, they mostly play with people they know offline.6

We also have varied interactions with the people we’re not as close to. We find out about new jobs, not through our friends, but through friends of friends. When our friends’ friends’ friends lose weight, we lose weight.7 We go onto eBay and buy things for hundreds and thousands of dollars from people we’ve never met, and will probably never interact with again.

We have many diverse relationships with the people in our lives, yet the web doesn’t support this very well.

the web doesn't support different layers of relationships very well

On Facebook (left), all my “friends” are treated equally. I’m presented with a long alphabetical list. Some of these people I would trust with my deepest secrets, and there are others that I’ve met less than five times. Yet they are grouped together in a big bucket of “friends”. Of the people who are “friends” with me on Facebook, there are many that I wouldn’t call a “friend”. I may call them an acquaintance, or a colleague, or even a family member, but they’re not in the same category as my closest friends.

In my phone (right), all my contacts are treated equally. I’m presented with a long alphabetical list. My best friend is given the same number of pixels as someone I haven’t spoken to in 5 years. I may be able to access my most frequently contacted people via a ‘Favorites’ tab, but these people are still presented in the same way as the people I’ve lost touch with. On LinkedIn (right), all my connections are treated equally. Yet I have worked with some of them every day for years, and there are others that I met once at a conference.

Our social web tools must start to understand the strength of ties, that we have stronger relationships with some people than with others. And with this knowledge they need to adapt.

There are three kinds of relationship ties:

  • Strong ties: People we care deeply about.
  • Weak ties: People we are loosely connected to, like friends of friends.
  • Temporary ties: People we don’t know, and interact with temporarily.

Let’s look at each type of tie, and how we might design for them.

Most people have less than 10 strong ties

For decades, people have talked about social networks being made up of strong and weak ties. Think of the people in your life. Think about your closest friends, the people you are closest to in your family. These are examples of your strong ties. Strong ties are the people you care about most. People often refer to strong ties as people in their “circle of trust”. Strong ties often wield the most influence over people’s decisions.

Most people have very few strong ties, usually less than ten. A study of 3000 randomly chosen Americans showed that the average American has just four close social contacts (four strong ties). Most Americans have between two and six strong ties. People’s strong ties come from a variety of places. About half of the strong ties are said to be friends. The other half includes spouses, partners, parents, siblings, children, co-workers, fellow members of clubs, neighbors, and professional advisors and consultants.8 In both 2002 and 2007, a study of 1,178 adults found that on average, people had about 10 friends they meet or speak with at least weekly (10 strong ties).9 So, when we’re designing for strong ties, we’re designing for small groups of people.

Some people believe that this is changing, that the web is making us closer to more people.10 On the contrary, research studies have shown that the vast majority of usage on social networks is between strong ties. As we saw earlier, on Facebook it’s with 4 to 6 people, with phone calls its with 4 people, and with Skype it’s 2 people. When people play online computer games with others, they are mostly interacting and playing with people they know, often with people who live less than a few miles away. This pattern of technology being used for strong tie communication is not new. When the telephone was invented, it did more to expand and strengthen strong ties than to weaken them. A study in the 1970s showed that the majority of phone calls were to people who live within five miles of the caller’s home.11

When designing for strong ties:

  • Think about their existing means of communication. Phone calls, text messages, email. Strong ties already have established ways to interact, we should support them, and not try and replace them with our own messaging systems.
  • Showing more information about the ten closest people is likely to be much more valuable than showing less information about many more people.
  • Avoid generic terms such as “Friends”. This will likely lead to over-populating groups and reducing their relevance.
  • Suggest connections to people, but communicate the effects of adding new connections.

People have about 150 weak ties that they stay up-to-date with

Moving away from your strongest ties, think about some of your friends’ friends. People you don’t know so well. These are examples of your weak ties. Weak ties are people you know, but care less about. These are the people that are loosely connected to you. Weak ties are people you wouldn’t feel uncomfortable stuck in a elevator with, yet don’t feel much emotional closeness to.

In the 1970s, the sociologist Marc Granovetter wrote a seminal paper about the strength of weak ties. He concluded that weak ties are often a much better source of information than strong ties. As our strong ties are a very small circle, weak ties can be a more powerful source of information and advice. Studies show that most people can only stay up-to-date with 150 weak ties in real life. This pattern has been true for thousands of years. Neolithic villages tended to separate into two once they reached 150 inhabitants, the Roman army was split into groups of 150, so that everyone knew each other.12 It is still true today, online and offline. We are connected to many more than 150 weak ties, but don’t stay in touch with them. We may be connected to hundreds of people on Facebook, but we would struggle to tell anyone what is going on in all of their lives.

In social networks, weak ties can sometimes be very useful, for example, connections on LinkedIn can help you find a new job, a friend of a friend can give you advice on a specific topic. Yet sometimes, weak ties on social networks can lead to awkward social situations, for example, receiving unwanted Facebook invites from people you don’t know very well.

When designing for weak ties:

  • Consider the trade-off between communication and trust. Weak ties may be more knowledgeable about something we’re interested in, but we may trust them less. It may be important to show our other shared ties, or expose their sources of knowledge, so that we can increase the trust between people.
  • Make it easy for people to expose their networks to people they trust with that data. This will open up links between weak ties, without compromising user privacy.
  • Enable appropriate communication channels between weak ties. It may be better to go through, or highlight, a shared strong tie.

The web is increasing our interactions with temporary ties

Strong and weak ties are not enough when we think of relationships online. We need a new category of tie – the temporary tie.

Temporary ties have always existed, but the web is bringing them to the fore. Think about some people you’ve only interacted with once. You don’t actually know who they are. A store assistant, a call center employee, the person you bought from on eBay. These are examples of your temporary ties. Temporary ties are much more common online than offline. They are people that you have no recognized relationship with, but temporarily interact with for a specific reason. Once the task has been completed, temporary ties are unlikely to interact again. You don’t know these people beyond the words they typed, and whatever online profile they have. With the rise of online user generated content, temporary ties are becoming more important.

Following are four common types of temporary ties:

  1. People sometimes interact with temporary ties around an information need. People needing information seek people with knowledge of the answer. Once the request for information has been fulfilled, interaction with these ties usually ceases. You may ask a person in the street for directions, or online you may seek information from people on Yahoo! Answers. This type of temporary tie is increasingly important for the future of web search. People are looking to other people, rather than businesses, to answer certain queries.
  2. Temporary ties also exist when people need to temporarily interact to complete a task. Once the task is completed, interaction ceases. For example, interacting with a sales assistant in a shop, or having a plumber in your house to fix a leaking pipe. Many of these tasks are now online, for example interacting with a call center representative to arrange cable installation, or buying something from a temporary tie on eBay.
  3. Temporary ties can form around a shared ongoing interest such as a sports team or hobby. Interaction can often happen on a community website, for example a sports team forum. The true identity of these ties can remain unknown. One some of these sites, frequent posters start to recognise each other and each other’s behaviour. Although they likely have never met, their relationship can move from temporary tie to weak tie. There are an increasing number of examples where temporary ties interact online, and meet offline.
  4. People often form temporary ties with people sharing the same physical space. These ties can be as simple as a 1 minute conversation on the street, or as complex as an intermittent 3 day conversation at a music festival. Technology now allows us to communicate with temporary ties who shared the same physical space with us, albeit not at the same time. We can use our phones to see who has previously been to the restaurant we’re considering, what they ordered, and whether they thought it was any good.

Because we have no relationship history with our temporary ties (unlike with our strong and weak ties), representing identity and reputation are critical for successful interactions. We need to know that the eBay seller is trustworthy. We need to know that the medical advice we’re reading is from an actual doctor, and not someone pretending that they are a doctor. We need to know that the restaurant review is from someone who knows about food, and that the Amazon review wasn’t written by a company employee.

reputation building

On Yahoo Answers, people can build their reputation in different ways. On the left, “Messykat” is building her reputation by trying to provide the best answers to questions. She may be helpful in 20% of cases, but we still don’t know much about her credentials as an expert in any of her 3 specialty areas (Cats, Dogs, Weddings). On the right, “RuthAnn” is trying to build her reputation by stating that she “has been training dogs for 40 years”. This only adds a superficial layer of credibility, as we can’t verify if it is true.

building trust by positive feedback from temporary ties

On eBay (left), “jmjenkins” is building trust by getting positive feedback from temporary ties who have dealt with him in the past. Some of these people have also left positive comments on his profile, e.g. “Item just as described, arrived safe and sound. Thanks! A++”.

On Amazon (right), “W.Todd Dominey” is building his reputation by providing helpful reviews in 665 of 711 cases. He is also building trust by using his real name, and sharing where he is from. However, as with “RuthAnn” on Yahoo Answers, we don’t know how much “W.Todd Dominey” knows about the topic being reviewed. We can’t verify his credentials.

The motivation for most people who help their temporary ties is not monetary. You can’t create a great temporary tie community with financial reward. Yelp tried to do this by paying people $1 per review, and later they tried to build communities by paying people $15 an hour to comment on existing reviews and write new ones. Yelp ended up with a lot of poor quality reviews 13 14, and a lot of bad press. Some of the actual motivations for temporary ties include recognition of being an expert, altruism, and feeling that they belong to a community. All of these behaviors need to be understood and accounted for in our social web designs.

Supporting temporary ties is good for business. One study showed evidence that “an increase in positive comments about a mobile handset typically appeared a month or two before an increase in market share for that handset.”15 Another study over 7 months showed that when the online promoter activity (an estimate of the online chatter likely to lead to a recommendation) went up, sales went up the following month. When activity went down, sales went down. 16

When designing for temporary ties:

  • Prioritize a great system for building reputation. Allow people to give feedback to one another.
  • Encourage people to expose content that will increase trust in their identity. This could be their real name, a real photo rather than an avatar, or proof of their qualifications.
  • Prioritize a great system for building trust between people. This may be highlighting shared connections, shared groups, or shared interests.
  • Don’t incentivize people with money, incentivize them to build their reputation.

Conclusion

Social web design will become an important part of every interaction designer’s skillset. To do it well, we’ll need to understand some basics about human relationships. If your users’ needs center around strong ties, you’ll design something very different than if they center around temporary ties. Understanding the difference between strong, weak, and temporary ties will help us build better online social experiences.

References

1, 4 User Interactions in Social Networks and their Implications, Wilson et al. 2009

2 http://www.facebook.com/press/info.php?statistics

3 The Economist article quoting stats from Cameron Marlow, sociologist at Facebook

5 Data from a TED talk by researcher Stefana Broadbent

6 PBS article by Henry Jenkins, MIT Professor

7, 8 Nichola Christakis + James Fowler “Connected: The surprising power of our social networks and how they shape our lives” Little, Brown and Company 2009

9 Reports from the Center for the Digital Future, University of Southern California

10 Brave New World of Digital Intimacy

11 I. de Sola Pool, The Social Impact of the Telephone, MIT Press, 1977

12 Quoted from studies by Robin Dunbar

13 Paying People to Yelp

14 Yelping for Dollars

15, 16 Charlene Li + Josh Bernoff, Groundswell, Harvard Business Press, 2008

5 Steps to Building Social Experiences

by:   |  Posted on

Nowadays everyone wants social in their sites and applications. It’s become a basic requirement in consumer web software and is slowly infiltrating the enterprise as well. So what’s a designer to do when confronted with the requirements to “add social”? Designing social interfaces is more than just slapping on Twitter-like or Facebook-like features onto your site. Not all features are created equal and sometimes a little bit can go a long way. It’s important to consider your audience, your product—what your users will be rallying around and why they would want to become engaged with it and each other, and that you can approach this in a systematic way, a little bit at a time.

These concepts derive from a book I wrote recently with Christian Crumlish, “Designing Social Interfaces“. They are quick and easy things to remember when infusing social into your site. Each points offers some simple suggestions and points to consider when designing. Potential design patterns are recommended (and linked to) as examples for what could be done in your interface as you design and grow your service. Keep in mind that your context will dictate different specific solutions but the questions and concepts to think about will still be applicable.

Step 1 – What’s your social object? Make sure there is a “there” there. Give users a reason to rally. Why would someone come to your site?

Most people are drawn to a site based on their particular interests, in hopes of learning more or meeting others like themselves. They may be looking for information or they may have information to share. They have a passion—such as making handcrafted jewelry or taking landscape photographs—and at some point, they will want to share that with other people. That passion, that thing that people rally around is often referred to as the social object. It’s the object around which conversations emerge and thrive.

Remember that sometimes, the social object is a person – or the conversations between people. But don’t forget history (remember Friendster? or SixDegrees?), if the only thing to do is build a profile, people will eventually go somewhere else to have conversations or to do things around objects of interest.

Step 2 – Give people a way to identify themselves and to be identified.

This can be as simple as an “attribution” line when contributing and signing content.

Attribution of a comment on flickr
Attribution of a comment on flickr

It could be an “identity card” that shows a little bit about the person and is attached to every thing they do or can be as robust and complex as a “full profile” that is linked from all their contributions. The method can start out simple and grow over time.

Identity or Contact card as seen on FriendFeed
Identity or Contact card as seen on FriendFeed

It’s important to give people credit for their words and contributions. It helps others recognize their friends and disambiguate them from other people with the same name and builds a “reputation of quality” or lack thereof for their participation on your service.

Public display of relationships allows viewers to find others they might know by allowing them to browse contacts for the person whose info they are viewing.

Public display of relationships allows viewers to find others they might know by allowing them to browse contacts for the person whose info they are viewing. Module shown from MyBlogLog
Relationship module shown from MyBlogLog

Once you have given people the ability to identify themselves, allow them to “find each other” and claim their tribe. “Relationships” make the world go round and online it’s no different.

Step 3 – Give people something to do.

Provide a path for participation so lurkers as well as early adopters can be engaged at the level of effort that is appropriate for them. Things like ratings (“1-5” or “thumbs up“) are easy ways to get low participation people involved by letting them quickly register their opinion with little effort.

Thumbs up and down ratings for restaurants on GoodRec let people quickly register their opinion with little effort
Thumbs up and down ratings for restaurants on GoodRec

Allow them to “share items” they find interesting with their friends or family and “curate and collect their favorites“. The latter requires a little bit more effort, but lets your users have ownership over what they find meaningful.

Flickr allows users to “favorite” images they like and collect them for display to others.
Flickr allows users to “favorite” images they like and collect them for display to others.

At the other end of the spectrum is full authorship of content with “reviews“, “comments“, “blog postings“, and “wiki entries” all the way through to participation as a moderator or guide in your service.

Wikimedia allows collaborative editing of content on sites built with the software.
Wikimedia allows collaborative editing of content on sites built with the software.

Start simple, with light features, and gradually add more complexity if it is really needed. Keep the structure flexible enough for your users to mold and adapt to their needs. In the book, we discuss several principles related to this including “Deliberately Leave Things Incomplete“, which reminds designers to allow features to emerge from the community behavior rather than forcing behavior to fit the UI and “Strict vs. Fluid Taxonomies” which merges a strict taxonomy like your site navigation with user generated groupings and organization with features like Groups, Message Boards, Tagging, etc.

Allowing behavior to guide your features and giving your users ownership of the structure make the site much more personal for them which in turn encourages repeat and longer term usage.

Step 4 – Enable a bridge to real life (groups, mobile, meetings, face-to-face).

Don’t be afraid to build in tools that allow your users to bring their community into the real world. In many online groups, a majority of people know each other personally.

Upcoming shows local events and allows people to add events to their calendar and view events their friends are interested in.
Upcoming shows local events and allows people to add events to their calendar and view events their friends are interested in.

Providing tools to help plan face-to-face meetings and then archive those happenings will strengthen your site and the community. Consider incorporating “geo” features like “GeoMapping“, and “GeoMashups“.

Additional features might entail creating “subspaces (groups)” and coordinating real time “face-to-face meetings” and gatherings among users of your service.
Meetup lets people affiliate with groups of interest and the site helps coordinate real life - in person meetings and gatherings between members.
Meetup lets people affiliate with groups of interest and the site helps coordinate real life – in person meetings and gatherings between members.

Step 5 – Gently Moderate. Let the community elevate people and content they value.

This can be through simple things like ratings or “reputation labels“.

Reputation labels on the intranet at Yahoo!.
Reputation labels on the intranet at Yahoo!

The community can help you surface contributions of quality which in turn should help attract future participants and will help keep the interactions lively. This process also helps push bad quality content down and out of sight.

Keep an eye on the community, participate yourself, welcome people as they join, set yourself up as a role model.

Hunch founder, Catarina Fake, acts as a role model for the community being built on the site.
Hunch founder, Catarina Fake, acts as a role model for the community being built on the site.

Notice who is passionate and who is potentially causing trouble. Conversations should run their course. Let the “community moderate itself” and provide tools to allow them to do that, like allowing them to mark content as spam or block trolls or “report abuse“. Step in only when necessary.

Report Abuse is available on every comment in Yahoo! Answers and allows users to moderate the content quality.
Report Abuse is available on every comment in Yahoo! Answers and allows users to moderate the content quality.

Make sure people are aware of the “terms of service” and “license” implications of content they create – both as it relates to your site as well as what they can permit others to do with their content.

Go out and get started

These are a few of the things to consider when building a social application or when adding social features to an existing site. There are a lot more features and concepts available within the social ecosystem but these should get you started and will build a good foundation from which more robust and complex features can be added to.

It is important to remember that you don’t have to do it all at once. You can apply features sparingly and let the community tell you when you need to expand. Consider the bare minimum while fleshing out your infrastructure. Add complexity as your community grows and scales. Remember that you are building a container for activity and conversation and that you don’t have to have everything figured out. The people will create their own paths of interaction making their own meaning and experience.

Integrating Prototyping Into Your Design Process

by:   |  Posted on
Just like with any other UX research or design tool, context plays a critical role in determining how effective prototyping will be for you.

Prototyping is a big deal right now. We get wrapped up in mailing list threads, new tools are released at an astonishing pace, books are being published, and articles show up on Boxes & Arrows. Clients are even asking for prototypes. But here’s the thing… prototyping is not a silver bullet.

There is no one right way to do it.

However, prototyping is a high silver content bullet. When aimed well, a prototype can answer design questions and communicate design ideas. In this article, I talk about the dimensions of prototype fidelity and how you can use them to choose the most effective prototyping method for the questions you need answered.

The dimensions of fidelity

A prototype’s fidelity has the most influence over its effectiveness. Fidelity simply refers to how realistic the prototype is. Most of the time when we talk about a “high-fidelity” prototype we are referring to a prototype that has some visual or industrial design applied to it. But that leaves out what’s most important to UX designers, what it’s like to actually work with the prototype!

Fidelity is multidimensional.

Not only can you have a prototype that looks like a realistic product, but you can also have a prototype that works like a realistic product. I call these dimensions of fidelity “visual fidelity” and “functional fidelity.” By varying your prototyping methodology along these two dimensions you can ensure that your prototyping effort is successful given your particular context. Let’s take a look at some examples.

version w/ arrows

A prototype can be as simple as a series of hand-sketched wireframes that flow together. This is a good example of a low visual fidelity prototype. These wireframes show layout and functionality but have no visual design. Take the same wireframes, integrate a visual design, and your prototype has a high visual fidelity. While you might think of them as being similar, these two prototypes are most effective in two different situations.

That same series of sketches is also a low functional fidelity prototype. Moving through screens drawn on paper is much different than working with the developed system. But if you render those sketches in HTML, JavaScript, & CSS, they have a high functional fidelity. Working with an interactive prototype is very similar to working with the developed system. Again, high- and low-fidelity prototypes are most effective in two completely different situations.

After spending all this time talking about fidelity, I want to share one of my favorite quotes on prototyping. Bill Buxton said this in his Interaction08 keynote:

There is no such thing as high or low fidelity, only appropriate fidelity.

Appropriate Fidelity

“Appropriate fidelity” refers to a level of prototype fidelity that allows you to achieve the goals you’ve set for doing a prototype in the first place. By varying the fidelity of your prototype along the dimensions of visual design and functionality, you make your prototype more effective at achieving some goals and less effective for others.

bottom left Low Visual and Low Functional Fidelity

Very low fidelity prototypes are extremely useful to UX designers. Why? They can be made swiftly, changed without repercussion, and still help visualize a concept. Low visual & functional fidelity prototypes are helpful at answering large structural questions. Here are some examples:

  • Does the system have all the features required to support the user’s goals?
  • Does the workflow make sense at a high level?
  • Which UX concept works best?
  • Coming to consensus on a UX concept with stakeholders, e.g.“Is this what you meant?”

bottom right Low Visual and High Functional Fidelity

In my own practice, this is the type of prototyping I do most often. What I make are interactive, HTML interactive wireframes. Everything is black, white, and gray, but the interactions are extremely close to what they’d be in the developed system. These types of prototypes are effective in many situations:

  • Evaluating the usability of proposed designs for new systems
  • Exploring isolated interactions as a proof-of-concept
  • Validating UX design direction with stakeholders
  • Validating the implementation of requirements with stakeholders
  • Supplementing printed documentation for development teams
  • Performing remote testing

Remote testing has become more and more important over the last several years. At Evantage, we do approximately 75% of our user testing remotely. It would be difficult for us to get good data about our designs for modern, highly interactive sites if we were limited to representing those designs using low-to-medium functional fidelity prototyping techniques such as clickable PDFs or interactive PowerPoint presentations.

By prototyping isolated interactions at a high functional fidelity and testing them with users, I can get really good data about whether that interaction works before I base an application around it…. If those ideas are actually pretty slick, I can release the design with confidence instead of with gritted teeth.

I also want to expand on proof-of-concept testing. This technique supports creativity and innovation. By prototyping isolated interactions at a high functional fidelity and testing them with users, I can get really good data about whether that interaction works before I base an entire application around it. This allows me to explore my crazy ideas and find out if they are, in fact, crazy. But if it turns out that those ideas are actually pretty slick, I’ll know that and can release the design with confidence instead of with gritted teeth.

top left High Visual and Low Functional Fidelity

At first thought, these prototypes may not make much sense. Why bother making something look nice if it doesn’t work? Well, because how something looks can have a huge impact on how easy it is to use. A high visual and low functional fidelity prototype allows you to test that with users. You can print out screen images and do a paper prototype test with them, or you can image map some JPGs and do what I’ve heard termed a “slap and map” test from within a browser.

top right High Visual and High Functional Fidelity

High visual and functional fidelity prototypes are the Rolls-Royce of prototypes. They take more time and effort to build than a lower fidelity prototype and are correspondingly more complicated to manage. Most of the time, this extra cost isn’t worth it. But there are a few situations where it is:

  • Evaluating the usability of proposed UX designs for an existing system
  • Performing usability tests with non-savvy user groups
  • Supplementing printed documentation for offshore development teams

Prototype testing is all about data, right? In the first two situations above, the prototype’s high visual fidelity reduces the confounding factors a wireframey prototype can introduce into test results, thus maintaining the quality of your data. In the third situation, the high visual fidelity helps minimize the design communication and interpretation problems inherent in offshore development.

Integrating Prototyping Into Your Design Process

What I’ve talked about so far has focused on the tactical, on how to prototype effectively to achieve specific goals. What I want to talk about now is more strategic. How can you integrate prototyping effectively into your design process?

First off, do what you’d do to begin any organizational change. Start small. Find a small project, express the value of prototyping and your interest in doing it, and do it. It would be best to start with something richly interactive though, as prototyping is more crucial the more interactive a system is. Of course, make sure you use a prototype of the right visual and functional fidelity for your purpose.

People like shiny things that move. The cool factor of prototyping will be difficult to resist.

As you near completion of the prototype, make sure you walk through the prototype with the project’s stakeholders. Ask them if something like this was what they had in mind. This will impress them on two levels. First, people like to feel important, and you’re soliciting their opinions. Second, people like shiny things that move. The cool factor of prototyping will be difficult to resist. When these stakeholders are involved in future projects, it’s very likely they will actually request a prototype as a result of their first experience with you.

Once you get buy-in, you can start integrating prototyping into your process. But just like different methods of prototyping are more effective for answering certain questions, different business contexts call for different ways to integrate prototyping.

Corporate, Agile, Mature UX Practice

This situation is fast-paced and iterative, but as an employee (as opposed to a contractor or consultant) you have the opportunity to own the UX of your company’s products. In this situation, there are three points in the design process that prototyping can be of benefit.

  • Low visual and functional fidelity prototypes can help select good UX concepts from several that you develop at the beginning of a project.
  • High functional fidelity proof-of-concept prototypes can help develop those concepts into usable designs.

You can work with a dedicated prototyper to build a separate prototype using code that can be reused in the production system to build efficiencies into an Agile process.

Corporate, Waterfall, New UX Practice

In this situation, the organization might not be comfortable enough with UX design to support the development of multiple UX concepts. You might just have to begin developing the wireframes and prototypes to meet the organization’s need for documentation and measurable signs of progress. This situation relies heavily on the prototype for communicating and validating direction with project stakeholders, with user testing often not yet being a real possibility. Here’s how prototyping can help:

  • High functional fidelity prototypes can help you communicate better with stakeholders and get their input on your direction
  • These prototypes should also be used for user testing, if at all possible.
  • Walk through the interactive prototype at the same time you walk through the printed documentation for the developers during handoff.

Consulting/Agency

When doing UX design for an external client, a lot of the magic is worked behind the scenes. The result is a process that is relatively unencumbered by internal politics. The challenge is to convey the importance of iterative prototyping to clients who sometimes feel like they’re paying for the same thing twice.

  • Sketch two or three of your design concepts into simple, low visual and functional fidelity prototypes and test them to decide which to go with. At this stage, testing can be very informal and done with anyone capable of putting themselves in the user’s shoes (e.g., other UX designers, customer service staff, or product managers who used to be users).
  • Build a small interactive prototype that shows the critical interactions, walk through it with stakeholders to validate your direction, then test with users.
  • Revise the prototype based on the test results, flesh it out to support more holistic tasks, and test again.
  • Revise the prototype and use it to supplement the paper documentation as you walk through both with the development team.

Just like with any other UX research or design tool, context plays a critical role in determining how effective prototyping will be for you. If you follow the simple guidelines above and prototype to an appropriate level of fidelity for your context, you will achieve your goals and improve your design. No firearms required.