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 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 Riscos da utilização da animação fora de contextos adequados. Excesso de animação numa página que desvia a atenção do utilizador. Problemas de tempo de carregamento das páginas. 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 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