Interacção Homem-Máquina Ferramentas de Design da Interacção Pedro Campos dme.uma.pt/pcampos pcampos@uma.pt Ferramentas de Design de IU Introdução Métodos de Especificação Ferramentas de Design - AMD (Analysis, Modeling and Design Tools) - MB-UID (Model-based UI Design Tools) - Ferramentas Informais (Sketching, Gesturing) - Ferramentas Colaborativas (CSCW - Computer-Supported Cooperative Work) - Ferramentas baseadas em linguagens XML Ferramentas de Avaliação
Métodos de Especificação A primeira preocupação de desenho é definir uma boa notação e discutir as possíveis alternativas: - A linguagem por defeito para especificação em qualquer área é a linguagem natural (português, inglês, esboço, esquemático, etc.) - A especificação em linguagem natural tende a ser: Longa, vaga e ambígua - O que a torna imprópria para provar a: Correcção, consistência e completude Forma de Backus-Naur (BNF - Backus Normal Form) - Os componentes de alto nível são descritos como não-terminais - As strings específicas são descritas como terminais Métodos de Especificação Forma de Backus-Naur (cont.) - Exemplo de Gramáticas <Telephone book entry>::= <Name><Telephone number> <Name> ::= <Last name>, <First name> <Last name> ::= <string> <First name> ::= <string> <string> ::= <character> <character><string> <character> ::= A B C D E F G H I J K L M N O P Q R S T U V W X Y Z <Telephone number>::= (<area code>) <exchange>-<local number> <area code>::= <digit><digit><digit> <exchange>::= <digit><digit><digit> <local number>::= <digit><digit><digit><digit> <digit>::= 0 1 2 3 4 5 6 7 8 9 - Exemplos de Entradas Correctas WASHINGTON, GEORGE (301) 555-1234 BEEF, STU (726) 768-7878 A, Z (999) 111-111
Métodos de Especificação Forma de Backus-Naur (cont.) - Exemplo BNF para o comando UNIX cp (copiar ficheiros) cp [ -ip ] filename1 filename2 cp -rr [ -ip ] directory1 directory2 cp [ -iprr ] filename... directory Os parênteses rectos indicam que zero ou mais opções podem ser incluidas, o -rr indica que uma destas opções recursivas são necessárias para copiar directórios Para acomodar a riqueza do software interactivo foram propostas as gramáticas multiparty (multiplos parceiros), que têm nãoterminais etiquetados com o parceiro que produz a string - Exemplo para um processo de login <session> ::= <U: Opening> <C: Responding> <U: Opening> ::= LOGIN <U: Name> <U: Name> ::= <U: String> <C: Responding> ::= HELLO [<U: Name>] Métodos de Especificação Selecção de Menus e Árvores de Caixas de Diálogo - Para muitas aplicações este método é excelente porque permite utilizar a mesma estrutura para utilizadores e design Como qualquer tipo de mapa as árvores de menus mostram as relações de alto-nível e os detalhes de baixo nível Qualquer das alternativas são uma boa ajuda para verificar a consistência e completude Diagramas de Transição - Conjunto de nós que representam estados do sistema e um conjunto de ligações entre os nós que representam possíveis transições Muitas notações para diagramas de transição foram desenvolvidas para acomodar aplicações específicas (processamento de texto, controlo de tráfego aéreo, etc.) Exisem várias ferramentas para criar e gerir diagramas de transição, diagramas de fluxo de dados e outros tipo de notações gráficas.
Métodos de Especificação Diagramas de Transição - Exemplo para um sistema de menus simples para um sistema de críticas a restaurantes com menus numerados: 1. Adicionar um restaurante à lista, 2. Fornecer uma crítica para um restaurante, 3. Ler uma crítica, 4. Pedir ajuda (também acessível por?), 5. Sair + + wakeup 1 2 30 3! start 4 e? help 5 error quit clean <addnew> <givrev> <readrev> Fonte: Wasserman e Shewmake 1985 Métodos de Especificação Diagramas de Transição (cont.) 0.38 File 0.05 Directory OK Start 0.50 0.10 0.02 Filename 0.02 Exemplo de um diagrama de transição para acções de manipulação de ficheiros. As etiquetas nas ligações indicam a frequência de transição. Cancel Diagramas de Estado - Os diagramas de estado (Harel) permitem resolver o problema da confusão gerado por um nº elevado de estados nos diagramas de transição, suportando alguns conceitos mais avançados como a nocção de hierarquia de estados e mecanismos de concorrência e sincronização.
Métodos de Especificação Notação Utilizador-Acção (UAN-User Action Notation) - As gramáticas e os diagramas são aproximações adequadas para selecção de menus e preenchimento de formulários mas pouco eficientes para interfaces de manipulação directa, onde a variedade de acções permitidas, o feedback visual e a importância do contexto necessitam de métodos mais ricos. - Para lidar com este tipo de requisitos é necessária uma notação dirigida às tarefas dos utilizadores que lidam com apontadores, arrastamento, selecção e cliques. Métodos de Especificação CTT - ConcurTaskTrees [Paternò, 1999] - As CTT são uma notação gráfica em que as tarefas são estruturadas hierarquicamente e combinadas através de um conjunto de operadores temporais. Independent concurrency T1 T2 Choice T1 [] T2 Concurrency with information exchange T1 [] T2 Iteration T1* T T {xor} T * T T1 T2 T1 T2 <<info pass>> T1 T2 T1 Enabling T1 >> T2 Enabling with information passing T1 []>> T2 Deactivation T1[>T2 Finite Iteration T1(n) Optional Tasks [T1] T T T T 1..n T 0..1 T1 <<seq>> T2 T1 <<seq info pass>> T2 T1 <<deact>> T2 T1 T1
Métodos de especificação - CTT Métodos de especificação Espaços de Interacção [Nunes, 2000] - The interaction space class is used to model interaction between the system and the users (human-actors). Interaction space classes are responsible for the physical interaction with the user, including a set of interaction techniques that define the image of the system (output) and the handling of events produced by the user (input).
UML + Wisdom Profile Estereótipo Classe Base Descrição Exemplos «Interaction Space» Classe Espaço da IU onde o utilizador interage durante a realização da(s) tarefa(s) écran, caixa de diálogo, janela,... «navigates» Associação denota um utilizador a moverse para outro espaço elo para página «contains» Associação a classe fonte contém a classe alvo tabela que contém outras tabelas «input element» Atributo informação sobre a qual se pode operar/manipular input text box, radio buttons,... «output element» Atributo informação apresentada ao utilizador resultados de uma procura «action» Operação algo que o utilizador pode fazer e que altera o sistema botão submit, copy & paste,... Ferramentas de IU Programação em C Visual Basic Dificuldade de Uso MFC C Programming Click and Create Basic Objectivo Sofisticação do que pode ser criado (Myers, 2000)
Duas forças que colidem Ferramentas AMD MagicDraw UML
Ferramentas AMD Rational ROSE Ferramentas AMD ArgoUML - Open Source
Ferramentas MBUID CTTe, ConcurTaskTrees environment - Open Source Ferramentas MBUID MOBI-D, www.redwhale.com
Ferramentas MBUID U-TEL Ferramentas MBUID SUPPLE
Ferramentas Informais DENIM, http://guir.berkeley.edu/ Ferramentas Informais Designer s Outpost, http://guir.berkeley.edu/
Ferramentas Informais Designer s Outpost, http://guir.berkeley.edu/ Ferramentas Informais Ideogramic UML, http://www.ideogramic.com/
Ferramentas Colaborativas Software Design Board Ferramentas Colaborativas Distributed Knight
Ferramentas Colaborativas Distributed Designer s Outpost Os Designers e os seus Estilos de Trabalho (Workstyles, Campos 2006) Fonte:
Os Designers e os seus Estilos de Trabalho (Workstyles, Campos 2006) Fonte: empresa de web design de Silicon Valley Os Designers e os seus Estilos de Trabalho (Workstyles, Campos 2006) Fonte:
Os Designers e os seus Estilos de Trabalho (Workstyles, Campos 2006) A Work Style Transition: a day in the life of a UCD developer Example: Low-Detail, Low-Tech, Collaborative High-Detail, High-Tech, Solo Working in Groups using Low-Tech Materials for Task Modeling After Task Modeling, each team member is assigned a set of tasks and builds concrete prototypes using a visual interface builder
Another Work Style Transition: another day in the life of a UCD developer This is a Transition with High Cost: Informal, Collaborative Working in Groups using Blackboards or large sheets of paper for UML modeling Highly Formal, Solo After UML class modeling, someone has to translate the model into a digital semantically correct model! Yet Another Work Style Transition: yet another day in the life of a UCD developer This is a Transition with High Frequency: Concrete, detailed modeling Abstract descriptions Designing a concrete UI prototype......going back to Use Cases and User Models to see if they match/are supported
...but are they really significant? Let s ask Professional Interaction Designers! Survey Distributed online to mailing lists: CHI-WEB and IxDA (Interaction Design Associations) mailing lists 245 responses in 1.5 weeks (We now have 370 responses) Analysis of Results Frequency Cost The Most Difficult and Almost the Most Frequent! Problem Space to Solution Space Non-Functional to Fully-Functional Informal to Formal High-Detail to Low-Detail Whiteboard to CASE Tool 2 3 4 5 6 Frequent, but not significantly difficult
Fundamentos do Modelo de Estilo de Trabalho para DCU Ao modelar os estilos de trabalho em DCU, três categorias são fundamentais: - A Notação Como comunicamos o trabalho - A Forma de Utilização da Ferramenta Como utilizamos a ferramenta - A Colaboração Onde e quando colaboramos Workstyle Model for UCD
Notation-Style: Perspective Problem / Requirements Projecto obtém Luz Verde Solution / Design Design, Produto Final Casos de Utilização Lógica de Negócio Definição de Objectivos Análise Modelação, Verificação, Validação, Simulação Negociação de Objectivos Notation-Style: Formality Informal Formal Gestos Esboços UML (Sintaxe) UML, XMI (Semântica) Z (Linguagens de Especificação Formais)
Notation-Style: Detail Abstract Concrete Modelo de Tarefa Protótipos Abstractos Canónicos Esquema Wireframe Interface Utilizador Concreta Modelo de Conteúdo Tool-Usage Style: Stability Modifiable Stable Ferramentas CASE Visio: fácil alterar Post-Its e lápis Papel e lápis Papel e Caneta
Tool-Usage Style: Functionality Non-Functional Fully-Functional Mock-up da Interface (Estático) Storyboard Protótipo nãofuncional Visual Design Behaviour Design Protótipo a funcionar Non-Functional Fully-Functional Tool-Usage Style: Traceability Independent Coherent Modelos não sincronizados entre si ou com o código Visual Studio (Code View e UI View coerentes) Dreamweaver (Code View e Design View estão coerentes) Documentos low-tech CanonSketch (UML View, Abstract Prototype View e HTML view)
Collaboration Style: Asynchrony Same Time Different Time E-Mail, Repositórios Centralizados, Sistemas CVS Whiteboards, Smartboards Collaboration Style: Distribution Different Places Same Place Dificuldade de desenhar ferramentas que suportem colaboração remota é muito maior!
Aplicando o Modelo Aplicando o Modelo
Aplicando o Modelo Framework de análise de Ferramentas
CanonSketch: Suportando a dimensão Detalhe Abstracção Realização Modelo de Tarefa Inventório de conteúdo, Modelo UML IU Concreta Esquema Wireframe Uma Grande Lacuna! Linguagens do CanonSketch UML + Wisdom Profile - UML está amplamente difundido e adoptado pelos engºs software - Semâmtica formal bem definida Protótipos Abstractos Canónicos - Notação da vida real, refinada em muitos projectos na indústria Guardar como XMI... - Promove interoperabilidade entre ferramentas - Testado usando Enterprise Architect Geração de HTML e de MXML (Adobe, 2006)
Alcançando consistência WISDOM Presentation Model...maps to... Canonical Abstract Prototypes Um modelo semântico comum sincroniza as vistas: - Baseado no meta-modelo do UML 2.0 (versão Objective- C do projecto open-source Eclipse UML2) - Também permite exportar o modelo como XMI. <<Interaction Space>> <<input element>> <<input element>> : accept <<input element>> : editable <<input collection>> : editable <<input collection>> : choice <<input collection>> : actionchoice <<input collection>> : viewchoice <<contains>> <<output element>> Interaction Context active material input/accepter editable element editable collection selectable collection selectable action set selectable view set container element <<output collection>> <<output element>> : Info! collection notification <<action>> action/operation CanonSketch: Demo http://dme2.uma.pt/canonsketch
TaskSketch: Supporting Perspective Transitions Participatory View (post-it notes) Good for End-Users, Clients Task Case Narrative View Good for Usage-Centered Designers UML Activity Diagram View Good for Software Engineers TaskSketch: Supporting Formality Transitions Sketch Recognition Sketch View Good for Expressing Early Design Ideas UML View Good for Model Checking and Automatic Validation
Work Style Transitions Support: Advantages They Inform Design: - Give rise to new ideas They Validate Design Decisions: - Tighter fit between everyday work practices and the system being developed Easy to learn: - Identify common work style Dimensions and Transitions - Classify their Frequency and Cost - Design using traditional methods but supporting Transitions - Evaluate Design by validating Work Style Support Leitura Capítulos 3, 4 e 5 do livro: - Campos, P., Designing for Workstyle Transitions, Universidade da Madeira, 2006