<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>EBAI - Encontro Brasileiro de Arquitetura de Informação &#187; Infografia Multimídia.</title>
	<atom:link href="http://www.congressoebai.org/index.php/tag/infografia-multimidia/feed" rel="self" type="application/rss+xml" />
	<link>http://www.congressoebai.org</link>
	<description>Arquitetura de Informação, Usabilidade, Design de Interação, User Experience e muito mais</description>
	<lastBuildDate>Thu, 03 Nov 2011 12:06:28 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Infografia multimídia para apresentação de resultados de testes de usabilidade</title>
		<link>http://www.congressoebai.org/index.php/2009/infografia-multimidia-para-apresentacao-de-resultados-de-testes-de-usabilidade/10</link>
		<comments>http://www.congressoebai.org/index.php/2009/infografia-multimidia-para-apresentacao-de-resultados-de-testes-de-usabilidade/10#comments</comments>
		<pubDate>Sat, 17 Oct 2009 12:45:04 +0000</pubDate>
		<dc:creator>Guilhermo</dc:creator>
				<category><![CDATA[3º EBAI - 2009]]></category>
		<category><![CDATA[Estudo de Caso]]></category>
		<category><![CDATA[Trabalhos Aprovados]]></category>
		<category><![CDATA[Arquitetura de informação]]></category>
		<category><![CDATA[Documentação]]></category>
		<category><![CDATA[Infografia Multimídia.]]></category>
		<category><![CDATA[metodologia]]></category>
		<category><![CDATA[Usabilidade]]></category>

		<guid isPermaLink="false">http://www.eduardo-reis.com/index.php/2010/infografia-multimidia-para-apresentacao-de-resultados-de-testes-de-usabilidade/04</guid>
		<description><![CDATA[Este artigo aborda o uso de infografia multimídia na apresentação de resultados de testes de usabilidade levando em consideração os conceitos de Arquitetura de Informação e Usabilidade e descreve a metodologia utilizada para a realização do estudo de caso apresentado, cujo objetivo é apresentar as informações de forma clara e simplificada, facilitando o entendimento do  ... <p><small><a href="http://www.congressoebai.org/index.php/2009/infografia-multimidia-para-apresentacao-de-resultados-de-testes-de-usabilidade/10">+ Veja Mais</a></small></p>]]></description>
			<content:encoded><![CDATA[<p style="text-align: right;"><small><a href="/wp-content/uploads/61-156-2-SM-com-nome.pdf" target="_blank">Versão em PDF</a> | <a href="/index.php/2010/infografia-multimidia-para-apresentacao-de-resultados-de-testes-de-usabilidade/04/61-222-1-sp">Apresentação</a></small></p>
<p><strong>Alessandro Dias<br />
</strong><em>Instituto Nokia de Tecnologia – IndT &#8211; Brasil (<a href="http://www.indt.org.br">www.indt.org.br</a>)</em></p>
<p>Designer Gráfico e Especialista em Arte-Multimídia formado pela Universidade Federal do Amazonas &#8211; UFAM com atuação em Experiência do Usuário e Design de Informação no Laboratório de Usabilidade Rosaurea Magalhães do Instituto Nokia de Tecnologia &#8211; INdT.</p>
<p><strong>Francimar Maciel<br />
</strong><em>Instituto Nokia de Tecnologia – IndT &#8211; Brasil (<a href="http://www.indt.org.br">www.indt.org.br</a>)</em></p>
<p>Designer e Especialista em Ergodesign formada pela Universidade Federal do Amazonas &#8211; UFAM com atuação em Pesquisas de Experiência do Usuário e Usabilidade no Laboratório de Usabilidade Rosaurea Magalhães do Instituto Nokia de Tecnologia &#8211; INdT.</p>
<h2>Sumário</h2>
<p><em>Este artigo aborda o uso de infografia multimídia na apresentação de resultados de testes de usabilidade levando em consideração os conceitos de Arquitetura de Informação e Usabilidade e descreve a metodologia utilizada para a realização do estudo de caso apresentado, cujo objetivo é apresentar as informações de forma clara e simplificada, facilitando o entendimento do usuário.<br />
</em></p>
<h2>Palavras-chave</h2>
<p><em>Arquitetura de Informação, Usabilidade, Metodologia, Documentação, Infografia Multimídia<br />
</em></p>
<h2>1. Apresentação</h2>
<p>Definitivamente o mundo está vivendo a era da revolução da informação. A <em>Web</em> 2.0 e suas Redes Sociais como <em>Blogs</em>, <em>Orkut</em>, <em>Facebook</em> e <em>Twitter</em> tem mudado a forma de gerar e compartilhar informações. Canais regulares como jornais e revistas não são mais os únicos a fornecerem informações confiáveis e relevantes. Neste processo, onde a informação é colaborativa, redatores e leitores compartilham conhecimentos. Atentos às preferências e necessidades de seus usuários grandes corporações estão extendendo seus canais de relacionamento para o mundo digital através de tais ferramentas.</p>
<p>Este cenário apresenta a preocupação das empresas sobre fatores múltiplos e diversificados de apresentar a informação, diante de um grande volume de dados.</p>
<p>Diante deste contexto verifica-se o crescente investimento de empresas no desenvolvimento de sistemas capazes de proporcionar para diferentes níveis de usuários informações com qualidade e relevância, utilizando como ferramenta para avaliar a qualidade de suas interfaces e artefatos testes de usabilidade.</p>
<p>Segundo FERREIRA &amp; NUNES (2008), a usabilidade deve ser considerada em todas as interações de sistemas que lidam com informações, tornando transparente a interação humano-máquina e permitindo ao usuário focar nas atividades que ele pretende realizar por meio da interface.</p>
<p>Tais testes apresentam-se sob forma de relatório e reunem dados qualitativos e quantitativos demonstrando falhas no modelo de informação projetada e tornam possível melhorias no interface, o que demonstra a importância de apresentar de forma coerente, clara e hierárquica as informações coletadas na avaliação.</p>
<p>Para PRESSMAN, <em>apud</em> FERREIRA &amp; NUNES (2008), &#8220;o diálogo entre usuário e o programa se estabelece por meio da interface. Um dos principais objetivos no desenho de interfaces é faze-las amigáveis, ou seja, que não apresentem dificuldades ao usuário e, assim, o estimulem a utiliza-las. Só se considera amigável o sistema que leva em conta tanto os fatores humanos como os fatores do domínio (compreensão do problema) – em outras palavras, em que se obtém um diálogo natural&#8221;.</p>
<p>A partir deste panorama o presente artigo apresenta um estudo sobre a integração de informações de dados qualitativos e quantitativos em testes de usabilidade utilizando recursos infográficos interativos visando contribuir para o estabelecimento de um mecanismo com foco na transmissão de informação.</p>
<h2>2. Arquitetura da Informação e Usabilidade</h2>
<p>Atualmente é comum associarmos rapidamente o termo usabilidade com a simplicidade e facilidade de uso de interfaces gráficas digitais, toma-se como exemplo as usadas em celulares, softwares ou websites, contudo deve-se lembrar que originalmente este termo foi usado para definir a facilidade com que as pessoas usavam uma ferramenta ou objeto a fim de realizar uma tarefa específica.</p>
<p>Qualquer projeto de design deve ser concebido tendo-se em vista a facilidade de uso pelo usuário final, respeitando evidentemente a definição de requisitos, quer sejam funcionais (necessárias para cumprir os objetivos do sistema) ou não funcionais (qualidade e facilidade do sistema).</p>
<p>Segundo NIELSEN, <em>apud</em> FERREIRA &amp; NUNES (2008), &#8220;a usabilidade se determina pelas seguintes características: facilidade de manuseio, capacidade de aprendizado rápido, dificuldade de esquecimento, ausência de erros operacionais, satisfação do usuário e eficiência na execução das tarefas a que se propõe&#8221;.</p>
<p>NORMAN, <em>apud</em> FERREIRA &amp; NUNES (2008) comenta que nos sistemas orientados<em><br />
</em>para a usabilidade, a informação deve fluir naturalmente, sem deter a atenção do usuário, permitindo-lhe, desse modo, dedicar-se exclusivamente àquilo que ele pretende realizar. Tais sistemas aumentam o rendimento do trabalho, pois poupam ao usuário a leitura de manuais ou a consulta ao suporte técnico. Desta maneira, ao projetar um software, o profissional deve concentrar a atenção em atender às necessidades e expectativas do usuário – ou seja, em fazer do usuário o foco do seu interesse.</p>
<p>Conforme a norma ISO 9241 a usabilidade pode ser especificada ou medida segundo a facilidade de aprendizado e de memorização, que são aspectos importantes para quem apresenta uma grande quantidade de informação em curto tempo e de forma sequenciada.</p>
<p>Para FERREIRA &amp; NUNES (2008), sistemas de informação constituem veículos de comunicação importantes pelos quais são publicados diariamente textos, artigos e idéias a milhares de usuários por todo mundo. Independentemente da forma, essa comunicação é feita através de textos, imagens, sons, vídeos, animações, combinações de cores, objetivando fornecer informações completas, inequívocas e inteligíveis.</p>
<p>Contudo o excesso de informação pode gerar o que Davis Lewis batizou de Síndrome da Fadiga de Informação, que é caracterizada por tensão, irritabilidade e sentimento de abandono causado pela sobrecarga de informação a que o ser humano está exposto.</p>
<p>Com o propósito de combater estes sentimentos negativos causados pelo excesso de informação, em 1976 Richard Wurman criou um novo objeto de estudo chamado Arquitetura de Informação, cujo objetivo é organizar a informação de forma que seus usuários assimilem com facilidade, tornando um sistema complexo em claro, conforme abordado por REIS (2006).</p>
<p>TOUB, <em>apud</em> REIS (2006) reforça isto citando que: Arquitetura de Informação é a arte e a ciência de estruturar e organizar ambientes de informação para ajudar as pessoas a satisfazerem suas necessidades de informação de forma efetiva&#8221;.</p>
<p>ROSENFELD &amp; MORVILLE, <em>apud</em> REIS (2006) expõem que para elaborar a arquitetura de qualquer sistema de informação é fundamental conhecer os usuários, suas necessidades, hábitos, comportamentos e experiências, porém estas informações não são suficientes, é necessário também entender características do conteúdo que será apresentado e as especificidades do contexto de uso. Esta tríade, usuário-conteúdo-contexto e suas interdependências são únicas para cada projeto e o papel do arquiteto é justamente conseguir balanceá-las, para que a informação certa seja acessada pela pessoa certa no momento certo.</p>
<p>De acordo com BALLE, <em>apud</em> MORAES (2002) o que importa não é o conteúdo da mensagem, mas o modo como está é transmitida e, mais ainda, o meio através do qual é transmitida. No meio digital diversificados <em>sites</em> e <em>blogs</em> orientam para esta investigação, toma-se como exemplo o <em>blog</em> &#8220;Tá dificil (fig. 1) que apresenta de forma descritiva relatos e problematizações em diversificados meios de comunicação, sejam materiais ou digitais.</p>
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam1.png" alt="" /><span style="color: black; font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 1 &#8211; <em>Blog</em> que registra problemas de usabilidade.<br />
Fonte: http://tadificil.wordpress.com<br />
</strong></p>
<p>Esta realidade aponta para o paradigma de pensar na comunicação em conjuntos, convidando a estruturar de forma hierárquica as atividades e dados apresentados em testes de usabilidade, levando em consideração não somente os objetivos, mas também quais mecanismos e tecnologias serão utilizados como meios e canais de transmissão da informação.</p>
<h2>3. Infografia e Interatividade</h2>
<p>O termo infográfico vem do inglês <em>informational graphics</em> e contempla texto e imagem a fim de transmitir uma mensagem visualmente atraente para o leitor, mas com contundência de informação.</p>
<p>Para COLLE, <em>apud</em> RIBAS (2004), &#8220;um infográfico é uma unidade especial que se utiliza de uma combinação de códigos icônicos e verbais para dar uma informação ampla e precisa, para a qual um discurso verbal resultaria mais complexo e requereria mais espaço. Se diferencia essencialmente dos códigos verbo-icônicos tradicionais (como a cartografia) pela combinação de códigos icônicos (pictogramas, sinais, etc) e pela inclusão e tratamento de textos como nas histórias em quadrinhos. Produz de certo modo uma fusão dos tipos verbais e icônicos de discursos e não somente justaposição de elementos&#8221;.</p>
<p>No contemporâneo em função do intenso uso da Internet pode-se afirmar que a comunicação tornou-se multimídia. Chega-se a facilmente a esta conclusão quando percebe-se que um simples sistema de <em>microblogging</em> como o <em>Twitter</em> que só permite &#8220;<em>posts</em>&#8221; com no máximo 140 caracteres faz constantemente referências a outros canais de compartilhamento de mídias como <em>Youtube, SlideShare </em>e <em>Flickr.<br />
</em></p>
<p>Nesta mesma velocidade noticias online tem utilizado aliados na tarefa de tornar a informação mais rápida, simples e atrativa de leitura e visualização, são exemplos da utilização de infográficos interativos como forma de atribuir elementos multimídia para enriquecimento da forma de explorar e apresentar uma notícia.</p>
<p>MÓDOLO &amp; JUNIOR (2007), defendem que um infográfico não deve ser considerado apenas um conjunto de tabelas, cores, desenhos, fotos com o intuito de deixar a informação mais bonita, mas sim facilitar a compreensão da informação e oferecer uma noção mais rápida e clara dos sujeitos, do tempo e do espaço da informação.</p>
<p>Nos meios impressos, como jornais e revistas, os infográficos são largamente utilizados para explicar com maior clareza algum aspecto informativo tratado nos texto. Atualmente na Web aparece de duas formas: como informação complementar de uma noticia, geralmente servindo de ilustração para o texto, ou como a própria notícia, a informação principal, o que ainda ocorre em poucos casos, (fig. 2).</p>
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam2.png" alt="" /><span style="font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 2 &#8211; Exemplo de Infográfico: Revista PCWorld – Matéria Economize com o VoIP<br />
</strong></p>
<p style="text-align: center;"><strong>Fonte: http://pcworld.uol.com.br/reportagens/2007/03/01/idgnoticia.2007-03-01.4648507113<br />
</strong></p>
<p style="text-align: center;">
<p>A infografia multimídia mantém as características essenciais da infografia impressa, mas ao ser realizada através de outros processos tecnológicos, agrega as potencialidades do meio e ser apresentada em outro suporte, estende sua função, altera sua lógica, incorpora novas formas condizentes com a relevância da informação apresentada. A seguir o exemplo da tela de apresentação da reportagem surdos digitais (ÉPOCA, 2009) onde apresenta-se dados que informam como <em>iPods </em>atingem o limite do permitido antes da metade do volume, utilizando texto, ícones, cores e gráficos (fig.3). Neste informações referentes a ações para utilizar o aparelho de modo seguro são destacadas com sobreposição na cor laranja sobre o texto na cor preto. Para apresentar a relação entre nível de ruído mínimo e máximo utilizou-se o recurso visual de ícones e linhas fazendo associação com gráficos, com valores de mínimo e máximo organizados da esquerda para direita, tornando fácil a compreensão do usuário, reduzindo o uso de textos ou outros elementos que aumentariam estímulos durante o processamento da informação.</p>
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam3.png" alt="" /><span style="font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 3 &#8211; Infografia. Multimídia da Matéria Surdos Digitais da Revista Online Época<br />
</strong></p>
<p style="text-align: center;"><strong>http://revistaepoca.globo.com/Revista/Epoca/0,,EMI67215-15201,00.html<br />
</strong></p>
<p>RIBAS (2004) opta pela denominação &#8220;infografia multimídia considerando a potencialidade dessa unidade informativa enquanto modelo composto de formatação do discurso na Web. A infografia multimídia pode aproveitar-se das seis características do meio: multimidialidade / convergencia, interatividade, hipertextualidade, customização do conteúdo / personalização, memória e instantaneidade / atualização continua&#8221;.</p>
<p>NICHANI &amp; RAJAMANICKAM, <em>apud</em> RIBAS (2004) apresentam um sistema de classificação de infográficos interativos, contribuindo para a composição de narrativas diferenciadas, tendo em mente o público para o qual são estruturadas. A classificação baseia-se na intenção comunicativa do produto e tem como objetivo garantir a eficiência do infográfico na apresentação de diferentes tipos de conteúdo.</p>
<div style="margin-left: 5pt;">
<table style="border-collapse: collapse;" border="0">
<colgroup span="1">
<col style="width: 163px;" span="1"></col>
<col style="width: 212px;" span="1"></col>
<col style="width: 221px;" span="1"></col>
</colgroup>
<tbody>
<tr>
<td style="padding-left: 7px; padding-right: 7px; border: solid black 0.5pt;">
<p style="text-align: center;"><strong>Categoria</strong></p>
</td>
<td style="padding-left: 7px; padding-right: 7px; border-top: solid black 0.5pt; border-left: none; border-bottom: solid black 0.5pt; border-right: solid black 0.5pt;">
<p style="text-align: center;"><strong>Objetivo</strong> </p>
</td>
<td style="padding-left: 7px; padding-right: 7px; border-top: solid black 0.5pt; border-left: none; border-bottom: solid black 0.5pt; border-right: solid black 0.5pt;">
<p style="text-align: center;"><strong>Característica</strong> </p>
</td>
</tr>
<tr>
<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid black 0.5pt; border-bottom: solid black 0.5pt; border-right: solid black 0.5pt;">Narrativos </td>
<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: none; border-bottom: solid black 0.5pt; border-right: solid black 0.5pt;"><em>Explicam algo possibilitando ao usuário envolver-se com o propósito apresentado pela história.</em> </td>
<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: none; border-bottom: solid black 0.5pt; border-right: solid black 0.5pt;"><em>Histórias (factuais, ficcionais, partidárias) contadas a partir de um ponto de vista. Incluem anedotas, histórias pessoais, de negócios, estudos de casos, etc.<br />
</em></td>
</tr>
<tr>
<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid black 0.5pt; border-bottom: solid black 0.5pt; border-right: solid black 0.5pt;">Instrutivos </td>
<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: none; border-bottom: solid black 0.5pt; border-right: solid black 0.5pt;"><em>Explicam algo habilitando o usuário a seguir sequencialmente o conteúdo.</em> </td>
<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: none; border-bottom: solid black 0.5pt; border-right: solid black 0.5pt;"><em>Instruções passo a passo que expliquem como as coisas funcionam ou como os eventos acontecem.<br />
</em></td>
</tr>
<tr>
<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid black 0.5pt; border-bottom: solid black 0.5pt; border-right: solid black 0.5pt;">Exploratórios </td>
<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: none; border-bottom: solid black 0.5pt; border-right: solid black 0.5pt;"><em>Dão ao usuário a oportunidade de explorar e descobrir o conteúdo e suas invenções.</em> </td>
<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: none; border-bottom: solid black 0.5pt; border-right: solid black 0.5pt;"><em>Qualquer narrativa que permita ao usuário explorar ativamente o conteúdo para compreender o seu sentido.<br />
</em></td>
</tr>
<tr>
<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: solid black 0.5pt; border-bottom: solid black 0.5pt; border-right: solid black 0.5pt;">Simulatórios </td>
<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: none; border-bottom: solid black 0.5pt; border-right: solid black 0.5pt;"><em>Permitem ao usuário a experiência de um fenômeno do mundo real.<br />
</em></td>
<td style="padding-left: 7px; padding-right: 7px; border-top: none; border-left: none; border-bottom: solid black 0.5pt; border-right: solid black 0.5pt;"><em>Qualquer narrativa que permita ao usuário experimentar um acontecimento como se estivesse nele.</em></td>
</tr>
</tbody>
</table>
</div>
<p style="text-align: justify;">
<p style="text-align: center;"><strong>Fig. 4 &#8211; Tabela de classificação para infográficos interativos.<br />
</strong></p>
<p style="text-align: center;"><strong>Fonte: RIBAS (2004)<br />
</strong></p>
<h2>4. Infografia Interatividade em testes de usabilidade</h2>
<p>A partir da coleta de informações de forma comparativa sobre o comportamento de diferentes usuários utilizando o processo <em>&#8220;unboxing</em>&#8220;, um processo onde o usuário analisa um produto desde a abertura da caixa (fig. 5), comentando suas impressões e avaliando suas funcionalidades, tornou-se necessário desenvolver um modelo de apresentação das informações coletadas nos testes, pois verificou-se que diferentes variáveis necessitariam ser apresentadas com significado claro em uma mesma tela e sequência.</p>
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam4.png" alt="" /><span style="color: black; font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 5 &#8211; Exemplo de Unboxing<br />
</strong></p>
<p style="text-align: center;"><strong>Fonte:http://www.flickr.com/photos/mbiddulph/2179834775/sizes/l/in/set-72157603676198183<br />
</strong></p>
<p>Para este foram utilizados diferentes modelos de aparelhos celular de um mesmo fabricante levando em consideração suas funcionalidades principais como: música, internet, envio de mensagens, mapas e compartilhamento de conteúdo, onde para cada aparelho foi realizado 5 avaliações de usabilidade por usuários finais. As tarefas propostas para a avaliação foram separadas nas fases: abrindo a caixa, verificação da parte do hardware, ligando o telefone, introduzindo ao uso e utilizando o telefone.</p>
<p>Os dados foram coletados através de registros em vídeo, entrevistas, preenchimento de questionários e anotações de comentários (<em>observação participativa</em>). As principais informações definidas para apresentação no relatório técnico de usabilidade foram: a facilidade do uso das tarefas, observadas através do tempo de execução destas tarefas, dados quantitativos e a satisfação do usuário que pode ser classificada em três níveis: satisfação, tensão ou insatisfação definidos através da Análise de Expressões Faciais, dados qualitativos.</p>
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam5.png" alt="" /><span style="color: black; font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 6 &#8211; Tabela de Análise de Expressões Faciais<br />
</strong></p>
<p>Ressalta-se que expressões Faciais para Testes de Usabilidade podem ser consideradas vantajosas em relação a outras ferramentas de avaliação, em função de refletirem os estados emocionais a partir da observação do movimento dos músculos faciais em consonância com a tarefa realizada. Contudo estas avaliações resultam em um grande número de variáveis a serem apresentadas em relatórios, pois a estes dados qualitativos são acrescidos informações quantitativas como tempo por tarefa, sequencia de atividades, perfil do usuário e modelos de aparelhos testados.</p>
<h2>5. Metodologia</h2>
<p>Seguir uma metodologia definida torna o trabalho de Arquitetura de Informação mais organizado e produtivo, diminuindo as chances de falhas nos projetos.</p>
<p>De acordo com MORROGH, <em>apud</em> REIS (2006), &#8220;se o processo para gerenciar o design de ambientes de informação não for explicito, as chances de falhas aumentam, Portanto, o gerenciamento do design de ambientes de informação é mais efetivo quando segue um método&#8221;.</p>
<p>Segundo CHIOU, <em>apud</em> REIS (2006), processos de design são criativos e de grande esforço intelectual onde se faz um balanceamento entre forma e função para criar um objeto útil e agradável aos usuários. Estes processos normalmente possuem quatro fases, que precisam estar presentes nas metodologias de Arquitetura de Informação: análise, representação, implementação e avaliação.</p>
<p>Para o estudo de informações apresentadas em relatórios de testes de usabilidade foi definido uma sequencia de ações para estabelecer o modelo para integração e apresentação dos diferentes resultados obtidos. A seguir observa-se os pontos principais desta metodologia que serviu de parâmetro para o desenvolvimento de infográficos interativos e outros elementos para apresentação de resultados em testes de usabilidade.</p>
<p><strong>Classificação dos Resultados Coletados: </strong>Identificação e análise dos tipos de resultados obtidos no teste de usabilidade e o agrupamento de informações por semelhança;</p>
<p><strong>Fluxo de Exibição dos Resultados: </strong>Criação do fluxo de exibição dos resultados, definindo as possibilidades de sequência, de forma a dar o melhor significado ao processo;</p>
<p><strong>Definição de Ferramentas para Integração: </strong>Pesquisa de ferramentas e tecnologias a serem utilizadas para integrar os resultados e dar flexibilidade para que o usuário possa visualizar as informações com liberdade, permitindo retornar em pontos específicos, esclarecendo possíveis dúvidas.</p>
<p><strong>Elaboração de Gráficos e Elementos Visuais: </strong>Conversão dos dados das tabelas em gráficos possibilitando o acompanhamento dos resultados de forma visual, bem como a definição de elementos visuais de suporte.</p>
<p><strong>Consolidação dos Resultados: </strong>Combinação dos diferentes tipos de resultados na mesma área de tela possibilitando ao usuário a comparação de dados e/ou a melhor compreensão através de mídias complementares e sua posterior avaliação.</p>
<h3>5.1. Classificação dos Resultados Coletados</h3>
<p>O texto poderá ser escrito apenas em Português. Caso deseje o autor pode incluir um abstract em inglês para melhorar sua indexação, mas não é necessário.</p>
<p>Segundo PREECE, ROGERS &amp; SHARP (2005), os dados coletados podem ser classificados de três formas:</p>
<p><strong>Dados qualitativos</strong> que são <em>interpretados</em> e utilizados para &#8220;contra a história&#8221; que foi observada.</p>
<p><strong>Dados qualitativos</strong> que são <em>categorizados</em> utilizando-se técnicas como análise de conteúdo.</p>
<p><strong>Dados quantitativos</strong> que são <em>coletados</em> a partir dos logs da interação e de videos e apresentados como valores, tabelas, quadros e gráficos, recebendo um tratamento estatistico.</p>
<p>A maioria dos dados observados são qualitativos e sua análise envolve interpretar o que os usuários estavam fazendo ou dizendo observando-se os padrões dos dados. Em alguns casos, os qualitativos são categorizados de modo a poder ser quantificados, pois em se tratando de expressões faciais faz-se necessário relatar a quantidade em números da ocorrência de determinada expressão para determinada atividade solicitada ao usuário.<strong><br />
</strong></p>
<h4>5.1.1. Dados Quantitativos Processados</h4>
<h5>5.1.1.1. Tempo de Realização das Tarefas</h5>
<p>Em testes de usabilidade o tempo de realização das tarefas permite a comparação de desempenho entre os usuários e a média de tempo para cada fase. Para se obter uma média mais próxima do real, desconsiderou-se os menores e maiores tempos. <strong><br />
</strong></p>
<h5>5.1.1.2. Tabela de Ocorrências de Expressões Faciais</h5>
<p>Com base na análise técnica dos registros em vídeo, pode-se observar e quantificar quais expressões faciais ocorreram cada uma das fases da tarefa, o que foi possível definir uma tabela de registro para todas as expressões faciais observadas durante a realização das tarefas e quais dentre todas foram mais recorrentes. A ocorrência destas expressões contribuiu para uma análise comparativa das informações sobre o comportamento e satisfação do usuário e o tempo médio para realização das tarefas.</p>
<h4>5.1.2. Dados Qualitativos Processados</h4>
<h5>5.1.2.1. Trechos de Vídeo</h5>
<p>Para as expressões faciais mais representativas foram selecionados alguns trechos de vídeos para representar de forma real as situações de satisfação, tensão e insatisfação ocorridas nos testes.</p>
<h5>5.1.2.2. Verbalizações</h5>
<p>Foram selecionados trechos dos comentários dos usuários de teste contendo pontos positivos e negativos bem como observações sobre o produto, as dificuldades de utilização e pontos de melhorias de forma a consolidar e justificar as análise feitas.</p>
<h3>5.2. Fluxo de Exibição dos Resultados</h3>
<p>Levando em consideração a quantidade de informações e variáveis a serem apresentadas, os objetivos previstos e o referencial teórico estudado, verificou-se que uma apresentação com sequencia linear não seria suficiente para gerar a integração entre os dados coletados. Além das informações quantitativas e qualitativas, verificou-se a necessidade de inserção de outros elementos visuais, suportes necessários para o entendimento do resultado obtido.</p>
<p>A partir disto, propôs-se então a utilização de infografia multimídia, usada para informar de forma dinâmica diversos tipos de conteúdos combinando elementos gráficos como fotografias, desenhos e textos.</p>
<p>Aliado ao modelo de apresentação baseado na infografia multimídia propôs-se também a utilização de interatividade baseado na visão operacional apresentada por KIOUSIS (2002) que conclui que a mesma é estabelecida por três fatores: estrutura tecnológica do meio usado (velocidade, alcance, flexibilidade do sincronismo e complexidade sensorial); característica do ajuste da comunicação; e percepção dos indivíduos (proximidade, velocidade percebida, ativação sensorial e tele-presença). Desta forma será proporcionado ao usuário da apresentação o controle de ajustar o resultado da comunicação de acordo com sua necessidade e exibi-la na velocidade que desejar.</p>
<p>A seguir apresenta-se uma representação visual da sequência do fluxo de navegação proposto para a apresentação de resultados. Esta sequência para as informações expostas configuram-se como uma tentativa para obter o melhor entendimento para o usuário.</p>
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam6.png" alt="" /><span style="color: black; font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 7 &#8211; Fluxograma de Exibição dos Resultados.<br />
</strong></p>
<h3>5.3. Definição de Ferramentas para Integração</h3>
<p>As ferramentas computacionais escolhidas para desenvolver os referidos modelos de apresentação pertencem ao pacote <em>Adobe Design Premium CS3</em>: <em>Illustrator</em> para vetorização das expressões faciais e construção das matrizes para os gráficos, <em>Photoshop</em> para tratamento das imagens dos aparelhos para opção de seleção e <em>Flash</em> para desenvolvimento dos recursos interativos e de animação, bem como para importação dos videos e publicação dos arquivos finais de visualização que deveriam ser executados em computadores com sistema operacional <em>Windows</em> e <em>MacOS</em>.</p>
<h3>5.4. Elaboração de Gráficos e Elementos Visuais</h3>
<p>Manter o foco é fundamental na hora de elaborar um infográfico, ou seja, as informações que não acrescentam ao tema devem ser excluídas, devendo permanecer somente o necessário para ajudar na compreensão do fato ou do processo explicado.</p>
<p>Neste sentido, segundo FERREIRA &amp; NUNES (2008), o uso da cor em sistemas computacionais torna a aplicação mais atraente, facilita a visualização e consequentemente a compreensão da informação. Enfim, as cores aumentam a eficiência do processo de comunicação</p>
<p>HALL, a<em>pud</em> FERREIRA &amp; NUNES (2008), diz que &#8220;a cor serve como guia visual, orientando o olho através de um labirinto de palavras e de imagens, detendo-o nas informações importantes. Cria uma facilmente o significado e a essência da mensagem, aumentando, por conseguinte, a compreensão do sistema&#8221;.</p>
<p>Para representação dos dados quantitativos relacionados ao tempo de execução das tarefas optou-se pela construção de gráficos de linha, onde foi observado com clareza as variações através das cores que representam cada uma um usuário diferente, o que tornou possível a análise de forma comparativa entre eles.</p>
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam7.png" alt="" /><span style="color: black; font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 8 &#8211; Representação gráfica do tempo de execução das tarefas de cada usuário.<br />
</strong></p>
<p style="text-align: center;">
<p>O gráfico com de media de tempo seguiu o mesmo conceito, as linhas de todos os usuários ficam em tons de cinza, segundo plano, para dar destaque a informação visual requerida.</p>
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam8.png" alt="" /><span style="color: black; font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 9 &#8211; Representação gráfica do tempo médio de execução das tarefas.<br />
</strong></p>
<p style="text-align: center;">
<p>Para apresentar as expressões faciais mais frequentes, foi utilizado no gráfico uma linha de uma forma mais simples, esferas de cores diferentes foram aplicadas para demonstrar o níveis de satisfação: satisfeitos (verde), tensos (amarelo) ou insatisfeitos (vermelho). A relação das cores com o nível de satisfação foi escolhida de acordo com os aspectos simbólicos da cor, pois de acordo com Farina o vermelho pode ser associado com uma situação extrema, o amarelo com desconforto e o verde com uma situação de permissão e satisfação.</p>
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam9.png" alt="" /><span style="color: black; font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 10 &#8211; Tela 1. Representação visual das expressões faciais mais frequentes.<br />
</strong></p>
<p style="text-align: center;"><span style="color: black; font-family: Times;"><br />
<img src="/wp-content/uploads/042410_1244_Infografiam10.png" alt="" /><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 11 &#8211; Tela 2. Representação visual das expressões faciais mais frequentes em destaque.<br />
</strong></p>
<p style="text-align: center;">
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam11.png" alt="" /><span style="color: black; font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 12 &#8211; Tela 3. Representação visual das expressões faciais que ocorrem em cada uma das fases.<span style="color: black;"><br />
</span></strong></p>
<p>Os dados procedentes das verbalizações foram inseridos dentro de um caixa de texto &#8220;box&#8221;, associados com a expressão facial e atividade em execução no momento da pronúncia. Desta forma observa-se o que foi comentado em relação a expressão facial gerada pelo usuário.</p>
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam12.png" alt="" /><span style="color: black; font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 13 &#8211; Exemplos de verbalização associada com a expressão facial que ocorre em um momento específico.<span style="color: black;"><br />
</span></strong></p>
<p style="text-align: center;">
<p>Os demais elementos gráficos complementares seguiram o padrão gráfico adotado, respeitando o conceito de forma e padrão cromático.</p>
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam13.png" alt="" /><span style="color: black; font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 14 &#8211; Exemplos de inserção de videos com botão de ação.<br />
</strong></p>
<p style="text-align: center;">
<h3>5.5. Consolidação dos Resultados</h3>
<p>A busca da facilidade de uso não é simples, principalmente em se tratando da apresentação de resultados de testes de usabilidade, que proporcionam tantas informações quantas são possíveis coletar: escalas de tempo, dados quantitativos, verbalizações, análise de expressões faciais e trechos de áudio e vídeo.</p>
<p>Essas informações se tornam mais compreensíveis quando apresentadas de forma comparativa e/ou complementar, preferencialmente na mesma tela e não separadamente em planilhas, formulários, gráficos e outros trechos de arquivos de mídia. O uso da multimídia interativa neste caso ajuda não só no entendimento das informações apresentadas como torna sua apresentação mais sistemática, organizada e eficiente.</p>
<p>SALAVERRIA, apud RIBAS (2004), afirma que &#8220;a mensagem multimídia deve ser um produto polifônico no qual se conjuguem conteúdos expressados em diversos códigos. E mais que isso, deve ser unitário. A mensagem multimídia não se alcança mediante mera justaposição de códigos textuais e audiovisuais, mas através de uma integração harmonica desses códigos em uma mensagem unitária. Um produto informativo que só permita acessar um texto, um video e uma gravação sonora, separadamente, não pode ser considerado propriamente uma mensagem multimídia; trata-se simplesmente de um conglomerado desintegrado de mensagens informativas independentes&#8221;.</p>
<p>Usando como base o fluxo de exibição dos resultados, os elementos visuais foram inseridos no Adobe Flash onde definiu-se a velocidade de transição e as ações interativas necesssárias para executar a navegação necessária para que o conteúdo pudesse ser visualizado sempre que necessário.</p>
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam14.png" alt="" /><span style="color: black; font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 15 &#8211; Tela 1. Tela Principal de Seleção dos Aparelhos.<br />
</strong></p>
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam15.png" alt="" /><span style="color: black; font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 16 &#8211; Tela 2. Reforço para Identificação através da Imagem do Aparelho / Título<br />
</strong></p>
<p style="text-align: center;">
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam16.png" alt="" /><span style="color: black; font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 17 &#8211; Tela 3. Tela Menu que dá acesso ao principais pontos da apresentação<br />
</strong></p>
<p style="text-align: center;">
<p style="text-align: center;"><img src="/wp-content/uploads/042410_1244_Infografiam17.png" alt="" /><span style="color: black; font-family: Times;"><br />
</span></p>
<p style="text-align: center;"><strong>Fig. 18 &#8211; Tela 4. Sistema de Navegação sem ter que voltar para a página principal.<br />
</strong></p>
<p style="text-align: center;">
<p>A partir do próprio software a publicação foi possível gerar arquivos executáveis e/ou veicular o pacote multimídia à exibição em navegadores de Internet (fig. 18).</p>
<p>6. Considerações<br />
No decorrer das análises dos testes percebeu-se por exemplo como seria importante mostrar de forma visual e integrada o momento de ocorrência para cada expressão facial, pois na maioria dos casos, em momentos que o usuário demorava maior tempo para realizar uma tarefa, as expressões faciais mais recorrentes eram de insatisfação.</p>
<p>Assim, esta forma de apresentação contribui para reforçar a pesquisa sobre avaliações qualitativas e quantitativas e seu uso em testes de usabilidade, pois torna a apresentação de resultados mais fácil de ser compreendida e consequentemente o cliente mais satisfeito com o investimento feito na pesquisa que posteriormente deverá ser aplicada em produtos.</p>
<p>Pensar em usabilidade é visualizar os benefícios que os resultados destas pesquisas poderão proporcionar em prol da melhor qualidade de vida de milhares de pessoas. Contudo deve-se refletir como os profissionais envolvidos neste processo podem de fato tornar este futuro uma realidade no dia-dia da usabilidade, apresentando os resultados e justificando de forma mais eficaz.</p>
<p>Neste sentido o conhecimento de Design de Interação e Arquitetura da Informação podem contribuir com o desenvolvimento de ferramentas mais simples e eficazes, auxiliando a comunicação e compreensão das informações contidas nestes resultados.</p>
<p>Pretende-se através deste estudo de caso incentivar futuras pesquisas e desenvolvimento de outras ferramentas que facilitem a demonstração de resultados de testes de usabilidade. Para tanto conhecer o conteúdo do trabalho, modelos mentais e atores são essenciais para estruturação e desenvolvimento de sistemas e seus processos pois pontuam diretamente para a boa apresentação da informação em sistemas comunicacionais e auxiliares do comportamento do usuário.</p>
<h2>7. Referências</h2>
<p>FERREIRA, S.B.L.; NUNES, R.R. e-Usabilidade. Rio de Janeiro: LTC, 2008.</p>
<p>KIOUSIS, S. <em>Interactivity: a concept explication.</em> New Media &amp; Society. vol. 4. SAGE Publications, 2002. Disponível em: <span style="text-decoration: underline;">http://nms.sagepub.com/cgi/content/abstract/4/3/355</span>. Acesso em: 03 jul. 2009</p>
<p>MÓDOLO, C. M.; JUNIOR, A. G. Estudo quantitativo dos infográficos publicados na revista Superinteressante nos anos de 1987 a 2005. In: XXX Congresso Brasileiro de Ciências da Comunicação, 2007, Santos. Disponível em: http://intercom.org.br/papers/nacionais/2007/resumos/R1102-2.pdf. Acesso em: 06 jul. 2009.</p>
<p>MORAES, A. Avisos, Advertências e Projeto de Sinalização: Ergodesign informacional. Rio de Janeiro: iUser, 2002.</p>
<p>PREECE, J.; ROGERS, Y.; SHARP, H. Design de Interação: além da interação home-computador. Porto Alegre: Bookman, 2005.</p>
<p>REIS. G. O que é Arquitetura de Informação de Websites. Webinsider, Internet, 15 abr. 2006. Disponível em: <span style="text-decoration: underline;">http://webinsider.uol.com.br/index.php/2006/04/15/o-que-e-arquitetura-de-informacao-em-websites/</span>. Acesso em: 09 jul. 2009.</p>
<p>REIS. G. Por uma Metodologia de Arquitetura de Informação. Webinsider, Internet, 16 jun. 2006. Disponível em: <span style="text-decoration: underline;">http://webinsider.uol.com.br/index.php/2006/06/16/por-uma-metodologia-de-arquitetura-de-informacao/</span>. Acesso em: 09 jul. 2009.</p>
<p>REIS. G. Arquitetura da Informação para os que chegam agora. Webinsider, Internet, 13 jul. 2006. Disponível em: <span style="text-decoration: underline;">http://webinsider.uol.com.br/index.php/2006/07/13/arquitetura-da-informacao-para-quem-esta-chegando-agora/</span>. Acesso em: 09 jul. 2009.</p>
<p>RIBAS, B. Infografia Multimidia: um modelo narrativo para o webjornalismo<strong>. </strong>In:<strong><br />
</strong>V Congreso Iberoamericano de Periodismo en Internet, Salvador, 2004. Disponível em: <span style="text-decoration: underline;">http://www.facom.ufba.br/jol/pdf/2004_ribas_infografia_multimidia.pdf</span>. Acesso em: 06 jul. 2009.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.congressoebai.org/index.php/2009/infografia-multimidia-para-apresentacao-de-resultados-de-testes-de-usabilidade/10/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

