O ÍCONE INTERFACIAL: Estudo e Análise Conceitual e Tecnológica by Eduardo Loureiro

EDUARDO PINHEIRO LOUREIRO

O ÍCONE INTERFACIAL: Estudo e Análise Conceitual e Tecnológica

Belo Horizonte Uni-BH – Centro Universitário de Belo Horizonte 2006

EDUARDO PINHEIRO LOUREIRO

O ÍCONE INTERFACIAL: Estudo e Análise Conceitual e Tecnológica

Monografia apresentada ao Curso de Comunicação Produção

Social, habilitação

Editorial,

como

requisito

parcial para obtenção do título de Bacharel em Comunicação Social.

Orientador: Rogério Pereira de Arruda

Uni-BH – Centro Universitário de Belo Horizonte Belo Horizonte 2006

RESUMO

Ícone é uma pequena representação gráfica e na interface, é um dos pontos de interação com o usuário, que realiza ações, a fim de alcançar seus objetivos. A utilização dos ícones nas interfaces foi um dos fatores que possibilitou a transposição da linguagem computacional para uma linguagem comum às pessoas sem conhecimento dos processos tecnológicos envolvidos. Portanto, a crescente utilização dos computadores nas últimas duas décadas, se deve principalmente à mudança de paradigma na forma pela qual o homem passou a interagir o computador. Nesse processo, a utilização da metáfora foi crucial, já que, ela possibilita a compreensão de conceitos abstratos, por meio de correlações com conhecimentos familiares. Dessa forma, este estudo busca definir o ícone do ponto de vista conceitual e tecnológico, além de fazer uma análise sobre os ícones utilizados nas interfaces de dois websites: PortalCab.com e Ciberarte. A análise mostra como os ícones abordados propiciam significado às suas representações, além de definir o método pelo qual eles foram construídos.

Palavras-chave: ícone, semiótica, metáfora, interface.

ABSTRACT

Icon is a small graphical representation and in the interface he is one of the points of interaction with the user, who carries through action, in order to reach its objectives. The use of the icons in the interfaces was one of the factors that the transposition of the computational language for a common language for people made possible, without knowledge of the involved technological processes. Therefore, the increasing use of the computers in last the two decades, if must mainly to the change of paradigm in the form for which the man started to interact the computer. In this process, the use of the metaphor was crucial, since, it makes possible the understanding of abstract concepts, by means of correlations with familiar knowledge. Of this form, this study it searchs to define the icon of the conceptual and technological point of view, beyond making an analysis on the icons used in the interfaces of two websites: PortalCab.com and Ciberarte. The analysis shows how the boarded icons propitiate meant to its representations, beyond defining the method by which they had been constructed

Keywords: icon, semiotics, metaphor, interface.

LISTA DE FIGURAS

FIGURA 1 – PRIMEIROS ÍCONES

FIGURA 2 – ÍCONES DE HOJE

FIGURA 3 – CÍRCULOS RESPECTIVAMENTE PRODUZIDOS SEM E COM O

AUXÍLIO DO SISTEMA ANTI-ASLIASING FIGURA 4 – IMAGENS CONSTRUÍDAS COM A TECNICA DA PIXEL ART

FIGURA 5 – PÁGINA PRINCIPAL DO WEBSITE PORTALCAB.COM

FIGURA 6 – MENU DE CATEGORIAS DO WEBSITE PORTALCAB.COM

FIGURA 7 – CATEGORIA “TV” DO PORTALCAB.COM

FIGURA 8 – CATEGORIA “VÍDEOS” DO PORTALCAB.COM

FIGURA 9 – CATEGORIA “GATINHAS” DO PORTALCAB.COM

FIGURA 10 – CATEGORIA “DOWNLOADS” DO PORTALCAB.COM

FIGURA 11 – CATEGORIA “MÚSICAS” DO PORTALCAB.COM

FIGURA 12 – CATEGORIA “DIVERSÃO” DO PORTALCAB.COM

FIGURA 13 – CATEGORIA “NERD” DO PORTALCAB.COM

FIGURA 14 – CATEGORIA “JOGUINHOS” DO PORTALCAB.COM

FIGURA 15 – CATEGORIA “FOTOS” DO PORTALCAB.COM

FIGURA 16 – CATEGORIA “CINEMA” DO PORTALCAB.COM

FIGURA 17 – CATEGORIA “BIBLIOTECA” DO PORTALCAB.COM

FIGURA 18 – CATEGORIA “FUTEBOL” DO PORTALCAB.COM

FIGURA 19 – CATEGORIA “DIÁRIO DO CAB” DO PORTALCAB.COM

FIGURA 20 – CATEGORIA “PORÃO DE POSTS” DO PORTALCAB.COM

FIGURA 21 – PÁGINA PRINCIPAL DO WEBSITE CIBERARTE

FIGURA 22 – MENU DE CATEGORIAS DO WEBSITE CIBERARTE

FIGURA 23 – MENU DE CATEGORIAS DO WEBSITE CIBERARTE, COM A

EXIBIÇÃO DO RÓTULO DO ÍCONE ATRAVÉS DO RECURSO ALT FIGURA 24 – CATEGORIA “ÚLTIMAS ATUALIZAÇÕES” DO CIBERARTE

FIGURA 25 – CATEGORIA “LITERATURA” DO CIBERARTE

FIGURA 26 – CATEGORIA “ARTES PLÁSTICAS” DO CIBERARTE

FIGURA 27 – CATEGORIA “FOTOGRAFIA” DO CIBERARTE

FIGURA 28 – CATEGORIA “QUADRINHOS – CHARGES - COMIX” DO

CIBERARTE5 FIGURA 29 – CATEGORIA “VÍDEO – CINEMA - ANIMAÇÃO” DO CIBERARTE

FIGURA 30 – CATEGORIA “AUTORES - ARTISTAS” DO CIBERARTE

FIGURA 31 – CATEGORIA “LINKS EXTERNOS” DO CIBERARTE

SUMÁRIO

1 INTRODUÇÃO

2 O CAMPO TEÓRICO EM QUE SE ENCAIXA O ÍCONE NO CONTEXTO

DAS INTERFACES GRÁFICAS COMPUTACIONAIS 2.1 Interação humano computador – IHC

2.2 A interface gráfica

2.2.1 A utilização das metáforas

2.3 O ícone e a semiótica

2.4 Os ícones interfaciais

2.5 Percepção

2.6 Considerações finais sobre o capítulo

3 DEFINIÇÃO TECNOLÓGICA E AVALIAÇÃO TEÓRICA E TÉCNICA DOS

ÍCONES DOS WEBSITES PORTALCAB.COM E CIBERARTE 3.1 A imagem digital

3.1.1 O sistema de cor

3.1.2 Formas de composição da imagem: Anti-aliasing

3.1.3 Formas de composição da imagem: Pixel art

3.2 Avaliação teórica e técnica de ícones

3.2.1 PortalCab.com (http://www.portalcab.com)

3.2.2 Ciberarte (http://www.ciberarte.com.br)

3.3 Considerações finais sobre o capítulo

4 CONSIDERAÇÕES FINAIS

5 REFERÊNCIAS BIBLIOGRÁFICAS

1 INTRODUÇÃO

O momento em que vivemos passa por grandes mudanças, tanto tecnológicas quanto conceituais. A internet, cada vez mais, entra na vida das pessoas, se tornando parte de seu dia-a-dia. Seja para efetuar compras, pesquisas, transações bancárias, ou para possibilitar interações virtuais, a internet deixou de ser mero suporte informacional para se tornar uma ferramenta onde as pessoas realizam ações, que interferem diretamente em suas vidas. São os chamados serviços online, que crescem cada vez mais e proporcionam conforto e facilidade para quem os usa. Sobre essa perspectiva, o ícone ganha grande destaque nessa mudança de paradigma, por ser um elemento de síntese, que privilegia a comunicação em interfaces com muito conteúdo e várias ações que podem ser realizáveis. O ícone, assim, é uma necessidade nesse processo e também uma ferramenta bastante útil, não só no contexto de grande acúmulo de informação em interfaces computacionais, mas também, quando o suporte é uma interface com pequenas proporções, como aparelhos de celular, câmeras fotográficas digitais e outros pequenos dispositivos eletrônicos, que têm muito pouco espaço de interação e precisam ser precisos e claros. Ícone é uma pequena representação gráfica e na interface, é um dos pontos de interação com o usuário, que realiza ações, a fim de alcançar seus objetivos. Dessa forma, o ícone assim como os outros elementos gráficos que compõem a interface, são essenciais para as pessoas sem conhecimento específico e que utilizam o computador e seus sistemas, softwares e websites. A utilização dos ícones nas interfaces foi um dos fatores que possibilitou a transposição da linguagem computacional para uma linguagem comum às pessoas sem conhecimento dos processos

tecnológicos

envolvidos.

Portanto,

crescente

utilização

dos

computadores nas últimas duas décadas, se deve principalmente à mudança de paradigma na forma pela qual o homem passou a interagir com o computador. Nesse processo, a utilização da metáfora, como base do significado das imagens, foi crucial, já que ela possibilita a compreensão de conceitos abstratos, por meio de correlações com conhecimentos familiares. O ícone, especificamente, atendeu uma demanda óbvia nas interfaces; a necessidade de síntese para o conteúdo. Porém, sem sua utilização, ou seja, só 8

com o uso de texto, a interface não se torna inviável, apenas menos interpretável, à medida que o ser humano decodifica melhor uma imagem do que um determinado texto ou palavra. Contudo, o uso ou não de textos, imagens, ícones e afins não é uma questão puramente estética, mas sim, projetual. Tudo isso depende da forma como o conteúdo se organiza, se distribui e se mostra para o usuário. São etapas de planejamento, que é onde o produtor editorial se insere no processo. Daí, a necessidade de uma bagagem conceitual para poder ter a capacidade de escolha diante das mais variadas formas de se expressar ações, respostas e caminhos. A disciplina que engloba a questão da utilização de ícones nas interfaces, Design de interfaces, é relativamente nova no Brasil, e mais especificamente, inexiste na capital mineira, Belo Horizonte. Portanto, teses que pesquisam o tema são bastante reduzidas no país, sendo que a maioria delas são produzidas na cidade do Rio de Janeiro, onde há cursos superiores na área. Profissionalmente, o tema me interessa bastante, por ser designer de interface e webdesigner e assim, estar envolvido a todo o momento com a construção de interfaces on-line ou mais especificamente, ícones. Para o profissional de produção editorial, que coordena equipes de criação na área de mídia digital, e muitas vezes, faz a ponte entre essa equipe e o cliente, é imprescindível ter o conhecimento sobre os conceitos de imagem, que perpassam pelos próprios conceitos de ícone e todo o estudo sobre a percepção humana e as propriedades que tais elementos proporcionam aos suportes aos quais eles serão inseridos. A monografia está estruturada em dois capítulos. No primeiro, foi realizado um estudo sobre o ícone interfacial e o contexto onde ele está inserido. Para isso, foi necessário realizar um pequeno histórico sobre a origem da interface gráfica, que está ligada à própria evolução da tecnologia computacional, perpassando pelo conjunto de disciplinas, com destaque para o Design, responsáveis pelo estudo sobre todos os aspectos que compõem o processo de interação entre o homem e o computador, a chamada Interação Humano Computador (IHC). Para tanto, a leitura de Rocha e Baranauskas; Faiola; e Domingues, foi fundamental. Ainda no primeiro capítulo, uma contextualização sobre a semiótica, do ponto de vista conceitual, se fez importante no presente estudo pela própria natureza do ícone interfacial, que produz significado na interface, ou apontando caminhos e ações ou sendo ferramenta de comunicação. Dessa forma, a semiótica peirciana, e 9

mais especificamente a segunda tricotomia de Peirce, onde o signo se relaciona com seu objeto gerador, foi apresentada, com base, principalmente, nos estudos de Lucy Niemeyer e Coelho Netto. A partir daí, a evolução do ícone interfacial e o modo como esse é percebido pelo usuário, através dos estudos sobre percepção da Escola de Psicologia Experimental Gestalt são apresentados, para que, finalmente, os aspectos técnicos ligados à construção e visualização de imagens digitais fossem especificados. O segundo capítulo aborda as questões tecnológicas pertinentes à imagem digital e métodos de construção da mesma. Com base nos conceitos discutidos no capítulo anterior, análises semióticas e técnicas são feitas dos ícones de dois websites: PortalCab.com e Ciberarte. Além de fazer clara utilização de ícones em suas interfaces, esses websites são bem parecidos, principalmente, no que tange à sua construção e objetivos. Eles têm o mesmo modelo de publicação de conteúdo, em forma de notícias. Esse modelo é chamado de blog, e como tem atualizações freqüentes, possui um alto grau de visitação por parte do público interessado. No entanto, pode-se perceber as diferenças tanto teóricas quanto técnicas nos ícones desses dois websites, pois além de serem construídos sobre duas perspectivas diferentes, eles desempenham funções distintas nas interfaces em que estão inseridos. Assim, cada website faz a utilização dos ícones de maneira específica. O estudo e a análise trouxeram reflexões sobre os conceitos vinculados ao ícone do ponto de vista semiótico, como produtor de significado e sobre a função que esse desempenha na interface, perpassando pelo processo de construção do ponto de vista técnico.

2 O CAMPO TEÓRICO EM QUE SE ENCAIXA O ÍCONE NO CONTEXTO DAS INTERFACES GRÁFICAS COMPUTACIONAIS

Este capítulo busca contextualizar conceitualmente o campo onde o ícone está inserido, quando este é utilizado nas interfaces gráficas computacionais. A atenção está direcionada para a Interação Humano-Computador – IHC e as disciplinas que a compõe, em especial o Design. Interessa ainda analisar o conceito de interface e metáfora, abrindo assim caminho para o próprio estudo do ícone, no que tange ao seu significado (semiótica) e percepção (gestalt).

2.1 Interação humano computador – IHC

Desde a criação dos primeiros computadores eletro-mecânicos, em meados do século XX, houve uma contínua evolução tecnológica. Até então, o contato entre o homem e o computador se dava de forma direta, através de aparelhos mecânicos, ou seja, não havia mediações para a sua utilização. Dessa forma, eles eram manuseados apenas em laboratórios, por especialistas e cientistas. A evolução tecnológica firmou a base necessária, para que, no início da década de 80, houvesse uma mudança de paradigma na relação entre o homem e o computador. A interação passou a ser mediada por um ponto de interseção entre as duas entidades, a interface gráfica, chamada GUI (Graphical User Interface), que Mandel (1997, p.160), define como “representação gráfica e interação com programas, informações e objetos na tela do computador”. Com essa mediação e sua posterior evolução, os computadores passaram a ser acessíveis para pessoas comuns e não só para peritos especializados em informática. Não era mais necessário o profundo conhecimento sobre o funcionamento do computador, já que agora, o usuário tinha acesso apenas às tarefas bem definidas e representadas na interface por meio de janelas, barras de rolagem, menus, ícones gráficos, botões, caixas de texto, etc. 11

Assim, o que antes era restrito a estudos científicos se transformou em ferramenta para as mais diversas finalidades e para todo o tipo de pessoas e instituições. Segundo Rocha e Baranauskas (2003), o impacto que essa mudança causou, gerou a necessidade da criação de campos de estudo sobre esse relacionamento entre o homem e o computador. Assim, tiveram início os estudos sobre a Interação Humano Computador (IHC), que envolvem diversas disciplinas necessárias para a análise dos fatores daí decorrentes. Tais disciplinas são: a Psicologia Cognitiva, Psicologia Social e Organizacional, Ergonomia, Ciência da Computação, Inteligência Artificial, Lingüística, Filosofia, Sociologia, Antropologia, Engenharia e Design. A Psicologia Cognitiva tem como objetivo o estudo do comportamento humano a fim de caracterizar as capacidades e limitações humanas e o modo como as pessoas trabalham com os artefatos em geral, dentre eles o computador. A Psicologia Social e Organizacional estuda a natureza humana no contexto social, caracterizando o comportamento humano quando as pessoas se relacionam entre grupos, organizações e instituições, levando em conta o papel da tecnologia, no que tange à comunicação e a organização desses grupos. A Ergonomia é uma disciplina que já existia antes dos computadores. O termo foi criado em 1949, quando surgiu a primeira sociedade de ergonomia. No contexto industrial, ergonomia definia a adaptação do trabalho e dos instrumentos de trabalho, às máquinas, e ao homem. Wisner (1987, p.12) define a ergonomia como “o conjunto de conhecimentos científicos relativos ao homem e necessários à concepção de instrumentos, máquinas e dispositivos que possam ser utilizados com o máximo de conforto, segurança e de eficácia”. A Ciência da Computação explora os potenciais da tecnologia e tem o papel de estudar as estruturas matemáticas que formulam os princípios da computação e dos códigos que a regem. A Inteligência Artificial é um ramo da Ciência da Computação preocupada com a construção e compreensão de entidades e sistemas que mostrem as mesmas características encontradas na inteligência humana. Os estudos realizados pela Inteligência Artificial são importantes para a IHC na construção de interfaces inteligentes que utilizam linguagem natural na comunicação com o usuário.

A Lingüística é o estudo científico da linguagem humana. Na IHC, ela tem o papel de explorar a estrutura da linguagem natural para que as interfaces possam se adequar à forma de comunicação humana, tanto em um nível textual, como cultural. Filosofia, Sociologia e Antropologia embora não sejam ciências diretamente ligadas à IHC, desempenham um importante papel na projeção de sistemas e interfaces computacionais. São elas que possibilitam o conhecimento sobre o comportamento humano tendo em vista que, os aspectos externos, como a sociedade em que o usuário está inserido, as pessoas com que se relaciona e a maneira como esses processos ocorrem, interferem no modo como o usuário utiliza o computador. A Engenharia se aplica à IHC através da Engenharia de Software, que utiliza os princípios

engenharia

nos processos

criação,

construção, análise,

desenvolvimento e manutenção dos sistemas informatizados. Ela se baseia em modelos abstratos que possibilitam a especificação, projeção e implementação de sistemas, a fim de garantir suas qualidades. Como a interface e todos os seus elementos gráficos, passaram a intermediar a utilização dos computadores, o Design Gráfico desempenhou papel essencial no desenvolvimento de sistemas e websites. Aplicado à IHC, o chamado Design de Interfaces ficou responsável pela estética e interação das interfaces, além de trazer para o processo de desenvolvimento, toda a metodologia de criação utilizada em outros campos do Design.

Para alcançar seu objetivo de construir interfaces

compreensíveis e usáveis pelos usuários, o Design de Interfaces baseia seu trabalho justamente na experiência do usuário. É a partir do contexto cultural, social e tecnológico em que o usuário está inserido, e das suas demandas e necessidades, que acontecem as soluções de interação com a interface. Todas essas disciplinas ao mesmo tempo em que constituem a IHC, acabam se inter-relacionando e se complementando, auxiliando o Design de Interfaces no processo de criação de soluções para as demandas e necessidades dos usuários. Dessa forma, se torna mais do que necessário, ao se pensar no fator estético de uma interface, levar em conta também o processo de percepção do usuário (Psicologia), o modo como este utiliza o computador (Ergonomia), seu contexto cultural, social e tecnológico (Sociologia, Antropologia e Ciência da Computação) e o modo ele se comunica (Lingüística).

Rocha e Baranauskas (2003, p.14) conceituam IHC como “a disciplina preocupada com o design, avaliação e implementação de sistemas computacionais interativos para uso humano e com o estudo dos principais fenômenos ao redor deles”. Ou seja, IHC é responsável pelo estudo de todos os processos que envolvem a utilização dos computadores. Como a tecnologia não para de evoluir, os estudos na área se mostram altamente necessários para que a interação entre o homem e o computador seja de qualidade e se dê de forma plena. Para isso, a IHC está fortemente ancorada nos problemas, necessidades, capacidades e preferências das pessoas que utilizam sistemas computacionais. Dessa forma, a construção desses sistemas tem que ser centrada nos usuários que os utilizarão, ou seja, não são os homens que têm que mudar para usar os computadores e seus sistemas, mas estes que têm que se adequar à suas necessidades.

2.2 A interface gráfica

O termo interface ficou bastante conhecido, devido principalmente à popularização da internet, dos games e do próprio computador. Tudo isso só foi possível com a evolução da tecnologia e dos processos que permitiram a adequação da informática e da computação às pessoas comuns, a fim de resolverem problemas, se divertirem, estudarem e etc. A construção de uma camada que traduz todo o processo complexo em ações simples para o usuário, foi o grande passo para a concretização do mundo em que vivemos. Segundo Cybis (2000, p. 23), nos sistemas computacionais, os responsáveis pela concepção da interface, atuam como emissores ou receptores. Eles colocam a disposição do usuário da interface, as possibilidades e limites da comunicação, através de elementos com os quais o usuário interage com o sistema. Assim, podese afirmar que, as interfaces gráficas na verdade, são agrupamentos desses elementos de interação e através deles o usuário conjuga ações e recebe respostas por parte do sistema. Interface nesse sentido é um conjunto de elementos gráficos e textos que sintetizam ou traduzem ações, caminhos e respostas percorridos pelos usuários ao 14

utilizarem determinado sistema, aplicativo ou website. A imagem assim ganha grande importância nesse processo, pois é ela que dá significado aos itens contidos na interface. Dessa forma, é através da interpretação de tais imagens e dos textos que o usuário interage. Seis dimensões da interface são sintetizadas por Faiola (2001) e apontam os fatores principais que a caracterizam. A dimensão da comunicação visual é formada pelos elementos gráficos e animação, ou seja, a computação gráfica, elementos essencialmente visuais. Na dimensão associativa estão presentes as metáforas, os idiomas e a iconografia, que é onde se dá a transposição da linguagem informatizada em conceitos e objetos compreensíveis pelo usuário. A dimensão semântica faz referência à linguagem e palavras por onde se processa a comunicação na interface. A dimensão da organização é o campo de trabalho da arquitetura da informação, que é onde se estrutura a informação para que ela possa ser acessada pelo usuário da maneira mais lógica possível. A dimensão da navegação é a representação espacial que é a trajetória por onde o usuário passará para efetuar determinada tarefa. E a dimensão do protocolo faz menção ao comportamento e interatividade, maneira pela qual o usuário e a interface se interrelacionam. Dentre tais dimensões, a associativa ganha importância especial por conter a metáfora. Ela contribuiu para que os sistemas computacionais pudessem atingir o objetivo de se comunicar com o usuário. A metáfora, que é um recurso lingüístico muito importante para o processo de comunicação humano, aplicada às interfaces, possibilitou o processo de tradução dos aspectos, ações e tarefas efetuados pelo sistema, para a linguagem humana.

2.2.1 A utilização das metáforas

A todo o momento a metáfora é utilizada na linguagem humana e muitas vezes, as pessoas nem mesmo se dão conta de tal utilização. Ela é um importante recurso lingüístico e auxilia as expressões humanas, facilitando a comunicação. Segundo Rocha e Baranauskas (2003), as metáforas funcionam como modelos naturais, que permitem ao usuário usar conhecimento familiar de objetos concretos e 15

experiências, para dar estrutura a conceitos mais abstratos. Essa mesma função é desempenhada pelas metáforas de interface que transformam ações e jargões técnicos em linguagem acessível para o usuário. Assim, as metáforas servem como auxiliares no entendimento das interfaces, tornando o ambiente dos sistemas mais fácil de ser entendido no contexto humano. A metáfora foi agregada à interface e se tornou o mais importante recurso de tradução dos sistemas informatizados para o homem, possibilitando a comunicação com o computador. É através dela que o usuário consegue entender a lógica rígida dos computadores. Mas, não é só na interface em si, ou seja, no processo de utilização de determinado sistema, que as metáforas são aplicadas, mas na própria nomenclatura dos dispositivos tecnológicos que compõe o computador. Há uma substituição de termos técnicos em termos usuais para o usuário. Como exemplo simples, pode-se citar o mouse, que tecnicamente é chamado de dispositivo de apontamento. Este tipo de aplicação da metáfora, onde termos são substituídos, independentemente do contexto onde a metáfora é colocada, é chamada metáfora-palavra (DOMINGUES, 2001, p.20). Na linguagem humana, a metáfora pode ter outras funções, que não a comunicativa. É o caso das metáforas utilizadas na literatura ou nas artes visuais, com função poética de abstração e subjetividade. Nas interfaces, a metáfora tem exclusivamente a função comunicativa, ou seja, ela não pode conter ruídos, ela é imperceptível para o usuário. Domingues (2001, p. 52) afirma, com relação à metáfora de signos visuais, utilizada pelas artes visuais, a chamada metáfora poética, que ela pode situar-se na terceira tricotomia dos signos da teoria peirciana. Então, ela pode situar-se no rema, no dicente, ou no argumento. Nesse caso, sendo rema, a metáfora é mera possibilidade ou hipótese. Assim ela projeta intenções poéticas para quem a vê. Já no caso dos signos visuais aplicados à interface, o contexto se altera. A função agora é de comunicar, de tornar o ambiente computacional acessível, para que o usuário realize as tarefas necessárias no sistema. Nesse caso, as imagens fazem referência o mais explicitamente possível, às tarefas e ações, ou às conceitos e imagens que remetam a essas tarefas, a fim de possibilitar a comunicação. Dessa forma, esses signos visuais aplicados na interface se situam na segunda tricotomia

peirciana, que estabelece a relação entre o signo e o objeto que ele representa. Assim, esse signo interfacial poderá ser um ícone, um símbolo ou um índice.

2.3 O ícone e a semiótica

A função que o ícone desempenha nas interfaces gráficas vai além da simples requisição de determinada ação. O ícone também produz significado para o usuário. É nas suas características de atribuição e de síntese que reside, o processo pelo qual o ícone se torna um meio de interação da interface. Dessa forma, os conceitos formulados pelo teórico Charles Sanders Peirce no início do século XX, a chamada Semiótica, fazem parte da análise desse elemento gráfico, que como conceito é parte integrante da teoria geral dos signos. Analisando a teoria peirciana, através do próprio Peirce e também de Lucia Santaella, Niemeyer (2003, p. 19), diz que signo é a representação de algo ausente para alguém presente, em determinado contexto. Então, a partir desse algo, o objeto (que pode ser objetos, qualidades, idéias, eventos ou serviços) chamado na semiótica de objeto dinâmico, pode ser gerado o signo que passa a ser seu mediador pelo qual será representado. A representação do objeto pela mediação do signo é diferente do que pela representação direta, pois o signo não é o objeto ou idéia, mas apenas a sua representação. O signo representa o objeto e gera na mente do intérprete outro signo, que traduz o significado do primeiro, chamado interpretante. Dessa forma, nesse processo de representação, o signo é tratado na mente da mesma forma como o próprio objeto é tratado. O objeto, o signo e o interpretante formam a relação triádica de signo. Segundo Niemeyer (2003, p. 34), dentro dessa relação triádica, existem três tricotomias, que são três diferentes tipos de relações do signo. A primeira se dá no nível do signo em si mesmo, a segunda no nível do objeto e a terceira no nível do interpretante. A primeira tricotomia do signo em relação a si mesmo, faz alusão às relações sintáticas do signo. A sintaxe é definida pela conexão entre os signos, que possibilita a semiose, que é o processo de significação. Esse nível cria três espécies de signos: o qualissigno, o sinsigno e o legissigno. O qualissigno apresenta qualidades do 17

signo, o sinsigno apresenta eventos que ocorrem em determinado tempo e espaço e o legissigno apresentam regras e convenções estabelecidas pelos homens. Segundo Coelho Netto (1983, p.61), a terceira tricotomia do signo em relação ao interpretante representa as relações pragmáticas do signo. Essas relações pragmáticas são definidas pelas interpretações que o signo possibilita do objeto representado. Nesse nível de representação mais três divisões são feitas: rema, dicente e argumento. O rema é uma mera possibilidade, que pode ou não se afirmar. O dicente é um signo de fato composto por remas. E o argumento é um signo fundamentado ou de lei. A segunda tricotomia peirciana, onde o signo se relaciona com o objeto, por fim é comentada e recebe maior atenção, por ser a relação triádica onde se insere o ícone interfacial. São as chamadas relações semânticas, que são definidas pelas características representadas pelo signo e que se referem ao objeto gerador. Para que um objeto possa ser identificado ele tem que ser passível de representação. Essa representação pode ser feita de três modos diferentes, ou seja, três possíveis naturezas de representação podem se dar nesse processo. Cada um desses modos, índice, símbolo e ícone, são possíveis maneiras de como o signo pode fazer referência àquilo que representa (NIEMEYER, 2003, p.36). O índice é uma maneira de representação que aponta marcas que o objeto dinâmico possui; o símbolo é a livre associação entre objeto dinâmico e signo, feita de modo arbitrário, e; o ícone é uma forma de representação que se dá pela semelhança, ou seja, pela analogia com o objeto dinâmico. Segundo Niemeyer (2003, p. 36), tal característica confere ao ícone uma ampla capacidade de expressão, uma vez que faz referência direta ao objeto representado. Niemeyer (2003, p. 37), define três níveis do ícone como maneiras possíveis de expressividade. A primeira é a imagem, que busca construir o objeto dinâmico em si, tomando seu lugar. A seguinte é o diagrama que usufrui da analogia para estabelecer a relação de semelhança entre signo e objeto. E a terceira é a metáfora, que reflete atributos do caráter do objeto dinâmico no signo. Esse nível é mais abstrato por estabelecer correspondências conceituais entre objeto e signo. Para Rocha e Baranauskas (2003, p.151), o ícone interfacial é uma representação icônica tanto para o objeto, quanto para a ação ou tarefa. Mas, já para Domingues (2001, p.104), o ícone gráfico interfacial, no sentido peirciano, tem como representação a ação que será executada no instante em que o usuário o 18

acessar. Nesse sentido, o ícone interfacial é na verdade um índice, por ele indicar o que será realizado ao ser clicado. Coelho Netto (1983, p.58), enxerga o índice como uma forma especial de ícone, devido ao signo inicial ter uma qualidade em comum com o objeto, mesmo que não seja essa a característica que o torna signo, mas o fato de ser modificado pelo objeto. Exemplificando, a ação de apagar ou deletar, representada por uma lixeira na interface, é um ícone se for pressuposto que o objeto que ele representa é a lixeira em si. Porém, na verdade, a sua relação com a lixeira é metafórica, para que o usuário alcance um modelo conceitual passado, de forma que ele correlacione a ação de jogar algo fora na lixeira, com a ação de excluir determinado objeto ou ação na interface. O ícone da lixeira seria assim um índice por representar não a lixeira em si, mas a ação de excluir algo, ou seja, ele representa uma relação com a ação de excluir realizada pelo usuário. Há ainda outra associação que pode ser feita entre o ícone interfacial e os tipos de signos especificados por Pierce. O ícone interfacial pode ser um símbolo, à medida que se relaciona com determinada tarefa ou ação, de acordo com uma convenção maior, que não necessariamente é arbitrária. Isso acontece, pois embora o símbolo seja tido como um signo que se relaciona com seu objeto por convenção arbitrária, segundo a ótica peirciana, Coelho Netto (1983, p.59), atenta para o fato de que, o símbolo pode conter um índice, ou seja, ter certa determinação em sua associação com o objeto. Mas, mesmo sobre essa ótica, a característica principal, que o define como símbolo permanece sendo a da convenção. Toda essa questão acerca de que tipo de signo seria o ícone interfacial pode ser explicada pela afirmação de Coelho Netto (1983, p.59), “o signo pode exercer simultaneamente (e normalmente o faz) as três funções semióticas: a icônica, a indicial e a simbólica, não sendo sempre muito simples a tarefa de determinar qual delas predomina...”. Diante disso, pode-se assim concluir, que o ícone interfacial seria um signo híbrido, uma vez que, ele pode possuir características mútuas de um ícone, de um índice ou de um símbolo. Mas, fica evidente que essa classificação vai depender da forma como o ícone interfacial esta remetendo à ação, ou seja, de que tipo de associação ele utiliza para se fazer entender pelo usuário que interage com a interface.

2.4 Os ícones interfaciais

Para o processo de transposição das linhas de comando em interfaces gráficas foi necessária a criação de uma linguagem sucinta, sintética e de fácil compreensão. Estudos da Psicologia mostravam que a mente humana interpreta com melhor facilidade figuras do que palavras e por isso a utilização de ícones acabou tornandose padrão nas interfaces. A maior propriedade do ícone é seu poder de síntese, que possibilita sua rápida decodificação. Os ícones devem ser significativos, apropriados, coerentes, consistentes, claros e simples. O ícone na interface é constituído por uma imagem gráfica. Distribuídos pela interface, os ícones são pontos de interação, por onde o usuário realiza ações. Os primeiros ícones fora construídos no começo da década de 80 nas primeiras interfaces gráficas desenvolvidas pela Xerox e pela Apple. Esses primeiros ícones, devido às limitações tecnológicas dos monitores, que até então só serviam à visualização de textos, eram essencialmente construídos nas cores preto e branco e eram altamente simbólicos representando as ações e objetos com poucas linhas e pontos, como mostra o exemplo abaixo.

FIGURA 1 – PRIMEIROS ÍCONES – fonte: http://www.guidebookgallery.org/icons/components

Mas acompanhando a evolução tecnológica também os ícones sofreram contínua evolução e com o tempo, passaram a ser compostos por cores, perspectivas e riqueza de detalhes, como mostram os exemplos abaixo.

FIGURA 2 – ÍCONES DE HOJE – fonte: http://www.guidebookgallery.org/icons/components

Tal evolução é fruto dos contínuos estudos e principalmente à Psicologia aplicada a IHC, que permitiu o melhor entendimento do fator humano no processo de percepção dos elementos gráficos da interface.

2.5 Percepção

O processo de percepção de imagens pelo sistema visual humano foi amplamente estudado na Alemanha, no início do século XX, pela Escola de Psicologia Experimental Gestalt, que formulou leis gerais de percepção, as chamadas Leis da Gestalt. Estas leis descrevem como os princípios básicos de proximidade, similaridade, continuidade e conectividade dos objetos acontecem na mente humana. O movimento gestaltista defendeu principalmente a idéia de que, o olho humano não enxerga as partes do todo separadas, ele tende a perceber o todo através das relações entre seus elementos. Sendo uma expressão gráfica, para ser eficiente no processo de comunicação e ter o máximo de entendimento por parte do usuário, ao ícone devem ser aplicadas técnicas visuais ancoradas nas Leis da Gestalt como: • Clareza: o uso da harmonia, do equilíbrio e da ordem, possibilita a facilidade de leitura e rapidez na decodificação e/ou compreensão imediata do objeto. • Simplicidade: a mente humana tende a organizar da forma mais harmoniosa e unificada possível o que o olho vê. A simplicidade se caracteriza por organizações formais fáceis de serem assimiladas, lidas e compreendidas rapidamente. • Minimidade: consiste em aplicar apenas o essencial, diminuindo ao máximo o uso de unidades e elementos informacionais.

2.6 Considerações finais sobre o capítulo

O ícone interfacial foi um dos elementos integrantes do processo de adequação do computador à não especialistas, ou pessoas comuns, para os mais diversos fins. Amplos estudos foram e são efetuados, a chamada Interação 21

Humano-Computador – IHC, com o intuito de prover um melhor relacionamento entre essas duas entidades, o homem e o computador, em todos as formas e sentidos. Para isso, várias disciplinas fazem sua contribuição constituindo a IHC e em especial o Design, ou Design de Interfaces, que se mostra essencial no presente estudo, por ser o campo onde se pensa o ícone como solução de interação a fim de aumentar a intuitividade para o usuário. Nessa quebra de paradigma na utilização dos computadores, dois fatores foram primordiais. Um deles foi a evolução tecnológica, que permitiu que os computadores deixassem de ser itens estritamente laboratoriais, ao se tornarem menores, menos complexos e mais eficientes. E o outro fator, que pode ser considerado o ponto chave nessa evolução, foi o advento da interface gráfica, uma área de contato que traduz a linguagem computacional para a linguagem humana, o que permitiu realmente que a comunicação entre homem e computador se efetivasse e assim também a proliferação dos computadores para fora dos meios científicos. A utilização da metáfora nas interfaces foi e é essencial na construção de uma linguagem mais acessível. Ela é o meio pelo qual a interface consegue atingir seu objetivo de possibilitar a interação com o usuário. Como o ícone interfacial, além de exercer determinada função na interface, que pode ser acessar alguma ação ou apenas informar algo, também produz sentido, ou seja, possui uma identidade, definições semióticas podem se aplicar a ele. No sentido peirciano, segundo as diferentes análises de vários autores, o ícone interfacial seria um signo híbrido por expressar diversas características, de acordo com a sua aplicação e o contexto onde está inserido. A partir dessa contextualização no campo da IHC e posterior conceituação teórica, o segundo capítulo tratará dos aspectos técnicos que envolvem o ícone interfacial, já que esse é uma imagem gráfica, que é construída e visualizada sobre certos paradigmas tecnológicos. Além disso, uma avaliação teórica e técnica serão realizadas sobre os ícones presentes em dois websites, que foram escolhidos devido ao modo específico como cada um deles utiliza ícones em suas interfaces.

3 DEFINIÇÃO TECNOLÓGICA E AVALIAÇÃO TEÓRICA E TÉCNICA DOS ÍCONES DOS WEBSITES PORTALCAB.COM E CIBERARTE

Antes da avaliação teórica e técnica dos ícones, cabe aqui, voltar a atenção para os elementos, que quando combinados possibilitam tanto a criação, quanto a visualização das imagens gráficas da tela do computador. Torna-se importante a definição desses aspectos técnicos, já que, o ícone interfacial nada mais é que uma imagem gráfica, que entre tantas outras constitui a interface gráfica, meio pelo qual o usuário interage com os websites e com os sistemas computacionais.

Depois,

análises semióticas e técnicas são feitas sobre os ícones de dois websites, que tem o formato de blog. O PortalCab.com com publicações variadas e o Ciberarte com publicações voltadas para as artes visuais e a literatura. Como o capítulo demonstra, cada um trabalha com a utilização de ícones de maneira diferente.

3.1 A imagem digital

Existem duas grandes categorias de representação para as imagens digitais, são elas a imagem raster ou matricial e a imagem vetorial. A imagem matricial é formada por pequenos pontos coloridos chamados pixel. Pixel é a abreviatura de pixel element. Os pixels reunidos em linhas e colunas formam uma matriz que por sua vez formam a imagem. Duas variáveis podem definir a qualidade das imagens raster: a densidade de pontos na matriz, medida em pixels/polegada – DPI e a resolução espectral ou número de cores, definida por um número de bits. Quando a imagem possui apenas duas cores é necessário um bit para identificação de cor. A partir disso, quanto mais cores são utilizadas mais bits são necessários. As imagens vetoriais são constituídas por equações matemáticas que descrevem uma série de pontos unidos por linhas, os vetores. Cada vetor é uma equação independente com propriedades como cor, forma, contorno, tamanho e 23

posição na tela, incluídas na sua definição. Como cada vetor é uma equação independente, é possível mover e alterar suas propriedades quantas vezes forem necessárias e manter a sua nitidez e resolução original, sem afetar os demais componentes da imagem.

3.1.1 O sistema de cor

Para o meio digital, o sistema de cor utilizado é o aditivo, que se baseia na combinação das cores vermelha, verde e azul, o chamado RGB. O sistema RGB é especificamente orientado para dispositivos que funcionam por emissão de luz, como os monitores de computador ou televisores. A soma das três cores primárias (vermelho, verde e azul), constitui a luz branca. Dessa forma, a tela do computador é capaz de criar todo o tipo de cor a partir da emissão e combinação das luzes vermelha, o verde e o azul, em diferentes intensidades e níveis de misturas. O sistema RGB tem aplicação através de códigos hexadecimais, ou seja, que possuem seis caracteres. Estes seis dígitos podem ser os seguintes números e letras: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E a F. Eles são divididos em três grupos de dois. Dessa forma, o código hexadecimal é um código RGB alfanumérico, formado por três pares de caracteres que representam, da esquerda para a direita, as intensidades relativas ao vermelho, ao verde e ao azul, para assim definir uma determinada cor, sendo que, 00 = 0% e FF = 100%. Nessa ordem, as letras têm valores mais altos do que os números, ou seja, a cor será mais clara quanto menor for o número e será mais escura quando mais letras possuir. A cor vermelha, por exemplo, é expressa pelo código #FF0000, onde FF representa o 100% da cor vermelha e os quatro zeros representam a ausência das outras duas cores, verde e azul.

3.1.2 Formas de composição da imagem: Anti-aliasing

As imagens digitais são construídas a partir da junção dos pixels. Os primeiros ícones foram construídos utilizando apenas o processo chamado pixel-apixel, que consiste em compor as imagens ponto a ponto, com a preocupação apenas de representar pictoricamente o objeto ou a idéia. Como os pixels são pontos quadriculados e arranjados lado a lado, as figuras arredondadas também apresentam o aspecto de quadriculadas. Com o avanço da computação em geral e especificamente dos softwares de computação gráfica, criou-se o sistema anti-asliasing, utilizado pelos softwares de edição gráfica, que cria a ilusão de suavidade ao adicionar cores intermediárias nas bordas serrilhadas. O nome desse processo se deve à definição dada para a divisão visível entre pixels, que é “alias”. Este efeito de suavização do contorno acaba requerendo maior quantidade de cores, para complementar as bordas, aumentando assim, o número de cores da imagem e consequentemente o tamanho em bytes da imagem.

FIGURA 3 – CÍRCULOS RESPECTIVAMENTE PRODUZIDOS SEM E COM O AUXÍLIO DO SISTEMA ANTI-ASLIASING – fonte: próprio autor

A utilização deste recurso na construção de ícones possibilitou a criação de esboços com referências mais reais, tanto pelas aplicações de curvas e formas arredondadas, que tendem a ser mais orgânicas, quanto pela utilização de técnicas de sombreamento para se criar a sensação de objetos 3D. Embora tenha sido importante no processo de construção de ícones, o sistema anti-asliasing possui o problema de prejudicar a nitidez de imagens que sejam muito pequenas, pelo fato de acrescentar tonalidades intermediárias nos contornos. Isso acontece porque como a imagem é pequena ela possui pouco número de pixels, então ao acrescentar mais pixels com cores intermediárias nas bordas, os pixels do centro da imagem acabam se misturando aos da borda, 25

retirando a definição da imagem. Assim o método pixel-a-pixel de se construir ícones nunca foi abandonado e no fim dos anos 90, foi amplamente retomado com a ascensão da internet, é a chamada pixel art.

3.1.3 Formas de composição da imagem: Pixel art

O modo de construção de imagens pixel a pixel foi pioneiro não só na computação e em outros meios digitais, como também nos meios eletrônicos, como televisão e jogos de vídeo game. Nesses meios, a criação dessa técnica, foi uma questão de necessidade já que era a forma mais simples de se compor imagens, ainda sem compromisso com a qualidade das mesmas e tendo como empecilho o número de cores a serem utilizadas. O avanço da computação gráfica e a crescente utilização de gráficos em 3D, fez com que essa técnica caísse em desuso por algum tempo, mas a internet a trouxe novamente como uma nova forma de arte digital, a Pixel art. Pixel art é um estilo de arte digital, onde as imagens são construídas e editadas manualmente pixel a pixel. Embora a técnica seja a mesma de quando as primeiras imagens gráficas foram criadas, a pixel art trouxe outras características e possibilidades, incorporando questões como, perspectiva, sombras, iluminação e volume no trabalho de se montar as imagens pixel a pixel. Assim o estilo, que já era propício para imagens pequenas por ser um método onde se tem o controle exato do número de pixels e cores utilizadas, passou a ter as mais variadas aplicações, como, por exemplo, nas interfaces de telefones celulares e até mesmo em ilustrações publicitárias como se pode ver no website de uma promoção criada pelos laboratórios Garnier (http://www.quimiresist.com.br/v1/).

FIGURA 4 – IMAGENS CONSTRUÍDAS COM A TECNICA DA PIXEL ART – fonte: http://www.xfbbs.com/Wysc/SCGIFTPJJ

3.2 Avaliação teórica e técnica de ícones

Os websites analisados foram escolhidos primeiramente por fazer larga utilização de ícones em suas interfaces, ainda que, cada um a sua maneira. Além disso, tanto o PortalCab.com, quanto o Ciberarte, apresentam o mesmo modelo de publicação de conteúdo. Os dois são websites no formato blog e publicam notícias sobre variados assuntos e conteúdos.

3.2.1 PortalCab.com (http://www.portalcab.com)

O PortalCab é um site pessoal em formato de blog, onde Pedro Cab e Uisminofay escrevem sobre vários assuntos, além de disponibilizarem arquivos, como músicas, vídeos e imagens.

FIGURA 5 – PÁGINA PRINCIPAL DO WEBSITE PORTALCAB.COM

O site faz utilização de ícones principalmente no menu de categorias das informações disponibilizadas. Embora utilize outros ícones em outras seções da 27

interface, a análise leva em conta apenas os do menu de categorias, por serem os ícones autorais do website, enquanto que os outros, são ícones genéricos encontrados na internet e usados para identificar serviços e softwares.

FIGURA 6 – MENU DE CATEGORIAS DO WEBSITE PORTALCAB.COM

No PortalCab.com, os ícones tem o papel principal de possibilitar uma identificação visual de cada uma das categorias. Como são muitas, no total 14 categorias, e ocupam um grande espaço vertical na interface do website, os ícones permitem uma identificação visual, que auxilia no entendimento de cada categoria. Dessa forma, esses ícones funcionam apenas como complemento à nomenclatura das categorias, visto que, não fazem parte do link, que corresponde ao nome da categoria e leva à seção correspondente. A primeira categoria, “TV”, tem como ícone a representação de um controle remoto. Dessa forma, para se representar as notícias publicadas relativas à TV, um item integrante do aparelho eletrônico de televisão foi utilizado como referência.

FIGURA 7 – CATEGORIA “TV” DO PORTALCAB.COM

Esse tipo de representação do ponto de vista semiótico determina o signo, que é esse ícone interfacial, como um índice, já que, ele faz alusão à um item referente ao aparelho de TV. Essa definição é a mais clara e óbvia, tendo em vista o modo pelo qual a categoria TV foi representada. Mas, essa definição pode se tornar mais difícil, à medida que, outras possibilidades são imaginadas. Esse signo do controle remoto também poderia ser um ícone semiótico, pois ele possui uma analogia com o objeto em si, ainda que, seja apenas um acessório desse objeto. Porém, não é só o aparelho de TV que pode ter um controle remoto, inúmeros outros aparelhos eletrônicos, também o tem e isso tornaria a definição de ícone inviável. Contudo, esse ponto de vista, poderia ainda definir tal signo como um símbolo, se uma convenção maior estipulasse o controle remoto como o símbolo geral que representa o aparelho de TV, independente de outros aparelhos eletrônicos que também utilizam controle remoto. Já a segunda categoria, “Vídeos”, tem como ícone a representação gráfica de uma tela de TV. Sendo assim, do ponto de vista semiótico, tal signo também seria um índice, por fazer alusão ao processo de visualização de um vídeo, que na maioria dos casos, leva em conta a existência de uma tela.

FIGURA 8 – CATEGORIA “VÍDEOS” DO PORTALCAB.COM

A terceira categoria do menu “Gatinhas”, tem como ícone a representação gráfica de uma flor. Nesse caso, esse signo seria um símbolo por utilizar uma associação universal, entre a flor e a mulher. Ou seja, a representação se deu por uma convenção comum à cultura mundial de relacionar as características de flores e rosas, como delicadeza e beleza, com o ser feminino.

FIGURA 9 – CATEGORIA “GATINHAS” DO PORTALCAB.COM

A quarta categoria, “Downloads”, tem como ícone uma seta apontando para uma linha abaixo. Segundo o Glossário de termos técnicos sobre redes de computadores do Centro de Informações da Rede Nacional de Ensino e Pesquisa, RNP, disponível em www.rnp.br, download significa: “Processo de transferência de uma cópia de um arquivo presente em um computador remoto para outro computador através da rede. O arquivo recebido é gravado em disco no computador local. [...] O sentido literal é, portanto ‘puxar para baixo’.” Portanto, tal signo pode ser um índice, pois ele faz referência ao ato de “baixar um arquivo”, através da representação gráfica da seta apontando para baixo, onde a linha se refere ao destino do arquivo. E também pode ser um símbolo, pois faz referência à convenção para os usuários de internet, onde o jargão download significa “baixar” para o computador determinado arquivo, utilizando-se assim da metáfora para produzir significado.

FIGURA 10 – CATEGORIA “DOWNLOADS” DO PORTALCAB.COM

A quinta categoria, “Músicas”, tem como ícone uma representação gráfica utilizada no sistema de escrita musical, a chamada notação musical. Dessa forma, 30

esse signo pode ser um símbolo, pois esses grafismos são culturalmente associados à música, mesmo que o seu significado precise ser estudado para ser compreendido.

FIGURA 11 – CATEGORIA “MÚSICAS” DO PORTALCAB.COM

A sexta categoria, “Diversão”, tem como ícone a representação gráfica de um tipo de boina com um pirocoptero, que é um brinquedo popular que contém duas hélices e um bastão e ao ser girado com a força das mãos pode voar. O signo faz referência a um determinado brinquedo infantil para representar a diversão e por isso seria um índice.

FIGURA 12 – CATEGORIA “DIVERSÃO” DO PORTALCAB.COM

A sétima categoria, “Nerd”, tem como ícone a representação gráfica de óculos. A palavra nerd é uma gíria associada a pessoas que dedicam a maior parte do seu tempo aos estudos, a assuntos estritamente técnicos e que geralmente possuem um comportamento respeitável e educado. Como as pessoas com esse perfil costumam usar óculos, criou-se o estereótipo da pessoa nerd, que pode ser reconhecida visualmente através dos óculos. Dessa forma, o signo dos óculos seria um símbolo por representar a categoria com assuntos ligados à tecnologia, com uma convenção.

FIGURA 13 – CATEGORIA “NERD” DO PORTALCAB.COM

“Joguinhos” é o nome da oitava categoria, que possui como ícone a representação gráfica de um dado. Dado é um instrumento de jogo muito antigo e utilizado por diversas civilizações. O signo do dado seria um índice, por fazer 31

referência a um instrumento tão conhecido e largamente utilizado em jogos de tabuleiros. Como a seção não trata especificamente de jogos de tabuleiros, mas sim de jogos digitais, essa referência ao dado é uma metáfora, que possibilita o reconhecimento da seção como sendo sobre jogos.

FIGURA 14 – CATEGORIA “JOGUINHOS” DO PORTALCAB.COM

A nona categoria, “Fotos”, tem como ícone a representação de uma figura humana dentro um quadro. Como representa características de uma fotografia, que pode ser um objeto enquadrado em um determinado plano, esse signo seria um ícone, pois apresenta similaridade com o objeto representado.

FIGURA 15 – CATEGORIA “FOTOS” DO PORTALCAB.COM

A décima categoria, “Cinema”, tem com ícone a representação gráfica da cabeça do personagem de desenho animado da Disney, Mickey Mouse. Esse personagem se tornou o símbolo mundial da Walt Disney, que é uma das maiores empresas de mídia e entretenimento do mundo. Dessa forma, Mickey Mouse é mundialmente conhecido pelo cinema de animação da Walt Disney. O signo do Mickey, aplicado à categoria cinema seria assim um símbolo, já que, por uma convenção geral, se tem a correlação entre tal personagem e o cinema em geral.

FIGURA 16 – CATEGORIA “CINEMA” DO PORTALCAB.COM

“Biblioteca” é a décima primeira categoria e tem como ícone a representação gráfica de três livros empilhados. Como faz referência aos itens que compõem uma biblioteca, que são os livros, esse signo seria um índice.

FIGURA 17 – CATEGORIA “BIBLIOTECA” DO PORTALCAB.COM

A décima segunda categoria, “Futebol”, tem como ícone a representação gráfica de uma bola. Sendo assim, esse signo faz referência a um dos itens que compõe o esporte futebol, e seria dessa forma, um índice. Mas, como a bola como foi representada, com as pequenas manchas, é tida por uma convenção maior como o símbolo mundial do futebol, o ícone da bola também poderia ser um símbolo, ainda que, exista correlação direta entre tal símbolo e o objeto que ele representa.

FIGURA 18 – CATEGORIA “FUTEBOL” DO PORTALCAB.COM

A décima terceira e penúltima categoria, “Diário do Cab”, tem como ícone a representação gráfica de um lápis. No caso, o signo está fazendo referência à ferramenta utilizada para se escrever um diário, o lápis, e por isso seria um índice. Como o conteúdo da categoria não é um diário escrito à mão, mas um diário digital, ou seja, que não utiliza o lápis como ferramenta de escrita, mas sim um teclado, esse ícone utiliza a metáfora do lápis fazer a correlação com o tema da categoria.

FIGURA 19 – CATEGORIA “DIÁRIO DO CAB” DO PORTALCAB.COM

A décima quarta e última categoria intitulada “Porão de posts”, tem como ícone um asterisco. Esse signo é o único sem representatividade alguma com a sua categoria e por isso se definiria melhor como um símbolo.

FIGURA 20 – CATEGORIA “PORÃO DE POSTS” DO PORTALCAB.COM

Pode-se perceber que em sua maioria, os ícones interfaciais encontrados no site PortalCab.com, do ponto de vista semiótico, são indiciais ou simbólicos, o que os torna muitas vezes, subjetivos e relacionáveis por meio de abstração. Como o objetivo da interface de um website, que tem como foco a disponibilização de notícias sobre variados temas, é manter a clareza, permitindo seu entendimento por parte do público, os ícones elaborados seriam inviáveis sem seus respectivos rótulos, que no caso são os títulos de cada categoria. Isso reforça o papel que eles possuem, de apenas complementar o reconhecimento de cada categoria por meio visual. Tendo em vista as Leis da Gestalt, segundo Gomes (2000, p. 36), “Qualquer padrão de estímulo tende a ser visto de tal modo que a estrutura resultante é tão simples quanto o permitam as condições dadas”. Dessa forma, no geral, os ícones do PorcalCab.com possuem uma boa pregnância formal, pois são simples e claros, expressando com facilidade o seu significado, ainda que, na maioria dos casos, essa relação entre o ícone e que o ele expressa, tenha ficado à parte da relação entre o ícone e a categoria que ele representa. Isso se deve ao fato dos ícones, em sua maioria, terem relações indiciais ou simbólicas com a definição de cada categoria. Do ponto de vista técnico, os ícones do PortalCab.com, são bastante simples, construídos sem nenhuma perspectiva e contendo apenas uma cor, que é o azul, o que unifica a identidade visual do website. Pode-se perceber pelos contornos arredondados e arestas suaves, que na construção dos mesmos, o sistema antiasliasing foi utilizado e portanto a forma de construção não se deu pixel a pixel, como acontece na pixel art.

3.2.2 Ciberarte (http://www.ciberarte.com.br)

Ciberarte é um website, também em formato blog (notícias), dedicado a publicações sobre literatura e artes visuais.

FIGURA 21 – PÁGINA PRINCIPAL DO WEBSITE CIBERARTE

A aplicação dos ícones no website do Ciberarte, se dá no menu de categorias em forma de “abas”. Cada “aba” possui apenas um ícone sem rótulo explícito, que é um link para se selecionar a determinada “aba” e acessar o conteúdo da categoria. Ao se passar o mouse sobre os ícones, os rótulos são exibidos com a utilização do recurso ALT, do código HTML.

FIGURA 22 – MENU DE CATEGORIAS DO WEBSITE CIBERARTE

FIGURA 23 – MENU DE CATEGORIAS DO WEBSITE CIBERARTE, COM A EXIBIÇÃO DO RÓTULO DO ÍCONE ATRAVÉS DO RECURSO ALT

No Ciberarte, os ícones são utilizados com o intuito de se identificar cada categoria instantaneamente ou pelo menos dar uma noção para o usuário do que ele encontrará ao acessar aquela determinada seção. Dessa forma, os ícones são os elementos centrais de interação na interface, já que, a priori, se apresentam sem o auxílio de rótulos. A primeira categoria, que é o início do website, tem como ícone a representação gráfica de um raio. Como mostra a figura 23, o rótulo expresso no ALT da imagem é “ultimas atualizações”, ou seja, ali estão listadas em ordem cronológica as últimas publicações do Ciberarte. O raio é um fenômeno da natureza, uma descarga elétrica. Como a seção “últimas atualizações” é onde se pode acessar o que de mais novo foi postado no website, o conceito que se relaciona entre esta seção e o ícone do raio é o da rapidez ou imediatismo, pois uma descarga elétrica é uma força muito veloz e ágil. Dessa forma, o signo do raio nesse contexto seria um símbolo, pois se relaciona por abstração, ou seja, sem uma relação direta, uma característica do fenômeno do raio às ultimas publicações ali encontradas.

FIGURA 24 – CATEGORIA “ÚLTIMAS ATUALIZAÇÕES” DO CIBERARTE

A segunda categoria tem como ícone a representação gráfica de um livro aberto. “Literatura” é o rótulo desta categoria, visualizado através do ALT. Nessa categoria são publicadas diversas formas literárias como poemas, contos e crônicas. Dessa forma, o signo do livro faz relação direta com o tipo de conteúdo ali encontrado, que é de caráter literário e geralmente são encontrados em livros. E assim tal signo seria um índice, mas também poderia ser um símbolo pela convenção maior que é aplicada a imagem do livro como representação de linguagens escritas em geral.

FIGURA 25 – CATEGORIA “LITERATURA” DO CIBERARTE

A terceira categoria é chamada de “artes plásticas”, e tem como ícone a representação gráfica de um pincel. Nessa categoria se encontram todas as

publicações que contem pinturas, desenhos e outras formas de artes plásticas. O signo do pincel é uma referência ao instrumento utilizado na pintura, que é uma das formas de expressão das artes plásticas. Dessa forma, tal signo seria um índice, mas, também poderia ser um símbolo visto que o pincel também é utilizado por profissionais que não são artistas.

FIGURA 26 – CATEGORIA “ARTES PLÁSTICAS” DO CIBERARTE

A quarta categoria tem como ícone a representação gráfica de uma câmera fotográfica. O rótulo dessa categoria é “fotografia”. Nesse caso, se fez referência à ferramenta que possibilita a técnica chamada de fotografia, e assim esse signo da câmera fotográfica seria um índice.

FIGURA 27 – CATEGORIA “FOTOGRAFIA” DO CIBERARTE

A quinta categoria tem como ícone a representação gráfica de um balão de conversa, muito utilizado em quadrinhos. O nome da seção é “quadrinhos – charges – comix”. O signo do balão faz referência a um dos recursos gráficos utilizado na chamada história em quadrinhos, que conjuga textos e imagens. Como faz referência a um dos elementos contidos na história em quadrinhos, tal signo seria um índice.

FIGURA 28 – CATEGORIA “QUADRINHOS – CHARGES - COMIX” DO CIBERARTE

Na sexta categoria “vídeo – cinema – animação”, são reunidas todas as publicações referentes a essas três áreas. O ícone dessa seção é a representação gráfica de uma filmadora. Como acontece na categoria “fotografia”, novamente foi feita uma referência à ferramenta pela qual é possível a criação de vídeos, cinema e animação e assim esse signo também seria um índice.

FIGURA 29 – CATEGORIA “VÍDEO – CINEMA - ANIMAÇÃO” DO CIBERARTE

A sétima categoria tem como ícone a representação gráfica, três formas humanas sobrepostas. O título da categoria é “autores - artistas”. Essa categoria apresenta o nome de todos os autores que publicam no Ciberarte, e o link para as suas respectivas seções. Dessa forma, o ícone expressa que ali serão encontradas as pessoas responsáveis pelas publicações feitas no website. Assim, o signo das formas humanas seria um ícone por apresentar as características do seu objeto gerador, no caso, as formas humanas.

FIGURA 30 – CATEGORIA “AUTORES - ARTISTAS” DO CIBERARTE

A oitava e última categoria chama-se “links externos” e contem indicações para outros websites na internet. O ícone desta categoria é a representação gráfica de elos de uma corrente. Elos de corrente são largamente utilizados na internet em inúmeros websites. Eles representam a ligação que se faz quando se põe em um website o link para um outro website. No caso, a corrente seria uma metáfora para o tipo de ligação que está sendo feita, como se os websites estivessem interligados por meio de uma corrente. Dessa forma, esse signo dos elos de uma corrente seria um símbolo, já que, por uma convenção maior, por meio da metáfora adotou-se essa representação gráfica para indicar ligações entre websites.

FIGURA 31 – CATEGORIA “LINKS EXTERNOS” DO CIBERARTE

Os ícones do website Ciberarte em sua maioria, são signos semióticos do tipo indiciais ou simbólicos e possuem uma relação direta com as seções a que foram destinados. Dessa forma, eles expressam sem ruídos o que se pode encontrar em cada seção. Porém, a falta de rótulos explícitos, deixando claro o que os ícones ali representam, poderia criar algum grau de confusão em usuários que não possuem conhecimento prévio sobre os assuntos e conteúdos publicados. O recurso ALT 38

aplicado em todos os ícones diminui essa falha, mas não a resolve totalmente, já que, pode passar despercebida pelo usuário da interface, se este não posicionar o mouse em cima dos ícones. As leis gerais de percepção visual da Gestalt foram muito bem utilizadas na construção dos ícones da Ciberarte. Todos eles são simples e claros, se expressam com poucos elementos e têm uma boa pregnância formal. Do ponto de vista técnico, pode-se perceber que todos os ícones foram construídos sobre a ótica da pixel art, pois possuem as formas bem delimitadas e as bordas quadriculadas. Dessa forma, mesmo bem pequenos e contendo variação de tons de cinza, os ícones permanecem nítidos e compreensíveis. A opção pela pixel art, não se dá só nos ícones em si, como em todo o layout da interface, o que gera uma identidade visual integrada no website. Em todos os ícones foram utilizados apenas tons de cinza, menos no primeiro, que representa as últimas atualizações, que recebeu um destaque com a cor laranja. Esse destaque se deve a essa seção ser a página inicial do website, dessa forma, mesmo estando em outras seções o usuário pode perceber que o destaque em laranja corresponde ao início do Ciberarte.

3.3 Considerações finais sobre o capítulo

As imagens digitais podem ser feitas a partir de duas formas distintas de concepção, como foi explicado no início do capítulo. A chamada imagem raster, é aquela composta pela união de pixels. E a imagem vetorial, é a composta por equações matemáticas que definem cor, forma, contorno, tamanho e posição. Enquanto a raster tem um tamanho específico, que é proporcional ao número de pixels que ela possui, a vetorial pode ser definida em qualquer escala, pois o que se altera não são os pixels, mas as equações que definem as propriedades da imagem. A forma de construção de imagens digitais e mais especificamente de ícones, pode perpassar por duas técnicas distintas. O método vetorial, onde o sistema antiasliasing é utilizado para se manter a suavidade das bordas, permite que o ícone seja escalonável, ou seja, que o seu tamanho possa ser alterado sem deformação da imagem. Contudo, a utilização do anti-asliasing inviabiliza reduções muito 39

pequenas por deixar a imagem ilegível. Já com a técnica de construção de ícones, pixel a pixel, que também pode ser chamada de pixel art, é possível se construir os ícones com o mínimo de pixels possível, isso possibilita que mesmo bastante pequenos os ícones ainda continuem nítidos e compreensíveis. Porém, essa técnica não permite que o ícone tenha seu tamanho alterado automaticamente, já que, sua proporção depende do número de pixels que possui. Dessa forma, um ícone feito sobre essa ótica, caso precise ter seu tamanho alterado, tanto para mais quanto para menos, implica em uma nova formulação manual e na adição ou retirada de pixels, para se compor novamente a imagem. Avaliando os ícones dos websites PortalCab.com e Ciberarte, pode-se perceber que cada um faz utilização de ícones em sua interface de uma forma diferente. Enquanto que o PortalCab.com deixa os ícones apenas como auxiliares no processo de entendimento de cada categoria, o Ciberarte torna seus ícones pontos chaves de interação na interface, pois eles são os links de navegação por onde as categorias são acessadas. Além disso, o método de construção dos ícones também seguiram técnicas diferentes. O PortalCab.com tem ícones bidimensionais que utilizam apenas uma cor. Já os ícones do Ciberarte, apresentam certo grau de profundidade em suas formas, por serem compostos por tons de cinza. Do ponto de vista semiótico, quase todos os ícones dos dois websites são signos indiciais, ou seja, eles fazem referências às características dos objetos que representam. Dessa forma, eles têm uma boa representatividade, embora para serem melhor compreendidos, fosse melhor que representassem as próprias características dos objetos geradores, sendo assim signos icônicos. Tendo como pressuposto a função da interface, que é possibilitar a comunicação com o usuário através de seus elementos, os signos simbólicos são os que menos atendem a essa demanda, já que, os símbolos que fazem sentido para uma determinada cultura, ou público alvo, podem não fazer para uma outra, já que a relação que se dá entre o signo e o objeto representado é arbitrária e definida por convenção. O exemplo é o ícone do raio, que representa a categoria “últimas notícias” do Ciberarte. Como é um signo simbólico, ele tem pouca expressividade sobre o que contem naquela determinada categoria podendo causar ruídos na comunicação da interface.

4 CONSIDERAÇÕES FINAIS

Os conceitos, idéias e exemplos apresentados por este estudo, mostraram o contexto da criação do ícone interfacial, sua evolução específica, tendo em vista a evolução tecnológica e teórica que o envolveu, e o modo pelo qual ele é construído e utilizado nas interfaces, para depois ser percebido e interpretado pelo usuário. Para tanto, a conceituação semiótica foi necessária, já que, o ícone interfacial é um signo semiótico ao produzir significado para quem o interpreta. A partir daí, os métodos de construção das imagens digitais e mais especificamente dos ícones foram abordados, mostrando as principais diferenças e aplicações. Para isso, foi necessária uma breve explicação sobre os processos tecnológicos que envolvem tanto a construção, quanto a visualização das imagens digitais, nos meios computacionais. Tudo isso, serviu de base para uma análise teórica e técnica, que mostrou as diferenças nos métodos de construção e nas aplicações dos ícones, independente do layout da interface onde estão inseridos, e principalmente, independente da própria natureza do website de que fazem parte. Mesmo que o tema escolhido tenha sido bastante específico, o presente estudo não esgotou as suas abordagens conceituais, visto que, no caso, especificidade não é sinônimo de simplicidade. Desde a forma como é concebido, passando pela sua aplicabilidade e chegando à sua interpretação, o ícone se insere num contexto bastante complexo, que tem se desenvolvido bastante com os avanços propiciados pela tecnologia. O presente estudo se limitou às interfaces gráficas exibidas em telas de computador, em futuro breve a abordagem pode se dar em outros tipos de interfaces que já estão sendo pensadas, como por exemplo, a interface concebida tendo como suporte o ar. Sendo assim, toda a perspectiva de construção, aplicação, e uso se transforma, para se adequar, visando permitir o maior grau de comunicação possível entre o usuário e a interface. Nesse processo, só tem sucesso o profissional, que não se limita ao aprendizado da técnica em si, em constante mudança, mas que tem a pretensão de estender a sua visão à conceitos e idéias, que servem de base para as mais diversas mudanças de paradigmas que invariavelmente ocorrem. Sendo o produtor 41

editorial um profissional responsável pelo gerenciamento dos processos de criação de determinado produto, mais especificamente no presente estudo, um profissional da mídia digital, que está apto a dirigir um elenco de criação, é de grande importância, mais do que dominar as técnicas, ter conhecimento dos conceitos que envolvem o processo, tendo em vista que esse meio envolve conceitos multidisciplinares.

5 REFERÊNCIAS BIBLIOGRÁFICAS

ABORDAGEM ergonômica para IHC - Ergonomia de Interfaces HumanoComputador.

Disponível

em:

<http://www.joaoelias.com/biblioteca/apostila

ergonomia interfaces.pdf>. Acessado em 21 de outubro/2005.

BORDENAVE, Juan E. Díaz. Além dos meios e mensagens: introdução à comunicação como processo, tecnologia, sistema e ciência. Petrópolis: Vozes, 1995.

CYBIS, Walter de Abrel. Ergonomia de interfaces humano-computador. 2000. Disponível

em:

<http://www.joaoelias.com/biblioteca/apostila

ergonomia

interfaces.pdf>. Acesso em 2 de outubro/2005.

COELHO NETTO, J. Teixeira. Semiótica, informação e comunicação. São Paulo: Perspectiva, 1983.

DALL'OGLIO, Pablo. PHP-GTK - Criando Aplicações Gráficas com PHP. São Paulo: Novatec, 2004.

DOMINGUES, Delmar Galisi. (2001) O Uso de Metáforas na Computação, Tese de Mestrado, ECA, Universidade de São Paulo.

FAIOLA, Anthony. Understanding usability for new media products: Design & testing principles for graphic user interfaces, information architecture and navigation. Short course In: Anais do Graphica 2001. IV Congresso Internacional de Engenharia Gráfica nas Artes e no Desenho & 15º Simpósio Nacional de Geometria Descritiva e Desenho Técnico. ABEG; EPUSP. São Paulo, 2001. CD-ROM.

FRUTIGER, Adrian. Sinais e símbolos: desenho, projeto e significado. São Paulo: Martins Fontes, 2001. 43

GOMES FILHO, João. Gestalt do objeto: sistema de leitura visual da forma. São Paulo: Escrituras, 2000.

GUIRAUD, Pierre. A semiologia. Lisboa - Portugal: Presença, 1999.

INTERFACE. Disponível em: <http://pt.wikipedia.org/wiki/Interface>. Acessado em 31 de outubro/2005.

JOHNSON, Steven. Cultura da interface: como o computador transforma nossa maneira de criar e comunicar. Rio de Janeiro: Jorge Zahar, 2001.

MANDEL, Theo. The elements of user interface design. New York: John Wiley & Sons, Inc., 1997.

NIELSEN, Jakob. Projetando Websites. Rio de Janeiro: Campus, 2000.

NIELSEN, Jakob, TAHIR. Homepage, usabilidade – 50 websites desconstruídos. Rios de Janeiro: Campus, 2002.

NIEMEYER, Lucy. Elementos de semiótica aplicados ao design. Rio de Janeiro: 2AB, 2003.

PEIRCE, Charles Sanders. Semiótica. São Paulo: Perspectiva, 2000.

ROCHA, Heloisa Vieira, BARANAUSKAS, Maria Cecília C. Design e avaliação de interfaces humano-computador. Campinas, SP: NIED/UNICAMP, 2003.

SANTAELLA, Lucia, NÖTH, Winfried. Imagem – Cognição, semiótica, mídia. São Paulo: Iluminuras, 1997.

WISNER, A. Por dentro do trabalho: ergonomia, método & técnica. São Paulo: FTDOboré, 1987.

DOCUMENTOS ELETRﾃ年ICOS

<http://en.wikipedia.org/wiki/Pixel_art>. Acesso em 17 de maio/2006. <http://www.imasters.com> Acesso em 17 de maio/2006. <http://www.universia.com.br/html/materia/materia_figg.html>. Acesso em 18 de maio/2006. <http://www2.ufpa.br/dicas/htm/htm-cor.htm>. Acesso em 18 de maio/2006. <http://www.alexandremelo.com/informatica/aula09.asp>.

Acesso

maio/2006. <http://www.ccuec.unicamp.br/treinamento_int2004/webpro/arquitetura_design/arquit etura_design_elementos_formatos.html>. Acesso em 18 de maio/2006. <http://www.ajs.com.br/vetorizacao/index.html>. Acesso em 18 de maio/2006. <http://www.eps.ufsc.br/disserta98/rosam/ane1.htm>. Acesso em 18 de maio/2006. <http://www.rnp.br>. Acesso em 28 de maio/2006.