Skip to content

UX: comédia na ficção, drama na vida real

by em 10/11/2015

Esse vídeo é um trecho do filme “Meu Tio” (título original francês: Mon Oncle), uma comédia de 1958 dirigida por Jacques Tati (imdb: http://www.imdb.com/title/tt0050706/). O filme é sobre um senhor que visita a irmã e o sobrinho, e tem dificuldades com a tecnologia que os cerca. No trecho, o senhor tenta utilizar/explorar a cozinha da casa e falha miseravelmente.

Esse vídeo é uma ótima metáfora para a UX (Experiência de Usuário) provida na maioria dos sistemas computacionais modernos, seja no aplicativo que você usa pra se lembrar de tomar seu remédio ou naquele jogo que baixou no final de semana.

Alguém poderia argumentar que como o objetivo do filme é o humor, as interações são exageradamente incongruentes. No entanto, também é fácil argumentar que se trata de uma sátira às dificuldades reais que experimentamos com tecnologia no dia-a-dia (desde 1958 e ainda hoje). Os pontos que vou discutir a seguir advêm do fato de que grande parte dessas dificuldades decorrem do pouco esforço dos projetistas em preparar as interações para que não sejam confusas para os seres humanos.

O dispositivo de choque

Logo na entrada da cozinha, há um dispositivo cuja função é difícil de determinar. Primeiramente porque não se parece com nada que já vimos em uma cozinha, então não é trivial fazer correlações com experiências passadas. Em segundo lugar, sua localidade não é de muita ajuda como indicação de seu uso. Se estivesse próximo de uma mesa, talvez sua intenção fosse servir como descansador de pratos. De fato, ele parece mais com uma barreira que impede o acesso ao que se encontra atrás (cujo uso também é nebuloso). O que torna ainda mais parecido com uma barreira é o fato de que ele dá um choque quando tocado.

O choque pode ter sido intencional (se for realmente uma barreira) ou não (caso ainda pior, já que não há proteção alguma para esse efeito adverso da eletricidade, potencialmente necessária para qualquer outro fim). Barreiras são formas de proteger o usuário contra erros ou ações que podem causar danos. São importantes em muitas interações, mas as vezes o excesso de zelo também é prejudicial.

Um exemplo do nosso dia-a-dia pode ser uma aplicação que permite utilizar o flash da câmera no celular como lanterna. Você abre a aplicação, liga a lanterna, usa pra achar algo que estava procurando, e então toca no botão “voltar” do seu celular. A aplicação pergunta: “Tem certeza que quer sair?”, e impede a si mesma de ser fechada até você selecionar a resposta “Sim”. Essa pergunta, que seria uma importante proteção no Microsoft Word, por exemplo, caso você tivesse clicado em sair sem gravar seu texto, é completamente inútil no aplicativo de lanterna e simplesmente atrasa o usuário. Para completar, o usuário está acostumado com o uso do botão voltar, que é físico no dispositivo e amplamente utilizado para fechar aplicações. Enjuriado com a pergunta, ele pressiona novamente esse botão, e a aplicação simplesmente fecha a mensagem com a pergunta voltando para seu estado “natural” (aberta, com a luz ligada, que na verdade é pouco natural com relação a tudo o que o usuário já aprendeu anteriormente em outras aplicações). É, só faltou o choque para virar uma piada em um filme.

O resto da cozinha também dá choque?

Experiência é justamente o que a palavra significa: qualquer conhecimento, sabedoria ou perícia adquiridos em atividades práticas ou cognitivas. Assim, ela decorre da nossa interação com o mundo. Então, qualquer interação produz experiências e atualiza constantemente a nossa percepção individual do mundo. Ora, por isso é tão natural que após levar um choque o senhor do vídeo se preocupe se outras coisas no ambiente também dão choque.

O problema na interação ilustrada no vídeo é que não é fácil saber a causa do choque. Poxa, a tal barreira estava na altura das mãos, qualquer pessoa poderia tê-la tocado daquela mesma forma. Se o choque tinha um caráter de proteção, o usuário não teve feedback apropriado sobre o que fez de errado, e logo não tem como aprender a evitar fazê-lo novamente no futuro. Obviamente não é a cor, dado que toda a cozinha é essencialmente branca. Talvez seja o formato fino e curvado, mas ai é então mais natural pensar que coisas como maçanetas também darão choques. E nesse caso, vai se ter ainda mais confusão quando não se receber choques de maçanetas…

Apesar do choque ser uma experiência desagradável, essa confusão pode acontecer também em interações agradáveis ou pragmática (que têm um caráter utilitário, de fazer ou resolver algo) e nesse caso vai ser ainda mais frustrante porque o indivíduo não conseguirá saber como alcançar seus objetivos (por exemplo, quero só cozinhar um ovo!). No nosso dia-a-dia também há inúmeros exemplos, pois a falha em fornecer feedback de ações e manter padrões nesses feedbacks é a mais comum. Aplicações que não diferenciam botões de outros elementos visuais (elementos que permitem executar ações x elementos que apenas apresentam informações), ou que não diferenciam um botão que pode de um que não pode ser clicado/tocado, são exemplos bem comuns.

Por que as maçanetas não servem pra abrir o armário?

A falha em manter padrões de interação é bastante grave. No mundo em que vivemos, maçanetas são amplamente utilizadas para abrir e fechar portas, janelas e armários. Além disso, do ponto de vista cognitivo e motor, algo que pode ser pegado (isto é, que você pode fechar as mãos ao redor) atribui grande “significado” (leia a respeito de affordances na Wikipedia) sobre a ação de puxar. De fato, maçanetas costumam dar mais significado sobre a ação de puxar do que a de empurrar (tanto que as portas de segurança em cinemas usam barras verticais, que naturalmente são mais fáceis de serem empurradas, principalmente em um cenário de emergência). Assim, o fato no vídeo de que as maçanetas não abrem os armários vão contra não somente o que é cognitivamente mais natural como também vão contra todos os padrões culturalmente estabelecidos. É uma receita adicional para confusão.

Infelizmente isso acontece muitíssimo no nosso dia-a-dia. Em um shopping de São Paulo, o quiosque para pagamento do estacionamento é touch-screen e apresenta na tela um teclado para digitação do CPF (para quem pede a nota fiscal paulista). O botão CANCELAR e o botão OK estão em uma posição invertida ao que a maioria dos sistemas tradicionalmente utiliza. Mas, o pior é que o botão CANCELAR é muito maior do que o botão OK. Observando as interações das pessoas, já vi muitos selecionarem CANCELAR apenas porque estão com pressa e o maior botão tem grande significado de ser a ação mais importante naquele contexto.

affordances em maçanetas

Empurrar ou puxar: as características dos objetos qualificam as ações mais significativas

Por que os botões no fogão acendem luzes em lugares distantes do fogão?

Para completar a confusão, basta você oferecer o feedback no lugar errado. No vídeo, ao apertar algum botão no que parecer ser o fogão (uma inferência minha, dada a indicação de cor preta – a única essencialmente diferente do restante da cozinha), uma luz se ascende em um painel com três luzes, distante do fogão/equipamento utilizado, e um zumbido é emitido. O cérebro humano foi ajustado pela evolução para tentar identificar padrões. Então, mesmo que tenha sido uma coincidência (painel de luzes+zumbido não têm nada a ver com o fogão/equipamento utilizado), o usuário vai concluir que essa relação existe. Principalmente porque não teve nenhum feedback da ação no próprio equipamento que foi o foco da ação. Se tal equipamento desse por si só esse feedback, a possível relação infundada seria mais facilmente descartada.

De todas as formas, supondo que realmente exista essa relação, a interface está muitíssimo mal projetada a ponto de causar confusão. No fogão há vários botões e manivelas, espalhados pela superfície, enquanto que no painel há apenas três luzes dispostas verticalmente. Por que a ação em um botão no canto superior direito acende uma luz no meio de um painel distante? Simplesmente não faz sentido. Sugiro que nesse momento você vá até o seu fogão e veja como ele foi projetado. Certamente ele tem botões que acendem cada boca de cozimento. Talvez ele tenha ilustrações ao redor de cada botão (bolinhas vazias e uma cheia é a escolha mais comum). Mas pode ser que os botões, sem legenda alguma, estejam dispostos da mesma forma que as bocas, de forma que você é naturalmente capaz de entender qual botão acende qual boca. A escolha pela ilustração é mais comum quando os botões não podem ser arranjados em uma forma similar às bocas (por motivos de espaço provavelmente), mas a escolha de design de manter os botões nas mesmas posições relativas às bocas faz muito sentido (com ou sem legenda). Você certamente iria perceber isso com facilidade em um cenário de falta de energia, em que você precisa acender uma boca de fogão sem ser capaz de enxergar a legenda ilustrativa (ou se ela já se apagou com o tempo de uso). Claro, você pode argumentar que já decorou qual botão acende qual boca, e é natural que as interações se tornem mais fáceis com o uso. Porém, a facilidade de uso deve estar presente desde as primeiras interações para que o usuário não se desmotive de utilizar algo difícil e confuso.

Botões em um fogão

Legendas relacionam os botões com as bocas que acendem

Exemplos do dia-a-dia também são muito comuns. Em minha experiência pessoal, os aplicativos de fotos em celulares são confusos quando se precisa enviar fotos para outras pessoas. Um aplicativo que eu utilizo é muito intuitivo para tirar fotos e para listá-las. É também intuitivo enviar uma única foto para alguém, pois basta segurar o dedo sobre a foto (interação que é padrão no sistema operacional Android) para aparecer um menu com as opções de envio. Porém, por tentativa e erro, eu descobri que segurar o dedo sobre o nome da foto é diferente de segurar o dedo sobre a miniatura (thumbnail) da foto! Somente a segunda opção exibe menus que permitem selecionar mais de uma foto para envio. Essa interação deveria estar sempre disponível no mesmo menu de contexto, ou deveria haver claramente um botão para isso em algum lugar da mesma tela em que as fotos são listadas (até porque nem todos os usuários estão realmente acostumados com os padrões de interação do sistema operacional, então facilitar aqui também seria uma boa ideia).

Como foi que o armário abriu?

Em uma cena do vídeo o senhor se aproxima do armário e ele se abre, liberando uma jarra esférica. Mas, como o armário abriu? Foi pela proximidade ou foi por se ter pisado em algo? Novamente, aqui se recai na questão do feedback de ações. Se o armário abriu por algo que o usuário fez, ele precisa ser capaz de perceber isso para poder repetir a ação quando desejar. Mesmo que seja algo totalmente automatizado, ainda assim precisa haver uma relação com propósito de uso (será que o armário leu a mente do usuário e percebeu que ele queria fazerum suco?), para que o usuário saiba identificar as situações em que tal automatismo deve ocorrer.

Adicionalmente, automatismo precisam ser configuráveis. Nada é mais frustrante para um usuário humano do que ter um sistema computacional que toma decisões que parecem arbitrárias e que não podem ser contestadas. Tenho um exemplo bem pessoal, que é uma interface humano-computador ainda que não seja de um sistema de software. Meu carro tem um sistema que acende os faróis automaticamente, conforme o nível de iluminação. A ideia é bem bacana, já que ele acende e apaga os faróis sozinho quando eu entro e saio de um túnel. Eu sei poucos detalhes sobre como ele mede o nível de luminosidade (há uma matriz de sensores no parabrisa), mas do ponto de vista de um usuário médio isso não deveria mesmo importar. Só que é bem comum que esse sistema julgue que deve acender os farois em ocasiões em que eu julgo que não deveria. Por exemplo, agora que há o horário de verão, se é por volta das 18:00 e eu entrei em um túnel, ele acende e não apaga mais mesmo após eu sair do túnel. Talvez a programação conclua que já é de noite, mesmo tendo bastante iluminação. Ou, se o parabrisa está um pouco mais sujo, ele também acende mesmo as 15:00, se o dia está um pouco mais nublado. Até ai, tudo bem, já que esses erros são pouco frequentes. O problema é que uma vez que ele acende os farois, eu não posso desligá-los! Não há opção para isso, a não ser que eu desligue completamente o sistema automatizado (que eu não queria fazer, já que ele é bacana na maioria dos casos). As opções que me restam é deixar ligado, ou avançar para a lanterna baixa (isso ele permite) ao menos pra não incomodar os demais motoristas desnecessariamente.

Por que a jarra quica/pula quando cai? 

Novamente, eis uma questão sobre o uso de padrões. Após abrir o armário no vídeo, o senhor tem acesso a uma jarra e a um copo. A jarra tem um formato esférico e – curiosamente – quica/pula quando cai. Talvez isso seja uma proteção contra acidentes (algo potencialmente bacana, mas que derrubaria o líquido da mesma forma). Isso é intencional? Não se sabe. As caraterísticas da jarra ajudam a entender um pouco (o formato esférico, e o material branco – provavelmente plástico), mas o senhor basicamente descobriu essa “função” por acaso. Ao pegar o copo ele tenta fazer a mesma coisa e o copo se quebra.

Sim, esse exemplo é bem mais forçado. O copo não tem as mesmas características da jarra e então é mais difícil o senhor ter se confundido a respeito de eles terem também o mesmo comportamento. Porém, jarras e copos têm funções muito próximas (armazenam líquidos), e por isso faz algum sentido imaginar que teriam comportamentos semelhantes. É também por isso que a piada é potencialmente engraçada, pois até o humor requer relação com algo que já se sabe para ser compreendido.

Há então dois pontos aqui, que podem ser úteis no nosso contexto de projetistas de sistemas para pessoas. Primeiramente, padrões são importantes pois ajudam às pessoas a entenderem mais facilmente como usar um novo produto ou fazer uma nova tarefa. Isso já foi citado anteriormente e não deveria requerer mais nenhuma exploração da minha parte. Mas há também a questão de que funções desnecessárias as vezes podem trazer problemas. No caso da jarra, a tal “função desnecessária” era quicar como uma bola, e o problema foi o usuário ter achado que isso acontecia também no copo. No mundo real, funções desnecessárias implementadas em um sistema computacional podem apenas ocupar espaço (tanto como dispositivos em um equipamento de hardware como em bytes no software que precisa ser baixado), já que o usuário não vai, ou melhor, não devia utilizá-las. Mas, principalmente, elas podem também causar confusão. Imagine um sistema web para a venda de bilhetes de cinema que, na mesma tela da venda, apresenta trailers de outros filmes que não são o filme cujo ingresso está sendo comprado. Qual é o propósito dessa função no contexto atual? O máximo que ela irá fazer é distrair o usuário até que a venda seja cancelada por tempo expirado (timeout). Claro que o usuário deve ser capaz de navegar pelos filmes existentes para escolher um para assistir, mas esse é um contexto diferente do contexto de venda.

Concluindo

Não importa o quão evoluída e útil é uma tecnologia, problemas na interação – como os ilustrados nesse vídeo – prejudicam a experiência dos usuários e podem fazer com que eles desistam de tentar usar ou adquiram resistência a novas tentativas futuras. Esse problema é especialmente grave no contexto de sistemas de entretenimento, já que os usuários não são obrigados a usar o sistema que você projetou (não é trabalho, é lazer). No caso de sistemas de software, há também o fato de que comumente os usuários têm escolhas, podendo facilmente baixar outro sistema similar para usar no lugar do seu. Não há mágica: para evitar esses problemas você precisa primeiramente conhecer os erros mais comuns, mas principalmente avaliar as suas escolhas de design com os usuários, ouvindo-os a respeito de suas dificuldades e sugestões de melhoria. O design de sistemas interativos é inerentemente… interativo.🙂

From → Sem categoria

Deixe um comentário

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: