Componentes de Interfaces

1
Componentes de Interfaces Recomendações
Ergonômicas para Cor Aula baseada na aula de
Walter de Abreu Cybis de Abril, 2003
2
TABELA DE SENSAÇÕES ACROMÁTICAS
Significado
Associação Material
Associação Afetiva
Símbolo
Cor
Do germânico blank (brilhante). Simboliza a luz.
Para os ocidentais simboliza a vida e o bem, para
os orientais é a morte, o fim, o nada.
Batismo, areia clara primeira comunhão, nuvens em
tempo claro, neve, lírio, casamento, cisne,
Ordem, simplicidade, limpeza, bem, pensamento,
juventude, otimismo, paz piedade, inocência,
dignidade, infância, harmonia, afirmação, pureza,
despertar, modéstia, estabilidade, alma, divindade
3
TABELA DE SENSAÇÕES ACROMÁTICAS
Significado
Associação Material
Associação Afetiva
Símbolo
Cor
É expressivo e angustiante ao mesmo tempo. É
alegre quando combinado com certas cores. Às
vezes tem conotação de nobreza, seriedade
Sujeira, sombra, fim, enterro, carvão, noite,
fumaça, condolência, morto, coisas escondidas
Mal, miséria, pessimismo, sordidez, tristeza,
frigidez, desgraça, temor, negação, melancolia,
opressão, angústia, dor, renúncia, intriga
Simboliza a posição intermediária entre a luz e a
sombra. Não interfere junto às cores em geral é
neutro
Tédio, tristeza, decadência, velhice, desânimo,
seriedade, sabedoria, passado, finura, pena,
aborrecimento, carência vital
Pó, chuva, neblina, máquinas, mar sob tempestade,
ratos.
4
TABELA DE SENSAÇÕES CROMÁTICAS
Significado
Associação Material
Associação Afetiva
Símbolo
Cor
Simboliza aproximação, encontro. Estimula os
instintos naturais
Rubi, cereja, guerra, rocha, conquista, combate,
sinal de parada, vida, fogo, lábios mulher,
perigo, sol, sangue, chama, masculinidade
Dinamismo, força, energia, revolta, movimento,
coragem, intensidade, paixão, ira, ação,
agressividade, alegria.
Simboliza o flamejar do fogo. Estimula oapetite
Força, luminosidade, dureza, prazer, euforia,
energia, alegria, tentação, advertência, senso de
humor
Outono, laranja, pôr do sol, luz, chama, calor,
festa, perigo, fogo, aurora, raios solares
5
TABELA DE SENSAÇÕES CROMÁTICAS
Significado
Associação Material
Associação Afetiva
Símbolo
Cor
Simboliza a cor da luz irradiante em todas as
direções. Em excesso torna-se monótono e cansativo
Flor grande, terra argilosa, palha, luz, topázio,
verão, limão, Chinês.
Iluminação, conforto, alerta, ciúme, orgulho,
esperança, idealismo, egoísmo, inveja, ódio,
euforia, expectativa
Simboliza a faixa harmoniosa que se interpões
entre o céu e o sol. Cor repousante. Inibe o
apetite..
Bem-estar, paz, saúde, desejo, tranqüilidade,
equilíbrio, esperança, liberalidade.
Umidade, folhagem frescor, águas claras, bosque,
natureza.
6
TABELA DE SENSAÇÕES CROMÁTICAS
Associação Material
Significado
Associação Afetiva
Símbolo
Cor
Cor do céu sem nuvens. Sensação do movimento para
o infinito.
Águas tranqüilas, Céu,gelo, frio, mar, montanha
longínqua
Espaço, viagem, verdade, sentido, afeto,
serenidade, intelectualidade, meditação,
confiança, infinito, amizade
Fantasia, mistério, dignidade profundidade,
justiça, misticismo, espiritualidade.
Noite, janela, sonho igreja, aurora, mar profundo
7
TABELA DE SENSAÇÕES CROMÁTICAS
Associação Material
Significado
Associação Afetiva
Símbolo
Cor
Terra, sensualidade, outono, doença, águas
lamacentas, desconforto.
Pesar, melancolia, resistência, vigor
Simboliza a dignidade real
Engano, calma, autocontrole
Vidência, agressão,furto, miséria.
Fonte Farina (1986) p. 111
8
Linha e o seu uso em interfaces homem-computador
Aula baseada na aula de Walter de Abreu
Cybis de Abril, 2003
9
(No Transcript)
10
LINHA
As linhas retas possuem três tipos básicos a
horizontal, a vertical e a diagonal.
Já as linhas curvas podem ser classificadas em
curva simples e curva complexa. A linha curva
simples tende a fechar-se sobre si mesma e de
voltar para si mesma, e assim, o círculo surge
como o plano ora instável estável. Enquanto que a
linha curva complexa pode composta por fragmentos
circulares geométricos, fragmentos livres ou por
ambos.
11
SIGNIFICADOS DAS LINHAS E FORMAS Fonte Martins
(2000), p. 29
Horizontal
Diagonal
Círculo
Vertical
Curva
Quadrado
Triângulo
tranqüilidade
movimento
tranquilidade
masculino
feminino
proteção
ação
homem ereto
continuação
desarmonia
abraço
perfeição
esmero
conflito
estabilidade
estabilidade
crescimento
dignidade
Ñ agride
simetria
Tensão
continuidade
aspirações
paz
direção
paz
escuro
Equilíbrio
estabilidade
calma
estabilidade
infinito
honestidade
Força
sensualidade
firmeza
vagar
formalidade
confiança
Vida
graciosidade
predomínio
movimento
preto
Estabilidade
12
LINHA
Grande parte dos objetos de interação são
delimitados por bordas, ou seja, por linhas, que
são bastante significantes na garantia da leveza
dos mesmos. Isto ocorre através da natureza
simples dos traços e do distanciamento proposto
entre as bordas e os textos contidos na tela,
tais como denominações, títulos, cabeçalhos,
rótulos entre outros (Cybis, 1997).
13
Tipografia e sua aplicação em interfaces Homem -
Computador Aula baseada na aula de Walter de
Abreu Cybis de Abril, 2003
14
TIPOGRAFIA
A tipografia é um estudo de letras com o objetivo
de resultar em um produto gráfico legível e
agradável ao usuário, pois com a evolução das
artes gráficas, surgiram as preocupações em
relação à disposição de caracteres.
Ugaya (1993) diz que, para se ter boa
legibilidade, a letra deve possuir tamanho
adequado e que possa ser visualizada até
determinada distância, ou seja, uma letra com 5
cm de altura por 1 cm de espessura se faz visível
até uma distância de 20m.
15
TIPOGRAFIA
A proporção ideal entre altura e espessura é de
4/3, e o espaço entre os caracteres deve ser
ajustado conforme o tipo de fonte utilizada,
visando maior conforto visual ao usuário.
Letras rebuscadas contribuem para confundir a
leitura, quando observadas de uma distância
maior, como o E que pode parecer um B e o C que
pode se passar pelo O.
16
(No Transcript)
17
TIPOGRAFIA
Para Cybis (1997) as principais características
pertinentes à percepção de fontes utilizadas em
textos e rótulos das telas de computadores são a
serifa e o espaçamento entre os caracteres.
18
TIPOGRAFIA
Fontes com serifa são caracterizadas por uma
terminação saliente dos caracteres, pode-se citar
como exemplo a Times New Roman.
Fontes sem serifa são percebidas com leveza,
entretanto dificultam a leitura, pode-se
exemplificar este tipo de fonte com a Arial.
19
TIPOGRAFIA
Recomenda-se a utilização de fontes sem serifa em
títulos e rótulos curtos. (Cybis -1997)
20
(No Transcript)
21
TIPOGRAFIA
Fontes com serifa são recomendadas para textos, a
fim de se obter o reconhecimento rápido dos
caracteres. Quanto ao espaçamento entre os
caracteres, devem ser dispostos de forma
continuamente proporcional.
22
(No Transcript)
23
Ícones em interfaces Homem - Computador Aula
baseada na aula de Walter de Abreu Cybis de
Abril, 2003
24
ÍCONES
Ícones, índices e símbolos são freqüentemente
utilizados em interfaces com o usuário. Esses
elementos proporcionam um guia funcional e
estético para interfaces gráficas.
Ícones são usados por toda a Web para representar
objetos ou tarefas.
25
ÍCONES
Recomendações
1. Recomenda-se projetar os ícones criando
esboços rápidos. (Marcus, 1992)  Uma vez que o
conteúdo semântico tenha sido organizado, crie
vários esboços que variem da abstração lógica à
imagem concreta. Indique todos os elementos
visuais, seu tamanho e sua localização
aproximada. É importante não ser muito preciso ou
detalhista no início do projeto o mais
importante é explorar todas as variações
possíveis. Avalie se os ícones vão de encontro às
necessidades do emissor, do receptor e do meio em
que ele será usado. 
26
(No Transcript)
27
ÍCONES
Recomendações
2. Comece identificando a proposta do ícone e o
seu uso. (Windows, 1995)  Faça uma "tempestade
cerebral" sobre possíveis idéias. É
freqüentemente difícil projetar ícones que
definam operações ou processos.
28
ÍCONES
Recomendações
3. Recomenda-se o uso de metáforas do mundo real.
(Windows, 1995)  Isso facilita o
reconhecimento, identificação e associação do
ícone por parte do usuário que pode usar a
experiência e aprendizado prévio para
interpretar o ícone. 
29
(No Transcript)
30
(No Transcript)
31
ÍCONES
Recomendações
3. Classifique os ícones por estilos. (Marcus,
1992)  Um tratamento estilístico consistente
tem grande importância.
32
(No Transcript)
33
(No Transcript)
34
(No Transcript)
35
ÍCONES
Recomendações
4. Use objetos grandes, linhas grossas e áreas
simples para distinguir os ícones
36
ÍCONES
Recomendações
5. Recomenda-se que o ícone tenha uma
aparência simplificada. (Marcus, 1992)  Um
ícone composto de muitas partes pode confundir
o usuário.
37
ÍCONES
Recomendações
6. Recomenda-se ter precaução com o uso do
anti-aliasing. (Windows, 1995)  A técnica
chamada anti-aliasing envolve a adição de pontos
coloridos para suavizar as extremidades
pontiagudas de um figura gráfica. Entretanto,
não use anti-aliasing sobre o lado de fora da
extremidade de um ícone, pois os pontos
contrastantes podem parecer irregulares ou
dentados quando houver uma variação do fundo
38
ÍCONES
Recomendações
7. Avalie os projetos de ícones mostrando-os para
usuários potenciais. (Marcus, 1992)  Quando os
protótipos estiverem disponíveis, eles devem ser
revisados e testados por usuários típicos. As
avaliações que podem afetar todos os aspectos do
projeto do ícone devem ser repetidas
39
ÍCONES
Recomendações
8. Use um estilo comum para todos os ícones.
(Windows, 1995)  Repita as características
comuns como o uso da mesma fonte de luz (canto
superior esquerdo) e evite os contornos em
preto eles aumentam a poluição visual. 
40
(No Transcript)
41
(No Transcript)
42
ÍCONES
Recomendações
9. Recomenda-se que se comece a projetar os
ícones em preto e branco. (Window 95) 
Considere a cor como uma propriedade adicional.
Também teste as imagens em diferentes fundos,
pois o usuário pode mudar o padrão de fundo do
seu browser. 
43
ÍCONES
Recomendações
10. Recomenda-se o uso de cor com discrição.
(Marcus, 1992)  Para a criação de um ícone é
suficiente o uso de cinco cores ou até menos,
incluindo o preto, o branco e/ou o cinza. Muita
variação de cores distrai a atenção do usuário. 
44
(No Transcript)
45
ÍCONES
Recomendações
11. Recomenda-se o uso da paleta de 256 cores.
(Window,s1995)  Isto permite ícones com
aparência muito realística e faz com que eles
possam ser corretamente lidos em monitores
configurados para exibir 256 cores ou mais
46
ÍCONES
Recomendações
12. Finalmente, lembre de considerar o potencial
cultural do impacto dos seus ícones. (Windows,
1995)  O que pode ter um certo significado em
uma país ou cultura pode ter significados
imprevistos em outro. É melhor evitar letras ou
palavras, se possível, pois podem fazer com que
os desenhos sejam difíceis de aplicar em outras
culturas. 
47
(No Transcript)
48
(No Transcript)
49
Briefing
50
BRIEFING - CONCEITOS
O briefing em inglês quer dizer instruções
O briefing é um documento que contém todas as
informações e orientações necessárias para
desenvolver eficazmente uma estratégia de
marketing, campanha de comunicação ou uma
simples ação de comunicação. O briefing vai
estabelecer as orientações gerais da campanha
que resultam da reflexão entre anunciante e
agência. Devem ficar definidos os alvos,
objetivos e possíveis limitações.
51
MODELO DE BRIEFING

• Introdução
• - Qual o conceito do produto?
• - Qual o posicionamento?
• - Quais os alvos?
• Antecedentes
• - História da marca,
• - Outras ações de comunicação
• Mercado (evolução, segmentação, posicionamento do
  produto, investimento)
• Objetivos (market share (parte de mercado),
  distribuição, vendas, comunicação)
• Produto (nome, característica, embalagem, preço,
  concorrência)
• Ações
• Ação de comunicação publicitária ou não,
  orientação da agência.

52
MODELO DE BRIEFING

• Ações
• Contexto do Produto ou Serviço
• Descrição do Produto, histórico da comunicação
  anterior da marca, decrição da concorrência,
  análise de mercado, comportamento e atitudes dos
  consumidores e influenciadores.
• 2. Estratégia de Marketing
• Objetivos de Marketing (volume de vendas e quotas
  de mercado), posicionamento, segmento alvo e
  fontes de mercado, mix da comunicação.

• Plano de Meios
• Produto e Concorrência (marca produtos, embalagem
  preço e distribuição, consumo)
• Objetivos (de marketing, de comunicação)
• Grupo alvo, tempo, regionalização.

53
Exemplo de Briefing
Cliente Sony do Brasil Data de Fundação 7 de
maio de 1946 Fundadores Masaru Ibuka e Akio
Morita Área de atuação da empresa nacional e
internacional Ações da Sony em Manaus -
Produzir produtos Sony com qualidade Sony -
Campanha de conservação do meio ambiente -
Incentivo ao Festival de Opera do Amazonas na
primeira edição.
54
Exemplo de Briefing

• Produtos
• Micro-system, mini-system, câmeras fotográficas e
  de vídeo, televisão, DVD player, Playstation
  (player direcionado para jogos eletrônicos), CD,
  CD player etc.
• Principais pontos positivos (fortes) da empresa
• - Investimento em qualidade, design e tecnologia
• Marca reconhecida como sinônimo de qualidade
• Principais pontos negativos (fracos) da empresa
• Preços diferenciados (preços elevados comparados
  aos dos concorrentes), investimento constante em
  inovação (alto custo), dificuldade de entrada em
  determinados mercados
• Principais oportunidades
• - Surgimento da tecnologia da TV digital

55
Exemplo de Briefing

• Imagem do produto no mercado
• Marca consolidada, associada à tecnologia, média
  e alta fidelidade nos aparelhos, líder de
  qualidade.
• Valores
• Inovação em tecnologia
• Praticidade
• Segurança
• Moderno - quanto aos produtos desenvolvidos
• Tradição - quanto ao tempo de existência no
  mercado
• Segmento atingido pela empresa
• Classe alta, classe média-alta e classe média
• Público consumidor
• Jovens e adultos (maior enfoque), crianças

56
Exemplo de Briefing

• Hábitos e atitudes dos consumidores
• Gostam de viajar, buscam produtos de qualidade,
  demonstram status através dos produtos
  (necessidade de ascensão social)
• Comprador do produto e situação de compra
• Produtos high-end - Chefe de família ou a pessoa
• Produtos low-end (por exemplo, discman e walkman)
  jovens. Ambos tipos de produtos são comprados
  quando da necessidade de atualização ou status e
  podem ser encontrados em lojas de varejo, com
  pagamento à prestação ou à vista.
• Objetivos da empresa (gerais)
• - Fascinar o cliente, através do sentimento
• Produzir produtos de qualidade para satisfazer o
  cliente

57
Exemplo de Briefing

• Perfil dos concorrente direto
• Investe em tecnologia, ações relacionadas a
  comportamento e publicidade
• Diferencial do produto comparado a similares
• A diferença se encontra na marca e na qualidade
• Diferencial da empresa
• Agressivos quanto a lançamento de novos produtos
• Desenvolvimento rápido da produção
• Posicionamento
• - Líder de mercado em inovação em seu segmento de
  produtos
• - Líder em tecnologia e qualidade

58
Exemplo de Briefing
Objetivo básico de comunicação Manter e fazer
novos clientes no Brasil e manutenção da imagem
de qualidade
59
(No Transcript)
60
Exemplo de Requisitos Projetuais
Título
Lançamento de um produto aplicando estratégias de
marketing e design.
Objetivo Geral
Lançar um produto inovador no mercado, no ramo de
tintas a óleo, para artistas plásticos.
61
(No Transcript)
62
(No Transcript)