10 KiB
10 KiB
Apuntes de presentacion — Frontend + UX (Marcos)
Notas extendidas para exponer la parte de interfaz y experiencia de usuario. Incluye el guion, el por que de cada decision y el funcionamiento interno. Esta pensado para explicar mas de lo que aparece en las slides.
1) Vista de mando (KPIs + grid)
Que mostrar:
- Captura real del dashboard principal (KPIs arriba + grid debajo)
Por que es importante:
- Es la entrada principal del usuario y resume el estado global.
- Permite pasar de vision general a detalle en un clic.
Como funciona y que muestra:
- Los KPIs agregan informacion clave: proyectos activos, presupuesto y progreso medio.
- Debajo se renderiza el grid con tarjetas, cada una representando un proyecto.
- La jerarquia visual dirige la mirada primero a los KPIs y luego a la exploracion.
Guion corto:
- “La vista de mando prioriza lectura rapida: KPIs arriba y tarjetas abajo.”
- “Con un vistazo se entiende el estado general y se puede bajar al detalle.”
2) KPI protagonista
Que mostrar:
- Captura del KPI grande (ej. 94.2%)
Por que es importante:
- Jerarquia visual clara para decisiones rapidas.
- La comparacion contextual evita interpretar mal el dato.
Como funciona y que muestra:
- Numero principal con tipografia grande.
- Texto de apoyo con comparativa y periodo temporal.
- Se usa contraste para que el dato sea lo primero que se lea.
Guion corto:
- “Numero grande, etiqueta corta y contexto de mejora.”
- “El usuario detecta la tendencia sin leer mucho texto.”
3) Grid vs List
Que mostrar:
- Dos capturas reales: grid y list
Por que es importante:
- Grid para exploracion visual; list para operacion rapida.
- El usuario elige la forma de trabajo que necesita.
Como funciona y que muestra:
- El toggle cambia la representacion sin cambiar la fuente de datos.
- El grid prioriza tarjetas y resumen; la lista prioriza columnas y densidad.
- Se mantiene el mismo estado de filtros y busqueda al cambiar la vista.
Guion corto:
- “Cambio de vista inmediato sin perder contexto.”
- “Es el mismo contenido, con distinta densidad de informacion.”
4) Project Card (unidad visual)
Que mostrar:
- Captura real de una tarjeta
Por que es importante:
- Resume estado, progreso y presupuesto en un bloque.
- Es el componente base de la UI.
Como funciona y que muestra:
- Incluye estado con badge, progreso con barra y cifras clave.
- Usa color para semaforizacion y lectura inmediata.
- Es reutilizable en grid y otras vistas.
Guion corto:
- “La tarjeta condensa lo esencial sin saturar.”
- “Badges y color facilitan lectura rapida.”
5) Toolbar (busqueda, filtros, exportacion)
Que mostrar:
- Captura real de la toolbar en proyectos
Por que es importante:
- Centraliza acciones clave y acelera la navegacion.
- Reduce pasos para filtrar y exportar.
Como funciona y que muestra:
- Busqueda por texto con actualizacion instantanea.
- Filtros por estado y otros atributos.
- Accion de exportacion para reporting rapido.
Guion corto:
- “Todo lo operativo esta en una sola barra.”
- “UX clara: buscar, filtrar, exportar.”
6) Filtrado ultra-rapido
Que mostrar:
- Captura del input de busqueda + snippet corto con
useMemo
Por que es importante:
- Respuesta instantanea sin recargar.
- Reduce friccion y mejora la percepcion de velocidad.
Como funciona y que muestra:
- Se memoiza la lista filtrada para evitar recalculos innecesarios.
- El filtro trabaja sobre el dataset cargado en memoria.
- La UI responde a cada pulsacion sin bloquear.
Guion corto:
- “El filtrado se calcula en memoria y se actualiza al vuelo.”
- “La UI responde en tiempo real incluso con listas grandes.”
7) Vista de detalle 360 grados
Que mostrar:
- Captura real del detalle con tabs
Por que es importante:
- Todo el proyecto en una sola pantalla, pero segmentado.
- Evita saltos entre paginas.
Como funciona y que muestra:
- Cabecera con informacion clave y acciones.
- Bloque de estadisticas y progreso.
- Tabs para tareas, Gantt y datos relacionados.
Guion corto:
- “Tabs para dividir informacion sin perder contexto.”
- “Reduce la carga cognitiva del usuario.”
8) Acciones criticas
Que mostrar:
- Captura del header del detalle con botones de accion
Por que es importante:
- Las acciones clave siempre visibles.
- Menos pasos para editar, exportar o cerrar.
Como funciona y que muestra:
- Botones de accion primaria con contraste y jerarquia.
- Acciones secundarias en menu contextual si existen.
- Se mantiene consistencia con el resto de headers.
Guion corto:
- “Acciones primarias en cabecera para operativa rapida.”
- “Mejora la eficiencia del flujo.”
9) Segmentacion de informacion
Que mostrar:
- Captura de tabs/resumen en detalle
Por que es importante:
- Cada seccion tiene su proposito.
- Mantiene coherencia y legibilidad.
Como funciona y que muestra:
- La informacion se distribuye por contextos (resumen, tareas, timeline).
- Se evita scroll excesivo y se mejora la orientacion.
- Los tabs conservan estado visual y posicion.
Guion corto:
- “La informacion se agrupa por contexto, no por pantalla.”
- “Facilita la navegacion mental.”
10) Data mapping (Dolibarr -> UI)
Que mostrar:
- Captura del mapper en
types/project.ts
Por que es importante:
- Dolibarr devuelve datos crudos; la UI necesita formato amigable.
- Se estandarizan fechas, estados y etiquetas.
Como funciona y que muestra:
- Se transforma
statusen etiquetas legibles y colores. - Fechas pasan de timestamp a formato local.
- Presupuesto y progreso se normalizan para la UI.
Guion corto:
- “El mapper convierte datos de API en modelos de UI consistentes.”
- “Esto evita errores y mejora la claridad para el usuario.”
11) Tolerancia a fallos
Que mostrar:
- Captura del banner de error con boton Reintentar
Por que es importante:
- El sistema comunica fallos sin bloquear al usuario.
- Permite recuperar la operacion rapidamente.
Como funciona y que muestra:
- Mensaje de error claro y accion inmediata.
- Estado de fallo visible sin romper la UI.
- Reintento vuelve a lanzar la peticion.
Guion corto:
- “Mensaje claro + accion inmediata.”
- “Se mantiene la confianza en la interfaz.”
12) Estados de carga (skeletons)
Que mostrar:
- Captura real de skeletons en dashboard
Por que es importante:
- Evita pantallas vacias durante la carga.
- Mantiene jerarquia visual.
Como funciona y que muestra:
- Se renderizan placeholders con la misma estructura que el contenido real.
- El usuario entiende que hay informacion en camino.
- La percepcion de rendimiento mejora aunque la red sea lenta.
Guion corto:
- “El usuario sabe que la informacion llegara.”
- “Mejora la percepcion de rendimiento.”
13) Producto final (desktop / tablet / detalle)
Que mostrar:
- Tres capturas reales: dashboard desktop, vista movil, detalle
Por que es importante:
- Demuestra consistencia visual en distintos contextos.
- Refuerza que el producto esta terminado.
Como funciona y que muestra:
- Layout responsive con breakpoints.
- Sidebar y tablas se adaptan a pantalla.
- Mismo lenguaje visual en todas las resoluciones.
Guion corto:
- “UI coherente en escritorio, movil y detalle.”
- “Experiencia continua sin cambios de lenguaje visual.”
14) Conclusiones (Frontend + UX)
Que mostrar:
- Slide de conclusiones sin capturas
Por que es importante:
- Cierre claro con tres ideas fuertes.
Como funciona y que muestra:
- Escalabilidad: componentes reutilizables y layout consistente.
- UX: busqueda y filtrado minimizan tiempo de acceso.
- Frontend: stack moderno y cohesion visual.
Guion corto:
- “Escalabilidad: arquitectura modular para crecer.”
- “UX: acceso rapido a informacion clave.”
- “Frontend: stack moderno y UI consistente.”
15) Arquitectura de UI (resumen tecnico)
Que mostrar:
- Esquema simple: datos -> mapeo -> componentes -> vistas
Por que es importante:
- Explica el flujo completo de datos hacia la interfaz.
- Justifica por que la UI es estable y mantenible.
Como funciona y que muestra:
- Los servicios obtienen datos desde Dolibarr.
- El mapper convierte datos crudos a formato UI.
- Componentes reutilizables construyen las vistas.
Guion corto:
- “La UI consume datos normalizados y los presenta en componentes.”
- “Esto hace la interfaz escalable y consistente.”
16) Sistema de diseno (tokens y componentes)
Que mostrar:
- Captura de variables/tokens en
app/globals.css
Por que es importante:
- Garantiza coherencia visual.
- Facilita cambios globales de estilo.
Como funciona y que muestra:
- Variables CSS para color, tipografia y espaciado.
- Componentes de UI consistentes con Tailwind + shadcn/ui.
- Estilos utilitarios sin CSS ad-hoc.
Guion corto:
- “Tokens = coherencia y escalabilidad visual.”
- “Componentes reutilizables evitan duplicar estilos.”
17) Accesibilidad y usabilidad
Que mostrar:
- Captura con componentes nativos (botones, inputs) y estados focus
Por que es importante:
- Mejora la experiencia para todos los usuarios.
- Cumple buenas practicas de accesibilidad.
Como funciona y que muestra:
- Uso de elementos semanticos y aria cuando aplica.
- Contraste suficiente en badges y botones.
- Navegacion por teclado en menus y formularios.
Guion corto:
- “La UI es usable con teclado y mantiene buen contraste.”
- “Se prioriza accesibilidad desde la base.”
18) Rendimiento percibido
Que mostrar:
- Captura de skeletons y un ejemplo de renderizado rapido
Por que es importante:
- La velocidad percibida es clave en productos de gestion.
- Mejora la sensacion de fluidez.
Como funciona y que muestra:
- Carga progresiva con placeholders.
- Evita flashes de contenido sin estilo.
- Componentes optimizados para renderizar rapido.
Guion corto:
- “La carga se siente inmediata aunque haya espera real.”
- “Eso mantiene al usuario en flujo de trabajo.”