Interface de
Navegação em
Hiperdocumentos
Prof. Roberto
Cabral de Mello Borges
1
Interface de Sistemas para Navegação em
Hiperdocumentos
1 - Introdução
2 - O processo cognitivo do ser humano
3 - O processo de memorização
4 - Projeto e lay-out gráfico da Interface
5 - Orientação Espacial
6 - Metáforas
7 - Navegação em Hiperdocumentos
8 - Projeto da Interface
9 - Conclusão
2
1 - Introdução (cont.)
1.5 - A importância da Interface
– interface inspira sentimentos de
aceitação ou rejeição
– áreas de requisitos para uma interface:
» funcionalidade da tela
» funcionalidade dos links
» metáforas da realidade
– funcionalidade e metáforas: associação
do que se vê e ouve ao processo de
como o “engenho” humano recebe,
interpreta e capta informações.
Beltran 96
Stevens 94
3
2 - O processo cognitivo do ser humano
2.1 - Fatores Cognitivos na compreensão de
um documento
– compreensão é a construção de um modelo
mental que representa objetos e a sua relação
semântica;
– aumenta quando se tem influências positivas e
diminui quando de tem influências negativas.
2.2 - Coerência (influência positiva):
– um documento é coerente se o leitor pode
construir um modelo mental do mesmo; Thüring 95
Norman 99
– tipos de coerência:
» local: relação entre cláusulas e sentenças
» global: conexões inferidas em grande escala
4
2 - O processo cognitivo do ser
humano (cont.)
2.3 - Sobrecarga Cognitiva (influência negativa)
– esforço necessário para recuperar informações,
devido à concentração e memorização
– para diminuir pode-se fornecer “pistas”que:
» identificam a posição atual na estrutura
» reconstruam o caminho que o levou até esta posição
» façam a distinção entre diferentes opções disponíveis
– indicação da direção de movimento:
» progressiva
» regressiva (backtracking)
Mc Knight 93
Thüring 95
– distância:
» distingüir links que fazem “passos” ou “saltos”.
5
2 - O processo cognitivo do ser
humano (cont.)
2.4 - Algumas regras para apoiar a construção
de um modelo mental de um hiperdocumento
– navegação básica: distinção entre links internos e
externos, bem como direção progressiva ou
regressiva, com uso de cores:
»Vermelho: nodos já visitados;
»Rosa: último nodo visitado
»Laranja ou amarelo âmbar: nodo
hierarquicamente superior
Thüring 95
Streits 92
»Azul: nodo ainda não visitado
»Verde; Nodo contido no próprio documento
6
2 - O processo cognitivo do ser
humano (cont.)
2.5 - Auxiliando o usuário a escolher e a
aprender:
– tamanho do texto na tela
– rolamento x paginação
– codificação com cores (sensações e efeitos)
– cor na tela x cor no papel
Milner 88
– divisão do texto em várias telas
Dillon 91
Hammond 91
– dispositivos de entrada de dados
Grube 95
Borges 95
7
2 - O processo cognitivo do ser
humano (cont.)
•
Cerca de 15% da população sofre de
2.6 - Deficiências: Dislexia
Personagens que sofreram de dislexia:
–visual (acuidade ou
daltonismo)
• Albert Einstein
• Tomas
Edison
–auditiva (surdez parcial
ou total)
• Winston Churchill
–motora (coordenação• motora
das mãos)
Pablo Picasso
• Walt Disney
–cognitiva (memorização
ou dislexia
• Leonardo da Vinci
[dificuldade de ler e assimilar
longos
• Frank Sinatra
• Pelé
textos])
• Paul Mac Carty
• Amadeus Mozart
Nielsen 96
8
4 - Projeto e Lay-out Gráfico da
Interface
4.1 - Requisitos de uma interface gráfica:
– uma imagem mental (metáforas)
– organização dos dados, funções e tarefas (modelo
cognitivo)
– esquema de navegação eficiente (orientação)
– qualidade na aparência (the look)
Dzida 95
– seqüência de interação efetiva (the feel)
4.2 - Principais áreas de requisitos para uma interface:
– interface de tela
– interface de entrada
9
4 - Projeto e Lay-out Gráfico da
Interface (cont.)
4.3 - Lay-out Visual:
– lay-out físico (formatos, proporções e grades)
– tipografia (fontes e formatação)
– cores e texturas (contrastes e sensações)
– imagens (sinais, ícones, símbolos e fotos)
Marcus 95
– animação (tela dinâmica e vídeos)
– seqüenciação (caminhos e alternativas)
– som (abstrato, vocal ou música)
– identidade visual (regras únicas que garantam
a consistência global da interface)
10
4 - Projeto e Lay-out Gráfico da
Interface (cont.)
4.4 - Princípios:
1 - Organização
» Consistência
» Lay-out da tela
Consistência
do Mundo
Real
Norman 69
Marcus 95
Borges 96
11
4 - Projeto e Lay-out Gráfico da
Interface (cont.)
4.4 - Princípios:
1 - Organização
»
»
Consistência
Lay-out da tela
2 - Economizar
»simplicidade
»clareza
Norman 69
Marcus 95
Borges 96
12
4 - Projeto e Lay-out Gráfico da
Interface (cont.)
4.4 - Princípios:
1 - Organização
» Consistência
» Lay-out da tela
2 - Economizar
» simplicidade
» clareza
3 - Comunicação
» Legibilidade
» Tipografia
» Simbolismo
» Cor/textura
Tipografia (Tipos de Fontes):
• for i := j + 1 to l do (Times)
• for i := j + 1 to l do (Arial)
• for i := j + 1 to l do (Courier)
• for i := j + 1 to l do (Chicago)
• for i := j + 1 to l do (Monaco)
• for i := j + 1 to l do (Wide Latin)
• for i := j + 1 to l do (Colonna MT)
Cores
Norman 69
Marcus 95
Borges 96
13
4 - Projeto e Lay-out Gráfico da
Interface (cont.)
• 4.5 - Caixas de Diálogo:
– Radio Button
» uma e somente uma opção selecionada
– Check Box
Borges 97
» zero, uma ou diversas opções selecionadas
– Radio Button Opcional
» zero ou uma opção selecionada
Car tão de Cr é dito
Mastercard
Visa
American Express
Solo
Bradesco
14
5 - Orientação espacial
5.1 - Estruturas do hiperespaço:
– estruturas hierárquicas
– conjuntos, agregação ou agrupamentos
– redes semânticas
– links
– âncoras
5.2 - Técnicas de busca
Botafogo 91
Rivlin 94
Nielsen 95
– filtros
– busca estruturada x busca por conteúdo
5.3 - Perdido no hiperespaço
15
6 - Metáforas
• A idéia é aproveitar experiências já adquiridas;
• As metáforas estão
Acima
associadas a
Atrás
referenciais, com
contrastes;
• Os principais
referenciais podem ser
usados para orientar a
navegação e a
Direita
localização do leitor;
Esquerda
À Frente
Abaixo
16
Principais Metáforas
Fonte de Luz 2
Atrás
Acima
Esquerda
Sombra Luz 1
Direita
ÀFrente
Abaixo
Sombra Luz 2
Fonte de Luz 1
Marcus 95
Santos 96
Dentro
Fora
17
Metáforas (cont.)
1-Luz/Transparência x Escuridão/Opacidade
2-Sustentado por Baixo x Suspenso por Cima
3-Ligado x Desligado
4-Para Cima x Para Baixo
5-Topo x Fundo
6-Próximo x Longe
7-De Frente para x De Costas para
8-Frente x Atrás
9-Mover-se na Direção de x Afastar-se
10-Esquerda x Direita
11-Seqüência/Ordem x Randômico/Caos
12-Padronizado x Não Padronizado
18
Metáforas (cont.)
13-Maior x Menor
14-Crescimento x Encolhimento
15-Dentro x Fora
16-Entrar x Sair
17-Envolvente x Envolvido
18-Cheio x Vazio
19-Aberto x Fechado
20-Tocado/Contactado x Não Tocado/Não Contactado
21-Conectado x Não Conectado
22-Partes x Todo
23-Segurar x Soltar
24-Encontrar x Perder
19
Metáforas (cont.)
25-Visível x Invisível
26-Estruturado/Organizado x Não Estruturado
27-Ajustado x Desajustado
28-Duro x Mole/Suave
29-Forte x Fraco
30-Centro x Periferia
31-Balanceado x desbalanceado
32-Móvel x Estático
33-Cíclico x Linearidade
34-Acima x Abaixo
35-Através x Em Volta de
20
Exemplos de Metáforas
OFF
Ligado x Desligado
Próximo x
Longe
Crescimento x Encolhimento
A
A
21
Exemplos de Metáforas
Forte x Fraco
Encontrar x Perder
Estruturado x
Não Estruturado
22
7 - Navegação em Hiperdocumentos
• Definição
– Navegação é a forma como os usuários se movimentam
através de um hiperdocumento.
• Estratégias de Navegação
– em amplitude
– em profundidade
– randômica
• Navegação é influenciada:
Botafogo 94
De Vocht 95
Gaines 95
– pela estrutura do hiperdocumento
– pela estratégia de navegação
– pelos auxiliares de navegação
23
7.1 - Auxiliares de Navegação
• Roteiros Dirigidos
– Mapas de Navegação
•
•
•
•
•
•
•
Bookmarks
Landmarks ("Bread Crumbs")
“Sneak Preview”
“Fish-Eye” Vision
“Bird-Eye” Vision
Backtracking
History
Nielsen 99
Catledge 95
De Bra 96
Tauscher 96
24
Mapa de Navegação
Exemplos de Mapas de Navegação
B1
A
B
B2
C11
C1
C
D
E
E1
F
Histórico
UCP
Meios E/S
Papel Impresso
Fita Magnética
Disco Magnético
Scanner
Outros Meios
Microcomputadores
Organ.Inform.Comp.
Redes Computadores
Sistemas Operacion.
Linguagens Program.
Aplicativos
25
Bookmarks
26
Landmarks
Landmarks
Discos Magnéticos
Fitas Magnéticas
Discos Magnéticos
CD-ROM
Scanners
Outros meios
Redes Locais
Mark
Unmark
Go to
27
28
"Sneak Preview"
29
"Fish Eye Vision"
• Fornece uma visão para os lados e em
pequena profundidade
30
"Bird Eye Vision"
• Fornece uma visão em grande profundidade,
mas com pouca largura.
31
History/Backtracking
Distribuição do uso das ferramentas de navegação dos Browsers
(Linha Tauscher - 1998)
Operação
Ocorrências
Link
16140
Back
12633
Open URL
707
Hotlist - Go To
636
Forward
537
Open Local
221
Home Document
179
Window History
39
Percentual
51,9
40,6
2,0
2,0
1,9
0,7
0,5
0,1
32
Linda Tauscher
Saul Greenberg
2006
33
History/Backtracking
Documento A
(1)
Documento B
(2)
Documento C
(3)
Documento D
(4)
(5)
(i) D  B  C  B  A - Ordem Cronológica completa
(ii) D  B  A - Percurso Tangencial
(iii) D  B  C  A - Percurso Cronológico - passagem única
(iv) D  C  B  A - Ordem Hierárquica
34
8 - Projeto da Interface
8.1 Objetivos do projeto da interface
– não aumentar a sobrecarga cognitiva
– reduzir o esforço mental
– reduzir o esforço de memorização
– aumentar a capacidade de memorização
– melhorar o conforto e orientação visual
– explorar as capacidades de compreensão das
metáforas
– apoiar-se em ferramentas de navegação
– dispor de mecanismos de navegação adequados
– manter o usuário orientado na estrutura do
hiperdocumento
35
8.2 - Características da Interface
• A interface deve ter as seguintes
características:
– mostrar a estrutura do hiperdocumento e a
posição corrente de navegação
Borges 97
– lay-out gráfico visando conforto visual
(distribuição, coerência e cores)
– usar metáforas adequadas para facilitar a
navegação
– fazer uso intensivo de ferramentas de navegação
– usar auxiliares de navegação e orientação
36
8.5 - Funcionalidade da Interface
• A interface deve ser idealizada para que o usuário
possa a qualquer tempo:
– orientar-se por onde já andou e por onde pode navegar;
– navegar facilmente pela estrutura hierárquica do
documento;
– retornar a pontos de interesse, escolhidos por ele.
• O mecanismo de landmark permite ao usuário criar
marcas personalizadas, em pontos de interesse no
documento.
• O tamanho de cada “página” deveria se aproximar
do tamanho de uma tela.
Ref:[Miller 56], [Shneiderman 95], [Nielsen 2006]
37
Interface de navegação
38