Publicado por Viv Dehaes on 09-10-2006

Usabilidad en el diseño de newletters

Tips, guías, pautas, consejos, etcéteras que deberíamos tener en cuenta cuando diseñamos un newsletter electrónico.

Según la Wikipedia, un newsletter o boletín electrónico "es una publicación distribuida de forma regular, generalmente centrada en un tema principal que es del interés de sus suscriptores."En un principio este delivery de información calificada se realizaba en papel por medio el correo postal, con el advenimiento de la era de la información tuvo su salto al mundo digital y aparecieron los newsletters electrónicos enviados a suscriptores vía e-mail.

El objetivo primario de esta práctica de marketing digital es entregar información a los usuarios sobre actualizaciones del sitio o lo que se les ocurra a los editores que pudiera interesarle a sus suscriptores, el fin último tiene que ver con la fidelización del usuario, es decir, el newsletter se transforma en un embajador de la calidad de nuestro sitio, por ello debemos prestar atención a lo que estamos enviando.

Sobre la información

De más está decir que la información tiene que ser relevante, o sea de interés para el grupo de suscriptores. Los contenidos tienen que perseguir algún estándar de calidad que pueda ser percibido por sus usuarios, de no cumplir con estas sentencias, no lo envíen y no utilicen el newsletter como soporte para enviar publicidad, a menos que los usuarios lo hayan solicitado expresamente.

Es importante que el newsletter contenga la siguiente información:

  • Nombre del sitio, En el formato HTML debe ir también el logo.
  • URL del sitio, información de contacto, nombre de la persona responsable.
  • Información sobre la administración de la suscripción.

Sobre el formato y la presentación de la información

Los formatos de entrega más populares son HTML y texto plano, los cuales deben ser ofrecidos a nuestros usuarios para que éstos elijan cómo quieren que la información les llegue. Para los usuarios que elijan como formato HTML, habrá que considerar algunos aspectos de la presentación de la información, por ejemplo:

  • Ancho recomendado: la longitud horizontal máxima que puede alcanzar el mensaje para que la información sea correctamente interpretada. Por mi parte recomiendo un máximo de 500 px a 550 px. En esta medida no solo hay que tener en cuenta la resolución del monitor de los usuarios, sino también el uso del panel de previsualización de los clientes de mail por parte de la mayoría de los clientes de mail de escritorio y que seguramente se va a incorporar en las próximas generaciones de servicios de mail web based. La idea es que el mail pueda mostrarse correctamente cuando el usuario lo previsualiza en su cliente de correo, si después quiere abrirlo para verlo mejor, enhorabuena, pero hay muchos usuarios que ya no utilizan esta funcionalidad, sino que visualizan lo que se ve en el panel de previsualización.
  • Modelo de pirámide invertida: es recomendable que la información más importante esté lo más arriba posible dentro de la estructura. Se recomienda empezar por la conclusión, un párrafo como resumen e ir agregando información gradualmente, de modo que los usuarios puedan tener una idea global del contenido incluso sino no lo leen entero.
  • Estructurar el texto para que sea escaneable: utilizartítulos claros, significativos y diferenciados de los textos, párrafos cortos y concisos, viñetas y recuadros para cortar la monotonía de la información pero no perdiendo de vista la moderación. Asegurar también, el balance necesario entre las zonas de congestión de la información y los espacios en blanco necesarios para "airear" la información. No justificar el texto, los cortes que encontramos en la alineación a la izquierda, generados por el tamaño aleatorio del texto ayudan a la lectura en pantalla, que es mucho más dificultosa para el ojo humano. (Ver: How Users Read on the Web). Se recomienda como máximo el uso de 3 tipos distintos de tipografías.
  • Poner mucha atención los encabezados del newsletter: el asunto debe ser, como vengo diciendo con los títulos, descripciones, etc.: descriptivo y concreto. Hay que tener especial cuidado con el Sender (from) es recomendable no utilizar alias genéricos como "listadmin" o "postmaster" sino más bien nombres reales, del sitio o del encargado del mismo. Y por último el destinatario del mensaje debe ser el mail del suscriptor, no eufemismos de listas tales como "listaboletin", y ni hablar del "undisclosed recipient" para que el receptor pueda saber fácilmente por cual dirección de correo le llega determinada lista.

Sobre los estilos (CSS o Tablas)

Aquí entramos en una larga discusión acerca si para maquetar un newsletter, de cara a que se vea bien en los múltiples clientes de mail, se debería utilizar tablas o CSS.

He aquí unas recomendaciones al respecto:

  • Incluir el tag <style> embebido en el HTML en vez de referenciarlo externamente mediante un link. También se aconseja que este tag, amén de que no sea políticamente correcto, se posicione a continuación del tag <body>en vez de antes de éste para que el HTMl pueda ser interpretado por el servicio de Hotmail.
  • Tratar de no maquetar con CSS, aunque muchos sostengan que un maquetado correctamente semántico es posible, mi experiencia indica que la mayoría de los dispositivos no se ponen de acuerdo sobre una manera unificada de mostrar la información.
  • No usar código JavaScript muchas veces pueden disparar alertas de seguridad en la PC de los usuarios, creo que no tengo que explicar lo mal que nos haría quedar una situación de ese estilo.
  • Hacer un testeo de los documentos con un validador HTML (ej: validator.w3.org) ya que el excesivo uso de los tags o incluso un mal uso de los mismos (tags mal cerrados o no cerrados en absoluto) pueden hacer que el boletín sea catalogado como spam y consecuentemente filtrado.

Sobre el uso de imágenes y otros elementos multimedia

En los newsletter en HTML se recomienda:

  • El diseño tiene que estar estructurado de manera que, si las imágenes no se visualizan, el e-mail no pierda significado y no quede trunco su diseño visual sino siga transmitiendo una imagen profesional. Recordemos que la mayoría de los clientes modernos, tanto desktop como web-based bloquean por defecto las imágenes en los emails.
  • Se deben evitar las imágenes para encabezados, links, textos o sentencias, la información catalogada como importante debe mantenerse más allá de una posible falla al mostrar los elementos multimedia. La imágenes suelen ser útiles para acompañar ciertos contenidos, obviamente mostrar los logos y para background y diseño visual en general, pero traten de evitar su uso en información importante. Todas las imágenes deben tener su correspondiente texto alternativo (alt), el cual tiene que estar acorde a la funcionalidad del texto multimedia (Ver art: Texto alternativo: la imagen o la función)
  • Declarar los atributos de ancho y alto en tag IMG que muestra las imágenes, se da esta recomendación porque algunos clientes de mail pueden distorsionar las mismas al mostrarlas si las medidas no están definidas.
  • Incluir un link a la versión en línea del newsletter al principio del mail para que aquellos que no pueden visualizarlo correctamente en el programa de correo puedan hacerlo en el sitio.
  • Acerca de la inclusión del flash en los e-mail, por favor ¡chicos no lo hagan en sus casas! Hablando en serio: los programas de mail no soportan flash, lo que quieran mostrar no se va a ver.

Ejemplo de newsletter compuesto únicamente de ¡una imagen!:

Ejemplo de newsletter incomprensible por ser una imagen que no se puede ver

Basándonos en esto, viene la siguiente recomendación: "realicen pruebas de envíos en múltiples software, plataformas, clientes de mail, proveedores conocidos, etc." Testeen "apagando" las imágenes del newsletter. Si el mail no llega bien, si se rompe o no se entiende, pierde su fuerza, su significado, su propósito.

Accesibilidad

  • Es preferible siempre el uso de texto a imágenes
  • Usar colores que generen buen contraste entre tipografías y fondos.
  • La información importante debe estar arriba y datos del estilo de suscripción / desuscripción, direcciones, copyright, etc, al final del documento.
  • Evitar el uso de largas cadenas de caracteres para separa textos o secciones, como por ejemplo guiones, asteriscos, barras, etc. Ya que los lectores de pantalla tienden a interpretarlos uno a uno.

Hasta acá el resumen. Seguro que hay muchas más para agregar, si se te ocurre alguna bienvenido sea tu comentario.

Hasta la próxima.

Enlaces Recomendados

    1 Comentario

  1. Paola Véliz dice:

    Me encantó el artículo, en estos momentos estoy confeccionando un newsletter para un sitio y al encontrar esta noticia se me solucionaron muchas dudas.
    Saludos.