A maneira mais simples de ver a diferença é finalizar a compra. A UX decide quantas etapas existem, o que é solicitado em cada etapa, o que acontece quando um cartão é recusado e se um hóspede pode comprar sem conta. A UI decide a aparência de cada etapa: os campos do formulário, o estilo do botão, a cor da mensagem de erro e a pequena animação quando o pagamento é bem-sucedido.
O design UX começa antes de qualquer tela existir. Inclui pesquisas com usuários, entrevistas, mapas de jornada, arquitetura da informação, wireframes e testes de usabilidade. A saída geralmente é um fluxo ou um protótipo, em vez de um design visual finalizado. O sucesso é medido pelos resultados: conclusão da tarefa, erros, tempo para terminar e se as pessoas voltam.
O design da UI transforma essa estrutura em uma interface. Abrange hierarquia visual, espaçamento, tipografia, cor, ícones, componentes e como cada elemento se comporta em cada estado: padrão, passar o mouse, pressionado, desabilitado, carregamento e erro. O movimento também faz parte da UI. Um botão que responde quando pressionado ou uma folha que segue seu dedo informa às pessoas que o produto as ouviu.
Os dois dependem um do outro. Um fluxo claro com botões confusos ainda falha, e uma tela polida em cima de um fluxo confuso ainda falha. É por isso que a maioria das equipes trata a UI como uma parte da UX, em vez de uma disciplina separada, e é por isso que muitos anúncios de emprego pedem ambos.
Se você estiver decidindo o que aprender primeiro, comece com o básico de UX (compreendendo o usuário e a tarefa) e, em seguida, aprenda habilidades de UI em uma ferramenta de design como Figma ou Penpot. O design de interação e movimento vem a seguir, e é aí que ferramentas como ExodeUI, que fabricamos, se encaixam.