Interface Humano

Projeto de Interfaces
Especialização
em Tecnologia da
Informação
Universidade Federal do Ceará
Prof. Riverson Rios, Ph.D.
agosto 2009
8/20/09
[email protected]

Este programa efetuou
uma operação ilegal
e será desligado
8/20/09
Slide 2
“O design pode ser a diferença entre
prazer e frustração.
Os mesmos princípios usados no projeto
de pequenas coisas também são
aplicáveis a sistemas complexos.
Muitos acidentes são atribuídos a
falha humana, mas em quase
todos os casos o erro foi o resultado
direto de
um
mau design...”
(Donald Norman
“The Design of Everyday Things”)
8/20/09
Slide 3
Sumário
1. Introdução
2. Projeto da Interface
3. Sistema de Janelas
4. Interface Gráfica com o(a) Usuário(a)
5. Testes de Usabilidade
6. Exemplos de Mau Design
7. Conclusão
Referências
8/20/09
Slide 4
Objetivos
Ao final desta disciplina, os alunos deverão
Entender os problemas e os desafios
da Interface com o Usuário (IU)
Projetar uma boa IU
Saber analisar uma IU
Reconhecer uma má IU
Reconhecer uma IU bem projetada
Conhecer os diferentes objetos interativos
Projetar IUs para deficientes visuais e
auditivos
8/20/09
Slide 5
1. Introdução
interface: substantivo feminino
dispositivo de ligação entre sistemas;
elemento de ligação de dois ou mais
componentes de um sistema;
INFORMÁTICA: modalidade gráfica de
apresentação dos dados e das funções
de um programa;
(Fonte: www.portoeditora.pt/dol)
8/20/09
Slide 6
1. Introdução
usabilidade: Facilidade de usar ferramenta
ou objeto a fim de realizar tarefa específica e
importante
(Fonte: http://pt.wikipedia.org/wiki/Usabilidade)
Dumas e Redish (1999):
Foco no(a) usuário(a)
ele(a) quer ser produtivo
está sempre ocupado
quer realizar certa tarefa
É ele(a) quem decide se um produto é fácil
de usar
8/20/09
Slide 7
1. Introdução
O que é Interface Humano-Computador
(Human-Computer Interface)?
Interação dos usuários com o software
Ambiente físico dos usuários de Computação
Tópicos:
Desenvolvimento de software
Usabilidade
Bom design
Acessibilidade
Estilos de interação
8/20/09
Slide 8
1. Introdução
IHC envolve
Psicologia
Computação
Ergonomia
Multimídia (gráficos, sons, vídeo etc)
Outras disciplinas
Nosso foco:
Projeto de interfaces (gráficas)
8/20/09
Slide 9
1. Introdução
Os humanos são bons em
Reconhecimento (de imagens, de vozes etc)
Memória associativa
Explicações
E são ruins em
Memória de curto prazo
Tarefas complexas
Perfeição
Os humanos cometem erro
Portanto, viva sem eles ou...
Projete, visando operadores imperfeitos
8/20/09
Slide 10
1.1 A Interface
Há interfaces em todo canto
No carro
Na
No
Na
No
porta
telefone
televisão
ventilador
No vídeo-cassete
Na torneira da pia
Nos caixas eletrônicos
Numa fivela de cabelo!
As más interfaces também!
8/20/09
Slide 11
1.1.1 Tipos de Interface
Em batch (1940s)
Cartões perfurados
Job Control Language (JCL)
Shell scripts
Em texto (1950s)
Command Line Interface (CLI) – bash, dos
Usada por sysadmins: rápida e produtiva
Text User Interface (TUI) – dBase, WordStar
Gráfica (1980s)
Graphical User Interface (GUI)
janelas, mouse, ícones, papel de parede
8/20/09
Slide 12
1.1.1 Tipos de Interface
Web (1990s)
HTML
Caixas, botões, links
Resolução
Touch screens
caixas automáticos, PDAs
Telefone
serviços pelo 0800
agenda, fotos &c de celulares
Botões
8/20/09
rádios de pilha
tocadores MP3, rodinha do iPod
Slide 13
Xfdrake - TUI do Mandriva Linux para configurar o monitor
8/20/09
1.1.2 A Boa Interface
Uma boa interface deve lidar com
Expectativas
eg, usar botões, caixas de diálogo de modo
esperado
Modelo conceitual
Fácil adaptação
Mapeamentos
Analogias físicas e padrões culturais
Feedback imediato
8/20/09
Toda ação deve ter um efeito (eg, apertar botão)
Comunicação
Ajude-os a lembrar (use dicas, barras de tarefa)
Nunca exija memorização entre telas
Slide 15
1.1.2 A Boa Interface
8/20/09
Padronização
Todos os relógios andando no sentido horário
Tratamento de erro
Simplifique as tarefas
Evite o aparecimento de erros
Coisas diferentes devem parecer diferentes
Confirmação imediata e consistente pode ser
inútil
Restrições
Diminua o espaço de busca, usando restrições
culturais, físicas, semânticas, lógicas
Visibilidade de controles
Todas as funções visíveis e facilmente
encontradas
Slide 16
1.2 Prototipagem
Motivação
Mais barata, mais rápida
Permite descobrir problemas mais cedo
Partes podem ser usadas no produto final
(imagens etc)
Benefícios para IU
Melhor visualização
Algo pros designers avaliarem
Algo pros operadores discutirem
8/20/09
Slide 17
1.2 Prototipagem
Técnicas
Programa funcional
Rascunho do código fonte não testado
Programa funcional limitado
Executa apenas uma função (eg, um botão)
Interface não funcional
Objetos interativos presentes, mas não fazem
nada
Desenho (eg, usando o Inkscape, o OpenDraw)
Eficiente quando o software empregado é bom
Papel (desenhos e gráficos feitos a mão)
8/20/09
Barato e dinâmico
Slide 18
1.2 Prototipagem
Horizontal
Todos os componentes
Funcionalidade reduzida
Vertical
Alguns componentes
Toda a funcionalidade
8/20/09
Slide 19
1.2.1 Exercício
Usando qualquer técnica, projete uma
interface para uma das aplicações abaixo.
Use abas, widgets, botões &c
Busca de arquivos
por nome, conteúdo, data, dono, pasta &c
Becape e restauração
pasta, arquivo, data, gzip, verificação &c
Criação de ícones
visões, cores, formas geométricas &c
Solicitação de pedido
nome, data, email, assunto, pedido, prazo &c
8/20/09
Slide 20
1.3 Histórico
A History of the GUI (Jeremy Reimer)
http://arstechnica.com/articles/paedia/gui.ars
1930s – Vannevar
Bush - Memex
Mesa com dois
monitores touch
screen, um teclado
e um scanner
Acesso a todo o
conhecimento
humano
Nunca
implemantada
8/20/09
Slide 21
1968 – Douglas
Engelbart – NLS
oN-Line System
Telcado, mouse,
rede, janelas,
email, hipertexto e
vídeo conferência
Xerox decide
investir na GUI
Xerox Alto,
primeiro
computador com
GUI
8/20/09
Slide 22
8/20/09
Teclado e mouse do NLS
Slide 23
8/20/09
Engelbart inventou o ponteiro do mouse (bug)
Slide 24
Xerox Palo e GUI
com Smalltalk,
ícones e títulos
de janelas por
US$ 17,000+
8/20/09
Slide 25
1983 Apple Lisa: ícones de arquivos, arrastar-e-soltar
por US$ 10.000! (Macintosh, 1984, US$ 2,495)
8/20/09
Slide 26
8/20/09
1983 Microsoft Interface Manager
Slide 27
1983 Microsoft Windows 1.01
8/20/09
Slide 28
8/20/09
1987 Microsoft Windows 2
Slide 29
8/20/09
1995 Microsoft Windows 95
Slide 30
8/20/09
Slide 31
8/20/09
1997 KDE 1 – Linux e BSD
Slide 32
8/20/09
Mac OS X e a GUI Aqua
Slide 33
8/20/09
Slide 34
1.4 Motivação
Um bom design traz
Satisfação dos clientes = $$$
Qualidade => Boa reputação
Confiabilidade (menos erros dos usuários)
Fidelidade => novos usuários
Foco no trabalho (não na interface)
Eficiência
flexibilidade
funcionalidade
8/20/09
Slide 35
1.5 Uso da Interface
A interface faz a mediação entre
✔ humanos
Julgam se a interface é útil e apropriada
✔
e software + hardware
Ferramentas disponíveis
Como bem utilizar as ferramentas de
modo a satisfazer os humanos?
8/20/09
Slide 36
1.6 Humanos
operador(a)
Executa o sistema final
projetista de sistema
Define a arquitetura do sistema
projetista de interface
Considera necessidades especiais dos
operadores, propósito da interface, custos
e benefícios a fim de projetar
uma interface atraente e funcional
8/20/09
Slide 37
1.6 Humanos
Usuário Iniciante
O que este produto faz? Como começo?
Usuário Intermediário
Qual comando faz esta tarefa?
Quais as vantagens da nova versão?
Como fiz isso antes?
Usuário Avançado
Onde estão os atalhos?
Posso automatizar esta tarefa?
8/20/09
Posso personalizar a interface?
Slide 38
1.7 Regras Schneiderman
1. Consistência
Cores, leiaute, maiúsculas, fontes,
terminologia
Mau exemplo: links visitados e não visitados
Bom exemplo: OK sempre antes de
CANCELAR
2. Atalhos
Abreviações, teclas especiais, macros
Mau exemplo: mudar estilo no MS Word
Bom exemplo: ALT <-- e ALT--> no Firefox
8/20/09
Slide 39
1.7 Regras Schneiderman
3. Feedback
Resposta a cada ação dos usuários
Mau exemplo: digitação enquanto salva
Bom exemplo: cor corrente
4. Fechamento
Informação de final de grupo de ações
Mau exemplo: nenhum feedback
Bom exemplo: “Sua inscrição foi feita com
sucesso”
8/20/09
Slide 40
1.7 Regras Schneiderman
5. Tratamento de erro
Mau exemplo: ?snt err
Bom exemplo: sair sem salvar, seleção por
menu
6. Reversibilidade
Reduz ansiedade pois erros podem ser
desfeitos
Mau exemplo: um undo só do Photoshop 4
Bom exemplo: botão de voltar
8/20/09
Slide 41
1.7 Regras Schneiderman
7. Controle
Usuários como iniciadores das ações
Mau exemplo: maiúsculas automáticas
Bom exemplo: correção ortográfica
8. Memória
Usuários têm memória curta
Mau exemplo: ausência de help on-line
Bom exemplo: ícones sugestivos, bread
crumbs, navegabilidade em 3 cliques
8/20/09
Slide 42
1.8 Bom Design
Princípios Básicos
Agrupamento
aproxime itens relacionados
Organiza informações e reduz desordem
Alinhamento
Ligação visual entre elementos
Dá aparência limpa, sofisticada e suave
8/20/09
Slide 43
1.8 Bom Design
Repetição
De cor, forma, textura, espessura, tamanho &c
Fortalece unidade
Contraste
Diferencie elementos se não forem os mesmos
(cor, fonte, tipo, tamanho, espaço &c)
Mais importante atração visual
8/20/09
Slide 44
Onde Estamos...
1. Introdução
2. Projeto da Interface
3. Sistema de Janelas
4. Interface Gráfica com o(a) Usuário(a)
5. Testes de Usabilidade
6. Exemplos de Mau Design
7. Conclusão
Referências
8/20/09
Slide 45
2.1 Ciclo de Vida
Concepção
Definição dos requerimentos
Especificação
Implementação
Teste
Instalação
Manutenção
8/20/09
Slide 46
2.2 Estado do Sistema
Estado atual do sistema deve ser
clara e explicitamente indicado
O sistema deve dar feedback após receber
entrada
Ex.:
Modo atual
Operação ilegal
Indicadores de erro
Valores de variáveis
Indicar tempo de resposta longo
Mostrar cursores e apontadores (do mouse)
8/20/09
8/20/09
Slide 48
2.2.1 Erros
Mostre os erros imediatamente
Mensagens inteligíveis
Sem abreviações
Sem insultos
Sem pânico
Indique as ações semanticamente inválidas
Não faça nada
Escureça ou mude a cor do objeto de interação
(ícone, linha do menu etc)
Iniba reação pelo mouse
8/20/09
Slide 49
2.2.1 Erros
Projete para evitar erros
Simule possíveis erros
Teste, teste e teste
Remova o que está inacessível no momento
Torne os erros facilmente detectáveis
Facilite sua correção
Não puna quem errar!
8/20/09
Slide 50
2.2.1.1 Evitando erros
Funções de força
Interlock (conecta dois eventos)
Força ordem nas operações
eg, microondas, lava-roupas,
validação de formulário com JavaScript
Lockin (prende pelo lado de dentro)
Previne fim prematuro
eg, sair sem salvar
Lockout (prende pelo lado de fora)
Previne ocorrência de evento
eg, formatar o disco
8/20/09
Slide 51
2.2.2 Modo Corrente
Modo: mesma entrada traz resultado
diferente, dependendo do estado do
sistema
Ex.:
Forma do cursor
Círculo: pronto para desenhar círculos
Balde: pronto para pintar região
Barra horizontal ou letra T: pronto para
texto
Editores de texto
Modo de inserção
Modo de edição
8/20/09
Slide 52
2.2.3 Tempo de Resposta
Longo
Muda a expectativa do(a) operador(a)
Busca
Cálculos complexos
Compilação demorada
Transferência de arquivo
Indique por
Forma do cursor
relógio
Ampulheta
processo em andamento
porcentagem
barra de progressão
8/20/09
Slide 53
2.2.4 Exemplos
This operation may take some time.
Please wait.
Comando scp (secure copy):
xampu> scp [email protected]:a.zip
a.zip 72% |************
8/20/09
meuarq.zip
| 91KB 00:18 ETA
Slide 54
Onde Estamos...
1. Introdução
2. Projeto da Interface
3. Sistema de Janelas
4. Interface Gráfica com o(a) Usuário(a)
5. Testes de Usabilidade
6. Exemplos de Mau Design
Referências na web
Referências Bibliográficas
8/20/09
Slide 55
3 Sistema de Janelas
Funções básicas
Definir terminal abstrato
Um para cada processo
Fornece independência do dispositivo
Facilidade de programação e portabilidade
Compartilhamento de recursos
Comunicação por eventos
Definir um modelo de imagem
Trata E/S gráfica do terminal abstrato
Gerenciar recursos
Teclado, mouse etc.
8/20/09
Slide 56
3.1 Eventos
Eventos de um sistema de janelas
Do teclado
Sistema interpreta a tecla pressionada
De localização
Posicionamento do mouse (eg, nas bordas da
janela)
De escolha
Clicar ou desclicar um botão do mouse
De valor
Valores gerados por potenciômetros (eg,
joystick)
De temporização
Intervalo entre dois cliques (para quê?)
8/20/09
Slide 57
3.1 Eventos
Exemplo: uso do mouse
O mouse é movimentado
O driver do mouse informa novas localizações
O SJ muda o cursor (seta) na tela
Um botão é pressionado (down)
A interrupção é tratada pelo driver do mouse
Este envia evento pro SJ
SJ -> janela cliente o evento e a pos. relativa
O botão é solto (up)
O driver do mouse informa ao SJ
SJ-> janela cliente o evento e a pos. relativa
Logo
8/20/09
SJ dá o feedback, mas não interpreta os eventos
3.2 Recursos
Recursos gerenciados por um SJ
Fontes
Mouse
Teclado
Mapa de cores
Tela de alta resolução
8/20/09
Slide 59
3.3 Fontes
Classificação:
a) Tipo...
de texto
Usadas no corpo do texto
Legíveis mesmo em tamanhos de ponto
pequenos
Serifadas (ajudam o olho a acompanhar o
texto)
Leitura mais fácil
Tamanho entre 9 e 12 pontos
7 ou 8 pontos: cartões comerciais e
classificados
Menor que 6 pontos: ilegível
8/20/09
Slide 60
3.3 Fontes
de apresentação
Títulos, cabeçalhos, anúncios, logomarcas etc
Sem serifa
Tamanhos maiores que 12 pontos
decorativas
Pouco usadas
Enfeitadas
Chamam atenção
8/20/09
Slide 61
3.3 Fontes
para escrita (cursivas, script)
Modelam caligrafia
especiais
Símbolos matemáticos
Letras gregas
Ícones
Símbolos especiais (arroba, copyright etc.)
8/20/09
Slide 62
3.3 Fontes
b) Espaçamento
Monoespaçadas
Mesmo largura para todos os caracteres
Não são afetadas por kerning
Courier
Proporcionalmente espaçadas
Diferentes larguras a cada caracter
« i » ocupa menos espaço que « m »
Sem kerning, espaço das letras não é invadido
Times Helvetica
8/20/09
Slide 63
3.3.1 Courier
Para máquina de escrever
Projetada em 1952 por Howard Kessler da IBM
Elipses abertas
Grande altura-x
Resiste a acúmulo de tinta e restos de borracha
Uso:
mensagens familiares
imagens de tela de computador
alinhamento de material tabular
8/20/09
Slide 64
3.3.1 Courier
<TITLE>Primeiro Trabalho - 2001.1 </TITLE>
<BODY TEXT=#6B238E BGCOLOR=#c0d0c1>
<IMG SRC="../roman_i.gif">A ser entregue no dia
20 de mar&ccedil;o
<H2><B> CK123 A - Primeiro Trabalho - 2001.1
</H2></B>
<IMG SRC="../bow.gif"><BR>
<UL><UL><UL><UL><UL><Font Color=RED>
<H3><B> Instalando APACHE </B></H3>
</UL></UL></UL></UL></UL></font>
<P>
1. Instale o servidor Apache
8/20/09
Slide 65
3.3.2 Times
Projetada em 1931 por Stanley Morrison
para o jornal Times de Londres
Planejada cientificamente para economizar
espaço
Acrescida de estilos não romanos (itálico)
Daí o nome Times Roman
Formas e espaçamento de texto estreitos
Ideal para colunas estreitas (60 caracteres)
Uso:
Blocos de textos
Livros
Denota tradição e elegância
8/20/09
Slide 66
3.3.2 Times
Para blocos de textos largos, prefira:
Century Old Style (1906)
Cheltenham (1975)
Outras fontes serifadas
Bodoni
Bookman
Charter
Korinna
Souvenir
Palatino
Timmons
8/20/09
Slide 67
3.3.3 Helvetica
Projetada em 1957 por Max Miedinger para a
Fundação suíça de Tipos Haas com o nome de
Haas New Grotesque
Fonte sem serifa mais conhecida
Limpa, moderna, ordenada e séria
Uso:
Cabeçalhos
Legendas
formulários
listas de preço
Catálogos
Relatórios clínicos
8/20/09
Slide 68
3.3.3 Helvetica
Fontes sem serifa:
Avant Garde (1970) tem círculos e triângulos perfeitos
Comic Sans
Lucida
Verdana
8/20/09
Slide 69
3.3.3 Helvetica
Tabela de Preços
(por Kg)
Mamão
Pera
Laranja
Coco
0,25
2,40
0,85
0,77
Banana 0,40
Limão 0,80
Kiwi
2,75
Graviola 1,60
Dicas:
Misture maiúsculas com minúsculas
Use pesos e tamanhos diferentes
8/20/09
Slide 70
3.3.4 Script
Imitam caligrafia humana
Exigem mais espaço por letra
Letras não totalmente conectadas
Uso:
Convites
Catálogos
Certificados
Programas de Eventos
8/20/09
Slide 71
3.3.4 Script
Fontes cursivas:
Este texto está escrito em ARIOSO
Este texto está escrito em CHANCERY
E este está escrito em
Lucida Handwriting
8/20/09
Slide 72
3.3.4 Script
CONVITE
A Faculdade Integrada de Tianguá tem a Honra
de convidar V.Sa. a participar de Cerimônia
Comemorativa de 100 anos de colação da primeira turma de bacharelandos em Ciência da Informação.
8/20/09
Slide 73
3.3.5 Símbolo
Fontes compostas de:
Símbolos da Matemática
Símbolos da Física
Letras gregas
Sinais de pontuação especiais (setas, quadrados)
Dingbats (flores, corações, estralas etc)
Notas musicais (claves, pausas etc)
Mais usados:
Bullets
Quadrados
8/20/09
Slide 74
3.3.5 Símbolo
Fontes de símbolos:
Symbol
Dingbats
Carta
Sonata
Musical Symbols
8/20/09
Slide 75
3.3.5 Símbolo
Symbol:
αβ χ δ ε φ γ ηι ϕκ λ µ ν ο π θ ρ
Starbats:
➎➏➐➑➒➓➀➁➂➃➇➈➉☎
 »❑
Starmath:
⊆⊇⊄⊅⊈⊉∈∉∃∍ℵℑℜ℘∡∢∣∥⊥⋯
⋮⋰⋱≠≡ ∞
8/20/09
Slide 76
3.3.6 Bom Uso de Fontes
Fonte serifada?
não serifada em título de janelas, caixas
de diálogo, formulários
serifada em texto corrido, caixas de
mensagem
Use mais de uma família de fontes
Varie estilo
Tamanho
Peso
8/20/09
Slide 77
3.3.6 Bom Uso de Fontes
Fontes sublinhadas podem confundir-se
com links
Não use mais que 3 fontes por tela
Mais que isso torna o texto confuso
Não use mais que 3 ou 4 tamanhos de fonte
Fonte grande para cabeçalhos
Médias para subtítulos e normais para texto
8/20/09
Slide 78
3.3.6 Bom Uso de Fontes
Letra em vídeo reverso
chama a atenção
NÃO USE LETRAS MAIÚSCULAS
Cansam a leitura
Use apenas para chamar a ATENÇÃO
Não use blinking (pisca-pisca)
NUNCA!
Se se quer ler, não se consegue porque pisca
Se não se quer ler, distrai e incomada
8/20/09
Slide 79
3.3.6 Bom Uso de Fontes
Opte por fontes conhecidas
Times
Arial
Helvetica
Verdana
(encontradas na maioria dos
computadores)
Distribua bem o espaço entre os caracteres
(kerning) e entre as linhas
8/20/09
AV
AV
Slide 80
3.4 A Janela
Janela
Porção da tela que serve como terminal
abstrato de um processo
Por ser abstrata, pode ser maior que a tela
física
Representada por um ícone
Tem formato, em geral, retangular
Pode ter decorações
8/20/09
Barra de títulos
Caixas de redimensionamento
Botões de maxi(mini)mização, de
fechamento
De stick, de ajuda, restauração, shade %c
3.4.1 Componentes
Botão do SJ
Vidraça
Título da aplicação
Cabeçalho
Menu
Barra
de
rolagem
Rodapé
8/20/09
Estado do sistema e progresso
Slide 82
3.4.2 Decorações do KDE2
ModStep
KStep
Risc OS
Windows 2000
KDE 1
8/20/09
Slide 83
3.5 Múltiplas Janelas
Posicionamento
Em geral, há superposição
Implementação: lista de janelas ativas
Cada janela tem tamanho e localização
As janelas mostradas na tela na ordem inversa
Janela no início é a ativa
Operações: criar, destruir, mover pro início, fim
Tipos
Automático: mesmo local da última ativação
Manual: o(a) operador(a) escolhe (eg, twm)
Inteligente: o sistema escolhe o melhor lugar
8/20/09
Slide 84
3.5 Múltiplas Janelas
Troca de dados entre janelas
Utiliza protocolo
Mecanismos para conversão de dados
E transferência de dados
Exemplo: X Window
Proprietário: seleciona texto ou imagem
Seleção: copiado para um buffer nomeado
Solicitante: dá o nome da seleção e o tipo
de dados esperado (XconvertSelection)
Como funciona o drag and drop?
8/20/09
Slide 85
3.5 Múltiplas Janelas
Foco (escolha da janela ativa)
Tipos
Por clique do mouse (click to focus)
Pela sua posição (mouse focus)
Problema: ativação da janela não pretendida
Por uso incorreto do foco
Ajuda: SJ indica qual a janela ativa
Barras de títulos diferentes
Cursores diferentes (eg, retângulo hachurado)
8/20/09
Slide 86
Onde Estamos...
1. Introdução
2. Projeto da Interface
3. Sistema de Janelas
4. Interface Gráfica com
o(a) Usuário(a)
5. Testes de Usabilidade
6. Exemplos de Mau Design
7. Conclusão
Referências
8/20/09
Slide 87
Visicalc
8/20/09
Slide 88
4.1 Características
Uma boa GUI deve ser...
Previsível
Comportamento esperado é seguido
Intuitiva (comporta-se como outras
aplicações)
Atraente
Bem desenhada, agradável aos olhos
8/20/09
Slide 89
4.1 Características
Fácil de ler
Evite jargões, fontes estranhas
Não experimente formas diferentes de usar
objetos interativos
(eg, OK e CANCELAR)
8/20/09
Slide 90
4.1 Características
Independente do dispositivo
Tipo e resolução do monitor
Bom em 640x480, 800x600, LCD monocromático?
Personalizável
Flexibilidade para cores, menus, estruturas &c.
Design padrão (default) deve ser agradável
Consistente
Uniformidade de design e ações em todas as
janelas, diálogos e apresentações
Invisível
Função: fazer com que o trabalho seja feito
8/20/09
Slide 91
4.1 Características
Uma boa GUI deve ainda ter...
Multi-formato
Vários tipos de arquivo aceitáveis
Orientação a objetos
Fornecer drag & drop
Ambiente gráfico baseado em objetos e não,
texto
Maioria dos comandos executados com o mouse
Perdão
Meios para desfazer ações não desejadas
Retorno de caixas de diálogos e menus
Opções claramente expostas
8/20/09
4.1 Características
Qual o problema aqui?
8/20/09
Slide 93
4.2 Exemplos
E qual o problema aqui?
8/20/09
Slide 94
4.3 Entrada de Dados
Pelo mouse
Propósitos: apontar, selecionar e entrar dados
Bom para seleção de itens
Mas não pra seleção de múltiplos itens
Pelo teclado
Familiar e rápido
Maior variedade de entradas (shift, CTRL &c)
Bom pra seleção em larga escala
(^Home + shift-^End)
Mas, muitos preferem o mouse
Ruim para apontar
Ruim como ferramenta de desenho
8/20/09
Slide 95
4.3 Entrada de Dados
Outros dispositivos
Touchscreens
Tela com teclado sensível ao toque
Pressão, impacto ou interrupção de grade
de luz infravermelho
Trackballs
Bola fixa sobre superfície do mouse
Não requer espaço pro mouse correr
Lightpen
Aponta diretamente para a tela
Mais preciso que as touchscreens
8/20/09
Slide 96
4.3 Entrada de Dados
Joysticks
Movimento e aceleração
Micropoint
Dedos apontam diretamente para uma
almofada
Gyromouse
Capta movimentos da mão
Olhos
Pisque duas vezes para clicar
Luva 3D
Realidade virtual
8/20/09
Slide 97
4.3 Entrada de Dados
Por que nunca desconsiderar o teclado...
Nem todos têm mouse
Às vezes o mouse deixa de funcionar
Digitadores rápidos preferem o teclado
Por isso...
Forneça sempre tecla de atalho
^S para salvar, ESC para sair, ENTER para
enviar
Teclas mnemônicas
ALT-A em Arquivo
ALT-E em Editar
ALT-H em Help
8/20/09
Slide 98
4.3.1 Teclados
Qwerty ou Sholes (1870s)
Detalhes
Leiaute para evitar colisão
Datilografia: 1877 por Frank McGurrin
Vantagens
Não alfabético
Conhecimento externo
Usado em todo o mundo
Com pequenas modificações
Desvantagens
Anti-natural
Não cientificamente projetado
8/20/09
Slide 99
4.3.1 Teclados
Dvorak (1932)
Detalhes
Leiaute para a freqüência das letras em inglês
Vogais e consoantes mais usadas na 2a fileira
Digitação mais rápida (150 ppm vs 200+ ppm)
Vantagens
Menos erros
Menos passeios dos dedos
8/20/09
Desvantagens
Todo mundo usa o Qwerty
Custo de treinamento (uma semana?)
Custo de substituição
Slide 100
4.3.1 Teclados
Chord
Detalhes
Várias teclas pressionadas ao mesmo tempo
Diferentes combinações geram diferentes
letras
Muito poucas teclas (estenografia)
Vantagens
Pequeno tamanho
Uso de uma só mão
Desvantagens
Todo mundo usa o Qwerty
Custo de treinamento
Nenhum conhecimento externo
8/20/09
Slide 101
4.3.2 BatChord
http://www.nanopac.com/keyboard.htm
8/20/09
Slide 102
4.3.3 Mouseburger
http://www.unipac-usa.com/info.html
8/20/09
Slide 103
4.3.4 Teclado DVORAK
8/20/09
Slide 104
4.3.4 Teclado DVORAK
http://www.mwbrooks.com/dvorak/layout.html
8/20/09
Slide 105
4.4 Cores
Use poucas cores
Ainda há monitores que usam 16 cores
Muitas cores geram poluição visual
Prefira as cores primárias
Limite-se às 16 cores basicas
Não são pontilhadas (dithered)
(a não ser em monitores com menos de
dezesseis cores)
Aqua
Black
Blue
Fuchsia
8/20/09
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
yellow
Slide 106
4.4.1 Web-safe Colors
256 ou 16 milhões de cores?
Muitos monitores ainda usam 256 cores
Escolhem-se 216 das 256 cores
0%, 20%, 40%, 60%, 80% e 100%
Hexa: 00, 33, 66, 99, CC, FF
RGB: 6 x 6 x 6 = 216
Exemplo: #330000, #CCCCCC, #FF00CC
Restantes 40 cores
Reservadas ao sistema operacional
8/20/09
Slide 107
4.4.2 Bom Uso
Para mostrar andamento (progresso)
Não use espectro de cores
Prefira dégradé de cores primárias
contrastantes
As cores devem ser personalizáveis
Cores de primeiro e segundo planos
Não podem ser ambas claras ou escuras
Use cores complementares
(eg, amarelo + azul = branco)
Texto amarelo sobre fundo azul
8/20/09
Slide 108
4.4.3 Aspectos
Psicológicos
As cores provocam reações diferentes
Cores quentes (vermelho, amarelo e laranja)
agitação, diversão e euforia
Cores frias (azul e verde)
ambiente calmo
Fundo branco
Sensação de organização e agilidade
Cores "femininas" (rosa, vermelho, amarelo
feminilidade
Fundo claro (branco ou cinza) e letras pretas
tradição
8/20/09
Slide 109
4.4.4 Daltonismo
Tipos
Tricromasia – enxerga 3 cores mas trocadas
Protanomalia – pouco o vermelho (1/100)
Deuteronomalia – pouco o verde (5/100)
Dicromasia – enxerga duas cores
Protanopia – nada de vermelho (1/100)
Deuteronopia – vermelho, âmbar e verde
(1/100)
Monocromasia – enxerga claro/escuro (raro)
Ocorrência
Um em cada doze homens
Uma em cada duzentas mulheres
8/20/09
Slide 110
4.4.4.1 Teste de
Daltonismo
8/20/09
Slide 111
4.4.4.2 Como Protanópicos
veem
8/20/09
Slide 112
4.4.4.2 Como Protanópicos
veem
8/20/09
Slide 113
4.4.4.3 Design
Dicas
Não dependa somente das cores
Especialmente verde e vermelho
Prefira “clique no botão da direita”
a “clique no botão vermelho”
Deixe grande contraste entre as cores
Teste a interface em simuladores W3C
www.newmanservices.com/colorblind
Vischeck simula (www.vischeck.com)
Daltonize corrige (www.vischeck.com)
8/20/09
Veja também http://www.linuxacessivel.org/
Slide 114
8/20/09
Slide 115
8/20/09
Slide 116
4.5 Elementos
São partes de uma GUI
Menus
Caixas de Diálogo
Caixas de Mensagens
Controles
Botões
Barras de Ferramenta
8/20/09
Slide 117
4.5.1 Menus
Tipos
Menus da barra de menus (Drop-down)
Divida-os em seções com barras horizontais
Mude a cor das opções correntemente
desativadas
Use “. . .” para indicar caixa de diálogo
Mostre atalhos do teclado
Menus em cascata (hierárquico)
8/20/09
Ramificação de entrada do menu
Problemas:
Dificuldade de acesso pelo mouse
Ocultamento de itens
Complexidade vs profundidade
Slide 118
4.5.1 Menus
Tipos
Menus Pop-up
Menus flutuantes não permanentes
Aparecem na vidraça com o clique do mouse
Menus Destacáveis
Menus que podem ser fixados na tela
Ponto médio entre o menu e a caixa de
diálogo
8/20/09
Slide 119
4.5.1.1 Exemplo
Barra de Menus
Opção
selecionada
Opção
desativada
Atalho
Ícones
Menu em
cascata
Divisão
8/20/09
Indicador de caixa de diálogo
Slide 120
4.5.1.2 Menu Destacável
Destaque
Pop-up Menu
Menu
Destacado
8/20/09
Slide 121
4.5.2 Caixas de Diálogo
Janelas de tamanho fixo com controles
Modalidade
Não Modal
Permite uso do aplicativo após ser exibida,
eg FIND do MS Word
Modal de Aplicativo
Proíbe uso do aplicativo enquanto exibida,
eg "MÊS INVÁLIDO"
8/20/09
Slide 122
4.5.2 Caixas de Diálogo
Modalidade
Modal de Sistema
Paralisa todo o sistema,
eg tela azul da morte:
"ESTE APLICATIVO EXECUTOU UMA
OPERAÇÃO ILEGAL..."
Semi-modal de Aplicativo
Permite uso limitado do aplicativo enquanto
exibida, eg seleção de células em planilha
eletrõnica
8/20/09
Slide 123
4.5.2 Caixas de Diálogo
8/20/09
Slide 124
4.5.2 Caixas de Diálogo
Mobilidade
Fixa
Posição fixa na tela
Pior caso: modal de sistema fixa
Móvel
Posição livre na tela
Desdobrabilidade
Desdobrável
Protege operador de detalhes irrelevantes
eg FIND do OpenOffice ("Outras Opções...")
Não desdobrável
Todas as informações são apresentadas
8/20/09
Slide 125
4.6 Botões
Uso de botões
Agrupados
Arranjados horizontal ou verticalmente
Grandes o suficiente para conter seu texto
Botão mais utilizado deve ser colocado...
Mais à esquerda se disposto
horizontalmente
Mais acima se disposto verticalmente
Botão Help fica na extremidade oposta
Evite usar mais de quatro botões
8/20/09
Slide 126
4.6 Botões
Tipos de botões
de Comando - caixa retangular com título
de ação - iniciam uma ação
de saltar - fecham caixa atual e abrem
outra
de saltar e retornar - abre nova caixa
sem fechar atual
de desdobrar - expandem a caixa atual
de dobrar - contraem a caixa atual
8/20/09
Slide 127
4.6 Botões
Tipos de botões
8/20/09
De Opção - seleção de valor(es)
de rádio - um só é selecionado
(tradicionais e com conjunto de valores)
De verificação - mais de um pode ser
selecionado
de lista - onde um só item pode ser
selecionado
de texto - controles de edição de
informação
deslizantes - ajuste de valores em
dimensões contínuas
de aumentar/diminuir - caixas de texto
especializadas
Slide 128
4.6 Botões
8/20/09
Slide 129
4.6.1 Exemplos
8/20/09
Slide 130
4.7 Cuidados Especiais
Operadores com pequena deficiência visual
Não é nessário usar fontes
grandes
demais
Não insista em usar fontes
pequenas demais
Deixe-os setar preferências no próprio
programa
8/20/09
Slide 131
4.7 Cuidados Especiais
Operadores com deficiência visual
Use imagens com moderação
Prcocure sempre usar alternativas
<IMG SRC="ufc.gif" ALT="Logo UFC">
Facilite o trabalho de screen readers
Use tags apropriadas (HTML)
<Acronym>
<Abbrev>
Utilize feedback sonoro
Operadores com deficiência auditiva
Não confie somente em feedback sonoro
8/20/09
Slide 132
Onde Estamos...
1. Introdução
2. Projeto da Interface
3. Sistema de Janelas
4. Interface Gráfica com o(a) Usuário(a)
5. Testes de Usabilidade
6. Exemplos de Mau Design
7. Conclusão
Referências
8/20/09
Slide 133
5. Testes de Usabilidade
Experimentos que buscam avaliar:
o uso de uma interface
a satisfação do(a) usuário(a)
Erros encontrados mais cedo
⇨ menor custo e menor tempo de conserto
Tipos
8/20/09
Formativo – feedback direto de beta testers
de um produto em desenvolvimento
Somativo – testa grau de eficiência e
satisfação de um produto quase pronto
Pós-produção – questionários aplicados ou
uso de help desk de produtos já prontos
Slide 134
5. Testes de Usabilidade
Defina a informação desejada e como obtê-la
Projete o teste
Selecione grupo piloto de aplicação
Selecione grupo maior representativo da
diversidade de usuários
Gere relatório e faça mudanças de acordo
8/20/09
Erros
Encontrados
100%
Número de Usuários
Slide 135
5.1 Exercício
Você irá usar vários programas para realizar
a mesma tarefa
Todos eles são capazes de executá-la
A diferença está, portanto, na interface
Com o auxílio de um questionário, anote a
dificuldade/facilidade ao usar cada
programa
Uma vez terminado o experimento, analise
as diferentes interfaces
Qual a melhor?
8/20/09
Slide 136
5.1 Exercício
Você vai precisar de
Caneta
Papel
Relógio
Marque o tempo de cada tarefa
Não converse com ninguém durante o teste
É proibido pedir ajuda
(senão do próprio programa)
Lembre-se:
não é você que está sendo testado(a),
mas a interface
8/20/09
Slide 137
5.1 Exercício
Monte os dados obtidos no experimento numa
tabela
Responda:
❏ Quantas vezes usou o botão de UNDO?
❏ Qual o tempo gasto em cada tarefa?
❏ Qual desses programas achou mais fácil?
❏ Mais rápido?
❏ Mais intuitivo?
❏ Tem a melhor interface?
❏ Contribuiu para cometer mais erros?
❏ Levou mais tempo para ser aprendido?
❏ Teria mais retenção com o tempo?
8/20/09
Slide 138
5.2 Questionário
Adaptado de Maitland, G.
"The Art of Color and Design"
Vão ser mostradas 10 perguntas,
em geral com duas respostas diferentes
Escolha a resposta que, na sua opinião,
tem melhor gosto
8/20/09
Slide 139
5.3.1 Questão 1
8/20/09
Slide 140
5.3.2 Questão 2
8/20/09
Slide 141
5.3.3 Questão 3
8/20/09
Slide 142
5.3.4
Questão
4
8/20/09
Slide 143
5.3.5 Questão 5
8/20/09
Slide 144
5.3.6 Questão 6
8/20/09
Slide 145
5.3.7
Questão 7
8/20/09
Slide 146
5.3.8 Questão 8
8/20/09
Slide 147
5.3.9 Questão 9
8/20/09
Slide 148
5.3.10 Questão 10
8/20/09
Slide 149
5.4 Observação
8/20/09
Slide 150
Onde Estamos...
1. Introdução
2. Projeto da Interface
3. Sistema de Janelas
4. Interface Gráfica com o(a) Usuário(a)
5. Testes de Usabilidade
6. Exemplos de Mau Design
7. Conclusão
Referências
8/20/09
Slide 151
6. Exemplos de Mau
Design
Fontes:
www.angelfire.com/super/badwebs/
http://umlchina.com/GUI/Termino.htm
http://pixelcentric.net/x-shame/
8/20/09
Slide 152
6.1 HTML Validator v3.05
8/20/09
Slide 153
6.2 HTML Validator v4
8/20/09
Slide 154
6.3 HTML Validator Solução
8/20/09
Slide 155
6.4 MS Outlook
8/20/09
Slide 156
6.4 FTP Control 3.3.3
8/20/09
Slide 157
6.5 Yes ou No?
8/20/09
Slide 158
6.6 Usuários Estúpidos?
8/20/09
Slide 159
6.7 Adobe GoLive
8/20/09
Slide 160
6.8 Mozilla
8/20/09
Slide 161
6.9 Lyceum
Que ícone serve para quê?
8/20/09
Slide 162
Onde Estamos...
1. Introdução
2. Projeto da Interface
3. Sistema de Janelas
4. Interface Gráfica com o(a) Usuário(a)
5. Testes de Usabilidade
6. Exemplos de Mau Design
7. Conclusão
Referências
8/20/09
Slide 163
7. Conclusão
Palavras-chave
Feedback
Visibilidade
Usabilidade
Estado do Sistema
Prevenção de erros
Conhecimento interno e externo
8/20/09
Slide 164
7. Conclusão
Palavras-chave
Poder das restrições
Mapeamento natural
Facilidade de saber
O que fazer
Como fazer
O que acontece
8/20/09
Slide 165
7. Conclusão
Design =
Custo
+ Harmonia
+ Confiança
+ Segurança
+ Beleza estética
+ Funcionalidade
Bom Design = Design + Uso + Prazer
8/20/09
Slide 166
Referências
Interface Hall of Fame
(http://www.umlchina.com/GUI/HallFame.htm)
Interface Hall of Shame
(http://www.umlchina.com/GUI/Termino.htm),
(http://omor.com/hci/shame/)
User Interface Design News
(http://www.uidesign.net)
Teclado DVORAK
(http://www.mwbrooks.com/dvorak/)
Bobby - Acessibilidade de sites
(http://www.cast.org/bobby/)
8/20/09
Slide 167
Referências
Vincent Flander's Web Pages that Suck
Aprenda bom design a partir do mau design
(http://www.webpagesthatsuck.com/)
SIG da STC sobre Usabilidade
Artigos, links, livros, recursos sobre IHC
(http://www.stcsig.org/usability/)
Página do Yahoo sobre IHC
(http://dir.yahoo.com/Science/Computer_Science/Hu
man_Computer_Interaction__HCI_/)
A History of the GUI (por Jeremy Reimer)
(http://arstechnica.com/articles/paedia/gui.ars)
8/20/09
Página sobre usabilidade
(www.oslo.sintef.no/avd/32/3270/brosjyrer/engelsk/
)
Slide 168
Referências
Top Ten Mistakes in Web Design
(http://www.useit.com/alertbox/9605.html)
Top Ten Web Design Mistakes of 2005
(www.useit.com/alertbox/designmistakes.htm)
Top 50 Logo Design Tutorials
(http://www.elogodesign.com/logo-design-tutorials/)
Dicas de Acessibilidade em Linux
(http://www.linuxacessivel.org/)
MouseSite - Aprenda a história da IHC
(http://sloan.stanford.edu/MouseSite/)
8/20/09
Slide 169
Referências
Usability Views - artigos
(http://www.usabilityviews.com/)
Usability First
(http://www.usabilityfirst.com/websites/index.txl)
Web Design & Usability Guidelines
(http://www.usability.gov/pdfs/guidelines.html)
Web usability articles & resources
(http://www.webcredible.co.uk/user-friendlyresources/web-usability/)
8/20/09
90% of All Usability Testing is Useless
(adaptivepath.com/publications/essays/archives/
000328.php)
Slide 170
Referências
Shneiderman, Ben: Designing the User
Interface: Strategies for Effective HCI, 4rd Ed.,
Addison-Wesley, 2004
Butow, R: User Interface Design for Mere
Mortals, Addison-Wesley, 2007
Norman, D. The Design of Everyday Things.
Doubleday, 2002
Bass,L. & Coutaz,J. Developing Software for
the User Interface. Addison-Wesley, 1992
8/20/09
Williams, R. Design para quem não é
Designer: Noções Básicas de Planejamento
Visual, 6a ed., Callis, 1995
Slide 171
Referências
Dumas, J., & Redish, J. A Practical Guide to
Usability Testing. Intellect Books, 1999.
Preece, J. Human-Computer Interaction.
Addison-Wesley, 1994
Minasi, M. Segredos de Projeto de Interface
Gráfica com o Usuário. IBPI Press, 1994
Brenda, L. The Art of Human-Computer
Interface Design, Addison-Wesley, 1990
Carroll, J. Human-Computer Interaction in
the new Millennium, Addison-Wesley, 2001
8/20/09
Burns, D. Técnicas de Editoração
Eletrônica, Campus, 1990
Slide 172
Referências
Gosney, M. et al. Design em Preto e Branco
para Computadores, LpeM, 1996
Maitland, G. The Art of Color and Design,
McGraw-Hill, 1951
8/20/09
Slide 173
Grato pela
audiência.
Clique AQUI para terminar
8/20/09
Slide 174