1. General Usability
General usability refers to the fundamental aspects of usability that can easily turn a bad user experience into a good one.
⬜ All visual elements display correctly, clearly, and are relevant.
⬜ Important actions (e.g., deleting an account) have confirmation prompts.
⬜ Location settings (language, currency, country) are applied automatically.
⬜ The user’s name is displayed when logged in (e.g., “Hi [Username]”).
⬜ UI feedback (visual, audio, haptic) reassures users of successful interactions.
⬜ Buttons and interactive targets are large enough for cursor and touch interactions.
⬜ The application is compatible with most common browsers and mobile devices.
2. Heuristic Evaluation
Heuristic evaluation is a structured method to review a design, taking into consideration the needs and expectations of users and uncover opportunities for improvement and optimization.
⬜ Content is relevant, understandable, and avoids unnecessary jargon.
⬜ Align with the users’ expectations with familiar patterns and terminology.
⬜ Maintain clarity and trust in information and design, avoiding dark patterns.
⬜ Give users control over interactions (e.g. no automatic pop-ups).
⬜ Minimize cognitive load by keeping options visible.
⬜ Reduce distractions and eliminate unnecessary elements.
⬜ Minimize friction in user experience, giving guidance and easy-to-reach help.
3. Design Consistency
Ensure consistency between the created design and the rules set up in the Design System or Style Guide to increase perception of trustworthiness.
⬜ Typefaces are consistent.
⬜ Colors are consistent.
⬜ Logos are consistent.
⬜ Tone of voice is consistent.
⬜ Buttons are consistent.
⬜ Navigation is consistent.
⬜ Forms are consistent.
4. Accessibility
Web accessibility is the practice of ensuring there are no barriers that prevent users from accessing the web application, regardless of physical, situational, cognitive, or mental disability.
⬜ Text and colors pass WCAG contrast ratio check.
⬜ Page titles describe the content and are unique.
⬜ Headings are logically set up with no levels skipped.
⬜ Images have alt text, and visuals are not needed for interactions.
⬜ Supports accessibility tools such as screen readers.
⬜ No flashing content taking up a large screen area or for more than 5 seconds.
⬜ Videos include captions and control options (volume/stop/pause).
5. Navigation & Information Architecture
Information architecture is the visual representation of hierarchy and features, which may include navigation, application behavior, and flows.
⬜ Related content is grouped together.
⬜ Content is scannable.
⬜ Search functionality is available throughout the site.
⬜ Navigation is consistent and does not change from page to page.
⬜ Contact information and location are included.
6. Forms
Forms allow users to input information that is sent to a server for processing. The shorter a form is, or the less information it asks for, the more likely users are to complete them.
⬜ Interactive elements (radio buttons, checkboxes, etc.) are clickable and visible.
⬜ Forms only ask for important and relevant information.
⬜ Buttons are logically labeled (e.g., “Send Message” instead of “Submit”).
⬜ Mandatory form fields are clearly highlighted.
⬜ Form fields are left-aligned for ease of reading.
⬜ Form fields are clearly labeled to reduce confusion.
⬜ Placeholder text in input fields indicates what information should be entered.
7. Errors
Errors can occur in a variety of ways, including broken links, or data being inputted incorrectly on forms. Whilst it is difficult to eliminate errors entirely, you can reduce user frustration by making it clear, quick, and easy to resolve them.
⬜ Errors are clear and easy to correct.
⬜ Show error messages in a warning color with visual elements such as icons.
⬜ Provide a method to rectify the error next to the error message.
⬜ Avoid technical jargon in error explanations.