Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

23
1 Ambientes Virtuais e Mídias de Comunicação

Transcript of Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

Page 1: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

1

Ambientes Virtuais e Mídias de Comunicação

Page 2: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

O uso das cores como informação e eficácia na comunicação visual.

2

Page 3: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

http://www.youtube.com/watch?v=o0eS_NNtu0E

Para dar o primeiro passo...vamos conhecer a influência das cores no nosso cotidiano!Consulte o vídeo abaixo e reflita sobre as cores:

3

Page 4: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

Agora vamos conhecer o uso das cores como informação em interfaces digitais.

Ler e pesquisar é o primeiro passo para o descobrimento!

4

Seguem artigos e textos que complementam este conteúdo:

Page 5: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

O USO DAS CORES COMO INFORMAÇÃO EM INTERFACES DIGITAIS

Agora vamos conhecer o uso das cores como informação em interfaces digitais. Ler e pesquisar é o primeiro passo para o descobrimento! Seguem artigos e textos que complementam este conteúdo:

5

INTERFACES DIGITAIS

Pesquisa desenvolvida por:TAÍS MORAES CAMPOS PEDROSA

LÍDIA BRANDÃO TOUTAIN

http://dici.ibict.br/archive/00000510/01/TaisPedrosaLidiaToutain.pdf

Page 6: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

A indústria da comunicação pode ser entendida como aquela que engloba a transmissão da informação em suasdiferentes linguagens e exerce fortes influências em nosso cotidiano, merecendo assim uma atenção especialquanto a sua empregabilidade . Esse estudo tem como objetivo geral demonstrar como a teoria da cor podecontribuir para decisões de aplicabilidade dos recursos de informações visuais, e demonstrar a cor como um doscomponentes das interfaces no ambiente web. Tendo em vista que a internet é um meio de comunicação em queexistem duas relações distintas: designer-sistema e sistema-usuário, onde o sistema tem o papel de transmitiruma mensagem do designer para o usuário, e essa transmissão irá acontecer de forma isolada de cada um com osistema, deve-se basear o projeto da interface de acordo com repertório do usuário. Portanto, a cor, se utilizadaindiscriminadamente, pode ter um efeito negativo ou de distração, afetando a reação do usuário em relação às

Resumo:

6

indiscriminadamente, pode ter um efeito negativo ou de distração, afetando a reação do usuário em relação àsinformações das páginas web. Deste modo, a produtividade também é afetada, pois, torna-se difícil codificar efocalizar a mensagem, aumentando significativamente o tempo de resposta do usuário. Com isso conclui-se queum aprofundamento nas bases teóricas das disciplinas Ciência da Informação, Teoria da Cor, EngenhariaSemiótica e Interação Homem-Computador –poderá estabelecer critérios de avaliação específicos quecontribuirão para uma observação e avaliação da aplicabilidade do recurso cor em interfaces digitais.

http://dici.ibict.br/archive/00000510/01/TaisPedrosaLidiaToutain.pdf

Page 7: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

Segundo Guimarães (2000, p. 15) a aplicação intencional da cor, ou do objeto,possibilitará ao objeto que contém a informação cromática receber adenominação de signo. O autor sugere que ao considerarmos uma aplicaçãointencional da cor, estaremos trabalhando com a informação “latente”, que serápercebida e decifrada pelo sentido da visão, interpretada pela nossa cognição etransformada numa informação atualizada. (pág. 4)

O USO DA COR

7

http://dici.ibict.br/archive/00000510/01/TaisPedrosaLidiaToutain.pdf

Page 8: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

Rosenfield & Morvile (apud FURQUIM, 2004, p.49) apontam que, dentre os itensque os usuários da web “detestam”, estão projeto gráfico pobre, uso gratuito datecnologia (figuras animadas, sons, filmes que somente tornam o tempo deresposta da página web mais longo, sem agregar valor ao conteúdo), ou seja, aconstrução da página web centrada nos critérios do produtor.(pág. 5)

O USO DA COR

8

http://dici.ibict.br/archive/00000510/01/TaisPedrosaLidiaToutain.pdf

Page 9: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

Critérios relativos ao uso da cor estão implícitos em alguns modelos de avaliação deinterfaces, em alguns casos como nos critérios estabelecidos pelo Health InformationTechnology Institute – Hiti (Tabela 01), estão inseridos no critério design.

9

Page 10: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

“Sobre o indivíduo que recebe a comunicação visual, a cor exerce uma açãotríplice: a de impressionar, a de expressar e a de construir. A cor é vista:impressiona a retina. É Sentida: provoca uma emoção. É construtiva, pois tendoum significado próprio, possui valor de símbolo, podendo assim, construir umalinguagem que comunique uma idéia.” (FARINA,1987, p.27)

A afirmação acima descrita reforça a idéia de que a cor se configura em um

Conclusão:

10

A afirmação acima descrita reforça a idéia de que a cor se configura em umelemento de extrema importância na transmissão da informação, na medidaem pode desempenhar diversos papéis, contribuindo para uma compreensãomais efetiva da mensagem.. (pág. 8)

http://dici.ibict.br/archive/00000510/01/TaisPedrosaLidiaToutain.pdf

Page 11: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

Cores e interface gráfica

Mais conteúdos para pesquisa e leitura...

11

http://yaso.in/?p=358

Page 12: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

Tipicamente, um objeto colorido em uma interface gráfico não é mostradosozinho, mais é adjacente ou está próximo à um outro objeto de cor ouárea, o que cria efeitos de contraste, entre outros. Sem contrastesuficiente, não poderíamos distinguir partes diferentes na tela. Aí estáuma boa razão para aplicações como o MS Word, Powerpoint, Excel,Outlook, etc serem baseados em PRETO como default para cor da fonte e

Contraste de cores

12

Outlook, etc serem baseados em PRETO como default para cor da fonte ebackground branco – o que propicia o máximo de contraste com a melhorlegibilidade.

http://yaso.in/?p=358

Page 13: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

Tipicamente, um objeto colorido em uma interface gráfico não é mostradosozinho, mais é adjacente ou está próximo à um outro objeto de cor ouárea, o que cria efeitos de contraste, entre outros. Sem contrastesuficiente, não poderíamos distinguir partes diferentes na tela. Aí estáuma boa razão para aplicações como o MS Word, Powerpoint, Excel,Outlook, etc serem baseados em PRETO como default para cor da fonte e

Contraste de cores

13

Outlook, etc serem baseados em PRETO como default para cor da fonte ebackground branco – o que propicia o máximo de contraste com a melhorlegibilidade.

Contraste de cor pode ser usado para atrair a atenção visual dosusuários para elementos mais relevantes em uma interface gráfica.Contraste de cor também impulsiona o apelo de uma interfacegráfica...

http://yaso.in/?p=358

Page 14: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

Outro problema de contraste é aberração cromática. Lentes como as denossos olhos curvam o comprimento de ondas em quantidades desiguais. Oefeito disso é que diferentes estímulos de cor não são projetados namesma área da retina – um efeito que se percebe melhor em combinaçõesde violeta e vermelho, como também azul e vermelho, porque ocomprimento de onda do violeta e do azul estão em um final do espectro

Contraste de cores

14

comprimento de onda do violeta e do azul estão em um final do espectroenquanto o comprimento do vermelho está em outro:

http://yaso.in/?p=358

Aberração cromática

Page 15: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

Cores são importantes para aumentar o apelo visual de um software.Significados são associados às cores. Essas associações podem ser levadasem conta quando se desenha uma interface. Por exemplo, pode fazersentido que uma interface para uma clínica seja branca, enquanto essacor for associada à limpeza. Outro exemplo de interface que utilizaassociação de cores com seus significados é o site das nações unidas, onde

Cores e apelo visual

15

associação de cores com seus significados é o site das nações unidas, ondeprevalece o azul, que remete à paz.

A seguir, vejamos outras influências de cores:

http://yaso.in/?p=358

Page 16: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

Vermelho – quente, parada, agressividade, erro, calor, fogoVioleta – mulher, fofoLaranjado – calor, criatividadeAmarelo – alegria, ensolarado, devagar, cuidadoMarrom – calor, queda, sujeira

Cores e apelo visual

16

Marrom – calor, queda, sujeiraVerde – inveja, novo, fertilidade, bucólicoAzul – água, pacífico, homemRoxo – realBranco – virgem, limpo, inocente, frioPreto – mau, fantasmagórico, morte, medoCinza – céu escuro, velho, depressivo

http://yaso.in/?p=358

Page 17: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

Uma boa interface deve atender as expectativas de seus usuários; esses,por sua vez, esperam poder customizá-las, isto é, colocá-las com aaparência que desejem. Isso implica que uma interface bem projetadadeve permitir que uma pessoa tenha liberdade de escolher seus aspectosvisuais, entre eles, suas diversas cores .Estudos feitos provaram que o uso não apropriado de cores pode aumentar

O Uso Cores em Interfaces com o Usuário

17

Estudos feitos provaram que o uso não apropriado de cores pode aumentarmuito o tempo de reposta de um usuário. Os sistemas devem portanto terum padrão default de cores para suas telas, escolhido de forma a dar aousuário a melhor performance e conforto diante do sistema. Deve serpermitido alterar esse padrão.O uso apropriado de cores pode resultar em uma rápida e corretaassimilação da informação. O impacto das cores na eficiência da interfacedepende da relevância de seu uso para a execução de uma tarefa e dasituação e ambiente onde a tarefa ocorre.

ftp://ftp.ci.cefetes.br/informatica/flavio/2011/PW/_ArquivosAula03

Page 18: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

K mostrar as coisas conforme são vistas na natureza K representar associações simbólicas K chamar e direcionar a atenção K enfatizar alguns aspectos da interface K determinar um estado de espírito

O uso de cores em interfaces permite:

18

K determinar um estado de espírito K auxiliar na identificação de estruturas e processos K diminuir a ocorrência de erros K tornar uma interface mais fácil de ser memorizada

ftp://ftp.ci.cefetes.br/informatica/flavio/2011/PW/_ArquivosAula03

Page 19: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

Porém, o uso de cores deve ser feito com cuidado. É fundamental que durante todo o projeto de uma interface lembrar-se dos seguintes cuidados: K uma escolha não adequada de cores pode interferir na legibilidade da interface K as cores podem apresentar características distintas em condições diferentes K as cores devem ser selecionadas de modo a não causarem fatiga nos olhos do usuário e nem deixá-lo confuso

O uso de cores em interfaces permite:

19

usuário e nem deixá-lo confuso K o grupo de pessoas a quem se destina o sistema deve ser considerado; algumas comunidades podem apresentar reações arbitrárias porém negativas diante de certas cores K alguns elementos da tela são agrupados com as mesmas cores; deve-se tomar um cuidado para não se agrupar elementos que não se relacionam entre si K deve-se assegurar que o projeto de interface funciona em preto e branco para depois então adicionar-se cor

ftp://ftp.ci.cefetes.br/informatica/flavio/2011/PW/_ArquivosAula03

Page 20: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

Estudos realizados permitiram que fosse feita uma síntese dos conhecimentos relacionados a vários aspectos envolvidos no uso de cores. Foram estabelecidas algumas diretrizes, agrupadas na forma de dez mandamentos, que auxiliam o projeto de uma interface . Esses mandamentos enfatizam regras de sintaxe (regras para quantidade, dimensões, arranjos e contraste), semântica (regras para referências ou denotações e conotações) e

Os Dez Mandamentos do Uso de Cores em Interfaces

20

contraste), semântica (regras para referências ou denotações e conotações) e pragmatismo (regras para intenções, respostas e preferências).

ftp://ftp.ci.cefetes.br/informatica/flavio/2011/PW/_ArquivosAula03

Page 21: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

1. Usar no máximo cinco (mais ou menos duas) cores. 2. Usar cores centrais e periféricas de forma apropriada 3. Usar cores que apresentam uma variação mínima no aspecto cor/tamanho. 4. Não usar simultaneamente cores de alto croma (em termos espectrais) 5. Usar cores familiares, consistentes ou codificações com referências

apropriadas

Os Dez Mandamentos do Uso de Cores em Interfaces

21

apropriadas 6. Usar as mesmas cores para agrupar elementos relacionados 7. Usar o mesmo código de cores para treinamento, aplicação e publicação 8. Usar cores de elevada intensidade e saturação para chamar a atenção 9. Se possível, usar uma codificação redundante para forma assim como para cor 10. Usar cores para realçar informação

Mais detalhes e exemplos:

ftp://ftp.ci.cefetes.br/informatica/flavio/2011/PW/_ArquivosAula03/O%20Uso%20Cores%20em%20Interfaces%20com%20o%20Usu%C3%A1rio.pdf

Page 22: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

- Palheta de coreshttp://www.avellareduarte.com.br/projeto/desenvolvimento/desenvolvimento2/

desenvolvimento21bc.htm

- Cores na interface gráficahttp://homepages.dcc.ufmg.br/~clarindo/arquivos/disciplinas/eu/material/semi

Outros sites de pesquisa:

22

http://homepages.dcc.ufmg.br/~clarindo/arquivos/disciplinas/eu/material/seminarios-alunos/cores.pdf

Page 23: Web 2.0 uso_das_cores_nas_interfaces_digitais_cris_souza

Ambientes Virtuais e Mídias de Comunicação :: Tarefa da Semana 4

Aluna: CRISTIANE DE SOUZAPólo: PERUIBE – GRUPO 26Tema ou Assunto: A WEB 2.0 - Uso das cores no Design Didático

23

[email protected]