Usabilidade nos formulários

Por Ivo Gomes, em Sexta-feira, 3 de Setembro de 2004 | 14 Comentários

Os formulários são uma das coisas que devemos dar maior atenção quando concebemos um website. Os formulários são um meio de interacção entre o utilizador e o sistema, e por vezes, o bom funcionamento do sistema depende da submissão de dados nos formulários.

Um dos casos que ocorre mais vezes é quando temos um conjunto de caixinhas onde devemos clicar para seleccionar uma ou mais opções. Já repararam quão pequenas são essas caixas? Elas têm cerca de 5 pixels de largura e outros 5 de altura. Uma pessoa que não tenha grande coordenação de movimentos ou que não consiga efectuar movimentos de precisão com o rato tem sérias dificuldades em clicar em qualquer um dos botões...

Aqui vai um exemplo:

Para seleccionar uma caixinha, temos de clicar mesmo no quadradinho!

No entanto, usando a tag label e o atributo for e adicionando o seguinte código à nossa folha de estilos CSS:

label {cursor: pointer;}

O resultado é o seguinte:

Aparece uma "mãozinha" sempre que passamos por cima de um item no formulário, e é possível clicar em TODO o texto, e não apenas na caixinha. Com o aparecimento da "mão" no cursor, temos um feedback positivo de que podemos clicar ali para seleccionar aquele item.

E aqui têm o código HTML do formulário:

<form action="/" class="abrir">
<fieldset>
<legend>Formulário acessível</legend>
<input type="checkbox" name="hobby" id="ler"/><label for="ler">ler: </label>
<input type="checkbox" name="hobby" id="escrever" /><label for="escrever">escrever: </label>
<input type="checkbox" name="hobby" id="vertv" /><label for="vertv">ver TV: </label>
</fieldset>
</form>

Estas pequenas alterações podem significar muito para aquelas pessoas que têm dificuldade em usar formulários. Além disso, tornamos o site mais acessível e mais usável, ou como alguém já disse, mais clicável...

14 Comentários

Marcelo Linhares

3 de Setembro de 2004, 17:30

Muito boa a dica Ivo, eu já usava o Label para todos os formulários que desenvolvo, porém não usava o cursor: point.
Seria interessante se os desenvolvedores passassem a utilizá-lo mais, apesar de consumir algumas linhas de códigos a mais vale a pena utilizá-lo.

Abraços!

Pedro Custódio

5 de Setembro de 2004, 14:38

Olá Ivo,
achei interessante o teu post, mas no Safari (Mac) apesar de o cursos passar a ser uma “maozinha” ao clickar não acontece nada, para selecionar é mesmo preciso dar com a caixita! :(
Provavelmente é mesmo culpa do Safari. :(

Ivo Gomes

5 de Setembro de 2004, 16:50

Infelizmente nunca usei nenhum Mac e como tal não sei como ficam as coisas no Safari :(
No meu PC tenho vários browsers instalados, mas é impossível ter o Safari, uma vez que só funciona em Mac.
Pode ser que agora possa testar com os Macs lá no escritório :)

Um abraço.

Jorge Adriano Aires

6 de Setembro de 2004, 09:01

Olá,
Safari usa um fork de KHTML, a rendering engine desenvolvida para o browser Konqueror do Desktop Environment KDE (Linux e outros *nixes). De facto em KDE 3.2.3 não funciona, mas em KDE 3.3.0 já está ok, portanto já é suportado por versões mais recentes de KHTML.

Jorge Adriano

P.S.:
Já agora Ivo, com o novo emprego (parabéns!) provavelmente deves andar bastante ocupado, de qualquer forma, já pensaste dar uma olhadela a alguns projectos de Software Livre? A equipa de KDE, por exemplo, tem vindo a esforçar-se para melhorar a usabilidade/acessibilidade da sua desktop e respectivas aplicações. Todo o feedback (especialmente de quem realmente percebe do assunto!) é bem vindo.

Aqui ficam alguns links:
http://usability.kde.org
http://accessibility.kde.org

Ah, e mesmo para quem não quer instalar linux, há sempre a possibilidade de correr um Live CD (como Knoppix ou Slax).

Mais uma vez, parabéns pelo emprego/website.
Hmm e vim aqui parar por acaso e já me fartei de escrever, espero não ter sido aborrecido :)

Ivo Gomes

10 de Setembro de 2004, 18:24

Obrigado pelos links!
Nunca trabalhei com Linux, mas pelo que já ouvi falar, é um sistema muito pouco “user-friendly”… Mas não se pode esperar muito de um software open source. É preciso fazer uma coisa de cada vez…

Aqui na log só trabalhamos com software open source. É uma boa oportunidade para mim para poder aplicar os meus conhecimentos nesta área e tentar melhorar a interacção com estes sistemas, mas temos que ir com calma…

Um abraço

Ivo

Leonardo Cidral

9 de Dezembro de 2004, 19:34

E como fica a validação do formulário?

Particularmente acho melhor as ditas janelinhas de alerta para campos obrigatórios, já vi em alguns sites que o texto de aviso aparece embaixo do campo requerido ou inválido.

Qual a opinião de vocês?

Acredito que as janelas de alerta vão permanecer por um bom, ou já existe algo melhor?

Ivo Gomes

13 de Dezembro de 2004, 20:00

Neste artigo apenas dei o exemplo das “labels” mas há muito mais coisas num formulário que podem ser melhoradas. Quanto às janelinhas, elas só funcionam depois de clicar no botão ENVIAR. Um formulário bem feito não precisa de janelas de alerta, só que as coisas têm que ser intuitivas, levar o utilizador a perceber o que deve ou não preencher.
Acho que os campos de preenchimento obrigatório devem ter escrito à frente em parêntesis isso mesmo, ou então ter uma cor diferente e indicar explicitamente que os campos com essa cor são obrigatórios.
Já vi sites que usam o * para marcar os campos obrigatórios, outros usam o * para marcar os não obrigatórios e outros usam o * para marcar os campos alternativos… Afinal em que é que ficamos?

Leonardo Procópio

25 de Novembro de 2006, 17:15

Muito 10!!!

Vitor

28 de Novembro de 2006, 12:34

O nome do atributo é “for” e não “label” como está escrito. Label é o nome da tag HTML que recebe o atributo for=”iddocampo”.

Claudia

6 de Dezembro de 2006, 13:13

Muito bom! Adorei a dica.

Rochester

5 de Maio de 2007, 17:40

Acho que voce poderia falar sobre formularios em geral, e sobre mensagens de erro, sao mto comuns erros nessa parte.

E sobre linux,o ubuntu (agora na versão 7) é bem simples (apt-get pra vida!) e eles mandam o cd na sua casa, free :D

Ivo Gomes

6 de Maio de 2007, 20:34

Obrigado pela dica. É mais um possível tema para escrever um artigo. Quanto ao Linux (Ubuntu), ainda só tive a oportunidade de experimentar por 10 minutos e gostei, mas não foi o suficiente para poder ter uma opinião.

Gil Porta

10 de Abril de 2008, 19:12

Olá Ivo.

Gostei da dica.
Já vou colocar o cursor pointer no meu site. Muita gente não sabe que pode clicar no texto e fica apanhando do mouse pra acertar o checkbox :-)

Vai aqui uma outra dica:
No validador “Examinator” diz que devemos envolver o campo do formulário e o rótulo, ou seja, abrir a tag label antes do campo e fechá-la depois do rótulo. Com esse simples detalhe a gente ganha mais uns pontinhos na nota.

Ivo Gomes

11 de Abril de 2008, 09:35

Olá Gil, não sabia que o facto de colocar o input (campo do formulário) dentro do label (rótulo) era uma boa prática. Já tenho visto isso em alguns sites e penso que também já o fiz em alguns projectos meus, mas sendo assim vou passar a fazê-lo sempre :)

Comente!

Comente este artigo!

Marcelo Linhares

3 de Setembro de 2004, 17:30

Muito boa a dica Ivo, eu já usava o Label para todos os formulários que desenvolvo, porém não usava o cursor: point.
Seria interessante se os desenvolvedores passassem a utilizá-lo mais, apesar de consumir algumas linhas de códigos a mais vale a pena utilizá-lo.

Abraços!
Pedro Custódio

5 de Setembro de 2004, 14:38

Olá Ivo,
achei interessante o teu post, mas no Safari (Mac) apesar de o cursos passar a ser uma “maozinha” ao clickar não acontece nada, para selecionar é mesmo preciso dar com a caixita! :(
Provavelmente é mesmo culpa do Safari. :(
Ivo Gomes

5 de Setembro de 2004, 16:50

Infelizmente nunca usei nenhum Mac e como tal não sei como ficam as coisas no Safari :(
No meu PC tenho vários browsers instalados, mas é impossível ter o Safari, uma vez que só funciona em Mac.
Pode ser que agora possa testar com os Macs lá no escritório :)

Um abraço.
Jorge Adriano Aires

6 de Setembro de 2004, 09:01

Olá,
Safari usa um fork de KHTML, a rendering engine desenvolvida para o browser Konqueror do Desktop Environment KDE (Linux e outros *nixes). De facto em KDE 3.2.3 não funciona, mas em KDE 3.3.0 já está ok, portanto já é suportado por versões mais recentes de KHTML.

Jorge Adriano

P.S.:
Já agora Ivo, com o novo emprego (parabéns!) provavelmente deves andar bastante ocupado, de qualquer forma, já pensaste dar uma olhadela a alguns projectos de Software Livre? A equipa de KDE, por exemplo, tem vindo a esforçar-se para melhorar a usabilidade/acessibilidade da sua desktop e respectivas aplicações. Todo o feedback (especialmente de quem realmente percebe do assunto!) é bem vindo.

Aqui ficam alguns links:
http://usability.kde.org
http://accessibility.kde.org

Ah, e mesmo para quem não quer instalar linux, há sempre a possibilidade de correr um Live CD (como Knoppix ou Slax).

Mais uma vez, parabéns pelo emprego/website.
Hmm e vim aqui parar por acaso e já me fartei de escrever, espero não ter sido aborrecido :)
Ivo Gomes

10 de Setembro de 2004, 18:24

Obrigado pelos links!
Nunca trabalhei com Linux, mas pelo que já ouvi falar, é um sistema muito pouco “user-friendly”… Mas não se pode esperar muito de um software open source. É preciso fazer uma coisa de cada vez…

Aqui na log só trabalhamos com software open source. É uma boa oportunidade para mim para poder aplicar os meus conhecimentos nesta área e tentar melhorar a interacção com estes sistemas, mas temos que ir com calma…

Um abraço

Ivo
Leonardo Cidral

9 de Dezembro de 2004, 19:34

E como fica a validação do formulário?

Particularmente acho melhor as ditas janelinhas de alerta para campos obrigatórios, já vi em alguns sites que o texto de aviso aparece embaixo do campo requerido ou inválido.

Qual a opinião de vocês?

Acredito que as janelas de alerta vão permanecer por um bom, ou já existe algo melhor?
Ivo Gomes

13 de Dezembro de 2004, 20:00

Neste artigo apenas dei o exemplo das “labels” mas há muito mais coisas num formulário que podem ser melhoradas. Quanto às janelinhas, elas só funcionam depois de clicar no botão ENVIAR. Um formulário bem feito não precisa de janelas de alerta, só que as coisas têm que ser intuitivas, levar o utilizador a perceber o que deve ou não preencher.
Acho que os campos de preenchimento obrigatório devem ter escrito à frente em parêntesis isso mesmo, ou então ter uma cor diferente e indicar explicitamente que os campos com essa cor são obrigatórios.
Já vi sites que usam o * para marcar os campos obrigatórios, outros usam o * para marcar os não obrigatórios e outros usam o * para marcar os campos alternativos… Afinal em que é que ficamos?
Leonardo Procópio

25 de Novembro de 2006, 17:15

Muito 10!!!
Vitor

28 de Novembro de 2006, 12:34

O nome do atributo é “for” e não “label” como está escrito. Label é o nome da tag HTML que recebe o atributo for=”iddocampo”.
Claudia

6 de Dezembro de 2006, 13:13

Muito bom! Adorei a dica.
Rochester

5 de Maio de 2007, 17:40

Acho que voce poderia falar sobre formularios em geral, e sobre mensagens de erro, sao mto comuns erros nessa parte.

E sobre linux,o ubuntu (agora na versão 7) é bem simples (apt-get pra vida!) e eles mandam o cd na sua casa, free :D
Ivo Gomes

6 de Maio de 2007, 20:34

Obrigado pela dica. É mais um possível tema para escrever um artigo. Quanto ao Linux (Ubuntu), ainda só tive a oportunidade de experimentar por 10 minutos e gostei, mas não foi o suficiente para poder ter uma opinião.
Gil Porta

10 de Abril de 2008, 19:12

Olá Ivo.

Gostei da dica.
Já vou colocar o cursor pointer no meu site. Muita gente não sabe que pode clicar no texto e fica apanhando do mouse pra acertar o checkbox :-)

Vai aqui uma outra dica:
No validador “Examinator” diz que devemos envolver o campo do formulário e o rótulo, ou seja, abrir a tag label antes do campo e fechá-la depois do rótulo. Com esse simples detalhe a gente ganha mais uns pontinhos na nota.
Ivo Gomes

11 de Abril de 2008, 09:35

Olá Gil, não sabia que o facto de colocar o input (campo do formulário) dentro do label (rótulo) era uma boa prática. Já tenho visto isso em alguns sites e penso que também já o fiz em alguns projectos meus, mas sendo assim vou passar a fazê-lo sempre :)