Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004 Desenvolvimento de interfaces de...
-
Upload
mikaela-osorio-canedo -
Category
Documents
-
view
213 -
download
1
Transcript of Seminário do grupo de pesquisa em IHC UFRN Jair C Leite, 2004 Desenvolvimento de interfaces de...
![Page 1: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/1.jpg)
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
![Page 2: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/2.jpg)
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
![Page 3: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/3.jpg)
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– ...
![Page 4: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/4.jpg)
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.
![Page 5: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/5.jpg)
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
![Page 6: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/6.jpg)
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
![Page 7: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/7.jpg)
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)
![Page 8: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/8.jpg)
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
![Page 9: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/9.jpg)
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
![Page 10: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/10.jpg)
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
![Page 11: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/11.jpg)
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
![Page 12: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/12.jpg)
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
![Page 13: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/13.jpg)
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
![Page 14: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/14.jpg)
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
![Page 15: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/15.jpg)
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
![Page 16: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/16.jpg)
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
![Page 17: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/17.jpg)
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
![Page 18: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/18.jpg)
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
![Page 19: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/19.jpg)
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
![Page 20: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/20.jpg)
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
![Page 21: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/21.jpg)
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)
![Page 22: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/22.jpg)
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”/>
![Page 23: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/23.jpg)
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>
![Page 24: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/24.jpg)
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>
![Page 25: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/25.jpg)
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>
![Page 26: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/26.jpg)
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>
![Page 27: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/27.jpg)
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>
![Page 28: 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.](https://reader035.fdocumentos.tips/reader035/viewer/2022070507/5706384d1a28abb8238f6ab6/html5/thumbnails/28.jpg)
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> ?