Oficina: UX/UI Design:

conceitos e aplicações

disciplina: tecnologias contemporâneas e educação

realização: comunicação e multimeios - UEM

 UX/UI Design:
conceitos e aplicações
Yan Amorim
1. Apresentação
A oficina UX/UI Design: conceitos e apli-
cações faz parte de um evento on-line chama-
do Multi.On realizado pelo curso de Comuni-
cação e Multimeios da Universidade Estadual
de Maringá para a disciplina de Tecnologias
Contemporâneas e Educação ministrada pelo
Prof. Me. Tiago Lenartovicz. É organizada
pelos acadêmicos Evandro Leite de Oliveira,
Bianca Caroline Terra Fascio e Hada Milena
Maller.
Pensando na abrangência e constante atu-
alização e renovação do ramo da comunica-
ção é, nem sempre é possível em uma gradu-
ação contemplar todos os temas e vertentes
que essa área oferta. Assim, os cursos direcio-
nados apresentam caminhos que podem ser
explorados pelo profissional, a fim de uma es-
pecialização maior em um determinado tema.
Percebe-se uma dificuldade grande, tanto
2. Objetivos
UX/UI Apresentar os conceitos de User
Experience (UX) e User Interface (UI)
Entender as estruturas e ferramentas
utilizadas no UX e UI
Analisar cases práticos em que os
conceitos se aplicam
Discutir as possibilidades de utilização
do UX e UI no ambiente profissional.
dos estudantes quanto dos contratantes do
mercado, de entender e identificar os concei-
tos de User Experience (UX) e User Interface
(UI), e, desta forma, acabam sendo trabalha-
dos de forma genérica e, consequentemente,
incorreta.
Por esses motivos, propõe-se ofertar uma
oficina introdutório de UX e UI para que o pú-
blico tenha conhecimento dessas problemá-
ticas e, assim, estudar possíveis caminhos e
soluções acerca do tema.
A oficina é ministrada por Yan Amorim, Yan
é UX Designer na Ambev Tech, que está desa-
fiando o status quo de criar uma nova geração
de serviços de cerveja em todo o mundo. Yan
traz mais de 10 anos de experiência prática
humanizando as tecnologias que as pessoas
usam todos os dias por meio do design centra-
do no ser humano.
Yan Amorim
2
3. Conteúdo Programático
3.1 Aula 1 - O Design de Produto
Design de produto é uma área do UI De-
sign que possui algumas subáreas como: pa-
drões comportamentais, necessidades dos
usuários, Design Virtual, animações, prototi-
pagem, estratégias de negócios, análise de
dados, programação e pesquisa.
Product Design é uma área que utiliza de
padrões comportamentais dos usuários
para produzir materiais cada vez mais estimu-
lantes a fim de cativar e até viciar o público
em um produto ou serviço, os exemplos mais
comuns são jogos que trabalham com gami-
ficação e rankeamento para atrair o usuário.
Esses padrões comportamentais são base-
ados em estudos psíquicos para entender a
maneira como as pessoas tendem a agir em
determinadas situações, qual o padrão de lei-
tura, para onde olham primeiro e com qual ve-
locidade.
O design de produto trabalha também com
as necessidades dos usuários. O objetivo,
tanto do UX como UI, é pensar em desenvol-
ver produtos e serviços que resolvam o pro-
blema do usuário da melhor forma e, para
isso, é preciso questionar a necessidade do
seu usuário. Além disso, é preciso pensar no
design visual para entender qual a melhor cor
a ser utilizada e onde cada ferramenta deve
ser colocada, de tal forma que melhore e fa-
cilite a utilização para o usuário, otimizando
suas ações dentro de uma plataforma.
Algumas animações também podem fazer
parte do product design, pensando sempre na
necessidade do usuário e no objetivo do pro-
duto. Essas animações servem também como
estímulo de micro-interações do usuário para
este se engaje cada vez mais. É preciso ser
uma noção básica de programação para en-
tender sobre as limitações da plataforma e sa-
ber o que é ou não possível de realizar dentro
do que se é esperado.
Para toda ação de um product design, é
realizado pesquisa com as pessoas, para
que cada atividade seja assertiva e melhore
a experiência do usuário com base nas suas
necessidades. São realizados ainda, prototi-
pagem e estruturas da mudança que se pre-
tende fazer em um serviço, a fim de ter um
contato visual dessas aplicações na prática.
As estratégias de negócios no product
design são importantes para entender se um
produto é financeiramente viável e se vai tra-
zer um retorno financeiro mínimo que com-
pensa o trabalho esperado. É preciso estar
alinhado com a visão de uma empresa, se o
trabalho for dentro de uma, além de saber as
limitações orçamentais da organização.
Por último, é necessário que haja análises
de dados para mensurar os resultados de um
projeto, saber se as pessoas estão satisfeitas
ou não com o produto. Algumas métricas são
utilizadas para mensurar tais dados, como ín-
dice de engajamento, adoção e NPS (Net Pro-
moter Score).
3
 Diferença entre Product Design e UX Design
Enquanto o Product Design possui como
foco o negócio (qual a visão que a empresa
possui, bases de orçamento, retorno finan-
ceiro), o UX Design tem como foco principal,
o usuário. UX Design é, basicamente, a inte-
ração humano computador (área de progra-
mação, pesquisa e visual) junto à psicologia
cognitiva.
Como o próprio nome sugere, o UX pensa
na experiência completa do usuário, relacio-
Sugestões de cursos
Nielsen Norman Group
nando com questões da psicologia, testando
as condutas do usuário e como estão sentindo
em relação a plataforma. Para isso, é neces-
sário um contato constante com as pessoas,
através, principalmente, de análise de dados
(quantidade de acessos, se estão ou não uti-
lizando alguma ferramenta e quanto tempo é
gasto para cada funcionalidade). O trabalho é
inteiramente realizado para melhorar a expe-
riência do usuário.
Design Foundation
4
 3.2 Aula 2 - Design centrado no ser humano

Fonte: Outwitly - www.outwitly.com/blog/human-centered-design-series-1?format=amp

O trabalho realizado por UX e UI Design Thinking, se desdobra em mais quatro etapas

possui alguns processos a serem seguido.
Design Thinking ou Human Centered De-
sign é uma metodologia com quatro etapas
para entender o design centrado no ser hu-
mano. Sendo 1) descobrir; 2) definir; 3) de-
sign (etapa criativa) ; 4) teste e protótipo.
Outro método possível é o Double Diamond
que, ao invés de fazer as etapas do Design
mais aprofundadas.
Dependendo do produto idealizado, os pro-
cessos e metodologias variam, por outro lado,
o objetivo é o mesmo, uma boa experiência
ao usuário. Para todo projeto, é preciso que
haja a etapa de pesquisas, com entrevistas,
testes A/B (teste para grupos distintos com
produtos/serviços diferentes), questionários,

Fonte: Medium Editorial Aela - www.medium.com/aela/15-anos-do-double-diamond-e-sua-importancia-em-ux-design -22010c979bd9

5
grupo de discussão e pesquisa etnográfica ou
exploratória. Todas essas etapas funcionam
para que haja resultados reais e mais preci-
sos, por isso são indispensáveis.
Como conduzir pesquisas?
A princípio, é necessário ferramentas, seja
um mural online ou aplicativos como Zoom,
Google Docs ou papel e caneta para armaze-
nar informações. A ferramenta certa é impor-
tante na hora da sua pesquisa exploratória e,
para isso, um planejamento prévio é bem-vin-
do. Planejamento é a segunda etapa de uma
Sugestão de site
Design Kit
pesquisa, saber qual é o foco do seu estudo e
quais as metas a serem atingidas. Por último,
a metodologia de pesquisa também é uma
etapa da pesquisa que deve ser levada em
consideração. Não há uma metodologia pa-
drão para todos os casos, elas variam de es-
tudo para estudo. Os métodos são extrema-
mentes importantes para o desenvolvimento
de pesquisas.
Para definir sua pesquisa, é importante di-
ferenciar em quantitativa ou qualitativa, sendo
a quantitativa quantas vezes ocorre e a quali-
tativa por que e como acontece.
6
 3.3 Aula 3- Principais ferramentas
Este tópico é separado para indicar quais
as principais ferramentas para se utilizar nas
etapas do Design Centrado no Ser Humano,
exibido na aula anterior. As ferramentas que
auxiliam na coleta de dados qualitativos e
quantitativos, são:
1. Condução de dinâmica através do Mural
ou Miro: são plataformas que auxiliam o
pesquisador a organizar e responder algumas
perguntas como: qual o meu objetivo, quais
pessoas serão impactadas com o meu produto,
Fonte: Plays In Business - www.plays-in-business.com/impact-mapping/
Nuggets de pesquisa é um termo utilizado
ao dar início a uma pesquisa. Nada mais é do
que definir quanto precisará ser desempenha-
do em um determinado tipo de estudo para
trazer a melhor experiência ao usuário. Essa
definição pode ser incluída dentro da plata-
forma Notion para que a pesquisa seja mais
detalhada possível.
como elas vão ser impactadas e o que vou
fazer para impactar essas pessoas. Esse
tipo de dinâmica é conhecida como impact
mapping e faz parte da etapa “definir”, dentro
do processo Human Centered Design.
2. Organização dos dados de pesquisa no
Notion: se trata de uma organização de alto
nível que possibilita que você organize, sepa-
re e inclua todo tipo de informação necessá-
ria. A ferramenta Notion também permite que
seja publicado guias e tutoriais para comparti-
lhar de forma pública.
Nas pesquisas de cunho exploratório, pla-
taformas como Google Drive, Google Docs
e Vídeos Conferência em geral, são impor-
tantes para escrever e anotar informações em
formato de storytelling (história narrada dos
acontecimentos da pesquisa); o Google Drive
serve para armazenar vídeos e arquivos que
podem ser compartilhados.
7
 3. Coleta de feedbacks com Hotjar: a fer-
ramenta Hotjar é importante para mensurar
os resultados do seu produto e saber se suas
aplicações possuem um bom feedback ou não.
Dentro da plataforma ainda é possível que o
usuário deixe um comentário com sua opinião.
Nesse caso, Mixpanel e o Google Analytics
também servem para indexação de pesquisa.
Nas etapas finais de uma pesquisa como
na hora de criar protótipos, o Balsamiq é uma
das ferramentas mais famosas, ela é muito
Sugestões ferramentas
Mural
Impact Mapping
HotJar
importante quando o pesquisador precisa ide-
alizar rapidamente um protótipo (conhecido
como baixa fidelidade) do seu produto ou do
seu serviço e quer ir além do papel e caneta.
Agora, para criar protótipos mais avançados e
mais próximo do projeto final (alta fidelidade),
algumas das melhores plataformas é a Fig-
ma e o Adobe XD. Elas servem para visuali-
zar basicamente o que o usuário verá no final
do projeto e por isso demanda mais tempo do
profissional.
Miro
Notion
Mixpanel
8
Sugestões de ferramentas

Google Analytics Balsamiq

Figma Adobe XD

9
 3.4 Aula 4- Os processos na prática
O resultado de uma pesquisa de Design de
Produto e UX Design dependem da experiên-
cia dos usuários e o que é desejado entregar
para eles. Antes de mais nada, é preciso definir
seu objetivo e o que precisa ser feito, seja atra-
vés de palavras-chave, pesquisa de mercado
ou questionários. Caso haja tempo o suficiente
para esta primeira etapa, é desejável que ela
seja feita a partir de pesquisa de campo. As
ferramentas são importantes desde o início do
processo para organizar as ideias iniciais.
O próximo passo é a definição de um obje-
tivo principal e quem serão as pessoas impac-
tadas por esse objetivo. Também chamadas
de personas, são traçados os detalhes sobre a
pessoa como usuário para definir essas infor-
mações, geralmente são utilizados questioná-
rios, na primeira etapa da pesquisa.
Depois de definidas as personas do seu
projeto, a próxima etapa é entender como im-
pactar essas pessoas para atingir seu objetivo
principal. E, por último, o que deve ser feito.
Nesta última etapa é possível visualizar com
Fonte: Designr - www.designr.com.br/fundamentos-sobre-personas-para-ux-design/
mais precisão o produto final e a partir disso,
poderão ser produzidos os primeiros protóti-
pos.
Um profissional de UX Design precisa saber
diagnosticar com dados e tratar as informa-
ções desses diagnósticos com o designer para
saber como deverá ser criados os modelos de
protótipos de alta fidelidade pensando por um
lado visual. Quais cores serem utilizadas, onde
cada ferramenta deve ser colocada e a dispo-
sição dos elementos dentro da plataforma, por
exemplo.
Depois de ter definido seus objetivos e já ter
as primeiras visualizações do produto, é preci-
so definir algumas cores e tipografias possíveis
com base no contexto do projeto. Além disso,
determinar os padrões de espaçamento de for-
ma que seja disposto de maneira fluida. Todos
esses detalhes visuais de design competem ao
usuário o começo de uma boa experiência com
a plataforma. Sites como o Behance é útil para
buscar inspirações para seu projeto, como fon-
tes e ferramentas.
10
Sugestões de site

Case Spotify - Niwa Watkins (www.niyawatkins.com/spotify)

Behance

11
4. Referências e sugestões de leituras

GONZATTO, Rodrigo Freese; DA CRUZ COSTA, Karla. Arquitetura de informação sem wirefra-
me. Perspectivas em Gestão & Conhecimento, v. 1, n. 1, p. 160-181, 2011.

GONZATTO, Rodrigo Freese. Design de Interação e a amanualidade em Álvaro Vieira Pinto.

2014. Dissertação de Mestrado. Universidade Tecnológica Federal do Paraná.

GOTHELF, Jeff. Lean UX: Applying lean principles to improve user experience. O’Reilly Media,
Inc.”, 2013.

JOO, Heonsik. A study on understanding of UI and UX, and understanding of design according to
user interface change. International Journal of Applied Engineering Research, v. 12, n. 20, p. 9931-
9935, 2017.

NORMAN, Donald A. Emotional design: Why we love (or hate) everyday things. Basic Civitas
Books, 2004.

PINHEIRO, Mauro; SPITZ, Rejane. O design de interação em ambientes de ubiqüidade compu-

tacional. In: Congresso Internacional de Design da Informação. 2007.

ZICHERMANN, Gabe; CUNNINGHAM, Christopher. Gamification by design: Implementing game

mechanics in web and mobile apps. O’Reilly Media, Inc., 2011.

12