Princípios-chave do design de websites que todos os profissionais da Web precisam de compreender



O design não é de todo uma disciplina científica exacta. No entanto, existem inúmeros princípios e diretrizes benéficos que podem melhorar a qualidade dos seus projectos em termos de usabilidade e estética. Neste artigo, vamos clarificar o conceito de princípios de design e realçar a importância de os compreender
A adesão aos princípios da conceção de websites pode determinar o sucesso ou o fracasso do seu site. Pode ter impacto no facto de os utilizadores saírem rapidamente da sua página inicial ou ficarem para ver as suas ofertas e fazer uma compra.

O design não é, de forma alguma, uma ciência exacta. No entanto, vários princípios e diretrizes benéficos podem melhorar a qualidade dos seus projectos, centrando-se tanto na usabilidade como na estética, quando se pretende criar um website profissional.

Neste artigo, descreveremos o princípio de conceção e a necessidade de o entender. Também falaremos sobre algumas das recomendações mais utilizadas e bem-sucedidas a serem seguidas. Vamos começar!
1

O que são princípios de design de websites?

Os princípios de design baseiam-se nos contributos de especialistas em vários domínios, como a psicologia, a física, a ergonomia e outros. Geralmente, estes princípios são regulamentos adaptáveis que orientam os designers na criação de produtos finais de sucesso. Determinam quais os elementos que são selecionados ou removidos e a disposição dessas caraterísticas.

Os princípios de design simplificam a criação de uma experiência de usuário (UX) e de uma interface de usuário (UI) visualmente atraentes e eficazes. A aplicação correta leva a um maior número de conversões. A LikeHood registou um aumento de 300% nas inscrições ao incorporar a simplicidade como uma prática recomendada fundamental.

A integração de princípios de design nos seus projectos irá melhorar a usabilidade dos seus websites, influenciar a sua perceção e, em última análise, ajudá-lo a tomar as melhores decisões, tanto para os seus utilizadores como para o seu negócio de web design.
2

10 leis da experiência do usuário (UX)

Podem ser encontradas online inúmeras definições de princípios de design, com várias interpretações por parte de designers e profissionais com base nos seus requisitos específicos. No entanto, existem certos métodos óptimos que são relevantes independentemente da situação.

Cientistas e especialistas em usabilidade recomendam estes princípios de conceção de websites muito apreciados.

As Dez Leis da Experiência do Usuário (UX)

Estes são princípios importantes que todos os designers devem ter em mente. De seguida, apresentamos alguns dos principais conceitos a ter em conta:

1.Tornar os principais alvos acionáveis fáceis de alcançar (Lei de Fitts)

Esta lei explica que o tempo que um utilizador demora a encontrar e a interagir com um elemento-alvo é influenciado tanto pela sua distância como pelo seu tamanho. Isto significa que deve garantir que os seus principais objectivos acionáveis são facilmente alcançáveis.

Além disso, no caso de existirem vários objectivos, deve ser mantida uma quantidade suficiente de espaço entre eles. No caso do design para telemóvel, os ícones que podem ser clicados devem ser dimensionados de forma adequada para serem tocados.

O espaço adicional entre os botões evitará que os utilizadores toquem involuntariamente no ícone incorreto. Normalmente, os designs para telemóvel devem ter uma área mínima clicável de 40 x 40 pixels.
fitts-law
2.Limitar as opções disponíveis aos utilizadores para reduzir o tempo de decisão (Lei de Hick)

Se alguma vez se sentiu paralisado por uma infinidade de escolhas, pode compreender como o excesso de opções pode sobrecarregar os utilizadores. Esta é uma breve explicação da lei de Hick. Quanto maior for o número de opções e quanto maior for o seu nível de complexidade, mais tempo demorará o utilizador a tomar uma decisão.

A lei conhecida como lei de Hick, ou lei de Hick-Hyman, foi desenvolvida pelos psicólogos William Edmund Hick e Ray Hyman para estudar a forma como o tempo de reação é afetado pelo número de estímulos que são apresentados a uma pessoa.

Este conceito envolve essencialmente a eliminação de itens desnecessários e a apresentação aos utilizadores apenas das opções essenciais de que necessitam. A título de exemplo, a maioria dos sítios Web oferece uma opção direta entre “Guardar” ou “Cancelar” e “Sim” ou “Não” quando se verifica uma determinada ação.

Da mesma forma, este estatuto também pode ser utilizado para otimizar o seu menu de navegação, apresentar produtos ou serviços e outros elementos da conceção de websites.
hicks-law
3.Juntar objectos semelhantes em espaços partilhados (Princípio da região comum)

Uma das leis da psicologia Gestalt, a lei da região comum, explica que quando os elementos estão agrupados numa página, são vistos como estando ligados uns aos outros.

Isto pode ser conseguido utilizando margens, fundos ou bordos. Um exemplo é quando as hiperligações de navegação são normalmente agrupadas para criar um menu.

Este conceito gira em torno da forma como os elementos estão dispostos e dos espaços entre eles, por isso, certifique-se de que o utiliza eficazmente. Outro exemplo é na página inicial de um blogue, onde as pré-visualizações de publicações são apresentadas por ordem cronológica, o título, a descrição e a imagem de cada publicação devem ser agrupados visualmente.
Princípio-da-região-comum
4.Utilizar situações e raciocínios comuns (Lei de Jakob)

Jakob Nielsen, cofundador do Nielsen Norman Group, introduziu a lei de Jakob, que sublinha a importância da utilização de cenários e lógica comuns no desenvolvimento da IU. Normalmente, os seus utilizadores antecipam - e preferem - que o seu website funcione de forma semelhante àquela a que já estão habituados.

Todos nós criamos representações mentais das convenções da Web. Isto permite que os utilizadores se concentrem nos seus objectivos em vez de tentarem navegar através de uma interface de utilizador desconhecida.

Isto implica que se deve continuar com situações familiares em vez de introduzir situações desconhecidas. Por exemplo, um símbolo que se assemelha a um hambúrguer apresenta normalmente um menu quando clicado.

Ao incorporar este ícone no seu design, certifique-se de que funciona de uma forma consistente com as expectativas dos utilizadores.
hamburger-menu
5.Utilize formas básicas e evite formas complexas (Lei de Prägnanz)

Em 1910, um psicólogo chamado Max Wertheimer testemunhou uma sequência de luzes a piscar intermitentemente numa passagem de nível. Embora parecesse que uma luz se movia através da marquise, na realidade eram várias lâmpadas que se ligavam e desligavam sucessivamente.

Esta descoberta conduziu a uma série de orientações sobre a forma como interpretamos visualmente os objectos. Uma dessas leis é o princípio de Prägnanz, que sugere a utilização de formas descomplicadas e o evitar de formas complexas.

O seu design será interpretado pelos utilizadores com um esforço cognitivo mínimo. As imagens complicadas serão vistas nas suas versões mais básicas. Minimizar o esforço mental deve ser um ponto-chave nos seus objectivos de design.

Pode implementar este conceito organizando e alinhando elementos em grupos, colunas e secções apropriados, em vez de os espalhar aleatoriamente pela página.

As formações e componentes básicos resultarão numa compreensão mais simples.
Lei de Prägnanz
6.Manter os elementos que pertencem uns aos outros próximos uns dos outros (Lei da Proximidade)

A regra da proximidade, também da psicologia Gestalt, diz que os objectos próximos uns dos outros serão vistos como relacionados. Isto também ajuda a diminuir a sobrecarga cognitiva dos seus utilizadores, ajudando-os a compreender a informação.

Utilizar este princípio implica usar o espaçamento de forma sensata. Os componentes de um grupo devem ser mais apertados do que os de grupos separados.

Em vários cabeçalhos de websites, as hiperligações de menu estão agrupadas, enquanto as chamadas para ação (CTAs) estão posicionadas ao lado ou separadas de alguma forma das opções de navegação.

Isto serve como um exemplo ideal da lei da proximidade. As hiperligações de menu e as CTAs distinguem-se visualmente devido às suas funções distintas.
Lei da Proximidade
7.Utilizar a semelhança para criar grupos coesos (princípio da semelhança)

A lei da semelhança, outro princípio da Gestalt, sugere que os objectos que são semelhantes serão vistos como estando ligados, independentemente da distância entre eles. A estilização de conjuntos de caraterísticas com esquemas de cores, ícones e texto correspondentes é o conceito fundamental subjacente a este princípio.

Utilize este princípio cuidadosamente para reunir conteúdos relacionados com um design semelhante e coeso.
princípio da semelhança
8.Estabelecer ligações entre elementos de design para demonstrar a sua associação entre si (Lei da ligação uniforme)

O princípio da ligação uniforme, também derivado da psicologia Gestalt, afirma que os elementos que estão visualmente ligados parecerão mais intimamente relacionados do que os elementos que não estão ligados de todo. Um exemplo de aplicação desta lei é a incorporação de um degrau de progresso nos seus processos de integração ou de checkout.

Esta ligação visual ilustra que todos os passos pertencem ao mesmo processo.
Lei da ligação uniforme
9.Dividir o conteúdo em partes mais pequenas (Lei de Miller)

A lei de Miller, cunhada pelo psicólogo cognitivo George Miller, sugere que o indivíduo médio consegue reter apenas cinco a nove itens na sua memória de trabalho. Este princípio recomenda a divisão do conteúdo em partes. No caso dos números de cartões de crédito, estes são normalmente divididos em conjuntos de quatro dígitos para facilitar a sua interpretação.

Esta lei realça a importância de uma preparação minuciosa da conceção. À medida que uma aplicação aumenta de tamanho e acrescenta mais funções, torna-se mais difícil de navegar. É necessário ter isto em conta ao conceber a sua interface para garantir que pode lidar facilmente com as novas funcionalidades sem deixar de ser fácil de utilizar.

Um outro método para implementar esta regra é restringir a quantidade de informação que o utilizador precisa de processar simultaneamente. Divida o conteúdo em secções mais pequenas em vez de o apresentar como um bloco grande.

Além disso, tenha em conta os tamanhos de ecrã mais utilizados e regule o número de elementos visíveis para os utilizadores de uma só vez.

Critique cuidadosamente a sua conceção. Se achar que existe uma quantidade excessiva de conteúdo numa determinada secção, transfira-o para outra secção e organize os itens de uma forma lógica.
Lei de Miller
10.Chamar a atenção para os itens do início e do fim de uma série (efeito de posição serial)

O psicólogo alemão Herman Ebbinghaus introduziu esta lei e desenvolveu técnicas experimentais para medir a memória. Diz-se que os utilizadores recordam mais eficazmente os primeiros e os últimos itens de uma série. Esta tendência pode ser utilizada para realçar as áreas-chave das suas páginas Web.

Por exemplo, elementos importantes como CTAs, formulários ou opções de compra têm mais impacto quando colocados na parte superior ou inferior da página.
efeito de posição serial
3

10 princípios de usabilidade (UI)

Jakob Nielsen, cofundador do Nielsen Norman Group, desenvolveu várias técnicas de usabilidade, incluindo os dez princípios de avaliação heurística que iremos abordar. O Nielsen Norman Group é uma empresa bem conhecida, especializada em investigação e consultoria de UX, que tem uma grande influência no design da Web e de software.

Nielsen criou estes princípios de usabilidade pela primeira vez em 1990, tendo-os depois atualizado para maior clareza após analisar 249 questões de usabilidade. Relembramos que não se trata de leis ou diretrizes específicas, mas sim de regras gerais. Por isso é que se lhes chama “heurística”.

  • Verificar se os seus clientes são informados com feedback significativo

Os utilizadores devem ter confiança na sua marca e sentir-se confortáveis a utilizar a sua aplicação. Isto implica que o seu website deve atualizar constantemente os utilizadores sobre os desenvolvimentos e informá-los sobre o resultado das suas acções.

Por exemplo, uma plataforma digital de venda a retalho informará os clientes quando colocarem um artigo no carrinho de compras ou o marcarem como favorito para referência futura. O feedback pode informar visualmente os utilizadores através de mudanças de cor, indicadores de progresso, notificações e alertas.

  • A informação deve ser apresentada numa sequência coesa e utilizar uma linguagem e ideias familiares

Os utilizadores devem ser capazes de compreender os termos do seu website sem terem de consultar um dicionário. Deve seguir as práticas tradicionais. Utilize palavras familiares no texto da interface que os utilizadores já conheçam.

Por exemplo, os termos “desfazer” e “refazer” têm definições relativamente consistentes nas interfaces de utilizador de aplicações. A utilização de termos como “reverter” e “repetir” irá confundir os utilizadores porque não lhes são familiares.

  • Permita que os utilizadores tenham controlo e flexibilidade na forma como interagem com o seu website

Os utilizadores cometem frequentemente erros e necessitam da capacidade de reverter ou repetir acções, como demonstrado anteriormente com a utilização de botões. Do mesmo modo, poderá querer pensar em oferecer uma opção Editar em situações adequadas. Por exemplo, esta capacidade é frequentemente benéfica para modificar comentários e mensagens em plataformas de redes sociais.

O acesso a estas funcionalidades ajudará os utilizadores a sentirem-se capacitados e menos stressados em caso de acidente.

  • Cumprir as normas e diretrizes estabelecidas

Seguir diretrizes pode parecer comparável ao segundo princípio e pode ser visto como uma elaboração do mesmo. Criar sistemas de navegação que os utilizadores reconheçam e se sintam à vontade para utilizar. Os utilizadores devem ser capazes de compreender facilmente a sua interface e aceder a todos os elementos necessários para interagir com a sua página.

Um estudo sobre a eficácia dos termos dos carrinhos de compras realça este facto. O termo “Shopping Sled” foi utilizado no design num esforço para se distinguir. No entanto, metade dos utilizadores não conseguiu compreender o seu significado. A segunda parte deduziu o seu significado apenas devido à sua colocação no local onde normalmente se encontra um carrinho numa página Web.

  • Evite erros sempre que possível e alerte os utilizadores antes de fazerem movimentos irreversíveis

Mostrar mensagens de erro úteis é sensato para que os utilizadores compreendam como resolver os problemas e as razões por detrás deles. No entanto, é ainda mais eficiente eliminar situações com grandes probabilidades de erros ou comunicar claramente as potenciais consequências das acções que os utilizadores estão prestes a realizar.

A eliminação de uma conta de usuário, por exemplo, é frequentemente permanente e não pode ser anulada. Muitas aplicações utilizam a cor vermelha para realçar esta definição. Normalmente, aparece uma mensagem de confirmação quando os utilizadores premem o botão Eliminar.

  • Assegurar que os pormenores importantes permanecem facilmente acessíveis

Os utilizadores não devem ser obrigados a recordar pormenores de uma fase de um procedimento, como uma finalização de compra ou uma configuração técnica, para completar outra. O objetivo é que os utilizadores se lembrem das informações em vez de terem de as recordar.

Uma tática que uma loja em linha pode utilizar é fornecer uma lista de produtos vistos recentemente, para que os compradores não tenham de se lembrar dos nomes dos artigos que ainda não compraram.

Crie sistemas que satisfaçam as necessidades tanto de principiantes como de pessoas experientes

Deve garantir que o seu website é de fácil utilização para os novos visitantes, mas também conveniente para os utilizadores experientes que podem necessitar de atalhos para tarefas comuns. Os atalhos de teclado, quer sejam atribuídos por si, quer permitam que os utilizadores os personalizem, são uma ilustração disto mesmo.

Crie designs visualmente apelativos, mas sem complicações

É importante manter uma interface limpa e evitar sobrecarregar os utilizadores com inúmeras opções. Os objectos desnecessários ocupam espaço e ocultam funcionalidades importantes.

Apresentar mensagens de erro que sejam simples de compreender

A identificação fácil das causas dos problemas e a localização imediata de potenciais correcções são facilitadas por mensagens de erro claras e fáceis de compreender. É importante fornecer feedback direto, educado e construtivo, evitando culpar o utilizador e oferecendo conselhos sobre como resolver o problema.

  • Ofereça documentos de ajuda que possam ser facilmente pesquisados

Por vezes, os utilizadores podem precisar de consultar informações de ajuda adicionais. Certifique-se de que a sua documentação é facilmente pesquisável para que os utilizadores possam localizar rapidamente as informações relevantes e resolver os seus problemas.
4

Aplicar os princípios de design de websites aos projectos: Guia Passo-a-Passo

O estudo de numerosos princípios e diretrizes pode ser bastante assustador. Eis algumas diretrizes para os utilizar:

  • Mantenha-se informado sobre os métodos mais eficazes

É importante continuar a aprender e a informar-se sobre as melhores práticas de design UX. Estude as soluções Web existentes para adquirir conhecimentos. Comece os seus projectos com pesquisas ou procurando inspiração para se aprofundar nas necessidades dos seus utilizadores e reunir referências de alta qualidade para fins de aprendizagem.

  • Selecione cuidadosamente os princípios que utiliza

Como cada projeto é único, serão necessário vários critérios de design para ser bem-sucedido. Deve decidir quais serão os mais benéficos para cada website que está a construir. Lembre-se das principais caraterísticas do website, dos seus principais processos de utilização e dos objectivos comerciais relacionados.

  • Verifique se está a avaliar e a melhorar periodicamente os seus projectos

É essencial realizar testes exaustivos do seu website com utilizadores reais, que são o seu público-alvo. Se não o conseguir fazer sozinho, pode pedir ajuda a colegas, clientes e outros designers para recolher feedback valioso sobre a usabilidade do seu website.

Nesta altura, não está à procura da perfeição. Não hesite em aperfeiçoar o seu design com base no feedback dos dados e continue a melhorá-lo, pois a perfeição não é alcançada desde o início.

  • Envolver-se em acções ou actividades repetidas

À medida que continua a trabalhar neles, começará gradualmente a utilizar os princípios de conceção sem sequer pensar nisso. Quanto mais incorporar os princípios de usabilidade no seu processo de conceção, mais fácil será criar soluções eficientes e evitar problemas.

  • Desenvolva o seu estilo individual, mas certifique-se de que domina bem os princípios básicos

As regras são criadas para simplificar os processos, mas não devem ser seguidas cegamente. No entanto, normalmente só será bem sucedido na quebra de regras se tiver uma compreensão completa do seu objetivo.

Estes princípios de design servem como um conjunto de ferramentas fundamentais e um conhecimento básico para explorar e criar o seu próprio estilo distinto.
5

Resumo

Para desenvolver websites profissionais e de fácil utilização, é essencial ter uma boa compreensão dos princípios fundamentais de conceção e aplicá-los eficazmente nos seus projectos. Isto irá melhorar os seus projectos, aumentando a sua atratividade, usabilidade e, mais importante, rentabilidade.

Nesta publicação, discutimos dez leis de UX e dez princípios de usabilidade, abrangendo uma vasta gama de tópicos. Além disso, partilhámos vários métodos para incorporar estas melhores práticas no seu trabalho.

Procura um parceiro competente para as necessidades de web design do seu projeto? Entre em contacto com o Studio.351 para conceção de websites fantásticos.