Uso de metáforas en el diseño web

() translation by (you can also view the original English article)

La palabra metáfora se vincula con más frecuencia a una pieza escrita, cuando se usa como figura literaria en un discurso para crear un efecto descriptivo. Sin embargo, hoy en día, vamos a hablar sobre un tipo distinto de metáfora: una visual que podemos usar en el diseño web.

Metáfora: una figura del lenguaje en la que se utiliza una expresión como referencia a algo que literalmente no denota para sugerir una similitud - WolframAlpha

En la web, usamos ampliamente imágenes e iconos para simbolizar distintas cosas. Cuando visitamos una página web, la escaneamos para intentar localizar lo que necesitamos tan rápido como nos sea posible, y la imaginería se utiliza para ayudar a agilizar ese proceso. Podemos interpretar algo mucho más rápidamente con un estilo e imágenes que nos resulten familiares. Por ejemplo, podemos reconocer instantáneamente un error cuando encontramos algo como una marca de exclamación, o un color amarillo o rojo. Todo es cuestión de la familiaridad.

Especialmente últimamente, hemos empezado a ver aparecer metáforas urbanas en el diseño web, usando elementos familiares como una estantería de libros o un muro dentro de un diseño. Sin embargo, existen cientos de otras metáforas usadas en el diseño web para servir de puente entre la vida real y la virtual.

¿Qué es una metáfora?

La definición "oficial" de una metáfora no es distinta a la de la sección anterior: una figura del lenguaje en la que se utiliza una expresión para hacer referencia a algo que no denota literalmente para sugerir una similitud. Esto es muy cierto si observamos la web y el uso de metáforas en esa plataforma. Allí, usamos píxeles para representar objetos del mundo real y así proporcionar una sensación de familiaridad entre la vida virtual y la real.

En la web también usamos distintos tipos de metáforas: aquellas de una escala menor que imitan objetos de la vida real como botones, metáforas icónicas que copian asociaciones de la vida real y las usan en la web, y las amplias en las que el diseño al completo gira en torno a una metáfora.

Vida real en la web

Un botón en la web no es realmente un botón, ¿verdad? No, es un puñado de píxeles creados para parecerse a un botón porque (a) lo hemos creado de manera que nuestros usuarios lo reconozcan y (b) sepan que es algo que puede ser pulsado (o, más correctamente, clicado). Hacemos que este enlace parezca un botón porque estamos acostumbrados a reconocer un botón como un punto de interacción en la vida real, y seremos capaces de distinguir ese enlace concreto del resto de la página con poco esfuerzo.

Imitar las convenciones de la vida real nos ayuda a interactuar con el mundo virtual. Mejora la experiencia de nuestros usuarios ya que la web no nos resulta una interfaz extraña que requiera mucho aprendizaje para poder interactuar con ella. Sabemos que los botones son botones porque tienen básicamente el mismo aspecto en cualquier sitio, son una pista visual y los usuarios pueden interactuar con ellos instintivamente.

Lo mismo es válido para las ventanas, los escritorios, y las pestañas en el diseño de UI. Steve Krug, en su libro sobre usabilidad Don't Make Me Think usa el famoso ejemplo de las pestañas de las carpetas como un excelente uso de las metáforas en el diseño de interfaces.

No he sido capaz de probarlo (todavía), pero sospecho fuertemente que Leonardo da Vinci inventó las divisiones mediante pestañas en algún momento a finales del siglo XV. En lo que respecta a las interfaces de dispositivos, son claramente producto del ingenio. - Steve Krug

Las pestañas son el clásico ejemplo de una intuitiva metáfora de interfaz.

Iconos

Los iconos son ligeramente distintos a las metáforas idénticas, tal y como mencionamos anteriormente. Por ejemplo, las marcas de exclamación se utilizan para representar algunos estados importantes o alertas de manera que usamos ese icono en el mismo contexto en la web. Además, podríamos usar el símbolo de un teléfono o un sobre para indicar el medio de contacto.

Para un ejemplo perfecto, podemos fijarnos en el escritorio de WordPress. Cada elemento del menú del lateral izquierdo muestra algún tipo de metáfora, como la chincheta que representa las entradas y el bocadillo de comic para representar los comentarios.

La intención en el uso de este tipo de metáforas es el mismo que en la sección anterior: crea una cierta familiaridad, un “vínculo” por decirlo así, con el mundo real que ayuda al lector a interpretar y navegar una página con relativa facilidad.

Metáforas activas

Hemos realizado un breve tour replicando objetos de la vida real y usando iconos para dar forma a los enlaces, pero existe un importante tipo de metáfora más: aquellas que van más allá de un único elemento. El ejemplo más notable que se me ocurre no es un sitio web, sino una app. iBooks no tiene el aspecto de una app estándar para el iPad porque pretende imitar el aspecto real de una estantería para añadir una sensación de familiaridad para el lector. Si echas un vistazo a iBooks, de inmediato piensas que tiene algo que ver con los libros. Si se lleva bien a la práctica, ¡este tipo de sitios web pueden llegar a ser realmente increíbles!

Las metáforas amplias son menos frecuentes que los otros tipos usados en la mayoría de los diseños de sitios web del mundo.

Aunque “metáforas amplias” podrías ser un término no muy acertado, este tipo de metáfora todavía es el más amplio que puedes obtener. Llevan a la vida real a una pequeña ventana de tu navegador, y pueden constituir un método instantáneo para crear una primera impresión en relación a aquello sobre lo que versa el sitio web.

El tema de WordPress Monmarthe.

¿Por qué usar una metáfora?

Cuando escribimos, usamos metáforas para expresar, explicar y describir. Las metáforas pueden ser una forma útil para conectar una idea con otra que no sea literalmente similar (en donde probablemente usaríamos una sonrisa), pero en donde las ambas pueden usarse conjuntamente para representar la una a la otra.

Las metáforas en el diseño web, como en la escritura, son utilizadas como un mecanismo descriptivo al vincular objetos de la vida real e ideas con píxeles en un sitio web. Podría parecer algo nimio, y algo que podría ser pasado por alto, pero los lectores web tienen un margen de atención más breve que los lectores sobre soporte impreso, así que el tiempo es algo esencial cuando navegamos en un sitio web. Y, en estas circunstancias, las metáforas son de gran utilidad al reproducir asociaciones de la vida real (como la asociación del color rojo con el peligro, o la lupa con una búsqueda) y usarlas en la web de forma que el proceso de escaneado de una página web se acelere.

Atracción

Como diseñadores, podemos aprovechar las metáforas para mejorar el atractivo del diseño, y hacer que nuestros diseños sean memorables. Queremos que los usuarios conecten con el sitio web, y actualmente ya muchos sitios web hacen uso de algún tipo de metáforas adaptadas a su audiencia objetivo. Los sitios web reflejan conceptos de la vida real, empresas, gente y objetos, y los estilos elegidos no se diferencian de sus correspondientes en la vida real. Las metáforas no solo crean un sentido de familiaridad entre los píxeles de un sitio web y el contenido/asunto de la vida real, pero también pueden usarse para conectar con una audiencia concreta.

Tomemos como ejemplo la página de inicio CBeebies de la BBC. El sitio está construido alrededor de un fondo que representa un jardín con árboles y arcoíris, una imagen idealizada del mundo muy común en los medios dirigidos a los niños. La metáfora de un jardín persuade a los niños a usar el sitio mientras que si hubiese sido diseñada como la página de inicio de Microsoft, su uso no resultaría tan atractiva para los niños.

Conclusión

Las metáforas son empleadas a lo largo de todo tipo de medios para expresar algo reemplazando alguna otra cosa, y, en los sitios web, son una excelente forma de comunicar familiaridad y hacer el diseño atractivo para los lectores. Si consideramos esto dentro de una escala de 4.5 billones de años, la web es todavía un medio muy nuevo, de manera que crear vínculos entre lo real y lo virtual, aunque es una medida transitoria, es una que funciona.

Metáforas en acción

Flourish

Flourish es una agencia de diseño web que se toma su propio nombre en serio. Entendiendo florecer como “crecimiento o desarrollo de una forma saludable y vigorosa”, se presenta el concepto de desarrollo de un árbol en una tierra por lo demás árida y un entorno basado en la naturaleza.