[Resolvido] Dicas de usabilidade

[Eliseu M. 2]

Olá pessoal, tudo suave?? :D

Hoje vou fazer um tutorialzinho básico de questões de usabilidade, não sei se esse é o fórum certo (Webstandards) porque também envolve JS.

 

Vamos lá! (lembrando que são apenas sugestões e que posso estar errado, pois estou aprendendo como vocês)

 

1. Conteúdo

 

Não use muitos textos, a menos que seja realmente preciso. Explore mais os novos recursos da web, como abas, ou sliders, é horrível carregar de novo um página inteira (principalmente aqueles que bloqueiam cookies, temps, etc.) só para ver um textinho de 5 linhas.

 

2. Menus

 

Quem gosta de passar o mouse em cima de um menu e não poder clicar?

Por ex.: tenho um menu com padding:10px; mas não usei display:block;

Resultado: o visitante vê um menu grande, aparentemente fácil de clicar, mas realmente tem que mover o cursor para cima do link =[

 

3. Tipografia

 

Imagine o UOL com as headers em Microsft Sans Serif o.O

E mais: imagine um site que leva 30 segundos para carregar porque o criador quis usar uma fonte diferente das comuns.

Isso já é jurássico, felizmente :D

Tutorial Importando fontes com CSS: http://www.maujor.com/tutorial/impfonte.php

 

4. Inputs

 

Como eu já havia postado para um amigo na área de avaliações, é chato clicar num input e precisar segurar Backspace para começar a digitar, não é?

Usem algo como:

 

<input type="text" name="busca" value="Digite aqui" onfocus="if(this.value=='Digite aqui'){this.value=''};" onblur="if(this.value==''){this.value='Digite aqui'};" />

Função: ao clicar, o texto some e, se o visitante não digitou nada, ele retoma o value padrão onBlur.

Fonte: bytemycode.com

 

5. Tamanho da fonte

 

Mude sua resolução de 800x600 para 1280x800, acesse um site de layout fixo, feito em pixels, e sinta a diferença. Pois é, nem todos enxergam bem =[ Mas ainda bem que o JS pode nos ajudar:

 

<script type="text/javascript">
var min=8;
var max=18;
function FontBigger() {
  var p = document.getElementsByTagName('p');
  for(i=0;i<p.length;i++) {
     if(p[i].style.fontSize) {
        var s = parseInt(p[i].style.fontSize.replace("px",""));
     } else {
        var s = 12;
     }
     if(s!=max) {
        s += 1;
     }
     p[i].style.fontSize = s+"px"
  }
}
function FontSmaller() {
  var p = document.getElementsByTagName('p');
  for(i=0;i<p.length;i++) {
     if(p[i].style.fontSize) {
        var s = parseInt(p[i].style.fontSize.replace("px",""));
     } else {
        var s = 12;
     }
     if(s!=min) {
        s -= 1;
     }
     p[i].style.fontSize = s+"px"
  }   
}
</script>
<a href="javascript:FontSmaller();">a </a> 
<a href="javascript:FontBigger();"> A</a>

Super simples e muitas vezes útil!

 

6. Botão Topo float

 

Vou dar um exemplo bem robusto, em JQuery, mas é muito legal, quando o usuário rola a página, o botão aparece automaticamente com fade:

JQuery: http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

 

Plugin:

<script type="text/javascript">
$(document).ready(function(){
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});});
</script>

CSS:

<style type="text/javascript">
#toTop { width:100px;background:#f1f1f1;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
#content { width:700px;margin:10px auto; }
</style>

Botão:

<script type="text/javascript"> 
  $(function() {
      $("#toTop").scrollToTop();
});
</script>
<a href="#" id="toTop">Scroll to Top</a>

Fonte: webdeveloperplus.com

 

7. Links

 

Dê ao usuário a capacidade de enxergar que o cursor dela está em cima de link, por favor. Use :hover no CSS ou .hover no JQuery, é muito útil. Pode ser de um underline até fade. E ao link visitado, dê um destaque, mesmo que seja pouco, deixe-o mais claro ou mais escuro, seja criativo :D

 

8. Splash Screen (páginas de abertura) e GIFs

 

Por favor, convenhamos, essas coisas devem ser muito bem pensando para depois serem utilizadas. Sobre as Splashs, se for um portal de notícias com informações de três regiões dum estado, por exemplo, tudo bem. Em relação aos GIFs, já é coisa do passado, a não ser que sejam estáticos, pois diminui o peso da imagem.

 

9. Link para Home

 

xD Como o Thiago fala em todas as avaliações, o logo tem que ter um link para enviar à página inicial, eu mesmo navego assim.

 

10. Estilo

 

Se sua página for simples, fácil de editar via CSS, utilize um StyelSwitcher (trocador de estilos). Pelo menos por enquanto, até os developers pegarem a manha do ThemeRoller do JQuery (muito massa!).

As letras: não coloque um header com fonte 36px e um texto com 10px, como alguns bloggers fazem, dá contraste demais.

 

11. Conteúdo

 

Dinâmismo e rapidez sempre foram essenciais. Por isso o Ajax veio para nos dar um pouco de sua luz. Sei que pode ser difícil entendê-lo, mas garanto que vale a pena. InlineEdit, Accordion, Form, essas coisas facilitam a vida do internauta.

 

12. Simplicidade

 

Não pense em encher o site de efeitos, de JS, de Flash, para ficar "legal". Além de deixar o site pesado, pode diminuir sua posição nos sites de pesquisas.

 

13. Mobile Website

 

A nova onda é navegar pelo celular. Hmm, ainda não é onda, mas pode se tornar se os developers pensarem naqueles que trabalham o dia todo e acessam a net pelo celular e acabam se desanimando e fecham o browser ;(

Há vários tutoriais que ensinam as tags para mobile browsers.

Vai um aí (é só traduzir pelo Google): http://www.w3.org/TR/NOTE-html40-mobile/

 

14. Codificação

 

Não custa nada adicionar:

 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

 

no código para acabar com aqueles ícones de interrogação ou aquelas letras estranhas xD

 

15. Links externos

 

Coloque links de outros sites no seu, qual o problema? O developer tem que pensar no internauta, então, por que não incrementar o conhecimento dele?

 

16. Breadcrumbs

 

Sabe aqueles menus que mostram onde o visitante está no site? Como esse aqui em cima iMasters Fóruns > Desenvolvimento > Webstandards... isso é essencial :D

Tutoriais: http://www.google.com.br/search?hl=pt-BR&client=firefox-a&rls=org.mozilla%3Apt-BR%3Aofficial&hs=kcN&q=breadcrumbs+tutorial&btnG=Pesquisar&meta=

Outra: um sitemap também é bom.

 

17. Contato, RSS e Feedback

 

Preciso falar mais algo? Disponibilize formulário de contato em que o visitante possa enviar e-mails anonimamente, crie um página XML para RSSs e outra para seu Feedback, ótimo para prestadores de serviços e freelancers.

 

18. Títulos

 

Não encha os títulos de suas mensagens de coisas desnecessárias. Há um tutorial muito bom sobre isso no site do Mario Sam: http://www.mariosam.com/internet/seosemmob/titulos-inteligentes

 

19. Últimas dicas

 

- Crie arquivos PDF, ZIP ou etc. para o visitante poder baixar seu artigo, seus PNGs, etc.;

- Também configure o media="print" para uma impressão descente. Veja um tuto aqui;

- Dependendo do site, é bom criar um menu para o botão direito do mouse, também pode facilitar a vida do usuário.

 

É só isso pessoal, espero ter ajudado. Peguei informações de vários sites e fui encaixando :D 85% saiu de mim xD

Até mais!