Manipulação Direta e Ambientes Virtuais

Apresentação em tema: "Manipulação Direta e Ambientes Virtuais"— Transcrição da apresentação:

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 < args.length; i++) System.out.print(i == 0 ? args[i] : " " + args[i]); System.out.println();} }

14 Programação em Manipulação Direta
Ferramentas de Engenharia de Software (Cont.) JavaScript <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- to hide script contents from old browsers function square(i) {document.write("The call passed ", i ," to the function."<BR>") return i * i} document.write("The function returned ", square(5),".") // end hiding contents from old browsers --> </SCRIPT> </HEAD> <BODY> <BR> All Done.</BODY> 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 (

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: 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 KB. The total number of bytes transferred while loading the page is 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™ ImmersaDesk™
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