{"id":2452,"date":"2012-03-14T11:44:22","date_gmt":"2012-03-14T13:44:22","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=2452"},"modified":"2015-04-14T18:51:58","modified_gmt":"2015-04-14T21:51:58","slug":"6-dicas-melhorar-usabilidade","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/acessibilidade\/6-dicas-melhorar-usabilidade","title":{"rendered":"6 dicas para melhorar a usabilidade do seu site"},"content":{"rendered":"

\"Dicas<\/p>\n

Neste artigo apresento 6 maneiras simples de melhorar a usabilidade na web<\/strong>. Felizmente, voc\u00ea pode fazer muitas coisas para melhorar a legibilidade do seu site, aqui est\u00e3o algumas diretrizes de legibilidade que acho relevante para qualquer web site. A maioria das dicas s\u00e3o bem simples que voc\u00ea pode implementar de imediato no seu site.
\n
\nDesenvolver um site leg\u00edvel implica consequentemente em uma usabilidade melhorada e uma agrad\u00e1vel experi\u00eancia de leitura para os usu\u00e1rios. Acredito que todos n\u00f3s queremos isso para os visitantes do nosso site.<\/p>\n

1. Layouts cleam \u2013 use espa\u00e7os em branco<\/h2>\n

Quando digo \u201cespa\u00e7os em branco\u201d, n\u00e3o estou me referindo \u00e0 cor branca, mas sim aos espa\u00e7os entre os elementos da p\u00e1gina<\/strong> (imagens, \u00edcones, textos, etc.). Um espa\u00e7o vazio para separar as se\u00e7\u00f5es. Desta forma estamos diminuindo a polui\u00e7\u00e3o visual e aplicando umas das t\u00e9cnicas mais simples para usabilidade web.<\/p>\n

O termo layout Cleam <\/strong>n\u00e3o quer dizer p\u00e1gina com pouco conte\u00fado. Voc\u00ea pode ter bastante conte\u00fado dentro de um layout limpo. Basta organiza-lo!<\/p>\n

Se tudo estiver amontoado sem uma separa\u00e7\u00e3o clara entre os elementos, ler e navegar no seu site se tornar\u00e1 uma tarefa bem dif\u00edcil. O layout deve ter espa\u00e7os entre os elementos<\/strong> para o usu\u00e1rio poder \u201crespirar\u201d no seu site.
\nAbaixo um exemplo de um site “cleam”.<\/p>\n

\"Exemplo<\/p>\n

2. Conte\u00fados Gr\u00e1ficos<\/h2>\n

Quem nunca ouviu a frase: \u201cUma imagem vale mais que mil palavras\u201d<\/em>. Uma imagem realmente vale mais que mil palavras! Fotos e imagens podem melhorar a legibilidade quando substituir grandes quantidades de texto. Elas podem ser usadas tamb\u00e9m para refor\u00e7ar longos blocos de conte\u00fado de texto<\/strong>. Mas tenha a certeza de que suas imagens est\u00e3o fornecendo valor para sua p\u00e1gina e n\u00e3o apenas decorando-a. Resumo. Evite fotos e imagens sem sentido.<\/p>\n

De fato, os usu\u00e1rios d\u00e3o mais aten\u00e7\u00e3o para bloco de textos que est\u00e3o pr\u00f3ximos a imagens. A seguir um exemplo muito comum de imagem mais um pequeno bloco de texto.
\n\"Exemplo<\/p>\n

3. Alinhamento – Grid<\/h2>\n

O conte\u00fado da p\u00e1gina e do design deve estar perfeitamente alinhado, criando uma hierarquia visual clara<\/strong>. Para esta finalidade os designers utilizam um artefato chamado de grid (grade). Isso \u00e9 uma t\u00e9cnica que vai auxilia-lo tremendamente na organiza\u00e7\u00e3o do seu conte\u00fado.<\/p>\n

Uma grade bem planejada pode formar uma excelente base para criar um site com equil\u00edbrio visual<\/strong>. P\u00e1ginas devem ser divididas em um sistema de colunas, linhas, menus, barras laterais, cabe\u00e7alho e rodap\u00e9, orientando os olhos do usu\u00e1rio suavemente para o conte\u00fado e navega\u00e7\u00e3o.<\/p>\n

Veja abaixo um excelente material sobre como criar grids.<\/p>\n

<\/object><\/p>\n
<\/div>\n<\/div>\n

4. Cores e contraste <\/h2>\n

Texto cinza claro sobre um fundo branco para voc\u00ea pode at\u00e9 ser algo natural e comum, mas para os visitantes do seu site pode ser completamente ileg\u00edvel (porque realmente \u00e9).<\/p>\n

Voc\u00ea pode definitivamente \u201cbrincar\u201d com o contraste do seu conte\u00fado. Se o seu site tem um fundo branco, voc\u00ea pode chamar a aten\u00e7\u00e3o para certos textos, tornando-os mais escuros e fazer outros textos n\u00e3o t\u00e3o escuros para que eles n\u00e3o chamem tanta aten\u00e7\u00e3o. Por exemplo: texto preto sobre fundo branco chama mais aten\u00e7\u00e3o que um texto cinza sobre um fundo branco.<\/p>\n

H\u00e1 uma grande facilidade na leitura quando a cor do texto e a cor de fundo est\u00e3o em alto contraste. Baixo contraste faz com que a leitura se torne cansativa para os usu\u00e1rios, principalmente aqueles que t\u00eam alguma dificuldade de vis\u00e3o<\/strong>. O site Vischeck<\/a> simula uma vis\u00e3o dalt\u00f4nica do seu site. Apenas informe o endere\u00e7o da p\u00e1gina para fazer o teste.<\/p>\n

O segredo \u00e9 certificar-se que h\u00e1 um bom contraste entre os elementos de design, cores de fundo e texto.<\/p>\n

H\u00e1 um tempo escrevi uma mat\u00e9ria sobre uma ferramenta online que serve para testar a harmonia das cores de um Website<\/a>.<\/p>\n

Use as cores \u00e0 seu favor:<\/strong><\/p>\n

\n