Embed Size (px)
Citation preview
Prof.ª Dr.ª Junia Coutinho Anacleto
Johana Rosas Villena
2009
Interação Humano-
Computador
Padrões de Interação para Projetos
Web
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
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
Padrões – Histórico
Engenharia de Software (2/2)
1995
1999
1996
1997
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
♦ Tidwell
♦ Coad
♦ Fowler
♦ Etc.
Não existe um formato certo ou
errado
Formato utilizado dependerá da
ê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
● 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
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
Formato de Apresentação de Alexander
Formato de Apresentação de Alexander
Número Nome Confiança
Ilustração
Contexto
Resumo do Problema
ProblemaDetalhado
Formato de Apresentação de Alexander
Solução
Diagrama
Referências
17
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:
Nome
Intenção
Conhecido como
Motivação
Aplicabilidade
Estrutura
Formato de Apresentação de Gamma et al.
18
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
Formato de Apresentação de Gamma et al.
19
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;
};
Note a natureza técnica
destes tipos de padrões.
Não existe entendimento pelo
usuário final leigo
em computação.
Implementação
Formato de Apresentação de Gamma et al.
20
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õesRelacionados
Formato de Apresentação de Gamma et al.
Formato de Apresentação de Welie
22
Nome Autor Problema
Princípio
Contexto
Influências/Motivação
Solução
Raciocínio
Formato de Apresentação de Welie
23
Exemplos
UsosConhecidos
PadrõesRelacionados Implementação
Formato de Apresentação de Welie
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
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
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
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
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
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.
Problem: How does the artifact indicate what kind of information should be
supplied?
Problema
Exemplos
Contexto
Nome
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 for the
artifact itself to figure out.
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).
Solução
Influências/Motivação
ContextoResultante
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 for the
artifact itself to figure out.
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).
Foco nos
interesses do
usuário
Linguagem de Padrões Common Ground - Exemplo
47
Linguagem de Padrões Common Ground
*Visão
Parcial dos
Relacionamentos
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
Porquê
Exemplos
UsadoQuando
Nome
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
Content
Overview Plus Detail
Hub and Spoke
Extras On Demand
Step-by-Step
Instructions
One-Window
Drilldown
Intriguing Branches
Multi-Level Help
Getting Around
Clear Entry Points
Toplevel Navigation
Color-Coded Divisions
Animated Transition
Detail View Navigation
Organizing the Page
Visual Framework
Center Stage
Titled Sections
Card Stack
Closable Panels
Movable Pieces
Progressive Disclosure
Progressive Enabling
Property Sheet
Diagonal Balance
Liquid Layout
Getting Input From Users
Good Defaults
Forgiving Format
Fill-in-the-Blanks
Input Hints
Input Prompt
Dropdown Chooser
Remembered Choices
Illustrated Choices
Coleção UI Patterns and Techniques
Coleção de Padrões (parte 2/2)
Showing Complex Data
Sortable Table
Tree-Table
Alternating Row Colors
Cascading Lists
Jump to Item
New-Item Row
Commands and Actions
Multi-Level Undo
Smart Menu Items
Prominent Done
Prominent Cancel
Action Groups
Rollover Effects
Progress Indicator
Command History
Macros
Direct Manipulation
Smart Selection
Edit-in-Place
One-Off Mode
Spring-Loaded Mode
Constrained Resize
Composite Selection
Simultaneous Views
Stylistic Elements
Deep Background
Few Hues, Many Values
Contrasting Font Weights
Corner Treatments
One-Pixel Lines
Skins
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
Descrição Simplesdo Problema
Ranking
Ilustração
Contexto
Nome
Descrição Detalhadado Problema
A Linguagem de Padrões de Borchers – Exemplo
Solução
Diagrama
Referências
A Linguagem de Padrões de Borchers – Exemplo
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
Solução
Exemplo
Problema
UsadoQuando
Nome
Porquê
MaisExemplos
UsosConhecidos
A Coleção de Welie - Exemplo
A Coleção de Welie
Coleção de Padrões para Web (parte 1/3)
Site Types
· My Site
· Portal
· Commerce Site
· Community Site
· Branded Promo Site
· Corporate Site
· News Site
· Museum Site
· Automotive Site
· Web-based Application
· Travel/booking Site
· Multinational Site
· Artist Site
User Experiences
· Shopping
· Community
· Learning
Ecommerce
· Shopping cart
· Login
· Registering
· Product Comparison
· Product Configurator
· Product Advisor
· Premium Content Lock
· Newsletter
· Case study
· Booking process
· Store Locator
· Virtual Product Display
A Coleção de Welie
Coleção de Padrões para Web (parte 2/3)
· Main Navigation
· Bread crumbs
· Double tab
· Meta Navigation
· Split Navigation
· Repeated Menu
· Faceted
Navigation
· Teaser Menu
· Header-less Menu
· Fly-out Menu
· Directory
· Trail Menu
· Scrolling Menu
· Shortcut Box
Searching
· Simple Search
· Advanced Search
· Search Results
· Search Area
· Sitemap
· Topic Pages
· Search Tips
· Site Index
· Help Wizard
· FAQ
Basic Page Types
· Homepage
· Contact Page
· Processing Page
· Printer-friendly Page
· Article Page
· Blog Page
· Product Page
· Forms
· Input Error Message
· Image Menu
· Guided Tour
· Image Browser
· Minesweeping
· Overlays
· Doormat Navigation
· Outgoing Links
· Panning Navigator
· Map Navigator
Navigation
A Coleção de Welie
Coleção de Padrões para Web (parte 3/3)
Managing Collections
· Column Filter
· Sortable Table
· List builder
· Favourites (Collector)
· Parts Selector
· Sorting
Page Elements
· News box
· Home
· Language Selector
· Country Selector
· Hotlist
· Customization Window
· Poll
· Footer Bar
· Forum
· News ticker
· Constrained Format
Basic Interactions
· Tabbing
· Paging
· Wizard
· Enlarged Clickarea
· Action Button
· Stepping
Visual Design
· Alternating Row Colours
· Grid-based Layout
· Colour-coded Areas
· Liquid Layout
· Font Enlarger
· Center stage
A Coleção de Welie
Coleção de Padrões para GUI
♦ Formato do Padrão:
● Nome
● Autor
● Problema
● Princípio
● Contexto
● Influências/Motivação (Forces)
● Solução
● Raciocínio
● Exemplos
● Usos Conhecidos
● Padrões Relacionados
● Implementação
Apresenta os princípios de
usabilidade que o padrão
auxilia a melhorar. Esses
princípios são os que foram
definidos por Norman (1988).
Nome Autor Problema
Princípio
Contexto
Influências/Motivação
Solução
Raciocínio
A Coleção de Welie - Exemplo
A Coleção de Welie - Exemplo
Exemplos
UsosConhecidos
PadrõesRelacionados
Implementação
A Coleção de Welie
Coleção de Padrões para GUI
Modes
· Automatic Mode Switching
· Helping Hands
· Mode Cursor
Selection
· Magnetism
· Continuous Filter
· Contextual Menu
· Focus!
· Unambiguous Format
· Preview
· Setting Attributes
· Command Area
· Managing Favourites
· Preferences
Guidance/Feedback
· Shield
· Hinting
· Warning
· Progress
· Undo
Navigation
· Wizard
· Softkeys
· Navigating Spaces
· Container Navigation
· List browser
Presentation
· Grid layout
Physical Interaction
· Like in the real world...
· 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
NomeProblema
Solução
Raciocínio
Contexto
Exemplos
UsosConhecidos
PadrõesRelacionados
A Coleção de Welie - Exemplo
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
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.
A Linguagem de Padrões de Montero et al.
Web Sites Páginas Web Ornamentais
Welcome
77
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)
Welcome
Indication
79
Os 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
Indication
Polyglot
81
Permitir o acesso a todos
Problema:
Contexto:
Solução:
Como o usuário faz um uso útil do Web site e as informações acessadas em seu próprio ritmo?
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
Polyglot
Similarity
Quando está navegando pela Internet, o usuário necessita saber
se ele está no mesmo Web site ou não
Problema:
Contexto:
Solução:
Como o usuário sabe se está visitando o mesmo web site?
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
Similarity
Ready
Os usuários que querem visitar seu site precisam ter instalado os
plug-ins necessários.
Problema:
Contexto:
Solução:
Como o usuário sabe que ele pode visitar um web site sem problemas?
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)
Ready
A Linguagem de Padrões de Montero et al.
Web Sites Páginas Web Ornamentais
87
Homepage
88
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)
Homepage
89
Polite
90
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
Polite
91
Busy
92
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)
Busy
93
Second Chance
94
O usuário quer sentir que está no controle de suas operações
Problema:
Contexto:
Solução:
Como o usuário pode ter certeza de suas ações?
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”
Second Chance
95
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
Form
97
Danger
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:
Contexto:
Solução:
Como o usuário visita um web site sem ficar confuso, ser interrompido ou ficar desorientado?
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
Danger
A Linguagem de Padrões de Montero et al.
Web Sites Páginas Web Ornamentais
100
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
Tag Line
102
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.
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).
Subscription
Contact us
Todo website necessita fornecer um meio de contato
Problema:
Contexto:
Solução:
Como o usuário pode pedir informação adicional sobre o conteúdo do website?
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
Contact us
Search
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:
Contexto:
Solução:
Como o usuário pode saber se o website pode fornecer as informações que ele deseja?
Forneça uma ferramenta de busca na (Homepage) ou uma página com uma visão geral do website.
Search
Recognize
Quando um usuário volta a um website ele necessita saber das
ações executadas na sua ultima visita.
Problema:
Contexto:
Solução:
Como o usuário pode saber onde ele já esteve?
Guarde informação sobre as ações do usuário, locais visitados, logins, documentos salvos, etc
uso de cookies
links visitados
Recognize
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
Colour
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.
Location
Novelty
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
118
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
Size
About this
121
Todo website deve fornecer uma maneira fácil de se encontrar
informação sobre a companhia.
Problema:
Contexto:
Solução:
Como o usuário pode conseguir informações adicionais sobre o website?
Inclua um link para uma sessão “Sobre o site”
About this
122
Secret
123
Se o usuário fornece informações privadas, ele necessita saber a
confiabilidade do sistema.
Problema:
Contexto:
Solução:
Como o usuário pode ter certeza que a informação que ele fornece é protegida?
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.
Secret
Comparação dos Trabalhos
sim
Web
Interface
com o
Usuário
Coleção
parcial
40
Coleção
UI Patterns
nãonãonãosimPadrões não
escritos?
ArtigoWebLivro,
Web*
Artigo*
Web
Disponibiliza
-ção
WebGUI, Web e
Móveis
Interação
com
Quiosques
Interação
(Desktop ou
Web)
Propósito
LinguagemColeçãoLinguagemLinguagemOrganização
totalparcialtotalparcialUniformidade
231221760Número de
Padrões
Linguagem
de Motero et
al.
Coleções de
Welie
Linguagem
de Borchers
Linguagem
Common
Ground
*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 ostermos
♦ Facilitador pergunta ao usuário sobre o que eleentendeu sobre o padrão
♦ Facilitador tira as dúvidas do usuário
(Dearden, 2002)
Desenvolvimento da interface
♦ Facilitador guia o usuário no desenvolvimento dainterface
♦ Foque uma tela por vez
♦ Permita ao usuário manipular os padrões
♦ Ao terminar uma tela, facilitador verifica se a telasatisfaz 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çãoa um produto completo.
Modelo de Processo do Projeto da Interação (2/2)
(Dearden, 2002)
![[XLS] · Web view1 1000 5 2 100 1000 1 3000 5 1 100 3000 1 500 5 1 100 500 1 5 0 1 5 0 1 5 0 1 100000 5 2 100 1000 1 5000 5 1 1000 5000 1 500 5 1 100 500 1 5 0 1 5 0 1 1000 5 2 100](https://img.document.onl/doc/110x75/5bf0414609d3f2eb288cb5ca/xls-web-view1-1000-5-2-100-1000-1-3000-5-1-100-3000-1-500-5-1-100-500-1-5.jpg)
