Effective Interface Design Patterns

Designing
Interfaces

Patterns
for
Eﬀective
Interaction
Design

Agenda

-‐
Organizando
a
Página

-‐
O
Básico
de
Leiaute
de
Páginas

-‐
Padrões

-‐
Fazendo
Coisas

-‐
Empurrando
Fronteiras

-‐
Padrões

Leiaute
dos
Elementos
da
Página

-‐
Manipulação
da
atenção
do
usuário

-‐
Conceitos:

-‐
Agrupamento
e
alinhamento

-‐
Hierarquia
visual

-‐
Fluxo
visual
e
pontos
focais

-‐
Como
aplicá-‐los
no
design
de
interfaces

Princípios
de
Gestalt

-‐
Teoria
por
trás
do
agrupamento
e
alinhamento

-‐
Desenvolvida
no
século
19

-‐
Leiautes
embutidos
em
nosso
sistema
visual

-‐
Melhor
quando
combinados

Princípios
de
Gestalt

Hierarquia
Visual

-‐
O
que
é
importante?

-‐
O
que
está
relacionado?

-‐
Destaque
o
que
é
importante

-‐
Estrutura
informacional

-‐
Títulos

-‐
Subtítulos

-‐
Listas

Como
fazer
as
coisas
parecerem

importantes?

Como
mostrar
relação
entre

elementos
da
página?

Fluxo
Visual

-‐
O
que
deve
ser
a
próxima
coisa
a
olhar?

-‐
Faixas
que
os
olhos
tendem
a
seguir

-‐
Tendência:
⇓

-‐
Pontos
focais
–
Muitos
ou
poucos?

Como
crio
um
bom
ﬂuxo
visual?

Visual
Framework

-‐
O
mesmo
leiaute
básico
com
ﬂexibilidade

-‐
Múltiplas
páginas
ou
janelas

-‐
Usuário
sabe
onde
estão
as
coisas

-‐
Como?

Visual
Framework

-‐
Características
compartilhadas:

-‐
Cores

-‐
Fontes

-‐
Estilo
de
escrita
e
gramática

-‐
Separa
apresentação
do
conteúdo

Center
Stage

-‐
Parte
mais
importante
ocupando
maior
parte

-‐
Outras
partes
agrupadas
ao
redor

-‐
Uma
única
unidade
de
informação
coerente

-‐
Guiar
os
olhos
para
o
mais
importante

-‐
Como?

Center
Stage

-‐
Tamanho
do
palco

-‐
Cores
contrastantes

-‐
Títulos

-‐
Contexto

Grid
of
Equals

-‐
Conteúdo
em
grades

-‐
Itens
com:

-‐
Conteúdo
de
mesmo
estilo

-‐
Conteúdo
de
mesma
importância

-‐
Como?

Grid
of
Equals

-‐
Miniaturas

-‐
Títulos,
subtítulos
e
resumo

-‐
Links

-‐
Todas
informações
em
um
pequeno
espaço

-‐
Organizar
em
grade

Titled
Sections

-‐
O
que
é?

-‐
Quando
utilizar?

-‐
Por
que
utilizar?

-‐
Como
utilizar?

Module
Tables

-‐
O
que
é?

-‐
Quando
utilizar?

-‐
Por
que
utilizar?

-‐
Como
utilizar?

Accordion

-‐
O
que
é?

-‐
Quando
utilizar?

-‐
Por
que
utilizar?

-‐
Como
utilizar?

Collapsible
Panels

-‐
O
que
é?

-‐
Quando
utilizar?

-‐
Por
que
utilizar?

-‐
Como
utilizar?

MSNBC
article
comments

Firefox
bookmarks
sidebar

YouTube’s
collapsible
panels

Movable
Panels

-‐
O
que
é?

-‐
Quando
utilizar?

-‐
Por
que
utilizar?

-‐
Como
utilizar?

Right/Left
Alignment

-‐
Tabela
ou
formulário
de
duas
colunas

-‐
Alinhamento
de
rótulos
e
itens

-‐
Rótulos
possuem
tamanhos
diferentes

Right/Left
Alignment

-‐
Agrupamento
fortemente
perceptível

-‐
Facilidade
em
conectar
rótulo
ao
item

-‐
Gestalt:
princípio
da
proximidade

-‐
Espaçamento
uniforme

-‐
Gestalt:
princípio
da
continuidade

-‐
Fluxo
visual
facilitado

Right/Left
Alignment

-‐
Rótulos
alinhados
à
direita

-‐
Itens
alinhados
à
esquerda

-‐
Colunas
separadas
por
duas
linhas

imaginárias

Diagonal
Balance

-‐
Combinação
de
elementos
assimétricos

-‐
Equilíbrio
visual

-‐
Canto
superior
esquerdo

-‐
Canto
inferior
direito

-‐
Parte
superior:
título
ou
cabeçalho

-‐
Parte
inferior:
links
ou
botões

Diagonal
Balance

-‐
Composição
equilibrada
na
tela

-‐
Extremidades
e
lados
opostos

-‐
"Peso"
de
cada
elemento

-‐
Fluxo
visual

-‐
Olho
é
direcionado
para
elementos
de
ação

Diagonal
Balance

-‐
Elementos
fortes
no
canto
superior
esquerdo

-‐
Botões
no
canto
inferior
direito

-‐
Elementos
centrais
também
inﬂuenciam

Responsive
Disclosure

-‐
Interface
inicialmente
pequena

-‐
Interface
aumenta
conforme
a
opção
do

usuário

-‐
Elimina
necessidade
de
mais
páginas

Responsive
Disclosure

-‐
Usuário
acompanha
desdobramento
da
tarefa

-‐
Facilidade
em
alterar
opções
anteriores

-‐
Comparativo:
Wizards
em
tela
própria

-‐
Comparativo:
todas
as
opções
de
uma
vez

Responsive
Disclosure

-‐
Controles
e
textos
do
primeiro
passo

-‐
Próximos
passos
aparecem
de
acordo
com
ação
do

usuário

-‐
Passos
anteriores
sempre
visíveis

Responsive
Enabling

-‐
Interface
com
opções
visíveis
mas
desabilitadas

-‐
Opções
são
habilitadas
conforme
escolha
do

usuário

-‐
Estabilidade
na
interface

-‐
Mostra
consequência
das
escolhas

-‐
Erros
desnecessários
são
evitados

Responsive
Enabling

-‐
Primeiro
passo:
apenas
ações
relevantes

-‐
Ações
ﬁcam
desabilitadas
até
serem

necessárias

-‐
Proximidade
das
ações
dependentes

Liquid
Layout

-‐
A
página
é
preenchida
conforme
a

dimensão
da
janela

-‐
Flexibilidade
à
alterações

-‐
Elementos
principais
têm
prioridade

-‐
Alteração
do
tamanho

Actions
mais
comuns

-‐
Botões

-‐
Barras
de
menu

-‐
Menus
pop-‐up

-‐
Menus
dropdown

-‐
Toolbars

-‐
Links

-‐
Paineis
de
ações

-‐
Ferramentas
hover

Actions
invisíveis

-‐
Clique
duplo

-‐
Ações
do
teclado

-‐
Arrastar
e
soltar

-‐
Comandos
digitados

Padrões

Representam
Ações
imediatas:

-‐
Grupos
de
botões

-‐
Ferramentas
ﬂutuantes
(hover)

-‐
Action
panels

Padrões

Facilitam
a
navegação
e
utilização

-‐
Botão
“Done”
chamativo

-‐
Itens
de
menu
inteligentes

Padrões

-‐
Preview

-‐
Indicador
de
progresso

-‐
Cancelabilidade

Padrões

-‐
Multi-‐Level
Undo

-‐
Command
History

-‐
Macros

Button
Groups

O
que
é?

-‐
Botões
agrupados
por
funcionalidade

Quando
utilizar?

-‐
Vários
botões
que
fazem
atividades
semelhantes

Por
que
utilizar?

-‐
Interface
auto-‐utilizável

-‐
Facilidade
de
uso

Hoover
Tools

O
que
é?

-‐
Botões
ocultos
que
aparecem
quando
necessários

Quando
utilizar?

-‐
Quando
espaço
livre
é
importante

Porque
utilizar?

-‐
Interface
limpa
e
amigável

-‐
Aparecem
apenas
quando
necessário

Action
Panels

O
que
é?

-‐
Grupo
de
botões
em
um
painel

Quando
utilizar?

-‐
Muitas
ações
necessárias
ao
mesmo
tempo

Por
que
utilizar?

-‐
Ações
sempre
à
vista

-‐
Espaço
disponível

-‐
Liberdade
de
Apresentação

Prominent
“Done”
Button

Prominent
“Done”
Button

- Botão bem destacado.
- Finaliza uma operação
- "Ok", "Enviar", "Continuar", "Submeter"...

Prominent
“Done”
Button

- Fácil entendimento (fluxo)
- Aparência de botão (não um link)
- Próximo ao último campo do
formulário

Smart
Menu
Itens

- Menus dinâmicos
- Relacionados ao estado atual
- UI auto explicativa

Smart
Menu
Itens

- Mais intuitivo
- Menos que representam ação (verbo)

Preview

- Prever o resultado de ações
- Ações que consumam tempo ou material
- Verificar se as alterações serão agradáveis
- Prevenir erros
- Aplicações descritivas

Preview

- Antes de alguma ação
- Imagem para prever a ação
- Mostrar o importante, nada mais
- Maneira de confirmar ou evitar a ação

Progress
Indicator

- Mostrar o consumo de tempo
- Operações que levam mais de 2 segundos
- Usuários querem saber o que está
acontecendo
- Estudo mostra que usuários são mais
pacientes diante de uma barra de progresso

Progress
Indicator

- Indicador animado (imagem ou texto)
- Mostra o que está acontecendo
- Tempo decorrido e estimado*
- Como parar a operação (padrão Cancelability)

Cancelability

O
que
é?

-‐
Provê
uma
maneira
instantânea
de
cancelar

uma
operação
demorada
sem
efeitos

colaterais.

Cancelability

Quando
utilizar?

-‐
Operação
que
leva
mais
de
2
segundos
executada

em
segundo
plano.

-‐
Operação
que
consome
um
tempo
grande
e
trava
a

UI.

Cancelability

Por
que
utilizar?

-‐
O
usuário
pode
mudar
de
ideia.

-‐
Usuário
pode
ter
iniciado
a
operação
por
acidente.

-‐
Encoraja
a
Exploração
Segura.

Cancelability

Como
utilizar?

-‐
Colocar
o
botão
de
“Cancelar”
perto
da
barra
de
progresso

-‐
O
botão
pode
ser,
um
Stop/Cancel,
um
octógono
vermelho
ou
um

círculo
vermelho
ou
um
“X”

-‐
A
operação
para
assim
que
clicado

-‐
Informar
que
a
operação
foi
cancelada,
parar
a
barra
de
progresso
e

mostrar
uma
mensagem
de
status

Adobe
AIR
installation
diaog

Multi
level
undo

O
que
é?

-‐
Fornece
uma
maneira
fácil
de
desfazer
ações
feitas.

Quando
utilizar?

-‐
Quando
a
interface
do
usuário
for
altamente
interativa.

-‐
Mais
complexa
do
que
a
simples
navegação.

-‐
Formulário
de
preenchimento.

Multi
level
undo

Por
que
utilizar?

-‐  Deixa
a
interface
mais
segura
para
exploração.

Multi
level
undo

Como
utilizar?

-‐
Operações
desfactíveis:

-‐
Decidir
quais
operações
serão
desfactíveis.

-‐
O
software
o
qual
a
interface
é
construída
deve
ter
um
modelo
de

como
ocorre
a
ação.

-‐
Tipos:
entrada
de
texto,
operações
em
BD,
modiﬁcações
em
leiaute,

-‐
Operações
com
arquivos
e
qualquer
operação
de
cortar,
copiar
e
colar.

Multi
level
undo

Como
utilizar?

-‐
Projetando
uma
pilha
“Desfaz”:

-‐
Cada
operação
vai
para
o
topo
da
pilha
assim
que
terminada.

-‐
Cada
“desfaz”
reverte
a
operação
do
topo
da
pilha.

-‐
A
pilha
deve
ter
pelo
menos
12
itens
e
no
máximo
quanto
a

aplicação
puder
suportar.

Multi
level
undo

Como
mostrar:

-‐
Um
botão
Undo/Redo.

-‐
Apertar
o
CRTL+Z.

-‐
Lista
rolante
com
as
operações
feitas.

Command
History

O
que
é?

-‐
Mantém
um
registro
das
ações
do
usuário,
o
que
foi
feito
e

quando.

Quando
utilizar?

-‐
Quando
o
usuário
executar
uma
sequência
longa
e
complexa.

-‐
Serve
para
GUI
e
CLI.

Command
History

Por
que
utilizar?

-‐
Lembrar
ou
rever
o
que
foi
feito
no
decorrer
do
trabalho.

-‐
Repetir
uma
ação
ou
um
comando
que
o
usuário
não
lembra
bem.

-‐
Relembrar
uma
sequência
de
ações.

-‐
Manter
um
log
para
segurança.

-‐
Converter
em
script.

Command
History

Como
utilizar?

-‐
Manter
uma
lista
onde
serão
as
ações
dos
usuários.

-‐
No
caso
de
uma
CLI,
apenas
grave
tudo
que
for
digitado.

-‐
Em
interfaces
mistas,
use
maneiras
consistentes
e
concisas(palavras)

-‐
Mostrar
o
histórico
sem
o
usuário
pedir
pode
ser
opcional.

MATLAB’s
command
history

Macros

O
que
é?

-‐
Ações
compostas
por
ações
menores.

-‐
Serve
para
representar
um
conjunto
de
ações
para

ser
aplicada
repetidas
vezes.

Macros

Por
que
utilizar?

-‐
Ajuda
na
execução
de
um
conjunto
de
tarefas.

-‐
Auxilia
também
o
usuário
a
trabalhar
mais
rápido.

Macros

Como
utilizar?

-‐
Ajuda
na
execução
de
um
conjunto
de
tarefas.

-‐
Prover
uma
maneira
do
usuário
deﬁnir
uma

sequencia
de
ações
e
executá-‐las
de
forma
fácil.

Macros

Como
utilizar?

-‐
Deﬁnindo
uma
macro

-‐O
usuário
deve
poder
atribuir
um
nome
da
sua

escolha
à
macro.

-‐
Deixá-‐lo
rever
a
sequência
de
ações.

-‐
Uma
macro
pode
referenciar
outras.

-‐
Salvar
essa
macro
para
um
uso
posterior.

Macros

Como
utilizar?

-‐
Executando
uma
macro

-‐
A
macro
pode
ser
reproduzida
literalmente

-‐
Macros
devem
agir
sobre
várias
coisas
ao
mesmo
tempo.

-‐
As
macros
tem
capacidade
de
criar
outras
e
o
usuário
pode
até

deﬁnir
uma
gramática
nova
ou
uma
gramática
visual.

Macros
-‐
Exemplo

Executando
uma
macro

-‐
A
macro
pode
ser
reproduzida
literalmente

-‐
Macros
devem
agir
sobre
várias
coisas
ao
mesmo

tempo.

-‐
As
macros
tem
capacidade
de
criar
outras
e
o
usuário

pode
até
deﬁnir
uma
gramática
nova
ou
uma

gramática
visual.

Effective Interface Design Patterns

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (6)

Similar a Effective Interface Design Patterns

Similar a Effective Interface Design Patterns (20)

Effective Interface Design Patterns