UX e UI : Elevando seus projetos a outro nível

Os termos UX/UI estão cada vez mais em alta nos dias de hoje, sendo assim, você já deve ter se deparado com tais expressões em algum momento, não é mesmo?! Mas o que de fato elas significam? Qual a diferença entre as siglas? Hoje entenderemos de vez sobre o que se trata UX/UI! Vamos lá?!

• Afinal, o que é UX?
• E o que é UI ?
• Onde é possível aplicar UX/UI e quem pode se tornar um UX e/ou UI designer?
• Como se dá o processo de aplicação de UX/UI ao projeto?
• Como eu sei que meu projeto possui uma boa usabilidade?
• Qual é a melhor ferramenta para criar projetos de UX/UI?

Afinal, o que é UX?

É comum encontrarmos várias definições didáticas e de difícil compreensão, por isso, vou te explicar de uma forma bem simples para você entender sem complicações.

UX é a abreviação de User Experience ou Experiência do Usuário. Em outras palavras, UX é o processo de estruturar a interface de um site/sistema/app, de modo a garantir que a interação do usuário com o sistema seja agradável, intuitiva, eficaz e acessível a portadores de necessidades especiais. Para isso, é necessário realizar pesquisas com o público-alvo, por meio de questionários, entrevistas ou qualquer outro método de coleta de dados interessante ao seu projeto. Assim, você entenderá o perfil, bem como as necessidades do usuário e depois será capaz de esboçar o esqueleto da interface. Ainda não ficou claro o funcionamento da UX na prática? Não se preocupe, você vai entender as etapas de criação no tópico: Como se dá o Processo de aplicação de UX/UI no projeto .

Mas pra que eu preciso “gastar tempo” do meu projeto, fazendo pesquisas com os usuários? Primeiramente, o seu projeto não deve ser feito pensando no seu cliente – pessoa que contratou seu serviço - afinal, quem vai utilizá-lo é o cliente do seu cliente, o usuário! Opa, UX é experiência do Usuário, lembra?! A única forma de você agregar valor e personalidade aos seus projetos é fazendo produtos sob medida para os usuários, caso contrário será só mais um site ou sistema disponível no mercado. Isso não é legal nem para você como profissional e nem para quem te contratou, visto que ele não será capaz de prover um produto ideal aos usuários. Resumindo, o fato de não aplicar UX ao que você faz não significa que seus produtos são de má qualidade e sim que eles não agregam valor ao usuário, logo reservar um tempo do seu projeto para realizar a etapa de UX é vital para gerar um produto diferenciado com destaque no mercado.

E o que é UI?

Tudo bem, já entendemos o que é UX, mas o que significa UI? Calma, vou te explicar! UI é a abreviação de User Interface ou Interface do Usuário. Em outras palavras, é o que o usuário está vendo e interagindo na interface, ou seja a parte gráfica/estética. Muitas pessoas subestimam essa fase do projeto por pensar da seguinte forma: “O importante é funcionar e não ser bonito”, mas isso, meu caro leitor, é um erro gigantesco. De que adianta seu produto resolver todos os problemas do mundo se a interface não é capaz de transmitir/comunicar o que você quis dizer ali?! Quando o usuário abre uma interface “feia”, a tendência é ele perder o interesse e não utilizar, mas mesmo se utilizar, não terá uma experiência visualmente agradável ou positivamente memorável. Uma boa apresentação traz propriedade, autoridade, além de importância ao seu projeto e acima de tudo, facilita a interação. Lembre-se, o designer não está disponível para ajudar o usuário a utilizar o sistema, logo cabe ao design proporcionar uma comunicabilidade satisfatoriamente eficaz entre o usuário e o sistema.

Onde é possível aplicar UX/UI e quem pode se tornar um UX e/ou UI designer?

É possível aplicá-los literalmente em qualquer coisa passível de interação com o usuário. É comum pensarmos apenas em sites ou sistemas, mas não, pode ser em um brinquedo, em um elevador, em um banheiro, etc., como eu disse, qualquer coisa! 

Imagine que você fosse contratado pelo projetista de um apartamento que será habitado apenas por idosos, para fazer a interface do interfone desse lugar. O que você faria? Certamente, o interfone não poderia ter números pequenos, ser super tecnológico, complicado de interagir ou que exigisse um alto nível de memorização, certo?! Ele precisa proporcionar uma eficiente experiência aos usuários - UX - e ser visualmente agradável a esse público – UI. Fez sentido agora?!

Talvez você tenha estranhado quando eu citei por exemplo banheiro no parágrafo anterior. Isso acontece porque tendemos a associar UX/UI apenas com artefatos que envolvam tecnologia, mas esses métodos podem ser aplicados em diversas áreas em e por qualquer profissional. É isso mesmo, você não precisa ser da área de TI para se tornar um Ux ou UI designer, basta ter sensibilidade e paixão por garantir a melhor experiência e acessibilidade possível em um dado projeto, além de interesse por tendências, bem como vontade de se manter em constante aprendizado! 

No caso de design de sites, por exemplo, você pode se tornar um UX/UI web designer mesmo sendo formado em direito, psicologia, qualquer outra profissão ou até mesmo em nenhuma profissão, ou seja, basta se especializar nisso e ter aptidão para tal!

Como se dá o processo de aplicação de UX/UI no projeto?

1º – Entenda seu público

Bom, primeiramente é necessário entender bem o projeto, não somente o que você precisa fazer, mas também as necessidades, exigências e limitações do público-alvo. Para isso , é interessante começar criando as personas, bem como os cenários que representem os futuros usuários do sistema. Em seguida, você precisa fazer uma pesquisa com algumas pessoas que retratam tais personas, seja via questionário, entrevista ou outro método que julgue adequado, além de economicamente viável ao projeto. Por fim, analise esses dados para que eles sirvam de base às tomadas de decisão nas próximas etapas. Por exemplo, se os usuários tiverem baixa familiaridade com tecnologia, você deve criar uma interface simples e bem intuitiva, evitando tarefas complexas, por exemplo. Lembre-se: criar um design baseado em dados é o segredo de um sistema que agregue valor os usuários.

2º – Busque inspiração

Feito isso, é hora de buscar inspiração! Criatividade é algo muito particular, isto é, algumas pessoas se inspiram ouvindo música, meditando, observando paisagens, etc., mas uma coisa é trivial para todos: buscar referências. A fim de ter repertório, é muito importante acompanhar tendências e fazer constantes pesquisas, não para plagiar outros designs, mas sim para acompanhar as novidades que surgem no mercado.

3º – Faça um Rabiscoframe

Após estar inspirado, é hora de montar seu wireframe no papel, também chamado de rabiscoframe, que nada mais é do que um esqueleto da sua interface. Nesse momento não há nenhuma preocupação com estética, você só precisa demarcar onde ficará cada botão, imagem, texto, etc.

4º Formalize o Wireframe

Em seguida, passe esse wireframe para o computador e apresente a estrutura ao seu contratante, para que juntos possam fazer as alterações necessárias antes de começar o design em si. Mas lembre-se, as decisões devem ser tomadas com baseadas principalmente nos dados coletados com as personas, logo toda e qualquer mudança deve ter um embasamento solidamente justificável, em outras palavras, você deve levar em conta a lógica e não o gosto pessoal. 

5º Crie o Guia de Estilo

Estrutura aprovada? Então o próximo passo é montar um guia de estilo, que é um documento onde você vai definir as fontes tipográficas, paleta de cores, padrão de ícones/botões, ou seja dimensão, forma e coloração destes. Além disso, é interessante colocar as imagens a serem utilizadas e/ou que representam suas inspirações. Esse guia é muito importante para: 

• Estruturar o design na etapa a seguir;
• Orientar os desenvolvedores na hora de implementar o código da interface;
• Ser referência a outros designers ou até mesmo ao próprio cliente, caso precisem alterar a interface no futuro.

6º Faça o design da sua interface – UI

A partir do seu wireframe, crie o design seguindo o padrão do guia de estilo. Alguns softwares facilitam muito seu trabalho, por exemplo o Figma, visto que nele você consegue fazer praticamente qualquer coisa com auxílio de atalhos e plugins.

 7º Faça a Prototipação

Prototipar um projeto é deixar suas telas navegáveis. Você vai conectar as telas, botões, etc., de modo a criar uma simulação com alta fidelidade para que, por meio dela, o cliente consiga ver como vai ficar o sistema/app/site, após a implementação final. Nesse momento é altamente recomendável que você teste esse protótipo com alguns usuários - 5 pessoas é um bom número – para que identifique erros, problemas ou insatisfações e seja capaz de corrigi-los, antes de partir para o produto final, evitando assim dores de cabeça ou pior, infortúnios ao cliente. Para fazer esse teste, você pode enviar o protótipo a alguns usuários que representem suas personas e depois pedir que eles relatem a experiência ou pode convidá-los pessoalmente para que consiga observar de perto todas as reações/execuções. Em ambos os casos é necessário que você explique muito bem duas coisas:

1ª - Que você está testando o sistema e não o usuário, logo se ele não estiver conseguindo realizar uma tarefa da maneira esperada, a culpa é do sistema e não dessa pessoa, logo ela não precisa se sentir constrangida;

2º - Quais tarefas ele deve tentar fazer em seu sistema. Pense estrategicamente, pois isso é de grande valia para o seu projeto.

Mas e se você não entende nada sobre programas de prototipação e não tem tempo de aprender no momento, o que fazer? Também é possível criar protótipos em papel! Nesse caso você precisa desenhar todas as telas, textos, etc., e a medida que o usuário for interagindo com a interface no papel, você deve ir trocando as folhas de modo a simular manualmente o que está acontecendo. 

8º Começar a desenvolver ou passar o projeto para a equipe de desenvolvimento

Prontinho! Após corrigir todos os problemas identificados na prototipação e receber a aprovação do seu contratante, é só começar o desenvolvimento. Repare que apesar de termos 6 etapas até chegar aqui, o processo todo não é demorado, pelo menos nem se compara com o tempo que você gastaria para refazer seu código várias e várias vezes até chegar na aprovação final do cliente e dos usuários. Inquestionavelmente o processo de UX e UI é uma salvação se usado de modo correto, porque você economiza tempo e aumenta muito a qualidade do seu produto. Incrível não é mesmo?!

É muito importante fazer a validação com o cliente a cada etapa, porque  assim você garante que o projeto será executado da melhor forma possível.

Como eu sei que meu projeto possui uma boa usabilidade?

 Existem muitos métodos e técnicas valiosas de avaliação e inspeção para prevenir seu projeto final de erros. O primeiro deles é o teste com usuários que aprendemos no item anterior, além disso você poderia contratar especialistas na área de revisão de sistemas para avaliar, bem como identificar problemas em seu produto - eles utilizam padrões teórico-científicos. Por fim, temos as técnicas que não envolvem outras pessoas. Hoje vou te contar uma das mais famosas, para você mesmo seguir! Estou falando das 10 Heurísticas de Nielsen. Mr. Jakob Nilsen é conhecido como o pai da usabilidade e criou essas heurísticas para nos ajudar a reduzir possíveis erros em nossos projetos, são elas:

•  Visibilidade de qual estado estamos no sistema

O objetivo aqui é manter os usuários informados sobre o que está acontecendo a partir de sua interação, através de feedbacks adequados e no tempo certo. 

•  Correspondência entre o sistema e o mundo real

Utilize conceitos, vocabulário e processos familiares aos usuários. Torno a dizer, é vital conhecer quem são seus usuários, para saber como comunicar-se com eles.

•  Liberdade de controle fácil pro usuário

Forneça alternativas e “saídas de emergência”, ou seja possibilidades de editar, cancelar, desfazer e refazer as ações. 

•  Consistência e padronização 

Seja consistente. Palavras, situações e ações semelhantes devem significar conceitos ou operações semelhantes, por exemplo botões com um mesmo significado devem ter o mesmo texto, formato e coloração em todo o sistema. Caso haja convenções para o ambiente ou plataforma escolhidos, estas devem ser obedecidas, por exemplo se tiver fazendo um app para android, siga os padrões estabelecidos no Material Design.

•  Prevenção de erros

Tente evitar que o erro aconteça, informando o usuário sobre as consequências de suas ações ou, se possível, impedindo ações que levariam a uma situação de erro.

•  Reconhecimento em vez de memorização

 Torne objetos, ações e opções visíveis e compreensíveis.

•  Ajude os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros

Mensagens de erro em linguagem simples, sem códigos, indicando precisamente o problema e sugerindo de forma construtiva um caminho remediador.

•  Flexibilidade e eficiência de uso

Ofereça aceleradores e caminhos alternativos para uma mesma tarefa; permita que os usuários customizem ações frequentes.

•  Estética e design minimalista

Evite porções de informação irrelevantes. Cada unidade extra de informação em um diálogo compete com as unidades de informação relevantes e reduz sua visibilidade relativa.

•  Ajuda e documentação

Devem ser fáceis de buscar, focadas no domínio e na tarefa do usuário, e devem listar passos concretos a serem efetuados para atingir seus objetivos.

Qual é a melhor ferramenta para criar projetos de UX/UI?

Existem várias opções boas disponíveis, para UX, UI e prototipação por exemplo o Figma, Adobe XD, Sketch, Quant- UX, entre outros. E para organizar as tarefas, você pode usar por exemplo o Trello, Notion ou similares. Cada sistema possui suas peculiaridades, então é válido utilizar mais de uma caso sinta necessidade.  

E agora?! Ficou mais claro sobre o que se trata UX/UI?! Espero que esse post tenha te ajudado a tirar todas as dúvidas sobre o assunto, bem como a entender o quão importante esse processo é para os projetos. Mas caso tenha restado alguma incógnita sobre o tema, não exite em nos enviar uma mensagem! Nós da iJunior ficaremos muito felizes em te ajudar acerca desse ou qualquer outro tema, ok?! Até a próxima postagem!