Diseño de UX
Aplicabilidad
- Aplicar al diseño, implementación, modificación, revisión, optimización o guía de principios de experiencia de tareas de producto solicitadas para escritorio, móvil y web. Las tareas solo de backend, solo de base de datos y otras sin interacción con el usuario final están fuera del alcance de este skill.
- Este skill funciona de forma independiente al flujo de trabajo SDLC y se puede instalar por separado. Para tareas que también involucran jerarquía visual, tipografía, color, diseño, geometría de controles o movimiento, utilice las guías de UI disponibles, como
sdlc-ui-design, para esas decisiones. - Cuando solo se solicite orientación sobre principios, proporcione una respuesta breve a ese nivel en lugar de expandirse al diseño, implementación o pruebas de aceptación específicos del producto.
- Para solicitudes solo de revisión, informe los hallazgos y recomendaciones sin crear un nuevo diseño ni cambiar la implementación.
- La exploración de diseño, propuestas, comparación de conceptos y validación de prototipos crean o modifican únicamente artefactos de diseño independientes. Cambie el código de producción solo cuando la solicitud incluya implementación.
- Para solicitudes mixtas, entregue el diseño antes de continuar con la implementación autorizada. Entregue y evalúe cada uno por separado; la validación del prototipo no establece la aceptación de la implementación.
- Para la implementación, siga las comprobaciones del proyecto existente. Cuando el entorno actual admita la reproducción de un defecto, utilice una verificación enfocada de ese defecto; elija las comprobaciones para otros cambios de comportamiento según su riesgo y alcance. No configure entornos de verificación adicionales, produzca informes de verificación formales ni duplique las comprobaciones existentes únicamente para cumplir con este skill.
- Para los resultados de la implementación, informe las comprobaciones realizadas, las observaciones y el alcance no verificado. Distinga entre evidencia en tiempo de ejecución, inferencia basada en código y juicio subjetivo; la autoevaluación del modelo no es aceptación del usuario.
Leer bajo demanda
- Siga los principios compartidos a continuación y lea las referencias de la plataforma para el objetivo y escenario reales.
- Escritorio: lea principios de escritorio.
- Móvil: lea principios móviles.
- Web: lea principios web.
- Para web móvil, lea tanto los principios móviles como los web. Para otras combinaciones, cargue referencias adicionales según las condiciones de los documentos seleccionados.
- Si la plataforma no está especificada, infiérala del contexto de la tarea y el proyecto primero. Para consejos generales, utilice solo los principios compartidos. Solicite aclaración solo si una tarea concreta aún carece de una decisión de plataforma necesaria.
- Para el contexto o los límites de una adaptación, consulte su entrada vinculada en contexto de fuentes y, cuando sea necesario, el pasaje original. Las instrucciones en inglés en este skill definen la adaptación local; la consulta no importa flujos de trabajo ni cadenas de herramientas ascendentes.
Entrega de diseño
Utilice esta sección para exploración de interacción, propuestas, comparación de conceptos o validación de prototipos, independientemente del tamaño del cambio. En tareas mixtas, se aplica a la parte de diseño; la entrega y aceptación de la implementación siguen los requisitos de la tarea y del proyecto existente.
- Presente los diseños de UX como un artefacto HTML interactivo de una sola página. Haga que las acciones principales, los cambios de estado relevantes y las acciones de retorno o recuperación necesarias sean operables en el prototipo. Verifique que los controles y la retroalimentación demuestren la operación prevista y distingan los estados relevantes. Contexto de fuentes.
- Por defecto, use CSS y JavaScript en línea para que el HTML se abra directamente. Utilice estado local y datos ilustrativos claramente identificados para demostrar el alcance de la interacción acordada.
- Para diseño combinado de UI/UX, use primero la generación de imágenes para la propuesta de UI y proporcione un prototipo HTML de UX interactivo. Si la generación de imágenes no está disponible o falla, use un artefacto HTML para ambos. Contexto de fuentes.
- Inspeccione el prototipo renderizado en el viewport previsto utilizando contenido real cuando esté disponible; de lo contrario, utilice contenido representativo claramente identificado. Contexto de fuentes.
- Lidere la entrega con la vista previa interactiva y el archivo HTML abrible. Mantenga el texto adjunto breve y limitado a instrucciones de apertura, alcance de la simulación y limitaciones necesarias.
Principios compartidos
Aplicación de los principios
- Aplique los principios relevantes para el trabajo solicitado, la plataforma de destino y el escenario.
- Explique las condiciones y compensaciones que afectan la recomendación.
- Antes de citar requisitos o recomendaciones numéricas, verifique su fuente, unidades y aplicabilidad a la plataforma de destino.
Principios de diseño
- Tareas y resultados: organice la interfaz de usuario según los objetivos del usuario y el orden de operación. Priorice la información y las acciones necesarias para la tarea actual. Evalúe cada superficie por lo que sus usuarios necesitan lograr allí. Contexto de fuentes.
- Puntos de entrada y controles: haga que los puntos de entrada principales sean detectables y que la acción prevista de cada control sea clara. Utilice etiquetas de botón que identifiquen las acciones y sus objetos; etiquete los iconos ambiguos. Contexto de fuentes.
- Semántica de iconos: determine la semántica de un icono a partir de su uso actual. Oculte los iconos decorativos redundantes junto al texto visible del árbol de accesibilidad. Proporcione una alternativa textual para iconos independientes significativos. Exponga el nombre accesible y el estado aplicable de un control de icono. Contexto de fuentes.
- Prioridad de tarea: en una pantalla orientada a tareas, deje que la pregunta que los usuarios necesitan responder primero determine el énfasis visual y el orden de lectura. Contexto de fuentes.
- Estructura de presentación: deje que las afirmaciones de una página de presentación y la evidencia de las mismas determinen qué secciones necesita y en qué orden. Contexto de fuentes.
- Contenido factual e ilustrativo: base las afirmaciones y la evidencia sobre productos, clientes o actividad comercial reales en hechos disponibles. Identifique claramente el contenido ilustrativo. Contexto de fuentes.
- Consistencia de datos: dentro del mismo alcance de informes, mantenga el mismo hecho coherente dondequiera que aparezca, y mantenga las cifras derivadas coherentes con sus datos subyacentes. Deje claras las diferencias en el alcance, período de tiempo o base de cálculo. Contexto de fuentes.
- Carga cognitiva: presente las opciones y el contexto necesarios para las decisiones, reduzca la memorización y la entrada repetida, y permita a los usuarios inspeccionar y cambiar los valores predeterminados. Revele las opciones complejas a medida que se vuelvan relevantes. Mantenga la información necesaria para una decisión disponible en el punto de elección, incluso al reducir los pasos. Contexto de fuentes.
- Aprendizaje: reduzca el esfuerzo mental innecesario introducido por la interfaz. Apoye el aprendizaje que ayuda a los usuarios a comprender y dominar su tarea. Contexto de fuentes.
- Simplificación: juzgue la simplificación por los obstáculos que elimina de la tarea del usuario. Preserve la funcionalidad necesaria, la información relevante para la decisión y la accesibilidad. Contexto de fuentes.
- Consistencia: siga las convenciones de interacción de la plataforma y el comportamiento consistente de los controles.
- Retroalimentación de estado y espera: muestre el lugar actual del usuario en la tarea o navegación, el estado del procesamiento y los resultados. Distinga entre carga, datos vacíos y fallo. Responda con prontitud a las acciones. Para operaciones largas, proporcione un estado confiable y muestre el progreso real cuando sea medible. Escale la retroalimentación a la importancia sin interrupciones frecuentes. Alinee la presentación y las acciones disponibles de cada estado con su significado; distinga entre estados de solo lectura, deshabilitados y en curso. Contexto de fuentes.
- Control del usuario: proporcione acciones de salida, cancelación y retorno detectables. Apoye deshacer y rehacer cuando corresponda y aclare qué cambios afectan. Explique las consecuencias antes de acciones irreversibles. Las transiciones visuales no deben impedir las acciones de retorno, cambio o cancelación compatibles. Distinga entre interrumpir una animación y cancelar una operación en segundo plano. Contexto de fuentes.
- Modalidad: reserve la interacción modal para tareas que requieran interrumpir el trabajo actual o proteger el enfoque. Contexto de fuentes.
- Prevención y recuperación de errores: establezca las restricciones de entrada y operación de antemano en el punto donde se apliquen. Solicite confirmación cuando las consecuencias lo justifiquen. Valide en momentos apropiados sin interrumpir la entrada incompleta. En caso de fallo, conserve la entrada válida, identifique el problema y su ubicación, explique las causas conocidas sin presentar conjeturas como hechos y ofrezca una ruta de recuperación.
- Conectividad y recuperación: para tareas que dependen de la red, deje claras las capacidades disponibles bajo conectividad limitada. Ofrezca acciones de respaldo o recuperación que el producto realmente admita. Contexto de fuentes.
- Lenguaje de interfaz: utilice un lenguaje que el público objetivo entienda. Conserve los términos de dominio familiares cuando transmitan el significado previsto con precisión. Contexto de fuentes.
- Operación accesible: admita el teclado y la tecnología de asistencia en el entorno de destino, con nombres de control, estados y enfoque identificables. Proporcione acciones equivalentes para la entrada de precisión o gestos complejos. Elija el comportamiento de interacción según las capacidades de entrada realmente disponibles. Haga que las acciones principales sean utilizables sin hover. Contexto de fuentes.