SlideShare uma empresa Scribd logo
Desenvolvimento de Sistemas
                Interativos
     Integração das Visões de Engenharia de Software e
              Interação Humano-Computador
                       Padrões para Projetos WEB



Americo Talarico Neto                          Júnia Coutinho Anacleto Silva
André Constantino da Silva                   Rosângela A. Dellosso Penteado

                                Maio/2005
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
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
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
Padrões – Histórico
Engenharia 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
Padrões – Histórico
Engenharia 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   1999
1996
 – Publicação do livro Pattern-Oriented Software Architecture,
   Volume 1: A System of Patterns, de Buschmann, Meunier,
   Rohnert, Sommerlad e Stal


2004
 – Publicação do livro Organizational Patterns of Agile
   Software Development de Coplien e Harrison
                                                                    6
Padrões – Histórico
Interação Humano-Computador



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


2001
 – A Pattern Approach to Interaction Design de Jan Borchers
 – Padrões para interfaces GUI (Grafical User Interface) de
   Welie e Troetteberg


2003
   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
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
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
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
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
Padrões – Formato (1/2)

O formato de apresentação dos Padrões é
dividida em um conjunto de elementos
Diversos 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
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
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
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
Formato de Apresentação de Alexander




                                       16
Formato de Apresentação de Alexander
 Número    Nome
                          Confiança

             Ilustração               Contexto




                                           Resumo do
                                            Problema




                                           Problema
                                           Detalhado 17
Formato de Apresentação de Alexander


              Solução




                    Diagrama

                                Referências




                                              18
Formato de Apresentação de Gamma et al.

 Name: Memento               Nome
 Intent: Without violating encapsulation, capture and externalize an            Intenção
 object's internal state so that the object can be restored to this state
 later.
 Also Known As: Token               Conhecido como

 Motivation: Sometimes it's 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 object's state must be saved so that it
 can be restored to that state later, and ….
 Structure:


                                                                        Estrutura


                                                                                             19
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
Formato de Apresentação de Gamma et al.
Implementation: Here are two issues to consider when implementing the
Memento 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
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 conhecidos
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.                                                         Padrões
Iterator (257): Mementos can be used for iteration as described earlier.   Relacionados


                                                                                      22
Formato de Apresentação de Welie




                                   23
Formato de Apresentação de Welie
               Nome   Autor   Problema


                              Princípio

Contexto


Influências/
 Motivação


Solução



Raciocínio


                                          24
Formato de Apresentação de Welie



    Exemplos

         Usos
      Conhecidos
  Padrões
Relacionados




               Implementação

                                      25
Linguagem de Padrões - Conceito


“Uma Linguagem de Padrões nada mais é do que uma




                                  (Alexander, 1977)




                                                      26
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
Linguagem de Padrões – Exemplo




                 A Linguagem de Padrões de Borchers


                                                 28
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
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
Meta 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
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
Meta 2           esteja envolvido no projeto,
         desenvolvimento, avaliação ou uso do
                       sistema interativo.”
   Inclusive o usuário
       do sistema                       INTERACT’99
                                                      31
Padrões - Benefícios

Fornecimento de um vocabulário de
comunicaçã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 melhor
Captura de experiência
    Transferência de conhecimentos entre pessoas
    com níveis de experiência diferentes
                                                    32
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
  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
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

• “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
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
Padrões de IHC - Categorias

Padrões para Interação      relacionados com
                          preocupações de alto
Humano-Computador        nível, e algumas vezes
                             com guidelines,
                              envolvendo a
                          psicologia do usuário
Padrões para Interface
                         Ex.: Navigable Space
com o Usuário

Padrões para Avaliação
de Usabilidade

                                                38
Padrões de IHC - Categorias

Padrões para Interação
Humano-Computador
                             relacionados com
Padrões para Interface   problemas de interação
                             específicos e sua
com o Usuário             solução é baseada em
                             componentes de
                         interface com o usuário

Padrões para Avaliação     Ex.: Liquid Layout
de Usabilidade

                                                39
Padrões de IHC - Categorias

Padrões para Interação
Humano-Computador
                            Expressam como
                         conduzir o processo de
                              avaliação de
Padrões para Interface   usabilidade, auxiliam a
                          planejar e executar a
com o Usuário              avaliação e editar e
                            avaliar os dados
                                coletados
Padrões para Avaliação     Ex.: Linguagem de
de Usabilidade           padrões para avaliação
                           de usabilidade de
                            Gellner e Forbrig
                                               40
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
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
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
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
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
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
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ões
Uniformidade         parcial    parcial        total      parcial       total
Organizaçã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)                  Quiosques




Disponibiliza-     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
Padrão Undo vs. Padrão Memento
 Undo                                                    Name: Memento
                                                         Intent: Without violating encapsulation, capture and
 Author Martijn van Welie                                externalize an object's 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 it's 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 object's 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
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
Padrão Undo vs. Padrão Memento

               Undo           Memento
               (Welie)        (Gamma et al.)

Foco        Descrição da      objetos que
           funcionalidade      dispõem a
                            funcionalidade
Leitores    Usuários e      Engenheiros de
            projetistas      Software OO
Formato      Ênfase na        Ênfase nos
            descrição da     diagramas e
           funcionalidade   implementação

                                               50
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
Modelo de Processo do Projeto da
Interaçã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
Modelo de Processo do Projeto da
Interaçã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 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.



                                                              53
Tópicos



 




          54
A Linguagem de Padrões de Montero et al.
    Web Sites   Páginas Web   Ornamentais




                                            55
Welcome




          56
Welcome
Contexto:   Usuário necessita saber onde ele está, o que pode fazer e o
            que ele necessita para visitar o lugar
Problema:   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
Indication




             58
Indication
Contexto:   Os usuários necessitam saber onde eles podem ir e o que

Problema: 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
A Linguagem de Padrões de Montero et al.
    Web Sites   Páginas Web   Ornamentais




                                            60
Homepage




           61
Homepage
Contexto: Uma página é acessa de várias maneiras, entretanto deve haver


Problema:   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
Polite




         63
Polite

Contexto:   As pessoas se diferem amplamente nos termos que utilizam

Problema:   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
Busy




       65
Busy
Contexto: Downloads podem demorar muito tempo, criando atrasos
                  significantes ou podem ser completados de modos
                  diferentes

Problema:   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
Form




       67
Form
Contexto:   O usuário tem que fornecer informações

Problema:   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
A Linguagem de Padrões de Montero et al.
    Web Sites   Páginas Web   Ornamentais




                                            69
Tag Line




           70
Tag Line
Contexto:   É necessário saber a proposta do website


Problema:   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
Print




        72
Print
Contexto:   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:   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
Subscription




               74
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
Colour




         76
Colour
Contexto:   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
Location




           78
Location
Contexto:   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
Novelty




          80
Novelty

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


Problema:   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
Size




       82
Size
Contexto:   Balanceamento entre gráficos e tempo real

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 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
Dúvidas?



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



Americo Talarico Neto                          Júnia Coutinho Anacleto Silva
André Constantino da Silva                   Rosângela A. Dellosso Penteado

                                Maio/2005

Mais conteúdo relacionado

Mais procurados

Mini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos MóveisMini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos Móveis
Jane Vita
 
Stored Procedures and Triggers
Stored Procedures and TriggersStored Procedures and Triggers
Stored Procedures and Triggers
flaviognm
 
Metodologia Ágil
Metodologia ÁgilMetodologia Ágil
Metodologia Ágil
Alex Vieira, MBA
 
Engenharia de Requisitos
Engenharia de RequisitosEngenharia de Requisitos
Engenharia de Requisitos
Estêvão Bissoli Saleme
 
Aula 1 - Introdução ao Conteúdo de Banco de Dados
Aula 1 - Introdução ao Conteúdo de Banco de DadosAula 1 - Introdução ao Conteúdo de Banco de Dados
Aula 1 - Introdução ao Conteúdo de Banco de Dados
Henrique Nunweiler
 
Plano de aula sobre HTML básico
Plano de aula sobre HTML básicoPlano de aula sobre HTML básico
Plano de aula sobre HTML básico
Silvio Sales do Nascimento Júnior
 
Treinamento de SQL Básico
Treinamento de SQL BásicoTreinamento de SQL Básico
Treinamento de SQL Básico
Igor Alves
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos Móveis
Instituto Faber-Ludens
 
Padrões de Projeto - Design Patterns e Anti-Patterns
Padrões de Projeto - Design Patterns e Anti-PatternsPadrões de Projeto - Design Patterns e Anti-Patterns
Padrões de Projeto - Design Patterns e Anti-Patterns
Rodrigo Kono
 
Uml diagrama de atividades
Uml   diagrama de atividadesUml   diagrama de atividades
Uml diagrama de atividades
Jordan Oliveira
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
Gabriel Moura
 
Princípios Básicos do Design de Sistemas Interativos
Princípios Básicos do Design de Sistemas InterativosPrincípios Básicos do Design de Sistemas Interativos
Princípios Básicos do Design de Sistemas Interativos
Wellington Oliveira
 
Desenvolvimento de sistemas embarcados
Desenvolvimento de sistemas embarcadosDesenvolvimento de sistemas embarcados
Desenvolvimento de sistemas embarcados
Alexandre Augusto Giron
 
Banco de dados
Banco de dadosBanco de dados
Banco de dados
Albert Belchior
 
Especificação de Requisitos de Software
Especificação de Requisitos de SoftwareEspecificação de Requisitos de Software
Especificação de Requisitos de Software
Ralph Rassweiler
 
Aula 1 - Introdução ao Mobile
Aula 1 - Introdução ao MobileAula 1 - Introdução ao Mobile
Aula 1 - Introdução ao Mobile
Cloves da Rocha
 
Banco de Dados II Aula 07 - Linguagem de Consulta SQL (Comandos DDL)
Banco de Dados II Aula 07 - Linguagem de Consulta SQL (Comandos DDL)Banco de Dados II Aula 07 - Linguagem de Consulta SQL (Comandos DDL)
Banco de Dados II Aula 07 - Linguagem de Consulta SQL (Comandos DDL)
Leinylson Fontinele
 
Front End x Back End
Front End x Back EndFront End x Back End
Front End x Back End
Tatiane Aguirres Nogueira
 
O Scratch no ensino da programação
O Scratch no ensino da programaçãoO Scratch no ensino da programação
O Scratch no ensino da programação
João Sá
 
Programacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de EnsinodocProgramacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de Ensinodoc
DESIGN DIGITAL UNIARA 2012
 

Mais procurados (20)

Mini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos MóveisMini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos Móveis
 
Stored Procedures and Triggers
Stored Procedures and TriggersStored Procedures and Triggers
Stored Procedures and Triggers
 
Metodologia Ágil
Metodologia ÁgilMetodologia Ágil
Metodologia Ágil
 
Engenharia de Requisitos
Engenharia de RequisitosEngenharia de Requisitos
Engenharia de Requisitos
 
Aula 1 - Introdução ao Conteúdo de Banco de Dados
Aula 1 - Introdução ao Conteúdo de Banco de DadosAula 1 - Introdução ao Conteúdo de Banco de Dados
Aula 1 - Introdução ao Conteúdo de Banco de Dados
 
Plano de aula sobre HTML básico
Plano de aula sobre HTML básicoPlano de aula sobre HTML básico
Plano de aula sobre HTML básico
 
Treinamento de SQL Básico
Treinamento de SQL BásicoTreinamento de SQL Básico
Treinamento de SQL Básico
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos Móveis
 
Padrões de Projeto - Design Patterns e Anti-Patterns
Padrões de Projeto - Design Patterns e Anti-PatternsPadrões de Projeto - Design Patterns e Anti-Patterns
Padrões de Projeto - Design Patterns e Anti-Patterns
 
Uml diagrama de atividades
Uml   diagrama de atividadesUml   diagrama de atividades
Uml diagrama de atividades
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Princípios Básicos do Design de Sistemas Interativos
Princípios Básicos do Design de Sistemas InterativosPrincípios Básicos do Design de Sistemas Interativos
Princípios Básicos do Design de Sistemas Interativos
 
Desenvolvimento de sistemas embarcados
Desenvolvimento de sistemas embarcadosDesenvolvimento de sistemas embarcados
Desenvolvimento de sistemas embarcados
 
Banco de dados
Banco de dadosBanco de dados
Banco de dados
 
Especificação de Requisitos de Software
Especificação de Requisitos de SoftwareEspecificação de Requisitos de Software
Especificação de Requisitos de Software
 
Aula 1 - Introdução ao Mobile
Aula 1 - Introdução ao MobileAula 1 - Introdução ao Mobile
Aula 1 - Introdução ao Mobile
 
Banco de Dados II Aula 07 - Linguagem de Consulta SQL (Comandos DDL)
Banco de Dados II Aula 07 - Linguagem de Consulta SQL (Comandos DDL)Banco de Dados II Aula 07 - Linguagem de Consulta SQL (Comandos DDL)
Banco de Dados II Aula 07 - Linguagem de Consulta SQL (Comandos DDL)
 
Front End x Back End
Front End x Back EndFront End x Back End
Front End x Back End
 
O Scratch no ensino da programação
O Scratch no ensino da programaçãoO Scratch no ensino da programação
O Scratch no ensino da programação
 
Programacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de EnsinodocProgramacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de Ensinodoc
 

Destaque

PACT: um framework para o design de sistemas interativos
PACT: um framework para o design de sistemas interativosPACT: um framework para o design de sistemas interativos
PACT: um framework para o design de sistemas interativos
Wellington Oliveira
 
Acessibilidade em sistemas de informação centrados no usuário
Acessibilidade em sistemas de informação centrados no usuárioAcessibilidade em sistemas de informação centrados no usuário
Acessibilidade em sistemas de informação centrados no usuário
Alan Vasconcelos
 
Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)
DesignCarminatti
 
Computação vestivel
Computação vestivelComputação vestivel
Computação vestivel
Eduardo Schaefer
 
Padrões de Projeto
Padrões de ProjetoPadrões de Projeto
Padrões de Projeto
Vagner Santana
 
Arquitetura de Software
Arquitetura de SoftwareArquitetura de Software
Arquitetura de Software
Marcelo Yamaguti
 
Palestr aceuma terapia
Palestr aceuma terapiaPalestr aceuma terapia
Palestr aceuma terapia
Sergio Queiroz
 
Cultura clima e sua interface com os processos de mudanca pv
Cultura clima e sua interface com os processos de mudanca pvCultura clima e sua interface com os processos de mudanca pv
Cultura clima e sua interface com os processos de mudanca pv
Ildécio Gomes
 
Gerência de Projetos de Software - Aula1
Gerência de Projetos de Software - Aula1Gerência de Projetos de Software - Aula1
Gerência de Projetos de Software - Aula1
Adson Cunha, MSc, PMP®
 
Apresentação tema clima organizacional by janísio salomão
Apresentação tema clima organizacional   by janísio salomãoApresentação tema clima organizacional   by janísio salomão
Apresentação tema clima organizacional by janísio salomão
Janísio Salomao
 
A importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de softwareA importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de software
Flavia Negrao
 
O Gerenciamento de Recursos Humanos aplicado à Gestão de Projetos como ferram...
O Gerenciamento de Recursos Humanos aplicado à Gestão de Projetos como ferram...O Gerenciamento de Recursos Humanos aplicado à Gestão de Projetos como ferram...
O Gerenciamento de Recursos Humanos aplicado à Gestão de Projetos como ferram...
Cristiane Okuta
 
Projeto WEB - P1 Resumo
Projeto WEB - P1 ResumoProjeto WEB - P1 Resumo
Projeto WEB - P1 Resumo
Renato Melo
 
Interface Homem Computador - Aula04 - Principios da Gestalt
Interface Homem Computador - Aula04 - Principios da GestaltInterface Homem Computador - Aula04 - Principios da Gestalt
Interface Homem Computador - Aula04 - Principios da Gestalt
CEULJI/ULBRA Centro Universitário Luterano de Ji-Paraná
 
Projeções e sistemas de representação
Projeções e sistemas de representaçãoProjeções e sistemas de representação
Projeções e sistemas de representação
Hiran Ferreira Lira
 
Desenho Técnico (Projecoes)
Desenho Técnico (Projecoes)Desenho Técnico (Projecoes)
Desenho Técnico (Projecoes)
UFPR
 
8862194 apostila-arranjo-fisico
8862194 apostila-arranjo-fisico8862194 apostila-arranjo-fisico
8862194 apostila-arranjo-fisico
Antonio Tadeu Meneses
 
Apostila estradas de rodagem i
Apostila estradas de rodagem iApostila estradas de rodagem i
Planejamento Visual na Diagramação
Planejamento Visual na DiagramaçãoPlanejamento Visual na Diagramação
Planejamento Visual na Diagramação
Renato Melo
 
Aula Gestão da Produção e Logística: Arranjo Físico
Aula Gestão da Produção e Logística: Arranjo FísicoAula Gestão da Produção e Logística: Arranjo Físico
Aula Gestão da Produção e Logística: Arranjo Físico
Wilian Gatti Jr
 

Destaque (20)

PACT: um framework para o design de sistemas interativos
PACT: um framework para o design de sistemas interativosPACT: um framework para o design de sistemas interativos
PACT: um framework para o design de sistemas interativos
 
Acessibilidade em sistemas de informação centrados no usuário
Acessibilidade em sistemas de informação centrados no usuárioAcessibilidade em sistemas de informação centrados no usuário
Acessibilidade em sistemas de informação centrados no usuário
 
Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)
 
Computação vestivel
Computação vestivelComputação vestivel
Computação vestivel
 
Padrões de Projeto
Padrões de ProjetoPadrões de Projeto
Padrões de Projeto
 
Arquitetura de Software
Arquitetura de SoftwareArquitetura de Software
Arquitetura de Software
 
Palestr aceuma terapia
Palestr aceuma terapiaPalestr aceuma terapia
Palestr aceuma terapia
 
Cultura clima e sua interface com os processos de mudanca pv
Cultura clima e sua interface com os processos de mudanca pvCultura clima e sua interface com os processos de mudanca pv
Cultura clima e sua interface com os processos de mudanca pv
 
Gerência de Projetos de Software - Aula1
Gerência de Projetos de Software - Aula1Gerência de Projetos de Software - Aula1
Gerência de Projetos de Software - Aula1
 
Apresentação tema clima organizacional by janísio salomão
Apresentação tema clima organizacional   by janísio salomãoApresentação tema clima organizacional   by janísio salomão
Apresentação tema clima organizacional by janísio salomão
 
A importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de softwareA importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de software
 
O Gerenciamento de Recursos Humanos aplicado à Gestão de Projetos como ferram...
O Gerenciamento de Recursos Humanos aplicado à Gestão de Projetos como ferram...O Gerenciamento de Recursos Humanos aplicado à Gestão de Projetos como ferram...
O Gerenciamento de Recursos Humanos aplicado à Gestão de Projetos como ferram...
 
Projeto WEB - P1 Resumo
Projeto WEB - P1 ResumoProjeto WEB - P1 Resumo
Projeto WEB - P1 Resumo
 
Interface Homem Computador - Aula04 - Principios da Gestalt
Interface Homem Computador - Aula04 - Principios da GestaltInterface Homem Computador - Aula04 - Principios da Gestalt
Interface Homem Computador - Aula04 - Principios da Gestalt
 
Projeções e sistemas de representação
Projeções e sistemas de representaçãoProjeções e sistemas de representação
Projeções e sistemas de representação
 
Desenho Técnico (Projecoes)
Desenho Técnico (Projecoes)Desenho Técnico (Projecoes)
Desenho Técnico (Projecoes)
 
8862194 apostila-arranjo-fisico
8862194 apostila-arranjo-fisico8862194 apostila-arranjo-fisico
8862194 apostila-arranjo-fisico
 
Apostila estradas de rodagem i
Apostila estradas de rodagem iApostila estradas de rodagem i
Apostila estradas de rodagem i
 
Planejamento Visual na Diagramação
Planejamento Visual na DiagramaçãoPlanejamento Visual na Diagramação
Planejamento Visual na Diagramação
 
Aula Gestão da Produção e Logística: Arranjo Físico
Aula Gestão da Produção e Logística: Arranjo FísicoAula Gestão da Produção e Logística: Arranjo Físico
Aula Gestão da Produção e Logística: Arranjo Físico
 

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

Padrões De Projeto e Anti Patterns
Padrões De Projeto e Anti PatternsPadrões De Projeto e Anti Patterns
Padrões De Projeto e Anti Patterns
Herval Freire
 
Padroes De Projeto
Padroes De ProjetoPadroes De Projeto
Padroes De Projeto
ejdn1
 
Padrões de Projeto de Software
Padrões de Projeto de SoftwarePadrões de Projeto de Software
Padrões de Projeto de Software
Fabio Moura Pereira
 
Padrões de design orientado a objetos
Padrões de design orientado a objetosPadrões de design orientado a objetos
Padrões de design orientado a objetos
Glauco Vinicius Argentino de Oliveira
 
pec-12-patterns-intro.ppt
pec-12-patterns-intro.pptpec-12-patterns-intro.ppt
pec-12-patterns-intro.ppt
ssuser7025cf
 
Engenharia de Software II - Aula 9
Engenharia de Software II - Aula 9Engenharia de Software II - Aula 9
Engenharia de Software II - Aula 9
Alessandro Almeida
 
Intro padroesprojetoadaptertemplateobserver
Intro padroesprojetoadaptertemplateobserverIntro padroesprojetoadaptertemplateobserver
Intro padroesprojetoadaptertemplateobserver
Eduardo Jorge
 
Padrões de projeto
Padrões de projetoPadrões de projeto
Padrões de projeto
Rodrigo Caetano
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
Glaucio Scheibel
 
Reutilização
ReutilizaçãoReutilização
Reutilização
emjorge
 
Modelagem 21102006_1
Modelagem 21102006_1Modelagem 21102006_1
Modelagem 21102006_1
LEANDRO DE SOUZA RAMOS
 
DCI com PHP
DCI com PHPDCI com PHP
DCI com PHP
Flávio Lisboa
 
Travalho versao final
Travalho versao finalTravalho versao final
Travalho versao final
Thiago Antonius
 
Padrões de projeto - Adapter, Proxy, Composite e Bridge
Padrões de projeto - Adapter, Proxy, Composite e BridgePadrões de projeto - Adapter, Proxy, Composite e Bridge
Padrões de projeto - Adapter, Proxy, Composite e Bridge
Lorran Pegoretti
 
design patterns - introdução
design patterns - introduçãodesign patterns - introdução
design patterns - introdução
elliando dias
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
Leonardo Lucas Lana
 
POO2-Pre-32-PadroesProjetos_.pdf
POO2-Pre-32-PadroesProjetos_.pdfPOO2-Pre-32-PadroesProjetos_.pdf
POO2-Pre-32-PadroesProjetos_.pdf
AndreCosta502039
 
UMLIntro.pptx
UMLIntro.pptxUMLIntro.pptx
UMLIntro.pptx
RicardoMarciano5
 
Padrões de projeto
Padrões de projetoPadrões de projeto
Padrões de projeto
Alex Pinheiro Das Graças
 
Apresentação Introdução Design Patterns
Apresentação Introdução Design PatternsApresentação Introdução Design Patterns
Apresentação Introdução Design Patterns
Lucas Simões Maistro
 

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

Padrões De Projeto e Anti Patterns
Padrões De Projeto e Anti PatternsPadrões De Projeto e Anti Patterns
Padrões De Projeto e Anti Patterns
 
Padroes De Projeto
Padroes De ProjetoPadroes De Projeto
Padroes De Projeto
 
Padrões de Projeto de Software
Padrões de Projeto de SoftwarePadrões de Projeto de Software
Padrões de Projeto de Software
 
Padrões de design orientado a objetos
Padrões de design orientado a objetosPadrões de design orientado a objetos
Padrões de design orientado a objetos
 
pec-12-patterns-intro.ppt
pec-12-patterns-intro.pptpec-12-patterns-intro.ppt
pec-12-patterns-intro.ppt
 
Engenharia de Software II - Aula 9
Engenharia de Software II - Aula 9Engenharia de Software II - Aula 9
Engenharia de Software II - Aula 9
 
Intro padroesprojetoadaptertemplateobserver
Intro padroesprojetoadaptertemplateobserverIntro padroesprojetoadaptertemplateobserver
Intro padroesprojetoadaptertemplateobserver
 
Padrões de projeto
Padrões de projetoPadrões de projeto
Padrões de projeto
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
 
Reutilização
ReutilizaçãoReutilização
Reutilização
 
Modelagem 21102006_1
Modelagem 21102006_1Modelagem 21102006_1
Modelagem 21102006_1
 
DCI com PHP
DCI com PHPDCI com PHP
DCI com PHP
 
Travalho versao final
Travalho versao finalTravalho versao final
Travalho versao final
 
Padrões de projeto - Adapter, Proxy, Composite e Bridge
Padrões de projeto - Adapter, Proxy, Composite e BridgePadrões de projeto - Adapter, Proxy, Composite e Bridge
Padrões de projeto - Adapter, Proxy, Composite e Bridge
 
design patterns - introdução
design patterns - introduçãodesign patterns - introdução
design patterns - introdução
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
 
POO2-Pre-32-PadroesProjetos_.pdf
POO2-Pre-32-PadroesProjetos_.pdfPOO2-Pre-32-PadroesProjetos_.pdf
POO2-Pre-32-PadroesProjetos_.pdf
 
UMLIntro.pptx
UMLIntro.pptxUMLIntro.pptx
UMLIntro.pptx
 
Padrões de projeto
Padrões de projetoPadrões de projeto
Padrões de projeto
 
Apresentação Introdução Design Patterns
Apresentação Introdução Design PatternsApresentação Introdução Design Patterns
Apresentação Introdução Design Patterns
 

Mais de André Constantino da Silva

Introdução ao TelEduc
Introdução ao TelEducIntrodução ao TelEduc
Introdução ao TelEduc
André Constantino da Silva
 
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
André Constantino da Silva
 
Aula sobre texto academico - elaboração do desenvolvimento
Aula sobre texto academico - elaboração do desenvolvimentoAula sobre texto academico - elaboração do desenvolvimento
Aula sobre texto academico - elaboração do desenvolvimento
André Constantino da Silva
 
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuáriosAula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
André Constantino da Silva
 
Aula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de Usuário
André Constantino da Silva
 
Como fazer citações e referências bibliográficas
Como fazer citações e referências bibliográficasComo fazer citações e referências bibliográficas
Como fazer citações e referências bibliográficas
André Constantino da Silva
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
André Constantino da Silva
 
Aula 3 - Fatores Humanos
Aula 3 - Fatores HumanosAula 3 - Fatores Humanos
Aula 3 - Fatores Humanos
André Constantino da Silva
 
Aula 2 - A área de IHC
Aula 2 - A área de IHCAula 2 - A área de IHC
Aula 2 - A área de IHC
André Constantino da Silva
 
Aula 1 - Apresentação da Disciplina
Aula 1 - Apresentação da DisciplinaAula 1 - Apresentação da Disciplina
Aula 1 - Apresentação da Disciplina
André Constantino da Silva
 
Introdução ao ambiente virtual de aprendizagem TelEduc
Introdução ao ambiente virtual de aprendizagem TelEducIntrodução ao ambiente virtual de aprendizagem TelEduc
Introdução ao ambiente virtual de aprendizagem TelEduc
André Constantino da Silva
 
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHCAula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
André Constantino da Silva
 
Aula 4 Fatores Humanos - parte 1 - Disciplina de IHC
Aula 4   Fatores Humanos - parte 1 - Disciplina de IHCAula 4   Fatores Humanos - parte 1 - Disciplina de IHC
Aula 4 Fatores Humanos - parte 1 - Disciplina de IHC
André Constantino da Silva
 
Aula 3 – A áera de IHC
Aula 3 – A áera de IHCAula 3 – A áera de IHC
Aula 3 – A áera de IHC
André Constantino da Silva
 
InkBlog: A Pen-Based Blog Tool for e-Learning Environments
InkBlog: A Pen-Based Blog Tool for e-Learning EnvironmentsInkBlog: A Pen-Based Blog Tool for e-Learning Environments
InkBlog: A Pen-Based Blog Tool for e-Learning Environments
André Constantino da Silva
 
Aula 3
Aula 3Aula 3
Aula 2 final
Aula 2 finalAula 2 final
Aula 1 final
Aula 1 finalAula 1 final
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de RepetiçãoAula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
André Constantino da Silva
 
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
André Constantino da Silva
 

Mais de André Constantino da Silva (20)

Introdução ao TelEduc
Introdução ao TelEducIntrodução ao TelEduc
Introdução ao TelEduc
 
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
 
Aula sobre texto academico - elaboração do desenvolvimento
Aula sobre texto academico - elaboração do desenvolvimentoAula sobre texto academico - elaboração do desenvolvimento
Aula sobre texto academico - elaboração do desenvolvimento
 
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuáriosAula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
 
Aula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de Usuário
 
Como fazer citações e referências bibliográficas
Como fazer citações e referências bibliográficasComo fazer citações e referências bibliográficas
Como fazer citações e referências bibliográficas
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
 
Aula 3 - Fatores Humanos
Aula 3 - Fatores HumanosAula 3 - Fatores Humanos
Aula 3 - Fatores Humanos
 
Aula 2 - A área de IHC
Aula 2 - A área de IHCAula 2 - A área de IHC
Aula 2 - A área de IHC
 
Aula 1 - Apresentação da Disciplina
Aula 1 - Apresentação da DisciplinaAula 1 - Apresentação da Disciplina
Aula 1 - Apresentação da Disciplina
 
Introdução ao ambiente virtual de aprendizagem TelEduc
Introdução ao ambiente virtual de aprendizagem TelEducIntrodução ao ambiente virtual de aprendizagem TelEduc
Introdução ao ambiente virtual de aprendizagem TelEduc
 
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHCAula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
 
Aula 4 Fatores Humanos - parte 1 - Disciplina de IHC
Aula 4   Fatores Humanos - parte 1 - Disciplina de IHCAula 4   Fatores Humanos - parte 1 - Disciplina de IHC
Aula 4 Fatores Humanos - parte 1 - Disciplina de IHC
 
Aula 3 – A áera de IHC
Aula 3 – A áera de IHCAula 3 – A áera de IHC
Aula 3 – A áera de IHC
 
InkBlog: A Pen-Based Blog Tool for e-Learning Environments
InkBlog: A Pen-Based Blog Tool for e-Learning EnvironmentsInkBlog: A Pen-Based Blog Tool for e-Learning Environments
InkBlog: A Pen-Based Blog Tool for e-Learning Environments
 
Aula 3
Aula 3Aula 3
Aula 3
 
Aula 2 final
Aula 2 finalAula 2 final
Aula 2 final
 
Aula 1 final
Aula 1 finalAula 1 final
Aula 1 final
 
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de RepetiçãoAula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
 
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
 

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

  • 1. Desenvolvimento de Sistemas Interativos Integração das Visões de Engenharia de Software e Interação Humano-Computador Padrões para Projetos WEB Americo Talarico Neto Júnia Coutinho Anacleto Silva André Constantino da Silva Rosângela A. Dellosso Penteado Maio/2005
  • 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. 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. 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. Padrões – Histórico Engenharia 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. Padrões – Histórico Engenharia 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 1999 1996 – Publicação do livro Pattern-Oriented Software Architecture, Volume 1: A System of Patterns, de Buschmann, Meunier, Rohnert, Sommerlad e Stal 2004 – Publicação do livro Organizational Patterns of Agile Software Development de Coplien e Harrison 6
  • 7. Padrões – Histórico Interação Humano-Computador 1999 – Common Ground: a Pattern Language for Human-Computer Interface Design, de Jennifer Tidwell 2001 – A Pattern Approach to Interaction Design de Jan Borchers – Padrões para interfaces GUI (Grafical User Interface) de Welie e Troetteberg 2003 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. 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. 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. 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. 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. Padrões – Formato (1/2) O formato de apresentação dos Padrões é dividida em um conjunto de elementos Diversos 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. 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. 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. 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. Formato de Apresentação de Alexander 16
  • 17. Formato de Apresentação de Alexander Número Nome Confiança Ilustração Contexto Resumo do Problema Problema Detalhado 17
  • 18. Formato de Apresentação de Alexander Solução Diagrama Referências 18
  • 19. Formato de Apresentação de Gamma et al. Name: Memento Nome Intent: Without violating encapsulation, capture and externalize an Intenção object's internal state so that the object can be restored to this state later. Also Known As: Token Conhecido como Motivation: Sometimes it's 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 object's state must be saved so that it can be restored to that state later, and …. Structure: Estrutura 19
  • 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. Formato de Apresentação de Gamma et al. Implementation: Here are two issues to consider when implementing the Memento 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. 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 conhecidos 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. Padrões Iterator (257): Mementos can be used for iteration as described earlier. Relacionados 22
  • 24. Formato de Apresentação de Welie Nome Autor Problema Princípio Contexto Influências/ Motivação Solução Raciocínio 24
  • 25. Formato de Apresentação de Welie Exemplos Usos Conhecidos Padrões Relacionados Implementação 25
  • 26. Linguagem de Padrões - Conceito “Uma Linguagem de Padrões nada mais é do que uma (Alexander, 1977) 26
  • 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. Linguagem de Padrões – Exemplo A Linguagem de Padrões de Borchers 28
  • 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. 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 Meta 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. 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 Meta 2 esteja envolvido no projeto, desenvolvimento, avaliação ou uso do sistema interativo.” Inclusive o usuário do sistema INTERACT’99 31
  • 32. Padrões - Benefícios Fornecimento de um vocabulário de comunicaçã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 melhor Captura de experiência Transferência de conhecimentos entre pessoas com níveis de experiência diferentes 32
  • 33. Tópicos  I n t r o d u ç ã o 33
  • 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. 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. 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. 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. Padrões de IHC - Categorias Padrões para Interação relacionados com preocupações de alto Humano-Computador nível, e algumas vezes com guidelines, envolvendo a psicologia do usuário Padrões para Interface Ex.: Navigable Space com o Usuário Padrões para Avaliação de Usabilidade 38
  • 39. Padrões de IHC - Categorias Padrões para Interação Humano-Computador relacionados com Padrões para Interface problemas de interação específicos e sua com o Usuário solução é baseada em componentes de interface com o usuário Padrões para Avaliação Ex.: Liquid Layout de Usabilidade 39
  • 40. Padrões de IHC - Categorias Padrões para Interação Humano-Computador Expressam como conduzir o processo de avaliação de Padrões para Interface usabilidade, auxiliam a planejar e executar a com o Usuário avaliação e editar e avaliar os dados coletados Padrões para Avaliação Ex.: Linguagem de de Usabilidade padrões para avaliação de usabilidade de Gellner e Forbrig 40
  • 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. 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. 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. 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. 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. 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. 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ões Uniformidade parcial parcial total parcial total Organizaçã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) Quiosques Disponibiliza- 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. Padrão Undo vs. Padrão Memento Undo Name: Memento Intent: Without violating encapsulation, capture and Author Martijn van Welie externalize an object's 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 it's 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 object's 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. 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. Padrão Undo vs. Padrão Memento Undo Memento (Welie) (Gamma et al.) Foco Descrição da objetos que funcionalidade dispõem a funcionalidade Leitores Usuários e Engenheiros de projetistas Software OO Formato Ênfase na Ênfase nos descrição da diagramas e funcionalidade implementação 50
  • 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. Modelo de Processo do Projeto da Interaçã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. Modelo de Processo do Projeto da Interaçã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 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. 53
  • 55. A Linguagem de Padrões de Montero et al. Web Sites Páginas Web Ornamentais 55
  • 56. Welcome 56
  • 57. Welcome Contexto: Usuário necessita saber onde ele está, o que pode fazer e o que ele necessita para visitar o lugar Problema: 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
  • 59. Indication Contexto: Os usuários necessitam saber onde eles podem ir e o que Problema: 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. A Linguagem de Padrões de Montero et al. Web Sites Páginas Web Ornamentais 60
  • 61. Homepage 61
  • 62. Homepage Contexto: Uma página é acessa de várias maneiras, entretanto deve haver Problema: 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. Polite 63
  • 64. Polite Contexto: As pessoas se diferem amplamente nos termos que utilizam Problema: 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. Busy 65
  • 66. Busy Contexto: Downloads podem demorar muito tempo, criando atrasos significantes ou podem ser completados de modos diferentes Problema: 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. Form 67
  • 68. Form Contexto: O usuário tem que fornecer informações Problema: 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. A Linguagem de Padrões de Montero et al. Web Sites Páginas Web Ornamentais 69
  • 70. Tag Line 70
  • 71. Tag Line Contexto: É necessário saber a proposta do website Problema: 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. Print 72
  • 73. Print Contexto: 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: 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
  • 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. Colour 76
  • 77. Colour Contexto: 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. Location 78
  • 79. Location Contexto: 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. Novelty 80
  • 81. Novelty Contexto: Usuários gostam de saber se existem novas funcionalidades, promoções, ofertas, noticias no Website Problema: 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. Size 82
  • 83. Size Contexto: Balanceamento entre gráficos e tempo real 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 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. Dúvidas? 84
  • 85. Desenvolvimento de Sistemas Interativos Integração das Visões de Engenharia de Software e Interação Humano-Computador Padrões para Projetos WEB Americo Talarico Neto Júnia Coutinho Anacleto Silva André Constantino da Silva Rosângela A. Dellosso Penteado Maio/2005

Notas do Editor

  1. Colocar padrões de processo e organizacionais, livro PLoPD, livro POAD
  2. Nas referências podia fazer igual feito no contexto, ampliar para ver o refinamento da solução através de um outro padrão
  3. Nas referências podia fazer igual feito no contexto, ampliar para ver o refinamento da solução através de um outro padrão
  4. Nas referências podia fazer igual feito no contexto, ampliar para ver o refinamento da solução através de um outro padrão
  5. Existe padrões comuns entre a linguagem e a coleção? Quais?
  6. Os níveis de abstração estão nomeados?
  7. Colocar um roteiro para a realização da entrevista
  8. Colocar um roteiro para a realização da entrevista
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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