Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
conceitos e
prtica com
PrimeFaces
IHM
C
/ 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.
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-
Usabilidade de Software
Ergonomia de Software
Componentes e primefaces e
usabilidade
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
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.
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/>
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
Interface do experimento
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
Resultados
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 \
/ 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