Escolar Documentos
Profissional Documentos
Cultura Documentos
CAPTULO 1
O que Design de Interao?
1.1 Introduo
1.2 Um bom e um mau design
1.2.1 O que projetar
1.3 O que design de interao?
1.3.1 Breve histria do design de interao
1.3.2 Trabalhando juntos como uma equipe multidisciplinar
1.3.3 Design de interao e negcios
1.4 O que est envolvido no processo de design de interao?
1.5 As metas do design de interao
1.5.1 Metas de usabilidade
1.5.2 Metas decorrentes da experincia do usurio
1.6 Um pouco mais sobre usabilidade: princpios de usabilidade e design
1.6.1 Heurstica e princpios de usabilidade
1.1 Introduo
Quantos produtos interativos existem em nossa vida cotidiana? Pense um minuto so-
bre o que voc utiliza em um dia normal: telefone celular, computador, agenda ele-
trnica, controle remoto, mquina de refrigerantes, cafeteira, caixa eletrnico, guich
eletrnico de venda de passagens, sistema informatizado de biblioteca, web, fotoco-
piadora, relgio, impressora, rdio, calculadora, videogame... a lista interminvel.
Agora pense por um minuto sobre usabilidade. Quantos deles so realmente fceis e
agradveis de utilizar? Todos, alguns, ou apenas um ou dois? provvel que agora
a lista se mostre consideravelmente menor. Por qu?
Pense em alguma ocasio em que um desses dispositivos tenha lhe causado al-
gum incmodo quanto tempo voc gastou tentando faz-lo funcionar? Dois dispo-
sitivos interativos e bem conhecidos que causam muito aborrecimento s pessoas so
a fotocopiadora que no copia da maneira que se espera e o videocassete que no
grava o programa que queremos, ou nem mesmo grava. Por que voc acha que essas
coisas acontecem? E alm disso, podemos fazer alguma coisa a esse respeito?
_Preece_CAP_01 7/3/07 3:21 PM Page 24
24 DESIGN DE INTERAO
1
Utilizamos o termo produtos interativos genericamente para nos referirmos a todas as classes de sistemas,
tecnologias, ambientes, ferramentas, aplicaes e aparelhos interativos.
_Preece_CAP_01 7/3/07 3:21 PM Page 25
ma mensagem, voc pega o fone e ouve o sinal. Se ele faz bip bip bip, h mensa-
gem. Para descobrir como acess-la, voc tem de ler uma srie de instrues que es-
to prximas ao aparelho.
Voc ento l e segue o primeiro passo:
1. Disque 491.
O sistema responde: Voc discou para o centro de mensagens do Hotel Sunny. Por
favor, digite o nmero do quarto para o qual voc deseja deixar uma mensagem.
Voc espera para saber como ouvir uma mensagem gravada. No h, porm, ou-
tras instrues. Voc ento olha novamente para a folha de instrues e l:
2. Pressione *, o nmero do quarto e #. Voc o faz, e o sistema responde:
Voc discou para a caixa de mensagens do quarto 106. Para deixar uma mensagem,
digite sua senha.
Voc no sabe qual a senha. Pensou que fosse o nmero do quarto. No . A es-
ta altura, voc desiste e liga para a recepo. O funcionrio explica o procedimento
correto para gravar e ouvir mensagens; consiste em digitar, na hora certa, o nmero
do quarto e o nmero da extenso do telefone (que a sua senha, e no o nmero do
quarto). Alm disso, so seis os passos para acessar uma mensagem e cinco para dei-
xar uma mensagem. Voc resolve sair e comprar um celular novo.
Qual o problema desse sistema de correio de voz?
irritante.
confuso.
ineficiente; exige muitos passos para tarefas bsicas.
difcil de utilizar.
No permite saber rapidamente se h alguma mensagem ou quantas mensagens
h. necessrio pegar o fone e realizar toda uma srie de passos para ouvi-las.
Os procedimentos no so bvios: as instrues so fornecidas parcialmente
pelo sistema e parcialmente pela folha ao lado do telefone.
Vamos agora pensar em uma secretria eletrnica. A Figura 1.1 mostra dois peque-
nos esquemas representando uma secretria eletrnica. As mensagens que chegam
so representadas pelas esferas as que esto enfileiradas indicam o nmero de
mensagens. Ao colocar uma dessas esferas no orifcio presente na mquina, aciona-
se a mensagem gravada. Ao colocar a mesma esfera em outro orifcio, disca-se para
quem deixou a mensagem.
26 DESIGN DE INTERAO
des displays para citar apenas alguns exemplos. Existem tambm muitas maneiras
de projetar o modo como os usurios podem interagir com um sistema (p. ex.: por
meio de menus, comandos, formulrios, cones, etc.). Alm disso, esto surgindo for-
mas de interao cada vez mais inovadoras que combinam dispositivos fsicos com
computao embarcada, como tinta eletrnica, brinquedos interativos, geladeiras in-
teligentes e roupas que permitem conectar-se rede (veja Figura 1.2, na Pgina de
Ilustraes 1). Isso tudo representa uma multiplicidade de escolhas e decises com as
quais o designer vai se deparar quando estiver desenvolvendo produtos interativos.
Uma questo fundamental para o design de interao a seguinte: como voc oti-
miza as interaes do usurio com o sistema, ambiente ou produto, de forma que
combinem com as atividades que esto sendo estendidas ou recebendo suporte? Po-
der-se-ia utilizar a intuio e esperar pelo melhor. Ou, ento, criteriosamente decidir
que escolhas fazer, baseando-as em uma maior compreenso acerca dos usurios. Tal
processo envolve o seguinte, a saber:
Considerar no que as pessoas so boas ou no
Considerar o que pode auxiliar as pessoas na sua atual maneira de fazer as
coisas
Pensar no que pode proporcionar experincias de qualidade ao usurio
Ouvir o que as pessoas querem e envolv-las no design
Utilizar tcnicas baseadas no usurio testadas e aprovadas durante o proces-
so de design
O objetivo deste livro abordar esses aspectos, com o intuito de ensinar como reali-
zar o design de interao; mais especificamente, como identificar as necessidades do
usurio e, a partir desse entendimento, projetar sistemas usveis, teis e agradveis.
28 DESIGN DE INTERAO
Com o advento dos monitores (hoje conhecidos como VDUs visual display units) e
de estaes de trabalho pessoais, no final dos anos 70 e incio dos 80, o design da in-
terface passou a existir (Grudin, 1990). O novo conceito de interface com o usurio
apresentava muitos desafios:
um horror. Voc tem que se confrontar com a documentao. Tem que aprender uma nova
linguagem. Voc j havia utilizado a palavra interface antes de comear a usar um compu-
tador?
Arthur Einstein executivo de propaganda
Prticas em design
Disciplinas Design grfico
acadmicas
Design de produtos
Ergonomia
Design artstico
Psicologia/ Design industrial
Cincia cognitiva
Indstria de filmes
Informtica
Design de
Engenharia Interao
Cincia da computao/
Engenharia de software
30 DESIGN DE INTERAO
Um dos maiores desafios naquele tempo era desenvolver computadores que pudes-
sem ser acessveis e utilizveis por outras pessoas, alm dos engenheiros, para a rea-
lizao de tarefas que envolvessem a cognio humana (p. ex.: fazer resumos, escre-
ver documentos, gerenciar contas bancrias, esboar planos). Para tornar isso poss-
vel, cientistas da computao e psiclogos envolveram-se com o design de interfaces
de usurio. Os cientistas e engenheiros de software desenvolveram linguagens de
programao de alto nvel (p. ex.: BASIC, Prolog), arquiteturas de sistemas, mtodos
de desenvolvimento de software e linguagens baseadas em comando (command-based
languages) para auxiliar tais tarefas, enquanto os psiclogos forneciam informaes a
respeito das capacidades humanas (p. ex.: memria, deciso).
Os recursos oferecidos pela tecnologia da computao interativa daquele tempo
(isto , o uso combinado de painis visuais e teclados interativos) fizeram surgir no-
vos desafios. A pesquisa e o desenvolvimento de interfaces grficas (abreviadas GUI,
do ingls Graphical User Interface, pronunciado guu-ii) para sistemas de automao
de escritrios cresceram enormemente. Havia muitas pesquisas sobre o design de
produtos (p. ex.: menus, janelas, paletas, cones), no que diz respeito melhor forma
de estrutur-los e apresent-los em uma GUI.
Em meados dos anos 80, a nova onda de tecnologias da computao incluindo
reconhecimento de voz, multimdia, visualizao da informao e realidade virtual
apresentou ainda mais oportunidades de design de aplicaes para fornecer ainda
mais suporte s pessoas. Educao e treinamento foram duas reas que receberam
muita ateno. Ambientes de aprendizagem interativos, softwares educacionais e si-
muladores para treinamento foram alguns dos principais resultados. No entanto,
construir esse novo tipo de sistemas interativos exigia um tipo diferente de conheci-
mento especializado, vindo de psiclogos e programadores. Especialistas em tecno-
logia educacional, psiclogos do desenvolvimento e especialistas em treinamento en-
volveram-se no empreendimento.
Como surgiram novas ondas de desenvolvimento tecnolgico nos anos 90 re-
des, computao mvel e sensores infravermelhos , a criao de uma diversidade
de aplicativos para todas as pessoas tornou-se uma possibilidade real. Todos os as-
pectos da vida de um indivduo em casa, em movimento, no lazer e no trabalho, so-
zinho, com a famlia ou os amigos comearam a ser vistos como reas que podiam
ser melhoradas e estendidas projetando-se e integrando vrias combinaes de tec-
nologias computacionais. Novas formas de aprender, comunicar, trabalhar, descobrir
e viver comearam a ser pensadas.
Em meados dos anos 90, muitas empresas perceberam que era necessrio expan-
dir novamente suas equipes multidisciplinares de design, para que as mesmas in-
clussem profissionais treinados em mdia e design, como design grfico, industrial,
produo de filmes e desenvolvimento de narrativas. Socilogos, antroplogos e dra-
maturgos foram incorporados ao quadro das equipes, todos com uma atitude dife-
rente da dos psiclogos quanto interao humana. Esse conjunto de pessoas pro-
moveria a combinao certa de habilidades com a compreenso das diferentes reas
de aplicao necessrias para projetar a nova gerao de sistemas interativos. Por
exemplo, para projetar um aplicativo de recados para uma famlia necessrio saber
como seus membros interagem; criar um kit interativo de histrias para crianas exi-
ge que se saiba como elas escrevem e entendem uma narrativa; desenvolver um guia
interativo para visitantes de uma galeria de arte requer que se avalie o que as pessoas
fazem e como se movimentam em espaos pblicos.
_Preece_CAP_01 7/3/07 3:21 PM Page 31
Figura 1.4 Quatro membros diferentes de uma mesma equipe olhando para o mesmo quadrado, mas
cada um enxergando-o de maneira diferente.
_Preece_CAP_01 7/3/07 3:21 PM Page 32
32 DESIGN DE INTERAO
nem sempre tinham uma idia clara de quem necessitava de qual informao, quan-
do e de que forma (Lambourne et al., 1997).
ATIVIDADE 1.2 Na prtica, a formao de uma equipe de design depende do tipo de produto interativo
que est sendo construdo. Quem voc acha que deveria estar envolvido no desenvol-
vimento de:
Comentrio Cada equipe precisar de um nmero diferente de pessoas com diferentes habilidades.
Por exemplo, o primeiro produto precisaria de:
Alm disso, como os dois sistemas esto sendo desenvolvidos para o uso do pblico em
geral, usurios representativos, como crianas e pais, devem estar envolvidos.
Na prtica, as equipes de design geralmente acabam sendo bastante grandes, especial-
mente se estiverem trabalhando em um projeto importante, com prazo fixo. Por exem-
plo, comum encontrar equipes de 15 ou mais pessoas trabalhando no projeto de um
website por um longo perodo de tempo, como seis meses. Isso significa que provavel-
mente existiro vrias pessoas de cada rea trabalhando na equipe do projeto.
2
Isso aconteceu antes da crise das ponto.com, em 2001.
_Preece_CAP_01 7/3/07 3:21 PM Page 33
34 DESIGN DE INTERAO
Figura 1.5 Um produto inovador desenvolvido pela IDEO: Scout Modo, um dispositivo sem fio que
exibe informaes atualizadas sobre o que est acontecendo na cidade.
Espera-se que tais atividades complementem-se umas s outras e que sejam sempre
repetidas. Por exemplo, medir a usabilidade do que foi construdo, no que se refere
facilidade de uso, d um retorno a respeito de que mudanas devem ser feitas ou de
quais requisitos no foram preenchidos.
Avaliar o que foi construdo est no centro do design de interao. preciso asse-
gurar que o produto usvel. A avaliao geralmente realizada com uma aborda-
gem centrada no usurio, isto , como o nome sugere procurando envolver usu-
rios em todo o processo de design. Existem muitas maneiras diferentes de atingir es-
se objetivo: por exemplo, observando os usurios, conversando com eles, entrevis-
tando-os, testando-os utilizando tarefas de desempenho, modelando sua performan-
ce, pedindo que preencham questionrios e at mesmo pedindo que se tornem co-de-
signers. O que se descobre a partir das diferentes maneiras de se envolver com o co-
nhecimento do usurio e de obt-lo ento interpretado com relao s atividades
do design em andamento (fornecemos mais detalhes sobre todos esses aspectos de
avaliao nos Captulos 1014).
To importante quanto envolver os usurios na avaliao de um produto intera-
tivo entender como as pessoas realizam normalmente as tarefas. Essa forma de pes-
quisa deveria ser realizada antes da construo de um produto interativo. Os Cap-
tulos 3, 4 e 5 tratam sobremodo desse assunto, explicando detalhadamente como os
indivduos agem e interagem uns com os outros, com a informao e com as vrias
tecnologias, e descrevendo seus pontos fortes e fracos. Tal conhecimento pode auxi-
liar os designers a determinar que solues escolher dentre as muitas alternativas de
design disponveis e como desenvolv-las e test-las posteriormente. O Captulo 7
descreve como as necessidades dos usurios podem ser traduzidas em requisitos, ao
_Preece_CAP_01 7/3/07 3:21 PM Page 35
36 DESIGN DE INTERAO
38 DESIGN DE INTERAO
Figura 1.6 (a) Um menu seguro e um no-seguro. Qual qual e por qu? (b) Mensagem de aviso
do Eudora.
consiste em determinar quanto tempo os usurios estaro preparados para gastar co-
nhecendo um sistema. No h muito sentido em desenvolver uma srie de funciona-
lidades se a maioria dos usurios no pode ou no est preparada para passar algum
tempo aprendendo a utiliz-las.
Pergunta: Quo fcil e que tempo se leva para (i) iniciar o uso das tarefas funda-
mentais de um sistema e (ii) aprender o conjunto de operaes necessrias para rea-
lizar um conjunto mais amplo de tarefas?
Capacidade de memorizao (memorability) refere-se facilidade de lembrar como
utilizar um sistema, depois de j se ter aprendido como faz-lo algo especialmen-
te importante para sistemas interativos que no so utilizados com muita freqn-
cia. Se os usurios no utilizam um sistema ou uma operao por alguns meses ou
mais, devem poder lembrar ou pelo menos ser rapidamente lembrados sobre como
_Preece_CAP_01 7/3/07 3:21 PM Page 39
ATIVIDADE 1.3 Quanto tempo voc acha que se deveria levar para aprender a utilizar os seguintes pro-
dutos interativos e quanto tempo realmente a maioria das pessoas leva para tal? Qual o
grau de capacidade de memorizao (memorability) deles?
(a) utilizar um videocassete para passar um filme
(b) utilizar um videocassete para programar a gravao de dois programas
(c) utilizar uma ferramenta de autoria para criar um website.
Comentrio (a) Ligar um vdeo para assistir a um filme deveria ser to simples como ligar o r-
dio; deveria levar menos de 30 segundos para funcionar e depois realizar sua ati-
vidade sem maiores questes. A maioria das pessoas sabe como faz-lo; no entan-
to, alguns sistemas requerem que o usurio selecione o canal do vdeo, dentre 50
ou mais, utilizando um ou dois controles remotos. Outras configuraes tambm
precisam ser ajustadas antes de o vdeo comear a rodar. A maioria das pessoas
consegue lembrar como lig-lo, uma vez que provavelmente j devem ter utiliza-
do algum.
(b) Essa uma operao mais complexa. Aprender como programar o videocassete e
checar se est tudo da forma correta leva um pouco mais de tempo. Na realidade,
muitos desses aparelhos so to mal projetados, que 80% da populao no conse-
gue realizar essa tarefa, apesar de inmeras tentativas. Poucas pessoas lembram co-
mo programar o vdeo para gravar um programa, muito por a interao necessria
ter sido mal projetada, com pouco ou nenhum feedback, e por no ser lgica da pers-
pectiva do usurio. Dessas pessoas, poucas iro ter pacincia para olhar o manual
novamente.
(c) Uma ferramenta de autoria bem projetada deveria permitir ao usurio criar uma p-
gina bsica em cerca de 20 minutos. Aprender a totalidade das operaes e possibi-
lidades provavelmente levar muito mais tempo possivelmente alguns dias. Na
realidade, existem algumas boas ferramentas de autoria que permitem ao usurio
iniciar o uso logo, oferecendo templates que podem ser adaptados. A maioria dos
usurios ir ampliar seu repertrio, levando uma hora ou mais para aprender mais
funes. No entanto, algumas poucas pessoas realmente aprendem a utilizar todo o
conjunto de funes que uma ferramenta dessas oferece. Os usurios tendem a lem-
brar operaes freqentemente utilizadas (p. ex.: recortar e colar, inserir imagens),
especialmente se forem consistentes com relao forma como essas aes so rea-
lizadas em outras aplicaes. Contudo, algumas outras operaes usadas com me-
nos freqncia talvez tenham que ser reaprendidas (p. ex.: formatar tabelas).
_Preece_CAP_01 7/3/07 3:21 PM Page 40
40 DESIGN DE INTERAO
divertido
satisfatrio emocionalmente
adequado
eficiente
no uso
seguro
fcil de
no uso incentivador de
interessante entender
criatividade
de boa utilidade
proveitoso esteticamente
aprecivel
motivador
42 DESIGN DE INTERAO
ATIVIDADE 1.4 A seguir, apresentamos alguns produtos interativos. Quais voc acha que sejam as me-
tas de usabilidade e as decorrentes da experincia do usurio em cada um deles?
(a) um dispositivo porttil que permite a crianas comunicar-se umas com as outras e
brincar com jogos colaborativos
(b) um sistema de vdeo e computador para conferncias que permite aos estudantes
aprender em casa
(c) uma aplicao da Internet que permite ao pblico em geral acessar seu pronturio
mdico atravs de uma TV interativa
(e) uma comunidade on-line que fornece suporte a pessoas que recentemente tiveram
amigos e familiares falecidos
Comentrio (a) Esse dispositivo colaborativo deve ser de uso simples, eficaz, eficiente, fcil de
aprender a utilizar, engraado e interessante.
(b) Esse dispositivo para aprendizagem deve ser fcil de entender e de utilizar, eficaz,
motivador e compensador.
(c) Esse sistema pessoal deve ser seguro, fcil de usar e de lembrar como usar, eficaz e
eficiente.
(d) Essa ferramenta precisa ser fcil de aprender, fcil de lembrar como usar, ter uma
boa utilidade, ser segura, eficiente, eficaz, fornecer suporte criatividade e ser es-
teticamente agradvel.
(e) Esse sistema deve ser fcil de aprender, fcil de usar, motivador, emocionalmente
adequado e compensador.
foram descritos extensivamente por Don Norman (1988), em seu bestseller The design
of everyday things.
Visibilidade A importncia da visibilidade exemplificada pelos dois exemplos con-
trastantes que apresentamos no incio do captulo. O sistema de correio de voz no
deixava visveis a presena e o nmero de mensagens recebidas, ao passo que a se-
cretria eletrnica deixou esses dois aspectos totalmente visveis. Quanto mais vis-
veis forem as funes, mais os usurios sabero como proceder. Por outro lado,
quando as funes esto fora de alcance, torna-se mais difcil encontr-las e saber
como utiliz-las. Norman (1988) descreve os controles de um carro a fim de enfatizar
esse ponto. Os controles para diferentes operaes so claramente visveis (p. ex.: fa-
ris, pisca-pisca, buzina, pisca-alerta), indicando o que poder ser feito. A relao en-
tre a maneira como os controles so dispostos no carro e o que eles realizam facilita
na hora de encontrar com mais rapidez o controle apropriado para as tarefas.
Feedback O feedback est relacionado ao conceito de visibilidade. Podemos melhor
ilustrar esse princpio fazendo uma analogia com o modo como seria a vida diria
sem ele. Imagine-se tentando tocar uma guitarra, fatiando um po ou escrevendo
com uma caneta, sem que nenhuma dessas aes produzisse qualquer efeito duran-
te alguns segundos. A msica, o po fatiado e as palavras no papel surgiriam com al-
gum atraso, tornando quase impossvel prosseguir com a realizao da tarefa.
O feedback se refere ao retorno de informaes a respeito de que ao foi feita e do
que foi realizado, permitindo pessoa continuar a atividade. Vrios tipos de feedback
esto disponveis para o design de interao udio, ttil, verbal, visual e combinaes
dos mesmos. Decidir quais combinaes so apropriadas para os diferentes tipos de
atividades e interatividades constitui um ponto central. Utilizar o feedback da maneira
certa pode proporcionar a visibilidade necessria para a interao do usurio.
Restries O conceito de restrio refere-se determinao das formas de delimitar
o tipo de interao que pode ocorrer em um determinado momento. Existem vrias
maneiras de fazer isso. Uma prtica comum no design de interfaces grficas consiste
em desativar certas opes do menu sombreando-as, restringindo as aes do usu-
rio somente s permitidas naquele estgio da atividade (veja Figura 1.8).
Uma das vantagens dessa forma de restrio impedir o usurio de selecionar
opes incorretas e, portanto, reduzir a chance de erro. O uso de diferentes tipos de
representaes grficas pode tambm restringir a interpretao de um problema ou
o espao para informao. Por exemplo, fluxogramas mostram quais objetos esto re-
lacionados a outros, restringindo, assim, a maneira de perceber a informao.
Norman (1999) classifica as restries em trs categorias: fsica, lgica e cultural.
As restries fsicas referem-se forma como objetos fsicos restringem o movimen-
to das coisas. Por exemplo, o modo como um disco externo pode ser colocado em um
drive restringido fisicamente por sua forma e seu tamanho, de maneira que ele po-
de ser inserido no local somente de um modo. Da mesma forma, as teclas tambm s
podem ser pressionadas de uma maneira.
As restries lgicas so as que dependem do entendimento que a pessoa tem so-
bre a maneira como o mundo funciona (conforme as esferas da secretria eletrnica).
Dependem do senso comum dos indivduos a respeito das aes e de suas conse-
qncias. Pegar uma esfera fsica e coloc-la em outro local no telefone cria a expec-
tativa de que alguma outra coisa ir acontecer. Tornar bvios as aes e seus efeitos
permite s pessoas deduzir logicamente que outras aes so necessrias. Desabili-
tar algumas opes do menu, quando essas no so apropriadas para a tarefa ime-
_Preece_CAP_01 7/3/07 3:21 PM Page 44
44 DESIGN DE INTERAO
Figura 1.8 Menu ilustrando a disponibilidade restrita de opes, como um exemplo de restrio
lgica. As reas sombreadas indicam opes desativadas.
diata, implica uma restrio lgica, pois permite que os usurios raciocinem por que
(ou por que no) foram projetadas dessa forma e que opes esto disponveis.
As restries culturais acontecem no mbito das convenes aprendidas como
o uso de vermelho para alertas, de certos tipos de sinais de udio para perigo e de
uma carinha sorridente para representar alegria. A maioria das restries culturais
so arbitrrias, no sentido de que sua relao com o que est sendo representado
abstrata e que poderia t-lo sido de outra maneira (p. ex.: o uso de amarelo, em vez
de vermelho). Assim sendo, elas devem ser aprendidas. Uma vez aprendidas e acei-
tas por um grupo cultural, tornam-se convenes universalmente aceitas. Duas con-
venes de interfaces universalmente aceitas so o uso de janelas para a apresenta-
o de informaes e o uso de cones para representar operaes e documentos.
Mapeamento Refere-se relao entre os controles e os seus efeitos no mundo. Qua-
se todos os artefatos necessitam de algum tipo de mapeamento entre controles e efei-
tos, seja uma lanterna, um carro, uma usina eltrica ou uma cabine (cockpit). Um
exemplo de um bom mapeamento entre controle e efeito so as setas utilizadas para
representar o movimento para cima ou para baixo do cursor em um teclado de com-
putador. O mapeamento da posio relativa dos controles e seus efeitos tambm
importante. Considere os vrios tipos de dispositivos para executar msicas (p. ex.:
MP3, CD player, gravador). Como so mapeados os controles rewind, play e fast for-
_Preece_CAP_01 7/3/07 3:21 PM Page 45
ward, de acordo com os efeitos desejados? Geralmente eles seguem uma conveno
comum, apresentando uma seqncia de botes em que o play fica ao meio, o rewind
esquerda e o fast forward direita. Essa configurao est mapeada diretamente de
acordo com a direo das aes (veja Figura 1.9a). Imagine como isso seria difcil, ca-
so fosse utilizado o mapeamento da Figura 1.9b. Observe a Figura 1.10 e determine
qual mapeamento adequado e qual causaria problemas ao usurio.
Consistncia Refere-se a projetar interfaces de modo que tenham operaes seme-
lhantes e que utilizem elementos semelhantes para a realizao de tarefas similares.
Uma interface consistente aquela que segue regras, tais como o uso da mesma ope-
rao para selecionar todos os objetos. Por exemplo, uma operao consistente utili-
za a mesma ao para marcar qualquer objeto grfico na interface, como clicar sem-
pre o boto esquerdo do mouse. Interfaces inconsistentes, por outro lado, permitem
excees regra. Um exemplo disso se d quando certos objetos grficos (p. ex.: men-
sagens eletrnicas apresentadas em uma tabela) podem ser marcados somente utili-
zando-se o boto direito do mouse, enquanto todas as outras operaes so marcadas
utilizando-se o boto esquerdo. Um dos problemas relacionado a esse tipo de incon-
sistncia se deve ao fato de ela ser um tanto arbitrria, dificultando a tarefa de lem-
brar das aes, o que aumenta a propenso ao cometimento de erros.
Um dos benefcios de interfaces consistentes, portanto, serem mais fceis de
aprender e usar. Os usurios aprendem apenas um nico modo de operao aplic-
vel a todos os objetos. Esse princpio funciona bem para interfaces simples com ope-
raes limitadas, como um mini CD player com um pequeno nmero de operaes
mapeadas em botes separados. Nesse exemplo, tudo o que o usurio tem de fazer
aprender o que cada boto representa e selecion-los. No entanto, pode ser mais pro-
blemtico aplicar o conceito de consistncia a interfaces mais complexas, especial-
mente quando muitas operaes diferentes precisam ser projetadas. Por exemplo,
imagine como seria projetada uma interface para uma aplicao que oferecesse cen-
tenas de operaes (p. ex.: uma aplicao para processamento de texto). Simplesmen-
te no existe espao suficiente para milhes de botes, cada um mapeando uma ope-
rao individual. Mesmo se houvesse, seria extremamente difcil e demorado para o
usurio procurar qual dentre eles realiza a operao desejada.
Uma soluo de design muito mais eficaz a criao de categorias de comandos
que podem ser mapeados em subconjuntos de operaes. Para o processador de
texto, as centenas de operaes disponveis so categorizadas em subconjuntos de
diferentes menus. Todos os comandos relacionados a operaes com arquivos (p.
ex.: salvar, abrir, fechar) so colocados juntos no mesmo menu-arquivo. Da mesma
forma, todos os comandos relacionados formatao de texto so colocados em
um menu de formatao. Selecionar uma operao implicar ento uma questo de
dirigir-se categoria correta de opes (menu) e procurar a operao desejada, em
vez de ter que procur-la em uma longa lista. Contudo, a regra de consistncia de
Figura 1.9 (a) Mapeamento natural entre as aes rewind, play e fast forward, em um dispositivo de
gravao de fita cassete. (b) Um mapeamento arbitrrio alternativo.
_Preece_CAP_01 7/3/07 3:21 PM Page 46
46 DESIGN DE INTERAO
Figura 1.10 Quatro possveis combinaes de mapeamentos com setas. Qual o mais natural?
via, fcil saber como interagir com ele. Por exemplo, uma maaneta permite que a
puxemos, a ala de uma xcara permite que a seguremos e o boto do mouse permite
que o pressionemos. Norman introduziu esse conceito nos anos 80, ao falar sobre o
design de objetos de uso dirio. Desde ento, o conceito foi muito popularizado, sen-
do utilizado para descrever como objetos de interface deveriam ser projetados de
maneira a tornar bvio o que se pode fazer com eles. Por exemplo, elementos grfi-
cos como botes, cones, links e barras de rolagem deveriam fazer parecer bvio o
modo como deveriam ser usados: cones devem ser projetados para permitir que se-
jam clicados; barras de rolagem, para que sejam movidas para cima e para baixo; bo-
tes, para que sejam pressionados.
Infelizmente o termo affordance tornou-se uma espcie de clich, perdendo mui-
to de sua fora como um princpio do design. Norman (1999), que foi amplamente
responsvel por promover originalmente esse conceito em seu livro The design of
everyday things (1998), agora se desespera com a forma como o termo vem sendo em-
pregado na linguagem comum:
Coloquei uma affordance ali, diria um participante, gostaria de saber se h affordance
aqui.... Affordance isso, affordance aquilo. E nenhum dado, apenas opinies. Nossa! O
que foi que eu coloquei no mundo? Reao de Norman (1999), durante recente discus-
so sobre IHC na web.
48 DESIGN DE INTERAO
Desde ento, Norman tem tentado esclarecer seu argumento sobre a funcionalidade
do conceito afirmando que h dois tipos de affordance: a percebida e a real. Diz-se que
os objetos fsicos dispem de affordances reais, como a de segurar, que so perceptual-
mente bvias e no precisam ser aprendidas. Por outro lado, as interfaces com o
usurio, que esto na tela, so virtuais e no possuem esses tipos de affordances reais.
Utilizando essa distino, ele argumenta que no faz sentido tentar projetar affordan-
ces reais para interfaces exceto quando se projetam dispositivos fsicos, como pai-
nis de controle, onde possibilidades como as de puxar e pressionar ajudam a orien-
tar o usurio a saber o que fazer. As interfaces na tela so melhor conceitualizadas co-
mo affordances percebidas, que fundamentalmente so convenes aprendidas. Con-
cluindo, Norman salienta que outros conceitos de design convenes, feedback e res-
tries lgicas e culturais so muito mais teis para o designer que desenvolve in-
terfaces grficas do usurio.
ATIVIDADE 1.5 Um dos principais conceitos em design que Nielsen dogmatizou, especialmente para o
design de websites, foi a simplicidade. Ele prope que os designers analisem todos os ele-
mentos de seu projeto e os removam um a um. Caso ele funcione bem sem um desses
elementos, elimine-o. Voc considera ser esse um bom princpio do design? Se voc pos-
sui seu prprio website, tente aplicar esse conceito e ver o que acontece. Em que ponto a
interao quebrada?
Tarefa
Esta tarefa requer que voc coloque em prtica o que leu neste captulo. Especificamente, o
objetivo permitir que voc defina as metas decorrentes da experincia do usurio e as metas
de usabilidade e que utilize princpios de design e usabilidade para avaliar a usabilidade de
um produto interativo.
Encontre um dispositivo pequeno (handheld) (p. ex.: controle remoto, computador, te-
lefone celular) e examine como ele foi projetado, prestando ateno especialmente
em como se espera que o usurio interaja com ele.
_Preece_CAP_01 7/3/07 3:21 PM Page 50
50 DESIGN DE INTERAO
(a) Das suas primeiras impresses, escreva a que primeiro vem sua mente, a
respeito do que bom ou ruim na maneira como o dispositivo funciona. Lis-
te (i) sua funcionalidade e (ii) a variedade de tarefas que um usurio tpico
poderia querer realizar com o dispositivo. A funcionalidade maior, igual ou
menor do que a desejada pelo usurio?
(b) Baseando-se na leitura deste captulo e em outro material que voc tenha en-
contrado, compile um conjunto de metas de usabilidade e de metas decor-
rentes da experincia com o usurio as quais voc considera que seriam mais
teis na avaliao do dispositivo. Decida quais so os mais importantes e ex-
plique por qu.
(c) Transforme as principais metas de usabilidade e decorrentes da experin-
cia com o usurio que voc selecionou em duas ou trs perguntas. Use-as
_Preece_CAP_01 7/3/07 3:21 PM Page 51
Resumo
Neste captulo, falamos sobre o que o design de interao e sobre como ele evoluiu. Examina-
mos brevemente sua formao e os vrios processos envolvidos. Apontamos como a noo de
usabilidade fundamental para o design de interao, descrevendo com detalhe em que ela
consiste e como operacionalizada para a avaliao de adequao, eficcia e qualidade de pro-
dutos interativos. Uma variedade de princpios de design de alto nvel foi tambm introduzi-
da, mostrando como tais princpios constituem diferentes formas de orientao para o design
de interao.
_Preece_CAP_01 7/3/07 3:21 PM Page 52
52 DESIGN DE INTERAO
Pontos principais
O design de interao preocupa-se com o projeto de produtos interativos que apiem
os indivduos em sua vida diria e em seu trabalho.
O design de interao multidisciplinar, envolvendo muitas contribuies de uma
ampla variedade de disciplinas e reas.
O design de interao hoje um grande negcio: muitas empresas o querem, mas
poucas sabem como faz-lo.
Otimizar a interao entre usurios e produtos interativos requer que se levem em
considerao vrios fatores interdependentes, incluindo contexto de uso, tipo de ta-
refa e tipo de usurio.
Os produtos interativos precisam ser projetados para atender s metas de usabilida-
de, como facilidade de uso e entendimento.
As metas decorrentes da experincia do usurio esto preocupadas com criar siste-
mas que melhorem esta experincia, fazendo com que sejam mais agradveis, diver-
tidos, teis, motivadores e satisfatrios.
Os princpios de design e de usabilidade, como feedback e simplicidade, constituem
heursticas teis para analisar e avaliar aspectos de um produto interativo.
Leituras adicionais
A seguir, recomendamos algumas leituras impor- sign. Pequena e instigante crtica aos princpios
tantes. Uma lista mais abrangente de livros, artigos, de design.
sites, vdeos e outros materiais teis encontra-se em GRUDIN, J. (1990) The computer reaches out: the
nosso website. historical continuity of interface design. In
WINOGRAD, T. (1997) From computing machi- CHI90 Proc. 261-268.
nery to interaction design. In P. Denning e R. GRUDIN, J. (1989) The case against user inter-
Metcalfe (eds.) Beyond Calculation: the Next Fifty face consistency. Communications of the ACM,
Years of Computing. New York: Springer-Verlag, 32(10), 1164-1173. Jonathan Grudin um es-
149-162. Terry Winograd apresenta uma viso critor prolfico, e muitos de seus primeiros
geral de como o design de interao surgiu co- trabalhos constituem-se em explicaes insti-
mo uma nova rea, explicando como no se en- gantes e bem documentadas de questes cen-
caixa em nenhuma outra rea existente de de- trais em IHC. O primeiro artigo trata de como
sign ou computao. Descreve os novos desa- o design da interface expandiu-se visando a
fios e demandas da profisso de designer. abranger muito mais aspectos em sua histria
NORMAN, D. (1988) The Design of Everyday relativamente curta. O segundo artigo, consi-
Things. New York: Doubleday, (especialmente derado um clssico de seu tempo, discute por
o Captulo 1). O texto de Norman bastante que o conceito de consistncia universal-
acessvel e agradvel de ler. Explora bastante o mente aceito, at agora, como um bom design
design e a usabilidade de objetos de uso dirio, de interface foi, na verdade, altamente pro-
como portas, torneiras e frigideiras. Esses blemtico.
exemplos contribuem muito para o design de Interactions, January/February, 2000, ACM. Es-
interfaces. O CD-ROM Voyager (infelizmente te nmero especial traz vrios pontos de vista,
no mais publicado), apresentando a coletnea crticas e opinies, apresentadas por um gran-
de seus trabalhos, oferece vdeos e animaes de nmero de pesquisadores, designers e profis-
adicionais que ilustram de uma maneira leve sionais tcnicos, sobre as realizaes e o futuro
muitos dos problemas, idias e questes de de- da IHC.
sign levantadas neste texto.
A IDEO oferece um arquivo on-line ilustrado
NORMAN, D. (1999) ACM Interactions Magazine, de vrios produtos interativos j projetados
May/June, 38-42. Affordances, convenes e de- (consulte www.ideo.com).
_Preece_CAP_01 7/3/07 3:21 PM Page 53
54 DESIGN DE INTERAO
Figura 1 Showroom do varejo da Steelcase Worklife New York um dos projetos em que Gitta
Salomon esteve envolvida. O objetivo era desenvolver um showroom interativo para a
Steelcase, de Nova Iorque. O ambiente de vendas foi projetado de modo a fornecer vrias
ferramentas de vendas, incluindo um dispositivo interativo que permitia aos vendedores
acessar vdeos com estudos de caso, podendo ser projetados em uma grande tela.
YR: E o que vocs utilizam quando tentam coisa. Muitas vezes utilizamos diagramas es-
comunicar-se com os clientes? Uma combina- quemticos para representar o comportamento
o de conversa, reunies e relatrios? do sistema. Uma vez que os clientes estiverem
com esses diagramas em mos, podero dizer
GS: Fazemos vrias coisas. Geralmente passa-
Ah, no. Precisamos de mais tudo isso aqui.
mos a eles um documento escrito, como um re-
Esquecemos de dizer a vocs. Parece que nin-
latrio ou uma crtica a respeito do seu produ-
gum est escrevendo listas completas de fun-
to. Algumas vezes oferecemos prottipos inte-
cionalidade, especificaes dos requisitos ou fa-
rativos em Director ou HTML; coisas que simu-
zendo uma documentao completa. Isso signi-
lem como seria uma experincia com o produ-
fica que as idias sobre o produto ficam na ca-
to. Nos materiais escritos, geralmente nomeio
bea de algum at que as tornamos tangveis
as coisas sobre as quais precisaremos conversar.
atravs da visualizao.
Assim, temos pelo menos uma terminologia em
comum para discutir as coisas. Teremos uma YR: Ento esse processo de comunicao
medida de nosso sucesso se eles comearem a to importante quanto as idias?
usar as palavras que lhes passamos; isso signi- GS: Acho que sim, muitas vezes.
ficar que estamos de fato causando alguma in-
fluncia. Muitas vezes damos ao cliente um YR: Como inicia o trabalho com o cliente?
diagrama de seu sistema, porque at ento nin- GS: Para aqueles que j tm algo construdo,
gum o visualizou. Servimos como visualiza- acho que a melhor maneira de comear com o
dores, estabelecendo uma seleo aleatria de cliente realizando uma demonstrao de seu
conceitos definidos vagamente e dando a eles produto. Geralmente passamos o dia coletan-
alguma forma. Fazemos um artefato que lhes do informaes. Alm da demonstrao, eles
permita dizer Sim, bem assim ou No, no nos falam sobre seu mercado-alvo, sobre com-
isso, isso.... Sem ter algo em que se basear petidores e uma infinidade de outras coisas.
os clientes no podero nem mesmo dizer Levamos ento um perodo maior de tempo
No, no isso o que eu quero, pois no sa- utilizando o produto e observando outras pes-
bero nem se estvamos falando sobre a mesma soas utilizarem-no, a fim de obtermos um qua-
_Preece_CAP_01 7/3/07 3:21 PM Page 55
dro da interao. Como a viso que o prprio sentar um argumento convincente. Muitas ve-
cliente tem de seu produto muito restrita, te- zes, considero o tipo de argumentao que fa-
mos que manter um p atrs com relao ao zemos muito parecido com o dos advogados.
que eles inicialmente nos mostraram.
YR: Por fim, como voc v o movimento do
YR: A vocs fazem anotaes, testam e ten- design de interao para os prximos cinco
tam reuni-las, ou o qu? anos? Enfrentando problemas apresentados
pelas novas tecnologias emergentes? Ou voc
GS: Utilizamos todos os tipos de coisas. Ano-
acha que haver mais desafios, especialmente
taes, vdeo, papel e canetas. Quando revisa-
com a integrao de software/hardware?
mos os materiais, eu geralmente os testo e
agrupo de alguma maneira temtica. muito GS: Acredito que com o surgimento de novas
complicado trabalhar com um software cujos tecnologias haver diferentes restries. No
elementos tenham sido colocados em uma es- importa o que estivermos projetando, temos
trutura coerente, mas de qualquer jeito. fcil que entender as restries da implementao.
escrever uma lista de observaes, mas quere- E penso que sim, diferentes coisas iro aconte-
mos reunir uma estrutura e um framework cer quando estivermos projetando mais produ-
maiores, o que leva semanas para ser constru- tos de hardware/software. Existem diferentes ti-
do. Precisamos de tempo para refletir e deixar pos de restries de custos e diferentes tipos de
baixar o p do que fizemos e do que talvez ti- interaes que voc pode realizar quando h
vssemos que ter feito. Precisamos salientar as hardware para fins especficos envolvidos. En-
questes e coloc-las em algum tipo de ordem quanto projetar a interao para aplicaes re-
maior. Se voc sempre opera em um nvel bai- quer conhecimento em design visual, projetar
xo de detalhe, como, por exemplo, preocupan- information appliances ou outros produtos de
do-se com e criticando o tamanho de um boto, hardware requer experincia com o design de
voc acaba resolvendo apenas questes meno- produtos. Definitivamente, teremos novos de-
res; no chega nunca aos grandes problemas safios.
do design de interao do produto os que de- Espero que nos prximos anos as pessoas pa-
veriam ser resolvidos primeiro. rem de buscar regras para o design de intera-
o. H, ultimamente, um grande esforo em
YR: Se voc recebe um produto ou um prot- tentar transform-lo em uma cincia. Talvez is-
tipo para avaliao e descobre que so mesmo so tenha acontecido porque muitos esto ten-
ruins, o que voc faz? tando faz-lo e no sabem por onde comear,
GS: Bem, nunca me sinto impulsionada a di- pois no dispem de muita experincia. Espe-
zer que algo seja realmente um erro. E, de qual- ro que as pessoas comecem a entender que o
quer sorte, essa talvez no seja a melhor estra- design de interao uma disciplina de design
tgia, porque a sua palavra contra a deles. Pe- que existem algumas orientaes e formas de
lo contrrio, acho que se deve tentar saber por se fazer um bom trabalho e que criatividade
que algo est errado ou apresenta falhas. Algu- combinada com pensamento analtico so ne-
mas vezes penso que agimos como advogados. cessrios para se chegar a bons produtos. Ser
Temos que reunir os fatos para descobrir o que ento uma atividade ainda mais interessante e
h de errado com o produto. Temos que apre- excitante do que j .