A grandes rasgos, el diseño web continúa la dinámica de los últimos años: una creciente focalización en los terminales móviles (diseño web responsivo), el contenido fácil de consumir y las interfaces interactivas que responden a un propósito explícito. Al mismo tiempo, y a medida que el acceso a las nuevas tecnologías va haciéndose más fácil, las innovaciones en el campo de la inteligencia artificial tienen cada vez más influencia en los diseñadores web. En definitiva, 2020 prolonga las tendencias de los años anteriores, de modo que, en lo más esencial, el paisaje no se modifica. Con todo, algunas tendencias apuntan a otra mejora de la experiencia de usuario en las plataformas que ya hoy pretenden diseñar el Internet del mañana. Lee a continuación nuestra selección de tendencias en diseño web para el año 2020.

Tendencia 1: la velocidad y el rendimiento, aún más importantes

Más que una tendencia, se trata de un principio fundamental de las páginas bien diseñadas: la velocidad crece en importancia. Esto se debe en parte a la revolución móvil porque, al fin y al cabo, cualquier administrador web aspira a que su página sea fácilmente accesible desde terminales móviles. Cuanto más rápido se cargan las páginas, mejor experiencia tienen los usuarios. Además, puede observarse hoy que los diseñadores web van prescindiendo de elementos pesados para que sus páginas sean más ágiles, si bien esto ya era así hace diez años.

Muchas otras tendencias en diseño web parten de aquí. Así, el cada vez más popular minimalismo evita los archivos multimedia más pesados a favor de formatos menos exigentes en cuanto a almacenamiento. El éxito de las páginas long scrolling, que presentan la información en una única página que puede deslizarse con el dedo, se debe a que el usuario solo ha de cargar una página, y no varias subpáginas. En la misma línea, el concepto de white space, que también ve aumentada su popularidad, implica la ausencia de elementos superfluos que podrían ralentizar la velocidad de carga de la página.

Conviene no olvidar que el rendimiento de una página web tiene un efecto directo en la experiencia del usuario. Aquí es necesario diferenciar entre el tiempo de carga tal como se percibe y tal como es en la realidad. Los retrasos se convierten en problemáticos cuando el usuario los percibe como tales. Para evitarlo, los diseñadores recurren a las siguientes medidas:

Barras de progreso

Si el usuario ha de esperar, entonces debería al menos saber durante cuánto tiempo. La barra de progreso no acorta el tiempo en que se carga la página, pero si está diseñada de una forma atractiva, puede hacer la espera menos aburrida. El objetivo es evitar que el usuario abandone la página cuando se vea obligado a esperar a que se cargue. Es sabido que el margen de tolerancia del internauta moderno ha ido reduciéndose progresivamente a medida que las conexiones mejoraban.

Cargar primero los elementos más importantes

Las páginas deberían programarse de tal forma que el contenido above the fold, el que se muestra al usuario a primera vista sin necesidad de hacer scroll, se cargue en primer lugar. Si se le muestra este contenido, al usuario no le importa demasiado que el contenido below the fold se cargue más tarde.

JPEG progresivo

Las imágenes que se integran como progressive JPEG no se cargan de arriba abajo como las imágenes baseline, sino que, utilizando el llamado escaneado entrelazado, lo primero que se muestra al usuario es una vista previa en menor calidad que va detallándose poco a poco hasta que se cargan todos los datos de la imagen completa.

En definitiva, lo mismo que vale para los textos, vale también para el contenido visual: ha de ser único, de gran calidad y relevante para el usuario. Asimismo, conviene que se cargue solo cuando el usuario lo abra. Son sobre todo los usuarios de terminales móviles o de conexiones débiles los que más beneficio obtienen de los sitios bien estructurados sin carga superflua de datos.

WebAssembly

Las aplicaciones web se han convertido en un elemento esencial de la experiencia de navegación. Si bien con JavaScript se mejora la experiencia de los usuarios porque les permite interactuar con el sitio web, muchas aplicaciones pueden ver una reducción de su rendimiento. Con WebAssembly (Wasm), se creó no hace mucho un lenguaje que, gracias a la precompilación, se ejecuta rápidamente en el navegador. Si bien el estándar no está todavía tan extendido, los navegadores modernos soportan esta tecnología.

Tendencia 2: trucos CSS

El lenguaje CSS forma parte de la rutina en la creación de una página web. Gracias a las hojas de estilo en cascada se puede dotar a las páginas web de un diseño atractivo. Dado que el lenguaje CSS está en constante desarrollo, los diseñadores web disponen continuamente de nuevas posibilidades para crear sitios web atractivos que se adapten a sus requerimientos. Los últimos avances se centran en la flexibilidad de las páginas web, hecho particularmente importante si se tiene en cuenta a los dispositivos móviles. Y es que las imágenes, junto con el resto de los elementos de una web, deben adaptarse a las diferentes pantallas.

CSS Grid & CSS Flexbox

Desde CCS3, el lenguaje de hojas de estilo en cascada incluye los métodos CSS Grid y CSS Flexbox, que facilitan en gran medida la creación de diseños que se adaptan al tamaño de la pantalla. Con ellos, se delega a un sistema inteligente la distribución y el escalado de elementos, sin cederle el control completo: los diseñadores web pueden, por ejemplo, definir los tamaños máximos y mínimos.

SVG

Aunque el formato de imagen SVG no sea nuevo, cuenta con ventajas cada vez más atractivas: garantiza un tamaño de archivo pequeño, se puede escalar con flexibilidad y puede formatearse con CSS, motivo que lo convierte en una tendencia de diseño web en 2020. Dado que SVG es básicamente un formato de archivo XML, el código fuente (y por lo tanto el propio gráfico) puede modificarse directamente con CSS. Esta combinación permite a los diseñadores web incorporar gráficos en la página web que se adapten a la pantalla utilizada o que incluso los usuarios puedan modificar.

Tendencia 3: las microinteracciones

Las microinteracciones son una novedad en el diseño UX (user experience) con la que algunas interacciones del usuario en la página se acompañan de pequeños efectos de animación. Puede tratarse de un botón “like” que recompensa al usuario con un movimiento o una vibración del teléfono cuando hace clic en él. Para expertos en UX como Dan Saffer, son estos detalles los que conforman la experiencia del usuario.

Tendencia 4: long/infinite scrolling

El paradigma mobile first no afecta solamente al tamaño de las pantallas y a la presentación íntegra del contenido web en diferentes terminales, sino que en el futuro verá aumentar su influencia cada vez más en el contenido en sí. Una de las novedades más significativas en este sentido es el paso del clic al scrolling, ciertamente ninguna novedad, pero que trae consigo conceptos de diseño como el infinite scrolling o el efecto parallax, que siguen cosechando adeptos, de modo que también dará que hablar en 2020.

Infinite scrolling

El desplazamiento infinito permite al usuario descubrir contenido nuevo deslizándose por la página en lugar de haciendo clic. Cuando se alcanza el final de un fragmento, se carga el siguiente a continuación. Los blogs y las redes sociales, como Facebook, Instagram, Reddit o Quora utilizan este método para presentar al usuario el contenido en un hilo informativo continuo. También desempeñará un papel en el futuro.

El infinite scrolling es una técnica adecuada sobre todo para páginas con una oferta informativa muy amplia. Mientras que paginar un blog con cien o doscientas publicaciones no supone un gran problema, estructurar así un proyecto con un volumen de texto en constante crecimiento no tiene mucho sentido –es poco probable que un usuario quiera leer específicamente la página 812 de un total de 5782 subpáginas. El scrolling infinito se implementa con elaborados algoritmos que filtran la oferta informativa y presentan al usuario los textos más relevantes en primer lugar.

Pero implementarlo supone también cuidar aspectos de SEO. Pese a que Google tuvo sus problemas iniciales con las páginas que lo aplicaban, hoy su utilización no acarrea ningún riesgo gracias a las recomendaciones que el propio buscador ofrece a los desarrolladores. En cualquier caso, no olvides estos cuatro factores:

Un URL individual para cada subpágina.

Evitar el solapamiento de contenido.

Los elementos que busca el usuario deben encontrarse fácilmente.

Tiempo de carga adecuado.

Efecto parallax

El parallax scrolling tampoco es la última tendencia en diseño web, pero va a continuar estando en boga. El efecto de paralaje viene utilizándose en las páginas más modernas desde hace algunos años, proporcionando un efecto de profundidad al hacer que las distintas capas que la conforman se muevan a diferente velocidad. En las mejores implementaciones, este efecto se acompaña de elementos que motivan al usuario a emprender alguna acción. Esto hace que haga tan buena pareja con el storytelling interactivo. La página Every Last Drop es un buen ejemplo para entender bien este efecto.

Tendencia 5: experiencia de usuario personalizada

La presentación del contenido en función del target se integra en los principios fundamentales del diseño web moderno. Con la vista puesta sobre todo en el eCommerce, tanto el contenido que se selecciona como la forma de presentarlo visualmente debería ajustarse a la idiosincrasia de su público objetivo. Si antes se pensaba en grupos abstractos de personas, en 2020 la experiencia individual del usuario copará la atención.

Hoy en día la función “Esto también podría gustarle” no puede faltar en ninguna tienda online, pero ya hay proveedores como Spotify o Netflix que van un paso más allá diseñando la oferta informativa, los productos y las formas de presentación de acuerdo al individuo, de tal modo que difícilmente dos usuarios verán la misma selección de contenido individual, incluso ya en la página de inicio.

Tendencia 6: WebXR

La mayoría de los usuarios conocen ya la realidad virtual (RV) en el sector del entretenimiento. Sobre todo, la industria de videojuegos está apostando por esta tecnología, invirtiendo en el desarrollo de gafas de realidad virtual y de los juegos correspondientes. Por otra parte, en el sector de los smartphones cada vez hay más aplicaciones con Realidad Aumentada (AR), una tecnología que fusiona el entorno real con la información digital del dispositivo. Ahora, la World Wide Web también está dando este paso. Con WebXR, W3C ha creado una interfaz que sustituye a la actual tecnología WebVR y permite que los navegadores muestren contenidos con RV y RA.

Tendencia 7: los chatbots han venido para quedarse

Los programas que ejecuten tareas de comunicación no son ninguna novedad. Los chatbots han salido del campo de la investigación de la inteligencia artificial para integrarse ya, a día de hoy, en páginas corporativas o tiendas online. Generalmente, se trata de una pequeña ventana emergente que lee las consultas de los usuarios y genera respuestas automáticas que pueden personalizarse empleando algoritmos de aprendizaje automático. Así, es posible dar la impresión al usuario de que se trata de un empleado de carne y hueso el que le está ofreciendo soporte. Suelen implementarse como asistentes en la venta virtual o como alternativa a las clásicas FAQ (preguntas habituales).

Tendencia 8: interfaces limpias y ordenadas

Es fácil observar en las tendencias en diseño web que no suele pasar mucho tiempo antes de que un diseño inteligente encuentre imitadores. Las interfaces de usuario de muchas páginas y web apps se orientan cada vez más en su diseño y composición del contenido a las prácticas que se han comprobado eficaces. Aquí, la usabilidad influye siempre en el diseño.

Es difícil equivocarse con una interfaz de usuario ordenada y clara. Del mismo modo que también cabe estar tranquilo si se confía en el consolidado formato de portal para páginas con mucho contenido o en el estilo de diseño típico de los blogs para páginas más pequeñas. Pese a todo, hay dos tendencias recientes en diseño web con las que también nos toparemos a menudo en 2020.

Tendencia 9: dark mode

El dark mode no solo es una tendencia en el diseño la web,  se aplica sobre todo en el sector software. Cada vez más usuarios consideran importante utilizar una alternativa a las pantallas con luz radiante, especialmente molestas en los espacios poco iluminados. Mientras que en muchos programas y aplicaciones se puede cambiar al modo de pantalla oscuro, la mayoría de los sitios web siguen optando por el color blanco.