7

Para facilitar o desenvolvimento de formulários responsivos é muito comum colocarmos 100% de largura nos inputs, e controlarmos seu tamanho através da largura de uma div como container, essa técnica ajuda na hora de manipular as media queries destes inputs. Isto pode ser um problema quando temos rótulos maiores que o dado de entrada por exemplo. A forma mais comum de se fazer isso é conforme html abaixo.

<!-- html-->
<div class="form-control classe-controladora">
    <label>Endereço</label>
    <input type="text">
</div>

<!-- css-->
label, input{
  display: block;
  width: 100%;
}    
.classe-controladora{
  width: 30%;
}

Porém seguindo os princípios de affordance, um input deve ter a largura ideal para os dados que podem ser inseridos. Se o máximo é 10 caracteres, deveria ter a larura de 10 caracteres . Sendo assim quais as alternativas melhor forma de tratar a largura de inputs, Usando o atributo size? usando css?

Penso que a um primeiro momento, a classe-controladora deveria talvez manipular somente o input, o problema seria em um sistema muito grandes onde a variação de larguras seria de difícil manutenção (principalmente se tratarmos o responsivo)

 .classe-controladora input{
     width: 30%
 }

-- Edit --

A dúvida aqui é como seria possível equilibrar esses conceitos, pois se optarmos apenas pelo mais fácil, o affordance é prejudicado. Se fizermos todos os inputs customizados para seu conteúdo, a manutenção ficaria muito complicada.

5
  • Muito boa pergunta, eu daria + 1, mas já esgotei os votos hoje :) Commented 30/03/2017 às 20:13
  • "Porém seguindo os princípios de affordance, um input deve ter a largura ideal para os dados que podem ser inseridos.". Apesar de concordar que o input deva idealmente ter o tamanho dos dados de entrada, isso não é affordance. Independentemente disso, ainda assim eu tiraria a tag "ux" da sua pergunta porque ela trata da programação da largura, e não da sua justificativa/objetivo (na verdade eu já fiz uma edição tirando - se não concordar, é só voltar). Commented 26/04/2017 às 23:51
  • Affordance significa reconhecimento, logo reconhecer que tipo de informação deve ser digitado através tamanho do input também é affordance e assim tratando também de experiência do usuário. Mas valeu. Commented 8/05/2017 às 11:17
  • Você voltou a tag ux. Ok. Mas note que a sua pergunta não questiona se definir o tamanho de um input conforme o conteúdo máximo é o certo ou não. Vc assume que é o certo (o que eu concordo, aliás), e pergunta como implementar. A escolha de deixar a tag é essencialmente sua, mas eu insisto que ela faz pouquíssimo sentido no escopo atual (de implementação) da pergunta. Boa sorte. Commented 30/05/2017 às 16:11
  • Sobre a affordance, você tem razão, desculpe. Apesar de não ter relação direta com ações possíveis sobre um input, o tamanho tem certamente alguma relação com o "quanto" pode ser digitado. :) Commented 30/05/2017 às 16:15

1 Resposta 1

1

Acho que é necessário equilibrar os conceitos de affordance, responsividade, economia (evitar código desnecessário) e escalabilidade (na manutenção e expansão do código).

Você deve priorizar as coisas e se precisar, esticar as regras (bend the rules), para alcançar este equilíbrio.

Estou sempre buscando padrões e metodologias que melhorem o desenvolvimento, debug, a manutenção, mas ao adotar, tomo o cuidado de não me limitar ao padrão quando ele prejudica a experiência do usuário.

Tomando o exemplo que você deu, mesmo que um campo tenha um numero máximo de caracteres, se ele estiver entre outros com comprimentos diferentes e o programador insistir em limitar o tamanho dos campos, de acordo, vai acabar com uma interface desigual. Vale a pena?

Finalmente, se for pra fazer, daria preferencia ao CSS, já que facilitaria manutenção e reuso de código.

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 .