# 8 características de User Interfaces (UI) de sucesso

> Crie interfaces intuitivas e eficazes. Conheça as 8 características essenciais que toda UI de sucesso deve ter: clareza, concisão e muito mais.

URL: https://dpw.dev/ui-ux/8-caracteristicas-de-user-interfaces-ui-de-sucesso/  
Publicado em: 2009-04-27  
Categoria: ui-ux  
Tags: analise, planejamento, usabilidade  
Autor: Tárcio Zemel

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:

1. Clara;
2. Concisa;
3. Familiar;
4. Responsiva;
5. Consistente;
6. Atrativa;
7. Eficiente;
8. Capaz de "Desfazer"

> Artigo baseado em [8 Characteristics Of Successful User Interfaces](http://www.usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/).

## 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.

![Clareza - umas das 8 características de User Interfaces (UI) de sucesso.](/images/blog/8-caracteristicas-de-user-interfaces-ui-de-sucesso/wordpress_tooltips.webp) _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.

![Concisão - uma das 8 características de User Interfaces (UI) de sucesso.](/images/blog/8-caracteristicas-de-user-interfaces-ui-de-sucesso/osx_volume.webp) _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_.

![Familiaridade - uma das 8 características de User Interfaces (UI) de sucesso.](/images/blog/8-caracteristicas-de-user-interfaces-ui-de-sucesso/goplan_tabs.webp) _Interface com abas do [GoPlan](http://goplanapp.com/). 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.

![Responsibilidade - uma das 8 características de User Interfaces (UI) de sucesso.](/images/blog/8-caracteristicas-de-user-interfaces-ui-de-sucesso/gmail_loading.webp) _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")](http://www.usabilitypost.com/2008/08/04/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.

![Consistência - uma das 8 características de User Interfaces (UI) de sucesso.](/images/blog/8-caracteristicas-de-user-interfaces-ui-de-sucesso/microsoft_office_ui.webp) _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.

![Atratividade - uma das 8 características de User Interfaces (UI) de sucesso.](/images/blog/8-caracteristicas-de-user-interfaces-ui-de-sucesso/google_chrome.webp) _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.

![Eficiência - uma das 8 características de User Interfaces (UI) de sucesso](/images/blog/8-caracteristicas-de-user-interfaces-ui-de-sucesso/iphone_photo_options.webp) _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?

![Capacidade de "desfazer" - uma das 8 características de User Interfaces (UI) de sucesso](/images/blog/8-caracteristicas-de-user-interfaces-ui-de-sucesso/gmail_undo.webp)

_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.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml