Projeto de Interface

Grupos de ControlesFerramentas

Projeto de Interface Homem-Máquina

Prof. Esp. MBA Heuber G. F. Lima

Conceitos e Fundamentos

� Interface Homem X Máquina - É o canal de comunicação entre o homem e o computador, através do qual interagem, visando atingir um objetivo comum.

� Usabilidade - Norma ISO 9241 – Usabilidade como sendo ”a capacidade que um sistema interativo oferece ao seu usuário, em determinado contexto de operação para a realização de uma tarefa de

Page � 3

determinado contexto de operação para a realização de uma tarefa de uma maneira eficaz, eficiente e agradável.”

� Ergonomia - é a disciplina científica relacionada ao entendimento das interações entre seres humanos e outros elementos de um sistema, e também é a profissão que aplica teoria, princípios, dados e métodos para projetar a fim de otimizar o bem-estar humano e o desempenho geral de um sistema [AIE, 2000]

� Sistemas Ergonomicos -são aqueles que estão adaptados à maneira como seus usuários realizam suas tarefas.

Definições Gerais

InterfaceInterface AmbienteAmbiente

Page � 4

UsuáriosUsuários TarefaTarefa

A interface dentro do ciclo de vida...

Page � 5

� http://www.hlera.com.br/clientes/ciclo_de_vida/index.php?s=introducao

Também vimos a prototipação...

Page � 6

ControlesControles

�Sãos os elementos da interface que possibilitam a interação Homem X Máquina.

� Existem inúmeros tipos de controle;

� Podem variar de acordo com a linguagem de programação utilizada;

� Podem ser customizados na aplicação;

Controles

Page � 8

� Podem ser customizados na aplicação;

� Devem ser de fácil manuseio;

� Intuitivos na sua utilização.

Grupo de Controles

� Grupos de ferramentas/controles disponíveis para a construção de interfaces interativas;

� Variam de uma linguagem de programação para outra;

� Em aplicações web, podem ser criadas figuras que assumem o lugar de controles tradicionais;

� Devem ser utilizadas com critérios: estéticos, ergonômicos,

Page � 9

� Devem ser utilizadas com critérios: estéticos, ergonômicos, de usabilidade, acessibilidade...

� Seguem as regras de observarem: O ambiente, o usuário, a tarefa e a própria interface que está sendo proposta.

Botões de ComandoBotões de Comando

�Controles que permitem ao usuário executar ações programadas no sistema;

�O grupo de botões de comando deve ser definido nas situações em que as opções de comandos possíveis forem em número reduzido.

– Seu arranjo pode seguir duas regras:

Botões de comando

Page � 11

– Seu arranjo pode seguir duas regras:

• Eles podem ser alinhados verticalmente e a direita do objeto a que fazem referência, ou

• Horizontalmente e abaixo deste objeto.

– Um botão "por default" deve ser definido, visualmente diferenciado e posicionado:

• Ao alto, se a orientação for vertical, ou

• A esquerda, no caso de uma orientação horizontal.

Botão de seleção

� O botão de seleção é utilizado quando uma entrada de dados corresponder a ativação e desativação de um atributo ou entidade (on-off).

� Eles correspondem aos check-boxes, interruptores, radio-buttons e outros

� interadores similares. Em grupos, os check-boxes e radio-buttons tem

Page � 12

� interadores similares. Em grupos, os check-boxes e radio-buttons tem um comportamento estabelecido por convenção.

� Os primeiros permitem escolhas múltiplas enquanto que os radio-buttons trabalham com escolhas simples e mutuamente exclusivas.

� Segundo essa convenção a utilização de botões de rádio isolados não tem sentido e deve ser evitada

Botões de rádio

�Controles utilizados para a entrada de dados deve prever botões de rádio (radio-button), quando:

– O conjunto de valores possíveis para um dado forem conhecidos;

– Não excederem 7 alternativas; e

– Forem mutuamente exclusivos.

Page � 13

– Forem mutuamente exclusivos.

Caixas de atribuição

�Se os valores possíveis para uma entrada não forem mutuamente exclusivos, estando envolvidos em uma escolha múltipla, deve-se prever um grupo de caixas de atribuição (check-box).

Page � 14

�O layout de um grupo de caixas de atribuição (check-box) está sujeito às mesmas recomendações propostas para um grupo de botões de rádio.

Barra de rolagem (escala)

� A barra de rolagem, ou escala, é um controle que permite ao usuário a introdução de um valor numérico pelo ajuste de um cursor em uma determinada posição sobre uma linha graduada.

Page � 15

� A barra de rolamento é um

exemplo deste tipo de objeto.

Controles Mostradores de Dados

Campo de dados

� Um campo de dado é por definição unilinear. Eles recebem dados cujos valores não podem de ante mão, ser previstos pelo projetista e cujos comprimentos não excedam os 40 ou 50 caracteres.

� Todo o campo de dado deve apresentar

Page � 17

� Todo o campo de dado deve apresentar um rótulo identificativo e convidativo (prompt), para apoiar o usuário na entrada de um dado.

� Isso pode ser feito através da explicitação do formato (dd/mm/aaaa) do dado, de sua unidade (cm, pol) e dos valores possíveis (1 a 10).

Projetando um campo de dados

� Com o objetivo de minimizar as ações do usuário o projetista pode especificar um valor a ser proposto "por default" ao usuário.

� Na escolha de um modo de edição, "inserir entre" deve ter a preferência sobre o modo "escrever sobre".

� Nesse particular, seja qual for a definição ela deve ser mantida consistente durante o projeto da interface.

Page � 18

consistente durante o projeto da interface.

� Os métodos para o tratamento dos valores entrados podem considerar equivalentes as letras maiúsculas e minúsculas.

� O preenchimento dos zeros e dos pontos decimais desprezados pelo usuário também deve ser considerado.

Campo de texto

� O campo de texto é por definição multilinear.

� Seu tamanho em termos do número e do comprimento de linhas deve ser adequado para proporcionar um desempenho eficiente na tarefa de entrada de textos.

� Para a facilidade de leitura o comprimento das linhas não deve exceder os 40 caracteres e a altura do campo deve proporcionar a apresentação de um mínimo de 4 linhas.

Page � 19

de um mínimo de 4 linhas.

Rótulo

� Também conhecido como Label, controle que serve para nomear/rotular outros controles que não possuem essa indicação na interface;

� Como regra, todo controle deverá ser rotulado. Caso não possua rótulo próprio, utiliza-se esse controle para esse fim.

Page � 20

Caixa de Combinação

� Combo-box: É a combinação de uma caixa de texto com uma lista de dados. É usada quando:

– O conjunto de valores possíveis para um dado forem conhecidos;

– Excedem sete alternativas; e

– Forem mutuamente exclusivos.

Page � 21

Alguns erros comuns

� Por quê esse assistente do Office 97 é tão chato?

� Por que fazer uma barra de rolagem com 3 opções?

Page � 22

� Por que fazer opções que se excluem?

Novos Tipos de ControlesNovos Tipos de Controles

Novos Tipos de Controles

� Baseados em imagens, animações;

� Utilizados em linguagens de alto nível;

� Interfaces Ricas;

� SDK de determinados tipos de

Page � 24

� SDK de determinados tipos de Hw;

� Dependem do Ambiente, tarefa que está sendo proposta a interface.

Page � 25

Para fechar, temos que pensar...que pensar...

� Há uma grande confusão entre “layout visual” e design;

� Ainda mais confusão sobre design e usabilidade

� Há quem aposte na estética visual “antes” da usabilidade por acreditar mais no impacto (Hilhorst)

Estética e Layout Visual X Usabilidade

Page � 27

heuber.lima@hotmail.com

heuberlima.wordpress.com