As Regras de Ouro do Design de Interface (2013)
(cs.umd.edu)- Os 8 princípios de design de interface de Ben Shneiderman são critérios práticos que podem ser aplicados à maioria dos sistemas interativos, mas exigem validação e ajustes em cada área de projeto
- Terminologia e comportamentos consistentes, usabilidade universal e feedback informativo são condições básicas para que o usuário preveja e compreenda mudanças de estado
- O fluxo de trabalho deve ser agrupado em unidades com começo, meio e fim, e no momento da conclusão deve oferecer uma confirmação clara para que o usuário avance com facilidade para a próxima ação
- A prevenção de erros vem em primeiro lugar e, quando eles ocorrem, é preciso reduzir a ansiedade do usuário com instruções concretas de recuperação e um modo fácil de desfazer
- Ao colocar no centro a sensação de controle e a baixa carga de memória, é possível aumentar a produtividade e a sensação de domínio em interfaces móveis, desktop e web
Natureza dos princípios e escopo de aplicação
- Ben Shneiderman condensou um vasto conjunto de conhecimentos sobre design de interfaces de usuário em algumas Golden Rules, organizando-as como diretrizes aplicáveis à maioria dos sistemas interativos
- Esses princípios surgiram da experiência e foram refinados por mais de 30 anos, mas em áreas específicas de projeto é necessário fazer validação e ajustes próprios
- A lista inicial de 1985 também foi recebida como uma orientação útil para estudantes e designers, e Jakob Nielsen, Jeff Johnson e outros acrescentaram variações e expansões
- Esta versão é o conteúdo da seção 3.3.4 de Designing the User Interface: Strategies for Effective Human-Computer Interaction: Sixth Edition
As 8 regras de ouro do design de interface
-
Busque consistência
- Em situações semelhantes, é necessária uma sequência consistente de ações
- Os mesmos termos devem ser usados em prompts, menus e telas de ajuda
- Cores, layout, uso de maiúsculas e fontes também devem ser consistentes em todo o sistema
- Exceções, como a confirmação de comando de exclusão ou não exibir a entrada de senha, devem ser compreensíveis e limitadas
-
Busque usabilidade universal
- É necessário reconhecer as necessidades de usuários diversos e adotar um design flexível que facilite a transformação do conteúdo
- Diferenças entre iniciantes e especialistas, faixas etárias, deficiências, diferenças internacionais e variedade tecnológica ampliam o escopo dos requisitos
- Explicações para iniciantes e atalhos e recursos de avanço rápido para especialistas aumentam a percepção de qualidade da interface
-
Forneça feedback informativo
- Toda ação do usuário deve ser acompanhada por feedback da interface
- Para ações frequentes e triviais, uma resposta simples basta, mas ações raras e importantes exigem uma resposta mais substancial
- Apresentar visualmente o objeto de interesse facilita mostrar com clareza as mudanças
-
Projete fluxos de interação que transmitam conclusão
- As sequências de tarefas devem ser organizadas em grupos com começo, meio e fim
- O feedback informativo ao final de um grupo de tarefas transmite sensação de conquista, alívio e sinal de preparo para a próxima tarefa
- Em sites de e-commerce, um exemplo é o fluxo que vai da seleção de produtos ao pagamento e encerra a transação com uma página de confirmação clara
-
Previna erros
- Sempre que possível, a interface deve ser projetada para impedir que o usuário cometa erros graves
- Exemplos disso são desativar itens de menu inadequados ou não permitir letras em campos numéricos
- Quando ocorrer um erro, devem ser fornecidas instruções de recuperação simples, construtivas e específicas
- Um único CEP incorreto não deve obrigar o usuário a preencher novamente todo o formulário de nome e endereço; ele deve ser orientado a corrigir apenas a parte errada
- A ação incorreta não deve alterar o estado da interface ou deve vir acompanhada de um modo de restaurar esse estado
-
Permita desfazer com facilidade
- Sempre que possível, as ações devem poder ser desfeitas
- O desfazer dá ao usuário a confiança de que pode cancelar erros, reduz a ansiedade e o incentiva a explorar até opções desconhecidas
- A unidade de desfazer pode ser uma ação única, uma tarefa de entrada de dados ou um grupo de tarefas, como um bloco de nome e endereço
-
Mantenha o usuário no controle
- Usuários experientes querem fortemente sentir que estão controlando a interface e que ela responde às suas ações
- Mudanças inesperadas, alterações em comportamentos familiares, entrada de dados tediosa, dificuldade para obter as informações necessárias e situações em que não se consegue produzir o resultado desejado deixam o usuário desconfortável
-
Reduza a carga da memória de curto prazo
- A capacidade humana de processar informações na memória de curto prazo é limitada e, como regra prática, pode reter algo em torno de “7±2 chunks”
- Devem ser evitadas interfaces nas quais o usuário precisa lembrar informações de uma tela para usá-las em outra
- Um celular não deve exigir a redigitação de números de telefone, a localização em um site deve permanecer visível e formulários longos devem ser condensados para caber em uma única tela
Critérios práticos que o designer pode extrair
- Esses princípios devem ser interpretados, refinados e ampliados de acordo com cada contexto
- Apesar das limitações, eles são um bom ponto de partida para designers de mobile, desktop e web
- Entrada de dados simplificada, apresentação compreensível e feedback rápido e informativo colocam o foco em aumentar a produtividade do usuário
- Uma boa interface deve ajudar o usuário a sentir competência, domínio e controle sobre o sistema
1 comentários
Opiniões no Hacker News
Embora muitas vezes não seja considerado algo necessariamente incluído no "design" de UI, desempenho também é frequentemente negligenciado
Uma UI com desempenho ruim acaba violando todas essas regras de design. Minha smart TV Sony Android é bonita, mas a UI é tão lenta que, na prática, é quase inutilizável
Uma UI instável, que muda o tempo todo, também viola a maioria dos princípios. Smart TVs são especialmente ruins nisso também: o layout da tela inicial e a posição dos ícones dos apps mudam com frequência sem grande motivo
Além disso, uma irritação pessoal cada vez maior são ícones sem rótulos. Muitas vezes nem há tooltips; se você precisa pesquisar a documentação no Google para descobrir o nome de um botão, o design dessa UI é ruim
O público jovem se junta em torno de interfaces difíceis de usar, e essa obscuridade funciona como um recurso de iniciados que exclui a geração dos pais
Um bom designer discute com os desenvolvedores que impacto a UI proposta terá no desempenho e ajuda a fazer trade-offs quando a engenharia toma decisões técnicas visíveis ao usuário
A UI não só tinha centenas de ícones pequenos, como a documentação também usava esses ícones diretamente. O manual era algo como "primeiro clique em [], depois pressione [] e, por fim, vá para [] e faça []"
Isso foi em uma versão bem inicial do V5, há muito tempo, então espero que tenha melhorado
Todo o resto está mais próximo de programação
Eu ouço os mesmos dois podcasts de notícias todas as manhãs, e as recomendações do app são embaralhadas toda manhã sem motivo algum
O mais irritante é que, quando o app inicia, ele mostra brevemente o layout de ontem, trava por cerca de 1 segundo enquanto carrega e depois reorganiza os itens. Nesse instante, acabo sempre tocando no item em movimento errado, o que é extremamente frustrante
Um designer com quem trabalhei alguns anos atrás explicou muito bem por que consistência é importante
Não é uma questão de paleta de cores limitada ou de escolha de fonte que ninguém vai notar. Se você ficar correndo atrás de regras minuciosas, acaba criando um software horrível. Algumas pessoas confundem maior consistência com reduzir a diversidade da UI
O ponto central é permitir que o usuário se torne especialista naquele software
Esse designer usou o Microsoft Office como exemplo. As pessoas têm orgulho de "conhecer" o Microsoft Office e transitam naturalmente entre os vários apps porque sentem a inércia do "Office". Tenho a mesma sensação com o Vim. Você simplesmente sabe como algo deveria funcionar, e um novo plugin bem feito geralmente respeita esse padrão
Office e (Neo)Vim não são exemplos de UI excelente, mas são excepcionalmente estáveis
Por exemplo, ao mostrar quatro opções, você pode usar um combo box de itens marcáveis com busca da [Insert UI Library] com o tema da marca aplicado, ou simplesmente mostrar botões de opção ou caixas de seleção comuns com rótulos. A segunda opção é melhor em todos os aspectos
O usuário consegue saber, só pelo círculo ou quadrado, se deve escolher uma ou várias opções; consegue ver todas as quatro opções; não há o problema de o teclado móvel subir para "pesquisar" e cobrir ainda mais a tela pequena; e a acessibilidade fica quase sempre próxima de 100%
Mas essa opção falha no critério de "combinar de forma bonitinha com nosso design system", então designers normalmente escolhem a primeira e, pior, padronizam esse método a ponto de transformar o uso de widgets comuns em "bug"
No fim, um número grande demais de "designers de UX" venera estética e branding sacrificando todo o resto. Widgets de UI não são o lugar para exibir marca ou criatividade. É como não se deve criar uma fonte própria que force todas as letras a terem formato de logotipo. Para o cliente, concluir o próprio trabalho importa mais do que a marca
Isso prejudicou bastante a capacidade de encontrar o recurso necessário
É sempre especial ver alguém que não se considera técnico se mover incrivelmente rápido no Excel
As regras de design de UI da Microsoft são bastante impressionantes. Graças a anos de consistência, as pessoas conseguem continuar usando o software mesmo fazendo upgrade a cada 1 ou 2 anos. Não digo isso por ser fã da Microsoft
O ponto central de um upgrade é uma mudança incremental que melhora a UX. Ainda assim, não entendo por que a equipe de design não rejeitou quando o Win 95 introduziu o conceito de "clique com o botão direito em qualquer lugar para propriedades e configurações/detalhes mais profundos". Era um recurso invisível, que não mostrava ao usuário se algo podia receber clique direito. Nas primeiras vezes usando o Win 95, parece que ninguém entendia o clique direito
Concordo que proficiência é relevante, mas acho que é preciso ligar um pouco melhor por que consistência leva à proficiência
Consistência é expandir, como juros compostos, aquilo que o usuário já sabe sobre o sistema para outras partes do sistema. Se o sistema é consistente, o esforço gasto para aprender X e Y também faz você entender Z e W, porque eles funcionarão da mesma maneira. Em um sistema inconsistente, o valor obtido do investimento de aprendizado anterior é muito menor
O Office, pelo menos no longo prazo, não é estável. A infame faixa de opções foi um triste afastamento da UI estável e eficiente do Word, e as regressões incompreensíveis da Microsoft em toda a plataforma Windows agravaram ainda mais o problema. Por exemplo, remover a barra de menus dos aplicativos. Por que diabos fizeram isso?
Mais uma “regra” que eu gostaria de ver incluída é expor o modelo conceitual ao usuário
Se a pessoa não entende o modelo conceitual do produto, ela sempre vai se confundir, por melhores que sejam os rótulos dos ícones. Por exemplo, imagine um produto que tenha o comando “New Configuration”: antes de tudo, fica ambíguo o que é uma “Configuration”. É um template que permite definir outros objetos? Uma forma de alternar rapidamente entre conjuntos de opções? Um contêiner como uma pasta?
A UI deve ser projetada de modo que o usuário consiga inferir o modelo conceitual apenas explorando a interface. Isso nem sempre é fácil
O trecho “por exemplo, quando o usuário inserir um CEP incorreto, não o faça preencher de novo o formulário inteiro de nome e endereço; oriente-o a corrigir apenas a parte incorreta” é meu maior ponto de reclamação, e ainda aparece com frequência
Em formulários de várias páginas, esse princípio também deve ser respeitado ao ir e voltar entre elas
“Uma ação incorreta não deve alterar o estado da interface; se alterar, deve orientar como restaurar o estado original” também é importante
Em telas pequenas, como celulares e relógios, designers que tentam economizar espaço estão dependendo cada vez mais de ícones. Mas muitos ícones são desconhecidos ou difíceis de interpretar e, às vezes, só dá para saber tocando neles. Esses ícones precisam obrigatoriamente ter uma forma de voltar ao estado original caso haja um erro
Já é um problema ao tentar fazer login com e-mail e senha, mas, se eu cliquei em “Esqueceu a senha?”, não me mande para um formulário que pede de novo o e-mail que acabei de digitar
“Deixe em cinza os itens de menu inadequados” tem uma condição
Se o motivo de estarem em cinza não for claro, não faça isso. Deixe o comando ativo e, se ele não puder ser usado no momento quando for clicado, explique por quê em uma mensagem de erro. Fazer o usuário descobrir por que um comando foi desativado é frustrante
A exceção é quando há uma grande chance de o usuário só descobrir que não pode usá-lo depois de desperdiçar bastante tempo até o fim
Leitura relacionada: https://medium.com/@vedranio/james-bond-and-the-design-of-di...
Isso parece combinar o melhor dos dois lados
Um app de tarefas faz isso. Os comandos premium não se distinguem visualmente dos comandos gratuitos, então você acaba clicando neles com frequência, e toda vez aparece um diálogo de convite à assinatura que interrompe completamente o fluxo
Para mim, é um erro grave de UI
Uma UI que simplesmente desativa certas ações sem informar o motivo sempre me irrita
As 10 heurísticas de usabilidade de Nielsen servem como uma boa estrela-guia
https://www.nngroup.com/articles/ten-usability-heuristics/
A página da NN é muito mais fácil de absorver, mais concisa, e o layout também é muito melhor
Ambos os textos trazem informações e direcionamentos que valem atenção, mas é irônico que a página original adote aquelas convenções antigas de mesmo tamanho de fonte e parágrafos que a página da NN abandonou
Também é frustrante que o Hacker News não siga parte dessas informações. Ao editar um texto existente e clicar no botão “update”, o feedback não é suficientemente claro. Provavelmente a tela é redesenhada
Precisamos parar com UIs que inserem outra coisa bem no lugar em que eu estava prestes a selecionar, fazendo-me clicar errado
Talvez isso viole algumas das regras anteriores, ou talvez seja um problema mitigável, mas, pessoalmente, é algo que me enlouquece e considero um erro especialmente grave
Falta uma regra importante. Algo que, em certa época, parecia óbvio demais: é preciso distinguir informação estática de elementos manipuláveis
Além disso, elementos manipuláveis que não se aplicam não devem ser escondidos, e sim deixados em cinza. Assim o usuário aprende que a função existe, onde ela fica e quais condições precisa cumprir para usá-la
Relacionado a isso, nunca dependa de uma UI de esconde-esconde em que algo só aparece quando o usuário passa o cursor por acaso. A pessoa está tentando terminar uma tarefa, não explorar um calendário do Advento
Uma regra de ouro que aprendi é que, depois que a interface é desenhada, os elementos não devem se mover de forma inesperada
O Google é particularmente ruim nisso, com botões que se movem entre o momento em que você levanta o polegar e toca a tela, mas não é só o Google
Se o alvo apareceu há cerca de 0,25 segundo ou menos antes do toque, o evento de toque não deveria ser gerado. Pela velocidade de reação humana, não dá para mirar e tocar em um botão tão rapidamente
Estas são claramente regras de ouro de uma utopia
A maioria das pessoas não discordaria dessas regras
Ainda assim, a maioria dos desenvolvedores provavelmente já lidou com interfaces que violam essas regras com frequência. Não porque não as entendessem ou não quisessem segui-las, mas porque, naquele momento, o custo era alto demais
Por exemplo, ser reversível é muito difícil e só é possível se as estruturas de dados por baixo da aplicação tiverem sido criadas desde o início com isso em mente. A prevenção de erros é parecida: saber exatamente o que é um erro já é algo difícil e caro, e fornecer feedback perfeito na linguagem do usuário é ainda mais complexo