User Experience (UX)\u00a0e User Interface (UI): dois termos que costumam ser usados como sin\u00f4nimos, mas na verdade significam coisas muito diferentes. Mas qual exatamente \u00e9 a diferen\u00e7a?<\/p>\n
Quadrados e ret\u00e2ngulos se enquadram na defini\u00e7\u00e3o geom\u00e9trica de um quadril\u00e1tero. No entanto,\u00a0todos os quadrados s\u00e3o ret\u00e2ngulos, mas nem todos os ret\u00e2ngulos s\u00e3o quadrados. Isso \u00e9 verdade para UX e UI. Toda UI \u00e9 UX, mas nem toda UX \u00e9 UI.<\/p>\n
Se voc\u00ea est\u00e1 interessado em aprender o que exatamente UX e UI significam e como eles diferem, voc\u00ea veio ao lugar certo. Continue lendo para aprender o que os termos \u201cUX\u201d e \u201cUI\u201d significam, qual a import\u00e2ncia de cada um e como aplic\u00e1-los em seus projetos!<\/p>\n
UX n\u00e3o \u00e9 UI, ent\u00e3o qual \u00e9 a defini\u00e7\u00e3o de UX exatamente? O\u00a0User Experience<\/a>\u00a0tem como foco o usu\u00e1rio e como ele interage com um produto\/solu\u00e7\u00e3o. Basicamente, o\u00a0UX se preocupa em desenvolver algo com o qual as pessoas se sintam bem em interagir.<\/p>\n Para isso, o UX leva em conta os elementos de um produto\/solu\u00e7\u00e3o que impactam na experi\u00eancia de utiliz\u00e1-lo. Por exemplo, quando voc\u00ea acessa uma loja virtual, deve ser f\u00e1cil encontrar sess\u00f5es de produtos, ver detalhes e fechar uma compra. O UX se preocupa em todos os aspectos dessa jornada para que seu caminho dentro da loja seja f\u00e1cil e intuitivo.<\/p>\n Veja mais >> Por que sua empresa deve investir em UX?<\/a><\/p>\n Se voc\u00ea der uma olhada mais profunda na defini\u00e7\u00e3o de UX, que agora est\u00e1 gradualmente formada em sua mente, deve ter notado a diferen\u00e7a mais b\u00e1sica entre os dois. Todos n\u00f3s gostamos de usar UX como um termo prevalecente, mas se voc\u00ea est\u00e1 falando sobre como a p\u00e1gina est\u00e1 fisicamente disposta, onde as coisas devem ficar, quais cores usar ou algo assim, essas\u00a0s\u00e3o coisas relacionadas \u00e0 interface, ou seja, ao UI.<\/p>\n A UI\u00a0\u00e9 uma pequena parte da UX. No entanto, o design UI\u00a0se concentra mais em cores e tipografia. Por exemplo: o UX se concentra em entender quais bot\u00f5es s\u00e3o necess\u00e1rios e onde coloc\u00e1-los em um aplicativo para facilitar a navega\u00e7\u00e3o do usu\u00e1rio \u2014 j\u00e1 o UI se concentra na apar\u00eancia desse bot\u00e3o, incluindo qual cor e formato usar.<\/p>\n A diferen\u00e7a entre UX e UI pode ser sutil, mas est\u00e1 l\u00e1. Enquanto o UX se concentra na estrutura da solu\u00e7\u00e3o, o UI se preocupa em como essa estrutura ser\u00e1 exibida.<\/p>\n Perceba tamb\u00e9m que os dois tipos de design est\u00e3o intrinsecamente ligados. O UI n\u00e3o existe sem UX, e enquanto o UX pode sim existir sem o UI, ele \u00e9 muito melhor quando combinado com um design de interface eficiente.<\/p>\n Portanto, as duas equipes devem trabalhar em estreita colabora\u00e7\u00e3o. Isso permitir\u00e1 que a solu\u00e7\u00e3o\/produto seja f\u00e1cil e agrad\u00e1vel de usar, ao mesmo tempo que possuem uma apar\u00eancia que atrai os usu\u00e1rios.<\/p>\n Em um exemplo pr\u00e1tico, o UX desenvolve o fluxo de um aplicativo (como quais janelas e p\u00e1ginas ele ter\u00e1 e quais informa\u00e7\u00f5es dever\u00e3o estar em cada janela) e passa para que o UI desenvolva uma apar\u00eancia que torne esse fluxo eficaz e combine todos os elementos da p\u00e1gina (como as cores escolhidas para dar destaque a certos elementos em detrimento de outros).<\/p>\n Como falamos, \u00e9 essencial que o UX e o UI trabalhem em conjunto. O UX deve considerar toda a jornada do usu\u00e1rio \u2014 para fazer isso, ele tem como foco os problemas que uma solu\u00e7\u00e3o\/produto deve resolver para o usu\u00e1rio.<\/p>\n O trabalho de um designer UX, portanto, se baseia em realizar uma pesquisa extensa sobre quem \u00e9 o usu\u00e1rio-alvo do produto e o que eles esperam ao utiliz\u00e1-lo. Feito isso, eles devem mapear toda a jornada do usu\u00e1rio com o produto.<\/p>\n Por exemplo, pense nos\u00a0aplicativos de transporte. O usu\u00e1rio-alvo dele s\u00e3o pessoas precisando se locomover de um ponto a outro da cidade. Para isso, eles utilizam o aplicativo, mas qu\u00e3o f\u00e1cil \u00e9 para um usu\u00e1rio pedir um carro? Quais etapas o usu\u00e1rio precisar\u00e1 passar at\u00e9 que consiga seu objetivo? No caso desses apps, a jornada inclui a inser\u00e7\u00e3o do endere\u00e7o de partida, de chegada e a escolha pela forma de pagamento.<\/p>\n O designer UX \u00e9 quem pensa nisso tudo. E o UI? Com essa jornada mapeada, o designer UI vai traz\u00ea-la \u00e0 vida. Ele decidir\u00e1 os aspectos visuais das telas definidas na jornada e dos elementos em cada tela. No nosso exemplo dos aplicativos de transporte, o UI \u00e9 que define o tamanho dos campos de endere\u00e7os, as cores dos bot\u00f5es para chamar um carro ou\u00a0como o usu\u00e1rio poder\u00e1 visualizar os endere\u00e7os favoritos.<\/p>\n Mas cuidado! O designer UI \u00e9 muito mais do que pensar em tamanho e cores de bot\u00f5es, mas tamb\u00e9m se preocupe em tornar um produto\/solu\u00e7\u00e3o acess\u00edvel e inclusive. Por exemplo, eles pensar\u00e3o na combina\u00e7\u00e3o de cores certas que garantir\u00e1 a melhor legibilidade, facilitando a leitura para pessoas com dificuldades de enxergar ou que tenham daltonismo.<\/p>\n Esperamos\u00a0que este\u00a0artigo tenha esclarecido a diferen\u00e7a entre as duas \u00e1reas,\u00a0UX e UI! Mas vale ressaltar que o\u00a0que cobrimos hoje \u00e9 apenas a ponta do iceberg; h\u00e1 muito mais sobre UX e UI que voc\u00ea deve saber.<\/p>\n Se voc\u00ea deseja saber mais sobre o assunto, veja\u00a0tamb\u00e9m nosso post completo sobre\u00a0o que \u00e9 User Experience<\/a>\u00a0e qual sua import\u00e2ncia no desenvolvimento de uma solu\u00e7\u00e3o!<\/p>\n User Experience (UX)\u00a0e User Interface (UI): dois termos que costumam ser usados como sin\u00f4nimos, mas na verdade significam coisas muito diferentes. Mas qual exatamente \u00e9 a diferen\u00e7a? Quadrados e ret\u00e2ngulos se enquadram na defini\u00e7\u00e3o geom\u00e9trica de um quadril\u00e1tero. No entanto,\u00a0todos os quadrados s\u00e3o ret\u00e2ngulos, mas nem todos os ret\u00e2ngulos s\u00e3o quadrados. Isso \u00e9 verdade para […]<\/p>\n","protected":false},"author":1,"featured_media":1887,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59,52],"tags":[],"class_list":["post-1886","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-squads","category-ui-ux"],"_links":{"self":[{"href":"https:\/\/www.kron.digital\/en\/wp-json\/wp\/v2\/posts\/1886","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kron.digital\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kron.digital\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kron.digital\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kron.digital\/en\/wp-json\/wp\/v2\/comments?post=1886"}],"version-history":[{"count":2,"href":"https:\/\/www.kron.digital\/en\/wp-json\/wp\/v2\/posts\/1886\/revisions"}],"predecessor-version":[{"id":1953,"href":"https:\/\/www.kron.digital\/en\/wp-json\/wp\/v2\/posts\/1886\/revisions\/1953"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kron.digital\/en\/wp-json\/wp\/v2\/media\/1887"}],"wp:attachment":[{"href":"https:\/\/www.kron.digital\/en\/wp-json\/wp\/v2\/media?parent=1886"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kron.digital\/en\/wp-json\/wp\/v2\/categories?post=1886"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kron.digital\/en\/wp-json\/wp\/v2\/tags?post=1886"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Definindo o User Interface (UI)<\/h2>\n
A diferen\u00e7a entre UX e UI<\/h2>\n
Como o UX e UI trabalham juntos<\/h2>\n
Conte\u00fados relacionados:<\/h3>\n
\n