¿Valen la pena todas las tendencias? Los 5 errores de UX más comunes que cometen los diseñadores web

“La elegancia se logra cuando se ha desechado todo lo superfluo y el ser humano descubre la sencillez y la concentración: cuanto más sencilla y sobria sea la postura, más bella será.” -Paulo Coelho

La misión de un diseñador web es crear experiencias de usuario atractivas, ayudar a los visitantes del sitio a realizar tareas y aumentar las conversiones. En el proceso, a menudo solo se enfocan en la estética, toman atajos y terminan confiando en varios patrones y tendencias de diseño comunes. El peligro de esto es que pueden desviarse de las tendencias populares y, en consecuencia, se cometen errores comunes de UX porque las tendencias se implementan de manera inapropiada.

Cuando se trata de la web, la gente no quiere aprender cosas, quiere hacer cosas. Hay muchos ejemplos en la web en los que los diseñadores optaron por centrarse solo en el atractivo visual y, al hacerlo, sacrificaron la usabilidad. Asumieron que un "momento asombroso" que impulsó el diseño sería lo suficientemente poderoso en sí mismo para atraer al usuario. Pero, lamentablemente, los usuarios tienen dificultades para comprender la interfaz de usuario, tienen dificultades genuinas para usar el sitio y las tasas de rebote del sitio se han disparado.

Como dijo Kate Rutter, "lo feo pero útil triunfa sobre lo bonito pero sin sentido". La clave para usar patrones y tendencias de diseño web de manera efectiva es encontrar un equilibrio entre lo que se ve estéticamente agradable y donde agregan valor.

Veamos algunos errores comunes de UX.

Error común de UX de diseño web n.° 1: encabezados grandes y fijos

Cada vez se pueden ver más encabezados adhesivos altos en los sitios web. “Bloques de marca” y menús de navegación que tienen una posición fija y ocupan una cantidad importante de espacio. Permanecen pegados a la parte superior de la ventana del navegador (el "encabezado fijo") y, a menudo, bloquean el contenido a medida que se desplaza por debajo de ellos.

Algunos encabezados en sitios web de grandes marcas tienen más de 150 píxeles de altura. ¿Dónde está su valor? Los elementos fijos, como los encabezados fijos, pueden tener beneficios reales, pero los diseñadores web deben tener cuidado al usarlos; hay varios problemas importantes de UX a considerar.

El encabezado Sticky Nav puede ser demasiado grande para su comodidad

Si ya se ha tomado la decisión de usar un encabezado de navegación fijo, es mejor probarlo con los usuarios. Es un error común de UX exagerar y llenar el encabezado de navegación fijo con contenido. Con un encabezado fijo, la navegación debería seguir siendo cómoda para los visitantes. No encontrar el equilibrio adecuado puede resultar en dejar una pequeña cantidad de espacio para el contenido principal y una experiencia de sitio sofocante y claustrofóbica para los visitantes.

A veces, hay una solución simple con CSS: al hacer que el encabezado adhesivo sea ligeramente transparente, las personas aún pueden ver el contenido a través de él mientras se desplazan, lo que hace que el área de contenido se sienta más sustancial.

Aquí hay un ejemplo de un encabezado alto y adhesivo: la página de perfil de jugador de la ATP en Roger Federer.

¡El encabezado adhesivo de este sitio tiene una altura de más de 180 px! Eso es más del 30% de la altura total de la página en algunas computadoras portátiles: una experiencia de usuario deficiente que se puede evitar.

No considerar el problema de UX del encabezado Sticky Nav en dispositivos móviles

Algunas personas pueden estar usando pantallas de computadora grandes y de alta resolución donde un encabezado de navegación fijo podría acelerar las interacciones, pero ¿qué pasa con los dispositivos móviles? Sin duda, un número significativo de visitantes del sitio estaría accediendo al sitio desde un dispositivo móvil, por lo que un encabezado fijo puede no ser la mejor idea. Afortunadamente, las técnicas de diseño receptivo hacen posible diseñar diferentes soluciones para diferentes plataformas y mantener el encabezado de navegación fijo (juego de palabras) para los navegadores de escritorio.

El sitio Coffee with a Cop también tiene un encabezado fijo, pero mucho más pequeño: menos de 80 píxeles de alto.

La navegación de encabezado, en este caso, es posiblemente la solución adecuada para pantallas de alta resolución, ya que permite una navegación más eficiente. En pantallas de menor resolución, el encabezado también es fijo pero ocupa una cantidad considerable de espacio. Una excelente alternativa a un encabezado de navegación fijo en el móvil es el siempre presente menú de hamburguesas. Aunque este patrón no es un solucionador de problemas universal, libera una cantidad significativa de espacio.

Error común de UX de diseño web n.º 2: fuentes finas y ligeras

En estos días, las fuentes delgadas y livianas son omnipresentes en numerosas aplicaciones móviles y sitios web. Con el avance de la tecnología de pantalla y el renderizado mejorado, muchos diseñadores las están usando porque son elegantes, limpias y modernas. Sin embargo, los tipos de letra delgados pueden causar problemas de usabilidad y, por lo tanto, obstaculizar la experiencia de usuario.

El objetivo de todo el texto de un sitio web es que sea legible, y las letras delgadas pueden afectar seriamente la legibilidad. No todos los visitantes verán un sitio en una pantalla que represente bien el tipo delgado. Algunos tipos de luz son difíciles de leer en un iPhone o iPad con pantalla Retina.

Sobre todo, el texto debe ser legible. Si los usuarios no pueden leer las palabras en su aplicación, no importa cuán hermosa sea la tipografía.

Directrices de la interfaz humana de Apple

Apple se refiere a las aplicaciones móviles, pero el mismo principio se aplica a los sitios web. La legibilidad es obligatoria, no opcional para una buena usabilidad. No tiene sentido poner contenido en un sitio web si es ilegible.

Aquí hay algunos errores comunes de UX a considerar antes de usar el tipo delgado:

Usar fuentes finas y ligeras porque está de moda

Las fuentes no solo deben verse bien, sino que también deben ser legibles. Para lograr el contraste y la legibilidad adecuados, los diseñadores deben esforzarse por lograr la combinación óptima en sus diseños: tamaño, peso y color.

Es mejor probar el sitio en varios dispositivos y tamaños de pantalla para asegurarse de que todo el texto del sitio sea legible.

Lo que nos lleva al siguiente error común de UX:

No probar la legibilidad del texto en todos los dispositivos principales

Los tipos delgados y livianos pueden verse bien en los monitores caros y bien ajustados de muchos diseñadores, pero también se debe considerar al usuario promedio que a menudo ve nuestros diseños en pantallas más baratas y deficientes. La mejor práctica es verificar cómo se ven las fuentes en todos los dispositivos principales: computadoras de escritorio, portátiles, tabletas y teléfonos inteligentes.

Por ejemplo, mientras prueba un diseño móvil, haga que los participantes usen el sitio en dispositivos móviles a la luz del día; los usuarios del mundo real no siempre tendrán condiciones perfectas de navegación e iluminación. Si usa una fuente delgada en un sitio web, hay una manera simple de adaptarse a los usuarios móviles: especifique una fuente más gruesa en el dispositivo móvil para una mejor legibilidad.

Diseño web Error común de UX No. 3: Texto de bajo contraste

El uso de elementos de bajo contraste de color también se ha puesto de moda en el diseño moderno de la interfaz de usuario. Surgió de una tendencia de diseño minimalista porque al reducir el contraste en algunas áreas, el diseño parecería "minimalista". Los diseñadores no podían reducir la complejidad de la información que debía presentarse, por lo que jugaron con un bajo contraste en el diseño.

Ya hemos cubierto las fuentes delgadas, pero hay un escollo aún mayor: una combinación de un tipo de letra claro con bajo contraste que dificulta seriamente la UX debido a la pésima legibilidad. Los diseñadores deben hacer todo lo posible para evitar esta trampa de usabilidad.

Bajo contraste de texto en el cuerpo del texto

Cool Springs Financial utiliza una variante delgada de Helvetica para el cuerpo del texto en su sitio web. Si bien se ve elegante y contribuye a una interfaz de usuario estéticamente agradable, es difícil de leer en varias plataformas. Si bien el bajo contraste no es necesariamente malo, puede tener un impacto negativo en la usabilidad de un sitio web al dificultar la lectura del texto.

No probar el contraste de texto

Hay una herramienta ingeniosa para verificar el contraste en la web llamada Colorable que ayudará a los diseñadores a establecer el contraste de texto correcto de acuerdo con las Pautas de accesibilidad del contenido web. Una vez que los diseñadores saben que están utilizando el contraste de texto correcto, pueden ajustar otros colores en su sitio web y realizar pruebas rápidas de múltiples dispositivos/usuarios para asegurarse de que el texto sea legible.

Error n.º 4 de UX común en diseño web: secuestro de desplazamiento

Otra tendencia de alto riesgo que está ganando terreno en la web es el "secuestro de desplazamiento". Los sitios web que implementan esta tendencia toman el control del desplazamiento de la página (generalmente con JavaScript). Cuando las personas lo encuentran, ya no tienen control sobre el desplazamiento de la página y no pueden predecir su comportamiento, lo que puede generar confusión y frustración. Es un experimento arriesgado que podría dañar la usabilidad del sitio web y, en el peor de los casos, inducir la "rabia informática".

Algunos sitios web pueden salirse con la suya con el secuestro de desplazamiento, pero eso no significa que todos puedan hacerlo. Por ejemplo, muchos diseñadores web siguen los sitios de Apple con secuestro de desplazamiento, efectos de paralaje e imágenes de alta resolución de varios productos. Apple tiene su mercado objetivo, un concepto único y contenido exclusivo para su sitio web. Dado que cada sitio tiene problemas únicos, también debe tener soluciones únicas adaptadas a esos problemas.

No probar con usuarios del mundo real

Al tomar prestadas ideas de moda o patrones de interfaz de usuario, es mejor probar el prototipo de un sitio web en usuarios del mundo real para evitar problemas de UX. Una simple prueba de usabilidad revelará si la implementación de un secuestro de desplazamiento, por ejemplo, es factible o no. Sin pruebas, los diseñadores no tienen forma de saber si el secuestro de desplazamiento funcionará, y hacer suposiciones suele ser costoso.

Tumblr, un popular sitio de blogs personales, utiliza el secuestro de desplazamiento en su página de inicio. Si bien hacerlo podría ser arriesgado, es seguro asumir que conocen bien a su público objetivo y la experiencia de usuario genial y moderna que quieren presentar. Cuando los visitantes del sitio comienzan a desplazarse, el desplazamiento se secuestra y las personas pasan a la siguiente sección.

La página de desplazamiento largo se divide en varias secciones que se distinguen por una gran dosis de colores saturados y puntos indicadores prominentes en el lado izquierdo de la ventana. Como resultado, la página de inicio de Tumblr se siente como un gran carrusel vertical sobre el que los visitantes tienen control, en lugar de un sitio web desagradable y experimental con una mente propia.

Diseño web Error común de UX No. 5: carruseles

Los carruseles, una presentación de diapositivas para rotar a través de una variedad de contenido, son muy comunes en la web, especialmente en las páginas de destino y las páginas de inicio. Si bien pueden ser útiles, tienen numerosos problemas de usabilidad y, por lo tanto, califican como otro error común de UX. Según Nielsen Norman Group: " las personas a menudo se desplazan inmediatamente más allá de estas imágenes grandes y se pierden todo el contenido que contienen ". Podría tener un impacto negativo en la UX, ya que es posible que los visitantes no vean contenido valioso en algunas de las diapositivas giratorias.

Los carruseles de sitios web pueden no proporcionar valor a los usuarios

Si se hace bien, un carrusel puede atraer a los usuarios con imágenes grandes y llamativas. El problema es que los carruseles a menudo no agregan ningún valor adicional, sino que simplemente están ahí como decoración y solo se incluyen porque todos los demás los están usando. Una forma de probar si el carrusel de un sitio tiene sentido: escribe tres beneficios que un carrusel proporciona al visitante. Si no se pueden encontrar tres beneficios significativos, no agrega ningún valor.

Las flechas anterior y siguiente tienen baja visibilidad

La información importante en el carrusel de un sitio web podría permanecer oculta si las flechas siguiente y anterior no se pueden detectar. Los controles también deben ser compatibles con tap para dispositivos móviles.

A menudo no hay flechas para controlar el carrusel; solo se incluyen los puntos indicadores de diapositivas para avanzar las diapositivas. Sin embargo, a menudo son de bajo contraste, tienen poca capacidad de detección y carecen de un área lo suficientemente grande en la que se pueda hacer clic o tocar. Los objetivos pequeños en los que se puede hacer clic pueden generar una experiencia de usuario deficiente, un visitante del sitio web frustrado y una salida rápida del sitio web.

Por ejemplo, el sitio web de la Fundación Floresta Longo tiene un carrusel giratorio de imágenes en su página de inicio. Está configurado para reproducción automática y gira a través de cinco fotografías. Las flechas anterior y siguiente, sin embargo, son pequeñas y transparentes, lo que las hace difíciles de detectar y difíciles de hacer clic. No hay indicadores para la diapositiva en la que se encuentran los visitantes, ni etiquetas para indicar lo que representan las imágenes. Las imágenes no son enlaces y actúan como pura decoración. Si bien este tipo de carrusel puede tener algún valor para atraer al visitante, en general deja mucho que desear.

Conclusión

Las tendencias de diseño web, si no se consideran cuidadosamente y se implementan con precaución, podrían generar varios errores comunes de UX. Los diseñadores de UX deben usar su mejor juicio y no tener miedo de innovar, pero para garantizar una excelente usabilidad del sitio web, les sería útil probar su diseño a fondo con usuarios del mundo real.

En la loca profusión de tendencias de diseño web, las cosas en boga van y vienen. En medio de este caos, el uso equilibrado de la estética, la eficiencia y la usabilidad juega un papel importante para distinguir las tendencias de UX que han demostrado ser las más sólidas y han obtenido la mayor aceptación de los usuarios.

Los diseñadores web pueden idear el esquema de color más genial, la animación de desplazamiento más elegante o los efectos de paralaje más fantásticos, pero si la interacción humana se ve afectada como resultado, la UX será deficiente y la gente seguirá adelante rápidamente. Otro sitio está a solo un clic de distancia.

Lectura adicional en el blog de diseño de Toptal:

• Diseño receptivo: mejores prácticas y consideraciones
• Acercarse al proceso de diseño de sitios web desde el navegador
• Codificación para diseñadores: ¿cuánto debemos saber?
• Mejores prácticas de diseño de interfaz de usuario y errores comunes