UI e UX estão presentes em todas interações que fazemos com um dispositivo, quer reparemos, quer não. Estão em plena vista de todos, embora muitas vezes não notemos; a verdade é que quando notamos, normalmente é exatamente por não estarem de acordo entre si. Aí entra a diferença entre as duas. Colocando em simples palavras: O design de interface de usuário é aquilo que o designer/cliente/empresa pensou do produto sem considerar a visão do usuário, já o design de experiência de usuário é aquilo que é mais notado quando o usuário realmente precisa e nota ao utilizar. Ou seja, a parte de UX deve necessariamente vir antes da UI, pois, antes de desenharmos o que o usuário irá utilizar, precisamos realmente, e de maneira mais fidedigna, saber qual a real necessidade do usuário. Quais caminhos ele instintivamente irá fazer. A parte “instintiva” vem de sua experiência prévia com outros produtos semelhantes, ou outra versão antiga do produto em que se está projetando no momento.

Saber o porquê fazemos design, no que acreditamos como princípio e por que seguimos certos processos é de extrema importância para a prática correta de UI Design.

Existem variados princípios e algumas escolas de design que foram e continuam sendo um grande farol para os designers. Um exemplo de escola que moldou o mundo moderno é a Bauhaus. A escola Bauhaus é uma pedra fundamental para o design que consideramos “clean”.

Sobre os princípios, listarei três entre os principais e darei exemplos de como o design é historicamente importante, comparando-os ao UI Design. Além dos abaixo, me guio também por: Funcionalidades originais x funcionalidades adicionais; Caminho desejado; Efeito do dígito esquerdo; Efeito de comprometimento; Seleção tendenciosa; Efeito “Ikea”; entre outros.

Principais princípios:

1) Mobile first e Clean Design

O conceito de pensar separadamente entre mobile e desktop é imprescindível. Nota-se que atualmente grande parte de acessos aos websites são feitos a partir de dispositivos móveis, celulares. Outra parte de acessos fica com o desktop e uma fração com tablets. Neste cenário, cada acesso deixa uma impressão única no usuário. Por essa razão, não podemos desenhar um site que atenda apenas uma dimensão de tela.

Cada layout deve cumprir seu papel designado. No início da era mobile, pode ter sido tentador criar algo de maneira que “atenda diferentes funções, com menor custo e um alto nível de performance” em um único design.
Devemos então fazer as seguintes questões sobre a tomada de decisão: O desempenho abaixo do normal é suficiente? O ambiente de performance é estável? A performance e os requisitos do usuário são similares? As funções podem ser modularizadas no design? O valor da “flexibilidade” justifica a troca de performance?

Caso a resposta de uma das questões for não, então não se justifica fazer um produto estático para todos.

Optar por fazer da maneira realmente flexível, ou seja, que se adapte corretamente às resoluções é a melhor saída. Uma das ferramentas que gosto e utilizo para isso é o Bootstrap.
O conceito de clean design também segue esse padrão, ajudando a dar ênfase no que mais importa. Por falar em ênfase, vamos ao segundo princípio.

2) Alinhamento

O alinhamento de todos os ítens na página devem sempre ser respeitados e afetam diretamente na percepção e resposta do usuário ao layout.

Um exemplo que darei é de design gráfico, porém se aplica também no digital: Resumidamente, as eleições do ano 2000 nos Estados Unidos foi decidida por 0.5% dos eleitores, sendo que a Florida foi o estado decisivo para o resultado. Acontece que descobriram fatos estranhos por lá, como votos duplicados e número improvável para candidatos desconhecidos. A causa do problema? A cédula de votação violou o princípio fundamental de alinhamento no design. Vejamos:

A imagem que vimos é da cédula. A Florida possui uma vasta população de idosos, que necessitam de maior usabilidade. As linhas no design podem parecer confusas e sinalizar o local errado em que o furo de votação deveria ser feito, causando assim a decisão favorável ao Bush em detrimento de Al Gore. Ou seja, devemos sempre observar o alinhamento de maneira que não fique dúvida no usuário. Consideremos sempre que a percepção humana segue um fluxo de cima para baixo e da esquerda para a direita (em países ocidentais).

3) Efeito das cores

As cores desempenham papel importante no design. Elas, intrinsecamente, geram uma série de efeitos cognitivos e comportamentais no cérebro do usuário.
Por exemplo: A cor vermelha tradicionalmente relacionada a perigo. Por isso, no design, a utilizamos quando queremos sinalizar ao usuário que uma ação pode ser definitiva (ex: cancelar, apagar). É também historicamente utilizada para sinalizar atração e criatividade (fogo), mas também agressão (sangue).

A cor preta é percebida como elegante, com maior valor e dominante. Reparemos nos exemplos de celulares, carros e sapatos: podemos perceber que os com maior valor se apresentam em cor preta, sendo que os de menor valor em cores mais chamativas.

Assim sendo, cada cor deve ser estudada de maneira a passar a mensagem certa ao usuário, considerando a disposição, função e predominação delas no layout.

UX é baseado em informações. Cada etapa é construída levando em conta o resultado das etapas anteriores. Listemos 7 etapas:

1 – Pesquisa inicial (observação de usuário)

2 – Identificar pontos críticos

3 – Criar perfil de usuário

4 – Ideação

5 – Cenários e storyboard

6 – Protótipo

7 – Plano de implementação

1 – Pesquisa Inicial

Parte do processo em que se coleta informações sobre as necessidades do usuário, considerando os seguintes pontos: Para quem estamos criando soluções em design? Quais são os pontos críticos? Como o usuário atualmente completa a tarefa?

A melhor maneira de coletar informações de usuários é fazendo a pesquisa diretamente onde os usuários fazem as tarefas em que se empreende a futura solução. Às vezes isso significa pegar um bloco de notas e ir até o usuário.

2 – Identificar pontos críticos

Técnica para juntar as informações para extrair os verdadeiros pontos críticos, ou seja, as coisas que dificultam e são um problema para o usuário atualmente.

3 – Criar o perfil de usuário

Os perfis aqui criados são fictícios, porém realistas e detalhados na descrição dos usuários do produto. Eles provém uma base para discutir, argumentar e concentrar várias partes de informações em descrições-chave dos principais usuários. O perfil pode levar informações como atributos necessidades e objetivos.

4 – Ideação

Esta fase pode ser considerada como brainstorm. Nela, temos total liberdade de discutir e apresentar ideias que servem para sanar as necessidades levantadas no processo anterior. É essencial para dar noção à todos envolvidos, dando voz aos membros da equipe que são bem-vindos em sugerir ideias.

5 – Cenários e storyboard

Esta fase serve para colocar as coisas nos trilhos, uma vez que a etapa anterior estava livre para ideias. Aqui, pegamos as ideias e convertemos em cenários. Os cenários permitem descrever um futuro ideal, em que os usuários consigam realizar as tarefas sem problemas.

O storyboard é a versão visual do cenário e serve para planejar as interações entre usuários, sistemas e outros indivíduos.

6 – Protótipo

Protótipos levam em consideração todas etapas anteriores para projetar como o produto final deverá ser. Pode ser feito com papel e caneta, para facilitar alterações e conseguir Feedback instantâneo dos participantes.

7 – Plano de implementação

Aqui, levamos em conta tudo o que foi feito anteriormente para criar a interface de maneira que seja usual, mapeando as diferentes capacidades, priorizando e observando as relações entre diferentes itens. Levando ao desenvolvimento de algo utilizável e recolhendo feedback já nas primeiras etapas de teste de usabilidade, teste de versão beta, entre outros antes da publicação.

A acessibilidade é de grande importância para que todos tenham facilidade em utilizar o produto (site, sistema ou app), especialmente pessoas com necessidades especiais e específicas. Entre essas necessidades, podemos elencar pontos importantes: Visual, auditivo, mobilidade e cognitivo.

Assegurar que a acessibilidade esteja presente no projeto é um esforço que deve começar desde a fase de pesquisa inicial, levantando tais necessidades. Práticas recomendadas divididas em necessidade:

Visual: Para garantir o bom funcionamento de ferramentas já utilizadas para este grupo de pessoas (ou seja, já previamente instaladas no dispositivo do usuário), precisamos deixar claro no layout o que cada objeto é, como ele é chamado e o que ele faz. Cada elemento visual precisa também de uma representação em texto, chamado de “texto alternativo”.

Auditivo: Considerando este fator, precisamos inserir informações em formato mais visual, como por exemplo legendas em vídeos ou transcrição de áudio.

Mobilidade: Pessoas com mobilidade reduzida frequentemente utilizam o teclado para navegar. É necessário que com o uso do teclado elas possam utilizar o site/sistema. Ou seja, algumas ações como clicar e arrastar um objeto se transformam em uma dificuldade para este grupo.

Cognitivo: Considerando este grupo, páginas e sites devem se comportar de maneira instintiva e previsível. Escrevendo os textos (labels, headings, descrições, etc) com linguagem simples. A navegação deve ser consistente. Devemos informar, por exemplo, quantos passos são necessários em determinado processo.

Existem ferramentas online que ajudam de maneira significativa no quesito de acessibilidade. Atualmente, eu utilizo o Userway e o VLibras.

A avaliação de um layout e sua eficácia se dá por conduzir testes de usabilidade. Uma das formas de se fazer isso é aplicando guia de heurística. O padrão comum é o de Nielsen, onde dez pontos devem ser observados:

1 – Visibilidade do status do sistema
2 – Correspondência entre o sistema e o mundo real
3 – Controle e liberdade para o usuário
4 – Consistência e padronização
5 – Prevenção de erros
6 – Reconhecimento em vez de recordação
7 – Eficiência e flexibilidade de uso
8 – Estética e design minimalista
9 – Ajude os usuários a reconhecer, diagnosticar e recuperar erros
10 – Ajuda e documentação