Web Storage

O Web Storage (ou DOM Storage) é uma API que permite gravar dados no lado do cliente. Provavelmente no futuro ela será responsável pela extinção do Cookie.

Suas vantagens são grandes em relação ao Cookie, a começar pela capacidade de armazenamento de dados, que varia de navegador para navegador mas mantém uma média de 5mb por domínio, outra vantagem é que ao contrário do cookie ele não tem data para expirar, isso acontece somente por questões de espaço e falha de segurança. Um detalhe interessante, é que os dados não são transitados a cada requisição de página com o servidor, como faz o cookie.

Para quem quiser testar a API Web Storage:

Para definir uma variável:

sessionStorage.setItem('chave','valor');

e para resgata-la:

sessionStorage.getItem('chave');

No entanto, o Web Storage continua sendo uma forma simples de armazenamento de dados chave/valor, o que não resolve o problema de aplicações que desejam funcionar de maneira Offline como farí­amos com o extinto Google Gears.

Web SQL Database

Para um armazenamento mais elaborado e de forma estruturada, o W3C criou Web SQL Database. Este é o cara que faz a revolução no armazenamento de dados no lado do cliente.

Como parte do HTML 5, o W3C está trabalhando em um rascunho do Web SQL Database  API, uma especificação que abrange armazenar e acessar dados através de SQL. A especificação da linguagem SQL que é descrito na documentação é o de SQLite 3.6.19.

Esta API permite que as páginas da web interajam com um banco de dados incorporado no cliente, o que é útil para aplicações que desejam armazenar dados localmente ou para navegação offline.

Infelizmente nem todas as versões novas de navegadores implementaram esta API:

• Internet Explorer 8.0 –Não Suporta
• Firefox 3.6.3 –Não Suporta
• Chrome 5.0 – Suporta (acho que desde a versão 4)
• Safari 5.0 –Suporta

Por ser um pouco maior, (vou colocar) coloquei o exemplo de utilização desta API no próximo artigo.

Queria saber a opinião das pessoas que leem este blog se tem ideias ou projetos em mente para utilização de recursos offline.
Então comente abaixo!

Neste exemplo vamos usar um destino fixo e solicitar ao usuário o endereço de partida.

Antes de mais nada, precisamos adquirir a chave API do Google Maps digitando a URL em que sua página será hospedada (você consegue gerar chave para http://localhost também).

De posse da chave, vamos criar uma página HTML simples e incluir a API do google maps já com a nossa chave:

<script type="text/javascript" src=http://maps.google.com/maps?file=api&v=2.x&key=sua-chave"></script>

Agora vamos ao JavaScript com as funções necessárias para carregar o mapa e traçar a rota:

			// declaração de variáveis
			var map;
			var marker;

			// função que carrega o mapa inicial marcando o nosso ponto de chegada
			function load() {
				// verifica a compatibilidade do google maps
			  if (GBrowserIsCompatible()) {

				// Instancia o objeto e aplica na div 'mapa'
				map = new GMap2(document.getElementById("mapa"));
				// Especifica as coordenadas do centro do mapa e o zoom
				map.setCenter(new GLatLng(-20.339884,-40.287469), 14);
				// Especifica o div em que será exibido o detalhamento da rota
				directionsPanel = document.getElementById("route");
				gdir = new GDirections(map, directionsPanel);
				// Adiciona o evento de erros a função handleErrors
				GEvent.addListener(gdir, "error", handleErrors);

				//Adiciona barra de zoom e setas para movimentação no mapa
				map.addControl(new GSmallMapControl());

				//Adiciona um marcador nas coordenadas de chegada
				var point = new GLatLng(-20.339884, -40.287469);
				marker = new GMarker(point);
				map.addOverlay(marker);
				marker.title = "Shopping Vitória";

			  }
			}

			// Traça a Rota
			function setDirections(fromAddress, toAddress, locale){
				gdir.load("from: " + fromAddress + " to: " + toAddress,{"locale": "pt_BR"});
				// Remove o marcador inicial
				map.removeOverlay(marker);
			}

			// Especifica a origem e o destino
			function tracarRota() {
				setDirections(document.getElementById('from').value, "Fernando Ferrari, 514, Goiabeiras, Vitória, ES");
			}

			// Função com tratamentos de erros
			function handleErrors()
			{
			   if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
				 alert("Não foi possível achar o endereço. Isso pode ter ocorrido porque o endereço digitado ainda não está inserido no googlemaps ou porque foi digitado incorretamente.\nCódigo do Erro: " + gdir.getStatus().code);
			   else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
				 alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Código do Erro: " + gdir.getStatus().code);
			   else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
				 alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Código do Erro: " + gdir.getStatus().code);
			   else if (gdir.getStatus().code == G_GEO_BAD_KEY)
				 alert("Key inválida. Procure a key correta para este domínio no site do google. \n Código do Erro: " + gdir.getStatus().code);
			   else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
				 alert("A directions request could not be successfully parsed.\n Código do Erro: " + gdir.getStatus().code);
			   else alert("Ocorreu um erro inesperado.");
			}

Lembrando que na Tag “Body” é necessários chamarmos a função Load() para carregar o mapa inicial com nosso ponto de chegada marcado:

Para finalizar, o nosso formulário HTML deverá chamar a função tracarRota() como no código abaixo:

					Endereço de partida: 


				

Confira o exemplo funcional

1. A Melhor Forma de Trabalhar com Labels é Acima do Campo

Um estudo realizado pela UX Matters considerou que a posição ideal para laebls em formulários está acima dos campos. Em muitas formas, os labels são colocados à esquerda dos campos, a criação de um layout de duas colunas, apesar de parecer bom, não é o layout mais fácil de usar. Por que isso? Como os formulários são geralmente orientados verticalmente, os usuários preenchem o formulário de cima para baixo. E seguindo o label campo abaixo é mais fácil do que encontrar o campo à direita.

Tumblr possui um simples e elegante-se formulário que segue a recomendação UX Matter.

Label com posicionamento a esquerda também representa outro problema: você alinha à esquerda ou a direita os seus labels? alinhamento esquerdo faz com que o formulário seja lido mas desconecta os labels dos campos, o que torna difícil ver qual label se aplica a qual campo. Alinhando-se a direita inverte: Contribui para uma boa aparência, mas de forma menos legível. Labels acima dos campos funcionam melhor na maioria das circunstâncias. O estudo também descobriu que os labels não devem ser ousados, embora essa recomendação não é conclusiva.

2. Usuários Focam em Rostos

Pessoas instintivamente identificam outras pessoas imediatamente. Em páginas da Web, tendemos a focalizar os rostos das pessoas e nos olhos, o que dá uma boa técnica de marketing para atrair a atenção. Mas a nossa atração para os rostos das pessoas e dos olhos é apenas o começo; desejamos olhar realmente no sentido em que a pessoa da imagem está olhando.

Eye-tracking: mapa de calor de um bebê olhando diretamente para nós, a partir do estudo UsableWorld.

E agora o bebê está olhando para o conteúdo. Observe o aumento de pessoas olhando para o título e texto.

Aqui está o estudo eye-tracking que demonstra isso. Estamos instintivamente atraídos para rostos, mas se esse cara está procurando algum lugar diferente de nós, vamos também olhar nessa direção. Tire proveito desse fenômeno, chamando a atenção dos usuários para as partes mais importantes da sua página ou anúncio.

3. Qualidade do Design é um Indicador de Credibilidade

Vários estudos têm sido realizados para descobrir exatamente o que influencia a percepção das pessoas sobre a credibilidade de um site:

• Stanford-Makovsy Web Credibility Study 2002: Investiga o que faz hoje Sites com Credibilidade
• Que faz um Web site com Crédito? Um relatório sobre um grande estudo quantitativo
• Elementos de Credibilidade Computacional
• Elementos que afetam a credibilidade da Web: Primeiros Resultados de um Relatório de Estudos Próprios (Processo da ACM CHI 2000 Conference on Human Factors in Computing Systems, v.2, New York: ACM Press)

Não sabemos se a aplicação do Fever app é boa, mas a interface do usuário elegante do site traz uma grande primeira impressão.

Um dado interessante desses estudos é que os usuários realmente julgam um livro pela capa… ou melhor, um site pelo seu design. Elementos tais como layout, a coerência, a tipografia, a cor e o estilo de todos afetam a maneira como os usuários percebem o seu site e que tipo de imagem terão de seu projeto. Seu site não deve apenas passar uma boa imagem, mas também o caminho certo para o seu público.

4. A Maioria dos Usuários Não Usam Rolagem

Um estudo de Jakob Nielsen sobre o quanto os usuários usam rolagem (priorizando a Usabilidade Web) revelou que apenas 23% dos visitantes usam a rolagem em sua primeira visita a um site. Isto significa que 77% dos visitantes não irá rolar, eles vão apenas visualizar o conteúdo acima da dobra (ou seja, a área da página que está visível na tela sem rolagem para baixo). Além do mais, o percentual de usuários que rolam a página diminui com visitas subsequentes, com apenas 16% em sua segunda visita. Esses dados enfatizam o quão importante é colocar o seu conteúdo-chave em uma posição de destaque, especialmente na página principal.

Isso não significa que você deve entupir tudo na área superior da página, basta que você faça o melhor uso desse espaço. Entupir com conteúdo fará apenas o conteúdo inacessível, quando o usuário vê muita informação, não sabe por onde começar a procurar.

Basecamp faz bom uso do espaço. Acima da dobra (768 pixels de altura), ele mostra uma tela grande, proposição de valor, chamada à ação, lista de clientes, vídeos e lista curta de imagens.

Isso é muito importante para a página inicial, onde a maioria dos visitantes irá chegar. Portanto, forneça os elementos essenciais lá:

1. Nome do Site;
2. Valor Proposto pelo Site (isto é, como os usuários se beneficiam ao usá-lo);
3. Navegação para as principais seções do site que são relevantes para o usuário.

No entanto, os hábitos dos usuários mudaram significativamente desde então. Estudos recentes comprovam que os usuários são muito confortáveis com a rolagem e em algumas situações estão dispostos a rolar para o final da página. Muitos usuários estão mais confortáveis com a rolagem do que com uma paginação, e para muitos usuários a informação mais importante da página não é necessariamente colocado “acima da dobra” (que é por causa da variedade de resoluções de exibição disponíveis um termo bastante ultrapassada, obsoleta ). Por isso, é uma boa idéia dividir o layout em seções para facilitar a digitalização, separando-os com um monte de espaço em branco.

Para mais informações, por favor dê uma olhada nos artigos Unfolding the fold (Clicktale), Paging VS Scrolling (Wichita University – sURL), Blasting the Myth of the Fold (Boxes and Arrows). (obrigado, Fred Leuck).

5. Azul é a Melhor Cor Para Links

Embora dar ao seu projeto um layout único, quando se trata de usabilidade, fazer o que todo mundo está fazendo é o melhor. Siga as convenções, porque quando as pessoas visitam um novo site, o primeiro lugar que vão olhar é para as coisas que estão nos lugares onde eles encontram na maioria dos outros sites, eles usarão de sua experiência para dar sentido a este novo conteúdo. Isso é conhecido como padrões de uso. As pessoas esperam que certas coisas sejam o mesmo, como as cores dos links, a localização do logotipo do site, o comportamento de navegação com guias e assim por diante.

O Google mantém todos os links em seus sites azul por uma razão: a cor é familiar para muitos usuários, o que torna mais fácil de localizar.

Que cor deve ter os seus links? A primeira consideração é o contraste: links têm que ser escuro (ou claro) o suficiente para contrastar com a cor de fundo. Em segundo lugar, eles devem se destacar da cor do resto do texto, por isso, não usem links preto com texto em preto. E, finalmente, a pesquisa mostra (Van Schaik e Ling) que, se a usabilidade é a sua prioridade, usando o azul para os links é melhor. A cor padrão do navegador para link  é azul, então as pessoas esperam isso. Escolher uma cor diferente de modo algum é um problema, mas pode afetar a rapidez com que os usuários achem.

6. O Ideal Para Caixa de Pesquisa são 27 Caracteres de Largura

Qual é a largura ideal de uma caixa de pesquisa? Existe uma coisa dessas? Jakob Nielsen realizou um estudo de usabilidade no comprimento de caixas de pesquisa do site (priorizando Usabilidade Web). Acontece que a maioria das caixas de pesquisa de hoje são demasiadamente curtas. O problema com caixas curtas é que mesmo que você possa digitar uma consulta longa, apenas uma parte do texto vai ser visível em uma hora, o que torna difícil para rever ou editar o que você digitou.

O estudo constatou que a caixa de pesquisa média é de 18 caracteres de largura. Os dados mostraram que 27% das consultas eram demasiadamente longas para caber dentro dele. Estendendo a caixa para 27 caracteres se atende 90% das consultas. Lembre-se, você pode definir larguras usando ems, não apenas pixels e points. Um “em” é a largura e altura de um caractér “m” (usando qualquer tamanho da fonte o site também usará). Então, use essa medida para dimensionar a largura do campo de entrada de texto até 27 caracteres de largura.

A caixa de pesquisa da Apple é um pouco curta demais, cortando a consulta, "Microsoft Office 2008."

Em geral, as caixas de pesquisa são melhores compridas do que curtas, de modo que os usuários podem rapidamente analisar, verificar e submeter à consulta. Esta orientação é muito simples, mas, infelizmente, muitas vezes rejeitada ou ignorada. Alguns preenchimentos no campo de entrada também pode melhorar o design e experiência do usuário.

7. Espaço em Branco Melhora a Compreensão

A maioria dos designers sabem o valor do espaço em branco, que é o espaço vazio entre os parágrafos, imagens, botões e outros itens na página. O espaço em branco ordena uma página dando espaço para os itens respirarem. Nós também podemos agrupar itens, diminuindo o espaço entre eles e aumentando o espaço entre eles e outros itens na página. Isso é importante para mostrar as relações entre os itens (por exemplo, mostrando que este botão aplica-se a este conjunto de itens) e a construção de uma hierarquia de elementos na página.

Observe a grande margem de conteúdo, preenchimento e espaçamento sobre o Netsetter. Todo o espaço que torna o conteúdo fácil e confortável para ler.

O espaço em branco também torna o conteúdo mais legível. Um estudo (Lin, 2004) descobriu que o bom uso do espaço em branco entre parágrafos e nas margens esquerda e direita aumenta a compreensão em quase 20%. Os leitores acham mais fácil se concentrar no processo e conteúdo generosamente espaçadas.

De fato, de acordo com Chaperro, Shaikh e Baker, o layout de uma página Web (incluindo espaços em branco, cabeçalhos, recuo e números) não podem influenciar o desempenho mensurável, mas não influenciam a satisfação do usuário e experiência.

8. Um Teste De Usuário Eficaz Não Tem Que Ser Extenso

Um estudo de Jakob Nielsen sobre o número ideal de cobaias de testes de usabilidade mostra que os testes com apenas cinco usuários revelaria cerca de 85% de todos os problemas com o seu site, enquanto que 15 usuários se encontraria praticamente todos os problemas.

Fonte: Jakob Nielsen’s AlertBox

Os maiores problemas normalmente são descobertos pelo primeiro ou segundo usuário, e os testadores seguintes confirmam estas questões e descobrem as restantes de menor importância. Apenas dois usuários de teste, provavelmente encontraria a metade dos problemas em seu site. Isto significa que o teste não tem de ser extensivo ou caro para produzir bons resultados. Os maiores ganhos são obtidos quando se passa de zero usuários de teste para um, por isso não tenha medo de fazer muito pouco: qualquer teste é melhor do que nada.

9. Páginas Informativas Ajudam a Destacar seu Produto

Se seu site tem páginas de produto, as pessoas que compram on-line definitivamente querem vê-los. Mas as páginas de muitos produtos não dispõem de informações suficientes, mesmo para os visitantes fazerem uma verificação rápida. Este é um problema grave, porque a informação de produto ajudam as pessoas a tomarem a decisão de compra. A pesquisa mostra que produtos com informação pobres são cerca de 8% dos problemas de usabilidade e até 10% de falha do usuário (ou seja, o usuário desiste e deixa o site) (Priorizando Usabilidade Web).

A Apple fornece separado páginas de "Especificações técnicas" para seus produtos, e mantém os detalhes complicados longe das páginas mais simples de marketing, mas proporciona acesso fácil quando eles são necessárias.

Forneça informações detalhadas sobre seus produtos, mas não caia na armadilha de bombardear usuários com muito texto. Torne a informação mais fácil de digerir. Torne a página agradável e divida o texto em segmentos pequenos e com abundância de sub-títulos. Adicionar abundância de imagens para o seu produto, e usar a linguagem certa: não usar jargão que os visitantes podem não entender.

10. A Maioria Dos Usuários Estão Cegos Para Publicidade

Jakob Nielsen relata em sua pesquisa Alertbox que a maioria dos usuários são essencialmente cegos para banners. Se eles estão procurando um trecho de informação em uma página ou são absorvidos pelo conteúdo, eles não vão se distrair com os anúncios na lateral.

A implicação disso é que os usuários não apenas irão evitar os anúncios, mas que eles vão evitar qualquer coisa que se pareça com um anúncio, mesmo se não seja um anúncio. Alguns itens de navegação muito estilosos pode ser parecidos com banners, deve-se ter cuidado com esses elementos.

Os banners quadrado na lateral esquerda do FlashDen não são realmente anúncios: eles são links de conteúdo. Eles se parecem muito próximas à banners e isso pode ser ignorado por alguns usuários.

Dito isto, os anúncios que se parecem com conteúdo irão levar as pessoas a clica-los. Isso pode gerar mais receita publicitária, mas existe o custo de perda de confiança dos seus usuários, ao clicar em coisas que achavam ser conteúdo genuíno. Antes de enveredar por esse caminho, considerar o fator: receitas de curto prazo versus confiança a longo prazo.

Bônus: Resultados de Nosso Estudo de Caso

Nos últimos anos, a equipe editorial do Smashing Magazine realizou uma série de estudos de caso em uma tentativa de identificar soluções de design e práticas comuns. Até agora, nós analisamos os formulários da Web, blogs, tipografia e carteiras, e mais estudos de caso serão publicados no próximo mês. Nós encontramos alguns padrões interessantes que poderiam servir como diretrizes para o seu próximo projeto.

Aqui, vamos rever algumas das práticas e padrões de projeto que descobrimos em nossos estudos de caso nesta visão geral breve e compacta, para sua conveniência.

Segundo nosso estudo de tipografia:

• Altura da Linha (em pixels) ÷ tamanho da fonte (em pixels) = 1,48
  1,5 geralmente é recomendada em livros clássicos tipográfico, e o nosso estudo confirma essa regra. Muito poucos sites usam nada menos do que isso. E o número de sites que passar por cima de 1,48 diminui à medida que você começa mais a partir deste valor.
• Comprimento de linha (pixels) ÷ altura da linha (pixels) = 27,8
  O comprimento da linha média é de 538,64 pixels (excluindo margens e enchimento), que é bastante grande, considerando que muitos sites ainda tem de 12 a 13 pixels em tamanho de fonte.
• Espaço entre parágrafos (pixels) ÷ altura da linha (pixels) = 0,754
  Acontece que o espaçamento entre parágrafos (ou seja, o espaço entre a última linha de um parágrafo e a primeira linha da próxima) raramente é igual ao principal (o que seria a principal característica do ritmo vertical perfeito). Mais frequentemente, espaçamento entre parágrafos é apenas 75% do ponto principal. A razão pode ser que o líder geralmente inclui o espaço ocupado por descendentes, e porque a maioria dos personagens não tem descendentes, espaço em branco adicional é criado sob a linha.
• O número ideal de caracteres por linha é de 55 a 75
  Segundo o clássico livro tipográfico, o número ideal de caracteres por linha é entre 55 e 75, mas entre 75 e 85 caracteres por linha é mais popular na prática.

De acordo com nosso estudo de design de blogs:

• Layouts geralmente têm uma largura fixa (pixel-based) (92%) e são geralmente centrada (94%). A largura de layouts fixos varia entre 951 e 1000 pixels (56%)
• A página principal mostra trechos de 10 a 20 posts (62%).
• 58% do total de layout de um site é usado para exibir o conteúdo principal.

Segundo nosso estudo de design de formulário Web:

• O link de cadastro intitula-se “inscrever” (40%) e é colocado no canto superior direito.
• Formulários de Inscrição têm layouts simples, para evitar confundir os usuários (61%).
• Títulos de campos de entrada estão em negrito (62%), e os campos são dispostas verticalmente mais do que eles estão dispostos horizontalmente (86%).
• Designers tendem a incluir alguns campos obrigatórios e alguns campos opcionais.
• Confirmação de e-mail não é exibida (82%), mas a confirmação de senha é (72%).
• O botão “Enviar” ou é alinhado à esquerda (56%) ou centralizado (26%).

De acordo com nosso estudo de sites de portfólio:

• 89% dos layouts são centrados horizontalmente, e a maioria deles tem um grande menu de navegação horizontal.
• 47,2% dos portfólios tem a página do cliente, e 67,2% têm algum tipo de página de serviços autônomos.
• 63,6% têm uma página detalhada para cada projeto, incluindo estudos de caso, depoimentos, apresentações de slides com imagens, rascunhos e esboços.
• Páginas de Contato contêm instruções de número de telefone, endereço de e-mail, endereço postal, vCard e formulário on-line.

Este Post é uma tradução do original: 10 Useful Usability Findings and Guidelines