User Card mini
Also known as: Hover Card, Identity Cards
Tags: contextual tools, social
User Card pops out when hovering over someone’s profile picture or display name. It is a small panel presenting a larger version of the user’s display image, the user’s full display name, and other relevant information about the target. User Cards can be used to provide a way for users to get more information about other community members without interrupting their current task. It is also a way to prevent identity-related clutter in the interface.
Extra benefit of using User Cards is that they provide an easy way to get more info about other community members making it easier to identify them. This reinforces communities by making the interaction between users to feel more real and personal.
Digg has a nice way of implementing User Card. You have to hover over the user name for a couple of seconds before the User Card pops out. This prevents the annoying effect of User Cards popping out when not desired.
Useful links
- User Card - Yahoo! Design Pattern Library
- Identity Cards - Designing Social Interfaces
- Hover Popover - Twitter Bootstrap
Code snippets
- No code snippets yet.
LinkedIn offers some interaction that pops up after a second. I perceive as quite buggy as it doesn’t always appear as it should. I appreciate the dotted line indication of where such a hover interaction will take place.
Gmail offers users interaction features on their user card
Source: http://gmail.com/Gmail offers users interaction features on the user cards
Creative Commons
Comments
Leave a comment