INTERFACE E USABILIDADE DE

SOFTWARE
 SUMÁRIO

Introdução..........................................................................................................................6

Conceituação.....................................................................................................................7

1.1 Ergonomia...............................................................................................................7

1.1.1 Ergonomia física e cognitiva............................................................................9

1.2 Usabilidade e Engenharia de Usabilidade.............................................................14

1.3 Interação Humano-Computador............................................................................20

1.3.1 A primeira geração (ENIAC).........................................................................22

1.3.2 Segunda geração (IBM 7030).........................................................................23

1.3.3 Terceira Geração (IBM 360)..........................................................................24

1.3.4 Quarta Geração...............................................................................................25

1.4 Interfaces e o projeto de interação.........................................................................28

1.4.1 Futuro da IHC.................................................................................................31

Conhecimento..................................................................................................................34

2.1 Princípios Ergonômicos para IHC.........................................................................34

2.2 Critérios Ergonômicos...........................................................................................35

2.2.1 Condução........................................................................................................35

2.2.1.1.Agrupamentos e distinção entre os itens:................................................36

2.2.2 A carga de trabalho.........................................................................................37

2.2.3 O controle explícito........................................................................................37

2.2.4 Adaptabilidade................................................................................................38

2.2.5 A gestão de erros............................................................................................38

2.2.6 A homogeneidade/Consistência (coerência)..................................................39

2.2.7 O significado dos códigos e denominações....................................................39

2.2.8 A compatibilidade..........................................................................................39

2.3 Recomendações Ergonômicas para IHC...............................................................40

 2.3.1 Objetos de interação.......................................................................................42

2.3.1.1 Painéis de controle...................................................................................43

Janelas..............................................................................................................43

Caixas de diálogo............................................................................................44

Formulários......................................................................................................45

Caixas de Mensagens......................................................................................46

2.3.1.2 Controles complexos...............................................................................47

2.3.2 Atributos de objetos de interação...................................................................50

Desenvolvimento.............................................................................................................53

3.1 Introdução ao projeto de IHC................................................................................53

3.2 Um modelo de ciclo de vida simples para o projeto de IHC.................................56

3.3 Sobre os usuários...................................................................................................58

3.4 Técnicas de concepção..........................................................................................60

3.4.1 Brainstorming.................................................................................................60

3.4.2 CardSorting.....................................................................................................61

3.4.3 Diagrama de afinidade....................................................................................63

3.4.4 Storyboard......................................................................................................64

3.4.5 Maquetes – protótipos em papel.....................................................................65

3.4.6 Prototipagem rápida........................................................................................66

3.4.7 Prototipagem de baixa e alta fidelidade..........................................................67

3.5 Técnicas de modelagem de interface.....................................................................68

3.5.1 The Bridge......................................................................................................69

3.5.2 Usercentered design........................................................................................69

3.6 Considerações finais..............................................................................................73

Avaliação.........................................................................................................................75

4.1 Introdução..............................................................................................................75

4.2 Por que avaliar?.....................................................................................................76

 4.3 O que avaliar?........................................................................................................77

4.4 Onde avaliar?.........................................................................................................78

4.5 Quando avaliar?.....................................................................................................78

4.6 Técnicas de Avaliação de Usabilidade..................................................................79

4.6.1 Técnicas prospectivas.....................................................................................80

4.6.2 Técnicas preditivas.........................................................................................80

4.6.2.1 Avaliação Heurística...............................................................................80

4.6.2.2 Inspeção por meio de lista de verificação................................................86

4.6.3 Técnicas objetivas..........................................................................................90

4.6.3.1 Ensaio de Interação..................................................................................90

Acessibilidade à Web......................................................................................................98

5.1 Introdução à acessibilidade....................................................................................98

5.2 Acessibilidade na web e sua importância............................................................101

5.3 A Web acessível..................................................................................................104

5.4 Componentes essenciais para acessibilidade na Web.........................................104

5.4.1 Interdependência entre componentes...........................................................107

5.4.2 O ciclo de implementação............................................................................108

5.5 Projeto e desenvolvimento de um site acessível..................................................109

5.5.1 Recomendações do W3C..............................................................................110

5.5.1.1 Princípio 1 - Percepção..........................................................................111

5.5.1.2 Princípio 2: Operável.............................................................................111

5.5.1.3 Princípio 3: Entendível..........................................................................112

5.5.1.4 Princípio 4: Robusto..............................................................................112

5.5.2 Métodos e validadores de acessibilidade na web........................................113

Introdução

Desenvolver sistemas é uma tarefa muito interessante e, se bem aproveitada, pode te dar
um retorno financeiro bem interessante. Porém não basta conseguir analisar um
problema e saber solucioná-lo usando uma linguagem de programação. Isto é
importante, porém o desenvolvimento envolve muito mais detalhes do que se imagina.
É muito comum ver programadores superexperientes e conhecedores de frameworks
como o Bootstrap, por exemplo. Mas será que, além do framework passa na cabeça
deles que existem detalhes importantes a respeito de algo além de um programa bonito?
Um dos detalhes é a questão da usabilidade. É importante que ao criar a parte que
interage com o usuário, alguns detalhes sejam observados, como a questão da
acessibilidade.
Esta disciplina tem como objetivo introduzir você em um tópico no qual muitos
desenvolvedores não pensam ou ao qual não dão importância, que é a questão da
usabilidade. Como foi citado, não basta saber um bom framework; é necessário saber
aplicá-lo corretamente. Esta disciplina envolve conhecimentos de diversas áreas, como:
psicologia, sociologia, antropologia, sistemas de informação, ciência da computação,
design gráfico e ergonomia. Porém, não vamos entrar a fundo em cada uma dessas
áreas. O que é importante você saber é que desenvolver interfaces não é apenas uma
questão de saber programação e um determinado framework de apresentação. Vai um
pouco mais além.
Nosso objetivo é despertar sua atenção para este conhecimento e colocá-lo em contato
com algumas questões básicas destas áreas mencionadas. É interessante e, se você se
dedicar, saiba em que é uma área que há grande demanda de bons profissionais.
Conceituação

Neste capítulo vamos tratar de um assunto que é encontrado em várias áreas, como
Arquitetura, Engenharia de Produção, Engenharia de Segurança e Tecnologia da
Informação: a ergonomia.
A ergonomia trata basicamente da adequação das pessoas aos locais de trabalho e outros
tipos de sistemas (não necessariamente computacionais).
Além disso, vamos estudar uma introdução à usabilidade e à engenharia de usabilidade.
A usabilidade é uma área da computação relacionada com outra grande área chamada
Interação (ou Interface) Homem-Máquina (IHM). A IHM sempre foi um motivo de
grande discussão, porque a tecnologia, evoluindo ao longo dos anos, proporcionou uma
grande evolução nas interfaces que ligam os humanos ao computador e às máquinas em
geral. A IHM, por sua vez, é uma área estudada pela Engenharia de Software.
A usabilidade tem ganhado muito destaque no desenvolvimento de sistemas,
principalmente no desenvolvimento web. Atualmente, vários frameworks têm aparecido
e ajudado os desenvolvedores a criarem sites mais interativos e intuitivos, e isso tem um
grande relacionamento com usabilidade.

1.1 Ergonomia

A ergonomia pode ser definida como “adaptação ou melhoria na adequação dos

produtos aos indivíduos”. Ela existe desde a Pré-História quando o homem primitivo
sentiu a necessidade de criar objetos e utensílios que o ajudassem a realizar as mais
diversas tarefas, como armazenar água, cozinhar alimentos, fazer roupas para se
proteger do frio e caçar (figura 1.1).
 Figura 1.1 – Primórdios da Ergonomia.

Com a evolução do homem também veio a evolução da ergonomia, que se preocupava

com a necessidade de melhorar equipamentos de forma a tornar o uso mais simples e
intuitivo. A ergonomia tomou uma conotação realmente relevante na Segunda Guerra
Mundial, quando aviões, tanques de guerra e armas precisavam ser produzidos
rapidamente. Entretanto, esses equipamentos foram produzidos sem a preocupação de
adequação às características perceptivas e físicas dos usuários, o que levou a diversas
mortes de soldados.
É evidente que a perda de vidas implica em sérios problemas; dessa forma, houve um
esforço conjunto de especialistas de diversas áreas para adaptar os equipamentos, a fim
de desenvolver projetos que adaptassem sua interface de uso (alavanca, botões, pedais e
painéis) e campo de visão a soldados que deveriam utilizá-los em situações extremas,
quando sua maior preocupação deveria ser o combate, e não a forma de uso das armas e
equipamentos.
Após a Segunda Guerra Mundial a ergonomia ganhou grande avanço por meio da
NASA e seu impressionante avanço tecnológico, atingindo os mais diversos setores das
indústrias na América do Norte e Europa.
Atualmente, a ergonomia é uma área extremamente multidisciplinar que envolve desde
engenheiros e físicos até médicos, fisioterapeutas e psicólogos na tentativa de solucionar
a necessidade do ser humano em aplicar menos esforço mental e físico em suas tarefas
cotidianas. Assim, algumas premissas devem ser “pretendidas" na criação de um
sistema ergonômico:
 O usuário deve desempenhar somente as funções absolutamente essenciais, e
que não possam ser desempenhadas pelo sistema, transferindo para o sistema
uma função mesmo que ela possa ser desempenhada pelo usuário.
 O usuário deve ter de memorizar o mínimo possível.
 O usuário só deve ter de aprender o essencial para sua tarefa.
 O usuário não deve ter de aprender a terminologia, passos não relacionados à sua
tarefa – instruções ou comunicações do sistema devem ser feitas ao longo da
tarefa.
 Os comandos do usuário devem ter execução natural e simples, não devem ser
complexos e compostos.
 O usuário deve ter frustração mínima.

1.1.1 Ergonomia física e cognitiva

Imagine que você está em uma sala de cinema e, após 10 minutos de o filme ter
começado, ocorre um problema, as luzes não se acendem e começa a soar o alarme de
incêndio. As pessoas ao seu redor se desesperam e você começa a sentir o cheiro de
fumaça. Você se mantém calmo e vê que ao lado esquerdo da tela, um pequeno painel
com uma luz vermelha acesa, e logo abaixo vê uma porta e a associa à saída de
emergência. Você sai em direção à porta e, em um único movimento empurra uma
longa barra horizontal pouco acima da altura da sua cintura, saindo da sala que já está
bastante esfumaçada, sentindo um grande alívio ao respirar ar fresco.
 Figura 1.2 – Saída de emergência com a barra horizontal.
O ponto-chave para que você pudesse se livrar desta situação foi a facilidade de achar e
abrir a porta da saída de emergência. Essas saídas foram projetadas para que, em uma
situação de perigo iminente, as pessoas possam ser encaminhadas para a saída sem
pensar, de forma simples e instintiva, simplesmente ao ver um painel com uma luz
vermelha. Da mesma forma, em relação ao sistema de abertura da porta, em uma
situação de risco, a pessoa não terá tempo ou estará tão apavorada que não conseguirá
encontrar uma maçaneta ou identificar uma forma de abrir a porta. Sendo assim, a porta
se abre quando a pessoa empurra a barra, o que é uma ação intuitiva, uma vez que sua
principal preocupação é fugir.
Aqui podemos notar elementos claros de ergonomia cognitiva e física:
 o fato de a saída de emergência estar posicionada imediatamente ao lado da tela,
faz com que você não precise procurar muito por ela, uma vez que, durante a
seção, a sua atenção estará voltada para a tela;
  além disso, o fato de a barra horizontal estar posicionada um pouco acima de sua
cintura faz com que você não precise fazer movimentos antinaturais, portanto
abrir a porta será o menor dos seus problemas.
Temos então dois exemplos de ergonomia física que está relacionada a adaptação de um
sistema a anatomia humana, antropometria, fisiologia e biomecânica. Ou seja, as ações a
serem realizadas se aproximam ao máximo de movimentos naturais aos seres humanos.
Podemos notar também elementos de ergonomia cognitiva, uma vez que a saída de
emergência é indicada por uma luz vermelha, enquanto todas as luzes estão apagadas,
sendo assim bastante visível, e também outro elemento é o fato de a porta se abrir
quando a barra é empurrada, o que é um movimento bastante natural, que não requer
grande carga de raciocínio. Nesse tipo de ergonomia, é levada em consideração a carga
mental de uma determinada ação, na tentativa de diminuir raciocínio, estresse e tomada
de decisão.
Este é um exemplo no qual é possível mostrar que a ergonomia não está relacionada
apenas a equipamentos ou máquinas, uma vez que entendemos a sala de cinema como
um sistema, e as pessoas como usuários.
Existem outros exemplos mais diretos também, em que podemos notar elementos claros
de ergonomia física e cognitiva. Por exemplo, a comparação entre dois controles
remotos: um tem um formato quadrado (com uma pegada ruim), os botões são
pequenos, seguindo o mesmo padrão, e os botões mais usados estão longe um do outro,
exigindo que você olhe para o controle para executar qualquer ação; o outro é
anatômico (seu formato encaixa na sua mão) os botões são grandes e em formatos
diferentes de forma que você não precise se preocupar em olhar para o controle para
executar qualquer ação, você identifica qual botão apertar apenas com o tato, são
poucos botões, e o que diferencia a uma ação realizada da outra, é a forma como esses
botões são manipulados, apertando, deslizando o dedo sobre o botão para um lado ou
para o outro.
Figura 1.3 – Controle remoto "ruim".
 Figura 1.4 – Controle remoto "bom"

Podemos identificar também esses elementos na evolução do interior dos carros.

Antigamente os botões e as alavancas eram espalhados pelo painel do carro e, muitas
vezes, para executar uma ação, você precisava desviar a atenção do trânsito para olhar
para o painel e identificar o botão ou alavanca desejado.
Hoje em dia, nos carros mais modernos, grande parte dos controles do carro estão no
próprio volante, inclusive controle multimídia, ar-condicionado e trocas de marchas,
fazendo com que o condutor foque sua atenção no trânsito, não precisando retirar as
mãos do volante para quase nada.
E, finalmente, no mundo da informática, podemos comparar os touchpads de diversos
laptops com o touchpad desenvolvido pela Apple, que torna a experiência de uso do
computador muito mais simples e intuitiva, uma vez que são adicionados elementos de
percepção naturais multitouch como: para dar zoom em uma imagem, basta abrir dois
dedos; para movimentar a barra de rolagem basta deslizar dois dedos para cima ou para
baixo...
Sendo assim, vistos esses exemplos, o desafio a ser vencido é criar softwares
ergonômicos, ou seja, que exijam o menor esforço físico e cognitivo do usuário,
evitando, frustrações, grande uso de raciocínio e memória do usuário.

1.2 Usabilidade e Engenharia de Usabilidade

Vamos supor outra situação: você está no escritório postergando o que precisa fazer: o
manual formatado do software recém-produzido que havia prometido ao seu chefe há
tempos, mas está tranquilo, pois o texto já está todo escrito e as figuras já estão todas
prontas, a única coisa que falta é a formatação do arquivo.
Já são duas horas da tarde, e, quando abre a caixa de e-mails, surpresa: uma cobrança do
chefe dizendo que precisa desse manual pronto até o fim do dia.
Você percebe que, se abrir mão do cafezinho das quatro horas, consegue terminar a
formatação do arquivo. Porém, quando abre o editor de texto, nota que ele foi atualizado
para a versão mais recente, com novas funcionalidades e um layout completamente
diferente, as ferramentas que você estava acostumado a usar não estão mais onde
sempre estiveram. Você procura, passa por todos os menus, mas a interface está muito
diferente, as horas vão passando e após buscar por informações na internet, consegue
encontrar algumas ferramentas e avançar um pouco na formatação, mas já são 16:30 e
pensa: “Como uma empresa tão grande, não faz uma interface mais fácil, mais intuitiva?
Será que ninguém pensou na usabilidade deste software”?
É evidente que, se os construtores do editor de texto realmente tivessem se preocupado
com a usabilidade do software sua tarde teria sido muito mais tranquila, e você teria a
certeza de que conseguiria entregar o manual pronto ao seu chefe, mas infelizmente o
software, não era nem um pouco usual.
Mas, então, o que seria a usabilidade?
O termo usabilidade surgiu como uma parte, um ramo da ergonomia voltada para às
interfaces computacionais, mas acabou se difundindo para outras áreas. Hoje o termo
também é utilizado em contexto de produtos, como aparelhos eletrônicos, em áreas da
comunicação e produtos de transferência de conhecimento, como manuais, documentos
e ajudas online.
Podemos definir usabilidade como a facilidade com que as pessoas têm ao manusear
algum determinado objeto, de modo eficiente, intuitivo, sem provocar erros
operacionais e oferecendo ainda satisfação aos usuários. Ou seja, podemos associar
usabilidade à facilidade de uso. Se um produto é fácil de usar, o usuário tem maior
produtividade: aprende mais rápido, memoriza o passo a passo das operações e erra
menos.
Veja a figura 1.5: Preciso ir para o primeiro andar. Como faço? Que botão eu aperto, o 0
ou o 2? Preciso ir por tentativa e erro? E o que seria o andar “-1”? Pode ser o subsolo?
Mas e se houvesse mais andares abaixo do solo? Seria “-2”, “-3”, etc? Isto não é um
pouco estranho?

Fig. 1.5 – Botões do elevador

Uma boa usabilidade costuma andar de mãos dadas com um bom design!
Smartphones em geral tentam fazer com que a experiência de uso seja simples e fácil,
uma vez que é necessária apenas a realização de movimentos naturais e intuitivos para a
troca de páginas e seleção de operações e aplicativos.
 Fig. 1.6 – O Iphone da Apple
Outro exemplo de usabilidade em produtos são controles remotos. O Weemote é um
controle remoto focado em atender às necessidades de crianças e idosos com botões
grandes e coloridos só com funções básicas. Nesse ponto podemos fazer uma associação
entre usabilidade e interação. Assim, fica claro que a usabilidade não depende só das
características do produto, mas também das características do usuário, da tarefa e do
ambiente ao qual todos esses fatores estão incluídos, ou seja, a interface deve ser
desenvolvida levando-se em consideração a causa e a forma de contato entre usuário e
produto.
Segundo (JORDAN, 1998), a usabilidade pode ser avaliada de acordo com alguns
princípios:

 Evidência: Devem ser evidentes o modo de operação e a função do produto,

como, por exemplo, maçanetas de portas de carros (figura 1.7):
 Figura 1.7 – Maçaneta de carro.
 Consistência: Operações semelhantes devem ser resolvidas de formas
semelhantes. Um exemplo é a atualização do editor de texto que mantém as
ferramentas mais utilizadas em seus lugares, sem maiores alterações que
confundam o usuário.
 Capacidade: As capacidades do usuário para cada função não devem ser
ultrapassadas. Por exemplo, colocar os principais controles do carro no volante,
faz com que ele seja capaz de fazer mais operações sem desviar sua atenção do
trânsito.
 Compatibilidade: A experiência de uso deve ser compatível com as
experiências socioculturais dos usuários. Para desenroscar uma tampa, é preciso
girá-la no sentido anti-horário.
 Prevenção de erros: Os produtos devem evitar ao máximo procedimentos
errados.
 Realimentação: O sistema deve dar um retorno ao usuário sobre o sucesso de
sua tarefa, para que ações repetitivas sejam evitadas.
 Figura 1.8 – Retorno de uma ação do programa. Fonte: autor.

Mas, então, qual a diferença entre usabilidade e ergonomia, já que, em ambos os casos,
vários dos mesmos exemplos podem ser utilizados?
Atualmente, a palavra ergonomia se refere à característica de um sistema ou tarefa que
se adapte ao usuário, e não o contrário. É uma área multidisciplinar que compreende
diversos ramos da ciência, como: anatomia, antropometria, biomecânica fisiologia,
psicologia etc. Baseia-se em conhecimentos adquiridos, nas habilidades e capacidades
humanas para adaptar as mais diversas, atividades, ferramentas, máquinas e produtos,
com o objetivo a torná-los mais seguros, eficientes e confortáveis para uso humano.
Já a usabilidade, como mencionado anteriormente, é uma ramificação da ergonomia,
preocupa-se em produzir uma interface que deve ser usada para se executar uma dada
tarefa da forma mais simples possível, de modo a permitir que os usuários foquem
apenas no trabalho que eles desejam executar (NORMAN, 1986). Segundo (ISO/IEC
9126), “usabilidade é a capacidade de uma aplicação ser compreendida, aprendida e
utilizada, sendo atraente para o usuário, em condições específicas de utilização”. Isso
significa que aquele editor de textos do início deste tópico deveria, entre outras coisas,
ter as seguintes características:

Quão fácil e quanto de treinamento os usuários

precisam para realizarem tarefas básicas no
APRENDIZAGEM
primeiro contato que têm com a interface do
sistema?
Os usuários conseguem realizar as tarefas
EFICIÊNCIA exigidas pelo sistema, de forma eficiente, depois
de quanto tempo de uso?
O usuário deve lembrar-se de como usar o
MEMORIZAÇÃO sistema depois de um longo período sem utilizá-
lo?
Caso erros aconteçam, a interface deve avisar o
ROBUSTEZ usuário e permitir a correção de modo fácil, sem
gerar frustrações.
Quão agradável, confiável e satisfatória é a
SATISFAÇÃO
utilização do sistema?

É importante salientar que, nas áreas de Interação Humano-computador e na Ciência da

Computação, muitas empresas têm consciência da importância da usabilidade. Porém,
muitas delas ainda veem a usabilidade como um fator que consome tempo e recurso,
como se ela representasse um custo adicional, fora do que é essencial que só encareceria
seu produto. Entretanto, as empresas têm muito mais a perder ao minimizar a
usabilidade dessa forma. De acordo com CYBYS, BETIOL e FAUST (2007):
Dependendo da frequência
com que o software é
empregado, os prejuízos
para as empresas podem
também ser expressivos,
não só em decorrência do
absenteísmo e da
rotatividade do pessoal,
mas também pela baixa
produtividade,
competitividade e menor
retorno de investimento.
Sistemas difíceis de usar
implicam em erros e perda
de tempo, fatores que se
multiplicam com a
frequência das tarefas e o
número de usuários. A
perda de dados e
informações pode implicar
na perda de clientes e de
oportunidades.
Acontecimentos deste tipo
causam desde uma
resistência ao uso do
sistema até a sua
subutilização e abandono
completo, com o devido
consentimento da
empresa. O barato terá
custado caro.
1.3 Interação Humano-Computador

Vamos usar outra situação cotidiana para exemplificar: imagine um senhor que vai ao
banco sacar o dinheiro de sua aposentadoria e sempre faz o mesmo “ritual” todo mês,
indo até o caixa. Mas desta vez há uma diferença: ao chegar ao banco, vê uma fila
enorme de pessoas à espera de as portas se abrirem, mas ainda faltavam 15 minutos para
as 10 horas. Em vez de enfrentar a fila, o senhor pensou na possibilidade de mudar e
tentar se atualizar e provar a si mesmo que conseguiria fazer o saque de sua
aposentadoria no caixa eletrônico, afinal, não poderia ser tão complicado assim. Ele via
pessoas tocando a tela e recolhendo seu dinheiro a todo momento. Ele ia tentar.
Assim que a porta se abriu, o senhor correu para o caixa eletrônico, olhou para o lado e
viu uma moça a toda pressa tocando no visor. Ele então toca no visor também, quando
uma mensagem aparece: “Insira seu cartão”. Ele procura e vê um lugar onde colocar o
cartão, quando outra mensagem aparece: “falha na identificação do cartão”. Ele imagina
que colocou o cartão na posição errada, reposiciona e coloca novamente o cartão no
local indicado, quando outra mensagem aparece: “digite sua senha”. Ele digita e,
quando pensa estar dominado o assunto vem, a mensagem: “posicione seu dedo no
leitor biométrico”. Ele o faz prontamente, mas uma mensagem aparece: leitura não
efetuada. Repita a operação.
Ele olha para trás e a fila está aumentando, quando ele começa a ficar preocupado,
repete a operação e uma série de quadrados aparecem na tela, com várias possibilidades,
dentre elas o saque. Ele escolhe um quadrado e vários outros quadrados aparecem: conta
corrente, poupança, conta salário, etc. Creio que você consegue imaginar o resto desta
situação.
Situações como essas ocorrem o tempo todo. Muitas pessoas não sabem como agir
quando se deparam com uma máquina ou um sistema computacional. Por que essa
interação é tão difícil?
Existe uma área na Computação que estuda a interação de forma a deixá-la mas simples,
objetiva e satisfatória, chamada de Interação Homem Computador (IHC).
Essa necessidade surge no cotidiano com as mais diversas tarefas que envolvem
máquinas que se utilizam de algum tipo de sistema computacional. Esses sistemas na
maioria das vezes são criados e desenvolvidos para facilitar nossas vidas, mas em vários
casos acabam atrapalhando, por não serem bem planejados, projetados e pensados.
Daí a necessidade de toda uma ciência multidisciplinar, envolvendo ciência da
computação, psicologia cognitiva, psicologia organizacional e social, ergonomia e
fatores humanos, engenharia, design, antropologia, sociologia, filosofia, linguística e
inteligência artificial, por trás desse assunto, que estuda como interagimos com os
computadores nas mais diversas situações, para tornar cada vez mais simples e natural a
interação homem computador.
Então uma definição para IHC seria: “a interação Humano-Computador (IHC) é uma
disciplina que diz respeito ao design, avaliação e implementação de sistemas de
computação interativos para uso humano em um contexto social e com os estudos dos
principais fenômenos que os cercam” (Curricula for Human-Computer Interaction,
2009).
Porém, a interação entre humanos e computadores necessita de um meio de
comunicação que é chamado de interface, por meio da qual o usuário entra em contato
com a máquina de forma física, perceptiva e cognitiva (NORMAN, 1986).
A interface é o lugar onde ocorre contato entre duas partes. Toda forma de interação
onde uma ação do usuário (entrada) leva a uma resposta do sistema (saída) é
intermediada por uma interface. Podemos ter como exemplos, computadores, maçaneta,
televisões, rádios, micro-ondas, aparelhos de telefone e etc.
A interface permite que um agente (humano) faça uma ação por meio de uma interface
(maçaneta) e tenha uma resposta do paciente (porta).
A interface do computador provoca estímulos ao usuário de forma que ele manipule a
interface por meio de dispositivos e tenha as respostas relacionadas à sua atividade de
interesse. Para cada ação, uma nova resposta é esperada por ambos os lados: sistema e
usuário.
Mas será que desde o surgimento dos computadores a interação homem computador é a
mesma?
É evidente que não. Desde seu surgimento computadores e interfaces evoluíram juntos
até chegar ao que conhecemos e convivemos hoje, de uma interface simples e
rudimentar passando por apenas linhas de código, até chegarmos nas interfaces gráficas
e intuitivas de hoje em dia.
Todos sabem que os computadores atuais são fruto de uma intensa evolução tanto em
termos de hardware quanto de software, mas o que poucos sabem é que, na década de
1950 já existiam computadores. É certo que eles não se pareciam nem um pouco com os
computadores que conhecemos hoje, mas já eram capazes de fazer alguns cálculos de
forma bem rápida para determinadas tarefas.

1.3.1 A primeira geração (ENIAC)

Figura 1.9 – O ENIAC (https://en..org/wiki/ENIAC)

A interação com os primeiros computadores, os chamados ENIAC e UNIVAC, era
muito complexa, já que naquela época não existia linguagem de programação, os
computadores eram programados para resolver um problema em específico, se quisesse
resolver outro problema todo computador deveria ser reprogramado. Eles eram enormes
e tinham literalmente o tamanho de salas inteiras, pesando aproximadamente 30
toneladas, além de sofrerem com superaquecimento pois, em vez de utilizarem
microprocessadores, eles utilizavam válvulas.
Elas funcionavam de maneira parecida com uma placa de circuitos, sendo que cada
válvula acesa ou apagada representava uma instrução à máquina. Cada um deles
necessitava de cerca de 19 mil válvulas por ano, porque as válvulas queimavam com
poucas horas de uso e precisavam ser substituídas.
1.3.2 Segunda geração (IBM 7030)

Figura 1.10 – O IBM7030.

A segunda geração de computadores apresentou uma série de novidades e avanços em
relação à primeira geração. O IBM 7030 foi o modelo de maior sucesso dessa geração,
sua programação foi bastante simplificada, uma vez que utilizava a linguagens como
Fortran e Cobol em vez de linguagens de máquina como era usado no ENIAC.
Outros fatores também foram importantes para o sucesso do IBM 7030, ele era muito
menor que o ENIAC, pesava “apenas” 890 kg o que realmente é pouco diante das 30
toneladas do ENIAC. Essa considerável diminuição no tamanho só foi possível porque
o IBM 7030 utilizava transistores em vez de válvulas, os transistores eram bem menores
em relação às válvulas e os computadores ficaram mais econômicos com relação ao
gasto de energia e também em relação ao custo das peças.
 Figura 1.11 – Réplica do primeiro resistor.

1.3.3 Terceira Geração (IBM 360)

Figura 1.12 – O IBM 360.

No final da década de 1970, o emprego dos semicondutores fez com que os

computadores da terceira geração tivessem um aumento significativo na velocidade e na
eficiência. Nessa geração foram introduzidos teclados para digitação de comandos e
monitores para visualização de sistemas operacionais primitivos e a possibilidade de
fazer upgrades. Entretanto, os computadores dessa geração ficaram maiores do que os
da geração anterior. O IBM 360 (modelo de maior expressão dessa geração), claramente
pesava mais do que seus antecessores.
Nessa época, os computadores já começaram a ficar mais acessíveis.

1.3.4 Quarta Geração

Na década de 1970 foram lançados os primeiros computadores da forma como

conhecemos hoje, os microcomputadores. Esses computadores ficaram bem menores
(pesando cerca de 20 kg), e a redução foi possível graças ao uso de componentes
chamados microprocessadores. Com isso, os computadores ficaram muito mais
acessíveis, tanto que era possível adquirir um computador como o Altair 8800 com um
kit de montar vendidos por revistas especializadas nos Estados Unidos.

Figura 1.13 – O Altair 8800.

Nessa mesma época, Steve Jobs e Steve Wozniak criaram o Apple I, que tinha como
objetivo ser um computador de fácil acesso para leigos e logo foi substituído pelo Apple
II. O grande diferencial introduzido nesses computadores é que Jobs e Wozniak se
basearam no BASIC para criar um sistema com interface gráfica, incluindo editores de
texto, planilhas eletrônicas e bancos de dados. Isto contribuiu com a popularização dos
computadores, saindo do meio científico e atingindo a população em geral.
Posteriormente, a Apple também foi responsável pela adoção dos mouses, que tornou a
experiência de interação humano computador mais amigável ainda. Pouco tempo
depois, a Microsoft também lançou o seu sistema operacional gráfico, o Windows.

CONEXÃO
BASIC – Beginner’s All-
purpose Instruction Code,
ou código de instruções de
uso geral para iniciantes, é
uma linguagem de
programação criada por
John George Kemeny e
Thomas Eugene em 1964
para aprendizado dos
sistemas computacionais.
Veja mais em
http://www.vintage-
basic.net/.
Figura 1.14 – O Apple IIe
 Figura 1.15 – A primeira versão do MacOS

Com isso nós temos um breve histórico da evolução dos computadores e da forma de
interação homem computador até chegarmos aos tempos de hoje. É possível perceber
que sempre houve preocupação para tornar a experiência de interação mais agradável,
principalmente quando houve a evolução da criação de sistemas operacionais com
interface gráfica.

1.4 Interfaces e o projeto de interação

A comunicação entre usuário e computador deve permitir o diálogo e ela pode ocorrer
de duas formas distintas: interface física ou interface virtual.

É feita por meio de hardware e por meio físico,

empregando materiais como cabos, fios, placas,
INTERFACE FÍSICA
ou dispositivos como mouses, teclado joystic,
scanners, caixas de som etc.
É feita por softwares meio cognitivo que faz uso
de aspectos léxicos (funcionais), sintáticos
(estruturais) e semânticos (conteúdo). Um
aspecto importante das interfaces virtuais ou
lógicas é o uso de metáforas e modelos mentais,
que podem ser vistas nos principais sistemas
operacionais utilizados atualmente. Elas são
analogias a elementos naturais de forma a
representar as abstrações contidas nos sistemas
computacionais. A partir do momento em que
começaram a ser utilizados sistemas
operacionais com interfaces gráficas, foram
INTERFACE VIRTUAL OU feitos usos de metáforas, por um exemplo o
LÓGICA desktop ou área de trabalho é uma analogia a
uma mesa onde são organizadas todas as tarefas,
outra analogia são as pastas, que representam
onde são guardados os documentos, também
podemos notar a lixeira, onde são descartados os
documentos e arquivos que não serão mais
utilizados. Todos esses são esforços para deixar
a experiência de uso o mais natural possível ao
usuário.
 Figura 1.16 – Exemplo de uma área de trabalho, bem lotada e não organizada.

A combinação de interfaces física e gráfica ou lógica em celulares exige um projeto de

interação que leve em conta uma relação compreensível entre o aplicativo do aparelho e
seus botões e teclado. Em avaliações feitas por alunos da disciplina de TASI utilizando
princípios de projeto, metas de usabilidade, heurísticas, entre outros conceitos, foi
possível verificar que o parelho Nokia é um dos mais simples de operar, enquanto o
Motorola está entre os mais complicados.
Mas, na verdade, quando falamos de interação de humanos e computadores, falamos de
congruência de interfaces, que nada mais é do que a combinação de interfaces físicas e
interfaces virtuais. Nesse sentido, é preciso entender que a combinação entre ambos os
elementos precisa ser efetiva, clara e consistente, para que, por meio de dispositivos
físicos, a interface gráfica reaja apresentando repostas aos estímulos de acordo com as
expectativas dos usuários.
Agora me diga, quem não fica louco de raiva quando o mouse para de funcionar?
Entretanto, alguns novos dispositivos já vêm eliminando alguns elementos de interação
física, como é o caso de dispositivos touchscreen.
 ATENÇÃO
Tanto interfaces físicas
como virtuais devem levar
em consideração as
capacidades físicas e
culturais dos seres
humanos, e aqui um ponto
de extrema importância e
a acessibilidade desses
sistemas, aos mais
diferentes tipos de
usuários que irão utilizar o
sistema.

Sendo assim, independentemente de qualquer tipo de sistema que seja projetado, é

preciso considerar os seguintes aspectos:
 Atender o tipo de atividade esperada pelo usuário;
 Estudar a interface mais apropriada para entrada e saída de dados, que seja
apropriada às características do usuário.
 Oferecer funcionalidades complementares como forma de flexibilizar o processo
de interação.
Para o desenvolvimento de uma boa interface o que costuma ser chamado de uma
interface amigável, deve-se levar em consideração:

 Perfil do usuário (Para quem?)

 Dispositivos de interação (Como?)
 Tarefas (O que?/Quando?)

Mas o que seria uma interface ideal? Amigável?

É o conceito de que a interface de um sistema deve produzir uma experiência prazerosa,
de fácil manuseio e aprendizado. Deve-se tentar agregar ao máximo características com
as quais o usuário já esteja acostumado.
Outro ponto a ser evitado são interfaces carregadas com muita informação. Ao contrário
do que se possa imaginar, ao disponibilizar muita informação, a interface pode ficar tão
confusa que o usuário não consiga encontrar o que ele está procurando.
O sistema deve ter componentes que incentivem o aprendizado autônomo, ou seja,
interfaces amigáveis devem ser invisíveis, de forma que o usuário somente se preocupe
com a tarefa a ser realizada. Ela não pode tomar mais atenção do usuário do que a
própria tarefa e deve ser fácil de usar, aprender e memorizar.

1.4.1 Futuro da IHC

É claro que nós ainda não alcançamos os níveis propostos pela ficção científica, mas
podemos dizer que estamos caminhando, mesmo que lentamente para um novo
paradigma na construção de softwares que trabalham segundo uma nova e diferente
perspectiva de interface, uma evolução substancial já foi experimentada com a
popularização de dispositivos touchscreen, como celulares e tablets, tecnologia que
também já atingiu os computadores. Essa mudança de paradigma mudou drasticamente
os tipos de interação, alterando também os níveis de abstração e os tipos de metáforas
utilizadas nos softwares e aplicativos desenvolvidos.
Os movimentos realizados em dispositivos touchscreen (movimentos de pinça) são mais
naturais do que os realizados em desktops com o uso de mouses. Também podemos
citar o kinect desenvolvido pela Microsoft que, com certeza, entrega uma experiência
completamente nova, se levarmos em consideração o que foi produzido até hoje.
Uma tecnologia que não se popularizou ainda, e é uma quebra de paradigma, é o recém-
desenvolvido Google Glass, que permite uma experiência completamente diferente do
que estamos acostumados.
 Figura 1.17 – O Google Glass.
Ou seja, essa área ou ciência de interação humano computador ou humano máquina é
bastante dinâmica e com certeza muitos paradigmas ainda serão quebrados, mas os
profissionais devem estar preparados para as novas tendências do mercado e, mais do
que isso, devem estar preparados para inovar e ditar as novas tendências do mercado. É
uma área que exige criatividade, e recompensa muito bem por essa criatividade. Você
pode conquistar o mundo, é só ter uma boa ideia. Alguém se habilita?
 ATIVIDADES
01. Faça uma pesquisa na
internet e procure o termo LEITURA
“tecnologia vestível”. O Sugerimos os seguintes
que é isso? sites como recomendação
02. O que é engenharia de e forma de aprimorar o
usabilidade? que foi visto neste
03. O REFLEXÃO
que fala a norma capítulo:
técnica
A área deISO/IEC 9126
interface e dea O JQuery é uma biblioteca
respeito de usabilidade?
usabilidade realmente que proporcionou grandes
04. Porserque
precisa a área
levada de
a sério, avanços na área de
interface
e que bom que humano
as interatividade na internet.
computador
empresas e a éacademiatão Acesse o site do JQuery
importante?
estão se preocupando com para ver o que é possível
05.
isso.Faça umaé pesquisa
Porém, uma áreae ser feito:
explique como o oJQuery
multidisciplinar pessoale https://jquery.com/
outras
da área de TIbibliotecas
tem de Apesar de ser um pouco
colaboram
entender para sem
que, as antigo, o artigo a seguir
interfaces atualmente. com
profissionais mostra um estudo de caso
06. Faça outra
formação em pesquisa
design nae envolvendo usabilidade:
internet
comunicação,e umdescreva
novo http://www.scielo.br/sciel
resumidamente o que
sistema operacional, um o.php?pid=S1415-
melhorou
site, ou nas interfaces
qualquer do
outra 65552003000200007&scri
Microsoft Windows,entre
forma de interação desde
o pt=sci_arttext
sua primeira eversão
computador até a
o homem, Ainda vamos falar muito
versão 10. adequadamente
não serão do W3C, o World Wide
desenvolvidos. E vice- Web Consortium. O W3C
versa: o pessoal de design contém os padrões que são
precisa da turma da TI usados na web para o
para poder colocar em desenvolvimento de sites e
prática as ideias e aplicações. Este site deve
conceitos que eles estão ser visitado e estudado por
desenvolvendo. Pensando todos aqueles que
assim, grandes sites e desenvolvem para a
sistemas operacionais internet:
foram desenvolvidos e http://www.w3.org/standar
fazem sucesso até hoje. ds/
Conhecimento

Toda vez que alguém precisa usar um programa novo, é aquela mesma história: Como
faço isso? Como altero aquilo? Por que fazer um programa tão difícil?
Será que ninguém pensa que o usuário não tem tempo para aprender a usar os
programas? Ele tem que simplesmente executar uma tarefa sem precisar perder horas
lendo manual.
A maioria dos softwares específicos – aqueles que não atingem o grande público e que
não são fabricados pelas gigantes do mercado – não é construída tendo uma grande
preocupação com usabilidade. Para tal, é demandada uma intensa participação dos
usuários, no processo de definição da interface, na realização de diversos testes e
avaliações. Estes passos, além de aumentarem o prazo de construção do software,
aumentam também o seu custo. Mas será que não existe um conjunto de regras e
critérios para a construção de um programa ergonômico?

2.1 Princípios Ergonômicos para IHC

Este termo se originou a partir do grego ergon, que significa “trabalho”, e nomos, que
quer dizer “leis ou normas”.
O principal objetivo da ergonomia é desenvolver e aplicar técnicas de adaptação de
elementos do ambiente de trabalho ao ser humano, com o objetivo de gerar o bem-estar
do trabalhador e consequentemente aumentar a sua produtividade.
De acordo com o conceito de ergonomia visto na unidade 1, em que se mostrou que os
produtos são planejados para atender às necessidades físicas, psicomotoras e cognitivas
do ser humano, pode-se observar também a necessidade de construção de softwares
ergonômicos que facilitem a vida das pessoas.
A ergonomia em IHC tem como objetivo não só facilitar a vida do usuário, mas também
adaptar os softwares e a forma de interação às capacidades dos usuários, dando conforto
e satisfação. Hoje em dia é quase impossível uma empresa se estabelecer no mercado
sem se preocupar com esses temas. Assim, a importância dessas características sobre
como as mais diversas ferramentas serão usadas é clara. Portanto, foram desenvolvidas
diversas técnicas utilizando-se as teorias existentes para desenvolver parâmetros para
gerar softwares ergonômicos.
2.2 Critérios Ergonômicos

Os critérios ergonômicos são parâmetros a serem seguidos que podem tornar a

experiência de uso mais agradável e eficiente. Em 1993, Dominique Scapin e Christian
Bastien propuseram um conjunto de critérios que tem como objetivo minimizar
problemas na interação do usuários com o software baseados em dados de aplicação
musical.
Dois grupos de especialistas avaliaram a interface de uma base de dados de aplicação
musical. Após a exploração da interface, as ações e os comentários dos avaliadores
foram registrados junto ao estado corrente da aplicação.
Posteriormente, uma segunda avaliação foi realizada. Em um grupo a avaliação foi
realizada em uma interface utilizando critérios ergonômicos, e o outro grupo fez a
avaliação sem critérios ergonômicos. Os resultados preliminares mostram que na
primeira fase, ambos os grupos apresentaram problemas de usabilidade realizando
avaliações semelhantes. Já na segunda fase a utilização de critérios ergonômicos fez
com que os avaliadores encontrassem um número maior de problemas do que o grupo
que avaliou a interface sem levar os critérios ergonômicos em consideração. Sendo
assim, ficou clara a utilidade dos critérios ergonômicos na identificação de falhas no
projeto. A utilização desses critérios leva ao aumento da integridade do sistema e à
diminuição do número de especialistas necessários para identificar possíveis falhas. São
no total oito critérios que serão descritos a seguir:

2.2.1 Condução

A condução tem como objetivo auxiliar usuários novatos a utilizar o sistema. A

interface deve conduzir o usuário na realização das mais diversas tarefas, no sentido de
aconselhar e informar o usuário na interação com o sistema. Quando o usuário é bem
conduzido, pode ser observada uma diminuição significativa no número de erros
cometidos, uma vez que o aprendizado é facilitado.
Presteza: Permite que o usuário identifique em qual estado de interação ele se encontra,
ferramentas de ajuda e o seu modo de acesso. Uma boa presteza facilita a navegação no
software, diminuindo o erro, como por exemplo:
  Dirigir a entrada de dados indicando o formato adequado e os valores aceitáveis.
 Exibir as unidades de medidas dos dados a digitar.
 Indicar todas as informações sobre estado.
 Para cada campo de dados, fornecer um rótulo.
 Indicar o tamanho do campo quando ele é limitado.
 Quando necessário, fornecer no rótulo informações suplementares.
 Dar um título a cada janela.
 Fornecer ajuda on-line e orientação.

2.2.1.1.Agrupamentos e distinção entre os itens:

Este item diz respeito à distribuição espacial dos itens na tela. Com isso é possível que o
usuário faça uma rápida compreensão da tela, para identificar os itens de seu interesse.
O critério de distribuição e distinção dos itens se divide em dois:

Permite ao usuário identificar semelhanças ou

diferenças nos itens segundo o padrão de
organização espacial deles na tela, por exemplo:
AGRUPAMENTO E itens com conteúdos parecidos estão mais
DISTINÇÃO POR próximos.
LOCALIZAÇÃO  Organizar os itens em listas hierárquicas.
 Organizar as opções de um diálogo por
menus, em função dos objetos aos quais elas
se aplicam.
Permite ao usuário identificar semelhanças ou
diferenças entre diferentes classes de itens de
acordo com características gráficas.
Clareza: Refere-se as características que podem
auxiliar ou atrapalhar na leitura das informações
textuais. Recomenda-se levar em consideração
AGRUPAMENTO E características cognitivas e perceptivas dos
DISTINÇÃO POR FORMATO usuários.
Feedback imediato: refere-se às respostas do
computador referentes às ações dos usuários. O
computador deve responder a todas as ações dos
usuários o mais rapidamente possível. Para os
usuários, ausência ou demora no feedback
podem ser consideradas como falhas no sistema.
2.2.2 A carga de trabalho

Este critério se preocupa em fazer com que o usuário diminua a carga cognitiva e
perceptiva, sendo subdividido em brevidade e densidade informacional.

BREVIDADE CONCISÃO AÇÕES MÍNIMAS

Este critério leva em
consideração o respeito que
se deve ter com as
capacidades cognitivas,
perceptivas e motoras dos
usuários.
Diminui a carga de trabalho, Tenta facilitar ao máximo a
cognitiva e perceptiva com carga de trabalho do usuário,
relação às entradas e saídas simplificando e
do software. minimizando as ações
Apresenta títulos, rótulos, necessárias para que uma
denominações curtas. tarefa seja realizada.
Fornece o preenchimento Presença de atalhos, com
automático de vírgulas, imagens representativas.
pontos decimais e zeros à
direita da vírgula nos
campos de dados.

2.2.3 O controle explícito

Este critério se refere tanto ao controle que o usuário tem sobre a interface do sistema
quanto ao processamento e respostas dados pelo sistema ao usuário.

AÇÕES EXPLÍCITAS CONTROLE DO USUÁRIO

Se refere ao processamento e resposta
dados pelo sistema a uma ação
executada pelo usuário por intermédio
da interface. Deve ficar explicito que o
sistema só irá executar estritamente o
que foi solicitado pelo usuário.
O usuário deve estar no controle, e o sistema
deve retornar estritamente o que lhe foi
solicitado, entretanto é interessante que o
sistema se antecipe e o ofereça opções que
lhe auxiliem a executar determinadas ações,
mas sempre deixando o usuário no controle
da situação.

2.2.4 Adaptabilidade

Não é possível uma interface atender às necessidades de todos os seus usuários. Sendo
assim, ela deve ser capaz de se adaptar segundo as preferências dos usuários.

FLEXIBILIDADE EXPERIÊNCIA DO USUÁRIO

Permite que uma tarefa possa ser O sistema deve prever que existem usuários
realizada de diversas formas, dando ao de diferentes níveis (iniciantes e
 usuário a possibilidade de escolher a especialistas) e que esses usuários têm
estratégia com a qual mais se necessidades diferentes. Muitos diálogos são
familiarize. entediantes e maçantes para usuários
experientes, ao passo que a falta deles torna
a experiência de uso inviável para usuários
iniciantes.

2.2.5 A gestão de erros

Este critério se refere a todos os mecanismos disponíveis no sistema capazes de reduzir

a ocorrência de erros, e, caso eles ocorram, que a sua correção seja facilitada.

PROTEÇÃO CONTRA QUALIDADE DAS CORREÇÃO DE

OS ERROS MENSAGENS
Refere-se aos Refere-se à qualidade, clareza e
mecanismos disponíveis legibilidade da mensagem de erro
para detectar e prevenir apresentada ao usuário, qual foi o
os erros de entrada de erro e o que deveria ter sido feito
dados. para que esse erro não ocorresse ou
o que deve ser feito para corrigir o
erro?
ERROS
Quais são os recursos
disponíveis para que o
usuário possa corrigir
eventuais erros?

2.2.6 A homogeneidade/Consistência (coerência)

Neste critério, o objeto das interfaces são idênticos para contextos idênticos, e diferentes
para contextos diferentes.
 Localização similar dos títulos das janelas.
 Formatos de telas semelhantes.
 Procedimentos similares de acesso às opções dos menus.
 Na condução, sempre utilizar as mesmas pontuações e as mesmas construções de
frases.
 Apresentar na mesma posição os convites (prompts) para as entradas de dados
ou de comandos.
Os formatos dos campos de entrada de dados devem ser sempre os mesmos.

2.2.7 O significado dos códigos e denominações

A significância dos códigos se refere à adequação expressão/objeto dos códigos
empregados na interface com o usuário.
Adequar o vocabulário de rótulos, títulos, cabeçalhos, mensagens, opções de menu, bem
como, definir figuras significativas para os ícones e abreviaturas significativas.

2.2.8 A compatibilidade

A organização das saídas e entradas de uma dada aplicação deve estar de acordo com as
características dos usuários (memória, percepção, hábitos, competências, idade,
expectativas, etc.) e da tarefa. Um método de avaliação com base em critérios constitui
uma abordagem analítica. Como tal, os critérios não se destinam a substituir outros
métodos de avaliação (por exemplo, "baseada em modelo" métodos, questionário,
entrevista, etc).

ATENÇÃO
A abordagem de utilização
de critérios é um meio de PROJEÇÕES FUTURAS
 Estender o conteúdo de cada critério, aumentando os níveis de detalhamento, incluindo
garantir a conformidade
um conjunto completo de "regras" específicas para cada um dos critérios.

comDefinir
as um conjunto de
diretrizes de prioridades para a avaliação para cada critério. Por exemplo:
Para usuários inexperientes, a orientação deve ser priorizada em relação à flexibilidade
design de software. Assim,
ou ao desempenho. O foco no desempenho deve ser adicionado aos poucos, de acordo
podecomsera experiência
usada antesdodousuário.
 Definir os pré-requisitos para a avaliação, ou seja, definir quais são todas as
teste do usuário para
características necessárias aos usuários para aplicação de cada critério.
 Definir formas
descobrir e de avaliar sistematicamente os elementos e estados da interface (telas,
corrigir
janelas, sequências de tarefas, etc.).
eventuais falhas no projeto
 Utilização de ferramentas de apoio para um completo sistema de avaliação (help).
inicial. Entretanto, os
critérios devem ser vistos 2.3 Recomendações Ergonômicas para IHC
como um suplemento a
outros métodos de As recomendações ergonômicas representam a fonte de
avaliação, e são usadas conhecimentos mais utilizada pelos ergonomistas em
somente abordagens suas intervenções.
analíticas sem em nenhum A maior parte dos padrões para IHC têm orientações e
momento contar com recomendações ergonômicas que vêm sendo
métodos de avaliação desenvolvidas pelos órgãos de normalização,
baseados em
questionários, entrevistas e
etc.
Organização Internacional de Normalização (ISO – International Standardization
Organization) e Comissão Eletrotécnica Internacional (IEC - International
Electrotechnical Comission), ao longo dos últimos 20 anos.
Esses padrões são desenvolvidos por grupos de peritos ao longo de vários anos. Nas
fases iniciais, os documentos podem mudar significativamente de uma versão para
outra, até que um consenso seja atingido. A partir do momento em que o padrão se torna
mais ”maduro”, uma votação formal ocorre através da participação de membros de
órgãos de normalização.
Uma das funções das normas é impor consistência. Houve uma tentativa de fazer isso
por meio das normas ISO / IEC para componentes de interface, tais como: ícones,
scripts, controle de cursor, etc. No entanto, para essas áreas os padrões definidos pela
indústria foram mais influentes do que as normas ISO.
Sendo assim, elas não foram amplamente adotadas. As normas podem ser:
 Oficiais, concebidas por organismos de padronização.
 Guias de estilo, concebidos por grandes companhias.
As normas tiveram maior impacto a partir da norma ISO 9241 e ficaram mais centradas
ATENÇÃO
em atividades necessárias para produzir produtos utilizáveis a partir da norma
Um ponto fraco da
ergonômica ISO 13407.
maioria dos padrões
Estes princípios foram refinados e ampliados em um modelo de boas práticas de
estabelecidos para IHC é
usabilidade que pode ser utilizados para avaliar a capacidade de uma organização em
que eles são discutidos e
desenvolver um design centrado no usuário com a norma ISO TR 18529. A norma ISO
desenvolvidos com base
PAS 18152 estende esses conceitos para a avaliação da maturidade de uma organização
em teorias, e não em
na execução dos processos que fazem um sistema utilizável, saudável e seguro.
processos práticos, ou
As normas relativas à usabilidade abordam principalmente temas como:
seja, as normas não são
1. Eficácia, eficiência e satisfação na utilização do produto.
desenvolvidas om base na
2. Interação do usuário com a interface.
resposta dos utilizadores
3. O processo utilizado no desenvolvimento do produto.
ao interagirem com os
4. Design centrado no usuário.
sistemas testando
protótipos durante o
desenvolvimento.
2.3.1 Objetos de interação
Outra limitação das
normas internacionais é
Há algum tempo, na história dos computadores, a
que o processo de
interação com os usuários era extremamente difícil.
desenvolvimento é lento, e
o conteúdo depende do
esforço voluntário de
especialistas apropriados.
Somente especialistas eram capazes de interagir com o computador, enviando-lhe
comandos e recebendo respostas. Não vamos aqui traçar uma nova linha do tempo
descrevendo novamente a história dos computadores, mas acho que todos já tiveram a
oportunidade de ver o que era a famosa linha de comando.

Figura 2.1 – O prompt do DOS no MS Windows

Antigamente toda a interação era assim, escreviam-se comandos específicos, que por
vezes mais pareciam códigos, e esperavam-se as repostas na tela em formato texto.
Contudo, desde o Apple 2, esse conceito foi modificado com o intermédio da interface
gráfica, onde são geradas imagens para interagir com os usuários, que podem ser
manipulados (aumentados, diminuídos, movimentadas), sendo organizados por uma
estrutura de janelas, menus, barra de ferramentas etc., utilizando metáforas do mundo
real e linguagem natural para tornar a interação dos usuários com o computador mais
fluida e intuitiva.
 Figura 2.2 – Pasta sendo usada como metáfora do mundo real

Com a evolução da informática foram estabelecidos alguns elementos e objetos de

interação entre usuário e computador que serão explorados a seguir.

2.3.1.1 Painéis de controle

Janelas

As janelas devem ter um layout padronizado para toda aplicação, geralmente tem um
título, em sua parte superior, centralizado ou à esquerda, tendo os principais comandos à
vista do usuário. Quando for possível abrir várias janelas simultaneamente, a janela
ativa deverá estar destacada.
 Figura 2.3 – Figura 3: Uma janela simples.

Caixas de diálogo

As caixas de diálogo apoiam operações específicas, não contendo menus ou barras de

tarefas. E, assim como nas janelas, os títulos devem ser centralizados ou deslocados
para a esquerda, tendo botões que executem a ação referida rapidamente, além do
fechamento rápido da caixa de diálogo.

 Caixas de diálogo modal: impedem o usuário de realizar qualquer outro tipo de

ação nos sistema, exigindo dele atenção exclusiva.
 Figura 2.4 – Figura 4: Caixa de diálogo

 Caixas de diálogo não modal: Não exige atenção exclusiva do usuário,

permitindo que ele realize outras ações, enquanto a caixa de diálogo fica em
segundo plano.

Figura 2.5 – Figura 5: Caixa de diálogo.

Formulários

Este tipo de caixa de diálogo está destinado especificamente à entrada de dados. O

layout deve ser autoexplicativo, agrupando de forma lógica e intuitiva os diferentes
tipos de dados. As ações de entrada devem iniciar-se pelo preenchimento do primeiro
campo, no alto, à esquerda, que deverá estar com o foco das ações quando da
apresentação dele.

 Campos de preenchimento obrigatório: devem ser diferenciados visualmente

e, se possível, os campos que contenham dados críticos para o sistema devem ser
identificados e protegidos contra acidentes de operação. Mensagem que advirta
 sobre os efeitos da ação e solicite a confirmação do usuário, deve ser
apresentada sempre que o campo for modificado.

Figura 2.6 – Um formulário para ambiente desktop.

Figura 2.7 – Um formulário para web

Caixas de Mensagens

São utilizadas para informar o usuário sobre:

  O que fazer nas interações;
 Em que estado se encontra o sistema;
 A resposta do sistema a uma ação sua;
 Uma situação perigosa, de erro ou de anormalidade;
 Como recuperar a normalidade de um sistema.

Normalmente, essas mensagens são do tipo modal, ou seja, o usuário precisa tomar
conhecimento clicando em algum botão (Ok, por exemplo), para continuar usando o
sistema.
Quando a mensagem se destina a solicitar a confirmação de uma ação destrutiva, a
opção default deve recair sobre a anulação, e não sobre a confirmação da ação.
Caixas de mensagens envolvendo ações perigosas (formatar disco rígido) devem
ser destacadas pelo uso de cor vermelha, pelo efeito de intermitência (pisca) ou
ainda por um som.

Figura 2.8 – Caixa de mensagem

2.3.1.2 Controles complexos

São objetos com estrutura complexa de navegação interna, que permitem a seleção de
outros controles e comandos.

 Painel de menu - São menus dispostos verticalmente, uns abaixo dos outros.
 Figura 2.9 – Menu do Windows 10.

 Barra de menu - Contém as opções do menu principal e leva às opções

secundárias relacionadas ao menu selecionado.

Figura 2.10 – Barra de menu.

Barra de ferramentas - Menu sem submenus, com opções em forma de ícones

associadas a comandos ou ferramentas.
 Figura 2.11 – Barra de ferramentas.

 Lista de seleção - É uma lista de valores possíveis predefinidos pelos

desenvolvedores, deve ter de 5 a 9 itens de visualização imediata.

Figura 2.12 – Lista de seleção

 Caixa de combinação (ou Combo Box) - Deve ser ordenada seguindo ordem
alfabética numérica ou por ordem de uso.
 Figura 2.13 – Uma caixa de combinação

2.3.2 Atributos de objetos de interação

Os atributos de interação representam símbolos e sinais arbitrários com representação

concreta, ou seja, são os modificadores dos objetos de interação. Podemos exemplificar:
 Ícones
 Denominações
 Abreviaturas
 Cores
 Fontes
 Textura
 Vídeo Reverso
 Intermitência Visual (pisca-pisca)
 REFLEXÃO
Construir um programa
voltado para usabilidade
levando em consideração
ATIVIDADES
critérios ergonômicos não
01. Os critérios de
é uma tarefa fácil. Existe a
software apresentados
necessidade de uma
servem para qualquer tipo
equipe multidisciplinar,
de plataforma digital?
altamente treinada, e a
Tablets, smartphones ...
paciência necessária para a
02. Sobre o critério de
interação e participação
controle do usuário. Dê
dos usuários nos processos
um exemplo de auxílio ao
de determinação das
usuário sem tirar o seu LEITURA
interfaces do sistema.
poder de decisão. As normas podem ser
Apesar de encarecer o
03. Qual a relação entre o adquiridas (compradas)
produto, a utilização de
critério "Agrupamentos e diretamente da ISO ou por
elementos ergonômicos no
distinção entre os itens” e meio de outras
software torna a
o conceito de ergonomia organizações. Para um
experiência de uso mais
cognitiva? maior e completo
agradável, colocando o
04. Qual a importância de entendimento sobre toda a
software alguns pontos
construir um software abrangência das normas, é
acima no mercado. Logo
seguindo as normas sobre recomendada vista ao site
essa será uma a exigência
IHC? Qual o benefício no www.iso.org/iso/en.
do mercado e softwares
resultado final? Leia mais sobre os tipos
que não forem construídos
05. Cite 3 exemplos de de objetos de interação.
segundo princípios
novas metáforas com o No tutorial da linguagem
ergonômicos cairão
mundo real que poderiam Java existem vários
naturalmente em desuso.
ser utilizadas como suportados pela
Em contrapartida, novas
objetos de interação com o linguagem:
ferramentas e plataformas
usuário. https://docs.oracle.com/jav
vêm cada vez mais
ase/tutorial/uiswing/comp
ganhando, com novas
onents/index.html
propostas e novas formas
Para a parte de web, veja
de interação. Mas será que
os principais componentes
os princípios ergonômicos
que podem ser usados na
para esses dispositivos
série de tutoriais da
devem ser diferentes, uma
W3Schools. Este link é
vez que a forma de
excelente:
interação é diferente? Essa
http://www.w3schools.co
é uma área em grande
m/html/html_forms.asp
Desenvolvimento

Neste capítulo, vamos estudar a parte de desenvolvimento de interfaces homem-

computador, ou IHC, também conhecida por interface homem-máquina ou IHM.
Esta área é muito abrangente e tem vários desdobramentos, mas, neste capítulo vamos
estudar alguns assuntos que compõem, de maneira geral, a parte de desenvolvimento de
IHC e em especial as técnicas de concepção e de modelagem de interfaces.
A interface de um software é algo bastante determinante para o seu sucesso.
É muito difícil encontrar um software de sucesso cuja interface não esteja de acordo
com sua proposta ou agrade.
Até mesmo em jogos eletrônicos: existem alguns sucessos recentes que, mesmo não
tendo gráficos realísticos e sofisticados, tiveram uma grande aceitação pelo mercado, e a
interface tem grande parcela de responsabilidade nisso. Como exemplo, veja o jogo
“FlappyBird”, disponível originalmente para o iphone. Feito em 2013, ele se destacou
principalmente pela sua jogabilidade e dificuldade. Outros jogos mais “pesados” se
destacam pelos efeitos realísticos de última geração, os quais são verdadeiras produções
de Hollywood (literalmente, uma vez que alguns estúdios de jogos são em Los
Angeles). Enfim, a interface é um fator que determina o sucesso final de um software.

3.1 Introdução ao projeto de IHC

Em primeiro lugar, precisamos definir o que é projeto, ou design, de IHC. Segundo

BARBOSA e SANTANA (2010), podemos dividir o design de IHC em duas partes:
1. Design:
• O Design parte de uma concepção intelectual da experiência do usuário.
Cada usuário tem suas experiências e visões a respeito da forma como
gostaria que um determinado software fosse.
• A partir daí, o design passa a ser uma concretização desta concepção em uma
representação que pode ser implementada.
2. A segunda é a parte “de IHC”:
• Neste caso, estamos falando da experiência do usuário, ou seja, como ele vai
interagir com o computador, e isto tem a ver com o projeto do software, porém não é
sinônimo de projeto de software.
Experiência do usuário
ou também chamada de De acordo com o trabalho de ROGERS, SHARP e

User eXperience (UX), PREECE (2013), o processo de projeto de IHC possui

compreende vários fatores quatro atividades básicas como:

sobre o que o usuário 1. Identificação das necessidades e

sente em relação ao uso de estabelecimento dos requisitos. Nesta atividade,

um determinado produto, as necessidades dos usuários são levantadas e

sistema ou serviço. A ISO listadas a fim de serem analisadas para poder ser

9421-210 define que a contempladas futuramente na interface. Desta

experiência do usuário são forma, os requisitos são estabelecidos e

“as percepções e reações documentados.

de uma pessoa que resulta 2. Desenvolver designs alternativos. Nesta

do uso ou utilização atividade, a exploração de vários aspectos com

prevista de um produto, relação ao visual e usabilidade do software

sistema ou serviço”. Na podem ser investigados. Novos cenários de

prática, a experiência interação podem ser criados a fim de avaliá-los

envolve todo o acúmulo e perceber o quanto contribuem com a

de preferências, respostas, experiência do usuário.

sensações e 3. Construir versões interativas dos designs.

comportamentos que o Atualmente existem vários softwares que

usuário possui e adquire ajudam nesta tarefa. Ter uma representação

com o uso de um software. “usável” do software é muito importante,

porque também é uma forma de esclarecer os
requisitos para a interface.
Entre os softwares mais usados para este tipo de versão estão os softwares do
tipo wireframe, entre eles:
Figura 3.1 – BalsamiqMockup.

Figura 3.2 – Axure.

 Figura 3.3 – Microsoft Visio.

Alguns destes softwares têm versões para estudante e, embora sejam pagos
quando usados em empresas, são gratuitos para estudantes.
4. Avaliar o design. Uma vez que designs alternativos foram testados e modelados
em uma ferramenta de simulação como as apresentadas, as alternativas de design
são avaliadas e classificadas por meio de critérios incluindo o número de erros
que os usuários cometem ao usar a alternativa avaliada. Além disso, outros
critérios como aparência, quantidade de requisitos satisfeitos e outros também
são usados.

Mesmo com estas atividades mostradas, qualquer processo de design de IHC tem
algumas características essenciais que devem ser prezadas durante todo o processo:
1. O foco deve ser mantido sempre no usuário;
2. A experiência que se deseja que o usuário tenha deve ser clara e com os
objetivos bem definidos;
3. Deixar o processo iterativo.

3.2 Um modelo de ciclo de vida simples para o projeto de IHC

Para deixar o processo iterativo, como vimos no final da seção anterior, ROGERS,
SHARP e PREECE (2013) elaboraram um modelo de ciclo de vida para representar o
modo como as atividades estão relacionadas.
O uso de ciclos de vida é uma atividade bem característica da engenharia de software,
como o modelo em cascata, o modelo espiral e as aplicações de desenvolvimento
rápido. A área de IHC, também usa os modelos de ciclo de vida para a área de projeto
de IHC como o modelo Estrela e o modelo da ISO 13407.

Figura 3.4 – Modelo simples de ciclo de vida de design de interação. Fonte: ROGERS,
SHARP, PREECE, 2013.

A figura 3.4 mostra um modelo simples de ciclo de vida de projeto de IHC. Existem
vários modelos, e cada um tem a sua complexidade. Podem ser usados em projetos de
diferentes. Em projetos nos quais a equipe é pequena, mas experiente, um modelo
simples como o da figura pode ser usado. E é claro que, em projetos maiores,
envolvendo vários desenvolvedores e muitos usuários, o ciclo de vida deve ser
adequado (veja o box).

CONCEITO
O modelo apresentado na Figura 4 apresenta as quatro
De acordo com ROGERS,
atividades do projeto e os três princípios de projeto
SHARP e PREECE
centrado no usuário. Como já foi comentado,
(2013), existem 4
dependendo do projeto, este modelo pode não ser usado
abordagens para o projeto
em todos os aspectos e podem ser adicionados novos
de IHC:
detalhes para adequar o modelo a algum projeto real.
• Design centrado no
Para poder tratar o ciclo de vida de maneira mais
usuário: o usuário é
adequada, precisamos responder a algumas perguntas:
quem sabe o que é
melhor e é o único
guia do projetista. O
projetista implementa
aquilo que o usuário
 • Quem são os usuários?
• Quais são as necessidades?
• Como criar designs alternativos?
• Como escolher uma alternativa entre as demais?
• Como integrar as atividades de projeto com outros modelos de ciclo de vida?

3.3 Sobre os usuários

Você deve ter percebido que tratamos várias vezes, neste texto, do sobre o quanto o
usuário é importante em todo o processo da engenharia de usabilidade. E não é para
menos, ele é o principal elemento que vai absorver todos os conceitos que temos tratado
aqui.
Mas, quem são os usuários? (Parece ser uma pergunta estranha, mas, antes de continuar
lendo, tente responder à pergunta).
Existem duas principais categorias de usuários:
• Os usuários são as pessoas que usam o sistema. Essa é a resposta mais natural
para a pergunta que foi feita.
• Mas também podem ser qualquer pessoa que tem algum tipo de relação com
quem usa o sistema (superiores, subordinados, terceiros, etc). Esta é a outra parte
da resposta à pergunta. Nem sempre identificamos aqueles que dependem dos
usuários principais como sendo usuários também.
Existem também os usuários primários, secundários e terciários, os quais devem ser
levados em consideração:

USUÁRIOS USUÁRIOS USUÁRIOS

PRIMÁRIOS SECUNDÁRIOS TERCIÁRIOS
São aqueles que usam o São aqueles que usam o São aqueles afetados pela
software com frequência. software esporadicamente introdução do sistema ou os
ou que tem intermediários. gerentes que determinam a sua
introdução. Também chamados de
stakeholders.

De qualquer forma, todos os tipos de usuários têm necessidades que devem ser
contempladas pelo projeto da IHC. A principal pergunta que é feita é “Do que você
precisa”? Esta pergunta é respondida pelo próprio usuário e/ou por pessoas envolvidas
no atendimento destas necessidades.
Alan Curtis Klay, um dos fundadores da linguagem Smalltalk e um dos criadores do
conceito de orientação a objetos, disse uma vez que “a interface é o programa”. Klay
também é conhecido por conceber a arquitetura das atuais GUI (Graphics User Interface
– Interfaces gráficas de usuário).
O projeto de uma IHC não é um trabalho de uma equipe formada de pessoas da área de
TI exclusivamente. É uma atividade multidisciplinar, que envolve informática,
ergonomia, psicologia, linguística, design visual, entre outras. E tradicionalmente não
faz parte da formação de profissionais da área de informática.

3.4 Técnicas de concepção

Neste tópico vamos apresentar algumas técnicas usadas para a implementação de
especificações para a interface e usabilidade. Concepção significa “geração” e este
tópico vai tratar de algumas técnicas apontadas na literatura a respeito de como gerar
um projeto de interface homem máquina que seja eficiente e adequado.
Dentre as técnicas que vamos apresentar estão:
• Brainstorming
• Cardsorting
• Diagrama de afinidade
• Storyboard
• Maquetes
• Prototipagem rápida
• Protótipos de baixa fidelidade
• Protótipos de alta fidelidade

3.4.1 Brainstorming

Esta técnica tem um nome que deriva de duas palavras da língua inglesa: “Brain”, que
significa cérebro, e “Storm” que significa tempestade. Logo, “brainstorming” é uma
palavra que pode ser traduzida como tempestade cerebral, ou melhor, tempestade de
ideias. Na língua “caipirês”, brainstorming pode ser traduzido como “toró de parpites”.
Ela foi concebida em 1938 por Alex Osborn, que era presidente de uma agência de
propaganda. É uma técnica usada não apenas para a concepção de interfaces, mas para
qualquer área que exige que uma equipe exponha as suas ideias para que sejam
discutidas em grupo, incentivando a criatividade e a colaboração.
Brincadeiras à parte, o brainstorming é uma técnica muito interessante. Ela é feita em
grupo de no mínimo 2 (obviamente) pessoas e no máximo 12. O objetivo principal é
criar e discutir as ideias surgidas em grupo, de forma participativa e colaborativa.
Esta técnica reúne várias pessoas para resolver um determinado problema e também
para criar produtos ou, no nosso caso, interfaces e sistemas.

Em grupo é mais fácil a compreensão do problema, sua análise e resolução.

As discussões são abertas e deixadas livres para o grupo, porém deve existir um
intermediador para poder comandar e anotar os resultados.
Normalmente tem duas etapas principais:
• A geração das ideias;
• E a crítica das ideias.
Embora seja uma técnica bastante interessante, ela tem algumas desvantagens, entre
elas: por ser uma discussão aberta, quando uma crítica ocorre e não é bem aceita elo
grupo, outras pessoas podem ficar inibidas e deixar de dar uma ideia que seja relevante;
além disso, as ideias podem surgir de uma maneira confusa e impedir que exista um
detalhamento em cada uma, dificultando a avaliação.

3.4.2 CardSorting

O cardsorting ou classificação de cartas tem como objetivo descobrir o modelo mental

dos usuários em relação aos itens de informação para uma aplicação.
Ou seja, esta técnica tenta descobrir como o usuário classifica uma determinada
informação na sua mente.
Normalmente é usada com usuários inexperientes em design os quais são guiados a criar
uma árvore de categorias, chamada taxonomia. Esta técnica é muito útil para a
arquitetura de informação, fluxos de trabalho, estruturas de menu ou caminhos de
navegação em um site.
Basicamente é uma técnica que não depende de muita tecnologia. Consiste em escrever
as categorias em papel e espalhá-las em uma área para visualmente fazer a classificação.
 Figura 3.5 – CardSorting

Veja na figura 3.5 um exemplo dos cartões. Neste caso, são cartões autoadesivos,
espalhados na área de estudo. Normalmente um usuário é escolhido para fazer a
classificação em grupos.
Resumindo, a técnica funciona de acordo com o seguinte método:
1. Um usuário recebe um grupo de cartões previamente nomeados por um analista.
Neles está escrita a funcionalidade que se deseja da interface;
2. Esta pessoa classifica os termos em grupos lógicos (o que foi chamado de
taxonomia) e acha uma categoria para cada grupo;
3. O processo é repetido entre um conjunto de situações;
4. O resultado depois é analisado para que os padrões sejam identificados e
definidos.
Enquanto as sessões são realizadas, o analista pode conversar com o usuário sobre a
classificação que foi feita e registrá-la. Após as sessões, as escolhas feitas pelos usuários
que participaram das sessões são analisadas conjuntamente, e os termos comuns são
numerados com uma porcentagem de concordância. Quanto maior o número, maior é
sua indicação para ser usado.
No final do processo, o analista terá uma quantificação dos dados e tem condições de
criar um relatório resumindo e cruzando o que foi anotado e também terá a taxonomia
sugerida pela média dos usuários.

3.4.3 Diagrama de afinidade

O diagrama de afinidade foi criado em 1960 por Jiro Kawakita com a finalidade de
organizar um grande número de ideias de acordo com seus relacionamentos naturais.
Basicamente esta técnica é usada quando existe um grande número de ideias, opiniões
ou preocupações sobre um determinado assunto.
Normalmente é usada na fase de planejamento e, assim como as outras técnicas
apresentadas até agora, são usadas para a criação e organização das ideias sobre IHC.
A técnica possui o objetivo de estimular a criatividade e a participação total do grupo,
que deve ser de um tamanho limitado a no máximo 8 pessoas que trabalham juntas se
possível. Esta técnica é muito relacionada com o Brainstorming, pois pode ajudar com a
organização das ideias.
Existe um pequeno roteiro de construção do diagrama:
1. Após o brainstorm, gerar os dados para a construção do diagrama.
2. Espalhar os dados em uma área que seja visível a todos.
3. Agrupe os dados, contendo no máximo 5 com alguma característica em comum.
4. Nomeie o grupo de acordo com a característica comum de agrupamento e
coloque como um cartão título, diferenciando-o dos demais.
5. Cada grupo é preso ao seu cartão título correspondente. O cartão título deve
permanecer visível dos demais.
6. Repetir os passos 3, 4 e 5 usando os cartões título como cartões de dados
7. Repetir os passos 3, 4 e 5 para cada conjunto novo de cartões título que foram
criados até que se tenha apenas um grupo com 5 cartões título.
8. O diagrama será construído a partir dos pequenos grupos iniciais. Fazer um
retângulo envolvendo cada grupo.
9. No lado superior do retângulo, coloque o cartão título do grupo.
10. Faça outro retângulo sobre os retângulos cujo título forma um grupo.

Veja um exemplo de um diagrama de afinidades na figura 3.6.

 Figura 3.6 – Diagrama de afinidades.

3.4.4 Storyboard
Esta é uma técnica mais relacionada com a concepção do que as anteriores. Se você
percebeu com atenção, as técnicas anteriores são úteis para organizar e criar novas
ideias. A partir desta vamos ver técnicas relacionadas com a concepção
especificamente.
O storyboard é uma forma de representar as interações entre os usuários e o sistema em
seu ambiente de trabalho. O storyboard é muito usado em outras situações como por
exemplo na pré-visualização de um filme, de uma animação e outras semelhantes. Na
verdade o grande criador e difusor desta técnica foi ninguém menos que Walt Disney! É
claro que para ele a finalidade é outra, mas para nós, o storyboard é usado na melhoria
da documentação
CONEXÃO dos requisitos de IHC.
Para quem gosta de
música dos anos 1980, o
grupo musical A-Ha O storyboard é feito para detalhar um cenário do
lançou um videoclipe que sistema por meio de uma sequência de desenhos. Os
é baseado em um softwares indicados anteriormente podem ajudar nesta
storyboard. Assista ao situação.
vídeo em
https://www.youtube.com/
watch?v=dj-V11Xbc914
para relaxar um pouco dos
estudos!
Os desenhos também podem ser feitos em papel e colocados em uma área visível aos
outros membros das sessões de discussão. Por meio desta exposição, os desenhos
podem ser avaliados e discutidos entre os usuários e designers e devem estar baseados
em princípios de usabilidade.

Figura 3.7 – Exemplo de um storyboard para software

3.4.5 Maquetes – protótipos em papel

As maquetes também são usadas em várias áreas diferentes da área de informática e
IHC, entre elas a arquitetura e a engenharia. Você já deve ter visto na televisão que as
maquetes são úteis em filmes, como Star Wars, para a construção de situações de
batalhas no espaço.
As maquetes na IHC contribuem bastante para esclarecimento e desenvolvimento de
requisitos específicos para a interface do programa e, da mesma forma como ocorrem
nos filmes, elas servem para simular e testar as interações com o usuário.
Por ela servir como uma forma de simulação, a técnica permite a prévia identificação de
problemas com usabilidade.
A técnica também tem um ciclo de atividades, definido como:
1. Conceito: nesta atividade são elaborados os aspectos conceituais e as estruturas
gráficas das telas.
2. Iteração: nesta atividade as navegações entre as telas são organizadas.
3. Projeto das telas: é a atividade em que os vários tipos de componentes são
colocados nas telas.
4. Teste das telas: nesta etapa, com os componentes alocados aos seus lugares,
questões como combinação de cores e outros elementos gráficos são testados.
 Figura 3.8 – Exemplo de protótipo de uma tela em papel

3.4.6 Prototipagem rápida

Observando novamente a figura 3.1, a figura 3.2 e a figura 3.3, percebemos que existem
softwares que auxiliam bastante o processo de prototipação das telas.
A prototipagem rápida utiliza estes softwares para simular o sistema final com mais
fidelidade do que as telas em papel. As telas em papel são ótimas, mas não permitem
ver como fica a navegação entre as telas realmente. O problema deste tipo de software é
que é necessário passar um tempo para criar os protótipos e este tempo, se não estiver
bem definido durante o planejamento do projeto, pode significar em uma perda valiosa
de tempo da parte de desenvolvimento.
Usando os protótipos em software, é possível obter um feedback mais rápido e fiel
sobre a interface e desta forma saber os problemas e vantagens da interface em
desenvolvimento.

MULTIMÍDIA
Assista a alguns vídeos do 3.4.7 Prototipagem de baixa e alta fidelidade
Axure, um software As técnicas que foram apresentadas anteriormente são
bastante usado para baseadas em protótipos. Um protótipo é uma
prototipação: manifestação de um projeto que permite aos
http://www.axure.com/lear stakeholders interagirem com ele e explorarem sua
n. Os vídeos vão ajudá-lo adequação. É na verdade um modelo, uma
a entender como estes representação do que pode ser o produto final.
softwares contribuem para
o processo de
prototipação.
Um protótipo de baixa fidelidade é aquele que não se parece muito com o produto final.
Por exemplo, podemos usar impressões 3D para representar um novo modelo de um
telefone celular. Os protótipos de baixa fidelidade são úteis porque são simples e de
rápida produção. Mas não é porque são simples significam que são baratos e rápidos de
serem modificados. O storyboard é um exemplo de protótipo de baixa fidelidade, assim
como o cardsorting.
A prototipação de alta fidelidade, como se espera, utiliza materiais que estarão no
produto final. Você já deve ter visto aqueles carros conceito que as montadoras
produzem e expõem nos salões automotivos, certo? É um bom exemplo de protótipo de
alta fidelidade.
Na informática é possível criar protótipos com linguagens rápidas de desenvolvimento
como o Visual Basic por exemplo, para que o usuário tenha noção de como vai ficar o
software final. O protótipo de alta fidelidade é útil para vender ideias para as pessoas e
para testar questões técnicas.
Alguns autores concordam com o fato de que mais projetos deveriam usar a
prototipação de baixa fidelidade porque os problemas existentes na prototipação de alta
fidelidade, podem prejudicar o andamento do projeto. Alguns problemas dos protótipos
de alta fidelidade são:
• Levam muito tempo para serem desenvolvidos;
• A equipe de teste tem a tendência de comentar mais sobre aspectos superficiais
que o de conteúdo;
• Como os desenvolvedores levam tempo para criar o protótipo, eles acabam
sendo relutantes de mudar alguma coisa depois;
• Um protótipo em software pode criar expectativas muito altas;
• Um bug em um protótipo de alta fidelidade já pode parar os testes.
Outras vantagens e desvantagens encontradas nos protótipos estão mostradas na
tabela3.1.

TIPO VANTAGENS DESVANTAGENS

- verificação limitada de erros
- especificação pobre em
Protótipo - custo mais baixo de desenvolvimento detalhe do código
de - avalia múltiplos conceitos de design - mais facilitado
baixa - instrumento de comunicação útil - utilidade limitada após
 fidelidade. - aborda questões de layout de tela estabelecimento dos
- útil para identificação de requisitos de requisitos
mercado - utilidade para testes de
- demonstração de que o conceito funciona usabilidade limitada
- limitações de fluxo e
navegação

TIPO VANTAGENS DESVANTAGENS

- funcionalidade completa - desenvolvimento mais caro
Protótipo - totalmente interativo - sua criação demanda tempo
de - dirigido aos usuários - ineficiente para
alta - define claramente o esquema de navegação demonstrações que o conceito
fidelidade - uso para exploração e teste funciona
- mesma aparência do produto final - não serve para coleta de
- serve como uma especificação viva requisitos
- ferramenta de venda e marketing
Tabela 3.1 – Eficácia relativa dos protótipos de baixa vs alta fidelidade (ROGERS,
SHARP e PREECE, 2013).

3.5 Técnicas de modelagem de interface

Uma vez que vimos as técnicas para a concepção de interface, vamos agora apresentar
algumas técnicas relacionadas com a modelagem de interface.
Estas técnicas são um conjunto de etapas e atividades para a definição de elementos
concretos partindo de elementos abstratos.
Vamos analisar duas técnicas:
• The bridge, criada por Tom Dayton em 1996
• Design centrado no usuário, criada por Lary Constantine e Lucy Lockwood em
1999

3.5.1 The Bridge

A metodologia The Bridge (“A Ponte”) é, de acordo com seus autores, uma
metodologia abrangente e integrada para projetar rapidamente interfaces de usuário
gráficas orientadas a objeto e multiplataforma. A metodologia lida em grande parte com
a questão da criação da tarefa de modelos de interação e os processos que são
necessários para que isso aconteça (WARREN, 1997).
Esta técnica se baseia em uma sequência de sessões de projeto envolvendo várias
pessoas (usuários, programadores e analistas) que criam uma “ponte” entre os requisitos
dos usuários e da organização e o projeto de uma interface que apoie estes requisitos.
As atividades principais deste método são:
• Expressar os requisitos de usuários por meio de um fluxo de tarefas: nessa etapa,
os envolvidos definem um fluxograma de trabalho para o sistema a ser
executado pelo usuário.
• Mapear os fluxos de tarefa em objetos da tarefa: uma vez que os fluxogramas de
tarefas estão definidos, eles são analisados e transformados em objetos de tarefa.
Estes objetos correspondem a janelas, caixas de diálogo e caixas de mensagens.
• Mapear objetos da tarefa em objetos de interface: os protótipos dos objetos de
interface definidos nesta etapa devem ter sua usabilidade testada pelos usuários
que participaram das sessões de projeto.

Figura 3.9 – Exemplo de fluxograma de trabalho.

3.5.2 User Centered design

O User Centered Design (UCD) ou design centrado no usuário também é conhecido por
processo de design centrado no usuário e, devido a isto, é utilizado em várias áreas da
manufatura, arquitetura e outras. Existem exemplos na internet do uso desta técnica no
design de automóveis (WORLD WIDE WEB CONSORTIUM (W3C), 2004).

A norma 9241-210:2010 também estabelece que “o design centrado no usuário é uma

abordagem para o desenvolvimento de sistemas interativos que focam especificamente
em fazer sistemas usáveis. É uma atividade multidisciplinar”.
No design centrado no usuário, todos os processos de desenvolvimento têm o usuário
como foco. O design centrado no usuário, de acordo com Rubin (1984), pode ser
representado como dois círculos:
• Os usuários estão no centro;
• O círculo interno contém: Contexto, objetivos, ambiente e metas;
• O círculo externo contém: Detalhe das tarefas, conteúdo das tarefas, organização
de tarefas e Fluxo de Tarefas.
 Figura 3.10 – Design centrado no usuário (RUBIN, 1984).

O design centrado no usuário possui os seguintes princípios:

• Foco inicial em usuários e tarefas
o Reunião sistemática de informação estruturada: é importante que toda
informação estruturada seja juntada e analisada pela equipe.
o Designers treinados por especialistas antes de conduzir as sessões de
coleta de dados: antes de os dados serem coletados pelos designers, é
importante que os especialistas passem sua experiência para os designers.
• Medidas empíricas e teste de uso do produto
o Foco na facilidade de aprendizagem e facilidade de uso.
o Teste de protótipos com usuários atuais.
• Design iterativo
o Produto projetado, modificado e testado repetidamente.
o Permite uma revisão completa e revisão do design por testes preliminares
de modelos conceituais e ideias de design.
O objetivo do design centrado no usuário é criar um processo de design que aumenta a
usabilidade do produto.

Tabela 3.2 – Diferença do estágio onde o usuário é envolvido.

O design centrado no usuário é uma forma de abordagem que pressupõe que os

designers irão prever como os usuários usarão o produto e também vão testar a validade
do que foi levantado com os usuários reais.
Segundo Woodson (1981), o design centrado no usuário pode ser entendido como uma
prática de criar produtos de forma que os usuários sejam capazes de usá-los com o
mínimo de estresse e o máximo de eficiência.
A participação dos usuários, como estamos percebendo, é fundamental neste tipo de
abordagem. Eles são importantes para que:
1. As ideias sejam validadas;
2. Novas ideias surjam a partir da equipe envolvida;
3. Diminuir custos e retrabalho;
4. Evitar o desenvolvimento de funcionalidades inúteis e o excesso de informação.

Existem algumas técnicas que podem ajudar nesta abordagem:

Técnica Descrição
Já vimos que envolver quem vai usar o produto é
ENTREVISTAS COM
fundamental. Se eles são os maiores interessados no
USUÁRIOS E
resultado, envolvê-los juntamente com quem patrocina o
STAKEHOLDERS
produto é importante.
É outra técnica bastante interessante. Por meio da
OBSERVAÇÃO EM observação do comportamento no seu ambiente de
CAMPO trabalho, é possível perceber como ele poderá usar o
produto.
O uso de questionários é muito incentivado. Se forem
anônimos, pode ser ainda melhor, pois muitas vezes os
usuários podem se sentir acanhados ou incomodados de
QUESTIONÁRIOS
alguma forma quando estão em sessões diretas e
pessoais. Um questionário pode afastar a inibição e
recolher requisitos preciosos para o produto
CARDSORTING Já vimos esta técnica antes e estudamos que ela
 classifica os requisitos de maneira bastante eficiente.
Outra ideia interessante é a incorporação de papéis pelos
usuários, ou personificação. Por meio das personas
criadas, o usuário pode dar sinais do que é necessário no
PERSONAS produto final. O papel de usuário é definido como um
tipo de usuário que apresenta necessidades, interesses,
expectativas, comportamentos ou responsabilidades
específicas em relação ao produto ou sistema.
PROTOTIPAÇÃO Outra técnica que já foi vista anteriormente.
TESTES COM USUÁRIOS Os protótipos são muito usados e a utilização de testes
certamente é outra forma de colocar o usuário como
validador do que foi prototipado.
CASOS DE TAREFAS São semelhantes aos casos de uso da UML. São
definidos como narrativas estruturadas e simplificadas
de interação realizada pelo usuário desempenhando seu
papel por meio do sistema.

3.6 Considerações finais

Vimos várias técnicas para obter os requisitos dos usuários e stakeholders para construir
melhores produtos.
Quando tratamos dos projetos relacionados com IHC, podemos resumir as várias
características favoráveis das técnicas para o bom projeto:
• Envolver as soluções relacionadas aos aspectos essenciais da interface no início;
• Prever a descrição de soluções em termos abstratos inicialmente, e detalhar
progressivamente conforme o projeto avança;
• Prever transformações, representando com mapeamento os aspectos de uma
representação e outra;
• Prever diversas oportunidades para que tais definições sejam repartidas e
validadas pelos usuários.
Portanto, quando consideramos o usuário, a abordagem de projeto centrado ao usuário,
leva em conta o ser humano em cada etapa do desenvolvimento de um produto ou
serviço. E tudo que o usuário experimenta deve ser resultado de uma decisão consciente
da parte do projetista.
 ATIVIDADES
01. Quem você acha que
pode ser os stakeholders
de um sistema para caixa
de um grande
supermercado?
02. Quais são os principais LEITURA
tópicos do design centrado Abaixo estão listados
no usuário? alguns links que podem
03. Faça um storyboard ser úteis no seu estudo
para a reserva de um sobre design de interfaces:
quarto de hotel pela web. Informações sobre IHC no
04. Por que o uso de Brasil:
protótipo em algumas
REFLEXÃO http://www.sbc.org.br/ihc
situações pode não
Criar interfaces ser
gráficas Este link é legal porque
uma
não éboa
umaideia como
tarefa tão fácil contém várias referências
forma
quanto de obterVemos
parece. requisitos
em sobre IHC. Vale a pena
do usuário?
muitas empresas uma certa dar uma boa olhada:
05. Falamos com
despreocupação algumas
esta http://www.usernomics.co
vezes
parte sobre Bootstrap. do
tão importante O m/hci.html
que é isso? Pesquise
software. Atualmenteno A ACM (Association of
site
existem várias facilidades Computing Machinery) é
www.getbootstrap.com
técnicas para criação dee uma entidade que dita
liste
interfacessuas como
principaiso vários padrões para a
características..
Bootstrap, o AngularJS, o computação em geral. Eles
JQuery e não basta ser um têm um grupo de estudos
craque nestas tecnologias, específicos na área de
o que vimos aqui neste IHC:
capítulo é fundamental. http://www.acm.org/sigchi
Tente aplicar estes /
ensinamentos nos projetos Este é um link de um livro
que você participar. online a respeito de IHC.
Certamente eles serão um Bastante interessante
belo diferencial entre você também:
e outros que não se http://brazil.joelonsoftwar
preocupam com isso e só e.com/uibook/chapters/1.h
com a parte técnica. tml
Avaliação

Imagine uma situação na qual você desenvolveu um site, após ter passado pelas etapas
de desenvolvimento que estamos vendo ao longo deste livro, implantou o site e ele está
pronto para ser mostrado ao grupo de usuários-alvo: um grupo de adolescentes (por
exemplo, um site para vestibular). Como é possível saber se eles se interessarão pelo
site e vão de fato usá-lo? É necessária de uma avaliação. Mas como avaliar?
Assim como qualquer outra parte do design, a avaliação é integrante do processo de
desenvolvimento. Quem vai fazer a avaliação precisa pegar as informações sobre a
experiência do usuário ou possíveis experiências quando estão interagindo com um
protótipo, um sistema de computador, um componente de um sistema, etc.
Isto é feito para melhorar o design, e a avaliação tem como foco melhorar a usabilidade
e a experiência do usuário ao interagir com o sistema.
Neste capítulo vamos estudar alguns assuntos relacionados com a avaliação e te dar
elementos que podem ser expandidos em uma situação real por você ou pela sua equipe.
Nunca se esqueça de avaliar o produto que está sendo entregue e nunca se esqueça de
que a avaliação deve fazer parte do projeto da interface.
Vamos lá? Bons estudos e bom trabalho!

4.1 Introdução
Atualmente vemos o mercado receber vários tipos de produtos diferentes em relação aos
dispositivos móveis, não é?
Principalmente os grandes players do mercado, como Apple, Samsung, Motorola, Asus,
Sony e outros a cada dia lançam produtos semelhantes, mas com alguma característica
que os tornam diferentes. O iPod, iPad, os e-readers (como o Kindle, o Lev, o Kobo, por
exemplo) aumentaram muito a percepção dos usuários quanto à usabilidade, porém há
um detalhe: será que o que os designers acham que vai ser usado por todos, que é tão
natural, realmente será usado?
Para ilustrar isso, assista ao filme Jobs da Universal Pictures, produzido em 2015. Ele
retrata resumidamente a vida de Steve Jobs, e em uma certa parte do filme ele e sua
equipe estão discutindo sobre o Lisa, um computador pessoal que poderia revolucionar
o mercado com sua interface gráfica e uso do mouse, porém, foi um fracasso comercial
para a Apple.
Portanto, a avaliação é importante. Temos certeza, que a Apple fez as devidas
avaliações, afinal, estamos falando da Apple! Porém trabalhar com uma hipótese de que
os usuários aceitarão o produto baseado nas preferências dos designers é um risco alto.
Existem vários métodos de avaliação diferentes. Decidir qual usar é uma tarefa difícil e
que de uma certa forma está relacionada com a cultura da equipe de desenvolvimento.
As avaliações normalmente abrangem a observação do usuário ao usar o produto e
medir o seu desempenho por meio de testes de usabilidade, experimentos ou estudos de
campo. Existem outros métodos que não envolvem diretamente a participação do
usuário, como a modelagem do comportamento do usuário.
Estes últimos aproximam-se de previsões do que os usuários podem fazer na interação
com a interface.
Vamos estudar a importância da avaliação e o que precisa ser avaliado para podermos
entender melhor este assunto.

4.2 Por que avaliar?

É claro que é importante que um produto, um sistema, no nosso caso, seja usável e
bonito. Porém, os usuários certamente esperam mais do que isso: esperam também que
ele tenha uma experiência agradável no uso e que seja envolvente.
Portanto, a avaliação é mais do que justificável.
Se formos considerar a parte de negócios, um produto com bom design vende. E isto
torna mais um bom motivo para que a avaliação seja importante. A avaliação é uma
atividade que permite corrigir erros no produto antes que este seja colocado em
produção e seja vendido.
Vamos pegar um exemplo para ilustrar:
Chame um jovem adolescente e um adulto para conversar a respeito do Facebook e faça
algumas perguntas como:
• você posta fotos frequentemente?
• que tipos de fotos você posta?
• qual foto você tem como imagem do seu perfil?
• que aplicativos você usa no Facebook?
• já apagou alguém da sua lista de amigos?
Estas perguntas feitas a dois tipos de usuários diferentes vão nos levar a uma avaliação
do produto (o Facebook). Um adolescente provavelmente usa o Facebook para algumas
finalidades do adulto, que na maioria das vezes é menos extrovertido os adolescentes.
Sendo assim, o produto está preparado para estes dois perfis? (Não precisa responder,
apenas pense que estamos avaliando o produto). O produto contém recursos para estes
dois tipos de perfis?
Resumidamente, o motivo de avaliar está relacionado com:
• Determinar o valor de algo;
• Apreciar;
• Julgar;
• Ponderar, examinar, considerar;
• Calcular, estimar.
Ou seja, a avaliação de IHC tem a finalidade de julgar a qualidade de interação de um
sistema ou outro artefato computacional.

4.3 O que avaliar?

Basicamente, a avaliação vai depender do “tamanho da encrenca”, ou seja, pode ser
avaliar protótipos de baixa tecnologia a sistemas completos e mais complexos, com
apenas uma tela de interação ou que possui vários módulos interligados.
Por exemplo, os desenvolvedores de um novo navegador para a web podem querer
saber se os itens que eles desenvolveram nas telas são encontrados mais rapidamente na
nova versão, enquanto também podem querer saber se as novas telas alteram o
comportamento do usuário. Uma empresa que desenvolve media players (tipo o
Winamp) pode querer saber se usuários diferentes, de países diferentes, gostam da
mesma aparência da tela, etc.
Ou seja, devemos avaliar os aspectos cognitivos e funcionais relacionados à realização
das tarefas apoiados pelo sistema, como:
• É rápido?
• É de fácil aprendizado?
• É confiável?
• Permite reverter erros realizados com facilidade?
• Permite ser lembrado depois de algum tempo sem usar?
Além disso, aspectos socioculturais do uso da solução e dos contextos previstos também
devem ser avaliados.
E aspectos afetivos do sistema, como se as pessoas vão gostar, se é bonito e agradável,
etc.
4.4 Onde avaliar?
Novamente, a localização da avaliação vai ocorrer dependendo do projeto e do que está
sendo avaliado. Quando vamos avaliar acessibilidade na web, é melhor avaliar dentro de
um laboratório, a fim de verificar e controlar se todos os requisitos necessários estão
sendo cumpridos.
Isso ocorre também com as escolhas de design, como o layout e o tamanho das teclas de
um telefone celular. Outros aspectos como a experiência do usuário, como crianças
experimentando um novo brinquedo também podem ser avaliadas. Neste caso, o tempo
em que a criança brinca com o brinquedo, é medido até que ela se canse e afaste o
brinquedo. Nestes exemplos, o melhor lugar para avaliar seria em ambientes naturais do
usuário, chamados também de estudos na natureza (ROGERS, SHARP e PREECE,
2013).
Em outras situações, como redes sociais, a avaliação pode ser feita nas próprias casas
dos usuários, podendo ser realizadas para avaliar as interações naturais de um grande
número de usuários.

4.5 Quando avaliar?

A fase de avaliação do produto ocorre em uma determinada parte do ciclo de vida do

seu desenvolvimento e também depende do tipo de produto. Como exemplo, vamos
supor que um produto totalmente novo está sendo desenvolvido ou sendo atualizado
para uma nova versão. Neste caso, quando o produto é novo, haverá um tempo para a
criação de protótipos, levantamento de requisitos e pesquisa de mercado. Quando os
requisitos forem obtidos, a criação dos protótipos, esboços, storyboards levará um
tempo para o desenvolvimento. Logo, a avaliação neste caso é feita durante o design.
Quando a avaliação é feita durante o design, ela é chamada de avaliação formativa
(RUBIN, 1984). As avaliações deste tipo abrangem uma grande parte de processos de
design, desde o desenvolvimento de esboços iniciais e protótipos até a fase final do
design.
Existem também as chamadas avaliações somativas. Estas são usadas para medir o
sucesso de um produto acabado. Se o produto está em atualização, então a avaliação vai
se concentrar em adicionar (somar) novos requisitos ao produto, uma vez que os
requisitos iniciais já foram obtidos anteriormente. Neste caso, como novos requisitos
podem ser adicionados, é possível que problemas de usabilidade ocorram.
De qualquer maneira, algumas agências reguladoras, como o National Institute of
Standards and Technology (NIST), nos EUA, e a International Standards Organization
(ISO), e a sociedade britânica, têm padrões nos quais a avaliação do produto é
determinada em uma parte do ciclo de vida do produto.

MULTIMÍDIA
Momento Vintage: Assista 4.6 Técnicas de Avaliação de Usabilidade
a estes vídeos a respeito Possíveis problemas de usabilidade podem ocorrer
do Apple Lisa e como era durante o processo de construção de um software; isto é
a ideia de interface com o natural e aceitável. O objetivo do uso de técnicas de
usuário nos anos 1980. avaliação é evitar que esses problemas passem
https://www.youtube.com/ desapercebidos e venham causar algum tipo de
watch?v=OKrvMStjbIU desconforto ou descontentamento ao usuário. Serão
E veja o seu promocional, avaliadas as funcionalidades do sistema e a usabilidade
de 1983: da interface, levando em consideração aspectos como:
https://www.youtube.com/ interatividade e comunicabilidade, bem como
watch?v=-G9S-h2w2dU desempenho, aprendizado, memorização, planejamento
e satisfação dos usuários.
Basicamente existem três tipos de técnicas de avaliação que são geralmente utilizadas:
Técnica Descrição
Neste tipo de técnica, busca-se a opinião do usuário
TÉCNICAS PROSPECTIVAS
sobre a experiência de uso e interação com o sistema.
TÉCNICAS Neste tipo, a busca de prevenção de erros na interface
PREDITIVAS/ANALÍTICAS é feita sem a participação direta de usuários.
As informações sobre problemas na interface são
TÉCNICAS
obtidas enquanto o usuário é observado interagindo
OBJETIVAS/EMPÍRICAS
com o sistema.

4.6.1 Técnicas prospectivas

Este tipo de técnica se baseia em saber a opinião do usuário com relação à sua interação
com o sistema, avaliando o seu nível de satisfação em relação à experiência de uso.
Geralmente esses métodos são realizados por meio de entrevistas e questionários.
Quando se tem um número reduzido de usuários, as entrevistas são indicadas, pois é
possível identificar o nível de ansiedade do usuário ao interagir com o sistema,
entretanto, por parecer um método mais informal, por vezes pode ser mais difícil obter
resultados confiáveis e válidos. Já os questionários são indicados quando o número de
usuários é muito grande, tendo perfis diferentes.
4.6.2 Técnicas preditivas
Estão baseadas em conhecimento heurístico ou teórico de um avaliador que é
especialista. Neste caso, não é preciso envolver os usuários, porque os especialistas
usam o seu conhecimento sobre os usuários e as situações típicas de uso.
É uma alternativa interessante em relação a custo.
Vamos ver algumas destas técnicas.
4.6.2.1 Avaliação Heurística
A avaliação heurística identifica possíveis problemas ou barreiras que possam ser
encontradas pelos usuários ao interagirem com o sistema permitindo uma avaliação
contínua a um baixo custo. Ela pode ser aplicada tanto no desenvolvimento do projeto,
quanto após a sua implementação
Ela foi proposta por Jakob Nielsen (NIELSEN, 1994) e, segundo ele, “o objetivo da
avaliação heurística é encontrar os problemas de utilização na concepção, de modo que
eles possam ser atendidos como parte de um processo iterativo de design. ”
Nielsen chamou de heurística porque são regras no âmbito geral e não diretrizes
específicas de usabilidade.
Neste tipo de técnica é considerado que somente uma pessoa não é capaz de encontrar
todas as possíveis falhas do sistema; por isso, para a avaliação, é proposta a seleção de
um pequeno grupo avaliadores que submetem o sistema aos princípios heurísticos. Com
isso eles podem estabelecer o que realmente é importante e necessário para a construção
de um modelo consistente. Eles se baseiam em regras gerais que descrevem
propriedades comuns à construção de interfaces. O design é examinado em busca de
elementos que violem essas regras.
São atribuídos valores de gravidade para cada problema encontrado em cada passo,
segundo uma escala proposta por Nielsen e Mack (1994):
1. Não é considerado em sua totalidade um problema de usabilidade.
2. Problema apenas estético: não é necessário consertá-lo, a menos que se tenho
tempo extra no projeto.
 3. Problema menor de usabilidade: deverá ser dada baixa prioridade ao conserto
desse tipo de problema, não é tão importante consertá-lo.
4. Problema maior de usabilidade: deverá ser dada alta prioridade ao conserto deste
problema, é importante consertá-lo.
5. Catástrofe de usabilidade: É obrigatório consertá-lo, antes de o produto ser
divulgado.
A motivação principal do método é facilitar e acelerar o processo de avaliação de
interfaces, maximizando o papel da experiência do avaliador, para enfrentar a cada vez
mais crescente demanda de boas interfaces.
As etapas principais são:
1. Preparação
2. Sessões curtas de avaliação individual
3. Consolidação das avaliações individuais
4. Priorização dos problemas encontrados
5. Relatório conclusivo final

Diversos autores de maior influência na área de IHC propuseram métodos que avaliam
sites e interfaces em todos os casos, sendo possível encontrar algumas semelhanças nos
métodos propostos por eles. Entretanto, dentre esses autores, o que tem maior relevância
em relação aos demais por ter proposto o termo e ter criado uma lista de dez heurísticas
que são imprescindíveis para a melhora na usabilidade das interfaces, é Jakob Nielsen.

Heurística Descrição
Mantenha os usuários informados sobre o que está
VISIBILIDADE DO ESTADO
acontecendo por meio de feedback adequado e no
DO SISTEMA
tempo certo.
CORRESPONDÊNCIA ENTRE Utilize conceitos, vocabulário e processos
O SISTEMA E O MUNDO familiares aos usuários.
REAL
CONTROLE E LIBERDADE Forneça alternativas e “saídas de emergência” e
DO USUÁRIO possibilidades de voltar e refazer (undo e redo).
Palavras, situações e ações semelhantes devem
CONSISTÊNCIA E significar conceitos ou operações semelhantes. Caso
PADRONIZAÇÃO haja convenções para o ambiente ou plataforma
escolhidos, estas devem ser obedecidas.
PREVENÇÃO DE ERRO Tente evitar que o erro aconteça informando o
usuário sobre as consequências de suas ações ou, se

AJUDA AOS USUÁRIOS
PARA RECONHECEREM,
DIAGNOSTICAREM E SE
RECUPERAREM DE ERROS
RECONHECIMENTO
FLEXIBILIDADE E
EFICIÊNCIA DE USO
DESIGN ESTÉTICO E
MINIMALISTA
AJUDA E DOCUMENTAÇÃO
possível, impedindo ações que levariam a uma
situação de erro.
Mensagens de erro em linguagem simples, sem
códigos, indicando precisamente o problema e
sugerindo de forma construtiva um caminho de
recuperação.
Em vez de memorização, torne os objetos, ações e
opções visíveis e compreensíveis.
Ofereça aceleradores e caminhos alternativos para
uma mesma tarefa e permita que os usuários
customizem ações frequentes
Evite porções de informação irrelevantes. Cada
unidade extra de informação em um diálogo
compete com as unidades de informação relevantes
e reduz sua visibilidade relativa.
Devem ser fáceis de buscar, focadas no domínio e
na tarefa do usuário, e devem listar passos
concretos a serem efetuados para atingir seus
objetivos.

O procedimento de execução desta técnica é feito da seguinte maneira, por meio de

etapas:

ETAPA Descrição
A apresentação deve ser decidida entre papel,
ou por meio de um protótipo ou por produto
DETERMINAÇÃO DA acabado. É feita uma verificação das condições
PROPOSTA DE DESIGN gerais da inspeção, a fim de verificar se o
material completo e inspecionável está a
contento
NAVEGAÇÃO GERAL PELO Determinação de qual o sentido geral o
SISTEMA (OU SUA avaliador vai dar ao sistema que vai analisar em
REPRESENTAÇÃO) detalhes.
Quem são os usuários e suas características e
DETERMINAÇÃO DO PERFIL
contextos individuais, sociais e culturais. E o
DOS USUÁRIOS
que desejam como objetivo com o produto.
Em quais as situações prováveis, mas
DETERMINAÇÃO DE CENÁRIOS plausíveis, os usuários poderiam encontrar-se?
DE USO Ou seja, no que os avaliadores estão pensando
quando fazem sua inspeção?

Algumas vezes os avaliadores fazem inspeções de uma maneira mais geral, sem
instanciar usuários específicos ou cenários de uso.
Todos os avaliadores juntos discutem as avaliações individuais e examinam as
divergências encontradas. Em seguida elaboram uma lista consensual de violação das
 EXEMPLO
Como exemplo, vamos
citar o trabalho de Budd
(BUDD, cada
heurísticas, 2007)
qual sobre
com o respectivo grau de severidade estabelecido em comum
heurísticas para questões
acordo.
de web
Eles design.
também atribuem prioridades de correção para todas as violações listadas e geram
• Clareza:
um relatório final dotorne
grupo ocom as suas conclusões e comentários.
Portanto,sistema o mais
para se aplicar o método, existem as seguintes maneiras:
claro,
1. Criar conciso de
um conjunto e tarefas para ser aplicado pelos avaliadores;
significativo
2. Fornecer aos avaliadores os objetivos da aplicação e deixar que eles criem suas
possíveltarefas;
próprias para os
usuários
3. Pedir para finais.
os avaliadores testarem os elementos de diálogo.
Escreva
A escolha doo método de
de aplicação a ser usado vai depender do tempo disponível para
forma clara
teste e dos avaliadores. Por exemplo, se o grupo de avaliadores é formado por crianças,
e concisa.
o mais apropriado é usar um conjunto de tarefas criado e executado pelos avaliadores.
o Somente
utilize
linguagem

4.6.2.2 Inspeçãotécnica
por meio de lista de verificação
quandoé um checklist, ou seja, são vistorias baseadas em uma lista em
A lista de verificação
que existem itenshouver umverificados por meio de profissionais, não necessariamente
a serem
especialistas empúblico
ergonomia, como por exemplo, programadores e analistas, que
diagnosticam os técnico
problemas gerais e repetitivos das interfaces rapidamente.
Ao contrário dasespecífico.
avaliações heurísticas, são as qualidades da ferramenta (checklist), e
o Escreva
não dos avaliadores, que determinam as possibilidades para a avaliação.
Checklists bem textos que devem produzir resultados mais uniformes e abrangentes,
elaborados
em termos de sejam
identificação de problemas de usabilidade, pois os inspetores são
clarosde interface
conduzidos no exame e por meio de uma mesma lista de questões a responder
significativ
sobre a usabilidade do projeto.
As inspeções poros.listas de verificação não precisam necessariamente ser realizadas por
E
profissionaisoespecialistasuseem ergonomia. Podem ser realizadas por programadores e
íconesquem
analistas, isto porque quedetermina a qualidade da avaliação são as questões contidas
na lista, e não osrealmente
avaliadores. Se o questionário for bem elaborado, a inspeção por lista
representa
de verificação tende a produzir resultados mais consistentes, uma vez que todos os
avaliadores são mconduzidos
o que por uma lista questões para realizar a avaliação de
eles
usabilidade do sistema. se
propõem.
Portanto, este tipo de avaliação apresenta uma série de vantagens:
• Diminua a
complexidade
desnecessária e a
 • O conhecimento ergonômico está contido na própria lista de verificação, sendo
assim, não são necessários profissionais especializados em IHC, que são mais
escassos no mercado.
• Existe a garantia de que os resultados serão mais estáveis mesmo que forem
aplicados separadamente por diferentes avaliadores, isso porque as questões da
lista sempre serão verificadas.
• As especificidades das questões da lista fazem com que problemas de
usabilidade sejam facilmente encontrados.
• Redução da subjetividade dos processos de avaliação.
• Reduzir os custos da avaliação, pois é um método de rápida aplicação, não
necessita de pessoal especializado.
Entretanto, para que essas listas sejam realmente efetivas, é necessário reduzir ao
máximo o número de questões subjetivas que possam colocar o avaliador em dúvida, ou
exigir dele competências a níveis de usabilidade ou ergonomia que ele não possui.
Outros fatores que podem interferir na economia da inspeção são conteúdos
incompletos ou mal organizados ou muito extensos, que podem não ser aplicáveis ao
sistema.
Podemos ver, no exemplo de uma lista de verificação desenvolvida pelo LabUtil
chamada Ergolist (http://www.labiutil.inf.ufsc.br/ergolist/check.htm), que existem
diversos tópicos que são abordados e para cada um dos tópicos existe uma série de
questões que serão respondidas pelos avaliadores.
4.6.3 Técnicas objetivas
As técnicas objetivas também são chamadas de técnicas empíricas e são baseadas na
participação direta dos usuários.
Apesar de existirem outras técnicas, vamos estudar com mais destaque a técnica
“Ensaio de Interação”.

4.6.3.1 Ensaio de Interação

Como o próprio nome da técnica sugere, um ensaio de interação consiste em “ensaiar” o
uso de um sistema, quase que literalmente, como se fosse um ensaio de uma peça de
teatro ou de uma banda.
No nosso caso, um ensaio de interação é o uso simulado de um sistema em que as
pessoas que vão utilizá-lo participam das sessões e tentam fazer tarefas usuais típicas
que fariam com um protótipo do sistema.
A preparação para o ensaio necessita de um trabalho detalhado de reconhecimento do
usuário final e de sua tarefa típica para a composição dos cenários e procedimentos que
vão ser aplicados durante a realização das sessões de testes.
Os ensaios de interação têm o objetivo de identificar problemas na interfaces e pontos
que atrapalhem a facilidade de uso. Dele participam pessoas integrantes do seu público-
alvo (usuários), realizando as mais diversas tarefas de interação com o sistema.
Esse tipo de ensaio é importante, pois mostra que nem todos pensam da mesma forma.
É possível comparar a forma de interação dos diferentes usuários com o sistema e ver
que eles interagem com o sistema de diferentes formas. Esse tipo de observação permite
que os analistas observem os pontos de falha do sistema, o que pode fornecer novas
ideias ao projeto.

Figura 4.3 – Montagem do ensaio de interação.

A figura 4.3 mostra um diagrama geral da montagem do teste de interação de acordo

com uma situação de responsabilidade. Percebemos que está dividida em 3 partes:
• Análise preliminar;
• Definição dos scripts, cenários e da amostra;
• Realização dos ensaios.
Análise Preliminar
No processo de preparação do teste, é necessário determinar o escopo do teste, ou seja,
o que se quer descobrir ao observar os usuários. Para tal, é preciso conhecer cada
usuário e saber quais são as tarefas que eles mais utilizam.
Instruções são dadas aos usuários no momento da aplicação do teste; são distribuídos
também blocos para anotações. Ao realizar as tarefas, os usuários são observados e
avaliados, são verificadas todas as suas ações e reações durante todo o processo de
interação.
Todas essas tarefas são observadas pelos avaliadores com auxílio de dispositivos de
áudio e vídeo, marcação de tempo, espelhos falsos, tudo isso para saber quais são as
ações e as reações dos usuários ao interagirem com a interface do sistema. Os ensaios
também podem ser gravados, para que a avaliação seja realizada posteriormente.
A fase de análise preliminar é aquela em que os analistas entram em contato com o
software e o seu contexto de desenvolvimento e fazem um pré-diagnóstico dos
problemas de ergonomia de sua interface com o usuário.

Reconhecimento do software
Naturalmente, para o software ser reconhecido, são feitas algumas sessões de entrevistas
com as pessoas que projetaram e desenvolveram para trazer informações sobre o que foi
projetado e desenvolvido.
As questões que são feitas a essa equipe são de várias naturezas, como o tempo de
desenvolvimento, para quem o software foi desenvolvido, dados sobre o sistema,
situação no mercado e etc.
Esse levantamento é feito para compreender o ciclo de desenvolvimento do software e
dar fundamentos para o pré-diagnóstico.

Pré-diagnóstico
Com base nas informações obtidas pelos analistas, o software é examinado primeiro
para que as funcionalidades sejam conhecidas e depois para identificar as funções mais
problemáticas.
O pré-diagnóstico pode ser obtido por meio de uma avaliação do tipo heurística ou
ainda por meio de um checklist para inspeção ergonômica. Os critérios, recomendações
e normas ergonômicas servem como ferramenta de apoio.
O resultado é apresentado como um conjunto de hipóteses sobre problemas de
usabilidade do software que serão testadas posteriormente durante os ensaios de
interação.

Definição dos scripts, cenários e da amostra de usuários

Os scripts se referem ao conjunto de tarefas que uma amostra de usuários finais deverá
realizar durante os ensaios. O cenário se refere ao ambiente de execução, envolvendo
questões organizacionais. Os scripts e cenários são montados de acordo com as
informações obtidas no reconhecimento do software e de seu pré-diagnóstico
ergonômico e das informações obtidas pelo reconhecimento do perfil do usuário e de
sua tarefa:
• Reconhecimento do perfil do usuário
A primeira tarefa desta parte é contatar os usuários finais e verificar se eles têm o
mesmo perfil imaginado pelos projetistas. Nesta etapa já é possível estimar o grupo que
participará dos ensaios.
• Coleta de informações sobre o usuário e sua tarefa
Dependendo do público-alvo, pode ser que seja necessário um detalhamento da coleta
de informações sobre os usuários e suas tarefas. Por meio de questionários, os
projetistas podem buscar mais dados dos usuários em uma amostra maior de pessoas.
Estes questionários podem servir como roteiros de entrevistas presenciais ou a distância.
Os questionários podem coletar vários tipos de dados, como:
o recursos disponíveis (tanto técnicos como físicos) para a realização de uma
tarefa;
o do contexto da tarefa;
o do nível dos usuários;
o da utilização do sistemas.
Definição dos scripts de tarefas para os ensaios
Algumas tarefas são selecionadas para definir os scripts dos ensaios:
• tarefas relacionadas com os objetivos principais do software, do ponto de vista dos
projetistas;
• as hipóteses dos projetistas de ergonomia, feitas no pré-diagnóstico;
• as amostras de tarefas dos usuários que foram obtidas com os questionários;
• as funcionalidades do sistema consideradas mais e menos importantes pelo usuário;
• as funcionalidades mais acionadas pelos usuário no uso do software.
Combinando estes parâmetros, é possível criar um script, sempre considerando a
questão custo-benefício dos ensaios. O importante é saber avaliar criticamente sob o
ponto de vista do usuário e de sua tarefa.
Os testes podem ocorrer em ambientes naturais, tendo como vantagem ser o ambiente
real de utilização do software pelo usuário, mas com algumas desvantagens:
• Possível descontrole sob as condições do teste;
• Problemas técnicos;
• Interferências durante o teste.
Ou podem ser realizados em laboratórios, que dão condições melhores aos avaliadores,
mas podem gerar certos desconfortos aos usuários:
• Condições artificiais;
• Fora de contexto;
• Inibição.
Após a aplicação do teste, a satisfação dos usuários é avaliada por meio de questionários
e entrevistas.
 ATIVIDADES
01. Informe as
características você
gostaria de avaliar para os
seguintes sistemas:
a) Um tocador de música
pessoal, como o iPod;
b) Um site para vender
roupas.
02. Veja o Box sobre as
heurísticas para web
design no texto. Selecione
um site que você conhece
bem e o avalie segundo as
heurísticas do Box.
a) Essas heurísticas o
ajudam a identificar
questões importantes de
usabilidade e experiência
do usuário?
b) Saber das heurísticas
influencia de alguma
forma o modo como você
interage com
o site?
03. Agora use as 10
heurísticas comentadas no
texto para avaliar um site
que vende roupas (por
exemplo).
a) Como você pode usá-
las para avaliar o site?
b) As heurísticas o ajudam
a se concentrar mais no
site do que se você não as
estives-
se usando?
c) Usar menos heurísticas
poderia ser melhor? O que
poderia ser combinado e
 LEITURA
Na Universidade Federal
de Santa Catarina existiu
até 2003 o LabIUtil
(Laboratório de
REFLEXÃO
Utilizabilidade). Porém, o
Se você estiver
laboratório ainda deixa
trabalhando no mercado
alguns resultados
de desenvolvimento, ou
disponíveis, entre eles o
vai entrar em breve, você
Ergolist, que é um sistema
notará que ainda existem
de checklist bem
empresas que não dão a
interessante, desenvolvido
devida atenção à avaliação
em 1997 com apoio da
de interfaces, como vimos
Softex.
neste capítulo. Você deve
Link:
ter lido o box sobre as
http://www.labiutil.inf.ufs
heurísticas para a web.
c.br/ergolist/
Percebe que ali são dicas
Obs.: “Utilizabilidade” é
práticas e objetivas e até
um neologismo da palavra
mesmo intuitivas e óbvias,
francesa “utilisabilité”.
mas a quantidade de
Atualmente a palavra foi
empresas e equipes que
substituída por
nem imaginam que elas
“usabilidade”. Mas o
existem é ainda muito
nome do laboratório
grande. Esperamos que
permaneceu com o
você, como futuro
neologismo.
profissional, exerça o seu
Para quem quiser se
papel e use estas técnicas
aprofundar mais sobre
que foram introduzidas
design para web, este livro
aqui e ajude para melhorar
é muito bom:
a qualidade do software e
KOYANI, S. J.; BAILEY,
das interfaces que geramos
R. W.; NALL, J. R.
atualmente. E nunca se
Research-based Web
esqueça das questões
design and usability
relacionadas com
heuristics. Computer
acessibilidade, que já
Psycology, 2004
vimos em outro capítulo.
Outro livro bem legal,
agora em português:
CARRION, W. Design
para webdesigners:
Acessibilidade à Web

Acessibilidade é uma palavra composta por duas partes: acessível, que é originada da
palavra “acesso”, de accedere, que por sua vez é formada por ad (“a”) e cedere (“ir”,
“mover-se”). O sufixo “dade” é colocado em adjetivos para formar substantivos que
expressam estado ou quantidade. Portanto, fica mais do que claro que acessibilidade é
um estado acessível e uma possibilidade de ir a algum lugar.
Só quem tem alguma necessidade especial ou parentes e amigos portadores é que sabe o
quanto os lugares ainda precisam ser acessíveis e também na internet: se a internet é de
todos, como dizem, não se pode deixar de lado as pessoas portadoras de necessidades
especiais. Muito já foi feito e muito ainda precisa ser feito.
Na verdade, quem não possui deficiência ou até mesmo mobilidade reduzida, ou não
está envolvido com pessoas que possuem, não conseguem imaginar tantas situações que
discriminam as pessoas que sofrem com uma situação inadequada, como um banheiro
não adaptado, uma calçada sem rebaixamento, e até mesmo um site na internet.
Quando se trata de acessibilidade na web, existem muitos pontos que precisam ser
considerados. A W3C (World Wide Web Consortium) tem um grupo de trabalho que
recomenda algumas ações a serem feitas em sites para poder atender às pessoas com
necessidades especiais.
Neste capítulo vamos estudar estas recomendações e compreender a sua importância.

5.1 Introdução à acessibilidade

Antes de entrarmos com tudo na questão da web, é interessante conceituar
acessibilidade de maneira geral.
Basicamente, todos deveriam ter as mesmas oportunidades e, por incrível que pareça,
esta preocupação começou a tomar mais força nos últimos anos. Veja por exemplo
alguns teatros antigos, suntuosos e famosos: eles não tinham rampas de acesso e
elevadores até há pouco tempo. É interessante observar que este tipo de construção
antiga não tinha referência alguma em relação à acessibilidade.
Até mesmo nas nossas ruas. É difícil encontrar em algumas cidades calçadas rebaixadas,
sinalização para pessoas com necessidades visuais, cadeirantes e muitas outras
melhorias que certamente colaborariam para que todas estas pessoas tenham as mesmas
oportunidades que os outros.
E é um dever do estado que isto seja assegurado.
De acordo com a lei nº 10.098/2000, a acessibilidade é conceituada como a
possibilidade de dar às pessoas com necessidades especiais o alcance e uso, com
segurança e autonomia, de espaços, imobiliários e equipamentos urbanos, edificações,
transportes e sistemas e meios de comunicação. Portanto, o acesso à internet está
incluído nesta lei.
Em relação à parte que cuida da comunicação, a lei prevê a eliminação de barreiras na
comunicação e procura estabelecer alternativas técnicas que deixem os sistemas de
comunicação e sinalização acessíveis.
A acessibilidade é um assunto não tão recente. No Brasil, a questão tomou maior
discussão em 1981, quando este foi chamado de Ano Internacional dos Portadores de
Deficiência pela ONU. Em 1982, a ONU criou o Programa Ação Mundial para Pessoas
com Deficiência, no qual prevalecia que as pessoas nestas condições têm o mesmo
direito que os demais cidadãos às mesmas oportunidades e usarem em condições de
igualdade.
Em 1985 o Brasil publicou a primeira norma técnica que trata de questões relacionadas
com o tema, a NBR 9050/1985. Porém trata de adequação das edificações e do
mobiliário urbano à pessoa deficiente. Nesta norma, acessibilidade é: “possibilidade e
condição de alcance, percepção e entendimento para a utilização com segurança e
autonomia de edificações, espaço, mobiliário, equipamento urbano e elementos”.
Portanto, cada definição, seja na lei ou na norma, enfoca que acessibilidade significa
alcançar alguma coisa com autonomia, mesmo que seja assistida.
Em relação à internet, a preocupação com o conteúdo acessível começou pelo W3C, em
1999, por meio da iniciativa chamada Web Assistive Iniciative (WAI). Nesta ocasião,
foi elaborado o primeiro documento para auxiliar os desenvolvedores de páginas a
tornarem suas páginas mais acessíveis. Este documento foi o Web Content Acessibility
Guidelines. O WAI foca em três linhas:

Veja as figuras a seguir com exemplos de lugares e situações acessíveis:

Figura 5.1 – Balanço acessível

Figura 5.2 – Piscina acessível.

 Figura 5.3 – Piso tátil.

5.2 Acessibilidade na web e sua importância

Uma vez que conceituamos acessibilidade, vamos agora tratar da acessibilidade na web.
Sabemos que a web foi fundada por Tim Barners-Lee e este é diretor do W3C. O W3C,
por sua vez, é uma comunidade internacional em que várias empresas membro e uma
equipe dedicada integralmente, junto com o público, desenvolvem padrões para a web.
O objetivo principal do W3C é obter todo o potencial da web.
Sem dúvida, o W3C é a principal referência e detentora das principais diretrizes para se
estabelecer um padrão de construção de sites e demais elementos. Portanto, as diretrizes
e guias do W3C serão usadas neste capítulo como referência para a acessibilidade na
web.
O W3C possui padrões relacionados com a acessibilidade. Por meio de seu site
(WORLD WIDE WEB CONSORTIUM, 2015), podemos perceber que a acessibilidade
é um assunto prioritário para eles. Segundo o site, a web é fundamentalmente projetada
para ser usada por todas as pessoas, não importando o hardware, software, língua,
cultura, localização ou habilidade física ou mental.
A acessibilidade na web é importante porque nos faz lembrar que grande parte da
população que consome materiais que estão na web tem algum tipo de deficiência e isto
pode significar perda ou limitação de oportunidades da vida em comunidade em
condições de igualdade com as demais pessoas.
Segundo (FERNANDES e GODINHO, 2013), o uso de acessibilidade no
desenvolvimento de páginas e aplicações na web não se caracteriza uma limitação, mas,
ao contrário, os elementos de acessibilidade, com seus padrões e regras, tornam os
documentos mais flexíveis, abrangentes e fáceis de se usar.

MULTIMÍDIA
Este link mostra um vídeo
sobre acessibilidade na
web para celebrar o Dia
Internacional das Pessoas
com Deficiência, que
ocorreu em 3 de dezembro
de 2012 e encerrou a
Virada Inclusiva na
escultura da Mão, no
Memorial da América
Latina, em São Paulo.
https://goo.gl/saZc1L

O W3C tem escritório no Brasil, o W3C Brasil, o qual desenvolve ações locais para o
desenvolvimento dos padrões web. Eles têm um grupo de trabalho exclusivo para os
padrões de acessibilidade, o qual lançou uma cartilha com 7 fascículos que serve para
orientar as pessoas sobre a importância da acessibilidade na web.
Segundo a cartilha (W3C, 2011), a acessibilidade na web está compatível com os
conceitos que vimos sobre acessibilidade e é uma atividade complexa. E sugere a
consideração de alguns aspectos para abordar a complexidade do problema:
• A importância, abrangência e a universalidade da web: a web é um ambiente
multimídia, com várias possibilidades e muito abrangente. Segundo o W3C, uma
pessoa com deficiência deveria acessar a web em melhores condições, pois já
tem dificuldades em acessar as mesmas informações no mundo físico.
• Reciprocidade: a acessibilidade não é apenas uma questão de “mão única”, ou
seja, podemos ser induzidos a pensar que as pessoas são apenas receptoras.
 Segundo o W3C, a pessoa com deficiência também contribui para a web. Logo,
quanto mais pessoas puderem acessar, mais a web terá contribuições.
• Multiplicidade e diversidade de fatores envolvidos: a acessibilidade na web é
alcançada considerando-se uma série de fatores segundo o W3C:
o Conteúdo;
o Navegadores, ou agente do usuário;
o Tecnologia assistida: é a tecnologia usada por pessoas com deficiência e
mobilidade reduzida;
o Conhecimento do usuário para o uso da web;
o Desenvolvedores e usuários;
o Ferramentas da autoria;
o Ferramentas de avaliação.

Segundo a cartilha, a acessibilidade na web é “permitir que qualquer pessoa, usando

qualquer tecnologia de navegação, visite qualquer site e obtenha completo entendimento
das informações contidas nele, além de ter total habilidade de interação”. Ou seja, ter
um ambiente que não seja diferente para qualquer tipo de pessoa.
 CURIOSIDADE
Um exemplo de
acessibilidade e de que
não só a web, mas a
tecnologia em geral, é
usada em prol da
acessibilidade é a vida do
físico Stephen Hawking,
um dos mais consagrados
cientistas da atualidade.

Stephen usa um aparelho,

chamado Equalizer, o qual
fala as palavras por
Stephen por meio de suas
mãos. Com este aparelho,
Stephen consegue escrever
livros, ensaios e proferir
palestras pelo mundo.
Quando ele perdeu o
movimento das mãos,
passou a controlar o
aparelho por meio de sua
bochecha.
Assista ao vídeo a seguir,
o qual mostra o
funcionamento do
aparelho (e aprenda
também um pouco sobre o
que ele acha do universo):
5.3 A Web acessível
A partir de uma web acessível, vários cenários que poderiam ser impossíveis de ocorrer
se tornam viáveis, não só para pessoas com deficiência, mas para qualquer categoria de
usuário. Segundo a cartilha, podem ocorrer esses casos:
• Uma pessoa cega usando um leitor de telas pesquisando o site da Receita
Federal;
• Um usuário cego e sem braços procurando sua ex-professora em um sistema de
busca usando um programa de reconhecimento de voz para entrar comandos e
receber a resposta a partir do leitor de telas;
• Um usuário com paralisia cerebral e com dificuldades motoras usando o
computador com um dedo só e navegando nas redes sociais;
• Um usuário com deficiência motora usando um mouse adaptado fazendo
compras pela internet;
• Uma pessoa tetraplégica usando um ponteiro na cabeça procurando informações
sobre células-tronco em sites especializados;
• Um usuário com deficiência intelectual fazendo exercícios pela web para
melhorar sua comunicação;
• E outros.
Os exemplos anteriores são apenas poucas das situações que podem ocorrer envolvendo
acessibilidade e web. Portanto, precisamos encontrar mecanismos para ajudar nessas
situações.
5.4 Componentes essenciais para acessibilidade na Web
Segundo o WAI (Web Acessibility Iniciative) (W3C-WAI, 2013), a acessibilidade na
web depende de vários componentes trabalhando conjuntamente e melhorias em
componentes específicos. Estes componentes incluem:

COMPONENTE Descrição
A informação em uma página da web ou em
uma aplicação incluindo:
• o informação natural como textos, imagens
CONTEÚDO
e sons
• o código ou marcação que define estrutura,
apresentação, etc.
NAVEGADORES, PLAYERS DE E outros agentes de usuário
MÍDIA
 Em alguns casos, leitores de tela, teclados
TECNOLOGIA ASSISTIDA
alternativos, software de rastreamento, etc
Experiências e em alguns casos, estratégia
CONHECIMENTO DO USUÁRIO
adaptativas usando a web.
Projetistas, programadores, autores, etc.,
DESENVOLVEDORES incluindo desenvolvedores com deficiências e
usuários que contribuem com conteúdo.
SOFTWARES DE AUTORIA Softwares que criam web sites.
Ferramentas de avaliação de acessibilidade na
FERRAMENTAS DE
web, validadores de HTML, validadores de
AVALIAÇÃO
CSS, etc..

Figura 5.5 – Como os componentes estão relacionados.

A figura 5.5 mostra como os componentes citados estão relacionados: os

desenvolvedores normalmente usam softwares de autoria e ferramentas de avaliação
para criar conteúdo. Os usuários usam navegadores, players de mídia, tecnologias
assistivas ou outros agentes de usuário para acessar e interagir com o conteúdo.
As figuras a seguir mostram exemplos de tecnologias assistivas. A figura 5.6 mostra um
deficiente visual usando um leitor de tela para poder ler o que está sendo mostrado. A
figura 5.7 mostra um leitor de textos impressos. O leitor escaneia o texto impresso e o
traduz em voz alta para deficientes auditivos. A Figura 8 é um leitor de tela em Braille.
Neste dispositivo, o conteúdo impresso da página é transformado em caracteres Braille
para os deficientes visuais poderem ler.
 Figura 5.6 – Deficiente visual usando um leitor de tela

Figura 5.7 – Leitor de impressos

Figura 5.8 – Leitor de Braille

5.4.1 Interdependência entre componentes

Existe uma interdependência significativa entre os componentes, ou seja, os
componentes devem trabalhar conjuntamente, com o objetivo de deixar a web acessível.
Por exemplo, para um texto alternativo nas imagens:
 CONCEITO
Texto alternativo TÉCNICAS
nas Estabelecem textos alternativos (por exemplo,
ESPECIFICAÇÕES
o HTML define o atributo alt na tag img)
imagens: em HTML, na
A WAI apresenta alguns guias que definem
tag para GUIAS DAexiste
imagens WAI como implementar os textos alternativos para
acessibilidade nos diferentes componentes.
uma opção de usarmos um
Fornecem as palavras apropriadas para se
texto DESENVOLVEDORES
alternativo, por colocar no texto alternativo.
exemplo: Possibilitam, facilitam e promovem o texto
FERRAMENTAS DE AUTORIA
alternativo em uma página.
<img FERRAMENTAS
src="smiley.gif"DE São usadas para ajudar a checar quais textos
alt="SmileyAVALIAÇÃO
face"> alternativos existem.
Fornecem interface humana para o texto
Esta AGENTES DE USUÁRIO
tag posiciona uma alternativo.
figura na tela e, quando o Fornecem os textos alternativos em várias
TECNOLOGIAS ASSISTIVAS
modalidades
mouse for colocado sobre
Sabem como pegar o texto alternativo do
USUÁRIOS
a figura, irá aparecer o agente do usuário e/ou tecnologia assistiva.
texto “Smiley face”. No
caso da acessibilidade, 5.4.2 O ciclo de implementação
como o deficiente visual Quando as características de acessibilidade são
não vê a imagem, o texto implementadas efetivamente em um componente,
alternativo é impresso no possibilita a implantação nos outros componentes .
leitor de tela

 Quando os navegadores, players de mídia, tecnologias assistivas e outros agentes

de usuário suportam uma característica acessível, os usuários ficam mais
 propensos a demandar esta característica, e os desenvolvedores ficam mais
propensos a implementá-la no conteúdo.
 Quando os desenvolvedores querem implementar um recurso de acessibilidade
em seu conteúdo, eles são mais propensos a exigir que a sua ferramenta de
criação torne a implementação mais fácil.
 Quando as ferramentas de criação tornam um recurso fácil de ser implementado,
os desenvolvedores ficam mais propensos a implementá-lo em seu conteúdo.
 Quando um recurso de acessibilidade é implementado no conteúdo,
desenvolvedores e usuários ficam mais propensos a exigir que os agentes de
comecem a apoiá-lo.
Se um componente de acessibilidade não é implementado em um componente, há uma
pequena motivação para o outro componente implementá-lo quando não resulta em uma
experiência do usuário acessível. Por exemplo, desenvolvedores não são propensos a
implementar uma característica de acessibilidade que as ferramentas de autoria não
suportam e que a maioria dos navegadores ou tecnologia assistiva não implementa
consistentemente.
Se um componente de acessibilidade tem um suporte ruim, algumas vezes outros
componentes podem compensar por meio de um “work around”, que requer muito mais
esforço e não é tão bom para acessibilidade no geral.
Por exemplo:
 Desenvolvedores podem ter mais trabalho para compensar alguma falta de
suporte à acessibilidade em ferramentas de autoria, por exemplo, programando
diretamente em HTML em vez de usar uma ferramenta.
 Usuários podem ter mais trabalho para compensar alguma falta de suporte de
acessibilidade nos navegadores, players de mídia e tecnologia assistiva e falta de
acessibilidade de conteúdo, por exemplo, usando diferentes navegadores ou
tecnologias assistivas para superar as diferentes questões de acessibilidade.
No entanto, na maioria dos casos, esses “work-arounds” não são implementados, e o
resultado ainda é uma fraca acessibilidade. Além disso, por vezes, um suporte ruim de
acessibilidade em um componente não pode ser razoavelmente ultrapassado por outros
componentes, e o resultado é a inacessibilidade, o que torna impossível para algumas
pessoas com deficiência a usar um determinado site, página ou recurso.
5.5 Projeto e desenvolvimento de um site acessível
A elaboração de um site acessível é um assunto bastante amplo. A amplitude está
relacionada com alguns fatores, como se o site vai ser acessível por realmente se
importar com pessoas portadoras de necessidade especial ou se é por alguma imposição
da empresa ou até mesmo para se atingir um novo público.
Vamos estudar alguns pontos técnicos que podem ajudá-lo a criar um site acessível e
ajudá-lo no projeto de um site deste tipo segundo (POPLADE, 2010):
Veja a primeira linha de um site:
1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br”>

Veja que usamos a tag xml: lang e lang. E definimos um idioma para elas.

Estas tags são importantes porque dizem ao leitor de tela qual é a linguagem que deve
ser “falada” e instrui corretamente o leitor de tela para usar os codecs corretos.
Outra tag importante para a acessibilidade é a tag meta. Veja o exemplo:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
O charset presente na tag informa ao navegador qual é a codificação da página. No caso
do Brasil, a codificação “ISO-8859-1” caracteriza os caracteres em português e também
auxiliam o leitor de tela com a correta leitura das palavras presentes na página.
Outra tag importante é a <title>. Ela pode gerar uma certa polêmica, pois também é
usada pelo leitor de tela para poder informar o título da página, mas também é usada
pelos indexadores a posicionar melhor a página nos mecanismos de pesquisa. Sendo
assim, ocorre uma dúvida. O que é melhor: prezar pela acessibilidade ou por uma
melhor colocação nos mecanismos de pesquisa? O melhor é escrever um título que seja
claro e coerente sem excluir as palavras-chave da página.
O atributo rel da tag <link> também é usado nos sites acessíveis. Quando arquivos
externos são linkados à página, é importante para os leitores de tela determinarem o tipo
de arquivo ou página externa que está sendo vinculado.
O normal deste atributo é usar o valor “stylesheet”, utilizado para os arquivos CSS. Os
valores também podem ser “content”, indicando conteúdo, “prev” para páginas
anteriores e “next” para as páginas posteriores.
A tag <body> também precisa de alguma atenção. Já comentamos que, na tag <img>, o
atributo alt é importante para os leitores de tela substituírem as imagens pelas suas
descrições. Portanto, usar textos intuitivos nestas descrições, inclusive para o caso de a
imagem não ser carregada corretamente.
Nos links, recomenda-se usar o atributo title na tag <a> com textos intuitivos e claros
que mostram o destino do usuário ao clicar no link, e não somente com a descrição
“clique aqui”, por exemplo. Outros atributos importantes para a acessibilidade
relacionados com essa tag são o tabindex e o accesskey. O primeiro atributo faz com
que uma ordem seja estabelecida nos elementos da página, quando a tecla tab é
pressionada e a segunda cria uma tecla de atalho para o elemento.
Outro detalhe para os deficientes visuais é usar a tag <noscript> nos scripts. Desta
forma, o deficiente visual não precisará ouvir todas as linhas de código dos scripts da
página.
Existem outros fatores técnicos que podem estar presentes em um site acessível.
Mostramos alguns; outros podem ser incorporados mediante as recomendações do
W3C, como veremos no próximo tópico.
5.5.1 Recomendações do W3C
O W3C tem um documento (W3C, 2008) que contém recomendações e diretrizes para
se construir um site acessível. Ao seguir estas recomendações, o conteúdo acessível
poderá atingir um maior número de pessoas com deficiências, das mais variadas formas.
O documento está dividido em 4 princípios e cada um contendo uma ou mais diretrizes.
Os princípios são:

5.5.1.1 Princípio 1 - Percepção

Os componentes de informação e interface de usuário devem estar presentes para os
usuários em modos que eles possam visualizá-los.
As diretrizes deste princípio são:
Forneça alternativas em texto para qualquer
conteúdo não textual, de forma que ele possa
ALTERNATIVAS EM TEXTO ser transformado em outros formatos
necessários para as pessoas, como letras
grandes, braile, fala e linguagem mais simples.
MÍDIA BASEADA NO TEMPO Forneça alternativas para este tipo de mídia.
Esta diretriz refere-se a mídias que são
transmitidas principalmente em tempo real. O
W3C recomenda que algum tipo de texto
 acompanhe o áudio ou o vídeo transmitido.
Crie conteúdo que possa ser apresentado em
formas diferentes (por exemplo em um layout
ADAPTAÇÃO
mais simples) sem perder a informação ou
estrutura
Torne mais fácil para o usuário ver e ouvir o
conteúdo, incluindo as separações entre o
DISTINGUÍVEL
primeiro e segundo plano. A cor não é usada
como o único recurso visual. Use alternativas

5.5.1.2 Princípio 2: Operável

Os componentes de interface do usuário e navegação devem estar operáveis.
As diretrizes para este princípio são:

Faça toda a funcionalidade do site ser acessada

TECLADO ACESSÍVEL
pelo teclado..
Forneça tempo suficiente para os usuários
TEMPO DISPONÍVEL
lerem e usarem o conteúdo.
Não crie conteúdo de uma forma que pode
causar convulsões. Algumas pessoas com
distúrbios convulsivos podem ter uma
CONVULSÕES
convulsão desencadeada por algum conteúdo
piscando na tela. Muitas pessoas desconhecem
ter este problema até que elas tenham de fato.
Forneça modos para auxiliar os usuários a
NAVEGÁVEL navegarem pelo site, procurar conteúdo, e
determinar onde eles estão.

5.5.1.3 Princípio 3: Entendível

A informação e a interface com o usuário devem ser entendíveis.
As diretrizes para este princípio são:

Faça com que o texto seja lido e entendido sem

LEGÍVEL
problemas.
Faça com que as páginas apareçam e
PREVISÍVEL
funcionem de maneira previsível.
ASSISTÊNCIA DE ENTRADAS Ajudar os usuários a evitar e corrigir erros
5.5.1.4 Princípio 4: Robusto
O conteúdo deve ser robusto o suficiente para que ele possa ser interpretado de forma
confiável por uma grande variedade de agentes de usuário, incluindo tecnologias
assistivas.
Este princípio só tem uma diretriz:
Maximizar a compatibilidade com agentes de
COMPATÍVEL usuários atuais e futuros, incluindo as
tecnologias assistivas.

Uma vez que verificamos como podemos criar sites acessíveis, é interessante também
testar e validar a acessibilidade do site.
5.5.2 Métodos e validadores de acessibilidade na web
Existem basicamente duas formas de se verificar a acessibilidade de um site na internet:
automaticamente e pela forma direta. Embora os métodos automáticos sejam vantajosos
no sentido de rapidez, eles não conseguem atender a todos os requisitos de
acessibilidade. A maneira direta é quando o próprio usuário verifica a acessibilidade, e
a maneira automática é quando usamos algum software para isso.
A figura 5.9 mostra os selos dos validadores automáticos do W3C. O W3C tem algumas
ferramentas que conectam no site-alvo e fazem uma varredura buscando algum tipo de
inconformidade com os padrões usados. Caso não haja inconformidade o site pode
colocar o selo específico no seu conteúdo e indicar que o site passou nos padrões do
W3C.
Na figura 5.9 temos os seguintes selos de validação:
Valida o site de acordo com os padrões da
HTML 4.01
linguagem HTML 4.01
Valida o site de acordo com os padrões de
XHTML 1.0 E 1.1
XHTML nas versões 1.0 e 1.1.
Valida o site de acordo com os padrões de
WAI-A, acessibilidade do W3C, nível A, duplo A, triplo
WAI-AA, A respectivamente, que compatibilizam com as
WAI-AAA Prioridades 1, 2 e 3 das diretrizes do W3C para
acessibilidade.
Valida o site de acordo com os padrões
RSS VALID
estabelecidos para as notificações RSS.
Validador brasileiro do guia Acessibilidade
AAA APROVADO
Brasil.
Valida o site de acordo com os padrões de CSS
W3C CSS
do W3C
 Figura 5.9 – Selos de validadores do W3C
Quanto à validação humana, esta deve ajudar a verificar a clareza da linguagem, o bom
uso dos equivalentes em texto e a facilidade de navegação e usabilidade, por exemplo.
Com relação aos métodos automáticos, são eles, segundo (QUEIROZ, 2008):
1. Usar uma ferramenta de acessibilidade automatizada, porém algumas questões
de acessibilidade não são possíveis de serem verificadas por um software e
necessitam ser verificadas pela forma humana.
2. Validar a sintaxe do código.
3. Validar as folhas de estilo (CSS).
4. Usar um analisador de contraste de cores para assegurar a boa visibilidade do
site, até mesmo por pessoas com deficiências visuais.
5. Usar um navegador só de texto como o Lynx ou um emulador. Esses
navegadores não carregam os scripts em javascript e imagens forçando o usuário
a usar principalmente o teclado.
6. Utilizar vários navegadores como o Internet Explorer, Google Chrome, Mozilla
Firefox, Safari, Opera etc., principalmente para aferir e verificar o
comportamento:
 a. Som
b. Desativar as imagens do navegador
c. Sem som
d. Sem mouse
e. Sem carregar frames
7. Usar vários navegadores, recentes e mais antigos.
8. Usar um leitor de tela e verificar se ele lê a página corretamente, utilizar um
ampliador de tela, tela de dispositivo móvel.
9. Usar corretores ortográficos e gramaticais.
10. Rever o documento para verificar sua clareza e simplicidade.
11. Pedir para uma pessoa portadora de necessidades especiais para verificar o site.
Estes usuários são muito importantes para a validação geral do site, tanto na
parte de conteúdo quanto na parte dos recursos de acessibilidade presentes no
site e facilidade de uso.

Lembre-se, que o selo de validação é importante. Não deixe de validar o seu site.
Muitos programadores e desenvolvedores deixam de fazer esta tarefa e, quando passam
por algum validador, acabam se espantando com o resultado.
Outros, colocam os selos de validação com o site não validado. Se não for validado, não
coloque! Não há desculpa para não validar um site. E tenha sempre um cuidado especial
com a validação de acessibilidade.

GLOSSÁRIO
CSS Cascade Style Sheet
HTML Hypertext Markup Language
RSS Really Simple Syndication
W3C World Wide Web Consortium
WAI Web Acessibility Iniciative
XHTML Extensible Hypertext Markup Language
 ATIVIDADES
01. O que é tecnologia
assistiva?
02. Pesquise e responda:
O que é a Web
Acessibility Iniciative? LEITURA
03. Qual é a importância Sobre acessibilidade, é
do W3C para a web? praticamente obrigatória a
04. Acesse o site
REFLEXÃO leitura dos documentos do
www.acessibilidadelegal.c
Parece que a situação que W3C sobre padrões de
om. Quais nos
vivemos os elementos
remete dea web e acessibilidade:
acessibilidade
consumir cada encontrados
vez mais, e  Grupo de trabalho do
no
issosite?
se reflete na internet. W3C e acessibilidade:
05. Sitesestão
Os sites acessíveis são
cada vez http://www.w3c.br/GT
necessariamente
mais interativos feios,e /GrupoAcessibilidade
sem cores e imagens?
chamativos. Temos  Cartilha de
tecnologias super legais, acessibilidade na web:
como os bancos de dados http://www.w3c.br/Ma
não relacionais, novos teriais/PublicacoesW3
frameworks na área de C
front end, como  Site excelente sobre
AngularJS, NodeJs, acessibilidade com
Material Design, e várias vários materiais:
outras tecnologias que http://www.acessibilid
encantam quem adelegal.com/
desenvolve para web.  Acessibilidade virtual:
Porém, na questão da http://acessibilidade.be
acessibilidade em relação nto.ifrs.edu.br/acessibi
a todo esse avanço, será lidade-web.php
que quem promove todas  Site do Maujor: site do
essas tecnologias, bem Maurício Samy Silva,
como incita outros a com muitos materiais
usarem e consumirem, sobre desenvolvimento
também está preocupado para web e vários
com o acesso daqueles que sobre acessibilidade:
portam algum tipo de http://www.maujor.co
necessidade especial? m/w3c/introwac.html