O que a Peppa Pig pode nos ensinar sobre UX Design?

Marco Moreira
4 min readOct 16, 2020

--

A situação parece ser bizarra, porém a cena não chega a ser tão distante das diversas situações que nós mesmos passamos ou iremos passar um dia.

Dedo indo em direção a um dos 6 botões coloridos em uma interface de um carro: Azul, vermelho, laranja, verde, amarelo e rosa

Para entender o contexto do texto, recomendo que assista o vídeo abaixo a partir do momento em que ele inicia (2:58) até os 4:00. Um minutinho só!

O que dizer sobre botões de ação que não possuem rótulos ou que, mesmo com rótulos, você não consegue entender o que eles fazem?
Como adivinhar, então, o que aquela cor representa ou o que aquele botão acionará quando você pressioná-lo?
Qual é o seu sentimento ao se deparar com isso?

Você com certeza já se viu diante de alguma situação parecida no ambiente digital.

Um simples ícone de lixeira, um link “cancelar” ou um símbolo “X”, dependendo da forma como for colocado, pode trazer ambiguidade e insegurança. Se eu clicar acidentalmente vai apagar o todo o meu registro? Vai cancelar minha conta? E se a ação não tiver confirmação?

O conforto na navegação de um site não está apenas no quão intuitivo ele é para navegar, nem apenas na sua estética, mas também na segurança que ele te traz. Conforto você sente quando entende, por exemplo, o significado e o comportamento antes mesmo de clicar em um botão ou em um link. Também podemos chamar isso de previsibilidade.

A cena do desenho da Peppa ilustra perfeitamente esse tipo de momento em que a gente vive navegando em sites, aplicativos, totens de atendimento, máquinas de café e outros objetos e máquinas do cotidiano.

Uma analogia interessante que esse vídeo pode nos ensinar é a respeito de interfaces com ícones sem rótulos. A falta de clareza de alguns ícones podem gerar ambiguidade, insegurança, medo. E interfaces humano-computador não deveriam passar esse sentimento para os usuários, principalmente em ambientes que mexem com o tempo e o dinheiro das pessoas, seja um banco, um e-commerce, etc.

Ninguém gosta de perder tempo ou dinheiro.

E se a interface não tem rótulo, em alguns casos, os usuários podem dar um jeito para que fique inteligível para eles.

Quanto tempo você perderia tentando acertar a lâmpada de cada interruptor caso não tivesse um rótulo?

Máquina de café com um rótulo escrito “Café” e uma seta grande apontando para o botão que inicia o funcionamento da bebida.

Logo, as mensagens, botões call to action e ícones devem ser o mais direto e didático possível, sem floreios.

Na primeira cena do desenho, o Papai Pig aperta aleatoriamente os botões, colocando em risco a integridade física da família. Ele faz isso por tentativa e erro. Quem nunca?
Mas um erro, a depender do contexto, época, lugar, etc., pode sair muito caro, custar uma vida, ou pelo menos ter feito você perder horas, meses ou anos de trabalho.

Então, se tempo é dinheiro, uma interface com problemas de entendimento pode deixá-lo mais pobre? =P

Frames do momento em que Papai Pig começa a apertar os botões da interface

Analisando, então, a interface do carro com botões sem rótulos a gente já pode dizer aqui que pelo menos duas das 10 Heurísticas de Nielsen foram violadas:

Heurística de nº5: Prevenção de erros.
Um dos comportamentos ao cometer um erro é o engano, ou seja, quando a compreensão de alguma informação é equivocada ou entendida de outra forma.
Mas, ao contrário de uma interface onde existiria uma caixa de diálogo para confirmar sua ação, em diversos objetos físicos ela acontece no momento exato que você a aciona, ou seja, a consequência de sua ação é imediata.

Gosto muito de um trecho do livro “O Design do dia a dia” em que Donald Norman, baseado em estudos de erro humano e de acidentes industriais, diz que nem sempre os seres humanos se comportam desastradamente:

“Os seres humanos não erram sempre. Mas o fazem quando as coisas que usam são mal concebidas e mal projetadas”

Heurística nº 6: Reconhecer ao Invés de lembrar.
Este item aparece em dois momentos no vídeo. O primeiro em que ele aperta loucamente os botões, ou seja, ele não reconheceu e o fez por tentativa e erro.

O segundo momento acontece no final quando, mesmo depois ter tido o aprendizado anteriormente, ele esquece, recorrendo à carga mental, que falha. Então, se houvesse uma indicação da função de cada botão, ele não precisaria recorrer à memória. Logo, minimizaria a possibilidade de erro.

Podemos afirmar então que todo “erro humano” tem um objeto ou interface mal projetada por trás? Comente!

--

--

Marco Moreira
Marco Moreira

No responses yet