Transcript Slide 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
André Constantino da Silva
Júnia Coutinho Anacleto 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
1996
1997
1999
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
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
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
Contexto
Forças
A ordem de apresentação
dos elementos não é fixa
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
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
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
Intenção
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
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:
Participantes
Memento (SolverState)
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:
Implementação
class State;
class Originator {
public:
Memento* CreateMemento();
void SetMemento(const Memento*);
// ...
private:
State* _state;
// internal data structures
// ...
};
class Memento {
public:
// narrow public interface
virtual ~Memento();
private:
// private members accessible only to Originator
friend class Originator;
Memento();
void SetState(State*);
State* GetState();
private:
State* _state;
};
Note a natureza técnica
destes tipos de padrões.
Não existe entendimento
pelo usuário final leigo
em computação.
21
Formato de Apresentação de Gamma et al.
Sample Code:
Código Exemplo
class MoveCommand {
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.
Iterator (257): Mementos can be used for iteration as described earlier.
Padrões
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
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)
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
INTERACT’99
do sistema
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
 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
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
Humano-Computador
Padrões para Interface
com o Usuário
relacionados com
preocupações de alto
nível, e algumas vezes
com guidelines,
envolvendo a
psicologia do usuário
Ex.: Navigable Space
Padrões para Avaliação de
Usabilidade
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
problemas de interação
específicos e sua
solução é baseada em
componentes de
interface com o usuário
Ex.: Liquid Layout
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
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
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
Linguagem
Coleção
Linguagem Coleções de
Common
de Motero et
de Borchers
Welie
UI
Patterns
Ground
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
47
Padrão Undo vs. Padrão Memento
Undo
Name: Memento
Author Martijn van Welie
Intent: Without violating encapsulation, capture and
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
Principle Error Management (Safety)
Motivation: Sometimes it's necessary to record the
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
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.
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:
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
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;
};
49
Padrão Undo vs. Padrão Memento
Foco
Leitores
Formato
Undo
Memento
(Welie)
(Gamma et al.)
Descrição da
funcionalidade
objetos que
dispõem a
funcionalidade
Usuários e
Engenheiros de
projetistas
Software OO
Ê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
–
–
–
–
2.
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
52
Modelo de Processo do Projeto da
Interação (Dearden, 2002) (2/2)
3.
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
 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.
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
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
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 um
ponto de referência, que responda questões como quem? O que?
Quando? Onde?
Problema:
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)
62
Polite
63
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?
Solução:
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
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
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
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
seu propósito.
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:
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).
75
Colour
76
Colour
Contexto:
A cor deve ser considerada no início do projeto de um
website.
Problema:
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
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
website.
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
limpa e intuitiva.
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
André Constantino da Silva
Júnia Coutinho Anacleto Silva
Rosângela A. Dellosso Penteado
Maio/2005