We need to update the design of the login screen to accommodate improvements to our authentication APIs. The login screen also needs a little visual update, as its design has not been update for our new app look-and-feel and brand standards.
- Add password reset option
- Add input field/flow for 2 factor authentication code
- Update text and visual style to match app 5.0, dynamic type and brand colors ---
Tags: 2FA, Log in, Create account
This comment as a doc
Users with accounts
As a user with a Wikipedia account I would like to be able to log in to my account on the iOS app, even if I have 2FA enabled. When I forget my password, I would like to be able to reset my password through the app.
Users creating new accounts
When creating a new account through the app I would like to receive clear messaging from the system when an error occurs. Additionally, I would like to be able to learn about other ways to create an account if I cannot complete the CAPTCHA verification.
- Typography and type styles should follow the iOS style guide and defined type styles
- Follows best practices of form design (https://uxdesign.cc/design-better-forms-96fadca0f49c#.yuly66gci)
- Utilize both labels and placeholder text (https://www.nngroup.com/articles/form-design-placeholders/)
- Specify errors inline when possible
Inline error messaging and validation
When possible, place messaging inline with where the error occurred and explain to users what caused the error / how it can be fixed.
|User enters incorrect password||Invalid password||Under password input field||Red|
|User enters incorrect 2FA key||Verification failed||Under 2FA code input field||Red|
Create an account
|Users password confirmation field does not match password field||Passwords do not match||Under verify password field||Yellow|
|User correctly verifies password||Passwords match||Under verify password field||Green|
|User incorrectly enters CAPTCHA||Wrong code. Please try again.||Under CAPTCHA text field||Red|
|User incorrectly enters 2FA key||Verification failed||Under 2FA field||Red|
Other system messages
Submission attempts exceed pre-set threshold
|User exceeds number of login attempts||You have made too many recent login attempts. Please wait 5 minutes before trying again.||Red|
|User exceeds number of 2FA attempts||You have made too many recent login attempts. Please wait 5 minutes before trying again.||Red|
In sign-up flow user enters username that is already in use
|User enters a username that is already in use||System defined message re: username||Red|
Reset password email confirmation
|User resets their password||Temporary password sent via email||Green|
Other errors not related to form submission should also be shown as system messages.