5 reglas de formateo para mejorar la legibilidad de los e-mail y de las páginas de aterrizaje

¿Alguna vez te preguntas cómo leen tus usuarios los contenidos de tus e-mail y páginas web?

Si la respuesta es sí, te habrás tropezado más de una vez con la enorme cantidad de estudios sobre los mecanismos cognitivos con que el hombre visualiza, lee y asimila un contenido web. Si la respuesta es no, te asombrará saber que los usuarios rara vez leen todo lo que se encuentra dentro de una página web o de un mensaje: solo el 16 % de las personas se detiene a leer cada una de las palabras y en total se lee únicamente el 20 % de los contenidos de una página. La lectura se hace todavía más brusca y apresurada en el caso de los  boletines de noticias, y empeora aún más si se pasa de la computadora de sobremesa a la pantallita del smartphone. En el dispositivo móvil, de hecho, la capacidad de comprensión se hace objetivamente más lenta cuanto más complejo es el texto.

Si nos detenemos en estos aspectos, se puede entender enseguida por qué es fundamental detenerse no solo en la  readability de un texto, sino también en su legibility, y por qué es necesario trabajar en el formateo de los contenidos para encontrar soluciones que hagan el texto fácil de leer y claro desde el primer impacto visual que el usuario recibe.

Veamos entonces algunas simples reglas para facilitar la lectura de tus e-mail y páginas de aterrizaje.

Vamos a llamar readability a la legibilidad de un texto considera como optimización de la sintaxis de un contenido, de modo que resulte simple, fluida y de fácil comprensión para el lector. La readability es por tanto responsabilidad del copywriter, el redactor del texto. Usaremos legibility, para referirnos a la legibilidad de los caracteres, es decir, a la capacidad de hacer que se distingan entre sí y sean fácilmente identificables. Se trata, por tanto, de trabajar en la estructura gráfica del carácter: su grosor, tamaño, color, fuente, interlineado y espaciado. Garantizar una excelente legibility es responsabilidad exclusiva del maquetador del texto.

Encontrarse delante un muro de texto sin interrupciones o secciones es el principal obstáculo para la lectura de un contenido.

La regla número uno, por ello, no puede ser otra que la de crear secciones distintas dentro del texto y subdividirlo en párrafos (y también en subpárrafos, si es necesario), cada uno referido a una determinada idea/temática. De este modo, tu acción incide en tres frentes:

• aligerar el impacto visual del texto de la página o del e-mail
• permitir al usuario saltar al párrafo siguiente si el tema de un párrafo ya le es conocido o le resulta irrelevante.
• acelerar, por consiguiente, la lectura completa del texto, aumentando la facilidad con que se recorre la página

Tomamos como ejemplo este e-mail, en el que encontramos mucho texto sin subtítulo alguno ni diferencias de formato entre los caracteres. Sería realmente difícil leer este tipo de mensaje si los párrafos no se distinguiesen y no hubiera una separación visual del texto

Fuente: Really Good Emails

Una vez dado este paso, puedes considerar resaltar todavía más estas secciones de texto estableciendo sangrías para los distintos tipos de párrafos. Esto no solo los hace claramente identificables, sino que puede representar también un elemento con el que jugar para aumentar el dinamismo del texto, como muestra este GIF:

En el mensaje mostrado en esta secuencia de imágenes, puedes notar que la introducción de distintas sangrías crea mucho movimiento en el bloque de texto, que se convierte en una especie de marco de la imagen. Además, este GIF hace evidente lo fácil e inmediato que resulta gestionar las distintas sangrías con el editor BEE integrado en la plataforma MailUp: basta un simple clic en el botón de sangría de párrafo en la barra de herramientas de formato del bloque de texto, coincidiendo con la sección sobre la que quiere actuar.

Una vez creados tus párrafos, otra regla importante para mejorar la legibilidad de los textos es  poner subtítulos a las secciones del mensaje o de la página (donde sea necesario), optimizar la eficacia y la claridad (sé específico y conciso) y asignarles una jerarquía, introduciendo las title tag o etiquetas de título más convenientes (H1, H2 y H3).

Este paso es clave para optimizar el contenido, tanto desde el punto de vista SEO, como desde el punto de vista estético, para mejorar el impacto visual y facilitar al usuario la lectura del texto, como en este caso:

En este ejemplo puedes ver que el texto no solo ha sido subdividido en párrafos, sino que se han elegido títulos (en este caso H2) para aclarar el tema de cada sección y permitir al usuario identificar de un vistazo las principales temáticas del mensaje.

Si utilizas la plataforma MailUp, introducir title tag en tus e-mail y páginas de aterrizaje ahora es más sencillo que nunca gracias a una de las últimas novedades del editor BEE.

Solo tienes que añadir el bloque de contenido dedicado al título, situarlo en el cuerpo del mensaje y seleccionar el tipo de tag title que quieres añadir (H1, H2 o H3), como se muestra en la imagen:

Las listas con viñetas quizá sean una de las herramientas más eficaces a la hora de aligerar un texto y transmitir de forma mucho más inmediata los principales conceptos de un mensaje.

Compara estos dos ejemplos para entender cómo un mismo texto puede cambiar radicalmente con solo aplicar esa sencilla solución.

Habrás notado que la opción 2 resulta objetivamente mucho más fácil de leer, aprender y memorizar. Es así porque la lista con viñetas resalta por sí sola los elementos clave de un mensaje y crea visualmente puntos de atención que resultan de inmediato evidentes al ojo del lector. 

Observa, por ejemplo, en este e-mail, cómo la presencia de una lista con viñetas logra dividir el bloque de texto y hacerlo menos pesado ya en la primera lectura:

Obviamente, hay varias maneras de representar una lista con viñetas, según las necesidades y el tipo de contenido:

• adoptar una numeración (cuando se quiere dar la idea de un orden cronológico o enfatizar el total de puntos de la lista)
• utilizar puntos gruesos (la solución más universal, que se presta a cualquier tipo de lista)
• usar letras (cuando se trata de un cuestionario con distintas opciones de respuesta, por ejemplo)

Con el editor BEE puedes establecer y elegir distintos tipos de listas simplemente con expandir el botón dedicado:

Además de ser una excelente solución para facilitar la lectura de un texto, las listas con viñetas son un buen recurso para toda una serie de necesidades: comunicar los puntos del orden del día de un evento, ilustrar el índice de un documento o de un e-book, describir las fases de un proceso (por ejemplo, de activación de un servicio adquirido por el usuario), definir los elementos de una lista de verificación, detallar las ventajas de una oferta, etc.

Veamos algunas indicaciones de referencia:

Otro elemento que puede obstaculizar la lectura de un contenido es la ausencia de espacio suficiente entre líneas y caracteres que sirve para aligerar el bloque de texto. Lo que queremos evitar, de hecho, es un efecto de este tipo:

El editor BEE te proporciona una serie de funciones y soluciones para evitar este riesgo:

• gestionar el interlineado de los distintos bloques de texto para aumentar el espacio entre las líneas
• aumentar el tamaño del texto, generalmente predefinido en 12 px. En ese caso, el interlineado se adecuará automáticamente a la modificación efectuada, manteniendo el mismo tamaño de los caracteres
• jugar con el espacio entre letras para aumentar el espacio entre los caracteres de un título o de cualquier otra palabra dentro del texto

• ajustar el padding entre los distintos módulos que componen el mensaje, o lo que es lo mismo, definir el espacio alrededor de cada bloque aumentando, por ejemplo , los márgenes inferior y superior entre título y párrafo

La última regla (que no la menos importante) se refiere al formato de los caracteres.

Después de haber subdividido el texto en párrafos, una vez que hayas introducido (si es el caso) tus listas con viñetas,  y tras asegurarte de que el espacio entre letras, títulos y módulos del mensaje es el adecuado, es el momento de romper la uniformidad del texto y resaltar las palabras clave introduciendo negritas, colores  de acento y enlaces hipertextuales.

Puedes recurrir a la letra negrita para guiar la mirada del usuario hacia las palabras clave que desees enfatizar, y utilizar un color distinto para los enlaces, de modo que quede clara la presencia de una conexión hipertextual.

Mira por ejemplo, lo fácil de leer que resulta este texto con tan solo introducir esas medidas:

Sobre todo cuando trabajas en un texto con una cierta longitud, resaltar los conceptos principales es un paso obligatorio, que con el editor BEE resulta todavía más fácil porque puedes decidir:

• formatear tus textos en el documento de trabajo que has elaborado y copiarlos en el editor del mensaje o de la página una vez listos, sin perder el formato de los caracteres que has resaltado en negrita o cursiva.
• trabajar en el formato directamente en el editor, cuya práctica barra de herramientas te permitirá tener en un único sitio todos los instrumentos que necesitas y que puedes manejar según se requiera, expandiéndola o haciéndola colapsar para que no obstaculice la visualización.

Nuestro consejo, en cualquier caso, es no exagerar con la longitud de los textos. Los estudios demuestran que cuanto más aumenta el número de palabras dentro de una página, más complejo se hace el aprendizaje  y menor es el número de conceptos que el usuario tiende a asimilar.

Para sintetizar tus contenidos, puedes utilizar la misma estratagema que se adopta para optimizar la longitud del asunto, o recurrir a símbolos “parlantes” y caracteres especiales, que en el editor BEE encontrarás cómodamente divididos en tipos (para no tener que recorrer listas infinitas en busca del carácter adecuado):

La eficacia de una buena estrategia de marketing de contenido no es solo cuestión de la redacción de los textos, copywriting, sino que depende también de la tipografía y del diseño de un texto.

Hacer tus mensajes y tus páginas fáciles de leer es, de hecho, el punto de partida sin el cual tu público no asimilará ni captará ni siquiera lo contenidos más brillantes y originales.

Ahora te toca a ti empezar a optimizar a formatear tus textos y a poner en práctica estas sencillas reglas, aprovechando todas las funciones intuitivas del editor BEE y de la plataforma MailUp.