Ergonomia

A ergonomia trabalha em domínios especializados, abordando

características específicas do sistema:

1. Ergononomia Física: Ocupa-se das características da anatomia humana,

antropometria, fisiologia e biomecânica, relacionados com a atividade física.
• Postura, manuseio e movimentos.
SISTEMA HOMEM-MÁQUINA-AMBIENTE SHMA
A ergonomia trabalha em domínios especializados, abordando
características específicas do sistema:

2. Ergonomia Organizacional: Ocupa-se da otimização dos sistemas sócio-

técnicos, abrangendo as estruturas organizacionais, políticas e processos.
• Comunicações, projeto de trabalho, trabalho cooperativo, cultura
organizacional e gestão da qualidade.
SISTEMA HOMEM-MÁQUINA-AMBIENTE SHMA
A ergonomia trabalha em domínios especializados, abordando
características específicas do sistema:

• 3. Ergononomia Cognitiva: Ocupa-se dos processos mentais, como a

percepção, a memória, raciocínio e resposta motora, relacionados com as
interações entre as pessoas e outros elementos de um sistema.
• Carga mental, tomada de decisões, interação homem-computador e estresse.
SISTEMA HOMEM-MÁQUINA-AMBIENTE SHMA
• Objetivos básicos da ergonomia:

1. Procura reduzir as consequências nocivas sobre o trabalhador dentro de

um sistema produtivo.

2. Visa, em primeiro lugar, a saúde, segurança e satisfação do trabalhador.

GRAHAM
GRAHAM

http://www.meetgraham.com.au/
GRAHAM

Análise do texto Graham:

1. Porque as modificações foram necessárias?

2. Em decorrência a estas modificações, o que mais precisaria ser

alterado ergonomicamente na vida do Graham?
GRAHAM

Outras modificações do corpo para:

• Celular
• Calor
• Carro (não é para os acidentes)
• Videogame
• Vida submarina
• Andar de bicicleta
Comunicação e
Design Gráfico
 Design gráfico é uma expressão visual.
Mas expressão não significa, necessariamente, comunicação.

• Por sua vez, comunicação pressupõem um processo completo na

transmissão de uma mensagem, partindo de um emissor, através de um
meio e um código, evitando ruídos, chegando a um receptor, onde
precisa, necessariamente, ser decodificada e entendida de acordo com a
intenção do emissor.
TEORIA DA COMUNICAÇÃO
• Dessa forma, podemos destacar no design gráfico a intencionalidade da
comunicação, onde o objetivo é que, através de um código ou
informação precisa, a informação seja entendida na totalidade do
significado intencionado pelo emissor. (MUNARI, 1997).

• Portanto, o design gráfico se diferencia da mera expressão artística pela

intencionalidade, precisão da mensagem e pelo compromisso pelo
pleno entendimento.
• A ergonomia visual é uma ferramenta para a comunicação
ERGONOMIA
VISUAL
Para desenvolver mensagens para todos os níveis de alfabetismo visual, o
designer recorre à harmonia e contraste entre os itens que compõem
a comunicação visual, a saber (DONDIS, 1997):

• Ponto
• Linha
• Forma
• Textura
• Cor/tom
• Escala/proporção
• Dimensão
• Movimento
- Cores;

- Tamanhos;

- Formatos;
Para definição, entende-se como ergonomia, a disciplina científica que
estuda as interações entre o ser humano e uma [determinada] tarefa,
visando otimizar o bem estar humano e o desempenho global do sistema.
(IIDA, 2005)
• Nesse sentido, a ergonomia visual vem trazer segurança
(diminuir/eliminar riscos de erros e acidentes), conforto (bem-estar
físico e emocional) e produtividade (maior eficiência/eficácia), na
relação entre o ser humano e uma determinada tarefa.

• Para tanto, o designer recorre a alguns conceitos importantes, como os

princípios de Design Gráfico, hierarquia visual, legibilidade e
leiturabilidade.
Princípios do Design Gráfico

A harmonia estética é
fundamental em um projeto de
design gráfico, pois temos o Efeito
da Usabilidade Estética, onde:
Um usuário tende a perceber uma
interface/mensagem mais bela como
mais agradável, relevando pequenos
problemas de
usabilidade/entendimento.
Princípios do Design Gráfico

Neste sentido, os princípios de

design gráfico, alinhamento,
proximidade, contraste e
repetição (WILLIAMS, 2009),
cumprem um papel fundamental,
pois através deles o designer pode
atingir a harmonia entre os
elementos básicos de uma
comunicação visual.
Princípios do Design Gráfico

Por meio do proximidade e

do alinhamento, o designer
desenvolve estrutura para a sua
composição, a repetição
garante consistência com
padrões e modelos de interface
/ comunicação, e, por fim, o
contraste garante hierarquia
visual.
ANÁLISE GRÁFICA
ANÁLISE GRÁFICA
 Princípios Projetuais

Unidade

• A unidade é obtida pela repetição de determinados elementos estético-

formais, fazendo com que o layout seja identificado como um conjunto
unitário e com identidade própria.
 Princípios Projetuais

Harmonia

O objetivo é manter uma coerência formal do conjunto, obtendo uma

unidade subjetiva (não pela repetição dos elementos, mas pela repetição
da lógica de sua seleção).
Princípios Projetuais

Síntese

Por meio da exploração de detalhes, a informação é transmitida com

um mínimo de elementos visuais, tornando a comunicação mais
imediata – requisito da maioria das situações de projeto, mas não de
todas elas.
Princípios Projetuais

Balanceamento

• As “massas” visuais são compensadas visando a uma unidade visual, de

modo que os grupos de elementos não pareçam estar “soltos” no
plano bidimensional.

• Esta compensação pode se dar objetivamente (equilíbrio simétrico) ou

subjetivamente, pelo “peso” atribuído pela percepção (equilíbrio
assimétrico).
Princípios Projetuais

Movimento

• Em parte significativa das soluções de projeto, o movimento está

diretamente ligado à adoção do dispositivo do eixo compositivo.

• No entanto, o conjunto pode se tornar dinâmico, visando uma maior

pregnância, por meio de outros recursos, como o uso da variedade
tipográfica e de grandes contrastes cromáticos.
Porém, nem toda situação de projeto requer movimento.
 ERGONOMIA
APLICADA EM TEXTOS
LEGIBILIDADE

LEITURABILIDADE
LEGIBILIDADE

LEITURABILIDADE
LEGIBILIDADE

LEITURABILIDADE
 A Legibilidade se refere à facilidade com que uma letra
individual pode ser distinguida da outra. Sempre levando em
consideração forma, contorno, largura, ângulo, elementos,

LEGIBILIDADE
contraste, imagem de fundo, entre outros. Resumidamente, a
capacidade de reconhecer as letras.
LEITURABILIDADE

Já a Leiturabilidade está relacionada ao “conforto visual”. A

facilidade de se ler um texto ou palavra como um todo.
Quando os olhos batem no texto, devem seguir a direção da
leitura confortavelmente e absorver o conteúdo com fluidez.
 Distância entre linha de base até linha capitular (H)
H = 1/200 x distância de leitura
LEGIBILIDADE

LEITURABILIDADE por exemplo: o cartão de visitas é feito para ser lido

aproximadamente a 400mm

1/200 X 400 = 400/200 = 2mm (6 -7 pt)

 Distância entre linha de base até linha capitular (H)
H = 1/200 x distância de leitura
LEGIBILIDADE

LEITURABILIDADE por exemplo: o outdoor fica a aproximadamente 50mts

do observador

1/200 X 50.000 = 50.000/200 = 250mm

LEGIBILIDADE

LEITURABILIDADE
PAUSA PARA O PROJETO
1. Qual problema seu app vai resolver?

por exemplo:

“As pessoas tem dificuldade em encontrar

vaga de estacionamento no centro da cidade”
2. Quem é o usuário?
• faixa etária
• profissão
• renda
• objetivos (objetivos relacionados ao problema)
• dificuldades (dificuldades relacionadas ao problema)
HIERARQUIA
VISUAL
Princípios Projetuais

”O design é um esforço consciente de impor

uma ordem significativa.”

- Victor Papanek
Direção de Leitura

A direção da leitura depende da cultura do público-alvo que estamos

querendo atingir. Nas culturas ocidentais temos a direção de
leitura da esquerda para direita e de cima para baixo. Isso
resulta duas formas predominantes de leitura:
Direção de Leitura
Leitura em F: nesse padrão de
leitura, temos escaneamentos
visuais horizontais, seguidos de
escaneamentos verticais.
Este tipo de padrão é muito
comum em mensagens de
maior densidade onde o usuário
vai escaneando através de títulos
até se fixar em algo que chame
sua atenção.
Direção de Leitura

Leitura em Z: quando há o
predomínio da simplicidade e
pouca densidade visual, o
usuário realiza um
escaneamento horizontal, um
escaneamento na diagonal e
mais um outro escaneamento
horizontal.
Peso Visual / Tipografia

Alternar entre os pesos é a forma mais comum de expressar

importância com os tipos. Por meio do aumento da espessura,
compreendemos, irrefletidamente, a importância daquele texto.
E para trabalharmos bem com os pesos, precisamos conhecê-los:

Thin/Extra-light | Light | Book | Regular/Normal

Medium | Semi-bold | Bold | Black/Extra-bold | Extra-black
 Peso Visual / Cores

As cores conseguem expressar bidimensionalidade, isto é, conseguimos

“deslocar” elementos apenas trabalhando com cor. Cores mais claras
tendem a parecer mais próximas enquanto as cores mais escuras são
mais profundas.
Conseguimos passar a ideia de contraste a partir de como “posicionamos”
cada cor em relação ao layout. Obviamente que essa estrutura não é fixa,
mas já nos serve como base.
e vai ler isso no final

Você vai ler isso primeiro

E depois vai ler isso
E vai ler isso
• A hierarquia visual estabelece que
deva existir uma clara relação de
ordem e importância entre os
elementos de uma mensagem
visual, definindo a sequência que
o olho humano interpreta as
várias partes da mensagem.
• Tem como principais ferramentas a
direção da leitura e o contraste
e seu objetivo final é guiar o usuário
pelo modelo A.I.D.A (Atenção,
Interesse, Desejo e Ação).
O objetivo final de toda comunicação é levar o usuário a alguma ação
imediata. Neste sentido, a hierarquia visual ajuda a guiar o usuário pelas
04 etapas do modelo A.I.D.A.

• A primeira etapa é a Atenção: toda comunicação deve se destacar das

demais, chamando a atenção do usuário e levando-o a investigar
maiores detalhes;

• A segunda etapa é o Interesse: usam-se títulos e subtítulos para dirigir

o olhar do usuário aos pontos-chave da mensagem, facilitando o
entendimento;
• A terceira etapa é o Desejo: enquanto as duas primeiras etapas possam
acontecer em segundos, o desejo vai surgir de uma avaliação mais
ponderada. Neste caso, destacar recompensas pode ser um bom
caminho para levar o usuário a uma ação;

• Por fim, temos a Ação: nessa etapa a função da comunicação é não

atrapalhar, deixando claro o que o usuário deve fazer, através de
informações de contato, QR Codes e botões Call-to-Action (CTA), por
exemplo.
Análise pelo Modelo Análise pelos Princípios
AIDA Projetuais

1. O cartaz chama atenção Unidade

pela imagem usada na Harmonia
peça; Síntese
Balanceamento
2. Pontos-chaves para Movimento
gerar interesse: Títulos e Hierarquia
subtítulos;

3. O desejo de participar.
Tema / recompensas;

4. O que ação deve fazer

para participar ou receber
mais informações: local,
telefone, site.
Análise pelo Modelo Análise pelos Princípios
AIDA Projetuais

1. O cartaz chama atenção Unidade

pela imagem usada na Harmonia
peça; Síntese
Balanceamento
2. Pontos-chaves para Movimento
gerar interesse: Títulos e Hierarquia
subtítulos;

3. O desejo de participar.
Tema / recompensas;

4. O que ação deve fazer

para participar ou receber
mais informações: local,
telefone, site.
Análise pelo Modelo Análise pelos Princípios
AIDA Projetuais

1. O cartaz chama atenção Unidade

pela imagem usada na Harmonia
peça; Síntese
Balanceamento
2. Pontos-chaves para Movimento
gerar interesse: Títulos e Hierarquia
subLtulos;

3. O desejo de parMcipar.
Tema / recompensas;

4. O que ação deve fazer

para parMcipar ou receber
mais informações: local,
telefone, site.
BORA TRABALHAR?