Interface de Navegao em Hiperdocumentos Prof Roberto Cabral

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

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 2

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 3

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; Thüring 95 Norman 99 – tipos de coerência: » local: relação entre cláusulas e sentenças » global: conexões inferidas em grande escala 4

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) Mc Knight 93 Thüring 95 – distância: » distingüir links que fazem “passos” ou “saltos”. 5

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 Thüring 95 Streits 92 » Azul: nodo ainda não visitado » Verde; Nodo contido no próprio documento 6

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 Milner 88 – divisão do texto em várias telas Dillon 91 Hammond 91 – dispositivos de entrada de dados Grube 95 Borges 95 7

2 - O processo cognitivo do ser humano (cont. ) Cerca de 15% da população sofre de Dislexia Personagens que sofreram de dislexia: – visual (acuidade ou daltonismo) • Albert Einstein • Tomas Edison – auditiva (surdez parcial ou total) • Winston Churchill – motora (coordenação • motora das mãos) Pablo Picasso • Walt Disney – cognitiva (memorização ou dislexia • Leonardo da Vinci [dificuldade de ler e assimilar longos • Frank Sinatra • Pelé textos]) • Paul Mac Carty • Amadeus Mozart Nielsen 96 • 2. 6 - Deficiências: 8

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) Dzida 95 – seqüência de interação efetiva (the feel) 4. 2 - Principais áreas de requisitos para uma interface: – interface de tela – interface de entrada 9

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

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 11

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

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

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

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

Principais Metáforas Marcus 95 Santos 96 17

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 18

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 19

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 20

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

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

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: Botafogo 94 De Vocht 95 Gaines 95 – pela estrutura do hiperdocumento – pela estratégia de navegação – pelos auxiliares de navegação 23

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 24

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

Bookmarks 26

Landmarks 27

28

"Sneak Preview" 29

"Fish Eye Vision" • Fornece uma visão para os lados e em pequena profundidade 30

"Bird Eye Vision" • Fornece uma visão em grande profundidade, mas com pouca largura. 31

History/Backtracking Distribuição do uso das ferramentas de navegação dos Browsers (Linha Tauscher - 1998) Operação Ocorrências Link 16140 Back 12633 Open URL 707 Hotlist - Go To 636 Forward 537 Open Local 221 Home Document 179 Window History 39 Percentual 51, 9 40, 6 2, 0 1, 9 0, 7 0, 5 0, 1 32

Linda Tauscher Saul Greenberg 2005 33

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 34

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 35

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 Borges 97 – 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 36

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