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

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


» Consistência

» Lay-out da tela

2 - Economizar»simplicidade

»clareza



13


» 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

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

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 90Catledge 95De Bra 96

Tauscher 96

25

Mapa de Navegação

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/Backtracking

Distribuiçã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 Greenberg2005

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]

Documents

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