Desenvolvimento de Sistemas                Interativos     Integração das Visões de Engenharia de Software e              ...
Tópicos  Introdução e Histórico  Conceito de Padrões  Padrões em IHC – Estado da Arte Apresentação de um conjunto de P...
Tópicos  Introdução e Histórico      Padrões na Arquitetura      Padrões na Engenharia de Software      Padrões na Int...
Padrões – Histórico(Arquitetura)Início na Arquitetura com o trabalho de Christopher Alexander  –“A Pattern Language”, 1977...
Padrões – HistóricoEngenharia de Software (1/2)1987 –   Primeiro provável uso de padrões na ES –   Object-Oriented Program...
Padrões – HistóricoEngenharia de Software (2/2)1995 – Publicação do primeiro livro da série   Pattern Languages of Program...
Padrões – HistóricoInteração Humano-Computador1999 – Common Ground: a Pattern Language for Human-Computer   Interface Desi...
Tópicos  Introdução e Histórico  Conceito de Padrões      Conceitos nos diversos domínios de aplicação      Formato de...
Padrões - Conceito Não existe uma definição amplamente aceita Baseado nas definições encontradas na literatura, considera-...
Padrões - Características  Alexander estudou as interações entre a forma  física das construções e a maneira que essa  for...
Padrões - Características É importante saber     Padrões não são criados ou inventados     Eles são identificados por um p...
Padrões – Formato (1/2)O formato de apresentação dos Padrões édividida em um conjunto de elementosDiversos formatos existe...
Padrões – Formato (2/2)Segundo Meszaros e Doble (1996)  Mínimo    Nome do Padrão    Problema    Solução    Contexto    For...
Padrões – Formato (2/2)Segundo Meszaros e Doble (1996)  Mínimo    Nome do Padrão    Problema    Solução                A o...
Padrões – Formato (2/2)Segundo Meszaros e Doble (1996)  Mínimo    Nome do Padrão    Problema    Solução    Contexto    For...
Formato de Apresentação de Alexander                                       16
Formato de Apresentação de Alexander Número    Nome                          Confiança             Ilustração             ...
Formato de Apresentação de Alexander              Solução                    Diagrama                                Refer...
Formato de Apresentação de Gamma et al. Name: Memento               Nome Intent: Without violating encapsulation, capture ...
Formato de Apresentação de Gamma et al. Participants: Memento (SolverState)                                Participantes O...
Formato de Apresentação de Gamma et al.Implementation: Here are two issues to consider when implementing theMemento patter...
Formato de Apresentação de Gamma et al.Sample Code:  class MoveCommand {                           Código Exemplo  public:...
Formato de Apresentação de Welie                                   23
Formato de Apresentação de Welie               Nome   Autor   Problema                              PrincípioContextoInflu...
Formato de Apresentação de Welie    Exemplos         Usos      Conhecidos  PadrõesRelacionados               Implementação...
Linguagem de Padrões - Conceito“Uma Linguagem de Padrões nada mais é do que uma                                  (Alexande...
Linguagem de Padrões - Formato Segundo Meszaros e Doble (1996)   Divide o problema geral e sua solução complexa em   um nú...
Linguagem de Padrões – Exemplo                 A Linguagem de Padrões de Borchers                                         ...
Linguagem de Padrões - Conceito• “As metas de uma linguagem de padrões     de IHC são compartilhar soluções de  projeto IH...
Linguagem de Padrões - Conceito    • “As metas de uma linguagem de padrões         de IHC são compartilhar soluções de    ...
Linguagem de Padrões - Conceito   • “As metas de uma linguagem de padrões          de IHC são compartilhar soluções de    ...
Padrões - BenefíciosFornecimento de um vocabulário decomunicação  Entre a equipe de desenvolvimento    Melhoram a comunica...
Tópicos           I          n          t          r          o          d          u          ç          ã          o   33
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...
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...
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...
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...
Padrões de IHC - CategoriasPadrões para Interação      relacionados com                          preocupações de altoHuman...
Padrões de IHC - CategoriasPadrões para InteraçãoHumano-Computador                             relacionados comPadrões par...
Padrões de IHC - CategoriasPadrões para InteraçãoHumano-Computador                            Expressam como              ...
Principais Trabalhos   Linguagem de Padrões da Tidwell (1998)   Linguagem de Padrões de Borchers (2000) • Linguagem de Pad...
Linguagem de Padrões Common Ground    Autora: Tidwell  – Artigo: Interaction Design Patterns, PLoP 1998.  – Web: http://ww...
Coleção UI Patterns and Techniques    Autora: Tidwell  – Web: http://time-tripper.com/uipatterns    desenvolvimento de int...
A Linguagem de Padrões de Borchers     Autor: Borchers   – Livro: A Pattern Approach to Interaction Design         Contend...
A Coleção de Welie   – Autores: Welie e Trætteberg   – Welie e Trætteberg. Interaction Patterns in User     Interfaces, PL...
A Linguagem de Padrões de Montero et al.   Linguagem de Padrões   – Montero, Lozano, Gonzáles, Ramos. A First     Approach...
Comparação dos Trabalhos                 Linguagem  Coleção                          Linguagem                            ...
Padrão Undo vs. Padrão Memento Undo                                                    Name: Memento                      ...
Padrão Undo vs. Padrão Memento                                                       Implementation: Here are two issues t...
Padrão Undo vs. Padrão Memento               Undo           Memento               (Welie)        (Gamma et al.)Foco       ...
Padrão Undo vs. Padrão Memento• A questão “o padrão Undo do Welie é melhor do  que o padrão Memento do Gamma” está  equivo...
Modelo de Processo do Projeto daInteração (Dearden, 2002) (1/2) 1.   Introdução        O facilitador introduz         –   ...
Modelo de Processo do Projeto daInteração (Dearden, 2002) (2/2)1.   Desenvolvimento da interface       Facilitador guia o ...
Tópicos           54
A Linguagem de Padrões de Montero et al.    Web Sites   Páginas Web   Ornamentais                                         ...
Welcome          56
WelcomeContexto:   Usuário necessita saber onde ele está, o que pode fazer e o            que ele necessita para visitar o...
Indication             58
IndicationContexto:   Os usuários necessitam saber onde eles podem ir e o queProblema: Como os usuários podem saber onde p...
A Linguagem de Padrões de Montero et al.    Web Sites   Páginas Web   Ornamentais                                         ...
Homepage           61
HomepageContexto: Uma página é acessa de várias maneiras, entretanto deve haverProblema:   Como o usuário sabe onde ele es...
Polite         63
PoliteContexto:   As pessoas se diferem amplamente nos termos que utilizamProblema:   Como o usuário acessa o conteúdo da ...
Busy       65
BusyContexto: Downloads podem demorar muito tempo, criando atrasos                  significantes ou podem ser completados...
Form       67
FormContexto:   O usuário tem que fornecer informaçõesProblema:   Como o usuário fornece informações para o proprietário d...
A Linguagem de Padrões de Montero et al.    Web Sites   Páginas Web   Ornamentais                                         ...
Tag Line           70
Tag LineContexto:   É necessário saber a proposta do websiteProblema:   Como o usuário sabe qual o propósito do website? S...
Print        72
PrintContexto:   A leitura de textos num website é diferente da leitura em            textos impressos. A maioria das pess...
Subscription               74
Subscription Contexto: Os usuários não querem visitar o website a todo momento. Eles            desejam saber quando novos...
Colour         76
ColourContexto:   A cor deve ser considerada no início do projeto de um            website.Problema:   Como o usuário pode...
Location           78
LocationContexto:   Quando um usuário chega em um Website, ele precisa                                      saber onde est...
Novelty          80
NoveltyContexto:   Usuários gostam de saber se existem novas            funcionalidades, promoções, ofertas, noticias no W...
Size       82
SizeContexto:   Balanceamento entre gráficos e tempo realProblema:   Como o usuário pode acessar informações de uma forma ...
Dúvidas?           84
Desenvolvimento de Sistemas                Interativos     Integração das Visões de Engenharia de Software e              ...
Upcoming SlideShare
Loading in …5
×

Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web

2,177 views
2,051 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,177
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Colocar padrões de processo e organizacionais, livro PLoPD, livro POAD
  • Nas referências podia fazer igual feito no contexto, ampliar para ver o refinamento da solução através de um outro padrão
  • Nas referências podia fazer igual feito no contexto, ampliar para ver o refinamento da solução através de um outro padrão
  • Nas referências podia fazer igual feito no contexto, ampliar para ver o refinamento da solução através de um outro padrão
  • Existe padrões comuns entre a linguagem e a coleção? Quais?
  • Os níveis de abstração estão nomeados?
  • Colocar um roteiro para a realização da entrevista
  • Colocar um roteiro para a realização da entrevista
  • A Cor da linha dependerá da categoria a qual o padrão pertence, tipo: Web Sites level = Vermelho Web-Pages level = Verde Ornamentation level = Azul (Utilizar essas três cores que já estão na paletinha de cores, pois será utilizado elas em tom pastéis para ficar parecido com o site do IHC) A linha que fica abaixo do título do padrão se iniciará no lado esquerdo do slide e irá até o final do nome do padrão (não até o lado direito). Fundo branco Letras pretas
  • A Cor da linha dependerá da categoria a qual o padrão pertence, tipo: Web Sites level = Vermelho Web-Pages level = Verde Ornamentation level = Azul (Utilizar essas três cores que já estão na paletinha de cores, pois será utilizado elas em tom pastéis para ficar parecido com o site do IHC) A linha que fica abaixo do título do padrão se iniciará no lado esquerdo do slide e irá até o final do nome do padrão (não até o lado direito). Fundo branco Letras pretas
  • A Cor da linha dependerá da categoria a qual o padrão pertence, tipo: Web Sites level = Vermelho Web-Pages level = Verde Ornamentation level = Azul (Utilizar essas três cores que já estão na paletinha de cores, pois será utilizado elas em tom pastéis para ficar parecido com o site do IHC) A linha que fica abaixo do título do padrão se iniciará no lado esquerdo do slide e irá até o final do nome do padrão (não até o lado direito). Fundo branco Letras pretas
  • A Cor da linha dependerá da categoria a qual o padrão pertence, tipo: Web Sites level = Vermelho Web-Pages level = Verde Ornamentation level = Azul (Utilizar essas três cores que já estão na paletinha de cores, pois será utilizado elas em tom pastéis para ficar parecido com o site do IHC) A linha que fica abaixo do título do padrão se iniciará no lado esquerdo do slide e irá até o final do nome do padrão (não até o lado direito). Fundo branco Letras pretas
  • A Cor da linha dependerá da categoria a qual o padrão pertence, tipo: Web Sites level = Vermelho Web-Pages level = Verde Ornamentation level = Azul (Utilizar essas três cores que já estão na paletinha de cores, pois será utilizado elas em tom pastéis para ficar parecido com o site do IHC) A linha que fica abaixo do título do padrão se iniciará no lado esquerdo do slide e irá até o final do nome do padrão (não até o lado direito). Fundo branco Letras pretas
  • A Cor da linha dependerá da categoria a qual o padrão pertence, tipo: Web Sites level = Vermelho Web-Pages level = Verde Ornamentation level = Azul (Utilizar essas três cores que já estão na paletinha de cores, pois será utilizado elas em tom pastéis para ficar parecido com o site do IHC) A linha que fica abaixo do título do padrão se iniciará no lado esquerdo do slide e irá até o final do nome do padrão (não até o lado direito). Fundo branco Letras pretas
  • A Cor da linha dependerá da categoria a qual o padrão pertence, tipo: Web Sites level = Vermelho Web-Pages level = Verde Ornamentation level = Azul (Utilizar essas três cores que já estão na paletinha de cores, pois será utilizado elas em tom pastéis para ficar parecido com o site do IHC) A linha que fica abaixo do título do padrão se iniciará no lado esquerdo do slide e irá até o final do nome do padrão (não até o lado direito). Fundo branco Letras pretas
  • A Cor da linha dependerá da categoria a qual o padrão pertence, tipo: Web Sites level = Vermelho Web-Pages level = Verde Ornamentation level = Azul (Utilizar essas três cores que já estão na paletinha de cores, pois será utilizado elas em tom pastéis para ficar parecido com o site do IHC) A linha que fica abaixo do título do padrão se iniciará no lado esquerdo do slide e irá até o final do nome do padrão (não até o lado direito). Fundo branco Letras pretas
  • A Cor da linha dependerá da categoria a qual o padrão pertence, tipo: Web Sites level = Vermelho Web-Pages level = Verde Ornamentation level = Azul (Utilizar essas três cores que já estão na paletinha de cores, pois será utilizado elas em tom pastéis para ficar parecido com o site do IHC) A linha que fica abaixo do título do padrão se iniciará no lado esquerdo do slide e irá até o final do nome do padrão (não até o lado direito). Fundo branco Letras pretas
  • A Cor da linha dependerá da categoria a qual o padrão pertence, tipo: Web Sites level = Vermelho Web-Pages level = Verde Ornamentation level = Azul (Utilizar essas três cores que já estão na paletinha de cores, pois será utilizado elas em tom pastéis para ficar parecido com o site do IHC) A linha que fica abaixo do título do padrão se iniciará no lado esquerdo do slide e irá até o final do nome do padrão (não até o lado direito). Fundo branco Letras pretas
  • A Cor da linha dependerá da categoria a qual o padrão pertence, tipo: Web Sites level = Vermelho Web-Pages level = Verde Ornamentation level = Azul (Utilizar essas três cores que já estão na paletinha de cores, pois será utilizado elas em tom pastéis para ficar parecido com o site do IHC) A linha que fica abaixo do título do padrão se iniciará no lado esquerdo do slide e irá até o final do nome do padrão (não até o lado direito). Fundo branco Letras pretas
  • A Cor da linha dependerá da categoria a qual o padrão pertence, tipo: Web Sites level = Vermelho Web-Pages level = Verde Ornamentation level = Azul (Utilizar essas três cores que já estão na paletinha de cores, pois será utilizado elas em tom pastéis para ficar parecido com o site do IHC) A linha que fica abaixo do título do padrão se iniciará no lado esquerdo do slide e irá até o final do nome do padrão (não até o lado direito). Fundo branco Letras pretas
  • A Cor da linha dependerá da categoria a qual o padrão pertence, tipo: Web Sites level = Vermelho Web-Pages level = Verde Ornamentation level = Azul (Utilizar essas três cores que já estão na paletinha de cores, pois será utilizado elas em tom pastéis para ficar parecido com o site do IHC) A linha que fica abaixo do título do padrão se iniciará no lado esquerdo do slide e irá até o final do nome do padrão (não até o lado direito). Fundo branco Letras pretas
  • A Cor da linha dependerá da categoria a qual o padrão pertence, tipo: Web Sites level = Vermelho Web-Pages level = Verde Ornamentation level = Azul (Utilizar essas três cores que já estão na paletinha de cores, pois será utilizado elas em tom pastéis para ficar parecido com o site do IHC) A linha que fica abaixo do título do padrão se iniciará no lado esquerdo do slide e irá até o final do nome do padrão (não até o lado direito). Fundo branco Letras pretas
  • A Cor da linha dependerá da categoria a qual o slide pertence. Depois definimos alternando as cores. Vermelho = Verde = Azul = (Utilizar essas três cores que já estão na paletinha de cores, pois será utilizado elas em tom pastéis para ficar parecido com o site do IHC) A linha que fica abaixo do título do padrão se iniciará no lado esquerdo do slide e irá até o final do tópico (não até o lado direito). Fundo branco Letras pretas
  • Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web

    1. 1. Desenvolvimento de Sistemas Interativos Integração das Visões de Engenharia de Software e Interação Humano-Computador Padrões para Projetos WEBAmerico Talarico Neto Júnia Coutinho Anacleto SilvaAndré Constantino da Silva Rosângela A. Dellosso Penteado Maio/2005
    2. 2. 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 2
    3. 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 Arte Apresentação de um conjunto de Padrões para projetos WEB 3
    4. 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 4
    5. 5. Padrões – HistóricoEngenharia de Software (1/2)1987 – Primeiro provável uso de padrões na ES – Object-Oriented Programming, Systems and Applications (OOPSLA) em 1987 Beck e Cunningham (projeto da interface com o usuário em Smalltalk) Abordou os conceitos de Design Participativo.1994 – Primeira Conferência Pattern Languages of Programming (PloP) Apresentar, trocar e refinar os padrões e as linguagens de padrões para programas de computador.1995 Publicaçã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 5
    6. 6. Padrões – HistóricoEngenharia de Software (2/2)1995 – Publicação do primeiro livro da série Pattern Languages of Program Design, reunindo padrões publicados no PLoP 1995 1996 1997 19991996 – Publicação do livro Pattern-Oriented Software Architecture, Volume 1: A System of Patterns, de Buschmann, Meunier, Rohnert, Sommerlad e Stal2004 – Publicação do livro Organizational Patterns of Agile Software Development de Coplien e Harrison 6
    7. 7. Padrões – HistóricoInteração Humano-Computador1999 – Common Ground: a Pattern Language for Human-Computer Interface Design, de Jennifer Tidwell2001 – A Pattern Approach to Interaction Design de Jan Borchers – Padrões para interfaces GUI (Grafical User Interface) de Welie e Troetteberg2003 Welie 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 7
    8. 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 Arte Apresentação de um conjunto de Padrões para projetos WEB 8
    9. 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)” 9
    10. 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 10
    11. 11. Padrões - Características É importante saber Padrões não são criados ou inventados Eles são identificados por um princípio de invariância Sã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” 11
    12. 12. Padrões – Formato (1/2)O formato de apresentação dos Padrões édividida em um conjunto de elementosDiversos formatos existentes Alexander GoF Não existe um formato certo Coplien ou errado Welie Tidwell Formato utilizado dependerá Coad da ênfase que o autor deseja Fowler dar ao padrão ... 12
    13. 13. Padrões – Formato (2/2)Segundo Meszaros e Doble (1996) Mínimo Nome do Padrão Problema Solução Contexto Forças Opcionais Contexto Resultante Padrões Relacionados Exemplos Exemplos de Código Raciocínio Apelidos Agradecimentos 13
    14. 14. Padrões – Formato (2/2)Segundo Meszaros e Doble (1996) Mínimo Nome do Padrão Problema Solução A ordem de apresentação Contexto dos elementos não é fixa Forças e pode variar Opcionais Contexto Resultante Padrões Relacionados Exemplos Exemplos de Código Raciocínio Apelidos Agradecimentos 14
    15. 15. Padrões – Formato (2/2)Segundo Meszaros e Doble (1996) Mínimo Nome do Padrão Problema Solução Contexto Forças Os elementos opcionais Opcionais devem ser escolhidos Contexto Resultante Padrões Relacionados pelo autor Exemplos Exemplos de Código São para tornar a Raciocínio compreensão do padrão Apelidos mais fácil ou para Agradecimentos relacionar os padrões 15
    16. 16. Formato de Apresentação de Alexander 16
    17. 17. Formato de Apresentação de Alexander Número Nome Confiança Ilustração Contexto Resumo do Problema Problema Detalhado 17
    18. 18. Formato de Apresentação de Alexander Solução Diagrama Referências 18
    19. 19. Formato de Apresentação de Gamma et al. Name: Memento Nome Intent: Without violating encapsulation, capture and externalize an Intenção objects internal state so that the object can be restored to this state later. Also Known As: Token Conhecido como Motivation: Sometimes its necessary to record the internal state of an object. This is required when implementing checkpoints and undo mechanisms … Motivação Applicability: Use the Memento pattern when: Aplicabilidade a snapshot of (some portion of) an objects state must be saved so that it can be restored to that state later, and …. Structure: Estrutura 19
    20. 20. Formato de Apresentação de Gamma et al. Participants: Memento (SolverState) Participantes Originator (ConstraintSolver) Caretaker (undo mechanism) Colaborações 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: Consequências Consequences: The Memento pattern has several consequences Preserving encapsulation boundaries. Memento avoids exposing information that only an originator should manage but that must be stored nevertheless outside the originator... 20
    21. 21. Formato de Apresentação de Gamma et al.Implementation: Here are two issues to consider when implementing theMemento pattern:class State; Implementação class Originator { public: Memento* CreateMemento(); void SetMemento(const Memento*); // ... private: State* _state; // internal data structures // ... }; class Memento { Note a natureza técnica public: // narrow public interface destes tipos de padrões. virtual ~Memento(); private: Não existe entendimento // private members accessible only to Originator friend class Originator; pelo usuário final leigo Memento(); em computação. void SetState(State*); State* GetState();private: State* _state;}; 21
    22. 22. Formato de Apresentação de Gamma et al.Sample Code: class MoveCommand { Código Exemplo public: MoveCommand(Graphic* target, const Point& delta); void Execute(); void Unexecute(); private: ConstraintSolverMemento* _state; Point _delta; Graphic* _target; }; Usos conhecidosKnown Uses:The preceding sample code is based on Unidraws support forconnectivity through its CSolver class [VL90].Related Patterns:Command (233): Commands can use mementos to maintain state forundoable operations. PadrõesIterator (257): Mementos can be used for iteration as described earlier. Relacionados 22
    23. 23. Formato de Apresentação de Welie 23
    24. 24. Formato de Apresentação de Welie Nome Autor Problema PrincípioContextoInfluências/ MotivaçãoSoluçãoRaciocínio 24
    25. 25. Formato de Apresentação de Welie Exemplos Usos Conhecidos PadrõesRelacionados Implementação 25
    26. 26. Linguagem de Padrões - Conceito“Uma Linguagem de Padrões nada mais é do que uma (Alexander, 1977) 26
    27. 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 27
    28. 28. Linguagem de Padrões – Exemplo A Linguagem de Padrões de Borchers 28
    29. 29. Linguagem de Padrões - Conceito• “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 29
    30. 30. Linguagem de Padrões - Conceito • “As metas de uma linguagem de padrões de IHC são compartilhar soluções de projeto IHC de sucesso entre colegas daMeta 1 á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
    31. 31. Linguagem de Padrões - Conceito • “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 queMeta 2 esteja envolvido no projeto, desenvolvimento, avaliação ou uso do sistema interativo.” Inclusive o usuário do sistema INTERACT’99 31
    32. 32. Padrões - BenefíciosFornecimento de um vocabulário decomunicação Entre a equipe de desenvolvimento Melhoram 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 melhorCaptura de experiência Transferência de conhecimentos entre pessoas com níveis de experiência diferentes 32
    33. 33. Tópicos  I n t r o d u ç ã o 33
    34. 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 34
    35. 35. 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
    36. 36. 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 36
    37. 37. 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 37
    38. 38. Padrões de IHC - CategoriasPadrões para Interação relacionados com preocupações de altoHumano-Computador nível, e algumas vezes com guidelines, envolvendo a psicologia do usuárioPadrões para Interface Ex.: Navigable Spacecom o UsuárioPadrões para Avaliaçãode Usabilidade 38
    39. 39. Padrões de IHC - CategoriasPadrões para InteraçãoHumano-Computador relacionados comPadrões para Interface problemas de interação específicos e suacom o Usuário solução é baseada em componentes de interface com o usuárioPadrões para Avaliação Ex.: Liquid Layoutde Usabilidade 39
    40. 40. Padrões de IHC - CategoriasPadrões para InteraçãoHumano-Computador Expressam como conduzir o processo de avaliação dePadrões para Interface usabilidade, auxiliam a planejar e executar acom o Usuário avaliação e editar e avaliar os dados coletadosPadrões para Avaliação Ex.: Linguagem dede Usabilidade padrões para avaliação de usabilidade de Gellner e Forbrig 40
    41. 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) 41
    42. 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 42
    43. 43. Coleção UI Patterns and Techniques Autora: Tidwell – Web: http://time-tripper.com/uipatterns desenvolvimento de interfaces com o usuário 40 Padrões Divisão dos padrões em categorias Formato do Padrão: Nome Exemplo • Usando quando (Used When) • Porquê (Why) • Como (How) Exemplos Alguns padrões foram identificados e não escritos 43
    44. 44. A Linguagem de Padrões de Borchers Autor: Borchers – Livro: A Pattern Approach to Interaction Design Contendo 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 quiosques Como 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 44
    45. 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 45
    46. 46. A Linguagem de Padrões de Montero et al. Linguagem de Padrões – Montero, 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 46
    47. 47. Comparação dos Trabalhos Linguagem Coleção Linguagem Linguagem Coleções de Common de Motero et Ground UI Patterns de Borchers Welie al. Número de 60 40 17 122 23 PadrõesUniformidade parcial parcial total parcial totalOrganização Linguagem Coleção Linguagem Coleção Linguagem Propósito Interação Interface Interação GUI, Web e Web (Desktop ou com Móveis Web) QuiosquesDisponibiliza- Artigo* Web Livro, Web Artigo ção Web Web*Padrões não sim sim não não não escritos?*Não contém todos os padrões do autor 47
    48. 48. Padrão Undo vs. Padrão Memento Undo Name: Memento Intent: Without violating encapsulation, capture and Author Martijn van Welie externalize an objects internal state so that the object can be restored to this state later. Problem Users may do actions they later want reverse. Also Known As: Token Motivation: Sometimes its necessary to record the Principle Error Management (Safety) internal state of an object. This is required when implementing checkpoints and undo mechanisms 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 Applicability: Use the Memento pattern when: application but do not want to be "punished" when a snapshot of (some portion of) an objects state selecting unwanted functions. must be saved so that it can be restored to that •Some actions may have side effects that cannot state later, and …. be undone by the application. •Often users want to reverse several actions Structure: 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... 48
    49. 49. Padrão Undo vs. Padrão Memento Implementation: Here are two issues to consider Examples when implementing the Memento pattern: class State; class Originator { public: Memento* CreateMemento(); void SetMemento(const Memento*); // ... private: State* _state; // internal data structures // ... 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 class Memento { described and the users can select a range of public: actions to be undo. After selecting undo, users can // narrow public interface even redo the actions. virtual ~Memento(); private: Known Uses Most office applications; Word, // private members accessible only to WordPerfect, CorelDraw Originator friend class Originator; Related Patterns Consider the WARNING pattern Memento(); for commands that have side effects that cannot be undone. void SetState(State*); State* GetState(); Implementation private: State* _state; }; 49
    50. 50. Padrão Undo vs. Padrão Memento Undo Memento (Welie) (Gamma et al.)Foco Descrição da objetos que funcionalidade dispõem a funcionalidadeLeitores Usuários e Engenheiros de projetistas Software OOFormato Ênfase na Ênfase nos descrição da diagramas e funcionalidade implementação 50
    51. 51. Padrão Undo vs. Padrão Memento• 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 diferentes Cada visão é importante em uma parte do projeto projeto de desenvolvimento É importante usarmos padrões das duas áreas em conjunto 51
    52. 52. Modelo de Processo do Projeto daInteração (Dearden, 2002) (1/2) 1. Introdução O facilitador introduz – o que são os padrões – Para que servem – Como podem auxiliar o trabalho – Formato 2. Leitura dos Padrões O facilitador solicita que o usuário leia um padrão de cada vez Facilitador pergunta se o usuário entendeu todos os termos Facilitador pergunta ao usuário sobre o que ele entendeu sobre o padrão Facilitador tira as dúvidas do usuário 52
    53. 53. Modelo de Processo do Projeto daInteração (Dearden, 2002) (2/2)1. Desenvolvimento da interface Facilitador guia o usuário no desenvolvimento da interface Foque uma tela por vez Permita ao usuário manipular os padrões Ao terminar uma tela, facilitador verifica se a tela satisfaz as diretivas dos padrões utilizados4. 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. 53
    54. 54. Tópicos  54
    55. 55. A Linguagem de Padrões de Montero et al. Web Sites Páginas Web Ornamentais 55
    56. 56. Welcome 56
    57. 57. WelcomeContexto: Usuário necessita saber onde ele está, o que pode fazer e o que ele necessita para visitar o lugarProblema: Como o usuário sabe onde ele está? Solução: 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) 57
    58. 58. Indication 58
    59. 59. IndicationContexto: Os usuários necessitam saber onde eles podem ir e o queProblema: Como os usuários podem saber onde podem ir e o que eles acharão lá? Solução: Forneça o mecanismo necessário (links significantes) que per mit am qu alq uer us uár io mo ver 59
    60. 60. A Linguagem de Padrões de Montero et al. Web Sites Páginas Web Ornamentais 60
    61. 61. Homepage 61
    62. 62. HomepageContexto: Uma página é acessa de várias maneiras, entretanto deve haverProblema: Como o usuário sabe onde ele está? Solução: Forneça uma página inicial onde o usuário se sinta como • Permita ao usuário utilizar retornos caso esteja • Layout do site coloca importante informações no topo da • Incluir logos (Tagline), mecanismos de busca (Search) e 62
    63. 63. Polite 63
    64. 64. PoliteContexto: As pessoas se diferem amplamente nos termos que utilizamProblema: Como o usuário acessa o conteúdo da página de modo Solução: Use a linguagem apropriada de modo mais simples e clara • 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 64
    65. 65. Busy 65
    66. 66. BusyContexto: Downloads podem demorar muito tempo, criando atrasos significantes ou podem ser completados de modos diferentesProblema: Como o usuário sabe quando suas operações terminaram? Solução: 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) 66
    67. 67. Form 67
    68. 68. FormContexto: O usuário tem que fornecer informaçõesProblema: Como o usuário fornece informações para o proprietário do Solução: Forneça “brancos” apropriados para serem preenchidos, • Em algumas ocasiões, um formulário pode ocupar uma • O usuário necessita saber se sua submissão foi 68
    69. 69. A Linguagem de Padrões de Montero et al. Web Sites Páginas Web Ornamentais 69
    70. 70. Tag Line 70
    71. 71. Tag LineContexto: É necessário saber a proposta do websiteProblema: Como o usuário sabe qual o propósito do website? Solução: Forneça um slogan ou imagem que identifique o website e • Resumida, simples e direta • Inclua uma descrição do site na janela do navegador 71
    72. 72. Print 72
    73. 73. PrintContexto: 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 palavraProblema: Como o usuário pode conseguir uma impressão adequada da informação? Solução: Forneça a informação de diversas maneiras e formatos e dê a possibilidade de imprimir ou salvar documentos grandes. 73
    74. 74. Subscription 74
    75. 75. Subscription Contexto: Os usuários não querem visitar o website a todo momento. Eles desejam saber quando novos produtos ou novidades aparecem.Problema: Como o usuário pode ficar sabendo de informações significativas para ele? Solução: 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). 75
    76. 76. Colour 76
    77. 77. ColourContexto: A cor deve ser considerada no início do projeto de um website.Problema: Como o usuário pode acessar informações de uma forma adequada?Solução: 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 77
    78. 78. Location 78
    79. 79. LocationContexto: Quando um usuário chega em um Website, ele precisa saber onde está.Problema: Como o usuário sabe onde está ou qual é a sessão que ele está?Solução: Forneça informação sobre a localização do usuário no 79
    80. 80. Novelty 80
    81. 81. NoveltyContexto: Usuários gostam de saber se existem novas funcionalidades, promoções, ofertas, noticias no WebsiteProblema: Como o usuário pode saber das novidades e ultimas notícias do website? Solução: Forneça sugestões e novidades do website de uma maneira 81
    82. 82. Size 82
    83. 83. SizeContexto: Balanceamento entre gráficos e tempo realProblema: Como o usuário pode acessar informações de uma forma adequada? Solução: 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 83
    84. 84. Dúvidas? 84
    85. 85. Desenvolvimento de Sistemas Interativos Integração das Visões de Engenharia de Software e Interação Humano-Computador Padrões para Projetos WEBAmerico Talarico Neto Júnia Coutinho Anacleto SilvaAndré Constantino da Silva Rosângela A. Dellosso Penteado Maio/2005

    ×