Many Windows Store 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.
- If your app offers a way for users to log in to the app, create an account, or manage account settings, 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.
- If you app requires users to log in or create an account when the app first runs, design the first screen of the app to feature the login UI prominently. Once the user is logged in, there is no need for an onscreen login UI.
- Allow users to log out by using the Settings charm.
- If your app needs to elevate the login UI to the app's canvas, 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.
- If your login UI is in a list view control, place it as the first section of the control in the app's landing page. As users browse the app’s content or views, the logon UI scrolls out of view, but still has a presence in the app.
- Make sure the user can always find the login UI in the Settings flyout.
|App with login UI hosted as the first section of the ListView control|
- If logging in to your app is optional, place the login UI in the Settings flyout so that it doesn't distract from the content in the app or consume space on the canvas. 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.
- If your app requires a login UI that's specific to some content in the app, 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. For example, a news app may require login if the user wants to post a comment on a news article.
|Settings charm flyout login||Settings flyout login|
- Place logout UI in the Settings flyout. Once the user has logged in to the app, logging out happens rarely, if the app is delivering meaningful personal content. Provide users with a familiar place to log out if necessary.
App personalization on login
- Design your app’s logged in experience with content that makes your app personal and connected.
- Once the user has logged in, update the app's 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.
- Avoid putting a persistent UI on the app's canvas that shows identity. 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 tablet may want to log in to their social network. Having different identities across the Start screen and the app is more confusing than rewarding for users.
- Guidelines for single sign-on and connected accounts
- Requirements for Microsoft account sign-in (HTML)
- Requirements for Microsoft account sign-in (XAML)