Embed Size (px)
Citation preview
Ferramenta para Modelagem de Interação e Interface
de Usuário
Renato B Lavôr1, Jair C Leite
1
1Universidade Federal do Rio Grande do Norte
Caixa Postal 1524, CEP 59072-970, Natal-RN, Brasil
Abstract. This paper presents a tool for modeling user interface and interaction
in computing systems using ALaDIM, which is a diagrammatic domain specific
language (DSL) that can be integrated with user interface prototypes. We use
DSL Tools in an exploratory research to investigate if the language helps the
designer or usability expert to identify potential usability problems by analyzing
the structure and dynamics of interaction. We also investigate the use of
interaction patterns as a way of mapping the visual elements of the interface to
the elements of the interaction model.
Keywords: Modeling Interaction, User Interface, DSL Tools, DSL, Model-
Driven Development.
1 Introdução
Desde o surgimento das primeiras interfaces de usuário gráficas, nos anos 80, foram
desenvolvidos diversos tipos de ferramentas com o intuito de auxiliar o trabalho de
designer e desenvolvedores a alcançar um sistema com boa usabilidade. Podemos
identificar duas categorias de ferramentas de design e desenvolvimento principais. A
primeira são as ferramentas de programação visual que permitem o desenvolvimento
de protótipos de baixa ou alta fidelidade. Exemplos dessas ferramentas são Microsoft
Visual Studio, Adobe FireWorks, Netbeans, Balsamiq. Algumas dessas ferramentas
permitem a criação de modelos de comportamento e simulação da interação.
A segunda categoria de ferramentas inclui aquelas que são baseadas em modelos,
tais como o Sistemas Gerenciadores de Interfaces de Usuário (SGIU), os Ambientes
de Desenvolvimento de Interfaces de Usuário Baseado em Modelos (ADIUBM) e as
ferramentas baseadas em Linguagens de Descrição de Interfaces de Usuário (LDIU).
Os SGIU, por exemplo, propostos nos anos 80 foram uma das primeiras tentativas de
automatizar o design da interface a partir de modelos [1, 2]. Já na década de 90,
diversos ADIUBM foram criados para auxiliar os designers no desenvolvimento de
IUs. Esses ambientes permitiam que os designers produzissem suas interfaces através
do uso de modelos declarativos [3]. Com a possibilidade de desenvolvimento de
aplicações para múltiplas plataformas (computadores pessoais, dispositivos móveis,
TV Digital, Web, etc.) os ADIUBMs passaram a ser utilizados na geração de
interfaces para essas diferentes plataformas a partir de modelos descritos em
Linguagens de Descrição de Interface de Usuário (LDIU) [4].
Algumas destas abordagens foram bem sucedidas na geração de interfaces finais,
tais como processos [8], desenvolvimento de interfaces para múltiplas plataformas
[9][10] e utilização de Linguagens Específicas de Domínio, conhecidas pelo pela sigla
DSL, para o desenvolvimento de IU [11]. Esses trabalhos têm, entre outras
características, a geração automática da IU através de transformações entre modelos
em diferentes níveis de abstração, com o objetivo de reduzir custos e esforços no
desenvolvimento da IU.
No entanto, elas não geram aplicações completas. Isto ocorre porque os modelos
utilizados nas ferramentas de design de IU limitam-se a representar os aspectos de
interface, tais como diálogo e interação usuário-sistema [12], Sketches e protótipos
[13], entre outros. Os aspectos funcionais são deixados de fora dos modelos e devem
ser codificados manualmente [14,15].
Outras abordagens e ferramentas de desenvolvimento dirigidas por modelos
(DDM) [5] têm sido utilizadas para reduzir os esforços na construção do software. Os
principais casos de sucesso desta abordagem ocorrem em sistemas para domínios
específicos [6], onde os modelos são construídos com as linguagens específicas de
domínio (DSL) [7]. No entanto, essas abordagens ou ferramentas geralmente não dão
o apoio necessário para a construção da IU, com modelos focados na funcionalidade
do software e deixam a construção da IU em segundo plano. Assim, as interfaces
derivadas destes modelos funcionais perdem em qualidade principalmente quanto a su
usabilidade.
Para aprimorar essas limitações esse trabalho tem como objetivo apresentar a
UIIMT - Ferramenta para Modelagem de Interação e Interface de Usuário, que
permite a modelagem de interação e interface representadas em uma DSL visual
(diagramática), fundamentada nos conceitos da linguagem ALaDIM (Abstract
Language for Description of a Interactive Message). Seu principal objetivo é permitir
a elaboração de um modelo de interação que possa ser integrado com ferramentas de
design de interface, ou seja, que permita ao designer de interfaces visualizar de forma
integrada o modelo de interação com protótipos de interface, permitindo assim
identificar problemas de usabilidade. Dessa forma, espera-se que o designer, através
do modelo presente na UIIMT, tenha uma visão dos elementos utilizados nos
protótipos, ao mesmo tempo que pode visualizar o comportamento do sistema durante
a interação.
A seguir, são descritos os principais conceitos que fundamentam o
desenvolvimento desse trabalho. Na seção 2, é dada uma visão geral sobre DDM,
ADIUBM e também será apresentado os conceitos sobre DSLs e como elas podem
apoiar o desenvolvimento das IUs. Na seção 3 os trabalhos correlatos. Na seção 4 é
apresentada a ALaDIM, linguagem utilizada para a criação da DSL presente na
UIIMT. Nas seções 5 e 6 é apresentado o uso de padrões de interação na UIIMT
através do seu modelo de interação e a visualização do modelo integrado com os
protótipos de interface. Por fim na seção 7 as conclusões do trabalho são listadas
assim como direcionamentos para trabalhos futuros.
2 Desenvolvimento Dirigido por Modelos - DDM
A abordagem de desenvolvimento de software dirigido por modelos (DDM) consiste
em uma metodologia de desenvolvimento de sistemas que possui o objetivo de
oferecer aos desenvolvedores um alto nível de abstração para o desenvolvimento do
software, aliada a possibilidade de geração automatizada de código executável do
sistema. Essa abordagem visa oferecer um maior reuso de artefatos de software, uma
vez que separa a tarefa de modelagem do sistema em diferentes níveis de abstração,
desde níveis que consideram apenas requisitos lógicos do sistema, até requisitos
específicos de uma plataforma computacional alvo [5]. Hoje em dia existem diversas
linhas de desenvolvimento dirigido a modelos, tais como: MDA (Model-Driven
Architecture) [5], Fábricas de Software [28], Desenvolvimento de Interface de
Usuário Baseado em Modelos (DIUBM) [3, 20, 21]
O uso de DDM no desenvolvimento de software apresenta grandes vantagens para
a equipe e para o ciclo de produção de software. Pensar no software através de seu
domínio de atuação volta o foco do problema para o contexto do domínio em que o
cliente trabalha, deixando de lado os problemas mais técnicos que sempre estão
presentes no meio tradicional de desenvolvimento. Ao criar um modelo adequado e
que represente um domínio especifico, esse modelo se torna um artefato que pode ser
compartilhado por todos os envolvidos no projeto. Este modelo é essencial e
indispensável, pois é a partir dele que serão gerados todos os outros artefatos
necessários para o funcionamento da aplicação [16].
Normalmente, no método de desenvolvimento tradicional, sem usar técnicas de
DDM, o modelo de projeto do sistema serve apenas como referência para a
implementação. Tanto o próprio modelo quanto os mecanismos de automatização
existentes são limitados e praticamente todo o sistema deve ser codificado
manualmente. Com isso, à medida que a implementação do sistema avança, esse
modelo vai perdendo seu valor, pois normalmente as alterações realizadas durante a
implementação não são nele refletidas. Embora o modelo de referência tenha um
papel importante no desenvolvimento, o esforço nele gasto não é reaproveitado na
implementação do sistema, pois os mecanismos de automatização para gerar código-
fonte são limitados. Com a introdução do DDM, o modelo passa a ter um valor maior
durante o desenvolvimento do sistema, pois alterações realizadas no modelo implicam
alterações automatizadas no código-fonte. Entretanto, o DDM não especifica, por
exemplo, como esses modelos devem ser usados para tratar a interação com o usuário,
o que é fundamental para definição da IU.
2.1 Ambientes de Desenvolvimento de Interfaces de Usuário Baseado em
Modelos - ADIUBM
A expressão Ambientes de Desenvolvimento de Interfaces de Usuário Baseado em
Modelos (ADIUBM) refere-se a um ambiente de software que apóia o
desenvolvimento de IU utilizando-se de vários modelos que guiam o processo [17].
Os modelos representam os aspectos associados a um sistema em diferentes níveis de
abstração, tais como os propostos no framework de Puerta e Eisenstein [18]. Neste
framework, estão previstos modelos de IU em cinco categorias: modelo de tarefas,
modelo de domínio, modelo de usuário, modelo de apresentação e modelo de diálogo.
Em [3] é apresentado um comparativo entre quatorze ADIUBMs, que são
comparados através de um framework definido pelo autor, denominado User
Interface Model Framework. O framework foi definido para permitir uma melhor
comparação entre os processos de design, abordagens, integração entre modelos,
modelos utilizados pelas ferramentas entre outras características. No trabalho em
questão foram definidos quatro modelos básicos para esse framework utilizado para a
comparação, são eles [3]:
Modelo de Aplicação: descreve as propriedades da aplicação para a IU;
Modelo de Tarefa-Diálogo: descreve as tarefas que os usuários são capazes de
executar usando o aplicativo, bem como a forma como as tarefas estão
relacionadas umas as outras;
Modelo de Apresentação Abstrato: fornece uma descrição conceitual da estrutura e
do comportamento dos elementos visuais da interface do usuário;
Modelo de Apresentação Concreto: descreve em detalhes as partes visuais da IU.
Apresentando como a IU é composta em termos de widgets.
Em alguns ADIUBMs, os desenvolvedores são capazes de especificar, gerar e
executar interfaces de usuário para plataformas específicas [3], além de permitir a
integração entre esses modelos. As três principais vantagens na utilização desses
ADIUBMs, são [3]:
Eles podem fornecer uma descrição mais abstrata da IU do que as descrições de IU
fornecidas por outras ferramentas de desenvolvimento de IU;
Eles facilitam a criação de métodos para projetar e implementar a IU de uma forma
sistemática, uma vez que oferecem as possibilidades: (1) modelar IU utilizando
diferentes níveis de abstração; (2) aperfeiçoar os modelos de forma incremental; e
(3) re-utilizar as especificações de IU;
Eles fornecem a infra-estrutura necessária para automatizar tarefas relacionadas
com o processo de concepção e implementação da IU.
Algumas desvantagens também são apontadas:
A complexidade dos modelos e notações, que muitas vezes são difíceis de aprender
e usar;
As interfaces geradas através dos modelos em algumas ferramentas podem ser
manualmente refinadas a fim de se chegar a interface final. Mas esses refinamentos
não são replicados nos modelos previamente gerados;
Apesar de conceitualmente os modelos representarem a mesmas características,
tais como tarefas, diálogo. Geralmente um modelo gerado em uma ferramenta não
pode ser aproveitado em outro ambiente, devido principalmente á falta de
padronização das notações utilizadas nos modelos.
Como visto, abordagens e ferramentas dirigidas por modelos, voltadas para o
desenvolvimento de software ou especificamente para a IU, tem suas vantagens e
desvantagens, dentro desse contexto as DSLs podem ser utilizadas para apoiar essas
abordagens ou ferramentas ou até para suprir algumas dessas desvantagens.
2.2 Linguagens Específicas de Domínio - DSL
Linguagens específicas de domínio (DSLs) são linguagens para um propósito
especial, projetadas para resolver uma determinada abrangência de problemas
relacionados a um domínio [19]. Exemplos comuns de DSLs são: HTML, projetada
para representar o layout de páginas da Web, SQL, destinadas a consultar e atualizar
bancos de dados.
A DSL tem, em sua essência, a qualidade de reduzir o tamanho dos problemas. Por
exemplo, a linguagem SQL permite que vários usuários simultâneos possam
estabelecer, consultar e combinar grandes listas de dados. Sem ela, seria uma enorme
tarefa de programação. Sem expressões algébricas e lógicas, a pesquisa de sub-
seqüências dentro do texto implicaria escrever um programa complicado [19].
O uso de DSLs para a modelagem, ao invés de linguagens de propósito geral como
a Unified Modeling Language (UML), permite expressar soluções no idioma e no
nível de abstração do domínio do problema, contribuindo para a redução dos esforços
de tradução dos conceitos desse domínio para o domínio da solução [23]. Assim os
modelos tornam-se mais específicos e completos, e recursos tais como: frameworks,
padrões de projeto e componentes, podem ser incluídos na modelagem com o objetivo
de gerar maior quantidade de código e com melhor qualidade [24].
As linguagens de descrição de interface de usuário (LDIU). são exemplos de DSL
que possibilitam especificar as características de uma IU. Hoje em dia, diversos
dispositivos existentes, tais como telefones celulares, caixas eletrônicos, e assim por
diante, tem interfaces complexas. Estas interfaces são geralmente organizadas através
de regras que fazem a interface previsível, como uma regra que, ao pressionar um
botão para cancelar sempre o leva de volta a um estado conhecido, ou introduzir o
texto segue sempre o mesmo conjunto de regras. Uma DSL pode ser criada para a
concepção de tais sistemas, onde a aparência gráfica da linguagem corresponde à
aparência da IU que está sendo projetado, e as regras de interação da interface são
capturadas na estrutura da linguagem.
Algumas LDIUs são linguagens baseadas em esquema XML. Como exemplos de
LDIU pode-se destacar a UsiXML (USer Interface eXtensible Markup Language)
[20] e a IMML (Interactive Message Modeling Languange) [21].
A UsiXML é uma linguagem de descrição de interfaces de usuário que utiliza
vários níveis de abstrações, que permitem especificar múltiplos modelos envolvidos
no projeto de uma interface de usuário como: tarefa, domínio, apresentação, diálogo e
contexto de uso, o qual é decomposto em usuário, plataforma e ambiente.
A IMML é uma LDIU fundamentada nas bases teóricas da Engenharia Semiótica
[22], que possibilita descrever de forma abstrata a interface do usuário além de
possibilitar o desenvolvimento da IU baseado em modelos.
Os benefícios no uso das DSLs podem ser consideráveis. Alterações nos requisitos
podem ser representadas por alterações no modelo e, desse modo, rapidamente
implementadas. As alterações na plataforma tecnológica podem ser incorporadas pela
manipulação da etapa de integração do padrão, sem modificar a representação
modelada. O volume de códigos a ser atualizado é menor e os erros de código gerado
podem ser reparados corrigindo-se o gerador do código [19].
Reduzir custos no desenvolvimento de novas DSLs é o objetivo de uma categoria
de ferramentas denominadas Language Workbenches [25]. Uma Language
Workbench pode ser descrita como um conjunto de ferramentas destinadas
especificamente à criação e à implantação de novas DSLs em ambientes de
desenvolvimento existentes, tal como a DSL Tools, que será utilizada para o
desenvolvimento da ferramenta proposta, assim como para a elaboração da DSL que
representará o modelo de interação e interface.
2.2.1 DSL Tools
As DSL Tools fazem parte do Visual Studio SDK que facilita muito a implementação
de uma DSL ou, melhor dizendo, para construir uma ferramenta de modelagem
específica de domínio. Com as DSL Tools, o autor da DSL define os conceitos da
linguagem, as formas usadas para processar esses conceitos na superfície de edição
diagramática e os vários componentes auxiliares usados para carregar e salvar o
modelo para integrar a nova ferramenta no Visual Studio e para gerar o código e os
outros artefatos dos modelos criados com a ferramenta [19]. A versão do Visual
Studio utilizada para o desenvolvimento do trabalho juntamente com as DSL Tools é
a 2010 Ultimate.
Com a utilização da DSL Tools, foi realizado a construção de um metamodelo com
os conceitos da linguagem ALaDIM. Também foi elaborada a representação
diagramática e as regras de validação sintática e semântica da linguagem da DSL .
É possível, também, através do suporte de templates (T4 - Text Template
Transformation Toolkit), gerar qualquer tipo de documento, desde códigos em C#,
XML, a documentos de texto.
3 Trabalhos Correlatos
Trabalhos recentes têm demonstrado a utilização de ferramentas e abordagens DDM
para o desenvolvimento de IU. Botterweck [9] apresenta uma abordagem denominada
MANTRA (Model-bAsed eNgineering of multiple interfaces withTRAnsformations),
onde são realizadas especificações de IU em diferentes níveis de abstração, para
através de um processo de transformações entre modelos gerar IUs concretas para
diferentes plataformas, com o objetivo de reduzir o esforço durante o
desenvolvimento. Dessa forma, gerando interfaces para desktop (GUI – Graphical
User Interface), Web (WUI – Web User Interface) e Mobile (MUI – Mobile User
Interface). O trabalho apresentou resultados satisfatórios para a geração de interfaces
para as múltiplas plataformas.
Costa Neto et. al. [10] verificaram a viabilidade de utilizar estratégias de
desenvolvimento de IU baseados em modelos (DIUBM) com métodos e tecnologias
dirigidas por modelos. Foi apresentada uma proposta para desenvolvimento de
interfaces para múltiplas plataformas baseada em modelos, mais especificamente
utilizando modelos da IMML [21] com as tecnologias DDM. Nesse mesmo trabalho
foi desenvolvido um experimento para geração de IUs para plataformas desktop
(GUI) e Web (WUI) a partir da especificação de modelos abstratos.
Esses trabalhos têm entre outras características a geração automática da IU através
de transformações entre modelos baseados em modelos de IU ou linguagens de
descrição de IU em diferentes níveis de abstração, com o objetivo de reduzir custos e
esforços no desenvolvimento da IU.
Vernazza [11] apresenta uma ferramenta que visa proporcionar uma abordagem
baseada em DSLs que permite a modelagem de IU em um alto nível de abstração e
que gera o códgo dela sem a necessidade do designer realizar qualquer tipo de
codificação. A ferramenta funciona integrada ao Visual Studio 2005. Uma das
propostas da ferramenta é que o designer tenha acesso a padrões de design de forma
rápida, diminuindo tempo de programação dos mesmos, evitando consulta externa a
definição de tais padrões. Isso é possível porque a ferramenta permite que o designer
possa manter um repositório não só de padrões, mas como também de layouts e
controles utilizados na interface. A ferramenta gera interfaces apenas para a
plataforma Web.
4 Uma Linguagem para Descrição do Modelo de Interação
A UIIMT é a primeira ferramenta que utiliza a linguagem ALaDIM (Abstract
Language for Description of Interactive Message). A ALaDIM vem sendo
desenvolvida pelo Grupo de IHC do Departamento de Informática e Matemática
Aplicada da Universidade Federal do Rio Grande do Norte (DIMAp - UFRN). A
ALaDIM está fundamentada na teoria da Engenharia Semiótica [22].
Essa linguagem é representada de forma visual (diagramática) e descreve o
processo de interação usuário-sistema usando uma abordagem baseada nas ações do
usuário e reações do sistema, onde o usuário interage com o sistema através de
espaços de interação. Essa linguagem foi escolhida por permitir ao designer de
interfaces analisar a estrutura de interação e assim identificar possíveis problemas de
usabilidade. Ela permite representar de forma diagramática a interação usuário-
sistema e os elementos funcionais do sistema. Neste trabalho, o foco é apenas o
modelo de interação, onde os aspectos funcionais são descritos apenas como uma
caixa preta. Os detalhes deste modelo serão descritos em um trabalho futuro.
4.1 Espaços de interação
Um espaço de interação oferece os mecanismos que permite ao usuário acionar as
funções do sistema e perceber os seus resultados. O conceito de espaço de interação,
em nosso modelo, está diretamente associado a uma função do sistema. Cada função é
a implementação de um requisito funcional. Dessa forma, espera-se deixar mais claro
para os envolvidos que para utilizar uma função, o espaço de interação oferece os
recursos necessários para a sua execução e para a avaliação dos resultados.
Para entender melhor alguns conceitos da linguagem vamos mostrar um exemplo
simples de modelo de interação (Fig. 1), para um cenário onde um usuário deseja
realizar a função de copiar arquivos, acompanhar a execução desta função e, se
desejar, cancelar o processo.
Em ALaDIM, os espaços de interação são locais utilizados pelo designer para
descrever um conjunto de interações básicas que serão realizadas pelo usuário afim de
utilizar uma função do sistema. Na ferramenta UIIMT, sua representação gráfica é um
retângulo de cantos arredondados, na Fig. 1 é apresentado dois exemplos, o Copiar
Arquivo e Copiando Arquivos. O espaço de interação Copiar arquivo indica as
possibilidades ação para executar o sistema. Associado a este espaço de interação
temos a função copiar arquivo um outro espaço de interação (Copiando arquivo) no
qual informa o estado de execução.
Fig. 1. Modelo de Interação na ferramenta UIIMT.
4.2 Elementos de interações básicas
Os espaços de interação oferecem elementos de interações básicas que podem ser
agrupados e organizados por meio de operadores de interação. Esse conjunto de
interações básicas é usado para permitir a entrada de informações, controlar a
execução de uma função de domínio, ou visualizar o progresso e os resultados da
função.
O espaço de interação está associado a uma função de sistema. Nesse caso, pelo
menos uma interação básica será responsável pela ativação da função. Outros
elementos de interação básica podem existir para realizar outros controles da função,
tais como suspender, retomar, parar, cancelar. As interações básicas que disparam
algum processamento por parte do sistema são de ações, esse conceitos serão
detalhados a seguir.
4.3 Operadores de interação do usuário
Os operadores de interação do usuário são abstrações através dos quais o design
indica como o usuário deve interagir. Dessa forma, ele é responsável por organizar o
comportamento dos usuários nos espaços de interação. Os operadores possuem os
seguintes significados:
sequence: usado para especificar que o usuário deverá executar as interações de
maneira ordenada;
repeat: é usado quando o usuário precisa repetir várias vezes as interações;
choose: usado quando o usuário precisa escolher uma dentre várias interações para
ser executada;
combine: usado quando duas ou mais interações têm alguma dependência entre si;
join: usado para agrupar interações que têm algum relacionamento, mas não
requerem uma ordem de realização.
Vale ressaltar que os operadores além de agrupar as interações básicas podem
agrupar a si mesmos, recursivamente. O modelo apresentado na Fig. 1 utiliza os
operadores sequence, join e choose.
As interações básicas representam as ações básicas que o usuário pode executar
sobre a IU de um sistema. São abstrações para ações como clicar num botão, marcar
um checkbox, selecionar uma opção no combo-box, etc. As interações básicas são as
seguintes:
perceiveInformation: usado para especificar uma interação básica de percepção de
informação, como um texto ou figura, por exemplo;
enterInformation: usado para especificar uma interação básica de entrada de
informação, como uma caixa de texto, por exemplo;
selectInformation: usado para especificar uma interação básica de seleção de
informação, como uma lista, por exemplo;
activate: usado para especificar uma interação básica de ativação de um controle,
como um botão ou link, por exemplo.
navigate: usado para especificar uma interação básica de ativação de um controle,
como um botão ou link, por exemplo, que irá levar o usuário a outro espaço de
interação, sem disparar a execução de algum processo.
No modelo construído com a UIIMT, as interações básicas que requerem algum
processamento do sistema, terão setas, rotuladas com seus respectivos nomes,
podendo sair do espaço de interação ou da própria interação básica em direção a
função do sistema correspondente. Na Fig.1 são utilizadas algumas interações básicas
distribuídas nos espaços de interação Copiar Arquivos e Copiando Arquivos.
4.4 Funções de sistema
As funções de sistema são usadas para representar os processos que desempenham
as regras (ou lógica) de negócios da aplicação, ou seja, um processo executado pelo
computador, capaz de mudar o estado da aplicação, através da manipulação de
informações fornecidas pelos usuários a partir dos espaços de interação, podendo
produzir novas informações e retornar aos espaços de interação para informar o
usuário dos resultados do processo. A Fig. 1 apresenta uma função de sistema (Copiar
Arquivos), representada por um retângulo com no centro do diagrama.
4.5 Fluxos de controle de apresentação
Para representar os aspectos dinâmicos do modelo de interação, a linguagem
permite descrever os fluxos de controle de apresentação que determinam como os
diversos espaços de interação são apresentados. Os fluxos de controle de apresentação
entre os espaços de interação e as funções de sistema são representadas por setas
direcionais, cujas direções indicam respectivamente uma ação do usuário (saindo do
espaço de interação e provocada por alguma interação básica) e reações do sistema
(saindo da função de sistema, finalizando o processamento, devolvendo o controle do
processo interativo ao usuário e/ou levando resultados para o espaço de interação).
As reações podem ser bem sucedidas ou não, sendo representadas respectivamente
pela linha cheia ou tracejada. Outro relacionamento presente no modelo de interação é
sincronismo, destinado exclusivamente para representar uma ligação síncrona entre o
espaço de interação e a função de sistema.
Os elementos presentes no modelos também serão utilizados para produzir uma
biblioteca de padrões de interação como será descrito a seguir.
5 Utilizando uma biblioteca de padrões
A UIIMT possibilita ao designer acessar uma biblioteca com elementos do modelo de
interação, que representam um conjunto de padrões de interação, de forma que seja
possível fazer o (re)uso dessas estruturas na construção de modelos de interação para
aplicações nas quais o designer busca garantir usabilidade à IU.
Para representarmos esse conjunto de padrões, optamos por selecionar aqueles que
segundo Folmer [26], trazem impactos consideráveis à arquitetura do software, caso
seja necessário acrescentá-los depois da arquitetura já ter sido definida. Estes padrões
estão disponíveis na UIIMT para o designer utilizar quando considerar necessário,
assim como outros padrões. A Fig. 2 apresenta a toolbox com a lista dos padrões.
Assim, quando o designer selecionar um padrão e adicioná-lo à área de edição, a
UIIMT apresentará a modelagem mínima necessária para a definição do padrão no
modelo de interação. A Fig. 2 apresenta como exemplo o padrão cancel [26, 27].
6 Integração entre o modelo de interação e protótipos de
interface
Neste trabalho mostramos como o usuário pode construir um modelo de interação,
assim como a utilização de padrões usando a UIIMT, outro recurso oferecido é a
visualização de forma integrada de um ou mais modelos de interação com protótipos
de IU.
Durante a modelagem o designer pode relacionar outros modelos de interação com
espaços de interação específicos presentes em um determinado modelo, isso é
importante no caso de um único modelo não ser suficiente para representar todas os
espaços de interação possíveis dentro de um cenário de uso mais complexo. Os
protótipos de interface também poderão ser relacionados aos espaços de interação
presentes no modelo, onde o designer através das propriedades do espaço de interação
presente na UIIMT poderá vincular imagens (.jpg) dos protótipos desenvolvidos.
Fig. 2. Padrão Cancel.
A partir desse momento, o designer ao acessar a opção "visualizar modelos e
protótipos" na área de edição do modelo poderá visualizar, através de páginas HTML,
os modelos com a descrição dos seus espaços de interação e os protótipos de interface
relacionados aos mesmos, na Fig. 3 é apresentado um exemplo.
Essas páginas HTML são geradas automaticamente a partir de templates (T4) que
capturam a imagem dos modelos, assim como suas informações e as imagens dos
protótipos vinculados aos espaços de interação. Dessa forma, o designer pode
visualizar e navegar através de links, por todos os modelos e seus espaços de
interação visualizando os protótipos de interface desenvolvidos.
Na Fig.3 é apresentado um modelo de interação para autenticação de um usuário,
na parte superior da imagem é exibido o modelo de interação criado na UIIMT, e logo
abaixo são listados seus espaços de interação (Autenticacao e Area Restrita) e sua
Função de Domínio (Efetuar Autenticação).
Todos os espaços de interação possuem páginas especificas que podem ser
acessadas a partir dos seus nomes presentes na página. Na Fig.3, ao acessar o link
"Autenticacao" referente ao espaço de interação presente no modelo, o designer é
direcionado para outra página onde poderá visualizar a sua descrição, o protótipo de
interface vinculado e a navegação a partir desse espaço de interação. Ou seja, a partir
dos relacionamentos referentes a esse espaço de interação ele pode acessar os outros
espaços de interação relacionados. Também é apresentado o nome das funções de
sistema.
Fig. 3. Visualização dos modelos integrados aos protótipos de interface.
7 Conclusão
Este trabalho apresentou a UIIMT, uma ferramenta com o objetivo de apoiar o
designer no desenvolvimento de interfaces de usuário utilizando uma DSL para
modelagem de interação e interface, seguindo abordagem dirigida a modelos. As
principais contribuições são: a visualização dos protótipos de interface em conjunto
com os modelos de interação e a análise da estrutura de interação usuário-sistema,
para a detecção de possíveis problemas de usabilidade ainda em tempo de projeto. A
UIIMT é também a primeira ferramenta a usar a linguagem ALaDIM que modela a
interface com um processo de comunicação do designer para o usuário conforme a
teoria da Engenharia Semiótica [22]. Tudo isso afim de obter melhores resultados
quanto ao desenvolvimento de interfaces de sistemas interativos.
A ferramenta ainda está sendo desenvolvida. Devido a isso ainda estão sendo
realizados estudos de caso para validação da ferramenta e sua abordagem de
desenvolvimento. Como trabalhos futuros espera-se permitir a geração de IU para
múltiplas plataformas, a partir da inclusão de outros modelos que apresentem
características diferentes sobre a IU ou outros aspectos do sistema como um todo.
Outro objetivo futuro é avaliar de forma qualitativa se a abordagem utilizada trouxe
ganhos quanto a diminuição de esforços no desenvolvimento da IU.
Referências
1. Silva, P.P., Paton, N.: User Interface Modelling with UML, Departament of computer
Science, Universaty of Manchester, UK (2000)
2. Silva, P.P., Paton N.: Improving UML Support for User Interface Design: A Metric
Assessment of UML. Proceedings of ICSE-2003 Workshop on Bridging the Gaps Between
Software Engineering and Human-Computer Interaction, R. Kazman, L. Bass and J. Bosch
(Eds.), Portland, OR, IFIP, pages 76-83. USA (2003)
3. Silva, P.P.: User Interface Declarative Models and Development Environments: A Survey.
Departament of computer Science, Universaty of Manchester, UK (2000)
4. Souchon, N., Vanderdonckt, J.: A review of XML-compliant user interface description
languages. In Proceedings of DSV-IS 2003, pages 377-391. Springer-Verlag (2003)
5. MDA - Object Management Group MDA Specifications.
<http://www.omg.org/mda/specs.htm> (2010)
6. Kelly, S., Tolvanen, J.: Domain-Specific Modeling: Enabling Full Code Generation. Wiley-
IEEE Computer Society Press (2008)
7. Sadilek, D. A.: Prototyping domain-specific language semantics. Proc. of the Companion to
the ACM SIGPLAN Conference on Object-Oriented Programming Systems Languages and
Applications, pages 895896 (2008)
8. Cirilo, C. E., Prado, A. F., Zaina, L. A. M., Souza, W. L.: Model Driven RichUbi - Processo
Dirigido a Modelos para a Construção de Interfaces Ricas de Aplicações Ubíquas Sensíveis
ao Contexto. In: Simpósio Brasileiro de Engenharia de Software - SBES, 2010, Salvador.
Anais do Simpósio Brasileiro de Engenharia de Software - SBES (2010)
9. Botterweck, G. A.: Model-Driven Approach to the Engineering of Multiple User Interfaces.
MoDELS 2006 Workshop, LNCS 4364, pages 106-115. Springer-Verlag Berlin Heidelberg
(2006)
10.Costa Neto, M. A., Souza, A. J., Lavor, R.B., Silva, C. B., Leite, J. C.: Desenvolvendo
Interfaces de Usuário Multiplataformas utilizando MDA. In: 1a Conferência Sul-Americana
de Design de Interação, 2009, São Paulo. Anais do Congresso de Design de Interação. SP:
IXDA - SP, v. 1. pages 26-35 (2009)
11.Vernazza, L.: Himalia: Model-Driven User Interfaces Using Hypermedia, Controls and
Patterns. 1st International Workshop on Model-Driven User-Centric Design & Engineering
MDUCDE’07, Seul (2007)
12.Mori, G., Paternò, F., Santoro, C.: CTTE: Support for Developing and Analysing Task
Models for Interactive System Design. IEEE Trans. Software Eng., Vol. 28, No. 8, pages
797-813 (2002)
13. Microsoft Expression Blend, http://www.microsoft.com/expression
14.Kruchten, P.: The 4+1 View Model of architecture. IEEE Software 12, 6, pages 42-50
(1995)
15.Hofmeister, C., Nord, R., Soni, D.: Applied software architecture. Addison-Wesley
Longman Publishing Co., Inc. Boston, MA, USA (1999)
16.Langlois, B., Exertier, D., Bonnet, S.: Performance Improvement of DDM Tools. In
EDOCW ’06: Proceedings of the 10th IEEE on International Enterprise Distributed Object
Computing Conference Workshops. P. 19. IEEE Computer Society (2006)
17.Puerta, A. R.: A model-based interface development environment. IEEE Software,
14(4):40–47 (1997)
18.Puerta, A., Eisenstein, J.: Towards a general computational framework for model-based
interface development systems, Proceedings of the 4th International Conference on
Intelligent User Interfaces, ACM Press, pages.171–178 (1999)
19.Cook, S., Jones, G., Kent, S., Wills, A. C.: Domain-Specific Development with Visual
Studio DSL Tools. Addison-Wesley Professional (2007)
20.Vanderdonckt, J., Limbourg, Q., Michotte, B., Bouillon, L., Trevisan, D., Florins, M.:
USIXML: a User Interface Description Language for Specifying Multimodal User
Interfaces. W3C Workshop on Multimodal Interaction. Sophia Antipolis, 19-20 (2004)
21.Leite, J. C. Specifying the user interface as an interactive message. In Proceedings of
Human-Computer Interaction International (HCII’2003), volume 2, pages 716–720,
Heraklion, Creta. Lawrence Erlbaum Associates (2003)
22.de Souza, C. S.: The Semiotic Engineering of Human-Computer Interaction (Acting with
Technology). The MIT Press. (2005)
23.Chavarriaga, E., Macías, J.A.: A model-driven approach to building-driven approach to
building modern semantic web-based user interfaces. Advances in Engineering Software,
vol. 40, n. 12, pages 1329-1334 (2009)
24.Greenfield, J., Short, K., Cook, S., Kent, S.: Software Factories: Assembling Applications
with Patterns, Models, Frameworks, and Tools. Wiley (2004)
25.Fowler, M.: Language workbenches: the killer-app for domain specific languages?,
http://www.martinfowler.com/articles/languageWorkbench.html. (2005)
26.Folmer, E: Software Architecture Analysis of Usability. Ph.D. thesis, University of
Groningen (2005)
27.Tidwell, J.: Designing Interfaces: Patterns for Effective Interaction Design.
http://www.designinginterfaces.com/ (2005)
28.Greenfield, J., Short, K., Cook, S., Kent, S., Crupi,J.: Software Factories: Assembling
Applications with Patterns, Models, Frameworks, and Tools. John Wiley. (2004)
