13 Mejores Prácticas de Diseño de sitios Web para 2021

Hoy en día, puedes poner en marcha un sitio web en pocos minutos. Pero hay una diferencia entre que un sitio web esté activo y optimizado.

¿Por qué importa el diseño? Solo toma 0.05 segundos para que las personas se formen una opinión sobre tu sitio web. Sí, lo has leído correctamente: 50 milisegundos para que alguien se quede impresionado o rechazado por tu sitio web. La mayor parte de esa opinión se forma a partir del diseño.

El diseño del sitio web también afecta a tus conversiones, credibilidad y, en última instancia, hace o rompe el éxito de tu sitio. Ningún sitio web es perfecto, pero debes optimizarlo tanto como sea posible.

Aquí hay algo a tener en cuenta también: Después de una mala experiencia, es poco probable que el 88% de los consumidores regresen a un sitio web. Además de eso, un estudio reciente encontró que el 77% de las agencias dicen que un diseño de sitio web deficiente es la debilidad más significativa de sus clientes.

Línea de fondo: Si su diseño web no está optimizado para la experiencia del usuario (UX), va a ser perjudicial para su éxito. Por eso escribí esta guía.

Muchos factores intervienen en el diseño de un sitio web. Estos son los trece elementos más importantes a priorizar en 2021. Si sigues estas prácticas recomendadas, el rendimiento de tu sitio mejorará drásticamente.

Use esta lista de verificación para asegurarse de tener un diseño ganador

1. Minimizar texto
2. Mostrar, no decir
3. Usar frases cortas
4. Probar párrafos más cortos
5. Elegir un esquema de color que se ajuste a
7. Refuerce las acciones con familiaridad
8. Simplifique la navegación
9. Optimice su diseño para dispositivos móviles
10. Priorice SEO
11. Supervise la velocidad de carga de su página
12. Ejecute continuamente pruebas A/B

Minimice el texto

No llene sus páginas con bloques masivos de texto.

No estoy hablando de publicaciones de blog, que a veces necesitan ir en profundidad (¡como esta!). Estoy hablando de tus páginas web (por ejemplo, página de inicio, página de destino). Mantenga el texto al mínimo aquí.

Desea contarle a los visitantes de su sitio web todo sobre usted, su empresa, su marca y sus productos. Pero necesitas aprender a contar esa historia en unas pocas frases o, mejor aún, en unas pocas palabras.

Mostrar, no decir

Las imágenes no solo te ayudan a dividir el contenido escrito, sino que también pueden proporcionar una explicación más profunda. Muestre a sus visitantes de qué se trata. Entenderán más en menos tiempo.

La página de producto de Harry encarna estos dos primeros principios de diseño:

Por ejemplo, supongamos que su sitio web vende maquinillas de afeitar, cuchillas, crema de afeitar y otros productos de afeitar para hombres.

Opera con un modelo de negocio de suscripción y entrega estos productos a sus clientes mensualmente. El diseño de sus maquinillas de afeitar es muy atractivo: están hechas de madera tallada y son lo suficientemente agradables para regalar.

En lugar de entrar en todos estos detalles en su página de inicio, simplemente puede tener una foto de estos productos con un texto que diga algo como «entregado a su puerta.»Haces llegar tu mensaje en solo cuatro palabras.

Claro, puedes entrar en mayor detalle cuanto más profundo entre el visitante en tus páginas, pero no se requiere una descripción de texto larga.

Use oraciones cortas

Las oraciones cortas son más fáciles de leer.

No bombardees a los visitantes con grandes trozos de texto. No sabrán por dónde empezar a leer y no podrán digerir tu contenido.

Mezclarlo. Si necesitas una oración larga, síguela con una corta. La variedad ayuda.

Pruebe con párrafos más cortos

Use saltos de párrafo a su favor. Está bien escribir párrafos más largos, pero me gusta mantener los párrafos de mi página de inicio en pocas oraciones.

También es importante no exagerar. Demasiado de algo bueno, en realidad es algo malo.

Comience cada párrafo con nueva información, de modo que si alguien está desplazándose, pueda saber rápidamente si necesita leer ese párrafo.

Eliminar el texto innecesario en sus páginas reduce el desorden Y pone más énfasis en su llamada a la acción.

Que el CTA se destaque solo en su propio párrafo es más impactante que enterrarlo en un montón de texto.

Una herramienta muy útil en esta situación son las viñetas. En lugar de agregar párrafos y escribir en formato largo, considere usar listas. En esas listas, use viñetas.

Los estudios muestran que más personas verán listas con viñetas que otros formatos. Esto se debe a que ayudan a mejorar la capacidad de escaneo de una página y te permiten resaltar los puntos más importantes que deseas hacer.

Elija un esquema de color que se ajuste a su estrategia de marca

Las elecciones de color que realice en su sitio web son más importantes de lo que cree.

Los visitantes juzgan tu sitio web en menos de 90 segundos. La mayor parte de eso es el resultado de los colores que elijas.

La mejor manera de elegir el esquema de color de su sitio web es con la marca. Consulte su logotipo. ¿Los colores de tu sitio web encajan con la imagen de tu marca?

Este es un ejemplo. Piensa en Starbucks.

Cuando escuches el nombre de esta marca, estoy seguro de que tienes una imagen en la cabeza. Tal vez sea el logotipo, un letrero o la ubicación de una tienda.

¿Asocia algún color con ese nombre? Ahora veamos su sitio web.

No es de extrañar que optaran por un esquema de color verde.

Esta elección de diseño coincide con su logotipo e imagen de marca, lo que refuerza lo que los consumidores ya asocian con la marca. Al mantener las cosas consistentes, no hay confusión. Sería extraño que visitaras este sitio web y los colores fueran amarillo y rojo. Eso no tiene nada que ver con su marca.

Hablaremos más sobre refuerzo en mayor profundidad a medida que continuamos.

Haga que su CTA sea claro y obvio

Los CTA no deben enterrarse. Deben ser grandes, audaces y poderosos, y deben destacarse claramente como la acción que sus visitantes deben tomar a continuación.

Sin embargo, la mayoría de los sitios web no tienen un botón de llamada a la acción que se pueda detectar en menos de tres segundos. Hay una buena probabilidad de que caigas en el grupo que lleva más tiempo. Esa no es la categoría en la que quieres estar.

No puedes generar conversiones sin un botón de llamada a la acción efectivo.

Casi nunca veo un CTA en las páginas interiores de un negocio (las páginas que explican lo que hace tu marca y lo que ofreces). Este es un defecto de diseño importante. No puedes esperar que los visitantes naveguen de vuelta a tu página de inicio para convertir.

Echa un vistazo a este CTA de Litmus.

Mira lo simple que es este diseño. Hay un texto mínimo en la pantalla, por lo que el mensaje es claro.

Como resultado, el CTA «regístrate gratis» se destaca. De hecho, Litmus incluso lo puso en más de un lugar de la pantalla.

Donde debe colocar su CTA difiere de una página a otra. Por ejemplo, las publicaciones de blog deben tener el CTA en la parte superior para que los lectores lo vean rápidamente y también en la parte inferior después de haber leído la publicación.

Ir más profundo: ¿Quieres optimizar tus CTA? Aquí hay 11 maneras de mejorar tus llamadas a la acción.

Refuerza las acciones con familiaridad

Si tu mensaje es el mismo, tu CTA debe ser el mismo en cada página.

Piensa en cómo las personas navegan por tu sitio web. Incluso si configura un cierto flujo, no todos aterrizarán en una página y convertirán en segundos. Pueden navegar un poco primero.

Por ejemplo, supongamos que tiene un sitio web de comercio electrónico. No debes cambiar el botón de llamada a la acción de una página a otra, que se vería así:

• Página de inicio: Compra ahora
• Página de categoría: Cómpralo hoy
• Página del producto: Haz clic para comprar

Si un visitante ve uno de esos botones en tu página de inicio, el otro en una página de categoría y el tercero en una página de producto, no hay refuerzo.

En su lugar, mantenga el mensaje y el estilo consistentes. Este es un buen ejemplo de la marca de joyas y accesorios MVMT.

No importa si estás en su página de gafas, relojes o joyas. Vas a ver el mismo CTA de» COMPRA AHORA » para sus productos.

Cada página también se mantiene coherente con el diseño minimalista en blanco y negro de su sitio web.

Aplique este principio de diseño a su sitio web también.

Va más allá del botón CTA. La idea es tener este tipo de refuerzo con tantos elementos como sea posible.

La coherencia en el lenguaje, la mensajería y el diseño refuerza la identidad de su marca y deja una impresión duradera en la mente de sus visitantes.

Simplifique la navegación

No debería ser difícil para un visitante del sitio web encontrar lo que está buscando en su sitio.

Ponte en su lugar. ¿Por qué visita el sitio web? ¿Cómo logras esa tarea? Tal vez quieras comprar algo, obtener más información o ver lo que hay para ofrecer. Cualquiera que sea la razón, si los visitantes no pueden averiguarlo rápidamente, se van.

Hay demasiada competencia por ahí. Los usuarios no tienen ninguna razón para soportar la navegación difícil de manejar del sitio web. Todo lo que necesitan hacer es salir de su sitio y encontrar lo que necesitan en otro lugar.

No intente reinventar la rueda con un diseño complejo. Apégate al formato estándar.

Por ejemplo, la mayoría de los sitios web colocan el menú de navegación horizontalmente en la parte superior de cada página. Si tu menú está en otro lugar, podría confundir a tus visitantes.

Cuantas menos opciones haya en el menú, mejor. De lo contrario, será demasiado difícil para las personas encontrar lo que necesitan. Este concepto se conoce como la Ley de Hick.

La más opciones le das a alguien, más tiempo le llevará a tomar una decisión. Es por eso que los diseños y navegaciones complejos aplastarán tus tasas de conversión.

Hay un famoso experimento sobre esto, conocido como el estudio jam, que discute la paradoja de la elección.

El experimento se llevó a cabo en una tienda de comestibles local. Se presentaron a los consumidores 24 mermeladas para muestrearlas en un día y seis mermeladas al día siguiente:

• La pantalla más grande del primer día atrajo al 60% de los compradores, pero solo el 3% de esas personas hicieron una compra.
• La exhibición más pequeña de seis jams en el segundo día atrajo al 40% de los compradores, pero el 30% de ellos realizó una compra.

Al limitar las opciones, las conversiones fueron diez veces mayores. Este mismo concepto se puede aplicar a la navegación de su sitio web.

Elimine las opciones de menú innecesarias. Por ejemplo, en lugar de tener un botón «inicio», simplemente use el logotipo del sitio web para enlazar a la pantalla de inicio.

Eche un vistazo a la página de inicio de Square.

El diseño es super limpio. Las opciones de menú son extremadamente limitadas. Esto hace que sea fácil para los visitantes elegir una selección que se adapte a sus necesidades.

Notarás que hay un texto mínimo en la pantalla, y el CTA es claro y obvio.

Este tipo de diseño hace que sea casi imposible que los visitantes del sitio web se pierdan o se confundan cuando navegan.

Para aquellos de ustedes que tienen muchas opciones en su sitio web, como una tienda de comercio electrónico, puede agregar una barra de búsqueda para simplificar el proceso de navegación sin usar un menú complicado. Muchas compañías de software ponen sus características en una pestaña de características en lugar de tener una pestaña individual para cada característica.

Optimice su diseño para dispositivos móviles

El móvil es la forma en que la mayoría del mundo accede a Internet. Eso significa que si no estás optimizado para dispositivos móviles, tu sitio web no funcionará bien.

Eche un vistazo a estos datos de Hootsuite:

Los motores de búsqueda reconocen esto y recompensan a los sitios que son compatibles con dispositivos móviles. Aquí hay algunas estadísticas más para dar en el clavo:

• Google sabe que el 87% de los propietarios de teléfonos inteligentes utilizan sus dispositivos para realizar una búsqueda en Internet al menos una vez al día.
• El 58% de todas las búsquedas de Google se realizan desde un dispositivo móvil
• El resultado: el 70% de los resultados de la primera página en Google están optimizados para dispositivos móviles.

El SEO móvil es lo más importante que puedes hacer para posicionarte bien en Google. Seriamente.

Si su sitio web no se ve bien en un teléfono inteligente, la gente no querrá quedarse. Por lo tanto, asegúrese de que los diseños de su sitio web sean compatibles con dispositivos móviles.

Ir más profundo: ¿Quieres aprender a optimizar tu sitio web para dispositivos móviles? Echa un vistazo a nuestra guía completa para un sitio web amigable para dispositivos móviles.

Prioriza el SEO

Todo lo que hagas en tu sitio debe volver al SEO.

Y no basta con añadir palabras clave aquí y allá. Es un sistema de todo el sitio web para mejorar el contenido y apuntar implacablemente a temas específicos para construir la autoridad de tu sitio en esa área.

Por ejemplo, una página de destino para un sitio de comercio electrónico querrá centrarse en ciertos elementos de la página, como:

• Usabilidad. Lo fácil que es para sus visitantes usar y navegar.
• Móvil. Cómo se ve y funciona su sitio web en un dispositivo móvil.
• Optimización de palabras clave. Las palabras y frases por las que quieres posicionarte.
• enlaces Internos. Con qué frecuencia enlazas a otras páginas de tu sitio web.
• Titular. Este es a menudo el texto más grande de una página web. Como tal, hace la mayor parte del trabajo pesado en tu landing page.

Crear un mapa de sitio XML. Esto hará que sea más fácil para los rastreadores de motores de búsqueda analizar el contenido de tu sitio web. Un mapa del sitio mostrará a los bots la ubicación de las páginas de tu sitio, la última vez que se actualizó la página, la frecuencia de actualización y la relación con otras páginas de tu sitio.

Un mapa de sitio adecuado muestra a Google que no tienes contenido duplicado, lo que puede dañar tu posicionamiento SEO.

Cuando diseñas tu sitio, también hay un MONTÓN de elementos menos obvios que influyen en el posicionamiento en Google.

Ya hemos repasado algunos aspectos que puedes mejorar en la propia página. Pero otros elementos incluyen:

• Dominio. Tu URL es muy consecuente con tu rango de Google. Los factores clave incluyen tener su palabra clave en el dominio, la antigüedad del dominio y la extensión de su dominio (por ejemplo, de alta calidad, como .com,. net,. gov,.org frente a extensiones no tradicionales).
• Calidad del sitio. Su sitio web debe ser útil para los visitantes. Los factores clave incluyen una página de «Acerca de nosotros», una página de «Contacto», la frecuencia con la que actualiza su sitio web, la facilidad de navegación, el tiempo de actividad (con qué frecuencia se bloquea su sitio web) y los certificados SSL.
• Backlinks. Esto se refiere a la frecuencia a la que otros sitios web enlazan su sitio web. Es un factor crucial para posicionarse bien en Google. Los factores clave incluyen el número de páginas enlazadas, la calidad y autoridad de los sitios web que enlazan a ti, el texto de anclaje que están utilizando para enlazar a ti, y si esos enlaces provienen o no de dominios .edu o .gov.

Supervise la velocidad de carga de su página

Sé lo que algunos de ustedes están pensando. ¿Qué tiene que ver la velocidad de carga de la página con el diseño web? Todo.

Claro, los tiempos de carga están relacionados con el plan de alojamiento de su sitio web, el servidor, el tráfico y cosas de esa naturaleza. Sin embargo, las opciones de diseño también pueden afectar sus tiempos de carga.

Cada vez que agrega un elemento a su sitio, especialmente imágenes, videos y otros archivos multimedia complejos, sus tiempos de carga pueden verse afectados. Como tal, puede ralentizar las solicitudes HTTP.

Los tiempos de carga lentos conducen a altas tasas de abandono. No puedes ignorar esto. Si tus páginas tardan demasiado en cargarse, será un gran problema.

Además, el 25% de las personas abandonan los sitios web que tardan más de cuatro segundos en cargarse. Sí, cuatro segundos. Eso es todo lo que tienes, o perderás 25 de cada 100 visitantes. La mayoría de los visitantes esperan que una página se cargue en dos segundos o menos.

Entonces, ¿cómo puedes aplicar esto a tu diseño web?

• Reduzca el tamaño de los archivos de sus imágenes
• Aproveche las herramientas de almacenamiento en caché del navegador
• Reduzca las solicitudes HTTP
• Mejore su TTFB (tiempo hasta el primer byte)
• Reduzca y combine sus archivos

Hay muchas herramientas disponibles en línea para ayudarte a lograr estas cosas. Por ejemplo, echa un vistazo al plugin de WordPress Rocket como un recurso para reducir y combinar tus archivos. Y usa la herramienta de información sobre la velocidad de la página de Google para ayudarte a controlar los tiempos de carga cada vez que realices cambios de diseño en tu sitio web.

Ejecute continuamente pruebas A / B

Cuando se trata del diseño de su sitio web, no puede configurarlo y olvidarlo.

Como dije antes, ningún sitio web es perfecto. Siempre hay formas de mejorar tu diseño.

Es por eso que necesita ejecutar pruebas A / B. Estos le permiten realizar mejoras regulares a su sitio web y probar elementos para ver qué funciona mejor y, lo que es más importante, qué no funciona en absoluto.

Casi todos los elementos del diseño de su sitio se pueden probar. Por ejemplo, puedes crear dos landing pages diferentes que tengan CTA diferentes, pero que por lo demás sean iguales. Si una landing page funciona mejor que la otra, sabrás que es probable que su CTA haga el trabajo.

Aquí hay algunas sugerencias rápidas para comenzar en la dirección correcta:

• Pruebe la ubicación de su botón de CTA
• Pruebe el color de su botón de CTA
• Pruebe la copia de CTA
• Pruebe las imágenes que está utilizando en las páginas de destino
• Pruebe las variaciones de texto en la pantalla

Hay tantas opciones, que podría pasar todo el día hablando de esto. Para aquellos de ustedes que no están familiarizados con las pruebas A/B o necesitan ayuda, consulte mi guía sobre todo lo que necesita saber antes de comenzar las pruebas A/B.

Conclusión

Decir que el diseño de un sitio web es importante sería quedarse corto. Sus opciones de diseño web finalmente impactarán si su sitio es exitoso o no.

• El sitio web de todos se puede mejorar. Use esta lista como guía como recurso para ayudarlo a realizar esas mejoras.
• No te sientas abrumado. No estoy diciendo que necesites implementar todas estas sugerencias de diseño de la noche a la mañana, pero necesitas comenzar en alguna parte.
• No saqué estas ideas de la nada. Todo en esta lista está respaldado por investigaciones y estadísticas relacionadas con los principios de diseño.

Recuerde: Cada sitio web es un trabajo en progreso. Si pones el trabajo y siempre afinas tu sitio web, vas a mejorar tu ventaja con tus competidores.

No importa si tu sitio web es nuevo o si ha existido durante una década. Estas son las mejores prácticas de diseño web que debe seguir en 2021.