[Redesign] Log In Page Checklist

[LatyshevaBaranovska]

Date Time
02-19-2025

UI Redesign Testing Checklist

1. General UI Layout

As a User, I want to log into the platform seamlessly with clear and intuitive visual feedback, so that I can access my account quickly and correct any errors if needed.

• Log In Page Layout:

A centered login form with fields for:

• Email Address: Input field with a placeholder ("Введіть свою електронну пошту").
• Password: Password input with an eye icon to toggle password visibility.

Buttons for:

• Forgot Password?: A link to password recovery.

• Log In: Primary button labeled "Увійти".

• Sign Up Option: Below the form, a message: "Вперше на нашому сайті? Зареєструйтесь".

• Form Validations:

• Email Format Validation: If the email is invalid, display an error in red:
  "Введіть адресу електронної пошти у форматі [email protected]".

• Password Error Handling: If credentials are incorrect:
  Error Message in Red: "Електронна пошта чи пароль вказані некоректно".

• The error messages should appear dynamically without a page reload.

• Visual Feedback for Errors:

• Highlight the error field in red borders when the user enters incorrect data.

• Password error feedback shows when typing invalid input (mockup shows real-time error detection).

• Password Toggle Feature:

• Clicking the eye icon will toggle the password visibility on and off.

• Mobile and Desktop Views:

The layout must be responsive:

• On desktop, the form remains centered.

• On mobile, the form should adjust its size and position to remain user-friendly.

• Footer and Header Consistency:

• Header navigation includes links for "Про нас", "Підприємства та сектори", "Пошук", "Увійти", and "Зареєструватися".

Footer must remain visible with:

• Contact information and categories for "Підприємства" and "Сектори".

• Links for "Політика конфіденційності" and "Умови користування".

• Error Handling and Retry Option:

• If login fails multiple times, users can retry:
  The system should guide users to click "Забули пароль?" if they need recovery.

• User Redirection:

• Upon successful login, users are redirected to the main page.

  • 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. Performance and Loading

• Pages load within an acceptable time frame without any noticeable delay.
• Images and other media assets are optimized for quick loading.
• Skeleton screens or loading indicators are displayed where necessary.
• Animations are smooth, with no stuttering or lag.

8. 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.

9. 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.

10. 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.

11. 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.

12. 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.

13. 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.

14. Accessibility Testing with Screen Readers

• Use screen readers (NVDA, VoiceOver) to navigate and confirm elements are accessible.
• Interactive elements announce their purpose correctly (e.g., "button," "link").
• Screen readers can access and announce dynamic content changes (e.g., modals, error messages).
• Forms are navigable with screen readers, and each input is correctly labeled.

---

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

Labels to be added "Test case", "UI", Priority ("pri: High ") .