Guidelines for user names and account pictures
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.
- 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.
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.
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):
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.
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.
- 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.
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:
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:
- For designers
- App contracts and extensions
- For developers
- Account picture name sample