Como designers da web Estamos constantemente tentando criar uma ótima experiência UX e ajudar os usuários a atingir seus objetivos. Em nosso trabalho diário, usamos muitos tipos de padrões e tendências comuns. Em minha experiência, tenho visto como esses padrões e tendências podem facilmente conduzir os clientes e designers / desenvolvedores na direção errada. Não é nenhum segredo que de vez em quando todos nós nos perdemos um pouco com coisas que parecem ser vistas incrível . Eu admito, já caí nessas armadilhas muitas vezes, escolhi criar algo visualmente atraente e sacrifiquei a usabilidade por isso. Por que eu fiz isso? Eu assumi aquele momento Uau aconteceria e isso atrairia magicamente o usuário. Eu esperava esse efeito Uau isso causaria um longo impacto. O momento solene veio quando descobri que meus usuários estavam tendo problemas para entender a interface que eu havia criado e da qual me orgulho muito. Às vezes você aprende da maneira mais difícil.

A lição que aprendi foi que, para evitar uma jornada agitada para nossos usuários, devemos sempre nos perguntar o que está por baixo da superfície brilhante da interface do usuário que estamos criando. Vale a pena parar antes de começar a gostar de quaisquer padrões ou tendências e pensar sobre o valor que eles fornecem. Como Kate Rutter brilhantemente colocou, 'feio, mas útil supera o bonito, mas sem sentido.'

Por favor, não me entenda mal - não estou sugerindo que não devemos tornar as coisas bonitas, estou sugerindo que devemos nos concentrar em tornar as coisas bonitas e usáveis. O segredo dos padrões e tendências é encontrar um equilíbrio entre o que parece bom e o valor por trás disso.

Neste artigo, listarei vários erros de UX comuns que vejo todos os dias. Embora nem todos sejam ruins, por assim dizer, eles podem ser perigosos se não forem implementados com cautela. Também compartilharei um pouco de informação sobre como você pode melhorar a usabilidade ao implementar essas tendências ou até mesmo sugerir uma solução alternativa. Sem mais nada a acrescentar, vamos examinar a lista.

Erro comum nº 1: cabeçalhos grandes e fixos

Vemos cada vez mais títulos grandes e altos - blocos marcados e menus que são fixos em posição e ocupam uma parte grande e significativa da janela de visualização. Eles ficam no topo e frequentemente bloqueiam o conteúdo abaixo deles. Já vi cabeçalhos em sites de alta produção com mais de 150 pixels de altura, mas há valor real por trás deles? Posso estar forçando um pouco, mas grandes cabeçalhos fixos me lembram frames HTML assustadores e agora antigos. Ufa!

Elementos fixos podem ter benefícios reais , mas tenha cuidado ao lidar com eles - há uma série de coisas importantes a se ter em mente. Ao implementar cabeçalhos fixos, lembre-se de alguns erros comuns que você deseja evitar o máximo possível:

Grande demais para ser confortável

Se a decisão de projetar um cabeçalho fixo grande já foi tomada, execute alguns testes para descobrir se 'grande' é 'muito grande'. Certifique-se de não exagerar e colocar muito conteúdo no título, o que resultará em um elemento muito alto. Com o cabeçalho fixo no lugar, a navegação deve ser rápida e conveniente para os usuários. Se você estiver em dúvida quanto ao tamanho real do cabeçalho, tente diminuí-lo sem sacrificar muito o apelo visual e a presença da marca. Não encontrar um bom equilíbrio pode resultar em uma experiência claustrofóbica para seus usuários e deixar muito pouco espaço para o conteúdo principal.

No ano passado, estive trabalhando em um projeto em que o cliente insistia em ter a navegação fixa na versão desktop. Mesmo quando a barra não era especialmente alta, temia que alguns usuários pudessem se sentir claustrofóbicos por se sentirem presos. Minha solução foi simples - dando à barra de navegação um pouco de transparência usando CSS, os usuários podiam ver através da barra, o que fazia a área de conteúdo parecer maior. Aqui está um pouco do código CSS, por que não tentar e ver se funciona para você também?

.header { opacity: 0.9; }

Este exemplo que descobri quando me deparei recentemente com Página de perfil ATP de Roger Federer .

Seu cabeçalho fixo tem cerca de 110 px de altura e, quando você rola para baixo, uma sub-navegação é exibida, tornando o cabeçalho de 160 px de altura. Isso representa mais de 30% da altura da página inteira do meu MacBook Pro com o dock aberto.

Não corrige o problema no celular

Claro, muitos usuários usarão uma tela bastante grande e os menus fixos podem ser uma vantagem em resoluções grandes, mas e quanto às resoluções menores e ao mundo móvel? Lembre-se de que uma parte significativa de seus usuários usará um dispositivo com uma resolução pequena, portanto, para dispositivos móveis, a opção position: fixed provavelmente não é a melhor solução. Por sorte, técnicas responsivas ele nos permite projetar uma solução diferente e ficar com o cabeçalho fixo apenas para grandes resoluções. A abordagem ‘mobile-first’ nos dará muitas das respostas - começa com a resolução móvel, apenas o conteúdo essencial, e continua a partir daí.

Café com um Policial ele também tem um cabeçalho fixo, mas menor - menos de 80 pixels.

Pode-se dizer que é uma boa solução em grandes resoluções, pois permite uma navegação fácil e rápida. Em resoluções pequenas, o cabeçalho é fixo e ocupa uma quantidade considerável de espaço na tela do dispositivo. Eu recomendaria não usar um cabeçalho fixo no celular e, em vez disso, usar um ícone de hambúrguer fixo, que poderia abrir um menu quando tocado. Embora esse padrão não resolva um problema universal, ele libera uma grande quantidade de espaço. Em smartphones e tablets, o espaço pode ser muito precioso.

Erro comum nº 2: fontes finas

Fontes finas parecem estar em toda parte - vários aplicativos móveis nativos e sites modernos. Com o avanço da tecnologia de exibição e um Renderização aprimorado, muitos designers estão optando por usar fontes finas ou finas em seus designs. Eles são elegantes, novos e novos. No entanto, fontes finas podem afetar a legibilidade e se tornar um grande problema. Lembre-se de que nem todos verão seu site em um monitor que processa a fonte como deveria. Por exemplo, descobri que tipos finos são muito difíceis de ler no meu iPhone e iPad com tela retina. Antes de pensar sobre a aparência e a sensação de uma fonte, vamos voltar por um segundo.

Das Guias de interface humana da Apple :

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

Apple se refere a aplicativos móveis, mas o mesmo princípio pode ser aplicado a todos os sites. Como Colm Roche disse, legibilidade ≠ opcional , mas necessário para uma boa usabilidade. Não adianta colocar conteúdo em um site se a grande maioria de seus usuários mal consegue lê-lo, não acha?

Aqui estão os erros mais comuns que você deve conhecer antes de colocar seu tipo de letra em uma dieta:

Use tipografia fina porque sim

Como acontece com qualquer tendência, é perigoso fazer ou vestir algo porque outros o fazem. As fontes não devem apenas ter uma boa aparência. Em primeiro lugar, eles devem ser legíveis e um trampolim para uma boa usabilidade. A decisão de usar tipos finos apenas porque parece bom pode sair pela culatra. Nesta excelente palestra, Tipografia mais perfeita , Tim Brown fala sobre o ponto ideal onde a tipografia canta. Este ponto ideal é uma combinação de tamanho, peso e cor onde você estabelece a base do seu site.

Para ter certeza de encontrar uma boa fonte para o corpo do seu conteúdo que atinge esse ponto ideal, execute alguns testes em ambientes diferentes. O que nos leva ao seguinte erro que vale a pena evitar:

Não testando a legibilidade em dispositivos principais

O tipo fino pode ficar bem na tela e você pode não ter problemas para lê-lo, mas lembre-se de que você não é seu usuário . Invista em testes de usabilidade para descobrir se seus usuários reais estão satisfeitos com a tipografia nos principais dispositivos: desktops, laptops, tablets e smartphones. Conforme você faz mais testes móveis, faça com que seus participantes usem seu site em dispositivos móveis à luz do dia - seus usuários reais nem sempre terão as condições ideais para navegar em seu site. Se você tiver que ler algo em um dispositivo móvel em um dia ensolarado, provavelmente sabe como é difícil. Se você decidir usar fonte fina em seu site, há uma maneira simples de adaptá-la para usuários móveis. Aqui está uma solução que vi recentemente em um site:

Carvalho ele faz um bom trabalho de adaptação às necessidades de seus usuários - na resolução da área de trabalho, seu cabeçalho H1 é muito fino. Como o cabeçalho é grande e tem um bom contraste de cores, suspeito que a legibilidade não seja prejudicada. Em dispositivos móveis, onde o tamanho do cabeçalho é significativamente menor, o peso é um pouco mais grosso, o que ajuda na legibilidade. Claramente, eles encontraram problemas de legibilidade quando se trata de fontes finas em tamanhos pequenos e implementaram um peso de fonte mais pesado por meio consultas de mídia . Sua solução foi simples, mas muito eficaz.

Erro comum nº 3: baixo contraste

O baixo contraste se tornou uma tendência no design de interface do usuário nos últimos anos. Já falamos sobre fontes, que criam baixo contraste, mas há uma armadilha maior na qual você pode cair: uma combinação de fontes finas com baixo contraste de cor fará seus usuários coçarem a cabeça e pensarem. Perdemos a cabeça? . É claro que nem todos os contrastes baixos são ruins, ele pode até aumentar o apelo visual se você projetar com cuidado. Mas, no caso de todos os bugs de UX, é importante não exagerar e pensar na usabilidade.

Alguns grandes erros que você deseja evitar ao lidar com o contraste são:

Baixo contraste de cores no conteúdo do corpo

Embora o baixo contraste de cores não seja exclusivamente ruim, ele pode ter um impacto negativo na usabilidade do seu site e tornar o texto muito difícil para alguns de seus usuários. Se este artigo o inspira a aumentar o contraste de cor em pelo menos uma coisa, faça com que essa coisa tenha conteúdo corporal. É provavelmente a área menos favorável para fazer experiências.

Cool Springs Financial usa uma variante fina da Helvetica para o corpo do texto do conteúdo. E embora tenha uma aparência elegante e contribua para agradar os usuários do ponto de vista estético, é difícil de ler em muitas plataformas.

Fiz um teste rápido em um MacBook Pro com tela retina, bem como em um iPhone e iPad com tela retina. A imagem é do meu MacBook Pro, que revela problemas de contraste e legibilidade. Tive dificuldade em ler o texto do site em todos os meus dispositivos.

Não teste o contraste

Considere fazer alguns testes com o usuário para evitar problemas no final da estrada. Por si só, já ouvi alguns dos meus clientes e colegas dizerem 'Bojan, os testes de usuário são demorados e caros.' Eles podem ser, mas o que realmente não leva muito tempo para testar o contraste do seu site. Comece com o conteúdo do corpo e depois vá aumentando. Existe uma boa ferramenta chamada Colorable com a qual você pode definir um contraste de texto correto de acordo com as diretrizes de acessibilidade WCAG. Depois de saber que está usando o contraste correto, ajuste outras cores em seu site e execute testes de usuário rápidos para garantir que a maioria dos usuários terá uma experiência tranquila. Duvido que o baixo contraste cause uma rebelião, mas pode frustrar muitos de seus usuários.

Erro comum nº 4: apropriação de deslocamento

Outra tendência que temos visto muito ultimamente é a apropriação do deslocamento. Os sites que implementam essa tendência assumem o controle do rolagem (geralmente com JavaScript) e substitui uma função básica no navegador da web. O usuário não pode mais controlar a rolagem da página e não pode prever seu comportamento, o que pode facilmente causar confusão e frustração. É um experimento arriscado que pode prejudicar a usabilidade, então aconselho extrema cautela.

Se você está convencido a implementar isso, deve tentar evitar o seguinte erro:

Usando esta tendência só porque é popular

Alguns sites podem escapar assumindo o controle da rolagem, mas isso não garante que seu site também consiga. Tendências e padrões não podem ser seguidos e implementados cegamente. Por exemplo, estamos vendo muitos designers seguirem o que a Apple está fazendo com seu site e controle de rolagem de página a página, efeitos de paralaxe e imagens de alta resolução de vários dispositivos. A Apple tem suas próprias razões, seus próprios usuários, conceitos e conteúdo exclusivo. E como cada site tem problemas exclusivos, você também deve ter soluções personalizadas para esses problemas.

Não teste com usuários reais

Para evitar problemas ao pegar ideias ou padrões emprestados, certifique-se de testar os protótipos de seu site com seus próprios usuários. Testes de usabilidade simples revelarão se a implementação de rolagem controlada é viável ou não. Testar isso certamente responderá a muitas perguntas e fornecerá dicas sobre como você pode melhorar sua ideia. Sem o teste, você não terá como saber qual direção tomar, e desenvolver sites com base em suposições geralmente custa muito mais tarde.

Tumblr usa isso em seu site. Embora sua implementação também possa ser arriscada, parece que eles entendem seu público, seu conteúdo e conceito apóiam isso e que satisfizeram muitas das necessidades de seus usuários. Quando um usuário tenta descer, a rolagem é controlada pelo site, mas o usuário é levado para a próxima seção do site. O conteúdo é dividido em muitas seções ou blocos, que são fáceis de distinguir e grandes pontos indicadores são definidos à direita do janela de exibição . Como resultado, o casa parece um grande carro sobre o qual você está no controle, em vez de um site experimental com mente própria.

Erro comum nº 5: carrosséis ineficazes

Carrosséis são muito comuns na web há muito tempo. Embora eficazes, eles também podem ser um pesadelo se não forem projetados e desenvolvidos com cuidado. O pesadelo para seus usuários pode ser o fato de que eles estão tendo problemas para entendê-lo. O pesadelo para você pode ser o fato de seus usuários não estarem vendo o conteúdo importante em alguns dos slides do carrossel.

Carrosséis sem conteúdo importante: não é a maneira mais eficaz de usar o espaço em seu site Tweet

Muitos carrosséis que tenho visto têm desvantagens semelhantes. Algumas delas são:

Falta de valor real para os usuários

Qual é o valor real que o carrossel oferece para seus usuários? Feito da maneira certa, um carrossel deve se conectar com seus usuários e ajudá-los a cumprir suas metas de forma rápida e sem dor. Muitas vezes vejo carrosséis que podem não fornecer valor adicional, mas parecem ser decorações simples. Aqui está um teste rápido que você pode responder: faça um post-it e anote três benefícios que o carrossel pode oferecer ao usuário. Se você não conseguir pensar em três, há uma boa chance de que seu carrossel precise de mais trabalho.

Muitos ou poucos slides no carrossel

Muitos slides podem ter um efeito negativo sobre os usuários e eles podem simplesmente optar por ignorar o carrossel. O guru da usabilidade Jakob Nielsen sugere o seguinte:

Inclua cinco ou menos slides no carrossel, porque os usuários provavelmente não se conectarão com mais do que isso. Enquanto mais de cinco pode ser demais, menos de três pode indicar que uma solução melhor está sendo bem recomendada. Uma das premissas de um carrossel é o fato de que você precisa de muito conteúdo em um espaço muito pequeno, mas com apenas dois slides, por que não mostrar os dois ao mesmo tempo e esquecer de deslizar para um lado ou para o outro ao mesmo tempo ?

Setas; flechas anterior Y Next e os indicadores de slide não são tão óbvios e / ou acessíveis.

Certifique-se de tornar seu precioso conteúdo acessível. Informações importantes em um carrossel podem ser ocultadas se as setas Next Y anterior eles não são óbvios e grandes demais para um clique confortável. Ah, e não se esqueça da torneira - seus usuários de celular vão agradecer por isso.

Às vezes, não há setas em um carrossel e os indicadores de ponto são links para pular entre os skids. Lembre-se de que você precisará fornecer um área da torneira torná-lo agradável, clicável e grande (eu recomendo 35 x 35 px, pelo menos). Caso contrário, pequenos alvos levarão a uma prática de segmentação muito frustrante e os usuários deixarão seu site.

O site de Long Forest Foundation tem um carrossel de imagens no cabeçalho. Ter Reprodução automática e cinco fotografias são apresentadas nos slides. Setas; flechas anterior Y Next eles são pequenos e transparentes, o que os torna difíceis de ver e clicar ou tocar. Não há indicadores para o slide em que você está e nenhuma etiqueta mostrando o que a fotografia representa. As imagens não são links e funcionam apenas como decoração. Embora o carrossel possa ter algo de valor para estabelecer uma conexão com o usuário, certamente deixa muito a desejar.

conclusão

Listei os erros de experiência do usuário mais comuns em algumas tendências atuais da web. Se você implementou ou está pensando em implementar algum deles, espero sinceramente que este artigo tenha sido útil para você. Como um [UX Designer], use seu bom senso e não tenha medo de improvisar, mas sempre lembre-se de manter seus usuários em mente.

Sinta-se à vontade para iniciar uma conversa abaixo. Eu gostaria muito de ler sobre suas experiências, opiniões ou sugestões sobre como fazer as coisas melhor.