181
Designing Interfaces Patterns for Effective Interaction Design

Designing Interfaces

Embed Size (px)

DESCRIPTION

Slides utilizados na apresentação dos capítulos 4 e 6 da segunda edição do livro "Designing Interfaces" de Jenifer Tidwell.

Citation preview

Page 1: Designing Interfaces

Designing  Interfaces  

Patterns  for  Effective  Interaction  Design  

Page 2: Designing Interfaces

Agenda  

-­‐  Organizando  a  Página  

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

-­‐  Padrões  

-­‐  Fazendo  Coisas  

-­‐  Empurrando  Fronteiras  

-­‐  Padrões  

Page 3: Designing Interfaces

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  

 

Page 4: Designing 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  

Page 5: Designing Interfaces

Princípios  de  Gestalt  

Page 6: Designing Interfaces

Hierarquia  Visual  

-­‐  O  que  é  importante?  

-­‐  O  que  está  relacionado?  

-­‐  Destaque  o  que  é  importante  

-­‐  Estrutura  informacional  

-­‐  Títulos  

-­‐  Subtítulos  

-­‐  Listas  

Page 7: Designing Interfaces

Como  fazer  as  coisas  parecerem  importantes?  

Page 8: Designing Interfaces

Como  mostrar  relação  entre  elementos  da  página?  

Page 9: Designing Interfaces

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?  

Page 10: Designing Interfaces

Como  crio  um  bom  fluxo  visual?  

Page 11: Designing Interfaces

Weather  Underground  

Page 12: Designing Interfaces

Visual  Framework  

Page 13: Designing Interfaces

JAQK  

Page 14: Designing Interfaces

Visual  Framework  

-­‐  O  mesmo  leiaute  básico  com  flexibilidade  

-­‐  Múltiplas  páginas  ou  janelas  

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

-­‐  Como?  

Page 15: Designing Interfaces

Visual  Framework  

-­‐  Características  compartilhadas:  

-­‐  Cores  

-­‐  Fontes  

-­‐  Estilo  de  escrita  e  gramática  

-­‐  Separa  apresentação  do  conteúdo  

Page 16: Designing Interfaces

JetBlue  

Page 17: Designing Interfaces

JetBlue  

Page 18: Designing Interfaces

TED  

Page 19: Designing Interfaces

TED  

Page 20: Designing Interfaces

TED  

Page 21: Designing Interfaces

Center  stage  

Page 22: Designing Interfaces

Adobe  Fireworks  

Page 23: Designing Interfaces

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?  

Page 24: Designing Interfaces

Center  Stage  

-­‐  Tamanho  do  palco  

-­‐  Cores  contrastantes  

-­‐  Títulos  

-­‐  Contexto  

Page 25: Designing Interfaces

Google  docs  

Page 26: Designing Interfaces

Newfangled  

Page 27: Designing Interfaces

Steepster  

Page 28: Designing Interfaces

Grid  of  equals  

Page 29: Designing Interfaces

NIKE  

Page 30: Designing Interfaces

Grid  of  Equals  

-­‐  Conteúdo  em  grades  

-­‐  Itens  com:  

-­‐  Conteúdo  de  mesmo  estilo  

-­‐  Conteúdo  de  mesma  importância  

-­‐  Como?  

Page 31: Designing Interfaces

Grid  of  Equals  

-­‐  Miniaturas  

-­‐  Títulos,  subtítulos  e  resumo  

-­‐  Links  

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

-­‐  Organizar  em  grade  

Page 32: Designing Interfaces

Hulu  

Page 33: Designing Interfaces

CNN  

Page 34: Designing Interfaces

Titled  sections  

Page 35: Designing Interfaces

Titled  Sections  

-­‐  O  que  é?  

-­‐  Quando  utilizar?  

-­‐  Por  que  utilizar?  

-­‐  Como  utilizar?  

Page 36: Designing Interfaces

JetBlue  

Page 37: Designing Interfaces

Amazon  

Page 38: Designing Interfaces

iTunes  

Page 39: Designing Interfaces

Module  Tabs  

Page 40: Designing Interfaces

Module  Tables  

-­‐  O  que  é?  

-­‐  Quando  utilizar?  

-­‐  Por  que  utilizar?  

-­‐  Como  utilizar?  

Page 41: Designing Interfaces

Map  Quest  

Page 42: Designing Interfaces

Excel  

Page 43: Designing Interfaces

Excel  

Page 44: Designing Interfaces

iWeb  

Page 45: Designing Interfaces

Source  Forge  

Page 46: Designing Interfaces

Accordion  

Page 47: Designing Interfaces

Accordion  

-­‐  O  que  é?  

-­‐  Quando  utilizar?  

-­‐  Por  que  utilizar?  

-­‐  Como  utilizar?  

Page 48: Designing Interfaces

Word  Palette  

Page 49: Designing Interfaces

Picasa  Sidebar  

Page 50: Designing Interfaces

Chrome  Sidebar  

Page 51: Designing Interfaces

CNN  sidebar  

Page 52: Designing Interfaces

Collapsible  Panels  

Page 53: Designing Interfaces

Collapsible  Panels  

-­‐  O  que  é?  

-­‐  Quando  utilizar?  

-­‐  Por  que  utilizar?  

-­‐  Como  utilizar?  

Page 54: Designing Interfaces

Google  Maps  

Page 55: Designing Interfaces

MSNBC  article  comments  

Page 56: Designing Interfaces

MSNBC  article  comments  

Page 57: Designing Interfaces

Firefox  bookmarks  sidebar  

Page 58: Designing Interfaces

YouTube’s  collapsible  panels  

Page 59: Designing Interfaces

YouTube’s  collapsible  panels  

Page 60: Designing Interfaces

Movable  Panels  

Page 61: Designing Interfaces

-­‐  O  que  é?  

-­‐  Quando  utilizar?  

-­‐  Por  que  utilizar?  

-­‐  Como  utilizar?  

Movable  Panels  

Page 62: Designing Interfaces

My  Yahoo!  

Page 63: Designing Interfaces

iGoogle  

Page 64: Designing Interfaces

iGoogle  

Page 65: Designing Interfaces

MATLAB  desktop  

Page 66: Designing Interfaces

Photoshop  Desktop  

Page 67: Designing Interfaces

Right/Left  Alignment  

Page 68: Designing Interfaces

-­‐  Tabela  ou  formulário  de  duas  colunas  

-­‐  Alinhamento  de  rótulos  e  itens  

-­‐  Rótulos  possuem  tamanhos  diferentes  

Right/Left  Alignment  

Page 69: Designing Interfaces

Mac  OS  

Page 70: Designing Interfaces

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  

Page 71: Designing Interfaces

Right/Left  Alignment  

-­‐  Rótulos  alinhados  à  direita  -­‐  Itens  alinhados  à  esquerda  -­‐  Colunas  separadas  por  duas  linhas  imaginárias  

Page 72: Designing Interfaces

Mac  OS  

Page 73: Designing Interfaces

Diagonal  Balance  

Page 74: Designing Interfaces

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

Page 75: Designing Interfaces

Windows  7  

Page 76: Designing Interfaces

-­‐  Composição  equilibrada  na  tela  -­‐  Extremidades  e  lados  opostos  -­‐  "Peso"  de  cada  elemento  -­‐  Fluxo  visual  -­‐  Olho  é  direcionado  para  elementos  de  ação  

Diagonal  Balance  

Page 77: Designing Interfaces

-­‐  Elementos  fortes  no  canto  superior  esquerdo  -­‐  Botões  no  canto  inferior  direito  -­‐  Elementos  centrais  também  influenciam  

Diagonal  Balance  

Page 78: Designing Interfaces

Starbucks  

Page 79: Designing Interfaces

Mini  Cooper  

Page 80: Designing Interfaces

Responsive  Disclosure  

Page 81: Designing Interfaces

-­‐  Interface  inicialmente  pequena  -­‐  Interface  aumenta  conforme  a  opção  do  usuário  -­‐  Elimina  necessidade  de  mais  páginas  

Responsive  Disclosure  

Page 82: Designing Interfaces

AutoTrader  

Page 83: Designing Interfaces

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

Page 84: Designing Interfaces

-­‐  Controles  e  textos  do  primeiro  passo  -­‐  Próximos  passos  aparecem  de  acordo  com  ação  do  usuário  -­‐  Passos  anteriores  sempre  visíveis  

Responsive  Disclosure  

Page 85: Designing Interfaces

Kayak  

Page 86: Designing Interfaces

Google  Docs  

Page 87: Designing Interfaces

Responsive  Enabling  

Page 88: Designing Interfaces

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

Page 89: Designing Interfaces

Turbo  Tax  

Page 90: Designing Interfaces

-­‐  Primeiro  passo:  apenas  ações  relevantes  -­‐  Ações  ficam  desabilitadas  até  serem  necessárias  -­‐  Proximidade  das  ações  dependentes  

Responsive  Enabling  

Page 91: Designing Interfaces

Mac  OS  

Page 92: Designing Interfaces

Lexus  

Page 93: Designing Interfaces

Liquid  Layout  

Page 94: Designing Interfaces

-­‐   A   página   é   preenchida   conforme   a  dimensão  da  janela  -­‐  Flexibilidade  à  alterações  -­‐  Elementos  principais  têm  prioridade  -­‐  Alteração  do  tamanho  

Liquid  Layout  

Page 95: Designing Interfaces

Mac  OS  

Page 96: Designing Interfaces

Drupal.org  

Page 97: Designing Interfaces

Google  Docs  

Page 98: Designing Interfaces

Actions  and  Commands  

Page 99: Designing Interfaces

-­‐  Botões  -­‐  Barras  de  menu  -­‐  Menus  pop-­‐up  -­‐  Menus  dropdown  -­‐  Toolbars  -­‐  Links  -­‐  Paineis  de  ações  -­‐  Ferramentas  hover  

Actions  mais  comuns  

Page 100: Designing Interfaces

-­‐  Clique  duplo  -­‐  Ações  do  teclado  -­‐  Arrastar  e  soltar  -­‐  Comandos  digitados  

Actions  invisíveis    

Page 101: Designing Interfaces

GarageBand  

Page 102: Designing Interfaces
Page 103: Designing Interfaces
Page 104: Designing Interfaces

Padrões  

Representam  Ações  imediatas:      -­‐  Grupos  de  botões      -­‐  Ferramentas  flutuantes  (hover)      -­‐  Action  panels  

Page 105: Designing Interfaces

Facilitam  a  navegação  e  utilização  

-­‐  Botão  “Done”  chamativo  

-­‐  Itens  de  menu  inteligentes  

Padrões  

Page 106: Designing Interfaces

 

-­‐  Preview  

-­‐  Indicador  de  progresso  

-­‐  Cancelabilidade  

Padrões  

Page 107: Designing Interfaces

Padrões  

 

-­‐  Multi-­‐Level  Undo  

-­‐  Command  History  

-­‐  Macros  

Page 108: Designing Interfaces

Button  Groups  

Page 109: Designing Interfaces

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  

Button  Groups  

Page 110: Designing Interfaces

Button  Groups  

Page 111: Designing Interfaces

Button  Groups  

Page 112: Designing Interfaces

iTunes  

Page 113: Designing Interfaces

Hoover  Tools  

Page 114: Designing Interfaces

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  

 

Page 115: Designing Interfaces

GoogleDocs  

Page 116: Designing Interfaces

Twitter  

Page 117: Designing Interfaces

Twitter  

Page 118: Designing Interfaces

Hoover  Tools  

Page 119: Designing Interfaces

Hoover  Tools  

Page 120: Designing Interfaces

Action  Panel  

Page 121: Designing Interfaces

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  

 

Action  Panels  

Page 122: Designing Interfaces

Mac  OS  

Page 123: Designing Interfaces

Windows  7  

Page 124: Designing Interfaces

Prominent  “Done”  Button  

Page 125: Designing Interfaces

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

Prominent  “Done”  Button  

Page 126: Designing Interfaces

Songza  

Page 127: Designing Interfaces

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

Prominent  “Done”  Button  

Page 128: Designing Interfaces

JetBlue   Southwest  

Page 129: Designing Interfaces

Kayak  

Page 130: Designing Interfaces

American  Airlines  

Page 131: Designing Interfaces

Smart  Menu  Itens  

Page 132: Designing Interfaces

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

Smart  Menu  Itens  

Page 133: Designing Interfaces

Mac  Mail  

Page 134: Designing Interfaces

Smart  Menu  Itens  

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

Page 135: Designing Interfaces

Illustrator  

Page 136: Designing Interfaces

Gmail  Menu  

Page 137: Designing Interfaces

Preview  

Page 138: Designing Interfaces

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

Page 139: Designing Interfaces

PowerPoint  

Page 140: Designing Interfaces

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

Preview  

Page 141: Designing Interfaces

Picasa  

Page 142: Designing Interfaces

Starbucks  

Page 143: Designing Interfaces

Progress  Indicator  

Page 144: Designing Interfaces

- 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  

Page 145: Designing Interfaces

Mac  OS  

Page 146: Designing Interfaces

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

Progress  Indicator  

Page 147: Designing Interfaces

Flickr  

Page 148: Designing Interfaces

Grooveshark  

Page 149: Designing Interfaces

Cancelability  

Page 150: Designing Interfaces

Cancelability  

O  que  é?  -­‐  Provê  uma  maneira  instantânea  de  cancelar  uma  operação  demorada  sem  efeitos  colaterais.  

Page 151: Designing Interfaces

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.  

Page 152: Designing Interfaces

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.  

Page 153: Designing Interfaces

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  

Page 154: Designing Interfaces

Firefox  

Page 155: Designing Interfaces

Adobe  AIR  installation  diaog  

Page 156: Designing Interfaces

Mac  OS  copy  dialog  

Page 157: Designing Interfaces

Multi-­‐level  Undo  

Page 158: Designing Interfaces

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  

Page 159: Designing Interfaces

Multi  level  undo  

Por  que  utilizar?  

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

 

 

Page 160: Designing Interfaces

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,  modificações  em  leiaute,    

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

Page 161: Designing Interfaces

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.  

Page 162: Designing Interfaces

Como  mostrar:  

-­‐  Um  botão  Undo/Redo.  

-­‐  Apertar  o  CRTL+Z.  

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

Multi  level  undo  

Page 163: Designing Interfaces

Photoshop  

Page 164: Designing Interfaces

Microsoft  Word  

Page 165: Designing Interfaces

PowerPoint  

Page 166: Designing Interfaces

Command  History  

Page 167: Designing Interfaces

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.  

Page 168: Designing Interfaces

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  

Page 169: Designing Interfaces

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.  

Command  History  

Page 170: Designing Interfaces

MATLAB’s  command  history  

Page 171: Designing Interfaces

Unix  Shell  

Page 172: Designing Interfaces

Macros  

Page 173: Designing Interfaces

O  que  é?  

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

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

ser  aplicada  repetidas  vezes.  

Macros  

Page 174: Designing Interfaces

Macros  

Por  que  utilizar?  

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

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

Page 175: Designing Interfaces

Macros  

Como  utilizar?  

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

-­‐  Prover  uma  maneira  do  usuário  definir  uma  

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

Page 176: Designing Interfaces

Macros  Como  utilizar?  

-­‐  Definindo  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.  

Page 177: Designing Interfaces

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é  

definir  uma  gramática  nova  ou  uma  gramática  visual.  

Page 178: Designing Interfaces

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é  definir  uma  gramática  nova  ou  uma  

gramática  visual.  

Page 179: Designing Interfaces

Photoshop  

Page 180: Designing Interfaces

Excel  Macros  

Page 181: Designing Interfaces

Obrigado!