1) O documento analisa duas interfaces, uma boa e outra ruim, utilizando critérios ergonômicos como condução, carga de trabalho, controle explícito, adaptabilidade e gestão de erros. 2) A interface boa é do sistema Redmine e recebe notas altas nos critérios, enquanto a interface ruim de um aplicativo de contatos recebe notas baixas. 3) O documento conclui que detalhes como metáforas, imagens, campos, validações e tutoriais são importantes para tornar o sistema r

1. Goiânia
2014
DIOGO ROCHA FERREIRA DE MENEZES
SISTEMAS DE INFORMAÇÃO
INTERFACE HOMEM-MÁQUINA
VT- Construção de Interfaces

2. Goiânia
2014
INTERFACE HOMEM-MÁQUINA
VT- Construção de Interfaces
Trabalho apresentado à disciplina IINTERFACE
HOMEM-MÁQUINA da Universidade Salgado de Oliveira
- UNIVERSO.
Professor: Paulo Almeida.
.
DIOGO ROCHA FERREIRA DE MENEZES

3. SUMÁRIOY54
1 INTRODUÇÃO...........................................................................................................3
2 DESENVOLVIMENTO...............................................................................................4
3 CONCLUSÃO...........................................................................................................20
REFERÊNCIAS..........................................................................................................21

4. 1 INTRODUÇÃO
Este trabalho tem por objetivo apoiar o processo de desenvolvimento
da VT – Construção de Interfaces. A finalidade desta VT é aplicar os critérios
ergonômicos já vistos na construção de duas interfaces: uma boa, outra ruim.
Tratando dos Critérios ergonômicos e avaliando com notas de 0 a 10
para:
1) A condução
2) A carga de trabalho
3) O controle explícito
4) A adaptabilidade
5) A gestão de erros
3

5. 2 DESENVOLVIMENTO
Um conjunto de critérios mais detalhado facilita a determinação de
qual critério específico deve ser priorizado em função de determinados aspectos do
contexto de uso do sistema.
2.1 INTERFACE BOA – ANALISE DOS CRITÉRIOS ERGONÔMICOS
Utilizaremos para análise uma aplicação web de gerenciamento de
projeto flexível. Escrito usando o framework Ruby on Rails, é multi-plataforma e
multi-banco de dados o Redmine.
2.1.1 A Condução – Nota: 9,0.
O Redmine visa favorecer principalmente o aprendizado e a
utilização do sistema por usuários novatos por um Guide ajuda em sua plataforma
com todas as funções descritas em uma documentação para fácil entendimento,
conforme figura 1.
Figura 1: Tela Guide do Redmine
4

6. 2.1.1.1 Convite - Nota: 8,0
É oferecida uma interface convidativa para digitação de textos, em
uma nova tarefa ele fornece um link chamado: (?) Formatação do texto. O objetivo
é auxiliar o usuário para uma boa interação com as opções de formatação
disponíveis, conforme figura 2.
Figura 2: Tela de Referencia para Formatar Textos.
2.1.1.2 Agrupamento/distinção de itens - Nota 10,0.
O critério agrupamento e distinção de itens estão subdivididos em dois
critérios elementares: agrupamento/distinção por localização e agrupamento e distinção por
formato.
2.1.1.2.1 Agrupamento e distinção por localização
O Redmine agrupa seus menus, em uma aba superior conforme
figura 3.
5

7. Figura 3: Tela das Abas dos Menus.
2.1.1.2.2 Agrupamento e distinção por formato
Apresenta seus campos de formulários de forma agrupada pelo uso
de uma textbox, conforme figura 4, permite realizar busca de tarefas de forma
organizada, da maneira que o usuário desejar através de filtros, conforme figura 5.
Figura 4: Tela para preencher formulário utilizando campos padrões.
Figura 5: Tela para realizar busca de tarefas personalizadas por filtros.
6

8. 2.1.1.3 Legibilidade - Nota: 8,5
As cores utilizadas são claras e não cansativas focando para o azul
nas letras dos links, menus com cores de fundo azul meio escuro com letra branca e
ao selecionar o menu, ele fica branco com letra preta, com fácil leitura da interface,
conforme figura 6.
Figura 6: Tela para demonstrar visualização das cores da interface.
2.1.1.4 Feedback imediato - Nota 9,0
Todas as alterações realizadas em uma tarefa são relatadas em
registros para acompanhamento das alterações com informações precisas dos
dados, conforme figura7. As cores vermelhas são as anteriores, as verdes são as
novas após alterar.
Figura 7: Tela para mostrar os registros das alterações realizadas em uma
tarefa.
2.1.2 A Carga de Trabalho – Nota 10,0
O critério carga de trabalho diz respeito a todos os elementos da interface
que têm um papel importante na redução da carga cognitiva e perceptiva do usuário e no
aumento da eficiência do diálogo. Subdivide-se em dois critérios: brevidade (que inclui
7

9. concisão e ações mínimas) e densidade informacional.
2.1.2.1 Brevidade
O critério brevidade se divide em duas qualidades elementares:
concisão e ações mínimas.
2.1.2.1.1 Brevidade - Concisão
O Redmine não permite que sejam criadas novas tarefas, se alguns
valores (para os campos de dados, listas, check boxes) que o administrador definir
como principais não estiverem preenchidos, conforme figura 8.
Figura 8: Tela para Validar campos preenchidos.
2.1.2.1.2 Brevidade – Ações Mínimas
É possível que antes que seja gravada uma tarefa, o usuário possa
visualizar no padrão da tarefa criada, gerando menor carga de trabalho ao visualizar
as informações em uma pré-visualização, conforme figura 9, sendo também possível
carregar ao clicar no botão Modelo ticket um modelo de formatação pré-definido,
conforme figura 10,.
8

10. Figura 9 : Tela para Pré-visualizar uma tarefa.
Figura 10 : Tela para carregar um Modelo de Formatação.
9

11. 2.1.2.2 Densidade Informacional – Nota 9,5
No Redmine o usuário pode filtrar suas pesquisas de tarefas
carregando somente os itens que ele desejar o restante não é trazido, conforme
figura 11.
Figura 11 : Tela para realizar uma busca de tarefa.
2.1.3 O Controle Explícito – Nota: 9,0
O controle explícito se define em dois critérios elementares: ações
explícitas do usuário e controle do usuário.
2.1.4 Ações Explicitas do usuário - Nota 9,0
Em um cadastro de tarefas, para que o solicitante do script veja o
andamento da tarefa é realizado opcionalmente, em uma interface
explicitatadamente comandada o cadastro de um observador, aonde ele consegue
acompanhar recebendo e-mails sobre todo o andamento da tarefa, conforme figura
12.
10

12. Figura 12 : Tela para inserir observador no protocolo (tarefa).
2.1.4.1 Controle do usuário - Nota 8,0
Nas tarefas ao serem cadastradas elas estão na situação
Atendimento, logo que finalizadas são passadas para Análise nessa situação o
Analista valida o teste de aceitação e passa para fase de desenvolvimento ou
rejeitar tarefa, logo o usuário encontra nessa interface opções para comandar a
interrupção, a retomada ou a finalização de tratamentos demorados, veja as etapas
disponíveis na figura 13.
Figura 13 : Tela para mudar a fase de uma tarefa
11

13. 2.1.5 A Adaptabilidade Nota 9,0
Dois subcritérios participam da adaptabilidade: a flexibilidade e a
consideração da experiência do usuário.
2.1.5.1 Flexibilidade
A interface oferece diferentes tipos de anexos de imagens em uma
tarefa, algumas opções podem visualizar a imagem dentro da janela, outras colocam
a imagem em um link, outras referenciam em ordens numéricas.
2.1.5.2 Consideração da Experiência do Usuário
A interface oferece opções para que o usuário salve um modelo de
pesquisa que ele define, logo ao querer realizar a mesma pesquisa ele não precisa
configurar toda estrutura, pois basta somente selecionar as pesquisas salvas,
conforme figura 14.
Figura 14 : Tela para buscar formas de pesquisas pré-definidas
pelo usuário
2.1.6 A Gestão de Erros Nota – 9,5
Três subcritérios participam da gestão dos erros: a proteção contra
12

14. os erros, à qualidade das mensagens de erro e a correção dos erros.
2.1.6.1 Proteção Contra os Erros Nota – 9,5
O sistema informa ao usuário quando ele esta editando uma tarefa e
ao mesmo tempo outro usuário realiza a mesma situação na mesma tarefa, logo ao
gravar o sistema informa em uma interface que houve alterações anteriores, e
manda o usuário escolher se deseja manter alterações alheias ou as suas, ou
consistir.
2.1.6.2 Qualidade das Mensagens de Erros – Nota 9,5
O sistema emite mensagens de erro, com informações precisas que
auxiliam o usuário, conforme imagem 15.
Figura 15: Tela exibindo mensagem de erro.
2.1.6.3 Correção dos Erros
Ao gravar uma tarefa que esta incompleta a interface informa antes
de gravar, quais campos estão sem preenchimento, conforme figura 16.
Figura 16: Tela para validar campos.
13

15. 2.2 INTERFACE RUIM – ANALISE DOS CRITÉRIOS ERGONÔMICOS
Utilizaremos para análise uma prototipação de um sistema para
cadastro de Contatos Pessoais Mobille criada utilizando o sistema balsamiq.
mockup
2.2.1 A Condução - Nota 1,0
O cadastro de Contatos Pessoais Mobille não visa favorecer
principalmente o aprendizado e a utilização do sistema por usuários novatos por um
Guide ajuda em sua plataforma com todas as funções descritas em uma
documentação para fácil entendimento, conforme figura 17.
Figura 17: Tela de ajuda do aplicativo.
2.2.1.1 Convite - Nota 1,0
Não é oferecida uma interface convidativa para digitação de textos,
em uma inclusão de contato ele não fornece um teclado com todas as letras
14

16. disponíveis, conforme figura 18.
Figura 18: Tela de inclusão faltando descrição das funções do teclado.
2.2.1.2 Agrupamento e distinção entre itens - - Nota 1,0
2.2.1.2.1 Agrupamento e distinção por localização
A aplicação não agrupa seus menus de forma precisa, conforme figura 19.
Figura 19: Tela para ver os menus.
15

17. 2.2.1.2.2 Agrupamento e distinção por formato
Ao apresentar seus campos não utiliza um textbox preciso,
misturando varias formas dificultando operação, conforme figura 20.
Figura 20: Tela para selecionar campos.
2.2.1.3 Legibilidade - Nota 1,0
Não é boa sua legibilidade com letras grandes e pequenas e cores
não atraentes, conforme figura 21.
Figura 21: Tela para visualizar contato.
16

18. 2.2.1.4 Feedback imediato - Nota 1,0
Ao visualizar um contato não é disponível o botão alterar, conforme
figura 21.
2.2.2 A Carga de Trabalho - Nota 1,0
Subdivide-se em dois critérios: brevidade (que inclui concisão e ações
mínimas) e densidade informacional.
2.2.2.1 Brevidade:
O critério brevidade se divide em duas qualidades elementares:
concisão e ações mínimas
2.2.2.1.1 Concisão
A aplicação permite que o usuário cadastre novos contatos com
informações como o nome, sem inserção de dados, conforme figura 22.
Figura 22: Tela para Listar Contatos.
17

19. 2.2.2.1.2 Ações mínimas - Nota 1,0
A aplicação gera uma carga de trabalho que dificulta que o usuário
altere o contato, pois para realizar esse procedimento deve-se primeiro clicar em,
procurar, logo não existe uma forma de busca, sendo listados todos os contatos na
mesma tela, conforme figura 22.
2.2.2.2 Densidade Informacional - Nota 1,0
Não existe uma opção de filtro para realizar busca, conforme figura
22.
2.2.3 O Controle Explícito - Nota 1,0
2.2.3.1 Ações explícitas
Não separa os controles na hora de salvar um contato, gerando um
controle não explicito, conforme figura 20.
2.2.3.2 Controle do usuário - Nota 1,0
Não existe um botão salvar, na hora de cadastrar um novo contato,
sendo salvo somente quando é teclado enter no teclado da aplicação, conforme
figura 18.
2.2.4 A Adaptabilidade - Nota 1,0
2.2.4.1 Flexibilidade
Ao visualizar um contato ele exibe uma cor rosa, sendo que não
existe a opção de altera-la, conforme figura 21.
18

20. 2.2.4.2 Consideração da experiência do usuário - Nota 1,0
A aplicação não considera essa questão, sendo que não informa que
o cadastro foi efetuado com sucesso, quando ele é cadastrado, conforme figura18.
2.2.5 A Gestão de Erros - Nota 1,0
2.2.5.1 Proteção contra os erros - Nota 1,0
Não informa que o usuário salvou um contato sem preencher o
campo nome.
2.2.5.2 Qualidade das mensagens de erros e Correção de erros - Nota 1,0
Não exibe tratamentos, quando ocorrem falhas ao realizar alguma
função.
19

21. 3 CONCLUSÃO
No decorrer do desenvolvimento deste trabalho, verificou se como é
ampla a forma de que o sistema seja adequado ao usuário, diante de tantos
detalhes. Foram avaliadas uma interface boa que obteve uma média de avaliação
com nota 9,7 e uma ruim média 1,0, sendo destacado como é importante que o
usuário interaja com as metáforas, as imagens, os campos, validações, os passos a
passos, que com certeza deixará o sistema mais rico de informações, não bastando
somente à qualidade do código escrito.
20

22. REFERÊNCIAS
Acesso aos websites:
 http://webdemo.balsamiq.com/
 http://redmine.go.senac.br/
Acesso ao Ebook do livro: Ergonomia e Usabilidade, Conhecimentos, Métodos e
Aplicações, Novatec.
21