Cómo crear microanimaciones de desplazamiento y carga
Jakob Nielsen
Jakob Nielsen es un consultor danés de usabilidad web y fundador del «Nielsen Norman group». Tiene un doctorado en interacción humano-computadora de la Universidad Técnica de Dinamarca en Copenhague.
(Wikipedia)
(Wikipedia)
Uno de los principios de usabilidad de Jakob Nielsen dice: "El sistema siempre debe mantener a los usuarios informados sobre lo que está sucediendo".
Una forma de ayudar a su sitio web a cumplir con esta regla es proporcionarle funciones de micro animación. Hemos añadido dos tipos de animación:
1. Un indicador de carga de página de un color personalizable que dice: "Todo está bien, la página se está cargando".
2. Un indicador de desplazamiento que le dice al usuario qué parte de la página está viendo actualmente.
1. Un indicador de carga de página de un color personalizable que dice: "Todo está bien, la página se está cargando".
2. Un indicador de desplazamiento que le dice al usuario qué parte de la página está viendo actualmente.
1
Cómo agregar una animación e indicador de carga
Agregue un bloque T228 de la categoría "Otros" a la parte superior de la página.
Así es como se ve la carga de la página sin una animación de carga:
La carga de contenido será más fluida después de agregar ese bloque:
Seleccione la casilla de verificación "Mostrar un indicador de carga" y elija un color de fondo del indicador de carga en el panel Configuración del bloque.
Así es como se ve la carga de la página después de agregar un indicador de carga:
Este indicador no se muestra en Safari. Safari tiene su propio indicador de carga de páginas.
2
Cómo agregar una animación de desplazamiento
Agregue un bloque T333 de la categoría "Otros" a la parte superior de la página.
Especifique el color y la altura de la barra de progreso en el panel Configuración del bloque.
Especifique el color y la altura de la barra de progreso en el panel Configuración del bloque.
