Falhas evitáveis ​​de design que podem prejudicar seu site

A web deveria melhorar, essa era a promessa. E você pensaria que teria, com toda a consciência crescente de acessibilidade e considerações de usabilidade. Mas, estranhamente, estamos mais de 25 anos e as coisas estão piorando em geral. Como pôde isto ser assim?

Não se pode culpar a educação. Todos os cursos de Design e Desenvolvimento da Internet que valem a pena cobrem os princípios básicos de bons princípios de design, usabilidade e acessibilidade. Não se pode culpar os padrões de engenharia, porque as diretrizes do W3C são mais rígidas e definidas com mais clareza do que nunca. Também não se pode culpar a tecnologia, porque a tecnologia é mais favorável ao desenvolvimento de sites de alta qualidade, e não menos.

Não, a resposta a esse paradoxo é na verdade bem simples. É porque os designers tiveram seu poder despojado pelas exigências dos profissionais de marketing e de seus clientes. Assim, o designer sabe que deve haver um bom contraste entre o texto e o plano de fundo, mas ele não pode implementar esse bom princípio de design porque alguém em marketing acha que parecerá mais legal ter texto “prateado escuro” em vez de preto, e é claro que devemos ter “aquela fonte azul lavada que o Twitter usa” para os títulos, então “todos os jovens podem se identificar melhor com o nosso site”.

A preocupação sobre “parecer bem” e também copiar o que todo mundo está fazendo tem precedência sobre considerações práticas como alta velocidade, baixa largura de banda e boa usabilidade. Se você é um dos clientes que precisa tomar decisões sobre como seu site deve ser, então este artigo é para você. É também para os designers que têm a coragem de negociar com os clientes para obter sites mais em linha com a forma como eles deveriam ser, em vez de ser como qualquer outro site similar lá fora. É hora de o futuro chegar já.

1. Contraste ruim

Isso ultimamente se tornou moda. É incrível que assim seja, dada a repetida mensagem que nos levou repetidamente ao longo dos últimos anos 25 que devemos evitar um contraste ruim. O precursor dessa moda parece ser o Twitter e o Bootstrap, mas eles, por sua vez, poderiam ter sido inspirados por outra pessoa. Vamos dar uma olhada em um exemplo:

O texto acima é um fragmento de uma das páginas de ajuda do Twitter. A filosofia por trás do design parece ser que quanto mais importante uma informação é mantida, mais escura ela aparece na página. Assim, o cabeçalho H1 da página está em texto preto, porque isso parece ser muito importante.

Embora não esteja claro na captura de tela, o corpo principal do texto é, na verdade, uma cor cinza escura (não preta), porque isso parece ser importante, mas não tão importante quanto o cabeçalho.

Os links não estão no tom padrão de azul, eles estão no "Twitter Blue", que é um tom muito pálido que não contrasta bem com fundos brancos.

O cabeçalho H2 mais abaixo na página é um tom de cinza mais pálido do que o texto do corpo principal, que algumas pessoas acharão confuso. Os cabeçalhos não devem ser mais difíceis de ver do que o resto do texto, a menos que sejam uma grande distração (nesse caso, você provavelmente deveria estar questionando se eles precisam ser títulos).

As opções de navegação do painel esquerdo também estão em tons cinza-claro e azul-claro, e novamente a ideia parece ser que esses itens fiquem insignificantes para que eles não o distraiam da área de conteúdo principal.

Finalmente, a área mais pálida de todas é a zona de feedback, que é claramente a parte menos importante de todas. Mas até o Twitter está fazendo um trabalho melhor do que este site:

A única conclusão lógica que pode ser derivada desse exemplo é que eles não querem que você saiba a resposta para a pergunta. É, se você perdoar a expressão, além do pálido.

2. Codificação ruim

Isso é simplesmente um sintoma de extrema preguiça e nem se incomoda em verificar como sua página é processada. Parece impossível fazer este erro nos dias de hoje, mas ainda assim as pessoas estão conseguindo fazê-lo. Eles até conseguem fazer isso pelas razões erradas, como mostrado neste exemplo:

Parece apenas um caso comum de alguém esquecer de definir a codificação para UTF-8, certo? Exceto não, porque a codificação desta página está definida como UTF-8. O designer do site fez tudo corretamente, chegando ao extremo de escapar de todos os apóstrofos nos metadados para o caractere de entidade 39, mesmo que isso nem seja necessário. O problema ocorreu com a inserção do conteúdo no design, porque o que obviamente aconteceu aqui é um texto codificado incorretamente contendo citações inteligentes do MS Word coladas na seção de conteúdo, garantindo assim que ele seja renderizado incorretamente em cada navegador, porque a codificação de a página está definida como UTF-8 e o conteúdo não está codificado em UTF-8.

Embora a maioria das pessoas esteja disposta a ignorar a pequena questão de apóstrofos inteligentes sendo processados, isso é muito chato, e é ainda pior quando o erro ocorre no título. A linha inferior é que você deve verificar se o seu conteúdo está sendo exibido corretamente quando você o lança na Web, e deve sempre garantir que você tenha usado a codificação adequada (que, para a maioria dos casos, será UTF-8 ou UTF-16). Lembre-se de que os websites são principalmente sobre as primeiras impressões, e não é realmente bom se a primeira impressão que alguém tiver da sua empresa é “desleixada” ou “preguiçosa”.

3. Usando o Flash

Simplesmente não há razão para fazer isso mais. Flash teve seu dia, mas esse dia acabou. Ainda muitos sites, e particularmente sites de apostas (onde é o menos apropriado) ainda estão usando o Flash. Além disso, alguns dos maiores e mais bem-sucedidos sites da Web fazem uso extensivo do Flash em muitos contextos diferentes. Então, se é bom o suficiente para eles, por que não seria bom o suficiente para você?

Bem, por um lado, o Flash é um recurso enorme. Ele também está repleto de vulnerabilidades, tem sido alvo de hackers mal-intencionados como um mecanismo de entrega de trojans e também é inerentemente um risco de privacidade devido à incorporação de cookies Flash persistentes, também conhecidos como Objetos Compartilhados Locais. Esses cookies ignoram as configurações de segurança do navegador e podem conter muito mais informações do que um cookie comum. Pior ainda, os LSO compartilham dados entre diferentes navegadores, dificultando ainda mais a privacidade dos usuários comuns.

Na melhor das hipóteses, os usuários que sabem o bastante sobre o Flash ficarão preocupados com o uso do Flash como sendo preguiçoso ou desatualizado, mas também há a possibilidade de os usuários perceberem que sua empresa não tem consciência de segurança, desconsiderando preocupações com a privacidade ou, pior ainda que você é indigno de confiança.

Tudo o que pode ser feito em Flash pode ser feito em HTML regular 5, então se você ainda estiver usando Flash, isso indica aos usuários que você não sabe replicar a funcionalidade em HTML 5, que você é muito barato para faça isso, ou que você esteja explorando intencionalmente o lado sombrio do Flash. Se você está pensando em usar o Flash e não tem intenções desonestas, simplesmente não vale a pena.

4. Vídeo de reprodução automática

Se há uma coisa que os usuários universalmente não suportam, é a suposição desagradável de que, se seu site fornecer conteúdo de vídeo, eles vão querer reproduzi-lo. Os sites de notícias são especialmente culpados por esse pecado, e muitos deles chegam a adicionar uma lista de reprodução interminável ao vídeo que eles estão reproduzindo autonomamente. O YouTube também tem listas automáticas ativadas por padrão, mas pelo menos elas não reproduzem automaticamente seu primeiro vídeo. É claro que os usuários devem optar por fazer a reprodução automática, eles não devem ter opt-out.

Os usuários em planos de largura de banda limitada e, especialmente, usuários de dispositivos móveis (que são a maioria deles), não perceberão que seu site carregou e reproduziu vídeos em seus navegadores sem que eles soubessem disso. O único momento em que pode ser considerado adequado para reproduzir automaticamente um vídeo é quando o vídeo é muito pequeno (em termos de bytes), autocontido e agrega valor à experiência do usuário.

Se tantos usuários estão descrevendo este comportamento como irritante e realmente perguntando como desabilitá-lo, ele deve ser realmente chato. E, sim, sabemos que é bastante simples para os usuários do Firefox, Chrome e Chromium desabilitarem a reprodução automática completamente, mas quantos usuários ficam realmente confortáveis ​​pesquisando sobre: ​​config ou instalando um plug-in para bloquear comportamentos que não deveriam ser explorado em primeiro lugar?

Observe que nós falamos sobre exploração lá? É porque os criadores do HTML 5 não fizeram nada de errado ao incluir a possibilidade de AutoPlay. É só que eles não previram que as pessoas o usassem incorretamente assim.

5. Rolagem infinita

Este é outro conceito outrora novo e interessante que foi totalmente sequestrado por profissionais de marketing, tornando-se agora uma fonte de frustração e não de entretenimento como deveria ser. Os profissionais de marketing descobriram que, se usarem rolagem infinita em uma página da Web, poderão manter as pessoas na página por mais tempo.

Mas, mais uma vez, os resultados da pesquisa contam uma história. Veja este exemplo:

Como você pode ver, o tom geral é que a rolagem infinita é irritante. Não é melhorar a experiência do usuário, causa problemas de usabilidade em massa e pode levar a problemas de memória e desempenho à medida que as páginas crescem e geram mais conteúdo. Isso é especialmente verdade quando os usuários abrem várias guias e quando os provedores estão fornecendo conteúdo rico em mídia em infinitos sites de rolagem em várias guias, isso definitivamente causará problemas.

6. Gerando janelas pop-under ou pop-over quando não são necessárias

Qualquer coisa que não agregue à experiência do usuário, diminui isso. A desvalorização da experiência do usuário cria ressentimentos e os usuários evitam o site se houver uma alternativa viável. É por isso que os sites que estão em posições muito seguras, como o TripAdvisor, arremessam-se por baixo das janelas, tão casualmente quanto os soldados dos EUA, lançam ursos de pelúcia de propaganda a crianças famintas do Afeganistão. Mas onde os ursos pelo menos trazem alegria, os pop-ups só resultam em aborrecimento.

A pior coisa sobre esse comportamento do TripAdvisor é que realmente não faz sentido o que eles estão fazendo porque o usuário já está em seu site. As únicas razões imagináveis ​​para o TripAdvisor duplicar a mesma janela em que o usuário já está em um pop-under seria:

  • para enganar a análise da taxa de rejeição do Google
  • para tentar fazer você ter segundos pensamentos se você saltar

Nenhuma delas parece ser uma ideia particularmente boa. É claro que pode haver outras razões para isso, mas, se existirem, não são óbvias.

7. Sobreposições irritantes

Não é "International Bash TripAdvisor Day" (ainda), mas desde que eles estão oferecendo generosamente exemplos de comportamento desagradável de página da web, seria realmente olhando um cavalo de presente na boca para ignorar isso. Então aqui está o que o TripAdvisor acabou de mostrar há pouco, quando eu estava montando aquela imagem pop-under:

Você provavelmente já pode adivinhar o que é tão estúpido sobre isso. É que eu já estou no site deles. Eu já estou pensando em fazer compras no site deles. Então esse pop-over não está conseguindo nada além de me atrapalhar nisso. Pelo menos não é uma daquelas overlays semelhantes me implorando para assinar um boletim informativo ou baixar um e-book "livre".

Você absolutamente nunca deve usar essas coisas, exceto quando é para fornecer algumas informações muito importantes para o usuário. Um exemplo disso pode ser instruções sobre como jogar um jogo que eles solicitaram no navegador, ou uma mensagem de aviso de segurança ou privacidade.

É principalmente uma questão de bom senso (que é provavelmente o motivo pelo qual os profissionais de marketing falham nisso)

A coisa realmente óbvia é que quando você faz algo na Web que só beneficia a si mesmo, não fornece nenhum benefício para o usuário e, de alguma forma, incomoda-o, invade sua privacidade ou realmente lhes custa dinheiro (como no caso de reprodução automática). vídeo e sites de rolagem infinitos), os usuários vão se ressentir. Talvez nem todos os usuários, mas o suficiente de uma maioria ativa para influenciar mais alguns.

Se o seu site tiver alguma dessas falhas de design, você deve agir imediatamente para corrigir essas falhas. Eles têm o potencial de prejudicar sua imagem pública e afastar usuários do seu site.

imagem de cabeçalho cortesia de Dan Dragomir

Bogdan Rancea

Bogdan é um membro fundador da Inspired Mag, acumulando quase 6 anos de experiência neste período. Em seu tempo livre, ele gosta de estudar música clássica e explorar artes visuais. Ele é muito obcecado com fixies também. Ele é dono do 5 já.