ihc aula 10. ilusões visuais 4 categorias principais: –ilusões baseadas em sinais psicológicos...

IHC

Aula 10

Ilusões Visuais

• 4 categorias principais:– Ilusões baseadas em sinais psicológicos

(contraste simultâneo)– Ilusões baseadas no conhecimento top-down

(face e taça)– Ilusões baseadas em entradas físicas (uma

vara reta, metade colocada em água aparece dobrada)

– Ilusões baseadas em regras da organização, como as leis da Gestalt

Ilusões

• Regras derivadas da percepção de objetos tridimensionais são aplicadas inadequadamente a percepção de figuras bidimensionais.

Ilusão de Ponzo

Ilusão de Müleer-Lyer

Ilusão de Ebbinghaus

Percepção da Cor

• Estudos sobre a percepção de cores e luminância resultaram em diversas diretrizes de design que podem ser utilizadas no projeto de interfaces com usuário.

Percepção da Cor

• Com relação à percepção de luminância, que, grosso modo, é a nossa capacidade de perceber padrões de tons de cinza, aprendemos que o contraste ideal para texto deve respeitar uma razão de 10:1 entre claro e escuro.

Teste Teste Teste Teste Teste Teste Teste

Percepção da Cor

Azul

Preto

LaranjaLaranja

VermelhoAmarelo

Percepção da Cor

• Linguagem e cores estão em partes diferentes do cerebro.

• Isto cria um conflito quando se tenta comunicar o que se vê.

4 Princípios Básicos do Design

•Contraste•Repetição •Alinhamento•Proximidade

4 Princípios Básicos do Design

• Alinhamento: os itens são alinhados um com os outros. – Regra: Escolha um alinhamento e utilize este por

toda a página.

Alinhamento Horizontal

BotãoAlgumTexto

TextoSem Texto

Botão AlgumTexto

Texto Sem Texto

A digitação está em uma linha invisivel chamada “baseline”. Alinhando todo o texto na mesma baseline, a tira de links parece mais limpa e organizada.Na maioria dos softwares de autoria da web, há um botão para alinhamento de baseline, normalmente nas especificações de tabela.

4 Princípios Básicos do Design

• Proximidade: Itens que estão próximos parecem estar relacionados. – Regra: Itens que pertencem a um mesmo grupo

devem ficar juntos.

Proximidade

Titulo 1

Cabeçalho 1Bla bla bla bla bla bla bla blaBlaa bla bla bla bla bla

Cabeçalho 1Bla bla bla bla bla bla bla blaBlaa bla bla bla bla bla

Cabeçalho 1Bla bla bla bla bla bla bla blaBlaa bla bla bla bla bla

Titulo 1

Cabeçalho 1

Bla bla bla bla bla bla bla blaBlaa bla bla bla bla bla

Cabeçalho 1

Bla bla bla bla bla bla bla blaBlaa bla bla bla bla bla

Cabeçalho 1

Bla bla bla bla bla bla bla blaBlaa bla bla bla bla bla

Proximidade

Artista Desconhecido

Arte no Espaço

Galeria do Word

Conte quantas vezes seus olhos tiveram que pular de um elemento para o outro na página.

Quando os elementos estão separados por espaços, tornam se visualmente desconectados uns dos outros.

Essa é uma das razões pelas quais você não deve NUNCA pressionar dois Returns entre paragráfos – isso cria muita separação entre itens que se pertencem.

Proximidade

Artista DesconhecidoArte no EspaçoGaleria do Word

Quando itens que se pertencem são agrupados mais próximos, as informações são muito mais organizadas e mais fáceis de ler. Os espaços visuais criam uma hierarquia de informações.

Os grupos individuais de informações ainda estão separados por espaço, mas o espaço está organizado e tem um propósito – não é um espaço aleatório que está separando elementos que devem ficar juntos.

4 Princípios Básicos do Design

• Repetição: Elementos são repetidos em vários lugares e páginas. – Regra: Repita elementos por todo o site para unificar

as partes.

Repetição

• Em um site os botões de navegação são um elemento repetitivo.

• Cores, estilos ilustrações, formato, layout, tipografia se repetem para unificar o site inteiro.

4 Princípios Básicos do Design

• Contraste: elementos são visualmente diferentes um do outro. – Regra: se dois elementos não são iguais faça os bem

diferentes.

Navegação

• Poder ir para qualquer lugar e sempre voltar a home.

• Repetição e consistência dos elementos de navegação.

• Onde você está?

• Mais de uma maneira de navegar.

Imagens

• Devemos considerar 5 fatores importantes:– Formato

• Deve ser reconhecido pelos diversos sistemas operacionais. Os mais aceitos são GIF, JPEG e PNG.

– Cor• Depende da configuração do usuário.

Imagens

• Devemos considerar 5 fatores importantes:– Velocidade

• Tente manter o tempo de download o mais rápido possível. Para isso existe diversos métodos, como: utilizar imagens pequenas, utilizar alta compressão nas imagens. Interlacing (mostra a imagem em camadas)

Imagens

• Devemos considerar 5 fatores importantes:– Transparência

• Permite contornos irregulares. JPEG não aceita transparência.

– Animação• Imagens em movimento.

Imagens

• BITMAP (baseado em pixels) • Vetorial (baseado em formulas matemáticas)• Gif (bitmap)

– Plataforma cruzada (pode ser visto por qualquer tipo de computador)

– Compactados– Numero limitado de cores– Transparência– Interlacing– Criar: 72 ppi, modo de cor indexada, reduza a paleta

de cores ao mínimo necessário para manter a imagem.

Imagens

• Jpeg (Bitmap)– Plataforma cruzada– Compactados– Utiliza milhões de cores– melhor para fotos– Criar: 72 ppi , nível de menor qualidade, cor

RGB

Ao fazer uma interface

• Definir objetivo– Por que este site existe?– O que esperamos atingir com o site?– Qual o objetivo do site?

Ao fazer uma interface

• Considerar a audiência– Quem vai usar o site?– Quais são algumas características destes

usuários?– Qual a tecnologia que eles usam?– Como isto pode afetar o seu design?

Ao fazer uma interface

• Reunir as idéias– Listar inúmeras idéias– Brainstorm– Listar desejos dos usuários– Examinar outros sites– Entrevistar usuários em potencial

Ao fazer uma interface

• Organizar as informações– Ter idéias e considerá-las– Elas ajudam o objetivo proposto?– Procure por um máximo impacto com um

mínimo de recurso.– Organize idéias em categorias.

Ao fazer uma interface

• Determinar a navegação– Como a informação deve ser organizada

• por categoria• por data• ordem alfabetica

– Fazer um diagrama conceitual

Ao fazer uma interface

• Rascunhar Páginas– Desenhar paginas no papel– Fazer layout das páginas

AED

• Fazer avaliação de um site qualquer.

• Entregar relatório no dia 20/09

• Valor 1.0

• 2 presenças