Um Guia Útil para Dimensões Cognitivas

Usabilidade é uma avaliação do quão fácil interfaces de usuário são fáceis de usar. Trata-se de perguntar o seguinte: “Quão facilmente os usuários podem utilizar a UI do meu produto para alcançar seus objetivos?"

Este artigo não foi escrito por mim. É uma tradução. Créditos no final do artigo.

Há muitas formas de validar interfaces e identificar áreas de melhoramento, uma delas sendo as Heurísticas de Usabilidade, ou Princípios de Design. As 10 Heurísticas de Usabilidade de Nielsen (publicada em 1995) são, de longe, o conjunto mais popular, e são amplamente utilizadas. No entanto, há outras alternativas, embora muito menos conhecidas.

Uma delas abrange as Dimensões Cognitivas: elas foram criadas mais de 20 anos atrás e tem um foco especial em linguagens de programação, mas são incrivelmente relevantes para o design hoje: seus princípios (como você verá a seguir) ainda podem ser aplicados para todos os produtos digitais que nós interagimos, e ajudar a criar interfaces mais usáveis.

A Estrutura de Dimensões Cognitivas foram primeiro apresentadas por Thomas Green (Universidade de Leeds) em 1989/1991. Alguns anos depois, em 1996, Thomas Green e Marian Petre desenvolveram uma longa análise de linguagem de programação usando Dimensões Cognitivas, que explorou com mais profundidade como cada Dimensão funciona e poderia ser utilizada.

Até recentemente, no entanto, essa estrutura permaneceu praticamente dentro do domínio de artigos acadêmicos, e tentativas de explicar as dimensões e sua aplicabilidade ao processo de design de produto eram poucas e distantes entre si. O objetivo desse artigo é apresentar à praticantes de UX cada dimensão e sua aplicabilidade ao processo de design.

As 14 Dimensões Cognitivas de notações

Há 14 Dimensões Cognitivas de notações. Antes de pular para o que são, é importante definir o que uma notação é em primeiro lugar: Uma notação consiste de um elemento de interface — ou um grupo de elementos — com que os usuários interagirão de modo a efetuar uma mudança no sistema. Múltiplas notações podem estar aninhadas em uma mesma tela. Por exemplo, se você considerar o app de telefone do iOS, o teclado com múltiplas teclas é uma notação por ela mesma — responsáveis por compor o número que será discado e por interagir com esse número; ligando, adicionando como um contato, etc. Mas os botões da barra de guia também são notações eles mesmos — que leveria então o usuário para outra tela.

1. Viscosidade

Para fluídos, viscosidade mede sua resistência à alterações locais. Para estruturas de informação, a viscosidade é a quantidade de trabalho que o usuário tem que colocar para efetuar uma pequena alteração. Um sistema que é altamente viscoso requerirá que o usuário tome muitos passos para realizar seu objetivo. Quando validamos sistemas, cada objetivo do usuário vai ter um nível de viscosidade — e o nível deve ser tão baixo quanto possível.

2. Visibilidade

Visibilidade é uma medida de quão facilmente os usuários podem localizar os elementos para realizar seus objetivos. É importante que o sistema não enterre informações ou encapsule elementos, porque quanto menos esforço cognitivo levar para acessar um elemento ou conteúdo da interface, melhor. Quanto mais longa é a pesquisa necessária para encontrar algo, menos visível e menos satisfatória a experiência.

3. Compromisso Precoce

Compromisso precoce é uma medida de "sim/não". O usuário nunca deveria tomar uma decisão antes da informação necessária para ele fazer essa decisão esteja disponível. Se o usuário é perguntado para fazer uma decisão prematuramente, pode ser porque a ordem das coisas é inadequada e não foi cuidadosamente construída. Da mesma maneira que nós não pediríamos para alguém selecionar talheres antes de escolher sua comida, nós não deveríamos pedir a um usuário para escolher fazer uma compra antes de dizer a eles o quanto isso custará.

4. Dependências ocultas

Esse é outro sim/não. Sempre que partes de um sistema são dependentes umas das outras, essa dependência não deve ser ocultada.

Um bom exemplo é o recurso de Símbolo do Sketch App. Quando você cria um Símbolo, ele se torna um elemento que você pode reusar ao longo do seu design — e sempre que você faz mudanças no original, isso afeta todos os outros também.

Você pode aninhar símbolos também — e é aqui onde fica complicado.

Se você aninhar o Símbolo B sob o Símbolo A, então aninhar o Símbolo A sob o Símbolo X (Fazendo X dependente de A, que por sua vez é dependente de B), então fazendo mudanças no Símbolo B resultará em efeitos difíceis de observar ou prever sem uma busca de todos os símbolos associados.

5. Expressividade

A finalidade de um elemento em um sistema deve ser óbvia ou facilmente compreendida pelo usuário. Dois elementos com diferentes finalidades não devem parecer o mesmo, e o usuário não deve ser confundido com sua apresentação. Consistência é a chave e pode ser medida pela experiência como um todo em uma escala progressiva.

6. Propensão a Erro

Os termos e símbolos que usamos em uma aplicação irão determinar o quão propenso a erros o usuário final está. É importante ter certeza que as notações de usuário que usamos ajudarão o usuário a evitar cometer erros ou deslizes. Uma caixa de diálogo pobre que não esclarece o que um usuário deve fazer a seguir tem um alto nível de propensão a erro, já um botão verde que diz Go! tem um baixo nível de propensão a erro.

7. Abstração

Uma abstração é um número de elemenetos agrupados que se destinam a ser tratados como uma entidade ou então para baixar a viscosidade ou ajudar o usuário entender aquele elemento de UI. A barreira da abstração é o número de abstrações que um usuário precisa dominar antes que ele seja capaz de usar o sistema. Quanto mais baixa a barreira de abstração, melhor.

Uma abstração também muda sua interação subjacente. Em geral, ela a expande. Por exemplo, os elementos de UI usados para discar um número no app de telefone do iOS são os digitos de 0–9. Contudo, desde que o app também tenha um recurso de "favoritos", há agora mais que apenas uma forma de ligar para alguém — o conceito de fazer uma ligação foi expandido.

8. Notação secundária

Notações secundárias são quaisquer informações extras usadas para complementar um elemento de UI e para transmitir informação extra ao usuário. Elas não são parte do elemento e elas não mudam o seu significado, apenas tornam mais fácil a compreensão.

Alguns bons exemplos disso são linguagens de programação que permitem o uso de comentários ou mesmo produtos com ícones bem desenhados. Quanto mais secundária a notação, mais suave a experiência tende a ser.

9. Proximidade de mapeamento

“Proximidade de mapemaneto” refere-se a como elementos de interface descrevem seus resultados, muito como um affordance. Se o botão "Adicionar ao Carrinho" envia um item para a lista de desejos ao invés de para o carrinho, o elemento está muito longe do resultado que ele está descrevendo.

10. Consistência

Usar padrões consistentes permite que usuário reconheça símbolos familiares a medida que se movem através do sistema. Por exemplo, se uma informação similar é apresentada em maneiras diferentes, a aprendizagem e usabilidade será comprometida com um resultado de aumento de carga mental.

Isto vai de botões com funcionalidades semelhantes, mas que parecem diferentes, para menus que carecem de consistência.

11. Dispersividade

Dispersividade é a verbosidade da linguagem, que é o número de símbolos ou entidades requeridas para expressar um significado. Quanto menor o espaço usado para transmitir uma mensagem, melhor.

Algumas notações podem ser longas de mais ou ocupar espaços valiosos em uma interface. Por exemplo, ícones grandes ou textos desnecessários muitas vezes prejudicam usabilidade, tornando difícil para o usuário escanear a página.

12. Operações Mentais Difíceis

Isso se refere as operações com uma alta demanda por recursos cognitivos do usuário. Uma notação pode tornar as coisas desnecessariamente complexas para o usuário se ele faz exigências excessivas na sua memória de curta duração. É um mau sinal se o usuário precisa usar um bloco de notas para fazer anotações ao invés de continuar usando o sistema.

Um bom exemplo de uma operação mental difícil é a inteface minimalista do Wolfram|Alpha, que requer que os usuários insiram consultas sintaticamente complexas. O usuário deve se lembrar as sintaxes necessárias, tomar notas ou consultar a wiki.

Quanto menor a demanda por recursos cognitívos, melhor. Baixa demanda cognitiva aumenta a usabilidade e permite aos usuários alcançar seus objetivos rapidamente.

13. Provisoriedade

Lápis são usados por arquitetos, tipógrafos e outros projetistas para fazer rabiscos provisórios, que significam “algo mais ou menos assim ou vai mais ou menos aqui”. Provisoriedade permite o usuário fazer seleções indicativas antes de fazer escolhas definitivas. Isso reduz o compromisso prematuro, o que melhora a facilidade na utilização do sistema.

Por exemplo: Referindo-se ao Principle, um aplicativo de prototipagem para Mac, quando você cria um novo evento, você é capaz de ver — antes de tomar uma escolha definitiva — qual artboard será linkada a esse evento simplemente arrastando o mouse sobre ela.

14. Avaliação Progressiva

Enquanto isso se aplica mais a linguagem de programação do que design, ainda vale a pena visitar, uma vez que é a dimensão cognitiva final do conjunto. Avaliação progressiva responde a pergunta: pode um programa parcialmente completo ser executado para obter feedback sobre "Como estou me saindo?"

Iniciantes, quando estão usando um sistema, tendem a avaliar seu próprio progresso em intervalos frequentes. "Avaliação Progressiva" os ajuda a fazer isso que, por sua vez, aumenta a probabilidade dos usuários alcançarem seus objetivos. Um grande exemplo é (mais uma vez!), o software de prototipagem para o Mac, que possui uma janela de "preview" que permite aos usuários testarem seus protótipos em tempo real, enquanto eles estão sendo construídos.

Aplicação no mundo real

Agora que nós já abordamos a teoria, vamos falar sobre usos práticos e exemplos do mundo real.

A estrutura de dimensões cognitivas é usada para fornecer insights sobre como os usuários interagem com os produtos. Não é uma lista para dar checks, ao invés disso, é uma maneira de capacitar profissionais de UX e outros para tomar melhores decisões de design.

Eu avaliei recentemente um web app muito popular — InVision, a ferramenta de prototipagem — para determinar porque ele foi bem sucedido e onde o app poderia melhorar. Eu revi o app de acordo com as 14 dimensões e encontrei uma típica pontuação alta. Ele tem uma boa visibilidade, um baixo número de abstrações, abundância de notações secundárias e foi muito consistente.

Vamos olhar mais de perto:

Boa visibilidade

Lembre-se: Quanto mais longa é a pesquisa para encontrar algo, menos visível e menos satisfatória a experiência.

Dentro de um protótipo, você pode ver uma lista de todas as telas. Todas as informacões sobre essa tela estão disponíveis sem a necessidade de visitar uma página diferente. No mouse hover, todas as possíveis interações estão prontamente disponíveis, incluindo interações menos comuns, tais como compartilhamento ou excluir essa tela.

Abstrações

Lembre-se: Uma abstração é um número de elementos tratados como uma entidade para ajudar o usuário a entender a interação.

Uma abstração muda a sua notação subjacente. Geralmente ela amplia. Por exemplo, a notação usada para discar um número no iOS são os dígitos 0–9. No entanto, uma vez que o aplicativo também possui um recurso de “favoritos”, há agora mais que apenas uma maneira de ligar para alguém. a notação foi amplificada.

A forma padrão de linkar duas telas é criando uma caixa clicável e então selecionar a tela que vai ser linkada. No entanto, com o recurso de “Templates”, você pode agrupar várias caixas em um “Template”, então aplicar esse template a múltiplas telas — efetivamente expandindo a notação anterior, então agora é possível linkar telas em conjunto simplesente aplicando um template.

Notações secundárias

Lembre-se: notações secundárias são qualquer informação extra usada para transmitir outras informações extras para os usuários.

A pequena caixa de diálogo que salta no mouse over torna mais fácil para o usuário compreender o que um ícone significa, e qual será o resultado da ação. Isto é o tipo de notação secundária que classifica altamente.

Consistência

Lembre-se: Usar padrões consistentes permite aos usuários reconhecerem símbolos famíliares.

O resultado do mouse hover em um card é consistente através da aplicação. Torna-se claro para os usuários que um hover é igual a mais informações, como uma forma de abrir aquele card ou a habilidade de selecionar múltiplos cards.

Avaliação Progressiva

Lembre-se: avaliação progressiva responde a questão: pode um programa parcialmente completo ser executado para obter feedback sobre “Como estou me saindo?”

Está é uma grande área para melhoria no InVision. Quando você está linkando telas umas as outras no app, não há uma forma de acessar seu progresso — você não consegue saber se há cinquenta telas para serem linkadas ou apenas duas, por exemplo. Não apenas tornam isso difícil de localizar você mesmo, mas também é difícil estimar quanto tempo você leverá para terminar. Não há nenhuma indicação quanto quais telas já tem links quando você as está linkando, nem quando você está olhando na listagem de telas.

Considerações finais

Isso trás a tona nosso guia para as dimensões cognitivas. Se você gostou do assunto e quer mergulhar mais fundo — que eu altamente recomendo, dado como é útil para entender o conceito — então vale a pena dar uma olhada em Análises de Usabilidade do Ambiente de Programação Visual: Um Framework de Dimensões Cognitivas, o artigo original de Marian Petre e Thomas Green que usamos como base nesse post.

Por último, Dimensões Cognitivas de Artefatos da Informação: Um Tutorial, é uma continuação por Thomas Green and Alan Blackwell para a Conferência BC HCI de 1998 que inclui exemplos de aplicações práticas e que eu também recomendo dar uma olhada.

Este artigo é uma tradução do original A Usable Guide to Cognitive Dimensions, publicado no UX Booth por Fabio Muniz (Colaborador do blog da TestLodge). Fomos autorizados a traduzi-lo e publicá-lo exclusivamente no UI Lab.

Ícone da capa por Bob Holzer