Análise e criação de uma interface gráfica e a relação de como o homem interage com os jogos em sist by Bruno Zequim

UNIVERSIDADE ESTADUAL PAULISTA FACULDADE DE ARQUITETURA, ARTES E COMUNICAÇÃO CAMPUS DE BAURU DESIGN

Bruno Zequim

Análise e criação de uma interface gráfica e a relação de como o homem interage com os jogos em sistemas mobile.

UNESP 2014

Bruno Zequim

Análise e criação de uma interface gráfica e a relação de como o homem interage com os jogos em sistemas mobile.

Trabalho de conclusão de curso apresentado junto ao curso de Design - Habilitação em Design Gráfico da Universidade Paulista Júlio de Mesquita Filho (UNESP/Bauru) como requisito parcial para obtenção do título Bacharel em Design.

Orientador: Prof. Dr. Dorival Rossi. Co-Orientador: Wilson Massashiro Yonezawa

UNESP 2014

Bruno Zequim

ANÁLISE E CRIAÇÃO DE UMA INTERFACE GRÁFICA E A RELAÇÃO DE COMO O HOMEM INTERAGE COM OS JOGOS EM SISTEMAS MOBILE

BANCA EXAMINADORA

Prof. Dr. Wilson Massashiro Yonezawa Instituição FC, UNESP - Bauru

Prof. Dr. Dorival Campos Rossi Instituição FAAC, UNESP - Bauru

Profa. Dra. Solange Bigal Instituição FAAC, UNESP - Bauru

Prof. Dr. Sérgio Busato Instituição FAAC, UNESP - Bauru

RESUMO

Esse trabalho irá relatar um ponto de vista conceitual do que é e como se comporta as informações, e suas relações dentro da percepção humana e sua aplicação em interfaces gráfica voltada para jogos em sistemas mobile.

Palavras-chave: HCI,UI, Interface Grágica1, relacionamento de dados, visualização de dados.

ABSTRACT This work will report a conceptual point of view of what is and how it behaves information, and its relationships within the human perception and its application in a graphical interfaces facing games on mobile systems.

Keywords: HCI, UI, interface Grรกgica1, relationship data, data visualization.

SUMÁRIO

RESUMO ........................................................................................................................................................ 3 1. INTRODUÇÃO .......................................................................................................................................... 7 2. ESTUDO ..................................................................................................................................................... 8 2.1. CONCEITO DE DADO

2.2. CONCEITO DE RELAÇÕES

3. O JOGO .....................................................................................................................................................14 3.1. A FUNÇÃO

4. INTERFACE .............................................................................................................................................16 4.1. HCI

4.2. A INTERFACE DO APARELHO 17 4.3. A INTERFACE DO APARELHO 17 4.4. A GRID

4.5. O LAYOUT 19 4.5.1 USO DO PRETO MONOCROMÁTICO

4.5.2 PREENCHIMENTO E OPACIDADE:

5. A CONEXÇÃO ..........................................................................................................................................20 6. ESCLARECIMENTO ...............................................................................................................................24 CONCLUSÃO ...............................................................................................................................................25 REFERÊNCIAS ............................................................................................................................................26

1. INTRODUÇÃO

Estamos na era da informação, a facilidade com que obtemos dados e seu acúmulo define como vivemos. Pode-se rapidamente entrar na internet acessando de um computador ou celular em qualquer lugar do mundo e obter qualquer informação instantaneamente através das comunicações via satélite. A internet tornou-se um organismo de suporte essencial. Hoje o jeito das pessoas se relacionar mudou criando uma dependência por sua versatilidade, entretanto tem-se tanta informação e de maneira rápida que os processos de absorção e transformação dessas informações em conhecimentos são atropelados tornando irrelevante a forma como ela está sendo interiorizada pelas pessoas. Com esse estudo da compreensão da informação pretende-se contribuir com novas formas de interiorizar essas informações, na mesma velocidade que são geradas e de uma maneira fluida e natural através das interfaces gráficas em jogos mobile.

2. ESTUDO

O título desse estudo é interpretado de duas maneiras, o traço separando o"Co" e a leitura da palavra conexão. O traço permite o destaque necessário para compreender o significado das letras "Co", exprime o sentido de cooperar, de operar simultaneamente, participar com informações a fim de obter um resultado melhor e a palavra conexão significa ligação e vínculo. Juntando os dois conceitos obtemos em uma palavra a seguinte definição: A forma que as informações se comportam e como ela se comunicam produz resultados vantajosos em sua aplicação.

2.1. Conceito de dado

Para que possamos saber como os dados se comportam e como processá-los precisamos

compreender

suas

duas

características

principais,

"essência",

que

classificaremos como uma coluna principal, e seu "campo de relações", sendo classificado como a viga, que pende em seu equilíbrio com a coluna de acordo com cada ponto de vista e maturidade de cada pessoa. Conforme figura 01:

Figura 01. Gráfico do processo de formar e in-formar idéias.

Tomemos como exemplo uma pessoa tatuada. Pode-se extrair algumas informações básicas, materiais, como cor e forma, e mais complexas, imateriais, como seu significado, uma lembrannça, uma experiencia, um ente querido, etc. Foquemos primeiro na tatuagem a ponto de extrair sua essência, retirando todo seu significado, sua relações até sobrar sua forma física. Retiramos sua matéria física também

pois sua forma e core são definições que a formatam, até sobrar a idéia de uma tatuagem. Esse conceito da idéia do imaterial consiste em um campo potencial e que no momento em que é exposto a uma forma, seja ela como palavras para um tatuador ou na forma da tatuagem, simplesmente na expressão que a perturbe e coloque no mundo real, essa idéia sai do imaterial e é informada. Ao informar uma idéia com características básicas, como no exemplo da tatuagem, e as colocarem como idéias essenciais obteremos novos conceitos e significados. A forma da tatuagem pode referir-se a uma outra forma, a um significado, a um sentimento ou não significar nada, assim como sua cor traz os conceitos físicos, sentimentais, e até sensações. A figura 02 mostra como uma idéia em sua essência se transforma em uma informação e como ela é acumulativa para informar novas idéias.

Figura 02. Gráfico do processo de formar e in-formar idéias.

O conceito de material e imaterial e de forma é compreendido pelos critérios de Villém Flusser em seu livro "O Mundo Codificado", onde ele desfragmenta as relações e interpretações de como vemos o mundo e as reconstrói de uma forma virtual, como pode-se ver no fragmento: A idéia básica é esta: se vejo alguma coisa, uma mesa, por exemplo, o que vejo é a madeira em forma de mesa. É verdade que essa madeira é dura (eu tropeço nela), mas sei que perecerá (será queimada e decomposta em cinzas amorfas). Apesar disso a forma "mesa" é etérna , pois posso imaginá-la quando e onde estiver (posso colocá-la ante minha visada teórica). Por isso a forma "mesa"é real e o conteúdo "mesa"(a madeira) é apenas aparente. Isso mostra, na verdade, o que os carpinteiros fazem: pegam uma forma de mesa (a "idéia"de mesa) e a impões em uma peça amorfa de madeira. (Flusser, Vilém, 2010, p.26)

O conceito de campo potencial e na idéia essencial são retirados do filosofo René Descartes onde se é questionado o como e porque da existência das coisas em seu estudo "Princípios da Folisofía". Essa análise define a "coluna" de um dado, a estrutura básica conceitual e filosofia intríncico a natureza da cada dado obtido. Seguindo podemos transpor tudo isso para uma segunda pessoa ou sistema que poderá ter inúmeras outras impressões como: achar bonita ou feira, bem desenha ou mal desenha, representar um sentimento, estar dentro dos padrões de uma sociedade ou ser considerado tabus, e etc. E que cada conjunto que se conecte com nosso dado principal incide imputs de significado. Esses imputes torna rico e complexo, possibilita a comunicação com qualquer outra informação ou signo, e que por sua vez tem seus imputes derivados de outros sistemas. Sabendo que uma simples tatuagem pode ter inúmeros significados, (dado), podemos compreender de uma forma global a extensão da nossa "viga" semiótica e ter um repertório sólido para relacionar todas as informações. Quanto maior essa "viga" mais possibilidades e complexo seu dado principal será e mais refinado terá de ser a síntese para obter resultado, (output), desejado. Os Outputs são os dados e significados finais do nosso estudo. Eles serão revelados após toda a análise da essência e dos imputes para que a relação do dado inicial para com o significado desejado seja o caminho mais claro e curto possível.

Temos então dois conjuntos, a "viga" como todas os imputs e conexões, e a "coluna" como essência e pilar do dado, podemos estabelecer as dimensões correta do nosso output para que o conjunto se equilíbrio. Figura 02.

Figura 02. Conexão entre 2 dados.

2.2. Conceito de relações

Os significados surgem através das relações entre informações, e essas relações dependem de um emissor e de um receptor. Em nosso caso o emissor de informações é uma máquina, o jogo, e o receptor é o homem, portanto, focaremos no receptor já que se possui o total controle de suas ações. As relações são geradas a partir do processo de leitura e armazenamento do conhecimento já estabelecido e do tempo que o dado permanece circulando no receptor. O dado ao ser lido apresenta uma grande quantidade de significados e a medida que o absorve vai armazenando e organizando de acordo com seu conhecimento. Isso faz com que seu foco fique mais claro até a compreensão da essência. Nesse ponto encontra-se o centro de equilíbrio da nossa "viga", a generalização do impute que pode ser aplicado a todos os outros significados que já foram retirados, que por sua vez é a base de sua coluna.

Todo esse processo ocorre na abstração do dado e mesmo ele sendo genérico sua importância é essencial para o entendimento e formação do caminho desejado para o do output. Figura 03.

Figura 03 Generalização da informação.

O próximo passo é a reconstrução da "coluna" que ocorrerá de forma diferente. O processo é escanear todas os significados e reinformando a essência preenchendo suas lacunas e agregando novos conceitos, esse processo é ativo e apenas ocorrerá de forma plena no entendimento do campo amorfo, campo das idéias. A foram que o escaneamento ocore é acíclica e atemporal pois percorre toda a extensão do dado, volta e pula trecho afim de compreender todos as possibilidades. Constrói e reconstrói significados a medida que cada essência é revelada. Figura 04.

Figura 04. Gráfico de formação das idéias.

Podemos constatar os conceitos e processos citados de uma forma mais detalhada através do trecho do livro: A Filosofia da Caixa Preta" de Vilém Flusser: As imagens são, portanto, resultado do esforço de se abstrair duas das quatro dimensões espácio-temporais , para que se conservem apenas as dimensões do plano. Devem sua origem à capacidade de abstração específica que podemos chamar de imaginação. No entanto, a imaginação tem dois aspectos: se de um lado, permite abstrair duas dimensões dos fenômenos, de outro permite reconstituir as duas dimensões abstraídas na imagem. Em outros termos: imaginação é a capacidade de codificar fenômenos de quatro dimensões em símbolos planos e decodificar as mensagens assim codificadas. Imaginação é a capacidade de fazer e decifrar imagens. O fator decisivo no deciframento de imagens é tratar-se de planos. O significado da imagem encontra-se na superfície e pode ser captado por um golpe de vista. No entanto, tal método de deciframento produzirá apenas o significado superficial da imagem. Quem quiser “aprofundar” o significado e restituir as dimensões abstraídas, deve permitir à sua vista vaguear pela superfície da imagem. Tal vaguear pela superfície é chamado scanning. O traçado do scanning segue a estrutura da imagem, mas também impulsos no íntimo do observador. O significado decifrado por este método será, pois, resultado de síntese entre duas “intencionalidades”: a do emissor e a do receptor. Imagens não são conjuntos de símbolos com significados inequívocos, como o são as cifras: não são “denotativas”. Imagens oferecem aos seus receptores um espaço interpretativo: símbolos “conotativos. (Flusser, Vilém, 2010, p.07)

Desse resultado extrai-se a síntese de como um receptor compreende a relação entre dois dados. Todo conceito principal implica em: uma relação, uma hierarquia e em uma simplificação da seguinte maneira: o dado ou informação produzida é conectada automaticamente nas relações entre as pessoas e seus significados, e a medida que ele se torna importante incorpora um significado mais profundo, e em sua superficialidade incorpora um senso comum e generalizado.

3. O JOGO

O jogo é uma simulação da vida artificial focado em autômatos celulares. Sua definição baseia-se na aproximação da vida e no comportamento de criaturas em suas individualidade e nas interações com outras. A relação de comunidade e a variação dos estados possíveis são simulados através de regras e funções previamente estabelecidas e a medida que as gerações mudam os imputes e outputs desses estados se tornando randômicos, ponto fundamental para a compreensão de novos padrões e relação que permitem ser comparados com os animais da natureza e transportados para outras áreas do conhecimento. O conceito de autômato celular é definido por Luís Correia em seu artigo "Vida Artificial" como: Teoricamente um Automôto Celular é definido por um conjunto infiníto de autômatos finítos com organização espacial [Codd, 1968]. Um autômato finínito é, para todos os efeitos, uma máquina de estados. No caso dos autômatos celulares, há uma divisão do espaço em elementos idênticos com uma determinada geometria. A cada um desses elementos estão associado um autômato finito. Um elemento espacial e o respectivo autômato constituem o que se denomina por célula.(Correia, Luís, p.263)

3.1. A Função

O jogo é estruturado da forma que os atributos essenciais dos autômatos (imputes de dados do jogador) são computados a desempenhar comportamentos. Esses comportamentos possibilitam que as criaturas realizem relações com outras criaturas, tais como, relações harmônicas ou desarmônicas, interespecíficas ou intraespecíficas, predatórias e etc. Esses atributos não só controlam quais relações irão ocorrer como a forma que irão ocorrer.

Ao começar o jogo as criaturas iniciarão suas interações como comer, caçar, reproduzir e etc. Essas interações são chamadas de comportamentos. Os comportamentos são organizados por diagramas de estado que controlam a importância e a necessidade de cada criatura um uma determinada situação. Figuras 05 e 06.

Figura 05 e 06:Esquematizam Diagrama de estados Carnivoro e Herbívoro.

O jogador poderá interagir com a simulação pausando-a e mudando os atributos de cada comportamento assim como a prioridade de cada estado, isso acarretará em uma mudança no padrão comportamental. O jogador terá acesso a dados como níveis da vida, fome, quantidade de criaturas nascidas, mortas e outros dados que aparentemente são isolados e no decorrer do tempo as alterações tornarão significativas onde poderá estabelecer padrões e entender como resultou o impacto que causado. A figura 07 abaixo mostra alguns dos controladores iniciais do jogo.

Figura 07. Controles iniciais de atributos e estados.

4. INTERFACE

4.1. HCI

O termo HCI (Human Computer Interaction) refere-se aos estudos e aprimoramentos das interações homem e computador focando no aperfeiçoamento das suas capacidade e necessidades. Pode-se definir também como um minimizador dos modelos cognitivos humanos, estreitando as tarefas realizadas pelo computador com as tarefas e deveres do homem Iremos tratar aqui a HCI com um sentido mais único definido por Stuart K. Card; Thomas P. Moran; Allen Newel em seu livro " The Psychology of Human-Computer Interaction". The human computer interface is easy to fin in gross way-just floow a data path outward from the computer`s central processor until you stumble across a human being. Identifying its boundaries is a little more subtle. The key notion, perhaps, is tha the user and the computer engage in a communicative dialogue whos purpose both accomplishment of same task. It can be termed a dialogue because both the computer and the user have acces to the stram of symbols flowing back and forth to accomplish the communication;.(Stuart K. Card,Thomas P. Moran, Allen Newell, 1986)

Newel trata essa relação de forma única, como o homem e a máquina exercendo a mesma tarefa porém executando funções complementares, e na junção desses dois pontos, a comunicação. O estudo da HCI em nosso jogo é tratar os dados (atributos dos autômatos celulares) para que quando resultem nos relacionamentos em comunidade facilite a compreensão de padrões. Os conceitos minimalistas e do design suíço são usados para direcionar a construção da UI (Interface do Usuário) provendo a clareza necessária para a distinção desses padrões. O design Suíço "Communication through objective simplicity was a guiding principle of Swiss Design. The goal was clarity, order, and a universally understood visual language. Swiss designs were clean and free from ornamentation. They attempted to remove all that was unnecessary and emphasize only the necessary. It’s a style of design that favors minimalism."(Bradley Steven, 2013)

4.2. A interface do aparelho

Focando nos dispositivos mobile a interface adequa o conteúdo nas regiões de maior controle e movimento para as mãos, minimizando o cansaço. O estudo abaixo mostra as regiões onde o acesso e a movimentação dos dedos tem a maior versatilidade e dá bons parâmetros de onde colocar o maior fluxo de dados. Figura 08

Figura 08. Estudo das áreas de maior contao em dispositívos móveis.

4.3. A interface do aparelho

A organização e o fluxo de informação definirão as primeiras impressão de como o jogo está estruturado, e se o usuário se perder acarretará em uma má experiência. Para determinar essas duas características é necessário destacar a importância de cada tela e sua frequência de uso, ex.: telas de criação de personagens são usadas com menos frequência ou apenas no começo de cada jogo ao contrario de telas de controle e alteração de atributos. • Tela Principal • Menu Novo jogo Cenário Criaturas

Continuar • Jogo • Telas de controle Informações gerais Detalhamento de controle Mapas de estados Com a distribuição das tela sabe-se o volume e a importância das informações contida, o que facilitará a criação do grid.

4.4. O Grid

O grid foi desenvolvido em blocos e formas greométricas para abranger o máximo do conteúdo de cada tela sem comprometer a navegação. Figura 09.

Figura 04: Estruturação da grid.

Uma hierarquia foi estabelecida com as informações mais importantes, de fora para dentro, comportando as informações de leitura nas áreas mais centrais e respeitando o estudo do aparelho e a versatilidade do touch screen.

4.5. O Layout Aplicando os conceitos do movimento minimalistas e do design suíço definiu-se as seguintes diretrizes: 4.5.1 Uso do preto monocromático Com a utilização da cor preta a percepção visual não será alterada. Possibilita o descanso dos olhos com um fundo escuro facilitando o caminho do olho nas informações úteis. 4.5.2 Preenchimento e opacidade: A utilização do preenchimento como cor sólida se da a percepção geral do olho. O olho se acostumará com o padrão uniforme de preenchimento e não ficará buscando detalhes que poderão poluir a interpretação do usuário. A opacidade é utilizada para hierarquizar as informações e adequar a grid. Permite também a visualização parcial do jogo atual a fim de preservar a imersão do usuário.

Figura 10: Formatação do layout.

5. A CONEXÇÃO

As telas definidas e a grid estruturada, o layout está pronto para receber as informações fornecidas pelo jogo, nomes, atributos, descrições, detalhamento, numeração, gráficos, imagens e etc. Com o recurso da tabulação, é organizado todas as informações possibilitando a compreensão em seus níveis hierárquicos. Ex.: Novo Jogo Criaturas Nova Criatura Imagem da Criatura Descrição Atributos Add Criatura Acima podemos estabelecer o caminho completo quando o usuário quiser adicionar uma criatura e dessa forma saber quantos passos terá de percorrer para completar sua tarefa. A primeiro momento esta tarefa é longa, e ao aplicar a grid e o layout, ela é distribuida de uma forma intuitiva tornando-se fluida e rápida. Sabe-se que o volume de criaturas à ser escolhida pode ser grande, portanto sua acessibilidade deve ser maior.

Figura 10: Aplicação da grid e do layout na inteface na tela de adição de criaturas do jogo.

Nesse ponto já introduzimos um padrão de comportamento para o usuário onde nas próximas telas ele ira automaticamente buscar as mesmas características. A figura abaixo nos mostra a tela de configuração das criaturas.

Figura: 11Layout da interface de contro e atributos.

Foi mantido os volumes de informação nas áreas mais acessíveis e as informações de leitura nos lugares menos acessíveis onde o usuário já aprendeu o comportamento utilizado.

Estabelecendo esse processo como metodologia, aplica-se a cada informação individualmente a fim de ter um estudo geral. Esse estudo nos permite vincular de uma forma mais correta e limpa cada grupo obtido, otimizando seus caminhos até chegar em um denominador comum de toda a informação.

Figura 12: Inicio do jogo, tela de aberrura. Figura 13: Tela de Menu, seleção das opsções de criar novo jogo ou continuar. Figura 14: Jogo.

Figura 15:Tela de adição de criaturas à um novo jogo. Figura 16: Tela de adição de cenário. Figura 17: Tela de configuração geral do jogo e gráfico de padões. Figura 18: Tela de configuração de criaturas Figura 19: Tela do mapa de estados.

O resultado da interface é o resumo de toda informação de fundo e técnica necessária para o funcionamento do jogo. Uma interface estruturada nos conceitos de interiorização da informação contribui para o foco do usuário no conteúdo disponível, tornando mais profunda sua experiência.

6. ESCLARECIMENTO

No exemplo citado nesse estudo era esperado um conhecimento prévio de como e o que é uma tatuagem, mas ao desacelerar esse conhecimento trazendo-o gradativamente para a consciência, foi agregando um valor subjetivo, não só no foco do nosso exemplo, mas para todos as outras informações que ela carrega, fazendo com que aumente a possibilidade de estabelecer novos links com outras informações e áreas do conhecimento. A interface criada foi desenvolvida para o usuário focar nos padrões de comportamento da interligência artificial possibilitando que aplique todo o processo de abstração, generalização e in-formação das conexões dos autômatos. O resultado esperado é a funcionalidade simples e intuitiva do jogo sem comprometer sua estética.

CONCLUSÃO

O intuito desse estudo é o esclarecimento de um processo que ocorrem nos níveis subjetivos e racionais das pessoas e trazê-los de uma forma prática e objetiva para o uso nas interfaces dos jogos. O entendimento de como as pessoas absorvem as informações de acordo com suas emoções, sentimentos, experiências e conhecimentos adquiridos durante sua vida, assim como a forma que isso ocorre, de uma maneira adimencional, sem o entendimento de tempo cronológico, frenquência e lugar é complexo e caótico, mas ao congelar um trecho de processo, fraciona-lo e reduzi-lo para passos claros e distintos nos permite compreender melhor a relação do homem com o computador.

REFERÊNCIAS

FLUSSER, Vilém. O Mundo Codificado. 2º ed., Cosacnaif, 2010. FLUSSER, Vilém. A filosofia da caixa preta: Ensaio para uma filosofia da fotografia. CORREIA, L. Vida Artificial. Congresso da Sociedade Brasileira de Computação. São Leopoldo: [s.n.]. 2005. p. 257-305. CARD k. Stuart et al. The Psychology of Human-Computer Interaction. Lawrence Erlbaum Associates, inc. Hillsdale, New Jerssey 1983. LLINSKY, Noah; STEELE Julie. DESIGNING DATA VISUALIZATION. O`Reilly, 2011. LLINSKY, Noah et al.. Beautifull Visualization: Looking at Data Through the Eyes of Experts. O`Reilly, 2010. WARE, Colin. Informatrion Visualization:Perception for Design. Morgan Kaufman, 2º ed., São Francisco, CA, 2004. DESCARTES, Rene. Os Princípios da Filosofia. 7º ed., Editora 70, 2006 BRADLEY

Steven. Design Fundamentals: Elements & Attributes & Principles. 1º ed. Vanseo

Design, Colorado, 2013. BRADLEY Steven.

Swiss Style Of Design: The Guiding Principles That Influence Flat Design.

Disponível em: <www.vanseodesign.com/web-design/swiss-design/>. Acessado em 15 out. 2013.