Una lupa suele asociarse con búsqueda, pero otros símbolos admiten varias interpretaciones. Una estrella puede significar favorito, destacado o calificación. Un icono sin texto también necesita un nombre que puedan utilizar tecnologías de asistencia. Para una web de cursos, los símbolos de guardar, compartir y ver detalles deben distinguirse antes de activarlos. Elegir una biblioteca visual consistente ayuda a la apariencia, pero no resuelve por sí solo el significado. El diseño debe decidir qué función cumple cada icono y qué información adicional necesita la persona para entenderlo en ese contexto.
Clasificar función antes de elegir el dibujo
Distingue iconos que decoran, acompañan una etiqueta o actúan como único contenido de un control. Los decorativos no necesitan anunciarse como si aportaran información nueva. Los funcionales deben comunicar acción o destino. WAI explica que la alternativa de una imagen funcional describe lo que hace el control, no solamente su apariencia. En la web de cursos, un corazón que guarda una actividad requiere un nombre relacionado con guardar, no una descripción literal del símbolo. Esta clasificación evita tanto controles mudos como interfaces que repiten nombres de imágenes irrelevantes en cada tarjeta o sección.
Añadir texto cuando el significado no sea evidente
Si varias personas interpretan el símbolo de maneras distintas, acompáñalo con una etiqueta visible. Un texto de ayuda que aparece al pasar el ratón no debería ser la única explicación disponible, porque otros métodos de entrada no reproducen ese gesto de la misma forma. Considera además el contexto cultural y el idioma de la interfaz. Un dibujo asociado a una acción en una aplicación puede no tener el mismo significado en tu web. La prueba consiste en preguntar qué ocurrirá antes de pulsar, no en explicar el icono y luego comprobar si la persona recuerda la respuesta esperada.
Mantener nombres y estados coherentes
Un control de guardar puede cambiar a quitar de guardados después de activarse, o mantener una etiqueta estable junto con un estado claramente comunicado. Define el comportamiento con el equipo y comprueba que nombre, apariencia y acción no se contradigan. Si el icono solo cambia de color, añade otra señal de selección. Revisa que la etiqueta accesible incluya contexto suficiente cuando existen varios controles iguales, como guardar un curso concreto. No conviertas cada nombre en un párrafo: la información debe permitir distinguir la acción sin hacer que navegar por una lista resulte innecesariamente largo o repetitivo.
Probar interacción y tamaño real
Recorre los controles con teclado, escucha sus nombres con apoyo técnico y pulsa en un dispositivo táctil. Comprueba área activa, foco y separación entre acciones. Un icono reconocible todavía puede ser difícil de usar si su superficie es diminuta. Evita que un símbolo de compartir abra directamente un destino inesperado sin indicación. Documenta la relación entre icono, etiqueta y función en la guía de componentes. Cuando se cambie la biblioteca gráfica, revisa significados en lugar de reemplazar archivos automáticamente; una figura visualmente parecida puede comunicar otra cosa y alterar la experiencia aunque el código de la acción no haya cambiado.
DE LA LECTURA A LA ACCIÓN
Para aplicar hoy
- Clasifica iconos según decoración, apoyo o acción.
- Los controles necesitan nombres que expliquen su función.
- Verifica significado, estado y área de interacción como un conjunto.
Fuentes y referencias
Documentación para profundizar. Los ejemplos de esta guía son didácticos.