<?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"
	>

<channel>
	<title>Experiência do Usuário</title>
	<atom:link href="http://uxblog.locaweb.com.br/feed" rel="self" type="application/rss+xml" />
	<link>http://uxblog.locaweb.com.br</link>
	<description></description>
	<pubDate>Mon, 01 Dec 2008 11:44:17 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.5.1</generator>
	<language>en</language>
			<item>
		<title>[Padrão de Uso] Navegação em grandes conjuntos de dados</title>
		<link>http://uxblog.locaweb.com.br/2008/12/01/padrao-de-uso-navegacao-em-grandes-conjuntos-de-dados/</link>
		<comments>http://uxblog.locaweb.com.br/2008/12/01/padrao-de-uso-navegacao-em-grandes-conjuntos-de-dados/#comments</comments>
		<pubDate>Mon, 01 Dec 2008 11:41:58 +0000</pubDate>
		<dc:creator>Joca</dc:creator>
		
		<category><![CDATA[Arquitetura da Informação]]></category>

		<category><![CDATA[Design]]></category>

		<category><![CDATA[design de interação]]></category>

		<guid isPermaLink="false">http://uxblog.locaweb.com.br/?p=90</guid>
		<description><![CDATA[Como dito no meu post &#8220;Projetando e desenhando aplicações e websites complexos&#8221; começamos uma série de posts sobre os padrões de uso de aplicações complexas e seus respectivos padrões de interação.
O primeiro foi [Padrão de Uso] Exploratório.
Aqui vamos falar dos padrões de interação adequados para quando o usuário se depara com grandes quantidades de dados [...]]]></description>
			<content:encoded><![CDATA[<p>Como dito no meu post &#8220;<a href="http://uxblog.locaweb.com.br/2008/11/09/projetando-e-desenhando-aplicacoes-e-websites-complexos">Projetando e desenhando aplicações e websites complexos</a>&#8221; começamos uma série de posts sobre os padrões de uso de aplicações complexas e seus respectivos padrões de interação.</p>
<p>O primeiro foi <a href="http://uxblog.locaweb.com.br/2008/11/18/padrao-de-uso-exploratorio/">[Padrão de Uso] Exploratório</a>.</p>
<p>Aqui vamos falar dos padrões de interação adequados para quando o usuário se depara com grandes quantidades de dados em nossa aplicação. De forma geral, grandes conjuntos de dados são normalmente navegados por meio de hierarquias. Vamos procurar expor algumas alternativas, uma vez que as hierarquias:</p>
<ul>
<li> são usadas em excesso;</li>
<li> podem ser difíceis de navegar por razões de performance e complexidade;</li>
<li> nos dão a tentação de mostrar os dados da forma que eles estão armazenados no banco de dados e não da forma que o usuário entende;</li>
<li> com 3 ou 4 níveis, a hierarquia é muito difícil de navegar.</li>
</ul>
<p>Abaixo estão os padrões de uso para navegação em grandes conjuntos de dados. A numeração seguirá a partir do último padrão de uso que vimos no <a href="http://uxblog.locaweb.com.br/2008/11/18/padrao-de-uso-exploratorio/">post anterior</a>.</p>
<p>8. Filtro de hierarquia: por meio de menus drop down e outros controles é possível filtrar as opções da hierarquia.</p>
<p><center><br />
<a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/filtro-hierarquia.png"><img class="alignnone size-medium wp-image-99" title="filtro-hierarquia" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/filtro-hierarquia-300x225.png" alt="" width="300" height="225" /></a></p>
<p><a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/filtro-hierarquia-avancado.png"><img class="alignnone size-medium wp-image-100" title="filtro-hierarquia-avancado" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/filtro-hierarquia-avancado-300x147.png" alt="" width="300" height="147" /></a><br />
</center></p>
<p>9. Acordeão: quando a informação que se deseja mostrar não cabe em uma hierarquia, usa-se o acordeão.</p>
<p><center><br />
<a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/accordion-aspnet.png"><img class="alignnone size-medium wp-image-91" title="accordion-aspnet" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/accordion-aspnet-300x205.png" alt="" width="300" height="205" /></a></p>
<p><a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/accordion-xbox360.jpg"><img class="alignnone size-medium wp-image-92" title="accordion-xbox360" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/accordion-xbox360-300x206.jpg" alt="" width="300" height="206" /></a><br />
</center></p>
<p>10. <em>Tree-table</em>: mistura hierarquia com tabela, pois dessa forma conseguimos mostrar mais informações ao usuário para facilitar sua navegação.</p>
<p><center><br />
<a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/outlook.gif"><img class="alignnone size-medium wp-image-97" title="outlook" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/outlook-300x92.gif" alt="" width="300" height="92" /></a></p>
<p><a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/firefox.gif"><img class="alignnone size-medium wp-image-98" title="firefox" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/firefox-300x200.gif" alt="" width="300" height="200" /></a><br />
</center><br />
11. Gaveta: quando é necessário mostrar informações de um item de uma tabela que provavelmente irá quebrar a formatação dessa tabela.</p>
<p><center><br />
<a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/cumbersidemd.png"><img class="alignnone size-medium wp-image-101" title="cumbersidemd" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/cumbersidemd-300x196.png" alt="" width="300" height="196" /></a><br />
</center></p>
<p>12. Filtro de coluna: quando a tabela contém muita informação e o usuário quer filtrar somente as informações relevantes baseadas em um determinado critério.</p>
<p><center><br />
<a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/freescale11.png"><img class="alignnone size-medium wp-image-95" title="freescale11" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/freescale11-300x161.png" alt="" width="300" height="161" /></a></p>
<p><a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/freescale21.png"><img class="alignnone size-medium wp-image-96" title="freescale21" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/freescale21-300x180.png" alt="" width="300" height="180" /></a><br />
</center></p>
<p>O próximo post será sobre padrões de interação para busca avançada.</p>
<p>Até lá!</p>
]]></content:encoded>
			<wfw:commentRss>http://uxblog.locaweb.com.br/2008/12/01/padrao-de-uso-navegacao-em-grandes-conjuntos-de-dados/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Designing with CRAP</title>
		<link>http://uxblog.locaweb.com.br/2008/11/26/designing-with-crap/</link>
		<comments>http://uxblog.locaweb.com.br/2008/11/26/designing-with-crap/#comments</comments>
		<pubDate>Wed, 26 Nov 2008 12:25:56 +0000</pubDate>
		<dc:creator>Tiago Rosa</dc:creator>
		
		<category><![CDATA[Design]]></category>

		<category><![CDATA[Perfil de usuário]]></category>

		<category><![CDATA[Simplicidade]]></category>

		<category><![CDATA[design de interação]]></category>

		<category><![CDATA[alinhamento]]></category>

		<category><![CDATA[boas práticas]]></category>

		<category><![CDATA[contraste]]></category>

		<category><![CDATA[crap]]></category>

		<category><![CDATA[experiência do usuário]]></category>

		<category><![CDATA[patrick hofmann]]></category>

		<category><![CDATA[proximidade]]></category>

		<category><![CDATA[repetição]]></category>

		<category><![CDATA[tipografia]]></category>

		<guid isPermaLink="false">http://uxblog.locaweb.com.br/?p=83</guid>
		<description><![CDATA[Participei de um Seminário Virtual com Patrick Hofmann (designpH / Google Austrália) que trazia alguns pontos essenciais para se obter um design eficiente e de qualidade.
O ponto alto do seminário foi o que deu título a esse post: “Designing with CRAP”. CRAP? What’a’f#$@? Apesar do nome &#8220;estranho”, CRAP é totalmente do bem! Trata-se de um [...]]]></description>
			<content:encoded><![CDATA[<p>Participei de um Seminário Virtual com Patrick Hofmann (<a href="http://www.designph.com/" target="_blank">designpH</a> / Google Austrália) que trazia alguns pontos essenciais para se obter um design eficiente e de qualidade.</p>
<p>O ponto alto do seminário foi o que deu título a esse post: “Designing with CRAP”. CRAP? What’a’f#$@? Apesar do nome &#8220;estranho”, CRAP é totalmente do bem! Trata-se de um nome formado pela junção das primeiras letras de:</p>
<p><strong>Contrast (contraste)</strong></p>
<p style="padding-left: 30px;">Se dois elementos não são exatamente iguais, torne-os visualmente diferentes. O contraste é usado para direcionar a atenção do usuário para algo em particular, normalmente para elementos essenciais, que queremos que ele veja de todo jeito. Além disso, um design sem contraste fica maçante. Mas para que o contraste funcione, as diferenças devem ser significantes. Diferenças sutis acabam causando mais confusão na cabeça do cliente.</p>
<p style="text-align: center;"><a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/contrast.jpg"><img class="alignnone size-medium wp-image-84 aligncenter" title="contraste" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/contrast-300x241.jpg" alt="Contraste" width="300" height="241" /></a></p>
<blockquote><address>O conteúdo &#8220;trabalhos recentes&#8221; ganha destaque e relevância na página ao ser colocado dentro do box rosa.<br />
</address>
</blockquote>
<p><strong>Repetition (repetição)</strong></p>
<p style="padding-left: 30px;">Repetir elementos relevantes, além de também gerar interesse, adiciona unidade ao que estamos comunicando. Fora isso, também estabelece associações entre os elementos da interface e o que se quer transmitir e cria uma identidade visual consistente. Mas repetição vale tanto para palavras como para imagem. Se você em algum lugar coloca “Clique OK”, não vá usar em outro “Pressione OK.” Porém cuidado! Se usado de forma exagerada, a repetição pode se tornar algo irritante.</p>
<p style="text-align: center;"><a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/repetition_2.gif"><img class="alignnone size-medium wp-image-89" title="repetition_2" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/repetition_2-300x98.gif" alt="Repetição" width="300" height="98" /></a></p>
<blockquote><address>Neste caso, o ideal seria ter mantido a consistência entre os desenhos, usando o mesmo estilo de &#8220;mãos&#8221; para não gerar nenhuma dúvida. </address>
</blockquote>
<p><strong>Alignment (alinhamento)</strong></p>
<p style="padding-left: 30px;">Alinhar elementos torna a página clara, limpa e menos confusa. Passa a sensação de unidade. Mesmo se sua intenção seja fazer algo moderno ou assimétrico, ainda assim é importante que os elementos se alinhem com algo, de alguma forma.</p>
<p style="text-align: center;"><a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/alignment.jpg"><img class="alignnone size-medium wp-image-85 aligncenter" title="Alinhamento" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/alignment-300x245.jpg" alt="" width="300" height="245" /></a></p>
<blockquote><address>Com o layout todo alinhado o site fica mais leve e as informações são mais facilmente encontradas.</address>
</blockquote>
<p><strong>Proximity (proximidade)</strong></p>
<p style="padding-left: 30px;">Mais uma vez, tem a ver com identidade visual, sensação de unidade, associação. Os elementos que tem alguma conexão devem também se conectar visualmente, através da aproximação. O contrário também é válido: aproximar elementos que não têm nenhum tipo de relação pode confundir o usuário. E evite criar blocos com muitos elementos agrupados, para não poluir demais a página.</p>
<p style="text-align: center;"><a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/proximidade.jpg"><img class="alignnone size-medium wp-image-88 aligncenter" title="proximidade" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/proximidade-300x202.jpg" alt="Bom exemplo de proximidade, com facilidade percebe-se a ligação entre o conteúdo de cada coluna." width="300" height="202" /></a></p>
<blockquote><address>Bom exemplo de proximidade, com facilidade percebe-se a ligação entre o conteúdo de cada coluna.</address>
</blockquote>
<p>Ou seja, CRAP define quatro princípios básicos que um designer deve ter em mente, sempre, além de dar o toque profissional ao resultado final. Mas outras coisas precisam ser levadas em conta também:</p>
<ul>
<li><strong>Tipografia:</strong> É bem importante obter uma hierarquia nos textos do site, utilizando diferentes tamanhos e pesos para títulos, textos, comentários, <em>disclaimers</em>. Assim você guia o usuário nas informações e não o deixa perdido sem saber por onde começar.</li>
</ul>
<ul>
<li><strong>Imagens:</strong> Devem ser basicamente uma interpretação do texto. No mínimo precisam estar relacionadas ao texto. Por exemplo: Estou fazendo um site, um portal sobre carros importados. Nada mais correto do que utilizar uma foto de um belo carro importado para ilustrar.</li>
<li>Elimine do layout qualquer informação que não seja relevante para seu público.</li>
</ul>
<p>Mas no final das contas, como saber se o meu design está bom? Se ele está “calibrado”? Simples, TESTE! Há vários modos de testar layouts. Dois bem interessantes são:</p>
<ol>
<li><em>Flash Someone</em>: Chame uma pessoa e mostre rapidamente o layout a ela. Coisa de segundos. Depois a pergunte o que ela viu. Será que esta pessoa conseguiu lembrar do que era de fato importante na página?</li>
<li>Teste seu design com um <em>blur</em>: Aplique o efeito <em>blur</em> (fica parecido com algo nublado, borrado) no layout e veja se as áreas que você quer dar destaque continuam em destaque, mesmo com a imagem meio borrada.</li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://uxblog.locaweb.com.br/2008/11/26/designing-with-crap/feed/</wfw:commentRss>
		</item>
		<item>
		<title>[Padrão de Uso] Exploratório</title>
		<link>http://uxblog.locaweb.com.br/2008/11/18/padrao-de-uso-exploratorio/</link>
		<comments>http://uxblog.locaweb.com.br/2008/11/18/padrao-de-uso-exploratorio/#comments</comments>
		<pubDate>Tue, 18 Nov 2008 15:46:59 +0000</pubDate>
		<dc:creator>Joca</dc:creator>
		
		<category><![CDATA[Arquitetura da Informação]]></category>

		<category><![CDATA[Design]]></category>

		<category><![CDATA[design de interação]]></category>

		<guid isPermaLink="false">http://uxblog.locaweb.com.br/?p=72</guid>
		<description><![CDATA[Como dito no meu post anterior &#8220;Projetando e desenhando aplicações e websites complexos&#8221; vou começar a falar dos padrões de uso de aplicações complexas e seus respectivos padrões de interação.
O padrão de uso exploratório é aquele que permite ao usuário explorar a aplicação. Os padrões de interação associados ao padrão de uso exploratório costumam ter [...]]]></description>
			<content:encoded><![CDATA[<p>Como dito no meu post anterior &#8220;<a href="http://uxblog.locaweb.com.br/2008/11/09/projetando-e-desenhando-aplicacoes-e-websites-complexos">Projetando e desenhando aplicações e websites complexos</a>&#8221; vou começar a falar dos padrões de uso de aplicações complexas e seus respectivos padrões de interação.</p>
<p>O padrão de uso exploratório é aquele que permite ao usuário explorar a aplicação. Os padrões de interação associados ao padrão de uso exploratório costumam ter as seguintes características:</p>
<ul>
<li> Suportam navegação segura e previsível;</li>
<li> Provêem informações para que o usuário se encontre;</li>
<li> Ajudam a unificar informação em uma única visão que de outra forma iria requerer muitos cliques para ser acessada;</li>
<li> Colocam dados e ações relevantes próximos de uma informação principal.</li>
</ul>
<p>Algumas vezes, ao invés de um modo exploratório, pode ser interessante colocar o usuário em um modo linear de ação. O modo linear, por exemplo, um wizard, pode ser muito útil em situações onde o usuário não é um especialista, ou quando queremos dar uma opção simplificada de ação.</p>
<p>Para o padrão de uso exploratório, precisamos pensar em permitir erros e em mostrar dados e ações.</p>
<p><strong>Exploratório - permitindo erros</strong></p>
<p>1. Itens de menu inteligentes: são itens que dizem exatamente o que a aplicação vai fazer, incluindo informação sobre qual objeto vai sofrer a ação.</p>
<p><center><br />
<a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/word.gif"><img class="alignnone size-medium wp-image-74" title="word" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/word.gif" alt="" width="232" height="122" /></a></p>
<p><a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/illustrator.gif"><img class="alignnone size-medium wp-image-73" title="illustrator" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/illustrator-217x300.gif" alt="" width="217" height="300" /></a><br />
</center></p>
<p>2. <em>Undo</em> multi-nível: permite reverter facilmente uma série de ações feitas pelo usuário.</p>
<p><center><br />
<a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/word2.gif"><img class="alignnone size-medium wp-image-76" title="word2" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/word2-300x91.gif" alt="" width="300" height="91" /></a><br />
</center></p>
<p>3. <em>Sandbox</em>: permite ao usuário salvar dados para que ele possa fazer algo com esses dados no futuro. O primeiro exemplo que vem à cabeça é o carrinho de compras, mas há outros, como o botão &#8220;Salvar anúncio&#8221; do Zap imóveis:</p>
<p><center><br />
<a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/sandbox.gif"><img class="alignnone size-medium wp-image-78" title="sandbox" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/sandbox-300x149.gif" alt="" width="300" height="149" /></a><br />
</center></p>
<p>ou as inúmeras opções da Amazon:</p>
<p><center><br />
<a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/sandbox_amazon.jpg"><img class="alignnone size-medium wp-image-77" title="sandbox_amazon" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/sandbox_amazon.jpg" alt="" width="156" height="129" /></a><br />
</center><br />
<strong>Exploratório - mostrando dados</strong></p>
<p>4. Inspeção: o usuário precisa frequentemente ver mais informações sobre um determinado item na mesma tela em que está vendo o item.</p>
<p><center><br />
<a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/mac-mail.gif"><img class="alignnone size-medium wp-image-81" title="mac-mail" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/mac-mail-300x241.gif" alt="" width="300" height="241" /></a><br />
</center></p>
<p>5. Tabs dentro de páginas: permite ver conteúdo detalhado sobre o conteúdo principal que está sendo mostrado.</p>
<p><center><br />
<a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/lojapronta.jpg"><img class="alignnone size-medium wp-image-79" title="lojapronta" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/lojapronta-300x159.jpg" alt="" width="300" height="159" /></a><br />
</center></p>
<p>6. <em>Mouseover</em> com conteúdo rico: utilizado quando queremos dar ao usuário a possibilidade de ver mais informações sobre um determinado item.</p>
<p><center><br />
<a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/applestore.jpg"><img class="alignnone size-medium wp-image-80" title="applestore" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/applestore-300x251.jpg" alt="" width="300" height="251" /></a><br />
</center></p>
<p><strong>Exploratório - mostrando ações</strong></p>
<p>7. Ações <em>inline</em>: o usuário precisa executar uma ação no item que está sendo mostrado.</p>
<p><center><br />
<a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/hosp.jpg"><img class="alignnone size-medium wp-image-82" title="hosp" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/hosp-300x123.jpg" alt="" width="300" height="123" /></a><br />
</center></p>
<p>No próximo post vamos falar sobre padrões de interação para gestão de grandes conjuntos de dados.</p>
<p>Até lá!</p>
]]></content:encoded>
			<wfw:commentRss>http://uxblog.locaweb.com.br/2008/11/18/padrao-de-uso-exploratorio/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Links relacionados: como usar?</title>
		<link>http://uxblog.locaweb.com.br/2008/11/13/links-relacionados-como-usar/</link>
		<comments>http://uxblog.locaweb.com.br/2008/11/13/links-relacionados-como-usar/#comments</comments>
		<pubDate>Thu, 13 Nov 2008 10:49:16 +0000</pubDate>
		<dc:creator>Tiago Rosa</dc:creator>
		
		<category><![CDATA[Arquitetura da Informação]]></category>

		<category><![CDATA[Geral]]></category>

		<category><![CDATA[Simplicidade]]></category>

		<category><![CDATA[links relacionados]]></category>

		<category><![CDATA[publicidade]]></category>

		<category><![CDATA[usabilidade]]></category>

		<category><![CDATA[varejo]]></category>

		<guid isPermaLink="false">http://uxblog.locaweb.com.br/?p=60</guid>
		<description><![CDATA[Esse post fala de algo que aconteceu comigo e que com certeza incomoda muitos usuários. Separei inclusive um screenshot para ilustrar. Procuro sempre olhar novidades no &#8220;mundo do Design&#8221; e uso o StumbleUpon. Entre um clique e outro, acabei caindo em um fórum sobre design e no meio das discussões tinha esse texto: &#8220;cliquem na [...]]]></description>
			<content:encoded><![CDATA[<p>Esse <em>post</em> fala de algo que aconteceu comigo e que com certeza incomoda muitos usuários. Separei inclusive um <em>screenshot</em> para ilustrar. Procuro sempre olhar novidades no &#8220;mundo do Design&#8221; e uso o <a href="http://www.stumbleupon.com/" target="_self">StumbleUpon</a>. Entre um clique e outro, acabei caindo em um fórum sobre design e no meio das discussões tinha esse texto: &#8220;cliquem na <span style="#0000ff;"><span style="underline;">imagem</span></span> para visualizar o Tuto.”</p>
<p style="center;"><a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/exemplo.gif"><img class="size-medium wp-image-63 aligncenter" style="1px solid black;" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/exemplo-300x165.gif" alt="" width="300" height="165" /></a></p>
<p>Até aí, tudo bem, mas notem que a palavra <strong>imagem</strong> é um link, então logo pensei que clicando ali iria abrir de fato o tutorial, certo? Errado!</p>
<p>Ao clicar no link abriu uma janela com comparações de preços de livros. Pensei &#8220;Será que cliquei errado? Caí em uma página para comparar preços, não era um tutorial?&#8221; Decidi não clicar em mais nada e saí do site.</p>
<p>Será que esse tipo de comunicação (quase um &#8220;<a href="http://en.wikipedia.org/wiki/Rickrolling" target="_self">Rickrolling</a>&#8221; ) vale mesmo a pena, uma vez que pode gerar uma certa frustração no usuário? Para quem realmente deseja utilizar este tipo de serviço, é muito importante contextualizar adequadamente o link. Talvez a falta dessa contextualização faça o usuário não sentir a confiança necessária para tomar a decisão de adquirir um produto seu.</p>
<p>Opte por empresas nas quais você mesmo possa contextualizar o que será anunciado e não deixe que o sistema faça isso. Dois exemplos que ilustram melhor o que quero dizer:</p>
<table border="0">
<tbody>
<tr>
<td><a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/thumbs_up.png"><img class="alignnone size-medium wp-image-61" style="text-top;" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/thumbs_up.png" alt="" width="62" height="62" /></a></td>
<td>“A banda <a href="http://www.payableondeath.com" target="_blank"><span style="#0000ff;"><span style="underline;">P.O.D</span></span></a> se apresentará no Brasil&#8230;”</p>
<p><em>o link na palavra P.O.D leva o usuário para um site que comercializa o CD da banda.</em></td>
</tr>
<tr>
<td><a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/thumbs_down.png"><img class="alignnone size-medium wp-image-62" style="text-top;" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/thumbs_down.png" alt="" width="62" height="62" /></a></td>
<td>“A banda P.O.D se apresentará no <a href="http://www.guiadeempregos.com.br" target="_blank">Brasil</a>&#8230;”</p>
<p><em>o link na palavra Brasil leva o usuário para uma página com vagas de trabalho no Brasil.</em></td>
</tr>
</tbody>
</table>
<p>Fica então essa dica!</p>
]]></content:encoded>
			<wfw:commentRss>http://uxblog.locaweb.com.br/2008/11/13/links-relacionados-como-usar/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Projetando e desenhando aplicações e websites complexos</title>
		<link>http://uxblog.locaweb.com.br/2008/11/09/projetando-e-desenhando-aplicacoes-e-websites-complexos/</link>
		<comments>http://uxblog.locaweb.com.br/2008/11/09/projetando-e-desenhando-aplicacoes-e-websites-complexos/#comments</comments>
		<pubDate>Sun, 09 Nov 2008 15:09:14 +0000</pubDate>
		<dc:creator>Joca</dc:creator>
		
		<category><![CDATA[Arquitetura da Informação]]></category>

		<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://uxblog.locaweb.com.br/?p=65</guid>
		<description><![CDATA[O terceiro workshop que participei no User Experience 2008 teve por tema Designing Complex Applications and Websites. Um workshop de dois dias com muita informação interessante!
O que faz um site ou aplicação ser complexa?
Está cada vez mais difícil distinguir a diferença entre um site e uma aplicação complexa. Em algum determinado ponto do seu site [...]]]></description>
			<content:encoded><![CDATA[<p>O terceiro workshop que participei no <a href=http://www.nngroup.com/events/>User Experience 2008</a> teve por tema <a href=http://www.nngroup.com/events/tutorials/complex_apps.html>Designing Complex Applications and Websites</a>. Um workshop de dois dias com muita informação interessante!</p>
<p><b>O que faz um site ou aplicação ser complexa?</b></p>
<p>Está cada vez mais difícil distinguir a diferença entre um site e uma aplicação complexa. Em algum determinado ponto do seu site você vai querer adicionar alguma interatividade além dos links. A partir desse momento você começa a adicionar complexidade. Sites estáticos são considerados simples. Sites de comércio eletrônico e intranets são de média complexidade. Já nas aplicações complexas temos enterprise software (SAP, PeopleSoft, etc.), software específicos a um tema (biotech, global imaging systems, sistemas médicos, seguro,  aviação, etc.) e aplicações de internet &#8220;ricas&#8221; (fotos, stock, comunidades online, leilão, configuração de carro, internet banking, etc.).</p>
<p><b>Quem são os usuários de aplicacações complexas?</b></p>
<ul>
<li> domain expert: especialista em um determinado assunto e precisa de soluções para as situações complexas de seu trabalho (ex: operador de sistema de passagens de avião).
<li> expert: é aquele que vai fundo num tema fora do trabalho (ex: pessoas que compram e vendem ações mas não de forma profissional).
<li> enthusiast: é apaixonado ou conhece muito de um determinado assunto fora do domínio de sua profissão (ex: hobbies, fotografia, online gaming, etc.).
</ul>
<p>A principal barreira para adoção de uma aplicação complexa é sua utilidade. O conceito de utilidade é diferente de usabilidade. Enquanto a usabilidade se procupa em como algo é usado e em facilitar esse uso, a utilidade se foca em quão útil os elementos de design são para o objetivo do usuário. Assim como existe o <a href=http://en.wikipedia.org/wiki/Usability_testing>teste de usabilidade</a> existe também o teste de utilidade. Ele acontece antes do teste de usabilidade. Ele é muito parecido com um teste de usabilidade na forma, ou seja, apresenta-se a uma pessoa uma tela e, por meio de perguntas, vamos descobrindo a utilidade de determinadas funcionalidades dessa tela. Normalmente em um teste de utilidade, basta ter uma tela, pode até ser um protótipo em papel. Ao apresentar essa tela, fazemos algumas perguntas para que está testando essa tela:</p>
<ul>
<li> Explique o que está acontencendo nessa tela. O que você pode fazer nessa tela?
<li> O que você faria primeiro nessa tela para fazer X?
<li> Como você de fato gostaria de começar a fazer X?
<li> Você compartilharia esses dados? Se sim, com quem?
<li> O que você sente falta nessa tela?
<li> Que outras aplicações essa tela te lembra?
</ul>
<p><b>O que fazemos com o resultado de um teste de utilidade?</b></p>
<p>É usado para descobrir padrões de uso. Por meio desse teste descobrimos como o usuário irá utiizar nossa aplicação e, a partir daí, mapear padrões de uso com padrões de interação. Por exemplo: softwares de CRM normalmente vêm com uma opção &#8220;novo&#8221; para criar um novo contato. Uma vez clicado em &#8220;novo&#8221; aparece o formulários com as opções &#8220;salvar&#8221; e &#8220;cancelar&#8221;:</p>
<p><center><img src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/save.jpg" alt="Save" /></center></p>
<p>Fazendo um teste de utilidade com esses usuários, descobriu-se que o padrão de uso era, na maioria das vezes, após clicar em &#8220;salvar&#8221; o usuário clicava em &#8220;novo&#8221; para cadastrar mais um contato. Percebendo esse padrão de uso, apareceu um terceiro botão no formulário, o &#8220;salvar e novo&#8221;:</p>
<p><center><img src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/saveandnew.jpg" alt="Save and New" /></center></p>
<p>Padrões de uso e seus correspondentes padrões de interface facilitam muito o trabalho de quem está projetando uma aplicações complexa.</p>
<p><b>Quais são os padrões de interação e seus respectivos padrões de uso?</b></p>
<p>Podemos trabalhar com 8 categorias de padrão de uso:</p>
<p>1. Exploratório</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- mostrar dados e ações<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- permitir erros</p>
<p>2. Navegação em grandes bases de dados</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- hierarquias<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- tabelas</p>
<p>3. Busca avançada</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- busca baseada em atributos<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- refinamento da busca</p>
<p>4. Entrada e alteração de dados</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- captura eficiente de dados<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- wizard</p>
<p>5. Informação centralizada</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- visualização<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- dashboard</p>
<p>6. Guia</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- mensagens e instruções<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- ajuda</p>
<p>7. Construção de cenários</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- cálculos complexos<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- visualização interativa</p>
<p>8. Comunidade</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- rating/ranking/promoção<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- acompanhar (follow)</p>
<p>Para cada um desses padrões de uso existe um tipo de padrão de interação mais apropriado. Veja abaixo alguns exemplos:</p>
<p><center><a href=http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/picture-3.png><img border=0 width=50% heigth=50% src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/picture-3.png" alt="Yahoo!" /></a></center></p>
<p><center><a href=http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/picture-4.png><img border=0 width=50% heigth=50% src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/picture-4.png" alt="Berkley" /></a></center></p>
<p><center><a href= http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/picture-5.png><img border=0 width=50% heigth=50% src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/picture-5.png" alt="Jennifer Tidewell" /></a></center></p>
<p><center><a href=http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/picture-6.png><img border=0 width=50% heigth=50% src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/picture-6.png" alt="Welie.com" /></a></center></p>
<p>Existem algumas bibliotecas públicas de padrões de interação:</p>
<ul>
<li> <a href=http://developer.yahoo.com/ypatterns/index.php>Yahoo Public Library</a>
<li> <a href=http://www.ui-designpatterns.org/index.html>Berkley Public Library</a>
<li> <a href=http://designinginterfaces.com/>Designing Interfaces - Jennifer Tidwell</a>
<li> <a href=http://welie.com>Welie.com</a>
</ul>
<p>Baseado nessas bilbliotecas de padrões e em sua própria experiência, você deve começar a construir sua própria biblioteca, com as particularidades do seu negócio. </p>
<p>Mas não reinvente a roda, é provável que alguém já tenha tido o mesmo problema de design que você e já tenha documentado uma solução.</p>
<p>A partir de agora vou publicar uma série de posts que serão identificados com [Padrão de Uso] no título para entrarmos em mais detalhes sobre cada um desses padões de uso e seus respectivos padrões de interface.</p>
]]></content:encoded>
			<wfw:commentRss>http://uxblog.locaweb.com.br/2008/11/09/projetando-e-desenhando-aplicacoes-e-websites-complexos/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Sites que vendem</title>
		<link>http://uxblog.locaweb.com.br/2008/11/07/sites-que-vendem/</link>
		<comments>http://uxblog.locaweb.com.br/2008/11/07/sites-que-vendem/#comments</comments>
		<pubDate>Fri, 07 Nov 2008 21:35:35 +0000</pubDate>
		<dc:creator>Joca</dc:creator>
		
		<category><![CDATA[Arquitetura da Informação]]></category>

		<guid isPermaLink="false">http://uxblog.locaweb.com.br/?p=64</guid>
		<description><![CDATA[Esse foi o tema do segundo workshop que assisti na User Experience 2008. Foi ministrado por Bruce “Tog” Tognazzini  que, dentre outras credenciais, tem em seu currículo 14 anos de Apple, onde fundou o Apple Human Interface Group.
Tog dividiu a preocupação com sites que vendem em duas grandes áreas, usabilidade e psicologia.
Usabilidade
Durante todo o [...]]]></description>
			<content:encoded><![CDATA[<p>Esse foi o tema do <a href=http://www.nngroup.com/events/tutorials/ecommerce.html>segundo workshop</a> que assisti na <a href=http://www.nngroup.com/events/>User Experience 2008</a>. Foi ministrado por <a href=http://www.asktog.com/tog.html>Bruce “Tog” Tognazzini</a>  que, dentre outras credenciais, tem em seu currículo 14 anos de Apple, onde fundou o Apple Human Interface Group.</p>
<p>Tog dividiu a preocupação com sites que vendem em duas grandes áreas, usabilidade e psicologia.</p>
<p><b>Usabilidade</b></p>
<p>Durante todo o workshop, ele enfatizou uma frase muito conhecida dos médicos. <a href=http://en.wikipedia.org/wiki/Primum_non_nocere>Primum Non Nocere</a> do latim que significa &#8220;primeiro, não prejudique&#8221;. Esse conceito é ensinado nas escolas de medicina para lembrar aos médicos e profissionais da saúde em geral que eles sempre devem pensar no prejuízo que qualquer intervenção possa causar em um paciente.</p>
<p>É muito parecido com aquele outro mantra, o &#8220;<a href=(http://uxblog.locaweb.com.br/2008/05/26/nao-me-faca-pensar/>Não me faça pensar</a>&#8221; que falamos há algum tempo atrás.</p>
<p>Alguns exemplos de como evitar prejuízo causados por sites aos seus clientes:</p>
<ul>
<li> Nunca perca os dados do cliente quando ele passa de uma página para outra.
<li> Se o cliente pediu um vôo para 8/12, voltando 10/12, não coloque na busca seguinte de hotel a data de hoje com check-out para amanhã.
<li> Se o cliente acabou de olhar uma camisa de tamanho M, não pergunte novamente qual o tamanho quando ele for ver suéter.
<li> Se o cliente comprou um sapato 37 mês passado, não ofereça tamaho 40 hoje.
<li> Não jogue fora o carrinho de compras do cliente. Guarde-o por tempo indeterminado.
</ul>
<p>Em um determinado ponto do workshop ele comparou a visita a um site de comércio eletrônico à marcha de Napoleão a Moscou:</p>
<p><center><a href='http://sucessoblog.locaweb.com.br/wp-content/uploads/2008/11/minard.png'><img src="http://sucessoblog.locaweb.com.br/wp-content/uploads/2008/11/minard-300x143.png" alt="Napoleao" title="Napoleao" width="300" height="143" class="alignnone size-medium wp-image-27" /></a></center></p>
<p>Essa figura mostra que na marcha das tropas de Napoleão a Moscou muitos soldados ficaram no caminho devido a obstáculos (frio, rios, etc.). Lembra o funil de compras de um site:</p>
<p><center><a href='http://sucessoblog.locaweb.com.br/wp-content/uploads/2008/11/picture-2.png'><img src="http://sucessoblog.locaweb.com.br/wp-content/uploads/2008/11/picture-2-300x215.png" alt="Funil" title="Funil" width="300" height="215" class="alignnone size-medium wp-image-28" /></a></center></p>
<p>A idéia de não prejudicar vem exatamente da preocupação em não tornar esse funil ainda mais estreito.</p>
<p>Algumas dicas para alargar o funil de compras do seu site:</p>
<ul>
<li> Garanta que todos possam entrar: por que barrar determinados usuários somente porque eles estão usando o browser X?
<li> Remova &#8220;splash screens&#8221;, ou seja, aquelas animações em flash da entrada do site. Isso só serve para levar seu visitante para outro lugar.
<li> Não peça cadastro sem necessidade.
<li> Tenha certeza que as funções de pesquisa e busca (browse and search) funcionem corretamente.
<li> Limite a quantidade de gráficos e animações.
<li> Pense na velocidade. Um site com muitos elementos gráficos, mesmo que invisíveis ou pequenos, requerem muitas chamadas ao servidor. Muitas chamadas ao servidor fazem seu site ficar lento. Nenhum cliente quer atendimento lento.
<li> Dê poder aos seus clientes e maximize as funcionalidades.
<li> Realce o que é importante.
<li> Garanta que as opções de ajuda realmente ajudem.
<li> Faça do check-out uma experiência positiva.
</ul>
<p><b>Psicologia</b></p>
<p>Nesse ponto ele explicou o conceito de <a href=http://en.wikipedia.org/wiki/Transactional_analysis>Análise Transacional</a>. Existe também uma explicação em <a href= http://pt.wikipedia.org/wiki/Análise_Transacional>português</a>, mas a que está em inglês é mais completa. Nessa forma de analisar as relações humanas há três papéis em que uma pessoa atua:</p>
<p>- pai: é o papel das frases prontas, do tipo &#8220;enquanto você morar nessa casa&#8230;&#8221; ou &#8220;quantas vezes eu tenho que te dizer que&#8230;&#8221;. É o que impõe limites imediatos. Há momentos em que o &#8220;pai&#8221; assume o papel de quem cria, de quem educa.<br />
- adulto: é aquele que tem seus argumentos baseados em raciocínio lógico.<br />
- criança: é o que gosta de brincar. Suas decisões são baseadas em emoção.</p>
<p>Esses três papéis se relacionam, ou seja, pai fala com criança, adulto fala com adulto e assim por diante:</p>
<p><center><a href='http://sucessoblog.locaweb.com.br/wp-content/uploads/2008/11/transactionalanalysis.gif'><img src="http://sucessoblog.locaweb.com.br/wp-content/uploads/2008/11/transactionalanalysis.gif" alt="" title="Análise Transacional" width="300" height="300" class="alignnone size-medium wp-image-29" /></a></center></p>
<p>Todo mundo exerce os três papéis o tempo todo. Dependendo da situação, entra em ação o pai ou o adulto ou a criança.</p>
<p><center>E o que isso tudo tem a ver com venda online?</center></p>
<p>Bem, isso tem a ver com venda, ponto. Sempre que ocorre um processo de venda, quem está vendendo deve sempre saber como se dirigir a cada um dos papéis que o comprador pode assumir. Um exemplo que o Tog deu foi de quando ele era um vendedor de televisão, na época do lançamento da TV com controle remoto. Na época, anos 70, as vendas de TV com controle remoto eram muito baixas, 20% do total de vendas. Isso acontecia porque o &#8220;pai&#8221; entrava em ação dizendo &#8220;eu não sou tão preguiçoso e posso me levantar do sofá para mudar de canal&#8221;. Para combater esse argumento, bastou usar argumentos para o &#8220;adulto&#8221; e para o &#8220;pai&#8221; que educa:</p>
<ul>
<li> Quando o telefone tocar, você poderá colocar em &#8220;mudo&#8221;.
<li> Você pode trocar de canal para ver menos comerciais.
<li> O pai que cuida dará opção de menos comerciais para suas crianças.
</ul>
<p>E, em seguida, deixar a &#8220;criança&#8221; experimentar o controle remoto. Com isso, o argumento do &#8220;pai&#8221; que não tem preguiça de levantar do sofá tem menos importância.</p>
<p><center>Ok, mas qual a lição disso para venda online?</center></p>
<p>Procure na venda online combater os medos e as resistências de seus compradores. Saiba como falar com o &#8220;pai&#8221; e com o &#8220;adulto&#8221;. Ao mesmo tempo não esqueça do lado emocional da compra, o lado &#8220;criança&#8221;.<br />
O processo de venda, tanto online como offline, passa por 6 estágios e devemos aprender como falar com o &#8220;pai&#8221;, o &#8220;adulto&#8221; e a &#8220;criança&#8221; em cada um desses estágios. Devemos saber endereçar seus medos e atiçar seus interesses.</p>
<ol>
<li> Estabelecer <a href=http://en.wikipedia.org/wiki/Rapport>rapport</a>: a primeira impressão é a que fica. O seu site tem que combinar com o que você vende. Se não combinar, haverá desconfiança e você perderá vendas. Visite lojas reais que vendem a mesma coisa que você vende online e veja como elas são organizadas, que tipo de público a visita.
<li> Construa a confiança: afiliações, imagem, política de privacidade, política de devolução, página &#8220;sobre nós&#8221;, facilidade de uso. Tog é ex-vendedor e disse conhecer maneiras éticas e não éticas de se vender. Segundo ele, maneiras não éticas até fazem sentido quando se vende uma vez e nunca mais vai se ver aquela pessoa, ou seja, é um único tiro. Venda de casa, de carro, etc. Quando se deseja que a pessoa volte, temos que ser éticos. Mentiras e meias-verdades detonam a confiança do cliente na empresa. Hoje em dia está cada vez mais fácil para o cliente contar sua experiência para os outros. Segundo o palestrante não devemos nunca mislead, hide facts or minimize drawbacks.
<li> Qualifique o cliente: entender as necessidades e limitações, incluindo limitações de orçamento, de seu cliente. Para descobrir, pergunte, mas não esqueça de guardar essa informação para não ter que perguntar de novo.
<li> Apresente o produto: mostre todos os detalhes do produto, incluindo imagens grandes e preço.
<li> Feche a venda: mostrar claramente o preço e o botão &#8220;comprar&#8221; são essenciais no estágio de fechamento da venda. Carrinho de compras é uma analogia muito bem aceita em compras online. Ofereça essa opção ao cliente.
<li> Receba o dinheiro (check-out): um processo de check-out bem feito é essencial para garantir o retorno do cliente. Se a experiência de check-out não for boa, o cliente pode até fechar a compra mas certamente não voltará e não irá indicar sua loja aos amigos.
</ol>
<p><b>Resumindo:</b></p>
<ol>
<li> Devemos aprender com Napoleão e alargar o funil de compras.
<li> Para alargar o funil de compras, &#8220;primeiro, não prejudicando&#8221; o cliente e, em seguida, aplicando psicologia motivacional.
<li> E Boas vendas!
</ol>
]]></content:encoded>
			<wfw:commentRss>http://uxblog.locaweb.com.br/2008/11/07/sites-que-vendem/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Como vender online para empresas?</title>
		<link>http://uxblog.locaweb.com.br/2008/11/05/como-vender-online-para-empresas/</link>
		<comments>http://uxblog.locaweb.com.br/2008/11/05/como-vender-online-para-empresas/#comments</comments>
		<pubDate>Wed, 05 Nov 2008 09:17:37 +0000</pubDate>
		<dc:creator>Joca</dc:creator>
		
		<category><![CDATA[Geral]]></category>

		<category><![CDATA[B2B]]></category>

		<category><![CDATA[B2C]]></category>

		<category><![CDATA[e-commerce]]></category>

		<category><![CDATA[experiência do usuário]]></category>

		<category><![CDATA[User Experience]]></category>

		<category><![CDATA[venda online]]></category>

		<guid isPermaLink="false">http://uxblog.locaweb.com.br/?p=58</guid>
		<description><![CDATA[Nessa semana participei do workshop B2B Experiences in a Consumer-Oriented Web World do User Experience 2008.
O começo do workshop foi explicando como B2B é diferente e, ao mesmo tempo, muito parecido com B2C. As diferenças vêm do fato de o comprador B2B não estar comprando por diversão. O comprador B2B tem por objetivo ganhar dinheiro [...]]]></description>
			<content:encoded><![CDATA[<p>Nessa semana participei do workshop <a href="http://www.nngroup.com/events/tutorials/b2b.html" target="_self">B2B Experiences in a Consumer-Oriented Web World</a> do <a href="http://www.nngroup.com/events/" target="_self">User Experience 2008</a>.</p>
<p>O começo do workshop foi explicando como B2B é diferente e, ao mesmo tempo, muito parecido com B2C. As diferenças vêm do fato de o comprador B2B não estar comprando por diversão. O comprador B2B tem por objetivo ganhar dinheiro com a compra que está fazendo, assim suas decisões são práticas e não emocionais. As semelhanças vêm do fato de que um cliente B2B durante o dia muito provavelmente é um cliente B2C à noite e espera mais ou menos os mesmos padrões de compra nos dois ambientes.</p>
<p>A <a href="http://www.nngroup.com" target="_self">NN/g</a>, empresa que organizou o evento, fez uma <a href="http://www.nngroup.com/reports/b2b" target="_self">pesquisa</a> com 179 sites de empresas B2B que serviu para levantar vários pontos importantes sobre o uso de sites para vendas entre empresas. Esse relatório detalha 144 <em>guidelines</em> ou <em>design recommendations</em> para sites B2B.</p>
<p>Vou destacar aqui alguns pontos que valem ser lembrados quando estamos fazendo ou mantendo um site que precisa vender produtos ou serviços para outras empresas.</p>
<p style="text-align: center;"><a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/b2b.jpg"><img class="alignnone size-full wp-image-59 aligncenter" title="O que os clientes B2B mais procuram quando visitam um site" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/11/b2b.jpg" alt="" width="499" height="377" /></a></p>
<ul>
<li>A taxa de sucesso de sites B2B é de 58%, de B2C é de 66%, ou seja, sites B2B têm o que aprender com os de B2C. Um ponto de atenção é a descrição do produto. Os sites B2C conseguem dar todas as informações que o cliente precisa para tomar sua decisão. Já nos B2B não encontramos a mesma profusão de informações. Vários itens da pesquisa acima se referem a esse ponto.</li>
<li>Preços: independente do tipo de produto ou serviço, o cliente quer pelo menos ter uma noção de preço. Ele se sentirá mais compelido a falar com você se ele souber que seu produto ou serviço cabe no orçamento dele. Se não for possível dar preços, pois depende muito do tipo de cliente e problema apresentado ou sua venda é consultiva, dê alguma estimativa, ou exemplos de configurações ou cenários com possíveis preços. É o top 1 da pesquisa acima!</li>
<li>Imagens de seus produtos: coloque muitas imagens, de vários ângulos. E não tenha medo de colocar imagens grandes, clientes gostam de ver detalhes. É o item 4 da pesquisa acima. Mesmo para serviços, imagens podem ajudar, seja diagramas de processos ou mesmo imagens do serviço em questão (segurança, buffet infantil, equipe de limpeza, etc.).</li>
<li>Segundo essa pesquisa, &#8220;whitepapers outranked webcasts as preferred method of content delivery (71% vs 33%)&#8221;. Contudo, durante a discussão desse tema ficou claro que depende muito do mercado. Especialmente no caso de software, apresentações em vídeo são a melhor forma de mostrar o software em ação. Por outro lado, se o que você vende são equipamentos ou serviços, <em>whitepaper</em> pode ser uma ferramenta melhor.</li>
</ul>
<p>Ou seja, mesmo que seu produto ou serviço não funcione com venda online, há muito que fazer para que seu site passe de um simples catálogo para uma ferramenta de venda poderosa!</p>
]]></content:encoded>
			<wfw:commentRss>http://uxblog.locaweb.com.br/2008/11/05/como-vender-online-para-empresas/feed/</wfw:commentRss>
		</item>
		<item>
		<title>O melhor serviço é nenhum serviço</title>
		<link>http://uxblog.locaweb.com.br/2008/10/21/o-melhor-servico-e-nenhum-servico/</link>
		<comments>http://uxblog.locaweb.com.br/2008/10/21/o-melhor-servico-e-nenhum-servico/#comments</comments>
		<pubDate>Tue, 21 Oct 2008 10:43:42 +0000</pubDate>
		<dc:creator>Andreza</dc:creator>
		
		<category><![CDATA[Geral]]></category>

		<category><![CDATA[atendimento]]></category>

		<category><![CDATA[call center]]></category>

		<category><![CDATA[cliente]]></category>

		<category><![CDATA[consumidor]]></category>

		<category><![CDATA[experiência]]></category>

		<category><![CDATA[serviço ao consumidor]]></category>

		<guid isPermaLink="false">http://uxblog.locaweb.com.br/?p=56</guid>
		<description><![CDATA[O título deste post é uma (livre) tradução do título do livro The Best Service is No Service, de Bill Price, ex-diretor da Amazon, e David Jaffe.
Li uma reportagem que falava do dia quando Bill Price foi fazer sua entrevista na Amazon, para o cargo de vice-presidente da área de serviços ao consumidor, e perguntaram [...]]]></description>
			<content:encoded><![CDATA[<p>O título deste post é uma (livre) tradução do título do livro <a href="http://www.amazon.com/Best-Service-No-Liberate-Customers/dp/0470189088" target="_blank"><em>The Best Service is No Service</em></a>, de Bill Price, ex-diretor da Amazon, e David Jaffe.</p>
<p>Li uma reportagem que falava do dia quando Bill Price foi fazer sua entrevista na Amazon, para o cargo de vice-presidente da área de serviços ao consumidor, e perguntaram a ele qual seria sua principal estratégia se conseguisse o cargo. Ele falou, trocando em miúdos, que tentaria diminuir a necessidade dos clientes de entrarem em contato com o ‘serviço ao consumidor’. Acredito que desde então ele começou a juntar idéias e conhecimentos para escrever o <em>Best Service</em>.</p>
<p>Hoje, a Amazon tem o melhor índice, da categoria de e-commerce, no quesito “satisfação do cliente”, segundo o último <a href="http://www.theacsi.org/index.php?option=com_content&amp;task=view&amp;id=177&amp;Itemid=180" target="_blank">relatório da ACSI</a> (<em>The American Customer Satisfaction Index</em>, um indicador econômico baseado na avaliação que os clientes fazem da qualidade dos serviços e produtos produzidos nos EUA) que saiu no último trimestre de 2007.</p>
<p>O mantra do <em>Best Service </em>é “desafie a demanda dos consumidores por serviços em vez de apenas lidar com ela”. Ou seja, não é apenas tratar da melhor forma possível as questões, problemas, dúvidas ou angústias que seus clientes levantam através de alguma forma de atendimento ou suporte que sua empresa disponibilize, mas principalmente, diminuir a necessidade que eles têm de usar esses serviços (de fato, a forma mais eficaz para que isso ocorra é as coisas funcionarem corretamente!).</p>
<p>E, inspirados nesse mantra, vêm os 7 princípios de um bom serviço ao consumidor:</p>
<ol>
<li>Elimine contatos tolos (em vez de tratá-los repetidamente)</li>
<p><em>Evite contatos desnecessários. Tente solucionar a raiz do problema logo no primeiro contato.</em></p>
<li>Crie mecanismos para o auto-atendimento (em vez de impedir o contato)</li>
<p><em>O cliente não fica feliz em ter que entrar em contato. Se ele conseguir, sem sofrimentos, realmente resolver suas questões sozinhos, vai achar bem melhor.</em></p>
<li>Seja proativo (em vez de esperar para reagir a alguma situação)</li>
<p><em>Antecipe possíveis problemas, alerte e, se possível, deixe claro como resolvê-los (veja o <em>post</em> sobre <a href="http://uxblog.locaweb.com.br/2008/09/11/design-defensivo/" target="_blank">design defensivo</a> que ilustra bem alguns pontos sobre isso).</em></p>
<li>Facilite o contato com a sua empresa (em vez de tentar se esquivar da bala)</li>
<p><em>Não dar formas do cliente entrar em contato só vai deixá-lo mais irritado. E também, não crie tantos obstáculos.</em></p>
<p style="text-align: center;"><a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/10/call_center.jpg"><img class="alignnone size-full wp-image-57 aligncenter" title="call_center" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/10/call_center.jpg" alt="" width="400" height="400" /></a></p>
<li>Envolva toda a empresa (em vez de culpar a área de atendimento ao cliente)</li>
<p><em>As ações devem partir de toda a organização e não deixar o pepino apenas para a turma do suporte ao cliente. Cada área da empresa deve ser responsável por analisar os problemas e tentar resolver sua raiz, melhorar processos. Implementar serviços e produtos considerando todo um processo de desenvolvimento focado na boa experiência do usuário e prezando pela qualidade.</em></p>
<li>Ouça e aja (em vez de deixar passar batido o que os clientes dizem)</li>
<p><em>Faça reuniões constantes para ouvir o que a equipe que lida diretamente com o cliente tem a dizer, consulte o que os clientes andam dizendo através dos canais de sugestões ou dúvidas que sua empresa disponibiliza. Muitos contatos podem ser evitados implementando melhorias simples.</em></p>
<li>Proporcione ótimas experiências a seus clientes (como encantar seu cliente com um atendimento incrível quando ele precisar dele)</li>
<p><em>E se ele, ainda assim, precisar entrar em contato, faça desse uma experiência agradável. Hoje o acesso a meios que deixam as pessoas ‘colocarem a boca no trobone’, expressarem toda sua frustração publicamente, é muito fácil: há diversos blogs e sites especializados em <em>feedback</em>.</em></ol>
<p>O <a href="http://www.rightnow.com/crm-news-6139.php" target="_blank">3º Relatório Anual sobre Impactos da Experiência do Consumidor</a>, divulgado agora em outubro, mostra numericamente a importância desse tema:</p>
<ul>
<li>84% dos consumidores indicaram que falariam para outras pessoas sobre uma experiência ruim que tiveram com alguma empresa (o número era de 74% em 2007 e 67% em 2006);</li>
<li>Os blogs que divulgam essas experiências negativas têm crescido: 22% dos consumidores têm postado <em>feedbacks</em> negativos (contra 13% em 2007).</li>
</ul>
<p>E sobre os aspectos que mais pesam na decisão do cliente de iniciar e manter um relacionamento com uma empresa:</p>
<ul>
<li>Melhoria geral da experiência;</li>
<li>Acesso fácil a informações que consideram de valor: melhoria na usabilidade do website e na busca;</li>
<li>Facilidade para fazer perguntas: uso de <em>chat</em> é o preferido;</li>
<li>Possibilidade de falar com uma pessoa (e não com uma máquina) quando entram em contato.</li>
</ul>
<p>E se tudo isso ainda não acionou o alerta para que você analise como anda a qualidade de seus produtos e serviços, e como os consumidores avaliam a experiência que tem com eles, lembre-se:</p>
<p><em>Tem 2 vezes mais chances de alguém falar para outras pessoas de um tratamento ruim que recebeu que recomendar uma empresa por ter recebido um bom tratamento.</em></p>
<p><em>É 10 vezes mais barato manter um cliente que captar um novo.</em></p>
<p>Agora é fazer as contas!</p>
]]></content:encoded>
			<wfw:commentRss>http://uxblog.locaweb.com.br/2008/10/21/o-melhor-servico-e-nenhum-servico/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Design e criatividade a favor do usuário</title>
		<link>http://uxblog.locaweb.com.br/2008/10/15/design-e-criatividade-a-favor-do-usuario/</link>
		<comments>http://uxblog.locaweb.com.br/2008/10/15/design-e-criatividade-a-favor-do-usuario/#comments</comments>
		<pubDate>Wed, 15 Oct 2008 12:42:45 +0000</pubDate>
		<dc:creator>Adriano Freitas</dc:creator>
		
		<category><![CDATA[Design]]></category>

		<category><![CDATA[criação]]></category>

		<category><![CDATA[criatividade]]></category>

		<guid isPermaLink="false">http://uxblog.locaweb.com.br/?p=53</guid>
		<description><![CDATA[Desde pequenos somos treinados a achar a solução correta e não a criativa, pois, além de mais cômodo, é preciso ter coragem para ousar e principalmente para expor uma idéia criativa. A história da humanidade nos prova isso. Pessoas foram reprimidas por tentarem ser criativas, por nadarem contra a maré de tudo o que todos [...]]]></description>
			<content:encoded><![CDATA[<p>Desde pequenos somos treinados a achar a solução correta e não a criativa, pois, além de mais cômodo, é preciso ter coragem para ousar e principalmente para expor uma idéia criativa. A história da humanidade nos prova isso. Pessoas foram reprimidas por tentarem ser criativas, por nadarem contra a maré de tudo o que todos acreditavam como sendo a verdade absoluta.</p>
<p>Hoje em dia, ainda se tem a idéia de que design é apenas mais um rostinho bonito para um determinado produto ou interface. E o designer ainda é visto como aquele cara moderninho que curte bandas alternativas e seu trabalho é “dar um trato no visual das coisas”. Segundo a Wikipédia, <a title="Definição de Design" href="http://pt.wikipedia.org/wiki/Design" target="_blank">design</a> é o esforço criativo relacionado à configuração, concepção, elaboração e especificação de um artefato. Esse esforço normalmente é orientado por uma intenção ou objetivo, ou para a solução de um problema.</p>
<p>Fazer design voltado à experiência do usuário é ter que, além de ser sempre criativo e ter noção de estética, saber o que se passa na cabeça do usuário. É ter que estar sempre bem informado a respeito de todas as tendências, de todas as tecnologias que envolvem seus produtos. É saber que, ao se desenhar uma interface, ela tem que funcionar em todas as plataformas.</p>
<p>Ter um site lindo, totalmente em flash que só falta falar é muito legal. Mas e o usuário, o verdadeiro consumidor do produto realmente gosta disso? Ficar minutos esperando que um site carregue, ter que adivinhar em qual local deve ser clicado para que ele chegue na informação que deseja e, principalmente, não ser acessível a todos os usuários, como por exemplo, os deficientes visuais, não é o que se espera de um produto.</p>
<p>O design é parte da experiência, é projeto, é concepção. É ter conceito sobre cores, sobre posicionamento de elementos. Para se ter um produto final como é visto, existem muitos processos ao qual um designer deve passar:</p>
<p style="text-align: center;"><a href="http://uxblog.locaweb.com.br/wp-content/uploads/2008/10/design_criacao.jpg"><img class="alignnone size-medium wp-image-55 alignleft" style="float: left;" title="design_criacao" src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/10/design_criacao-300x232.jpg" alt="Design criativo" width="300" height="232" /></a></p>
<ul style="text-align: left;">
<li>Rabisque, desenhe, escreva coisas absurdas num papel e não tenha medo de mostrá-las. São de idéias aparentemente absurdas que saem as melhores descobertas;</li>
<li>Copie quando necessário. E melhore uma idéia criativa quando possível. Nem sempre precisamos reinventar a roda para se ter sucesso;</li>
<li>Esteja sempre atento a sua percepção de mundo e o veja com outros olhos. Exagere, faça piadas com as situações mais banais e ao mesmo tempo saiba ser sensato. A criatividade é feita disso;</li>
<li style="text-align: left;">Redefina tendências. Copiar às vezes dá certo, mas criar algo realmente útil é sempre melhor;</li>
<li>Estude as pessoas a fundo, saiba quais são seus desejos, suas angústias, suas alegrias e crie uma solução que realmente resolva ou amenize seus problemas. E nunca esqueça que essa solução pode ser criativa e bonita ao mesmo tempo, sem deixar o usuário de lado.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://uxblog.locaweb.com.br/2008/10/15/design-e-criatividade-a-favor-do-usuario/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Como &#8220;encaixar&#8221; UX em ambientes ágeis?</title>
		<link>http://uxblog.locaweb.com.br/2008/09/26/como-encaixar-ux-em-ambientes-ageis/</link>
		<comments>http://uxblog.locaweb.com.br/2008/09/26/como-encaixar-ux-em-ambientes-ageis/#comments</comments>
		<pubDate>Fri, 26 Sep 2008 23:18:54 +0000</pubDate>
		<dc:creator>Joca</dc:creator>
		
		<category><![CDATA[Geral]]></category>

		<category><![CDATA[ágil]]></category>

		<category><![CDATA[métodos ágeis]]></category>

		<category><![CDATA[Metodologias Ágeis]]></category>

		<guid isPermaLink="false">http://uxblog.locaweb.com.br/?p=49</guid>
		<description><![CDATA[Dica do Marty Cagan, da SVPG:
http://www.svpg.com/resources/Agile/Process.html

]]></description>
			<content:encoded><![CDATA[<p>Dica do <a href="http://www.svpg.com/company/team/team.html#marty">Marty Cagan</a>, da <a href="http://www.svpg.com/index.html">SVPG</a>:</p>
<p><a href="http://www.svpg.com/resources/Agile/Process.html">http://www.svpg.com/resources/Agile/Process.html</a></p>
<p><center><a href='http://uxblog.locaweb.com.br/wp-content/uploads/2008/09/agile1.jpg'><img src="http://uxblog.locaweb.com.br/wp-content/uploads/2008/09/agile1-300x178.jpg" alt="" title="Agile process" width="300" height="178" class="alignnone size-medium wp-image-50" /></a></center></p>
]]></content:encoded>
			<wfw:commentRss>http://uxblog.locaweb.com.br/2008/09/26/como-encaixar-ux-em-ambientes-ageis/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
