Todas as tendências valem a pena? Os 5 principais erros de UX mais comuns que os web designers cometem

“A elegância é alcançada quando tudo o que é supérfluo é descartado e o ser humano descobre a simplicidade e a concentração: quanto mais simples e sóbria a postura, mais bela será.” –Paulo Coelho

A missão de um web designer é criar experiências de usuário envolventes, ajudar os visitantes do site a realizar tarefas e aumentar as conversões. No processo, eles geralmente se concentram apenas na estética, pegam atalhos e acabam confiando em vários padrões e tendências de design comuns. O perigo disso é que eles podem ser desviados por tendências populares e, consequentemente, erros comuns de UX são cometidos porque as tendências são implantadas de forma inadequada.

Quando se trata da web, as pessoas não querem aprender coisas, elas querem fazer coisas. Existem muitos exemplos na web em que os designers optaram por se concentrar apenas no apelo visual e, ao fazê-lo, sacrificaram a usabilidade. Eles presumiram que um “momento uau” que impulsionasse o design seria poderoso o suficiente para envolver o usuário. Mas, infelizmente, os usuários estão tendo dificuldade em entender a interface do usuário, têm dificuldade genuína em usar o site e as taxas de rejeição do site dispararam.

Como Kate Rutter afirmou: “Feio, mas útil, supera o bonito, mas inútil”. A chave para usar padrões e tendências de web design de forma eficaz é encontrar um equilíbrio entre o que parece esteticamente agradável e onde eles agregam valor.

Vejamos alguns erros comuns de UX.

Erro comum de UX de web design nº 1: cabeçalhos grandes e fixos

Cada vez mais cabeçalhos pegajosos altos podem ser vistos em sites. “Blocos de marca” e menus de navegação que têm uma posição fixa e ocupam um espaço significativo. Eles ficam colados na parte superior da janela do navegador (o “cabeçalho fixo”) e geralmente bloqueiam o conteúdo enquanto ele rola abaixo deles.

Alguns cabeçalhos em sites de grandes marcas têm mais de 150 pixels de altura. Onde está o valor deles? Elementos fixos, como cabeçalhos fixos, podem ter benefícios reais, mas os web designers devem ter cuidado ao usá-los – há vários problemas importantes de UX a serem considerados.

O Sticky Nav Header pode ser muito grande para o conforto

Se a decisão de usar um cabeçalho de navegação fixo já foi tomada, é melhor testá-lo com os usuários. É um erro comum de UX exagerar e encher o cabeçalho de navegação com conteúdo. Com um cabeçalho fixo, a navegação ainda deve ser confortável para os visitantes. Deixar de encontrar o equilíbrio certo pode resultar em uma pequena quantidade de espaço para o conteúdo principal e uma experiência sufocante e claustrofóbica do site para os visitantes.

Às vezes, há uma solução simples com CSS: tornando o cabeçalho fixo ligeiramente transparente, as pessoas ainda podem ver o conteúdo enquanto rolam, o que torna a área de conteúdo mais substancial.

Aqui está um exemplo de um cabeçalho pegajoso alto: página de perfil do jogador da ATP em Roger Federer.

O cabeçalho fixo deste site tem uma altura de mais de 180px! Isso é mais de 30% de toda a altura da página em alguns laptops: uma experiência de usuário ruim que pode ser evitada.

Não considerando o problema de UX do Sticky Nav Header em dispositivos móveis

Algumas pessoas podem estar usando telas de computador grandes e de alta resolução, onde um cabeçalho de navegação fixo pode acelerar as interações, mas e os dispositivos móveis? Sem dúvida, um número significativo de visitantes do site estaria acessando o site a partir de um dispositivo móvel, portanto, um cabeçalho fixo pode não ser a melhor ideia. Felizmente, as técnicas de design responsivo tornam possível projetar soluções diferentes para plataformas diferentes e manter o cabeçalho de navegação fixo - trocadilhos - para navegadores de desktop.

O site Coffee with a Cop também tem um cabeçalho fixo, mas muito menor – com menos de 80 pixels de altura.

A navegação de cabeçalho, neste caso, é sem dúvida a solução certa para telas de alta resolução, pois permite uma navegação mais eficiente. Em telas de resolução menor, o cabeçalho também é fixo, mas ocupa uma quantidade considerável de espaço. Uma excelente alternativa para um cabeçalho de navegação fixo no celular é o sempre presente menu de hambúrguer. Embora esse padrão não seja um solucionador de problemas universal, ele libera uma quantidade significativa de espaço.

Erro comum de UX de web design nº 2: fontes finas e leves

Atualmente, fontes finas e leves são difundidas em vários aplicativos e sites para dispositivos móveis. Com o avanço da tecnologia de tela e renderização aprimorada, muitos designers os estão usando porque são elegantes, limpos e modernos. No entanto, fontes finas podem causar problemas de usabilidade e, portanto, dificultar o UX.

O objetivo de todo o texto em um site é ser legível, e o tipo fino pode afetar seriamente a legibilidade. Nem todos os visitantes estarão visualizando um site em uma tela que renderiza bem o tipo fino. Alguns tipos de luz são difíceis de ler em um iPhone ou iPad com tela Retina.

Acima de tudo, o texto deve ser legível. Se os usuários não conseguirem ler as palavras em seu aplicativo, não importa quão bonita seja a tipografia.

Diretrizes de interface humana da Apple

A Apple está se referindo a aplicativos móveis, mas o mesmo princípio se aplica a sites. A legibilidade é obrigatória, não opcional para uma boa usabilidade. Não adianta colocar conteúdo em um site se ele for ilegível.

Aqui estão alguns erros comuns de UX a serem considerados antes de usar o tipo fino:

Usando fontes finas e leves porque está na moda

As fontes não devem apenas ter uma boa aparência, mas também devem ser legíveis. Para obter o contraste e a legibilidade adequados, os designers devem buscar a combinação ideal em seus designs: tamanho, peso e cor.

É melhor testar o site em vários dispositivos e tamanhos de tela para garantir que todo o texto do site esteja legível.

O que nos leva ao próximo erro comum de UX:

Não testando a legibilidade do texto em todos os principais dispositivos

Tipos finos e leves podem ficar bem em monitores caros e bem ajustados de muitos designers, mas o usuário médio que muitas vezes vê nossos projetos em telas mais baratas e abaixo do padrão também deve ser considerado. A melhor prática é verificar a aparência das fontes em todos os principais dispositivos: computadores desktop, laptops, tablets e smartphones.

Por exemplo, ao testar um design móvel, faça com que os participantes usem o site em dispositivos móveis à luz do dia — os usuários do mundo real nem sempre terão condições de navegação e iluminação perfeitas. Se estiver usando uma fonte fina em um site, há uma maneira simples de se adaptar aos usuários de dispositivos móveis: especifique uma fonte mais grossa em dispositivos móveis para melhor legibilidade.

Erro comum de UX de web design nº 3: texto de baixo contraste

O uso de elementos de baixo contraste de cores também se tornou moda no design moderno da interface do usuário. Ele surgiu de uma tendência de design minimalista porque, ao reduzir o contraste em algumas áreas, o design pareceria “minimalista”. Os designers não conseguiam cortar a complexidade das informações que precisavam ser apresentadas, então jogaram com baixo contraste no design.

Já abordamos fontes finas, mas há uma armadilha ainda maior: uma combinação de uma fonte leve com baixo contraste que impede seriamente o UX devido à péssima legibilidade. Os designers devem fazer tudo o que puderem para evitar essa armadilha de usabilidade.

Baixo contraste de texto no corpo da cópia

A Cool Springs Financial usa uma variante fina da Helvetica para o corpo do texto em seu site. Embora pareça elegante e contribua para uma interface de usuário esteticamente agradável, é difícil de ler em várias plataformas. Embora o baixo contraste não seja necessariamente ruim, ele pode ter um impacto negativo na usabilidade de um site, dificultando a leitura do texto.

Não testando o contraste do texto

Existe uma ferramenta bacana para verificação de contraste na web chamada Colorable que ajudará os designers a definir o contraste de texto correto de acordo com as Diretrizes de Acessibilidade de Conteúdo da Web. Quando os designers sabem que estão usando o contraste de texto correto, eles podem ajustar outras cores em seu site e fazer testes rápidos de vários dispositivos/usuários para garantir que o texto seja legível.

Erro comum de UX de web design nº 4: seqüestro de rolagem

Outra tendência de alto risco que está ganhando terreno na web é o “sequestro de rolagem”. Os sites que implementam essa tendência assumem o controle da rolagem da página (geralmente com JavaScript). Quando as pessoas o encontram, elas não têm mais controle sobre a rolagem da página e são incapazes de prever seu comportamento, o que pode facilmente levar à confusão e frustração. É um experimento arriscado que pode prejudicar a usabilidade do site e, na pior das hipóteses, induzir a “raiva do computador”.

Alguns sites podem se safar do sequestro de rolagem, mas isso não significa que todos possam. Por exemplo, muitos web designers seguem os sites da Apple com seqüestro de rolagem, efeitos de paralaxe e imagens de alta resolução de vários produtos. A Apple tem seu mercado-alvo, um conceito único e conteúdo exclusivo para seu site. Uma vez que cada site tem problemas únicos, também deve ter soluções exclusivas adaptadas a esses problemas.

Não testando com usuários do mundo real

Ao emprestar ideias da moda ou padrões de interface do usuário, é melhor testar o protótipo de um site em usuários do mundo real para evitar problemas de UX. Testes simples de usabilidade revelarão se a implementação de um sequestro de rolagem, por exemplo, é viável ou não. Sem testes, os designers não têm como saber se o sequestro de rolagem funcionará, e fazer suposições geralmente é caro.

O Tumblr, um site popular de blogs pessoais, usa o sequestro de rolagem em sua página inicial. Embora isso possa ser arriscado, é seguro assumir que eles conhecem bem seu público-alvo e a experiência de usuário legal e moderna que desejam apresentar. Quando os visitantes do site começam a rolar, a rolagem é sequestrada e as pessoas são levadas para a próxima seção.

A página de rolagem longa é dividida em várias seções que são distinguíveis por uma grande dose de cores saturadas e pontos indicadores proeminentes no lado esquerdo da janela. Como resultado, a página inicial do Tumblr parece um grande carrossel vertical que os visitantes têm controle, em vez de um site experimental desagradável com mente própria.

Erro comum de UX de web design nº 5: carrosséis

Carrosséis — uma apresentação de slides para alternar entre uma variedade de conteúdo — são muito comuns na Web, especialmente em páginas de destino e páginas iniciais. Embora possam ser úteis, eles têm vários problemas de usabilidade e, portanto, se qualificam como outro erro comum de UX. De acordo com o Nielsen Norman Group: “ as pessoas geralmente passam imediatamente por essas imagens grandes e perdem todo o conteúdo dentro delas ”. Isso pode afetar negativamente o UX, pois os visitantes podem não ver conteúdo valioso em alguns dos slides rotativos.

Carrosséis de sites podem não fornecer valor para os usuários

Se bem feito, um carrossel pode envolver os usuários com grandes imagens impressionantes. O problema é que os carrosséis geralmente não adicionam nenhum valor adicional, mas simplesmente estão lá para decoração e só são incluídos porque todos os outros os estão usando. Uma forma de testar se um carrossel de site faz sentido: anote três benefícios que um carrossel oferece ao visitante. Se três benefícios significativos não puderem ser encontrados, isso não agregará nenhum valor.

As setas anterior e seguinte têm baixa capacidade de descoberta

Informações importantes em um carrossel de sites podem permanecer ocultas se as setas seguinte e anterior não puderem ser descobertas. Os controles também devem ser compatíveis com toque para dispositivos móveis.

Muitas vezes não há flechas para controlar o carrossel; apenas os pontos indicadores de slide são incluídos para avançar os slides. No entanto, eles geralmente têm baixo contraste, baixa capacidade de descoberta e não possuem uma área clicável ou tocável grande o suficiente. Os pequenos alvos clicáveis ​​podem levar a um UX ruim, um visitante frustrado do site e uma saída rápida do site.

Por exemplo, o site da Fundação Floresta Longo tem um carrossel rotativo de imagens em sua página inicial. Está configurado para reprodução automática e gira por cinco fotografias. As setas anterior e seguinte, no entanto, são pequenas e transparentes, o que as torna difíceis de detectar e difíceis de clicar. Não há indicadores para os visitantes do slide estarem ativados e nenhum rótulo para significar o que as imagens representam. As imagens não são links e funcionam como pura decoração. Embora esse tipo de carrossel possa ter algum valor para envolver o visitante, no geral deixa muito a desejar.

Conclusão

As tendências de web design, se não forem consideradas com cuidado e implementadas com cautela, podem levar a vários erros comuns de UX. Os designers de UX devem usar seu melhor julgamento e não ter medo de inovar, mas para garantir uma ótima usabilidade do site, seria bom testar seu design completamente com usuários do mundo real.

Na profusão louca de tendências de web design, as coisas em voga vêm e vão. Em meio a esse caos, o uso equilibrado de estética, eficiência e usabilidade desempenha um papel significativo na distinção das tendências de UX que se mostraram as mais fortes e conquistaram a maior aceitação do usuário.

Os web designers podem criar o esquema de cores mais legal, a animação de rolagem mais sofisticada ou os efeitos de paralaxe mais fantásticos, mas se a interação humana sofrer como resultado, o UX será ruim e as pessoas seguirão em frente rapidamente. Outro site está a apenas um clique de distância.

Leia mais no Blog Toptal Design:

• Design Responsivo - Melhores Práticas e Considerações
• Abordando o processo de design do site a partir do navegador
• Codificação para Designers – Quanto Devemos Saber?
• Práticas recomendadas de design de interface do usuário e erros comuns