Infográfico: Usability Testing

O teste de usabilidade é uma das principais ferramentas que o profissional de interfaces possui para verificar a qualidade do seu trabalho, medindo a efetividade do mesmo quando exposto aos usuários alvo. Abaixo, um infográfico que resume os cuidados que se deve tomar sempre que tal atividade é realizada:

via

O que é a Psicologia Gestalt e como ela pode auxiliar no Design de Interface

Nada tão simples que caiba em um simples post, mas vamos lá. O pioneiro nos estudos da Gestalt foi Von Ehrenfels, filósofo do fim do século XIX. Por volta de 1910, surgiram outros três grandes nomes que deram início efetivo aos estudos da teoria da forma: Max Wertheimer (1880-1943), Wolfgang Kohler (1887-1967) e Kurt Koffka (1886-1941). Estes homens contribuíram fortemente aos estudos de áreas como da percepção, linguagem, aprendizagem e memória, buscando a compreensão do porquê algumas imagens agradam mais ao olhar humano do que outras. Para embasar suas teorias, os gestaltistas se opunham ao subjetivismo, apoiando suas pesquisas sobre a fisiologia do sistema nervoso, partindo do elemento mais fundamental quando o assunto é a percepção das imagens: o olho.

A Gestalt se sustenta sobre o fato de que nossa percepção dos objetos é diferente do que eles realmente são, ou seja, nosso cérebro distorce o que nossos olhos captam de tal forma que é capaz de gerar ilusões de ótica. Estas ilusões são resultado da forma como percebemos as imagens. Segundo Koffka, o olhar nunca se dá inicialmente sobre partes específicas de um objeto, mas sim do todo. Nosso cérebro não é capaz de entender elementos distintos da mesma forma que interpreta uma forma completa, já que esta percepção não depende só da soma das partes, mas do contexto geral que elas representam juntas.

Não vemos partes isoladas, mas relações. Isto é, uma parte na dependência de outra parte. Para a nossa percepção, que é resultado de uma sensação global, as partes são inseparáveis do todo e são outra coisa que não elas mesmas, fora desse todo – KOFFKA, 1975.

Tudo o que vemos é influenciado pela nossa experiência, mas isso não quer dizer que esta experiência é o fato crucial para a interpretação das coisas. Na verdade, as coisas são reconhecidas como unidades por razões mais complexas que nos dão condições de, somente então, adquirir experiência com elas. Nós captamos as coisas como unidades, salvo quando não sabemos do que o objeto visualizado se trata. Isso pode ocorrer quando olhamos para um objeto no escuro, ou quando este objeto é desconhecido em nossas vidas até então.

Para o entendimento das percepções visuais, abordarei aqui alguns princípios denominados Leis da Gestalt:

Lei da Unidade: uma unidade pode ser um único elemento isolado ou parte de um todo. Em outras palavras, as unidades de uma imagem podem ser percebidas dentro de um todo através de pontos, linhas, cores, etc., isolados ou combinados entre si.

Lei da Segregação: a segregação é a nossa capacidade de separar os diversos elementos de um todo, dividindo-o em partes. Podemos isolar determinadas partes da imagem observada dependendo do foco e atenção que estamos dando a esta parte específica.

Lei da Unificação: o processo de unificação se dá no momento em que verificamos alguma harmonia ou coerência entre duas ou mais formas durante uma observação. As leis de proximidade e semelhança têm grande importância para que isso seja possível.

Lei do Fechamento: a sensação de fechamento ocorre quando, espontaneamente, uma determinada forma é segregada do restante do campo possibilitando a percepção de um novo elemento independente. Este efeito é utilizado em diversos logotipos de grandes empresas em todo o mundo.

Lei da Continuidade: percebemos uma boa continuidade na imagem quando ela expressa fluidez visual, sem quebras ou interrupções. A tendência de uma imagem coerente é de não possuir instabilidades estruturais repentinas.

Lei da Proximidade: ao visualizar uma imagem, nosso cérebro tende a agrupar elementos próximos dentro de um mesmo plano. Com isso, a percepção é de estar observando um conjunto de elementos que formam uma forma global, mesmo que isso não esteja nítido em um primeiro momento.

Lei da Semelhança: ao localizar objetos semelhantes, sejam em forma, cor, tamanho, peso ou direção, a tendência natural do nosso cérebro é agrupar estes elementos e fazer com que eles façam parte de algo único.

Lei da Pragnância: talvez a mais importante das leis da Gestalt, a pragnância da forma “pressupõe que a organização formal do objeto, no sentido psicológico, tenderá a ser sempre a melhor possível do ponto de vista estrutural”. Ou seja, para que se tenha alta pragnância, um objeto deve ser equilibrado e harmonioso.

Com essas leis jogando a favor do designer, é possível influenciar e muito a experiência do usuário na interface, a forma como ele enxerga os elementos separadamente e o conjunto deles também. Observe abaixo uma imagem que deixa claro como os especialistas da Globo.com utilizam as cores para facilitar o entendimento dos usuários sobre os conteúdos relacionados com cada uma das seções:

A presença das leis de fechamento, similaridade e proximidade ficam evidentes quando se observa a figura acima, formada por três versões da página: a captura original (esquerda), a que contém indicações de fechamento visual entre os conteúdos (meio) e a com demonstração de similaridade entre os fechamentos estabelecidos (direita).

Fica claro que o alinhamento dos conteúdos, aliado à similaridade que as cores possibilitam, é fator crucial para a excelente pragnância, harmonia e equilíbrio de uma interface. Fatores esses que devem ser muito bem estudados pelo designer, em tempo de projeto, com objetivo de garantir que o entendimento do usuário evolua conforme o desejado.

Referências:

  • GOMES FILHO, João. Gestalt do Objeto: sistema de leitura visual da forma. São Paulo: Escrituras, 2000. [compre]
  • KOFFKA, Kurt. Princípios de Psicologia da Gestalt. São Paulo: Cultrix, 1975. [compre]

A Psicologia das Cores e sua Influência na Experiência do Usuário

Até o século XIX o número de cores conhecido era muito reduzido, devido ao fato dos pigmentos utilizados serem baseados em matéria orgânica. Desta forma, somente pessoas com bons atributos financeiros conseguiam adquirir materiais adequados para pinturas, etc. O restante dos artistas ficava bastante limitado a essências de plantas e outras substâncias encontradas na natureza para realizar suas obras. Com a evolução da computação gráfica no século XX e até os dias de hoje, temos uma infinidade de cores disponíveis a todos, ao alcance de nossos olhos frente às telas do cinema, das televisões, dos computadores, dos celulares, dos tablets, etc. Não é à toa que a tela atrai tanto a atenção do ser humano e o encanta de forma perturbadora.

A evolução da tecnologia e a consequente facilidade no acesso a na manipulação das cores, no entanto, não resultaram na banalização da escolha da cor para um fim específico. Muito pelo contrário, cada vez mais pesquisas mostram o quão complexo é o processo da percepção das cores pelo ser humano. É neste cenário que nos remetemos ao estudo da psicologia das cores.

Fraser e Banks (2007) defendem que, apesar dos webdesigners terem à sua disposição uma infinidade de combinações e paletas de cores diferentes, é necessário que contenham o entusiasmo exagerado se desejam que suas criações sejam admiradas pela maioria dos usuários comuns.

Ao pesquisar sobre a psicologia das cores a grande maioria das fontes trata basicamente da separação destas em duas categorias: cores quentes e cores frias. As cores quentes, como o vermelho, o laranja, além do amarelo e o roxo, até determinada tonalidade, são reconhecidas consensualmente como cores que nos dão uma sensação de calor, peso e excitação. Por outro lado, as cores frias como o azul, o verde e demais faixas do amarelo e do roxo, produzem percepções de frio, leveza, transparência e calma. Esta classificação, no entanto, é tênue e simples demais para que se possa conduzir a um bom entendimento dos elementos de um site ou de uma campanha publicitária, por exemplo.

Ok, então teremos que aprofundar mais… Quando uma pessoa vê determinada cor, na realidade não é a cor em si que gera a ideia que lhe é transmitida, mas sim a cor em função de algo, em relação a determinado uso para qual esta cor está sendo utilizada (FARINA, 1990). Em outras palavras, as cores geram estímulos psicológicos no ser humano, interferindo na percepção do que é bom ou ruim, positivo ou negativo, quente ou frio, atrativo ou repulsivo, etc. É importante ressaltar que se trata de um assunto muito relativo, visto que, apesar da estrutura visual humana ser idêntica em todos os indivíduos, com exceção daqueles que apresentam alguma deficiência tal como o daltonismo, nossas estruturas biológicas não são exatamente iguais, possibilitando percepções com razoáveis diferenças entre duas pessoas visualizando o mesmo objeto. Ou seja, um azul para o sujeito A pode ser diferente de um azul para o sujeito B e assim por diante. Obviamente não vamos considerar essa uma premissa máxima, caso contrário já desistiríamos por aqui. É preciso projetar mirando o centro do alvo e considerar a certeza de que, fatalmente, alguns não serão atingidos em cheio.

A cultura na qual o receptor da mensagem está inserido é um dos fatores que devem ser levados em conta quando fazemos uma análise da psicologia das cores, de acordo com a citação abaixo:

Os costumes sociais são fatores que intervêm nas escolhas das cores. Por exemplo, em determinadas culturas, é hábito diferenciar, através da cor, as vestes das mulheres mais idosas das vestes usadas pelas mais jovens. O mesmo se pode observar na diferenciação dos sexos – FARINA, 1990.

Conclui-se, portanto, que de certa forma o entendimento comum sobre determinada cor é capaz de induzir o indivíduo a relacionar essa cor com determinado objeto, ideia ou sensação de senso comum. Hábitos sociais estabelecidos durante longos espaços de tempo orientam inclinações individuais. Para outro exemplo, vamos pensar na cultura ocidental, que tem como característica relacionar a cor rosa com as crianças do sexo feminino e o azul com as do sexo masculino, ou ainda o branco com paz, tranquilidade e pureza e o preto como luto.

É possível também que a preferência de uma pessoa por uma determinada cor esteja associada a experiências agradáveis ou traumas sofridos no seu passado. Desta forma, quando falamos dos efeitos psicológicos que as cores podem causar em um determinado grupo de pessoas, mesmo que estes indivíduos estejam inseridos em uma cultura semelhante, suas memórias podem vir a interferir subconscientemente na interpretação das mesmas (ARNHEIM, 1997). Este é um fator que torna ainda mais subjetivo o trabalho com os usuário a partir das cores.

Em seu livro Psicodinâmica das Cores em Comunicação, Farina (1990) faz uma reflexão sobre o uso da memória na compreensão das cores. Segundo ele, é evidente que o que vemos em outra época das nossas vidas interfere na interpretação dos objetos que vemos a cada dia que passa:

(…) assim, chegamos à conclusão de que um fato é inegável: mesmo que haja uma parte instintiva na reação à cor, é indiscutível que o homem vai acumulando em sua memória experiências que o definem e o fazem agir de determinadas maneiras no decorrer de sua vida – FARINA, 1990.

Gérard (1970) é outro pesquisador que estuda a modificação do comportamento humano pela experiência e pela memória. Ele afirma que “a memória é a modificação do comportamento humano pela experiência”. Gérard também revela que a região do cérebro responsável pela identificação das cores e quaisquer relações estéticas entre elas chama-se córtex visual. Esta mesma região cerebral ocupa-se das sensações conscientes. Desta forma, conclui-se que a visão cromática do indivíduo e a interpretação que este dá destas cores estão relacionadas ao desenvolvimento e à educação do indivíduo. Ou seja, se aprende desde criança que determinadas cores “servem” para X ou para Y.

Schachtel (1946) diz que a interpretação da cor é um ato passivo, e é a interpretação da forma que exige do indivíduo um pensamento mais organizado. Justifica-se, assim, o uso intenso das cores no meio publicitário como forma de sugerir algo pré-determinado ao receptor passivo. Um ótimo exemplo é o logotipo da rede de restaurantes fast food McDonald’s. O amarelo intenso é usado para gerar ansiedade, o vermelho também gera excitação e fome. Além disso, existe ligação com elementos físicos consumidos em quantidade no ambiente da lanchonete, como o queijo e a mostarda, amarelos, e a carne e o ketchup, vermelhos. As duas cores juntas, presentes em grande quantidade dentro do ambiente, estimulam seus clientes a comerem mais e mais rapidamente.

Concluindo, não é afirmando que a cor A ou B é a mais indicada para ilustrar um botão de ação de compra em uma interface, por exemplo, que este assunto estará resolvido. Todos os fatores, sociais, culturais, pessoais e cognitivos, devem ser considerados quando o foco é o alto grau de satisfação e experiência subjetiva do usuário. Este texto tem o objetivo apenas de ressaltar as variáveis que estão envolvidas no complexo mundo da subjetividade do usuário.

Referências:

  • FARINA, Modesto. Psicodinâmica das Cores em Comunicação. São Paulo: Edgard Blücher, 1990. [compre]
  • FRASER, Tom; BANKS, Adam. O Guia Completo da Cor. São Paulo: Senac, 2007. [compre]
  • GUIMARÃES, Luciano. A Cor Como Informação: a construção biofísica, lingüística e cultural da simbologia das cores. São Paulo: Annablume, 2000. [compre]

Princípios de Design de Interação por toque segundo a Microsoft

Veja esse vídeo de apresentação do Windows 8:

Windows Mobile, Windows 8. É, parece que a Microsoft vem com tudo no quesito design de interação neste ano. Quem é usuário de Windows sabe que este nunca foi o forte da empresa. Pelo contrário, este sempre foi um diferencial positivo da Apple de Steve Jobs (RIP). Mesmo assim, decidi fazer aqui uma citação de um material que me foi passado há alguns dias atrás por um colega. Trata-se de premissas que, segundo a Microsoft, são utilzados nos seus mais novos produtos. Achei interessante principalmente para quem estiver trabalhando em dispositivos de interação por toque. Vejamos:

Linguagem consistente

O Windows 8 oferece um conjunto de interações por toque usadas consistentemente em todo o sistema. A aplicação padronizada dessa linguagem deixa a aparência dos aplicativos familiar à que as pessoas já conhecem. Isso aumenta a confiança do usuário, tornando o aplicativo mais fácil de aprender e usar.

Dedos ≠ mouse

Na utilização de computadores comuns estamos acostumados a realizar interações através de instrumentos como o teclado e o mouse. Esses são instrumentos precisos, ao contrário dos nossos dedos. Pense em uma interface para um dispositivo touch cujo tanto uma menininha de 5 anos quanto um jogador de basquete de 30 poderão ser usuários em potencial. A diferença dos dedos de um de outro é grotesca, e isso exige preocupação. Elementos pequenos requerem precisão. Passar o dedo por um item grande é rápido e fácil, a área de seleção fica maior e, consequentemente, o esforço diminui.

Navegação panorâmica

O Windows 8 conta com uma funcionalidade diferente de exibição das informações. Em vez de colocar o conteúdo em várias guias ou páginas, ele usa grandes telas que permitem movimentos panorâmicos. O “Zoom Semântico” torna a navegação rápida e fluida.

Feedback a cada interação

Aumente a confiança do usuário fornecendo uma resposta visual imediata sempre que a tela for tocada. Os elementos interativos devem reagir mudando de cor, de tamanho ou se mesmo se movendo.

Conteúdo móvel

Os elementos que podem ser arrastados devem seguir o dedo do usuário ao se mover. Botões e outros objetos que não se movem devem retornar ao estado padrão quando o usuário deslizar ou retirar o dedo do elemento.

Interações reversíveis

Se pegar um livro, você poderá colocá-lo de volta onde o encontrou. As interações por toque devem ter comportamento semelhante: devem ser reversíveis. Forneça uma resposta visual para indicar o que acontecerá quando o usuário retirar o dedo da tela. Isso fará com que seja seguro explorar seu aplicativo usando o toque.

Multitouch

Muitas vezes, as pessoas tocam na tela com mais de um dedo e nem percebem. Por isso, segundo a MS, as interações por toque não devem mudar radicalmente com base no número de dedos que tocam a tela. Assim como no mundo real, não deve haver diferença se deslizar algo com um ou três dedos. (Vale lembrar que a Apple utiliza muito funcionalidades diferentes para 1, 2 ou 3 toques).

Interações ilimitadas

As interações que requerem gestos compostos, como dar um toque duplo e pressionar, precisam ser realizadas dentro de um determinado período de tempo. Planeje isso muito bem, porque comumente são acionadas por acidente e são difíceis de precisar corretamente.

Essas são apenas algumas dicas a serem seguidas em projetos envolvendo design de interação. Esse tipo de trabalho deve ser muito bem planejado pois possui variáveis diferenciadas em relação às interfaces tradicionais.

Fonte:

Antes do Wireframe, crie Personas

Antes de iniciar o desenho de uma interface é imprescindível sabermos quem a utilizará depois de pronta. Ocorre que na maioria das vezes não existe tempo ou investimento para a realização de testes com o público-alvo, entrevistas, focus group, etc. Como solucionar esse problemas de uma forma que não impacte no orçamento do projeto? Criando personas. Ok, existem casos em que a interface projetada será utilizada por milhares, milhões de usuários. Mas é tarefa do designer reconhecer esses perfis e resumí-los a nível mais básico, de forma que o projeto seja empático com o público-alvo.

Construindo Personas

Primeiramente é necessária uma pesquisa, quanto mais detalhada melhor. Dados demográficos, culturais, sociais… Depois, deve-se procurar compreender como estas personas usam a interface e quais os seus objetivos mais comuns.

É importante criar pelo menos 2 ou 3 personas para representar os perfis mais frequentes dos usuários. Muitas vezes o cliente possui informações valiosíssimas. Consultá-lo é sempre uma boa ideia. Para ajudar na “personificação”, dê um nome para seus personagens, adicione dados fictícios, incluindo até uma fotografia. Veja um exemplo:

“Ana Lúcia (da imagem acima) é uma gaúcha de 24 anos, solteira, adora cinema e música clássica. Visita frequentemente o e-commerce X para verificar preços de filmes do gênero drama, terror e suspense…”

…e assim por diante.

Essa técnica pode auxiliar o profissional de User Experience ou Design de Interação a reconhecer e simular melhor os usuários das interfaces projetadas, com objetivo de prever uma experiência completa. Com base na fase de pesquisa, os perfis fictícios também podem ser submetidos a Cenários – situações também fictícias – adequados ao contexto ao qual o usuário está inserido no projeto. A técnica prevê situações que podem ocorrer nas interfaces antes mesmo de serem desenvolvidas, o que proporciona uma visualização ainda mais eficaz das interações possíveis.