Your SlideShare is downloading. ×
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

7Game Design Interface Kao Tokio Unibero 2010

994

Published on

Aula sobre o Design de Interfaces para Jogos Eletrônicos Digitais, para a disciplina Design de Games do curso de Design Digital do Centro Universitário Ibero-Americano (Unibero)

Aula sobre o Design de Interfaces para Jogos Eletrônicos Digitais, para a disciplina Design de Games do curso de Design Digital do Centro Universitário Ibero-Americano (Unibero)

Published in: Education, Technology, Design
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
994
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
2
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×