Manipulaзгo Direta e Ambientes Virtuais

1
Manipulação Direta e Ambientes Virtuais

• Introdução
• Exemplos de Sistemas de Manipulação Direta
• Explicação da Manipulação Direta
• Programação em Manipulação Direta
• Avaliação em Manipulação direta
• Ambientes Virtuais

2
Introdução

• Pensamentos Positivos Associados a Boas
  Interfaces
• Domínio da interface
• Competência na execução de tarefas
• Facilidade de aprendizagem inicial e de funções
  avançadas
• Prazer em utilizar o sistema
• Útil mesmo para pessoas inexperientes
• Desejo de explorar aspectos mais poderosos do
  sistema

3
Exemplos de Sistemas de Manipulação Direta

• Editores e Processadores de Texto (de linha de
  comando, gráficos)
• Os tempos de treino com os editores gráficos são
  muito menores que os de linha de comando
• Os editores de linha são geralmente mais
  flexíveis e poderosos
• Os avanços nos processadores gráficos
• Mostram uma página inteira de texto
• Mostram o documento na forma em que ele vai ser
  impresso
• Mostram a ação do cursor
• Controlam o movimento do cursor de uma forma
  fisicamente natural e óbvia
• Utilização de ícones com etiquetas para as ações
• Mostram os resultados de uma ação imediatamente
• Fornecem ações fáceis e reversíveis

4
Exemplos de Sistemas de Manipulação Direta

• Tecnologias que emergiram dos processadores de
  texto
• Integração de aplicações e conteúdos (OpenDoc,
  OLE, etc.)
• Software de publicação (pagemaker, quark-X-press,
  etc.)
• Software de apresentação (powerpoint, claris
  impact, etc.)
• Ambientes hipermídia (hypercard, supercard,
  director, etc.)
• Capacidades de linguagens macro (VBA,
  Applescript, etc.)
• Dicionários de sinônimos, corretores ortográficos
  e gramaticais

5
Exemplos de Sistemas de Manipulação Direta

• Planilhas e Bases de Dados
• Em alguns casos a representação espacial permite
  um melhor modelo da realidade. Os sistemas de
  gestão de dados espaciais dependem da escolha
  apropriada de
• Ícones
• Representações gráficas
• Disposições naturais e compreensíveis dos dados

6
Exemplos de Sistemas de Manipulação Direta

• Jogos de Vídeo
• O Campo da ação é visual e atrativo
• Os comandos são ações físicas cujo resultado é
  imediatamente mostrado no vídeo
• Inexistência de sintaxe
• CAD, automação de escritório e outros exemplos de
  manipulação direta
• HyperCard
• Quicken
• ArcView (GIS)
• AutoCAD
• Programação de Robots

7
Explicação da Manipulação Direta

• Problemas com a Manipulação Direta
• As representações espaciais e visuais podem ser
  muito complexas
• Os modelos de alto nível e os diagramas de
  estados podem ser confusos
• O desenho pode forçar que informação valiosa
  fique fora da tela
• Os usuários têm que aprender as representações
  gráficas (metáforas)
• A representação visual pode ser enganadora
• Digitar comandos através do teclado pode ser mais
  eficiente

8
Explicação da Manipulação Direta

• O Modelo Objeto-Ação para a Manipulação Direta
• Características da manipulação direta
• Representação contínua dos objetos e ações de
  interesse
• Ações físicas sobre botões com etiquetas em vez
  de sintaxe complexa
• Operações incrementais, rápidas e reversíveis
  cujo efeito no objeto de interesse é
  imediatamente visível
• Vantagens
• Os usuários inexperientes aprendem rapidamente
• Os usuários experientes trabalham mais
  rapidamente
• Os usuários intermitentes retêm os conceitos
• As mensagens de erro são raramente necessárias
• Os usuários vêm se as suas ações conduzem aos
  objetivos

9
Programação em Manipulação Direta

• Os 5 desafios da programação em manipulação
  direta
• Suficiente generalização computacional
• Acesso às estruturas de dados e operadores
  apropriados
• Facilidade de programação e edição de programas
• Simplicidade na invocação e atribuição de
  argumentos
• Diminuição de erros do usuário
• O enquadramento das dimensões cognitivas pode
  ajudar a analisar as questões de desenho dos
  ambientes de programação visual

10
Programação em Manipulação Direta

• A Terminologia depende muito das empresas
  produtoras, alguns termos populares
• Rapid Prototyper
• User Interface Builder
• User Interface Management System
• User Interface Development Environment
• Rapid Application Developer
• Capacidades das ferramentas de desenvolvimento de
  interfaces
• Independência da interface
• Separar o desenho da interface da sua
  implementação
• Permitir estratégias múltiplas de interface
• Permitir o suporte de várias plataformas
• Definir o papel do arquiteto da interface
• Potencializar a utilização de normas

11
Programação em Manipulação Direta

• Capacidades das ferramentas (cont.)
• Metodologia e Notação
• Desenvolver procedimentos de desenho
• Descobrir formas de falar sobre o desenho
• Criar a gestão do projeto
• Prototipação Rápida
• Testar idéias no início do processo
• Facilitar a iteração testar, rever, testar,
  rever
• Permitir a colaboração entre desenvolvedores,
  usuários e outros
• Suporte de Software
• Aumentar a produtividade
• Permitir alguma verificação de restrições e
  consistência
• Facilitar o desenvolvimento em grupo

12
Programação em Manipulação Direta

• Ferramentas de Desenho
• Os designers podem escrever programas simples
• on mouseUp
• play "boing"
• wait for 3 seconds
• visual effect wipe left very fast to black
• click at 150,100
• type "goodbye"
• end mouseUp

13
Programação em Manipulação Direta

• Ferramentas de Engenharia de Software
• Tcl/Tk
• First make a menu button
• menubutton.menu1 -text "Unix Commands"
  -menu.menu1.m
• -underline 0
• Now make the menu, and add the lines one at a
  time
• menu.menu1.m
• .menu1.m add command -label "List Files" -command
  ls
• .menu1.m add command -label "Get Date" -command
  date
• .menu1.m add command -label "Start Calendar"
  -command xcalendar
• pack.menu1
• JAVA
• Class Test
• public static void main (String args)
• for (int i 0 i lt args.length i)
• System.out.print(i 0 ? argsi " "
  argsi)
• System.out.println()

14
Programação em Manipulação Direta

• Ferramentas de Engenharia de Software (Cont.)
• JavaScript
• ltHEADgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!-- to hide script contents from old browsers
• function square(i) document.write("The call
  passed ", i ," to the function."ltBRgt")
• return i i
• document.write("The function returned ",
  square(5),".")
• // end hiding contents from old browsers --gt
• lt/SCRIPTgt lt/HEADgt ltBODYgt ltBRgt All Done.lt/BODYgt
• Depois de carregada a página é produzido o
  seguinte output
• The call passed 5 to the function.
• The function returned 25.
• All Done.

15
Programação em Manipulação Direta

• Exemplos
• Alguns projetos do HCIL da Univ. de Maryland
• Visible Human Project
• LifeLines
• SIMPLE
• Juvenile Justice

16
Programação em Manipulação Direta

• Visual BASIC 5
• Microsoft

17
Programação em Manipulação Direta

• Prograph CPX - Pictorius Corporation
• Linguagem OO Pictorial
• Uma linguagem totalmente visual com suporte a
  herança, encapsulação e polimorfismo.
• No Prograph CPX os diagramas de fluxo de dados
  baseados em ícones são o código executável.

18
Programação em Manipulação Direta

• LabView - National Instruments

19
Programação em Manipulação Direta

• Visual Café for JAVA

20
Programação em Manipulação Direta

• WEKA

21
Ferramentas de Avaliação

• Existem ferramentas de software para avaliar e
  criticar as interfaces
• Métricas simples permitem avaliar e produzir
  relatórios sobre telas, componentes e modelos
  navegáveis.
• Procedimentos mais avançados incluem a análise de
  hierarquias de menus, de consistência e
  concordância dos termos.
• As ferramentas de registo permitem armazenar os
  padrões de atividade dos usuários (frequência de
  erros, invocação de ajuda, etc.)

22
Ferramentas de Avaliação

• O Programa de Análise de Telas de Tullis (Versão
  4.0)
• Parte de telas alfanuméricas e produz métricas de
  complexidade da tela e algumas recomendações
• Upper-case letters 77 The percentage of
  upper-case letters is high.
• Consider using more lower-case letters, since
  text printed in normal upper- and lower-case
  letters is read about 13 faster than text in all
  upper case. Reserve all upper-case for items that
  need to attract attention.
• Maximum local density 89.9 at row 9, column 8.
• Average local density 67.0
• The area with the highest local density is
  identified...you can reduce local density by
  distributing the characters as evenly as feasible
  over the entire screen.
• Total layout complexity 8.02 bits. Layout
  complexity is high.
• This means that the display items (labels and
  data) are not well aligned with each
  other...Horizontal complexity can be reduced by
  starting items in fewer different columns on the
  screen (that is, by aligning them vertically).

23
Ferramentas de Avaliação

• Doctor HTML (http//www.imagiware.com/RxHTML)

24
Ferramentas de Avaliação

• Doctor HTML (cont.)
• Summary Report
• Here is a summary of the information that Doctor
  HTML has learned about your Web page
  http//www.times.com
• Image Syntax  109 There were 109 unset image
  command tags that you should set to improve your
  overall web page performance.
• Spelling  63 63 potential spelling errors were
  found.
• HTML Parse  8 There were 8 HTML parsing errors
  detected.
• Table Analysis  1There was 1 table structure
  problem found.
• Image Analysis  0 The total number of bytes in
  images found on your web page is 129.2 KB. The
  total number of bytes transferred while loading
  the page is 195.2 KB. This will take
  approximately 54.2 seconds to load over a 28.8
  kbps network connection.
• Browser Support  32 There are 35 browser support
  conflicts in your document.
• Meta Tags  2There are 2 potential meta tag errors
  in your document.
• Form Structure  2There were 2 form structure
  problems found.
• Document Structure  1There was 1 document
  structure problem found.
• Verify Hyperlinks  0There are 206 hyperlinks in
  your document. There were no dead hyperlinks
  based on server replies.
• Squish HTML  0 A Squished page that is reduced in
  size by 7.0 to 61.3 KB is available here.
• Font Support  0 There are no font errors in your
  document. Congratulations!
• Format HTML  A Formatted version of your page is
  available here. The text and HTML commands of the
  document take up 66.0 K.

25
Ambientes Virtuais

• A realidade virtual quebra as limitações físicas
  do espaço e permite aos usuários agirem como se
  estivessem em outro lugar
• A realidade aumentada permite mostrar o mundo
  real com informação adicional
• Por exemplo, enquanto visualizam um edifício
  podem observar transparentemente a fiação
  elétrica
• Conhecimento situacional (situational awareness)
  mostra a informação que rodeia o usuário,
  registrando os movimentos num modelo
  computacional
• Por exemplo, num museu podem ser utilizados
  sensores de movimento para permitir alterar a
  informação visualizada num vídeo em função da
  obra para a qual o usuário está olhando

26
Ambientes Virtuais

• O sucesso dos ambientes virtuais depende da boa
  integração dos seguintes elementos
• Dispositivos de visualização
• Telas de grandes dimensões que permitem limitar a
  visão, capacetes de realidade virtual e
  projetores. Alta definição e tempos de
  regeneração próximos do tempo real (100ms).
• Sensores de orientação da cabeça
• Sensores adaptados a capacetes, óculos ou
  baseados em reconhecimento de imagem de vídeo.
• Sensores de orientação das mãos
• DataGlove e outros sensores em diversas partes do
  corpo.
• Feedback de força
• Importantes para a manipulação de dispositivos
  físicos.
• Entrada e Saída de som
• Outras sensações vibrações, tato e olfato
• Realidade virtual cooperativa e competitiva

27
Ambientes Virtuais

• Exemplos
• CAVE
• Utiliza 4 projetores de imagens geradas por
  computador nas paredes e no chão. O software
  sincroniza todos os dispositivos e calcula a
  perspectiva correta para cada parede.
• ImmersaDesk
• Protótipo na forma de elástico que utiliza
  sensores para a cabeça e mãos em conjunto com
  óculos estéreo para bloquear a realidade e
  transmitir uma semi-sensação de imersão.

28
Ambientes Virtuais

• Exemplos
• Fobias
• World Chats

29
Sumário

• No final deste capítulo os alunos devem saber
• Descrever o estilo de interação por manipulação
  direta
• Descrever exemplos de manipulação direta
• Argumentar sobre as vantagens e desvantagens da
  implementação da manipulação direta
• Descrever as características dos ambientes de
  programação para manipulação direta
• Descrever as características dos ambientes de
  avaliação de software
• Descrever e distinguir sistemas baseados em
  ambientes virtuais
• Descrever exemplos a aplicações dos ambientes
  virtuais

Material de Estudo Cap. 6 de Shneiderman