Opinião. 7 Jan 2016

UI Design - Patterns

A consistência visual é um dos fatores a ter em conta na construção de uma aplicação web, pois confere ao utilizador a sensação de confiança necessária para criar valor. Ao introduzirmos o fator familiaridade, aumentamos a usabilidade percebida pelos utilizadores e reduzimos o atrito cognitivo da interface.

Quando falamos de consistência visual é quase impossível não mencionar a influência que os Patterns têm no seu desenvolvimento.
Os UI Patterns ou padrões de interface, de uma forma generalista, são utilizados para solucionar problemas de usabilidade. Quando corretamente aplicados estabelecem significados e transmitem sinais aos utilizadores sobre uma determinada função.

O que são Affordances, Perceived Affordances e Signifiers?
Affordances
é o que o objeto/produto/site pode fazer. Perceived Affordances é o que os utilizadores acham que pode fazer e Signifiers são as pistas visuais usadas para sugerir função.
Todos os padrões são compostos por Signifiers (indicadores visuais) que por sua vez ajudam os utilizadores a perceber como devem interagir com os elementos da interface, tornando o site mais intuitivo.
A eficácia das Perceived Affordances depende dos Signifiers aplicados.

Existem diferentes tipos de Signifiers, com finalidades distintas organizados em 5 grupos:
Explícitos -
"enviar o seu comentário" ou "clique aqui";
Padrão -
"play: ícone triângulo", "pesquisa/zoom: ícone lupa" ou "voltar à homepage: logótipo";
Ocultos -
funções ocultas reveladas só em mouseover;
Metafóricos -
"email: envelope";
Negativos -
"funções inativas: o elemento apresenta cores desvanecidas".

Os padrões de interface são pontos de referência, isto é, são modelos de linguagem comum. Representam as melhores práticas de design e funcionam como base criativa, permitindo ser inovador mas sem alienar os utilizadores. Os Patterns ajudam na interação e estrutura do site e funcionam como guias na navegação, motivando os utilizadores a interagir com o produto e a partilhar a sua experiência.

Como aplicar os Patterns adequados ao seu site?
Existem milhares de padrões e a sua seleção nem sempre é linear. No entanto existem alguns passos que podem ajudar a simplificar o processo:

  • Determinar quais os problemas que precisam de ser resolvidos, seja porque os utilizadores não se registam ou porque navegam no site mas no final não pedem nenhum orçamento, etc...;
  • Pesquisar como outros negócios resolvem problemas similares. Uma investigação a outras aplicações web não deve ser encarada como algo negativo pois estamos a falar de padrões de interface e não da identidade de uma marca. Por exemplo, no caso de problemas com o registo de utilizadores alguns sites permitem login através do Facebook ou de outras redes sociais, proporcionando um acesso ao registo mais imediato;
  • Detalhar e adaptar os padrões ao seu negócio. Existem vários sites que solucionam o mesmo problema de modos diferentes, ou seja, cada caso deve ser personalizado. Permitir o login através de uma rede social pode ser uma boa estratégia mas para os seus utilizadores é mais eficaz escrever "Registe-se através do Facebook" ao invés de colocar um botão com o ícone do Facebook em baixo de um título que diz "Registe-se Aqui".

Os UI Patterns são a "safe zone" da consistência visual, e consequentemente uma poderosa ferramenta na otimização de interfaces.
Deixo aqui uns links onde estão compilados alguns recursos: UI Patterns; PatternTap; Six UX; Capptivate.

Catarina Acúrcio