xeral[arroba]galinus.com

Artículos de Galinus >

Diseño de imágenes para una comunicación efectiva

Introducción

El uso de los iconos en las interfaces gráficas y en la web debería tener un objetivo muy concreto: ayudar a comunicar visualmente una función del sistema. Si colocamos imágenes con el único objetivo de decorar, estaremos introduciendo ruido que puede hacer más confusa nuestra web o programa.

Exponemos unos principios básicos para mejorar la capacidad comunicativa de las imágenes que utilicemos, reforzando la facilidad de uso de nuestra web o programa.

Características de una imagen para lograr una comunicación efectiva

Enumeramos las características principales que debe tener una imagen para mejorar su capacidad para comunicar.

Inmediatez

El objetivo es capturar rápidamente la atención y que la impresión que cause sea perdurable. Para esto, las imágenes deben ser claras, simples y equilibradas.

Las marcas comerciales buscan esta inmediatez y perdurabilidad con sus logotipos.

Forma y contornos simples, sin adornos innecesarios para lograr una imagen que se asimila sin esfuerzo.

Generalidad

Es la capacidad para representar una clase de objetos o una característica de estos, más que un objeto concreto.

Quitando detalles particulares podemos ir abstrayendo y creando una imagen más general. Si utilizamos una reproducción fiel de un objeto familiar se da la impresión de que el icono se refiere al objeto en sí, no a una clase de objetos o una función de esos objetos.

Representación de la función "calcular" en programa hipotético. El proceso de abstración hace más sencillo comprender la función del icono.

Cohesión

Cuando las imágenes aparecen juntas, situación muy común en las interfaces gráficas, deben guardar unha coherencia entre ellas con una relación visual muy clara.

El tipo de trazos, colores y tamaño ayudan a darle cohesión.

Botones de navegación del Safari. Todo los botones mantienen una unidad estética.	Botones de navegación del Explorer. El ligero relieve de las cuatro primeras imágenes contrasta con la pronunciada perspectiva de la quinta imagen. Los trazos de los tres primeros símbolos (flechas y cruz) son rectos mientras que en el cuarto son curvos.

Caracterización

Los objetos y su estado deben ser reconocibles. Un punto de vista adecuado y la exageración de rasgos característicos de un objeto ayudan a identificarlo.

Visto desde arriba un avión es más sencillo de identificar.	La exageración en la separación de las piernas y brazos hace más clara la actividad a la que se refiere esta imagen.

Tipos de imágenes

Un gran porcentaje de una interfaz gráfica es un sistema de señales. Codifican en imágenes funciones del sistema.

Las señales las podemos dividir en tres tipos, según la semiótica

• Iconos: describen el significado mediante una caracterización del propio significado. Es decir, siempre describen objetos tangibles.
• Índices: representación del significado por asociación de conceptos relacionados (por ejemplo, una imagen de humo para indicar fuego).
• Símbolo: representan un significado por pura convención.

Nota: debido a que la mayoría de las imágenes en una interfaz gráfica son del primer tipo (iconos), estas son conocidas popularmente por iconos, aunque formalmente puedan ser índices o símbolos.

Cada tipo de señal es adecuado para distintas situaciones.

¡¡Importante!! no mezclar en un mismo grupo de imágenes iconos, índices y símbolos. Los procesos mentales para interpretarlos son muy distintos y si aparecen juntos pueden crear confusión.

Técnicas para hacer imágenes efectivas

Lo primero que hay que hacer es pensar si es adecuado utilizar una imagen. Si así es, después determina qué tipo de señal hay que utilizar: icono, índice o símbolo.

• Si no quieres representar un concepto abstracto: icono o índice.
• Si la imagen va a ser utilizada constantemente y de un modo coherente, podemos decantarnos por un símbolo.
• Si lo que queremos codificar es un concepto abstracto, lo mejor es recurrir al texto.

Exemplos
Algunos iconos utilizados en el Dreamweaver.	Símbolos utilizados en el Windows XP en todas las ventanas para minimizar, maximizar y cerrar ventana.

Si queremos utilizar un icono o índice:

1. Escoge una representación fiel desde el punto de vista más representativo.
2. Determina el nivel de abstración preciso. La práctica te irá diciendo hasta dónde puedes llegar en este proceso.
3. Comenzar a quitar detalles innecesarios, experimentando continuamente con diferentes combinacions de los elementos que mejor identifiquen el objeto que se quiere representar.
4. Simplifica las formas empleando figuras geométricas.
5. Elimina contornos que no sean precisos. Juega con el espacio en blanco.
6. Si la imagen va a ser utilizada junto a otras, necesitas que tengan coherencia unas con otras: colores predominantes, tipo de trazos, tamaño, etc.

Este no es un proceso cerrado. El primer boceto probablemente sirva como punto de partida para una idea mejor. Y así sucesivamente hasta obtener el resultado deseado.

Comentarios finales

El diseño de imágenes para interfaces gráficas no es cuestión de habilidades artísticas, si no de la capacidad de plasmar un concepto en una imagen que hable por si sola. El objetivo es ayudar en la comunicación para hacer programas y webs más sencillas de utilizar.

Esto no quiere decir que la estética y la capacidad comunicativa sean incompatibles.

Una buena forma de seguir ampliando conocimientos es leyendo las guías de estilo para la creación de iconos de las grandes compañías de informática.

Enlaces

Guías de estilo de Apple para el diseño de iconos.

Bibliografía

Designing Visual Interfaces.

Kevin Mullet y Darrel Sano. Prentice Hall.