Profile

The Profile pattern is a screen dedicated to the user/owner. The Profile is often information which the user has submitted about themselves and also includes links to other information which is pertinent to the user (i.e. inbox, newsfeeds, direct messages).  A profile provides the user a central, public location to display all the relevant content and information about themselves to others - both those they know and those they don't.

Profile is commonly used on social networking apps. The profile often shows new friends, connections, and groups that a user has joined. Shows a list of public comments (i.e., activity announcements, pokes, wall comments, etc.). Shows users' status and mood information. Shows any recent activities in their applications that they have subscribed to (e.g., books they have read, movies they have watched, etc.). Showing such information makes users' profiles seem more "alive" and useful for their co-workers and/or friends.

For enterprise social networking, the profile often shows the users work assignments/projects, documents they may be following/watching, lists of coworkers, and work contact information.

Appearance

Appearance characteristics for this pattern.

Appearance characteristics for this pattern may change based on ownership of the profile.  For example, a user who views their own profile may see additional details which a public user viewing the same profile may not be able to view.

1. Personal Information: Name, Title, Group, Role, Contact Information (Optional), User Image, Photos, Friends, Following, Edit Link
2. Public Information: Name, Title, Group, Role, Contact Information (Optional), User Image, Follow Link
3. Friend Information: Name, Title, Group, Role, Contact Information (Optional), User Image, Photos, Friends, Following, Unfollow Link

Behavior

Common behaviors for this pattern.

• Access: Accessing the user profile differs from application to application. There might be the user name displayed as an item in the Springboard or a button in the Navigation bar. Users can also tap a name of a user to see his/her profile. In all cases, tapping on the element opens a page with the user profile.
• Edit Information: Tap on the Edit link or button to edit your profile or a particular information. An inline editor or new page may appear.
• Change Photo: Tap on the user photo or Edit link or button to edit the photo. Usually, users should be presented with a few options, such as: uploading a new photo, choosing an existing photo, or taking a new photo with the camera.
• Subscribe: Tap on the Follow link or button to subscribe for updates from a friend, institution, etc.
• Unsubscribe: Tap on the Unfollow link or button to unsubscribe from updates from a friend, institution, etc.

Usage

Usage guidelines for this pattern.

• Show personal information as well as activity users might be interested to. This may include, but is not limited to:
  • public comments (i.e., scraps, pokes, wall comments, etc.),
  • users' status,
  • list of friends/followers,
  • pending messages,
  • uploaded materials (i.e. images, videos, music, etc.), and
  • recent activities users have subscribed to (e.g., books they have read, movies they have watched, etc.).
• Showing such personal information makes users' profiles seem more "alive" and useful for their friends.

Related

• Used On: Phone, Tablet
• Also Called: User Homescreen, User Profile, Timeline
• Related Components: Image, Link, Text
• Related Patterns: Activity Feed, Avatar, Drawer, Search
• Resources: JET FixItFast Demo