10 cosas que debes evitar en el diseño web

Muchos recursos que usamos en el diseño web van quedando obsoletos, a medida que avanza la tecnología.

Hay que tener en cuenta, que esta lista es una guía basada en varios sitios web expertos en diseño que nos permite determinar si actualizamos los patrones que estamos usando en nuestros diseños.

1. Animaciones, Web o Intros hechos en Flash

Animaciones Flash

Animaciones Flash

 Las animaciones flash pueden ser muy bonitas, muy interactivas y cuando esta bien hecha, llama mucho la atención. Sin embargo, desde ya hace un tiempo no se usan en la web por diferentes motivos:

  • Los intros demoran la carga del sitio, es un paso más que debe esperar el usuario para poder llegar a ver lo que busca.
  • No cargan en dispositivos móviles de forma nativa. Si deseas visualizarlas en Android, debes instalar una aplicación.
  • Hace más lento el proceso de carga de la pagina
  • El contenido que está dentro del flash no lo lee los buscadores
  • Genera problema con la navegación de los usuarios
  • El mantenimiento del sitio es más costoso
  • Cómo solo es una página para posicionar, es más difícil para SEO
  • Debes instalar plugins adecuados para ver el flash en tu explorador

Solución:

  • Hacer toda la web en HTML5
  • Con HTML5 y CSS3 puedes hacer animaciones
  • En la web hay muchos software que pueden convertir animaciones básicas de flash a HTML5

 2. Carrusel

Si los podemos evitar, sería mucho mejor, pues genera muchos problemas de accesibilidad. Navegar a través de ellos, puede llegar ser confusos para algunos usuarios y su efectividad es muy baja.

Carrusel de Imágenes

Carrusel de Imágenes

 Solución:

Hay dos formas:

  1. Priorizar el Contenido:
    En vez de mostrar 4 o 5 slider de contenido, donde siempre la primera diapositiva se lleva la mayor cantidad de clics y las otras se quedan en el olvido, seleccionamos las ideas principales y las estructuramos en un solo diseño.

     

  2. Mejorar la navegación del Carrusel:
    Las flechas del Carrusel no son claras, a veces no se ven y no transmiten la idea de que deben hacer clic para ver otro contenido, por tal razón, muchos la omiten y prestan atención a otra parte del contenido.

    Por otro lado, si el carrusel cambia automáticamente, puede ser molesto para el lector mientras lee el contenido y este cambia de repente. 

    Carrusel de imágenes

    Carrusel de imágenes

    La solución, es hacer un carrusel con etiquetas claras y visibles. Estas etiquetas son informativas y describen lo que el usuario va a ver, esto incentiva a que hagan clic. Son más fácil de ver, pues son más grandes y puestas en un lugar más visible que las flechas de navegación.

3. Sonidos de fondo en la Web

Evitar sonidos de fondo en la web

Sonidos de fondo en la web

No creo que tenga mucha explicación por qué no usarlos. La razón es porque se vuelve muy molesto después de un tiempo escuchar el mismo track cada vez que ingresas a la web, además, no a todos los gusta el género de la canción que se reproduce.

4. Mega Menús

Mega Menú

Mega Menú

 

Durante un tiempo se hicieron muy populares, sin embargo, en vez de ayudar con la usabilidad del sitio, hace que sea más confuso para el usuario navegar por el sitio y finalmente se rendía o tomará la decisión de ir a la caja de búsqueda.

Solución:

Estructurar mejor el contenido de tu sitio.

Todo está en hacer una buena arquitectura de información, organizar desde lo más relevante hasta lo menos importante. En el menú principal puedes poner los títulos más genéricos y creas submenús con contenido más específico. Lo recomendable es tener máximo 7 ítems en el 1er nivel del menú principal.

Dado el caso que tengas mucha información, en el menú principal puedes poner lo más relevante y al ingresar a cada página puedes crear menús secundarios laterales con links más específicos, permitiendo así, un buen flujo de navegación.

5. Texto en/como imágenes

Texto como imagen

Texto como imagen

El Texto en imagen hace más difícil la tarea de indexar el contenido por parte de los robots de los buscadores, generando problemas para posicionar la página. Además, si no escribe correctamente los tag Alt y Title o si la imagen se encuentra distorsionada, pixelada o cambia el tamaño lo que normalmente ocurre en diseños responsive, dificulta mucho la lectura por parte de los usuarios.

Solución

Puedes usar alternativas para crear fuentes embebidas en la web

  • Google fonts
  • Adobe Typekit
  • Fontsquirrel

6. Popups al cargar la página

Popups cargar la imagen

Popups cargar la imagen

 

Los popups nos ayudan mucho para mejorar la experiencia de usuario pues permite cargar contenido externo de forma rápida y elegante, sin embargo, debemos saberlos usar, pues puede causar muchas molestias a los usuarios cuando vez tras vez ingresan a un mismo sitio y carga inicialmente un popup, que pone más lento la carga de la página, a veces bloquea el explorador, por la resolución de la pantalla no se visualiza bien el aviso o el botón de cerrar.

7. Exceso de botones de redes sociales

Exceso de botones redes sociales

Exceso de botones redes sociales

 

Compartir una imagen, un contenido o un video y hacerlo viral es algo que está de moda ahora, sin embargo, no debemos exceder la cantidad de botones de redes sociales pues termina saturando al usuario. Además, muchas personas si quieren compartir algo, lo copia y lo pega en Facebook o Twitter o en cualquier otra red social, no necesitan que se les esté obligando con tanto botones.

8. Uso excesivo de tipografías

Mal uso de la tipografía

Mal uso de la tipografía

Debemos tener cuidado de no usar muchas tipografías en nuestro sitio, pues pude confundir, distraer o marear al lector. Si nuestro objetivo es que se enfoque en el contenido pues el resultado va ser todo lo contrario. Lo recomendable es usar 2 máximo 3 tipografías por páginas.

9. Evitar el efecto Parallax

Efecto Parallax

Efecto Parallax

Este es un efecto que está de moda y funciona con sitios que tiene muy poco contenido o en sitios promocionales, sin embargo:

  • Sorprende solo al principio, pero hace la página más lenta, difícil de leer y navegar
  • Distrae mucho y hace que pierda el enfoque en el contenido que es lo más importante

10. Fotos genéricas

Imágenes comunes

Imágenes comunes

En la web hay muchas fotos genéricas o gratis que todos usan en sus sitios web, por tal razón, debemos evitar de poner en nuestro sitio esas fotos pues hará que nuestra web parezca uno más del montón.

Si quiere destacar lo profesional que es su negocio o empresa, podemos buscar buenas fotos que no sean tan comunes de banco de imágenes gratuitos o hacer la inversión de comprar buenas imágenes, en algunos bancos que no sean tan costosos.


 Si usamos uno de estos patrones, la idea es plantearnos cómo podemos mejorar y ser más profesionales a la hora de hacer nuestros diseños web.

Estos son tan solo alguno pero hay muchos más, si conoces alguno y quieres compartirlo puedes dejar tu comentario.

 No olviden seguirme en twitter @juksoto y hasta la próxima.

Etiquetas:

"Trackback" Enlace desde tu web.

Deja tu comentario

¿Necesitas asesoría en algún proyecto o trabajo?

Muestrános tu trabajo

¿Quieres aportar tus conocimientos a la comunidad?

¡Haz parte de Cubemedia!
Ayudamos a demás profesionales

¿Te ha servido algun artículo?
Ayudános a que llegue a más personas.
Compartir en