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