Cómo diseñar un sitio web que convierta
De nada sirve que tengas una web muy bonita o con mucho tráfico si no eres capaz de mantener a los visitantes navegando dentro de tu sitio. Si todas tus visitas se van nada más llegar, pues es casi como si no tuvieras ninguna.
Cuando alguien llega a nuestra web, a través de un post compartido en redes sociales o de una búsqueda en Google, lo que queremos es que esa persona siga interactuando con el contenido de nuestra web y nos siga conociendo. Incluso, si vamos un poco más allá, lo ideal es que después de conocernos un poco quiera suscribirse a nuestra lista de correo, nos envíe un formulario de contacto, o compre algún producto en nuestra tienda online (si es que tenemos).
Como este es un tema tan importante, aquí te explico qué debes tener en cuenta a la hora de diseñar tu sitio para que esto suceda (con un par de ejemplos concretos de cómo implementarlas), y que tu web realmente cumpla su objetivo: conectar con tu audiencia desde la primera visita, y hacerte ganar lectores y posibles clientes.
Tabla de contenidos
¿Por qué necesitamos mantener a los usuarios en nuestra web?
Bueno, como acabo de decir, lo primero es que queremos que los no visitantes de nuestra web nos sigan conociendo y sigan estableciendo una relación con nosotros y con nuestra marca. Pero hay otras razones que van más allá, y es que es bueno para el SEO de tu sitio.
Mientras más tiempo alguien navegue por tu página, mejor, porque Google interpreta esto como que tu sitio tiene información de valor para los usuarios. Esto, junto con otras cosas que puedes hacer para mejorar el SEO de tu sitio, se revierte en un mejor posicionamiento con Google y, por tanto, en una mayor visibilidad de tu sitio web y de tu contenido.
En términos de SEO, la rapidez con la que un usuario sale de tu web se mide con un parámetro que se llama “porcentaje de rebote”, que refleja cuánto “rebota la gente” cuando llega a tu sitio web. Es decir, si tu porcentaje de rebote es muy alto, esto quiere decir que la mayoría de las personas, nada más llegar a tu web, se van. Aquí te dejo un enlace a Google en el que explican qué es, y a este post en dónde ya lo analizan con más detalle por si te interesa.
En cualquier caso, lo que queremos, por lo general, es que nuestro porcentaje de rebote no sea demasiado alto, porque eso quiere decir que tenemos buen “engagement” en nuestro sitio web, y que los visitantes se quedan un tiempo.
Cómo lograr que tus visitantes se queden
Entonces ya sabes que es importante que tus visitantes se mantengan navegando por tu sitio web… ¿Pero cómo logramos que se queden por más tiempo? La respuesta corta es con buen contenido y con un diseño web estratégico:
Si tu contenido no le aporta nada a tu audiencia, no importa cuán estratégico sea tu diseño web… no se van a quedar. Y lo que es peor, no van a regresar. Así que trabaja en primer lugar en generar contenido realmente útil para tu público.
Por otro lado, si tienes un contenido excelente pero tu web está mal diseñada, tus visitas también van a sufrir, porque le vas a hacer difícil a tus visitantes poder interactuar con tu web, y realizar las acciones que necesitas que completen cuando te visitan.
Como te dije, en este post me voy a enfocar en la parte del diseño web, y ahora te voy a explicar los principales puntos que debes considerar cuando diseñes una web estratégica.
¿Qué tener en cuenta para diseñar una web que convierta?
Un diseño web estratégico debe cumplir con dos cosas: por una parte, debe hacer a tu web un lugar atractivo para tu cliente o audiencia ideal, para que de un vistazo sienta que está en el lugar correcto. Por otra, debe tener un objetivo, para garantizar que todos los visitantes de la web realicen un cierto recorrido por nuestras páginas.
Que tu web comunique tu branding
La parte de hacer atractiva tu web está muy estrechamente relacionada con el branding. Solo con un branding bien definido y creado para atraer a tu cliente ideal vas a poder conectar bien con tu audiencia, y un buen branding es el punto de partida para definir el estilo visual de un sitio web. Aquí debes tener en cuenta colores y tipografías definidas en tu branding, pero también el uso de los espacios, los estilos de las imágenes (ilustraciones y/o fotografías), y hasta el estilo de redacción de los textos porque ellos son parte del branding verbal de tu marca.
Sobre la parte visual, hace un tiempo escribí un post sobre cómo aplicar tu branding a una web (específicamente en Squarespce, pero igual puedes extrapolar esos consejos a otra plataforma), y sobre branding puedes encontrar varios posts en el blog… aunque si ni siquiera tienes claro de qué hablo, puedes empezar por este post en el que explico qué es el branding.
De manera general, para que tu branding esté bien reflejado en tu web te recomiendo:
En primer lugar, que mantengas coherencia entre el cliente ideal que has definido en tu estrategia de marca, y la audiencia a la que te quieres dirigir con tu web: ambos, deberían ser los mismos. Aunque haya ciertos segmentos de tu audiencia que te interese trabajar más con tu web, no debe haber una desconexión entre el público de tu marca y el público de tu web.
Respetar en el diseño web las pautas del branding que ya tienes definidas para tu marca, pues tu web debe ser un canal muy importante para comunicar tus valores y mensaje.
Define objetivos estratégicos para tu sitio
Uno de los primeros errores cuando se diseñan páginas web sin mucha experiencia, es que no se definen objetivos concretos para el sitio. Una página web no debe existir porque es bonita, o porque se supone que la debes tener…. no. Una página web debe existir para cumplir un objetivo concreto, debe tener una razón de ser. Puede ser brindar información sobre tus servicios y conseguir que clientes potenciales te contacten, promocionar un podcast, ganar suscriptores a tu lista de correo, o vender un curso.
Cuando nos saltamos este primer paso, nos quedamos sin un punto de partida claro de qué queremos lograr con nuestra web. Piensa siempre que tu sitio web es una herramienta de trabajo, y debe ayudarte a conseguir cosas muy concretas en tu negocio. Esta es una de las razones por las que no hay una fórmula única para diseñar sitios web, ya que cada web será creada en función del negocio y de lo que se quiera priorizar dentro del negocio. Así que cuando estés diseñando tu web, define en primer lugar qué quieres que te ayude a conseguir, cuál es su objetivo fundamental.
Por ejemplo, quizás si te digo que no es lo mismo una web de una tienda online que la web de una fotógrafa, te quede muy claro: una vende productos, la otra vende servicios. Pero si te digo que no es lo mismo la web de una tienda online que vende productos con un precio premium (digamos que una joyería), que la web de una tienda online que vende productos a un precio menor (una tiendita de papelería chula), te puedes dar cuenta que, aunque las dos son webs de tiendas, no van a ser lo mismo: la estrategia de venta de cada una, la forma de captar clientes, y las motivaciones de esos clientes para la compra serán diferentes en cada caso.
Por tanto, el diseño de estas dos tiendas online va a ser distinto, en dependencia de la estrategia que cada una tenga con su negocio y con su web. Quizás en la web de la joyería el objetivo fundamental no es la compra, sino lograr suscriptores para cerrar las ventas por email marketing, o brindar mucha información sobre el proceso de creación del producto y las personas detrás de su fabricación, porque son piezas personalizadas con las que hay que explicar muy bien su valor. Por otro lado, la tienda de papelería bonita ( con un proceso de producción de sus productos industrial y unos precios más asequibles) puede tener una estrategia de venta online más directa, porque la inversión del cliente no es tan grande, y el objetivo está más orientado a una compra con énfasis en rebajas y descuentos.
Lo mismo sucede con una web para servicios… no es lo mismo una ilustradora profesional que realiza comisiones pero que además vende cursos o impresiones, que una fotógrafa que le interesa potenciar el crecimiento de su cuenta de Instagram.
Entonces, lo quiero que te quede muy claro de todo esto es que el diseño de tu web va a depender de qué necesites que ella, como herramienta de trabajo, haga por ti y tu negocio.
Para garantizar un buen punto de partida con el diseño de tu sitio web te recomiendo:
Empezar por definir, como máximo, tres objetivos estratégicos para tu sitio. Intenta no tener más de tres, para que puedas mantener bien enfocado lo que quieres conseguir con tu web.
Cuando los tengas definidos, organízalos de manera jerárquica, asignándole prioridades a cada uno.
Incluye llamadas a la acción relacionadas a objetivos
Además de tener objetivos generales para tu sitio web, es muy importante definir objetivos concretos para cada página. Y por supuesto, el objetivo de cada página debe contribuir de alguna manera a los objetivos generales de tu sitio… si no, lo que hace es meter ruido.
Asociada a cada objetivo particular debe haber una acción: es decir, algo en particular que tú quieres que los visitantes hagan en esa página, y debes ponérsela fácil para que lo hagan. Si tú misma no sabes qué quieres que hagan las personas cuando naveguen por tu sitio... ¿cómo lo van a adivinar?
Por ejemplo, el objetivo obvio de tu página de contacto es que se pongan en contacto contigo de alguna forma. Por tanto, debes ponérselo fácil al usuario para que cuando llegue a esa página encuentre diferentes formas de contactarte: que te envíen un formulario, un correo o que te llamen por teléfono. Porque no a todo el mundo le gusta enviar formularios, y habrá quien prefiera escribirte un correo directamente, o llamarte por teléfono si eres un negocio local… o incluso ver tu dirección para ir a tu establecimiento, en caso de que tengas una sede física.
Entonces, cuando hayas definido los objetivos por página, incluye llamadas a la acción en cada una. La llamada a la acción (CTA por sus siglas en inglés) son mensajes claros que le das al usuario para que realice una acción determinada. Esto puede ser que visiten el blog, que reserven una llamada de diagnóstico, o que se suscriban a tu Newsletter, y deben tener un diseño llamativo.
Cada página debe tener como mínimo una CTA, aunque yo te recomiendo que incluyas una CTA primaria y una secundaria. Por ejemplo, retomando el caso de la página de contacto: quizás alguien visita tu página de contacto, pero decide que no es el momento todavía de escribirte ni de contactarte directamente, así que la llamada a la acción primaria de esa página, no se completa. En este caso el usuario tiene dos opciones:
No ve nada más que hacer en esta página y cierra la pestaña y se va.
Le das la opción de seguirte en redes sociales (que es una forma más indirecta de estar en contacto contigo), o de seguirte conociendo y explorando tus contenidos en tu blog.
Con la segunda opción, al menos ofreces la alternativa de seguir interactuando contigo, en vez de dejar al usuario ahí colgado en una página medio desierta con un formulario y poco más.
Define el recorrido de tu visitante
Otra de las cosas que debes hacer es diseñar el recorrido ideal de un visitante en tu sitio web. Cuando alguien llega a tu sitio, puede venir por diferentes vías:
Puede llegar directamente a la página de inicio, y a partir de ahí realizará un recorrido A.
Puede llegar a través de un post compartido alguna red social, y en ese caso realizará un recorrido B.
Puede llegar por ejemplo a una página de aterrizaje (o Landing Page) en la que tengas con un opt-in que estés promocionando, y en ese caso realizará un recorrido C.
Por tanto, los usuarios a tu web pueden llegar por diferentes vías, y esto quiere decir que su página de entrada no será la misma en todos los casos. Así que muy importante que te sientes con papel y lápiz e imagines cuáles pueden ser las diferentes vías de entrada de los usuarios a tu web, para que en cada caso puedas diseñar un recorrido que mantenga a esos usuarios navegando dentro tu sitio.
Si ya tienes tu web funcionando hace un tiempo y usas Google Analytics, puedes ver por las páginas a las que están llegando los visitantes de tu web, de qué fuente de tráfico vienen, y el recorrido que están haciendo con una herramienta que se llama “Flujo de usuarios”, que ayuda mucho a visualizar todo esto para poder optimizar el diseño.
Dos ejemplos concretos
Actualmente (2018), los tres objetivos fundamentales de mi web son:
captar suscriptores para mi curso de fotografía,
posicionarme como una fuente de contenido de valor en temas de branding visual, diseño web en Squarespace, y fotografía creativa,
y brindar información sobre mis servicios de diseño (branding y web), facilitando que quien esté interesada pueda contactarme fácilmente.
Quizás la jerarquía de esos objetivos (sobre todo el primero) te resulte un poco extraña sabiendo que actualmente el corazón de mi negocio son mis servicios de diseño, pero estos fueron los que definí cuando diseñé la web hace ya año y medio: mi proyecto no era un negocio todavía en ese momento, y los objetivos que tenía eran otros a los que tengo ahora.
En los últimos meses mi negocio y mis prioridades han cambiado, algo que todavía no he reflejado en mi web. Como consecuencia, y siendo completamente honesta, actualmente mi sitio web no funciona para mi negocio de manera óptima. Esto es un problema, y es una de las cosas en las que estoy trabajando para cambiar en los próximos meses… Pero, por el momento, vamos a ver las cosas como son para poder explicar con dos ejemplos concretos cómo mantengo el flujo de visitantes en mi web, teniendo estos objetivos como guía.
Redireccionar después de suscripción
Mi principal fuente de tráfico es Pinterest, y dentro de ese tráfico, la mayoría de las visitas que me llegan van directo a la Landing Page de mi curso de fotografía (esto no es casual, y es parte de una estrategia que definí desde que diseñé y lancé mi web). Al ser una página de aterrizaje, su único objetivo es conseguir suscriptores al curso, así que ahí el usuario tiene solo dos opciones: apuntarse al curso o cerrar la pestaña del navegador.
Ahora bien, en el caso de que decidan apuntarse, yo quiero aprovechar ese momento de interés que han tenido en mis contenidos para que me conozcan un poco mejor y empezar a crear una relación con estas personas que me acaban de encontrar (y así contribuir al objetivo general número 2). Es por esto que inmediatamente que envían el formulario de suscripción, son redireccionados a otra Landing Page (esto lo puedes configurar muy fácil en Mailchimp). En esta página:
les recuerdo que deben confirmar la suscripción al curso, porque en este momento lo más importante es que no se les olvide y completen el proceso de suscripción;
les doy las gracias por apuntarse, porque realmente me siento muy agradecida cada vez que alguien comparte su buzón de correo conmigo;
les muestro un botón para ir a la página “Sobre mí”;
y otro botón para ir a la página principal del Blog
Este procedimiento lo aplico en diferentes recorridos del usuario, y teniendo en cuenta las acaracterísticas de cada uno tengo páginas diseñadas con textos y enlaces diferentes para cada caso:
Cuando acaban de enviar el formulario de suscripción.
Cuando ya se suscribieron van a una página de agradecimiento diferente, que también incluye llamadas a la acción y botones.
Las páginas son diferentes cuando alguien se suscribe al curso de fotografía, a la newsletter desde Instagram, o a la newsletter desde uno de los cajetides de suscripción del blog.
Al revisar las analíticas de Squarespace, que incluyen datos sobre la conversión de los botones del sitio, sé que la inmensa mayoría de las personas hacen clic en uno de esos botones. Gracias a esto, siguen interactuando con mi contenido, lo cual es beneficioso para mí y, espero, para ellos también. A partir de ahí, mi web está diseñada para que tanto en la página sobre mí como en la de un post, puedan seguir navegando fácilmente.
Optimiza tus posts
Otra de las vías de entrada de usuarios a mi web es por posts del blog, tanto vía Google como vía Pinterest. Por tanto, el diseño de mis páginas de posts está optimizado para que si alguien llega al final de un post y le interesó lo que conté, pueda seguir leyendo sobre temas relacionados.
Aunque la mayoría de las webs incluyen una función para ir al post anterior y siguiente, es mucho mejor si mostramos contenido relevante para nuestro lector, con temas similares al que acaba de leer.
Con Squarespace es muy fácil mostrar en cualquier lugar de una página publicaciones de un tema determinado, con enlaces y las imágenes de portada, pero esta no es la única forma. De manera general, puedes utilizar el recurso de los posts relacionados:
como lo hago yo, usando un bloque de resumen en Squarespace (o un plugin o algo por el estilo en Wordpress) al final de cada post,
con un listado que hagas manualmente con enlaces a los posts también al final (es más trabajoso, pero se puede hacer perfectamente),
si tienes sidebar, puedes incluir ahí tus posts más populares (algo que suele funcionar bastante bien).
Además, mis publicaciones del blog tienen una llamada a la acción relacionada con mi lista de correo (objetivo número 1) o con mis servicios (objetivo número 3), en dependencia del contenido y el objetivo de cada post.