Animação na Web
De elementos de design a um meio de
transmissão de conteúdos
Índice
 Introdução
 Contextos de Utilização
 Animação e Usabilidade
 Tecnologias de Animação
Contextos de Utilização
 Produção de conteúdos pedagógicos ou
didácticos
 Objectivos comercias ou de produção
 Interfaces de navegação
 Conteúdo artístico ou lúdico
 Elemento de design
Produção de conteúdos
pedagógicos e didácticos
 Desenvolvimento de Jogos Interactivos
 Ilustração de gráficos e apresentações com
objectivos didácticos
 Utilização de gráficos e modelos dinâmicos
Nik: JOGOS...
El País:
http://www.nik.pt/
GUERRA...
http://www.elpais.es/multimedia.html
Objectivos comerciais de
promoção
 Publicidade e Promoção de produtos
 Comércio electrónico
 Promoção de Sites
 Comunicação da Cultura da empresa
Balthaser Studios
Animação de Introdução do Site
www.balthaser.com
Desenvolvimento de Interfaces
e Navegação
 A animação para ilustrar transição entre
estados
 Animação de menus e sistemas de navegação
Indegenous Australia
http://www.indig.com/flash/indig_main.html
Home Shocking Network
http://www.homeshocking.com/hsn.html
Conteúdo artístico e lúdico
 Animação como expressão artística
 Divulgação de trabalhos desenvolvidos
recorrendo a técnicas tradicionais
Sumo Air
Colin Powell, 2000
“Eight New York Digital Saloon”
http://www.sva.edu/salon/animationFrames.html
Animação como elemento de
design
 Melhorar o design global da página
 Chamar a atenção para zonas da página
 Utilização de metáforas gráficas
 Ilustrar conceitos simples
Animação e Usabilidade
“a usabilidade de um interface é simplesmente
uma medida de eficiência e satisfação com que
os utilizadores podem alcançar determinados
objectivos num determinado ambiente com
esse interface.”
Definição da ISO (International Standardisation Organization)
Animação na web e
Usabilidade
Assim, usabilidade pode(m) ser:




a organização da informação no site;
a utilização de diversos elementos (cor, imagens...);
os tipos de letra e dimensão do texto;
o aspecto global do site e adequação ao conteúdo.
Animação na web e
Usabilidade
1. Riscos da utilização da animação fora de
contextos adequados.
2. Excesso de animação numa página que desvia a
atenção do utilizador.
3. Problemas de tempo de carregamento das
páginas.
4. Incompatibilidade dos browsers com alguns tipos
de animação.
1. Riscos da utilização da animação
fora de contextos adequados
 Um site institucional tem um aspecto mais
sóbrio tem uma finalidade definida;
 Onde a informação a transmitir é mais
textual pode não se justificar animação.
Animação e Usabilidade
2. Excesso de animação numa página
que desvia a atenção do utilizador
 A animação pela animação faz sentido?
 O excesso de imagens animadas distrai,
confunde, cansa...
Animação e Usabilidade
3. Problemas de tempo de
carregamento das páginas
 Normalmente as animações fazem aumentar
o tempo de visualização das páginas;
 O autor deve pensar se as animações são
mesmo necessárias;
 20 segundos depois...é o desânimo.
Animação e Usabilidade
4. Incompatibilidade dos browsers
com alguns tipos de animação
 A necessidade de Plug-Ins para visualizar
determinadas páginas;
 Flash: 99% Bad [Nielsen 99]
Animação e Usabilidade
4. Incompatibilidade dos browsers
com alguns tipos de animação
Flash: 99% Bad:
 O Localizar deixa de funcionar;
 As cores dos links não exibem o que já foi visto
e o que falta ver;
 Aumentar o tamanho das fontes é impossível.
Animação e Usabilidade
Tecnologias
 Animação GIF
 Flash
 Shockwave
 Javascript
Animação GIF
 Criação fácil e divertida
 Capacidade de atracção
 Explosão do movimento
 Fácil integração
 Reconhecida pela maioria dos browsers
 Limitações
Flash
 Formato padrão para a animação na Web
 Interactividade
 Atractividade
 Software mais barato
 Alta resolução de imagem
 Necessidade de Plug-ins
Shockwave – Director
 Animação mais complexa
 Criação de conteúdos dinâmicos
 Interactividade e versatilidade
 Compatibiliadde com o Flash
 Necessidade de Plug-ins
Javascript
 Fácil criação
 Planeamento de animação
 Sobreposição de imagens
 Controlo total do utilizador
 Compatível com a maioria dos browsers