Será Que Todas As Tendências Valem A Pena? Os 5 Erros Mais Comuns De UX Que Um Designer Comete

UX Design | 15th Março 2017

Enquanto web designers estamos constantemente a tentar criar uma ótima experiência para o utilizador e a ajudar os utilizadores a atingir os seus objetivos. No nosso trabalho quotidiano, recorremos a todos os tipos de padrões comuns e de tendências. Na minha experiência, verifiquei como esses padrões e tendências conseguem facilmente levar tanto designers/developers como clientes na direção errada. Não é segredo que de vez em quando todos nos fascinamos com coisas que são, ou parecem ser, cool. Admito que já caí nessas armadilhas em várias ocasiões - optei por criar algo visualmente apelativo, sacrificando a sua usabilidade. Porque é que o fiz? Presumi que o utilizador teria um momento de fascínio, ficando magicamente envolvido. Tinha esperança que este fascínio tivesse um impacto duradouro. Caí na realidade quando percebi que os meus utilizadores estavam com dificuldade em perceber a interface que tinha criado, da qual estava orgulhoso. Por vezes, aprendemos da pior maneira.

Esta lição permitiu-me evitar que os utilizadores tivessem uma má experiência de utilização. Devemos sempre perguntar-nos o que está por detrás da superfície brilhante da interface que estamos a criar. Antes de adotar quaisquer padrões ou tendências, compensa pensar no valor que podem proporcionar. Como disse Kate Rutter, “feio mas útil, é melhor do que bonito mas inútil”.

Não me interpretem mal - não estou a sugerir que não se devam criar coisas bonitas - estou a sugerir que devemos aspirar a criar coisas úteis e bonitas. A chave para os padrões e tendências é encontrar um equilíbrio entre o que parece bom e o verdadeiro valor que está por detrás.

Neste artigo, irei listar vários erros comuns cometidos na experiência de utilizador que observo no dia a dia. Apesar de não serem todos maus, podem ser perigosos quando não são implementados cuidadosamente. Irei também partilhar algum insight sobre como se pode melhorar a facilidade de utilização ao implementar essas tendências, ou até mesmo sugerir uma utilização alternativa. Sem mais demora, vamos então apresentar a lista.
 

 

Erro Comum #1: Cabeçalhos Fixos e Grandes


Hoje em dia vêem-se cada vez mais cabeçalhos grandes e sticky - branding blocks e menus com posições fixas, que ocupam uma quantidade significativa da janela de visualização, ficam coladas ao topo, e geralmente bloqueiam o conteúdo por debaixo delas. Já vi cabeçalhos em websites de alta produção com mais do que 150 pixels em altura, mas até que ponto têm valor? Posso estar a exagerar um pouco, mas cabeçalhos grandes e fixos relembram-me as temidas, e agora ancestrais, frames HTML. Elementos fixos podem ter, de facto, vantagens, mas é necessário ter cuidado ao lidar com eles - há muitos aspetos importantes a ter em consideração. Ao implementar cabeçalhos sticky, tenha em mente alguns erros comuns a evitar:

DEMASIADO GRANDES PARA SEREM BONS

Se a decisão de criar um cabeçalho grande e fixo já foi tomada, teste-o para descobrir se o “grande” é demasiado grande. Assegure-se que não enche o cabeçalho com demasiado conteúdo, o que resultará num elemento muito vertical. Com o cabeçalho fixo aplicado, navegar deve permanecer confortável e rápido para os utilizadores. Se tiver dúvidas em relação ao tamanho elevado do cabeçalho, tente diminuí-lo, sem sacrificar demasiado a atratividade visual, bem como a presença da marca. Falhar ao tentar encontrar um equilíbrio pode resultar numa experiência quase claustrofóbica para os utilizadores, deixando uma margem muito pequena para o conteúdo principal.

No ano passado, trabalhei num projeto no qual o cliente insistiu em ter uma barra de navegação sticky nas resoluções do desktop. Apesar de a barra não estar especialmente vertical, receei que alguns utilizadores pudessem ficar com a sensação claustrofóbica de estarem a ser postos dentro de uma caixa. O meu trabalho era simples - ao conferir uma ligeira transparência à barra de navegação utilizando o CSS, os utilizadores passaram a conseguir ver através da barra, o que fez com que a área de conteúdo parecesse maior. Aqui está a pequena parte do código do CSS - por isso, porque não experimentar e ver se resulta para si também?



Aqui está um exemplo que encontrei recentemente na ATP’s player profile page on Roger Federer.
 



O seu cabeçalho fixo tem uma altura de aproximadamente 110px, e ao fazer scroll para baixo na página, a subnavegação aparece, tornando o cabeçalho com 160px de altura. O que constitui mais do que 30% da altura total da página no meu MacBook Pro com o doc aberto.

NÃO RESOLVER O PROBLEMA NUM APARELHO MÓVEL

Garantidamente, muitos utilizadores irão utilizar um ecrã enorme, e os sticky menus podem ser uma vantagem em resoluções enormes, mas o que acontece com resoluções mais pequenas e o mundo portátil? Mantenha em mente que uma percentagem significativa dos utilizadores irá usar um aparelho de resolução reduzida. Por isso, para aparelhos portáteis, a posição fixa muito provavelmente não será a melhor ideia. Felizmente, existem técnicas responsivas que nos permitem criar uma solução diferente e permanecer com o sticky exclusivamente em grandes resoluções. A abordagem que prioriza os aparelhos móveis providenciará muitas respostas - comece com a resolução de aparelhos portáteis, apenas com o conteúdo essencial, e continue o trabalho a partir daí.

Coffee with a Cop também apresenta o cabeçalho fixo, mas significativamente mais reduzido - menos de 80 pixels.



Isto é, seguramente, uma boa opção para grandes resoluções, na medida em que permite uma navegação rápida e fácil. Em resoluções pequenas, o cabeçalho também se encontra fixo e ocupa uma quantidade considerável da janela de visualização. Sugiro que não recorra a um cabeçalho sticky para aparelhos portáteis, e recomendo o sticky hamburger icon, que abre o menu quando pressionado. Apesar deste padrão não ser uma solução universal, liberta uma parte significativa de espaço. Nos smartphones e tablets, o espaço é fundamental.

 

Erro Comum #2: Fontes Estreitas


Fontes estreitas estão em todo o lado - inúmeras apps de telemóveis e websites modernos. Com a tecnologia dos ecrãs a avançar e a melhorar, muitos designers optam por fontes estreitas (ou leves) nos seus designs. São elegantes, frescas, e fashion. No entanto, o estilo estreito pode originar problemas na facilidade de utilização. Um dos objetivos principais de qualquer texto é ser legível, e o estilo estreito pode afetar grandemente essa legibilidade. Mantenha presente que nem toda a gente irá visualizar o website num aparelho que favoreça o estilo estreito. Por exemplo, verifiquei que o estilo estreito é extremamente difícil de ler no meu iPhone e iPad com um visor de retina. Antes de se preocupar com a aparência e o poder de atração da fonte, pense no assunto primeiro.

Retirado do Apple Human Interface Guidelines:

Em primeiro lugar, todos os textos devem ser legíveis. Se os utilizadores não conseguem ler as palavras na sua app, não interessa o quão esteticamente agradável a grafia é.

A Apple refere-se a aplicações de telemóvel, mas os mesmos princípios aplicam-se a todos os websites. Como disse Colm Roche, legibilidade ≠ opcional, mas é necessária para boa utilização. Não faz sentido disponibilizar conteúdos num website se a maioria dos utilizadores não os consegue ler.

Aqui se seguem alguns dos erros mais comuns que deve ter em atenção antes de colocar o seu estilo em dieta:

UTILIZAR ESTREITO PARA O BEM DO ESTREITO

Como acontece com todas as tendências, é perigoso aplicá-las simplesmente porque outros as estão a aplicar. As fontes não servem apenas para serem estéticas. Em primeiro lugar, devem ser legíveis e contribuir para uma boa facilidade de utilização. Tomar a decisão de usar um estilo estreito simplesmente porque é estético, é meio caminho andado para correr mal. Na sua excelente apresentação, More Perfect Typography, Tim Brown refere um tamanho e tipo de fonte ideal. Esta combinação ideal de tamanho, peso e cor é onde estabelece a base do seu website.

Para assegurar que encontrou esse estilo ideal, execute vários testes em diferentes ambientes. O que nos leva ao próximo erro a evitar:

NÃO TESTAR A LEGIBILIDADE EM TODOS OS APARELHOS MAIS COMUNS

O estilo estreito pode parecer apelativo no seu aparelho e até pode não ter dificuldade ao lê-lo, mas tenha em consideração que isso pode não ser válido para os seus utilizadores. Invista em testes de utilização para descobrir se os utilizadores estão verdadeiramente satisfeitos com a grafia em todos os aparelhos mais comuns: computadores portáteis, fixos, tablets e smartphones. Enquanto efetua os testes nos aparelhos móveis, ponha os participantes a utilizar o seu website nos dispositivos móveis à luz do dia - os verdadeiros utilizadores vão beneficiar sempre de condições ótimas de utilização. Se já teve alguma coisa para ler no seu aparelho móvel num dia de sol, provavelmente sabe o quão difícil isso pode ser. Se decidir utilizar uma fonte estreita no seu website, há uma maneira muito simples de a adaptar os dispositivos dos utilizadores. Vou então mostrar a solução que vi recentemente num website:



Oak faz um bom trabalho a adaptar às necessidades dos utilizadores - na resolução do desktop, o seu cabeçalho H1 tem uma fonte de peso muito reduzido. Dado que o cabeçalho é grande e apresenta um bom contraste de cor, suspeito que a legibilidade não é sacrificada. Nos dispositivos móveis, onde o tamanho do cabeçalho é significativamente mais pequeno, o peso é ligeiramente maior, o que ajuda à legibilidade. Claramente, têm-se verificado problemas na legibilidade em fontes com tamanhos reduzidos, como tem sido discutido nas perguntas nos media. A solução é simples, mas muito eficaz.

 

Erro Comum #3: Pouco Contraste


Contraste de cor reduzido tem vindo a tornar-se, recentemente, de certo modo numa tendência no user interface design. Já falámos de fontes estreitas, que criam um tipo de contraste reduzido, mas pode cair-se numa armadilha pior - a combinação de um estilo estreito com um contraste de cor reduzido, que irá levar o utilizador a pensar que perdeu a cabeça. Claro que nem todo o contraste reduzido é mau. Até pode conferir uma atração visual se for criado com cuidado. Mas, como ocorre com todos os erros de UX, é importante não exagerar e manter sempre a facilidade de utilização em mente.

Aqui se seguem alguns dos erros mais comuns que pode evitar ao lidar com o contraste:

CONTRASTE DE COR REDUZIDO EM BODY COPY

Apesar de o contraste de cor reduzido não ser, por si só, necessariamente mau, pode ter um impacto negativo na facilidade de utilização do seu website, tornando-o muito difícil de ler para alguns utilizadores. Se este artigo o inspirou a aumentar o contraste de cor numa só coisa, transponha-o para o corpo do trabalho. É muito provavelmente a área menor favorável para experimentar.

Cool Springs Financial utiliza uma variante estreita do Helvetica para o corpo do texto. Apesar de parecer elegante e contribuir para uma interface apelativa, é extremamente difícil de ler em várias plataformas.



Fiz um teste rápido num MacBook Pro com ecrã de retina, bem como num iPhone e iPad também com ecrã de retina. O screenshot do meu MacBook Pro revela problemas a nível do contraste e da legibilidade. Tive dificuldade em ler o texto do website em todos os meus aparelhos.

NÃO TESTAR O CONTRASTE

Considere efetuar testes para evitar problemas futuros. Oiço frequentemente clientes e colegas a defender que os testes ocupam demasiado tempo e requerem demasiado dinheiro. O que pode ser verdade, mas não são necessários testes muito extensos para avaliar o contraste no seu website. Comece pelo corpo do texto e trabalhe a partir daí. Existe uma ferramenta útil chamada Colorable que ajuda a definir o contraste de texto adequado de acordo com as diretrizes de acessibilidade WCAG. Assim que souber que está a utilizar o contraste adequado, ajuste as outras cores do seu website e faça testes de utilizaçao para garantir que está tudo correto. Duvido que o contraste reduzido seja suficiente para causar uma revolução, mas pode frustrar muitos utilizadores.

 

Erro Comum #4: Scroll Hijacking


Outra tendência que se vê muito hoje em dia é o apoderamento (hijack) do scroll. Websites que implementam esta tendência apoderam-se do controlo do scroll (geralmente com o JavaScript), anulando uma função básica do web browser. O utilizador deixa de ter controlo sobre o scroll na página, sendo impossível prever o seu comportamento, o que pode facilmente levar a confusão e frustração. É uma experiência arriscada, que pode prejudicar a utilização, por isso recomendo cuidado.

Se está decidido em implementar o scroll hijack, deve evitar os seguintes erros:

UTILIZAR O HIJACK SIMPLESMENTE PORQUE ESTÁ NA MODA

Alguns websites conseguem suportar o scroll hijack, mas não há garantias que o seu consiga. As tendências e os padrões não podem ser seguidos e implementados cegamente. Por exemplo, hoje em dia vemos muitos designers a seguir a página de apresentação da Apple com scroll hijack, originando problemas a nível dos efeitos e das imagens de alta resolução de vários dispositivos. A Apple tem os seus motivos, e os seus utilizadores, bem como o seu conceito e conteúdo únicos. Dado que qualquer website tem os seus próprios problemas, também deve criar respostas para esses mesmos problemas.

NÃO TESTAR EM VERDADEIROS UTILIZADORES

Para evitar problemas ao utilizar ideias e padrões, assegure-se que testa o protótipo do seu website em utilizadores. Simples testes de utilização irão revelar se a implementação do scroll hijack é ou não viável. Testar irá garantidamente responder a muitas questões e providenciar pistas sobre a melhor forma de potencializar a sua ideia. Sem testes, não há maneira de saber como se deve proceder, e corre o risco de desenvolver o seu website com base em pressupostos que são frequentemente prejudiciais a longo prazo.



O Tumblr utiliza scroll hijacking na sua homepage atual. Esta implementação poderia ser arriscada, mas parece que perceberam o seu target, o conteúdo e o conceito que o suporta, e que foram capazes de responder à maioria das necessidades dos seus utilizadores. Quando o utilizador faz uma tentativa de scroll à página, o scroll é hijacked pelo website, mas o utilizador é rapidamente levado para a secção seguinte da homepage. O conteúdo encontra-se dividido em diversas secções, ou blocos, facilmente distinguíveis. Como consequência, a homepage parece um enorme carrossel que podemos controlar, ao invés de um website experimental com vontade própria.

 

Erro Comum #5: Carrosséis Ineficazes


Os carrosséis são bastante comuns na internet, e têm vindo a ser desde há muito tempo. Apesar de conseguirem ser eficazes, também podem tornar-se num pesadelo se não forem concebidos e desenvolvidos com cuidado. O pesadelo, para os nossos utilizadores, pode ser o facto de eles terem dificuldades em compreendê-lo. O pesadelo, para si, pode ser o facto de os seus utilizadores não estarem a ver o conteúdo relevante nalguns dos lados do carrossel.

Carrosséis sem conteúdo importante não são a maneira mais eficaz de ocupar o espaço no seu website.

Muitos dos carrosséis que vejo têm desvantagens semelhantes. Aqui estão algumas delas:

FALTA DE VALOR REAL PARA OS UTILIZADORES

Qual é o valor real que os carrosséis oferecem aos utilizadores? Se for bem concebido, um carrossel deve envolver os seus utilizadores e ajudá-los a alcançar os seus objetivos rápida e facilmente. Vejo frequentemente carrosséis que não oferecem qualquer valor adicional, parecendo apenas justificáveis por razões meramente estéticas. Aqui está o um teste rápido que pode fazer: escreva num post-it três benefícios do carrossel para o utilizador. Se não conseguir pensar em três, o mais provável é o seu carrossel necessitar de ser mais trabalhado.

SLIDES  A MAIS OU A MENOS NO CARROSSEL

Demasiados slides podem ter um impacto negativo nos utilizadores e eles podem simplesmente escolher ignorá-lo. O guru da utilização, Jakob Nielsen, sugere o seguinte:

“Inclua cinco ou menos frames num carrossel, dado que é pouco provável que os utilizadores se envolvam se forem mais do que isso. Enquanto que mais do que cinco podem ser demasiados, menos do que três pode ser indicador de que uma alternativa seria melhor. Uma das premissas para o carrossel é o facto de ser necessário incluir muito conteúdo num espaço pequeno, mas com apenas dois slides, porque não mostrar ambos os slides em simultâneo?”

OS INDICADORES DE SETAS E SLIDES DE SEGUINTE E ANTERIOR NÃO SÃO ÓBVIOS E/OU ACESSÍVEIS

Assegure-se que está tornar o seu conteúdo acessível. Informação importante num carrossel deve permanecer escondida se as setas seguintes e anteriores não são óbvias ou grandes o suficiente para um click confortável.

Por vezes, não existem setas no carrossel, e os pontos do indicador são links para saltar entre slides. Lembre-se que precisa de oferecer uma boa e grande área para clicar (recomendo 35x35px, no mínimo). Caso contrário, os pequenos targets podem originar uma prática de targets muito frustrante e a consequente saída do seu website.


O website da Floresta Longo Foundation  tem um carrossel de imagens no cabeçalho. Tem slides em autoplay durante cinco fotografias. As setas de seguinte e anterior são pequenas e transparentes, o que as torna difíceis de encontrar e de clicar. Não há indicadores do slide em que se encontra, nem legendas a identificar as fotografias apresentadas. As imagens não são links e servem apenas para efeitos decorativos. Apesar de o carrossel proporcionar algum valor ao envolvimento do utilizador, deixa muito a desejar.


 

CONCLUSÃO


Já listei vários erros comuns de UX em algumas das tendências atuais. Se as implementou ou está a pensar implementar, espero seriamente que este artigo lhe tenha proporcionado algo que considere útil. Enquanto UX designer, utilize o seu bom senso e não tenha medo de improvisar, mas lembre-se sempre de ter os seus utilizadores como preocupação principal.
 

Publicado originalmente em www.toptal.com.

Se está à procura da melhor maneira de implementar UX na sua empresa, permita que a nossa equipa o ajude: contacte-nos.

Voltar