Designing Interfaces

953 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
953
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
41
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Designing Interfaces

  1. 1. Designing  Interfaces  Patterns  for  Effective  Interaction  Design  
  2. 2. Agenda  -­‐  Organizando  a  Página   -­‐  O  Básico  de  Leiaute  de  Páginas   -­‐  Padrões  -­‐  Fazendo  Coisas   -­‐  Empurrando  Fronteiras   -­‐  Padrões  
  3. 3. 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    
  4. 4. 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  
  5. 5. Princípios  de  Gestalt  
  6. 6. Hierarquia  Visual  -­‐  O  que  é  importante?  -­‐  O  que  está  relacionado?  -­‐  Destaque  o  que  é  importante  -­‐  Estrutura  informacional   -­‐  Títulos   -­‐  Subtítulos   -­‐  Listas  
  7. 7. Como  fazer  as  coisas  parecerem   importantes?  
  8. 8. Como  mostrar  relação  entre   elementos  da  página?  
  9. 9. 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?  
  10. 10. Como  crio  um  bom  fluxo  visual?  
  11. 11. Weather  Underground  
  12. 12. Visual  Framework  
  13. 13. JAQK  
  14. 14. Visual  Framework  -­‐  O  mesmo  leiaute  básico  com  flexibilidade  -­‐  Múltiplas  páginas  ou  janelas  -­‐  Usuário  sabe  onde  estão  as  coisas  -­‐  Como?  
  15. 15. Visual  Framework  -­‐  Características  compartilhadas:   -­‐  Cores   -­‐  Fontes   -­‐  Estilo  de  escrita  e  gramática  -­‐  Separa  apresentação  do  conteúdo  
  16. 16. JetBlue  
  17. 17. JetBlue  
  18. 18. TED  
  19. 19. TED  
  20. 20. TED  
  21. 21. Center  stage  
  22. 22. Adobe  Fireworks  
  23. 23. 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?  
  24. 24. Center  Stage  -­‐  Tamanho  do  palco  -­‐  Cores  contrastantes  -­‐  Títulos  -­‐  Contexto  
  25. 25. Google  docs  
  26. 26. Newfangled  
  27. 27. Steepster  
  28. 28. Grid  of  equals  
  29. 29. NIKE  
  30. 30. Grid  of  Equals  -­‐  Conteúdo  em  grades  -­‐  Itens  com:   -­‐  Conteúdo  de  mesmo  estilo   -­‐  Conteúdo  de  mesma  importância  -­‐  Como?  
  31. 31. Grid  of  Equals  -­‐  Miniaturas  -­‐  Títulos,  subtítulos  e  resumo  -­‐  Links  -­‐  Todas  informações  em  um  pequeno  espaço  -­‐  Organizar  em  grade  
  32. 32. Hulu  
  33. 33. CNN  
  34. 34. Titled  sections  
  35. 35. Titled  Sections  -­‐  O  que  é?  -­‐  Quando  utilizar?  -­‐  Por  que  utilizar?  -­‐  Como  utilizar?  
  36. 36. JetBlue  
  37. 37. Amazon  
  38. 38. iTunes  
  39. 39. Module  Tabs  
  40. 40. Module  Tables  -­‐  O  que  é?  -­‐  Quando  utilizar?  -­‐  Por  que  utilizar?  -­‐  Como  utilizar?  
  41. 41. Map  Quest  
  42. 42. Excel  
  43. 43. Excel  
  44. 44. iWeb  
  45. 45. Source  Forge  
  46. 46. Accordion  
  47. 47. Accordion  -­‐  O  que  é?  -­‐  Quando  utilizar?  -­‐  Por  que  utilizar?  -­‐  Como  utilizar?  
  48. 48. Word  Palette  
  49. 49. Picasa  Sidebar  
  50. 50. Chrome  Sidebar  
  51. 51. CNN  sidebar  
  52. 52. Collapsible  Panels  
  53. 53. Collapsible  Panels  -­‐  O  que  é?  -­‐  Quando  utilizar?  -­‐  Por  que  utilizar?  -­‐  Como  utilizar?  
  54. 54. Google  Maps  
  55. 55. MSNBC  article  comments  
  56. 56. MSNBC  article  comments  
  57. 57. Firefox  bookmarks  sidebar  
  58. 58. YouTube’s  collapsible  panels  
  59. 59. YouTube’s  collapsible  panels  
  60. 60. Movable  Panels  
  61. 61. Movable  Panels  -­‐  O  que  é?  -­‐  Quando  utilizar?  -­‐  Por  que  utilizar?  -­‐  Como  utilizar?  
  62. 62. My  Yahoo!  
  63. 63. iGoogle  
  64. 64. iGoogle  
  65. 65. MATLAB  desktop  
  66. 66. Photoshop  Desktop  
  67. 67. Right/Left  Alignment  
  68. 68. Right/Left  Alignment  -­‐  Tabela  ou  formulário  de  duas  colunas  -­‐  Alinhamento  de  rótulos  e  itens  -­‐  Rótulos  possuem  tamanhos  diferentes  
  69. 69. Mac  OS  
  70. 70. 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  
  71. 71. Right/Left  Alignment  -­‐  Rótulos  alinhados  à  direita  -­‐  Itens  alinhados  à  esquerda  -­‐  Colunas  separadas  por  duas  linhas  imaginárias  
  72. 72. Mac  OS  
  73. 73. Diagonal  Balance  
  74. 74. 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  
  75. 75. Windows  7  
  76. 76. Diagonal  Balance  -­‐  Composição  equilibrada  na  tela  -­‐  Extremidades  e  lados  opostos  -­‐  "Peso"  de  cada  elemento  -­‐  Fluxo  visual  -­‐  Olho  é  direcionado  para  elementos  de  ação  
  77. 77. Diagonal  Balance  -­‐  Elementos  fortes  no  canto  superior  esquerdo  -­‐  Botões  no  canto  inferior  direito  -­‐  Elementos  centrais  também  influenciam  
  78. 78. Starbucks  
  79. 79. Mini  Cooper  
  80. 80. Responsive  Disclosure  
  81. 81. Responsive  Disclosure  -­‐  Interface  inicialmente  pequena  -­‐  Interface  aumenta  conforme  a  opção  do  usuário  -­‐  Elimina  necessidade  de  mais  páginas  
  82. 82. AutoTrader  
  83. 83. 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  
  84. 84. 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  
  85. 85. Kayak  
  86. 86. Google  Docs  
  87. 87. Responsive  Enabling  
  88. 88. 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  
  89. 89. Turbo  Tax  
  90. 90. Responsive  Enabling  -­‐  Primeiro  passo:  apenas  ações  relevantes  -­‐  Ações  ficam  desabilitadas  até  serem  necessárias  -­‐  Proximidade  das  ações  dependentes  
  91. 91. Mac  OS  
  92. 92. Lexus  
  93. 93. Liquid  Layout  
  94. 94. Liquid  Layout  -­‐   A   página   é   preenchida   conforme   a  dimensão  da  janela  -­‐  Flexibilidade  à  alterações  -­‐  Elementos  principais  têm  prioridade  -­‐  Alteração  do  tamanho  
  95. 95. Mac  OS  
  96. 96. Drupal.org  
  97. 97. Google  Docs  
  98. 98. Actions  and  Commands  
  99. 99. Actions  mais  comuns  -­‐  Botões  -­‐  Barras  de  menu  -­‐  Menus  pop-­‐up  -­‐  Menus  dropdown  -­‐  Toolbars  -­‐  Links  -­‐  Paineis  de  ações  -­‐  Ferramentas  hover  
  100. 100. Actions  invisíveis    -­‐  Clique  duplo  -­‐  Ações  do  teclado  -­‐  Arrastar  e  soltar  -­‐  Comandos  digitados  
  101. 101. GarageBand  
  102. 102. Padrões  Representam  Ações  imediatas:      -­‐  Grupos  de  botões      -­‐  Ferramentas  flutuantes  (hover)      -­‐  Action  panels  
  103. 103. Padrões  Facilitam  a  navegação  e  utilização  -­‐  Botão  “Done”  chamativo  -­‐  Itens  de  menu  inteligentes  
  104. 104. Padrões    -­‐  Preview  -­‐  Indicador  de  progresso  -­‐  Cancelabilidade  
  105. 105. Padrões    -­‐  Multi-­‐Level  Undo  -­‐  Command  History  -­‐  Macros  
  106. 106. Button  Groups  
  107. 107. 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  
  108. 108. Button  Groups  
  109. 109. Button  Groups  
  110. 110. iTunes  
  111. 111. Hoover  Tools  
  112. 112. 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    
  113. 113. GoogleDocs  
  114. 114. Twitter  
  115. 115. Twitter  
  116. 116. Hoover  Tools  
  117. 117. Hoover  Tools  
  118. 118. Action  Panel  
  119. 119. 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    
  120. 120. Mac  OS  
  121. 121. Windows  7  
  122. 122. Prominent  “Done”  Button  
  123. 123. Prominent  “Done”  Button  - Botão bem destacado.- Finaliza uma operação- "Ok", "Enviar", "Continuar", "Submeter"...
  124. 124. Songza  
  125. 125. Prominent  “Done”  Button  - Fácil entendimento (fluxo)- Aparência de botão (não um link)- Próximo ao último campo doformulário
  126. 126. JetBlue   Southwest  
  127. 127. Kayak  
  128. 128. American  Airlines  
  129. 129. Smart  Menu  Itens  
  130. 130. Smart  Menu  Itens  - Menus dinâmicos- Relacionados ao estado atual- UI auto explicativa
  131. 131. Mac  Mail  
  132. 132. Smart  Menu  Itens  - Mais intuitivo- Menos que representam ação (verbo)
  133. 133. Illustrator  
  134. 134. Gmail  Menu  
  135. 135. Preview  
  136. 136. 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
  137. 137. PowerPoint  
  138. 138. 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
  139. 139. Picasa  
  140. 140. Starbucks  
  141. 141. Progress  Indicator  
  142. 142. 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 maispacientes diante de uma barra de progresso
  143. 143. Mac  OS  
  144. 144. Progress  Indicator  - Indicador animado (imagem ou texto)- Mostra o que está acontecendo- Tempo decorrido e estimado*- Como parar a operação (padrão Cancelability)
  145. 145. Flickr  
  146. 146. Grooveshark  
  147. 147. Cancelability  
  148. 148. Cancelability  O  que  é?  -­‐  Provê  uma  maneira  instantânea  de  cancelar   uma  operação  demorada  sem  efeitos   colaterais.  
  149. 149. 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.  
  150. 150. 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.  
  151. 151. 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  
  152. 152. Firefox  
  153. 153. Adobe  AIR  installation  diaog  
  154. 154. Mac  OS  copy  dialog  
  155. 155. Multi-­‐level  Undo  
  156. 156. 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.  
  157. 157. Multi  level  undo  Por  que  utilizar?  -­‐  Deixa  a  interface  mais  segura  para  exploração.      
  158. 158. 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.  
  159. 159. 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.  
  160. 160. Multi  level  undo  Como  mostrar:   -­‐  Um  botão  Undo/Redo.   -­‐  Apertar  o  CRTL+Z.   -­‐  Lista  rolante  com  as  operações  feitas.  
  161. 161. Photoshop  
  162. 162. Microsoft  Word  
  163. 163. PowerPoint  
  164. 164. Command  History  
  165. 165. 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.  
  166. 166. 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.  
  167. 167. 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.  
  168. 168. MATLAB’s  command  history  
  169. 169. Unix  Shell  
  170. 170. Macros  
  171. 171. Macros  O  que  é?  -­‐  Ações  compostas  por  ações  menores.  -­‐  Serve  para  representar  um  conjunto  de  ações  para   ser  aplicada  repetidas  vezes.  
  172. 172. Macros  Por  que  utilizar?  -­‐  Ajuda  na  execução  de  um  conjunto  de  tarefas.  -­‐  Auxilia  também  o  usuário  a  trabalhar  mais  rápido.  
  173. 173. 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.  
  174. 174. 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.  
  175. 175. 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.  
  176. 176. 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.  
  177. 177. Photoshop  
  178. 178. Excel  Macros  
  179. 179. Obrigado!  

×