Tenga cuidado al usar estas tendencias populares de diseño web

Como la mayoría de los productos culturales, el diseño web tiene su propio zeitgeist. Cada año ve una nueva cosecha de componentes, características y tendencias de diseño populares. Las actitudes cambian rápidamente, especialmente con el rápido ritmo de los nuevos desarrollos tecnológicos.

Algunas tendencias de diseño web no resisten el paso del tiempo. Debe poner tendencias que impidan la usabilidad o disuadan a los visitantes del sitio en el pasado. Los diseñadores deben tener cuidado al emplear las siguientes tendencias que pueden alienar a las mismas personas con las que están tratando de involucrar.

No hay suficiente espacio negativo

El espacio negativo juega un papel importante, pero a menudo ignorado, en la usabilidad. A veces llamado espacio en blanco, es el espacio alrededor y entre una imagen o elemento de diseño. Al igual que en el arte, el espacio negativo en el diseño web tiene su propio poder como elemento artístico. Desafortunadamente, algunos consideran que el espacio negativo es un espacio desperdiciado, pero al igual que las paredes de los museos necesitan espacio entre el arte, también lo necesitan los bloques de diseño web. El espacio negativo hace que el contenido de su sitio sea fácil de leer y encontrar.

Los diseñadores web harían bien en seguir el consejo de Coco Chanel sobre cómo menos es más: "antes de salir de casa, mírate en el espejo y quítate un accesorio". Los diseñadores web deben considerar cómo los elementos CSS y HTML no tienen espacios vacíos de manera predeterminada antes de comenzar a agregar activos adicionales.

Combine este problema con el contenido de alta calidad que necesita cualquier buen sitio web, y el problema es obvio: un sitio web con demasiados accesorios y demasiados lugares para buscar. Cuando hay suficiente espacio alrededor de cada elemento, los usuarios verán tu contenido y tus CTA se destacarán.

Hay un par de soluciones fáciles para un sitio abarrotado. Primero, use la capacidad infinita del desplazamiento vertical. Cuando su navegación superior es clara, tener otros elementos secundarios debajo del pliegue es perfectamente aceptable. Cuando su sitio es inicialmente fácil de navegar, a los usuarios no les importará buscar más información. En segundo lugar, (y hablaremos más sobre tipografía más adelante) tenga cuidado con los tamaños de fuente. Demasiado grande ocupa espacio y puede leerse agresivamente, como un correo electrónico de su jefe en mayúsculas. Es un equilibrio: encuentre una fuente que no abrume pero que aún así llame la atención.

Menús de hamburguesas

Una de las tendencias de diseño web más destacadas de los últimos años ha sido el menú de hamburguesas. Esta tendencia surgió, en parte, debido a un aumento repentino de usuarios que acceden a sitios web en dispositivos móviles. El objetivo del menú de hamburguesas es ocultar la navegación del menú para que no abarrote el espacio principal de una página. Los usuarios reconocen los iconos y normalmente no tienen problemas para encontrar el menú completo. Es una buena idea, si la gente sabe lo que quiere antes de llegar allí.

El problema surge cuando un sitio depende de que un usuario descubra contenido orgánicamente. Como dice Luke Wrobleski, “lo obvio siempre gana”. Y es obvio: mayor visibilidad significa mayor uso. Considere el ejemplo de Facebook. Cuando el medio de comunicación social pasó de un menú de hamburguesas superior a una barra de pestañas inferior en su aplicación iOS, la participación de los usuarios se disparó, al igual que una mayor satisfacción del usuario, mayores ingresos y velocidad (y su percepción).

Limitar la cantidad de otros contenidos que los usuarios descubrirán naturalmente es un juego peligroso. Al ocultar categorías, los visitantes no están expuestos a las opciones de inmediato.

Los menús de hamburguesas son especialmente perjudiciales para los sitios de comercio electrónico, donde las empresas dependen de la exposición de los usuarios a los productos. Cuando se requiere que los usuarios abran el menú, es posible que se pierdan los aspectos más obvios e importantes de su negocio. Y si su negocio depende de que los lectores vean un feed RSS, entonces los menús de hamburguesas deben evitarse por completo; afectan negativamente a los sitios de noticias que dependen de que los lectores puedan ver temas relacionados y otros titulares actuales.

Carruseles de portada

Los carruseles de portada son omnipresentes en este momento, y puede verlos en sitios, desde páginas de pequeñas empresas hasta grandes corporaciones. Los diseñadores pueden sentirse atraídos por los carruseles porque crean una economía visual y brindan mucha información a través de una función.

Si su empresa todavía está tratando de dar a conocer su nombre, use los carruseles con precaución. Los carruseles hacen que sea más difícil para las personas encontrar su página y pueden afectar negativamente la optimización de motores de búsqueda (SEO) porque generalmente significan menos contenido en el cuerpo de la página. Menos texto en la página significa menos metainformación para que Google la encuentre.

Sin embargo, existen soluciones alternativas, como hacer un punto para agregar texto a la página en sí, pero esto socava el punto de usar un carrusel para la economía visual. Los carruseles también pueden causar importantes problemas de accesibilidad en un sitio. Son conocidos por ralentizar el tiempo de carga y, a menudo, usan JavaScript, lo que puede causar problemas de rendimiento.

Los carruseles no solo hacen que un sitio sea menos accesible, sino que no atraen con éxito a los visitantes que pueden acceder al sitio. Un estudio de 2013 encontró que aproximadamente el 1% de los visitantes del sitio hicieron clic en un carrusel, dependiendo de si el carrusel se reenviaba de forma automática o manual.

Y si tenemos en cuenta los consejos que ofrece Wroblewski sobre los menús de hamburguesas, el problema es el mismo con los carruseles: no son obvios. En el estudio anterior, el 83 % del 1 % que hizo clic, hizo clic en la primera imagen. ¿Qué significa eso para las otras cuatro imágenes con las que espera atrapar a los usuarios? No obtienen ningún kilometraje y hacen poco para promover el compromiso.

Wroblewski usa el diseño de carrusel de PJ McCormick en Amazon como un ejemplo que realmente funciona. Las imágenes se dividen en segmentos y cuando el usuario se desplaza sobre una sección en particular, se convierte en la imagen del carrusel, lo que hace evidente que los usuarios pueden hacer clic allí para encontrar lo que buscan.

ventanas emergentes

Los menús desplegables pueden ser complicados de operar incluso para los usuarios más expertos, agregue esa complejidad a la pantalla pequeña y es una pesadilla para la navegación. Los controles del menú emergente, por otro lado, ofrecen una lista contenida de opciones de menú que se pueden desplazar fácilmente independientemente de la agudeza o el ritmo del usuario. El iPhone de Apple es un buen ejemplo de esto (arrastrar, deslizar o empujar), el gran objetivo y las opciones indulgentes facilitan el control.

Cuando se hace bien, las ventanas emergentes son excelentes para entradas compuestas (entradas para fechas, alturas, pesos) y hacen que el proceso sea mucho más ágil.

Por ejemplo, en lugar de tres opciones para ingresar una fecha (día, mes y año), un solo campo de fecha puede abrir un conjunto de menús emergentes que permiten a los usuarios desplazarse por tres listas a la vez para ingresar la fecha correcta. Esa solución simple puede disminuir el tiempo de entrada junto con la impaciencia del usuario.

Combinación de desplazamiento infinito con contenido de pie de página

El desplazamiento infinito puede ser una herramienta de diseño útil. La carga continua y sin esfuerzo de contenido puede producir una experiencia de usuario satisfactoria. Sitios como Pinterest utilizan el desplazamiento infinito con excelentes resultados y son parcialmente responsables de mantenerlo a la moda. Aunque el desplazamiento vertical ha sido un gran éxito para ciertas aplicaciones, el desplazamiento horizontal todavía confunde a muchos usuarios. A menudo ni siquiera se dan cuenta de que es una opción. Si el contenido parece terminar, también quedarán perplejos.

El desplazamiento infinito se convierte en un problema cuando un sitio también tiene un pie de página con contenido al que los usuarios pueden querer acceder. Los usuarios se desplazarán hacia abajo y hacia abajo y no podrán alcanzar el pie de página. Los usuarios inteligentes de dispositivos móviles se darán cuenta de esto, pero si los frustra, es posible que no lo intenten. Además de ser obvio, la navegación debe ser fácil.

Pantallas de carga lenta

La razón número uno, por abrumadora mayoría, por la que los usuarios abandonan un sitio es el tiempo de carga lento. En las encuestas, aproximadamente la mitad de los usuarios dicen que no esperarán más de 10 segundos para que se cargue una página. A medida que nos hemos acostumbrado a conexiones y dispositivos de Internet más rápidos, las personas esperan que las páginas se carguen casi al instante. Cuanto más tarde una pantalla en cargarse, es más probable que un usuario se vaya.

Los usuarios no deberían cargar con la culpa de esto, la tecnología ha simplificado lo suficiente nuestras experiencias como para que se haya convertido en una expectativa. Cuando esté equilibrando contenido complicado que puede atascar su tiempo de carga, considere si importará si nadie lo ve. Los usuarios móviles no están sentados tomando café con leche mientras revisan su sitio web: están en movimiento y esperan que su experiencia móvil sea igual de rápida.

Tipografía innecesariamente complicada

Con la variedad de tipos de letra disponibles en la actualidad, los diseñadores web pueden verse tentados a utilizar varias fuentes en una sola página. Hay una pauta tipográfica citada con frecuencia que dice que uno nunca debe usar más de dos o tres fuentes en un solo documento.

Si bien puede haber circunstancias que justifiquen varias fuentes, por lo general es mejor centrarse en una entrega de información limpia y clara. Wroblewski ofrece sus notas sobre las mejores prácticas tipográficas de Tim Brown. Uno de los elementos más importantes para la tipografía es el equilibrio: el equilibrio en tamaño, interlineado y medida mejora la legibilidad y el atractivo estético. ¿De qué sirve una fuente si no es para ser leída? Ocultar la claridad del diseño es contrario a la intuición y no aumentará el número de lectores.

Elegir una o dos fuentes crea una apariencia unificada y ayuda a los usuarios a identificar mejor una marca. Recuerde, el objetivo es involucrar a los usuarios. Múltiples fuentes en demasiados tamaños hacen que un sitio sea difícil de leer cómodamente. Si el texto es ilegible, nadie permanecerá en la página por mucho tiempo.

Elementos flotantes

Los elementos flotantes pueden ser una excelente manera de captar la atención de un usuario, pero si no se sincronizan adecuadamente, pueden alienar a sus usuarios al bloquear parte de la página y distraerlos de lo que quieren ver. Casi garantiza que no se comprometerán con un sitio. Los elementos flotantes son especialmente frustrantes para los usuarios móviles que intentan acceder a un sitio en una pantalla más pequeña.

Además, los elementos flotantes a menudo no funcionan según lo previsto, se abren incluso cuando están cerrados y flotan sobre funciones importantes de la página. Cuanto más complicada se vuelve la experiencia del usuario, es menos probable que continúe usando el sitio.

Desplazamiento de paralaje

El desplazamiento de paralaje no es necesariamente una mala elección de diseño y se ha utilizado con gran eficacia en muchas campañas de marketing. Ofrece una nueva opción para que los sitios se diferencien y recientemente ha ganado popularidad.

Viene con algunos inconvenientes. Al igual que con los carruseles, puede afectar negativamente al SEO porque hay menos contenido para rastrear en los motores de búsqueda. El desplazamiento Parallax tampoco es una buena opción de diseño para sitios a los que se debe acceder desde dispositivos móviles. Debido a que se basa en JavaScript y muchos gráficos, puede hacer que una página se cargue muy lentamente, lo que aumenta la probabilidad de que un usuario se impaciente y se vaya antes de que se cargue la página.

Aproveche al máximo las tendencias

Si bien definitivamente existen aplicaciones apropiadas para todas estas tendencias, los diseñadores web deben pensar detenidamente antes de decidirse a utilizarlas. La mejor regla para cualquier diseñador es dar más peso a la funcionalidad y la experiencia del usuario que a la tendencia fugaz. Tenga en cuenta el consejo de Luke Wroblewski con cualquier diseño y sea obvio. No importa cuán bueno sea el contenido, si está oculto, no sirve para nada.