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

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

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

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

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

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

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

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

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

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

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

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

Programação em Manipulação Direta

– Ferramentas de Engenharia de Software• Tcl/Tk

#First make a menu buttonmenubutton.menu1 -text "Unix Commands" -menu.menu1.m -underline 0

#Now make the menu, and add the lines one at a timemenu.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

• JAVAClass 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();} }

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.

Programação em Manipulação Direta

• Exemplos:• Alguns projetos do HCIL da Univ. de Maryland

– Visible Human Project

– LifeLines– SIMPLE– Juvenile Justice

Programação em Manipulação Direta

• Visual BASIC 5

Microsoft

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.

Programação em Manipulação Direta

• LabView - National Instruments

Programação em Manipulação Direta

• Visual Café for JAVA

Programação em Manipulação Direta• WEKA:

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

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

Ferramentas de Avaliação

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

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.

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

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

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.

Ambientes Virtuais

• Exemplos:– Fobias:

– World Chats™

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