Como projetar para a Web usando padrões de design

Os padrões de design são a base da boa usabilidade do site e são as peças sobre as quais os sites são construídos. Eles são uma decisão estratégica de design que um web designer toma para garantir uma boa experiência do usuário. O trabalho de um designer é resolver problemas comuns de usabilidade e criar a solução mais intuitiva para o usuário, e os padrões criam uma experiência de usuário previsível, intuitiva e otimizada. Seja você um novato em design ou um profissional experiente, você deve estar ciente dos padrões comuns de design de interface do usuário e acompanhar a evolução dos padrões.

Exemplos de Padrões de Projeto

Você provavelmente já ouviu falar de componentes; coisas como botões, campos de formulário, barras de pesquisa, etc. são exemplos deles. Para usá-los, você pode fazer bom uso deles criando padrões em seu design.

Uma coisa para estar ciente: às vezes os termos “componentes” e “padrões de projeto” são usados ​​de forma intercambiável. Para os fins deste artigo, os componentes são os blocos de construção de um site, e os padrões são formas estabelecidas pelas quais os usuários estão acostumados a realizar tarefas.

Como você verá, um padrão é “maior” do que um único componente. Os padrões são como você otimiza o que é feito com componentes individuais. Existem muitos padrões de design tradicionais, como:

• Um logotipo vinculado à página inicial no cabeçalho de um site
• Navegação de hambúrguer em sites móveis
• Formulários de login com um link “Redefinir senha”
• Breadcrumbs que permitem aos usuários acompanhar sua localização em um site
• Carrinhos com contadores de itens neles

Por que os designers devem se concentrar em padrões de projeto?

Há muitas vantagens em usar padrões de projeto. Eles não apenas tornam seu trabalho mais eficiente como designer, mas, mais importante, os padrões facilitam a experiência de seus usuários.

Padrões de design estabelecem confiança

Os usuários fazem suposições rápidas no momento em que chegam ao seu site. Em uma fração de segundo, eles determinam se vale a pena interagir com o conteúdo ou se devem procurar outra opção.

Seu site é fácil de navegar? É fácil encontrar as informações que seus usuários estão procurando? Eles não terão paciência para clicar e solucionar problemas. É absolutamente crítico causar uma boa primeira impressão e estabelecer confiança com seus usuários.

No que se tornou a história da web, certos padrões se tornaram comuns. Os designers contam com esses elementos de interface de usuário estabelecidos para projetar sites, e os usuários se acostumaram a ver esses padrões de design. Eles reconhecem semelhanças entre sites e confiam no que é familiar.

Vamos dar um exemplo de um padrão de design estabelecido em um site de comércio eletrônico. Os usuários estão acostumados a ver pequenas visualizações de produtos em uma grade e, em seguida, clicar para saber mais sobre o item individual. Ao usar padrões estabelecidos em seu design e criar uma experiência fácil de usar, você está construindo a confiança de seus usuários, além de aumentar a probabilidade de que eles sejam um visitante recorrente.

Padrões de design são intuitivos

À medida que os usuários interagem com seu site, o fator de previsibilidade se torna muito importante. [twitter_link]Padrões previsíveis permitem a experiência mais intuitiva.[/twitter_link] Ter padrões familiares é fundamental, mas garantir que esses padrões sejam usados ​​de forma consistente também é importante.

Um exemplo comum e previsível de padrão é encontrado em formulários. Especificamente, todos os formulários fornecem validação e mensagens de erro. Todos os formulários do seu site fazem isso de forma consistente? Todas as mensagens estão no mesmo lugar? Que tal o botão enviar? Existe uma mensagem indicando que o formulário foi enviado?

Do ponto de vista do design, os usuários já encontraram esses padrões muitas vezes antes. Fornecer validação de formulário com mensagens úteis indica ao usuário onde estão os problemas, e ter uma mensagem indicando que o formulário foi enviado é um indicador útil de que uma ação ocorreu.

Pode parecer senso comum quando você ouve que padrões e previsibilidade são necessários para uma boa experiência do usuário. No entanto, não é muito difícil encontrar sites que quebram padrões comuns, o que pode causar frustração ou confusão. Com isso em mente, continue projetando com padrões de IU úteis. Quanto mais os usuários estiverem familiarizados com eles, mais eles saberão qual comportamento esperar. Padrões e convenções evitam que os usuários fiquem confusos, e aderir aos padrões cria uma experiência previsível.

Padrões de projeto fornecem uma linguagem comum entre designers

[twitter_link]Grandes experiências começam com um design eficaz.[/twitter_link]

Em muitos casos, os designers estão trabalhando em equipe. Isso ajuda a equipe a trabalhar com mais eficiência quando há padrões de design estabelecidos. Não há necessidade de reinventar a roda se o problema já foi resolvido.

Manter todos os padrões em um guia de estilo de front-end central é um ótimo lugar para manter o inventário. Como um recurso global, é um guia rápido para todos os membros da equipe entenderem o caso de uso de cada padrão. Mesmo se você estiver trabalhando sozinho, acompanhar os padrões de design que está usando permitirá que você trabalhe com mais eficiência e os examine no futuro.

A fase de planejamento

Está bem claro por que os padrões de design devem ser utilizados, mas como os web designers realmente os colocam em prática ao projetar para a web? Aqui estão algumas dicas que ajudam a tornar o processo de design mais fácil.

Use o que você já sabe para começar

Se você estiver projetando um redesenho completo ou uma “expansão” do site, é útil fazer um inventário e ver o que você já sabe. Obter um bom ponto de partida é fundamental. Se for um projeto totalmente novo, é importante pensar sobre essas coisas e esperar que algumas questões sejam desconhecidas no início. Para essa situação, usar a experiência de design anterior para começar é um bom primeiro passo. Isso informa as decisões iniciais porque eles trabalharam em outros projetos.

Pesquisa Inicial

A pesquisa é a chave para uma base sólida do projeto. Como você bem sabe, os usuários sempre procurarão a maneira mais fácil de realizar uma determinada ação em um site. Compreender os problemas e as tarefas em mãos garantirá que você esteja projetando a coisa certa. Para começar, pense nesses itens:

• Quem são os usuários atuais? (Seus objetivos, dados demográficos, etc.)
• O que mais você quer aprender sobre esses usuários?
• Com quais padrões eles mais interagem?
• Há algum padrão com o qual esses usuários tenham problemas?
• Que melhorias podem ser feitas?
• Que novos recursos estão sendo projetados?
• Qualquer padrão estabelecido atualmente pode funcionar?

A fase de pesquisa é o momento de identificar o que seus usuários precisam realizar ao interagir com seu site. Exemplos seriam coisas como pesquisar conteúdo, inscrever-se em um boletim informativo, fazer uma compra etc. Diante de elementos familiares, os usuários precisarão de menos tempo para pensar e terão mais motivos para converter. Mantenha o design focado na criação de padrões de uma maneira que pareça familiar para seus usuários com base em seu conhecimento existente do que eles experimentam na web.

Ao resolver problemas de design, tempo e orçamento são sempre um fator, mas faça o máximo de pesquisa possível. É sua hora de descobrir os principais pontos problemáticos de seus usuários e estudar os padrões de design existentes. O que é comum na web? Que padrões você utilizou com sucesso no passado? Depois de definir os problemas que você precisa resolver, explore sites com padrões que visam os mesmos objetivos do usuário. Isso servirá como uma boa inspiração para o projeto. Não é necessário “copiá-los”, mas é útil anotar o que está por aí.

Até este ponto, recomendei que você permanecesse consistente e previsível. Vale ressaltar que os padrões existentes podem ser modificados e pode haver casos para fazer algo novo. Apenas certifique-se de que, se estiver introduzindo um novo padrão, ele seja justificado pelos dados do usuário e bem testado.

Projetando para a Web com padrões de design

Protótipo e Teste

Após a fase de pesquisa, é hora de começar a colocar em prática o que você aprendeu. É aqui que o design ganha vida com a prototipagem. Dependendo do seu processo, os protótipos podem ser wireframes simples de baixa fidelidade ou designs mais complexos de alta fidelidade.

Comece com padrões existentes de sua pesquisa como linha de base. Conforme você avança no processo, certifique-se de que o protótipo cubra todos os recursos necessários e que atenda a todos os objetivos do usuário. Pode levar um pouco de revisão e ajuste fino para chegar a um bom ponto de partida.

Quando estiver confiante de que todos os requisitos estão incluídos no protótipo, é hora de fazer alguns testes para obter informações sobre a usabilidade do design. É aqui que você validará a eficácia dos padrões de design junto com a funcionalidade geral.

A razão pela qual o teste é tão importante na fase de protótipo é que, em alguns casos, os clientes não conseguem articular ou prever totalmente seus pensamentos e necessidades. O teste do usuário permite que eles mostrem em vez de dizer. Os participantes demonstram como realmente usariam o site, enquanto você observa e aprende com suas ações. Isso é útil para os participantes e para você como designer.

É importante anotar os principais objetivos do usuário quando você for testar, para manter o foco. Depois de convidar os participantes do teste, apresente o design para o maior número possível de usuários. Se as restrições de tempo forem apertadas, certifique-se de testar com pelo menos cinco usuários.

O assunto do teste do usuário é um tópico inteiro em si. Escolha qualquer método que faça mais sentido com base no seu tempo e orçamento. Seria ótimo ter sempre tempo adequado, mas nem sempre isso é possível. Em uma pitada, testes de usabilidade de “corredor” ou “estilo cafeteria” podem ser úteis (um teste de usabilidade configurado em uma área de alto tráfego de pedestres, utilizando pessoas que passam para testar seu produto). Mesmo envolvendo alguns colegas de trabalho é sempre melhor do que nenhum teste.

Provavelmente, seus padrões de design não serão perfeitos desde o início. Mudanças precisarão ser feitas e mais testes serão necessários para validar o design atualizado. No entanto, você obterá mais informações de cada fase de teste e poderá incorporar o que aprendeu para continuar iterando e testando até que o design seja otimizado.

Os padrões de design da Web garantem uma experiência de usuário consistente. Abaixo estão links úteis que fornecem mais informações para começar:

• Guia abrangente para testes de usuário
• Cirurgia de foguete de Steve Krug facilitada
• Exemplos de Guia de Estilo