20 molic

Prévia do material em texto

serg semiotic engineering research group
MoLIC –
modelagem da interação
MoLIC –
modelagem da interação
Paula 2003, Barbosa & Paula 2003, 
Silva 2005, Barbosa & Silva 2007
Paula 2003, Barbosa & Paula 2003, 
Silva 2005, Barbosa & Silva 2007
© SERG, 2008 2
Interação na EngSemInteração na EngSem
• metáfora de interação como 
conversa
• discurso interativo
– possíveis conversas travadas entre usuário e 
preposto do designer
•possíveis: caminhos de interação típicos, 
alternativos e de exceção
•conversas: interação, sem detalhes de 
interface
•preposto do designer: porta-voz do 
designer, e não apenas um conjunto organizado de 
funções
• metáfora de interação como 
conversa
• discurso interativo
– possíveis conversas travadas entre usuário e 
preposto do designer
•possíveis: caminhos de interação típicos, 
alternativos e de exceção
•conversas: interação, sem detalhes de 
interface
•preposto do designer: porta-voz do 
designer, e não apenas um conjunto organizado de 
funções
© SERG, 2008 3
Diagrama de interaçãoDiagrama de interação
• modelo diagramático:
– dá aos designers uma visão global do 
discurso interativo
– permite refletir sobre 
soluções alternativas de design
• modelo diagramático:
– dá aos designers uma visão global do 
discurso interativo
– permite refletir sobre 
soluções alternativas de design
MoLIC: Modeling Language for Interaction as 
Conversation
MoLIC: Modeling Language for Interaction as 
Conversation
• MoLIC é uma linguagem que os designers de IHC 
podem utilizar para modelar a interação dos 
usuários com sistemas computacionais, seguindo a 
metáfora de interação como conversa.
• Modelar a interação na MoLIC é modelar a conversa
entre o usuário e o preposto (porta-voz) do 
designer cristalizado na interface.
• Um bom manual de MoLIC está na página da
Profa. Simone: 
http://www-di.inf.puc-rio.br/~simone/publications/07_12_silva.pdf
• MoLIC é uma linguagem que os designers de IHC 
podem utilizar para modelar a interação dos 
usuários com sistemas computacionais, seguindo a 
metáfora de interação como conversa.
• Modelar a interação na MoLIC é modelar a conversa
entre o usuário e o preposto (porta-voz) do 
designer cristalizado na interface.
• Um bom manual de MoLIC está na página da
Profa. Simone: 
http://www-di.inf.puc-rio.br/~simone/publications/07_12_silva.pdf
MoLIC - Estrutura da ConversaMoLIC - Estrutura da Conversa
© SERG, 2008 6
Como a conversa é aberta?Como a conversa é aberta?
abertura
© SERG, 2008 7
Como a conversa é fechada?Como a conversa é fechada?
fechamento
Cadastrar disciplina
d+u: código, título, horário, 
professor, sala
© SERG, 2008 8
Sobre o quê o usuário poderá falar?Sobre o quê o usuário poderá falar?
Cadastrar 
disciplina
tópico
cena
cena
diálogos
Dúvidas?Dúvidas?
© SERG, 2008 9
Cadastrar 
disciplina
Cadastrar disciplina
d+u: código, título, horário, 
professor, sala
Cadastrar disciplina
d+u: código, título, horário, 
professor, sala
u: gravar
© SERG, 2008 10
Quando e como o preposto pode responder ao que o usuário 
disse?
Quando e como o preposto pode responder ao que o usuário 
disse?
fala de transição 
do usuário
Cadastrar disciplina
d+u: código, título, horário, 
professor, sala
u: gravar
d: dados válidos e 
armazenamento OK
© SERG, 2008 11
O que houve?O que houve?
processamento 
do sistema
fala de transição 
do preposto
© SERG, 2008 12
O que houve?O que houve?
monólogo do 
preposto
© SERG, 2008 13
E se algo der errado?E se algo der errado?
fala de recuperação
de breakdown
serg semiotic engineering research group
Prevenção e Tratamento de 
Breakdowns
Prevenção e Tratamento de 
Breakdowns
Prevenção PassivaPrevenção Passiva
15© SERG, 2008
Prevenção ativaPrevenção ativa
© SERG, 2008 16
(permite apenas entrada de 
números)
Prevenção apoiadaPrevenção apoiada
© SERG, 2008 17
Arquivo existenteArquivo existente
Arquivo “Relatório mensal.doc” já 
existe. Deseja sobrescrevê-lo?
NãoSim
Tratamento apoiadoTratamento apoiado
© SERG, 2008 18
Captura de erroCaptura de erro
© SERG, 2008 19
serg semiotic engineering research group
Voltando à MoLICVoltando à MoLIC
© SERG, 2008 21
E se algo der errado?E se algo der errado?
fala de recuperação
de breakdown
© SERG, 2008 22
E se demorar para o sistema concluir um processamento?E se demorar para o sistema concluir um processamento?
© SERG, 2008 23
Quando um usuário pode “falar” sobre um tópico?Quando um usuário pode “falar” sobre um tópico?
acesso ubíquo
acesso ubíquo com 
pré-condição
Dúvidas?Dúvidas?
© SERG, 2008 24
Cadastrar disciplina
d+u: código, título, horário, 
professor, sala
u: gravar
d: dados válidos e 
armazenamento OK
—
d: Disciplina criada com 
sucesso
d: [TA] código da 
disciplina já existe
u: cadastrar disciplina
© SERG, 2008 25
A interação de um usuário pode afetar a do outroA interação de um usuário pode afetar a do outro
Gerenciar disciplina
xor {
d: conjunto (disciplina, 1..n)
d: não há disciplinas 
cadastradas 
}
u: criar nova 
disciplina
u: modificar 
disciplina D
u: remover 
disciplina D
© SERG, 2008 26
Cenas epistêmicas – conversa com 
materiais
Cenas epistêmicas – conversa com 
materiais
somente signos, 
sem diálogos
© SERG, 2008 27
Decisões de design (I)Decisões de design (I)
Publicar notícia
d+u:dados da notícia: 
categoria,
data(default=hoje),
título,
primeira página,
imagem,
conteúdo
u: publicar notícia
u: gravar notícia
d: notícia gravada
com sucesso
[TA] d: título ou 
conteúdo vazio
Publicar notícia
d+u:dados da notícia: 
categoria,
data(default=hoje),
título,
primeira página,
imagem,
conteúdo
u: publicar notícia
u: gravar notícia
d: notícia gravada
com sucesso
[TA] d: título ou 
conteúdo vazio
Confirmar notícia
d: dados da notícia
d: título e conteúdo válidos
u: confirmar
u: modificar
notícia
Publicar notícia
d+u:dados da notícia: 
categoria,
data(default=hoje),
título,
primeira página,
imagem,
conteúdo
u: publicar notícia
u: gravar notícia
u: OK
[TA] d: título ou 
conteúdo vazio
Confirmar notícia
d: dados da notícia
d: notícia gravada
com sucesso
u: modificar
notícia
© SERG, 2008 28
Decisões de design (II)Decisões de design (II)
Publicar notícia
d+u: dados da notícia: título, 
data
d+u: texto da notícia
u: publicar notícia
pre: título e texto preenchidos
u: publicar
...
Publicar notícia
d+u: dados da notícia: título, 
data
u: publicar notícia
pre: título preenchido
u: continuar
Publicar notícia (cont.)
d+u: texto da notícia
pre: texto preenchido
u: publicar
...
Como construir o diagrama de interação?Como construir o diagrama de interação?
MoLIC – Montar TCPMoLIC – Montar TCP
MoLIC – Montar TCPMoLIC – Montar TCP
MoLIC – Montar TCPMoLIC – Montar TCP
MoLIC – Montar TCPMoLIC – Montar TCP
MoLIC – Montar TCPMoLIC – Montar TCP
MoLIC – Montar TCPMoLIC – Montar TCP
MoLIC – Montar TCPMoLIC – Montar TCP
Como MoLIC ajuda o projetista de IHC a pensarComo MoLIC ajuda o projetista de IHC a pensar
© SERG, 2008 39
Questões relacionadas à interaçãoQuestões relacionadas à interação
• para cada meta ou fragmento de conversa
– seqüência
• Como você faz isto hoje? Como você gostaria de fazer isto? 
Quais são os passos necessários para fazer isto?
• Em que momento você começa a fazer isto?
• O que precisa para você fazeristo? O que precisa ter acontecido? 
O que dispara isto?
– resultados
• O que acontece após fazer isto? Qual é o resultado?
• O que você { precisa | deve } fazer depois disto? O que mais 
precisa ser feito?
– problemas e dificuldades
• Que problemas podem ocorrer ao fazer isto? Como você os 
detecta? Como os resolve?
• Que dificuldades você enfrenta ao fazer isto? Como você as 
resolve?
• Como você { cancela | desfaz } isto?
– alternativas
• Você gostaria de fazer isto de alguma outra forma? Como?
• para cada meta ou fragmento de conversa
– seqüência
• Como você faz isto hoje? Como você gostaria de fazer isto? 
Quais são os passos necessários para fazer isto?
• Em que momento você começa a fazer isto?
• O que precisa para você fazer isto? O que precisa ter acontecido? 
O que dispara isto?
– resultados
• O que acontece após fazer isto? Qual é o resultado?
• O que você { precisa | deve } fazer depois disto? O que mais 
precisa ser feito?
– problemas e dificuldades
• Que problemas podem ocorrer ao fazer isto? Como você os 
detecta? Como os resolve?
• Que dificuldades você enfrenta ao fazer isto? Como você as 
resolve?
• Como você { cancela | desfaz } isto?
– alternativas
• Você gostaria de fazer isto de alguma outra forma? Como?
adaptado de Aureliano 2007
serg semiotic engineering research group
Da interação para a 
interface
Da interação para a 
interface
© SERG, 2008 41
Da interação para a interfaceDa interação para a interface
• acessos ubíquos → menu principal ou barra 
de navegação
• acessos ubíquos → menu principal ou barra 
de navegação
Disciplina
Nova...
Buscar...
Trabalho
Novo...
Silva & Barbosa 2007
© SERG, 2008 42
Da interação para a interfaceDa interação para a interface
• cena → unidade de apresentação (tela, 
página)
• cena → unidade de apresentação (tela, 
página)
Cadastrar disciplinaCadastrar disciplina
Silva & Barbosa 2007
© SERG, 2008 43
Da interação para a interfaceDa interação para a interface
• diálogo → grupos de signos relacionados• diálogo → grupos de signos relacionados
Cadastrar disciplinaCadastrar disciplina
Cadastrar disciplina
d+u: código, título, horário, 
professor, sala
Silva & Barbosa 2007
© SERG, 2008 44
Da interação para a interfaceDa interação para a interface
• signo → elemento de interface (widget)• signo → elemento de interface (widget)
código: expressão = AA9999;
título: restrição = 50 chars;
professor: conjunto;
sala: texto livre;
horário: texto livre
Cadastrar disciplinaCadastrar disciplina
Informe os dados da disciplina:
*Código:
*Título:
*Professor:
Sala:
Horário:
(DEP9999)
Pardal
Silva & Barbosa 2007
© SERG, 2008 45
Da interação para a interfaceDa interação para a interface
• fala de transição do usuário → botão ou link• fala de transição do usuário → botão ou link
Cadastrar disciplina
d+u: código, título, horário, 
professor, sala
u: gravar
Silva & Barbosa 2007
© SERG, 2008 46
Da interação para a interfaceDa interação para a interface
• fala de transição do preposto → unidade de 
apresentação separada ou feedback
embutido numa unidade de apresentação
• fala de transição do preposto → unidade de 
apresentação separada ou feedback
embutido numa unidade de apresentação
Student LifeStudent Life
Disciplina armazenada com sucesso.
Cadastrar disciplina
d+u: código, título, horário, 
professor, sala
u: gravar
d: dados válidos e 
armazenamento OK
Silva & Barbosa 2007
© SERG, 2008 47
Da interação para a interfaceDa interação para a interface
• mecanismos de recuperação de ruptura →
mensagens de erro
• mecanismos de recuperação de ruptura →
mensagens de erro
Erro ao cadastrar disciplinaErro ao cadastrar disciplina
O código “INF1001” já existe e está 
associado à disciplina ‘Introdução à 
Ciência da Computação”
OK
Cadastrar disciplina
d+u: código, título, horário, 
professor, sala
u: gravar
d: dados válidos e 
armazenamento OK
d: [TA] código da 
disciplina já existe
Silva & Barbosa 2007
Da interação para a interfaceDa interação para a interface
• mecanismos de prevenção passiva de 
ruptura → instruções contextualizadas
• mecanismos de prevenção passiva de 
ruptura → instruções contextualizadas
48Silva & Barbosa 2007
49
Da interação para a interfaceDa interação para a interface
• pré-condições → ativar/desativar; 
exibir/ocultar elementos de interface
• pré-condições → ativar/desativar; 
exibir/ocultar elementos de interface
Silva & Barbosa 2007
Cenário para os exercíciosCenário para os exercícios
• Marta precisa transferir o dinheiro do aluguel para Ana. 
Mas antes precisa verificar se a sua bolsa já foi
depositada. Ela entra no sistema bancário, informa seu
número de conta e senha, e recebe o saldo da conta. Ela
percebe que tem mais dinheiro do que esperava, e resolve 
verificar o extrato das transações mais recentes. Pelas
últimas transações apresentadas, Marta percebe que o 
cheque que tinha passado no dia anterior ainda não foi
depositado. Ela então prossegue para transferir o dinheiro
a Ana: ela seleciona a conta da Ana de uma lista de contas
cadastradas, informa a quantia a ser transferida e 
confirma a operação com sua senha. Ela obtém uma
confirmação impressa da transferência para dar para Ana, 
verifica o seu saldo mais uma vez e sai do sistema.
• Marta precisa transferir o dinheiro do aluguel para Ana. 
Mas antes precisa verificar se a sua bolsa já foi
depositada. Ela entra no sistema bancário, informa seu
número de conta e senha, e recebe o saldo da conta. Ela
percebe que tem mais dinheiro do que esperava, e resolve 
verificar o extrato das transações mais recentes. Pelas
últimas transações apresentadas, Marta percebe que o 
cheque que tinha passado no dia anterior ainda não foi
depositado. Ela então prossegue para transferir o dinheiro
a Ana: ela seleciona a conta da Ana de uma lista de contas
cadastradas, informa a quantia a ser transferida e 
confirma a operação com sua senha. Ela obtém uma
confirmação impressa da transferência para dar para Ana, 
verifica o seu saldo mais uma vez e sai do sistema.
© SERG, 2008 50
Exercício: construa um diagrama de 
interação para os objetivos de verificar 
saldo, extrato e realizar transferência.
Exercício: construa um diagrama de 
interação para os objetivos de verificar 
saldo, extrato e realizar transferência.
© SERG, 2008 51
© SERG, 2008 52
Exercício: Esboce as telas da aplicação 
bancária
Exercício: Esboce as telas da aplicação 
bancária