Apostila_design_de_interacao_e_interfaces_digitais

Prévia do material em texto

DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 1 
 ............................................................................................................................ 6 Apresentação
 .................................................................................................. 8 Aula 1: Cultura da Interface
 ............................................................................................................................. 8 Introdução
 .............................................................................................................................. 10 Conteúdo
História da interface ........................................................................................................ 10 
História da interface ........................................................................................................ 10 
Início da era dos computadores ................................................................................... 11 
Graphic user interface .................................................................................................... 12 
Mapeamento de bits ........................................................................................................ 12 
Cultura digital ................................................................................................................... 13 
Espaço-informação ......................................................................................................... 13 
Elementos WIMP .............................................................................................................. 14 
Profundidade da interface e a criação de ambientes ............................................... 15 
Excesso de informação ................................................................................................... 16 
Espaço simbólico ............................................................................................................. 16 
Macintosh x PC ................................................................................................................. 17 
A ação na inferface .......................................................................................................... 18 
Organização do espaço-informação ........................................................................... 19 
Tipos de ação na interface ............................................................................................. 19 
Movimento ........................................................................................................................ 20 
Círculo de feedbacks ....................................................................................................... 20 
Reconhecimento e manipulação ................................................................................. 21 
Affordances ....................................................................................................................... 22 
Interfaces gráficas digitais .............................................................................................. 22 
Atividade proposta .......................................................................................................... 23 
 ....................................................................................................................... 24 Aprenda Mais
........................................................................................................................... 25 Referências
 ......................................................................................................... 26 Exercícios de fixação
Chaves de resposta ..................................................................................................................... 33 
 ......................................................................... 36 Aula 2: Interação e comunicação digital
 ........................................................................................................................... 36 Introdução
 .............................................................................................................................. 38 Conteúdo
Interatividade: além do senso comum ........................................................................ 38 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 2 
Poder sobre a experiência .............................................................................................. 38 
Níveis de interatividade .................................................................................................. 39 
Web 2.0 .............................................................................................................................. 40 
Interatividade .................................................................................................................... 41 
A importância de ser programável ............................................................................... 42 
Natureza específica da interação digital ..................................................................... 43 
Ferramenta expressiva .................................................................................................... 44 
INTERFACE COMO ELEMENTO DA LINGUAGEM DIGITAL ..................................... 45 
PROGRAMABILIDADE ...................................................................................................... 45 
Linguagem da nova mídia ............................................................................................. 46 
CINCO PRINCIPIOS DE MANOVICH ............................................................................ 46 
Representação numérica e modularidade.................................................................. 47 
Representação da imagem ............................................................................................ 48 
Modularidade .................................................................................................................... 48 
Automação e variabilidade ............................................................................................ 49 
Variabilidade ..................................................................................................................... 50 
Estrutura complexa da mídia digital............................................................................. 50 
Atividade proposta .......................................................................................................... 51 
........................................................................................................................... 52 Referências
 ......................................................................................................... 53 Exercícios de fixação
Chaves de resposta ..................................................................................................................... 60 
 ..................................................................... 63 Aula 3: Interfaces, criatividade e inovação
 ........................................................................................................................... 63 Introdução
 .............................................................................................................................. 64 Conteúdo
Transcodificação: o acesso à informação na rede ................................................... 64 
Princípios de Manovich .................................................................................................. 64 
Código e linguagem ........................................................................................................ 65 
Hipermídia e hipertexto .................................................................................................. 65 
Hiperlinks ...........................................................................................................................66 
Rede de Bolter .................................................................................................................. 67 
Armazenamento .............................................................................................................. 67 
Produção de conteúdo ................................................................................................... 68 
Emergência ....................................................................................................................... 69 
O comportamento da informação na rede ................................................................ 70 
Protocolos de transferência ........................................................................................... 70 
Comunicação digital ....................................................................................................... 71 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 3 
Atividade proposta .......................................................................................................... 72 
 ......................................................................................................... 74 Exercícios de fixação
Chaves de resposta ..................................................................................................................... 82 
 ......................................................................................... 85 Aula 4: Interface, técnica e arte
 ........................................................................................................................... 85 Introdução
 .............................................................................................................................. 87 Conteúdo
O que a interface esconde? ........................................................................................... 87 
Influência da mídia impressa na linguagem da interface ........................................ 89 
Influência do cinema na linguagem da interface...................................................... 91 
Metáfora da interface ...................................................................................................... 92 
Representação e controle .............................................................................................. 94 
Arte digital ......................................................................................................................... 96 
Internet das Coisas .......................................................................................................... 98 
Atividade proposta .......................................................................................................... 98 
......................................................................................................................... 100 Referências
 ....................................................................................................... 101 Exercícios de fixação
Notas ......................................................................................................................................... 105 
Chaves de resposta ................................................................................................................... 106 
 ................................................................... 108 Aula 5: Interfaces, criatividade e inovação
 ......................................................................................................................... 108 Introdução
 ............................................................................................................................ 110 Conteúdo
Conceituando criatividade e inovação ...................................................................... 110 
Criatividade no contexto digital .................................................................................. 111 
Elementos lúdicos em interfaces gráficas ................................................................ 112 
Lazer e trabalho ............................................................................................................. 113 
Occulus Rift ..................................................................................................................... 114 
De onde vem a inovação ............................................................................................. 115 
Tokens ............................................................................................................................. 116 
Formação e crescimento das grandes civilizações ................................................. 117 
De onde vem a inovação: O império Romano ............................................................ 118 
O escrutínio do olho ..................................................................................................... 120 
Fronteiras borradas ........................................................................................................ 122 
Atividade proposta ........................................................................................................ 123 
......................................................................................................................... 124 Referências
 ....................................................................................................... 125 Exercícios de fixação
Notas ......................................................................................................................................... 129 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 4 
Chaves de resposta ................................................................................................................... 129 
 ......................................................................................... 131 Aula 6: Experiência do usuário
 ......................................................................................................................... 131 Introdução
 ............................................................................................................................ 133 Conteúdo
Comunicação através da interação ........................................................................... 133 
Contracultura ................................................................................................................. 134 
Trabalho com hardware ............................................................................................... 135 
Evolução Apple .............................................................................................................. 136 
O processo evolutivo da interação gráfica ............................................................... 136 
Affordances: possibilidades de interação.................................................................. 137 
Ambiente ......................................................................................................................... 138 
Alteração do homem no ambiente natural .............................................................. 139 
A “linguagem” das novas mídias ................................................................................. 140 
Ambientes digitais ......................................................................................................... 142 
O mapeamento de bits ................................................................................................. 143 
Termo affordance na interação humano-computador ......................................... 144 
Affordances presentes no ambiente digital .............................................................. 144 
Affordances na rede ...................................................................................................... 145 
Compartilhamento de dados ...................................................................................... 147 
Case: Facebook ..............................................................................................................149 
Mídias sociais .................................................................................................................. 149 
Affordance social ........................................................................................................... 150 
Atividade proposta ........................................................................................................ 151 
......................................................................................................................... 152 Referências
 ....................................................................................................... 153 Exercícios de fixação
Chaves de resposta ................................................................................................................... 156 
 .................................................................................. 158 Aula 7: Arquitetura da informação
 ......................................................................................................................... 158 Introdução
Interface eficiente vs interface amigável .................................................................. 160 
O usuário e a interface ................................................................................................. 160 
Usabilidade ...................................................................................................................... 162 
Norma ISO/IEC 9126-1 .................................................................................................. 163 
Participação ativa do usuário ...................................................................................... 163 
Dimensão ergonômica ................................................................................................. 164 
Surgimento da ergonomia ........................................................................................... 164 
Modelos mentais ............................................................................................................ 166 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 5 
Tipos de cognição ......................................................................................................... 168 
Acessibilidade ................................................................................................................. 170 
Atividade proposta ........................................................................................................ 171 
......................................................................................................................... 173 Referências
 ....................................................................................................... 174 Exercícios de fixação
Chaves de resposta ................................................................................................................... 178 
 ..................................................................................... 180 Aula 8: Visualidade da interação
 ......................................................................................................................... 180 Introdução
 ............................................................................................................................ 182 Conteúdo
Teoria das cores ............................................................................................................. 182 
A percepção da cor ....................................................................................................... 183 
Psicologia da cor ............................................................................................................ 184 
Tipografia ........................................................................................................................ 188 
O advento do computador .......................................................................................... 190 
Metáforas visuais ............................................................................................................ 191 
Atividade proposta ........................................................................................................ 193 
......................................................................................................................... 194 Referências
 ....................................................................................................... 195 Exercícios de fixação
Chaves de resposta ................................................................................................................... 199 
 ........................................................................................................................... 201 Conteudista
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 6 
Esta disciplina tem como objeto de trabalho o processo de comunicação entre 
humanos e computadores. Parte-se de um estudo dos conceitos de interação e 
interatividade, de modo a pensa-los além do senso comum. Os computadores e 
suas propriedades de expressão serão abordadas para definir o que 
entendemos como “interface digital”. 
 
A partir de exemplos concretos, objetiva-se dar ao aluno conhecimento com o 
qual possa repensar de forma criativa a nossa relação com os sistemas digitais 
e as possibilidades que emergem deste encontro. Entendemos que os 
computadores fazem emergir um novo tipo de linguagem: a linguagem da 
interação. 
 
O começo da discussão será centrado no conceito de interação e interatividade, 
uma das propriedades mais comumente atribuídas aos ambientes digitais. 
Analisaremos os principais componentes da interface digital, que se mostram 
presentes em todos os aparatos eletrônicos que usamos nos dia-a-dia. Isso nos 
levará a entender os usos destes conceitos em áreas diversas, como arte, 
aplicativos, redes sociais e games. 
 
Entendemos os computadores como elementos importantes na cultura e no dia-
a-dia contemporâneo. Essa influência é ainda mais acentuada no trabalho de 
quem lida com comunicação. Repensar os conceitos que rodeiam o tema, 
nunca deixando de observar a realidade concreta, é fundamental para 
despertar a inovação que essa mídia permite. 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 7 
Sendo assim, essa disciplina tem como objetivos: 
1. Conceituar interação, interatividade e interface, a partir da observação de 
casos concretos. 
2. Definir como a comunicação funciona nos ambientes digitais, a partir da 
análise de suas propriedades únicas. 
3. Demonstrar o funcionamento dos conceitos estudados em áreas distintas, 
procurando ampliar a compreensão da capacidade comunicacional das 
interfaces digitais. 
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 8 
 
Introdução 
Quando ouvimos a palavra “interface”, as imagens que saltam ao pensamento 
são, provavelmente, semelhantes à área de trabalho do nosso computador e 
aos botões que podem ser ativados na tela de um aplicativo de celular. Nesse 
sentido, a interface digital é o que se posiciona entre homem e máquina 
fazendo papel de tradutora, possibilitando o entendimento do funcionamento 
de aparelhos digitais. Essa função é essencial na comunicação contemporânea, 
e para conferir esse fato basta observar o uso de smartphones, tablets e outros 
sistemas eletrônicos. 
 
A concepção de interface, no entanto, ganha uma amplitude ainda mais 
significativa, se analisamos suas implicações com mais cuidado. 
 
Redes sociais, videogames, celulares e tablets possuem uma enorme 
quantidade de objetos programados e funções executáveis e oferecem 
possibilidades infindáveis de uso, que são reinventadas a cada minuto. Nesse 
contexto, as tecnologias de comunicação se tornam ambientes digitais que 
possuem capacidades expressivas. Hoje, podemos entender as interfaces 
digitais não apenas como mediadoras, mas como ambientes complexos. 
 
Desse modo, como podemos dar início a uma compreensãodos elementos 
básicos da interface e de como ela os usa para comunicar possibilidades de 
ação e, posteriormente, configurar um ambiente digital no qual podemos nos 
expressar culturalmente? 
 
 
 
 
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 9 
Objetivo: 
1. Apresentar o conceito de interface gráfica digital como uma forma de 
expressão originada ao longo da história dos computadores; 
2. Analisar os diferentes elementos que compõem a linguagem da interface 
gráfica, mostrando como criam desde ferramentas até ambientes culturais. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 10 
Conteúdo 
 
História da interface 
Por já ser algo tão corriqueiro na vida da maioria das pessoas interagir com 
aparelhos eletrônicos, atualmente, é difícil parar para pensarmos nas etapas 
que precisaram ser cumpridas para chegarmos a esse ponto. 
 
O primeiro objetivo desta aula é observarmos brevemente a história do 
desenvolvimento de interfaces digitais, mostrando como cada momento da sua 
evolução introduziu novas características que hoje tornam possível atuarmos 
em uma cultura da interface. 
 
Que estamos rodeados de computadores de diversos formatos (smartphones, 
tablets, notebooks e desktops) é algo fácil de notar; já afirmar que esses 
objetos ultrapassam a condição de meras ferramentas para tornarem-se 
verdadeiros agentes que definem nossa cultura é um movimento mais ousado. 
Como é possível comprovar isso na realidade? 
 
História da interface 
Por já ser algo tão corriqueiro na vida da maioria das pessoas interagir com 
aparelhos eletrônicos, atualmente, é difícil parar para pensarmos nas etapas 
que precisaram ser cumpridas para chegarmos a esse ponto. 
 
O primeiro objetivo desta aula é observarmos brevemente a história do 
desenvolvimento de interfaces digitais, mostrando como cada momento da sua 
evolução introduziu novas características que hoje tornam possível atuarmos 
em uma cultura da interface. 
 
Que estamos rodeados de computadores de diversos formatos (smartphones, 
tablets, notebooks e desktops) é algo fácil de notar; já afirmar que esses 
objetos ultrapassam a condição de meras ferramentas para tornarem-se 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 11 
verdadeiros agentes que definem nossa cultura é um movimento mais ousado. 
Como é possível comprovar isso na realidade? 
 
Início da era dos computadores 
Como ponto de partida, podemos nos localizar na era pré-interface gráfica, 
quando os computadores ainda estavam nos seus primeiros anos de existência. 
O matemático Alan Turing, um dos inventores da computação moderna, por 
exemplo, girava e apertava botões diretamente ligados aos circuitos dos 
enormes computadores que operava. 
 
Na Segunda Guerra Mundial, o cientista usou essa tecnologia para decifrar 
códigos alemães. Turing podia alterar o funcionamento dos circuitos e ver o 
resultado de sua ação em tempo real, sem abstrações como textos, cursores, 
entre outros. Para conseguir interagir com um computador nesse nível, porém, 
era preciso compreender sua arquitetura, as cadeias de correntes elétricas e as 
operações complexas que elas executavam. 
 
Ao longo das décadas de 1950 e 1960, usuários menos capacitados podiam 
interagir com computadores por meio de “linhas de comando”. Bastava digitar 
os códigos no teclado e esperar a máquina processar os dados de acordo com a 
ordem expressada. Ao mesmo tempo que esse modelo de interface tornava as 
coisas um pouco mais fáceis, ele possuía a desvantagem de não exibir seus 
resultados diretamente ao usuário. Era preciso digitar, por exemplo “apagar 
arquivo 1”, apertar enter e esperar o computador terminar a execução da 
ordem. 
 
As linhas de comando eram eficientes para processar e armazenar dados e 
funções que potencializaram as aplicações práticas dos computadores. Elas 
também viriam a ser usadas em videogames baseados em texto, como Colossal 
Cave Adventure (1977) e Zork (1979). Esses jogos tentavam simular um 
ambiente imaginário por meio de letras, nos quais o jogador orientava 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 12 
personagens através de comandos como “ir para o leste”, “pegar chave”, entre 
outros. 
 
Os jogos de texto fizeram enorme sucesso nas décadas de 1970 e 1980 e 
estabeleceram códigos próprios de interação. Segundo Michael Nietsche (2008), 
porém, uma interface em que informações visuais transmitem as possibilidades 
de ação em tempo real são mais acessíveis. Elas permitem aos jogadores 
“interagir com o botão de um elevador dentro do espaço virtual de Counter-
Strike”, por exemplo, sem precisar compreender códigos mais complexos, como 
os comandos utilizados em Zork e outros jogos textuais. 
 
Graphic user interface 
A passagem das linhas de comando para a GUI (graphic user interface) 
estendeu esse efeito para todas as outras aplicações computacionais. Nos 
videogames, isso é claramente visto com a adaptação de Colossal Cave 
Adventure para o Atari 2600. O jogo Adventure (1979) traduziu os textos e 
comandos do seu antecessor para espaços navegáveis através do joystick. 
Dragões e chaves apareciam como desenhos reconhecíveis, e seus movimentos 
e ações eram acompanhados diretamente, sem a necessidade de executar um 
comando por vez. Nos computadores pessoais, o mesmo ocorreu: o primeiro 
mouse, projetado por Douglas Engelbart, passeava pela tela do display 
transformando os dados que habitavam o disco rígido do computador em um 
espaço simulado. 
 
Mapeamento de bits 
Isso funcionava segundo um sistema de “mapeamento de bits”, desenvolvido 
por Engelbart com o propósito de vincular os pixels dos monitores às 
informações guardadas na máquina. Assim começava a nascer uma nova 
linguagem de interação, assimilável com muito mais facilidade, além de 
oferecer oportunidades novas para a expressão e criação por meio dos 
computadores (JOHNSON, 2001). 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 13 
Quando ocorria um movimento do mouse para a direita, o cursor 
imediatamente obedecia. Quem usava o mouse podia ver o resultado de sua 
manipulação imediatamente, o que causava a ilusão de que não havia um 
intermediário entre homem e máquina: o usuário sentia que estava 
manipulando os dados diretamente, assim como Alan Turing – mesmo que essa 
“mágica” fosse obra de um truque de programação. 
 
Cultura digital 
Esse primeiro momento da interface gráfica, embora simples, foi o estopim para 
a constituição de uma cultura digital abrangente e criativa. Segundo Steven 
Johnson, embora Engelbart não tenha sido o primeiro a tentar exibir imagens 
por meio de computadores, ele foi o pioneiro na tentativa de traduzir as 
informações binárias em um espaço-informação. 
 
A diferença da linguagem visual para a linguagem da interface, portanto, está 
nas informações e dados que cada interface manipula. As imagens e os textos 
são importantes, sem dúvida, mas as funções que eles executam são tão 
importantes quanto. Na primeira demonstração do uso de mouse, Douglas 
Engelbart demonstrou este primeiro passo: o mouse trafegava pelo espaço e 
permitia clicar em hiperlinks de texto que levavam a um gráfico ilustrativo. 
 
Espaço-informação 
Sendo assim, esse primeiro elemento da interface, o espaço-informação, 
poderia ser pensado como uma espécie de palco que viria a ser preenchido com 
outras funções. Na primeira demonstração de Douglas Engelbart, podemos ver, 
por exemplo, o cientista clicando em hiperlinks que levam a novos espaços com 
outras informações. 
 
O espaço-informação, a partir daí, foi constantemente aprimorado, e desses 
momentos podemos destacar alguns mais significativos. Um centro de pesquisa 
financiado pela Xerox, o Palo Alto Research Center, lançou, em 1973, um dos 
primeiros computadores para uso individual, o Xerox Alto. 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS14 
Ele contava com uma interface gráfica para ser usada com mouse e inaugurou 
o sistema de interfaces para computadores pessoais usado até hoje. Mais tarde, 
esse sistema seria conhecido como WIMP: “windows, icons, menus and pointer” 
(janelas, ícones, menus e ponteiro). Esses elementos podem ser pensados 
como uma espécie de sintaxe ou gramática das interfaces gráficas. Em outras 
palavras, são formas de comunicar possibilidades de ação por meio de uma 
representação espacial, visual e de movimento. 
 
Elementos WIMP 
 
(imagem representativa do WIMP) 
 
É possível encarar o WIMP como uma sistematização do que Steven Johnson 
chama de metáforas visuais. Se o espaço pelo qual o mouse trafega é o palco, 
as metáforas visuais seriam os atores da peça. A diferença é que cada metáfora 
visual, como ícones, por exemplo, pelo menos nesse momento, não atuavam, e 
sim ofereciam possibilidades de ação aos usuários. 
 
Metáforas visuais, portanto, fazem uso da linguagem cotidiana para nos 
comunicar ações possíveis de serem executadas pelo sistema do computador: 
armazenar arquivos, escrever textos, “fechar janelas” etc. Para fins didáticos, 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 15 
podemos eleger essas metáforas como o segundo elemento básico da 
linguagem da interface gráfica digital. 
 
Interface gráfica da área de trabalho do Macintosh (1980). Os elementos 
WIMP, nessa interface, já eram muito semelhantes na sua configuração às 
aplicações contemporâneas. Tanto por parte das interfaces baseadas em Linux, 
quanto as da Microsoft e da Apple. 
 
Atores importantes contribuíram para a solidificação desse sistema de interface 
realizando melhorias aqui e ali e desenvolvendo novas funções, articuladas pelo 
espaço-informação. Podemos destacar a linhagem dos primeiros 
microcomputadores da Apple, do Apple II, passando pelo Apple Lisa até o 
primeiro Macintosh. 
 
A Apple, sob o comando da dupla Steve Wozniak e Steve Jobs, teve importante 
papel na popularização das interfaces baseadas em linguagem gráfica. Logo a 
IBM entrou na disputa com a Apple, com preços mais competitivos. O mercado 
rapidamente seria dominado pelos computadores pessoais (PC). As interfaces 
gráficas WIMP são os nossos canais de comunicação para lidar com esses 
sistemas. 
 
Profundidade da interface e a criação de ambientes 
No entanto, seguindo a hipótese de Steven Johnson (2001), precisamos pensar 
a interface não apenas como uma facilitadora de tarefas corriqueiras como 
armazenar documentos, por exemplo. A interface gráfica digital torna-se, para 
o autor, aquilo que dispara uma mudança que gera uma nova categoria 
cultural. Como isso acontece? Johnson defende sua proposta com uma análise 
do romance e da TV e como esses representam a vida cotidiana nos séculos 
XIX e XX, respectivamente. 
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 16 
Excesso de informação 
As mudanças da Revolução Industrial foram capturadas em romances como os 
de Charles Dickens. O rádio, a TV e o cinema transmitiram ao público as 
narrativas que exploravam a modernização ocorrida no século XX. Na sociedade 
pós-moderna do final do século XX e do início do século XXI, o tema a ser 
representado é o excesso de informação. A interface faria o papel duplo de 
facilitar nosso tráfego em meio a esse mar de dados, ao mesmo tempo que 
mapeia nossa vida e a representa nas telas dos aparatos digitais. Todos os 
campos da vida cotidiana são representados e vivenciados na interface: 
trabalho, lazer, amor, amizade etc. 
 
É possível, portanto, perceber a diferença entre guardar um arquivo e criar 
ambientes culturais computacionais. As interfaces traduzem a linguagem 
computacional para a linguagem cotidiana (KITTLER, 1995). A linguagem 
computacional é feita de processos elétricos e dados binários (bits). O 
mapeamento de bits permite dar forma a esses dados. Por exemplo, pode-se 
criar imagens e movimentá-las, deletá-las, armazená-las etc. 
 
Espaço simbólico 
O próximo passo é compreender como as interfaces gráficas conseguem 
simular um espaço simbólico que se expande para além da tela de um monitor. 
A tela de um celular, por exemplo, é muito menor do que a quantidade de 
dados que ela pode mostrar com seus pixels. Para podermos exibir vários dados 
e selecionar quais queremos ver (e quando), a interface cria uma dimensão de 
profundidade para sua linguagem. Propomos esse como o terceiro elemento da 
linguagem da interface. 
 
A área de trabalho (ou desktop) nasceu de uma inovação de Alan Kay, no Xerox 
PARC, que criou um espaço permanente no qual diversas aplicações 
apareceriam e poderiam ser substituídas por outras. Segundo Steven Johnson, 
essa inovação dá ao computador mais do que espacialidade: ela traz 
profundidade. Quando minimizamos um arquivo PDF e abrimos um vídeo, 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 17 
estamos sendo agentes de uma metáfora: seria como guardar uma folha de 
papel na gaveta e pegar uma outra para ler. Assim, o que podemos ver no 
monitor é apenas o que está na nossa frente naquela hora: o espaço profundo 
da interface se amplia para além da tela e para o que está “atrás”, guardado na 
memória interna do disco rígido. 
 
Os designers de interface possuem a intrigante tarefa de comunicar formas de 
se locomover por esse espaço profundo, por meio de ações que devem ser 
facilitadas pela organização do espaço em si. Johnson compara esse trabalho 
com o da arquitetura: quando escolhe as posições das saídas e escadas em um 
edifício, o arquiteto possui um objetivo em mente. Em um prédio residencial, 
essas posições serão diferentes de como seriam em um shopping; enquanto um 
prioriza elementos de praticidade cotidiana, o segundo leva em conta a 
necessidade de fazer o cliente caminhar em volta do shopping por mais tempo 
a fim de, obviamente, maximizar as chances de o seu usuário comprar algo. 
De forma semelhante, Alan Kay introduziu a metáfora do desktop de modo a 
facilitar a vida dos usuários de computadores, quando esses realizassem tarefas 
simples. E sua inovação foi aperfeiçoada em diferentes frentes com diferentes 
efeitos. A batalha de sistemas operacionais travada pela Microsoft e pela Apple, 
por exemplo, sugere como duas interfaces podem produzir atitudes culturais 
distintas a partir de suas organizações espaciais e das informações que elas 
veiculam ao usuário. 
 
Macintosh x PC 
Depois do Macintosh, lançado em 1984, a interface gráfica dos computadores 
da Apple prezaram pela fluidez nessa comunicação, enquanto os PCs ainda 
conservavam a herança das linhas de comando e dos códigos mais complexos. 
Daí nasceu a visão, não necessariamente correta, de que a Apple priorizava o 
trabalho artístico e visual nas suas aplicações. Essa visão ignora o fato de que a 
criação de imagens pode servir não necessariamente como fim, mas como meio 
de comunicação com o usuário. 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 18 
Como a introdução de uma dimensão de profundidade produz uma linguagem 
que cria ambientes? Vamos expandir o que entendemos por ambiente no 
restante da Aula; por enquanto, podemos dizer que as interfaces, através da 
sua profundidade, podem ser mais do que ferramentas para produzir resultados 
pragmáticos. Elas servem como lugares de expressão, de vivência e 
experiência. A internet torna isso evidente quando une pessoas através de seus 
ambientes digitais, mas mesmo um computador na década de 1980 servia 
como ambiente de criação e manifestação da cultura da época. 
 
A ação na inferface 
A comunicação através de metáforas visuais é uma linguagem complexa e 
ainda em desenvolvimento, sujeita a falhas de experimentação por parte de 
quem a usa. Steven Johnson ressalta os exemplos do Microsoft Bob e o Magic 
Cap, aplicações que levaram ao extremo a premissa de “imitar” o mundo real. 
Observe: 
 
Telas da interface Magic Cap. 
Existe uma diferençafundamental entre essas interfaces e a interface WIMP do 
Macintosh: as janelas do Macintosh não possuem as mesmas propriedades das 
janelas de uma casa real. A diferença entre a janela do Macintosh e a janela 
“de verdade” é o que torna a metáfora efetiva: a metáfora vincula um processo 
da vida concreta (cada janela exibe uma paisagem) a um processo digital (abrir 
uma janela para ver um editor de texto ou outra janela para ver um editor de 
imagens, por exemplo). Cada janela da interface exibe uma aplicação. Mas 
essas “janelas” podem ser movidas, minimizadas e encerradas, ações 
impossíveis com uma janela “de verdade”. 
 
Tela da interface do Microsoft Bob. 
O Microsoft Bob e o Magic Cap ignoravam essa diferença necessária entre o 
que a metáfora visual “imita” e o que ela executa de fato. Eles criaram 
simulações de salas de trabalho, e não metáforas. O espaço-informação de uma 
área de trabalho não deve se aproximar totalmente da experiência de uma sala 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 19 
de trabalho convencional. As duas aplicações tentaram simular processos 
cotidianos no computador, possibilitando experiências familiares, mas que, 
assim como no cotidiano, podem facilmente tornarem-se tediosas e difíceis. O 
que os designers dessas ferramentas ignoraram é que a tecnologia digital 
permite eliminar pequenos tédios e dificuldades, guardando apenas o familiar e 
a necessidade. 
 
Organização do espaço-informação 
A organização do espaço-informação é um processo que depende diretamente 
da ação que o usuário faz dele. Sendo assim, é importante reconhecer as 
unidades fundamentais da interface e quais espécies de espaço-informação 
podem ser construídos com diferentes combinações de metáforas visuais. 
Igualmente importante é saber que tipos de ações os usuários desempenham. 
Podemos reduzir as ações dos usuários a algumas categorias básicas, seja uma 
interface complexa, como a de um jogo eletrônico ou software de edição de 
vídeo ou uma interface mais simples, como a de um site corporativo,. 
 
A primeira pista é o conceito de mapeamento de bits desenvolvido por Douglas 
Engelbart. Para Steven Johnson, relacionar os dados do computador a uma 
lógica espacial cria uma metáfora visual. A pesquisadora Katheryn Hayles 
(1999) leva essa forma de pensar a outro nível. Descrevendo a experiência de 
navegar em um espaço simulado digitalmente, a autora diz que “as fronteiras 
relevantes são definidas menos pela pele e mais pelo círculo de feedbacks que 
conecta corpo e simulação, em um circuito integrado de forma biotecnológica”. 
 
Tipos de ação na interface 
Que tipo de ação podemos exercer nessas interfaces? Obviamente, as mais 
variadas possíveis. Como dito anteriormente, porém, vamos começar das mais 
simples. Se pensarmos as interfaces como ambientes digitais, precisamos de 
mecanismos para explorar esses ambientes. Para entender como a exploração 
acontece, é possível recorrer à pesquisa de Hans Moravec (1988). Trabalhando 
com robótica no MIT, esse cientista percebeu que jamais conseguiríamos criar 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 20 
robôs inteligentes e racionais se nem ao menos sabemos programá-los para 
executar tarefas aparentemente simples, como abrir portas ou diferenciar uma 
fruta de uma granada de mão. 
 
Moravec percebeu que o comportamento exploratório é presente na natureza e 
executado pelos animais mais primitivos. A partir disso, seu grupo no MIT 
começou a tentar simular esse comportamento em robôs. O que isso pode ter a 
ver com interface? Hans Moravec dividiu as ações básicas da exploração de 
ambientes, e é justamente isso que nos pode ser útil para pensar o mesmo tipo 
de comportamento nos ambientes simulados pelas interfaces gráficas. 
 
Movimento 
A primeira habilidade que compõe o comportamento exploratório é o 
movimento. Moravec mostrou que a inteligência animal só pôde se 
desenvolver graças ao movimento. Seres vivos que não possuem essa 
capacidade, como as árvores, não desenvolveram qualquer coisa que possamos 
chamar de inteligência. Mobilidade nos permite chegar a espaços com 
informações novas, que por suas vezes podem nos nutrir de forma positiva ou 
negativa. Só com o movimento podemos chegar às fontes de diferença 
necessárias para a realização de tarefas novas. 
 
Círculo de feedbacks 
A pista que o mapeamento de bits nos dá é que o movimento também foi a 
primeira habilidade desenvolvida na cultura da interface, com o mouse de 
Engelbart. Não é à toa que Steven Johnson elegeu esse como o momento 
inaugural da cultura da interface: ele é o primeiro passo para a constituição de 
ambientes digitais. O círculo de feedbacks (HAYLES, 1999) entre um ser 
humano, o mouse, o computador e a tela produziram a capacidade de 
representar a movimentação e a locomoção, as habilidades mais básicas e 
fundamentais da cultura da interface. 
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 21 
Porém, não se pode parar aqui. O movimento puro e simples só é funcional se 
aplicado de forma sistemática. É preciso ter alguma ideia de onde queremos 
chegar, o que queremos achar e como faremos pra voltar para o lugar de onde 
saímos. A habilidade de construir relações entre diferentes pontos do espaço é 
a navegação. Navegar significa coordenar o próprio movimento para evitar 
ameaças, otimizar o trajeto e as ações que se precisa realizar no caminho. 
 
Obviamente não é coincidência que o verbo “navegar” é usado 
frequentemente para se referir à experiência de agir na internet. E também não 
é coincidência que muitos sites, há alguns anos, possuíam “mapas” que 
esquematizavam as conexões entre as páginas, com a meta de facilitar o uso. 
Hoje a maioria das interfaces procura construir esse mapa de forma intuitiva; 
elas são planejadas de modo a permitir que os usuários identifiquem as 
possibilidades de ação imediatamente e possam fazer o que desejam da forma 
mais fluida. Cada função de uma interface se posiciona em pontos do espaço-
informação. 
 
Portanto, a capacidade de fazer com que o usuário ache e execute uma função 
de forma “intuitiva” é construir mecanismos de navegação (mesmo que sutis), 
ou seja, mecanismos que o ajudem a construir um plano de movimento e ação 
no ambiente. 
 
Reconhecimento e manipulação 
As últimas habilidades identificadas por Moravec na prática da exploração são o 
reconhecimento e a manipulação. Logicamente, mais do que nos movimentar e 
navegar, geramos mudanças nas interfaces com as quais interagimos. É assim 
que criamos cadeias de feedbacks que nos permitem entender como elas 
funcionam e agir novamente para ver e criar coisas novas. A manipulação, 
porém, exige antes o reconhecimento de funções. Outra tarefa importante do 
designer de interface, portanto, é mostrar ao usuário o que é possível fazer 
naquele ambiente. 
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 22 
Novamente, a raiz desse processo está no mundo concreto. O psicólogo James 
J. Gibson (1986) já havia demonstrado, em sua pesquisa sobre a percepção 
visual, que um ambiente nos informa a todo momento o que podemos fazer 
nele. O chão possibilita sustentação, e uma árvore informa que podemos 
descansar sob a sua sombra. Essas possibilidades são diferentes para cada 
organismo: um pássaro enxerga em uma árvore a possibilidade de pousar ou 
construir um ninho, e a água possibilita sustentação a certos insetos, mas não a 
seres humanos. 
 
Affordances 
Gibson deu o nome de affordances às possibilidades de ação que cada 
elemento do ambiente informa a cada organismo. Esse conceito serviu 
perfeitamente aos designers, já que seu trabalho é justamente possibilitar, 
através da forma dada a objetos, um certo tipo de ação possível. Nesse 
sentido, por mais que não pensemos nisso imediatamente, cada objeto do dia a 
dia, desde maçanetas até portas de emergência, é pensado com o objetivo 
de comunicar e possibilitar seususos desejáveis através de sua forma, cor, 
peso, textura etc. (NORMAN, 1990; 1999). 
 
Esses atributos são concebidos com um usuário ideal em mente. Uma criança, 
por exemplo, pode não ter altura para usar uma maçaneta, e os problemas de 
acessibilidade nas grandes metrópoles são falhas de quem não prevê a 
existência de deficientes físicos em espaços urbanos. Isso mostra que as ações 
possíveis dependem tanto do instrumento quanto do usuário; os processos são 
feitos em conjunto pelos dois, e as affordances surgem quando eles se unem. 
 
Interfaces gráficas digitais 
O mesmo se pode aplicar a interfaces gráficas digitais. Elas são organizadas 
computacionalmente e espacialmente de forma a possibilitar a integração entre 
usuário e máquina; desse pareamento, affordances únicas emergem. Mas qual 
seria a essência das interfaces em relação a uma xícara, uma porta ou uma 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 23 
calculadora? Todos esses são objetos aos quais nos conectamos para gerar 
processos únicos. 
 
No contexto dessa pergunta, volta a ser importante pensar as interfaces digitais 
como ambientes que produzem condições de manifestação da cultura humana. 
É seguro afirmar que esses ambientes devem ser analisados segundo suas 
particularidades, e o design das interfaces determina o que se pode fazer neles, 
como essas ações podem ser achadas e executadas e ainda pode possibilitar a 
formação de novas conexões entre os elementos da interface para se 
expressarem criativamente (algo que acontece nas redes sociais, por exemplo, 
com bastante frequência). 
 
Atividade proposta 
Durante a última aula, falamos sobre computadores e suas interfaces. Ao longo 
da história mais recente da tecnologia digital, novos suportes começaram a 
ganhar importância na comunicação entre as pessoas. Sobretudo, estamos 
falando de smartphones e tablets, aparelhos que possuem uma diferença 
fundamental em relação aos computadores: a maioria dos modelos mais usados 
e cobiçados, como o iPhone e a linha Galaxy da Samsung, usam telas sensíveis 
ao toque – não há ponteiro ou mouse. Apesar disso, é possível dizer que suas 
interfaces fazem uso dos mesmos conceitos básicos que estudamos aqui. 
 
Como podemos relacionar a interface do iPhone com os seguintes conceitos: 
mapeamento de bits/espaço-informação; metáforas visuais; e profundidade da 
interface? 
 
Chave de resposta: Mapeamento de bits/espaço-informação: 
No que se refere a esse tipo de recurso, um smartphone touch-screen (como o 
iPhone) faz algo análogo ao que o mouse de Engelbart introuduziu há décadas 
atrás. Afinal, ele usa mecanismos de detecção e rastreamento de toques e 
movimento do dedo e vincula esses processos a uma representação que 
aparece na tela (um ícone se movendo, uma janela se abrindo etc.). Isso é 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 24 
possível porque um espaço-informação foi criado pela vinculação entre o 
espaço da tela sensível ao toque e os dados armazenados no disco rígido do 
aparelho. 
 
Metáforas visuais: 
Praticamente todas as imagens que provocam alguma mudança quando 
tocadas comunicam que mudanças serão essas. Essa comunicação é feita 
através de metáforas visuais: ícones que representam aplicativos são os 
exemplos mais claros. Por suas vezes, as interfaces desses aplicativos 
provavelmente farão uso de imagens que podem ser tocadas para produzir as 
funções da aplicação: a visualidade dessas imagens comunica possibilidades de 
interação (affordances). 
 
Profundidade da interface: 
Os smartphones mantêm uma das mais importantes características das 
interfaces gráficas digitais, a profundidade, e faz isso através do gerenciamento 
do espaço-informação. Quando usamos múltiplos aplicativos simultaneamente, 
por exemplo, os mecanismos que executamos para navegar entre as janelas 
denota a profundidade da interface, que simula um espaço maior que a tela do 
telefone. 
 
Aprenda Mais 
 
Material complementar 
 
 
Para saber mais sobre o conteúdo analisado, leia a resenha do livro Cultura da Interface, 
disponível em nossa biblioteca virtual. 
 
 
 
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 25 
Referências 
GIBSON, James J. The Ecological Approach to Visual Perception. Londres: 
Psychology Press, 1986. 
 
Hayles, N. Katherine. How We Became Posthuman: Virtual Bodies in 
Cybernetics, Literature, and Informatics. Chicago: University of Chicago Press, 
1999. 
 
JOHNSON, Steven. Cultura da interface: como o computador transforma 
nossa maneira de criar e comunicar. Rio de Janeiro: Jorge Zahar Editor, 2001. 
 
KASTRUP, Virgínia. A invenção de si e do mundo: Uma introdução do tempo 
e do coletivo no estudo da cognição. Belo Horizonte: Autêntica, 2007. 
 
KITTLER, Friedrich. There is no software. 1995. Disponível em: < 
http://www.ctheory.net/articles.aspx?id=74- Acesso: 07 fev. 2014. 
 
MORAVEC, Hans. Mind Children: The future of robot and human intelligence. 
Cambridge, Massachussetts: Harvard University Press, 1988. 
 
NITSCHE, Michael. Video Game Spaces: Image, Play, and Structure in 3D 
Worlds Cambridge: The MIT Press, 2009. 
 
NORMAN, Donald. The Design of Everyday Things. New York: Doubleday, 
1990. 
 
NORMAN, Donald. Affordance, conventions, and design. Interactions, v. 6, 
n. 3, p. 38-43, 1999. 
 
 
 
http://www.ctheory.net/articles.aspx?id=74-
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 26 
Exercícios de fixação 
Questão 1 
Os computadores, antes da invenção do mouse, exigiam um entendimento 
relativamente complexo de seu funcionamento. Com o uso do mouse, 
demonstrado pela primeira vez por Douglas Engelbart, é possível que o usuário 
compreenda suas ações sem necessariamente entender como um computador 
funciona. Como é possível explicar esse fenômeno? 
a) O mouse aparenta ser mais fácil de ser usado porque usa um código mais 
complexo e com mais possibilidades. O usuário precisa pensar em cada ação 
que está fazendo e raciocinar logicamente para usar esse código da melhor 
maneira. 
b) Engelbart programou o mouse de forma que quem o movimentasse pudesse 
ver o resultado da ação imediatamente exposto na tela. Em pouco tempo, o 
usuário aprende o que cada movimento causa sem necessariamente perceber 
esse aprendizado. 
c) O mouse é controlado por movimento, o que quer dizer que existe uma 
dimensão não digital no processo de interação. Assim, é possível ultrapassar a 
linguagem da máquina, que é intraduzível para o ser humano. 
d) O mouse é eficiente porque o usuário não precisa compreender os resultados 
visuais das suas ações na tela. Isso facilita o processo de interação para 
pessoas pouco acostumadas com tecnologia, que podem compreender suas 
ações apenas através do movimento. 
 
Questão 2 
O “truque de programação” usado por Engelbart, e que é repetido até hoje, é o 
mapeamento de bits. Ele é responsável por construir o palco no qual a cultura 
da interface se manifesta. Como é possível descrever esse truque em poucas 
palavras? 
a) Mapeamento de bits é uma metáfora usada para descrever a manipulação de 
dados brutos. Embora possa parecer, esses dados não estão vinculados ao 
espaço bidimensional da tela. Eles estão encerrados na memória interna do 
aparelho e não produzem efeitos visuais e espaciais. 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 27 
b) O mapeamento de bits é uma forma de perceber o movimento do mouse e 
transformá-lo em dados. O usuário movimenta o mouse (ou outra ferramenta), 
e a máquina mapeia esse processo e transforma a tela em uma simulação 
bidimensional. 
c) Mapeamento de bits é o processo de simular um espaço bidimensional no 
interior do disco rígido do computador. O papel da interface é apenas exibir 
imageticamente a forma que esses dados assumem no interior da máquina. 
d) Mapear bits significa ligar os pixels (as menores unidades da imagem exibida 
em uma tela de computador) aos dados binários armazenadosno disco rígido. 
Engelbart ligou a memória do computador ao espaço da tela, possibilitando que 
esse espaço fosse manipulado com ferramentas como o mouse. 
 
Questão 3 
Apresentamos na aula o conceito de espaço-informação, sendo possível 
descrevê-lo como uma linguagem que informa através de uma organização 
espacial que permite a ação do usuário. Qual seria um exemplo incorreto desse 
conceito? 
a) Um site pode construir através das suas cores, fontes do texto e formato dos 
menus e botões, informando ao usuário certas características, como tradição, 
bom humor, seriedade etc. Tudo depende da visualidade imaginada pelos 
designers. 
b) Uma página na internet pode exibir no seu topo diversas bandeiras de países 
que indicam os idiomas nos quais ela está disponível. O usuário pode clicar e lê-
la em outra língua. 
c) Um editor de texto simula um espaço bidimensional em forma de página, que 
nos permite digitar e formatar um texto e ver como ele será impresso. 
d) Uma editor gráfico permite, através de ferramentas diversas, alterar o brilho, as 
cores, as dimensões e até mesmo a forma de imagens. As possibilidades de 
manipulação são comunicadas pelo espaço da interface. 
 
 
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 28 
Questão 4 
Se o espaço-informação é a base para a construção da interface, a metáfora 
visual seria um dos tipos de peças que compõem seu cenário. Como é possível 
descrever sua função? 
a) Metáfora visual é o processo que ocorre quando o usuário manipula uma 
imagem no computador. Embora ele visualize a imagem na tela, a metáfora é 
feita nos circuitos internos da máquina. 
b) A metáfora visual é uma simulação das tarefas que fazemos no dia a dia. Os 
designers de interface tentam transferir para o mundo digital processos como 
guardar arquivos. Quanto mais parecidos eles forem com a realidade, mais 
eficiente a metáfora visual será. 
c) A metáfora visual é um recurso para estabelecer a identidade visual da 
interface. E a aparência dos objetos é mudada de acordo como a vontade do 
designer, que influencia o usuário através de cores e formas. 
d) A metáfora visual indica uma tarefa possível de ser realizada através de uma 
imagem, ícone, botão ou forma manipulável na tela. Por exemplo, um “botão” 
com um “X” desenhado é uma metáfora que indica a possibilidade de encerrar 
uma aplicação na interface. 
 
Questão 5 
Para Steven Johnson, o erro das interfaces Magic Cap e Microsoft Bob é levar a 
função das metáforas visuais muito ao pé da letra. Por que esse erro gera 
consequências tão graves? 
a) As interfaces eliminaram muitas etapas presentes em tarefas cotidianas. Para 
compreender uma metáfora visual, o usuário precisa realizar a tarefa 
exatamente da maneira como ele a executa no seu dia a dia, mesmo que isso 
signifique uma experiência tediosa. 
b) O erro gera consequências ruins, pois a tela do computador não conseguia, 
principalmente naquela época, simular espaços compreensíveis para o usuário. 
Dessa forma, ela se torna pouco eficiente, pois resulta em um espaço pouco 
convincente. 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 29 
c) As interfaces possuem design visual muito pobre, misturando muitas cores e 
formas numa mesma tela. Isso confunde o usuário, que pode não perceber a 
metáfora visual que indica a função desejada naquele momento. 
d) Porque no computador temos a possibilidade de eliminar etapas tediosas de um 
determinado processo. Por exemplo, se quisermos sair de um navegador web e 
abrir um jogo, basta trocar de janelas. As interfaces citadas obrigavam o 
usuário a percorrer muito mais etapas, como se mover por um espaço virtual 
muito amplo para trocar de aplicação. 
 
Questão 6 
Uma das premissas para tratarmos as interfaces gráficas como formas de 
expressão cultural é a de que elas podem criar ambientes, e não apenas 
ferramentas com usos pragmáticos. Com isso em mente, considere as 
afirmações: 
I. As interfaces são fundamentais para armazenar as memórias culturais no 
nosso mundo. Isso as torna ambientes responsáveis por organizar os 
verdadeiros componentes da nossa cultura. 
II. Podemos chamar as interfaces digitais de ambientes porque os dados 
binários aos quais elas se associam formam ambientes matemáticos no interior 
dos discos rígidos dos computadores. 
III. Além de finalidades “práticas” como guardar documentos em arquivos, o 
usuário pode explorar a interface para descobrir maneiras de criar e 
compartilhar dados e informações, aumentando as possibilidades de expressão 
individual e colaborativa. 
IV. As interfaces oferecem a possibilidades de ação e manifestação de relações 
de amizade, trabalho e trocas culturais em geral. 
Quais delas representam corretamente as motivações que nos permitem 
chamar certas interfaces de ambientes digitais? 
a) I e III 
b) I, II e IV 
c) II, III e IV 
d) III e IV 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 30 
Questão 7 
Ao criar a metáfora do desktop, Alan Kay inventou um mecanismo que facilita a 
ação do usuário e cria profundidade para a interface. Por que esse 
desenvolvimento é tão importante para a produção de ambientes digitais nos 
computadores? 
a) O desktop funciona como a principal área de atuação do usuário. Sendo assim, 
essa profundidade significa que o usuário precisa manipular menos aplicações e 
tem menos possibilidades de ação, o que o impede de “se perder” no meio 
delas. 
b) O desktop reúne todas as ferramentas práticas de um computador: possibilita 
acessar pastas e guardar documentos. Sendo assim, sua função é facilitar a 
principal finalidade dos computadores: armazenagem de dados. 
c) Sabemos que dados binários podem representar imagens, vídeos, sons e várias 
outras formas expressivas. Dar profundidade à interface significa possibilitar 
que o usuário experimente, manipule e execute esses dados na ordem que 
achar melhor, pois pode organizá-los no espaço virtual com mais eficiência. 
d) O desktop adiciona profundidade, pois ele é a primeira camada do espaço-
informação. Ele é feito a partir do mapeamento de bits e, portanto, possibilita a 
simulação de um ambiente. 
 
Questão 8 
Para a autora Katherine Hayles, existem duas maneiras de pensar a relação 
entre humano e máquina. Tudo depende do ponto de vista sob o qual 
consideramos a relação entre os dois. O ponto de vista antigo, para Hayles, 
posiciona uma barreira entre nós e o que é maquinal. Como é possível resumir 
a proposta da autora para repensar essa dicotomia? 
a) É preciso repensar a diferença entre ser humano e máquina. Se 
compreendermos que não é possível estabelecer uma comunicação totalmente 
efetiva, chegaremos à conclusão de que os ambientes digitais são, no fundo, 
máquinas de calcular e processar dados. 
b) A autora propõe que os computadores irão romper com a lógica das relações 
humanas. As pessoas passarão a se relacionar apenas através do mundo 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 31 
digital. Como isso é inevitável, resta apenas criar condições propícias para essas 
relações digitais. 
c) Hayles alega que não existe diferença entre humano e máquina. No contexto 
da tecnologia atual, é possível perceber que os computadores estão cada vez 
mais complexos, e já não há diferenças entre interagir com eles ou com outras 
pessoas. 
d) Podemos relevar a diferença que existe entre humano e máquina e pensar as 
trocas de informações que podem ocorrer entre eles. Assim, compreendemos 
um fluxo contínuo de comunicação que nos possibilita agir em um ambiente 
digital, por exemplo. 
 
Questão 9 
Propomos a exploração como a principal forma de se comportar nas interfaces 
gráficas. Qual das alternativas a seguir não representa um motivo pelo qual 
podemos dizer que exploramos os ambientes digitais? 
a) Ambientes digitais são navegáveis. Isso significa que temos diversas rotas 
possíveis de serem seguidas e diversos destinos aos quais podemos chegar. 
Paranão chegarmos ao destino errado, é preciso planejar as ações e escolher o 
melhor percurso. 
b) Ambientes digitais são navegáveis. Como são digitais, funcionam numa lógica 
binária. Navegar nos ambientes significa compreender sua natureza matemática 
e saber fazer exatamente o que queremos. 
c) É possível se movimentar em ambientes digitais. Como os dados do 
computador são mapeados pela interface, o resultado é uma simulação espacial 
que nos permite a locomoção: mudar de pastas, arquivos, mover o cursor e a 
barra de rolagem. Todas essas ações representam o movimento em um 
ambiente. 
d) É possível se movimentar em interfaces gráficas. Cada uma delas estipula suas 
regras de movimentação. Por exemplo, em um jogo como Adventure, o jogador 
move o quadrado pelos corredores com “paredes” que impedem o movimento. 
Em um site, os hiperlinks e botões podem nos mover para outras áreas. 
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 32 
Questão 10 
A affordance, para o psicólogo James Gibson, é a possibilidade de ação que 
surge do pareamento entre dois ou mais elementos em um ambiente, ação 
essa que só pode acontecer quando eles se unem. Nos ambientes digitais, 
esses elementos podem ser pessoas e funções da interface, por exemplo. Qual 
das opções a seguir não representa uma affordance? 
a) Em um computador, é possível computar qualquer problema calculável de 
forma binária e representar qualquer dado armazenável dessa maneira. 
b) Uma pessoa pode usar um microfone e o botão “REC” em um software de 
gravação de som para criar um arquivo digital de áudio com sua voz. 
c) É possível usar o recurso de criação de grupos do Facebook para organizar uma 
comunidade com o objetivo de traduzir um artigo ou texto de forma 
colaborativa. 
d) Um pesquisador pode usar um mecanismo de busca em um site de notícias 
para organizar um banco de dados com todas as matérias sobre um 
determinado assunto. 
 
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 33 
Aula 1 
Exercícios de fixação 
Questão 1 - B 
Justificativa: A pessoa desloca o mouse e logo vê o cursor se movendo de 
acordo com o modo como o mouse foi movimentado. É um processo diferente 
das linhas de comando, que exigem o aprendizado de uma sintaxe, uma 
linguagem estruturada. O mouse exige apenas uma habilidade amplamente 
desenvolvida do aparelho sensório-motor humano: reconhecer padrões de 
movimento. 
 
Questão 2 - D 
Justificativa: Essa é a grande epifania de Douglas Engelbart: a tela antes era 
usada apenas para exibir dados, mas, com o mapeamento de bits, ela foi 
transformada em uma simulação espacial, uma espécie de ilusão criada através 
de código. O espaço bidimensional da tela deixa de ser um projetor de imagens 
e texto para ser um espaço virtual onde se pode manipular a posição das 
coisas, abrir novos espaços e criar pontes entre eles. 
 
Questão 3 - A 
Justificativa: Como dito no enunciado, o espaço-informação comunica através 
de possibilidades de ação. A identidade visual de um site certamente informa a 
quem o acessa; no entanto, quando falamos de design de interação, estamos 
falando de criação de ferramentas de manipulação, navegação e movimento – 
diferentemente de impressões causadas pela aparência do site, e não nas ações 
que ele mostra ao usuário serem realizáveis. 
 
Questão 4 - D 
Justificativa: Uma imagem presente na interface gráfica comunica não só cores 
e formas, mas também uma possível intervenção nos dados ali exibidos. Nós 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 34 
compreendemos através da imagem de um “x” desenhado em um botão de cor 
vermelha que podemos fechar aquela janela e finalizar a atuação do programa. 
 
Questão 5 - D 
Justificativa: A arte de criar uma metáfora visual eficiente consiste, para Steven 
Johnson, em criar uma imagem que lembre algo familiar, indicando uma ação 
executável na interface relacionada a essa familiaridade. Mas, na hora de criar 
as condições dessa ação, o designer pode eliminar etapas tediosas (como ter 
que andar até o escritório, abrir uma gaveta e procurar um arquivo específico 
dentro de uma pasta escondida no fundo). As interfaces gráficas Magic Cap e 
Microsoft Bob praticamente não eliminaram essas etapas, pois acreditaram que 
isso tornaria o processo de interação mais fácil. O que eles não perceberam é 
que também o torna mais tedioso. 
 
Questão 6 - D 
Justificativa: As opções III e IV saem da visão limitada que trata os 
computadores como ferramentas. Elas mostram que eles podem funcionar 
como ambientes, ou seja, que podemos usá-los como plataformas para 
expressar dimensões da vida e aumentar as possibilidades de manifestações 
culturais e criativas. 
 
Questão 7 - A 
Justificativa: A profundidade trazida pelo desktop adiciona uma camada de 
complexidade à manipulação dos dados guardados no computador. É como se 
o espaço-informação pudesse assumir uma tridimensionalidade, onde podemos 
organizar nossos objetos em diferentes lugares, sempre podendo voltar para 
uma área de trabalho fixa. Isso contribui bastante para a simulação de um 
ambiente, pois podemos explorar suas possibilidades, criar combinações e 
expressar formas comunicativas. 
 
 
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 35 
Questão 8 - D 
Justificativa: Podemos analisar os fluxos de informações que trafegam quando 
usamos um computador, smartphone ou tablet. As interfaces gráficas facilitam 
a percepção de informação. Por exemplo, as coisas que podemos fazer com 
aquele objeto: eles nos comunicam essas possibilidades pela organização do 
espaço-informação. Independentemente das diferenças entre homem e 
máquina, essa comunicação é possível e efetiva, se estabelecida com sucesso. 
 
Questão 9 - B 
Justificativa: Todas as opções descrevem como ações que definem a exploração 
de ambientes reais e que podem ser representadas em uma interface gráfica. A 
segunda opção, ao contrário, ignora a conexão entre ambientes digitais e 
ambiente concreto. Não precisamos compreender o funcionamento matemático 
das interfaces, precisamos compreender as possibilidades de ação que elas nos 
oferecem e o que e como podemos produzir com elas (assim como em um 
ambiente). 
 
Questão 10 - A 
Justificativa: A primeira opção, ao contrário das outras, não descreve uma ação 
que surge do encontro de vários elementos. Ela descreve apenas uma 
propriedade abstrata do computador. Essa propriedade geral permite tudo que 
fazemos nele, mas não é uma ação possível em si. É apenas a definição do 
contexto no qual as ações em ambientes digitais acontecem. 
 
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 36 
 
Introdução 
Se estamos buscando compreender a interface gráfica digital como um 
elemento de comunicação, podemos considerar que ela expressa-se através de 
uma linguagem. Para compreendermos as capacidades e o limite dessa 
linguagem, é necessário que olhemos para o fundamento que a possibilita. No 
nosso caso, a base que permite o nascimento da linguagem da interface é a 
linguagem computacional. 
 
Seja em um smartphone ou em um videogame de última geração, as interfaces 
gráficas nascem de maquinações internas que respeitam uma lógica digital. Não 
precisamos compreender como elas funcionam do ponto de vista eletrônico, 
mas podemos certamente pensar quais são suas propriedades comunicacionais. 
E o fenômeno que melhor representa as questões que nascem com o uso da 
linguagem digital é a “interatividade”. 
 
Nesta aula, partiremos da análise da comunicação digital, afim de problematizar 
o que entendemos como interatividade. Esse movimento nos permitirá criar um 
novo entendimento da natureza comunicativa permitida pela cultura digital. 
Depois disso, nos aprofundaremos em outros conceitos que nos permitirão 
lançar luz sobre processos existentes no mundo dos computadores e também 
de possibilidades ainda não desbravadas. 
 
 
Objetivo: 
1. Analisar a questãoda interatividade nas interfaces gráficas; 
2. Elencar conceitos que permitam a compreensão dos mais diversos 
fenômenos de interação na cultura digita. 
 
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 37 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 38 
Conteúdo 
 
Interatividade: além do senso comum 
A partir do momento em que os computadores assumiram papel de destaque 
no cotidiano humano, um modo próprio de comunicação emergiu. As pessoas 
apertam botões no teclado, movem o mouse, e veem os pixels representar 
mudanças na tela. Dessa dinâmica, nascem produtos que nos ajudam a realizar 
uma série de objetivos: organizar dados e arquivar informações; mandar, 
receber e interpretar mensagens; programar e agir com ferramentas e em 
ambientes digitais; expressar ideias através de trabalhos de ordem prática ou 
até obras de cunho artístico. 
 
Não há dúvida, a partir desse pensamento, de que a computação configurava 
uma nova linguagem, que passa necessariamente pelo entendimento da 
interface (MANOVICH, 2001; LEMOS, 2002). A interface gráfica digital se 
incumbe de traduzir as informações magnéticas, elétricas e binárias – 
incompreensíveis para a maioria das pessoas – para espaço-informação, que 
comunica possibilidades de visualizar e produzir informação – de forma mais 
compreensível para a maioria dos usuários. 
 
Poder sobre a experiência 
Essa sensação de agência e poder sobre os dados causa a impressão aparente 
de que, pela primeira vez, o usuário possui poder sobre a experiência e pode 
direcioná-la de modo ativo. Esse modelo de comunicação contrastaria com o 
dos livros e do cinema, por exemplo, nos quais o sujeito ocuparia uma posição 
de passividade. Não existiria “conversa” entre autor e público. Podemos dizer 
que essa é a ideia resumida que o senso comum tem de interatividade. 
 
Podemos ressaltar complicações em alguns pressupostos desse tipo de 
pensamento. Principalmente, é possível observar práticas de comunicação não 
digitais nas quais o público possui capacidade de intervir. Programas de TV e 
rádio que recebem ligações telefônicas, por exemplo, mudam seu conteúdo 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 39 
drasticamente a partir do tipo de intervenção que recebem. De forma 
semelhante, podemos observar como alguns sistemas digitais oferecem poucas 
alternativas de intervenção sobre seu conteúdo, lembrando livros como os da 
série “Choose your own adventure”. 
 
Os livros da série Choose your own adventure poderiam ter seu título traduzido 
para “Escolha sua própria aventura”. Começou a ser publicada pela editora 
americana Batham Books em 1979, resistindo até o ano de 1998. Consistia em 
livros aparentemente comuns, mas seu conteúdo era narrado em segunda 
pessoa, apresentando uma história na qual o protagonista é o leitor. Ao final de 
trechos específicos, quem lia o livro era confrontado com escolhas simples, 
como “ir para o leste ou para o oeste?”; “atravessar o lago ou seguir por dentro 
da caverna?”. Cada escolha pedia que o leitor folheasse o livro até uma 
determinada página, na qual era possível ler o resultado de sua decisão. Este é 
um exemplo de que certos tipos de interatividade são perfeitamente possíveis 
de serem apresentados em mídias não digitais. 
 
Níveis de interatividade 
Para Alex Primo, pesquisador brasileiro, a interação pode assumir duas formas 
básicas: a reativa e a mútua. Observe: 
 
Na interação reativa, o usuário teria o papel apenas de escolher uma opção 
dentre uma série de possibilidades predeterminadas por quem o desenvolveu. 
Por exemplo, uma aplicação digital como um teste vocacional elaborado a partir 
de questões de múltipla escolha. Todas as opções são preestabelecidas e a 
agência do usuário se limita a selecionar dentre as possibilidades. O resultado 
também pode ser predeterminado, e exibido ao usuário de acordo com suas 
escolhas. Nessa interação não há a possibilidade, por exemplo, de inovação e 
criação, tema que abordaremos posteriormente no curso. Por enquanto, é 
possível dizer que a reatividade permite apenas que surjam resultados 
previamente elaborados por quem planejou aquele sistema. 
 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 40 
Na interação mútua, existe algo que lembra uma conversa entre duas pessoas: 
um sistema que pode gerar resultados imprevistos a partir das ações de seus 
agentes. Um chat em uma rede social é um exemplo claro: temos a 
possibilidade de intervir nos dados do sistema e de nos comunicar com outras 
pessoas. Mas ao contrário da enquete do exemplo anterior, os resultados não 
foram previamente imaginados por alguém. Eles surgem das ações dos sujeitos 
que agem no sistema, e que se afetam mutuamente. 
 
Web 2.0 
 
(imagem representativa da web 2.0) 
 
Esses dois modelos de interatividade podem ser encontrados a todo momento 
na cultura digital e nas interfaces gráficas que manipulamos. Sobretudo na 
emergência do paradigma comumente chamado de “web 2.0”, as interfaces 
vêm sendo planejadas cada vez mais para possibilitar a intervenção dos 
usuários no conteúdo, criando uma rede de comunicação na qual os agentes 
adaptam-se mutuamente às ações uns dos outros. Há de se reconhecer, 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 41 
porém, que essa vertente de interação mútua ocorre desde os primórdios da 
Internet, por exemplo nos MUDs. 
 
 
Atenção 
 Os MUDs são híbridos de salas de chat com jogos online. Começaram a 
fazer sucesso na década de 1980, criando ambientes nos quais os 
usuários podiam criar personagens para interpretar e partilhar aventuras 
conjuntas, tudo isso através de texto. Os MUDs são um exemplo 
poderoso para relativizarmos a noção de interatividade na Internet, pois 
ofereciam grandes possibilidades de criatividade e expressão em uma 
fase muito incipiente da rede. 
 
Em contrapartida, os portais de notícias, por mais completos que sejam, ainda 
baseiam-se fortemente numa lógica reativa. Seus conteúdos são organizados 
para serem acessados em diferentes ordens e dividindo-se em vários temas. 
Não obstante, esses conteúdos que assumem diferentes formatos (textos, 
fotografias, vídeos, links etc.) são preestabelecidos pelos responsáveis pelo site. 
O usuário apenas reage ao sistema, que exibe a informação correspondente. 
Logicamente estamos ignorando as áreas de comentários e eventuais setores 
destinados a reportagens com participação de usuários, que embora ofereçam 
modelos de interação mais próximos do tipo “mútuo”, não são tão comuns 
quanto a experiência reativa em sites de notícias. 
 
A experiência de ler notícias na Internet envolve uma parte significativa de 
interação reativa: escolhemos assuntos ou notícias dentro de um conjunto pré-
concebido pelos editores. 
 
Interatividade 
A interatividade, com isso, é uma propriedade importante das interfaces 
gráficas, mas não é exclusiva delas (ou mesmo dos computadores modernos). 
Interatividade mútua é quando os agentes de um sistema comunicativo 
 
 DESIGN DE INTERAÇÃO E INTERFACES DIGITAIS 42 
respondem às ações um do outro de forma imprevisível e nova a cada 
interação. 
 
O mesmo processo de interação mútua ocorre em uma conversa ao vivo, por 
exemplo. Da mesma forma que um jornal impresso diário, em regra, promove 
uma interação reativa, na medida em que o seu leitor apenas seleciona entre 
conjuntos de textos e imagens pré-organizados. 
 
Mas algo parecido ocorre num portal de notícias online, adicionando apenas 
alguns recursos como vídeo e áudio, e talvez um grau limitado de 
personalização da página inicial, por exemplo. De todo modo, estamos 
selecionando e manipulando “pedaços de informação” pré-concebidos, e não 
gerando informação nova. 
 
A importância de ser programável 
Conforme vimos até aqui, podemos pensar do seguinte modo esquemático: 
 
A interação