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