Técnicas
Técnicas prácticas de UX: card sorting, A/B testing, evaluación heurística, affinity mapping, y métodos hands-on que puedes aplicar de inmediato.
55 artículos
Accesibilidad en móvil: tamaños, gestos y reflujo que sí importan
La accesibilidad móvil no tiene estándar propio: se aplica WCAG 2.2 a pantallas pequeñas. Tamaño de objetivos, reflujo, gestos, guías de Apple y Android.
Actualizaciones Optimistas y UX de Rollback
Aprenda a diseñar actualizaciones optimistas para que su aplicación se sienta instantánea al usuario, y cómo gestionar los fallos de red con experiencias de rollback elegantes.
Affinity Mapping
Aprende a usar el Affinity Mapping (Mapeo de Afinidad), una técnica colaborativa para organizar grandes cantidades de datos cualitativos, como ideas de brainstorming u observaciones de entrevistas, y encontrar patrones significativos.
Áreas táctiles: tamaños mínimos y espaciado para móvil
Qué es un área táctil, qué tamaño mínimo piden WCAG, Android y Nielsen Norman Group, y por qué el espaciado entre controles importa tanto como el tamaño.
Card Sorting
Aprende qué es el Card Sorting, una técnica de investigación de UX fundamental para diseñar una Arquitectura de la Información intuitiva, entendiendo cómo tus usuarios agrupan y categorizan el contenido.
Chunking en los Flujos de UI: Fragmentación Inteligente
Aprenda a aplicar el chunking en sus interfaces y flujos de usuario para fragmentar la información en bloques manejables, reduciendo la carga cognitiva y mejorando la tasa de éxito.
Cómo escribir mensajes de error que ayuden a corregir
Un buen mensaje de error dice qué pasó, dónde y cómo corregirlo, sin culpar a la persona. Reglas del NN/g y la heurística 9 de Nielsen, con ejemplos.
Control de Explosión de Variantes (Wrangling Systems)
Aprenda a optimizar y simplificar la arquitectura de sus componentes de Figma para evitar una explosión de variantes inmanejable y mejorar el rendimiento de sus archivos de diseño.
Crazy 8's
Descubre Crazy 8's, un ejercicio de ideación rápida y fundamental en los Design Sprints que te fuerza a generar 8 ideas de diseño en 8 minutos para explorar una amplia variedad de soluciones.
Datos Cuantitativos
Entiende qué son los Datos Cuantitativos en UX y cómo se diferencian de los datos cualitativos. Aprende a usar métricas para medir el comportamiento del usuario a gran escala.
Decisiones de Intrinsic Layout: Contenido VS Cajas
Aprenda a tomar decisiones de diseño basadas en la lógica intrínseca para crear layouts que se adapten de forma inteligente al contenido sin depender de rejillas rígidas.
Decisiones de Layout: Grid vs Intrinsic
Aprenda a elegir entre un diseño basado en rejillas (Grid) y uno basado en contenido (Intrinsic) para crear layouts digitales fluidos y modernos.
Diseño de APIs de Componentes: Predictibilidad y Flexibilidad
Aprenda a diseñar APIs de componentes robustas y coherentes que faciliten el handoff entre diseño y desarrollo, reduciendo errores y acelerando la construcción de productos.
Diseño de dashboards: menos gráficos, más decisiones
Un dashboard sirve cuando ayuda a decidir. Cuántas métricas mostrar, qué poner arriba, cómo usar filtros y drill-down y cómo separar vistas por rol.
Diseño de formularios: labels, orden y longitud
Un buen formulario mantiene las etiquetas visibles, ajusta el tamaño de los campos y marca los opcionales. Qué dicen el NN/g, GOV.UK y un estudio de CHI 2014.
Diseño de páginas de configuración: cómo organizar los ajustes de una app
Cómo diseñar páginas de configuración: agrupa ajustes, elige valores por defecto, añade búsqueda y decide cuándo guardar. Patrones y errores comunes.
Dot Voting
Una técnica de votación rápida y visual que revela consenso del equipo sin discusión extensa—esencial para talleres de priorización.
Empty states: el primer vacío también se diseña
Un empty state es la pantalla que se muestra cuando no hay datos. Aprende los tipos (primer uso, sin resultados, sin datos), qué decir y qué acción ofrecer.
Escala tipográfica: ritmo y jerarquía en una interfaz
Una escala tipográfica es un conjunto limitado de tamaños asignados a roles. Cómo construirla, qué números usar de partida y por qué el tamaño no basta.
Estados de Carga: La Espera Indulgente en UX
Aprenda a diseñar estados de carga que reduzcan la ansiedad del usuario, comuniquen el progreso del sistema y mejoren la percepción de velocidad de su producto digital.
Estrategia de Aliasing y Herencia de Tokens
Aprenda a implementar una estrategia de aliasing y herencia de tokens de diseño para crear sistemas altamente flexibles, mantenibles y preparados para múltiples temas.
Estrategias de Escalado Responsivo: UI Líquida
Aprenda a elegir y aplicar diferentes estrategias de escalado responsivo para que sus componentes y layouts se adapten con fluidez a cualquier tamaño de pantalla.
Evaluaciones Heurísticas
Aprende a realizar una Evaluación Heurística, un método de inspección de usabilidad para identificar problemas de diseño en una interfaz, basándote en principios de usabilidad reconocidos.
Filtros y búsqueda facetada: cuándo usarlos y cómo mostrar lo aplicado
Los filtros excluyen resultados y la búsqueda facetada combina varios por categoría. Cuándo usar cada uno y cómo mostrar los filtros aplicados en web y móvil.
Gestión de Foco: La Navegación sin Ratón
Aprenda a diseñar y gestionar el foco de navegación en su producto digital para asegurar una experiencia fluida para usuarios de teclado, lectores de pantalla y tecnología asistiva.
Gestos en móvil: descubribilidad y alternativas
Cómo diseñar gestos en móvil que el usuario descubra, con alternativas de un solo toque según WCAG 2.5.1, y cuándo un gesto no debe ser la única vía.
Identidad visual accesible: marca, color y contraste sin conflicto
El logotipo está exento de contraste en WCAG, pero el resto de la identidad visual no. Qué exigen 1.4.3 y 1.4.11 al color de marca y cómo auditar una paleta.
Jerarquía de botones: primario, secundario y terciario
La jerarquía de botones define la acción principal, las secundarias y las destructivas. Reglas de Carbon y PatternFly para usar, agrupar y ubicar los botones.
Lógica de Constraints y Auto Layout en Figma
Domine la lógica avanzada de Constraints y Auto Layout en Figma para crear componentes y layouts responsivos que se adapten perfectamente a cualquier tamaño de pantalla.
Matemáticas del Contraste de Color: Legibilidad y Ratio
Aprenda las reglas matemáticas y los ratios de contraste exigidos por las WCAG para asegurar que su diseño de interfaz sea legible para personas con baja visión y daltonismo.
Microcopy: las palabras pequeñas que guían
El microcopy es el texto corto de una interfaz: botones, etiquetas, ayudas y errores. Sus tres funciones según el NN/g y cómo escribir botones y placeholders.
Modales, drawers y popovers: cuándo usar cada uno
Un modal bloquea la pantalla hasta que la persona responde; un popover no. Cuándo usar modales, drawers y popovers según el NN/g, Carbon y Atlassian.
Modo oscuro: más que invertir colores
Un modo oscuro bien diseñado no es invertir blanco y negro: exige rehacer superficies, elevación, saturación y contraste. Qué dicen las guías y la evidencia.
Notificaciones y toasts: cuándo interrumpir y cuándo no
Un toast es un aviso breve que aparece y desaparece. Cuándo usarlo para confirmar una acción, cuándo no, y cómo evitar que se pierda o moleste.
Organización de Props de Componentes: Estructura y Jerarquía
Aprenda a organizar y priorizar las propiedades (props) de sus componentes para crear una experiencia de usuario más intuitiva para los diseñadores y desarrolladores que consumen su sistema de diseño.
Paginación vs. scroll infinito vs. cargar más: cuál elegir y por qué
Paginación, scroll infinito y cargar más resuelven el mismo problema de listas largas de formas distintas. Cómo elegir según la tarea, el footer y el teclado.
Paletas y tokens de color: cómo organizar el color de un sistema
Una paleta es el conjunto de tonos de una marca; los tokens le dan nombre y función. Cómo estructurar colores primitivos, semánticos y de tema con control.
Patrones de autocompletado: sugerencias de búsqueda y campos que se rellenan solos
Patrones de autocompletado en búsqueda y formularios: límites de sugerencias según Baymard, atributos autocomplete de HTML y el criterio WCAG 1.3.5.
Patrones de estados de error: qué mostrar cuando algo sale mal
Los estados de error son las pantallas y mensajes que aparecen cuando algo falla. Patrones para validación, fallos de sistema y recuperación, según WCAG y NN/g.
Patrones de navegación: tabs, sidebar, bottom nav y menú hamburguesa
Los patrones de navegación definen cómo se encuentra cada sección de tu producto. Compara tabs, sidebar, barra inferior y menú hamburguesa con datos del NN/g.
Patrones de onboarding: tours, tooltips, checklists y estados vacíos
Los patrones de onboarding ayudan a empezar sin un tutorial obligatorio. Compara tours, tooltips, checklists, divulgación progresiva y datos de ejemplo.
Peligros del Input Masking: Usabilidad vs Formato
Aprenda por qué las máscaras de entrada (input masks) pueden ser una trampa de usabilidad y descubra estrategias alternativas para guiar al usuario sin frustrarlo.
Principios de animación funcional: moverse con un propósito
La animación funcional explica un cambio, dirige la atención o confirma una acción. Duraciones de NN/g, easing, frecuencia y movimiento reducido.
Prototipado en papel: probar ideas con lápiz y cartulina
El prototipado en papel usa bocetos dibujados o impresos para probar una interfaz antes de programarla. Cómo se hace, qué encuentra y dónde se queda corto.
Pruebas con Lectores de Pantalla: El Oído del UX
Aprenda a realizar pruebas con lectores de pantalla de forma efectiva para verificar que su diseño y arquitectura de información sean accesibles para usuarios ciegos o con discapacidad visual.
Roles, permisos y estados de usuario en la UI: qué mostrar cuando no se puede
Si un rol o permiso impide una acción, la interfaz puede ocultar, deshabilitar o explicar. Criterios de Nielsen, SAP y OWASP, con accesibilidad y seguridad.
Salvaguardas para Acciones Destructivas: Fricción Positiva
Aprenda a diseñar salvaguardas y mecanismos de fricción intencionada para evitar que sus usuarios realicen acciones irreversibles de forma accidental en su producto digital.
Selectores de fecha: el componente más odiado y cómo diseñarlo bien
Cuándo usar tres campos, un calendario o un input nativo para fechas, y cómo cumplir WCAG con formatos claros, mensajes de error útiles y entrada manual.
Tablas de datos: diseño para escanear, comparar y actuar
Una tabla de datos debe permitir encontrar, comparar y actuar sobre filas. Cómo alinear números, marcar el orden y usar el marcado accesible del W3C.
Timing de Validación en Formularios: Recompensa y Reglas
Aprenda cuándo es el momento óptimo para validar los datos de sus formularios para reducir la interrupción del flujo del usuario y mejorar la tasa de conversión de sus interfaces.
Tree Testing
Tree Testing es una técnica de investigación UX que mide la encontrabilidad de temas en la arquitectura de información de un sitio. Los usuarios ubican ítems en una jerarquía de solo texto, sin la influencia del diseño visual ni la navegación.
UX de búsqueda: caja, sugerencias y resultados sin callejones
La UX de búsqueda abarca la caja, el autocompletado y la página sin resultados. Qué recomienda Baymard, qué errores se repiten y cómo diseñar la salida.
UX de checkout: quitar fricción sin quitar confianza
Cómo quitar fricción del checkout sin perder confianza: compra como invitado, costes visibles, solo los campos necesarios y errores que hacen abandonar.
Wizard of Oz: probar antes de construir, con una persona detrás
Wizard of Oz es una técnica en la que una persona simula las respuestas de un sistema que aún no existe. Aprende cuándo usarla, cómo prepararla y su ética.
Wizards y steppers: tareas largas en pasos sin perder al usuario
Cuándo usar un wizard o un stepper para tareas largas, cuántos pasos conviene, cómo mostrar el progreso y cómo revisar las respuestas antes de confirmar.