UX writing en nuestro sistema de diseño

irene ferrer 17 mayo 2020 Arquitectura Información/Customer experience/Prototipado e interacción

Ser únicos para y por el usuario. Los usuarios se enfrentan a miles de impactos diarios de diferentes marcas, tantos que las estas se vuelven como gotas de agua en un océano. Existen muchas estrategias para generar engagement con nuestros usuarios y algunos de los principios para llegar a ello es que nos reconozcan, transmitir los valores y la consistencia de nuestra marca.

Ejemplo: reserva de habitaciones de Google

Un buena experiencia en contenido puede ayudar al usuario a que se sienta más seguro dentro de la navegación de nuestra interfaz, reducir la ambigüedad mostrando una imagen más transparente, ayudar a que pueda tomar decisiones de forma más ágil y aumente la conversión.

Caso: https://www.writework.com/

Fundamentos UX writing

Podemos clasificar los fundamentos del UX writing en los siguientes: hacer foco en el usuario, ser claro, conciso, ayudar y transmitir la identidad de la marca.

Al crear cualquier comunicación no olvidemos hacer foco en el usuario, debemos comunicarnos con él con su lenguaje desde la empatía, entendiendo sus emociones en cada una de las comunicaciones ya sean visuales, escritas o por voz.

Un claro ejemplo de adaptarse a las emociones y el lenguaje del usuario es el que nos comparte Torrey Podmajersky en su libro ‘Strategic writing for UX’ en la época en la que trabajó para Microsoft. Torrey explica que crearon la voz de la Xbox 360 como si la consola estuviese sentada al lado del usuario, adaptando sus mensajes según las emociones de entusiasmo de los jugadores.

Debemos ser claros, adaptando los mensajes al contexto en el que se encuentra el usuario, ser precisos, menos es más. El usuario no tiene tiempo para leer y si lo hace, seguramente sea para leer un buen libro no los copys de una solución digital. Cuanto más breves seamos, sin hacer peligrar el entendimiento del contenido, menos tiempo haremos perder a nuestro usuario y menor será la carga cognitiva para entender las interfaces.

Los mensajes tienen que ser útiles para el usuario para ayudarle y guiarle por el paso de nuestra solución, debemos intentar aclarar sus dudas y darle siempre alternativas para la navegación. Por último, debemos transmitir la marca en cada contenido mediante la voz y el tono.

Imagen. Textos precisos y claros

La voz y el tono

La voz es el sello de identidad de una marca, la personalidad que la distingue y la define como compañía, el tono es algo variable que se adapta a la situación.

Por ejemplo, cuando nos llama nuestra madre por teléfono puede ser que nos hable de forma cariñosa, disgustada, contenta o enfadada porque hace tiempo que no la llamamos, puede ser que tomemos un momento para descifrar el tono en el que se dirige a nosotros, pero nunca tendremos dudas de que se trata de nuestra madre por su voz.

Lo mismo pasa con las marcas, el tono puede cambiar según el proceso de navegación. Por ejemplo, utilizamos un lenguaje llano y divertido para hablar con los usuarios mientras están navegando por nuestros diferentes productos, sin embargo cuando están en el proceso de pago, el tono toma más seriedad.

DSM, DS y writing principles

Imagen Design System Mailchimp

Un DSM o Design System Manager es una plataforma colaborativa donde todos los equipos se dirigen a ella para consultar el sistema de diseño o bien ampliarlo, recordemos que los sistemas de diseño son elementos vivos de crecimiento orgánico. Diseñadores, desarrolladores y negocio acudirán a esta plataforma para poder desarrollar correctamente su flujo de trabajo.

El sistema de diseño o design system es el núcleo del DSM, son las piezas de un puzzle que componen la marca. Entre estas piezas se encuentran los valores y principios de la marca, estilos visuales atomizados, buenas prácticas para la accesibilidad y cada vez más encontramos en las guías de estilo del mercado un apartado de ‘writing’.

El apartado ‘writing’ de una guía de estilos es la forma textual de transmitir los valores de la marca a través del texto, o la voz en caso de los asistentes virtuales, pensando siempre en los usuarios. Los contenidos de la guía de estilo de escritura ayuda a todos los equipos que estén involucrados en la marca como diseño, marketing, legal y además transmite una consistencia y coherencia a los usuarios que interactúan con nuestro producto.

Apartados de un sistema de diseño

El contenido de una guía de estilos puede ser más o menos amplias, pero todas las guías recogen los siguientes contenidos:

Voz y tono
Objetivos y principios
Aplicación de los atributos, tanto en la solución digital como la estructura, componentes, módulos y canales; redes sociales, contenido legal, newsletter, posts…
Reglas de escritura técnica, accesibilidad y traducción en el caso de que tenga aplicación en varios idiomas.

Imagen Design System Shopify

Objetivos y principios de la marca

Estos objetivos se deben aplicar a todo el contenido que se genere, debe ser aquello que queremos acometer como marca hacia el usuario. Por ejemplo, MailChimp es una plataforma de mailing y quiere siempre que el usuario pueda ser autónomo en el uso de su servicio e intentar guiarlo en el proceso. A continuación, os añado un listado de los objetivos que aparecen en el design system de MailChimp:

Empoderamiento del usuario. Formar, guiar al usuario y velar por la comprensión.
Facilitar. Ayudar a las personas a comprender mediante el uso de un lenguaje que les informe y los aliente a aprovechar al máximo sus productos.
El respeto. Ponerse en su lugar y no ser condescendientes. MailChimp tiene el lema de que los usuarios tienen otras cosas que hacer.
Guiar. Comunicar de manera amigable y útil.
Conciso. Evitar narraciones dramáticas y reclamos grandiosos.

Definir los atributos y valores

Por otro lado están los atributos, que serían las palancas que accionan nuestro objetivo. Basándonos en el ejemplo anterior, el objetivo era empoderar y guiar al usuario dentro del uso del servicio, y la marca propone conseguirlo con los siguientes atributos: ser claro, útil, con un toque amistoso y por supuesto, apropiado.

Veamos con más detalle cómo lo consiguen:

Claro. Comprender antes el tema sobre el que se estás escribiendo. Usa palabras y oraciones simples.
Útil. Antes de comenzar a escribir, pregúntate: ¿Para qué sirve esto? ¿Quién lo va a leer? ¿Qué necesitan saber?
Amistoso. Escribir como un humano. Sin miedo a romper algunas reglas si hace que su escritura sea más fácil de relacionar. Todo el contenido, desde la copia llamativa de la página de inicio hasta las alertas del sistema, debe ser cálido y humano.
Apropiado. Escribir de una manera que se adapte a la situación. Igual que en las conversaciones cara a cara, adaptar el tono dependiendo de a quién se le está escribiendo y de qué se está escribiendo.

Tipos de contenidos

El contenido que debemos crear como UX writing no tiene porqué ser textos largos, en los micro copys es a veces donde más se nota la labor de la experiencia de usuario. Los textos a trabajar los podemos encontrar en títulos, botones, links, descripciones, estados vacíos, inputs, notificaciones, errores… veamos algunos de los ejemplos a continuación.

Títulos

Los títulos ocupan el nivel más alto de nuestra arquitectura, abrazan todo el contenido que viene a continuación y proveen al usuario de contexto. Hay diferentes tipos de títulos, como el nombre de la marca, el nombre del contenido, citan una tarea o títulos que citan una tarea con ambigüedad.

Imagen pantalla Blablacar buscar un destino

La aplicación Blablacar nos pone como título de la pantalla ¿dónde quieres ir?, este sería un título que cita una tarea con ambigüedad. Si lo traducimos a un título que cita la tarea sería, ‘Introduce destino y hora’. El nombre de la marca: Blablacar y en el caso del nombre del contenido: ‘Destino’.

Botones y links

Imágenes de los botones de compra de Amazon, Stradivarius y Apple

Los botones y los links son textos que desencadenan acciones bien sea navegación a otra página, levantar un modal, descargar un contenido, desencadenar un wizard de pasos, grabar datos al final de un formulario…

El reto de los botones es que sean reconocibles, específicos y que no tengan más de 2 palabras a no ser que dificulte el entendimiento.

En muchas ocasiones los botones no están solos, sino que tienen que convivir con botones secundarios y/o links o incluso con varios botones, en pantallas pequeñas a veces se sustituyen por iconografía. Si esto llega a ocurrir, se debe preparar el código para que los botones sean accesibles e indiquen el copy correspondiente para que aquellas personas con problemas visuales puedan acceder por voz al texto del botón y continúen con la navegación sin problemas. Para ello, debemos preparar el texto del ‘alt’ con el copy correspondiente.

Imagen añadir ‘alt’ a la iconografía

Descripciones

Las descripciones deben ayudar a entender el contenido. Normalmente van acompañados de imágenes, enlaces u otros componentes, suelen ser ignoradas. Cuando estos textos son muy largos podemos emplear un leer más o un asterisco (*) para hacer aclaraciones complementarias. Recordad que el contenido o aclaración no deben ir nunca por debajo del botón al que corresponde la aclaración.

Estados vacíos

Los estados vacíos se deben a que la pantalla o componente no puede mostrar la información porque no tiene los datos necesarios ya sea por que es la primera vez que el usuario entra, no ha cumplimentado los datos por algún motivo o bien hay algún error en el servicio que no permite cargar los datos.

En cualquier caso debemos explicar al usuario qué está ocurriendo y darle posibles soluciones.

Imágenes de estados vacíos

Text input field

Ayudan a los usuarios a introducir la información precisa. Los podemos encontrar en formularios o procesos donde se requiera introducir datos como email, teléfono, fecha, dirección, etc.. Algunos de ellos se ocultan cuando el usuario hace foco en el campo y este contenido se convierte en el label como por ejemplo en ‘material design’. Lo que no debemos hacer nunca es ocultarlos imposibilitando al usuario saber qué contenido debe escribir.

Ejemplos de inputs

Texto de transición

El propósito del texto transición es confirmar la acción que está ocurriendo, requiere de acción previa del usuario y devuelve el feedback de lo que está ocurriendo. Ejemplos: ‘ Cargando método de pago’, ‘ A punto de finalizar proceso, si interrumpe el proceso se perderán los datos’, ‘Calculando ruta xxx’.

Imagen de texto de transición de páginas de transporte aéreo.

La web de ‘Dreamliner’ aprovecha el tiempo de cálculo para mostrar mensajes de acompañamiento relacionados con los servicios.

Mensajes de confirmación

Los mensajes de confirmación son aquellos que informan al usuario del resultado de la acción acometida, sea un OK o un KO. Los mensajes de confirmación permiten que la experiencia continue y da paso a que el sistema y el usuario sigan trabajando.

Por ejemplo los funnels o procesos donde el usuario completa cada uno de los pasos suelen aparecer un copys que indican si el usuario está completando los datos requeridos y le da feedback de cada paso completado.

Comunicaciones

Las comunicaciones recuerdan al usuario que ha ocurrido algo o va ocurrir y tal vez requiera de su acción. Las comunicaciones pueden llegar por diferentes canales, dentro de la propia aplicación, por push o correo, en todas ellas debemos ser consistentes del mensaje que estamos comunicando y adaptarnos al medio en el que se está emitiendo. No es lo mismo mostrar una comunicación push de 2 líneas, que un correo que nos podemos explayar más en el contenido.

Hay canales que son más efectivos que otros, por ejemplo un sms o un push puede atraer la atención del usuario más rápido por el escenario en el que se encuentra. Otra variable que debemos tener en cuenta es la prioridad, la podemos clasificar en diferentes grados de relevancia para el usuario; alertas, notificación y comunicación comercial.

Errores

Ejemplos error 404

Lo más importante que debemos recordar de los errores es que debemos ayudar al usuario a recuperarse de ellos, darle posibles soluciones y salidas.

Actualmente están muy de moda los errores 404, es una oportunidad para redirigir al usuario a la navegación y ofrecerle posibles nuevas alternativas para que siga en nuestro sitio web. Los errores 404 deben ser claros y sobre todo asumir como marca que hemos tenido un error, disculparnos o utilizar emociones mediante imágenes que corrijan ese punto de dolor para el usuario. En ningún caso debemos escribir copys echando al culpa al usuario como; ¡Ups parece que te has perdido!