Designing Social Interfaces, 2nd Edition

Chapter 4. Where’s the Rest of Me?

We all perform. It’s what we do for each other all the time, deliberately or unintentionally. It’s a way of telling about ourselves in the hope of being recognized as what we’d like to be.
—RICHARD AVEDON

THE CORE AROUND WHICH social sites revolve is people—who they are, how you know them, what they are contributing. People and their presentations of self and their contributions make for a rich and intertwined community. Without understanding who you are, your friends won’t know you. Potential connections won’t trust what you say or be encouraged to connect to you. You won’t be able to recognize your friends in the crowd of participants, and you won’t necessarily trust new people if you don’t have some way of formulating a picture of who they are.

The work that goes into defining themselves as well as building connections is often a significant hurdle for users who want to try a new site. Thus, having a well-established identity and network on one site is a considerable deterrent for switching to other sites. Help your users by automating as much as possible; aggregating activity such as comments or reviews and presenting user status streams of connections creates a rich and interesting default without requiring much work from your users.

There is a growing belief that a person’s identity belongs to him and not to the software or service in which the data has been created. The proliferation of socially enabled sites that do not interoperate means people must re-create themselves at each and every site they go to. In some cases, this isn’t an issue, because the context of the community often dictates what persona to present. But for many users, the facets of themselves that they would like to present to others just aren’t significantly different from site to site.

The success of Facebook Connect—allowing people to use a single set of authentication credentials for multiple sites and applications—has been so huge in part because of shared identity information which encompasses the rich data set that describes a person and by which other people come to know that person.

The collection of patterns in this chapter addresses the various interfaces that present personal and activity information about a person to others. They make up the components that might be considered a user’s brand: the image that he projects to others that then creates a perception of him. This includes the profile, the personalization of that profile; how a user’s contributions are attributed to him and what control is available for that; the avatar; what information is private; where a user can manage all these pieces of information; and the personal dashboard, where a person see what’s happening across his network of connections. The profile should be mixed together with attribution presentation, contact cards, and other public information to create a personal and rich people-centric experience.

The profile and the presentation of a person, whether automated through activity or customized by the individual, is how you get to know someone; it gives your users the opportunity to express whichever side of themselves they are comfortable sharing with the world.

Identity

User identity and the ability to control its presentation is a core element of building a social website. The ability to create and manage an identity within the context of the site is the foundation upon which the rest—contributions, relationships, reputations—is built. It’s about people and who they portray themselves to be.

When thinking about these topics, be aware that providing the ability for users to define their names is just step one in helping them craft their identities. As discussed in Sign-Up or Registration, allowing the user to create a nickname (rather than be saddled with some horrid identifier he got because the namespace was full) is one of the best design decisions you can make. Wouldn’t you rather be known as “jack of all design” rather than “jack089”?

There are several other items that make up an identity for the user. These include Profile, Avatars, Reflectors, and Attribution. Associated with these patterns are a user’s reputation and his connections.

When deciding what to pull together, be aware that you don’t need every piece, and that you can start with some elements and add others as needed.

Here are some points to consider across all the patterns in this chapter:

Let your users be expressive where it matters. For example, Figure 4-1 shows how profiles on About are much more expressive and reflect its more personal approach, whereas profiles on LinkedIn are barely customizable and reflect the professional nature of the interactions (Figure 4-2).
Figure 4-1. A customized About profile (http://about.me).
Figure 4-2. One of the author’s LinkedIn profiles (http://www.linkedin.com).
Give users control over how to present themselves. Users should own their actions and have a reputation attached to their identities, but the option to stay anonymous should be offered in some instances.
Let your users decide who sees what parts of their profiles, as demonstrated in Figure 4-3. Give enough control and permissioned access. Do my friends see my birth date, or does everyone? If it’s everyone, be prepared for a lot of fake data.
Figure 4-3. The privacy settings on Facebook (http://www.facebook.com) for parts of a profile.
Be clear on reflecting back to users what they see as editors/owners versus how others see them. The dating sites have this idea down to a science, but on many other websites, who sees what isn’t clearly articulated.
Clearly communicate the privacy policies around the information users add as part of their profile; for example, which items will be seen or not, and which will be used anonymously in aggregation as part of the business data.
Having robust identity solutions won’t alleviate sock puppets (see Sock Puppets) and alternate identities that people might create.

One of the most misunderstood patterns in social media design is that of user identity management. Product designers often confuse the many different roles required by various user identifiers. This confusion is compounded by using older online services, such as Yahoo!, eBay, and America Online, as canonical references. These services established their identity models based on engineering-centric requirements long before we had a more subtle understanding of user requirements for social media. By conjoining the requirements of engineering (establishing sessions, retrieving database records, etc.) with the user’s requirements of recognizability and self- expression, many older identity models actually discourage user participation. For example, Yahoo! found that users consistently listed that the fear of spammers farming their email address was their number one reason for abandoning the generation of user-created content, such as restaurant reviews and message board postings. This ultimately led to a very expensive and radical reengineering of the Yahoo identity model.

Consistently I’ve found that a tripartite identity model best fits most online services and should be forward-compatible with current identity-sharing methods and future proposals.

The three components of user identity are the account identifier, the login identifier, and the public identifier.

Account identifier (DB Key)

From an engineering point of view, there is always one database key—one way to access a user’s record and one way to refer to them in cookies and potentially in URLs. In a real sense, the account identifier is the closest thing the company has to a user. It must be unique and permanent. Typically this is represented by a very large random number and is not under the user’s control in any way. In fact, from the user’s point of view, this identifier should be invisible or at the very least inert; there should be no inherent public capabilities associated with this identifier. For example, it should not be an email address, accepted as a login name, or displayed as a public name or as a status in an instant messenger address.

Login identifier(s) (Session Authentication)

Login identifiers are necessary to create valid sessions associated with an account identifier. Logins are the user’s method of granting access to his privileged information on the service. Typically, these are represented by unique and validated name/password pairs. Note that the service need not generate its own unique namespace for login identifiers, but may adopt identifiers from other providers.

For example, many services accept email addresses as login identifiers, usually after verifying that the user is in control of that address. Increasingly, more sophisticated capability-based identities are accepted, such as OpenID and Facebook Connect, which provide login credentials without constantly asking for a name and password.

By separating the login identifier from the account identifier, it is much easier to allow the user to customize his login as the situation changes. Because the account identifier need never change, data migration issues are mitigated. Likewise, separating the login identifier from public identifiers protects the user from those who would crack their accounts. Finally, a service could provide the opportunity to attach multiple different login identifiers to a single account, thus allowing the service to aggregate information gathered from multiple identity suppliers.

Public identifier(s) (Social Identity)

Unlike the technically required account and login identifiers, the public identifier represents how the user wants to be perceived by other users on the service. Think of it like clothing or the name by which people know you. By definition, it does not possess the technical requirement to be 100 percent unique. There are many John Smiths of the world, thousands of them on Amazon.com (http://amazon.com), hundreds of them write reviews, and everything seems to work out fine.

Online, a user’s public identifier is usually a compound object: a photo, a nickname, and perhaps age, gender, and location. It provides sufficient information for any viewer to quickly interpret personal context. Public identifiers are usually linked to a detailed user profile, where further identity differentiation is available: “Is this the same John Smith from New York who also wrote the review of The Great Gatsby that I like so much?” or “Is this the Mary Jones I went to college with?”

A sufficiently diverse service might want to offer multiple public identifiers when a specific context requires it. For example, when playing wild-west poker, a user might prefer to present the public identity of a rough-and-tumble outlaw or a saloon girl without having that imagery associated with his or her movie reviews.

F. RANDALL FARMER, ROSENFELD MEDIA

Profile

The profile is one of the core pieces of a social offering. It becomes the face of the user in your system. Profiles can be an expressive place for users to create a “voice” or “image” of how they want to be seen in the context of your site. Depending on the nature of your site, they can be a hub around which relationships and activities revolve. In many services, profiles are often an aggregate representation of all the activity of a user and her friends.

What

Users want a central, public location from which they can display all the relevant content and information about themselves to others—both those they know and those they don’t (Figure 4-4).

Figure 4-4. One of the author’s profile on Facebook, for both mobile and web (Facebook iOS application and http://www.facebook.com).

Use when

Your site/app encourages a lot of user-generated content and you want one place to show a specific user’s contribution.
Your service encourages relationship building.
You want to provide users with a means to look up another user to learn more about her.
You want to give users the ability to express their personalities.
You want users to share information about themselves with others.
You want to present a user’s activity stream (such as status alerts) from site and/or Internet activity.

How

Core profile

Provide the user with the tools to customize his display name or provide a nickname option.
Consider collecting both a first and last name, but also accommodate a display name, which can be a handle, a nickname, or the user’s name. Let it be his choice. The full name is shared with connections, which then disambiguates who a person might be, especially if his associated image is an icon or an avatar.
Don’t make the display name the same as the user login. Doing this gives phishers and other nefarious persons half of a user’s login information. You should provide a safe place for people to connect, and guarding their login and personal information is critical.
Give users options to select which items they want seen by the public and which they want to keep private or just between “friends,” as shown in Figure 4-5.
Figure 4-5. Flickr (http://www.flickr.com) gives users the options to designate what is seen by whom when an item is uploaded.
Give users the opportunity to customize portions of the profile. The profile is a form of self-expression. About profiles represent one extreme of this. LinkedIn and Facebook profiles are much more rigid in their customization, restricting it to text, an image, and the user’s activity to differentiate and define a person’s personality.
Don’t force the user to publicly display all her information.
Collect only the amount of information necessary for meaningful relationships or community activities. Don’t force the user to fill in all fields or data sections in order for the profile to be displayed.
Give the user the ability to upload one or more of her images, such as shown in Figure 4-6).
Figure 4-6. With both Google+ and Facebook, users can upload multiple images to use for the profile. The user can swap them in and out whenever she pleases quite easily (http://plus.google.com and http://www.facebook.com).
Provide a view into the profile as a user’s network will see it.
Provide a view into the profile as the public—not connections—will see it.

Profile preferences and updating

Profile preferences should be readily available to the user who owns the profile. If the user is logged in, present a large, easy-to-find link to edit the profile.
One of the tough decisions to make is whether any elements of the profile are tied to the account and not editable.
The data fields selected for the profile should be individually editable, with as many elements as possible pulled in automatically (if applicable). Data for the profile is often gathered by presenting a series of questions and then filling out a series of forms and free-text fields.
Collect information for the profile data entries through site activity if possible.
Always provide a mechanism for the user to go back and change information later, but don’t force profile completion if this is unnecessary to the core site experience.
Encourage profile completion by giving users clues that indicate how complete their profiles are or by using defaults (e.g., a default avatar) that encourages customization, but don’t force completion if it isn’t necessary for a good user experience.
If possible, give the user the ability to migrate profile content, a profile image, nickname, and core personal information from other services using the OpenSocial API.
Use WYSIWYG + lightweight edit links, as depicted in Figure 4-7.
Figure 4-7. LinkedIn (http://www.linkedin.com) has light inline-edit controls, seen only by the profile owner, on each module of the profile.
Wherever applicable, the profile page displayed to the user should be as close as possible to what the consumers of the profile will see. The owner of the profile should be able to get an accurate sense of what others will see without the need to preview the profile.
The differences between the consumer’s view and the owner’s view are typically limited to additional “Edit” links that point to forms for updating content.
Profiles that include a lot of permissioned content might include permissions indicators for denoting public versus permissioned versus private content. Robust profiles also might include controls for inline editing as well as drag-and-drop handles that appear on hover.
When the owner of the profile selects a link to his profile, load the profile page in Edit mode, not Preview mode.
Don’t overload the profile page with content management options for the content owner.
Do provide a separate “control panel” for the owner to manage his content.
Do provide a separate Updates/Status Consumption Environment so that the owner of the relationships can keep tabs on the content generated by related people.

Private information

Some of the information that might be collected in an account profile is private, such as a phone number or email address.
Ensure that information tied to the account, such as passwords, password retrieval questions, credit card information, and other financial and personal information, stays in a private area that is accessible to only the account holder.
Keep private information in an Account area, separated from the Profile display.
Offer the option to make private information public to only those people in the closest circles of connections, such as family or close friends (see Figure 4-8 and Figure 4-9).

Figure 4-8. Privacy settings in Blobix. Users can adjust both location and contact capabilities (Blobix iOS application).

Privacy settings in Skype are display only. The system informs the user as to who can see which pieces of information but doesn’t actually allow the user to change the setting. This is especially disturbing when the system defaults some private information to public display.

Figure 4-9. Privacy settings in Skype are display only. The system informs the user as to who can see which pieces of information but doesn’t actually allow the user to change the setting. This is especially disturbing when the system defaults some private information to public display.

Profile decorating

Many sites that revolve around the profile, such as About (Figure 4-10), encourage profile decorating as part of the profile owner’s personal expression. Self-expression is a key component of the experience and has a direct impact on the perception of the creator, as much as any other type of content she might upload. Even experiences such as LinkedIn and Twitter have included the ability to add background images to personalize and differentiate the profile, although none of them affords as much customization as the MySpace of old.

Figure 4-10. The profile on About offers users the option to add colors, images, and full-screen background images (http://about.me).

Contrast this to more task-oriented sites such as LinkedIn or Facebook, for which the content and interactions among people are considered primary, and the interface exists mainly as a means to house these. When developing a profile system, think about what is important to your users, their goals on your site, and how important the profile and self-expression might be in that context.
To encourage adoption, offer easily applied skins; that is, the ability to upload background images and custom layout options.
For more personalized profiles or for a younger audience, offer add-ons such as stickers, mini-avatars, furniture, or props for expanded expression opportunities.
Give advanced users the means to do more customization, such as CSS and HTML, but be willing to have a wide variety of quality in the system.
Provide users with a way to add different content modules or applications on an à la carte basis.

Profile claiming

Some sites might automatically create a bare-bones profile for a person and then allow that user to claim ownership of it.
An unverified or unclaimed profile may exist for a user through several methods (comment contribution, a friend’s invitation, etc.).
Users leaving anonymous comments or other anonymous content might want to eventually claim ownership of that content to build their reputations as contributors.
Users may have skeletal profiles made for them when their friends join the site and invite them to participate.
Provide a way for an invited user or owner of anonymous content to easily claim her profile or aggregated content. Dropping an encoded cookie is one way to facilitate later retrieval of anonymous content.
Verification of some data string (such as a verified email address) can pair a premade profile with the intended user.
Regardless of the technical method for allowing this, make sure it’s easy, unobtrusive, and not creepy. A few years ago, Yahoo! released a profile experiment called Mash, where users could make profiles for their friends and then invite them to come claim the profile. Many people didn’t understand why there was already content on “their” profile page and why people other than themselves could edit it. It was a fun experiment if you “got it,” but confusing and creepy for everyone else.

Faceted identity

Users are quite skilled at slicing their identities up depending on the context of interaction. For example, who you are in your family is different than the slice of yourself you present at the office. Online it’s no different. See Figure 4-11, Figure 4-12, and Figure 4-13.

Figure 4-11. A sports-contextual profile on Strava mobile application (Strava iOS application).

Figure 4-12. A books-contextual profile on goodreads.com (http://goodreads.com).

Figure 4-13. And finally, a location-contextual profile on Findery (http://www.findery.com).

Consider the context of your experience and cater the profile to it.
Whenever possible, keep the core user identity information consistent—username, gender, location—through the use of a central design solution. All other information should be collected or automatically aggregated based on the activities of the site.

Recommendations

Use the emerging common profile/identity fields as defined in the OpenSocial spec (http://bit.ly/1Jo9hK6). Select the data items that are meaningful to your context and disregard the rest, but be consistent in the field labels and how the information is stored. This will ensure future portability for your users and will make it possible for you to import data from other sources when a user joins. The goal is to let the user bring her data (where applicable) with her around the Internet rather than forcing her to rebuild a profile every time she signs up for something new.

Considerations

The type of information collected and presented shapes a picture of the user and sets a tone for your site. For example, LinkedIn collects professional information about current and past work experience (refer back to Figure 4-2). Profiles are supplemented by the addition of recommendations from other users and applications from third-party developers. Facebook has a series of free-form fields, but as Figure 4-14 illustrates, it also a robust section of past school attendance. Given that Facebook started as a university social network, this is appropriate. It has since expanded its profile to also include work experience and applications from third-party developers.

Facebook () has a robust area for collecting school information. School affiliation is one of the ways that Facebook creates networks of people with similar backgrounds.

Figure 4-14. Facebook (http://www.facebook.com) has a robust area for collecting school information. School affiliation is one of the ways that Facebook creates networks of people with similar backgrounds.

Dating profiles such as Tinder, OkCupid, HowAboutWe, and others revolve around the profile, so the information collected about the user’s marital status, the types of relationships the user is seeking, and interests such as music and video are appropriate in this context (see Figure 4-15 and Figure 4-16).

Figure 4-15. OkCupid’s profile asks for a series of things related to dating, including demographic details looking for sexual orientation, relationship status, and other things that would not be appropriate in other contexts (http://www.okcupid.com and OKCupid iOS application).

How About We, another dating service, asks for similar information but displays it in an entirely different manner (HowAboutWe iOS application).

Figure 4-16. How About We, another dating service, asks for similar information but displays it in an entirely different manner (HowAboutWe iOS application).

Each of these social networks uses specific profile data to give users an idea of its social emphasis and the community that exists on the site.

Open questions

As the various entities such as Facebook, Twitter, LinkedIn, and Google put forward open standards for the profile and a user’s identity, making a decision about which protocol to adopt becomes increasingly important. Most of the large players in the space have adopted and are participating in the OpenSocial standard. Following this standard, or being compatible with it, will make your users’ data more accessible to them in the long run.

Making a decision to go against the emerging standards might be interesting to you in the short term, but it might have negative ramifications in the long run as more and more users of services demand the ability to carry their data back and forth between sites.

Why

A central profile for your service is the hub around which relationships and other activities can revolve. Carefully selecting the data fields that make sense for your site will ensure that the profile has meaningful context to your users. Providing customizing features will encourage personalization and ownership of the profile and the site, which in turn supports longer-term usage.

Related patterns

Attribution

Identity Cards or Contact Cards

As seen on

Facebook (http://www.facebook.com)

LinkedIn (http://www.linkedin.com)

OkCupid (http://www.okcupid.com and OkCupid mobile application)

HowAboutWe (http://www.howaboutwe.com and HowAboutWe mobile application)

Strava mobile application

GoodReads (http://www.goodreads.com)

Testimonials (or Personal Recommendations)

Testimonials are endorsements that can provide information about a person or about aspects of the person’s interests or skills, such as those shown in Figure 4-17. This can help round out a profile and provide alternative perspectives.

Figure 4-17. Testimonials or Recommendtions in Linkedin (http://www.linkedin.com) are presented in the profile and can help shape the perception of that person.