UX Design em T: O que Front-End tem a ver com UX?

Laís Cavalcanti
Laís Cavalcanti

Compartilhe

Imagem que mostra as duas mãos de uma pessoa digitando o que parece ser um código em um notebook.

Resumindo

Você sabia que as áreas de Front-End e UX têm tudo a ver?

Neste artigo, vamos descobrir mais sobre as áreas de UX e UI e como um a carreira do profissional de Front-End pode se beneficiar ao conhecer conceitos da área de UX Design.

Vamos lá?

Começando

Boa parte dos sites e aplicativos têm elementos similares: botões, caixas de textos, formulários, campos de busca, etc. Então, por que alguns aplicativos nos parecem incríveis e outros, nem tanto? A resposta está na experiência do usuário.

Mas o que faz com que a experiência do usuário seja agradável? Quem são os profissionais encarregados de desenhar a interface, a experiência e o desenvolvimento de uma aplicação? É sobre isso que trataremos neste artigo.

Imagine a seguinte situação: uma determinada editora deseja criar um e-commerce de livros. Ela tem o escopo definido e muita força de vontade para tocar o projeto. Porém, antes de se aprofundar nas necessidades do usuário, a empresa decide ir direto para o desenvolvimento, dando total liberdade ao desenvolvedor front-end sobre o resultado final.

O desenvolvedor se esforçou para criar o mais eficiente site de e-commerce possível. Fez vários testes e deu tudo certo. Um mês após o lançamento do site, veio o resultado: as vendas foram decepcionantes! O que deu errado?

O feedback que o cliente obteve dos compradores é que a interface lhes pareceu confusa e, por isso, muitos acabavam desistindo de terminar a compra.

Moral da história: sem a compreensão clara de quem são os usuários de um produto, o projeto pode vir a não se concretizar da forma como foi desejada pelo cliente e frustrar a equipe.

Por isso, em um desenvolvimento de produto digital, é imprescindível ter noção do escopo de trabalho de cada profissional, ou seja, é preciso que desenvolvedores e clientes estejam alinhados quanto aos passos necessários para o desenvolvimento de um produto, desde a concepção até o resultado final.

Por isso, é muito importante entendermos os limites entre o desenvolvimento Front-End e a Experiência do Usuário. Então, é nesse momento que entra o UX e o UI.

Imagem em que vemos apenas as mãos de duas pessoas. Uma delas tem um tablet na mão, enquanto a outra pessoa aponta, com uma lápis, a tela de um monitor.

O que é UX?

A forma como um usuário experimenta um produto ou serviço é de responsabilidade da equipe de UX Designers (Designer de Experiência do Usuário). O UX Design abrange todos os aspectos da interação do usuário final com a empresa, seus serviços e produtos. Isso significa identificar e projetar uma solução que atenda a necessidade dos usuários.

Portanto, a pessoa de UX deve conhecer o usuário a fundo, e isso somente é possível através de informações reais coletadas de usuários por meio de testes e pesquisas. O trabalho de UX Designers, como podemos ver, é bastante multidisciplinar, e navega entre marketing, pesquisa e desenvolvimento.

Agora que sabemos o que é UX, podemos entender do que se trata o UI.

O que é UI?

Agora, vamos fazer a distinção entre essa experiência do usuário, UX, do que especificamente o usuário vê, ou seja, a Interface do Usuário (User Interface), UI.

User Interface refere-se ao ponto de contato visual específico ou ativos com os quais o usuário interage: a aparência, sensação e interatividade do produto digital.

O Designer UI, equipado com toda a orientação de pesquisa de UX, traduz para uma interface através da tipografia, cores, espaços, botões, grids, ícones, etc. Então, UI desempenha um grande papel no UX Design, pois é ele quem cria a interação no produto digital.

Com a experiência de usuário projetada e uma interface gráfica criada, ainda é preciso dar vida ao produto digital e a sua interface. É nesse momento que o Desenvolvimento Front-end entra em cena. Mas, antes, vamos entender um pouco sobre quem é quem no desenvolvimento de uma aplicação.

Imagem em que vemos uma pessoa com uma caneta na mão fazendo um projeto em um tablet.

WORKFLOW de uma aplicação

Todo sistema web é dividido em duas partes: Front-end e Back-end.

O Back-end corresponde ao lado do servidor e, por isso, não pode ser visto pelo usuário final. Nesse lado, ocorrem operações de dados que respondem às solicitações enviadas pelo cliente, como fazer login em um sistema, finalizar uma compra, etc. Podemos dizer que o Back-end é a parte dos “bastidores” que ninguém vê, mas é essencial para fazer um sistema ou serviço funcionar.

Já o Front-end corresponde ao lado do cliente, onde está a interface vista por quem está usando o sistema e onde as solicitações são preparadas.

Por exemplo, quando temos um formulário de registro de uma conta, usamos a interface para nos comunicarmos com a aplicação. As entradas são validadas e quando clicamos em enviar, uma solicitação é feita para o back-end. É aí que a conta da pessoa é criada e seus dados são armazenados em um banco de dados.

O desenvolvedor front-end constrói a integração do projeto, fazendo as ligações necessárias para que o sistema seja funcional e utilizável. Esse profissional, munido do mock-up criado pelo Designer UI, cria as telas em que o usuário irá interagir ao longo do uso da aplicação respeitando todo o layout definido e permitindo ao usuário a real utilização do produto digital.

Deu para perceber como todas essas áreas precisam andar juntas? O UX Designer entende o perfil e necessidades do público, para que o UI Designer projete telas adequadas ao que as pessoas precisam. Em seguida, o programador Front-End dá vida às telas produzidas pelo UI Designer, enquanto o Back-end fornece toda a estrutura “de bastidores” para que o projeto como um todo funcione.

Lembra do nosso exemplo da editora? Pois é! Naquele caso, apesar do e-commerce ter um excelente código e rodar bonito, faltou a atuação de UX e UI para construir um sistema fácil e simples de navegar e que atendesse as necessidades do público específico que consome livros.

Concluindo

Como podemos ver, para que o front-end da aplicação funcione, precisamos mais do que uma interface de usuário. Esta parte visual precisa ser programada através de uma linguagem de programação web, como Javascript. É aqui que os caminhos do Design UX e do Desenvolvimento Front-End se cruzam.

É sempre bem-vindo quando o desenvolvedor front-end tem conhecimentos básicos ligados ao Design UX e UI já que esses profissionais integram o processo de concepção de uma interface.

Porém, diferente dos Designers UX e UI, o desenvolvedor Front-End é uma área que está ligada à parte técnica da programação, assim como HTML e CSS, tecnologias essenciais para o desenvolvimento de interfaces.

Portanto, essas áreas são mais que complementares, elas precisam andar juntas ao longo do desenvolvimento de um produto digital, já que a coesão desses profissionais permite que o usuário consiga utilizar o produto de ponta a ponta.

Quer se aprofundar mais no mundo do Design UX/UI e em Front-end? Na Alura, temos formações e vários conteúdos sobre esses assuntos:

Laís Cavalcanti
Laís Cavalcanti

Como uma boa curiosa, gosto de ler, ver, ouvir e experimentar. Uma entusiasta da web acessível a todos. Hoje, faço parte da Escola de UX e Design na Alura.

Veja outros artigos sobre UX & Design