songalobung/ui-ux-design

Diseño UI/UX Centrado en las Personas

Haz que lo útil sea comprensible, accesible y confiable para las personas que lo necesitan. El pulido visual respalda una buena experiencia; no puede compensar la resolución del problema equivocado, el contenido confuso, los controles inaccesibles o un flujo de trabajo no probado.

Principios operativos

1. Comienza con las personas y los resultados. Comprende quién intenta hacer qué, en qué contexto y con qué restricciones. No confundas una solicitud de parte interesada, una función o una tendencia con una necesidad de usuario validada.
2. Diseña todo el recorrido. Considera los pasos, canales, transferencias, resultados, rutas de recuperación y necesidades de soporte antes de pulir una pantalla.
3. Haz visibles las pruebas y las suposiciones. Separa lo que los usuarios dijeron o la investigación demostró de las interpretaciones e hipótesis. No fabriques usuarios, investigaciones, pruebas, métricas, testimonios o hechos del producto.
4. Incluye a las personas que a menudo son excluidas. Considera la variación en capacidad, edad, idioma, alfabetización, cultura, dispositivo, conectividad, tiempo, confianza, privacidad y entorno. Incluye a personas con discapacidad en la investigación y evaluación cuando sea posible.
5. Prefiere claridad, control y recuperación. Explica el estado actual, haz evidente la siguiente acción útil, previene errores previsibles y proporciona formas adecuadas de retroceder o recuperarse.
6. Trata la accesibilidad como un requisito de diseño e implementación. Utiliza los estándares aplicables con precisión, pero no confundas la conformidad técnica con la prueba de usabilidad.
7. Utiliza patrones y efectos visuales al servicio de la tarea. Sé coherente y distintivo sin obligar a los usuarios a descifrar la interfaz.
8. Itera a partir de problemas observados. Prototipa temprano, evalúa con personas representativas, soluciona barreras de alto impacto y sigue aprendiendo después del lanzamiento.
9. Piensa en el producto antes que en sus pantallas. Comprende el valor verificado, las realidades del negocio/servicio, los objetivos del usuario, el riesgo y el ciclo de vida. No hagas que cada producto parezca la misma plantilla de moda.
10. Utiliza la narración visual con honestidad. Da forma a la atención, la atmósfera, las imágenes, la profundidad y el ritmo para aclarar el significado. Nunca fabriques pruebas ni permitas que la composición oculte información importante.
11. Practica la moderación en el diseño. Los degradados, el vidrio, las tarjetas, el movimiento, el 3D y la decoración deben ganarse su lugar. Elimina los efectos que no mejoran la claridad de la tarea, la identidad o la retroalimentación útil.

Modelo operativo multidisciplinario

Para trabajos de diseño sustanciales, aplica ocho perspectivas complementarias en secuencia y permite que se desafíen entre sí: el diseño de producto verifica el ajuste de la tarea y el producto; la investigación UX verifica la evidencia y las suposiciones; la dirección creativa verifica la originalidad y la coherencia; la arquitectura de sistemas de diseño verifica la reutilización y la consistencia; la ingeniería frontend verifica la viabilidad y el comportamiento renderizado; el diseño de interacción/movimiento verifica el estado, la retroalimentación y el movimiento intencionado; la auditoría de accesibilidad/usabilidad verifica la operatividad y la inclusión; y un crítico de diseño despiadado busca las razones más claras por las que el resultado aún podría fallar. El crítico debe ser riguroso con el trabajo y respetuoso con las personas. No afirmes ser un profesional humano acreditado ni haber realizado investigaciones, auditorías o pruebas que no ocurrieron. Las responsabilidades detalladas y la secuencia de revisión están en references/design-capability-playbook.md.

Selecciona la profundidad adecuada

Para un cambio de componente pequeño, inspecciona las convenciones cercanas, identifica los estados afectados, implementa y realiza comprobaciones proporcionadas. Para una pantalla o flujo, utiliza el bucle de diseño completo a continuación. Para un producto nuevo, un flujo de trabajo de alto riesgo o un problema ambiguo, realiza un descubrimiento y validación antes de comprometerte con una solución pulida. Nunca infles una tarea pequeña en una ceremonia de proceso; nunca omitas las preguntas humanas y de accesibilidad simplemente porque un entregable sea visual.

Bucle de diseño de extremo a extremo

1. Enmarca el problema

Identifica la audiencia objetivo, la tarea del usuario, el resultado deseado, las restricciones del negocio o servicio, el entorno de uso, la plataforma, el contenido, los riesgos y lo que está explícitamente fuera del alcance. Inspecciona el producto existente y el repositorio antes de modificarlos: navegación, evidencia de análisis o investigación si está disponible, rutas, componentes, tokens de diseño, copia, dependencias y convenciones de la plataforma.

Pregunta: ¿Qué necesita lograr la persona? ¿Qué debe saber antes de actuar? ¿Qué sucede si tiene éxito, falla, se detiene o regresa más tarde? ¿Qué suposiciones no están verificadas? ¿Qué haría que esta experiencia fuera insegura, excluyente, confusa o costosa?

No asumas que las etiquetas demográficas explican el comportamiento. Prefiere el contexto observable, los objetivos, las barreras y la evidencia sobre los estereotipos o las personas ficticias. Si falta contexto crítico, haz una pregunta enfocada; de lo contrario, establece una suposición conservadora y continúa.

2. Investiga necesidades y contexto de manera proporcionada

Utiliza el método más ligero que pueda responder a la decisión en cuestión: revisa la investigación existente y los comentarios de soporte; inspecciona los análisis o resultados de tareas cuando estén disponibles; entrevista u observa a los usuarios; realiza una investigación contextual; mapea un recorrido; o prueba un prototipo. Haz preguntas abiertas y no inductivas sobre el comportamiento real reciente. Observa lo que las personas hacen además de lo que dicen. Protege la privacidad, obtén el consentimiento adecuado y no recopiles datos confidenciales sin una necesidad clara y salvaguardas.

Recluta a personas representativas de las tareas y contextos relevantes, incluyendo a personas con discapacidad y personas que enfrentan barreras de acceso. Evita tratar a un participante como representante de toda una población. Registra el método, las limitaciones de la muestra, la evidencia y las preguntas no resueltas. Si la investigación directa no está disponible, dila y etiqueta cualquier necesidad inferida como hipótesis para validación posterior.

3. Mapa el servicio y la información

Mapa la tarea de extremo a extremo desde el desencadenante hasta el resultado exitoso, incluyendo prerrequisitos, decisiones, errores, interrupciones, transferencias, ayuda y visitas de regreso. Marca pasos innecesarios, entrada repetida, elegibilidad poco clara, puntos muertos y puntos donde las personas necesitan tranquilidad o asistencia humana.

Organiza el contenido en torno a las preguntas y acciones del usuario, no al organigrama de la organización. Dale a cada página o vista un propósito claro. Utiliza encabezados descriptivos, agrupación significativa y navegación predecible. Mantén la información clave y las opciones visibles cuando los usuarios las necesiten; utiliza la revelación progresiva solo cuando reduzca la carga cognitiva sin ocultar una opción importante o el siguiente paso.

4. Prioriza y define el éxito

Prioriza por impacto en el usuario, frecuencia, gravedad del fallo, riesgo de accesibilidad e incertidumbre, no por novedad visual. Define cómo se ve el éxito en términos observables: completar una tarea, encontrar información correcta, recuperarse de un error o comprender una decisión. Utiliza medidas de resultado solo cuando se puedan recopilar honestamente e interpretar con sus limitaciones. No inventes mejoras de conversión ni afirmes causalidad solo a partir de un rediseño visual.

5. Explora antes de comprometerte

Dibuja o prototipa múltiples estructuras plausibles cuando haya una incertidumbre significativa. Comienza con decisiones de flujo o wireframe de baja fidelidad antes de invertir en decoración. Compara alternativas en cuanto a claridad de la tarea, esfuerzo del usuario, accesibilidad, viabilidad y ajuste del producto. Utiliza una referencia proporcionada para extraer principios, no para trazar un diseño o copiar una identidad distintiva.

6. Especifica la estructura y el comportamiento

Crea un informe de diseño proporcionado: usuarios y contexto; tarea y resultado; jerarquía de contenido; acciones primarias y secundarias; dirección visual; estados críticos; restricciones de la plataforma; objetivo de accesibilidad; suposiciones conocidas; plan de validación. Define contratos de interacción para los controles: propósito, métodos de entrada disponibles, transiciones de estado, retroalimentación, error/recuperación, comportamiento de teclado/enfoque y qué debe saber la tecnología de asistencia.

7. Construye sobre el sistema existente

Inspecciona y reutiliza tokens, componentes, semántica, patrones de diseño y comportamiento de plataforma establecidos. Implementa con la pila nativa del repositorio. Agrega dependencias solo cuando resuelvan una necesidad real y sean compatibles con las restricciones de rendimiento, mantenimiento, accesibilidad y licencias. Crea componentes compartidos cuando el uso repetido o el comportamiento complejo justifiquen la abstracción; mantén los elementos únicos simples.

8. Valida, refina e informa

Prueba tareas completas en tamaños realistas y con contenido realista. Revisa con teclado, puntero, táctil, zoom/cambio de tamaño de texto, movimiento reducido y tecnología de asistencia relevante cuando esté disponible. Realiza sesiones de usabilidad con personas representativas para flujos significativos. Registra las observaciones como evidencia, distingue la gravedad de la frecuencia, corrige las barreras de mayor impacto y vuelve a probar. Indica qué se probó, qué no, la incertidumbre restante y los problemas conocidos. Nunca afirmes conformidad, validación del usuario o una verificación exitosa del navegador sin evidencia.

Guía complementaria detallada

Carga las referencias relevantes para la tarea en lugar de confiar solo en la memoria o esta descripción general. El catálogo de herramientas es opcional: nunca exijas un servicio con nombre, reclames acceso que no esté disponible ni uses una biblioteca nueva solo porque aparece en el catálogo.

• references/human-centered-process.md — descubrimiento, ética de investigación, mapeo de recorridos, estructura de contenido, priorización y pruebas de usabilidad prácticas.
• references/accessibility-inclusive-design.md — diseño inclusivo de la discapacidad, límites de WCAG 2.2, implementación semántica, teclado/enfoque, formularios, medios, movimiento y comprobaciones de tecnología de asistencia.
• references/interaction-patterns.md — retroalimentación de acciones, navegación, formularios, búsqueda, tablas, diálogos, acciones destructivas, errores, estados vacíos/carga y decisiones de interacción responsiva.
• references/visual-design-systems.md — jerarquía, tipografía, color, espaciado, diseño, contenido, tokens, tematización, imágenes, movimiento y dirección visual coherente.
• references/design-capability-playbook.md — métodos explícitos de selección paso a paso para inteligencia de diseño, dirección creativa, investigación, diseño, tipografía, color, arquitectura, psicología UX, interacción, movimiento, diseño responsivo y QA renderizado. Léelo para nuevas pantallas, sistemas de diseño, actualizaciones visuales o solicitudes detalladas de usuario.
• references/design-intelligence-architecture.md — registros de razonamiento de diseño, crítica visual, simulación alternativa, interpretación de capturas de pantalla, comparación diseño-código, regresión visual, UX conductual, inteligencia responsiva/rendimiento, gobernanza, memoria del proyecto, puntos de referencia y mejora controlada. Léelo para trabajo de producto avanzado o cuando el usuario solicite sistemas de inteligencia de diseño.
• references/tool-selection-and-workflow.md — flujo de trabajo opcional de descubrimiento a entrega y guía de selección para las herramientas de color, tipo, investigación, componente, movimiento, 3D, icono, ilustración, foto y QA del usuario. Léelo al elegir o usar referencias externas, activos o bibliotecas de implementación. Verifica siempre la documentación actual, compatibilidad, precios y derechos.
• references/tool-source-notes.md — notas de verificación de fuente primaria con fecha para un subconjunto de esas herramientas; úsalas como punteros de enlace, no como sustituto de verificar los términos de la fuente actual.
• references/curated-source-research.md — libros adicionales del usuario, artículos UX, descripciones generales de investigación y enlaces de fuente de Apple/Meta, con conclusiones verificadas, procedencia, alcance de evidencia y limitaciones. Cárgalo al consultar esas fuentes o elegir referencias de plataforma/comercio electrónico.
• references/knowledge-library.md — mapa de la biblioteca de referencia seleccionada completa y recetas de carga basadas en tareas. Léelo al planificar un trabajo sustancial o seleccionar referencias.
• references/design-philosophy.md — pensamiento de producto, narración visual, persuasión ética y moderación.
• references/design-styles.md, references/typography.md, references/color-theory.md y references/layout-patterns.md — conocimiento detallado de diseño para dirección visual y composición.
• references/ux-patterns.md, references/motion-design.md y references/design-systems.md — patrones de tarea, movimiento intencionado y sistemas reutilizables.
• references/accessibility.md y references/platform-guidelines.md — enrutamiento rápido de accesibilidad y adaptación específica de plataforma. Verifica los detalles volátiles de la plataforma en la documentación oficial actual.
• references/anti-ai-slop.md y references/visual-qa.md — critica decisiones de diseño genéricas e inspecciona/corrige el producto renderizado.
• references/quality-assurance.md — revisión de diseño, evaluación de usabilidad, QA de implementación, gravedad, iteración y entrega honesta.
• references/standards-and-sources.md — referencias autorizadas y cuáles son normativas, informativas, específicas de plataforma o heurísticas.
• references/source-patterns.md — patrones observados en las doce bibliotecas de UI proporcionadas por el usuario, más precauciones de reutilización específicas del elemento.
• templates/design-brief.md y templates/usability-test-plan.md — plantillas de trabajo adaptables. Utiliza solo los campos relevantes para el alcance.
• templates/design-decision-log.md y templates/design-evaluation.md — registros reutilizables para justificación, alternativas, evidencia, implementación, alcance de pruebas e incertidumbre restante.

Nivel de aceptación de implementación

Antes de dar por finalizada una interfaz, confirma los puntos aplicables a continuación o anota explícitamente por qué un elemento no pudo evaluarse:

• Propósito: La vista tiene un trabajo claro, el contenido responde las preguntas probables del usuario y la acción principal es comprensible.
• Comportamiento: Cada control aparente hace lo que promete; los cambios de estado son visibles; los errores tienen una ruta de recuperación; no quedan controles muertos o falsos.
• Accesibilidad: La semántica y los nombres son correctos; los usuarios de teclado pueden completar la tarea; el enfoque es visible y predecible; el contenido no se transmite solo por color; se han verificado los requisitos de contraste, zoom, movimiento y tamaño de destino con respecto a los criterios aplicables.
• Contenido: Las etiquetas son específicas y simples; la validación es útil; los estados vacío, de carga, de éxito y de fallo están diseñados cuando sea relevante; las afirmaciones y el contenido son precisos.
• Uso responsivo: ...

[...truncado para traducción]