Existem vários fatores que podem influenciar no sucesso ou fracasso de um site. E, com certeza, um dos mais importantes, que tem ganhado cada vez mais visibilidade é o Design. Por isso o Web Design acabando fazendo parte da estratégia no projeto de qualquer website, possuindo uma fundamental importância para o sucesso do mesmo.

E se você está pensando em lançar um website ou até mesmo melhorar a experiência proporcionada aos visitante, saiba que existem certas ações, algumas relativamente simples, que você pode tomar para tornar o seu site mais atraente e fácil de usar.

Geralmente esses erros são cometidos por pessoas que estão começando seus primeiros projetos ou, em alguns casos, têm que trabalhar em projetos antigos de profissionais que, por um motivo ou outro, não tiveram tempo ou contato com o site para atualizá-lo, deixando transparecer algumas coisas que ficaram obsoletas.

Vamos lá:

1. Ausência de design responsivo

Hoje em dia a grande parte dos acessos de um site vem através de smartphones. Segundos dados Pesquisa Nacional por Amostra de Domicílios (Pnad) 2015, divulgado em dezembro de 2016 pelo IBGE, 92,1% dos domicílios brasileiros acessaram a internet por meio do telefone celular, enquanto 70,1% dos domicílios o fizeram por meio do microcomputador.

E se somarmos os acesso via internet móvel realizadas em outros ambientes (no metrô, voltando para casa após o trabalho, por exemplo) com certeza chegaremos a um número absurdo de acessos por dispositivos mobile.

Tudo isso torna evidente que é essencial que o seu site seja responsivo, ou seja, que o conteúdo se adapte a resolução do dispositivo do usuário, seja ele qual for.

O design responsivo faz com que as páginas de seu site fiquem bem em diferentes dispositivos, como desktop, tablets e celulares. Isso já não é nenhuma novidade, mas podemos encontrar sites ainda hoje que atendem somente a computadores.

O fato de um site não ser responsivo hoje em dia é um equívoco, pois não atender as outras fontes de acesso corresponde a perda de dinheiro e oportunidade. Isso sem considerar a desvalorização da marca, por frustrar o usuário que não consegue ter uma boa experiência com um site não adaptado ao seu dispositivo.

Os motivos de um site não ser responsivo podem variar desde falta de atualização, baixo orçamento, ou inabilidade do desenvolvedor para aplicar responsividade em seus projetos. Mas não há outra solução para conter esse erro, se não projetar e executar layouts pensando em responsividade.

Portanto é preciso pensar não somente na adaptação do layout a tela, mas também no uso do mesmo em outros dispositivo, levando-se em conta desde a parte estética até a experiência e usabilidade do usuário.

2.Layout não atraente

Função e harmonia estética devem andar lado a lado. O seu site precisa sim funcionar corretamente e proporcionar uma experiência agradável ao seu visitante. Porém, tudo isso deve estar alinhado também com a parte visual/estética do projeto.

Não é preciso ser nenhum especialista em arte ou design para perceber quando algo não é esteticamente agradável (o famoso “feio”, hehe), grotescamente desalinhado e com elementos desproporcionais. Basta se colocar no lugar do usuário e pensar que tipo de características você gosta em um website.

Por isso, tenha cuidado com desalinhamentos, o exagero no uso das cores e fontes. Também procure sempre utilizar imagens de boa qualidade, equilibrando o peso da imagem (o tamanho do arquivo) com qualidade visual dela.

3. Mal uso das cores

Imagina se em todo projeto a gente achar que deve usar uma cor porque “imagina” que tal cor vai ficar legal apenas por gosto pessoal.

Saiba que as cores, quando bem utilizadas, podem possuir funções quanto a sintaxe, quanto a semântica e as duas coisas ao mesmo tempo.

Sintaxe:

A sintaxe é quando utilizamos as cores para hierarquizar, destacar e classificar as cores. Um bom exemplo são os portais de notícias que mantém a mesma estrutura em seus layouts, mas classificam as categorias de seus sites por diferentes cores.

Semântica:

Na semântica, utilizamos as cores para simbolizar, conotar, detonar e dar significados. Utilizando as cores de forma aleatória, você desperdiça o real poder de comunicação e função que as cores possuem.

Outro fato que também pode prejudicar são cores com baixo contraste. Tal utilização pode prejudicar o entendimento, principalmente para pessoas com limitações visuais. Tome cuidado ao utilizar contraste baixo como cinza claro com branco , amarelo com branco, entre outros.

E, por fim, evite utilizar cores que não combinam com a mensagem do site e/ou com identidade da marca. Como já disse acima, as cores podem denotar significados e é preciso escolher uma paleta que interaja com o objetivo do site, por exemplo:

Imagine um site de uma funerária todo em cores quentes e vivas como amarelo, laranja e verde. Seria estranho não?
Do mesmo modo seria incompatível um site para crianças com cores mais sóbrias e frias com azul escuro, cinza, preto, etc.

Utilize as cores com parcimônia e inteligência, pois elas podem transmitir sensações e mensagens para o visitante da página.

4. Utilização de muitas famílias tipográficas em uma mesma página

Esse é um erro muito comum para iniciantes.

Quando somos novos e conhecemos sites que fornecem fontes, principalmente gratuitas, nos empolgamos e nos preparamos para uma verdadeira salada de frutas.

Usamos diversos tipos de fontes que formatam de forma inconsistente os conteúdos das páginas web.

Isso acaba gerando como resultado títulos com uma fonte X, subtítulos com a fonte W, corpo do texto com a fonte Y, negrito com a fonte Z e assim por diante. Isso sem contar as infindáveis variações de estilos e peso das fontes para enfeitar ainda mais a salada.

Portanto quando for pensar na tipografia de seu site, lembre-se da frase:

Menos é mais

Procure utilizar uma quantidade pequena de fontes para o site que você está projetando. Uma ou duas já é um bom número. Se precisar variar alguma coisa que mereça destaque, brinque com estilos e pesos das mesmas.

5. Linhas de textos muito grandes

Uma das premissas de um bom projeto é que o conteúdo textual seja fácil de ler.

Leiturabilidade diz respeito ao reconhecimento e a fluência dos tipos em sentenças, como frases e parágrafos. Mas existem alguns casos que podem prejudicar a leiturabilidade de seu site colocando tudo a perder.

Os erros mais comuns são:

Escolher fontes baseando-se apenas no quesito visual, como por exemplo fontes cursivas (aquelas que tem o estilo feito a mão), que comumente ficam legais em títulos e em sentenças curtas, porém que exigem um alto grau de esforço na leitura quando aplicado no corpo do texto.
Tenha bom senso e avalie a fonte em grandes corpos de textos. Caso queira fazer uma escolha praticamente sem erro e mais conservadora, utilize fonte sem serifa para web.
A utilização de baixo contraste, seja de tom ou de luminosidade, da cor do tipo em relação ao fundo. Essa má aplicação dificulta a leitura principalmente para pessoas com certas limitações visuais.Facilite a vida do seu usuário oferecendo um bom contraste entre a cor de fundo do site e a cor da fonte. O exemplo mais seguro possível é um fundo branco com um texto escuro.
Linhas de texto muito longas ou muito curtas podem prejudicar a leitura, tornando a cansativa e/ou gerando desconfortos.

Tenha bom senso e tenha cuidado com esse quesito. Na média uma linha de 7 a 14 palavras consegue manter a harmonia. Você pode saber mais sobre tipografia acessando este outro artigo.

6. Confusa navegabilidade e usabilidade

Quando falamos de design de sites (Design Web) devemos pensar além da parte estética e visual, levando em conta também como o visitante se sentirá ao utilizar o seu site e como você pode projetá-lo para que essa experiência seja a melhor possível.

Design não é apenas o que parece e o que se sente.
Design é como funciona.
– Steve Jobs

Por isso é importante a navegabilidade e usabilidade do site.

Uma navegação complexa pode ser um convite para o seu visitante abandonar o seu site (coisa que você não quer, não é mesmo?). Uma das características de uma navegação confusa é manter o usuário em uma posição que ele não tem certeza de onde está.

É preciso que tudo esteja o mais simples, identificável e direto possível. Afinal, tudo que envolve a navegação serve de mapa para que o usuário consiga navegar pelas páginas do seu site.

Coisas que você deve considerar na hora de trabalhar com navegação:

Quando for construir menus, sempre que possível replique o padrão, fazendo que os menus se repitam entre as páginas do seu site. Isso evita, por exemplo, que ele tenha que clicar várias vezes em “voltar” para homepage.
Organize a navegação de grandes sites. Muitos sites possuem muitas páginas e níveis hierárquicos como acontecem no comércio eletrônico. Então procure organizar o conteúdo do site agrupando em categorias lógicas fazendo com que a resposta por uma procura seja a mais direta possível.
Siga um padrão (sempre que possível) em suas páginas, para que o usuário não se sinta perdido.
Deixe a navegação atraente, agradável e simples de entender. Utilize itens de menus e elementos que facilitem o entendimento, como por exemplo: ícones, hierarquização via cores, agrupamentos,separações, entre outros.

7. Site com campo de pesquisa de difícil acesso ou ausente

Existem pessoas que querem, ou precisam, consumir o conteúdo o mais rápido possível e por isso vão direto para o campo de pesquisa. Mas o que acontece quando não o encontram?

Grande parte desses “apressadinhos” ou ficam extremamente irritados ou frustrados com essaa experiência, mas continuam no site procurando o que desejam, ou saem do site sem pensar duas vezes.

Campos de busca são áreas intuitivamente bastante utilizadas. Afinal um dos maiores sites do mundo, o Google, se baseia em um campo de busca no centro de uma página.

E de certa forma já estamos condicionados a utilizar este campo, principalmente quando não estamos com paciência para navegar pela interface.

O grande insight aqui é manter seus projetos com um campo de busca funcional e, de preferência, de fácil acesso, normalmente no topo, para que o usuário não desista de seu site nos primeiros segundos.

8. Seu site é lento

O seu site está hospedado em um servidor que nada mais é que um computador com as limitações de recursos que todo computador possui.

Toda vez que um site é carregado ele precisa usar esses recursos para montar a página para o visitante. Quanto mais seu site for pesado para o servidor, mais lento será o carregamento das suas páginas, e mais banda de internet o navegador do visitante requisitará para abrir o seu site.

Existem algumas ações podem melhorar sensivelmente a performance de um site.

Compressão de imagens para web sem perda de dados
Diminuição de requisições ao servidor – Cada arquivo que monta um site (imagem, Javascript, CSS, etc) gera uma requisição. Quanto maiores em tamanho e quantidade mais recursos do servidor é necessário. Juntar arquivos (CSS, Javascript) menores em um arquivo maior contribuem para diminuir requisições.
Minificação de arquivos javascript – Minificação é um processo de remoção de caracteres desnecessários sem mudar sua funcionalidade. Contribui para diminuir o peso dos arquivos.
Se seu site é construído com WordPress ou algum outro CMS uma boa opção é instalar um plugin, ou módulo com sistema de cachê. Este sistema faz que arquivos que já foram carregados e vistos uma vez não sejam requisitados novamente no servidor. Isso economiza muito processamento.

9. Não utilizar o atributo “alt” nas imagens

“Alt” é um atributo usado em imagens para dispor um conteúdo alternativo textual quando a imagem, por algum motivo, não renderiza no navegador. Ela é importante também para acessibilidade pois contribui para que leitores de tela descrevam para deficientes visuais o que representa a imagem.

Também é importante em questões de SEO (otimização para buscadores) porque indica aos robôs de busca do Google, Bing, entre outros do que se trata o conteúdo.

O grande erro que é muitas vezes é praticada a inserção desta imagem sem o atributo ou sem o preenchimento correto deste o que faz que questões de acessibilidade sejam prejudicadas por esta omissão.

10. Muita coisa na página

Lembra daqueles sites famosos da década de 90 que se destacavam por se utilizar de todo o espaço possível?

Pois bem, eles costumam aparecer de tempos em tempos na lista de piores sites do mundo, e tudo que a gente quer é que você não construa um desses por aí.

A área de respiro é um espaço vazio entre blocos de conteúdos que delimitam e proporcionam harmonia e equilíbrio ao conjunto.

Não sou leviano para dizer que a todo momento encontramos sites ruins com as características dos piores sites do mundo. Mas vira e mexe encontramos sites com problemas com área de respiro. Talvez por falta de habilidade do Designer em trabalhar com Grids ou até mesmo com CSS (folhas de estilo em cascata).

Não são erros grosseiros, mas blocos muito próximos ou sem um divisor para diferenciar os blocos, má aplicação de padding (espaçamentos), entre outros problemas, são comuns em quem não utiliza um grid para orientar a disposição dos elementos. Não que seguir um grid seja uma regra. Mas é uma mão na roda para quem tem dificuldade de construir um layout consistente.

Tem dificuldade de elaborar uma interface consistente? Sugiro a leitura deste artigo.

Outro ponto importante a se lembrar é que o conteúdo deve ser somente o necessário. Evite encher de conteúdos que não acrescentam nada de efeito ao visitante além de ocupar espaço (o famoso encher linguiça). Respeite o usuário do seu site e não pense que quanto mais conteúdo aleatório tiver, melhor será o seu site.

11. Construir um site sem analisar detalhadamente o problema do cliente

Na verdade, não é exatamente um erro no site, e sim um erro de procedimento que resultará em diversos erros que serão percebidos assim que o Designer apresentar o projeto ao cliente.

Esse é um erro comum em iniciantes que, com toda boa intenção e força de vontade, anseia por um projeto pronto. É daquele tipo que tem já uma opinião pré-concebida sobre determinada ideia, e sem mesmo aprofundar-se sobre a necessidade do projeto, corre, liga o computador e já sai produzindo no Photoshop.

Considero importante que este erro seja citado, pois muitos dos problemas listados neste artigo poderiam ser evitados, caso essa questão fosse levada a sério pelo designer responsável pelo site.

Existe uma ação que o Designer pode realizar para sanar essa questão e consequentemente grande parte dos erros aqui listados que é a construção de um briefing. E o que seria um briefing?

É uma coleta de dados realizada com o cliente que resulta em um documento que apresenta as características que uma peça, no nosso caso um website, deverá possuir.
Neste documento é possível obter informações relevantes à construção do projeto, como:

público alvo
identidade visual
objetivo do site (vender, divulgar produto, apresentar a empresa)
quais informações devem ser utilizadas e também quais não devem existir
concorrentes
panorama do mercado
sites de referências, etc.

Portanto o grande erro é começar o site sem um briefing detalhado. Não renuncie a isso em seus projetos. Com certeza tal ação ajudará o desenvolvimento do seu site.

Para finalizar…

Como vimos neste artigo, existem erros que podem surgir em diferentes frentes do design de sites e desenvolvimento web, desde questões de usabilidade, passando por design de interface, até Front-end (a parte do código do site).

Claro que nenhum projeto web, por mais bem planejado e executado que seja, está livre de possíveis erros. E não seria possível abordar aqui a infinidade de erros que possam acontecer durante o planejamento e execução de websites.

Mas, podemos realizar certas ações, muitas relativamente simples, para minimizar ao máximo os erros otimizando o site como um todo.

E você conhece mais algum erro? Você pode deixar a sua contribuição na área de comentários (aqui embaixo) com erros que você considera comum em website.

Até a próxima!

Domine as técnicas de UX para criar plataformas digitais eficazes

Com 12 anos no mercado de User Experience, Gilmar Gumier vai ajudar você a conhecer mais sobre hábitos de usuários para construir produtos digitais relevantes e inovadores.