Já alguma vez te viste confrontado com um site com toneladas de informação sem conseguires encontrar uma resposta à tua questão? Com uma aplicação móvel com erros? Uma interface com visuais intercalados? Ou já te apanhaste a admirar por um longo tempo o design de uma aplicação móvel ou web? Parabéns, tiveste uma experiência de utilizador fantástica! Mas o que se esconde por detrás desta esperiência? Qual é exatamente a diferença entre UX vs UI? Vamos descobrir tudo neste artigo!
O que é UX vs UI?
Transformação digital e UX vs UI: breve introdução
Uma vez que afecta um crescente número de áreas de negócios, a transformação digital tem um papel cada vez mais central e necessário dentro das empresas.
Na verdade, utilizamos muitas interfaces digitais diariamente e a experiência de utilizador (o que experenciamos quando navegamos nestas interfaces) é crucial. Como as abordagens “centradas no cliente” estão na moda, as empresas tem de refletir sobre o que nós, utilizadores da internet, experenciamos através da sua interface online, ao colocar-nos no centro das suas estratégias! É aqui que entra a UX e a UI.
E sim, uma experiência negativa aborrecerá os utilizadores, levando-os mesmo a desistir: isto é, fecharão a aplicação sem sequer tentar voltar.
Embora os termos UX/UI possam parecer muito semelhantes, veremos que não é bem o caso! Uma coisa é certa: o objetivo fundamental é produzir uma experiência de utilizador o mais agradável e prazerosa possível.
O que é uma experiência de utilizador?
Como vimos anteriormente, a experiência de utilizador é a experiência que temos quando navegamos numa interface digital. Quando experimentamos algo, existem alguns “critérios” a ter em conta:
- Como nos sentimos: Como me sinto a navegar nesta interface? Gosto da forma como apresenta os resultados?
- O nosso ambiente: O ambiente à minha volta é propício a uma experiência de utilizador prazerosa?
- As nossas necessidades e motivações: O que preciso? Que informação procuro?
- As interações oferecidas pelo site ou aplicação móvel: Quando carrego aqui, o que acontece? Que ação gera?
O segredo para proporcionar a MELHOR experiência de utilizador
O design UX atribui extrema importância à oferta de uma interface ergonómica, prática, funcional, graficamente qualitativa e acessível, tendo como objetico fazer com que o utilizador queira permanecer e descobrir cada canto da aplicação web ou móvel... mas não apenas isso! Tem de lhe permitir encontrar rapidamente a informação que procura, apresentar uma imagem de marca forte e positiva, alinhada com uma identidade visual de qualidade, assim como características autênticas e originais...
O que é um design UX?
Falamos de design UX (design de experiência de utilizador) para definir o design da experiência do utilizador. Por “design” referimo-nos mais à “conceção” da experiência de utilizador do que à criação visual.
O papel de um designer UX é pensar, refletir e conceber não apenas o produto – isto é, a interface do utilizador – mas também a experiência que dela resulta.
Para fazer um design UX, tem de se ter em consideração as expetativas, necessidades e os possíveis desejos dos utilizadores.
Podemos mesmo definir o design UX como um processo composto por diversos passos e características:
I. Pesquisa e análise
1. Entendendo a necessidade: levar a cabo entrevistas junto dos utilizadores para identificar as suas necessidades, definir objetivos e perceber as suas expetativas.
2. Pessoas: criar perfis tipícos para identificar os pontos chave da sua experiência, objetivos, frustrações...
3. Utilizar casos: entender as especificidades de cada pessoa e como resolver potenciais problemas de forma a criar a melhor experiência de utilizador possível. Algumas perguntas que nos devemos colocar são: Como diversas pessoas experienciariam isto? Como usariam o produto ou serviço proposto? Desta forma, conceber uma estratégia será mais fácil.
4. Mapas de trajecto: identificar o trajecto do utilizador pela interface e questionar: Como começa o trajecto do utilizador? E como termina?
II. Brainstorming
1. Fluxo do utilizador: consistem em diagramas que reconstroem os diferentes estágios do percurso do utilizador e que conduzem à realização de um objetivo específico.
Exemplo: Um utilizador da internet procura uma bebida no site de um supermercado.
Eis como o fluxo de utilizador seria:
- O utilizador chega à página principal
- Clica na categoria “bebidas”
- É redirecionado para a páginas “bebidas” e escolhe a bebida que pretende comprar ao clicar no ícone correspondente
- Na págin da bebida selecionada, insere a quantidade desejada (1 garrafa por exemplo)
- Vai ao cesto de compras para fazer o pagamento
- Após inserir os seus detalhes de pagamento na interface do site, é redirecionado para a página de confirmação de pagamento
- Uma vez validado o pagamento, fecha o separador
2. Wireframe: para o designer UI, a wireframe é um modelo de como a interface de utilizador irá parecer. Graças a ela, o designer UI poderá construir mais facilmente uma framework visual da interface.
III. Implementação: é nesta fase que entra o UI designer!
1. Protótipos: O papel do designer UI é aqui criar modelos mais ou menos representativos e/ou interactivos que representam as ideias do designer UX.
2. Front-end and back-end development: uma vez validados estes modelos, é a vez do programador pegar no projecto e construir o código de utilização da interface.
IV. Relatório
1. Relatório de usabilidade: uma vez implementado o produto, é agora testado por utilizadores reais que fornecerão o seu feedback pessoal sobre a experiência de utilizador que tiveram.
2. Divisão de ensaios: a equipa UX testará também diferentes designs e o seu impacto nos utilizadores.
3. Relatório analítico: analisar as estatísticas resultantes destes testes (por exemplo: o tempo médio passado nas páginas, taxa de rejeição...)
Contudo, o design UX não acaba na fase de relatório. Na verdade, uma vez concluída esta fase, a equipa UX volta a discutir ideias até chegar à versão final da interface: a que irá ser lançada oficialmente online e que fornecerá a melhor experiência de utilizador!
O que é o design UI?
Como vimos anteriormente, o design UI é integrado no processo de design UX. O design UI insere-se na fase de implementação: a fase em que as ideias dos designers UX e protótipos tomam vida.
Quando falamos de design UI (design de interface do utilizador), referimo-nos ao design da interface de utilizador – e, por conseguinte, da experência estética que dela resulta.
O que faz um designer UI?
O papel de um designer UI é focar-se nos aspetos visuais e gráficos da interface, i.e., os elementos que o utilizador percepciona. Por exemplo, a cor e tamanho de um botão para que esteja visível e queiramos carregar nele ou a tipografia dos textos que são apresentados no ecrã.
Qual a diferença entre UX e UI?
Como podemos ver no diagrama acima retirado do site papdan.com, o UX é como a parte escondida do icebergue!
Ao passo que a UI foca-se no design visual: todas as partes visíveis ao utilizador como...
- o design gráfico: simbolos, formas e imagens que dão sentido às ações do utilizador
- as cores da interface, ilustrações, botões, textos...
- a tipografia: fonte, negrito, sublinhado...
- a configuração da página: o espaços entre os blocos, número de elementos na interface gráfica...
... a UX representa tudo a que se chama “ciência do utilizador”, relacionado com:
- A estratégia
- a compreensão das necessidades do utilizador
- a criação de protótipos, cenários, etc.
UX designer vs UI designer: habilidades chave
Trabalho em equipa vs trabalho autónomo
O designer UX tenderá a trabalhar com muitas pessoas e diferentes departamentos, em atividades cooperativas que levam à reflexão sobre a própria experiêcia. O designer UI trabalhará de forma mais “autónoma”, mesmo que interaja com o gestor de projeto e o designer UX.
O âmbito do projeto
O designer UX focar-se-á no panorama e no problema geral, enquanto que o designer UI focar-se-á nos detalhes, ajustando a interface de cima a baixo e adicionando os toques finais para tornar a experiência o mais prazerosa possível!
Habilidades interpessoais
- Designer UX: saber ouvir, observar, ser paciente e reativo
- Designer UI: ter criatividade, precisão, atenção ao detalhe
UX vs UI: a simbiose conceptual e visual
Embora ambas as disciplinas sejam bastante distintas, a UX e a UI são complementares e necessárias à criação de uma experiência de utilizador agradável. Vamos ver o exemplo do designer UI que determina o tamanho e a cor do botão. O designer UX irá, por outro lado, definir a sua utilidade.
É por isso que muitas empresas que procuram um designer UX incluem o termo “designer UX/UI” para recrutarem um perfil especializado, capaz de conceptualizar e projetar a experiência de utilizador.
Ao reunir estas duas habilidades, o designer UX/UI é capaz de criar uma interface que vai ao encontro dos critérios de design responsável. Será capaz de gerar uma aplicação utilizável e acessível em todas as interfaces de utilizador, independentemente da resolução do ecrã.
Design UX vs UI: tendências e ferramentas
Quais as tendências de UX e UI para 2021?
Sim, o mundo de UX e UI também está sujeito às oscilações das tendências!
O que podemos esperar desta vez?
- A moda das cores vivas já passou. Agora é tempo de sobriedade com cores suaves e relaxantes.
- Adeus também ao modo brilhante. Abraçamos agora o modelo escuro! Não só é bom para os nossos olhos como é também elegante e moderno.
- Bem-vindos à tipografia atraente e em negrito. As aplicações web e móveis criadas em 2021 claramente estão cheias dela...
- Preferência pelo minimalismo. Apenas os elementos mais importantes são apresentados!
- Animações, animações e mais animações. Adoramos quando as nossas páginas se mexem e nos fazem sonhar.
E para deleite dos nossos olhos, aqui fica uma compilação dos melhores exemplos de design UX:
No computador
No Telemóvel
-
Adobe XD: uma prototipagem rápida e ferramenta multifuncional para criar wireframes, protótipos interactivos e facilitar o esboço de aplicações web e/ou móveis
-
Figma: uma ferramenta de prototipagem colaborativa com a qual podes trabalhar online, remotamente, ao vivo e em grupos
-
InVision: outra ferramenta colaborativa que permite às equipas e clientes não só adicionar os seus comentários diretamente, como também visualizar versões anteriores do protótipo
-
Zeplin: uma interface que simplifica a comunicação entre equipas e facilita o teu trabalho ao gerar automaticamente todas as cores, fontes, tamanhos, etc., como guia de estilo
-
Marvel: uma solução que ajuda a criar rapidamente modelos apenas em alguns cliques – a aplicação Marvel está disponível para Android e iOS para testar os modelos ao vivo na versão móvel
-
Maze: uma ferramenta muito eficiente para executar questionários remotos e testes de utilizador e gerar relatórios detalhados mais fácil e rapidamente
-
Miro: um quadro branco virtual, excelente para combinar produtividade e colaboração entre gestores de produto e de projeto, designers, programadores web e móvel e equipas de marketing
UX UI: a que conclusão chegamos?
Se, depois deste artigo, ainda tens dúvidas sobre a diferença entre UX e UI, eis um breve resumo para evitar confusões:
O designer UX será responsável por toda a experiência de utilizador e compreensão das suas necessidades e contribuirá também para encontrar soluções que melhorem esta experiência.
O designer UI contribuirá para a experiência visual dos utilizadores ao representar as ideias do designer UX ao mesmo tempo que facilita a utilização e acessibilidade da interface, ajudando os utilizadores a compreender como usar a interface e guiando-os pela mesma (com chamadas para a ação, por exemplo)
UX UI: ir mais além
Queres aprender enquanto trabalhas? Inscreve-te no nosso curso de Gestor de Produto em part-time e aprende como desenvolver um produto de A a Z! Concebido em colaboração com o nosso parceiro Productized.com, este curso intensivo e prático garantir-te-á um emprego no mercado de trabalho após a sua conclusão.
