16 errores de diseño web que probablemente estés cometiendo ahora mismo

Como diseñador web, ya sea profesional o aficionado, deberías constantemente buscar mejorar tu sitio web.

Ya sea en la performance del sitio web, estilo, redacción, tasa de conversión o experiencia del usuario, mantener un pulso sobre cómo está funcionando tu sitio web es esencial.

Y con los estándares de diseño web y los algoritmos de Google en constante evolución, esto debería ser algo que hagas al menos una vez al mes.

Después de años dirigiendo mi propia agencia de diseño web, he visto a muchas personas cometer errores cruciales de diseño web. (y negarse a aprender de ellos)

Quiero evitar que cometas esos mismos errores.

Al eliminar estas 16 cosas de tu sitio web, puedes corregir instantáneamente esos errores y mejorarlo hoy.

1) Títulos vagos y confusos

Cuando las personas aterrizan por primera vez en tu sitio web, tienes meros segundos para captar su atención.

¿Cómo elegirás usar esos preciosos segundos?

Por un lado, debes dejar muy claro lo que puedes ofrecer a tu nuevo visitante encantador. Y la forma más eficiente de hacerlo es con tu título principal.

Los títulos vagos solo sirven para confundir o frustrar a los visitantes de tu sitio web.

Aquí tienes un ejemplo de un buen título y un mal título:

En el primer título de TrustedHousesitters, el beneficio ofrecido al visitante se deja claro de inmediato.

En contraste, el segundo título de MindMyHouse es simplemente un genérico “bienvenido a mi sitio web”. Como si todos aún estuviéramos construyendo sitios web en Homestead en 2002…

¿Cuál de ellos te hace a ti querer aprender más sobre la empresa?

LO QUE DEBES HACER EN SU LUGAR: Escribe un título claro y conciso que le diga a tu visitante inmediatamente qué beneficios recibirán cuando compren/se registren/se suscriban a tu producto o servicio.

2) Llamadas a la acción poco claras

Demasiadas empresas están tan enfocadas en atraer personas a su sitio web que ni siquiera saben qué quieren que hagan sus visitantes una vez que llegan.

Verás todo tipo de blogueros presumir sobre cuánto tráfico obtienen en su sitio cada mes, pero casi ninguno habla sobre cuántos de esos visitantes realmente se convirtieron en clientes o suscriptores.

¿Quieres 50,000 visitantes cada mes? ¿O quieres 1,000 nuevos clientes cada mes?

Tener una llamada a la acción clara para guiar a tus visitantes convertirá tu máquina de generación de tráfico genérica en un verdadero negocio que genera ganancias.

Aquí tienes un ejemplo de una buena llamada a la acción y una mala llamada a la acción:

BombBomb tiene una llamada a la acción clara, inmediata y procesable. Los visitantes ni siquiera necesitan hacer clic o desplazarse a ningún lado para registrarse. (¡sin tarjeta de crédito también!)

Mientras que la llamada a la acción de iMark Interactive es confusa y divisoria. ¿Con qué exactamente estoy “Empezando”? ¿Es diferente de “Contáctanos”? ¿Por qué tengo dos opciones para elegir? ¿Qué pasa si elijo la incorrecta?

¿Ves cuán fácilmente las cosas pueden salir mal para tu visitante?

LO QUE DEBES HACER EN SU LUGAR: Utiliza una llamada a la acción que lo haga obvio en qué están actuando los visitantes. No deberían tener que hacer clic a través de múltiples capas para actuar. Hazlo claro, simple y atractivo.

3) Demasiadas llamadas a la acción

Suscríbete a nuestro boletín, síguenos en redes sociales, compra esto, haz clic aquí, lee esto, mira mi video de YouTube…

Es demasiado.

Cada página de tu sitio web debería estar dedicada a que tus visitantes realicen una sola acción.
Si bien es perfectamente aceptable tener enlaces a tus otras páginas, deberías estar guiando a tu visitante por un camino hacia una llamada a la acción al final.

Un embudo puede verse algo así:

1. Un visitante aterriza en tu publicación de blog sobre “Cómo saber cuándo tu techo necesita reparaciones”

2. Lee tu publicación, luego hace clic en tu llamada a la acción al final que dice “Obtén un presupuesto para una reparación de techo”

3. Tu llamada a la acción lo lleva a tu página de destino de Servicios de Reparación de Techo

4. Ve la página, le gusta lo que ve, luego envía una solicitud de presupuesto en tu formulario de contacto ubicado en la parte inferior de la página

5. ¡Has convertido con éxito un visitante en un potencial nuevo cliente!

Ese embudo solo funciona si te mantienes en esa única llamada a la acción: Haz que el usuario solicite un presupuesto para la reparación del techo.

Si hubieras colocado un montón de otras cosas en la parte superior de ese embudo, como una serie de botones de suscripción y enlaces a redes sociales en medio de tu publicación de blog, aumentarías las probabilidades de que tus visitantes pierdan el enfoque y se desvíen a otro lugar.

Aquí tienes un ejemplo de demasiadas llamadas a la acción: (sí, este es un sitio web real lolz)

Vaya.

Este es un ejemplo extremo, por supuesto. Pero te sorprendería cuántos sitios web cometen este error colosal de diseño web.

LO QUE DEBES HACER EN SU LUGAR: Limita cada una de las páginas de tu sitio a solo una llamada a la acción. En algunas raras ocasiones, puedes permitirte 2-3, pero generalmente son llamadas a la acción menores en comparación con la principal.

4) Párrafos largos

Esto es fácil.

Nadie quiere leer un muro de texto. Divide tu contenido en párrafos cortos y fáciles de escanear.

Aquí tienes un ejemplo de la longitud adecuada de un párrafo vs la longitud de un párrafo inadecuado:

¿Cuál de ellos te tomarías el tiempo para leer?

LO QUE DEBES HACER EN SU LUGAR: Mantén tus párrafos en no más de 2-3 oraciones cada uno. Utiliza con libertad párrafos de una sola oración.

5) Videos que se reproducen automáticamente

Los videos que se reproducen automáticamente al aterrizar en un sitio web son obstinados.

De hecho, cualquier aspecto de un sitio web que me obligue a hacer algo, o limite mi libertad de elegir mi experiencia, es molesto.

Sin mencionar que los videos que se reproducen con fuerza reducen el tiempo de carga de tu sitio web. El video debe cargarse independientemente de si tus visitantes quieren verlo o no.

Y hay un lugar especial en… mi corazón… para los sitios web que reproducen videos con EL SONIDO ACTIVADO.

Aquí tienes un mal ejemplo de un video que se reproduce automáticamente:

Si quisiera verlo, habría presionado play, Anchor. (¡me encanta tu plataforma de podcasts!)

LO QUE DEBES HACER EN SU LUGAR: Dale a tus visitantes opciones. Déjales decidir si quieren ver tu video o no. Hazlo lo suficientemente atractivo como para que quieran presionar play.

6) Demasiadas animaciones

Las animaciones son geniales.

Y ciertamente pueden agregar valor al mensaje de tu sitio web. Si estás haciendo un sitio web sobre el espacio, ¿quién no quiere ver planetas flotando mientras desplazas?

Pero puedes definitivamente exagerar.

Hay una delgada línea entre mejorar la experiencia del usuario en tu sitio web y simplemente agregar tantos trucos cursis como tu servidor pueda soportar.

Sin mencionar que puede dañar seriamente el rendimiento de tu sitio web.

Aquí tienes un ejemplo de buen uso de animaciones en el sitio web:

Las animaciones de tu sitio web no deberían restarle valor a tu mensaje; deberían agregarle.

LO QUE DEBES HACER EN SU LUGAR: Mantén las animaciones al mínimo. Solo agrégalas si tiene sentido. Más no siempre es mejor.

7) Imágenes sobredimensionadas

Imágenes poderosas son la savia de tu sitio web. La gente no tiene tiempo para tus palabras anticuadas.

Y con las imágenes convirtiéndose en el foco de un gran diseño web, el costo que puede tener en los servidores de tu sitio web es masivo.

Muchos blogueros y diseñadores DIY están descargando fotos de alta calidad y luego simplemente subiéndolas a sus propios sitios web. Sin hacer ninguna optimización o compresión primero.

Este es un error costoso.

Muchas de estas imágenes están ocupando más de 3MB+…

Mira la diferencia que hace optimizar y comprimir tus imágenes: (de nuestros amigos en Kinsta)

Optimizar las imágenes de esta página catapultó el tiempo de carga de 1.5 segundos a poco menos de medio segundo.

¡Una mejora masiva para una tarea tan simple!

LO QUE DEBES HACER EN SU LUGAR: Asegúrate de que cada imagen que subas a tu sitio web haya sido redimensionada y optimizada adecuadamente.

8) Fotos de archivo genéricas

¿Hay algo peor que descubrir un hermoso sitio web, solo para desplazarte hacia abajo y encontrar que están usando fotos de archivo cursis de personas que ni siquiera trabajan para la empresa?

¿O peor aún, Vince Vaughn ¿trabaja para ellos?

Sí, así es. Vince Vaughn y algunos otros actores decidieron ridiculizar la industria de las fotos de archivo al participar en la producción de sus propias fotos de archivo cursis.

El objetivo era demostrar cómo las fotos de archivo deshumanizan a sus sujetos. Hasta el punto en que ni siquiera notarías a un famoso en ellas.

“Pero Patrick, no tengo $500/mes para gastar en Shutterstock. ¿Dónde puedo encontrar fotos de archivo gratis que no parezcan fotos de archivo?” – Tú, probablemente

La verdad es que puedes encontrar muchos recursos para fotos de archivo gratis que no parecen haber sido producidas en masa para cada abogado y firma contable del país.

¿Cómo sabes qué buscar?

Aquí tienes un ejemplo de una mala foto de archivo y una buena foto de archivo:

La diferencia es clara.

LO QUE DEBES HACER EN SU LUGAR: Usa fotos de archivo hermosas y de alta calidad que hayan sido tomadas por un fotógrafo independiente. Evita los Vince Vaughns genéricos y producidos en masa del mundo.

9) Copia aburrida

Esto me vuelve loco.

Las personas ponen tanto pensamiento en la apariencia y sensación de su sitio web, hacen algo hermoso y funcional, y luego completamente echan a perder cuando es hora de escribir las palabras.

Una gran redacción es el corazón y el alma no solo de tu sitio web, sino de todo tu negocio.

Es lo que mantendrá a tus visitantes leyendo y desplazándose, o huyendo hacia tus competidores.

La industria del diseño web es notoriamente mala en redacción. Como tal, serán el enfoque de mi desprecio.

Aquí tienes un ejemplo de mala redacción en sitios web y buena redacción en sitios web:

¿Cuál página es más probable que te atrape y te mantenga desplazándote hacia abajo por más?

(Divulgación completa: la página inferior es mía.)

LO QUE DEBES HACER EN SU LUGAR: Esfuérzate en tu escritura. Aprende sobre tu audiencia objetivo y qué tipo de contenido les gusta leer. Profundiza en la psicología y en lo que motiva a las personas. Lee más libros.

10) Página de Acerca de

La página Acerca de está muerta.

La gran mayoría de los sitios web no necesitan una.

Si no puedes decirles a tus visitantes de qué se trata tu empresa desde tu página de inicio, entonces no se molestarán en hacer clic en tu página Acerca de.

Ahorra tiempo y dinero, y evita esa página.

Aquí tienes un ejemplo de una mala página Acerca de que nunca deberías ver:

ProBlogger es un sitio web fantástico, y produce uno de mis podcasts de diseño web favoritos, pero esta página Acerca de es aburrida. Probablemente por eso está oculta en el pie de página…

LO QUE DEBES HACER EN SU LUGAR: Omite la página Acerca de por completo. Comunica tu mensaje en tu página de inicio. En raras ocasiones donde eso no es posible y sientes que necesitas una página Acerca de, no simplemente coloque un muro de texto.

11) Página de Testimonios

La página de Testimonios (lolz) está aún más muerta que la página Acerca de.

Francamente, deberías tener pruebas sociales (es decir, reseñas y testimonios) esparcidas a lo largo de todo tu sitio. No hay razón para mantenerlas todas en una sola página dedicada.

Y obtener reseñas para tu página de Google My Business es más importante de todos modos.

Aquí tienes un buen ejemplo de dónde deberían ir los testimonios: (a través de nuestros amigos en BigScoots)

Justo ahí en el medio de la página de inicio. Ahí es donde deberían estar tus testimonios.

Y en cualquier otra página subsiguiente donde sea relevante.

LO QUE DEBES HACER EN SU LUGAR: Omite la página de Testimonios y distribúyelas por todo tu sitio web en su lugar. Particularmente cerca de tus llamadas a la acción.

12) Iconos prominentes de redes sociales

Nuetros amigos de Orbit Media lo dijeron mejor de lo que yo jamás podría:

“Los iconos de redes sociales son simplemente señales de salida de colores brillantes.” – Andy Crestodina

Bien. Dicho.

Cada icono de redes sociales que pongas en tu sitio es una oportunidad para que tus visitantes se distraigan y se vayan.

El objetivo principal de las redes sociales es llevar a las personas DE las redes sociales A tu sitio web. No al revés.

LO QUE DEBES HACER EN SU LUGAR: Tu sitio web es la fuente de ingresos aquí. Dile a Zuck que se vaya. Mantén tus iconos sociales colocados discretamente en la parte inferior de tu pie de página.

13) Plugins sobrecargados

Este punto se aplica principalmente a mis compañeros usuarios de WordPress.

La función de plugins de WordPress facilita agregar funcionalidad avanzada a tu sitio web. Funciones que normalmente requerirían alguna personalización complicada.

Pero muchas personas se exceden al agregar plugins.

Cada plugin que instalas consume más recursos de tu servidor. Recursos que podrían gastarse mejor en otra parte.

Mira la diferencia que WPCurve hizo en su sitio web al eliminar plugins innecesarios:

¡De un tiempo de carga de 5.2 segundos a poco menos de medio segundo.

Eso es masivo.

LO QUE DEBES HACER EN SU LUGAR: Mantén tus plugins al mínimo. Asegúrate de que lo que instalas es absolutamente necesario y no se pueda hacer fácilmente sin un plugin. También mantén un ojo en qué plugins instalas, asegurándote de que todos sean seguros y de buena reputación.

14) Chat en vivo obnoxioso

Chat en vivo…

Posiblemente la peor nueva tendencia de marketing en internet en una década.

Es el nuevo popup.

Simplemente no puedo creer cuántos propietarios de sitios web continúan desafiando toda moralidad de la experiencia del usuario. Realmente es la única forma de describirlo.

No me opongo a todo el chat en vivo, tenlo en mente. Debe hacerse de manera discreta y considerando al usuario.

Aquí tienes un ejemplo de chat en vivo bien hecho, y también mal hecho:

Una de estas es una opción de contacto sutil que está ahí si la necesitas.

La otra es agresiva, molesta y, de alguna manera, incluso logra ser un anuncio de uno de sus propios productos.

¿Qué sitio web preferirías visitar?

LO QUE DEBES HACER EN SU LUGAR: Por todos los medios, ten la opción de chat en vivo. Pero que sea solo eso; una OPCIÓN. No lo empujes a la garganta de tu visitante en el momento en que aterrizan en tu página.

15) Enlaces de correo electrónico

Tuve este debate con un cliente recientemente. Perdí.

Supongo que a veces “el cliente siempre tiene la razón.” *encogimiento de hombros*

Insistieron en que necesitaban tener un enlace directo a correo electrónico en su sitio. Sabes, cuando haces clic en un correo electrónico y automáticamente se abre tu cliente de correo preferido para que puedas empezar a escribir.

Suena super conveniente, ¿verdad?

Y lo era. Justo hasta que los “marketers” lo arruinaron.

Ahora, si decides poner un mailto: enlace en tu sitio, solo estás aumentando la cantidad de spam que recibirás en tu bandeja de entrada.

LO QUE DEBES HACER EN SU LUGAR: Pide a tus visitantes que se pongan en contacto contigo de otras maneras. Formulario de contacto, chat en vivo, número de teléfono, WhatsApp, cualquier cosa menos un enlace directo a correo electrónico.

16) Demasiadas "cosas"

Y por último, pero no menos importante, demasiadas “cosas”.

Sé que suena super vago, pero ten paciencia conmigo.

Con el diseño web moderno, menos es más. El espacio en blanco es tu amigo. Solo porque tengas espacio vacío, no significa que tengas que llenarlo con algo.

Un uso sabio del espacio en blanco presenta mejor tu mensaje, y embellece aún más tu sitio web.

Aquí tienes un ejemplo de un sitio web con demasiadas cosas, y un sitio web con solo la cantidad justa:

(Sí, así es. Usé mi propio sitio web como ejemplo nuevamente. Haz tu propio blog si no te gusta.)

¿Cuál de estos sitios tiene el mensaje más claro?

Limpiar, simple y minimalista está de moda. El desorden y la sobrecarga de información están fuera.

LO QUE DEBES HACER EN SU LUGAR: Comunica tanto como puedas con lo menos posible. Ayuda a tus visitantes a centrarse en los aspectos más importantes de tu mensaje.

Oh, estoy seguro de que hay más cosas de las que deshacerte...

A medida que internet evoluciona, los estándares de diseño web se adaptan.

Hoy en día, esto está sucediendo a un ritmo acelerado.

Tendré que mantenerme al tanto de esta publicación para poder seguir agregando más a lo largo de los años...

Pero si eliminas estas 16 cosas de tu sitio web hoy, notarás una mejora dramática en el rendimiento de tu sitio web y en la tasa de conversión.

Personalmente te lo garantizo.