Componentes de Interfaces Recomendações Ergonômicas para Cor

Apresentação em tema: "Componentes de Interfaces Recomendações Ergonômicas para Cor"— Transcrição da apresentação:

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 Pó, chuva, neblina, máquinas, mar sob tempestade, ratos. Tédio, tristeza, decadência, velhice, desânimo, seriedade, sabedoria, passado, finura, pena, aborrecimento, carência vital Simboliza a posição intermediária entre a luz e a sombra. Não interfere junto às cores em geral – é neutro

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. Outono, laranja, pôr do sol, luz, chama, calor, festa, perigo, fogo, aurora, raios solares Força, luminosidade, dureza, prazer, euforia, energia, alegria, tentação, advertência, senso de humor Simboliza o flamejar do fogo. Estimula oapetite

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 Umidade, folhagem frescor, águas claras, bosque, natureza. Bem-estar, paz, saúde, desejo, tranqüilidade, equilíbrio, esperança, liberalidade. Simboliza a faixa harmoniosa que se interpões entre o céu e o sol. Cor repousante. Inibe o apetite..

6 TABELA DE SENSAÇÕES CROMÁTICAS
Significado Associação Material 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 Noite, janela, sonho igreja, aurora, mar profundo Fantasia, mistério, dignidade profundidade, justiça, misticismo, espiritualidade.

7 TABELA DE SENSAÇÕES CROMÁTICAS
Significado Associação Material Associação Afetiva Símbolo Cor Terra, sensualidade, outono, doença, águas lamacentas, desconforto. Pesar, melancolia, resistência, vigor Vidência, agressão,furto, miséria. Engano, calma, autocontrole Simboliza a dignidade real 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

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
Vertical Horizontal Diagonal Curva Círculo 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

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

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

23 Ícones em interfaces Homem - Computador
Aula baseada na aula de Walter de Abreu Cybis de Abril, 2003

24 Ícones são usados por toda a Web para representar objetos ou tarefas.
Í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

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

30

31 ÍCONES Recomendações 3. Classifique os ícones por estilos. (Marcus, 1992)  Um tratamento estilístico consistente tem grande importância.

32

33

34

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

41

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

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

48

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

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

62