Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e...
-
Upload
andre-constantino-da-silva -
Category
Documents
-
view
1.492 -
download
6
Transcript of Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia de Software e...
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
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
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
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)
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
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
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
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
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 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”
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
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
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
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
17
Formato de Apresentação de AlexanderNúmeroNúmero NomeNome
ConfiançaConfiança
IlustraçãoIlustração ContextoContexto
Resumo do Problema
Resumo do Problema
ProblemaDetalhadoProblemaDetalhado
18
Formato de Apresentação de Alexander
SoluçãoSolução
DiagramaDiagrama
ReferênciasReferências
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
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
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
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
23
Formato de Apresentação de Welie
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
25
ExemplosExemplos
UsosConhecidos
UsosConhecidos
PadrõesRelacionados
PadrõesRelacionados
ImplementaçãoImplementação
Formato de Apresentação de Welie
26
Linguagem de Padrões - Conceito
“
Uma Linguagem
de Padrões nada
mais é do que
uma maneira
precisa de
descrever a
experiência de
alguém... é a
representação de
um principio
repetitivo em um
bom projeto de
interação através
de um conjunto de
padrões
hierarquicamente
estruturados e
inter-relacionados
que são criados
para guiar o
projetista pelos
vários níveis de
abstração através
do processo...”
(
Alexander, 1977)
27
Linguagem de Padrões - Formato
Segundo Meszaros e Doble (1996)Divide o problema geral e sua solução complexa em um número de problemas relacionados com suas respectivas soluções
Cada par problema/solução será um Padrão
É bom que contenha:Nome evocativo
Descrição do problema geral
Sumário que apresente os padrões
Padrões devem estar relacionados, especialmente nos elementos Contexto e Padrões Relacionados
28
Linguagem de Padrões – Exemplo
A Linguagem de Padrões de Borchers
29
Linguagem de Padrões - Conceito
“As metas de uma linguagem de padrões de IHC são compartilhar soluções de
projeto IHC de sucesso entre colegas da área, e fornecer uma linguagem comum para projeto IHC para qualquer um que
esteja envolvido no projeto, desenvolvimento, avaliação ou uso do
sistema interativo.”INTERACT’99
30
Linguagem de Padrões - Conceito
“As metas de uma linguagem de padrões de IHC são compartilhar soluções de
projeto IHC de sucesso entre colegas da área, e fornecer uma linguagem comum para projeto IHC para qualquer um que
esteja envolvido no projeto, desenvolvimento, avaliação ou uso do
sistema interativo.”INTERACT’99
Meta 1
31
Linguagem de Padrões - Conceito
“As metas de uma linguagem de padrões de IHC são compartilhar soluções de
projeto IHC de sucesso entre colegas da área, e fornecer uma linguagem comum para projeto IHC para qualquer um que
esteja envolvido no projeto, desenvolvimento, avaliação ou uso do
sistema interativo.”INTERACT’99Inclusive o usuário
do sistema
Meta 2
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
33
Tópicos
Introdução e Histórico
Conceito de Padrões
Padrões em IHC – Estado da Arte
Conceitos de Padrões em IHC Principais Trabalhos em IHC
Comparação dos Trabalhos
Apresentação de um conjunto de Padrões para projetos WEB
34
Padrões de IHC
“Uma linguagem de padrões de interação gera projetos de interação de espaço/tempo que cria uma imagem do sistema próxima ao modelo mental do usuário da tarefa a ser realizada, fazendo com que a interface humano-computador seja a mais transparente possível.”
ChiliPLoP’98
35
Padrões de IHC
“Uma linguagem de padrões de interação gera projetos de interação de espaço/tempo que cria uma imagem do sistema próxima ao modelo mental do usuário da tarefa a ser realizada, fazendo com que a interface humano-computador seja a mais transparente possível.”
ChiliPLoP’98
36
Padrões de IHC
“Uma linguagem de padrões de interação gera projetos de interação de espaço/tempo que cria uma imagem do sistema próxima ao modelo mental do usuário da tarefa a ser realizada, fazendo com que a interface humano-computador seja a mais transparente possível.”
ChiliPLoP’98
37
Padrões de IHC
“Uma linguagem de padrões de interação gera projetos de interação de espaço/tempo que cria uma imagem do sistema próxima ao modelo mental do usuário da tarefa a ser realizada, fazendo com que a interface humano-computador seja a mais transparente possível.”
ChiliPLoP’98
38
Padrões de IHC - Categorias
Padrões para Interação Humano-Computador
Padrões para Interface com o Usuário
Padrões para Avaliação de Usabilidade
relacionados com preocupações de alto
nível, e algumas vezes com guidelines, envolvendo a
psicologia do usuário
Ex.: Navigable Space
39
Padrões de IHC - Categorias
Padrões para Interação Humano-Computador
Padrões para Interface com o Usuário
Padrões para Avaliação de Usabilidade
relacionados com problemas de interação
específicos e sua solução é baseada em
componentes de interface com o usuário
Ex.: Liquid Layout
40
Padrões de IHC - Categorias
Padrões para Interação Humano-Computador
Padrões para Interface com o Usuário
Padrões para Avaliação de Usabilidade
Expressam como conduzir o processo de
avaliação de usabilidade, auxiliam a planejar e executar a avaliação e editar e
avaliar os dados coletados
Ex.: Linguagem de padrões para avaliação
de usabilidade de Gellner e Forbrig
41
Principais Trabalhos
Linguagem de Padrões da Tidwell (1998)
Linguagem de Padrões de Borchers (2000)
Linguagem de Padrões de Montero et al. (2002)
Coleção de Padrões da Tidwell (2003)
Coleções de Padrões de Welie (2003)
42
Linguagem de Padrões Common Ground
Autora: Tidwell
Artigo: Interaction Design Patterns, PLoP 1998.
Web: 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
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
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
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õ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
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
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...
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
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 diferentesCada 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)
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
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)
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
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)
58
Indication
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
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?
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)
63
Polite
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
65
Busy
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)
67
Form
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
69
A Linguagem de Padrões de Montero et al.
Web Sites Páginas Web Ornamentais
70
Tag Line
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
72
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.
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.
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).
76
Colour
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
78
Location
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.
80
Novelty
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
82
Size
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
84
Dúvidas?
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