cursor Archives - Naison Souza
Tag Archives: cursor	Cursores e seu impacto na usabilidade	By Naison Souza in CSS, Usabilidade 28 de março de 2012	0 Comment
Cursor ou simplesmente seta do mouse como a maioria denomina, pode não parecer, mais tem bastante influência na usabilidade e experiência do usuário em seu site, porem poucas pessoas se atentam a esse pequeno detalhe.
Todo mundo conhece que um texto é link quando posicionado o cursor do mouse em cima do mesmo e logo o cursor toma uma nova forma que normalmente é o símbolo de uma mão, essa forma auxilia o usuário a identificar que o referido objeto é clicável, entretanto alguns elementos mesmo sendo clicáveis, não são atribuídos a este o referido efeito. Ex: Botões de formulários.
Entretanto o cursor do mouse não se restringe apenas a identificar quando um elemento é clicável, ele também é capaz de tomar outras formas para que seja identificado qual sua ação, vamos imaginar a seguinte situação, você tem um link no seu site que serve apenas para exibir um box com alguma informação após clicado, nesse caso podemos modificar a seta do mouse para que este tome a forma de uma interrogação deixando claro o real objetivo do referido link.
Para isso podemos alterar estas propriedades manualmente no css com a propriedade cursor, assim podemos modificar a seta do mouse para que o elemento seja identificado de acordo a sua função no site.
Valores para a propriedade cursor
default (Seta padrão)
crosshair (Simbolo cruz) indica área de seleção
help (Interrogação) indica ajuda
move (Mão fechada/Cruz seta nas pontas) Indica que o elemento é arrastável
pointer (Mão apontando) Indicando que o elemento é clicavel
progress ( Seta com relógio ) Indica para agurdar
wait (ampulheta) Indica que um evento ainda esta sendo executado
url (Personalizado) Você pode inserir o que bem intender
Vamos modificar o cursor do mouse para uma seta para todos elementos que possuem a classe botao indicando que um elemento é clicável.
.botao {cursor: pointer;}
Identificando quando um link exibe mensagens auxiliando ao usuário.
.help { cursor: help;}
Hoje em dia como é comum vermos sites cada vez mais dinâmicos e animados, é comum em alguns sites existirem elementos arrastáveis, e para facilitar a vida do usuário podemos modificar o valor do cursor para que o elemento seja identificado com arrastável.
.droggable { cursor: move; }
Os valores demonstrados acima para a propriedade cursor são apenas as essenciais e mais utilizadas, caso deseje conhecer todos valores possíveis, acesse esse link.