UX e UI: O que é e quais as diferenças? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 18 Horas 53 Min 21 Seg Tempo restante da oferta: 18 53 21 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) UX e UI: O que é e quais as diferenças? [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) # UX e UI: O que é e quais as diferenças? Confira neste artigo o que vem a ser a UX (User eXperience) e a UI (User Interface), suas diferenças e no que elas se complementam. [ Marylene Guedes ](https://www.treinaweb.com.br/blog/autor/marylene-guedes) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/24001738/UX-UI.png) Quando estamos desenvolvendo algum software ou um site por exemplo, devemos colocar o cliente no centro das atenções. As pessoas querem praticidade quanto utilizam um sistema/produto, por isso devemos pensar muito na experiência do usuário, para que ela seja a melhor possível. Para isso, devemos nos colocar no lugar do usuário e verificar pontos que devem ser levados em conta na hora de criar a interface (meio pelo qual o usuário interage pelo sistema). Sendo assim, vamos abordar neste artigo dois pontos muito importantes: **UX** e **UI**. Esses termos ainda são bastante confundidos por iniciantes por serem semelhantes, mas eles são duas coisas distintas. Apesar de estarem unidas e trabalharem juntas, elas têm suas diferenças. [ ![UX/UI - Introdução](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ux-ui.svg) Curso UX/UI - Introdução Conhecer o curso ](https://www.treinaweb.com.br/curso/ux-ui-introducao) ### User eXperience (UX) **UX** *(**U**ser e**X**perience)* ou experiência do usuário, visa proporcionar ao usuário sempre a melhor experiência. Tem a finalidade de melhorar todos os aspectos da interação humana, não visando apenas em sistemas, mas também em produtos e serviços. UX está relacionado ao uso do serviço, a interação do usuário. ![Pessoa apertando uma tecla do teclado](https://dkrn4sk0rn31v.cloudfront.net/2019/10/24005411/happy-client.jpg) Existem diversas vantagens de aplicar as regras de UX, além de deixar a experiência do usuário tornando-a mais amigável, você gera satisfação, fazendo com que essas experiências encantem os clientes, o que acaba os fidelizando. Isso também resulta em uma maior conversão de vendas, indicações de forma orgânica e ainda aumenta o valor agregado do produto. Vale ressaltar novamente que UX não é aplicado apenas para softwares e apps e sim para qualquer coisa, como produtos e serviços. ### User Interface (UI) **UI** *(**U**ser **I**nterface)* ou interface do usuário, é o ponto de ligação entre o usuário e o sistema/produto/serviço. Através dele fazemos a projeção e criação de interfaces, juntamente com o design. Toda essa interação é feita através de uma interface. Nós pensamos como uma interface uma tela do computador, mas ela não precisa ser necessariamente uma tela: pode ser um microondas, um controle remoto, etc. Em geral, é o que faz a ponte entre uma pessoa e o objetivo que ela tem. ![Uma pessoa manuseando um tablet](https://dkrn4sk0rn31v.cloudfront.net/2019/10/24005429/people-tablet.jpg) Uma boa interface é simples e fácil de utilizar. O usuário deve conseguir realizar o que ele deseja de um modo simples, e claro, com uma boa experiência. Um dos pontos para se chegar a essa boa experiência, é justamente o UX. Por isso, dizemos que UX e UI dependem uma da outra e trabalham juntas. Não tem como criar uma interface sem pensar na experiência do usuário, até mesmo porque você irá lidar com pessoas, não robôs. Para facilitar, podemos pensar que o UI está mais ligado a parte física e prática (interface), guiando o que o usuário deve fazer enquanto usa o site. Já o UX lida mais com as emoções, como o usuário se sentirá ao usar a interface, tendo uma navegação agradável. A pessoa que trabalha com UX e UI faz a prototipação da interface utilizando softwares, realiza pesquisas e pensa em vários aspectos no que diz respeito a experiência da interface, além de identificar e criar personas. Temos um post específico de [personas em UX](https://www.treinaweb.com.br/blog/personas-em-ux/ "personas em UX") aqui no blog. Uma empresa que pensa no UX e UI está pensando em seus clientes/usuários e isso é muito importante e deve ser levado em conta. Imagine que o usuário visite sua loja virtual e ao visualizar um produto não consiga achar as informações que gostaria, ou que ao clicar em comprar ele não conseguiu ver se o produto foi realmente para o carrinho? Isso é sinal de um UI mal feito, onde muitas vezes faz com que o usuário desista de comprar no seu site e vá para um concorrente. Por isso que muitas vezes a UX e UI são confundidas, porque elas têm uma ligação muito direta: se a navegação é ruim, a experiência também acaba sendo. Confira nossos artigos sobre [user experience](https://www.treinaweb.com.br/blog/tag/user-experience/ "user experience"). [ ![Desenvolvedor Front-end Sênior](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ux-ui.svg) Formação Desenvolvedor Front-end Sênior Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-front-end-senior) - [ #User Experience ](https://www.treinaweb.com.br/blog/tag/user-experience) - [ #UX ](https://www.treinaweb.com.br/blog/tag/ux) - [ #UI ](https://www.treinaweb.com.br/blog/tag/ui) - [ #interface ](https://www.treinaweb.com.br/blog/tag/interface) - [ #experiência do usuário ](https://www.treinaweb.com.br/blog/tag/experiencia-do-usuario) Autor ![Marylene Guedes](//secure.gravatar.com/avatar/5b0ba52b3705f298802db58782656bbc?d=mm) ## Marylene Guedes Responsável pelo sucesso do cliente na TreinaWeb. Graduada em Gestão de Tecnologia da Informação pela FATEC Guaratinguetá, além de estudante de UX/UI. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/marylene-guedes) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/08111124/WEB-DEVELOPER-WEB-DESIGNER-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 7 anos atrás ## [ Web Designer x Web Developer: quais as diferenças? ](https://www.treinaweb.com.br/blog/web-designer-x-web-developer-quais-as-diferencas) Confira neste artigo as principais diferenças entre um Web Designer e um Web Developer. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/27171327/reinaldo-ferraz-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 8 anos atrás ## [ TW Entrevista 09: Reinaldo Ferraz ](https://www.treinaweb.com.br/blog/tw-entrevista-09-reinaldo-ferraz) Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Reinaldo Ferraz, especialista em Acessibilidade para a Web e que trabalha na W3C Brasil. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/29143654/TW-ENTREVISTAS-RAFAEL-CAFERATI-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 9 anos atrás ## [ TW Entrevista 06: Rafael Caferati ](https://www.treinaweb.com.br/blog/tw-entrevista-06-rafael-caferati) Fizemos uma série de entrevistas com desenvolvedores chamada "TW Entrevista". O entrevistado de hoje é o Rafael Caferati, desenvolvedor especialista em UI/UX que já foi premiado pelo CSS Design Awards. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/11/arquitetura-da-informacao-um-breve-overview-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Arquitetura da informação - um breve overview ](https://www.treinaweb.com.br/blog/arquitetura-da-informacao-um-breve-overview) Confira neste artigo o que é Arquitetura da Informação, seus conceitos fundamentais e qual a importância de ter essa estruturação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/ux-research-e-360-view-o-que-e-e-como-pode-ser-aplicado-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ UX Research e 360 View – O que é e como pode ser aplicado? ](https://www.treinaweb.com.br/blog/ux-research-e-360-view-o-que-e-e-como-pode-ser-aplicado) Entenda o que é e como aplicar o UX Research e 360 View, técnicas importantes na hora de pensar em uma melhor experiência do usuário. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/08/vantagens-e-desvantagens-de-labels-flutuantes-em-formularios-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 9 anos atrás ## [ Vantagens e desvantagens de labels flutuantes em formulários ](https://www.treinaweb.com.br/blog/vantagens-e-desvantagens-de-labels-flutuantes-em-formularios) Há um bom tempo que temos visto formulários com labels flutuantes em vários lugares. A ideia era de trazer algo diferente e melhorar a experiência do usuário. Será que melhorou mesmo? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/leis-usabilidade-400x280.jpg) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 10 anos atrás ## [ Três leis para melhorar a usabilidade da sua aplicação ](https://www.treinaweb.com.br/blog/tres-leis-para-melhorar-a-usabilidade-da-sua-aplicacao) Uma breve introdução e alguns exemplos de como as leis abordadas neste post podem ser aplicadas para melhorar a usabilidade do seu produto/serviço. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/WIREFRAME-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Wireframe: o que é e por que utilizar? ](https://www.treinaweb.com.br/blog/wireframe-o-que-e-e-por-que-utilizar) Ao desenvolver um site ou um aplicativo, é comum pensarmos em como ele será. Essa primeira ideia, muitas vezes iniciadas no papel, tem um nome: wireframe. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/técnicas-acessibilidade-web-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Técnicas de acessibilidade para deixar o seu site mais inclusivo ](https://www.treinaweb.com.br/blog/tecnicas-de-acessibilidade-para-deixar-o-seu-site-mais-inclusivo) Conheça as principais ferramentas e técnicas de acessibilidade para web. Veja também tipos de dificuldades e deficiências atendidas por elas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/lean-ux-como-potencializar-o-foco-na-experiencia-do-usuario-parte-1-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Lean UX: como potencializar o foco na experiência do usuário - parte 1 ](https://www.treinaweb.com.br/blog/lean-ux-como-potencializar-o-foco-na-experiencia-do-usuario-parte-1) Uma ótima experiência do usuário é essencial para o sucesso de qualquer projeto. Conheça neste artigo o Lean UX e como potencializar seus resultados. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/lean-ux-como-potencializar-o-foco-na-experiencia-do-usuario-parte-1-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Lean UX: como potencializar o foco na experiência do usuário – parte 2 ](https://www.treinaweb.com.br/blog/lean-ux-como-potencializar-o-foco-na-experiencia-do-usuario-parte-2) Nessa segunda parte, veremos os 15 princípios que regem o Lean UX. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/04133725/novo-painel-treinaweb-ava-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 7 anos atrás ## [ O que há de novo na plataforma da TreinaWeb? Conheça as novas funcionalidades! ](https://www.treinaweb.com.br/blog/o-que-ha-de-novo-na-plataforma-da-treinaweb-conheca-as-novas-funcionalidades) Venha conhecer as novas funcionalidades da nova plataforma de ensino da TreinaWeb e aprenda dicas para aproveitá-la melhor. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **18h 53min 21s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58