Los mejores diseños de Página de inicio en Internet y cómo copiarlos

La gente ha estado prediciendo la» muerte de la página de inicio » durante años.

pero la página de inicio nunca desaparecerá.

cada sitio necesita una puerta de entrada para dar la bienvenida a sus nuevos usuarios por primera vez y darles la forma de la tierra.

sin embargo, la página de inicio está evolucionando.

incluso hace unos años, las páginas de inicio contenían toneladas de información diferente sobre cada aspecto de la empresa.

estaban llenos de enlaces y lugares para ir., La compañía quería resaltar todos los diversos aspectos de lo que hizo.

el problema es que resultó contraproducente.

simplemente había demasiadas opciones. Era abrumador y distraía a los usuarios.

una de las mejores formas de mejorar rápidamente las conversiones de diseño de sitios web es eliminando las funciones que restan valor a la experiencia del usuario.

Los deslizadores de carrusel son un ejemplo perfecto. Se usan comúnmente para mostrar múltiples cosas diferentes a la vez.

pero esa versatilidad a menudo tiene un costo. Las pruebas han demostrado que perjudican las conversiones, el SEO y los tiempos de carga de la página.,

Vea que baja haga clic en porcentaje en la imagen de arriba? Eso no es una buena señal.

de hecho, esa es la razón por la que creé Crazy Egg. Si puedes ver que los usuarios no están haciendo clic en lo que se supone que deben hacer, puedes cambiar el diseño antes de que sea demasiado tarde.

Las mejores páginas de inicio tienen en cuenta la experiencia del usuario.

Estos son algunos de mis diseños favoritos de Página de inicio. Puedes empezar a copiarlos para obtener resultados similares.

Bills.com

la primera tendencia importante a destacar es la página de inicio como landing page.,’

tiene mucho sentido cuando lo piensas.

tu objetivo final es aumentar los leads y las ventas. El sitio web del ‘folleto en línea’ ha estado muerto y desaparecido durante años.

la parte difícil es conocer el mejor enfoque para generar leads en la página de inicio para que no asustes a todos y los obligues a rebotar.

por ejemplo, es mucho pedir a los nuevos visitantes que nunca han oído hablar de TI que compren algún producto grande.

así que en su lugar, necesita un enfoque más simple y menos invasivo para obtener lo que desea.

Y por eso me encanta lo que Bills.com está haciendo.,

por ejemplo, dirígete a su sitio y verás el siguiente deslizador:

ahora puedes deslizar interactivamente hacia adelante y hacia atrás para elegir el monto de la deuda que podrías deber. Es tan simple que un niño puede hacerlo.

¡también es la única opción que te dan hasta ahora! De esa manera no te sientes abrumado o distraído.

después de hacer clic en «Continuar», te preguntan si estás atrasado en los pagos o no (y si es así, por cuánto tiempo).

son la calificación aquí., Si no te atrasas en los pagos, es posible que no te puedan ayudar mucho (léase: gana dinero de ti).

pueden usar esta pregunta para personalizar la respuesta que eventualmente te darán. Eso puede incluso ayudar a dividir internamente qué persona o departamento será el mejor para manejar su caso si se convierte en cliente.

el siguiente paso es seleccionar en qué estado vive:

Una vez más, esto lo califica y también plantea cualquier problema potencial con las restricciones de estado (que podrían tener que tratar más adelante).,

El último paso es el que querían desde el principio: ¡tu información personal!

KlientBoost llama a esto la «técnica de migas de pan», porque en lugar de ahuyentar a las personas con la forma inicial, está haciendo que hagan pequeños compromisos micro.

Cada micro compromiso los lleva un poco más lejos hasta que ya están tan invertidos que tienen que terminar el proceso.

por ejemplo, si te hubieran pedido tu nombre y número de teléfono por adelantado, podría haberte asustado.,

sin embargo, al hacer que te comprometas con esos otros pasos primero, se dan una mejor oportunidad de convertirte eventualmente en un nuevo cliente.

KlientBoost ha utilizado con éxito esta técnica para aumentar las tasas de conversión de 1% a casi 20%.

El truco con estas páginas de destino de varios pasos es comenzar con la pregunta menos amenazante posible.

Tiene que estar relacionado con cómo vas a ayudarles en última instancia. Sin embargo, debe ser increíblemente simple para alguien proporcionar.,

obviamente, no debe haber ninguna mención de precio o sus datos personales en este punto.

incluso podría ser tan simple como pedir un código postal.

el siguiente paso se vuelve un poco más específico, insinuando el nivel de servicio que van a necesitar.

después de hacer que se comprometan con esos dos primeros pasos, puedes plantear algunas preguntas más personales para darles seguimiento después.

notarás que Bills.com también utiliza contenido interactivo para mantenerte involucrado en su sitio.

Qzzr es una herramienta que puede utilizar para hacer que esto suceda en su propio sitio., Ya tienen ‘widgets’ prediseñados que se pueden configurar en pocos minutos (en lugar de pagar a un desarrollador para que lo haga por usted).

Victoria’s Secret usa uno que Pregunta «¿Cuál es tu perfil de fitness?»The Food Network pregunta:» ¿podemos adivinar su edad en función de sus preferencias alimentarias?»

En cada caso, estas marcas están utilizando un divertido pregunta en la que se dedican. No hay ninguna amenaza en responder esas preguntas inicialmente.

Otra herramienta alternativa es SnapApp., También crean calculadoras interactivas e incluso infografías que las personas pueden apuntar, hacer clic y ajustar para ver nuevos resultados.

Aquí hay un ejemplo divertido de lo vano que es tu marketing que te lleva a responder preguntas de una manera de diagrama de flujo.

una recomendación final de la herramienta es Brackify. Ese nombre suena como» brackets», ¿verdad?

Bueno, ese es exactamente el punto! Puede crear soportes interactivos o competiciones para casi cualquier cosa, y dejar que los clientes o visitantes del sitio participen en la acción.,

esto es lo que podría parecer si alguien le preguntara Cuál es su película favorita de Disney:

Kiva

Kiva es una plataforma de micropréstamos.

conectan a empresarios de países del tercer mundo con donantes y patrocinadores de otras partes del mundo.

por ejemplo, digamos que un empresario en la India necesita $1,000 para una nueva máquina de coser comercial para que puedan producir y vender el doble de productos.,

así que la gente de todo el mundo puede donar en pequeñas cantidades y luego recibir el pago en el transcurso de un año o dos del nuevo flujo de efectivo que este empresario es capaz de generar.

la página de inicio de Kiva es relativamente básica, para ser honesto.

sin embargo, como hemos visto, ¡está bien!

Simple y directo puede mantener a las personas enfocadas en lo que es importante (darte su información a cambio de algo de valor).,

el problema es que si bien las personas pueden visitar tu página de inicio y estar interesadas en lo que haces, no siempre hay una razón convincente para iniciar ese proceso.

A veces, tienes que ser un poco más agresivo o asertivo para hacerles saber sobre el increíble valor que pueden obtener.

en este caso, Kiva decidió usar una superposición emergente para simplemente obtener opt-ins de boletín electrónico.

querían empezar poco a poco (y no usar algo amenazante como aprendimos en el último paso).,

así que Kiva fue con una simple opción de correo electrónico para al menos obtener algo de alguien antes de que rebotaran y abandonaran el sitio.

así es como se veía la nueva superposición de ofertas:

Las superposiciones como esta son difíciles de lograr.

algunas audiencias los odian, obviamente. Pero puede pagar enormes dividendos si posicionas bien tu contenido y ofreces.

también puede controlar cómo o cuándo se muestra. Por ejemplo, puede decidir activarlo solo para los visitantes nuevos (en lugar de los que regresan) y solo cuando su cursor comienza a moverse fuera de la ventana.,

estos a menudo crearán un efecto ‘lightbox’ que restará énfasis a todo lo demás en el fondo para que la gente vea directamente tu nueva oferta.

Este es otro ejemplo del que utilizo para los próximos seminarios web:

siempre habrá un porcentaje de su audiencia que odia estas cosas.

así que debes tener cuidado con cómo los usas. (También debes tener cuidado con los errores de diseño que también arruinarán tu SEO.)

sin embargo, los resultados a menudo pueden valer la pena el riesgo.,

Kiva decidió hacer una prueba a / b de esta superposición para ver cómo respondía su propia audiencia.

conectaron Unbounce con MailChimp (para los eventuales opt-ins de correo electrónico) y decidieron mostrar la nueva superposición a solo el 50% del tráfico inicialmente. Eso llegó a unos 5.000 visitantes.

solo esa superposición capturó un 3-4% adicional de visitantes desde el principio.

animado, Kiva siguió iterando con mejores diseños y diferentes opciones para duplicar ese número a 6-7%.

no está mal para un pop up «molesto», ¿verdad?

H. Bloom

¿Qué es exactamente H. Bloom?,

son un servicio de entrega de flores de lujo. Puedes seguir, marcar tus preferencias, y ellos se encargarán del resto.

por lo que son perfectos para que el empresario con exceso de trabajo nunca se olvide de sus seres queridos.

echemos un vistazo rápido a su página de inicio, y luego te diré por qué me gusta tanto:

En primer lugar, tienen su forma encima del pliegue.

eso hace que el objetivo de esta página sea claro desde el principio. Tus clientes llegan a esta página, y no necesitan adivinar qué se supone que deben hacer a continuación.,

el formulario que está al frente y al centro mantiene las cosas claras y agradables.

La mayoría de los visitantes del sitio web tienden a concentrar la mayor parte de su atención sobre el pliegue todavía (a pesar de que se están acostumbrando más a desplazarse hacia abajo).

la forma más fácil de mejorar su optimización de formularios de generación de Leads es mantener su CTA en el patrón de ojos normal que la gente ya usa.

por ejemplo, hace años se realizó un estudio que rastreaba cómo y dónde los ojos de las personas rastreaban cuando llegaban a tu página. Descubrieron que las personas tienden a escanear su sitio web en forma de «F».,

así que la primera sección de la página de inicio de H. Bloom inmediatamente le dice al lector lo que se supone que debe hacer en la página.

y luego la siguiente sección EN EL MEDIO explica exactamente cómo funciona su proceso.

la progresión lógica y paso a paso ayuda a las personas a comprender lo que se espera de ellas y lo difícil o lento que va a ser algo como esto.,

eso es crítico porque está estableciendo expectativas de inmediato y superando la objeción potencial de que podría llevar demasiado tiempo comenzar.

funciona en las mismas líneas que una barra de progreso.

por ejemplo, las barras de progreso tienen el poder de aumentar las conversiones en un 28%, Porque rápidamente aseguran al espectador que no queda mucho por hacer para obtener su recompensa.’

Mi pieza favorita final de esta página es la flecha sutil utilizada como una señal visual para ayudar a los espectadores de transición de una sección a la siguiente.,

es un pequeño detalle, pero ayuda a dar a los usuarios el mensaje para continuar leyendo en la página, especialmente si todavía no están listos para completar el formulario y comenzar lo antes posible.

Basecamp

antes de Basecamp era «Basecamp», eran 37Signals con múltiples productos de software diferentes.

y a lo largo de los años han iterado constantemente para ver qué funciona mejor para impulsar nuevos registros de prueba gratuita.,

Aquí está una de sus variaciones actuales de la página principal que utilizan una técnica de copywriting clásica que ha existido durante décadas:

lea la primera línea de esa página rápidamente.

» tu negocio está creciendo y estás abrumado. La forma en que trabajas ya no funciona.»

van a enumerar algunos de los diversos problemas y problemas que usted (propietario de un negocio con exceso de trabajo) probablemente esté esperando.

Este es un ejemplo de libro de texto de la técnica de copywriting PAS., Así es como funciona:

• problema: rápidamente llegas al corazón del asunto al confirmar claramente el problema principal contra el que se enfrenta tu prospecto (por ejemplo, «estás abrumado.”).
• agitar: luego haces la transición para nombrar todos los diversos puntos de dolor y síntomas que están experimentando actualmente como resultado de ese problema (por ejemplo, «correos electrónicos y textos desordenados», «cosas que se deslizan por las grietas», etc.).
• Solución: ahora presenta su solución como El Salvador que eliminará todos estos problemas para ellos (por ejemplo, «es hora de Basecamp.”).,

Aquí hay otro vistazo rápido a esa página de inicio Ahora que puedes identificar la fórmula que están siguiendo.

demasiadas empresas quieren lanzarse directamente a las características y beneficios de su producto en la página de inicio.

sin embargo, el problema con eso es que los visitantes de su sitio aún no están ahí.

estas personas pueden no reconocer los mismos problemas en su vida, por lo que la ‘solución’ que les estás vendiendo no resuena con ellos. Salen de su sitio sin convertir como resultado!,

también notará que esta página de inicio está llena de texto, lo cual es inusual en comparación con otros sitios web de software.

ese es otro truco que han aprendido después de probar diferentes versiones en los últimos años.

hace años, probaron una landing page clásica de formato largo e inicialmente vieron un gran salto en las conversiones (37.5%).

sin Embargo, todavía no estaban satisfechos y pensaron que podrían hacer mejor.

así que intentaron otra prueba, pero esta vez usando un testimonio de cliente contra el diseño original.,

el cliente uno salió en la cima con un aumento de conversión del 102%.

luego siguieron esto con una prueba más para ver si la longitud de la copia tenía algo que ver con los resultados. (Respuesta: no lo hizo.)

para que pueda ver que todavía se adhieren a un formato de texto pesado en general. Sin embargo, no es necesariamente la longitud de esa copia lo que hace la diferencia.

en su lugar, todo se reduce a las palabras específicas utilizadas y la fórmula inteligente para asegurarse de que sus clientes sepan exactamente qué problemas resuelve Basecamp.,

MailChimp

la página de inicio de la empresa de software de marketing por correo electrónico, MailChimp, presenta una de las mejores lecciones sobre cómo diseñar una página de inicio que convierta.

sin embargo, a primera vista, no parece mucho:

Una de las primeras cosas que notará es que hay un solo botón encima del pliegue.

no hay literalmente nada más para hacer clic aquí!

Se ha demostrado que la disminución de opciones y opciones ayuda a mejorar las tasas de conversión., La idea es que cuantas más decisiones obligues a los visitantes a tomar, más tiempo les llevará decidir qué hacer (si es que hay algo).

la página principal de MailChimp también ofrece una lección sobre el espacio en blanco (o espacio negativo).

por ejemplo, todos hemos intentado leer una publicación de blog en un sitio web, solo para sentirnos demasiado ‘apretados’ o desordenados. ¡Esa es una enorme bandera roja que el diseño de tu blog apesta!

en cambio, una página bien diseñada debe ser abierta y aireada como la de MailChimp.

el espacio negativo alrededor de tu CTA principal ayuda a aumentar su importancia en la página., Así que la gente casi se ve obligada a prestarle más atención.

vamos a desplazarnos un poco por la página y ver cómo juegan con el espaciado horizontal para monopolizar también tu atención.

están usando un truco de fotografía llamado la «regla de los tercios» que dice que debe colocar los elementos de Página más importantes en el medio de su punto de mira.

El contenido de esa sección de la página de inicio está centrada por una razón! Termina dando forma o controlando cómo quieren que veas el contenido de la página en orden de importancia.,

de esa manera pueden ayudarte a priorizar sutilmente una jerarquía de páginas que diga » esta es la opción # 1, Esta es la opción # 2, etc.»

conclusión

Las mejores páginas de inicio en la web hoy pueden tener diferentes objetivos.

sin embargo, siempre hay uno grande al que vuelven. Generación de leads.

Todos los sitios web de hoy necesitan vender.

eso no significa que tengan que hacer que la gente compre de inmediato. Pero necesita llegar a ese punto eventualmente.

Las mejores páginas de inicio utilizan varios factores, desde funciones interactivas hasta diseño, para instruir sutilmente al usuario qué hacer a continuación.,

Lo creas o no, esto también debe ser en el mejor interés del visitante.

ayuda a simplificar su vida al tomar menos decisiones, mientras que también los lleva al destino previsto más rápido (para que puedan resolver el problema o el punto de dolor que están experimentando).

¿Cuál es tu ejemplo de Página de inicio favorita y qué te gusta de ella?