Princípio de Pareto em web design - projetar um website mais eficaz com a regra 80/20

O problema de ser um perfeccionista em web design

O perfeccionismo pode ser um desafio para muitos designers gráficos e web designers. A busca pela excelência é admirável, mas pode levar a alguma frustração com infinitas mudanças e ajustes até que cada elemento do site seja perfeito. Para muitos designers é fácil ser varrido no processo de design e perder a noção do tempo enquanto escolhem a fonte, as paletas de cores e as centenas de decisões de design perfeitas. Claro, é importante entregar um grande trabalho, mas como designer é fácil perder o foco no que isto significa? Um website não deve ser sobre os objetivos do designer, mas sim sobre o cumprimento do resultado desejado pelo cliente, e ao mesmo tempo equilibrar as limitações de tempo, recursos e energia. Sem restrições, um website pode facilmente acabar sendo super-projetado, lento, com demasiados elementos e características que confundem os usuários. Também é difícil encaixar todos os recursos no tempo limitado, de modo que o designer pode simplesmente ficar sem tempo, e falhar na entrega de um bom website dentro do prazo é muito estressante para todos os envolvidos.

O que é o Princípio de Pareto?

A "regra 80/20", às vezes chamada de princípio de Pareto, afirma que 80% dos efeitos provêm de 20% das causas. O princípio de Pareto foi introduzido inicialmente por um economista italiano chamado Vilfredo Pareto em 1895 quando observou que 80% da riqueza da Itália era de propriedade de apenas 20% de sua população. Ele também observou que 20% das vagens de ervilhas em seu jardim produziam 80% das ervilhas! O princípio de Pareto sugere que alguns elementos-chave são responsáveis pela produção da maior parte de um determinado resultado. Desde então, ele tem sido aplicado em muitas outras áreas, incluindo negócios, economia, psicologia e pode até ser prático para a vida cotidiana.

Isso se traduz bem em exemplos menores também; você já notou que a maior parte de sua renda vem de um punhado dos mesmos clientes estáveis? Ou que você parece usar sempre os mesmos artigos de vestuário enquanto a maioria de seu guarda-roupa não é usada? Embora a proporção nem sempre seja exatamente 80/20 e haja sempre exceções, é uma ótima ferramenta para ajudar as pessoas a identificar quais ações têm o maior impacto em seu sucesso e priorizá-las de acordo.

O princípio de Pareto em web design e marketing digital

O princípio de Pareto aplicado ao web design, assume que a maioria dos resultados virá de um pequeno número de características-chave. Em marketing, algumas campanhas serão muito melhores do que outras. Para alcançar o melhor resultado, faz sentido focar primeiro neste pequeno número de características-chave e garantir que elas recebam a maior atenção, enquanto as partes menos importantes podem ser feitas mais rapidamente. Uma maneira de usar o Princípio de Pareto é se concentrar na experiência do usuário e na usabilidade - prestando atenção em como os usuários interagem com seu conteúdo on-line e garantindo que eles possam encontrar o que precisam, é provável que você obtenha maiores recompensas do que se você estivesse simplesmente se concentrando apenas na estética. Isso nos ensina que a perfeição nem sempre é necessária, e que é possível alcançar um website ainda mais eficaz, otimizando os importantes 20% das características.

Como exemplo, acabamos de olhar os dados de tráfego de uma pequena loja de comércio eletrônico que vende produtos feitos à mão e notamos várias tendências de Pareto. Por exemplo, quase todos os seus visitantes acessam o site através do celular. A maioria das vendas de produtos é de um pequeno número de categorias. O Facebook foi sua maior fonte de tráfego nas mídias sociais. Ao examinar um mapa de calor da página de produtos, algumas áreas obtêm mais envolvimento. O típico padrão F pode ser um pouco observado, com agrupamentos de interações na linha superior e abaixo do lado esquerdo da página.

O que pode ser feito com estas informações para melhorar as vendas para este cliente?

Neste exemplo, a vitória mais rápida seria melhorar a experiência móvel deste website, que foi originalmente construído para desktop. Os heatmaps de todas as páginas poderiam ser examinados para saber mais sobre as preferências do usuário. Por exemplo, as perguntas mais clicadas da seção FAQ poderiam ser movidas para a página inicial ao invés de serem escondidas. Produtos de alto lucro poderiam ser apresentados nas áreas da página onde é provável que ocorra o maior número de cliques.

Comece sempre com o "Por que".

(Fonte da imagem: Elementos do Envato)

Pela minha experiência no setor, tenho notado que muitos designers estão felizes em aceitar o resumo e começar a trabalhar em projetos, mesmo que estejam faltando peças-chave de informação relacionadas ao objetivo do projeto. Talvez a pessoa que compilou o resumo pensasse que esta informação estava implícita, ou o cliente não a verbalizou concisamente. Tome um momento para se afastar antes de começar a trabalhar. Sem uma compreensão clara da razão pela qual você está fazendo o que está fazendo, seu web design não terá direção. Seu website pode parecer bom para você e até mesmo para o cliente, mas apesar de suas muitas horas, o resultado será decepcionante se não alcançar os resultados previstos pelo cliente.

Pergunte-se: Por que este site existe? Quem serão os usuários finais do site e como eles irão interagir no site? Como o website irá criar valor e sucesso para seu cliente? Como o cliente irá medir este sucesso? Como o website atrairá visitantes e capturará leads? Quando você puder responder estas perguntas, e entender o "Por que", será mais fácil priorizar o "O que" e o "Como" dos elementos do design. Quando você puder visualizar o resultado desejado, ele o ajudará a concentrar sua energia nas áreas mais importantes para alcançar este objetivo.

Adotar a abordagem de produto mínimo viável no projeto web

Com tantas decisões a tomar ao projetar um website, pode ser difícil saber por onde começar. A abordagem do produto mínimo viável (MVP) envolve a construção apenas dos elementos centrais de um website imediatamente e, em seguida, refiná-los continuamente através do feedback do cliente ao longo do tempo. Geralmente é feito para economizar custos e tempo, ou quando uma idéia comercial é baseada em muitas suposições. Em vez de tentar tudo de uma vez, os desenvolvedores podem priorizar recursos com base nas necessidades do cliente e criar protótipos o mais rápido possível. Mesmo quando você não está sob pressão de tempo ou orçamento, abraçar o website como um MVP é uma forma fantástica de aplicar o princípio de Pareto e de combater as tendências perfeccionistas. Mentalmente, ajuda saber que você pode sempre acrescentar mais recursos mais tarde, mas que você deve se concentrar nos elementos mais importantes por enquanto.

O design para mobile-first pode ajudar a simplificar seu site

Ao projetar um website, você quer dar aos usuários uma experiência eficaz e intuitiva. A melhor maneira de conseguir isso é projetar com uma abordagem de design "mobile-first". Este conceito envolve a criação de websites que são otimizados para dispositivos móveis em primeiro lugar, em vez de websites desktop que são adaptados para dispositivos móveis. Por que isso é necessário? Em 2022, de acordo com o techjury.net, os celulares geram 60,66% do tráfego do website, enquanto os desktops e tablets juntos são responsáveis por 39,34%. Isto pode variar em diferentes indústrias e em diferentes websites, mas a tendência é digna de nota. Ao concentrar seu design na versão móvel do site, você pode empilhar as chances de sucesso em seu favor.

Assim que você começar a projetar para dispositivos móveis, notará rapidamente que há menos espaço para palavras e desordem. É bastante difícil de se adaptar, se você vem projetando para desktops há muito tempo. Mas esta abordagem se encaixa bem no princípio de Pareto, uma vez que ajuda a escolher o conteúdo com maior impacto. Isto tem dois benefícios: seu site será otimizado para a plataforma móvel preferida pelos usuários, e quando você adaptá-lo para desktop ele terá um visual moderno e limpo. Você ainda precisará adaptar seu site à área de trabalho mais tarde, mas ao trabalhar a partir da abordagem mobile-first torna-se muito mais fácil, uma vez que você já tem um design simplificado.

Pesquisar e analisar os sites da concorrência

Quando se trata de web design, muitas vezes pensamos em pesquisa como se estivéssemos olhando para outros sites ou modelos inspiradores com belos elementos de design. Mas a pesquisa para web design vai além de apenas admirar a estética de outros websites. É necessário entender como as pessoas usam a web, como os usuários interagem com diferentes designs, e como o conteúdo é organizado para criar um website eficaz. Ao solicitar quaisquer dados analíticos que o cliente possa fornecer ou ao utilizar uma ferramenta de monitoramento como o Ranktracker, podemos identificar melhor as áreas de oportunidade de melhoria para um website com melhor desempenho.

A pesquisa deve incluir o exame dos padrões industriais existentes, dos públicos-alvo e das preferências dos usuários através da análise da concorrência. Você pode encontrar concorrentes perguntando ao cliente, ou fazendo suas próprias pesquisas e vendo quais sites estão no topo da lista. Uma vez identificados alguns concorrentes, você precisa de uma fonte confiável de dados sobre eles. Uma das minhas características favoritas do Ranktracker é a capacidade de adicionar seus próprios concorrentes identificados e ele exibirá o desempenho dos concorrentes em uma coluna ao lado dos resultados de seu próprio domínio. Se um concorrente está acima de você por suas próprias palavras-chave, vale a pena analisar o site deles para aprender com eles. Para adicionar um concorrente, você simplesmente cola na URL dele.

Clique para um grande artigo detalhado sobre como conduzir uma análise competitiva.

Enquanto você faz toda a sua pesquisa, faça uma "lista de sonhos" de todas as características e elementos possíveis que você poderia incluir (não se preocupe, você vai estreitá-los, mas é útil ter todas as idéias juntas).

Planejamento: Identificação das principais características do projeto

(Fonte da imagem: Elementos do Envato)

O design de um site deve ser baseado em sua finalidade. Observe todos os elementos/características de sua lista de sonhos e escolha aqueles que você acha que ajudarão seu cliente a atingir seu objetivo. Pegue algum papel em branco e comece a desenhar algumas armações de arame ásperas para seu website. Em suas wireframes, conecte cada elemento que você planeja incluir a um resultado: se você não conseguir encontrar um propósito claro para ele, raspe essa seção. Não pense na estética do design, concentre-se no que é melhor para a experiência do usuário e para a usabilidade.

Ao contrário da crença popular, seus primeiros wireframes não precisam ser projetados com software de design extravagante. A abordagem analógica de um lápis e papel funcionará muito bem, e às vezes até melhor, pois você não se distrai com o software em si. O papel é mais indulgente e menos permanente; é mais rápido de usar, o que pode ajudar durante o processo criativo. Se você precisar apresentar wireframes ao seu cliente, isto pode ser feito de forma mais profissional uma vez que você tenha trabalhado os desenhos em bruto.

Faça uma maquete primeiro, não projete na plataforma web para economizar tempo

Há um velho ditado que diz que não se pode pilotar um avião enquanto se está construindo-o. Isto é verdade para o web design: tentar construir um website enquanto você ainda está descobrindo decisões sobre conteúdo, características e design, é uma receita para a frustração. Para manter as coisas eficientes, você precisa de um plano. Criar uma maquete de cada página parece demorado e contra-intuitivo aqui, mas serve a muitos propósitos e vai economizar tempo a longo prazo. As maquetes permitem que seu cliente visualize o site antes mesmo do início do desenvolvimento da web. Eles podem experimentar as diferentes opções de cores e fontes, e facilmente antecipar o que precisa ser mudado. Discutir um mock-up cria muitas oportunidades para discussão e perguntas. Aumenta as chances de seu cliente ficar feliz quando ele vê o site ao vivo pela primeira vez. Mais importante ainda, trabalhar com uma maquete permite que você construa o site muito mais rápido uma vez que quase todas as decisões criativas já tenham sido tomadas.

Trabalhar com conteúdo que será bem classificado nos motores de busca

Às vezes, um cliente insistirá para que você comece a projetar com "texto de espaço reservado", pois eles pensam que seu papel é apenas projetar os elementos estéticos. Se possível, evite fazer qualquer trabalho de projeto com texto genérico de espaço reservado. Embora seus designs possam parecer bonitos, seu website não teria propósito se você negligenciasse um ingrediente chave, como conteúdo bem escrito.

Um site só é valioso se receber visitantes, e Search Engine Optimization (SEO) é como os motores de busca encontram seu site organicamente. As escolhas de redação que se usam em uma página são críticas para SEO, e os elementos de design devem suportar a redação. Se você souber quais são as palavras-chave à partida, isso lhe dará uma visão extra. Se você estiver trabalhando com um redator para seu conteúdo, certifique-se de que ele esteja familiarizado com SEO. Mesmo que você não seja um especialista em SEO, familiarize-se com este tópico para que você possa estar mais ciente disto durante seu processo de web design.

Algumas ferramentas de busca por palavras-chave são complicadas (especialmente se você é novo no SEO), mas o Ranktracker Keyword Finder é muito simples e intuitivo: você simplesmente adiciona as palavras-chave a uma lista e ele exibe os resultados codificados por cor por dificuldade de palavra-chave. Para um bom SEO você quer escolher palavras-chave com baixa concorrência, mas com volume de busca adequado, por isso é muito útil que os volumes de busca sejam exibidos ali mesmo.

Portanto, antes de começar, tente obter pelo menos um rascunho do texto. Se você for um designer autônomo, é provável que você também precise ajudar o cliente a descobrir onde a redação se encaixa melhor no site. Uma realidade do processo de design é que esta redação pode mudar algumas vezes, mas ter algo com que começar é muito melhor do que nada.

Simplificar as escolhas sobre fontes, cores, hierarquia e elementos visuais

Se você é um designer menos experiente ou apenas gostaria de economizar algum tempo, é útil trabalhar com os modelos e usá-los como base. Para um CMS como o WordPress, existem milhares de excelentes modelos a preços razoáveis. Estes já possuem fontes, cores, hierarquia e elementos visuais desenhados em um estilo coeso. Se você está preocupado com a originalidade, tenha certeza de que seu resultado será diferente do modelo, já que você está adaptando-o às suas wireframes. Ter alguns recursos de design e um estilo geral para começar, pode realmente ajudá-lo a encontrar a direção e reduzir a fadiga de decisão. Não inclua muitas cores: você pode limitar com segurança as cores de seu website a 2 cores ou um máximo de 3. Confira as 20 Melhores Combinações de Cores para Experimentar em seu website para algumas grandes idéias e tendências ao escolher as cores do website.

Conclusão: Maximizando o impacto

Sabendo onde se concentrar, pode ajudar um projetista a administrar suas tendências perfeccionistas enquanto ainda alcança o sucesso. O princípio de Pareto é uma regra básica em web design que afirma que 80% da experiência do usuário pode ser alcançada com 20% do esforço. Isto significa que os web designers precisam concentrar seus esforços na otimização de conteúdo, elementos de design na página, usabilidade e outros fatores para criar um site efetivo que se classifique bem nos mecanismos de busca.