A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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

Apresentações semelhantes


Apresentação em tema: "1 Interface de Navegação em Hiperdocumentos Prof. Roberto Cabral de Mello Borges."— Transcrição da apresentação:

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

2 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 3 1 - Introdução (cont.) 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 4 2 - O processo cognitivo do ser humano 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 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 5 2 - O processo cognitivo do ser humano (cont.) Sobrecarga Cognitiva (influência negativa) –esforço necessário para recuperar informações, devido à concentração e memorização –para diminuir pode-se fornecer pistasque: »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 6 2 - O processo cognitivo do ser humano (cont.) 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 7 2 - O processo cognitivo do ser humano (cont.) 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 8 2 - O processo cognitivo do ser humano (cont.) 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 Amadeus Mozart

9 9 4 - Projeto e Lay-out Gráfico da Interface 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) Principais áreas de requisitos para uma interface: –interface de tela –interface de entrada Dzida 95

10 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 Princípios: 1 - Organização »Consistência »Lay-out da tela 4 - Projeto e Lay-out Gráfico da Interface (cont.) Norman 69 Marcus 95 Borges 96 Consistência do Mundo Real

12 Princípios: 1 - Organização »Consistência »Lay-out da tela 2 - Economizar »simplicidade »clareza 4 - Projeto e Lay-out Gráfico da Interface (cont.) Norman 69 Marcus 95 Borges 96

13 Princípios: 1 - Organização »Consistência »Lay-out da tela 2 - Economizar »simplicidade »clareza 3 - Comunicação »Legibilidade »Tipografia »Simbolismo »Cor/textura 4 - Projeto e Lay-out Gráfico da Interface (cont.) 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) CoresCores

14 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 (cont.) Borges 97

15 Orientação espacial Estruturas do hiperespaço: –estruturas hierárquicas –conjuntos, agregação ou agrupamentos –redes semânticas –links –âncoras Técnicas de busca –filtros –busca estruturada x busca por conteúdo Perdido no hiperespaço Botafogo 91 Rivlin 94 Nielsen 95

16 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 17 Principais Metáforas Marcus 95 Santos 96

18 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 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 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 21 Exemplos de Metáforas Ligado x Desligado Próximo x Longe Crescimento x Encolhimento

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

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

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

26 26 Bookmarks

27 27 Landmarks

28 28

29 29 "Sneak Preview"

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

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

32 32 History/Backtracking Distribuição do uso das ferramentas de navegação dos Browsers (Linha Tauscher ) Operação Ocorrências Percentual Link ,9 Back ,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 33 Linda Tauscher Saul Greenberg 2005

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


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

Apresentações semelhantes


Anúncios Google