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 faz 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. Se você é novo em design ou um profissional experiente, 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 colocá-los em bom uso criando padrões em seu design.

Uma coisa para estar ciente: às vezes os termos “componentes” e “padrões de design” são usados ​​​​de forma intercambiável. Para os propósitos 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 executar tarefas.

Como você verá, um padrão é “maior” do que apenas 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 com link para a página inicial no cabeçalho de um site
• Navegação de hambúrguer em sites para dispositivos móveis
• Formulários de login com um link “Redefinir senha”
• Breadcrumbs que permitem que os usuários acompanhem sua localização em um site
• Carrinhos com contadores de itens neles

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

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 tornam a experiência mais fácil para 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 encontrar outra opção.

Como criar um site de negócios de uma página no WordPress

Existem muitas maneiras de criar um site para sua empresa, dependendo de seus objetivos e da quantidade de conteúdo que você precisa incluir. Embora às vezes possa fazer sentido criar sites complexos com ...

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 fundamental 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 confiaram nesses 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 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ê cria confiança com seus usuários, além de ser mais provável que eles sejam um visitante recorrente.

Os padrões de design são intuitivos

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

Um exemplo de padrão comum e previsível é encontrado em formulários. Especificamente que todos os formulários fornecem mensagens de validação e 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?

De uma perspectiva de design, os usuários 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 úteis de interface do usuário. 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 a padrões cria uma experiência previsível.

Padrões de design fornecem uma linguagem comum entre designers

“Grandes experiências começam com um design eficaz. ”

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 que todos os membros da equipe entendam o caso de uso de cada padrão. Mesmo se você estiver trabalhando sozinho, acompanhar os padrões de design que você está usando permitirá que você trabalhe com mais eficiência e revise-os 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 uma reformulação completa ou uma “expansão” do site, é útil fazer um inventário e examinar 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 anterior em design para começar é um bom primeiro passo. Isso informa as decisões iniciais porque eles trabalharam em outros projetos.

Iniciando a pesquisa

A pesquisa é a chave para uma base sólida do projeto. Como você 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 nestes itens:

• Quem são os usuários atuais? (Seus objetivos, demografia, etc.)
• O que mais você quer saber sobre esses usuários?
• Com quais padrões eles mais interagem?
• Existem padrões com os quais esses usuários têm 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 no conhecimento existente a partir do que eles experimentam na web.

Ao resolver problemas de design, tempo e orçamento são sempre um fator, mas pesquise o máximo que puder. É 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á de boa inspiração para o projeto. Não é necessário “copiar”, mas é útil tomar nota do que está por aí.

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

Projetando para a Web com padrões de design

Protótipo e testes

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 de alta fidelidade mais complexos.

Comece com padrões existentes de sua pesquisa como linha de base. À medida que avança no processo, certifique-se de que o protótipo abrange todos os recursos de que você precisa e que ele atende 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.

Um guia para o uso eficaz do espaço em branco no web design

Os designers adoram, mas os proprietários de sites querem preenchê-lo. O espaço em branco é frequentemente considerado um desperdício de espaço valioso na tela. No entanto, não é um desperdício de espaço! É um elemento de design essencial e um poder...

Quando você 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 completamente 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 tanto para os participantes quanto para você como designer.

É importante fazer anotações sobre os principais objetivos do usuário ao iniciar os testes, para manter o foco. Depois de convidar os participantes do teste, coloque o design na frente do 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 isso nem sempre é possível. Em uma pitada, testes de usabilidade de “corredor” ou “estilo de cafeteria” podem ser úteis (um teste de usabilidade montado em uma área de alto tráfego de pedestres, utilizando pessoas que passam para testar seu produto). Mesmo envolver alguns colegas de trabalho é sempre melhor do que nenhum teste.

As chances são de que seus padrões de design não sejam perfeitos logo de cara. Mudanças precisarão ser feitas e mais testes serão necessários para validar o design atualizado. No entanto, você obterá mais insights 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

Pronto para aprender algo novo? Experimente um destes tutoriais:

• Como criar um efeito de brilho neon no Photoshop
• Como criar um site de negócios de uma página no WordPress
• Como tornar seu site WordPress compatível com dispositivos móveis
• Como adicionar variáveis ​​CSS para personalizar temas filhos do WordPress