Usabilidad en el diseño de newletters

imagen

Publicado por Viv Dehaes In Accesibilidad, Interfaces, Usabilidad

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:
utilizar tí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