Artigo Java Magazine 38 - Interfaces Gráficas com Qualidade: parte 1

Interfaces Gráficas com Qualidade

Parte 1: Conceitos e Técnicas Fundamentais, e a API JGoodies Forms

Saiba como projetar interfaces gráficas eficazes que facilitam a vida dos usuários, e como implementá-las utilizando a API Forms do JGoodies

O projeto de interfaces gráficas eficientes exige mais do que conhecimento sobre componentes visuais ou outras questões relacionadas à tecnologia. São detalhes mais humanos que fazem a diferença, e que precisam ser compreendidos antes mesmo de se digitar qualquer linha de código. Os efeitos que cada elemento visual produz sobre nossos olhos revelam detalhes que complementam o significado das informações e auxiliam o usuário a entender o conteúdo da imagem observada.

Este artigo apresenta a primeira parte de uma série voltada para a qualidade das interfaces gráficas, apresentando técnicas fundamentais para um bom projeto visual. Começaremos analisando a importância do projeto visual para o desenvolvimento de GUIs (Graphic User Interfaces; interfaces gráficas com o usuário). Em seguida, abordaremos erros comuns e técnicas de organização de interfaces. E veremos como utilizar a API JGoodies Forms para montar telas eficientes e com poucas linhas de código.

Técnicas de projeto visual

Por ser um conceito muito abstrato, qualquer julgamento sobre a qualidade de um software é difícil. Embora existam normas e processos de engenharia de software voltados para esse propósito, a tendência de um usuário é determinar a qualidade de algo que não conhece baseando-se naquilo que vê e sente. Assim, a interface gráfica de um sistema conta muito para uma boa impressão.

Vamos começar explorando algumas questões fundamentais que precisam estar claras para qualquer equipe envolvida na criação de GUIs. A importância dessas questões está relacionada ao papel do projeto visual no desenvolvimento e o momento em que ele deve ser aplicado.

Em primeiro lugar, projeto visual não é uma tarefa que pode ser deixada para depois. Este é um erro comum cometido em muitos projetos e que ainda precisa ser combatido. Para ser eficaz, o projeto visual precisa estar bem integrado ao ciclo de vida de desenvolvimento, permitindo que interfaces gráficas possam ser elaboradas e melhoradas conforme o entendimento do problema avança ao longo do tempo.

É comum vermos empresas que deixam o projeto e a implementação de GUIs apenas nas mãos de programadores sem experiência na criação de interfaces, e sem apoio de designers e outros especialistas em projeto visual. O resultado dessa decisão freqüentemente são sistemas com telas complexas e pouco intuitivas, que às vezes confundem seus usuários por refletirem diretamente as entidades de negócio por trás do sistema (EJBs, tabelas etc.). Além disso, o desconhecimento de princípios de criação de interfaces ou a simples vontade de embelezar muito a tela podem resultar em interfaces pobres e excessivamente poluídas.

A segunda questão que precisamos destacar é a suposição incorreta de que o simples uso de componentes e APIs (como os do Swing e AWT) é suficiente para se alcançar os benefícios de uma boa apresentação. A forma com que essas peças são unidas é tão importante quanto cada peça inidual. É necessário ir além e entender a influência e efeitos que diferentes composições causam numa GUI.

Começaremos nosso estudo analisando alguns dos principais erros cometidos no projeto de GUIs. Em seguida veremos técnicas de organização de informações, redução de poluição gráfica e implementação com a API JGoodies Forms.

Erros comuns em interfaces gráficas

Uma técnica de aprendizado muito eficiente é a analise de erros comuns cometidos no desenvolvimento de interfaces gráficas. Ilustraremos esta técnica com um exemplo – veja a Figura 1 – que resume alguns problemas que precisam ser sempre evitados. Você dificilmente encontrará todos esses problemas juntos na mesma tela de um sistema real, mas a freqüência com que cada um deles aparece separadamente é bastante alta.

Figura 1. Tela de exemplo que ilustra um projeto visual com problemas.

Vejamos os erros. Comece observando os componentes JTextField desalinhados na parte superior esquerda da tela. As suas posições horizontais variam de acordo com o tamanho de cada JLabel. Esse problema de alinhar os JLabels, mas não os componentes relacionados, torna a leitura dos valores muito mais difícil do que poderia ser.

Agora observe o grupo “Medidas” e repare como os JTextFields estão colados, enquanto sobra muito espaço ao redor. Observe ainda que a base dos textos dos JLabels não está alinhada com a base dos textos dos JTextFields, o que também atrapalha a leitura dos valores.

Descendo mais o olho, percebemos que a parte inferior da tela está dentro de uma borda interna e ainda contém subgrupos com bordas e títulos. A borda interna cria uma dimensão desnecessária que polui mais do que realmente enfatiza aquela área. Já a borda dos subgrupos distrai os olhos e cria uma separação visual pouco eficaz entre os elementos. A presença de bordas aninhadas normalmente revela um projeto visual pobre. Veremos como combater esse problema na seção “Redução de poluição gráfica” mais adiante.

Os problemas ainda não acabaram. Repare a repetição desnecessária da palavra “Controle” tanto no label da JComboBox quanto no título do subgrupo. Além disso, existem duas JTextAreas, uma com borda 3D e outra não. É uma inconsistência comum normalmente causada (por exemplo) pelo fato de desenvolvedores diferentes alterarem a mesma tela, sendo que um adicionou o recurso e o outro, sem notar a presença da borda, deixou de seguir o mesmo estilo.

Para terminar nossa análise, note que o subgrupo “Comandos” não está alinhado com o resto dos componentes e que não ocupa toda a largura disponível na tela, deixando de aproveitar um espaço valioso. Compare ainda o tamanho dos botões existentes, e verifique que não existe um padrão consistente.

Cuidados com redimensionamento

Algumas armadilhas ainda aguardam o desenvolvedor desatento. Um teste que não podemos deixar de fazer no desenvolvimento de interfaces é observar como a janela se comporta quando é redimensionada.

O teste de redimensionamento é importante em GUIs criadas com toolkits como AWT, Swing e SWT, porque estes utilizam gerenciadores de layout que formatam e posicionam cada componente seguindo regras próprias que não são totalmente explicitadas pela GUI.

A idéia, ao fazer o redimensionamento, é favorecer sempre aqueles componentes que podem crescer sem deixar a tela desproporcional, como JTables, JTextAreas, JTrees, JLists etc. Caso uma janela não possua componentes deste tipo, podemos sempre pensar em proibir o redimensionamento através do método