Buba, Spinillo - 2009 - Instruções Visuais Animadas Uma Abordagem Analítica em Design Da Informação

Instrues Visuais Animadas: uma abordagem analtica em Design da
Informao
Animated Visual Instructions: an Information Design analytical approach
Deisy Buba
Carla G. Spinillo
informao, instruo visual animada (IVA), design
Este artigo apresenta um estudo sobre amostras de instrues visuais animadas com o objetivo de
identificar quais os elementos que a compe e analis-los sob tica do design da informao. Os
resultados foram discutidos, gerando um protocolo de avaliao com variveis de apresentao grfica
geral para itens compositivos e de animao, e variveis especficas para itens de texto e imagem. Este
estudo auxiliou na criao de um panorama de como as instrues visuais animadas so apresentadas
nas indstrias e suas principais caractersticas.
Information, animated visual instruction (AVI), design
This paper presents a study on a sample of animated visual instructions that aimed to identify their
compounding elements and to analyze them from information design view. The results were discussed,
generating a protocol for assessing the general graphic presentation variables for the compounding
elements and the animation elements; and specific variables for analyzing text and image. This study
provided an overview of how animated visual instructions are presented in industry and their main
characteristics.
Pesquisa cientfica em design da informao: Scientific research on information design:

sistemas de informao e comunicao, information and communication systems,
tecnologia e sociedade, histria e teoria, technology and society, history and theory,
educao education
C Spinillo, P Farias, R Tori & LA Coelho (orgs.) C Spinillo, P Farias, R Tori & LA Coelho (orgs.)
Sociedade Brasileira de Design da Informao - SBDI Brazilian Society of Information Design - SBDI
Rio de Janeiro | Brasil | 2009 Rio de Janeiro | Brazil | 2009
ISBN 978-85-89879-08-8 ISBN 978-85-89879-08-8
D Buba & C Spinillo | Instrues Visuais Animadas: uma abordagem analtica... | 400
1 Introduo
A facilidade e o volume de informaes encontradas ao nosso redor, nas diversas reas do
saber, uma realidade do sculo XXI, e um dos maiores desafios do mundo moderno a
transformao da informao em conhecimento. Com o avano da tecnologia, dos novos
suportes para disponibilizar a informao, inseridos na rotina das pessoas, o acesso ela se
d de forma rpida e fcil. Apostando no avano da tecnologia, da facilidade no acesso e da
familiaridade das pessoas com os equipamentos eletrnicos, as empresas esto investindo em
novas formas de disponibilizar informaes instrucionais que acompanhem com a mesma
velocidade da tecnologia ofertada. Tendo a intranet, a internet, computadores portteis, palms,
celulares, pen drives, CDs, DVDs entre outros, como suporte de interao e aprendizado.
Neste cenrio, as instrues visuais animadas tem conquistado cada vez mais espao dentro
das diversas mdias, mas por ainda ser um meio novo, concerne vrios problemas.
Este artigo trata de instrues visuais animadas utilizadas nas indstrias que empregam
software de modelagem em 3D para a produo de animaes. apresentado brevemente
aqui um estudo analtico deste tipo de instrues a fim de identificar seus elementos
componentes descrevendo-os pela tica do design da informao. Espera-se com isto auxiliar
futuros estudos voltados produo de informaes, seja atravs dos protocolos propostos ou
da abordagem adotada.
2 Componentes visuais de interao

Uma interface grfica digital representada pelos seus componentes visuais. Vamos abordar
brevemente aqui, os componentes das formas grficas e textuais. Nas formas grficas sero
considerados a cor, a fonte tipogrfica e a configurao visual na pgina.
A cor como forma empregada graficamente na interao em uma pgina eletrnica.
Recomenda-se o uso de poucas cores, mas com a mesma luminncia (brilho), cautela na
utilizao de cores brilhantes (CYBIS, 2003). O uso da cor deve se dar de maneira consistente,
evitando cores opostas do em reas muito prximas, para no comprometer a legibilidade.
No emprego de fontes tipogrficas como forma vale salientar o uso da serifa e o tamanho da
fonte. Fontes sem serifa so ditas como de percepo leve. Devido ainda s baixas resolues
de alguns modelos de telas de computador, o texto com fonte de corpo pequeno mais legvel
em tipos sem serifa (NIELSEN, 2000). Por sua vez uso de fontes com corpo exagerado em
tamanho tambm nao recomendado, chamando ateno desnecessria e ocupando espao
a mais na tela.
A maior parte dos objetos de interao so delimitados por bordas, que desempenham
papel importante na leveza desses objetos. Essa caracterstica pode ser assegurada atravs
da natureza simples de seus traos e da distncia segura entre as bordas e textos em geral, a
exemplo de ttulos, cabealhos, rtulos, etc. (CYBIS, 2003).
A configurao visual da pgina (layout) outro aspecto a ser considerado, sendo esta
referente forma pela qual os itens de informao esto dispostos em uma janela, caixa de
dilogo ou de mensagem. Cybis (2003) recomenda que uma configurao adequada deve
observar focos de ateno agrupando os elementos inter-relacionados, os elementos mais
importantes no grupo (e.g. esquerda, colorido, etc.). A ordem de leitura dos elementos deve
obedecer a direo de leitura do sistema de escrita de acordo com sua importncia em funo,
cronologia, entre outros. Para os fundos de telas, janelas, caixas de dilogo ou de mensagens
o autor indica ainda a utilizao de cores neutras, que garantam um contraste adequado com
os textos e rtulos em primeiro plano, no recomendando carregar o fundo da tela com
elementos grficos.
Outro aspecto relevante na interao em instrues visuais digitais o uso de animao.
Esta no apenas facilita a interatividade como objeto a ser utilizado/montado, como tambm
promove ateno e interesse do leitor/usurio. Neste sentido Plaisant e Shneiderman (2005)
propem vrias recomendaes como por exemplo: disponibilizar sequencias curtas de
animao para evitar que o usurio necessite memorizar muitos passos; combinar tarefas ou
dividi-las em subtarefas; coordenar a animao com o texto para criar alternativas de
aprendizado; e utilizar highlight para guiar a ateno do usurio.
Pesquisa cientfica em design da informao: sistemas de informao e comunicao, tecnologia e sociedade, histria
e teoria, educao
Scientific research on information design: information and communication systems, technology and society, history and
theory, education
Em relao a apresentao de imagens nas instrues visuais animadas, observa-se hoje

as aplicao das tecnologias de 3D no mercado. Estas entretanto, so mais comuns na forma
de realidades virtuais e walkthrough para projetos arquitetnicos. A comunidade cientfica,
todavia, vislumbra que ambientes 3D modificaro os atuais sistemas operacionais de bancos
de dados, e as interfaces devero ser recriadas para atender esta nova realidade (AZEVEDO e
CONCI, 2003).
Apesar dos benefcios possveis do uso de 3D, este poder trazer limitaes ou at
problemas de usabilidade (NIELSEN, 2000). O uso da tridimensionalidade no computador
acrescenta uma srie de dificuldades para o usurio, as quais devem ser consideradas no
projeto de produtos que exploram esta linguagem grfica, tais como:
a) a tela e o mouse so dispositivos bidimensionais, de modo que no se obtm a
verdadeira tridimensionalidade (e.g. necessita de um mouse tridimensional);
b) difcil controlar um espao tridimensional com as tcnicas de interao atualmente em
uso comum, pois foram criadas para a manipulao bidimensional (e.g. arrastar e rolar a
tela);
c) os usurios precisam prestar ateno navegao da viso tridimensional, alm da
navegao do modelo subjacente, os controles adicionais para voar, dar zoom, rotacionar e
assim por diante, aumentariam a carga cognitiva; e
d) a m resoluo de tela impossibilita a renderizao de objetos remotos com detalhes
suficientes para serem reconhecveis. (NIELSEN, 2000)
Todavia, o uso de 3D pode ser apropriado quando se precisa visualizar objetos fsicos que
precisam ser entendidos em sua forma slida. So exemplos:
a) cirurgies que esto planejando onde cortar um paciente. O corpo tridimensional e a
localizao do tumor tem uma localizao tridimensional mais fcil de entender em modelo
tridimensional do que em um raio- X bidimensional;
b) engenheiros mecnicos que esto projetando um aparelho que precisa ser encaixado em
um dispositivo;
c) pesquisadores qumicos que esto tentando entender a forma de uma molcula;
d) planejamento do layout de um estande de feira (NIELSEN, 2000)
Como o presente estudo refere-se a instrues visuais de produtos mecnicos, o uso da

tridimensionalidade para visualizao de componentes se faz ento pertinente, conforme afirma
a literatura.
3 Estudo analtico de instrues visuais animadas (IVAs)

Este estudo tem como objetivo verificar as IVA (Instrues Visuais Animadas) disponveis em
meio eletrnico, atravs de uma anlise qualitativa e exploratria. Esta anlise ser embasada
nos conceitos tericos, lembrando que a pesquisa estar restrita ao nvel sinttico, ou seja,
relao entre os elementos grficos, pictricos, esquemticos, visuais e textuais,
locados/organizadas em um espao virtual. Empregou-se um conjunto de variveis
denominadas: (a) apresentao grfica geral e (b) do texto e imagem. Os conceitos de
interao, interface, e usabilidade sero abordados brevemente, apenas para posicionar o
leitor quanto s variveis que sero citadas na anlise.
As amostras selecionadas foram padronizadas e estruturadas de acordo com o objetivo da
anlise formado um agrupamento, que representa o nicho delimitado pela pesquisa, que est
restrita as instrues direcionadas indstria. A abordagem analtica envolveu sete amostras,
das quais cinco so oriundas de sites de empresas que prestam servios de produo de
instrues tcnicas animadas para vrios clientes, e encontram-se disponveis na internet. As
demais foram obtidas em site de empresa que projeta software de visualizao (uma amostra)
e em indstria automotiva (uma amostras) que investe nesta tecnologia para disponibilizar
e teoria, educao
theory, education
informaes para seus cliente e usurios. A anlise destas amostras se deu a partir da captura
de telas das instrues visuais, e pela observao das instrues visuais animadas
propriamente ditas.
Aspectos analisados
Layout da pgina
As amostras foram analisadas em seu aspecto geral, identificando os elementos componentes
dos layouts das telas (figura 01), sendo estes: (a) imagem processual: espao onde ocorre a
animao; (b) texto processual: aquele que corresponde visualmente com a ao ocorrida na
animao; (c) menu fixo: aquele que visvel na pgina; (d) menu oculto: aquele que
acionado com a aproximao do cursor; (e) texto de apoio: o elemento verbal que auxilia na
compreenso da tarefa; (f) imagem de apoio: o elemento visual que auxilia na compreenso da
tarefa.
Figura 01 Elementos componentes do layout da pgina.
Variveis grficas
As variveis que fazem parte desta anlise provem de conceitos de interatividade e de
linguagem verbal e visual. Assim, permitoiu-se a diviso em dois grandes grupos: (a) variveis
da apresentao grfica geral e (b) variveis da apresentao do texto e imagem.
As variveis da apresentao grfica geral dizem respeito interatividade da pgina no
item menu, elementos de apoio e animao. J variveis da apresentao do texto e imagem
referem-se a formas de representao grfica do texto e das imagens, e a relao entre eles.
Estas variveis enfocam instrues visuais animadas quanto s possibilidades de interao
entre o usurio e a informao.
Na varivel menu, a cognio, o alfabetismo visual e a navegabilidade so conceitos
considerados, pois, elementos pictricos e comandos de rotao 3D, por exemplo, so
algumas das caractersticas desta varivel. Os itens de anlise do menu levantados so: (a)
quantidade aplicada em cada amostras; (b) localizao, se inserido ou fora da imagem
processual; (c) oculto ou fixo; (d) os elementos grficos so pictricos, esquemticos ou
verbais; (e) o posicionamento na pgina horizontal ou vertical.
e teoria, educao
theory, education
A varivel elementos de apoio refere-se a funo de reforar a mensagem transmitida na

imagem processual. Esta varivel pode ser apresentada atravs de: (a) textos; (b) imagens; (c)
tabelas. J na varivel animao, so considerados alguns conceitos da linguagem
cinematogrfica como: (a) enquadramento (plano geral, plano aberto, plano prximo e close);
(b) movimentos de cmera (panormica invertida, travelling e zoom); (c) transio entre cenas
ou tarefas (corte, fade in, fade out, congelamento, cmera lenta); (d) efeitos especiais (fade in/
fade out intermitentes, spot lights atravs de cores e transparncias).
As variveis da apresentao do texto e imagem enfocam a relao entre estes, aspectos
da tipografia e efeitos aplicados nos textos das amostras, alm de variaes e combinaes
que auxiliam na legibilidade e hierarquia. Neste sentido, texto em relao imagem pode estar
(a) separado, mas com correspondncia visual, ao e texto correspondem sincronicamente;
(b) o texto separado da imagem sem correspondncia visual. Quando o texto esta integrado
com a imagem ele pode ser classificado como: legenda e rtulo.
Na varivel funo, o texto pode ser apresentado como: complemento da mensagem
transmitida pela imagem; ou ancoragem que apresenta o texto reforando a mensagem
pictrica.
Na varivel elementos de separao visual, analisa como texto e imagem tem seu espao
delimitado dentro da pgina, que pode ser na forma de: janelas e/ou bordas e/ou barras.
A varivel posio na pgina, analisa o posicionamento do texto em relao imagem que
pose ser: acima, abaixo, direita, esquerda, podendo ocorrer mais de uma posio em cada
amostra. A figura 2 a seguir mostra o protocolo empregado na anlise da amostra.
Figura 02 Planilha de anlise das variveis.
e teoria, educao
theory, education
4 Resultados e discusso
Os dados foram analisados qualitativamente, onde os nmeros apresentados indicam apenas
tendncias das instrues visuais animadas. As Figuras a seguir mostram a sntese dos dados
que so ento comentados.
Figura 03 Planilha com anotao das variveis gerais.
e teoria, educao
theory, education
Figura 04 Planilha com anotao das variveis especficas.
Quando a anlise feita verticalmente, notamos que algumas amostras aplicam uma grande
quantidade das variveis, como observa-se na amostra 04 e 06 na varivel animao (figura
02). A utilizao de mais variveis, no indica que a instruo visual animada possui a melhor
soluo na transmisso da mensagem, e o contrrio tambm se aplica a amostra com menos
variveis aplicadas que podem ter resolvido de forma eficaz a instruo.
Esses resultados apontam para uma padronizao das instrues visuais animadas no
que se refere s informaes contidas na pgina. A ocorrncia mais freqente da imagem
processual, do texto processual e do menu com elementos pictrico.
Pode-se dizer que a ausncia de marcas semnticas, como setas, sinas de negao,
sinais de descarte, pode ser problemtica, pois poderiam auxiliar na execuo da tarefa,
enfatizando a mensagem transmitida, assim como, o texto inserido na imagem processual que
pouco utilizado, poderia esclarecer dvidas ou reforar a mensagem sendo redundante.
Indicativos de ateno, perigo ou dicas, no foram encontrados nas amostras analisadas.
Excesso de informaes pode levar a poluio visual, trazendo danos para o aprendizado
e a compreenso da tarefa conforme afirma a literatura em PREECE, ROGER e SHARP (2006)
e CYBBIS. Respeitar a hierarquia dos elementos (MIJKSENAAR, 1997) a proximidade do texto
processual com a imagem processual (SPINILLO, 2000) auxiliam na leitura intuitiva da
informao evitando sobrecarga cognitiva do usurio.
e teoria, educao
theory, education
Apresentao grfica geral

Na anlise horizontal das amostras verificamos as tendncias. Em geral as amostras
analisadas (figura 03) possuem mais de um menu (N=5); quando o menu esta posicionado
dentro da imagem, oculto (N=4); todas as amostras apresentam menu fixo fora da imagem
(N=7); todas as amostras apresentam elementos pictricos em seus menus (N=7), em geral
encontramos elementos esquemticos (N=4), e poucos menus com elementos verbais (N=3)
(figura 05).
Figura 05 Anlise da varivel menu.
H amostras que apresentam menus com grandes quantidades de elementos pictricos e

esquemticos. A separao dos menus em ocultos e fixos, como apresentado em alguns
modelos, elegendo comandos bsicos para os fixos, e comandos especficos para os ocultos,
possivelmente facilitam a interao e a cognio do usurio com a imagem processual,
evitando sobrecarga visual da informao (figura 06). A interatividade que esta presente nos
menus, acredita-se ser um dos pontos positivos na maioria das amostras, quanto a
manipulao da imagem processual durante demonstrao da tarefa. Com a ferramenta de
rotao ou outras similares, o usurio pode escolher o melhor ngulo para observar a
montagem de alguma pea especfica, assim como o zoom, o stop, o avanar, retornar, etc.
Figura 06 - Exemplo de menu com elementos pictricos e esquemtico (sobrecarga visual).
e teoria, educao
theory, education
Os elementos de apoio (figura 03) no ocorrem com freqncia nas amostras analisadas,
os textos (N=3), as imagens (N=3) e as tabelas (N=2) ocorrem em menos da metade das
amostras (fig. 07).
Figura 07 Anlise da varivel elementos de apoio.
Na hierarquia da informao analisada, demonstra-se que os elementos de apoio possuem

um peso menor, enquanto que o texto processual tem a funo de suporte da imagem,
fornecendo informaes mais relevantes. A nfase e o posicionamento na pgina dos
elementos de apoio devem ser observados, para no ocuparem o espao de informaes com
um maior peso hierrquico (figura 08).
Figura 08 - Elemento de apoio reposicionado na pgina.
Na varivel animao o enquadramento em plano aberto utilizado na maioria das

amostras (N=5), assim como o close (N=4) e o plano prximo (N=4), o plano geral o menos
freqente (N=2). As animaes das amostras apresentam a combinaes de vrios planos
(figura 09).
Os movimentos de cmera possuem a mesma caracterstica do enquadramento quanto
combinao de vrios tipos em uma mesma animao. A panormica horizontal invertida (N=6)
e o travelling horizontal (N=6) foram os mais freqentes na anlise, os movimentos de cmera
e teoria, educao
theory, education
panormica vertical invertida (N=5) e travelling in/out (N=5) ocorreram com a mesma
freqncia, assim como o travelling vertical (N=4) e o zoom in/out (N=4), nestas variveis no
so notadas discrepncias entre os dados.
Figura 09 Anlise da enquadramento.
Entre as cenas e/ou tarefas, as transies mais utilizadas so os cortes (N=3) e o

congelamento da imagem (N=3). Alguns efeitos so utilizados para enfatizar alguma pea da
ou para detalhar montagens mais complexas. Os efeitos que mais ocorrem nas animaes
analisadas so o de cmera lenta/ slow motion (N=4) e o de transparncia (N=4) (figura 10), os
recursos de flash (N=3) e spot ligth (N=3) so aplicados em menos da metade das amostras,
por fim o fade out (N=2) o efeito menos utilizado.
Figura 10 Anlise da varivel efeitos na animao.
Analisando a linguagem cinematogrfica da animao das amostras, o plano geral ou full

shot, apresenta as peas em tamanho reduzido, ao contrrio do close cujo tamanho super-
dimensionado, ambas podem gerar problemas de legibilidade e localizao da ao (figura 11).
e teoria, educao
theory, education
Figura 11 - Exemplo de plano de enquadramento.
As peas e componentes so o ponto central da cena em todas as animaes, e os

movimentos de cmera acontecem ao redor delas. A combinao de vrios movimentos de
cmeras com variaes de velocidades pode comprometer a viso espacial do usurio em
relao localizao da ao (figura 11).
Os efeitos de transparncia (figura 10), flash, fade out, auxiliam na indicao da nfase na
animao, assim como a cor tem papel fundamental neste item. A legibilidade analisada em
seu excesso ou falta de contraste e brilho nas animaes podem ser observadas em algumas
amostras (figura 12).
Figura 12 - Exemplo de ilegibilidade.
e teoria, educao
theory, education
Apresentao do texto e imagem

Na varivel texto, todas as amostras apresentam texto sem serifa (N=7) e em geral na forma
normal (N=6), a forma negrito (N=4) em algumas amostras teve a funo de nfase, assim
como a cor (N=5) e os box (N=4) foram aplicados com este objetivo (figura 13).
Figura 13 Anlise da varivel texto.
Na relao com a imagem processual o texto (figura 14) pode ser encontrado separado
com correspondncia ao da animao na maioria das amostras (N=5), entre estas
geralmente utiliza-se algum elemento para enfatizar (N=4) a correspondncia, a minoria das
amostras no apresenta correspondncia com a ao (N=2).
Figura 14 - Exemplo de no correspondncia entre texto e imagem.
Em algumas amostras analisadas, foram detectados problemas quanto relao visual

entre a imagem processual e o texto que no corresponde ao da imagem processual
(figura 14). A correspondncia de texto com imagem facilita no reforo da tarefa, assim como, a
nfase no texto outra forma de conduzir o usurio pela informao. A utilizao de texto em
negrito ou em tamanhos diferentes como elemento enftico no foi explorado nas amostras.
Quando o texto est integrado imagem, ele tem a forma de rtulo (N=3), mas este tipo e
interferncia pouco freqente. O posicionamento do texto dentro da pgina, em relao a
imagem processual geralmente esta esquerda (N=5), ou abaixo (N=3). A posio menos
utilizada acima (N=1). A funo principal do texto nas amostras analisadas o de
e teoria, educao
theory, education
complemento (N=7). Elementos de separao visual como janelas (N=6), bordas (N=2) e
barras (N=3) esto presentes nas amostras, delimitando os espaos (figura 15).
Figura 15 Anlise da varivel texto.
Encontramos, na varivel elementos enfticos na imagem processual das amostras, pouco

uso de elementos enfticos (N=3), que objetivam destacar peas da ao (figura 16). Os
elementos enfticos utilizados nas amostras como a cor, o flash e os spot lights, so
importantes para situar o usurio quanto localizao da ao que esta descrita no texto
processual, ou auxilia na localizao quando uma imagem possui muitos elementos em sua
composio.
Figura 16 Anlise da varivel nfase na imagem.
A perspectiva (N=7) o tipo de vista utilizada em todas as amostras, vistas ortogonais

(N=1) tem incidncia muito baixa na amostra. As imagens em sua maioria so representadas
completas (N=6), e em algumas amostras combinadas com as incompletas ou parciais (N=5).
O estilo de ilustrao predominante o fotogrfico/ foto-realstico (N=7), podendo o
usurio em algumas amostras optar pelo estilo desenho/ trao (N=4) ou esquemtico/ aramado
(N=3) (figura 17).
e teoria, educao
theory, education
Figura 17 Anlise da varivel estilo de ilustrao.
Os resultados mostram uma padronizao na representao das instrues visuais

animadas nas amostras, em relao ao estilo da imagem, todas apresentam estilo fotogrfico
(figura 18), isto pode ser considerado positivo, por promover uma familiaridade do usurio com
a informao.
Figura 18 Exemplo de estilo de imagem fotogrfico.
Algumas consideraes
Considerando os resultados, constatou-se a ausncia de marcas semnticas e interferncias

de textos nas imagens processuais, assim como de um maior cuidado na disposio dos
elementos que compe a pgina, respeitando as reas hierrquicas. Nos textos
correspondentes ao, o uso de nfase parece importante para o reforo da mensagem,
explorando efeitos tipogrficos como o negrito e diferentes tamanhos de corpo da fonte. Um
maior cuidado com o contraste, brilho e cor quando utilizada a tela como suporte, poderia vir a
facilitar a legibilidade, e at tornar a leitura agradvel e confortvel ao usurio. Quando se
aborda elementos pictricos e esquemticos, o alfabetismo visual dos usurios deve ser
respeitado no que concerne s suas caractersticas e aspectos culturais, econmicos e sociais.
e teoria, educao
theory, education
5 Concluso
Os resultados desta pesquisa permitem concluir a existncia de problemas relacionados

forma de apresentao das instrues visuais animadas, no que tange a nfase e legibilidade
na relao texto-imagem, na hierarquia dos elementos que compe o layout da pgina, na
localizao da ao da tarefa que envolve movimentos das cmeras na animao, e no
reconhecimento dos elementos pictricos e esquemticos dos menus.
O carter analtico deste estudo no permitir maiores interferncias sobre a eficcia
comunicacional das instrues visuais animadas junto a usurios, demandando testes de
usabilidade. No entanto, os aspectos aqui discutidos podem vir a contribuir para otimizao das
interfaces grficas de animaes instrucionais no processo de design. Isto possivelmente
facilitar a elaborao das futuras instrues visuais animadas, promovendo a compreenso e
o processamento da mensagem instrucional pelo usurio, e at mesmo a realizao satisfatria
de tarefas nos processos industriais.
Por fim, fundamentando-se nas recomendaes apresentadas no incio deste artigo, pode
se sugerir, a partir dos resultados, que deve ser conferida especial ateno animao como
meio de transmisso da informao em instrues visuais. O enquadramento dever ser
utilizado de acordo com a mensagem a ser transmitida, evitando planos muito abertos onde as
peas se apresentam muito pequenas e sem legibilidade, ou muitos planos prximos que
possam dificultar a localizao da pea/objeto a ser manipulado. A velocidade da
movimentao da cmera na animao deve ser observada: altas velocidades podem dificultar
o acompanhamento da ao, e velocidades muito lentas podem perder a ateno do usurio
na tarefa.
6 Referncias
AZEVEDO, Eduardo; CONTI, Aura. Computao grfica. Rio de Janeiro: Elsevier, 2003.
BAECKER, Ronald; SMALL, Ian. Animation at the interface. 1990.
http://kmdi.utoronto.ca/rmb/papers/B3.pdf. Acessado em 01/04/2008.
BANKS, Adam; FRASER, Tom. O guia completo da cor. So Paulo: Editora Senac So Paulo, 2007.
COUTINHO, Flvio Luiz; MORIMOTO, Carlos Hitoshi. Rastreadores de olhar.
http://score.ime.usp.br/~ronaldo/topicos_2006/planos_2006/flavio_coutinho.pdf. Acessado em
02/04/2008.
CYBIS, Walter de Abreu. Engenharia de usabilidade: uma abordagem ergonmica. Florianpolis,
2003.
DAVENPORT, Thomas H.; PRUSAK, Laurence. Conhecimento Empresarial: como as organizaes
gerenciam seu capital intelectual. Rio de Janeiro: Campus, 1998.
ENGELHARDT, Yuri. The language of graphics. Amsterdam: Yuri Engelhardt, 2002.
FREITAS, Sydiney; OLIVEIRA, Saulo Brbara. Design: gesto, mtodos, projetos, processos. Rio de
Janeiro: Editora cincia moderna. 2007, p. 01-24.
FURLANETTO, Sergio. Diagnstico do processo de comunicao nas empresas do extremo sul
catarinense, segundo a tica dos acadmicos da rea de negcios da UNESC. 2001.
http://teses.eps.ufsc.br/defesa/pdf/7237.pdf . Acessado em 27/01/2008.
GOLDSCHMIDT, Andrea. Estratgias de comunicao para o terceiro setor. Integrao: revista
eletrnica do terceiro setor, anoVI - N 29 - Ago/2003. Endereo
http://integracao.fgvsp.br/ano6/08/financiadores.htm. Acessado em 27/01/2008.
GOMES FILHO, Joo. Gestalt do objeto: Sistema de leitura visual. 6 ed. So Paulo: Escrituras
Editora, 2004.
HORN , Robert. Information design: emergence of a new profession. In Robet Jacobson (org),
Information design. Cambrigde: First MIT Press paperback edition, 2000.
KRUG, Steve. No me faa pensar. 2 ed.. Rio de Janeiro: Editora Alta Books Ltda, 2006.
MIJKSENAAR, Paul. Visual Function: an introduction to information design. Rotterdam: 010
Publishers, 1997.
e teoria, educao
theory, education
MUSBERGER, Robert B. Roteiro para mdia eletrnica: TV, rdio, animao e treinamento
corporativo. Rio de Janeiro: Elsevier, 2008.
NIELSEN, Jakob. Projetando websites. Rio de Janeiro: Campus, 2000.
NIELSEN, Jakob. Talking-Head Video Is Boring Online. Postado em 05/12/2005.
http://www.useit.com/alertbox/video.html. Acessado em 07/04/2008.
NIELSEN, Jakob. F-Shaped pattern for reading Web content. Postado em 17/04/2006.
http://www.useit.com/alertbox/reading_pattern.html. Acessado em 07/04/2008.
OLIVEIRA, Saulo Brbara. As ferramentas tecnolgicas do gesto de processos: conceitos,
facilidades e recursos. In Saulo Brbara e Sydney Freitas (org), Design: gesto, mtodos, projetos,
processos. Rio de Janeiro: Editora cincia moderna. 2007, p. 01-24.
ONO, Maristela Mitsuko. Design e cultura: sintonia essencial. Curitiba: edio da autora, 2006.
PARENT, Rick. Computer animation: algorithms and techniques. San Diego: Academic Press, 2002.
PETTERSSON, Rune. Information design: an introduction. Amsterterdam: John Benjamins B.V., 2002.
PETTERSSON, Rune. It depends. Tullinge, 2007. http://www.iiid.net/.
PLAISANT, Catherine; SHNEIDERMAN, Ben. Show me! Guidelines for producing recorded
demonstrations. 2005. http://hcil.cs.umd.edu/trs/2005-02/2005-02.pdf. Acessado em 01/04/2008.
PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. Design de Interao: alm da interao homem
computador. Porto Alegre: Bookman, 2005.
RODRIGUES, Chris. O cinema e a produo. Rio de Janeiro: DP&A: Faperj, 2005.
SHEDROFF, Nathan. Information interaction design: A unified field theory of Design. 1994.
http://www.nathan.com/thoughts/unified. Acessado em 20/01/2008.
SPINILLO, Carla Galvo. An analytical approach to procedural pictorial sequences. Tese de
doutorado no publicada. Reading: The University of Reading, 2000.
SPINILLO, Carla G.. Instrues visuais: algumas consideraes e diretrizes para o design de
seqncias pictricas de procedimento. Revista estudos em Design 2002.
SPINILLO, Carla G.; AZEVEDO, Evelyn R.; BENEVIDES, Daniel. Instrues visuais na rea de sade:
um estudo analtico de SPPs sobre o uso dos preservativos masculino e feminino.
SPINILLO, Carla. Information design and cultural undersyanding. Munchen: Oldenbourg
Wissenschaftsverlag GmbH, 2006.
VAN DER WAARDE, Karel. An investigation into the suitability of the graphic presentation of patient
package inserts, Tese de doutorado no publicada. Reading: The University of Reading, 1993.
Amostras
http://www.lattice3d.com/
http://assemblyanimators.com/index.html
e teoria, educao
theory, education

Buba, Spinillo - 2009 - Instruções Visuais Animadas Uma Abordagem Analítica em Design Da Informação

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Buba, Spinillo - 2009 - Instruções Visuais Animadas Uma Abordagem Analítica em Design Da Informação

Uploaded by

Copyright:

Available Formats

Instrues Visuais Animadas: uma abordagem analtica em Design da

informao, instruo visual animada (IVA), design

Information, animated visual instruction (AVI), design

Pesquisa cientfica em design da informao: Scientific research on information design:

2 Componentes visuais de interao

Em relao a apresentao de imagens nas instrues visuais animadas, observa-se hoje

Como o presente estudo refere-se a instrues visuais de produtos mecnicos, o uso da

3 Estudo analtico de instrues visuais animadas (IVAs)

Figura 01 Elementos componentes do layout da pgina.

A varivel elementos de apoio refere-se a funo de reforar a mensagem transmitida na

Figura 02 Planilha de anlise das variveis.

Figura 03 Planilha com anotao das variveis gerais.

Figura 04 Planilha com anotao das variveis especficas.

Apresentao grfica geral

Figura 05 Anlise da varivel menu.

H amostras que apresentam menus com grandes quantidades de elementos pictricos e

Figura 06 - Exemplo de menu com elementos pictricos e esquemtico (sobrecarga visual).

Figura 07 Anlise da varivel elementos de apoio.

Na hierarquia da informao analisada, demonstra-se que os elementos de apoio possuem

Figura 08 - Elemento de apoio reposicionado na pgina.

Na varivel animao o enquadramento em plano aberto utilizado na maioria das

Figura 09 Anlise da enquadramento.

Entre as cenas e/ou tarefas, as transies mais utilizadas so os cortes (N=3) e o

Figura 10 Anlise da varivel efeitos na animao.

Analisando a linguagem cinematogrfica da animao das amostras, o plano geral ou full

Figura 11 - Exemplo de plano de enquadramento.

As peas e componentes so o ponto central da cena em todas as animaes, e os

Figura 12 - Exemplo de ilegibilidade.

Apresentao do texto e imagem

Figura 13 Anlise da varivel texto.

Figura 14 - Exemplo de no correspondncia entre texto e imagem.

Em algumas amostras analisadas, foram detectados problemas quanto relao visual

Encontramos, na varivel elementos enfticos na imagem processual das amostras, pouco

Figura 16 Anlise da varivel nfase na imagem.

A perspectiva (N=7) o tipo de vista utilizada em todas as amostras, vistas ortogonais

Figura 17 Anlise da varivel estilo de ilustrao.

Os resultados mostram uma padronizao na representao das instrues visuais

Figura 18 Exemplo de estilo de imagem fotogrfico.

Considerando os resultados, constatou-se a ausncia de marcas semnticas e interferncias

Os resultados desta pesquisa permitem concluir a existncia de problemas relacionados

You might also like