Olá desenvolvedores, o tutorial de hoje traz algumas melhorias no layout do sistema de cadastro com qual estamos trabalhando nesta série de tutoriais. Iremos trazer insights importantes sobre usabilidade, habilidade importante para o arsenal de conhecimento do programador.

Entretanto, se você é um profissional dedicado ao back-end, talvez esta conversa não faça muito sentido para você. Mas se você pretende ser um full-stack, então você precisa também dominar conceitos que o auxiliarão no desenvolvimento de interfaces que além de atrativas, são amigáveis para o usuário.

Quando falamos de interface amigável para o usuário, significa que você não está reinventando a roda, mas seguindo princípios já testados que maximizam a satisfação do usuário ao interagir com a sua aplicação.

Assim, estamos falando que principalmente o layout da sua aplicação deve, entre outros aspectos, permitir que o usuário conclua a tarefa com rapidez e eficiência e deve apresentar consistência. Em outras palavras, o usuário não deve se sentir perdido ao interagir com a sua aplicação. Ela, a sua aplicação deverá trazer um layout limpo e conter ainda atalhos e ícones que minimizem a carga de trabalho. E mais, deverá apresentar facilidade de navegação e apoio a seleção de opções.

Ainda em 1993 Jakob Nielsen integrava a usabilidade como um dos parâmetros associados com a aceitabilidade do sistema e atribuiu a ela 5 fatores: intuitividade, eficiência, memorização, erro e satisfação. E de lá para cá isso não mudou.

Mas atente-se Nielsen, diz ainda, “Mesmo os melhores designers produzem produtos de sucesso apenas se seus designs resolverem os problemas certos. Uma interface maravilhosa para os recursos errados falhará”. E o programador deve entender a usabilidade como a diferença entre o sucesso ou o insucesso do sistema.

IDENTIFICANDO O PROJETO

A primeira melhoria que iremos implementar será na tela de acesso ao sistema, onde identificaremos para o usuário de que se trata de um sistema de cunho didático que utiliza tecnologias JSP, Servlet e JDBC.

Assim, na página principal do sistema, a index.jsp, insira um título e um subtítulo centralizados.

E abaixo do campo de acesso ao sistema, como em um rodapé, identificarei que este projeto didático faz parte do curso de Formação Java Web, e o “linkarei”, a página de apresentação do curso, passando a url por meio do href.

E claro, você pode estilizar da forma que achar melhor, alterando a cor da fonte colocando sua própria identificação. Enfim, sua criatividade é o limite.

E por se tratar de um projeto didático, você pode opcionalmente inserir em alguma parte do sistema, o login e senha para quem quiser acessar e brincar com o sistema.

<center><span><b> usuário:</b> admin | <b>senha</b>: admin </span></center>

PÁGINA DE ACESSO AOS CADASTROS

Assim, vamos promover algumas melhorias no layout da página de acesso liberado, desse modo moveremos as imagens que representam os links de acesso as páginas, cadastro de usuário e cadastro de produtos respectivamente para o centro da página. E não apenas isso, é preciso de alguma forma identificar qual imagem refere-se ao cadastro de usuário e qual imagem refere-se ao cadastro de produto.

E lembrando sempre que nosso objetivo deve implicar a facilitação e a navegação do usuário, criaremos desse modo legendas para a imagens.

Para realizar esta ação implementaremos uma tabela onde a primeira que será composta de duas células receberá as imagens. E assim, a segunda linha que também é composta por duas células receberá as legendas

E por fim aplicaremos um padding de 10%. O padding é uma propriedade do CSS usada para gerar espaçamento ao redor do conteúdo de um elemento, dentro de quaisquer bordas definidas.

Veja abaixo o resultado dessa implementação.

CARGA DE TRABALHO E FACILIDADE DE NAVEGAÇÃO

A diminuição da carga de trabalho se dá entre outros fatores pela diminuição da quantidade de cliques necessários para efetuar tarefas recorrentes. Nesse sentido atalhos e ícones são apresentados como boas soluções econômicas. Desse modo as páginas de cadastro já estão em um contexto de usabilidade por apresentarem links para voltarmos ao início ou sairmos da página.

Entretanto a facilidade de navegação é representada por opções que possibilitam uma localização específica. Assim alguns ícones são símbolos conhecidos em qualquer lugar que você vá, e portanto, possuem especificidade em suas significações.

São por estes motivos que nas páginas de cadastro de produto e de cadastro de usuário, que no lugar das palavras de Início e Sair colocaremos ícones que as representam, e imediatamente comunicam o seu significado.

Dependendo da imagem escolhida por você será necessário “setar” os parâmetros de altura e largura. Assim sendo, os parâmetros de altura e largura poderão ser atribuídos por meio das propriedades CSS width e height respectivamente.

Voltando ao contexto de identificação na página de cadastro de produtos, especificamente abaixo do cadastro onde os produtos estão sendo listados, utilize a tag caption para atribuir o título “Lista de produtos” a tabela. O mesmo procedimento deverá ser realizado na página cadastro de usuários.

<table>
<caption>Lista de produtos</caption>
...
</table>

EM POUCAS PALAVRAS

E com estas poucas modificações que representam importantes melhorias no layout do sistema aprofundamos um pouco mais nos conceitos de usabilidade, tão essenciais no dia a dia do programador. As soluções desenvolvidas por nós devem na perspectiva do usuário serem fáceis de usar, eficientes e agradáveis.

A usabilidade pode representar ainda uma redução com o custo do suporte, veja essa história. “Na Microsoft durante vários anos a funcionalidade de impressão de mala direta do Word for Windows gerava uma grande quantidade de ligações demoradas ao serviço do suporte (média de 45 minutos). Como resultado de testes de usabilidade e outras técnicas, a interface para o usuário dessa funcionalidade foi reajustada. Na versão seguinte a quantidade de ligações para o suporte caiu drasticamente. Bom eu fico por aqui e nós nos vemos no próximo tutorial”.