Interface Usuário Máquina

PROF.
FLÁVIO IZO
LICENCIATURA EM INFORMÁTICA
Interface Usuário Máquina
CACHOEIRO DE ITAPEMIRIM
IFES
2012
Governo Federal
Ministro de Educação
Fernando Haddad
Instituto Federal do Espírito Santo (Ifes)
Reitor
Denio Rebello Arantes
Pró-Reitora de Ensino
Cristiane Tenan Schlittler dos Santos
Diretor-geral do Campus Cachoeiro de Itapemirim
Jorge Mário de Moura Zuany
Diretora do CEAD – Centro de Educação a Distância
Yvina Pavan Baldo
Coordenadores da UAB – Universidade Aberta do Brasil
Marize Lyra Silva Passos
José Mario Costa Junior
Curso de Licenciatura em Informática

Coordenação de Curso
Alexandre Fraga de Araujo
Designer Instrucional
Edmundo Rodrigues Junior
Marcelo Albuquerque Schuster
Professor Formador/Autor
Flávio Izo
I99i Izo, Flávio

Interface usuário máquina / Flávio Izo. Cachoeiro
de Itapemirim: Ifes, 2011.
79 p. : il.
ISBN: 978-85-62934-46-9

1. Interfaces (Computadores) 2. Interfaces de
usuário (sistemas de computação) 3. Interface gráfica
com o usuário (sistemas de computação). I. Instituto
Federal de Educação, Ciência e Tecnologia do Espírito
Santo. II. Título.
CDD: 005.711
DIREITOS RESERVADOS
Instituto Federal do Espírito Santo – Ifes
Av. Rio Branco, 50 – Santa Lúcia – Vitória – ES – CEP 29.056-255 – Telefone: (27) 3227-5564
Créditos de autoria da editoração

Capa: Juliana Cristina da Silva
Projeto gráfico: Juliana Cristina da Silva e Nelson Torres
Iconografia: Nelson Torres
Editoração eletrônica: Gráfica Editora Fátima
Revisão de texto:
Esther Ortlieb Faria de Almeida
COPYRIGHT – É proibida a reprodução, mesmo que parcial, por qualquer meio, sem autorização escrita dos
autores e do detentor dos direitos autorais.
Olá, Aluno(a)!
É um prazer tê-lo(a) conosco.
O IFES – Instituto Federal do Espírito Santo – oferece a você, em parceria

com as Prefeituras e com o Governo Federal, o Curso Licenciatura em
Informática, na modalidade à distância. Apesar de este curso ser ofertado
a distância, esperamos que haja proximidade entre nós, pois, hoje, graças
aos recursos da tecnologia da informação (e-mails, chat, videoconferên-
cia, etc.), podemos manter uma comunicação efetiva.
É importante que você conheça toda a equipe envolvida neste curso: co-
ordenadores, professores especialistas, tutores a distância e tutores presen-
ciais, porque, quando precisar de algum tipo de ajuda, saberá a quem
recorrer.
Na EaD – Educação a Distância, você é o grande responsável pelo sucesso

da aprendizagem. Por isso, é necessário que se organize para os estudos e
para a realização de todas as atividades, nos prazos estabelecidos, confor-
me orientação dos Professores Especialistas e Tutores.
Fique atento às orientações de estudo que se encontram no Manual do

Aluno!
A EaD, pela sua característica de amplitude e pelo uso de tecnologias mo-

dernas, representa uma nova forma de aprender, respeitando, sempre, o
seu tempo.
Desejamos-lhe sucesso e dedicação!
Equipe do IFES
ICONOGRAFIA
Veja, abaixo, alguns símbolos utilizados neste material para guiá-lo em seus estudos.
Fala do Professor
Conceitos importantes. Fique atento!
Atividades que devem ser elaboradas por você,

após a leitura dos textos.
Indicação de leituras complementares, refe-

rentes ao conteúdo estudado.
Destaque de algo importante, referente ao

conteúdo apresentado. Atenção!
Reflexão/questionamento sobre algo impor-

tante referente ao conteúdo apresentado.
Espaço reservado para as anotações que você

julgar necessárias.
APRESENTAÇÃO
Olá!
Meu nome é Flávio Izo, responsável pela disciplina Interface Usuário
Máquina. Atuo como professor do IFES há dois anos e já lecionei
em outra instituição de ensino superior (Centro Universitário São
Camilo-ES). Sou graduado em Sistemas de Informação (2005) e
Pós Graduado em Docência do Ensino Superior (2007), ambos pelo
Centro Universitário São Camilo-ES. Minhas áreas de interesse são:
Lógica de Programação, Modelagem de Dados, Banco de Dados e
Programação WEB.
Nesta disciplina, você refletirá acerca da fundamentação teórica da
Interface Usuário Máquina, conhecendo os principais conceitos e
suas aplicabilidades.
Todos os sistemas necessitam de telas (também definidas como
interface), as quais possibilitarão a comunicação do usuário com o
computador. Essa comunicação deve ocorrer de forma prática pelo
usuário do sistema, sendo estabelecida facilmente, tendo agilidade
e sendo assimiladora. Assim, estudaremos as diretrizes para a
projeção de interfaces que atendam a essas características de boa
usabilidade. Ao projetar as interfaces, devemos aplicar os conceitos
da Engenharia Cognitiva e Engenharia Semiótica.
O objetivo deste material é auxiliá-lo no estudo da disciplina
Interface Usuário Máquina, por meio de dicas e sugestões que
destacam os pontos mais importantes a serem estudados. Aqui, você
encontrará conceitos com os quais trabalharemos ao longo de todo
o Curso, o que não dispensa a utilização do livro-texto - referência
para a confecção deste trabalho -, que traz diversos exemplos
adicionais e um aprofundamento maior em vários aspectos.
Assim, desejo-lhe bastante sucesso!
Prof. Flávio Izo
Bons estudos!
Cap. 1 - Comunicação Usuário Sistema 9
1.1 O que é Interface Usuário Máquina? 9
1.2 Qual a importância das interfaces? 12
1.3 Como ocorre a comunicação? 12
1.4 Processo evolutivo das interfaces 14
1.5 Importância da comunicação do usuário com o
sistema 17
Cap. 2 - Comunicação Projetista usuário 21

2.1 Como o projetista vê o usuário? 21
Cap. 3 - Engenharia Cognitiva e Semiótica de

Sistemas 27
3.1 Cognição 27
3.1.1 Memória 28
3.1.2 Aprendizado 28
3.1.3 Leitura, fala e audição 28
3.1.4 Tomada de decisão e planejamento 28
3.1.5 Atenção 28
3.1.6 Percepção 29
3.2 Engenharia Cognitiva de sistemas 29
3.3 Engenharia Semiótica de Sistemas 32
3.3.1 Metacomunicação 34
Cap. 4 - Estilos de Interação 39

4.1 Interfaces Textuais 40
4.1.1 Linguagem de Comando 40
4.1.2 Linguagem Natural 42
4.2 Interfaces Gráficas 45
4.2.1 Manipulação Direta 45
4.2.2 Ícones 46
4.2.3 Linguagens Visuais 48
4.2.4 Seleção por Menus 50
Cap. 5 - Modelagem de Interfaces 55

5.1 Modelos de Tarefas 55
5.2 Modelos de Usuário 59
5.3 Modelos de Interação (Cenários e
storyboarding) 62
5.3.1 Cenários 62
5.3.2 Storyboarding 63
Cap. 6 - Concretização do Projeto de Interface 67

6.1 Prototipação de Interfaces 68
6.2 Testes com Usuários 70
6.3 Interpretação e Avaliação de testes 73
6.4. Re-Projeto 75
Referências 77
Comunicação Usuário
Sistema
Olá!
Neste capítulo inicial, vamos compreender como funciona a
comunicação do usuário com o sistema.
Faremos, também, um breve retorno na história para conhecer
como foi esse início de comunicação, e comprovaremos que desde
cedo o ser humano já interagia com as máquinas, porém hoje a
visão mudou um pouco e o usuário é tratado como o centro da
comunicação com o sistema, fato que antes não acontecia.
Os conhecimentos adquiridos neste capítulo serão úteis para a
aprendizagem dos demais conteúdos trabalhados nesta disciplina.
Bons estudos!
1.1 O que é Interface Usuário Máquina?
Antes de iniciar a nossa discussão sobre as Interfaces do usuário com

a máquina, é interessante levantar uma abordagem sobre as interfaces
de modo geral.
Interface
A interface é o meio pelo qual dois elementos interagem entre si
para atingir um objetivo. Sua funcionalidade é, basicamente, para
estabelecer a comunicação entre esses dois elementos.
Ex.: A chave do carro serve de interface entre o homem e o carro,
tendo como objetivo ligar o carro.
Outros exemplos: botões do celular, controle remoto da televisão, etc.
Alguns produtos são tão preocupados com a interação com o usuário

que suas interfaces mudam de acordo com o utilizador. Um exemplo são
as tesouras. Peça para uma pessoa canhota utilizar uma tesoura comum
(que foi feita para destro). Ela provavelmente sentirá dificuldades.
Por esse motivo, muitas empresas atualmente fabricam tesouras para
canhotos e para destros.
10
Prof. Flávio Izo
Figura 01: Interfaces personalizadas para cada tipo de usuário
Tesoura para Canhotos Tesoura para Destros
Essa preocupação faz com que os usuários sintam-se à vontade para

realizar suas tarefas, mesmo as mais simples como cortar papel.
Continuando a nossa disciplina, precisamos discutir acerca da interface

usuário máquina (IUM). Para tal, vamos dividir as palavras:
Figura 02: Decifrando a Interface Usuário Máquina
INTERFACE USUÁRIO
Permite a comunicação Ser humano que vai fazer
entre dois ou mais uso do sistema. Pode ser
elementos (objetos, seres leigo, intermediário ou
humanos, etc.). experiente.
Ex: tela de um sistema.
MÁQUINA
Equipamento que possi-
bilita o processamento de
dados.
Ex.: Computador
Corroborando o que foi mostrado na divisão das palavras acima,

poderíamos formar uma única frase que fizesse esta explicação:
“A interface Usuário Máquina é um meio que permite a comunicação

entre o usuário e a máquina visando atingir algum objetivo. As IUM
podem ser representadas por uma tela, som, cartões perfurados, etc.”
Já imaginou um usuário tentando ligar a televisão conectando fios e

acessando diretamente os circuitos? Já pensou correr o risco de tomar
11
choques elétricos por ações incorretas? Ufa! Ainda bem que existem
os botões na televisão e o controle remoto servindo de interfaces. Até
criança consegue utilizá-lo.
Como vimos, a interface é fundamental para que o usuário consiga se

comunicar com a máquina. Isso ocorre porque as máquinas possuem uma
linguagem diferente da linguagem humana (independente do idioma).
As máquinas utilizam uma linguagem denominada “linguagem

máquina” ou linguagem binária. Essa linguagem é composta por códigos
com dois tipos de números: o “zero” e o “um”. Por isso se diz binário.
Figura 03: Representação do código binário
1000
0
1010 1100101
1 0
1010 0000101 000
1000 1
1011 0101 100
0110 1100
1110 0
1011 1011100
1101
1100
1
0
En
te
r
Como percebemos na figura 03, seria muito complicado para o usuário

utilizar um sistema que permitisse somente a entrada de códigos
binários. Um grave problema que poderia ocorrer é que os usuários
leigos e intermediários seriam deixados de lado, pois somente os
experientes conseguiriam utilizá-lo.
E é justamente essa necessidade de que todos pudessem ser capazes de

se tornar usuários (independente do nível de conhecimento) que fez
com que os sistemas evoluíssem juntamente com suas interfaces, que
se tornaram cada vez melhores e mais fáceis de utilizar. Veremos mais
sobre o processo histórico mais adiante.
12
Prof. Flávio Izo
Não podemos esquecer que o usuário interage com a interface

que, por sua vez, interage com a máquina, para que a ação
desejada seja executada.
1.2 Qual a importância das interfaces?
A resposta para essa pergunta é bem simples: devemos estudar a respeito

das interfaces porque estas estão presentes em todos os equipamentos
eletrônicos atuais. Seja um celular, um iPhone ou uma televisão, todos
possuem interfaces. Então, deve-se conhecer bem sobre elas para
planejar boas interações.
Como já citado, o usuário necessita de uma interface e que esta seja

“amigável” para que ele consiga utilizar o sistema de forma mais
abrangente. No entanto, quando ocorre o contrário, o sistema pode
correr um sério risco de fracassar.
Um sistema é composto pela aplicação (funções) e interface. Quando um

sistema é bem feito, o usuário consegue utilizá-lo sem muitas dificuldades.
O certo é que a qualidade da interface é importante sempre, mas em

algumas atividades ela se torna essencial. Pense na seguinte hipótese:
• Ao tentar efetuar o pouso, o piloto do avião percebe que as

condições climáticas não estão favoráveis. Sendo assim, ele precisa
arremeter (subir) o avião rapidamente, caso contrário uma tragédia
poderá ocorrer.
Apesar de parecer, essa situação não é improvável de acontecer. Todos

os dias pilotos necessitam efetuar essas ações. Uma boa interface entre o
piloto e a aplicação do avião é essencial, não pode conter erros.
1.3 Como ocorre a comunicação?
A comunicação pode ocorrer de diversas formas. A essas formas, damos

o nome de “estilos de interação”. Os estilos podem ser textuais ou gráficos.
13
Figura 04: Estilo de interação textual
Figura 05: Estilo de interação gráfico
As duas imagens acima representam a mesma ação, porém executadas

em ambientes de interação diferentes. Na primeira, foi utilizado o
ambiente MS-DOS, enquanto na segunda, o Windows 7.
Antigamente, os primeiros sistemas possuíam interfaces com estilos

textuais, conforme vimos na figura 04, e os usuários necessitavam ter
um conhecimento bem apurado (serem bem experientes) para executar
as tarefas desejadas, apesar de que este estilo possibilita acesso a
funcionalidades bem mais abrangentes também.
Com o passar dos anos e a evolução dos computadores, as interfaces

ganharam um aliado forte: o estilo gráfico que possibilitou que usuários
leigos conseguissem utilizar os sistemas e aprendessem com eles ao
longo do tempo. Isso só foi possível porque esse estilo possui cores e
janelas dinâmicas que interagem de maneira mais rápida com o usuário.
Falaremos mais à frente sobre as diversas formas de comunicação entre

o usuário e o sistema.
14
Prof. Flávio Izo
1.4 Processo evolutivo das interfaces
Já vimos que a interface serve de interconexão entre dois sistemas que

trocam informações, sendo eles: de um lado, o computador; de outro,
o ser humano. No entanto, antigamente não se tinha tanta preocupação
com o usuário (ser humano).
Com o surgimento dos primeiros computadores, não se distinguia o

papel da máquina e o papel do usuário. O importante era fazer algo
que funcionasse, não interessando o tempo que demandaria para que
alguém aprendesse a utilizar o equipamento. Veja, de forma resumida,
como se deu o processo evolutivo das interfaces:
• Na primeira geração, os usuários necessitam utilizar plugues

e botões. Os usuários eram os próprios funcionários que
desenvolveram o computador.
Figura 06: ENIAC (lançado em 1946)
• Na segunda geração, houve o avanço para a utilização de lotes de

cartões perfurados para efetuar a entrada de dados nos computadores.
Assim, o usuário não necessitava ficar o tempo todo na frente do
computador introduzindo os dados, bastava inserir o cartão.
15
Figura 07: Cartão perfurado
• Na terceira geração, surgiu o conceito de tempo compartilhado

(ou time sharing, em inglês). Nessa nova fase, o computador
conseguia executar múltiplas tarefas simultaneamente, utilizando
o tempo de maneira compartilhada. As tarefas eram executadas
sequencialmente, com tempo determinado. Na maioria das vezes, o
usuário interagia com a máquina através de linhas de comando (estilo
de interação textual). Mesmo com essa técnica, somente os usuários
experientes conseguiam manipular as máquinas. Futuramente veio
a ser a base para o modo MS-DOS.
• A quarta geração é a dos menus, que facilitou a escolha das ações

que o usuário desejava executar. Assim, percebe-se a tendência a
centrar o foco mais nos usuários, haja vista que os menos experientes
também conseguiam executar as tarefas devido à clareza das
informações.
Figura 08: Tela de configuração da placa-mãe de um computador
• A quinta geração se desenvolveu com o surgimento das janelas e

controles gráficos. O uso do mouse possibilitou um avanço na forma
como os usuários efetuavam a entrada de dados. Com esta geração,
passou-se a efetuar cálculos, desenhar, selecionar menus interativos,
etc. E tudo isso sendo feito com o auxílio de gráficos coloridos.
16
Prof. Flávio Izo
Figura 09: Interface gráfica
Assim, essa evolução se deu porque os projetistas, com o passar dos

anos, perceberam que entre a máquina e o ser humano deveria haver
um mediador que pudesse interpretar as solicitações que vinham
de um lado e retransmiti-las, de maneira que o outro lado pudesse
compreender facilmente. Surgiu, assim, o conceito de organização da
Interface Usuário Máquina (IUM).
Figura 10: Organização da Interface Usuário Máquina
SISTEMA
Interface Aplicação
Como percebemos na figura acima, existe uma divisão entre os elementos

do sistema, sendo que uns fazem parte do lado usuário (interface) e
outros que discorrem acerca das partes internas do sistema (aplicação).
A divisão entre a parte interna do sistema e a interface do usuário é

algumas vezes difícil de ser percebida, e essa é a intenção. Quanto menos
o usuário perceber que está interagindo com uma máquina, melhor, o
que vem a corroborar que o sistema é bem feito.
17
1.5 Importância da comunicação do

usuário com o sistema
A importância da comunicação do usuário com o sistema gira em torno

do processo de tomada de decisão. É o usuário quem vai decidir o que
fazer. Mas, e se ele não souber o que fazer?
Veja a charge abaixo:
Figura 11: Usuário tentando utilizar equipamento
Vixi! Só falta dizer que

pra esse “apareio”
funcionar eu tenho que dizer:
Seca-te, Cesar!
Agora você se pergunta: isso acontece mesmo?
Sim! Podemos dizer que essa história contada acima pode acontecer
sim, e não é difícil.
Basta você pensar: a primeira vez que utilizou um computador você se

sentiu confortável? Sabia exatamente o que fazer? Aposto que não. E
assim se sentiu o trabalhador da zona rural que nunca tinha se deparado
com um secador automático de mãos.
18
Prof. Flávio Izo
Essa situação é um problema gravíssimo. Enquanto projetistas de

sistemas, necessitamos desenvolver aplicações que possuam interfaces
de fácil uso pelo usuário.
Sendo assim, para que os sistemas sejam amplamente aceitos, eles

precisam ser projetados de maneira coerente. Deve-se elaborar ambientes
provisórios, testar e tentar sempre melhorá-los antes de disponibilizar
para seus efetivos usos.
Normalmente, os usuários não querem saber como é o funcionamento

da máquina, eles querem é utilizá-la sem maiores problemas. Assim
como ao entrar em um carro, o motorista não quer saber quantos
parafusos existem e para que servem, ele quer é que o câmbio, volante
e os pedais estejam em posições acessíveis e confortáveis para poder
dirigir o veículo.
Então, o sucesso ou fracasso depende da interface do sistema. Caso a

interface do sistema com o usuário seja boa, ele terá uma boa utilização e,
consequentemente, o sistema estará apto para execução das tarefas necessárias.
No entanto, caso ocorra o contrário, o sistema estará fadado ao fracasso.
19
1. Após ler o capítulo 1, crie definições com suas próprias palavras

para as termos abaixo:
a) Comunicação
b) Interface
2. Cite pelo menos 10 exemplos de interfaces que você utiliza no
seu dia a dia.
3. Pense e cite pelo menos 5 exemplos de elementos que você
utiliza e sente dificuldades na utilização. Sugira o que pode ser
feito para melhorar essa interface. (Exemplo: eu tenho muitas
dificuldades em configurar o alarme do meu celular, haja vista
que ele não mostra a hora atual na tela de configuração do alarme.
Assim, tenho que voltar à tela inicial, ver a hora e aí, sim, acessar
novamente o alarme e configurá-lo).
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
____________________________________________________
20
Prof. Flávio Izo
Comunicação Projetista
usuário
Olá!
Neste capítulo dois, vamos compreender como funciona a
comunicação do projetista com o sistema.
Nesta abordagem, continuaremos a discutir acerca da importância
que deve ter a comunicação com o usuário. Sendo assim,
conheceremos os caminhos que o projetista deve seguir para
conseguir entender o usuário.
Assim, analisaremos como o projetista vê o usuário do sistema e
discorreremos sobre algumas ações que podem auxiliar o projetista
no entrosamento com o usuário.
Bons estudos!
No capítulo anterior, discutimos acerca da comunicação do usuário

com o sistema e citamos alguns pontos importantes para que o sistema
tenha sucesso no processo de interação.
Neste capítulo, vamos analisar o papel do projetista em relação ao

usuário.
2.1 Como o projetista vê o usuário?
Que o usuário é peça fundamental para o sucesso do sistema devido

a sua interação com a máquina, não há o que discutir. Sendo assim, o
projetista necessita tentar se colocar no lugar do usuário no momento
de desenvolver um sistema.
Mas somente isso não resolve. Existem outros procedimentos que

ajudam na árdua tarefa que é agradar o usuário.
Seguem algumas ações que podem auxiliar o projetista no entrosamento

com o usuário:
22
Prof. Flávio Izo
• Conheça bem o seu usuário:
◉ você pode não ter somente um tipo de usuário que vai acessar o sistema.
Pode ser que tenha administrador, funcionário do setor de vendas,
funcionário do setor de compras, etc., utilizando o mesmo sistema. É
interessante conhecer todos e saber o que cada um pensa e como agem;
◉ os usuários também podem ter culturas diferentes, idiomas

diferentes, etc. Assim, procure conhecê-los;
◉ no capítulo 5, falaremos sobre os modelos de usuários, o que poderá

contribuir para que entendamos mais sobre os tipos de usuários.
• Mantenha um relacionamento claro e objetivo com o usuário:
◉ assim como é importante conhecer bem o usuário, é extremante

necessário ter um relacionamento estreito com ele. Evite utilizar
jargões (gírias) próprios da informática. Pense na seguinte analogia:
você vai ao médico e ele responde que você está com dermatite
seborreica. Entendeu? Não? E se ele dissesse que você tem caspa?
Seria mais simples?
◉ é importante também escrever mensagens claras no sistema.
• Entendimento dos princípios de bons projetos de telas:
◉ É importante que saibamos quais são os tipos de interfaces que

podemos utilizar e quais usuários elas irão agradar. Interfaces
complexas podem ser vistas com dificuldades para usuários leigos.
• Conheça as tarefas que serão executadas:
◉ saiba exatamente quais e como as tarefas devem ser executadas,

assim fica mais fácil discutir com o usuário qual a melhor forma de
elaborá-las. Como posso criar uma tarefa de vendas se não sei como
funciona a venda?
• Faça com que o usuário se torne parte do projeto:
◉ incentive o usuário a participar do projeto, mantenha-o sempre

por perto. Isso fará com que ele se sinta importante e colabore com
o desenvolvimento do sistema.
◉ essa tática é imprescindível para o sucesso das interfaces.
• Teste e refaça os testes quantas vezes forem necessárias:

23
◉ faça sempre os testes, eles mostrarão como está o andamento do

sistema, além de ajudar a descobrir possíveis problemas na interface.
Veremos mais sobre testes no capítulo 6 desta apostila.
Essas são algumas dicas que visam a auxiliar o projetista no desenrolar

do processo de elaboração das interfaces.
A ideia principal é que o projetista projete sempre pensando no usuário.

SEMPRE MESMO!
Figura 12: Projete pensando no usuário. Sempre!
Você está digitando

isso certo? Só
O negócio está aparecem estrelinhas!
pedindo a senha!
A função projetista de interfaces surgiu ao longo dos anos, com a

valorização do usuário como meio fundamental para o sucesso do
sistema. O projetista é o responsável pelo formato e qualidade das
interfaces do sistema na interação com o usuário.
Lembre-se de desenvolver o sistema de acordo com as necessidades

e limitações dos usuários. Conheça a cultura e o contexto no qual
o usuário esteja envolvido.
24
Prof. Flávio Izo
Quando o projetista ou designer de interfaces não se preocupa com o

usuário, o sistema pode fracassar completamente, ou, se não fracassar
de imediato, pode ter sua funcionalidade comprometida devido à
complexidade de utilização.
Há alguns meses, uma amiga me contou que viajou a São Paulo pela
empresa em que trabalha e com isso ficou em um hotel de luxo (não sei
precisar quantas estrelas). Recebeu um cartão ao qual o atendente disse
que abriria a porta do quarto. Ao se dirigir pela primeira vez ao quarto,
percebeu que estava escrita a seguinte mensagem na fechadura eletrônica
da porta: “Coloque o cartão nesta posição.” e um desenho informando
a posição correta de colocar o cartão. Depois de muito tentar e não
conseguir abrir a porta em nenhuma das formas possíveis de colocar o
cartão, ele resolveu chamar a recepcionista, que simplesmente colocou e
retirou o cartão rapidamente (em menos de 1 segundo) e a porta se abriu
e a minha amiga ficou com cara de tola. A resposta da recepcionista foi
bem objetiva e ‘motivadora’: “Relaxa! Isso sempre acontece!”.
A pergunta é: qual foi o erro cometido nesta situação e por quem?
Assim como vimos na charge da figura 12, uma simples informação

explicativa de como utilizar o “sistema de fechadura eletrônica” poderia
facilitar as coisas e evitar constrangimentos. Faltou a informação de que
o cartão deveria ser colocado e retirado de forma rápida.
E a fala final da recepcionista demonstra que não foi a primeira vez que
isso aconteceu, ou seja, outros usuários também não conseguem adentrar
ao quarto utilizando o cartão da forma como está sendo explicado.
Respondendo à pergunta inicial: o erro foi cometido pelo projetista.

Talvez, durante a implantação do sistema, não houve comunicação
suficiente com o usuário e nem fase de testes. E o pior: mesmo com as
dificuldades encontradas, nada mudou.
O projetista necessita fazer com que a tomada de decisão do usuário seja

precisa, sem equívocos ou acidentes.
No capítulo 5, falaremos sobre o modelo de tarefas e a necessidade de

tentar diminuir ao máximo o tempo em que o usuário demora para
executar uma tarefa. Esse é outro ponto importante que o projetista
deve considerar com bastante cuidado.
25
Reflita:
A maioria dos sites de Mármore e Granito no Brasil possui
áreas onde o cliente pode acessar os produtos, simular como um
determinado tipo de granito e/ou mármore ficaria em uma sala,
banheiro ou cozinha, e alguns permitem até que o cliente faça o
pedido pelo próprio site.
Os clientes mais potenciais para esse tipo de empresa são de países
como a Itália, Espanha e Estados Unidos.
Será por isso que essas empresas possibilitam a navegação pelo
site em vários idiomas além do Português? Essa atitude agrada
aos clientes?
1. Você considera que o usuário realmente deve fazer parte do

projeto do sistema? Justifique sua resposta.
2. Após a leitura do capítulo 2, se você fosse o projetista/designer de
um sistema, quais ações você executaria para criar uma interface
que fosse agradável ao usuário?
3. Assim como foi falado no item “reflexão”, cite 2 exemplos de
situações nas quais fica evidente a preocupação do projetista com
o tipo de usuário que irá utilizar o sistema.
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
____________________________________________________
26
Prof. Flávio Izo
Engenharia Cognitiva e
Semiótica de Sistemas

Olá!
Neste capítulo três, vamos discorrer acerca da importância das
engenharias cognitivas e semióticas de sistemas.
Em relação à engenharia cognitiva, a abordagem é feita na análise
do comportamento do usuário frente às máquinas. Já a engenharia
semiótica estuda as mensagens enviadas pelo projetista para o
usuário através do sistema.
É importante ter esses conhecimentos para entender como o usuário
se comporta diante dos sistemas. Assim, poderemos aperfeiçoar as
interfaces cada vez mais.
Bons estudos
3.1 Cognição
A cognição compreende as ações que o ser humano executa.

Normalmente, quando acordamos, pensamos em todas as atividades
que necessitamos cumprir durante o dia. Essa atitude de “planejar o dia”
está abarcada como processo de cognição.
Cognição
A cognição é uma área da psicologia que estuda o comportamento
do ser humano quando este faz suas atividades cotidianas.
Ex.: perceber, pensar, falar, tomar uma decisão, refletir etc.
A psicologia cognitiva estuda os processos de aprendizagem e de

aquisição de conhecimento durante as atividades processadas pelo ser
humano através dos cinco sentidos.
Assim, existem alguns comportamentos que devem ser considerados

para a formação da cognição. São eles:
28
Prof. Flávio Izo
3.1.1 Memória
A memória é um dos itens principais para o ser humano. É através

da memória que conseguimos lembrar das coisas que acontecem,
armazenar os conteúdos aprendidos em um curso, etc.
Ex.: O que você tomou no café da manhã hoje? O que ganhou de presente
no seu último aniversário?
3.1.2 Aprendizado
A aprendizagem se dá a partir do momento em que a pessoa se identifica

com a situação que está ocorrendo.
Ex.: Ao comprar uma televisão Full HD que permite acessar até a

internet, a pessoa pode se sentir confusa e, de início, utilizar somente os
recursos básicos, até que consiga aprender com o próprio uso a usufruir
de recursos mais abrangentes.
3.1.3 Leitura, fala e audição
Cada pessoa tem uma preferência. Uns aprendem mais ouvindo, outros
lendo e ainda existem os que gostam de ler em voz alta. No discorrer desse
entendimento, percebe-se que há características diferentes entre esses
elementos: Um texto ou frase que está escrito permitindo que alguém o
leia, dizemos que é permanente, até que alguém o destrua. Já a audição é
momentânea, a não ser que aconteça uma gravação para posterior audição.
3.1.4 Tomada de decisão e planejamento
Para se tomar uma decisão ou fazer um planejamento é necessário pensar,

discutir, avaliar bem todas as consequências positivas e negativas.
Ex.: Ao comprar moeda estrangeira, deve-se pensar bem em qual moeda

comprar e na situação econômica do país de origem da moeda.
3.1.5 Atenção
A atenção compreende a atitude do ser humano ao escolher em meio a

opções que estão disponíveis dentro de um conjunto limitado.
Ex.: ver a pontuação do seu time na tabela do campeonato pode ser

fácil, mas procurar uma informação no jornal se torna um pouco mais
complexo, exigindo mais atenção.
29
3.1.6 Percepção
Com a percepção, a pessoa organiza e interpreta as suas impressões

sensoriais para atribuir um significado às coisas do ambiente. Pode vir
através do tato, olfato, visão, paladar ou audição.
Ex.: Quando você está almoçando, você está utilizando a percepção

vinda do sentido paladar.
De uma maneira mais simples, podemos dizer que cognição é a forma como
o ser humano aprende, pensa, recorda e age através dos sentidos humanos.
3.2 Engenharia Cognitiva de sistemas
A engenharia cognitiva tem uma influência direta sobre como o

usuário se comporta frente ao sistema. Atos simples como pensar,
visualizar, olhar, perceber fazem parte da reação que o usuário tem
ao utilizar o sistema.
Sendo assim, esta engenharia tem como objetivo principal utilizar os

elementos da cognição para implementar bons designs para os usuários.
Normam e Draper (1986) colocam a ideia de que o designer/projetista

cria uma visão mental do sistema, chamada de “modelo de design”,
considerando as informações das análises dos usuários e das tarefas
que serão executadas no sistema. Posteriormente, a partir do modelo de
design, o usuário vai gerar o seu próprio modelo mental do sistema, ao
qual denominamos “modelo de usuário”.
Fazendo uma analogia, poderíamos pensar da seguinte forma:
Uma mulher solicita que a costureira faça um vestido para ela. Para
isso tira as medidas necessárias, indica cor, etc. A costureira elabora
mentalmente o vestido e faz o desenho para que a mulher veja como
ficará (modelo de design). Assim, a cliente olha o desenho, interage
com ele, elabora mentalmente como o vestido ficaria em seu corpo
e indica possíveis mudanças (modelo de usuário).
A partir do modelo de design e do modelo de usuários, chega-se à teoria

da ação. Essa teoria possibilita que o usuário consiga olhar para o desenho
do sistema e criar um modelo mental que seja o mais parecido com o
modelo mental do designer. Essa visão tende a fazer com que tanto o
usuário quanto o designer cheguem à mesma ideia de projeção do sistema.
30
Prof. Flávio Izo
A teoria da ação é composta de dois golfos que agem de forma iterativa.
Iterativa
Iterativa vem da palavra iteração, que significa repetição. Quando
dizemos que algo é iterativo, estamos afirmando que o processo
ocorre de forma cíclica ou repetitiva.
Ex.: O processo de rotação da terra é iterativo, ou seja, acontece
várias vezes.
Atente-se: Iteração ≠ interação
Os golfos mencionados são o da Execução (Formulação da Intenção,

Especificação da Sequência das Ações, Execução) e o da Avaliação
(Percepção, Interpretação, Avaliação). Vejamos, a seguir, como funciona
esse processo de iteração:
Figura 13: representação do golfo de execução e do golfo de avaliação
Especificação
Golfo da
de Execução
sequência de ações
Formulação
da Interação Execução das
Objetivo ações
Avaliação em
Percepção do
relação
estado
à interação
do sistema
Interpretações do
estado do sistema
Golfo de Avaliação
Para simular uma ação baseada nesses golfos, vamos citar o exemplo de
um usuário que queira cadastrar um cliente:
31
Figura 14: exemplo da teoria da ação
EXECUÇÃO Formulação de Interação Cadastrar um cliete
Especificação da É necessário abrir o cadastro,

Sequéncia de Ações preenchê-lo com os dados do
cliente e finalizar o cadastro.
Execução Clicar no botão cadastrar, preencher

os dados e salvar o cadastro.
Percepção O sistema está processando o

cadastro no banco de dados.
AVALIAÇÃO
Interpretação Uma mensagem é exibida para

o usuário.
Avaliação Analisar a mensagem e avaliar que

o cadastro foi feito com sucesso.
É importante deixar claro que o usuário necessita chegar à fase de

avaliação e perceber que a ação planejada inicialmente foi cumprida.
Como é difícil descrever no que se está pensando, a teoria da ação pode

auxiliar muito na troca de informações entre o usuário e o projetista.
No exemplo acima, o projetista teria condições de discutir outras
possibilidades de interfaces.
Os golfos da teoria da ação devem ser feitos para cada tarefa. A partir
da teoria da ação ter sido formalizada, fica mais fácil para o projetista
desenvolver as telas.
1. Explique com suas palavras como é o funcionamento do

processo da Engenharia Cognitiva.
2. Quais processos cognitivos você utiliza no dia a dia? Em quais
momentos?
3. Como você utilizou sua memória hoje? Para lembrar o quê?
4. Além da memória, cite exemplos de recursos que você utiliza
para lembrar-se das coisas. Ex.: agenda.
5. Suponha que você assistiu a um filme no cinema. No outro dia
foi descrever informações acerca do filme assistido para um (a)
amigo (a). Quais os processos cognitivos você utilizou para contar
o filme para o seu (sua) amigo (a)?
6. Pense em três tarefas que podem ser executadas por um usuário
em um sistema de biblioteca. Descreva a teoria das ações para as
três tarefas. Lembre-se de montar os golfos.
32
Prof. Flávio Izo
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
3.3 Engenharia Semiótica de Sistemas
Assim como a engenharia cognitiva, a semiótica também tem a

preocupação da interação com o usuário.
Semiótica
A semiótica é o estudo dos signos, seu processo de produção e
suas formas de interpretação.
Ex.: uma bola de futebol é um signo (objeto) que nos leva a várias
interpretações. Também podemos buscar conhecer porque ela foi
produzida, isso facilita na interpretação.
Conforme vimos em capítulos anteriores, a interface é uma forma de

comunicação. Para que ocorra a comunicação, deve haver troca de
mensagens. Na semiótica, há uma visão de que o designer/projetista
é o emissor desta mensagem e o usuário seria o receptor. Assim, há a
comunicação de forma unilateral: do projetista/designer para o usuário.
33
Figura 15: exemplo de comunicação através dos signos
Exemplo:
PARE
Se você visualizar este objeto (placa
de trânsito), qual mensagem você
diria que ele estaria passando?
Com certeza você responderá: PARE,
não prossiga!
Parada Obrigatória
Só foi possível estabelecer a comunicação porque você reconheceu esse

signo. Sendo assim, podemos afirmar que, para uma comunicação ser
estabelecida, tanto o projetista quanto o usuário necessitam conhecer
o símbolo utilizado. No exemplo citado acima, o DETRAN necessitava
informar aos motoristas que, ao passarem por aquele local, deveriam
PARAR. Assim, fez uma placa com um símbolo (signo) que pudesse ser
reconhecida pelo motorista como mensagem de PARE.
É importante lembrar que, dependendo do signo utilizado, este

poderá gerar maneiras divergentes de interpretação. Os signos
são extremamente necessários, no entanto os dois lados (emissor
e receptor) devem reconhecê-lo para que a interação transmita a
real mensagem pensada pelo designer.
A ideia dentro da semiótica não é somente utilizar signos existentes, nós

podemos (e devemos) utilizar signos próprios. MAS CUIDADO! Isso só
poderá acontecer se a mensagem transmitida puder ser compreendida
pelo receptor da mesma forma que foi emitida pelo receptor. Caso
contrário, poderá culminar em um grande caos para a funcionalidade
do objetivo que se deseja alcançar.
Exemplo: aproveitando o exemplo da placa de trânsito, se o motorista

interpretasse (de forma errada) que a placa indicava que somente
veículos vermelhos (devido a cor da placa) devessem parar, o desastre
poderia ser enorme.
A semiótica não atua somente na utilização de ícones, mensagens e sons

também podem ser utilizados. Para utilizar os projetistas de signos,
deve-se conhecer bem a visão do usuário.
34
Prof. Flávio Izo
Por isso, a engenharia semiótica gira em torno da resposta para duas

perguntas essenciais:
• Qual a interpretação que o designer/projetista faz do problema do

usuário?
• De que forma o usuário pode interagir com o sistema para resolver

esses problemas?
Figura 16: Entendimento incompleto dos desejos do usuário
O usuário precisa digitar Esse teclado virtual não

sua senha alfanumérica. tem as letras K, W e Y.
Já sei o que fazer! Como digitar a senha?
e assim...
PROJETISTA/DESIGNER USUÁRIO
A situação da figura acima não pode acontecer: o projetista deve estar

atento aos desejos REAIS do usuário. Atualmente, o Brasil já tem
incorporado ao seu alfabeto as letras K, W e Y. Então, é inadmissível
montar um teclado virtual sem essas letras. Isso é um erro bobo.
Mas podemos pensar: será que esse erro aconteceu porque o projetista
não conversou com o usuário? Na realidade, mesmo que tenha
conversado com o usuário, o alfabeto tem que ser padrão.
3.3.1 Metacomunicação
Dentro da semiótica, podemos referenciar que a interação

estabelecida é a metacomunicação, sendo que o designer projeta
uma interface com funcionalidades para que o usuário possa
interagir com ela e compreendê-la.
Metacomunicação
De maneira bem objetiva, a metacomunicação significa
“comunicação sobre comunicação”. Assim, o projetista utiliza-se
da interface (que é uma forma de comunicação) para se comunicar
via mensagens com o usuário.
A metacomunicação ocorre através do uso de expressões, objetos,
sinais, signos, mensagens, etc.
35
A ideia da metacomunicação é que nem sempre o projetista poderá

estar presente com o usuário para poder ensinar ou tirar dúvidas acerca
do sistema. Assim, os elementos existentes na tela poderão servir como
signo de metacomunicação (interagir com o usuário).
É importante reforçar que qualquer elemento pode auxiliar na

metacomunicação: um ícone, uma expressão, uma funcionalidade
de ajuda, etc.
Figura 17: Ajuda do jogo Campo Minado do Microsoft Windows
Na figura acima, a aplicação (jogo) campo minado possui uma área

onde o usuário poderá conhecer os objetivos do jogo. A tela é bem
interativa, permitindo que o usuário possa, ainda, além de visualizar
as regras básicas, efetuar pesquisas sobre suas dúvidas. Assim, o
usuário conseguirá jogar e atender às suas expectativas quanto ao
seu objetivo perante o jogo.
36
Prof. Flávio Izo
E esse é o objetivo. O projetista/designer desenvolveu a interface

para que esta comunique ao usuário que a aplicação tem como meta
atender aos objetivos pleiteados por ele, com soluções para resolver o
problema do usuário.
Figura 18: Processo da engenharia semiótica
Processo da Engenharia Semiótica
nsagem atráves da interf

a a me ace
Projetista envi Usuáios
- Recebe a mensagen
- Inicia o processo de interpretação
- compreende a mensagem, ou
- não compreende a mensagem
Outra situação: você já reparou nas janelas de alertas dos sistemas? Pense e veja
que essas janelas normalmente têm ícones de alertas (positivos ou negativos).
Figura 19: Janela de alerta de segurança
Se nos esquecermos do texto e olharmos somente para o ícone no lado

esquerdo superior, já perceberemos que a janela é um alerta sobre algo
relacionado à segurança (devido ao signo do cadeado).
37
1. Explique com suas palavras como é o funcionamento do

processo da Engenharia Semiótica de sistemas.
2. Acesse os recursos do sistema operacional e os aplicativos
existem no seu computador. Simule algumas ações como salvar,
apagar, etc. Perceba as mensagens que você recebe. Há alguma
mensagem que você mudaria? E os ícones? Faça isso com pelo
menos 5 mensagens.
3. Descreva o que é metacomunicação. Você acredita que a
metacomunicação pode ser vista como uma boa maneira de
estabelecer a comunicação entre pessoas que não estão próximas?
4. Nós citamos um exemplo de metacomunicação que foi a ajuda
do jogo campo minado. Pense e cite mais 4 formas que o projetista
poderá utilizar para se metacomunicar com o usuário.
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
____________________________________________________
38
Prof. Flávio Izo
Estilos de Interação
Olá!
Neste quarto capítulo falaremos acerca dos estilos de interação. Esses
estilos são divididos em interfaces textuais e interfaces gráficas.
Analisaremos que alguns estilos de interação são utilizados nas
interfaces e quais são mais indicadas para usuários leigos e
experientes.
Os estilos têm por desígnio servir como interface de comunicação
entre o usuário e a máquina.
Bons estudos!
Vamos pensar nas seguintes situações:
• duas pessoas conversam sobre o final da novela;
• um grupo de empresários discute, em uma reunião, sobre a crise

internacional;
• um passageiro de ônibus faz o jogo caça palavras no jornal.
Em todos esses casos, pode-se perceber que a interação está presente.

No exemplo 1, as pessoas conversam informalmente sobre o fim da
novela, expressam-se e criam a interação que podemos chamar de
humano-humano.
Pode-se analisar no exemplo 2 que a interação ocorre entre um grupo

maior de pessoas. Essa interação está sendo estabelecida no âmbito
profissional, dentro de uma reunião em uma empresa qualquer. Aqui
também denominamos de interação humano-humano.
Já o exemplo 3 é um pouco diferente, pois o passageiro está estabelecendo

a interação com um objeto, no caso o jornal. Neste caso a interação é
chamada de humano-objeto.
De maneira resumida, podemos perceber que a interação pode ocorrer

entre humanos, entre objetos, e entre humanos e objetos. É importante
salientar que, com a disseminação da tecnologia, a interação entre
40
Prof. Flávio Izo
humanos e objetos/máquinas tornou-se bastante comum. Sendo assim,

na nossa disciplina o objetivo principal é explorar as formas de interação
entre humanos e a máquinas.
A seguir, falaremos sobre os tipos de estilos de interação: as interfaces

textuais e interfaces gráficas.
4.1 Interfaces Textuais
As interfaces textuais foram as pioneiras na interação, pois são aquelas

pelas quais o usuário necessita digitar algo para que a interação seja
estabelecida. Abaixo veremos alguns tipos dessas interfaces.
4.1.1 Linguagem de Comando
A linguagem de comando é também conhecida como interpretadores

de comando. Tornou-se conhecida em meados da década de 60, depois
surgiram as interfaces gráficas (que veremos mais a frente). Desde o
seu surgimento, foi (e continua sendo) amplamente utilizada devido
à flexibilidade proporcionada aos usuários. Alguns interpretadores de
comando são: Ms DOS, Shell do Linux e Telnet.
Figura 20: interface textual do Linux (linguagem de comando)
Esse estilo tem como característica enviar instruções diretamente ao

computador via comandos, sendo assim, o usuário tem controle total do
sistema ao qual está utilizando, podendo manipulá-lo da forma como
quiser e extrair o máximo de recursos possíveis. Os usuários experientes
gostam desse estilo devido a possibilidade de combinação de comandos,
proporcionando flexibilidade para acessar às funções desejáveis.
41
Em relação aos comandos, podemos citar que estes podem ser compostos
por caracteres isolados, abreviações ou até palavras inteiras, além da já
citada combinação de comandos. Tudo depende do ambiente que se
está utilizando. Vejamos alguns exemplos:
Comando Sistema O que ele faz?

exit MS-DOS Finaliza a sessão/janela de comando aberta.
ssh Unix Sessão segura, abreviação de secure shell. Permite logar
num servidor através do protocolo ssh
pwd Telnet Exibe o diretório atual.
dir MS-DOS Comando que mostra a lista de arquivos de um
diretório.
whatis Unix Descreve o que um comando é.
w Unix Mostra-nos quem está no sistema ou que comando cada
job está a executar.
Podemos perceber na tabela acima que os comandos podem aparecer

de diversas formas: o “ssh”, por exemplo, está abreviado; já o “w” é um
comando de um caractere somente.
Parâmetros
Também conhecido como argumentos, são subcomandos que
servem para mudar a ação de um determinado comando durante a
execução. Fazendo uma analogia, seria o mesmo que, ao comprar
uma caneta, solicitar ao vendedor que seja na cor vermelha. Nesta
analogia, o comando seria: “comprar a caneta” e o parâmetro seria
“cor vermelha”.
Existem, ainda, os parâmetros de comandos. Um exemplo é o comando

“dir” (MS-DOS), que pode ser combinado com alguns parâmetros e
executar subfunções:
• dir /P - lista o diretório com pausas para quando a quantidade de

arquivos é grande o suficiente para que não possa ser exibida de
uma só vez na tela;
• dir /W - lista o diretório organizando a visualização na horizontal;
• dir /S - exibe não só o conteúdo do diretório atual como também o

conteúdo das pastas deste;
• dir /? - use essa instrução para conhecer todos os parâmetros do

comando dir.
42
Prof. Flávio Izo
Dessa forma, os usuários experientes podem usufruir bastante dos

recursos proporcionados pela linguagem de comando, no entanto, os
usuários leigos podem ter muita dificuldade para interpretar e utilizar
esse tipo de estilo. Esse é um ponto muito discutido, pois pode-se
perceber que os interpretadores de comandos são de difícil aplicação
para os usuários iniciantes.
Outro ponto que podemos ressaltar é a necessidade de uso da memória

para lembrar quais os comandos que devem e podem ser utilizados.
Esse “tempo” para lembrar um comando pode prejudicar a execução de
uma tarefa que necessite ser feita com rapidez.
Anteriormente foram citadas duas dificuldades em relação à utilização

dos interpretados de comando:
• difícil compreensão para os usuários iniciantes;
• exigência de boa memória para lembrar os comandos.
Porém, cabe destacar que normalmente os projetistas desses tipos de sistemas

oferecem comandos que fornecem o acesso à ajuda e à documentação.
Poderíamos citar como exemplo os comandos man, info, whatis e whereis
do Unix; e help do MS – DOS. Outro recurso oferecido pelos projetistas é o
acesso ao histórico de comandos já utilizados pelo usuário.
Dessa forma, o projetista das linguagens de comando deve sempre ter

em mente a necessidade de manter uma lista dos comandos que fazem
parte do interpretador. Essa lista facilitará muito para o usuário na
escolha de qual comando utilizar.
4.1.2 Linguagem Natural
Como o próprio nome já diz, a linguagem natural é a linguagem mais

próxima da linguagem utilizada pelo ser humano. Para um norte
americano, a linguagem mais próxima é o inglês; para nós, brasileiros, é
o português; para os italianos, é o italiano; e assim por diante.
A linguagem natural é a linguagem que o usuário frequentemente

utiliza, não importando a nacionalidade da língua falada.
Sendo a linguagem utilizada para operar o sistema mais próxima do ser

humano (usuário), fica a cargo do sistema interpretar e executar a rotina
43
desejada pelo usuário. Assim, o usuário tem mais facilidade para utilizar o
sistema, contrapondo que o projetista do sistema terá uma dificuldade maior
para desenvolver um sistema que consiga entender as solicitações do usuário.
E essa não é a maior dificuldade no desenvolvimento de um sistema com

linguagem natural. Existe ainda o fato de que os sistemas normalmente
são desenvolvidos para pessoas de regiões diferentes; sendo assim, o
projetista ainda deve se preocupar com as culturas regionais (dialetos).
Uma analogia quanto ao ponto citado é criar um sistema no estado do

Espírito Santo que interprete a palavra “pocar” como sendo um verbo
com mesmo significado de estourar. Assim, quando um usuário do
Rio Grande do Sul for utilizar o sistema não ficará claro que a palavra
“pocar” tem o mesmo significado de estourar. Isso pode confundir no
momento da solicitação de alguma tarefa.
Um sistema antigo que foi muito utilizado em algumas aulas de

Inteligência Artificial (IA) é o ECC Eliza. Esse programa foi criado
em 1966 e tem o objetivo de criar robôs de conversação para simular
diálogos entre as pessoas.
A seguir, podemos ver a tela inicial do programa que possibilita o

diálogo entre um humano e a máquina.
Figura 21: Tela inicial do ECC Eliza (linguagem natural)
O objetivo do Eliza é simular uma pessoa, proporcionando ao usuário

humano a ideia de estar conversando com alguém real, e não virtual.
Veja outro exemplo de sistema onde o estilo de linguagem natural

acontece quando necessitamos realizar alguma busca. Tomemos como
exemplo a busca em um site da internet:
44
Prof. Flávio Izo
Figura 22: Fazendo uma busca na internet
Podemos perceber, na figura acima, que a forma como se realiza a

pesquisa é através do modo como falamos, ou seja, bem natural.
Apesar de ser bem prático e fácil para o usuário, ainda não é possível
estabelecer sistemas em linguagem natural que contenham alto poder
de precisão, devido à complexidade de fazê-lo.
1. Faça uma pesquisa e cite exemplos de outros sistemas que

utilizam a linguagem natural.
2. Faça uma pesquisa e cite as principais vantagens e desvantagens
da linguagem de comando e da linguagem natural.
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
45
4.2 Interfaces Gráficas
Ao contrário das interfaces textuais, as interfaces gráficas surgiram

há pouco tempo, no entanto, ganharam muito espaço no mercado de
sistemas por facilitar a sua utilização pelos usuários. Estes que, inclusive,
ganharam tempo e comodidade na execução das tarefas.
Abaixo, veremos alguns tipos dessas interfaces.
4.2.1 Manipulação Direta
A manipulação direta é o estilo que aproxima mais o usuário da máquina,

haja vista que o usuário age diretamente no objeto da ação.
Um exemplo de manipulação direta ocorre na imagem abaixo, na qual

o usuário clica com o mouse e arrasta um objeto pela tela, movendo de
uma pasta para a outra.
Figura 23: Movendo um arquivo com o auxílio do mouse
Em comparação com outros estilos, pode-se perceber que, na linguagem

de comando ou na linguagem natural, o usuário digita uma frase ou
comando e este vai solicitar ao objeto sua execução, servindo de
intermediário. Já na manipulação direta, o usuário interage diretamente
com o objeto, sem intermediários.
Isso parece tão real que dá a entender que o usuário realmente está
arrastando o objeto pela tela, mas sabemos que internamente não é
isso que acontece. Tudo é apenas para facilitar o entendimento da ação
que está para acontecer.
Devemos destacar que a característica mais marcante nesse estilo é

a simulação do ponteiro como sendo a mão do usuário. Atualmente,
com o avanço das tecnologias, as telas touch screen possibilitam que a
manipulação direta aconteça realmente com o dedo do ser humano.
46
Prof. Flávio Izo
Touch Screen
É uma tela que é ativada com a pressão de um dedo ou de uma

caneta de feltro (sem tinta). Dispensa o uso de outros componentes
como teclado e mouse. Esta tela é muito utilizada para se fazer
desenhos ou executar ações rápidas. São especialmente utilizados
em PDAs e em terminais bancários.
Na imagem a seguir, percebemos uma tela touch screen em uso.
Figura 24: Celular com suporte Touch Screen
4.2.2 Ícones
Os ícones são objetos que possuem a finalidade de transmitir

uma mensagem. Sua estrutura é bem abstrata, pois depende da
percepção de cada usuário para ser interpretada. Sendo assim,
pode ter várias representações.
47
Figura 25: Ícones do Sistema Operacional Windows XP
Devido à citada variedade de representações, o projetista do sistema deve

tentar sempre reaproveitar estruturas de ícones que já são conhecidos
pelos usuários, facilitando assim a percepção do objetivo daquele ícone.
Podemos fazer uma analogia em relação ao semáforo: quando nos

deparamos com a cor vermelha, automaticamente já vem à nossa mente
que temos que parar o carro porque o sinal está fechado; o mesmo
acontece quando visualizamos a cor verde, que mentalmente significa
que devemos prosseguir. Se alguém colocasse a cor azul no lugar do
verde e o cinza no lugar do vermelho, teríamos uma grande confusão.
É interessante relevar que criar novas representações de ícones é

válido, mas não devemos criar ícones que radicalizam e fogem do
contexto que as pessoas normalmente conhecem, pois essa medida
poderá confundir e dificultar a interpretação dos usuários.
Existe uma regra básica para a criação de ícones que não deve ser
esquecida:
“Quanto mais simples o ícone, mais claro fica seu objetivo”
Para comprovar a frase citada acima, podemos utilizar como analogia

as placas de trânsito, que se apresentam sempre de forma simples, com
pequenos traços e cores únicas.
48
Prof. Flávio Izo
Figura 26: Placas de trânsito são claras e objetivas
Para se ter boa usabilidade, existe outra opção de que os projetistas de

sistemas devem valer-se: colocar uma nomenclatura na parte inferior e/
ou colocar uma caixa de diálogos ao passar o cursor em cima. Adotando
essas medidas, o usuário poderá descobrir facilmente o significado do
símbolo, caso não o interprete de imediato.
Figura 27: Ícone com nomenclatura e caixa de diálogo
Na figura acima, podemos perceber que o programa Microsoft Word

da Microsoft possui a nomenclatura na parte inferior indicando que os
ícones daquela região são referentes à Fonte. Além disso, ao passar o
mouse sobre o ícone , percebemos que aparece uma caixa de diálogo
(bem completa, por sinal) informando a ação daquele botão.
4.2.3 Linguagens Visuais
A linguagem visual é a forma como uma ideia é transformada em

imagem para ser visualizada pelo usuário.
A linguagem visual é composta por vários elementos, dentre eles cor,

textura, ponto e linha.
49
• Cor
A cor é essencial na linguagem visual, tendo em vista que interfere

no comportamento e nas sensações do ser humano.
Voltando ao exemplo do semáforo, basta olhar para a cor e já

sabemos o que ela transmite.
Entre as sensações transmitidas estão o aconchego, a comodidade,

o conforto, a atenção, o alívio, a tranquilidade, e ainda existem os
efeitos térmicos (cores quentes ou frias).
Ex.: O preto, apesar de ser elegante, transmite sensação de obscuridade,

mistério.
Para saber mais sobre a influência das cores nos sentimentos

do ser humano, procure livros que discorram acerca do temas
“psicologia das cores” e “teoria das cores”.
• Textura
A textura tem como característica representar o tato. O usuário que

se depara com uma imagem texturizada tem a percepção de estar
simulando o contato com o objeto.
Figura 28: Área texturizada
Ao olhar para a imagem acima, temos a sensação de estar tocando-a e

sentindo o relevo existente nela.
50
Prof. Flávio Izo
• Ponto e linha:
O ponto é a menor linguagem visual, sendo que é utilizado

para dar referência para outras formas. Já a linha é vista como
um conjunto de pontos.
A combinação de linhas/pontos permite a criação de qualquer outra

forma existente na natureza.
4.2.4 Seleção por Menus
Deixamos para citar este estilo por último porque as interfaces orientadas
por menus podem ser textuais (PINE) ou gráficas.
PINE
PINE é um sistema interativo de correio eletrônico de domínio
público. O software apresenta uma interface modo texto que
facilita o envio, o recebimento e o arquivamento de mensagens
eletrônicas, mesmo para novos usuários.
A seleção através de menus ocorre quando o usuário visualiza na

tela as opções que pode selecionar. Essa visualização torna o estilo
de menus mais fácil para o usuário, em relação à linguagem de
comando. Enquanto nos interpretadores de comando o usuário
necessita lembrar quais eram os comandos, no estilo de seleção, o
usuário precisa apenas reconhecer a função.
Figura 29: Menu no estilo Interface textual
Operações: Documento sendo editado

pelo editor...
1. Cadastrar Usuários
2. Gerar Relatórios
3. Imprimir Relatórios
4. Gerar Backup
Entre com o número F1 - Novo F2 - Salver F3 - Sair

51
Figura 30: Menu no estilo interface gráfica
Como se pode perceber, é fácil para o usuário leigo utilizar o estilo de

seleção de menus; no entanto, devemos lembrar da importância de
montar menus utilizando as regras de usabilidade, pois estas permitem
o posicionamento e organização dos menus.
Usabilidade
Pela definição da ISO (International Organization for
Standardization), usabilidade é a medida pela qual um produto
pode ser usado por usuários específicos para alcançar objetivos
específicos com efetividade, eficiência e satisfação em um contexto
de uso específico (ISO 9241-11).
52
Prof. Flávio Izo
Abaixo, veremos dois exemplos muito comuns de organização dos

menus. Vejamos:
Figura 31: Menu organizado de forma hierárquica
Figura 32: Menu organizado através de janelas Popup
É interessante observar que esse estilo, além de ser fácil, durante o

processo de treinamento, os usuários com um pouco de prática já
conseguem ir aprendendo com o próprio sistema.
Mesmo tendo características diferentes, você considera ser

possível utilizar o estilo linguagem de comando juntamente com
o estilo de seleção por menus no mesmo sistema? A combinação
desses estilos pode melhorar a qualidade de um sistema?
53
Existem outros estilos de interação que auxiliam na interação

do usuário com a máquina. Para mais informações, faça uma
pesquisa sobre os estilos: formulários, WIMP e teclas de atalhos.
Tente conhecer as vantagens e desvantagens de cada estilo.
Sabendo da existência de diversos estilos nas interfaces, o projetista é

quem deve analisar o(s) melhor(es) e aplicá-los. Lembrando sempre que
o objetivo principal é facilitar a utilização do sistema para o usuário
final do sistema.
1. Faça uma análise dos estilos apresentados e cite, no mínimo,

duas vantagens e 2 desvantagens de cada um.
2. Em sua opinião, qual o estilo que possui mais facilidade de
aprendizagem pelos alunos?
3. Você normalmente utiliza quais estilos no seu dia a dia? Descreva
os estilos e informe em quais sistemas os estilos ocorrem.
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
____________________________________________________
54
Prof. Flávio Izo
Modelagem de Interfaces
Olá!
Neste quinto capítulo, abordaremos acerca da modelagem de
interfaces.
A modelagem de interfaces trabalha com a análise de técnicas
que auxiliam o projetista a se comunicar com o usuário a fim de
estabelecer um pensamento comum para a elaboração das interfaces.
Nesse capítulo, conheceremos modelos que influenciam diretamente
nessa comunicação.
Os conhecimentos adquiridos neste capítulo complementam as
informações dos capítulos anteriores e preparam o aluno para os
conhecimentos do último capítulo.
Bons estudos!
O processo de modelagem envolve diversas técnicas. Abaixo, vamos

conhecer os modelos e suas importâncias.
5.1 Modelos de Tarefas
O modelo de tarefas tem como objetivo principal descrever as metas dos

usuários e quais são as tarefas que devem ser utilizadas para alcançar
tais metas.
Mas, ao analisar um sistema, podemos descobrir muitas tarefas (ações).

Assim, devemos descrever todas desde o início? Se você respondeu
NÃO, está correto. A ideia inicialmente é considerar apenas as
tarefas principais, aquelas que são vitais para a existência do sistema.
Futuramente, podemos acrescentar as outras.
A preocupação maior é que as principais tarefas que serão executadas

pelos usuários sejam conhecidas e mapeadas nesse processo.
Você deve estar se perguntando: e como desenvolver um modelo de

tarefas? Existe uma teoria pra isso?
Na verdade, existem sim, ou melhor, “existem”. Vamos citar duas teorias

bastante utilizadas na interface usuário máquina: o modelo GOMS
56
Prof. Flávio Izo
(baseado em Metas, Operadores, Métodos e Regras de Seleção), o modelo

Keystroke-Level Model (análise dos tempos de aprendizagem e retenção).
GOMS (Goals, Operators, Methods, and Selection Rules):
O modelo foi proposto inicialmente em 1983 com a pretensão de avaliar

o comportamento do ser humano na interação com o computador. O
GOMS defende que o usuário possui três subsistemas de interação: o
perceptual (auditivo e visual), o motor (movimentos braço-mão-dedo
e cabeça-olho), e cognitivo (tomadas de decisão e acesso à memória).
Quatro etapas compõem o modelo. Vejamos:
• Metas (goals): tarefas que o usuário gostaria de executar;
• Operadores (operators): comportamentos básicos do usuário

que são executados de forma quase imperceptível. Ex.: ver a tela
do sistema (perceptivo), clicar em uma opção de ação (motor),
raciocinar/lembrar (cognitivo), etc.
• Métodos (methods): qual (is) o (s) passo (s) a executar para se

atingir as metas?
• Regras de seleção (selection rules): regras para selecionar o melhor

método para se atingir uma meta.
Figura 33: Método GOMS completo
Goal: mover um arquivo (manipulação gráfica)

Method:
Sub-goal: Localize o ícone do arquivo na tela
Op: Mova o cursor do mouse para o ícone
Op: Pressione o botão do mouse
Sub-goal: Localize o ícone da pasta de destino
Op: Mova o cursor do mouse para destino
Op: Verifique se o ícone de destino está marcado
Op: Solte o botão do mouse
Em 1993, surgiu um modelo mais simplificado para o GOMS,

considerando somente as metas. Dessa forma, fica mais compreensível
para o projetista elaborar as tarefas, devido a sua simplicidade. Veja o
exemplo abaixo:
57
Figura 34: exemplo do GOMS simplificado
1. enviar um e-mail
1.1a SE (souber o endereço de e-mail) ENTÂO (ir para a digitação do endereço)
{
1. Digitar o endereço de e-mail
{
1.1b SE (não souber o endereço de e-mail) ENTÂO (verificar o endereço de e-mail)

{
1. Ir para o catálogo de endereços
2. Verificar o endereço de e-mail no catálogo de endereços
2.1a SE (e-mail existe no catálogo de endereços) ENTÃO
(selecionar o endereço de e-mail)
2.1b SE (e-mail não existe no catálogo de endereços) ENTÃO
(não será possível enviar o e-mail)
{
1. (Tente descobrir o e-mail com a própria
pessoa ou algum conhecido).
2. (Volte ao passo 1.1a)
{
{
1.2 enviar o e-mail para a pessoa desejada

{
1. Digitar o assunto
2. Digitar o conteúdo da mensagem de e-mail
3. Enviar o e-mail
{
É importante salientar que, em outro momento, o modelo GOMS

simplificado poderá obter mais detalhes e ser transformado no modelo
GOMS completo. Para isso, devemos agregar as metas, operadores e
regras de seleção.
Lembre-se de começar a descrever a metas que são gerais e estas

irão incorporando as metas mais específicas de acordo com o
detalhamento.
Exemplo: Ao descrever a meta Cadastrar Cliente pode surgir no
detalhamento a meta Validar o CPF.
58
Prof. Flávio Izo
Keystroke-Level Model:
Esse modelo é muito parecido com o GOMS, entretanto, destaca-se pela

preocupação com as atividades motoras exercidas pelos usuários.
A característica marcante deste modelo é prever o tempo de realização

de uma tarefa. Sendo assim, as atividades motoras tais como selecionar
um item do menu, clicar em um botão e mexer os olhos sob a tela são
minuciosamente analisadas. A medição é feita através da análise dos
métodos (passos para executar uma meta).
Vamos pensar no seguinte exemplo: o usuário está tentando logar em

um sistema que requer a digitação do login e da senha. Após digitar, ele
necessitar apertar <Enter> para que o processo de login seja acionado.
Vejamos o exemplo da medição dessa meta:
Passos
O usuário digita o login “flavioizo” M + 5K
O usuário aperta a tecla <tab> 1K
O usuário digita a senha “12345678” M + 8K
O usuário aperta a tecla <enter> 1K
Total 2M + 15K
No exemplo acima, utilizamos somente as siglas M e K, no entanto,

existem outras legendas que podem ser utilizadas:
Legendas das siglas e o tempo

K Acionamento do teclado (considerando um excelente, um bom e 0,08 seg
um fraco digitador, respectivamente)
0,12 seg
0,28 seg
B Acionamento do mouse 0,1 seg
P Apontar o mouse para algum lugar na tela 1,10 seg
M Preparação mental para executar algo 1,35 seg
H Mudar do teclado para o mouse ou vice versa 0,40 seg
R Resposta do sistema ?
Agora que já analisamos as legendas, podemos medir quanto tempo

gastamos para executar a meta do exemplo anterior:
Resultado:
2M + 15K = 2 (1,35) + 15 (0,16) => 5,1 seg
* Já que nesse exemplo não conhecemos o usuário que irá executar o sistema,
consideramos o 0,16 como uma média no tempo de digitação
59
Com base nesse cálculo, chega-se à conclusão de que o usuário levaria

em torno de 5,1 segundos para efetuar a digitação de seu login e senha
para “logar” no sistema. A partir dessa informação, o projetista do
sistema poderá verificar se esse tempo é bom para a tarefa em destaque.
Existem outras medidas de tempo de digitação que contemplam

digitação de “códigos complexos” e até pessoas que não são
familiarizadas com o teclado (digitam de forma lenta), porém
não iremos retratar aqui neste material. Para se aprofundar
neste assunto leia o livro “The Psychology of Human-Computer
Interaction”, de Card, Thomas e Newall.
1. Elabore um modelo de tarefas baseado no GOMS simplificado

para as seguintes tarefas:
a) mover um arquivo de uma pasta para outra no MS-DOS;
b) apagar um arquivo utilizando o modo de interface gráfica;
c) copiar dois arquivos da uma pasta X para a pasta Y via interface
gráfica. (Microsoft Windows)
5.2 Modelos de Usuário
Como já foi informado, o usuário deve ser sempre o foco do projetista do

sistema. Assim, ao desenvolver um sistema, deve-se conhecer quais são
os tipos de usuários que vão utilizá-lo. Essa análise é o que chamamos
de modelo de usuários.
Esse modelo visa identificar os usuários e informar quais são os

seus papéis dentro do sistema. Esse mapeamento favorece, dentre
outras coisas, a elaboração do modelo de tarefas Keystrokes Level
Model (ver item 4.2).
Destacaremos abaixo as principais etapas exercidas neste modelo:
• Papel:
Sabemos que todo sistema possui diversas tarefas, as quais

normalmente são executadas por usuários com perfis diferentes.
Nesta fase, deve-se relacionar quais os papéis exercidos pelos
usuários. Ex.: administrador, visitante, moderador, etc.
60
Prof. Flávio Izo
• Nível de experiência na utilização de computador:
É muito importante medir o nível de experiência do usuário com os

equipamentos eletrônico em questão. Através dessa medição, pode-
se investir em treinamentos para que os usuários melhorem seus
rendimentos. Quando identificamos um usuário que não tem uma
boa prática na digitação, ele poderá influenciar negativamente na
execução de tarefas, pois estas se tornarão mais demoradas.
• Nível de experiência na utilização da aplicação:
Assim como é importante o nível de experiência do usuário no

conhecimento das ferramentas tecnológicas, também se torna
necessário conhecer o nível de experiência em relação à atividade
que irá exercer. Repare que esta etapa analisa o conhecimento do
usuário nas tarefas sem o auxílio do computador. Três níveis podem
ser considerados nesta fase: novato, intermediário e especialista. Se
o design é para um novato, deve-se ter em mente uma aplicação
mais simples, com dicas para guiar o usuário durante o processo.
Para os usuários intermediários, pode-se investir em recursos mais
robustos, mas sem deixar de lado as dicas. Já para os especialistas,
é interessante ter um design sofisticado e com recursos mais
abrangentes, pois este tem total domínio na sua atividade.
• Frequência de uso da aplicação:
A frequência de utilização do sistema é um ponto que está diretamente

relacionado com a facilidade de uso. Um usuário novato tende a se
tornar um especialista, exigindo novos recursos de acordo com sua
aprendizagem. Entretanto, um usuário especialista pode se tornar
um intermediário também ao longo do tempo. Isso pode acontecer
devido à falta de prática.
Agora que já falamos das etapas que são importantes para mapear os
usuários, vamos focar em como, de fato, executar essas etapas. Uma forma
simples é a aplicação de questionários, conforme o exemplo abaixo:
61
Figura 35: exemplo de análise de usuários
Questionário para análise de usuário do Sistema Izo
Nome:
Setor:
Papel (preenchido pelo entrevistador):
1. Assinale o seu nível de conhecimento na utilização do computador:

[ ] Novato [ ] Intermediário [ ] Expediente
2. Assinale o seu nível de conhecimento em relação à execução das atividades

qual você exerce (ou irá exercer). Considere o processo sendo feito de forma
manual e não com auxílio do computador.
[ ] Novato [ ] Intermediário [ ] Expediente
3. Com que frequência você erá utilizar a aplicação?

[ ] 2 vezes por mês [ ] 3 vezes por semana
[ ] 1 vezes por semana [ ] Diariamente
4. Assinale o seu nível de conhecimento nos ambientes abaixo. Considere A para

“não sei utilizar”, B para “Tenho conhecimentos básico”, C para “Tenho conhecimentos
intermediários” e D para “Tenho domínio sobre o ambiente”:
[ ] Windows [ ] MAC/OS [ ] Linux
A partir dos questionários aplicados, é interessante que o projetista faça

também as estatísticas para conhecer o que predomina entre os usuários.
Essa atitude visa fortalecer o processo de decisão para o desenvolvimento
do sistema. Por exemplo: 85% dos usuários têm domínio sobre o
ambiente Windows; logo, se um sistema for desenvolvido para ambiente
Linux, os usuários poderão ter dificuldades.
Outras formas alternativas para a obtenção da análise do usuário

também podem ser utilizadas, inclusive abordando etapas
diferentes das citadas.
1. Um questionário para análise de usuários foi aplicado. Descobriu-

se que 50% dos usuários sabem exatamente (usuários experientes)
como funcionam as tarefas as quais eles irão executar na área de
finanças no dia a dia da empresa. Entretanto, 30% não conhecem
nada sobre sua atividade e 20% estão no meio intermediário de
conhecimento. Sendo você o projetista do sistema, quais medidas
você praticaria para que todos conseguissem executar suas tarefas
de forma eficaz? Considere que todos os usuários possuem o
mesmo papel no sistema.
62
Prof. Flávio Izo
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
5.3 Modelos de Interação (Cenários e

storyboarding)
Como o próprio nome já diz, os modelos de interação servem para

interagir com o usuário a fim de que se possa criar uma simulação
de como seria o sistema. A ideia é mostrar ao usuário narrativas ou
ilustrações das tarefas e interfaces.
Vamos citar dois modelos de interação: o cenário e o storyboarding.
Este modelo não contempla a criação de protótipos robustos e

funcionais, somente narrativas e ilustrações de tarefas e interfaces.
A criação de protótipos será abordada mais à frente, no capítulo 6.
5.3.1 Cenários
Segundo o dicionário online Dicio (www.dicio.com.br), a palavra

cenário significa “decoração adequada a uma cena”. Traduzindo para
a nossa definição em interface usuário máquina, seria: “retratação de
uma tarefa/ação”. E é isso que queremos fazer: retratar uma tarefa para
que o usuário consiga “testar” e indicar possíveis melhorias. Por esse
motivo é que os cenários devem ser utilizados como um poderosíssimo
aliado dos projetistas.
Cenários são textos narrados com as tarefas do sistema. Como essa

narrativa será feita em prol dos usuários (que normalmente não
entendem da linguagem técnica), devemos utilizar uma linguagem
simples e de fácil entendimento. É interessante evitar jargões
próprios da informática.
63
Veja um exemplo:
Figura 36: exemplo de cenário
Tarefa 01: Cadastro de usuários.
Papéis: funcionário de vendas, gerente de vendas.
Descrição:
O funcionário de vendas acessa a opção para cadastrar clientes,
preenche todos os campos obrigatórios do formulário e opcionalmente
preenche os campos extras. Caso o cliente não saiba ou não tenha infor-
mado seu CEP, é possível que o funcionário o localize na opção especí-
fica para isso, no próprio formulário. Logo em seguida, finaliza o cadas-
tro, que é gravado no banco de dados.
Excepcionalmente, o gerente de vendas também poderá cadastrar
clientes. Os passos são os mesmos citados acima.
Como percebemos, os cenários tendem a fazer uma descrição das

funções do sistema. Essa descrição é que possibilita a visão de como o
sistema funcionará.
Mas, e como montar um cenário?
Não existe uma fórmula única e que seja eficaz para todos os casos, no
entanto, de forma geral, como vimos no exemplo acima, o cenário de
cada tarefa deve conter os usuários envolvidos, seus papéis, como e
quais ações eles podem executar.
5.3.2 Storyboarding
Enquanto o cenário utiliza-se de narrativas, o storyboarding utiliza

ilustrações para interagir com o usuário.
Essas ilustrações envolvem a descrição das tarefas através de

imagens, considerando as possíveis situações que os usuários
encontrarão ao utilizar o sistema.
64
Prof. Flávio Izo
Figura 37: exemplo de storyboarding
Form 9: Cadastro de Clientes
*Nome:
*Endereço:
*Cidade: *UF: Selecione
*CEP: ? (Não sei)
*Tel. Residencial:
*Tel. Celular:
*CPF: *RG:
Finalizar Limpar
1’ Os campos com asterísco (*) são de preenchimento obrigatório.
2’ Após finalizar, o cadastro é gravado ou o usuário recebe mensagem

informanto que há campos em branco.
No exemplo acima, o storyboarding é referente ao exemplo que citamos

no item 5.3.1 (cenários). O desenho foi feito utilizando lápis e papel.
No entanto, os desenhos podem ser feitos também com o auxílio do
computador. O maior objetivo ao utilizar a técnica de Storyboarding é
permitir a criação de simulações estáticas das telas.
Uma dica para interagir de forma mais eficiente com o usuário

é combinar a utilização das técnicas de cenários e storyboarding,
simultaneamente. Dessa forma, os usuários terão a informação
mais completa de como as tarefas serão executadas e poderão
formular críticas e sugestões mais eficazes.
Ao elaborar um storyboarding, é importante representá-lo de forma

simples, sem utilizar cores e detalhes que não irão influenciar
futuramente. Para corroborar essa afirmativa, no exemplo anterior,
mesmo empregando o processo manual, poderíamos ter utilizado régua
para alinhar as linhas e botões, cores para diferenciar os objetos, etc.
Entretanto, percebe-se que nada disso iria influenciar positivamente na
ideia principal desta técnica, que é fornecer um suporte para o usuário
simular a execução da tarefa.
65
1. Com base nas informações acerca dos modelos de interação,

elabore cenários que compreendam as seguintes tarefas:
a) cadastro para adquirir um e-mail (Você pode acessar o Gmail,
Hotmail ou qualquer outro provedor de e-mails e utilizar o
cadastro deles como exemplo).
b) exibição de clientes, com possibilidade de área de busca de
clientes (utilize os seguintes campos: código, nome, endereço
completo, telefone e CPF).
2. Com base nas informações discutidas sobre os modelos de
interação, elabore os storyboarding que compreendam os cenários
citados no exercício 1.
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
____________________________________________________
66
Prof. Flávio Izo
Concretização do Projeto
de Interface
Olá!
Neste sexto e último capítulo, falaremos sobre a fase de concretização
do projeto de interface.
A fase de concretização é imprescindível para qualquer tipo de
projeto, haja vista a existência de importantes etapas nesse item,
tais como elaboração de protótipos e testes de interfaces.
Ao fim, perceberemos que quando um projeto atinge a fase de
concretização, após todas as análises dos testes com os usuários,
pode ocorrer que o mesmo tenha a necessidade de ser refeito.
As informações pertinentes a este capítulo complementam os
conteúdos que foram abordados nos capítulos anteriores deste
material de estudo.
Bons estudos!
Neste último capítulo, iremos fazer a abordagem referente ao processo

de concretização do projeto de interface. A seguir, existem algumas
etapas para que se conclua esse objetivo. São elas: prototipação, testes
com os usuários, interpretação e avaliação dos testes e re-projeto.
De maneira bem objetiva, a fase de concretização é feita da seguinte

forma: o projetista elabora um protótipo da interface e pede aos
usuários para testá-lo. Assim, após os testes realizados, o projetista faz
a interpretação e avaliação dos testes efetuados pelos usuários. Por fim,
caso seja necessário, o projeto será refeito.
Todo esse processo é cíclico, tornando-se iterativo (repetitivo) de

acordo com o propósito definido pelo projetista. É importante frisar que
o processo começa na prototipação de interfaces. Veja a figura abaixo.
68
Prof. Flávio Izo
Figura 38: ciclo de concretização
Tes
ação tes
tip co
to
m
Pro
usu
ários
Ciclo de
Concretização
e a Inte
o
jet
valia rp
ro
ç
-p ão
Pré ret de te
açã stes
o
6.1 Prototipação de Interfaces
A prototipação consiste na elaboração de protótipos para que o

usuário possa ter uma ideia mais coesa de como o produto funcionará,
incluindo as interfaces.
Protótipo
É um modelo ou padrão que é elaborado para algum tipo de
projeto antes de seu efetivo uso. Antes de um produto ser lançado,
as empresas elaboram os protótipos para que possam evitar
possíveis defeitos no projeto.
Exemplo: Em março de 2010, o site especializado em tecnologia
Gizmodo afirmou ter encontrado em um bar na cidade de
Redwood City, na Califórnia, um iPhone 4, antes que o aparelho
fosse lançado no mercado. Esse aparelho era um protótipo que
estava em fase de testes.
Qualquer objeto pode render um protótipo. Citemos alguns exemplos:

um carro em fase experimental, o desenho de um novo ventilador,
vários telas de um sistema vinculadas por links etc.
69
Os protótipos podem ser desenvolvidos no papel, de maneira manual,

ou com o auxilio de alguma ferramenta computadorizada. No entanto,
deve-se estar ciente de que há tipos de protótipos para cada situação e
anseio. Para prototipar, por exemplo, os traços de um carro que será
lançado no mercado no próximo ano, pode-se utilizar papéis, pois não
há necessidade de interagir com as funcionalidades do carro.
Porém, caso haja necessidade de conhecer o conforto e a dirigibilidade

do carro, será inevitável criar um protótipo real.
No capítulo anterior, falamos acerca dos storyboarding.

Pense a reflita: eles podem ser considerados uma maneira de protótipo?
A principal pergunta relacionada a protótipos é: vale a pena criá-los?
Os protótipos economizam dinheiro, principalmente quando o produto

será produzido em larga escala. Já imaginou desenvolver milhares de
exemplares de um produto e depois ter que fazer a substituição, pois
este apresentava defeito? E quanto a empresa pode perder de grana e
tempo nessa substituição?
Outro motivo para valer a pena criar protótipos é porque estes conseguem
transmitir para o usuário o possível resultado de um produto (objeto,
carro, software, etc.), contrapondo à dificuldade de utilizar somente
a fala para explicar como o produto ficaria. Às vezes é muito mais
compreensível mostrar do que falar.
Dentro da fase de prototipação, devemos reconhecer que os resultados

são bastante visíveis até mesmo na comunicação entre a equipe de
desenvolvimento (quando há vários projetistas). Essa realidade fica
clara quando a equipe é dividida e cada parte fica responsável por uma
ou um conjunto de funcionalidades, e, no final, esse sistema deverá ser
reunido formando um único projeto.
Assim, os protótipos servem para demonstrar a interpretação do

produto real utilizando-se como auxílio a imaginação entre os
componentes da equipe.
Como citamos anteriormente, os protótipos podem ser desenvolvidos

com o auxílio de alguma ferramenta. No mercado, existem vários para
essa finalidade, principalmente para o desenvolvimento de softwares.
70
Prof. Flávio Izo
Em relação aos protótipos de interfaces, um software muito bom

é o Balsamiq Mockups.
Software Balsamiq Mockups
Existem vários softwares para a criação de protótipos de interfaces.
Um software que indico é o Balsamiq Mockups.
O sítio do software é http://balsamiq.com/products/mockups.
Veremos, nos tópicos seguintes, que após a prototipação, existem fases

de teste e avaliação até que se chega à fase de re-projeto. Após o re-
projeto, pode-se gerar novamente uma prototipação para confirmar as
solicitações geradas a partir das avaliações. De modo geral, apesar de
um projeto poder ser concluído utilizando-se somente um protótipo,
quanto mais ciclos de concretização (interações) forem gerados, mais
perfeito ficará o produto final.
Isso não quer dizer que devemos prototipar e testar as interfaces

perpetuamente.
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
6.2 Testes com Usuários
Após os protótipos ficarem prontos, o usuário necessita utilizá-los

para efetuar as devidas avaliações. A essa fase damos o nome de
“Testes com usuários”.
Mas testar não é tão simples. Muito pelo contrário. Os testes

devem possuir uma combinação de técnicas para testar o projeto
e descobrir o feedback (retorno) do usuário com o maior nível de
detalhamento possível.
71
Veja, abaixo, a relação de ações para que os testes sejam eficazes:
• Escolha a pessoa certa para testar, pois não adianta selecionar alguém
que não tenha conhecimento acerca do projeto. Dê preferência por
selecionar pessoas que irão realmente trabalhar com o sistema.
• Tente realizar testes com um número considerável de pessoas. Um

usuário é pouco, no entanto, utilizar todos os usuários já é muito.
Tente pegar uma amostra suficiente.
• Faça anotações de tudo o que o usuário responder em relação ao

sistema. Seja utilizando gravações de áudio, vídeo, anotando, etc.
• Tenha uma lista de ações que o usuário deverá fazer no sistema.
• Evite ao máximo “ajudar” o usuário na execução dos testes, pois sua

ajuda poderá influenciar na avaliação final da interface.
• Assim como o projetista não pode ajudar o usuário, os outros

usuários também não podem interferir nessa avaliação. Caso
tenha algum avaliador fazendo anotações, este atua apenas como
observador e não interfere no contexto do teste.
• Não considere avaliações feitas pelo usuário que não correspondam

ao esperado. Por exemplo: um comentário desnecessário do
usuário seria falar que o computador roda o sistema, mas não
executa o novo jogo lançado no mercado.
Os projetistas necessitam ter mente que os testes têm por objetivo avaliar,
além de outros pontos, as facilidades de aprendizagem, eficiência de uso
e satisfação do usuário.
Já vimos em capítulos anteriores que a interface tem por finalidade

estabelecer a comunicação do usuário com a máquina. Essa avaliação da
interface é que vai tornar claro se a comunicação com o usuário foi bem
planejada, pois estará fazendo a simulação de uso do design definido
para as tarefas do sistema.
Lembre-se sempre de que, durante a fase de testes, deve-se

documentar, de alguma forma, o retorno da avaliação do usuário.
Essa documentação pode ser feita utilizando-se gravação em
vídeo, relatório escrito, gravação em áudio, etc.
72
Prof. Flávio Izo
Como efetuar os testes?
Não é muito difícil, no entanto, deve-se fazer com muita cautela. É

necessário saber exatamente o que se quer. Veja o exemplo:
Quando alguém quer tirar carteira de motorista, o examinador sabe o

que deve cobrar do aluno: troca de marchas no momento certo, andar
na velocidade correta, respeitar a sinalização, etc. Assim, o examinador
vai anotando o comportamento do aluno e, posteriormente, faz uma
avaliação para saber se, no teste, as atitudes foram passíveis para que
ele fosse aprovado ou não.
Assim acontece nos testes de interface. Considere que o motorista é o

projetista e o aluno é o usuário: o projetista avalia o comportamento
do usuário e vai fazendo as anotações ou gravando; posteriormente,
há uma avaliação (próximo item da apostila) para descobrir o que se
pode melhorar. As melhorias podem acontecer tanto no sistema (mais
comum) quanto nas atitudes do usuário.
Quando digo nas atitudes do usuário me refiro ao comportamento

na execução das tarefas. Às vezes o usuário se equivocou durante
alguma análise devido à cultura que tinha em outro sistema que
utilizava antes, sendo que esse sistema anterior trabalhava de forma
incorreta perante as leis.
Uma maneira interessante é listar os pontos que o usuário deve

avaliar. Assim, além de criar um norte para o usuário, você ainda o
motiva a efetuar corretamente a avaliação. Não podemos esquecer
que, agindo dessa forma, o processo de avaliação dos testes também
tornar-se-á mais fácil, haja vista que saberemos exatamente onde
está ocorrendo possíveis problemas.
Figura 39: exemplo de checklist (lista de checagem)
L IST
E CK
CH
73
1. Agora você é o usuário e vai executar os testes nas interfaces.

Vamos aos passos:
- escolha um site ou sistema que você conheça e que tenha
uma quantidade razoável de funcionalidades;
- prepare um relatório informando suas observações em
relação à utilização desse site/sistema. Informe qual é o site/
sistema que está sendo avaliado. Lembre-se de separar os
elogios das críticas.
Você deve avaliar o seguinte:
- O site/sistema possui boa interface?
- Os formulários são claros e objetivos e não geram dúvidas
quanto a sua utilização?
- Ao acessar o site/sistema, você se sentiu seguro para executar
todas as suas tarefas?
- Os ícones e imagens estão de acordo com o estudado aqui
na apostila?
- A ajuda está acessível e permite a fácil localização das suas
dúvidas?
- Os textos estão claros?
- Você indicaria esse site/sistema para outra pessoa?
- Área destinada às observações finais.
As respostas não podem ser simplesmente “sim” ou “não”. Você
deve complementá-las.
6.3 Interpretação e Avaliação de testes
Após a aplicação dos testes com o usuário, é necessário reunir os

conhecimentos e aplicar a interpretação da avaliação.
A ideia é fazer uma análise a partir dos dados coletados e classificar

todas as observações feitas pelos usuários. Uma forma de classificação
é “etiquetar” as críticas/sugestões de acordo com a gravidade. Podemos
adotar as seguintes classificações: baixa, média e grave.
Um problema que gera muita resistência entre os projetistas é o custo

para se avaliar a interatividade dos sistemas. No entanto, devemos ter a
consciência de que se um sistema é bem avaliado e atende às expectativas
do usuário, ele não trará transtornos. Com isso, evita-se ajustes após o
sistema ser entregue e o cliente estará extremamente satisfeito.
74
Prof. Flávio Izo
Como fazer a avaliação e interpretação dos testes?
A avaliação dos testes pode ocorrer de diversas maneiras. Aqui

deixarei uma sugestão:
• Primeiramente, selecione todas as observações feitas pelos usuários.

Monte uma lista com a descrição dessas observações de maneira
que possa entender os comentários feitos. Se possível, enumere essa
listagem.
• Como já dissemos anteriormente, deve-se definir e etiquetar

as observações feitas pelos usuários. A classificação pode
obedecer ao grau de gravidade das sugestões/críticas. Podemos
definir em: grave, média e baixa.
• Ordene a listagem pela ordem de classificação, considerando os

mais graves como prioridade e os de baixa com pouca prioridade.
• Faça um cronograma de alterações, começando pelas mudanças

consideradas mais graves.
• Execute-as!
É muito importante também classificar os elogios, pois estes podem

servir de motivação e serem adotados com referência em futuros
projetos. No entanto, como os elogios não requerem modificações, basta
classificá-los e armazená-los em uma listagem (diferente da listagem de
críticas/sugestões) para futuras consultas.
Como saber se uma crítica/sugestão feita pelo usuário é pertinente?
Para esse questionamento, não há uma fórmula específica. O projetista

deve, juntamente com a equipe e o(s) usuário(s), definir em conjunto o
que realmente é importante para o sistema.
Uma dica é começar avaliando/interpretando os testes com as interfaces

das tarefas mais importantes. Normalmente, nesta fase do sistema, já
existe uma lista de tarefas típicas ou críticas.
75
6.4. Re-Projeto
Vejamos: O projetista passa um bom período do desenvolvimento com

longas conversas com o usuário, analisando seus objetivos em relação ao
sistema, análise de tarefas e feitura dos protótipos. Assim, por fim, faz a
avaliação dos testes aplicados e descobre que o projeto necessita ser refeito.
Relaxa, isso é normal. Normal em parte, melhor dizendo.
Um projeto pode, sim, ser refeito, mas não completamente refeito.

Apenas uma parte dele. Isso não implica que o seu projeto esteja errado,
apenas que precisou de mudanças para atingir, de forma mais precisa,
os objetivos do usuário.
Em contrapartida, se ao finalizar um projeto os testes mostrarem

que o mesmo necessita ser todo refeito, aí você deve se preocupar,
porque algo de errado está acontecendo na sua forma de organizar e
desenvolver seu projeto.
76
Prof. Flávio Izo
CARD, S.K.; THOMAS, T.P.; NEWALL, A. The Psychology of Human-Computer
Interaction. London: Lawrence Erlbaum Associates, 1983
Hix, D.; Hartson, H. R. Developing User Interfaces: ensuring usability through product
& process. John Wiley and Sons, 1993.
NORMAN, D.; DRAPER, S. User Centered System Design. Hillsdale: Lawrence Erlbaum,
1986.
OLIVEIRA NETTO, Alvim Antonio de. IHC: Modelagem e Gerência de Interfaces com
o Usuário. São Paulo: Visual Books, 2004.
PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. Design de Interação: Além da

Interação Homem-Computador. Porto Alegre: Bookman. 2005.
ROCHA, Heloisa Vieira da. BARANAUSKAS, Maria Cecília C. Design e Avaliação de

Interfaces Humano-Computador. Campinas: Unicamp. 2003.

Interface Usuário Máquina

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Interface Usuário Máquina

Enviado por

Direitos autorais:

Formatos disponíveis

PROF.

Curso de Licenciatura em Informática

I99i Izo, Flávio

Créditos de autoria da editoração

É um prazer tê-lo(a) conosco.

O IFES – Instituto Federal do Espírito Santo – oferece a você, em parceria

Na EaD – Educação a Distância, você é o grande responsável pelo sucesso

Fique atento às orientações de estudo que se encontram no Manual do

A EaD, pela sua característica de amplitude e pelo uso de tecnologias mo-

Desejamos-lhe sucesso e dedicação!

Conceitos importantes. Fique atento!

Atividades que devem ser elaboradas por você,

Indicação de leituras complementares, refe-

Destaque de algo importante, referente ao

Reflexão/questionamento sobre algo impor-

Espaço reservado para as anotações que você

Cap. 2 - Comunicação Projetista usuário 21

Cap. 3 - Engenharia Cognitiva e Semiótica de

Cap. 4 - Estilos de Interação 39

Cap. 5 - Modelagem de Interfaces 55

Cap. 6 - Concretização do Projeto de Interface 67

1.1 O que é Interface Usuário Máquina?

Antes de iniciar a nossa discussão sobre as Interfaces do usuário com

Alguns produtos são tão preocupados com a interação com o usuário

Figura 01: Interfaces personalizadas para cada tipo de usuário

Tesoura para Canhotos Tesoura para Destros

Essa preocupação faz com que os usuários sintam-se à vontade para

Continuando a nossa disciplina, precisamos discutir acerca da interface

Figura 02: Decifrando a Interface Usuário Máquina

Corroborando o que foi mostrado na divisão das palavras acima,

“A interface Usuário Máquina é um meio que permite a comunicação

Já imaginou um usuário tentando ligar a televisão conectando fios e

Como vimos, a interface é fundamental para que o usuário consiga se

As máquinas utilizam uma linguagem denominada “linguagem

Figura 03: Representação do código binário

Como percebemos na figura 03, seria muito complicado para o usuário

E é justamente essa necessidade de que todos pudessem ser capazes de

Não podemos esquecer que o usuário interage com a interface

1.2 Qual a importância das interfaces?

A resposta para essa pergunta é bem simples: devemos estudar a respeito

Como já citado, o usuário necessita de uma interface e que esta seja

Um sistema é composto pela aplicação (funções) e interface. Quando um

O certo é que a qualidade da interface é importante sempre, mas em

• Ao tentar efetuar o pouso, o piloto do avião percebe que as

Apesar de parecer, essa situação não é improvável de acontecer. Todos

1.3 Como ocorre a comunicação?

A comunicação pode ocorrer de diversas formas. A essas formas, damos

Figura 04: Estilo de interação textual

Figura 05: Estilo de interação gráfico

As duas imagens acima representam a mesma ação, porém executadas

Antigamente, os primeiros sistemas possuíam interfaces com estilos

Com o passar dos anos e a evolução dos computadores, as interfaces

Falaremos mais à frente sobre as diversas formas de comunicação entre

1.4 Processo evolutivo das interfaces

Já vimos que a interface serve de interconexão entre dois sistemas que

Com o surgimento dos primeiros computadores, não se distinguia o

• Na primeira geração, os usuários necessitam utilizar plugues

Figura 06: ENIAC (lançado em 1946)

• Na segunda geração, houve o avanço para a utilização de lotes de

Figura 07: Cartão perfurado

• Na terceira geração, surgiu o conceito de tempo compartilhado

• A quarta geração é a dos menus, que facilitou a escolha das ações

• A quinta geração se desenvolveu com o surgimento das janelas e

Figura 09: Interface gráfica