Engenharia de Usabilidade Aplicada a um Protótipo de Localização de Ambientes. Caso Unochapecó

LARA POPOV ZAMBIASI

ENGENHARIA DE USABILIDADE APLICADA A UM
PROTÓTIPO DE LOCALIZAÇÃO DE AMBIENTES.
CASO: UNOCHAPECÓ

Monografia apresentada à Universidade Comunitária
Regional de Chapecó, como parte dos requisitos para
obtenção do grau de Bacharel em Ciência da
Computação.
Orientador: Jean Carlos Hennrichs
Coorientador: Jorge Di Domenico

Chapecó (SC), Dezembro 2005.

ii

ENGENHARIA DE USABILIDADE APLICADA A UM
PROTÓTIPO DE LOCALIZAÇÃO DE AMBIENTES.
CASO: UNOCHAPECÓ

LARA POPOV ZAMBIASI

Esta Monografia foi julgada para obtenção do título de Bacharel em Ciência da
Computação, na área de Engenharia de Usabilidade e aprovada pelo curso de Ciência da
Computação.

ORIENTADOR: Prof. Jean Carlos Hennrichs

COORIENTADOR: Prof. Jorge Di Domenico

COORDENADORA DO CURSO: Profa. Mônica Tissiani De Toni Pereira

BANCA EXAMINADORA

PRESIDENTE: Prof. Jean Carlos Hennrichs

Prof. Jorge Di Domenico

Profa. Jusane Farina Lara

Prof. Elton Luis Minetto

iii

Dedicatória

Aos meus pais José Luiz e Cristina, pela dádiva da vida,
aos meus irmãos Cristiano e Saulo, pelo cuidado, carinho e exemplo de vida e
para meu amor, Saulo, por me dar forças e acreditar em mim.

iv

Agradecimentos

Agradeço ao amigo e orientador Professor Jean Carlos Hennrichs pelo seu prestimoso
auxílio, pela paciência na orientação e pelo incentivo de fazer um pouco mais.

Ao Professor Jorge Di Domenico, paciente e moderador de minhas idéias, sabendo
sempre ponderar nos momentos certos e apontando caminhos.

A todos os Professores do curso que de uma maneira ou de outra influenciaram este
trabalho.

Ao meu pai José Luiz Zambiasi por me mostrar a via da intelectualidade, a minha mãe
Cristina Popov Zambiasi por me ensinar que a experiência de vida não está em nenhum livro.
Aos meus irmãos Cristiano pela confiança e atenção, e Saulo pelo exemplo e gosto pela
ciência e seus desafios.

Ao amor da minha vida Saulo Bazzi Oberderfer pelos momentos de apoio, força e
atenção quando mais precisei.

A Deus, pela força e iluminação nos momentos difíceis.

v

SUMÁRIO

1 INTRODUÇÃO.........................................................................................................................................14

1.1 OBJETIVOS .............................................................................................................................................15
1.1.1 Geral.............................................................................................................................................15
1.1.2 Específicos..................................................................................................................................15
1.2 ORGANIZAÇÃO DO TRABALHO .............................................................................................................16

2 EVOLUÇÃO DAS INTERFACES .......................................................................................................17

2.1 SURGIMENTO DAS INTERFACES ...........................................................................................................17
2.2 MULTIMÍDIA E HIPERMÍDIA ....................................................................................................................19
2.3 INTERFACES MODERNAS ......................................................................................................................20

3 INTERFACE HOMEM-MÁQUINA ......................................................................................................21

3.1 USABILIDADE..........................................................................................................................................21
3.2 ERGONOMIA ...........................................................................................................................................22
3.3 QUALIDADES ERGONÔMICAS PARA IHC .............................................................................................23
3.3.1 Condução....................................................................................................................................24
3.3.2 Carga de Trabalho ....................................................................................................................25
3.3.3 Controle Explícito ......................................................................................................................25
3.3.4 A Adaptabilidade .......................................................................................................................25
3.3.5 A Gestão de Erros.....................................................................................................................25
3.3.6 Consistência ...............................................................................................................................26
3.3.7 Significado dos Códigos ..........................................................................................................26
3.3.8 A Compatibilidade .....................................................................................................................26
3.4 MODELO DE COMPONENTES DE IHC ..................................................................................................26
3.4.1 Os Diálogos ................................................................................................................................29
3.4.2 Os Objetos de Interação..........................................................................................................30
3.4.2.1 Painéis de Controle................................................................................................................................ 30
3.4.2.2 Controles Compostos............................................................................................................................ 33
3.4.2.3 Grupos de Controles: ............................................................................................................................ 36
3.4.2.4 Controles Simples .................................................................................................................................. 36
3.4.2.5 Campos de Entrada............................................................................................................................... 37
3.4.2.6 Mostradores Estruturados.................................................................................................................... 38
3.4.2.7 Mostrador Simples ................................................................................................................................. 39
3.4.2.8 Orientações.............................................................................................................................................. 39
3.4.3 Os Sistemas de Significado....................................................................................................40
3.4.4 As Primitivas...............................................................................................................................41

4 CICLO DA ENGENHARIA DE USABILIDADE ..............................................................................43

4.1 PERSPECTIVA DA ANÁLISE ...................................................................................................................44

vi

4.1.1 Escopo do sistema....................................................................................................................45
4.1.2 Análise do Usuário....................................................................................................................45
4.1.3 Análise do Trabalho..................................................................................................................45
4.1.3.1 Análise das Tarefas ............................................................................................................................... 46
4.1.3.2 Análise do Ambiente.............................................................................................................................. 46
4.1.3.3 Análise das Atividades .......................................................................................................................... 46
4.1.3.4 Elaboração do Relatório de Análise................................................................................................... 47
4.1.4 Análise das possibilidades e restrições tecnológicas.......................................................47
4.2 PERSPECTIVA DA SÍNTESE ...................................................................................................................47
4.2.1 Especificação da Usabilidade ................................................................................................48
4.2.2 Especificação do Contexto de Uso .......................................................................................48
4.2.3 (Re)Engenharia do Trabalho..................................................................................................48
4.2.4 Projeto da Interface...................................................................................................................49
4.2.4.1 Usuários e Categorias Relacionadas ................................................................................................ 49
4.2.4.2 Estruturas de Trabalho.......................................................................................................................... 49
4.2.4.3 Arquitetura da Interface ........................................................................................................................ 51
4.3 PERSPECTIVA DA AVALIAÇÃO ..............................................................................................................52

5 DESENVOLVIMENTO DE APLICAÇÕES HIPERMÍDIA .............................................................53

5.1 METODOLOGIA OOHDM......................................................................................................................53
5.1.1 Levantamento de Requisitos..................................................................................................55
5.1.2 Modelagem Conceitual ............................................................................................................57
5.1.3 Projeto Navegacional ...............................................................................................................58
5.1.4 Projeto de Interface Abstrata..................................................................................................60
5.1.5 Implementação ..........................................................................................................................62

6 CASO UNOCHAPECÓ .........................................................................................................................63

6.1 ESTRUTURA FÍSICA DA UNOCHAPECÓ ..........................................................................................63

7 ENGENHARIA DE USABILIDADE PARA UMA APLICAÇÃO MULTIMÍDIA DE
LOCALIZAÇÃO DE AMBIENTES UTILIZANDO O MÉTODO OOHDM .........................................................65

7.1 LEVANTAMENTO DE REQUISITOS .........................................................................................................66
7.1.1 Identificação de atores e tarefas............................................................................................66
7.1.2 Especificação dos Cenários ...................................................................................................68
7.1.3 Especificação dos Use Cases................................................................................................69
7.1.4 Especificação dos UIDs...........................................................................................................69
7.1.5 Validação dos UIDs ..................................................................................................................70
7.2 MODELAGEM CONCEITUAL...................................................................................................................71
7.3 MODELAGEM NAVEGACIONAL ..............................................................................................................71
7.3.1 Esquema Navegacional...........................................................................................................72
7.3.2 Esquema de Contextos ...........................................................................................................72

vii

7.4 PROJETO DA INTERFACE ABSTRATA ...................................................................................................74
7.5 IMPLEMENTAÇÃO ...................................................................................................................................75

8 CONSIDERAÇÕES FINAIS.................................................................................................................81

8.1 RESUMO DAS CONTRIBUIÇÕES ............................................................................................................82
8.2 TRABALHOS FUTUROS ..........................................................................................................................83

9 REFERÊNCIAS.......................................................................................................................................84

10 ANEXOS ...................................................................................................................................................88

10.1 QUESTIONÁRIO DE AVALIAÇÃO DO PERFIL DOS USUÁRIOS ..........................................................88
10.2 TABULAÇÃO DO QUESTIONÁRIO DE AVALIAÇÃO DO PERFIL DOS USUÁRIOS................................90
10.3 RELAÇÃO DE CENÁRIOS ..................................................................................................................93
10.4 RELAÇÃO DE USE CASES ................................................................................................................95
10.5 RELAÇÃO DE UIDS ..........................................................................................................................98
10.6 RELAÇÃO DE ADVS........................................................................................................................102
10.7 RELAÇÃO DE ADOS .......................................................................................................................105

viii

LISTA DE FIGURAS

FIGURA 1: JANELA .............................................................................................................................................................30
FIGURA 2: CAIXA DE DIÁLOGO MODAL.............................................................................................................................31
FIGURA 3: FORMULÁRIO ...................................................................................................................................................32
FIGURA 4: MENSAGEM DE ERRO......................................................................................................................................33
FIGURA 5: MENSAGEM DE INFORMAÇÃO.........................................................................................................................33
FIGURA 6: MENSAGEM DE ADVERTÊNCIA .......................................................................................................................33
FIGURA 7: BARRA DE MENU..............................................................................................................................................34
FIGURA 8: HIPERTEXTO ....................................................................................................................................................34
FIGURA 9: BARRA DE FERRAMENTAS ..............................................................................................................................35
FIGURA 10: LISTA DE SELEÇÃO ........................................................................................................................................35
FIGURA 11: CAIXA DE COMBINAÇÃO ................................................................................................................................35
FIGURA 12: BOTÕES DE RÁDIO ........................................................................................................................................36
FIGURA 13: CAIXA DE ATRIBUIÇÃO ..................................................................................................................................36
FIGURA 14: CICLO DE VIDA DO PRODUTO.......................................................................................................................43
FIGURA 15: CICLO DA ENGENHARIA DE USABILIDADE. .................................................................................................44
FIGURA 16: PERSPECTIVA DA ANÁLISE. .........................................................................................................................44
FIGURA 17: PERSPECTIVA DE SÍNTESE. .........................................................................................................................47
FIGURA 18: CASO DE USO - PEGANDO DINHEIRO..........................................................................................................50
FIGURA 19: MAPA DE CASO DE USO - USARMAQUINA. .................................................................................................50
FIGURA 20: MAPA NAVEGAÇÃO. ......................................................................................................................................51
FIGURA 21: EXEMPLO DE ESPECIFICAÇÃO DE CENÁRIOS. ............................................................................................55
FIGURA 22: EXEMPLO DE CASOS DE USO.......................................................................................................................56
FIGURA 23: EXEMPLO DE UM UID PARAMETRIZADO.....................................................................................................57
FIGURA 24: EXEMPLO DE UM MODELO CONCEITUAL....................................................................................................58
FIGURA 25: EXEMPLO DE MODELAGEM NAVEGACIONAL..............................................................................................59
FIGURA 26: ESQUEMA DE CONTEXTO DE NAVEGAÇÃO. ................................................................................................60
FIGURA 27: ADV PESSOA................................................................................................................................................61
FIGURA 28: DIAGRAMA DE CONFIGURAÇÃO...................................................................................................................61
FIGURA 29: ADVCHARTS. ................................................................................................................................................62
FIGURA 30: ESTRUTURA DE DESENVOLVIMENTO..........................................................................................................65
FIGURA 31: VOCÊ JÁ TEVE DIFICULDADES EM SE LOCALIZAR NA UNOCHAPECÓ?................................................67
FIGURA 32: FAIXA ETÁRIA................................................................................................................................................67
FIGURA 33: UID 03 VISUALIZAR SALA ............................................................................................................................70
FIGURA 34: MODELO CONCEITUAL DA APLICAÇÃO .......................................................................................................71
FIGURA 35: ESQUEMA NAVEGACIONAL ..........................................................................................................................72
FIGURA 36: CONTEXTO NAVEGACIONAL DO ATOR CALOURO. ....................................................................................73
FIGURA 37: ADVCHART NAVEGACAO ............................................................................................................................74
FIGURA 38: TELA PRINCIPAL DO PROTÓTIPO.................................................................................................................76

ix

FIGURA 39: LOCALIZAÇÃO DE SALA ................................................................................................................................77
FIGURA 40: ESCOLHA DO BLOCO ....................................................................................................................................78
FIGURA 41: DETALHES DO BLOCO R ..............................................................................................................................78
FIGURA 42: ESCOLHA DE UMA SALA DO PRIMEIRO ANDAR DO BLOCO R...................................................................79
FIGURA 43: PLANTA BAIXA DO PRIMEIRO ANDAR DO BLOCO R ..................................................................................80
FIGURA 44: COMPARAÇÃO DE ADV PRINCIPAL COM A TELA PRINCIPAL DO PROTÓTIPO .........................................81
FIGURA 45: ALTERAÇÕES EM UIDS ................................................................................................................................82
FIGURA 46: UID 01 VISUALIZAR ESTRUTURA FÍSICA .....................................................................................................98
FIGURA 47: UID 02 VISUALIZAR BLOCO .........................................................................................................................98
FIGURA 48: UID 03 VISUALIZAR SALA ............................................................................................................................99
FIGURA 49: UID 04 VISUALIZAR EVENTO .......................................................................................................................99
FIGURA 50: UID 05 VISUALIZAR CENTRO .....................................................................................................................100
FIGURA 51: UID 06 VISUALIZAR OUTROS LOCAIS .......................................................................................................100
FIGURA 52: UID 07 VISUALIZAR DETALHES .................................................................................................................101
FIGURA 53: ADV PRINCIPAL ..........................................................................................................................................102
FIGURA 54: ADV ANIMACAO ..........................................................................................................................................102
FIGURA 55ADV NAVEGACAO ........................................................................................................................................103
FIGURA 56: ADV BLOCO ................................................................................................................................................103
FIGURA 57: ADV BOTAO LINHA.....................................................................................................................................103
FIGURA 58: ADV ANDARES ...........................................................................................................................................104
FIGURA 59: ADV AMBIENTE ..........................................................................................................................................104
FIGURA 60: ADO NÓ PRINCIPAL ...................................................................................................................................105
FIGURA 61: ADO NÓ BLOCOANIMACAO ......................................................................................................................105
FIGURA 62: ADO NÓ BLOCO .........................................................................................................................................106
FIGURA 63: ADO NÓ ANDAR .........................................................................................................................................106
FIGURA 64: ADO NÓ AMBIENTE ...................................................................................................................................106

LISTA DE TABELAS E QUADROS

TABELA 1: ESPECIALIZAÇÕES DE ERGONOMIA ..............................................................................................................23
TABELA 2: MODELO DE CARACTERÍSTICAS DE INTERFACES HOMEM-COMPUTADOR ...............................................28
TABELA 3: TABELA DE CARACTERÍSTICAS HERDADAS E CRIADAS NO OOHDM ........................................................54
TABELA 4: SÍNTESE DA METODOLOGIA OOHDM ..........................................................................................................54
TABELA 5: EXEMPLO DE CENÁRIO DO ATOR CALOURO .................................................................................................68
TABELA 6: EXEMPLO DE USE CASE DO ATOR CALOURO ..............................................................................................69
TABELA 7: TABELA DO QUESTIONÁRIO DE AVALIAÇÃO DO PERFIL DOS USUÁRIOS ...................................................90

xi

LISTA DE SIGLAS E ABREVIATURAS

ABERGO Associação Brasileira de Ergonomia

ADO Abstract Data Objects Objetos de Dados Abstratos

ADV Abstract Data Views Visões Abstratas de Dados

ARC Augmentation Research Center

IES Instituição de Ensino Superior

IHC Interface Homem Máquina

OOHDM Object-Oriented Hypermedia Method Modelo de Projeto
Hipermídia Orientado a Objetos

TCC Trabalho de Conclusão de Curso

UID User Interaction Diagram - Diagrama de Interação do Usuário

UML Unified Modeling Language Modelada Linguagem Unificada

UNOCHAPECÓ Universidade Comunitária Regional de Chapecó

RESUMO

Com a constante evolução das interfaces de computadores surgiu a necessidade de se
pensar em usabilidade e ergonomia visual para grupos específicos de usuários chamados de
público-alvo. Este trabalho apresenta uma contextualização de interfaces, conceitos de
multimídia, hipertexto e hipermídia, e uma introdução às interfaces modernas, além de
conceitos de interface homem-máquina focando usabilidade e ergonomia, bem como
qualidades ergonômicas e modelo de componentes para IHC. Apresenta também o ciclo da
engenharia de usabilidade: análise, síntese e avaliação, segundo a perspectiva de Walter
Cybis; completa com uma contextualização das aplicações hipermídia, bem como a
metodologia utilizada para o desenvolvimento do trabalho: o OOHDM. Tudo isso com o
objetivo do desenvolvimento de um protótipo para a localização de ambientes da Universidade
Comunitária Regional de Chapecó (UNOCHAPECÓ), desenvolvendo uma Interface Homem
Máquina (IHC) moderna e coerente com um perfil dos usuários dos quiosques de acesso.

13

ABSTRACT

With the constant evolution of the computers interfaces it appeared the necessity of think
about usability and visual ergonomics for specific groups of users called public-target. This
work presents the contextualization of interfaces, concepts like multimedia, hypertext and
hypermedia, and an introduction to the modern interfaces, beyond concepts of interface man-
machine using usability and ergonomics, as well as ergonomics quality and modelo of
components to interface man-machine. Present the lifecycle of usability engeneering: analisis,
synthesis and avaliation, second Walter Cybis s perspective with a contextualization of
hypermedia applications, as well as the methodology used for the development of the work:
the OOHDM. All this whith the objective of development of a prototype for the localization of
environments in the University Communitarian Regional of Chapecó (UNOCHAPECÓ), to
create a Interface Man-Machine (IHC) modern and e coherent with the profile of users of the
access kiosks.

1 INTRODUÇÃO

Com o passar dos tempos, as organizações em geral têm aumentado a sua estrutura
física devido a sua própria expansão. Nas IES (Instituição de Ensino Superior), isto não é
diferente. Com a inclusão de novos cursos, mais alunos ingressam nessas instituições,
gerando um fluxo maior de pessoas e a expansão da estrutura física.

O sistema de localização de salas de aula apresentado pelas IES ainda faz uso de
métodos convencionais. Observa-se que, no início de cada semestre, ocorre um fluxo intenso
de pessoas se deslocando de um espaço para outro, muitas delas perdidas ou desorientadas
quanto ao seu destino final. Tal situação causa, desta maneira, um desperdício de tempo, no
que se refere a mapas ou cartazes, para indicar o destino desejado.

Hoje, vive-se numa época em que o tempo é um fator de grande importância. Diante do
exposto, faz-se necessário analisar as melhores condições e perfis dos usuários para a
criação de uma interface amigável, de modo que venha a reduzir o tempo de procura dos
ambientes de uma IES.

O presente Trabalho de Conclusão de Curso (TCC) tem por finalidade desenvolver um
protótipo parcial para a localização de ambientes da Universidade Comunitária Regional de
Chapecó (UNOCHAPECÓ).

Para isto, pretende-se empregar o método OOHDM, utilizado em aplicações hipermídia,
paralelamente com a Engenharia de Usabilidade, para desenvolver uma Interface Homem
Máquina (IHC) moderna e coerente com o perfil dos usuários dos quiosques de acesso.

O protótipo fornecerá um ambiente gráfico, desenvolvido a partir do estudo da
engenharia da usabilidade e do perfil da maioria dos usuários que utilizam os terminais.

Esse ambiente apresenta o mapa da UNOCHAPECÓ com seus respectivos blocos,
bem como a informação destacada de onde o usuário se encontra nesse mapa.

Como se trata de um protótipo, ele simula o funcionamento para um usuário que se
encontra no terminal do bloco B. Esse usuário entra no protótipo simulado com o seu destino,
que poderá ser o bloco R, identificado no decorrer do trabalho. O protótipo fornece um
caminho pré-estabelecido, que deverá ser seguido pelo usuário, mostrando também uma foto
da fachada do local solicitado com as informações gerais do mesmo.

15

Para auxiliar na determinação do escopo do problema da pesquisa, foram elaboradas as
seguintes questões: qual o perfil dos usuários que acessam os quiosques (terminais de
consulta) disponíveis? Que interface se adequaria ao perfil da maioria dos usuários atuais dos
quiosques? O que é engenharia de usabilidade? Quais são as etapas da engenharia de
usabilidade e quais as mais relevantes para o presente trabalho? Que metodologia será
utilizada para o desenvolvimento do protótipo? Quais os pontos da estrutura física da
UNOCHAPECÓ que deveriam constar na interface a ser desenvolvida? Que processo se usa
atualmente para se localizar os blocos, salas e eventos que ocorrem na UNOCHAPECÓ?
Quais as vantagens e melhorias que o protótipo pode trazer a UNOCHAPECÓ?

1.1 OBJETIVOS

Para atender ao problema anteriormente justificado, apresentam-se os objetivos geral e
específicos.

1.1.1 Geral

Desenvolver um protótipo para a localização de ambientes da UNOCHAPECÓ, com
uma Interface Homem Máquina (IHC) amigável e coerente, cumprindo as etapas de análise e
síntese da Engenharia de Usabilidade e, utilizando como ferramenta de modelagem, o método
OOHDM.

1.1.2 Específicos

Para aprofundar o objetivo geral, foram definidos os seguintes objetivos específicos:

estudar a Engenharia de Usabilidade para determinar uma interface coerente ao
perfil dos usuários que utilizam hoje os quiosques da UNOCHAPECÓ;

pesquisar sobre a estrutura física atual da UNOCHAPECÓ;

identificar o perfil dos usuários dos quiosques da UNOCHAPECÓ;

desenvolver o protótipo de acordo com as etapas de análise e síntese do Ciclo da
Engenharia de Usabilidade;

estudar o método OOHDM.

16

1.2 ORGANIZAÇÃO DO TRABALHO

Esta monografia é composta por sete capítulos relacionados com o estudo de caso.

Após a introdução no primeiro capítulo, o segundo apresenta uma contextualização de
interfaces, conceitos de multimídia, hipertexto e hipermídia, e uma introdução às interfaces
modernas.

No terceiro, apresenta-se conceitos de interface homem-máquina focando usabilidade e
ergonomia, bem como qualidades ergonômicas e modelo de componentes para IHC.

O quarto capítulo apresenta o ciclo da engenharia de usabilidade: análise, síntese e
avaliação, segundo a perspectiva de Walter Cybis1.

No quinto é apresentada uma contextualização das aplicações hipermídia, bem como a
metodologia utilizada para o desenvolvimento do trabalho: o OOHDM.

No sexto é apresentada a estrutura da UNOCHAPECÓ, que é o foco deste trabalho.

No sétimo capítulo é apresentado o desenvolvimento do protótipo no método multimídia
OOHDM seguindo a metodologia explanada no estudo da engenharia de usabilidade.

1
Este autor foi o escolhido por ter sido professor do orientador deste trabalho e ser um dos raros
a pesquisar esta temática.

2 EVOLUÇÃO DAS INTERFACES

Com o surgimento dos computadores, novos conceitos passaram a fazer parte do nosso
cotidiano. Este capítulo dedica-se a mostrar o surgimento das interfaces de computadores,
conceitos de multimídia, de hipermídia e, diante desses contextos, as novas interfaces.

2.1 SURGIMENTO DAS INTERFACES

O conceito de interface é de grande importância nos dias de hoje, principalmente
porque abrange muito mais que uma simples aparência gráfica. De um modo genérico, a
interface:

[...] é entendida como uma superfície de contato que reflete as propriedades
físicas daqueles que interagem, por exemplo, uma maçaneta é a interface
entre uma pessoa e a porta. A interface (maçaneta) será mais adequada
dependendo de quão bem projetada for para a pessoa que vai utilizá-la.
Quando o conceito de interface surgiu há algumas décadas, ele era entendido
como o hardware e o software através do qual o homem e o computador
podem se comunicar (ROMANI; ROCHA; SILVA, 2000, p. 2).

A utilização de interfaces, como forma de registrar a informação, vem desde os tempos
mais remotos, com desenhos em paredes das cavernas, passando ao desenvolvimento da
escrita e, mais tarde, com a invenção da imprensa, do telégrafo, do telefone, do cinema, da
televisão e dos computadores.

Não importa o meio de comunicação, seja textual, visual, audiovisual ou eletrônico,
sempre haverá uma interface e, cada tipo de interface, seja a televisão, o monitor do
computador, entre outros, busca seu próprio design, procurando tornar-se o mais atraente
possível e de fácil uso para o usuário (SILVA, 1998).

Computacionalmente falando, Johnson (2001) mostra que, no sentido mais simples da
palavra, interface pode se referir a softwares que interconectam o usuário e computador.
Moran, citado por Leite (1998), acrescenta que a interface do computador com usuário é a
parte do software no qual este entra em contato fisicamente, perceptivamente e
cognitivamente realizando tarefas no seu domínio de atividades.

Essa interface é composta de um conjunto de dispositivos pelos quais o usuário pode
trocar informações com o sistema. Para determinar o modelo de interação para a troca de
informações, algumas estruturas são necessárias, como por exemplo, menus, janelas, ícones,
linguagens de comandos, formulários, perguntas e respostas em linguagem natural, dentre
outras.

18

No fim da década de 50, a evolução das interfaces interativas teve início, quando
Douglas Engelbart, diretor do Augmentation Research Center (ARC) do Stanford Research
Institute, pensando nos problemas e computadores da época, criou a primeira interface
gráfica, o mouse, o uso da televisão como monitor e o uso de janelas, conforme descreve
Engelbart (2003).

Johnson (2001) descreve como foi a demonstração de Douglas Engelbart no San
Francisco Civic Auditorium, em 1968, que mudou o curso da história. Durando cerca de 30
minutos, Douglas mostrou um tipo de videoconferência simples, utilizando um link emprestado
da ARC, uma televisão como monitor, um modem feito em casa e ilustrou suas idéias para os
participantes do evento. Esta tornou-se a primeira demonstração pública do mouse, da
hipermídia e da teleconferência.

Filho e Pelegrino (1998), citando Lévy (1993), complementam que, no ARC, foram
testados vários experimentos por Douglas e sua equipe. Destacam-se: telas com janelas de
trabalho manipuladas com a ajuda do mouse, símbolos gráficos, conexões de textos
(hipertexto) em banco de dados, entre diferentes artigos e grafos dinâmicos que
representavam estruturas conceituais.

Logo em seguida, por volta dos anos 60, com a técnica do timesharing 2 e o mouse e o
teclado permitindo aos desenvolvedores uma interação mais dinâmica com os computadores,
passa-se, então, para a era dos minicomputadores, que nasceu por volta nos anos 70,
trazendo essas máquinas para nossos domicílios. Essa evolução trouxe uma maior
interatividade pelo uso de menus, evitando que os usuários precisassem digitar comandos via
MS-DOS 3(LEMOS, 1997).

2
Esta tecnologia que divide o tempo da CPU entre vários terminais de entrada/saída (ANTUNES,
2000).

3
MS-DOS (Microsoft Disk Operating System) é um sistema operacional lançado pela Microsoft
para ser usado na linha de computadores IBM PC (Fonte: http://pt.wikipedia.org/wiki/MS-DOS).

19

2.2 MULTIMÍDIA E HIPERMÍDIA

O conceito de multimídia é definido, geralmente, como sendo uma integração das
mídias, em outras palavras, a utilização de vários meios para se expressar uma determinada
informação de maneira harmoniosa.

Na década de 60, utilizou-se muito o termo arte multimídia como sinônimo de
performance, no sentido de propostas artísticas que utilizavam múltiplas linguagens que
combinavam música, dança, mímica, imagens e pinturas. Muitos artistas da época, como
artistas plásticos, atores, cineastras, músicos e poetas produziram uma certa arte multimídia ,
sem conhecer as tecnologias atuais e sem saber que estas perspectivas se assemelhariam ao
conceito que temos atualmente (BOGÉA,1996).

Blattner & Dannenberg, citado por Hiratsuka (1996), eslarecem que o termo multimídia é
aplicado a sistemas que suportam mais do que um meio de saída física, mas também é
utilizado para se referir a combinações de textos e imagens em um computador. Ainda que,
em jornais e revistas impressas, textos e imagens sejam veículos de informações distintos,
não são considerados publicações multimídia.

Hiratsuka, citando Chaves (1996), afirma ainda que o termo multimídia se refere mais a
apresentações no computador que utiliza de vários meios, como o texto, o vídeo, o som, os
gráficos, o desenho, a animação, a locução e a trilha sonora.

A definição de hipertexto contrapõe-se ao conceito acima. Aurélio (1999) a descreve
como:

Conjunto de textos estruturados ou organizados dessa forma, e geralmente
implementado em meio eletrônico computadorizado, no qual as remissões
correspondem a comandos que permitem ao leitor passar diretamente aos
elementos associados.

Em A Vida Digital , Negroponte (2002) nos apresenta a hipermídia como sendo um
desenvolvimento do hipertexto, ou seja, um conjunto de informações apresentadas na forma
de textos, gráficos, sons, imagens e outros tipos de dados segundo o modelo de hipertexto.

Primo (1996) assim nos exemplifica hipermídia: quando precisamos recorrer a uma
enciclopédia é muito comum existirem termos que não conhecemos; esses termos se referem
a outros termos dentro da própria enciclopédia ou em outros lugares, o que nos faz recorrer a
outros volumes da enciclopédia ou mesmo de um dicionário. A multimídia automatiza esse

20

processo devido a hipermídia, pois assim que o usuário se depara com uma palavra que não
reconhece, ele pode clicar sobre o link e tal informação será gerada automaticamente.

2.3 INTERFACES MODERNAS

A evolução das interfaces, nos últimos 40 anos, levou o usuário do computador, que
inicialmente controlava sua máquina através de botões que faziam piscar inúmeras luzes,
para a interação direta com um computador menor, por meio do mouse, teclado e tela visual.

Hoje, a interface atinge seu ápice com a realidade virtual: simulações de ambientes em
três dimensões onde o usuário, com o uso de objetos, luvas, capacetes e o próprio toque
humano, ligados a sistemas computacionais, pode entrar nesses ambientes, interagir de
modo a sentir, mover e tocar objetos como se estivesse com seu corpo num espaço real
(LEMOS, 1997).

Pode-se perceber que Walker, em 1988, já sabia que a tendência era que o computador
se transformaria em uma espécie de espaço-computador , onde a informação está presente,
porém invisível, e cuja característica principal é a manipulação hipertextual da informação.

3 INTERFACE HOMEM-MÁQUINA

Carvalho (1994), citando Baecker & Buxton (apud Thakkar, 1990, p. 1) define a IHC
como o conjunto de processos, diálogos, e ações através do qual o usuário humano interage
com um computador .

Quando as interfaces surgiram, eram projetadas para desenvolvedores. Estes
representavam um grupo pequeno de usuários que recebiam treinamento pesado. Quando os
computadores passaram a ser destinados a um público maior, não houve preocupação de
como esses usuários iriam reagir a tal interface.

A interface sempre foi a última coisa no desenvolvimento, o que contribuiu para a
barreira da informática dos anos 80. As conseqüências dessas experiências negativas
levaram o setor de desenvolvimento a pensar na usabilidade (Cybis, 2003, p. 2).

3.1 USABILIDADE

A usabilidade foi efetivamente popularizada, no início da década de 90, pelo
dinamarquês Jakob Nielsen4 e é definida como a capacidade que um sistema interativo
oferece para seu usuário, em um determinado contexto de operação, para a realização de
tarefas, de maneira eficaz, eficiente e agradável (ISO 9241).

Eficácia é a capacidade de executar uma tarefa de forma correta e completa. A
eficiência diz respeito aos recursos gastos para conseguir ter eficácia, sejam eles tempo,
dinheiro, produtividade, entre outros e a satisfação é o conforto e aceitação do trabalho
dentro do sistema.

Segundo Cybis (2003), para desenvolver interfaces amigáveis ou ergonômicas, o
engenheiro de usabilidade deve conhecer muito bem o usuário e o seu trabalho, pois as

4
Dr. Jakob Nielsen, P.h. D., diretor do Nielsen Norman Group (http://www.nngroup.com), é
aclamado como "The Guru of Web Page Usability" (RICHTEL, 1998), escreve artigos para o
www.useit.com, um web site de sua autoria, e é autor de um dos mais famosos livros de usabilidade
Usability Engineering .

22

pessoas pensam de forma diferente e o computador, em seu trabalho, se apresenta como
uma ferramenta cognitiva5 que permite tratar melhor a informação.

A usabilidade é uma qualidade de uso, ou seja, é definida ou medida para um contexto
em que um sistema é operado. Dessa forma, um sistema pode proporcionar boa usabilidade
para um usuário experiente, mas péssima para novatos, ou vice-versa. Uma solução para
esses problemas é a adaptabilidade; uma interface adaptável permitirá que diferentes perfis
de usuários possam alcançar seus objetivos com eficiência, eficácia e satisfação.

3.2 ERGONOMIA

Em linhas gerais a ergonomia é definida como:

uma disciplina científica relacionada ao entendimento das interações entre os
seres humanos e outros elementos ou sistemas, e à aplicação de teorias,
princípios, dados e métodos a projetos a fim de otimizar o bem estar humano
e o desempenho global do sistema ABERGO6 (2005).

A origem da palavra Ergonomia deriva do grego Ergon, que significa trabalho e nomos
com o significado de normas, regra, leis. É uma área orientada para uma abordagem
sistêmica de todos os aspectos da atividade humana, desde aspectos físicos e cognitivos, até
os sociais, organizacionais, ambientais, entre outros.

Os domínios da especialização da ergonomia segundo a ABERGO (2005) podem ser
assim esquematizados:

5
Cognição: conjunto dos processos mentais usados no pensamento, na percepção, na
classificação, reconhecimento, entre outros (AURÉLIO, 1999).

6
ABERGO Associação Brasileira de Ergonomia: é uma associação sem fins lucrativos cujo o
objetivo é o estudo, a prática e a divulgação das interações das pessoas com a tecnologia, a
organização e o ambiente, considerando as suas necessidades, habilidades e limitações.

23

Tabela 1: Especializações de Ergonomia

Ergonomia Definição Foco

Física Está relacionada com as características da O estudo da postura no trabalho, manuseio
anatomia humana, antropometria, fisiologia e de materiais, movimentos repetitivos,
biomecânica em sua relação a atividade física. distúrbios músculo-esqueletais relacionados
ao trabalho, projeto de posto de trabalho,
segurança e saúde.

Cognitiva Refere-se aos processos mentais, tais como O estudo da carga mental de trabalho,
percepção, memória, raciocínio e resposta tomada de decisão, desempenho
motora, conforme afetem as interações entre especializado, interação homem-computador,
seres humanos e outros elementos de um estresse e treinamento, conforme esses se
sistema. relacionem com projetos envolvendo seres
humanos e sistemas.

Organizacional Concerne à otimização dos sistemas sócio- Comunicações, gerenciamento de recursos
técnicos, incluindo suas estruturas de tripulações (CRM - domínio aeronáutico),
organizacionais, políticas e processuais. projeto de trabalho, organização temporal do
trabalho, trabalho em grupo, projeto
participativo, novos paradigmas do trabalho,
trabalho cooperativo, cultura organizacional,
organizações em rede, tele-trabalho e gestão
da qualidade.

Fonte: ABERGO (2005)

Pode-se dizer, então, que a abordagem ergonômica para a engenharia de usabilidade
de interfaces humano-computador (IHC) é caracterizada pela consideração dos
conhecimentos disponíveis sobre habilidades e capacidades cognitivas humanas e os
aspectos ligados ao trabalho. Nesta abordagem, os dispositivos interativos do software são
centrados nos usuários. O estresse e outros fatores irão diminuir por meio de diálogos e telas
compatíveis com o perfil dos usuários com uma maior flexibilidade de interação (Cybis, 2003,
p. 6).

3.3 QUALIDADES ERGONÔMICAS PARA IHC

Abaixo, apresentam-se os oito critérios principais definidos por Bastien e Scapin7 (1993),
os quais se subdividem de modo a minimizar a ambigüidade na identificação e classificação
das qualidades e problemas ergonômicos existentes em um software interativo.

7
Bastien e Scapin são pesquisadores do INRIA (Institut Nationl de Recherche em Informatique et
em Automatique) na França.

24

3.3.1 Condução

Esse critério diz respeito a avaliação para avisar, orientar, informar, instruir e guiar o
usuário, diante de suas interações com o computador (mensagens, alertas, rótulos, entre
outros.). O software ergonômico conduz o usuário à interação com o computador,
possibilitando-o, a qualquer hora, saber onde se encontra em uma seqüência de tarefas e as
ações que pode ou não realizar facilmente; essa facilidade pode ser analisada a partir de
quatro dimensões:

Presteza: trata das informações do estado ou contexto em que o usuário se
encontra. Deve conter ferramentas de ajuda, incluindo todos os meios que
permitam o usuário conhecer as alternativas de ações pelas quais ele possa
seguir em frente. O software prestativo poupa o usuário de uma série de
comandos. Uma boa presteza leva a uma facilidade na navegação do aplicativo.

Agrupamento / Distinção de Itens: compreende a organização gráfica que indica
a forma na qual os itens são apresentados na tela.

Feedback Imediato: refere-se às respostas do sistema perante as ações do
usuário. Devem ser fornecidas de forma rápida, contendo informações claras
sobre a transação efetuada. Isso leva à satisfação e confiança do usuário e a um
melhor entendimento do sistema.

Legibilidade: uma boa legibilidade facilita a leitura da informação apresentada. A
usabilidade melhora quando se leva em conta as características cognitivas e
perceptivas dos usuários. Nielsen (2000 p. 125 e 126) nos fornece algumas dicas
para garantir a legibilidade:

o empregar cores com alto contraste entre o fundo e o texto;

o utilizar fundos lisos ou com padrões sutis;

o aproveitar fontes de tamanho apropriado para a leitura do texto;

o deixar o texto imóvel; efeitos nos textos dificultam a leitura e

o evitar o uso de palavras em maiúsculo.

25

3.3.2 Carga de Trabalho

Esse critério tem um papel importante na redução da carga cognitiva e perceptiva8 do
usuário e no aumento da eficiência do diálogo, pois é constituído do conjunto de todos os
elementos da interface que tem por objetivo reduzir a carga de trabalho do usuário. Esse
critério pode conter duas dimensões importantes:

Brevidade: esta tem como objetivo limitar a carga de trabalho de leitura, entradas
e o número de passos a serem efetuados para chegar ao objetivo que se deseja.
Divide-se em: concisão, que trata da carga perceptiva e cognitiva de entradas e
saídas individuais; e ações mínimas, que trata de limitar, o máximo possível o
número de passos que o usuário deve passar.

Densidade Informacional: este diz respeito à carga de trabalho com relação ao
conjunto total de itens de informação.

3.3.3 Controle Explícito

O usuário tem um controle de entradas explicito no software, em outras palavras, o
software somente faz o que o usuário informar explicitamente.

3.3.4 A Adaptabilidade

É a capacidade de reagir conforme o contexto e preferência do usuário. A interface deve
se adaptar a cada usuário; portanto, deve oferecer opções e comandos diferentes, permitindo
alcançar um mesmo objetivo para perfis de diferentes usuários.

3.3.5 A Gestão de Erros

Refere-se a todos os mecanismos que permitem evitar ou reduzir a ocorrência de erros,
e, se ocorrerem, que favoreçam a sua correção de modo claro.

8
Percepção: Ato, efeito ou faculdade de perceber através dos sensores do corpo humano
(AURÉLIO, 1999).

26

3.3.6 Consistência

Esse critério se refere à maneira em que as telas, relatórios, menus e outros mantêm
uma similaridade, um padrão, quando aplicados a diferentes contextos.

3.3.7 Significado dos Códigos

Esse critério qualifica a relação entre o termo e/ou o sinal e sua referência. Códigos e
nomes são significantes para seus usuários quando existe uma grande relação entre o código
e o item ou as ações referentes a ele. Ter uma codificação significativa evitará que o usuário
cometa erros.

3.3.8 A Compatibilidade

Procedimentos e o cumprimento das tarefas são compatíveis com as características do
usuário, de maneira a respeitar as expectativas ou costumes dele, em outras palavras,
comandos e telas devem ser compatíveis com o vocabulário do usuário.

3.4 MODELO DE COMPONENTES DE IHC

No capítulo anterior, foram apresentadas as qualidades dos componentes da interface
humano-computador. O modelo de componentes de IHC representa uma forma de
estabelecer uma organização para esses componentes da interface e seus conhecimentos
para analisar os elementos no modelo de camadas e abstração apresentado por Cybis (2003,
p.30) citando (BODART & VADERDONCK, 1993 apud NIELSEN, 1984).

O objetivo principal deste modelo é sugerir uma tipologia e uma morfologia de classes
de recursos de software interativo capaz de facilitar o projeto de interfaces homem-
computador ergonômicas. Ele é dividido em sete níveis:

nível de objetivos: são os objetivos dos usuários independentemente do sistema;

nível pragmático: são os componentes do sistema relacionados aos conceitos do
mundo real;

nível semântico: são os conceitos formados pelos usuários do sistema através da
sua utilização;

27

nível sintático: trata de todos os objetos de interação, como janelas, menus, caixas
de diálogos, que concorrem por um espaço na tela;

nível lexical: são os nomes dos comandos e desenhos dos ícones apresentados
na tela;

nível de primitivas: refere-se ao layout da tela com suas especificações como
fontes, linha, texturas, cores, sons, entre outros.

nível físico: esses são os dispositivos de entrada e saída.

Esse modelo proposto trabalha com classes de elementos divididos como na tabela 2 de
Cybis (2003, p. 42):

28

Tabela 2: Modelo de Características de Interfaces Homem-Computador

Organização dos Componentes Classes de Componentes
Ações Ações de Entrada Entrada de dados e comandos
Interações Tarefas Tarefa de diagnóstico,
Tarefa Corretiva,
Tarefa Destrutiva.
Diálogo por Menu,
Estilos Diálogo por Preenchimento de Formulário,
Diálogo por Linguagem de Comando.
Estrutura Seqüencial (passo a passo),
Estruturas Estrutura Paralela,
Estrutura Repetitiva.
Objetos de Interação Painéis de Controles Tela,
Janela,
Caixa de Diálogo,
Caixa de Ação/Tarefa,
Tela de Consulta,
Formulário,
Caixa de Mensagem.
Controles Compostos Barra, Painel e Página de Menu,
Barra de Ferramentas,
Lista de Seleção,
Lista de Combinação.
Grupos de Controles Grupo de Botões de Comando e de Rádio,
Grupo de Caixas de Atribuição,
Grupo de campos/mostradores de dados.

Controles Simples Botão de Comando,
Caixa de Atribuição,
Cursor do Dispositivo de Apontamento,
Escala,
Dial.
Campos de Entrada Campo de Texto,
Campo de Dado e
Campo Gráfico,
Linha de Comando.
Mostradores Estruturados Gráfico,
Diagrama de figura e de texto,
Mapa.
Mostrador Simples Mostrador de Dados.
Mostrador de Informações Rótulo,
Mensagem de Orientação, de Ajuda, de Alerta, de Aviso e
de Erro,
Indicador de Progressão,
Efeito Sonoro,
Motivo melódico,
Locução,
Fala.
Sistemas de Significado Motivados Denominação,
Abreviatura,
Ícone.
Arbitrários Código Alfanumérico,
Código de Cores,
Código de Texturas,
Código de Intermitência e de Vídeo-Reverso.
Primitivas Visuais Cor,
Fonte,
Linha,
Arranjo.
Sonoras Som.

Fonte: CYBIS, 2003, p. 42

29

3.4.1 Os Diálogos

Segundo Cybis (2003, p.40-41), os diálogos, vistos como ações, correspondem a uma
interação de entrada do usuário acompanhada de uma resposta do sistema; em outras
palavras, sempre que houver uma ação do usuário, por menor que seja, o sistema precisa
emitir rapidamente um feedback imediato e significativo. Nesse caso, os feedbacks podem ser
indisponibilidade do sistema, tempo esperado do tratamento, estado atual do sistema e o
resultado (sucesso ou fracasso).

Já as seqüências de interações entre o homem e o sistema podem ser analisadas
segundo perspectivas de tarefas, estilos e estruturas. As tarefas podem ser: de diagnóstico,
com objetivo de diagnosticar os incidentes no sistema, apoiando o usuário num tipo de ajuda,
como orientações de como proceder no estado onde se encontra; tarefa corretiva, isto é, as
mensagens de erro precisam ter um nível detalhado de informações para cada tipo de
usuário; tarefa destrutiva, como definição de opções de comando e apresentação de avisos
sobre o que cada ação do usuário irá repercutir no sistema (Idem, p. 43-44).

Os estilos de diálogos estão divididos em: diálogo por menu, que proporciona a
minimização das ações do usuário com relação ao número de opções existentes e o número
de passos necessários para lançar opções, poupando, assim, o usuário de memorizar todos
os comandos que ele pode acionar no software; diálogos por linguagem de comando, que são
mais indicados a usuários experientes, onde o usuário pode entrar com comandos aleatórios,
através dos quais o sistema guarda essas informações para acesso futuro e, com essa base,
o sistema deve também interpretar sinônimos de comandos, além de reaproveitar comandos
já digitados; diálogos por preenchimento de formulário, que são utilizados quando as entradas
são de dados. Nesse estilo, qualquer formulário deve ser comandado explicitamente pelo
usuário; e, finalmente, os diálogos por manipulação direta, que são aqueles em que uma
interface gráfica interativa é mais adequada devido a difícil criação de um diálogo (Idem, p. 44-
45).

As estruturas de interações estão divididas em: seqüenciais (passo a passo), onde um
passo só pode ser realizado após a conclusão do passo anterior; estruturas paralelas, que são
utilizadas quando as tarefas podem ser realizadas em qualquer ordem; e as estruturas
repetitivas em que os usuários realizam entradas repetidas vezes.

30

3.4.2 Os Objetos de Interação

Cybis (2003, p. 46, 47) afirma que um objeto de interação é visto como um objeto do
software que, com o processamento gera uma imagem em que o usuário pode interagir. Do
ponto de vista ergonômico, o objeto possui um atributo genérico, que se refere ao tipo de
atenção que ele pode exigir em um determinado momento, isto é, se destacar sobre os outros
objetos. Um conjunto de objetos de interação forma um layout e este deve sempre ser
padronizado. Cybis (2003, 47-78) os divide em: painéis de controle, controles compostos,
grupos de controles, controles simples, campos de entrada, mostradores estruturados,
mostradores simples e orientações. Estes estão descritos em detalhes a seguir.

3.4.2.1 Painéis de Controle

Painéis de controles são objetos compostos que, em conjunto, fornecem ao usuário um
cenário adequado para que estes realizem suas tarefas ou ações. São eles:

janelas: devem possuir um padrão com relação ao título, que deve ser significativo
e curto; é aconselhável estabelecer um limite de janelas abertas, por exemplo, 7
janelas; estas devem obedecer a uma hierarquia, mostrando a janela do aplicativo
e a janela subordinada.

Figura 1: Janela

Deve-se minimizar o esforço do usuário com relação à leitura da janela, através de
controles da caixa de diálogo na direção da leitura do usuário. Outra característica
importante é manter a consistência e a organização das janelas entre umas e
outras (SCHUHMACHER, 1998).

31

caixa de diálogo: corresponde a uma janela destinada a mensagens ou controle
de ações. Ela pode ser modal, quando exige uma resposta imediata do usuário,
ou não modal, quando permite ao usuário continuar trabalhando no aplicativo
enquanto essa aguarda em segundo plano.

Figura 2: Caixa de diálogo modal.

Schuhmacher (1998) traz algumas considerações sobre as caixas de diálogo: os
controles da caixa devem estar na direção da leitura do usuário, da esquerda para a
direita, de cima para baixo; a disposição dos objetos deve estar organizada de forma
lógica, minimizando a movimentação do cursor; deve possuir um layout padronizado,
com um título significativo; a densidade das informações deve ser balanceada para
não comprometer a legibilidade ou levar a exaustão visual do usuário; o principal
botão (default) dever ser o primeiro botão do conjunto de botões; deve pelo menos
possuir o botão de confirmação e cancelamento e, se possível, um botão de ajuda
agrupados.

fichário: é um conjunto de caixas de diálogos estabelecidas a partir da metáfora de
um arquivo em um escritório. Neles, as informações não precisam ser adicionadas
de forma seqüencial, as opções devem sempre estar disponíveis e a navegação
das fichas pode ser realizada de forma aleatória (SCHUHMACHER, 1998).

32

caixa de ação/tarefa: são comandos específicos para a entrada de parâmetros e
acionamento de tarefas. É interessante ter botões de ajuda e de fechamento da
caixa.

formulário e a tela de consulta: são destinados a ações de consulta e entrada de
um conjunto de dados. Deve-se manter um padrão dessas caixas, contendo
rótulos adequados; os campos de preenchimento obrigatório devem ser
identificados; máscaras de campos devem ser especificadas e é necessário
prever um mecanismo de navegação como a tecla TAB.

Figura 3: Formulário

Schuhmacher (1998, p.11) sugere que tais formulários sejam utilizados por usuários
com treinamento mínimo, por usuários com habilidades para digitação e em entradas
de dados onde a estrutura é rígida. Ela também considera que a interface do
formulário deve refletir a mesma ordem dos formulários em papel (se houver); deve
conter informações de ajuda de preenchimento; a seqüência das entradas devem
seguir uma lógica coerente com a expectativa do usuário; e os erros de digitação
devem ser emitidos imediatamente através de mensagens, entre outras sugestões.

caixas de mensagem: fornecem informações sobre uma situação particular; são
do tipo modais e devem sempre possuir um botão de ajuda (CYBIS, 2003). O
Windows, no caso, não utiliza botões de ajuda. Schuhmacher (1998) complementa
que as caixas de mensagens de erros servem para informar o usuário de um
problema sério que requer uma ação, antes de continuar o trabalho (figura 4).

33

Mensagens de informação servem para informar sobre o resultado de um
comando (figura 5). E mensagens de advertência alertam o usuário sobre
determinada situação que requer uma decisão e uma entrada antes de um
determinado processamento (figura 6).

Figura 4: Mensagem de erro

Figura 5: Mensagem de informação

Figura 6: Mensagem de advertência

3.4.2.2 Controles Compostos

Controles compostos são objetos de interação sensíveis às ações do usuário e devem
proporcionar facilidades na usabilidade do aplicativo. São eles:

painel de menu: corresponde às opções de ações do aplicativo. As opções de
menu devem refletir as necessidades do usuário de modo a facilitar o uso do
aplicativo. Devem ser divididos logicamente e separados por uma barra. Os
diferentes estados de ativo, inativo ou em foco devem ser visualmente
diferenciados. As opções no menu também devem ser diferenciadas como opções

34

de comando que acionam um comando da aplicação; como opções de diálogo
que acionam uma caixa de diálogo e como opções de sub-menu que acionam um
outro menu. A seleção pode ser através do ponteiro mouse, teclado ou o dedo
numa tela tátil. No uso do teclado, deve-se disponibilizar dois tipos de atalhos: os
aceleradores usados a partir de uma tecla ou de um conjunto de teclas, que
devem estar à direita no menu e os mnemônicos que acionam opções visíveis na
tela, as quais devem mostrar a letra de atalho sublinhada no menu. As opções de
apresentação do menu podem ser permanentes, isto é, sempre visíveis, ou
transitórios, que aparecem somente quando acionado pelo usuário.

páginas de menu: são telas nas quais o elemento principal é um painel de menu
permanente. Em geral, são apresentadas no prompt; devem ser padronizadas e
possuir um sistema de enumeração das opções.

barra de menu: é um painel de orientação horizontal, deve ser posicionada no alto
da tela, apresentando os comandos de base de um sistema, como: arquivo, editar,
exibir, entre outros., não mais que 8 opções.

Figura 7: Barra de menu

hipertexto: destinado à navegação entre páginas de textos relacionados. Deve
respeitar as recomendações quanto a uma estrutura organizada e a profundidade
deve ser limitada quanto a diálogos muito extensos.

Figura 8: Hipertexto

35

barra de ferramentas: é um painel de orientação geralmente acoplada ao
aplicativo. As opções devem ser definidas em ordem alfabética ou em subgrupos,
possuindo figuras significativas e também possuir uma opção de visualização dos
significados dos botões.

Figura 9: Barra de ferramentas

lista de seleção: é um tipo de menu que é empregado para a entrada de dados em
que os valores possíveis já sejam conhecidos previamente. O comprimento
recomendado deve ser uma lista de, no máximo, sete itens. Se preciso, deve
possuir uma barra de rolamento, de preferência em ordem alfabética. Também é
necessário diferenciar as opções de ativo, inativo e selecionado.

Figura 10: Lista de seleção

caixa de combinação: combina em um só objeto uma lista de seleção de
desdobrar com um campo de dados; ela proporciona maior facilidade ao usuário.

Figura 11: Caixa de combinação

36

3.4.2.3 Grupos de Controles:

Os grupos de controles podem ser:

grupo de botões de comando: deve ser utilizado quando forem poucas as opções
de comando.

grupo de botões de rádio: utilizado para a entrada de dados, quando o conjunto de
valores são conhecidos e não forem mutuamente exclusivos. Devem ser
organizados de forma lógica.

Figura 12: Botões de rádio

grupo de caixas de atribuição: utilizados quando o conjunto de valores não forem
mutuamente exclusivos e são de múltipla escolha; o layout deve ser padronizado.

Figura 13: Caixa de atribuição

grupo de campos/mostradores de dados: devem ser organizados de forma lógica
e ordenada; os campos de dados pode ser destacado pelo emprego de cores.

3.4.2.4 Controles Simples

Os controles simples são:

botão de comando: sua função é facilitar a tarefa do usuário, que realiza uma
tarefa mental de reconhecimento e não de recuperação. O usuário é conduzido na
entrada de parâmetros; isso proporciona uma redução considerável de erros de
sintaxe. Um botão pode possuir os estados de ativo, inativo, default e ativado;
para facilitar o uso, o usuário pode pressionar as teclas Enter ou Return ou o

37

mouse para navegar por esses botões. Outra informação a considerar diz respeito
aos rótulos dos botões; estes devem ser concisos e significativos e, se sua função
é acionar outra caixa de diálogo, é interessante indicar a continuidade ... .

botão de seleção: é utilizado quando uma entrada de dados corresponde a uma
ativação ou desativação de um atributo.

cursor do dispositivo de apontamento: seu objetivo é mostrar ao usuário uma
posição na tela. É através do cursor que o usuário seleciona e aciona as
funcionalidades dos objetos. Sua forma deve ser diferencial, isto é, não deve
prejudicar a visualização dos objetos que encobre. É importante mudar a forma do
cursor quando o usuário estiver em um botão ou um link.

escala: é um controle que permite visualizar uma determinada posição com o uso
do cursor.

dial: apresenta-se como um objeto circular, graduado numericamente, entre dois
intervalos, da mesma forma que a escala; o usuário interage com o dial através do
cursor.

3.4.2.5 Campos de Entrada

Os campos de entrada podem ser:

linha e área de comando: são campos uni ou multi-lineares usados para a entrada
de dados que acionam uma ou mais funcionalidades do aplicativo. Também é
interessante fornecer recursos do histórico para que o usuário possa retomar o
que digitou, por exemplo, a barra de endereços e o armazenador de formulários
do Internet Explorer que, conforme se digita, abre uma lista de opções para
selecionar aquela que já foi digitada anteriormente.

campo de dados: é uni-linear, usado para a entrada de dados que não excedam
50 caracteres; deve apresentar um rótulo identificativo e entradas explícitas, por
exemplo, formato de data (dd/mm/aaaa). Após o rótulo, deve-se apresentar um
símbolo convidativo à entrada de dados como o : . Para entrada de dados
específicos, um esquema de espaços, hífens e vírgulas podem ser definidos, por
exemplo, para a entrada de um CPF.

38

campo de texto: é multi-linear, devendo apresentar no mínimo 4 linhas e cada
linha não deve exceder a 40 caracteres.

campo gráfico: são os recursos de edição gráfica; é interessante tratar as formas
do cursor em vista dos diferentes tipos de tarefas.

3.4.2.6 Mostradores Estruturados

Mostradores são formas de apresentar os dados e as informações; eles podem ser:

lista/coluna de dados: deve possuir um cabeçalho que apresente a lista; o
alinhamento dos dados deve ser enumerado. Se a lista for muito grande, o
projetista do layout pode escolher dois tipos de navegação: por paginação, para
usuários inexperientes, usada quando a tarefa envolve a busca de uma
informação isolada ou por rolamento, usada quando o objetivo da tarefa for busca
de relações entre dados.

tabela de dados: além das recomendações da lista, deve-se cuidar para definir os
cabeçalhos das linhas e colunas, que devem ser diferentes.

texto: é uma série de frases e períodos apresentados na tela; sua organização
deve ser trabalhada para facilitar a leitura do usuário; é interessante utilizar
recursos de estilo para facilitar a compreensão do texto, mas sem excesso de
recursos.

gráfico: o título de um gráfico deve ser claro e conciso; as curvas podem ser
diferenciadas pela linha, símbolos gráficos, espessura, cores e as escalas devem
estar bem visíveis ao usuário.

diagrama de figura: é uma representação gráfica que deve mostrar as relações
espaciais entre os componentes. Se o espaço for limitado, eles podem ser
organizados em seções com botões para a navegação. Uma lupa móvel ou zoom
também devem estar disponíveis. Partes em destaque podem ser marcadas com
flechas ou círculos.

diagrama de fluxo: usado para apresentações de esquemas de dados lógicos de
um processo seqüencial; trajetórias lógicas devem ser minimizadas com pontos de

39

decisões com menor número de alternativas. O layout deve possuir um padrão
sobre a tela, os botões, o título, entre outros.

mapa: usado para apresentações de espaços geográficos; os rótulos devem ser
bem posicionados e é necessário apresentar uma orientação (norte-sul), além de
uma escala precisa. Uma legenda deve ser bem definida com cores e texturas.
Como nos diagramas de figura, também deve estar disponível uma lupa ou zoom.

3.4.2.7 Mostrador Simples

Mostradores de dados devem ter rótulos coerentes e descritivos para explicar a unidade
e o formato dos valores. Deve-se manter sempre um padrão conforme as convenções do
usuário. Se forem muitos dados, deve-se organiza-los de forma lógica, utilizando recursos de
cores para dar destaque. Para preservar a legibilidade, sugere-se a utilização de um indicador
ao lado do dado.

3.4.2.8 Orientações

Orientações são mensagens que o projetista fornece ao usuário. Elas desempenham
um papel fundamental nas manipulações cognitivas dos usuários, fornecendo caminhos. Elas
podem ser:

rótulo: pode ser um ícone, um sinal geométrico, uma palavra ou um texto. Em
todos os casos, deve-se empregar símbolos ou palavras concisas e significativas.
Em geral, desempenham um papel importante de identificar, descrever, indicar e
separar. Um rótulo possui algumas instâncias: título, que tem a função de
identificação; cabeçalho, que tem a função de identificar listas ou tabelas; prompt,
que é definido pela relação entre ele e os campos de dados; marcador, que
colocado ao lado de objetos como itens de seleção para indicar o estado desses
itens; e o separador, linha que separa uns itens de outros.

mensagem: são ajudas, alertas e avisos que o sistema deve fornecer ao usuário.
Elas podem ser permanentes ou transitórias, modais ou não modais; podem ser
requeridas pelo usuário ou acionadas por uma ação do usuário. Geralmente, são
apresentadas em forma de texto, que deve ser legível para conduzir o usuário,
podendo ser adicionado algum elemento gráfico que ajude a enfatizar a
mensagem.

40

indicador de progressão: tem a função de mostrar as etapas do processo linear
que o usuário está percorrendo.

efeito sonoro: serve para chamar a atenção do usuário e fornecer feedback. Os
efeitos sonoros podem ser concretos, quando imitam sons da realidade ou
abstratos, quando baseados em convenções sociais, como aplausos.

motivo melódico: é um conjunto de tons, que podem ser utilizados na minimização
ou maximização de janelas, entre outros.

locução e fala: locução é a verbalização de palavras e a fala é a verbalização de
textos de mensagens. Deve ser previsto um meio que permita a interrupção desta
ação. São usadas para ambientes em que o usuário precisa se deslocar do
computador.

3.4.3 Os Sistemas de Significado

Os sistemas de significado são relações de símbolos e sinais, tais como:

ícones: devem ser usados, respeitando-se o conhecimento do usuário. Algumas
recomendações: devem ser simples, mas bem destacados; podem utilizar
metáforas, contornos finos, poucas cores, efeitos de sombra e perspectiva e não
devem ser nem muito grandes, nem muito pequenos; podem possuir um rótulo
que os identifiquem na margem inferior.

códigos de forma: são sinais geométricos como linha, arco, retângulo, entre
outros. São também sinais abstratos, baseados em regras de codificação. São
utilizados, por exemplo, para codificar eventos em gráficos estatísticos.

denominações: são códigos retirados da população de usuários e formados a
partir do ambiente de trabalho do usuário, para que o usuário se familiarize com os
significados das denominações do sistema.

abreviaturas: são diminutivos claros e concisos e devem ser utilizados somente
em último caso.

códigos alfanuméricos: são códigos para expressar sinais arbitrários cujas
possibilidades são definidas por regras de codificação.

41

código de cores: aconselha-se o uso de cores para transmitir informações, chamar
a atenção, associar objetos. Para que sua utilização seja eficaz, aconselha-se
cuidar da legibilidade do texto e dos efeitos das cores sobre a performance do
usuário. É necessário respeitar algumas convenções como: o vermelho deve ser
usado como sinal de perigo, alarme, atenção, entre outros; o amarelo para aviso e
lentidão; o verde como sinal de normalidade e segurança; o laranja para valor
limite; o azul para frio; o cinza como neutralidade.

código de fonte: são as fontes, estilos e tamanhos dos textos. Estilos facilitam a
compreensão dos elementos.

código de textura: é utilizado em gráficos e mapas e deve ser escolhido de forma
que não prejudique a leitura.

código de vídeo reverso: é uma codificação binária utilizada para o destaque de
objetos, itens e opções do usuário. As inversões de textos coloridos devem ser
testados para que não haja problema no contraste com o fundo do aplicativo.

código de intermitência visual: também conhecido como pisca-pisca. Pode ser
aplicado para destacar situações em que haja perigo na ação do usuário.

3.4.4 As Primitivas

As primitivas são formas de expressões que podem ser visuais e sonoras, conforme
descritas a seguir.

As principais formas visuais envolvidas com questões ergonômicas são:

cores: recomenda-se cuidado quanto ao uso excessivo de cores. Uma sugestão é
fazer o projeto em preto e branco e depois colorir com cuidado, sempre usando
cores neutras de mesmo contraste.

fontes: recomenda-se cuidar dos espaçamentos entre os caracteres. Evite-se
fontes muito grandes. Textos só com maiúsculas também devem ser evitados e
não se exagere em sublinhados, negrito e itálicos.

bordas: utilizar traços simples para manter a leveza dos objetos de interação.

42

arranjo ou layout: definir alinhamentos para os elementos e focos de atenção.
Equilibrar as telas, balanceando a distribuição dos elementos e manter um padrão.

fundos ou background: utilizar cores neutras que garantam um contraste
adequado com qualquer combinação de cores. Recomenda-se não carregar o
fundo com imagens, pois dificulta a leitura.

As formas sonoras são utilizadas para destacar o sinal sonoro. Podem ser timbre e
freqüência: o timbre está ligado ao objeto que gera o som; a freqüência pode ser baixa ou alta,
relativamente às oitavas. É aconselhável utilizar tons da mesma oitava para evitar problemas
na constituição de sinais sonoros.

4 CICLO DA ENGENHARIA DE USABILIDADE

Cybis (2003, p. 79-80) prioriza que qualquer abordagem para engenharia de usabilidade
deve ser centrada no usuário. A usabilidade deve ser implementada através de uma série de
atividades, que, dependendo do paradigma para o ciclo de vida do produto, pode estar
concatenada de diferentes formas: em cascata, em prototipagem, em espirais ou reutilização,
como mostra a figura 14.

Fonte: Cybis, 2003, p. 83

Figura 14: Ciclo de vida do produto.

A escolha de um modelo ou outro vai depender do contexto. Uma vez escolhido o
modelo, qualquer atividade para o desenvolvimento pertencerá a uma das três perspectivas
principais: análise, síntese e avaliação.

44

Fonte: Cybis, 2003 p. 83

Figura 15: Ciclo da Engenharia de Usabilidade.

Conforme a perspectiva escolhida, as atividades ligadas a ela podem ser realizadas
mais de uma vez.

4.1 PERSPECTIVA DA ANÁLISE

Segundo Cybis (2003, p. 85), a perspectiva da análise visa a compreensão do ambiente
de operação do sistema a partir da visão dos usuários e seus objetivos. No desenvolvimento
da usabilidade, essa etapa não visualiza somente uma situação existente. Uma situação de
futuro é importante, pois além de estabelecer um foco do processo de comunicação, também
trabalha com o envolvimento do usuário conforme a figura 16.

Fonte: http://www.labutil.inf.ufsc.br/hiperdocumento/unidade3_1.html.

Figura 16: Perspectiva da Análise.

45

As fases da perspectiva da análise, segundo Cybis (2003), conforme a figura 16 são:
escopo do sistema, análise do perfil do usuário, análise de situações do trabalho atual e futuro
e análise das possibilidades e restrições da tecnologia.

4.1.1 Escopo do sistema

Nesta fase, deve-se especificar os requisitos funcionais e não funcionais do sistema, as
categorias de usuários e seus perfis específicos e as situações de uso previstas para o
sistema.

4.1.2 Análise do Usuário

Para qualquer desenvolvimento de sistemas, uma das fases mais importantes é a
análise do público-alvo (os atores). Em geral, num sistema, podem existir dois tipos de
usuários: os usuários que são operadores diretos do sistema, aqueles que interagem de forma
mais constante; e os operadores indiretos, que são apenas responsáveis pelo sistema. Para
cada tipo de usuário devem ser coletadas as seguintes informações: categoria de uso, faixa
etária, perfil profissional, freqüência de uso, experiência na tarefa, experiência em tecnologia
de informática, experiência em sistemas similares e motivação (CYBIS, 2003, p. 86).

A partir dessas informações, pode-se perceber que usuários mais jovens exigem uma
aparência e um comportamento do sistema bem diferente do que usuários idosos. O mesmo
se verifica para os dois tipos de usuários que acessam freqüentemente ou raramente o
sistema, conforme a experiência na área da informática.

Esse contato com o perfil do usuário trará uma oportunidade de conhecer mais sobre
satisfação, queixas e idéias sobre funcionalidades futuras dos usuários.

4.1.3 Análise do Trabalho

O objetivo da análise do trabalho é examinar um sistema a partir de suas dimensões de
tarefa e de atividade, considerando o seu funcionamento atual. A análise do trabalho realiza,
dentre outras coisas, a análise das tarefas, do ambiente, das atividades e elaboração de
relatório.

46

4.1.3.1 Análise das Tarefas

A análise das tarefas é realizada a partir das seguintes etapas:

entrevistas com gerentes: através delas, procura-se obter informações sobre
representação do sistema (objetivos, regras de utilização, restrições), dados
organizacionais (organização do trabalho, ligação entre os serviços, quem opera o
sistema e seus turnos de trabalho), dados econômicos (custo do sistema,
vantagens) e expectativas de informatização;

entrevistas com usuários: essa etapa permite conhecer mais sobre a
representação que o usuário tem do sistema, sua satisfação, suas queixas e as
idéias para funcionalidades futuras;

descrição das tarefas: nesta etapa, deve-se tentar obter informações detalhadas
sobre o objetivo último a alcançar, a decomposição desse objetivo em sub-tarefas,
as relações entre essas sub-tarefas, os nomes, as definições e métodos que se
deve usar em cada sub-tarefas, os estados inicial e final e a pré e a pós condição
de cada sub-tarefa.

4.1.3.2 Análise do Ambiente

A análise do ambiente é realizada in loco; deverão ser coletados dados como: layout
geral, iluminação, ruído, estado da tecnologia e ferramentas de apoio;

4.1.3.3 Análise das Atividades

Esta etapa valida as descrições que foram coletadas, devendo se conhecer: as
informações necessárias e a ordem em que se tornam disponíveis; as que são difíceis de
obter; aquelas inúteis e as impertinentes que induzem a erros. Também deve-se
complementar com o conhecimento das atividades mais freqüentes, os horários, as
deficiências, os problemas e os incidentes encontrados. Esta etapa se subdivide em:

análise de situações de normalidade: é feita a partir de observações contínuas no
ambiente de trabalho; deve-se comparar as descrições anteriores com o que
realmente é realizado pelo usuário;

47

análise de situações críticas: as situações problemáticas devem ser levantadas e
descritas para serem observadas com mais atenção;

análise de situações de erros e incidentes: são difíceis de observar e recomenda-
se que sejam preparadas simulações no ambiente do usuário (in loco) ou em
laboratório.

4.1.3.4 Elaboração do Relatório de Análise

O Relatório deve ser descrito bem detalhado e de forma hierárquica; sua estrutura deve
conter a identificação das tarefas, a identificação dos usuários, a descrição da estrutura
organizacional das tarefas, a modelagem da estrutura organizacional das tarefas, a análise
das tarefas em relação a: complexidade, freqüência, nível de erros, redundância, gargalos e
fluxo das informações e priorizar os problemas principais.

4.1.4 Análise das possibilidades e restrições tecnológicas

Esta fase procura enfatizar o ambiente tecnológico onde a síntese será realizada.
Devem ser examinados o estilo da interface, as bibliotecas para implementação e as
ferramentas de apoio à implementação.

4.2 PERSPECTIVA DA SÍNTESE

O processo da síntese deve ser o resultado da seqüência lógica de etapas, previstas na
figura 17.

Fonte: http://www.labiutil.inf.ufsc.br/hiperdocumento/unidade3_2.html.

Figura 17: Perspectiva de Síntese.

48

As fases previstas por Cybis (2003) na figura 17 são: especificação da usabilidade,
especificação do contexto de uso, re-engenharia do trabalho e projeto da interface.

4.2.1 Especificação da Usabilidade

Nesta fase, deve-se objetivar o que se pretende realizar com o sistema e deve ser
realizado de maneira quantitativa e qualitativa. O aspecto quantitativo trata da qualidade ou
aceitação pelo usuário de um sistema. A norma ISO 9241 propõe os aspectos de eficácia,
eficiência e satisfação. Conforme os resultados dos testes de aceitação de usabilidade para
diversos sistemas tenham sido registrados, seria interessante nivelar esses aspectos
quantitativos para futura comparação com um novo sistema. Para especificação qualitativa
Cybis (2003, p. 94) sugere os critérios ergonômicos de Bastien e Scapin (1993), vistos no
capítulo 6.

4.2.2 Especificação do Contexto de Uso

É importante explicitar, para todas as pessoas envolvidas no projeto, o contexto de uso
em que a interface será desenvolvida. A norma ISO 9241:11 prevê um apoio para que o
usuário alcance seus objetivos e satisfaça suas necessidades dentro de um contexto de
utilização específico. Nesta especificação, o projetista tem a oportunidade de definir estilos,
componentes e processos da interface pretendida.

4.2.3 (Re)Engenharia do Trabalho

Para montar a estrutura do trabalho é necessário que seja realizado um processo de
(re)engenharia.

As decisões sobre o papel do computador e do ser humano devem fundamentar-se nas
características cognitivas de ambos. O computador possui vantagens de velocidade e
precisão nos tratamentos lógicos, além de armazenar informações e sincronizá-las em tempo
real. Por outro lado, o ser humano tem mais facilidade, no que diz respeito ao reconhecimento
de padrões de comportamento, geração de conclusões e abstração de informações para o
processo de tomada de decisão. Outro aspecto importante, nessa fase, em relação à
realização das tarefas interativas, é o alto grau de flexibilidade.

O ponto de partida da re-engenharia é o Relatório de Análise especificado na sessão
7.1.3.4 deste trabalho. Partindo das informações do relatório, deve-se, em cada tarefa que
apresenta alto grau de complexidade, definir diversas maneiras de solução para sua

Engenharia de Usabilidade Aplicada a um Protótipo de Localização de Ambientes. Caso Unochapecó

Engenharia de Usabilidade Aplicada a um Protótipo de Localização de Ambientes. Caso Unochapecó

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (17)

Destaque

Destaque (8)

Semelhante a Engenharia de Usabilidade Aplicada a um Protótipo de Localização de Ambientes. Caso Unochapecó

Semelhante a Engenharia de Usabilidade Aplicada a um Protótipo de Localização de Ambientes. Caso Unochapecó (20)

Engenharia de Usabilidade Aplicada a um Protótipo de Localização de Ambientes. Caso Unochapecó