INF043 - Navegação em Hiperdocumentos

Interface de

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

Interface de Sistemas para Navegação em

Hiperdocumentos

1 - Introdução

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

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

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

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

»Rosa

»Laranja

amarelo âmbar

hierarquicamente superior

»Azul

»Verde

Thüring 95 Streits 92

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

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

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

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

4.4 - Princípios:

1 - Organização

» Consistência » Lay-out da tela

4 - Projeto e Lay-out Gráfico da

Interface

4.4 - Princípios:

2 - Economizar

»simplicidade

»clareza

4 - Projeto e Lay-out Gráfico da

Interface

Norman 69 Marcus 95 Borges 96

4.4 - Princípios:

3 - Comunicação

4 - Projeto e Lay-out Gráfico da

Interface

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

• 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

Bradesco Cartão de CréditoMastercardVisaAmerican ExpressSoloBradesco

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

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

Fonte de Luz 1 Fonte de Luz 2 Fora Dentro Acima Abaixo Direita Esquerda Atrás ÀFrente Sombra Luz 2 Sombra Luz 1

Principais Metáforas

Metáforas

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

Metáforas

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

Metáforas

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

Exemplos de Metáforas

A

A

Ligado x Desligado

Próximo x

Longe

Exemplos de Metáforas

Encontrar x Perder

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

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

Mapa de Navegação

Landmarks

"Fish Eye Vision"

• Fornece uma visão para os lados e em

pequena profundidade

"Bird Eye Vision"

• Fornece uma visão em grande profundidade,

mas com pouca largura.

History/Backtracking

Distribuição do uso das ferramentas de navegação dos Browsers (Linha Tauscher - 1998)

Operação Ocorrências Percentual

Link 16140 51,9 Back 12633 40,6 Open URL 707 2,0 Hotlist - Go To 636 2,0 Forward 537 1,9 Open Local 221 0,7 Home Document 179 0,5 Window History 39 0,1

Linda Tauscher Saul Greenberg 2006

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 D Documento C (1) (2) (3) (4) (5)

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

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

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