O documento discute os conceitos fundamentais de interface entre o homem e as máquinas digitais. Apresenta os primórdios das interfaces, desde as máquinas de Jacquard e as cartões perfurados até os primeiros sistemas gráficos como o Sketchpad. Também aborda conceitos-chave como metáforas, affordances, usabilidade e o papel fundamental das interfaces nos jogos eletrônicos.

1. Kao Tokio
Interface

2. O que é tão Importante na Interface?
Ao estudarmos a produção de recursos para utilizarmos os ambientes digitais,
percebemos a necessidade de um sistema que realize essa mediação.
Por “ambientes digitais”, vamos entender qualquer produção humana que envolva o
uso das capacidades dos computadores (e dentro deles!), seja a construção de um
cenário virtual para um filme de fantasia, seja o aprimoramento de um áudio gravado
para a produção de um disco musical.
Nestes e em outros casos, a manipulação de sistemas presentes nos computadores
só se realiza por meio do que convencionamos chamar de interfaces.
Muitos autores explicam o significado do termo, mas é importante saber que, sem
interface, não existe interação homem-máquina.
Meios convencionais como livros, cinema e quadrinhos não exigem grande
participação do usuário, mas não se pode fazer uso de recursos multimídia se não
houver interação entre nós e os processadores de dados.

3. O Que é Interface?

4. O Que é Interface?
“Walter Benjamin já conseguia ver, na relação máquina de escrever-homem, os
germes das interfaces e interatividades modernas [...]
Se, por um lado, para Benjamin, desde o início do século a concepção de interação
ou de interface já era encarada no sentido das interligações comunicativas entre
homem e máquina, por outro lado, até muito pouco tempo, interface significava, no
meio técnico da informática, sinônimo de entrada e saída [...]
A vocação da interface é traduzir, articular espaços, colocar em comunicação duas
realidades diferentes. Em outras palavras, é a interface que possibilita a
interatividade.”
Sergio Bairon, 1995

5. O Que é Interface?
“Até muito recentemente, o design de interface era terreno exclusivo dos maníacos e
entusiastas do computador — um nicho no mercado, na melhor das hipóteses.
A ascensão do Mac e do Windows apresentou um público de massa aos desktops e
ícones, enquanto a popularidade da Web dotou navegadores e hipertextos de certa
sensualidade subcultural [...]
Chegaremos a conceber o design de interface como uma forma de arte — talvez a
forma de arte do próximo século.”
Steven Johnson, 2001

6. O Que é Interface?
“Portanto, podemos ter como uma definição de base, que uma interface é uma
superfície de contato,que reflete as propriedades físicas das partes que interagem, as
funções a serem executadas e o balanço entre o poder e o controle [...]
O mundo está repleto de exemplos de interfaces: a maçaneta de uma porta, uma
torneira, a direção de um carro etc.”
H. Rocha e M. C. Baranauskas, 2003

7. O Que é Interface?
“Outro conceito recorrente nas discussões sobre hipermídia é o da interface. De acordo
com Lev Manovich, pelo conceito clássico, tela ou interface de computador é aquela
que, `separa dois espaços absolutamente diferentes e que de alguma maneira
coexistem`. A metáfora expande o conhecimento ao trazer dados audiovisuais ao
usuário, que lhe signifiquem outras ideias, que não as diretamente representadas na
interface.”
Vicente Gosciola, 2003
Deskop Icon
Deskop X
(Stardock
Systems )

8. Mais Interfaces:
Com base nas opiniões destes autores, podemos entender como interfaces toda uma
série de recursos de mediação entre o homem e as tecnologias.

9. Primórdios da Interface
“Em 1801, na França, durante a revolução
industrial, Joseph Marie Jacquard
inventou um tear mecânico controlado por
grandes cartões perfurados. Sua máquina
era capaz de produzir tecidos com
desenhos bonitos e intrincados. Foi
tamanho o sucesso que Jacquard foi
quase morto quando levou o tear para
Lyons: as pessoas tinham medo que o
tear lhes fizesse perder o emprego”.
Ma
Helena P. Dias, 2003

10. Primórdios da Interface
Embora não estivesse à
espera que um milhão de
pessoas entrasse em pânico
por causa dos seus
marcianos, (Orson Welles)
assumiria, em 1955, o caráter
pouco inocente da
dramatização. “O mundo
parecia ser alimentado por
tudo o que saía daquela
máquina”, afirmou então
Welles. Nesse sentido, a
transmissão fora “um assalto
à credibilidade daquela
máquina” e um alerta para
que as pessoas não se
deixassem “orientar por
opiniões pré-formatadas,
viessem elas ou não da
rádio”.
Marco Santos, 2007 War of the Worlds (Orson Welles -1938)
Radio: um
recurso de
mediação

11. Primórdios da Interface
[...] é uma máquina um tanto quanto visionária para auxiliar a memória e guardar
conhecimentos (daí o nome Memex - Memory Extension) [...] Uma coleção de
associações entre fragmentos de diversas obras, eventualmente complementados por
comentários pessoais resultantes de reflexões sobre determinados temas representa
um novo documento (meta-documento) [...] Bush desejava substituir os métodos
puramente lineares [...] por algo que, em essência, são "máquinas poéticas".
Vannevar Bush
Memex (1945)
Ma
Helena P. Dias, 2003

12. Primórdios da Interface
“O conceito de Linha de
Comando ou Command Line
Interface (CLI) originou-se das
máquinas Teletype (TTY),
datado de 1950, que ofereciam
resultados rápidos se
comparados com o antigo
Batch – destinado
principalmente à tecnologia de
cartões perfurados”.
Joelson Silva (2010)
Teletype Model 40-D (1979)
“O Batch é a execução de uma lista de ações (jobs),
configurada através de scripts e parâmetros de linha
de comando. Esse tipo de interface foi associado ao
uso em Mainframes devido ao custo exorbitante de
hardware e por ser o único meio viável e econômico
de interface para uso na época” [...]
Censo de Hollerith (1890)
IBM Punch Card (1938)

13. XY Position Indicator For A Display System
(Douglas Englebart - 1964)
Primórdios da Interface

14. Alan Blackwell e Kerry Rodden, 2003
Primórdios da Interface
"[O Sketchpad] fez contribuições fundamentais na área da interação humano-
computador, sendo um dos primeiros graphic users interfaces [...]
O Pigmaleão [software] de Smith [membro do grupo que desenvolveu o Star, da Xerox],
tremendamente influenciado pelo Sketchpad, fez argumentações mais explicitas sobre
os benefícios cognitivos desse tipo de interação direta e feedback, cunhando o termo
"ícone", e deixando claro que as imagens gráficas podiam representar entidades
abstratas de uma linguagem de programação".
Sketchpad (Ivan Sutherland - 1968)

15. Xerox Alto, 1981
Xerox Star Operational System, 1981
Ícones
Primórdios da Interface

16. Novas[?] Interfaces
Kinect (Microsoft – 2010)

17. Minority Report - 2003
Fraunhofer's FIT - 2010
Novas[?] Interfaces

18. “Na Poética, Aristóteles definiu a metáfora com o ato de "dar a uma coisa um nome que
pertence a outra coisa" [...] No design de interface tradicional, uma "janela" de
computador exibe uma espécie de semelhança superficial com uma janela do mundo
real [...] Obviamente não podemos sobrepor as janelas de nossa cozinha umas às
outras, nem "rolar" a vista que oferecem. Entre a janela real e a virtual há uma distância
necessária, que torna a analogia útil para nós”.
Metáforas
Steven Johnson, 2001
Exemplos de metáforas lingüísticas

19. “As metáforas funcionam como modelos naturais, nos permitindo usar
conhecimento familiar de objetos concretos e experiências para dar estrutura a
conceitos mais abstratos [...]
[As] metáforas servem como auxiliadores ao entendimento atuando como
mediadores cognitivos [...]
Por exemplo, um usuário quando arrasta um documento de um diretório (ou
pasta) para outro [...] acredita que está mudando o documento de lugar e o que
efetivamente ocorre é que o apontador para o arquivo mudou”.
Metáforas
Janela de Transferência: inúmeras metáforas Porque relógios?
H. Rocha e M. C. Baranauskas, 2003

20. O conceito de metaforas, portanto, nos leva a compreender uma mensagem mesmo
quando ela é apresentada de maneira absurda, como por exemplo, ao dizermos “trânsito
engarrafado” ou “lelé da cuca”.
Não podemos esquecer, no entanto, que a compreensão destas figuras de linguagem
está diretamente ligada as nossas culturas.
Assim, observamos que, no contexto de um jogo eletrônico, um mesmo elemento pode
ter diferentes interpretações, como, por exemplo, um pergaminho: apresentado em um
jogo grego, fará alusão ao saber, em um jogo de fantasia medieval, as praticas arcanas
de um mago e, em um jogo de piratas, a um mapa de tesouro.
Metáforas

21. Affordance é o termo definido para se referir as propriedades percebidas e propriedades
reais de um objeto, que deveriam determinar como ele pode ser usado [...] Quando se
tem a predominância da affordance o usuário sabe o que fazer somente olhando, não
sendo preciso figuras, rótulos ou instruções.
Affordance
“Affordance tornou-se um termo bem conhecido no mundo do design e é mais utilizado
quando os pesquisadores tentam explicar como as pessoas descobrem a funcionalidade
das coisas nas aplicações de computadores e em outros produtos do dia-a-dia”
J. Rambusch e T. Susi, 2008
H. Rocha e M. C. Baranauskas, 2003
“Affordances remetem as pistas sensoriais implícitas no design de objetos, cuja
aplicação tem a finalidade de facilitar os processos de interação operados pelos
usuários [...] construindo uma espécie de canal de comunicação designer-usuário”.
Luiz Adolfo de Andrade, 2009

22. “Princípios da usabilidade tratam basicamente dois aspectos: a tarefa e as
características individuais dos usuários [...] conhecer o usuário é fundamental para se
fazer um sistema usável”.
Usabilidade
H. Rocha e M. C. Baranauskas, 2003

23. “[O cientista Donald] Norman [autor
do livro ‘The Design of Everyday
Things’], também enfatizou o papel
das convenções sociais e da
interpretação, e afirma que a forma
como a affordance é percebida
depende muito destes conceitos”.
Usabilidade
H. Rocha e M. Baranauskas, 2003
Os dois cliques para abrir um arquivo ou pasta não são affordances, mas cultura
adquirida.
Em contra-partida, os links são conexões acessíveis por meio de apenas um clique, no
entanto, é comum observarmos pessoas se confundindo com um e dois cliques.
Como ensinar jovens, idosos e iniciantes a diferenciar estes processos?
Desafios como estes devem ser superados na realização de um design bem elaborado.

24. Game Interface Design:
Porque estas informacoes sobre conceito de design digital
são importantes para os games?
Tela de game Counter Strike

25. Do Que é Composta a Interface de Games:
Gamespace

26. Gameworld

27. Tokens
Lara é a peça
VOCÊ é a peça!

28. História Personagens Chaos Generator

29. Tennis For Two (1958)
Primórdios da Interface de Games

30. Computer Space Arcade (1970)
Primórdios da Interface de Games

31. Maze War (1974 – Imlacs PDS-1 NASA e Xerox Alto 1976)
Imlacs PDS-1 (NASA Ames Research Center)
Primórdios da Interface de Games

32. HUD – Head Up Display:
Airbus A319 F-16
Qualquer painel transparente, que apresente informações sem exigir que o usuário
desvie a atenção de seu ponto de vista original

33. HUD – Head Up Display:
Numeral: má visualização

34. HUD – Head Up Display:
Visual híbrido: numeral e cumulativo
Ace Combat (PS One – 1995)

35. HUD – Head Up Display:
Duke Nuken (PS One – 1995) Fat Princess (PS3 – 1995)
As HUDs estão se integrando cada vez mais à interface e ao design dos jogos.

36. HUD – Head Up Display:
Greendog (Genesis – 1992)
Magical Taluluto Adventure (Genesis – 1992)
Zelda (Nes – 1987)
Snow Board Riot (Wii – 2009)

37. HUD – Head Up Display:
Fable III (2010)
Beatles Rock BandTom Clancy´s Ghost Recoon (2007)
Dead Space (2008)
HUDs translúcidas, conceituais ou invisíveis começam a surgir em novos títulos.

38. Por Que?
“Em um meio participativo, imersão implica em aprender a imergir para
fazer coisas que o novo ambiente torna possível (Murray, 1996)

39. Qual a finalidade de tanta informação?
INPUT – Controles * OUTPUT – Imagem e Som *
Ambiente do jogo + Visual do estado do Jogo + Controles de Interação
•Input / Output: Saída: Gráficos e Sons do Jogo / Entrada: Contato táctil
(ou sensorial) do jogador com o jogo (Crawford, 1986)

40. • Saúde do Personagem, Quantidade de Vidas
• Capacidades (Armas, Magias)
• Menus Diversos (Pausa, Opções)

41. •Game Progression (Pontos, Valores, Infos)
• Localização (Radar, Direção, Terreno, Inimigos)
• Diálogos, Subtítulos, Nomenclaturas, Cursor

42. Wolf 3D – HUD para “roubar” espaço visual e esconder limitações de hardware.

43. Xmen: Legends
HUDs Ruins:

44. Eudemons Online
HUDs Ruins:

45. Eudemons Online
HUDs Ruins:

46. World of Warcraft
HUDs Ruins:

47. Star Wars Republic Comando
Metroid Prime
HUDs Integradas:

48. Black Site: Area 51 – Mapa ficcional e texto explicativo não-ficional

49. Mirror´s Edge – Visão com embaçamento lateral, texto focado e legível

50. Call of Duty 5 – meta-percepção e imersão

51. Killzone 2 – meta-percepção com efeito “sangue na camêra”

52. Mirror´s Edge – rota e senso de direção

53. The Sims – Informação e comunicação abstrata

54. Suportes diferentes – Adaptações visuais para integração e facilidade de uso.
Game: Conspiracy: Corporate Warfare (Dare to be Digital Competition - 2005)

55. Menus e Interface de Games
Menu e Game Interface – Final Fantasy IV (Snes – 1991)

56. Civilization – Manu Principal
Maiden NFL – Manu
Principal (2010)

57. Menu Interno

58. Maiden NFL – instruções de interação

59. Referências:
__________ Maze War. http://www.digibarn.com/collections/games/xerox-maze-war/index.html#palmer
BATEMAN, Chris (2007) The Inefficiency of Games as a Narrative Medium.
http://onlyagame.typepad.com/only_a_game/2007/06/the_inefficienc.html
__________ 3-D Gesture-Based Interaction System Unveiled http://www.fit.fraunhofer.de/presse/10-07-
13_en.html
DIAS, Maria Helena P. Encruzilhadas de um labirinto eletrônico Uma experiência hipertextual
http://www.unicamp.br/~hans/mh/memex.html
KREIMEIER, B. Through The Looking Glass Fully Interactive Surfaces In DOOM3
http://www.battleteam.net/tech/fis/docs/ch02.html
http://www.sscnet.ucla.edu/geog/gessler/topics/jacquard.htm
__________ A Evolução do Computador http://www.ime.usp.br/~macmulti/historico/histcomp1_5.html
SILVA, Joelson (2003) Interface Gráfica de Usuário http://www.unicamp.br/~hans/mh/memex.html
SANTOS, Marcos Marte,Marcianos e Panico na America http://bitaites.org/tag/orson-welles
__________ Punched Card. http://en.wikipedia.org/wiki/Punched_card
RODRIGUES, Fatima Trabalhando com a metáfora e a metonímia. http://en.wikipedia.org/wiki/Punched_card
SUTHERLAND, Ivan E. (2003) Sketchpad: A Man-Machine Graphical Communication System
http://www.cl.cam.ac.uk/techreports/UCAM-CL-TR-574.pdf
RAMBUSCH, Jana, SUSI, Tarja (2008) The Challenge of Managing Affordances in Computer Game Play
http://etjanst.hb.se/bhs/ith/3-9/jrts.pdf
ANDRADE, Luis A.(2009) Alternate Reality Games e Espacializacao http://www.ufscar.br/rua/site/?p=2226

60. Referências:
BAIRON, Sergio (1995) Multimidia Sao Paulo: Global.
JOHNSON, Steven (2001) Emergencia Rio de Janeiro: Jorge Zahar
GOSCIOLA, Vicente (2003) Roteiro para Novas Midias São Paulo: Senac
MELICK, Todd (2007) The 10 Best HUDs in Gaming http://www.gamepro.com/article/features/149728/the-10-best-
huds-in-gaming/
JOHNSON, Steven (2001) Cultura da Interface Rio de Janeiro: Jorge Zahar

61. Kao 'Cyber' Tokio
cyberkao@gmail.com
www.retrogamesbrasil.blogspot.com
TWITT ME:
www.twitter.com/cyberkao