0

Problemas con las tendencias de diseño web más populares

Esta es la traducción de un interesante artículo publicado en InspiredMag: “Common problems with popular designs”. El autor del mismo es Ryan Gavin, y nos pareció bueno traducirlo y compartirlo con nuestra comunidad de usuarios. Esperamos les sea de utilidad.

Primero lo primero: No voy a criticar los diseños populares, pero sí voy a resaltar algunos aspectos negativos comunes de ellos que pueden ser arreglados o, al menos, abordados.

Todas las páginas Web deberían estar enfocadas, principalmente, en la experiencia de usuario. El usuario puede ser un cliente en casa, sentado frente a su computadora, en pijamas, o puede ser el administrador de contenido que actualiza la página web con nuevas publicaciones en un blog. El diseño y la página web no tienen sentido si no se piensa en el usuario. Pueden parecer bonitos, pero no tienen un propósito práctico. ¿Cómo un diseño puede lucir fantástico y a la vez ser malo? Bueno, eso depende de tu página web y lo que brindas a los usuarios. En la actualidad, existen muchos diseños populares que tienen problemas comunes que los diseñadores simplemente no consideran.

Tendencias de Diseño Populares

Existen varios problemas relacionados a las tendencias de diseño, pero voy a resaltar 3 tendencias:

  • Desplazamiento Infinito (Infinite Scrolling)
  • Desplazamiento Parallax
  • Diseños “móvil primero” (Mobile First)

Problemas con el Desplazamiento Infinito

El desplazamiento infinito ocurre cuando una página carga contenido continuamente mientras te desplazas hacia abajo de la página. Para las páginas cuya finalidad es presentar imágenes de trabajos previos, este puede ser una herramienta que deban considerar; sin embargo, existen dificultades con el desplazamiento infinito que muchos diseñadores no consideran. Estas pueden ser:

Pie de Página

Este es un elemento crucial de tu página web que muchas veces es olvidado durante un rediseño a gran escala. Desafortunadamente, los diseñadores Web colocan enlaces hacia ciertas páginas como política de privacidad y mapa de sitio en el pie de página, los cuales no se podrán acceder después de implementar las funciones de desplazamiento infinito.

La solución: Tienes algunas opciones para arreglar esto. En primer lugar, haz que el pie de página se mantenga con el usuario al momento que empiece a desplazarse. La mayoría de las páginas web que tienen la opción de desplazamiento infinito hacen que el encabezado esté siempre visible cuando el usuario se desplaza. Esto puede causar desorden en la pantalla. Una opción es remover el contenido del pie de página enteramente. Considera una barra lateral como una opción para colocar los enlaces del pie de página, como el de política de privacidad.

Photopin muestra cómo se puede solucionar este problema con un sencillo cuadro de búsqueda y una barra “arriba” que te lleva a la parte superior de la página.

photo-pin

Desplazamiento hacia atrás

Toma esto como un ejemplo: una página implementa un blog (toda página debe hacerlo) y decide utilizar el desplazamiento infinito para mantener a los usuarios en la página para buscar otras publicaciones. En teoría tiene sentido, una vez que lleguen al final del blog, el usuarios puede pensar “Bueno, no tienen lo que estoy buscando” y se van a la siguiente página. Con un desplazamiento infinito, probablemente se queden más tiempo en una página. Ahora considera un lector asiduo que está visitando tu página en búsqueda de un artículo que escribiste recientemente. El desplazamiento hacia atrás le será molesto

La solución: Un sencillo botón “ir arriba” resolvería este problema rápidamente; si el usuario quisiera ir a la mitad de la página, ese es el problema. En casos como este, se debe aplicar una función de búsqueda en la cabecera y que sigua al usuario mientras se desplaza. En la mayoría de los casos, este problema es inevitable a menos que el usuario sepa algunas de las palabras que usaste en una de tus publicaciones.

El diario The Daily Beast maneja este problema de una bonita manera con un desplazamiento infinito que no solo mide el progreso de la página, sino que también permite hacer clic en distintos artículos en la barra derecha de navegación. Además de eso, para el fácil manejo del SEO, las etiquetas de títulos y los URL cambian mientras te desplazas hacia abajo para ver nuevos artículos. Como puedes ver en la imagen de abajo, la lista Read This list no solo muestra el progreso de artículos que podrían ser de tu interés, sino también muestra el avance de lectura de cada uno de ellos.

Imagen 02

¿Mucho contenido?

Sí, existe tal cosa. En una página Web dedicada al comercio electrónico, por ejemplo, puedes ver una lista de 300 monitores de computadora. Si tienes un monitor en mente, definitivamente será un dolor de cabeza encontrarlo sin filtros de búsqueda. Se puede decir lo mismo para cualquier tipo de listas en una  página Web, como un directorio cuando estás buscando el nombre de una compañía en particular.

La solución: Una opción en el desplazamiento infinito para ir de “encendido” a “apagado” en las páginas de  comercio electrónico que tienes numerosas listas de productos es una buena idea. El botón “Leer más” es una opción popular que funciona perfectamente. Algunos usuarios prefieren las clásicas opciones de búsqueda. Otra opción útil es incluir la mayor cantidad de filtros posibles, incluyendo marcas, rango de precios, calificaciones y cualquier otra especificación relacionada a tu producto.

Problemas con el Desplazamiento Parallax

Los diseño Parallax han aumentado su popularidad durante los últimos 2 años. Las páginas Web son absolutamente bellas y ni hablar de su funcionalidad. Existe un error desde la perspectiva del usuario y eso puede atraer un visitante leal. No quiere decir que las páginas web con desplazamiento parallax sean perfectas. Existen algunos problemas con este estilo de diseño:

SEO

Existe un poco de debate acerca de si el desplazamiento verdaderamente afecta el SEO que vale la pena mencionar. En primer lugar, esta teoría se produjo cuando un estudio que mostraba que las páginas web con diseño parallax estaban en los puestos más bajos por sus términos de búsquedas fundamentales. Date cuenta de que existen muchas razones por las que una página web puede clasificarse pobremente y que el diseño web es simplemente un aspecto (no obstante, una gran aspecto en algunos casos) del SEO. La pieza más importante y que muchos diseñadores no le brindan mucha atención es la legibilidad de un texto en la página. No me refiero a la legibilidad para los seres humanos, sino para los motores de búsqueda. Si tu sitio web parallax es simplemente una página de contenido, imágenes y lindos colores, entonces está bien, solo asegúrate de que tu contenido no sean imágenes. Google no puede leer los textos en imágenes, eso también incluyen las infografías.

La solución: Es simple, solo convierte el contenido en texto. Usa imágenes solo con propósitos de diseño, no de contenido, a menos que estás buscando medios para compartir contenido en redes sociales.

El molesto pie de página

Sí, regresamos al problema del pie de página. La mayoría de páginas web parallax no tienen fin, lo que puede ser entretenido (y en mi experiencia, lo es), pero eso no siempre es el caso. De hecho, algunas personas buscan información al final de la página, lo que no debería ser difícil de encontrar. Si usas el desplazamiento parallax en un sitio Web de una sola página, considera lo que el usuario desea y asegúrate que sea accesible.

La solución: Mira “la solución” para pie de página líneas arriba.

Velocidad de Carga

Como cualquier preocupación entre los diseños que se mueven, con frecuencia se requiere imágenes con movimiento. Este tipo de imágenes toman mayor tiempo de carga y una página parallax que usa muchas imágenes pueden demorarse mucho en cargar y las personas no pueden esperar eso.

La solución: Puedes comprimir las imágenes, reducir el tiempo de respuesta del servidor, ocultar documentos, reducir tus solicitudes HTTP, retirar plugins y extensiones innecesarios.

Imagen 03

Problemas con Diseños dirigidos Móviles

Los diseños responsive ahora son muy comunes y solo existen pocos casos donde no se pueda implementar. No obstante, el diseño responsive no arregla toda la experiencia de usuario, solo redimensiona el tamaño.

El único problema

Existe solo un problema cuando se habla de diseños dirigidos a dispositivos móviles. Todo en tu página web, desde las imágenes hasta el texto, puede ser reflejada desde una versión de computadora hasta una versión móvil. Todo es genial, pero ¿de verdad deseas eso para tu versión de computadora? Sí, debes diseñar para dispositivos móviles, pero todos los aspectos de tu diseño móvil no se pueden trasladar a tu versión web perfectamente.

¿A qué aspecto me refiero? Tu contenido. Desde el largo hasta su organización, todo es simplemente apagado. El problema es simple: tu contenido no se aprecia correctamente en tu versión de computadora. En realidad se ve terrible. El primer problema es el largo del contenido. Lo que en un dispositivo móvil se ve largo, en la versión de computadora se ve corto.

La solución: Tenemos dos opciones. La primera y menos eficiente es crear 2 páginas Web por separado: una para la versión móvil y la otra para la versión de computadora. Esto resolvería la mayoría de tus problemas, excepto que tendrías que administrar dos páginas y no solo una. La mejor opción es simplificar tu diseño y el contenido. Organiza el contenido y añade imágenes para promover tu punto o vender tu producto. A las personas no solo les gusta ver imágenes, también les gusta tener un poco de espacio libre en la versión de computadora.

Imagen 04

Conclusión

Con frecuencia, los diseñadores web implementan diseños sin tomar consciencia de todas las consecuencias del estilo que escogen. En muchos casos, el diseño web que escoges puede devastar la compañía al causar una mala experiencia de usuario (UX), que resulta en un pobre rendimiento del sitio web. Asegúrate de revisar todos los pros y contras del diseño y pruébalo con usuarios y pide retroalimentación antes de crear este estilo de diseño vivo.


Traducción  del original realizada por el equipo de Staff Creativa, Agencia Digital en Lima, Perú.


Tags:
Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /web/htdocs/www.uxinperu.com/home/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273