Yahoo Design Pattern Library

User Card

Best Practice · Last modified July 15, 2009

A small panel pops up when the user hovers over a target's display name or image, presenting a larger version of the user's display image, the user's full display name, and other pertinent information about the target that they choose to share with the community.

What Problem Does This Solve?

A user needs to get more information about another participant in an online community without interrupting his or her 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).

When to Use This Pattern

Use an identity card wherever a user's display image or display name is shown, and when additional information about the participants is desired (in context) without adding clutter to the screen.

What's the Solution?

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 about the target that they choose to share with the community (Real Name, Age, Gender, Location).

Present a Relationship Reflector. Flickr shares whether the person is a contact or a friend. Friendfeed indicates whether or not you subscribe to that person's status feeds.

Allow the ability to subscribe to, follow, connect to, unsubscribe or block the user from this panel.

Optionally extend the above with contextual identity information such as reputation information or links to new participation in the current context.

Why Use This Pattern?

Identity cards or badges allow the user to interact with another participant in an online community in a predictable way in context.

They provide the means to reduce identity-related clutter on the screen.

When user 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 (often illegible) display images can be shown at a more recognizable size to better humanize an online community and increase positive participation.