Iconografía y patrones: función, construcción y uso

Funciones diferentes

Qué necesita comunicar cada recurso

En una identidad visual, un icono puede señalar una acción, una categoría o un estado. Un patrón puede aportar continuidad gráfica o representar información, como tramas diferentes en un gráfico. Definí esa función antes de elegir una forma.

La experiencia de uso requiere que las personas puedan entender y operar la pieza. Una familia visualmente coherente puede seguir siendo ambigua. Preguntá qué tarea ayuda a resolver cada icono y si necesita una etiqueta.

Estilos

Comparar técnicas sin asignarles una personalidad fija

No hay un estilo que funcione mejor para toda interfaz ni una técnica automáticamente más cercana o confiable. Compará símbolos reales, incluidas las formas que pueden confundirse. Si adaptás una biblioteca existente, comprobá que sus condiciones permitan el uso previsto y la modificación.

Construcción

Grilla y relaciones con margen para ajustes

Documentá dimensiones de trabajo, área útil, peso visual, trazos, terminaciones, esquinas, perspectiva y tamaños de uso. Definí cómo incorporar un icono nuevo y qué comprobación permite aceptarlo como parte de la familia.

IBM explica que su grilla orienta proporciones, formas y posición, y admite ajustes cuando una forma los necesita. Su documentación de uso también distingue centrado óptico de centrado mecánico. Es una referencia concreta para relacionar reglas y percepción; sus medidas no son estándares universales de iconografía.

Compará el conjunto a escala real, además de observarlo ampliado. Dos formas con igual grosor numérico pueden tener distinto peso aparente por su densidad o superficie. Una diferencia puede requerir ajuste, no necesariamente indicar un error.

Patrones

Repetición, lectura y codificación de información

Definí módulo, ritmo, escala, recorte, colores y zonas de aplicación. Probá el patrón con títulos, fotografías y bloques extensos. Si dificulta la lectura, compará menor presencia, otra ubicación o una superficie de lectura independiente.

No presupongas que todo patrón es decorativo. Si distingue series de un gráfico, necesita una leyenda comprensible. Si es sólo fondo, no debería introducir señales que se confundan con estados o controles. Su papel depende de la aplicación.

El criterio WCAG sobre uso del color exige una señal visual adicional cuando el color comunica información. Formas, texto o tramas pueden cumplir funciones distintas según el caso; no basta con cambiar dos tonos y asumir que se distinguen.

Comprobación

Comprensión, interacción y mantenimiento

Probá si la persona identifica la acción o categoría en la pantalla real. Cuando no sea claro, revisá el símbolo, añadí una etiqueta o reconsiderá su necesidad. No exijas que una metáfora nueva se entienda sólo porque el equipo conoce su explicación.

Diferenciá el dibujo del control interactivo. El área que se pulsa, el nombre accesible, el foco y los estados necesitan una implementación apropiada. Un archivo SVG bien construido no demuestra por sí solo que el botón pueda utilizarse con teclado o tecnología de asistencia.

Registrá nombre, significado, archivo vigente y usos. Si el mismo dibujo representa acciones distintas, revisá las posibles ambigüedades. Al retirar un recurso, localizá dónde se usa antes de eliminarlo del conjunto.

Ejemplo de aplicación

Dos acciones y un patrón con tareas distintas

Escenario ficticio. Ronda prepara una ficha con las acciones “Descargar material” y “Agregar al calendario”. Usa iconos acompañados por esas etiquetas y prueba si se entienden en la ubicación elegida. El patrón de líneas queda en el encabezado, fuera del área de instrucciones.

El equipo compara las dos acciones al tamaño de uso y verifica su implementación. Si las líneas del fondo se parecen a un control, cambia el patrón o su ubicación. Todavía necesita evidencia para afirmar que esos recursos identifican a Ronda sin el nombre; el estilo compartido no acredita ese reconocimiento.

Continuá con la fotografía y el estilo visual para coordinar las imágenes. Reuní reglas y archivos en las guías visuales, y usá la guía de identidad visual para revisar el conjunto.

Dudas frecuentes

Preguntas frecuentes

Fuentes consultadas

Bibliografía

1. IBM Design Language. UI icons: Design. Grilla, formas, trazos y ajustes de la familia.
2. IBM Design Language. UI icons: Usage. Tamaños previstos y alineación óptica.
3. W3C WAI. Understanding SC 1.4.1: Use of Color. Información visual adicional al color.