Teoria de Gestalt aplicada a IHM

Transcrição

1 Teoria de Gestalt aplicada a IHM José Gustavo de Souza Paiva Introdução [1] Gestalt: teoria de estudo de como os seres humanos percebem as coisas Percepção: visão de TODO, e não de PONTOS ISOLADOS Relações, dependência entre partes Conhecimento das partes através do todo, e não o contrário Princípios de Gestalt Leis que regem a percepção humana Conclusões sobre o comportamento natural do cérebro no processo de percepção 1

2 Motivação Algumas formas agradam mais que outras Objetivo da mente: organizar o caos Percepção Humana 2

3 Leis de Gestalt Proximidade Boa continuidade/conectividade Simetria Similaridade Destino comum Fecho Região Comum Princípio 1 - Proximidade Entidades visuais próximas são percebidas como grupos, como unidades [5] 3

4 Princípio 1 - Proximidade [2] Princípio 1 - Proximidade Aplicações em interfaces Bom uso para indicar contextos 4

5 Princípio 1 - Proximidade Princípio 1 - Proximidade [3] 5

6 Princípio 1 - Proximidade Princípio 1 - Proximidade Exemplo ruim [8] 6

7 Princípio 2 - Boa Continuidade Traços contínuos são percebidos mais rapidamente do que contornos com mudança rápida de direção Impressão visual de como as partes se sucedem através da organização perceptiva da forma de modo coerente [5] Princípio 2 - Boa Continuidade Aplicações em interfaces Direcionar intenção do usuário 7

8 Princípio 2 - Boa Continuidade [4] Princípio 2 - Boa Continuidade [4] [7] [7] 8

9 Princípio 3 - Simetria Objetos simétricos são mais prontamente percebidos Simetria: aspectos positivos Estabilidade, consistência e estrutura Assimetria: aspectos negativos Algo está errado, faltando, fora de equilíbrio [5] Princípio 3 - Simetria Aplicações em interfaces Criação de logotipos Arranjo de elementos como imagens, ícones, etc 9

10 Princípio 4 - Similaridade Objetos semelhantes são percebidos como grupos Princípio 4 - Similaridade Aplicações em interfaces Pistas visuais sobre coisas relacionadas Percepção de organização: auxílio para usuário de como utilizar e interagir com o sistema [4] 10

11 Princípio 4 - Similaridade [4] Princípio 4 - Similaridade [6] 11

12 Princípio 4 - Similaridade [8] Princípio 5 - Destino comum Objetos com mesma direção de movimento são percebidos como grupo [5] 12

13 Princípio 5 - Destino comum Aplicações em interfaces Menus onsivehybridmenu/index.html Hints Princípio 5 - Destino comum Aplicações em interfaces Funcionalidades Drag and Drop 13

14 Princípio 6 - Fecho Contornos são fechados para completar figuras regulares eliminando falhas e aumentando a regularidade Experiências passadas e conhecimento prévio sobre formas e figuras possíveis [5] Princípio 6 - Fecho 14

15 Princípio 6 - Fecho Aplicações em interfaces Oclusão Notificações múltiplas Grupos de objetos Princípio 6 - Fecho [5] 15

16 Princípio 7 - Região Comum Objetos dentro de uma região especial confinada são percebidos como um grupo [5] Princípio 7 - Região Comum Aplicações em interfaces Organização do conteúdo [7] 16

17 Princípio 7 - Região Comum Exemplos de Aplicação [5] 17

18 Exemplos de Aplicação [5] Simetria Exemplos de Aplicação [5] Similaridade 18

19 Exemplos de Aplicação [5] Exemplo ruim [9] 19

20 Exemplo ruim [9] Sem grade Uso inconsistente de pistas visuais de agrupamento Utilização de espaço de forma inconsistente entre rótulos e dados Exemplo ruim [9] 20

21 Exemplo ruim [9] Hints: campos em amarelo são rótulos Agrupamento visual/lógico pobre Referências 1. Samuel Ribeiro, Interface Homem-Máquina, Notas de aula disponíveis em %20Psychology%20and%20Design/designing%20with%20the%20mind%2 0in%20mind/science-01.pdf