Site bonito ou funcional: o que é mais importante?

O que dá mais retorno: um site bonito ou um que funciona bem? Não pode ser os dois? Saiba mais sobre UX, design centrado no usuário e técnicas de conversão no Web Design!

Por Fabio Lobo, atualizado em 30/07/2020. 4 pessoas falando sobre isso!

Então você quer um site bonito. Mas é só isso mesmo? Só a estética do site é relevante? Não há outros pontos a serem levados em consideração também, ou até com maior ênfase?

Infelizmente essa linha de pensamento – deixar a estética em primeiro lugar, ou até mesmo só valorizar a estética em si – normalmente resulta em um site pesado e ruim de navegar.

A criação de um site, assim como o design per se, vai muito além da estética. É preciso pensar em tantos fatores que esse post poderia ser um livro. Ou “o” livro: Não Me Faça Pensar, de Steve Krug. Vou falar sobre ele mais abaixo.

Nesse texto você vai descobrir:

  • Que design não tem que ser bonito, e sim funcional;
  • O que é usabilidade e conceitos como UX e UCD;
  • Que sites feios vendem mais (mas não por serem feios);
  • Como, então, ter um site bonito que seja funcional;
  • E respostas à dúvidas comuns sobre o tema.

Prepare-se para quebrar alguns paradigmas!

recorte da capa do livro Não Me Faça Pensar
“Não me faça pensar” – livro de Steve Krug

Design não tem que ser bonito. Tem que funcionar.

É isso mesmo, você não leu errado: Design não tem que ser bonito.

Para entender esse raciocínio meio absurdo, siga-me:

O que é design?

Design não é estética, mas utilidade, propósito etc.

Segundo o New Oxford American Dictionary, design é:

Um plano ou desenho produzido para mostrar a aparência e função ou funcionamento de um edifício, vestuário, ou outro objeto antes de ele ser construído ou feito: “ele acabe de lançar seu design (projeto) para o novo museu”

A arte ou ação de conceber e produzir um plano ou desenho: “um bom design (forma) pode ajudar o leitor a compreender informações complicadas”

New Oxford American Dictionary

Segundo Jony Ive, ex-Apple:

Design é uma palavra que veio a significar tanto que também é uma palavra veio a significar nada.

Jony Ive

Hein?! Ok, vamos ficar com o significado do dicionário, a princípio.

Design significa um desenho, um projeto, uma forma com um propósito e/ou função em específico. Do contrário, é arte.

Por exemplo, uma maçaneta: feia ou bonita, o design (formato) dela nos permite abrir uma porta.

Se você criar uma maçaneta linda, com o formato de uma rosa (com espinhos e tudo), sua utilização será horrível. Ou seja, deixará de ser uma maçaneta e se transformará em um enfeite.

E você não vai conseguir abrir a porta, a não ser que utilize uma luva de segurança.

Esse exemplo pode ser aplicado no web design, no design gráfico, na publicidade etc. Em tudo! Imagine uma escada em formato de ondas, com todos os degraus arredondados. Bem bonita, mas você arriscaria quebrar alguns ossos pra subir?

Quando você vê o design como função – design funcionalista – percebe que isso faz toda a diferença. E como defendido no princípio “forma segue a função” (form follows function) no século XX, o design tem que atender a necessidades.

Então, a partir do momento que questões estéticas são o foco do design de um produto, passando a atrapalhar sua função, esse produto não vai funcionar como deveria. Assim como a maçaneta com espinhos.

Mas não para por aí!

O que é bonito?

Brasão de Bonito (MS)
Uma cidade no Mato Grosso do Sul?

Bonito é algo relativo, é uma opinião de cada um. Isso vale pra qualquer coisa – pessoas, casas, cachorros, embalagens, sites… tudo!

Quando você quer um site bonito, você está correndo o risco de ter algo que só você vai achar bonito.

Quando você pede um site com boa navegação, acessibilidade e usabilidade, é unânime que seu público irá gostar. Isso porque o design funciona, não tem nada a ver com gosto.

Quer um exemplo meio besta?

O que você acha mais bonito: um garfo ou uma colher? Se você quiser minha opinião, eu acho que o garfo é mais bonito que uma colher. Porém, não é por isso que vou usar um garfo pra tomar uma sopa.

A partir do momento que você percebe isso – a diferença do que você prefere em relação ao que funciona –, você entende o que é design.

Design não tem que ser bonito…

O que quero dizer com isso? Simples: há coisas mais importantes para se priorizar.

Você já ouviu falar em UX e UI? UX significa User eXperience (ou experiência do usuário), e UI significa User Interface (ou interface do usuário). Isso são dois – dos mais importantes – conceitos de design.

A experiência do usuário depende da interface (e de vários outros conceitos, mas a interface é uma das principais).

Se para acessar um formulário de contato no seu site o usuário precisar…

  1. Esperar uma animação em uma página de introdução;
  2. Clicar em “entrar no site”;
  3. Encontrar um link de contato em algum lugar no site;
  4. Clicar pra abrir essa página e se deparar com apenas um endereço de email (e não um formulário);
  5. Abrir o outlook (por exemplo) para, enfim, entrar em contato…

Acredite, a experiência dele foi péssima.

E se chegou a esse ponto, aposto que você, designer ou cliente, não pensou nisso – não pensou no usuário.

Por que eu usei esse exemplo? Bom, em 2017 uma cliente me pediu exatamente isso porque ela não gostava de formulários de contato. Segundo ela, a página de contato ficaria feia.

Não entenda mal: isso não é vergonhoso. Não era a obrigação dela saber sobre conceitos de usabilidade – ela me contratou, um Web Designer, exatamente pra não se preocupar com isso. É meu papel orientar, e foi o que fiz.

Felizmente ela entendeu, topou e achou que o formulário que criei “não ficou tão feio assim”. Os clientes e visitantes do site agradecem!

…mas nem por isso deve ser “feio”

printscreen do site bonito da Berkshire Hathaway
Sim, esse é o site oficial da Berkshire Hathaway.

Existe uma coisa chamada “bom senso” que, ao contrário de “bonito/feio”, é algo palpável: todo mundo vai concordar.

Trabalhar bem as cores, imagens, tipografia, efeitos no geral e fazer um bom acabamento é imprescindível, sim.

Quando digo que “design não tem que ser bonito”, não estou dizendo que se ele for feio e funcionar bem é o que importa.

Só quero dizer que a estética não pode ser pensada em primeiro lugar, porque muitas vezes isso contribui para um projeto com usabilidade ruim.

Resumindo: Criar um site bonito é, sim, importante. É um dos meus deveres. Mas não é – nem de longe – o ponto mais importante de um projeto.

E sim, eu tenho um Crocs. É realmente tão confortável o quanto dizem!

A importância da facilidade de uso no design de site

O que define um bom design?

A diferença está entre um usuário resolver gastar um tempo olhando as seções do seu site e eventualmente adquirir um serviço ou dar apenas uma olhada, tentar encontrar alguma informação, ficar confuso e nunca mais voltar.

Dentre todos as inúmeras variáveis de um design de alto nível, as principais definitivamente são a simplicidade e a facilidade de uso no design.

O que é simplicidade no design?

Existem diversos tipos de problemas de usabilidade. A imensa maioria deles pode ser facilmente resolvida com um design claro e simples.

A simplicidade consiste basicamente em remover todos os elementos desnecessários de um design e deixá-lo apenas com aqueles que sejam indispensáveis para o funcionamento limpo e intuitivo de um site como um todo ou um processo.

É possível alcançar um bom nível de design com facilidade: poucas cores e um layout simples que seja fácil e intuitivo de navegar e realizar qualquer ação que o usuário queira.

A utilização correta do espaço branco, também conhecido como espaço negativo, é essencial.

Bons sites utilizam este espaço para guiar os olhos dos visitantes e mantê-los atentos apenas nas partes que interessam, ao mesmo tempo em que diminuem a fadiga ocular e a possibilidade de perda de foco.

Veja meu site, por exemplo. Olhe ao redor: o que você vê agora além do conteúdo? Espaço em branco, certo? Não é muito mais agradável e livre de distrações do que se tivesse uma barra lateral e banners seguindo a tela?

Hoje os princípios do design estão completamente ligados aos do Design Centrado no Usuário (User Centered Design, sigla UCD). Inclusive, tudo o que estou escrevendo por aqui tem a ver exatamente com essa ideia.

Todos os visitantes que entrarem em um site, não importa quão familiarizados com a internet eles estejam, têm que saber exatamente o que está acontecendo, onde e quais os caminhos para que eles consigam a informação desejada.

Isso nos leva a outro conceito que comentei mais acima: Experiência do Usuário, ou UX.

O que é UX?

“Se você perguntar para 5 pessoas diferentes, você vai receber 5 respostas diferentes” – é assim que começa o vídeo abaixo (em inglês), que resume bem o que é UX (sigla para User eXperience):

A experiência de um usuário em qualquer tipo de design – seja um site ou uma cola em bastão – é, de forma simplificada, o que o usuário “sente” quando utiliza o design.

Vamos aos exemplos:

UX em um site

No caso de um site, se o usuário precisar realmente se esforçar pra encontrar o que ele quer, isso já é um ponto negativo e poderá fazer com que ele não retorne mais no site.

Ou ainda pior: fechar a janela sem antes nem tentar.

Steve Krug fez um livro inteiro ensinando como tratar bem o visitante/usuário do seu site: o livro “Não Me Faça Pensar” foca justamente em facilitar ao máximo a navegação em um site.

Em resumo: seu site pode ter fundo branco, fonte Times New Roman e visual mais básico o possível. Se for fácil de ser utilizado, será o suficiente para o visitante.

Agora, seu site pode ter vários efeitos, um topo com uma ilustração show de bola e várias informações… mas vai demorar pra carregar e vai ser difícil de navegar. Nesse caso, a experiência do usuário será péssima.

UX em um “produto físico”

No caso da cola em bastão, imagine como seria se, ao invés de você apenas girar a parte de baixo do frasco pra cola “subir”, você tivesse que puxá-la com a mão ou, sei lá, com uma colher?

foto de colas em bastão da marca Pritt

O design do frasco da cola em bastão é perfeito para o uso, pois é simples, intuitivo e higiênico.

Mais simples que girar a parte de baixo seria empurrá-la pra cima, certo? Mas e pra guardar a cola novamente? Você sujaria as mãos ou faria um estrago tentando empurrá-la com a tampa.

Esse é um exemplo de design bem pensado, e o próprio formato da cola em si é genial: é muito mais prático que a cola líquida, que até tem um desempenho melhor, mas costuma prejudicar o material e fazer sujeira.

Como implementar a facilidade de uso no design do seu site?

É essencial entender bem todos os princípios da arquitetura da escolha (nudge, ou nudging) para que seja possível montá-la de acordo com as necessidade reais dos usuários e visitantes.

Um bom planejamento antes de montar o site e todos seus processos é imprescindível.

Sempre que inicio um projeto de web design, passo horas pensando em tudo que os usuários vão fazer com o site e quais as melhores maneiras de possibilitar isso.

Uma ótima dica é se imaginar no papel de um usuário que está visitando o site ou adquirindo o serviço pela primeira vez e ver quais as principais dificuldades e gargalos nas ações que ele tentará executar.

Um dos melhores exemplos práticos em relação a implementação de um design simples e intuitivo é quando há formulários para serem preenchidos.

Posso citar uma experiência com meu próprio site: recentemente alterei minha página de contato, deixando-a absurdamente mais simples.

printscreen da minha página de contato

Antigamente havia quatro opções de contato: uma para pedidos de orçamento, outra para suporte, outra para instalação de temas prontos para WordPress e, por fim, uma simples para dúvidas e coisas do tipo.

Ao clicar em uma das opções, um formulário aparecia para que o cliente ou interessado preenchesse as informações necessárias para que eu fizesse um orçamento.

Só que muita gente acabava desistindo ao ver que o formulário era meio grandinho. E olha que eu já havia feito uma redução drástica, porque meus formulários antigos eram bem maiores.

Isso porque eu preciso reunir muitas informações para orçar um projeto, então não posso deixar nenhum detalhe passar batido.

Qual foi a solução? Removi todos os formulários e mantive apenas um, com quatro campos (Nome, E-mail, Link do site e Pedido) e duas opções clicáveis.

Assim, se o usuário quiser, ele já passa todos os detalhes no campo Pedido. Se faltar alguma coisa, envio minhas dúvidas quando for responder a mensagem.

No final das contas, o cliente vai me passar exatamente as mesmas informações que constavam em um formulário maior. A diferença é que isso agora é, digamos, parcelado.

Esta simples mudança na já mencionada arquitetura de escolha aumentou o número de contatos em cerca de 30%.

É isso, não tem segredo e está nos números: facilitar para o usuário sempre dá mais retorno.

Como medir a facilidade de navegação de um site?

printscreen de tela de facilidade de uso em dispositivos móveis do search console

A principal forma, informal e surpreendentemente uma das mais eficazes, é pedir a amigos e colegas, especialmente de outras profissões que não sejam voltadas ao design ou com pouco conhecimento relacionado a internet, que testem a sua criação.

Eu mesmo tenho um grupo seleto de pessoas que testam meus projetos. Nenhuma delas trabalha com design, e cada uma tem uma função específica nos testes – mas não sabem disso, porque a ideia é que naveguem pelo site com naturalidade.

A dificuldade ou facilidade de uso que eles experimentarem durante a navegação do site ou do processo que está sendo implementado servem como um excelente termômetro para como as coisas realmente estão para quem não está diretamente envolvido.

Outras duas das melhores formas de medir a facilidade de navegar por um site e até mesmo a qualidade do conteúdo publicado nele é:

  1. a realização de testes A/B; e
  2. a medição da conhecida taxa de rejeição.

A taxa de rejeição (bounce rate) indica quantos visitantes entraram no site e foram embora sem realizar alguma ação que você pré-definir, como visitar outra seção, clicar em um botão ou ficar determinado tempo na página.

Isto serve como um excelente indicativo tanto a dificuldade de acesso e navegação para aqueles que apareceram quanto para a retenção de possíveis novos visitantes regulares.

Finalmente, neste mundo digital cada vez mais voltado para o mercado portátil de celulares e tablets, também é necessário certificar de que o site tenha as mesmas características positivas e facilidade de uso em diversos formatos de telas com o uso do mobile first.

Para tanto, utilizar o Google Search Console é a melhor escolha que você pode fazer. Através do relatório de Facilidade de uso em dispositivos móveis, é possível checar se seu site é mobile friendly – ou seja, amigável para dispositivos móveis.

Sites feios vendem mais?

Esse é um assunto antigo que sempre é revivido por algum motivo. Principalmente quando o assunto é Google Adsense.

Diversos testes (1, 2, 3, 4, por exemplo) comprovam que, sim, até que sites feios vendem mais. Mas não é tão simples quanto parece.

Sites feios dão mais retorno, mas não é porque são feios. É porque utilizam técnicas de maior conversão. Ou seja, é possível um site ser feio e não vender nada.

Mas afinal, o que é um site feio? Simples demais? Mal-acabado? Com cores que não combinam? Com informações repetidas? E o que é um site bonito? O contrário disso tudo?

Bom, como feio é um conceito subjetivo, uma opinião pessoal, vamos tentar entender então quais são essas técnicas.

Técnicas de maior conversão

Analisando sites feios e utilizando como referência os testes que citei acima, podemos ver que as técnicas abaixo são o segredo de maior conversão de um “site feio”:

1. Layout básico ou minimalista

printscreen do site da Adobe

O que vemos na página de compra da Adobe? Fundo branco com detalhes em cinza, um menu com poucas opções, uma única fonte e uma lista extremamente simples com os produtos.

Veja bem, estamos falando de uma empresa de softwares de design. Essa página poderia ser cheia de efeitos, ou ao menos ter um acabamento melhor pra impressionar. “Olha o que você pode fazer com nossos programas!”

Em vez disso, a página é simples de doer. E isso faz com que o usuário encontre rapidamente o que procura.

2. Páginas livres de distrações

printscreen do site do Google

Clássico dos clássicos, a home do Google sempre foi um abuso de simplicidade. Fundo branco, um menu pequeno e um formulário com dois botões.

Você acessa o Google pra fazer uma pesquisa. E é praticamente só isso que você consegue fazer ao acessar o Google.

Ou seja, pra que distrações? A página vai direto ao assunto.

3. Clareza ou obviedade

printscreen do site do Dropbox

O novo design do Dropbox deu o que falar. Muita gente achou que foi de extremo mal gosto. Mas não é meu foco aqui.

Quando você acessa a home do Dropbox, já vê logo de cara um formulário grande para criar uma conta ou fazer login em uma conta existente. Mais fácil que isso, impossível.

Essa técnica é utilizada por muitos sites que precisam (ou apenas querem) seus dados. Além de facilitar a conversão, impede que você tenha tempo de ler mais sobre o serviço e pensar em pesquisar outros semelhantes.

Maldoso? Bom, é uma técnica de venda.

4. Call to action chamativo

printscreen do site do Mercado Livre

Seu botão de compra, cadastro ou coisa do tipo deve ser grande e chamativo.

Repare que um botão não precisa ser grande em tamanho. Por isso utilizei esse exemplo do MercadoLivre: o que faz o botão chamar a atenção aqui é o contraste.

A página tem fundo branco e cinza-claro, e a cor predominante da empresa é o amarelo. O azul é a única cor clicável, então faz com que o botão “salte” na página.

“Ah, mas as cores não combinam!” – mas não precisam combinar. Isso é um contraste, e ajuda a converter mais.

5. Repetição

printscreen de recortes de landing page da SEMrush

Por fim, comum em landing pages, o uso da repetição também é uma estratégia de venda.

Nessa minha landing page do SEMrush, o botão de cadastro aparece três vezes. Praticamente a cada vez que você rola a tela, verá um botão para fazer a assinatura.

O que pode parecer uma coisa estranha, na verdade ajuda o usuário a tomar uma decisão mais rápida, sem precisar correr atrás de um botão de novo. Então, se ele rola a página para ler mais informações, terá um botão por perto quando encontrar o que precisa.

Como ter um site bonito e funcional?

Como você pode perceber, tem muita coisa que deve ser pensada em um site antes de sua estética. E como deixei bem claro, um site não tem ser feio pra vender mais.

Você pode pensar na estética do seu projeto, mas não em primeiro lugar. Antes, pense no seu usuário, em facilidade, em desempenho e jamais ignore números e padrões do mercado.

A verdade é que a gente tem muito a aprender com sites feios na hora de criar um site bonito e funcional.

Vai acabar tendo alguma coisa que você não vai gostar? Talvez. Mas lembre-se: Seu site não é pra você gostar. É para seus clientes usarem.

Então, siga as dicas abaixo:

  1. Faça bom uso do espaço em branco (ou espaço negativo) para deixar o visual menos carregado e a leitura mais agradável;
  2. Reduza o número de cliques para chegar até as páginas mais importantes;
  3. Lembre-se: só o necessário já é o bastante – menos é mais;
  4. Siga as técnicas e conceitos do mobile first;
  5. Utilize tamanhos de fontes legíveis, sem se esquecer do contraste para facilitar a legibilidade;
  6. Pense em acessibilidade, como poder navegar no site utilizando apenas o teclado;
  7. Reduza formulários e processos em geral para a utilização do site;
  8. Utilize o contraste a seu favor, destacando pontos importantes como links e botões call to action;
  9. Não se preocupe em ser óbvio ou repetitivo, desde que isso facilite o uso do seu site;
  10. Planeje o possível para ter um site leve e rápido, o que favorecerá seus usuários e melhorará seu desempenho no Google.

Se você conseguir seguir essas dicas vai poder ter o site mais bonito da internet (nem que seja só pra você) sem prejudicar sua usabilidade.

Créditos das imagens: Freepik e sites citados.

Revisão

Entendeu tudo sobre web design e experiência do usuário? Vamos ver:

O que é UX?

UX é a sigla de User eXperience, que quer dizer Experiência do Usuário. São boas práticas e conceitos que, quando aplicados no Web Design, ajudam a melhorar a usabilidade e navegabilidade de um site.

O que é UCD?

UCD é a sigla de User Centered Design, ou Design Centrado no Usuário (ou até mesmo Desenvolvimento Centrado no Usuário). É um processo de criação que se concentra nas necessidades e requisitos dos usuários que irão utilizar o site.

O que é nudge no design?

Em português, nudge (ou nudging) é conhecido como Arquitetura da Escolha. A tradução literal de nudge é “cutucão”, e o objetivo da Arquitetura da Escolha é, basicamente, dar um “empurrãozinho” no usuário para que ele tome uma determinada decisão.

Não é permitida a reprodução integral desse conteúdo. A cópia pode ser ruim para você!

Quem é Fabio Lobo?

Web designer, desenvolvedor front-end e programador WordPress.

Quem é Fabio Lobo?

Estou há mais de uma década na área. O foco do meu trabalho é em usabilidade, facilidade pro usuário, acessibilidade, SEO e performance.

Também tenho alguns projetos open source, além de prestar consultoria em hospedagem WordPress e criação de conteúdo.

Como posso te ajudar hoje?

Trabalho com consultoria, suporte, manutenção, criação e desenvolvimento.

Fale comigo

Leia também...

...alguns textos que têm a ver com o assunto:

Como desenvolvo temas para WordPress

Há diversas formas de se trabalhar com WordPress. Conheça minha metodologia de trabalho de criação e desenvolvimento com essa plataforma.

Fontes para sites: tudo sobre letras e tipografia online

Pesquisando fontes para sites? Saiba mais sobre tipografia para a internet: web e system fonts, legibilidade, leiturabilidade, ferramentas para testar fontes e muito mais.

Psicologia das cores para design e marketing na internet

Você sabia que as cores podem te ajudar a vender mais – ou menos, se utilizadas da maneira errada? Saiba mais sobre psicologia das cores, teoria, acorde cromático e mais!

Comentários

4 comentários até o momento

  • Olá Fábio. Gostei muito do artigo e do seu Website — bonito e extremamente intuitivo e funcional. Parabéns!

    Ao planejar um projeto, consideraria a sequência de ‘design -> performance -> estética’ a ideal?

    Responder
    • Obrigado, Emerson!

      A meu ver a sequência ideal, de maneira resumida, é usabilidade > performance > estética (o que é quase o que você disse, mesmo).

      Responder
  • Fábio, bom dia. Existe ferramentas pra testar a usabilidade de um site?

    Responder
    • Sim, Enrico! Mas não usei o suficiente pra ter alguma completa pra te recomendar.

      A Hotjar é uma boa pra heatmap (mapas de calor).

      Responder

Deixe seu comentário

Se você deseja um orçamento, entre em contato clicando aqui.

Quero um orçamento