Altura x

Quando o assunto é fontes, o tamanho faz diferença. O tamanho da fonte precisa ser grande o suficiente para que o usuário leia o texto sem problemas. E isto não se aplica apenas a pessoas idosas, os jovens também reclamam quando a fonte é muito pequena para ler.

Algumas fontes podem ter o mesmo tamanho, mas parecem maiores em função da altura-x (ou x-height). A altura-x é literalmente a altura da letra x, em caixa baixa, na família da fonte. Diferentes fontes têm diferentes alturas-x e como resultado, algumas fontes aparentam ser maiores que outras, mesmo quando estão no mesmo corpo. A imagem abaixo mostra a diferença entre a medida da altura-x e a medida do corpo da fonte.

Algumas famílias de fontes como a Tahoma e a Verdana foram desenvolvidas com altura-x maior, por isso elas são mais fáceis de serem lidas na tela do monitor. As fontes abaixo, pertencem a diferentes famílias, mas estão todas no mesmo corpo (12pt), mas algumas aparentam ser maiores.

Fonte: Weinschenk, Susan. 100 Things Every Designer needs to Know About People. California: New Riders, 2011

Ilusões

Vale a pena conferir o site http://www.purveslab.net .
Ele traz testes visuais interativos, que demonstram como nossos olhos são facilmente enganados. Além de se divertir, você pode descobrir como essas ilusões funcionam.

Reconhecimento das letras

Por séculos as pessoas têm debatido quais fontes são melhores, mais fáceis de serem lidas, ou mais apropriadas. Há uma eterna discussão sobre o uso de fontes serifadas e não serifadas. Alguns argumentam que as fontes sem serifa são mais fáceis de serem lidas porque são mais simples, outros sustentam que as fontes serifadas têm leitura mais fácil, porque a serifa dirige os olhos do leitor para a próxima letra. Na verdade, as pesquisas não apontam diferenças significativas em termos de compreensão, rapidez, ou preferências entre as fontes serifadas e as não serifadas.

O que as pesquisas indicam é que as pessoas identificam as letras por reconhecimento de padrões. A maioria das pessoas consegue reconhecer as marcas abaixo como a letra “A”. Não memorizamos todas as versões da letra “A”, mas formamos um padrão de memória do que a letra “A” se parece. Quando vemos alguma coisa semelhante, nosso cérebro reconhece o padrão.

Os designers usam fontes para transmitir um estado de espírito, uma qualidade ou associação. Algumas famílias de fonte lembram períodos de tempo (antigo x moderno), enquanto outras lembram seriedade ou diversão. Em termos de leiturabilidade, o que interfere no reconhecimento da letra é se o desenho dela é muito diferente do padrão que o cérebro está habituado a encontrar. Por isso, algumas fontes decorativas, com desenhos exóticos de letras, são mais difíceis de serem lidas, pois interferem com a habilidade do cérebro de reconhecer padrões.

Os textos abaixo mostram diferentes tipos de fontes. A primeira é relativamente fácil de ser lida, mas as outras são mais difíceis. Elas tornam difícil para o cérebro reconhecer os padrões das letras.

Hyunjin Song e Norbert Schwarz realizaram um estudo, em 2008, sobre como o desenho da fonte interfere na maneira como as pessoas percebem o significado dos textos. Eles entregaram, a dois grupos de pessoas, instruções de como realizar determinado exercício físico. Para o primeiro grupo, as instruções usavam uma fonte "limpa", como a Arial. Para o segundo grupo, as instruções foram grafadas na fonte Brush Script. As pessoas que leram as instruções com a fonte Arial, disseram que levariam cerca de 8 minutos para realizar o exercício e que não achavam que seria difícil fazer o exercício. O grupo que leu as instruções em Brush Script  estimou que levaria em média 15 minutos para realizar o exercício e que achava o exercício difícil de ser praticado.

Podemos dizer, então, que o desenho da fonte pode interferir em como as pessoas percebem as informações contidas no texto. Se a pessoa tem dificuldade em ler a fonte, ela pode transferir a sensação de dificuldade para a interpretação do texto e achar que o assunto é difícil de ser entendido.

Fonte: Weinschenk, Susan. 100 Things Every Designer needs to Know About People. California: New Riders, 2011

Affordances

 Você já deve ter tido a experiência de tentar puxar uma porta, mas na verdade o que você precisava fazer era empurrá-la, para abrir. No mundo real, os objetos comunicam para nós como podemos  e devemos interagir com eles. Por exemplo, pelo seus tamanhos e formas, as maçanetas nos convidam a segurá-las e girá-las. A alça da caneca nos diz para curvar nossos dedos em torno dela para segurá-la. A tesoura nos convida a colocar nossos dedos através dos círculos em suas extremidades e fazer o movimento de abri-los e fechá-los. Na verdade, estes objetos não dão pistas, dicas que como manipulá-los. Estas pistas ou dicas são chamadas de affordances (não achei nenhuma palavra em português que tivesse sentido, por isso vou chamar de affordances mesmo).

James Gibson desenvolveu a ideia de affordances em 1979. Ele descreveu affordances como possibilidades de ações em uma determinada situação. Em 1988, Don Norman retrabalhou o conceito, desenvolvendo a ideia de affordances percebidas: se você quer que uma pessoa exerça uma ação sobre um objeto, você deve ter certeza que ela possa facilmente perceber, imaginar e interpretar o que o objeto é e o que ela pode ou deveria fazer com ele.

Quando você tenta realizar uma tarefa, tal como abrir uma porta ou fazer um pedido de um livro em um website, você automaticamente, olha ao seu redor para achar objetos e ferramentas para ajudá-lo. Se você é um web designer e vai projetar um site de venda de livros, você deve se certificar que os objetos e ferramentas deste contexto sejam fáceis de serem vistas e achadas, ou seja, você precisa  fornecer claras affordances para os usuários.

A imagem da maçaneta, abaixo, pela sua forma, nos convida a segurá-la e puxá-la para baixo. Se ela realmente funcionar desta maneira, podemos dizer que ela foi bem projetada e que ela possui uma “affordance percebida” clara.

Já nesta outra imagem, o design da maçaneta nos convida a segurá-la e puxá-la, mas o aviso PUSH (empurrar) indica que a porta não funciona desta maneira. Este seria um exemplo de affordance falho.

Você já se perguntou o que leva uma pessoa a querer clicar em um botão da web? Pistas, como as sombras de um botão, podem dizer que ele tem volume e pode ser empurrado, como se fosse um botão em um dispositivo real. As formas e as sombras da imagem do controle remoto nos convidam a pressionar o botão para ativá-lo.

Podemos simular estas sombras no computador, Na imagem abaixo, sombras de diferentes cores ao redor das margens do botão, passam a impressão que ele está para baixo (pressionado).

Ms se virarmos a figura, as sombras vão indicar que ele está pronto para ser pressionado.

Estas pistas visual são sutis, mas importantes. Muitos botões da web usam estas pistas visuais, como o botão abaixo, que também utiliza o sombreamento para ficar parecido com um botão do mundo real.

Mas ultimamente os web sites estão perdendo estas pistas. Abaixo um exemplo de botão que é apenas um texto em um retângulo colorido.

A grande maioria das pessoas sabe que uma frase na web, azul e sublinhada, significa um hiperlink, ou seja se você clicar ali você será redirecionado para outra página. Isto é um affordance. Mas ultimamente , os hiperlinks estão se tornando mais sútis, mostrando que são “clicáveis”, apenas quando passamos o cursor sobre eles. Isto mostra que novos affordances estão sendo desenvolvidos.

Dicas:

• Leve em conta os affordances, quando estiver desenvolvendo trabalhos de design. Ao dar pistas sobre o que as pessoas devem fazer com determinados objetos, você estará facilitando a ação do usuário.
• Evite fornecer affordances incorretos.

Fonte: Weinschenk, Susan. 100 Things Every Designer needs to Know About People. California: New Riders, 2011.

Ver e perceber

De um modo geral, acreditamos que, quando estamos olhando o mundo a nossa volta, nossos olhos estão enviando informações para nosso cérebro, que processa estas informações e nos dá uma experiência real do que está lá fora. Mas, na verdade, o que resulta em nosso cérebro não é exatamente o que nossos olhos vêem. Nosso cérebro está constantemente interpretando tudo que vemos. Na figura abaixo, a maioria das pessoas vê um triângulo com linhas pretas no fundo e um outro triângulo branco,  de ponta cabeça, sobre ele. Fisicamente isto não é o que está lá.  Na realidade, o que existe são linhas simples e círculos parciais. Nosso cérebro cria a forma do triângulo branco, porque isto é o que o cérebro espera que esteja lá. Este tipo de ilusão é chamado de Triângulo de Kanizsa, um pesquisador italiano que desenvolveu estudos sobre percepção, por volta de 1955.

Nosso cérebro cria atalhos para que possamos, instantaneamente, fazer com que o mundo ao redor tenha sentido. Nós recebemos milhões de estímulos a cada segundo (aproximadamente 40 milhões) e nosso cérebro tenta fazer com que todas estas informações tenham sentido. Baseado na nossa experiência passada, o cérebro tenta advinhar tudo que enxergamos. Na maioria das vezes isto funciona, mas algumas vezes pode causar erros.

Podemos  influenciar o que as pessoas vêem, ou pensam que vêem, usando formas e cores. As figuras abaixo mostram isto:

Dicas:

O que  as pessoas vão ver no material gráfico que você está criando, depende da experiência, do conhecimento e das expectativas que estas pessoas possuem. Pense nisto quando estiver trabalhando em algo.

Você pode persuadir as pessoas a verem coisas de uma certa maneira. Isto vai depender de como essas coisas são apresentadas.

Fonte: Weinschenk, Susan M. 100 Things Every Designer Should Know About People. California: New Riders, 2011.

Fique atento aos padrões

Nós reconhecemos objetos por perceber padrões neles. Nossos olhos e cérebro trabalham criando padrões. Na figura abaixo, a maioria das pessoas vê quatro grupos de dois pontos, ao invés de oito pontos individuais. O espaço entre os grupos também é visto como padrão.

Uma teoria antiga diz que o cérebro tem um banco de memória que armazena milhões de imagens de objetos. Quando olhamos para um objeto, nós o comparamos com os itens que estão no banco de memória até que encontrar um que combine. Pesquisas mais recentes sugerem que reconhecemos algumas formas básicas naquilo que estamos olhando e que usamos estas formas básicas, chamadas de ícones geométricos (ou geons) para identificar os objetos. Irving Biederman desenvolveu a ideia dos geons em 1985. Ele argumentou que há 24 formas básicas e que elas formam a estrutura de todos os objetos que vemos e reconhecemos.

Dicas:

• Agrupe itens relacionados e use espaços entre grupos de itens para criar padrões.
• Se quiser que as pessoas reconheçam um objeto, use uma representação geométrica do objeto. Isto tornará mais fácil reconhecer os geons embutidos e facilitará o reconhecimento do objeto.

Fonte: Weinschenk, Susan. 100 Things Every Designer Should Know About People. California: New Riders, 2011.

Começo de conversa

 

A inspiração para criar o blog, na verdade, veio do desejo de compartilhar algumas coisas interessantes que vi no livro 100 Things every designer needs to know about people, de Susan M. Weinschenk, que é Ph.D em Psicologia. Um livro que trata da psicologia do design, dando dicas para os designers de como as pessoas veem, leem, se lembram, pensam, etc. Conhecer melhor como as pessoas são, sentem e se comportam pode ajudar os designers a projetar melhor os sites, os cartazes, as revistas que serão lidos e observados.

Algumas colocações da autora, eu já havia visto em outros livros, mas consegui entender mais adequadamente alguns dogmas do design gráfico. Pra quem lê bem em inglês, vale a pena comprar o livro. Os demais podem se valer das minhas postagens. Não prometo uma tradução integral, mas pequenas doses de conhecimento.

Colocar tudo em caixa alta dificulta a leitura

Vi esta afirmação em diversos livros de design, mas nunca encontrei uma explicação “científica” para isto.

A leitura se processa através do reconhecimento da forma das palavras e dos grupos de palavras. Palavras grafadas com caixa alta e baixa têm formas diferenciadas, enquanto aquelas, só com caixa alta, têm formas mais regulares.

A explicação parece plausível, mas não totalmente adequada. Não há pesquisas que comprovem que a forma das palavras torna a leitura mais fácil ou mais difícil. O que se comprovou é que nós realmente lemos palavras em caixa alta mais lentamente, mas isto ocorre porque a maioria dos textos, que entramos em contato, usa uma mistura de caixa alta e baixa. Portanto, como estamos acostumados com textos em caixa alta e baixa, a leitura ocorre com mais facilidade.

É bom lembrar que, pelas regras difundidas na era da comunicação digital, letras em caixa alta podem ser entendidas como se estivéssemos gritando.

Dica:

Use palavras e frases em caixa alta com moderação, de preferência em títulos apenas. Evite textos longos com todas as letras em caixa alta.