Passo-a-passo

1. Pesquisar no Google imagens relacionadas ao seu tema. Salvar estas imagens numa pasta do computador. Filtre as imagens marcadas para reutilização com modificação na aba ferramentas. Se você tiver outra fonte de imagens com licenças de uso livres, fique à vontade para utilizar.
2. Abrir o template de painel semântico no PowerPoint.
3. Clicar com o botão direito nas imagens existentes e escolher "Mudar imagem". Inserir as imagens selecionadas na etapa anterior.
4. Organizar as imagens de maneira criativa e caótica.
5. Exportar o slide como uma imagem JPEG.

Vídeo

Créditos: Vídeo produzido pela Hotmilk PUCPR e Imago Produções Educativas em 2017, como material didático para o programa de inovação aberta Renault Experience. Esta cópia faz parte do arquivo pessoal de Frederick van Amstel, responsável pelo roteiro e apresentação. Direção: Tatiana de Paula Lopes.

Transcrição

O painel semântico é uma colagem de imagens que serve para expressar o significado de um contexto. Ele pode ser utilizado para lembrar os projetistas depois sobre esse contexto, sobre suas características, bem como para ajudar em situações em que há bloqueios de criatividade. Basta olhar para o painel semântico que as ideias vêm à cabeça imediatamente através das suas múltiplas imagens.

Primeiro, faça uma pesquisa no Google na aba "Imagens" sobre temas relacionados ao seu projeto. Filtre as imagens marcadas para reutilização com modificação na aba de "Ferramentas". Se você tiver outras fontes de imagens com licença de uso livres, fique à vontade para utilizar, não tem problema. Salve todas as imagens numa pasta de computador. Busque imagens que representem a diversidade do tema, as emoções que as pessoas sentem, os estilos e os objetos que as pessoas usam neste contexto.

Abra um template de PowerPoint sobre o painel semântico e modifique as imagens existentes para colocar aquelas que você salvou na sua pasta de computador. Mude elas de lugar, gire as imagens, faça cortes, ordene como quiser. Siga a sua intuição e tente deixar as imagens de maneira que elas evoquem emoções similares próximas umas das outras.

Lembre-se, o objetivo do painel semântico é estimular a criatividade da equipe e servir de orientação subjetiva ao projeto. Quando você estiver satisfeito com o resultado, exporte o seu painel semântico com uma imagem JPEG.

Série

Este tutorial faz parte de uma toolkit de inovação no design, com outros métodos que podem ser combinados. Esses métodos não precisam ser executados necessariamente nesta ordem.

1. Brainstorming
2. Análise de similares
3. Briefing de projeto de experiência
4. Pesquisa de shadowing do usuário
5. "Um Dia na Vida" dos usuários
6. Storyboard de interação
7. Painel semântico
8. Entrevista contextual
9. Personas de usuários
10. Jornada do usuário
11. Protótipo bruto
12. Teste de usabilidade
13. Avaliação heurística de interfaces

Comente este post

Baseando-se no trabalho inovador da professora Lesley-Ann Noel, conhecida por promover discussões sobre diversidade cultural e corporal, a oficina também explora o tema dos privilégios. Os participantes são incentivados a refletir sobre quem detém acesso às oportunidades de criação e a investigar as razões por trás dessa disparidade. A desigualdade, frequentemente perpetuada através das gerações, é examinada de maneira aberta e crítica.

O conceito de "cria-corpo" está intrinsecamente ligado à noção de posicionalidade, ambos desempenhando papéis cruciais na compreensão da identidade e da formação individual. O "cria-corpo" representa a ideia de um corpo em constante processo de criação e recriação, não apenas no sentido físico, mas também no sentido emocional, intelectual e criativo. Este termo reconhece que um corpo não é uma entidade estática, mas sim uma entidade em fluxo, constantemente influenciada por experiências, aprendizado e interações.

A posicionalidade, por sua vez, refere-se às condições e contextos que moldam a identidade e as experiências de um indivíduo. Envolve fatores como origem étnica, gênero, classe social, raça e até mesmo o ambiente cultural em que alguém cresce. A posicionalidade destaca que cada pessoa ocupa um lugar único na sociedade, influenciando suas perspectivas, oportunidades e desafios.

A conexão entre "cria-corpo" e posicionalidade emerge quando se considera que o processo de criação não ocorre em um vácuo, mas é fortemente influenciado pelas condições e experiências que um indivíduo enfrenta. Nossas escolhas criativas, nosso desenvolvimento intelectual e nossas perspectivas são moldados por nossa posicionalidade. A forma como interpretamos o mundo ao nosso redor e expressamos nossas ideias é profundamente influenciada pelas circunstâncias em que vivemos.

Ao criar autorretratos usando materiais recicláveis, os participantes têm a oportunidade de incorporar sua posicionalidade em suas expressões criativas. Isso não apenas reflete a influência de suas histórias individuais, mas também ressalta como a posicionalidade influencia o processo criativo e a forma como nos relacionamos com o mundo ao nosso redor.

Esta oficina salienta o papel vital dos designers, uma vez que os produtos que concebem influenciam diretamente a sociedade. Projetos como aquele mostrado no documentário Lixo Extraordinário sobre o trabalho do artista Vik Muniz, que envolveu a colaboração de catadores de lixo na produção artística, ilustram o potencial do design para abordar questões sociais complexas. A experiência pessoal do autor, ao criar um autorretrato a partir de seus próprios resíduos, também destaca como nossas escolhas de consumo revelam nossa posição social e enfatiza a importância da autocrítica nesse contexto.

Vídeo

Slides

Download dos slides em PDF

Áudio

Expressando a posicionalidade do cria-corpo MP3 20 minutos

Exercício

O desafio nesta cria-atividade é produzir uma foto de auto-retrato com o lixo pessoal acumulado nos últimos sete dias. Os criadores explorarão o lixo pessoal como um material, refletindo sobre como materiais de design e composição gráfica podem ajudar a expressar (e refletir sobre) a posicionalidade.

Os criadores podem usar lixo ao lado de seus corpos ou criar um auto-retrato 100% de lixo. Os retratos serão filmados em classe com smartphones pessoais e exibidos para discutir diferenças e semelhanças. Os criadores podem pedir ajuda uns aos outros para tirar fotos.

Por meio da atividade proposta, os participantes são encorajados a examinar seus próprios privilégios e a considerar como suas escolhas de consumo afetam não apenas o meio ambiente, mas também a estrutura social. Através da criação de autorretratos com o lixo coletado, eles têm a chance de expressar visualmente sua posicionalidade e contribuir para uma discussão mais ampla sobre desigualdades e responsabilidade social.

Comente este post

O pensamento visual não se limita apenas a representações gráficas; ele também envolve imagens verbais, como metáforas, e até imagens abstratas que vão além do que é convencionalmente conhecido. Essas imagens mentais têm a capacidade não apenas de refletir o conhecimento existente, mas também de expandi-lo, nos conduzindo para o desconhecido, para novos insights e descobertas.

É importante ressaltar que a habilidade de desenhar não está apenas relacionada à coordenação motora, mas também à capacidade de abstrair e visualizar mentalmente as imagens antes de colocá-las no papel. Nesta aula, são explorados o desenvolvimento do pensamento visual e a capacidade de criar representações simbólicas e abstratas, permitindo a expansão do nosso conhecimento e abrindo caminhos para a criatividade.

Através de jogos e atividades, percebe-se como as imagens podem ir além do óbvio, proporcionando insights profundos e levando-nos a questionar e expandir nossos conhecimentos. O pensamento visual expansivo não só nos permite representar o que já conhecemos, mas também nos capacita a visualizar e criar o que ainda não existe, promovendo uma cultura de inovação e criatividade em nossas vidas cotidianas.

Vídeos

Slides

Download dos slides em PDF.

Áudio

Gravação de aula realizada durante a disciplina Psicologia 1, do curso de Bacharelado em Design, UTFPR.

Pensamento visual expansivo 37 min [MP3]

Comente este post

Slides

Áudio

Design de interfaces gráficas [MP3] 57 minutos

Comente este post

As metáforas utilizadas nas interfaces nem sempre são suficientes para representar ações complexas. A oficina explora como representar ações do usuário pode ser mais eficaz. A abordagem do design de interação se alinha à busca por interações significativas no computador, que é visto como uma ferramenta para os usuários interagirem com o mundo e com outras pessoas, em vez de ser um fim em si mesmo.

Porém, o uso do computador pode levar à opressão, à medida que empresas e grupos privilegiados o utilizam para restringir ações e agravar desigualdades sociais. A discussão se volta para um conceito chamado usuarismo, que coloca grupos desprivilegiados em uma posição de mera utilização, em vez de permitir que se tornem produtores e transformadores da tecnologia.

Para combater essa opressão, o autor se inspira no Teatro do Oprimido, desenvolvido por Augusto Boal durante a ditadura militar no Brasil. O teatro-fórum, uma técnica central, encoraja a participação ativa do público para explorar e transformar suas realidades. A oficina mostra como essa abordagem é aplicada para desmascarar papéis sociais impostos e estimular uma reflexão crítica sobre as interações no computador e na sociedade em geral.

Vídeos

A oficina menciona também a peça de Teatro Fórum sobre Design e Trabalho Precarizado em Plataformas Digitais realizada na Semana do Design do GFAUD-USP.

Slides

Áudio

Computador como Teatro do Oprimido [MP3] 23 minutos

Comente este post

As intenções de um projeto surgem de maneira explícita, através de restrições e requisitos, ou de maneira implícita, à partir de olhares e visões. Essas práticas implícitas de design são raramente discutidas, mas são reconhecidas pelos profissionais de design. Palavras como inspiração, observação, evidência e insight são comuns no discurso profissional para explicar de onde surgem as intenções que delineiam um determinado projeto.

Essas palavras também são muito utilizadas para justificar e relatar estudos etnográficos, um método proveniente de interdisciplinaridade entre Antropologia e Design. O método se baseia na combinação de dois dispositivos visuais: o olhar antropológico e a visão projetual. Irei descrever como essas práticas se entrelaçam no estudo etnográfico, porém, devo ressaltar que elas não se restringem a este método em particular. 

O olhar antropológico é uma maneira de ver o mundo que revela os significados coletivos da atividade humana em sociedade. Ao invés de ver como ação isolada de um indivíduo, o olhar antropológico busca entender a motivação coletiva por trás da ação, o que normalmente leva à história da comunidade em que o indivíduo está inserido. Qualquer ação é compreendida como expressão de uma linguagem implícita ou explícita que a comunidade vem desenvolvendo ao longo dos anos. Quando alguém faz algo, mesmo que não diga nenhuma palavra, também produz significados através de suas ações porque as pessoas da comunidade percebem essa ação como significativa.

A grande vantagem do olhar antropológico é justamente perceber os significados dessas várias linguagens e, principalmente, como elas se entrelaçam e constituem a cosmologia da comunidade. Uma ação banal que se repete diversas vezes ao dia como, por exemplo, pedir um favor a um colega pode revelar o significado atribuído à interdependência entre os membros de uma comunidade ou mesmo à ligação mística entre todos os seres. Porém, para perceber esse significado mais profundo, é preciso observar outras ações que se conectam com esta até chegar a uma percepção holística das ações, considerando-as como expressão linguística de uma cultura.

Essa percepção holística é a essência e também o desafio do olhar antropológico. Inserida numa comunidade, uma pessoa pode ser falante competente em várias linguagens e, ao mesmo tempo, não ter consciência dos significados mais profundos de suas ações. Isso porque as pessoas se acostumam a ver as coisas cotidianas sem olhar para elas. Depois que elas aprendem o significado da ação, a maior parte na infância, elas não se questionam mais porque a ação existe. A ação já vem com uma explicação embutida de sua própria existência, por exemplo, um propósito ou objetivo extrínseco que desvia a atenção para o fim da ação.

Quando um antropólogo estuda uma comunidade parecida com a que o constituiu como criança ou adulto, ele precisa se distanciar dessas explicações embutidas, pois elas não conduzem a uma percepção holística da ação. Uma das maneiras de fazer isso é utilizar a técnica do estranhamento. O antropólogo nega os significados aprendidos naquela comunidade e busca reaprendê-los, tal como se fosse um forasteiro. Ele olha para as ações do dia-a-dia como se fossem muito estranhas, perguntando constantemente o porquê de cada coisa. Eventualmente, os questionamentos banais suscitados pela técnica abrirão caminho para investigar significados mais profundos da ação.

O objetivo do estranhamento é desconstruir a explicação embutida na ação, porém, existe o risco de colocar no seu lugar um estereótipo ou preconceito. Isso acontece quando o olhar antropológico está dominado por um viés específico, por exemplo, os valores culturais de uma nação, o interesse do cliente que financia o estudo etnográfico ou o prazo para conduzir este estudo. Existe um risco muito grande de chegar a conclusões apressadas.

A metáfora de iceberg da cultura criada pelo antropólogo americano Edward T. Hall ajuda a compreender o risco do olhar apressado. Na ponta do iceberg, estão os elementos visíveis de uma cultura, tais como comida, tradições, costumes e roupas. Quem olha só para esses elementos não vê além do estereótipo. Para compreender significados profundos, é preciso identificar valores, visões de mundo e crenças básicas, além de traçar as origens históricas disso tudo. Tais elementos ficam abaixo da linha de visibilidade do iceberg e por isso são mais difíceis de compreender em profundidade.

Voltando ao Design, a profundidade do olhar antropológico está diretamente relacionada ao grau de inovação almejado pela visão projetual. Um projeto que visa atingir uma inovação incremental, ou seja, otimizar processos ou reduzir custos, não precisa de muito aprofundamento no olhar. A pesquisa pode ser rápida e superficial. Para chegar a uma inovação disruptiva, entretanto, é necessário dedicar mais tempo. Agora se você tiver os dois: bastante tempo e bastante aprofundamento, você pode chegar ao nível de inovação radical, aquela que cria novos mercados e novas soluções.

A visão projetual, diferente do olhar antropológico, está orientada para a inovação. Apesar de reconhecer a força da tradição, a visão projetual parte do princípio de que é possível mudar. O projeto reconhece a situação atual e propõe mudanças através de ações que reproduzem e, ao mesmo tempo, introduzem novos padrões. A visão projetual é realizada quando as ações de mudança antecipadas pelo projeto se tornam efetivas, ou seja, se tornam uma inovação.

Isso nem sempre acontece, entretanto. Projetos podem ser abandonados, rejeitados ou desviados de seu propósito original. A falibilidade da visão projetual é um dos grandes motivadores dessa interdisciplinaridade entre Antropologia e Design. No Design, acredita-se que o estudo etnográfico pode reduzir a chance de falha do projeto através de um desenvolvimento dialético entre visão projetual e olhar antropológico. Ao invés de desenvolver cada um em separado, um após o outro, ambos são desenvolvidos em conjunto, por interação.

Nessa dialética, a visão projetual se desenvolve calcada no que se sabe sobre a comunidade que será afetada pelo projeto. Ao invés de implementar uma tendência externa à comunidade, o projeto busca encontrar as tendências de mudança na comunidade e desenvolver propostas que amplifiquem ou catalisem ações que já estão acontecendo. Também é possível o contrário, que o projeto busque evitar ou prevenir certas ações.

Por exemplo, as gambiarras que as pessoas fazem num determinado contexto são fontes de inspiração recorrentes para a visão projetual. Isso porque a gambiarra já faz uma seleção de um problema relevante que não está sendo resolvido de maneira satisfatória na comunidade. A solução que a gambiarra apresenta pode não ser a melhor, mas o problema é patente. Com frequência, propostas de projeto inspiradas em gambiarras aproveitam parte da técnica da gambiarra, expandido a mesma com tecnologias e conhecimentos de outros contextos. Por outro lado, o projeto inspirado na gambiarra busca substituir a gambiarra e torná-la obsoleta.

Aqui fica claro que a visão projetual faz julgamentos de valor sobre as situações a partir de critérios éticos e estéticos. Com frequência, o projeto se coloca como superior à gambiarra. Raramente, se coloca em uma posição humilde em relação ao conhecimento situacional que gerou a gambiarra. Quando a visão projetual interage com o olhar antropológico, o projeto se torna humilde. Os critérios se desenvolvem de dentro para fora, à partir dos desejos e normas da comunidade. Isso evita perder tempo de projeto com ideias sem sentido, sem valor e sem poder de mobilização. Porém, uma vez definida esta base, é comum a visão projetual buscar recursos e referências de fora da comunidade para realizar suas propostas.

Ao mesmo tempo em que a visão projetual se desenvolve de dentro para fora, o olhar antropológico se desenvolve de fora para dentro. Ao invés de apenas de identificar e compreender ações relevantes ao projeto, o olhar antropológico investiga as origem das ação já com a intenção de promover mudanças. Ao invés de se perder na teia infinita de significados da cultura, o olhar se torna gradualmente mais focado no contexto do projeto onde há possibilidades de mudança. A experiência com outros contextos, outras comunidades e outras culturas é utilizado para interpretar e imaginar esse contexto.

A visão projetual é otimista e acredita que tudo é possível, bastando um projeto. O olhar antropológico é mais pé-no-chão e acredita que tudo depende da apropriação cultural. Todos os dois servem para definir e aprimorar intenções quando o projeto ainda está em suas fases preliminares. Intenções bem formadas permitem a emergência de conceitos mais robustos e inovadores. A interação entre os dois dispositivos visuais descritos aqui permite que estes conceitos tenham também maior relevância cultural para a situação de projeto, contribuindo tanto para realizar as intenções do design centrado no usuário quanto as do design participativo. 

Comente este post

Slides

Áudio

Gravação de aula realizada na Apple Developer Academy PUCPR.

Design de Ícones e Semiótica da Interação [MP3] 1 hora e 24 minutos

Transcriçã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.

Made with Keynote Extractor.

Comente este post

Na minha visão, a interface é justamente o conjunto de possibilidades de informação, interação e experiência entre pessoas e sistemas. Algumas destas possibilidades são oferecidas pelo próprio sistema, outras são criadas pelos próprios usuários em seus contra-projetos.

Interface não deve ser confundida com os fenômenos emergente que ela proporciona. Informação, interação e experiência são apenas possibilidades. Se uma pessoa não consegue utilizar uma interface, nenhum desses fenômenos emerge.

Interface gráfica é a parte mais visível da linguagem. O emprego de metáforas nas interfaces é só a ponta do iceberg. Além das metáforas, existem outros elementos característicos de linguagens humanas: gestos, símbolos, rituais, gêneros interativos, e a capacidade de agir simbolicamente em diversos contextos.

A professora Clarice de Souza criou uma teoria que ficou conhecida no mundo todo sobre o assunto, a Engenharia Semiótica. A ideia fundamental é que a designer codifica na interface uma mensagem de como o sistema funciona para tornar acessível suas funcionalidades para o usuário. O designer é um tradutor entre as linguagens do sistema (artificiais) e as linguagens do usuário (naturais).

Eu gosto dessa teoria, mas prefiro pensar que a interface em si é uma linguagem e não uma mensagem codificada em outras linguagens. Isso porque considero que a interface não é projetada apenas pelo designer, mas também pelo usuário no momento em que ele usa, customiza, conversa sobre a interface com outras pessoas e também quando ele se nega a usar a interface. Ou seja, na minha visão, a interface é uma construção social, tal como propõe o Steve Johnson no livro Cultura da Interface.

Na minha aula, explico que o conceito da interface continua a se desenvolver depois da sua programação em linguagem artificial. A interface é utilizada de maneiras inesperadas e isso transforma seu significado social. As ferramentas de analytics e testes A/B servem para reajustar a interface a tais mudanças sociais. Outra maneira como as interfaces se atualizam é através dos padrões de interação. Resumindo, os usuários fazem contribuições para a linguagem da interface tanto quanto os designers de interface.

Somente depois de explicar esse ponto fundamental é que explico a parte técnica do métier: wireframes, wireflows, diagramas e etc. Os entregáveis são dispositivos metalinguísticos que utilizam abstrações visuais para desenvolver a linguagem da interface. Embora alguns designers acreditem que cada interface tem sua própria linguagem, eu prefiro pensar que cada interface utiliza e complementa uma linguagem coletiva de interfaces.

Comente este post

Este é um daqueles problemas que eu classifico como superficial e genérico. Qualquer organização moderna pode ser acusada de ter um "problema de comunicação". Basta encontrar um erro causado pela falta de informação do tipo "fulano não informou os colegas que era para fazer X e foi feito Y". A partir dessa acusação, fica fácil justificar a implementação de protocolos de comunicação rígidos e tecnologia da informação que obrigam as pessoas a se comunicarem.

Embora pareça uma solução lógica, raramente elas funcionam. Isso porque a comunicação não é um mero recurso que possa ser controlado pela organização. A comunicação surge à partir da vontade das pessoas de se comunicar e não à partir da existência de canais, protocolos e regras. Estes podem até fazer as pessoas perderem a vontade de comunicar caso sejam projetados sem levar em consideração suas intenções.

Uma intenção comum na comunicação dentro das organizações é a coordenação horizontal, ou seja, uma pessoa se alinhar com outra sem depender de uma relação hierárquica. Esse tipo de comunicação é muito importante, pois serve para cobrir os buracos no planejamento e atender as inevitáveis emergências. Esta comunicação informal e horizontal é a base do improviso.

As soluções que os designers criam à partir de problemas de comunicação costumam incluir sistemas que organizam, estruturam ou arquitetam a comunicaçao informal. Estas soluções elevam o nível de formalidade da interação e acabam engessando a comunicação. Como consequência, a organização perde resiliência e flexibilidade, ou seja, perde a capacidade de se adaptar a situações adversas.

O fato de uma pessoa inserir uma informação num sistema não garante a comunicação com outra pessoa. A outra pessoa podem nem ver a informação ou considerá-la irrelevante pela falta de contexto. A comunicação informal é fundamental para preencher estas lacunas, provendo contexto e sentido para o fluxo de informação. Não é uma palavra ou frase que faz a diferença para entender o fluxo, mas sim a continuidade do processo comunicativo. Um acompanha o outro.

Quando um processo comunicativo é substituído por um fluxo de informação, o resultado é o caos. As pessoas não conseguem mais se coordenar, ninguém sabe onde está a informação que precisa e ninguém se responsabiliza mais pelos erros. Tudo vira culpa do sistema.

O problema de comunicação se intensifica quando é tratado como um problema de informação. Conforme exposto, informação e comunicação não são a mesma coisa. Um não garante o outro. O problema de informação pode ser solucionado pela implementação de sistemas de informação, porém, um problema de comunicação não pode ser solucionado.

O problema de comunicação pode ser considerado um problema capcioso. Conforme escrevi em outro post:

Os problemas do pensamento projetual expansivo são conhecidos como capciosos (wicked problems). Tais problemas estão em constante expansão (daí o nome desse pensamento). Quando você pensa ou fala sobre ele, ele já se transforma e se torna mais difícil de resolver. Por isso, ao invés de começar pela definição do problema, o pensamento projetual expansivo começa pela empatia para com as pessoas envolvidas com o problema.Isso pode ser desenvolvido de maneira distanciada pela observação ou pela participação em atividades comunitárias.

Ao invés de buscar requisitos, os projetistas buscam entender a moral do contexto. Já que não é possível resolver o problema, o que seria ético fazer a respeito? A resposta a um problema capcioso não é uma solução tecnicamente correta, mas uma ação para transformar o mundo de maneira ética, mesmo que não se tenha certeza sobre a solução do problema.

Na minha tese de doutorado, eu proponho que o design vá além dos problemas capciosos. Isso porque eu acredito que qualquer problema tem uma contradição por trás que pode ser estudada pelo designer, reproduzida através de jogos e utilizada como impulso para a transformação da sociedade.

O design expansivo vai além dos problemas de comunicação porque busca suas origens na história da atividade em questão. Com frequência, problemas de comunicação são manifestações da contradição entre a divisão do trabalho e o objeto da atividade. O objeto é complexo e precisa ser construído por várias pessoas, porém, cada pessoa se preocupa apenas com a parte que lhe cabe na divisão do trabalho. Em outras palavras, a contradição entre as necessidades de especialização e de colaboração é a origem da maioria dos problemas de comunicação.

Uma solução que ataque o sintoma não irá modificar a causa e, portanto, o problema de comunicação permanecerá mesmo após a implementação de um sistema de informação.

A solução que eu recomendo para um problema de comunicação é juntar as pessoas envolvidas e conversar sobre suas origens históricas, quando o problema começou e o que está por trás dele. À partir dessa conversa é possível desenvolver táticas para conviver com esse problema de maneira saudável.

Numa oficina de pensamento projetual que realizei no Projac da Rede Globo, os participantes perceberam que os problemas de comunicação eram inevitáveis. Primeiro, nós mapeamos as atividades que apresentavam problemas utilizando o modelo da atividade.

Depois, nós elencamos problemas e soluções utilizando o método PSP.

Por fim, chegamos à conclusão que a maioria dos problemas eram insolúveis. Fizemos, então, uma visualização das contradições em forma de estrela.

Esse exercício não resolveu os problemas de comunicação mas ajudou a equipe da Rede Globo a se tornar mais consciente de suas origens. Não tivemos tempo suficiente durante a oficina para elaborar táticas para conviver com essas contradições, mas acredito que teria sido interessante pensar em maneiras de tornar mais visíveis os problemas e as soluções corriqueiras.

Um aprendizado fundamental desta oficina foi a equipe reconhecer que sua capacidade de improviso não seria uma fraqueza mas sim uma força. Ao invés de implementar novos sistemas de informação, a equipe ficou interessada em fazer mais eventos como a oficina de pensamento projetual, para trocar experiências e desenvolver ideias em conjunto.

Sistemas de informação não são inúteis, entretanto. Eu acredito que eles possam aumentar a resiliência da organização, porém, para que isso aconteça, eles precisam ser projetados com a participação de todos os membros da organização. Combinado com o pensamento projetual expansivo, o chamado design thinking, o desenvolvimento de sistemas pode ser uma oportunidade para compreender a história da organização e projetar o seu futuro. Os designers que quiserem fazer algo útil a respeito de problemas de comunicação vão precisar encarar a complexidade da organização tal como encaram a complexidade do desenvolvimento de sistemas.

Comente este post

Assim como a maioria das identidades visuais construídas em nossa sociedade, essa logo foi feita para representar as intenções do governo Michel Temer e não as intenções da população. A identidade visual é imposta de cima para baixo sem processos democráticos de criação ou validação.

Designers, publicitários e políticos fazem assim porque desconhecem ou não querem conhecer a maneira democrática que existe para criar identidades visuais. Desperdiçam assim a oportunidade de usar esses processos para compreender melhor as intenções da população, consumidores e usuários.

O caso EPTran

Ao invés de apenas criticar essa prática, vou mostrar como é possível fazer diferente. Compartilho um caso democrático que pude observar na Prefeitura de Curitiba durante o projeto da logo da Escola Pública de Trânsito de Curitiba, a EPTran.

A EPTran é um lugar onde crianças e adultos podem aprender mais sobre a convivência no trânsito. Ela oferece eventos, cursos e apoio para escolas públicas, taxistas, motoristas de ônibus e ciclistas. Ela é um espaço comunitário, tal como o código de trânsito estabelece.

Inaugurada em setembro de 2015, a escola teve sua primeira identidade visual construída às pressas pela Secretaria de Comunicação Social da Prefeitura. O diretor da EPTran avaliou que o resultado não estava condizente com a missão da escola mas não sabia como explicar à Secretaria o que precisava.

O diretor Sandro Fernandes entrou em contato comigo e me perguntou se poderíamos contar com o apoio da PUCPR no projeto. A PUCPR assinou em setembro do ano passado um documento declarando suas intenções em desenvolver projetos de mobilidade junto com a Prefeitura de Curitiba. Era uma ótima oportunidade para validar o método que desenvolvi para criação coletiva de identidades visuais.

Organizamos, então, uma oficina de co-criação com o objetivo de gerar ideias para a logo da EPTran, que serviriam depois de insumo para o trabalho da Secretaria de Comunicação Social. Foram convidados todos os interessados (stakeholders) da escola: agentes de trânsito, instrutores, guardas municipais, membros de diversas secretarias da prefeitura e diretores de escolas públicas. Contamos também com a participação de um especialista em identidade visual e marketing, meu amigo Melqui Júnior.

Aquecemos a oficina com uma breve explicação sobre o que é uma identidade visual, como elas são criadas e a importância de fazer esse processo em público e de maneira livre. Foi apresentado o caso da logo das Olimpíadas do Rio 2016, criada de maneira colaborativa pela Tátil.

Depois de alguns minutos, estávamos prontos para por a mão na massa. Queria que cada um expressasse sua visão da identidade da EPTran mesmo que não pudesse desenhar. Escolhi, portanto, começar com Lego, inspirado no método Lego Serious Play.

Os modelos construídos pelos participantes tornavam tangíveis os valores que deram origem à escola. Me chamou a atenção o modelo de Gustavo Garrett, o coordenador de mobilidade urbana da Setran. Ele propôs o conceito de que a escola tenta mostrar que o trânsito não é feito de carros, mas de pessoas. Partindo dessa percepção, fica clara a missão da escola de promover o convívio entre pessoas e também a preservação do meio ambiente.

Depois de todos mostrarem seus modelos, pedi que os modelos fossem retirados da mesa e os papéis mantidos. Fizemos, então, uma colagem com recortes de revista que visualizassem os conceitos nos papéis. O objetivo era começar o processo de criação da identidade visual à partir de imagens pré-existentes para evitar o temido "bloqueio de criatividade".

Quando a colagem estava pronta, pedi que fossem acrescentadas palavras-chave que sintetizassem grupos de imagens, atribuindo um significado especial a elas. Essas palavras foram mantidas na mesa, enquanto as fotos foram retiradas.

O jogo engarrafamento de imagens trouxe o desafio de criar formas simples que representassem as palavras-chave geradas anteriormente. As imagens foram geradas individualmente e agrupadas abaixo das palavras-chave, permitindo ver as diferentes maneiras que cada conceito era visualizado pelos participantes.

As imagens geradas nessa fase poderiam já fazer parte da identidade visual final, porém, haviam muitas delas e era preciso fazer uma seleção. Utilizamos o voto ponderado em que cada participante podia colocar três adesivos em formato de círculo colorido nas imagens que julgasse mais fortes.

Os conceitos foram retirados junto com as imagens menos votadas e passamos então à pensar diretamente na logo utilizando a matriz gráfica, um template que criei para perceber os elementos de uma logo: tipografia, contorno, forma, ritmo e textura. Cada um tinha que selecionar primeiro dentre as opções do template e depois fazer um esboço da logo da EPTran. Ideias diferentes foram propostas, porém, apareceu um padrão de círculo, pessoas e setas entre os esboços.

Os esboços foram encaminhados à Secretaria de Comunicação Social, que respondeu com a logo abaixo após algumas semanas.

É uma logo moderna, com linhas econômicas e cores diversas. Eu achei ela bem interessante, porém, sem vínculo algum com os esboços dos participantes da oficina. Isso aconteceu, acredito eu, porque a Secretaria de Comunicação Social não conseguiu enviar um representante para participar da oficina e ficou sem entender direito o que tinha sido construído. Então, após eu e o Sandro explicar direitinho o que tinha acontecido, a secretaria retornou com uma nova versão da logo que contemplou as expectativas.

O conceito fundamental é que o trânsito é feito de pessoas e não de veículos. A escola é representada como um espaço que agrega pessoas de diferentes cores num abraço dinâmico (elipse). As cores são as mesmas do semáforo, porém, há também as cores da sobreposição que representam o que elas tem de comum. Essas pessoas não estão sendo contidas pelo abraço, como nos esboços dos participantes, mas estão emergindo de dentro dele, como se estivessem sendo apoiadas pela escola. Por fim, a tipografia de cantos arredondados assinala um toque leve e humano à organização.

A logo é assinada por Cintya Resse, designer da Secretaria de Comunicação Social da Prefeitura de Curitiba. Ao invés de contrarar uma agência terceirizada como a Prefeitura fazia em gestões passadas, desta vez a identidade visual foi desenvolvida internamente, economizando recursos financeiros.

O Prefeito Gustavo Fruet e a Secretária de Trânsito Luisa Simonelli me agradeceram a participação no projeto, porém, o mérito maior é dos participantes da oficina que conseguiram fazer o árduo trabalho de criação, análise e síntese do primeiro ciclo do projeto. Depois vem o mérito da Cintya que criou em cima do que os participantes tinham criado, analisou similares e sintetizou uma logo profissional. Meu mérito, se é que tenho algum, é de facilitar o processo.

O projeto da logo da EPTran é mais um exemplo de democracia pelo design. Ao invés de dar forma às intenções de um líder político, esse tipo de design é uma oportunidade para políticos, servidores públicos, professores universitários, profissionais liberais e cidadãos se conhecerem melhor e construir algo em conjunto. O resultado desse esforço conjunto é que todos se sentem representados pelo que é criado.

Que identidade visual é um instrumento político, isso todo mundo já sabe. O que fica claro com esse projeto é que a identidade visual pode também ser um instrumento para ampliar a democracia ao invés de substituí-la por uma representação. A logo da EPTran não representa a diversidade, pois ela É a diversidade posta em prática. Isso parece paradoxal, mas é um efeito curioso do alinhamento entre processo e resultado semiótico que todos os participantes contribuíram para acontecer.

Eu estudo esse fenômeno de maneira científica no artigo que publiquei no períodico Building Research & Information. O caso da EPTran é mais uma evidência que sustenta minha teoria sobre a expansividade do espaço de representações.

Comente este post

Este breve jogo de inversão permitiu aos alunos ver que o sentido não estava embutido no desenho, mas na relação do aluno com o desenho. Esse ato de dar sentido ao desenho é o que eu disse que era design, seguindo a definição de Krippendorff. O projeto consiste no ato de desenhar juntamente com o o ato de dar sentido ao desenho, enfim, designar.

Anos mais tarde, conheci a pesquisa de Donald Schön sobre arquitetos desenhando. Ele observou que arquitetos quando estão esboçando um projeto ora estão olhando para o desenho como ele é, ora estão olhando para o desenho como se ele fosse outra coisa ("seeing as and seeing that").

Aperfeiçoei o jogo e transformei numa competição para dois ou mais jogadores. As regras são as seguintes:

• Cada jogador tem sua vez para desenhar uma coisa sem sentido.
• Depois que o desenho fica pronto, os demais jogadores devem atribuir sentidos ao desenho. Para cada sentido atribuído, o desenhista perde um ponto, ou seja, são pontos negativos. O desenhista conta esses pontos nos dedos e decide se um sentido é válido ou não. O sentido deve explicar a imagem como um todo, não apenas uma parte dela. É permitido rotacionar o papel para procurar sentidos.
• Depois que os demais jogadores ficarem sem ideias, o desenhista precisa lembrar de todos os sentidos dados e acrescentar novos que ele estava escondendo em sua mente. Cada sentido lembrado ou criado rende um ponto positivo. Desta vez, quem julga os sentidos são os outros jogadores.
• Quando o desenhista não consegue pensar mais em nada, faz-se a soma das pontuações e chega-se num saldo do desenhista.
• O jogo progride trocando o desenhista e repetindo o mesmo processo para ver quem obtém mais pontos.

O momento mais excitante do jogo é quando alguém faz uma imagem aparecer à partir de rabiscos aparentemente sem sentido.

O jogo serve para duas coisas: 1) compreender a diferença entre design e desenho e 2) treinar a habilidade de dar múltiplos sentidos ao mesmo desenho. Essa habilidade é o que evita logos com sentido obsceno indesejado, daí o nome do jogo. O designer precisa ter a mente poluída para evitar que erros assim aconteçam.

Já utilizei esse jogo em diversas ocasiões. Em cursos de design livre...

... e durante momentos de recreação com amigos e familiares.

Quando se joga em grandes grupos, fica bem mais difícil de lembrar todos os sentidos dados. Mesmo assim é sempre um jogo cativante, fácil de jogar e requer poucos recursos.

Comente este post

Seu criador, Rodrigo Gonzatto, propõe uma evolução das folcsonomias com a inclusão de subtags que descrevem melhor o objeto a que se refere as tags. Reproduzo abaixo meu comentário sobre a proposta. Desabilitarei os comentários neste post, pois estes devem ser feitos no próprio projeto, que é como disse aberto a participação de todos (e licença Creative Commons claro).

Na Computação esse debate é recorrente, mas com outros termos. Para discriminar as coisas, os computadores precisam de categorias explícitas. Porém, eles não são bons em se comunicar conosco porque boa parte das categorias que nós seres humanos usamos para nos orientar, comunicar, interagir são implíticas, dependentes de uma relação tácita com o contexto social.

A categoria animal numa aula de biologia é diferente da categoria animal em futebol, porém, existe uma relação entre elas. Quando a torcida começou a gritar que "Au au au o Edmundo é animal", certamente não estavam se referindo à categoria biológica, porém, estavam referenciando-a. Se não tivessem tido a experiência com a categoria biológica anteriormente, o sentido não seria o mesmo.

É por isso que não se pode precisar o significado de um signo qualquer, pois ele não é único e nem dado. O significado do signo não está nele, nem tampouco num intérprete, mas sim na relação entre eles. O significado está no contexto (social).

Você está tentando resolver o problema da folcsonomia aprimorando sua capacidade de representação do mundo. Isso a computação tentou fazer através do conceito de Ontologia. A proposta é definir as categorias universais mais básicas e abrangentes, capazes de classificar tudo em seu esquema, sem exceções. Claro que isso logo se demonstrou impossível e então, passou-se a criar ontologias por áreas do conhecimento, reduzindo o escopo. A Web Semântica é uma das propostas mais humildes dos estudos ontológicos em Computação.

Mesmo a Web Semântica o pessoal tá percebendo que é meio inviável, não porque as pessoas tenham preguiça de escolher em que categoria classificar os conteúdos da Web, mas porque isso seria extremamente difícil. Em que categoria colocar o Edmundo? Biologia ou Esportes? Parece coerente com o esquema colocar na categoria Esportes, porém, não é somente pela coerência que categorizamos as coisas. Quebramos a coerência justamente para dar sentidos outros.

O máximo que um computador é capaz de fazer num esquema de classificação é a recursividade, enfim, perceber que esta classificação é uma classificação da classificação. O que ele não consegue perceber é que estamos dando um pulo do gato, estamos indo para outro sentido. Estamos fugindo da classificação sem necessariamente cair em outra.

Nem tudo no mundo é classificável! O mundo é maior que nossas categorias. O bebê já nasce sabendo isso, mas o computador não. Claro, ele foi construído por quem não aprendeu (ou não se contentou) com isso.

Os sistemas de classificação que tem tido mais sucesso hoje são aqueles que admitem essa posição humilde e tentam categorizar um conjunto infinito e impreciso de dados, sem o comprometimento de gerar um esquema absoluto.

Um exemplo disso são as folcsonomias que, ao invés de contribuir para a emergência ou manutenção de um esquema, contribuem apenas para expandir horizontalmente o que se sabe sobre o mundo.

Outro exemplo são as bases de senso-comum como a OpenMind do MIT. As pessoas cadastram idéias bem simples do tipo: "um carro serve para andar". "servir é ter utilidade". "andar é ir de um lugar ao outro". Aí o computador cruza estes dados e consegue obter algum significado sobre um novo texto dado. Uma versão parecida com o OpenMind foi feita também para classificar emoções e afetividade: OpenHeart. Dá pra fazer coisas bem legais com isso, pena que não encontrei nenhum link aqui pra mostrar.

Comente este post

Levei num técnico especializado em reparo de hard-disks e descobri um submundo. Na oficina dele, haviam centenas de HDs esperando para serem consertados. Diz ele que o negócio tá crescendo muito porque os fabricantes competem em quantidade e não qualidade, ou seja, vale mais à pena fazer dois HDs meia-boca do que um de qualidade. 

Tudo bem que eles são obrigados a trocar um HD defeituoso na garantia, como é o caso do meu amigo, por um novo, mas a maioria das pessoas não sabe disso e simplesmente joga fora o HD defeituoso. 

Na opinião do técnico, HDs externos como o do meu amigo não são adequados para a mobilidade que os fabricantes propõem, já que não tem resistência alguma a quedas e sacudidas. 

Coincidência ou não, o HD que caiu era igualzinho ao da propaganda abaixo e estava exatamente na mesma posição quando esbarrei. Nunca faça isso, pois a probabilidade de cair quando você usar o teclado do laptop é muito grande.

O técnico me disse que quando as pessoas manipulam um HD interno elas são super cuidadosas, mas quando está num case USB, como no HD externo, elas tratam com o mesmo desleixo da garota propaganda acima. O case parece tão confiável e robusto que você pode até carregar no bolso.

O técnico disse que algumas pessoas nem sabem que dentro do case tem um HD comum, menor e mais delicado. Acham que é só um pendrive grandão...

Quem sabe se o case fosse transparente, as pessoas não tomariam mais cuidado? Fiz um modelo rápido de como ficaria isso no Google Sketchup, juntando modelos prontos criados por usuários. Primeira vez que mexi nesse software. Achei super-fácil, mesmo para quem nunca modelou nada em 3D.

A Western Digital até tem um modelo de HD interno com case transparente, mas é focado no público Geek que supostamente seria curioso para ver as entranhas da máquina funcionando. Para o público leigo, a transparência inspiraria não curiosidade, mas medo. Venderia muito menos, mais duraria muito mais. 

Por outro lado, a transparência física poderia contribuir para uma imagem corporativa de transparência com o consumidor. A Apple conquistou uma legião de adoradores quando lançou os iMacs com case translúcidos multi-coloridos. Johnattan Ive diz que foi numa fábrica de doces para se inspirar no uso da transparência no design. A técnica fez tanto sucesso que foi copiada em diversos produtos eletrônicos e, mais recentemente, produtos de plástico em geral.

Transparência é um poderoso recurso para o design afetivo. Pode causar atração ou repulsão, ensinar ou alienar, diferenciar ou homogeneizar, dependendo do caso. Essa característica ambígua demonstra como a escolha de materiais no Design não é  algo trivial, mas envolve questões psicológicas e comportamentais bem complicadas, mas com grandes perspectivas de retorno.

Comente este post

Por mais que algumas pessoas prefiram comer as partes do pão em separado, casca e miolo se formam e existem em conjunto. Antes de ir pro forno, ambos eram uma só massa; depois, um ajuda a conservar o outro e, quando comidos, seus gostos se misturam. Não dá pra dizer que uma delas é principal porque uma não vive sem a outra.

Analogamente, design e conteúdo se encontram inextrincavelmente entrelaçados, tanto na produção quanto no consumo.

A oposição entre design e conteúdo é recorrente porque justifica e facilita a divisão do trabalho na produção: engenheiros ou jornalistas cuidam do conteúdo, enquanto designers cuidam da forma. Entretanto, isso reduz o campo de atuação de ambos os lados, causando uma cisão entre as áreas, o que acarreta em furos de projeto por falta de integração ou indefinição de aspectos híbridos. Por exemplo: de quem é a responsabilidade pela escolha dos materiais usados no produto? Do designer ou do engenheiro? Engenheiros escolhem com base em critérios como durabilidade ou resistência enquanto designers com base na moda ou nas sensações provocadas pelo material. Quando os lados não se entendem, o produto vira um “Frankenstein”: materiais que não combinam com a forma, identidades gráficas ridículas para o assunto tratado, boas idéias mal implementadas devido a limitações ou desconhecimento da tecnologia.

Os consumidores só percebem essas limitações quando o produto quebra ou falha numa tarefa. Antes disso, o produto é um só. O carro é um carro, mas quando quebra... vira um amontoado de rebimbocas da parafuseta! É aí que os consumidores se conscientizam da existência das partes do produto e começam a pensar se não houve falha no processo de produção.

A análise, ou seja, a separação minuciosa das partes do todo é um recurso útil para a identificação da causa de problemas. Separando design do conteúdo, podemos encontrar falhas pontuais, como erros de ortografia ou materiais escorregadios, mas dificilmente vamos entender falhas globais ou recursos ausentes. As partes são dependentes uma das outras porque são produzidas e consumidas uma em relação às outras, ou seja, em relação ao todo. Por isso, é preciso ir da análise à síntese, onde o todo é reconstituído.

Existe uma máxima no Design, oriunda da teoria da Gestalt, que diz que “o todo é maior do que a soma das partes”. É maior porque o todo inclui as relações entre as partes, que transformam as partes mutuamente (pense como as pessoas mudam depois de uma relação como um casamento). Se queremos captar o todo, precisamos considerar a relação co-constitutiva entre design e conteúdo. A forma também informa, engrenagens podem ser bonitas e o texto é sempre tipográfico. Podemos afirmar, portanto, que conteúdo é design e design é conteúdo.

Comente este post

Como podemos definir um ícone?

A palavra ícone vem do grego eikon, que significa imagem, mas em nosso ramo essa palavra é usada para apontar um tipo específico de imagem. Quando falamos em imagem, é importante entender que a imagem é sempre uma representação de um objeto, embora tratemos a imagem do objeto como se fosse o próprio objeto. Posso apontar para a superfície de um tubo de raios catódicos (um monitor) e dizer: “essa aqui é sua pasta de documentos”, embora não haja pasta alguma ali. O objeto a que estou me referindo, em última análise, é uma área física num disco rígido que pode guardar dados. Uma pasta de papel também serve para guardar dados, logo, a imagem da pasta serve como metáfora para facilitar o entendimento do uso da área do disco rígido. O ícone é, portanto, segundo a Semiótica peirciana, uma imagem que tenha alguma relação de semelhança entre a representação e o objeto que, se for convincente, permite que usemos a representação sem tomar conhecimento do objeto.

Existe alguma diferença ou a função dos pictogramas no mundo real e dos ícones no mundo virtual são as mesmas?

Se tomarmos o virtual como o mundo abstrato da mente humana, incluindo, entre outras, o ciberespaço, ícones só existem no plano virtual. Como objetos reais, não passam de um amontoado de rabiscos ou de pontos luminosos num monitor. O ícone é sempre uma abstração, pois funciona como uma representação de um objeto outro que não a própria representação. O virtual e o ícone já existiam muito antes da Internet, portanto, nesse novo meio, continuam tendo a mesma função.

Falando especificamente da função dos ícones em interfaces digitais, você acredita que o seu objetivo esteja mais ligado à memorização de determinadas tarefas ou a estética gráfica?

Os primeiros ícones surgiram como metáforas para facilitar o entendimento do funcionamento dos sistemas, como no exemplo da pasta. A estratégia deu tão certo que as pessoas se lembravam mais da forma do ícone do que do nome do comando que ele representava. Logo, os ícones se tornaram a cara do software, desempenhando papel fundamental na formação de sua própria identidade. Foi a partir daí que o valor estético dos ícones começou a ser explorado em softwares. Por influência da linguagem visual das interfaces de softwares, as primeiras páginas Web incluíam ícones sem ganho funcional, apenas para parecer que a página era mais “interativa”. Esses ícones não tinham a função de facilitar a memorização nem o aprendizado; seu único objetivo era o ganho estético. Com o ingresso massivo de designers na criação de interfaces, o que parecia inconciliável se tornou indissociável. O Design mostrou que valor estético e valor funcional não precisavam competir entre si.

A eficiência dos ícones depende do nível de familiaridade das pessoas com as representações que se pretende passar?

Não necessariamente. Uma imagem pode ser facilmente lembrada mesmo que não faça referência direta a algum objeto que conhecemos previamente, pois nossa mente é capaz de criar inúmeras associações indiretas. É por esse motivo que uma pintura abstrata pode suscitar algum tipo de sentimento ou idéia. A eficiência do ícone está mais ligada à adequação ao contexto. Se uma interface oferece uma série de ícones abstratos que se diferenciam entre si o suficiente e fazem sentido para o contexto da interface, possivelmente, eles serão eficientes. No Brasil, os ícones usados em fornos microondas fazem referências a objetos concretos (figura de peixe para a programação “assar peixe”), enquanto que na Suécia eles são mais abstratos (duas barras paralelas para a programação “descongelar”).

Hoje, já podemos afirmar que a internet possui uma iconografia particular (por exemplo: utilizamos a imagem de uma casa para indicar a página principal de um site)?

A maioria dos ícones que encontramos com freqüência na Web tem suas origens nos softwares de desktop. A imagem da casa para indicar “home” já era usada antes da Web em apresentações multimídia feitas com o Hypercard, o avô do Director. Entretanto, a transposição deve ser feita com cuidado. Será que o usuário já viu este ícone em algum software? Se viu, será que ele entendeu? Se entendeu, será que ele vai entender se eu colocar nessa aplicação Web? Essas perguntas não podem ser respondidas com base no achismo. Melhor testar com usuários reais.

Por outro lado, o avanço da tecnologia permite que o desenvolvimento de um site possua uma série de novas funcionalidades. Por exemplo: o espaço para comentários vem se tornando uma função muito comum (e o símbolo de um balão tem sido o ícone mais utilizado para representá-lo). Diante disso, quais são as principais etapas a serem consideradas na hora de se criar um novo ícone (escolha de cores, tamanho, tipo de traço etc.)? Caso possível, poderia citar um bom exemplo nesta área?

A primeira etapa ao se criar um novo ícone é não criar um novo ícone. Para quê reinventar a roda? Se o ícone para comentários na maioria dos websites similares ao que você está trabalhando é um balão, então é melhor usar um balão também, a não ser que o objetivo seja confundir ou chamar a atenção para o próprio ícone. O contexto onde estará o ícone é que vai dizer qual será sua função principal: embelezar, agilizar, desorientar ou o que for. É preciso, entretanto, ser consistente na função dos ícones. Ícones agilizadores não devem se misturar a ícones embelezadores, do contrário, ambos perdem força. Isso acontece porque os ícones não são percebidos em separado, mas sim fazendo parte de uma série. O usuário entende a função do ícone comparando-o com os ícones e controles próximos. Por esse motivo é tão importante usar uma mesma linguagem visual (bordas, cores, perspectiva, iluminação) e figurada (objetos, atores) entre todos os ícones de uma interface. Na tela de configurações do sistema operacional BeOS R5.0.1, a inconsistência na linguagem utilizada em alguns elementos chama a atenção.

Qual é a melhor forma de testar a eficácia de um ícone na web?

A melhor forma de testar ícones é observar se eles são relevantes para os usuários. Como disse anteriormente, o usuário pode não entender o significado que o criador do ícone quis transmitir, mas se fizer algum sentido, for agradável ou fácil de memorizar, então ele pode ser considerado eficaz. Para avaliar esses aspectos com maior precisão, só colocando o ícone no contexto onde ele vai ser utilizado, ou seja, num protótipo da interface. Testar o ícone isoladamente através de métodos como o Icon Sorting, no qual o usuário combina livremente o ícone com um rótulo que descreve seu significado, é interessante para explorar diferentes possibilidades de combinação entre texto e imagem, mas não se pode confiar no resultado como uma avaliação real. O ideal é fazer um Icon Sorting antes e depois testar o protótipo da interface em situações reais.

O site GloboEsporte.com é um bom exemplo no uso de ícones, ao utilizar os escudos de times de futebol para indicar as seções específicas de cada um deles. Dentro de um site, quando se nota a necessidade de criar um ícone para que o usuário consiga realizar determinada função?

O caso do GloboEsporte.com é uma situação rara. Não é sempre que se pode contar com ícones facilmente reconhecíveis para cada categoria. O mérito da eficácia desses ícones é muito mais dos clubes que criaram escudos únicos do que da equipe do GloboEsporte.com que aproveitou a oportunidade de utilizar esses escudos como atalhos. Além do valor funcional, estes ícones também servem para aumentar a identificação do site com o torcedor, que vê o escudo do seu time na página principal do site. Entretanto, a maior sacada da equipe do GloboEsporte.com foi perceber que os usuários buscavam informações específicas sobre seus times e se beneficiariam muito de um atalho para essa função. Esse exemplo ilustra várias funções de ícones: atalho, decoração, fetiche e etc.

Quais são as vantagens (economia de espaço da interface, agilização da navegação etc.) e desvantagens (complexidade, poluição visual etc.) no uso de ícones em projetos de sites?

Cada caso é um caso. Um visual colorido proporcionado por uma série de ícones pode ser vantajoso para um website infantil e desvantajoso para um website sobre direito tributário. É claro que podemos fazer uma série de ícones monocromáticos para o website sobre direito, mas será que ainda assim não prejudicará sua imagem de seriedade? A avaliação de prós e contras da utilização de ícones deve, como todo elemento de interface, ser feita dentro do contexto.

Como os ícones podem ajudar a melhorar a usabilidade de um site?

Uma série de ícones bonitinhos pode contribuir para transmitir uma primeira impressão de facilidade de uso, ou seja, contribuir para a usabilidade percebida. Em websites que enfrentam grande concorrência e são utilizadas poucas vezes por seus usuários, a usabilidade percebida é mais importante do que a usabilidade efetiva. Para o usuário, não importa se a conclusão da tarefa vai demorar 1 minutos ou 3 minutos, importa mais que o fluxo da tarefa durante esse tempo seja agradável e sem problemas. É claro que ícones podem contribuir para a usabilidade efetiva, contribuindo para a memorização de atalhos rotineiros, mas isso só se aplica a websites de uso intensivo.

Em alguns sites, é possível reparar que os ícones possuem textos auxiliares que funcionam como legendas para explicar o significado daquele símbolo. Essa solução é aconselhável, ajuda na compreensão ou representa a falta representação de um ícone sobre a mensagem que ele pretende passar?

O rótulo serve para ensinar ao usuário o significado do ícone no contexto onde ele se encontra. Se o contexto por si só já deixa claro para que serve o ícone, o rótulo não é necessário. Quando estou escrevendo um texto e há uma série de ícones representando diferentes alinhamentos de parágrafo, não preciso de rótulos. Existe uma semelhança direta entre o ícone e a apresentação do meu texto. Agora, abaixo da imagem de uma prancheta com um documento em cima é necessário o rótulo do comando pois a semelhança é indireta. A prancheta (clipboard) é onde fica armazenado um trecho de texto pronto para ser “colado” na posição do cursor. Como o índice de uso desse ícone era muito baixo no Office 2003, a Microsoft pretende adicionar o rótulo “colar” abaixo desse ícone na próxima versão do Office.

Comente este post

Uma proposta de análise de infográficos da guerra do iraque [PDF] 256 kb

A explicação de Carolina sobre o pôster foi muito interessante. Ela mostrou como a aplicação das categorias de análise semióticas servem para entender a construção do significado superficial do infográfico (os elementos visuais que o compôem e suas interrelações). Entretanto, fomos além desse trabalho e discutimos um tópico espinhoso: o viés político do infográfico em questão, no caso sobre a invasão do Iraque; adivinha quem estava sendo favorecido?

Semiótica aplicada à infografia [MP3] 15 minutos 2 Mb

O infográfico em questão é de autoria de Renata Chabetai e foi publicado na Revista Época.

Comente este post

Gosto de pensar com a Semiótica, porque ela permite explorar o que outras áreas não se aventuram por falta de evidências concretas. Para mim, processos mentais não pode ser avaliados em sua totalidade apenas por evidências concretas, apenas pela mera análise do comportamento (Psicologia Behaviourista). É preciso admitir e explorar as sutilezas da mente.

Quem já leu The Design of Everyday Things ou qualquer outro texto de Donald Norman sabe como é fascinante a Psicologia Cognitiva aplicada ao design. Para mim, a Semiótica é ainda mais fascinante, porque permite especular ainda mais. A Semiótica defende, por exemplo, o uso do raciocínio abdutivo que, ao contrário do dedutivo, tenta gerar hipóteses a partir da mera observação da situação. Abdução é o nome bonito para o método de "tentativa-e-erro", tão empregado no uso de computadores.

Como já falei anteriormente, a Semiótica é o estudos dos signos, essa unidade conceitual que serve para mediar a relação entre nós e o mundo. Explico nesse podcast como acontece essa relação e que implicações isso tem para a Arquitetura da Informação, por exemplo:

Processo de aquisição de signos [MP3] 7 minutos

Na minha agenda de pesquisa agora além do Perfil Semiótico, tenho esse protocolo de perguntas. Alguns leitores me mandaram email dizendo que pretendem pesquisar essa área também. Se você também estiver interessado, manifeste-se. Quem sabe montamos um grupo de pesquisa virtual?

O artigo que escrevi conta com os slides em powerpoint incluindo o áudio da apresentação que vou fazer no evento citado.

Comente este post

Imaginava que a participação no perfil de terceiridade seria menor porque exigia muito mais dos leitores, mas não tão menor assim. Dos 184 usuários da primeiridade, apenas 14 participaram da terceiridade. Porém, como o perfil semiótico não é um método quantitativo (não depende de números), o teor das participações compensou. Veja o comentário desse leitor explicando porquê preferiu a foto abaixo:

repassa uma interação harmônica entre os ambientes. uma idéia de movimento e de utilização efetiva do ambiente. o terceiro plano está mais como complemento não está tomando a atenção da ação (rio). é mostrado duas formas de navegar uma mais acessível e com mais adrenalina (caiac) e outro mais elegante e sussegado (barco a vela) o ambiente repassa também uma idéia de passeio no caso do barco a vela e de aventura no caso do caiac. agora o engraçado é que o rapaz do caiac tá aproveitando a sombra da árvore pra não se bronzear muito.

Trata-se de uma análise do quadro que vai desde às impressões iniciais até o questionamento da motivação pessoal de um dos personagens, denotando um considerável background em linguagem visual. Assim como esse leitor, muitos outros julgarão o design gráfico do Usabilidoido com o mesmo olho clínico, então preciso caprichar!

O problema desse exemplo é que fica parecendo que para aplicar o perfil de terceiridade, os usuários precisam ter conhecimento de linguagem visual. Este outro comentário prova que não:

Nao sei bem ao certo porque , afinal eu achei que todas me passaram sentimentos semelhantes com exeção dessa daqui debaixo que parece escura, mas essa aqui em especial me prendeu mais os olhos, talvez pelo sentimento de tranquilidade, talvez pelo sentimento de natureza e integração do homem como meio ... ah, sei lah gostei mais dessa .

Comparando os dois comentários, dá pra perceber uma diferença de abordagem que não tem só a ver com o nível de conhecimento de linguagem visual, tem a ver com os estilos cognitivos dos participantes.

O primeiro vai do geral ao particular, analisando cada parte separadamente, uma característica marcante dos independente-de-campo (IC). O segundo prefere comparar as imagens umas com as outras para entender suas características, denotando a tal da dependência-de-campo (DC). É interessante observar como as peças do quebra cabeça vão se encaixando e as teorias vão se confirmando.

Apesar de termos a participação de um DC, a maioria dos participantes denota serem mais IC. Isso implica, por exemplo, em oferecer uma hierarquia de navegação mais aprofundada e com menos opções em cada nível. Infelizmente, o Movable Type ainda não está otimizado para hierarquias de mais de dois níveis, mas vou tentar umas experiências, de repente combinando com a folcsonomia existente.

Note que essa implicação já foge ao escopo do design gráfico, objetivo inicial do perfil semiótico. Estou começando a pensar que o perfil semiótico pode ser útil já na arquitetura da informação de um website, muito antes do design gráfico. Se levarmos em conta que a interação também pode ser emocional, isso faz o maior sentido.

Voltando aos usuários, apesar de compartilharem a abordagem analítica, o interesse varia. Dá até pra perceber um certo padrão entre as duas pinturas mais votadas. Os usuários que escolheram o quadro "Banks of the Seine" dão mais importância aos índices (em verde), já os que escolheram o "Fort Samson, Grandcamp" comentam primeiro os ícones (em amarelo). Como desvantagem da abordagem analítica, os símbolos são pouco citados em ambos (em azul).

Explicando melhor o gráfico, tomemos como exemplo a primeira fileira, que representa o primeiro comentário lá do começo do post. Primeiro o autor repara que existe grande harmonia entre os ambientes que compõem a imagem. Isso é a constatação de um ícone, pois essa harmonia é análoga à harmonia de uma cena parecida com a do quadro. Quando ele fala em movimento, está apenas supondo que os objetos da foto estejam se movimentando, pois a imagem é estática. Se essa impressão de movimento leva a prever uma situação de movimento, então temos um índice. Também são índices as emoções citadas, pois são inferências baseadas na reação que a imagem provoca no observador. Já na última menção, ele se refere ao conceito de "aventura" que a pessoa no caiaque simboliza. Opa, já deu pra ver que a relação entre este signo e a imagem é arbitrária (aventura é um conceito abstrato), então se trata de um símbolo.

Se você está se perguntando para quê tudo isso, veja como essa classificação pode ser útil no design de interfaces. Nesse caso, ela está servindo para perceber padrões de preferências cognitivas. A personalidade de uma pessoa pode definir se ela dá mais atenção para ícones, índices ou símbolos. Por exemplo, se as personas tivessem participado da pesquisa, acho que Pedro Marcusse teria escolhido a figura da esquerda e Ricardo Saknussem, a da direita, ambos seguindo o padrão de análise da maioria.

O resultado do perfil de terceiridade corrobora que predominam os dois tipos de personalidade das personas: INTJ e ISTJ. Poucos leitores participaram da pesquisa, ou seja, a maioria não quiz se expor, característica de Introverted. Uma parte valorizou mais os ícones, ou seja, prioriza fatos observáveis (Sensitive), enquanto outra valorizou os índices, que tratam de efeitos possíveis (iNtuitive). A maioria dos usuários usou a abordagem analítica através de critérios bem definidos (Thinking). Quanto às polaridades Judging-Perceiving não posso inferir nada com esse resultado, mas a outra fase do perfil indica que a maioria dos leitores são planejadores organizados (Judging).

Já que houve correspondência entre as preferências cognitivas dessa etapa e as personas criadas, pretendo usar as personas para estar constantemente avaliando as idéias que forem surgindo enquanto faço o design gráfico deste blog. Algo como "será que o Ricardo vai gostar disso? E o Pedro?" Dessa forma, elas servirão como uma síntese de todo esse conhecimentos abstrato levantado pelo perfil sobre as preferências perceptuais, emocionais e cognitivas do público-alvo. Veremos no que vai dar.

Comente este post

Todas essas preferências são determinadas pela personalidade da pessoa. Quando finalizar o perfil semiótico, terei dados suficientes para entender quais são as características da personalidade de meus leitores que tem impacto na forma como eles interagem com este blog. Só com essas duas primeiras etapas, já tenho alguns modelos esboçados que espero confirmar nessa última etapa. Já tenho evidências para acreditar que a maioria dos leitores são pessoas que trabalham muito e sonham com um futuro melhor, sendo cautelosos e conservadores. Pelo menos uma das fotos abaixo deve agradar vocês.

Nessa etapa, quero entender como vocês interpretam imagens e quais suas preferências nesse sentido. Analisem aspectos objetivos e subjetivos, desde que naturalmente.

Para responder a pesquisa, observe bem as 4 pinturas de Seurat e escolha a que representa melhor o que você espera do novo design gráfico do Usabilidoido. Depois escreva detalhadamente o que mais lhe chamou atenção na pintura e por que. Tente escrever no estilo "fluxo de pensamento", ou seja, o mais rápido possível sem pensar na forma e sim na essência.

Pesquisa encerrada dia 24/08/05. Veja o resultado.

As pinturas foram escolhidas por mim com base nas preferências apontadas nas duas últimas etapas do perfil:

Se você acha que não escolhi bem, por favor, me aponte outras obras de Seurat mais apropriadas para atender tais expectativas ou deixe um comentário. Fazemos qualquer negócio!

Comente este post

Ao contrário do que imaginava, a quantidade de usuários que marcou que gostaria de sentir uma emoção "intensamente" foram poucos. No geral, a maioria marcou que gostaria de sentir as emoções propostas "de leve". Claro que ninguém vai esperar a mesma experiência de um filme para a leitura de um blog, mas o blog é um dos tipos de websites que mais criam vínculos emocionais com seus leitores porque reflete a personalidade do blogueiro, com a qual os leitores se identificam.

Isso significa que, embora eu esteja fazendo esse perfil semiótico, ainda vai ser possível perceber minha personalidade no produto final.

Para escolher as fotos do perfil de secundidade, vale lembrar que recorri aos amigos que estavam online no MSN. Mostrei as fotos que foram escolhidas no perfil de primeiridade e perguntei que emoções o amigo sentia ao ver a foto. Uns sentiam uma emoção, outro sentia outra, mas não foi difícil perceber um certo padrão nas respostas.

Fiz mais algumas pesquisas no Stock Exchange e encontrei algumas fotos que representavam aquela emoção para mim. Dessa vez, o tema lago faria apenas o fundo para um personagem manifestando a emoção pretendida.

No infográfico abaixo, estão relacionadas que fotos de secundidade surgiram a partir de quais fotos de primeiridade, bem como a vontade que a média de vocês tem em sentí-las (quanto mais violeta, mais vontade). Como todas as emoções partiram de fotos que já haviam sido escolhidas anteriormente, a escala não permitia que o usuário marcasse que não queria sentir tal emoção, pois isso seria contraditório.

"de leve" vale 1 ponto, "forte" vale 2 pontos e "intensamente" vale três.

Como na apresentação do questionário não dei nenhuma dica de qual emoção queria transmitir com a foto, não posso agora usar o nome da emoção no lugar da foto, pois isso refletiria apenas a minha escolha pessoal. O que quero dizer é que a foto intitulada "melancolia" provavelmente não tem exatamente o mesmo significado pra você, mas pelo menos é parecido.

Por esse motivo, depois que encerrei a pesquisa, voltei aos meus amigos nos mensageiros instantâneos e perguntei que emoções sentiam em cada foto. As diferenças de interpretação foram maiores ainda do que nas fotos de primeiridade. As fotos que foram ambíguas demais (múltiplos sentidos distintos) serão desconsideradas do resultado porque estou trabalhando com a média, ou seja a preferência da maioria.

Por exemplo, o menino da foto "prazer" parece estar se afogando para alguns de vocês e apenas se divertindo para outros.

Ainda estou digerindo os resultados e ainda não sei bem como vou atender as expectativas emocionais de vocês. Só sei que não poderei instigar todas as emoções ao mesmo tempo, então vou focar nas emoções que tiveram maior aceitação:

• serenidade, tranquilidade, relaxamento
• sinceridade
• prazer, liberdade

Um blog que me transmite as quatro primeiras emoções é o Functioning Form , especialmente por causa da combinação de cores amena:

Um blog que me dá prazer de ler só pelo design gráfico é o o Mezzoblue, especialmente pela combinação de cores contrastante e a simetria quase obsessiva:

Liberdade eu sinto no site da Coudal Partners, que embora tenha muito conteúdo na primeira página, posso ler tranquilamente uma coluna sem que nenhum elemento na outra coluna me perturbe. A tipografia e o espaço em branco é de arrasar, parece que estou lendo uma revista, não um website.

Talvez vocês não sintam os mesmos sentimentos que eu ao acessar essas referências, mas isso é porque nossas personalidades são diferentes. É por isso que não posso parar por aqui. No Perfil Semiótico de Terceiridade tentarei entender um pouquinho da personalidade do leitor. Prepare o divã!

Comente este post

Fiquei olhando pras fotos que vocês escolheram na primeiridade e fiquei pensando como abordar a secundidade...que relações de causa e efeito poderiam ser associadas?

Quando não consigo achar a solução para um problema diretamente, costumo aumentar a quantidade de informação sobre o que já sei, para que descobrir padrões entre as informações ou detalhes particulares que ainda não havia percebido. Nesse caso, comecei a relacionar outros binômios ao binômio claro/escuro, um dos que deu melhor resultado no teste de primeiridade:

• explícito/implícito
• clareza/obscuro
• sinceridade/mistério
• alegria/tristeza
• extroversão/introspecção

Opa! Percebe uma semelhança entre os dois últimos binômios? Não são mais qualidades que podem ser atribuídas a uma coisa, mas sim emoções que a coisa causa no observador. Tá aí uma relação de causa e efeito muito útil para o designer gráfico!

Como estou entrando ainda mais em terreno subjetivo decidi envolver usuários antes de elaborar o presente teste, porque a subjetividade é ainda mais particular de cada um do que a objetividade. Mostrei as fotos escolhidas no perfil de primeiridade para alguns amigos no MSN e perguntei que emoções eles sentiam. Algumas pessoas nem conseguiram sentir emoções, outras deram uma lista que incluia emoções contraditórias como, por exemplo, "relaxamento" e "receio" ao mesmo tempo.

Não vou listar todas as emoções que me disseram agora porque vai estragar o resultado do teste. No próximo post, eu passo a lista. O fato é que usei essa lista para buscar fotos que expressassem as emoções que poderiam ser provocadas pelo design do Usabilidoido. Emoções como "tédio", "pena" e "marasmo" foram rejeitadas por motivos óbvios.

Antes de responder o Perfil Semiótico de Secundidade do Usabilidoido, peço que feche todos os programas abertos, desligue a música de fundo e elimine toda distração possível. Se quiser abrir em fullscreen essa página pressione F11 no teclado. O fullscreen ajuda a transmitir mensagens emocionais.

Escolhi transformar em preto-e-branco todas as fotos em primeiro lugar para oferecer consistência entre a série de fotos, que quando coloridas apresentavam variações muito grandes. Em segundo lugar, queria evitar que as próprias cores afetassem o resultado. Como já comentei anteriormente, cada cor tem um determinado efeito emocional que é determinado pela cultura onde se manifesta. Uma determinada combinação de cores pode mudar completamente o efeito emocional de uma cena, compare:

Como nesse caso, o importante é a expressão corporal das pessoas e não a composição de cores da cena, melhor ficar no p&b mesmo. Acho que é por esse mesmo motivo que os fotógrafos profissionais às vezes preferem tirar fotos em p&b mesmo tendo máquinas capazes de captar cores com precisão.

Comente este post

Segue a explicação para a escolha das fotos, minhas intenções e o que descobri com o resultado:

Poder/Revelação

Não sei explicar exatamente o que eu queria com esse binômio. Escolhi ele por causa da temática ser exatamente oposta em cada uma dela. O homem "segurando" o Sol parece poderoso, como se ele tivesse adquirido tal poder por mérito próprio. Os dois homens sentados no pier, ao contrário, parecem estar recebendo uma iluminação divina, uma inspiração e poder que não vem deles mesmos, vem do céu. Sim, eu sei que a foto está pequena demais para perceber os homenzinhos, mas acho que isso não chega a mudar o sentido, ou chega?

Como pode ver, o sentido do binômio está longe de se localizar na primeridade das coisas. Está muito mais para a terceiridade, porque envolve conceitos e relacionamentos bastante complexos.

Isso é pra vocês verem como é difícil lidar com a subjetividade. Mesmo tentando criar um método objetivo, ainda assim cometi um deslize por causa de minha própria subjetividade.

De qualquer forma, ainda assim podemos relacionar as fotos acima à questão da tensão no design gráfico. A tensão dos elementos do design gráfico é um conceito inspirado na física, onde temos forças agindo sobre corpos. Na dinâmica da percepção visual, aconteceria algo similar, mas haveria uma tendência natural a buscar o equilíbrio das forças. Se vemos um círculo vermelho no canto de uma área, tentamos equilibrar a força que ele emite relacionando-o com a borda da área e outros elementos adjacentes que possam emitir uma força de igual intensidade, mas de sentido contrário.

Quem se interessar pelo assunto, encontrei no Google uma excelente apostila sobre Teoria da Forma, cujo capítulo 3 explica como a tensão é importante para a composição de peças gráficas.

A primeira foto do binômio parece mais dramática porque, além da temática ser inusitada, as forças estão em grande tensão. É difícil explicar em palavras porque existem tantas forças agindo numa foto como essa, que um artigo inteiro não seria suficiente para descrevê-las. Além disso, as forças não agem isoladamente. Elas formam uma espécie de rede de interações, muito difícil de ser dissecada. Como minha especialidade não é design gráfico, deixo pra leitores mais qualificados explicarem o fenômeno.

Resultado

Apesar do binômio ter sido vagamente escolhido, levarei em conta a questão da tensão. 59% dos leitores preferiram a foto "revelação", enquanto que 29% preferem a foto "poder". Por esse motivo, não esperem grandes contrastes como no layout "Mondrian" atual e no fantástico And all that Malarkey. Abra esse último link no Internet Explorer (uma versão simplificada) para sentir a diferença.

Modesto/Extravagante

Nesse binômio, eu queria saber se vocês preferem uma linha minimalista espartana ou cheia de pompa e decoração. Gosto do minimalismo porque ele busca obssesivamente encontrar a essência das coisas. Fiquei desconcertado quando entrei pela primeira vez no blog de Garret Dimon:

É isso e mais nada. Não há outras colunas, não tem logomarca, não tem menu de navegação, não tem ferramenta de busca, não tem seletor de estilos alternativos, não tem nem propaganda Adsense e experimentos em Ajax. Se a essência de um blog é permitir a leitura de seus posts mais recentes, esse blog o faz da melhor forma possível para seu conteúdo.

Porém, minimalismo tem limite. Já vi muitos designers (eu incluso) reduzirem tanto as dicas visuais e textos explicativos de seus elementos de interface que eles não são reconhecidos pelos usuários da forma como era pra ser. No começo deste blog, coloquei no topo da coluna lateral, o seguinte formulário:

Em quatro palavras, explico qual o conteúdo da newsletter e ainda uso a técnica de persuasão de colocar palavras na boca do usuário. Pouca gente se inscreveu. Pior, muita gente pensava que isso era uma caixa de busca e digitava termos ali. Nessa época, a caixa de busca estava no final da página. Mesmo trazendo a caixa de busca para cima no layout "Mondrian", as pessoas continuavam digitando termos de busca. Só parou quando mudei para o seguinte formulário:

Newsletter Semanal

cadastrar descadastrar

Ficou a lição: "os usuários não lêem textos explicativos acima de formulários a não ser que pareçam com rótulos de opções (como "cadastrar" no exemplo acima) e também não se importam muito com o rótulo dos botões. Para eles é tudo botão de enviar".

Outro risco do minimalismo é criar interfaces desinteressantes. Ao contrário do blog do Garret Dimon que atrai a atenção principalmente pelo contraste de tipos grandes e pequenos, o de Benjamin Adam não conseguiu me prender tanto a atenção:

A única gratificação visual é o símbolo do leão nobre, que serve como logomarca. Se ele tivesse trabalhado com um pouco mais de contraste ao longo de todo o layout (seja de cor, alinhamento ou tipografia), poderia ter valorizado mais o conteúdo, que parece bem interessante. Nesse post, ele anuncia o lançamento do hilário "Bloqueador de Tentação", um software que te impede de jogar aquele game que você acabou de comprar no horário de trabalho.

Outro decisão que pode ser feita à partir do binômio humilde/extravagante é quanto à tipografia utilizada. Fontes serifadas no monitor -- cuja resolução média é 72dpi, um terço da impressão mais furreca -- não oferecem boa legibilidade, portanto só são utilizadas para extravagância mesmo.

Resultado

50% dos leitores escolheram a qualidade "modesto" enquanto que 30% escolheram "extravagante", portanto, pode esperar que o redesign será parecido com o Asterisk.

Claro/Escuro

Apesar deu pessoalmente não gostar de combinações escuras, sinto falta delas no monitor. Já que o branco inspira confiança e neutralidade, ele está por toda parte nas interfaces. Isso cansa o olho, não tanto quanto um fundo vermelho, mas cansa porque é a frequência de cor onde os pixels do monitor estão emitindo a maior quantidade de luz. Alguns designers usam não branco, mas um cinza bem clarinho que, em seu contexto, é percebido como branco. Porém, quando se faz isso, as demais cores do layout perdem força:

O amarelo fica com bordas fantasmas e sofre influência do cinza, que o faz parecer verde-limão. O laranja perde contraste e fica todo sem graça. O verde, entretanto, permanece quase o mesmo. Porquê isso? Veja novamente a mesma figura acima, só que convertida para tons de cinza:

O amarelo quase some porque a luminosidade (quantidade de branco) é quase igual à do cinza. Quanto mais diferente for a luminosidade, maior o contraste e menor interação de cor entre a figura e o fundo. Complicado? Só lembre-se de que quando se usa um fundo cinza clarinho, as cores que serão colocadas sobre ele devem ser escuras para não ter problemas.

É por esse motivo que, se vou usar branco, prefiro usar branco mesmo. Acho que o novo layout "Seurat" vai ter bastante branco, ao contrário do layout "Mondrian" atual, que tentou em vão criar um ponto de repouso para o olho.

Resultado

63% dos leitores preferem um design gráfico "claro", enquanto que apenas 19% preferem "escuro". Como disse acima, podem esperar uma boa quantidade de branco ou, pelo menos, tons de amarelo, beje ou azul claro.

Exuberante/Comedido

A natureza representada nas duas fotos se apresenta de forma descontrolada, transbordando vida e contida pela força do homem, que colocou o quebra-ondas no lago. De certa forma, quero saber aqui se vocês preferem formas naturais (orgânicas) ou artificiais (ângulos retos). Bem verdade que as fotos não expressam tão bem essa relação, mas já permite-me ter uma idéia.

Esse binômio também funciona como uma espécie de confirmação do binômio Modesto/Extravagante. Apesar de serem conceitos distintos, a exuberância pode estar relacionada ao extravagante assim como a modéstia pode estar relacionada à comedição.

Resultado

Se o resultado foi ligeiramente a favor da exuberância (46% contra 34%), então terei a difícil tarefa de fazer algo modesto com um pouco de luxo. Talvez algo como as mulheres humildes de nosso país que, mesmo não tendo tempo nem recursos para cuidar de sua beleza pessoal, ainda assim exibem uma beleza singela e natural. Difícil traduzir isso em design gráfico, hein? Alguém tem algum exemplo?

Concentrado/Disperso

Confesso que esse binômio ficou bem vago. Os peixes não estão tão concentrados assim nem os patos estão tão dispersos assim...

Queria saber se vocês preferem uma página cheia de áreas de respiro, espaços em branco para não precisar de técnicas de destaque, como o contraste elevado. Numa página cheia de elementos gráficos, o único jeito de fazer um elemento se sobresair é aplicar uma cor bem contrastante com o fundo, por isso gostei tanto da foto do peixe laranja.

Porém, seria melhor se eu tivesse usado no lugar essa foto com flamingos, o conceito "concentrado" estaria mais claro:

Resultado

Acho que não vou considerar muito o resultado desse binômio, porque não foi muito bem elaborado. No caso da aplicação do Perfil Semiótico de Primeiridade num grupo de foco, binômios mal-formulados geram discussões tão ou mais produtivas do que os binômios bem escolhidos, mas no formato questionário online, não repercute da mesma forma.

Os leitores escolheram por 57 a 25% a foto do peixe destacado ("concentrado").

Conclusão

Pelo visto, o Perfil Semiótico de Primeiridade não é apropriado para questionários online, como fiz aqui. Apesar de ter abrangido muitos leitores de uma vez só, a discussão que incitou não foi tão produtiva quanto àquela do grupo de foco que descrevi. O comentário mais parecido com o que tivemos nas discussões presenciais foi o do Valério Carvalho.

Isso não significa que não serviu pra nada e que estou desanimado. Pelo contrário, já estou bolando o Perfil Semiótico de Secundidade. Embora esse formato não seja o mais indicado, é o único que disponho e vou aproveitar ao máximo. Não tenho condições de dedicar tempo e dinheiro para reunir um grupo de foco presencial com leitores de todo o Brasil e também de Portugal, então vamos nessa que é bom à beça!

Mais sobre o assunto

Depois de publicar o último post, o Felipe Memória me mandou um email dando a dica do The Glass Wall, um paper que documenta o processo de redesign da BBC, realizado em 2002. Uma das técnicas utilizadas é parecida com o Perfil Semiótico de Primeiridade porque utilizou uma escala de classificação bipolar para os usuários classificarem a homepage da BBC existente e as homepages concorrentes. Os usuários marcavam um ponto numa escala de um a 5 que ia de "estimulante" até "insosso", "profissional" até "amador", "leve" até "pesado" e assim por diante.

A principal diferença para o Perfil Semiótico de Primeiridade é que a maioria desses binômios não estão na primeiridade. Lembre-se de que na primeiridade estão as qualidades mais básicas das coisas. O binômio claro/escuro é muito mais superficial do que amistoso/impessoal, por exemplo.

Vale à pena a leitura de todo o paper, que documenta um projeto de design centrado no usuário de vanguarda. Não é à toa que considero a home da BBC que eles bolaram como uma das mais bem resolvidas que já vi em portais.

Comente este post

Um dos diferenciais dessa editora é o design gráfico dos livros e revistas que publica. Não precisa nem dizer que os usuários esperam que o design gráfico do site seja de alto nível, mas o que eles classificarão como sendo de alto nível? Como sabemos a apreciação estética é bastante subjetiva, porém existem certos padrões observados em pessoas de perfis similares. Por exemplo, se eu gosto de combinações de tons escuros e você vive num ambiente muito parecido com o meu, provavelmente você também gostará de uma paisagem dark. O objetivo da técnica foi justamente captar alguns desses padrões de apreciação estética e aproveitar que estávamos em grupo para discutí-los.

O método consiste em apresentar aos usuários uma série de pares de fotos, cada uma exprimindo duas qualidades opostas que podem ser atribuídas ao design gráfico. Por exemplo, para o binômio claro/escuro haviam duas fotos, uma cena clara e outra escura. Dentro do grupo de foco, cada participante escolhia uma das fotos do par e discutia com os demais, defendendo seu ponto de vista. As fotos escolhidas por decisão unânime representam as expectativas latentes desse grupo de usuários.

Essa técnica não precisa necessariamente ser realizada num grupo de foco. Pode ser feita com cada usuário individualmente também. A vantagem de ter um grupo é a riqueza das discussões. As fotos permitem que os usuários tenham parâmetros para discutir design gráfico mesmo sem ter nunca estudado seus princípios básicos. Quem já pediu a avaliação de um layout por um leigo no assunto sabe o quanto isso é valioso. Ainda não fiz o teste, mas acredito que possa servir para lidar com aqueles clientes que não sabem explicar o que desejam do design gráfico, mas que serão os primeiros a encontrar defeitos nos layouts depois que ficarem prontos.

Vou testar com vocês, leitores fiéis, se essa técnica pode ser aplicada online, na forma de questionário e espaço para discussão. O resultado influenciará o re-design do Usabilidoido, postergado desde o início do ano.

Para fazer o questionário, perguntei a mim mesmo quais seriam as qualidades que gostaria que o novo design gráfico tivesse. Decidi por essas:

• quadrado
• regular
• frio
• explícito
• simples
• monocromático

Porém, ao mesmo tempo fiquei com as seguintes dúvidas:

• vazio ou cheio?
• claro ou escuro?
• sujo ou limpo?
• ousado ou conservador?
• pequeno ou grande?
• disperso ou concentrado?
• triste ou alegre?
• extravagante ou humilde?

Para escolher as fotos, dei uma olhada em algumas obras de Seurat, o artista da vez. Uma tema recorrente em sua obra é a figura bucólica do lago. Às vezes inspira frieza e esterilidade, às vezes alegria e felicidade. Fiz uma busca no Stock Exchange (excelente comunidade de compartilhamento de fotos) pela palavra lake e comecei a salvar as fotos que tinham a propriedade de exprimir uma qualidade do design gráfico. Fui salvando numa pasta com o nome de arquivo sendo a qualidade que me chamou a atenção. Depois de algumas horas de concentração intensa, consegui formar os binômios abaixo.

Em cada linha, escolha uma das duas fotos, da direita ou da esquerda, que exprima aquilo que você espera do novo design gráfico do Usabilidoido. Responda o mais rápido que puder e tente não pensar a razão porque eu escolhi uma foto em particular. Siga suas preferência pessoais. Depois explico.

Pesquisa encerrada dia 9/08/05. Veja o resultado.

Pesquisa encerrada dia 9/08/05. Veja o resultado.

Pedi para responder rápido para que que a decisão seja feita entre as características mais elementares das imagens, ou seja, aquelas que fazem parte da categoria de primeiridade da semiótica. Segundo a semiótica, a percepção dos objetos do mundo real (objetivação) começa na primeiridade (qualidades superficiais), passa pela secundidade (relações de causa e efeito) e termina na terceiridade (formação de um conceito).

Parece complicado de entender, mas não é. Pense num relacionamento amoroso, por exemplo. Primeiro você é atraído pelas qualidades observáveis da pessoa: cor de pele, tipo de cabelo, formato do rosto, cor dos olhos e etc. Com o tempo, você começa a se relacionar com essa pessoa e percebe suas reações diante das coisas que acontecem. Se tudo der certo, você começará a entender porque essa pessoa reage dessa forma. Se isso nunca acontecer, você pode dizer que o relacionamento não chegou à terceiridade.

Essas categorias podem ser aplicadas à praticamente qualquer coisa. Não é à toa que elas são chamadas de Categorias Universais de Peirce, o filósofo que as criou.

Se você pensar em mais alguns exemplos, vai perceber que, na medida em que sobe o nível de categoria, a complexidade aumenta de forma exorbitante. É muito mais fácil falar sobre a primeiridade das coisas do que da terceiridade. No caso do método aqui proposto, seria muito difícil descobrir as expectativas de terceiridade dos usuários com relação ao design gráfico, ainda mais que se trata de um assunto subjetivo. Um mero binômio de qualidades não pode dar conta da complexidade de uma escolha de secundidade ou terceiridade. É por esse motivo que chamo essa técnica de Perfil Semiótico de Primeiridade.

Bem, agora que foi apresentada a técnica, gostaria de receber sugestões sobre o método e comentários sobre as expectativas em relação ao novo design gráfico do Usabilidoido. Se a discussão passar da primeiridade, quem sabe me animo a pesquisar mais sobre o assunto e compartilhar com vocês.

Comente este post

No Brasil, um dos grandes responsáveis pela popularização do conceito é o designer Marcos Albuquerque, que dirigiu os antigos sites da Farmaervas, MHK e Surya Henna, este último feito já pela sua agência, a Lifemotion. Hoje, seus clientes estão descobrindo o Flash como alternativa mais barata para o vídeo-empresa. Segundo ele, uma animação pode custar 10 vezes menos que uma produção em vídeo e ter impacto muito maior, se for bem feita.

Fiz uma breve entrevista sobre o assunto com ele:

Flash de alto-impacto [MP3] 10'

Bons exemplos de Flash de alto-impacto hoje na Web:

• Ipanema Essences (Lifemotion)
• Havaianas
• CPM 22
• Mais exemplos

Pontos principais

• No ramo de Flash de alto impacto, o que que mudou desde o ano 2000, quando surgiu, até os dias de hoje? 30"
• Estamos ainda aprendendo a fazer Flash mais comercial, mais pé-no-chão
• No entanto, é importante sonhar quando se te um objetivo definido, saber onde chegar 1' 30"
• Alto-impacto agrega valor, mexe com a emoção das pessoas e gera repercursão 1' 45"
• Quais são as características do alto impacto? 2' 25"
• Seu objetivo é impactar o público emocionalmente
• É difícil fazer isso, é preciso ter muitas referências: gibis, jogos, filmes 3 '
• O mais importante, entretanto, é pensar no público-alvo 3' 20"
• Como é o processo criativo de um trabalho de alto-impacto? 4'
• A primeira coisa é fazer uma boa reunião de briefing, saber o que o cliente quer. O objetivo é a parte mais importante.
• Se você vai fazer uma animação mecânica, vai lá, veja como é o mundo dessas pessoas 5' 10"
• Você produz o som ou a animação antes ou depois? 6' 50"
• Depende do caso. Som antes dá um resultado com mais qualidade, porém, dá mais trabalho, leva mais tempo
• Sincronizar uma animação existente com um som, é mais fácil, só precisa adaptar um pouquinho. Se você já começa sabendo mais ou menos que estilo musical vai usar, melhor ainda 7' 30"
• Que tipo de tática funciona melhor para emocionar as pessoas? 8' 15"
• Sem dúvida é o som integrado com a imagem. O grande barato é ter o tempo certo para cada coisa.
• Como você descobre esse timing? 9'
• Existem um técnica que é uma só: é você assistir muito filme, muita animação e etc.
• É claro que é preciso escapar dos clichês 9' 30"
• A melhor forma de lidar com isso é fazer coisas simples 9' 55"

Comente este post

Na entrevista, consegui pescar algumas dicas valiosas sobre o papel do som não só nos games, mas também na Web.

Realismo nos gráficos, fantasia no som [MP3] 4

Notas

• qual o papel do som para emocionar o usuário?
• mesmo peso que o roteiro e a imagem 15"
• som destruir ou salvar a imagem 41"
• como criar emoção de som com interação 1'
• inovação dos gráficos é o realismo, portanto resta à trilha explorar o lado fantástico 1' 26"
• e na Web, o som pode aumentar a emoção? 2'
• limitações tecnólogias impedem o avanço
• poucas pessoas navegam com a caixa de som ligada 2' 30"
• é necessário mudar uma cultura de tecnologia e de comportamento 2' 45"
• a Web ainda não está madura o suficiente para saber o que podemos fazer com ela 3'
• a Internet tem que descobrir como oferecer algo mais que a TV e o rádio não oferecem 3' 15"
• som pode ser interativo? 3' 30"
• já existem jogos em que o som dá pistas para chegar ao destino
• o som já é interativo; quando ouvimos um som de mensagem de erro, reagimos de acordo 3' 50"

Minha opinião sobre o papel do som na emoção já foi deixada neste post, mas talvez não tenha sido muito claro. Para mim, o som é melhor meio para transmitir ou provocar emoções. Edite um filme e desorganize completamente o roteiro, retire as imagens. Ainda assim o som pode causar emoção. Tire o som de uma cena crucial e o filme todo perde a graça. Quer emocionar? Use som!

Comente este post

Felizmente, a maioria dos designers sabe disso e hoje temos a categoria como exemplo de inovação, em todo o mundo. O objetivo é alcançado quando o designer consegue criar a mesma atmosfera do filme, invocando seus símbolos emocionais. Já falei da importância do som nesse sentido, mas não ressaltei que a própria interação com a interface também pode ser emocional.

Na época em que escrevi esse post, nem acreditava que isso fosse possível. Porém, um hotsite coreano me convenceu do contrário: The Uninvited.

Sugiro que antes de prosseguir na leitura desse post, você reserve pelo menos 10 minutos do seu tempo para acessar com calma, senão vai perder a graça. Desligue a mente analítica e entre no clima. Você vai se sentir dentro da história quando forem ativados símbolos do seu próprio passado. Depois da fruição, volte aqui e note as sutilezas da interação que permitiram isso.

Já acessou?

Se estiver mentindo, quem sai perdendo é você.

Já disse! Clique aqui seu estúpido!

Caso você NÃO tenha acessado o site, deve estar com raiva e a causa disso é um problema intencional de interação. Caso você tenha de verdade mesmo, jurando de pé juntinho, acessado o site, deve estar sentindo várias emoções ao mesmo tempo... e caso você seja o robot do Google... ah, esqueça...

Vejamos como a interação contribui para emocionar:

Na entrada do site, sem nem abrir qualquer popup, já fica claro a idéia central do filme: "todos tem verdades que não gostariam de pensar que são verdaderias". Não preciso nem dizer, mas a imagem sugere que o homem está exigindo que a mulher diga a verdade.

O usuário pode escolher entre saber a verdade (truth) ou os fatos (fact). Que pergunta besta, quem é que não quer saber a verdade? Quem já sabe! Trata-se de uma forma muito perspicaz de segmentar o site entre os que já assistiram o filme e os que não e também entre os que querem ser entretidos e aqueles que estão atrás de uma informação específica. Truth leva a uma série de animações interativas e Fact leva a uma seção com textos, dados e fotos.

É claro que a experimentação toda de que falo, está na seção Truth. Trata-se de várias sequências de animações que usam muito bem texto animado, som de fundo e imagens. De vez em quando, a sequência é interrompida por uma imagem interativa (se é que se pode chamar assim). Nesta, o movimento do mouse faz sugir perguntas que são feitas à personagem, como balas de uma metralhadora. O som acompanha. Só há como progredir se o usuário ver suficientes perguntas.

Numa outra seção, o tema é claustrofobia. A cada clique, surge um novo popup, cada vez menor até que... bem, você viu o site. Não é à toa que escolheram o popup para tal conotação negativa. Morte aos hotsites em popup!

Você está diante de um gravador de som e há fitas espalhadas pela tela. A tela está parada. Não é preciso dizer que você deve colocar as fitas no gravador, essa á reação lógica. As fitas são movidas pelo arrastar-e-soltar, mas caso você solte antes de chegar no gravador, a fita permanece ali. Como a área de clique é enorme, você pode arrastá-la muito facilmente. Ao se aproximar do gravador, elas são puxadas automaticamente. Estes designers sabiam que arrastar-e-soltar é um modo de interação que exige muita destreza do usuário e deram toda a ajuda necessária. O ganho lúdico compensa o esforço extra.

A magia só se quebra quando os designer sentem a necessidade de dizer como o usuário pode interagir. Eles sabiam que no caso dessa porta, não estava clara sua clicabilidade. Já que a experiência conta com várias outras ocasiões onde o usuário pode clicar em coisas incomuns, porque não contar com esse conhecimento prévio? Poderiam ter usado outras dicas visuais...

Outra coisa que me incomodou muito foi o menu, localizado no canto inferior esquerdo. Apesar de se contrair durante as animações interativas, preferia se ele tivesse alguns dos elementos subjetivos que permeiam o site.

Quem gostou desse hotsite, vale à pena conferir outra produção dos coreanos, The Scandal. O clássico Donnie Darko é mais chato, mas explora bem o formato. No Brasil, temos o exemplo da A Agência Click, com o Projeto 404. Alguém mais tem bons exemplos de sites que exploram a interação emocional?

Comente este post

E não são apenas as transformações tecnológicas que forçam a lapidação constante das heurísticas, mas também a evolução do próprio conhecimento humano, turbinado pela Web.

Ontem encontrei uma pérola fazendo uma busca no Google Scholar: heurísticas para análise de interface com base na semiótica peirciana. Como já havia dito, a semiótica traz uma postura diferente para lidar com o design de interface e já que heurísticas não passam de pontos de vistas, sua aplicação é muito bem-vinda nesse contexto.

A monografia de Jennifer Ferreira intitulada Semiotic Explorations in User Interface Design (2005) inclui um apêndice onde a autora propõe as heurísticas semióticas:

Objetos diferentes, representamens diferentes

Cada signo deve parecer diferente do outro, para que não sejam confundidos.

Distância segura entre representamens com diferentes objetos

Quando signos são posicionados muito perto, o usuário pode sem querer acionar o errado.

Visibilidade dos representamens

O representamen deve poder ser reconhecido pelo usuário e não deve estar encoberto ou escondido caso seja relevante para a execução da tarefa.

Liberdade para a atenção do usuário

Não chame a atenção indiscriminadamente para um representamen. Se ele não for necessário, nem use.

Aderir às convenções, se existirem

Os usuários esperam que representamens em diferentes aplicações e contextos se refiram ao mesmo objeto e tenham o mesmo comportamento.

Aderir à realidade, se existir

Se o usuário reconhece que um signo é a representação de um objeto do mundo real, ele espera que essa representação seja fiel.

Acesso o mais direto possível à informação

Quando a interface requer que o usuário passe por uma série de etapas para atingir seu objetivo, há risco dele esquecer o caminho percorrido.

Como se trata de um apêndice, a autora deixa claro que ainda é preciso trabalhar mais em cima do assunto e a lista não deve ser considerada exaustiva.

Se você prestar atenção, vai perceber algumas heurísticas tem em comum a preocupação com o significado e a relevância dos signos. Apesar de algumas delas tratarem do mesmo objeto, é uma abordagem sensivelmente diferente das famosas 10 heurísticas de Nielsen:

• Visibilidade do estado do sistema
• Correspondência entre o sistema e o mundo real
• Controle do usuário e liberdade
• Consistência e padrões
• Prevenção de erros
• Reconhecimento ao invés de lembrar
• Flexibilidade e eficiência de uso
• Design e estética minimalista
• Ajude os usuários a reconhecer, diagnosticar e se recuperar de erros
• Ajuda e documentação

A questão não é se uma lista ou abordagem é melhor do que a outra. A questão é como essa nova abordagem pode ajudar a fazer análises melhores? Continuarei meus estudos sobre semiótica e conto pra vocês depois. Se alguém tiver a oportunidade de testá-las em análises heurísticas com especialistas em usabilidade ou não, compartilhe a experiência. Se você acha que desse mato não sai cachorro, avise os incautos nos comentários.

Comente este post

Não é preciso esperar pelo ciborgue de carne misturada com chips. O que seria de você sem seu celular, seu computador, seu palm, sua câmera digital? Talvez você não tenha todos esses apetrechos, mas o que tem confessam que eles substituem funções de nosso corpo e alteram o funcionamento do sistema, tornando-se indispensáveis.

O tema central era essa transformação, mas a professora abordou diversos outros temas confluentes, como numa autêntica semiose ilimitada.

Um dos que me chamou a atenção foi a alfabetização semiótica. Segundo a professora, para que a Internet se torne popular no Brasil, é preciso antes dotar o povo de conhecimento sobre os signos usados na interface.

Perguntei a professora como seria esse processo de alfabetização, mas a resposta dela não me foi muito satisfatória. Claro que um processo de aprendizagem não pode ser resumido em poucas palavras, mas esperava escutar pelo menos a diferença entre a abordagem tradicional e a abordagem da semiótica para o ensino da informática.

Tanbém perguntei sobre o futuro do computador e dessa vez, pelo contrário, a resposta me fez pensar muito. Como ela disse, tenho que pesquisar mais sobre. Confiram a breve entrevista:

Entrevista com Lúcia Santaella [MP3] 3 minutos

Quem já estudou algo sobre semiótica, já deve ter ouvido falar do nome dela. É autora dos principais livros (e praticamente únicos) sobre semiótica disponíveis em português. Seu tema principal é a aplicação da semiótica na comunicação de massa, fotografia, música, interface e etc. Não li, mas tem esses três no Submarino:

• Semiótica Aplicada
• O Que é Semiótica
• Teoria Geral dos Signos: como as Linguagens Significam as Coisas

Além da entrevista, segue minhas desorganizadas anotações escritas no palm. Serve para ter uma noção dos principais pontos abordados.

Pos-human
- condicao do homem
- o cerbro humo esta crescendo pra fora da cabeca
- simbiose com tecnlogias
- computado e prehistorico
- feix
- velha maquina
- extensao pessoal prolongamento
- computador morre
- com o tenpo vai evoluir - ubiqua
- o que constitui o humano
- critica - o computador desumaniza o ser humano? Se fosse assim, nao usaria a linguaguem
- ser humano nao e o unico ser simbolico, so o homem fala
- eco disse gue a semiotica e a ciencia de mentir

- homem e o mais fragil dos aninais
- o cerebro se desenvolveu por causa da fala
- somos os unicos que tem nocao do tempo e podemos planejar - vantagem evolutiva
- a fala que lhe da consciencia - medo morte
- o hipercortex e maior do quc a fala
- a parte da fala roubou o resto - boca - aparelho fonador sobrepoe-se - diferencial

- a arte serve para preencher a morte. Signos e a vinganca - eternizar sua passagem - a palavra dura mais que marmore
- forcas produtivas = forcas destrutivas. Lutar por eros
- pulsao de morte - tendencia a voltar ao inerte, caos
- inorganico tem tendencia a ordem
- cruzamento entre o organico e o inorganico = pos-humano

- a prineira tecnolxgia ja esta no corpo - fala

- a fotografia mudou do que a gente pensava porque o presente ficou
- para os primitivos, a foto rouba a vida
- a fotografia trouxe o binomio ver e ouvir

- porque a fala nao tem preconceito? A fala tanbe e artificial. O temor das maquinas e por causa paquilo qug pareca desafiar a imagem dx corpo primordial - a imagem do eu depende bo outro.
- a fragilidade da fala e que ela nao pode sem registrada - so na memoria
- a escrita veio preencher a fragilidade e substituir a memoria
- o google e um prolongmmento da memoria
- so lembramos das coisas se estamos perdendo elas - sera que o livro permanece?

- os artistas sao os prineiros a explorar as novas tecnolggias

tudo ao mesmo tempo = oral - escrita - impressa - midias - cibercultura

- como profeessor so podemos transmitir o amor pelo conhecimento, pois nao e transmissivel

- industria cultural e elitista - aqui somos uma cultur hibrida

- o levy e um pastor no pupito porque acha que a tecnolxgia fosse salvar a humanidade
- se a tecaologia prolonga a mente, sera que fica o inconsciente
- o ser humano nao se salva
- conforme o tempo passa o homem so acumula perdas

- cultura das midias - fetiche das midias - massa em cheque - controle remoto - cabo - videocassete - camera
- cibercultura - ' na internet voce salta num segundo de platao a salsicha' umbsrto eco
- o cara constroi a mensagem

perguntas
- sujeito virtual - identidade
- a nocao de idsntidade e dada pelo outro - ja somos fragmentadas - potencial pra isso - atividade ludica - a internet permite brincar - deixa a vontade - a tela permite um fluido de pensamento mais suave - se concentra mais na escrita - perde a presenca -orosto e facinafte por que o olhar do outrx devolve o meu

- so existe educacao pelo exemplo

Comente este post

O que é semiótica? [MP3] 7'

[ Atualização ] A leitora Caroline Esser fez a gentileza de transcrever o áudio acima. Afinal, o que é Semiótica? [PDF]

Livros indicados

Acho que agora vocês entendem porque venho falando desse assunto nos últimos posts. A semiótica está me abrindo a mente para encarar a interface da forma como sempre idealizei: um meio de comunicação. Quase todos os livros e artigos que leio sobre usabilidade e design de interface dão mais ênfase no comportamento e na apresentação dos elementos da interface do que com seu significado. Jakob Nielsen, por exemplo, nunca falou sobre isso no site dele. Se falasse, seria bem assim.

Por enquanto, minha referência principal tem sido o campo acadêmico. Nosso mercado ainda não fala disso porque ainda está naquele estágio primário em que eu estava. Futuramente, a semiótica será respeitada como é nos mercados do cinema, da publicidade e do design gráfico.

Comente este post

Podemos estender essa categorização também para nosso âmbito profissional e classificar o indecifrável mundo dos zero e uns como sagrado e o mundo dos seres analógicos como profano. A partir dessa visão, podemos perceber o tamanho do dilema de projetar a interface que vai fazer a ponte esses dois mundos, tão diferentes. Segundo meu colega da antropologia na UFPR, Jeulliano Pedroso de Lima, a interface entre o sagrado e o profano é onde se dá a manifestação do poder, mas tudo pode acontecer. Ouça a breve entrevista:

A interface entre o sagrado e o profano [MP3] 2'

Sem a interface, toda força de processamento do computador é inútil. Torna-se apenas uma caixa-preta sem entrada ou saída. Mesmo que existam interfaces entre um programa de computador e outro, o meio por onde o sistema justifica sua existência é através da interface com o usuário final.

Assim como a Rainha da Inglaterra não pode cometer gafes durante um ritual de consagração, o sistema não pode dar sinais de fraqueza na interface com o usuário.

Todos os movimentos de execução de um ritual são previamente definidos de forma a maximizar a transmissão de seu significado. Cerimônias como essa duram horas e envolvem a ação coordenada de dezenas de pessoas. Para que não hajam falhas na perfomance, todos são muito bem treinados nos seus papéis de ante-mão.

Se esse exemplo fosse seguido na construção de sistemas, certamente teríamos interfaces mais efetivas. Antes de lançar o produto, teríamos uma sequência de testes e simulações consecutivas, analisando não só a interação, mas também a semiótica.

A Engenharia Semiótica é uma disciplina desenvolvida por pesquisadores da PUC-Rio que visa criar ferramentas para analisar signos de uma interface. Signo é o nome que se dá a união de um representante (o elemento "botão") e seu significado ("algo que pode ser clicado e executar uma ação...") .

Já falei anteriormente sobre como a semiótica pode mudar nosso posicionamento como designers de interface, assumindo-nos como comunicadores. Agora, nos concedo o status de sacerdotes.

Durante o ritual de uso do computador, serão precisamente os símbolos criados por nós que intercederão entre o sistema sagrado e o usuário profano. É exatamente isso que faz um sacerdote, em qualquer religião. O sacerdote, que faz parte do sagrado, é quem executa a perfomance simbólica que é fruida pelos participantes do ritual. Seu objetivo é que os símbolos utilizados tenham um determinado significado para sua platéia. Para aprender a fazer isso, o sacerdote estuda muito e passa por rituais de iniciação e purificação, para reforçar sua fé nos símbolos.

Um sacerdote sem fé, é como um guerreiro sem espada, vide filme O Exorcista. Mas o que é fé? A meu ver, fé seriam conhecimentos tomados como verdadeiros sem provas empíricas. O designer de interface também precisa ter fé na teoria, mesmo que não seja possível comprová-la no início. Com o passar do tempo, sacerdotes sinceros começam a ter visões espirituais e designers de interface também. O conhecimento se instala no indivíduo de tal forma, que modifica toda sua visão de mundo. A experiência comprova a teoria e os dois se tornam médiuns clarividentes. O sacerdote transmite com clareza a mensagem da divindade e o designer de interface, a do sistema.

O segredo do clarividente é que ele sabe exatamente o que sua platéia quer ouvir. Se você faz uma pergunta a um médium e ele te responde algo completamente infundado, você desconfia de sua eficácia. Agora se ele diz algo que tenha um mínimo de coerência com sua realidade, você até faz o esforço de ligar os pontos de uma mensagem cifrada.

O sacerdote pode contar com a habilidade de ler mentes, mesmo que isso não esteja ao seu controle, enquanto que o designer de interface pode contar com a empatia com o usuário, mesmo que não tenha contato direto com eles. Empatia significa "sentir o que o outro sente", ser solidário com as causas do próximo. É a qualidade que mais aprecio num designer de interface.

Já discuti aqui algumas das formas de se fazer isso: incorporando o usuário, realizando testes de usabilidade, fazendo entrevistas, organizando grupos de foco e outros métodos do Design Centrado no Usuário. Tenham fé e vocês também chegarão à verdade.

Comente este post

Seria só uma piada sem graça, se estivesse me referindo apenas aos procedimentos estritos (e às vezes incompreensíveis) que o computador nos obriga a realizar. Alguém se lembra da árdua tarefa de fazer rodar um simples jogo na era do DOS?

1. Editar o Config.sys e habilitar o Emm386.exe
2. O Emm386.exe comeu a memória convencional, agora é preciso liberar memória carregando o driver do CD-Rom na memória estendida
3. Tudo certo com a memória, mas temos problemas com a placa de vídeo. É preciso saber o chipset dela. Será Trident 8800CS ou Trident 8200LX? Pra saber só abrindo a CPU e anotando o código que estaria em um dos chips ao lado de outros tantos códigos parecidos
...

Porque isso é um ritual? Porque trata-se de um procedimento repetitivo em que se manipulam símbolos culturalmente definidos de forma padronizada.

Os engenheiros que criaram esse terreiro digital não imaginavam que tais símbolos seriam tão abstratos para os usuários do PC. "Bah, todo mundo entenderá num golpe de vista que o Emm386.exe é um Extended Memory Manager destinado aos chips Intel 80386," pensaram os esnobes engenheiros.

O fato é que criaram um ambiente tão abstrato que somente os inclinados a linguagens cabalísticas se aventurariam a fazer os despachos.

Ainda sinto nostalgia da época em que ganhei um XT, quando tinha 10 anos. No começo, era tentador o desafio de dominar aquele espaço. Com o tempo, passou a se tornar rotina e quando podia fazer algo da forma mais fácil, eu fazia.

Segundo a teoria dos rituais, quando a natureza transformadora do ritual não é contemplada, ou seja, quando não atualiza a realidade, ele se fossiliza e acaba por desaparecer.

O DOS era antiquado e não tinha flexibilidade que tinha um sistema Unix, por exemplo. Fossilizou. O Unix permanece até hoje em determinados nichos, aos poucos se renovando.

Aliás, em matéria de simbologia, o Unix é muito mais rico. Os comandos são ainda mais abreviados que no DOS, veja:

DOS > Unix
dir > ls
copy > cp
del > rm

Qual é a vantagem de memorizar um comando mais curto e menos direto? É mais mágico no seu contexto.

A semiótica nos ensina que a efetividade de um símbolo depende apenas da convenção. Se ele é aceito pelo grupo social com o significado a que ele foi atribuído, então ele tem sucesso. Isso significa que tanto faz se é "copy" ou "cp", o que importa é se o termo é aceito por todos.

Ambos foram aceitos em seu contexto, porque afinal de contas não havia escolha. Mas, o conjunto de comandos do Unix ainda sobrevive no seu nicho.

O pessoal que curte um frontend em linha de comando sente uma sensação de controle muito forte. Tanto que não desgrudam um segundo do teclado, mesmo se a aplicação oferecer a possibilidade de usar o mouse. "Com o teclado é mais rápido", disse um amigo meu. Parece mais rápido mas não é.

Quando ele usa um editor de texto, um "vi" no jargão deles, tem que apertar diversos atalhos no teclado para movimentar o cursor e realizar tarefas simples como copiar e colar. Só o tempo para encontrar as teclas certas e afinar o acorde já leva muito mais do que simplesmente apontar o mouse. É claro que existe um pequeno lapso entre soltar o teclado e ir pro mouse, mas meu amigo não quer perder a sensação de controle. Isso levaria uma eternidade no tempo dele, pois durante esse pequeno lapso sua mente estaria parada.

Já vimos num post antigo que é possível controlar até certo ponto a percepção do tempo pelo usuário através de entretenimento, no caso de preloaders. Vale lembrar que essa idéia veio de um artigo de Bruce Tognazzini que compara o Designer de Interface com um Mágico de circo.

Novamente, voltamos ao ponto da magia. Esse assunto costuma atrair humanistas e espantar engenheiros. A magia não é como a ciência, que apresenta resultados previsíveis. Ela é tão variável, que se alteramos apenas um dos ingredientes, a poção desanda e se torna veneno ou néctar. Os segredos dos alquimistas não podem ser inseridos em banco de dados, não são racionalizáveis.

Já prestou atenção num cozinheiro experiente fazendo uma sopa deliciosa? Embora receitas possam ser inseridas em banco de dados, eles não as seguem estritamente. Na verdade, se você perguntar exatamente qual a quantidade de óleo que ele pôs, ele não saberá dizer. É o que a Gestão do Conhecimento chama de conhecimento tácito.

Esse conhecimento não pode ser transferido da mente de um indivíduo para o outro. Precisa ser traduzido em símbolos eficazes para sair de uma mente e entrar em outra. Isso pode ser feito numa conversa descontraída, num ambiente formal de trabalho, numa sala de aula ou, tchan, tchan, tchan, num ritual.

A vantagem do ritual perante as outras formas de transmissão de conhecimento é a imersão que ele promove. Em geral, trata-se de uma assembléia de diversos símbolos manifestando-se por diversos meios. Pense em alguns dos símbolos presentes num ritual religioso como a Comunhão:

- a roupa do sacerdote
- o cálice dourado cheio de vinho
- os pedaços de pão seco
- o ambiente
- a história que está por trás

Tudo isso são símbolos carregadíssimos de significado. Cada vez que se passa por um ritual como esse, se tem uma realização diferente, devido à riqueza de significados que os símbolos combinados podem resultar. Isso não é bom ou ruim, isso é efetividade na comunicação de uma determinada mensagem.

Ainda sinto falta da época em que os videogames vinham em cartuchos. Quem nasceu antes do Playstation sabe do que estou falando. O cartucho era robusto, de fácil manipulação, podia até sujar de geléia. Para colocá-lo no console era preciso certa perícia e força e um pequeno estalo parabenizava o jogador pela boa encaixada. Se o game não iniciasse, retirava-se o cartucho e assoprava-se os contatos. Na pior das hipóteses uma pequena batida dava conta do recado. Parece mágica, mas isso fazia realmente o Mario Bros aparecer de novo.

Compare com os consoles de CD e note como o ritual é mais pobre. Abre-se a caixinha do CD, coloca-se na bandeja, fecha e pronto, o game está carregando. Se não der certo, não há muito o que fazer. CD riscado vai pro lixo.

As bandejas desses consoles poderiam pelo menos ser como as bandejas dos primeiros drives de CD-rom do PC. Quando se apertava o botão de ejetar do driver 2x da Mistumi, o drive saia inteiro pra fora do micro e era preciso abrir uma tampa interna para poder colocar o CD. Esse receptáculo valorizava o CD, que na época ainda era bonito de se olhar, e tornava a experiência de trocar o CD um pouco mais lúdica, já que a bandeja parecia um objeto de ficção científica.

No ambiente de trabalho, tempo é dinheiro, e a bandeja estrambótica sucumbiu. Mas, no entretenimento, o que vale é a diversão. Não testei com usuários, mas acho que daria certo.

Mas mesmo em ambientes de trabalho, se podemos enriquecer a experiência de uso de softwares com símbolos bem amarrados, isso pode ter impacto positivo na usabilidade. O apressado já pensa em encher de ícones, o criativo pensa em encher de metáforas e o perspicaz entendeu que o que o usuário precisa é de significados.

O Photoshop é um software carente de rituais, mas tem uma ferramenta ali que tem significado especial para mim. Costumo brincar junto com amigos aplicando o filtro "liquify" ("derreter") nas fotos de conhecidos. É um ritual pra lá de engraçado mas não seria tão divertido se tivesse que usar o Corel Photopaint.

Note como no Photoshop basta arrastar o cursor para distorcer a foto. Até mesmo os amigos que não se dão bem com o PC não resistem à brincadeira. Os controles não oferecem precisão, mas quem se importa com isso?

No Photopaint, uma malha de linhas cobre a foto e podemos arrastar apenas os vértices da malha para distorcer a imagem. Mais preciso e mais rápido, mas muito mais chato.

A diferença principal está no significado das ações. No Photoshop, a manipulação é direta, o usuário se sente realmente distorcendo a face do amigo. Quem é que não gostaria de ter esse poder no mundo real? Tal experiência lúdica traz grande prazer.

No Photopaint, a manipulação é indireta e, portanto, menos familiar. Se ninguém lhe contar, o usuário levará algum tempo até perceber que o primeiro passo é arrastar um dos vértices da malha porque esse significado não está explícito nem implícito. É algo que só poderá ser descoberto mediante exploração do tipo clica-em-tudo-e-vê-no-que-dá e isso não é nada divertido. Finalmente, o usuário se dá conta de que não pode tocar na imagem e alongar o nariz do retratado, que é seu objetivo. Ele só pode tocar a maldita grade que fica sempre na frente da imagem.

O sucesso do Photoshop não está em usar um pincel ao invés de uma malha, mas sim no significado que o modelo de interação tem: a manipulação direta da imagem. O Photopaint pode ter mais usabilidade, mas meus amigos preferem o ritual proporcionado pela Adobe.

Passemos então, designers de experiências interativas, a estudar os rituais, sem ceticismo ou juízo de valor. Um ritual não é inócuo, bom ou ruim. Se transmitir algum significado, será eficiente e é isso o que importa.

Comente este post

Desde que assinei banda larga, comecei a ouvir assiduamente os posts do áudio-blog do Rene, o Roda e Avisa. No começo achava que ele só falava baboseira, conversa para boi dormir, afinal não tem nada de técnica no que ele diz. Não que eu seja contra teoria e reflexão, pelo contrário, adoro ler isso em livros. Mas, no computador, não sei, há uma atmosfera que inibe esse tipo de pensamento. É tanto esímulo que é capaz de me manter acordado até de madrugada. Costumo ler uma penca de artigos na velocidade da luz e só assimilar eles depois quando estou longe do PC.

Foi então que tive a idéia óbvia de sintonizar o Roda e Avisa enquanto estivesse lanchando ou mesmo fazendo algo rotineiro no computador. Aí sim aprendi a curtir o negócio.

Fiquei tão inspirado que comecei a pensar em testar o recurso neste blog também. O lançamento do podcasting do Tableless foi o empurrão final. Cá estamos e não vou substituir meus escritos. Reservarei ao áudio meus insights menos sistematizados e menos técnicos. Tentarei explicar conceitos complexos, que dificilmente se consegue entender com meras palavras. Aquilo que difere a aula do professor dos livros que tratam do assunto.

Então vamos lá. "Senta, que lá vem história" (programa Glub, Glub, TV Cultura, 1990):

A lição da Semiótica e da Comunicação para o design de interfaces [MP3 - 10' - 1.8MB]

Notas

• Artigo do Norman
• Livro The Semiotic Engineering of Human Computer Interaction - Clarisse de Souza
• O que eu vim fazer da comunicação aqui?
• Emissor - interpretação - mensagem - interpretação - receptor
• Máximas de Grice: quantidade, qualidade, clareza e relevância
• É isso que vou tentar fazer nestes posts sonoros

Comente este post

Para se sustentar, ela cita a pesquisa do neurocirurgião Antônio Damásio:

As imagens não são armazenadas sob a forma de frames de coisas, acontecimentos ou palavras. O nosso cérebro não arquiva fotografias de pessoas nem armazena filmes de cenas da nossa vida; não retém cartões salva-vidas como usam os apresentadores de televisão. Não, o nosso cérebro faz, antes, uma interpretação, uma nova versão reconstruída do original. Temos no entanto a sensação de que podemos evocar nos olhos ou ouvidos da nossa mente, imagens aproximadas daquilo que experienciámos anteriormente. Elas podem ser sonoras ou visuais, tactéis, gostativas ou olfactivas mas são predominantemente visuais.

Uma vez que o contacto que o homem actual tem com
a internet é essencialmente visual, através da imagem que aparece no ecrã, parece ter coerência prestar atenção a um discurso que procura convencer pela imagem. A impressão que guardamos de um site é essencialmente uma imagem de um todo global, da aparência de uma estrutura visual. É essa imagem
que vamos guardar, a visual.

O design fornece-nos uma espécie de primeira impressão, à semelhança do que acontece quando vemos alguém pela primeira vez e reparamos para na sua aparência: podemos amá-la ou detestá-la. A página deve ser, por isso, algo agradável de ver, com efeitos visuais adequados à transmissão do conteúdo.

Apesar de concordar com ela que a imagem tem papel essencial no discurso persuasivo ("a primeira impressão é a que fica"), discordo quando ela diz que a imagem é mais importante do que o texto para criar emoção. O texto é que dá a sequência, que traz a dimensão do tempo para a experiência do website. Sem tempo, não há ações, não há compras. A imagem sozinha é pura contemplação, mais nada.

Apesar do fluxo de som ainda ser deficiente na Web, foi falha grave não citar a importância do som na incitação de emoções. Costumo dizer aos meus amigos da Lifemotion: "acreditem ou não, o som é o grande diferencial do trabalho de vocês".

Ontem conheci um trabalho recente da 2avanced, o site do novo filme do Exorcista. Fiquei frustrado. Imagens fantásticas, sequências de vídeo em 3D super-pesadas, mas som fraquíssimo. Gastaram banda com o elemento errado para esse tema. Em algum momento você mijou nas calças? Levemente assustado? Eu nem um pouco.

Podiam ter feito uma apresentação menos luxuosa usando vetores e apostado as fichas num som mais assustador! O site do jogo Gosth Hunter é parecido, mas usa muito melhor o som. Aliás, não é só o som... Esse site é exemplo de como todas as facetas de uma boa experiência estão bem desenvolvidas:

• o texto só aparece quando estritamente necessário, é super conciso e sempre leva à interatividade
  
• som que cria clima, mas não distrai e ainda reponde ao input do usuário
  
• animação de transição rápida e reagente ao input

No final das contas, todos esses elementos confluem para um único objetivo: fazer o internauta se sentir dentro do jogo e persuadí-lo a comprá-lo. Essa é a solução: a visão holística, que considera todos os lados da moeda. Por isso, uma equipe multi-disciplinar tem mais chance de ter sucesso. Ainda mais, se dentro dessa equipe existem profissionais multi-disciplinares. Aqueles que estudam não só design, mas marketing, comunicação social, arquitetura da informação e tudo o mais que gostarem.

Comente este post

Como já havia comentado num post antigo, o design de aparelhos de celular são muito importantes porque eles servem como objetos de ostentação. Da mesma forma, na Web as interfaces mais "transadas" tem mais chance de conquistar o gosto das massas. O hotsite do novo celular consegue fazer isso com certeza, só não sei quanto ao aparelho em si.

Não sou designer de produto, mas tenho um pressentimento de que ainda vai demorar muito até alguém conseguir fazer uma aparelho que converja celular, palm e câmera de fotografar sem perder a usabilidade das interfaces dos aparelhos separados. Faz tudo, mas faz mal feito. Pense na dificuldade do designer. Ele precisa fornecer isso tudo e mais:

• botões grandes para digitar telefones com uma só mão
• uma área sem botões para poder segurar com uma mão só sem fazer cagada
• uma tela o maior possível (no mínimo duas polegadas)
• caber dentro da palma levemente fechada
• resistente para não quebrar se cair, porque celular vive caindo
• meio que à prova d´água, porque vive caindo uns pingos
• ter um lugar para anexar uma caneta stylus
• como se não bastasse, ele tem que ser fino e caber confortavelmente num bolso

Comente este post

O computador é multi-tarefa, mas a mente do usuário não. Para gerenciar a atenção entre diversas janelas abertas, há um grande esforço racional. Se queremos transmitir uma mensagem sentimental, precisamos interromper isso. Daí o fullscreen.

Só pra confirmar, abra o arquivo de email da sua esposa, namorada ou irmã e procure pelos anexos em Powerpoint. Com certeza, você vai encontrar uma apresentação em fullscreen com fotos de animais imitando gente acompanhado de mensagens para aumentar a sua auto-estima ou coisa do gênero. Elas recebem dezenas desses todo mês, sinal de que funciona.

Claro, se a mensagem não interessar ao usuário ele vai ficar com ódio dela por ter tomado a tela do seu PC. Mas é um risco que valer pena correr em certos casos.

Algumas dicas para não ser tão intrusivo:

• Avise que vai abrir em fullscreen, mas não use esse termo. Diga tela cheia, ou outro sinônimo em linguagem natural
• Quando abrir o fullscreen, o conteúdo dele já deve estar carregado. É pedante demais um website me abrir a tela cheia para me indicar por 30 segundos que está carregando. Merece um Alt+F4! Só dou misericórdia a algumas raras exceções, porque sei usar o Alt+Tab. E o usuário que não sabe, como se sente?
• Você entendeu a última, né? É pra carregar na página de splash e depois reaproveitar o SWF que está no cache. Um pouco de actionscript e javascript dão conta do recado. Pesquise que vale à pena
• Coloque um botão de fechar gigante e claro no canto superior direito da tela
• Se sentir necessidade de um botão de minimizar, não faça um. Ao invés do fullscreen breu absoluto, procure pelos scripts que abrem numa janela do sistema operacional com 100% de largura e altura, preservando os botões minimizar e fechar nativos
• Nunca diga a seu cliente que há exceções quanto ao uso de fullscreen. Detone sempre. Diga que é intrusivo demais, toma conta do sistema operacional, lembre que as pessoas estão tão de saco cheio de janelas que anti-popup aparece até em comercial de TV e por aí vai. Quando você perceber que vale muito, muito à pena, sugira a idéia.
• Lute contra os intersticiais em fullscreen, pelamordeDeus! Peça demissão se for preciso

Comente este post

A primeira tenta ser tão impactante que chega a doer o olho as cores super-saturadas (fortes). No outro, ao contrário, os grafismos e animações não tentam se impor em cima do conteúdo principal, o texto e as fotos.

Só para reforçar, algum problemas do uso de popups para websites:

• Se o UOL agora tem um bloqueador de popups é porque a maioria das pesoas não gosta deles
• Como não é normal nos websites, o usuário pode se sentir incomodado
• A opção de adicionar aos favoritos (bookmark) pode ficar encoberta
• Se forem abertas outras páginas a partir do popup principal, não haverá o botão "voltar" do navegador. Isso acaba forçando a fazer abrir numa nova popup transformando a tela numa cascata do inferno, literalmente

Comente este post