<?xml version="1.0" encoding="ISO-8859-1"?>
<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>Gabriela Trindade Perry: HCI, Design Cognition, Flex &#187; Design cases</title>
	<atom:link href="http://www.gabriela.trindade.nom.br/category/design-cases/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.gabriela.trindade.nom.br</link>
	<description></description>
	<lastBuildDate>Fri, 05 Feb 2010 16:30:57 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Escolhendo a melhor interface: protótipos</title>
		<link>http://www.gabriela.trindade.nom.br/2009/11/escolhendo-a-melhor-interface-prototipos/</link>
		<comments>http://www.gabriela.trindade.nom.br/2009/11/escolhendo-a-melhor-interface-prototipos/#comments</comments>
		<pubDate>Thu, 12 Nov 2009 13:21:21 +0000</pubDate>
		<dc:creator>gabrielaperry</dc:creator>
				<category><![CDATA[Design cases]]></category>
		<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.gabriela.trindade.nom.br/?p=712</guid>
		<description><![CDATA[Marquei o teste com usuários para quinta que vem. Vamos ver o que sai.  Para adiantar as coisas, já tenho os protótipos prontos.
Pra quem está interessado no código, tem os fontes disponíveis&#8230;. Só peço que lembrem do significado da palavra &#8220;protótipo&#8221;: o código está uma zona, nem venham me falar nada disso, beleza?
Protótipo DD (nova [...]]]></description>
			<content:encoded><![CDATA[<p>Marquei o teste com usuários para quinta que vem. Vamos ver o que sai.  Para adiantar as coisas, já tenho os protótipos prontos.</p>
<p>Pra quem está interessado no código, tem os fontes disponíveis&#8230;. Só peço que lembrem do significado da palavra &#8220;protótipo&#8221;: o código está uma zona, nem venham me falar nada disso, beleza?</p>
<p><a href="http://www.gabriela.trindade.nom.br/arquivos/deciding/dd/index.html" target="_blank"><strong>Protótipo DD (nova janela)</strong><br />
</a>Tempo de desenvolvimento: 10 horas<a href="arquivos/deciding/dd/index.html" target="_blank"><br />
</a></p>
<ul>
<li>abrir nós da árvore ao clicar nos galhos</li>
<li>item renderer para tree</li>
<li>desabilitar itens de uma tree</li>
<li>arrastar de tree para container</li>
<li>identificar item da tree ao clicar no objeto do container</li>
<li>atualizar itens da tree durante drag n drop</li>
<li>verificar área de drop, verificar lixeira</li>
<li>usar fade para remover item</li>
<li>inserir item ao clicar na árvore</li>
<li>verificar área de drop, se colocado sobre outro item ao clicar na árvore, reposiciona</li>
<li>user fade para posicionar item se originado do click na árvore</li>
</ul>
<p><strong><a href="http://www.gabriela.trindade.nom.br/arquivos/deciding/tree/" target="_blank">Protótipo Tree (nova janela)</a></strong><br />
Tenpo de desenvolvimento: 2 horas</p>
<ul>
<li>abrir nós da árvore ao clicar nos galhos</li>
<li>atualizar itens da tree durante uso do slider</li>
<li>mostrar a slider quando clica nos itens</li>
<li>feedback na árvore do valor da associação slider-tree</li>
<li>mostrar a slider usando um fade</li>
</ul>
<p>Era isso! Até o teste!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gabriela.trindade.nom.br/2009/11/escolhendo-a-melhor-interface-prototipos/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Escolhendo a melhor interface: tempo de desenvolvimento</title>
		<link>http://www.gabriela.trindade.nom.br/2009/11/escolhendo-a-melhor-interface-tempo-de-desenvolvimento/</link>
		<comments>http://www.gabriela.trindade.nom.br/2009/11/escolhendo-a-melhor-interface-tempo-de-desenvolvimento/#comments</comments>
		<pubDate>Sun, 08 Nov 2009 15:33:16 +0000</pubDate>
		<dc:creator>gabrielaperry</dc:creator>
				<category><![CDATA[Design cases]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[HCI]]></category>

		<guid isPermaLink="false">http://www.gabriela.trindade.nom.br/?p=709</guid>
		<description><![CDATA[Seguimos então com a análise deste problema: como escolher entre duas interfaces que dão suporte à mesma tarefa? Para quem não está acompanhando, as interfaces em questão são mostradas nas figuras 1 e 2.


Figura 1, à esquerda. Interface com drag n´drop. O usuário arrasta um conceito para a área ao lado da tree, e o [...]]]></description>
			<content:encoded><![CDATA[<p>Seguimos então com a análise deste problema: como escolher entre duas interfaces que dão suporte à mesma tarefa? Para quem não está acompanhando, as interfaces em questão são mostradas nas figuras 1 e 2.</p>
<p><a href="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/11/interfaceA.png"><img class="alignleft" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/11/interfaceA.png" alt="" width="170" height="180" /></a></p>
<p><a href="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/11/interfaceB.png"><img style="margin-left: 40px; margin-right: 40px;" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/11/interfaceB.png" alt="" width="224" height="119" /></a></p>
<p>Figura 1, à esquerda. Interface com drag n´drop. O usuário arrasta um conceito para a área ao lado da tree, e o local (y) onde ele largou o conceito define o quanto o material está associado ao conceito.</p>
<p>Figura 2, à direita. Interface com HSlider. O usuário seleciona um item na Tree. Na tela ao lado, há uma HSlider, que o usuário usa para dizer o quanto o conceito se asssocia com o material. Na Tree se podem ser, ao lado dos conceitos que estão associados com o material, o quanto (%) o conceito se associa ao material.</p>
<p>Estas interfaces foram avaliadas utilizando um conjunto de heurísticas  e o KLM. Estes são dois métodos que pertencem mais ao design que ao desenvolvimento, e que são usados para informar a escolha. No entanto, eles não consideram a complexidade da implementação, que é um fator determinante na escolha. Por este motivo, pedi para alguns colegas avaliarem as duas interfaces e dizerem o quanto uma interface é mais trabalhosa que a outra. Além disso, pedi que, se possível, comentassem cada uma das propostas.</p>
<p>Pedi que a todos os avaliadores que considerassem a implementação na mesma linguagem de programação (AS3, usando Flex). Todos têm pelo menos 2 anos de experiência com a linguagem, e todos são desenvolvedores reconhecidos (à exceção de um, todos são moderadores de listas com mais de 2000 membros). Eles avaliaram o seguinte cenário:</p>
<p>/*******************************************************<br />
CENÁRIO<br />
O projeto é uma materioteca, usada para auxiliar no processo de seleção de materiais. Será usada por designers, arquitetos e eventualmente, por engenheiros.<br />
A tela em questão é para associar conceitos a um dado material que está sendo criado pelo administrador da materioteca (você :0). Estes conceitos são palavras, e são características abstratas do material. Pense que isso pode ser importante para um designer fazer sua escolha. Exemplos de conceitos podem ser: inovador, sensual, moderno, vibrante, vulgar, barato etc.<br />
Você não irá criar conceitos, apenas usar os que estão disponíveis.</p>
<p>As implementações possíveis estão nos pngs anexos*<br />
*******************************************************/</p>
<p>O resultado até agora é:</p>
<ul>
<li>Desenvolvedor 1 -&gt; Interface A(Drag n´ Drop)=2 * Interface B (HSlider)</li>
<li>Desenvolvedor 2 -&gt; Interface A(Drag n´ Drop)=10 * Interface B (HSlider)</li>
<li>Desenvolvedor 3 -&gt; Interface A(Drag n´ Drop)=4 * Interface B (HSlider)</li>
<li>Desenvolvedor 4 -&gt; Interface A(Drag n´ Drop)=3 * Interface B (HSlider)</li>
</ul>
<p>Além disso, alguns ainda enviaram comentários:</p>
<p><strong>Desenvolvedor 1</strong></p>
<ul>
<li> &#8220;Preferiria implementar a segunda forma, acho que é bem mais intuitiva para o usuario&#8221;.</li>
<li>&#8220;[...] Ok&#8230; pode ser até mais dificil de implementar, mas a real importancia não é a dificuldade da implementação mas a experiencia do usuario em usar essa app&#8221;.</li>
</ul>
<p>No email de resposta ainda haviam exemplos de interfaces que suportam a mesma tarefa, referidos pelo Desenvolvedor 1 como sendo de pior qualidade. Os dois exemplos estão mostrados abaixo.</p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<br />
| Conceito A      |  &lt;combo box de %&gt; |  Selecione o valor percentual de associação<br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<br />
| Conceito B      |  &lt;combo box de %&gt; |<br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<br />
| Conceito G      |  &lt;combo box de %&gt; |<br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;</p>
<p>Ou pior ainda&#8230; :<br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<br />
| Conceito A      |  &lt;textInput / NumericStepper&gt; |  <strong>Digite</strong> o valor percentual de associação<br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<br />
| Conceito B      |  &lt;textInput / NumericStepper&gt; |<br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<br />
| Conceito G      |  &lt;textInput / NumericStepper&gt; |<br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;</p>
<p><strong>Desenvolvedor 3</strong></p>
<ul>
<li>&#8220;Então, olhando as duas opções, a primeira usando um HSlider me parece muito &#8216;tradicional&#8217;, mais fácil de manipular mas mais difícil de analisar o todo. Gosto mais da segunda opção, apesar de mais complexa para o usuário final manipular&#8221;.</li>
<li>&#8220;Obviamente que o usuário final não está tão acostumado com o drag and drop nos softwares como ele usa no sistema operacional, mas dá uma dimensão muito melhor, acredito até que ele acharia ruim essa opção em um primeiro momento, mas depois de começar usar se sentiria mais confortável em poder analisar todos os conceitos de determinado material de uma única vez.&#8221;</li>
<li>Em uma conversa via MSN, este desenvolvedor sugeriu uma &#8220;solução intermediária&#8221;, na qual ao arrastar o conceito para o Canvas, uma janela é criada, com uma barra deslizante, usada para definir a associação ao conceito.</li>
</ul>
<p><strong>Desenvolvedor 4</strong></p>
<ul>
<li>&#8220;Usaria o hslider/vslider em vez do cenário do canvas&#8221;.</li>
<li>&#8220;Bem, colocaria os itens em ordem decrescente de %, facilitando assim ao usuário a associação visual.&#8221;**</li>
<li>&#8220;Uma sugestão também é em vez de usar um slider, usar um itemRenderer que mostre um NumericStepper. Na minha opinião usaria o NumericStepper, porque daria menos trabalho sem perder a funcionalidade e agregando maior agilidade para o usuário. Usando NumericStepper como itemRenderer acredito que levaria menos tempo ainda que o slider, talvez 0.6x, além que área que deixaria de ser usada pelo slider poderia ser usada para outra coisa.&#8221;</li>
</ul>
<p>Dois desenvolvedores manifestaram preferência pela interface com Drag n´Drop, um pela interface com HSlider e um não manifestou preferência. No entanto, todos afirmaram que a interface com Drag n´Drop é mais demorada.</p>
<p>Assim como as avaliações anteriores, estes pareceres não foram conclusivos em favor de nenhuma das opções, pois, mesmo que dois desenvolvedores tenham manifestado clara preferência pela interface com Drag n´Drop, é preciso avaliar se o tempo de implementação é um fator importante.</p>
<p>Cada vez mais acho que vou precisar de um protótipo para dar o veredicto :0)</p>
<p>Acompanhe!</p>
<p><em>PS: Se você também quer mandar sua estimativa e seus comentários, comente aqui ou mande por email. Vou incorporar no post.</em></p>
<p>* As imagens do início deste post, com descrições sobre detalhes da implementação e sugestões para os algoritmos.</p>
<p>** No HSlider</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gabriela.trindade.nom.br/2009/11/escolhendo-a-melhor-interface-tempo-de-desenvolvimento/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Escolhendo a melhor interface: heurísticas</title>
		<link>http://www.gabriela.trindade.nom.br/2009/11/escolhendo-a-melhor-interface-heuristicas/</link>
		<comments>http://www.gabriela.trindade.nom.br/2009/11/escolhendo-a-melhor-interface-heuristicas/#comments</comments>
		<pubDate>Sun, 08 Nov 2009 13:54:44 +0000</pubDate>
		<dc:creator>gabrielaperry</dc:creator>
				<category><![CDATA[Design cases]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[HCI]]></category>

		<guid isPermaLink="false">http://www.gabriela.trindade.nom.br/?p=698</guid>
		<description><![CDATA[Realizar uma avaliação através de heurísticas significa seguir uma estratégia baseada em parâmetros. Assim, para realizar uma avaliação heurística, deve-se escolher este conjunto de parâmetros. Esta é a grande diferença entre guidelines e heurísticas, pois as primeiras são regras para resolver um problema, como se fossem uma receita para construir uma boa interface. As segundas, [...]]]></description>
			<content:encoded><![CDATA[<p>Realizar uma avaliação através de heurísticas significa seguir uma estratégia baseada em parâmetros. Assim, para realizar uma avaliação heurística, deve-se escolher este conjunto de parâmetros. Esta é a grande diferença entre <em>guidelines</em> e heurísticas, pois as primeiras são regras para resolver um problema, como se fossem uma receita para construir uma boa interface. As segundas, por sua vez, são mais flexíveis, permitindo que o <em>designer</em> encontre sua própria solução. Provavelmente o conjunto mais conhecido seha o de Molich e Nielsen (1990)*, que originalmente continha nove heurísticas,  atualizadas em 1994*, contando dez heurísticas. Para chegar ao conjunto original, Molich e Nielsen realizaram uma pesquisa com 77 <em>designers</em> e programadores, da indústria e acadêmicos, investigando se eles conseguiam encontrar problemas de usabilidade em uma interface.  Sobre a avaliação com heurísticas, Nielsen e Molich afirmam que o sucesso da análise está intimamente relacionado à qualidade do avaliador, e profissionais experientes e com formação em ergonomia têm melhor<em> performance</em> que especialistas em computação. Além disso, afirmam que algumas interfaces são mais difíceis da avaliar heuristicamente do que outras, e que esta diferença acentua ainda mais a importância de avaliadores experientes. Também afirmam que este tipo de avaliação não deve ser feito por um único avaliador (recomendam de três a cinco profissionais). Ainda citam algumas vantagens do uso deste método: é rápido e barato; é fácil motivar a equipe a conduzir um experimento deste tipo e pode ser usado desde cedo no processo de desenvolvimento.</p>
<p>A lista atualizada (a de 1994) está abaixo**:</p>
<ol>
<li><strong>Visão do estado do sistema</strong>: O sistema deve sempre manter os utilizadores informados acerca do que é que se está a passar através de feedback apropriado.</li>
<li><strong>Ligação entre o sistema e o mundo real</strong>: O sistema deve falar a linguagem dos utilizadores, usar palavras, frases e conceitos familiares para o utilizador.</li>
<li><strong> Liberdade e Controle</strong>: Pode acontecer que o utilizador escolha alguma função por engano e necessite de cancelar ou simplesmente “Sair sem gravar alterações”. Sempre que possível deve implementar-se <em>undo</em> e  <em>redo</em>.</li>
<li><strong>Consistência e Standards</strong>: Devem seguir-se convenções, normas definidas e normas de facto estabelecidas, de maneira a que o utilizador se sinta familiarizado com a forma de interagir com o sistema em qualquer parte deste.</li>
<li><strong>Prevenção de Erros</strong>: Melhor do que boas mensagens de erro é o desenho cuidado que previne que esses erros aconteçam. Não deixar que seja possível cometer o erro.</li>
<li><strong>Reconhecer em vez Recordar</strong>: Minimizar a necessidade do utilizador ter de se lembrar de algo (ex: qual a tecla para ver o documento X), disponibilizando visualmente objectos, opções ou acções. Não deve ser necessário decorar nada de uma janela para outra. As instruções devem estar acessiveis fácilmente e sempre que necessário.</li>
<li><strong>Flexibilidade e eficiência</strong> <strong>na utilização</strong>: Teclas de atalho (que normalmete não são usadas por utilizadores novatos). Estas poderão aumentar a velocidade de interacção para utilizadores mais experientes. Permitir aos utilizadores criar atalhos para acções mais frequentes.</li>
<li><strong>Design Simples</strong>: As janelas não devem conter informação irrelevante ou raramente necessária. Todas as informações extra disponibilizadas, competem com a informação relevante, diminuindo a sua visibilidade.</li>
<li><strong>Ajudar os utilizadores a reconhecer, diagnosticar e recuperar dos erros</strong>: As mensagens de erro devem ser expressas numa linguagem comum (sem códigos). Devem indicar precisamente qual o problema e a sugestão para a sua solução.</li>
<li><strong>Ajuda e Documentação</strong>: Mesmo que seja melhor que o sistema possa ser usado sem documentação, esta pode ser necessária. Deve ser possível pesquisar qualquer informação. Focar a ajuda mediante a tarefa que o utilizador pretende executar. A documentação deve ser simples (passo-a-passo) e não extensa.</li>
</ol>
<p>Segundo Stanton e Young (2003), a avaliação através de heurísticas é um método extremamente simples e rápido de aplicar, podendo ser empregada em qualquer estágio do desenvolvimento do produto. Os autores recomendam apenas que o avaliador esteja familiarizado com o produto em análise. Por outro lado, os autores ressaltam a carga subjetiva da análise, o que resulta em baixa confiabilidade: avaliadores diferentes produzem resultados diferentes. Este não é o caso do KLM (<a href="http://www.gabriela.trindade.nom.br/2009/11/deciding-the-best-design-the-keystroke-level-model/" target="_blank">veja o post sobre KLM aqui</a>), que, segundo Stanton e  Young tem alta confiabilidade.</p>
<p>Porém, a avaliação heurística tem uma funçao diferente da avaliação com o KLM: ela informa a qualidade da interface de uma forma mais geral, abrangendo outros aspectos além do tempo de execução da tarefa. Desta forma, ela se contitui numa referência importante para a escolha entre duas interfaces. Sendo assim, as interfaces mostradas nas figuras 1 e 2 serão submetidas à avaliação.</p>
<p><img src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/11/interfaceA.png" alt="" /></p>
<p>Figura 1. Interface com drag n´drop. O usuário arrasta um conceito para a área ao lado da tree, e o local (y) onde ele largou o conceito define o quanto o material está associado ao conceito.</p>
<p><img src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/11/interfaceB.png" alt="" /></p>
<p>Figura 2. Interface com HSlider. O usuário seleciona um item na Tree. Na tela ao lado, há uma HSlider, que o usuário usa para dizer o quanto o conceito se asssocia com o material. Na Tree se podem ser, ao lado dos conceitos que estão associados com o material, o quanto (%) o conceito se associa ao material.</p>
<p>A avaliação das duas interfaces é apresentada nas tabelas 1 e 2. Para cada item do conjunto de heurísticas foi atribuído um valor de -3 a 3. Ao final, os valores são somados para gerar uma &#8220;pontuação&#8221;.</p>
<table style="height: 527px;" border="0" cellspacing="0" cellpadding="0" width="480">
<tbody>
<tr>
<td width="191" valign="top"><strong>Heurística</strong><strong> </strong></td>
<td width="81" valign="top"><strong>Interface A</strong></td>
<td width="190" valign="top"><strong>Motivo</strong></td>
</tr>
<tr>
<td width="191" valign="top"><strong>Visão do estado do sistema</strong></td>
<td width="81" valign="top">3</td>
<td width="190" valign="top">Não é preciso abrir a árvore para saber quais conceitos estão   associados ao material, nem o quanto o conceito está associado.</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Ligação entre o sistema e o mundo real </strong>(usar palavras, frases e conceitos familiares para o utilizador)<strong> </strong></p>
<p><strong> </strong></td>
<td width="81" valign="top">0</td>
<td width="190" valign="top">Não se aplica, pois não há diálogos</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Liberdade e Controle</strong></td>
<td width="81" valign="top">1</td>
<td width="190" valign="top">É moderadamente difícil se recuperar de um erro, pois é necessário avaliar a posição   que corresponde ao valor desejado. Para excluir o conceito é preciso notar a   caixa de lixo. Este valor poderia aumentar se outras formas de exclusão   fossem implementadas, como interpretar como excluão arrastar o conceito para fora do Canvas.</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Consistência e Standards</strong></td>
<td width="81" valign="top">1</td>
<td width="190" valign="top">Drag n drop tem pouca visibilidade: como saber que deve-se iniciar um   drag?</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Prevenção de Erros</strong></td>
<td width="81" valign="top">3</td>
<td width="190" valign="top">Não é possível arrastar para outro local além do canvas. Se o uusário arrastou para um local que não corresponde à posição desejada, ele é &#8220;avisado&#8221; pelas datatips que ficam ao lado do conceito enquanto ele é arrastado.</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Reconhecer em vez Recordar</strong></td>
<td width="81" valign="top">3</td>
<td width="190" valign="top">É mais fácil associar a posição do que um número à importância. O   usuário vê a importância relativa do conceito, e lembra da imagem geral, do   mapa, ao invés de valores individuais</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Flexibilidade e eficiência</strong> <strong>na utilização</strong></td>
<td width="81" valign="top">0</td>
<td width="190" valign="top">Não será avaliado, pois foi avaliado pelo KLM.</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Design Simples </strong>(não contem informação irrelevante ou raramente necessária)<strong> </strong></p>
<p><strong> </strong></td>
<td width="81" valign="top">3</td>
<td width="190" valign="top">Não há informação irrelevante, e a posição dos elementos segue o   fluxo da ação.</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Ajudar os utilizadores a reconhecer,   diagnosticar e recuperar dos erros</strong></td>
<td width="81" valign="top">0</td>
<td width="190" valign="top">Não se aplica.</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Ajuda e Documentação</strong></td>
<td width="81" valign="top">0</td>
<td width="190" valign="top">Não se foi desenvolvido</td>
</tr>
<tr>
<td width="191" valign="top">TOTAL</td>
<td width="81" valign="top">14</td>
<td width="190" valign="top"></td>
</tr>
</tbody>
</table>
<p>Tabela 1. Avaliação da Inteface A, que sugere a implementação de um comportamento de Drag n´Drop.</p>
<table style="height: 527px;" border="0" cellspacing="0" cellpadding="0" width="480">
<tbody>
<tr>
<td width="191" valign="top"><strong>Heurística</strong><strong> </strong></td>
<td width="81" valign="top"><strong>Interface B</strong></td>
<td width="190" valign="top"><strong>Motivo</strong></td>
</tr>
<tr>
<td width="191" valign="top"><strong>Visão do estado do sistema</strong></td>
<td width="81" valign="top">0</td>
<td width="190" valign="top">É preciso abrir a árvore para saber quais conceitos estão   associados ao material. É difícil saber qual o conceito mais associado ao material, e muito difícil ordenar os coneitos em ordem crescente / decrescente.</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Ligação entre o sistema e o mundo real </strong>(usar palavras, frases e conceitos familiares para o utilizador)<strong><br />
</strong></td>
<td width="81" valign="top">0</td>
<td width="190" valign="top">Não se aplica, pois não há diálogos</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Liberdade e Controle</strong></td>
<td width="81" valign="top">2</td>
<td width="190" valign="top">É fácil se recuperar de um erro, pois o valor da associação está sempre visível, de forma numérica. Para excluir o conceito é preciso atribuir o valor zero à associação, o que pode não ser uma ação óbvia.</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Consistência e Standards</strong></td>
<td width="81" valign="top">3</td>
<td width="190" valign="top">Clicar em um objeto de uma árvore e ver as informações relevantes a este objeto em outra área é um comportamento esperado.</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Prevenção de Erros</strong></td>
<td width="81" valign="top">3</td>
<td width="190" valign="top">Se o usuário arrastou para um local que não corresponde à posição desejada, ele é &#8220;avisado&#8221; pelo valor da barra deslizante, que é atualizado em tempo real.</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Reconhecer em vez Recordar</strong></td>
<td width="81" valign="top">1</td>
<td width="190" valign="top">É difícil, pois o estado do sistema fica escondido dentro da árvore. O usuário precisa fazer uma buscar serial por cada dado.</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Flexibilidade e eficiência</strong> <strong>na utilização</strong></td>
<td width="81" valign="top">0</td>
<td width="190" valign="top">Não será avaliado, pois foi avaliado pelo KLM.</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Design Simples </strong>(não contem informação irrelevante ou raramente necessária)<strong><br />
</strong></td>
<td width="81" valign="top">3</td>
<td width="190" valign="top">Não há informação irrelevante, e a posição dos elementos segue o   fluxo da ação.</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Ajudar os utilizadores a reconhecer,   diagnosticar e recuperar dos erros</strong></td>
<td width="81" valign="top">0</td>
<td width="190" valign="top">Não se aplica.</td>
</tr>
<tr>
<td width="191" valign="top"><strong>Ajuda e Documentação</strong></td>
<td width="81" valign="top">0</td>
<td width="190" valign="top">Não se foi desenvolvido</td>
</tr>
<tr>
<td width="191" valign="top">TOTAL</td>
<td width="81" valign="top">12</td>
<td width="190" valign="top"></td>
</tr>
</tbody>
</table>
<p>Tabela 2. Avaliação da Inteface B, que sugere a implementação de uma barra deslizante.</p>
<p>A pontuação das interfaces A e B foi, respectivamente, 14 e 12. Os itens em que a interface A teve desempenho melhor foram &#8220;<strong>Visão do estado do sistema</strong>&#8221; e &#8220;<strong>Reconhecer em vez Recordar</strong>&#8220;. Já a interface B se saiu melhor no item &#8220;<strong>Consistência e Standards</strong>&#8220;. Como a diferença &#8211; mais uma vez &#8211; foi pequena (cerca de 15%) em favor da interface A, o teste com usuários e um protótipo funcional é recomendado.</p>
<p>Acompanhe!</p>
<p>* MOLICH, R.; NIELSEN, J. Improving a Human-Computer Dialogue: What <em>designers</em> Know About Traditional Interface <em>Design</em>. <strong>Communications of the ACM</strong>, v. 33, p. 338-342, 1990.</p>
<p>* Para ver as dez heurísticas: http://www.useit.com/papers/heuristic/heuristic_list.html</p>
<p>** Tradução de <a href="http://bartolomeu.wordpress.com/2007/06/22/10-heuristicas-usabilidade/" target="_blank">bartolom.eu</a></p>
<p>*** Stanton, N. &amp; Young, M. (2003). <span style="font-weight: bold;">A Guide to Methodology in Ergonomics: Designing for Human Use</span>. 2nd edition, Taylor &amp; Francis. ISBN: 0-7484-0703-0</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gabriela.trindade.nom.br/2009/11/escolhendo-a-melhor-interface-heuristicas/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Teste de 5 segundos!</title>
		<link>http://www.gabriela.trindade.nom.br/2009/11/teste-de-5-segundos/</link>
		<comments>http://www.gabriela.trindade.nom.br/2009/11/teste-de-5-segundos/#comments</comments>
		<pubDate>Wed, 04 Nov 2009 11:40:24 +0000</pubDate>
		<dc:creator>gabrielaperry</dc:creator>
				<category><![CDATA[Design cases]]></category>
		<category><![CDATA[HCI]]></category>

		<guid isPermaLink="false">http://www.gabriela.trindade.nom.br/?p=694</guid>
		<description><![CDATA[Faça um designer feliz!!! Faça um click-test, dizendo quais as áreas de um layout são mais proeminentes. O tempo para clicar nas áreas que &#8220;se destacam&#8221; é de 5 segundos.
E faça um designer feliz!!!!
http://www.fivesecondtest.com/
]]></description>
			<content:encoded><![CDATA[<p>Faça um designer feliz!!! Faça um click-test, dizendo quais as áreas de um layout são mais proeminentes. O tempo para clicar nas áreas que &#8220;se destacam&#8221; é de 5 segundos.</p>
<p>E faça um designer feliz!!!!</p>
<p><a href="http://www.fivesecondtest.com/" target="_blank">http://www.fivesecondtest.com/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.gabriela.trindade.nom.br/2009/11/teste-de-5-segundos/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Escolhendo a melhor interface &#8211; o Keystroke Level Model</title>
		<link>http://www.gabriela.trindade.nom.br/2009/11/deciding-the-best-design-the-keystroke-level-model/</link>
		<comments>http://www.gabriela.trindade.nom.br/2009/11/deciding-the-best-design-the-keystroke-level-model/#comments</comments>
		<pubDate>Mon, 02 Nov 2009 15:32:57 +0000</pubDate>
		<dc:creator>gabrielaperry</dc:creator>
				<category><![CDATA[Design cases]]></category>
		<category><![CDATA[HCI]]></category>

		<guid isPermaLink="false">http://www.gabriela.trindade.nom.br/?p=645</guid>
		<description><![CDATA[ This post is in portuguese only because you can find plenty of information on KML on the internet.

O Keystroke Level Model (ou KLM) é uma forma rápida e segura* de avaliarmos diferentes interfaces que suportam a mesma tarefa. Este método irá retornar um valor que corresponde à predição de tempo que um usuário que [...]]]></description>
			<content:encoded><![CDATA[<p><span style="font-size: xx-small;"><img id="image117" src="../wp-content/uploads/2008/11/error.png" alt="error.png" width="16" height="16" /> This post is in portuguese only because you can find plenty of information on KML on the internet.<br />
</span></p>
<p>O Keystroke Level Model (ou KLM) é uma forma rápida e segura* de avaliarmos diferentes interfaces que suportam a mesma tarefa. Este método irá retornar um valor que corresponde à predição de tempo que um usuário que não erra leva para realizar a tarefa com a interface em questão.</p>
<p>Minha intenção não é ensinar a usar o KLM. Para isso, você deve buscar outras fontes, como por exemplo este do <a href="http://www.pitt.edu/~cmlewis/KSM.pdf" target="_blank">David Kieras</a>, que é muito didático.  O que eu pretendo com este post é comparar alguns interfaces que suportam a mesma tarefa, e usar o fator &#8220;tempo&#8221; como um dos parâmetros para informar minha decisão sobre qual delas eu devo usar.</p>
<p>A tarefa em questão é associar um conceito a um material, num espaço de criação/edição de materiais, em uma biblioteca virtual de materiais. Cada conceito pertence a uma e apenas uma biblioteca de conceitos. Além de associar o conceito a um material, o usuário deve especificar o quanto (em termos numéricos), esteb conceito está associado ao material que está sendo criado/editado. Por exemplo: o conceito &#8220;Inovação&#8221; está relacionado &#8220;87%&#8221; com o material  &#8220;Polietileno&#8221;.</p>
<p>As interfaces em julgamento são:</p>
<p><img class="alignnone size-full wp-image-646" title="interfaceA" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/11/interfaceA.png" alt="interfaceA" width="472" height="500" /></p>
<p>Figura 1. Interface com drag n´drop. O usuário arrasta um conceito para a área ao lado da tree, e o local (y) onde ele largou o conceito define o quanto o material está associado ao conceito.</p>
<p><img class="alignnone size-full wp-image-647" title="interfaceB" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/11/interfaceB.png" alt="interfaceB" width="623" height="331" /></p>
<p>Figura 2. Interface com HSlider. O usuário seleciona um item na Tree. Na tela ao lado, há uma HSlider, que o usuário usa para dizer o quanto o conceito se asssocia com o material. Na Tree se podem ser, ao lado dos conceitos que estão associados com o material, o quanto (%) o conceito se associa ao material.</p>
<p>Estou assumindo que o usuário é novato no sistema (precisa refletir sobre as ações e precisa procurar os elementos na interface). Vamos aos cálculos**:</p>
<p><strong>Interface Drag n´drop &#8211; Tool tip aparece logo que o conceito está sobre a área &#8211; Tree aberta sem rolagem</strong></p>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="45" valign="top"></td>
<td width="255" valign="top"><strong>Sequencia</strong></td>
<td width="66" valign="top"><strong>Código</strong></td>
<td width="57" valign="top"><strong>Tempo</strong></td>
</tr>
<tr>
<td width="45" valign="top">1</td>
<td width="255" valign="top">Decide iniciar a tarefa</td>
<td width="66" valign="top">M</td>
<td width="57" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">2</td>
<td width="255" valign="top">Escolhe o conceito</td>
<td width="66" valign="top">M</td>
<td width="57" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">3</td>
<td width="255" valign="top">Encontrar o conceito</td>
<td width="66" valign="top">M</td>
<td width="57" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">4</td>
<td width="255" valign="top">Decidir porcentagem de associação</td>
<td width="66" valign="top">M</td>
<td width="57" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">5</td>
<td width="255" valign="top">Apontar (mouse) para o conceito</td>
<td width="66" valign="top">P</td>
<td width="57" valign="top">1.1</td>
</tr>
<tr>
<td width="45" valign="top">6</td>
<td width="255" valign="top">Pressionar e manter o botão do mouse</td>
<td width="66" valign="top">B</td>
<td width="57" valign="top">0.1</td>
</tr>
<tr>
<td width="45" valign="top">7</td>
<td width="255" valign="top">Localizar área que corresponde ao valor decidido no   passo 4</td>
<td width="66" valign="top">M</td>
<td width="57" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">8</td>
<td width="255" valign="top">Apontar para área decidida no passo 7</td>
<td width="66" valign="top">P</td>
<td width="57" valign="top">1.1</td>
</tr>
<tr>
<td width="45" valign="top">9</td>
<td width="255" valign="top">Verificar se está no local que pretendia (confere com   o valor mostrado no tooltip)</td>
<td width="66" valign="top">M</td>
<td width="57" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">10</td>
<td width="255" valign="top">Soltar o mouse</td>
<td width="66" valign="top">B</td>
<td width="57" valign="top">0.1</td>
</tr>
<tr>
<td width="45" valign="top">11</td>
<td width="255" valign="top">Verificar que a ação teve sucesso</td>
<td width="66" valign="top">M</td>
<td width="57" valign="top">1.2</td>
</tr>
</tbody>
</table>
<p><strong>TOTAL = 7M + 2P + 2B = 10.8 segundos</strong></p>
<p>Ainda para esta mesma interface, temos que considerar que o usuário decide mudar o valor da associação. Neste caso, ficaria assim:</p>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="45" valign="top"></td>
<td width="255" valign="top"><strong>Sequencia</strong></td>
<td width="66" valign="top"><strong>Código</strong></td>
<td width="57" valign="top"><strong>Tempo</strong></td>
</tr>
<tr>
<td width="45" valign="top">12</td>
<td width="255" valign="top">Avaliar que valor não está correto</td>
<td width="66" valign="top">M</td>
<td width="57" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">13</td>
<td width="255" valign="top">Decidir nova porcentagem de associação</td>
<td width="66" valign="top">M</td>
<td width="57" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">14</td>
<td width="255" valign="top">Decidir iniciar a tarefa</td>
<td width="66" valign="top">M</td>
<td width="57" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">15</td>
<td width="255" valign="top">Pressionar botão do mouse (não aponta porque está   sobre o objeto)</td>
<td width="66" valign="top">B</td>
<td width="57" valign="top">0.1</td>
</tr>
<tr>
<td width="45" valign="top">16</td>
<td width="255" valign="top">Localizar área que corresponde ao valor decidido no   passo 11</td>
<td width="66" valign="top">M</td>
<td width="57" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">17</td>
<td width="255" valign="top">Apontar para novo local</td>
<td width="66" valign="top">P</td>
<td width="57" valign="top">1.1</td>
</tr>
<tr>
<td width="45" valign="top">18</td>
<td width="255" valign="top">Verificar se está no local que pretendia (confere com   o valor mostrado no tooltip)</td>
<td width="66" valign="top">M</td>
<td width="57" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">19</td>
<td width="255" valign="top">Soltar botão do mouse</td>
<td width="66" valign="top">B</td>
<td width="57" valign="top">0.1</td>
</tr>
<tr>
<td width="45" valign="top">20</td>
<td width="255" valign="top">Verificar que a ação teve sucesso</td>
<td width="66" valign="top">M</td>
<td width="57" valign="top">1.2</td>
</tr>
</tbody>
</table>
<p><strong>TOTAL = 6M + 1P + 2B = 8.5 segundos</strong></p>
<p><strong>Interface HSlider &#8211; Tool tip aparece sempre na HSlider &#8211; Tree aberta sem rolagem</strong></p>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="45" valign="top"></td>
<td width="255" valign="top"><strong>Sequencia</strong></td>
<td width="66" valign="top"><strong>Código</strong></td>
<td width="58" valign="top"><strong>Tempo</strong></td>
</tr>
<tr>
<td width="45" valign="top">1</td>
<td width="255" valign="top">Decide iniciar a tarefa</td>
<td width="66" valign="top">M</td>
<td width="58" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">2</td>
<td width="255" valign="top">Escolhe o conceito</td>
<td width="66" valign="top">M</td>
<td width="58" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">3</td>
<td width="255" valign="top">Encontrar o conceito</td>
<td width="66" valign="top">M</td>
<td width="58" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">4</td>
<td width="255" valign="top">Decidir porcentagem de associação</td>
<td width="66" valign="top">M</td>
<td width="58" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">5</td>
<td width="255" valign="top">Clica sobre o conceito</td>
<td width="66" valign="top">BB</td>
<td width="58" valign="top">2*0.1</td>
</tr>
<tr>
<td width="45" valign="top">6</td>
<td width="255" valign="top">Verifica se o conceito surge na área ao lado</td>
<td width="66" valign="top">M</td>
<td width="58" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">7</td>
<td width="255" valign="top">Localizar no HSlider o local que corresponde ao valor   decidido no passo 4</td>
<td width="66" valign="top">M</td>
<td width="58" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">8</td>
<td width="255" valign="top">Apontar para o botão do HSlider</td>
<td width="66" valign="top">P</td>
<td width="58" valign="top">1.1</td>
</tr>
<tr>
<td width="45" valign="top">9</td>
<td width="255" valign="top">Pressionar e manter o botão do mouse</td>
<td width="66" valign="top">B</td>
<td width="58" valign="top">0.1</td>
</tr>
<tr>
<td width="45" valign="top">10</td>
<td width="255" valign="top">Apontar para o local decidido no passo 7</td>
<td width="66" valign="top">P</td>
<td width="58" valign="top">1.1</td>
</tr>
<tr>
<td width="45" valign="top">11</td>
<td width="255" valign="top">Verificar se está no local que pretendia (confere com   o valor mostrado no tooltip)</td>
<td width="66" valign="top">M</td>
<td width="58" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">12</td>
<td width="255" valign="top">Soltar o mouse</td>
<td width="66" valign="top">B</td>
<td width="58" valign="top">0.1</td>
</tr>
<tr>
<td width="45" valign="top">13</td>
<td width="255" valign="top">Verificar que a ação teve sucesso (não precisa   procurar novamente o conceito)</td>
<td width="66" valign="top">M</td>
<td width="58" valign="top">1.2</td>
</tr>
</tbody>
</table>
<p><strong>TOTAL = 6M + 1P + 4B = 11 segundos</strong></p>
<p>Ainda para esta mesma interface, temos que considerar que o usuário decide mudar o valor da associação. Neste caso, ficaria assim:</p>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="45" valign="top"></td>
<td width="255" valign="top"><strong>Sequencia</strong></td>
<td width="66" valign="top"><strong>Código</strong></td>
<td width="58" valign="top"><strong>Tempo</strong></td>
</tr>
<tr>
<td width="45" valign="top">14</td>
<td width="255" valign="top">Avaliar que valor não está correto</td>
<td width="66" valign="top">M</td>
<td width="58" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">15</td>
<td width="255" valign="top">Decidir nova porcentagem de associação</td>
<td width="66" valign="top">M</td>
<td width="58" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">16</td>
<td width="255" valign="top">Decidir iniciar a tarefa</td>
<td width="66" valign="top">M</td>
<td width="58" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">17</td>
<td width="255" valign="top">Localizar no HSlider o local que corresponde ao valor   decidido no passo 2</td>
<td width="66" valign="top">M</td>
<td width="58" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">18</td>
<td width="255" valign="top">Pressionar e manter o botão do mouse</td>
<td width="66" valign="top">B</td>
<td width="58" valign="top">0.1</td>
</tr>
<tr>
<td width="45" valign="top">19</td>
<td width="255" valign="top">Apontar para o local decidido no passo 2</td>
<td width="66" valign="top">P</td>
<td width="58" valign="top">1.1</td>
</tr>
<tr>
<td width="45" valign="top">20</td>
<td width="255" valign="top">Verificar se está no local que pretendia (confere com   o valor mostrado no tooltip)</td>
<td width="66" valign="top">M</td>
<td width="58" valign="top">1.2</td>
</tr>
<tr>
<td width="45" valign="top">21</td>
<td width="255" valign="top">Soltar o mouse</td>
<td width="66" valign="top">B</td>
<td width="58" valign="top">0.1</td>
</tr>
<tr>
<td width="45" valign="top">22</td>
<td width="255" valign="top">Verificar que a ação teve sucesso (não precisa   procurar novamente o conceito)</td>
<td width="66" valign="top">M</td>
<td width="58" valign="top">1.2</td>
</tr>
</tbody>
</table>
<p><strong>TOTAL = 6M + 1P + 2B = 9.7 segundos</strong></p>
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="144" valign="top"></td>
<td width="151" valign="top">Interface Drag n´Drop</td>
<td width="151" valign="top">Interface Hslider</td>
</tr>
<tr>
<td width="144" valign="top">Sem erro</td>
<td width="151" valign="top">10.8</td>
<td width="151" valign="top">11</td>
</tr>
<tr>
<td width="144" valign="top">Com erro</td>
<td width="151" valign="top">10.8 + 8.5 = 19.3</td>
<td width="151" valign="top">11 + 9.7 = 20.7</td>
</tr>
</tbody>
</table>
<p>Concluí que com a interface com Drag n´Drop leva-se cerca e 7% menos tempo que com a interface HSlider. Eu nao acho que esta diferença de tempo seja significativa, por isso precisaria de mais critérios para decidir. Neste ponto, eu recomendaria um teste com (5) usuários. Acompanhe aqui para saber como foi.</p>
<p>* Aqui neste (excelente) livro, você encontra uma breve descirção de diversos métodos ergonômicos, além de uma avaliação de parâmetros como confiabilidade, rapidez no treinamento e na aplicação. Eu comprei e gostei :0) Ah, e fiquei sabendo neste blog: &#8220;<a href="http://design-ergonomia.blogspot.com/2009/09/guide-to-methodology-in-ergonomics.html" target="_blank">o design e a ergonomia</a>&#8221;</p>
<p>Salvendy, G., Stanton, N. &amp; Young, M. (2003). <span style="font-weight: bold;">A Guide to Methodology in Ergonomics: Designing for Human Use</span>. 2nd edition, Taylor &amp; Francis. ISBN: 0-7484-0703-0</p>
<p>** O KLM prescreve operadores (tanto a nível operacional quanto mental) e tempos para cada um deles. Para ver como cheguei a estes resultados, veja o artigo do David Kieras. Estes &#8220;tempos&#8221; foram medidos em experimentos em laboratório. Para ver mais detalhes, veja o original: Card, S.K.; T.P. Thomas &amp; A. Newall (1983), written at London, The Psychology of Human-Computer Interaction, Lawrence Erbaum Associates, ISBN 0-89859-243-7<cite id="CITEREFCardThomasNewall1983"></cite></p>
]]></content:encoded>
			<wfw:commentRss>http://www.gabriela.trindade.nom.br/2009/11/deciding-the-best-design-the-keystroke-level-model/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>To tree or not to tree?</title>
		<link>http://www.gabriela.trindade.nom.br/2009/11/to-tree-or-not-to-tree/</link>
		<comments>http://www.gabriela.trindade.nom.br/2009/11/to-tree-or-not-to-tree/#comments</comments>
		<pubDate>Sun, 01 Nov 2009 06:54:09 +0000</pubDate>
		<dc:creator>gabrielaperry</dc:creator>
				<category><![CDATA[Design cases]]></category>
		<category><![CDATA[HCI]]></category>

		<guid isPermaLink="false">http://www.gabriela.trindade.nom.br/?p=638</guid>
		<description><![CDATA[ To tree or not to tree? Download the english version.
Bem, vai ficar complicado traduzir o título deste post, mas acho que deu pra entender o que eu quis dizer com ele ;0)
Trees são um dos meus data controls favoritos, porque dá pra colocar montes de informação dentro deles, organizadas em categorias. Elas também são [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-652" title="flags" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/11/flags.jpg" alt="flags" width="52" height="27" /><a href="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/11/To-tree-or-not-to-tree.doc" target="_blank"> To tree or not to tree? Download the english version</a>.</p>
<p>Bem, vai ficar complicado traduzir o título deste post, mas acho que deu pra entender o que eu quis dizer com ele ;0)<br />
Trees são um dos meus data controls favoritos, porque dá pra colocar montes de informação dentro deles, organizadas em categorias. Elas também são otimizadas para visualização, já que o usuário pode facilmente setar o que ele quer e o que não quer ver. Por isso eu uso bastante :0)</p>
<p>Neste novo projeto em que estou trabalhando, andei desenhando trees para um monte de casos de uso (sim, eu desenho meus casos de uso), e, quando me dei conta, tinha apenas um caos que não tinha uma tree&#8230;. Uma parte dele está na imagem abaixo (à esquerda).</p>
<p>Seria legal se todos os casoso tivessem o mesmo jeito de mostrar e interagir com informação &#8211; se eu uso trees em todo lugar, porque não usar neste caso de uso também? A resposta é simples, você consegue descobri-la?</p>
<p><img class="alignnone size-full wp-image-643" title="totree" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/11/totree.png" alt="totree" width="443" height="486" /></p>
<p>O grupo à esquerda é parte de uma tela onde você escohe o tipo de um material. Estas categorias são mutualmente exclusivas (você só pode escolher uma) e coletivamente exaustivas (elas, como grupo, descrevem todos os tipos possíveis; qualquer material tem que estr em uma delas). Na direita, temos processos industriais. Um único material pode &#8220;ter&#8221; mais de um processo, tanto na mesma categoria como em categorias diferentes. Então, se eu usasse trees à esquerda, quando um &#8220;galho&#8221; estivesse fechado, o usuário não veria uma informação vital (coletivamente exaustiva, lembra?). Neste caso, ele não estaria apto a escoher. Por outro lado, usar tree para mostrar processos permite que o usuário &#8220;esconda&#8221; processos que não lhe interessam.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gabriela.trindade.nom.br/2009/11/to-tree-or-not-to-tree/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>M****! Deletei!</title>
		<link>http://www.gabriela.trindade.nom.br/2009/10/f-i-deleted-it/</link>
		<comments>http://www.gabriela.trindade.nom.br/2009/10/f-i-deleted-it/#comments</comments>
		<pubDate>Fri, 30 Oct 2009 17:25:52 +0000</pubDate>
		<dc:creator>gabrielaperry</dc:creator>
				<category><![CDATA[Design cases]]></category>
		<category><![CDATA[HCI]]></category>

		<guid isPermaLink="false">http://www.gabriela.trindade.nom.br/?p=632</guid>
		<description><![CDATA[ F***! I deleted it! Download the english version.
Hehe, e agora, o que você vai fazer? Como você deve ter notado, o post é sobre deletar itens inadvertidamente. Meu argumento é que este pode ser um erro que o usuário irá cometer (mesmoq ue a gente siga a lei de Fitt). Como nós, desenvolvedores (e [...]]]></description>
			<content:encoded><![CDATA[<p><img title="flags" src="../wp-content/uploads/2009/11/flags.jpg" alt="flags" width="52" height="27" /><a href="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/F.doc" target="_blank"> F***! I deleted it! Download the english version</a>.</p>
<p>Hehe, e agora, o que você vai fazer? Como você deve ter notado, o post é sobre deletar itens inadvertidamente. Meu argumento é que este pode ser um erro que o usuário irá cometer (mesmoq ue a gente siga a lei de Fitt). Como nós, desenvolvedores (e designers) cuidadosos podemos evitar isso? Nós os &#8220;alertamos&#8221; :0)</p>
<p>Nós jogamos um Alert (o control) que diz algo do tipo: &#8220;ei, tem certeza que quer deletar isso?&#8221;</p>
<p>E o que o usuário faz? Ele não lê e clica ok. &#8211; &#8220;M****!&#8221;. Você diz: &#8211; &#8220;eu avisei&#8221;.</p>
<p>Bem, e se &#8211; e se e se &#8211; tentássemos algo diferente? E se ao invés de &#8220;alertar&#8221; o usuário, mudássemos o estado de um item e colocássemos um botão de undo?</p>
<p><img class="alignnone size-full wp-image-633" title="deletedIt" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/deletedIt.png" alt="deletedIt" width="192" height="155" /></p>
<p>Se o usuário inadvertidamente deleta o &#8220;Item F&#8221;, ele vê que o estado do item mudou. Se ele realmente quer deletar, ok, então quando ele sair* o tiem será deletado. Mas, se ele comete um erro, ele pode desfaze-lo logo que percebe.</p>
<p>* É claro, temos o problema de saber quando o usuário sai&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gabriela.trindade.nom.br/2009/10/f-i-deleted-it/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Gentle ItemEditor: sugestão de design</title>
		<link>http://www.gabriela.trindade.nom.br/2009/10/gentle-itemeditor-design-suggestion/</link>
		<comments>http://www.gabriela.trindade.nom.br/2009/10/gentle-itemeditor-design-suggestion/#comments</comments>
		<pubDate>Fri, 30 Oct 2009 17:15:32 +0000</pubDate>
		<dc:creator>gabrielaperry</dc:creator>
				<category><![CDATA[Design cases]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[HCI]]></category>

		<guid isPermaLink="false">http://www.gabriela.trindade.nom.br/?p=622</guid>
		<description><![CDATA[ Gentle ItemEditor: design suggestion. Download the english version.
Agora é hora de ItemEditors.  Para os que não estão familizarizados com eles, veja este exemplo (Flex docs: http://livedocs.adobe.com/flex/3/html/movies/DropInNumStepper.swf)
ItemEditors são um tipo de ItemRenderer, como o nome diz: são uma view para um item. Pense num Tree, num List, num DataGrid&#8230; Normalmente, itens são mostrados como texto, [...]]]></description>
			<content:encoded><![CDATA[<p><img title="flags" src="../wp-content/uploads/2009/11/flags.jpg" alt="flags" width="52" height="27" /><a href="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/Gentle-IE.doc" target="_blank"> Gentle ItemEditor: design suggestion. Download the english version</a>.</p>
<p>Agora é hora de ItemEditors.  Para os que não estão familizarizados com eles, veja este exemplo (Flex docs: <a href="http://livedocs.adobe.com/flex/3/html/movies/DropInNumStepper.swf" target="_blank">http://livedocs.adobe.com/flex/3/html/movies/DropInNumStepper.swf</a>)</p>
<p>ItemEditors são um tipo de ItemRenderer, como o nome diz: são uma view para um item. Pense num Tree, num List, num DataGrid&#8230; Normalmente, itens são mostrados como texto, mas, às vezes, queremos usar imagens e até mesmo outros controls. E se você precisa editar itens no local, você usa um ItemEditor :0)</p>
<p>
<object width="300" height="250">
<param name="movie" value="http://livedocs.adobe.com/flex/3/html/movies/DropInNumStepper.swf"></param>
<param name="quality" value="high"></param>
<param name="wmode" value="window"></param>
<param name="menu" value="false"></param>
<param name="bgcolor" value="#FFFFFF"></param>
<embed type="application/x-shockwave-flash" width="300" height="250" src="http://livedocs.adobe.com/flex/3/html/movies/DropInNumStepper.swf" quality="high" bgcolor="#FFFFFF" wmode="window" menu="false" ></embed>
</object>
</p>
<p>Bem simples, hein? Mas e quanto à usabilidade deles? Pense que você não é um desenvolvedor, ok? Você não está familizarizado com eles. Entao, como você muda o conteúdo de um item? Você vai esperar que seu usuário explore a interface? Eu não :0)</p>
<p>Então estou sugerindo o uso de ItemEditors como este da imagem abaixo:</p>
<p><img class="alignnone size-full wp-image-628" title="Ie" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/Ie.png" alt="Ie" width="192" height="155" /></p>
<p>O usuário vê, ao laod de cada item, dois botões: um para deletar e um para editar. Quando ele pressiona o botão de editar, o ItemRenderer muda, e agora ele mostra um TextInput com um botão de &#8220;tick&#8221;, ok. Qual a diferença? O usuário sabe o que esperar (e se ele for muito novato, pelo menos vai ter uma pista que precisa clicar em alguma coisa), e se ele clica no botão de editar, ele vê a interface mudar. &#8220;Ah&#8230; então é aqui que eu mudo o conteúdo&#8230; Ok&#8221; :0)</p>
<p>PS: Se você for um desenvolvedor, me diga uma estimativa de tempo para fazer este ItemEditor e um como o do site da documentação do Flex (quantas horas você levaria para implementar cada um deles). Se eu tiver retorno, vou publicar a estimativa (anonimamente, claro).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gabriela.trindade.nom.br/2009/10/gentle-itemeditor-design-suggestion/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>True or false? Cuidado com os rótulos dos seus controls</title>
		<link>http://www.gabriela.trindade.nom.br/2009/10/true-or-false-beware-of-the-wording-of-your-controls/</link>
		<comments>http://www.gabriela.trindade.nom.br/2009/10/true-or-false-beware-of-the-wording-of-your-controls/#comments</comments>
		<pubDate>Thu, 29 Oct 2009 17:27:31 +0000</pubDate>
		<dc:creator>gabrielaperry</dc:creator>
				<category><![CDATA[Design cases]]></category>
		<category><![CDATA[HCI]]></category>

		<guid isPermaLink="false">http://www.gabriela.trindade.nom.br/?p=611</guid>
		<description><![CDATA[ True or false? Beware of the wording of your controls. Download the english version.
Eu sempre tenho essa sensação quando estou escrevendo os rótuolos dos meus controls (no caso, checkbox). Sempre chega um momento em que eu &#8220;travo&#8221;. Se não deu pra entender meu problema, veja a imagem abaixo:

Considere a checkbox no topo: o que [...]]]></description>
			<content:encoded><![CDATA[<p><img title="flags" src="../wp-content/uploads/2009/11/flags.jpg" alt="flags" width="52" height="27" /><a href="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/True-or-false.doc" target="_blank"> True or false? Beware of the wording of your controls. Download the english version</a>.</p>
<p>Eu sempre tenho essa sensação quando estou escrevendo os rótuolos dos meus controls (no caso, checkbox). Sempre chega um momento em que eu &#8220;travo&#8221;. Se não deu pra entender meu problema, veja a imagem abaixo:</p>
<p><img class="alignnone size-full wp-image-664" title="concordo" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/concordo.png" alt="concordo" width="169" height="78" /></p>
<p>Considere a checkbox no topo: o que ela diz? Você concorda?</p>
<p>E a de baixo: você concorda?</p>
<p>Pois é isso que me trava. Não é uma tarefa fácil, o próprio Shneiderman*falou. Eu acho que tem muito a ver com o rótulo: se é positivo, normalmente é mais fácil marcar o estado desejado (concordo / não concordo).</p>
<p>Mas desta vez a coisa era um pouco mais complicada&#8230;..</p>
<p>Eu tenho uma checkbox que deve habilitar / desabilitar a edição de uma propriedade. Se esta propriedade &#8220;não se aplica&#8221;, então não tem sentido editá-la. Como a figura abaixo mostra:</p>
<p><a href="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/able.png"><img class="alignnone size-full wp-image-665" title="able" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/able.png" alt="able" width="659" height="221" /></a></p>
<p>Se &#8220;Coeficiente de atrito&#8221; se aplica, então você pode atribuir um valor a ela. Mas considere as opções na imagem acima: o que elas significam?</p>
<p><img class="alignnone size-full wp-image-666" title="aplica" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/aplica.png" alt="aplica" width="415" height="128" /></p>
<p>O que eu quero que o usuário entenda? &#8220;Se a propriedade NÃO SE APLICA, então NÃO EDITE&#8221;.</p>
<p>Então, embora tenha parecido esquisito no início, vou usar a sentença negativa. Eu achei que poderia ser confuso, porque se a propriedade for aplicável, então você teria que desmarcar o checkbox, o que é equivalente a uma dupla negação: &#8220;Não não se aplica, i.e. se aplica&#8221;. Mas eu também acho que ter o control selecionado no início é importante, para que o usuário veja que ele está desabilitado porque &#8220;não se aplica&#8221;.</p>
<p>Então a coisa ficou assim:</p>
<p><img class="alignnone size-full wp-image-667" title="balanca" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/balanca.png" alt="balanca" width="378" height="161" /></p>
<p>* Se ele disse, deve ser verdade ;0) Leia, é um clássico: <em>Software Psychology: Human Factors in Computer and Information Systems</em>;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gabriela.trindade.nom.br/2009/10/true-or-false-beware-of-the-wording-of-your-controls/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Eu prototipo! Problemas evitados e soluções descobertas.</title>
		<link>http://www.gabriela.trindade.nom.br/2009/10/i-prototype-drops-of-avoided-problems-and-discovered-solutions/</link>
		<comments>http://www.gabriela.trindade.nom.br/2009/10/i-prototype-drops-of-avoided-problems-and-discovered-solutions/#comments</comments>
		<pubDate>Thu, 22 Oct 2009 19:48:51 +0000</pubDate>
		<dc:creator>gabrielaperry</dc:creator>
				<category><![CDATA[Design cases]]></category>

		<guid isPermaLink="false">http://www.gabriela.trindade.nom.br/?p=603</guid>
		<description><![CDATA[ I prototype! Drops of avoided problems and discovered solutions. Download the english version.
Estou aqui novamente para falar sobre design. A idéia agora é documentar o processo de proejto de uma aplicação que deve auxiliar na seleção de materiais. Estou projetando a interface, com o precioso auxílio do prof. André Canal Marques  e do prof. [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-670" title="flag" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/flag.png" alt="flag" width="60" height="32" /> <a href="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/I-prototype.doc" target="_blank">I prototype! Drops of avoided problems and discovered solutions. Download the english version.</a></p>
<p>Estou aqui novamente para falar sobre design. A idéia agora é documentar o processo de proejto de uma aplicação que deve auxiliar na seleção de materiais. Estou projetando a interface, com o precioso auxílio do prof. André Canal Marques  e do prof. Celso Scalestksy,ambos excelentes designers. O projeto é da Unisinos, e esparamos ter algo conreto para mostrar em alguns meses :0)</p>
<p>Bem, seleção de materiais é um assunto vasto. Há pessoas que fazem pós graduação nisso (como o prof. Marques fez). Você tem que saber Química e um monte de Engenharia. De forma resumida, um dos objetivos é responder a pergunta: &#8220;de que material este objeto pode/deve ser feito&#8221;? Há muitas variáveis nesta questão, e para projetar uma aplicação que efetivamente ajude, é preciso conhecê-las.</p>
<p>A questão é que eu não sou uma especialista no assunto&#8230;. E não vou me tornar uma especialista em algumas semanas. Nem os especialistas em seleção de materiais irão se tornar especialistas em design de interface&#8230; E aí, o que fazer?</p>
<p>Nós prototipamos*! Claro, houveram reuniões prévias para que eu tivesse um pouco mais de enetndimento da área (ele beirava o zero), para conhecer algunas cases e para ver o que nossos vizinhos estão fazendo. Algumas das coisas importantes que eu aprendi:</p>
<ol>
<li>Registrar um material leva tempo. Há muitos valores a associar com um material.</li>
<li>Pode haver dois materiais com composição química idêntica, mas com propriedades diferentes.</li>
<li>Há livros e softwares onde você pode conseguir o valor das propriedades de engenharia de um material. Por exemplo, eles podem te fornecer os dados sobre o Polietileno. Mas se o fabricante muda o processo de fabricação do material, as propriedades do livro/software não estão &#8220;corretas&#8221;.</li>
<li>ÀS vezes, o fabricante dá uma amostra do material, mas não dá a descriçao completa. Ele informa as propriedades mais relevantes, mas as demais devem ser pesquisadas (no web site, por exemplo).</li>
<li>Há propriedades que não são relevantes para alguns materiais.</li>
</ol>
<p>Também fiquei sabendo que a materioteca tinha uma ficha para registrar as amostras, e recebi uma cóipa desta ficha.</p>
<p>Depois destas reuniões, eu comecei com modelos de papel e caneta. A idéia é criar um layout básico, testar algumas funcionalidades e ver como elas se comportam juntas. E isso já me economizou muito tempo e me deu algumas boas idéias :0)</p>
<p><a href="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/geral.jpg"><img class="size-thumbnail wp-image-604 alignnone" style="margin-left: 20px; margin-right: 20px;" title="geral" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/geral-150x150.jpg" alt="geral" width="150" height="150" /></a></p>
<p>Figura 1. Os promeiros desenhos.</p>
<p>Por exemplo: a tela &#8220;Tipo&#8221;.  Cada material deve ser classificado de acordo com seu tipo. Mas há mais de uma taxonomia para isso. Estas taxonomias consideram diferentes aspectos dos materiais, como composição química. Estamos usando a mesma da materioteca. Eu estava desenhando essa tela (figura 2, à direita) e pensei: &#8220;ei, será que um polímero não pode ser natural? Tipo, proteínas são anturais&#8230;&#8221; Então eu desenhei a tela que está à esquerda na figura 2. Mostrei para o prof. Marques, que disse: &#8220;é, está certo, mas neste sistema de classificação, um material só pode ser associado a um tipo&#8221;. Ok, beleza.</p>
<p><a href="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/tipo.jpg"><img class="size-thumbnail wp-image-605 alignnone" style="margin-left: 20px; margin-right: 20px;" title="tipo" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/tipo-150x150.jpg" alt="tipo" width="150" height="150" /></a></p>
<p>Figure 2. Como os tipos podem ser atribuídos?</p>
<p>O segundo exemplo de benefício de usar &#8220;protótipos*&#8221; tem a ver com a tarefa de registrar um novo material. Como você pode ver na figra 3, há propriedades sensoriais (mais à esquerda, no topo), propriedades de engenharia (à direita) e uma visão geral (à esquerda, embaixo) de propriedades comuns.  Como elas estão duplicadas na aba &#8220;Propriedades de engenharia&#8221;, pensei que talvez o sistema pudesse usar estas propriedades para gerar esta &#8220;visão geral&#8221;, que é importante para  o usuário. &#8220;Sim, é uma boa idéia&#8221;, meus colegas disseram. POis será implementado :0)</p>
<p><a href="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/3props.jpg"><img class="alignnone size-thumbnail wp-image-607" title="3props" src="http://www.gabriela.trindade.nom.br/wp-content/uploads/2009/10/3props-150x150.jpg" alt="3props" width="150" height="150" /></a></p>
<p>Figura 3. Uma amostra das propriedades que um material pode ter.</p>
<p>Seguindo esta linha de raciocínio, eu pensei: &#8220;hei, pode ser uma boa idéia melhorar a tarefa ainda mais, fazê-la mais rápido, se, dado o tipo, o sistema pudesse reconhecer alguns valores padrão de propriedades&#8221;. A resposta foi: &#8220;é plausível e é uma boa idéia. Mas vai demorar para compilar estas propriedades&#8221;.</p>
<p>O caso é: para papel e caneta, e para uma sessão de uma hora de desenho, eu consegui entender a aplicação muito melhor.</p>
<p>Você deveria tentar :0)</p>
<p>* Certo, não são protótipos. Não são nem mock-ups&#8230; São mais modelos, de tão simples que são. Mas são de uma grande ajuda.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gabriela.trindade.nom.br/2009/10/i-prototype-drops-of-avoided-problems-and-discovered-solutions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
