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

Esse artigo faz parte da revista Java Magazine edição 38. Clique aqui para ler todos os artigos desta edição

MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: left" align=left>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 individual. É 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 setResizable(false) da classe Frame.

A Figura 2 mostra esse problema com a janela do nosso exemplo. Repare que o subgrupo “Controle” foi favorecido sem necessidade (o que deixou o botão “Editar” grande demais). Já o subgrupo “Comandos” permaneceu intacto e poderia ter aproveitado o espaço, por conter um JTextArea. Além disso, vários espaços vazios surgiram na tela, reduzindo o relacionamento visual entre os componentes.

Figura 2. Problemas de redimensionamento na tela de exemplo.

Técnicas de organização visual

Agora que já vimos um pouco sobre o que não fazer em interfaces gráficas, podemos discutir alguns princípios gerais para a boa organização e estruturação visual. As técnicas que abordaremos aqui estão divididas em três categorias: Simetria e Balanceamento, Alinhamento e Relacionamentos Visuais e Formatação com Espaços Vazios.

É praticamente impossível conseguir elaborar GUIs eficazes sem o uso dessas técnicas. Para nossa sorte, são técnicas simples, e o domínio vem com pouco tempo de prática. Esses princípios fazem parte de disciplinas como design gráfico e ergonomia, além de serem apoiados pela área de psicologia cognitiva. Portanto, são muito valiosos para causar uma boa impressão em qualquer trabalho, mesmo fora da área de software.

Simetria e balanceamento

Simetria é uma propriedade que resulta da harmonia e equilíbrio de uma estrutura. Essa é uma das propriedades mais importantes, por ser facilmente reconhecida e agradável aos nossos olhos. Sempre que uma forma é repetida – seja por translação, rotação ou reflexão – cria-se uma nova imagem simétrica que compartilha características semelhantes. No mundo dos símbolos visuais, as figuras mais memoráveis normalmente são muito simétricas, como a estrela, a seta, a cruz e o yin-yang. ...