Chapter 14. One of Us, One of Us
“I used to think of all the billions of people in the world, and of all those people, how was I going to meet the right ones? The right ones to be friends, the right one to be my husband. Now I just believe you meet the people you’re supposed to meet.”
Friendship is born at that moment when one person says to another: “What! You, too? Thought I was the only one.”
Relationships
Having a group of people to hang out with, communicate with, and participate with is key to the successful social experience. One of the worst problems is to show up somewhere and find you’re alone. The ability to find friends and make them a part of your circle for participation is one of the key interactions to design when building a social site. The first impulse is to simply import all contacts from the variety of address books a user may have. This process, like casting a large net into the ocean and hoping for the best, doesn’t help filter out meaningful relationships. Not all contacts are equal. I may have my aunt and my accountant in my address book, but I don’t necessarily want them as friends on Facebook.
The strength of ties in relationships and the type of site and network being encouraged all need to be considered when offering ways for users to build relationships. Additionally, the context surrounding these relationships needs to be considered when developing the circles of friendship.
Is the friend-of-a-friend potentially more helpful than the people I may know directly, like on LinkedIn, where that second- or third-degree connection may be the key to the next job?
Is the site a broadcast-type site, like Twitter, where following what a person has to say is more important than actually knowing him in real life?
Is knowing a person in real life important, like having a small circle of trusted friends to share family photos with on Shutterfly or using a site like Centerd to plan an evening out with the group?
The patterns in this chapter look at the ways to find and add friends to a user’s network and the considerations you must make when creating the framework for relationships. The framework must equally take advantage of weak ties and strong ties; it must allow users to change their minds, back and forth, about following or friending others; and it must be graceful in how the system alerts both the user and the recipient of the follow or unfollow. After all, while the system may be mediating the connection, it shouldn’t cause undue embarrassment or create a social faux pas.
Finally, we look at relationships in the context of groups. In these cases, the topic of interest is often the driving factor for belonging and the relationships people grow over time.
Find People
The user wants to find people she knows so she can connect and interact with them on a site or social web service (Figure 14-1).
Use when
Use when you want to help users find people they care about who may already be using this site.
Use to expand user’s circles of connections beyond friends and family.
Use to encourage connections after the initial network-building exercise.
How
Provide a variety of ways for users to build out their connections.
Browsing for people
Allow users to browse friends of friends.
Consider presenting a user’s friends and connections in a graphical grid that shows avatars, and allow others to browse through to their profiles. Provide visual clues to a person’s identity (via the avatar) to help confirm that person’s identity (Figure 14-2, Figure 14-3, Figure 14-4, and Figure 14-5).
Searching for connections
Allow users to search for friends within the network on your site.
Provide a keyword field. Clearly indicate what terms are accepted in the search query—name, email, or other identifying factors.
Facebook allows users to constrain a search by known information about the user. For example, users can search for people from their high school or college graduation years, or from companies they have worked for recently (Figure 14-6). Constraining the search in this way increases the likelihood of finding people a user really knows.
Finding friends from email, IM buddy list/contacts, and other networks
Allow the user to import contacts from his address book or instant messenger lists to use as a comparison list to find people already using the service.
Allow users to import their connections from Facebook using Facebook Connect.
Allow users to import their connections from Twitter using OAuth.
Compare known data points—name, email address, or other reliable information— and then present to the user a list (with images for ease of identification) of relevant people who also use the service.
Allow the user to select one or more names to make them connections.
If reciprocity is required, present the message that will be sent to the user and the option to send the request for connection or an option to cancel the request (see Adding Friends in Adding Friends).
When bringing in people lists from an address book or address book service for a user to connect to, don’t automatically spam the user’s contacts asking to connect.
Don’t automatically spam the rest of the user’s contacts with invitations to join the service.
Discovery/recommendations
Consider presenting people the user may know as potential connections (Figure 14-7).
Use known connections and friends of friends to extrapolate potential connections for users.
Why
Having a circle of connections and friends is what makes the Web social. Building a network of connections is hard, and as more time goes by, becomes overly redundant as a user moves from site to site. Providing easy mechanisms for finding people and building their networks will encourage repeat use and prevent social-networking burnout.
The easiest way to create a network upon joining a new site would be to bring your network with you. Although there are some contexts that may be very specialized and need only a small subset of people a user knows—for example, a fantasy sports site—for the most part, many current and future social sites are generalized enough that the network the user built on site A will be the same network of connections she wants on site B.
The social graph, the network of people the user has built around herself (Figure 14-8), wants to be portable. There is a growing movement encouraging openness (http://bradfitz.com/social-graph-problem/), just like with OpenID. The idea is to create a data standard that allows users to easily bring their network from one site to another without all the work involved in finding people and adding them into the network at each site.
The logistics are far from resolved, but as new sites are being developed, being aware of this initiative and designing new sites and using data structures that play nice will encourage interplay between sites and help the users out in the long run.
Related patterns
Adding Friends in Adding Friends
Sign-up or Registration in Sign-up or Registration
As seen on
Facebook (http://www.facebook.com)
Flickr (http://www.flickr.com)
LinkedIn (http://www.linkedin.com)
myBlogLog (http://www.mybloglog.com)
Plaxo (http://www.plaxo.com)
Twitter (http://www.twitter.com)
Upcoming (http://upcoming.yahoo.com)
Adding Friends
A user has found people she knows on a social site and wants to add them to her circle of connections (Figure 14-9).
Use when
Use this pattern when:
User connections are a core part of the site’s experience.
Relationships will be confirmed, providing a two-way reciprocal relationship.
Allowing one user to follow another participant without reciprocity.
Ignoring a connection request is allowed.
How
Once a user has found people he cares about on your site (see Find People in Find People), provide an easy way to add these people as connections:
Provide a clear link (a button or text/icon combination) as the call to action to add this person as a friend (Figure 14-10).
Once the person has been added as a Friend, clearly indicate to the user that this person is now a friend (Figure 14-11).
Confirming friendship/two-way connections
Requiring two-way relationships encourages a network that more closely resembles realworld relationships:
Clearly indicate when selecting “add as a friend” that the relationship must be confirmed by the other party before it will be recognized on the site (see Figure 14-12 and Figure 14-13).
Likewise, alert users when a connection request is being made (Figure 14-14, Figure 14-15, and Figure 14-16).
Allow the user to cancel the request at any time.
One-way following (aka asynchronous following)
An alternative to reciprocal relationships is the one-way connection. This type of connection is best used when the content is more important than a personal relationship. This is essentially a subscription to the person’s activities and contributions within the system (Figure 14-17).
Label the action in a way that doesn’t imply an intimate or real-life relationship, such as “friends” or “family.” Instead, use terminology like “Contacts,” “Fan,” or “Follow” (Figure 14-18).
When a connection is made, alert the connected person that a connection has been made (Figure 14-19).
If two parties connect to each other—in a mutual one-way connection—acknowledge the connection (Figure 14-20).
Implicit and explicit relationships
Most social networks require users to make explicit connections and declare their relationships publicly. But there are situations where the implied relationship will do. By subscribing to someone’s blog or joining an interest group, there is an implied relationship between the user and the author of the blog or the person and the group of people involved in the group. The very nature of being involved in the group implies relationships that may or may not be very strong.
Expressing these implied relationships within the interface can help users make explicit connections as well as get a sense of the group they are involved with.
Allow users to become involved without having to explicitly declare relationships, and let the relationships evolve over time.
Fans and fame (aka asynchronous following)
Public websites such as blogs and microblogs (e.g., Twitter), and sites such as Flickr, where the default for photo posts is public, allow their authors to broadcast to the world. Include interactions in the interface that allow users to follow or subscribe to the author or the author’s content. These one-way relationships are often initiated by people who are just fans of the author or their content. “Fan” has an implied difference from “friend,” in that the relationship is usually one-way and there is often little or no direct interaction between the fan and the object of fandom other than consumed broadcasts. (See Figure 14-21, Figure 14-22, and Figure 14-23.)
Allow users to ignore connection requests.
Clearly indicate what the consequences of “Ignore” will be; otherwise, the outcome will be a collection of neglected connection requests living in some sort of perpetual purgatory. Many people won’t actively ignore someone, because it isn’t clear what will happen if they select Ignore. They fear insulting the person who is making the request, even though this isn’t a person they would consider connecting with.
Facebook’s interface offers some good options, but they fall short in setting expectations for the user when the actions are selected (Figure 14-24 and Figure 14-25):
Does the requestor get a message that he is being ignored? If the requestor isn’t notified, then the action is the same as no action.
Does Ignore block this person from requesting a connection again? Or is that what happens with the Block link?
Clearly set expectations for the user about the implications for each action. Add rollover messages to inform the user of the consequences of these actions.
Without setting clear expectations, you are wasting your design and development effort, building a feature that users will be too scared to use for fear of negative social implications.
Why
Allowing users to connect to one another encourages conversations and sharing among networks of people, resulting in viral growth of the site. People want to do things with their friends or with others who have similar interests, and allowing them to connect strengthens these ties.
Related patterns
As seen on
Twitter (http://www.twitter.com)
Facebook (http://www.facebook.com)
Flickr (http://www.flickr.com)
Last.fm (http://www.last.fm)
LinkedIn (http://www.linkedin.com)
Circles of Connections
A user wants to indicate nuances in her relationships with other people. (See Figure 14-26.)
Use to distinguish levels of participation in a person’s network.
Use to set permissions for shared activity and content.
Use to disambiguate real-life versus online and strong versus weak ties.
Use to help users filter which content to consume.
How
Depending on the context of your user experience, levels of granularity in describing connections may or may not be important.
Consider allowing users to classify their connections along a continuum of influence or intimacy.
Clearly articulate what the implications are for each level of classification (Figure 14-27).
Don’t add too many levels, or you risk confusing users about what each level permits. Users need to be able to easily separate what each level allows and how their actions and content will be consumed based on those levels.
Why
Real-life relationships are complex, and context often changes how two people might interact. Online representations of relationships need to be presented in as simple a format as possible to aid in understanding and usability.
Providing mechanisms for users to create relationship groups avoids awkward social situations and puts the user in control of how his actions and data are consumed.
Related patterns
Adding Friends in Adding Friends
“Blocking” on page 374
As seen on
Flickr (http://www.flickr.com)
Plaxo (http://www.plaxo.com)
Publicize Relationships
To promote virality, the system announces, or publicizes, relationships between people (Figure 14-28).
Use when
Use to announce new connections to people in shared networks.
Use to show profile visitors who the person is connected to.
Use to promote connecting by sharing new connections and enticing users to make them as well.
How
As discussed in Adding Friends in Adding Friends, consider publicly showing the group of people a user is connected with (Figure 14-29).
Showing connections in a grid format of avatars is a space-saving way to publicize a person’s relationships.
When a new connection is made, consider announcing the new connection to each person’s network via the activity stream (Figure 14-30 and Figure 14-31).
When visiting a person’s profile, display to the user whether or not she is connected (see Profile in Profile).
Why
Publicizing relationships helps a network grow through friends of friends browsing and connecting.
Announcing new connections to the group lets everyone know who’s there and whom they know. Chances are, someone else in the group knows the new person and may want to connect as well. This is especially useful when the person is new to the service and can help alleviate the cold-start issue of having no connections.
Related patterns
Adding Friends in Adding Friends
Identity Cards or Contact Cards in Identity Cards or Contact Cards
As seen on
Facebook (http://www.facebook.com)
Plaxo (http://www.plaxo.com)
Yahoo! Profiles (http://profiles.yahoo.com)
Unfriending
Relationships online are more ephemeral than in real life, and the desire to add and delete, friend and unfriend, follow and unfollow people is as fluid as people are complex.
What
A user has a collection of friends and then decides he wants to remove a person from his friends or connections list (Figure 14-32).
Use this pattern to allow users to remove connections.
Use this pattern to manage unwanted relationships.
How
Provide an easy way to remove connections without embarrassing the user.
Provide a “Remove” or “Unfollow” call to action button or link near the connection’s name or relationship status.
Clearly indicate the consequences of each action.
Blocking
Allow the option for users to block other users.
Clearly indicate the consequences of blocking a user (Figure 14-33 and Figure 14-34).
Ostracizing
Wiktionary defines ostracize as: “to exclude someone from society or from a community, by not communicating with or even noticing them, similar to shunning.”
danah boyd writes about the Top 8 culture in MySpace and the social ramifications in real-life high schools when someone isn’t added into this special class of friends, which functions as a shunning and ostracizing behavior. (See “Friends, Friendsters and Top 8: Writing community into being on social network sites” at http://firstmonday.org/htbin/cgiwrap/bin/ojs/index.php/fm/article/view/1418/1336.)
Age plays a role in the ensuing drama, so consider your target demographic when thinking about these types of tools or lack thereof on your site.
Some users inevitably will ostracize others. The ability to ignore and block are overt forms of ostracizing, whereas simply ignoring requests for connecting is a more passive behavior. Human behavior indicates that this is a part of group dynamics, and the systems we build need to be flexible enough to accommodate this.
Bozofilter
A “bozofilter” is a filter that allows a user to block email or messages from specific individuals.
Provide the ability for users to filter out specific posts or messages based on the poster or sender. This is especially helpful for blocking trolls and spammers in forums and groups.
Allow the “bozo” to still see his message in context even when others won’t see it. This may help keep the person from creating another account.
Related patterns
Adding Friends in Adding Friends
As seen on
Facebook (http://www.facebook.com)
LinkedIn (http://www.linkedin.com)
MySpace (http://www.myspace.com)
Twitter (http://www.twitter.com)
The Ex-Boyfriend Anti-Pattern
The boyfriend anti-pattern (also known as the ex-girlfriend bug) exists when the social system makes suggestions for connecting, based on friends-of-friends inference, to people who are not desired, such as an ex-boyfriend or ex-girlfriend.
The anti-pattern also presents itself when systems without connections grouping or filtering rely on location awareness and alert a user’s network about where the user is or announces an event to her whole network, regardless of whether the user wanted that to happen (see Mobile and Location in Mobile and Location; see also Figure 14-35 and Figure 14-36).
Consider this: in 2005, the mobile social networking software Dodgeball allowed people to broadcast their location to their network via SMS text messaging to encourage impromptu social gatherings. At first there was only one bucket for friends, but as people began hooking up, dating, and breaking up, there was a very strong need to filter out an ex without totally alienating that person through unfriending or blocking. The founders of Dodgeball called it “the ex-girlfriend bug,” and created a feature called “manage friends” to address the issue. This functionality provides a level of filtering and permissions that allows only certain groups to receive specific updates and announcements. The exes who are on a filtered friends list never know you are in the same neighborhood, and social awkwardness is avoided by not having to “unfriend” them.
To avoid this issue, give your users more control over privacy and broadcast settings, and provide the ability to filter based on groups of people. Allow users to control their communications and information streams through the creation of buckets or circles of connections. This in turn avoids all those potentially awkward social situations (online and in real life) when information about whereabouts or actions appears to the wrong people.
Groups
A user wants to participate with a group of people, usually around a topic of interest (Figure 14-37).
Use when
Use this pattern when:
How
Groups and clubs are generally closed, private networks of people. In many cases they have come together based on a shared interest or topic, such as photography or a school.
Ridiculously easy group formation
Allow the creation of a group on the fly with a list of users.
Allow one person to pull the group together and alert users that they either are invited or are automatically in the group.
Automatically connect each person—in a mesh—and notify all members that the group has been created and they are now connected to everyone else in the group.
Indicate what the benefits are and what activities can take place in the group (e.g., group chat, private communications among the members, shared content, etc.).
Create
Allow users to create both public and private groups. Public groups should show up in search results and have a minimum amount of content that is viewable by the public to encourage joining.
Consider threaded discussion boards as part of the group suite of tools.
Consider an email list or RSS feeds for the discussion boards.
Provide storage space as part of the group for centrally stored images and files.
Allow a minimum level of customization for the group. Consider preset templates to choose from or skinning to create an environment specific to the topic or personality of the group.
Allow group creators to mix and match the tools needed/wanted for the group.
Consider a variety of group tools depending on the needs of the group. These might include photo albums, calendars, events, address books, maps, bookmarks, RSS feeds, discussion lists, polls, etc.
Finding groups
Allow users to browse or search through public groups.
Provide a “Join this group” call to action from within search results, as well as from the main group details page.
Each group should have a home (details) page that describes what the group is about. Users should see enough information to make an informed decision about joining the group.
Consider displaying an indication of activity level of the group (Figure 14-38).
Provide a member list or roster of members.
Allow users to browse the list of groups that is displayed on a friend’s profile.
Participation
Allow users to post and share images among group members.
Allow users to post and share files among group members.
Consider allowing members to invite other potential members to join the group.
Allow users to build a contextual profile (see Profile in Profile) that is built with participation and group activity.
On a user’s home page or dashboard, provide a list of groups the user belongs to.
Provide indication of recent activity in a group on the user’s dashboard (Figure 14-39).
Allow the group creator to assign administrative duties to other members.
Allow the group creator to assign moderator duties to other members.
Allow the group creator to assign group ownership to other members. This is especially helpful if the original owner wants to leave the service but wants to allow the group to continue without her future involvement.
Provide tools for managing and deleting spam.
Allow admins, moderators, and group owners to kick out members who violate the group rules.
Allow admins, moderators, and group owners to block users from posting if the group is public.
Provide an option for membership approval.
Allow admins, moderators, and group owners to invite members.
Related patterns
As seen on
Facebook (http://www.facebook.com)
Flickr (http://www.flickr.com)
Google Groups (http://groups.google.com/)
Multiply (http://multiply.com)
Yahoo Groups (http://groups.yahoo.com)
Further Reading
“Friends, Friendsters and Top 8: Writing community into being on social network sites,” by danah boyd, 2006, http://firstmonday.org/htbin/cgiwrap/bin/ojs/index.php/fm/article/view/1418/1336
“Friends May Be the Best Guide Through the Noise,” by Brad Stone, The New York Times, May 4, 2008, http://www.nytimes.com/2008/05/04/technology/04essay.html
Six Degrees: The Science of a Connected Age, by Duncan J. Watts, W.W. Norton and Co., 2004
Social Network Analysis: A Handbook, by John P. Scott, Sage Publications Ltd., 2000
The Strength of Weak Ties: A Network Theory Revisited, by Mark Granovetter, State University of New York, Stony Brook, 1983, http://www.si.umich.edu/~rfrost/courses/SI110/readings/In_Out_and_Beyond/Granovetter.pdf
“You are who you know,” by Andrew Leonard, Salon, June 15, 2004, http://dir.salon.com/story/tech/feature/2004/06/15/social_software_one/index.html
“You are who you know: Part 2,” by Andrew Leonard, Salon, June 16, 2004, http://dir.salon.com/story/tech/feature/2004/06/16/social_software_two/index.html