UX + Frontend: uma introdução

(Fonte da imagem)

Faz algum tempo que, por todos os lados no universo de desenvolvimento, startups, empreendedorismo e design, somos bombardeados pelo termo User Experience. E na maioria das vezes, o tema é tratado como algo salvador de pátrias, messianicamente apregoado e que todos os nossos problemas com clientes podem ser resolvidos se utilizarmos bem suas metodologias e conceitos. Bom, todo exagero é duvidoso, mas não seria inverdade dizer que o potencial solucionador do UX Design é real e pode ser aplicado de variadas formas em diversos projetos.

O ponto que às vezes deixa a desejar é que, na prática, é um pouco complicado para iniciantes entender como esse potencial solucionador pode ser aplicado em casos reais. Para designers é relativamente simples, pois UX não é nada mais nada menos que uma das áreas do universo do design. O desafio fazer o caminho inverso: ir do Frontend à UX.

E aí, como é de praxe, o sujeito — estereótipo de desenvolvedor frontend — começa a procurar sobre o tema na web e descobre que é um pouco mais complexo do que ele achava que é. Os planos de ler alguns artigos e sair aplicando o que entendeu vão por água abaixo e ele se depara com o seguinte dilema: estudar a fundo o tema ou esquecer dele e continuar fazendo os projetos dependendo da preocupação do designer com tais questões de experiência (isso caso trabalhe em conjunto com um designer).

Eu me deparei com o mesmo dilema e acabei por tentar estudar o tema mais a fundo. Algumas coisas estão bem claras agora, mas quanto mais leio, mais entendo que UX é um universo imenso e que junto com o universo gigante do frontend, acaba sendo loucura (e eu quase piro com isso) querer entender com profundidade os dois lados tão depressa.

Decidi escrever uma série de posts para ajudar outros devs a não enlouquecerem. Este é o primeiro e vai te dar algumas ideias generalistas sobre alguns pontos interessantes a se pensar antes de começar a entender de verdade sobre UX design e aplicá-lo nos seus projetos.

Design para a resolução de problemas

Em geral, a mente de desenvolvedores é condicionada a dividir o desenvolvimento frontend em duas partes: funcional e estética. E em ambientes de produção, geralmente se divide as tarefas: o designer se preocupa com a parte estética e o desenvolvedor frontend se preocupa em transformar a parte estética criada pelo designer em algo funcional, semântico e performático.

O que se esquece muitas vezes é que tanto a parte estética quanto a funcional estão englobadas por um aspecto: o usuário. E o UX design vem à tona justamente para aglutinar tudo e fazer com que o produto cumpra suas funções.

E a função do design é justamente essa. “Procurar a melhor forma de resolver problemas”. E no caso do UX Design, a preocupação é resolver o problema conciliando a interação do usuário com a solução desse problema.

Pensar que design serve apenas para deixar as coisas esteticamente agradáveis é uma falha que deveria estar morta há um bom tempo. A estética, que chamamos de design gráfico ou design visual, é apenas uma das disciplinas do design.

Nós, como desenvolvedores, temos que entender esse conceito e tentar pensar como solucionadores de problemas (UXers). E nem sempre os problemas são resolvidos com código, mas também com algumas decisões sobre layout, questões de performance, escolha de tecnologias de cada projeto e até mesmo com a forma que você escreve seu código.

Componentes reutilizáveis

E por falar na forma como você escreve seu código, vamos falar de uma boa prática e envolver UX nela? Vamos.

O conceito por muitas vezes exageradamente repetido de reaproveitamento de código é de extrema importância para o desenvolvimento de projetos, sejam grandes ou pequenos. Reaproveitamento de código implica uma melhor performance, uma melhor manutenção e melhor legibilidade em seu código.

E no nosso universo do frontend, o conceito de reaproveitamento de código aparece de diversas formas, seja na utilização de classes no CSS, seja na componentização das páginas ou mesmo no uso de metodologias como RSCSS.

Tá okay. Reaproveitamento de código é bem importante para programação, seja no front ou no backend, mas onde é que o UX Design entra?

Criar uma interface homogênea e harmônica é um dos intuitos das metodologias que UXers utilizam nos dias de hoje, porque

Comunicabilidade e affordance são conceitos essenciais para que a experiência do usuário seja satisfatoriamente interessante.

Uma das formas de conseguir alcançar comunicabilidade e affordance é por meio de uma linguagem concisa e fácil de entender. Juntamente às estratégias de conteúdo, a linguagem da interface é o conjunto de elementos que passarão as mensagens específicas ao usuário.

Agora se pergunte: qual a melhor forma de homogeneizar os componentes para que eles consigam chegar nesses requisitos? Resposta: Reutilizando estilos, comportamentos e padrões. Caso você trabalhe em conjunto com um designer, é bom conversar com ele sobre style guides e entender como trabalhar com esses guias influencia o trabalho de cada uma das partes e como também o produto disso vai impactar a experiência do usuário.

Entendendo o seu usuário real

Aliás, compreender como o produto de seu trabalho atinge o seu usuário real é uma parte importantíssima do seu papel. Muitas vezes nosso ambiente de trabalho e até nosso próprio mindset nos condiciona a focar nas sprints e nas entregas e esquecer que o que estamos produzindo vai ser usado por pessoas, serumaninhos com sentimentos e diferentes pensamentos e formas de agir.

Entender isso é importante porque nos faz melhorar não só a forma como desenvolvemos nosso trabalho na prática, mas também em como pensamos ele de forma teórica.

O que eu estou falando é: o projeto não termina quando sua interface vai ao ar. Entender o usuário real é a parte mais importante do processo e existem várias formas de fazer isso. A mais simples é usando ferramentas de pageview, como Google Analytics ou semelhantes. As técnicas para recolher feedback dos usuários são diversas, mas o mais importante é saber que é a partir desse feedback que seu trabalho vai ser validado ou não. E por consequência, melhorado.

Vendo do ponto de vista mais teórico, a análise de comportamento de usuário vem nos dar aporte para entender, na prática, a diferença entre modelo conceitual e mental, o qual muitas vezes é desprezado, mas que tem indiscutível relevância. É o fechamento do ciclo.

Concluindo…

E ao contrário do ciclo que se fechou no último parágrafo, minha conclusão vem pra deixar em aberto um ciclo.

Este artigo teve como objetivo introduzir algumas relações diretas entre UX Design e algumas ferramentas e boas práticas do universo do desenvolvimento Frontend. Esse é o primeiro post de uma sequência que tratará das interseções e trocas de amor entre Frontend e UX, visto a escassez de conteúdos que tratem diretamente destes assuntos, de forma a facilitar as coisas para os dois lados envolvidos.

Gostou?

Recomende ele, clicando no coração abaixo, para que outras pessoas possam ler! Compartilhe também em suas redes. :)

Deixe sua opinião!

Você pode sugerir temas e também escrever para a comunidade!
Acesse nossa comunidade no Facebook