Cómo diseñaría Peggy Olson para Interactive

En la era de Mad Men, los especialistas en marketing sabían exactamente cómo se consumiría su trabajo. El público objetivo vería el anuncio en la televisión, lo escucharía en la radio, lo vería en una revista o en una cartelera, y tal vez llegaría al buzón (del caracol). Si planeó un anuncio impreso o una pieza de correo, sabía el tamaño exacto de los bienes inmuebles para los que estaba diseñando y optimizó su anuncio para que se ajustara a ese espacio. El consumidor vería ese contenido exactamente como lo imaginaste cuando lo diseñaste.

Si Peggy Olson estuviera diseñando un anuncio hoy, tendría que considerar el contexto de cómo se vería ese anuncio y cómo interactuaría con él su público objetivo. No habría ninguna garantía de que su trabajo se vería de la forma en que lo había imaginado, por lo que tendría que optimizar su disposición y diseño para que tuviera impacto sin importar cómo se viera. Tendría que asegurarse de que la llamada a la acción (CTA) fuera clara, concisa y descifrable, incluso en una pantalla de tres pulgadas.

Diseñar páginas web, páginas de destino y correos electrónicos hoy en día es mucho más complicado que en los días de Mad Men. Hoy tienes la dimensión añadida de los elementos interactivos y no saber en qué dispositivo se verá el contenido. Un diseño que se ve perfecto en una pantalla de computadora de tamaño completo podría ser un completo desastre cuando se ve en una tableta o un teléfono inteligente. Una llamada a la acción que no es clara o que se coloca en el lugar equivocado puede acabar con tu tasa de participación.

Tres mejores prácticas clave de diseño interactivo

La mayoría de los consumidores de hoy tienen la capacidad de atención de un mosquito. Tienes alrededor de dos segundos para engancharlos cuando acceden a tu contenido antes de que decidan si hacer clic o no en algo más interesante. Es imperativo que entiendas estos tres conceptos cuando diseñes un email, landing page o página web:

1. Cómo afecta el diseño a la participación: aprenda cómo diseñar elementos en una página para obtener la máxima participación
2. Cómo el contenido afecta el compromiso: sepa qué me obligará a interactuar con su contenido
3. Que importante es el tiempo: Tienes dos segundos para llamar mi atencion

Suena simple, ¿verdad? ¡Si fuera tan simple no estaría escribiendo esto! No puedo decirle cuántos contenidos me encuentro a diario que me frustran hasta el punto de presionar el botón Atrás. Estoy hablando de grandes corporaciones con mucho dinero, pero sin sentido del diseño.

Así que seamos prácticos. Siga leyendo para obtener algunos consejos muy simples que lo ayudarán a optimizar los diseños de su página para la participación en cualquier plataforma.

Cómo escanea el ojo una página

Lo primero que debe comprender es cómo el ojo humano rastrea una pieza de contenido. Cuando estudiaba publicidad en la universidad, nos dijeron que el ojo recorría una página en forma de Z mayúscula, comenzando en la parte superior izquierda. Estoy seguro de que esta teoría fue ideada por un estudio en el que algún sujeto de prueba miraba fragmentos de contenido mientras un tipo con bata blanca intentaba dibujar el patrón de los movimientos de los ojos en una hoja de papel. Esto fue mucho antes de la tecnología de mapa de calor ahora ampliamente disponible que se utiliza para ver cómo las personas rastrean las páginas que ven en línea. Y, tenga en cuenta, las personas escanean la impresión de forma ligeramente diferente al contenido en línea.

El consenso en estos días es que el ojo sigue un patrón de F mayúscula cuando ve un contenido en línea, aún comenzando en la parte superior izquierda. Su ojo normalmente sigue horizontalmente a través de la barra superior de la F primero, luego la segunda barra de la F y finalmente de arriba hacia abajo por el tallo vertical de la F.

Entonces, ¿qué significa esto? Significa que tu CTA debe estar en algún lugar en ese patrón de F mayúscula, o debes ponerle un bigote a un bebé. Tome una decisión de diseño consciente para colocar su CTA principal en un lugar donde llame la atención del espectador en los primeros dos segundos.

Desastres de diseño reales

Así que echemos un vistazo a un verdadero desastre de diseño que uno de mis colegas aquí en Act-On me ayudó a crear. Lamento decir que el siguiente ejemplo se extrajo de contenido real que encontré en línea. He utilizado una empresa ficticia llamada Actomatic para demostrar los errores más comunes que cometen las personas y cómo corregirlos.

Ejemplo 1: No me hagas desplazarme para ver el CTA

La oportunidad perdida más común que veo es una pieza de contenido que no tiene forma de compartir o que tiene botones para compartir que están enterrados en la parte inferior de la página debajo del pliegue. El pliegue es esa línea imaginaria en la parte inferior de la pantalla. (El término proviene de los días en que los periódicos se doblaban por la mitad; "en la parte superior de la página" era una mejor ubicación, con más lectores). En una pantalla de computadora portátil de tamaño promedio, el pliegue puede tener 480 píxeles desde la parte superior de la pantalla, pero en un iPhone puede estar a 100 píxeles de la parte superior. Tenga esto en cuenta cuando diseñe el contenido de su página.

Si estamos hablando de un blog o un artículo de varias páginas, me aventuraría a suponer que la mayoría de las personas están listas para compartir después de leer el título (si es bueno) y las dos primeras oraciones de un contenido, porque quieren ser el primero en salir por la puerta. A la gente le gusta compartir contenido nuevo, no contenido que ya han visto compartido por sus pares cinco veces.

Sugiero tener botones para compartir en la parte superior e inferior del contenido, o botones para compartir que flotan junto al contenido cuando se desplaza.

Trabajé con una empresa muy conocida que descubrió que, cuando añadían botones para compartir en la parte superior y en la parte inferior de un artículo, la tasa de participación aumentaba más del 400 %.

Ejemplo 2: ¡Ay, mis ojos!

¿Alguna vez has llegado a un contenido que estaba tan ocupado que no sabías dónde buscar? Tal vez tenía un video para compartir, un formulario para completar, alguna copia, algunos enlaces aquí y allá. Si aterrizara en la página a continuación, no sabría por dónde empezar, así que probablemente no participaría en absoluto. Este ejemplo no me da ninguna indicación de lo que es más importante en esta página. Tienes dos segundos o menos para llamar mi atención y comprometerme, y simplemente me perdiste.

Si tiene múltiples CTA, deje muy claro cuál es el orden lógico de esos elementos. Explícalo con leyendas numeradas si es necesario. Si llego a esta página estaría haciendo estas preguntas:

El diseño parece no planificado y descuidado con espacios en blanco aleatorios y fuentes extrañas. Los CTA definitivamente están debajo del pliegue.

Si estuviera dando consejos a Actomatic, comenzaría preguntándoles qué esperaban lograr con esta página. ¿Cuál es el objetivo aquí? Supongo que los objetivos principales aquí son lograr que las personas se registren en el blog y vean y compartan un video corto. Si ese es el caso, entonces tenemos que hacer algunos cambios.

1. Asegúrate de que la llamada a la acción principal esté en la mitad superior de la página. Tanto los botones de compartir como el botón Suscribirse están debajo del pliegue.
2. Deje en claro que desea que los visitantes se registren en el blog Y compartan el video
3. Añadir alguna información sobre la empresa.

Bien, echemos un vistazo ahora:

La versión nueva y mejorada tiene un diseño ligeramente diferente, menos fuentes, una breve reseña sobre la empresa y el video, y una barrera más baja para suscribirse al blog. También he agregado enlaces en la parte inferior y un botón de contacto. Observe cómo optimicé el diseño para maximizar la cantidad de información que vería un lector en los primeros dos segundos siguiendo la forma en que el ojo escanea la página de forma natural. La teoría del patrón F dice que este es el orden en el que el espectador captará los elementos de la página:

1. el logotipo de la empresa
2. Los titulares
3. Los botones de compartir y suscribirse
4. La sección Explorar en la parte inferior

Dame una razón para interactuar

Ahora que tiene su diseño ordenado, necesita darme una razón para interactuar con su contenido. Si desea que complete un formulario o comparta su contenido, debe haber una razón convincente para que lo haga. Así que déjame preguntarte, ¿qué hay para mí?

Si no sabe la respuesta a esa pregunta, no ha hecho su tarea.

La razón principal por la que las personas interactúan con el contenido es porque obtienen algún tipo de satisfacción emocional o material. Si su contenido es bueno, lo compartiré porque me hace ver bien informado frente a mis compañeros. Obtengo un impulso de ego si soy el primero en enterarme de un nuevo widget que acabas de lanzar, así que, por supuesto, voy a compartir el hecho de que lo vi primero.

Tal vez sea una organización sin fines de lucro y su contenido sea una historia agradable sobre alguien que hizo algo extraordinario. Compartiré ese contenido porque me hace sentir bien y caritativo. Ofrézcame la oportunidad de ganar un iPad si completo un formulario y será mucho más probable que le dé mi información personal.

El truco es saber qué obliga a tu audiencia a participar. ¿Es una recompensa emocional, una recompensa material o ambas? Ponte en su lugar y crea una estrategia de compromiso dirigida a tu audiencia.

Mantenlo simple

Recientemente hablé en una conferencia en la que presenté un caso de estudio de una exitosa campaña de marketing social. Usé una camiseta con esto impreso en el frente: #KeepItSimple. Trato de practicar lo que predico.

He trabajado con clientes que han creado contenido interactivo extremadamente complicado y otros que lo han mantenido increíblemente simple, y lo simple gana casi siempre. He aquí cómo mantenerlo simple:

• Elija tipos de fuente como Trebuchet que sean fáciles de leer en línea.
• No mezcle demasiados tipos y tamaños de fuente en una página. Un tamaño para encabezados, un tamaño para el cuerpo del texto.
• Mantenlo en un CTA claro si es posible.
• Mantén las cosas importantes arriba del pliegue.
• Haga que la barrera de entrada sea lo más baja posible (no pregunte por el hijo primogénito de alguien si todo lo que realmente necesita es su dirección de correo electrónico)

tu tarea

Espera un minuto, ¡nunca dijiste que habría tarea al final de este artículo! Si te hubiera dicho que habría tarea, ¿habrías leído hasta aquí? UH Huh. Me gustaría que echaras un vistazo a una de tus páginas de destino con ojo crítico y te preguntaras si hay margen de mejora.

• Vea una de sus páginas de destino en una computadora portátil y en un dispositivo móvil. ¿Tienes que desplazarte para llegar a la CTA? ¿Se ve bien en un dispositivo móvil?
• Pídale a un amigo que no sepa nada sobre su empresa que vea una de sus páginas de destino y pídale que le dé comentarios sinceros mientras la está viendo. Pídeles que te digan qué notan primero, qué hace tu empresa y cuál es el CTA principal en la página.
• Vea si todos los elementos importantes están dentro del patrón F.
• Pruebe sus páginas en tantos navegadores posibles en tantas plataformas como sea posible. Safari no representa elementos como Chrome. Firefox no representa elementos como Internet Explorer (IE). Y las diferentes versiones de IE pueden mostrar el contenido de manera completamente diferente.

No es necesario tener un título en maquetación y diseño publicitario para lograrlo. Pero tienes que estar dispuesto a mirar tu contenido actual con ojo crítico.

Vale la pena el esfuerzo.