Mucha gente piensa que el diseño es lo que vemos. Sin embargo, el diseño es, como dijo Steve Jobs, el cómo funciona. El mismo principio se aplica al diseño web.

Por supuesto que es importante que una web se vea “bonita”, atractiva, fresca, pero es aún más importante que funcione correctamente. Todos nos hemos encontrado alguna vez con una web que nos toma tiempo entender, y eso produce desinterés.

¿Cuáles son esos errores comunes de diseño web que afectan negativamente el funcionamiento de una página web? ¡Veamos!

Error de Diseño #1. Fotos de Stock

TODOS hemos usado fotos de stock, ya sea Stocksnap, Pexels, Pixabay, ¡hay muchísimas! Supongamos que compraste un hermoso tema de WordPress, estás listo para armar una página de Internet GENIAL y quieres hacer que luzca espectacular. Las imágenes son fundamentales, aparte de los textos, para que tu página sea llamativa, se entienda y genere la conversión deseada.

Es importante recordar que los diseños de páginas actualmente son minimalistas. Basta con mirar la de gurús del marketing como Neil Patel o Gary Vaynerchuck.

Mucho espacio blanco, tipografías limpias y toques de color (Gary prefiere el negro y el azul, Neil se decanta por el color naranja).

Los mejores Websites tienen en común el uso de fotografías profesionales personalizadas sobre la marca, producto, clientes, experiencias, etc. Esto es perfecto si la marca ofrece productos o servicios, para los clientes poder ver resultados reales o productos “puestos” en alguien es un elemento atractivo que además genera confianza.

Visual Website Optimizer realizó una prueba que confrontaba a una foto real con una de stock. Solo realizaron una variación de la imagen, querían verificar cuál resultaba en más clics del CTA (call to action), es decir, más registros. El resultado fue que la imagen real aumentó en un 161% de aumento en los clics del CTA y un aumento de 38.4% en los registros en la página.

Recuerda que solo toma 13 milisegundos para comprender de forma subconsciente una imagen, ¡escoge siempre las mejores! Las imágenes también pueden aumentar en engagement en un 94%.

Entonces, ¿qué hacer si no tienes de otra que usar imágenes de stock, o no tienes fotos profesionales que utilizar?

• Scrollea. No te quedes con la primera imagen que ves en las páginas de bancos de imágenes.
• Edita la imagen: Asegúrate de buscar imágenes con derechos (libres) de uso comercial (Flickr permite aplicar este filtro a la hora de buscar). Luego, edita la imagen y añade lo que necesites, cambia colores, etc. Checa lo que hace Gary Vaynerchuk:
•  
• También, como en el ejemplo anterior, puedes utilizar imágenes no tan producidas para hacer una composición.
• Asegúrate de que las imágenes de stock que selecciones tengan una línea gráfica común: Es decir, establece criterios para la escogencia de estas imágenes: paletas de colores similares, estilos similares, tipo de imagen, etc. Por ejemplo, para un blog de una marca de yates, lanchas, etc. lo mejor sería que las imágenes cumplieran criterios similares:
  • Paleta de colores azules, blancos, toques de rojo de ser necesario. ¿Sería rarísimo que de repente haya una imagen blanco y negro, cierto? Rompería con la armonía de colores.
  • Fotos, no ilustraciones.
  • Temáticas elegantes o familiares. Por ejemplo, una imagen de un barco pesquero desgastado, por más azul que tenga y aunque sea una foto, quedaría descartada porque no se identifica con el lifestyle que quiere proyectar la marca.

Error de Diseño #2. Imágenes demasiado Grandes.

Ok, quedamos en que las imágenes de stock no son el error más grande de tu marca, mientras sean hermosas, coincidan con la personalidad de la marca, tengan armonía entre ellas, etc. Pero escoger imágenes demasiado grandes puede jugar en contra. Por ejemplo, checa este vídeo de fondo en una página:

Se ve bien, ¿cierto? Cuando se abre la página, se extiende a través del monitor y se ve perfecto. Pero, ¿qué puede tener de malo?

Esto. Es muy lenta. Toma unos 12 segundos en cargar, lo cual puede resultar en perder el 31% de su tráfico.

A las personas no les gusta esperar, por muy hermoso que se vea un website. Según un informe de Google respecto a la rapidez de las páginas en su versión mobile, la probabilidad de rebote aumenta en un 113% si el sitio tarda más de 7 segundos en cargar.

La buena noticia es que Google tiene una herramienta para checar los websites y muestra recomendaciones para mejorar el tiempo de carga. Se llama Test My Site.

Se le da tanta importancia a la velocidad de carga de las páginas porque no solo generan rebote sino que dañan el SEO. Puedes ver en este post algunos Tips de SEO para mejorar el posicionamiento de tu web con poco presupuesto.  Como ven en el mismo reporte de Google que mencionamos antes dice que si el número de elementos en una página va de 400 a 6000, la probabilidad de conversión disminuye hasta en un 95%. Por eso, aunque tenemos muy arraigado el dicho “mercancía que no se exhibe, no se vende”, tu página no debe mostrarlo TODO al mismo tiempo. Evita sobrecargar tu website de elementos, imágenes, audio, etc.

Acá hay algunos tips para tener en cuenta:

1. Corta y redimensiona las imágenes para que encajen en lugares específicos del site.
2. Comprime los archivos con herramientas como WP Smush.it.
3. Usa herramientas como CloudFlare para subir tus imágenes.

Error de Diseño #3. Call to Actions

Si te encontraras un Call to Action como éste ¿Te quedaría claro dónde dar click?

Debe existir una jerarquía entre los títulos o textos para saber cuáles son primarios y cuáles son secundarios. La lógica detrás de esto no es muy difícil: las personas necesitan saber a qué de lo que leen darle más valor, así que señala explícitamente el call to action con botones llamativos y verbos atractivos. CTAs como: ¡Descárgalo ya!, Descubre cómo, Regístrate y obtén un descuento, etc. le indican al usuario exactamente qué hacer o qué logran con darle clic, y se incentivan.

Error de Diseño #4. Mensajes confusos.

¿Te ha pasado que entras a una página y no entiendes exactamente de qué se trata? Incluso debes ir a la pestaña “Nosotros” para tener una pista, y ya eso empieza a desanimarte.

Pregúntate: ¿Qué tan claro está el mensaje de tu website? El usuario no debe estar dando vueltas para saber qué hace tu marca, quién está detrás de la misma, dónde adquirir un producto o servicio, etc. Mantén la legibilidad como si el contenido estuviese destinado a estudiantes del 7mo y 8vo grado. No, esto no quiere decir que sea “infantil”, pero las palabras muy técnicas o rebuscadas distraen al usuario de lo que realmente quieres transmitirle. Estudios aseguran que lo que es fácil de entender (palabras, nombres, etc.) aumentan la credibilidad de una marca.

¿Qué tiene que ver esto con el diseño?

Puedes tener los mejores textos, pero si no se “ven” fácil, si se muestran con tanto movimiento que no pueden leerse bien, si el color o forma de la tipografía no es el adecuado, la página no generará conversiones porque nadie lo entenderá. El éxito es la combinación del mensaje adecuado con el diseño bien hecho.

Error de Diseño #5. Diseño Extremadamente «Flat».

Don’t Make Me Think (No me hagas pensar) es uno de los mejores libros sobre diseño y usabilidad para generar conversiones. La premisa del libro es bastante obvia desde su título. ¿Has visto a un niño tomando una tablet, teléfono inteligente o iPad por primera vez? No le tomará demasiado tiempo averiguar cómo funciona.

En un mundo ideal, los websites deben ofrecer esta misma facilidad, pero desafortunadamente no siempre es así. Cuando el diseño minimalista de una página es eficiente, se entiende inmediatamente. Cuando no lo es, generalmente es causada porque carece de señales para los usuarios sobre qué hacer o cómo manejar el webstite.

Checa este mapa de calor del software CrazyEgg.

Esto muestra que NADIE está dando click a la imagen principal, incluso cuando la intención es que los usuarios lo hagan.

Las imágenes y la página se ven muy bien, pero no hay ningún tipo de indicación para que el usuario le dé clic a estos elementos. Algo simple como un título, botón o animación le informaría a los usuarios que deberían dar clic.

En vez de dejar que el usuario asuma a qué darle clic, jerarquiza los call to action y no resumas TANTO la información para que el usuario sepa qué hacer. Por ejemplo:

• Título: “Plantilla gratis”
• Subtítulo: “Plantilla de metas en tu estrategia de marketing”
• Copy: “Determina tus metas de marketing y establece un cronograma con esta plantilla de Excel”
• Imagen: Laptop Mac con un ejemplo de la plantilla en la pantalla.
• CTA: Botón que diga “Descarga tu plantilla”

No dejes nada a la imaginación, guía al usuario hacia lo que necesitas que haga.

Error de Diseño #6. Organización Inteligente.

La organización de la página influye directamente en las conversiones, así que debe ser clara y eficiente. Por ejemplo, tu página “About” o “Quiénes somos” debería, aunque esté súper repetido, llamarse así. Si cambiásemos el nombre a “Líder”, “Unidad”, “Equipo”, etc. le tomará más tiempo al usuario saber exactamente de qué se trata.

La mayoría de las páginas deben organizarse de forma similar para que las personas sepan exactamente cómo encontrar un producto, incluso si no han visitado el website antes.

Si haces online shopping, notarás que lo normal es que las páginas estén organizadas por género, tipo de artículo (zapatos, accesorios, vestidos, etc.), edad, departamentos, marcas, ofertas, etc. Esto hace bastante fácil saber por dónde empezar. Nordstrom hace algo similar en su website, y además qué mejor ejemplo que Amazon. Organizar de esta forma las páginas permite mostrar las categorías o resolver las dudas más comunes del usuario dentro de la página.

Error de Diseño #7. Carrusel Sliders.

Los sliders en forma de carrusel han estado en prácticamente todas las páginas en el 2017, y en todos los tipos de marcas.

Sin embargo, por más “lindos” que sean y aunque para quien los incluye genera la sensación de que “muestra” el contenido, hay estudios como el de  Harrison Jones para Search Engine Land que muestran que muy pocas personas dan clic en los carruseles.

Así que no te desgastes preguntándote por qué si añadiste un carrusel, y es algo “trendy”, no subió el porcentaje de conversiones. La gente los ve, pero no da clic. Si ya lo tienes y no pretendes cambiarlo, asegúrate de mostrar mensajes llamativos que respondan a los objetivos de negocio.

En resumen, tu web debe lucir bien, pero sin dejar de lado la funcionalidad.

¿Qué otro error has cometido en tu diseño web? ¿Cómo lo solucionaste? ¡Coméntanos!