Como criar microanimações de rolagem e carregamento
Jakob Nielsen
Jakob Nielsen é um consultor dinamarquês de usabilidade da Web e fundador do "Nielsen Norman group". Ele é Ph.D. em interação humano-computador pela Universidade Técnica da Dinamarca, em Copenhague.
(Wikipedia)
(Wikipedia)
Um dos princípios de usabilidade de Jakob Nielsen diz: "O sistema deve sempre manter os usuários informados sobre o que está acontecendo."
Uma maneira de ajudar seu site a se adequar a essa regra é fornecer recursos de microanimação. Adicionamos dois tipos de animação:
1. Um indicador de carregamento de página com uma cor personalizável dizendo: "Está tudo bem, a página está carregando".
2. Um indicador de rolagem que informa ao usuário qual parte da página ele está visualizando no momento.
1. Um indicador de carregamento de página com uma cor personalizável dizendo: "Está tudo bem, a página está carregando".
2. Um indicador de rolagem que informa ao usuário qual parte da página ele está visualizando no momento.
1
Como adicionar uma animação e um indicador de carregamento
Adicione um bloco T228 da categoria "Other" à parte superior da página.
Esta é a aparência do carregamento da página sem uma animação de carregamento:
O carregamento do conteúdo se tornará mais suave após a adição desse bloco:
Marque a caixa de seleção "Show a loading indicator" (Mostrar um indicador de carregamento) e escolha uma cor de fundo para o indicador de carregamento no painel Settings (Configurações) do bloco.
Esta é a aparência do carregamento da página depois de adicionar um indicador de carregamento:
Esse indicador não é exibido no Safari. O Safari tem seu próprio indicador de carregamento de página.
2
Como adicionar uma animação de rolagem
Adicione um bloco T333 da categoria "Other" à parte superior da página.
Especifique a cor e a altura da barra de progresso no painel Settings (Configurações) do bloco.
Especifique a cor e a altura da barra de progresso no painel Settings (Configurações) do bloco.
