desenvolvimento de sistemas interativos - integração das visões de engenharia de software e...
TRANSCRIPT
![Page 1: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/1.jpg)
Desenvolvimento de Sistemas Interativos
Integração das Visões de Engenharia de Software e Interação Humano-Computador
Padrões para Projetos WEB
Júnia Coutinho Anacleto SilvaRosângela A. Dellosso Penteado
Maio/2005
Americo Talarico NetoAndré Constantino da Silva
![Page 2: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/2.jpg)
2
Tópicos
Introdução e Histórico Conceito de Padrões Padrões em IHC – Estado da ArteApresentação de um conjunto de Padrões para projetos WEB
![Page 3: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/3.jpg)
3
Tópicos
Introdução e Histórico Padrões na Arquitetura Padrões na Engenharia de Software Padrões na Interação Humano-Computador
Conceito de Padrões Padrões em IHC – Estado da ArteApresentação de um conjunto de Padrões para projetos WEB
![Page 4: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/4.jpg)
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
![Page 5: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/5.jpg)
5
Padrões – HistóricoEngenharia de Software (1/2)
1987Primeiro provável uso de padrões na ESObject-Oriented Programming, Systems and Applications (OOPSLA) em 1987Beck e Cunningham (projeto da interface com o usuário em Smalltalk)Abordou os conceitos de Design Participativo.
1994Primeira Conferência Pattern Languages of Programming (PloP) Apresentar, trocar e refinar os padrões e as linguagens de padrões para programas de computador.
1995Publicação do livro “Design Patterns: Elements of Reusable Object-Oriented Software” de Gamma, Helm, Johnson e Vlissides(GoF)Livro contendo uma coleção de padrões para o projeto de software Orientado a Objetos Fornece aos engenheiros de software uma forma mais prática de transferir sua experiência adquirida em projetos anteriores
![Page 6: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/6.jpg)
6
Padrões – HistóricoEngenharia de Software (2/2)
1995Publicação do primeiro livro da série Pattern Languages of Program Design, reunindo padrões publicados no PLoP
1996Publicação do livro Pattern-Oriented Software Architecture, Volume 1: A System of Patterns, de Buschmann, Meunier, Rohnert, Sommerlad e Stal
2004Publicação do livro Organizational Patterns of Agile Software Development de Coplien e Harrison
1995
1999
1996
1997
![Page 7: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/7.jpg)
7
Padrões – HistóricoInteração Humano-Computador
1999Common Ground: a Pattern Language for Human-Computer Interface Design, de Jennifer Tidwell
2001A Pattern Approach to Interaction Design de Jan Borchers
Padrões para interfaces GUI (Grafical User Interface) de Welie e Troetteberg
2003Welie divulga mais padrões para interfaces GUI, e padrões para interfaces Web e para interfaces de sistemas móveis
User Interface Patterns And Techniques de Jennifer Tidwell
![Page 8: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/8.jpg)
8
Tópicos
Introdução e Histórico Conceito de Padrões
Conceitos nos diversos domínios de aplicação Formato de Apresentação dos padrões Linguagens de padrões Características e benefícios dos padrões
Padrões em IHC – Estado da ArteApresentação de um conjunto de Padrões para projetos WEB
![Page 9: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/9.jpg)
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)”
![Page 10: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/10.jpg)
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
![Page 11: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/11.jpg)
11
Padrões - Características
É importante saberPadrões não são criados ou inventadosEles são identificados por um princípio de invariânciaSão uma ferramenta útil para registrar as experiências de projetos
Qualidade Sem Nome“verdade essencial que satisfaz as necessidades humanas e inclui aspectos como perfeição, harmonia e adaptabilidade”
![Page 12: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/12.jpg)
12
Padrões – Formato (1/2)
O formato de apresentação dos Padrões é dividida em um conjunto de elementosDiversos formatos existentes
AlexanderGoFCoplienWelieTidwellCoadFowler...
Não existe um formato certo ou errado
Formato utilizado dependerá da ênfase que o autor deseja
dar ao padrão
![Page 13: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/13.jpg)
13
Padrões – Formato (2/2)
Segundo Meszaros e Doble (1996)Mínimo
Nome do PadrãoProblemaSoluçãoContextoForças
OpcionaisContexto ResultantePadrões RelacionadosExemplosExemplos de CódigoRaciocínioApelidosAgradecimentos
![Page 14: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/14.jpg)
14
Padrões – Formato (2/2)
Segundo Meszaros e Doble (1996)Mínimo
Nome do PadrãoProblemaSoluçãoContextoForças
OpcionaisContexto ResultantePadrões RelacionadosExemplosExemplos de CódigoRaciocínioApelidosAgradecimentos
A ordem de apresentação dos elementos não é fixa
e pode variar
![Page 15: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/15.jpg)
15
Padrões – Formato (2/2)
Segundo Meszaros e Doble (1996)Mínimo
Nome do PadrãoProblemaSoluçãoContextoForças
OpcionaisContexto ResultantePadrões RelacionadosExemplosExemplos de CódigoRaciocínioApelidosAgradecimentos
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
![Page 16: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/16.jpg)
17
Formato de Apresentação de AlexanderNúmeroNúmero NomeNome
ConfiançaConfiança
IlustraçãoIlustração ContextoContexto
Resumo do Problema
Resumo do Problema
ProblemaDetalhadoProblemaDetalhado
![Page 17: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/17.jpg)
18
Formato de Apresentação de Alexander
SoluçãoSolução
DiagramaDiagrama
ReferênciasReferências
![Page 18: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/18.jpg)
19
Name: Memento
Intent: Without violating encapsulation, capture and externalize an object's internal state so that the object can be restored to this state later.
Also Known As: Token
Motivation: Sometimes it's necessary to record the internal state of an object. This is required when implementing checkpoints and undo mechanisms …
Applicability: Use the Memento pattern when:
a snapshot of (some portion of) an object's state must be saved so that it can be restored to that state later, and ….
Structure:
Formato de Apresentação de Gamma et al.
NomeNome
IntençãoIntenção
Conhecido comoConhecido como
MotivaçãoMotivação
AplicabilidadeAplicabilidade
EstruturaEstrutura
![Page 19: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/19.jpg)
20
Participants: Memento (SolverState) Originator (ConstraintSolver) Caretaker (undo mechanism) Collaborations:A caretaker requests a memento from an originator, holds it for a time, and passes it back to the originator, as the following interaction diagram illustrates:
Consequences:The Memento pattern has several consequencesPreserving encapsulation boundaries. Memento avoids exposing information that only an originator should manage but that must be stored nevertheless outside the originator...
Formato de Apresentação de Gamma et al.
ParticipantesParticipantes
ColaboraçõesColaborações
ConsequênciasConsequências
![Page 20: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/20.jpg)
21
Implementation: Here are two issues to consider when implementing the Memento pattern:
class State; class Originator { public: Memento* CreateMemento(); void SetMemento(const Memento*); // ... private: State* _state; // internal data structures // ... }; class Memento { public: // narrow public interface virtual ~Memento(); private: // private members accessible only to Originator friend class Originator; Memento(); void SetState(State*); State* GetState();private: State* _state;};
Formato de Apresentação de Gamma et al.
Note a natureza técnica destes tipos de padrões.
Não existe entendimento pelo usuário final leigo
em computação.
ImplementaçãoImplementação
![Page 21: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/21.jpg)
22
Sample Code: class MoveCommand { public: MoveCommand(Graphic* target, const Point& delta); void Execute(); void Unexecute(); private: ConstraintSolverMemento* _state; Point _delta; Graphic* _target; };
Known Uses:The preceding sample code is based on Unidraw's support for connectivity through its CSolver class [VL90].
Related Patterns:Command (233): Commands can use mementos to maintain state for undoable operations.Iterator (257): Mementos can be used for iteration as described earlier.
Formato de Apresentação de Gamma et al.
Código ExemploCódigo Exemplo
Usos conhecidosUsos conhecidos
PadrõesRelacionados
PadrõesRelacionados
![Page 22: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/22.jpg)
23
Formato de Apresentação de Welie
![Page 23: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/23.jpg)
24
NomeNome AutorAutor ProblemaProblema
PrincípioPrincípio
ContextoContexto
Influências/Motivação
Influências/Motivação
SoluçãoSolução
RaciocínioRaciocínio
Formato de Apresentação de Welie
![Page 24: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/24.jpg)
25
ExemplosExemplos
UsosConhecidos
UsosConhecidos
PadrõesRelacionados
PadrõesRelacionados
ImplementaçãoImplementação
Formato de Apresentação de Welie
![Page 25: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/25.jpg)
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)
![Page 26: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/26.jpg)
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
![Page 27: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/27.jpg)
28
Linguagem de Padrões – Exemplo
A Linguagem de Padrões de Borchers
![Page 28: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/28.jpg)
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
![Page 29: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/29.jpg)
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
![Page 30: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/30.jpg)
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’99Inclusive o usuário
do sistema
Meta 2
![Page 31: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/31.jpg)
32
Padrões - Benefícios
Fornecimento de um vocabulário de comunicação
Entre a equipe de desenvolvimentoMelhoram a comunicação
Equipe de desenvolvimento e usuários do sistema
Permitindo que usuários finais opinem nas decisões de projeto e que se expressem melhor
Captura de experiênciaTransferência de conhecimentos entre pessoas com níveis de experiência diferentes
![Page 32: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/32.jpg)
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
![Page 33: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/33.jpg)
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
![Page 34: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/34.jpg)
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
![Page 35: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/35.jpg)
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
![Page 36: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/36.jpg)
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
![Page 37: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/37.jpg)
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
![Page 38: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/38.jpg)
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
![Page 39: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/39.jpg)
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
![Page 40: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/40.jpg)
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)
![Page 41: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/41.jpg)
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
![Page 42: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/42.jpg)
43
Coleção UI Patterns and Techniques
Autora: TidwellWeb: http://time-tripper.com/uipatterns
desenvolvimento de interfaces com o usuário40 PadrõesDivisão dos padrões em categoriasFormato do Padrão:
NomeExemploUsando quando (Used When)Porquê (Why)Como (How)Exemplos
Alguns padrões foram identificados e não escritos
![Page 43: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/43.jpg)
44
A Linguagem de Padrões de Borchers
Autor: Borchers
Livro: A Pattern Approach to Interaction DesignContendo padrões de ES, IHC e de música (domínio de aplicação)
Web: http://www.hcipatterns.org/patterns/borchers/patternindex.html
Apenas os padrões de IHC
Interação com quiosquesComo representar o modelo mental do usuário
como tornar a interação mais atrativa ao usuário
Oferecer um grau de transparência da interação
Divisão dos padrões em níveis de abstração
![Page 44: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/44.jpg)
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
![Page 45: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/45.jpg)
46
A Linguagem de Padrões de Montero et al.
Linguagem de PadrõesMontero, Lozano, Gonzáles, Ramos. A First Approach To Design Web Sites By Using Patterns, VikingPLoP 2002.
padrões para projeto de interfaces com o usuário para Web
23 padrões identificados
Divisão dos padrões em três categorias:Web sites
Páginas Web
Ornamentais
![Page 46: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/46.jpg)
47
Comparação dos Trabalhos
Linguagem Common Ground
ColeçãoUI Patterns
Linguagem de Borchers
Coleções de Welie
Linguagem de Motero et
al.Número de
Padrões 60 40 17 122 23
Uniformidade parcial parcial total parcial total
Organização Linguagem Coleção Linguagem Coleção Linguagem
Propósito Interação (Desktop ou
Web)
Interface com o
Usuário
Interação com
Quiosques
GUI, Web e Móveis
Web
Disponibiliza-ção
Artigo*Web
Web Livro,Web*
Web Artigo
Padrões não escritos?
sim sim não não não
*Não contém todos os padrões do autor
![Page 47: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/47.jpg)
48
Name: Memento
Intent: Without violating encapsulation, capture and externalize an object's internal state so that the object can be restored to this state later.
Also Known As: Token
Motivation: Sometimes it's necessary to record the internal state of an object. This is required when implementing checkpoints and undo mechanisms …
Applicability: Use the Memento pattern when:
a snapshot of (some portion of) an object's state must be saved so that it can be restored to that state later, and ….
Structure:
Padrão Undo vs. Padrão MementoUndo
Author Martijn van Welie
Problem Users may do actions they later want reverse.
Principle Error Management (Safety)
Context Most applications where restoring the state after an erroneous action is relatively hard to do by hand e.g. when it requires several actions.
Forces•Users typically explore functionality of an application but do not want to be "punished" when selecting unwanted functions. •Some actions may have side effects that cannot be undone by the application. •Often users want to reverse several actions instead of just the last action.
Solution Let the users reverse their last actions.
Maintain a queue of executed commands and allow the user to undo at least the last couple of actions. Show the history of commands so that users know...
![Page 48: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/48.jpg)
49
Examples
As in all MS Office applications, in Word 2000 the users can see the history of their actions and undo one or more of them. The actions are briefly described and the users can select a range of actions to be undo. After selecting undo, users can even redo the actions.
Known Uses Most office applications; Word, WordPerfect, CorelDraw
Related Patterns Consider the WARNING pattern for commands that have side effects that cannot be undone.
Implementation
Implementation: Here are two issues to consider when implementing the Memento pattern:class State; class Originator { public: Memento* CreateMemento(); void SetMemento(const Memento*); // ... private: State* _state; // internal data structures // ... }; class Memento { public: // narrow public interface virtual ~Memento(); private: // private members accessible only to Originator friend class Originator; Memento(); void SetState(State*); State* GetState();private: State* _state;};
Padrão Undo vs. Padrão Memento
![Page 49: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/49.jpg)
50
Padrão Undo vs. Padrão Memento
Undo(Welie)
Memento (Gamma et al.)
Foco Descrição da funcionalidade
objetos que dispõem a
funcionalidade
Leitores Usuários e projetistas
Engenheiros de Software OO
Formato Ênfase na descrição da
funcionalidade
Ênfase nos diagramas e
implementação
![Page 50: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/50.jpg)
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 diferentesCada visão é importante em uma parte do projeto projeto de desenvolvimento
É importante usarmos padrões das duas áreas em conjunto
![Page 51: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/51.jpg)
52
Modelo de Processo do Projeto da Interação (Dearden, 2002) (1/2)
1. IntroduçãoO facilitador introduz– o que são os padrões– Para que servem– Como podem auxiliar o trabalho– Formato
2. Leitura dos PadrõesO facilitador solicita que o usuário leia um padrão de cada vezFacilitador pergunta se o usuário entendeu todos os termosFacilitador pergunta ao usuário sobre o que ele entendeu sobre o padrãoFacilitador tira as dúvidas do usuário
![Page 52: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/52.jpg)
53
1. Desenvolvimento da interfaceFacilitador guia o usuário no desenvolvimento da interfaceFoque uma tela por vezPermita ao usuário manipular os padrõesAo terminar uma tela, facilitador verifica se a tela satisfaz as diretivas dos padrões utilizados
4. Desenvolvimento iterativo começando com protótipos de papel, chegando em mock-ups e utilização de ferramentas de autoria em direção a um produto completo.
Modelo de Processo do Projeto da Interação (Dearden, 2002) (2/2)
![Page 53: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/53.jpg)
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.
![Page 54: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/54.jpg)
55
A Linguagem de Padrões de Montero et al.
Web Sites Páginas Web Ornamentais
![Page 55: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/55.jpg)
56
Welcome
![Page 56: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/56.jpg)
57
Welcome
Usuário necessita saber onde ele está, o que pode fazer e o que ele necessita para visitar o lugar
Problema:
Contexto:
Solução:
Como o usuário sabe onde ele está?
Forneça um lugar para recepção onde condições de acesso podem ser avaliadas
Possibilitar acesso ao Site (Homepage) (Indication)
Obtenha informações do usuário como linguagem e resolução (Ready)
Informe sobre as melhores condições para visitar o site de forma adequada (Polyglot)
Informe sobre o conteúdo (About This) e seu proprietário (Contact Us)
![Page 57: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/57.jpg)
58
Indication
![Page 58: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/58.jpg)
59
IndicationOs usuários necessitam saber onde eles podem ir e o que
eles podem fazer a partir do ponto onde estão
Problema:
Contexto:
Solução:
Como os usuários podem saber onde podem ir e o que eles acharão lá?Forneça o mecanismo necessário (links significantes) que
permitam qualquer usuário mover de um lugar para outros lugares
Forneça informações de feedback sobre sua localização
Possibilite o retorno (Second Chance) para um lugar seguro (Homepage)
Links importantes podem ser colocados no alto da página
Etiquetas de Links descritivas poderiam ser utilizados (Polite)
Se utilizar Frames, coloque um título em cada um
![Page 59: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/59.jpg)
60
A Linguagem de Padrões de Montero et al.
Web Sites Páginas Web Ornamentais
![Page 60: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/60.jpg)
61
Homepage
![Page 61: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/61.jpg)
62
Homepage
Uma página é acessa de várias maneiras, entretanto deve haver um ponto de referência, que responda questões como quem? O que? Quando? Onde?
Problema:
Contexto:
Solução:
Como o usuário sabe onde ele está?
Forneça uma página inicial onde o usuário se sinta como “estivesse em casa”
Permita ao usuário utilizar retornos caso esteja desorientado
Layout do site coloca importante informações no topo da página (Novelty)
Incluir logos (Tagline), mecanismos de busca (Search) e informações para contato (Subscription, Contact Us, About This)
![Page 62: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/62.jpg)
63
Polite
![Page 63: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/63.jpg)
64
Polite
As pessoas se diferem amplamente nos termos que utilizam para descrever conceitos
Problema:
Contexto:
Solução:
Como o usuário acessa o conteúdo da página de modo simples e apropriado?
Use a linguagem apropriada de modo mais simples e clara para o conteúdo do site
Use etiquetas associadas com seus controles (Indication)
Expresse uma idéia em cada sentença (Tagline)
Use métodos (como os do Design Participativo e Classificação de Cartões) que envolvam o usuário
![Page 64: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/64.jpg)
65
Busy
![Page 65: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/65.jpg)
66
Busy
Downloads podem demorar muito tempo, criando atrasos significantes ou podem ser completados de modos diferentes
Problema:
Contexto:
Solução:
Como o usuário sabe quando suas operações terminaram?
Forneça feedback ao usuário
Forneça informações sobre o tamanho de qualquer elemento que o usuário pode fazer download
Imagens e textos podem ser carregados sobre demanda (Size)
![Page 66: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/66.jpg)
67
Form
![Page 67: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/67.jpg)
68
Form
O usuário tem que fornecer informações
Problema:
Contexto:
Solução:
Como o usuário fornece informações para o proprietário do web site?
Forneça “brancos” apropriados para serem preenchidos, com indicativo claro e correto de qual informação deve ser fornecida
Em algumas ocasiões, um formulário pode ocupar uma página completa
O usuário necessita saber se sua submissão foi corretamente processada
![Page 68: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/68.jpg)
69
A Linguagem de Padrões de Montero et al.
Web Sites Páginas Web Ornamentais
![Page 69: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/69.jpg)
70
Tag Line
![Page 70: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/70.jpg)
71
Tag Line
É necessário saber a proposta do website
Problema:
Contexto:
Solução:
Como o usuário sabe qual o propósito do website?
Forneça um slogan ou imagem que identifique o website e seu propósito.
Resumida, simples e direta
Inclua uma descrição do site na janela do navegador
![Page 71: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/71.jpg)
72
![Page 72: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/72.jpg)
73
A leitura de textos num website é diferente da leitura em textos impressos. A maioria das pessoas lêem blocos de texto ao invés de ler palavra por palavra
Problema:
Contexto:
Solução:
Como o usuário pode conseguir uma impressão adequada da informação?
Forneça a informação de diversas maneiras e formatos
e dê a possibilidade de imprimir ou salvar documentos grandes.
![Page 73: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/73.jpg)
74
Subscription
![Page 74: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/74.jpg)
75
Subscription
Os usuários não querem visitar o website a todo momento. Eles desejam saber quando novos produtos ou novidades aparecem.
Problema:
Contexto:
Solução:
Como o usuário pode ficar sabendo de informações significativas para ele?
Forneça um formulário no qual o usuário pode conseguir a informação, que ele deseja, automaticamente.
o usuário deve ter certeza de que seu email não será divulgado a todos (Secret).
![Page 75: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/75.jpg)
76
Colour
![Page 76: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/76.jpg)
77
Colour
A cor deve ser considerada no início do projeto de um website.
Problema:
Contexto:
Solução:
Como o usuário pode acessar informações de uma forma adequada?
Forneça a informação usando cores adequadas nas fontes, fundos de tela e imagens.
mudança de cores em links visitados e não visitados
cuidado com contrastes de cores
use cores brilhantes somente para destacar informações
![Page 77: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/77.jpg)
78
Location
![Page 78: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/78.jpg)
79
Location
Quando um usuário chega em um Website, ele precisa saber onde está.
Problema:
Contexto:
Solução:
Como o usuário sabe onde está ou qual é a sessão que ele está?
Forneça informação sobre a localização do usuário no website.
![Page 79: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/79.jpg)
80
Novelty
![Page 80: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/80.jpg)
81
Usuários gostam de saber se existem novas funcionalidades, promoções, ofertas, noticias no Website
Problema:
Contexto:
Solução:
Como o usuário pode saber das novidades e ultimas notícias do website?
Forneça sugestões e novidades do website de uma maneira limpa e intuitiva.
Novelty
![Page 81: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/81.jpg)
82
Size
![Page 82: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/82.jpg)
83
Size
Balanceamento entre gráficos e tempo real
Problema:
Contexto:
Solução:
Como o usuário pode acessar informações de uma forma adequada?
Forneça a informação usando cores adequadas nas fontes, fundos de tela e páginas.
Animações, imagens e arquivos longos devem ser fornecidas sob demanda.
Tamanho de página, rolagem e tamanho de fontes são importantes
![Page 83: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/83.jpg)
84
Dúvidas?
![Page 84: Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e Interação Humano-Computador - Padrões para Projetos Web](https://reader034.vdocuments.site/reader034/viewer/2022042607/55834cedd8b42a8f548b5021/html5/thumbnails/84.jpg)
Desenvolvimento de Sistemas Interativos
Integração das Visões de Engenharia de Software e Interação Humano-Computador
Padrões para Projetos WEB
Júnia Coutinho Anacleto SilvaRosângela A. Dellosso Penteado
Maio/2005
Americo Talarico NetoAndré Constantino da Silva