Interface de Navegação em Hiperdocumentos

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.) • 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.4 - Princípios: 1 - Organização • Consistência • Lay-out da tela 2 - Economizar • simplicidade • clareza 3 - Comunicação • Legibilidade • Tipografia • Simbolismo • Cor/textura 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 99 Catledge 95 De Bra 96 Tauscher 96

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

26. Bookmarks

27. Landmarks

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

33. Linda Tauscher Saul Greenberg 2006

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], [Nielsen 2006]

38. Interface de navegação