Nos últimos tempos, tem se tornado comum a confusão entre os termos User Interface (ou UI) e User Experience (ou UX). Designers e desenvolvedores front-end sofrem muito com essa confusão.

No TreinaWeb, recebemos muitas perguntas dos alunos e, apesar de serem conceitos intimamente relacionados (o que ajuda na confusão entre estes dois pontos), UI e UX na verdade são coisas conceitualmente bem diferentes!

Vamos entender melhor quais são essas diferenças.

É hora de fazer um bolo para explicar sobre User Interface e User Experience!

Para entendermos melhor qual é o papel da User Interface e User Experience, respectivamente UI e da UX, vamos imaginar que estamos confeccionando um bolo.

De cara, já podemos enxergar duas responsabilidades distintas: uma é a responsabilidade estética, que se preocupa com a maneira como o bolo será apresentado para quem for comê-lo.

Perceba que essa responsabilidade fica praticamente para a cobertura do bolo. A outra responsabilidade é o prazer, o sabor e a sensação de saciedade que quem for comer o bolo deverá sentir, fazendo com que mais e mais pessoas queiram saboreá-lo.

Entenda que, além da cobertura em si, é preciso considerar também o recheio (que dá sabor ao bolo) e a massa (que dá a sustância).

Agora, é importante lembrarmos que a cobertura ajuda também neste ponto: por mais que tenhamos um bolo com recheio e massa saborosos, provavelmente ele será rejeitado por ser feio – a cobertura do bolo acaba impactando na percepção sobre ele.

Ambas as responsabilidades estão diretamente relacionadas aos conceitos de UI e UX.

Onde está a UI do nosso bolo?

A questão da User Interface (UI) está mais relacionada à parte decorativa do bolo, ou seja, à cobertura e demais decorações.

A User Interface está mais relacionada à maneira como o bolo será apresentado para o consumidor. De acordo com nosso paralelo, se tratássemos de uma aplicação web, por exemplo, a UI seria a parte de “desenho” do site e a maneira como ele seria apresentado para os usuários, incluindo aspectos como paletas de cores a serem utilizadas, fontes e tudo mais.

A UI fica responsável por tentar seduzir o usuário pela aparência. Aspectos relacionados à maneira como o usuário vai interagir com a aplicação também são incorporados dentro do campo da UI.

Perceba que a UI é um aspecto importante, pois caracteriza, geralmente, o primeiro contato que o usuário terá com o site ou aplicação web. Seres humanos são muito guiados por aspectos visuais e por sensações.

Portanto, uma user interface bem desenhada e pensada pode ser o primeiro passo para prender um usuário dentro de um site. No caso de um bolo, esse é o primeiro passo para convencer alguém a comê-lo (ou não!).

Imagine dois bolos: o primeiro mais simples, sem cobertura e com um aspecto assimétrico. Por sua vez, o segundo é melhor construído, uniforme e tem uma cobertura personalizada.

Qual bolo chama mais a sua atenção e dá mais vontade de comer?

Muito provavelmente você se sente mais seduzido pelo bolo com a estética mais agradável, já que parece mais gostoso e até mesmo mais profissional, justamente por seu apelo visual.

Continuando com o nosso paralelo com sites e sistemas web, a UI de um site que se parece mais com o segundo bolo, em tese, é mais bem-feita e bonita que a UI do primeiro bolo.

Um bom projeto de UI precisa garantir uma harmonia visual dentro de um site ou aplicação web. Além disso, precisa garantir que o usuário conseguirá acessar as funcionalidades oferecidas pelo site, independentemente da situação na qual é acessado.

Veja que a UI também precisa cuidar para que a interação com o site ou aplicação web seja a melhor possível. Se um site é agradável visualmente, harmonioso e suas funcionalidades são de fácil acesso, mesmo em um ambiente mobile, por exemplo, provavelmente possui um bom projeto de UI.

Aqui, entra aquela máxima que provavelmente você já viu no seu Facebook ou em alguma outra rede social: “a interface de usuário é como uma piada: se você precisa explicá-la, isso significa que ela pode não ser tão boa”.

Podemos citar algumas técnicas e ferramentas que estão diretamente relacionadas com a questão da UI: prototipagem, estudos de branding, implementações de animações, etc.

Onde está a UX do nosso bolo?

A User Experience (ou UX) é algo mais global do que a UI. Ela está muito relacionada à experiência que o usuário terá, no nosso exemplo, ao comer o bolo.

Ela está relacionada às sensações de prazer que alguém terá ao comê-lo, além de se preocupar em fidelizar a pessoa, fazendo com que ela sempre sinta vontade em comer o bolo novamente.

Pense em um bolo comprado pela primeira vez em uma confeitaria.Se você prova esse bolo pela primeira vez e o acha maravilhoso, você provavelmente voltará e comprará o bolo novamente.

Nesse caso, você teve uma boa experiência com aquela confeitaria, o que acabou te fidelizando a ela. A confeitaria teve um bom projeto de UX. Provavelmente o bolo tem recheio e massa maravilhosos, o que aumentou sua vontade de comprá-lo de novo.

Também entra aqui o atendimento que você teve na confeitaria. Se o atendimento foi bom, você também sentirá vontade de voltar outra vez para comprar outra coisa. Se há a possibilidade de que o bolo seja entregue na sua casa, melhor ainda! Tudo isso faz parte da UX.

Trazendo esse paralelo de volta para sites e sistemas web, podemos dizer que a User Experience, nesses casos, faz relação com a percepção que o usuário tem ao interagir com o site ou aplicação web.

Quando um site consegue responder de maneira adaptativa e responsiva a um acesso feito via smartphone.

Por exemplo, aqui temos um caso de User Experience: o site se “molda” para se adaptar à modalidade de acesso que o usuário está utilizando, facilitando o acesso ao usuário. Essa facilidade conferida é que é o grande ponto da User Experience.

A User Experience de um site visa que o usuário tenha prazer e se sinta feliz e realizado ao acessar um site ou aplicação web. Ela tenta garantir que tudo está facilmente ao alcance do usuário sem nenhuma complicação.

Outros aspectos não tão claros assim podem ser incorporados ao domínio da UX. Como, por exemplo, a velocidade de resposta às ações que um usuário ordena, a adaptabilidade a diferentes situações de acesso (tamanho do viewport do dispositivo, largura de banda, etc.) e a oferta de recursos que podem facilitar a utilização do site ou de suas funcionalidades oferecidas.

Também podemos citar ferramentas e técnicas que estão ligadas ao aspecto da User Experience: wireframes, testes funcionais e de interação, acompanhamento do processo de desenvolvimento, etc.

No fim das contas (…)

No fim das contas, a User Experience está mais preocupada com as sensações e com as emoções que o usuário tem ao acessar algum determinado recurso, o que a torna um aspecto mais comportamental do que necessariamente técnico.

Ela busca garantir que o usuário se sinta feliz e realizado ao utilizar um site, fidelizando-o. Perceba que o grande foco é a percepção do usuário ao interagir com uma aplicação.

Já a User Interface foca mais na maneira em como o site será apresentado para o usuário, independentemente do local onde será apresentado. Ela visa garantir harmonia e acessibilidade ao conteúdo.

O norte dos estudos sobre User Interface é garantir que o usuário terá uma interface para interação clara, concisa e acessível, independente do meio pelo qual ela está sendo acessada.

O conceito ainda parece confuso?

É que se tratam de dois conceitos que se confundem, realmente mesmo. Na verdade, você pode acabar pensando na UI como um subconjunto da UX. Não tem como o usuário ter uma boa experiência de utilização em um site se o mesmo não possui um bom projeto de UI.

Se estamos tratando de aplicações web, não tem como um usuário se sentir satisfeito e feliz se, ao acessar um site através de um dispositivo móvel, este não se apresente de forma adequada para um dispositivo com viewport menor.

Perceba que, houve uma falha no projeto de UI, já que a interface não conseguiu se comportar da melhor maneira para aquele usuário. Essa falha no projeto de UI acabou causando uma falha também no projeto de UX.

Pois o usuário acabou não tendo uma boa experiência nessa situação e, fatalmente, não irá voltar a acessar o site em questão, já que a percepção deste sobre a aplicação web não foi a esperada.

Nesse caso, não foi a experiência e percepção desejados para usuários que utilizem dispositivos móveis (o que é um problema, estatísticas do IBGE apontam que, no Brasil, a maioria do acesso à internet é realizado através de dispositivos móveis).

Onde entram os designers e os desenvolvedores front-end?

Aqui, realmente temos algo difícil de se definir, pois, como você deve ter percebido, todos são responsáveis por uma boa UX e por uma boa UI, afinal.

Porém, em linhas gerais, podemos dizer que os designers estão mais ligados à UI, já que estes vão ser os maiores responsáveis pela interface em si.

Enquanto os desenvolvedores front-end acabam mais responsáveis pela UX, já que estes têm de garantir uma boa experiência no aspecto geral dentro do site.

No entanto, é bem comum que estas responsabilidades se misturem, ainda mais por serem conceitos tão correlacionados.

Quem é mais importante?

Ambos, User Interface e User Experience são importantes de maneira igualitária, justamente por conta dessa correlação. Pense em uma aplicação que é incrível do ponto de vista visual, mas é incrivelmente chata para ser utilizada.

Ou então, pense em uma aplicação que é supersimples e direta, mas a aparência remete aos anos 2000. Nas duas situações as chances da aplicação fracassar em linhas gerais são muito altas.

Estes exemplos já deixam claros o peso e a importância que tanto a User Interface quanto a User Experience têm para a sobrevivência de um site ou aplicação.

Então, nada de menosprezar o designer ou o front-end: eles podem contribuir para um case de sucesso ou um case de completo fracasso de uma aplicação ou site.

Se você identificou com as disciplinas de UX e UI, continue dando uma olhada em nosso blog e confira os cursos disponíveis no Treinaweb 😉