Iconografía

Los iconos rara vez comunican su función de manera univoca sin contexto textual. Nielsen Norman Group identifica solo tres iconos con reconocimiento casi universal: home, imprimir y la lupa de busqueda. Cualquier icono fuera de ese conjunto exige un label visible en todo momento. Revelar el label solo en hover no cuenta: el usuario en móvil nunca lo ve. En una prueba de usabilidad, 0% de los usuarios interactuo con un icono de reloj que representaba "páginas vistas recientemente".

La dificultad de elegir un icono es un predictor directo de cuanto tardara el usuario en interpretarlo. Si el equipo tarda más de 5 segundos en acordar que icono usar para una función, esa función no tiene representación iconica natural: requiere label obligatorio o debe abandonarse el icono por completo. Como resume Bruce Tognazzini, "una palabra vale más que mil imagenes" cuando la metafora no existe.

Ocultar opciones de navegación detras de un icono reduce significativamente que los usuarios las encuentren, tanto en escritorio como en móvil. NN/g midio una caida de más de 20% en descubribilidad con navegación oculta frente a navegación visible. El daño es mayor en escritorio: los usuarios fueron 39% más lentos con un hamburger (31s vs 23s en la misma tarea); en móvil, 15% más lentos. Si hay espacio, deja la navegación visible como tab bar o barra con labels.

Mezclar iconos de familias distintas (unos outlined, otros filled, unos de esquinas redondeadas y otros angulares) dentro de la misma interfaz introduce ruido visual y rompe la percepción de sistema. El cerebro interpreta la variación de estilo como señal de significado distinto. Una única familia con grosor de trazo, esquinas y grid consistentes comunica unidad y permite tratar los iconos como vocabulario predecible.

El tamaño visual de un icono (p.ej. 16x16 px) puede ser mucho menor que su área de toque real, y eso es correcto: el padding alrededor del icono forma parte del target. WCAG 2.2 SC 2.5.8 fija un mínimo de 24x24 CSS px en Nivel AA; SC 2.5.5 exige 44x44 CSS px en AAA, alineado con Apple HIG (44 pt) y Material Design (48 dp). Un icono pequeño con poco padding falla el criterio aunque se vea bien.

Un lector de pantalla no puede inferir la función de un botón a partir de un SVG sin texto alternativo. WCAG 4.1.2 exige que el nombre de todo componente sea determinable programaticamente. La técnica correcta es aria-label en el elemento accionable, describiendo la acción y no el icono ("Cerrar modal", no "X"). Si también existe aria-labelledby, este sobreescribe al aria-label.

Cuando un icono acompana a un label de texto y no aporta información adicional, exponerlo al lector de pantalla genera ruido redundante. WCAG 1.1.1 permite omitir el texto alternativo del contenido decorativo siempre que pueda ser ignorado por la tecnologia de asistencia. aria-hidden="true" elimina el elemento y todos sus hijos del arbol de accesibilidad, sin afectar la visibilidad visual.

Los usuarios han invertido años en aprender que lupa = buscar, engranaje = configuración y campana = notificaciones. Introducir metaforas alternativas para estas funciones impone un coste de aprendizaje sin beneficio (NN/g documenta el corazón significando "me gusta" en una app y "guardar" en otra). Implementa los iconos como SVG inline, no como fuente de iconos ni <img>: permite heredar currentColor, controlar color, tamaño y estado con CSS, y animar paths.