TCC em Design Visual da Agatha Marques - Parte 3
Como falei nas postagens anteriores da série em que compartilho o meu TCC, no primeiro semestre de 2019 eu me dediquei quase que exclusivamente ao desenvolvimento desse projeto. O resultado que obtive foi muito completo e gratificante, e por isso, resolvi compartilhá-lo em tópicos com todos que tiverem interesse.
Tinha como objetivo criar um Infográfico Digital Interativo que auxiliasse músicos independentes a melhorar sua comunicação nas redes sociais, através de ensinamentos sobre marketing digital. Para chegar ao resultado final estudei diversas áreas de conhecimento.
Nas postagesns anteriores compartilhei minha pesquisa sobre Marketing Digital e Comunicação Visual e Design de Informação, hoje compartilho meu estudo sobre Design Instrucional, área muito importante para processos de comunicação em plataformas e materiais de aprendizado online.
O infográfico final que produzi pode ser visualizado no meu Portfólio Online e caso tenham interesse de ler o artigo na íntegra, podem acessar diretamente clicanco aqui.
DESIGN INSTRUCIONAL
Segundo o Instructional Design Center (2018) design instrucional pode ser compreendido como o processo pelo qual produtos e experiências de aprendizado são projetados, desenvolvidos e entregues. Esses produtos de aprendizado incluem cursos on-line, manuais de instruções, tutoriais em vídeo, simulações de aprendizado, etc. Reigeluth (1983) e Filatro e Piconez (2004) convergem na linha de pensamento ao definir o design instrucional como uma importante ferramenta auxiliar no processo de aprendizagem humano, sendo um método de instrução ou educação online que auxilia no planejamento, preparação, projeto, produção e publicação de textos, imagens, gráficos, sons e movimentos ancorados em suportes visuais. Filatro (2008) também complementa esse raciocínio:
Definimos design instrucional como a ação intencional e sistemática de ensino que envolve o planejamento, o desenvolvimento e a aplicação de métodos, técnicas, atividades, materiais, eventos e produtos educacionais em situações didáticas específicas, a fim de promover, a partir dos princípios de aprendizagem e instrução conhecidos, a aprendizagem humana. Em outras palavras, definimos design instrucional como o processo (conjunto de atividades) de identificar um problema (uma necessidade) de aprendizagem e desenhar, implementar e avaliar uma solução para esse problema.
Filatro e Piconez (2004) vêem a Internet como um mecanismo facilitador de ensino, e, trazendo o design instrucional para esse meio podemos planejar, desenvolver e aplicar técnicas didáticas flexíveis e potencializadas. Filatro (2008) caracteriza as tecnologias de aplicação de educação online nas seguintes categorias:
Distributivas: Do tipo um-para-muitos, pressupõem um aluno passivo diante de um ensino mais diretivo. As tecnologias distributivas são muito empregadas quando o objetivo é a aquisição de informações.
Interativas: Do tipo um-para-um, pressupõem um aluno mais ativo que aprende, no entanto, de forma isolada. As tecnologias interativas são bastante usadas quando o objetivo é o desenvolvimento de habilidades.
Colaborativas: Do tipo muitos-para-muitos, pressupõem a participação de vários alunos que interagem entre si. As tecnologias colaborativas são apropriadas quando o objetivo é a formação de novos esquemas mentais.
Filatro (2008) categoriza também o design instrucional de acordo com fatores contextuais, tecnológicos e com sua utilização em diferentes realidades educacionais:
Design instrucional fixo (ou fechado - DI fixo): Baseia-se no planejamento e produção dos componentes antes da ação de aprendizagem, pode dispensar a participação de um educador e é dirigido para educação em massa. O especialista em design instrucional configura o fluxo de aprendizagem e faz com que suas ações sejam automatizadas, transformando o processo de aprendizagem em algo fixo.
Design instrucional aberto (DI aberto): Necessita da participação de um educador durante sua execução, privilegia mais os processos de aprendizagem do que os produtos, sendo seus artefatos criados, refinados ou modificados durante a execução da ação educacional. O educador possui a liberdade de reajustar opções pré-configuradas, adaptando-as no decorrer do percurso a partir do feedback obtido junto aos alunos.
Design instrucional contextualizado (DIC): Busca o equilíbrio entre a automação de processos do DI fixo e a personalização de métodos do DI aberto. Gera um plano base para o processo de ensino/aprendizagem pré-configurado e o ajusta durante o processo de acordo com os feedbacks recebidos.
O design instrucional e o processo cognitivo
Apesar de possuir um grande potencial, o cérebro humano e suas capacidades cognitivas e de retenção de informações possuem limitações. Visto essa limitação, há estudos que abordam maneiras de potencializar sua capacidade para melhorar os processos de aprendizagem, sendo fundamental avaliar os fatores cognitivos envolvidos no sistema homem-máquina, desde a detecção de sinais até o processamento de informação, tomada de decisão e resposta (GUIMARÃES, 2002).
Dondis (2007) complementa afirmando que a análise do processo da percepção humana é fundamental para que sejam compreendidos os critérios de aprendizado através de formas visuais e o potencial sintático das estruturas no alfabetismo visual. Segundo Guimarães (2002):
As atividades mentais são parte das atividades cognitivas. Situam-se além do tratamento de informações sensoriais, de origens ambientais ou linguísticas, e precedem a programação motriz, a execução e o controle dos movimentos, que são a realização comportamental das ações. Ainda que não possam ser observadas diretamente, podem ser inferidas a partir dos comportamentos e verbalizações, podendo ser simuladas pelos modelos de tratamento da informação. Essas simulações apresentam características que nos permitem testar empiricamente nossas hipóteses sobre estas atividades.
As informações são recebidas pelo cérebro e armazenadas primeiramente em uma memória sensorial por aproximadamente um a dois segundos. Após esse período são transferidas para a memória de trabalho, onde interagem com os conhecimentos armazenados na forma de modelos mentais e, por fim, são armazenadas na memória de longo prazo. Para criar modelos mentais coerentes é preciso que haja um envolvimento ativo no processo cognitivo, sendo necessário três fatores importantes por conta do aprendiz: atenção, organização de informações e integração da informação a conhecimentos já existentes (FILATRO, 2008). Cybis et al. (2007) citam como interfaces bem planejadas podem auxiliar nesse processo:
Os sistemas ergonômicos possuem Interface Humano-Computador adaptadas a seus usuários e às maneiras como eles realizam suas tarefas. As interfaces com tais características oferecem usabilidade às pessoas que as utilizam, proporcionando-lhes interações eficazes, eficientes e agradáveis. Os usuários se sentem confiantes e satisfeitos pelas facilidades que encontram durante o aprendizado com um novo sistema que lhes permite atingir seus objetivos com menos esforço, em menos tempo e com menos erros.
Segundo Kahneman (2012), transmitir mensagens claras, objetivas e com linguagem familiar ao receptor da mensagem, faz com que ele perceba uma experiência positiva sobre o que está visualizando, causando assim, o dito “relaxamento do conforto cognitivo”, que mostra ao receptor que não há a necessidade de redirecionar a atenção ou de mobilizar esforços, trazendo confiança e credibilidade à mensagem e facilitando sua fixação.
Segundo Filatro (2008) o design instrucional deve adotar princípios que reduzam a carga cognitiva, liberando a memória de trabalho para os processos de integração com os modelos mentais, eliminando informações visuais irrelevantes, omitindo músicas de fundo e som ambiente que não estão relacionados ao conteúdo e apresentando textos objetivos, facilitando assim a concentração do aprendiz na informação que é relevante. A autora afirma ainda que:
O design instrucional também pode contribuir para a recuperação e a transferência dos conhecimentos armazenados na memória de longo prazo. Para isso, deve oferecer exemplos e atividades práticas que incorporem elementos e situações autênticas dos contextos de uso pós-aprendizagem. Isso ajuda os alunos a criar âncoras de recuperação e transferência do aprendizado.
O design instrucional e os princípios da Gestalt
A teoria da percepção da Gestalt visa esclarecer como o cérebro humano reage e se relaciona com as informações visuais contidas em imagens e elementos através de indicações como proximidade e similaridade (UX PLANET, 2018).
Lupton e Phillips (2015) complementam esse pensamento afirmando que
o cérebro [...] funde o que vemos com o que conhecemos para construir um entendimento coerente do mundo [...] preenchendo lacunas, deixando de fora os dados irrelevantes.
De acordo com Filatro (2008), a Gestalt contribuiu muito para o design no quesito de interfaces humano-computador, trazendo o conhecimento sobre as percepções visuais geradas pelo cérebro humano, fortemente influenciada por nossos conhecimentos anteriores, determinadas não apenas por suas partes individuais, mas também por sua organização. Visto isso, determina alguns princípios de acordo com os estímulos visuais percebidos:
Princípio da proximidade: Tendência a agrupar elementos que estão próximos.
Gestalt: Representação do princípio da proximidade.
Princípio do fechamento: Tendência a completar linhas descontinuadas (Figura 16).
Gestalt: Representação do princípio do fechamento.
Princípio da segregação figura-fundo: Tendência a perceber padrões significativos (figura), enquanto partes mais difusas se tornam recuadas (fundo). Para que uma imagem seja percebida, é preciso que haja destaque quanto ao fundo, quando esses padrões se tornam conflitantes, os estímulos visuais podem dividir a atenção do observador (Figura 17).
Gestalt: Representação do princípio da segregação figura-fundo.
Princípio da similaridade: Tendência a agrupar elementos que possuem algum tipo de semelhança (Figura 18).
Gestalt: Representação do princípio da similaridade.
Princípio da simplicidade: Tendência a reduzir a realidade a sua forma mais simples (Figura 19).
Gestalt: Representação do princípio da simplicidade.
Princípio das representações: Muito semelhante a semiótica, visa a tendência de codificarmos palavras, desenhos, marcas e sinais já conhecidos de acordo com um conjunto de códigos universais culturais e pessoais.
Aplicar os princípios da Gestalt em uma interface pode melhorar muito a experiência do usuário, fazendo com que este sinta-se à vontade, além de influenciar positivamente na hierarquia visual do sistema (UX PLANET, 2018).
Uma boa hierarquia visual poupa trabalho ao cérebro humano ao processar a página, organizando e priorizando o conteúdo de modo que possamos entendê-la quase instantaneamente (KRUG, 2014).
Utilização de multimídia no design instrucional
A utilização de recursos multimídia tem sido muito utilizada para complementar informações em plataformas online. Estudos estimam que o cérebro humano dedica entre 50% e 80% do seu processamento para analisar formas visuais, como visão, memória visual, cores, formas, movimento, padrões, percepção espacial e lembranças de imagens (KRUM, 2014). Segundo Filatro (2008), com base na teoria cognitiva, recursos gráficos ou multimídia facilitam o processo cognitivo, pois os sistemas verbais e não verbais funcionam de forma independente, mas criam conexões entre si, afirmando:
Alguns autores propõem a existência de outro sistema de processamento de informação além do sensorial. Esse sistema diz respeito ao modo de apresentação da informação e leva em conta aspectos não-verbais, como imagens, vídeos, animações, sons de fundo, e verbais, incluindo palavras escritas e faladas. A combinação de uma imagem com sua designação verbal é mais facilmente lembrada do que a apresentação dessa mesma imagem duas vezes ou a repetição dessa designação verbal várias vezes, de forma isolada.
A utilização de recursos multimídia atuam positivamente no processo de aprendizagem, podendo incentivar alunos a se empenharem mais na atividade, possibilitando melhores conexões mentais entre as representações visuais e verbais. Já quando é utilizado somente palavras para o ensino pode fazer com que alunos assimilem as informações apenas superficialmente, levando em consideração suas experiências e conhecimento linguístico (CLARK e MAYER, 2008). A Figura a seguir mostra as capacidades cognitivas do cérebro humano em relação a percepção de imagens.
O poder do visual no aprendizado online.
A memória sensorial capta imagens e palavras através de nossos olhos e ouvidos, permitindo que imagens e textos impressos sejam preservados na memória sensorial visual e que palavras e outros sons sejam mantidos como imagens auditivas na memória sensorial auditiva, ambas por um breve período. A memória de trabalho é usada para manter as informações temporariamente e manipular o conhecimento na consciência ativa, utilizando o lado esquerdo para basear-se nas modalidades sensoriais visual e auditivo (imagens visuais de imagens e imagens sonoras de palavras). Em contrapartida o lado direito é utilizado para representar o conhecimento obtido, baseando-se nas modalidades pictórico e verbal (modelos mentais pictóricos e verbais e elos entre eles). Já a memória de longo prazo pode manter grande quantidade de informação e conhecimento por um longo período de tempo, mas para funcionar ativamente, precisa estar interligada a memória de trabalho (MAYER, 2005). Esse processo pode ser analisado na Figura a seguir.
Representação do processamento dual da informação segundo Mayer.
De acordo com Filatro (2008), alguns princípios que orientam a concepção de materiais multimídia podem ser definidos como:
Princípio da multimídia: O aprendizado eletrônico é mais eficaz quando agrupa textos (escritos ou falados) e imagens (ilustrações, gráficos, mapas, fotos, animações ou vídeos).
Princípio da proximidade espacial: Poupando os recursos cognitivos, o aprendizado se torna mais eficaz quando os textos estão posicionados próximos aos recursos gráficos do qual se referem. Outros fatores também facilitam o ensino nesse quesito como hiperlinks abrirem em janelas que não cubram a tela original, orientações de atividades posicionadas na mesma tela de realização da tarefa e exibição de feedbacks na mesma tela na qual se realizou uma ação.
Princípio da coerência: Utilizar elementos objetivos e evitar elementos que possam dividir a atenção, como textos, imagens e sons que não sejam relacionados ao assunto.
Princípio da modalidade: Elementos gráficos ou de vídeo são melhores compreendidos quando acompanhados de narração ao invés de texto, devido a divisão da memória de trabalho que possui um subsistema para áudio.
Princípio da redundância: Para não sobrecarregar a memória de trabalho, não deve-se apresentar duas fontes de informação semelhantes que possam ser compreendidas em separado, por isso recomenda-se que a remoção de informações apresentadas anteriormente ou simultaneamente em outra mídia, informações irrelevantes ao que se está sendo analisado e informações que são de conhecimento prévio do aprendiz.
Princípio da personalização: As orientações instrucionais devem ser oferecidas, preferencialmente, em estilo informal, auxiliando o aprendiz em seus processos metacognitivos.
Princípio da prática: Para facilitar que o conhecimento seja fixado na memória de longo prazo, devem ser oferecidas atividades práticas para que o aprendiz seja desafiado e integre as informações aprendidas.
Nielsen (1995) define algumas diretrizes para utilização de recursos multimídia na web que auxiliam o usuário a manter-se focado na mensagem, absorvendo o máximo de informação relevante, sem excessos e sem distrações. São eles:
Animação: As imagens em movimento têm um efeito dominante sobre a visão periférica humana. Por esse motivo o autor recomenda que não seja incluído uma animação em permanente movimento em uma página da web, pois isso dificulta a concentração dos usuários na leitura do texto. O uso de animação pode ser vantajoso para: mostrar continuidade entre as transições, indicar dimensionalidade nas transições, ilustrar a mudança ao longo do tempo, propagar a exibição, enriquecer representações gráficas, visualizar estruturas tridimensionais e atrair atenção.
Vídeo: Desde o momento da publicação deste artigo os recursos de vídeo para web já evoluíram muito, por isso as informações dadas pelo autor estão um tanto quanto obsoletas. Contudo, é interessante notar que o autor cita alguns fatores que continuam sendo relevantes para essa mídia, como a atenção que se deve ter quanto a qualidade do vídeo e ter-se o cuidado de inserir legendas para que pessoas com deficiência auditiva possam ter acesso ao conteúdo.
Áudio: Um dos principais benefícios desse recurso é que fornece um canal separado do display, podendo ser utilizado sem obscurecer o restante das informações da página web. Efeitos sonoros podem desempenhar a função de uma dimensão extra na interface do usuário para informar os usuários sobre eventos de fundo, além de melhorar a experiência do usuário.
Tempo de resposta: É importante que o usuário tenha um retorno sobre suas ações dentro do sistema web, para isso, alguns pontos devem ser observados, como o tempo de resposta em que o usuário move o mouse e em que digita no teclado (0,1 segundos). Assim como quando o usuário realiza alguma ação mais demorada dentro do sistema, é necessário que haja algum indicativo de que a tarefa está sendo processada e seu status.
Usabilidade
Cybis et al. (2007) definem usabilidade como a qualidade que caracteriza o uso de programas e aplicações, sendo dependente de um acordo entre as características de sua interface e as características de seus usuários ao buscarem determinados objetivos em determinadas situações de uso. De acordo com a norma ISO 9241, usabilidade é a capacidade que um sistema interativo oferece a seu usuário, em determinado contexto de operação, para a realização de tarefas de maneira eficaz, eficiente e agradável.
Quando uma interface é mal projetada os usuários tendem a se sentir aborrecidos, o que gera frustração e a perda de auto-estima, algumas vezes até, faz com que o usuário se sinta culpado por não entender determinado sistema (CYBIS, et al., 2007). Para que uma interface seja considerada eficiente, ela precisa ser simples e fácil de utilizar, sendo autoexplicativa por si só, afirma Krug (2014), que define sua primeira lei de usabilidade como “Não me faça pensar!”. O autor a exemplifica como um usuário, ao examinar uma interface, deve perceber claramente suas funções, objetivos e quais as opções que ela lhe oferece em termos de ação. Convergindo com essa linha de pensamento, Filatro (2008) afirma:
A usabilidade tem um papel importante no design de interface para o aprendizado eletrônico. Isso porque os alunos interagem com os conteúdos, as atividades, as ferramentas e as outras pessoas - enfim, com a proposta de design instrucional - apenas depois de assimilarem o projeto visual e navegacional do curso.
Para Krug (2014), uma interface com boa usabilidade precisa conter alguns atributos:
Proveitosa (faz algo que as pessoas precisam que seja feito?);
Pode ser aprendida (as pessoas podem aprender a usá-la?);
Memorável (elas terão de aprender a cada vez que a usarem?);
Efetiva (consegue realizar a tarefa?);
Eficiente (compensa o esforço e o tempo gastos?);
Desejável (as pessoas a desejam?);
Prazerosa (usá-lo é prazeroso ou, ainda, divertido?).
Nielsen (1995) propõem um conjunto de dez heurísticas que auxiliam a analisar se um sistema é coerente e usável:
Visibilidade do estado do sistema: O sistema deve fornecer feedbacks apropriados, mantendo o usuário ciente sobre o que está acontecendo.
Mapeamento entre o sistema e o mundo real: É aconselhável que o sistema siga a lógica do mundo real e possua uma linguagem familiar ao usuário.
Liberdade e controle ao usuário: Frequentemente os usuários farão escolhas erradas no sistema e precisarão de uma “saída de emergência”. Esta, precisa estar exposta de maneira clara para que o usuário não tenha que realizar muitas ações.
Consistência e padrões: Procurar utilizar os mesmos termos, expressões ou linguagem gráfica para elementos que tenham o mesmo significado, para que os usuários não tenham dúvida quanto às funções do sistema.
Prevenção de erros: Procurar eliminar os erros do sistema, mas caso eles ocorram, oferecer mensagens claras sobre o que ocorreu e fornecer ações para repará-los.
Reconhecer em vez de relembrar: As instruções para utilização do sistema devem ser visíveis ou facilmente localizáveis sempre que necessário.
Flexibilidade e eficiência de uso: Permitir que usuários personalizem ações que podem ser realizadas com frequência e utilizar interações que deem a ele a opção de acelerar a obtenção do seu objetivo.
Design estético e minimalista: Deve-se eliminar os elementos e informações irrelevantes para que o usuário não se distraia.
Suporte para o usuário reconhecer, diagnosticar e recuperar erros: Fornecer mensagens com linguagem simples, indicando o problema e sugerindo possíveis soluções.
Ajuda e documentação: As informações de auxílio ao usuário deve ser fáceis de localizar e de serem entendidas pelo usuário, listando etapas a serem realizadas de maneira sucinta
BIBLIOGRAFIA
CLARK, R. C., MAYER, R. E. E-learning and the science of instruction: proven guidelines for consumers and designers of multimedia learning. San Francisco: Pfeiffer, 2008.
CYBIS, Walter. et al. Ergonomia e usabilidade: conhecimentos, métodos e aplicações. São Paulo: Novatec Editora, 2007.
FILATRO, Andrea; PICONEZ, Stela Conceição Bertholo. Design Instrucional Contextualizado. São Paulo: USP, 2004.
FILATRO, Andrea. Design instrucional na prática. São Paulo: Pearson Education do Brasil, 2008.
GUIMARÃES, Lia Buarque de Macedo. Ergonomia Cognitiva: Processamento da informação, erro humano, IHC. Porto Alegre: FEENG/UFRGS/EE/PPGEP, 2002.
Instructional Design Center. What is Instructional Design? 2018. Disponível em: <https://www.instructionaldesigncentral.com/whatisinstructionaldesign> Acesso em: 3 de setembro de 2018.
KAHNEMAN, Daniel. Rápido e Devagar: duas formas de pensar. Rio de Janeiro, Objetiva, 2012.
KRUG, Steve. Simplificando Coisas que Parecem Complicadas. Rio de Janeiro: Alta Books, 2014.
KRUM, Randy. Cool Infographics. Effective Communication with Data Visualization and Design. Indianopolis: Wiley, 2014.
LUPTON, Ellen; PHILLIPS, Jennifer Cole. Novos Fundamentos do Design. São Paulo: Cosac Naify, 2ª ed., 2015.
MAYER, Richard E. Multimedia Learning. Cambridge: Cambridge University Press, 2005.
NIELSEN, Jakob. 10 Usability Heuristics for User Interface Design. 1995. Disponível em: <https://www.nngroup.com/articles/ten-usability-heuristics/>. Acesso em: 28 de setembro de 2018.
REIGELUTH, Charles. Instructional Design Theories and Models: An Overview of Their Current Status. New Jersey: Lawrence Erlbaum Associates Publishers, 1983.
UX Planet. Exploring the Gestalt Principles of Design. 2018. Disponível em <https://uxplanet.org/exploring-the-gestalt-principles-of-design-6f63d0200b2b>. Acesso em: 28 de setembro de 2018.