Recibe actualizaciones
por Messenger
7 min.

Tres pasos para identificar el diseño composicional correcto para tu campaña, a la vez que atiende los hábitos de los destinatarios y mejora la legibilidad.

Si bien es cierto que el contenido que una marca quiere transmitir es lo que le da principalmente el formato a correo electrónico, también es cierto que definir ciertos parámetros estructurales antes de partir a armar el correo es una buena práctica en Email Marketing.

La composición de un correo electrónico se basa en el balance entre el contenido y el diseño estructurado o composicional. Si bien la libertad creativa es importante, también lo es manejar un método estructurado para evitar dejarse llevar por la improvisación (nunca demasiado rentable en el marketing) y poder contar en una estructura que actúa como columna vertebral de todos nuestros correos electrónicos, desde el más simple y minimalista al correo más complejo.

Hoy nos gustaría explorar este método de composición, observando de cerca los aspectos estructurales de una campaña, desde los elementos más macro hasta los más mínimos detalles. Hay cuatro pasos operacionales, echemos un vistazo a ellos.

1. Adopta una estructura modular

Una estructura modular es el ingrediente fundamental que le da a un correo electrónico la capacidad ser responsivo en un dispositivo móvil. Esta estructura de diseño se considera unánimemente la más correcta y completa, ya que los correo electrónicos son cada día más y más abiertos en teléfonos inteligentes y dispositivos móviles.

El principio del diseño responsivo es bastante simple: el contenido del mensaje se adapta al ancho de la pantalla de acuerdo con reglas dictadas por consultas o media queries CSS Hemos explorado este tema a lo largo y ancho, contrastándolo con correos electrónicos no responsivos y mobile friendly para dispositivos móviles.

Modular, por otro lado, significa construir un correo electrónico de acuerdo con estructuras no fijas, pero a través de bloques de contenido que se reorganizan en función de una cuadrícula diferente que depende de la consulta (Media Query) detectada en un momento específico que dependerá del dispositivo donde ese correo está siendo abierto.

Tomemos nuestro último boletín como ejemplo. En la pantalla de un desktop, después del contenido héroe, los demás elementos se emparejan en dos bloques paralelos.

En la versión móvil, la estructura se reorganiza, colocando los bloques individuales en una forma vertical que, ordenados uno tras otro, tienen elementos claramente legibles (título, descripción y llamada a la acción), incluso en las pantallas más pequeñas:

Pero vayamos al grano, que es quizás lo que más interesa a los lectores aquí. Para dar a los correos electrónicos un diseño repsonsivo, no es necesario que conozcas HTML ni sepas cómo diseñarlo. Todo lo que necesitas es un editor como BEE, que está integrado en MailUp y te permite crear correos electrónicos con un diseño modular que se optimizan automáticamente para móviles con un simple drag and drop es decir arrastrar y soltar objetos en la estructura.

Aprenda todo sobre BEE el editor de Correo Electronico Drag drag & drop

2. Define la orientación del contenido

Ahora sabemos cuán indispensables son el diseño modular y los editores de correo electrónico. El siguiente paso es definir el tipo de orientación que deseas dar al contenido.

La orientación tiene un objetivo claro: reflejar la dinámica de lectura de los destinatarios. Esto puede parecer un tema teórico, pero en realidad tiene profundas implicaciones prácticas en la creación del correo electrónico por parte de la marca y en el uso del mensaje por parte del destinatario.

Suponiendo que los destinatarios son mucho más propensos a ojear rápidamente un correo electrónico que leerlo línea por línea, se han identificado cuatro grupos generales de orientaciones. Vamos a verlos.

La pirámide invertida

 Este es el criterio de distribución más conocido y más frecuente para algunos tipos de correos electrónicos, es decir, aquellos que están limitados a una vista previa: un adelanto o teaser de ofertas, productos y noticias. Aquí hay un ejemplo.

Como pueden ver, la orientación acompaña al lector a lo largo de diferentes niveles de lectura:

  • Título principal, ofrece el primer contexto.
  • Descripción, incluye los puntos principales de la oferta.
  • Call to action o Llamado a la acción, Invita al lector a saber mas sobre la oferta.

El contorno de la pirámide invertida es bastante claro:

Ofrece un modelo de lectura funcional, porque se adhiere al género de lectura ultrarrápida (el ojeado que mencionamos anteriormente) que caracteriza el uso del correo electrónico en la actualidad.

Complejidad modular: ★
Densidad de contenido: ★
Orientación al clic: ★★★★★

Las siguientes técnicas de composición se crearon para el diseño de sitios web y landing pages, pero también las consideramos válidas para el mundo del correo electrónico.

El diagrama de Gutenberg

 Comencemos con el diagrama de Gutenberg, que describe un modelo en el que los ojos del lector se mueven entre el contenido distribuido de manera homogénea y uniforme. Es un modelo de composición particularmente funcional para correos electrónicos con contenido denso que incluye texto e imágenes.

Este modelo se hizo popular por Edmund C. Arnold, que se considera el padre del diseño editorial moderno; él es responsable de más de 250 proyectos de diseño para periódicos y revistas en los Estados Unidos y Nueva Zelanda.

El diagrama de Gutenberg divide el diseño en cuatro secciones:

  1. Área óptica primaria
    Arriba a la izquierda, donde normalmente comienza la lectura
  2. Zona inculta fuerte
    Arriba a la derecha
  3. Zona inculta débil
    Abajo a la izquierda
  4. Área terminal
    Abajo a la derecha, donde el escaneo se detiene

Este modelo asume que el ojo le echa un vistazo a la página con movimientos horizontales llamados ejes de orientación, pero el movimiento general empieza en el área primaria y termina en el área final en diagonal: esta tendencia se llama gravedad de la lectura.

Considerando que las áreas incultas fuertes y débiles caen afuera de la gravedad de lectura, se le recomienda a la marca posicionar los elementos importantes a lo largo del recorrido de la gravedad de lectura. Aquí hay un buen ejemplo, cuyo único error es el llamado a la acción apenas prominente (el área terminal).

Con respecto al diagrama de Gutenberg, cabe destacar que el modelo es válido sólo si no hay distinción jerárquica entre los bloques de contenido. Ni bien se acentúa la preeminencia y posición de un bloque, todo lo dicho hasta ahora ya no tiene valor.

Complejidad modular: ★★★★★
Densidad del contenido: ★★★★
Orientación al clic: ★★

El Patrón Z

Como dice el mismo nombre, este patrón sigue la forma de la letra Z, asumiendo que los lectores empiecen a escanear el contenido desde arriba a la izquierda, sigan horizontalmente hasta arriba a la derecha, luego en diagonal hasta abajo a la izquierda, para terminar el recorrido abajo a la derecha.

La diferencia entre el modelo de Gutenberg y el patrón Z es que este último usa las áreas ciegas del modelo de Gutenberg también. Básicamente no existen zonas fuertes y débiles ni tampoco gravedad de la lectura en diagonal.

Complejidad modular: ★★★
Densidad de contenido: ★★★
Orientación al clic: ★★★

El zig-zag es una extension del patrón Z en el cual la Z se multiplica. Es el método que usamos para leer largos bloques de texto de manera natural. Este modelo se adapta especialmente a páginas llenas de imágenes y contenido que invitan al lector a escanear rápidamente. El zig-zag es una de las mejores orientaciones para sitios de ecommerce porque se adapta perfectamente a los catálogos de productos.

Complejidad modular: ★★★★
Densidad de contenido: ★★★★
Orientación al clic: ★★

El patron Z se puede desarrollar aún más, esta vez sacando una parte: cerrando los primeros tres puntos de la Z obtenemos el llamado Triángulo dorado, es decir el área más vista de los emails. Por lo tanto, en un patrón Z, se recomienda colocar la información más importante en los vértices de este triángulo rectángulo.

Complejidad modular: ★★
Densidad de contenido: ★★★
Orientación al clic: ★★★

El Patrón F

Vamos para atrás en el alfabeto hasta llegar a a letra F. En este caso, los lectores empiezan a escanear desde arriba a la izquierda y siguen horizontalmente hasta la derecha, y luego repiten este patrón perdiendo un poco de su ímpetu en el camino.

Nielsen ha realizado un studio para demostrar esto. En estas mapas de calor, las F se pueden ver muy bien:

3. Define la disposición de los bloques

Ahora nos vamos a enfocar en la disposición real más que en le teórica. Combinando diseño modular con las orientaciones posibles, podemos definir tres patrones estructurales fundamentales para el contenido en los emails:

  • Una sola columna
  • Columnas múltiples
  • Híbrido.

El diseño adecuado direccionará la atención del destinatario al contenido mismo, dejando implícita la estructura que lo sostiene. La sugerencia es crear una estructura invisible cuya función es combinar armonía de la composición y facilidad de lectura. Vamos a ver en detalle estas tres posibilidades.

Una sola columna

El diseño de una sola columna consiste en uno o más módulos que ocupan todo el ancho del email, apilados uno arriba del otro. InVision por ejemplo aprovecha muy bien este diseño.

Ventajas

  • Fácil de leer
    Los emails de una sola columna tienen una jerarquía bien definida: empiezan por el contenido más importante, y siguen en orden por relevancia. Un módulo tras otro, sin complicar la composición.
  • Disposición narrativa
    Una única columna favorece el relato de una historia, acompañando a los lectores a lo largo de los diferentes contenidos del email hasta la llamada a la acción, el verdadero epílogo.

Orientación Pirámide invertida

Columnas múltiples

Un diseño con varias columnas separa el contenido en dos o tres niveles, organizándolo en una estructura cuadriculada, como en este ejemplo:

Ventajas

  • Capacidad y orden del email
    Organizar los productos en un cuadro te permite mostrar muchos de ellos al mismo tiempo.
  • Orientación a la imagen
    Si tu email se basa casi exclusivamente en imágenes que no requieren largos textos descriptivos, esta estructura es la más adecuada para ti.

Orientation Diagrama de Gutenberg, Patrón Z, Patrón Zig-zag

Diseño híbrido

Muchas marcas envían emails con un encabezado principal arriba y contenido secundario más abajo, dividido en columnas. Éste es un diseño híbrido que pasa de una única columna a multiples columnas. He aquí un excelente ejemplo que nos ofrece Moleskine (aquí también marcamos los contornos de los bloques en color rosa):

Ventajas

  • Perfecto para añadir una jerarquía
    Empezando con una columna, el contenido inicial más importante mantiene su relevancia.
  • Perfecto para multiples llamadas a la acción
    Si tienes distintas páginas y lugares a donde invitar a tus destinatarios, o quieres estimularlos a que ejecuten varias acciones, este diseño ofrece el grado más alto de flexibilidad.

Orientation Patrón Z, Patrón F

En resumen

Encontrar el mejor diseño para el contenido de tus emails es uno de los pasos fundamentales para desarrollar tu estrategia de email marketing. Significa conocer qué diseño funciona mejor para una categoría específica de emails de tu marca.

El editor BEE de MailUp ofrece una gran variedad de plantillas (listas para usar y responsivas), así como funcionalidades avanzadas para definir tu galería de diseños: una especie de caja de herramientas a usar según las necesidades. Elige una, inserta tus contenidos y da los toques finales a tu email.

BEE viene integrado en MailUp. Todo lo que tienes que hacer es solicitar una prueba gratuita de la plataforma. La prueba de 30 días te dará la posibilidad de descubrir todos los recursos que la plataforma ofrece para email marketing y diseño de emails.

Prueba MailUp

¿Te gustó este artículo? Tenemos muchos otros para ti.

Te mantendremos actualizado sobre las citas de marketing digital.

Lee también

¿Cómo se crea una mailing list?

Descubramos en 5 pasos cómo crear una lista de contactos y además mejorarla y expandirla gracias a una estrategia de creación de bases de datos.   Al ...

Sigue leyendo

12 cosas que no sabías que puedes hacer

Hemos identificado 12 joyas funcionales ocultas en la plataforma: tan pequeñas como decisivas para llevar tus actividades de Marketing por e-mail a un nivel avanzado. Creación, ...

Sigue leyendo

Cómo aprovechar los emails transaccionales para aumentar las ventas

Tienen tasas muy altas de apertura y captura: ¿por qué no optimizarlas para promocionar, vender y hacer cross-selling? Aquí hay 7 ejemplos prácticos de marketing ...

Sigue leyendo

Las métricas del Email Marketing: medir para mejorar

Ponemos el acento sobre los KPI del canal e-mail: definiciones, fórmulas y acciones para mejorar los resultados y crear estrategias data-driven. El marketing de hoy es ...

Sigue leyendo

Business-to-business Email Marketing: 6 consejos estratégicos

El mercado entre empresas tiene una dinámica, métodos y técnicas de comunicación peculiares. Aquí hay seis sugerencias operativas para el Email Marketing de empresa a ...

Sigue leyendo

5 falsas creencias sobre la Automatización del Marketing

La Automatización del Marketing lleva ya varios años en boca de todos, pero todavía hoy está rodeada de numerosas leyendas que bloquean su uso. Vamos ...

Sigue leyendo