Dicas de e-commerce: aparência da página inicial

A hierarquia visual é um princípio fundamental por trás do design eficaz da página inicial do comércio eletrônico (e, nesse caso, de todo o design web).

Uma forte hierarquia visual ajuda a entregar sua mensagem de maneira rápida e clara a possíveis compradores. A sua chamada à ação, por sua vez, oferece uma próxima etapa clara para mover os visitantes além da página inicial e em direção às páginas dos seus produtos.

Juntos, eles são dois dos componentes mais importantes na criação de uma página inicial eficaz de comércio eletrônico. Estas são 12 diretrizes que ajudarão você a ter sucesso com ambas.

12 diretrizes para o design da página inicial:

  1. Evite elementos de design extras sem sentido que sobrecarregam desnecessariamente a carga cognitiva.
  2. A hierarquia visual deve seguir a hierarquia da informação.
  3. O menu transacional deve estar mais alto na hierarquia visual do que o menu de conteúdo.
  4. A proposta de valor deve estar localizada acima da dobra.
  5. Chame a atenção para o menu de navegação, tornando-o visível e com cores contrastantes com o restante da página.
  6. Se você tiver espaço, exiba fotos ou miniaturas ao lado das categorias de produtos.
  7. Faça blocos de conteúdo separados parecerem visualmente distintos, adicione espaço em branco suficiente no meio.
  8. Evite colocar promoções do site diretamente acima das listas de produtos.
  9. O CTA deve ser visualmente proeminente.
  10. Os botões da CTA geralmente são melhores que os links.
  11. Se você tiver um CTA secundário, deve ser menos perceptível.
  12. Destaque o CTA com dicas visuais.

Por onde começar com o design da página inicial de comércio eletrônico

Comece com seu objetivo comercial. Classifique a importância dos elementos na sua página inicial com base no seu objetivo comercial.

Um bom design da página inicial de comércio eletrônico exige levar em conta a jornada do usuário:

  • Onde você quer que as pessoas cliquem?
  • Quais informações você absolutamente precisa deles para ler?
  • Qual plano de preços você deseja que eles escolham?

Depois de conhecer suas prioridades, você pode definir corretamente a hierarquia visual - verifique se as coisas importantes se destacam e se os elementos menos importantes são inferiores na hierarquia visual.

Lembre-se de que certos elementos de um site são mais importantes que outros (formulários, chamadas para ação, proposição de valor etc.) e você deseja que eles recebam mais atenção do que as partes menos importantes.

Torne os links importantes mais proeminentes.

  • Se o menu do seu site tiver 10 itens, todos são igualmente importantes?
  • Onde você deseja que o usuário clique?
  • Qual a probabilidade de os usuários clicarem em um CTA?

Quando se trata de testar cores diferentes, saiba que é tudo uma perda de tempo e esforço. Não existe uma melhor cor. O que importa é que você use cores que se destacam do restante do layout para as coisas importantes. É sempre sobre hierarquia visual, não sobre cores.

As chamadas à ação minimizam a hesitação (o “e agora?") e orientam os visitantes para o próximo passo óbvio. Nosso objetivo como otimizadores é deixar claro qual deve ser o próximo passo.

Conseguir que os usuários cliquem em um CTA depende de três fatores:

  • Eles percebem o CTA.
  • O próximo passo é óbvio e faz sentido.
  • Eles vêem valor na próxima etapa.

Consideramos esses três fatores principais ao avaliar chamadas para ação.

Abaixo estão cada uma das 12 diretrizes, completas com exemplos do que fazer (e não fazer) para ajudar sua página inicial de comércio eletrônico a ter sucesso.

Diretriz #1. Evite elementos de design extras sem sentido que sobrecarregam desnecessariamente a carga cognitiva.

Em um estudo do Google, os pesquisadores descobriram que não apenas os usuários julgam os sites bonitos ou não entre 1/50 e 1/20 de segundo, mas também que sites “visualmente complexos” são consistentemente classificados como menos bonitos do que seus colegas mais simples.

Além disso, sites “altamente prototípicos” - aqueles com layouts geralmente associados aos sites da categoria - com design visual simples foram classificados como os mais bonitos em geral. Em outras palavras, quanto mais simples o design, melhor. Seu processo de design da página inicial de comércio eletrônico deve aproveitar essas informações.

A razão pela qual sites menos “visualmente complexos” são considerados mais bonitos é em parte porque os sites de baixa complexidade não exigem que os olhos e o cérebro trabalhem fisicamente, tanto quanto decodificar, armazenar e processar as informações.

Quanto mais variações de cores e luzes na página (complexidade visual), mais esforço é necessário para o olho enviar informações ao cérebro. É por isso que é importante lembrar que todo elemento - tipografia, logotipo, seleção de cores etc. - comunica informações sutis sobre uma marca.

Quando esses elementos não funcionam, o webmaster geralmente compensa adicionando cópias e/ou imagens desnecessárias, aumentando a complexidade visual e prejudicando a estética geral.

Otimizar uma página para o processamento visual de informações - minimizando a quantidade de informações que viajam do olho para o cérebro - é comunicar o máximo possível com o mínimo de elementos possível.

Diretriz #2. A hierarquia visual deve seguir a hierarquia da informação.

Combine o tamanho e o local do conteúdo com sua importância relativa.

Quando se trata de tamanho, os maiores elementos de uma página recebem mais atenção. Quando se trata de local, os elementos na parte superior de uma página recebem mais atenção. Aplique esses princípios de hierarquia visual de bom senso aos elementos da página inicial.

Além disso, lembre-se de que, quando se trata do design da página inicial de comércio eletrônico, o local mais próximo ao topo da página é o mais valioso.

Coloque os elementos mais importantes (logotipo, CTA, proposta de valor, menus de navegação etc.) acima da dobra e amplie-os. Mostre conteúdo menos importante mais abaixo na página; as miniaturas devem diminuir de tamanho à medida que você move a página para baixo.

Diretriz #3. O menu transacional deve estar mais alto na hierarquia visual do que o menu de conteúdo.

Considere o que normalmente é mais desejado em uma página inicial: a página de Perguntas frequentes (menu de conteúdo) ou a lista de produtos do site (menu transacional)? Lembre-se: estamos falando de páginas iniciais de comércio eletrônico, portanto, o foco está na venda e não na navegação.

Como os menus transacionais são acessados com mais frequência do que os menus de conteúdo, eles devem ser mais altos na hierarquia visual. Siga a convenção para determinar a melhor veiculação para um menu transacional:

  • Normalmente, está localizado na frente e no centro da página inicial, mas também pode ser encontrado como um menu vertical no lado esquerdo da página.
  • O menu transacional deve ter um tamanho maior que o menu de conteúdo.
  • Para chamar a atenção para o menu transacional, coloque-o em uma faixa colorida contrastando com o fundo.
  • Como alternativa, crie uma borda ao redor do menu para obter um efeito semelhante.
  • Deixar amplo espaço em branco ao redor do menu transacional é outra técnica viável.

Diretriz #4. A proposta de valor deve estar localizada acima da dobra.

“Acima da dobra” é a parte do site que as pessoas veem sem rolar para baixo. O nome vem de jornais que foram (muitos ainda estão) dobrados ao meio, de modo que os jornais colocam todas as principais notícias e fotos na metade superior, acima da dobra.

Quando você cria uma página longa, é essencial que você priorize o conteúdo: atenda as informações mais importantes primeiro, menos importante por último.

A proposta de valor é um componente central de qualquer página inicial. Ele comunica o objetivo de um site e como uma empresa é diferente e superior a seus concorrentes. Como pedra angular da página inicial, as proposições de valor devem ser colocadas acima da dobra, onde elas têm maior chance de atrair atenção.

Diretriz #5. Chame a atenção para o menu de navegação, tornando-o visível e com cores contrastantes com o restante da página.

O menu de navegação é outro elemento crítico da página inicial nos sites de comércio eletrônico. Muitos usuários ignoram o conteúdo de uma página inicial inteira e vão diretamente para o menu de navegação.

Recentemente, web designers vêm experimentando menus de navegação ocultos e parcialmente visíveis. No entanto, pesquisas mostram que ocultar o menu de navegação dificulta a experiência do usuário e a descoberta de conteúdo.

A menos que você queira levar o visitante a executar uma ação específica (páginas de destino), o menu de navegação precisa ser um dos elementos mais perceptíveis na página.

Use um banner, caixa ou cores contrastantes para cumprir esta diretriz.

Diretriz #6. Se você tiver espaço, exiba fotos ou miniaturas ao lado das categorias de produtos.

Os seres humanos são criaturas intrinsecamente visuais. Isso não é novidade. Os pesquisadores da UX descobriram que os usuários podem encontrar itens em uma lista aproximadamente 37% mais rápido quando os itens são pareados com ícones.

Além disso, a pesquisa de Potter descobriu que leva apenas 13 milissegundos para o seu cérebro ver e compreender uma imagem. Ainda não está convencido?

As imagens em uma página da web recebem 94% mais visualizações do que partes de texto.

As imagens são um componente fundamental do design da página inicial de comércio eletrônico. De fato, temos um conjunto inteiro de diretrizes focadas em imagens de comércio eletrônico.

Em um estudo da CXL Research, costumávamos rastrear os olhos para descobrir quanto tempo e quais elementos de uma página da web as pessoas olham. O único elemento da página que 100% das pessoas olhou foi a imagem.

As imagens são mais rápidas e inatas que o texto.

A exibição de miniaturas ao lado das categorias de produtos cria um fluxo de pesquisa intuitivo e reduz a carga cognitiva. (Evite esta diretriz se a sua página inicial não tiver espaço para miniaturas complementares.)

Exemplo:

Veja as miniaturas ao lado das categorias

Diretriz #7. Faça blocos de conteúdo separados parecerem visualmente distintos, adicione espaço em branco suficiente no meio.

O conteúdo deve ser visualmente separado para que os usuários entendam o que é relacionado e importante e o que não é. (Veja também a diretriz nº 8).

Ao criar uma página inicial de comércio eletrônico, isso é particularmente importante: se você deseja que os usuários tomem ações, não deve sobrecarregá-los/sobrecarregá-los com informações desorganizadas.

Existem algumas maneiras de separar visualmente o conteúdo e torná-lo mais “organizado”:

  1. O espaço em branco às vezes é chamado de espaço negativo. Essencialmente, é a parte não marcada do seu site (por exemplo, margens, sarjetas e espaço entre texto / imagens). Se você quiser ter certeza de que algo aparece claramente, verifique se há espaço em branco suficiente ao redor, eliminando a ameaça de distração e falta de comunicação.
  2. Linhas, bordas e grades minimalistas também podem criar limites entre os blocos de conteúdo sem parecer muito intrusivos.

Diretriz #8. Evite colocar promoções do site diretamente acima das listas de produtos.

Semelhante à diretriz anterior, essa diretriz visa evitar confusões ao discriminar os elementos da página. Se uma promoção do site for exibida diretamente acima de uma lista de produtos (típica nas páginas iniciais de comércio eletrônico), é possível que os usuários confundam a promoção como parte da lista de produtos.

Por exemplo, se uma promoção “Selecionar blusas com desconto de 20%” for colocada acima da lista de produtos para todos os blusas, os visitantes do site poderão confundir esta lista de produtos como sendo os blusas “selecionadas” que estão à venda.

Tudo depende de como os elementos são projetados. A exibição de uma promoção acima de uma lista de produtos é aceitável, desde que as duas sejam claramente distinguíveis.

Use bordas ou outras dicas visuais que digam: “essas duas coisas não estão relacionadas”.

Diretriz #9. O CTA deve ser visualmente proeminente.

Um CTA deve ter um contraste de cores, cercado por muito espaço em branco e alto na hierarquia visual da página inicial. O CTA geralmente é o elemento mais importante em uma página inicial (ou página de destino ou qualquer página realmente … não precisa ser de comércio eletrônico).

Para um CTA no qual os usuários realmente clicam, o design de um botão simplesmente não pode ser desperdiçado. Algumas maneiras de garantir que seu CTA seja visto:

  • Torne-o GRANDE - coloque-o acima da dobra.
  • A cor contrasta o botão CTA contra o fundo.
  • Coloque o CTA em branco.
  • Torne-o o elemento mais notado na primeira página.

Evite gráficos concorrentes:

  • Grandes navegações que ocupam muito espaço;
  • Distraindo fontes e cores;
  • Imagens em movimento;
  • CTAs adicionais com cores de alto contraste.

Em 2000, o tempo médio de atenção humana no Canadá foi de 12 segundos. Em 2013, esse número havia caído para 8 segundos, o que também é um segundo menor que um peixe dourado. (Você sabe, o peixe é famoso por não ter foco.)

Crie o CTA principal com as distrações em mente.

Os botões são projetados para serem clicados. Sua disponibilidade comunica isso.

Como o CTA é a ação mais procurada em uma página inicial, projetá-lo como um botão deve ser sua principal abordagem. Especialmente se não houver outros botões visíveis na página, o CTA será claramente o próximo curso de ação para os visitantes do site.

Quer saber como criar um CTA atraente? Use enfeites e bordas.

  1. A proposta de valor deve estar localizada acima da dobra.
  2. Chame a atenção para o menu de navegação, tornando-o visível e com cores contrastantes com o restante da página.
  3. Se você tiver espaço, exiba fotos ou miniaturas ao lado das categorias de produtos.
  4. Faça blocos de conteúdo separados parecerem visualmente distintos, adicione espaço em branco suficiente no meio.
  5. Evite colocar promoções do site diretamente acima das listas de produtos.
  6. O CTA deve ser visualmente proeminente.
  7. Os botões da CTA geralmente são melhores que os links.
  8. Se você tiver um CTA secundário, deve ser menos perceptível.
  9. Destaque o CTA com dicas visuais.

Diretriz #11. Se você tiver um CTA secundário, deve ser menos perceptível.

O objetivo de um CTA é chamar a atenção para a ação mais desejada em uma página. Quando existem dois ou mais CTAs, os usuários não estão mais sendo direcionados para a ação mais importante. Em vez disso, torna-se seu dever processar mentalmente cada CTA e tentar identificar as diferenças entre elas.

A ação mais importante deve sempre ser a mais perceptível. Isso é especialmente importante para o design da página inicial de comércio eletrônico. Evite a tentação de orientar os usuários para várias ofertas ou produtos (orientação nº 3).

Um CTA secundário não precisa ser evitado a todo custo. Em vez disso, um CTA secundário também deve ser o segundo na hierarquia visual. O objetivo é naturalmente direcionar os usuários para ações e áreas de importância sem impor carga cognitiva sobre eles.

Diretriz #12. Destaque o CTA com dicas visuais.

Adicione dicas visuais para chamar atenção e importância para o CTA. Por meio de nossa própria pesquisa com o CXL Institute, descobrimos que as pessoas passam muito mais tempo olhando para um CTA quando há uma sugestão visual destacando-o.

Dentre as dicas testadas em nossa pesquisa, descobrimos que uma flecha desenhada à mão direcionava mais atenção ao CTA. A segunda sugestão visual mais eficaz foi uma linha simples apontando para o CTA.

Não gosta na seta desenhada à mão? Aqui estão algumas outras dicas visuais para testar:

  • uma pessoa olhando para o CTA;
  • um gráfico apontando para o CTA (pode ser uma variedade de formas: uma linha, um triângulo etc.);
  • um CTA visualmente destacado do plano de fundo (por exemplo, borda azul clara que contrasta com o plano de fundo branco); bordas ou caixas ao redor do CTA.
Próximo