Cómo crear microanimaciones de desplazamiento y carga

Jakob Nielsen

Jakob Nielsen es un consultor danés de usabilidad web y fundador del "grupo Nielsen Norman". Es doctor en interacción persona-ordenador por la Universidad Técnica de Dinamarca, en Copenhague.

(Wikipedia)

Uno de los principios de usabilidad de Jakob Nielsen dice: "El sistema debe mantener siempre informados a los usuarios sobre lo que está pasando".

Una forma de ayudar a que tu sitio web se ajuste a esta regla es dotarlo de funciones de microanimación. Hemos añadido dos tipos de animación:
1. Un indicador de carga de página de un color personalizable que dice: "Todo va bien, la página se está cargando".
2. Un indicador de desplazamiento que dice al usuario qué parte de la página está viendo en ese momento.

1

Cómo añadir una animación de carga y un indicador

Añade un bloque T228 de la categoría "Otros" a la parte superior de la página.

Este es el aspecto de la carga de la página sin animación de carga:

La carga del contenido será más fluida después de añadir ese bloque:

Seleccione la casilla "Mostrar un indicador de carga" y elija un color de fondo para el indicador de carga en el panel Configuración del bloque.

Este es el aspecto de la carga de la página después de añadir un indicador de carga:

Este indicador no aparece en Safari. Safari tiene su propio indicador de carga de página.

2

Cómo añadir una animación de desplazamiento

Añade un bloque T333 de la categoría "Otros" a la parte superior de la página.
Especifica el color y la altura de la barra de progreso en el panel de Configuración del bloque.