Interface de Navegação em Hiperdocumentos

Apresentação em tema: "Interface de Navegação em Hiperdocumentos"— Transcrição da apresentação:

1 Interface de Navegação em Hiperdocumentos
Prof. Roberto Cabral de Mello Borges

2 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

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 96 Stevens 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 95 Norman 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 93 Thü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 95 Streits 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 88 Dillon 91 Hammond 91 Grube 95 Borges 95

8 2 - O processo cognitivo do ser humano (cont.)
Cerca de 15% da população sofre de Dislexia Personagens 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 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

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 - 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) 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) Marcus 95

11 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

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 Norman 69 Marcus 95 Borges 96

13 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

14 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 zero, uma ou diversas opções selecionadas Radio Button Opcional zero ou uma opção selecionada Borges 97

15 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 filtros busca estruturada x busca por conteúdo 5.3 - Perdido no hiperespaço Botafogo 91 Rivlin 94 Nielsen 95

16 6 - Metáforas A idéia é aproveitar experiências já adquiridas;
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 Principais Metáforas Marcus 95 Santos 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-se 10-Esquerda x Direita 11-Seqüência/Ordem x Randômico/Caos 12-Padronizado x Não Padronizado

19 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

20 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

21 Exemplos de Metáforas Ligado x Desligado Próximo x Longe
Crescimento x Encolhimento

22 Exemplos de Metáforas Forte x Fraco Encontrar x Perder Estruturado x
Não Estruturado

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 94 De Vocht 95 Gaines 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 90 Catledge 95 De Bra 96 Tauscher 96

25 Mapa de Navegação Exemplos de Mapas de Navegação

26 Bookmarks

27 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/Backtracking
Distribuição do uso das ferramentas de navegação dos Browsers (Linha Tauscher ) Operação Ocorrências Percentual Link ,9 Back ,6 Open URL ,0 Hotlist - Go To ,0 Forward ,9 Open Local ,7 Home Document ,5 Window History ,1

33 Linda Tauscher Saul Greenberg 2005

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

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]