Colaboração: Kim Braga

Guia para a interface da animação

Objetivo: Ajudar no design da animação de forma que a representação dos elementos seja simples e de fácil compreensão.

Atividade: Analisar as animações e identificar os elementos representados, mantendo o seguinte em mente:

• Estão bem representados?
• É possível compreender o que está acontecendo com as threads pelas representações utilizadas?
• A velocidade de execução está boa? Se aumentasse ou diminuísse melhoraria?
• É necessário um documento contendo instruções e/ou explicações sobre o funcionamento da animação e suas representações?
• Pode ser feito algo para melhorar?

A ideia aqui é perceber os pontos negativos e positivos de cada animação e usá-los para guiar o trabalho de vocês.

Abaixo estão os gifs de animações de trabalhos anteriores.

Animação 1

Problema: Dinning Savages.

Características:

• Parametrização da quantidade de selvagens e refeições no pote;
• Legenda para os estados dos selvagens;
• Indicação de como sair da animação.

Animação 2

Problema: Building H2O.

Este gif mostra como o tamanho do terminal afeta a correta visualização da animação.

Características:

• Parametrização da quantidade de molécular de hidrgènio e oxigênio;
• Movimento da fila dos átomos e da molécula;
• Indicação da área de cada átomo e sua ligação.

Animação 3

Problema: Santa Claus.

Características :

• Fila de duendes e renas;
• Caixa informando o que está acontecendo na animação;
• Desenho indicando estado (dormindo ou acordado) do papai noel.

Animação 4

Problema: River Crossing.

Abaixo temos outra animação do mesmo problema, mas com mais barcos e passageiros por barco.

Obs.: Podemos perceber que a visualização da fila de espera é melhor com esta parametrização.

Características:

• Parametrização do número de barcos e pessoas por barcos (informado na documentação do trabalho);
• Uso de cores para rio e margem;
• Utilização de cores para separar os "Funcionários da Microsoft" dos "Hackers do Linux" é uma solução simples e clara.
• Animação do remador.

Animação 5

Problema: Building H2O.

Obs.: Aqui é outro exemplo do problema do H2O. A mudança de representações melhora a percepção do funcionamento do problema e da solução?

Características:

• Informações e instruções iniciais;
• Informações estatísticas disponíveis na parte superior direita;
• Indicações do reator e reservatório;
• Instrução de como encerrar a aplicação.

Animação 6

Problema: Sushi Bar.

Características:

• Parametrização da capacidade máxima do sushi bar;
• Estado dos clientes (os estão comendo e já terminaram);
• Número dos clientes na fila.

Animação 7

Problema: Building H2O.

Características:

• Simplicidade no uso da barreira;
• Mudança de cor e definição da forma da molécula após a barreira.

Animação 8

Problema: Producer-consumer.

Características:

• Parametrização;
• Demonstração com legenda de cada estado dos produtores e consumidores antes de começar a animação;
• Estante com produtos disponíveis;