Cursores e seu impacto na usabilidade

cursor

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

Aplicando na prática

Vamos modificar o cursor do mouse para uma seta para todos elementos que possuem a classe botao indicando que um elemento é clicável.

Identificando quando um link exibe mensagens auxiliando ao usuário.

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.

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.

 

 

Leave a Comment.