11

Se eu tenho um formulário onde alguns campos são fixos, qual é a melhor maneira de apresentar esses campos pro usuário, do ponto de vista da UX?

  • Um campo comum, disabled:

    <label>Foo: <select name="foo" disabled>
      <option value="1">A</option>
      <option value="2" selected>B</option>
    </select></label>
    
    <label>Bar: <input type="text" name="bar" value="C" disabled></label>
    <label><input type="checkbox" name="baz" checked disabled> Baz</label>
    
  • Um campo comum, readonly:

    <label>Foo: <select name="foo" readonly>
      <option value="1">A</option>
      <option value="2" selected>B</option>
    </select></label>
    <label>Bar: <input type="text" name="bar" value="C" readonly></label>
    <label><input type="checkbox" name="baz" checked readonly> Baz</label>
    
  • Um texto simples, acompanhado de um campo hidden:

    <input type="hidden" name="foo" value="2"> Foo: <strong>B</strong>
    <input type="hidden" name="bar" value="C"> Bar: <strong>C</strong>
    <input type="hidden" name="baz" value="on"> Baz: <strong>sim</strong>
    

A aparência dessas opções fica por exemplo assim (Chrome no Windows):

captura de tela do código acima

Na minha opinião, os campos disabled ficaram mais bonitos, mas eles não são enviados junto ao formulário... (além de serem facilmente confundidos com campos "não aplicáveis") Os readonly não dão nenhuma indicação visual de que são somente-leitura, e na prática alguns deles não respeitam esse atributo (o select e o checkbox continuam podendo ser alterados). Usando hidden é até OK, mas não sei qual seria a melhor forma de apresentar alguns desses dados ao usuário (por exemplo, no caso do valor "on/off" eu usei a palavra "sim", mas não gostei muito do resultado).

Existe algum princípio de Usabilidade ou Experiência de Usuário que indique qual a melhor forma ou, se não houver melhor, o que devo levar em consideração ao escolher entre uma representação e outra?

Nota: Ao contrário dessa pergunta relacionada, neste caso os campos fixos não são editáveis nunca (i.e. é diferente de um campo que não se aplica nesse contexto mas poderia se aplicar em outro). Apenas são exibidos para situar o usuário, nenhuma ação da parte dele é necessária quanto aos mesmos.

2
  • 2
    Relacionado: pt.stackoverflow.com/q/31608/101
    – Maniero
    13/08/2016 às 10:01
  • 2
    Por experiencia própria, se for usar campo disabled, esconde ele e coloca um texto no mesmo formato que a label. Já ouvi muito usuário falando "o sistema não funciona, não dá pra editar a [...] do campo".
    – user49127
    15/08/2016 às 13:02

2 Respostas 2

8

[...] neste caso os campos fixos não são editáveis nunca [...]

Ou seja, eles não são campos/caixas de edição (edit boxes) e sim rótulos (labels). Logo, a sua resposta é: use a opção C (Hidden).

Justificativas

  1. Na grande maioria dos sistemas operacionais e, principalmente, na interação via Web, existe a convenção visual já amplamente estabelecida de que uma área delimitada por uma linha fina (uma "caixa") contendo texto é um "campo" e, portanto, utilizado para digitação de texto (isto é, edição). Se você utilizar a opção A (Disabled), você passará ao usuário a informação de que esse campo está desabilitado por algum motivo e que poderá eventualmente ser habilitado se esse motivo for mudado. Como não é o caso, isso está essencialmente errado (embora o problema seja "apenas" confusão). Essa confusão fica pior ainda no caso do caixa de seleção drop-down (ou combo-box), em que até mesmo existe uma seta para indicar que há mais informação abaixo.

  2. Na minha opinião, a opção de somente leitura (readonly) em caixas de texto deveria ser descontinuada (deprecated) em todas as linguagens que permitem a programação visual. Até onde eu sei ela existe apenas para permitir que o usuário possa selecionar e copiar o texto para a área de transferência (em uma janela que exibe a licença de um instalador, por exemplo), o que pode ser feito também com rótulos (labels) do formato C (Hidden) na maioria das linguagens mais modernas e, sem sombra de dúvida, em HTML. Independentemente disso, fora desse contexto (em que [1] texto precisa ser apresentado somente para leitura, [2] se deseja que o usuário possa selecioná-lo e copiá-lo e [3] não há outra forma de implementar isso) você só vai produzir dificuldade para o usuário ao deixar um campo visualmente similar aos demais porém somente leitura. O usuário vai entender que o campo é editável até tentar alterá-lo uma vez, o que pode gerar frustração e confusão.

  3. Se os campos são fixos, isso significa que eles nunca mudam. Ok. Agora, se você os apresenta mesmo assim, é porque você julga que o usuário precisa dessa informação. Assim, uma pergunta importante que você precisa se fazer é: esse seu julgamento está correto? Isto é, o usuário realmente precisa dessa informação fixa apresentada no formulário? Se sim, ela precisa estar em meio aos campos do formulário? Se a sua preocupação é apresentar algo para ajudar o usuário a se sentir seguro na interação, isso pode ser feito de diversas formas diferentes, desde uma mensagem de texto mais acima ou abaixo do formulário (e assim, fora do escopo contextual dele) ou como uma janela de diálogo no momento do envio (alert box), entre tantas outras. Por exemplo, o "sim" significa uma afirmação ao que? Suponha um formulário de compra e você está dizendo que "sim, o cartão de crédito vai ser gravado para transações futuras" (e que não deseja dar essa opção para o usuário, já que o campo é fixo). Essa "mensagem" não deveria ser um checkbox, mas um aviso em uma caixa amarela em algum outro lugar. Além disso, falando tecnicamente, algo fixo sequer deveria ser transmitido para o servidor, pois se é fixo o servidor já pode (ou deveria) saber essa informação e você economiza dados no transporte.

4
  • 2
    Concordo com a análise. No meu caso particular, trata-se da venda de um projeto [arquitetônico] pronto, com customização. As informações fixas incluem além do nome do projeto o que está ou não incluído no pacote e que não é customizável (os itens "sim" ou "não"), o que eu julgo necessário informar ao usuário no ato da compra, mas me equivoquei quanto à necessidade de transmitir ao servidor (pois ele já possui essa informação). Vou pensar na melhor forma de apresentar esses dados, e onde (não precisa estar no meio dos campos, mas tem de estar próximo dos itens relacionados).
    – mgibsonbr
    16/08/2016 às 3:56
  • A propósito, em outros cenários (fiz essa pergunta de forma genérica porque é algo meio recorrente, já tive essa dúvida algumas vezes no passado) eu preciso sim re-enviar ao servidor, pois guardo o estado no lado cliente. Pode-se debater entre os méritos de guardar esses dados na session ou manter o servidor stateless, mas como a pergunta era sobre UX eu preferi não me alongar demais nesse aspecto.
    – mgibsonbr
    16/08/2016 às 4:08
  • Certo. Bom, sabendo o seu domínio de problema fica mais fácil sugerir algo. Se você realmente deseja manter todas as informações próximas (isto é, em um mesmo contexto), não pense na apresentação como um formulário, mas sim como uma planilha ou algo do tipo (só mude a metáfora). Apresente tudo como labels e coloque um botão editar (um ícone de lápis, por exemplo) ao lado dos que são editáveis. Isso só vai ser um problema se o usuário precisar editar muitos campos em sequência. Daí uma alternativa talvez seja fazer uma tela separada para edição, onde só são apresentados os campos editáveis. 16/08/2016 às 11:12
  • A pergunta é boa e tem mesmo potencial genérico. Mas não dá pra ter uma resposta igualmente genérica, pois a solução depende mesmo do uso e dos usuários. Sobre precisar enviar ao servidor, não confunda essa necessidade com a interação do usuário. Podemos ser tentados a colocar tudo ali no formulário só pra facilitar o envio, mas o usuário só deveria interagir com o que ele precisa/deve realmente ver. O resto, envie escondido mesmo. 16/08/2016 às 11:14
3

Desconheço alguma regra que diz que tem que fazer X ou Y. Nem faria sentido existir uma norma que dita como fazer. Isso é de livre escolha do desenvolvedor observando a usabilidade do sistema.

Usar o recurso readonly é apenas um jeito conveniente onde não precisamos criar uma condicional para escrever como uma label.

Exemplo com PHP,

if ($readonly) {
    echo 'foo';
} else {
    echo '<input type="text" value="foo">';
}

Ou, dependendo do caso pode ainda precisar do campo de forma oculta:

if ($readonly) {
    echo '<input type="hidden" value="foo">
    foo';
} else {
    echo '<input type="text" value="foo">';
}

Se optar pelo atributo "readonly" poderia ser algo assim:

echo '<input type="text" value="foo"'.($readonly? ' readonly': '').'>';

Claro que o ganho com performance é ridículo, mas de qualquer forma poupa um pouco mais de memória no processamento. Além de ter o código mais limpo.

Também poderia jogar o processamento para o cliente:

<input type="text" value="foo" id="foo">
<script>
var readonly = <?php echo $readonly;?>;
$("#foo").prop("readonly", readonly);
</script>

Nesse terceiro exemplo, o uso de processo no servidor é bem menor comparado com os dois anteriores.

Adicionalmente, caso queira evitar a situação exposta pelo @WilliamNovak

Por experiencia própria, se for usar campo disabled, esconde ele e coloca um texto no mesmo formato que a label. Já ouvi muito usuário falando "o sistema não funciona, não dá pra editar a [...] do campo".

O comentário está correto porque, se mal empregado e dependendo do público alvo, pode ser inconveniente e uma melhor opção é evitar o uso de um simples readonly. Caso utilize, é recomendável formatar visualmente com CSS para que não dê a impressão de que é um campo editável.

Poderia resolver aplicando uma formatação de uma forma que apresente o campo como desabilitado. Normalmente com uma cor mais opaca ou eliminando as bordas e cor de fundo do input text.

<input type="text" value="foo" id="foo" class="readonly_<?php echo $readonly;?>">

Num CSS deixe já pré-definido

.readonly_0 {
    border:1;
    background-color:#05bbcc;
}
.readonly_1 {
    border:0;
    background-color:#fff; /*na mesma cor do fundo da página*/
}

Poderíamos usar o atributo "disabled" o qual torna o elemento opaco, mas ainda assim poderá ter o problema descrito pelo William.

Há N formas de fazer esses exemplos acima. Saliento que são exemplos com finalidade didática.

Por fim, não há uma regra geral. Cada um define o que for melhor para o seu projeto. Como trata-se de algo visual, a maior preocupação seria com o tipo do usuário. Usuários técnicos não causariam transtornos então um simples readonly e tornando o elemento opaco já resolveria mas quando lida com usuários leigos (não técnicos) poderá ter situações que fazem perder tempo com suporte e atendimento ao usuário.

O ponto principal é criar um design intuitivo. Pensar no UX (user experience). Um design intuitivo eficiente é aquele que nenhum usuário tem dificuldade de entender e nem mesmo precisa de um manual de instruções. E claro que é mais conveniente ainda quando consegue apresentar uma UI eficiente a um custo baixo.

2
  • Não entendi essa sua frase: "Usar o recurso readonly é apenas um jeito conveniente onde não precisamos criar uma condicional para escrever como uma label." Você se refere à renderização do formulário no servidor (por exemplo em PHP, ou outra linguagem dinâmica)? Ou é outra coisa?
    – mgibsonbr
    16/08/2016 às 4:14
  • É isso mesmo pois é mais fácil apenas adicionar "readonly" do que criar uma condicional para evitar escrever como um label em texto puro, fora do "input". Desculpe por escrever assim. Postei meio desleixado. Estava sem tempo. Quando tiver um tempo vou melhorar o que escrevi. 16/08/2016 às 5:58

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 .