Dia do designer e regulamentação (só bobagem)

Pra começar, dia de profissão X ou Y é uma puta bobagem!

No dia 5 de novembro, a única coisa bacana que vale lembrar, é do cara que está sendo homenageado, seu Aloísio Magalhães, sujeito bacana e pioneiro da sua área no Brasil. E para qualquer um que quebre paradigmas eu tiro meu chapéu, então esse vale a pena ser lembrado.

E falando sobre de design, acabamos escutando muito sobre a regulamentação da profissão. E aí é que a cobra fuma. Onde estão os argumentos para regulamentar esse ofício? Só vejo motivo de burocrata quando ouço as defesas em cima deste tópico. Não consigo imaginar que uma empresa deixe de contratar um profissional ruim só porque a profissão é regulamentada.

Um outro sinal da bobagem que pode ser a regulamentação:

Imagine a situação abaixo, nos idos de 2003, com a regulamentação já implementada a mais de 5 anos:

"Não, você não pode praticar design de interação. Você ainda não tem o diploma de design e isso é tarefa de designer, mesmo que ainda não exista designer qualificado para tal. Está na lei que devemos contratar apenas designers em dia com a ODB (Ordem dos Designers do Brasil) para exercer esta atividade. É assim que tem que ser, pois é assim que foi regulamentado. Se precisa mudar? Não sei. Vamos nos organizar e encaminhar um projeto de Lei para Brasília!"

Imaginou o estrago?

Eu vi uma evolução acontecendo através de tentativas com erros e acertos na área de design gráfico e digital. O que me parece de verdade, é que a vontade de regulamentar a profissão está mais para protecionismo e medo do que para melhorar a área em si.

O bom é que Brasília nunca vai mexer um dedo enquanto isso não for de intere$$e DELES.

E além disso, prometo nunca mais falar dessas bobagens.

Filmes e pintores

Volta e meia, enquanto "zapeio" centenas de canais procurando algo que preste, me deparo com biografias de alguns pintores que são bem interessantes. Resolvi então fazer uma pequena lista com os mais conhecidos e a medida que for lembrando ou assistindo mais títulos, vou acrescentando a lista.

Johannes Vermeer - Girl with a Pearl Earring

Pablo Picasso - Surviving Picasso

Jackson Pollock - Pollock

Francisco de Goya - Goya's Ghosts

Frida Kahlo - Frida

Amedeo Modigliani - Modigliani

Francis Bacon - Love Is the Devil: Study for a Portrait of Francis Bacon

Quem souber outros para indicar, por favor, bota nos comentários.

1% de inspiração, 99% de observação, 0% de apego

Não, não é sobre testes de usabilidade (a "última moda" em design de interação). Quero falar sobre o trabalho de observação que o projetista pratica 24 horas por dia, 7 dias por semana. O trabalho de observar as pessoas ao nosso redor e suas reações a estímulos visuais e emocionais. Acredito que é nesse dia-a-dia que acumulamos bagagem para o 1% de inspiração.

Para ilustrar um pouco melhor o que quero dizer, vou contar uma estória (beeeemm fictícia):

1% de inspiração

"Caraleo, ficou muito bom esse "logo". Tá perfeito: proporção áurea, cores complementares, gestalt, isso dizendo isso, aquilo dizendo aquilo. Poutz, tá muito bom mesmo. Eu sou o cara! Nem sei como pude ser capaz de fazer algo tão bom. Não dá pra mudar nada, tá perfeito! Vou mostrar pro pessoal."

99% de observação

— Vamos chamar o cliente galera, terminei uma obra prima!

— Podemos ver?

— Claro. Olha aqui.

— Huuummmm. Não gostei.

— Nem eu.

— Eu também não. Quem sabe se mudar essa cor.

— Tá estranhho. Sei lá. Essa curva aqui, não gostei dela assim.

— Mas pessoal, o que que tá errado? Olha a forma, as cores, a ideia. Tá tudo encaixando!

— Sei lá cara, não tem nada errado, mas também não tem nada que faça com que eu goste.

— Mãeeee! Olha aqui e me diz o que tu acha!

— Coisa feia da porra meu filho, esconde isso!

— Mas mãe...

"Já sei, esse pessoal não é o 'target'. Vou falar com 'las personas' do projeto e ver o que eles acham."

— Pessoal, vocês estão aqui pra dizer o que pensam a respeito disso. Podem falar. Queremos a opinião de vocês.

— E o que a gente tem que falar pra receber o combinado?

— Aquilo que vocês estão pensando!

— E o que vocês querem que a gente pense pra receber o combinado?

0% de apego

"É, não deu certo. Achei bom pra caramba, mas foda-se. Bora lá tentar fazer melhor, só preciso de um pouquinho de inspiração... o que foi que o pessoal falou mesmo que estava faltando?"

Duas recomendações:

uma fotografia do meu twitter hoje

Get your twitter mosaic here.

com que cor? - parte 2

Quero focar este post na parte prática da coisa. E já que estou querendo ser objetivo, vou explicar uma de várias técnicas possíveis para a montagem de uma paleta de cores para uso em telas de computador (crt ou lcd, tanto faz), utilizando um software específico - o adobe photoshop. Digo para telas de computador porque esse procedimento não se aplica em trabalhos impressos ou para a TV (mas o conhecimento vale).

No post anterior, tentei mostrar como a cor é, na verdade, percepção de luz. Entendido isso,vou desmembrá-la em 3 partes:

1. matiz

2. saturação

3. luminosidade ou valor

Este modelo é conhecido como HSV - hue (matiz), saturation (saturação) e value (valor) - http://pt.wikipedia.org/wiki/HSV.

Com a manipulação destes valores, podemos montar paletas mais harmônicas sem pensar muito, quase como um software. Com isso, podemos atingir uma maior assertividade nas nossas escolhas para transmitir a mensagem ao receptor. Afinal, é isso que importa. E só para ajudar a esclarecer, isso é importante se o seu trabalho é desenhar interfaces que devem transmitir mensagens claras, como faz um designer que trabalha com comunicação. Experimentações artísticas ficam a cargo de artistas. Se você é designer e está sendo pago para criar peças de comunicação, não se iluda, a mensagem é o centro das atenções, não o autor e sua obra.

Mas voltando aos componentes da cor, vamos entender o que cada um faz:

1. MATIZ

Se colocarmos o espectro de luz percebível pelo olho humano em um disco, podemos classificar a matiz como o ângulo onde a cor se encronta nesse disco.

Cada ângulo do disco equivale a uma cor. Começa com o vermelho - ângulo 0 e assim vai até o 359º. Photoshop, Illustrator e a maioria dos softwares de ilustração possuem o recurso para trabalhar dessa forma (HSV).

2. SATURAÇÃO

Toscamente, vou chamar a saturação de quantidade de matiz da cor. Se pegarmos como exemplo o ângulo 0 do nosso disco, ou seja, o vermelho, podemos perceber que quanto menos saturação a cor possuir, menos vermelho ela tem, mas não deixa de ser vermelho, pois o ângulo não foi alterado.

Para exemplificar, vou montar um gradiente alterando apenas a saturação (do 0% ao 100%) e deixando a luminosidade em 100%.

0% de saturação > 100% de saturação (ângulo 0 e luminosidade 100%)

Agora vou pegar exatamente a mesma cor e o mesmo efeito de saturação, porém vou alterar a luminosidade:

0% de saturação > 100% de saturação (ângulo 0 e luminosidade 50%)

Nas duas imagens, percebemos nitidamente como o vermelho está completamente ausente no início do gradiente e como sua presença aumenta a medida que a saturação aumenta.

Nota: você percebeu que a cor rosa ou vinho não estavam presentes no nosso espectro de cores, mas que, com a manipulação de saturação e luminosidade a partir do vermelho (ângulo 0) mostradas nas imagens acima, conseguimos perceber estas duas cores.

3. LUMINOSIDADE (ou valor)

Essa é mais simples: é quantidade de luz/brilho. E o que acontece quando não temos luz? Temos o preto. E aqui é a mesma coisa. A manipulação desta propriedade é muito útil quando queremos trabalhar gradientes afim de representar volume nos objetos. Mantenha a matiz e a saturação sem alteração e o efeito de volume é construído apenas com a alteração de luz na cor.

H - 0º, S - 100%, V - 80%

H - 0º, S - 100%, V - 40%

E falando da parte prática mesmo, um resumo bem tranquilo para montar uma paleta seria o seguinte:

Através do levantamento das características do trabalho, primeiramente decidimos coisas como: como a cor predominante (caso precise ter uma) precisa ser: fria/quente, lúdico/adulto, luxo/simples, acolhedor/imparcial, vibrante/calmo, e por ai vai. Quanto mais informações conseguirmos definir a respeito do que precisamos comunicar, mais assertivos seremos (já falei disso antes). Por exemplo:

Uma peça para a web que vai vender um note sofisticado a preço baixo.

Eu defino que as principais características são:

- tecnologia

- futuro

- metal

- frio

- adulto

- sério

- luxo/caro

Cor predominante = azul

Consultando meu disco lá em cima, podemos ver que o azul pode estar inclinado para o verde ou para o anil/violeta. No caso dessa peça, não vou pender para nenhuma das duas cores, mas é importante mostrar podemos tornar a cor mais verde, diminuindo seu ângulo, ou mais anil, aumentando seu ângulo. Podemos fazer isso sutilmente ou não. É um baita controle.

Ok, escolhi a cor predominante, mas ainda não escolhi seu tom.

Chegou a hora de escolher a saturação e a luminosidade do meu azul. Vou diminuir um pouco a saturação para tornar a cor menos lúdica e mais séria. Também vou experimentar diminuir um pouco o brilho/luminosidade para buscar algo mais aveludado, mais luxuoso, mais caro.

H - 240º, S - 80%, V - 80%

Hummm, na real não gostei. Acho que este tom está pendendo demais para o anil/violeta. Vou experimentar diminuir o ângulo em 20 graus então:

H - 220º, S - 80%, V - 80%

Bom, gostei mais dessa. Agora vou criar algumas variações apenas de luminosidade nela para trabalhar os gradientes que usarei na peça.

Na parte mais escura, foi simples, apenas fui diminuindo do valor da luminosidade de 20 em 20 porcento. Para a parte mais clara, fiz a mesma coisa, porém acrescentando 20%. Mas se tu notares, na cor original, a luminosidade já tem 80%, e se colocar mais 20%, fica com 100%. Então como eu faço para continuar aumentanto a luminosidade. Tranquilo vivente, sempre que a luminosidade atingir 100%, comece a diminuir a saturação. Com a luminosidade em 100%, a luz já atingiu o máximo de brilho, então se diminuirmos a saturação, estamos diminuindo a quantidade de cor, e como cor é luz, então...

Buenas, mas lembra que essa peça tem uma informação muito importante e que precisa de um puta destaque? É a informação referente ao preço baixo. Então vamos fazer essa informação ganhar o maior destaque possível e a cor dessa informação deve nos ajudar nisso. Nesse caso, vou escolher o contraste com a cor completar, assim como poderia ser com quente/frio, com variações de saturação, de luminosidade, entre outras (vai outro post mais adiante apenas sobre contraste).

E qual a complementar desse meu azul? Só por curiosidade, vamos descobrir a complementar apenas subtraindo 180º do ângulo do meu azul o que seria feito assim: meu azul tem 220, menos 180, igual a 40. Eita, 40º é laranja. E não é que funciona. É a cor exatamente oposta no disco.

E aplicando as mesmas variações de luz, temos:

A última coisa para aplicar o contraste da melhor forma e que a informação em laranja tenha o maior destaque possível, vamos lembrar de colocar sempre forma contrária a luminosidade das cores: claro sobre escuro ou escuro sobre claro.

Uma forma de guiar a construção da peça pode ser feita assim:

É isso. Agora, para apresentar esse amontoado de cor de forma atraente e bonita é outra estória, e a sensibilidade estética do profissional conta muito nessas horas. Quebrar a lógica e ainda assim conseguir atingir os objetivos propostos pelo trabalho é possível, mas precisamos conhecer essas lógicas e quebrá-las quando vale a pena.

Para quem quer um excelente livro sobre cor:

IXDA em São Paulo

Para quem tem interesse em Design de Interação e quer participar de uma comunidade com foco nessa disciplina, acessa O IxDA (Interaction Design Association) capítulo São Paulo - http://ixdasp.org/ e entra em contato com o pessoal.

A Amyris Fernandez está presidindo a instituição e como ela mesma diz: "Todos as formações são bem vindas, não é uma comunidade restrita de forma alguma. Só precisa gostar de discutir interação. Como participar? Venha aos nossos encontros, dê idéias de assuntos para discutir, comente os artigos."

Então entre lá e participe!

com que cor? - parte 1

Não sabia bem por onde começar este post, pois são tantos conceitos que aplicamos na hora de criar uma paleta que fica difícil falar de apenas um tópico isolado. Então resolvi dividir o assunto "cor" e falar um pouco de cada conceito e como os utilizo na criação das paletas de cores para uma peça de comunicação. Mas não vou relacionar esses tópicos, vou escrevendo sobre eles a medida que for lembrando e utilizando-os no meu dia a dia, seja na tela para a pintura, ou no computador para a TV, Web ou impressão.

COR

Para começar, queria compartilhar um pouco sobre o próprio conceito de cor.

O que é a cor? Cor é percepção. Só isso. A cor só existe dentro da cabeça de cada um. Para quem tem o primeiro contato com esse conceito é super difícil aceitar que tudo que a gente enxerga não possui cor. Mas é verdade, não tem. E como acontece então? Difícil de explicar e difícil de entender, mas volu tentar:

a) a primeira coisa é a luz. Por que enxergamos com luz e não enxergamos nada sem luz? Porque só percebemos os objetos a nossa frente quando a luz reflete neles e chega a nossa retina.

b) chegamos a luz então, e a diferença entre as áreas do objeto que recebem mais ou menos luz cria o nosso sentido de tridimencionalidade. No exemplo acima, podemos perceber que o círculo possui profundidade baseado no contrate sombra/luz. É isso ae, só com isso já podemos perceber e nos localizar no espaço, mas e a cor? Sem luz não tem cor, então vamos ver de que a luz é feita para entender a cor. Putz, o conceito de luz é complicado (dá uma olhada aqui se quiser saber o jeito certo http://pt.wikipedia.org/wiki/Luz) então vou falar como leigo: luz são ondas, e dependendo de algumas variáveis dessa onda (amplitude, frequência e ângulo de vibração) teremos as variações de percepções que chamamos de cores.

Então a luz sai, reflete na minha xícara e chega no meu olho. E como ela tem um certo ângulo, frequência e amplitude, eu acabo percebendo a minha xícara como amarela? Errado, mas quase certo. O que acontece na reflexão da luz na xícara é que determina a cor que percemos ela.

É como matemática, a xícara possui uma textura que possui uma certa propriedade que vai alterar as variáveis da luz que está sendo refletida nela. Na ilustração acima, eu tentei simular e luz branca sendo refletida na xícara. O que aconteceu é que apenas um espaço do espectro do amarelo refletiu na textura da xícara, o resto da luz passou batido e, como apenas o amarelo foi refletido, é assim que enxergamos essa xícara. Viu como é apenas percepção. Um daltônico percebe o mundo a sua volta diferente de um não daltônico.

Se considerarmos a luz como uma informação, podemos dizer que ela é processada no cérebro, mas quem rebebe essa informação (luz), são células sensíveis a luz localizadas no olho, algumas reconhecem a quantidade de luz (luminosidade) e outras percebem quais as propriedades dela (cor).

Legal isso, mas como posso utilizar esse conhecimento no meu trabalho de designer? Putz, a gente utiliza isso em tudo, alguns conseguem aplicar sem conhecer a teoria (alias, é assim para praticamente todos no início), mas depois que começamos a controlar os rumos do nosso trabalho através desse conhecimento, podemos atingir nossos objetivos com maior acertividade.

No próximo post sobre cor, vou dar um exemplo prático sobre a aplicação desse conhecimento no nosso dia a dia.

Controle sem controle

Controle remoto é complicado. Principalmente aquele que a gente usa para controlar a TV, o DVD ou a caixa da nossa TV por assinatura. Não existe padrão em nenhum do mundo, apenas propostas de padronização. É por isso que todos os usuários não reaproveitam o que aprenderam utilizando o seus aparelhos quando trocam por outro. É a mesma história, tem que aprender tudo de novo.

Não vou repetir as mazelas do design de interação dos controles (até o Nielsen tem artigo sobre isso - http://www.useit.com/alertbox/20040607.html), pois isso tudo mundo sabe pois também sofre. Quero usar este post apenas para mostrar uma proposta que está na minha cabeça faz um tempo.

A questão da TV interativa no sentido mais amplo dessa interatividade (desde trocar de canal até mesmo configurar um bloqueio de faixa etária ou comprar um produto) já é uma realidade para as operadoras de TV por assinatura. E ainda estamos engatinhando no que diz respeito a escutar nosso cliente para entender como ele interage nesse suporte.

Porém, mesmo sem ter um embasamento 100% científico, acredito piamente que:

1º - Os controles atuais possuem botões demais.

2º - Os botões são pequenos demais.

3º - É complicado encontrar um botão específico no escuro.

4º - É impossível olhar para a tela e para o controle ao mesmo tempo.

Estes são apenas 4 argumentos para criar um ponto de partida para a interface de um controle remoto melhor. Visto isso, a primeira alteração seria transpor a navegação para a tela e retirar todos os botões específicos (ex. volume, tv/av, menu, time shift, etc). Para que isso se torne possível, precisamos encontrar essas mesmas funções através de uma navegação tridimensional na tela do aparelho. Isso me parece similar a algo bem conhecido e bem estudado — um computador.

E seguindo esta analogia, vamos pegar um mouse e transformar num controle remoto. Para a movimentação espacial, vamos utilizar os controles direcionais de "esquerda, direita, para cima e para baixo". Com isso podemos navegar para frente, para trás utilizando as direções na horizontal e trocar esse caminho na vertical. Mas não quero me aprofundar na navegação e sim no controle. Outro comando importante do mouse é o botão que vamos tranformar no "OK" do nosso controle e... pronto. Com apenas estes controles já conseguimos atingir a maior parte de qualquer navegação necessária a uma interatividade com o nosso aparelho de TV.

Mas ainda não é o suficiente, alguns testes e a gente se depara com a necessidade de comandos adicionais, adicionaremos os botões de voltar e sair, já que analogia com o computador pode ser válida, mas ainda assim temos grandes diferenças. E uma delas é o modo de navegação no espaço através dos eixos x e y. Com o mouse, conseguimos rapidez e precisão, pois esse controle está na mão movimentando o mouse. Com o controle, usamos as setas direcionais, então a sugestão que me parece mais óbvia é movimentar os eixos e não o foco através deles. Com isso, nosso foco de interação se torna fixo.

Outra questão importante é a carga de aprendizado que os usuários já possuem e não vão querer abrir mão tão rapidamente. Digitar 1 e depois 8 para chegar ao canal 18 possui uma grande quantidade de adeptos, porém, com o uso da interatividade nos atuais guias de programação da TV digital, esse meio deve deixar de ser tão relevante quanto é hoje. Nesse sentido ainda temos o botão de silenciar (mute), bastante útil e ainda muito relevante a ponto de ter um atalho no controle. As teclas coloridas que com certeza vão melhorar a navegação para usuários mais avançados que preferem atalhos para uma navegação que pode chegar a 5 níveis utilizando apenas a interface. E, por último, um liga/desliga.

É isso. Aqui está um esboço dessa idéia de um novo controle.

Ainda vamos evoluir muito para alcançar uma experiência com bom nível de usabilidade na nossa TV. Isso será muito rápido no momento que novas tecnologias deixarem de ser novidade e o que realmente interessa, o conteúdo, for a estrela das empresas que desenvolvem as interfaces. Quando isso acontecer, a facilidade de uso pode decidir a compra ou não de um determinado produto e de novo vamos olhar para a internet e aprender aquilo que eles já trabalham faz tempo.

Para quem quiser saber sobre um trabalho que foi feito junto aos usuários, o Gil Barros tem uma dissertação de mestrado muito bacana para download - "A consistência da interface com o usuário para a TV interativa". Ele tem um trabalho científico e bem estruturado sobre o assunto. Bacana de ler, ainda mais para quem trabalha com TV Interativa.

consistência

Substantivo
con.sis.tên.cia feminino

1. firmeza.
2. (figurado) perseverança; constância.
3. (Lógica) coerência.

(fonte: http://pt.wiktionary.org/wiki/consist%C3%AAncia)

Quero dar destaque para o significado "2. (figurado) perseverança; constância.". É o significado em sentido figurado, ou seja, uma metáfora relacionando o mundo físico ao metafísico, ou vice versa. No design de interação, a constância no significado dos signos da interface deve ser o primeiro passo para facilitar o sucesso de uso do material a ser desenvolvido.
Pode ser um aplicativo para a TV, para a internet, para um celular. Todos precisam trabalhar a consistência de suas interfaces. Mas como fazer isso?

Buenas, vou tentar explicar um pouco sobre um dos processos que utilizo quando tenho esse desafio.

1. Não existe mágica, começamos com pouco (aquilo que for mais óbvio) e quando achamos que o volume de objetos da interface já está bem grande, refazemos tudo de novo buscando a otimização e as inconsistências que com certeza devem existir. É impossível começar um projeto grande já tendo a visão do todo e, mais impossível ainda, conseguir otimizar a medida que avançamos. Isto seria feitiçaria (yo no creo en las brujas pero que las hay las hay).

2. Crie e recrie uma lógica de agrupamento desses objetos e escreva num papel essa lógica (ela deve ser simples o suficiente para caber numa frase, ou duas, no máximo). Faça testes com a lógica criada pensando nas piores situações e resista bravamente para não cair em tentação e deixar escapar algumas "exceções". Se na largada você abrir mão e ceder para exceções, fudeu, pois no andamento surgirão outras e ainda mais outras durante a vida útil do produto. É o início do caos.

3. Mostre para todos a sua lógica. Mostre para sua mãe, sei pai, seu colega, seu vizinho, sua esposa(o). Quanto mais pessoas de diferentes interesses e níveis de conhecimento você mostrar a lógica desenvolvida, mais você se convence acerca das falhas e acertos que ela possui. Você acaba praticando a explanação e aprende a ser conciso na defesa de suas idéias.

Começando com esse mínimo de cuidado, dificilmente caímos em armadilhas que acabam com as consistências no design de um produto. Uma lógica simples, bem estruturada e bem aplicada acaba ganhando defensores e tem mais chance de chegar do jeito que foi planejada ao usuário, afinal, fica bem mais complicado um zé ruela chegar e pedir uma alteração em um ponto específico. Se isso acontecer, você mostra a lógica (bastante treinada já) e pede ao sujeito que, ou ele mostra uma lógica melhor para mudar o que ele quer, ou ele que enfie na bunda essa porra de "sujestão".

É isso.