Post on 22-Apr-2015
description
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
4 / 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
» 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.
5 / 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
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.
6 / 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
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
7 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS RESULTADOS CONCLUSÕES
8 / 37
2.objetivos
9 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
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.
10 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
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
12 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
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.
13 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS RESULTADOS CONCLUSÕESMATERIAIS E MÉTODOS
23 instruções visuais animadas de montagem de produtos
14 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS RESULTADOS CONCLUSÕESMATERIAIS E MÉTODOS
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
15 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS RESULTADOS CONCLUSÕESMATERIAIS E MÉTODOS
Instrumento de análise
4. Texto e imagem
3. Menu e interatividade
2. Animação
1. Conteúdo Informacional
16 / 37
Instrumento de análise
4. Texto e imagem
3. Menu e interatividade
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
Instrumento de análise
4. Texto e imagem
3. Menu e interatividade
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
1. Conteúdo Informacional
18 / 37
Instrumento de análise
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
1. Conteúdo Informacional
19 / 37
Instrumento de análise
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
3. Menu e interatividade
2. Animação
1. Conteúdo Informacional
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
1. Conteúdo Informacional
2. Animação
3. Menu e interatividade
4. Texto e imagem
Amostra nº 15/23INFORMAÇÕES
ANÁLISE
1. Conteúdo Informacional
2. Animação
3. Menu e interatividade
4. Texto e imagem
Amostra nº 15/23INFORMAÇÕES
ANÁLISE
1. Conteúdo Informacional
2. Animação
3. Menu e interatividade
4. Texto e imagem
exemplo de
análise
Amostra nº X/23Cabeçalho
Modelo
analítico
1. Conteúdo Informacional
2. Animação
3. Menu e interatividade
4. Texto e imagem
Amostra nº 15/23INFORMAÇÕES
ANÁLISE
1. Conteúdo Informacional
2. Animação
3. Menu e interatividade
4. Texto e imagem
Amostra nº 15/23INFORMAÇÕES
ANÁLISE
1. Conteúdo Informacional
2. Animação
3. Menu e interatividade
4. Texto e imagem
exemplo de
análise
22 / 37
4.resultados
23 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS RESULTADOS CONCLUSÕES
Síntese da análise
2. Síntese Animação
1. Síntese Conteúdo Informacional
24 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS CONCLUSÕESRESULTADOS
Síntese 1: Conteúdo Informacional
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)
25 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS CONCLUSÕESRESULTADOS
Síntese 1: Conteúdo Informacional
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)
26 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS CONCLUSÕESRESULTADOS
Síntese 2: Animação
TIPO DE VARIÁVELINSTRUÇÕES VISUAIS
ANIMADAS (N=23) INCIDÊNCIA1 - 23
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)
27 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS CONCLUSÕESRESULTADOS
Síntese 3: Menu e interatividade
TIPO DE VARIÁVELINSTRUÇÕES VISUAIS
ANIMADAS (N=23) INCIDÊNCIA1 - 23
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).
28 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS CONCLUSÕESRESULTADOS
TIPO DE VARIÁVELINSTRUÇÕES VISUAIS
ANIMADAS (N=23) INCIDÊNCIA1 - 23
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
30 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS RESULTADOS CONCLUSÕES
Características mais frequentes na amostra
a.Conteúdo informacional: » Conteúdo inventarial
» Conteúdo contextual,
» Representação apenas do objeto participante;
31 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS RESULTADOS CONCLUSÕES
Características mais frequentes na amostra
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.
32 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS RESULTADOS CONCLUSÕES
Características mais frequentes na amostra
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.
33 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS RESULTADOS CONCLUSÕES
Características mais frequentes na amostra
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.
34 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS RESULTADOS CONCLUSÕES
Aspectos positivos: » Movimento de câmera e elementos de ênfase podem permitir visualização de detalhes e vistas particulares de objetos.
35 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS RESULTADOS CONCLUSÕES
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
36 / 37Estudo analítico de design da informação em instruções visuais animadas na internet // Gui R. Storck
INTRODUÇÃO OBJETIVOS MATERIAIS E MÉTODOS RESULTADOS CONCLUSÕES
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.