Ser úni­cos para y por el usuario. Los usuar­ios se enfrentan a miles de impactos diar­ios de difer­entes mar­cas, tan­tos que las estas se vuel­ven como gotas de agua en un océano. Exis­ten muchas estrate­gias para gener­ar engage­ment con nue­stros usuar­ios y algunos de los prin­ci­p­ios para lle­gar a ello es que nos reconoz­can, trans­mi­tir los val­ores y la con­sis­ten­cia de nues­tra mar­ca.

Ejem­p­lo: reser­va de habita­ciones de Google

Un bue­na expe­ri­en­cia en con­tenido puede ayu­dar al usuario a que se sien­ta más seguro den­tro de la nave­gación de nues­tra inter­faz, reducir la ambigüedad mostran­do una ima­gen más trans­par­ente, ayu­dar a que pue­da tomar deci­siones de for­ma más ágil y aumente la con­ver­sión.

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

 

 

Fundamentos UX writing

Podemos clasi­ficar los fun­da­men­tos del UX writ­ing en los sigu­ientes: hac­er foco en el usuario, ser claro, con­ciso, ayu­dar y trans­mi­tir la iden­ti­dad de la mar­ca.

Al crear cualquier comu­ni­cación no olvidemos hac­er foco en el usuario, debe­mos comu­ni­carnos con él con su lengua­je des­de la empatía, enten­di­en­do sus emo­ciones en cada una de las comu­ni­ca­ciones ya sean visuales, escritas o por voz.

Un claro ejem­p­lo de adap­tarse a las emo­ciones y el lengua­je del usuario es el que nos com­parte Tor­rey Pod­ma­jer­sky en su libro ‘Strate­gic writ­ing for UX’ en la época en la que tra­ba­jó para Microsoft. Tor­rey expli­ca que crearon la voz de la Xbox 360 como si la con­so­la estu­viese sen­ta­da al lado del usuario, adap­tan­do sus men­sajes según las emo­ciones de entu­si­as­mo de los jugadores.

Debe­mos ser claros, adap­tan­do los men­sajes al con­tex­to en el que se encuen­tra el usuario, ser pre­cisos, menos es más. El usuario no tiene tiem­po para leer y si lo hace, segu­ra­mente sea para leer un buen libro no los copys de una solu­ción dig­i­tal. Cuan­to más breves seamos, sin hac­er peligrar el entendimien­to del con­tenido, menos tiem­po hare­mos perder a nue­stro usuario y menor será la car­ga cog­ni­ti­va para enten­der las inter­faces.

Los men­sajes tienen que ser útiles para el usuario para ayu­dar­le y guiar­le por el paso de nues­tra solu­ción, debe­mos inten­tar aclarar sus dudas y dar­le siem­pre alter­na­ti­vas para la nave­gación. Por últi­mo, debe­mos trans­mi­tir la mar­ca en cada con­tenido  medi­ante la voz y el tono.

Ima­gen. Tex­tos pre­cisos y claros

La voz y el tono

La voz es el sel­lo de iden­ti­dad de una mar­ca, la per­son­al­i­dad que la dis­tingue y la define como com­pañía, el tono es algo vari­able que se adap­ta a la situación.

Por ejem­p­lo, cuan­do nos lla­ma nues­tra madre por telé­fono puede ser que nos hable de for­ma car­iñosa, dis­gus­ta­da, con­tenta o enfada­da porque hace tiem­po que no la lla­mamos, puede ser que tomem­os un momen­to para descifrar el tono en el que se dirige a nosotros, pero nun­ca ten­dremos dudas de que se tra­ta de nues­tra madre por su voz.

Lo mis­mo pasa con las mar­cas, el tono puede cam­biar según el pro­ce­so de nave­gación. Por ejem­p­lo, uti­lizamos un lengua­je llano y diver­tido para hablar con los usuar­ios mien­tras están nave­gan­do por nue­stros difer­entes pro­duc­tos, sin embar­go cuan­do están en el pro­ce­so de pago, el tono toma más seriedad. 

 

DSM, DS y writing principles

Ima­gen Design Sys­tem Mailchimp

Un DSM o Design Sys­tem Man­ag­er es una platafor­ma colab­o­ra­ti­va donde todos los equipos se diri­gen a ella para con­sul­tar el sis­tema de dis­eño o bien ampli­ar­lo, recordemos que los sis­temas de dis­eño son ele­men­tos vivos de crec­imien­to orgáni­co. Dis­eñadores, desar­rol­ladores y nego­cio acud­irán a esta platafor­ma para poder desar­rol­lar cor­rec­ta­mente su flu­jo de tra­ba­jo.

El sis­tema de dis­eño o design sys­tem es el núcleo del DSM, son las piezas de un puz­zle que com­po­nen la mar­ca. Entre estas piezas se encuen­tran los val­ores y prin­ci­p­ios de la mar­ca, esti­los visuales atom­iza­dos, bue­nas prác­ti­cas para la acce­si­bil­i­dad y cada vez más encon­tramos en las guías de esti­lo del mer­ca­do un aparta­do de ‘writ­ing’.

El aparta­do ‘writ­ing’ de una guía de esti­los es la for­ma tex­tu­al de trans­mi­tir los val­ores de la mar­ca a través del tex­to, o la voz en caso de los asis­tentes vir­tuales, pen­san­do siem­pre en los usuar­ios. Los con­tenidos de la guía de esti­lo de escrit­u­ra ayu­da a todos los equipos que estén involu­cra­dos en la mar­ca como dis­eño, mar­ket­ing, legal y además trans­mite una con­sis­ten­cia y coheren­cia a los usuar­ios que inter­ac­túan con nue­stro pro­duc­to.

 

Apartados de un sistema de diseño

El con­tenido de una guía de esti­los puede ser más o menos amplias, pero todas las guías reco­gen los sigu­ientes con­tenidos:

1. Voz y tono
2. Obje­tivos y prin­ci­p­ios
3. Apli­cación de los atrib­u­tos, tan­to en la solu­ción dig­i­tal como la estruc­tura, com­po­nentes, módu­los y canales; redes sociales, con­tenido legal, newslet­ter, posts…
4. Reglas de escrit­u­ra téc­ni­ca, acce­si­bil­i­dad y tra­duc­ción en el caso de que ten­ga apli­cación en var­ios idiomas.

Ima­gen Design Sys­tem Shopi­fy

 

Objetivos y principios de la marca

Estos obje­tivos se deben aplicar a todo el con­tenido que se genere, debe ser aque­l­lo que quer­e­mos acome­ter como mar­ca hacia el usuario. Por ejem­p­lo, MailChimp es una platafor­ma de mail­ing y quiere siem­pre que el usuario pue­da ser autónomo en el uso de su ser­vi­cio e inten­tar guiar­lo en el pro­ce­so. A con­tin­uación, os aña­do un lis­ta­do de los obje­tivos que apare­cen en el design sys­tem de MailChimp:

• Empoderamien­to del usuario. For­mar, guiar al usuario y velar por la com­pren­sión.
• Facil­i­tar. Ayu­dar a las per­sonas a com­pren­der medi­ante el uso de un lengua­je que les informe y los aliente a aprovechar al máx­i­mo sus pro­duc­tos.
• El respeto. Pon­erse en su lugar y no ser con­de­scen­di­entes. MailChimp tiene el lema de que los usuar­ios tienen otras cosas que hac­er.
• Guiar. Comu­nicar de man­era ami­ga­ble y útil.
• Con­ciso. Evi­tar nar­ra­ciones dramáti­cas y reclam­os grandiosos. 

 

Definir los atributos y valores

Por otro lado están los atrib­u­tos, que serían las palan­cas que accio­nan nue­stro obje­ti­vo. Basán­donos en el ejem­p­lo ante­ri­or, el obje­ti­vo era empoder­ar y guiar al usuario den­tro del uso del ser­vi­cio, y la mar­ca pro­pone con­seguir­lo con los sigu­ientes atrib­u­tos: ser claro, útil, con un toque amis­toso y por supuesto, apropi­a­do. 

Veamos con más detalle cómo lo con­siguen:

• Claro. Com­pren­der antes el tema sobre el que se estás escri­bi­en­do. Usa pal­abras y ora­ciones sim­ples.
• Útil. Antes de comen­zar a escribir, pregún­tate: ¿Para qué sirve esto? ¿Quién lo va a leer? ¿Qué nece­si­tan saber?
• Amis­toso. Escribir como un humano. Sin miedo a romper algu­nas reglas si hace que su escrit­u­ra sea más fácil de rela­cionar. Todo el con­tenido, des­de la copia lla­ma­ti­va de la pági­na de ini­cio has­ta las aler­tas del sis­tema, debe ser cáli­do y humano.
• Apropi­a­do. Escribir de una man­era que se adapte a la situación. Igual que en las con­ver­sa­ciones cara a cara, adap­tar el tono depen­di­en­do de a quién se le está escri­bi­en­do y de qué se está escri­bi­en­do.

 

Tipos de contenidos

El con­tenido que debe­mos crear como UX writ­ing no tiene porqué ser tex­tos lar­gos, en los micro copys es a veces donde más se nota la labor de la expe­ri­en­cia de usuario. Los tex­tos a tra­ba­jar los podemos encon­trar en títu­los, botones, links, descrip­ciones, esta­dos vacíos, inputs, noti­fi­ca­ciones, errores… veamos algunos de los ejem­p­los a con­tin­uación.

Títu­los

Los títu­los ocu­pan el niv­el más alto de nues­tra arqui­tec­tura, abrazan todo el con­tenido que viene a con­tin­uación y proveen al usuario de con­tex­to. Hay difer­entes tipos de títu­los, como el nom­bre de la mar­ca, el nom­bre del con­tenido, citan una tarea o títu­los que citan una tarea con ambigüedad.

Ima­gen pan­talla Blablacar bus­car un des­ti­no

La apli­cación Blablacar nos pone como títu­lo de la pan­talla ¿dónde quieres ir?, este sería un títu­lo que cita una tarea con ambigüedad. Si lo tra­duci­mos a un títu­lo que cita la tarea sería, ‘Intro­duce des­ti­no y hora’. El nombre de la mar­ca: Blablacar y en el caso del nombre del con­tenido: ‘Des­ti­no’. 

 

Botones y links

Imá­genes de los botones de com­pra de Ama­zon, Stradi­var­ius y Apple

 

Los botones y los links son tex­tos que des­en­ca­de­nan acciones bien sea nave­gación a otra pági­na, lev­an­tar un modal, descar­gar un con­tenido, des­en­ca­denar un wiz­ard de pasos, grabar datos al final de un for­mu­la­rio…

El reto de los botones es que sean recono­ci­bles, especí­fi­cos y que no ten­gan más de 2 pal­abras a no ser que difi­culte el entendimien­to.

En muchas oca­siones los botones no están solos, sino que tienen que con­vivir con botones secun­dar­ios y/o links o inclu­so con var­ios botones, en pan­tallas pequeñas a veces se susti­tuyen por icono­grafía. Si esto lle­ga a ocur­rir, se debe preparar el códi­go para que los botones sean acce­si­bles e indiquen el copy cor­re­spon­di­ente para que aque­l­las per­sonas con prob­le­mas visuales puedan acced­er por voz al tex­to del botón y con­tinúen con la nave­gación sin prob­le­mas. Para ello, debe­mos preparar el tex­to del  ‘alt’ con el copy cor­re­spon­di­ente.

Ima­gen añadir ‘alt’ a la icono­grafía

 

Descrip­ciones

Las descrip­ciones deben ayu­dar a enten­der el con­tenido. Nor­mal­mente van acom­paña­dos de imá­genes, enlaces u otros com­po­nentes, sue­len ser igno­radas. Cuan­do estos tex­tos son muy lar­gos podemos emplear un leer más o un aster­isco (*) para hac­er aclara­ciones com­ple­men­tarias. Recor­dad que el con­tenido o aclaración no deben ir nun­ca por deba­jo del botón al que cor­re­sponde la aclaración.

 

Esta­dos vacíos

Los esta­dos vacíos se deben a que la pan­talla o com­po­nente no puede mostrar la infor­ma­ción porque no tiene los datos nece­sar­ios ya sea por que es la primera vez que el usuario entra, no ha cumpli­men­ta­do los datos por algún moti­vo o bien hay algún error en el ser­vi­cio que no per­mite car­gar los datos.

En cualquier caso debe­mos explicar al usuario qué está ocur­rien­do y dar­le posi­bles solu­ciones.

Imá­genes de esta­dos vacíos

Text input field

Ayu­dan a los usuar­ios a intro­ducir la infor­ma­ción pre­cisa. Los podemos encon­trar en for­mu­la­rios o pro­ce­sos donde se requiera intro­ducir datos como email, telé­fono, fecha, direc­ción, etc.. Algunos de ellos se ocul­tan cuan­do el usuario hace foco en el cam­po y este con­tenido se con­vierte en el label como por ejem­p­lo en ‘mate­r­i­al design’. Lo que no debe­mos hac­er nun­ca es ocul­tar­los imposi­bil­i­tan­do al usuario saber qué con­tenido debe escribir.

 Ejem­p­los de inputs

 

Tex­to de tran­si­ción

El propósi­to del tex­to tran­si­ción es con­fir­mar la acción que está ocur­rien­do, requiere de acción pre­via del usuario y devuelve el feed­back de lo que está ocur­rien­do. Ejem­p­los: ’ Car­gan­do méto­do de pago’, ’ A pun­to de finalizar pro­ce­so, si inter­rumpe el pro­ce­so se perderán los datos’, ‘Cal­cu­lan­do ruta xxx’.

Ima­gen de tex­to de tran­si­ción de pági­nas de trans­porte aéreo.

La web de ‘Dream­lin­er’ aprovecha el tiem­po de cál­cu­lo para mostrar men­sajes de acom­pañamien­to rela­ciona­dos con los ser­vi­cios.

 

Men­sajes de con­fir­ma­ción

Los men­sajes de con­fir­ma­ción son aque­l­los que infor­man al usuario del resul­ta­do de la acción acometi­da, sea un OK o un KO. Los men­sajes de con­fir­ma­ción per­miten que la expe­ri­en­cia con­tin­ue y da paso a que el sis­tema y el usuario sigan tra­ba­jan­do. 

Por ejem­p­lo los fun­nels o pro­ce­sos donde el usuario com­ple­ta cada uno de los pasos sue­len apare­cer un copys que indi­can si el usuario está com­ple­tan­do los datos requeri­dos y le da feed­back de cada paso com­ple­ta­do.

 

Comu­ni­ca­ciones

Las comu­ni­ca­ciones recuer­dan al usuario que ha ocur­ri­do algo o va ocur­rir y tal vez requiera de su acción. Las comu­ni­ca­ciones pueden lle­gar por difer­entes canales, den­tro de la propia apli­cación, por push o correo, en todas ellas debe­mos ser con­sis­tentes  del men­saje que esta­mos comu­ni­can­do y adap­tarnos al medio en el que se está emi­tien­do. No es lo mis­mo mostrar una comu­ni­cación push de 2 líneas, que un correo que nos podemos expla­yar más en el con­tenido.

Hay canales que son más efec­tivos que otros, por ejem­p­lo un sms o un push puede atraer la aten­ción del usuario más rápi­do por el esce­nario en el que se encuen­tra. Otra vari­able que debe­mos ten­er en cuen­ta es la pri­or­i­dad, la podemos clasi­ficar en difer­entes gra­dos de rel­e­van­cia para el usuario; aler­tas, noti­fi­cación y comu­ni­cación com­er­cial. 

 

 

Errores

Ejem­p­los error 404

Lo más impor­tante que debe­mos recor­dar de los errores es que debe­mos ayu­dar al usuario a recu­per­arse de ellos, dar­le posi­bles solu­ciones y sal­i­das. 

Actual­mente están muy de moda los errores 404, es una opor­tu­nidad para redi­ri­gir al usuario a la nave­gación y ofre­cer­le posi­bles nuevas alter­na­ti­vas para que siga en nue­stro sitio web. Los errores 404 deben ser claros y sobre todo asumir como mar­ca que hemos tenido un error, dis­cul­parnos o uti­lizar emo­ciones medi­ante imá­genes que cor­ri­jan ese pun­to de dolor para el usuario. En ningún caso debe­mos escribir copys echan­do al cul­pa al usuario como; ¡Ups parece que te has per­di­do!

 

Guías de estilo con UX writing

Para finalizar, dejo una selec­ción de design sys­tems que pueden ayu­daros e inspi­raros en la creación de vue­stro con­tenido.

Mail chimp https://styleguide.mailchimp.com/

Mer­cury https://www.canadapost.ca/cpc/en/designsystem/mercury/ux-writing.page

Mate­r­i­al design https://material.io/design/communication/writing.html?fbclid=IwAR18sxVvU9Yoq87kgnUCz8yJLxjNTH4KFcnur_QvyBFUcSJK5OhcURIfTl4

Shopi­fy  https://polaris.shopify.com/content/product-content

Atlass­ian https://atlassian.design/guidelines/brand/writing-style‑1

Sales­force https://www.lightningdesignsystem.com/assets/downloads/salesforce-voice-and-tone.pdf?fbclid=IwAR2m9JAtOm-76IUwHe0S_xr8x1m5SaYPAQYuDdeJP6uhUnj1Lu-QJsCmAl0