duskblue.org

Estou num momentos de novas aventuras, brincando com coisas web, e fazendo uma das coisas que me distrai quase tanto do que ler coisas na internet: ler coisas em livros…
Usabilidade é uma das coisas que acho interessante (provavelmente devido a ódio de coisas sem usabilidade), e quis aprender mais. E como um dos melhores jeito de aprender é ensinar…

Vamos as regrinhas básicas (escolhidas por mim) que ninguém pode esquecer:

Legibilidade

Olha amigo, eu sei que você tem visão de águia e um monitor de 30″ LCD na sua mesa, mas por favor, pense na pessoa que está na lã-ráuse com um monitor CRT coitadinho sem brilho e fora de foco. Ninguém tem que forçar a vista para ler o seu site, especialmente se for a sua avó. E se eu não consigo ler não vou entrar no seu site oras!

Exemplos:

Consegue ler?? Dê um passo pra trás, e agora? Nada de cores miguxas e baixo contraste, pliz

Maus exemplos tá cheio aí. E nada de serifas, por favor… Cereja no bolo: teste para ver se o seu site não quebra (muito) se o tamanho da letra é aumentado no browser.

Aonde eu clico?

O usuário sabe clicar. Ou melhor, sabe clicar em coisas que parecem clicáveis. Se não parece um botão, ou pior, o usuário ficar em dúvida, já era!

Ou é óbvio, ou não é. Pense em coisas que o usuário intuitivamente sabe clicar: botões, abas, panes, fotos, etc. Respeite as ações dos elementos, não faca uma aba abrir uma página em outra janela por exemplo. Entra aqui http://www.amazon.com/ e veja se tem alguma coisa que te faz hesitar ou não em clicar.

Agora, se você pensar em “ensinar o usuário” e colocar uma indicação “clique na flor para entrar”, um jacaré vai invadir sua casa pelo esgoto.

Curiosamente, existe um fenômeno contrário interessante. Se um usuário achar (e isso acontece em milésimos de segundo) que algo é um anúncio, ele vai apagar aquilo do seu foco de atenção e não vai chegar nem perto. Logo, não coloque nada que se pareça um anúncio se não o for.

Links

O usuário sabe o que é um link. Sabe as dicas que o levam a saber o que é um link (cor azul, sublinhado, efeitos mouseover) Não o confunda. E sobretudo, links já visitados tem cor diferente, não estrague isso no CSS

Exemplo de mal exemplo: http://www.linkedin.com/

Tá vendo isso?!?! Tá vendo “PROFILE UPDATES”?? Isso não é um link. Agora veja “LINUX EXPERT UPDATES” Isso é um link!!!

W T F Indeed

Hierarquia da informação

Não sabe o que é?!? Para programadores a explicação é fácil. É a diferença de você ler um código identado e ler um código não identado.

Outro exemplo? Qualquer jornal (online ou não). Tem o título do jornal. Tem o título da notícia. E tem a notícia em si. Ado ado ado cada um no seu quadrado. O “quadrado” do título é a página inteira, o da notícia é o menorzinho que tem o título e a notícia, etc.

Quo vadis

Não deixe o usuário perdido. Será que ele sabe onde está no grande mapa do seu site? Ele saberia chegar de volta a recepção ou fica chorando no meio do corredor porque se perdeu da mãe? No wordpress aqui eu vejo no topo exatamente onde estou. Write > Write Post (com abas). Outro método são “breadcrumbs” (a Amazon usa isso): Tools and weapons >> Fire >> Flame Thrower

Lógico que para o usuário voltar aonde estava ele tem que ser capaz de ir em primeiro lugar. Abas, listas de links, tudo isso ajuda o usuário a se localizar.

Ah sim, tente não quebrar o botão “Back”, ok, as vezes não dá, mas não o quebre por qualquer bobagem.

Também evite links do tipo sualoja.com/cgi-bin/abcdef/blah.php&lala=7298728372212?xik=ACC89879874398749874 ou pior, locais não acessíveis diretamente com um link.

Lógico que se é um blog ou um site simples isso é mais fácil.