Prof. Roberto Cabral de Mello Borges
Instituto de Informática UFRGS 2007INF 043 - Comunicacão
Homem-Computador
Parte 9
Histórico
• 1ª interface gráfica: Xerox em 1973 no computador
"Alto", a partir de um projeto do MIT [Ivan Sutherland]
• Apple: Macintosh 1985
• Windows: cópia de algumas funções do Mac, em 1987 • Interfaces gráficas são conhecidas como WIMP
(Windows, Icons, Menus e Point devices)
• O paradigma de interação é conhecido como
WYSIWYG (What You See Is What You Get)
• Tendência: migrar para o padrão WYGIWYS (What
Histórico dos elementos da Interface Gráfica
• Menus baseados em teclado – Antes de 1978
• Menus Hierárquicos baseados em teclado – UCSD Pascal - (1978)
• Displays Bitmapped
– Xerox PARC (Palo Alto Research Center), para computador Alto (1973) • Light Pen como pointer para tela
– 1960
• Joysticks
– Spacewar games, 1962 • Trackballs
– anos 60
• Dispositivo de apontamento com pointer na tela – Douglas Englebart - SRI (anos 70).
• Mouse
– Douglas Englebart - SRI
• Mudança no Cursor para mostrar modo do sistema
– William Newman - Xerox PARC
• Cursor muda para mostrar contexto
– David Tilbrook (Newswhole) (1975)
• Menus
– LRG - Xerox PARC
• Popup Menus
– Ingalls (LRG) - Xerox PARC
• Pulldown menus
– Lisa - Apple
• Apple Menu bar
– Lisa - Apple
Histórico dos elementos da Interface Gráfica
• Menus Hierárquicos
– Paeth(SSL) - Xerox PARC (Smalltalk)
• Desabilitar itens de menus
– Lisa - Apple ou Xerox PARC (1982)
• Teclas de comando (atalhos) para itens de menus
– Lisa - Apple
• "Check Marks" ( √ ) em itens de menu
– Lisa - Apple
• Janelas Sobrepostas
– Ingalls(LRG) - Xerox PARC
• Janelas lado-a-lado
– CSL - Xerox PARC
• Filas de eventos
– Simula - NCC, Lisa - Apple (1975)
Histórico dos elementos da Interface Gráfica
• Icones
– David Smith(SDD) - Xerox (Star->Mac->Lisa)
• Barras de Rolagem
– LRG - Xerox PARC
• Push Buttons
– LRG - Xerox PARC
• Radio Buttons
– Kaehler(LRG) - Xerox PARC
• Check Boxes
– LRG - Xerox PARC
• Dimming de botões inativos
– David Tilbrook (Newswhole) (1975)
• Dialog Boxes
– Star - Xerox PARC
• Multiplos fontes & estilos
no texto
– CSL - Xerox PARC (Bravo) (1978)
• Move/Copy/Delete
– Xerox PARC
• Cut/Copy/Paste com
mouse
– Tesler(SSL) - Xerox PARC (Gypsy, Smalltalk)
• Ponto de Seleção entre
caracteres
– Tesler(SSL) - Xerox PARC (Gypsy & Smalltalk).
Histórico dos elementos da Interface Gráfica
INTERFACE GRÁFICA
• Elementos da interface gráfica
–janelas
–menus
–ícones
–figuras geométricas
–caixas de diálogo
–caixas de mensagem
–barra de ferramentas
–controles
–som e vídeo
Janelas
• Partes de uma janela
–Barra de título
–Botão de menu do sistema
–Botão de minimizar
–Botão de maximizar
–Barra de menu
–Área de status/mensagens
–Barras de deslizamento
Janelas
• Janelas divididas
– permite visualizar diferentes partes da mesma janela,
com barras de rolamento independentes.
• Redimensionamento
– característica dos ambientes Mac ou Windows de
redimensionar janelas em diferentes disposições:
» cascata
» lado a lado horizontal » lado a lado vertical
» redimensionamento manual.
– algumas janelas não são dimensionáveis (evitar este
Menus
• Todas as funções do software devem
poder ser apresentadas em menus,
mesmo que haja um botão com a
mesma função já programada.
• Tipos de menus sugeridos
– dois níveis padrão
– menus em cascata (terceiro nível em diante) – menus destacáveis ou popup
Caixas de Diálogo e de
Mensagem
• Caixas de Diálogo:
– obtém informações do usuário, através de controles – são usadas para parametrizar operações.
• Caixas de Mensagem:
– comunicam informações ao usuário – podem obter confirmações do usuário – são caixas de diálogo simplificadas.
• Caixas de Diálogo-Mensagem:
– são caixas que contém ao mesmo tempo mensagens
Controles
• Geralmente são usados em Caixas de Diálogo
• Tipos de Controles:
– Texto
– Caixa de Edição (Edit Box)
– Caixa de Verificação (Verify Box) – Caixa de Lista (List Box)
– Caixa de Grupo (Group Box) – Botão de Rádio (Radio Button)
– Botão de Seleção Múltipla (Option Button) – Botão de Comando (Command Button) – Barras de Rolagem (Scroll Bar)
– Combinação: Caixa de Edição/Caixa de Lista – Controle Giratório.
Caixas de Diálogo e Controles
Botões de seleção Múltipla e de
Controle
Botões de Seleção Múltipla
Controles
• Texto
• Caixa de Edição (Edit Box)
• Caixa de Verificação (Verify Box) • Caixa de Lista (List Box)
• Caixa de Grupo (Group Box) • Botão de Rádio (Radio Button)
• Botão de Seleção Múltipla (Check Button) • Botão de Comando (Command Button) • Barras de Rolagem (Scroll Bar)
• Combinação: Caixa de Edição/Caixa de Lista • Controle Giratório.
Botões de Comando
• Botões de Ação
– iniciam uma ação a partir da caixa de diálogo – Os mais comuns são: OK, Cancel e Close. • Botões de Saltar
– fecham a caixa de diálogo atual e abrem uma nova.
– um botão de saltar pode enviar o usuário para uma segunda caixa de
diálogo com mais detalhes sobre as opções disponíveis na primeira.
• Botões de Saltar e Retornar
– abrem uma nova caixa mas não fecham a antiga
– uma caixa do tipo Details, pode funcionar desta forma • Botões de Desdobrar
– expandem a caixa de diálogo atual para mostrar mais opções. • Botões de Dobrar
Botão de Desdobrar
Botões de Rádio
• Botões de Rádio Tradicionais
– são apresentados por círculos– círculo preenchido por uma bola preta, significa a opção
selecionada
– quando uma opção estiver selecionada, automaticamente todas as
anteriores devem ficar não selecionadas
– é usado para seleção de uma opção única e obrigatória, dentre
várias
– é interessante sempre ter um default.
• Botões sob forma de Conjunto de Valores
– é um grupo de botões retangulares, onde só um pode serescolhido
– geralmente é usado para escolher cores ou padrões de textura, ou
Caixas de
Verificação Botões de
Botão de Seleção Múltipla ou Caixa
de Verificação (Check Box)
• são listas com um pequeno quadrado ao lado, que
pode ter quaisquer das opções marcadas (com um X)
• difere dos botões de rádio, pela possibilidade de
poder se marcar uma, duas, três ou mais opções,
inclusive todas ou nehuma
• há opções que só podem ser ligadas, se outra estiver
ligada; neste caso desabilitar a opção secundária
(dependente), mostrando-a em cinza, e de forma
visual a mostrar a hierarquia
• pode-se usar caixas de verificação em combinação
Caixas de Lista
• São usadas para exibir opções para o usuário,
representadas por textos, cores ou gráficos.
• Tipos de Caixas de Lista:
– Caixa de Lista Padrão de Seleção Simples
» todas as opções disponíveis são exibidas e o usuário pode selecionar
apenas uma delas
– Drop-down de Seleção Simples:
» as opções disponíveis só são exibidas quando o usuário dá um click na
seta drop-down
– Seleção Múltipla Padrão:
» todas as opções disponíveis são exibidas » pode ser selecionada mais de uma opção – Drop-down de Seleção Múltipla:
» as opções disponíveis só são exibidas quando o usuário dá um click na
seta drop-down
Caixas de Lista
• Caixas de Lista Padrão:
– exibem toda a lista de uma só vez – geralmente têm entre 3 e 8 ítens
– se as opções da lista representam os possíveis
valores dos atributos para uma seleção, o valor corrente deve ser selecionado quando a lista é exibida inicialmente
– sendo heterogênea a seleção, nenhum valor deve ser
selecionado
– quando o espaço é limitado, pode-se substituir listas
Caixa de Lista Drop Down de Seleção Simples
• Caixas de Lista Drop-down:
– até que sejam “clicadas”, exibem apenas a seleção
corrente de uma lista
– só usar se houver três ou mais opções
– se uma lista drop-down contém mais do que 8
ítens, deve possuir barra de rolamento vertical
– preferencialmente abrir a lista na opção até então
selecionada, posicionando-a no meio da tela (mostrando que há opções mais acima e mais abaixo [se houver, é claro])
Caixa de Lista Padrão
Caixas de Texto
• São controles de edição, dentro dos quais o usuário
digita informações em forma de texto.
• A maioria das Caixas de Texto usa apenas uma linha,
como por exemplo, a caixa do menu Salvar Como
(Save As), no espaço reservado para digitar o nome do arquivo a ser salvo.
• Se a caixa for do tipo multilinhas ilimitado, só usar
barras de rolagem vertical, quando se digitar uma
próxima linha que não caberá mais na tela reservada para a caixa de texto.
• Para inserir um Return dentro do texto, usar a
Botões Deslizantes
• São usados para exibir e ajustar os valores em
dimensões contínuas, como em volume, cor, brilho, contraste, matiz, etc.
• Consiste em uma barra contendo uma escala ou
marca de medida, mais um indicador perpendicular à barra.
• O indicador mostra o valor corrente.
• O indicador pode ser arrastado pelo mouse.
• Pode incluir uma caixa de texto, que mostra o valor
corrente associado ao botão, podendo este valor ser alterado manualmente, quando então o botão deverá se ajustar para a posição correspondente.
Campos de Texto Estáticos
• São usados para exibir valores que serão lidos, mas
não alterados, como por exemplo, mensagens de erro ou mensagens informativas.
• Nestes campos o usuário não pode alterar ou digitar
nada, devendo o teclado ser bloqueado para digitação.
• Uma forma de alertar para este tipo de campo é a cor
de fundo do campo de texto estático, que deve ser a cor de fundo normal da janela, ao contrário da cor de fundo de um campo de Caixa de Texto, que entra na cor (mais escura) de edição.
Caixas de Combinação
• É a combinação de um campo texto editável e
uma caixa de lista.
• É utilizada quando o aplicativo exige uma
entrada do usuário e pode exibir uma lista de
respostas possíveis.
• O usuário pode digitar uma resposta na caixa
de texto, caso a resposta correta não esteja
disponível na lista. A diferenca básica com a
caixa de lista é que na caixa de lista pode-se
digitar um ítem completamente novo, que não
esteja na lista.
Botões de Aumentar e Diminuir
• É uma caixa de texto com duas setas (uma para cima e
outra para baixo), colocadas à direita da caixa.
• É uma caixa de texto especializada, ou seja, aceita
apenas um conjunto de valores discretos de entradas ordenadas.
• O valor da caixa de texto pode ser manipulado por:
– digitação de um novo valor dentro da caixa e texto
– dando um click na seta para cima, para aumentar o valor – dando um click na seta para baixo, para diminuir o valor
• Aplicações:
– ajuste de horários e datas
– ajuste de margens e tabulações
Caixas de Diálogos
• Modalidade:
– não modal:
» flutuam e permitem interação com outros objetos » servem para informar ou aguardar uma entrada » exemplo: uma caixa de ferramentas
– aplicativo modal:
» permite mudar de aplicativo, mas não permite mudar de objeto dentro do mesmo
aplicativo
» exemplo: uma caixa com informação que está imprimindo – sistema modal:
» paralisa todo o sistema, até que se responda ao que é solicitado
» é usada para informar a ocorrência de erros, e aguardar instruções de como
prosseguir
– aplicativo semi-modal
» permitem selecionar objetos, mas não executar ações
» exemplo: numa planilha uma caixa que solicita coordenadas; pode-se sair da
Caixas de Diálogo
• Mobilidade:
– móveis: podem ser deslocadas para qualquer posição da
janela
– fixas: ocupam sempre o mesmo local
• Caixas Desdobráveis:
– podem ser abertas para mostrar mais detalhes – devem também poder ocultar detalhes
• Tipos de Caixas:
– caixas de mensagem
» apenas informam uma mensagem
– diálogo padrão
Botões em Caixas de Diálogo
• Arranjo:
– vertical: todos os botões devem ter mesma altura e mesma
largura
– horizontal: mesma altura, mas a largura pode ser variável – OK sempre acima ou à esquerda
– OK e Cancelar devem estar juntos
– devem conter todo o nome. sem abreviações – Help: oposto ao OK, espaçado
– sempre uma linha de texto por botão
• Cancelar x Parar
– Cancelar : não faz nada e retorna
Caixas de Diálogo
• Caixas Pré-definidas:
– Abrir Arquivo (File Open) – Salvar Como (Save As) – Imprimir (Print)
– Configurar Impressora (Printer Setup) – Fontes (Choose Font)
– Cores (Choose Color)
• Sempre que possível, usar as caixas
pré-definidas pois já constituem um padrão e isto
facilita o uso pelo usuário.
Caixas de Mensagem
• São Caixas de Diálogo com textos e botões
– sugere-se um ícone explicativo: » Informação (I)
» Exclamação (!) » Interrogação (?)
» Parada (sinal de Pare) – botões selecionáveis
» OK, Cancelar (OK, Cancel) » Sim, Não (Yes,No)
Menus Gráficos
• Drop-down ou cortina
– a partir de um menu horizontal fixo dá-se um click numa
opção e a partir dela desce na vertical o menu
• Cascata
– é uma ramificação do menu drop-down
• Pop-up ou flutuante
– é um menu que não tem ligação com outros menus, podendo
ficar “flutuando” em qualquer ponto da tela
• Tear-off ou destacáveis
– é um menu que é destacado do menu drop-down e
Menu Drop Down
• é o tipo básico das interfaces gráficas• normalmente fica pendurado em um título da barra de
menus
• pode ser dividido com barras, separando diferentes
componentes
• algumas opções podem não estar habilitadas, no
momento; neste caso apresentá-las em cinza, ao invés de preto, não havendo ações associadas quando
selecionadas
• no caso de opções não habilitadas por restrições de
acesso, não mostrar a opção
• no caso do número de opções exceder o tamnho da tela,
indicar na parte inferior, com uma seta para baixo, que há continuação.
Menus em Cascata
• menus em cascata ramificam uma opção do menu
padrão
• normalmente aparecem à direita da opção do menu
drop-down ao qual estão associados
• no menu padrão deve haver uma seta para direita
indicando que há um menu em cascata
• permitem jogar para um nível seguinte opções que
ficariam acumuladas num só nível
• pode haver um terceiro ou quarto nível de cascata
(não é muito recomendável!)
• são mais complicados de serem manuseados pelo
Menus Pop-Up
• são menus que podem ficar em algum ponto
qualquer da tela, “soltos”
• normalmente são acionados através do botão
direito do mouse
• normalmente é desativado pelo próximo click
(do botão esquerdo do mouse)
• usar poucos itens e não usar em cascata
• normalmente entra numa posição próxima de
Menus Destacáveis
• é um menu em cascata ou pop-up que se
pode destacar e arrastar para outro lugar
da tela
• é um intermediário entre uma estrutura de
submenus e uma caixa de diálogo
• exemplos destes menus são os menus de
controles de programas gráficos como
Photoshop, Canvas, MacDraw,etc, usados
para controles de cores, penas, setas,
objetos, etc.
Itens de Menus
• Tipos de ítens de menus:
– ações (ex. Save)
– atributos (ex. Negrito) – documentos
– janelas de documentos
– itens gráficos de menu (ex. ferramentas da caixa de ferramentas)
• alguns ítens são executados assim que são selecionados,
outros necessitam mais informações
– ex. Estilo--> Negrito, é imediato
– Arquivo--> Abrir, necessita saber detalhes sobre diretório, disco
• quando um ítem de menu abrir outro menu (em cascata),
indicar com uma seta para a direita
• quando um ítem de menu abre uma janela, indicar com
Itens Independentes e
Interdependentes
• ítens de menus são independentes quando se
pode selecionar mais do que uma opção ao
mesmo tempo
– são similares às caixas de verificação (botões de seleção
múltipla)
– ex. selecionando atributos de um texto, pode-se escolher
simultaneamente: Negrito, Sublinhado e Itálico
• Ítens de menus são interdependentes quando
só se pode selecionar uma opção de cada vez
– são similares aos botões de rádio
Regras para Bons Menus
• a chave para um bom menu é a organização
• procurar sempre associar um mnemônico a cada ítem
do menu
• havendo mnemônico associado, pode-se criar atalhos
que combinam Ctrl ou Alt com a primeira letra do mnemônico
– Ex. Print --> Ctrl-P
• usando separadores, pode-se criar grupos de ítens • cada grupo deve ser formado de ítens de mesmo
relacionamento lógico
• se possível fornecer menus para principiantes e
Entrada de Dados
• Dispositivos de Entrada: – teclado – mouse – trackball – caneta – digitalizador • Atividades de entrada: – apontamento:» direciona a atenção do programa para um objeto ou opção – seleção:
» escolhe um ítem ou grupo de ítens – entrada de dados:
» números e textos
Teclado
• Vantagens:
– muitas combinações de teclas
– mais familiar para a maioria dos usuários, mesmo
sem experiência
– alta velocidade de entrada, para usuários treinados – ótimo para seleção extensa.
• Desvantagens:
– ocupam espaço sobre a mesa, maior que o mouse – não são apropriados para apontar ou desenhar.
Mouse
• Vantagens:
– bom para apontar
– bom para seleção de um ítem, mas para vários
ítens depende do teclado.
• Desvantagens:
– inadequado para várias páginas – deve ser de boa qualidade
– problemas com computadores tipo
Funções de Entrada
• Apontar:
– é uma ação passiva, que não deve modificar nada
– pode fazer acesso a algum help curto ou mensagem ilustrativa.
• Clicar:
– botão esquerdo é o botão principal
– botão direito (se houver) deve ativar funções especiais
relativas ao objeto já selecionado
– botão direito pode também acionar menu flutuante, caixa de
diálogo de atributos ou função definida pelo usuário
– botão central: evitar ao máximo seu uso, pois não existe em
todos ou mouses, além de criar dificuldades na escolha do botão.
Funções de Entrada
• Clicar e Arrastar:
– permite múltipla seleção de texto, listas ou células – permite mover objetos
– permite apagar ou modificar a dimensão de objetos – a seleção e movimentaçãem ser diferenciados:
» pela forma do cursor
» pelo destaque do objeto
Funções de Entrada
• Duplo Click:
– selecionar e ativar
– usar como atalhos para ações em objetos
• Duplo Arrastar = Duplo Click + Arrastar:
– não é usual: evitar
• Cursor:
– alterá-lo apenas quando necessário – usar cursores conhecidos
• “Eco de Processamento”:
– usar ampulheta, relógio ou equivalente para indicar que está
Entrada via Teclado
• Teclas Modificadoras: – CapsLock / Shift – Alt – Ctrl – NumLock – ScrollLock – Ins • Teclas de Acesso: – seleção de menus: Alt • Teclas de Atalho:– executa função: Ctrl
• Teclado deve ser backup do mouse:
Teclas Padronizadas
Delete Backspace Ins Shift Ctrl Alt•sem seleção, apaga caractere à direita (PC)
e á esquerda (Mac)
•com seleção, apaga a seleção
•sem seleção, apaga caractere à esquerda (PC) •com seleção, apaga a seleção
•com teclas alfabéticas produz letras maiúscula
•com click do mouse, define limites de faixa de seleção •com teclas de função, alterna o significado da ação •alterna modo de inserção e sobrescrita (PC)
•com teclas alfabéticas fornece atalhos
•com click do mouse, seleciona ou desativa descontinuamente •com teclas alfanuméricas seleciona opções de menu
Teclas Padronizadas
Home
Pg Up
Shift-Tab
Pg Dn
TabEnd
•início linha•com Ctrl, início dados •fim linha
•com Ctrl, fim dados •uma tela acima
•com Ctrl, uma tela
à esquerda
•uma tela abaixo •com Ctrl, uma tela
à direita
•campo ou objeto anterior
•uma unidade à esquerda
•uma unidade à direita
•uma unidade acima
•uma unidade abaixo
Teclas Padronizadas
F1
F3
F4
F6
F8
F10
Normal
Shift
Ctrl
Alt
Help
Help
Sair
Fechar
Sair
Próximo painel ou janela ExtensãoAdição
Menu
Teclas Padronizadas
Ctrl-Z, Alt-Backspace Ctrl-C, Ctrl-Ins Ctrl-V, Shift-Ins Ctrl-X, Shift-Del Ctrl-N Ctrl-S Ctrl-O Ctrl-P Ctrl-A Ctrl-B Ctrl-I Desfazer (Undo) Cortar (Cut) Copiar (Copy) Colar (Paste) Negrito Itálico (Italic) Sublinhado Abrir Novo (New) Salvar Imprimir Ctrl-Y RepetirCaixas de Grupo
• É uma moldura retangular, com um título na parte
superior, que agrupa controles correlatos.
• Elas permitem fornecer ao usuário uma associação