UX e UI: As duas peças mais importantes em um design
É recorrente observar que no atual momento do Web Design boa parte dos tópicos relacionados foca em duas siglas importantes: UI (User Interface) e UX (User Experience).
A UX é a parte mais abstrata de um design. Ela trata do que o usuário sente ao acessar um site. Este controle da experiência do visitante é feito pela disposição de elementos gráficos no site, e, consequentemente, o princípio por trás do visual do site é a UI.
Podemos definir a User Interface como o que o usuário de fato vê no seu website, ou seja, isto abrange os elementos gráficos como botões, títulos, posicionamento de menus, apresentação de ações possíveis e toda a parte “visível” para o usuário. A UI representa variadas linhas de programação (html, css, javascript são exemplos de linguagens de programação usadas para sites) para que qualquer usuário possa utilizar, e esta “tradução” deve seguir certos princípios, dos quais dissertaremos abaixo.
A UX é obtida por meio da UI, então, no momento de projetar a disposição de elementos de um site já deve ser feita tendo em vista a experiência do usuário.
Dica: Leia também nosso artigo: Cuidados que você deve ter ao criar design de sites
Pré-Design
Faça um checklist!
A UX (que torna um site diferenciado e fideliza o usuário) é obtida por meio da UI, então, no momento de projetar a disposição de elementos de um site já deve ser feita tendo em vista a experiência do usuário.
Sabendo que uma UI de qualidade requer certos itens (que veremos abaixo!), é recomendável fazer um checklist antes mesmo de iniciar-se um design. Uma ferramenta que ajuda a administrar checklists é o Trello, que também é um grande aliado na organização da sua rotina profissional.
O checklist do Trello é uma ferramenta importante para a organização na hora da criação.
Saiba interpretar o briefing do seu cliente
O briefing do seu cliente deve ser suficientemente claro, e, principalmente, conter referências de site que agradam a ele. Você pode fazer um site incrível e impecável, mas por fim, pode acabar não entregando a experiência que o seu cliente deseja. A utilização de personas também auxilia na precisão do designer na hora da criação - é muito mais seguro saber que tipo de público alvo deve ser atingido na hora de dispor elementos. Por exemplo, um site que visa pessoas mais velhas, com menos experiência dentro da internet, deve ter prioridade total na clareza, enquanto um site para um público geek pode ser mais visual. Essas decisões devem ser tomadas antes do design, tendo como base um briefing claro e coeso.
No meio do processo de design
Clareza
A clareza talvez seja o mais importante dos pontos dentro da UI. A intuição deve ser o suficiente para fazer com que o usuário ache o que procura no seu site. O cuidado na seleção dos ícones, dos textos, do posicionamento e destaque das CTAs (Call to Action) é a principal preocupação. Outra dica interessante é que os hovers sejam claros para sinalizar um objeto clicável dentro de um site. Também é importante dosar da forma correta a clareza, e, por meio do design, encontrar soluções que aliem clareza e leveza, pois o excesso de informações, principalmente textuais, prejudica a interface e a experiência do usuário. A pergunta a ser respondida no item clareza é “o que isto faz”. A falta de clareza pode acabar anulando todo o trabalho de indexação, adwords e geração de leads para o site, pois a utilização do site é comprometida.
Um exemplo de clareza é o site da Outlook, que tem acessos rápidos e claros ao longo da página principal.
Dica: O que são leads?
Responsividade e Feedback
O segundo item na escala de importância da UI é a responsividade. A responsividade não abrange apenas a exibição otimizada para diferentes tipo de tela e usuário, mas também quanto a ação executada dar um feedback rápido do que foi solicitado. Por exemplo, uma barra de carregamento num e-mail que acabamos de clicar o botão de envio nos dá um feedback de que a ação está sendo carregada. Provavelmente, se não tivéssemos uma resposta sobre a ação de clicar no botão de envio do e-mail, a maioria dos usuários, principalmente os com conexões mais lentas, teriam uma confusão quanto a funcionalidade do site.
Um exemplo de feedback da ação realizada é o carregamento de um e-mail.
A responsividade quanto ao dimensionamento de telas também é um aspecto importante: mais de 80% dos acessos a internet no Brasil são realizados em celular ou tablet, ou seja, é vital ter uma versão do site pensada e com as características que um dispositivo mobile pede. Estas características abrangem um menu no formato hamburguer, que já é um padrão do mobile, a adaptação do conteúdo do site para um sentido mais vertical, o reajuste do tamanho de fontes e ícones e uma redução no tamanho de carregamento do site são itens importantes para uma boa experiência mobile.
Dica: 4 razões para sua empresa ter um site responsivo
Eficiência e Atratividade
Seguindo na análise de UI, podemos destacar a eficiência das ações do site. Deve-se observar o perfil do público alvo do site, e, desta forma, oferecer as opções mais utilizadas por ele ao menor número de cliques de distância possível. Por exemplo, se um site tem uma direção mais institucional, a página de contato deve estar clara e ao menor número de cliques de distância do visitante, considerando que o objetivo daquele tipo de usuário é entrar em contato com a empresa de forma off-line.
Por fim, temos que aliar todas as características anteriores a um visual atrativo, que instigue o usuário a ficar mais tempo no site e que, por meio de uma UI bem feita, faça a experiência do usuário diferenciada e prazerosa.
Pós-Design
Teste seu design
Depois da programação, ou, caso você utilize o Webflow, que já entrega o design pronto, a ponta final da criação de um website antes dele ir para o ar é o teste. Nesta etapa podemos procurar uma pessoa que se encaixe com o público alvo do site e pedir para que a pessoa o utilize. Analise quanto tempo a “cobaia” levou para achar as principais informações do site. Este tempo não deve ser mais do que alguns poucos segundos.
Se você gostou de saber um mais sobre UX e UI, compartilhe conosco nos nos comentários!
