Principios de Usabilidad, Diseño de Interfaces y Accesibilidad

Flashcards de vocabulario técnico sobre las 10 heurísticas de Jakob Nielsen, diseño UX/UI, estructuras de grilla, técnicas de scrollytelling y pautas de accesibilidad WCAG.

Jakob Nielsen

Ingeniero de interfaces de usuario considerado el "padre de la usabilidad" y creador de las $10$ heurísticas de usabilidad.

Visibilidad del estado del sistema

Heurística que establece que el diseño debe mantener a los usuarios informados sobre lo que sucede mediante retroalimentación adecuada en un plazo razonable.

Ley de Jakob

Premisa que indica que los usuarios prefieren que un sitio web funcione igual a los que ya conocen, porque pasan la mayor parte del tiempo en otros sitios.

Mapeo natural

Cuando los controles de un diseño siguen las convenciones del mundo real y se corresponden con los resultados deseados, facilitando el aprendizaje y la memoria.

Control y libertad del usuario

Heurística que sugiere proporcionar una "salida de emergencia" clara, como deshacer o cancelar, para acciones realizadas por error.

Coherencia y estándares

Principio que dicta que los usuarios no deberían dudar si diferentes palabras o acciones significan lo mismo, siguiendo las convenciones de la plataforma y el sector.

Prevención de errores

Práctica de eliminar condiciones propensas a errores o solicitar confirmación antes de que el usuario realice una acción.

Descuidos

Errores inconscientes causados por la falta de atención del usuario.

Equivocaciones

Errores conscientes basados en una discrepancia entre el modelo mental del usuario y el diseño de la interfaz.

Reconocimiento en lugar de recuerdo

Heurística que busca minimizar la carga de memoria haciendo que los elementos, acciones y opciones sean visibles en lugar de obligar al usuario a recordar información.

Flexibilidad y eficiencia de uso

Inclusión de aceleradores (como atajos de teclado) que agilizan la interacción para usuarios expertos sin entorpecer a los novatos.

Diseño estético y minimalista

Principio que indica que las interfaces no deben contener información irrelevante, ya que cada unidad de información adicional compite con la información relevante.

Ayuda y documentación

Contenido fácil de buscar y enfocado en tareas concretas que ayuda al usuario a comprender cómo completar sus objetivos si el sistema no es autoexplicativo.

UX (Experiencia de Usuario)

Se enfoca en la sensación general del usuario, la utilidad y el funcionamiento lógico del producto; busca que sea útil y eficiente.

UI (Interfaz de Usuario)

Se enfoca en la apariencia visual, interactividad, tipografía y diseño responsivo para que la interfaz sea atractiva e intuitiva.

Atomic Design

Metodología de diseño compuesta por átomos (partículas mínimas), moléculas (unión de átomos) y organismos (grupos de moléculas).

Grilla digital estándar

Estructura que suele utilizar $\text{12}$ columnas para aplicaciones web, $\text{8}$ para tabletas y $\text{4}$ para dispositivos móviles.

Sistema de diseño

Conjunto de estándares, componentes reutilizables y patrones destinados a gestionar el diseño a gran escala con coherencia visual.

Scrollytelling

Técnica de diseño web donde el contenido se activa o transforma dinámicamente mediante el desplazamiento (scroll) del usuario.

Parallax Estructural

Efecto de movimiento donde el fondo y las capas de imágenes se mueven a diferentes velocidades para crear una sensación de profundidad real.

Sticky Positioning

Técnica donde un elemento se queda "pegado" en una posición de la pantalla mientras otros contenidos fluyen a su lado durante el scroll.

Site map

Herramienta gráfica que describe la arquitectura y estructura del contenido de un sitio web para su planificación y organización.

WCAG

(Web Content Accessibility Guidelines) Estándar internacional que define cómo hacer el contenido web accesible para personas con discapacidades.

Pilares de WCAG

La accesibilidad debe ser Perceptible, Operable, Comprensible y Robusta.

Nivel AA (WCAG)

El estándar de la industria que garantiza un equilibrio entre estética moderna y funcionalidad universal.

Target Size (Área de interacción)

Tamaño mínimo para clics; el estándar AA exige $24 \times 24 \text{ px}$, pero la recomendación de usabilidad real es de $44 \times 44 \text{ px}$.

Line-height accesible

El interlineado debe ser de al menos $\text{1.5}$ veces el tamaño de la fuente para mejorar la legibilidad.