O retorno desse tipo de a\u00e7\u00e3o \u00e9 evidente. A Amazon, por exemplo, construiu um verdadeiro imp\u00e9rio sob a \u00f3tica das necessidades e satisfa\u00e7\u00e3o dos clientes. O mesmo fez a Netflix, que ainda evoluiu essa vis\u00e3o e incorporou a experi\u00eancia do usu\u00e1rio ao n\u00facleo de seus processos de trabalho, gerando vincula\u00e7\u00e3o com os clientes.<\/p>\n\n\n\n
Com o surgimento de novos modelos de neg\u00f3cios e a acelera\u00e7\u00e3o do processo de transforma\u00e7\u00e3o das empresas, popularizaram-se as chamadas estrat\u00e9gias user-centric, nas quais todos os aspectos do neg\u00f3cio passam a ser estruturados tendo as necessidades dos usu\u00e1rios como pe\u00e7a central.<\/p>\n\n\n\n
Nesse movimento, 2 disciplinas que s\u00e3o os grandes motores desta hist\u00f3ria ascenderam ao posto de motores de mudan\u00e7a e facilitadores desse processo: o UX e o UI.<\/p>\n\n\n\n
Mas o que s\u00e3o elas, quais suas diferen\u00e7as e por que s\u00e3o importantes para a sua organiza\u00e7\u00e3o? Continue lendo e entenda de uma vez por todas quando usar UX e UI nos seus projetos!<\/p>\n\n\n\n
UX \u00e9 a abrevia\u00e7\u00e3o do termo user experience <\/strong>e refere-se \u00e0 experi\u00eancia do usu\u00e1rio. O UX Design, ou User Experience Design, \u00e9 essencialmente sobre como o usu\u00e1rio se sente ao realizar uma determinada tarefa em um contexto f\u00edsico ou digital.<\/p>\n\n\n\n O que a experi\u00eancia do usu\u00e1rio faz \u00e9 reduzir atritos para que o usu\u00e1rio atinja um determinado objetivo da forma mais simplificada poss\u00edvel, gerando um sentimento positivo durante este processo. Para isso, a disciplina considera aspectos como usabilidade, percep\u00e7\u00e3o de valor, efici\u00eancia na execu\u00e7\u00e3o de tarefas, entre outras vari\u00e1veis. UX \u00e9 uma vis\u00e3o de neg\u00f3cio, uma convic\u00e7\u00e3o. Assim, podemos definir a experi\u00eancia do usu\u00e1rio como a busca pela m\u00e1xima sinergia em todos os pontos de contato de uma empresa de forma a colaborar para os objetivos do neg\u00f3cio.<\/p>\n\n\n\n UX n\u00e3o \u00e9 s\u00f3 sobre emo\u00e7\u00f5es. \u00c9 sobre neg\u00f3cios<\/strong><\/p>\n\n\n\n \u201cUI \u00e9 sobre raz\u00e3o e UX \u00e9 sobre emo\u00e7\u00e3o\u201d. Se voc\u00ea n\u00e3o esbarrou com essa frase ainda, demos alguma sorte. Porque assim escapamos de um reducionismo muito comum quando falamos sobre experi\u00eancia do usu\u00e1rio. Tentaremos fazer algo diferente disso aqui.<\/p>\n\n\n\n UX \u00e9 hoje o pilar central da estrat\u00e9gia digital de todas as empresas que performam bem no contexto digital. Porque user experience \u00e9 essencialmente sobre entender e antecipar as necessidades do usu\u00e1rio para oferecer solu\u00e7\u00f5es de neg\u00f3cios mais aderentes. <\/p>\n\n\n\n \u00c9 claro, est\u00e1 provado que uma boa experi\u00eancia constr\u00f3i um tipo de \u201cvincula\u00e7\u00e3o emocional\u201d entre marca e cliente (ali\u00e1s, falamos disso neste webinar sobre o setor financeiro). E, em um contexto de neg\u00f3cios em que o custo de aquisi\u00e7\u00e3o de clientes \u00e9 5 a 7 vezes maior do que ret\u00ea-los, isso faz total diferen\u00e7a.<\/p>\n\n\n\n Entretanto, quem explica UI e UX de maneira simpl\u00f3ria, est\u00e1 ignorando todo o trabalho de arquitetura de informa\u00e7\u00e3o, pesquisa, entrevistas, testes de usabilidade e muito mais. Antes da emo\u00e7\u00e3o, vem a estrat\u00e9gia.<\/p>\n\n\n\n A sigla UI significa user interface <\/strong>(em portugu\u00eas, Interface do Usu\u00e1rio). Portanto, o UI Design, ou User Interface Design, pode ser definido como a disciplina que estuda os meios atrav\u00e9s dos quais um usu\u00e1rio consegue interagir com uma determinada aplica\u00e7\u00e3o, monitor, dispositivo ou software.<\/p>\n\n\n\n O design de interfaces \u00e9 respons\u00e1vel por guiar as intera\u00e7\u00f5es dos usu\u00e1rios durante a realiza\u00e7\u00e3o de uma tarefa por meio da comunica\u00e7\u00e3o visual em uma interface. Essa din\u00e2mica pode acontecer por meio de bot\u00f5es, menus, controle de voz e at\u00e9 mesmo gestos.<\/p>\n\n\n\n O UI design est\u00e1 relacionado \u00e0s intera\u00e7\u00f5es entre a interface e o usu\u00e1rio. Podemos dizer que UI trabalha com as melhores pr\u00e1ticas de design de interfaces\/telas e usabilidade para tangibilizar a estrat\u00e9gia de UX. \u00c9 considerado a ponte entre UX e o usu\u00e1rio.<\/p>\n\n\n\n Apesar de lidar com a quest\u00e3o visual em si, o design de interfaces n\u00e3o \u00e9 essencialmente sobre apar\u00eancia. \u00c9 sobre sinalizar ao usu\u00e1rio de forma clara o caminho mais simples para cumprir o objetivo da intera\u00e7\u00e3o por meio de elementos visuais.<\/p>\n\n\n\n UI est\u00e1 dentro de UX, mas n\u00e3o \u00e9 menos importante. E nem s\u00f3 sobre telas.<\/strong><\/p>\n\n\n\n \u00c9 uma teoria bem aceita de que UI design est\u00e1 dentro do UX design. Em diversas representa\u00e7\u00f5es Internet afora, \u00e9 poss\u00edvel ver a experi\u00eancia do usu\u00e1rio no topo, como um guarda-chuva. N\u00e3o \u00e0 toa, muitos profissionais se apresentam como UX\/UI designers. \u00c9 muito mais do que criar telas bonitas (apesar de este tamb\u00e9m ser um requisito). Portanto, UI afeta diretamente UX. E exige um conjunto de conhecimentos espec\u00edficos e boas pr\u00e1ticas interdisciplinares para cumprir seu objetivo.<\/p>\n\n\n\n UX e UI possuem muitas semelhan\u00e7as.<\/p>\n\n\n\n Por serem disciplinas oriundas de uma mesma \u00e1rea do conhecimento, consideradas complementares, de f\u00e1cil integra\u00e7\u00e3o nos times e utilizadas em conjunto nas estrat\u00e9gias de neg\u00f3cios, h\u00e1 uma confus\u00e3o que ronda as mentes do p\u00fablico n\u00e3o especializado em termos de experi\u00eancia, intera\u00e7\u00e3o e usabilidade.<\/p>\n\n\n\n Afinal, quais s\u00e3o as diferen\u00e7as entre UX e UI?<\/p>\n\n\n\n Sabemos que discuss\u00f5es sobre usabilidade e experi\u00eancia podem ficar meio h\u00edbridas demais eventualmente \u2014 e n\u00e3o \u00e9 incomum misturarmos as esta\u00e7\u00f5es. Acontece que user experience<\/strong> e user interface <\/strong>tamb\u00e9m possuem algumas diferen\u00e7as importantes.<\/p>\n\n\n\n O blog Web Design Depot<\/a> tem uma analogia certeira para explicar a diferen\u00e7a entre user experience e user interface: \u201cUI is the saddle, the stirrups, and the reigns. Tomemos como exemplo um site, ou melhor, uma landing page, que tem como objetivo a convers\u00e3o. No momento em que algu\u00e9m entra nesse site, h\u00e1 uma s\u00e9rie de a\u00e7\u00f5es que essa pessoa precisa fazer, pensadas com base em uma estrat\u00e9gia de neg\u00f3cio.<\/p>\n\n\n\n Para que o usu\u00e1rio chegue no desfecho desejado, \u00e9 preciso gui\u00e1-lo. \u00c9 nesse contexto mais f\u00edsico, de intera\u00e7\u00e3o que entra o UI, projetando e estilizando as interfaces que ser\u00e3o usadas diretamente por esse usu\u00e1rio.<\/p>\n\n\n\n UI trabalha visualmente nesta p\u00e1gina, sendo respons\u00e1vel por comandar as a\u00e7\u00f5es desse usu\u00e1rio at\u00e9 o objetivo com o menor n\u00famero de atritos poss\u00edvel. Dessa forma, o UI designer utiliza recursos como contraste de cores, destaques e at\u00e9 espa\u00e7o em branco para mostrar quais a\u00e7\u00f5es s\u00e3o permitidas.<\/p>\n\n\n\n User experience<\/strong><\/p>\n\n\n\n Podemos definir UX como o qu\u00e3o amig\u00e1vel uma intera\u00e7\u00e3o ser\u00e1 para o usu\u00e1rio e engloba todos os aspectos do processo de desenvolvimento de um produto, por exemplo, desde a arquitetura da informa\u00e7\u00e3o, usabilidade, at\u00e9 o conte\u00fado.<\/p>\n\n\n\n Ainda sobre o digital, vamos falar de e-commerce desta vez. Pense no seguinte cen\u00e1rio. Durante o per\u00edodo de home office, voc\u00ea decide organizar um espa\u00e7o de trabalho em casa e inicia a busca por uma cadeira de computador.<\/p>\n\n\n\n O item que voc\u00ea quer est\u00e1 esgotado na maioria das lojas. Ao encontr\u00e1-lo, voc\u00ea v\u00ea um \u00edndice de satisfa\u00e7\u00e3o dos clientes menos confi\u00e1vel do que o recomendado. Mesmo assim, segue para a compra e, ao colocar o item no carrinho virtual, observa um pre\u00e7o cerca de 10 vezes maior \u2014 e o item repetido 10 vezes.<\/p>\n\n\n\n Ali se depara com a mensagem de que h\u00e1 uma quantidade m\u00ednima para comprar. Voc\u00ea entra em contato com a loja. Depois de explicar a situa\u00e7\u00e3o, o atendente te diz que \u00e9 poss\u00edvel comprar a unidade e te d\u00e1 um prazo de 48h para que o problema seja resolvido. Agora que voc\u00ea j\u00e1 entendeu o que s\u00e3o e como se complementam, vamos elencar as principais diferen\u00e7as<\/strong> entre os 2 conceitos. E para isso, trouxemos um mini-gloss\u00e1rio sobre UX e UI, s\u00f3 para garantir que voc\u00ea consiga se localizar quando escutar uma ou outra palavra-chave. D\u00ea uma olhada!<\/p>\n\n\n\n UX Design<\/strong><\/p>\n\n\n\n UI Design<\/strong><\/p>\n\n\n\n Bem, aqui temos 2 pontos de vista para explorar. A primeira do ponto de vista da integra\u00e7\u00e3o entre UX e UI. A segunda, do retorno do investimento em UX.<\/p>\n\n\n\n Integra\u00e7\u00e3o UX e UI<\/strong><\/p>\n\n\n\n Bem, a verdade \u00e9 que \u00e9 bem mais f\u00e1cil integrar UX e UI do que us\u00e1-los separadamente, principalmente no contexto digital, em que \u00e9 necess\u00e1rio ter uma interface como meio de realizar a\u00e7\u00f5es. Al\u00e9m disso, parece improv\u00e1vel que profissionais de UI e UX n\u00e3o conversem. <\/p>\n\n\n\n UX e UI s\u00e3o abordagens que n\u00e3o competem, pelo contr\u00e1rio, se complementam. \u00c9 a uni\u00e3o das 2 frentes que vai compor a experi\u00eancia final do usu\u00e1rio. Ali\u00e1s, essa constru\u00e7\u00e3o n\u00e3o \u00e9 um processo linear e exige revis\u00e3o com frequ\u00eancia. Portanto, n\u00e3o h\u00e1 uma escolha a fazer entre uma e outra. Use ambas!<\/p>\n\n\n\n
A experi\u00eancia do usu\u00e1rio, no entanto, vai al\u00e9m de fornecer aos clientes apenas aquilo que os usu\u00e1rios querem. UX \u00e9 sobre construir a experi\u00eancia mais fluida durante a jornada de intera\u00e7\u00e3o do usu\u00e1rio final com produtos e servi\u00e7os de uma empresa.<\/p>\n\n\n\nO que \u00e9 o UI Design e como atua?<\/h2>\n\n\n\n
De fato, n\u00e3o h\u00e1 como n\u00e3o relacionar as \u00e1reas. Entretanto, apesar do UI ter a fun\u00e7\u00e3o de tangibilizar a estrat\u00e9gia, o design de interfaces t\u00eam seus pr\u00f3prios indicadores de performance a atingir, em princ\u00edpios como harmonia, layout, navega\u00e7\u00e3o, sinaliza\u00e7\u00e3o, entre outros elementos. <\/p>\n\n\n\nUX e UI: quais as diferen\u00e7as?<\/h2>\n\n\n\n
<\/p>\n\n\n\n
UX is the feeling you get being able to ride the horse and rope your cattle.<\/strong>\u201d<\/p><\/blockquote>\n\n\n\n
Legenda: <\/strong>em tradu\u00e7\u00e3o literal, \u201cUI \u00e9 a sela, os estribos e as r\u00e9deas. UX \u00e9 a sensa\u00e7\u00e3o que voc\u00ea tem de poder montar o cavalo e la\u00e7ar seu gado.\u201d
Rapidamente, tentaremos ilustrar essa diferen\u00e7a com exemplos pr\u00e1ticos:
User Interface<\/strong><\/p>\n\n\n\n
Ap\u00f3s o prazo voc\u00ea volta ao site, tenta comprar um item e o pre\u00e7o est\u00e1 diferente – bem maior por ser unit\u00e1rio. Depois de novo contato, voc\u00ea volta novamente ao site e 10 unidades aparecem em seu carrinho ao selecionar uma cadeira.
Ap\u00f3s as 3 tentativas frustradas, \u00e9 bem prov\u00e1vel que ao fim dessa jornada voc\u00ea desista de comprar no site e v\u00e1 para a concorr\u00eancia. Isso acontece por causa de uma experi\u00eancia ruim; Mas al\u00e9m da sua insatisfa\u00e7\u00e3o, a falta de investimento da loja em UX jogou fora uma oportunidade de venda.<\/p>\n\n\n\n
\n\n\n\nPor que devemos usar UI e UX em projetos?<\/h2>\n\n\n\n