errores-página-web

Algunas veces, las páginas web nos ponen de mal humor. Damos clic con anticipación y… ¡desastre de diseño! Admítelo, te has quejado de esto.

Desde fuentes de mala calidad hasta enlaces rotos a problemas de usabilidad. En este artículo, Design Shack y Staff Creativa van a compartir contigo los errores que nos vuelven locos a todos. ¡Presta atención! Estas son las cosas que debes solucionar en tu propia página web antes de que alguien los vea.

1. Falta de contraste

errores-página-web-1

El texto y las imágenes en tu página web deben ser legibles. La forma más fácil de lograr esto es a través del contraste. Sin embargo, muchos diseñadores olvidan esto.

Con frecuencia, el problema más grandes es la falta de contraste entre el texto y el fondo de pantalla, lo que hace que las letras sean ilegibles.

Es importante asegurarnos de que cada ubicación contenga el suficiente contraste con sus elementos circuncidantes para que los elementos destaquen por sí mismos. Recuerda que algunas cosas básicas del diseño web es pensar en el contraste: color, espacio y tamaño. El uso de estos componentes te ayudará a separar los elementos unos de los otros.

La imagen de arriba contiene dos problemas de contraste con el texto. Mira el color de los enlaces en contra del fondo. El texto es bastante difícil de leer. Luego se encuentra el tamaño del texto comparado con la escala de las imágenes en la pantalla. Es demasiado pequeño y la fuente blanca contra un fondo claro crea el problema.

2. Flujo y navegación mediocres

errores-página-web-2

Desde el momento en que una persona llega a tu página web debe saber lo que esperas que haga. Los patrones de clic y el flujo de información deben ser algo obvios. Esta es la razón por qué la navegación y los menús se encuentran, con frecuencia, en la parte superior de una página web.

Los trucos y los efectos de navegación deben ser etiquetados de forma clara. Esto es para todos aquellos que están experimentando con una navegación de izquierda a derecha u otros tipos de efectos animados inusuales: brinda a los usuarios algún tipo de pista sobre cómo funciona. Frustrar a los usuarios con trucos de diseño muy complicados causará que abandonen tu página web.

3. Uso o tratamiento mediocre de imágenes

errores-página-web-3

No hay nada peor que una gran imagen empañada por otros elementos de diseño. Si te estás tomando el tiempo de usar buenas imágenes en tu página web, úsalas sin muchos efectos superpuestos. Añada una simple línea de texto y detente ahí. (De ahí la popularidad de los botones fantasmas.)

Aunque existan muchas formas de que esto suceda, la trampa se da cuando los diseñadores intentan estar «demasiado a la moda». Los encabezados hero son divertidos. Los sliders son geniales. Pero cuando juntas estos dos elementos con texto todo puede volverse peligroso. Cada imagen necesita funcionar con el texto, de modo que cada palabra sea legible y que todos los elementos importantes en la imagen sean visibles.

No cubras las partes más importantes de una imagen con texto o botones. Si sientes que eso está sucediendo con tu diseño, tal vez debería ser mejor optar por un simple fondo o uso de imágenes en otro lugar.

A primera vista, la imagen de arriba llama tu atención porque tiene el estilo legal. Pero si miras fijamente, las imágenes están obscurecidas por el texto y todo se torna confuso porque usa un testimonial que no necesita cubrir la imagen.

4. No usar una cuadrilla

errores-página-web-4

Existe una cierta cantidad de felicidad en la web, la asimetría es uno de esos elementos. La falta de una cuadrilla no lo es.

Usar uno de esos pulidores profesionales que separan un buen diseño web del malo. Las cuadrillas añaden claridad y organización, ayudan a crear un adecuado y consistente espaciado entre elementos y te ayuda a tener una idea de dónde y cómo coloca un elemento. La cuadrilla puede ayudarte a concentrar tu toma de decisión en el tamaño de los elementos, el tamaño del texto y espaciado y diseñar dentro de las proporciones adecuadas.

5. No usar un diseño web responsive

errores-página-web-5

Por el amor de Dios, usa un marco responsive en tus páginas web. Tu página web necesita funcionar en un teléfono móvil. Punto. De igual modo, también necesita funcionar en una computadora de escritorio.

Nos seguimos topando con páginas web que cargan como páginas completas en los teléfonos. Aquellas que no son responsive, o no cuentan con una versión móvil, se están perdiendo de tráfico y conversiones a diario.

Y como otros muchos usuarios, si entramos a tu página web y no funciona, no regresaremos a ella o la abriremos en una versión de escritorio.

6. Enlaces rotos

Los enlaces rotos son una de las más grandes frustraciones de la web. Acostúmbrate a realizar una auditoría en tu página web. Esto es algo que puedes hacer manualmente o con ayuda de una herramienta como Website Link Checker.

¿Otra cosa que nos molesta? Cuando un logo no enlaza hacia la página de inicio. Siempre debería existir un botón con la función «inicio».

Cuando se trata de enlaces, piensa en la usabilidad. Asegúrate de que los enlaces, en especial aquellos dentro del texto, sean visibles y lo suficientemente grandes para dar clic o pulsar sin tocar un enlace vecino por error. No incluyas muchas enlaces dentro de textos porque podría ser difícil tocar los enlaces correctos en dispositivos pequeños.

7. Autoreproducción de audio

errores-página-web-6

El sonido en tu página web puede ser divertido. El sonido que suena sin que lo pidas no lo es.

Siempre debes brindar un interruptor digital por defecto en tu página web. El sonido puede ser alarmante para los usuarios, puede no ser seguro para ambientes laborales y, por lo general, es molesto. La mayoría de los usuarios desea sentirse en control de su experiencia visual en una página web y la autoreproducción de sonidos les quita ese control.

Existen algunos lugares donde esto puede ser difícil— publicidad, por ejemplo. Si tienes algo que contiene sonido que debe sonar, entonces considera una caja estilo emergente. Los usuarios son más propensos a aceptar algunos segundos de sonido para ver un contenido. No sigue siendo una situación ideal, pero puede ser una mejor solución.

Mira la imagen de arriba. Reproduce un sonido de forma automática— se supone que debe ser un sonido tranquilo— pero trata de encontrar el interruptor de apagado de sonido. El botón es algo pequeño, en especial comparado con el tamaño de los otros elementos.

Otras siete molestias

Tristemente, existen muchas otras cosas que nos pueden volver locos cuando navegamos la web. Trata de no ser víctima de estos descuidados errores.

  1. Falta de barra de búsqueda
  2. Errores gramaticales o de escritura
  3. No llamada a la acción
  4. Demasiados enlaces en el contenido
  5. Texto con guiones
  6. Muchos botones pequeños
  7. Legibilidad y tipografía mediocre

Conclusión

Caer en algunos de estas trapas de diseño web es bastante fácil y le puede pasar a cualquiera, así que ten cuidado y concéntrate en los detalles a lo largo del proceso de diseño y lanzamiento, de modo que puedas evitar estos problemas. ¿No quieres molestar a tus usuarios, o sí?

Staff Creativa es una agencia de diseño de páginas web en Lima, Perú, que puede ayudarte en el proceso de diseño web para tu empresa, y nos aseguramos de crear una experiencia de usuario único que haga que tus usuarios no abandonen tu página web al instante. ¡Contáctanos!

Este artículo fue originalmente publicado en Design Shack, y ha sido traducido y adaptado al español por Staff Creativa, agencia de marketing digital en Lima, Perú. Si encuentras contenido online en inglés sobre diseño de páginas web, gestión de imagen corporativa, marketing digital o packaging, no dudes en contactarnos. Nos encargaremos de traducirlo y publicarlo, y te avisaremos!

The following two tabs change content below.

2 Comments

  • ovelima@hotmail.com' ovel dice:

    que buenos consejos, a ponerlos en práctica…

  • didiana@hotmail.com' ana dice:

    A cualquiera volverían loco este tipo de errores, a estas alturas del

    partido cometer alguno de ellos demuestra la falta de imaginación y motivación del

    desarrollador, si existiera algo como eso en una página tipo imaginacolombia.com que tanto

    tiempo tiene en funcionamiento perdería la esperanza.

Deja una respuesta