UI e UX: Conceitos e Processos de Design

Prévia do material em texto

Design de Interação
Responsável pelo Conteúdo:
Prof. Me. Ivan Ordonha Cechinel
Revisão Textual:
Prof.ª Dr.ª Selma Aparecida Cesarin
Conceituando UI e UX
Conceituando UI e UX
 
 
• Conceituar e discutir os processos de design e tecnologia que norteiam as atividades em 
mídias digitais, tratando sobre como lidam com o usuário, conteúdo e contexto, levando em 
conta os multicanais e a onipresença da computação e redes no cotidiano. 
OBJETIVO DE APRENDIZADO 
• Noções de Interfaces – Design Centrado no Usuário;
• Princípios do Design Thinking.
UNIDADE Conceituando UI e UX
Noções de Interfaces – 
Design Centrado no Usuário
Interfaces para Mídias Digitais
Nesta Unidade, vamos tratar de UX Design e as ferramentas conceituais (Design 
Thinking) que podemos utilizar para desenvolver Projetos de Design centrados no usuário.
Não confundir com programação pura como HTML, CSS ou Banco de Dados 
como MySQL, por exemplo. Esse conteúdo se aproxima de outra área do conheci-
mento: Ciência da Computação e seria necessário um tempo muito maior para tratar 
e exercitar esses assuntos.
Quando falamos do universo digital como um todo, é necessário analisar teorias 
e formas de análise baseadas em diretrizes do design, comportamentos, carências 
de Mercado, hábitos sociais, oportunidades de transformação, estratégias de design 
para comunicação social, conceitos e repertório cultural. Esse será nosso foco.
A 4ª Revolução Industrial 
Importante citar, também, que hoje passamos pela chamada 4ª Revolução Indus-
trial, que consiste em um fenômeno complexo de Sistemas cyber-físicos no qual inte-
rage a Internet da Coisas, os dispositivos móveis, soluções de Big Data, serviços de 
cloud computing e cibersegurança e nos quais prevalecem: 
• criatividade;
• informação;
• comunicação;
• intuitivo;
• colaborativo.
As pessoas que ocupam cargos de gestão e que entendam a transformação digi-
tal, aceitando a mudança como única constante na nova economia digital, encontra-
rão inúmeras oportunidades de inovação e criação de valor.
Avanço da tecnologia e escassez de empregos
30 milhões de empregos podem desaparecer em 7 anos, segundo estudo do IPEA 
(Instituto de Pesquisa Econômica Aplicada). 
55% das ocupações hoje, dos empregos formais, já poderiam ser substituídos por 
máquinas ou tecnologia. 
Segundo especialistas, os empregos que não correm risco de desaparecer são os li-
gados à/ao:
• Criatividade
• Comunicação
• Análise
• Improviso
8
9
Comunicação 
Ao falarmos do universo digital, é de grande valia, em paralelo, esclarecer ques-
tões relacionadas à comunicação, de modo geral. 
Em Teoria da Comunicação, um dos princípios primordiais explica que para haver 
comunicação é necessário que haja pelo menos um emissor e um receptor. Assim, a 
mensagem será compreendida. Pode ser verbal ou visual. 
Em muitos momentos, a comunicação anda em paralelo com a criatividade e as 
principais áreas do conhecimento que tratam desse tema, que são o Design Gráfico, 
o Marketing e a Publicidade.
O Designer utiliza criatividade para a busca de soluções visando à transformação 
e à melhoria para a Sociedade. 
Design é projeto, enquanto o Marketing constitui conjunto de técnicas e atividades 
relacionadas ao fluxo de bens e serviços do produto para o consumidor. É implantação 
da estratégia comercial, desde a análise de Mercado (local, regional, nacional e mun-
dial), administração, promoção, publicidade, vendas e o sistema de pós-vendas. 
O Marketing identifica a necessidade e cria a oportunidade. 
Já a Publicidade está ligada à difusão comercial de produtos (engloba: planeja-
mento, criação, produção e veiculação de peças publicitárias). Tem como característica 
a persuasão. Ligada à publicidade, está a propaganda, que é responsável por 
apresentar informação sobre um produto, Empresa, pessoa ou marca. Ambas têm 
como objetivo principal influenciar uma audiência.
Unindo Forças
Marketing é um conjunto de estratégias que necessita da publicidade e do design
para concretizar estratégias. 
A publicidade é uma das diversas ferramentas do marketing, responsável por 
criar, planejar e produzir campanhas publicitárias visando à divulgação das informa-
ções da Marca/produto/Empresa. 
O designer busca concretizar as ideias es-
truturando toda a informação visual. Acima 
de tudo, é um solucionador de questões ine-
rentes a cada projeto.
A Comunicação no universo digital possui muitos caminhos
• Instagram;
• Facebook;
• Youtube;
• Pinterest;
No desenvolvimento de um produ-
to digital, muitas vezes, passamos 
por questões relacionadas as estas 
áreas do conhecimento.
9
UNIDADE Conceituando UI e UX
• Flicker;
• Site;
• Blog;
• Aplicativo;
• Mail chimp/newsletter;
• Revista digital;
• Ebook;
• Catarse;
• E-commerce;
• Apresentação (release de imprensa) PPT/Prezi/PDF;
• QR code;
• Realidade aumentada;
Princípios do Design Thinking
Constitui uma série de recursos da área de design utilizados no desenvolvimento 
de Projetos Digitais.
Representa a busca de soluções por meio da criatividade e coloca o ser humano 
no centro do design, tudo parte da empatia.
Design thinking é cocriação.
Design: projeto/projetar; 
Thinking: pensar/pensando.
Propõe ideias em busca de soluções para problemas conhecidos e depois faz pro-
tótipos e avalia melhorias. 
As etapas de Design Thinking podem variar de acordo com cada Projeto. A seguir 
algumas das etapas mais comuns:
1. Empatia (pesquisa de campo/imersão/discovery);
2. Ideação/proposta solução (após definição do problema);
3. Prototipagem/validação.
UX – User Experience e UI – User Interface
UX trabalha a interação entre pessoa e produto/serviço/aplicativo/ software, en-
tre muitas outras possibilidades.
UI cuida da interface e representa uma parte da experiência do usuário 
10
11
A sigla UX deriva de “experiência do usuário” ou “User Experience Design”, em 
inglês, e busca relação de um determinado produto (que pode ser um aplicativo, um 
site, ou o painel de operação de uma máquina, um eletrodoméstico ou qualquer pro-
duto ou serviço que apresente uma interface) com o usuário, objetivando que essa 
relação seja intuitiva e a mais objetiva e simples possível, encurtando caminhos entre 
interface e usuário.
Cada vez mais essa área ganha importância. Muito antes dos aplicativos, os estu-
dos entre interface e usuário eram feitos em sites, por exemplo, e muitos conheciam 
esta área como “Arquitetura de Informação”. 
O profissional que se dedica especificamente a esta área é chamado UX Designer.
O Significado que A Interface traz para o Usuário
Como fazer UX:
• Projetar para experiência positiva e não somente experiência qualquer;
• Prepara espaços, meios nos quais a experiência possa acontecer;
• Centrado no usuário e isso é que vai determinar como fazer, que código usar, 
que ferramentas utilizar.
A experiência do usuário é referente não apenas ao universo digital, mas também 
pode estar atrelado ao analógico. 
A seguir painel do modelo “Lava&Seca”. Máquina de lavar marca Brastemp na 
qual os ícones dos botões fazem alusão ao universo digital.
Figuras 1 e 2 – Botão liga/desliga semelhante à de alguns modelos de computadores 
e botão inicia/pausa semelhante ao botão “play e pause” de um player digital
Fonte: Acervo do conteudista
Pensando nas Formas de Interação 
com o Usuário (Estudo de Caso)
Como visto, a experiência do usuário é levada em consideração na criação de 
aplicativos e de produtos digitais, de modo geral, e até mesmo analógicos (como nos 
painéis de eletrodomésticos, como no exemplo). 
11
UNIDADE Conceituando UI e UX
Uma Empresa ou Instituição, por exemplo, pode ter diferentes “produtos” ou solu-
ções digitais e manter uma “presença digital” eficiente, levando em consideração não 
apenas os recursos tecnológicos, mas também estratégias de comunicação. 
A seguir. como estudo de caso, analisamos material do projeto Pimp my car-
roça, que constitui sua presença digital por meio de site e perfil em Redes Sociais, 
entre outros.Home do Site
Podemos observar que na home do site apresenta-se um menu carrossel, com 
assuntos em destaque facilitando acesso ao conteúdo. 
A marca está disposta junto ao menu superior (alinhada à esquerda) e, além da 
função estética, a marca é estrategicamente link para a home, de acordo com con-
venções da área de web, baseadas em experiência dos usuários(as). 
Figura 3
Fonte: Acervo do conteudista
Banner Digital
A seguir, o banner traz recurso imagético (foto como plano de fundo) e informação 
verbal (texto/tipografia), expressando solicitação de ajuda de maneira direta e objetiva. 
Aqui, podemos considerar que não apenas os Recursos Digitais tecnológicos são 
importantes para veicular a informação, mas também os recursos gráficos visuais 
contribuem para que a comunicação seja eficaz. 
O uso de diferentes cores para destacar palavras, a fonte do texto principal em 
caixa alta (maiúscula) e estrutura mais densa (em bold) demonstra “peso” visual que 
reforça esta parte do layout como um importante foco de atenção e convite à visu-
alização do observador. 
A foto ao fundo apresenta desfoque e baixa claridade, reforçando o contras-
te com a cores da tipografia acentuando seu impacto visual e contribui para 
12
13
reforçar a mensagem junto ao observador mostrando uma personagem envol-
vida com o tema.
 Os grafismos ao lado direito conferem equilíbrio visual à medida que preenchem 
o espaço ao lado direito do layout.
Figura 4
Fonte: Acervo do conteudista
Perfil no Instagram
Observamos a aplicação da marca do projeto Pimp My Carroça também em ou-
tras interfaces digitais, como, por exemplo, no perfil do Instagram do Projeto, em 
que a marca é utilizada como imagem do perfil e a identidade visual é reforçada por 
meio do recurso cromático, com o verde sendo utilizado nos stories. 
Os temas das imagens postadas são importante recurso para compor um panora-
ma que demonstra ao observador o cotidiano dos participantes do projeto.
Figura 5
Fonte: Acervo do conteudista
13
UNIDADE Conceituando UI e UX
Figura 6
Fonte: Acervo do conteudista
Canal no Youtube
Aqui a marca também participa como imagem do perfil na conta do Youtube do 
Projeto, assim como na loja virtual:
Figura 7
Fonte: Acervo do conteudista
Assista ao canal “Pimp My Carroça”. Disponível em: https://bit.ly/36eo781
14
15
Loja Virtual
Figura 8
Fonte: Acervo do conteudista
Perfil no Pinterest
A seguir, perfil do Pinterest, que reforça a participação digital do Projeto:
Figura 9
Fonte: Acervo do conteudista
Acesse o pinterest do “Pimp My Carroça”. Disponível em: https://bit.ly/3n5MkTI
15
UNIDADE Conceituando UI e UX
Perfil no Facebook
O Facebook constitui importante plataforma de comunicação, na qual, além da 
aplicação da Marca como imagem do perfil, há também espaço para comunicar in-
formações relevantes em destaque por meio da imagem de “capa” no topo da página 
de perfil. 
Figura 10
Fonte: Acervo do conteudista
Acesse o facebook do “Pimp My Carroça”. Disponível em: https://bit.ly/30jdDR3
16
17
Campanha de Financiamento no Catarse
A seguir, página do projeto em Campanha no Catarse:
Figura 11
Fonte: Acervo do conteudista
Acesse o site do “Pimp my Carroça”.Disponível em: https://bit.ly/30meTTs
17
UNIDADE Conceituando UI e UX
Telas do Aplicativo Cataki Associado ao Projeto
Podemos observar, a seguir, que, para compor os layouts desse aplicativo, foram 
utilizadas ilustrações com características de desenhos vetoriais (ilustrações tipicamen-
te utilizadas em infográficos, por exemplo) que se caracterizam por constituir uma 
síntese da forma, confeccionadas por formas geométricas simples como ícones. 
Esse estilo de ilustração tende a ser mais compreensível por pregnância (mais fácil 
de serem assimiladas e guardadas na memória). 
A comunicação por ícones é direta e objetiva, de rápida leitura e compreensão. 
Fundamental perceber, nesse exemplo, como, além da Tecnologia, também é 
importante considerar a arte como recurso importante de valorização do aplicativo. 
Há liberdade de criação mesmo que em um espaço reduzido. Pode-se compor 
uma narrativa por meio de ilustrações e ícones que direcionarão o usuário(a) a ter 
oportunidade de compreensão mais eficaz, favorecendo o fluxo de navegação por 
indicar de maneira não verbal o acesso a demais conteúdos do aplicativo. 
Figura 12
Fonte: Acervo do conteudista
Figura 13
Fonte: Acervo do conteudista
18
19
Figura 14
Fonte: Acervo do conteudista
Figura 15
Fonte: Acervo do conteudista
19
UNIDADE Conceituando UI e UX
Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
 Sites
UX Design
Página sobre UX Design.
https://bit.ly/2G938Zq
 Leitura
7 sites e serviços que não mereciam ter sido encerrados
Matéria sobre serviços que eram oferecidos nos primórdios da web.
https://bit.ly/3kXcwy1
Don Norman e o termo “UX”
Entrevista com Don Norman idealizador da área de UX.
https://bit.ly/3kZkpmE
Este app é como um Uber para os catadores de lixo
Matéria sobre o aplicativo associado ao projeto Pimp My Carroça.
https://win.gs/34el3pA
20
21
Referências
FERREIRA, A. R. Comunicação e aprendizagem: mecanismos, ferramentas e 
comunidades digitais. São Paulo: Erica, 2014. (e-book) 
WHITE, A. Mídias digitais e Sociedade: (Digital media and society). São Paulo: 
Saraiva, 2017. (e-book)
Sites Visitados
DESIGN KIT. The field guide. Disponível em: <http://www.designkit.org//resour-
ces/1>.
21