Interação Humano-

Computador
Padrões de Interação para Projetos
Web
Prof.ª Dr.ª Junia Coutinho Anacleto
Johana Rosas Villena
2009
 Roteiro
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
Exercício – Identificação dos padrões
apresentados em um site
 Introdução e Histórico
Padrões na Arquitetura
Padrões na Engenharia de Software
Padrões na Interação Humano-Computador
 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
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
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
 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
 Padrões – Conceito (1/4)
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 – Conceito (2/4)
Solução (Experiência, Comprovada) para um
Problema (Recorrente, Reuso) em um determinado
Contexto (Instâncias)

♦ 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”
 Padrões – Conceito (3/4)
“padrões são uma solução para um problema em
um contexto”
Alexander et al. (1977)
“Padrões de projeto descrevem soluções simples
e elegantes para problemas específicos no
projeto de software orientado a objetos. Padrões
de projeto capturam soluções que foram
desenvolvidas e evoluídas ao longo do tempo. ...
Padrões de projeto capturam essas soluções de
modo sucinto e fácil (compreensão) em um
formato”
(Gamma et al., 1995)
 Padrões – Conceito (4/4)
“Descrevem possíveis boas soluções para um
problema comum de projeto em um certo
contexto, descrevendo as qualidades invariáveis
de todas as soluções”
(Tidwell, 1999)
“É uma descrição textual e gráfica para uma
solução comprovada para um problema
recorrente do projeto”
(Borchers, 2000)
 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 Não existe um formato certo ou
♦ Tidwell errado
♦ Coad
♦ Fowler Formato utilizado dependerá da
♦ Etc. ênfase que o autor deseja dar ao
padrão
 Padrões – Formato (2/2)
Segundo Meszaros e Doble (1996)
♦ Mínimo
● Nome do Padrão
● Problema
A ordem de apresentação dos
● Solução
elementos não é fixa e pode
● Contexto
● Forças variar

♦ Opcionais Os elementos opcionais

● Contexto Resultante
● Padrões Relacionados
● Exemplos
● Exemplos de Código
● Raciocínio
● Apelidos
● Agradecimentos
devem ser escolhidos pelo
autor
São para tornar a
compreensão do padrão mais
fácil ou para relacionar os
padrões
Formato de Apresentação de Alexander
 Formato de Apresentação de Alexander

Número Nome Confiança

Contexto
Ilustração

Resumo do
Problema

Problema
Detalhado
Formato de Apresentação de Alexander

Solução

Diagrama

Referências
Formato de Apresentação de Gamma et al.
Name: Memento Nome
Intent: Without violating encapsulation, capture and externalize an object's
internal state so that the object can be restored to this state later.
Intenção
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:
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: Aplicabilidade

Estrutura
17
Formato de Apresentação de Gamma et al.
Participants:
Memento (SolverState) Participantes
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:

Consequences: Consequências
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...

18
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: Note a natureza técnica
// narrow public interface
virtual ~Memento(); destes tipos de padrões.
private:
// private members accessible only to Originator
friend class Originator;
Não existe entendimento pelo
Memento(); usuário final leigo
void SetState(State*);
em computação.
State* GetState();
private:
State* _state;
};
19
Formato de Apresentação de Gamma et al.
Sample Code:
class MoveCommand {
Código Exemplo
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].
Padrões
Related Patterns: Relacionados
Command (233): Commands can use mementos to maintain state for undoable
operations.
Iterator (257): Mementos can be used for iteration as described earlier.

20
Formato de Apresentação de Welie
 Formato de Apresentação de Welie
Nome Autor Problema

Princípio

Contexto

Influências/
Motivação

Solução

Raciocínio

22
 Formato de Apresentação de Welie

Exemplos

Usos
Conhecidos

Padrões
Relacionados Implementação

23
 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)
 Linguagem de Padrões - Conceito
“A linguagem de padrões não captura somente as peças
de projeto (padrões), mas também a forma como estas
peças se encaixam”
(Fincher, 1999)
“É uma hierarquia de padrões de projeto ordenadas por
escopo. Padrões de alto nível endereçam questões de
larga escala no projeto e referencia padrões de mais
baixo nível para descrever sua solução”
(Borchers, 2000)
“Padrões estão relacionados uns com os outros, e
conseqüentemente uma rede de padrões constituem uma
linguagem de padrões”
(Welie, 2000)
Linguagem de Padrões – Exemplo

A Linguagem de Padrões de Borchers

 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
 Linguagem de Padrões - Conceito
Meta 1
“As metas de uma linguagem de padrões de IHC
são compartilhar soluções de projeto IHC de
sucesso entre colegas da área, e fornecer uma
linguagem comum para projeto IHC para
qualquer um que esteja envolvido no
projeto,desenvolvimento, avaliação ou uso do
sistema interativo.”
INTERACT’99
Meta 2
“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

Inclusive o usuário
do sistema
 Por quê uma linguagem de padrões?
Problemas podem ser muito complexos
♦ difíceis de descrever em um único padrão

A solução poderia ser muito grande, específica

ou impossível de reusar
Existem partes que dependem entre si
Partes da solução pode ser opcional
 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
 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
Ferramenta útil para registrar as experiências de projeto
 Padrões - Características
Requisitos Funcionais dos padrões
♦ Captura de Prática
● Descrever um problema que existe no mundo real
♦ Abstração
● Da qualidade de um conjunto de exemplos em um nível de
forma que a compreensão do padrão seja imediata
♦ Prover exemplos
● Descrever o real valor de um Padrão no seu domínio
♦ Princípio de Organização
● Elementos para facilitar a compreensão e comparação
♦ Formato de apresentação
● Facilitar o entendimento dos conceitos e da motivação
envolvidos
 Padrões - Características
Requisitos Não Funcionais dos padrões

♦ Não óbvio
● Possuir experiência e pesquisa intensa no domínio

♦ Insight
● Um padrão faz mais do que identificar uma solução,
ele explica a necessidade dessa solução

♦ Poder comunicativo
● Facilitar sua divulgação e aceitação

● Como melhor expor as idéias de forma a ser

compreensiva aos usuários
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
 Padrões em IHC – Estado da Arte
Conceitos de Padrões em IHC
Principais Trabalhos em IHC
♦ Comparação dos Trabalhos
 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
Padrões de IHC - Categorias
relacionados com
Padrões para Interação preocupações de alto
Humano-Computador nível, e algumas vezes
com guidelines,
envolvendo a psicologia
do usuário

Padrões para Interface com Ex.: Navigable Space

o Usuário

Padrões para Avaliação de

Usabilidade
Padrões de IHC - Categorias
Padrões para Interação
Humano-Computador

Padrões para Interface com relacionados com

problemas de interação
o Usuário específicos e sua solução
é baseada em
componentes de interface
com o usuário
Padrões para Avaliação de Ex.: Liquid Layout
Usabilidade
Padrões de IHC - Categorias
Padrões para Interação
Humano-Computador
Expressam como
conduzir o processo de
avaliação de usabilidade,
Padrões para Interface com auxiliam a planejar e
executar a avaliação e
o Usuário editar e avaliar os dados
coletados

Ex.: Linguagem de
padrões para avaliação de
Padrões para Avaliação de usabilidade de Gellner e
Usabilidade Forbrig
 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)

 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
 Linguagem de Padrões Common Ground
Padrão na Linguagem Common Ground
♦ Estrutura:
● Nome
● Exemplos
● Exemplos ruins (Opcional)
● Contexto
● Problema
● Influências/Motivação (Forces)
● Solução
● Contexto Resultante
● Notas (Opcional)
 Linguagem de Padrões Common Ground - Exemplo

Good Defaults
Nome Exemplos
Examples:
•A PC login screen with the last user's name still in the "User name:" field
•A phone menu which, if you don't press any number, puts you through to a human
operator who can help you
•Refrigerator controls which give you a "medium coldness" setting by default

Context: The user should fill in information on a Form (or change settings via a
Control Panel), and some of the data fields can be given reasonable default
values. This can happen within many different subpatterns: Choice from a Small
Set, Choice from a Large Set, Sliding Scale, Forgiving Text Entry, etc.

Contexto
Problem: How does the artifact indicate what kind of information should be
supplied?

Problema
 Linguagem de Padrões Common Ground - Exemplo
Forces: Influências/
•Filling out forms isMotivação
not inherently a fun activity; don't prolong the agony by making
the user do unnecessary work.
•The user may have no clue what kind of value to supply, from the given context.
•The user may be perfectly happy with the default behavior or values, with no desire
to change it; but they may want to know what the default values are.
•"Correct" values for some unfilled fields may be difficult or impossible for the
artifact itself to figure out.
Solução
Solution: Supply reasonable default values for the fields in question. Show
these defaults to the user, so that they know they aren't required to fill them
in. Indicate clearly that the value can be changed by the user, if they so desire.

Resulting Context: You need to choose the correct default value. The actual value
you use will depend entirely upon the particulars of the artifact, of course, but keep
in mind such principles as minimal work (pick a default value that most of your
users will be OK with), adaptability (change a default value to be consistent with
information the user has already supplied), and Contexto
representativeness (make it a good
example of "correct" input). Resultante
 Linguagem de Padrões Common Ground - Exemplo
Forces:
•Filling out forms is not inherently a fun activity; don't prolong the agony by making
the user do unnecessary work.
•The user may have no clue what kind of value to supply, from the given context.
•The user may be perfectly happy with the default behavior or values, with no desire
to change it; but they may want to know what the default values are.
•"Correct" values for some unfilled fields may be difficult or impossible
Foco nos for the
artifact itself to figure out. interesses do
usuário
Solution: Supply reasonable default values for the fields in question. Show
these defaults to the user, so that they know they aren't required to fill them
in. Indicate clearly that the value can be changed by the user, if they so desire.

Resulting Context: You need to choose the correct default value. The actual value
you use will depend entirely upon the particulars of the artifact, of course, but keep
in mind such principles as minimal work (pick a default value that most of your
users will be OK with), adaptability (change a default value to be consistent with
information the user has already supplied), and representativeness (make it a good
example of "correct" input).
Linguagem de Padrões Common Ground

*Visão
Parcial dos
Relacionamentos

47
 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

 Coleção UI Patterns and Techniques - Exemplo
Nome

Exemplos

Usado
Quando

Porquê

Como
Coleção UI Patterns and Techniques - Exemplo

Exemplos
 Coleção UI Patterns and Techniques
Coleção de Padrões (parte 1/2)
Organizing the Page
Organizing the Getting Around
Visual Framework
Content Clear Entry Points
Center Stage
Overview Plus Detail Toplevel Navigation
Titled Sections
Hub and Spoke Color-Coded Divisions
Card Stack
Extras On Demand Animated Transition
Closable Panels
Step-by-Step Detail View Navigation
Movable Pieces
Instructions Getting Input From Users Progressive Disclosure
One-Window Good Defaults Progressive Enabling
Drilldown Forgiving Format Property Sheet
Intriguing Branches Fill-in-the-Blanks Diagonal Balance
Multi-Level Help Input Hints Liquid Layout
Input Prompt
Dropdown Chooser
Remembered Choices
Illustrated Choices
 Coleção UI Patterns and Techniques
Coleção de Padrões (parte 2/2)
Direct Manipulation Stylistic Elements
Commands and Actions
Smart Selection Deep Background
Multi-Level Undo
Edit-in-Place Few Hues, Many Values
Smart Menu Items
One-Off Mode Contrasting Font Weights
Prominent Done
Spring-Loaded Mode Corner Treatments
Prominent Cancel
Constrained Resize One-Pixel Lines
Action Groups
Composite Selection Skins
Rollover Effects
Simultaneous Views
Progress Indicator
Command History
Showing Complex Data Macros
Sortable Table
Tree-Table
Alternating Row Colors
Cascading Lists
Jump to Item
New-Item Row
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
A Linguagem de Padrões de Borchers
♦ Formato do Padrão Próximo ao de Alexander:
● Nome
● Ranking
● Ilustração
● Contexto
***
● Descrição simples do problema
● Descrição detalhada do problema
● Solução
● Diagrama
***
● Referências
 A Linguagem de Padrões de Borchers – Exemplo

Nome Ranking

Ilustração

Contexto
Descrição Simples
do Problema

Descrição Detalhada
do Problema
 A Linguagem de Padrões de Borchers – Exemplo

Solução

Diagrama
Referências
A Linguagem de Padrões de Borchers – Exemplo
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
 A Coleção de Welie
Coleção de Padrões para Web
♦ Formato do Padrão:
● Nome
● Exemplo
● Problema
● Usado Quando
● Solução
● Porquê
● Mais exemplos
● Usos Conhecidos
 A Coleção de Welie - Exemplo
Nome

Exemplo

Problema

Usado
Quando
Solução
 A Coleção de Welie - Exemplo

Porquê

Mais
Exemplos

Usos
Conhecidos
 A Coleção de Welie
Coleção de Padrões para Web (parte 1/3)

Site Types User Experiences Ecommerce

· My Site · Shopping · Shopping cart
· Portal · Community · Login
· Commerce Site · Learning · Registering
· Community Site · Product Comparison
· Branded Promo Site · Product Configurator
· Corporate Site · Product Advisor
· News Site · Premium Content Lock
· Museum Site · Newsletter
· Automotive Site · Case study
· Web-based Application · Booking process
· Travel/booking Site · Store Locator
· Multinational Site · Virtual Product Display
· Artist Site
 A Coleção de Welie
Coleção de Padrões para Web (parte 2/3)
Navigation Searching Basic Page Types
· Main Navigation · Image Menu · Simple Search · Homepage
· Bread crumbs · Guided Tour · Advanced Search · Contact Page
· Double tab · Image Browser · Search Results · Processing Page
· Meta Navigation · Minesweeping · Search Area · Printer-friendly Page
· Split Navigation · Overlays · Sitemap · Article Page
· Repeated Menu · Doormat Navigation · Topic Pages · Blog Page
· Faceted · Outgoing Links · Search Tips · Product Page
Navigation · Panning Navigator · Site Index · Forms
· Teaser Menu · Map Navigator · Help Wizard · Input Error Message
· Header-less Menu · FAQ
· Fly-out Menu
· Directory
· Trail Menu
· Scrolling Menu
· Shortcut Box
 A Coleção de Welie
Coleção de Padrões para Web (parte 3/3)

Managing Collections Page Elements Basic Interactions

· Column Filter · News box · Tabbing
· Sortable Table · Home · Paging
· List builder · Language Selector · Wizard
· Favourites (Collector) · Country Selector · Enlarged Clickarea
· Parts Selector · Hotlist · Action Button
· Sorting · Customization Window · Stepping
· Poll
Visual Design · Footer Bar
· Alternating Row Colours · Forum
· Grid-based Layout · News ticker
· Colour-coded Areas · Constrained Format
· Liquid Layout
· Font Enlarger
· Center stage
 A Coleção de Welie
Coleção de Padrões para GUI
♦ Formato do Padrão:
● Nome
● Autor Apresenta os princípios de
● Problema usabilidade que o padrão
● Princípio auxilia a melhorar. Esses
● Contexto princípios são os que foram
● Influências/Motivação (Forces) definidos por Norman (1988).
● Solução
● Raciocínio
● Exemplos
● Usos Conhecidos
● Padrões Relacionados
● Implementação
 A Coleção de Welie - Exemplo
Nome Autor Problema

Princípio

Contexto

Influências/
Motivação

Solução

Raciocínio
 A Coleção de Welie - Exemplo
Exemplos

Usos
Conhecidos

Padrões
Relacionados
Implementação
 A Coleção de Welie
Coleção de Padrões para GUI
Modes Selection Guidance/Feedback
· Automatic Mode Switching · Magnetism · Shield
· Helping Hands · Continuous Filter · Hinting
· Mode Cursor · Contextual Menu · Warning
· Focus! · Progress
· Unambiguous Format · Undo
Navigation · Preview
· Wizard · Setting Attributes
· Softkeys · Command Area
· Navigating Spaces · Managing Favourites
· Container Navigation · Preferences
· List browser Physical Interaction
Presentation · Like in the real world...
· Grid layout · Media Slot
 A Coleção de Welie
Coleção de Padrões para móveis
♦ Formato do Padrão:
● Nome
● Problema
● Contexto
● Solução
● Raciocínio
● Exemplos
● Usos Conhecidos
● Padrões Relacionados (Opcional)
 A Coleção de Welie - Exemplo
Nome
Problema

Contexto

Solução

Raciocínio
 A Coleção de Welie - Exemplo

Exemplos

Usos
Conhecidos

Padrões
Relacionados
A Coleção de Welie
Coleção de Padrões para Móveis

WAP/WML
· Typed Links
· Prefixed Links
· Selection
· Paging
· Footer Navigation
· Image Browsing
· Search
 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
 A Linguagem de Padrões de Montero et al.

Linguagem de Padrões
♦ Formato do Padrão:
● Nome
● Motivação
● Problema
● Influências (Forces)
● Solução
● Conseqüências
● Exemplo e Detalhes de Implementação
♦ Estrutura uniforme
 A Linguagem de Padrões de Montero et al.
Web Sites Páginas Web Ornamentais
Welcome
 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) 77
Indication
 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
79
Polyglot
 Polyglot
Contexto: Permitir o acesso a todos

Problema: Como o usuário faz um uso útil do Web site e as informações

acessadas em seu próprio ritmo?

Solução: Falar a linguagem do usuário é “projetar para todos”

 Técnicas de projeto universais podem ser aplicadas
 Considere o tamanho do monitor, resolução da tela do usuário,
velocidade de conexão, tempo de download, fonte familiares e
tamanhos de fonte
 Forneça as informações de modo apropriado
81
Similarity
 Similarity
Contexto: Quando está navegando pela Internet, o usuário necessita saber
se ele está no mesmo Web site ou não

Problema: Como o usuário sabe se está visitando o mesmo web site?

Solução: O site é projeto usando os mesmos critérios: cores, fontes,

localização de navegação e layout
 Use uma única folha de estilo para todas as páginas
 O usuário sempre deve ser informado de forma adequada onde
ele está e onde ele pode ir
 Ofereça mecanismo de desfazer/refazer
 Evite utilizar componentes desorientados
Ready
 Ready
Contexto: Os usuários que querem visitar seu site precisam ter instalado os
plug-ins necessários.

Problema: Como o usuário sabe que ele pode visitar um web site sem
problemas?
Solução: Forneça ferramentas ou informações necessárias para visitar o
web site de modo adequado
 O site pode detectar se o usuário possui tudo o que é necessário
e fornecer links para download
 O usuário não necessita saber de aspectos técnicos (Polite)
 Garante que as páginas são usáveis mesmo quando scritps,
applets, ou objetos programáticos estão desligados ou não são
suportados
 Forneça informações em uma página alternativa acessível
(Polyglot)
A Linguagem de Padrões de Montero et al.
Web Sites Páginas Web Ornamentais
Homepage

87
 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: 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)
88
Polite

89
 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
90
Busy

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

92
Second Chance

93
 Second Chance
Contexto: O usuário quer sentir que está no controle de suas operações

Problema: Como o usuário pode ter certeza de suas ações?

Solução: Forneça elementos para desfazer/refazer, voltar e limpar

 Forneça links para páginas anteriores, lugares anteriores ou a
(Homepage)
 No formulário (Form), forneça dois botões: “submit” e “clear”

94
Form

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

97
 Danger
Contexto: Existe um excesso de plug-ins. Mas não se pode assumir que qualquer
um irá tê-los ou usar uma particular configuração do computador

Problema: Como o usuário visita um web site sem ficar confuso, ser
interrompido ou ficar desorientado?

Solução: Seja cuidadoso ao usar componentes desorientadores

 Use tamanho de fonte legível, considere o tamanho do monitor,
use cabeçalhos bem definidos, limite o número de frames, limite o
uso de gifs animados, flash, applets, músicas, rollovers, reduza a
carga de trabalho, não use blink ou elementos marquee, limite o
tamanho da página
Use folha de estilo para controlar o layout e apresentação
 A Linguagem de Padrões de Montero et al.

Web Sites Páginas Web Ornamentais

Tag Line

100
 Tag Line

Contexto: É necessário saber a proposta do website

Problema: Como o usuário sabe qual o propósito do website?

Forneça um slogan ou imagem que identifique o website e seu

Solução: propósito.
 Resumida, simples e direta
 Inclua uma descrição do site na janela do navegador
Print

102
 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.
Subscription
 Subscription

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

Problema: Como o usuário pode ficar sabendo de informações significativas

para ele?

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).
Contact us
 Contact us
Contexto: Todo website necessita fornecer um meio de contato

Problema: Como o usuário pode pedir informação adicional sobre o conteúdo

do website?

Solução: Forneça um formulário, um local, ou um link no website onde o

usuário pode conseguir informações adicionais sobre o proprietário
e os produtos do website
Search
 Search

Contexto: Busca é um dos principais elementos de uma Homepage e é essencial

que os usuários que os usuários a utilizem de uma forma fácil e sem
esforço

Problema: Como o usuário pode saber se o website pode fornecer as

informações que ele deseja?

Solução: Forneça uma ferramenta de busca na (Homepage) ou uma

página com uma visão geral do website.
Recognize
 Recognize

Contexto: Quando um usuário volta a um website ele necessita saber das

ações executadas na sua ultima visita.

Problema: Como o usuário pode saber onde ele já esteve?

Solução: Guarde informação sobre as ações do usuário, locais visitados,

logins, documentos salvos, etc
 uso de cookies
 links visitados
Colour
 Colour
Contexto: A cor deve ser considerada no início do projeto de um website.

Problema: Como o usuário pode acessar informações de uma forma

adequada?

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
Location
 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á?

Forneça informação sobre a localização do usuário no website.

Solução:
Novelty
 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.
Size

118
 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
About this
 About this

Contexto: Todo website deve fornecer uma maneira fácil de se encontrar

informação sobre a companhia.

Problema: Como o usuário pode conseguir informações adicionais sobre o

website?

Solução: Inclua um link para uma sessão “Sobre o site”

121
Secret

122
 Secret

Contexto: Se o usuário fornece informações privadas, ele necessita saber a

confiabilidade do sistema.

Problema: Como o usuário pode ter certeza que a informação que ele fornece
é protegida?

Solução: Forneça mecanismos de segurança (acesso e privacidade)

necessárias para proteger o usuário e o website e informe ao
usuário as condições de segurança.

123
 Comparação dos Trabalhos
Linguagem Linguagem
Coleção Linguagem Coleções de
Common de Motero et
UI Patterns de Borchers Welie
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 Interface Interação GUI, Web e Web
(Desktop ou com o com Móveis
Web) Usuário Quiosques
Disponibiliza Artigo* Web Livro, Web Artigo
-ção Web Web*
Padrões não sim sim não não não
escritos?

*Não contém todos os padrões do autor

 Modelo de Processo do Projeto da Interação (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

(Dearden, 2002)
 Modelo de Processo do Projeto da Interação (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
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.

(Dearden, 2002)