Olá desenvolvedores, iremos adicionar ícones ao seu projeto jsp. No tutorial passado estilizamos a nossa aplicação adicionando um layout css a ele. Dessa forma, tornamos nossas páginas mais agradáveis visualmente. Hoje iremos adicionar ícones que substituirão as palavras “Excluir” e “Editar”, é um apenas um detalhe, mas que pode representar uma grande diferença na forma com o usuário interagirá com o nosso sistema.

Em desenvolvimento de softwares e aplicações, sejam desktop, web ou mobile existe um campo de estudo responsável por definir as melhores práticas para atender as necessidades do usuário, é o campo da usabilidade. Assim, usabilidade é maneira como um dispositivo ou mesmo uma funcionalidade se comporta para cumprir seu objetivo.

E o que faz uma aplicação ser considerada usável? A simplicidade e a praticidade, ir direto ao ponto, ao mesmo tempo em que entrega uma experiência satisfatória para o usuário. Este último é o que hoje é chamado de UX – User Experience ou experiência do usuário. Desse modo ao desenvolver uma aplicação é preciso levar em consideração como o usuário irá interagir com ela e como facilitar essa interação, bem que tipo de experiência ele terá ao interagir com ela.

É neste contexto que se insere em nosso projeto desenvolvido em JSP. Ao adicionar botões no lugar das palavras, objetivamos tornar a experiência de utilizar nossa aplicação mais agradável, intuitiva, simples e direta.

DOWNLOAD DOS ÍCONES

Para fazer o download dos ícones acesse a página flaticon, onde você encontrará uma diversidade de ícones para utilizar em seus projetos. É muito simples de usar, você precisará criar uma conta, ou logar com o usuário do twitter ou gmail. Logado na página, digite no campo de busca o nome do ícone desejado, como por exemplo, “Delete” e/ou “Edit”.

Ao clicar sobre o ícone desejado você poderá escolher também a cor e a dimensão do ícone.

Para adicioná-lo, basta substituir, por exemplo, a palavra “Editar” pela linha de código abaixo. Para inserir uma imagem utiliza-se a tag <img>, por meio do qual o caminho é apontado pela propriedade src. As propriedades width e height definem respectivamente os valores de largura e altura, e o title, exibe o valor sempre que o mouse passar por cima da imagem.

O mesmo procedimento deverá ser aplicado para inserir a imagem em “Excluir”, mudando apenas o nome do arquivo.

<img src="resources/_IMG/editar.png" title="Editar" width="21px" height="20px;">

APRIMORANDO A TABELA

Note que a tabela não exibe nenhum campo identificando a coluna, desse modo, como a coluna da senha ainda está visível, podemos facilmente confundir login e senha. Assim, seria interessante identificar os campos, e para este fim o html traz a tag <th></th> que define o cabeçalho da tabela. Posicione a tag acima do laço de repetição foreach.

EM POUCAS PALAVRAS

O tutorial de hoje trouxe um pouco de conceitos de usabilidade e User Experience ao projeto jsp, dois assuntos que abrangem uma enorme gama de conhecimento, mas que vale a pena ser explorado. Com estes conhecimentos você se tornará ainda mais capaz de desenvolver soluções que resolvam o problema do usuário sem causar um novo problema, como o de uma aplicação pouco usável e nada intuitiva.

Inserimos ainda dois ícones substituindo as palavras que representam as ações de excluir e editar, melhorando consideravelmente a experiência da nossa aplicação. Outra melhoria implementada foi a inserir a tag que define um cabeçalho para a tabela, de forma a identificar os campos.

Espero que tenham compreendido a importância de considerarmos como será a experiência do usuário com a nossa aplicação, bem como se dará a forma como ele interagirá com ela. Estes detalhes podem significar o fracasso ou o sucesso da sua aplicação. Eu fico por aqui e nós nos vemos no próximo tutorial.