Cómo mejoramos nuestros botones con UX Writing

¡Tenemos nuestro primer post en Medium como equipo de Content!

En Naranja X somos un equipo de contenido bastante nuevo y el área, ¡también es nueva! Por lo que estamos a tiempo de poder contar los aciertos y errores que vamos teniendo en el proceso de consolidarnos.

El trabajo de Contenido

NX está dividido en verticales, las cuales tienen como foco los diferentes segmentos de usuarixs y tipo de plataformas. Si bien nuestra área es cross app, cada una de las personas que la conforman trabaja para una vertical en particular.

Para ser consistentes, todas las semanas tenemos reuniones llamadas Content Ops en las que trabajamos en conjunto para generar buenas prácticas. Esto es win-win: nutrimos nuestro contenido, está alineado, generamos mejores experiencias y, de paso, el equipo se llena de nuevos fundamentos para salir a defender sus decisiones.

Día a día tenemos reuniones -dailys- donde contamos qué vamos a hacer en el transcurso de la jornada y llevamos, si sucede, incógnitas de cada vertical, que después tratamos en Content Ops.

En búsqueda del botón perfecto

Así que como toda historia, todo comenzó en una daily: en los mensajes de error, ¿hacemos que el usuario vuelva a la sección o vuelva a intentar?

¿Volver a intentar o reintentar? ¿Seguir intentando? ¿Ir a Tarjetas? o ¿Volver a Tarjetas?¿Qué hace que el copy de un botón sea el correcto?

Esta simple discusión nos llevó a pensar en grande, ¡relevemos todo los botones que tenemos! Nos pusimos a buscar cómo tener consistencia en los call to action (CTA), generar guidelines y crear el contenido indicado para cada situación.

Objetivo y propósitos

Predecibles -o al menos deberían serlo-, son los responsables de dar visibilidad del sistema; los que le comunican a las personas qué va a pasar después de tocarlos generando seguridad en sus acciones.

Convierten, son elementos esenciales para conseguir los objetivos del negocio, especialmente cuando actúan como CTA.

Accionables, son parte fundamental del storytelling y la frutilla del postre para que las personas terminen su tarea.

Clasificación y definición

Verbos en Infinitivo: describen la acción básica sin conjugación.

Primera persona singular: hace referencia a que la persona usuaria realiza la acción, el “yo”.

Segunda persona singular: se le indica a la persona qué puede hacer.

Sustantivos: designan o identifican a un ser animado o inanimado y se utiliza para complementar a los verbos en infinitivo y contextualizar acciones.

Relevamiento y casos de uso

Necesitábamos entender el marco en el cual nos estábamos moviendo, así que empezamos con una una tabla de revisión y definimos en qué nos íbamos a enfocar.

Botón: qué etiqueta lo define (copy).

Objetivo: qué pasa cuando se toca.

Contexto: en qué producto y flujo se utilizó.

Sinónimos: qué otras palabras abarca (qué puede denotar).

Qué problemas encontramos

Inconsistencias: decíamos lo mismo, pero con distintas palabras.

Problemas: por utilizar “Volver a intentar” no podíamos hacer que las personas volvieran a la pantalla anterior.

Verbos pronominales, en imperativo, en primera persona, en segunda persona, preguntas.

Entendido y Listo: ¿quieren decir lo mismo? ¿Hay que usar uno u otro?

Cuestionamientos: pusimos a prueba los botones

Para poder entender todo el contexto, agrupamos los distintos verbos según su conjugación y nos hicimos preguntas.

Este tipo de cuestionamientos nos ayudan a definir fundamentos y entender por qué y para qué usamos los verbos en distintos modos, tiempos y personas.

Además, a través de estas prácticas encontramos puntos en común y generamos guidelines para encontrar estructuras lógicas a la hora de pensar nuevos contenidos.

Buenas prácticas

Con los resultados del relevamiento y tomando lo que investigamos, definimos qué funciona bien, produce buenos resultados, y, por lo tanto, recomendamos como modelo a seguir.

Cosas que sí

✓ Debe ser claro, directo y accionable.
✓ El infinitivo es el tiempo verbal perfecto (comprar, pedir, continuar).
✓ Descriptivo y literal (lo que aparece escrito es lo que debe pasar).
✓ Siempre que sea posible, no deben ser más de 3 palabras (máximo de 30 caracteres).
✓ Si es necesario, poner dos acciones en un mismo botón, pero solo si suceden al mismo tiempo.
✓ Botón primario: siempre va a ser el que convenga, convierta desde una mirada de negocio.
✓ Toda la pantalla es una historia: empieza con el título, termina con el botón.

Algunos ejemplos para tener en cuenta:

Caso 1
Contexto: la persona que tiene un negocio busca conectar su lector Toque, pero surge un error. En esta pantalla utilizamos el “Intentar de nuevo” o “reportar un problema”
Por qué: son claros y directos, muestran una acción específica; están en infinitivo, son cortos y tienen storytelling.

Caso 2
Contexto: cuando las personas quieren pagar una factura, pero la cuenta no tiene dinero suficiente.
En esta pantalla utilizamos el “Agregar dinero” o “Ir a Inicio”.
Por qué: son claros y directos, muestran una acción específica, son cortos, tienen storytelling; cumplen con el objetivo de negocio.

Caso 3
Contexto: por algún motivo, la persona no recuerda su clave e inicia todo el proceso de cambio.
En esta pantalla utilizamos el “¿No te llegó?” o “Ver e-mail”.
Por qué: utilizamos el recurso de pregunta para apelar a la persona; son cortos, accionables y tienen storytelling.

Cosas que no

✕ Evitar ser creativos cuando hacemos un CTA.
✕ El uso del imperativo puede ser percibido por los usuarios de manera negativa.
✕ No usar signos de exclamación, negritas y punto final.
✕ Evitar la ambigüedad.
✕ No utilizar mayúsculas. Nadie quiere que le griten cuando tiene que hacer algo.
✕ No utilizar frases largas, generan carga cognitiva.

Algunos ejemplos para que tener en cuenta:

Caso 1
Contexto: cuando una persona comerciante quiere hacer una venta, toca en “Cobrar con tarjeta” en la home y se le pide que ingrese el monto y si quiere, agregar una descripción en la que podía guardarla con un botón que decía “Listo”.

Problemática: ¿Qué entiende la persona por “Listo”? ¿La descripción o la compra está “Listo”? ¿Pensará que, “listo, ya hizo su venta”? “Listo”, ¿dialoga con el título de la pantalla? Con “Listo”, ¿se entiende qué es lo que va a pasar al tocar?

Cómo lo solucionamos: entendimos que “Listo” no resolvía ninguno de los cuestionamientos y por eso preferimos utilizar “Guardar” para ser claros sobre qué es lo que va a suceder al tocar en ese botón.

Caso 2
Contexto: las promociones en NX cuentan con una landing donde se explica cuál es el descuento, cómo puede utilizarse y cuáles son los términos y condiciones.

Problemática: el CTA propuesto por Marketing proponía dos acciones que no eran consecutivas: una vez que la persona iba a cargar dinero, finalizaba en ese flujo; no presentaba claridad y generaba carga cognitiva; estaba en imperativo, ordenando una acción.

Cómo lo solucionamos: elegimos cambiar el deeplink, el wording por “Pagar servicios” y redirigir a las personas al flujo del feature. Con esto, conectamos el título con el CTA, generamos una acción concreta y nos apoyamos en nuestros principios de buenas prácticas para generar una mejor experiencia.

Qué nos llevamos y tomamos como guía

• La mejor fórmula y la más utilizada es el verbo en infinitivo.
• No queremos abusar de los verbos pronominales, se alejan mucho de los verbos en infinitivo y pueden entorpecer a las personas cuando están llevando a cabo una tarea.
• No queremos usar el imperativo, sentimos que estamos gritando en vez de guiar. No son una buena práctica.
• Hablar en primera persona está bien, pero no debemos abusar. Como todo en la vida tiene excepciones y, creemos que, en ciertos contextos, puede ayudar a las personas a escanear mejor la interfaz.

En cada paso que damos en las sesiones, encontramos nuevos desafíos y aprendizajes; cada paso que damos es un hallazgo de algo que estábamos dejando en el camino.

Si tenés ganas de seguir aprendiendo con este equipo, ¡esto recién empieza! Abrimos este espacio para seguir compartiendo nuestros errores, aciertos y continuar nutriendo esta disciplina que tanto queremos.

Nadia Araque| Azul Inés Rodriguez | Fernanda Cordón | Francisco Amar