interface de navegação em hiperdocumentos
DESCRIPTION
Interface de Navegação em Hiperdocumentos. Prof. Roberto Cabral de Mello Borges. 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 - PowerPoint PPT PresentationTRANSCRIPT
1
Interface de Navegação em
Hiperdocumentos
Prof. Roberto Cabral de Mello Borges
2
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
Interface de Sistemas para Navegação em Hiperdocumentos
3
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 96Stevens 94
4
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;– tipos de coerência:
» local: relação entre cláusulas e sentenças» global: conexões inferidas em grande escala
Thüring 95Norman 99
5
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)
– distância:» distingüir links que fazem “passos” ou “saltos”.
Mc Knight 93Thüring 95
6
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
»Azul: nodo ainda não visitado
»Verde; Nodo contido no próprio documento
Thüring 95Streits 92
7
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– divisão do texto em várias telas– dispositivos de entrada de dados
Milner 88Dillon 91
Hammond 91Grube 95Borges 95
8
2 - O processo cognitivo do ser humano (cont.)
• 2.6 - Deficiências:–visual (acuidade ou daltonismo)–auditiva (surdez parcial ou total)–motora (coordenação motora das mãos)–cognitiva (memorização ou dislexia
[dificuldade de ler e assimilar longos textos])
Nielsen 96
Cerca de 15% da população sofre de DislexiaPersonagens que sofreram de dislexia:
• Albert Einstein• Tomas Edison• Winston Churchill• Pablo Picasso• Walt Disney• Leonardo da Vinci• Frank Sinatra• Pelé• Paul Mac Carty• Amadeus Mozart
9
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)– seqüência de interação efetiva (the feel)
4.2 - Principais áreas de requisitos para uma interface:– interface de tela– interface de entrada
Dzida 95
10
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)–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)
4 - Projeto e Lay-out Gráfico da Interface (cont.)
Marcus 95
11
4.4 - Princípios:1 - Organização
» Consistência» Lay-out da tela
4 - Projeto e Lay-out Gráfico da Interface (cont.)
Norman 69Marcus 95Borges 96
Consistênciado Mundo
Real
12
4.4 - Princípios:1 - Organização
» Consistência» Lay-out da tela
2 - Economizar»simplicidade»clareza
4 - Projeto e Lay-out Gráfico da Interface (cont.)
Norman 69Marcus 95Borges 96
13
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
4 - Projeto e Lay-out Gráfico da Interface (cont.)
Norman 69Marcus 95Borges 96
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
14
• 4.5 - Caixas de Diálogo:– Radio Button
» uma e somente uma opção selecionada – Check Box
» zero, uma ou diversas opções selecionadas– Radio Button Opcional
» zero ou uma opção selecionada
4 - Projeto e Lay-out Gráfico da Interface (cont.)
Cartão de CréditoMastercardVisaAmerican ExpressSoloBradesco Cartão de CréditoMastercardVisaAmerican ExpressSoloBradesco
Borges 97
15
5 - Orientação espacial5.1 - Estruturas do hiperespaço:
– estruturas hierárquicas– conjuntos, agregação ou agrupamentos– redes semânticas– links– âncoras
5.2 - Técnicas de busca– filtros– busca estruturada x busca por conteúdo
5.3 - Perdido no hiperespaço
Botafogo 91Rivlin 94
Nielsen 95
16
6 - Metáforas
• A idéia é aproveitar experiências já adquiridas;
Esquerda
Direita
Abaixo
Acima
Atrás
À Frente
• As metáforas estão associadas a referenciais, com contrastes;
• Os principais referenciais podem ser usados para orientar a navegação e a localização do leitor;
17
Fonte de Luz 1
Fonte de Luz 2
ForaDentro
Acima
Abaixo
DireitaEsquerda
Atrás
ÀFrente
Sombra Luz 2
Sombra Luz 1
Principais Metáforas
Marcus 95Santos 96
18
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-se10-Esquerda x Direita11-Seqüência/Ordem x Randômico/Caos12-Padronizado x Não Padronizado
19
Metáforas (cont.)
13-Maior x Menor14-Crescimento x Encolhimento15-Dentro x Fora16-Entrar x Sair17-Envolvente x Envolvido18-Cheio x Vazio19-Aberto x Fechado20-Tocado/Contactado x Não Tocado/Não Contactado21-Conectado x Não Conectado22-Partes x Todo23-Segurar x Soltar24-Encontrar x Perder
20
Metáforas (cont.)
25-Visível x Invisível26-Estruturado/Organizado x Não Estruturado27-Ajustado x Desajustado28-Duro x Mole/Suave29-Forte x Fraco30-Centro x Periferia31-Balanceado x desbalanceado32-Móvel x Estático33-Cíclico x Linearidade34-Acima x Abaixo35-Através x Em Volta de
21
Exemplos de Metáforas
OFF
A A
Ligado x Desligado
Próximo x Longe
Crescimento x Encolhimento
22
Exemplos de Metáforas
Encontrar x Perder Estruturado xNão Estruturado
Forte x Fraco
23
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:– pela estrutura do hiperdocumento– pela estratégia de navegação– pelos auxiliares de navegação
Botafogo 94De Vocht 95Gaines 95
24
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 99Catledge 95De Bra 96
Tauscher 96
25
Mapa de Navegação
A B C D E F
B1
B2
C1
E1
C11
HistóricoUCP
Organ.Inform.Comp.
Aplicativos
Redes Computadores
Linguagens Program.
Microcomputadores
Meios E/S
Sistemas Operacion.
Papel ImpressoFita MagnéticaDisco Magnético
Outros Meios Scanner
Exemplos de Mapas de Navegação
26
Bookmarks
27
Landmarks
Mark
Unmark
Go to
Discos Magnéticos
Fitas MagnéticasDiscos MagnéticosCD-ROMScannersOutros meiosRedes Locais
Landmarks
28
29
"Sneak Preview"
30
"Fish Eye Vision"
• Fornece uma visão para os lados e em pequena profundidade
31
"Bird Eye Vision"
• Fornece uma visão em grande profundidade, mas com pouca largura.
32
History/BacktrackingDistribuição do uso das ferramentas de navegação dos Browsers (Linha Tauscher -
1998)
Operação Ocorrências PercentualLink 16140 51,9Back 12633 40,6Open URL 707 2,0Hotlist - Go To 636 2,0Forward 537 1,9Open Local 221 0,7Home Document 179 0,5Window History 39 0,1
33
Linda Tauscher Saul Greenberg2006
34
History/Backtracking
(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
Documento A
Documento B
Documento DDocumento C
(1)
(2)
(3)(4) (5)
35
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
36
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
– 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
Borges 97
37
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]
38
Interface de navegação