Se você está um pouco familiarizado com o universo de TI, muito provavelmente já ouviu falar sobre Front-End. Mas o que é Front-End? Neste artigo, vamos abordar um pouco sobre este assunto e quais são as responsabilidades de um profissional que trabalha nessa área.
Também convidamos Cynthia Saito, coordenadora de desenvolvimento de TI, e Thiago Cabral, gerente de desenvolvimento de TI, ambos da ClearSale, para um bate papo sobre as mudanças que têm ocorrido na empresa desde a criação de uma área dedicada a Front-End, e se vale a pena investir nesses profissionais.
O Front-End está ligado ao lado do cliente, e trata da parte visual das aplicações. Ou seja, tudo o que você vê ou interage. Mas não se engane, o Front-End vai muito além de fazer só “uma tela bonitinha”. Existem vários fatores que acabam entrando no escopo da área e que são necessários levar em consideração para se ter uma aplicação eficiente, fácil de usar, além de ser visualmente agradável.
Dentro destes fatores, nós temos o tempo de carregamento das páginas. Ninguém gosta de navegar em uma aplicação que demora muito para carregar. Você sabia que a velocidade de carregamento também é um fator para determinar a posição que seu site aparecerá nos resultados de buscas em mecanismos de pesquisas, como o Google? Ainda, segundo estudo da Kissmetrics, 40% das pessoas abandonam um site que demora mais de 3 segundos para carregar e, a cada segundo de demora no carregamento da página, a taxa de conversão diminui em 7%.
Assim, diante dos dados apresentados, a área de Front-End precisa levar em conta desde as imagens que são usadas, até o tipo de fonte que é colocada em seu projeto, para que seu site possa ter o melhor desempenho e eficácia.
Outro fator importante a ser levado em consideração é a usabilidade da aplicação e as cores que são utilizadas. Quando o usuário não entende o que tem que fazer, onde clicar para executar a ação que ele deseja, isso muito provavelmente causará uma frustração. Se isso acontecer, é provável que ele deixará de usar seu site e irá buscar o que quer no concorrente.
Por isso, as páginas precisam ser óbvias, intuitivas e autoexplicativas, e as cores utilizadas precisam estar de acordo com o que você deseja passar para o usuário.
“Tornar as páginas claras é como ter boa iluminação em uma loja: faz com que tudo pareça melhor. Usar um site que não nos faça pensar em coisas sem importância parece fácil enquanto que, se embaralhar com coisas que não importam para nós tende a sugar nossa energia e entusiasmo - e tempo[…]
Como consequência, se as páginas Web terão que ser eficazes, têm que executar a maior parte da sua mágica em um só relance e a melhor forma de fazer isso é criando páginas que sejam claras ou pelo menos auto-explicativas.” (KRUG, Steve, 2008, p. 19)
E existem muitos outros fatores, que poderíamos ficar horas listando, para que sua aplicação tenha maior eficácia. Mas será que apenas um profissional fica responsável por cuidar de tanta coisa assim? A resposta é não. Nos bastidores da criação de uma interface, existem diversos profissionais relacionados ao Front-End, inclusive de outras áreas de estudo, trabalhando em conjunto. Vamos abordar duas dessas áreas: a de desenvolvimento e a de design.
O profissional de Front-End voltado para a área de design se preocupa principalmente com questões visuais e de usabilidade. Para isso, ele estuda matérias como teoria das cores, user experience, design de interface, ferramentas de prototipação e análise de comportamento do usuário.
A Teoria das Cores é um estudo sobre as cores e as sensações que elas transmitem ao ser humano. Entendendo o efeito das cores no nosso cérebro, é possível manipulá-las nas mais diversas formas para passarmos determinadas mensagens e sentimentos aos usuários. Assim, se torna um conceito muito útil para criação de interfaces.
A experiência do usuário, popularmente conhecida como UX, é um conceito muito amplo que se aplica a várias etapas da concepção de um produto. Mas, falando especificamente de UX voltada para serviços/produtos web, foca-se principalmente na definição dos processos e etapas que o usuário terá de percorrer e na interação que ele terá com as interfaces de seu site ou aplicativo.
Nesse sentido, o designer pode ajudar a validar se as etapas que um usuário tem de percorrer estão muito longas ou muito complexas para uma funcionalidade, por exemplo. Também avalia a interação no sentido de, por exemplo, se a tela necessita de muitos cliques para fazer ou apresentar algo, se tem muita informação sendo exibida ao mesmo tempo ou se falta informação necessária para o entendimento de uma página.
Para validar as hipóteses e testar a usabilidade, geralmente se faz uso de protótipos - um modelo mais simplificado do resultado final esperado. Dependendo da etapa do processo de criação, podem ser usados protótipos de baixo nível, os wireframes, ou protótipos de alto nível.
Já a etapa de análise comportamental do usuário pode ser realizada antes e/ou depois da criação do produto. Nessa fase anterior à criação, é bom analisar o comportamento dos usuários para conhecer melhor seus hábitos e ter alguns parâmetros a seguir durante a ideação.
Porém, também é muito interessante ser feita depois da finalização do produto com o intuito de averiguar se o site está tendo o resultado esperado ou se será necessário realizar alguma mudança no fluxo dos processos ou mesmo em alguma interface.
Bom, vimos que o trabalho de um designer envolve muito mais a parte da criatividade e de análise e entendimento dos usuários. Agora, vamos ver a parte mais lógica do Front-End: o desenvolvimento.
O desenvolvedor Front-End trabalha muito mais com a lógica em seu dia a dia. Apesar de ter noções de design, ele não aprofunda seus estudos nessa área e sim em linguagens de programação e marcação.
A linguagem de programação mais usada no Front-End é o JavaScript (JS). Em geral são usados frameworks e bibliotecas baseadas nessa linguagem para facilitar o desenvolvimento e manutenção do código. Alguns dos mais usados são React, Angular e Vue.
É por meio dessas tecnologias JavaScript que é feita toda a lógica de Front-End das aplicações, como validações de formulários, definição de regras de negócio no lado do cliente e manipulação das requisições de envio e recebimento de dados do Back-End (outra área de desenvolvimento, focada mais no lado do servidor).
Outras tecnologias essenciais para um desenvolvedor (conhecido popularmente como 'dev') Front-End são a linguagem de marcação HTML e a folha de estilo em cascatas (CSS). O HTML é o que dá a estrutura a página web. Ele separa cabeçalho, corpo da página, parágrafos e rodapé, por exemplo. Já o CSS aplica os estilos, como o tipo e tamanho de fonte, espaçamento, margens, cores de botões, imagens de fundo, entre outros, deixando-a visualmente mais agradável. Por meio dessas tecnologias, é possível criar interfaces bem parecidas às que foram definidas nos protótipos.
Podemos ver que ambos profissionais trabalham lado a lado e complementam suas habilidades. Mas também é interessante que cada um tenha ao menos uma noção do conhecimento técnico do outro, para poderem se criticarem e melhorarem o produto final.
Um designer precisa ter uma noção da parte de desenvolvimento Front-End para que ele entenda as limitações técnicas e não faça um protótipo que seja inviável de ser desenvolvido, como também um desenvolvedor Front-End precisa ter algumas noções de design para poder dar sugestões de usabilidade e conseguir replicar da melhor maneira o protótipo desenvolvido pelo designer.
Agora que entendemos um pouco dessa área de Front-End, vamos abordar como essa área surgiu aqui na ClearSale, como ela está se desenvolvendo, quais resultados já foram alcançados e o que podemos aprender com isso.
Quando surge a necessidade de se ter profissionais de Front-End no seu time? Essa é uma questão que deixa muitos em dúvida. Para exemplificar, trouxemos o caso da área de Produtos da ClearSale, gerenciada por Thiago Cabral. Segundo ele, antigamente a parte de Front-End era realizada por outros desenvolvedores não especialistas na área.
“Quando a pessoa não é especializada nisso, ela não toma todos os cuidados necessários, não presta atenção em todos os detalhes”, ressalta Cabral. “Com isso, alguns problemas começaram a ocorrer, como coisas sem padronização e dificuldade de estimativa das sprints, já que o processo criativo tem um tempo indeterminado e os desenvolvedores não sabem estimar um tempo coerente para as tarefas e assim acabam atropelando as coisas para poder entregá-las ou atrasam a sprint”, complementa.
Isso tudo o levou a se questionar “como vivemos até o presente momento sem uma área de Front-End?”. Desde que a área de Front-End começou, vêm crescendo exponencialmente. De acordo com Cynthia Saito, coordenadora de desenvolvimento da equipe de Produtos, “a empresa toda já entendeu que ter uma área de Front-End é um diferencial”.
Falando sobre os impactos que a área tem agregado para a empresa, Cabral comenta que os benefícios de profissionais especializados são uma qualidade maior no Front-End, com sprints muito mais assertivas, previsíveis e aumento de valor gerado nas aplicações.
"O impacto visual é muito grande. Mesmo que o software de alguém não seja tão bom, se as telas forem lindas, o cliente vai ter uma visão bem melhor daquele produto”. Ele ainda afirma “com o cuidado de front os usuários ficaram muito mais satisfeitos", ressalta Cabral.
Recentemente, a empresa lançou o DataTrust, um produto no qual o time de Front-End teve participação ativa, e Cynthia pondera que “a empresa toda ficou muito orgulhosa do produto e teve um aceite muito grande também dos clientes, porque possibilitou que o produto fosse demonstrado melhor nos eventos”.
Com relação aos planos futuros, Cynthia afirma que a ideia é que possamos investir mais nessa área. "Pensar mais na usabilidade e na experiência do usuário, planejar e entender o valor que vai gerar através das aplicações e de toda a experiência, desde o momento que o cliente entra até consumir todas as nossas aplicações”.
Ainda sobre o futuro da área de Front-End na empresa, Cabral diz que os próximos passos são aumentar o time e conseguir aumentar as habilidades de UX do time de Front-End, dando um pouco mais de peso nisso. "O caminho mais assertivo seria adicionar a UX no processo criativo, e pegar métricas e feedbacks direto com o usuário que de fato manuseia nossos produtos”.
Para concluir o assunto, questionamos se eles recomendariam investir na área. “Não é nem questão de se eu recomendaria ou não, acho que deveria ser obrigatório”, diz Cabral. Cynthia concorda e justifica “vale a pena investir, sim! Pode atrair mais clientes e o produto se vende sozinho, não só pelo valor gerado, como pela experiência do usuário ao usar seu produto. Toda empresa deveria investir nisso, além de valorizar a marca perante todos os consumidores, foca em atender as necessidades do cliente. Você acaba se preocupando em melhorar a experiência do cliente”, conclui ela.
Apesar de ser uma área nova aqui na ClearSale, vemos claramente que está sendo um case de sucesso para a companhia, trazendo muitos benefícios e aumentando a maturidade das aplicações, elevando-as a outro patamar. Tendo em mente todos os dados apontados, não sobram dúvidas de que ter uma área dedicada a Front-End agrega e muito ao seu negócio.
Em breve, faremos mais posts voltados a Front-End. Por isso, se gostou do nosso artigo, inscreva-se no blog para ficar por dentro dos próximos. Você também terá acesso a dicas, cases de sucesso e outras novidades da ClearSale.