Os padrões de design UX ajudam designers e ergonomistas a projetar soluções práticas para problemas de interface frequentemente encontrados.
Esses modelos incorporam as práticas recomendadas de design para cada recurso, sejam formulários, ferramentas de navegação ou elementos de navegação móvel.
Esse princípio de padrão de design é derivado diretamente das práticas de padrão de design em desenvolvimento , a fim de capitalizar a experiência e melhorar a produtividade do desenvolvedor.
Os padrões de design UX podem ser agrupados em 4 categorias principais:
- Entrada de dados ,
- A estrutura do conteúdo ,
- navegação , _
- Gerenciamento de hierarquia .
O que são padrões de projeto? Por que eles são importantes? E como os designers podem usá-los?
O que são padrões de design UX?
Os padrões de design UX são projetos, soluções reutilizáveis para problemas comuns de usabilidade . Quando os designers resolvem problemas, eles apresentam soluções. Algumas soluções funcionam tão bem que os designers começam a usá-las repetidamente. Quando os usuários veem a mesma solução implementada em interfaces diferentes, essa solução não é apenas familiar para eles, mas também é esperada. Um dos padrões de design que se tornou um princípio de design é o menu de hambúrguer :
Por que você não deve ignorá-lo?
Certos princípios de design tornaram-se tão arraigados que propor alternativas de navegação às práticas atuais leva ao fracasso . Temos visto muitas vezes tentativas de “design inovador” em questões de menus, navegação, partilha de conteúdos (…), serem rejeitadas pelos utilizadores, apesar da sua qualidade estética.
Você deve saber que um dos principais obstáculos ao uso de novos aplicativos móveis está na mudança de interface: a cada download, os usuários devem aprender a entender seu uso. Esse tempo de aprendizado gera frustração que pode levar, se for muito grande, a não mais utilizar o aplicativo em questão.
Os critérios de Bastien e Scapin identificam esse fator de sucesso de UX como a “carga de trabalho”, ou seja, todos os elementos da interface que têm um papel na redução da carga cognitiva de compreensão do uso .
Assim, designers de UX competentes e ergonomistas experientes muitas vezes se recusam a “reinventar a roda”. Se um design se desviar muito das convenções esperadas, o usuário terá que gastar mais tempo entendendo como usar a interface.
Lembre-se de que o usuário sabe em menos de 10 segundos se permanecerá em um site ou não . Se o design do seu aplicativo móvel exigir que ele aprenda a usá-lo, isso aumenta as chances de ele fechar seu aplicativo e não abri-lo novamente.
O uso de padrões de design torna o design chato?
Não. Mesmo quando os designers incorporam um modelo específico, eles têm liberdade suficiente para a criatividade .
Vamos usar um conceito simples de links da web como exemplo. Inicialmente, todos os links na web eram texto sublinhado em azul que mudava de azul para roxo após uma visita. Mas hoje, os desenvolvedores da Web usam cores diferentes para indicar interatividade, e essa abordagem também funciona. Por quê ? Porque os usuários se lembram mais do comportamento dos modelos do que das especificidades de seu design visual . E eles podem combinar rapidamente o novo visual com o comportamento que já conhecem.
Além disso, os padrões de design UX, ao definir um framework comum , contribuem para a homogeneidade de um design , permitindo, para uma mesma ação, ter um design e interação idênticos, independentemente da página ou do local.
Como encontrar o padrão de design certo?
Padrões de projeto são principalmente soluções para problemas que ocorrem durante a interação humano-computador .
Para encontrar o padrão de projeto adaptado ao seu problema:
- Declare claramente um problema que requer soluções. O modelo é realmente a melhor solução para o problema?
- Encontre sites/aplicativos móveis que resolvam o mesmo problema ou semelhante.
Reúna informações sobre as soluções que eles usam, analise cada solução no contexto de sua interface e escolha aquela que é certa para você (teste para garantir que a solução funcione bem para seu produto).
Como usar padrões de design UX?
Sempre que os usuários visitam um novo site ou iniciam um aplicativo instalado recentemente, eles analisam a tela para entender como interagir com o produto . Eles estão procurando os elementos que os ajudarão a alcançar seu objetivo. Os padrões de design simplificam essa tarefa: quando os usuários veem objetos comuns , eles entendem imediatamente como interagir com esses elementos.
Entrada de dados no padrão de design
Os modelos de entrada de dados são usados para gerenciar a entrada de dados e fornecer feedback aos usuários.
Vamos ver como os modelos de entrada de dados funcionam no conceito de botão.
Como usuários, geralmente identificamos se um determinado objeto é interativo ou não, simplesmente olhando para ele. A forma do item desempenha um papel vital no processo de identificação. É por isso que a regra básica do design de botões é: “Faça um botão parecer um botão”.
Seu botão pode ser bonito, mas se você obtiver um design que seus usuários não consigam identificar como um botão, sua taxa de conversão será necessariamente ruim.
Criar um botão fácil de identificar é apenas metade da batalha. Você também deve fornecer feedback apropriado sobre a entrada do usuário. Isso é o que o framework Bastien e Scapin identifica como “ feedback imediato ”. É possível atingir esse objetivo usando animação.
Não hesite em ler o nosso artigo sobre a ergonomia dos formulários que diz respeito a mais boas práticas na introdução de dados!
Estrutura e hierarquia de conteúdo
Os padrões de design de UX ajudam você a criar uma hierarquia visual para que seus usuários possam digitalizar páginas rapidamente e encontrar qualquer informação ou ação necessária.
Essa hierarquia visual é ainda mais essencial quando você sabe que os usuários lêem apenas uma média de 15 palavras por página .
Quando se trata de criar uma hierarquia visual, os designers devem limitar a desordem visual (remover todos os elementos desnecessários) e agrupar os elementos relacionados. O Princípio da Proximidade diz que as pessoas percebem as coisas que estão próximas como relacionadas.
Os designers têm na sua caixa de ferramentas uma poderosa ferramenta chamada “ espaço negativo ” ou “ espaço vazio ” que nos permite aplicar o princípio da proximidade nos designs criados. Usando uma quantidade diferente de espaço, é possível descartar certos elementos ou torná-los parte de um único bloco. Não há mais necessidade de linhas ou outros indicadores visíveis para deixar claro aos usuários que os objetos estão agrupados ou não.
Navegação
A navegação é a base da experiência do usuário . Ele responde às seguintes perguntas-chave: Onde estou no site? De onde eu venho ? Onde posso ir a seguir?
Tomemos, por exemplo, o conceito do menu principal em um site. Os usuários esperam encontrar a navegação principal em alguns lugares comuns: no topo da página ou atrás de um menu de hambúrguer… Se os usuários não conseguirem encontrar a navegação nesses lugares, pode ser confuso e frustrante .
O menu principal funciona bem para sites de pequeno e médio porte. Sites com muitos níveis de profundidade exigem navegação adicional que auxilia os usuários em sua jornada. Uma das soluções? O fio da Ariadne ! Este elemento indica o caminho percorrido pelo usuário da página inicial até a página atual.
No exemplo a seguir, o usuário está na página Pool. Acima do nome da página aparece a trilha de navegação, o caminho percorrido da página inicial do site até a página Piscina .
Assim, em determinados sites com estrutura de árvore rasa, o breadcrumbs pode ser dispensado, mas assim que o conteúdo ultrapassa cinquenta páginas, torna-se imperativo.
Os padrões de design UX são soluções comprovadas para um tipo específico de problema e os usuários se adaptaram a usá-los. Com os padrões de design UX, o designer explora muitos elementos já capitalizados por milhões de interfaces: ele pode, portanto, se concentrar em otimizar ainda mais e definir a melhor experiência possível , no contexto de seu projeto.
A introdução de padrões de design no design de interfaces ajuda a reduzir a carga cognitiva do usuário e melhora sua experiência de navegação .
