Advertisement
  1. Web Design
  2. General

Aprovechar el poder de los iconos estandarizados

Scroll to top
Read Time: 10 min

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Tan efectiva como la metáfora de un icono sea, los iconos verdaderamente poderosos obtienen su fuerza a partir de su capacidad de reconocimiento universal y su utilización como convención, una suerte de estandarización. Hablaremos más de la estandarización de los iconos en este artículo y después proporcionaremos sugerencias de algunos actuales movimientos de estandarización que puedes explorar e incorporar en tus propios proyectos.


¿Por qué usar iconos?

Los iconos y los símbolos son potentes herramientas visuales. Normalmente representan objetos de la vida real de forma más o menos fidedigna o a través de una metáfora. Pueden comunicar a través de un único objeto algo que de no ser así requeriría muchos caracteres o palabras, y este es en parte el motivo por el cual se utilizan con tanta frecuencia en el diseño de software. Cuando se usan de forma correcta, pueden comunicar de forma eficaz un mensaje en una cantidad de espacio mínimo.

Además, los iconos y los símbolos permiten a los usuarios identificar un mensaje o metáfora sin tener que aumentar su esfuerzo cognitivo. Por ejemplo, imagina que el dock de OS X usase texto en lugar de iconos. Esto obligaría a los usuarios a leer y procesar mentalmente el texto de cada aplicación hasta encontrar lo que buscan.

Viendo el empleo de texto aquí resulta obvia la necesidad de implementar iconos, y por una buena razón. El uso de iconos, especialmente en la representación de elementos a los que se accede con frecuencia, reduce la cantidad de información que los cerebros de los usuarios tienen que procesar y les permite escanear y localizar fácilmente lo que buscan.


¿Por qué usar estándares en los iconos?

La potencia del uso de los iconos y los símbolos está en su habilidad de trascender el lenguaje humano.

Otro potente uso de los iconos y los símbolos es su habilidad para trascender el lenguaje humano. Los iconos funcionan mejor y son más potentes cuando los diseñadores sacan provecho de la universalidad y la capacidad de identificación de conceptos del mundo real. Esta es otra razón por la que los iconos se utilizan con tanta frecuencia en el diseño UI de software, trascienden las barreras del lenguaje, evitando con frecuencia la necesidad de la localización y la traducción.

En el momento de diseñar iconos para su uso en aplicaciones de software y otros medios, los diseñadores deberían considerar si ya existe alguna convención o estándar en uso en relación a lo que quieren comunicar.

Empleo de iconos estandarizados: Un ejemplo

Como sencillo ejemplo, imaginemos que tienes que diseñar botones de acción específicos para cada género. Podrías empezar creando un botón que diga “Hombres” y otro que diga “Mujeres”. Además, podrías añadir colores tradicionalmente asociados con los géneros masculino y femenino.

Pero, ¿qué pasaría si esos botones estuviesen dirigidos a una audiencia más amplia de alrededor de 50 países e idiomas? Probablemente tendrías que crear una solución localizada que apoye la traducción.

O, podrías aprovechar el poder comunicativo de los iconos y los símbolos. Así que, ¿cómo representas a los “hombres” y las “mujeres” visualmente? En lugar de estrujar tu cerebro sobre cómo conseguir que la gente de 50 países distintos entienda tus símbolos, podrías buscar una metáfora estandarizada que sea comprensible universalmente. No deberías tener que pensar mucho hasta que te viniesen a la cabeza símbolos empleados para “Hombres” y “Mujeres”.

Es muy probable que puedas aprovechar el poder tras el reconocimiento universal de estos símbolos en tus botones de acción. Ahora, esto lo usamos simplemente como ejemplo y no como una solución de diseño, pero nos ayuda a representar el poder del uso de los símbolos e iconos en la comunicación.


Descubrir los estándares y las convenciones en los iconos

Los símbolos “hombres” y “mujeres” antes vistos no son necesariamente “estándares” porque han sido aprobados oficialmente y licenciados para su uso por un comité internacional de profesionales de diseño. Se han convertido en estándares debido a su amplio y prolífico uso. Debido a que mucha gente los ha visualizado, mucha gente conoce su significado.

La familiaridad y la universalidad ayudan a hacer los iconos reconocibles por una amplia cantidad de personas. Sin embargo, descubrir iconos verdaderamente universales puede ser muy complicado. Algunas metáforas estandarizadas que podrías reconocer, como una hoja de papel con una esquina doblada para un “documento”, una lupa para la “función de búsqueda”, y una carrito de compra para, bueno, un carrito de compra “digital”. Otras metáforas son más difíciles de reconocer rápidamente, por ejemplo, la “reputación” o “visualizar”.

Un buen método para determinar si una cierta metáfora cuenta con un estándar o convención consiste en realizar simplemente una búsqueda de imágenes en Google usando el término a comunicar Si observas un patrón o iconos similares que se repiten, puedes asumir que probablemente se trate de una metáfora convencional. Otra opción para descubrir la universalidad de un símbolo o icono consiste en mostrarlo a una variedad de personas y preguntarles qué es lo primero que les viene a la mente cuando lo ven.

Muchos estándares y convenciones no son propietarios. Esto significa que no estás protegidos de forma oficial y aprobados por el organismo designado para ello. Muchos de los iconos estandarizados llegan a ser muy reconocibles porque los diseñadores o compañías eligen usarlos en sus productos. A medida que las metáforas van llegando a ser cada vez más homogéneas a través de los distintos sistemas de software, están cada vez más cerca de convertirse en estándares o convenciones entre la comunidad de diseñadores. Un buen ejemplo sobre cómo un icono acaba convirtiéndose en un estándar es el icono del feed (comúnmente denominado RSS).


Cómo se convierte un icono en un estándar

En los primeros días de la web, antes de alrededor de 2004, los usuarios empezaron a saltar a la causa de las RSS suscribiéndose a los feeds de sindicación. Como no había una metáfora estándar o un método para representar visualmente qué era un feed, los editores idearon una amplia variedad de enigmáticos iconos para indicar a los usuarios que sus sitios web ofrecían feeds.


Cortesía de RSS Board

Uno de los métodos más comunes para representar los feeds era el bloque naranja con el texto “RSS” inscrito en él. Sin embargo, aunque RSS era más breve y más simple que escribir “sindicación”, representaba realmente sólo un formato de feeds. Lo que se necesitaba era una metáfora para describir el concepto de feeds, en lugar del texto (RSS) de una implementación de feed en particular.

la amplia adecuación… fue la catálisis necesaria para establecer el icono naranja del feed como un estándar reconocido.

Con el objetivo en mente de crear un icono sencillo que pudiese ser usado para representar todos los protocolos de sindicación, Stephen Horlander diseñó lo que hoy en día conocemos como el icono naranja del feed. El icono fue creado originariamente creado por Firefox 1.0. Esto convirtió a este icono en algo estándar. Su diseño, sin embargo, representaba claramente el aspecto de la difusión e impulsó su adopción por parte de los equipos de Internet Explorer y Outlook. Opera pronto los siguió y esta amplia adopción (especialmente por parte de grandes compañías tecnológicas) fue el catalizador que estableció el icono naranja del feed como un estándar reconocible.

El icono del feed es un excelente ejemplo del poder de los iconos. El lugar de presentar pequeños botones con palabras técnicas que los usuarios no entiendan (RSS, Atom, Blogline, XML, etc.) el sencillo icono del feed puede comunicar el propósito que existe tras el complejo conjunto de tecnologías de feed diciendo: “Nosotros difundimos algo. Suscríbete”.


Estándares de iconos específicos de una plataforma

Otro ejemplo de un icono que se convierte en una estándar a través de un amplio uso puede encontrarse en el icono “compartir” inicialmente lanzado por Apple. Podrías reconocer el icono ya que aparece en muchas de las aplicaciones de Apple tanto en iOS como en OSX. Sin embargo, el uso de este icono también se encuentra ampliamente utilizado por desarrolladores independientes dentro del ecosistema de Apple.

Como puedes ver, el icono “compartir” se encuentra a lo largo de muchas aplicaciones que se ejecutan en la plataforma de software de Apple. Así que, si estás desarrollando para iOS o OSX y necesitas un botón de compartir, podría ser una buena idea seguir el patrón que ha sido adoptado por tantos otros diseñadores (en oposición a la creación de tu propio icono “compartir”). Los usuarios dentro del ecosistema de Apple (y cada vez más fuera de él) entenderán lo que estás intentando transmitir si usas este símbolo porque es muy probable que ya lo hayan visto con anterioridad.


Estándares de iconos: Une tu voto

Podrías pensar que los iconos se convierten en estándares porque grandes empresas como Microsoft o Apple decide usarlos, y eso es en parte cierto. Pero en la realidad, las grandes empresas simplemente aceleran el proceso de estandarización porque su alcance en el mercado ayuda a mostrar los iconos a una amplia cantidad de usuarios. La exposición repetida a la metáfora de un icono es lo que ayuda a establecer su familiaridad entre los usuarios y, por lo tanto, a estandarizar el mensaje visualmente.

Cuando la gente normal ve un icono y sabe que significa, se convierte en una herramienta extremadamente potente. Lo que significa que tú, como diseñador, puedes elegir qué iconos van a convertirse en un estándar. Al elegir qué iconos empleas en tu proyecto de diseño, en esencia estás apoyando con tu voto y diciendo “sí, este icono es una buena representación metafórica de lo que estoy intentando transmitir y lo que voy a mostrar a mis usuarios.


Iconos que puedes usar en tu próximo proyecto

Más abajo encontrarás referencias sobre algunos proyectos de iconos que se proponen como candidatos para su uso convencional y estandarizado.

OMPL Icon

  • Objetivo: El lenguaje de marcado del procesador de esquemas (OPML) es un formato XML para los esquemas más utilizados en el intercambio de listas de feeds web entre agregadores de feeds. (Para ver un ejemplo de un feed OPML, haz clic aquí).
  • Licencia: Creative Commons Attribution-Share Alike 3.0 Unported License
  • Página de inicio: http://www.opmlicons.com/

Icono de geoetiqueta

  • Objetivo: Para aquellos que no lo sepan, el geoetiquetado consiste en esencia en añadir meta información geográfica al contenido, por ejemplo, a fotos. Al igual que el icono de feed, la metáfora del icono de Geotag está pensada como un estándar web para comunicar el objetivo de una tecnología compleja a los seres humanos comunes a través de un símbolo visual.
  • Licencia: Creative Commons o GNU Lesser GPL
  • Página de inicio: http://geotagicons.wordpress.com/

Icono de idioma

  • Objetivo: Crear un icono abstracto, globalmente reconocible que pueda ser utilizado en aplicaciones de software y en la web para seleccionar diferentes traducciones de idiomas.
  • Licencia: Creative Commons Attribution-Share Alike 3.0 Unported License
  • Página de inicio: http://www.languageicon.org/index-icon.php

Icono de compartir libremente

  • Objetivo: Ayuda a los usuarios a identificar fácilmente el contenido que puede ser compartido. El icono en sí intenta comunicar el acto de compartir a través de la metáfora visual de una mano pasando algo a otra mano.
  • Licencia: Creative Commons Attribution-Share Alike 3.0 Unported License
  • Página de inicio: http://www.shareaholic.com/openshareicon

Icono ShareThis

  • Objetivo: Representa la acción genérica de compartir una página web desde cualquier fuente entre varios destinatarios (correo electrónico, redes sociales y mucho más).
  • Licencia: GPL, LGPL, BSD, Creative Commons Attribution 2.5
  • Página de inicio: http://www.shareaholic.com/openshareicon
  • Nota: Originalmente introducido con un plugin de Wordpress, este icono es algo controvertido porque ahora es oficialmente una marca registrada (de ahí que muchas personas abogan por el uso del icono de "open share" en su lugar).

Icono de Markdown

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.