Olá amigos desenvolvedores. Volto a falar sobre design de aplicações. Desta vez, três dicas curtas – ou provocações – onde compartilho algumas das minhas práticas e questionamentos.

Eu não sou exatamente um designer. Muito longe disso. Mas tenho visto que o sucesso da Apple e da Microsoft, além de sites, empresas de eletrônicos, carros e tantos outros, se dá em grande parte pelo design de seus produtos reais e virtuais.

Ícones em lugar de botões

Depois de algum tempo e reflexão, decidi que não vou usar mais botões de comando em minhas aplicações. Apesar de muito práticos em termos de programação, suas limitações para design me levaram a trocá-los por imagens.

Com os botões que todo mundo conhece.

Com ícones de uma biblioteca da internet

Algo que as pessoas já se acostumaram é clicar em ícones. No entanto, se o mouse não muda, ele tem um momento de hesitação, que temos de contornar. Poderíamos solucionar isto com algum comando de mudança de ícone ou chamada de Api, mas uma forma mais fácil é definir um hyperlink “falso”.

Como colocar ícones em lugar de botões:

Crie uma macro sem nenhum comando para servir como link genérico. Eu chamo esta macro de “Comando”, porque se me esquecer de definir o texto da dica, o sistema apresenta o texto genérico “Comando”, que não diz nada mas é melhor que “Macro1”, por exemplo.

Acrescente a imagem do ícone ao formulário. Pode ser pelo comando inserir imagem do menu ou colando a imagem diretamente do clipboard.

Defina a propriedade hyperlink da imagem para a macro “Comando”. Naturalmente, se você programa com macros, pode usar a macro de ação na propriedade hyperlink ou no evento ao clicar.

Daí pra frente é só uma questão de programar normalmente os eventos.

Outra prática que eu uso é de deixar textos sobre os ícones. Por mais que tenhamos tooltips ou que os ícones sejam auto-explicativos, este é um caso que recomendo deixar os textos, reduzindo assim o impacto de uma nova ferramenta e sua curva de aprendizado. Ao final da aplicação você diz “Tá vendo como é simples? É dá para aprender sozinho.” e o cliente confirma sorrindo. Ponto pra nós.

Delimitadores de Área

Além do alinhamento dos controles, outro elemento importante na definição do seu layout são os painéis que delimitam e agrupam os controles conforme o assunto que tratam.

Aqui mais uma vez podemos usar elementos gráficos para compor telas que tenham maior apelo visual, seja para um maior impacto ou para uma organização mais suave.

Agrupamento no melhor estilo Windows 3.1

Dois quadros e dois ícones a mais e o formulário ganha personalidade.

Não tem muito segredo: Crie em seu programa gráfico predileto (pode ser até o PowerPoint) um retângulo com bordas arredondadas, acrescente um ícone e pronto: telinhas de cadastro, agora com atitude.

Telas de login impactantes

Você nunca terá uma segunda chance de causar uma primeira boa impressão. Então a tela inicial do sistema tem de ser bonita, algo como as telas de splash que vemos em aplicações como o Office e o Visual Studio.

Caixas de diálogo personalizadas

Ainda neste questionamento de usar ou não os padrões sugeridos, que tal dar um toque de personalidade e de humor também.

Um exemplo atual de sistemas que desenvolvi, o uso da imagem de um mímico, tirada de um banco de imagens, para dar um tom cômico a algumas situações do sistema.

Que tal provocar um sorriso no cliente enquanto ele espera o envio das mensagens?

Esta aqui eu coloco em aplicações em fase de desenvolvimento ou testes, retirando depois que o projeto vai ao ar pra valer.

Considerações sobre performance, produtividade e estilo

É importante entender que inserir objetos gráficos em sua aplicação faz com que ela dê um salto de tamanho e fazendo que o tempo de abertura do formulário e a memória necessária também aumentem.

Considere antes de sair embelezando suas aplicações o quanto a performance é relevante e qual o nível dos equipamentos e performance da rede onde sua aplicação será utilizada. Porque um sistema bonito mas lento como uma carroça, não serve.

Outro ponto a considerar é se vale a pena reformular uma aplicação existente. Que cliente vai pagar a mais para ter uma aplicação mais bonita? O visual de sua aplicação se não vier agregado a modificações que realmente tornem a aplicação mais prática para quem usa. Mais adequado é reservar um tempo para criar um repertório básico, melhorar o seu repertório existente ou aplicar as mudanças de estilo em um projeto novo.

Finalmente, é sempre importante uma auto-observação: o quanto você está disposto a estudar design e formar o seu estilo de diagramação? Conheço muitas pessoas que, parecidos com Henry Ford, dizem que o cliente pode escolher qualquer cor para seu sistema, desde que seja cinza. E pode muito bem fazer sucesso assim, porque há quem prefira que sua aplicação tenha performance máxima com um custo e prazo de desenvolvimento tão pequenos quanto possível.

Se você se considera muito técnico e prefere não gastar em estudo de design tempo precioso que você pode dedicar a desvendar alguma obscura chamada ao Kernel do sistema operacional, mas mesmo assim se interessa pelo design de aplicações, sempre há a possibilidade de cortar caminho a partir de estudos realizados por outros. E antes que alguém se apresse e diga que estou defendendo a pirataria, esclareço: existem vários profissionais de design que podem ser contratados (ou incluídos em seu orçamento) para cuidar dos aspectos visuais da sua aplicação, bibliotecas de ícones e templates de sites que podem ser adaptados para sua aplicação.

Onde obter material para as aplicações?

Bom, de um modo geral, uma busca no Google pode apontar excelentes sites e fornecedores de imagens, ícones e templates para você aplicar em suas aplicações, mas destaco alguns:

• www.dreamstime.com – banco de imagens, que custam por volta de 50 centavos de dólar.
• www.boxedart.com – site que com uma assinatura dá direito a uma extensa bibioteca de elementos gráficos.
• http://iconkits.com/vip – Com uma assinatura de aproximadamente 20 dólares você acessa uma enorme biblioteca de ícones.

Boa sorte em seus projetos, até a próxima!

Links relacionados

http://www.sistemasemaccess.com.br