Interface de Navegação em Hiperdocumentos

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.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.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.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


Norman 69Marcus 95Borges 96

Consistênciado Mundo

Real

12



2 - Economizar»simplicidade»clareza



13



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

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


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

Documents

Interface de Navegação em Hiperdocumentos