Princípios heurísticos para interfaces móveis

Publicados: 2022-03-11

Jakob Nielsen estava prestando consultoria e ensinando engenharia de usabilidade em interações humano-computador quando começou a perceber muitos padrões. Assim, em 1994, ele coletou e divulgou um conjunto de princípios de avaliação para heurísticas de usabilidade que refletiam o que ele havia aprendido. Hoje, depois de quase 25 anos e da transformação do computador em smartphone, os princípios da Nielsen continuam fortes.

O design centrado no ser humano ampliou a importância do usuário e os processos de design se adaptaram de acordo; no entanto, embora os princípios da Nielsen tenham permanecido universais em todos os tipos de tela, com o aumento contínuo do uso de dispositivos móveis, a ênfase está nas interfaces móveis.

Pesquise na web por princípios heurísticos e uma longa lista de conjuntos ligeiramente variados será preenchida. Abaixo está uma coleção com curadoria de dez princípios que são inspirados por líderes de pensamento de design centrado no ser humano e usabilidade.

A heurística de usabilidade começa com as necessidades do usuário

Antes de saltar para o conjunto de princípios, deve-se reconhecer que a importância do usuário continua a crescer. O redesenho do GOV.UK, apesar de ser um site do governo, é um excelente exemplo de produto liderado pelo usuário que ganhou reconhecimento global por sua usabilidade.

Ben Terrett, diretor de design do projeto, começou com um conjunto de princípios de design de interface de usuário que iam desde a estratégia do produto até abordagens de design visual. O primeiro princípio foi como uma estrela norte para o sucesso do produto: “Sempre comece com as necessidades do usuário. Se você não souber quais são as necessidades do usuário, você não construirá a coisa certa. Faça pesquisas, analise dados, converse com usuários. Não faça suposições. Tenha empatia pelos usuários e lembre-se de que o que eles pedem nem sempre é o que eles precisam.”

Princípios heurísticos para avaliações de usabilidade ajudam a identificar onde um design de interface do usuário está aquém de fornecer uma experiência amigável.

#1 Transparência da Estrutura do Sistema

O ato de tornar certos elementos e estruturas visíveis para que o usuário tenha uma compreensão suficiente do contexto.

A interface do usuário deve permitir que o usuário acredite que está no controle. Eles devem ser capazes de responder facilmente a estas perguntas: “Onde estou agora?” e "Para onde posso ir a partir daqui?" Quando um sistema é transparente, o usuário tem o controle para tomar decisões sobre o que acontecerá a seguir. Eles ganham autonomia e posterior confiança no uso da interface.

O menu de navegação se expande para heurística de usabilidade
Um menu de navegação se transforma em um menu de hambúrguer, indicando onde as informações podem ser encontradas posteriormente. (projeto de Gal Shir)

Nº 2 Feedback de Ação Imediata

A resposta à ação de um usuário que confirma que o sistema recebeu a solicitação.

Qualquer ação do usuário deve ter uma reação imediata na interface. O feedback instantâneo garante ao usuário que o sistema está fazendo o que é esperado. Nick Babich, especialista em UX da Smashing Magazine, usa o indicador de progresso como um bom exemplo de status de uma ação claramente comunicado. Ele argumenta que informa visualmente ao usuário que sua ação foi aceita e o sistema revelará a próxima ação em breve. Sem um indicador, o usuário fica com incerteza e frustração que podem levar a uma jornada interrompida.

O indicador de progresso sinaliza o feedback da ação
Uma animação simples confirma que a ação de puxar para atualizar foi recebida e o conteúdo abaixo está atualizado. (design de jiangxiaobei)

#3 Conscientização dos Erros

Uma quantidade suficiente de informações e opções que o usuário pode tomar quando percorre um caminho que preferia não ter seguido.

Em algum momento, os usuários invariavelmente interagem com uma interface móvel de uma maneira que não foi planejada e se encontram em uma situação frustrante e improdutiva que não atende às suas necessidades. Barreiras e becos sem saída são motivos comuns pelos quais uma viagem termina prematuramente. A interface do usuário deve fornecer indicadores suficientes para ajudar o usuário a reconhecer, diagnosticar e se recuperar do erro.

A assistência deve ser sempre de fácil acesso; no entanto, encontrar um equilíbrio é difícil. Muitas opções podem causar sobrecarga cognitiva. O usuário deve ter uma compreensão clara de como resolver um erro e entender como evitá-lo no futuro.

Um estado de erro nos princípios de design da interface do usuário
O estado vazio nesta interface móvel explica por que o usuário está vendo a tela e fornece duas ações que resolverão o erro. (desenho de Murat Mutlu)

#4 Flexibilidade de uso

Uma interface que pode ser utilizada de forma intuitiva e eficiente por usuários com diferentes níveis de experiência.

Uma experiência móvel interativa deve ser independente da orientação do usuário externo. Seja a primeira vez do usuário com o aplicativo móvel ou a centésima, a interface deve acomodar ambos os cenários.

Um usuário experiente deve ter acesso a atalhos e compreensão sistêmica mais profunda, enquanto um novo usuário nunca deve ser abandonado em simples confusão. Com flexibilidade na interface do usuário, o usuário pode escolher e controlar uma jornada que melhor se adapte às suas capacidades e necessidades.

Os princípios de engenharia cognitiva de Jill Gerhardt-Powal aconselham os designers a “fornecer codificação múltipla de dados quando apropriado – o sistema deve fornecer dados em vários formatos e/ou níveis de detalhes para promover a flexibilidade cognitiva e satisfazer as preferências do usuário”. Uma interface que seja esmagadora ou restritiva garantirá uma experiência frustrante.

Heurísticas da Nielsen sobre a flexibilidade de uso
Um novo usuário deve ser apresentado à funcionalidade da ferramenta, mas um usuário experiente nunca veria dicas de ferramentas para ações que realiza regularmente. (design de Lakshmi Karuppiah)

Nº 5 Familiaridade das Experiências Universais

Uso de elementos de design que se relacionam com experiências e expectativas humanas comuns.

A história da GUI começou quando a Apple usou referências do mundo real no primeiro design de interface de computador amigável. “Lisa” foi projetado com elementos como um ícone de pasta para indicar a organização dos arquivos. Essas referências físicas eram úteis quando as interações digitais não eram familiares para a maioria das pessoas, mas com a alfabetização digital em ascensão, as referências universais não precisam mais ser tão literais.

As expectativas comuns dos usuários se desenvolveram à medida que passamos mais tempo interagindo com as telas. Esperamos que um “+” se expanda em mais informações e um menu de navegação fique na parte superior ou inferior da tela do celular. Ao tocar em referências que a maioria dos usuários entenderá, uma interface se torna intuitiva.

Os princípios heurísticos dependem da familiaridade
Esses dois ícones são instantaneamente reconhecíveis e indicam claramente uma ação que a maioria dos usuários pode entender. (design de <a href=”https://dribbble.com/pixelamiri

#6 Limitação da Informação e Estética do Design

A criação de um design minimalista eliminando elementos desnecessários que possam interferir em uma experiência simplificada e proposital.

Uma regra geral para todas as interações digitais é eliminar a confusão. Para reduzir o tempo de decisão e o erro, Jill Gerhardt-Powal desafia os projetistas a reduzir a incerteza exibindo os dados de maneira clara e óbvia. Isso pode ser feito removendo conteúdo desnecessário e usando cores, layout e tipografia para guiar o usuário pela tela. Os usuários não devem ser distraídos, mas devem receber orientação suficiente para atingir facilmente seu objetivo.

Ben Terrett costumava usar o quarto dos princípios de design do GOV.UK: “Faça o trabalho duro para simplificar”. Ele acredita que cabe à equipe de design entender completamente os problemas com os quais está lidando, bem como o processo que leva à melhor solução para fornecer uma experiência de usuário intuitiva, informativa e bem-sucedida. Alguns de seus métodos são descritos neste estudo de caso.

Gov.uk
Os Serviços Digitais do Governo Britânico dividiram as informações para determinar o que os usuários precisam saber e criaram designs visuais que eliminaram qualquer coisa desnecessária para apoiar a clareza das informações. (projeto por Serviços Digitais do Governo)

#7 Priorização da função sobre o formulário

As decisões de design são orientadas pelo que um elemento deve fazer, em vez de priorizar seu estilo visual.

“Se você acha que algo é inteligente e sofisticado, cuidado – provavelmente é auto-indulgência.” — Don Norman, prolífico designer de produtos e autor de 'The Design of Everyday Things'

O design visual de uma interface deve sempre começar com funções definidas. Quando o estilo e as tendências são priorizados, o resultado pode ser bonito e chamar muita atenção, mas pode levar a uma experiência de usuário desarticulada. A forma visual não pode salvar um design disfuncional.

Dicas visuais podem ser usadas para direcionar um usuário na funcionalidade do aplicativo. A Lei de Fitt afirma que forma, espaçamento e tamanho podem levar um usuário a entender uma situação e tomar a ação desejada. É aqui que a forma suporta e amplifica a função.

A forma segue a função na heurística de usabilidade
Este cartão de embarque digital considera como um viajante precisará das informações e usa técnicas visuais para tornar as informações funcionais. (desenho de Marin Begovic)

#8 Disponibilidade de Informações

O posicionamento estratégico dos elementos da interface na ponta dos dedos dos usuários para que eles não precisem depender da memória.

É mais fácil reconhecer algo do que recordá-lo da memória. Se uma função de interface móvel depende de uma informação ou da compreensão de um sistema que não é universalmente familiar, a informação deve ser acessível para que o usuário possa consultá-la facilmente.

Um dos princípios heurísticos da Nielsen sugere que o designer deve “minimizar a carga de memória do usuário tornando objetos, ações e opções visíveis. O usuário não deve ter que lembrar informações de uma parte do diálogo para outra. As instruções de uso do sistema devem ser visíveis ou facilmente recuperáveis ​​sempre que apropriado.”

Jill Gerhardt-Powal sugere “reunir dados de nível inferior em uma soma de nível superior para reduzir a carga cognitiva”. Ela também afirma que “os nomes e rótulos de exibição devem ser dependentes do contexto, o que melhorará a lembrança e o reconhecimento”. É importante estar ciente de que um usuário que vê uma interface pela primeira vez não terá o conhecimento e a familiaridade com as informações que os designers têm. A repetição de informações pode parecer excessiva para uma equipe experiente, mas pode ser essencial para novos usuários.

Uber disponibiliza informações no aplicativo
O aplicativo da Uber oferece três níveis de serviços de táxi e torna cada opção facilmente acessível pelo usuário no momento da necessidade. (projeto da Uber)

#9 Confiabilidade da Consistência

O uso de elementos consistentes e padronizados, como palavras, situações e ações para criar uma experiência coesa.

Os seres humanos são atraídos por padrões - nós os usamos para dar sentido ao mundo. Crie padrões dentro de uma interface móvel e ela se torna uma ferramenta de ensino para os usuários aprenderem o que esperar e como interagir com o design da interface.

“Isto não é uma camisa de força ou um livro de regras. Cada circunstância é diferente.” Os Princípios de Design do GOV.UK afirmam que uma interface deve ser consistente, mas não uniforme. Como ecoa Jill Gerhardt-Powal, “Novas informações devem ser apresentadas dentro de estruturas familiares (por exemplo, esquemas, metáforas, termos cotidianos) para que a informação seja mais fácil de absorver”.

A heurística da Nielsen exige consistência
O foco maior do Google no design se manifesta em diretrizes detalhadas para todos os seus designs de interface do usuário. (design por Material)

#10 Redundância Judiciosa

A prática constante da reflexão durante o processo de design para garantir que os princípios de design da interface do usuário e as heurísticas de usabilidade estejam alinhados com o propósito do produto e as necessidades do usuário.

Jakob Nielsen foi o primeiro a admitir que é impossível apresentar especificações universais para design de interface do usuário. Por exemplo, dois de seus princípios heurísticos podem contradizer um ao outro – #6: fornecer todas as informações que um usuário precisa para tomar uma decisão e #8: eliminar qualquer coisa desnecessária.

Cabe ao avaliador heurístico e à equipe de design determinar as melhores decisões para seus casos de uso exclusivos. Se o produto for centrado no ser humano e construído em torno das necessidades do usuário, a equipe será apoiada por saber disso e terá um forte senso de propósito ao tomar essas decisões.

• • •

Leia mais no Blog Toptal Design:

  • Análise heurística para UX - Como executar uma avaliação de usabilidade
  • Os princípios do design e sua importância
  • A Importância do Design Centrado no Homem no Design de Produto
  • Criando um guia de estilo de interface do usuário para melhor UX
  • Práticas recomendadas e erros de design de aplicativos para dispositivos móveis