Download - 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

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


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


O que modelar?

• Diversidade de elementos– Usuário, tarefas/interação, diálogo, interface, sistema,...

• Diversidade de sistemas e interfaces (estilos)– Desktop– ...


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.


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


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


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)


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


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


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


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



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


:objetoB


relacionamentoB

:objetoA

Prop1=mnoProp2=321Prop3=xyz

:objetoB


Evento/ação

Diagrama de estados



relacionamentoA

:objetoA


:objetoB


relacionamentoB

:objetoA


:objetoB


Evento/ação

Função de Domínio como Casos de Uso



relacionamentoA

:objetoA


:objetoB


relacionamentoB

:objetoA


:objetoB


Evento/ação

Casos de Uso


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


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


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


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


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


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


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)


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


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>


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>


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>


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>


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>


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> ?

Download - 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

Top Related