{"id":44557,"date":"2024-06-19T11:19:42","date_gmt":"2024-06-19T14:19:42","guid":{"rendered":"\/tutoriais\/?p=44557"},"modified":"2025-12-18T11:36:28","modified_gmt":"2025-12-18T14:36:28","slug":"exemplos-de-sites-ruins","status":"publish","type":"post","link":"\/br\/tutoriais\/exemplos-de-sites-ruins\/","title":{"rendered":"15 exemplos de sites ruins: dicas para evitar um design ruim"},"content":{"rendered":"
\"Imagem<\/figure>

Criar um site bom é crucial para conquistar sucesso na internet. Por isso é uma boa ideia aprender com os erros dos outros. Entender o que constitui um design ruim para site é o primeiro passo para criar um bom.<\/p>

Para te ajudar a reconhecer o que evitar durante o processo de criação do site<\/strong>, vamos analisar 15 exemplos de sites ruins.  Ao examinar esses exemplos e entender os erros comuns de design de sites, podemos evitar repeti-los e criar uma melhor experiência para o usuário.<\/p>

\n\n\n\n\n\n

\n
\n \n \n <\/svg>\n

\n O que torna um site ruim? <\/p>\n <\/div>\n

Um site ruim é aquele que não atende às expectativas dos usuários, dificulta a navegação ou apresenta uma experiência de usuário desastrosa. Esses sites exibem escolhas de design inadequadas, carregamento lentos e layouts não responsivos, interfaces desordenadas e branding inconsistente.<\/p>\n <\/div>\n \n\n\n\n<\/p>

15 erros de design comuns em sites<\/strong><\/h2>

Neste artigo, vamos listar 15 exemplos de design ruins encontrados em um site fictício chamado The Bad Website<\/strong>. Vamos explicar da exemplo, fornecendo soluções sobre falhas específicas de design e dicas práticas de melhoria para ajudar você a criar um bom site<\/strong><\/a>.<\/p>

Lembre-se de que um site ruim é diferente de um site estranho, pois este último é projetado para desafiar as normas tradicionais de design de sites. <\/p>

1. Navegação Ruim<\/strong><\/h2>

O The Bad Website tem uma navegação ruim, os clientes encontram dificuldades ao procurar produtos e informações nas páginas Sem categorias ou rótulos, os usuários ficam confusos, o que é um erro comum no design de sites.<\/p>

\"Barra<\/figure>

Os usuários que chegam ao site encontram uma estrutura sem sentido, onde os produtos são listados sem uma organização lógica. Por exemplo, não há links ou seções especificamente dedicadas a um tipo de produto, como celulares.<\/p>

Os usuários acabam clicando aleatoriamente em várias páginas sem uma direção objetiva.  Como resultado, a taxa de rejeição será mais alta e o site perderá muitas vendas.<\/p>

Dicas de Melhoria<\/strong>:<\/p>

O The Bad Website melhoraria muito sua navegação se tivesse uma estrutura de menus corrente e intuitiva. No seu site, crie categorias bem organizadas que representem com precisão os tipos diferentes de produtos disponíveis. Garanta que o menu seja facilmente acessível e exibido de forma proeminente em cada página, permitindo que os usuários naveguem pelo site sem dificuldade.<\/p>

Além do menu, incorporar uma navegação estrutural (breadcrumbs) pode ajudar muito os usuários a entenderem sua localização atual dentro da hierarquia do site.<\/p>

Breadcrumbs fornecem um caminho visual do percurso do usuário, facilitando o retorno a páginas visitadas anteriormente. Esse recurso melhora a usabilidade geral e ajuda os usuários a manterem uma sensação de orientação enquanto exploram o site.<\/p>

\"Site<\/figure>

Por fim, considere utilizar ferramentas de análise de mapa de calor, como Hotjar<\/strong><\/a> ou Crazy Egg<\/strong><\/a>. Essas ferramentas representam visualmente as interações dos usuários, mostrando áreas de alta interação e possíveis problemas de usabilidade.<\/p>

Analisar esses dados pode ajudar a identificar desafios específicos de navegação do site e mostrar onde você pode melhorar.<\/p>

2. Carregamento lento<\/strong><\/h2>

Outro problema do The Bad Website é a velocidade de carregamento lenta, outro erro comum em muitos sites. Esse problema é prejudicial ao sucesso do site, pois afeta muitos aspectos importantes.<\/p>

O tempo de carregamento ideal para um bom site é inferior a dois segundos<\/strong><\/a>.  Qualquer coisa além disso aumentará as chances de os usuários saírem o site.<\/p>

No caso do The Bad Website, muitas páginas contêm imagens não otimizadas e pesadas, contribuindo para tempos de carregamento prolongados. Os usuários são constantemente recebidos com esperas e atrasos ao navegar pelo conteúdo do site, levando-os a abandonar o site em busca de alternativas mais rápidas.<\/p>

Dicas de Melhoria<\/strong>:<\/p>

O The Bad Website poderia se beneficiar da otimização do tamanho e formato das imagens. Comprimir imagens é uma ótima maneira de reduzir o tamanho do arquivo sem comprometer a qualidade. O TinyPNG<\/strong><\/a> é um exemplo de uma ferramenta gratuita que pode otimizar imagens para o seu site.<\/p>

\"Site<\/figure>

Você também pode usar os tamanhos de imagem comuns como diretriz. Aqui estão algumas recomendações de tamanho de imagem que devem funcionar bem em um desktop com tamanho de tela de 1080p.<\/p>

Tipo de Imagem<\/strong><\/td>Dimensões da Imagem (L x A)<\/strong><\/td>Proporção<\/strong><\/td><\/tr>
Imagem de Fundo<\/td>1920 x 1080 pixels<\/td>16:9<\/td><\/tr>
Imagem Principal<\/td>1280 x 720 pixels<\/td>16:9<\/td><\/tr>
Imagem de blog<\/td>1200 x 630 pixels<\/td>3:2<\/td><\/tr>
Logotipo (quadrado)<\/td>100 x 100 pixels<\/td>1:1<\/td><\/tr>
Imagem de thumbnail<\/td>150 x 150 pixels<\/td>1:1<\/td><\/tr><\/tbody><\/table><\/figure>

Usar formatos de imagem<\/strong><\/a> eficientes, como JPEG ou WebP, pode diminuir significativamente o tempo de carregamento.  Essa otimização garante uma experiência de navegação mais rápida para os usuários.<\/p>

Além disso, implementar técnicas de cache pode melhorar muito os tempos de carregamento. Utilize o cache do navegador para armazenar elementos estáticos do site, como imagens, arquivos CSS e JavaScript, no dispositivo do usuário.<\/p>

Assim, quando o visitante voltar, o site vai carregar mais rápido, pois o navegador recupera esses elementos do cache em vez de baixá-los novamente do servidor.<\/p>

\n\n\n

\n
\n \n \n <\/svg>\n

\n Sugestão de leitura <\/p>\n <\/div>\n

Leia nosso tutorial para saber mais sobre dicas de otimização de sites<\/a>.<\/p>\n <\/div>\n \n\n\n\n

\"Painel<\/figure>\n\n\n\n<\/p>

Não se esqueça de conferir o tempo de carregamento do seu site usando ferramentas como o PageSpeed Insights<\/strong><\/a>. Outra opção, disponível para os usuários do serviço de hospedagem da Hostinger<\/strong><\/a> podem verificar o desempenho de seus sites diretamente no hPanel.<\/p>

\"\"<\/a><\/figure>

3. Design não responsivo<\/strong><\/h2>

O The Bad Website tem um design não responsivo e falta de otimização para dispositivos móveis, um problema sério de web design. A falta de design responsivo dificulta para os usuários navegarem pelos produtos ou fazerem compras em seus celulares e tablets.<\/p>

O site também não se adapta a diferentes tamanhos de tela, levando a layouts distorcidos, elementos fora de lugar e uma experiência de usuário comprometida em dispositivos móveis.<\/p>

Aderir a apenas um tipo de dispositivo é uma abordagem de design desatualizada. De acordo com a Statista, os dispositivos móveis representam mais de 50% do tráfego mundial na internet<\/strong><\/a>. Isso significa que o The Bad Website pode perder cerca de metade de seus clientes em potencial por não ser um site adaptado a celulares.<\/p>

Dicas de Melhoria<\/strong>:<\/p>

O The Bad Website deve começar a priorizar o design responsivo para dispositivos móveis para resolver esses problemas e garantir uma experiência de navegação fluida em todos os dispositivos.<\/p>

O site pode usar breakpoints em CSS e media queries<\/strong><\/a> para definir diferentes estilos e layouts e melhorar a responsividade para dispositivos móveis. Ao implementar as media queries, o site pode adaptar seu design e funcionalidade com base em breakpoints, garantindo uma experiência suave e consistente em diferentes dispositivos.<\/p>

priorizar a usabilidade do site em dispositivos móveis também é crucial Criar primeiro o design para dispositivos móveis e aprimorá-lo progressivamente para telas maiores garante que a experiência para celulares e tablets permaneça intuitiva e totalmente otimizada.<\/p>

Utilize frameworks responsivos como o Bootstrap<\/strong><\/a>, que agilizam o desenvolvimento oferecendo componentes responsivos pré-construídos e sistemas de grade.<\/p>

Testar o site em vários dispositivos e navegadores é essencial para garantir a consistência da responsividade.<\/p>

\"Página<\/figure>

Serviços como o Criador de Sites<\/strong><\/a> da Hostinger também são uma excelente opção para construir um novo site. Eles garantem que seu site seja compatível para dispositivos móveis<\/strong><\/a> sem precisar mexer em configurações ou códigos complicados.<\/p>

\"\"<\/a><\/figure>

4. Mídia com reprodução automática<\/strong><\/h2>

Outra decisão ruim de web design é ter áudio ou vídeo que toca automaticamente na sua página, sem que o usuário tenha a opção de pausar ou parar a mídia.<\/p>

Muitos sites mal projetados tentam criar interesse e interação adicionando esses elementos sem perceber que são intrusivos. Mídia com reprodução automática interrompe a experiência de navegação e pode criar uma impressão negativa.<\/p>

O The Bad Website também caiu nessa armadilha. Quando os usuários chegam à página principal, um vídeo mostrando os gadgets mais recentes começa a reproduzir automaticamente com uma música alta. Pior ainda, algumas páginas do site fazem com que os usuários baixem arquivos automaticamente sem qualquer aviso.<\/p>

Dicas de Melhoria<\/strong>:<\/p>

Evitar o uso de áudio e vídeo com reprodução automática é o primeiro passo para prevenir uma falha grave na experiência do usuário. Em vez disso, ofereça botões de reprodução evidentes ou indicadores que permitam aos usuários iniciar a reprodução por conta própria, o que é uma solução melhor.<\/p>

Isso garante que os usuários escolham ativamente interagir com o conteúdo de mídia, mantendo uma abordagem mais centrada no usuário.<\/p>

Um site com design desatualizado também pode sofrer com o uso excessivo de animações. Pode parecer bom para tornar seu site mais interessante, mas muitas vezes é disruptivo e afetará negativamente o desempenho do site.<\/p>

A regra de ouro ao incorporar elementos de mídia como vídeos e animações é garantir que sejam intencionais, relevantes e agreguem valor à experiência do usuário. Evite elementos excessivos ou distrações que prejudiquem o conteúdo ou sobrecarreguem o usuário.<\/p>

Lembre-se de que arquivos grandes de mídia também podem afetar negativamente a velocidade de carregamento do site. Portanto, recomendamos usá-los com moderação e otimizar os arquivos de mídia antes de adicioná-los ao site.<\/p>

5. Fontes ilegíveis ou tipografia ruim<\/strong><\/h2>

A legibilidade do The Bad Website tem muitos problemas, começando pelo uso excessivo de diferentes estilos de fontes, tipográficas ilegíveis e esquemas de cores aleatórias em seus elementos.<\/p>

\"Imagem<\/figure>

Essas falhas de design dificultam a leitura das descrições de produtos e a navegação no site. Isso resultará em uma experiência de usuário ruim e aumentará a taxa de rejeição.<\/p>

O primeiro problema que contribui para a má legibilidade do site é a presença de muitas fontes diferentes em todo o site.<\/p>

O uso inconsistente de fontes cria confusão visual, dificultando para os usuários distinguirem títulos, texto do corpo e outros elementos importantes. Essa falta de uniformidade interrompe o fluxo natural da informação.<\/p>

Fontes ilegíveis, que são muito pequenas, excessivamente decorativas ou que não têm contraste adequado com o fundo, também podem forçar a visão dos usuários, tornando difícil para eles compreenderem a informação.<\/p>

Dicas de melhoria:<\/strong><\/p>

O TechGizmo pode resolver esse problema reduzindo o número de fontes diferentes usadas em todo o site para criar uma experiência visual mais consistente e coesa.<\/p>

Selecione algumas fontes que combinem entre si, subtítulos e texto do corpo para estabelecer uma hierarquia clara e melhorar a legibilidade. Designers de sites profissionais geralmente usam apenas três fontes<\/strong><\/a> em um único site para manter a consistência.<\/p>

Escolha fontes legíveis e garanta um espaçamento adequado entre as letras para uma fácil legibilidade. Preste atenção ao tamanho da fonte, ajustando-o a um nível confortável de leitura em diferentes dispositivos. Além disso, selecione tipografias legíveis, simples e bem adaptadas à identidade visual do site.<\/p>

Algumas das fontes mais comuns e versáteis que você pode usar são Roboto<\/strong>, Libre Franklin<\/strong> e Poppins<\/strong>. Você pode baixar essas fontes no site Google Fonts<\/strong><\/a> e verificar como elas ficam em diferentes estilos.<\/p>

\"Fontes<\/figure>

Além disso, escolha paletas de cores boas que melhorem a legibilidade, garantindo que o texto se destaque de forma distinta. Tenha espaços em branco suficientes entre os elementos, permitindo que o conteúdo ganhe destaque.<\/p>

6. Falta da barra de pesquisa<\/strong><\/h2>

A ausência de uma função de pesquisa é uma grande desvantagem. Muitos usuários visitam sites em busca de produtos ou informações específicas. Sem uma barra de pesquisa, eles são obrigados a navegar manualmente pelo site, muitas vezes levando a cliques desnecessários e perda de tempo.<\/p>

Sem a função de pesquisa os usuários são obrigados a depender apenas dos menus de navegação ou a rolar manualmente pelas páginas do site, tornando a navegação frustrante.<\/p>

Dicas de melhoria:<\/strong><\/p>

O The Bad Website deve implementar uma funcionalidade de pesquisa em seu site para resolver esse problema. A melhor prática é colocar uma barra de pesquisa em um local visível, como na barra de navegação ou no cabeçalho.<\/p>

Uma função de pesquisa se torna ainda mais crucial para uma loja virtual, pois ajuda os clientes a encontrar e comprar facilmente os produtos desejados. Esse recurso vai melhorar significativamente a jornada do usuário, aumentar a satisfação do cliente e as conversões.<\/p>

\"Plugin<\/figure>

Se você tem um site WordPress<\/strong><\/a>, plugins como o SearchWP<\/strong><\/a> e o ElasticPress<\/strong><\/a> são excelentes ferramentas para melhorar a função de pesquisa incorporada do WordPress.<\/p>

7. Pop-ups ou anúncios em excesso<\/strong><\/h2>

O uso excessivo de pop-ups é uma das principais características dos sites ruins. O The Bad Website enche os usuários com várias pop-ups, interrompendo sua jornada de navegação, muitas vezes promovendo vendas, descontos ou assinaturas de newsletter.<\/p>

Além disso, a presença de anúncios irrelevantes ou distrativos pode afetar negativamente a experiência do usuário. Anúncios irrelevantes para o conteúdo ou público-alvo do site podem criar uma sensação de desordem e desviar o propósito do site.<\/p>

Dicas de melhoria:<\/strong><\/p>

Embora mostrar anúncios no seu site seja uma ótima maneira de gerar receita, ter muitos pode resultar em um design de site ruim. Portanto, considere limitar o uso de pop-ups (use apenas em momentos cruciais) e garantir que elas ofereçam valor ao usuário.<\/p>

Implementar os pop-ups estrategicamente em momentos apropriados, como durante o checkout ou quando os usuários estão prestes a sair do site, pode ser uma abordagem melhor.<\/p>

Certifique-se de fornecer textos objetivos e convincentes nas pop-ups, oferecendo incentivos relevantes ou informações úteis. Limitar os anúncios e pop-ups vai melhorar o design e a experiência do usuário, fazendo seu site parecer mais profissional e fácil de usar.<\/p>

8. Layout de página desorganizado<\/strong><\/h2>

Um layout desordenado é um sinal nítido de um site mal projetado e pode impactar significativamente a experiência do usuário e a usabilidade geral.<\/p>

Ele cria uma impressão negativa e dificulta a navegação e compreensão do conteúdo. Além disso, o The Bad Website também tem um uso ineficaz dos espaços em branco.<\/p>

Devido a esses problemas, os usuários podem achar difícil se concentrar no conteúdo mais importante e abandonar o site completamente devido a uma experiência de navegação ruim. Esse problema também é bem representado na página principal do The Big Ugly Website, um site especificamente projetado para parecer desordenado e nada atraente.<\/p>

\"Imagem<\/figure>

Dicas de Melhoria:<\/strong><\/p>

Existem várias etapas para fazer o The Bad Website parecer menos desorganizado. Primeiro, simplificar o layout da página removendo elementos desnecessários e reduzindo a confusão visual.<\/p>

Concentre-se em apresentar o conteúdo mais relevante e essencial aos usuários, priorizando o que é importante para eles. Adote um estilo de design minimalista que permita aos usuários digerir facilmente a informação e navegar pelo site.<\/p>

Estabeleça uma hierarquia no design organizando o conteúdo com base em sua importância e relevância. Use elementos visuais, como cabeçalhos, subcabeçalhos e espaços em branco, para criar um fluxo visual e guiar a atenção dos usuários.<\/p>

Adote um layout de site comprovadamente eficiente e fácil de usar para apresentar o conteúdo. A landing page do Dockyard Social<\/strong><\/a> é um ótimo exemplo de site de design de página única, que é um dos layouts mais populares<\/strong><\/a> para sites atuais.<\/p>

\"Site<\/figure>

Por isso, analisar alguns dos sites mais visitados em seu nicho pode ser benéfico, já que eles geralmente descobriram a melhor forma para atrair seu público-alvo.<\/p>

9. Falta de CTA (Call-to-action)<\/strong><\/h2>

Em uma loja virtual, é crucial ter botões CTAs bem posicionados e facilmente identificáveis que guiem os usuários em direção às ações desejadas. A falta de botões nítidos de CTA no The Bad Website confunde os usuários que visitam o site com a intenção de fazer uma compra.<\/p>

\"Site<\/figure>

Sem instruções objetivas ou pistas visuais intuitivas, os usuários podem ter dificuldade em realizar ações essenciais, como encontrar produtos específicos, adicioná-los ao carrinho e prosseguir para o checkout.  Essa confusão interrompe o fluxo do usuário e pode desencorajá-los de concluir as transações pretendidas.<\/p>

Dicas de Melhoria<\/strong>:<\/p>

Garanta que os botões de CTA contenham textos explicativos e descritivos que transmitam a ação pretendida. Por exemplo, em vez de textos genéricos como Interessado?<\/strong>, use rótulos orientados para a ação, como Comprar Agora<\/strong> ou Comece Já<\/strong>.<\/p>

Botões explicativos guiam os usuários e fornecem um melhor entendimento da ação desejada. Veja do site da Netflix como um exemplo a seguir.<\/p>

\"Site<\/figure>

Posicione estrategicamente os botões de CTA em locais proeminentes e intuitivos ao longo do site. Coloque-os onde os usuários naturalmente esperariam encontrá-los, como na seção principal, perto das descrições dos produtos ou no final das seções principais.<\/p>

Certifique-se de que eles sejam visualmente distintos dos outros elementos da página e use cores contrastantes, tamanho apropriado para chamar a atenção.<\/p>

Empregue elementos visuais, como setas, cores contrastantes ou variações de tamanho, para tornar os botões visualmente distintos e enfatizar sua importância.<\/p>

10. Processos de cadastro complexos<\/strong><\/h2>

Quando os usuários criam uma conta no seu site, você pode usar as informações deles para se comunicar ou personalizar algumas sugestões de conteúdo. Mas criar procedimentos de registro complicados podem fazer os clientes desistirem de se registrarem e concluírem suas compras.<\/p>

O The Bad Website tem problemas com formulários e formulários que não são intuitivos. Formulários de registro complexos, com campos desnecessários ou instruções confusas, podem sobrecarregar os usuários e tornar o processo difícil e demorado.<\/p>

Isso dá a impressão de que o site tem uma usabilidade ruim, prejudicando sua reputação e dificultando a aquisição de clientes.<\/p>

Dicas de melhoria:<\/strong><\/p>

A primeira dica é simplificar os formulários de registro, reduzindo o número de campos obrigatórios. Solicite apenas as informações essenciais e necessárias para a criação da conta e personalização. Formulários longos e detalhados podem dissuadir os usuários de completar o processo de registro.<\/p>

Considere utilizar técnicas de perfil progressivo<\/strong><\/a>, onde informações adicionais podem ser coletadas gradualmente ao longo do tempo.<\/p>

Explique o propósito de cada campo e dos requisitos de formatação. Coloque dicas, ícones de ajuda ou exemplos ao lado de campos complexos para ajudar os usuários.<\/p>

Além disso, ofereça a opção para os usuários se inscreverem ou fazerem login usando suas contas de outras plataformas, como Facebook ou Google. Isso vai simplificar o processo de registro, preenchendo automaticamente alguns campos com informações obtidas de seus perfis de outras plataformas.<\/p>

\"Formulário<\/figure>

Usuários do WordPress podem usar plugins como o WPForms<\/strong><\/a> para criar formulários de registro personalizados e seguros para o site.<\/p>

11. Negligência nas práticas de SEO<\/strong><\/h2>

O The Bad Website apresenta uma falha crítica ao negligenciar práticas essenciais de otimização para mecanismos de busca (SEO)<\/strong><\/a>, prejudicando sua visibilidade nos motores de busca. Nenhuma de suas imagens têm descrição em alt text e todas os URLs têm uma estrutura confusa.<\/p>

Além disso, o conteúdo do site não usa palavras-chave estrategicamente para ajudar os motores de busca a indexarem o site de forma otimizada.<\/p>

Esse problema causa um ranqueamento ruim, tráfego orgânico limitado e oportunidades perdidas de alcançar um público mais amplo, reduzindo, em última análise, suas chances de atrair novos clientes.<\/p>

Dicas de melhoria:<\/strong><\/p>

Uma das formas mais importantes para melhorar o SEO do site é criar um conteúdo de alta qualidade, valioso e informativo que atenda aos interesses e necessidades do público-alvo.<\/p>

Otimize o conteúdo com palavras-chave relevantes, mas garanta que ele seja natural e forneça informações valiosas aos usuários. Conteúdo envolvente incentiva visitas mais longas ao site, taxas de rejeição mais baixas e melhores classificações nos mecanismos de busca.<\/p>

Realize uma pesquisa abrangente de palavras-chave para identificar termos e frases relevantes que se alinhem com o conteúdo do site e a intenção de busca do público-alvo. Ahrefs<\/strong><\/a> e Semrush<\/strong><\/a> são exemplos de boas ferramentas de pesquisa de palavras-chave para melhorar o SEO.<\/p>

\"Site<\/figure>

Otimize os títulos, meta descrições, cabeçalhos e o conteúdo inserindo estrategicamente as palavras-chave, aumentando as chances do site ranquear melhor nos resultados dos motores de busca.<\/p>

Preste atenção nas meta tags, incluindo títulos e descrições, pois são cruciais na otimização para motores de busca. Use ferramentas como o Yoast SEO<\/strong><\/a> para gerenciar esses detalhes de SEO mais facilmente.<\/p>