10/6/09

1

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 1

http://www.di.uminho.pt

Sistemas Interactivos Engenharia de Aplicações

José Creissac Campos jose.campos@di.uminho.pt Departamento de Informática, Universidade do Minho, Braga, Portugal.

Mestrado em Informática 2009/2010

Escola de Engenharia Departamento de Informática

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 2

Preâmbulo

Simples?

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 3

Preâmbulo

10/6/09

2

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 4

Motivação

  A interface é factor fundamental no sucesso do software

  O custo de desenvolvimento/manutenção da interface pode ultrapassar os 50%

  Complexidade de desenvolvimento tem vindo a aumentar

-  Diversidade de plataformas tecnológicas -  Evolução das tecnologias de interacção

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 5

Factor de sucesso

(Norman 88) “simplicity and user experience”

(The Economist)

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 6

Factor de sucesso(cnt.)

“simplicity and user experience”

10/6/09

3

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 7

Motivação – custo/lucro “usability techniques helped cut development time by 33-50%.” (Bosert, 1991)

“80 percent of software life-cycle costs occur during the maintenance phase. Most maintenance costs are associated with “unmet or unforeseen” user requirements and other usability problems.” (Pressman, 1992)

“The average user interface has some 40 flaws. Correcting the easiest 20 of these yields an average improvement in usability of 50%. The big win, however, occurs when usability is factored in from the beginning. This can yield efficiency improvements of over 700%.” (Landauer, 1995)

“More than 83 percent of Internet users are likely to leave a Web site if they feel they have to make too many clicks to find what theyʼre looking for” (Arthur Andersen, 2001)

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 8

Plataformas tecnológicas

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 9

Uma chamada de atenção

  Não estamos a falar de graphical design

  Não estamos a falar apenas de tecnologia

10/6/09

4

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 10

  Programação web client side

  Programação web server side

  Conceitos de IHC

  Concepção centrada no utilizador

  Model-based design

  Avaliação de interfaces

Métodos Tecnologias &

Programa

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 11

Conceitos de IHC

  IHC – Interacção Humano-Computador -  Noções básicas de IHC

  Qualidade de uma interface? -  Usabilidade (ISO 9241-11, etc.)

  Modelo de interacção de Norman   Evolução dos conceitos

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 12

Objectivos

Modelo de Interacção de Norman

Mundo Físico

Intenção

Especificar Acções

Execução Percepção

Interpretação

Avaliação

Fosso da Execução

Fosso da Avaliação

Modelo Mental

10/6/09

5

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 13

  Programação web client side

  Programação web server side

Métodos Tecnologias &

Programa

  Conceitos de IHC

  Concepção centrada no utilizador

  Model-based design

  Avaliação de interfaces

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 14

Programação web client side   Web side estático típico:

  Baixa interactividade -  Google Maps?

  Soluções? -  Containers especiais no browser -  Client side scripting

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 15

Containers – Applets, Flex, Silverlight…

•  + baseado em Java •  - tempo de download •  - aspecto gráfico

Applets

•  + gráficos vectoriais •  - necessidade de plug-in

Flex / Silverlight

•  + experiência Desktop •  + utilização offline •  - tempo de download

Java WebStart / Adobe Air

10/6/09

6

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 16

Client side scripting

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 17

AJAX

  Asynchronous JavaScript and XML -  (X)HTML para definir o conteúdo das páginas -  CSS para definir o aspecto gráfico -  JavaScript para client side scripting -  DOM para manipular o conteúdo das páginas -  XMLHttpRequest para obter dados de forma

assíncrona (inicialmente IFRAMEs)

  JQuery – biblioteca JavaScript -  facilita desenvolvimento.

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 18

CSS - Exemplo

10/6/09

7

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 19

  Programação web client side

  Programação web server side

Métodos Tecnologias &

Programa

  Conceitos de IHC

  Concepção centrada no utilizador

  Model-based design

  Avaliação de interfaces

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 20

Concepção centrada no utilizador   Análise de requisitos

-  análise de tarefas

  Concepção -  prototipagem

-  padrões de desenho

-  técnicas de avaliação

  Desenvolvimento -  arquitecturas software

-  tecnologias de programação de interfaces

-  técnicas de avaliação

  Deployment -  obter informação sobre utilização do sistema -  avaliar resultado face a objectivos

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 21

Análise de Tarefas – CTT

CTTE/TERESA: http://giove.cnuce.cnr.it/ctte.html

10/6/09

8

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 22

Canonical Abstract Prototypes

EA 2007/08

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 23

  Programação web client side

  Programação web server side

Métodos Tecnologias &

Programa

  Conceitos de IHC

  Concepção centrada no utilizador

  Model-based design

  Avaliação de interfaces

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 24

Model-based design

  Chameleon reference framework Modelo de Domínio Tarefas a suportar Modelo da interface independente da técnica de interacção Modelo da interface independente da plataforma computacional Interface Executável

10/6/09

9

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 25

Modelação de UIs

Modelo de domínio Modelo de tarefas

Modelo de navegação

Modelo do utilizador Modelo da plataforma

Modelo de diálogo

Modelo da apresentação

Modelo da aplicação

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 26

Linguagens de markup para UIs

UIML

XUL (Mozilla)

SVG

OpenLaszlo

WasabiXML (Winamp)

XAML(Microsoft) XAL

UsiXML

MXML XForms

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 27

UsiXML – FlexiXML

10/6/09

10

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 28

  Programação web client side

  Programação web server side

Métodos Tecnologias &

Programa

  Conceitos de IHC

  Concepção centrada no utilizador

  Model-based design

  Avaliação de interfaces

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 29

Programação Web server side

Data sources / services

Controlo de diálogo!

Lógica de negócio?

Perl

JavaScript (server side)

PHP ASP (Active Server Pages)

Servlets

JSP (Java Server Pages) JSF (Java Server Faces)

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 30

Java Server Faces (JSF)

  JSP – uma tecnologia (Java inside HTML)   JSF – uma framework

  JSP utilizado para a parte de apresentação (ou não)   Principais características

  Especificação da navegação entre páginas   Componentes de UI (botões, campos de input, etc.)   Validação de input do utilizador   Gestão de Beans (Bean management)   Processamento de eventos (Event handling)   Internationalization support

10/6/09

11

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 31

JBoss Seam

  Application framework – utiliza JSF   Anotações no Java em vez de ficheiros XML   Esconde o JavaScript   Gestão de contextos

-  Conversations (tarefas!)   Bijecção de dados

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 32

  Programação web client side

  Programação web server side

Métodos Tecnologias &

Programa

  Conceitos de IHC

  Concepção centrada no utilizador

  Model-based design

  Avaliação de interfaces

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 33

Avaliação de interfaces

Problem Solution Design Construction

Formative Evaluation: What and how to (re)design?

Summative Evaluation: How good is the solution?

Understand usersʼ needs

Work towards a goal (Usability)

Follow standards

Compare systems Compare alternatives

10/6/09

12

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 34

Avaliação sumativa

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 35

Avaliação Formativa

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 36

Métodos de análise

  Empíricos -  observação/interacção com utilizadores reais -  questionários

  Analíticos -  sem utilizadores reais -  utilização de modelos -  utilização de princípios/regras definidos -  análise de logs

10/6/09

13

Engenharia de Aplicações – Sistemas Interactivos 2009/10

Mestrado em Informática – Universidade do Minho 37

Primeiro teste

  Um teste diagnóstico.   Não é necessário identificarem-se.   Ficar a perceber o que já sabem.