Design de IHC para Quiosque Interativo de Auto-Atendimento Acadêmico

UFSM
Monografia de Graduação
DESIGN DE IHC PARA
QUIOSQUE INTERATIVO DE
AUTO-ATENDIMENTO ACADÊMICO
Daniel Ferreira Mai
DI - PV
Santa Maria, RS, Brasil
2009

DESIGN DE IHC PARA
por
Daniel Ferreira Mai
Monografia apresentada ao Curso de Desenho Industrial –
Programação Visual – Universidade Federal de Santa Maria,
como requisito parcial para a aprovação na disciplina de
Trabalho de Conclusão de Curso II.
DI - PV
Santa Maria, RS, Brasil
2009

iii
Universidade Federal de Santa Maria
Centro de Artes e Letras
Curso de Graduação em Desenho Industrial
- Programação Visual -
A Comissão Examinadora, abaixo assinada,
aprova a Monografia
DESIGN DE IHC PARA
elaborada por
Daniel Ferreira Mai
como requisito parcial para a aprovação na disciplina de
Trabalho de Conclusão de Curso II
COMISSÃO EXAMINADORA:
_____________________________
Carlos Gustavo Martins Hoelzel
(Orientador)
_____________________________
Paulo Eugênio Kuhlmann
_____________________________
André Krusser Dalmazzo
Santa Maria, 30 de junho de 2009

iv
“Then as it was, then again it will be
An' though the course may change sometimes
Rivers always reach the sea“
(Robert Plant & Jimmy Page)

v
A meus pais, que me apoiaram e em mim acreditaram.
À minha amada Taís.
A todos que encontraram um rumo certo,
explorando caminhos incertos.
Não há acerto sem erro.

vi
Agradecimentos
Muito obrigado ao CPD-UFSM, por acreditar e viabilizar a concretização deste projeto.
Ao professor Carlos, pela excelente oportunidade e conhecimentos proporcionados.
Aos colegas que participaram desta jornada.
Enfim, a todos que de alguma forma contribuíram para a realização deste trabalho.
Muito obrigado!

vii
RESUMO
Monografia de Graduação
Curso de Desenho Industrial – Programação Visual
Universidade Federal de Santa Maria
DESIGN DE IHC PARA QUIOSQUE INTERATIVO
DE AUTO-ATENDIMENTO ACADÊMICO
Autor: Daniel Ferreira Mai
Orientador: Carlos Gustavo Martins Hoelzel
Local e Data da Defesa: Santa Maria, junho de 2009.
Este trabalho tem por objetivo desenvolver uma interface gráfica usuário para um quiosque
interativo de auto-atendimento acadêmico da UFSM, através de um processo de design ergo-
nômico integrado ao Ciclo de Vida de Engenharia de Usabilidade. A fim de proporcionar ao
usuário-aluno uma interação intuitiva e eficiente com as atividades disponíveis no ambiente do
sistema, o desenvolvimento deste trabalho foi fundamentado nas teorias da percepção visual
da Gestalt e em conhecimentos da Psicologia Cognitiva, Semiótica, Ergonomia de IHC e Enge-
nharia da Usabilidade. A metodologia de trabalho empregada foi o processo DEIGRAF, por
apresentar um ciclo completo de atividades para o desenvolvimento de interfaces gráficas e
por tomar como referência o meio sociocultural do usuário, os sinais ocorrentes neste meio
considerando a habilidade do usuário em reconhecê-los e usá-los, e as tarefas a serem execu-
tadas. Ao final do trabalho, a aplicação deste modelo de processo permitiu a descrição e ar-
gumentação sobre as decisões do projeto gráfico da interface a partir do reconhecimento do
universo de discurso do ator social, da estrutura das tarefas, e dos limites e capacidades da
plataforma, dos profissionais e usuários, alcançando assim os objetivos propostos na constru-
ção da interface.
Palavras-chave: Design, Ergonomia, Usabilidade, IHC, GUI, Quiosque Interativo, ATM.

viii
ABSTRACT
Graduation Monograph
Industrial Design Course – Graphic Design
Santa Maria Federal University
HCI DESIGN FOR ACADEMIC ATM INTERACTIVE KIOSK
Author: Daniel Ferreira Mai
Supervisor: Carlos Gustavo Martins Hoelzel
Defense Place and Date: Santa Maria, June 2009.
This work’s objective is to develop a graphic user interface for an academic automatic teller
machine of the UFSM, through an ergonomic design process integrated to the Usability Engi-
neering Lifecycle. In order to provide an intuitive and efficient interaction between the stu-
dent-user and the available tasks in the system’s environment, this work’s development was
based on Gestalt’s visual perception theories and knowledges from Cognitive Psychology, Se-
miotics, HCI Ergonomics and Usability Engineering. The applied work methodology was the
DEIGRAF process, which presents a complete interface development activity cycle and takes as
a reference the user sociocultural environment, the signals that occur in this environment con-
sidering the ability of the user to recognize and use them and the tasks to be carried out. At
the end of the work, the application of this process model allowed the description and the
argumentation about the graphic project decisions from the recognition of the social actor
speech universe, the tasks structure, and from the platform, professionals and users limits and
capacities, reaching so the proposed objectives on the interface building.
Keywords: Design, Ergonomics, Usability, HCI, GUI, ATM, Interactive Kiosk.

SUMÁRIO
Lista de Figuras.......................................................................................xi
Lista de Quadros ..................................................................................xiii
Lista de Tabelas.....................................................................................15
Lista de Reduções..................................................................................16
1.Introdução .........................................................................................17
1.1.Apresentação ..................................................................................... 17
1.2.Objetivos ............................................................................................ 17
1.2.1.Objetivo geral..........................................................................................17
1.2.2.Objetivos específicos ..............................................................................17
1.3.Justificativa......................................................................................... 18
1.4.Etapas metodológicas ........................................................................ 18
1.5.Estrutura do trabalho......................................................................... 19
2.Quiosques interativos e Auto-Atendimento ........................................20
3.Design de GUI e Programação Visual...................................................26
3.1.Teoria Visual da Gestalt...................................................................... 26
3.1.1.Leis da Gestalt.........................................................................................28
3.1.2.Categorias conceituais fundamentais.....................................................30
3.2.Estruturação visual............................................................................. 31
3.2.1.Estrutura modular...................................................................................31
3.2.2.Estrutura de diagramação.......................................................................32
3.3.Apresentação visual de informações ................................................. 33
3.3.1.Textos......................................................................................................33
3.3.2.Diretrizes para apresentação visual........................................................34
4.Design de IHC e Usabilidade................................................................36
4.1.Metas gerais para o design de IHC..................................................... 36
4.2.Usabilidade......................................................................................... 37
4.2.1.Heurísticas de usabilidade ......................................................................38
4.2.2.Análise das tarefas do ambiente.............................................................39
4.3.Modelos de abordagem para o design de IHC................................... 39
4.3.1.Modelo conceitual, semântico, sintático e léxico...................................40
4.3.2.Modelo GOMS.........................................................................................40
4.3.3.Modelo dos estados de ação ..................................................................40
4.3.4.Modelo de interface objeto-ação ...........................................................42
4.3.5.Widgets...................................................................................................44
5.Design de Interação e Comunicação Verbal.........................................45
5.1.Utilização de metáforas visuais.......................................................... 45
5.2.Diálogo Usuário-Máquina .................................................................. 46
5.2.1.Mensagens do sistema ...........................................................................46
5.2.2.Especificidade .........................................................................................46
5.2.3.Condução eficiente e tom positivo .........................................................47
5.2.4.Estilo centrado no usuário......................................................................47
5.2.5.Consistência gramatical ..........................................................................48
6.Metodologia ......................................................................................50

x
6.1.Etapas de desenvolvimento ............................................................... 51
6.2.Problematização................................................................................. 51
6.2.1.Serviços do sistema de auto-atendimento .............................................53
6.2.2.Requisitos para viabilização do sistema..................................................55
6.2.3.Delimitação do contexto do projeto.......................................................56
6.3.Análises .............................................................................................. 59
6.3.1.Análise dos contextos de atividade ........................................................59
6.3.2.Análise dos fluxos de tarefas ..................................................................60
6.3.3.Análise de variáveis.................................................................................61
6.4.Modelagem conceitual....................................................................... 74
6.5.Modelagem visual .............................................................................. 76
6.5.1.Instalação................................................................................................79
7.Considerações Finais ..........................................................................81
7.1.Continuidade...................................................................................... 81
7.2.Repercussão ....................................................................................... 81
8.Bibliografia.........................................................................................83
Apêndice A – Modelos de contexto das atividades .................................85
Apêndice B – Fluxos de tarefas ..............................................................97
Apêndice C – Layout da Arquitetura e Fluxos de Navegação .................108

xi
LISTA DE FIGURAS
Figura 1: Exemplos de quiosques interativos............................................... 20
Figura 2: Tela inicial do Totem Informativo.................................................. 22
Figura 3: Telas do site da UNIFRA e do sistema AlunoNet (Disponível em
<http://www.unifra.br>. Acesso em 30 mai.2009) ................................................ 23
Figura 4: Tela inicial do sistema AlunoNet (Disponível em
<http://www.unifra.br/alunonet>. Acesso em 30 mai.2009) ................................ 24
Figura 5: Estrutura modular da interface do sistema................................... 32
Figura 6: Estrutura de diagramação das colunas da interface do sistema... 33
Figura 7: Conceitos de tarefa e interface, separados em hierarquias de
objetos e ações (SHNEIDERMAN, 1998, p. 62)....................................................... 43
Figura 8: Identidade visual da marca QI – Quiosque Interativo................... 56
Figura 9: Modelo geral do contexto da atividade de utilização do sistema de
auto-atendimento acadêmico................................................................................ 58
Figura 10: Variáveis espaciais - posto de trabalho de alunos....................... 62
Figura 11: Variáveis espaciais - localização de objetos pessoais de alunos. 62
Figura 12: Variáveis espaciais - localização de painéis................................. 63
Figura 13: Variáveis espaciais - sala de aula e fachada do prédio................ 63
Figura 14: Variáveis ambientais - grafismos nos ambientes da universidade
................................................................................................................................ 64
Figura 15: Variáveis ambientais - grafismos nos ambientes da universidade
................................................................................................................................ 64
Figura 16: Variáveis cognitivas – fluxo da atividade de matrícula ............... 65
Figura 17: Variáveis histórico-culturais – fluxo da atividade “renovação de
empréstimos” ......................................................................................................... 66
Figura 18: Ícones do site da universidade .................................................... 67
Figura 19: Ícones do portal do aluno............................................................ 67
Figura 20: Ícones do site da biblioteca......................................................... 68
Figura 21: Preços e cardápio do restaurante ............................................... 68
Figura 22: Variáveis estéticas – site da UFSM (Disponível em
<http://www.ufsm.br>. Acesso em 30 mai.2009).................................................. 69
Figura 23: Variáveis estéticas – site Google® (Disponível em
<http://www.google.com.br>. Acesso em 30 mai.2009)....................................... 70

xii
Figura 24: Variáveis estéticas – site Orkut® (Disponível em
<http://www.orkut.com>. Acesso em 30 mai.2009).............................................. 70
Figura 25: Variáveis estéticas – barras de ferramentas do Adobe®
Photoshop® CS3 e CorelDraw® X3 .......................................................................... 71
Figura 26: Variáveis estéticas – área de trabalho do Windows® Vista®....... 72
Figura 27: Variáveis estéticas – interface do iPhone® da Apple®................. 73
Figura 28: Variáveis organizacionais – murais do DI e RU............................ 74
Figura 29: Variáveis organizacionais – comprovante de matrícula e
formulário de requerimento de dispensa de disciplinas........................................ 74
Figura 30: Modelagem conceitual - rascunhos de "mural virtual"............... 75
Figura 31: Modelagem conceitual - rascunhos de "sistema operacional com
janelas” ................................................................................................................... 75
Figura 32: Modelagem visual – layout da arquitetura geral da interface
(desktop)................................................................................................................. 76
Figura 33: Modelagem visual – layout da arquitetura geral da interface
(janela).................................................................................................................... 77
Figura 34: Fluxo de navegação das subseções em “Meu Perfil”.................. 78
Figura 35: Fluxo de navegação inicial........................................................... 79
Figura 36: Fluxo de navegação da seção "Notícias"................................... 108
Figura 37: Fluxo de navegação da seção "Editais" ..................................... 108
Figura 38: Fluxo de navegação da seção "Ônibus"..................................... 109
Figura 39: Fluxo de navegação da seção "Telefones UFSM"...................... 109
Figura 40: Fluxo de navegação da seção "Restaurante" ............................ 110
Figura 41: Fluxo de navegação da seção "Curso"....................................... 111
Figura 42: Fluxo de navegação da seção "Curso" (continuação)................ 112

xiii
LISTA DE QUADROS
Quadro 1: Crescimento no Auto-Atendimento Bancário 2000/2008
(FEBRABAN) ............................................................................................................ 21
Quadro 2: Estrutura da usabilidade (ISO 9241-11, 2002) ............................ 38
Quadro 3: Modelo do contexto da atividade "visualização de perfil" ......... 59
Quadro 4: Fluxo da tarefa "visualização de perfil"....................................... 60
Quadro 5: Hierarquia das informações ........................................................ 61
Quadro 6: Modelo do contexto da atividade "gerenciamento do perfil".... 85
Quadro 7: Modelo do contexto da atividade "visualização de currículo".... 85
Quadro 8: Modelo do contexto da atividade "gerenciamento do currículo"
................................................................................................................................ 86
Quadro 9: Modelo do contexto da atividade "visualização de portfólio".... 86
Quadro 10: Modelo do contexto da atividade "gerenciamento do portfólio"
................................................................................................................................ 87
Quadro 11: Modelo do contexto da atividade "visualização de horário".... 87
Quadro 12: Modelo do contexto da atividade "envio de mensagem de
contato".................................................................................................................. 88
Quadro 13: Modelo do contexto da atividade "consulta do programa das
disciplinas".............................................................................................................. 88
Quadro 14: Modelo do contexto da atividade "consulta do calendário
letivo"...................................................................................................................... 89
Quadro 15: Modelo do contexto da atividade "visualização de notícias,
avisos e eventos".................................................................................................... 89
Quadro 16: Modelo do contexto da atividade "gerenciamento de notícias,
avisos e eventos".................................................................................................... 90
Quadro 17: Modelo do contexto da atividade "visualização de editais e
vagas"...................................................................................................................... 90
Quadro 18: Modelo do contexto da atividade "gerenciamento de editais e
vagas"...................................................................................................................... 91
Quadro 19: Modelo do contexto da atividade "realização de matrícula" ... 91
Quadro 20: Modelo do contexto da atividade "impressão da 2ª via do
comprovante de matrícula".................................................................................... 92
Quadro 21: Modelo do contexto da atividade "visualização de cardápio".. 92
Quadro 22: Modelo do contexto da atividade "consulta de saldo"............. 93

xiv
Quadro 23: Modelo do contexto da atividade "transferência de saldo"..... 93
Quadro 24: Modelo do contexto da atividade " consulta de preços".......... 94
Quadro 25: Modelo do contexto da atividade "consulta dos horários de
funcionamento"...................................................................................................... 94
Quadro 26: Modelo do contexto da atividade "renovação de empréstimos"
................................................................................................................................ 95
Quadro 27: Modelo do contexto da atividade "consulta de horários de
transporte" ............................................................................................................. 95
Quadro 28: Modelo do contexto da atividade "consulta da lista telefônica
da UFSM"................................................................................................................ 96
Quadro 29: Fluxo da tarefa "gerenciamento de perfil" ............................... 97
Quadro 30: Fluxo da tarefa "visualização de currículo"............................... 97
Quadro 31: Fluxo da tarefa "gerenciamento de currículo".......................... 98
Quadro 32: Fluxo da tarefa "visualização de portfólio"............................... 98
Quadro 33: Fluxo da tarefa "gerenciamento de portfólio".......................... 99
Quadro 34: Fluxo da tarefa "visualização de horário" ................................. 99
Quadro 35: Fluxo da tarefa "envio de mensagem de contato" ................. 100
Quadro 36: Fluxo da tarefa "consulta do programa das disciplinas"......... 100
Quadro 37: Fluxo da tarefa "consulta do calendário letivo"...................... 100
Quadro 38: Fluxo da tarefa "visualização de notícias, avisos e eventos" .. 101
Quadro 39: Fluxo da tarefa "gerenciamento de notícias, avisos e eventos"
.............................................................................................................................. 101
Quadro 40: Fluxo da tarefa "visualização de editais e vagas".................... 102
Quadro 41: Fluxo da tarefa "gerenciamento de editais e vagas" .............. 102
Quadro 42: Fluxo de tarefa "realização de matrícula"............................... 103
Quadro 43: Fluxo de tarefa "Emissão da 2a via do comprovante de
matrícula" ............................................................................................................. 103
Quadro 44: Fluxo de tarefa "visualização de cardápio"............................. 104
Quadro 45: Fluxo de tarefa "consulta de saldo" ........................................ 104
Quadro 46: Fluxo de tarefa "transferência de saldo" ................................ 105
Quadro 47: Fluxo de tarefa "consulta de preços"...................................... 105
Quadro 48: Fluxo de tarefa "consulta dos horários de funcionamento"... 105
Quadro 49: Fluxo de tarefa "renovação de empréstimos" ........................ 106
Quadro 50: Fluxo de tarefa "consulta de horários de transporte" ............ 106
Quadro 51: Fluxo de tarefa "consulta da lista telefônica da UFSM".......... 107

15
LISTA DE TABELAS
Tabela 1: Especificidade das mensagens de erro do sistema....................... 47
Tabela 2: Consistência gramatical................................................................ 48
Tabela 3: Dicionário de tarefas para definição de TAG de controle de cursor
................................................................................................................................ 49
Tabela 4: Gramática consistente de comandos ........................................... 49
Tabela 5: Vagas para os cursos do CAL ofertadas em 2008
(COPERVES/UFSM, 2007)........................................................................................ 57

16
LISTA DE REDUÇÕES
CAL Centro de Artes e Letras
CIEE Centro de Integração Empresa Escola
CMS Content Management System
(Sistema de Gerenciamento de Conteúdos)
CPD Centro de Processamento de Dados
CSS Cascading Style Sheets
(Folhas de Estilo em Cascata)
DEIGRAF Design Ergonômico de Interfaces Gráficas
DERCA Departamento de Registro e Controle Acadêmico
DHTML Dynamic HTML
(HTML Dinâmico)
DI Desenho Industrial
FEBRABAN Federação Brasileira das Associações de Bancos
GOMS Goals, Operators, Methods, Selection rules
(Metas, Operadores, Métodos e Regras de Seleção)
GUI Graphic User Interface
(Interface Gráfica Usuário)
HCI
IHC
Human-Computer Interaction
Interação Humano-Computador
HTML Hypertext Markup Language
(Linguagem de Marcação de Hipertexto)
IxD Interaction Design
(Design de Interação)
IU Interface Usuário
OAI Objects-Actions Interface
(Interface de Objetos-Ações)
PRAE Pró-Reitoria de Assuntos Estudantis
RU Restaurante Universitário
SIE Sistema de Informações para o Ensino
TAG Task-Action Grammar
(Gramática de Tarefa-Ação)
UFSM Universidade Federal de Santa Maria
XML EXtensible Markup Language
Linguagem de Marcação Extensível

17
1. INTRODUÇÃO
1.1. Apresentação
Este trabalho demonstra a aplicação do processo de design ergonômico de
interface gráfica para a construção da GUI de um novo sistema de auto-
atendimento acadêmico da UFSM. Os conhecimentos e métodos empregados
englobam áreas da ergonomia cognitiva, usabilidade, design de IHC e design gráfi-
co.
1.2. Objetivos
1.2.1. Objetivo geral
Desenvolver a interface gráfica do sistema de auto-atendimento acadêmico
da Universidade Federal de Santa Maria, através de um processo sistematizado de
design ergonômico de GUI, utilizando-se de conhecimentos da ergonomia cogniti-
va, design de IHC e interação, e design gráfico integrado à estrutura de ciclo de
vida de engenharia de usabilidade, prevendo aplicação em quiosque touchscreen
(tela de toque).
1.2.2. Objetivos específicos
Desenvolver uma GUI centrada no usuário-aluno que destaque a
comunicação visual e a interação touchscreen;
Elaborar um software de auto-atendimento com características de
mashup1
, que disponibilize a realização dos principais serviços acadê-
micos de forma eficiente e centralizada;
Proporcionar um meio de publicação dos trabalhos acadêmicos em
forma de portfólio que agregue características de redes sociais;
Criar um canal alternativo de comunicação entre a universidade e os
alunos, que reúna as informações mais relevantes ao aluno no meio
acadêmico;
1
website ou aplicação web que usa conteúdo de mais de uma fonte para criar um
novo serviço completo (Wikipédia. Diponível em: <http://pt.wikipedia.org/wiki/Mashup>.
Acesso em 30 mai.2009).

18
Fortalecer a imagem do curso de Desenho Industrial na área de de-
sign de interfaces.
1.3. Justificativa
A descentralização dos serviços acadêmicos mostra-se hoje um obstáculo
frente ao dinâmico cotidiano universitário. Marcado por um estilo de vida seden-
tário e veloz, o dia-a-dia do acadêmico oferece cada vez menos tempo disponível
à realização de atividades burocráticas e fisicamente distantes.
A centralização destes serviços através de um quiosque de auto-
atendimento pode facilitar bastante o cotidiano acadêmico. Dispondo de todos
esses serviços em um só local, de maneira ergonômica e intuitiva, o acadêmico
terá acesso aos serviços mais relevantes oferecidos pela instituição de ensino, de
forma rápida e simples.
O auto-atendimento é hoje uma tendência cada vez maior na escolha da
forma de prestação de serviços por instituições de diversos tipos, inclusive as de
ensino. Além da economia de recursos humanos por parte da instituição, a dispo-
nibilidade do atendimento é permanente. Assim, o acadêmico pode ter ao seu
dispor uma ferramenta que proporcione a ele mesmo administrar sua vida aca-
dêmica, num só local, na hora que preferir.
1.4. Etapas metodológicas
A metodologia empregada para o desenvolvimento deste trabalho foi o
modelo de processo DEIGRAF (Design Ergonômico de Interfaces Gráficas), propos-
to por Hoelzel (2004). As etapas do processo DEIGRAF são as seguintes:
1) Problematização;
2) Análise;
3) Modelagem conceitual;
4) Modelagem visual;
5) Instalação.

19
1.5. Estrutura do trabalho
No primeiro capítulo é introduzido o tema auto-atendimento, tratando das
formas como é realizado hoje e os tipos de instituições que mais comumente o
utilizam. São demonstrados exemplos de utilização e informações de sistemas de
auto-atendimento acadêmicos.
No segundo capítulo são apresentadas teorias da percepção visual da Ges-
talt, tratando a seguir da composição dos elementos gráficos da interface, como a
diagramação dos textos, imagens e componentes.
O terceiro capítulo trata de metas gerais para o design de IHC e princípios
de usabilidade e design, assim como teorias e modelos de abordagem para análise
das tarefas no ambiente proposto.
O quarto capítulo aborda a comunicação verbal do sistema e suas mensa-
gens, considerando a condução do usuário através de sua estrutura e o diálogo
sistema-usuário.
O quinto capítulo apresenta a metodologia de trabalho através da aplicação
do modelo de processo DEIGRAF, mostrando os resultados de cada etapa e consi-
derando as especificações do projeto. Os resultados são ilustrados demonstrando
visualmente a construção da interface, os retrabalhos e as relações entre variá-
veis, tarefas, conceito e representações gráficas.
No sexto e último capítulo são apresentadas a conclusão e as considerações
finais, tratando das particularidades descobertas na aplicação do modelo, além
dos principais resultados do trabalho frente a seus objetivos e sugestões para sua
continuidade.

20
2.QUIOSQUES INTERATIVOS E AUTO-ATENDIMENTO
O termo quiosque interativo refere-se a um terminal de auto-
serviço computadorizado que possui um sistema para completar transa-
ções ou acessar informações. Estes tipos de dispositivos podem ser utili-
zados para retirada de dinheiro, verificação de status da conta, compra
de bens e serviços, ou simplesmente para obter informações sobre um
determinado assunto, como características e preço de um produto, ou
um mapa do local onde se situa o quiosque com informações comple-
mentares. Enfim, um quiosque funciona como uma cabine de informa-
ções, com a exceção que o cliente/usuário interage eletronicamente com
o dispositivo no lugar de um funcionário. Alguns tipos de quiosques pro-
porcionam ainda acesso à Internet.
Os quiosques são computadores especiais que processam informa-
ções, local ou remotamente, de forma interativa com o usuário, através
de toques na tela, no teclado ou mediante comandos de voz (Figura 1).
Permitem o uso de um grande número de periféricos, como impresso-
ras, leitores de cartões e de códigos de barras, sensores de aproxima-
ção, câmaras Web, microfone, sistemas de identificação, etc.
Figura 1: Exemplos de quiosques interativos

21
Utilizados hoje em hotéis, aeroportos, centros de compras, lojas
de varejo, bancos, agências governamentais, instituições de ensino e
empresas em geral, os quiosques interativos representam um salto evo-
lutivo em relação aos terminais bancários de auto-atendimento (ATMs).
Logo um dos tipos mais comuns de quiosque interativo é o de auto-atendimento.
Sua principal vantagem é a automação e melhoria da qualidade do atendimento
ao público em geral. O auto-atendimento proporciona ao público atendimento
rápido, autonomia na utilização dos serviços e ampla disponibilidade de horário e
formas de acesso.
Para a instituição prestadora de serviços, o auto-atendimento representa
diversas vantagens como eliminação do congestionamento no atendimento den-
tro dos departamentos, economia de recursos humanos, redução de custos ope-
racionais e do número de reclamações de clientes/usuários em relação ao aten-
dimento, além de agregar valor à imagem da instituição através de conceitos de
modernidade e automação.
De acordo com dados da FEBRABAN (Federação Brasileira das Associações
de Bancos), as transações automatizadas, em 2000, representaram 74,7% do to-
tal, e as realizadas com o auxílio de funcionários das agências ou telefone, no
mesmo ano, representaram apenas 25,3% do total. No período de 2000 a 2008 o
número de contas de Internet banking cresceu 292% (Figura 2-a). A instalação de
terminais de auto-atendimento no mesmo período registrou um crescimento de
57% (Figura 2-b), sendo que de 2007 a 2008 o número de terminais adaptados
para pessoas com necessidades especiais aumentou em 107,9% (Figura 2-c).
Quadro 1: Crescimento no Auto-Atendimento Bancário 2000/2008 (FEBRABAN)

22
Estes dados demonstram a crescente preferência do público pelo auto-
atendimento dentro do segmento de serviços bancários, que reflete no âmbito
geral a aceitação cada vez maior do público em relação a inovações tecnológicas
na prestação de serviços. Como conseqüência, as instituições têm buscado melho-
rar a qualidade e variedade dos serviços oferecidos, preocupando-se crescente-
mente com o usuário e suas limitações, no intuito de que cada vez mais pessoas
utilizem esses serviços.
Apesar das vantagens proporcionadas e da preferência do público em geral
pela utilização do auto-atendimento, este sistema de auto-serviço deve funcionar
adequadamente e corresponder às expectativas do usuário. Se a interação do
usuário com o sistema de auto-atendimento não ocorrer da forma esperada, aca-
bará gerando transtornos e frustração para o usuário. A imagem a seguir mostra a
tela inicial de um totem informativo em uma instituição de ensino.
Figura 2: Tela inicial do Totem Informativo
Este quiosque apresenta algumas dificuldades de utilização. Apesar de seu
título “Totem Informativo”, não há qualquer informação sobre como utilizá-lo.
Quando o cartão de identificação é inserido no local apropriado, nada ocorre (Fi-
gura 2-a). Utilizando a TrackBall e clicando no logotipo da instituição, no título ou
no endereço “www” que estão na tela, nada acontece. Após algumas tentativas
descobre-se que, quando movendo o cursor à borda inferior da tela, surge o dis-
creto botão “Iniciar” do próprio sistema operacional Microsoft® Windows® (Figura
2-b), que quando ‘clicado’ revela um menu “Programas” com duas opções: “Inicia-
lizar”, onde não há nada, e o “Internet Explorer®”, que inicia o navegador já no
site da própria instituição. Não há um sistema exclusivo para o Totem Informativo,

23
ele apenas carrega o website da instituição. Pode-se identificar que logo no início
da interação com o quiosque há dificuldades e frustração das expectativas do
usuário, pois não corresponde com o esperado. Normalmente, nesses casos, a
interação pode ser abandonada já no começo.
Acessando o site da instituição, a autenticação é feita através de um link
para o sistema de serviços acadêmicos (Figura 3-a), digitando o número de matrí-
cula e a senha (Figura 3-b). A tela inicial do sistema apresenta um menu de opções
(Figura 3-c), dentre elas “Ver notas”, onde são apresentados o número de faltas
em cada disciplina, notas parciais, média, exame, média final e situação (Figura 3-
e). A opção “Matriz curricular” mostra a grade de disciplinas do curso destacando
as já concluídas pelo aluno e aquelas sendo cursadas (Figura 3-d), que também
são mostradas na opção “Histórico escolar”, porém em forma de tabela e com
outras informações como carga horária e notas das disciplinas (Figura 3-f).
Figura 3: Telas do site da UNIFRA e do sistema AlunoNet (Disponível em
<http://www.unifra.br>. Acesso em 30 mai.2009)

24
A comunicação visual do site é pouco elaborada, a começar pelo logotipo
“AlunoNet” que possui cores demais, que não justificam seu uso (Figura 4-a). Ao
fundo do logotipo, a combinação do amarelo intenso com as linhas horizontais
fazem o fundo “vibrar” e competir com o logo, prejudicando a apresentação da
marca (Figura 4-a). Logo abaixo, o menu de navegação possui margens muito re-
duzidas (Figura 4-b) e não apresenta exatamente a mesma estrutura da lista de
opções da tela inicial (Figura 4-d), pois possui algumas opções que não constam
nesse último (dentro da opção “Auto-atendimento”). Os ícones destes dois menus
também não possuem correspondência entre si, dificultando ainda mais a percep-
ção da estrutura e identificação das seções pelo usuário. O menu de navegação
(Figura 4-b) ainda não difere os grupos de links internos e externos, podendo cau-
sar ainda mais confusão ao usuário.
Figura 4: Tela inicial do sistema AlunoNet (Disponível em
<http://www.unifra.br/alunonet>. Acesso em 30 mai.2009)
O campo “Dados pessoais” (Figura 4-c) não apresenta margens, e a escolha
das cores e estilos desta área e das telas de conteúdo interno não tem relação
com as cores do topo do site (Figura 4-a e 4-b), enfraquecendo a unidade visual do
sistema. Outro fator que contribui para a perda de identidade e unidade é a dis-
paridade nos estilos dos ícones da lista inicial, que percebe-se, por exemplo, na
diferença entre os estilos dos ícones das opções “Voluntários para Eventos”, “2ª
via do boleto” e “Arquivos/Formulários” (Figura 4-d). Por fim, a área de “Avisos

25
Importantes” também não está visualmente de acordo com o restante do layout
interno, além de aparentemente possuir um resquício de código indevido (os si-
nais de “<” e “>”) que “quebra” o visual e atrapalha a apresentação (Figura 4-e).
O fator determinante para um sistema de auto-atendimento ser bem suce-
dido está em sua capacidade de utilização pelo usuário, concretizada na interati-
vidade simbólica através da interface gráfica e medida através da usabilidade.
Portanto, uma interface projetada de acordo com as expectativas naturais do
usuário e que atenda adequadamente suas necessidades, de forma agradável,
terá grande chance de aceitação pelo público.

26
3.DESIGN DE GUI E PROGRAMAÇÃO VISUAL
Esse capítulo aborda o design de GUI enquanto sistema de comunicação vi-
sual. Apresenta as teorias da percepção visual introduzidas pela Gestalt, além de
leis, conceitos e técnicas visuais.
Segundo Hoelzel (2004), o design de GUI é uma atividade de criação e sis-
tematização de signos e sinais de comunicação visual, isto é, expressões que re-
presentam conteúdos (conceitos, processos, seres, objetos e fatos) entre o siste-
ma informatizado e o sistema humano, permitindo uma interação.
Tratando-se de comunicação visual, faz-se primeiramente necessário um
entendimento sobre o sistema de percepção visual humano, demonstrado através
das teorias da Gestalt.
3.1. Teoria Visual da Gestalt
De acordo com a teoria da percepção visual apresentada pela Gestalt, o que
acontece no cérebro não é idêntico ao que acontece na retina. A excitação cere-
bral não se dá em pontos isolados, mas por extensão. Na percepção da forma não
há um processo posterior de associação das várias sensações. A primeira sensação
é única e global (GOMES FILHO, 2003, p. 19).
Logo, não vemos partes isoladas, mas relações. Ou seja, uma parte na de-
pendência de outra parte. O postulado da Gestalt define que toda forma psicolo-
gicamente percebida em um processo consciente têm estreita relação com as
forças que integram o processo fisiológico cerebral. A explicação para a origem
dessas forças integradoras, segundo a hipótese da Gestalt, é atribuída a um dina-
mismo auto-regulador do sistema nervoso central, que em busca de sua própria
estabilidade, tende a organizar as formas em todos coerentes e unificados (ibid.).
Estes sistemas de forças internas de organização, que estruturam as formas
numa determinada ordem, seguem certos princípios básicos ou padrões. Os pa-
drões mais simples que regem o processo de percepção da forma visual são as
forças de segregação e unificação. As forças de unificação agem em virtude da
igualdade de estímulo; as de segregação, da desigualdade de estímulo. Logo,

27
para a formação de unidades, deve haver descontinuidade no estímulo, propor-
cionando o contraste (ibid. p. 20).
Para a nossa percepção, não existem qualidades absolutas de cor, brilho ou
forma – apenas relações. Se por um lado as forças de segregação e unificação
explicam a formação de unidades como pontos, linhas e manchas, não explicam,
por outro, por que uma superfície contornada (fechada) se separa do resto do
campo como unidade visual. Este fenômeno está associado ao fator de fechamen-
to, explicado por Wertheimer (apud GOMES FILHO, 2003, p. 21) como um novo
fator de organização da forma, importante para a formação de unidades. As for-
ças de organização dirigem-se para uma ordem espacial espontânea, que tende à
unidade em todos fechados, segregando, tanto quanto possível, uma superfície
do restante do campo. Trata-se de uma tendência psicológica de unir intervalos e
estabelecer ligações.
Outro fator de organização é a continuidade, onde toda unidade linear ten-
de, psicologicamente, a se prolongar na mesma direção e com o mesmo movi-
mento. Segundo a Gestalt, o fator continuidade explica tanto as formas bidimen-
sionais quanto as tridimensionais, apesar de haverem teorias divergentes a res-
peito do problema da percepção do espaço. Por um lado, a percepção do espaço
é associada como atributo original inato ao homem e mais tarde desenvolvido,
devendo-se a uma capacidade especial da retina conhecida como paralaxe bino-
cular. Por outro lado, a percepção da profundidade é interpretada como resultado
da experiência do hábito que adquirimos com objetos distantes. Aspectos tridi-
mensionais de figuras como cubos e outros desenhos em perspectiva sempre
foram explicados pela experiência (ibid. p. 22).
Existem ainda dois fatores elementares de organização: proximidade e se-
melhança. A proximidade determina que elementos óticos próximos entre si ten-
dam a unir-se visualmente, constituindo unidades. Quanto menor a distância en-
tre dois pontos, maior a força de unificação. Já a semelhança manifesta essa força
de unificação através da igualdade de forma e cor dos elementos, ou seja, ocorre
um agrupamento das partes semelhantes. O fator de organização por semelhança
é mais forte que por proximidade, pois a simples proximidade é insuficiente para
explicar o agrupamento de elementos – é necessário que estes tenham qualida-
des em comum (ibid. p. 23-24).

28
Por fim, a Gestalt constata ainda um princípio geral que abrange todos os
outros, conhecido como pregnância da forma ou força estrutural. Segundo esse
princípio, as forças de organização da forma tendem a se dirigir tanto quanto
permitirem as condições dadas no sentido da clareza, unidade, equilíbrio e Boa
Gestalt (ibid. p. 24).
3.1.1. Leis da Gestalt
3.1.1.1.Unidade
Uma unidade pode ser consubstanciada num único elemento que se encer-
ra em si mesmo, ou como parte de um todo. Mais amplamente, pode ser enten-
dida como o conjunto de dois ou mais elementos, configurando o próprio “todo”,
o próprio objeto. As unidades formais que configuram um todo são geralmente
percebidas através de relações entre os elementos (ou subunidades) que as cons-
tituem. Uma ou mais unidades formais podem ser segregadas ou percebidas den-
tro de um todo por meio de diversos elementos, como: pontos, linhas, planos,
volumes, cores, sombras, brilhos, texturas e outros, isolados ou combinados entre
si (ibid. p. 29).
3.1.1.2. Segregação
Segregação é a capacidade perceptiva de separar, identificar, evidenciar ou
destacar unidades formais em um todo compositivo ou em partes deste todo (i-
bid. p. 30).
3.1.1.3. Unificação
A unificação da forma consiste na igualdade ou semelhança dos estímulos
produzidos pelo objeto no campo visual. Há unificação quando os fatores de har-
monia, equilíbrio, ordenação visual e, principalmente, a coerência da linguagem
ou estilo formal das partes ou do todo estão presentes no objeto ou composição.
Outros fatores que também colaboram intensamente para a unificação da organi-
zação formal são as leis da proximidade e semelhança, quando presentes em par-
tes ou no objeto como um todo (ibid. p. 31).

29
3.1.1.4. Fechamento
O fator fechamento é importante para a formação de unidades, pois as for-
ças de organização da forma dirigem-se espontaneamente para uma ordem espa-
cial que tende à formação de unidades em todos fechados. Obtém-se a sensação
de fechamento visual da forma pela continuidade numa ordem estrutural defini-
da, ou seja, por meio do agrupamento de elementos de maneira a constituir uma
figura total mais fechada ou mais completa (ibid. p. 32).
3.1.1.5. Continuidade
Boa continuidade (ou continuação) é a impressão visual de como as partes
se sucedem através da organização perceptiva da forma de modo coerente, sem
quebras ou interrupções em sua trajetória ou em sua fluidez visual. A boa continu-
idade atua ou concorre, quase sempre, no sentido de se alcançar a melhor forma
possível do objeto, a forma mais estável estruturalmente (ibid. p. 33).
3.1.1.6. Proximidade
Elementos ópticos próximos entre si tendem a ser vistos juntos, e logo a
constituírem um todo, ou unidades dentro do todo. Proximidade e semelhança
são dois fatores que muitas vezes agem em comum e se reforçam mutuamente,
tanto na constituição de unidades como na unificação da forma (ibid. p. 34).
3.1.1.7. Semelhança
A igualdade de forma e de cor também desperta a tendência de se construir
unidades, ou seja, estabelecer agrupamentos de partes semelhantes. Em igualda-
de de condições, os estímulos mais semelhantes entre si, seja por forma, cor, ta-
manho, peso, direção, e outros, terão maior tendência a serem agrupados, a
constituírem partes ou unidades. Semelhança e proximidade são dois fatores que,
além de concorrerem para a formação de unidades, concorrem também para
promover a unificação do todo, do que é visto, no sentido da harmonia, ordem e
equilíbrio visual (ibid. p. 35).
3.1.1.8. Pregnância da Forma
A pregnância é a principal lei da percepção visual. Sobre ela, a Gestalt defi-
ne que qualquer padrão de estímulo tende a ser visto de tal modo que a estrutura

30
resultante é tão simples quanto o permitam as condições dadas. As forças de or-
ganização da forma tendem a se dirigir tanto quanto o permitam as condições
dadas, no sentido da harmonia e do equilíbrio visual (ibid. p. 36). Logo, quanto
melhor for a organização visual da forma do objeto, em termos de facilidade de
compreensão e rapidez de leitura ou interpretação, maior será seu grau de preg-
nância (ibid. p. 37).
3.1.2. Categorias conceituais fundamentais
3.1.2.1. Harmonia – ordem e regularidade
A harmonia trata da disposição formal bem organizada no todo, ou entre
suas partes. Na harmonia predominam os fatores de equilíbrio, ordem e regulari-
dade visual inscritos no objeto ou na composição, geralmente possibilitando uma
leitura simples e clara. Em síntese, a harmonia é o resultado de uma perfeita arti-
culação visual na integração e coerência formal das unidades ou partes do que é
representado, daquilo que é visto (ibid. p. 51).
A harmonia por ordem acontece quando há produção de concordâncias e
uniformidades entre as unidades que compõem as partes do objeto, ou ele pró-
prio como um todo. A ordem é obtida pela presença de relações ordenadas naqui-
lo que é visto, ou ainda por compatibilidade de linguagens formais, quando não
há alterações ou conflitos formais no padrão do objeto (ibid. p. 52).
A harmonia por regularidade consiste basicamente em favorecer a unifor-
midade de elementos no desenvolvimento de uma ordem onde não se permitam
irregularidades, desvios ou desalinhamentos. O objeto ou composição deve alcan-
çar um estado absolutamente nivelado em termos de equilíbrio visual (ibid. p. 53).
3.1.2.2. Equilíbrio
O equilíbrio é o estado no qual as forças que agem sobre um corpo se com-
pensam mutuamente. Ele é atingido, em sua forma mais simples, por meio de
duas forças de igual resistência, que pesam em direções opostas. No equilíbrio, a
distribuição das forças chega a um repouso, e o todo assume um caráter de inter-
dependência de todas as partes (ibid. p. 57).

31
3.1.2.3. Contraste
O entendimento do contraste inicia pelo nível básico da visão, através das
diferenças entre presença e ausência de luz. O contraste constitui a técnica mais
importante para o controle de uma mensagem visual, pois é a força que torna
visível as estratégias da composição visual. É também um processo de articulação
visual e uma força essencial para a criação de um todo coerente (ibid. p. 62).
O contraste excita e atrai a atenção do observador, enquanto estratégia vi-
sual para intensificação do significado, além de realçar esse significado para au-
mentar sua importância e dinamismo.
3.2. Estruturação visual
A estruturação da página é conseguida por divisões da superfície da man-
cha gráfica em estruturas calculadas, formando uma grelha. Esse método garante
que todas as áreas ocupadas por elementos gráficos estejam em relação propor-
cional com o espaço total da mancha gráfica, proporcionando uma estrutura or-
denada.
O uso da grelha como um sistema de ordenação é a expressão
duma atitude mental na medida em que mostra que o dese-
nhista concebe o seu trabalho em termos que são construtivos
e orientados para o futuro (MÜLLER-BROCKMANN, 1992, p.
10).
3.2.1. Estrutura modular
A grade divide um plano de duas dimensões em campos menores, podendo
ter tamanhos iguais ou diferentes. Os campos correspondem em profundidade a
um número específico de linhas de texto, e a largura dos campos corresponde à
largura das colunas. A figura a seguir mostra a grade utilizada na construção da
interface deste trabalho.

32
Figura 5: Estrutura modular da interface do sistema
Esta grade divide um espaço de tela de 1024 x 768 pixels, e foi modulada a
partir da divisão de um quadrado construtivo de 40 x 40 pixels representado no
canto superior esquerdo da figura anterior. A área deste quadrado equivale apro-
ximadamente a 1 cm2
, medida que foi tomada como tamanho ideal para área de
toque, uma vez que é grande o bastante para comportar o tamanho da ponta de
um dedo.
3.2.2. Estrutura de diagramação
Na diagramação a estrutura é dividida em áreas maiores que a divisão mo-
dular. Estas divisões separam as servem como auxílio na formação de seções mai-
ores para disposição de elementos. Na figura abaixo, apresenta-se a estrutura de
diagramação da interface, que foi arranjada a fim de obterem-se cinco colunas.
Uma destas colunas seria destinada a um menu de opções; as outras quatro pode-
riam constituir uma janela de coluna dupla ou duas janelas mais estreitas.

33
Figura 6: Estrutura de diagramação das colunas da interface do sistema
3.3. Apresentação visual de informações
3.3.1. Textos
Para Ribeiro (1985, p. 47), a tipografia é a arte de produzir textos em tipos
com a finalidade de apresentar o pensamento escrito de forma ordenada, clara e
equilibrada, que facilite a leitura e concorde graficamente com seu espírito. Os
tipos deverão ser claros, simples e facilmente legíveis; seu tamanho de corpo de-
verá estar relacionado com a superfície que ocupa. Sua disposição dará o desta-
que, de acordo com o interesse dos títulos, e em contraste e harmonia com os
espaços destinados a branco e margens. Saber perceber a expressão e o estilo dos
caracteres permite melhor escolher a família ou famílias apropriadas a cada im-
presso. A forma dos caracteres tem uma expressão própria (RIBEIRO, 1985, p. 44).
As letras, os números e os sinais de pontuação são chamados de tipos ou
caracteres, e a um conjunto ou coleção completa de tipos de determinado estilo,
dá-se o nome de fonte ou família. Os tipos podem ser classificados de acordo com

34
suas diferentes características, como presença de serifa, largura dos caracteres,
força das hastes e formato.
A família tipográfica padrão empregada nos textos e títulos da interface do
sistema foi a Calibri, por apresentar leveza, boa legibilidade e rendimento visual. É
uma família tipográfica sem serifa, mais conhecida como a nova fonte da suíte
Microsoft Office 2007. Ela substitui a família Times New Roman (para o Microsoft
Word) e Arial (para o Microsoft PowerPoint, Excel e Outlook). (Wikipédia. Diponí-
vel em: <http://pt.wikipedia.org/wiki/Calibri>. Acesso em 30 mai.2009)
3.3.2. Diretrizes para apresentação visual
Para a maioria dos sistemas interativos, a apresentação visual é um compo-
nente-chave para que o design seja bem sucedido. Smith e Mosier (apud SHNEI-
DERMAN, 1998, p. 386) apontam algumas diretrizes para apresentação visual, que
em resumo são:
Qualquer informação necessária ao usuário, em qualquer momento
de uma seqüência de transição, deve estar visualmente disponível.
Apresentar as informações em formato utilizável, sem que haja ne-
cessidade de conversões pelo usuário.
Manter um formato consistente para qualquer tipo de informação
apresentada, de uma tela para outra.
Utilizar sentenças curtas e simples.
Utilizar expressões afirmativas no lugar de negativas.
Adotar um princípio lógico para ordenação de listas; onde nenhum
princípio se aplicar, deve-se utilizar ordem alfabética.
Certificar-se que os rótulos estão suficientemente perto de seus
campos de informação, para indicar associação.
Alinhar à esquerda colunas de com informações em ordem alfabéti-
ca para permitir varredura visual rápida.
Rotular cada página em apresentações com várias páginas, para
mostrar sua relação com as demais.
Iniciar cada tela com um título ou cabeçalho, descrevendo breve-
mente o conteúdo ou propósito da tela; deixar pelo menos uma linha
em branco entre o título e o corpo da tela.

35
Para codificação por tamanho, utilizar os símbolos maiores com pelo
menos 1,5 vezes a altura dos próximos símbolos menores.
Considerar codificação por cor para aplicações onde o usuário deve
distinguir rapidamente entre diversas categorias de dados, particular-
mente quando os itens dos dados estão dispersos na tela.
Para uma tabela grande que exceda a capacidade do quadro de a-
presentação, certificar-se que os usuários poderão ver os cabeçalhos
de coluna e rótulos de linhas em todas as seções apresentadas na tabe-
la.
Proporcionar um meio para que os usuários ou administradores do
sistema possam realizar mudanças necessárias nas funções de apresen-
tação, caso os requisitos da apresentação das informações possam
mudar.

36
4. DESIGN DE IHC E USABILIDADE
Interação Humano-Computador (IHC) pode ser definida como a
disciplina relativa ao design, avaliação e implementação de sis-
temas computacionais interativos para uso humano e aos fe-
nômenos que os cercam (ROCHA & BARANAUSKAS, 2003).
4.1. Metas gerais para o design de IHC
Shneiderman (1998, p. 28) propõe três metas gerais para o design de IHC:
(1) influenciar pesquisas industriais e acadêmicas; (2) prover ferramentas, técnicas
e conhecimento para a implementação de sistemas; e (3) aumentar a consciência
do público geral sobre computadores (promover inclusão digital).
Dentre os objetivos do estudo da interação humano-computador relacio-
nados à primeira meta, destacamos o conceito de evolução gradativa (ibid., p. 29).
Enquanto os usuários inexperientes iniciam sua interação com computadores
através da seleção de menus, podem querer evoluir para possibilidades de intera-
ção mais rápidas ou mais avançadas. São necessários métodos que suavizem essa
transição do usuário iniciante ao avançado.
Há também o conceito de manipulação direta: interfaces visuais que possu-
am uma representação dos objetos de interesse do usuário são extremamente
atrativas (ibid., p. 30). Estudos empíricos podem refinar nossa compreensão sobre
o uso apropriado de representações analógicas ou metafóricas, e sobre o papel de
operações rápidas, incrementáveis e reversíveis.
A segunda meta diz respeito à documentação de diretrizes para o público
geral e para aplicações específicas. Muitos projetos tomam o rumo produtivo de
escrever suas próprias diretrizes, que são estreitamente vinculadas aos problemas
do ambiente da aplicação (ibid., p. 31). Estas diretrizes são construídas a partir de
resultados experimentais, de experiências com sistemas pré-existentes não base-
ados em computador, de pesquisas sobre sistemas de computador relacionados, e
de conjeturas inteligentes.

37
A terceira meta busca proporcionar um maior esclarecimento sobre o uso
de computadores pelo grande público. Apesar da ampla utilização e divulgação
desse tipo de tecnologia na atualidade, muitas pessoas ainda sentem-se descon-
fortáveis com os computadores. Quando utilizam uma máquina de auto-
atendimento bancário ou um processador de texto, surge o medo de cometer
erros, ansiedade quanto a danificar o equipamento, preocupação sobre sentir-se
incompetente, ou intimidação pelo computador “ser mais inteligente que o usuá-
rio” (ibid., p. 31). Estes medos são gerados, em parte, por design pobre que possui
comandos complexos demais, mensagens de erro vagas e hostis, seqüências de
ações estranhas e tortuosas, ou um estilo antropomórfico enganoso que induza
ao erro.
Cybis (et al., 2007, p. 14) aponta como dificuldade no desenvolvimento de
interfaces ergonômicas o fato destas constituírem sistemas abertos, tendo o usu-
ário como agente ativo com comportamento não-determinístico. O autor ainda
explana que as mesmas entradas e saídas de um sistema podem ter significados
distintos para diferentes pessoas, em função do momento e contexto em que se
encontram. Afirma ainda que a experiência da IHC é individual e única, na medida
em que cada pessoa é única em sua bagagem de conhecimentos e expectativas
(ibid., p. 15).
4.2.Usabilidade
Usabilidade é a qualidade que caracteriza o uso dos programas e aplicações
(CYBIS, et al., 2007, p. 15). Porém, não é uma qualidade intrínseca de um sistema,
pois depende de um acordo entre as características de sua interface e do usuário
ao buscar determinado objetivo, em determinada situação de uso.
Para Cybis (ibid.), a essência da usabilidade é o acordo entre interface, usu-
ário, tarefa e ambiente. Segundo a norma ISO 9241, usabilidade é a capacidade
que um sistema interativo oferece a seu usuário, em determinado contexto de
operação, para a realização de tarefas de maneira eficaz, eficiente e agradável
(Quadro 1). Logo, pode ser entendida como uma composição flexível, relacionada
a aspectos objetivos envolvidos na produtividade da interação, e subjetivos, liga-
dos ao prazer do usuário em sua experiência com o sistema.

38
Quadro 2: Estrutura da usabilidade (ISO 9241-11, 2002)
Pode-se dizer que a ergonomia está na origem da usabilidade, pois visa
proporcionar eficácia e eficiência, assim como o bem-estar e saúde do usuário,
através da adaptação do trabalho ao homem. Logo, seu objetivo é garantir que
sistemas e dispositivos estejam adaptados à maneira como o usuário pensa, com-
porta-se e trabalha, proporcionando usabilidade.
4.2.1. Heurísticas de usabilidade
Nielsen (apud CYBIS, 2007, p. 23) propõe um conjunto de dez heurísticas de
usabilidade:
visibilidade do estado do sistema;
mapeamento entre o sistema e o mundo real;
liberdade e controle ao usuário;
consistência e padrões;
prevenção de erros;
reconhecer em vez de relembrar;
flexibilidade e eficiência de uso;
design estético e minimalista;

39
suporte para o usuário reconhecer, diagnosticar e recuperar erros;
ajuda e documentação.
O desenvolvimento de interfaces ergonômicas que proporcionem usabili-
dade requer, fundamentalmente, conhecer bem o usuário e seu trabalho.
4.2.2. Análise das tarefas do ambiente
Segundo Shneiderman (ibid., p. 32), uma análise completa das tarefas do
ambiente pode fornecer a informação necessária para um design apropriadamen-
te funcional. Devem-se dar atenção a pontos como confiabilidade, disponibilida-
de, segurança, integridade, padronização, portabilidade, e integração. Assim que
as propostas de design são sugeridas, podem ser avaliadas em seu papel de forne-
cer tempos curtos de aprendizado, rápido desempenho de tarefas, baixas taxas de
erro, facilidade de memorização, e alta satisfação do usuário.
4.3.Modelos de abordagem para o design de IHC
Muitas teorias são necessárias para descrever os múltiplos aspectos dos sis-
temas interativos (SHNEIDERMAN, 1998, p. 53). Existem teorias explanatórias
úteis na observação de comportamento, descrição de atividades, conceito de
designs, comparação entre conceitos de alto-nível de designs, e treinamento.
Outras teorias são preditivas, e permitem comparar propostas de design a cerca
de tempo de execução ou taxas de erro.
Algumas teorias podem focar em subtarefas perceptivas ou cognitivas, co-
mo o tempo gasto para encontrar um item na tela ou o tempo para planejar a
conversão de um caractere de negrito para itálico. Previsões sobre tarefas-
motores são as melhores estabelecidas e são apuradas para previsão de pressio-
namento de teclas ou tempos de apontamento. Teorias perceptivas têm funcio-
nado na previsão do tempo de leitura para texto corrido, listas, e outros elemen-
tos formatados.
Predizer o desempenho em tarefas cognitivas complexas (combinações de
subtarefas) é particularmente difícil, dada a variedade de estratégias que podem
ser empregadas e pela elevada chance de desviar-se do caminho. A seguir são
apresentados alguns modelos preditivos de abordagem para o design de IHC.

40
4.3.1. Modelo conceitual, semântico, sintático e léxico
Foley e van Dam propuseram, no final da década de 70, um modelo de a-
bordagem com quatro níveis (apud SHNEIDERMAN, 1998, p. 54):
Nível conceitual: é o modelo mental do sistema interativo para o
usuário.
Nível semântico: descreve os significados comunicados pelos co-
mandos de entrada do usuário e pela apresentação de saídas do com-
putador.
Nível sintático: define como as unidades (palavras) que comunicam
semânticas são reunidas em uma sentença completa que instrui o
computador a realizar uma determinada tarefa.
Nível léxico: trata das dependências dos dispositivos e da precisão
dos mecanismos a que um usuário especifica a sintaxe.
Esta abordagem é naturalmente compatível com a arquitetura de software
e permite modularidade durante o design. A análise vai do conceitual ao léxico,
registrando-se detalhadamente as conexões entre os níveis.
4.3.2. Modelo GOMS
GOMS (Goals, Operators, Methods, Selection rules) é um modelo de abor-
dagem que leva em conta as metas, operadores, métodos e regras de seleção
(CARD, et al. apud SHNEIDERMAN, 1998, p. 55). Esta abordagem parte do princí-
pio que o usuário formula metas (como editar um documento) e subtarefas (como
inserir uma palavra), cada qual utilizando métodos ou procedimentos (como mo-
ver o cursor para o local desejado seguindo uma seqüência de teclas de seta). Os
operadores são ações perceptivas, motores, ou cognitivas, cuja execução é neces-
sária para alterar qualquer aspecto do estado mental do usuário ou para afetar o
ambiente da tarefa. As regras de seleção são as estruturas de controle para esco-
lher dentre os diversos métodos disponíveis para cumprir uma tarefa.
4.3.3. Modelo dos estados de ação
Norman (1988) (apud SHNEIDERMAN, 1998, p. 57) sugere um modelo de in-
teração humano-computador com sete estágios de ação:

41
1) Formação da meta;
2) Formação da intenção;
3) Especificação da ação;
4) Execução da ação;
5) Percepção do estado do sistema;
6) Interpretação do estado do sistema;
7) Avaliação do resultado.
Alguns dos estágios de Norman correspondem aproximadamente ao mode-
lo de Foley, ou seja, o usuário forma uma intenção conceitual, reformula-a nas
semânticas de alguns comandos, constrói a sintaxe solicitada, e eventualmente
produz o sinal léxico pela ação do movimento do mouse para selecionar um ponto
na tela. Norman contribui colocando seus estágios no contexto dos ciclos de ação
e avaliação. Este processo dinâmico de ação distingue sua abordagem de outros
modelos, por lidar principalmente com o conhecimento que deve estar na mente
do usuário. Além do mais, este modelo de sete estágios leva naturalmente a iden-
tificar o vão de execução (desacordo entre as intenções do usuário e as possíveis
ações) e o vão de avaliação (desacordo entre as representações do sistema e as
expectativas do usuário).
Este modelo leva Norman a sugerir quatro princípios de design funcional.
Por primeiro, o estado do sistema e as alternativas de ação devem estar visíveis.
Em segundo, deve haver um modelo conceitual adequado com uma imagem con-
sistente do sistema. Em terceiro, a interface deve englobar mapeamentos ade-
quados que revelem a relação entre os estágios. Por último, o usuário precisa
receber feedback (retorno) contínuo (ibid.).
Um modelo de estágios de ação ajuda-nos a descrever a exploração de uma
interface pelo usuário (POLSON, et al. 1990 apud SHNEIDERMAN, 1998, p. 58).
Assim que o usuário tenta cumprir seus objetivos, existem quatro pontos críticos
onde podem ocorrer falhas do usuário: (1) os usuários podem formular um objeti-
vo inadequado; (2) os usuários podem não encontrar o objeto correto na interface
devido a um rótulo ou ícone incompreensível; (3) os usuários podem não saber
como especificar ou executar uma ação desejada e; (4) os usuários podem rece-
ber feedback inapropriado ou equivocado.

42
4.3.4.Modelo de interface objeto-ação
Distinções entre sintaxe e semântica há muito têm sido feitas por desenvol-
vedores de compiladores que buscam separar a análise do texto de entrada (par-
sing) das operações que são executadas pelo texto (SHNEIDERMAN, 1998, p. 61).
Um modelo sintático-semântico de comportamento humano foi criado para des-
crever programação (id. 1980) e foi aplicado a recursos de manipulação de bancos
de dados (id. 1981). O primeiro modelo sintático-semântico fez uma grande dis-
tinção entre conceitos semânticos adquiridos de forma significativa e detalhes
sintáticos memorizados por rota. Conceitos semânticos das tarefas do usuário
foram bem organizados e permaneceram estáveis na memória, enquanto que
detalhes sintáticos das linguagens de comando foram arbitrários e tiveram que
ser treinados freqüentemente a fim de manter-se.
À medida que as GUIs substituem as linguagens de comando, a sintaxe in-
tricada dá lugar a manipulações diretas relativamente simples, aplicadas a repre-
sentações visuais de objetos e ações (id. 1998, p. 61). A ênfase agora é na exibição
visual dos objetos e ações da tarefa do usuário. Por exemplo, um conjunto de
documentos poderia ser representado por uma pasta. Logo, as ações são repre-
sentadas – lixeiras para exclusão, ou prateleiras para representar destinos para
cópia das pastas. Certamente, existem aspectos sintáticos de manipulação direta,
como saber se o arquivo deve ser arrastado à lixeira, ou a lixeira arrastada ao ar-
quivo, mas a quantia de sintaxe é pequena e pode ser pensada como pertencendo
ao nível mais baixo das ações da interface. Mesmo formas sintáticas como clique
duplo, clicar e segurar ou gestos parecem simples comparados às páginas de gra-
mática das primeiras linguagens de comando (ibid.).
O design utilizando o modelo objeto-ação começa com a compreensão da
tarefa. Esta tarefa inclui o universo dos objetos do mundo real com os quais os
usuários trabalham para realizar suas intenções e as ações que eles atribuem à-
queles objetos (ibid.). Os objetos das tarefas de alto-nível podem ser, por exem-
plo, estatísticas da bolsa de valores, um álbum de fotos, ou uma revista científica.
Estes objetos podem ser decompostos em informações sobre um único item e,
finalmente, em unidades atômicas, como preço ou data. As ações da tarefa come-
çam com intenções de alto-nível, que são decompostas em metas intermediárias
e passos individuais, conforme a figura a seguir:

43
Figura 7: Conceitos de tarefa e interface, separados em hierarquias de objetos e ações
(SHNEIDERMAN, 1998, p. 62)
Uma vez que haja acordo entre os objetos e ações da tarefa e suas decom-
posições, pode ser criada a representação metafórica dos objetos e ações da in-
terface. Os objetos da interface não possuem peso ou densidade, pois são forma-
dos de pixels que podem ser movidos ou copiados, de maneira que representem
os objetos da tarefa do mundo real com feedback para orientar o usuário. Por fim,
as ações da interface devem ser visíveis ao usuário, para que ele decomponha seu
plano em uma série de ações intermediárias, como por exemplo, abrindo uma
caixa de diálogo, com uma série detalhada de teclas e cliques (SHNEIDERMAN,
1998, p. 62).
Em linhas gerais, o modelo OAI é um modelo explanatório centrado nos ob-
jetos e ações da tarefa, e nos objetos e ações da interface. Devido ao mínimo de-
talhamento sintático, o usuário que conhece os objetos e ações de domínio da
tarefa pode aprender a utilizar a interface com relativa facilidade. O modelo OAI
também reflete o alto nível de design encontrado no uso de widgets das ferra-
mentas de construção de GUIs. Os componentes padrões têm sintaxe simples e
familiar (clique, clique duplo, arrastar, soltar), assim como formas simples de fe-
edback (destaque, rolagem, movimento), permitindo maior atenção em como
utilizar esses componentes para criar soluções eficientes. O modelo OAI também
está em harmonia com as tendências da engenharia de software voltada aos mé-
todos de design e programação orientados ao objeto (ibid., p. 63).

44
Para Preece (et al. 2005, p. 76), um modelo conceitual pode ser descrito a-
través de metáforas de interface. Neste caso, o modelo conceitual é desenvolvido
para ser semelhante, de alguma forma, a aspectos de uma ou várias entidades
físicas, mas que também tenha seu comportamento próprio e suas propriedades.
Tais modelos podem ser baseados em uma atividade, em um objeto ou em am-
bos. As metáforas de interface são baseadas em modelos conceituais que combi-
nam conhecimento familiar com novos conceitos.
4.3.5. Widgets
Segundo Shneiderman (1998, p. 60), a decomposição hierárquica é fre-
qüentemente uma ferramenta útil para lidar com a complexidade, mas muitas das
teorias e modelos preditivos seguem uma abordagem extremamente reducionis-
ta, que pode nem sempre ser válida. Em alguns casos, são difíceis de aceitar o
baixo nível de detalhamento, os números precisos que algumas vezes são ligados
às subtarefas, e a validade de somas simples de períodos de tempo.
Uma abordagem alternativa consiste em seguir as simplificações disponíveis
nas ferramentas de construção de interfaces-usuário. Em vez de lidar com atribu-
tos de nível atômico, Shneiderman (ibid.) propõe criar um modelo baseado nos
widgets (componentes de interface) suportados pela ferramenta. Uma vez que
um widget de lista de rolagem foi testado para determinar o desempenho do
usuário como uma função do número de itens e do tamanho da janela, por exem-
plo, então os futuros usuários do widget teriam geração automática da previsão
de desempenho. A previsão teria que ser derivada de alguma declaração das fre-
qüências da tarefa, mas a descrição da interface surgiria de seu processo de de-
sign.
Uma medida da relação do layout (como pares de widgets freqüentemente
usados serem adjacentes, e a seqüência da esquerda para a direita estar em har-
monia com a descrição da seqüência de tarefas) também deveria ser produzida
para guiar o designer em um possível redesign. Estimativas da complexidade per-
ceptiva e cognitiva somadas à carga motor seriam geradas automaticamente (SE-
ARS, 1992 apud SHNEIDERMAN, 1998, p. 60).

45
5.DESIGN DE INTERAÇÃO E COMUNICAÇÃO VERBAL
5.1. Utilização de metáforas visuais
O primeiro passo na geração de metáforas é identificar quais delas já estão
implícitas na descrição do problema. Por usarmos naturalmente metáforas para
falar sobre conceitos abstratos, é bem provável que já existam algumas escondi-
das na descrição da funcionalidade. No entanto, como a funcionalidade é usual-
mente definida pela equipe técnica, que não representa os usuários finais, as me-
táforas são freqüentemente inapropriadas (ERICKSON apud LAUREL, 1990, p. 69).
Para Shneiderman (1998, p. 186), certos sistemas interativos geram entusi-
asmo entre os usuários, contrastando claramente com as mais comuns reações de
má aceitação ou hostilidade direta. Os usuários entusiásticos reportam os seguin-
tes aspectos positivos:
Domínio da interface;
Competência na execução de tarefas;
Facilidade no aprendizado do sistema original e na assimilação de
funções avançadas;
Confiança na capacidade de reter domínio com o passar do tempo;
Divertimento na utilização do sistema;
Entusiasmo em mostrar o sistema a novatos;
Desejo de explorar aspectos mais poderosos do sistema.
Estes aspectos conduzem a uma imagem do usuário verdadeiramente satis-
feito. As idéias centrais nos sistemas que inspiram tal deleite estão associadas à
visibilidade dos objetos e ações de interesse; ações rápidas, reversíveis e gradati-
vas; e substituição de sintaxe complexa de linguagem-comando por manipulação
direta dos elementos de interesse. O modelo de interface objetos-ações (OAI –
objects-actions interface) fornece fundamentação para melhor compreendermos
a manipulação direta, visto que dirige o projetista a representar os objetos e a-
ções de domínio da tarefa enquanto minimiza os conceitos da interface e a carga
de memorização da sintaxe (SHNEIDERMAN, 1998, p. 187).

46
5.2. Diálogo Usuário-Máquina
5.2.1. Mensagens do sistema
Prompts normais, mensagens informativas, e respostas do sistema às ações
do usuário podem influenciar sua percepção, mas a fraseologia das mensagens de
erro ou diagnósticos de erro é decisiva. Quando erros ocorrem por motivos como
falta de conhecimento, compreensão incorreta, ou deslizes involuntários, o usuá-
rio fica confuso, sente-se incapaz, e torna-se ansioso. Mensagens de erro com um
tom arrogante condenam o usuário e aumentam a ansiedade, dificultando a cor-
reção daquele erro e aumentando a chance de erros futuros. Mensagens de erro
muito genéricas ou obscuras demais apresentarão pouca ajuda à maioria dos usu-
ários (SHNEIDERMAN, 1998, p. 373).
Estas preocupações são especialmente importantes com respeito aos inici-
antes, cuja falta de conhecimento e confiança intensifica o estresse que pode
levar a uma seqüência de falhas. Os efeitos desencorajadores de uma experiência
ruim utilizando um computador não são facilmente superados por apenas algu-
mas poucas boas experiências. Em alguns casos, os sistemas são lembrados mais
pelo que ocorreu de errado do que pelo que funcionou corretamente (SHNEI-
DERMAN, 1998, p. 374).
Segundo Dean (1982) (apud SHNEIDERMAN, 1998), a produção de um con-
junto de diretrizes para redação das mensagens de sistema não é um tarefa fácil,
devido às diferenças de opinião e a impossibilidade de ser completo. No entanto,
o aprimoramento das mensagens de erro é uma das maneiras mais fáceis e efeti-
vas de melhorar um sistema existente. Recomendações de base para preparar as
mensagens de um sistema são: especificidade, condução eficiente, tom positivo, e
estilo centrado no usuário. Estas diretrizes são particularmente importantes para
usuários novatos, mas podem beneficiar também os experientes. O estilo e con-
teúdo das mensagens do sistema podem afetar significativamente o desempenho
e satisfação do usuário. A seguir, são apresentadas estas diretrizes em detalhes.
5.2.2. Especificidade
Mensagens muito gerais dificultam ao usuário novato na identificação do
erro. Mensagens simples e culposas são frustrantes, pois não fornecem nem in-

47
formação suficiente sobre o que ocorreu de errado nem o conhecimento para
fazer dar certo. No entanto, a medida certa de especificidade é importante.
Pobre Melhor
ERRO DE SINTAXE Parênteses em aberto
ENTRADA ILEGAL Digite a primeira letra: Enviar, Abrir
DATA INVÁLIDA Dias vão de 1 a 31
NOME DE ARQUIVO INVÁLIDO Nomes de arquivo devem começar com uma letra
Tabela 1: Especificidade das mensagens de erro do sistema
5.2.3. Condução eficiente e tom positivo
Para Shneiderman (1998, p. 374), no lugar de condenar o usuário pelo que
ele fez de errado, as mensagens devem, quando possível, indicar o que o usuário
precisa fazer para corrigir sua ação. Mensagens desnecessariamente hostis que
empregam o uso de terminologia violenta podem perturbar usuários não técni-
cos. Um sistema operacional popular ameaça muitos usuários com a mensagem
“ERRO CATASTRÓFICO; REGISTRADO COMO OPERADOR”. Segundo o autor (ibid.),
não há desculpa para esta mensagem hostil, pois pode ser facilmente reescrita
para fornecer mais informação sobre o que aconteceu e o que pode ser feito para
arrumar as coisas. Palavras com conotação negativa como ilegal, erro ou inválido
devem ser evitadas. Outra solução seria informar o usuário de possíveis alternati-
vas e deixá-lo decidir entre elas, mas a melhor estratégia ainda é prevenir a ocor-
rência de erros (ibid. p. 376).
5.2.4. Estilo centrado no usuário
O termo centrado no usuário sugere o controle do sistema pelo usuário, ou
seja, tomando a iniciativa no lugar de apenas reagir. Este cenário é parcialmente
cumprido pela prevenção do uso de tom negativo e culposo nas mensagens e pela
cordialidade com o usuário. As mensagens de condução devem evitar formas im-
perativas como “ENTRE COM DADOS”, procurando focar naquele controle do
usuário, como na mensagem “PRONTO PARA INICIAR”.

48
5.2.5. Consistência gramatical
A consistência da interface é outra meta importante para o design de IHC. A
linguagem dos comandos e as seqüências de ações devem ser ordenadas, previsí-
veis, descritíveis por algumas regras, e fáceis de aprender e guardar (SHNEIDER-
MAN, 1998, p. 58). Estes conceitos podem ser visualizados em um exemplo que
mostra dois tipos de inconsistência, onde A ilustra falta de qualquer tipo de con-
sistência, e B mostra consistência exceto por uma única violação:
Consistente Inconsistente A Inconsistente B
deletar / inserir caractere deletar / inserir caractere deletar / inserir caractere
deletar / inserir palavra remover / introduzir palavra remover / inserir palavra
deletar / inserir linha destruir / criar linha deletar / inserir linha
deletar / inserir parágrafo terminar / iniciar parágrafo deletar / inserir parágrafo
Tabela 2: Consistência gramatical
Cada uma das ações na versão consistente é a mesma, enquanto as ações
variam na versão inconsistente A. Os verbos das ações inconsistentes são todos
aceitáveis, mas sua variedade sugere que levarão mais tempo para aprender, cau-
sarão mais erros, reduzirão a velocidade dos usuários, e serão mais difíceis de
serem lembrados. A versão inconsistente B é de certa forma mais maliciosa, pois
apresenta uma única inconsistência imprevisível que se destaca dramaticamente,
como se sua linguagem fosse para ser lembrada por sua peculiar inconsistência
(ibid., p. 59).
Para capturar estas noções, Reisner (1981) (apud SHNEIDERMAN, 1998, p.
59) propôs uma gramática de ações que descreve duas versões de uma interface
gráfica. Ela demonstrou que na versão onde havia uma gramática mais simples,
era mais fácil aprender. Payne e Green (1986) (apud SHNEIDERMAN, 1998, p. 59)
expandiram seu trabalho dirigindo os múltiplos níveis de consistência (léxico, sin-
tático, semântico) através de uma estrutura de marcação conhecida como TAGs
(task-action grammars – gramáticas de tarefa-ação). Eles também dirigiram al-
guns aspectos da integridade de uma linguagem tentando caracterizar um conjun-
to completo de tarefas. Por exemplo, cima, baixo, e esquerda constituem um con-

49
junto incompleto de tarefas de movimento de cursor por setas, pois está faltando
direita. Uma vez escrito o conjunto completo de mapeamentos de tarefa-ação, a
gramática da linguagem de comando pode ser confrontada com este conjunto e
testada para demonstrar integridade. Como exemplo, uma definição da TAG para
controle de cursor teria um dicionário de tarefas:
Tarefa Definição da TAG
mover-cursor-um-caractere-adiante [Direção = adiante, Unidade = caractere]
mover-cursor-um-caractere-atrás [Direção = para trás, Unidade = caractere]
mover-cursor-uma-palavra-adiante [Direção = adiante, Unidade = palavra]
mover-cursor-uma-palavra-atrás [Direção = para trás, Unidade = palavra]
Tabela 3: Dicionário de tarefas para definição de TAG de controle de cursor
Então, os esquemas de regras alto-nível que descrevem a sintaxe dos co-
mandos são:
1) tarefa [Direção, Unidade] → símbolo [Direção] + letra [Unidade]
2) símbolo [Direção = adiante] → “ALT”
3) símbolo [Direção = atrás] → “CTRL”
4) letra [Unidade = palavra] → “P”
5) letra [Unidade = caractere] → “C”
Estes esquemas vão gerar uma gramática consistente:
Tarefa Comando
mover cursor um caractere adiante ALT+C
mover cursor um caractere atrás CTRL+C
mover cursor uma palavra adiante ALT+P
mover cursor uma palavra atrás CTRL+P
Tabela 4: Gramática consistente de comandos

50
6.METODOLOGIA
Como metodologia de trabalho, empregou-se o modelo de processo Design
Ergonômico da Interface Usuário (DEIGRAF), proposto por Hoelzel (2004). Segun-
do o autor, este processo está integrado ao Ciclo de Vida de Engenharia de Usabi-
lidade nos seus aspectos gráfico-visuais, e apresenta um ciclo completo de ativi-
dades para o desenvolvimento de interface.
O Design Ergonômico de GUI é uma atividade que tem por ob-
jetivo criar um sistema de comunicação através de ferramentas
concretas (desenhos, esquemas, layouts) e abstratas (heurísti-
cas, métodos) que são representadas pelos signos da IU (HOEL-
ZEL, 2004, p. 15).
O modelo DEIGRAF toma como referência o meio sociocultural do usuário,
os sinais ocorrentes neste meio considerando a habilidade do usuário em reco-
nhecê-los e utilizá-los, e as tarefas a serem executadas.
Para Hoelzel (2004, p. 15), a tarefa de desenhar os elementos gráficos de
uma GUI é abordada como um sistema de geração de sinais gráficos, isto é, obje-
tos gráficos de interação que têm como meta a interação simbólica entre usuário
e sistema informatizado.
Um processo relevante do DEIGRAF é o The bridge. Sua aplicação se dá no
projeto de desenvolvimento de objetos-orientados (OO), multiplataforma e GUIs
que atendam às necessidades do usuário (HOELZEL, 2004, p. 53). Este processo é
dividido em três etapas fundamentais:
Etapa 1 – Transformar necessidades do usuário em requisitos con-
cretos do usuário visto como fluxo de tarefa;
Etapa 2 – Usar o método design de objetos da tarefa (Task Object
Design - TOD) para mapear os fluxos da tarefa enquanto tarefa-objeto;
Etapa 3 – Completar a metodologia mapeando as tarefas-objeto na
GUI em forma de janelas.

51
6.1. Etapas de desenvolvimento
A aplicação do modelo DEIGRAF possibilita descrever e argumentar as deci-
sões de projeto gráfico de uma interface quando é conhecido o universo do dis-
curso do ator social, a estrutura da tarefa e os limites e capacidades da platafor-
ma, dos profissionais e dos usuários. As etapas propostas neste modelo de pro-
cesso englobam: a identificação do problema; análise dos contextos das ativida-
des, fluxos das tarefas e variáveis ambientais do usuário; modelagem conceitual e
visual; e instalação da interface gráfica. Em suma, as etapas seguem esta ordem:
Problematização;
Análise;
Modelagem conceitual;
Modelagem visual;
Instalação.
6.2.Problematização
O quiosque de auto-atendimento acadêmico da UFSM surgiu como uma
proposta de trabalho em sala de aula, na disciplina de Design Instrucional, que
ganhou continuidade no presente trabalho e foi executada em conjunto do CPD –
UFSM (Centro de Processamento de Dados da UFSM). Seu propósito era disponi-
bilizar uma alternativa à prestação dos principais serviços institucionais aos alunos
e divulgar o DI e a produção acadêmica do curso em forma de portfólio.
Inicialmente, foram levantados os serviços disponíveis aos acadêmicos pe-
los setores da UFSM, que eram:
DERCA (Divisão Especial de Registro e Controle Acadêmico)*
Emissão de atestado de matrícula
Emissão de atestado de matrícula com disciplinas
Emissão de atestado de matrícula com semestre do curso
Emissão de atestado de freqüência
Emissão de atestado de provável formando
Emissão de atestado de classificação no Vestibular
Emissão de atestado de classificação no PEIES
Emissão de atestado de classificação na pós-graduação

52
Emissão de atestado de teste de suficiência
Emissão de atestado de reconhecimento de curso
Emissão de atestado de média no curso
Emissão de certidão de diploma
Emissão de certidão de conclusão dos créditos – pós-graduação
Emissão de certidão de formado com colação de grau
Emissão de certidão de formado sem colação de grau
Emissão de histórico escolar (aluno regular, aluno especial, formado)
Sistema de avaliação
FIAP
Emissão de programas didáticos (todo curso ou por disciplina)
PRAE (Pró-Reitoria de Assuntos Estudantis)*
Solicitação de auxílio transporte
Agendamento de Atendimento Odontológico
Solicitação de Benefício Sócio-Econômico
Solicitação de Monitoria Não Subsidiada
Solicitação de Moradia Estudantil
Bibliotecas UFSM
Pesquisa ao acervo***
Consulta ao acervo*
Consulta de situação do usuário***
Reserva de material***
Empréstimo de material*
Renovação de empréstimo***
Consulta de horários de funcionamento***
Emissão de documento para pagamento de multa*
RU (Restaurante Universitário)
Consulta de saldo e situação do usuário**
Consulta de cardápio da semana***
Consulta de preços***
Consulta de horários de funcionamento***
Compra de créditos*

53
Refeições: café da manhã, almoço e janta*
Agendamento de refeições**
Coordenação dos Cursos
Solicitação de reaproveitamento de disciplinas*
Solicitação de quebra de pré-requisitos*
Informações sobre matrícula*
Solicitação de matrícula**
Ajuste de matrícula*
Emissão de comprovante de matrícula*
Mural: horários, avisos, notícias e eventos*
Terminal de Ônibus
Consulta dos horários dos itinerários***
*disponível somente in loco
**disponível somente pela Internet
***disponível em ambos
6.2.1. Serviços do sistema de auto-atendimento
Os serviços a serem oferecidos através do sistema de auto-atendimento fo-
ram selecionados tendo em vista fatores como: importância do serviço para o
acadêmico em relação ao processo de graduação; relevância do serviço em rela-
ção ao cotidiano acadêmico na instituição; disponibilidade do serviço através da
Internet; viabilidade de implantação; complexidade das tarefas para realização do
serviço no sistema frente ao incremento do tempo de sessão de utilização pelo
usuário. Assim, os serviços selecionados para disponibilização através do sistema
de auto-atendimento, somados aos novos serviços propostos, agrupados por se-
ções, foram:
Serviços da Seção Meu Perfil*
Visualização do perfil pessoal
Cadastro e gerenciamento das informações pessoais**
Cadastro e gerenciamento do currículo**
Visualização do currículo
Cadastro e gerenciamento do portfólio**

54
Visualização do portfólio
Visualização do horário das disciplinas
Serviços da Seção Curso
Visualização de perfil, currículo e portfólio dos alunos
Visualização de perfil e currículo dos professores
Consulta do programa das disciplinas
Visualização do calendário letivo
Envio de mensagem de contato para a secretaria do curso*
Serviços da Seção Notícias
Visualização de notícias, avisos e eventos
Serviços da Seção Editais*
Visualização de editais da UFSM
Serviços da Seção Matrícula*
Solicitação de matrícula***
Impressão de 2ª via do comprovante de matrícula***
Serviços da Seção Restaurante
Visualização do cardápio
Consulta e transferência do saldo*
Consulta de preços
Visualização de horários de funcionamento
Serviços da Seção Biblioteca*
Renovação de empréstimos***
Serviços da Seção Ônibus
Consulta de horários dos transportes
Serviços da Seção Telefones UFSM
Consulta da lista telefônica da UFSM
*requer usuário autenticado no sistema
**disponível somente pela Internet

55
***requer confirmação de senha
6.2.2. Requisitos para viabilização do sistema
Após a definição da estrutura de serviços, foram identificados requisitos pa-
ra viabilização do sistema que geraram novas demandas, tais como:
Adaptação dos sistemas atuais de Situação do Usuário no site Biblio-
teca Web e Solicitação de Matrícula pelo Portal do Aluno para utiliza-
ção no novo formato da GUI;
Implantação de CMS (sistema gerenciador de conteúdo) para geren-
ciamento do cardápio no site do Restaurante, que até então não era
dinâmico (não utilizava banco de dados);
Re-diagramação da guia de matrícula para o novo formato de im-
pressão térmica com bobina de 11mm;
Implantação de CMS para gerenciamento dos conteúdos do sistema
de auto-atendimento: seções Notícias e Editais e Vagas;
Criação da versão web do sistema de auto-atendimento.
Observou-se ainda a necessidade de criação de uma marca para o sistema
(branding), incluindo a definição do nome (naming) e desenvolvimento da identi-
dade visual. O conceito deveria transmitir agilidade, rapidez e facilidade, de forma
simpática, amistosa e “humana”.
Uma sugestão para o nome foi “QI – Quiosque Inteligente”, que se mostrou
adequada ao conceito proposto e teve aceitação do público. A aplicação mais
conhecida da abreviatura QI é referente ao Quociente de Inteligência, um popular
conceito de uso geral. Utilizando-se da memorabilidade da sigla, uniu-se esse con-
ceito de inteligência ao quiosque de informações e serviços, atribuindo-lhe a idéia
de "serviços inteligentes". Esta é a principal característica do produto: uma espé-
cie de mashup de serviços e informações do meio acadêmico, apresentados de
maneira "inteligente" e interativa. No meio acadêmico, a busca por informação é
constante e necessária à formação do conhecimento. Como estas atividades estão
diretamente vinculadas à inteligência, aumenta o apelo do conceito frente ao
público acadêmico. Esta vantagem não está restrita somente ao meio acadêmico,
pois o conceito “QI” é de uso geral. Nesse caso está sendo aplicado como um no-
me de caráter neutro que indica seu uso – Quiosque Interativo.

56
Figura 8: Identidade visual da marca QI – Quiosque Interativo
No símbolo, buscaram-se formas arredondadas e intercaladas que expres-
sam fluidez, dinamismo e interação, conceitos que caracterizam redes sociais. As
cores equilibram-se sem concorrência, e seus tons definem bem a cor clara da
escura. O azul e o verde são as cores predominantes na interface gráfica do qui-
osque, fortalecendo a identidade da marca e vínculo com seu objeto de represen-
tação. A aplicação de gradientes, brilhos e reflexos segue conceitos da “web 2.0”
como limpeza, clareza e suavidade visual (Fig. 8).
6.2.3. Delimitação do contexto do projeto
O quiosque de auto-atendimento acadêmico foi projetado para um público
de 460 acadêmicos, aproximadamente (calculado a partir do número total de
vagas ofertadas por ano, multiplicado por quatro anos – tempo médio de duração
dos cursos do CAL). A média de idade do público varia entre 17 e 33 anos. O local
destinado à instalação do quiosque foi o corredor do curso de Desenho Industrial,
próximo à secretaria do curso, no Centro de Artes e Letras (CAL), situado no Cam-
pus da UFSM.

57
Curso Vagas
Artes Cênicas – Bacharelado 16
Artes Visuais – Bacharelado 23
Artes Visuais – Licenciatura 12
Desenho Industrial – Programação Visual 16
Desenho Industrial – Projeto de Produto 16
Música – Bacharelado 20
Música – Licenciatura 12
TOTAL 115
Tabela 5: Vagas para os cursos do CAL ofertadas em 2008 (COPERVES/UFSM, 2007)
No CAL estão os cursos de Artes Cênicas (Bacharelado), Artes Visuais (Ba-
charelado e Licenciatura), Desenho Industrial (Programação Visual e Projeto de
Produto), e Música (Bacharelado e Licenciatura), cujos alunos abrangeram a tota-
lidade do público-alvo pretendido. Foi identificado o perfil dos alunos do DI pros-
pectados, segundo informações colhidas através de entrevistas em sala de aula,
na disciplina de Design Instrucional, onde este projeto teve início. As demais cons-
tatações se deram por observação:
a média de idade era de 21 anos, que variava entre 17 e 25 anos;
a maioria tinha experiência com editores gráficos e de texto;
todos utilizavam a internet, tanto para lazer como trabalho;
os websites mais acessados eram de pesquisa (Google®), relaciona-
mento (Orkut®), vídeos (Youtube®), e-mail (Gmail® e Hotmail®) e o por-
tal da UFSM;
grande parte utilizava comunicadores de mensagem instantânea, na
maioria das vezes o Messenger® do Windows®;
a maioria estava habituada com o uso de dispositivos eletrônicos
portáteis, como celulares e tocadores de música e vídeo (MP3 e MP4
players).
Foi possível concluir que o perfil apresentava características comuns entre
os alunos observados. Eram jovens com experiência de navegação em sites e pre-

58
enchimento de formulários; com hábitos noturnos de trabalho; que buscavam
informações de forma rápida e com destacado apelo visual.
Neste contexto o quiosque tinha a necessidade de ser uma ferramenta de
suporte à realização de serviços institucionais aos acadêmicos. O contexto da utili-
zação do quiosque foi modelado da seguinte forma:
Figura 9: Modelo geral do contexto da atividade de utilização do sistema de auto-
atendimento acadêmico
A partir deste quadro, foi possível definir o contexto geral centrado no usu-
ário-aluno, assim como identificar as principais dúvidas dos usuários em relação à
utilização do sistema e execução das tarefas. As dúvidas identificadas foram:
Como operar a interface?
Como navegar pela estrutura para obter as informações e serviços?
Como consultar informações sobre alunos e professores?
Como acessar um perfil, portfólio ou currículo?
Como solicitar e ajustar matrícula? Como imprimir a guia?
Como consultar o horário e programa das disciplinas?
Como consultar o calendário letivo?
Como ver as notícias, avisos e eventos do curso?
Como ver os editais de monitoria, vagas para estágio e bolsas?

59
Como consultar o cardápio do restaurante? Como consultar e trans-
ferir o saldo do usuário?
Como consultar a situação do usuário e renovar empréstimos da bi-
blioteca?
Como ver horários de ônibus?
Como consultar a lista telefônica da UFSM?
6.3.Análises
6.3.1. Análise dos contextos de atividade
Seguindo a aplicação do DEIGRAF, a seguir são apresentados os modelos de
contexto das atividades do sistema.
Quadro 3: Modelo do contexto da atividade "visualização de perfil"
No quadro 3 é possível constatar fatores do contexto da atividade de visua-
lização de perfil. As ferramentas/meios para realização da atividade compreen-
dem o terminal do quiosque, Internet, navegador e o site ou interface do sistema
com seus objetos gráficos de interação. Os atores (tipos de usuários) envolvidos
na atividade podem ser alunos, professores ou visitantes. As regras, ou condições
necessárias à realização da tarefa, nesse caso referem-se à necessidade de haver
conteúdo cadastrado e publicado no perfil consultado. A comunidade englobada

60
pela atividade é formada por alunos e professores do CAL e de outros centros da
UFSM, assim como visitantes interessados ou potenciais clientes (prospects) do
Desenho Industrial e outros cursos divulgados no quiosque. A hierarquia das tare-
fas da atividade está relacionada à consulta de informações pessoais. Por fim, as
informações do perfil, enquanto objeto de um processo de transformação, têm
como resultado o perfil visualizado pelo usuário. Os demais modelos de contexto
das atividades encontram-se no Apêndice A deste trabalho.
6.3.2. Análise dos fluxos de tarefas
A partir da análise dos modelos de contexto das atividades, foram analisa-
dos os fluxos das tarefas, conforme abaixo.
Quadro 4: Fluxo da tarefa "visualização de perfil"
O quadro 4 apresenta o fluxo da tarefa “visualização de perfil”, que inicia
com o desejo do usuário em ver um perfil. Caso seja o próprio perfil, o usuário
deve autenticar-se no sistema e acessar a seção “Meu Perfil”. Se o usuário deseja
ver o perfil de outra pessoa, deve acessar a seção “Curso”, selecionar “Alunos” ou
“Professores”, escolher um nome da lista e como resultado o perfil será visualiza-
do pelo usuário. Os demais fluxos das tarefas encontram-se no Apêndice B deste
trabalho.
A partir da análise dos fluxos das tarefas, foi definida a hierarquia das in-
formações, conforme a figura a seguir:

61
Quadro 5: Hierarquia das informações
6.3.3. Análise de variáveis
6.3.3.1. Variáveis Espaciais
Através do levantamento fotográfico e observação dos espaços habitados
pelos alunos constatou-se uma ocupação sem ordem rígida, onde as ferramentas
são dispostas de acordo com o hábito de trabalho de cada um, geralmente mistu-
radas a outros objetos de uso pessoal. Identificou-se que no mesmo local são
realizadas atividades diversas, como desenho, leitura, ouvir música, operar com-
putador (Fig. 10).

62
Figura 10: Variáveis espaciais - posto de trabalho de alunos
Nos detalhes da Figura 11, foi possível identificar objetos pessoais compar-
tilhando espaço com ferramentas.
Figura 11: Variáveis espaciais - localização de objetos pessoais de alunos
Os espaços utilizados na universidade têm certo grau de personalização por
quem os utiliza. Em vários ambientes, foi observada a presença de painéis (Fig.
12), com lembretes, avisos, cartazes, notas, horários de aula, etc. O corredor do
curso é utilizado como ambiente de lazer pelos alunos.

Design de IHC para Quiosque Interativo de Auto-Atendimento Acadêmico

Design de IHC para Quiosque Interativo de Auto-Atendimento Acadêmico

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Design de IHC para Quiosque Interativo de Auto-Atendimento Acadêmico

Semelhante a Design de IHC para Quiosque Interativo de Auto-Atendimento Acadêmico (20)

Último

Último (8)

Design de IHC para Quiosque Interativo de Auto-Atendimento Acadêmico