A

necessidade da const rução usuários se sentem satisfeitos e seguros

de uma interface amigável ao ao realizar suas ações. A importância
usuário é fundamental em um da interface se torna evidente, pois to-
sistema. É o canal de comunicação entre dos somos usuários e alguns aspectos
o homem e computador, no qual são reforçam esta importância, tais como:
feitas as interações visando atingir um i) disseminação do uso de sistemas e
objetivo comum. equipamentos como celulares; ii) au-
A interface faz parte do sistema com- mento da complexidade dos sistemas;
putacional e determina como as pessoas iii) preocupação com a qualidade do
operam e controlam o sistema. Quando software de acordo com a característica
uma interface é bem projetada, ela é com- da usabilidade (conforme as definições
preensível, agradável e controlável. Os 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 IHC tem por objetivo principal fornecer aos pesquisadores
objetivos podem ser resumidos como desenvolver ou melhorar e desenvolvedores de sistemas explicações e previsões para
a segurança, utilidade, efetividade e usabilidade de sistemas fenômenos de interação usuário-sistema e resultados práti-
que incluem computadores. Nesse contexto, o termo sistemas cos para o design da interface de usuário. É o conjunto de
se refere não somente ao hardware e software, mas a todo o características com o qual os utilizadores interagem com as
ambiente que usa ou é afetado pelo uso da tecnologia compu- máquinas, dispositivos, programas de computador ou alguma
tacional. Durante o projeto de interface é necessário que se faça outra ferramenta complexa (ler Nota 1).
uma análise mais detalhada, como especificação de requisitos, IHC é uma área multidisciplinar que envolve as áreas de
módulo de qualidade e perfil dos usuários. Ciências da Computação, Psicologia, Fatores Humanos, Lin-
A participação do usuário durante o processo de desenvol- guística, dentre outras. Não é uma disciplina essencialmente
vimento da aplicação é de extrema importância, pois ajuda a voltada para o estudo de computação ou do ser humano,
diminuir os erros, propicia a maior interação e entendimento mas para a comunicação entre essas duas entidades. Reu-
do usuário, cativa a curiosidade e interesse e, por fim, ajuda nir tantas pessoas com formações e treinamento diferentes
a ter maior aceitação do produto, pois eles fizeram parte de significa muito mais ideias sendo geradas, novos métodos
todo o processo de desenvolvimento, ou seja, se sentem “do- sendo desenvolvidos e designs mais criativos e originais
nos” do mesmo. sendo produzidos.
Neste contexto, este artigo tem como objetivo apresentar
o desenvolvimento de um website utilizando os principais Interface e Interação
conceitos de usabilidade e avaliação presentes em interface A interface pode ser conceituada como o componente da
homem-máquina. Para isto, foi desenvolvido um website para arquitetura do software interativo com o qual o usuário tem
o projeto AME – Construção da Identidade da Cidade de Va- contato. Como exemplos de interfaces citam-se telas visíveis
lença/RJ e Desenvolvimento do Programa Turistico, Histórico dos sites, mensagens sonoras (como as dos sistemas de atendi-
e Cultural da Região. mento em bancos), os visores e os teclados de celulares. Se bem
Desta forma, este artigo aborda a apresentação dos conceitos projetada, a interface pode se tornar uma fonte de motivação
de Interface Homem-Máquina, princípios de Design, as ativi- e, ainda, dependendo de suas características, uma grande
dades básicas do Design de Interação, as dez heurísticas de ferramenta para os usuários. Do contrário, porém, pode se
Usabilidade de Nielsen e Avaliação de Interface. transformar em fator decisivo para a rejeição do sistema.
 Interação é um processo de comunicação que envolve um Ao utilizar feedback da maneira correta, pode-se propor-
ciclo contínuo de interpretação e ação entre os usuários e cionar a visibilidade necessária para a interação do usuário.
sistemas interativos. Ferramentas computacionais específicas A Figura 2 esboça uma tela de retorno confirmando a ação
e ambientes de programação permitem construir protótipos realizada pelo usuário.
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, É um termo utilizado para se referir ao atributo de um ob-
Filósofos entre outros. jeto que permite às pessoas saber como utilizá-lo (Preece et.
al., 2005).
Pode-se entender também que affordance é a qualidade de
Design é uma atividade prática e criativa, cujo objetivo final um objeto, ou de um ambiente, que permite que o indivíduo
consiste em desenvolver um produto que ajude os usuários a realize uma ação. Por exemplo, uma maçaneta redonda de
atingir suas metas. porta convida o usuário a girá-la. Um exemplo de affordance é
Norman (1988), partindo da experiência de observar e viven- apresentado na Figura 3.
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 Restrições
de Design são também abstrações generalizáveis destinadas a Refere-se a restringir as ações que não podem ser realizadas.
orientar os designers a pensar sobre os aspectos diferentes do Esse princípio impede a seleção de opções incorretas e reduz
seu projeto. E resume-se a “o que utilizar” e “o que evitar”. a chance de erros.
Alguns princípios fundamentais de design são a visibilidade, O conceito de restrições refere-se à determinação das for-
feedback, affordance e restrição. mas de delimitar o tipo de interação que pode ocorrer em um
determinado momento. A Figura 4 apresenta um exemplo
Visibilidade de restrição com relação aos jogos. Um usuário só pode jogar
O usuário deve saber dizer o estado em que se encontra um caso esteja logado.
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.

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
Feedback interação é o conhecimento dos seus usuários. Identificar os
O Feedback (retorno) está relacionado ao conceito de visibili- usuários pode parecer uma atividade bastante simples, mas
dade. Na sua interação com o mundo, as pessoas necessitam na verdade há muitas interpretações para o termo “usuário”.
continuamente perceber, interpretar e avaliar o resultado de A definição mais óbvia diz respeito àqueles indivíduos que
suas ações. A interface deve enviar de volta ao usuário infor- interagem diretamente com o produto a fim de realizar uma
mação sobre o que foi efetivamente realizado. O mesmo deve tarefa, o problema é que há um conjunto surpreendentemente
receber um feedback contínuo e completo sobre os resultados grande de indivíduos que têm uma participação (stake) no de-
de suas ações, ou seja, um retorno de informações a respeito senvolvimento de um produto bem-sucedido. Essas pessoas
de que ação foi feita e do que foi realizado. são chamadas stakeholders.
 As quatro atividades básicas do Design de Interação são: de protótipos (de baixa ou de alta fidelidade, parciais ou
identificar as necessidades e estabelecer requisitos, desenvolver completos).
designs alternativos, construir versões interativas dos designs Protótipo pode ser um esboço de papel de uma tela
e avaliar designs. ou conjunto de telas, uma “fotografia” eletrônica, uma simu-
lação em vídeo de uma tarefa, uma maquete tridimensional,
Identificando necessidades e estabelecendo requisitos de papel ou de cartolina.
Para se identificar as necessidades dos usuários, deve-se Conforme o nome da etapa diz, as versões devem ser in-
primeiramente saber quem são os usuários, ou seja, quem terativas. A maneira mais sensata de os usuários avaliarem
usa o sistema ou quem tem relação direta com quem usa, tais designs é, portanto, interagir com eles, o que requer uma
por exemplo, superiores ou subordinados, clientes, etc. Ou- versão interativa dos designs a serem construídos, embora isso
tro ponto é saber quais são as suas “necessidades”, todo o não signifique que seja necessária uma versão em software.
apoio computacional que um sistema pode oferecer para as Existem técnicas diferentes para atingir a “interação”, sendo
atividades do usuário, relacionado com as atividades atuais que nem todas exigem uma parte do software funcionando.
do cliente ou relacionado com as novas oportunidades que o Por exemplo, protótipos em papel são rápidos e baratos, além
sistema pode criar. de muito eficazes para a identificação de problemas contidos
De forma geral, nessa etapa o que se tem a fazer é: nos primeiros estágios do design.
Como exemplo, durante o projeto AME, foram desenvol-
o contexto de uso, suas capacidades cognitivas, seu conheci- vidas 4 (quatro) versões representadas pela Figura 5. No
mento prévio sobre o domínio, sistemas similares, tecnologia, projeto em questão, para o desenvolvimento das versões
entre outros. interativas, utilizou-se o programa Photoshop. Para a criação
da parte lógica do site (cadastro de usuários, login, jogos) foi
o sistema deve fazer e como fazer. utilizada a linguagem PHP em conjunto com o framework
JQuery. JQuery foi utilizado para que o site se tornasse
Segundo Preece et. al. (2005), para projetar algo que realmente mais dinâmico e, consequentemente, mais atraente para o
dê suporte às atividades das pessoas, deve-se conhecer quem usuário, possibilitando diversos tipos de animação, como
são os usuários-alvo e que tipo de suporte um produto inte- o girar das cartas no jogo da memória e o arrastar e soltar
rativo poderia oferecer de maneira útil. Essas necessidades de quebra-cabeça.
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 Avaliando
o modelo conceitual para o produto, onde se descreve o que A avaliação diz respeito ao processo de determinar a usabi-
produto deveria fazer, como se comportar e com o que parecer. lidade e a aceitabilidade do produto ou do design. É medida
A segunda considera detalhes como cores, sons e imagens, por meio de vários critérios, incluindo o número de erros que
design do menu e design de ícones. os usuários cometem, se o design ou o produto são atraentes,
se preenchem os requisitos, e assim por diante. O design de
Construindo versões interativas dos interação exige um alto nível de participação do usuário du-
Nesta fase é pensado em como representar as versões, rante seu desenvolvimento, o que aumenta as chances de se
podendo ser por meio de esboços ou maquetes, e também 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 Consistência e Padronização
relação à avaliação de designs. Os usuários não devem ter que se perguntar se palavras, situ-
Com relação ao layout 2 apresentado na Figura 5, foi dito ações ou ações diferentes significam a mesma coisa. O projetista
como sendo o estilo mais limpo. Foi sugerido que, ao abrir o deve seguir as convenções da plataforma / ambiente.
site, aparecessem várias imagens, alterando pelos menos umas Tratar coisas similares, da mesma maneira, facilitando a
três imagens. Já em relação ao layout 3, achou-se a cor muito identificação do usuário, são ações de uma boa Consistência
pesada. O layout 3 foi criticado pelo fato da tela ter ficado muito e Padronização.
pequena. E por fim, foram feitas algumas observações sobre
os espaçamentos das logomarcas. 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
São 10 itens para a avaliação da usabilidade de um site, com impedir a ocorrência de erros. Por exemplo, se o campo CPF for
intuito de evitar erros comuns. As heurísticas foram baseadas somente números, informar ao usuário anteriormente isto na tela.
em 294 tipos de erros de usabilidade que Nielsen comumente Não espere ele digitar números e pontos para posteriormente
encontrava em suas análises, e que podem prejudicar e muito informá-lo. Conforme é esboçado na Figura 7, o campo senha
a experiência do usuário em um site. Uma avaliação heurística, tem uma pré-condição. A senha deve ter no mínimo 5 caracteres.
ao pé da letra, é feita por no mínimo 3 e no máximo 5 profis- Portanto, ao invés de esperar o usuário digitar uma senha menor
sionais especializados nesse tipo de avaliação. Mesmo que do que 5 caracteres e clicar em Cadastrar, para posteriormente
você não seja nenhum analista de usabilidade, checar esses apresentar a mensagem informando que a senha deve ser maior
itens com certeza irá tornar a experiência do usuário em sua do que 5, é relevante informar ao usuário esta condição.
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 Reconhecer ao Invés de Decorar
as convenções do mundo real, fazendo com que a informação O projetista deve tornar os objetivos, as ações e opções visí-
apareça em uma ordem natural e lógica. veis. O usuário não deve ter que se lembrar de informação de
Toda a comunicação do sistema precisa ser contextualizada uma parte do sistema quando tiver passado para outra parte
ao usuário, e ser coerente em situações inesperadas. 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
Liberdade e Controle para o Usuário não é reconhecido diretamente.
Os usuários frequentemente escolhem funções do sistema por As instruções de uso do sistema devem estar visíveis e
engano e precisam de uma “saída de emergência” claramente facilmente acessíveis sempre que necessário, evitando que o
marcada para sair do estado indesejado sem ter que percorrer usuário precise acionar a memória o tempo inteiro, fazendo
um diálogo extenso. A interface deve permitir que o usuário com que cada ação precise ser revista mentalmente antes de
desfaça ou refaça suas ações, quando estiver perdido ou em ser executada. Deve-se permitir que a interface ofereça aju-
situações inesperadas, conforme exemplificado na Figura 6. A da contextual, e informações capazes de orientar as ações do
cada página visitada pelo usuário o caminho percorrido fica usuário, ou seja, que o sistema dialogue com o usuário.
registrado no cabeçalho do site. Flexibilidade e Eficiência de Uso
 Fornece aceleradores imperceptíveis aos usuários novatos, desenvolvimento de um produto, para que em muitos pontos do
geralmente tornam as interações de usuários avançados mais processo de design os desenvolvedores possam verificar se suas
rápida, permitindo que o sistema consiga servir igualmente bem ideias são realmente as que os usuários precisam, ou querem.
esses dois tipos de usuários. O projetista deve prover mecanismos Um dos grandes objetivos dessa metodologia é a de avaliar a
que permitam aos usuários customizar ações frequentemente funcionalidade do sistema, isto é, criar tarefas fáceis e eficientes,
realizadas. onde servirá para medir a “relação” do usuário junto ao sistema.
O sistema precisa ser fácil para usuários leigos, mas flexível o Avaliar a usabilidade do sistema por meio da interface e iden-
bastante para se tornar ágil a usuários avançados. Essa flexibilida- tificar os problemas específicos do sistema, ou seja, inutilizar
de pode ser conseguida com a implementação de teclas de atalhos, funções ou ações que causem reações inesperadas ou confusão
por exemplo. No caso de websites, uso de máscaras e navegação entre os mesmos. Além de testar o desempenho e a integridade
com tab em formulários são outros exemplos. das informações, a usabilidade é algo que deve ser sempre acom-
panhada por uma equipe especializada, que enxerga e avalia da
Minimalista e Estético forma que o cliente vê. Avaliações são muito importantes para
Os diálogos não devem conter informações que sejam irrelevan- um bom funcionamento, e para que o sucesso junto ao usuário
tes ou raramente necessárias. Cada unidade extra de informação esteja garantido no final do processo.
de um diálogo compete com as suas unidades relevantes de Caso o leitor queira mais detalhes de Avaliação de Interfaces,
informação e reduz sua visibilidade relativa. o artigo Modelos de Avaliação de Interfaces, da 18ª edição da
Os diálogos do sistema precisam ser simples, diretos e naturais, Engenharia de Software Magazine, apresenta mais informações
presentes nos momentos em que são necessários. Os textos e design sobre o assunto.
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 Sem dúvida, a avaliação da IHC constitui tema complexo e
criação das interfaces. 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
Apoio para o usuário reconhecer, diagnosticar e consertar erros mais tradicionais, como também a estudos que se encaminham
As mensagens de erro devem ser expressas em linguagens para novos rumos, incorporando elementos reais de avaliação
simples (sem códigos) ao invés de intimidar o usuário com o de interfaces computacionais e, ainda, parâmetros para defi-
erro. Deve, ainda, indicar precisamente o problema e sugerir uma nição dessas interfaces.
solução de forma construtiva. Os sistemas de IHC permitem uma aproximação entre o mun-
do da automação e o utilizador. Dada a crescente complexidade
Ajuda e Documentação dos processos modernos, a capacidade de ter uma visão clara
Embora seja melhor que um sistema possa ser utilizado sem do todo é cada vez mais importante. Portanto, a participação
documentação, é necessário prover ajuda e documentação de efetiva do usuário no processo de desenvolvimento de sof-
alta qualidade. Informações documentais devem ser facilmente tware é vital para o desenvolvimento de um sistema. Com ela
encontradas, focadas na tarefa do usuário, enumerar passos con- é possível ter gerenciamento de expectativas, sem surpresas
cretos a serem realizados, e não serem muito extensos. 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-
A avaliação é muito importante dentro do processo de design, o pícios a perdoar ou entender problemas.
que deve ocorrer em todo o ciclo de vida do produto. As técnicas Contudo, após vários estudos a fundo sobre IHC conclui-se que
de modelagem e construção de protótipos garantem que o projeto desenvolver sites sem o uso destes conceitos, é algo que poderá
esteja em constante avaliação. arriscar o trabalho, e causar problemas com os usuários. Desta
Um dos “planos” de avaliação são as críticas dos usuários forma, é imprescindível o uso das heurísticas, princípios de
quanto aos layouts oferecidos, determinar o estágio do design, design e a participação dos usuários para que um projeto tenha
saber orçar os custos dos produtos, os testes, tempo disponível e uma boa repercussão. Após a aplicação de todos os conceitos
experiência dos designers e avaliadores, são fatores fundamentais no processo de desenvolvimento do site apresentados acima, a
dentro da avaliação. interface 2 da Figura 5 foi a escolhida e adotada no projeto, além
Com relação a testes, é sempre necessário manter certo grau de da utilização dos conceitos aqui apresentados.
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