Desenvolvimento de Sistemas Interativos Integra

1
Desenvolvimento de Sistemas InterativosIntegração
das Visões de Engenharia de Software e Interação
Humano-ComputadorPadrões para Projetos WEB

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

Americo Talarico Neto André Constantino da Silva
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
• 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óricoEngenharia de Software (1/2)

• 1987
• Primeiro provável uso de padrões na ES
• Object-Oriented Programming, Systems and
  Applications (OOPSLA) em 1987
• Beck e Cunningham (projeto da interface com o
  usuário em Smalltalk)
• Abordou os conceitos de Design Participativo.
• 1994
• Primeira Conferência Pattern Languages of
  Programming (PloP)
• Apresentar, trocar e refinar os padrões e as
  linguagens de padrões para programas de
  computador.
• 1995
• Publicação do livro Design Patterns Elements of
  Reusable Object-Oriented
  Software de Gamma, Helm, Johnson e
  Vlissides(GoF)
• Livro contendo uma coleção de padrões para o
  projeto de software Orientado a
  Objetos
• Fornece aos engenheiros de software uma forma
  mais prática de
  transferir sua experiência adquirida em projetos
  anteriores

6
Padrões HistóricoEngenharia de Software (2/2)

• 1995
• Publicação do primeiro livro da série
  Pattern Languages of
  Program Design,
  reunindo padrões publicados no PLoP
• 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
1999
1997
7
Padrões HistóricoInteraçã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
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
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
17
Formato de Apresentação de Alexander
Número
Nome
Confiança
Ilustração
Contexto
Resumo do Problema
Problema Detalhado
18
Formato de Apresentação de Alexander
Soluçã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 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
Implementaçã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.
• INTERACT99

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.
• INTERACT99

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.
• INTERACT99

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.
• ChiliPLoP98

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.
• ChiliPLoP98

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.
• ChiliPLoP98

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.
• ChiliPLoP98

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 http//www.mit.edu/jtidwell/interaction_patt
  erns.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

43
Coleção UI Patterns and Techniques

• Autora Tidwell
• Web http//time-tripper.com/uipatterns
• desenvolvimento de interfaces com o usuário
• 40 Padrões
• Divisão dos padrões em categorias
• Formato do Padrão
• Nome
• Exemplo
• Usando quando (Used When)
• Porquê (Why)
• Como (How)
• Exemplos
• Alguns padrões foram identificados e não escritos

44
A Linguagem de Padrões de Borchers

• Autor Borchers
• Livro A Pattern Approach to Interaction Design
• Contendo padrões de ES, IHC e de música (domínio
  de aplicação)
• Web http//www.hcipatterns.org/patterns/borchers/
  patternindex.html
• Apenas os padrões de IHC
• Interação com quiosques
• Como representar o modelo mental do usuário
• como tornar a interação mais atrativa ao usuário
• Oferecer um grau de transparência da interação
• Divisão dos padrões em níveis de abstração

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

46
A Linguagem de Padrões de Montero et al.

• Linguagem de Padrões
• Montero, Lozano, Gonzáles, Ramos. A First
  Approach To Design Web Sites By Using Patterns,
  VikingPLoP 2002.
• padrões para projeto de interfaces com o usuário
  para Web
• 23 padrões identificados
• Divisão dos padrões em três categorias
• Web sites
• Páginas Web
• Ornamentais

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

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

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.

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

• Usuário necessita saber onde ele está, o que pode
  fazer e o que ele necessita para visitar o lugar

Contexto
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

• Os usuários necessitam saber onde eles podem ir e
  o que eles podem fazer a partir do ponto onde
  estão

Contexto
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

• 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?

Contexto
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

• As pessoas se diferem amplamente nos termos que
  utilizam para descrever conceitos

Contexto
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

• Downloads podem demorar muito tempo, criando
  atrasos significantes ou podem ser completados de
  modos diferentes

Contexto
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
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.
Ornamentais
Web Sites
Páginas Web
70
Tag Line
71
Tag Line

• É necessário saber a proposta do website

Contexto
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

72
Print
73
Print

• 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

Contexto
Como o usuário pode conseguir uma impressão
adequada da informação?
Problema
Solução
Forneça a informação de diversas maneiras e
formatos e dê a possibilidade de imprimir ou
salvar documentos grandes.
74
Subscription
75
Subscription

• Os usuários não querem visitar o website a todo
  momento. Eles desejam saber quando novos produtos
  ou novidades aparecem.

Contexto
Problema
Como o usuário pode ficar sabendo de informações
significativas para ele?
Solução

• Forneça um formulário no qual o usuário pode
  conseguir a informação, que ele deseja,
  automaticamente.
• o usuário deve ter certeza de que seu email não
  será divulgado a todos (Secret).

76
Colour
77
Colour

• A cor deve ser considerada no início do projeto
  de um website.

Contexto
Problema
Como o usuário pode acessar informações de uma
forma adequada?
Solução

• Forneça a informação usando cores adequadas nas
  fontes, fundos de tela e imagens.
• mudança de cores em links visitados e não
  visitados
• cuidado com contrastes de cores
• use cores brilhantes somente para destacar
  informações

78
Location
79
Location

• Quando um usuário chega em um Website, ele
  precisa saber onde está.

Contexto
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.

80
Novelty
81
Novelty

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

Contexto
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.
82
Size
83
Size

• Balanceamento entre gráficos e tempo real

Contexto
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

84
Dúvidas?
85
Desenvolvimento de Sistemas InterativosIntegração
das Visões de Engenharia de Software e Interação
Humano-ComputadorPadrões para Projetos WEB

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

Americo Talarico Neto André Constantino da Silva
Maio/2005