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. 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 1-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 1-2).
Figure 1-1. A customized About profile
Figure 1-2. One of the author’s LinkedIn profiles
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 1-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 1-3. The privacy settings on Facebook 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 and alternate identities that people might create.
Reflectors
What
A user needs to be able to edit the public identity he is participating under when viewing his profile or creating content (Figure 1-4).
Use when
A user may participate and need a persistent way to get to her public profile.
A user is about to participate and wants to change the display of her attribution.
To help clarify and confirm to a user that he is actually logged in.
Figure 1-4. A simple identity reflector on Findery lets the user know how others will see the attribution on a piece of content (Findery iOS application)
How
Reflect the user’s current public identity back to him.
Present a link to view the public profile (if any) for the current context. If a contextual profile is not applicable, present a link to the user’s primary public profile.
Limit the identity information to the display name and display image. There is no need to show age, gender, location, or contextual identity information back to the owner/user. Save that data for the public view.
Editing the display name
Provide an easy way to change the display of how the user will be seen (Figure 1-5).
Figure 1-5. With Twitter, users can change the display name on the profile whenever they want. However, it doesn’t allow changing the @ name that is associated with the account identity.
To reduce identity theft and spam, encourage the use of a display name that does not expose an authentication ID or email address.
Provide the means to post in a “publicly anonymous” way to reduce the need for additional, separate identities.
In contexts that require it, provide a way for a user to post using an alternate, separate identity.
Place the control at the bottom of a content submission form so that users focus first on their contributions (not on whether they need to change their identities).
Editing the display image
Present a link that gives the user the ability to edit and change out his display image.
Present a window that displays the set of images belonging to the user. Use a floating window to keep the user in context.
Give the user the option to select one of his existing images (or avatar) or let him add a new image, as presented in Figure 1-6.
Figure 1-6. LinkedIn has an inline photo cropper overlay that gives users the ability to adjust the placement of the image within the square presentation
On sites with multiple contexts (MeetUp for example), let the user decide whether the new image should be used in all contexts or just the current context.
Why
Reflecting back the name and image with which a user is currently associated affords control over that person’s identity. There might be specific nicknames or a preferred identity in certain contexts that a person wants to use. Giving the user an opportunity to see how she will be seen gives peace of mind as well as a sense of control and ownership on the site, which in turn encourages more participation.
Identity Cards or Contact Cards
What
A user needs to get more information about another participant in an online community without interrupting his current task. The needed information might include identity information (to aid in recognition and to help the user relate to the participant) or reputation information (to help the user make decisions regarding trust). (See Figure 1-7 and Figure 1-8.)
Figure 1-7. A contact card as used on Twitter
Figure 1-8. A contact card as used on Tumblr
How
Open a small panel when the user hovers over a target’s display name or image.
Present a larger version of the user’s display image, the user’s full display name, and other pertinent information that the target chooses to share with the community (real name, age, gender, location).
Present a Relationship Reflector, as shown in Figure 1-9 and Figure 1-10.
Figure 1-9. Google+ indicates whether a user is one of your connections and, if not, gives the +Add call to action right there. The reflector also shows how many connections you have in common
Figure 1-10. Facebook indicates latest relationship activity, how many connections in common, and if they are already a friend, just being followed, or both
Provide the ability to subscribe to, follow, connect to, unsubscribe, or block the user from this panel.
Optionally extend the previously described ability with contextual identity information, such as reputation information, connections in common, or links to new participation in the current context.
Why
Identity cards or badges make it possible for the user to interact with another participant in an online community in a predictable manner and in context.
They provide the means to reduce identity-related clutter on the screen.
When ID cards are used, Presence Indicators, Reputation Emblems, and Relationship Reflectors can be tucked away but easily accessible. Truncated nicknames can be expanded. Block links can be made less salient. Small or tiny (and often illegible) display images can be shown at a more recognizable size to better humanize an online community and increase positive participation.
Attribution
What
A content consumer needs to understand the source of a contribution, and the source of a contribution needs to receive proper credit for his post, as illustrated in Figure 1-11. A user needs to assign her public identity when contributing content or joining an online community.
Figure 1-11. Attribution for activity—items pinned, likes, and other activity—on Pinterest
Use when
Use this pattern when contributing content, joining a community, or editing a public profile.
How
For the content consumer
List the author’s display name and display image (if space and performance permits) in close proximity to the title (or summary) of the post, as shown in Figure 1-12.
Figure 1-12. Attribution with an avatar accompanying the headline and brief description of articles on Medium
Link the display name and display image to the most contextually relevant user profile. If a contextual profile is not available, link the name and image to the user’s primary profile.
For the content creator
Reflect back the user’s current public identity and give her the ability to update it prior to submitting content or joining a community.
Why
Attribution of content helps keep people honest and owning their words and actions. The reflection back to the author, showing how he will be presented, confirms what his audience will see and the content consumer can identify people in their network, their friends, or experts and associate that with a level of credibility and expertise associated to that specific user.
Avatars
Avatar is both a generic name for a visual representation of a user online and a product name for animated/cartoon or 3D renderings and drawings that represent a user online. In the December 2, 2008 issue of the New York Observer, Gillian Reagan writes:
Profile pictures—or avatars, in online parlance—show people at our thinnest, handsomest, most fun (some call these our best “MySpace angles”). But increasingly—as more than half the country use social media regularly, according to marketing research firm IDC—the entertainment value of these sites is segueing into something more serious; social networks can help snag a job interview, a date or even the No. 1 spot in the Oval Office. And as the sites get more important in our professional lives, so does the avatar. It’s the image that sums up who we are online.
What
A user wants to have a visual representation of herself as part of her online identity, as is demonstrated in Figure 1-13.
Figure 1-13. A profile on Instagram showing an avatar as a visual identifier (Instagram iOS application)
Use when
Use this pattern when the user wants to have a visual associated with her identity.
How
Provide a mechanism for the user to upload any kind of image as an avatar. This can be a small portrait, an icon, or an illustration that the user believes is representative.
Provide an option to upload a larger image—400×400 pixels—and automatically resize for smaller uses. Many services use an image that is 60×60 pixels inline, but a larger image—100×100 pixels or 400×400 pixels—can be used on the profile (see Figure 1-14). Resize the image for use in contact lists and mobile screens. These are often much smaller than what is used on the Web.
Figure 1-14. Avatars as used on LinkedIn. Various sizes are used in different parts of the interface. The largest image is used on the profile, whereas smaller square images are used in lists and round versions are used to show relationship connections.
Avatars (the illustrated representations) allow for a degree of anonymity (Figure 1-15), but do reduce the perceived credibility of the poster in many cases.
Figure 1-15. Cartoon-style avatar as used on Google chrome and in Google Chat
Default image
If the user has not designated a display image for the current context, use a “Not Pictured” image as the default avatar, such as is shown in Figure 1-16. This encourages the user to customize so that he has an identity that is unique from other users.
Figure 1-16. “Not Pictured” icons as used on Meetup, Facebook, Google+, and Flickr
Multiple avatars
Give the user the ability to upload multiple avatars and to change the presentation through the edit capabilities on the profile or identity card in context of use. (See “Editing the display image”.)
Google+, Facebook, MeetUp, and other services’ identity cards and reflectors make it possible for users to upload multiple images. The instant messenger software Adium lets the user select the current image from up to 10 recent icons, as depicted in Figure 1-17. In other cases, when users want to change their avatars, they upload another image and overwrite the previous one.
Figure 1-17. With Adium, the user can select his image from the 10 most recently used images
Consider giving the user the ability to upload and store multiple images for later selection.
Mood expressions
Include a way for users to attach a special status message or emoticon to supplement their avatars by indicating a particular mood (Figure 1-18).
Consider when to use mood expressions versus a status message associated with the profile image.
