Design tem interfaces gráficas. Uma aula de introdução a este assunto pela perspectiva
 crítica fundada na teoria da produção do espaço. A interface pode ser considerada
 um espaço de possibilidades, mar e a cinza de possibilidades entre forma e informação,
 estrutura, interação, função e experiência. Do lado esquerdo, forma, estrutura e função,
 nós temos a perspectiva dos sistemas. Já do lado direito, da informação, interação e experiência,
 nós temos a perspectiva das pessoas. O projeto de interfaces gráficas consiste em considerar as
 possibilidades tanto dos sistemas, quanto das pessoas de se compreenderem e agirem em conjunto.
 Então a interface é como um espaço comum em que pessoas e sistemas agem e fazem coisas em conjunto.
 Resumindo, interfaces gráficas são um conjunto de possibilidades oferecidas por um sistema para
 a informação, interação e experiências humanas. Quando esta interface não tem um conceito bem
 amarrado que define o seu espaço de encontro, de ações e de significados, nesse caso a interface
 vai priorizar um aspecto em detrimento de outro. Então a função, a forma e a estrutura estarão
 concentrados. O projeto funcionalista é aquele que prioriza a função sobre a forma e a estrutura.
 E o exemplo clássico é o Microsoft Office XP, que atingiu o pico das funcionalidades acumuladas
 como ícones na sua barra de ferramentas. Se você abrisse todas as barras de ferramentas,
 o espaço dedicado para a representação do texto, que é o principal objeto de trabalho no Microsoft
 Word, fica completamente ocludido pelas ferramentas existentes. Esse projeto então focaliza na função
 da interface gráfica de ofertar todas as funções, independente de qual forma, qual estrutura,
 que essas funções vão ser ofertadas. Já no Microsoft Bob, um aplicativo criado pela Microsoft
 para introduzir pessoas que nunca utilizaram computadores no mundo dos sistemas operacionais
 e explicar através de metáforas como funciona o computador, nós vemos um caso de priorização
 da forma sobre a função e a estrutura. Então, esta interface contém diversos signos que são
 bastante detalhados e que criam uma sensação de estar num ambiente físico, porém virtual,
 representado através dos ícones. Esses ícones não têm, portanto, o mesmo comportamento que
 eles têm no mundo real. E por isso, as pessoas precisam se adaptar e compreender que dentro do
 computador a física não funciona do mesmo jeito. Mas isso não está claro, porque o foco dessa
 interface foi criar um espaço de ação que fosse bonito e atrativo para convencer pessoas que
 não usaram o computador na década de 90, isso ainda era bastante comum, a começar a usar o
 computador. Esse projeto foi um fracasso em termos comerciais, mas marcou época como um projeto
 skeumórfico, que utiliza analogias com o mundo real para explicar funções computacionais.
 O próximo exemplo, que prioriza totalmente a estrutura, é a interface gráfica do Adobe e
 Photoshop e de vários outros aplicativos da mesma empresa. O projeto estruturalista, ele tenta
 conectar as funções e as formas a uma ordem lógica predeterminada por um conceito estrutural,
 que impõe uma maneira específica de interagir com aquele aplicativo. Esta estrutura é artificial,
 lógica e deriva da maneira como os algoritmos e a lógica computacional é pensada. Portanto,
 a curva de aprendizagem para usuários que não conhecem tal lógica é bastante longa,
 porém ao dominar a estrutura, o usuário pode realizar muitas ações diferentes recombinando
 os elementos disponibilizados nessa mesma estrutura. O que eu estou defendendo aqui não é a priorização
 de nem forma, função ou estrutura individuais, mas sim o cruzamento desses três aspectos de
 uma forma que era bastante harmonizada. Um conceito bem amarrado que envolve forma,
 função e estrutura vale mais do que uma interface que prioriza apenas um desses aspectos.
 O segredo do processo de design focado em conceitos bem amarrados é desenvolver forma,
 função e estrutura em conjunto e não em separado e não em momentos distintos do projeto,
 sempre buscando cruzar um aspecto com outro a cada decisão tomada de projeto.
 Este mesmo conceito pode ser expresso através de várias linguagens, visuais, verbais, sonoras ou
 mesmo linguagens interacionais. Um tipo de linguagem que surgiu a partir da disponibilização massiva
 de ferramentas interativas digitais, sejam computadores, smartphones, videogames e outros
 que estão ainda em fase de desenvolvimento e disseminação na sociedade. Estas linguagens
 interacionais podem até ter elementos visuais, sonoros, verbais ou visuais, mas, sobretudo,
 elas têm elementos interacionais, ou seja, uma maneira específica ou várias maneiras específicas
 de interagir que tem significado, como por exemplo, ações como incluir, excluir, adicionar,
 estender, expandir, diminuir. Todas essas ações não acontecem de maneira isolada quando se interage
 com uma tecnologia digital. Elas acontecem dentro de uma cadeia de signos e ações que também tem
 um significado corrente dentro da nossa sociedade. Muitas vezes um significado ainda não organizado,
 como é o caso da linguagem falada ou da linguagem escrita, que conta com dicionários, professores de
 português e por aí vai. O que existe para documentar linguagens interacionais são as chamadas
 guidelines de interfaces gráficas ou UI guidelines. Essas linhas diretrizes ou manuais, elas especificam
 como que as linguagens da interação ou a linguagem interacional deve se desenvolver dentro de um
 sistema operacional ou de um ambiente específico. O exemplo clássico, talvez mais recente e que teve
 mais impacto, é o Material Design da Google, que tem uma premissa básica de metáfora entre objetos
 físicos e objetos virtuais, porém vai muito além dessa questão visual que se reflete nas sombras e
 na tridimensionalidade dos objetos. O Material Design, por sua vez, ele propõe um rompimento com
 um paradigma em uma linguagem internacional que estava se desenvolvendo e se espalhando a partir
 do trabalho da Apple e o time de design dessa empresa, em especial por uma preferência do
 Steve Jobs, quando ele ainda era vivo, ele determinou aos seus time de design que as interfaces
 deveriam aproveitar analogias com objetos do mundo real, o chamado skeu-morfismo, que é reproduzir
 características formais no mundo real nas interfaces gráficas. Então, se você vai ter
 uma interface de um aplicativo de calendário, este aplicativo deve ter uma interface que se
 aproxime, que pareça com calendários físicos. Na medida em que esses aplicativos digitais ocuparam
 nossas vidas a tal ponto que eles substituíram as suas contrapartes analógicas, físicas, muitas
 pessoas não tiveram nem contato ainda, especialmente os jovens que começaram as suas vidas sociais,
 já com aplicativos, nunca tiveram contato com estes objetos e artefatos físicos. Portanto,
 a analogia com o objeto físico na interface não ajudava essas pessoas a dominar as funcionalidades
 do aplicativo. E, portanto, o skeu-morfismo tem diminuído a sua influência e presença nas
 interfaces gráficas ano após ano. A própria Apple já utiliza muito menos esse tipo de recurso,
 embora desenvolvedores de outras empresas ainda utilizem bastante este recurso. Falaremos agora
 sobre figuras de linguagem em interfaces. Se a interface possui uma linguagem interacional,
 a que ela pode ser referida quando ser construída, tal como a gente utiliza a linguagem verbal e
 falada para escrever um texto, então esta linguagem interacional também deve ter figura de linguagem.
 E a figura de linguagem é uma maneira de enriquecer uma linguagem, ampliando os seus significados
 para além daquilo que está convencionalizado. A primeira figura de linguagem que eu quero
 discutir é a metáfora, a figura de linguagem mais utilizada na construção de interfaces.
 A metáfora consiste em utilizar um signo para representar outro signo. Então, quando se diz
 que nesta sala nós temos pessoas brilhantes, as pessoas não estão brilhando de verdade,
 não estão emitindo luz, elas estão sendo pessoas tão interessantes, tão úteis,
 tão inteligentes, que parece que elas estão brilhando metaforicamente. A metáfora utiliza
 uma coisa para representar outra. Dentro do computador, nas interfaces gráficas, este recurso foi
 fundamental para incluir usuários e usuárias que não conseguiam compreender como funcionavam o
 computador através de signos objetivos que não faziam referência nenhuma à metáfora. Ou a metáforas
 faziam parte do repertório dos usuários e das usuárias, como por exemplo os diversos comandos
 utilizados pelas interfaces de comando de texto, como o DOS, TOS e comandos como DIR, que fazia
 referência ao diretório, aos arquivos, que fazia referência ao armário físico que poderia existir
 no escritório, mas que não havia uma representação muito clara de como que um signo se relacionava com
 outro. Então a metáfora era aplicada na época das interfaces de linhas de comando individualmente
 para cada comando, cada função. A partir dos anos 1970 começam a se desenvolver interfaces
 gráficas que possuem diversas metáforas, uma relacionada com a outra. Um sistema de metáforas,
 o exemplo paradigmático que influenciou uma série de interfaces gráficas que foram criadas
 posteriormente, é a interface do Xerox Star, um dos primeiros computadores feitos com interfaces
 gráficas lançado no comercialmente em 1981, que já possuía a chamada famosa metáfora de desktop,
 ou metáfora da escrivania. Então o sistema operacional era representado como uma série de
 arquivos, documentos, pastas, janelas, barras de rolagem, todos esses elementos em conexão,
 tanto do ponto de vista funcional, quanto do ponto de vista do sentido de uma linguagem
 interacional. Este conceito de interface gráfica foi criado após várias conversas e interações
 entre dois pesquisadores da Xerox Star, o Tim Mott e o Larry Tesler, enquanto eles desenvolvinham
 uma interface gráfica para um processador de texto. Posteriormente acabou evoluindo para essa
 interface gráfica que vocês podem ver na documentação desse Xerox Star System.
 Esta metáfora foi rascunhada num guardanapo como uma ideia inicial que, meio maluca para a época,
 foi usada na ciência da computação quando ainda não se considerava essa importância do brincar,
 do sentir-se imerso dentro de um sistema, porém que se tornou uma ideia majoritária dentro da
 computação nos anos posteriores. A segunda figura de linguagem que eu gostaria de destacar, que é
 muito conhecida dentro dos ramos da design de interfaces gráficas, mas muito utilizada, é a
 hipérbole, é representar algum elemento da linguagem de maneira exagerada para, com isso,
 construir uma imersão dentro de um mundo alternativo em que os objetos têm as suas
 características essenciais enaltecidas. O exemplo que eu gosto de utilizar é um aplicativo para
 crianças brincarem, se divertirem, chamado Mundo da Criança, que representa o mundo de uma maneira
 bastante exagerada, como se fosse um personagem, um ser inanimado comportando-se como vivo.
 Isso já entra numa outra figura de linguagem, uma prosopopeia. O Mundo da Criança utiliza essas duas
 figuras de linguagem ao representar os objetos de maneira jocosa, colorida, grande, maior do que
 eles são no mundo real, e dando a todos os objetos a característica de vivo. A partir da existência
 viva desses objetos surge as suas funções esperadas. Então você espera que ao clicar no
 elefante, elefante vá fazer alguma coisa, embora esse elefante não seja vivo de fato. Por isso,
 uma figura de linguagem. A quarta figura de linguagem, muito utilizada também, mas pouco
 discutida, é a metonímia, que é a característica de ícones e outras representações pictóricas
 minoritárias dentro das interfaces. A metonímia representa um todo através de uma parte,
 então quando você vê qualquer ícone dentro de uma interface gráfica, ele tem algum aspecto
 metonímico, porque ele não representa tudo aquilo que aquele ícone faz quando ativado. Então vejam,
 por exemplo, o botão de Play numa interface que é representada por um triângulo, que representa
 o conceito de tocar uma música dentro de um sistema de áudio, mas que está representada apenas pela
 setinha da progressão, demonstrando um caminho da esquerda para a direita. Isso é uma representação
 bastante minimalista, uma característica da metonímia é que ela conduz ao design minimalista.
 Falaremos agora da sinestesia, que também é uma figura de linguagem. Quando se fala, por exemplo,
 que nós estamos hoje num ambiente tão quente quanto o inferno, apesar de nós estarmos fazendo uma
 analogia, nós estamos também utilizando o sentido da audição para expressar e estimular o sentido do
 sentimento, que é responsável por sentir calor. A sinestesia, então, é um redirecionamento de um
 sentido para o outro. Aqui no aplicativo GarageBand vemos diversos recursos visuais utilizados para
 estimular os sentidos, seja ele do tato, seja o sentido mesmo do paladar, seja o sentido da
 audição GarageBand, um aplicativo que serve para artistas criarem músicas e composições musicais
 bastante complexas, apesar de que não seja focado em profissionais. Esse aplicativo utiliza diversas
 figuras de linguagem, dentre elas a sinestesia, para que pessoas que estão começando na música
 desenvolvam a sua habilidade sinestésica e consigam fazer as conexões entre os seus ideias, seus
 sentidos, percepções, intuições e as formas diversas de expressão musical oferecidas pelo
 aplicativo e pelo padrão MIDI, no fundo, no fundo. GarageBand é uma interface com o sistema MIDI,
 que existe em sistemas operacionais modernos. Existem algumas, existem outras figuras de linguagem,
 além destas mencionadas aqui, mas é importante ressaltar que não é tão bom utilizar diversas
 figuras de linguagem em uma única interface gráfica, porque pode ser que essa interface
 gráfica precise ser explicada e quando a explicação também é uma figura de linguagem, pode se entrar
 numa espécie de um ciclo vicioso, de um signo que aponta para outro signo que não tem sentido,
 mas que aponta para outro signo que também não tem sentido, gerando uma sensação inicial de densidade,
 de complexidade que demora para o usuário, usuária se ambientar e dominar. Existe uma piada engraçada,
 mas às vezes nem tanto, que diz o seguinte, uma interface é como uma piada, se você tiver que
 explicá-la, ela não é tão boa. Porém, no extremo oposto, uma interface que não tenha nenhuma figura
 de linguagem, ela não será uma interface necessariamente mais fácil de usar. As interfaces, elas precisam ser
 pensadas como parte de uma linguagem interacional, em que muitas vezes nós falamos coisas que são
 entendidas pelas pessoas, mas às vezes também não somos entendidos. E para isso deve existir
 recursos para nos entendermos melhor, para as pessoas poderem perguntar, para tirarem as dúvidas.
 Para isso existe ajuda, mas ela não aparece como uma informação obrigatória. À medida que a pessoa vai
 interagindo, vai se criando um diálogo. Esse tipo de interface que se revela a partir do diálogo é
 muito melhor, mas eficaz do que uma interface autoexplicativa que consegue ser compreendida
 numa única sacada de olho. Uma interface que tenha todos os controles e funcionalidades visíveis
 ao mesmo tempo para o usuário e o usuária decidir o que fazer. Vemos nessa charge que uma pessoa diz
 para outra, a interface que nós estamos criando para o nosso protótipo está sendo considerada
 confusa pelo nosso time. E o desenvolvedor da interface diz assim, isso é maluquice, eu coloquei
 um rótulo para cada botão e todos eles estão explicadinhos na interface. Só que essa interface
 aparece como um monstro para quem nunca utilizou e não conhece o funcionamento daquela máquina
 que está sendo mostrada na charge. Então a interface autoexplicativa é um mito que é entretido
 por diversos designers e pesquisadores da área. Aqui tem um outro exemplo de um usuário dizendo
 que ele apertou o botão de pipoca do micro-ondas, mas não apareceu nenhuma pipoca magicamente lá
 dentro. Embora exista as instruções dentro do saco de pipoca dizendo como usar o micro-ondas,
 o micro-ondas por si só não dá estas instruções. Então pode parecer que esse usuário está sendo
 ignorante por não imaginar que outras possibilidades são necessárias para que a pipoca apareça,
 se faça dentro do micro-ondas, como por exemplo colocar o pacote de micro-ondas lá dentro. Mas é
 interessante que os usuários estão o tempo todo sendo atacados com instruções que não fazem o
 sentido, como por exemplo as instruções da própria o pacote de pipoca desta marca que encontrei,
 que diz o seguinte, se você for fazer pipoca no micro-ondas não utilize o botão pipoca do
 micro-ondas, embora você esteja fazendo pipoca. Por que isso? Porque cada micro-ondas tem o seu
 padrão de tempo de duração da pipoca e esta pipoca em específico foi projetada para estourar,
 para ficar com gosto bom, com a duração de dois a dois minutos e meio. Então nem sempre a pipoca
 vai ficar boa se apertar o botão pipoca, por isso que o pacote dá essa instrução. Então quando uma
 pessoa fica confusa não é à toa porque existem informações contraditórias no seu ambiente e isso
 acontece de maneira histórica na vida das pessoas, não é um caso isolado. As pessoas elas aprendem a
 trabalhar com as interfaces gráficas a partir dos signos, das significados que estão na cultura.
 Então as interfaces gráficas elas não estão fora da cultura, elas não são um ambiente meramente
 técnico, eles são ambientes que são lidos, interagidos, assim como outros ambientes anteriores,
 inclusive em relação através de analogias. As formas, estruturas e funções que as interfaces
 utilizam muitas vezes são derivadas, transportadas de modos de interação que existiam antes das
 tecnologias digitais, por isso que eu chamo de linguagem interacional e não linguagem digital,
 uma vez que essa linguagem interacional na minha perspectiva já existia antes de existir a
 tecnologia digital. Nesta, neste meme nós vemos quatro exemplos de interações que já existiam
 e que existirem os aplicativos que implementaram essas interações num ambiente digital. O Waze,
 por exemplo, um aplicativo de transporte urbano de mapas, ele é uma versão melhorada dos guias de
 navegação das cidades que a partir até os anos 80 eram fundamentais para compreender o tráfego
 maluco das grandes cidades no Brasil. Já o Spotify, um aplicativo de músicas e streaming,
 reproduz a interação parecida com você estar observando, buscando, encontrando, curtindo,
 LPs, em um sebo, né, flipando entre as diferentes capas e vendo as imagens e através dessas imagens
 de experiência sinestésica que corresponde talvez à música. Já o Tinder, ele reproduz interações
 parecidas com o aplicativo, com o programa de televisão, Namoro Amizade do Silvio Santos e de
 vários outros similares a este. O aplicativo de namoro não surgiu do nada. E por último, o Facebook,
 que reproduz as conversas de bar, as conversas nas ruas e os espaços onde as pessoas se encontravam
 para ter e muitas vezes discutir avidamente, estes modos de interação já existiam antes das
 interfaces digitais, mas as interfaces digitais permitiram que esses modos de interação se
 tornassem mais escaláveis e que essa conversa, essa interação, acontecesse com muitas pessoas ao
 mesmo tempo. Então pode-se identificar ao longo da história dessa linguagem internacional certos
 modos de interação específicos, que seriam maneiras de interagir com outras pessoas que são
 cultivadas por uma determinada cultura, assim como existem gêneros musicais, gêneros cinematográficos,
 gêneros literários, também pode-se dizer que existem gêneros interacionais ou gêneros de
 interação. Eles são compostos de ações ritualizadas e expectativas sobre as reações do outro dentro
 do sentido pré-definido. As novas tecnologias, portanto, são apropriadas para atualizar esses
 gêneros internacionais e existe um processo de aprendizagem necessária para quem quer usar um
 aplicativo digital, uma interface digital, que vai além de compreender as funcionalidades e passa por
 compreender os sentidos daquelas funcionalidades dentro da linguagem internacional e dentro dessa
 linguagem os diferentes gêneros, saber distinguir um aplicativo processador de texto de um aplicativo
 de planilhas, por exemplo. A maneira como se interage com esses diferentes aplicativos é
 diferente porque envolve maneiras diferentes relacionar com outras pessoas. O designer de
 interação, o designer de interfaces gráficas, ele busca encaixar ou desencaixar a criação de
 interfaces dele dentro desse padrão reconhecido na cultura. Ele pode ou não reproduzir o gênero,
 dessa maneira atualizando ou mantendo esse gênero dentro da nossa cultura. O recurso mais interessante
 para designers de interfaces gráficas se atualizarem, compreenderem e expandirem o seu
 repertório de interações são chamadas bibliotecas e linguagens de padrões. Esses padrões eles
 desenvolvem problemas e soluções comuns cultivadas por uma determinada prática de design. Os padrões
 não são definidos por uma entidade, por uma organização tal como são as diretrizes mencionadas
 anteriormente dos guias e guidelines de sistemas operacionais como material design. Os padrões,
 eles evoluem, se desenvolvem na cultura de maneira mais ou menos espontânea através de
 uma prática de regulação da cultura horizontal. Basicamente um designer reproduz o que ele viu
 outro designer fazer numa situação parecida com a que ele está agora no projeto. Isto é, muitas
 vezes, um processo de reprodução de padrões intuitivo ou não consciente, ou não tão explícito,
 mas muito efetivo. As bibliotecas e as linguagens de padrões são esforços aí sim explícitos de
 sistematizar, identificar, organizar estes padrões encontrados de maneira espontânea na prática de
 design. Além dos padrões de interação, existem também estilos visuais que são definidos por uma
 personalidade, por um momento, são definidos por estilos pessoais e a marca dos designers que estão
 por trás das interfaces gráficas, mas também são definidos por gostos, por características dos
 usuários e usuárias. Eles refletem valores, esses estilos visuais refletem valores da cultura de
 diferentes maneiras. Dentro do design de interfaces gráficas, um dos maiores desafios então é compor
 um projeto com esses diferentes elementos, diferentes padrões expressos dentro de uma
 linguagem interacional e visual coerente e também sugestiva que dê significado, mas que também
 permita fazer e realizar as ações que usuários e usuárias estão buscando. A composição gráfica,
 portanto, é um dos elementos mais importantes do design de interfaces gráficas. Basicamente,
 trata-se do conjunto de relações entre os elementos visuais dispostos na tela. A composição gráfica,
 ela se demonstra na distribuição desses elementos. A relação principal entre os elementos visuais é a
 distribuição espacial. Pode-se usar elementos como figura fundo, tipografia, cores, componentes,
 para dar sentido a essa composição gráfica. Podem se criar outras relações além do distanciamento
 físico, como contraste, harmonia, simetria, ritmo, ordem de leitura. E a composição gráfica pode
 se aplicar a todas as regras diversas do design gráfico, como as sequências de Fibonacci,
 regra dos terços, o retângulo de ouro e várias outras. Estas composições gráficas, elas podem
 ser desbalanceadas, mas também podem ser desbalanceadas. Uma relação pode estar mais forte do que a outra.
 Então, a composição gráfica não é uma questão padronizada, ela deve ser construída para a situação
 de projeto, para os sentidos desejados, para as ações que devem ser representadas no momento da
 interação. Esta composição é um fenômeno emergente, porque à medida que se adicionam
 elementos gráficos na tela e esses elementos vão sendo interagidos pelo usuário, vão se transformando
 pela interação com o usuário, surgem novas composições e muitas composições inesperadas.
 Combinações de elementos visuais que aparecem na tela ao mesmo tempo de uma maneira que nunca foi
 imaginada pelos designers. Quanto mais opções disponíveis, mais difícil é prever todas as
 possibilidades. Portanto, o projeto de uma composição gráfica, uma interface, ela precisa se basear no
 conceito de uma gestalt dinâmica, uma gestalt que vai se transformando ao longo do tempo. Para buscar
 apoiar essa gestalt dinâmica e ainda assim manter uma certa coerência na interação para que a
 interação interacional seja compreensível, utiliza-se muito o Guia de Estilo da Interface, que é um
 documento muito parecido com documentos utilizados no design gráfico para definir identidades visuais,
 o chamado Guia de Marca. Mas no caso das interfaces, ele é chamado de Guia de Estilo, porque ele vai
 definir possibilidades diversas de interações entre elementos e não padronizar para que todos
 os, as criações sejam mais ou menos parecidas. Então Guia de Estilo, ele dá uma liberdade maior
 do que o Guia de Marca do design gráfico impresso. Quando se constitui essa composição gráfica,
 um dos elementos mais difíceis de balancear, uma das relações mais difíceis, é a chamada
 Hierarquia Visual, que é uma relação implícita dos elementos na tela, sugerindo importância relativa
 ou ordem de leitura. Utilizam-se relações como posição, peso, tamanho, para construir essa
 relação maior da chamada Hierarquia Visual. Essa Hierarquia Visual, ela serve para mostrar
 informação em pedaços, de maneira que o usuário e o usuária possa deglutir, mastigar, digerir essa
 informação aos poucos. Então, nesse slide, no lado esquerdo, temos uma composição visual sem
 nenhuma título e parágrafo com a mesma peso visual. No lado direito, nós temos uma composição visual
 com uma Hierarquia Visual bem definida. Nós temos a primeira frase dizendo "Você vai ler isso primeiro",
 depois você vai ler a segunda frase que está com um texto mais claro e menor, mais cinza,
 em vez de preto, como a primeira frase, e as frases vão ficando menores e mais, menores e mais leves,
 com menor contraste com o fundo, até chegar no final em que há quebra desse padrão e uma parte de uma
 frase é colocada em negrito, destacando ela e quebrando uma Hierarquia muito estrita. Então,
 é possível construir Hierarquia Visual de várias maneiras, não apenas seguindo uma lógica de cima
 para baixo, da esquerda para a direita. O importante é que aquilo que for destacado apareça em relação
 a uma coisa que foi destacada na hora que as duas coisas vão fazer sentido juntas. É importante também
 mencionar que nem sempre o usuário vai seguir essa Hierarquia Visual quando for ler a página. O olhar
 da usuária, a sacada de olho, não vai necessariamente seguir a Hierarquia Visual, porque o usuário
 usuário pode ter interesses diferentes daqueles que foram imaginados pelo designer. Como é uma
 interface dinâmica que vai mudando conforme a pessoa vai interagindo, a pessoa precisa ficar muito
 atenta ao que aparece nos seus detalhes e também aquilo que interessa a ela. Estudos realizados com
 eye tracking, que são equipamentos que leem a sacada de olho e mapeiam para a interface gráfica,
 demonstram claramente que a expectativa de que a pessoa leria uma interface gráfica da cima para
 a esquerda para a direita seguindo um movimento de zigzag é falsa e as pessoas vão fazer movimentos
 de sacada de olho muito mais caóticos e inesperados do que os designers estão acostumados. Portanto,
 essa Hierarquia Visual precisa oferecer várias opções de possibilidades de relações entre
 elementos. Os agrupamentos são recursos muito interessantes para complementar a Hierarquia Visual
 e construir uma composição visual. Quando as coisas estão próximas entre si ou longe,
 isso tem um significado para o usuário usuário. A pessoa vê que se esses objetos estão próximos
 é porque eles devem ser usados em conjuntos ou entendidos em conjunto. Já se estes estão distantes,
 eles não devem ser usados em conjunto. Para isso, os princípios da Gestalt são muito úteis porque
 eles tentam criar agrupamentos a partir de vários critérios. Na nossa imaginação mais ingênua,
 agrupamento se dá através da proximidade. Você quer objetos próximos, você cria grupos,
 grupos que não são necessariamente marcados visualmente. Veja, somente pela proximidade,
 o cérebro já vai completar e criar um todo a partir dessas partes. Esse é o princípio básico
 da Gestalt. Porém, se você colocar vários objetos em sequência um atrás do outro,
 também você vai criar grupos por continuação. Também é possível criar grupos por similaridade
 de forma ou de cor. Então, se você cria objetos que tem uma mesma cor dentro de uma sequência de
 objetos, mesmo que eles não estejam próximos, eles são vistos como parte de um mesmo grupo.
 Também é possível separar pedaços da interface e criar regiões que seriam grupos, aí sim,
 que seriam bastante duramente definidos. Mas também é possível criar elementos que conectem um ao
 outro como linhas, como pontilhados. E por fim, é possível criar separações através do fenômeno
 do fechamento, que é um fenômeno muito interessante da Gestalt, que é uma espécie de uma ilusão de
 ótica em que a gente enxerga uma linha, uma continuidade onde não há, onde está quebrada
 aquela linha. Além dos princípios da Gestalt, outro recurso muito utilizado por designers de
 interfaces gráficas são as propiciações, também chamadas de affordances em inglês. A propiciação
 envolve características de uma interface em relação a um certo tipo de interação. A propiciação não
 existe independente da ação do usuário, ela existe em relação a ação, uma relação que se transforma
 historicamente e que permite que a pessoa olhe para aquela interface gráfica e imagine aquela ação.
 Ela vê uma possibilidade de encaixe e ela testa e encaixa porque dá para fazer aquela ação ou não dá
 para fazer aquela ação. Então dependendo do contexto cultural, das características ergonômicas da pessoa
 e de experiências pessoais, vão se manifestar propiciações nas interfaces gráficas. Vou utilizar
 agora aqui alguns exemplos de propiciação a partir de uma série de portas, duas portas que eu
 encontrei certa vez em um banheiro de um Shopping Center. Estas duas portas não tinham nenhum tipo de
 pega, não tinha maçaneta, não tinha nenhuma maneira explícita de como que elas abriam. Então elas
 não precisavam não propiciar a ação de abrir, mas elas de fato propiciavam porque afinal de contas
 toda porta propicia a abertura. A questão é como que ela expressa a maneira específica de abertura.
 Se você empurrar de um lado que esteja a dobradiça, é possível que você não consiga nem abrir a
 porta de maneira fácil. Portanto, se você fizer uma pequena modificação nestas portas e acrescentar
 duas pegas, duas barras de empurrar no lado direito ou do lado esquerdo, já é possível propiciar
 puxar. Na verdade não é nem direito nem esquerdo, mas sim o lado oposto à fechadura. Se estiver no
 lado da fechadura, essa porta não vai abrir. Então agora fica claro como que faz para puxar,
 porque você tem uma barra, essa barra te diz "puxe", ela não te diz "empurre". Se essa barra for horizontal,
 como a gente viu no exemplo anterior, que é uma barra vertical, na barra horizontal você vai querer
 empurrar, porque já existe uma relação histórica de ver barras horizontais em portas, que significa
 empurrar. Se você fizer uma barra horizontal menorzinha, pequenininha, você já vai quebrar esse
 padrão antigo e a pessoa vai ficar na dúvida se ela puxa ou se ela empurra aquela porta. Se você
 for "puxe", que significa empurrar em português, você vai causar confusão para brasileiros,
 pessoas que falam português e têm esse problema do falso cognato. A palavra "puxe" muitas vezes é
 traduzida na mente de brasileiros como "puxe", embora signifique exatamente o oposto, que é "empurre".
 Se você colocar uma maçaneta circular fora da porta ou no meio da porta, é bem possível que você
 propicia os erros com fusões diversas. Então esses exemplos que são descritos no livro "Design do
 dia a dia", um clássico do design de interação, livro escrito pelo Donald Norman, existe essa
 alfabrina do design de interfaces com propiciações percebidas, propiciações que são expressas pela
 interface gráfica. Quando você trabalha com interface gráfica, não necessariamente você tem
 os mesmos recursos físicos que se aplicam no ambiente físico. As pessoas têm uma histórica
 que elas sabem que se empurrar no meio da porta, na parte da dobradiça, ela não vai abrir, mas na
 interface digital não existe essas limitações físicas. Como é que você explica que uma coisa
 pode ser interagida de um jeito ou de outro? O recurso muito utilizado pelos designs de gráficos
 é a clicabilidade. Você fazer um elemento da interface gráfica parecer mais clicável através
 de recursos como sombra, como o efeito bevel, de você fazer que pareça extrudido, uma tridimensionalidade
 falsa, são recursos utilizados para aumentar a propiciação em interfaces gráficas. Além do
 conceito de clicabilidade, existe também o conceito de Lady Fits, que também se relaciona com
 propiciação. Se você quiser aumentar a propiciação de um clique de um objeto qualquer na tela, basta
 ter ele um tamanho maior. Quanto maior for esse objeto na tela, mais fácil será movimentar o mouse
 até ele parar dentro do alvo para clicar. Porém, o lugar onde os elementos na tela ficam maiores é
 quando eles têm um tamanho infinito. Quando um objeto é posicionado no canto superior, inferior,
 esquerdo ou direito da tela, um canto absoluto. O último pixel. Nesse caso, não importa o quanto
 você mexe o mouse para aquele lado, o mouse vai sempre parar dentro do alvo daquele objeto. Então
 esse objeto vai ter um tamanho infinito. Portanto, ele será mais fácil de ser clicado e selecionado
 dentro de uma tela. Isso tem um impacto muito grande também nas interfaces móveis dos celulares,
 em que o alcance dos dedos define a facilidade de acessar uma operação dentro de uma interface
 móvel. Alguns aparelhos celulares de tão grandes que se tornaram, ao longo dos anos,
 se tornaram difíceis de operar com o dedo-polegar. Uma limitação que foi solucionada através de uma
 gambiarra, que era apertar duas vezes com o dedo numa parte da interface, puxando a interface para baixo.
 Uma solução não muito elegante, que depois foi posteriormente substituída pela diminuição
 efetiva do tamanho das telas. Nas telas de interfaces móveis também é possível realizar
 gestos. Então essas telas propiciam algo que uma interface baseada em mouse e apontador na tela
 não propicia. Esses gestos podem ter significados diversos, porém a linguagem interacional já tem
 alguns gestos padronizados, padrões de interação relacionados a gestos de interfaces móveis,
 por exemplo o Pinch, o famoso Pinch que é apertar os dedos como se estivesse pegando um objeto virtual
 que não está ali fisicamente na tela, mas que reage como se tivesse. Essas propiciações que o
 designer desenvolve em relação com o usuário na interface gráfica é como uma ticana criada por um
 planejador urbano para obrigar os transeuntes a atravessar de maneira segura por uma rua. Nem
 sempre os transeuntes vão se dar o trabalho extra de passar pela chicana, então eles vão cruzar a rua
 através de um caminho inesperado, o chamado desire path, ou o caminho dos desejos que são expressos
 pela pisada na grama, que com o tempo vai mostrando que muitas pessoas não aceitam passar pela chicana,
 não aceitam as propiciações projetadas pelos designers. Isso é um fator inerente ao projeto de
 interfaces gráficas. Como é que se faz para descobrir então os tais dos caminhos de desejo,
 de desire paths dos usuários? Bom, Google Analytics e outras ferramentas que mensuram o
 uso de interação através de um aplicativo, de uma interface gráfica digital online,
 ele permite você perceber onde que as pessoas estão desviando do fluxo esperado. E muitas vezes
 isso é útil para maximizar a retenção dessas pessoas e identificar gargalos na interação
 em momentos em que essa interface não faz mais sentido. Isso é um, pensando de maneira coletiva,
 é similar à estigmergia, que é um recurso organizacional que as formigas utilizam para
 se ambientar, se organizar coletivamente em volta do formigueiro. Quando uma formiga anda por um
 determinado caminho no ambiente, ela vai deixando um hormônio naquele espaço físico ou no ar.
 E esse hormônio ele é lido, ele é sentido por outras formigas que passam por ali depois.
 Seres humanos não conseguem perceber esses hormônios com o nosso nariz, mas as formigas conseguem.
 E aí elas vão deixando marcas de quais são os caminhos que são mais fáceis, são mais eficientes,
 que têm mais comida, porque vai tendo uma quantidade maior de hormônio naqueles caminhos. Então com
 um tempo, os caminhos que não são ótimos, que não são eficazes, eles não vão ser mais traçados
 pelas formigas até que o momento que se estabeleceu o caminho padrão. Porém, no começo, todos os caminhos
 são tentados pelas formigas até que começa a aparecer e emergir um padrão de navegação.
 Isso é o mais ou menos que acontece também nas interfaces digitais online, que se utilizam de
 mecanismos de retroalimentação pela análise de estatísticas de dados. Uma das maneiras de
 identificar esse ciclo de estigmergia é o teste AB, desenhar pequenas mudanças numa interface e
 oferecer ela para um grupo seleto de usuários, mensurando e comparando este grupo seleto com um
 grupo maior, vendo qual dessas interfaces conduz a uma determinada meta, qual a porcentagem, por exemplo,
 de usuários que na versão A converte em um comprador e na versão B a mesma meta. A versão B pode
 ganhar, temos de converter as pessoas em compradores e dessa maneira ser priorizada. Mas isto não
 significa que a interface gráfica vai ficar melhor, composição visual pode ficar até pior, mas o
 interesse do negócio fala mais alto e a interface gráfica feia é utilizada porque ela vende,
 e converte usuários em compradores com uma área eficácia. Além do teste AB, existe o teste
 multivariado em que são testadas várias opções, porém a comparação estatística do teste
 multivariado é muito mais complexa porque o isolamento das variáveis é mais difícil,
 identificar o que está fazendo diferença é mais difícil. O designer de interfaces gráficas
 normalmente não se presta, não se apoiam apenas em estatísticas de navegação,
 se não que se apoiem principalmente no conhecimento e no domínio da linguagem interacional, da mesma
 maneira como um criador de arte ou um criador de projetos em outras plataformas, outros meios,
 vão se apropriar. Isso é uma maneira de se comunicar através da interface gráfica que
 tem uma certa autoria, em uma maneira específica reconhecida até mesmo pelos próprios usuários de
 interagir. Isso vai ajudar a empresa que está desenvolvendo aquela interface gráfica a ser
 reconhecida como tendo um certo branding, identidade digital. Portanto designers de interação,
 de informação e ex-designers, designers, exu, utilizam muito ferramentas que não são baseadas
 em estatísticas necessariamente, mas são baseadas sim na compreensão e interpretação deles do
 comportamento dos usuários, que pode ser compreendido através de outros métodos além
 da estatística de navegação como testes de usabilidade, card sorting, pesquisas etnográficas
 e etc. A partir dessa interpretação, nesse comportamento, esses designers criam maneiras
 de interagir, como por exemplo o fluxo de interação, que é uma criação abstrata de etapas que serão
 cruzadas pelos usuários enquanto estiverem interagindo com o aplicativo, um website. Cada
 etapa do fluxo é uma tela ou uma janela dentro de uma série de telas. Já o Airflow mostra essas
 telas específicas dentro do mesmo fluxo, então ele tem um nível um pouquinho maior de concretude,
 um nível maior de detalhamento. Ao invés de pensar a tela como uma caixinha em branco,
 a caixinha é aberta e mostra-se quais os elementos da tela que conduzem a interação. Então as
 setinhas, ao invés de sair de uma tela e a outra, ele sai de um elemento da tela, vai para um elemento
 de outra tela ou vai para uma outra tela. O Airflow costuma ser um documento bastante pesado, difícil
 de ter e um complemento, muitas vezes construído depois de fazer um fluxograma de navegação. Outro
 elemento muito utilizado pelos designers para definir essa interação, essa linguagem interacional,
 é o Y-Frame ou o aramado da planta baixa da tela. Ele mostra os elementos da tela de maneira
 abstrata, simplificada, resumida, muitas vezes sem utilização de cores ou de tipografia, mas sim com
 utilização de recursos de tamanho negrito, itálico, para construir hierarquias visuais. O Y-Frame,
 ele deve ser construído antes de construir uma interface visual com todos os elementos gráficos,
 apenas como uma espécie de um esboço. O Y-Frame anotado é uma planta baixa que tem um nível de
 valor muito maior do que o Y-Frame simples, porque ele vai anotar, detalhar com tracinhos, com balões,
 com textos nos cantos. Ele vai mostrar como que vai se dar o desdobramento da interação
 desta interface gráfica na medida que o usuário acessa as funcionalidades. Este é um dos grandes
 desafios do Y-Frame, quando ele é aplicado para uma interface muito dinâmica, muitas vezes fica
 difícil de entender como ela vai se comportar. Uma abordagem mais simples para lidar com esse
 problema é sentar as pessoas que estão responsáveis pelo projeto e pelo desenvolvimento
 daquela interação e rabiscar num papel ou num quadro branco estas interações como que elas
 se desenvolvem ao longo do tempo. O chamado Rabisco Frame tem um nível de informalidade maior do que
 o Y-Frame, mas através do diálogo com outra pessoa colaborativamente se constrói os componentes da
 tela e um conhecimento tácito de como que essa interação vai se desenrolar. A prototipação em
 papel é um elemento um pouco mais avançado do que o Rabisco Frame, em que se constrói elementos
 de interface através de rabiscos e as interações com esses elementos, ao invés de representadas como
 um rabisco na tela, como era o que a gente viu anteriormente, no prototipo em papel existe uma
 movimentação física dos elementos na tela. A tela pode mudar puxando um pedaço de papel e
 se abrindo em cima de outro ou um botão é ativado desdobrando um pedaço da tela. Então se abre o
 pedaço da tela através de um post-it ou algum recurso do gênero. Existem vários recursos para
 a prototipação de papel e o principal motivo é o teste com os usuários ou clientes que podem
 interagir com aquela interface como se fosse uma interface real e ter uma sensação próxima da
 interface de uso. Estes mesmos protótipos de papel que são chamados de baixa fidelidade,
 eles podem ser digitalizados através de aplicativos como o PopApp. Tirando uma foto do prototipo em
 papel é possível definir uma interação de uma foto para outra e criar uma ilusão de que aquele
 aplicativo já está funcionando. Os protótipos de alta fidelidade costumam ser construídos depois de
 muitos diversos de validação e teste de experimentação quando já existe uma clareza
 a respeito da estrutura, da forma e da função que será expresso para aquela interface. O protótipo
 de alta fidelidade ele simula e ele é muito parecido às vezes com o aplicativo com o website
 final, mas ele não tem ainda a lógica de programação por trás, não tem o banco de dados,
 as programações não são dinâmicas, são estáticas, mas ainda assim é possível ter uma
 experiência muito próxima com uma boa dose de imaginação do resultado final. Além de métodos
 para criar interfaces gráficas, eu também pesquiso métodos para analisar interfaces gráficas e
 compreender os seus sentidos mais profundos. Até aqui eu falei de técnicas que são bastante
 correntes hoje na prática de design de interfaces gráficas, mas eu tenho desenvolvido técnicas para
 projetos específicos que podem vir a ser incorporadas no futuro. Por exemplo, a análise da distribuição
 de espaço dentro de uma interface gráfica. Você pode separar as partes dessa interface gráfica,
 dar um sentido para ela, verificando a sua função ou o seu significado e comparar ao longo dos anos
 depois, como que uma interface de um determinado aplicativo evoluiu. Nessa análise que eu realizei,
 essa pesquisa realizada no Facebook, eu demonstro como a partir de 2004 até 2010 existia uma
 predominância da interface da metáfora da timeline na página inicial do Facebook, que depois se
 diminuiu e foi dando espaço para fotos e outras funcionalidades. Então, o que essa pesquisa revela
 é que a ênfase da interface gráfica e a quantidade de espaço que cada elemento vai ter na tela
 depende muito da estratégia de negócios daquele projeto, daquele aplicativo, daquela tecnologia
 digital. Então, na medida que o Facebook se tornou um espaço para ver a imagem, ver fotos e curtir
 as fotos e ter todo um processo de exposição social, então as fotos ganharam mais espaço nessa
 área, algo que hoje em dia, depois de alguns anos desse estudo, eu não atualizei o estudo ainda, mas eu
 imagino que hoje em dia fotos ocupam menos espaço, uma vez que até esse tipo de funcionalidade migrou
 para um aplicativo da mesma empresa que é o Instagram. O perfil semiótico é uma outra técnica que eu
 desenvolvi no meu blog, no Usabilidoido, para o redesign dele, que foi feito muitos anos atrás.
 O perfil semiótico utiliza uma série de fotografias que expressam certas emoções e a partir das escolhas
 dos usuários pelas fotografias e a interpretação do designer, pode-se criar uma interface que tem uma
 expressividade emotiva maior. Então, são alguns métodos que eu tenho utilizado e desenvolvido nas
 minhas pesquisas que servem para criar interfaces gráficas, mas que ainda estão em desenvolvimento e
 de maior validação na prática.
 Muito obrigado.