uiux.pt

5 erros de Visual Design que destroem a User Experience


User Experience e Visual Design, geralmente não são duas disciplinas que se vejam lado a lado, mas como disciplinas complementares. User Experience, enquanto um gigante guarda-chuva que envolve um conjunto de outras disciplinas como a Arquitectura da Informação, Content Strategy, Usabilidade, User Research, entre tantas outras, é comumente vista como a disciplina de estratégia dentro daquilo que é todo o processo de desenhar um interface. Visual Design, o filho do design gráfico, está mais preocupado com os ícones, as cores, as imagens, a tipografia e pouco é associado à experiência do utilizador. E é aqui que muitos erros e falhas na User Experience começam, conduzindo os utilizadores a deixarem de ler os artigos, a abandonar o carrinho de compra ou a não voltar a usar a APP. Aqui listamos cinco erros comuns no Design Visual que têm um gigante impacto na Experiência do Utilizador.

1. Tipografia Inadequada

Longe vão os anos em que só tinhamos as Web Safe Fonts. Contudo, nem toda a tipografia que encontramos disponível online é a mais adequada ao uso digital. Garantir a leitura, não só através do tamanho mínimo, mas também das características da família tipográfica é o desafio.
Dois exemplos que fazem toda a diferença:

tipografia_baseline Exemplo: Três fontes serifadas, ao mesmo tamanho têm x-heights distintos, logo vão ter uma legibilidade diferente entre si.

leading_tipografia

Famílias tipográficas com maior “x-height” são de melhor leitura.

kerning_tipografia

Um kerning que permita um bom ritmo de leitura, sem ser demasiado apertado – o que em alguns dispositivos móveis torna a leitura impossível – ou sem ter demasiado espaço, o que, por exemplo, num campo de formulário pode induzir o utilizador a acreditar que introduziu um espaço, onde na verdade isso não aconteceu

 

2. Hierarquia Visual pouco clara

Elementos com importância diferente devem ter pesos visuais diferentes. Blocos de elementos devem ter espaçamentos bem marcados para que não haja prejuízo na leitura.

hierarquia_visual_1

No exemplo acima, num scroll rápido num dispositivo móvel, não sabemos que imagem corresponde a que notícia, nem qual é o título ou o lead da notícia, o que pode levar a erros de interpretação por parte do utilizador.

hierarquia_visual_2

Em baixo, onde a hierarquia visual está mais trabalhada, a identificação dos blocos de notícias torna-se mais inequívoca.

 

3. Uso de Imagens

Nem é preciso usar o chavão, para entender que uma imagem vale mais que mil palavras mas, quando estamos a falar de sites responsivos, a mesma imagem é visualizada em muitos tamanhos. É importante garantir que, seja qual for o dispositivo, a imagem nunca deve ser escalada mas adaptada ao espaço disponível. Deve haver ainda uma maior preocupação ao usar máscaras, para que o conteúdo relevante não seja “escondido” em alguns dispositivos.

Por exemplo uma imagem como esta deve ter uma máscara à esquerda e nunca ao centro.

mascaras_imagens

4. Inconsistência entre Desktop e Mobile

Quem é que já não ouviu por aí, nas lides de desenhar digital, que as boas práticas é que se faça “mobile first“. Desenhar para o dispositivo mobile em primeiro lugar ajuda a organizar e priorizar conteúdos, a garantir uma boa user experience em dispositivos com forte restrição de espaço e a pensar em primeira mão em todos os constragimentos técnicos que as nossas soluções possam ter. Contudo, o utilizador nunca deve sentir que a experiência em mobile é totalmente distinta da experiência em desktop.
Alguns tópicos a ter em conta:

Organização

A organização dos elementos deve estar optimizada ao dispositivo e não ser completamente diferente entre plataformas.

Manter os elementos Visuais

Se em desktop os botões eram azuis, em mobile, devemos manter exatamente os mesmos elementos visuais e nunca cair na tentação de usar os elementos visuais de um ou outro sistema operativo de smartphone.

Funcionalidades

Às vezes temos que organizar a informação em mais passos em mobile do que em desktop, mas, se o utilizador consegue fazer uma compra em desktop, também deve conseguir fazê-la nos restantes dispositivos.

 

5. Fraco Contraste

Grande parte das vezes associamos o termo contraste ao uso da cor entre elementos gráficos, e descuidamos detalhes como o contraste entre a cor de fundo e a cor do texto num mesmo elemento. Pode parecer uma questão de detalhe, mas pode ser um detalhe que compromete toda a leitura de um site. Monitores diferentes têm calibrações de cor diferente, o que entre um texto cinzento em cima de uma caixa cinzenta, pode ser muito grave nalguns dispositivos. Em dispositvos mobile, temos que ter em conta que a percepção da cor é também afetada pela posição do utilizador face ao ecrã e por incidência de fontes luminosas. Em caso de dúvida, já usaram o color check? https://webaim.org/resources/contrastchecker/

contraste_visualdesign

Catarina Garcia


Catarina Garcia

Deixar um comentário