6 ejemplos de buen diseño de página de inicio para aumentar las conversiones

Algunos equipos de marketing intentan aplicar las mismas habilidades en el diseño de la página de inicio como lo harían en el Capítulo 1 de un libro. Intentan crear mucho contenido que consideran útil, con bloques de texto que describen múltiples aspectos del sitio.

Si bien puede ver de dónde provienen las buenas intenciones, este enfoque a menudo conduce al fracaso. La página de inicio del sitio web no tiene mucho en común con un libro. Se supone que el libro debe hacer que el lector se quede y participe, mientras que la página de inicio debe alejar al visitante de la página y llevarlo a la sección con la que se supone que el usuario debe interactuar.

En ese sentido, tiene más en común con un letrero que con un libro.

La página de inicio existe por dos razones:

• para establecer confianza (para que los visitantes se queden en el sitio), y
• para sacar a los visitantes de la página de inicio (para que puedan profundizar y encontrar lo que necesitan)

Para que la página de inicio haga lo que debe hacer, tiene que lograr tres cosas cuando los visitantes aterrizan:

• hacer que los visitantes sientan que están en el lugar correcto
• hacer que los visitantes se sientan bien con el sitio
• dejar en claro lo que se supone que deben hacer los visitantes a continuación

Aquí hay ejemplos de páginas de inicio que tienen éxito en esto y cómo lo hacen.

1. Relleno de PDF

El diseño de la página de inicio de PDFfiller puede transmitir inmediatamente de qué se trata el sitio cuando los visitantes llegan aquí:

• El nombre y el logotipo de la empresa se encuentran en la esquina superior izquierda, que es donde los visitantes tienden a mirar para orientarse sobre dónde se encuentran en la web.
• El título les dice a los usuarios exactamente qué es PDFfiller y qué les permite hacer.

La página tiene elementos de confianza convincentes. Aprovecha la prueba social al indicar que se ha completado, firmado y enviado una cantidad significativa de formularios a través de este servicio.

La jerarquía visual se utiliza de manera eficaz para llamar la atención del visitante sobre las llamadas a la acción (CTA):

• La página usa naranja para el CTA principal, un color que resalta debido a su contraste con el resto de la página.
• El CTA secundario "Iniciar prueba gratuita" no tiene énfasis porque está en un botón fantasma. Por lo tanto, es probable que reciba menos atención que la llamada a la acción principal.

Está claro que hay más contenido a continuación, ya que los íconos de las diferentes formas en que los usuarios pueden cargar documentos están recortados en la parte superior.

Justo debajo del pliegue, la página enumera los beneficios de usar el servicio.

También están presentes testimonios de clientes, calificaciones y garantía de devolución de dinero/sellos de seguridad. Estos ayudan a establecer confianza y credibilidad .

Hacia la parte inferior, la página tiene diferentes puntos de entrada de funcionalidad si los usuarios desean obtener más información sobre lo que pueden hacer con su documento a través de PDFfiller.

2. Nyraju

NyrajuSkinCare.com es un sitio de comercio electrónico que vende productos naturales para el cuidado de la piel exclusivamente para afroamericanos. Esto se hace evidente desde el principio por el eslogan y el mensaje en el banner estático.

La página hace que los visitantes se sientan bien con el sitio al poner los elementos de confianza al frente y al centro:

• El número de teléfono está en la ubicación estándar: los usuarios esperan que esté en la parte superior derecha de la página.
• Los logotipos de las empresas de medios, donde se ha mencionado a Nyraju, son visibles en la parte superior del pliegue.
• Compras seguras 100 % garantizadas, la garantía de compras de Norton y Yahoo! Los sellos de sitio seguro de Live Store están presentes.

Similar a PDFfiller, Nyraju también usa un color CTA que contrasta con el resto de la página . Aparte de los botones de CTA, el verde se usa en el número de teléfono. Esto hace que el número de teléfono destaque y, por lo tanto, sea más efectivo como elemento de confianza.

Justo debajo del pliegue, Nyraju tiene navegación visual . Utiliza un collage de diferentes artículos para representar categorías de productos, lo que facilita a los visitantes ver qué es posible comprar en el sitio de inmediato.

Mostrar un conjunto limitado de opciones distintas también permite a los usuarios seguir el rastro de la información para profundizar en el sitio hacia lo que están buscando.

3. Piedra de Roseta

Rosetta Stone deja en claro de inmediato su propuesta de venta única con el título y el cuerpo del texto debajo.

Es probable que los visitantes se sientan bien con el sitio debido a su apariencia moderna.

La empresa también puede establecer su autoridad mostrando de forma destacada el sello Editor's Choice de PCMAG.com en la parte superior de la página e indicando que la marca ha sido galardonada como "Mejor software de lenguaje" 7 años seguidos.

El cuerpo de la página facilita la navegación de los usuarios, independientemente de dónde se encuentren en el embudo de ventas, al presentar dos vías en la parte superior de la página:

• "Pruebe la demostración" para visitantes de etapa temprana a intermedia, y
• "Comprar ahora" para aquellos que están listos para actuar

Debajo del pliegue, la página persuade a los visitantes para que tomen medidas mediante el uso de declaraciones de beneficios que responden "¿qué hay para mí?" desde la perspectiva del cliente. Estos se combinan con testimonios de clientes que respaldan cada declaración de beneficios.

Más abajo en la página, hay puntos de entrada de navegación basados ​​en diferentes tipos de alumnos. Esto agrega facilidad de uso para que los visitantes encuentren el contenido que es relevante para ellos.

Por último, además de mostrar que la empresa existe desde hace mucho tiempo, la página se gana la confianza de otras marcas al mostrar menciones en los medios y logotipos de clientes destacados .

4. Uber

Debido a la fortaleza de la marca, Uber puede salirse con la suya con un título vago y sin poner símbolos de confianza en su página de inicio.

Lo bueno de la página de inicio de Uber es cómo las tareas que los usuarios pueden realizar se presentan como opciones distintas (es decir, "Gana", "Viaja", "Come", etc.).

También atiende tanto a los visitantes de última etapa que están listos para "Registrarse" como a los visitantes de etapa inicial a través de un enlace de texto "Obtenga más información sobre cómo conducir y realizar entregas".

5. B & H

B&H sigue las convenciones web colocando el logotipo de la empresa en la esquina superior izquierda y el número de teléfono en la esquina superior derecha de la página.

El sitio establece el liderazgo en la industria al indicar que la compañía ha sido "La fuente del profesional desde 1973".

También emplea el principio de escasez con un temporizador para indicar que las ofertas son limitadas y que los clientes harán bien en actuar más temprano que tarde.

El control deslizante puede distraer la atención de las tareas del usuario, ya que utiliza el movimiento y presenta promociones que solo pueden interesar a un puñado de visitantes. Debajo, sin embargo, hay una navegación visual que representa cada categoría de producto con imágenes compuestas , por lo que es inmediatamente obvio qué partes de el catálogo de productos están disponibles para cada categoría.

6. Libros frescos

El eslogan y el titular transmiten de manera sucinta qué es FreshBooks, por lo que es probable que los visitantes entiendan para qué es el sitio cuando aterrizan. El mensaje debajo del título indica los beneficios de usar el software.

La página emplea el principio de prueba social para animar a los usuarios a proporcionar su dirección de correo electrónico. Dirige deliberadamente la atención visual del usuario al botón "Comenzar" con el mensaje "97% de los clientes recomiendan FreshBooks".

La página inspira confianza al mostrar los logotipos de las empresas de medios en las que se ha presentado la marca.

La página atiende a los visitantes de la parte superior del embudo al tener CTA de "Más información" (aunque en la parte inferior de la página) en toda la página.

Tener un CTA en cada pantalla también permite a los usuarios realizar acciones independientemente de dónde se encuentren en la página.

La página tiene bastante texto, y eso es un problema porque la gente generalmente no lee en la web . Esto se puede abordar mostrando información de una manera que admita el comportamiento de escaneo de los usuarios web:

• En lugar de párrafos, la información se puede presentar en viñetas .
• Las palabras importantes que contienen información se pueden poner en negrita para que queden resaltadas.

Haga que el diseño de la página de inicio esté centrado en la conversión

Se supone que las páginas de inicio llevan a los visitantes a las partes relevantes del sitio. No se supone que haga que los visitantes permanezcan en la página ni proporcione información a nivel de producto.

Hay algunas cosas que puede hacer para asegurarse de que eso suceda:

• Coloque su logotipo donde los usuarios esperan que esté y tenga un eslogan y una descripción funcionales. De esta manera, los usuarios saben de inmediato que han aterrizado en el lugar correcto.
• Asegúrese de que los elementos de confianza sean visualmente destacados, para que los usuarios no adivinen su credibilidad.
• Facilite la identificación de cómo se supone que los usuarios deben avanzar:
  • Haz que los CTA se destaquen.
  • Permita que los usuarios seleccionen por sí mismos si tiene rutas que atienden a un grupo significativo de visitantes.
  • Tenga navegación visual (es decir, tenga collages de imágenes que representen visualmente sus grupos de productos).

Si hace todo eso, su página de inicio tiene una mejor oportunidad de lograr que los visitantes permanezcan en el sitio y, en última instancia, realicen una acción de conversión.