Júnia Coutinho Anacleto Silva Rosângela A. Dellosso Penteado

Apresentação em tema: "Júnia Coutinho Anacleto Silva Rosângela A. Dellosso Penteado"— Transcrição da apresentação:

1 Júnia Coutinho Anacleto Silva Rosângela A. Dellosso Penteado
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 André Constantino da Silva Júnia Coutinho Anacleto 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

3 Tópicos Introdução e Histórico Conceito de Padrões
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

4 Padrões – Histórico (Arquitetura)
Início na Arquitetura com o trabalho de Christopher Alexander “A Pattern Language”, 1977 Apresenta 253 padrões para arquitetura e urbanismo São organizados em uma “Linguagem de Padrões”, que permite o relacionamento entre os padrões “The Timeless Way of Building ”, 1979 Explica os conceitos envolvidos em padrões O “porquê” da utilização de padrões “The Oregon Experiment”, 1988 Utilização de padrões em um projeto concreto de arquitetura na Universidade de Oregon

5 Padrões – Histó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 Colocar padrões de processo e organizacionais, livro PLoPD, livro POAD

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 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 1995 1996 1997 1999

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

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

9 Padrões - Conceito Não existe uma definição amplamente aceita
Baseado nas definições encontradas na literatura, considera-se um padrão “Solução (Experiência, Comprovada) para um Problema (Recorrente) em um determinado Contexto (Instâncias)”

10 Padrões - Características
Alexander estudou as interações entre a forma física das construções e a maneira que essa forma tem impacto nos comportamentos pessoal e social Características dos Padrões Permitir aos usuários leigos, os habitantes, a capacidade de projetar seus ambientes Descrevem aspectos do ambiente físico. Pessoas interagem e vivem nesse ambiente Necessitam ser anotados, testados, e gradativamente melhorados

11 Padrões - Características
É importante 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”

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 Coplien Welie Tidwell Coad Fowler ... Não existe um formato certo ou errado Formato utilizado dependerá da ênfase que o autor deseja dar ao padrão

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

14 A ordem de apresentação dos elementos não é fixa e pode variar
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 A ordem de apresentação dos elementos não é fixa e pode variar

15 Os elementos opcionais devem ser escolhidos pelo autor
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 Os elementos opcionais devem ser escolhidos pelo autor São para tornar a compreensão do padrão mais fácil ou para relacionar os padrões

16 Formato de Apresentação de Alexander
Nas referências podia fazer igual feito no contexto, ampliar para ver o refinamento da solução através de um outro padrão

17 Formato de Apresentação de Alexander
Número Nome Confiança Ilustração Contexto Resumo do Problema Nas referências podia fazer igual feito no contexto, ampliar para ver o refinamento da solução através de um outro padrão Problema Detalhado

18 Formato de Apresentação de Alexander
Solução Nas referências podia fazer igual feito no contexto, ampliar para ver o refinamento da solução através de um outro padrão Diagrama Referências

19 Formato de Apresentação de Gamma et al.
Nome Name: Memento Intent: Without violating encapsulation, capture and externalize an object's internal state so that the object can be restored to this state later. Also Known As: Token Motivation: Sometimes it's necessary to record the internal state of an object. This is required when implementing checkpoints and undo mechanisms … Applicability: Use the Memento pattern when: a snapshot of (some portion of) an object's state must be saved so that it can be restored to that state later, and …. Structure: Intenção Conhecido como Motivação Aplicabilidade Estrutura

20 Formato de Apresentação de Gamma et al.
Participants: Memento (SolverState) Originator (ConstraintSolver) Caretaker (undo mechanism) Collaborations: A caretaker requests a memento from an originator, holds it for a time, and passes it back to the originator, as the following interaction diagram illustrates: Consequences: The Memento pattern has several consequences Preserving encapsulation boundaries. Memento avoids exposing information that only an originator should manage but that must be stored nevertheless outside the originator... Participantes Colaborações Consequências

21 Formato de Apresentação de Gamma et al.
Implementation: Here are two issues to consider when implementing the Memento pattern: class State; class Originator { public: Memento* CreateMemento(); void SetMemento(const Memento*); // ... private: State* _state; // internal data structures }; class Memento { // narrow public interface virtual ~Memento(); // private members accessible only to Originator friend class Originator; Memento(); void SetState(State*); State* GetState(); State* _state; Implementação Note a natureza técnica destes tipos de padrões. Não existe entendimento pelo usuário final leigo em computação.

22 Formato de Apresentação de Gamma et al.
Sample Code: class MoveCommand { public: MoveCommand(Graphic* target, const Point& delta); void Execute(); void Unexecute(); private: ConstraintSolverMemento* _state; Point _delta; Graphic* _target; }; Known Uses: The preceding sample code is based on Unidraw's support for connectivity through its CSolver class [VL90]. Related Patterns: Command (233): Commands can use mementos to maintain state for undoable operations. Iterator (257): Mementos can be used for iteration as described earlier. Código Exemplo Usos conhecidos Padrões Relacionados

23 Formato de Apresentação de Welie

24 Formato de Apresentação de Welie
Nome Autor Problema Princípio Contexto Influências/ Motivação Solução Raciocínio

25 Formato de Apresentação de Welie
Exemplos Usos Conhecidos Padrões Relacionados Implementação

26 Linguagem de Padrões - Conceito
“Uma Linguagem de Padrões nada mais é do que uma maneira precisa de descrever a experiência de alguém... é a representação de um principio repetitivo em um bom projeto de interação através de um conjunto de padrões hierarquicamente estruturados e inter-relacionados que são criados para guiar o projetista pelos vários níveis de abstração através do processo...” (Alexander, 1977)

27 Linguagem de Padrões - Formato
Segundo Meszaros e Doble (1996) Divide o problema geral e sua solução complexa em um número de problemas relacionados com suas respectivas soluções Cada par problema/solução será um Padrão É bom que contenha: Nome evocativo Descrição do problema geral Sumário que apresente os padrões Padrões devem estar relacionados, especialmente nos elementos Contexto e Padrões Relacionados

28 Linguagem de Padrões – Exemplo
A Linguagem de Padrões de Borchers

29 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

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 esteja envolvido no projeto, desenvolvimento, avaliação ou uso do sistema interativo.” INTERACT’99 Meta 1

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

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

33 Tópicos Introdução e Histórico Conceito de Padrões
Padrões em IHC – Estado da Arte Conceitos de Padrões em IHC Principais Trabalhos em IHC Comparação dos Trabalhos Apresentação de um conjunto de Padrões para projetos WEB

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

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

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

39 Padrões de IHC - Categorias
Padrões para Interação Humano-Computador Padrões para Interface com o Usuário Padrões para Avaliação de Usabilidade relacionados com problemas de interação específicos e sua solução é baseada em componentes de interface com o usuário Ex.: Liquid Layout

40 Padrões de IHC - Categorias
Padrões para Interação Humano-Computador Padrões para Interface com o Usuário Padrões para Avaliação de Usabilidade Expressam como conduzir o processo de avaliação de usabilidade, auxiliam a planejar e executar a avaliação e editar e avaliar os dados coletados Ex.: Linguagem de padrões para avaliação de usabilidade de Gellner e Forbrig

41 Principais Trabalhos Linguagem de Padrões da Tidwell (1998)
Linguagem de Padrões de Borchers (2000) Linguagem de Padrões de Montero et al. (2002) Coleção de Padrões da Tidwell (2003) Coleções de Padrões de Welie (2003)

42 Linguagem de Padrões Common Ground
Autora: Tidwell Artigo: Interaction Design Patterns, PLoP 1998. Web: Padrões para projeto de interação entre humanos e qualquer tipo de artefato 60 padrões identificados Pioneirismo Mais conhecido e mais usado Escolha dos padrões: Através de perguntas que estão relacionadas com o contexto do padrão Alguns padrões foram identificados e não escritos

43 Coleção UI Patterns and Techniques
Autora: Tidwell Web: 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 Existe padrões comuns entre a linguagem e a coleção? Quais?

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: 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 Os níveis de abstração estão nomeados?

45 A Coleção de Welie Autores: Welie e Trætteberg
Welie e Trætteberg. Interaction Patterns in User Interfaces, PLoP 2000. Web: Padrões para projeto de interfaces para: Web: 89 padrões GUI: 26 padrões Dispositivos Móveis: 7 padrões Divide os padrões em categorias

46 A Linguagem de Padrões de Montero et al.
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

47 Comparação dos Trabalhos
Linguagem Common Ground Coleção UI Patterns Linguagem de Borchers Coleções de Welie Linguagem de Motero et al. Número de Padrões 60 40 17 122 23 Uniformidade parcial total Organização Linguagem Propósito Interação (Desktop ou Web) Interface com o Usuário Interação com Quiosques GUI, Web e Móveis Web Disponibiliza-ção Artigo* Livro, Web* Artigo Padrões não escritos? sim não *Não contém todos os padrões do autor

48 Padrão Undo vs. Padrão Memento
Name: Memento Intent: Without violating encapsulation, capture and externalize an object's internal state so that the object can be restored to this state later. Also Known As: Token Motivation: Sometimes it's necessary to record the internal state of an object. This is required when implementing checkpoints and undo mechanisms … Applicability: Use the Memento pattern when: a snapshot of (some portion of) an object's state must be saved so that it can be restored to that state later, and …. Structure: Undo Author Martijn van Welie Problem Users may do actions they later want reverse. Principle Error Management (Safety) Context Most applications where restoring the state after an erroneous action is relatively hard to do by hand e.g. when it requires several actions. Forces Users typically explore functionality of an application but do not want to be "punished" when selecting unwanted functions. Some actions may have side effects that cannot be undone by the application. Often users want to reverse several actions instead of just the last action. Solution Let the users reverse their last actions. Maintain a queue of executed commands and allow the user to undo at least the last couple of actions. Show the history of commands so that users know...

49 Padrão Undo vs. Padrão Memento
Implementation: Here are two issues to consider when implementing the Memento pattern: class State; class Originator { public: Memento* CreateMemento(); void SetMemento(const Memento*); // ... private: State* _state; // internal data structures }; class Memento { // narrow public interface virtual ~Memento(); // private members accessible only to Originator friend class Originator; Memento(); void SetState(State*); State* GetState(); State* _state; Examples As in all MS Office applications, in Word 2000 the users can see the history of their actions and undo one or more of them. The actions are briefly described and the users can select a range of actions to be undo. After selecting undo, users can even redo the actions. Known Uses Most office applications; Word, WordPerfect, CorelDraw Related Patterns Consider the WARNING pattern for commands that have side effects that cannot be undone. Implementation

50 Padrão Undo vs. Padrão Memento
(Welie) Memento (Gamma et al.) Foco Descrição da funcionalidade objetos que dispõem a funcionalidade Leitores Usuários e projetistas Engenheiros de Software OO Formato Ênfase na descrição da funcionalidade Ênfase nos diagramas e implementação

51 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

52 Modelo de Processo do Projeto da Interação (Dearden, 2002) (1/2)
Introdução O facilitador introduz o que são os padrões Para que servem Como podem auxiliar o trabalho Formato 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 Colocar um roteiro para a realização da entrevista

53 Modelo de Processo do Projeto da Interação (Dearden, 2002) (2/2)
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. Colocar um roteiro para a realização da entrevista

54 Tópicos Introdução e Histórico Conceito de Padrões
Padrões em IHC – Estado da Arte Apresentação de um conjunto de Padrões para projetos WEB A Linguagem de Padrões de Montero et al.

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

56 Welcome

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)

58 Indication

59 Indication Contexto: Os usuários necessitam saber onde eles podem ir e o que eles podem fazer a partir do ponto onde estão 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 permitam qualquer usuário mover de um lugar para outros lugares Forneça informações de feedback sobre sua localização Possibilite o retorno (Second Chance) para um lugar seguro (Homepage) Links importantes podem ser colocados no alto da página Etiquetas de Links descritivas poderiam ser utilizados (Polite) Se utilizar Frames, coloque um título em cada um

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

61 Homepage

62 Homepage Como o usuário sabe onde ele está?
Contexto: Uma página é acessa de várias maneiras, entretanto deve haver um ponto de referência, que responda questões como quem? O que? Quando? Onde? Problema: Como o usuário sabe onde ele está? Solução: Forneça uma página inicial onde o usuário se sinta como “estivesse em casa” Permita ao usuário utilizar retornos caso esteja desorientado Layout do site coloca importante informações no topo da página (Novelty) Incluir logos (Tagline), mecanismos de busca (Search) e informações para contato (Subscription, Contact Us, About This)

63 Polite

64 Polite Contexto: As pessoas se diferem amplamente nos termos que utilizam para descrever conceitos Problema: Como o usuário acessa o conteúdo da página de modo simples e apropriado? Use a linguagem apropriada de modo mais simples e clara para o conteúdo do site Use etiquetas associadas com seus controles (Indication) Expresse uma idéia em cada sentença (Tagline) Use métodos (como os do Design Participativo e Classificação de Cartões) que envolvam o usuário Solução:

65 Busy

66 Busy Como o usuário sabe quando suas operações terminaram?
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)

67 Form

68 Form O usuário tem que fornecer informações
Contexto: O usuário tem que fornecer informações Problema: Como o usuário fornece informações para o proprietário do web site? Solução: Forneça “brancos” apropriados para serem preenchidos, com indicativo claro e correto de qual informação deve ser fornecida Em algumas ocasiões, um formulário pode ocupar uma página completa O usuário necessita saber se sua submissão foi corretamente processada

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

70 Tag Line 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

71 Tag Line É necessário saber a proposta do website
Contexto: É necessário saber a proposta do website Problema: Como o usuário sabe qual o propósito do website? 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 Solução: Forneça um slogan ou imagem que identifique o website e seu propósito. Resumida, simples e direta Inclua uma descrição do site na janela do navegador

72 Print 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

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? 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 Solução: Forneça a informação de diversas maneiras e formatos e dê a possibilidade de imprimir ou salvar documentos grandes.

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

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? 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 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 não será divulgado a todos (Secret).

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

77 Colour A cor deve ser considerada no início do projeto de um website.
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? 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 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

78 Location 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

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á? 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 Solução: Forneça informação sobre a localização do usuário no website.

80 Novelty 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

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? 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 Solução: Forneça sugestões e novidades do website de uma maneira limpa e intuitiva.

82 Size 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

83 Size Balanceamento entre gráficos e tempo real
Contexto: Balanceamento entre gráficos e tempo real Problema: Como o usuário pode acessar informações de uma forma adequada? Solução: 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 Forneça a informação usando cores adequadas nas fontes, fundos de tela e páginas. Animações, imagens e arquivos longos devem ser fornecidas sob demanda. Tamanho de página, rolagem e tamanho de fontes são importantes

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

85 Júnia Coutinho Anacleto Silva Rosângela A. Dellosso Penteado
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 André Constantino da Silva Júnia Coutinho Anacleto Silva Rosângela A. Dellosso Penteado Maio/2005