seminário do grupo de pesquisa em ihc ufrn jair c leite, 2004 desenvolvimento de interfaces de...
TRANSCRIPT
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Desenvolvimento de interfaces de usuário baseado em modelos
• Objetivo: dar um tratamento de engenharia ao desenvolvimento de IU
• Início dos anos 90- Geração automática em SGIU– Mapeamento de modelos de dados em modelos de
apresentação (layout)– Szerpeky, Vanderdonckt
• Final dos anos 90– Aplicação em IU para várias plataformas ou dispositivos– Linguagens de Descrição baseadas em XML– Puerta, Eisenstein e outros – Projeto Mecano; Framework;
XIML– Fabio Paterno e outros – Modelos tarefas com CTT e CTTE– Vanderdonckt e outros- USIXML
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Modelagem e Especificação
• Modelagem– Elaboração de modelos para especificação, visualização,
construção e documentação• Especificação
– Descrição do que deverá ser construído através de linguagens e modelos
– Formal, semi-formal, informal• Níveis de abstração
– Abstrato– Concreto
• Tipo de linguagem– Linguagens visuais – diagramas– Linguagens de descrição de interfaces
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
O que modelar?
• Diversidade de elementos– Usuário, tarefas/interação, diálogo, interface, sistema,...
• Diversidade de sistemas e interfaces (estilos)– Desktop– ...
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Principais modelos• Modelos do Domínio, Dados, Aplicação
– São modelo conceituais– Descrevem o domínio, as informações do domínio ou a aplicação do ponto de vista do
usuário (externo).• Modelos de Tarefas
– Descreve as tarefas• Como os usuário costumam realizadas• Como o sistema deverá implementar• Como o sistema realmente implementa
• Modelos de Usuário– Papel e perfil do usuário– Aplicação no processo de design ou em interface inteligentes como adaptação
dinâmica• Modelos de Apresentação
– Modelo dos objetos de interface/interação e como eles estão organizados (espaço e tempo)
– Fundamentais em interfaces GUI e Web• Modelo de Diálogo
– Descrição dos comandos que o usuário executa e as respostas do sistema– Em linguagens de comando é a própria interface. Em GUI descreve como o usuário
interage como os objetivos de interface.
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Implementação
• Plataformas de operação e ferramentas de desenvolvimento– Interfaces gráficas em PCs (desktop– Web – browser-based– Dispositivos móveis – celulares, PDA, pocket PC
• Tipos de ferramentas– Linguagens declarativas– Toolkits - API’s para linguagens de programação
• Swing ou AWT para Java• GTK para C/C++
– Ferramentas de programação visual• Visual Basic, Delphi
– Ambientes de geração automática
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
IU para novos dispositivos
• Computação Ubíqua: computação pervasiva + computação móvel
• Interfaces de Usuário para diferentes tipos de contextos de uso – IU Múltiplas– Contexto de uso: Plataforma, Usuário, Ambiente– Plataforma: hardware, software, linguagens, etc.
• Interoperabilidade, portabilidade e adaptabilidade• Novos conceitos
– Interação incidental, – Antecipação– Interfaces Proativas
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
IMML
• Originalmente LEMD – Linguagem de Especificação da Mensagem do Designer. – Tinha uma sintaxe ad hoc, definida com BNF.
• Idéia– Ter uma notação para especificar a interface que
enfatizasse a nova perspectiva da engenharia semiótica. – O designer deveria descrever a interface como se estivesse
elaborando uma mensagem abstrata– Precisava ser mapeada em objetos de interface
• IMML – Interactive Message Modeling Language. – Versão da LEMD em XML– Revisão de alguns novos conceitos.– Perspectiva de desenvolvimento baseado em modelos– Extensão para um linguagem diagramática (extensão UML)
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Três aspectos de sistemas interativos
• Funcionalidade– O que o usuário faz – os serviços oferecidos ao usuário
• Interatividade– Como os usuário faz – os comandos que são oferecidos ao
usuário para ele usar o sistema• Comunicabilidade
– O que o usuário entende – as mensagens que são enviadas ao usuário para que ele saiba o que fazer o como fazer. O designer é o autor destas mensagens
• A Usabilidade depende dos três aspectos
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Nossa proposta
• Nossa proposta é introduzir esta visão no desenvolvimento baseado em modelo
• Três modelos principais– Funcional – descreve a funcionalidade (comum na ES)– de interação – descreve a interação– de apresentação – descreve a comunicação designer-
usuário (poderia ser de comunicação?)• A IMML esta baseada nestes modelos funcionais, de
interação e de apresentação• Espera-se que esta visão, com os modelos que estamos
propondo, melhore o processo e as interfaces resultantes
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Modelo Funcional
• Objetos de domínio– Objetos, propriedades e relacionamentos
• Funções de domínio (da aplicação)– Pré e pós condição– Operandos– Controles– Estados
• Funções modificam estados do sistemas– Estados do objetos de domínio
• Mudança de propriedades e relacionamentos entre objetos
– Estados de funções de domínio
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Modelo Funcional usando UML – 1
relacionamentoA
:objetoA
Prop1=abcProp2=123Prop3=xyz
:objetoB
Prop4=defProp5=456Prop6=uvw
Instâncias de Objetos de Domínio e Relacionamentos
Classes de Objetos de Domínio
objetoA
Prop1:alfaProp2:numProp3:alfa
objetoB
Prop4:alfaProp5:numProp6:alfa
Diagrama de classes
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Modelo Funcional usando UML – 2
Estado inicial (pré-condição)
Estado final (pós-condição)
O evento quecausa a mudançade estado é ocontrole do comando de função
relacionamentoA
:objetoA
Prop1=abcProp2=123Prop3=xyz
:objetoB
Prop4=defProp5=456Prop6=uvw
relacionamentoB
:objetoA
Prop1=mnoProp2=321Prop3=xyz
:objetoB
Prop4=defProp5=456Prop6=uvw
Evento/ação
Diagrama de estados
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Modelo Funcional usando UML – 3
relacionamentoA
:objetoA
Prop1=abcProp2=123Prop3=xyz
:objetoB
Prop4=defProp5=456Prop6=uvw
relacionamentoB
:objetoA
Prop1=mnoProp2=321Prop3=xyz
:objetoB
Prop4=defProp5=456Prop6=uvw
Evento/ação
Função de Domínio como Casos de Uso
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Modelo Funcional usando UML – 4
relacionamentoA
:objetoA
Prop1=abcProp2=123Prop3=xyz
:objetoB
Prop4=defProp5=456Prop6=uvw
relacionamentoB
:objetoA
Prop1=mnoProp2=321Prop3=xyz
:objetoB
Prop4=defProp5=456Prop6=uvw
Evento/ação
Casos de Uso
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Modelo de Interação• Descreve a estrutura de
tarefas e comandos• Dois níveis
– Tarefa– Diálogo (comando)
• Cada comando está associado a uma função do domínio
• Cada comando é uma estrutura de interações básicas e deve ser definido na interface pelo designer
• Cada tarefa é uma estrutura comandos e deve ser definida pelo usuário, a partir do que foi proposto pelo designer.
C1 C2
B1 B3 B5B4B2
T2T1Tasks
Commands
BasicInteractions
Tasklevel
Dialoglevel
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Estruturas de interação• As estruturas de interação
indicam como as atividades devem ser realizadas
• Sequence– Sequencialmente
• Repeat– Repetidamente
• Select– Alternativamente
• Combine– Combinadas
• Join– Qualquer jeito, mas existe
alguma relação semântica entre elas
C1 C2
B1
Seq
B3 B5B4B2
T2T1Tasks
Commands
BasicInteractions
Tasklevel
Dialoglevel
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Modelo de Comunicação (DU)• Descreve a comunicação
designer-usuário através do sistema (IU)
• Elementos fundamentais– Display medium – meio de
exibição• Canal que veicula os
signos para o usuário– UI Signs - Signos de Interface
de Usuário• Mensagens que são
enviadas através do DM– Interaction Tool – Ferramenta
de Interação• Mecanismo que pemite ao
usuário interagir como os Signos IU através do DM
User interface comunication model
Display medium
Interaction Tool
UI Signs
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Estruturas de apresentação• As estruturas de apresentação
tem por objetivo organizar os Signos de IU
• O papel da organização é comunicar melhor a interação e funcionalidade
• Estruturas temporais – definem o layout
– Group (Agrupamento)– Align (Alinhamento)– Frame (Enquadramento)– Contrast (Contraste)
• Estruturas temporais– Linear– Circle– Tree– Network
Linear
Tree
Group
Align
Frame
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Tipos de Signos de IU
• Task-environment• Control Panel• Display
– Domain-object Display– Domain-Function Status– Information Display
• Control– Activation control– Information-input control– Selection control
• Domain Signs
Controls
Control Panel
Domain-object Display
Informações de aviso
Information Display
obj1obj2obj3obj4
Domain-FunctionStatus
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Classificação dos Signos de IU• Em relação ao nível de
abstração, os Signos de IU podem ser: – Abstratos (AUIS)– Concretos (CUIS)
• Em relação à interatividade, os Signos de IU também podem ser:– Interativos– Somente de Saída– Somente de Entrada
• Em relação aos modelos funcionais e de interação, os Signos de IU estão associados aos principais elementos
<Comand-Function …> <Select
ConcretoAbstrato
SomenteSaída
Interativo
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Relacionamento entre os modelos
C1
B1 B3B2
T1
Designer-User communication model
InteractionModel
Designer’sMessage
Commandand task
environment
C1 C2
B1 B3 B5B4B2
T2T1
C controls DF
Domain Functions (DF)
Commands (C)
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Modelo Funcional na IMML
<Domain-Object name=”File” type= “name”><Domain-Object name=”Folder” type=“finite-set”/>
<Domain-Function name= “Openfile” Operands=”File Name, Application Program” Pre-conditions=” File name and an application program must be informed” Post-conditions=” The file must be opened in the application program.” Control=”Start, Cancel” State=” Running, Finished”/>
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Modelo de Interação na IMMLComandos
<Command name=”COpenfile” domain-function=”Openfile”> <Join> <View> To open a file you must enter the information and …</View> <Sequence> <Join> <Select> <Enter Domain-Object=”File Name”> <Select Domain-Object =”File Name”> </Select> <Enter Domain-Object=”Directory”> </Join> <Select> <Activate Control=”Start” Domain-Function=”Openfile”> <Activate Control=”Cancel” Domain-Function=”Openfile”> </Select> </Sequence> </Join>
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Mapeando o comando numa interface Web
<Command name=”COpenfile” domain-function=”Openfile”> <Join> <View> To open a file you must enter the information and …</View> <Sequence> <Join> <Select> <Enter Domain-Object=”File Name”> <Select Domain-Object =”File Name”> </Select> <Enter Domain-Object=”Directory”> </Join> <Select> <Activate Control=”Start” Domain-Function=”Openfile”> <Activate Control=”Cancel” Domain-Function=”Openfile”> </Select> </Sequence> </Join>
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Modelo de Interação na IMMLTarefas
• Uma tarefa indica que a interface comunica para os usuários quais os comandos necessários para atingir uma possível meta
• Exemplo:– Suponha que o sistema oferece apenas as funções de domínio
CopyFile e DeleteFile– O exemplo abaixo indica que para mover arquivos o usuário
precisa executar o comando Copyfile e em seguida o comando DeleteFile
<Task name=”move-files”> <Repeat> <View> To move a file you must copy and delete</View> <Sequence> <Activate command=”Copyfile”/> <Activate command=”Deletefile”/> </Sequence> </Repeat></Command>
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Mapeando tarefas em interfaces WIMP
• Tarefas que agrupam conjuntos de comandos podem ser representadas por assistentes (wizards).
• Também podem ser um painel com controles que ativam comandos específicos; barras de tarefas; menus de comandos; etc.
• Estes elementos no modelo de comunicação são os <task environment>
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Modelo de Interação na IMMLResultados de Função
• O resultado de função pode ser:– Um novo estado do sistema– Objetos de domínio– Mensagens de erro ou de avisos
<Function-result domain-function=”openfiles”> a definir</Function-result>
Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004
Modelo de Comunicação na IMML<t<task-environment for task=“move-files”> <frame orientation=”horizontal”> <command-panel> <align orientation=”horizontal”> <Activate Command=”Openfile”> <Activate Command=”Savefile”> </align> </command-panel> <display-area> <list domain-object=”File name”> </display-area> </frame></task-environment> ?