Post on 24-May-2015
description
Designing Interfaces
Patterns for Effective 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 fluxo visual?
Weather Underground
Visual Framework
JAQK
Visual Framework
-‐ O mesmo leiaute básico com flexibilidade
-‐ 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
JetBlue
JetBlue
TED
TED
TED
Center stage
Adobe Fireworks
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
Google docs
Newfangled
Steepster
Grid of equals
NIKE
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
Hulu
CNN
Titled sections
Titled Sections
-‐ O que é?
-‐ Quando utilizar?
-‐ Por que utilizar?
-‐ Como utilizar?
JetBlue
Amazon
iTunes
Module Tabs
Module Tables
-‐ O que é?
-‐ Quando utilizar?
-‐ Por que utilizar?
-‐ Como utilizar?
Map Quest
Excel
Excel
iWeb
Source Forge
Accordion
Accordion
-‐ O que é?
-‐ Quando utilizar?
-‐ Por que utilizar?
-‐ Como utilizar?
Word Palette
Picasa Sidebar
Chrome Sidebar
CNN sidebar
Collapsible Panels
Collapsible Panels
-‐ O que é?
-‐ Quando utilizar?
-‐ Por que utilizar?
-‐ Como utilizar?
Google Maps
MSNBC article comments
MSNBC article comments
Firefox bookmarks sidebar
YouTube’s collapsible panels
YouTube’s collapsible panels
Movable Panels
-‐ O que é?
-‐ Quando utilizar?
-‐ Por que utilizar?
-‐ Como utilizar?
Movable Panels
My Yahoo!
iGoogle
iGoogle
MATLAB desktop
Photoshop Desktop
Right/Left Alignment
-‐ Tabela ou formulário de duas colunas
-‐ Alinhamento de rótulos e itens
-‐ Rótulos possuem tamanhos diferentes
Right/Left Alignment
Mac OS
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
Mac OS
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
Windows 7
-‐ 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 influenciam
Diagonal Balance
Starbucks
Mini Cooper
Responsive Disclosure
-‐ Interface inicialmente pequena -‐ Interface aumenta conforme a opção do usuário -‐ Elimina necessidade de mais páginas
Responsive Disclosure
AutoTrader
-‐ 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 Disclosure
Kayak
Google Docs
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
Turbo Tax
-‐ Primeiro passo: apenas ações relevantes -‐ Ações ficam desabilitadas até serem necessárias -‐ Proximidade das ações dependentes
Responsive Enabling
Mac OS
Lexus
Liquid Layout
-‐ A página é preenchida conforme a dimensão da janela -‐ Flexibilidade à alterações -‐ Elementos principais têm prioridade -‐ Alteração do tamanho
Liquid Layout
Mac OS
Drupal.org
Google Docs
Actions and Commands
-‐ Botões -‐ Barras de menu -‐ Menus pop-‐up -‐ Menus dropdown -‐ Toolbars -‐ Links -‐ Paineis de ações -‐ Ferramentas hover
Actions mais comuns
-‐ Clique duplo -‐ Ações do teclado -‐ Arrastar e soltar -‐ Comandos digitados
Actions invisíveis
GarageBand
Padrões
Representam Ações imediatas: -‐ Grupos de botões -‐ Ferramentas flutuantes (hover) -‐ Action panels
Facilitam a navegação e utilização
-‐ Botão “Done” chamativo
-‐ Itens de menu inteligentes
Padrões
-‐ Preview
-‐ Indicador de progresso
-‐ Cancelabilidade
Padrões
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
Button Groups
Button Groups
Button Groups
iTunes
Hoover Tools
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
GoogleDocs
Hoover Tools
Hoover Tools
Action Panel
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
Mac OS
Windows 7
Prominent “Done” Button
- Botão bem destacado. - Finaliza uma operação - "Ok", "Enviar", "Continuar", "Submeter"...
Prominent “Done” Button
Songza
- Fácil entendimento (fluxo) - Aparência de botão (não um link) - Próximo ao último campo do formulário
Prominent “Done” Button
JetBlue Southwest
Kayak
American Airlines
Smart Menu Itens
- Menus dinâmicos - Relacionados ao estado atual - UI auto explicativa
Smart Menu Itens
Mac Mail
Smart Menu Itens
- Mais intuitivo - Menos que representam ação (verbo)
Illustrator
Gmail Menu
Preview
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
PowerPoint
- 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
Picasa
Starbucks
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
Mac OS
- Indicador animado (imagem ou texto) - Mostra o que está acontecendo - Tempo decorrido e estimado* - Como parar a operação (padrão Cancelability)
Progress Indicator
Flickr
Grooveshark
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
Firefox
Adobe AIR installation diaog
Mac OS copy dialog
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
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, modificaçõ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.
Como mostrar:
-‐ Um botão Undo/Redo.
-‐ Apertar o CRTL+Z.
-‐ Lista rolante com as operações feitas.
Multi level undo
Photoshop
Microsoft Word
PowerPoint
Command History
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.
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.
Command History
MATLAB’s command history
Unix Shell
Macros
O que é?
-‐ Ações compostas por ações menores.
-‐ Serve para representar um conjunto de ações para
ser aplicada repetidas vezes.
Macros
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 definir uma
sequencia de ações e executá-‐las de forma fácil.
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.
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.
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.
Photoshop
Excel Macros
Obrigado!