Guidelines for user names and account pictures

Description

In Windows 8, apps can retrieve the current user's name and image (called the account picture) and use them to identify and create personalized experiences for the user. For example, a messaging app could use the name and account picture to identify the user as a participant in a conversation, a game app could use them to identify the user as a player in a game's leader board page, and so on.

Dos and don'ts

  • Use appropriate image sizes for the application interface.
  • Use a status bar to indicate status as a small portion of the account picture.
  • Don't use an account status icon that may be lost in the account picture behind it.

Additional usage guidance

If your app can take pictures, consider declaring your app as an account picture provider. That way, your app will be listed in the Account picture page under Personalize in PC settings. From there, users can select it to create a new account picture.

To learn more, see App contracts and extensions and UserInformation. Also, check out the Account picture name sample.

Account picture sizes

An app can retrieve the account picture as a small image, a large image, or a video (dynamic image). The images are sized to look great at the largest DPI plateau (1.8x):

Small and large account picture sizes

An account picture or video has a 448x448 frame size that can be up to five seconds long and five megabytes in size.

Use a small image when the account picture is not a central part of a particular experience, such as displaying a long list of people. Use large images when you need to identify a small number of people in an app area, or when you need to clearly identify each user. For example, use large images for conversation participants in a messaging app or to display the caller's image for an incoming phone call.

User name

Apps can retrieve the user name by using members of the UserInformation class. The user's first and last name are available independently, as is the user's display name. Windows formats the display name so that it is in the correct order for the locale.

Displaying an account picture and user name together

We recommend one of the following formats for displaying an account picture together with the corresponding user name:

  • Side-by-side—If sufficient space is available, display the account picture and user name side-by-side because this format is easiest for the user to read. The following example shows the preferred alignment and arrangement of the elements. Note that the user name is aligned with the top edge of the account picture, and any secondary information is displayed in a smaller font size smaller than the user name.

    Account picture and user name in side-by-side format

  • Above-and-below—When space in constrained, display the user name below the account picture. Be aware, however, that the entire user name might not fit on a single line. Note that the user name is aligned with the left edge of the account picture, and secondary information has a smaller font size than the user name.

    Account picture and user name in above-and-below format

Showing status

If your app needs to combine status information with an account picture, we recommend that you use a status bar or an icon overlay. We prefer a status bar because it doesn't obstruct the image and is easier to notice. A status bar should be wide enough to be easily distinguished from the account picture image. Here are some examples of status bars:

Examples of status bars

You can use icon overlays to communicate more complicated kinds of status. Icon overlays can get lost in the details of the image, so be sure to use icons that stand out clearly against a variety of backgrounds. Here are some examples of icon overlays:

Examples of icon overlays

Related topics

For designers
App contracts and extensions
For developers
Account picture name sample
UserInformation

 

 

Show:
© 2015 Microsoft