Interface e suas cores

Igor Peterson O. Santos

igorpeterson@gmail.com

Agenda
Tipos de Interao
As cores dentro de um projeto interativo
Qualidades em IHC

Usabilidade e Interface esto interligados!

O estilo de uma interface, no que diz respeito a
formas, fontes, cores e elementos grficos que so
utilizados e a maneira como so combinados, tem
influncia em se determinar quo agradvel
interagir com eles.
Quanto mais eficaz for o uso das imagens em uma
interface, mais envolvente e agradvel ela ser.
A interface e a usabilidade podem ser os heris
contra a sobrecarga de informaes.

A Interface na prtica
Durante o incio da era da internet, o design
insatisfatrio de interface acarretou uma srie de custos
para companhias online. Os principais eram:
- Perda de aproximadamente 50% das vendas,
porque os clientes no conseguiam encontrar os produtos
e informaes.
- O resultado negativo da primeira visita ao site
gerava perda de 40% em mdia dos clientes em uma
segunda visita.

A web era questionada como modelo de negcios no

incio do milnio, hoje o MC Donalds investe mais em Web
do que na TV.

Existem diversos tipos de interao HOMEMCOMPUTADOR, desde o objetivo contato com a mquina
de bilhete do metr, at as mais profundas experincias
de imerso em ambientes virtuais e sistemas de
aprendizagem via internet.
Os tipos de interao dividem-se em:
- Linguagem Natural;
- Linguagem de Comando;
- Menus;
- Preenchimento de Formulrio;
- WIMP;
- Manipulao Direta; e,
- Agentes.

- Linguagem Natural- Interao com o sistema utilizandose da sua prpria linguagem.

- Linguagem de Comando- Comunicao com o sistema
atravs de comandos especficos (teclas simples).
- Menus- Conjunto de opes apresentado na tela forma
hierarquicamente.
- Preenchimento de Formulrio- Usado para entrada de
informao no sistema.
- WIMP- janelas, cones, menus e apontadores, isso , PC
padro.
- Manipulao Direta- Permite ao usurio agir
diretamente sobre os elementos representados na tela,
sem comandos (ex: games).
- Agentes- Identificam necessidades do usurio e realizam
tarefas em segundo plano, de maneira colaborativa.

O que o usurio v na tela e como seu olhar caminha

por ela.
- A hierarquia visual uma guia.
- Fora das palavras, como:
grtis, promoo, venda e sexo.
- Carrinhos de compras, lixeiras e outros tipos de
affordances auxiliam, mas tambm limitam, os usurios j
esto acostumado e, dependo do caso, pode no focar em
elementos desgastados.

Affordance o potencial de um objeto de ser usado

como foi projetado para ser usado.

O que os projetistas criam!

O que os usurios vem!

Projeo x Realidade

As cores dentro de um projeto interativo

Sempre que alguma coisa projetada e feita,
esboada e pintada, desenhada, rabiscada,
construda, esculpida ou gesticulada, a substncia
visual da obra composta a partir de uma lista
bsica de elementos.
Os elementos visuais constituem a substncia
bsica daquilo que vemos, e seu nmero
reduzido: o ponto, a linha, a forma, a direo, o
tom, a cor, a textura, a dimenso, a escala e o
movimento. Donis A. Dondis.

A fora da Cor
As cores desempenham um papel
Importante na nossa percepo
visual, uma vez que influencia
nossas relaes sobre o mundo que
nos rodeia.

A fora da Cor

As cores possuem diversos efeitos sobre consumidores:

algumas estimulam reas do crebro as quais podem
promover excitao ou tranquilidade.
Sabendo disso, grandes marcas so facilmente capazes de
influenciar seu pblico alvo simplesmente combinando as
cores certas.

O poder das cores no mercado

O poder das cores no mercado

O poder das cores no mercado

Qual a relao do seu usurio com a cor na web?

Diferena das cores para homens e

mulheres

Vamos conhecer um pouco do sentido

implcito em algumas cores?

Dicas do uso das cores na Web.

Gerais
- Evite azul e vermelho juntos (diferente
profundidade e foco).
- Use 3 a 7 cores no mximo em um site (com
exceo de fotografia)
- Magenta e rosa devem ser usadas com cautela,
assim como cores de muita luminosidade.
- Prefira fundos monocromticos.
- Use a cor para agrupar elementos (menus
dividindo sub-sees com cores).
-O uso de fundos claros com caracteres escuros
(contraste positivo) so melhores que o inverso.

Vermelho em sites
- Boa alternativa para sinalizar perigo ou
chamar ateno do usurio
- Evitar seu uso em fundos amplos.

Vermelho Em Empresas

Amarelo em sites

- timo para indicar janelas

ativas.
- Deve ser evitada para textos,
a no ser com fundo escuro e frio.

Amarelo em Empresas

Verde em sites

- timo pra memorizao.

- a cor que a retina encontra seu ponto
mais alto de sensibilidade, sendo o mais
indicado quando se deseja transmitir
rapidamente uma informao.

Verde em Empresas

Azul em Sites
- Seus comprimentos de onda e so menos sensvel
aos olhos, logo uma cor de difcil focalizao, no
devendo ser utilizada para pequenos detalhes.

Azul em Empresas

Outras cores

Outras cores

As cores e as grandes marcas

As cores e as grandes marcas

As cores e as grandes marcas