xiaowen-jiang/agent-enterprise/ui-ux-review

Process

1. Read the UI code — HTML/CSS/JS, component structure, layout
2. Heuristic evaluation (Nielsen's 10):

• Visibility of system status
• Match between system and real world
• User control and freedom (undo, cancel)
• Consistency and standards
• Error prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• Help users recognize and recover from errors
• Help and documentation

1. Accessibility check (WCAG 2.1):

• Color contrast (4.5:1 for text, 3:1 for large text)
• Keyboard navigation (all interactive elements reachable)
• Screen reader compatibility (ARIA labels, semantic HTML)
• Focus indicators visible

1. Responsive design — Mobile, tablet, desktop breakpoints
2. Interaction patterns — Loading states, empty states, error states

Output Format

## UI/UX Review: [Component/Page Name]
 
### Usability Issues
| Issue | Severity | Heuristic | Recommendation |
|-------|----------|-----------|----------------|
| No loading indicator on submit | Medium | Visibility of status | Add spinner/progress bar |
 
### Accessibility Issues
| Issue | WCAG Level | Recommendation |
|-------|------------|----------------|
| Missing alt text on images | A | Add descriptive alt attributes |
 
### Positive Patterns
- [What's working well]
 
### Recommendations (Priority Order)
1. [Most impactful improvement]

Guidelines

• Test with keyboard-only navigation — can you reach everything without a mouse?
• Check color contrast with a contrast checker tool
• Verify all form inputs have labels (not just placeholders)
• Ensure error messages are near the error source, not just at the top
• Check empty states — what does the user see when there's no data?
• Verify that destructive actions have confirmation dialogs