12 elementos críticos que toda página de inicio de un sitio web debe tener [Infographic]

Esta página, que actúa como la puerta de entrada virtual de su empresa, es responsable de atraer la mayor parte del tráfico de su sitio web. Aún así, a pesar de su importancia, muchas empresas luchan por optimizarlo correctamente.

Verá, su página de inicio necesita usar muchos sombreros. En lugar de tratarla como una página de destino dedicada construida en torno a una acción en particular, debería estar diseñada para servir a diferentes audiencias, de diferentes orígenes. Y para hacerlo de manera efectiva, debe construirse con un propósito. En otras palabras, deberá incorporar elementos que atraigan tráfico, eduquen a los visitantes e inviten a conversiones.

Para mejorar el rendimiento de su página de inicio, consulte estos elementos que toda página de inicio debe tener.

12 elementos críticos que toda página de inicio de un sitio web debe tener

Ahorrar

12 elementos críticos para la infografía de la página de inicio de un sitio web

Ahorrar

Comparte esta imagen en tu sitio

Incluya la atribución a http://blog.hubspot.com con este gráfico.

12 elementos críticos que toda página de inicio debe tener

Qué debe incluir en el diseño de la página de inicio de su sitio web

1. Título

En tres segundos, un sitio web debe informar a los visitantes sobre lo que ofrece la empresa. Ahí es donde entra su título. Puede que solo sean unas pocas palabras, pero es uno de los textos más importantes de su sitio web.

Es posible que muchos tipos de personas visiten su sitio web, y será difícil encontrar algunas palabras que les gusten a todos. En su lugar, escriba su título para apuntar a un tercio de las personas que tienen más probabilidades de estar contentas con su producto.

Mantenga el título en sí mismo claro y simple. El título de Dropbox es un gran ejemplo: “Todo lo que necesita para trabajar, todo en un solo lugar”. Es simple, pero poderoso: no es necesario decodificar la jerga para descubrir lo que realmente hace Dropbox.

Página de inicio del sitio web de Dropbox

2. Subtítulo

Su subtítulo debe complementar el título ofreciendo una breve descripción de lo que hace o ofrece. Esto se puede hacer de manera efectiva al concentrarse en un problema común que resuelve su producto o servicio.

Aquí hay un ejemplo de un gran subtítulo de Mirror: “Esconderse a la vista”. Se enfoca en el principal punto de venta del gimnasio espejo: es un gimnasio en casa completo, un entrenador personal y un plan de entrenamiento, todo en la comodidad de su hogar sin ocupar preciosos metros cuadrados con equipos.Subtítulo de la página de inicio del sitio web espejo que dice escondido a plena vista

Para optimizar sus titulares para dispositivos móviles, use fuentes más grandes para brindar a los visitantes una mejor experiencia. Las fuentes pequeñas pueden obligar a los visitantes de dispositivos móviles a pellizcar y hacer zoom para leer e interactuar con el contenido de su sitio. ¿Nuestro consejo? Utilice las opciones de encabezado en el editor de su página. Los encabezados H1 son perfectos para los títulos de página; solo debe haber un H1 en una página. Los subtítulos deben seguir el orden de la jerarquía, H2, H3 … H6, etc. Puede tener varios de estos títulos, solo asegúrese de que estén en orden. Por ejemplo, no querrá saltar de un H1 a un H3; elija un H2 en su lugar.

3. Llamados a la acción principales

El objetivo de su página de inicio es obligar a los visitantes a profundizar en su sitio web y moverlos por el embudo. Incluya dos o tres llamadas a la acción en la mitad superior de la página que dirijan a las personas a diferentes etapas del ciclo de compra y colóquelas en lugares que sean fáciles de encontrar.

Estas llamadas a la acción deben ser visualmente impactantes, idealmente en un color que contraste con el esquema de color de su página de inicio y al mismo tiempo encajar con el diseño general. Mantenga la copia breve, no más de cinco palabras, y orientada a la acción, de modo que obligue a los visitantes a hacer clic en lo que esté ofreciendo. Ejemplos de copia de CTA son “Registrarse”, “Programar una cita” o “Pruébelo gratis”.

El sitio web de Afterschool HQ presenta dos CTA en la parte superior, ambos dirigidos a directores de programas que están interesados ​​en promover sus programas después de la escuela a las familias en el sitio. La nota debajo de la CTA más larga “Crea tu perfil gratuito” les da a los visitantes el empujón que necesitan para crear una cuenta, el primer paso para convertirse en un proveedor de la sede central después de la escuela.

4. Imagen de apoyo

La mayoría de las personas son visuales. Asegúrese de usar una imagen (o incluso un video corto) que indique claramente lo que ofrece. Utilice imágenes que capturen la emoción, impulsen la acción y cuenten visualmente la historia sobre la que está escribiendo.

Para optimizar sus imágenes para los usuarios de dispositivos móviles, utilice imágenes de alta calidad que tengan un tamaño de archivo reducido. (Los clientes de HubSpot no necesitan preocuparse por esto, ya que las imágenes cargadas al software de HubSpot se comprimen automáticamente. De lo contrario, herramientas como TinyPNG funcionarán). Además, siempre agregue texto alternativo a sus imágenes para que sean más accesibles para los visitantes que utilice lectores de pantalla y lleve sus esfuerzos de SEO a un nivel superior.

La página de inicio de 4 Rivers Smokehouse es un gran ejemplo de imágenes emocionales: presenta una serie de videos cortos, de alta definición y deliciosos que se reproducen en un bucle detrás de un título simple, subtítulo y CTA principal:

Imagen destacada de la página de inicio del sitio web del ahumadero de 4 ríos con una hamburguesa con queso

5. Beneficios

No solo es importante describir lo que hace, sino también por qué es importante lo que hace. Los prospectos quieren saber acerca de los beneficios de comprarle porque eso es lo que los obligará a quedarse.

Mantenga la copia liviana y fácil de leer, y hable el idioma de sus clientes. Evernote hace un gran trabajo al enumerar los beneficios en su página de inicio de una manera atractiva, visualmente agradable y fácil de entender:

Beneficios de la página de inicio del sitio web de Evernote

6. Prueba social

La prueba social es un poderoso indicador de confianza. Su producto o servicio podría ser el mejor del mundo, y está bien hacer esa afirmación; es solo que es posible que las personas no le crean a menos que también lo escuchen de otras personas. Y eso es exactamente lo que hace la prueba social.

Incluya solo algunas de sus mejores citas (breves) en la página de inicio y enlace a estudios de caso si corresponde. Agregar un nombre y una foto le da más credibilidad a estos testimonios. Lessonly clava esto en su página de inicio con testimonios entusiastas de clientes reales.

Testimonios y reseñas de la página de inicio del sitio web de Lessonly

7. Navegación

El diseño y el contenido en la navegación de su página de inicio podrían significar la diferencia entre la conversión de un sitio web y un rebote. Para disminuir la tasa de rebote, brinde a sus visitantes una ruta clara a las páginas que necesitan directamente desde la página de inicio. Haga que el menú de navegación sea visible en la parte superior de la página y organice los enlaces en una estructura jerárquica.

Nadie conoce su sitio web mejor que quienes ayudaron a diseñarlo, así que asegúrese de realizar pruebas de usuario para asegurarse de que sea simple e intuitivo para que los visitantes encuentren lo que buscan en su sitio. Incluya un cuadro de búsqueda si puede. (Lea esta publicación de blog para obtener más consejos útiles para la navegación en el sitio web).

Aquí hay un ejemplo de un diseño de navegación claro y bien estructurado de la página de inicio de Slim & Husky’s Pizza Beeria:

Navegación de la página de inicio del sitio web de Slim and Huskys

8. Oferta de contenido

Para generar aún más clientes potenciales desde su página de inicio, presente una oferta de contenido realmente excelente, como un documento técnico, un libro electrónico o una guía. Las personas que quizás no estén listas para comprar tal vez prefieran descargar una oferta que les brinde más información sobre un tema que les interese. Si necesita inspiración, aquí hay varios tipos de contenido diferentes para elegir.

9. Llamados a la acción secundarios

Incluya CTA secundarios en su página de inicio para ofrecer oportunidades de conversión adicionales para los prospectos que no están interesados ​​en su objetivo principal. Piense en ellos como el plan de contingencia: ofrecen otro camino para los visitantes que aún no están listos para algo tan comprometido como usted pide.

Si bien sus llamadas a la acción principales deben estar en la mitad superior de la página, coloque las llamadas a la acción secundarias en la mitad inferior para ofrecer a los visitantes cosas en las que hacer clic cuando se desplazan hacia abajo. Por ejemplo, debajo del pliegue de la página de inicio de Spanx, encontrará tres llamados a la acción claramente etiquetados que brindan a las personas que se han desplazado hasta ese punto algunas opciones más para hacer clic. Estas llamadas a la acción secundarias son para dos tipos diferentes de conversiones: una en el extremo izquierdo con un descuento de $ 20 y otra, “compre ahora” para explorar el catálogo en línea.

CTA secundarios de la página de inicio del sitio web de Spanx

10. Características

Además de los beneficios, enumere algunas de sus características clave. Esto permite que las personas comprendan mejor lo que ofrecen sus productos y servicios. Nuevamente, mantenga la copia ligera y fácil de leer. Dropbox for Business, por ejemplo, no rehuye mostrar una matriz de funciones directamente en su página de inicio debajo de la página.

Dropbox para funciones de la página de inicio del sitio web empresarial

11. Recursos

Nuevamente, la mayoría de los visitantes de su sitio web no estarán listos para comprar … todavía. Para las personas que buscan más información, ofrezca un enlace a un centro de recursos donde puedan buscar información relevante. Esto no solo los mantiene en su página web por más tiempo, sino que también lo ayuda a establecer su credibilidad como líder intelectual en su industria.

Lovesac agrega un enlace de recursos al pie de página debajo del pliegue. Observe cómo cada una de estas llamadas a la acción secundarias cubren múltiples etapas en el ciclo de compra: un enlace de tarjeta de crédito para ayudar a los clientes a comprar sus muebles fácilmente, una guía de muestras de telas para aquellos que todavía buscan el color perfecto antes de realizar una compra y un catálogo en línea. para personas que están en el mercado de muebles nuevos pero que aún no están listas para realizar una compra.

página de inicio del sitio web de lovesac con recursos y CTA en el pie de página

12. Indicadores de éxito

Además de las historias de éxito de los clientes, tanto los premios como los reconocimientos también pueden ayudar a inspirar una buena primera impresión. ¿Su empresa es un restaurante aclamado por la crítica? ¿Fue votada como la mejor aplicación nueva de este año? Informe a los visitantes de su página de inicio de sus logros. Como prueba social, le dará a su negocio más credibilidad para aquellos que no lo conocen.

En la página de inicio de Calendly, por ejemplo, encontrará los nombres de organizaciones famosas que las han reconocido, como y

Página de inicio del sitio web de Calendly

Una página de inicio que vale la pena visitar

La página de inicio de su sitio es la primera introducción que cada visitante tendrá a su negocio. Antes de que se decidan a convertirse en clientes, revisarán su página de inicio para tener una idea de lo que vende, por qué les importa y cómo pueden beneficiarse de lo que usted ofrece.

Cause una primera impresión brillante con una página de inicio que incorpore los elementos descritos anteriormente. Y para obtener más inspiración, consulte ejemplos asombrosos de páginas de inicio descargando el lookbook gratuito a continuación.