4.6. 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 4-30 and Figure 4-31.)

Figure 4-30. Contact card as used on Yahoo!.

Figure 4-31. Contact card as used on FriendFeed.

Use when

Use this pattern when:

• A user’s display image or display name is shown.

• Additional information about the participants is desired (in context) without adding clutter to the screen.

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 the target chooses to share with the community(real name, age, gender, location).

• Present a Relationship Reflector. Yahoo! indicates whether a user is one of your connections. Flickr shares whether the person is a contact or a friend (Figure 4-32). FriendFeed indicates whether you subscribe to that person’s status feeds.

  Figure 4-32. Flickr indicates relationship status in the overlay, activated by clicking the arrow next to the user’s avatar.

  

• Allow 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 or links to new participation in the current context.

Why

• Identity cards or badges allow the user to interact with another participant in an online community in a predictable way 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.

Related patterns

Section 4.7 in Section 4.7

Section 4.2 in Section 4.2

Section 4.5 in Section 4.5

Sources

Based on the work of Matt Leacock, Sara Berg, and the Yahoo! Social Platform Yahoo!

Profiles (http://profiles.yahoo.com)

Friendfeed (http://www.friendfeed.com)

Flickr (http://www.flickr.com)