[Redesign] Forgot Password Flow Checklist

[Lahernyi]

Date Time
02-19-2025 21:03

UI Redesign Testing Checklist

1. Forgot Password Page Layout

• A brief instruction on entering the registered email for password recovery.
• An input field for entering the user’s email.
• A disabled "Recover Password" button that activates upon valid input.
• A message indicating the email's submission for recovery (visible after submission).
• A "Back to Login" link to allow the user to return to the sign-in page.

2. Email Input Validation

• Displays a placeholder text: "Введіть свою електронну пошту" (Enter your email).
• Validates the email format dynamically with real-time feedback: If invalid, shows the message: "Введіть адресу електронної пошти у форматі [email protected]".
• Validates the email format dynamically with real-time feedback: If the entered email is not found, displays: "Зазначена електронна адреса не зареєстрована".

3. Submit Button

• The "Recover Password" button remains inactive until a valid email address is provided.
• Upon clicking the "Recover Password" button, the system sends a recovery link to the entered email address and displays a message: "На зазначену вами електронну пошту буде відправлено листа з посиланням для відновлення паролю."

4. Confirmation Screen Layout

• Displays a confirmation message: "Відновлення паролю майже завершено" (Password recovery almost complete).
• Includes a follow-up instruction: "На вашу електронну адресу були надіслані інструкції для зміни паролю."
• A visible button labeled "Повернутися до входу" (Return to Login) that redirects the user back to the login page.

5. Navigation

• Includes a link: "Я згадав свій пароль. Повернутися до входу", allowing users to return to the login page.

6. Error Handling

• If the user submits an email address that is not registered, display the following error: "Зазначена електронна адреса не зареєстрована" below the email input field.
• The email input field should allow users to re-enter the correct email.

7. General UI Layout

• All elements are aligned as per the design specifications.
• Spacing and padding between elements are consistent across the UI.
• No elements are overlapping or cut off on any screen size.
• Text, images, and icons render correctly and are not distorted.
• The UI looks visually similar to the mockups in terms of colors, fonts, and sizes.

8. Responsiveness

• Layout adjusts correctly for various screen sizes (desktop, tablet, mobile).
• The UI adapts seamlessly when switching between landscape and portrait modes.
• No horizontal or unnecessary vertical scrolling is needed on any screen size.
• Important content is prioritized and remains visible on smaller screens.

9. Cross-Browser Compatibility

• UI renders correctly in major browsers (Chrome, Firefox, Safari, Edge).
• Fonts, colors, and images appear consistently across browsers.
• Interactive elements (buttons, dropdowns, etc.) work as expected on all browsers.
• CSS and animations are consistent across different browsers and versions.

10. Accessibility

• Color contrast meets WCAG standards (AA level or higher).
• All interactive elements are accessible via keyboard, with a visible focus state.
• ARIA labels and roles are correctly applied to screen-reader elements.
• Form fields have associated labels, error messages, and instructions where needed.
• Screen readers can correctly interpret and navigate the redesigned interface.

11. Visual Consistency

• All colors, fonts, and styles match the design specifications.
• Hover, active, and disabled states for buttons and links are visually distinct.
• Icons and images are high quality and scaled correctly.
• Text truncation or overflow issues do not occur.
• Consistent use of shadows, borders, and other UI styling elements.

12. Functionality

• Buttons, links, and other clickable elements are functional and lead to the correct pages or actions.
• All forms work as expected, including validation for required fields and error messages.
• Dropdowns, checkboxes, and radio buttons are selectable and reflect the chosen options.
• Modal dialogs open and close correctly, and focus remains within the modal while open.
• Pagination (if applicable) works as expected and leads to the correct content.

13. User Feedback and Notifications

• Success messages appear for completed actions (e.g., form submissions).
• Error messages display when required fields are left empty or incorrect data is entered.
• Warning or info messages are shown where applicable and are easy to understand.
• Toasts, alerts, or modal messages do not overlap and are easily dismissible.

14. Forms and Input Validation

• Placeholder text is clear and present in all input fields where needed.
• Field validations work correctly, providing immediate feedback for errors.
• Required fields are clearly marked.
• Form submission buttons are disabled until all mandatory fields are correctly filled.
• Error messages for invalid input are clear, visible, and context-appropriate.

15. Images and Icons

• Images load correctly, with no broken links or placeholders.
• Icons appear sharp and clear on all screen sizes.
• Alt text is provided for all images, where applicable.
• Logos and brand-related images are high quality and positioned correctly.

16. Interactive Elements and Hover States

• Buttons and links change state (hover, active, focused) as per the design.
• Interactive elements like accordions, tabs, and sliders function as expected.
• Tooltips and pop-ups display correctly on hover or click.
• No unintended hover or focus states appear on non-interactive elements.

17. Notifications and Alerts

• All notifications (errors, warnings, confirmations) are styled consistently.
• Notifications appear in the correct location and do not overlap content.
• The notification behavior (timed dismissal, manual close) functions as expected.

18. Typography and Text Content

• Fonts match the design specifications in terms of style, size, and weight.
• Text is legible and does not overflow or truncate unnecessarily.
• Line spacing, paragraph spacing, and text alignment follow the mockup design.
• All placeholder text and help text are spelled correctly and grammatically accurate.

---

User story links E.g.: "User story #850 "