Análise de usabilidade do registro em um sorteio
Julho, 2006 
Jorge Marmion

Há alguns dias, ao carregar combustível em um posto de gasolina de uma grande distribuidora, o frentista me convidou a participar de um sorteio de combustível, e ao aceitar me entregou dois cupons que eu devia registrar para participar da promoção.

O cupom, cujas laterais tinha de rasgar para ler o conteúdo, continha um número, que eu devia informar ou por telefone ou através de um site cujo endereço constava no interior.

"Eis uma aplicação interessante", pensei, já que:

  • Não é possível determinar o grau de instrução do usuário. Pode tanto ser um doutor em ciências da computação ou seu motorista, que talvez mal acabou o ensino primário;
  • Não é possível saber qual o grau de experiência do usuário com um computador ou com a internet. Pode ter profunda experiência na manipulação de diversas aplicações, ou ter acabado de receber em casa seu primeiro computador, comprado em 50 parcelas;
  • Não é possível treinar o usuário no aplicativo. Ou o usuário "se vira", ou não completa a tarefa.

Como será que nossos colegas solucionaram o problema? Muito bem, eu diria.

Ao ingressar no endereço divulgado no cupom, um "box" com uma cor vibrante, que se destaca do resto das cores, convida o usuário a participar da promoção.

Impossível não ver. Nota dez. Poderíamos argumentar que o contraste dos dizeres do box com o fundo é inadequado. É mesmo, mas o conteúdo é irrelevante.

Após clicar no link apropriado, abre uma nova tela, que mantém as cores da tela anterior (algo positivo) e apresenta instruções sobre como participar da promoção. Um botão, cuja cor contrasta adequadamente com a cor de fundo, convida o usuário a clicar e preencher o formulário para participar. (Nota: esta tela, e algumas das que seguem, foram propositalmente alteradas para ressaltar a região de interesse em nosso artigo):

Novamente, nota dez para o projetista. Se você só quer registrar seu cupom e não está interessado em detalhes, em poucos instantes consegue saber como continuar, evitando perder tempo lendo detalhes (para você) inúteis.

Após clicar no botão, e passar por uma tela intermediária de confirmação (para evitar fraudes de robots), uma nova tela pede o código do cupom e algumas informações do usuário:

e ao descer a barra de rolagem há uma pergunta cuja resposta (óbvia) está assinalada.

As informações solicitadas são claras, as perguntas e respostas são pertinentes (especialmente quanto à necessidade de informar CPF, algo que desperta muitos receios), o fato de assinalar a resposta correta é totalmente acertado, mas .... essa barra de rolagem! Me pergunto se um usuário sem a suficiente experiência em manipulação transacional saberá, sem ajuda de terceiros, que tem de descer a barra de rolagem para visualizar o resto da tela. A resposta que imagino definitivamente não me deixa tranqüilo. Eu optaria por projetar novamente a tela, compactando espaços e permitindo que todas as informações necessárias fossem apresentadas em uma única visualização. E aproveitaria para "bolar" um botão "Avançar" mais "sexy"; para mim esse que está aí destoa do resto da tela (mas isso, convenhamos, nada ter a ver com usabilidade). Eis uma proposta alternativa (que aproveita o botão atual):

Quanto ao Telefone, obviamente o primeiro campo é o DDD. Bem, esse "obviamente" também me deixa intranqüilo. Eu não arriscaria: escreveria, abaixo do primeiro campo, "DDD" e abaixo do segundo, "Número", em letras pequenas, do tamanho das perguntas e respostas.

Após informar os dados solicitados e clicar no botão Avançar, é apresentada uma tela parabenizando o usuário por ter completado a transação, e instruindo-o a guardar o cupom. E a distribuidora aproveita a oportunidade para "vender o peixe" do seu cartão, mas isto é feito ética e até discretamente, e não há qualquer obrigação de continuar:

Em resumo, uma bela implementação. É fácil saber o que fazer, e mesmo um usuário sem muita experiência consegue completar a tarefa (ressalva feita à tal barra de rolagem).

Há, entretanto, uma melhoria que poderia aprimorar o fluxo transacional. Um cartão lhe é dado cada "x" litros de combustível que você carrega. Caso você encha o tanque, e este estiver vazio, provavelmente você ganhará dois ou três cupons. E na última tela não há como retornar diretamente à primeira. Uma opção "Informar mais um cupom" seria muito conveniente, e evitaria vários retrocessos ou, então, digitar o endereço do site novamente.

Lições que podemos aprender deste caso:

  • Não enrole. O usuário tem de saber rapidamente o que fazer. Destaque as ações mais prováveis (a primeira tela desta transação é um excelente exemplo).

  • Mantenha o "look and feel" da transação através de todas as telas. Isso cria uma sensação de familiaridade.

  • Evite barras de rolagem em aplicações de uso público cuja audiência tem um espectro cultural muito grande ou desconhecido. A barra é aceitável em um formulário de inscrição online em uma faculdade, por exemplo. No exemplo que estamos comentando, nem arrisque: projete novamente a transação para eliminá-la de vez. Se não for possível neste caso "empacotar" tudo em uma tela, transfira a pergunta a uma próxima tela, onde você poderia dizer, para amenizar: "Você está quase lá. Só falta responder uma pergunta ...."

  • Planeje o fluxo transacional considerando as possibilidades após a transação corrente ter sido completada. É possível executar um novo ciclo desta mesma transação? Ou, após finalizada, acabou (exemplo: removi meu endereço de e-mail do sistema de newsletter de um site).


Gostaríamos de ouvir sua opinião sobre este artigo.

Conteúdo Ruim Regular Bom Muito Bom Excelente
Utilidade Nenhuma Pouca Média Média/Alta Alta

[ Entre em contato ] com o(a) autor(a) deste artigo

[ Convide um amigo ] ou colega a ler este artigo

[ Imprima ] este artigo

(c) 2003-2006 IBRAU - Instituto Brasileiro de Amigabilidade e Usabilidade. Todos os direitos reservados.

(c) 2006 IBRAU - Instituto Brasileiro de Amigabilidade e Usabilidade. Todos os direitos reservados.