designing interfaces
DESCRIPTION
Slides utilizados na apresentação dos capítulos 4 e 6 da segunda edição do livro "Designing Interfaces" de Jenifer Tidwell.TRANSCRIPT
![Page 1: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/1.jpg)
Designing Interfaces
Patterns for Effective Interaction Design
![Page 2: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/2.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/3.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/4.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/5.jpg)
Princípios de Gestalt
![Page 6: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/6.jpg)
Hierarquia Visual
-‐ O que é importante?
-‐ O que está relacionado?
-‐ Destaque o que é importante
-‐ Estrutura informacional
-‐ Títulos
-‐ Subtítulos
-‐ Listas
![Page 7: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/7.jpg)
Como fazer as coisas parecerem importantes?
![Page 8: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/8.jpg)
Como mostrar relação entre elementos da página?
![Page 9: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/9.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/10.jpg)
Como crio um bom fluxo visual?
![Page 11: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/11.jpg)
Weather Underground
![Page 12: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/12.jpg)
Visual Framework
![Page 13: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/13.jpg)
JAQK
![Page 14: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/14.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/15.jpg)
Visual Framework
-‐ Características compartilhadas:
-‐ Cores
-‐ Fontes
-‐ Estilo de escrita e gramática
-‐ Separa apresentação do conteúdo
![Page 16: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/16.jpg)
JetBlue
![Page 17: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/17.jpg)
JetBlue
![Page 18: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/18.jpg)
TED
![Page 19: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/19.jpg)
TED
![Page 20: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/20.jpg)
TED
![Page 21: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/21.jpg)
Center stage
![Page 22: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/22.jpg)
Adobe Fireworks
![Page 23: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/23.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/24.jpg)
Center Stage
-‐ Tamanho do palco
-‐ Cores contrastantes
-‐ Títulos
-‐ Contexto
![Page 25: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/25.jpg)
Google docs
![Page 26: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/26.jpg)
Newfangled
![Page 27: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/27.jpg)
Steepster
![Page 28: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/28.jpg)
Grid of equals
![Page 29: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/29.jpg)
NIKE
![Page 30: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/30.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/31.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/32.jpg)
Hulu
![Page 33: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/33.jpg)
CNN
![Page 34: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/34.jpg)
Titled sections
![Page 35: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/35.jpg)
Titled Sections
-‐ O que é?
-‐ Quando utilizar?
-‐ Por que utilizar?
-‐ Como utilizar?
![Page 36: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/36.jpg)
JetBlue
![Page 37: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/37.jpg)
Amazon
![Page 38: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/38.jpg)
iTunes
![Page 39: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/39.jpg)
Module Tabs
![Page 40: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/40.jpg)
Module Tables
-‐ O que é?
-‐ Quando utilizar?
-‐ Por que utilizar?
-‐ Como utilizar?
![Page 41: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/41.jpg)
Map Quest
![Page 42: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/42.jpg)
Excel
![Page 43: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/43.jpg)
Excel
![Page 44: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/44.jpg)
iWeb
![Page 45: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/45.jpg)
Source Forge
![Page 46: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/46.jpg)
Accordion
![Page 47: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/47.jpg)
Accordion
-‐ O que é?
-‐ Quando utilizar?
-‐ Por que utilizar?
-‐ Como utilizar?
![Page 48: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/48.jpg)
Word Palette
![Page 49: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/49.jpg)
Picasa Sidebar
![Page 50: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/50.jpg)
Chrome Sidebar
![Page 51: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/51.jpg)
CNN sidebar
![Page 52: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/52.jpg)
Collapsible Panels
![Page 53: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/53.jpg)
Collapsible Panels
-‐ O que é?
-‐ Quando utilizar?
-‐ Por que utilizar?
-‐ Como utilizar?
![Page 54: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/54.jpg)
Google Maps
![Page 55: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/55.jpg)
MSNBC article comments
![Page 56: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/56.jpg)
MSNBC article comments
![Page 57: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/57.jpg)
Firefox bookmarks sidebar
![Page 58: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/58.jpg)
YouTube’s collapsible panels
![Page 59: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/59.jpg)
YouTube’s collapsible panels
![Page 60: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/60.jpg)
Movable Panels
![Page 61: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/61.jpg)
-‐ O que é?
-‐ Quando utilizar?
-‐ Por que utilizar?
-‐ Como utilizar?
Movable Panels
![Page 62: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/62.jpg)
My Yahoo!
![Page 63: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/63.jpg)
iGoogle
![Page 64: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/64.jpg)
iGoogle
![Page 65: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/65.jpg)
MATLAB desktop
![Page 66: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/66.jpg)
Photoshop Desktop
![Page 67: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/67.jpg)
Right/Left Alignment
![Page 68: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/68.jpg)
-‐ 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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/69.jpg)
Mac OS
![Page 70: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/70.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/71.jpg)
Right/Left Alignment
-‐ Rótulos alinhados à direita -‐ Itens alinhados à esquerda -‐ Colunas separadas por duas linhas imaginárias
![Page 72: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/72.jpg)
Mac OS
![Page 73: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/73.jpg)
Diagonal Balance
![Page 74: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/74.jpg)
-‐ 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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/75.jpg)
Windows 7
![Page 76: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/76.jpg)
-‐ 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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/77.jpg)
-‐ Elementos fortes no canto superior esquerdo -‐ Botões no canto inferior direito -‐ Elementos centrais também influenciam
Diagonal Balance
![Page 78: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/78.jpg)
Starbucks
![Page 79: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/79.jpg)
Mini Cooper
![Page 80: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/80.jpg)
Responsive Disclosure
![Page 81: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/81.jpg)
-‐ Interface inicialmente pequena -‐ Interface aumenta conforme a opção do usuário -‐ Elimina necessidade de mais páginas
Responsive Disclosure
![Page 82: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/82.jpg)
AutoTrader
![Page 83: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/83.jpg)
-‐ 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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/84.jpg)
-‐ 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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/85.jpg)
Kayak
![Page 86: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/86.jpg)
Google Docs
![Page 87: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/87.jpg)
Responsive Enabling
![Page 88: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/88.jpg)
-‐ 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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/89.jpg)
Turbo Tax
![Page 90: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/90.jpg)
-‐ 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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/91.jpg)
Mac OS
![Page 92: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/92.jpg)
Lexus
![Page 93: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/93.jpg)
Liquid Layout
![Page 94: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/94.jpg)
-‐ 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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/95.jpg)
Mac OS
![Page 96: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/96.jpg)
Drupal.org
![Page 97: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/97.jpg)
Google Docs
![Page 98: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/98.jpg)
Actions and Commands
![Page 99: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/99.jpg)
-‐ 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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/100.jpg)
-‐ Clique duplo -‐ Ações do teclado -‐ Arrastar e soltar -‐ Comandos digitados
Actions invisíveis
![Page 101: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/101.jpg)
GarageBand
![Page 102: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/102.jpg)
![Page 103: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/103.jpg)
![Page 104: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/104.jpg)
Padrões
Representam Ações imediatas: -‐ Grupos de botões -‐ Ferramentas flutuantes (hover) -‐ Action panels
![Page 105: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/105.jpg)
Facilitam a navegação e utilização
-‐ Botão “Done” chamativo
-‐ Itens de menu inteligentes
Padrões
![Page 106: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/106.jpg)
-‐ Preview
-‐ Indicador de progresso
-‐ Cancelabilidade
Padrões
![Page 107: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/107.jpg)
Padrões
-‐ Multi-‐Level Undo
-‐ Command History
-‐ Macros
![Page 108: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/108.jpg)
Button Groups
![Page 109: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/109.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/110.jpg)
Button Groups
![Page 111: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/111.jpg)
Button Groups
![Page 112: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/112.jpg)
iTunes
![Page 113: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/113.jpg)
Hoover Tools
![Page 114: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/114.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/115.jpg)
GoogleDocs
![Page 116: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/116.jpg)
![Page 117: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/117.jpg)
![Page 118: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/118.jpg)
Hoover Tools
![Page 119: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/119.jpg)
Hoover Tools
![Page 120: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/120.jpg)
Action Panel
![Page 121: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/121.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/122.jpg)
Mac OS
![Page 123: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/123.jpg)
Windows 7
![Page 124: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/124.jpg)
Prominent “Done” Button
![Page 125: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/125.jpg)
- Botão bem destacado. - Finaliza uma operação - "Ok", "Enviar", "Continuar", "Submeter"...
Prominent “Done” Button
![Page 126: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/126.jpg)
Songza
![Page 127: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/127.jpg)
- 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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/128.jpg)
JetBlue Southwest
![Page 129: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/129.jpg)
Kayak
![Page 130: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/130.jpg)
American Airlines
![Page 131: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/131.jpg)
Smart Menu Itens
![Page 132: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/132.jpg)
- Menus dinâmicos - Relacionados ao estado atual - UI auto explicativa
Smart Menu Itens
![Page 133: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/133.jpg)
Mac Mail
![Page 134: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/134.jpg)
Smart Menu Itens
- Mais intuitivo - Menos que representam ação (verbo)
![Page 135: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/135.jpg)
Illustrator
![Page 136: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/136.jpg)
Gmail Menu
![Page 137: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/137.jpg)
Preview
![Page 138: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/138.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/139.jpg)
PowerPoint
![Page 140: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/140.jpg)
- 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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/141.jpg)
Picasa
![Page 142: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/142.jpg)
Starbucks
![Page 143: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/143.jpg)
Progress Indicator
![Page 144: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/144.jpg)
- 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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/145.jpg)
Mac OS
![Page 146: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/146.jpg)
- 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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/147.jpg)
Flickr
![Page 148: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/148.jpg)
Grooveshark
![Page 149: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/149.jpg)
Cancelability
![Page 150: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/150.jpg)
Cancelability
O que é? -‐ Provê uma maneira instantânea de cancelar uma operação demorada sem efeitos colaterais.
![Page 151: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/151.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/152.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/153.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/154.jpg)
Firefox
![Page 155: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/155.jpg)
Adobe AIR installation diaog
![Page 156: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/156.jpg)
Mac OS copy dialog
![Page 157: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/157.jpg)
Multi-‐level Undo
![Page 158: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/158.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/159.jpg)
Multi level undo
Por que utilizar?
-‐ Deixa a interface mais segura para exploração.
![Page 160: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/160.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/161.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/162.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/163.jpg)
Photoshop
![Page 164: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/164.jpg)
Microsoft Word
![Page 165: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/165.jpg)
PowerPoint
![Page 166: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/166.jpg)
Command History
![Page 167: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/167.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/168.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/169.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/170.jpg)
MATLAB’s command history
![Page 171: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/171.jpg)
Unix Shell
![Page 172: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/172.jpg)
Macros
![Page 173: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/173.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/174.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/175.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/176.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/177.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/178.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/179.jpg)
Photoshop
![Page 180: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/180.jpg)
Excel Macros
![Page 181: Designing Interfaces](https://reader038.vdocuments.mx/reader038/viewer/2022102521/5561d18ad8b42a9d3f8b51d4/html5/thumbnails/181.jpg)
Obrigado!