Com a API Geolocation que está vindo com HTML5, saber a localização de quem visita seu site se tornou bem simples. As aplicações para esta API são inúmeras e a qualidade do serviços prestados por sites podem melhorar significativamente com esta facilidade, e o melhor, de forma gratuita.

Lembrando que nem todos os navegadores novos suportam esta API. Fiz testes no Google Chrome 5.0.375.99, Firefox 3.6.6 e no Opera 10.60 (todos na versão Linux, claro). Li por aí que o Internet Explorer 8 tem uma implementação de teste. Então se alguém testar no IE, favor deixar nos comentários informações sobre seu suporte.

A API Geolocation prevê a captura da posição geográfica, ou seja, latitude e longitude. E isso já resolve tudo. Com as coordenadas geográficas é possível integrar com outras ferramentas e obter o logradouro e até mesmo integrando com o Google Maps gerar um mapa com a localização do usuário.

Lembrando: Se você tem dúvida se o seu navegador suporta esta API, use o site html5teste.com e procure por Geolocation.

Segurança

Se você está preocupado com a segurança e não quer que determinados sites saibam sua localização, a documentação da API prevê autorização prévia do usuário para o compartilhamento dessa informação com o site em que você está navegando.

Ao acessar um site que deseja utilizar sua localização para agregar algum serviço, provavelmente você verá a mensagem abaixo (Opera):

Muito mais justo do que qualquer site saber a sua localização sem o seu consentimento.

Exemplo Simples: Obtendo as Coordenadas Geográficas

Para entender o funcionamento da API vamos a um simples exemplo para obter as Coordenadas Geográficas:

// verifica o suporte do navegador a API Geolocation
if(navigator.geolocation){
	// Obtem a posição atual
	navigator.geolocation.getCurrentPosition(

	// Em caso de sucesso, obtem a latitude e a longitude
	function(position){
		var lat = position.coords.latitude;
		var lon = position.coords.longitude;
		alert('Latitude:' + lat + ', Longitude: ' + lon);
	},
	// Caso ocorra algum erro (Ex.: O usuário não autorizar o compartilhamento da localização)
	function(error){
		alert('Erro ao capturar localização geográfica.');
	});
}
// Caso o navegador não tenha suporte
else{
	alert('Seu navegador não tem suporte a API Geolocation.');
}

Clique aqui para ver o exemplo funcionando.

Agora que temos as Coordenadas Geográficas, o que fazer com esses números?

Podemos simplesmente saber em qual cidade se localiza essas coordenadas:

Obtendo o Endereço Através das Coordenadas

Existem algumas maneiras de se obter o endereço através de coordenadas. Este processo é chamado de “reverse geo-coding”. Como no Brasil nós não temos um web service que faz esse trabalho a exemplo do geoNames.org que possui os endereços dos EUA, nós temos que arrumar outra solução.

Então vamos criar uma solução utilizando a API do Google Maps. De acordo com os Termos e Utilização da API do Google Maps, você somente pode usar essas informações para exibi-las em um mapa. Qualquer outra forma de exibição é proibida. Porém, existe um meio de extrair essas informações sem imprimi-las em um mapa e que será demonstrado. Lembrando que o código a seguir é apenas um estudo de caso e não pode ser utilizado por ir contra os Termos de Utilização da API do Google Maps.

Para começar, vamos precisar chamar a API do Google Maps e para isso antes temos que gerar uma Chave para autenticação de acordo com o domínio que você for utilizar:

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

Para conseguir obter os dados de endereçamento, vamos utilizar um método chamado GClientGeocoder. Originalmente, este método serve para gerar um endereço que será marcado em um mapa (como no último exemplo deste artigo). Mas não vamos trabalhar com mapas ainda. O código a seguir é capaz de pegar informações separadamente, como na imagem abaixo.

Vamos aproveitar o primeiro exemplo para obter a Latitude e a Longitude da sua localização e depois pegar os dados do endereço. Veja o código a seguir:

if(navigator.geolocation){
	navigator.geolocation.getCurrentPosition(
		function(position){
			var lat = position.coords.latitude;
			var lon = position.coords.longitude;

			// Iniciando o GeoCoder
			var geocoder = new GClientGeocoder();
			// Informamos a localização e chamamos uma função no retorno da solicitação
			geocoder.getLocations("("+lat+','+lon+")",localizacao);
			//alert(geocoder);

			function localizacao(retorno){
				if (!retorno || retorno.Status.code != 200) {
					alert("Erro: " + retorno.Status.code);
				} else {
					// Placemark é o objeto que contém as infos do endereço
					// Veja no exemplo as informações que contém no Placemark
					endereco = retorno.Placemark[0];
					alert(endereco.address);
				}
			}
		}
	);
}

Clique aqui para ver este código em funcionamento.

Até aqui já obtivemos as Coordenadas Geográficas, já conseguimos as Informações de Endereço e agora vamos mostrar no Mapa a localização do usuário.

Exibindo a Localização no Mapa com Google Maps

Para exibir no mapa, vamos continuar utilizando a API do Google Maps modificando o exemplo acima. Veja como fica:

if(navigator.geolocation){
	navigator.geolocation.getCurrentPosition(
		function(position){
			var lat = position.coords.latitude;
			var lon = position.coords.longitude;

			// Iniciando o Mapa
			map = new GMap2(document.getElementById("mapa"));
			// Centralizando na localização
			map.setCenter(new GLatLng(lat,lon), 15);
			// Iniciando o GeoCoder para fazer o Reverter
			geocoder = new GClientGeocoder();
			// Marcando a localização no Mapa
			geocoder.getLocations('('+lat+','+lon+')', exibeEnd);

			// Personalizando a marcação
			function exibeEnd(retorno){
				map.clearOverlays();
				if (!retorno || retorno.Status.code != 200) {
					alert("Erro: " + retorno.Status.code);
				} else {
					place = retorno.Placemark[0];
					point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
					marker = new GMarker(point);
					map.addOverlay(marker);
					marker.openInfoWindowHtml(
					'Coordenadas: ' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '
' +
					'Logradouro: ' + place.AddressDetails.Country.AdministrativeArea.Locality.DependentLocality.Thoroughfare.ThoroughfareName+ '' +
					'Bairro: ' + place.AddressDetails.Country.AdministrativeArea.Locality.DependentLocality.DependentLocalityName + '
' +
					'Cidade: ' + place.AddressDetails.Country.AdministrativeArea.Locality.LocalityName + '
' +
					'País: ' + place.AddressDetails.Country.CountryNameCode);
				}
			}
		}
	);
}

Clique aqui para ver este código em funcionamento.

Nenhum exemplo desse blog armazena informações do usuário e serve apenas para demonstrar o funcionamento da API Geolocation.

Conclusão

A API Geolocation realmente abre um leque de possibilidades e o que podemos esperar são aplicações cada vez mais ricas e interativas, que possam oferecer serviços de acordo com a localização do usuário, assim como já fazem alguns aplicativos para dispositivos móveis, ou simplesmente uma empresa poderá exibir em sua página de contato um “como chegar” a partir da sua localização. Isso pode ser facilmente implementado com poucas modificações no código do artigo “Traçando Rota com o Google Maps” publicando neste Blog.

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!

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