Mejorar el producto y UX con metáforas

En un mundo tan competitivo es fundamental mantener un espíritu de mejora constante tanto para nosotros como para nuestros productos. Por ello, en este artículo te propongo usar la semiótica para mejorar la experiencia de usuario con metáforas.

Qué son las metáforas y cómo se implementan en el diseño de producto:

Las metáforas son la sustitución de un concepto por otro ya que comparten características en común y por tanto pueden establecer una relación de analogía. Esto es que son comparables por sus atributos.

El ejemplo que recuerdo de la época del instituto era más o menos “las perlas de tu boca”, donde perlas sustituye a dientes porque ambos comparten los atributos de blanquitud y brillantez.

¿Por qué usar metáforas y qué beneficios tienen?

Usar metáforas en los productos digitales es ideal ya que mejoran la usabilidad por estos 5 motivos:

1. Las metáforas permiten interpretar conceptos abstractos.

Muchas veces es difícil comprender bien los procesos y lógicas que operan en el back-end incluso para quienes están – o estamos – allí definiéndolas. ¡Imagínate para una persona que aterriza nueva sin tener la base de conocimiento que tenemos los que estamos más involucrados! De hecho, esta premisa es sobre la que se apoya el visual thinking.

Además no solo facilitan la comprensión sino que aumentan la velocidad de comprensión. Por ello, muchas veces usamos iconos como representación del término en cuestión aunque con los iconos la relación no es puramente de analogía sino más bien de metonimia pues se da una relación de símbolo por simbolizado como con el buscar y la lupa.

Como veremos en los ejemplos a continuación, el término cloud, viene de la reprensetación visual para poder comprender el concepto

2. Las metáforas crean familiaridad

Para una buena usabilidad, la el reconocimiento y la familiaridad es clave. De hecho los diseños disruptivos no suelen funcionar porque la gente quiere sentirse cómoda y en su zona de confort al usar un producto.

Por otro lado, tenemos expectativas de cómo funcionan las cosas o cómo van a funcionar en base a nuestra experiencia previa y ahí es donde entran en juego las metáforas. ¿Recuerdas que las metáforas relacionan conceptos similares? Pues lo mismo sucede con las expectativas, vemos que algo se asemeja a algo que conocemos y pensamos que debe tener un funcionamiento similar. Esto nos permite conseguir un objetivo con poco esfuerzo y sentirnos satisfechos, el fin de una buena experiencia de usuario.

En el siguiente ejemplo planteo dos opciones de botón de comprar par una tienda de jardinería, cuál funcionaría mejor, pues por pruebas similares que se han hecho, el botón que mantiene la forma conocida de los botones. El botón con forma de hoja podría confundirse con una ilustración y no esperar que sea un elemento clicable.

Puedes leer acerca de la importancia de la familiaridad en estos dos artículos de Nielsen. En este nos explica la importancia de la familiaridad frente a lo nuevo y en este el reconocimiento frente al recuerdo.

3. Las metáforas pueden desencadenar emociones

Efectivamente las metáforas nos hacen reaccionar de distinta manera. Lo que para unos puede ser una ordinariez, para otros puede ser una idea fantástica. De hecho, en publicidad y branding se juega mucho con el uso de las metáforas y otros recursos retóricos por esta razón. Esto se ve reflejado tanto en la redacción UX como en el diseño UI porque no es lo mismo decir comprar ya que ¡empieza a ahorrar!

Además, las emociones no sólo hacen que el diseño sea atractivo para la gente, sino también más eficaz, placentero y memorable. Como ejemplo puedo poner mi experiencia en el diseño de una app de dating gay donde representábamos que un perfil tenía contenido explícito con una berenjena, la metáfora ya universal para el miembro masculino. Este acto mejoró el engagement de los usuarios ya que muchos quisieron tener este distintivo en sus perfiles. Entiendo yo que las razones fueron porque al ser una metáfora más que familiar desde el principio todos entendían el significado pero sobre todo ¡porque conectábamos con su universo!

4. Las metáforas pueden llamar la atención

Como sabemos hay diferentes técnicas para llamar la atención de los usuarios como el uso de tamaños grandes, palabras potentes como “nuevo”, escribir en mayúsculas, elementos en movimiento… y cómo no, ¡también el uso de metáforas!

Otra de las razones por las que en publicidad se usan tanto las metáforas es para llamar la atención. Funcionan muy bien por principios psicológicos. Las personas tendemos a fijarnos en aquellas cosas que nos suenan. Por eso muchas veces nos fijamos en las personas de la calle que se parecen a otros que conocemos, o de igual manera, nos pueden llamar la atención anuncios publicitarios en los que se alude de algún modo a elementos que conocemos. Lo mismo podemos hacer y se ha hecho tantísimo en el diseño de producto. Yo aún recuerdo el diseño de la app de librería de mi iPod Touch el cual era básicamente igual que el iPhone 3.

5. Las metáforas pueden inducir a actuar

Esta característica es un poco un resumen de lo visto anteriormente pero concentrado en la idea de que las metáforas permiten mejorar la conversión lo cual se consigue a través de lo visto anteriormente: llamando la atención, conectando con el usuario, fomentando el atractivo y facilitando la comprensión.

Hemos visto anteriormente dos ejemplos de cómo las metáforas mejoran la conversión. El primero, los botones, donde un botón por el hecho de recordar a un botón de máquina analógica y ajustarse al estándar web consigue un mejor CTR (tasa de clicks respecto a las veces que se visualiza). El segundo ejemplo, el de usar una berenjena como distintivo para conectar con el usuario con un elemento que de buena tinta iba a conocer y así mejorar el engagement (compromiso de un usuario con el producto digital)

Bien, si se te quedan cortos esos ejemplos, veamos cómo Tinder usa una metáfora visual para mejorar la conversión de sus features de pago. Al igual que los supermercados utilizan los colores negros y dorados para destacar los productos como de una categoría superior y de más valor, Tinder replica esos colores en sus botones para que la gente perciba sus feature de pago como algo por lo que merece la pena pagar.

Ejemplos de metáforas web

Web

Empecemos por la que posiblemente por ser la más obvia es la que menos pensaríamos. El término web, que en inglés significa red, se apropia el nombre de una forma muy adecuada ya que el origen de la web fue la interconexión de diferentes ordenadores a través de un cable, lo cual se puede considerar una red.

Carpeta, Documento y Archivo

Entre las primeras utilidades que se quiso dar al PC destacaba la de la administración y tan así fue que carpeta, documento y archivo intentaban copiar los formatos físicos de los elementos principales de la administración: los documentos en hojas de papel; el nombre que se daba al conjunto de documentos y finalmente las carpetas en las que estos se almacenaban. En cuanto a archivo, digo el conjunto de documentos porque es la idea que subyace en inglés con el término file que se traduciría al español por expediente aunque hayan cambiado el nombre por archivo

Cortar y Pegar

Menos mal que cortar y pegar son metáforas, si no, adiós al ordenador al clavar las tijeras para cortar el primer elemento. Cortar y pegar son también metáforas traídas del mundo de la administración ya que allí era común cortar elementos externos como fotografías o recortes de otros documentos y pegarlas para adjuntarlas al documento que se estaba tratando.

Escritorio

Más de lo mismo respecto a los puntos anteriores. El escritorio era la mesa de trabajo sobre la que el administrativo apoyaba – bueno y sigue haciendo más de lo recomendado – los documentos para buscar en ellos, para cumplimentarlos y para en definitiva, usarlos en su trabajo. Así pues, ¿cómo no iba a llamarse escritorio (desktop) a la vista principal del ordenador?

Panel de Control (dashboard)

El panel de control o Dashboard es posiblemente el pilar de cualquier SAAS. En él se muestran los datos más relevantes de la situación y desde él se pueden tomar acciones para afrontar esa información que nos llega. No sé bien dónde se utilizarían por primera vez estos paneles de control pero como vemos en la imagen los vehículos antiguos como las locomotoras de vapor ya tenían un panel así con el velocímetro y dejaban a mano la palanca del freno y las trampillas para evacuar el vapor

Inicio (Home)

No sé si me gusta más la metáfora en castellano o en inglés. Lo cierto es que tiene mucho sentido llamarlo inicio pues es el origen desde el que nace la navegación y por lo general es el punto de partida con el que comienza nuestro contacto con ese sitio web, claro que esto puede cambiar si la Landing Page o página de bienvenida es diferente del inicio. Por esta misma razón tiene sentido que también se le llame Home, hogar, porque es donde se recibe y da la bienvenida a los visitantes.

Marcadores

Los marcadores en realidad deberían llamarse marcapáginas ya que es la correcta traducción de la feature en inglés bookmark. En cualquier caso, los marcadores cumplen la misma característica que los marcapáginas en los que se inspiran, marcar un contenido para más tarde poder volver a él de una manera rápida

Carrito de la compra

El carrito de la compra es un pilar clave en los e-commerce del mismo modo que lo es en el mundo físico. Por ello, la feature de agrupar en un mismo sitio todos los artículos que nos interesa comprar de un comercio web es una muy buena representación del carrito de la compra de cualquier supermercado en el que hacemos lo mismo.

Radio button

Se corresponden con los botones de una radio antigua. Estos botones tenían un mecanismo por el cual si presionabas uno, el que estaba presionado anteriormente se saltaba. De ahí que el componente de radio button solo permita seleccionar una opción a la vez.

Menú

El menú es como se llama en inglés a la carta de los restaurantes y bueno, en castellano es el conjunto de platos que conforman una comida así que no andan muy lejos los términos. Por ello es sencillo ver el paralelismo con el menú de una web pues es un componente que nos ofrece varias opciones entre las que elegir.

Podemos poner los puntos sobre las íes o la guinda al pastel – ya que estamos siendo culinarios – y resaltar la metáfora que es el menú de hamburguesa, ese menú que son tres líneas ≡ y que recuerda en la forma a una hamburguesa pues son tres capas de las que dos son trozos de pan y una es el filete de hamburguesa en el interior.

Nube

Según computerworld y otras fuentes que he usado para contrastar la información, se utiliza el término cloud computing por cómo se representaba gráficamente la idea de lo que hoy conocemos como nube, un servicio de almacenamiento compartido al cual se puede acceder desde cualquier lado y desde cualquier dispositivo.

Galería

La conocemos como la sección en la que podemos ver nuestras fotos del ordenador o móvil y tiene mucho sentido porque es el nombre de las salas donde se exponen obras de arte. Establecer si es exagerado considerar arte los selfies frontales que te haces, es algo que escapa de mi competencia.

Formularios y checkbox

Los formularios se utiliza a día de hoy independientemente de si es un documento completo o una sección en la cual se introducen datos para almacenar en la base de datos. Estos son la versión digital de los formularios tradicionales usados para la recopilación de datos.

En cuanto a los checkboxes, también llamados casillas de verificación, son, como aprendimos en Componentes UI de Entrada y Selección, las famosas cajas o cuadros (☐) sobre los que se coloca un tick (✓) – bueno, tradicionalmente se ponía una cruz (⨉), ¿verdad? – para marcarlos como confirmado o se dejan vacíos para representar negación. Estas cajas han sido por muuuuchos años parte de los formularios y se utilizaban precisamente para marcar la conformidad con la frase que le acompañaba.

Acordeón

El acordeón es un componente de la interfaz gráfica que permite replegar y desplegar información para hacer más rápida y amena la navegación web del sitio. Por ello, de primeras están plegados y es el usuario quien debe desplegar la sección del acordeón que le interese. Tras explicar su mecanismo pocas dudas pueden quedar de que es un sistema nutrido del mecanismo de un acordeón musical y por tanto el nombre le va genial.

¿Conoces más metáforas? ¡Ponlas en los comentarios!