Em projetos web, buscamos pensar em modos de levar o usuário da forma mais natural e intuitiva ao conteúdo ou funcionalidade que ele precisa acessar. Existe um conjunto de conhecimentos que nos auxiliam a tornar essa navegação mais agradável, são métodos utilizados durante o desenvolvimento de um projeto mas que também podem ser levados em consideração em manutenções e para monitoramentos visando melhorias em websites e aplicações.
UX e UI Design são duas áreas que estudam a forma como o usuário interage com um produto, buscando tornar essa relação mais saudável para o usuário. Mesmo entendendo sobre a estratégia de negócio, sem uma base de UX e UI Design encontraríamos dificuldades em proporcionar essa relação entre o usuário e o sistema.
Trabalhar com UX e UI Design é pensar sobre todo o comportamento do usuário quando utilizando a aplicação, o fluxo de navegação, a estrutura e hierarquia das informações, os possíveis caminhos para o usuário conseguir o que quer de maneira mais clara, mantendo um visual agradável e intuitivo.
Por serem áreas que se complementam, algumas comparações serão abordas aqui para entender melhor como UX e UI Design se diferenciam e como vão trabalhar essas questões.
UX – User Experience
O termo surgiu em 1995, com o psicólogo cognitivista Donald Norman como uma tentativa de abranger todos os conceitos relacionados à experiência de um usuário em algum sistema, levando em consideração o design, a interface e a interação com o produto.
É necessário visualizar todas as etapas dessa interação, pois o produto final poder fracassar se alguma delas for negligenciada. Mesmo produtos ou serviços com ótimas funcionalidades podem ter um alto índice de rejeição dos usuários devido a falhas ou pouca clareza nos processos.
Existem algumas técnicas que são utilizadas por profissionais de UX em seus projetos que auxiliam a manter o foco nos objetivos principais durante o desenvolvimento.
Prototipagem
Para facilitar o entendimento e o desenvolvimento de um projeto, profissionais de UX utilizam prototipagem para representar as estruturas iniciais de suas telas, assim, podemos diminuir o tempo gasto com alterações e outras surpresas durante seu desenvolvimento, além de auxiliar a ter uma visão mais clara sobre o foco do projeto e detectar situações que fogem desse objetivo.
Wireframe
Um wireframe é um tipo de prototipagem que pode ser feito desenhado à mão, como um esboço inicial de uma página representando sua estrutura e organização das informações de uma forma simplificada. Alguns dos elementos que podem ser utilizados num projeto são: cabeçalhos, rodapés e as diversas áreas de conteúdo, como listagens ou formulários. Isso pode auxiliar na hora de definir um esqueleto inicial para seu projeto.
A intenção é alinhar a expectativa do cliente ao projeto criado e como se dará a organização das informações visando o objetivo da aplicação, não são levados em consideração detalhes sobre cores, fontes e demais características de identidade visual.
Protótipos visuais
São desenvolvidos a partir de programas de edição gráfica, gerando uma pré-visualização das telas de um projeto e suas estruturas de conteúdos já com layout e identidade visual aplicadas. Aqui, todas as telas são desenhadas separadamente, assim, é possível definir a estrutura do sistema e dar início ao desenvolvimento da programação responsável por tornar funcionais todas as possíveis ações nas páginas.
Protótipos interativos
Uma versão mais aproximada com interações e efeitos visuais já implementados. Exigem mais conhecimento técnico para implementação, geralmente já são produzidos com linguagens de programação (html, css e javascript) para serem feitos testes em navegadores e para visualizar o projeto da forma mais aproximada possível da versão final. Portanto, é um protótipo com um nível de aceitação maior.
UI - User Interface
UI é aplicado dentro dos processos de UX. Podemos considerar que se o UX é responsável por estruturar o projeto visando uma experiência positiva do usuário, o UI estiliza os elementos visuais para que isso aconteça.
Os principais elementos que aparecem em uma interface web são: botões, formulários ou campos de inserção de conteúdo, ícones e listagens de conteúdo já estruturadas. As cores e a tipografia devem ser definidas e aplicadas durante a implementação do UI, respeitando a identidade visual e os fluxos e interações já definidas pelos protótipos de UX.
Relatórios e Análise de Comportamento
Existem alguns estudos que podem ser feitos para verificar se os objetivos estão sendo alcançados ou para identificar e realizar eventuais melhorias ao projeto. Para isso, o UX trabalha monitorando os acessos e estudando o comportamento do usuário.
Algumas ferramentas como o Google Analytics podem ajudar na hora de monitorar as páginas do seu site. A partir de um código vinculado ao código fonte do seu site, é feito uma contabilização a cada novo acesso e os dados são exibidos nos painéis da plataforma.
Entre os possíveis relatórios que ele apresenta estão: regiões que os usuários acessam seu site, quais páginas possuem mais acessos, quais os principais caminhos que os usuários costumam fazer em seu site, qual a origem do seu usuário (se ele clicou em alguma propaganda no Facebook ou acessou através de um link compartilhado), quanto tempo ele costuma ficar nas páginas, fluxo de usuários com caminhos mais frequentemente realizados nas páginas entre outros dados.
Em alguns casos, os dados podem mostrar que há alguma falha que impede o usuário de alcançar seu objetivo e até fazer com que ele não permaneça mais no site, assim, surge a necessidade de melhorar a estrutura de UX e UI para alinhar os itens que estão impedindo os usuários de obterem uma boa experiência.
Esse conjunto de conhecimentos nos auxilia a manter um maior controle sobre os resultados que esperamos obter em nossas aplicações. Um bom hábito é verificar estes dados e estar sempre com relatórios em mãos, avaliando e considerando o desempenho que está sendo alcançado com a situação atual do site.
Por: Adriano Zortea
