En mi opinión el diseño de iconos se encuentra en un periodo de transición. Por un lado, cada vez hay más pantallas con resoluciones mayores, de ahí al aumento del tamaño de los iconos. Pero también tenemos los iconos de 16×16 e incluso más pequeños, que siguen siendo ampliamente utilizados. Así que estos son los errores más comunes en el diseño de iconos…

1. Insuficiente diferenciación entre iconos

Muchas veces en un set de iconos tenemos muchos que se parecen y es bastante difícil distinguir uno de otro. Si no lees las leyendas que lo acompañan, fácilmente te equivocarás.

Iconos de la sección de Utilidades en Mac OSX. Siempre me confundo y lanzo la aplicación que no toca. Este problema se hace mas gordo cuando los iconos son de tamaño reducido.

El problema se agrava más cuando se reduce el tamaño de los iconos.

2. Demasiados elementos en un mismo icono

Cuanto más simple sea el icono, mejor. Es preferible mantener el número de elementos dentro del icono al mínimo.

Sin embargo, los diseñadores de Microsoft, inspirados por el nuevo formato de los iconos de Windows Vista, decidieron hincharlos para justificar el hinchado presupuesto.

Cada icono representa una mini-historia con una trama. El problema es que al hacerlos pequeños es imposible saber que representan. Incluso con el tamaño correcto ya cuesta saber que significan.

3. Elementos innecesarios

Un icono debe ser fácil de leer. Cuantos menos elementos tenga, mejor. Y es mejor aún si la imagen entera es relevante, no sólo una parte de ella. Por lo tanto tienes que prestar atención al contexto donde se encuentran los iconos.

Echa un vistazo a estos iconos de bases de datos por ejemplo:

A primera vista, todo parece bien.

Pero si este programa ( o una barra de herramientas ) trabaja solo con bases de datos, podemos ( y deberíamos ) eliminar la parte innecesaria.

El sentido no se ha perdido y los iconos son mucho mas distinguibles.

Aquí tenemos un ejemplo real de elementos innecesarios en iconos de BeOS 5:

Los signos de verificación aquí son absolutamente superfluos. Por cierto, ¿por qué están en rojo?.

4. Carencia de una misma línea de diseño en un set de iconos

Una línea de diseño de dice cuando un conjunto de elementos tiene algo en común, colores, estilos, perspectiva, tamaño, dibujo o cualquier propiedad que los identifique como una unidad. Si hay solo unos pocos iconos, es fácil para el diseñador mantener en la cabeza estas reglas para ir creando otros con la misma línea de diseño. Pero si se trata de una cantidad mucho mayor, como iconos en un sistema operativo, ya no es sólo un diseñador el que se encarga de la tarea, sino varios, y es entonces cuando tiene que existir unas instrucciones comunes de cómo diseñar los iconos.

Una multitud de estilos en el archivo shell32.dll de Windows XP. Estos son los iconos por defecto sugeridos al usuario.

5. Perspectiva y sombras innecesarias en iconos pequeños

El progreso no se detiene: las interfaces han ganado potencia y ahora son capaces de mostrar objetos semi-transparentes, usar más colores y ahora la tendencia está en hacerlos en 3D. ¿Pero es realmente útil para todos? ¡No siempre! Sobre todo si estamos hablando de iconos pequeños de 16×16 o más aún.

Por ejemplo, tomemos el gestor de aplicaciones de RedHat 9:

La perspectiva en iconos tan pequeños es innecesaria e incluso contraproducente.

Y este es el gestor de aplicaciones de Windows XP:

Como norma, los iconos en Windows XP tienen 2 pixels de sombra en negro, pero en tamaños como 16×16 la sombra aparece demasiado grande y hace a los iconos parecer sucios. El libro de direcciones ( Address Book ) se lleva la peor parte en este set.

6. Metáforas demasiado originales

Lo que se muestra en un icono es un compromiso entre reconocimiento y originalidad. Antes de desarrollar una metáfora para el icono (imagen) es una buena idea como han solucionado el problema los demás. Tal vez la mejor solución no es la más original, sino más bien la adopción a una solución existente.

Un ejemplo de excesiva originalidad es el icono de la papelera de OS/2 Warp 4, que en realidad no es una papelera sino una trituradora de papel.

Otro de los problemas con la elección de una trituradora es que no hay ninguna que se le parezca. El icono parece una impresora con un pulpo escondido dentro. Lo que está claro es que no es una solución acertada.

7. Nacionalidades o características sociales no es están teniendo en cuenta

Siempre es necesario tener en cuenta las condiciones en las que el icono se va a mostrar. Un aspecto importante en este caso es el de las características nacionales. Las tradiciones culturales, el entorno y los gestos pueden diferir radicalmente de un país a otro.

Si nos dicen que tenemos que dibujar un icono para trabajar con correo electrónico, tiene perfecto sentido usar la metáfora real de un buzón de correo por ejemplo:

Estas imágenes son cortesía del artículo de la wikipedia titulado “Post box“.

La respuesta puede encontrarse en el manual sobre la creación de iconos para MacOSX. “Usa elementos universales que las personas reconocen fácilmente. Evita centrar la atención en un aspecto secundario del elemento. Por ejemplo, para un icono de correo, un buzón rural sería menos reconocible que un sello de correos”

La idea de usar un sello está bien, pero el uso del halcón de cola roja en la imagen, es sin duda cuestionable.

Sin embargo, no sólo tienes que tener presente las características nacionales…Esto me recuerda algo divertido. Una vez, necesitábamos un icono que representara un filtro de datos, que a menudo se usa la metáfora de un embudo. Se señala como esto:

La respuesta del cliente fue la siguiente: “¡No entiendo por que para un filtro me dibujas un icono con forma de vaso de Martini!

8. Imágenes de elementos de la interfaz dentro de los iconos

El manual sobre la creación de iconos para MaxOSX nos advierte:”Evita el uso de elementos de la interfaz Aqua en tus iconos, podrían confundirse con la propia interfaz.”

Puedes hacer clic en uno de los radiobuttons representados pero en realidad lo que has clicado es el icono entero.

Este por ejemplo es un interesante ejemplo de la interfaz de OmniWeb:

Presta atención a los botones anterior y siguiente, que botones tan raros con leyendas debajo. Sin embargo no son botones, ¡son iconos!

9. Texto dentro de los iconos

Este error es muy común en iconos de programas. Es evidente que la primera cosa que te viene a la mente cuando trabajas sobre un icono de una aplicación es adaptar el logotipo del programa al tamaño del icono. ¿Cual es el problema en insertar texto dentro del icono?. En primer lugar, está directamente relacionada con el idioma y por tanto impide la localización. En segundo lugar, si el icono es pequeño es imposible leer el texto. En tercer lugar, en el caso de los iconos de las aplicaciones, el texto se repite en el nombre del programa.

10. Dibujando fuera del marco de trabajo

Por regla general, este problema se produce si has dibujado el icono en un programa de tratamiento vectorial. Con tamaños grandes todo se ve bien, pero en realidad los iconos son pequeños y con un número de pixels limitados, así que cuando reduzcamos el tamaño y pasemos de vector-mapa de pixels, el anti-aliasing suavizará los bordes.

(libre traducción de turbomilk, visto en anieto2k)