# Auditoria UX/UI Integral - MallorcaTrabaja

## Resumen ejecutivo

MallorcaTrabaja tiene una base funcional solida en negocio, pero su expresion visual e interactiva todavia se percibe como utilitaria. El producto ya resuelve necesidades reales (empleo, vivienda, rutas, servicios), pero la experiencia muestra deuda en jerarquia, consistencia y personalidad.

Este informe prioriza mejoras con impacto en conversion, engagement y retencion.

## Inventario de superficies

### Web (Laravel Blade)
- Publica: `backend/resources/views/home.blade.php`, `backend/resources/views/open-link.blade.php`, `backend/resources/views/payments/return.blade.php`
- Portal usuario: `backend/resources/views/portal/`
- Admin: `backend/resources/views/admin/`
- UI parcial reutilizable: `backend/resources/views/portal/partials/ui/`
- Scripts de interaccion: `backend/public/js/*.js`
- Capa visual: `backend/public/css/mallorca.css`

### Mobile (Flutter)
- Shell y navegacion: `mobile_app/lib/src/features/shell/app_shell.dart`
- Features principales: `mobile_app/lib/src/features/jobs`, `housing`, `rides`, `services`, `chat`, `publish`, `support`, `fraud`
- Design system base: `mobile_app/lib/src/design/`
- Widgets compartidos: `mobile_app/lib/src/widgets/`

## Hallazgos principales (por severidad)

## P0 - Critico
- **Inconsistencia de estados (loading/empty/error):** coexistencia de patrones heterogeneos en Flutter (texto rojo, spinner generico, banners modernos), afectando claridad y confianza.
- **Navegacion movil sobrecargada:** 6 destinos en la barra inferior + menu de cuenta con demasiadas opciones, aumentando carga cognitiva.
- **Web con identidad debil:** landing y panel aportan valor funcional, pero con lenguaje visual generico y poco diferencial.

## P1 - Alto
- **Jerarquia visual irregular:** densidad de informacion similar entre contenido primario y secundario.
- **Accesibilidad incompleta:** faltan estados de foco robustos y elementos dinamicos con soporte ARIA en web.
- **Dualidad de enfoque visual:** existe design system documentado pero adopcion parcial en pantallas clave.

## P2 - Medio
- **Friccion en tareas avanzadas:** acciones de alto valor no siempre priorizadas en primer viewport.
- **Microinteracciones desiguales:** algunos flujos dan feedback premium y otros siguen con patrones basicos.

## Patrones genericos detectados
- Cards repetitivas sin narrativas de contenido.
- Spinners genericos como unico estado de carga.
- Estados vacios con texto plano sin accion.
- Falta de capas informativas (prioridad, urgencia, proximidad) en listados.

## Oportunidades de alto impacto

1. **Replantear shell mobile y priorizacion de tareas**
   - Destacar acciones primarias (explorar, publicar, mensajes, cuenta).
   - Relegar acciones secundarias a un hub contextual.

2. **Unificar sistema de estados**
   - Estandarizar loading/empty/error/success con componentes compartidos.
   - Usar copy accionable y recuperacion explicita (reintentar, limpiar filtro, continuar).

3. **Subir nivel visual web**
   - Hero editorial con narrativa de valor.
   - Secciones orientadas a jobs-to-be-done y CTA por rol.
   - Sistema de componentes con jerarquia tipografica mas clara.

4. **Aplicar motion util**
   - Transiciones cortas (<300ms), feedback de hover/press y skeletons consistentes.
   - Evitar animaciones decorativas sin retorno UX.

5. **Fortalecer accesibilidad y responsive**
   - Estados de foco visibles.
   - Contraste y targets tactiles minimos.
   - Mejor tratamiento de layout en pantallas compactas.

## Matriz de impacto vs esfuerzo

| Area | Impacto | Esfuerzo | Prioridad |
|---|---|---|---|
| Shell mobile + navegacion | Alto | Medio | P0 |
| Estados globales Flutter | Alto | Medio | P0 |
| Landing + dashboard web | Alto | Medio | P0 |
| Tokens y tipografia unificada | Alto | Bajo/Medio | P1 |
| Motion util reutilizable | Medio/Alto | Medio | P1 |
| Hardening a11y/responsive | Alto | Medio | P1 |

## Criterios de aceptacion de auditoria
- Inventario completo de superficies y componentes clave.
- Problemas clasificados por severidad e impacto negocio.
- Priorizacion clara para implementacion por oleadas.
- Riesgos de conversion y friccion explicitados.