12

Estou desenvolvendo uma aplicação, na qual há o seguinte formulário para ser preenchido:

formulario

O objetivo é obter os dados necessários para formar o "Código da Ação" que deve ser criada. Esse código é formado concatenando os cinco primeiros campos, sendo que desses apenas três precisam realmente ser preenchidos pelo usuário.

Não posso mudar a ordem dos campos por que eles fazem sentido apenas nessa ordem, e não me parece que devam ser separados já que todos tem o mesmo propósito: construir o código.

O sistema se encarrega de preencher os outros campos (vêm de uma tabela no banco de dados, valores fixos para cada combinação).

Qual a melhor forma de indicar ao usuário quais campos ele deve preencher e quais ele não tem controle? Quero evitar que meu público tenha a vontade de clicar nos campos fixos para tentar mudar um texto que é "estático".

Na foto tentei passar essa intensão mudando a cor de fundo dos elementos (cinza para os fixos e amarelo claro para os preenchíveis). É uma forma acertada de fazer isso?

2
  • O sistema monta orçamento para inscrição/prestação de contas da Lei Rouanet? Tem cara.
    – bfavaretto
    Commented 20/02/2014 às 13:59
  • Desconheço as leis e os detalhes legais por trás, mas de fato é para gerir e acompanhar o orçamento de um dos órgãos do estado (BA), vinculado à secretaria da cultura. Commented 20/02/2014 às 14:02

6 Respostas 6

8

Talvez, uma forma de passar essa impressão seja estilizar os dados não editáveis como sendo textos comuns, sem a caixa de texto.

Dá pra fazer isso de forma que os textos fiquem espaçados por igual, de forma que não fique desorganizado, ou seja, mantendo os textos nas mesmas posições em que aparecem na sua imagem, mas sem parecer que são caixas de texto.

Algo assim (fiz no Paint.net, ficou meio tosco, mas só pra dar uma ideia): inserir a descrição da imagem aqui

5
  • 1
    Acho uma boa ideia. Para ficar mais harmônico visualmente, nesse caso eu também deixaria os rótulos soltos, sem caixas.
    – bfavaretto
    Commented 20/02/2014 às 14:00
  • Assim: i.sstatic.net/daAmo.png? Commented 20/02/2014 às 15:13
  • Ficou estranho... o que o @bfavaretto falou faz sentido, tenta fazer os rótulos dos campos calculados ficarem mais "light" ou até mesmo soltos, talvez, em negrito... mas isso é polêmico: Label Placement in Forms veja a parte que fala sobre textos bold. Commented 20/02/2014 às 15:32
  • Outra boa referência sobre UX em forms: 10 Useful Usability Findings and Guidelines Commented 20/02/2014 às 15:38
  • Também dei +1 nessa porque deixa o visual bem clean.
    – utluiz
    Commented 20/02/2014 às 17:19
6

Uma opção visual que considero interessante, embora para muitos campos possa ser visualmente repetitiva, consiste no uso de ícones.

Campo bloqueado? Tranque com um cadeado. inserir a descrição da imagem aqui

Pode editar? Use um lápis ou caneta. inserir a descrição da imagem aqui

Fonte das imagens: http://www.softicons.com/


Update

As imagens acima eram apenas ilustrativas. Se usadas repetidas vezes na tela, elas podem sobrecarregar o layout e adicionar muita "distração visual" ao usuário.

Portanto, recomendo o uso de imagens mais "sutis", de cor cinza, por exemplo. Além disso, imagens mais simples também ajudam. Um exemplo é do Gluphicons usado no Bootstrap (glyphicon-pencil e glyphicon-lock).

Outra opção é usar apenas o cadeado e não os dois ícones. Depois que o usuário acostumar com isso ele irá entender essa semântica: sem cadeado == editável.

Outro item a se considerar é acinzentar um pouco o texto dos campos não editáveis. Talvez um estilo color: #777; (exemplo).

4
  • +1 Apesar da minha ideia ser diferente, eu também gostei dessa solução. Commented 20/02/2014 às 15:08
  • Assim: i.sstatic.net/67J0K.png? Commented 20/02/2014 às 15:13
  • @GuilhermeBernal A ideia é essa, mas talvez o layout tenha ficado um pouco sobrecarregado. Quem sabe usando ícones menos coloridos fique melhor (Glyphicons glyphicon-pencil e glyphicon-lock?). Outra opção é usar apenas o cadeado nos campos bloqueados, deixando os editáveis sem a imagem, ou talvez o inverso. Eu sou meio indeciso pra essas coisas. :S
    – utluiz
    Commented 20/02/2014 às 15:20
  • @GuilhermeBernal Poderia também usar um ícone de cadeado com tom cinza para não adicionar mais "distração" à tela. Exemplo. O texto das opções não editáveis também poderia ser levemente acinzentado.
    – utluiz
    Commented 20/02/2014 às 15:24
2

O jeito que você fez alterando a cor de fundo ficou legal. Só colocaria nos campos bloqueados uma cor cinza bem claro, assim fica fora de foco do usuário.

2
  • Assim: i.sstatic.net/TtVLH.png? Commented 20/02/2014 às 15:12
  • Isso. Pensando agora..rsrs. Se você deixasse o funco a cor cinza mesmo, porém a cor da fonte um cinza bem clarinho...
    – lionbtt
    Commented 20/02/2014 às 15:32
2

Não deixe os campos pré-selecionados, senão alguns usuários vão clicar "Criar Ação" sem nem ler o resto.

Deixe um texto itálico escrito "Selecione" em cada um dos três, e o botão "Criar Ação" cinza até que o usuário tenha mudado os três. Se você tiver uma idéia da opção mais provável, deixe ela em cima no menu, e depois repetida no local correto de sua classificação numérica ou alfabética.

Fora isso, gostei muito do que você fez sob o ponto de vista de quem distingue cores, mas lembre-se de verificar se esse amarelo não parece igual ao cinza para daltônicos.

Pontos extras se o usuário puder digitar parte da resposta, e o menu se refizer dinamicamente para conter só opções que incluem a palavra ou número digitado.

1
2

Você DEVE colocar os campos editáveis com o fundo branco e os bloqueados com fundo cinza e a fonte um pouco mais clara. só isso já resolve o problema, dá um destaque para o que é editável de uma forma mais elegante e não fica rude ao usuário.

3
  • Assim: i.sstatic.net/eXz8n.png? Commented 20/02/2014 às 15:11
  • Sim exatamente! :)
    – peterq
    Commented 20/02/2014 às 18:30
  • Eu não sei se "DEVE" é a melhor palavra, mas eu concordo em alguns aspectos com essa resposta, @GuilhermeBernal. A questão que não foi detalhada pelo karmex é que existem certas convenções já aprendidas pelos usuários ao usarem outros sistemas, como fundo branco e borda elevada para caixas de seleção e fundo cinza achatado para elementos desabilitados. Outra importante convenção é o ponteiro/cursor do mouse sobre o elemento: talvez usar o Text sobre os elementos não editáveis e o Default sobre os editáveis. Commented 30/05/2014 às 11:55
2

Por fim, usando um pouco de cada resposta (aceitei a do utluiz por ser a mais completa), cheguei no seguinte layout:

layout final

  • Adicionado um ícone de lápis aos campos editáveis. Preferi fazer assim no lugar de por um cadeado nos campos não editáveis porque o ícone atrai bastante atenção, quero a atenção no lugar certo.
  • Texto dos campos não editáveis ficou um pouco mais claro (#555 -> #777)
  • Fundo dos campos não editáveis ficou mais suave (#eee -> #f2f2f2)
  • Fundo dos campo editáveis ficou mais suave (#ffd -> #ffffe8)
  • Adicionado uma opção em branco nos selects
  • Adicionado checagem para só ativar o botão verde se tudo for preenchido (está disabled na imagem)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .