desenvolvimento de sistemas interativos - integração das visões de engenharia de software e...

Desenvolvimento de Sistemas Interativos

Integração das Visões de Engenharia de Software e Interação Humano-Computador

Padrões para Projetos WEB

Júnia Coutinho Anacleto SilvaRosângela A. Dellosso Penteado

Maio/2005

Americo Talarico NetoAndré Constantino da Silva

2

Tópicos

Introdução e Histórico Conceito de Padrões Padrões em IHC – Estado da ArteApresentação de um conjunto de Padrões para projetos WEB

3

Tópicos

Introdução e Histórico Padrões na Arquitetura Padrões na Engenharia de Software Padrões na Interação Humano-Computador

Conceito de Padrões Padrões em IHC – Estado da ArteApresentação de um conjunto de Padrões para projetos WEB

4

Padrões – Histórico (Arquitetura)

Início na Arquitetura com o trabalho de Christopher Alexander

–“A Pattern Language”, 1977•Apresenta 253 padrões para arquitetura e urbanismo•São organizados em uma “Linguagem de Padrões”,que permite o relacionamento entre os padrões

–“The Timeless Way of Building ”, 1979•Explica os conceitos envolvidos em padrões•O “porquê” da utilização de padrões

–“The Oregon Experiment”, 1988•Utilização de padrões em um projeto concreto de arquitetura na Universidade de Oregon

5

Padrões – HistóricoEngenharia de Software (1/2)

1987Primeiro provável uso de padrões na ESObject-Oriented Programming, Systems and Applications (OOPSLA) em 1987Beck e Cunningham (projeto da interface com o usuário em Smalltalk)Abordou os conceitos de Design Participativo.

1994Primeira Conferência Pattern Languages of Programming (PloP) Apresentar, trocar e refinar os padrões e as linguagens de padrões para programas de computador.

1995Publicação do livro “Design Patterns: Elements of Reusable Object-Oriented Software” de Gamma, Helm, Johnson e Vlissides(GoF)Livro contendo uma coleção de padrões para o projeto de software Orientado a Objetos Fornece aos engenheiros de software uma forma mais prática de transferir sua experiência adquirida em projetos anteriores

6

Padrões – HistóricoEngenharia de Software (2/2)

1995Publicação do primeiro livro da série Pattern Languages of Program Design, reunindo padrões publicados no PLoP

1996Publicação do livro Pattern-Oriented Software Architecture, Volume 1: A System of Patterns, de Buschmann, Meunier, Rohnert, Sommerlad e Stal

2004Publicação do livro Organizational Patterns of Agile Software Development de Coplien e Harrison

1995

1999

1996

1997

7

Padrões – HistóricoInteração Humano-Computador

1999Common Ground: a Pattern Language for Human-Computer Interface Design, de Jennifer Tidwell

2001A Pattern Approach to Interaction Design de Jan Borchers

Padrões para interfaces GUI (Grafical User Interface) de Welie e Troetteberg

2003Welie divulga mais padrões para interfaces GUI, e padrões para interfaces Web e para interfaces de sistemas móveis

User Interface Patterns And Techniques de Jennifer Tidwell

8

Tópicos

Introdução e Histórico Conceito de Padrões

Conceitos nos diversos domínios de aplicação Formato de Apresentação dos padrões Linguagens de padrões Características e benefícios dos padrões

Padrões em IHC – Estado da ArteApresentação de um conjunto de Padrões para projetos WEB

9

Padrões - Conceito

Não existe uma definição amplamente aceita

Baseado nas definições encontradas na literatura, considera-se um padrão

“Solução (Experiência, Comprovada) para um

Problema (Recorrente) em um determinado

Contexto (Instâncias)”

10

Padrões - Características

Alexander estudou as interações entre a forma física das construções e a maneira que essa forma tem impacto nos comportamentos pessoal e social

Características dos Padrões

Permitir aos usuários leigos, os habitantes, a capacidade de projetar seus ambientes Descrevem aspectos do ambiente físico. Pessoas interagem e vivem nesse ambiente Necessitam ser anotados, testados, e gradativamente melhorados

11

Padrões - Características

É importante saberPadrões não são criados ou inventadosEles são identificados por um princípio de invariânciaSão uma ferramenta útil para registrar as experiências de projetos

Qualidade Sem Nome“verdade essencial que satisfaz as necessidades humanas e inclui aspectos como perfeição, harmonia e adaptabilidade”

12

Padrões – Formato (1/2)

O formato de apresentação dos Padrões é dividida em um conjunto de elementosDiversos formatos existentes

AlexanderGoFCoplienWelieTidwellCoadFowler...

Não existe um formato certo ou errado

Formato utilizado dependerá da ênfase que o autor deseja

dar ao padrão

13


Segundo Meszaros e Doble (1996)Mínimo

Nome do PadrãoProblemaSoluçãoContextoForças

OpcionaisContexto ResultantePadrões RelacionadosExemplosExemplos de CódigoRaciocínioApelidosAgradecimentos

14





A ordem de apresentação dos elementos não é fixa

e pode variar

15





Os elementos opcionais devem ser escolhidos

pelo autor

São para tornar a compreensão do padrão

mais fácil ou para relacionar os padrões

17

Formato de Apresentação de AlexanderNúmeroNúmero NomeNome

ConfiançaConfiança

IlustraçãoIlustração ContextoContexto

Resumo do Problema

Resumo do Problema

ProblemaDetalhadoProblemaDetalhado

18

Formato de Apresentação de Alexander

SoluçãoSolução

DiagramaDiagrama

ReferênciasReferências

19

Name: Memento

Intent: Without violating encapsulation, capture and externalize an object's internal state so that the object can be restored to this state later.

Also Known As: Token

Motivation: Sometimes it's necessary to record the internal state of an object. This is required when implementing checkpoints and undo mechanisms …

Applicability: Use the Memento pattern when:

a snapshot of (some portion of) an object's state must be saved so that it can be restored to that state later, and ….

Structure:

Formato de Apresentação de Gamma et al.

NomeNome

IntençãoIntenção

Conhecido comoConhecido como

MotivaçãoMotivação

AplicabilidadeAplicabilidade

EstruturaEstrutura

20

Participants: Memento (SolverState) Originator (ConstraintSolver) Caretaker (undo mechanism) Collaborations:A caretaker requests a memento from an originator, holds it for a time, and passes it back to the originator, as the following interaction diagram illustrates:

Consequences:The Memento pattern has several consequencesPreserving encapsulation boundaries. Memento avoids exposing information that only an originator should manage but that must be stored nevertheless outside the originator...


ParticipantesParticipantes

ColaboraçõesColaborações

ConsequênciasConsequências

21

Implementation: Here are two issues to consider when implementing the Memento pattern:

class State; class Originator { public: Memento* CreateMemento(); void SetMemento(const Memento*); // ... private: State* _state; // internal data structures // ... }; class Memento { public: // narrow public interface virtual ~Memento(); private: // private members accessible only to Originator friend class Originator; Memento(); void SetState(State*); State* GetState();private: State* _state;};


Note a natureza técnica destes tipos de padrões.

Não existe entendimento pelo usuário final leigo

em computação.

ImplementaçãoImplementação

22

Sample Code: class MoveCommand { public: MoveCommand(Graphic* target, const Point& delta); void Execute(); void Unexecute(); private: ConstraintSolverMemento* _state; Point _delta; Graphic* _target; };

Known Uses:The preceding sample code is based on Unidraw's support for connectivity through its CSolver class [VL90].

Related Patterns:Command (233): Commands can use mementos to maintain state for undoable operations.Iterator (257): Mementos can be used for iteration as described earlier.


Código ExemploCódigo Exemplo

Usos conhecidosUsos conhecidos

PadrõesRelacionados


23

Formato de Apresentação de Welie

24

NomeNome AutorAutor ProblemaProblema

PrincípioPrincípio

ContextoContexto

Influências/Motivação

Influências/Motivação

SoluçãoSolução

RaciocínioRaciocínio


25

ExemplosExemplos

UsosConhecidos

UsosConhecidos



ImplementaçãoImplementação


26

Linguagem de Padrões - Conceito

“

Uma Linguagem

de Padrões nada

mais é do que

uma maneira

precisa de

descrever a

experiência de

alguém... é a

representação de

um principio

repetitivo em um

bom projeto de

interação através

de um conjunto de

padrões

hierarquicamente

estruturados e

inter-relacionados

que são criados

para guiar o

projetista pelos

vários níveis de

abstração através

do processo...”

(

Alexander, 1977)

27

Linguagem de Padrões - Formato

Segundo Meszaros e Doble (1996)Divide o problema geral e sua solução complexa em um número de problemas relacionados com suas respectivas soluções

Cada par problema/solução será um Padrão

É bom que contenha:Nome evocativo

Descrição do problema geral

Sumário que apresente os padrões

Padrões devem estar relacionados, especialmente nos elementos Contexto e Padrões Relacionados

28

Linguagem de Padrões – Exemplo

A Linguagem de Padrões de Borchers

29


“As metas de uma linguagem de padrões de IHC são compartilhar soluções de

projeto IHC de sucesso entre colegas da área, e fornecer uma linguagem comum para projeto IHC para qualquer um que

esteja envolvido no projeto, desenvolvimento, avaliação ou uso do

sistema interativo.”INTERACT’99

30





sistema interativo.”INTERACT’99

Meta 1

31





sistema interativo.”INTERACT’99Inclusive o usuário

do sistema

Meta 2

32

Padrões - Benefícios

Fornecimento de um vocabulário de comunicação

Entre a equipe de desenvolvimentoMelhoram a comunicação

Equipe de desenvolvimento e usuários do sistema

Permitindo que usuários finais opinem nas decisões de projeto e que se expressem melhor

Captura de experiênciaTransferência de conhecimentos entre pessoas com níveis de experiência diferentes

33

Tópicos

Introdução e Histórico

Conceito de Padrões

Padrões em IHC – Estado da Arte

Conceitos de Padrões em IHC Principais Trabalhos em IHC

Comparação dos Trabalhos

Apresentação de um conjunto de Padrões para projetos WEB

34

Padrões de IHC

“Uma linguagem de padrões de interação gera projetos de interação de espaço/tempo que cria uma imagem do sistema próxima ao modelo mental do usuário da tarefa a ser realizada, fazendo com que a interface humano-computador seja a mais transparente possível.”

ChiliPLoP’98

35

Padrões de IHC


ChiliPLoP’98

36

Padrões de IHC


ChiliPLoP’98

37

Padrões de IHC


ChiliPLoP’98

38

Padrões de IHC - Categorias

Padrões para Interação Humano-Computador

Padrões para Interface com o Usuário

Padrões para Avaliação de Usabilidade

relacionados com preocupações de alto

nível, e algumas vezes com guidelines, envolvendo a

psicologia do usuário

Ex.: Navigable Space

39





relacionados com problemas de interação

específicos e sua solução é baseada em

componentes de interface com o usuário

Ex.: Liquid Layout

40





Expressam como conduzir o processo de

avaliação de usabilidade, auxiliam a planejar e executar a avaliação e editar e

avaliar os dados coletados

Ex.: Linguagem de padrões para avaliação

de usabilidade de Gellner e Forbrig

41

Principais Trabalhos

Linguagem de Padrões da Tidwell (1998)

Linguagem de Padrões de Borchers (2000)

Linguagem de Padrões de Montero et al. (2002)

Coleção de Padrões da Tidwell (2003)

Coleções de Padrões de Welie (2003)

42

Linguagem de Padrões Common Ground

Autora: Tidwell

Artigo: Interaction Design Patterns, PLoP 1998.

Web: http://www.mit.edu/~jtidwell/interaction_patterns.html

Padrões para projeto de interação entre humanos e qualquer tipo de artefato

60 padrões identificados

Pioneirismo

Mais conhecido e mais usado

Escolha dos padrões:Através de perguntas que estão relacionadas com o contexto do padrão

Alguns padrões foram identificados e não escritos

43

Coleção UI Patterns and Techniques

Autora: TidwellWeb: http://time-tripper.com/uipatterns

desenvolvimento de interfaces com o usuário40 PadrõesDivisão dos padrões em categoriasFormato do Padrão:

NomeExemploUsando quando (Used When)Porquê (Why)Como (How)Exemplos

Alguns padrões foram identificados e não escritos

44

A Linguagem de Padrões de Borchers

Autor: Borchers

Livro: A Pattern Approach to Interaction DesignContendo padrões de ES, IHC e de música (domínio de aplicação)

Web: http://www.hcipatterns.org/patterns/borchers/patternindex.html

Apenas os padrões de IHC

Interação com quiosquesComo representar o modelo mental do usuário

como tornar a interação mais atrativa ao usuário

Oferecer um grau de transparência da interação

Divisão dos padrões em níveis de abstração

45

A Coleção de Welie

Autores: Welie e Trætteberg

Welie e Trætteberg. Interaction Patterns in User Interfaces, PLoP 2000.

Web: http://www.welie.com

Padrões para projeto de interfaces para:Web: 89 padrões

GUI: 26 padrões

Dispositivos Móveis: 7 padrões

Divide os padrões em categorias

46

A Linguagem de Padrões de Montero et al.

Linguagem de PadrõesMontero, Lozano, Gonzáles, Ramos. A First Approach To Design Web Sites By Using Patterns, VikingPLoP 2002.

padrões para projeto de interfaces com o usuário para Web

23 padrões identificados

Divisão dos padrões em três categorias:Web sites

Páginas Web

Ornamentais

47

Comparação dos Trabalhos

Linguagem Common Ground

ColeçãoUI Patterns

Linguagem de Borchers

Coleções de Welie

Linguagem de Motero et

al.Número de

Padrões 60 40 17 122 23

Uniformidade parcial parcial total parcial total

Organização Linguagem Coleção Linguagem Coleção Linguagem

Propósito Interação (Desktop ou

Web)

Interface com o

Usuário

Interação com

Quiosques

GUI, Web e Móveis

Web

Disponibiliza-ção

Artigo*Web

Web Livro,Web*

Web Artigo

Padrões não escritos?

sim sim não não não

*Não contém todos os padrões do autor

48

Name: Memento

Intent: Without violating encapsulation, capture and externalize an object's internal state so that the object can be restored to this state later.

Also Known As: Token

Motivation: Sometimes it's necessary to record the internal state of an object. This is required when implementing checkpoints and undo mechanisms …

Applicability: Use the Memento pattern when:

a snapshot of (some portion of) an object's state must be saved so that it can be restored to that state later, and ….

Structure:

Padrão Undo vs. Padrão MementoUndo

Author Martijn van Welie

Problem Users may do actions they later want reverse.

Principle Error Management (Safety)

Context Most applications where restoring the state after an erroneous action is relatively hard to do by hand e.g. when it requires several actions.

Forces•Users typically explore functionality of an application but do not want to be "punished" when selecting unwanted functions. •Some actions may have side effects that cannot be undone by the application. •Often users want to reverse several actions instead of just the last action.

Solution Let the users reverse their last actions.

Maintain a queue of executed commands and allow the user to undo at least the last couple of actions. Show the history of commands so that users know...

49

Examples

As in all MS Office applications, in Word 2000 the users can see the history of their actions and undo one or more of them. The actions are briefly described and the users can select a range of actions to be undo. After selecting undo, users can even redo the actions.

Known Uses Most office applications; Word, WordPerfect, CorelDraw

Related Patterns Consider the WARNING pattern for commands that have side effects that cannot be undone.

Implementation

Implementation: Here are two issues to consider when implementing the Memento pattern:class State; class Originator { public: Memento* CreateMemento(); void SetMemento(const Memento*); // ... private: State* _state; // internal data structures // ... }; class Memento { public: // narrow public interface virtual ~Memento(); private: // private members accessible only to Originator friend class Originator; Memento(); void SetState(State*); State* GetState();private: State* _state;};

Padrão Undo vs. Padrão Memento

50


Undo(Welie)

Memento (Gamma et al.)

Foco Descrição da funcionalidade

objetos que dispõem a

funcionalidade

Leitores Usuários e projetistas

Engenheiros de Software OO

Formato Ênfase na descrição da

funcionalidade

Ênfase nos diagramas e

implementação

51


A questão “o padrão Undo do Welie é melhor do que o padrão Memento do Gamma” está equivocada

Qual é mais importante para o projetista de interface?

Qual é mais relevante ao projetista?

Eles apresentam visões diferentesCada visão é importante em uma parte do projeto projeto de desenvolvimento

É importante usarmos padrões das duas áreas em conjunto

52

Modelo de Processo do Projeto da Interação (Dearden, 2002) (1/2)

1. IntroduçãoO facilitador introduz– o que são os padrões– Para que servem– Como podem auxiliar o trabalho– Formato

2. Leitura dos PadrõesO facilitador solicita que o usuário leia um padrão de cada vezFacilitador pergunta se o usuário entendeu todos os termosFacilitador pergunta ao usuário sobre o que ele entendeu sobre o padrãoFacilitador tira as dúvidas do usuário

53

1. Desenvolvimento da interfaceFacilitador guia o usuário no desenvolvimento da interfaceFoque uma tela por vezPermita ao usuário manipular os padrõesAo terminar uma tela, facilitador verifica se a tela satisfaz as diretivas dos padrões utilizados

4. Desenvolvimento iterativo começando com protótipos de papel, chegando em mock-ups e utilização de ferramentas de autoria em direção a um produto completo.

Modelo de Processo do Projeto da Interação (Dearden, 2002) (2/2)

54

Tópicos

Introdução e Histórico

Conceito de Padrões

Padrões em IHC – Estado da Arte

Apresentação de um conjunto de Padrões para projetos WEB


55


Web Sites Páginas Web Ornamentais

56

Welcome

57

Welcome

Usuário necessita saber onde ele está, o que pode fazer e o que ele necessita para visitar o lugar

Problema:

Contexto:

Solução:

Como o usuário sabe onde ele está?

Forneça um lugar para recepção onde condições de acesso podem ser avaliadas

Possibilitar acesso ao Site (Homepage) (Indication)

Obtenha informações do usuário como linguagem e resolução (Ready)

Informe sobre as melhores condições para visitar o site de forma adequada (Polyglot)

Informe sobre o conteúdo (About This) e seu proprietário (Contact Us)

58

Indication

59

IndicationOs usuários necessitam saber onde eles podem ir e o que

eles podem fazer a partir do ponto onde estão

Problema:

Contexto:

Solução:

Como os usuários podem saber onde podem ir e o que eles acharão lá?Forneça o mecanismo necessário (links significantes) que

permitam qualquer usuário mover de um lugar para outros lugares

Forneça informações de feedback sobre sua localização

Possibilite o retorno (Second Chance) para um lugar seguro (Homepage)

Links importantes podem ser colocados no alto da página

Etiquetas de Links descritivas poderiam ser utilizados (Polite)

Se utilizar Frames, coloque um título em cada um

60



61

Homepage

62

Homepage

Uma página é acessa de várias maneiras, entretanto deve haver um ponto de referência, que responda questões como quem? O que? Quando? Onde?

Problema:

Contexto:

Solução:

Como o usuário sabe onde ele está?

Forneça uma página inicial onde o usuário se sinta como “estivesse em casa”

Permita ao usuário utilizar retornos caso esteja desorientado

Layout do site coloca importante informações no topo da página (Novelty)

Incluir logos (Tagline), mecanismos de busca (Search) e informações para contato (Subscription, Contact Us, About This)

63

Polite

64

Polite

As pessoas se diferem amplamente nos termos que utilizam para descrever conceitos

Problema:

Contexto:

Solução:

Como o usuário acessa o conteúdo da página de modo simples e apropriado?

Use a linguagem apropriada de modo mais simples e clara para o conteúdo do site

Use etiquetas associadas com seus controles (Indication)

Expresse uma idéia em cada sentença (Tagline)

Use métodos (como os do Design Participativo e Classificação de Cartões) que envolvam o usuário

65

Busy

66

Busy

Downloads podem demorar muito tempo, criando atrasos significantes ou podem ser completados de modos diferentes

Problema:

Contexto:

Solução:

Como o usuário sabe quando suas operações terminaram?

Forneça feedback ao usuário

Forneça informações sobre o tamanho de qualquer elemento que o usuário pode fazer download

Imagens e textos podem ser carregados sobre demanda (Size)

67

Form

68

Form

O usuário tem que fornecer informações

Problema:

Contexto:

Solução:

Como o usuário fornece informações para o proprietário do web site?

Forneça “brancos” apropriados para serem preenchidos, com indicativo claro e correto de qual informação deve ser fornecida

Em algumas ocasiões, um formulário pode ocupar uma página completa

O usuário necessita saber se sua submissão foi corretamente processada

69



70

Tag Line

71

Tag Line

É necessário saber a proposta do website

Problema:

Contexto:

Solução:

Como o usuário sabe qual o propósito do website?

Forneça um slogan ou imagem que identifique o website e seu propósito.

Resumida, simples e direta

Inclua uma descrição do site na janela do navegador

72

Print

73

Print

A leitura de textos num website é diferente da leitura em textos impressos. A maioria das pessoas lêem blocos de texto ao invés de ler palavra por palavra

Problema:

Contexto:

Solução:

Como o usuário pode conseguir uma impressão adequada da informação?

Forneça a informação de diversas maneiras e formatos

e dê a possibilidade de imprimir ou salvar documentos grandes.

74

Subscription

75

Subscription

Os usuários não querem visitar o website a todo momento. Eles desejam saber quando novos produtos ou novidades aparecem.

Problema:

Contexto:

Solução:

Como o usuário pode ficar sabendo de informações significativas para ele?

Forneça um formulário no qual o usuário pode conseguir a informação, que ele deseja, automaticamente.

o usuário deve ter certeza de que seu email não será divulgado a todos (Secret).

76

Colour

77

Colour

A cor deve ser considerada no início do projeto de um website.

Problema:

Contexto:

Solução:

Como o usuário pode acessar informações de uma forma adequada?

Forneça a informação usando cores adequadas nas fontes, fundos de tela e imagens.

mudança de cores em links visitados e não visitados

cuidado com contrastes de cores

use cores brilhantes somente para destacar informações

78

Location

79

Location

Quando um usuário chega em um Website, ele precisa saber onde está.

Problema:

Contexto:

Solução:

Como o usuário sabe onde está ou qual é a sessão que ele está?

Forneça informação sobre a localização do usuário no website.

80

Novelty

81

Usuários gostam de saber se existem novas funcionalidades, promoções, ofertas, noticias no Website

Problema:

Contexto:

Solução:

Como o usuário pode saber das novidades e ultimas notícias do website?

Forneça sugestões e novidades do website de uma maneira limpa e intuitiva.

Novelty

82

Size

83

Size

Balanceamento entre gráficos e tempo real

Problema:

Contexto:

Solução:

Como o usuário pode acessar informações de uma forma adequada?

Forneça a informação usando cores adequadas nas fontes, fundos de tela e páginas.

Animações, imagens e arquivos longos devem ser fornecidas sob demanda.

Tamanho de página, rolagem e tamanho de fontes são importantes

84

Dúvidas?

Desenvolvimento de Sistemas Interativos

Integração das Visões de Engenharia de Software e Interação Humano-Computador

Padrões para Projetos WEB

Júnia Coutinho Anacleto SilvaRosângela A. Dellosso Penteado

Maio/2005

Americo Talarico NetoAndré Constantino da Silva

desenvolvimento de sistemas interativos - integração das visões de engenharia de software e...

Documents