A
necessidade da const rução usuários se sentem satisfeitos e seguros
de uma interface amigável ao
usuário é fundamental em um
sistema. É o canal de comunicação entre
o homem e computador, no qual são
feitas as interações visando atingir um
objetivo comum.
A interface faz parte do sistema com-
putacional e determina como as pessoas
operam e controlam o sistema. Quando
uma interface é bem projetada, ela é com-
preensível, agradável e controlável. Os
ao realizar suas ações. A importância
da interface se torna evidente, pois to-
dos somos usuários e alguns aspectos
reforçam esta importância, tais como:
i) disseminação do uso de sistemas e
equipamentos como celulares; ii) au-
mento da complexidade dos sistemas;
iii) preocupação com a qualidade do
software de acordo com a característica
da usabilidade (conforme as definições
da Norma ISO/IEC 9126-1).
 Os objetivos da Interação Humano–Computador (IHC) são
os de produzir sistemas usáveis, seguros e funcionais. Esses
objetivos podem ser resumidos como desenvolver ou melhorar
a segurança, utilidade, efetividade e usabilidade de sistemas
que incluem computadores. Nesse contexto, o termo sistemas
se refere não somente ao hardware e software, mas a todo o
ambiente que usa ou é afetado pelo uso da tecnologia compu-
tacional. Durante o projeto de interface é necessário que se faça
uma análise mais detalhada, como especificação de requisitos,
módulo de qualidade e perfil dos usuários.
A participação do usuário durante o processo de desenvol-
vimento da aplicação é de extrema importância, pois ajuda a
diminuir os erros, propicia a maior interação e entendimento
do usuário, cativa a curiosidade e interesse e, por fim, ajuda
a ter maior aceitação do produto, pois eles fizeram parte de
todo o processo de desenvolvimento, ou seja, se sentem “do-
nos” do mesmo.
Neste contexto, este artigo tem como objetivo apresentar
o desenvolvimento de um website utilizando os principais
conceitos de usabilidade e avaliação presentes em interface
homem-máquina. Para isto, foi desenvolvido um website para
o projeto AME – Construção da Identidade da Cidade de Va-
lença/RJ e Desenvolvimento do Programa Turistico, Histórico
e Cultural da Região.
Desta forma, este artigo aborda a apresentação dos conceitos
de Interface Homem-Máquina, princípios de Design, as ativi-
dades básicas do Design de Interação, as dez heurísticas de
Usabilidade de Nielsen e Avaliação de Interface.
IHC tem por objetivo principal fornecer aos pesquisadores
e desenvolvedores de sistemas explicações e previsões para
fenômenos de interação usuário-sistema e resultados práti-
cos para o design da interface de usuário. É o conjunto de
características com o qual os utilizadores interagem com as
máquinas, dispositivos, programas de computador ou alguma
outra ferramenta complexa (ler Nota 1).
IHC é uma área multidisciplinar que envolve as áreas de
Ciências da Computação, Psicologia, Fatores Humanos, Lin-
guística, dentre outras. Não é uma disciplina essencialmente
voltada para o estudo de computação ou do ser humano,
mas para a comunicação entre essas duas entidades. Reu-
nir tantas pessoas com formações e treinamento diferentes
significa muito mais ideias sendo geradas, novos métodos
sendo desenvolvidos e designs mais criativos e originais
sendo produzidos.
Interface e Interação
A interface pode ser conceituada como o componente da
arquitetura do software interativo com o qual o usuário tem
contato. Como exemplos de interfaces citam-se telas visíveis
dos sites, mensagens sonoras (como as dos sistemas de atendi-
mento em bancos), os visores e os teclados de celulares. Se bem
projetada, a interface pode se tornar uma fonte de motivação
e, ainda, dependendo de suas características, uma grande
ferramenta para os usuários. Do contrário, porém, pode se
transformar em fator decisivo para a rejeição do sistema.
 Interação é um processo de comunicação que envolve um
ciclo contínuo de interpretação e ação entre os usuários e
sistemas interativos. Ferramentas computacionais específicas
e ambientes de programação permitem construir protótipos
rápidos como as ferramentas de auxílio ao design de produtos
industriais. Muitas pessoas usam vários produtos eletrôni-
cos, como os fornos de microondas, telefones, entre outros.
Profissionais das mais diferentes áreas têm contribuído
significativamente para todo esse desenvolvimento, e dentre
estes pode-se destacar: Designers de software, Desenvolve-
dores de Hardwares, Desenvolvedores na área de Tecnologia
Educacional, Designers Gráficos, Sociólogos, Antropólogos,
Filósofos entre outros.
Design é uma atividade prática e criativa, cujo objetivo final
consiste em desenvolver um produto que ajude os usuários a
atingir suas metas.
Norman (1988), partindo da experiência de observar e viven-
ciar as frustrações que as pessoas experimentam com objetos
do cotidiano que não conseguem saber como usar, como em-
balagens que parecem impossíveis de serem abertas, portas
que parecem uma armadilha, máquinas de lavar e secadoras
que têm se tornado cada vez mais poderosas e confusas, iden-
tifica alguns princípios básicos de um bom design. Princípios
de Design são também abstrações generalizáveis destinadas a
orientar os designers a pensar sobre os aspectos diferentes do
seu projeto. E resume-se a “o que utilizar” e “o que evitar”.
Alguns princípios fundamentais de design são a visibilidade,
feedback, affordance e restrição.
Visibilidade
O usuário deve saber dizer o estado em que se encontra um
dispositivo e as opções de ação apenas olhando para ele.
A Figura 1 demonstra o menu, com seu respectivo sub-menu,
onde as opções ficam claras para o usuário encontrar o que
ele deseja.
Feedback
O Feedback (retorno) está relacionado ao conceito de visibili-
dade. Na sua interação com o mundo, as pessoas necessitam
continuamente perceber, interpretar e avaliar o resultado de
suas ações. A interface deve enviar de volta ao usuário infor-
mação sobre o que foi efetivamente realizado. O mesmo deve
receber um feedback contínuo e completo sobre os resultados
de suas ações, ou seja, um retorno de informações a respeito
de que ação foi feita e do que foi realizado.
Ao utilizar feedback da maneira correta, pode-se propor-
cionar a visibilidade necessária para a interação do usuário.
A Figura 2 esboça uma tela de retorno confirmando a ação
realizada pelo usuário.
É um termo utilizado para se referir ao atributo de um ob-
jeto que permite às pessoas saber como utilizá-lo (Preece et.
al., 2005).
Pode-se entender também que affordance é a qualidade de
um objeto, ou de um ambiente, que permite que o indivíduo
realize uma ação. Por exemplo, uma maçaneta redonda de
porta convida o usuário a girá-la. Um exemplo de affordance é
apresentado na Figura 3.
Restrições
Refere-se a restringir as ações que não podem ser realizadas.
Esse princípio impede a seleção de opções incorretas e reduz
a chance de erros.
O conceito de restrições refere-se à determinação das for-
mas de delimitar o tipo de interação que pode ocorrer em um
determinado momento. A Figura 4 apresenta um exemplo
de restrição com relação aos jogos. Um usuário só pode jogar
caso esteja logado.
Designs alternativos precisam ser gerados, captados e avalia-
dos pelos usuários. Para que a avaliação seja bem sucedida, o
design deve ser expresso de uma forma com a qual os usuários
possam interagir.
Uma das formas usadas também para criar os designs de
interação é o conhecimento dos seus usuários. Identificar os
usuários pode parecer uma atividade bastante simples, mas
na verdade há muitas interpretações para o termo “usuário”.
A definição mais óbvia diz respeito àqueles indivíduos que
interagem diretamente com o produto a fim de realizar uma
tarefa, o problema é que há um conjunto surpreendentemente
grande de indivíduos que têm uma participação (stake) no de-
senvolvimento de um produto bem-sucedido. Essas pessoas
são chamadas stakeholders.
 As quatro atividades básicas do Design de Interação são:
identificar as necessidades e estabelecer requisitos, desenvolver
designs alternativos, construir versões interativas dos designs
e avaliar designs.
Identificando necessidades e estabelecendo requisitos
Para se identificar as necessidades dos usuários, deve-se
primeiramente saber quem são os usuários, ou seja, quem
usa o sistema ou quem tem relação direta com quem usa,
por exemplo, superiores ou subordinados, clientes, etc. Ou-
tro ponto é saber quais são as suas “necessidades”, todo o
apoio computacional que um sistema pode oferecer para as
atividades do usuário, relacionado com as atividades atuais
do cliente ou relacionado com as novas oportunidades que o
sistema pode criar.
De forma geral, nessa etapa o que se tem a fazer é:
o contexto de uso, suas capacidades cognitivas, seu conheci-
mento prévio sobre o domínio, sistemas similares, tecnologia,
entre outros.
o sistema deve fazer e como fazer.
Segundo Preece et. al. (2005), para projetar algo que realmente
dê suporte às atividades das pessoas, deve-se conhecer quem
são os usuários-alvo e que tipo de suporte um produto inte-
rativo poderia oferecer de maneira útil. Essas necessidades
constituem a base dos requisitos do produto e sustentam o
design e os desenvolvimentos subsequentes.
Desta forma, pôde-se constatar que os usuários deste projeto
(AME) são bem diversificados. Por se tratar de um projeto
histórico de um município, considera-se que toda a população
fará uso do mesmo. Assim, a interface deve ser amigável e
bem simplificada.
Desenvolvendo alternativos
A primeira pergunta que se faz nessa etapa, é: “De onde
vêm as alternativas?”. Humanos tendem a optar pelo que eles
sabem que funciona. Designers são treinados para considera-
rem alternativas.
As formas mais comuns de se gerar alternativas são: pesqui-
sas e sínteses, busca por inspiração, olhar produtos similares
e produtos diferentes. Ou seja, captar inspirações em sistemas
similares é uma das formas de se gerar as alternativas. A cria-
tividade do desenvolvedor é outra forma.
Essa atividade pode ser dividida em duas sub-atividades:
design conceitual e design físico. A primeira envolve produzir
o modelo conceitual para o produto, onde se descreve o que
produto deveria fazer, como se comportar e com o que parecer.
A segunda considera detalhes como cores, sons e imagens,
design do menu e design de ícones.
Construindo versões interativas dos
Nesta fase é pensado em como representar as versões,
podendo ser por meio de esboços ou maquetes, e também
de protótipos (de baixa ou de alta fidelidade, parciais ou
completos).
Protótipo pode ser um esboço de papel de uma tela
ou conjunto de telas, uma “fotografia” eletrônica, uma simu-
lação em vídeo de uma tarefa, uma maquete tridimensional,
de papel ou de cartolina.
Conforme o nome da etapa diz, as versões devem ser in-
terativas. A maneira mais sensata de os usuários avaliarem
tais designs é, portanto, interagir com eles, o que requer uma
versão interativa dos designs a serem construídos, embora isso
não signifique que seja necessária uma versão em software.
Existem técnicas diferentes para atingir a “interação”, sendo
que nem todas exigem uma parte do software funcionando.
Por exemplo, protótipos em papel são rápidos e baratos, além
de muito eficazes para a identificação de problemas contidos
nos primeiros estágios do design.
Como exemplo, durante o projeto AME, foram desenvol-
vidas 4 (quatro) versões representadas pela Figura 5. No
projeto em questão, para o desenvolvimento das versões
interativas, utilizou-se o programa Photoshop. Para a criação
da parte lógica do site (cadastro de usuários, login, jogos) foi
utilizada a linguagem PHP em conjunto com o framework
JQuery. JQuery foi utilizado para que o site se tornasse
mais dinâmico e, consequentemente, mais atraente para o
usuário, possibilitando diversos tipos de animação, como
o girar das cartas no jogo da memória e o arrastar e soltar
de quebra-cabeça.
Avaliando
A avaliação diz respeito ao processo de determinar a usabi-
lidade e a aceitabilidade do produto ou do design. É medida
por meio de vários critérios, incluindo o número de erros que
os usuários cometem, se o design ou o produto são atraentes,
se preenchem os requisitos, e assim por diante. O design de
interação exige um alto nível de participação do usuário du-
rante seu desenvolvimento, o que aumenta as chances de se
entregar um produto aceitável.
 As atividades de design alternativos, construção de versões
interativas e de avaliação estão entrelaçadas: os esboços são
avaliados por meio de versões interativas dos designs, e os
resultados são utilizados para alimentar designs futuros.
Este processo todo foi documentado pela equipe do site e, a
seguir, são esboçados alguns comentários dos usuários com
relação à avaliação de designs.
Com relação ao layout 2 apresentado na Figura 5, foi dito
como sendo o estilo mais limpo. Foi sugerido que, ao abrir o
site, aparecessem várias imagens, alterando pelos menos umas
três imagens. Já em relação ao layout 3, achou-se a cor muito
pesada. O layout 3 foi criticado pelo fato da tela ter ficado muito
pequena. E por fim, foram feitas algumas observações sobre
os espaçamentos das logomarcas.
São 10 itens para a avaliação da usabilidade de um site, com
intuito de evitar erros comuns. As heurísticas foram baseadas
em 294 tipos de erros de usabilidade que Nielsen comumente
encontrava em suas análises, e que podem prejudicar e muito
a experiência do usuário em um site. Uma avaliação heurística,
ao pé da letra, é feita por no mínimo 3 e no máximo 5 profis-
sionais especializados nesse tipo de avaliação. Mesmo que
você não seja nenhum analista de usabilidade, checar esses
itens com certeza irá tornar a experiência do usuário em sua
interface uma experiência menos frustrante. As 10 heurísticas
de Nielsen são normas bem aceitas na comunidade acadêmica,
definidas a seguir.
Status do Sistema Claramente Visível
O sistema deve manter os usuários informados sobre o que
está acontecendo, fornecendo feedback adequado, dentro de um
tempo razoável. Isso significa que precisa se certificar de que
a interface sempre informe ao usuário o que está acontecendo,
ou seja, todas as ações precisam de retorno instantâneo para
orientá-lo, conforme visto anteriormente.
Correspondência entre Sistema e Mundo Real
O sistema deve usar a linguagem do usuário, com palavras,
expressões e conceitos que lhe são familiares, em vez de uti-
lizar termos orientados ao sistema. O projetista deve seguir
as convenções do mundo real, fazendo com que a informação
apareça em uma ordem natural e lógica.
Toda a comunicação do sistema precisa ser contextualizada
ao usuário, e ser coerente em situações inesperadas.
Liberdade e Controle para o Usuário
Os usuários frequentemente escolhem funções do sistema por
engano e precisam de uma “saída de emergência” claramente
marcada para sair do estado indesejado sem ter que percorrer
um diálogo extenso. A interface deve permitir que o usuário
desfaça ou refaça suas ações, quando estiver perdido ou em
situações inesperadas, conforme exemplificado na Figura 6. A
cada página visitada pelo usuário o caminho percorrido fica
registrado no cabeçalho do site.
Consistência e Padronização
Os usuários não devem ter que se perguntar se palavras, situ-
ações ou ações diferentes significam a mesma coisa. O projetista
deve seguir as convenções da plataforma / ambiente.
Tratar coisas similares, da mesma maneira, facilitando a
identificação do usuário, são ações de uma boa Consistência
e Padronização.
Prevenção de Erros
Melhor que uma boa mensagem de erro é um projeto cuidadoso
que evite que um problema ocorra. Onde for possível, deve-se
impedir a ocorrência de erros. Por exemplo, se o campo CPF for
somente números, informar ao usuário anteriormente isto na tela.
Não espere ele digitar números e pontos para posteriormente
informá-lo. Conforme é esboçado na Figura 7, o campo senha
tem uma pré-condição. A senha deve ter no mínimo 5 caracteres.
Portanto, ao invés de esperar o usuário digitar uma senha menor
do que 5 caracteres e clicar em Cadastrar, para posteriormente
apresentar a mensagem informando que a senha deve ser maior
do que 5, é relevante informar ao usuário esta condição.
Reconhecer ao Invés de Decorar
O projetista deve tornar os objetivos, as ações e opções visí-
veis. O usuário não deve ter que se lembrar de informação de
uma parte do sistema quando tiver passado para outra parte
da aplicação. Da mesma maneira, o usuário não deve ter que
se lembrar para que serve um elemento de interface cujo ícone
não é reconhecido diretamente.
As instruções de uso do sistema devem estar visíveis e
facilmente acessíveis sempre que necessário, evitando que o
usuário precise acionar a memória o tempo inteiro, fazendo
com que cada ação precise ser revista mentalmente antes de
ser executada. Deve-se permitir que a interface ofereça aju-
da contextual, e informações capazes de orientar as ações do
usuário, ou seja, que o sistema dialogue com o usuário.
Flexibilidade e Eficiência de Uso
 Fornece aceleradores imperceptíveis aos usuários novatos,
geralmente tornam as interações de usuários avançados mais
rápida, permitindo que o sistema consiga servir igualmente bem
esses dois tipos de usuários. O projetista deve prover mecanismos
que permitam aos usuários customizar ações frequentemente
realizadas.
O sistema precisa ser fácil para usuários leigos, mas flexível o
bastante para se tornar ágil a usuários avançados. Essa flexibilida-
de pode ser conseguida com a implementação de teclas de atalhos,
por exemplo. No caso de websites, uso de máscaras e navegação
com tab em formulários são outros exemplos.
Minimalista e Estético
Os diálogos não devem conter informações que sejam irrelevan-
tes ou raramente necessárias. Cada unidade extra de informação
de um diálogo compete com as suas unidades relevantes de
informação e reduz sua visibilidade relativa.
Os diálogos do sistema precisam ser simples, diretos e naturais,
presentes nos momentos em que são necessários. Os textos e design
devem falar exatamente o que o usuário necessita saber.
Este foi um fator inspirador para o desenvolvimento do website
deste projeto, que procurou ser o mais minimalista possível na
criação das interfaces.
Apoio para o usuário reconhecer, diagnosticar e consertar erros
As mensagens de erro devem ser expressas em linguagens
simples (sem códigos) ao invés de intimidar o usuário com o
erro. Deve, ainda, indicar precisamente o problema e sugerir uma
solução de forma construtiva.
Ajuda e Documentação
Embora seja melhor que um sistema possa ser utilizado sem
documentação, é necessário prover ajuda e documentação de
alta qualidade. Informações documentais devem ser facilmente
encontradas, focadas na tarefa do usuário, enumerar passos con-
cretos a serem realizados, e não serem muito extensos.
A avaliação é muito importante dentro do processo de design, o
que deve ocorrer em todo o ciclo de vida do produto. As técnicas
de modelagem e construção de protótipos garantem que o projeto
esteja em constante avaliação.
Um dos “planos” de avaliação são as críticas dos usuários
quanto aos layouts oferecidos, determinar o estágio do design,
saber orçar os custos dos produtos, os testes, tempo disponível e
experiência dos designers e avaliadores, são fatores fundamentais
dentro da avaliação.
Com relação a testes, é sempre necessário manter certo grau de
incerteza. Para o ser humano (usuário) nada é perfeito, nada é tão
preciso quanto se imagina.
Existem vários motivos para se utilizar os conceitos de Avaliação
no desenvolvimento de uma aplicação como, por exemplo, fazer
avaliação para conhecer o que os usuários querem e os proble-
mas que eles enfrentam. Essas avaliações servem também para
responder dúvidas que surgem durante o processo de design e
desenvolvimento de um produto, para que em muitos pontos do
processo de design os desenvolvedores possam verificar se suas
ideias são realmente as que os usuários precisam, ou querem.
Um dos grandes objetivos dessa metodologia é a de avaliar a
funcionalidade do sistema, isto é, criar tarefas fáceis e eficientes,
onde servirá para medir a “relação” do usuário junto ao sistema.
Avaliar a usabilidade do sistema por meio da interface e iden-
tificar os problemas específicos do sistema, ou seja, inutilizar
funções ou ações que causem reações inesperadas ou confusão
entre os mesmos. Além de testar o desempenho e a integridade
das informações, a usabilidade é algo que deve ser sempre acom-
panhada por uma equipe especializada, que enxerga e avalia da
forma que o cliente vê. Avaliações são muito importantes para
um bom funcionamento, e para que o sucesso junto ao usuário
esteja garantido no final do processo.
Caso o leitor queira mais detalhes de Avaliação de Interfaces,
o artigo Modelos de Avaliação de Interfaces, da 18ª edição da
Engenharia de Software Magazine, apresenta mais informações
sobre o assunto.
Sem dúvida, a avaliação da IHC constitui tema complexo e
que não se esgota nos assuntos aqui tratados. Afinal, quando se
fala de avaliação da IHC, refere-se não só a métodos e critérios
mais tradicionais, como também a estudos que se encaminham
para novos rumos, incorporando elementos reais de avaliação
de interfaces computacionais e, ainda, parâmetros para defi-
nição dessas interfaces.
Os sistemas de IHC permitem uma aproximação entre o mun-
do da automação e o utilizador. Dada a crescente complexidade
dos processos modernos, a capacidade de ter uma visão clara
do todo é cada vez mais importante. Portanto, a participação
efetiva do usuário no processo de desenvolvimento de sof-
tware é vital para o desenvolvimento de um sistema. Com ela
é possível ter gerenciamento de expectativas, sem surpresas
ou decepções, treinamento antecipado, comunicação e não
marketing. Outros benefícios são referentes ao sentimento de
propriedade, usuários como participantes ativos e mais pro-
pícios a perdoar ou entender problemas.
Contudo, após vários estudos a fundo sobre IHC conclui-se que
desenvolver sites sem o uso destes conceitos, é algo que poderá
arriscar o trabalho, e causar problemas com os usuários. Desta
forma, é imprescindível o uso das heurísticas, princípios de
design e a participação dos usuários para que um projeto tenha
uma boa repercussão. Após a aplicação de todos os conceitos
no processo de desenvolvimento do site apresentados acima, a
interface 2 da Figura 5 foi a escolhida e adotada no projeto, além
da utilização dos conceitos aqui apresentados.