Como usar padrões de design da interface do usuário
Padrões de projeto são soluções ótimas para problemas comuns de projeto. Como os problemas comuns são lançados em torno de uma comunidade e são resolvidos, geralmente surgem soluções comuns. Eventualmente, os melhores deles se elevam acima do ruído, identificam-se e tornam-se refinados até atingirem o status de um padrão de design.
Eu não diria que um padrão de design é uma tendência no design da web, os padrões de design parecem ser mais sobre como os projetos comuns são classificados em retrospecto, em vez de criar um novo território ou olhar para onde as coisas estão indo.
Como você deve abordar os padrões de design da interface do usuário?
Usamos padrões de design o tempo todo, se você não estiver familiarizado com eles, provavelmente não percebeu que eles estão ao seu redor.
E quanto ao exemplo clássico de ter muito conteúdo para exibir em uma página? Voltamos nossa atenção para 'Tabs', um padrão de design que nos permite servir todo o conteúdo que desejamos, sem fazer com que o usuário desapareça em um mar de links.
Os benefícios típicos para usar um padrão de design incluem:
- mostrando aos iniciantes como usar as melhores práticas em web design;
- aprender a se adaptar à compreensão coletiva de designers;
- permitindo uma melhor comunicação, reduzindo o risco associado a escolhas não familiares;
- reduzindo o tempo necessário e custos de fluxo de trabalho para realizar tarefas específicas;
- evitando desperdício de tempo na construção de algo que foi construído antes;
- dando ao usuário uma experiência com a qual ele está familiarizado e experiente (a natureza dos padrões de design).
No exemplo acima, vemos Mídia Clicky usando dois padrões de design muito populares hoje:
- Navicon - um símbolo universal para o menu, também conhecido como navegação no site, está se tornando cada vez mais popular no web design moderno, mas já foi totalmente adaptado para dispositivos móveis.
- Parallax Scrolling - um padrão de design exclusivo que permite o site de página única, com um mecanismo de rolagem fácil de usar, mas também inclui uma lista de sprites de fundo que dão à página uma sensação viva.
Embora o menu Navicon e o menu geral na parte superior da página compartilhem escolhas semelhantes - seria muito perturbador incluir todos os links na mesma barra de cabeçalho - fica claro que pequenas escolhas podem fazer uma grande diferença.
Veja o que você precisa pensar ao avaliar um padrão de design e adaptá-lo às suas próprias necessidades:
- Resumo do problema: qual problema do usuário você está resolvendo? Mantenha o foco e expresse-o como uma história do usuário - em apenas uma frase.
- Solução: como os outros resolveram esse problema? Algumas coisas a detalhe incluem a navegação do usuário (incluindo atalhos), obter entradas do usuário, lidar com dados e integrações com outros serviços ou aplicativos e exibir informações e conteúdo (incluindo padrões).
- Exemplo: ótimo, você pode me mostrar? Às vezes, uma captura de tela ou uma maquete é suficiente; outras vezes, fluxos de usuário e / ou notas adicionais são necessárias para comunicar claramente o padrão.
- Uso: quando este padrão (não) deve ser usado? Algumas coisas para detalhar incluem arquitetura de produto, layout de interface, dispositivo (s), linguagem de programação, ausência ou existência de outros padrões de design, tipo de usuário e casos de uso primários.
É preciso prática e disciplina para pensar sobre os padrões dessa maneira, se você ainda não fez isso. Aproveite o tempo para responder a essas perguntas ao projetar seu produto, pois ele pode ajudar você a economizar muito tempo refatorando quando os usuários e a equipe solicitarem detalhes semelhantes.
O surgimento de kits de ferramentas da interface do usuário
Os padrões de design da interface do usuário sempre facilitaram o acesso do usuário ao seu site, aplicativo ou sistema. Se o usuário souber como enviar um comentário pela primeira vez, é provável que ele saiba instantaneamente como enviar um e-mail usando o formulário de contato. Esse é o mesmo conceito repetitivo de entrada de informações.
Nos últimos anos, vimos um enorme crescimento no mercado de kits de ferramentas de interface do usuário. Um kit de ferramentas de interface do usuário pode ser simplesmente entendido como um conjunto de widgets que permitem criar um aplicativo totalmente gráfico a partir do zero. O Twitter Bootstrap é um exemplo perfeito de um kit de ferramentas de interface do usuário bem-sucedido. Atualmente, uma grande proporção de web designers confia nos recursos do Bootstrap para facilitar seu próprio fluxo de trabalho. De certo modo, não há necessidade de reinventar a roda!
3 padrões de design da interface do usuário para lembrar
Em suma, os padrões de design são soluções para problemas recorrentes. Ao utilizar padrões, podemos superar problemas simples de interface com o usuário. Se prestarmos muita atenção, notamos que os padrões estão ao nosso redor. Não há nada de especial sobre esse design específico, é o modo como foi aplicado e que você está animado!
Chamadas à Ação Crystal Clear
Os formulários web mais simples (e também os mais comuns) geralmente possuem apenas um único botão acionável: neste caso, 'Criar site'. É bastante auto-explicativo, qual é o ponto.
Quanto mais fácil, certo? Sempre escolha a opção mais fácil, não reinvente a roda apenas para se destacar da multidão.
Breadcrumbs para o resgate
Breadcrumbs mostra o caminho da primeira página do site até o local atual do usuário na hierarquia de páginas do site. Eles são uma forma de navegação secundária que ajuda os usuários a entender a hierarquia e a estrutura do site. Breadcrumbs começam com a home page e terminam com a página que está sendo visualizada atualmente.
Neste exemplo por Fares Farhan, vemos como ele utiliza dois padrões de design de interface do usuário ao mesmo tempo. Primeiro, ele tem o padrão das guias na parte superior e o segundo, o padrão de navegação das migalhas de pão na parte inferior. Ao combiná-los, ele cria uma experiência de navegação muito agradável.
O registro deve ser fácil
A menos que você esteja vivendo sob uma rocha, você estará ciente do registro social. O registro em um site é uma coisa comum, e deve ser o mais fácil e agradável possível.
Esta é uma das minhas páginas de registro favoritas no momento. É o GitHub página inicial, e como você pode ver na captura de tela, tudo o que a empresa representa é apresentado em menos de cem palavras. Você também pode se registrar em qualquer lugar e o processo leva menos de um minuto para ser concluído. Você receberá um e-mail para confirmar sua conta, mas isso é algo com o qual estamos acostumados!
Palavras finais
Eu construí sites por mais de oito anos e durante esses oito anos eu percebi que a simplicidade é a chave para muitos problemas de design.
Eu cheguei a uma conclusão que a desordem no design, inchada com elementos e formas desnecessárias é a experiência mais frustrante que você pode encontrar na web. Sim, design é exatamente como algo funciona, então por que não funcionar corretamente? Interface do usuário (UI) é incrivelmente importante para o sucesso do seu negócio ou empreendimento.
A melhor maneira de garantir que você está criando sites de sucesso é aprender e utilizar os padrões de design existentes.