WBA0180_v2.

Design de Experiência
do usuário - UX
Análise da interface digital
Os aplicativos

Bloco 1
Gabrielly Del Carlo Richene
Videoaula demonstrativa
• Adobe XD e Figma na prática.
Análise da interface digital
Sobre a experiência do usuário

Bloco 2
Gabrielly Del Carlo Richene
Dicas para garantir uma boa UX
• Design gráfico impecável é fundamental.
• Traduz alta qualidade.
• Bom funcionamento dos botões de ação é
fundamental.
• Áreas de respiro entre os elementos gráficos
(texto, imagens, botões de ação).
• Imagens em alta qualidade.
• Cuidado com imagens de qualidade reduzida,
“pixels estourados”.
Experiência do usuário
• Qual aparência deixa você mais feliz/confortável?

Figura 1 – Design da Interface Figura 2 – Design da Interface

para web para web

Fonte: adaptada de Fonte: adaptada de

https://themeforest.net/item/roasted-bean- https://themeforest.net/item/roasted-bean-
creative-coffee-shop-psd- creative-coffee-shop-psd-
template/screenshots/21655486?index=1. template/screenshots/21655486?index=1.
Acesso em: 7 mar. 2022. Acesso em: 7 mar. 2022
Exemplo prático
• Cuidado para não misturar elementos que
não combinam.
• Não é porque você está seguindo o mesmo
estilo gráfico que vai dar certo!
• Próximo slide: os dois são minimalistas, mas
os dois não combinam entre si.
 Atenção à identidade que está sendo trabalhada

Figura 3 – Ícones minimalistas Figura 4 – Mais ícones minimalistas

Fonte:
Fonte: https://elements.envato.com/pt-br/20-
https://www.vistawealthgroup.com/sustainab
design-and-craft-icons-6XRTJD.
le-responsible-impact-investing-sri. Acesso
Acesso em: 7 mar. 2022.
em: 7 mar. 2022.
Análise da interface digital
Apresentação do projeto UX

Bloco 3
Gabrielly Del Carlo Richene
Dicas de design para a apresentação
• Design UX/UI é considerado Design de Produto.
• Criar uma apresentação para o protótipo.
• Se não deu tempo de criar um protótipo real (UI),
desenvolva um design simples com fluxograma

Figura 5 – Fluxograma

Fonte: https://elements.envato.com/pt-br/ux-flowchart-
cards-5XHCEQ. Acesso em: 7 mar. 2022.
Prototipagem
• Os esboços podem resultar em bons protótipos.
• Mantenha a organização no projeto.
• Cuidado para não bagunçar as pranchetas.

Figura 6 – UX

Fonte: https://elements.envato.com/pt-br/ux-flowchart-cards-
5XHCEQ/preview/4. Acesso em: 7 mar. 2022.
Apresentação (protótipo real ou não)
Figura 7 – Presentation

Fonte: https://themeforest.net/item/roasted-bean-creative-coffee-shop-psd-
template/screenshots/21655486?index=0. Acesso em: 4 mar. 2022.
Apps

• Figma.
• Keynote.
• PowerPoint.
• Canva.
• Google Slides.
• Bubble.
• Pitch deck.
Teoria em Prática
Bloco 4
Gabrielly Del Carlo Richene
Reflita sobre a seguinte situação
O Facebook é um serviço da web de acesso gratuito para redes sociais. Os
usuários podem, por exemplo, ingressar em redes, adicionar amigos, postar
comentários de status e itens de mídia e enviar mensagens.
No papel de analista de sistemas da área, realize uma análise da UX do
Facebook. Verifique se os usuários conseguem comparar os seus gostos
com os de outros usuários e deixar comentários para eles.
• O serviço informa aos usuários sobre novos eventos e conteúdos?
• É interessante aos usuários receber mensagens de e-mail do Facebook
quando alguém o aceita como amigo ou outras coisas relevantes
acontecem?
• Como a UX do Facebook se porta em relação à clareza visual da
interface do usuário, suas preocupações de privacidade e a consistência
e a compatibilidade das UIs para os dispositivos móveis e PC?
• De que forma os usuários se portam em relação à apresentação de
anúncios?
Norte para a resolução
• Métricas.
• Feedbacks pessoais (“boca a boca”, comentários em texto).
• Relevância e quantidade de cliques e acessos.
• Engajamento.
• Design: os botões de ação estão bem destacados? As
tipografias possuem um tamanho adequado? É possível
alterar os tamanhos facilmente ou livremente?
Dicas do(a) Professor(a)
Bloco 5
Gabrielly Del Carlo Richene
Leitura Fundamental
Prezado aluno, as indicações a seguir podem estar disponíveis
em algum dos parceiros da nossa Biblioteca Virtual (faça o login
através do seu AVA). Algumas indicações também podem estar
disponíveis em sites acadêmicos como o Scielo, repositórios de
instituições públicas, órgãos públicos, anais de eventos
científicos ou periódicos científicos, acessíveis pela internet.
Isso não significa que o protagonismo da sua jornada de
autodesenvolvimento deva mudar de foco. Reconhecemos que
você é a autoridade máxima da sua própria vida e deve,
portanto, assumir uma postura autônoma nos estudos e na
construção da sua carreira profissional.
Por isso, te convidamos a explorar todas as possibilidades da
nossa Biblioteca Virtual e além! Sucesso!
Indicação de leitura 1
O Capítulo 10 aborda o processo de avaliação de interfaces,
além de apresentar a importância da realização do teste do
usuário, que é uma técnica de usabilidade que ajuda a obter
informações valiosas de seus usuários sobre o porquê e como
eles usam seus produtos, serviços e sistemas. É discu�da a
forma como devemos realizar a preparação para os testes, para
facilitar a compreensão de quem são os usuários e o que eles
estão tentando alcançar com seu produto, serviço ou sistema.
Ao longo desse capítulo, são apresentadas algumas avaliações
que podem ser aplicadas para conseguir obter a percepção do
público-alvo, como a avaliação por usuários experientes/
especialistas, a avaliação baseada no par�cipante, a avaliação na
prá�ca e a avaliação por outras questões.
Referência
BENYON, D. Interação humano-computador. 2. ed. São Paulo: Pearson
Prentice Hall, 2011.
Indicação de leitura 2
O Capítulo 9 apresenta alguns elementos fundamentais para a
composição da qualidade de serviço em governo eletrônico e
arquitetura referencial (AR). Os sistemas de informação que
lidam com a gestão pública estão disponíveis para uso público e
devem ser analisados sob várias perspec�vas, quanto a usuários
e usos, conteúdo de dados e aspectos técnicos, organizacionais
e legais. Nesse capítulo, será possível conhecer as caracterís�cas
de um sistema de informação que está atrelado aos serviços
governamentais e aprender sobre suas caracterís�cas para
conseguir realizar os testes necessários para avaliar a UX desses
projetos.

Referência
OLIVEIRA, F. B. Tecnologia da informação e da comunicação:
a busca de uma visão ampla e estruturada. São Paulo: Pearson, 2007.
Dica do(a) Professor(a)
• @chunbuns no Instagram.
• Busque por projetos inspiradores.
• Área nova no mercado: pratique bastante para tornar-se
alguém de bagagem!
• Desenvolva e aprimore o seu portfólio ao máximo
(recrutadores bisbilhotam portfólios de peso).
• Presentation Design: pitch deck.
• Resumo da ópera: UX/UI Design é Adobe InDesign com
animação de ícones e botões.
Bons estudos!