Design Blog - Blog de design gráfico, web design e universo freelancer.

Criativosfera - A comunidade restrita apenas aos melhores profissionais criativos

Pequenos detalhes na interface de usuário fazem a diferença

Por | 28 de novembro de 2011 | Tags: , , | Nenhum Comentário

Publicidade

Muitas vezes não notamos pequenos detalhes nas interfaces que usamos. Coisas simples, desde uma borda de 1 pixel até o uso de uma cor diferente. Mas estes pequenos detalhes nas interfaces podem resultar em impactos enormes.

Neste artigo vou falar sobre alguns casos de pequenos detalhes na interface do usuário (“user interface” ou UI em inglês) que fazem toda a diferença para o usuário final – e é algo com o qual devemos nos preocupar para poder fornecer um produto melhor.

Vídeo no blog da Claudia Regina

A Claudia Regina (responsável pelo Dicas de Fotografia e minha esposa) é uma fotógrafa com foco em pessoas, especialmente gestantes. O blog / portfólio fotográfico dela é o Regina.fot.br, onde ela sempre posta as fotos de seus últimos clientes além de ser um canal para conseguir novos interessados em seu trabalho – mesmo este não sendo seu principal link de entrada (que é o “Book Gestante em Curitiba“).

Algum tempo atrás, ajudei a produzir um vídeo de apresentação dela que iria ficar na página inicial do blog dela, acima dos posts. O vídeo foi colocado no Vimeo, e o player inserido no blog. A tela inicial do vídeo era como da imagem abaixo:

A quantia de pessoas que clicava no “play” não passava de 30 por dia (em torno de 20% das visitas totais diárias) – um valor aceitável, já que o vídeo possui conteúdo adicional e não principal.

No entanto, uma pequena alteração fez uma enorme diferença; em vez de ter a tela inicial como a primeira cena do vídeo, ela foi trocada por uma tela escrita “Dê play e me conheça melhor“. O resultado? O dobro de visualizações diárias:

Nova capa e amostra de visualizações (canto inferior esquerdo)

Selecionador de país

Muitos sites ainda requerem um registro mais detalhado, como o seu endereço – que é aceitável se o site tiver como objetivo enviar algo pra você. Mas muitos destes tem uma falha na hora de selecionar o país.

Uma caixa de dropdown (aquele que você seleciona de uma lista) não tem um uso muito prático, pois o usuário precisa procurar em uma lista gigantesca o seu país. Muitos sites estão agora usando a função de auto-completar; você vai digitando o nome do seu país, ele sugere o restante do nome e pronto. O problema surge quando você tenta digitar parte do nome do país (por exemplo “América” em vez de “Estados Unidos da América”) ou escreve o nome do seu país diferente da maneira com que o restante do mundo escreve (“Brasil” em vez de “Brazil”) – vários destes sistemas de auto-completar não reconhecem estes pequenos detalhes.

Christian Holst escreveu no Smashing Magazine um artigo justamente sobre isto mostrando os problemas mais comuns:

  • Erros ortográficos (os sistemas não encontram “Brasul” quando você procura por “Brasil”)
  • País com nome diferente (“Países baixos” / “Holanda”)
  • Países similares, sendo que um é mais comum (“United Arab Emirates” é menos comum que “United States of America”)

Holst aproveitou também para começar a criar um plugin para Jquery com código aberto para que pessoas pudessem enviar alterações – com um pouco de esperança, todos os sites que pedem para digitar o país do usuário vão passar a utilizar este script.

Função “Shuffle” no iPad

Virou notícia o brasileiro que recebeu o telefonema de Tim Cook (CEO da Apple) após mandar uma sugestão para a Apple sobre uma falha na interface de usuário no aplicativo de música do iPad.

Acontece que o ícone “shuffle” (para tocar músicas aleatórias) tem um pequeno problema no app do iPad: a diferença do ícone ligado e desligado é mínima, o que pode gerar confusão ao usuário.

O mesmo não acontece no iPhone ou iPod; o ícone desativado fica cinza, mas quando ativado muda de cor para o azul padrão. A solução para o problema ainda não foi lançada, mas de acordo com Cook “Vamos trabalhar nisto“.

Conclusão

Algumas coisas são tão pequenas e imperceptíveis aos olhos dos designers e desenvolvedores, que só viram um problema quando o usuário passa a utilizar. São pequenas alterações que fazem uma enorme diferença para o usuário final então fique de olho aberto.


Gostou? Por favor, compartilhe!


Canha

Criador e editor-chefe do Design Blog, atualmente é web designer freelancer. Nerd desde pequeno, ama tudo relacionado a internet, é apaixonado por design e está na área a 11 anos.

Acesse seu site Siga no Twitter

Deixe seu comentário!

  • http://www.facebook.com/profile.php?id=215391618488730 Cinix Design

    Ótimo post, rápido e certeiro. Parabéns.

  • http://www.facebook.com/profile.php?id=1388994939 Matheus Felipe

    por isto eu recomendo antes de lançar qualquer site, sistema, app, etc.. mostrar a alguns amigos para testar

  • http://www.facebook.com/profile.php?id=100003126913660 Ricardo Peres

    Por isso é importante realizar testes de usabilidade antes.
    Parabéns pelo post!