primefaces_

Interao Homem-Mquina, Usabilidade e

Ergonomia de Software

conceitos e
prtica com

PrimeFaces

IHM
C

om a crescente informatizao dos processos nas

organizaes, cada vez mais necessrio o desenvolvimento de solues que auxiliem os usurios
em suas atividades.
Devido aos inmeros softwares, que hoje so
ferramentas para o desempenho das mais diversas
atividades do cotidiano, a diminuio da curva de
aprendizado e aumento da produtividade no uso garantem destaque soluo utilizada.
Assim, no desenvolvimento de solues de software deve-se ter a preocupao no somente em fazer cumprir as funcionalidades, mas tambm com os
aspectos de interao homem-mquina, usabilidade
e ergonomia de software. Esses auxiliam nos processos de aprendizado, memorizao e diminuio da

/ 58

taxa de erros.
Com o desenvolvimento pautado nos aspectos
citados, alm da maior agilidade nos processos, reduo de erros e satisfao dos usurios, tambm se
pode obter uma reduo de uso de recursos, pois um
erro causa reprocessamento, por exemplo, em uma
arquitetura cliente-servidor, o servidor penalizado
com execues repetidas, consumindo mais recursos.
Este artigo apresentar os resultados obtidos
com a utilizao de interfaces com e sem recomendaes de interao homem-mquina, usabilidade e
ergonomia de software utilizando recursos disponveis no framework Primefaces 3.0, compatvel com
JSF 2.1 e tcnicas discutidas na literatura.

Alex Corra de Souza | alex.souza18@fatec.sp.gov.br

Formado em Informtica para Negcios pela FATEC de So Jos do Rio Preto.

Sylvio Barbon Junior | sbarbonjr@gmail.com

Formado em Engenharia, Cincia da Computao, mestre e doutor em Fsica Computacional IFSC/USP. Possui certificao
SCJP, docente na Universidade do Estado de Minas Gerais (UEMG) e na FATEC de So Jos do Rio Preto.

Este artigo descreve a utilizao das diretrizes de interao homem-mquina (IHM), usabilidade e ergonomia de software em sistemas
empresariais, mais precisamente em um ambiente hospitalar. Tambm sero apresentados os resultados obtidos com o experimento
realizado com interfaces padronizadas e no-padronizadas segundo a IHM, sendo implementado com a tecnologia Primefaces 3.0
para JavaServer Faces e seus componentes otimizados para a IHM
adequada.

Interao Homem-Mquina

A Interao Homem-Mquina IHC trata do dilogo entre o usurio e o sistema. IHC a disciplina
que se ocupa com o design, avaliao e implementao de sistemas computacionais interativos para
uso humano e com o estudo dos fenmenos ao seu
redor. Desenvolver sistemas focando na interao
homem-mquina poder melhorar o desempenho de
usurios no-rotineiros e com pouco conhecimento em informtica. IHC a disciplina que se ocupa
com o design, avaliao e implementao de sistemas computacionais interativos para uso humano
e com o estudo dos fenmenos ao seu redor (ACM
SIGCHI,1992).
Para um desenvolvimento pautado em uma melhor interao homem-mquina, voltado percepo
humana, o desenvolvedor deve-se atentar para que a
soluo na disponibilizao da informao seja:
Legvel: a informao deve ser apresentada de
uma forma que o usurio consiga visualizar e
entender;
Distinguvel: a informao deve ser apresentada para que o usurio possa distinguir uma
informao da outra;
Compreensvel: a informao deve ser apresentada de forma acessvel e em um vocabul-

rio que o usurio conhea;

Estruturada: a informao deve ser estruturada para facilitar a compreenso do usurio. A
forma correta seria a lgica e a sequncia da
tarefa realizada e conhecida pelo usurio.

Usabilidade de Software

O conceito de Usabilidade de Software refere-se

ao de desenvolver sistemas, nos quais os usurios se deparem com facilidade em utiliz-lo.
A usabilidade um atributo de qualidade relacionado facilidade de uso de algo. Mais especificamente, refere-se rapidez com que os usurios
podem aprender a usar alguma coisa, a eficincia
deles ao us-la, o quanto lembram daquilo, seu grau
de propenso a erros, e o quanto gostam de utiliz-la. Se as pessoas no puderem ou no utilizarem um
recurso, ele pode muito bem no existir (NIELSEN;
LORANJE, 2007).
De acordo com a NBR 9241-11, a definio de
usabilidade envolve trs aspectos separados: efetividade, eficincia e satisfao, a saber:
Efetividade: objetivos ou sub-objetivos do
usurio quanto a acurcia e completude com
que os objetivos podem ser alcanados;
Eficincia: a medida de eficincia est relacio59 \

Figura 1. Tipos de Message, exibidos via p:message.

nada ao nvel de eficcia alcanada ao gasto de

recursos para realizar esta atividade;
Satisfao: quando o usurio est livre de
desconforto na realizao de suas atividades.
Quando se inicia o desenvolvimento centralizado
no usurio, a preocupao inicia com usurios e suas
necessidades ao invs de se preocupar com a tecnologia. O correto seria realizar uma anlise de requisitos de perfil de usurio, para que se saiba exatamente
o que o usurio necessita e qual a sua rotina, pois a
complexidade est na tarefa e no no sistema.

Ergonomia de Software

te de exibio) de um sistema para que o mesmo se

torne fcil de ser utilizado pelo usurio.
Pode-se dizer que a ergonomia est na origem
da usabilidade, pois ela visa proporcionar eficcia e
eficincia, alm do bem-estar e sade do usurio, por
meio da adaptao do trabalho ao homem. Isto significa que seu objetivo garantir que sistemas e dispositivos estejam adaptados maneira como o usurio
pensa, comporta-se e trabalha e, assim, proporcionem usabilidade (CYBIS ET.AL. 2007).
Falando especificamente de software, a ergonomia de software a cincia que estuda conforto,
utilizao, organizao e documentao do software.
Seu objetivo propiciar uma utilizao fcil e a otimizao do trabalho do usurio junto ao computador.
A ergonomia de software aborda os seguintes aspectos:
apresentao de telas;
dilogos;
ferramentas de trabalho;
menus;
documentao;
tcnicas de arquivos;
tcnicas de otimizao;
auxlio (help).

Componentes e primefaces e
usabilidade

Ergonomia de Software o conceito referente

Para o desenvolvimento do experimento foi deorganizao dos componentes na tela (ou componen- senvolvida uma interface composta pelos componentes InputMask, Focus e Message, componentes nativos do Primefaces.
O InputMask um componente que refora que
javax.faces.
javax.faces.convert.
a entrada necessria tem um formato definido e obriBigDecimal
BigDecimalConverter
gatrio. Sua utilizao traz benefcios tanto para o
usurio quanto para o sistema, pois j demonstra
javax.faces.
javax.faces.convert.
qual o formato a informao deve ser inserida.
BigInteger
BigIntegerConvert
Exemplo:

javax.faces.Boolean

javax.faces.convert.
BooleanConverter

javax.faces.Byte

javax.faces.convert.
ByteConverter

javax.faces.Character

javax.faces.convert.
CharacterConverter

javax.faces.
DateTime

javax.faces.convert.
DateTimeConverter

javax.faces.Double

javax.faces.
convertDoubleConverter

javax.faces.float

javax.faces.convert.
FloatConverter

Tabela 1. Conversores e classes de implementao.

/ 60

<p:inputMask mask= 999.999>

O Focus um componente utilitrio que torna fcil
o gerenciamento do foco de um elemento em uma
pgina.
O Focus por padro vai encontrar o primeiro
componente de entrada habilitado e visvel na pgina
e aplicar o foco. Este componente de entrada pode
ser qualquer elemento de entrada de informao.
Outra caracterstica importante e muito til que
o Focus possui que quando a validao detectar
uma falha, o campo recebe um foco. Um exemplo o
campo Pronturio, utilizado no experimento que ser
discutido em breve, que de preenchimento obrigatrio, caso o usurio tente finalizar o cadastro sem
preencher este campo, ser gerado um erro na validao e o foco ser definido para o ele.
Para definir explicitamente o foco em algum

componente, deve-se utilizar o atributo for, apontanA Listagem 2 apresenta um exemplo de converdo para o id daquele que receber o focus. Exemplo: so automtica (ou implcita), em que o atributo RegistroUsuario.usuario.idade representa uma proprie<p:focus for= Nome/>
dade do tipo int e ser inserido como uma String via
O componente Message do Primefaces descende di- formulrio HTML. Neste exemplo o JSF adotou um
retamente da especificao JSF (disponvel a partir conversor padro, no entanto possvel implementar
da verso 1.1), utilizado para auxiliar o usurio infor- um especfico usando o <f:converter/>, como mostramando-o sobre o resultado das operaes. Os tipos do na Listagem 3.
de mensagem so separados por grau de severidade, sendo eles: Informao (SEVERITY_INFO), Aviso
(SEVERITY_WARN), Erro (SEVERITY_ERROR) e Fatal
(SEVERITY_FATAL), descritos na figura 1. Quando
uma mensagem de no-conformidade for disparada,
possvel auxiliar o usurio na resoluo do erro com
uma roupagem do Primefaces adequada a cada severidade.
Este componente possui trs modos de exibio
diferentes:
Texto: s a mensagem exibida.
cone: s exibida a gravidade do erro e a mensagem visvel como uma dica.
Ambos (default): tanto o cone quanto a mensagem so exibidas.
Como exemplo de utilizao apresentado um
p:message associado a um p:inputMask, que de acordo com o atributo required com o valor true ir exigir
seu preenchimento, presente na Listagem 1.

Listagem 3. Conversor especfico para granularidade

maior usando o <f:converter/> tag.

<h:inputText id=idade value=#{ RegistroUsuario.usuario.

idade }>
<f:converter id=javax.faces.Short/>
</h:inputText>

Outro
conversor
importante

o
<f:convertDateTime/>, que possibilita a garantia
de que as datas estejam no formato adequado, por
exemplo MM/AAAA (ms/ano), sendo que o padro
para formatao o mesmo do java.text.SimpleDataFormat, tradicionalmente utilizado.
Alm de permitir a converso de formatos de
data e hora, o JSF fornece um conversor especial para
lidar com nmeros como porcentagens ou moeda.
Este conversor lida com agrupamento (como vrgula),
nmero de dgitos decimais e smbolos de moeda. A
Listagem 4 apresenta um exemplo para converso de
Listagem 1. Exemplo utilizando <p:inputMask>, moeda.
<p:message> e seus atributos.
Listagem 4. Conversor especial para lidar com
nmeros como porcentagens ou moeda.
<p:inputMask id=Pr mask=999.999 required=true
label=Pronturio/>
<p:message for=mask/>

Converso e validao JSF auxiliando a

usabilidade
Converso

Considerando o ncleo JSF, possvel destacar

alguns facilitadores que auxiliam na usabilidade da
aplicao que so os recursos de converso e validao, disponveis no JSF a partir da verso 1.1.
A converso o processo que assegura que o objeto de um determinado tipo ou conversvel para,
por exemplo, datas e pontos flutuantes. possvel
usar os conversores j existentes ou escrever personalizados. O JSF fornece muitos conversores de dados, conforme a tabela 1, que exibe o conversor e as
classes de implementao correspondentes. Muitas
converses de dados acontecem automaticamente.

Listagem 2. Exemplo de converso implcita.

<h:inputText id=idade value=#{RegistroUsuario.usuario.
idade}/>

<h:inputText id=salario value=#{RegistroUsuario.usuario.

salario}>
<f: convertNumber maxFractionDigits=2
groupingUsed=true currencySymbol=$
maxIntegerDigits=7 type=currency />
</h:inputText>

possvel personalizar conversores, sendo necessrio converter os dados do campo do formulrio em um objeto de valor, por exemplo, String para
NumeroTelefone ou String para CodigoProduto. Para
tal necessrio implementar a interface javax.faces.
convert.Converter e desenvolver os mtodos getAsObject e getAsString como desejar, lembrando que
faces-config.xml e verses mais recentes (aps verso
2) basta acrescentar a anotao @FacesConverter(N
omeDoSeuConverter).

Validao

A validao garante que os dados do aplicativo

contenham o valor esperado ou o contedo esteja
presente em um intervalo especfico.
Existem algumas formas de validao dentro JSF:
componentes de validao padro;
aplicativo de validao;
61 \

 componentes personalizados de validao (implementam o interface Validator).

Os componentes de validao fornecidos pelo JSF
podem ser:
1. DoubleRangeValidator: o dado deve ser do tipo
numrico com ponto flutuante e estar no intervalo especificado pelos valores mnimo e/ou
mximo.
2. LongRangeValidator: o dado deve ser do tipo
numrico e conversvel para Long; deve estar
no intervalo especificado pelos valores mnimos e/ou mximo.
3. LengthValidator: tipo deve ser string; o comprimento deve estar no intervalo especificado
pelos valores mnimos e/ou mximo.
Na interface utilizada para o experimento deste
trabalho, a idade do usurio pode ser qualquer inteiro
positivo vlido (short ou int), ou seja, no permitida uma idade negativa. A Listagem 5 apresenta uma
validao simples para garantir a integridade do dado
no campo idade.

Listagem 6. Validao de restrio de comprimento

do campo nome.
<h:inputText id=nome value=# {RegistroUsuario.
Usuario.Nome}>
<f: validateLength minimum=2 maximum=25/>
</h:inputText>

Interface do experimento

Aps considerar diversos mecanismos tcnicos

para propiciar uma usabilidade adequada a uma aplicao, sero descritos os detalhes da interface criada
para o experimento. A figura 2 apresenta a interface
criada. Uma importante observao que o intuito da
interface criada apresentar estritamente os criados
de IHM, Usabilidade e Ergonomia de Software, sendo
a simplicidade uma das principais caractersticas do
projeto.
Seguindo o modelo tradicional, onde tal tradio faz com que o usurio espere pela identificao
de campos obrigatrios, foi utilizado o * (asterisco)
para identificar qual campo era necessrio. Outra inListagem 5. Cdigo de validao simples para garantir a
dicao para uma interface intuitiva, segundo o mointegridade do campo idade.
delo de Usabilidade, o uso de exemplificao do for<h:inputText id=idade value=#{RegistroUsuario.Usuario.
mato necessrio. Tanto o asterisco quanto o exemplo
idade}>
podem ser renderizados por componentes de escrita
<f:validateLongRange maximum= 150
na tela.
minimum=0/>
No experimento, os campos que apresentaram
</h:inputText>
o exemplo foram implementados com o componenA Listagem 6 apresenta um exemplo de restrio te <p:inputMask>. A Listagem 7 apresenta com dede comprimento de campo de texto. Para este caso, o talhes a implementao do mesmo, onde o atributo
campo foi o nome do usurio, no qual foi definido o required=true especifica que tal campo obrigatcomprimento mximo de 25 caracteres.
rio, exigindo o seu preenchimento simbolizado pelo
asterisco. Caso o mesmo no seja preenchido, ao
usurio ser apresentada uma mensagem definida no
atributo requiredMessage. Algo semelhante ocorre
quando os dados apresentados no podem ser convertidos, caso sejam informados dados diferentes ao
domnio do campo. A mensagem de problemas com a
converso pode ser definida pelo atributo converterMessage. Caso no seja informada a mensagem pelos
respectivos atributos, so utilizadas mensagens padronizadas.

Listagem 7. Utilizando o recurso inputMask.

<p:inputMask id=Pr mask=999.999 required=true
value=#{interfaceMB.paciente.prontuario}
requiredMessage=Campo Pronturio
de preenchimento obrigatrio! Por favor digite o
nmero do pronturio do paciente. Ex: XXX.XXX
converterMessage=No foi posssivel converter/>

Figura 2. Tela da interface utilizada no experimento.

/ 62

Tambm na Listagem 7 possvel verificar o atributo mask atribudo pelo valor 999.999, que facilita
o preenchimento impedindo que sejam inseridas letras quando o foco assumido pelo campo, o usurio

Para obteno dos resultados, antes que o funcionrio manipulasse a interface, foi preenchido um
formulrio de perfil, onde posteriormente seria analisado seu conhecimento e experincia como usurio,
comparando-a ao seu perfil.
Aps o preenchimento do formulrio e identificao de perfil, foi solicitado para que parte dos
funcionrios da rea (administrativa, enfermagem
Listagem 8. Utilizando o <p:message/>.
e mdica) manipulasse uma das interfaces. A outra
metade manipulou a outra interface, com os critrios
<p:message for=Pr />
implementados.
Este cuidado se fez necessrio, pois a partir do
As demais implementaes seguem o modelo momento em que um usurio manipula uma interfautilizado na entrada para o nmero do pronturio. ce, ele j sabe os campos necessrios, portanto faciliUtilizando mscaras, mensagens e foco nos campos taria a sua manipulao comprometendo o diagnsquando necessrio.
tico desejado.
visualiza quantos caracteres sero necessrios de serem preenchidos.
Para a exibio da no-conformidade necessrio o componente <p:message/>, sendo que o mesmo
apresenta a mensagem vinculada ao id de um componente de entrada. O atributo que realiza a ligao
para validao o for, demonstrado na Listagem 8.

Descrio do experimento

A pesquisa foi aplicada no Hospital de Base de

So Jos do Rio Preto, SP, e englobou funcionrios das
reas: administrativa (Faturamento SUS e Convnio),
enfermagem (3 e 6 convnios) e mdica (Emergncia SUS Clnica Mdica).
Um dos objetivos deste trabalho foi demonstrar a
necessidade de acrescentar no modelo de desenvolvimento a preocupao de como o usurio ir interagir
com o sistema. O desenvolvedor deve se preocupar
no somente em fazer o sistema funcionar, mas tambm na qualidade e no usurio do mesmo.

Resultados

Os resultados dos experimentos esto exibidos

na figura 3. Foram obtidos com a pesquisa de campo,
os melhores e os piores desempenhos de cada interface, sendo a interface A a que implementa os critrios de IHM e a B no apresenta nenhum recurso.
As diferenas entre eles so:
melhor desempenho interface a: 1 minuto e 55
segundos;
melhor desempenho interface b: 2 minutos e
40 segundos;
diferena entre os melhores desempenhos: 45
segundos;
pior desempenho interface A: 5 minutos e 4 segundos;
pior desempenho interface B: 6 minutos e 7 segundos;
diferena entre os piores desempenhos: 1 minuto e 3 segundos.

Consideraes finais

Conclui-se que ao analisar os melhores e os piores desempenhos, que em ambos os casos, a interface
A se comporta melhor que a interface B no quesito
usabilidade de software, ergonomia de software e
interao homem-mquina, propiciando tempos de
manipulao inferiores aos obtidos na manipulao
da interface B.
Como se pode observar na Imagem 3, a diferena
de tempo de utilizao das duas interfaces (A com
todos os padres de usabilidade de software, ergonomia de software e interao homem-mquina) de
50 segundos.
Em primeiro momento, essa diferena pode parecer pequena, por exemplo, os funcionrios do setor de
agendamento de consultas do ambulatrio do Hospital de Base, que possuem uma carga horria diria de
8 horas e cada um atende em mdia 70 pessoas, em
Figura 3. Mdia de tempo gasto em cada interface e a mdia geral
um dia, so perdidos 58 minutos e 20 segundos. Em
das duas interfaces.
63 \

um ms (contando que o usurio trabalhe somente de

segunda a sexta) sero perdidas 19 horas 26 minutos
e 40 segundos.
Esse tempo gasto poderia ser aproveitado para
desempenhar outras funes, atender mais clientes
ou at mesmo reduzir filas, aumentando a satisfao
dos clientes.
Com este tempo gasto, poderiam ser atendidos
18 clientes por dia, utilizando interface com todos
os padres apresentados neste projeto. Em um ms
seriam atendidos aproximadamente 368 clientes.
A quantidade de erros com a manipulao das
duas interfaces testadas tambm foi estudada e pode-se observar que a diferena do total de erros ocorridos nas duas interfaces foi considervel. Um aspecto
observado que em um ambiente cliente-servidor, a
interface que no segue as diretrizes citadas acima,
penalizar o servidor com execues repetidas, exigindo mais recursos.
Considerando a tecnologia utilizada, a escolha
do JavaServer Faces 3.0 implementando componentes de verificao e validao auxiliaram de maneira
adequada o usurio, conforme o resultado do experimento.
Desta forma possvel concluir que a ateno e
projeto de IHM adequado em uma soluo de software contribui para o usurio, com a economia de
recursos e a diminuio de suporte na operao do
mesmo, alm de caractersticas subjetivas que valorizam o software e sua utilizao.

/ 64

/referncias
ABNT,NBR 9241-11: Requisitos ergonmicos para
trabalho em escritrios com computadores Parte 11
Orientaes sobre usabilidade, 2002, 1-21 p.
CYBIS, Walter; BETIOL, Adriana; FAUST, Richard.
Ergonomia e Usabilidade. So Paulo: Novatec Editora,
2007.
NIELSEN, Jakob;LORANGE, Hoa. Usabilidade na Web
Projetando Websites com Qualidade. Rio de Janeiro:
Campos, 2007.
LABORATRIO DE USABILIDADE (Labutil). Site oficial.
Disponvel em: http://www.labiutil.inf.ufsc.br. Acesso em
16 de agosto de 2011.
JSF for nonbelievers: JSF conversion and validation
http://www.ibm.com/developerworks/java/library/j-jsf3/,
acesso em 9 de abril de 2012
PrimeFaces Users Guide http://primefaces.org/
documentation.html
PrimeFaces ShowCase http://www.primefaces.org/
showcase/ui/home.jsf