Diseñe una mejor página de inicio con StoryBrand Framework

Las páginas de inicio son como escaparates. Deben darle al consumidor una idea de lo que hace el negocio, quién lo dirige y al menos una pista de los productos y servicios que ofrece, ya sean artículos reales para la venta, información o entretenimiento.

Al igual que un escaparate, los diseños de la página de inicio pueden atraer a las personas a mirar más a fondo o pueden no captar la atención de un visitante (o peor aún, alejarlo activamente). Claramente, transmitir una historia de marca es un método que los diseñadores de UX pueden usar para mantener a las personas en el sitio y lo suficientemente comprometidas para explorar más allá de la página de inicio (el marco StoryBrand proporciona una buena hoja de ruta para esto).

¿Cuál es el objetivo de una página de inicio?

El objetivo de una página de destino es convertir a los visitantes, mientras que el objetivo de una página de inicio es involucrar a los visitantes con la marca y ofrecer soluciones a sus problemas. Si se hace de manera efectiva, un visitante de la página de inicio puede convertirse en un cliente, potencialmente un cliente habitual.

Las páginas de inicio han mejorado rápidamente en las últimas décadas gracias a los análisis y los equipos de marketing y diseño que han realizado mejoras de rendimiento basadas en esos datos.

En 1993, cuando solo existían 600 sitios web, el único método para medir el tráfico de un sitio web era un registro del servidor que contaba la cantidad de visitantes. Luego vinieron los contadores de visitas y luego, eventualmente, conjuntos de análisis más completos que brindaron información sobre cosas como visitantes únicos, vistas de página y tasas de rebote.

Usando esos datos analíticos, los diseñadores de UX pueden optimizar la ubicación de la llamada a la acción, mejorar la velocidad del sitio, la prueba A/B, usar videos para atraer a los visitantes, usar imágenes de alta calidad para captar la atención de las personas e incluir herramientas de mensajería para mejorar el rendimiento de una página de inicio Sin embargo, ¿garantizará esto la lealtad y la confianza de los consumidores?

Tres errores comunes al diseñar páginas de inicio

Las empresas, y los diseñadores de extensiones, se encuentran con tres obstáculos principales al crear una página de inicio:

1. No se centran en las cosas importantes. Le cuentan a la gente todo sobre las características de su servicio o producto. A la gente no le importa esto. Quieren saber que el negocio resolverá su problema y mejorará su vida.
2. Las empresas no comunican su mensaje con claridad. Como dice Tony Haile de Chartbeat, un sitio web tiene menos de 15 segundos para captar la atención de un visitante.
3. Tienen un mal producto que no soluciona el problema de nadie. No hay mucho que un diseñador pueda hacer por un negocio si este es el caso.

¿Qué es el Marco StoryBrand?

A pesar de lo que algunas empresas parecen creer, un logotipo no es igual a una marca. Lejos de ahi; una marca es una promesa detrás de la cual se encuentra la razón de su existencia.

Las personas eligen una marca sobre otra por razones tanto racionales como emocionales. Los mensajes de marca poderosos pueden producir lealtad a la marca en sí misma en lugar de solo a los productos individuales que crea. Un mensaje claro y consistente es vital para lograr ese fin. Lo que distingue a una marca de su competencia es la historia de la marca.

Los empresarios utilizan mucho la narración de historias para seducir a los inversores en presentaciones y redes sociales. Empresas como Apple entienden e integran el poder de una narración clara y sencilla en todo lo que hacen. Saben que no se trata de ellos; se trata de sus clientes.

El marco StoryBrand es una fórmula de narración creada por Donald Miller para ayudar a las empresas a comunicar sus mensajes más poderosos de manera simple y clara. En su libro Building a Story Brand , Miller afirma que “su cliente debe ser el héroe de la historia, no su marca. Este es el secreto que todo negocio fenomenalmente exitoso entiende”.

Cómo usar StoryBrand con un cliente

Ya sea una pequeña empresa o una marca multimillonaria, el cliente debe comprender que confundir a sus clientes le costará dinero. Aclarar su mensaje a través de la fórmula StoryBrand, como dice Miller, “organizará su forma de pensar, reducirá su esfuerzo de marketing, eliminará la confusión, aterrorizará a la competencia y, finalmente, logrará que su negocio vuelva a crecer”.

Miller compara la creación de una StoryBrand con la escritura de una historia para un guión. Lo divide en siete puntos de la trama.

Un personaje que quiere algo (la persona que usa el sitio web) se encuentra con un problema (su necesidad), luego se encuentra con una guía (el negocio) que le da un plan (indica los próximos pasos) y los llama a la acción (botón de llamada a la acción), lo que resulta en una historia de éxito (compran el producto) y les ayuda a evitar el fracaso (recordatorio de lo que sucedería si no compran).

Esta estructura se puede reconocer en casi todas las películas exitosas. También se puede aplicar a una empresa y sus clientes. El siguiente paso es que el cliente escriba su historia de marca siguiendo esta estructura:

1. Un personaje : El cliente es siempre el héroe de la historia, no la marca. Depende de los diseñadores de UX descubrir qué quieren los clientes de la marca, generalmente a través de la investigación de UX y las pruebas de usuario. Necesitan enfocarse en los deseos que impulsan a las personas, cosas como conservar recursos financieros, ahorrar tiempo, construir redes sociales o ganar estatus.
2. Tiene un problema : el villano en el arco de StoryBrand es el problema del personaje. Es útil personificar ese problema y comprender que los productos de la empresa son como armas que el cliente puede usar para vencerlo. Las empresas tienden a enfocarse en resolver problemas externos, pero los clientes compran soluciones a problemas internos . Las personas tienen tres niveles de conflicto:
   - Externa (la mayoría de las empresas tratan de resolver problemas externos)
   - Interna (como frustración, intimidación, inseguridad)
   - Filosófico (¿por qué importa esta historia?)
3. Y se encuentra con un guía : El guía es el negocio o la marca. Los clientes necesitan a alguien que se ocupe del problema. Su percepción de la marca será crucial para su confianza. Hay que comunicar dos cosas:
   - Empatía (mostrar comprensión del dolor que el cliente puede sentir)
   - Autoridad (le dará al cliente la confianza de que la marca puede ayudarlo)
4. Quién les da un plan : la empresa le muestra al cliente lo que debe hacer a continuación. Los clientes todavía no están seguros de comprar hasta que se les muestre un plan de acción simple. Los diseñadores de UX pueden explicar los próximos pasos exactos para los clientes. También pueden aliviar cualquier ansiedad que pueda tener el cliente al abordar inquietudes relacionadas con el producto o servicio.
5. Y los llama a la acción : los llamados a la acción efectivos facilitan las compras o las suscripciones.
6. Eso les ayuda a evitar el fracaso : ¿Qué está en juego para el cliente? ¿Qué perderán si no compran de esta marca?
7. Y termina en un éxito : Dile a los clientes cómo esta acción específica puede cambiar su vida. Muéstreles cómo serán sus vidas después de comprar el producto y cómo los hará sentir esa resolución. Tres formas sólidas en que los narradores terminan una historia son permitiendo que el personaje:
   - Ganar poder o posición
   - Encontrar a alguien o algo que los haga completos
   - Experimentar alguna forma de autorrealización que también los hace completos.

Cómo usar el marco StoryBrand en una página de inicio

Una página de inicio nunca debe ser sobre el negocio. Debe ser sobre su cliente potencial.

Como en una primera cita, las impresiones son importantes y el objetivo es generar interés. Los diseñadores de UX deben ser estratégicos en cuanto a qué contenido se incluye y cómo se organiza. Seguir el marco explicado en la sección anterior ayudará a los diseñadores a garantizar que los mensajes correctos se coloquen en los lugares correctos.

Aunque suene simplista, solo hay cinco elementos importantes a tener en cuenta al diseñar una página de inicio.

El encabezado

Los titulares, que a veces se usan en combinación con una imagen atractiva, se colocan en la parte superior de una página de inicio. En casi todos los casos, los titulares deben estar centrados en el cliente y mostrarle al visitante que la marca tiene algo que lo beneficia. Los titulares deben:

• Comunicar los beneficios al cliente.
• Identifique un problema que tenga el visitante y asegúrele que la marca puede resolverlo por él
• Describir lo que hace el negocio de una manera clara y concisa

Crear confianza mostrando autoridad

Es imperativo posicionar el negocio como guía y solución al problema del cliente. A los diseñadores de UX que dominen el arte de crear confianza les resultará más fácil convencer a las personas de que esta marca en particular es la solución adecuada para sus problemas. Pueden hacer esto por:

• Incluyendo testimonios de clientes importantes que recomiendan la marca
• Visualización de los logotipos de las empresas con las que ha trabajado la marca
• Mostrar datos específicos sobre el número de usuarios, transacciones, etc.
• Con premios y reconocimientos, trabajos publicados, apariciones en los medios y logros similares
• Mostrando imágenes del equipo o de la sede de la empresa

Llamada a la acción

Crear una conexión emocional con los visitantes de la página de inicio es el primer paso para convertirlos en clientes. Una vez que se establece esa conexión emocional, depende de la llamada a la acción para sellar el trato.

Hay dos tipos de llamadas a la acción:

1. Las llamadas directas a la acción son para personas que saben que están listas para comprar o registrarse, e incluyen lenguaje como "Comprar", "Registrarse" o "Comenzar". Al hacer clic en estos CTA, el comprador se dirigirá directamente a un formulario para completar su transacción.
2. Las llamadas a la acción de transición son para los visitantes que aún no están listos para comprar. Es posible que necesiten más tiempo e información antes de comprometerse. Estos vienen en forma de botones de tipo "Más información", "Prueba gratis" o "Ponte en contacto".

Algunos llamados a la acción pueden combinar los dos o ponerlos uno al lado del otro (a menudo vistos como un par de botones "Comprar ahora" y "Más información").

Imágenes atractivas

Independientemente de la seriedad del contenido de una página de inicio, el marco de StoryBrand exige un final feliz. Al seleccionar imágenes, tenga en cuenta que algunas de ellas deben dar esa sensación de "felices para siempre".

Las imágenes apelan a las emociones de los visitantes, en particular las imágenes de personas felices. Mostrar fotos de personas felices ayuda a las personas a imaginar cómo sería su propio final feliz si hicieran la compra.

Texto corto

Cuanto menos texto, mejor. Muchos consumidores no leerán largos bloques de texto, por lo que es mejor transmitir el mensaje de la marca en la menor cantidad de palabras posible.

Los diseñadores de UX deben ayudar a los clientes a compartir su historia de la manera más sencilla.

Las páginas de inicio exitosas responden preguntas clave

Una página de inicio exitosa podrá captar el interés de los visitantes en menos de cinco segundos. A partir de ahí, tendrá alrededor de 15 segundos para responder las tres preguntas que la gente se hace (a menudo inconscientemente) cuando visita una página de inicio:

• ¿Qué hacen?
• ¿Cómo pueden ayudarme?
• ¿Qué tengo que hacer para comprar o participar?

Los diseñadores de UX pueden usar el marco StoryBrand para crear una página de inicio que capte el interés de inmediato y responda esas preguntas de manera efectiva. Ofrece un camino claro hacia el éxito tanto para el diseñador como para la marca.

¡Háganos saber lo que piensas! Por favor, deje sus pensamientos, comentarios y comentarios a continuación.

• • •

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

• ¿Valen la pena todas las tendencias? Los 5 errores de UX más comunes que cometen los diseñadores web
• Cómo diseñar una página de aterrizaje efectiva
• Construido para convertir: mejores prácticas de diseño de página de destino
• La guía definitiva para el diseño de sitios web de comercio electrónico
• La guía completa de arquitectura de la información