Hipermédia ‐ Animação

“ Writing a book is like creating a wave you can surf on.
Writing a CD‐ROM, is more like making a box of chocolates. 
Like the chocolates, in the end, the taste and the texture matter more than words.”

The Economist
[Eco. 95 a.]

1 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Principal função do hipermedia:

9 Leitura não linear.

9 Interactividade.

2 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Características do Design para Hipermédia:

9 Hibridismo

9 Hipertextualidade

9 Não linearidade

9 Interactividade

9 Navegabilidade

3 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Características do Design para Hipermédia:

9 Hibridismo

• Conjugação simultânea de diferentes media.

4 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Características do Design para Hipermédia:

9 Hipertextualidade

• Incorpora 2 sistemas diferentes de utilização:
• modo autor;
• modo utilizador;

5 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Características do Design para Hipermédia:

9 Não linearidade

• possibilitar caminhos diferentes, complexos, compostos por linhas 
de segmentos e linhas/pontos de fuga.

6 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Características do Design para Hipermédia:

9 Interactividade

• possibilidade de o utilizador se tornar quer emissor, quer receptor da mensagem.

7 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Características do Design para Hipermédia:

9 Navegabilidade

• mobilidade que o utilizador pode atingir numa aplicação hipermédia.

8 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Problema:

9 Como conjugar todas estas características numa só aplicação?

9 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Problema:

9 Como conjugar todas estas características numa só aplicação?

9 Se por um lado, a integração do multimedia pode:
• distrair o utilizador
• encobrir o objectivo real da aplicação

9 Por outro, pode ser usada de modo a:
•atrair o utilizador e enriquecer a sua experiência 
durante a utilização da aplicação.

10 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Animação
“O media que melhor expressa a natureza dinâmica do hipermédia.” 
(Media Matrix, 76)

Tipos de Utilização:

9 Animation Bites
9 Animations Car
9 Transitional Effects

11 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Animação
Tipos de Utilização:

9 Animation Bites

• Utilizada quando o poder informativo e explanatório da animação é visto como 
vantajoso.

• Quando um processo é melhor apreendido caso explanado ou ilustrado de 
forma abstracta.

• Exemplo: Animação do processo digestivo.

12 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Animação
Tipos de Utilização:

9 Animation Car

• Clipart, Gifs, imagens abstractas, criadas aleatóriamente.

• Tipicamente são indicadores de humor.

• Exemplo: Alteração de cores de forma dinâmica (screensaver).

13 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Animação
Tipos de Utilização:

9 Transitional Effects

• Feedback.

• Exemplo: ‘onde estou?’

14 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Animação
A Animação no hipermédia é um fenómeno recente.

• origem nos anos 80;
• hypercard.

15 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Animação
A Animação no hipermédia é um fenómeno recente.

• Desafio para os Designers : aumento do grau de complexidade;

16 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Animação e Usabilidade
Desafio para os Designers:

9 Não cair no exagero:
• Contexto;
• Medida;

9Acessibilidade

• Tempo de carregamento da página;
• Incompatibilidade dos Browsers;
• Necessidade de Instalar plugins;

17 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Animação e Usabilidade

Vantagens:

9 Ajuda a encontrar / aceder  à informação de forma mais simples;

9 Ajuda a descrever processos que seriam difíceis de explicar por intermédio de texto, 
diagramas ou imagens estáticas;

9 A  animação torna mais cativante a informação para o utilizador.

• melhora a experiência do utilizador na aplicação;

18 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Animação e Usabilidade

Bons Exemplos:

9http://www.metropolis‐media.com.pl/2007/

9http://www.bio‐bak.nl/

9http://www.porliniers.com/

19 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Bibliografia

9 Usability for the Web: designing Web sites that work

Tom Brinck, Darren Gergle, Scott D. Wood

9 Handbook of print media: technologies and production methods

Helmut Kipphan

9 Understanding Multimedia Documents

Jean-François Rouet

9 Multimedia, hypermedia, and virtual reality: models, systems, and applications

Peter Brusilovsky, Piet A. M. Kommers, Norbert A. Streitz

20 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada

Hipermédia ‐ Animação

Dúvidas?

21 FEUP | Mestrado Multimedia , Educação Multimedia | Ana Parada