Cuando uno trabaja en UX por un tiempo prolongado, es posible que tenga una experiencia de pedidos y requerimientos de todo tipo, habida cuenta de la gran cantidad de disciplinas de la experiencia de usuario.

Sin embargo, uno de los  requerimientos más recurrentes va a ser el de cómo convertir nuestras visitas (para quienes no conozcan el término, la palabra “convertir” se usa para denominar el proceso por el cual una visita se transforma en un cliente, usuario activo, comprador, miembro, etc).

Esta terminología y sus técnicas provienen del marketing, donde el concepto de conversión es uno de los más importantes y hacia donde van dirigidos la mayor parte de los esfuerzos de una campaña. Obviamente, si hablamos de diseño e implementación, un profesional de Experiencia de Usuario va a tener herramientas similares o incluso superiores a las que maneje un experto en marketing, dado que su visión es (o debería ser) más global y la acción de marketing normalmente ocurriría dentro de un contexto delimitado por un profesional UX.

Para finalizar esta introducción, debemos aclarar algo: las técnicas que se describen a continuación no implican que van a funcionar siempre, en todos los contextos y situaciones. Como profesionales UX, debemos recordar que toda premisa en UX siempre debe ser comprobada y eventualmente mejorada.

Verbo, beneficio, urgencia

Esta es una de las técnicas que mejor resultado suele generar sin necesidad de grandes estudios o investigaciones previas, y la podemos resumir en la simple fórmula Verbo+Beneficio+Urgencia o VBU.

¿En qué consiste esta técnica?

Pues bien, la misma se usa en los llamados CTA (o Call to Action, o llamados a la acción) y lo primero que debemos hacer es seleccionar un verbo que… bueno, justamente eso, llame a la acción. Por ejemplo: comprar, obtener, ganar, perder… en fin, lo que llame más (y obviamente refiera al llamado a la acción). Este verbo debe ir al principio de la frase ya que es lo que incitará a los usuarios, quienes percibirán esta frase como una orden.

Posteriormente, le sumaremos el beneficio. El beneficio debe ser lo que va a obtener el usuario por realizar la acción. Aunque a veces el beneficio puede ser la acción misma (por ejemplo, “Descargar”), si le sumamos el beneficio al verbo el llamado a la acción va a ser más convincente. Por ejemplo: “Descargar Actualización”.

Finalmente, le sumaremos la urgencia: ahora, ya, ya mismo, en minutos, etc. Así, en vez de decir “Gane Premios”, decimos “¡Gane Premios Ya!” para mayor efectividad y transmitir un sentido de urgencia. No es en un rato, no es mañana, no puede ser dejado para más tarde, es YA.

Consideraciones

Existe un comodín que es la palabra gratis, pero debe ser usada con precaución:

• Primero que nada, no se debe mentir (cosa bastante habitual en acciones de marketing, lamentablemente)
• Segundo, si el producto es de alto nivel o calidad, la palabra gratis lo va a hacer lucir como algo barato, o sea que lo va a depreciar.
• Por último, recordemos que a todo el mundo le gustan las cosas gratis, por lo que si regalamos el producto o servicio, nos va a costar mucho cobrarlo luego. Lo mejor en estos casos es regalar un aspecto del servicio (por ejemplo: Obtenga un mes gratis ahora), o un producto adicional o complementario.

Botones

Los botones son metáforas gráficas que refieren a homónimos no-digitales (por ejemplo, los botones de un electrodoméstico). Esta representación gráfica es uno de los elementos de interfaz que siguen conservando su matriz eskeuomórfica (el eskeumorfismo o eskeuomorfismo, del griego skeuos (herramienta) y morphos (forma) es una representación digital con gran parecido a sus contrapartes físicas), heredando tanto su apariencia como su función.

Los botones pueden tener diferentes funciones y propósitos. En este caso, lo que nos interesa a nosotros son los botones en relación a una estrategia de conversión.

Prominencia

En primer lugar, si queremos que un botón llame la atención, debe ser el elemento más distinguible y prominente de nuestra interfaz. Para eso, debemos considerar variables como posición, tamaño, color, elevación, texto, etc. Oh, sí. Porque botones hace cualquiera. Botones bien hechos…. es una historia muy diferente. Un botón bien hecho puede generar números tan diferentes a un botón al azar como 100, 200, 1000, 2000%… y no es exageración. Muchas veces se han visto diferencias de ese tipo, hay multitud de artículos sobre el tema (y este es uno de ellos, por supuesto).

Dado que las variables son muchas, y como ya sabemos “hasta que no esté probado, no sabemos si va a funcionar”, es más fácil enumerar lo que sí sabemos que NO VA A FUNCIONAR.

Flat Design

El flat design en general es muy complejo en términos de usabilidad. Su falta de profundidad en el eje Z, su desprecio por las elevaciones y sombras y hasta una cierta búsqueda por disimular elementos hasta hacerlos casi invisibles hace que la gran mayoría de los diseños de tipo flat sean un fracaso rotundo a la hora de las conversiones. Aunque hay excepciones basadas en grandes cantidades de investigación y fine tuning constante, la realidad es que si el proyecto busca conversiones, ventas o resultados concretos, es mejor evitar el flat design.

Dentro del flat design existe además lo que se denomina como “ghost buttons” (botones fantasma). Básicamente son esos botones que no tienen fondo, sólo un borde. En algunos casos, la interacción hover hace que estos botones transmitan una afordancia. Obviamente, en formatos mobile o touch screen dicha afordancia no existirá. Veamos el siguiente ejemplo, tomado de SimpleFlex:

Como puede verse, un formato de flat design que incluye un ghost button. O varios. O ninguno.

En realidad, el único botón es el que está justo debajo de Welcome to SimpleFlex. El mismo no luce como un botón, y lo que es peor: hay elementos que lucen exactamente igual al botón, pero no son tales. Estéticamente, el diseño es muy agradable, moderno y vibrante. Pero en términos de usabilidad, es muy confuso y claramente va a tener pésimos resultados ya que las interacciones de usuarios dependerán más del azar que del propósito.

Veamos el siguiente ejemplo:

Un cambio de posición, color, elevación y mensaje que literalmente tomó 1 minuto realizar, hace que el botón sea claramente identificable como un botón y elimina toda confusión o duda acerca de su funcionalidad. A ustedes… ¿cuál versión les parece que va a funcionar mejor? Les apuesto lo que quieran que la versión hecha a las apuradas (pero usando principios básicos de UX y marketing) funciona al menos 100% mejor que la original. Y un 100% adicional en resultados… ¡no es poca cosa!

Etiquetas y Texto

Esto está muy relacionado con el primer punto de Verbo+Beneficio+Urgencia. Básicamente, tenemos que tener muy en cuenta las etiquetas o texto que usemos. No es lo mismo agregar un botón que diga “Pinche aquí” (¿por qué?) que uno que diga “¡Gane millones ya!”. Las conversiones serán muy pero muy diferentes. Lo mismo va para el clásico botón de formularios, que en el 90% de los casos (o incluso más) dice “Enviar” cuando podemos ser muchísimo más específicos diciéndole al usuario POR QUÉ debería enviar ese formulario.

Otra parte de la ecuación es el balance de texto del botón, que siempre debe ser corto y conciso, pero muchas veces no es suficiente para decir lo que queremos decir. Una técnica muy usada es la de usar el botón como CTA, y luego un pequeño texto adicional como “subtítulo”. Veamos el ejemplo siguiente:

Poner todo el texto en el botón hubiese sido muy difícil, por lo que agregamos un texto que da continuidad: no sólo incitamos al usuario a llenar el formulario y enviar sus datos, pero además le decimos que hay un beneficio por hacerlo.

Forma

Como ya habrán visto en los ejemplos que agregué, la mayoría de los botones tienen borde redondeado. ¿Por qué? Pues bien, porque está estudiado y demostrado que los bordes redondeados generan menos fricción que los bordes agudos. Este proceso se denomina contour bias (sesgo del contorno), y aquellos que hayan cursado carreras de diseño probablemente lo conozcan sobradamente ya que es uno de los principios universales de diseño. Para aquellos que no lo conozcan:

El sesgo de contorno es un principio del diseño que usamos todos los días, aunque por lo general de manera inconscientemente.

Los humanos tienen una tendencia innata a preferir objetos con contornos curvos por sobre objetos con ángulos o esquinas agudas.

Este principio demuestra que cuando nuestro cerebro reconoce ángulos agudos, activa la amígdala, una región del cerebro asociada con el procesamiento del miedo y la emoción.

Y en caso que se pregunten: ¿a mayor radio de curvatura, es más fácil que el usuario interactúe con el botón? Aunque esto no está del todo comprobado, estudios preliminares parecen indicar que es así, una de las razones de los llamados Floating Action Buttons o FAB de Material Design.

De la misma manera, podemos usar ángulos agudos en los botones con determinados propósitos, pero eso va a ser parte de otro artículo.

Fabio Devin

Administrador UXpañol.com
Diseñador Gráfico y UX Evangelist
Experto en Experiencia de Usuario, habiendo trabajado para distintas empresas Fortune 500, gobiernos, personalidades, etc