Skip to content

UX-AUDIT.md

Latest commit

 

History

History
54 lines (41 loc) · 4.23 KB

UX-AUDIT.md

File metadata and controls

54 lines (41 loc) · 4.23 KB
Raw

UX Audit — VisitRomagna

Reviewed all route pages under src/app (excluding src/app/api) and all shared components under src/components.

Critical

  1. App-wide fallback UX is missing

    • Issue: No branded loading.tsx, error.tsx, global-error.tsx, or not-found.tsx existed, so route transitions, unexpected runtime errors, and deep-link misses fell back to abrupt/default behavior.
    • Impact: Users can hit blank or generic states with no recovery path.
    • Examples: src/app/layout.tsx, dynamic routes such as src/app/experiences/[id]/page.tsx, src/app/booking/[experienceId]/page.tsx.

  2. Core booking flows allow avoidable failure states

    • Issue: Booking and itinerary checkout relied on weak client validation, had limited action feedback, and exposed demo-only payment copy without clear progress/error recovery.
    • Impact: The highest-value conversion flow can stall, mislead, or fail silently.
    • Examples: src/app/booking/[experienceId]/page.tsx, src/app/itinerary-checkout/page.tsx.

  3. Primary navigation and dashboard navigation are not mobile/accessibility complete

    • Issue: Navbar mobile menu lacked robust menu semantics and focus management; dashboard shell offered a desktop-first navigation pattern with poor small-screen behavior.
    • Impact: Navigation becomes harder on touch devices and for keyboard/screen-reader users.
    • Examples: src/components/navbar.tsx, src/components/dashboard.tsx, src/app/dashboard/page.tsx.

High-impact

  1. First-run, loading, and empty states are inconsistent across interactive pages

    • Issue: Discover, messages, auth, and dashboard routes mixed spinners, blank areas, and plain text instead of helpful skeletons, empty states, and recovery actions.
    • Impact: The app feels unfinished during first-run and low-data scenarios.
    • Examples: src/app/discover/page.tsx, src/app/messages/page.tsx, src/app/auth/login/page.tsx, src/app/auth/register/page.tsx, dashboard pages.

  2. Forms need stronger validation, feedback, and accessible semantics

    • Issue: Shared form fields were missing aria-invalid/aria-describedby, auth forms lacked inline validation and password affordances, and success/error feedback was inconsistent.
    • Impact: Preventable form errors increase abandonment and reduce accessibility.
    • Examples: src/components/ui.tsx, src/app/auth/login/page.tsx, src/app/auth/register/page.tsx, src/components/review-form.tsx.

  3. Keyboard navigation is incomplete in custom interactive components

    • Issue: Sortable tables, review stars, the language picker, and the experience map depended mostly on pointer interactions.
    • Impact: Keyboard-only users lose access to major interface controls.
    • Examples: src/components/ui.tsx, src/components/review-form.tsx, src/components/language-switcher.tsx, src/components/experience-map.tsx.

  4. Visual rhythm and responsive layout patterns are uneven

    • Issue: Page shells, action bars, footer groupings, and CTA treatments varied widely between brochure pages and app surfaces.
    • Impact: The product feels less cohesive and denser on smaller screens.
    • Examples: src/components/ui.tsx, src/components/footer.tsx, src/components/hero.tsx, src/components/pricing.tsx, src/app/messages/page.tsx.

Polish

  1. Micro-interactions need clearer focus and state cues

    • Issue: Several CTAs, dismiss buttons, chips, and action buttons lacked consistent focus rings, pressed states, or descriptive labels.
    • Impact: Small friction accumulates in daily use, especially on touch and keyboard.
    • Examples: src/components/experience-map.tsx, src/app/messages/page.tsx, src/app/itinerary-checkout/page.tsx, src/components/footer.tsx.

  2. Loading visuals are present but not standardized

    • Issue: Spinner-only placeholders dominate where meaningful skeletons or contextual loading blocks would better preserve layout.
    • Impact: Perceived performance is lower than necessary.
    • Examples: src/components/ui.tsx, src/app/discover/page.tsx, src/app/messages/page.tsx, src/app/booking/[experienceId]/page.tsx, src/app/itinerary-checkout/page.tsx.