Estudo analítico de design da informação em instruções visuais animadas na internet

1 / 37

Aluno: Guilherme Raldi Storck (PIBIC/CNPq)Orientador: Carla Galvão Spinillo. DeDesign, SCHLA. Pesquisa: Design da Informação em instruções visuais animadas Sexta-feira, 22 de outubro de 2010.

Estudo analítico de design da informação em instruções visuais animadas na internet

2 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck

OBJETIVOS MATERIAIS E MÉTODOS RESULTADOS CONCLUSÕESINTRODUÇÃO

Estrutura da apresentação

» Introdução

» Objetivos

» Materiais e Métodos

» Resultados

» Conclusões

3 / 37

1.Introdução



» Instruções visuais comumente utilizadas em materiais explicativos que acompanham produtos e equipamentos,

» importância comprovada como auxílio ao usuário na pronta visualização das informações,

» destaque para representação de tarefas e procedimentos.



Deficiências na apresentação gráfica:podem afetar a compreensão da mensagem, levando o usuário a não realizar a tarefa em questão de forma satisfatória.

Design de instruções visuais: essencial para o sucesso de tarefas relacionadas à montagem, uso e manuseio de produtos e equipamentos.



Instruções visuais animadas: » Material instrucional era tradicionalmente impresso

» Popularização de equipamentos eletrônicos e suportes digitais > Utilização de formatos digitais e animados.

» área ainda incipiente em pesquisa, em especial no âmbito do design gráfico e da informação

instruções visuais animadas na internet


INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS RESULTADOS CONCLUSÕES

8 / 37

2.objetivos


INTRODUÇÃO MATERIAIS E MÉTODOS RESULTADOS CONCLUSÕESOBJETIVOS

Objetivo geral(pesquisa em Design da Informação em Instruções visuais animadas)

» propor instrumentos para auxiliar no desenvolvimento de instruções visuais animadas no Brasil

Objetivos específicos » identificar possíveis deficiências na organização e apresentação gráfica da informação em instruções visuais animadas

» propor um instrumento de descrição/análise gráfica.


INTRODUÇÃO MATERIAIS E MÉTODOS RESULTADOS CONCLUSÕESOBJETIVOS

Objeto de estudo » Instruções visuais animadas relacionadas a tarefa de montagem, disponíveis na internet,

» CD-ROMs e/ou DVDs que acompanham produtos.

exemplos de instruções visuais animadas de montagem de produtos

11 / 37

3.materiais e métodos


INTRODUÇÃO OBJETIVOS RESULTADOS CONCLUSÕESMATERIAIS E MÉTODOS

Amostra23 instruções visuais animadas disponíveis na internet e em CD-ROMs dos produtos.

Critériorepresentar procedimentos (tarefa) de montagem de produtos,

» eletrônicos,

» industriais,

» eletrodomésticos ou

» brinquedos.

instruções animadasinstruções visuais animadas

animação instrucionalinstruções animadas

visual instructionsanimated instructions

instructional animationanimated manual

instructional motion do-it-yourself animation

assembly instructionsassembly animation

animação de montagemstep-by-step animation

how-to animation.



23 instruções visuais animadas de montagem de produtos



23 instruções visuais animadas de montagem de produtos

TIPO DE INSTRUÇÃO VISUAL ANIMADA QUANTIDADE

Objetos lúdicos 4Mobiliário 7Utensílios domésticos (home supplies) 5Equipamentos eletro-eletrônicos 5Industriais 1Fitness/Outros equipamentos 1

Total 23



Instrumento de análise

4. Texto e imagem

3. Menu e interatividade

2. Animação

1. Conteúdo Informacional

16 / 37


4. Texto e imagem


1. Conteúdo InformacionalVARIÁVEIS

NÃO PROCEDIMENTAL

ADVERTÊNCIA ASSOCIADO A UM PASSONÃO ASSOCIADO

INVENTARIAL ANTESDISPONÍVEL SEMPRE

CONTEXTUALANTESDISPONÍVEL SEMPREDEPOIS

QUALIFICANTEPROCEDIMENTAL

REPRESENTAÇÃO DO PARTICIPANTE

OBJETOAGENTEBENEFICIÁRIOINSTRUMENTO

2. Animação

17 / 37


4. Texto e imagem


2. AnimaçãoVARIÁVEIS

TÉCNICA APARENTE

2D

3DVIDEO

ENQUADRAMENTOPG PLANO GERALPA PLANO ABERTOPP PLANO PRÓXIMOCLOSE

MOVIMENTO DE CÂMERA

PANORÂMICA HORIZONTALPANORÂMICA VERTICALTRAVELLING HORIZONTALTRAVELLING VERTICALTRAVELLING IN/OUTZOOM INZOOM OUT

TRANSIÇÃO ENTRE AS CENAS

CORTE SECOFADING CRUZADOFADE INFADE OUT

EFEITOSFLASHSPOT LIGHTTRANSPARÊNCIAHIGHLIGHT

ESTILIZAÇÃO DO TEMPO

ACELERADOCONGELADOLENTOELIPSE TEMPORAL

TEMPORIZAÇÃO DA AÇÃO

PRÉ-AÇÃOAÇÃOPÓS-AÇÃO


18 / 37


4. Texto e imagem

3. Menu e interatividadeVARIÁVEIS

MENUSQUANTIDADE DE MENUS

LOCALIZAÇÃO DENTRO DA IMAGEMFORA DA IMAGEM

ELEMENTOSPICTÓRICOESQUEMÁTICOVERBAL

POSIÇÃO NA PÁGINA

HORIZONTALVERTICALHÍBRIDO

FUNÇÕES INTERATIVASÁUDIO ATIVADO OU NÃO

CONTROLE DE VOLUME

ESCOLHA DE PASSOS

PLAYAVANÇAVOLTAINICIO

FIM

REPLAYESCOLHA LIVRE (SLIDER)PLAY ALL STEPS

ABRIR INVENTARIALELEMENTOS DE APOIO

2. Animação


19 / 37


4. Texto e imagemVARIÁVEIS

TEXTO - TIPOGRAFIA

ALINHAMENTOESQUERDOCENTRALIZADODIREITOJUSTIFICADO

GÊNEROBOLDITÁLICOREGULAR

HIERARQUIA TEXTO PROCEDIMENTALTEXTO NÃO-PROCEDIMENTAL

ELEMENTO ENFÁTICO

CORBOXTAMANHO DO CORPO

TEXTO PROCEDIMENTAL (EM RELAÇÃO À IMAGEM)SEPARADO DA IMAGEM

CORRESPONDE VISUALMENTENÃO CORRESPONDE VISUALMENTE

INTEGRADO COM A IMAGEM

LEGENDA

RÓTULO

POSIÇÃO NA PÁGINA

ACIMAABAIXOESQUERDADIREITA


2. Animação


20 / 37

Análise do materialDescrição gráfico-informacional de forma quantitativa e qualitativa, a fim de identificar tendências/padrões:

» Quais as características gráfico-informacionais de instruções visuais animadas?

» Quais aspectos positivos e negativos/deficiências ocorrem na representação gráfica de instruções visuais animadas?

21 / 37

Protocolo de análise

Amostra nº X/23Cabeçalho

Modelo

analítico


2. Animação


4. Texto e imagem

Amostra nº 15/23INFORMAÇÕES

ANÁLISE


2. Animação


4. Texto e imagem


ANÁLISE


2. Animação


4. Texto e imagem

exemplo de

análise

Amostra nº X/23Cabeçalho

Modelo

analítico


2. Animação


4. Texto e imagem


ANÁLISE


2. Animação


4. Texto e imagem


ANÁLISE


2. Animação


4. Texto e imagem

exemplo de

análise

22 / 37

4.resultados



Síntese da análise

2. Síntese Animação

1. Síntese Conteúdo Informacional


INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS CONCLUSÕESRESULTADOS

Síntese 1: Conteúdo Informacional


TIPO DE VARIÁVELINSTRUÇÕES VISUAIS

ANIMADAS (N=23) INCIDÊNCIA1 - 23

NÃO PROCEDIMENTALAdvertência 11 14Inventarial 15 24Contextual 14 17Qualificante 6 6PROCEDIMENTALRepresentação do Objeto 23 23Repres. do Agente 6 6Repres. do Beneficiário - -Repres. do Instrumento 8 8

» Conteúdo inventarial (n=24)

» Advertências (n=14)

» Contextual (n=17)

» Baixa incidência de repres. do agente participante (n=6)







NÃO PROCEDIMENTALAdvertência 11 14Inventarial 15 24Contextual 14 17Qualificante 6 6PROCEDIMENTALRepresentação do Objeto 23 23Repres. do Agente 6 6Repres. do Beneficiário - -Repres. do Instrumento 8 8

» Conteúdo inventarial (n=24)

» Advertências (n=14)

» Contextual (n=17)

» Baixa incidência de repres. do agente participante (n=6)



Síntese 2: Animação



Técnica aparente 23 24Enquadramento 23 58Movimento de câmera 13 35Transição de cena 17 26Efeitos 12 15Estilização de tempo 18 27Temporização da ação 23 33

Síntese 2: Animação » Técnica aparente: 3D (n=16)

» mov. de câmera, como zoom in (n=11) e zoom out (n=10)

» Lapso temporal (n=8)

» Grande incidência de variação de enquadramento de câmera (n=58), como o “close” (n=20)



Síntese 3: Menu e interatividade



MENUSLocalização 14 17Elementos 14 33Posição página 14 17FUNÇÕES INTERATIVASÁudio 05 06Escolha passos 14 66Abrir inventarial 06 06ELEMENTOS DE APOIOOrientador leitura 17 20Áudio 11 17Orientad. espacial 01 01Suplementos 03 03Elementos simbólicos 11 11

Síntese 3: Menu e interatividade

» 14 de 23 instruções apresentam menu (interatividade)

» Orientadores de leitura: Números (n=17)

» Uso de áudio para narração apenas em 6 das 23 animações

» Função interativa: escolha de passos (play, avança, volta).





TIPOGRAFIA Alinhamento 16 16Gênero 16 24Hierarquia 08 10Elementos enfáticos 07 10TEXTO PROCEDIMENTAL (EM RELAÇÃO À IMAGEM)Separado da imagem 13 13Integrado à imagem 11 13Posição página 15 15Função 15 20Elem. de separação visual 11 13IMAGEM Elementos enfáticos 12 12Vistas 11 11Completude 23 34Estilo 23 26

Síntese 4: Texto e Imagem » Uso de texto em 16 de 23 animações

» Incidência de 15 ancoragens e 5 complementos da imagem

» Elementos enfáticos (n=12)

29 / 37

5.conclusões



Características mais frequentes na amostra

a.Conteúdo informacional: » Conteúdo inventarial

» Conteúdo contextual,

» Representação apenas do objeto participante;




b. Animação: » 3D,

» plano aberto,

» movimento de câmera em zoom in/zoom out,

» passagem de telas em corte seco,

» efeito de transparência e

» movimento lento nas ações.




c. Menu (interface): » menu localizado na vertical e horizontal (híbrido)

» fora da área da imagem/animação,

» com funções interativas de play, avança e volta.




d. Texto procedimental: » posicionamento e alinhamento à esquerda,

» separado por bordas da imagem/animação,

» sem correspondência visual,

» função de ancorar as imagens.

e. Imagens: » completas,

» estilo fotográfico,

» cor como ênfase.



Aspectos positivos: » Movimento de câmera e elementos de ênfase podem permitir visualização de detalhes e vistas particulares de objetos.



Deficiências: » Ocorrência frequente de lapsos temporais, omitindo ações importantes, e movimentos abruptos ou muito rápidos que podem dificultar a compreensão.

» Ausência da representação do agente participante (pessoa) pode dificultar o entendimento de ações ricas em manuseio e de passos que necessitem de mudança de ponto de vista

» Falta de identificação clara de cada um dos passos



Investigações futuras » Verificar a influência de modificações no tempo e de outras variáveis gráficas na compreensão do conteúdo instrucional.

continuação da pesquisa: estudos com variação no tempo da narrativa

Tempo ESPONTÂNEOvelocidade: 100%

Tempo LENTOvelocidade: 50%

Tempo ACELERADOvelocidade: 400%

37 / 37

Estudo analítico de design da informação em instruções visuais animadas na internet

obrigado.

Aluno: Guilherme Raldi Storck (PIBIC/CNPq)Orientador: Carla Galvão Spinillo. DeDesign, SCHLA.