Vocabulario en inglés de diseño UX/UI

Facilidad con que las personas alcanzan sus objetivos y cómo se sienten al usar un producto, servicio o sitio web, desde la primera visita hasta la ayuda posterior.

Pantallas, botones, menús, textos y otros elementos visuales con los que las personas interactúan con un producto.

Enfoque que sitúa las necesidades, objetivos y limitaciones de los usuarios en todas las etapas del diseño y guía las decisiones mediante investigación y pruebas con personas reales.

Persona o grupo afectado por un proyecto o con influencia en él, como responsables de producto, dirección, ingeniería, legal o clientes.

Mejorar un diseño en rondas sucesivas: crear una versión, probarla o revisarla, aprender del resultado, modificarla y repetir.

Etapa en que diseño entrega especificaciones, recursos y diseños terminados a desarrollo, idealmente con explicación y notas claras.

Reunión en la que diseñadores muestran trabajo en curso y reciben comentarios estructurados y sinceros sobre si cumple sus objetivos.

Situación poco frecuente que también debe funcionar, como un nombre muy largo, falta de internet o cientos de elementos guardados.

Enfoque para resolver problemas que parte de entender las necesidades de las personas y avanza por definir el problema, generar ideas, crear prototipos y probarlos.

Producto de trabajo concreto que una persona diseñadora o un equipo se ha comprometido a producir y entregar, como un informe, wireframes, prototipo o pantallas finales.

Ruta ideal por un proceso en la que todo sale según lo previsto: la persona introduce datos válidos, nada falla y completa la tarea sin obstáculos.

Modelo de proceso de diseño con cuatro fases —descubrir, definir, desarrollar y entregar— representadas como dos diamantes que muestran cómo primero se amplían y luego se acotan las ideas.

Estudio de quienes usan o podrían usar un producto, mediante entrevistas, observación, encuestas y pruebas, para entender sus necesidades, conductas y problemas.

Conversación individual, normalmente de 30 a 60 minutos, para conocer objetivos, hábitos, problemas y opiniones de usuarios o posibles usuarios.

Conjunto de preguntas escritas que se envía a muchas personas para reunir respuestas, opiniones o valoraciones comparables.

Comprensión nueva y útil sobre las personas, extraída de investigación, que explica su conducta y señala una oportunidad de diseño.

Investigación que recoge palabras, observaciones y relatos de pocas personas para entender por qué piensan y actúan de cierto modo.

Investigación que recoge cifras de muchos usuarios —por ejemplo puntuaciones, clics o tiempos— para medir comportamientos y patrones.

Revisión de los productos de competidores para entender cómo resuelven los mismos problemas, qué hacen bien o mal y dónde se puede mejorar.

Encontrar y seleccionar personas adecuadas para participar en una investigación, como entrevistas o pruebas de usabilidad, según criterios de edad, hábitos o experiencia.

Método para interpretar una investigación: se anotan observaciones en notas adhesivas y se agrupan las parecidas hasta que aparecen temas y patrones.

Perfil ficticio pero realista de un usuario típico, construido a partir de investigación y con nombre, objetivos, necesidades y frustraciones, que ayuda al equipo a diseñar para personas reales.

Conjunto completo de pasos y experiencias que una persona atraviesa para lograr un objetivo con un producto, incluso antes de abrirlo y después de terminar.

Problema, frustración u obstáculo concreto que experimentan los usuarios, como un paso confuso, una espera larga o una función ausente.

Línea temporal visual del recorrido de una persona que muestra etapas, acciones, pensamientos, emociones, dificultades y oportunidades.

Diagrama sencillo, normalmente dividido en cuatro áreas, que registra qué dice, piensa, hace y siente una persona usuaria.

Momento o canal en que una persona interactúa con una empresa o producto, como anuncio, sitio, correo, aplicación o llamada de soporte.

Forma en que se organizan, agrupan y etiquetan el contenido y las funciones de un sitio o aplicación para que las personas encuentren lo que buscan y sepan dónde están.

Diagrama o secuencia de pantallas, pasos y decisiones que sigue una persona para completar una tarea, como restablecer la contraseña.

Menús, enlaces, pestañas y otros elementos que permiten recorrer un sitio o una app y saber dónde está la persona.

Diagrama, normalmente en forma de árbol, que muestra las páginas o pantallas principales de un sitio o aplicación y cómo se agrupan y conectan.

Método de investigación en que participantes agrupan temas escritos en tarjetas según categorías que les resultan naturales.

Fila de enlaces, normalmente cerca de la parte superior, que indica la ubicación de la página en la estructura del sitio.

Método de investigación que comprueba si las personas encuentran elementos en la estructura de un sitio usando un menú de texto sin diseño visual.

Dibujo sencillo, normalmente en blanco y negro, que muestra la ubicación del contenido, los botones y la navegación, sin colores, imágenes ni estilos definitivos.

Versión inicial e interactiva de un producto o pantalla que se puede recorrer para probar ideas antes de construirlas.

Imagen estática y realista de una pantalla o producto que muestra los colores, tipografías, imágenes y espacios finales, pero no permite hacer clic.

Describe un diseño, esquema o prototipo temprano, sencillo y rápido de modificar, sin colores ni contenido detallados.

Describe un diseño o prototipo que se parece y responde casi como el producto final, con contenido, colores, imágenes e interacciones reales.

Prototipo con pantallas enlazadas en que pulsar botones o enlaces lleva a otra pantalla, como en un producto real.

Facilidad, rapidez y eficacia con que las personas usan un producto para completar una tarea, y satisfacción que sienten durante el proceso.

Método de investigación en el que usuarios reales intentan completar tareas con un producto o prototipo mientras una persona investigadora observa dónde tienen dificultades.

Método que muestra dos versiones de una página o función a grupos distintos de usuarios reales y mide cuál funciona mejor.

Revisión en que especialistas comparan una interfaz con principios aceptados de usabilidad para hallar problemas sin probarla con usuarios.

Técnica en que participantes dicen lo que piensan, buscan y sienten mientras usan un producto, para que quien investiga siga su razonamiento.

Persona que participa en una sesión de investigación, como entrevista o prueba de usabilidad, y suele corresponder al perfil de usuarios objetivo.

Porcentaje de participantes que completan correctamente una tarea en una prueba de usabilidad; métrica sencilla y frecuente.

Prueba de usabilidad en la que una persona investigadora guía cada sesión en directo, presencialmente o por videollamada.

Informe visual que usa colores, de azul frío a rojo intenso, para mostrar dónde las personas hacen más clic, se desplazan, miran o pasan la página.

Parte del diseño que define cómo se comporta un producto cuando alguien lo usa: qué ocurre al tocar, escribir, deslizar o esperar, y cómo responde el sistema.

Señal que el sistema da tras una acción —cambio de color, indicador de carga o mensaje de éxito— para comunicar qué ocurrió.

Cualidad de un objeto o elemento que sugiere cómo usarlo, como un botón elevado que parece pulsable o un asa que invita a tirar.

Primeros pasos que reciben a usuarios nuevos, les ayudan a entender y configurar el producto y a conseguir un primer resultado satisfactorio.

Idea que una persona se forma sobre cómo funciona algo a partir de experiencias previas y que determina lo que espera del producto.

Esfuerzo mental que una persona necesita para comprender y usar algo; si es excesivo, puede ralentizarla, confundirla o hacer que abandone.

Cualquier aspecto de una experiencia que ralentiza al usuario o dificulta una tarea, como pasos extra, etiquetas poco claras, formularios largos o una carga lenta.

Momento pequeño y específico de interacción con respuesta propia, como indicar que un elemento se guardó o que una contraseña es incorrecta.

Aspecto de un elemento cuando el puntero está encima, por ejemplo un botón que se oscurece para indicar que es interactivo.

Movimiento de los dedos en una pantalla táctil, como tocar, deslizar, pellizcar o mantener pulsado, que indica una acción.

Textos breves de una interfaz, como etiquetas, pistas, errores y confirmaciones, que guían al usuario durante una tarea.

Diseño que engaña o presiona a las personas para que hagan algo que no pretendían, como ocultar el botón de cancelar o mostrar una cuenta atrás falsa.

Principio según el cual el tiempo para alcanzar un objetivo depende de su distancia y tamaño: los objetivos grandes y cercanos se alcanzan más rápido.

Elemento que se pulsa o toca para ejecutar una acción, como enviar un formulario, guardar cambios o abrir un menú.

Botón, enlace o mensaje breve que invita a dar el siguiente paso, como registrarse o iniciar una prueba gratuita.

Menú inicialmente cerrado que muestra opciones cuando se pulsa, para elegir sin ocupar espacio todo el tiempo.

Ventana que aparece sobre la pantalla actual y bloquea el resto hasta que la persona responde o la cierra.

Imagen pequeña o símbolo que representa una acción, objeto o idea, como una lupa para buscar o una papelera para borrar.

Texto que informa que algo salió mal y, de ser posible, explica qué ocurrió y cómo corregirlo, por ejemplo junto a un campo.

Casilla de un formulario o interfaz donde se escribe información, como nombre, correo o término de búsqueda.

Contenido que muestra una pantalla cuando todavía no hay datos, como una bandeja vacía o una cuenta nueva sin proyectos.

Pequeño cuadro de texto que aparece al pasar el cursor, enfocar o tocar un elemento para explicar brevemente su función o nombrar un icono.

Cuadro pequeño que se marca o desmarca para elegir una opción; en un grupo pueden seleccionarse varias casillas.

Control que activa o desactiva un ajuste con un toque y normalmente aplica el cambio de inmediato.

Icono de tres líneas horizontales que abre un menú de navegación oculto, usado a menudo para ahorrar espacio en móviles.

Contenedor rectangular que agrupa contenido relacionado con un elemento, como foto, título y precio, y que suele enlazar a más detalles.

Uso del tamaño, color, contraste, espacio y posición para que las personas perciban primero los elementos más importantes y lean el resto en un orden claro.

Organización de textos, imágenes, botones y otros elementos en una página o pantalla, incluidas sus dimensiones, posiciones y espacios.

Elección y disposición de familias tipográficas, tamaños, grosores, interlineado y espaciado entre letras para facilitar la lectura y dar tono al diseño.

Enfoque en que la disposición se adapta automáticamente a distintos tamaños de pantalla, de teléfonos a monitores grandes.

Espacio vacío entre y alrededor de elementos que da aire al contenido, agrupa elementos relacionados y facilita la lectura.

Conjunto de columnas, filas y espacios invisibles que permite colocar y alinear elementos de forma coherente en una página o pantalla.

Conjunto definido de colores de un producto o marca, normalmente con tonos principales, secundarios, neutros y de estado.

Forma en que los elementos se alinean por un borde o eje común, lo que ordena la composición y facilita recorrerla visualmente.

Cantidad de espacio entre elementos o dentro de ellos, como la separación entre tarjetas o el relleno de un botón.

Ancho de pantalla en el que cambia una composición adaptable, por ejemplo cuando tres columnas pasan a una o la navegación se convierte en un icono de menú.

Que coincide exactamente con el diseño original en dimensiones, espacios y colores, píxel por píxel.

Colección compartida de componentes reutilizables, reglas, tokens y documentación que mantiene coherentes los productos de una empresa y ayuda a los equipos a desarrollarlos más rápido.

Bloque reutilizable de una interfaz, como botón, tarjeta o campo, diseñado una vez para mantener el mismo aspecto y comportamiento en distintos lugares.

Documento que fija reglas visuales y de escritura de una marca o producto, como colores, tipografía, logotipo, iconos y tono.

Valor con nombre que representa una decisión visual, como color, tamaño de fuente o espaciado, compartida entre diseñadores y desarrolladores.

Colección lista para usar de elementos de interfaz, como botones, formularios e iconos, que permite diseñar pantallas con rapidez.

Solución probada y reutilizable para un problema común de interfaz, como sugerencias en la búsqueda, desplazamiento infinito o un pago en varios pasos.

Práctica de diseñar productos que las personas con discapacidad puedan percibir, comprender y utilizar.

Diferencia de luminosidad entre texto o icono y fondo que determina su visibilidad, especialmente para personas con baja visión.

Programa que lee en voz alta el contenido de la pantalla o lo envía a una línea braille; lo usan sobre todo personas ciegas o con baja visión.

Estándar internacional del W3C que explica cómo hacer accesibles sitios y aplicaciones.

Descripción breve de una imagen incorporada al código, que el lector de pantalla lee y el navegador muestra si la imagen no carga.

Estilo visible, normalmente un contorno, que señala el elemento seleccionado al recorrer una página con el teclado.

Desplazarse por una interfaz y utilizarla solo con el teclado, sobre todo con Tab, Mayús+Tab, Intro, Espacio y las flechas, sin ratón.

Enfoque que contempla la diversidad humana, incluida capacidad, edad, idioma, cultura y situación, para que más personas puedan usar un producto.