Semiótica y Retórica Visual Aplicada al diseño de Interfases: La Metáfora como elemento de Navegación.

Tema Específico

Semiótica y Retórica Visual Aplicada al Diseño de Interfases: La Metáfora como elemento de Navegación.

Planteamiento del Problema

La mayoría de los usuarios de sitios web no son expertos en computadoras y no están - ni tienen por qué estar - familiarizados con la terminología y funcionamiento técnico de estas. Por eso las interfases con las que interactuarán deben estar diseñadas para facilitar su uso de una manera intuitiva, natural, sin tener que aprender complicados términos y funcionamientos.

Actualmente mucho del diseño web en México es realizado por gente con transfondo técnico, más interesada en el funcionamiento de los sistemas que en la manera en que estos interactúan con el usuario o por diseñadores que sobrevalúan la estética y el valor de la experimentación sin darle importancia a facilitar los contenidos al navegante.

En ambos casos, el usuario se encuentra con trabas que no le permiten encontrar de manera sencilla y rápida la información en la que está interesado y esto, en sitios corporativos puede provocar a la larga ventas no concretadas.

Justificación

El tema elegido para este trabajo de investigación obedece a una necesidad de plantear métodos accesibles y estandarizados de diseñar interfases gráficas para la interacción humano-ordenador basados en el uso de formas y convenciones reconocibles, reminiscencias virtuales de objetos reales y tangibles con los que todos estamos más o menos familiarizados partiendo de la premisa de que la forma debe obedecer a la función y no al contrario.

Para lograrlo nos apoyaremos en materias fundamentales del diseño y la comunicación gráfica como la semántica, la semiología, la retórica visual, psicología del color y sintaxis de la imagen.

Interrogantes

1. ¿De qué manera podemos diseñar elementos gráficos para una interfase que al usuario le resulten familiares e intuitivos?
2. ¿Qué conceptos del diseño de objetos y señalizaciones reales pueden ser transportadas a un sistema de señalización virtual?
3. ¿Comó reducir la ambigüedad en la interpretación de los signos gráficos?

Objetivo General

Analizar y estudiar los problemas de diseño de las interfases a través de investigaciones de campo, proponiendo soluciones gráficas alternativas.

Objetivos particulares

• Recolectar información sobre metáforas visuales aplicadas a interfases de usuario.
• Producir ejemplos gráficos de interfases rediseñadas.
• Formular guías para el diseño y desarrollo de metáforas visuales aplicadas a interfases de usuario.

Hipótesis

• Una interfase confusa hace que el usuario pierda interés en utilizarla, de tener varias opciones elegirá aquella que le resulte más clara y sencilla de usar. Si por el contrario la interfase está diseñada no sólo para ser fácil de usar sino además para guiar al usuario de forma amigable esto se traducirá en una mejora del sitio como herramienta de venta.
• El uso de metáforas visuales ayudará al usuario a comprender mejor el funcionamiento de las interfases ya que hará una conexión mental entre los objetos físicos que ya está acostumbrado a usar.
• Una interfase gráfica tiene como función servir de mediador entre las aplicaciones y las personas que las usan, nunca deben tener un rol protágonico que opaque la importancia mayor del contenido.

Índice

Introducción

Tema específico

Planteamiento del problema

Justificación

Interrogantes

Objetivo Partícular

Objetívos generales

Hipótesis

Índice

I Conceptos Generales

• 1.1 Retórica Visual
• 1.1.1 Definición de retórica
• 1.1.2 Figuras retóricas
• 1.1.3 La retórica visual y su relación con el diseño gráfico
• 1.1.4 Metáforas Visuales
• 1.2 Interfaces de usuario
• 1.2.1 Concepto de interfaz.
• 1.2.2 Interfaz de Usuario

II Diseño Gráfico de interfaces

• 2.1 El papel de la disciplina de Diseño Gráfico en el diseño de Interfaces Gráficas de Usuario
• 2.1.1 Similitud del diseño de interfaces gráficas con otras áreas del diseño gráfico
• 2.1.1.1 Señalética
• 2.1.1.2 Semiótica
• 2.1.1.2 Imágen Global

III Sistemas de metáforas visuales

• 3.1 Uso de metáforas visuales en interfaces gráficas de usuario
• 3.1.1 LA necesidad de interfaces más intuitívas
• 3.1.2 ¿Por qué usar metáforas visuales en Interfaces Gráficas de Usuario?
• 3.2 Aplicaciones prácticas conocidas
• 3.2.1 El Escritorio
• 3.2.2 Las pestañas
• 3.2.3 Íconos
• 3.2.3.1 Sintaxis de los íconos

IV Líneamientos de diseño

• 4.1 Lineamientos para el diseño de metáforas visuales efectivas.
• 4.1.1 Errores comunes en uso de metáforas visuales.
• 4.1.2 Recomendaciones para diseñar sistemas de metáforas para una interfaz.

Conclusiones

1.1 Retórica visual

1.1.1 Definición de retórica.

De acuerdo con la wikipedia (1) La retórica (del griego ρητωρ, rhêtôr, “orador”) es una de las tres artes liberales originales o trivium (las otras son la dialéctica y la gramática). Y aunque ha tenido muchos significados diferentes durante sus 2,500 años de historia, actualmente es generalmente descrita como el arte de persuadír mediante el lenguaje. Asi, la retórica puede describir un tema o idea de una manera persuasiva con la intención de causar convencimiento.

La retórica es más usada en nuestro hablar diario de lo que nos damos cuenta. El lenguaje con el que nos comunicamos todos los días está retorizado. Sin darnos cuenta o muchas veces de forma intencionada, utilizamos metáforas para explicar algo, cambiamos el orden de los acontecimientos para crear mayor suspenso u omitimos ciertas palabras que sustituimos por gestos (2).

1.1.2 Figuras Retóricas.

Los tropos son figuras retóricas del lenguaje donde hay una mutación o traslación de significado, bien en lo interno (pensamiento) o en lo externo (palabra). En el primer caso y cuando hay sólo una simple asociación de ideas se produce la figura de pensamiento llamada perífrasis; si la asociación de ideas es de carácter comparativo, se produce la metáfora, el tropo por excelencia (4).

Otras formas de Tropos son la metonimia, la ironía y la sinécdoque. Pero la que nos ocupa en esta investigación son las metáforas.

1.1.3 La retórica visual y su relación con el diseño gráfico

La retórica visual es una rama relativamente reciente de la retórica que aplica los métodos del criticísmo retórico para explicar la comunicación visual entre emisores y receptores, La retórica visual trata cualquier manifestación visual como si fuera un acto deliberado de comunicación al mismo tiempo.

Todas las formas de comunicación visuales incluídas en la cultura y la historia del arte visual pueden ser consideradas dentro del dominio de las retóricas visuales. Los tropos visuales y el pensamiento trópico forman parte de la retórica visual (3). En un sentido concreto, la retórica visual puede ser definida como el arte de persuadir mediante el uso de imágenes.

El diseño gráfico, como forma de comunicación visual tiene una estrecha relación con la retórica visual que a menudo no es tomada en cuenta. El Diseño busca maximizar el impacto de una comunicación entre un emisor y un receptor, por las vías conjugadas del texto escrito, de la imagen o del signo. Su capacidad comunicativa se mide por la influencia que ejerce en el público y por la eficacia de los medios utilizados para difundir esos mensajes. Abraham Moles fue el que estableció, originariamente, la relación existente entre los fines y los medios del Diseño, y sobre su carga semántica denotativa (lo que quiere decir) y su carga estética connotativa (cómo nos atrae diciéndolo)(2).

La importancia de la comunicación visual se pone de manifiesto cuando analizamos las formas de lenguaje de culturas antiguas como los jeroglíficos egipcios, los pictogramas mayas y la escritura china que eran en parte al menos lenguajes ideográficos. Un ideograma es la representación visual de una idea ( o imagen mental) en contraposición a logograma que es la representación escrita de una idea (5). Actualmente los sistemas de signos ideográficos siguen presentes mediante el uso de la Señalética.

Señalética es es la parte de la ciencia de comunicación que estudia las relaciones fundamentales entre los signos de orientacion en el espacio y el comportamiento de los individuos (6). Ejemplos de señalética los podemos encontrar en todos lados: las señales de transito, las instrucciones de uso de los aparatos electrónicos, las señalizaciones de emergencia etc.

El objetivo de un ideograma es codificar mensajes más o menos complejos reduciendolos a conceptos simples representados en imágenes que luego serán decodificadas. Para ello los diseñadores de signos se valen de figuras retóricas, especialmente de los tropos para sustituír con imágenes simples el significado escencial de los mensajes — generalmente mas complejos— que se quieren transmitir.

1.1.4 Metáforas visuales

Una metáfora es una figura del lenguaje donde se realiza una comparación entre dos objetos que no tienene ninguna relación aparente (7). Un objeto es sustituído en una frase por un segundo objeto transmitiendole al primer objeto sus características explícitas e implícitas. Un ejemplo de metáfora es la conocída frase “El tiempo es oro” donde se transfieren las características de la palabra “oro” (valioso, escaso, preciado) a la palabra “tiempo” para dar a entender su valor.

Originalmente metáfora es una palabra griega que significaba transferír . Su etimología viene de meta que significa “cambio” y pherein que significa “llevar o trasladar”. Asi, la palabra Metáfora tiene a su vez un significado metáforico: “llevar o transferir un significado de una cosa a otra” (7).

Las metaforas visuales funcionan de una manera similar, se sustituye un mensaje complejo mediante una imágen más simple pero evocatíva que le transfiere a éste su significado. Por ejemplo cuando una empresa que produce jugos de frutas enlatados le pone a su producto una marca con un pictográma representando a un árbol está pretendiendo sustituír en la mente del receptor las características del producto (enlatado, industrializado, producido en serie etc.) por las del árbol (naturaleza,frescura,saludable). Eso es una metáfora visual.

• (1) Rhetoric - Wikipedia. (http://en.wikipedia.org/wiki/Rhetoric)
• (2) Roberto Gamonal , “David Carson contra Aristoteles: Analisis retórico del diseño gráfico” artículo publicado originalmente en Razón y Palabra No. 37 (http://www.cem.itesm.mx/dacs/publicaciones/logos/anteriores/n37/rgamonal.html)
• (3) Visual Rhetoric - Wikipedia (http://en.wikipedia.org/wiki/Visual_rhetoric)
• (4) http://www.bcl.jcyl.es/SalaExposiciones/Tropo1.html.
• (5) John Marstall, “A word wrapped in light” (http://www.firewheeldesign.com/sparkplug/articles/wwil/).
• (6) Joan Costa, “Señalética”, Ed. CEAC, España 1999.
• (7) Metaphor - Wikipwedia (http://en.wikipedia.org/wiki/Metaphor)

1.2 Interfaces de usuario

1.2.1 Concepto de interfaz.

Tambien se le llama Interfaz Humano-Máquina (Human Machine Interface) y se refiere a la “capa” que separa al humano que separa a un amaquina de la máquina misma (8). Para trabajar con un sistema, lo susuarios necesitan ser capaces de controlar y monitorear el estado del sistema. Por ejemplo, para conducír un automovil, el conductor usa el volante para controlar la dirección del vehículo, el pedal del acelerador y el pedal del freno para controlar su velocidad. El conductor puede percivír la posición del vehículo mirando a través del parabrisas y leyendo el velocímetro puede conocer la velocidad exacta del vehículo. La interface de el automóvil está compuesta por la totalídad de instrumentos que el conductor usa para cumplír las tareas de llevar y dirigir el automóvil.

1.2.2 Interfaz de Usuario.

Actualmente la gente tiende a interactúar más con tecnología basada en computadoras que con herramientas convencionales como martillos y taladros. A diferencia de éstas, la forma visible y ls controles de una computadora no comunican por si mismos su propósito. La tarea de de la interfaz de usuario es lograr que la función de determinada teconología sea autoevidente. Segun el IEC (Consorcio Internacional de Ingenieros, por sus siglas en inglés), de la misma manera que una herramienta debe ajustarse a la mano de quien la usa para hacer su tarea más facil de realizar una interfaz de usuario bien realizada debe facilitar la tarea mental que el usuario busca realizar (9)

Las interfaces de las primeras computadoras personales estaban basadas en líneas de comando como en el sistema operativo MS-DOS. En una interfaz de línea de comando el usuario introduce mediante el teclado ordenes o comandos indicandole al sistema que es lo que necesita que haga. Así, para conocer el contenído de el directorio actual, el usuario debía teclear dir y el contenido de archivos y carpetas del directorio actual era desplegado en la pantalla.

El problema con este tipo de interfaces fue que mientras son muy rápidas para realizar tareas simples, la sintáxis correcta del lenguaje del sistema al realizar tareas complejas puede ser demasiado dificil de entender para un usuario no avanzado y la curva de aprendizaje es demasiado pronunciada.

En 1984 Apple Computers libera la primera computadora comercialmente exitosa en contar con una Interface Gráfica de Usuario o “IGU”. IGU es una interfaz computacional que usa íconos y controles ademas del texto. El usuario interactúa con el sistema mediante un dispositivo apuntador como el ratón o mouse inventado por Douglas Engelbart para manipular esos íconos y controles. Esto fué ciertamente una revolución comparada con la mencionada interface de linea de comando en cuanto a facilidad de uso e intuitividad.(10)

• (8) User Interface - Wikipedia (http://en.wikipedia.org/wiki/User_interface)
• (9) IEC: The HUman-Machine Interface (http://www.iec.org/online/tutorials/hmi/topic01.html)
• (10). History f the grafical user interface - Wikipedia (http://en.wikipedia.org/wiki/History_of_the_GUI)

2.1 El papel de la disciplina de Diseño Gráfico en el diseño de Interfaces Gráficas de Usuario

2.1.1 Similitud del diseño de interfaces gráficas con otras áreas del diseño gráfico.

El diseño de interfaces gráficas de usuario es una disciplina relativamente nueva, que ha sido llevada a cabo mas a menudo por personas con un trasfondo más técnico que creatívo sobre todo porque muchas de las incursiones de los diseñadores gráficos en el web han sido mas bien desafortunadas por no entender completamente la naturaleza interactiva del medio y sus limitaciones (11).

Ahora, dado que la interfaz es el puente de comunicación entre la maquina y el usuario y el lenguaje que utiliza como medio es un lenguaje visual entonces es correcto afrontar el diseño de interfaces gráficas de usuario desde una perspectiva de comunicación visual. Mientras esta materia no forma parte actualmente de la curricula de nuestras universidades, podemos obtener bases conceptuales de otras ramas más consagradas de la carrera de diseño gráfico y comunicación visual y asi tener un fundamento para resolver los problemas gràficos que presenta el diseño de una interface gràfica de usuario.

A continuación, algunas ejemplos de especializaciones del diseño gráfico que pueden servir para orientarnos en el rumbo de esta investigación.

2.1.1.1 Señalética

Es la parte de la ciencia de la comunicación visual que estudia las relaciones funcionales entre los signos de orientación en el espacio y los comportamientos de los individuos. Al mismo tiempo es la técnica que regula y organiza estas acciones

La señalética nace de la ciencia de la comunicación social o de la información y la semiótica. Constituye una disciplina técnica que colabora con la ingeniería de la organización, la arquitectura, el acondicionamiento del espacio (_enviroment_) y la ergonomía bajo el vector del diseño gráfico. Se aplica, por tanto, al servicio de los individuos, a su orientación en un espacio o un lugar determinado, para la mejor y más rápida accesibilidad a ls servicos requeridos y para un amayor seguridad en los desplazamientos y las acciones.(6)

De la misma manera que la señalética, una interfaz gráfica de usuario tiene como misión orientar a los usuarios en el espacio virtual y guíarlos en la dirección correcta para cumplir una tarea determinada a traves de mensajes, pictogramas y estímulos visuales cuidadosamente diseñados para ese fin específico. Por eso se pueden heredar algunas de las características del diseño señalético al diseñod e interfaces graficas de usuario.

El sistema de mensajes no se impone, no pretende persuadír, convencer o influír en las desiciones de acción de los individuos. Sirve a estos para orientarse, esto es para que cada uno se oriente a si mísmo en función de sus motivaciones, sus intereses y necesidades particulares.

2.1.1.2 Semiótica.

La semiótica es la ciencia que estudia los procesos y los sistemas de significación. Estudia los sistemas de signos y la manera en que son percibidos, interpretados o decodificados por los individuos . La semiótica se puede usar como instrumento de investigación en las disciplinas maás diversas: espacio, tiempo, estética, música, arquitectura, pintura, fotografía, literatura, etc. (12)

A grandes rasgos, postula que mucho de lo que nos rodea puede constituír un signo ya que está sujeto a ser interpretado. La función del signo consiste en comunicar ideas por medio de mensajes. Esta operación implica un objeto, una cosa de la que se habla o referente, signos y por lo tanto un código, un medio de transmisión y, evidentemente, un destinador y un destinatario (13)

Visto desde una perspéctiva semiótica, los elementos de una interfase de usuario pueden descomponerse en signos que tienen una función muy específica, el significado, y que debe ser comunicada al usuario, el destinatario final del mensaje en forma clara y precisa.

El signo tiene varias funciones que cumplir, algunas de ellas son:

1. La funcion referencial

Es el objeto de la lógica, tiene como función esencial evitar la confusión entre el sigo y la cosa pues define las relaciones entre el mensaje y el objeto al que hace referencia.
Evitar la ambigüedad de interpretaciones entre los elementos de una interfaz gráfica es indispensable, ya que de otra forma se crea confución y la confusión trae frustración al usuario. Por eso debemos tener en mente referencias claras entre el signo gráfico y el significado abstracto al que hace referencia.

2. La funcion emotíva

Define las relaciones entre el mensaje y el emisor.
La función referencial y la función emotíva son ls bases complementarias y concurrentes de la comunicación.
Un sesgo emotívo en la interpretación que hace un usuario de un elemento gráfico puede afectar la percepción que tiene sobre este, por eso es indispensable conocer el público objetivo y hacer investigaciones de campo para evitar malos entendidos.

3. La funcion connotatíva

Define las relaciones entre el mensaje y el receptor, pues toda comunicación tiene por objeto obtener una reacción de este último.
La función connotatíva puede darse en dos níveles, el primero va dirigido a la inteligencia del receptor y de ahì derivan todos los códigos que tienen por objeto organizar la acciòn en comùn. El segundo va dirigido a la afectividad del receptor y ha adquirido una gran importancia con la publicidad, en la cual el contenido referencial del mensaje desaparece ante los signosque apuntan a una motivaciòn del destinatario, ya sea condicionandolo por repetición o desencadenando reacciones afectivas subconcientes.

4. La funcion poética o estética

Se refiere a la relación del signo consigo mismo. Es la función estética por excelencia: en las artes el referente es el mensaje que deja de ser el instrumento de la comunicación para convertirse en su objeto.
El exceso de ornamentación, y el enfoque estético son contraproducentes a la hora de diseñar interfaces gráficas de usuario. El sentido artístico no tiene cabida aquí, ya que debemos estar conciente que estamos diseñando meros instrumentos de navegación. La interfaz de usuario es un medio para ayudar al usuario a alcanzar un fín y no debe ser entendida como un fín en si misma.

5. La funcion fática

Mientras debemos procurar que los elementos de una interfaz no obstruyan la comunicación entre la maquina y la persona que la está operando, podemos sugerír caminos, resaltar opciones y guiar la atención del usuario de la manera que consideremos conveniente. La función fática de los signos tiene por objeto afirmar, mantener o detener la comunicación, para atraer la atención o asegurarse de que no decaiga.(13)
Esto es muy útil en aplicaciones sobre todo comerciales, que tienen como finalidad promover o vender sus productos y para lograrlo debemos guíar la atención del usuario receptor.

2.1.1.3 Imágen Global

Al ser la interface gràfica un sistema de comunicación, cuando se construya una para una empresa con un sistema de imagen global establecído, es necesario que ésta en su todo y cada uno de los elementos que la componen comuniquen ya sea connotatíva, emotiva o estéticamente, valores acordes a la imágen de la empresa.

El resultado del diseño — sea producto o mensaje — es la conjugación de:

• a) Unos objetívos de la empresa que se definen a partír de un plan de marketing, de las expectatívas y motivaciones del público, y de más intenciones precísas de comunicación.
• b) Un pliego de condiciones, en el que se precisan los fines, los medios y las premisas: En éste documento se resumen los objetívos del trabajo, asimísmo los datos estratégicos, técnicos y económicosy temporales, que inciden en el proyecto determinando la tarea del diseñador.
• c) Un procesod e diseño que está regido por el pliego de condiciones desarrollado según el plan mental y la orientación creatíva del diseñador. Este proceso mental es el design es decír, la disciplina que implíca las ideas de “proyecto, plan, programa y desarrollo del mísmo” (14)

Si no tenemos en cuenta estos puntos a la hora de diseñar nuestra interface, se provocará una discordancia entre lo que se ve, el mensaje emitído por los elementos gráficos, y la imágen corporatíva que a la empresa le ha costado establecer.

• (11). Print Design vs. Web Design, Jakob Nielsen (http://www.useit.com/alertbox/990124.html)
• (12) Semiótica y Diseño, Artículo escrito por Félix Beltrán Publicado en la revista a! Diseño, No. 67.
• (13) Pierre Guiraud, “La Semiología”, 27ava edición. Ed. Siglo Veintiuno Editores, 2003.
• (14) Joan Costa, “Imágen Global”, Ed. CEAC, España 1999.

3.1 Uso de metáforas visuales en interfaces gráficas de usuario

3.1.1 La necesidad de interfaces más intuitívas

Una de las cosas que resultan obvias cuando uno hace un aprueba de usabilidad — ya sea que esté uno probando sitios web, software o electrodomésticos— es la gran cantidad de gente que usa las cosas sin saber en realidad como funcionan o con ideas completamente erroneas acera de su funcionamiento.

De cara a cualquier tipo de tecnología, muy poca gente se toma el tiempo de leer instrucciones. En su lugar, avanzamos experimentando, haciendo historias, vagamente plausibles acerca de qué estamos haciendo y por qué funciona.

Para el usuario no es relevante saber como funcionan las cosas, en tanto que pueda usarla. No es un problema de inteligencia sino de falta de interés. Si logran hacer que algo funcione, no importa que tan mal lo haga, no buscarán otra manera de hacerlo. Si dieran con una mejor opción, seguro la usarían pero no la buscaran por ellos mismos.

La pregunta es, ¿Si de cualquier forma los usuarios intuyen como usar las cosas, que más da si entienden o no? y la respuesta es que importa y mucho. Porque mientras puede estar cada dia adivinando como usar una interfaz, este uso tiende a ser ineficiente y propenso a errores ademas de que no se logrará extraer todo el potencial de la aplicación.

Si los usuarios entienden, hay entonces una mejor oportunidad de que encuentren lo que buscan y cumplán sus objetivos, lo que es bueno tanto para el usuario como para el proveedor del servicio. Ademas, el usuario se sentirá mas inteligente y en control cuando use nuestro sitio, lo que garantizará su regreso. (15)

3.1.2 ¿Por qué usar metáforas visuales en Interfaces Gráficas de Usuario?

Para poder interactuar efectivamente con una aplicación es importante para los usuarios obtener un modelo cognitivo apropiado y relacionado a esa aplicación (16). Una manera simple de presentarle al usuario una funcion abstracta dentro de la funcionalidad de una aplicación es estableciendo una comparación entre esa funcionalidad y un objeto tangible del mundo real con el que estè familiarizado. Esto se logra mediante el uso de metáforas.Las metàforas contenidas en la interfase de usuario final de un aplicación son herramientas poderosas para el desarollo de modelos cognitivos y conceptuales (16).

Muchas de los lenguajes de las culturas antiguas eran visuales o ideográficos al menos en parte. Tomemos por ejmplo los jeroglificos egipcios, los pictogramas mayas y la escritura china son todos pro necesidad un tipo de atajos visuales. La clave de estos lenguajes era representar visualmente solo la cantidad necesaria para sugerir el objeto en cuestión. Lo que significa que mucha de la responsabilidad de completar los detalles faltantes reside en el lector, aunque este esfuerzo de descifrado se vuelve innecesario con el tiempo al acostumbrarse éste a saltar (mentalmente) de la imágen a la idea (5).

En este contexto, una metáfora es el uso de ina idea u objeto en lugar de otro para sugerir una similitud (16). Una metáfora visual es un ideográma que representa visualmente esa idea abstracta. La importancia de las metáforas reside en su habilidad para iniciar una transferencia cognitiva entre un dominio del conocimiento familiar hacia otro menos familiar.

• (15) Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability. New Riders Press; 2 edition (October 13, 2000)
• (16) The Use of Metaphors in Iconic Interface Design, by Stephen Richards, Philip Barker, Ashok Banerji, Charles Lamont and Karim Manji. Interactive Systems Research Group, Human-Computer Interaction Laboratory School of Computing and Mathematics, University of Teesside, Cleve, and, United Kingdom (http://www.intellectbooks.com/iconic/metaphor/metaphor.htm)

3.2 Aplicaciones prácticas conocidas

3.2.1 El Escritorio

La metáfora del escritorio (desktop) es una de las más populares y extendidas en las interfaces humano-computadora. ësta fué muy conscientemente utilizada en el diseño del entrono de la Apple Macintosh.

Es una metáfora compleja, ya que lleva contenída dentro de sí otras metáforas mas simples. Simula el entorno del sistema como un escritorio sobre el cual se colocan archivos, ficheros, carpetas, discos, etc. con los cuales interactuamos y organizamos la información almacenada en el sistema. Tambien en el escritorio virtual de la computadora podemos encontrar otros objetos como el cesto de basura, un calendario o un reloj que permiten al usuario accesar a otros aspectos funcionales del sistema de una manera intuítiva.

Su función es fácil de entender para un usuario,aun sin entrenamiento formal en informática. Ya que puede trasladar los conocimientos adquiridos en su experiencia con objetos tangibles al entorno virtual e informático. Ésto es un logro muy significatívo de las interfaces gráficas sobre las antíguas Interfaces de Línea de Comando. Si el usuario abre una carpeta y se encuentra con fichero que cree que no deberìa estar ahí, simplemente lo arrastra con el puntero de su ratón hasta la carpeta correcta. Si el fichero en cuestión ya no le es útil, entonces lo arrastra al cesto de basura sabiendo que si se quedará ahí por si cambia de opinión hasta que vacíe el cesto definitivamente. Casi como en la vida real.

3.2.2 Las Pestañas.

Las pestañas que que sobresalen de entre todas las carpetas dentro del cajón de un archivero ayudan a separar visualmente en secciones los montones de carpetas beige que tienden a lucir todas iguales. Ademas, sobre las pestañas se pueden escribir descripciones taxonómicas sobre el contenído de la sección dandole un sentido más formal y amigable a la categorizavión de los contenidos.

Ya que un sitio web está por lo regular dividido en varias secciones que categorizan la información proporcionada por el sitio, para proveer al usuario una forma de acceso al contenido más organizada. Para acceder a las diferentes secciones del sitio, se acostumbra colocar una lista de enlaces que sirven como atajos a todas y cada una de las categorías del sitio de forma consistente a través de todas las páginas que la conforman. A esa lista consistente de enlaces se le denomina navegación.

La navegación de un sitio puede ser presentada de muchas maneras, pero a medida que el desarrollo web va madurando se van creando estándares o patrones de diseño que son familiares a los usuarios y aumentan el sentido de usabilidad del sitio web en cuestión. Una de las maneras más efectivas de presentar la navegación es diseñandola de manera que se asemeje a las pestañas de los archiveros que mencionamos antes, esto es, la metafora de las pestañas (tabs).

Las pestañas son mostradas en la parte superior de cada pàgina y el area inferior està conectada visualmente con èsta. La informaciòn colocada en el panel debajo de la pestaña corresponde a la categorìa señalada en la pestaña seleccionada. La categorìa seleccionada es resaltada mediante contrastes de color, forma, tamaño o tipografìa. Es mejor combinar el contraste necesario haciendo combinaciones de color y tamaño.

Conectando isualmente la pestaña seleccionada con el area debajo de ésta , por ejemplo diseñandolas con el mísmo color de fondo, la relación es reforzada considerablemente. (17)

Cabe notar que la función de un sistema de navegación diseñado segun la metàfora de pestañas y cualquier otra colección de enlaces sin èstilo aplicado no cambia, pero para el usuario es más fácil interactuar con algo que le resulta familiar.

3.2.3 Íconos.

Los íconos son representaciones ideográficas con un alto nivel de síntesis puesto que tienen que representar significados complejos en imagenes simples.

Los íconos han sido utilizados por mucho tiempo, desde la edad media se han desarollado complejos sistemas icónicos como los escudos de armas heráldicos y signos astrológicos. En la sociedad moderna todos estamos familiarizados con los íconos dentro y fuera del trabajo: por ejemplo, íconos en las puerta de los baños, íconos en las señales de tránsito e íconos más complejos en los aparatos electrónicos (18).

La ideografía es más fundamental al lenguaje de lo que nos damos cuenta. A través de nuestro lenguaje hablado y escrito lo que hacemos es “pintar” imágenes en las mentes de los lectores y escuchas. De una manera análoga, las imágenes pueden ser utilizadas con propósitos comuncacionales. Los ideográmas son capaces de comunicar ideas abstractas a pasear de ser sólo formas visuales y a través del uso de metáforas, las imágenes pueden encapsular prácticamente cualquier idea (5).

En el ámbito computacional, el uso de los íconos ha sido una extensión de sus uso tradicional con la posibilidad añadida de interacción que ofrecen las tecnologías modernas. Idealmente, una interfaz construída sólo con íconos debería ser comprensible por cualquier persona independientemente de el lenguaje que habla puesto que sería capaz de reconocer las metáforas representadas en pantalla e interpretarlas en base a su conocimiento adquirído sobre los objetos con los que tiene una se comparan esos íconos.

Por eso la metáfora del escritorio tuvo tanto éxito, ya que era sencillo reconocer la función de ciertos objetos en pantalla gracias a su apariencia. Un ícono en forma de carpeta debería tener la funcionalídad de almacenar documentos y otro en forma de cesto de basura tendría que servír para deshacerse de aquello que se considera basura.

Pero no siempre es tan sencillo construír los ideogramas, porque los significados no son siempre tan simples. A menudo un ícono tiene que representar la funcionalidad compleja de una aplicación y debe valerse de metáforas compuestas para lograrlo.

Antes de explorar el proceso de desarrollo de un sístema de metáforas icónicas primero debemos ver el proceso de comunicación. En este caso la comunicación se refiere al mensaje transmitido entre el diseñador de la aplicación y el usuario. Un ícono es percíbido primero por su forma (sintáxis), después por la forma entre su forma y su significado (semántica) y en tercer lugar por su utilidad (pragmatismo). (18)

3.2.3.1 Sintáxis de los íconos

El significado de un ícono se puede alterar mediante la combinación de varios íconos en uno mismo, lo que nos permite crear metáforas compuestas que abarquen un abanico mayor de significados abstractos. Las técnicas de sintáxis son:

Superimposición

Sucede cuando ícono es colocado encima de otro. Por ejemplo, colocando un pequeño ícono de buscar — generalmente un lente de aumento o unos binoculares— sobre el ícono de documento una hoja con una esquina doblada su significado combinado podría ser “buscar en documento”. Los elementos superpuestos tienen una jerarquía visual que separa los elementos primarios de los secundarios. Los elementos secundarios son denominados credenciales. El el ejemplo anterior el ícono pequeño de buscar es una credencial para documento. Si intercambiamos el sentido de la jerarquía visual y dejamos el elemento de documento como credencial para busqueda entonces el significado podría cambiar a documento de busquedas refiriendose tal vez a un fichero donde se almacenan los resultados de las busquedas realizadas.

Yuxtaposición

Sucede cuando dos íconos son colocados en una determinada relación espacial pero con el mismo peso visual, para expresar un mayor significado. Por ejemplo, un calendario junto a un reloj significa Fecha y hora. Tambien puede ser usada esta técnica para representar causa y efecto, por ejemplo un globo de texto puede significar comentario, si es precedido por un simbolo de adición (+) entonces su significado conjunto es “añadir comentario”.

Duplicación

Para indicar pluralidad, basta con colocar varias instancias de un símbolo uno encima de otro. Uno o más íconos de carpetas apilados significará entonces carpetas.

• (17) Tabs. Patterns in Interaction Design. (http://www.welie.com/patterns/showPattern.php?patternID=tabbing)
• (18) Self-Explaining Icons, Claire Dormann, University of Brighton Grand Parade, Brighton (http://www.intellectbooks.com/iconic/self/self.htm)

4.1 Lineamientos para el diseño de metáforas visuales efectivas.

4.1.1 Errores comunes en uso de metáforas visuales.

Si los pictogramas o las metáforas requieren, para ser comprendidas la inclusión de un texto, que generalmentees un palabra o frase perfectamente monosémico e inequivoca, hay que pensar si no es preferibleme utilizar esta palabra en lugar de una metáfora ambigua y dotarle mejor de condiciones optimas de legibilidad (6).

Otro error común es la falta de consistencia en el diseño de las metáforas a traves de todo el sistema íconico, puesto que se toman metáforas existentes de diveras fuentes que no siguen una misma línea estética en su diseño. Esto genera confusión y falta de identidad.

4.1.2 Recomendaciones para diseñar sistemas de metáforas para una interfaz.

Conclusiones

Cuando un usuario se enfrenta a una nueva aplicación, sea un programa de escritorio o un sitio web puede que no intuya inmediatamente cómo debe operarlo para hacerlo funcionar. Una manera de remediarlo es diseñar cuidadosamente un sistema de metáforas visuales que hagan más intuítiva la interfaz de la aplicación. Esta técnica ha sido utilizada con exito durante mucho tiempo pero conforme avanza el alcance de la teconología y las aplicaciones computacionales forman una parte cada vez mas importante de nuestra vida diaria es urgente que los diseñadores visuales aprendan a aplicar los fundamentos de la comunicación visual para diseñar interfaces que le den al usuario una experiencia más enriquecedora.

Hemos visto los antecedentes históricos de los lenguajes pictográficos, el estudio de los simbolos y su aplicación en sistemas de identidad corporatíva. Con este conocimiento y la práctica correspondiente, los diseñadores visuales serán capaces de crear interfaces más eficientes, accesibles y usables.