Design de Ícones e Semiótica da Interação

A palavra ícone foi utilizada primeiramente para definir certos tipos de pinturas e afrescos que expressavam a essência das divindades Cristãs. Esse formato ficou bastante popular nos primeiros séculos da Igreja Ortodoxa. Essa imagem é um detalhe do ícone mais antigo ainda existente, Cristo Pantocrátor (século VI). O ícone provavelmente representaria a posição dual de Jesus Cristo como homem e como Deus.

Utilizando uma técnica de divisão e espelhamento das metades da imagem, fica claro que os dois lados da face do Cristo são muito diferentes. A face esquerda de Cristo parece mais velha e dura do que a face da direita, sugerindo o aspecto divino. A face da direita parece mais temerosa e jovial, sugerindo o aspecto humano. O ícone religioso é rico em detalhes e significados.

No século VIII, emergiu um movimento iconoclasta no Império Bizantino que destruiu a maior parte dos ícones da época. Nesta iluminura, o autor faz uma analogia entre o pintor de ícones e os algozes de Cristo. O ícone estaria restringindo a divindade a uma representação fixa, que não faz jus à natureza divina.

A adoração dos ícones assim como a iconoclastia são frutos de uma tensão que se acumula no cerne da sociedade moderna. Henri Lefebvre escreveu prolificamente sobre a contradição entre representação e realidade. Essa contradição foi magistralmente revelada por René Magritte na obra A Traição das Imagens (1928). A imagem de um cachimbo contradiz a frase "Isto não é um cachimbo", porém, a frase também é uma imagem. Como seria possível falar de um cachimbo sem a representação mínima dele pela linguagem?

Na metade do século XX, a representação se tornou tão oposta à realidade que foi necessário construir máquinas capazes de processar signos de maneira independente da representação mecânica. Alan Turin e colegas construíram em 1939 a primeira máquina semiótica com o intuito de quebrar o código de criptografia alemã. Essa máquina desvinculava a representação do cálculo da representação mecânica. O filme "O jogo da imitação" (2014) conta essa história muito bem.

A representação independente do suporte permitiu o surgimento de uma miríade de conceitos computacionais. Esses conceitos, entretanto, eram abstratos demais para quem não tinha uma formação matemática ou de engenharia. Com a intenção de tornar conceitos computacionais mais concretos e, portanto, acessíveis para especialistas de outras áreas, Douglas Engelbart e sua equipe na SRI International criaram o mouse em 1964, um dispositivo apontador que permitia interagir com representações computacionais de uma maneira mais direta. Diversas outras inovações surgiram à partir disso, tal como o hipertexto, o comando copiar e colar e outras.

Nos anos 1970, surgem monitores de alta resolução capazes de exibir interfaces gráficas. David Canfield Smith defendeu uma tese em 1975 que propunha pela primeira vez a utilização de ícones em interfaces gráficas. Inspirado nos ícones religiosos, Smith propôs que ícones poderiam ser tão abstratos quanto concretos, ou seja, eles seriam representações capazes de processamento ao mesmo tempo capazes de referir-se a uma experiência concreta que o usuário tenha tido. O exemplo que ele oferece é a linguagem de programação visual Pygmalion, que ofereceria uma série de diagramas interativos. Nesta imagem, temos diversos ícones. O mais concreto são as setas da estrutura if/else que se assemelha a uma bifurcação de estradas.

Em 1973, Tim Mott e Larry Tessler desenvolveram a Office Schematic dentro do laboratório Xerox Parc, uma proposta que iria definir o paradigma de representação para interfaces gráficas. Mott estava pensando como aproveitar melhor o recurso da interface gráfica e percebeu que haviam metáforas físicas para representar ações intra-documentos, tal como o comando de copiar e colar. Porém, não haviam metáforas para ações inter-documentos. Foi então que, diante de um guardanapo num restaurante, ele teve a ideia de representar um escritório na interface gráfica, onde os documentos pudessem ser movidos de um lugar a outro. O Office Schematic ficou conhecido posteriormente como metáfora desktop.

Trabalhando com Mott e Tessler, Smith desenhou a primeira linha de ícones do Xerox Alto (1974), o primeiro computador a implementar uma interface gráfica com a metáfora desktop. Estes ícones representavam arquivos que podiam ser movidos para diferentes mídias de armazenamento, impressoras e outros computadores. Diversos outros conceitos de interface gráfica já estavam ali presentes, tais como a barra de rolagem, os menus e a manipulação direta.

O Xerox Star que sucedeu o Alto tinha a proposta de ir além de controlar a edição e impressão de documentos. A proposta era ser um computador multifuncional para a gestão de empresas. Quatro séries de ícones foram criadas e testadas com usuários para verificar quais faziam mais sentido. Na Xerox Parc já existia uma visão de que o usuário leigo em informática deveria ser priorizado no projeto. Infelizmente a Xerox não conseguiu compreender as inovações que surgiram no Parc e acabou assinando um acordo com a Apple para que Steve Jobs e sua equipe visitasse o laboratório e conhecesse tais inovações. Ao ver a interface gráfica, Jobs teve a certeza de que era isso que precisava para realizar o conceito de Computação Pessoal que movia a empresa.

Os ícones adquiriram o status que tem hoje depois que a Apple contratou Susan Kare para desenhar a família de ícones do primeiro Macintosh, lançado em 1984. Esses ícones eram muito diferentes dos ícones do Xerox Star. Ao invés de representar apenas conceitos computacionais, alguns destes ícones representam ações e emoções humanas. O objetivo era mostrar que o computador poderia refletir as preferências e interesses do usuário, o que fica evidente no ícone do Mac com um sorriso. Diversos outros ícones representavam partes do corpo humano para enfatizar essa relação pessoal com o usuário.

O próximo marco na história dos ícones só viria em 2007, quando a Apple lançava o iPhone. Esse smartphone não era o primeiro com tela touch screen, porém, era o primeiro a priorizar o design de ícones. O design de produto do iPhone é extremamente simples visando colocar em evidência a interface gráfica e os ícones coloridos que ela continha. Os ícones eram o produto, o que ficaria mais claro depois que a Apple lançou a App Store e a possibilidade de desenvolvedores de fora da Apple colocarem ícones no iPhone para permitir acesso a seus aplicativos.

Na versão comemorativa de 10 anos de lançamento do primeiro iPhone, a Apple novamente inovou no design de ícones com o lançamento dos animojis, que representavam através de animações sincronizadas em tempo real as expressões faciais do usuário. Aqui a Apple realizou de maneira literal a ideia antiga de que o computador poderia ser um espelho do usuário. O iPhone X também eliminou a necessidade de botões físicos, tornando o produto uma grande tela para interfaces gráficas.

A relevância dos ícones na história da Interação Humano Computador se deve à:

a) Relação entre conceitos abstratos a experiências concretas

b) Mnemônica (fácil memorizar e reconhecer)

c) Localização rápida na tela

d) Economia de espaço na tela

e) Internacionalização

f) Afeto emocional

Ao longo de sua história, ícones foram padronizados em certos elementos constitutivos. A sua "anatomia" atual consiste em sete elementos: fundo (contexto onde ele aparece), figura (forma básica ou silhueta), borda (entre a figura e o fundo), cor predominante da figura, iluminação (proveniente do canto superior esquerdo), rótulo descritivo e uma ação (representação estática de um movimento).

A anatomia do ícone tem impacto direto na memorização e reconhecimento do ícone, que acontecem em processos graduais, mesmo que muito rápidos. A memorização começa à partir da imagem complexa do ícone que fica na memória de curta duração. Com o passar do tempo, a memória deste ícone se torna mais difusa e apenas traços distintivos permanecem. Após muito tempo, a pessoa lembra de características gerais, tais como a forma da figura, sua cor predominante ou a localização na tela. Em alguns casos, o ícone é completamente esquecido, porém, quando ele é visto novamente, o processo de reconhecimento acontece mais rapidamente. Ao escanear a tela, a pessoa busca primeiramente as características gerais do ícone, tais como a cor predominante e só depois considera os seus traços distintivos. Devido às características desses dois processos, ícones devem ter silhuetas simples e poucas cores.

A maior relevância do ícone não está, entretanto, associado aos processos de memória e de reconhecimento, mas sim no processo de significação. O ícone tem o potencial de estabelecer uma rica rede de associações que levam ao sentido do aplicativo. O ícone do Find My iPhone lembra um radar que, assim como diversos outras tecnologias militares, agora estão presentes no cotidiano de civis. Uma tecnologia militar conecta-se bem com os casos de uso do aplicativo: roubo e vigilância parental. Não por acaso, a Apple tem um segundo aplicativo com a mesma função de localização do aparelho, porém, o Find My Friends exige autorização do amigo para compartilhar a localização. Com o Find My iPhone, os pais podem saber onde os filhos estão a qualquer momento através da interface web do iCloud sem autorização dos filhos.

Esse processo de significação é muito bem explicado pela Engenharia Semiótica, uma teoria de Interação Humano Computador criada pela pesquisadora Clarisse de Souza da PUC-Rio. Essa teoria é baseada em duas premissas: O computador é uma máquina capaz de processar signos e a interface com o usuário é um processo de comunicação baseado em signos.

O conceito principal da Engenharia Semiótica é a metacomunicação, ou seja, a comunicação do designer explicando como o usuário pode se comunicar com o computador. A aplicação seria uma mensagem que o designer enviaria para o usuário expressando que soluções existem para suas necessidades. O usuário interpretaria os signos contidos nessa mensagem e realizaria suas atividades. A metacomunicação é unidirecional, pois uma vez que o aplicativo é codificado, o designer não pode mais mudar a sua mensagem.

Um dos maiores insights da Engenharia Semiótica é a distinção entre dois tipos de metacomunicação: operacional e estratégica. Na metacomunicação operacional, a interface expressa como usar a aplicação. Este tipo de metacomunicação já recebeu muita atenção de outras teorias de IHC. O diferencial da Engenharia Semiótica é a ênfase na metacomunicação estratégica, que expressa por quê o usuário deve utilizar a aplicação. No exemplo do tour de entrada do aplicativo AirBnB a descrição se refere às características da experiência do usuário e não aos elementos da interface.

Embora a Engenharia Semiótica não coloque nesses termos, eu compreendo que ela propõe que o designer atue como um tradutor entre duas linguagems: a linguagem de programação e a linguagem de interação. Enquanto a linguagem de programação serve para dar instruções para o computador, a linguagem de interação serve para dar instruções para o usuário. Devido à informalidade, a linguagem de interação é definida por todos os "falantes", está em constante evolução e ninguém sabe exatamente todas as possibilidades desta linguagem. Em contraste, a linguagem de programação é definida por um grupo pequeno de pessoas e se torna fixa, devido à necessidade de formalidade. A linguagem de programação expressa conceitos computacionais enquanto a linguagem de interação expressa diversos tipos de conceitos.

A unidade básica da linguagem de interação é o padrão de interação (pattern). Como exemplo, temos o padrão "Puxe para atualizar", primeiro utilizado pelo aplicativo do Twitter que, ao mesmo tempo em que criava um novo padrão, quebrava o padrão de clicar no ícone home para atualizar o feed, uma vez que este que não era percebido pelos usuários. O padrão de "Puxe para atualizar" logo se espalhou por outros aplicativos e se tornou parte da linguagem da interação falada nos aplicativos móveis.

Ícones são interpretados como parte de uma linguagem de interação, porém, eles não são meras palavras. Ícones são frases. É possível através de um método chamado análise da estrutura frasal decompor um ícone em suas partes constitutivas. O sujeito normalmente refere-se ao usuário, o verbo é a ação possível, o advérbio é um qualificativo da ação e o predicado é o objeto principal do ícone, qualificado por adjetivos. No caso do ícone Firefox Crystal vemos que o designer Everaldo Coelho qualificou a raposa do Firefox como um animal mágico que pode navegar a web tão rápido quanto o fogo.

Assim como na linguagem falada, nem todas as frases são ditas por completo, pois há informações não-ditas e implícitas. No caso dos ícones padrão da iOS Toolbar e Navigation Bar, as frases possuem verbos sem predicados, pois estes se referem ao que está carregado na View atual.

Por outro lado, os ícones padrão da iOS Tab Bar possuem o mesmo verbo implícito (ver) com diversos predicados. Os ícones não demonstram o que é possível fazer com os objetos, apenas sugerem o tipo de conteúdo.

Já os ícones do Home Screen do iOS não seguem um padrão. Alguns possuem verbo e predicado (Mapas), enquanto outros possuem apenas um substantivo (Mail). Porém, todos possuem muitos adjetivos para qualificar a experiência proporcionada por cada aplicativo. Os qualificativos são marca registrada dos ícones da Apple.

Quando se compõe uma série de ícones para um mesmo aplicativo, vale à pena definir um padrão consistente para as frases. Assim a linguagem de ícones contribui para o microbranding da marca. A linguagem de ícones da Spotify possui espessuras finas, curvas com mesma ângulação e preenchimento vazio.

A consistência na linguagem de ícones não deve, entretanto, prejudicar a distinção entre as frases. Uma vez que ícones nem sempre são vistos com atenção, a silhueta da figura deve ser diferente mesmo que a figura seja parecida, de modo a facilitar o reconhecimento diante de formas similares. Este exemplo foi publicado por @MegDraws no Twitter.

Até agora estamos discutindo as possibilidades que a forma oferece para a informação. Porém, a "mágica" dos ícones acontecem nos níveis de estrutura e de função, quando contribui para a interação e experiência. Há uma certa equivalência entre esses três níveis de possibilidades aos três níveis de análise da linguagem: sintática, semântica e pragmática. Iremos agora analisar ícones nos níveis semânticos e pragmáticos.

A Engenharia Semiótica é baseada no conceito de signo de Charles Sanders Peirce, o filósofo que fundou a escola americana de semiótica. O conceito de signo é baseado numa tríade entre três elementos: o representamen (também chamado de representante), o objeto que ele representa e o interpretante (também conhecido como significado). Neste exemplo, o ícone de pasta representa dados no disco rígido, mas a interpretação deste para um usuário específico é o álbum de fotos, pois é nesta pasta que a pessoa guarda as fotos.

Segundo Peirce, um signo nunca emerge isolado. Cada signo é significado em relação a outros signos e dá origem a novos signos num processo conhecido como semiose ilimitada. Neste exemplo, o signo de álbum de fotos lembra a pessoa do álbum impresso, ela sente vontade de imprimir algumas fotos e imagina que pode dar de presente para alguém aquele álbum.

Na Engenharia Semiótica, a semiose não é ilimitada. Ela pode ser interrompida por um signo que não faz sentido, fenômeno conhecido como breakdown. Neste momento, o usuário fica perdido ou frustrado e desiste do que estava fazendo. Certa vez tentei imprimir um álbum de fotos que havia preparado no Fotos do Mac e fiquei surpreso negativamente ao descobrir que não havia como encomendá-lo impresso pela ausência do serviço no Brasil. O aplicativo poderia ter me dito isso antes de maneira mais clara.

A Engenharia Semiótica identificou diferentes expressões comuns do usuário quando ocorre a interrupção da semiose (De Souza et al, 1999). Algumas dessas expressões podem indicar um problema sério de usabilidade (fundo vermelho), como por exemplo, quando o usuário faz algo errado e não percebe. Elas também podem indicar um crescimento da competência do usuário e a dispensa de ajuda (fundo verde).

Vejamos dois exemplos de interrupções na semiose causadas por uma mensagem com ruídos ou desvios de interpretação. O Macintosh original não tinha botão de ejetar para o disquete. Os designers criaram uma associação de arrastar e soltar o ícone do disquete até o ícone da lixeira para ejetar o disco. Depois de muitas reclamações de usuários que não encontravam a função (Onde estou?), o ícone da lixeira passou a mudar para um ícone de ejetar sempre que um disco era arrastado. Mesmo com o representamen correto, muitos usuários ainda ficam com medo de apagar os dados do disquete, CD, DVD ou pendrive até hoje e preferem fazê-lo pelo botão de ejetar do finder (Obrigado, mas não).

Na minha visão, a semiose é, na maior parte do tempo, interrompida pela falta de interesse ou de atenção. A pessoa simplesmente não quer aquilo que o signo está representando.

O que mais interessa aos usuários não é como o ícone foi desenhado (sintática), nem o que ele representa computacionalmente (semântica), mas o que é possível fazer com ele (pragmática). Essa característica da Interação Humano Computador está sendo gradualmente compreendida através de teorias como a Engenharia Semiótica.

Emojis são um exemplo popular de ícones que não representam conceitos computacionais. Ele não representa um espaço ou uma funcionalidade do computador, mas sim uma emoção ou intenção de comunicação do usuário.

Ícones representam cada vez mais conceitos não-computacionais. Isso torna ícones cada vez mais sujeitos às contradições da sociedade, em particular, entre representação e realidade. Na última versão do iOS (11), a Apple incluiu a silhueta que parece de uma mulher no ícone da lista de contatos. Anteriormente, o ícone continha apenas uma figura com feições bastante masculinas. A questão contraditória que levou à Apple a incluir a silhueta é: porque mulheres não deveriam ser representadas se elas figuram na lista de contatos? Apesar da mudança, o déficit de representação da mulher ainda continua.

Embora o signo seja uma estrutura de simples compreensão, a análise do signo permite ver sutilezas que não estão claras à primeira vista. Peirce propôs três tricotomias para analisar signos. A primeira tricotomia diz respeito ao representamen e ele mesmo. O qualisigno é uma relação de representação em que a qualidade do representamen fala por si. Neste exemplo de qualisigno, o ícone representa a qualidade de ser ícone, a "iconicidade". O sinsigno é uma relação de particularidade. O signo representa algo único, particular, tal como os trejeitos da expressão facial de uma pessoa. O legisigno é tal como uma Lei, algo inevitável. A representação do botão de desligar inequivocamente irá desligar o aparelho.

A segunda tricotomia diz respeito à relação entre representamen e objeto. Quando o representamen é similar ao objeto, a relação é chamada tecnicamente de ícone. Note que no resto dessa apresentação eu não utilizei essa compreensão mais restrita de ícone. Prefiro utilizar o nome ícone também para índices e símbolos, que não são tipos de imagens mas tipos de relações. A relação de índice é uma causalidade, ou seja, o objeto causa uma modificação na representação ou vice-e-versa. No exemplo do calendário, a data atual modifica a forma do ícone. Já a relação de símbolo é completamente arbitrária e se justifica apenas pela convenção. O desenho + não tem nenhuma relação além da arbitrariedade com a operação matemática da soma, por exemplo.

A terceira tricotomia serve para analisar as relações entre representamen e interpretante. Se o ícone representar uma possibilidade não muito clara, ele pode ser chamado de rema, tal como o ícone do microfone da Siri. O usuário não sabe se ela vai entender o que ele irá falar. No momento em que o usuário fala, aparece um outro ícone, um ícone dinâmico cuja forma se altera de acordo com o volume das ondas sonoras. Esse ícone é um fato. A Siri está lhe ouvindo, mas ainda não há certeza de que ela lhe entende. Você só consegue perceber isso nas respostas que a Siri dá, que não seria um ícone, mas seria uma relação de argumento. O argumento expressa uma relação de certeza entre o representamen e o interpretante.

Embora as tricotomias sirvam à classificação de relações, elas não foram criadas meramente para classificar signos desse ou daquele tipo. As tricotomias servem para perceber as variações no processo de representação. Scott McCloud conseguiu representar isso magistralmente no triângulo que mostra o continuum entre realidade, significado e plano da figura. Os extremos desse triângulo corresponderiam ao ícone na esquerda (figura muito similar à realidade), ao qualisigno no topo (representamen representando a representação) e ao símbolo na direita (rosto simplificado). O signo pode transitar entre as categorias dependendo da situação em que ele emerge.

Um estudo superficial sobre a Semiótica pode levar o designer a acreditar que ele pode garantir um interpretante a partir da manipulação do representamen. Isso, segundo a Semiótica não é possível, pois o objeto do signo tem caráter dinâmico. Ora o signo representa uma coisa, ora outra. Por esse motivo não há uma tricotomia sobre a relação entre representamen e objeto. O que pode ser feito é considerar os padrões de interação existentes, as particularidades do contexto e as possibilidades expressivas.

No design de ícones, existem três práticas que consideram as relações das tricotomias peirceanas. A primeira prática é a definição de parâmetros de representação antes de conceber o signo. A primeira coisa que Susan Kare ao ser contratada pela Apple em 1982 para desenhar ícones foi comprar um caderno de rascunhos quadriculado. Desenhando nesse caderno, ela restringiu os representamens ao que seria possível com a tecnologia do pixel da interface gráfica.

A segunda prática é a geração de alternativas para encontrar representamens potenciais do objeto. Tom Bigelajzen desenhou algumas alternativas para os ícones do player multimídia VLC antes de escolher a final. Isso ajudou-o a considerar qual representamen era mais adequado ao objeto (a funcionalidade de configuração do aplicativo).

Para verificar a relação entre representamen e interpretante, é indicada a prática de testes com usuários. No exemplo acima, eu criei um sistema chamado Icon Sorting que mostrava um ícone a cada 13 segundos e perguntava ao usuário qual o rótulo mais apropriado. A quantidade de opções e o tempo curto forçava uma associação rápida e corriqueira, mais parecida com o contexto de uso. Os ícones que não tiveram associações foram descartados. Existem outras maneiras de testar ícones com usuários, por exemplo, através de entrevistas e diálogos presenciais.

Apesar de tudo o que disse até agora, a melhor maneira de projetar um novo ícone, muitas vezes é não fazê-lo. Se existe um ícone que atingiu o status de símbolo para aquele objeto, é melhor utilizá-lo do que criar um novo. Existem diversas bibliotecas com milhares de ícones gratuitos para utilização. Na maior parte dos casos, é mais fácil adaptar um desses ícones do que criar um do zero. O desafio do design de ícones não é o desenho, mas sim a designação de sentido, que não é uma tarefa exata.

Não é um processo exato porque mesmo os símbolos mais convencionais podem perder o sentido ao longo do tempo. Um exemplo contemporâneo é o ícone de salvar que, antigamente, referia-se à mídia de armazenamento principal (disquete de 3 e 1/2 polegadas). Hoje em dia, existem pessoas que nunca viram um disquete desse tipo mas que conseguem reconhecer o ícone de salvar em diferentes contextos. Porém, existem muitos aplicativos que já não estão mais utilizando este ícone para representar salvar ou porque não existem mais essa funcionalidade (os dados são salvos automaticamente em intervalos de tempo) ou porque existem dois tipos de salvar (salvar na nuvem e salvar no dispositivo). Qualquer signo estará sempre sujeito à contradição entre representação e realidade. O design de ícones reproduz e transforma essa contradição o tempo todo. Compreendê-la é mais interessante do que negá-la.