fbpx

UX vs UI - quais as principais diferenças e a sua importância

No meu último artigo, mencionei de que forma é que as animações da web podem influenciar o UX de um website ou de uma aplicação, seja pela positiva ou negativa. Se quiseres saber mais sobre este tema, lê o artigo de blogue aqui.

 

O termo UX é, muitas vezes, mal compreendido e confundido com UI. Embora sejam duas práticas muito diferentes, trabalham em conjunto e ambas desempenham papéis extremamente importantes na forma como utilizamos aplicações, websites e produtos digitais.

 

Então, hoje, o meu objetivo é esclarecer qual é a diferença entre estes dois termos e qual o seu contributo para o design final!

ux

O que é UX?

O primeiro passo no desenvolvimento de qualquer App ou Website é conhecido como UX ou User Experience (Experiência do Utilizador). Esta é uma área em que se trabalha com o conceito de human-first design. É nesta fase que se resolve todos os problemas que um utilizador pode ter ao utilizar o seu produto, com o objetivo de o tornar o mais fácil e acessível possível.

 

O termo foi criado nos anos 90 por Don Norman, o co-fundador do Grupo Nielsen Norman, quando desempenhava a função de arquiteto de UX na Apple. Este define UX como toda a experiência que um utilizador tem com um produto ou empresa, quer que seja online ou offline.

Quais são as tarefas de um UX Designer?

O objetivo de um designer de UX é tornar o produto numa experiência agradável e de fácil utilização por todos, por isso, trabalha bastante na investigação, na testagem e na validação do mesmo.

 

Algumas das suas principais tarefas incluem:

 

Investigação do utilizador: Aqui, concentra-se na compreensão dos comportamentos, necessidades e motivações dos utilizadores através de entrevistas, inquéritos, avaliações de usabilidade e outras metodologias de feedback;

 

Criação de Personas: Depois de realizar a pesquisa de utilizadores e definir o seu público-alvo, o designer cria, então, as personas. Uma persona é uma personagem fictícia que representa o utilizador do produto – aqui deve-se definir a demografia, necessidades, desejos, valores, medos e perfis técnicos dessa personagem.

 

Organograma ou Site Mapping: Um organograma é um mapa que contém as várias páginas do seu website. O objetivo é dar uma visão geral de como as páginas ou secções do site estão relacionadas entre si.

 

Wireframes: Os wireframes são protótipos de baixa fidelidade de um website ou aplicação. Permitem estruturar o design com base em todas as suas pesquisas. Esta fase serve para definir os layouts e flows do utilizador,isto é, como o utilizador irá navegar no site ou aplicação, sem ter a distração e preocupação de tornar o design visualmente atrativo.

 

Análise de Dados, Teste de Usabilidade e Iteração: É aqui que é medida e analisada a atividade do utilizador num website ou app. Esta informação vai servir para percebermos como podemos adaptar o design para satisfazer as necessidades atuais do utilizador final.

 

Há muitas formas de testar a usabilidade de um design e alguns dos mais comuns são: entrevistas com o público alvo, inquéritos, formulários de feedback e classificação, heatmaps e gravações de sessões de teste de utilizadores.

O que é UI Design?

Depois de se criar um bom UX, a próxima fase é o UI ou User Interface Design (Design de Interface de Utilizador). Aqui o principal objetivo é criar um design que permite ao utilizador uma navegação otimizada e simples dentro do produto.

 

Ao contrário do UX, o UI concentra-se no design e layout dos ecrãs e dos elementos visuais que estes contêm (isto inclui coisas como botões, animações, menus, tipografia, cores, imagens e transições). Tem como missão criar um design visualmente apelativo com base em todos os estudos e pesquisas que foram feitos pelos designers UX.

 

Os elementos base de uma interface são controlos de entrada, navegação, elementos informativos e containers. Por vezes, existem vários tipos de elementos que podem ser mais adequados para mostrar um tipo de conteúdo específico. É aqui que o designer tem de decidir qual deles será mais eficaz. Por exemplo, alguns elementos podem poupar espaço numa página, mas podem tornar a navegação mais difícil para o utilizador (o que seria um mau UX).

O que deve um designer de UI ter em mente ao desenhar?

Um bom UI baseia-se em toda a investigação feita na fase UX, por isso, após compreender o seu utilizador, os seus objetivos e preferências, é importante ter em mente as seguintes práticas:

 

Keep it simple!
Os melhores layouts são quando um utilizador não tem de pensar muito em como navegar. Por isso tentamos evitar elementos desnecessários para manter o design limpo e visualmente apelativo. É, também, importante utilizar uma linguagem clara nos botões e mensagens informativas.

 

Utilização de elementos consistentes e comuns
A utilização de elementos consistentes e comuns ajuda o utilizador a navegar com conforto e facilidade. É importante criar um padrão no design para manter a consistência. Isto pode ser feito através da utilização de uma linguagem e layout consistente em todo o design.
Se estiveres a desenhar aplicações, não te esqueças de ir ver as regras do sistema operativo onde vai estar a app. Isto ajudará a criar consistência e facilidade para o utilizador em todas as aplicações no seu telemóvel.
Se for para android temos as regras de Material Design da Google e se for para IOS, temos as regras de Human Interface Design da Apple.

 

Usar cor e textura para chamar a atenção
Podes chamar a atenção dos utilizadores para certos sítios usando cor e texturas. É bom consultar a psicologia das cores, pois podes usá-la para guiar o teu utilizador no site ou produto, o que pode ajudá-lo a compreender como navegar no website ou App. Podes ler também o nosso artigo de blogue sobre a psicologia das cores, aqui.

 

Usar hierarquia tipográfica
É importante ter cuidado na forma como se utiliza a tipografia. Tenta garantir que existe uma formatação consistente para títulos, parágrafos e botões. Isto vai ajudar a aumentar a clareza e legibilidade do design.

 

Comunica sempre com o utilizador
Isto é importante para o utilizador compreender o que está a acontecer e o que irá acontecer quando interage com certos elementos. Temos de os informar sobre mudanças nos estados, erros e ações. É preciso garantir que estes sejam facilmente visíveis e que se destaquem para o utilizador.

Mesmo que estas áreas sejam dependentes uma da outra, são igualmente muito distintas.

 

Muitas vezes são executadas pela mesma pessoa, isto porque, os designers de UI precisam de compreender como funciona o UX e vice-versa. Por este motivo, as empresas mais pequenas normalmente procuram uma pessoa para executar ambas as tarefas. Apesar desta decisão ser eficiente para a redução de custos da empresa, pode originar um resultado final com um UX ou um UI mais fraco, pois a tendência é que o designer se especialize mais numa área do que noutra.


UX é uma área mais adequada para pessoas que gostam de fazer investigação, resolver problemas e criar arquitetura de produtos, enquanto que, os designers de UI, são pessoas que procuram trabalhar mais o lado visual e criar layouts que sejam user friendly e visualmente apelativos.

 

Com isto, espero ter conseguido esclarecer cada uma das áreas, transmitir quais as suas principais tarefas e qual a importância de ter um bom UX e UI no desenvolvimento de ferramentas!

Júnior Designer