¿Diseño simple, doble o híbrido? Una guía para las estructuras de correo electrónico
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.
Desde el desarrollo de integraciones hasta el apoyo estratégico, desde la creación de conceptos creativos hasta la optimización de resultados.
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.
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:
- Área óptica primaria
Arriba a la izquierda, donde normalmente comienza la lectura - Zona inculta fuerte
Arriba a la derecha - Zona inculta débil
Abajo a la izquierda - Á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é
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.
Share this article
