No período de transição
de micreiro para designer, sentia certa dificuldade de ter boas idéias
para layouts. Apesar de já ter estudado um pouco pintura, não
sou prolífico como certos amigos que nunca precisaram parar para pensar
como ter idéias visuais, para eles isso veêm natural e rapidamente.
Então, resolvi procurar abordagens metódicas para agilizar meu
trabalho. Li diversos artigos com sequências de ações "infalíveis"
para ter boas idéias, mas sinceramente não achei que fosse assim
tão e fácil e não foi. Tive que desenvolver meu próprio
método, de acordo com minhas habilidades e incapacidades.
Os artigos que mais me ajudaram foram o da Carole Guevin, no Afterchaos.
Quem puder ler, vale à pena. São curtos e diretos e dão
uma base para quem quiser desenvolver a sua metodologia própria. Na publicidade
tem um clássico chamado Um
Toc na Cuca que parece muito bom, só não me animei a pagar
por ele.
Em todos os artigos, uma mesma recomendação: vá fazer
algo longe do PC para ter novas idéias. Explorei esse assunto numa entrevista
com um dos caras mais criativos que conheço, o Marcelo Sampaio. Esse
cara faz uns banners geniais, mas não soube me explicar bem porque é
melhor se inspirar longe do PC.
Esses dias, por acaso (!), essa questão voltou à minha mente
e resolvi perguntar para o Donald Norman, que tem um background fantástico
em psicologia, o porquê disso. Confiram a tradução da pergunta
e resposta originais:
Donald Norman, sócio do Jakob
Nielsen e um dos maiores gurus do design, respondeu uma pergunta pública
que fiz a ele. Li muitos artigos de sua autoria e estou finalizando seu livro
mais conhecido, The
Design of Everyday Things, que trata da usabilidade dos objetos por uma
perspectiva da psicologia cognitiva. Fiquei extremamente feliz por ser contemplado
por tão sábia e ampla resposta, aprendi muuuuito. Recomendo a
todos que façam suas perguntas
ao homem.
Minha dúvida surgiu quando tive contato com um estudo que relacionava
usabilidade percebida à estética. Concluí que no contexto
Web, esta última é mais importante, porém, aproveitei a
oportunidade para que o autor do badalado Emotional
Design me confirmasse isso. Claro, como um legítimo bom guru, desconfirmou:
"não é mais, nem menos importante: tudo depende da ocasião".
Ah, ficar em cima do muro é fácil. Fácil nada, note a justificativa
do homem.
Pergunta
Websites e aplicações Web são supostamente feitos para
serem usados uma ou poucas vezes, então a usabilidade percebida (correlacionada
com a estética) seria mais importante do que a usabilidade real (tempo
para finalização da tarefa, número de erros encontrados,
etc) na Web?
(Não estou dizendo que a usabilidade não é importante,
só estou na dúvida se a estética é mais importante
para superar a competição brutal da Web e conquistar a atenção
do usuário do que a usabilidade real que não é percebida)
Tenho aqui uma citação que desmente este último argumento.
Talvez o Nielsen nem se orgulhe muito dela, porque afinal de contas ele realmente
quase não fala sobre a importância do design gráfico, o
assunto dele é sempre a usabilidade. Mas comprende-se: é essa
a mensagem dele. Quem já estudou um pouquinho de publicidade sabe que
quanto mais esforços você investir numa única mensagem,
mais efetiva será sua transmissão. É por isso que ele chegou
aonde chegou. Mas, vamos à citação:
(43 comentários)
Estava quase indo dormir, quando o digom me abordou para uma conversa no MSN. Puxa, como valeu à pena ficar mais um pouco acordado. Passamos por várias tenções: usabilidade X acessibilidade, persuasão X informação, quadrado X redondo e etc. O mais incrível é que tudo tinha a ver, na medida em que a conversa se desenrolava. Esse é só a ponta do iceberg que nos aguarda quando novos dispositivos tiverem acesso à Web. Leiam e fiquem de olho:
A Usability fez um projeto em que os usuários não conseguiam
navegar de um formulário para outro simplesmente porque os botões
de "continuar" e "cancelar" eram amarelos e do mesmo
tamanho, posicionados lado a lado. Sem perceber, o usuário clicava
sobre o "cancelar" e zerava a operação. O único
diagnóstico que fizemos para este site foi: diferencie a cor dos
botões de "cancelar" e "continuar" e assim esse
erro não acontecerá mais. Leia
mais
Estou lendo o livro Designer´s Guides for Creating Charts an Diagrams de Nigel Holmes, que na época era
ilustrador da famosa revista Time. O cara adorava ilustrar gráficos para
torná-los mais amigáveis e interpretar os dados mostrados. Veja
um exemplo simples dessa técnica aplicada a um gráfico de pizza:
O fucinho e a orelha da raposa saindo pra fora significam que o Firefox está
tentando tomar o lugar do Internet Explorer, mas ainda está longe de
conseguir. Como vocês podem notar, com as ilustrações mais
fácil de perceber o viés de quem fez o gráfico (sim, eu
recomendo altamente que vocês troquem de navegador).
Mesmo assim, nesse caso não houve distorções e o gráfico
é muito mais interessante que sua versão em tabelas com números.
Porém, fiz dois outros gráfico para ilustrar como nem sempre isso
é vantajoso para entender melhor os dados:
Apesar de bonitinhos, nesse caso os gráficos de barra dispostos em círculo
dificultam a comparação entre os valores. Note no gráfico
original feio como é muito mais fácil perceber o padrão
de acesso (que é o objetivo de um gráfico como esse):
Outro recurso utilizado erroneamente pelos infografistas é trocar barras
por desenhos que são dimensionados de acordo com a altura da barra. O
problema dessa técnica é que causa uma certa distorção.
Note como no gráfico abaixo, o primeiro valor parece muito menor do que
o último, quando na verdade ele representa 1/4 do valor do último:
Se fosse mantida uma largura fixa como a barra do gráfico original,
os dados não seriam distorcidos, mas aí as figuras ficariam distorcidas.
Pior do que isso só usar grades curvas ou tridimensionais para se ajustar
melhor ao desenho que envolve o gráfico. Isso torna a comparação
mais imprecisa, porque é preciso levar em conta essas alterações
na grade e compensar as diferenças.
O livro foi escrito em 1982, quando os infográficos começaram
a ser mais valorizados nos jornais. Pelos exemplos
que vi no site do autor, parece que ele mudou radicalmente sua abordagem.
Porém, ainda há muitos infografistas por aí que se vangloriam
por tornar gráficos mais amigáveis abusando de ilustrações.
Como diz Edward Tufte, no seu excelente livro "Envisioning Information":
Se você sente que precisa embelezar um gráfico, é
porque escolheu os números errados.
Durante o Simpósio
de Interação Humano-Computador que assisti há duas
semanas, uma pesquisa me chamou muito à atenção por tentar
provar que a estética de uma interface está intimamente relaciona
com sua usabilidade percebida. Isso significa dizer que a beleza é
crucial para o sucesso ergonômico da interface. Já escrevi
algumasvezes
sobre o dilema estética
X usabilidade,
mas dessa vez parece que finalmente as idéias começam a se encaixar.
O experimento da doutoranda Rosamelia Ribeiro foi o seguinte: ela montou
3 séries de interfaces iguais em tipografia, elementos gráficos
e cores, cada uma com 4 páginas, diagramadas diferentemente de acordo
com os princípios da Gestalt (unidade, proporção, homogeneidade, balanço
e ritmo):
seguia todos os princípios
violava todos
seguia os três primeiros princípios e violava os últimos
violava os três primeiros e seguia os últimos
Então, ela recrutou 279 pessoas e pediu para que avaliassem o quanto
cada uma das telas era atrativa e fácil de usar numa escala de 1 a 5.
O resultado foi que, apesar das notas não serem as mesmas para estética
e usabilidade, elas variaram na mesma proporção, veja no gráfico:
Para aplicações Web e 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 ele, não
importa se a conclusão da tarefa vai demorar 2 minutos ou 3 minutos,
importa mais que o fluxo da tarefa durante esse tempo seja agradável
e sem problemas. Daí podemos tirar a conclusão de que devemos
criar interfaces mais explicativas, bonitas e mágicas.
Bibliografia: Aesthetics and percieved usability of Virtual Learning Environments:
preliminary results. Rosamelia Ribeiro, Dr. N. Hammond, J. Mansano, C. Cziulik, anais do IHC 2004 (quem
quiser uma cópia peça para ela)
Maria Claudia Cortes escolheu o formato ideal para mostrar o resultado de sua Dissertação de Mestrado: o Flash. Color in Motion aproveita tudo o que o Flash pode oferecer para ensinar teoria da cor. Tem animação, som, jogos e um kaleidoscópio que serve para experimentar a interação entre as cores.
O destaque vai para as cinemáticas onde as cores primárias e secundárias estrelam o papel principal.
Já assisti umas dez vezes e ainda não aprendi todos os macetes de transição entre cenas, ilustração, coloração, máscara e etc. Apesar de muito pesado (quase 1MB cada filme), é uma das minhas melhores referências em animação na Web
Agora, só não vai achar que depois de ver tudo que tem lá você já sabe tudo de teoria da cor. O site é um começo, um excelente começo. Mas não pode se encarado como única referência porque cor, assim como todos os outros elementos do design, depende de contexto. O vermelho num layout frio destaca, num layout quente, completa. Já se for para economistas, o vermelho é cor proibida, indica perda de dinheiro. No semáforo, foi escolhido porque é a frequência de onda que chega mais rápido ao olho. E meu amigo Lucas Haeser vive dizendo que "quando vejo vermelho tenho sede porque lembro de Coca-Cola" (aliás, o link foi ele quem passou).
Leva muitos anos para o designer dominar a interação entre as cores. É preciso muito experimentação e estudo. Observar obras de arte é uma das melhores referências para isso. São os artistas que experimentam mais nesse campo.
Primeira dica no processo: pare de olhar para o PC. Sim, o papel ainda é
o melhor suporte para rabiscar idéias e é assim que você
deve começar. A vantagem é que você não precisa se
preocupar com os enfeites, ganha velocidade e pode pirar mais. Ninguém
vai olhar torto se você tiver uma idéia fraca desenhada de forma
tosca. Porém, se você tiver uma idéia fraca desenhada de
forma cuidadosa, eu serei o primeiro a atirar a pedra.
O autor do livro recomenda criar pelo menos três opções
de cada ícone, mesmo que a primeira pareça fantástica.
Depois quando for montado o mapa de pixels, pode ser que a idéia fantástica
simplesmente não caiba na moldura. Ah, sim, antes de começar qualquer
ícone, tenha certeza do seu suporte. Vetorial ou bitmap? 16px, 32px ou
48px? 256 ou 16 milhões de cores? Várias versões?
Estava almoçando num restaurante Indiano e vi um folheto maluco sobre
um tal Calendário da Paz.
Só de curiosidade abri e dei uma folheada, para dar risada desse esotéricos
apocalípticos. Por acaso, encontrei um material muito rico para designers
de interface lá no meio. O tal calendário é de origem Maia
e usa ícones para identificar as tribos
solares, que governam cada uma, dezesseis dias do ano. Note como o mago
que fez essa arte conseguiu compactar muito bem conceitos complexos como sobreviver,
catalizar e sobreviver em poucas linhas gráficas.
Falei sobre caminhos do ponto de vista de quem
abre a picada e agora vou tentar verbalizar como minha mente escolhe os
caminhos que tomo ao perambular pelas praças de minha cidade. Curitiba
é uma cidade bem arborizada e com planejamento urbano inegável,
mas algumas de suas praças me deixam confuso.
Sou adepto dessa filosofia de escolher
sempre o caminho mais bonito, mas às vezes estou com pressa demais
para me dar a esse luxo. Da faculdade até o almoço e depois ao
trabalho levo mais de uma hora andando. Nas regiões mais calmas, aproveito
para ler no Palm enquanto ando (se não acredita, em breve postarei fotos
para provar a nerdice). De qualquer forma, não estou muito disposto a
um "belo passeio".
A praça que mais gosto nessa hora é a Eufrásio Corrêa,
em frente ao Shopping Estação:
Não preciso pensar muito para planejar o caminho mais rápido.
Mesmo o caminho sendo meio monótono, não deixa de ser muito bonita,
contando com uma bela fonte no centro. Pouca gente pára por lá,
infelizmente.
Pergunte aos seus amigos que não sabem que você faz banners para
viver se eles costumam ver os banners na Internet. "Ah sim, claro",
responderão. Pergunte o que eles viram anunciado. "Enlarge your
penis" e outras sacanagens, talvez. Se clicaram qualquer que fosse, fazem
parte de menos de 1% dos seus amigos. Note que essa é uma taxa de cliques
comemorada pelas agências de publicidade online, hoje em dia. Antigamente,
era 2% e mais antigamente ainda, era 7%.
Jason Fried propoz uma nova forma de começar um layout: primeiro
o epicentro. Ao invés de começar pela logomarca, pelo cabeçalho
ou pelo menu, o designer deve começar pelo ponto crítico do layout,
a parte que se fosse retirada mudaria o propósito da página. Ou
seja, se você vai projetar um site institucional cuja maior função
é dar acesso a uma extranet com login e senha, comece por essa caixa.
O resto irradia.
Nunca tinha parado pra pensar nisso, mas é realmente uma boa idéia.
No Usabilidoido acertei, comecei pela coluna da esquerda definindo fundo, tipografia
cores antes de fazer as demais. Mas na maioria dos projetos, acabo começando
pela bendita logomarca, na ânsia de manter a identidade visual. Melhor
começar pelo contéudo central, no caso de sites institucionais.
Porém, acredito que essa abordagem só vai funcionar direito se
for feito um wireframe
da página antes do design gráfico. Para descobrir o que vai
ser mais importante numa página, é preciso analisar cada uma das
partes e valorá-las. No wireframe, o pessoal costuma usar ou números
ou gradações de cinza para indicar importância de cada bloco.
Estou aqui analisando o resultado das entrevistas que fiz com os usuários do site da minha Universidade e fiquei impressionad com o impacto que o vermelho teve na memória deles. Abre o site da UFPR, veja as cores do layout e depois veja a discrepância com o resultado da pergunta:
Que cores você consegue lembrar que tem no site da federal? (múltipla escolha)
Eu sabia que vermelho é potente e que deve ser usado só em casos extremos porque atrai muito a atenção. Mas que ele é tão marcante assim eu não sabia! Pô, de vermelho na página da UFPR só tem num banner que pisca a cada 3 segundos. Tem mais alguns banners estáticos lá pra baixo, mas menos destacados. O laranja está praticamente na mesma proporção, mas não foi tão lembrado.
O mais engraçado é que quando perguntados o que existe na coluna central, ou respondiam que tinha banners irritantes ou simplesmente não se lembravam deles, confirmando a teoria da cegueira de banner. Ao invés de chamar a atenção, o banner acaba fazendo o contrário: esconde a informação que carrega. Dia desses escrevo um post só sobre isso.
Quem olhou com atenção o gráfico e a página da universidade deve estar se perguntando: "onde é que está o cinza que esse pessoal lembrou?" Tenho duas hipóteses ousadas: ou a cor do navegador (cinza por padrão no Windows 95/98) é invocada quando o usuário se lembra de uma página, ou então a cor cinza já foi tão usada em combinação com azul e branco que o usuário reconhece como padrão. O que vocês acham?
Blog
