Describes best practices for designing login and logout UI for your Windows Store apps.
- Login overview
- Login settings
- Login scenarios
- Logout UI
- Personalizing the app on login
- Security Considerations
- Related topics
Login overview
Many apps provide a personalized or premiere experience to users when they're logged in. Some apps require the user to log in to a registered account to get value from the app. Other apps provide a rich baseline experience for all users but enable enhanced features when the user is logged in.
Login settings
The Settings charm is the best place for users to find and manage their account settings.
If your app offers a way for users to log in to the app or to create an account, you should enable users to swipe from the edge and change the login settings in the Settings flyout. This design ensures predictability and ease of access, regardless of where the user might be in the app's workflow. Also, this design frees room on the app's canvas that would otherwise be dedicated to login-related UI.
Login scenarios
Your app may require that the user is logged in, or login may be optional. The login user experience depends on the app.
Required login
When your app requires users to log in or create an account when the app first runs, the first screen of the application should feature the login UI prominently. Once the user is logged in, there is no need for an onscreen login UI. Users log out by using the Settings charm.
Recommended login
If your app needs to elevate the login UI to the app's canvas, you should provide the controls inline in your content. This design ensures that users see the login option on the landing page when they first launch the app, but the login UI doesn’t get in the way of the overall experience.
As users browse the app’s content or views, the logon UI scrolls out of view, but still has a presence in the app. For example, you should place a login UI as the first section of the ListView control in the app’s landing page. For consistency, the user should always be able to find the login UI in the Settings flyout.
 |
| App with login UI hosted as the first section of the ListView control |
Optional login
Some apps provide great value without requiring that users are logged in. For example, a news app may offer an initial view of news articles that are interesting to many different readers. User can gain a lot of value from the app without logging in.
You can host an optional login UI in the Settings flyout, so the login UI doesn't distract from the content in the app or consume space on the canvas.
 |  |
| Settings charm flyout login | Settings flyout login |
Contextual login
Sometimes, an app may require a login UI that's specific to some content in the app. For example, if the user wants to post a comment on a news article, the app may require login.
Indicate the need for a user login by putting a contextual login button on the page. The button launches the Settings flyout that hosts the login UI.
Logout UI
Once users have logged into the application, they should have a familiar and reliable place in the system where they can log out of the application, if necessary.
Avoid putting a persistent logout UI on the app's canvas. The Settings flyout for the app is the right place to enable the user to log out. Once the user has logged in to the app, logging out happens rarely, if the app is delivering meaningful personal content.
Personalizing the app on login
When a user logs in to Windows, the Start screen conveys the user's identity and personalization in numerous ways. User preferences for color, layout, apps, and organization of content is personal and customizable.
Once the user has logged in, your app should update its content based on the user’s preferences, instead of showing generic content. Each app has a unique way of showing and delivering personal content, which enhances the user’s experience in a Windows Store app. When you think about your app’s logged in experience, you should focus on the content that makes your app personal and connected.
There may be times when the user who logs in to the app is different than the user who logged in to Windows. For example, a friend using your laptop or slate may want to log in to their social network. Avoid putting a persistent UI on the app's canvas that shows identity, because having different identities across the Start screen and the app is more confusing than rewarding for users.
The Settings Accounts flyout is the most intuitive and reliable location for showing user identity in a way that doesn’t disrupt the rich, immersive, content-first experience.
Security Considerations
The following articles provide guidance for writing secure C++ code.
Related topics
- Link(s) to related topic(s)
Build date: 11/29/2012
