INTRODUÇÃO À INTERFACES HEURÍSTICAS

Olá, meu nome é Rafael Oli e atualmente trabalho como Designer de Produto na Pagar.me. Decidi escrever esse artigo para compartilhar um pouco do conhecimento que venho acumulando em minha trajetória profissional, seja empreendendo com empresas de tecnologia ou em agências de publicidade.

Dentro da Pagar.me, entre outras funções (pesquisa de campo, feedback de usuários, criação de mapas e jornadas de experiência, análise de comportamento do usuário, etc.), sou responsável por desenhar todas as interfaces e fluxos de interação do produto. Basicamente, estudar e traduzir a gigantesca quantidade de dados do mercado financeiro, até então pouco explorado em termos de tecnologia e inovação.

A complexidade dos fluxos financeiros e seus desafios diários me fizeram buscar novos métodos de refinar a experiência de usuário. Por esse motivo, comecei a estudar a psicologia cognitiva por trás das dashboards de informação.

Neste artigo vamos focar nos aspectos elementares das interfaces de usuário, entendendo como funcionam nossas funções cognitivas e exemplificando na prática como nosso cérebro absorve, correlaciona e retém dados abstratos.

O artigo é baseado em diversos textos de Jakob Nielsen, pesquisas pontuais sobre funções cognitivas e meu expertise profissional como híbrido de UI/UX.

Referências no fim da página.

A palavra Heurística tem origem no termo grego εὑρίσκω, que significa “encontrar” ou “descobrir”. A mesma origem da famosa palavra eureka (εὕρηκα), do matemático Arquimedes, lembra?

Os termos “Avaliação Heurística” e “Usabilidade Heurística” foram criados por Rolph Molich e Jakob Nielsen, cientista da computação com Ph.D. em interação homem-máquina e User Advocate (porta-voz designado para facilitar a interação entre designers e usuários no processo de desenvolvimento de produto). Atualmente, é diretor da Nielsen Norman Group, empresa co-fundada com o Dr. Donald A. Norman, ex-vice-presidente de pesquisas da Apple. Além disso, Nielsen, que é dinamarquês, detém 79 patentes americanas, a maioria delas visando facilitar a vida do usuário na internet.

Hoje, a palavra “heurística” pode ser traduzida como método ou processo de encontrar soluções para um problema. Um procedimento simplificador para buscar resoluções viáveis em questões difíceis, ainda que imperfeitas. Esse procedimento pode ser tanto uma técnica deliberada de resolução de problemas como uma operação de comportamento automática, intuitiva e inconsciente.

A infeliz verdade é que nosso cérebro não foi feito para compreender informações abstratas. Com nossa atenção sendo bombardeada diariamente, as transcrições de dados devem funcionar como uma clareira, um respiro legível flutuando em um oceano de informações.

Toda interface funciona como uma ponte, que interliga, por meios visuais, sistemas e máquinas com seres humanos. Por isso, antes de pensar na escolha tipográfica e na paleta de cores (UI) de qualquer sistema, devemos estudar mais sobre nós mesmos.

Somente entendendo exatamente como nossas funções cognitivas funcionam e como absorvemos e abstraímos dados desconhecidos poderemos otimizar a usabilidade e desenhar fluxos sólidos, canalizando habilidades e contornando limitações.

Sim. O cérebro humano é limitado. E isso não é novidade pra ninguém.

A memória consiste em um conjunto de mecanismos que nos permite manipular e compreender o mundo, levando em conta o contexto vivido e nossas experiências individuais. Podemos considerá-la peça chave no entendimento de como seres humanos entendem e absorvem novas informações, assimilando o pensamento abstrato.

Para entender as engrenagens da memória, vamos dividir seu processo cognitivo em três partes:

• Memória Sensorial (Codificação): Por meio dos sentidos, nosso cérebro identifica, processa e compara a informação, varrendo as lembranças e reconhecendo padrões (média de duração de 2–5 milissegundos).
• Memória de Curto Prazo (Retenção): Após a codificação inicial, nosso cérebro retém as informações por alguns instantes (15–30 segundos) e então decide se devem ser descartadas ou armazenadas.
• Memória de Longo Prazo (Recuperação): Finalmente, nosso cérebro armazena as informações úteis para que sejam reutilizadas.

Entendendo a visão macro dos mecanismos da memória, podemos entrar nos detalhes de cada esfera, exemplificando e aproximando seus conceitos do nosso universo.

Coordenada pela atenção, nossa memória sensorial capta tudo o que sentimos através dos cinco sentidos. Eles são responsáveis por analisar a informação e acessar nossas memórias armazenadas, comparando nossas experiências vividas anteriormente e fazendo correlações de padrões.

Isso se aplica não apenas a formas, mas também a comportamentos.

É nessa esfera que a affordance entra em ação. Ou seja, a informação visual dos objetos torna óbvia sua utilização.

Quando varremos uma interface pela primeira vez, nosso cérebro codifica as informações visuais e procura padrões. É nesse momento que reconhecemos que um retângulo colorido é um botão e que, possivelmente, possui uma interação de clique.

Afinal de contas, quantos botões você já apertou na vida?

Reconhecer vs Recordar

Sim, reconhecer e recordar são coisas distintas.

Sua principal diferença é o caminho que a informação percorre na ativação. Quando somos impactados por um dado abstrato, nossos neurônios enviam informações uns aos outros por sinapses, até que seja encontrado um padrão.

Reconhecer possui uma assimilação muito mais rápida do que recordar.

Quando você reconhece algo, ativa vários pontos da rede neural ao mesmo tempo. Isso faz o cérebro encontrar padrões mais rapidamente e é o motivo pelo qual questões de múltipla escolha são mais fáceis do que dissertativas.

Já na recordação, são ativadas apenas lembranças pontuais. Um bom exemplo de recordação relacionada a interfaces é o login. Quando acessa um site que pede seu login e senha, você utiliza apenas o contexto daquela interface, logo ou url para espalhar a informação, ativando bem menos lembranças e, consequentemente, demorando mais para encontrar a resposta certa.

Reconhecer é confirmar se as informações fornecidas estão corretas.
Recordar é ativar lembranças pontuais buscando a informação correta.

Para gerar affordance corretamente, projete o elemento com duas ou três lembranças diferentes, sugerindo interação e indicando seu sentido ao mesmo tempo.

Observe este objeto:

Consegue imaginar sua função?
Veja como nosso cérebro processa essa informação visual:

1. Sua memória sensorial reconhece o padrão de formato retangular e o associa a um botão, sugerindo uma interação de clique (affordance).
2. O ícone ativa a lembrança de uma silhueta humana, sugerindo a correlação entre a interação do objeto e uma pessoa.
3. Por fim, a legenda contextualiza o sentido, resumindo a ação da interação em uma única palavra.

Esse conceito não precisa ser aplicado apenas a botões.
Veja outro exemplo:

Lembre-se, a usabilidade está em reconhecer objetos, não em recordar deles. Procure tornar óbvio o reconhecimento e o entendimento das interações ativando ao menos duas lembranças do usuário por elemento.

É em nossa memória de curto prazo que todos aqueles dados codificados pela memória sensorial são analisados. Nesse momento, entendemos o contexto e decidimos se utilizaremos essa informação posteriormente ou se ela deve ser descartada.

Quando tratamos de pensamento abstrato, nossos recursos intelectuais são extremamente limitados. Nossa memória de curto prazo, por exemplo, se restringe (em média) a apenas sete espaços rotativos de informação.

A única forma de contornar esse tipo de limitação é minimizando a carga de memória do usuário.

Para fazer isso, desenhe sempre aplicações com o máximo de feedback possível, seja sobre o comportamento do sistema, seja sobre suas ações prévias.

Observe os exemplos abaixo:

Ações prévias

Se uma tarefa tem uma sequência definida de passos, adicione uma quebra visual nas funções concluídas. Desse modo, o usuário não precisará lembrar o que já preencheu e terá visão clara sobre o progresso realizado.

Comportamento do sistema

Inclua sempre o tempo de resposta do processamento.

Deixar o usuário às claras é imprescindível. Assim, evitamos que ele esqueça o que está fazendo enquanto espera ou até mesmo que feche a janela, imaginando que o sistema travou.

1. O botão entrega o significado e sugere a interação, como vimos anteriormente.
2. O elemento se transforma em uma barra de porcentagem para oferecer feedback direto ao usuário sobre o andamento do processo.
3. A legenda relembra o usuário sobre o arquivo escolhido e o ícone confirma o fim do processo.

Outro exemplo de utilização é incluir uma legenda de descrição nos loadings principais das páginas, relembrando o usuário da seção que ele escolheu acessar.

Lembre-se de nunca deixar o usuário no escuro.
Procure dar feedback sobre as ações prévias ou o comportamento do sistema.

A memória de longo prazo guarda as informações relevantes oriundas da memória de curto prazo. Posteriormente, essas lembranças são ativadas e comparadas com as informações captadas na memória sensorial.

Essa ativação é influenciada por três fatores principais:

Contexto: Informação visual presente no foco de atenção.
Recência: Quão recentemente esse padrão de lembranças foi utilizado.
Prática: Quantas vezes esse padrão de lembranças foi utilizado no passado.

Para gerar recência e prática, é necessário o contexto prévio.

Por isso, é importante coordenar a atenção do usuário por meio das linhas da interface, imprimindo uma ordem à leitura e uma hierarquia de entendimento.

Eduque o usuário

Em vez de agrupar todo o conteúdo de ajuda em uma única seção da plataforma, que tal educar o comportamento do usuário com doses homeopáticas de informação?

Faça com que o usuário receba informações curtas sobre o funcionamento do sistema de forma passiva e natural. Lembre-se que as explicações devem ser o mais diretas e resumidas possível.

Hotkeys e Atalhos

Não tenha medo de utilizar hotkeys e atalhos se acreditar que são úteis.

Apenas ensine o usuário a utilizá-los de forma correta, adicionando módulos de informações complementares.

Uma vez entendendo que aquela ação facilita a vida,
ele vai passar a usá-la com frequência.

Uma dica para contornar o incômodo em hardcore users é pôr essa informação complementar fora das linhas de ação e desenhar um meio de desligar a função.

Tire proveito da recência

Acelere a ativação das memórias disponibilizando as escolhas prévias.
Em campos de busca, disponha uma listagem de suas buscas recentes.

Considerando que acessamos aquela informação recentemente, a probabilidade de a procurarmos novamente em um curto período de tempo é alta.

Lembre-se de educar o usuário de forma passiva e com explicações resumidas. Desenhe hotkeys e atalhos adicionais quando achar necessário, ensinando sempre a forma correta de utilização.

Liste as últimas escolhas do usuário e disponibilize-as com acesso facilitado.

Segundo o dicionário, nossa atenção é a concentração da atividade mental sobre um objeto determinado. Ela controla onde focaremos nossos sentidos e está ligada diretamente a nossa memória sensorial.

Para entender as limitações da atenção humana ao interagir com interfaces devemos falar primordialmente de nossa percepção visual. Afinal de contas, é por meio dela que coordenamos a hierarquia de informações na leitura e entregamos contexto ao usuário.

Primeiramente, relembre como o olho humano funciona:

Em resumo, quando observamos algo, a luz atravessa nossa córnea e cristalino, projetando uma imagem invertida na retina. Essa informação visual, em seguida, é levada pelo nervo óptico até o cérebro para que seja processada.

Nossa retina, no entanto, não tem a mesma sensibilidade em toda sua extensão. Em seu centro, uma pequena área, chamada fóvea, oferece acuidade visual máxima, ou seja, nitidez muito maior que a região do entorno.

Isso significa que possuímos dois campos visuais distintos, um central e outro periférico.

No centro de nossa retina obtemos uma imagem em alta resolução. Na periferia, captamos tudo em baixa resolução.

Já que absorvemos as informações visuais de duas maneiras diferentes, podemos definir um tipo de atenção para cada:

Atenção concentrada (campo visual central)
Atenção vigilante (campo visual periférico)

Entendendo os mecanismos de nossa percepção visual podemos compreender mais detalhadamente cada tipo de atenção,
obtendo exemplos práticos de utilização.

Nossa atenção concentrada é um processo de alta ordem, extremamente importante na tomada de decisões. Ela acontece no córtex pré-frontal e é fundamental no processo de leitura.

Quando o usuário acessa uma interface, realiza uma varredura com os olhos, lendo a interface e decodificando as informações. Um estudo realizado por Jakob com 232 usuários colocou-os diante de milhares de páginas. Constatou-se que possuímos um comportamento de leitura interessante quando estamos lendo uma página da internet.

Esse padrão dominante de leitura é muito
semelhante ao formato das letras F ou E.

Observe a imagem abaixo:

• Os usuários batem o olho no canto esquerdo superior e varrem a interface em linha horizontal, escaneando toda a parte superior do conteúdo.
• Em seguida, movem sua visão para baixo e recomeçam uma segunda linha horizontal, desta vez um pouco mais curta.
• Finalmente, terminam por correr o olho em movimento vertical, formando a perna do F.

É interessante notar que esse padrão de leitura é semelhante à leitura analógica de um livro, na qual guiamos continuamente o olhar em movimentos horizontais linha após linha, da esquerda para a direita.

Os principais fatores de influenciação no movimento de leitura são os impactos visuais e as linhas de ação da interface. Estas, visíveis até mesmo de nosso campo de visão periférico, guiam nosso olhar e despertam nossa atenção concentrada por meio da atenção vigilante.

Complicou? Vamos analisar melhor cada fator:

Impactos Visuais (punches)

Quando lemos algo, nosso cérebro assimila variações gráficas expressivas como indicativas de mudança no sentido. Por isso é tão fácil ler tópicos com bulletpoints. Esses socos visuais têm papel fundamental na ordem de leitura do usuário e servem principalmente para despertar a atenção vigilante. Seu peso gráfico possui tanto contraste que podem ser observados até mesmo da visão periférica, em baixa resolução.

A partir dos punches, a visão do usuário é guiada, proporcionando
hierarquia na leitura e ordem de entendimento.

Veja a imagem abaixo:

Linhas de Ação (trilhos)

Sabendo que nossa leitura se projeta em F ou E, desenhe as manchas de informação em forma de trilhos visuais, guiando o olhar do usuário pelas informações horizontais, sempre utilizando punches para atrair a atenção vigilante.

Veja o exemplo abaixo:

Lembre-se de espalhar as manchas de informação em forma de trilhos horizontais, guiando o olhar do usuário pelas informações sempre com punches para atrair a atenção vigilante e propondo hierarquia na leitura.

A atenção vigilante garante que estímulos que aconteçam fora de nossa atenção concentrada rapidamente atraiam o foco principal. Quando você está trabalhando e ouve o barulho de uma mensagem nova no celular, é sua atenção vigilante que capta essa informação.

O mesmo ocorre quando você está no Facebook ou Gmail e chega uma notificação. O contraste do vermelho é tão forte que atrai sua atenção, mesmo em baixa resolução.

Veja os exemplos abaixo:

Por esse motivo, sempre que for desenhar um sistema de notificações, garanta que, ao chegarem novas mensagens, o elemento indicador tenha contraste forte o suficiente para que seja percebido até mesmo em seu campo visual periférico.

Lembre-se de chamar a atenção do usuário quando houver
um alerta passivo. Para isso, utilize uma variação gráfica que ofereça constraste suficiente para ser percebida pela atenção vigilante.

Espero que a leitura tenha trazido bons insights sobre a construção de interfaces consistentes. Se gostou do artigo, não deixe de compartilhar com seus colegas (fronts, designers, IA’s, etc).

Para acompanhar os próximos conteúdos, não deixe de me seguir no medium: https://medium.com/@rafaoli

Fique à vontade para entrar em contato:

E-mail: rafael@cacho.la
Behance: rafaeloli.prosite.com
Fanpage: https://www.facebook.com/theartofrafaeloli
Linkedin: https://br.linkedin.com/in/rafaeloli

Referências:
http://www.nngroup.com/articles/short-term-memory-and-web-usability/
http://www.nngroup.com/articles/ten-usability-heuristics/
http://www.nngroup.com/articles/recognition-and-recall/
http://www.nngroup.com/articles/minimize-cognitive-load/
http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

http://repositorio.unb.br/bitstream/10482/3485/1/2007_JulianaLeaoBraga.pdf
http://www.ic.unicamp.br/~wainer/cursos/906/trabalhos/M5.pdf
http://www.anpad.org.br/diversos/trabalhos/EnADI/enadi_2013/2013_EnADI66.pdf

http://www.creativebloq.com/ux/how-human-eye-reads-website-111413463
https://uxmag.com/articles/the-psychology-behind-information-dashboards
http://asktog.com/atc/principles-of-interaction-design/
https://pt.wikipedia.org/wiki/Jakob_Nielsen

MUITO OBRIGADO