Blog

Entre um trabalho e outro, às vezes conseguimos escrever alguma coisa...

Interface: liberdade x usabilidade

O design de uma interface útil resulta de uma tensão entre a liberdade de criar a necessidade de entregar algo usável. De um lado o profissional criativo, sem fronteiras; do outro, o usuário sem passaporte.

Durante o desenvolvimento de um site entregue recentemente, pensamos em aproveitar os espaços disponíveis da página, usando apenas os elementos realmente necessários, sem desperdiço de área visível na tela. Uma das áreas que tomou nossa atenção foi a área onde o cliente iria se logar ao sistema interno do site. Decidimos desenhar os campos de login e senha contendo o nome do campo dentro do próprio campo, o que não é incomum, chegando a este resultado:


O usuário digita seu CPF ou CNPJ exatamente onde estas palavras: ao clicar elas somem, liberando o campo para digitação. Por exemplo:


Bom: conseguimos colocar a dica de preenchimento do campo num local que pode ser reutilizado. Esse desenho teve um pequeno problema: ele admitia que todos os usuários iriam automaticamente compreender que o campo à direita, preenchido com asteriscos, era um campo para digitar a senha. O uso mostrou que nem todos os usuários perceberam isso.

E então hoje recebemos um telefonema do cliente, pedindo para que um ajuste fosse feito nesta a área, colocando também a palavra "Senha" para funcionar do mesmo jeito: ela seria uma dica e, quando fosse clicada, desapareceria, liberando espaço para digitação. A idéia era boa, mas possuía um impedimento técnico: o campo de senha sempre apresenta asterisco, para qualquer caractere digitado. A única maneira de fazer aparecer a palavra Senha no campo seria transformá-lo num campo de texto comum. Esta solução é mais problema do que solução, pois acaba com a privacidade de quem está digitando a senha, que fica exposta para quem estiver por perto ler.

Então a saída foi abandonar nossa interface bonita, minimalista e eficiente, em troca de uma interface mais comum: o nome da informação seguido do campo para digitá-la. Assim, a palavra Senha pode estar disponível e o local onde a senha real for digitada continuará a exibir asteriscos. Neste momento, chegamos a esta interface:


Agora, o nome das informações necessárias para login permanecem fixos e não desaparecem quando o usuário clica. Mais uma vez, pensamos: "bom, chegamos a uma solução sem prejudicar o design". Mas ainda precisamos fazer uma outra melhora...

Embora só hoje tenha acontecido o pedido para esta modificação, a interface já estava em uso há vários meses. É de se esperar que aqueles que já a usaram, acreditam que ela continua funcionando do mesmo jeito. Eles irão clicar na palavras CPF/CNPJ esperando que desapareçam. Alguns poderiam não perceber que agora o local para digitação fica ao lado, levando-os a clicar insistentemente em CPF/CNPJ, que se nega a desaparecer, concluindo ao final que a Opera House fez uma interface que não funciona mais.

Então, este pequeno detalhe, que fica num cantinho do site do cliente, precisa de mais um retoque visual que indique onde se deve digitar. Ao mesmo tempo, o ajuste não pode quebrar o equilíbrio com o restante do design e conceito minimalista utilizado no site. Nossa solução foi utilizar uma pequena borda, muito fina e suave, mas ainda assim visível. O resultado é este:


Agora está perfeito? Bom, o perfeito está na mente de quem assim o vê... Amanhã é outro dia e quem vai dizer se ficou perfeito é o cliente.

Deste issue, podemos tirar algumas ideias:

1- Não suponha que todos os seus usuários compreendam a interface da mesma maneira que você. Algumas coisas óbvias para você podem não ser tão óbvias para eles. Existem questões culturais, demográficas e outras que interferem na percepção. Por exemplo, talvez para uma criança ou jovem que nasceu depois da Internet, os campos com asterisco sejam uma indicação óbvia de que ali existe uma senha. O mesmo pode não acontecer com um idoso;

2- Ao construir uma interface, use elementos e padrões já bem definidos e conhecidos. Ao criar algo novo ou incomum, faça testes de uso e observe se seus usuários realmente percebem seu design da forma que você o projetou para ser percebido;

3- Seja consistente: uma determinada funcionalidade que existe em um local do site deve ocorrer exatamente da mesma forma em outros locais, se a interface for a mesma, ou isso vai causar confusão;

4- Seja consistente não apenas espacialmente, mas também no tempo: mudar uma interface a que todos já estão acostumados é ganhar uma briga de graça. Isso me faz lembrar do lançamento do Office 2007 e da pergunta mais comum que eu mesmo fazia: onde estão as funções que há mais de 10 anos eu uso e que estavam aqui?.

5- Contrario agora o que eu disse no item 4: se necessário, não seja consistente no tempo. Evolução é necessária e software parado é software morto. Se for necessário mudar para melhor, mude.