Desenvolvimento de interfaces de usuário baseado em modelos

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

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

3. O que modelar? • Diversidade de elementos • Usuário, tarefas/interação, diálogo, interface, sistema,... • Diversidade de sistemas e interfaces (estilos) • Desktop • ...

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

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

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

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

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

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

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

11. :objetoA objetoA objetoB Prop1=abc Prop2=123 Prop3=xyz Prop1:alfa Prop2:num Prop3:alfa Prop4:alfa Prop5:num Prop6:alfa :objetoB Prop4=def Prop5=456 Prop6=uvw Modelo Funcional usando UML – 1 Diagrama de classes Classes de Objetos de Domínio Instâncias de Objetos de Domínio e Relacionamentos relacionamentoA

12. :objetoA :objetoA relacionamentoA Prop1=abc Prop2=123 Prop3=xyz Prop1=mno Prop2=321 Prop3=xyz Evento/ação :objetoB :objetoB Prop4=def Prop5=456 Prop6=uvw Prop4=def Prop5=456 Prop6=uvw relacionamentoB Modelo Funcional usando UML – 2 Diagrama de estados O evento que causa a mudança de estado é o controle do comando de função Estado inicial (pré-condição) Estado final (pós-condição)

13. :objetoA :objetoA relacionamentoA Prop1=abc Prop2=123 Prop3=xyz Prop1=mno Prop2=321 Prop3=xyz Evento/ação :objetoB :objetoB Prop4=def Prop5=456 Prop6=uvw Prop4=def Prop5=456 Prop6=uvw relacionamentoB Modelo Funcional usando UML – 3 Função de Domínio como Casos de Uso

14. :objetoA :objetoA relacionamentoA Prop1=abc Prop2=123 Prop3=xyz Prop1=mno Prop2=321 Prop3=xyz Evento/ação :objetoB :objetoB Prop4=def Prop5=456 Prop6=uvw Prop4=def Prop5=456 Prop6=uvw relacionamentoB Modelo Funcional usando UML – 4 Casos de Uso

15. Tasks T1 T2 Task level Commands C1 C2 Dialog level Basic Interactions B1 B2 B3 B4 B5 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.

16. 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 Tasks T1 T2 Task level Commands C1 C2 Dialog level Seq Basic Interactions B1 B2 B3 B4 B5

17. 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 Interaction Tool UI Signs Display medium User interface comunication model

18. Estruturas de apresentação Frame • 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 Group Align Linear Tree

19. Tipos de Signos de IU Control Panel • Task-environment • Control Panel • Display • Domain-object Display • Domain-Function Status • Information Display • Control • Activation control • Information-input control • Selection control • Domain Signs Domain-object Display obj1 obj2 Controls obj3 obj4 Information Display Informações de aviso Domain-Function Status

20. 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 Abstrato Concreto <Comand-Function …> <Select Interativo Somente Saída

21. T1 T2 C1 C2 Commands (C) T1 Interaction Model B1 B2 B3 B4 B5 C controls DF Command and task environment C1 Designer’s Message B1 B2 B3 Domain Functions (DF) Designer-User communication model Relacionamento entre os modelos

22. 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”/>

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

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

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

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

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

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