Práticas recomendadas de web design SaaS: padrões e tendências de design que vale a pena conhecer

Quais são as melhores práticas para web design SaaS?

Essa é a pergunta que me propus a responder depois de tropeçar em um site SaaS, depois do site SaaS, depois do site SaaS… Eles pareciam praticamente os mesmos:

Compreender as melhores práticas pode ser uma ótima maneira de web designers (e fundadores de SaaS) pensarem sobre a presença de sua própria marca. É uma abordagem que Andy Crestodina adotou alguns anos atrás ao analisar os padrões da web para os 50 principais sites de marketing . Também pode ajudar designers, estrategistas e fundadores a planejar suas iniciativas de design usando wireframes e identificando quais elementos-chave de design precisam estar em sua página inicial.

O Nielsen / Norman Group publicou uma das primeiras documentações sobre Web Design Standards e definiu três níveis de padronização:

• Padrão: mais de 80% dos sites usam a mesma abordagem
• Convenção: 50 – 79% dos sites usam a mesma abordagem
• Confusão: 49% ou menos sites usam uma abordagem

Embora eu originalmente tivesse muita frustração com as marcas semelhantes de SaaS, quanto mais eu analisava o raciocínio para seguir os padrões de design e as práticas recomendadas, mais entendia o benefício da consistência. Alguns dos benefícios que vêm com os seguintes padrões da web de design incluem:

• Uma sensação de segurança e confiança ao ver elementos de design comuns
• Saber exatamente para onde ir quando precisar de algo (ou seja, Home via. logo click)
• Nenhuma incerteza em torno de novos ícones, botões e elementos de design. Nenhum elemento-chave (ou seja, obter uma demonstração) perdido

Todas essas coisas podem tornar a experiência do usuário mais suave e intuitiva.

Mas há muitas coisas no espaço SaaS que parecem ser replicadas sem uma boa razão.

Então, para entender melhor os Padrões de Web Design SaaS, pegamos os 250 principais sites do SaaS 1000 para criar um conjunto de dados que nos mostrava o que se tornou padrão, o que era convencional e o que era uma moeda ao ar.

Veja mais de perto as melhores práticas de design de SaaS que acontecem em 2022:

Os logotipos da marca estão sempre no lado esquerdo

Então, você decidiu criar um logotipo (ou atualizar seu existente) e está se perguntando onde colocá-lo em seu site. A colocação do seu logotipo no canto superior esquerdo de um site é uma prática recomendada de design comum. Vimos até um aumento de 1% nos logotipos à esquerda da navegação desde 2019! É uma abordagem que a maioria dos designers utiliza dentro e fora do SaaS. É uma escolha lógica reconhecer que a maioria das pessoas na América do Norte visualiza um site da esquerda para a direita.

Mas às vezes (em nossa pesquisa; uma vez), um designer decide colocar o logotipo em outro lugar. Embora não tenhamos visto nenhum site colocar seu logotipo à direita; encontramos o DataDog que colocou seu logotipo diretamente no meio do site:

Em um estudo de pesquisa de logotipo , o pessoal da Venngage descobriu que 35% das pessoas preferiam logotipos com texto dominante e estilo horizontal para empresas de tecnologia.

A maioria dos sites SaaS são responsivos a dispositivos móveis

Vivemos em um mundo móvel.

Sites responsivos para dispositivos móveis são uma ótima maneira de garantir que você não forneça experiências interrompidas para pessoas em um computador ou visitando dispositivos móveis.

Em 2018, 52,2% de todo o tráfego online mundial foi gerado por meio de telefones celulares. É por isso que é tão bom ver que quase todas as empresas de SaaS estão investindo em um design responsivo e nas melhores práticas de página de destino móvel, em vez de apenas criar para desktops.

Vídeo pode ser encontrado em um terço dos sites

Embora o vídeo tenha conquistado os canais de mídia social, não é tão popular em sites SaaS. Dos sites que apresentavam um vídeo em sua página inicial, a maioria dos vídeos exigia que os usuários clicassem para iniciar o vídeo. Esses vídeos geralmente eram clipes curtos, a maioria com menos de 5 minutos, que forneciam contexto sobre a história da empresa, proposta de valor ou demonstração de produto.

Ficamos muito surpresos ao descobrir que a maioria dos sites não tem vídeos em suas páginas iniciais e ainda mais surpresos ao ver um declínio de 13% desde nosso estudo anterior em 2019.

As expectativas de custo herdadas que acompanham a produção de um vídeo de alta qualidade ainda podem estar impedindo as marcas desse investimento. Explicadores de produtos ilustrados ganharam popularidade há alguns anos e se tornaram um serviço popular comprado por meio de sites como Fiverr e Upwork.

Hoje, a demanda por esses tipos de vídeos ainda é bastante alta (mais de 14.800 pesquisas por vídeos explicativos por mês), mas apenas um pouco mais da metade das empresas de SaaS os utilizam.

Há sempre uma chamada para ação principal acima da dobra

Há uma prática recomendada clara na comunidade SaaS de que sua chamada à ação que leva as pessoas a fazer algo precisa estar acima da dobra. Mais de 90% de todos os sites incluídos nesta pesquisa de SaaS Design tinham um botão ou call to action acima da dobra.

A colocação do CTA geralmente pode ser encontrada acima da dobra

A maioria dos sites SaaS vai direto ao ponto quando se trata de onde o CTA é colocado. A maioria dos sites coloca seu CTA acima da dobra. Essa é uma boa prática a ser seguida, pois garante que os usuários vejam seu CTA, mesmo que não rolem a página até o fim.

Azul passa verde como a nova opção para botões SaaS

Ao analisar as várias cores de call to action, houve uma clara tendência para o azul, com os CTAs verdes em segundo e laranja em terceiro.

A popularidade dos botões azuis de CTA cresceu significativamente desde 2019, superando o verde em cerca de 3% (que foi a cor de CTA mais popular em 2019). Há uma boa razão para isso: a cor azul é mais comumente usada para hiperlinks e é uma cor atraente.

A avaliação gratuita supera o início como o CTA mais popular em SaaS

A maioria das marcas de SaaS está usando a linguagem de call-to-action que é música para suas carteiras: grátis .

A maioria dos sites que analisamos optou pela frase "Avaliação gratuita" para sua chamada à ação. Outro CTA vice-campeão foi uma linguagem orientada para a ação que atraiu o visitante a fazer algo que o impulsionou ainda mais no funil. Algumas variações incluem:

• Iniciar

• Solicite uma demonstração

• Agende uma demonstração

• Inscrever-se

• Obtenha uma demonstração gratuita

• Obtenha X Gratuitamente

As palavras + frases mais comuns dentro do call to action tendem a ser: Free, Demo, Get, Started, Try X e Request… Algumas dessas palavras apareceram juntas (ou seja, Free Demo ou Try X For Free), mas usando um A combinação dessas palavras tende a aparecer mais nos CTAs primários de SaaS.

Usar um fundo claro é a melhor prática

Não é comum ver um site com fundo preto em SaaS:

A maioria dos sites (92% deles) usou cores claras ou brancas como plano de fundo principal para seus sites.

Usar pessoas reais é usado por 80% do SaaS

A colocação de pessoas reais na página inicial foi a opção favorável para a maioria das marcas SaaS. A colocação de pessoas reais na página inicial geralmente era encontrada em seções combinadas com depoimentos e recursos de conteúdo. Ocasionalmente, eles apareciam diretamente acima da dobra no cabeçalho, como no exemplo abaixo, mas na maioria das vezes, imagens de pessoas reais eram apresentadas mais abaixo na página.

Este é um grande salto em relação ao mesmo estudo que realizamos em 2019 . Apenas 3 anos atrás, apenas 56% dos sites usavam pessoas reais em suas páginas iniciais, representando um aumento colossal de 24%.

Também foi ótimo ver um pouco de diversidade na seleção de imagens. A única coisa que faltava era ver um nível semelhante de diversidade nas páginas “Nossa Equipe”, mas isso é assunto para outro momento.

Ilustrações personalizadas são muito comuns (70%)

A ascensão de ilustrações personalizadas varreu a comunidade SaaS pela tempestade. Nos últimos 3 anos, é algo que vem surgindo em site após site. Nossa opinião profissional é que esta é uma tendência, mas está a apenas alguns pontos percentuais de se tornar uma prática recomendada.

Aqui está um instantâneo de alguns dos sites e suas ilustrações:

Essa é uma tendência interessante.

O que você acha: essa abordagem de design ajuda as startups a se destacarem ou resulta na mistura delas? Isso importa? Transmite uma sensação de confiança?

Metade das marcas de SaaS usa uma ferramenta de bate-papo ao vivo

A ascensão do bate-papo ao vivo e do marketing de conversação tem sido uma tendência fascinante a ser observada. Os usuários querem respostas, e querem-nas rapidamente. À medida que essa ideia de adotar conversas em tempo real com clientes em potencial (ou usar bots) continua a ganhar força, está claramente se tornando popular entre as empresas B2B SaaS.

Nossa pesquisa descobriu que pouco mais de 5% dos sites SaaS têm uma caixa de bate-papo no canto pronta para ser engajada. Na maioria desses sites, os serviços usados ​​eram Intercom ou Drift.

Então, você deve seguir os padrões?

Depende.

Experimentar com design é uma ótima maneira de descobrir algo antes do resto da indústria. Dito isso, o risco da experimentação de design é que os usuários podem encontrar toda a experiência quebrada e mal criada. Por outro lado, se você aderir aos padrões que já estão em uso em sites SaaS em todo o mundo, poderá se misturar facilmente.

Aqui está uma lista de dicas de design de sites se você quiser um site que não seja como todos os outros:

• Não use a ilustração plana como uma representação abstrata da sua marca
• Não use botões laranja escuro ou amarelo em sua página inicial
• Não deixe sua proposta de valor alinhada à esquerda no site
• Coloque seu logotipo no meio ou à direita
• Use um fundo escuro para o seu site

Seu site atualmente atende a esses padrões? Alguma coisa aqui te surpreendeu?