{"id":17792,"date":"2021-01-28T15:44:26","date_gmt":"2021-01-28T13:44:26","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/?p=17792"},"modified":"2021-06-11T10:33:56","modified_gmt":"2021-06-11T08:33:56","slug":"iconos-para-interactivos","status":"publish","type":"post","link":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/iconos-para-interactivos\/","title":{"rendered":"Iconos para interactivos"},"content":{"rendered":"

\u00bfQu\u00e9 son?<\/h2>\n

Un icono<\/strong> es un signo gr\u00e1fico que representa un objeto o un concepto. En entorno digital, el t\u00e9rmino icono\u00a0<\/i>hace referencia espec\u00edficamente a un elemento gr\u00e1fico simple que representa contenidos o acciones.<\/p>\n

Semi\u00f3tica de los iconos<\/h2>\n

La semi\u00f3tica<\/strong> es la disciplina que analiza c\u00f3mo utilizamos los signos para comunicar significados. En semi\u00f3tica, se distinguen tres tipos de elementos \u2013iconos, \u00edndices y s\u00edmbolos\u2013, que corresponden a los que en dise\u00f1o conocemos bajo el nombre \u00fanico de icono<\/i>. Por tanto, en una interfaz interactiva es posible encontrar iconos, \u00edndices y s\u00edmbolos, aunque a todos ellos les llamemos iconos<\/i>.<\/p>\n

Icono<\/h3>\n

En semi\u00f3tica, el icono<\/strong> propiamente dicho es un elemento gr\u00e1fico altamente estilizado que representa un objeto bas\u00e1ndose en similitudes formales.<\/p>\n

Por ejemplo, la acci\u00f3n de \u00abInsertar imagen\u00bb suele representarse en aplicaciones interactivas mediante un icono que remite directamente a la idea formal de una imagen:<\/p>\n

\"\"

Opci\u00f3n de \u00abInsertar imagen\u00bb de Google Docs.<\/p><\/div>\n

\u00cdndice<\/h3>\n

El \u00edndice<\/strong> corresponde a un elemento gr\u00e1fico que tiene una relaci\u00f3n directa con su referente sin mantener una similitud formal con este; por ejemplo, el humo es \u00edndice de fuego.<\/p>\n

En aplicaciones interactivas, encontramos numerosos casos de utilizaci\u00f3n de \u00edndices para representar acciones o conceptos abstractos. Por ejemplo, la opci\u00f3n de \u00abImprimir\u00bb suele representarse mediante un icono de impresora, relacionando el significado con la forma del dispositivo que ejecuta la acci\u00f3n:<\/p>\n

\"\"

Opci\u00f3n de \u00abImprimir\u00bb de Google Docs.<\/p><\/div>\n

La lupa que suele asociarse a la opci\u00f3n de b\u00fasqueda es otro ejemplo de utilizaci\u00f3n de \u00edndices en interfaces gr\u00e1ficas:<\/p>\n

\"\"

Opci\u00f3n de \u00abBuscar\u00bb de Google Docs.<\/p><\/div>\n

S\u00edmbolo<\/h3>\n

El s\u00edmbolo<\/strong> corresponde a un elemento gr\u00e1fico que se asocia a su referente estrictamente por convenci\u00f3n. Suele utilizarse para representar los conceptos m\u00e1s abstractos: los s\u00edmbolos matem\u00e1ticos o musicales son ejemplos de esta categor\u00eda de iconos.<\/p>\n

En aplicaciones interactivas suelen utilizarse s\u00edmbolos para representar conceptos sobre los que existe una fuerte convenci\u00f3n cultural en el mundo f\u00edsico y, por lo tanto, son f\u00e1cilmente reconocibles. Un ejemplo es el s\u00edmbolo \u00ab+\u00bb usado para a\u00f1adir elementos a un conjunto:<\/p>\n

\"\"

Opci\u00f3n de \u00abCrear nuevo documento\u00bb de Google Drive. La utilizaci\u00f3n del s\u00edmbolo \u00ab+\u00bb remite a la idea de a\u00f1adir un nuevo documento a los que el usuario tenga ya creados.<\/p><\/div>\n

Tambi\u00e9n suelen utilizarse s\u00edmbolos en casos en que la convenci\u00f3n cultural se ci\u00f1e al \u00e1mbito digital pero est\u00e1 fuertemente arraigada y, por tanto, es f\u00e1cilmente reconocible para el usuario.<\/p>\n

\"\"

Opciones de \u00abDeshacer\/Rehacer\u00bb en Google Docs.<\/p><\/div>\n

Relaci\u00f3n entre icono y referente<\/h3>\n

La relaci\u00f3n entre el icono (a partir de ahora entendemos \u00abicono\u00bb en su concepto amplio, incluyendo iconos, \u00edndices y s\u00edmbolos) y su referente se establece principalmente a trav\u00e9s de tres figuras ret\u00f3ricas: met\u00e1fora, metonimia y sin\u00e9cdoque.<\/p>\n

Met\u00e1fora<\/h3>\n

La met\u00e1fora<\/strong> consiste en la traslaci\u00f3n del significado de un concepto a otro, estableciendo entre ellos una relaci\u00f3n de analog\u00eda.<\/p>\n

Se trata de la figura ret\u00f3rica m\u00e1s utilizada en el dise\u00f1o de iconos en interfaces gr\u00e1ficas, de la que encontramos numerosos ejemplos en los elementos que forman parte del escritorio del ordenador \u2013de hecho, la idea de \u00abescritorio del ordenador\u00bb es en s\u00ed misma una met\u00e1fora. El icono de papelera es una de las met\u00e1foras m\u00e1s conocidas, basada en una analog\u00eda entre el objeto f\u00edsico y la acci\u00f3n de eliminar archivos del ordenador.<\/p>\n

\"\"

El icono de la papelera constituye, en entorno digital, una met\u00e1fora claramente reconocible para indicar la opci\u00f3n de eliminar archivos. Los archivos que se arrastran hasta el icono permanecen provisionalmente en la papelera hasta que el usuario decide \u00abvaciarla\u00bb, momento en que se procede a su eliminaci\u00f3n definitiva. La secuencia de acciones en entorno digital es an\u00e1loga a la que se lleva a cabo en el mundo f\u00edsico para eliminar objetos reales.
Fuente: https:\/\/pixabay.com\/vectors\/trash-icon-waste-junk-clean-2935441\/<\/a>.<\/p><\/div>\n

A lo largo de la historia de las interfaces gr\u00e1ficas, la utilizaci\u00f3n de met\u00e1foras ha resultado muy \u00fatil para introducir al usuario en un entorno al que no est\u00e1 habituado. En los primeros a\u00f1os de la difusi\u00f3n de ordenadores personales entre el gran p\u00fablico (\u00faltimas dos d\u00e9cadas del siglo XX), el uso de met\u00e1foras en interfaces era muy frecuente, ya que permit\u00edan a los usuarios establecer paralelismos entre el mundo f\u00edsico en el que habitaban y el mundo digital que estaban descubriendo.<\/p>\n

Actualmente, las interfaces gr\u00e1ficas est\u00e1n repletas de met\u00e1foras que pasan desapercibidas; en algunos casos, el usuario se ha habituado a ellas hasta tal punto que pueden llegar a perder el v\u00ednculo con los referentes originales. Este es el caso del icono que generalmente se utiliza para representar la opci\u00f3n que permite guardar un archivo:<\/p>\n

\"\"

Para representar la opci\u00f3n de almacenar o guardar un archivo, numerosas aplicaciones utilizan el icono del disquete. Este elemento se utilizaba a finales del siglo XX para almacenar archivos, y a inicios del siglo XXI fue sustituido progresivamente por otros dispositivos. Actualmente, hace ya a\u00f1os que los disquetes no se utilizan, y de hecho los usuarios m\u00e1s j\u00f3venes no los han utilizado jam\u00e1s. Sin embargo, el icono del disquete contin\u00faa siendo una referencia habitual y reconocida en las interfaces gr\u00e1ficas: se trata de un icono que ha adquirido autonom\u00eda respecto a su referente original.
Fuente: https:\/\/commons.wikimedia.org\/wiki\/file:Save_font_awesome.svg<\/a>.<\/p><\/div>\n

Metonimia<\/h3>\n

La metonimia<\/strong> es un tipo de met\u00e1fora en la que una cosa o idea se representa mediante otra con la que mantiene alguna relaci\u00f3n sem\u00e1ntica.<\/p>\n

\"\"

La utilizaci\u00f3n en algunas interfaces de un reloj de arena para indicar el acceso a las funciones de un reloj normal constituye una metonimia.
Fuente: https:\/\/commons.wikimedia.org\/wiki\/file:Font_Awesome_5_regular_hourglass.svg<\/a>.<\/p><\/div>\n

Sin\u00e9cdoque<\/h3>\n

La sin\u00e9cdoque<\/strong> consiste en representar un objeto mediante una de sus partes o en representar una parte del objeto mediante el todo.<\/p>\n

\"\"

En MacOS Mojave, el icono de altavoz se utiliza para representar el acceso a todas las funciones de audio del sistema, tanto las de salida (altavoces, auriculares y otros dispositivos) como las de entrada (micr\u00f3fono y otros dispositivos).
Fuente: captura de pantalla de MacOS.<\/p><\/div>\n

Iconos e interacci\u00f3n<\/h2>\n

Los iconos son frecuentemente utilizados en interfaces interactivas, ya que presentan diversas ventajas:<\/p>\n