Línea de asunto: cómo abordar el diseño de correo electrónico

Un porcentaje significativo de consumidores, el 99% , revisa su correo electrónico todos los días. Algunos grupos demográficos, incluidos los millennials, prefieren las comunicaciones por correo electrónico de las empresas a otras formas de comunicación, como llamadas telefónicas o mensajes de texto. Y con más de 5 mil millones de cuentas de correo electrónico activas en todo el mundo, el correo electrónico es una parte esencial de cualquier estrategia de producto digital.

Si bien hay miles de diseños de plantillas de correo electrónico disponibles para los especialistas en marketing, el diseño de correo electrónico es un área importante de especialización para los diseñadores web. Esto es especialmente cierto para aquellos que quieren trabajar con marcas más grandes, empresas creativas y otros que rehúyen las plantillas.

Hay varias cosas que los diseñadores deben tener en cuenta al diseñar correos electrónicos, desde las limitaciones de la mayoría de las plataformas de correo electrónico (con soporte limitado para cosas como fuentes web de una de las más grandes, Gmail), hasta lo que los consumidores esperan al abrir un correo electrónico desde un compañía con la que ya podrían hacer negocios.

La importancia del diseño de correo electrónico móvil

Dado que al menos la mitad de todos los correos electrónicos ahora se abren y leen en dispositivos móviles, es irresponsable que los diseñadores ignoren los diseños de correo electrónico optimizados para dispositivos móviles. Especialmente teniendo en cuenta que las tasas de conversión de correo electrónico móvil tienden a ser significativamente más altas que las tasas de escritorio.

Este diseño de correo electrónico móvil de PiperJaffray mantiene las cosas simples y elegantes. Es fácil de leer en un dispositivo móvil, con enlaces limpios y una marca sutil. Pone las necesidades del usuario en primer lugar, mejorando la experiencia general del usuario y la percepción de la empresa.

Dribbble mantiene su correo electrónico de "Tomas populares" al punto, centrándose completamente en el contenido. Este enfoque hace que el correo electrónico sea fácil de navegar en dispositivos móviles. Si bien un diseño simple que se centre en el contenido es una buena idea para muchos tipos de correos electrónicos, es especialmente adecuado para los correos electrónicos móviles, donde facilita tanto consumir el contenido como interactuar con él.

Centrándose en el contenido

Como práctica recomendada, ya sea que diseñen correos electrónicos u otros productos digitales, los diseñadores siempre deben centrarse en el contenido. Algunos diseños de correo electrónico llevan esta mejor práctica al extremo con un diseño minimalista donde el contenido es el diseño.

Cuando trabajan en la mayoría de los diseños de correo electrónico, los diseñadores se benefician de tener el contenido creado primero antes de sumergirse en el diseño. Sin embargo, particularmente en los diseños minimalistas, es aún más importante saber cuál será el contenido por adelantado.

Marvel se enfoca directamente en su contenido con un diseño minimalista. El fondo blanco y las imágenes que solo apoyan el texto de la página hacen que el contenido destaque.

Todos los correos electrónicos de Unsplash se centran directamente en las imágenes que promocionan. El botón "Ver colección" y el desvanecimiento en la parte inferior de las imágenes pueden aumentar los clics en el sitio, ya que deja a las personas con ganas de ver más.

Refuerzo de la marca

Cuando un visitante llega a un sitio web, es (idealmente) una experiencia de marca inmersiva. Todo está bajo el control del diseñador del sitio web. Pero el diseño del correo electrónico es diferente. El usuario está viendo los correos electrónicos dentro de otra aplicación y no todas las aplicaciones de correo electrónico procesan todos los correos electrónicos de la misma manera.

Debido a esto, la marca en los diseños de correo electrónico es vital para crear la experiencia adecuada para el usuario que lee el correo electrónico. Sin embargo, la marca a menudo debe mantenerse simple para que se represente de manera efectiva en varios dispositivos y clientes de correo electrónico para el porcentaje más alto de usuarios.

Un logotipo simple en la parte superior del correo electrónico, que usa las mismas imágenes de encabezado en varias imágenes y mantiene la mayor cantidad de elementos consistentes con los otros productos digitales de la marca contribuye en gran medida a respaldar y reforzar la percepción de la marca entre los consumidores.

La marca de Everlane es intrínsecamente simple en sus correos electrónicos y sitio web. Su logotipo, que se muestra de manera destacada en la parte superior de este correo electrónico, refuerza esa marca.

The Middle Finger Project usa una imagen de encabezado consistente en todos sus correos electrónicos, junto con el color de acento púrpura brillante. Esto hace que sus correos electrónicos sean inmediatamente reconocibles para cualquiera que se suscriba, y la marca continúa en el sitio web.

Llamar la atención con el color

El color tiene un fuerte impacto en la mente humana, con la capacidad de influir en las emociones, las percepciones e incluso el comportamiento. El uso efectivo del color en los correos electrónicos puede aumentar las tasas de conversión y de clics. En algunas pruebas, la diferencia en el color de los botones puede representar una diferencia de más del 20 % en las tasas de conversión.

Pero no son solo las llamadas a la acción las que se benefician del uso del color. Crear un correo electrónico colorido puede ser una desviación de lo que se espera y crear una apariencia completamente diferente a la de otros correos electrónicos en la bandeja de entrada de una persona.

Llamar la atención sobre un cartel de ofertas con un color rojo brillante recuerda a los carteles de ofertas de la vida real, que a menudo también se hacen en el mismo color. El ojo del lector se ve inmediatamente atraído por el rojo.

Article, un sitio de comercio electrónico de muebles escandinavos, emplea un esquema de color rojo y verde apagado, con el rojo llamando la atención sobre la parte más importante: el botón de llamada a la acción de venta.

Mientras que algunos diseños de correo electrónico usan el color como una forma de llamar la atención sobre una parte particular del contenido, este correo electrónico del Zoológico de Houston usa colores brillantes para crear un diseño divertido y lleno de energía. El esquema de color naranja brillante y rosa fuerte llama la atención de inmediato y atrae al lector.

Uso de imágenes impresionantes

Los seres humanos son criaturas visuales y las imágenes impresionantes pueden elevar un correo electrónico y captar la atención del lector. Las imágenes también pueden reforzar el mensaje del correo electrónico y la marca de la empresa.

Los programas de televisión parecen tener una ventaja en la categoría de "imágenes deslumbrantes", con este correo electrónico de Netflix que usa una imagen vibrante pero misteriosa de Stranger Things . Combinar la imagen llamativa con la llamada a la acción "Reproducir" inmediatamente debajo tiene sentido desde una perspectiva de UX, ya que hace que sea sencillo para los lectores ver inmediatamente el programa promocionado.

Las imágenes asombrosas no se limitan solo a las fotos. Una caricatura o ilustración como las que usa WePresent en sus correos electrónicos es tan llamativa como una foto y puede ayudar a atraer a los lectores al contenido.

Este correo electrónico de Deadliest Catch , que promociona la serie documental de Discovery Channel, muestra una impresionante imagen de encabezado que se funde con el contenido que se encuentra debajo. Esta es una técnica útil que anima al espectador a seguir leyendo.

Experimentando con diseños no convencionales

Muchos diseños de correo electrónico tienen un formato bastante estándar: encabezado en la parte superior, contenido de una sola columna, con llamadas a la acción cerca de la parte superior e inferior. Pero no existe una regla que diga que los diseñadores deben seguir ese patrón en particular.

Los diseños no convencionales son una excelente manera de captar la atención del lector y hacer que quiera leer el contenido. Hay una variedad de formas de crear diseños inusuales. Un método popular es usar imágenes para crear diseños de correo electrónico que no necesariamente serían compatibles con muchas plataformas de correo electrónico.

Los diseños no convencionales no necesariamente tienen que estar fuera de la pared. Este, de Mailchimp, utiliza un diseño de dos columnas con una columna ocupada por bloques de color. Lo que lo hace memorable es que es visualmente atractivo e inesperado.

El uso de imágenes permite diseños de correo electrónico más inesperados como este para KLM. Los diseñadores solo deben tener en cuenta que algunos clientes de correo electrónico seguirán bloqueando las imágenes para que no se carguen automáticamente, por lo que es necesario tener un texto alternativo que aún transmita la esencia del mensaje.

Trabajar con fuentes

Los clientes de correo electrónico más populares admiten fuentes web, pero desafortunadamente, no todos lo hacen; Gmail es la excepción más notable (aunque Gmail admite Roboto y Google Sans como parte de la interfaz de Gmail). Sin embargo, los diseñadores aún pueden usar fuentes web siempre que tengan en cuenta que una gran cantidad de clientes de correo electrónico usarán fuentes alternativas.

La alternativa al uso de fuentes web, por supuesto, es usar imágenes que incluyan las fuentes. Eso es lo que muchos diseñadores de correo electrónico optan por hacer, especialmente en los encabezados donde las fuentes alternativas probablemente se verían fuera de lugar.

Este boletín FabFitFun utiliza una fuente de escritura divertida para llamar la atención sobre el contenido, mientras lo combina con un tipo de letra sans serif altamente legible. Experimentar con combinaciones de fuentes en diseños de correo electrónico es una gran idea, e incluso se puede usar como prueba antes de cambiar los tipos de letra en un sitio web o usarlos en otros materiales de marca.

Sickbubble usa una variedad de fuentes en el diseño de su correo electrónico, lo que puede ser complicado. Pero en este caso, porque separan cada sección, funciona. La fuente de visualización en el encabezado tiene una sensación muy vanguardista, mientras que el texto del cuerpo principal es un sans serif fácil de leer. Las fuentes escritas a mano en la sección de promoción del producto funcionan ya que están desplazadas del cuerpo del correo electrónico.

Divertirse con animaciones

Las animaciones agregan un interés visual adicional a los correos electrónicos y atraen inmediatamente la atención del lector. Los GIF animados son una opción popular para agregar movimiento a los correos electrónicos y son compatibles con la mayoría de los clientes de correo electrónico.

Los diseñadores deben asegurarse de tener en cuenta los tamaños de los archivos al incorporar animaciones, ya que muchas personas leen correos electrónicos en dispositivos móviles. También deben asegurarse de que las animaciones respalden el contenido y no sean solo un relleno.

El uso de GIF animados para resaltar un punto o ilustrar mejor el contenido presentado de una manera divertida es una adición fantástica al diseño de un correo electrónico, como en este ejemplo de correo electrónico de Product Hunt.

The Hustle usa un GIF animado en sus correos electrónicos para ilustrar el punto del mensaje y agregar interés visual a un diseño de correo electrónico minimalista.

Llamadas a la acción

Podría decirse que la llamada a la acción es la parte más importante de casi cualquier correo electrónico que envíe una empresa. La mayoría de los correos electrónicos se envían para solicitar una acción, ya sea leer un artículo, comprar un producto o realizar algún otro comportamiento.

Los diseñadores están bien servidos para prestar mucha atención al diseño de sus llamadas a la acción, así como para realizar pruebas A/B en ellas para asegurarse de que estén optimizadas para el rendimiento.

Usar un color brillante para la llamada a la acción, como lo ha hecho Litmus aquí, hace que se destaque del resto del contenido. Los diseñadores deben considerar experimentar con diferentes colores para ver cuáles funcionan mejor para su audiencia empleando pruebas A/B al enviar campañas por correo electrónico.

El uso de un color que es completamente diferente del resto del contenido de un correo electrónico para la llamada a la acción hace que se destaque. Debido a que el verde lima en el correo electrónico de Campaign Monitor es un color complementario dividido del púrpura que forma el fondo, se destaca sin desentonar.

Preste atención a las mejores prácticas de diseño de correo electrónico

Si bien hay mucho espacio para la creatividad y la experimentación en el diseño de correo electrónico, los diseñadores también deben tener en cuenta las mejores prácticas y las limitaciones del medio.

Uno de los pasos más importantes en el diseño de correo electrónico es probar los correos electrónicos en una variedad de plataformas de correo electrónico antes de enviarlos. Si bien es probable que haya pequeñas variaciones entre ellos, y siempre hay personas que usarán plataformas menos comunes que representan diseños de manera diferente, es inteligente asegurarse de que los correos electrónicos se muestren de manera aceptable para la mayoría de los usuarios.

Hay varios servicios de prueba de correo electrónico que los diseñadores pueden usar para ver cómo se verán sus correos electrónicos en una variedad de plataformas de correo electrónico. Litmus es una de las más populares, pero también vale la pena revisar otras opciones como Mailgun, Email on Acid, Mailtrap y Preview My Email para ver cuál se adapta mejor a las necesidades de cada proyecto.

Más allá de eso, es esencial tener en cuenta el tamaño de las imágenes y el uso del ancho de banda debido a la cantidad de correos electrónicos abiertos en los dispositivos móviles. Los diseños receptivos son prácticamente una necesidad por la misma razón.

Los mejores diseños de correo electrónico serán fáciles de leer para las personas en cualquier dispositivo y, lo que es más importante, les pedirá que hagan clic en la llamada a la acción en el correo electrónico (o que realicen cualquier acción que se solicite). Seguir estas mejores prácticas de diseño de correo electrónico brinda a los diseñadores web una ventaja en la creación de correos electrónicos que hacen esto de manera efectiva.

• • •

Lectura adicional en el blog de diseño de Toptal:

• La experiencia lo es todo: la guía definitiva de UX
• ¿Valen la pena todas las tendencias? Los 5 errores de UX más comunes que cometen los diseñadores
• UI vs. UX: explore las diferencias principales [infografía]
• Principios y mejores prácticas de diseño de UX móvil
• La guía fundamental para la usabilidad móvil