7 errores de diseño de sitios web que me vuelven loco

A veces los sitios web me ponen de mal humor. Hago clic con anticipación y luego? desastre del diseño. Admítelo, también te has quejado en la pantalla más de un par de veces.

Desde el tipo pobre hasta los enlaces faltantes y los problemas de usabilidad, voy a compartir los errores que me vuelven absolutamente loco. ¡Cuidado! Estas son cosas que debe abordar y corregir en su propio sitio, ¡antes de que alguien más las encuentre!

1. Falta de contraste

El texto y las imágenes en su sitio web deben ser legibles. La forma más fácil de lograrlo es a través del contraste. Pero demasiados diseñadores olvidan este simple hecho.

El mayor problema suele ser la falta de contraste entre el texto y el fondo, lo que hace que las letras sean ilegibles. (¿No es ese el punto del contenido?)

Es importante asegurarse de que cada ubicación contenga suficiente contraste con los elementos circundantes para diferenciarlos, de modo que los elementos queden por sí mismos. Recuerde algunos de los conceptos básicos del diseño cuando piense en el contraste: color, espacio y tamaño. Usar estos elementos te ayudará a diferenciarlos.

La imagen de arriba contiene dos problemas de contraste con el texto. Mira el color de los enlaces contra el fondo. El texto es bastante difícil de leer. Luego observe el tamaño del texto en comparación con la escala de las imágenes en la pantalla. Es demasiado pequeño y las letras blancas sobre un fondo claro agravan el problema.

2. Mala navegación y flujo

Desde el momento en que llego a su sitio, debería saber qué espera que haga a continuación. Los patrones de clics y el flujo de información deberían ser bastante obvios. (Esta es una de las razones por las que la navegación y los menús suelen estar en la parte superior de la página).

Los trucos y efectos de navegación deben estar claramente etiquetados y funcionar de manera intuitiva. Esto es para todos ustedes que experimentan con el desplazamiento de izquierda a derecha u otros efectos animados inusuales; brinde a los usuarios algún tipo de indicio sobre cómo funciona. Los usuarios frustrados con trucos de diseño más complicados harán que abandonen su sitio.

3. Mal uso de la foto o tratamiento

No hay nada peor que una gran imagen oculta por otros elementos de diseño. Si se toma el tiempo de usar grandes imágenes en su sitio, úselas sin demasiados efectos superpuestos. Añade una simple línea de texto y detente. (De ahí la popularidad de los botones fantasma.)

Si bien hay muchas formas en que esto puede suceder, la trampa suele suceder cuando los diseñadores intentan ser "demasiado modernos". Los encabezados de los héroes son divertidos. Los deslizadores son geniales Pero cuando emparejas estos elementos con texto, pueden volverse peligrosos. Cada imagen del conjunto debe trabajar con el texto para que cada palabra sea legible y todos los elementos importantes de la foto sean visibles.

No cubra las partes importantes de una imagen con texto o botones. Si siente que esto está sucediendo en su diseño, tal vez sería mejor optar por un fondo simple y usar fotos en otros lugares.

A primera vista, la imagen de arriba te atrapa porque está en el estilo de boceto legal. Pero mire más de cerca, las caras están oscurecidas por el texto y todo se confunde con un testimonio que no necesita cubrir la imagen.

4. No usar una cuadrícula

Hay una cierta cantidad de feliz caos en el diseño web; La asimetría es uno de esos elementos. La falta de una rejilla no lo es.

Usar una cuadrícula es uno de esos pulimentos profesionales que distinguen el buen diseño del malo. Las cuadrículas agregan claridad y organización, ayudan a crear un espacio adecuado y consistente entre los elementos y te dan una idea de dónde y cómo colocar los elementos. La cuadrícula puede ayudar a enfocar la toma de decisiones para el tamaño del elemento, el tamaño y el espacio del texto, y el diseño dentro de proporciones que se ponderan adecuadamente.

5. No usar diseño responsivo

Por favor, por el amor de Dios, use un marco sensible para sus sitios web. Su sitio necesita trabajar en un teléfono móvil. Período. Por el contrario, también debe funcionar igual de bien en mi escritorio.

Sigo encontrando sitios que se muestran como páginas web completas en mi teléfono. Los sitios web que no responden, o que por lo menos no tienen una versión móvil, están perdiendo tráfico y conversiones todos los días. (Si bien es más infrecuente, los sitios que solo ofrecen versiones móviles son igualmente frustrantes).

Y muchos otros usuarios probablemente sean como yo, si pruebo su sitio en mi teléfono y no funciona, tampoco vuelvo ni lo intento en mi escritorio.

6. Enlaces que faltan

Los enlaces rotos son una de las mayores frustraciones de la web. Adquiera el hábito de realizar una auditoría anual de enlaces para su sitio. Esto es algo que puede hacer manualmente o con la ayuda de una herramienta como el verificador de enlaces de sitios web.

La otra cosa que simplemente me molesta? Cuando el logotipo no es un enlace a la página de inicio de cada página. Siempre debe haber una? Casa? función. (Y mientras lo hace, no desactive el botón de retroceso).

Cuando se trata de enlaces, piensa en la usabilidad. Asegúrese de que los enlaces, especialmente los que están en el texto, sean visibles y lo suficientemente grandes para hacer clic o tocar sin obtener un enlace vecino por error. No incluya demasiados enlaces de texto por esta razón, ya que puede ser difícil tocar el enlace correcto, especialmente en dispositivos más pequeños.

7. Sonido de reproducción automática

El sonido en su sitio web puede ser divertido. El sonido que se reproduce sin avisar no lo es.

Siempre debe dar a los usuarios una opción de activación / desactivación de sonido y la opción predeterminada está desactivada. El sonido puede ser sorprendente para los usuarios, puede que no sea seguro para los entornos de trabajo y generalmente es molesto. La mayoría de los usuarios desean sentirse en control de la experiencia de visualización del sitio web y el sonido de reproducción automática elimina parte de este control. Es mucho más probable que me involucre con el sonido y lo reproduzca si me dan la opción; el juego automático a menudo hace que salga del sitio sin buscar un lugar para silenciarlo.

Hay algunos lugares donde esto puede ser complicado: la publicidad, por ejemplo. Si tiene algo que contiene sonido que debe reproducirse, considere un cuadro de estilo emergente con un botón de silencio grande.Los usuarios son más? Entrenados? para aceptar unos segundos de reproducción de anuncios para ver el contenido. Todavía no es una situación ideal, pero puede ser una mejor solución.

Mira la imagen del sitio de arriba. Reproduce los sonidos automáticamente, se supone que deben estar tranquilos, pero vea si puede detectar el interruptor de sonido de un vistazo. El botón es bastante pequeño, especialmente en comparación con la escala de otros elementos.

7 más Pet Peeves

Lamentablemente, hay muchas otras cosas pequeñas que me pueden volver loco cuando navego por la web también. Trata de no ser víctima de ninguno de estos errores descuidados.

  1. No buscar
  2. Errores gramaticales o faltas de ortografía
  3. No hay llamada a la acción
  4. Demasiados enlaces en la copia.
  5. Texto con guiones
  6. Botones super-pequeños
  7. Mala tipografía y legibilidad.

Conclusión

Caer en algunas de estas trampas de diseño es demasiado fácil y le puede pasar a cualquiera. (Incluso encontrará algunos de estos errores en sitios con un gran diseño en general).

Así que cuídese y concéntrese en los detalles durante todo el proceso de diseño y el lanzamiento para evitar muchos de estos problemas. No quieres hacerme gruñón, ¿verdad?