AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...

)
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

Então sabemos que a:

INTERAÇÃO HUMANO COMPUTADOR
Busca entender como as pessoas utilizam os
computadores, bem como investigar outras formas de
interação, para que o uso do computador seja cada
vez mais fácil e natural.
Outra definição: É o conjunto de processos, diálogos, e ações através dos quais
o usuário humano interage com um computador.
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

Segundo, Nielsen (2000), Rocha e Baranauskas (2003) e

Norman (2006), a interface ideal seria aquela em que:

É tão simples e fácil de utilizar, que as

pessoas iriam, naturalmente, interagir
com ela, sem se preocupar em
entender toda a complexidade das
funcionalidades.
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

Princípios de um bom Design

Desenvolvido pelo pesquisador Norman (2006).
Baseado nas frustrações que as pessoas experimentam
com objetos do cotidiano.

“Quando algo é desenvolvido sem pensar nos fatores

humanos ou sem considerar a maneira que as pessoas
pensam e agem, muitas vezes, torna-se impossível de ser
utilizado de modo satisfatório.”
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

Interface Gráfica do Usuário (GUI)

Na Interação Humano Computador, a interface de

gráfica do usuário (Graphical User Interface - GUI)
refere-se às informações gráficas, textuais e auditivas
apresentadas ao usuário e às sequências de controle
(como comandos de teclado ou movimentos do mouse)
para interagir com o programa.

O usuário seleciona símbolos (widgets), que são

elementos gráficos, como: janelas, botões, menus, ícones,
barras de rolagem etc.
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – JANELA
Janela é a área de trabalho para o projetista de
interface. Na janela são inseridos os objetos
(elementos de interação com o usuário).

Janelas primárias
A janela primária é a janela principal de uma
aplicação, através da qual são geradas todas as
restantes janelas. É a única janela a partir da
qual a aplicação pode ser fechada.
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – JANELA
Janelas secundárias
As janelas secundárias são geradas através da janela
primária. Por exemplo, numa aplicação de processamento
de texto, cada documento aberto aparece numa janela
secundária.
- output de mensagens (quadros de mensagem).
- input de informações adicionais (quadros de
diálogo, formulários).

OBS: As caixas de diálogo e de mensagens podem ser

consideradas como janelas secundárias.
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – JANELA
JANELAS PODEM SER DO TIPO:

1. SDI (Single Document Interface);

2. MDI (Multiple Document Interface);
3. Modal;
4. Não Modal;
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – JANELA
SDI – Single Document Interface

Modelo mais simples de janela:

Permite que apenas uma janela

(documento) seja aberta por vez.

Este tipo de janela evita que

atividades de diferentes naturezas
se misturem, diminuindo assim o
risco de o usuário se “perder” no
sistema.
Exemplo: WordPad (Microsoft)
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – JANELA

MDI – Multiple Document Interface

Modelo mais complexo de janela:

Permite que várias janelas sejam

abertas de uma só vez dentro de
uma janela principal.

Este tipo de sistema é

recomendado para janelas de
mesma natureza.

Exemplos: Arquivos do Word e Arquivos do PowerPoint.

 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – JANELA
JANELA MODAL

Janelas modais capturam

o foco do “sistema”.
Enquanto a janela modal
não for fechada, outra
janela não pode ser
utilizada.

Exemplos: Janela de Abrir, Janela de imprimir, Janela de login do sistema.

 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – JANELA

JANELA MODAL (CONTINUAÇÃO)

OBS:
Existem 2 tipos de janela modal:
Janela Modal ao programa.

Janela Modal ao sistema.

 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – JANELA
JANELA MODAL ao programa:
Neste tipo de janela, o usuário só pode executar outra tarefa no
mesmo programa caso a janela modal seja finalizada.
Exemplo: Janela Abrir, Janela de Imprimir.

Neste tipo de janela a funcionalidade de outros programas não é de

forma alguma afetada.

Exemplo: Utilizando o Microsoft PowerPoint um usuário pode acionar

a janela de Abrir Arquivo e, deliberadamente, alterar para o
programa Microsoft Word e executar suas tarefas sem o menor
problema.
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – JANELA
JANELA MODAL ao sistema:
Neste tipo de janela, o usuário só pode executar uma tarefa no sistema
operacional até que a janela modal ao sistema seja finalizada.

Neste tipo de janela a funcionalidade de todos os programas é

afetada, até que a janela modal seja finalizada.

Exemplo: Utilizando determinado

programa (no Windows
principalmente) acontece alguma
operação que compromete o sistema
operacional.

Exemplo: Janela de login, Janela de erro fatal!

 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – JANELA
JANELA NÃO MODAL:

Neste tipo de sistema, é possível que várias janelas sejam

abertas e o usuário pode, livremente, ‘transitar’ entre as
janelas sem que nenhuma restrição seja feita.

Exemplo: Utilizando o Microsoft PowerPoint, um usuário pode

abrir vários arquivos ao mesmo tempo e mudar de um
arquivo para outro sem o menor problema.
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – JANELA
JANELA NÃO MODAL (continuação)

Exemplo de sistema MDI e janelas não modais (Photoshop).

 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – COMPONENTES VISUAIS INTERATIVOS

Permitem ao usuário interagir
Disponíveis em bibliotecas
Podem ser agrupados
Precisam ser associados à
funcionalidade e aos objetos da
aplicação.
Exemplos:
Janelas;
Menus (pull-down, pop-up);
Ícones;
Cursores;
Botões;
Barra de Rolagem;
Barra de Ferramentas;
e outros
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – MENUS (TIPOS)

Menus pull-down
Seleção simples: radio buttons

Toolbars e palettes

Seleção múltipla: check boxes

 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – PADRONIZAÇÃO DE MENUS

A Microsoft adota um padrão para seus produtos
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – PADRONIZAÇÃO DE MENUS

Este padrão deve ser adotado em seu programa?

Esta é a melhor forma de exibir a funcionalidade do seu programa?

O usuário espera o item “arquivo” no menu?

Um programa para apresentações, um processador de textos, uma planilha e
um gerenciador de banco de dados possuem a mesma funcionalidade?

Por que programas com funcionalidades tão diferentes (Power Point, Excel,
Word e Access) devem possuir o mesmo menu?
Pode-se afirmar que fica mais fácil a utilização de um programa após conhecer
outro ?

Quantas pessoas utilizam todo o Office?

 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – PADRONIZAÇÃO DE MENUS

Padronização de menus = melhor interatividade

Alan Cooper (pesquisador respeitado na área de interface e autor do livro The

Essential of the User Interface):

“Os itens mais globais devem ficar à esquerda, seguidos pelos itens
mais específicos, caminhando para a direita”
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – DICAS (TOOL TIPS)

“ Fornece dicas sobre a funcionalidade dos objetos da interface.”

“ Quando o usuário posiciona o mouse sobre o objeto, um pequeno quadro aparece
com a dica. “
“ A dica deve ser simples e objetiva. “
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – BARRA DE STATUS

Barra de status (status bar): exibem mensagens diretas sobre...
 estado atual da aplicação
 item de menu selecionado
 estado do teclado
 hora atual

Exemplo: Programa PAINT do

Windows.
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – BOTÕES DE COMANDO

“ utilize botões de comando para disparar ações ou para indicar e alterar estados “

“ não deve haver interseção entre ações disparadas por botões diferentes (vs. “OK”,
“Salva e Fecha”) “

“ utilize descrições breves, consistentes e claramente distintas (vs. “Fechar”, “Cancelar”,

“Voltar”) “

“ mantenha o tamanho e posicionamento consistentes “

“ siga as convenções do ambiente operacional “

 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – BOTÕES DE OPÇÕES (RADIO) E SELEÇÃO

orientações gerais:
(CHECKBOX)
- se o número de opções for muito grande, utilize lista ou tabela;
- se o texto de um item for grande, alinhe pelo topo;
- pode possuir teclas de atalho.

Botões de opção (radio buttons)

- opções relacionadas e mutuamente exclusivas;
- apenas uma opção pode estar selecionada;
- pode apresentar um valor default.

Botões de seleção (check boxes)

- opções independentes, que podem estar ligadas ou desligadas;
- os estados ligado/desligado devem ser opostos;
- pode possuir valor misto.
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – LISTAS
# seleção simples (~ radio buttons) ou múltipla (~ check boxes).
# utilize para um grande número de opções.
# ordene as opções segundo algum critério.
# evite barras de rolamento horizontais.
# forneça um label para identificar a lista.
# forneça teclas de atalho para acesso rápido.
# considere permitir operações de drag-and-drop (arrastar e largar).
# seleção simples: pode utilizar combo box para poupar espaço.
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – OUTRO WIDGETS PARA ENTRADA DE DADOS

# forneça um label para identificar o elemento
# forneça teclas de atalho para acesso rápido

# valide a entrada de dados imediatamente, se possível

# caixas de texto (text boxes)
campo textual livre
# spins
valores contínuos, como volume sonoro
faixa limitada de valores sequenciais discretos
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – REGRAS DE OURO DO DESIGN DE

INTERFACES (Shneiderman)
1. PROCURE MANTER A CONSISTÊNCIA
2. PERMITA QUE USUÁRIOS FREQUENTES UTILIZEM ATALHOS
3.OFEREÇA FEEDBACK INFORMATIVO
4.PROJETE OS DIÁLOGOS PARA GARANTIR CONTINUIDADE
5.OFEREÇA PREVENÇÃO E TRATAMENTO DE ERROS
6. PERMITA DESFAZER AÇÕES FACILMENTE
• * BOTÕES DESFAZER E REFAZER
7.MANTENHA O USUÁRIO NO CONTROLE
8. REDUZA A CARGA COGNITIVA
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – USO DE CORES (SHNEIDERMAN)

# Utilize cores de forma conservadora e limitada (até 4 cores);
# Assegure que código de cores corresponde à tarefa;
# Pense primeiro em preto e branco;
# Considere os problemas de pares de cores e de usuários com
deficiência visual;

# Utilize cores para ajudar a formatação, aumentar a densidade de

informação e sinalizar mudança de estados;
# Conheça as expectativas dos usuários sobre cores;

# Utilize cores de forma consistente.

 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – QUADROS DE MENSAGEM

Objetivo:
# apresentar mensagens explicativas (ex: de êxito)

# sinalize o tipo de mensagem

# utilize vocabulário simples e claro

# relacione a mensagem à tarefa do usuário

# nas mensagens de erro, apresente:

descrição do erro;
causa do erro;
possível solução.
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – QUADROS DE DIÁLOGO

# objetivo: entrada de dados.

# termos utilizados:
- título significativo, estilo consistente.
- terminologia, fontes, capitulação e justificação consistentes.

# organização:
- sequência de uso: topo-esquerda até baixo-direita.
- agrupamento e ênfase.
- layouts consistentes (proporções, margens, espaços em branco, linhas, quadros).
- indicação de itens habilitados e desabilitados.
- valores default.

# botões padronizados (OK, Cancelar).

# prevenção de erros.
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – QUADROS DE DIÁLOGO

(ERROS COMUNS)
# proporções incomuns
# estrutura excessiva: muitos quadros aninhados, um quadro para cada controle,
muitas linhas divisórias
# tradução literal de metáforas, detalhes estéticos excessivos

# pouco ou muito contraste entre áreas e elementos

# tensão espacial: informação demais ou de menos

# layouts arbitrários: controles de tamanho diferente, alinhamento e posicionamento
arbitrários, agrupamento inexistente ou inadequado
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – PARA SE CRIAR QUADROS DE DIÁLOGO

Dicas:
- analisar a organização do quadro de diálogo;

- verificar termos e abreviações utilizadas;

- analisar instruções e mensagens disponíveis;

- analisar a dinâmica do quadro de diálogo;

- analisar a correspondência entre os widgets e os tipos de dados;
- verificar pontos de prevenção e tratamento de erros.
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – PREENCHIMENTO DE FORMULÁRIOS

# siga orientações gerais para quadros de diálogo;
# utilize widgets* adequados para o tipo de dado;
# forneça movimento de cursor conveniente;
# marque claramente os campos opcionais e obrigatórios;
# sinalize o término do preenchimento (ex: habilitando botão de confirmação);
# instruções e mensagens:
- instruções claras e breves (evite pronomes e referências);
- mensagens explicativas (barra de status ou quadros de mensagem);
- tratamento de erros;
- correção de erros para caracteres individuais ou campos inteiros;
- prevenção de erros;
- mensagens de erro para valores inaceitáveis.

* Widgets são componentes de uma interface gráfica do usuário (GUI).

 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – PARA SE CRIAR MENSAGENS DE ERRO

Dicas:

# verificar se o erro poderia ter sido evitado pelo sistema;

# avaliar os termos utilizados na mensagem de erro;

# analisar o conteúdo da mensagem de erro (o que houve, por que aconteceu,
como contornar ou resolver).
AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – PROBLEMAS DE INTERFACE

Exemplos de mensagens de erro:
AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – PROBLEMAS DE INTERFACE

Exemplo de mensagem de erro:

Diálogo de um editor de texto em 2 línguas.

 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – ÍCONES, ÍNDICES E SÍMBOLOS

Classificação:

# ícone: expressão semelhante ao conteúdo

- conceitos palpáveis, objetos conhecidos.

# índice: expressão indica relação com o conteúdo

- relações de causa-efeito.

# símbolo: expressão arbitrária com relação ao conteúdo

- signos convencionais, utilizados com frequência ou metafóricos.
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – ÍCONES, ÍNDICES E SÍMBOLOS (ERROS COMUNS)

# uso inconsistente em toda a aplicação

# uso de bibliotecas de ícones com identidades visuais distintas

# ícones irreconhecíveis ou sem relação com o referente

# ícones complexos e com detalhes irrelevantes

# elementos secundários dominantes

# uso de ícones para representar conceitos abstratos

# ícones com dependências culturais (já possuem uma identificação histórica)

 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – AVALIÇÃO DE ÍCONES, ÍNDICES E SÍMBOLOS

Dicas

- classificar e verificar a relação com o conteúdo;

- analisar a relação reconhecimento vs. memorização;

- avaliar segundo critérios de imediatez, generalidade, sistematização e
caracterização;
- avaliar signo textual alternativo (desenho + texto).
 AULA 2: CONCEITOS BÁSICOS (CONTINUAÇÃO...)

IHC – APRESENTAÇÃO DE DADOS

# elegância e simplicidade:
- unidade, refinamento, adequação
# escala, contraste e proporção:
- clareza, harmonia, atividade e restrições
# organização e estrutura visual:
- agrupamento, hierarquia, relacionamento e equilíbrio
# módulo e programa:

- foco, flexibilidade e aplicação consistente

# imagem e representação:
- imediatez, generalidade, sistematização e caracterização
# estilo:
- distinção, integridade, abrangência e adequação