Web App Critique

Learning Objectives

• Evaluate web application usability
• Assess performance and optimization
• Conduct accessibility audits (WCAG)
• Check standards compliance
• Identify security vulnerabilities
• Consider ethical implications

Why Critique Web Applications?

• Learning: Understand what makes good UX
• Improvement: Identify areas for enhancement
• Standards: Ensure compliance with web standards
• Accessibility: Make web inclusive for all users
• Performance: Optimize user experience
• Security: Protect users and data

Usability Evaluation Framework

Nielsen's 10 Usability Heuristics

1. Visibility of system status - Keep users informed
2. Match between system and real world - Use familiar language
3. User control and freedom - Provide undo/redo
4. Consistency and standards - Follow conventions
5. Error prevention - Better than good error messages
6. Recognition rather than recall - Minimize memory load
7. Flexibility and efficiency - Accelerators for experts
8. Aesthetic and minimalist design - No unnecessary info
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation - When needed, easy to search

🎯 LIVE DEMO: Usability Analysis

Performance Evaluation

Key Metrics:

• First Contentful Paint (FCP): < 1.8s
• Largest Contentful Paint (LCP): < 2.5s
• Time to Interactive (TTI): < 3.8s
• Cumulative Layout Shift (CLS): < 0.1
• Total Blocking Time (TBT): < 200ms

Tools:

• Google Lighthouse
• WebPageTest
• Chrome DevTools Performance tab
• GTmetrix

🎯 Performance Score Example

Task 1: Usability & Performance Audit

Accessibility (WCAG 2.1)

Four Principles (POUR):

• Perceivable: Can users perceive the content?
• Operable: Can users operate the interface?
• Understandable: Can users understand the content?
• Robust: Works with assistive technologies?

Conformance Levels:

Common Accessibility Issues

🎯 LIVE DEMO: Accessibility Testing

Code Examples: Accessibility

❌ Bad:

<div onclick="submitForm()">Submit</div>
<img src="logo.png">
<input type="text" placeholder="Name">
<span style="color: #ccc">Click here</span>

✅ Good:

<button type="submit">Submit</button>
<img src="logo.png" alt="Company Logo">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<a href="/page" style="color: #0066cc">Read more about our services</a>

Standards Compliance

HTML Validation:

• W3C Markup Validator: validator.w3.org
• Check for proper DOCTYPE
• Validate semantic structure
• Ensure closing tags

CSS Validation:

• W3C CSS Validator: jigsaw.w3.org/css-validator
• Check vendor prefixes
• Validate syntax

Best Practices:

• Use semantic HTML5 elements
• Follow HTML/CSS specifications
• Test across browsers

Task 2: Accessibility Audit

Security Considerations

Common Vulnerabilities:

• XSS: Cross-Site Scripting
• CSRF: Cross-Site Request Forgery
• SQL Injection: Unsanitized database queries
• Insecure Authentication: Weak passwords, no 2FA
• Exposed Sensitive Data: API keys in client code
• Missing HTTPS: Unencrypted connections

Security Headers:

Content-Security-Policy
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Strict-Transport-Security

Ethical Considerations

Privacy:

• Clear privacy policy
• Informed consent for data collection
• GDPR compliance (for EU users)
• Right to deletion

Dark Patterns (Anti-patterns):

• Trick questions: Confusing opt-out language
• Roach motel: Easy to get in, hard to leave
• Forced continuity: Hidden recurring charges
• Bait and switch: Misleading UI elements

🎯 Dark Pattern Examples

Critique Report Structure

1. Introduction: App overview, purpose, target audience
2. Methodology: Tools used, testing approach
3. Usability Analysis: Heuristic evaluation, issues found
4. Performance: Metrics, bottlenecks, recommendations
5. Accessibility: WCAG compliance, barriers identified
6. Standards: HTML/CSS validation, browser compatibility
7. Security: Vulnerabilities, best practices
8. Ethics: Privacy, dark patterns, social responsibility
9. Recommendations: Prioritized action items
10. Conclusion: Overall assessment, rating

Best Practices

• Be objective: Support claims with evidence
• Be specific: "Button too small" → "Submit button is 20x20px (should be min 44x44px)"
• Prioritize: Critical → High → Medium → Low
• Be constructive: Offer solutions, not just problems
• Consider context: Target audience, use cases
• Test thoroughly: Multiple devices, browsers, scenarios
• Document everything: Screenshots, metrics, quotes

Next Session: Comparative Critique

• Comparing multiple web applications
• Framework comparison (React vs Vue vs Angular)
• Design decisions and trade-offs
• Scalability and maintainability
• Technology stack evaluation
• Competitive analysis

Preparation: Select 2-3 similar apps to compare (e.g., Twitter/Mastodon/Bluesky)