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

Introdução

Meio de comunicação versátil Capacidade de transmissão de ideias simples

ou conteúdos complexos Contextos de aplicação específicos Técnicas e tecnologias de desenvolvimento

próprios Uma linguagem também própria

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...http://www.nik.pt/

El Pais: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 StudiosAnimação de Introdução do Sitewww.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

Home Shocking Networkhttp://www.homeshocking.com/hsn.html

Indegenous Australiahttp://www.indig.com/flash/indig_main.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 AirColin 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.

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.

Animação na web e Usabilidade

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 Formato open-source 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 Formato compilado 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 Interactividade Limitações