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=abc Prop2=123 Prop3=xyz :objetoB Prop4=def Prop5=456 Prop6=uvw Instâncias de Objetos de Domínio e Relacionamentos Classes de Objetos de Domínio objetoA Prop1:alfa Prop2:num Prop3:alfa objetoB Prop4:alfa Prop5:num Prop6: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 que causa a mudança de estado é o controle do comando de função relacionamentoA :objetoA Prop1=abc Prop2=123 Prop3=xyz :objetoB Prop4=def Prop5=456 Prop6=uvw relacionamentoB :objetoA Prop1=mno Prop2=321 Prop3=xyz :objetoB Prop4=def Prop5=456 Prop6=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=abc Prop2=123 Prop3=xyz :objetoB Prop4=def Prop5=456 Prop6=uvw relacionamentoB :objetoA Prop1=mno Prop2=321 Prop3=xyz :objetoB Prop4=def Prop5=456 Prop6=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=abc Prop2=123 Prop3=xyz :objetoB Prop4=def Prop5=456 Prop6=uvw relacionamentoB :objetoA Prop1=mno Prop2=321 Prop3=xyz :objetoB Prop4=def Prop5=456 Prop6=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. C1C2 B1B3B5B4B2 T2T1 Tasks Commands Basic Interactions Task level Dialog level

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 C1C2 B1 Seq B3B5B4B2 T2T1 Tasks Commands Basic Interactions Task level Dialog level

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 obj1 obj2 obj3 obj4 Domain-Function Status

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 <Select ConcretoAbstrato Somente Saída Interativo

Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004 Relacionamento entre os modelos C1 B1B3B2 T1 Designer-User communication model Interaction Model Designer’s Message Command and task environment C1C2 B1B3B5B4B2 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-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 IMML Comandos To open a file you must enter the information and …

Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004 Mapeando o comando numa interface Web To open a file you must enter the information and …

Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004 Modelo de Interação na IMML Tarefas 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 To move a file you must copy and delete

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

Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004 Modelo de Interação na IMML Resultados 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 a definir

Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004 Modelo de Comunicação na IMML ?