Design de Experiência Do Usuário - UX: WBA0180 - v2.0

WBA0180_v2.
Design de Experiência
do usuário - UX
Conceitos sobre ergonomia
e usabilidade
O que é e como usar?
Bloco 1
Gabrielly Del Carlo Richene
Conceito
• Você já comprou alguma coisa por ser “ergonômica”?
Figura 1 – Conceito básico sobre ergonomia aplicado à postura.
Fonte: bestsale | bestsale.com. Acesso em: 21 de fev 2022.

Ergonomia em UX
Figura 2 – Ergonomia aplicada em UI/UX.
Fonte: Elaborado pela autora.

Conceito
• Sobre a experiência
• Emoções que despertam, expectativas alcançadas,
realidades geradas
• Onde meu usuário clicará primeiro?
• O objetivo foi atingido? O usuário foi capaz de
realizar o que precisava? Como isso aconteceu?
Demorou? Foi rápido? Frustrante? Feliz?
Conceitos sobre ergonomia e
usabilidade
Conceitos de design ergonômico em UX
Bloco 2
O público-alvo
• O público-alvo informa o tipo de produto
que se espera
• Faixa etária
• Gênero
• Profissão
• Gostos, hobbies, etc
• Antigamente: Facebook era para os jovens.
Hoje, é para todos. Assim como o Whatsapp.
Público-alvo
• Como o meu público-alvo se comporta?

• Aonde eles tem a tendência de clicar primeiro?
• Eles enxergam bem? Qual tipografia é mais
indicada para garantir a boa leitura?
A experiência
• Público idoso
• Menos paciência, menos aptidão com tecnologia.
• Público jovem
• Mais veloz, mais ansioso, tendência a fazer mais
cliques (mesmo que errem mais)
• Acessibilidade: público diferenciado.
Hierarquia tipográfica em Design UX
Figura 3 – Tipografia hierárquica aplicada em UI/UX.

Conceitos sobre ergonomia
e usabilidade
Design UI/UX e Ergonomia
Bloco 3
Professora Gabrielly Del Carlo Richene
Ergonomia em Design
Regras básicas do design gráfico:

• Hierarquia visual
• Combinações de cores
• Diagramação
• Tipografia
• Imagem
Hierarquia aplicada ao Design
• Organização e boa diagramação dos elementos gráficos:
texto, imagens, grid.
• Destaques diferenciados para os elementos, alinhamento
dos mesmos
Figura 3 – Ícones universais de alinhamento.
Fonte: Adobe XD.
• Tipografia: variação entre duas famílias tipográficas, ou uma

família com ampla opção de variação (black, bold, itálico,
regular, light, light itálico, etc)
• Exemplo no próximo slide
Cores em UI/UX
Figura 4 – Monocromacia.
• Monocromática (tom e subtons)
• Análogas
• Complementares/Opostas
• Duotone (2 tons, geralmente gradient)
• Contrastantes
O disco de cores: de onde vem a teoria
Figura 5 – Color Wheel.
Fonte: Wikimedia Commons. Disponível em:

https://commons.wikimedia.org/wiki/Category:Colorwheels#/media/File:
Farbkreis_Itten_1961_RYB.svg. Acesso em: 25 de fev. 2022.
Diagramação Figura 6 – Disposição dos elementos.
Respeito aos espaços do layout:
• Margem
• Espaços em brancos
• Alinhamento
• Grid
• Famílias tipográficas: não usar

a mesma letra para tudo, mas
alternar entre as variações ou
entre famílias que se
complementem

Exemplo
Figura 7 – Feio. Figura 8 – Belo!
Fonte: Elaborado pela autora. Fonte: Elaborado pela autora.

Imagem Figura 9 – Imagem em bom tom e
imagem escura demais.
• Cores equilibradas.
• Saturação e matiz.
• Claridade e escuridão.
• Levar em consideração
o teor de luminosidade
da tela do usuário.
• Qualidade da imagem:
dpi, tamanho.

Teoria em Prática
Bloco 4
Orientações para o Bloco 4
Sabendo que a usabilidade (dentro do campo de
desenvolvimento da web) é a disciplina que estuda como
projetar os produtos (sistemas, sites, projetos) para que os
usuários possam interagir com eles da maneira mais fácil,
confortável e intuitiva, reflita sobre a seguinte situação:
em uma agência de desenvolvimento de sites e projetos
interativos, qual seria a melhor maneira de criar um site
u�lizável e fazer um design focado no usuário, projetando
para e pelo usuário? Como você responderia a essa
solicitação? Seria mais produtivo oferecer ao cliente um
design centrado em tecnologia ou um design focado em
criatividade, ou, ainda, um design focado na originalidade?
Qual alternativa poderia ser oferecida ao cliente para
auxiliar na obtenção dos níveis de qualidade, eficiência,
eﬁcácia e sa�sfação?
Reflita sobre a seguinte situação
• No início, websites possuíam o layout em estilo
portal: cheio de novidades espalhadas por todos os
cantos, como todos os sites de notícias.
• Hoje, o foco está em criar sites que não sufoquem
o leitor com informações, mas que capturem sua
atenção e o transforme em um cliente.
• Ou, ainda, que faça o usuário compreender o que
está sendo repassado naquele site que ele visita.
Norte para a resolução
Figura: Web design moderno. Exemplos de web designs

modernos:
• Landing pages;
• Sites com o mesmo
layout, onde você faz a
rolagem vertical e
acessa todas as
informações necessárias
Fonte: Freepik. Disponível em:
https://www.freepik.com/free-psd/veterinary-
em uma só página;
landing-pages-
concept_7033095.htm#query=landing%20page • Tempo é dinheiro!
&position=11&from_view=search. Acesso em 25 Coloque as informações
Fev., 2022
de maneira prática e
objetiva.
Dicas do(a) Professor(a)
Bloco 5
Professora 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
Nos últimos anos, a sociedade humana evoluiu da “era da sociedade
industrial” para a “era da sociedade do conhecimento”. Isso significa
que o suporte à mídia de conhecimento migrou do “papel e caneta”
para os “sistemas de informação baseados em computador”.
Devido a este fato, a ergonomia assumiu uma importância
crescente, como uma ciência/tecnologia que lida com o problema
de adaptar o trabalho ao homem em termos de usabilidade.
Os capítulos 2 e 3 da obra Ergonomia e usabilidade em ambiente
virtual de aprendizagem apresenta alguns conceitos relevantes de
ergonomia, usabilidade e design centrado no usuário em relação a
sistemas de informação.
Referência ABRAHÃO, J.; MONTEDO, U. B.; MASCIA, F. L.; FLEURY, A. L.;

SANTOS, H. Ergonomia e usabilidade em ambiente virtual de
aprendizagem. São Paulo: Editora Blucher, 2018.
Indicação de leitura 2
Devido ao crescente interesse na qualidade, usabilidade e
experiência do usuário, modelos e estruturas de qualidade
tornaram-se uma área de pesquisa de destaque como um
primeiro passo na avaliação deles.
O capítulo 5 da obra Gestão da qualidade: tópicos avançados
apresenta alguns processos de inclusão da qualidade da
informação e a capacidade de promover a autoaprendizagem
das características de uso e conceitos reais de usabilidade e
experiência do usuário na estrutura de modelagem.
Referência: OLIVEIRA, O. J. Gestão da qualidade: tópicos avançados.

São Paulo: Cengage Learning Brasil, 2012.
Dica do(a) Professor(a)
Para criação de aplicativos, teste o aplicativo

Adobe XD, possui mecanismos interativos e
intuitivos para criação de interface.
Para referências de criação, busque por palavras-
chaves como: “UI UX Design, how to” no Youtube,
Behance e Dribbble.
Para leitura, confira o livro Design Sprint de Jake
Knapp, designer da Google.
Referências
Curso: Design de Produto, Udacity e Google.
Site: www.freepik.com e www.pixabay.com
Livro: KNAPP, J., ZERATSKY, J., KOWITZ, B., Sprint: o método usado
no Google para testar e aplicar novas ideias em apenas 5 dias, 1a
ed., Rio de Janeiro, Intrínseca, 2017.
Bons estudos!

Design de Experiência Do Usuário - UX: WBA0180 - v2.0

Enviado por

Direitos autorais:

Formatos disponíveis

Design de Experiência Do Usuário - UX: WBA0180 - v2.0

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Design de Experiência Do Usuário - UX: WBA0180 - v2.0

Enviado por

Direitos autorais:

Formatos disponíveis

WBA0180_v2.

Figura 1 – Conceito básico sobre ergonomia aplicado à postura.

Fonte: bestsale | bestsale.com. Acesso em: 21 de fev 2022.

Fonte: Elaborado pela autora.

• Como o meu público-alvo se comporta?

Fonte: Elaborado pela autora.

Regras básicas do design gráfico:

Fonte: Adobe XD.

• Tipografia: variação entre duas famílias tipográficas, ou uma

• Duotone (2 tons, geralmente gradient)

Fonte: Wikimedia Commons. Disponível em:

Respeito aos espaços do layout:

• Famílias tipográficas: não usar

Fonte: Elaborado pela autora.

Fonte: Elaborado pela autora. Fonte: Elaborado pela autora.

Fonte: Elaborado pela autora.

Figura: Web design moderno. Exemplos de web designs

Referência ABRAHÃO, J.; MONTEDO, U. B.; MASCIA, F. L.; FLEURY, A. L.;

Referência: OLIVEIRA, O. J. Gestão da qualidade: tópicos avançados.

Para criação de aplicativos, teste o aplicativo

Você também pode gostar