8 características de User Interfaces (UI) de sucesso
Há bastantes informações na web sobre várias técnicas de design de interfaces e padrões que você pode usar quando elabora suas interfaces e web sites, soluções para problemas comuns e recomendações gerais sobre usabilidade. Seguir as dicas dos especialistas certamente levará você a desenvolver boas user interfaces (UI) – ou interfaces com o usuário (IU) – mas o que, exatamente, é uma boa interface? Quais são as características de uma boa user interface?
Aqui estão 8 características que uma boa UI precisa ser:
- Clara;
- Concisa;
- Familiar;
- Responsiva;
- Consistente;
- Atrativa;
- Eficiente;
- Capaz de “Desfazer”
Clara
Clareza é o elemento mais importante para uma interface com o usuário. Na verdade, o propósito maior de uma user interface é permitir que as pessoas interajam com o sistema, comunicando significado e função. Se as pessoas não descobrirem como sua aplicação funciona ou onde ir em seu web site, elas ficarão confusas e frustradas.
O que isso faz? Passe o mouse sobre botões em WordPress e vai uma dica pop-up explicando as suas funções.
Concisa
Clareza em uma user interface é ótimo, entretanto você deve ter cuidado para não cair na armadilha do “excesso de clareza”. É fácil acrescentar definições e explicações, mas cada vez que você faz isso você “incha” o sistema; sua interface cresce. Incremente sua interface com muitas explicações e os usuários terão de gastar muito tempo para ler tudo.
Mantenhas as coisas claras, mas, também, mantenha as coisas concisas. Quando você conseguir explicar uma característica em uma sentença, ao invés de três, faça isso! Quando conseguir rotular um item com uma palavra, ao invés de duas, faça isso! Economize o valioso tempo de seus usuários mantendo as coisas concisas.
Manter as coisas claras e concisas ao mesmo tempo não é fácil; leva tempo e esforço para conseguir, mas as recompensas são grandes.
O controle de volume no OS X usa pequenos ícones para mostrar cada lado da escala de baixo até alto.
Familiar
Muitos designers empenham-se para deixar suas interfaces intuitivas. Mas o que “intuitivo” realmente significa? Significa algo que, natural e instintivamente, pode ser entendido e compreendido. Mas como você pode fazer algo intuitivo? Você faz isso o tornando familiar.
“Familiar” é somente isso: algo que se aparece com alguma outra coisa que você já encontrou antes. Quando você estiver familiarizado com algo, você sabe como esse “algo” se comporta; você sabe o que esperar. Identifique as coisas que são familiares para os usuários e integre em sua user interface.
Interface com abas do GoPlan. Tabs são familiares porque imitam guias de pastas. Você “descobre” que, ao clicar sobre uma aba, você vai navegar para essa seção; e que o restante dos separadores permanecem lá para mais navegação.
Responsiva
“Responsivo” significa duas coisas. Primeiro de tudo, significa respostas rápidas. A interface, se não o software que está por trás, deve trabalhar rápido. Esperar as coisas carregarem e usar interfaces pesadas e lentas é frustrante. Vendo as coisas carregarem depressa ou, pelo menos, uma interface que carrega rapidamente (mesmo se o conteúdo ainda está para aparecer) melhora a experiência do usuário.
“Responsivo” também significa a interface prover algum tipo de feedback. A interface deve comunicar ao usuário e informar o que está acontecendo. Você apertou aquele botão corretamente? Como você sabe? O botão deve ter um estado “pressionado” para dar esse feedback. Talvez o texto pudesse mudar para “Carregando…” e o botão ficar desabilitado. Será que o programa “agarrou” ou está carregando? Coloque um imagem de “Carregando” ou exiba uma barra de carregamento para manter o usuário informado.
Ao invés de carregar a página gradualmente, o Gmail mostra uma barra de progresso quando você faz login. Isto permite à toda página ser exibida instantaneamente quando tudo estiver pronto.
Consistente
Há um artigo sobre a importância do contexto (“Context Over Consistency”) e como isso deve orientar as decisões sobre o design. A adaptação a um determinado contexto é inteligente, porém existe ainda um nível de coerência que uma interface deve manter ao longo do processo.
Interfaces consistentes permitem que os utilizadores desenvolvam hábitos de uso – eles aprendem sobre os diferentes botões, abas, ícones e outros elementos da interface e os reconhecem e percebem o que eles fazem em diferentes contextos. Os utilizadores também aprendem como certas coisas funcionam e serão capazes de trabalhar a forma de operar novas funcionalidades mais rápido, com base em suas experiências anteriores.
A interface do usuário do Microsoft Office é consistente por uma razão.
Atrativa
Este pode ser um pouco controverso, mas uma boa interface deve ser atrativa. Atrativa em um sentido que torna o uso dessa interface agradável. Sim, você pode fazer a sua interface simples, fácil de usar, eficiente e ágil, e vai fazer o seu trabalho bem – mas se você pode ir para a etapa extra e torná-la mais atrativa, então você vai fazer a experiência de utilização dessa interface verdadeiramente gratificante. Quando o software é agradável de usar, os seus clientes ou funcionários não vão simplesmente usá-lo, eles ficarão ansiosos para usá-lo!
Existem, naturalmente, muitos tipos diferentes de software e web sites, todos produzidos para diferentes mercados e públicos. O que parece “bom” para qualquer audiência, em particular, varia. Isso significa que você deve projetar/desenvolver a aparência de sua interface para o seu público. Além disso, a estética deve ser utilizado com moderação e reforçar a função. Acrescentar um nível de “sofisticação” à interface é diferente de abarrotá-la com supérfluos.
Google é conhecido por suas interfaces minimalista que se concentram em função em detrimento da forma, mas, como pode ser visto no Chrome, eles também se importam com elementos como botões e ícones, como fica evidente pelos detalhes de degradê e “ajustes finos”, em geral.
Eficiente
Uma user interface é o veículo que faz você chegar aos lugares. Esses “lugares” são as diferentes funções de um software ou web site. Uma boa interface deve permitir desempenhar essas funções mais rapidamente e com menos esforço. Agora, “eficiente” soa como um atributo bastante vago – se você combinar todas as outras características de user interfaces de sucesso dessa lista, certamente que a interface vai ser eficiente? Quase, mas não é bem assim.
O que você realmente precisamos fazer para tornar uma interface eficiente é descobrir exatamente o que o usuário está tentando alcançar e, depois, deixá-lo fazer exatamente isso sem maiores complicações. Você tem que identificar o modo como a sua aplicação deve “trabalhar” – quais funcionalidades precisam existir, quais os objetivos que você está tentando alcançar? Implemente uma interface que permita que as pessoas facilmente consigam o que querem ao invés de simplesmente prover acesso uma lista de características/funções.
Apple identificou as três principais coisas que as pessoas querem fazer com fotos em seu iPhone e forneceu botões para realizar cada uma delas no Controle de Fotos.
Capaz de “Desfazer”
Ninguém é perfeito, e as pessoas estão sujeitas a cometer erros enquanto usam seu software ou web site. O quão bem você lida com esses erros é um importante indicador sobre a qualidade de seu software. Não “castigue” o usuário – construa uma interface que tenha a capacidade de desfazer os erros que possam surgir, isso é, que tenha a função “Desfazer”.
A função “Desfazer” numa interface pode salvar seus usuários de erros graves. Por exemplo, se alguém deleta uma informação importante, o quão fácil é para reaver essa informação ou desfazer a ação de deletar? Quando alguém vai para uma página quebrada ou inexistente em seu site, o que eles veem? Eles veem simplesmente um aviso de erro ou lhes é apresentada uma lista com destinos alternativos?
Enviou uma mensagem para a lixeira por engano? Gmail permite que você rapidamente desfaça a última ação.
Para concluir…
Trabalhar com essas características de uma boa user interface pode fazer com elas entrem em conflito umas com as outras. Por exemplo, ao tentar fazer uma interface limpa, você pode adicionar muitas descrições e explicações, o que acaba fazendo a coisa toda grande e volumosa. “Cortar” as coisas com o objetivo de tornar uma interface concisa pode ter o efeito oposto e tornar as coisas ambíguas. Atingir um equilíbrio perfeito exige habilidade e tempo, e cada solução dependerá de uma análise caso a caso.
Complicado sempre é colocar essas 8 características de uma vez só! E não dá pra falar qual item é mais importante do que o outro… hehe
[]s!
Prefiro usar Avaliação Heuristica.
Tem muito disso que seu post fala.
Pra quem nao conhece:
http://www.cnptia.embrapa.br/~luciana/disciplinas/mo645/avaliacao.html
@ Chris Benseler
Pois é! Aí que está! Como diz no finzinho do artigo, “Trabalhar com essas características de uma boa user interface pode fazer com elas entrem em conflito umas com as outras”. A grande questão é saber analisar cada caso e decidir, quando este “conflito” for muito aparente, qual elemento vai ser priorizado em detrimento de outros.
@ Carlos
Avaliação Heurística é bem interessante! Quando se há a possibilidade de realizar, certamente os testes levam o projeto a um patamar de qualidade, sim!
Abraços e obrigado por comentar!
Muito bom post, como sempre…
Pior do que a interface não informar, é ela não ser encontrada…
E janeiro deste ano, um amigo orgulhoso, me mandou um link de um site que sua “agência” havia feito (em flash) e, lá estava o dilema: “onde está o menu?”. A interface de navegação. O menu tinha letras miudinhas(menores que as do texto), Estava disfarçado de flor (elemento decorativo usado amplamente no layout- haviam várias outras flores iguais) que girava ao passar o mouse em cima(fazendo os links trocarem de lugar e fugirem momentaneamente do ponteiro do mouse).
Hoje já refizeram o site (não durou 3 meses). Eu o usava como “mau exemplo” de um site arrojado.
http://www.thetoccs.com.br
Não que agora a interface esteja perfeita(o pensamento continuou o mesmo), mas melhorou com ajuda de uma dica, que poderia ser evitada (clique nas fotos para navegar)
HTMLmente falando…
A pseudo-classe a:active é pouco usada com eficácia. geralmente se agrupa (a, a:visited, a:active), deixando o link com a mesma aparência de um link inativo. Quando se usa AJAX é imprescindível saber que o botão foi ativado (aliado ao famoso “carregando…”).
Ouvi dizer que:
para a:active funcionar corretamente, deve-se criar uma regra CSS só para ela, e declará-la depois das outras pseudo-classes do a. Senão, em alguns navegadores, ela não funciona e assume a propriedade default do navegador (Ex.:vermelho e sublinhado).
É verdade?
Uma idéia de uso de a:active, que me veio agora, lendo o post:
Para quando o link for carregar outra página, colocar uma propriedade visibility:hidden, no a:active. Após clicar no link, ele desaparece.
É que no Firefox, por exemplo, a página anterior fica aparecendo até a próxima carregar. Se a próxima página tem, por exemplo, uma jQuery a carregar(90KB), antes de mostrar algo na tela, ficará aparecendo a página anterior por um bom tempo. O usuário pode achar que não clicou direito ou que nada está acontecendo.
Gosto também de usar a tag acronym, com o cursor:help em textos, como uma alternativa de pequena explicação para algum termo, ou utilização específica dentro do site, relacionada a alguma ação que o usuário deverá tomar, ou que deva saber antes de agir…
==================
Tárcio:
As linhas em branco do HTML saíram. Não está mais em Quirks Mode! Agora está “redondinho”.
onde estava o “furo”?
@ Acelio F
É, realmente a navegação não é vista, temos aí um problema duplo! O site que mostrou, apesar de as letras do menu ainda estarem pequenas e de ele ser em Flash – sim, sou contra -, o visual ficou excelente! Ele está MUITO bonito!
Essa história do :active, sinceramente nunca ouvi falar. O que faço é declarar numa ordem que não dê conflito entre os pseudo: :link, :visited, :hover, :active (no caso de elementos que permitem o :focus, é antes de :active). Sempre funciona (pelo menos na meia dúzia de navegadores mais usados).
Essa sugestão de tornar invisível um elemento quando há interação do usuário tem que ser melhor estudada, hehe; no exemplo que você deu, poderíamos colocar um ícone loading enquanto se dá o carregamento (achar que “nada está acontecendo” acho raro, já que até o cursor do sistema operacional muda para a ampulheta quando “algo” está acontecendo).
Usar cursor de help para “acronym” (e “abbr”) é uma ótima pedida! Se incrementar a experiência da pessoa com utilização de tooltips animados, também é uma ótima!
Abraços e obrigado pelo comentário! Volte sempre!
PS: Era o arquivo “functions.php” do meu tema WordPress que estava com duas linhas em branco depois de “?>”! Até na validação/exibição do feed isso interferiu… Mas agora já está tudo bem! :-)