10 consejos rápidos: cómo mejorar el diseño de su página web

() translation by (you can also view the original English article)

Para el propietario de la pequeña empresa, la página de inicio de su sitio web es como la ventana de su tienda: atrae a las personas a su tienda, les da una idea de lo que proporciona y es su punto de partida para explorar el resto de su tienda. Esto también significa que la apariencia de la página principal de su sitio web afecta en gran medida su marca y sus ventas.

A diferencia de un escaparate, sin embargo, mejorar la página de inicio de su sitio web no debería costar mucho, especialmente si tiene una pequeña empresa. Hay muchos ajustes de página web que puede realizar sin gastar mucho dinero o esperar varias semanas para rediseñar.

Website homepage design — El diseño de la página de inicio del sitio web es importante para el éxito de su negocio (Fuente de la imagen).

En este tutorial, le mostraremos cómo crear una página web que atraiga clientes. Explorará las ideas de diseño de la página principal del sitio web y verá algunos de los mejores ejemplos de páginas de inicio del sitio web.

Sumerjámonos en los consejos de diseño de la página principal de un sitio web.

1. Usa archivos de imagen ligeros

Tener imágenes hermosas y de alta calidad es imprescindible si desea que sus productos se vean lo mejor posible. Pero hay una desventaja importante: por lo general, cuanto más grande es la imagen o más alta es la resolución, más tiempo tardan las imágenes en cargarse para los visitantes. Cuanto más largos son los tiempos de carga, más probable es que sus visitantes se vayan.

Según una investigación de Google, el 53 por ciento de las visitas al sitio web se abandonan si un sitio móvil tarda más de tres segundos en cargarse. De hecho, su modelo predice que cuanto más demore cargar su página, mayor será la probabilidad de que sus visitantes se vayan. La misma investigación mostró que haría una gran diferencia si los propietarios de sitios web simplemente comprimieran sus imágenes.

Page load time statistics — Cuanto más tiempo tarde en cargarse una página web, más probabilidades hay de que reboten los visitantes.

Encuentre el equilibrio entre proporcionar hermosas imágenes y tener un sitio de carga rápida. Use la herramienta Google PageSpeed Insights para ver si sus imágenes necesitan más compresión. Si lo hacen, puedes usar una herramienta como TinyPNG para comprimirlos más o para obtener más información sobre la optimización de la imagen a través de estas guías:

2. Tener un único y destacado llamado a la acción

Cuando un visitante llega a su página de inicio por primera vez, no debe haber ambigüedad acerca de cuál debería ser su próximo paso. Aquí es donde entra su llamado a la acción (CTA). Una CTA generalmente aparece en forma de un botón grande. Hacer clic en él debería convertir a los visitantes de su página principal en una ventaja o una venta.

Asegúrate de que la llamada a la acción se encuentre arriba de la tapa, la parte superior de la página principal visible sin desplazarse. En un estudio de caso, una tienda en línea que vende trampolines aumentó su tasa de conversión en un 11 por ciento simplemente agregando una CTA en la mitad superior.

Aún así, no debe limitar su llamado a la acción solo a esta área. Puede repetirlo en el resto de la copia de su página de inicio. Por ejemplo, Rumpl, una tienda en línea que vende mantas especiales, destaca su producto destacado en la tapa con un llamado a la acción.

call to action placement — Coloque sus CTA en la mitad superior de la página, pero también repítalas en toda la página de inicio.

Pero si se desplaza hacia abajo en la página de inicio, verá otro botón de CTA para agregar ese producto a su carrito. Si bien Rumpl muestra otros artículos en la página de inicio de su sitio web, ninguno tiene un CTA destacado excepto el producto presentado. Los visitantes se centran casi exclusivamente en la compra del producto presentado.

Evite otros elementos de distracción en la página de inicio de su sitio web. El enfoque principal debería ser la llamada a la acción. Si necesita colocar elementos de navegación, botones de redes sociales y otros elementos en la página principal del sitio web, asegúrese de que no distraigan los ojos de los visitantes de los botones principales de CTA.

Si no tiene un fuerte botón de llamada a la acción en la página de inicio de su sitio web, échele un vistazo a algunas de estas plantillas de botones llamativos de Graphic River.

3. Aclara tu propuesta de valor

Además de ser claro acerca de la acción que sus visitantes deben realizar, también debe tener claro por qué deben tomar esa acción. Los consumidores de todos los grupos de edad valoran la claridad en las comunicaciones de marketing en línea, más que un gran diseño o una gramática y ortografía perfectas. Entonces, cuando se trata de la copia de la página de inicio de su sitio web, pregúntese lo siguiente:

¿Los visitantes saben lo que obtendrán a cambio de hacer clic en su CTA?
¿El título, los subtítulos y la copia del cuerpo contienen un punto importante y la solución que proporciona?
¿Podrán los visitantes repetir fácilmente su mensaje a otros?

study on clarity in company communications — Los consumidores valoran abrumadoramente la claridad del mensaje sobre el diseño, la longitud y la corrección gramatical.

Si desea aclarar su propuesta de valor en la copia de la página de inicio de su sitio web, pruebe las técnicas en los siguientes ejemplos:

1. Repita la Propuesta de valor

A lo largo de la copia de su página de inicio, repita los beneficios que obtendrán sus visitantes después de hacer clic en su CTA. Puede usar diferentes palabras y elementos visuales para reiterar estos beneficios. En el siguiente ejemplo, Gossamer Gear, una tienda en línea que vende artículos de viaje ligeros, su propuesta de valor de "equipo ultraligero" se menciona explícitamente en su título. También se menciona en el logotipo de su empresa ("Toma menos. Haz más") y la foto del banner muestra dos excursionistas que llevan mochilas que son más pequeñas de lo habitual.

Clear website homepage value proposition example — Repite tu propuesta de valor en varios lugares en la página principal de tu sitio web, incluidos los gráficos.

2. Especifique por qué la propuesta es importante

Puede afirmar que su empresa fabrica productos de alta calidad, tiene un buen servicio al cliente o es socialmente responsable. Puedes aclararlo aún más para tu audiencia al ser específico acerca de por qué. En su página web, el minorista de ropa United By Blue enfatiza su responsabilidad social tanto en su eslogan ("Bienes duraderos responsables") como en su contenido (enlaces a sus publicaciones de blog sobre limpieza de espacios públicos y sus tiendas construidas de manera responsable). Pero la copia de la página de inicio de su sitio web va más allá al especificar los esfuerzos de la compañía por los números.

Example of specificity in homepage copy — Sea específico acerca de cómo está entregando su propuesta de valor.

Piense en maneras en que puede ser más específico al expresar su propuesta de valor. Si su propuesta de valor única es que ayuda a los clientes a ahorrar dinero, tenga en cuenta cuánto podrían ahorrar. Si su empresa se enorgullece de fabricar productos duraderos, especifique cuántos años duran los productos o someta los productos a varias pruebas y muestre a su público los resultados.

4. Haga que la página de inicio de su página web sea fácil de escanear

Si la página de inicio de su sitio web tiene una copia larga o corta, es importante que el texto sea fácil de escanear. Esto se debe a que las personas tienden a escanear y leer texto en línea. Un estudio de Nielsen Norman Group muestra que solo el 16 por ciento de las personas lee texto en línea palabra por palabra. En un estudio más reciente, también encontraron que las personas tienden a escanear texto pesado en un patrón en forma de F, lo que les lleva a perder información esencial.

F-shaped pattern for reading text online — Los grandes bloques de texto en una página de inicio podrían llevar a las personas a escanearlo en un patrón en forma de F.

Si no desea que sus visitantes se pierdan sus palabras persuasivas o las características más importantes de su producto, asegúrese de que el texto en la página principal de su sitio web sea fácil de escanear. Aquí hay algunos consejos que puede seguir:

Divida el contenido de su página principal con subtítulos.
Usa listas para delinear detalles en lugar de describirlos en párrafos.
Agrega leyendas a tus imágenes.
Usa oraciones cortas.
Si puede presentar la información más rápidamente a través de imágenes, hágalo en lugar de confiar únicamente en la copia.
Evite tamaños de letra pequeños.

Un buen ejemplo de este principio se encuentra en Barebones Living, que vende equipos para actividades al aire libre. En lugar de enumerar sus categorías de productos y elaborar sobre ellos con largas descripciones, la copia simplemente dice "¿Cómo pasas tiempo al aire libre?" Las imágenes y los nombres de categoría de una sola palabra hacen un trabajo pesado. Incluso sin leer las palabras, puede decir en qué casilla debe hacer clic. Echemos un vistazo al ejemplo de la página de inicio del sitio web:

Scannable product categories — Complemente el lenguaje simple con imágenes fuertes para una página de inicio del sitio web fácil de escanear.

La página web también hace uso de subtítulos. En la captura de pantalla a continuación, el subtítulo "¿Por qué Barebones?" seguido de subtítulos más pequeños como "Agricultores en África", "Proporcionar refugio en Nepal" y "Proporcionar alimentos en Utah". Tener subtítulos como estos significa que los visitantes tendrán una idea concreta sobre los proyectos de la empresa, incluso si no leen el texto corto del cuerpo.

Use of subheads in scannable text — Use subtítulos para que los visitantes puedan obtener la esencia de su contenido, incluso si se saltan los párrafos.

5. Tener personas en tus fotos

Incluso si tiene el producto más fotogénico del mercado, es mejor tener personas en las fotos de sus productos, especialmente en la página de inicio de su sitio web. Las pruebas de Visual Website Optimizer muestran que el uso de fotos humanas en lugar de ilustraciones o íconos puede aumentar las tasas de conversión.

Más importante aún, use fotos reales de sus clientes o su personal. Los visitantes del sitio web tienden a ignorar las fotos de las personas, según una investigación de The Nielsen Norman Group.

Un buen ejemplo de esto es de la tienda de semillas en línea Renee's Garden. En la página principal de su sitio web hay varias fotos de personas en su granja, fotos de personas a las que han donado semillas y una foto del propietario. Además de estas fotos que le agarran los ojos, también crean confianza ya que puede ver a las personas detrás del negocio. Esta creación de confianza instantánea es esencial para pequeñas y microempresas que no tienen una reputación tan amplia como las marcas más establecidas.

Example of real people in photos — El uso de fotos de clientes y empleados reales puede ayudar a generar confianza y aumentar las conversiones.

6. Reducir el riesgo

Dado que las pequeñas empresas en línea no son tan conocidas como las marcas más grandes, los consumidores pueden sentir que hay algún riesgo de comprarles en comparación con comprar en las tiendas en línea de Amazon o Walmart. Debido a esto, debe eliminar cualquier riesgo potencial para su cliente.

W & P Design, una tienda de diseño de Brooklyn, deja en claro en su copia de la página que ofrecen "Devoluciones gratis". Sin complicaciones. "Si un cliente duda en comprar porque puede terminar no gustarle el producto, sabe por adelantado que puede devolverlo sin ningún tipo de molestia por parte de la compañía y sin pagar tarifas adicionales. Aquí tiene un vistazo al ejemplo de página de inicio del sitio web:

Return policy on website homepage to reduce risk — Mostrar una política de devolución en la página de inicio de su sitio web reduce el riesgo de los clientes.

De la mano con la reducción del riesgo de sus clientes está demostrando que cumple sus promesas. Aquí es donde entran pruebas sociales, como revisiones, estudios de casos y testimonios. Muestre estos en la página principal de su sitio web si desea que los clientes confíen en su empresa.

Wynd, que vende purificadores de aire inteligentes, logra esto teniendo una pestaña "Revisiones" encima del doblez en su página de inicio. Cuando hace clic en la pestaña, salen las reseñas de productos. Estas revisiones también aparecen nuevamente en una sección separada en la página de inicio del sitio web.

Customer reviews on website homepage — Agregar reseñas en la página de inicio de su sitio web ayuda a minimizar el riesgo para sus clientes potenciales.

Para obtener consejos detallados sobre cómo recopilar y usar comentarios en su sitio web, revise las siguientes guías:

7. Revela tu menú de navegación

Aunque parece limpio y moderno ocultar la navegación de la página de inicio de su sitio web con un menú desplegable o icono de hamburguesa, esto hace que sea menos probable que los usuarios naveguen por el resto de su sitio. La investigación de Nielsen Norman Group descubrió que la capacidad de descubrimiento de las páginas de un sitio se reduce a la mitad cuando las barras de navegación están ocultas. Los visitantes tardarán más en encontrar las otras páginas clave de su sitio.

Time to navigation chart — Los visitantes tardan más en acceder a un sitio web con navegación oculta.

Si hay demasiadas páginas en su sitio y no puede ponerlas todas en el menú de su página principal sin hacinamiento, puede optar por "navegación combinada". En este formato, hay enlaces de menú estáticos a páginas importantes en su sitio, pero el resto aparece a través de un menú desplegable. Este fue el enfoque utilizado por Johnny's Selected Seeds, un comerciante de semillas en línea. Como tienen docenas de semillas en su tienda en línea, la navegación principal solo enumera las principales categorías. Las otras subcategorías se revelan en un menú desplegable.

Example of combo navigation menu — Si tiene demasiados artículos en su tienda en línea, enumere solo las principales categorías en su menú. Lo importante es que hay un menú visible.

8. Pruebe el chat en vivo

Una cosa con la que quizás quieras experimentar es el uso del chat en vivo en tu sitio web. El chat en vivo es una función que permite a los visitantes del sitio web conversar en tiempo real con usted o su personal. Puede usar el chat en vivo para responder sus preguntas preliminares, ayudarlos a navegar en su sitio web o hacer una venta directamente. Para los clientes, esto es más fácil que llamar o enviar un correo electrónico a su empresa, ya que pueden chatear con usted mientras navegan por el sitio.

JSI Signs, una tienda de insumos en línea, utiliza chat en vivo para reducir el volumen de llamadas que reciben en su tienda. Esto también ayuda al propietario a realizar múltiples tareas, ya que podría responder preguntas de clientes potenciales mientras realiza otras tareas. Veamos el chat en el ejemplo de la página de inicio de este sitio web:

Example of live chat on a small business website — El chat en vivo en la página de inicio de su sitio web puede ayudarlo a explicar los productos a los visitantes de su sitio web, aumentando sus conversiones.

Pero hay otros beneficios importantes para agregar chat en vivo a la página de inicio de su sitio web. El chat en vivo puede aumentar las conversiones hasta en un 40 por ciento, según un estudio realizado por Apex Chat. También proporciona los niveles más altos de satisfacción del cliente, con el 73 por ciento de los consumidores satisfechos con el servicio que reciben del chat en vivo. El correo electrónico ocupa el segundo lugar con una tasa de satisfacción del 61 por ciento.

live chat satisfaction levels — Los clientes están satisfechos con el soporte de chat en vivo, más que por correo electrónico, teléfono o redes sociales.

Si está interesado en dar un chat en vivo, aquí hay algunos servicios de chat en vivo que puede usar:

9. Incrustar un video

Agregar un video a su página de inicio puede aumentar las conversiones. Esto es cierto en varias categorías de productos, según un estudio de Treepodia. Debido a esto, podría ser útil si agrega un clip de video en la página de inicio de su sitio web. Manténgalo corto, ya que el compromiso tiende a disminuir cuando el video es demasiado largo. Lo mejor es que el video sea más corto de dos minutos, según las estadísticas de Wistia.

Study increase in video conversion rates — En todos los tipos de productos anteriores, las tasas de conversión de comercio electrónico aumentaron con la adición de video.

En cuanto al contenido del video, podría ser un explicador, testimonio del cliente, demostración del producto o incluso un recorrido rápido por su tienda. Puede ser en vivo o animado, lo que sea que funcione con sus necesidades y presupuesto. En el siguiente ejemplo, Four Sigmatic, una compañía de café con hongos, tiene un video en su página de inicio donde el fundador demuestra cómo usar su producto. El video es especialmente importante para productos inusuales como el café con hongos, con el que la mayoría de la gente podría no estar familiarizada.

Embedded video on website homepage example — Agregar un video de demostración del producto puede ser útil al vender un producto inusual.

10. Simplicar

Si la lista anterior te hace pensar que mejorar la página de inicio de tu sitio web significa agregar más elementos, ese no es necesariamente el caso. Cada nuevo elemento que agregue podría distraer su mensaje principal y llamar a la acción. Además, puede dejar una mala impresión en sus visitantes.

Una investigación de Google muestra que la alta complejidad visual (la presencia de muchos elementos) puede afectar lo atractivo que es su sitio para los visitantes. Los sitios con baja complejidad visual fueron los más atractivos, incluso si las personas solo estuvieron expuestas a estos sitios durante 17 milisegundos. En otras palabras, la primera impresión de la página de inicio de su sitio web cuenta, y esta impresión debe ser lo más simple posible. Tenga esto en cuenta cuando esté siguiendo las recomendaciones anteriores. Reemplace los elementos innecesarios o ineficaces en lugar de agregar cosas nuevas para compensarlos.

Una página web que trae negocios

Acaba de enterarse de las ideas de diseño de la página de inicio del sitio web. Hemos explorado algunos ejemplos de páginas de inicio de sitios web. Ahora debería tener algunas ideas sobre cómo hacer que la página principal de su sitio web sea más efectiva.

Recuerde, la página de inicio de su sitio web nunca debe ser solo una parte decorativa de su estrategia de marketing. En su lugar, debe desempeñar un papel activo para generar ventas y repetir su mensaje de marca a clientes potenciales.

Si la página principal de su sitio web no parece cumplir esa promesa, trabaje en algunos de los cambios recomendados anteriormente. Puede comenzar con los que le resulten más fáciles de implementar. Al hacer estos cambios simples, la página de inicio de su sitio web podría incluso convertirse en uno de los canales de adquisición de clientes más importantes.