Marco Pecchy | Portfólio Digital | User Interface & User Experience
top of page

User Interface & User Experience

A interface do usuário através da experiência do usuário

Já está mais que na hora de desmistificar estes dois conceitos fazendo as devidas abordagens específicas.
Na maioria das pesquisas relacionadas a UI (User Interface) e UX (User Experience), encontrei muitos artigos explicando a diferença entre os dois conceitos, creio que por conta da semelhança na nomenclatura e a relação direta e indireta em sua utilização. Contudo são conceitos bem distintos, como no exemplo abaixo.

Interface do Usuário | Marco Pecchy | Design & Marketing
Até uma simples Folha de Papel pode representar uma Interface de Usuário.

Interface de Usuário

Interface de Usuário

Experiência do Usuário | Marco Pecchy | Design & Marketing
Esta mesma folha de papel dobrada em formato de Avião, pode representar a Experiência do Usuário.

Experiência do Usuário

Experiência do Usuário

Definir UI & UX, alguém consegue?

Para sintetizar as inúmeras definições encontradas na internet sobre UI (Interface de Usuário) a mais apropriada é a do Wikipédia, mas quando direcionamos esse conceito para a web a interpretação pode sofrer algumas variações como na interação do "Homem X Máquina", na qual os componentes de software trabalham a favor do usuário a partir de uma interface gráfica, que depende de um hardware para processá-las produzindo efeitos e resultados a partir das ações do utilizador.

Para as inúmeras definições de
UX (Experiência do Usuário) encontradas na internet, a do Wikipédia também é a mais apropriada e os conceitos são totalmente voltados para as aplicações na web. Entretanto, podemos afirmar que os conceitos de UX (que é experiência do usuário) na prática, também podem ser aplicados em conceitos fora da web.

Então qual seria a resposta para estes dois conceitos tão importantes ?

Podemos afirmar que a Wikipédia oferece uma ótima definição dos conceitos de UI e UX voltados para

interface gráfica e aplicações web, porém quando atribuímos esses conceitos com outras aplicações, 
surge a necessidade de distinguir a forma de interação para não relacionarmos com outras aplicações.

Distinção de UI e UX com interação direta e indireta

Como a proposta aqui é voltada para a interação humana, vamos observar algumas atribuições importantes no planejamento de UI (Interface do Usuário), voltados para UX (Experiência do Usuário), onde toda a interface de usuário é elaborada a partir das experiências do usuário, mesmo que indiretamente como no exemplo abaixo:

Botão ON/OFF possui relação direta com UI e indireta com UX.

ON/OFF

Interação direta com UI (Interface do Usuário).
O botão "slide" foi projetado para emitir uma resposta direta ao usuário de acordo com a sua preferência.

Interação indireta com UX (Experiência do Usuário).

O "estado" ON/OFF, só sofre alteração quando o indivíduo faz a escolha de acordo com sua preferência.

Semáforo possui relação indireta com UI e direta com UX.

SEMÁFORO

Interação indireta com UI (Interface do Usuário).
Foi projetado para enviar informações diretas ao usuário de maneira ativa.

Interação direta com UX (Experiência do Usuário).

Uma vez que o indivíduo absorve a informação, ele deve interagir conforme o "estado".

Antes de implementar UI no seu site, primeiro escolha o tipo de interação que você vai oferecer para a sua audiência.

No exemplo do Botão ON/OFF, entende-se que a sua Interface de Usuário oferece opções para o utilizador escolher qual tipo de experiência ele quer ter a partir da sua interação.

 

Já no caso do Semáforo (usado como metáfora para melhor compreensão), podemos aproximar esse mesmo conceito quando encontramos um contador regressivo nas páginas de um site.
Essa
Interface de Usuário força o utilizador a tomar uma decisão e não oferece opções de interação.

Pontos positivos e negativos da... "relação"

Os dois conceitos têm seus pontos positivos e negativos, tudo vai depender do tipo de campanha ou proposta oferecida.
A escolha da Interface de Usuário é de extrema importância, pois influencia diretamente na Experiência do Usuário, por isso defina primeiro um UX favorável para o seu cliente, depois elabore o UI com base na interação do utilizador.
 

De forma bem resumida, UI (Interface de Usuário) é basicamente a interação criada para envolver o usuário através do seu layout e informações, enquanto que UX (Experiência do Usuário), é a percepção do usuário baseada em experiências, sentimentos e emoções relacionadas a sua interação com uma interface.

Como mencionei acima, UI e UX possuem várias definições diferentes por conta da diversidade de aplicações que esses conceitos se encaixam, entretanto é importante definir à que se atribui para que não haja confusão.

Considerando essas observações vamos à alguns exemplos de UI e UX
voltados para Interface Gráfica e Aplicações Web.

Interface Gráfica

No exemplo abaixo podemos relacionar os dispositivos de entrada como botões, alavancas, pedais, teclados e até a própria tela touchscreen com os elementos de UI (User Interface). Já os elementos de UX (User Experience) estão relacionados diretamente com os dispositivos de saída, onde o utilizador recebe as informações e interage conforme a necessidade.

Cockpit Audi RS 4 | Interface Gráfica em UI e UX
Audi RS 4 | UI (Interface do Usuário)
Audi RS 4 | UX (Experiência do Usuário)
UI
UX
RESET

Exemplo de Interface do Usuário em Cockpit de um automóvel esportivo

Exemplo de Experiência do Usuário em Cockpit de um automóvel esportivo

Aplicações Web

Abaixo temos 3 modelos de layout que integram 4 dispositivos diferentes a uma única interface.
Mais um exemplo de que a
Interface de Usuário (User Interface), pode sim ter suas próprias características de design sem comprometer a Experiência do Usuário (User Experience). Estes dois conceitos UI e UX, quando elaborados da forma correta proporcionam experiências sensitivas e emocionais através da informação e do entretenimento.

Software de Edição de Áudio | Apple Logic Pro X
Página do Site Marco Pecchy | Portfólio UI & UX
Desktop & Home Screen | MP Studio
Página Portfólio UI & UX
Desktop & Home Screen
Apple Logic Pro X

Conclusão da abordagem

Com base nesses exemplos podemos assimilar que, todos os meios de implementação em UI e UX possuem de alguma forma interação direta e indireta através das interfaces gráficas e seus dispositivos de entrada e saída.

A princípio, 
a implementação de UI sempre depende de UX, entretanto para uma boa execução destes dois conceitos é necessário fazer um planejamento com foco na experiência final do usuário e a relação entre UI e UX.

Saiba que é
essencial balancear os conceitos de UI e UX na criação das interfaces, também como na implementação dos conceitos para os dispositivos de saída. Dado o fato de que tudo se inicia no departamento de artes, devemos lembrar que a prioridade e o foco devem estar sempre voltados para a experiência do usuário (UX).

Seguindo essa linha de raciocínio, fica mais fácil interpretar os dois conceitos como um todo.

Se você se identificou com essa pequena amostra da nossa interpretação para com os conceitos de UI e UX, preencha o formulário abaixo.

Além dos dados pessoais, descreva com detalhes sua área de atuação e pontos específicos para a criação a elaboração do seu projeto de UI e UX.

Coletamos informações neste formulário na intenção de realizar uma abordagem posterior.

Sua mensagem foi enviada com sucesso!

Aviso:  O tempo de resposta das mensagens recebidas é de até 48 horas para os dias úteis, finais de semana e feriados.

Formulário Planejamento UI & UX

O envio das informações é livre, portanto não haverá qualquer tipo de cobrança e nos excluímos de eventuais compromissos até o momento da abordagem e planejamento decorrente.

A triagem das informações coletadas é realizada em horário comercial e o tempo de resposta após o envio é de até 48 horas.

O prazo para a avaliação dos releases após a triagem pode variar de acordo com a complexidade das informações recebidas.

Dúvidas, use o campo de descrição acima para enfatizar quaisquer outras informações pertinentes que considere necessárias.

bottom of page