Nossa Márcio que título maluco!!

Pois é, foi o melhor que encontrei :) mas logo o título fará sentido. Felizmente, sempre trabalhei com Web e Windows, apesar de não ter tanto talento como designer, adoro estudar padrões para UI, o que é certo, errado, o que fazer e o que não fazer.

É claro que não vou falar que todos os sites ou todas aplicações web seguem o que vou mostrar, mas felizmente a maioria das “bem feitas” seguem isso. Vou esquecer sites normais, e vou focar em aplicações web, só para facilitar.

O item que estou falando é tão simples e básico, que todo mundo deveria seguir, que é alinhar corretamente os itens de um formulário, é tão comum quando vamos desenvolver um layout de site, utilizar grids para definir o espaçamento entre os itens, assim temos um layout organizado e agradável.

Quem liga para isso Márcio? Ahhh ninguém, é só mais uma prática boba que o pessoal segue. Todo mundo liga, e liga muito. Mesmo que mesmo sem perceber, um formulário bem organizado ajuda qualquer usuário a encontrar o que ele quer.

Quem nunca viu algum profissional falar algo do tipo, “meu cliente não acha nada, meu cliente não procura nada direito”, é tão fácil culpar o cliente, afinal “eu” fiz tal coisa, então essa coisa está “perfeita”.

Mas eu acho que isso é meio cultural, já cansei de passar estudos de como criar um layout agradável para formulários para programadores, o que eles fazem? Apertam delete no e-mail, afinal isso é trabalho do “designer”, eu acho isso um absurdo, não estou pedindo para algum programador de WinApps aprender como combinar cores, como utilizar o Photoshop, nada disso, mas só para prestar atenção em como organizar um formulário.

Chega de falar, e vamos ver dois exemplos, com Windows Forms mesmo, que é o que a maioria do pessoal utiliza :).

Padrão macarronada, nem sei se alguém já deu esse nome, mas falei ontem em um curso e gostei :).

LayoutMacarrao

Ok, a tela feita, funciona, mas eu acho horrível olhar telas dessa forma, podemos facilmente organizar da seguinte forma.

LayoutOrganizado

Olhando a imagem acima, sei onde tudo começa e acaba, tenho padrão de espaçamento entre os campos do formulário, joguei o Label acima dos campos só para facilitar a visualização, e prefiro assim, mas com o Label a esquerda funciona da mesma forma.

Quando eu trabalhava com o Heitor Althmann, é família de geek =D, ele é designer, nós criamos alguns padrões para formulários, na época definidos por CSS automaticamente, mas ainda utilizo o padrão com sucesso em aplicações para Windows. Segue abaixo a lista de possibilidades com o padrão.

Opções

Espero que gostem, e que utilizem o padrão, e que UI seja uma preocupação também de quem desenvolve aplicações para Windows, afinal, aquela tela com 100 campos, totalmente desorganizados, deixa qualquer usuário confuso.

Abraços.

  • http://rafaelamorim.co.cc Rafael Amorim

    Bacana o tema!

    Concordo plenamente que desenvolvedores devem se preocupar com a aparencia dos seus formularios sim!

    abraço!

    @faelAmorim

  • http://araimundo.blogspot.com Ari C. Raimundo

    Olá Márcio,

    Muito interessante seu post.

    Apesar de não ser designer, também me preocupo bastante com a organização dos controles em tela.

    É imensa a quantidade de desenvolvedores que não dá bola para esse tipo de coisa. É bem comum encontrarmos telas com controles que possuem tamanho de fontes diferentes, que não estão alinhados, que não informam corretamente o que a operação realiza e muitos outros.

    Concordo com você que a organização com labels acima dos TextBox ficou bem melhor.

    Um abraço !

  • http://weblogs.asp.net/andrenobre Andre Nobre

    Olá Márcio,
    totalmente válido. A interface influencia diretamente na utilização do sistema e no seu sucesso. Conceitos de usabilidade, arquitetura da informação em geral devem ser aplicados tanto por designers quanto por desenvolvedores (claro que em diferentes níveis).

    Abraços.

  • http://Website Tércio Lemos Padilha

    Olá Márcio,

    A um tempo atrás me reuni com o cliente e ele reclamou justamente sobre o layout “macarrão”, e passei a usar na aplicação dele o formato que você utiliza, porém tive problemas quanto a layout em resoluções de telas diferentes, me diz uma coisa você ainda tem o CSS e o exemplo de como utilizava nas suas tabelas ? abraço e parabéns pelo blog.

    • Márcio Fábio Althmann

      Olá Tércio tudo bem?
      Infelizmente não possuo mais o que eu montei na época, não trabalho mais na mesma empresa.

      Abraços.

  • Oops Twitter isnt working at the moment